/* 놀이터 입구(2026-10-26 개발자3). 공용 /psych/style.css 위에 덮는다. 본문 14px 이상.
   휴대폰 먼저(2026-10-28 대표 "모바일 이용이 많을거야", "기깔나게 한번 고쳐봐"): 375×667 첫 화면에 카드 8개가 다 들어오게
   - 머리(홈 링크·제목·무료 표시)를 한 줄로, 카드는 이모지와 이름을 한 줄에, 인기·NEW 표시는 설명 앞 작은 딱지로.
   - 목적별 두 묶음(정하기 / 놀기) - 손님이 온 이유대로 바로 고르게. 카드 사이 광고 없음, 광고는 맨 아래 #pyAd 하나. */
.stage.py { padding: 0 0 40px; }
.py-head { margin: 10px 16px 0; }
.py-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.py-home { justify-self: start; font-size: 14px; font-weight: 700; color: #6B7280; text-decoration: none; padding: 8px 0; white-space: nowrap; }
.py-title { font-size: 26px; font-weight: 900; color: #111827; margin: 0; letter-spacing: -0.02em; white-space: nowrap; }
.py-free { justify-self: end; font-size: 13px; font-weight: 800; color: #7048E8; background: #F3F0FF; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.py-sub { text-align: center; font-size: 15px; font-weight: 700; color: #4B5563; margin: 2px 0 0; word-break: keep-all; }

.py-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 16px 0; }
.py-group { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; margin: 12px 2px 0; font-size: 16px; font-weight: 900; color: #111827; }
.py-group span { font-size: 14px; font-weight: 700; color: #6B7280; }
.py-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 92px; padding: 12px 12px 13px; border-radius: 20px; text-decoration: none; color: #fff;
    overflow: hidden; box-shadow: 0 5px 0 rgba(0,0,0,.12); transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.py-card:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.py-card::after { content: ''; position: absolute; right: -28px; bottom: -34px; width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.14); }
.py-row { display: flex; align-items: center; gap: 6px; }
.py-emoji { flex-shrink: 0; font-size: 26px; line-height: 1; animation: pyBob 2.4s ease-in-out infinite; }
.py-card:nth-of-type(2n) .py-emoji { animation-delay: .5s; }
@keyframes pyBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-6deg); } }
.py-name { font-size: 17px; font-weight: 900; line-height: 1.25; word-break: keep-all; white-space: nowrap; }
.py-desc { position: relative; z-index: 1; font-size: 14px; font-weight: 700; opacity: .95; line-height: 1.45; word-break: keep-all; }
.py-tag { display: inline-block; margin-right: 4px; font-size: 13px; font-weight: 900; line-height: 1.3; color: #C2255C; background: #fff; border-radius: 999px; padding: 0 7px; vertical-align: 1px; }
.c-roulette { background: linear-gradient(135deg, #F06595, #D6336C); }
.c-pinball { background: linear-gradient(135deg, #845EF7, #5F3DC4); }
.c-ladder { background: linear-gradient(135deg, #FFA94D, #E8590C); }
.c-balance { background: linear-gradient(135deg, #4DABF7, #1C7ED6); }
.c-dice { background: linear-gradient(135deg, #51CF66, #2B8A3E); }
.c-psych { background: linear-gradient(135deg, #20C997, #0C8599); }
.c-chosung { background: linear-gradient(135deg, #3BC9DB, #1098AD); }   /* 초성 퀴즈 2026-10-27 */
.c-baseball { background: linear-gradient(135deg, #40C057, #2B8A3E); }   /* 숫자야구 2026-10-28 */
.c-reaction { background: linear-gradient(135deg, #FFD43B, #F08C00); }   /* 반응속도 2026-10-29 */
.py-card.wide { grid-column: 1 / -1; }   /* 넓은 카드(한 줄 전체) */
.c-memory { background: linear-gradient(135deg, #DA77F2, #AE3EC9); }   /* 기억력 카드 2026-10-28 - 룰렛 분홍과 겹치지 않게 보라 */
.c-idiom { background: linear-gradient(135deg, #FF922B, #E8590C); }   /* 사자성어 퀴즈 2026-10-31 - 붓글씨 먹빛 대신 눈에 띄는 주황 */
@media (max-width: 767px) { .py-card.m-wide { grid-column: 1 / -1; } }   /* 휴대폰 2열: 놀기 묶음 7칸이라 마지막 한 장은 한 줄 전체 */

.py-study { display: flex; align-items: center; gap: 10px; margin: 18px 16px 0; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1.5px solid #E5E7EB;
    text-decoration: none; color: #374151; font-size: 15px; font-weight: 700; word-break: keep-all; }
.py-study b { color: #111827; font-weight: 900; }
.py-study span:first-child { font-size: 24px; }
.py-study .arr { margin-left: auto; font-size: 24px; color: #9CA3AF; }

@media (prefers-reduced-motion: reduce) { .py-emoji { animation: none; } }
@media (max-width: 767px) { .py-grid { gap: 8px; margin-top: 0; } .py-group { margin-top: 8px; } }   /* 휴대폰: 카드 9장(숫자야구 추가)도 375×667 첫 화면에 들어오게 */
@media (max-width: 360px) { .py-card { padding-left: 10px; padding-right: 8px; } .py-row { gap: 4px; } .py-emoji { font-size: 22px; } .py-name { font-size: 16px; letter-spacing: -0.03em; } }   /* 작은 폰(360 이하): 이름이 카드 끝에 닿지 않게 */
@media (max-width: 340px) { .py-free { display: none; } .py-top { grid-template-columns: auto 1fr; } }   /* 아주 좁은 폰: 무료 표시 빼고 홈·제목만 */
@media (min-width: 768px) {
    .stage.py { max-width: 760px; }
    .py-head { margin-top: 14px; }
    .py-title { font-size: 34px; }
    .py-sub { font-size: 16px; margin-top: 4px; }
    .py-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }   /* PC: 묶음마다 카드 4장이 한 줄 */
    .py-card { min-height: 128px; padding: 16px 14px; gap: 8px; }
    .py-emoji { font-size: 32px; }
    .py-name { font-size: 18px; }
    .py-card.c-baseball { grid-column: span 2; }   /* PC 4열: 놀기 묶음 7칸(사자성어 추가 2026-10-31) = 두 칸 하나 + 여섯 칸 → 두 줄 빈칸 없음 */
}