/* 빔빔 디자인: 깊은 파랑 + 생생한 초록, 반짝 노랑은 칭찬 순간에만.
   글꼴: 제목·공룡 이름은 Black Han Sans(굵고 힘 있게), 나머지는 Noto Sans KR. */
:root {
  --blue: #1257D6;        /* 메인 파랑 */
  --blue-deep: #0A2E6E;   /* 진한 남색: 글자, 시작 화면 */
  --blue-soft: #E4EEFF;   /* 옅은 파랑: 카드 보조 */
  --green: #13B26B;       /* 메인 초록 */
  --green-deep: #0B7E4B;
  --green-soft: #DDF6EA;
  --spark: #FFD12E;       /* 반짝: 정답 순간에만 */
  --bg: #F3F7FC;          /* 차가운 흰 바탕 */
  --surface: #FFFFFF;
  --ink: #0A1F44;
  --ink-soft: #52627D;
  --line: #D6E2F2;
  --radius: 26px;
  --font-display: "Black Han Sans", "Noto Sans KR", system-ui, sans-serif;
  --font-body: "Noto Sans KR", system-ui, -apple-system, sans-serif;
  --font-card: "Noto Sans KR", system-ui, -apple-system, sans-serif; /* 카드에 적힌 공룡 이름: 단순하고 또렷한 글꼴 */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font-body); overscroll-behavior: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--spark); outline-offset: 3px; }
#app { height: 100%; }
.screen { min-height: 100%; height: 100dvh; display: flex; flex-direction: column; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); user-select: none; -webkit-user-select: none; }

/* ---------- 시작 ---------- */
.start {
  align-items: center; justify-content: center; gap: 56px;
  /* 맑은 아쿠아블루 하늘 */
  background: linear-gradient(180deg, #1C9FDB 0%, #36B8E6 42%, #7FD4EF 78%, #A9E2F2 100%);
  color: #fff;
}
.logo { position: relative; text-align: center; }
.brand-pill { display: inline-block; font-family: var(--font-display); font-size: 22px; letter-spacing: .04em; color: var(--blue); background: #fff; padding: 6px 16px; border-radius: 12px; margin-bottom: 14px; box-shadow: 0 4px 0 rgba(6, 30, 80, .3); }
.logo h1 { position: relative; font-family: var(--font-display); font-weight: 400; font-size: clamp(64px, 19vw, 132px); margin: 0; line-height: 1; letter-spacing: -0.02em; text-shadow: 0 6px 0 rgba(6, 50, 110, .45), 0 2px 14px rgba(0, 60, 120, .25); white-space: nowrap; }
.logo .tag { font-size: 18px; font-weight: 800; letter-spacing: .02em; margin: 14px 0 0; opacity: .95; text-shadow: 0 2px 6px rgba(0, 60, 120, .45); }
.spark { position: absolute; color: var(--spark); font-size: 44px; animation: twinkle 1.6s ease-in-out infinite; }
.spark.s1 { top: -26px; right: -24px; }
.spark.s2 { bottom: -10px; left: -26px; font-size: 28px; animation-delay: .6s; }
@keyframes twinkle { 0%,100% { transform: scale(.7) rotate(0); opacity: .55 } 50% { transform: scale(1.15) rotate(20deg); opacity: 1 } }

.big-btn { font-family: var(--font-display); font-weight: 400; font-size: 28px; min-height: 76px; padding: 0 40px; border-radius: 22px; background: var(--surface); color: var(--blue-deep); border: 3px solid var(--line); }
.big-btn.primary { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 6px 0 var(--green-deep); }
.big-btn.primary:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--green-deep); }
.start-btn { font-size: 40px; min-width: 240px; min-height: 96px; }

/* ---------- 홈 ---------- */
.home { gap: 16px; max-width: 760px; margin: 0 auto; width: 100%; height: auto; }
.home-top { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-name { font-family: var(--font-display); font-size: clamp(34px, 11vw, 44px); color: var(--blue); line-height: 1; }
.brand-sub { font-family: var(--font-display); font-size: clamp(34px, 11vw, 44px); line-height: 1; color: var(--green); }
.icon-btn { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--surface); color: var(--blue-deep); border: 2px solid var(--line); }
.icon-btn.ghost { background: rgba(255,255,255,.85); border-color: transparent; }

.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; }
.chip.review { border-color: #FFC9A8; color: #B4471A; }
.chip.review.on { background: #E8662E; border-color: #E8662E; color: #fff; }
.chip { font-weight: 800; font-size: 16px; padding: 10px 4px; border-radius: 14px; background: var(--surface); color: var(--blue-deep); border: 2px solid var(--line); white-space: nowrap; display: flex; flex-direction: column; gap: 0; align-items: center; line-height: 1.25; }
.chip small { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.chip.on { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }
.chip.on small { color: #A9C2EE; }

.modes { display: grid; gap: 12px; }
.step-label { margin: 8px 0 -2px; display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 15px; color: var(--blue-deep); }
.step-label span { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--blue-deep); color: #fff; font-size: 13px; }
.mode-card.soon { background: transparent; border: 3px dashed var(--line); color: var(--ink-soft); min-height: 92px; }
.mode-card.soon .mode-icon { background: var(--blue-soft); color: var(--ink-soft); }
.mode-card.soon .mode-text b { color: var(--ink-soft); }
.mode-card { display: flex; align-items: center; gap: 18px; text-align: left; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 2px solid var(--line); min-height: 108px; width: 100%; position: relative; overflow: hidden; }
.mode-card.teacher { background: var(--green); color: #fff; border: 0; box-shadow: 0 6px 0 var(--green-deep); }
.mode-card.teacher:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--green-deep); }
.mode-card.teacher::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.08); }
.mode-card.flash { background: var(--blue); color: #fff; border: 0; box-shadow: 0 6px 0 #0B3E9C; min-height: 108px; }
.mode-go { margin-left: auto; width: 44px; height: 44px; flex: none; border-radius: 50%; background: #fff; color: var(--blue); display: grid; place-items: center; font-size: 18px; padding-left: 3px; }
/* 설정은 버튼과 다르게: 흰 바탕, 회색 글씨, 이름표 */
.opts { margin-top: -4px; display: grid; gap: 6px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 2px dashed var(--line); }
.opt-row { display: flex; align-items: center; gap: 10px; }
.opt-name { flex: none; width: 52px; font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.opt-segs { flex: 1; display: flex; gap: 4px; background: var(--bg); border-radius: 12px; padding: 3px; }
.opt-segs .seg { flex: 1; min-height: 36px; font-size: 14px; font-weight: 700; color: var(--ink-soft); border-radius: 10px; }
.opt-segs .seg.on { background: var(--blue-deep); color: #fff; }
.review-link { justify-self: start; font-size: 15px; font-weight: 800; color: #B4471A; padding: 6px 4px; }
.mode-main { display: flex; align-items: center; gap: 18px; text-align: left; color: inherit; }
.mode-card.manual { border: 3px solid var(--blue-soft); }
.mode-card.quiz { background: var(--blue-deep); color: #fff; border: 0; box-shadow: 0 6px 0 #061A42; }
.mode-card.quiz:active { transform: translateY(3px); box-shadow: 0 3px 0 #061A42; }
.mode-icon { width: 60px; height: 60px; flex: none; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.mode-card.manual .mode-icon { background: var(--blue-soft); color: var(--blue); }
.mode-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mode-text b { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.1; }
.mode-card.manual .mode-text b { color: var(--blue-deep); }
.mode-text span { font-size: 15px; font-weight: 500; opacity: .85; }
.segs { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(4, 30, 90, .28); border-radius: 16px; padding: 4px; }
.seg { font-weight: 800; font-size: 17px; min-height: 48px; border-radius: 12px; color: #fff; }
.seg.on { background: #fff; color: var(--blue); }
.home-foot { text-align: center; color: var(--ink-soft); font-size: 13px; font-weight: 500; margin-top: auto; padding-top: 8px; }

.notice { margin: 0; padding: 0 4px; color: var(--ink-soft); font-size: 13px; font-weight: 500; line-height: 1.4; }

.voice-box { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 12px 16px; }
.voice-box summary { font-weight: 800; font-size: 16px; color: var(--blue-deep); cursor: pointer; }
.voice-box summary small { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.voice-row { display: flex; gap: 8px; margin-top: 10px; }
.voice-row select { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); }
.voice-test { font-weight: 800; font-size: 16px; padding: 0 16px; border-radius: 12px; background: var(--blue); color: #fff; }
.voice-tip { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 메인 대표 공룡 (돌아가며 등장) */
.hero { position: relative; display: block; width: 100%; height: clamp(220px, 34vh, 340px); border-radius: var(--radius); overflow: hidden; text-align: left;
  background:
    radial-gradient(130% 40% at 50% 112%, var(--green) 0 48%, transparent 48.5%),
    linear-gradient(180deg, #CFE3FF 0%, #EAF3FF 70%);
  border: 0; box-shadow: 0 6px 0 var(--blue-soft); }
.hero-slide { position: absolute; inset: 26% -2% 3% 34%; display: grid; place-items: end center; opacity: 0; transform: translateX(24px) scale(.96); transition: opacity .5s ease, transform .5s ease; }
.hero-slide.on { opacity: 1; transform: none; }
.hero-slide .art-img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 10px 10px rgba(10, 31, 68, .2)); }
.hero-slide .art-placeholder { font-size: clamp(120px, 22vh, 200px); }
.hero-text { position: absolute; left: 18px; top: 16px; right: 18px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.hero-text small { font-weight: 800; font-size: 13px; color: var(--blue); }
.hero-text b { font-family: var(--font-card); font-weight: 700; font-size: clamp(26px, 7.2vw, 42px); color: var(--blue-deep); line-height: 1.05; word-break: keep-all; }
.hero-go { z-index: 2; position: absolute; left: 18px; bottom: 16px; font-family: var(--font-display); font-size: 20px; color: #fff; background: var(--blue); padding: 8px 18px; border-radius: 14px; box-shadow: 0 4px 0 #0B3E9C; }

/* 시작 화면 공룡들 */
.start { position: relative; overflow: hidden; }
.parade { position: absolute; left: 0; right: 0; bottom: 0; height: 46vh; pointer-events: none; }
.parade img { position: absolute; bottom: 4vh; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(6, 30, 80, .35)); }
.parade .p-mid { width: 56vh; max-width: 84vw; left: 50%; transform: translateX(-46%); bottom: 16vh; }
.parade .p-left { width: 46vh; max-width: 64vw; left: -8%; bottom: 8vh; }
.parade .p-right { width: 40vh; max-width: 50vw; right: 2%; bottom: 6vh; transform: scaleX(-1); }
.start .logo, .start .start-btn { position: relative; z-index: 2; }
/* 공룡들의 자연스러운 움직임 (사진 한 장으로 할 수 있는 만큼) */
.parade img { transform-origin: 50% 100%; will-change: transform; }
/* 티라노: 천천히 앞으로 걸어갔다가 돌아옴, 걸음마다 몸이 살짝 오르내림 */
.parade .p-left { animation: walk 11s ease-in-out infinite alternate, step-bob .9s ease-in-out infinite; }
@keyframes walk { 0% { translate: -4% 0 } 45% { translate: 8% 0 } 55% { translate: 8% 0 } 100% { translate: -4% 0 } }
@keyframes step-bob { 0%,100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-1.2%) rotate(-.6deg) } }
/* 브라키오: 긴 목을 천천히 흔들며 숨쉬기 */
.parade .p-mid { transform-origin: 30% 100%; animation: sway 7.5s ease-in-out infinite; }
@keyframes sway { 0%,100% { transform: translateX(-46%) rotate(0) scale(1) } 30% { transform: translateX(-46%) rotate(-1.4deg) scale(1.006, 1.012) } 65% { transform: translateX(-46%) rotate(.8deg) scale(1) } }
/* 트리케라톱스: 고개를 숙여 풀을 뜯다가 다시 들기 */
.parade .p-right { transform-origin: 50% 100%; animation: graze 6.5s ease-in-out infinite; }
@keyframes graze { 0%,100% { transform: scaleX(-1) rotate(0) } 35% { transform: scaleX(-1) rotate(2.6deg) translateY(1%) } 55% { transform: scaleX(-1) rotate(2.6deg) translateY(1%) } 80% { transform: scaleX(-1) rotate(-.4deg) } }
/* 메인 공룡도 살짝 숨쉬기 */
.hero-slide.on .art-img { animation: step-bob 1.1s ease-in-out infinite, walk-small 9s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes walk-small { 0% { translate: -3% 0 } 100% { translate: 3% 0 } }
@keyframes breathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.012, 1.02) } }
.start { justify-content: flex-start; padding-top: 12vh; }

/* ---------- 카드 ---------- */
.player { padding: 0; position: relative; overflow: hidden; }
.topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 0; z-index: 3; }
.topbar-spacer { width: 56px; }
.dots { flex: 1; display: flex; justify-content: center; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(10, 46, 110, .18); transition: all .2s; }
.dots i.done { background: var(--green); }
.dots i.now { background: var(--blue); width: 26px; border-radius: 5px; }
.stage { flex: 1; display: flex; touch-action: pan-y; perspective: 1400px; }
.face { flex: 1; display: grid; place-items: center; }
.face.enter { animation: enter .16s ease-out; }
/* 카드 넘기기: 실제 카드처럼 옆으로 휙 뒤집힘 */
.face.flip-in { animation: flip-in .28s cubic-bezier(.2,.7,.3,1) both; transform-origin: 50% 50%; backface-visibility: hidden; }
.mode-flash .face.flip-in { animation-duration: .2s; }
@keyframes flip-in { 0% { transform: rotateY(-90deg) scale(.96); opacity: .4 } 100% { transform: rotateY(0) scale(1); opacity: 1 } }
@keyframes enter { from { opacity: 0; transform: scale(.97) } to { opacity: 1; transform: none } }
.face.front { background: radial-gradient(90% 70% at 50% 45%, #fff 0%, var(--tint, #E4EEFF) 70%); }
.art-img { width: min(92vw, 86vh); height: min(92vw, 86vh); object-fit: contain; pointer-events: none; filter: drop-shadow(0 18px 18px rgba(10, 31, 68, .18)); }
.art-placeholder { font-size: min(62vw, 52vh); line-height: 1; }
.face.back { background: var(--surface); position: relative; }
.name { font-family: var(--font-card); font-weight: 700; color: var(--blue-deep); line-height: 1.08; text-align: center; display: flex; flex-direction: column; letter-spacing: -0.01em; word-break: keep-all; }
.sparkles b { position: absolute; color: var(--spark); font-size: 48px; font-weight: 400; animation: pop .9s ease-out both; text-shadow: 0 2px 0 rgba(0,0,0,.06); }
/* 반짝이는 카드 네 귀퉁이에만 (가운데 이름 글자를 가리지 않게) */
.sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.side.back .name { position: relative; z-index: 1; }
.sparkles b:nth-child(1) { top: 6%; left: 8%; }
.sparkles b:nth-child(2) { top: 5%; right: 10%; animation-delay: .08s; font-size: 34px; color: var(--green); }
.sparkles b:nth-child(3) { bottom: 7%; left: 10%; animation-delay: .16s; font-size: 32px; color: var(--blue); }
.sparkles b:nth-child(4) { bottom: 6%; right: 8%; animation-delay: .12s; }
.sparkles b:nth-child(5) { top: 6%; left: 46%; animation-delay: .2s; font-size: 26px; color: var(--green); }
@keyframes pop { 0% { transform: scale(0) rotate(-30deg); opacity: 0 } 60% { transform: scale(1.3) rotate(10deg); opacity: 1 } 100% { transform: scale(1) rotate(0); opacity: .95 } }
.nav { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: rgba(255,255,255,.85); color: var(--blue-deep); z-index: 3; opacity: .6; }
.nav.prev { left: 16px; }
.nav.next { right: 16px; }
.paused { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(10, 31, 68, .45); color: #fff; font-weight: 800; font-size: 20px; }
.paused svg { width: 120px; height: 120px; background: var(--green); border-radius: 36px; padding: 28px; box-shadow: 0 6px 0 var(--green-deep); }
.paused[hidden] { display: none; }

/* ---------- 실제 카드처럼 보이는 카드 묶음 ---------- */
.player { background: #DCE7F7; }
.deck { position: relative; flex: 1; margin: max(64px, calc(env(safe-area-inset-top) + 56px)) 16px 96px; perspective: 1600px; }
.deck .edge { position: absolute; inset: 0; border-radius: 26px; background: #fff; box-shadow: 0 2px 6px rgba(10,31,68,.12); }
.deck .edge.e1 { transform: translate(6px, 8px) rotate(1.2deg); background: #F4F7FC; }
.deck .edge.e2 { transform: translate(-5px, 14px) rotate(-1.6deg); background: #EAF0F9; }
.card3d { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .42s cubic-bezier(.2,.75,.25,1), opacity .3s; will-change: transform; }
.card3d .side { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; backface-visibility: hidden; display: grid; place-items: center;
  box-shadow: 0 14px 28px rgba(10,31,68,.18); border: 2px solid #AEB9C9; }
.card3d .side.front { background: radial-gradient(90% 70% at 50% 45%, #fff 0%, var(--tint, #E4EEFF) 75%); }
.card3d .side.front .art-img { position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; }
.card3d .side.back { background: #fff; }
.present-turn .card3d .side.back { transform: rotateY(180deg); }
.present-turn .card3d.turned { transform: rotateY(180deg); }
.present-turn .card3d { transition: transform .5s cubic-bezier(.35,.1,.25,1); }
/* 뒷장을 앞으로: 묶음 뒤에서 위로 들려 올라왔다가 앞에 탁 놓임 */
.card3d.arriving { transform: translateY(-38%) rotate(-4deg) scale(.94); opacity: 0; transition: none; }
.card3d.leaving { transform: translateY(6%) scale(.97); opacity: 0; transition: transform .3s ease-in, opacity .3s ease-in; z-index: -1; }
.present-turn .card3d.turned.arriving { transform: translateY(-38%) rotateY(180deg) scale(.94); }
.mode-flash .card3d { transition-duration: .22s, .2s; }
.mode-flash .present-turn .card3d { transition-duration: .3s; }
.segs.two { grid-template-columns: 1fr 1fr; }

/* ---------- 맞혀보기 ---------- */
.quiz-screen { padding: 0; position: relative; overflow: hidden; background: var(--bg); }
.quiz-levels { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 76px; right: 16px; z-index: 4; background: rgba(255,255,255,.9); }
.quiz-levels .seg { color: var(--blue-deep); min-height: 40px; font-size: 15px; }
.quiz-levels .seg.on { background: var(--blue); color: #fff; }
.quiz-art { flex: 1 1 58%; position: relative; min-height: 0; }
.quiz-art .art-placeholder { font-size: min(44vw, 34vh); }
.quiz-art .art-img { width: min(80vw, 50vh); height: min(80vw, 50vh); }
.quiz-choices { display: grid; gap: 10px; padding: 14px 16px max(16px, env(safe-area-inset-bottom)); background: var(--bg); }
.choice { font-family: var(--font-card); font-weight: 700; font-size: clamp(24px, 6.4vw, 34px); color: var(--blue-deep); background: var(--surface); border: 3px solid var(--line); border-radius: 20px; min-height: 72px; padding: 8px 12px; word-break: keep-all; box-shadow: 0 4px 0 var(--line); }
.choice:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--line); }
.choice.right { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 4px 0 var(--green-deep); animation: bounce .4s ease-out; }
.choice.wrong { background: #FFE7DE; border-color: #F5A788; color: #B4471A; animation: shake .35s ease-in-out; }
.choice:disabled:not(.right):not(.wrong) { opacity: .45; }
@keyframes shake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-8px) } 75% { transform: translateX(8px) } }
@keyframes bounce { 0% { transform: scale(1) } 50% { transform: scale(1.06) } 100% { transform: scale(1) } }
.stars { font-size: 64px; color: var(--spark); letter-spacing: 6px; line-height: 1; text-shadow: 0 4px 0 rgba(6, 30, 80, .3); }
.end h2.score { font-size: clamp(52px, 14vw, 96px); white-space: nowrap; }
.stars span { color: rgba(255,255,255,.25); }
.quiz-choices.n4 { grid-template-columns: 1fr 1fr; }
.quiz-choices.n4 .choice { font-size: clamp(20px, 5.2vw, 30px); min-height: 66px; }
@media (min-width: 700px) { .quiz-choices { grid-template-columns: repeat(3, 1fr); } .quiz-choices.n2 { grid-template-columns: 1fr 1fr; } .quiz-choices.n4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 놀기: 공통 ---------- */
.play-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode-card.play { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 130px; color: #fff; border: 0; }
.mode-card.play .mode-text b { font-size: 26px; }
.mode-card.match { background: #E8662E; box-shadow: 0 6px 0 #B4471A; }
.mode-card.puzzle { background: #7A4FE0; box-shadow: 0 6px 0 #5631B0; }
.mode-card.play:active { transform: translateY(3px); }
.game { gap: 12px; max-width: 760px; margin: 0 auto; width: 100%; }
.game-top { display: flex; align-items: center; gap: 8px; }
.game-title { flex: 1; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: 28px; color: var(--blue-deep); }
.game-levels { background: var(--blue-soft); }
.game-levels .seg { color: var(--blue-deep); }
.game-levels .seg.on { background: var(--blue); color: #fff; }

/* 짝맞추기 */
.match-grid { flex: 1; display: grid; gap: 10px; min-height: 0; grid-template-rows: repeat(var(--rows), 1fr); }
.match-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.match-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mcard { perspective: 800px; min-height: 0; padding: 0; }
.mcard-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .35s ease; transform-style: preserve-3d; }
.mcard.flip .mcard-inner, .mcard.done .mcard-inner { transform: rotateY(180deg); }
.mcard-back, .mcard-front { position: absolute; inset: 0; border-radius: 20px; backface-visibility: hidden; display: grid; place-items: center; overflow: hidden; }
.mcard-back { background: linear-gradient(135deg, var(--blue) 0%, #0E47B4 100%); color: var(--spark); font-size: 44px; box-shadow: 0 5px 0 #0B3E9C; }
.mcard-front { transform: rotateY(180deg); background: radial-gradient(90% 80% at 50% 50%, #fff 0%, var(--blue-soft) 100%); border: 3px solid var(--line); }
.mcard-front .art-img { width: 96%; height: 96%; object-fit: contain; }
.mcard-front .art-placeholder { font-size: 56px; }
.mcard.peek .mcard-front { border-color: var(--spark); }
.mcard.done .mcard-front { border-color: var(--green); background: radial-gradient(90% 80% at 50% 50%, #fff 0%, var(--green-soft) 100%); animation: bounce .4s ease-out; }

/* 퍼즐: 공룡만 꽉 차게 잘라서, 모든 조각에 공룡 몸이 보이게 */
.puzzle-board { --w: min(92vw, calc(46vh * var(--ratio)), 620px); position: relative; width: var(--w); height: calc(var(--w) / var(--ratio)); margin: 0 auto; display: grid;
  grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); border-radius: 16px; overflow: hidden; background: #fff; border: 4px solid var(--blue-deep); }
.puzzle-hint { position: absolute; inset: 0; background: var(--img) center / 100% 100% no-repeat; opacity: .32; filter: saturate(.7); pointer-events: none; } /* 색이 살짝 보이는 밑그림: 하늘색·풀색으로 자리를 찾게 */
.slot { position: relative; border: 2px dashed rgba(10, 46, 110, .35); }
.piece { --pw: calc(min(92vw, calc(46vh * var(--ratio)), 620px) / var(--n) * .8); width: var(--pw); height: calc(var(--pw) / var(--ratio)); border-radius: 8px; touch-action: none; cursor: grab;
  background: #fff var(--img) no-repeat;
  background-size: calc(var(--n) * 100%) calc(var(--n) * 100%);
  background-position: calc(var(--c) / (var(--n) - 1) * 100%) calc(var(--r) / (var(--n) - 1) * 100%);
  box-shadow: 0 4px 0 rgba(10, 46, 110, .25), 0 0 0 2px var(--line) inset; }
.piece.dragging { position: fixed; z-index: 50; cursor: grabbing; box-shadow: 0 12px 24px rgba(10, 31, 68, .35), 0 0 0 3px var(--spark) inset; }
.piece.placed { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; cursor: default; animation: snap .35s ease-out; }
.slot:has(.piece.placed) { border-color: transparent; }
@keyframes snap { 0% { filter: brightness(1.4); } 100% { filter: none; } }
.puzzle-tray { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 10px; padding: 6px 0; min-height: 0; }
.puzzle-board.complete { border-color: var(--green); animation: bounce .5s ease-out; }
.puzzle-board.complete .puzzle-hint { opacity: 0; }

/* ---------- 끝 ---------- */
.end { align-items: center; justify-content: center; text-align: center; gap: 8px; position: relative; overflow: hidden; background: linear-gradient(180deg, #1A6BF0 0%, var(--blue) 60%, #0E47B4 100%); color: #fff; }
.end h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(72px, 20vw, 132px); margin: 0; line-height: 1; text-shadow: 0 6px 0 rgba(6, 30, 80, .35); }
.end p { font-weight: 800; font-size: 20px; letter-spacing: .04em; opacity: .9; margin: 12px 0 40px; }
.end-actions { display: grid; gap: 12px; width: min(100%, 360px); }
.end .big-btn:not(.primary) { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.end-burst b { position: absolute; color: var(--spark); font-size: 38px; font-weight: 400; animation: pop 1s ease-out both, twinkle 1.6s 1s ease-in-out infinite; }
.end-burst b:nth-child(1) { top: 12%; left: 12%; }
.end-burst b:nth-child(2) { top: 18%; right: 14%; animation-delay: .1s; color: #7CF0B6; }
.end-burst b:nth-child(3) { top: 34%; left: 6%; animation-delay: .2s; font-size: 24px; }
.end-burst b:nth-child(4) { bottom: 22%; right: 8%; animation-delay: .15s; color: #7CF0B6; }
.end-burst b:nth-child(5) { bottom: 12%; left: 18%; animation-delay: .25s; font-size: 28px; }
.end-burst b:nth-child(6) { top: 8%; left: 48%; animation-delay: .3s; font-size: 22px; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 가로 화면: 카드를 가로로 크게, 넘기기 버튼은 양옆 가운데 */
@media (orientation: landscape) and (max-height: 600px) {
  .deck { margin: 46px 92px 14px; }
  .nav { top: 50%; bottom: auto; transform: translateY(-50%); }
  .topbar { padding-top: 6px; }
  .topbar .icon-btn { width: 48px; height: 48px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .start { padding-top: 5vh; }
  .start h1 { font-size: 64px; }
  .brand-pill { margin-bottom: 4px; }
  .start-btn { min-height: 64px; font-size: 30px; }
}

/* 카드 화면 '가로' 설정 + 휴대폰이 세로일 때: 화면 전체를 옆으로 눕혀서 가로 카드로 (휴대폰을 왼쪽으로 돌려서 봄) */
@media (orientation: portrait) {
  .screen.player.orient-land { position: fixed; top: 0; left: 0; width: 100vh; width: 100dvh; height: 100vw; min-height: 0;
    transform-origin: top left; transform: rotate(90deg) translateY(-100%); }
  .player.orient-land .stage { touch-action: none; }
  .player.orient-land .deck { margin: 46px 92px 14px; }
  .player.orient-land .nav { top: 50%; bottom: auto; transform: translateY(-50%); }
  .player.orient-land .topbar { padding-top: 6px; }
  .player.orient-land .topbar .icon-btn { width: 48px; height: 48px; }
}

/* ---------- 어디 있게? ---------- */
.mode-card.find { background: #0E8F9E; color: #fff; border: 0; box-shadow: 0 6px 0 #096570; }
.mode-card.find:active { transform: translateY(3px); box-shadow: 0 3px 0 #096570; }
.mode-card.find .mode-icon { background: rgba(255,255,255,.18); color: #fff; }
.find-dots { display: flex; justify-content: center; gap: 8px; }
.find-dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(10,46,110,.15); transition: all .2s; }
.find-dots i.now { background: var(--blue); transform: scale(1.25); }
.find-dots i.done { background: var(--green); }
.find-floor { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 14px 12px; padding: 6px 2px 10px; }
.fcard { width: calc(50% - 8px); aspect-ratio: 4 / 3; padding: 0; border-radius: 18px; background: radial-gradient(90% 80% at 50% 50%, #fff 0%, var(--blue-soft) 100%); border: 3px solid #fff; box-shadow: 0 6px 14px rgba(10,31,68,.16);
  display: grid; place-items: center; overflow: hidden; transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
  animation: deal .32s cubic-bezier(.2,.8,.3,1.2) backwards; animation-delay: calc(var(--i) * 120ms); transition: transform .25s, opacity .25s; }
.fcard .art-img { width: 92%; height: 92%; object-fit: contain; filter: none; }
.fcard .art-placeholder { font-size: 56px; }
.find-floor.n6 .fcard { width: calc(50% - 8px); }
.fcard.found { transform: translate(0,0) rotate(0) scale(1.12); border-color: var(--spark); box-shadow: 0 0 0 5px var(--spark), 0 12px 24px rgba(10,31,68,.25); z-index: 2; }
.fcard.fade { opacity: .25; }
.fcard.nope { animation: shake .35s ease; }
@keyframes deal { from { transform: translate(0, -60vh) rotate(-20deg); opacity: 0 } to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 1 } }
@media (orientation: landscape) { .fcard, .find-floor.n6 .fcard { width: calc(33% - 12px); } .find-floor.n4 .fcard { width: calc(25% - 12px); } }

/* ---------- 알 깨기 ---------- */
.mode-card.eggplay { background: #F2A516; box-shadow: 0 6px 0 #C07C05; }
.mode-card.play.wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 18px; min-height: 108px; }
.mode-card.eggplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
.egg-stage { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; }
.egg-btn { position: relative; z-index: 2; width: min(62vw, 46vh); aspect-ratio: 4 / 5; padding: 0; background: none; border: 0; transform-origin: 50% 90%; }
.egg-btn.wobble { animation: wobble .42s ease; }
@keyframes wobble { 0%,100% { transform: rotate(0) } 20% { transform: rotate(-9deg) } 45% { transform: rotate(8deg) } 70% { transform: rotate(-4deg) } }
/* 그림자: 흔들릴 때마다 다시 그려야 하는 filter 대신 가벼운 box-shadow (휴대폰 '탭 중지' 줄이기) */
.egg { position: absolute; inset: 0; border-radius: 50% 50% 50% 50% / 60% 60% 42% 42%; box-shadow: 0 16px 22px -6px rgba(10,31,68,.24); transition: box-shadow .3s; }
.hatch .egg { box-shadow: none; }
.egg-nest { transition: opacity .4s ease; }
.hatch .egg-nest { opacity: 0; } /* 알이 깨지면 알 그림자도 사라짐 (공룡 그림엔 발밑 그림자가 있음) */
.egg-half { position: absolute; inset: 0; border-radius: inherit; background:
  radial-gradient(9% 7% at 30% 30%, rgba(150,110,60,.28) 98%, transparent), radial-gradient(6% 5% at 66% 22%, rgba(150,110,60,.25) 98%, transparent),
  radial-gradient(8% 6% at 72% 62%, rgba(150,110,60,.22) 98%, transparent), radial-gradient(5% 4% at 38% 74%, rgba(150,110,60,.22) 98%, transparent),
  radial-gradient(60% 50% at 35% 28%, rgba(255,255,255,.75), transparent 70%), var(--egg); transition: transform .55s cubic-bezier(.3,.7,.4,1), opacity .55s; }
.egg-crack { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.egg-crack polyline { fill: none; stroke: #6B4A1E; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .25s; }
.egg-dino { position: absolute; z-index: 1; width: min(92vw, 70vh); aspect-ratio: 3 / 2; display: grid; place-items: center; opacity: 0; transform: translateY(30%) scale(.3); transition: transform .5s cubic-bezier(.2,.9,.3,1.3), opacity .3s; }
.egg-dino .art-img { width: 100%; height: 100%; object-fit: contain; filter: none; } /* 그림에 이미 발밑 그림자가 있음 */
.egg-nest { position: absolute; top: calc(50% + min(31vw, 23vh) - 1%); width: min(70vw, 52vh); height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(120,84,40,.35), transparent); }
.hatch .egg-crack { opacity: 0; }
.hatch .egg-top { transform: translate(-30%, -70%) rotate(-40deg); opacity: 0; }
.hatch .egg-bot { transform: translateY(25%) scale(.9); opacity: 0; }
.hatch .egg-dino { opacity: 1; transform: none; z-index: 3; }
.egg-name { position: absolute; z-index: 4; bottom: 8%; left: 0; right: 0; text-align: center; font-family: var(--font-card); font-weight: 700; font-size: clamp(34px, 9vw, 56px); color: var(--blue-deep); opacity: 0; transform: translateY(20px) scale(.9); transition: opacity .3s .35s, transform .4s .35s cubic-bezier(.2,.9,.3,1.3); pointer-events: none; }
.hatch .egg-name { opacity: 1; transform: none; }

/* ---------- 움직이는 공룡 (영상) ---------- */
.mode-card.videoplay { background: #D9455F; box-shadow: 0 6px 0 #A82C43; color: #fff; border: 0; }
.mode-card.videoplay:active { transform: translateY(3px); box-shadow: 0 3px 0 #A82C43; }
.mode-card.videoplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
.video-btn { margin-left: auto; background: #D9455F; color: #fff; border: 0; }
.video-btn[hidden] { display: none; }
.video-layer { position: fixed; inset: 0; z-index: 50; background: #000; display: flex; align-items: center; justify-content: center; animation: vidIn .2s ease-out; }
.video-layer.out { opacity: 0; transition: opacity .25s; }
.video-layer video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 24px; font-weight: 800; cursor: pointer; }
.video-name { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); padding: 14px 28px; border-radius: 22px; background: #fff; color: var(--ink, #222); font-family: var(--font-card, inherit); font-weight: 800; font-size: clamp(30px, 8vw, 64px); white-space: nowrap; box-shadow: 0 8px 0 rgba(0,0,0,.25); animation: vidName .4s ease-out; }
@keyframes vidIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes vidName { 0% { transform: translateX(-50%) scale(.3); opacity: 0 } 70% { transform: translateX(-50%) scale(1.12); opacity: 1 } 100% { transform: translateX(-50%) scale(1) } }
.screen.videos { padding-top: 76px; }
.videos-title { margin: 0 auto; font-size: 24px; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 12px; }
.video-tile { position: relative; border: 0; padding: 0; border-radius: 18px; overflow: hidden; background: #000; aspect-ratio: 3 / 4; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.18); }
.video-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-tile-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.85); color: #D9455F; font-size: 24px; display: grid; place-items: center; }
.video-tile b { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 10px; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; font-size: 17px; text-align: left; }

/* 홈 대표 공룡: 소리가 있으면 톡 눌렀을 때 들썩 */
.hero-slide.roaring .art-img { animation: hero-roar .6s ease-out; }
@keyframes hero-roar { 0% { transform: scale(1) } 30% { transform: scale(1.08) rotate(-2deg) } 60% { transform: scale(1.03) rotate(1deg) } 100% { transform: scale(1) } }
.hero-slide.has-sound.on::after { content: "🔊"; position: absolute; right: 8%; top: 4%; font-size: 22px; background: rgba(255,255,255,.85); border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(10,31,68,.15); }

/* 플래시카드 '빠르게': 카드가 더 빨리 탁 내려앉게 (그림과 이름 소리가 같이 나오도록) */
.mode-flash.speed-fast .card3d { transition: transform .2s cubic-bezier(.2,.75,.25,1), opacity .12s; }
.mode-flash.speed-fast .card3d.leaving { transition: transform .15s ease-in, opacity .15s ease-in; }

/* 어디 있게?: 맞히면 아래에 이름 글자 */
.find-name { min-height: 64px; display: grid; place-items: center; font-family: var(--font-card); font-weight: 700; font-size: clamp(30px, 8.5vw, 52px); color: var(--blue-deep); opacity: 0; transform: translateY(10px) scale(.9); transition: opacity .25s, transform .3s cubic-bezier(.2,1.4,.4,1); word-break: keep-all; text-align: center; }
.find-name.show { opacity: 1; transform: none; }
/* 알 깨기: 위에 안내 글자 */
.game-hint { margin: 6px 0 0; text-align: center; font-family: var(--font-display); font-size: clamp(22px, 6vw, 32px); color: var(--blue-deep); transition: opacity .25s; }
.game-hint.hide { opacity: 0; }

/* 난이도 버튼이 몇 개든 한 줄로 */
.game-levels { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.game-levels .seg { font-size: clamp(13px, 3.6vw, 17px); padding: 0 2px; }
/* 짝맞추기 10쌍: 4줄 */
.match-grid.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 7px; }
/* 퍼즐 25·36조각: 쟁반 조각을 조금 작게 */
.piece[style*="--n:5"], .piece[style*="--n:6"] { --pw: calc(min(92vw, calc(46vh * var(--ratio)), 620px) / var(--n) * .72); }

/* 플래시카드 재생 버튼: 크고 또렷하게, 살짝 두근두근 */
.mode-card.flash .mode-go { width: 72px; height: 72px; padding-left: 4px; box-shadow: 0 4px 0 rgba(4, 30, 90, .35); animation: go-pulse 1.6s ease-in-out infinite; }
@keyframes go-pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.08) } }
/* 속도·넘기기 버튼: 칸마다 테두리를 보여서 구분이 잘 되게 */
.opt-segs { gap: 6px; background: transparent; padding: 0; }
.opt-segs .seg { border: 2px solid var(--line); background: var(--surface); color: var(--ink-soft); min-height: 40px; }
.opt-segs .seg.on { border-color: var(--blue-deep); background: var(--blue-deep); color: #fff; }
/* 움직이는 공룡: 이름 가운데 */
.video-tile b { text-align: center; }

/* 홈: 카드 고르기 (종류별·시대별) */
.sets { display: grid; gap: 6px; }
.sets-name { font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.sets-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sets-row::-webkit-scrollbar { display: none; }
.set-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--blue-deep); font-weight: 800; font-size: 16px; white-space: nowrap; }
.set-chip small { font-size: 12px; font-weight: 800; color: var(--ink-soft); background: var(--bg); border-radius: 999px; padding: 2px 7px; }
.set-chip.on { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.set-chip.on small { background: rgba(255,255,255,.2); color: #fff; }

/* 넘기기 '날리기': 맨 앞 카드를 손으로 던진 것처럼 빙글 돌며 화면 밖으로 날려 버리고,
   그 밑의 다음 카드는 제자리에서 툭 놓인다 (위에서 떨어지지 않음) */
.present-fly .card3d { transition: transform .14s cubic-bezier(.5,0,.75,0), opacity .06s; }
.present-fly .card3d.arriving { transform: translateY(-3%) scale(1.03); opacity: 0; transition: none; }
.present-fly .card3d.leaving { transform: translate(var(--fx, 60vw), -115vh) rotate(var(--fr, 28deg)); opacity: 1; z-index: 3; transition: transform .38s cubic-bezier(.25,.55,.4,1); }
.mode-flash.speed-fast .present-fly .card3d { transition: transform .1s cubic-bezier(.5,0,.75,0), opacity .05s; }
.mode-flash.speed-fast .present-fly .card3d.arriving { transition: none; }
.mode-flash.speed-fast .present-fly .card3d.leaving { transition: transform .26s cubic-bezier(.25,.55,.4,1); }

/* 첫 화면 풍경 조각: 먼 산(흐릿하게) + 초록 언덕 + 양쪽 구석 고사리. 가운데는 비워서 공룡이 잘 보이게 */
.scene { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.scene img { position: absolute; }
.scene .sc-mtn { left: 0; width: 100%; bottom: 16vh; height: 30vh; object-fit: cover; object-position: center 45%; opacity: .6;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 80%, transparent 100%); }
/* 흰 뭉게구름: 천천히 옆으로 흘러간다 */
.cloud { position: absolute; left: 0; height: auto; filter: drop-shadow(0 6px 8px rgba(0, 80, 130, .14)); animation: cloud-drift linear infinite; }
/* 구름마다 크기·높이·속도가 다르게 (위 구름들은 제목 글자 위쪽으로만 지나감) */
.cloud.c1 { top: 2vh; width: 150px; opacity: .96; animation-duration: 52s; animation-delay: -12s; }
.cloud.c2 { top: 6vh; width: 70px; opacity: .9; animation-duration: 74s; animation-delay: -50s; }
.cloud.c3 { top: calc(58vh - 40px); width: 120px; opacity: .9; animation-duration: 64s; animation-delay: -26s; }
.cloud.c4 { top: 2vh; width: 78px; opacity: .85; animation-duration: 90s; animation-delay: -70s; }
@keyframes cloud-drift { from { left: -180px; } to { left: calc(100% + 60px); } }
.scene .sc-ground { position: absolute; left: -10%; right: -10%; bottom: 0; height: 21vh; border-radius: 50% 50% 0 0 / 34px 34px 0 0; background: linear-gradient(180deg, #4FBF6B 0%, #22A055 55%, #178A45 100%); }
.scene .sc-fern { bottom: 0; width: min(40vw, 30vh); }
.scene .sc-fern.l { left: -2%; }
.scene .sc-fern.r { right: -2%; }
.parade { z-index: 1; }

/* ---------- 화석 발굴 ---------- */
.mode-card.digplay { background: #B9772F; box-shadow: 0 6px 0 #8A5419; }
.mode-card.digplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
.dig-stage { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; align-content: center; gap: 10px; }
.dig-pit { position: relative; width: min(92vw, 560px); aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden;
  background: radial-gradient(80% 70% at 50% 50%, #F3E2BE 0%, #E4C893 100%); box-shadow: inset 0 6px 18px rgba(110,70,25,.35), 0 8px 0 #A87A3F; border: 4px solid #C79A5B; }
.dig-fossil { position: absolute; inset: 7% 6% 9%; display: grid; place-items: center; }
.dig-fossil .art-img { width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(1) sepia(.9) brightness(1.15) contrast(.85) drop-shadow(0 2px 0 rgba(110,70,25,.35)); transition: filter 1.2s ease, transform .6s cubic-bezier(.2,1.5,.4,1); }
.dig-sand { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; transition: opacity .6s ease; }
.dig-stage.dug .dig-sand { opacity: 0; pointer-events: none; }
.dig-stage.alive .dig-fossil .art-img { filter: none; transform: scale(1.02); animation: dig-wiggle .7s ease-in-out .2s 2; }
@keyframes dig-wiggle { 0%,100% { rotate: 0deg } 30% { rotate: -3deg } 70% { rotate: 3deg } }
.dig-name { position: static; transform: none; opacity: 0; transition: opacity .3s, transform .4s cubic-bezier(.2,1.5,.4,1); }
.dig-stage.alive .dig-name { opacity: 1; animation: none; }

/* 세로 휴대폰에서 가로 카드 화면이 처음 열릴 때 안내 (휴대폰이 옆으로 도는 그림) */
.rot-hint { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(10, 31, 68, .78); color: #fff; text-align: center; animation: fade-in .2s ease; transition: opacity .25s; }
.rot-hint.out { opacity: 0; }
.rot-hint p { margin: 8px 0 0; font-size: 26px; font-weight: 800; }
.rot-hint small { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; opacity: .85; }
.rot-hint small svg { width: 24px; height: 24px; transform: rotate(90deg); } /* 눕힌 화면에서 버튼이 보이는 모양 그대로 */
.rot-phone { width: 64px; height: 110px; border: 5px solid #fff; border-radius: 14px; position: relative; animation: rot-phone 1.3s ease-in-out .2s infinite alternate; }
.rot-phone i { position: absolute; left: 50%; bottom: 7px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; }
@keyframes rot-phone { 0%, 15% { transform: rotate(0deg); } 85%, 100% { transform: rotate(-90deg); } }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }

/* ---------- 첫 화면: 네모 버튼 4개 (스크롤 없이 한눈에) ---------- */
.home-main { height: 100dvh; min-height: 0; overflow: hidden; gap: 14px; }
.home-main .hero { flex: 1; height: auto; min-height: 150px; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.menu-sq { position: relative; aspect-ratio: 1 / .86; max-height: 26vh; width: 100%; border: 0; border-radius: 28px; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: transform .12s, box-shadow .12s; }
.menu-sq b { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 8vw, 40px); line-height: 1; letter-spacing: -.01em; }
.menu-sq .menu-icon { width: clamp(52px, 15vw, 72px); height: clamp(52px, 15vw, 72px); border-radius: 20px; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.menu-sq .menu-icon svg { width: 62%; height: 62%; }
.menu-sq .menu-num { position: absolute; left: 12px; top: 12px; width: 26px; height: 26px; border-radius: 9px; background: rgba(255,255,255,.92); font-weight: 900; font-size: 14px; display: grid; place-items: center; }
.menu-sq.blue { background: var(--blue); box-shadow: 0 7px 0 #0B3E9C; } .menu-sq.blue .menu-num { color: var(--blue); }
.menu-sq.green { background: #17A34A; box-shadow: 0 7px 0 #0E7A36; } .menu-sq.green .menu-num { color: #17A34A; }
.menu-sq.navy { background: var(--blue-deep); box-shadow: 0 7px 0 #061633; } .menu-sq.navy .menu-num { color: var(--blue-deep); }
.menu-sq.orange { background: #F2A516; box-shadow: 0 7px 0 #C07C05; } .menu-sq.orange .menu-num { color: #C07C05; }
.menu-sq:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.home-main .home-foot { margin-top: 0; padding-top: 0; }

/* ---------- 들어간 화면 (보기·따라 하기·맞히기·놀기) ---------- */
.sec-top { display: flex; align-items: center; gap: 10px; }
.sec-title { flex: 1; margin: 0; text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-weight: 400; font-size: 30px; color: var(--blue-deep); }
.sec-title span { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-deep); color: #fff; font-family: var(--font-body); font-weight: 900; font-size: 16px; }
.sec-blue .sec-title span { background: var(--blue); } .sec-green .sec-title span { background: #17A34A; } .sec-orange .sec-title span { background: #F2A516; }

/* 보기 화면: 한 화면에 들어가게 — 한 장씩 넘겨보기·움직이는 공룡은 반반 나란히, 간격은 조금 좁게 */
.home-sec { gap: 12px; }
.home-sec .modes { gap: 10px; }
.see-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-card.half { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 14px 14px 16px; }
.mode-card.half .mode-icon { width: 44px; height: 44px; border-radius: 14px; }
.mode-card.half .mode-icon svg { width: 26px; height: 26px; }
.mode-card.half .mode-text b { font-size: 21px; line-height: 1.15; word-break: keep-all; }
.mode-card.half .mode-text span { font-size: 13px; }
.home-sec .mode-card.flash { min-height: 92px; padding-top: 14px; padding-bottom: 14px; }
.home-sec .opts { padding-top: 8px; padding-bottom: 8px; }
.home-sec .opt-segs .seg { min-height: 36px; }
.mode-card.flash .mode-text b { white-space: nowrap; font-size: clamp(26px, 8vw, 32px); }

/* 움직이는 공룡 목록: 2칸씩, 세 줄이 화면 높이에 꽉 차게 (영상이 더 늘면 아래로 내려 보기) */
.screen.videos { height: 100dvh; display: flex; flex-direction: column; }
.video-grid { flex: 1; grid-template-columns: 1fr 1fr; grid-auto-rows: max(150px, calc((100dvh - 120px) / 3 - 10px)); gap: 12px; padding: 10px 2px 4px; overflow-y: auto; }
.video-tile { aspect-ratio: auto; height: 100%; border-radius: 18px; }
.video-tile-play { width: 54px; height: 54px; font-size: 22px; }
.video-tile b { font-size: clamp(15px, 4.4vw, 18px); padding: 22px 6px 10px; white-space: nowrap; letter-spacing: -.02em; }
@media (min-width: 700px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }
.puzzle-name:not(.show) { min-height: 0; height: 0; overflow: hidden; } /* 퍼즐 완성 전에는 자리 차지 안 함 */
.puzzle-name.show { margin-top: 10px; }

.fireworks { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }

/* ---------- 소리 따라 하기 ---------- */
.mode-card.callplay { background: #E2611F; color: #fff; border: 0; box-shadow: 0 6px 0 #AE4511; }
.mode-card.callplay:active { transform: translateY(3px); box-shadow: 0 3px 0 #AE4511; }
.mode-card.callplay .mode-icon { background: rgba(255,255,255,.2); color: #fff; }
.call { gap: 10px; align-items: stretch; }
.call-card { flex: 1; min-height: 0; max-height: 52vh; border: 3px solid #fff; border-radius: 26px; padding: 4%; background: #fff; box-shadow: 0 8px 20px rgba(10,31,68,.14), 0 0 0 2px #AEB9C9; display: grid; place-items: center; cursor: pointer; }
.call-card .art-img { width: 100%; height: 100%; object-fit: contain; }
.call-card.in { animation: call-in .45s cubic-bezier(.2,1.3,.4,1); }
.call-card.roaring .art-img { animation: hero-roar .6s ease-out; }
@keyframes call-in { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.call-name { text-align: center; font-family: var(--font-card); font-weight: 700; font-size: clamp(30px, 8.5vw, 52px); color: var(--blue-deep); word-break: keep-all; line-height: 1.1; }
/* 아이 차례: 소리 물결이 들썩들썩 */
.call-turn { height: 70px; display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 0; transition: opacity .2s; }
.call-turn.on { opacity: 1; }
.call-turn span { width: 16px; height: 22px; border-radius: 10px; background: #E2611F; }
.call-turn.on span { animation: call-wave .5s ease-in-out infinite alternate; }
.call-turn.on span:nth-child(2) { animation-delay: .15s; background: #F2A516; }
.call-turn.on span:nth-child(3) { animation-delay: .3s; }
@keyframes call-wave { from { height: 18px; } to { height: 64px; } }

/* 짝맞추기: 짝 맞춘 카드 반짝 통!, 다 맞추면 파도타기 */
.mcard.pop { animation: mcard-pop .5s cubic-bezier(.2,1.5,.4,1); }
.mcard.pop .mcard-front { box-shadow: 0 0 0 4px var(--spark), 0 0 18px rgba(255,213,74,.8); }
@keyframes mcard-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12) rotate(-3deg); } 100% { transform: scale(1); } }
.mcard.wave { animation: mcard-wave .5s ease-out; }
@keyframes mcard-wave { 0% { transform: translateY(0); } 35% { transform: translateY(-22px) scale(1.06); } 70% { transform: translateY(3px); } 100% { transform: none; } }

/* 소리 따라 하기: 녹음 중(빨간 마이크, 목소리만큼 막대) / 공룡 목소리로 들려주는 중(주황) */
.call-turn .call-mic { display: none; width: 34px; height: 34px; border-radius: 50%; background: #E53935; box-shadow: 0 0 0 0 rgba(229,57,53,.5); margin-right: 6px; position: relative; }
.call-turn .call-mic::after { content: ""; position: absolute; left: 50%; top: 22%; width: 10px; height: 14px; margin-left: -5px; border-radius: 6px; background: #fff; }
.call-turn.rec .call-mic { display: block; animation: mic-pulse 1s ease-out infinite; }
@keyframes mic-pulse { from { box-shadow: 0 0 0 0 rgba(229,57,53,.55); } to { box-shadow: 0 0 0 16px rgba(229,57,53,0); } }
.call-turn.rec span, .call-turn.play span { animation: none !important; height: calc(14px + var(--lv, .15) * 56px); transition: height .08s; }
.call-turn.rec span { background: #E53935 !important; }
.call-turn.play span { background: #E2611F !important; }
.call-turn span:nth-child(5), .call-turn span:nth-child(6) { display: none; }
.call-turn.rec span:nth-child(5), .call-turn.rec span:nth-child(6), .call-turn.play span:nth-child(5), .call-turn.play span:nth-child(6) { display: block; }

/* 하늘을 나는 익룡: 왼쪽 → 오른쪽으로 천천히, 위아래로 살짝 출렁 (날갯짓은 그림 자체가 움직임) */
.ptero-fly { position: absolute; left: 0; top: 0; width: 110px; pointer-events: none; z-index: 1; animation: ptero-cross 18s linear infinite; }
.ptero-fly img { width: 100%; height: auto; display: block; animation: ptero-bob 1.8s ease-in-out infinite alternate; filter: drop-shadow(0 6px 6px rgba(0, 50, 100, .15)); }
@keyframes ptero-bob { from { transform: translateY(-6px) rotate(-2deg); } to { transform: translateY(6px) rotate(2deg); } }
@keyframes ptero-cross { 0% { transform: translate(-130px, 0); } 75% { transform: translate(calc(100vw + 20px), -26px); } 100% { transform: translate(calc(100vw + 20px), -26px); } }
.ptero-fly.sky { top: 3vh; width: 110px; animation-delay: -3s; }
.ptero-fly.in-hero { top: 22%; width: 96px; animation-duration: 15s; animation-delay: -6s; }
@media (prefers-reduced-motion: reduce) { .ptero-fly { display: none; } }

/* ---------- 그림자 맞추기 ---------- */
.mode-card.shadowplay { background: #2B3A5C; color: #fff; border: 0; box-shadow: 0 6px 0 #18233B; }
.mode-card.shadowplay:active { transform: translateY(3px); box-shadow: 0 3px 0 #18233B; }
.mode-card.shadowplay .mode-icon { background: rgba(255,255,255,.16); color: #fff; }
.shadowgame { padding-bottom: 12px; }
.sh-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.sh-left { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.sh-stage { position: relative; flex: 1; min-height: 170px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 40%, #FFFFFF 0%, #EAF2FF 70%, #DCE8FB 100%); border: 3px solid #fff; box-shadow: 0 6px 16px rgba(10,31,68,.12); }
.sh-stage::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 9%; height: 10px; border-radius: 50%; background: rgba(16,24,40,.10); filter: blur(4px); }
.sh-stage img { position: absolute; left: 6%; top: 6%; width: 88%; height: 84%; object-fit: contain; user-select: none; -webkit-user-drag: none; z-index: 1; }
.sh-stage .sh-color { opacity: 0; transform: scale(.97); }
.sh-stage .sh-black { opacity: 1; transform: scale(.97); animation: sh-in .45s ease backwards; }
.sh-stage .sh-css { filter: brightness(0); }
.sh-stage.reveal .sh-color { opacity: 1; transform: scale(1.04); transition: opacity .7s ease, transform .5s cubic-bezier(.2,1.4,.4,1); }
.sh-stage.reveal .sh-black { opacity: 0; transition: opacity .7s ease; }
@keyframes sh-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(.97); } }
.sh-name { min-height: 54px; }
.sh-choices { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.sh-word { min-height: 60px; padding: 8px 14px; border-radius: 18px; background: #fff; border: 3px solid var(--blue-soft); box-shadow: 0 5px 0 #C9D8F2;
  font-family: var(--font-card); font-weight: 700; font-size: clamp(24px, 6.6vw, 34px); color: var(--blue-deep); word-break: keep-all; line-height: 1.15;
  animation: sh-word-in .3s cubic-bezier(.2,1.3,.4,1) backwards; animation-delay: calc(var(--i) * 90ms); transition: opacity .25s, transform .2s, background .2s; }
.sh-word:active { transform: translateY(3px); box-shadow: 0 2px 0 #C9D8F2; }
.sh-word.found { background: var(--spark); border-color: var(--spark); color: var(--blue-deep); transform: scale(1.04); box-shadow: 0 5px 0 #D6A800; }
.sh-word.fade { opacity: .3; }
.sh-word.nope { animation: shake .35s ease; }
@keyframes sh-word-in { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
@media (orientation: landscape) {
  .sh-main { flex-direction: row; align-items: stretch; }
  .sh-left { flex: 1.35 1 0; position: relative; }
  .sh-stage { min-height: 120px; }
  .sh-name { position: absolute; left: 0; right: 0; bottom: 6px; min-height: 0; z-index: 3; font-size: clamp(26px, 5vh, 40px); text-shadow: 0 0 6px #fff, 0 0 12px #fff; pointer-events: none; }
  .sh-choices { flex: 1 1 0; min-height: 0; gap: 8px; }
  .sh-word { min-height: 0; flex: 0 1 64px; font-size: clamp(20px, 5.4vh, 30px); }
}

/* 짝맞추기: 카드가 뒤집힐 때마다 그림 그림자 효과를 다시 그리지 않게 (그림에 발밑 그림자가 이미 있음) */
.mcard .art-img { filter: none; }

/* ---------- 분류 놀이 ---------- */
.mode-card.sortplay { background: #0E8F9E; box-shadow: 0 6px 0 #096570; }
.mode-card.sortplay .mode-icon { background: rgba(255,255,255,.2); color: #fff; }
.sortgame { padding-bottom: 12px; }
.sort-bins { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 10px; }
.sort-bins.n2 { --n: 2; } .sort-bins.n3 { --n: 3; }
.sort-bin { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 8px 8px; min-height: 128px;
  border-radius: 22px; border: 3px solid var(--bin); background: color-mix(in srgb, var(--bin) 10%, #fff); box-shadow: 0 5px 0 color-mix(in srgb, var(--bin) 55%, #000 10%);
  transition: transform .2s, background .2s; }
.sort-bin-head { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--bin); }
.sort-bin-head b { font-family: var(--font-card); font-weight: 800; font-size: clamp(17px, 4.6vw, 24px); line-height: 1.15; word-break: keep-all; color: color-mix(in srgb, var(--bin) 80%, #000); }
.sort-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
.sort-ico svg { width: 100%; height: 100%; }
.sort-tray { flex: 1; min-height: 52px; border-radius: 14px; background: rgba(255,255,255,.75); display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 2px; padding: 4px; }
.sort-tray img { width: 44%; max-width: 74px; aspect-ratio: 4 / 3; object-fit: contain; animation: sh-in .3s ease backwards; }
.sort-bins.n3 .sort-tray img { width: 46%; }
.sort-bin.hover { transform: scale(1.05); background: color-mix(in srgb, var(--bin) 22%, #fff); }
.sort-bin.bump { animation: bin-bump .45s cubic-bezier(.2,1.5,.4,1); }
.sort-bin.nope { animation: shake .35s ease; }
@keyframes bin-bump { 0% { transform: scale(1) } 35% { transform: scale(1.1, .92) } 70% { transform: scale(.97, 1.04) } 100% { transform: scale(1) } }
.sort-table { flex: 1; min-height: 0; display: grid; place-items: center; }
.sort-card { width: min(70vw, 40vh, 340px); aspect-ratio: 4 / 3; border-radius: 22px; background: radial-gradient(90% 80% at 50% 50%, #fff 0%, var(--blue-soft) 100%);
  border: 3px solid #fff; box-shadow: 0 10px 22px rgba(10,31,68,.18); display: grid; place-items: center; cursor: grab; user-select: none; animation: deal .32s cubic-bezier(.2,.8,.3,1.2) backwards;
  --dx: 0px; --dy: 0px; --rot: 0deg; }
.sort-card .art-img { width: 92%; height: 92%; object-fit: contain; filter: none; pointer-events: none; }
.sort-card.lift { box-shadow: 0 18px 30px rgba(10,31,68,.28); cursor: grabbing; z-index: 5; }
.sort-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
@media (orientation: landscape) {
  .sort-main { flex-direction: row-reverse; align-items: stretch; }
  .sort-bins { flex: 1.6 1 0; }
  .sort-bin { min-height: 0; padding: 8px 6px 6px; }
  .sort-table { flex: 1 1 0; position: relative; display: block; }
  .sort-card { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: auto; max-height: 100%; }
}

@media (orientation: portrait) { .sort-bins.n3 .sort-bin-head { flex-direction: column; gap: 2px; } .sort-bins.n3 .sort-bin-head b { font-size: clamp(16px, 4.4vw, 22px); } }

/* ---------- 크기 순서 ---------- */
.mode-card.sizeplay { background: #2E9E57; color: #fff; border: 0; box-shadow: 0 6px 0 #1E7240; }
.mode-card.sizeplay:active { transform: translateY(3px); box-shadow: 0 3px 0 #1E7240; }
.mode-card.sizeplay .mode-icon { background: rgba(255,255,255,.2); color: #fff; }
.sizegame { padding-bottom: 12px; }
/* 위 줄: 칸이 오른쪽으로 갈수록 커진다 (작은 → 큰) */
.size-line { position: relative; display: flex; align-items: flex-end; gap: 6px; padding: 8px 6px 22px; border-radius: 22px; background: #E7F5EC; min-height: 150px; }
.size-slot { container-type: inline-size; min-width: 0; flex: calc(1 + var(--k) * .3) 1 0; height: calc(52% + var(--k) / max(var(--n) - 1, 1) * 48%); min-height: 54px; align-self: flex-end;
  border: 3px dashed #9CCFAE; border-radius: 16px; background: rgba(255,255,255,.6); display: grid; place-items: center; position: relative; overflow: hidden; }
.size-line { height: clamp(150px, 26vh, 230px); }
.size-ghost { width: 70%; height: 70%; color: #BFE3CC; display: grid; place-items: center; }
.size-ghost svg { width: 100%; height: 100%; }
.size-slot.filled { border: 3px solid #2E9E57; background: #fff; }
.size-slot img { width: 92%; height: 72%; min-width: 0; max-width: 92%; object-fit: contain; animation: sh-in .3s ease backwards; }
.size-slot b { display: none; position: absolute; left: 2px; right: 2px; bottom: 3px; font-family: var(--font-card); font-weight: 800; font-size: clamp(11px, 12cqw, 16px); color: var(--blue-deep); text-align: center; line-height: 1.1; word-break: keep-all; }
.size-slot.hop { animation: size-hop .45s cubic-bezier(.2,1.5,.4,1); }
@keyframes size-hop { 0% { transform: none } 40% { transform: translateY(-14px) scale(1.04) } 100% { transform: none } }
.size-arrow { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #BFE3CC, #2E9E57); }
.size-arrow::after { content: ""; position: absolute; right: -4px; top: 50%; transform: translateY(-50%); border: 9px solid transparent; border-left: 13px solid #2E9E57; border-right: 0; }
/* 아래: 섞인 카드 */
.size-hand { flex: 1; min-height: 0; position: relative; }
.size-hand-in { height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px; }
.size-card { width: calc(33.3% - 9px); aspect-ratio: 4 / 3; padding: 0; border-radius: 18px; background: radial-gradient(90% 80% at 50% 50%, #fff 0%, var(--blue-soft) 100%); border: 3px solid #fff;
  box-shadow: 0 6px 14px rgba(10,31,68,.16); display: grid; place-items: center; transition: opacity .25s; animation: deal .32s cubic-bezier(.2,.8,.3,1.2) backwards; animation-delay: calc(var(--i) * 110ms);
  --dx: 0px; --dy: 0px; --rot: 0deg; }
.size-hand.n4 .size-card { width: calc(50% - 6px); max-width: 190px; }
.size-card .art-img { width: 92%; height: 92%; object-fit: contain; filter: none; pointer-events: none; }
.size-card.lift { box-shadow: 0 16px 28px rgba(10,31,68,.26); z-index: 5; }
.size-card.placed { opacity: 0; pointer-events: none; }
.size-card.nope { animation: shake .35s ease; }
@container (min-width: 84px) { .size-slot b { display: block; } }
@media (orientation: landscape) {
  .size-line { height: clamp(110px, 36vh, 200px); min-height: 0; }
  .size-hand-in { position: absolute; inset: 4px 0; height: auto; flex-wrap: nowrap; align-items: center; }
  .size-card, .size-hand.n4 .size-card { width: auto; height: 100%; max-height: 160px; max-width: none; flex: none; }
}
@media (orientation: landscape) {
  .sizegame { position: relative; }
  .sizegame .game-title { text-align: left; justify-self: start; margin-left: 4px; }
  .sizegame .game-top { justify-content: flex-start; gap: 12px; }
  .sizegame .game-levels { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; width: min(46%, 380px); margin: 0; }
  .size-line { height: clamp(104px, 33vh, 190px); }
  .size-slot img { height: 64%; }
  .size-slot b { bottom: 2px; font-size: clamp(10px, 10cqw, 14px); }
  .size-card, .size-hand.n4 .size-card { max-height: 150px; }
}

/* 휴대폰 '탭 중지' 줄이기: 계속 움직이는 그림(첫 화면 공룡·구름·익룡·홈 대표 공룡)은 그림자 효과(filter)를 쓰지 않음.
   그림마다 발밑 그림자가 이미 있어서 보기엔 거의 같음. (플래시카드 그림은 그대로) */
.parade img, .cloud, .ptero-fly img, .hero-slide .art-img { filter: none; }

/* ---------- 색칠하기 ---------- */
.mode-card.colorplay { background: linear-gradient(120deg, #E8457A, #F08A2E 55%, #F5B800); box-shadow: 0 6px 0 #B03460; }
.mode-card.colorplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
.colorgame { gap: 10px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.color-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 22px; border: 3px solid var(--line); overflow: hidden; }
.color-stage canvas { display: block; touch-action: none; }
.color-peek { position: absolute; top: 8px; right: 8px; width: 22%; max-width: 120px; padding: 4px; background: #fff; border: 2px solid var(--line); border-radius: 12px; transition: width .25s, max-width .25s; }
.color-peek img { display: block; width: 100%; height: auto; }
.color-peek.big { width: 60%; max-width: 420px; box-shadow: 0 8px 24px rgba(10,31,68,.25); }
.color-size { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.color-size input[type=range] { flex: 1; min-width: 0; height: 36px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; touch-action: none; }
.color-size input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--line), var(--blue-deep)); }
.color-size input[type=range]::-moz-range-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--line), var(--blue-deep)); }
.color-size input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -11px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); box-shadow: 0 2px 6px rgba(10,31,68,.3); }
.color-size input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); }
.cs-dot { flex: none; border-radius: 50%; background: var(--blue-deep); }
.cs-dot.small { width: 8px; height: 8px; } .cs-dot.big { width: 22px; height: 22px; }
.cs-preview { flex: none; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--blue-soft); overflow: hidden; }
.cs-preview i { display: block; border-radius: 50%; border: 2px solid rgba(10,31,68,.25); max-width: 50px; max-height: 50px; }
.color-pal { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.sw { aspect-ratio: 1; max-height: 50px; justify-self: center; width: 100%; max-width: 50px; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); transition: transform .12s; }
.sw.on { transform: scale(1.12); box-shadow: 0 0 0 3px var(--blue-deep); }
.color-tools { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr; gap: 6px; }
.ctool-mode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; background: var(--blue-soft); border-radius: 16px; }
.ctool-mode .ctool { background: transparent; }
.ctool-mode .ctool.on { background: var(--blue); color: #fff; }
.ctool.off { opacity: .35; }
.c-swap { display: flex; align-items: center; gap: 4px; padding: 0 12px; min-height: 48px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); color: var(--blue-deep); font-weight: 800; font-size: 14px; white-space: nowrap; }
.c-ask { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(10,31,68,.45); padding: 16px; }
.c-ask-box { width: min(100%, 340px); display: grid; gap: 10px; padding: 18px; border-radius: 22px; background: #fff; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.c-ask-box b { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--blue-deep); }
.c-ask-box .big-btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 20px; min-height: 58px; padding: 0 12px; }
.c-ask-box .big-btn svg { width: 22px; height: 22px; }
.c-ask-close { min-height: 44px; font-weight: 800; color: var(--ink-soft); }
.ctool { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; min-height: 58px; border-radius: 14px; background: var(--blue-soft); color: var(--blue-deep); font-size: clamp(11px, 3.1vw, 14px); font-weight: 800; }
.ctool.on { background: var(--blue); color: #fff; }
.ctool.done { background: var(--green); color: #fff; box-shadow: 0 4px 0 var(--green-deep); }
.colordone { align-items: center; }
.colordone .game-top { width: 100%; }
.cd-pair { flex: 1; min-height: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.cd-pair figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; }
.cd-pair img { width: 100%; max-height: 42vh; object-fit: contain; background: #fff; border-radius: 16px; border: 3px solid var(--line); }
.cd-pair figcaption { font-family: var(--font-display); font-size: clamp(16px, 4.4vw, 24px); color: var(--blue-deep); text-align: center; }
.colordone .end-actions { width: min(100%, 420px); }
.colordone .big-btn { font-size: 22px; min-height: 60px; }
@media (orientation: portrait) { .cd-pair { grid-template-columns: 1fr; } .cd-pair img { max-height: 28vh; } }
@media (orientation: landscape) {
  .colorgame { display: grid; grid-template-columns: 1fr minmax(210px, 32%); grid-template-rows: auto auto auto 1fr auto; gap: 6px 12px; max-width: none; }
  .colorgame .game-top { grid-column: 1; grid-row: 1; }
  .colorgame .color-stage { grid-column: 1; grid-row: 2 / 6; }
  .colorgame .color-size { grid-column: 2; grid-row: 1 / 3; gap: 6px; padding: 0; }
  .colorgame .cs-preview { width: 40px; height: 40px; }
  .colorgame .cs-preview i { max-width: 36px; max-height: 36px; }
  .colorgame .color-pal { grid-column: 2; grid-row: 3; grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .colorgame .sw { border-width: 2px; }
  .colorgame .sw { border-width: 3px; }
  .colorgame .color-tools { grid-column: 2; grid-row: 5; grid-template-columns: repeat(3, 1fr); }
  .colorgame .ctool-mode { grid-column: 1 / -1; }
  .colorgame .ctool { min-height: 42px; padding: 4px 2px; flex-direction: row; justify-content: center; gap: 4px; }
  .colorgame .ctool svg { width: 18px; height: 18px; flex: none; }
  .colorgame .ctool span { white-space: nowrap; font-size: 12px; }
  .colorgame .ctool.done { grid-column: span 1; }
  .colordone .end-actions { grid-template-columns: repeat(3, 1fr); width: min(100%, 760px); }
  .colordone .big-btn { padding: 0 10px; font-size: 20px; }
}
/* 색칠하기: 화면이 위아래로 밀리지 않게(주소창이 나타났다 사라지며 그림판 크기가 바뀌는 것 방지) */
/* 화면 자체를 보이는 창에 딱 붙여 둔다(주소창·아래 막대가 숨었다 나와도 아래 버튼이 잘리지 않게) */
html:has(.colorgame), html:has(.colorgame) body { overscroll-behavior: none; }
.colorgame { touch-action: none; position: fixed; inset: 0; height: auto; min-height: 0; }

/* ---------- 노래 플래시카드 (1 보기) ---------- */
/* 무대: 진한 남색 + 위에서 비추는 조명. 카드는 플래시카드와 같은 테두리·겹친 카드. 제목·가사는 주아체 */
.mode-card.songcard { background: linear-gradient(120deg, #5B3FD8, #1257D6); color: #fff; border: 0; box-shadow: 0 6px 0 #33229A; }
.mode-card.songcard .mode-icon { background: rgba(255,255,255,.2); color: #fff; }
.mode-card.songcard .mode-text b { font-weight: 400; }
.mode-card.songcard .mode-text span { color: rgba(255,255,255,.85); }
.songplay { position: fixed; inset: 0; height: auto; overflow: hidden; color: #fff; gap: 8px; touch-action: manipulation;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(255,236,170,.30) 0%, rgba(255,236,170,0) 70%),
    radial-gradient(90% 30% at 50% 100%, rgba(80,140,255,.35) 0%, rgba(80,140,255,0) 70%),
    linear-gradient(180deg, #0B2A63 0%, #0A1F4D 55%, #081638 100%); }
/* 반짝이는 작은 별 */
.songplay::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 82% 12%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 70% 30%, #FFE7A0 50%, transparent 51%), radial-gradient(1.5px 1.5px at 25% 40%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 90% 55%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 8% 70%, #FFE7A0 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 8%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 40% 85%, #fff 50%, transparent 51%); }
/* 무대 바닥 빛 */
.songplay::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 7%; height: 9%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,232,160,.35), rgba(255,232,160,0)); }
.songplay > * { position: relative; z-index: 1; }
.song-top { display: flex; align-items: center; gap: 8px; }
.song-top .icon-btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff; }
.song-title { flex: 1; text-align: center; font-family: "Jua", var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: .02em; color: #FFE7A0; }
.song-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.song-stage.shake { animation: songShake .22s ease-out; }
/* 가사 리본 */
.song-ribbon { margin: 0; min-height: 1.6em; display: inline-flex; align-items: center; justify-content: center; padding: .25em 1em; border-radius: 999px;
  background: #FFD12E; color: #0A2E6E; font-family: "Jua", var(--font-display); font-size: clamp(22px, 6.4vw, 38px); line-height: 1.2;
  box-shadow: 0 5px 0 #D9A400, 0 10px 24px rgba(0,0,0,.25); white-space: nowrap; max-width: 100%; }
.song-ribbon.pop { animation: songRibbon .35s cubic-bezier(.2,1.5,.4,1); }
.song-notes { display: inline-flex; gap: 10px; }
.song-notes i { font-style: normal; animation: songBob .5s ease-in-out infinite alternate; }
.song-notes i:nth-child(2) { animation-delay: .25s; }
.song-intro b { display: block; font-family: "Jua", var(--font-display); font-weight: 400; font-size: clamp(48px, 15vw, 104px); color: #fff; text-shadow: 0 6px 0 rgba(0,0,0,.25); }
.song-intro[hidden], .song-walker[hidden], .song-group[hidden] { display: none; }
/* 카드: 걸어 다니는 바깥(walker) → 박자마다 들썩(bob) → 카드 */
.song-walker { width: min(88%, 520px); }
.song-bob { transform-origin: 50% 100%; }
.song-cardbox { position: relative; border-radius: 26px; background: radial-gradient(90% 70% at 50% 42%, #fff 0%, #E8F0FF 80%); border: 2px solid #AEB9C9;
  box-shadow: 0 16px 30px rgba(0,0,0,.35); padding: 4% 4% 0; }
.song-cardbox::before, .song-cardbox::after { content: ""; position: absolute; inset: 0; border-radius: 26px; z-index: -1; }
.song-cardbox::before { background: #DCE6F7; transform: translate(7px, 9px) rotate(1.6deg); }
.song-cardbox::after { background: #C6D4EE; transform: translate(-6px, 15px) rotate(-1.8deg); }
.song-img { width: 100%; aspect-ratio: 5 / 4; display: flex; align-items: center; justify-content: center; }
.song-img img { width: 100%; height: 100%; object-fit: contain; }
.song-name { margin: 0; width: 100%; white-space: nowrap; text-align: center; padding: 2% 0 5%; font-family: var(--font-card); font-weight: 900;
  font-size: clamp(28px, 8.4vw, 56px); line-height: 1.15; color: #0A2E6E; opacity: 0; transition: opacity .15s; }
.song-walker.named .song-name { opacity: 1; animation: songName .4s cubic-bezier(.2,1.6,.4,1); }
/* 걸음: 들어오기·나가기는 2걸음, 제자리 걸음은 왼발·오른발 */
.song-walker.enter { animation: songEnter .5s ease-out both; }
.song-walker.exit { animation: songExit .5s ease-in both; }
.song-walker.enter .song-bob { animation: songWalk .25s ease-in-out 2; }
.song-walker.exit .song-bob { animation: songWalk .25s ease-in-out 2; }
.song-bob.stepL { animation: songStepL .5s ease-out; }
.song-bob.stepR { animation: songStepR .5s ease-out; }
.song-bob.jump { animation: songJump .5s cubic-bezier(.3,1.4,.5,1); }
/* 후렴: 지금까지 나온 공룡들이 줄지어 박자마다 통통 */
.song-group { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.song-parade { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.song-parade img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: radial-gradient(90% 70% at 50% 45%, #fff 0%, #E8F0FF 85%); border: 2px solid #AEB9C9; border-radius: 16px; padding: 4px; transition: transform .12s; }
.song-parade.beat img:nth-child(odd) { animation: songHop .5s ease-out; }
.song-parade.beat.p1 img:nth-child(odd) { animation: none; }
.song-parade.beat.p1 img:nth-child(even) { animation: songHop .5s ease-out; }
.song-group.g-end .song-parade.beat img { animation: songWave .5s ease-in-out; }
.song-gname { margin: 0; min-height: 1.2em; font-family: "Jua", var(--font-display); font-size: clamp(30px, 9vw, 54px); color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.25); }
/* 16칸 점: 지나간 공룡은 흰색, 지금 공룡은 노랑 */
.song-dots { display: flex; justify-content: center; gap: 6px; padding: 4px 0 2px; }
.song-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.22); transition: background .2s, transform .2s; }
.song-dots i.done { background: rgba(255,255,255,.85); }
.song-dots i.now { background: #FFD12E; transform: scale(1.5); }
.song-resume { position: absolute; inset: 0; margin: auto; width: 120px; height: 120px; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 8px 0 var(--green-deep); display: flex; align-items: center; justify-content: center; z-index: 3; }
.song-resume svg { width: 64px; height: 64px; }
.song-resume[hidden] { display: none; }

@keyframes songEnter { from { transform: translateX(120%); } to { transform: none; } }
@keyframes songExit { from { transform: none; } to { transform: translateX(-130%); } }
@keyframes songWalk { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5%) rotate(-3deg); } }
@keyframes songStepL { 0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-4%) rotate(-2.5deg); } 70% { transform: translateY(0) scale(1.02, .97) rotate(0); } 100% { transform: none; } }
@keyframes songStepR { 0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-4%) rotate(2.5deg); } 70% { transform: translateY(0) scale(1.02, .97) rotate(0); } 100% { transform: none; } }
@keyframes songJump { 0% { transform: none; } 40% { transform: translateY(-12%) scale(1.04); } 75% { transform: translateY(0) scale(1.05, .94); } 100% { transform: none; } }
@keyframes songHop { 0% { transform: none; } 40% { transform: translateY(-14%) rotate(-3deg); } 100% { transform: none; } }
@keyframes songWave { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg) translateY(-8%); } }
@keyframes songShake { 0% { transform: translateY(0); } 30% { transform: translateY(6px); } 60% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes songRibbon { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes songName { from { transform: scale(.6); } to { transform: none; } }
@keyframes songBob { from { transform: translateY(0); } to { transform: translateY(-25%); } }
@media (orientation: landscape) {
  .song-stage { flex-direction: row; gap: 4%; }
  .song-ribbon { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: clamp(18px, 6vh, 30px); }
  .song-ribbon.pop { animation: none; }
  .song-walker { width: auto; height: calc(100% - 3.4em); aspect-ratio: 5 / 5.2; margin-top: 2.6em; }
  .song-cardbox { height: 100%; display: flex; flex-direction: column; }
  .song-img { flex: 1; min-height: 0; aspect-ratio: auto; }
  .song-name { font-size: clamp(22px, 7vh, 40px); }
  .song-group { margin-top: 2.6em; }
  .song-parade { grid-template-columns: repeat(8, 1fr); }
  .song-parade img { aspect-ratio: 16 / 11; }
  .song-gname { font-size: clamp(24px, 8vh, 44px); }
}
@media (prefers-reduced-motion: reduce) { .song-notes i, .song-bob, .song-walker, .song-parade img, .song-stage { animation: none !important; } }
@media (orientation: portrait) {
  /* 카드가 무대 바닥 빛 위에 서 있게 */
  .song-stage { justify-content: flex-end; padding-bottom: 7vh; }
  .song-stage .song-intro { margin: auto 0; }
}

/* ---------- 모아 보기 (1 보기) ---------- */
.screen.gallery { min-height: 100dvh; padding-top: 76px; }
.screen.gallery .topbar { position: fixed; background: var(--bg); padding-bottom: 8px; }
.gallery-title { margin: 0 auto; font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--blue-deep); }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; padding: 8px 12px 24px; }
.gal-tile { aspect-ratio: 4 / 3; border: 0; padding: 0; border-radius: 16px; background: var(--surface); box-shadow: 0 4px 0 var(--line); display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.gal-tile .art-img { width: 92%; height: 88%; object-fit: contain; filter: none; }
.gal-tile:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--line); }
.gal-tile.locked { background: linear-gradient(135deg, var(--blue) 0%, #0E47B4 100%); box-shadow: 0 4px 0 #0B3E9C; color: var(--spark); font-family: var(--font-display); font-size: clamp(30px, 9vw, 44px); line-height: 1; }
.gal-tile.locked.shake { animation: galShake .4s ease; }
@keyframes galShake { 0%,100% { transform: none; } 25% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-3deg); } }
.gal-big { position: fixed; inset: 0; z-index: 20; background: rgba(10, 31, 68, .55); display: grid; place-items: center; padding: 16px; animation: galFade .2s ease; }
.gal-card { width: min(92vw, 760px, calc((100dvh - 120px) * 4 / 3)); aspect-ratio: 4 / 3; background: #fff; border-radius: 26px; box-shadow: 0 8px 0 rgba(6, 30, 80, .35); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4% 4% 3%; animation: galPop .32s cubic-bezier(.2, 1.3, .4, 1); }
.gal-card .art-img { flex: 1; min-height: 0; width: 100%; object-fit: contain; filter: none; }
.gal-name { margin-top: 2%; font-family: var(--font-card); font-weight: 800; font-size: clamp(26px, 7vw, 48px); color: var(--blue-deep); line-height: 1.1; text-align: center; word-break: keep-all; }
@keyframes galFade { from { opacity: 0; } }
@keyframes galPop { from { transform: scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gal-big, .gal-card, .gal-tile.locked.shake { animation: none; } }
/* 보기 아래 작은 버튼이 홀수 개면 마지막 버튼은 한 줄 전체 */
.see-row > .mode-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- 노래 플래시카드 2판 (10/11): 카드 크게·위로, 진짜 플래시카드처럼 뒤집기, 오른쪽으로 걸어 나가기 ---------- */
.song-stage { justify-content: center; padding: 0 0 6vh; gap: clamp(14px, 2.8vh, 26px); }
@media (orientation: portrait) { .song-stage { justify-content: center; padding: 0 0 6vh; } }
.song-ribbon { font-size: clamp(26px, 8vw, 46px); padding: .22em 1.1em; }
.song-walker { width: min(94%, 620px, calc(100dvh - 300px)); }
.song-bob { position: relative; perspective: 1400px; }
/* 뒤에 겹친 카드 2장 (뒤집혀도 그대로) */
.song-bob::before, .song-bob::after { content: ""; position: absolute; inset: 0; border-radius: 28px; z-index: -1; }
.song-bob::before { background: #DCE6F7; transform: translate(8px, 10px) rotate(1.6deg); }
.song-bob::after { background: #C6D4EE; transform: translate(-7px, 16px) rotate(-1.8deg); }
.song-card3d { position: relative; width: 100%; aspect-ratio: 1 / 1; transform-style: preserve-3d; transition: transform .42s cubic-bezier(.3,1.25,.5,1); }
.song-card3d.flipped { transform: rotateY(180deg); }
.song-face { position: absolute; inset: 0; border-radius: 28px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 42%, #fff 0%, #E8F0FF 85%); border: 2px solid #AEB9C9; box-shadow: 0 16px 30px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; }
.song-back { transform: rotateY(180deg); background: #fff; }
.song-front .song-img { width: 100%; height: 100%; aspect-ratio: auto; padding: 5%; box-sizing: border-box; }
.song-back .song-name { opacity: 1; animation: none; padding: 0 4%; font-size: clamp(36px, 13vw, 92px); line-height: 1.1; color: #0A2E6E; }
.song-walker.named .song-name { animation: none; }
/* 들어오기: 왼쪽에서 (공룡은 오른쪽을 보고 있으니 앞으로 걸어 들어옴) */
.song-walker.enter { animation: songInL .5s ease-out both; }
.song-walker.m-fly.enter { animation: songInFly .5s ease-out both; }
.song-walker.m-swim.enter { animation: songInSwim .5s ease-out both; }
/* 나가기: 걸어 나가기·날리기·밑으로 버리기·날아가기·헤엄쳐 가기 */
.song-walker.m-walk.exit { animation: songOutWalk .5s ease-in both; }
.song-walker.m-toss.exit { animation: songOutToss .5s cubic-bezier(.4,0,.8,.6) both; }
.song-walker.m-drop.exit { animation: songOutDrop .5s cubic-bezier(.5,0,1,.6) both; }
.song-walker.m-fly.exit { animation: songOutFly .5s ease-in both; }
.song-walker.m-swim.exit { animation: songOutSwim .5s ease-in both; }
.song-walker.m-fly.enter .song-bob, .song-walker.m-fly.exit .song-bob { animation: songFlap .25s ease-in-out 2; }
.song-walker.m-swim.enter .song-bob, .song-walker.m-swim.exit .song-bob { animation: songWave .25s ease-in-out 2; }
@keyframes songInL { from { transform: translateX(-125%); } to { transform: none; } }
@keyframes songInFly { from { transform: translate(-120%, -70%) rotate(-10deg); } to { transform: none; } }
@keyframes songInSwim { from { transform: translate(-125%, 18%); } to { transform: none; } }
@keyframes songOutWalk { from { transform: none; } to { transform: translateX(130%); } }
@keyframes songOutToss { 0% { transform: none; } 30% { transform: translate(10%, -12%) rotate(8deg); } 100% { transform: translate(150%, -110%) rotate(40deg) scale(.7); opacity: .9; } }
@keyframes songOutDrop { 0% { transform: none; } 25% { transform: translateY(-6%) rotate(-3deg); } 100% { transform: translate(8%, 160%) rotate(16deg); } }
@keyframes songOutFly { 0% { transform: none; } 100% { transform: translate(130%, -130%) rotate(-14deg) scale(.8); } }
@keyframes songOutSwim { 0% { transform: none; } 100% { transform: translate(135%, 40%) rotate(10deg); } }
@keyframes songFlap { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-8%) scaleY(.94); } }
/* 멈춤 화면: 어둡게 덮고 큰 재생 버튼 하나 */
.song-pausebox { position: absolute; inset: -8px; z-index: 5; display: grid; place-items: center; background: rgba(6, 18, 48, .55); border-radius: 24px; }
.song-pausebox[hidden] { display: none; }
.song-resume-btn { width: 128px; height: 128px; border-radius: 50%; border: 0; background: #fff; color: var(--blue); display: grid; place-items: center;
  box-shadow: 0 8px 0 #B9C8E6, 0 16px 30px rgba(0,0,0,.35); padding-left: 8px; cursor: pointer; }
.song-resume-btn svg, .paused .song-resume-btn svg { width: 64px; height: 64px; background: none; padding: 0; border-radius: 0; box-shadow: none; }
.song-resume-btn:active { transform: translateY(4px); box-shadow: 0 4px 0 #B9C8E6, 0 10px 20px rgba(0,0,0,.35); }
@media (orientation: landscape) {
  .song-stage { padding-top: 0; }
  .song-ribbon { font-size: clamp(20px, 6.5vh, 34px); }
  .song-stage { padding: 0; justify-content: center; }
  .song-walker { width: auto; height: calc(100% - 4.6em); aspect-ratio: 5 / 4.3; margin-top: 2.6em; }
  .song-bob { height: 100%; }
  .song-card3d { height: 100%; width: 100%; aspect-ratio: auto; }
  .song-back .song-name { font-size: clamp(28px, 13vh, 72px); }
}
@media (prefers-reduced-motion: reduce) { .song-card3d { transition: none; } }
.song-intro b { line-height: 1.15; text-align: center; }
@media (orientation: landscape) { .song-intro br { display: none; } .song-intro b { font-size: clamp(40px, 17vh, 96px); margin-top: .4em; } }

/* ---------- 화석 발굴: 손가락 대신 발굴 붓 (10/11) ---------- */
.dig-sand { cursor: none; }
.dig-brush { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 3; transition: opacity .2s; }
.dig-brush svg { position: absolute; left: -30px; top: -146px; width: 60px; height: 150px; filter: drop-shadow(4px 6px 4px rgba(60, 35, 10, .35)); transform-origin: 30px 146px; }
.dig-brush.idle svg { animation: digBrushHint 1.2s ease-in-out infinite; }
.dig-brush.on svg { animation: none; }
.dig-stage.dug .dig-brush { opacity: 0; }
@keyframes digBrushHint { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(-18px) rotate(-8deg); } }
.dig-dust { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #E9C98E; pointer-events: none; z-index: 2; animation: digDust .5s ease-out forwards; }
@keyframes digDust { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dig-brush.idle svg, .dig-dust { animation: none; } }
/* 모아 보기: 제목 양옆 한글·English (10/11) */
.gal-head { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 18px); min-width: 0; }
.gal-head .gallery-title { margin: 0; white-space: nowrap; }
.gal-lang { min-height: 44px; padding: 0 clamp(10px, 3vw, 16px); border-radius: 999px; background: var(--surface); border: 2px solid var(--line); color: var(--blue-deep); font-family: var(--font-display); font-size: clamp(14px, 4vw, 18px); white-space: nowrap; }
.gal-lang.on { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 3px 0 #0B3E9C; }
.gal-name.en { font-family: var(--font-display); line-height: 1.05; }
/* 1 보기 작은 버튼 2개: 흰색 대신 파스텔 (10/11) — 베이비블루 / 민트. 다음 파스텔(남은 것): 페일 핑크 #FFD9E4, 라벤더 #E2D9FF */
.mode-card.manual { background: #CFE4FF; border: 0; box-shadow: 0 6px 0 #9DBDEB; color: #0A2E6E; }
.mode-card.manual .mode-icon { background: rgba(255,255,255,.7); color: #1557D0; }
.mode-card.manual .mode-text span { color: #33507F; }
.mode-card.manual.gallerycard { background: #BFEEDB; box-shadow: 0 6px 0 #86CDB1; }
.mode-card.manual.gallerycard .mode-icon { color: #0E8A63; }
.mode-card.manual.gallerycard .mode-text span { color: #2E5E4E; }
.mode-card.manual:active { transform: translateY(3px); box-shadow: 0 3px 0 #9DBDEB; }
.mode-card.manual.gallerycard:active { box-shadow: 0 3px 0 #86CDB1; }
/* 노래 가사 더 크게 (10/11 사용자: 유아라 글씨는 되도록 크게) — 넘치면 song.js fitLyric이 줄임 */
.song-ribbon { font-size: clamp(38px, 13vw, 72px); padding: .12em .5em; white-space: nowrap; }
@media (orientation: landscape) { .song-ribbon { font-size: clamp(26px, 10vh, 48px); } }
/* 1 보기 색 정리 (10/11): 진한 색은 플래시카드(제일 중요)만. 설정 = 페일 핑크 판 + 버터옐로 선택, 노래 = 라벤더, 노래·영상 한 줄 */
.opts { background: #FFE6EE; border: 0; box-shadow: 0 4px 0 #F3C3D2; }
.opt-name { color: #9A4A66; }
.opt-segs .seg { border-color: #F6CFDB; background: #fff; color: #8A5A6B; }
.opt-segs .seg.on { background: #FFD866; border-color: #FFD866; color: #0A2E6E; box-shadow: 0 3px 0 #E0B43A; }
.mode-card.songcard { background: #E3DAFF; color: #2E1F7A; box-shadow: 0 6px 0 #B9A8EE; }
.mode-card.songcard .mode-icon { background: rgba(255,255,255,.7); color: #5B3FD8; }
.mode-card.songcard .mode-text span { color: #4E4590; }
.mode-card.songcard:active { transform: translateY(3px); box-shadow: 0 3px 0 #B9A8EE; }
.see-row { margin-top: 4px; row-gap: 14px; }
/* 10/11 2차: 설정 = 연노랑 + 가장자리 절취선, 고른 칸 남색 / 영상 = 페일 핑크 / 반쪽 버튼 글씨 크게 */
.opts { background: #FFF6CF; border: 2.5px dashed #E6C760; box-shadow: none; }
.opt-name { color: #7A6420; }
.opt-segs .seg { border-color: #F0E0A0; background: #fff; color: #7A6A3A; }
.opt-segs .seg.on { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; box-shadow: none; }
.mode-card.videoplay { background: #FFD6E2; color: #8A2343; box-shadow: 0 6px 0 #EBA3B9; }
.mode-card.videoplay .mode-icon { background: rgba(255,255,255,.7); color: #D9455F; }
.mode-card.videoplay .mode-text span { color: #9A4A66; }
.mode-card.videoplay:active { transform: translateY(3px); box-shadow: 0 3px 0 #EBA3B9; }
.see-row .mode-card.half .mode-text b { font-size: 26px; }
.see-row .mode-card.half .mode-text span { font-size: 15px; }
.screen .opts { margin-top: 12px; }
/* 10/11 플래시카드 버튼·설정 고른 칸: 파랑·남색 → 코랄 (흰 글씨 읽히게 조금 진한 코랄) */
.mode-card.flash { background: #F2643F; box-shadow: 0 6px 0 #C94626; }
.mode-card.flash:active { box-shadow: 0 3px 0 #C94626; }
.mode-card.flash .mode-go { color: #F2643F; box-shadow: 0 4px 0 rgba(120, 35, 10, .35); }
.opt-segs .seg.on { background: #D04B29; border-color: #D04B29; color: #fff; }
/* 10/11 3차: 1 보기 한 화면에 — 작은 버튼 4개를 가로형(그림 왼쪽·제목·짧은 설명)으로 낮게 */
.see-row { row-gap: 10px; column-gap: 10px; }
.see-row .mode-card.half { flex-direction: row; align-items: center; gap: 10px; padding: 12px 12px 12px 12px; min-height: 76px; }
.see-row .mode-card.half .mode-icon { width: 42px; height: 42px; flex: none; }
.see-row .mode-card.half .mode-text b { font-size: 23px; line-height: 1.1; }
.see-row .mode-card.half .mode-text span { font-size: 13px; }
.see-row .mode-card.half { padding: 10px; gap: 8px; min-height: 68px; }
.see-row .mode-card.half .mode-icon { width: 40px; height: 40px; }
.see-row .mode-card.half .mode-text b { font-size: 21px; white-space: nowrap; }
.see-row .mode-card.half .mode-text span { display: none; }
/* 남는 자리 없이: 작은 버튼 높이를 화면 높이에 맞춰 늘림 (그림 위·제목 아래) */
.see-row .mode-card.half { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 12px 14px;
  min-height: min(132px, max(84px, calc((100dvh - 532px) / 2))); }
.see-row .mode-card.half .mode-icon { width: 42px; height: 42px; }
.see-row .mode-card.half .mode-text b { font-size: 25px; }
/* 10/11 4 놀기도 한 화면에: 설명 글 빼고, 버튼 높이를 화면 높이에 맞춤 (4줄) */
.play-row .mode-card.play .mode-text span { display: none; }
.play-row .mode-card.play { min-height: min(124px, max(76px, calc((100dvh - 318px) / 4))); padding: 12px 14px; gap: 8px; justify-content: center; }
.play-row .mode-card.play .mode-icon { width: 42px; height: 42px; }
.play-row .mode-card.play .mode-icon svg { width: 26px; height: 26px; }
.play-row .mode-card.play .mode-text b { font-size: 25px; white-space: nowrap; }
.play-row .mode-card.play.wide { gap: 14px; }
.play-row .mode-card.play { min-height: min(140px, max(76px, calc((100dvh - 262px) / 4))); }
.play-row .mode-card.play.wide { justify-content: flex-start; padding-left: 18px; }
/* 10/11 4 놀기 두 색 그라데이션. 색칠하기는 무지개로 구별 */
.mode-card.eggplay { background: linear-gradient(120deg, #FFD23F, #F28A16); }
.mode-card.match { background: linear-gradient(120deg, #FF5E7A, #F5872E); }
.mode-card.puzzle { background: linear-gradient(120deg, #5B7CFA, #9B4FE0); }
.mode-card.digplay { background: linear-gradient(120deg, #C98A3E, #8F5A2A); }
.mode-card.sortplay { background: linear-gradient(120deg, #16B59A, #1A86C9); }
.mode-card.colorplay { background: linear-gradient(100deg, #F0506E 0%, #F7A23B 22%, #E8C81E 40%, #3DBE6B 58%, #2E8BEA 78%, #8A5BE8 100%); box-shadow: 0 6px 0 #6E4A8F; }
/* 10/11 2 따라 하기·3 맞히기도 같은 방식: 설명 빼고, 한 화면에 꽉, 두 색 그라데이션 */
.follow-row, .guess-row { display: grid; gap: 12px; }
.guess-row { grid-template-columns: 1fr 1fr; }
.follow-row .mode-card, .guess-row .mode-card { border: 0; color: #fff; }
.follow-row .mode-card .mode-text span, .guess-row .mode-card .mode-text span { display: none; }
.follow-row .mode-card .mode-icon, .guess-row .mode-card .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
.follow-row .mode-card { min-height: min(240px, max(110px, calc((100dvh - 236px) / 2))); gap: 18px; padding: 18px 22px; }
.follow-row .mode-card .mode-icon { width: 64px; height: 64px; border-radius: 20px; }
.follow-row .mode-card .mode-icon svg { width: 38px; height: 38px; }
.follow-row .mode-card .mode-text b { font-size: 32px; }
.follow-row .mode-card.teacher::after { display: none; }
.guess-row .mode-card { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 14px;
  min-height: min(220px, max(100px, calc((100dvh - 262px) / 2))); }
.guess-row .mode-card .mode-icon { width: 48px; height: 48px; }
.guess-row .mode-card .mode-text b { font-size: 25px; white-space: nowrap; }
.mode-card.teacher { background: linear-gradient(120deg, #2BC46F, #129E96); }
.mode-card.callplay { background: linear-gradient(120deg, #FFA23D, #E5452F); }
.mode-card.quiz { background: linear-gradient(120deg, #3B6BFA, #2A3BB8); }
.mode-card.find { background: linear-gradient(120deg, #15BFD0, #0E78A8); }
.mode-card.shadowplay { background: linear-gradient(120deg, #56608C, #1F2440); }
.mode-card.sizeplay { background: linear-gradient(120deg, #8BCF3A, #239A55); }
/* 너무 큼 → 4 놀기 버튼 크기와 비슷하게 고정 */
.follow-row .mode-card { min-height: 124px; }
.follow-row .mode-card .mode-icon { width: 54px; height: 54px; border-radius: 16px; }
.follow-row .mode-card .mode-icon svg { width: 32px; height: 32px; }
.follow-row .mode-card .mode-text b { font-size: 28px; }
.guess-row .mode-card { min-height: 120px; }
.guess-row .mode-card .mode-icon { width: 42px; height: 42px; }

/* ---------- 10/11 메뉴 버튼 모양: 공통은 흰 테두리 스티커(어우러짐), 메뉴마다 모양은 다르게(다양함) ----------
   1 보기 = 기울어진 카드 / 2 따라 하기 = 알약 / 3 맞히기 = 동그라미 / 4 놀기 = 티켓 */
.see-row .mode-card, .follow-row .mode-card, .guess-row .mode-card .mode-icon, .play-row .mode-card { border: 4px solid #fff !important; }
/* 1 보기: 카드를 책상에 흩어 놓은 듯 */
.see-row .mode-card { border-radius: 18px; box-shadow: 0 6px 14px rgba(10, 46, 110, .18) !important; }
.see-row .mode-card:nth-child(4n+1) { transform: rotate(-2deg); }
.see-row .mode-card:nth-child(4n+2) { transform: rotate(1.6deg); }
.see-row .mode-card:nth-child(4n+3) { transform: rotate(1.4deg); }
.see-row .mode-card:nth-child(4n+4) { transform: rotate(-1.8deg); }
.see-row .mode-card:active { transform: scale(.97); }
/* 2 따라 하기: 알약 */
.follow-row .mode-card { border-radius: 999px; min-height: 104px; padding: 14px 26px 14px 18px; box-shadow: 0 6px 14px rgba(10, 46, 110, .2) !important; }
.follow-row .mode-card .mode-icon { border-radius: 50%; }
/* 3 맞히기: 동그라미 (물음표 풍선처럼) */
.guess-row { row-gap: 18px; }
.guess-row .mode-card { background: none !important; box-shadow: none !important; color: #0A2E6E; align-items: center; justify-content: flex-start; min-height: 0; padding: 0; gap: 8px; }
.guess-row .mode-card .mode-icon { width: min(124px, 30vw); height: min(124px, 30vw); border-radius: 50%; box-shadow: 0 6px 14px rgba(10, 46, 110, .25); }
.guess-row .mode-card .mode-icon svg { width: 52px; height: 52px; }
.guess-row .mode-card .mode-text { text-align: center; }
.guess-row .mode-card .mode-text b { font-size: 22px; color: #0A2E6E; }
.guess-row .mode-card:active .mode-icon { transform: scale(.94); }
.mode-card.quiz .mode-icon { background: linear-gradient(120deg, #3B6BFA, #2A3BB8) !important; }
.mode-card.find .mode-icon { background: linear-gradient(120deg, #15BFD0, #0E78A8) !important; }
.mode-card.shadowplay .mode-icon { background: linear-gradient(120deg, #56608C, #1F2440) !important; }
.mode-card.sizeplay .mode-icon { background: linear-gradient(120deg, #8BCF3A, #239A55) !important; }
/* 4 놀기: 놀이 티켓 (양옆 홈 + 점선) */
.play-row .mode-card { border-radius: 20px; box-shadow: none !important; filter: drop-shadow(0 5px 8px rgba(10, 46, 110, .22));
  -webkit-mask: radial-gradient(circle 12px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 12px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; }
.play-row .mode-card::before { content: ""; position: absolute; left: 18px; right: 18px; top: 50%; border-top: 2.5px dashed rgba(255, 255, 255, .5); }
.play-row .mode-card:not(.wide) { justify-content: space-between; }
.play-row .mode-card.wide::before { left: auto; right: 30%; top: 14px; bottom: 14px; border-top: 0; border-left: 2.5px dashed rgba(255, 255, 255, .5); }
.play-row .mode-card .mode-icon, .play-row .mode-card .mode-text { position: relative; z-index: 1; }
.play-row .mode-card:active { transform: translateY(3px); }
.see-row { padding-bottom: 2px; }
.see-row .mode-card.half { min-height: min(132px, max(80px, calc((100dvh - 590px) / 2))); }
.see-row .mode-card.half { padding: 8px 12px; gap: 6px; min-height: min(132px, max(80px, calc((100dvh - 560px) / 2))); }
.see-row .mode-card.half .mode-icon { width: 38px; height: 38px; }
/* 후렴·끝 가사 뒷부분("공룡 친구들", "공룡 친구 안녕!")도 가사와 같은 크기·같은 노란 띠 */
.song-gname { display: inline-flex; align-items: center; justify-content: center; min-height: 0; margin: 0; padding: .12em .5em; border-radius: 999px; white-space: nowrap;
  background: #FFD12E; color: #0A2E6E; text-shadow: none; box-shadow: 0 6px 0 #D9A400; font-size: clamp(38px, 13vw, 72px); line-height: 1.2; }
.song-gname:empty { visibility: hidden; }
.song-gname.pop { animation: songRibbon .35s cubic-bezier(.2,1.5,.4,1); }
@media (orientation: landscape) { .song-gname { font-size: clamp(26px, 10vh, 48px); } }

/* ---------- 시작 화면 2판 (10/11): 배경 그림 + 진짜 버튼 + 카드 공룡 ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.start2 { padding: 0 !important; gap: 0; display: block; background: #7CC8F2; overflow: hidden; }
/* 세로: 그림이 화면을 꽉 채움(cover). 가로: 그림 전체가 보이게(contain) + 옆은 같은 그림을 흐리게 */
.st-board { position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: max(100vw, calc(100dvh * 941 / 1672)); aspect-ratio: 941 / 1672; }
.st-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.st-blur { position: absolute; inset: -40px; background: url("../assets/start-bg-tiny.webp") center / cover; filter: blur(24px) saturate(1.1); }
@media (orientation: landscape) { .st-board { width: auto; height: 100dvh; } }
/* 시작 버튼: 노란 알약 + 주황 테두리 + 흰 ▶ (보내 준 그림과 같은 자리: 가로 가운데, 세로 45%) */
.st-go { position: absolute; left: 50%; top: 45%; translate: -50% -50%; z-index: 3; width: 48%; aspect-ratio: 2.6 / 1;
  display: flex; align-items: center; justify-content: center; gap: 6%; border-radius: 999px; border: .55cqw solid #fff;
  background: linear-gradient(180deg, #FFE35A 0%, #FFC21F 60%, #FFAE12 100%); color: #5A2A12;
  box-shadow: 0 0 0 .9cqw #F2642E, 0 1.4cqw 0 .9cqw #C6461C, 0 3cqw 4cqw rgba(60, 30, 0, .35);
  font-family: var(--font-display); font-weight: 400; font-size: 9.5cqw; letter-spacing: .01em; animation: stGo 1.8s ease-in-out infinite; }
.st-board { container-type: inline-size; }
.st-go svg { width: 9cqw; height: 9cqw; fill: #fff; stroke: #F2642E; stroke-width: 2; stroke-linejoin: round; paint-order: stroke; }
.st-go span { text-shadow: 0 .4cqw 0 rgba(255, 255, 255, .6); }
.st-go:active { translate: -50% calc(-50% + 1cqw); box-shadow: 0 0 0 .9cqw #F2642E, 0 .5cqw 0 .9cqw #C6461C, 0 2cqw 3cqw rgba(60, 30, 0, .3); }
@keyframes stGo { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
/* 카드 공룡들: 풀밭 위에 (그림 비율 기준 %) */
.start2 .parade { position: absolute; inset: auto 0 0 0; height: 100%; z-index: 2; }
.start2 .parade img { bottom: auto; }
.start2 .parade .p-mid { width: 62%; max-width: none; left: 50%; top: 61%; }
.start2 .parade .p-left { width: 56%; max-width: none; left: -6%; top: 66%; }
.start2 .parade .p-right { width: 46%; max-width: none; left: auto; right: -2%; top: 70%; }
.start2 .st-ptero { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .st-go { animation: none; } }
.st-go { top: 49%; width: 42%; font-size: 8.6cqw; }
.st-go svg { width: 8cqw; height: 8cqw; }
.start2 .parade .p-mid { width: 66%; top: 57%; }
.start2 .parade .p-left { width: 60%; left: -7%; top: 62%; }
.start2 .parade .p-right { width: 50%; right: -4%; top: 67%; }
/* 시작 화면 2판: 하늘에 익룡 세 마리, 땅에 알록달록 공룡 여러 마리 (멀리 작게 · 가까이 크게) */
.start2 .parade { display: none; }
.herd { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hd { position: absolute; display: block; transform-origin: 50% 100%; }
.hd img { width: 100%; display: block; filter: drop-shadow(0 .8cqw .8cqw rgba(20, 60, 20, .25)); }
.hd.flip img { transform: scaleX(-1); }
.hd-bob { animation: hdBob 1s ease-in-out infinite; }
.hd-graze { animation: hdGraze 6s ease-in-out infinite; }
.hd-sway { animation: hdSway 7s ease-in-out infinite; }
.hd-walk { animation: hdWalk 10s ease-in-out infinite alternate, hdBob .9s ease-in-out infinite; }
@keyframes hdBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5%) rotate(-.5deg); } }
@keyframes hdGraze { 0%, 100% { transform: rotate(0); } 35%, 55% { transform: rotate(2.5deg) translateY(1%); } }
@keyframes hdSway { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-1.2deg) scale(1.005, 1.01); } }
@keyframes hdWalk { 0% { translate: -6% 0; } 100% { translate: 6% 0; } }
/* 익룡 세 마리: 높이·크기·빠르기를 다르게 */
.start2 .st-ptero { z-index: 1; animation-name: stPtero; }
.st-p1 { top: 7%; width: 15%; animation-duration: 16s; animation-delay: -2s; }
.st-p2 { top: 14%; width: 10%; animation-duration: 21s; animation-delay: -11s; }
.st-p3 { top: 3%; width: 8%; animation-duration: 25s; animation-delay: -18s; }
@keyframes stPtero { 0% { transform: translate(-30cqw, 0); } 80% { transform: translate(110cqw, -4cqw); } 100% { transform: translate(110cqw, -4cqw); } }
@media (prefers-reduced-motion: reduce) { .hd { animation: none !important; } }
.st-p1 { top: 6%; width: 26%; }
.st-p2 { top: 15%; width: 18%; }
.st-p3 { top: 2%; width: 13%; }
.hd img { margin-bottom: -6%; }
/* 시작 화면 3판: 빔빔 친구들(만화풍) — 누르면 펄쩍 */
.herd { pointer-events: none; }
.hd { pointer-events: auto; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hd img { margin-bottom: -3%; filter: drop-shadow(0 1cqw 1.2cqw rgba(30, 60, 20, .3)); -webkit-user-drag: none; user-select: none; }
.hd-hop { animation: hdHop 2.4s ease-in-out infinite; }
@keyframes hdHop { 0%, 70%, 100% { transform: translateY(0); } 78% { transform: translateY(-5%) rotate(-2deg); } 86% { transform: translateY(0) scale(1.03, .97); } }
.hd.hit { animation: hdJump .55s cubic-bezier(.3, 1.4, .5, 1) !important; }
@keyframes hdJump { 0% { transform: none; } 35% { transform: translateY(-14%) scale(1.04) rotate(-2deg); } 70% { transform: translateY(0) scale(1.06, .94); } 100% { transform: none; } }
/* 익룡: 날갯짓(세로로 살짝 접혔다 펴짐) */
.start2 .st-ptero { position: absolute; left: 0; pointer-events: none; animation: stPtero linear infinite; }
.start2 .st-ptero img { width: 100%; display: block; transform-origin: 50% 45%; animation: stFlap .7s ease-in-out infinite alternate; }
@keyframes stFlap { from { transform: scaleY(1) translateY(0); } to { transform: scaleY(.82) translateY(4%); } }
.st-p1 { top: 4%; width: 34%; animation-duration: 14s; animation-delay: -3s; }
.st-p2 { top: 14%; width: 20%; animation-duration: 19s; animation-delay: -12s; }
.st-p3 { top: 1%; width: 14%; animation-duration: 24s; animation-delay: -19s; }
.st-p2 img { animation-duration: .6s; } .st-p3 img { animation-duration: .5s; }
/* 덜 복잡하게: 풍경 가운데를 살짝 밝게 덮어(안개) 공룡·버튼이 먼저 보이게 */
.st-board::after { content: ""; position: absolute; left: 0; right: 0; top: 40%; height: 40%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(235, 248, 255, 0) 0%, rgba(235, 248, 255, .45) 45%, rgba(235, 248, 255, .25) 75%, rgba(235, 248, 255, 0) 100%); }
.st-p1 { width: 30%; top: 3%; }
.st-p2 { width: 16%; top: 13%; }
/* 시작 화면 4판: 사용자 완성 그림 한 장(깔끔) + 그림 속 버튼 자리에 진짜 버튼 + 공룡 자리 누르면 반짝·울음 */
.start2, .start2 * { touch-action: manipulation; }
.st-spot { position: absolute; z-index: 2; padding: 0; border: 0; background: none; border-radius: 40%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.st-go.st-go-baked { top: 45%; width: 49%; aspect-ratio: auto; height: 10.2%; background: none; border: 0; box-shadow: none; overflow: hidden; border-radius: 999px; animation: none; }
.st-go-baked:active { translate: -50% -50%; box-shadow: none; background: rgba(120, 50, 0, .12); }
/* 그림 속 시작 버튼 위로 빛이 스르륵 지나감 */
.st-shine { position: absolute; top: -20%; bottom: -20%; width: 22%; left: -30%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0)); transform: skewX(-18deg); animation: stShine 2.8s ease-in-out infinite; }
@keyframes stShine { 0%, 55% { left: -30%; } 85%, 100% { left: 115%; } }
@media (prefers-reduced-motion: reduce) { .st-shine { display: none; } }
.st-board::after { display: none; }
/* 시작 화면 5판: "빔빔 공룡카드" 로고가 위에서 통 튀며 날아와 자리 잡고, 부제가 옆에서 쏙 */
.st-logo { position: absolute; left: 6.9%; top: 6.76%; width: 87.04%; z-index: 2; pointer-events: none; transform-origin: 50% 60%;
  animation: stLogoIn 1.1s cubic-bezier(.25, 1.45, .45, 1) .15s both, stLogoFloat 3.2s ease-in-out 1.4s infinite; }
.st-tag { position: absolute; left: 16.15%; top: 32.78%; width: 68.44%; z-index: 2; pointer-events: none;
  animation: stTagIn .6s cubic-bezier(.3, 1.4, .5, 1) 1s both; }
@keyframes stLogoIn { 0% { transform: translateY(-120%) scale(.5) rotate(-8deg); opacity: 0; } 55% { transform: translateY(6%) scale(1.06) rotate(2deg); opacity: 1; } 75% { transform: translateY(-2%) scale(.98) rotate(-1deg); } 100% { transform: none; opacity: 1; } }
@keyframes stLogoFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2%; } }
@keyframes stTagIn { 0% { transform: translateX(-130%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.st-go.st-go-baked { animation: stGoIn .5s cubic-bezier(.3, 1.6, .5, 1) 1.3s both; }
@keyframes stGoIn { 0% { scale: 0; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .st-logo, .st-tag, .st-go.st-go-baked { animation: none; } }
/* 시작 버튼: 그림에서 오려 낸 버튼을 같은 자리에 올려 진짜처럼 — 누르면 뿅! 커졌다 돌아옴 */
.st-go.st-go-baked { left: 25.4%; top: 39.77%; width: 49.42%; height: 10.53%; translate: none; border-radius: 999px; overflow: visible; background: none;
  animation: stGoBreath 2s ease-in-out 1.6s infinite; transition: transform .12s ease-out, filter .12s; }
.st-go-baked img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.st-go-baked .st-shine { z-index: 1; border-radius: 0; }
.st-go-baked { clip-path: inset(0 round 999px); }
@keyframes stGoBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.st-go.st-go-baked:active { translate: none; background: none; box-shadow: none; transform: scale(1.08); filter: brightness(1.08); animation: none; }
.st-go.st-go-baked.pressed { animation: stGoPop .32s cubic-bezier(.3, 1.8, .5, 1) both; filter: brightness(1.1); }
@keyframes stGoPop { 0% { transform: scale(1.08); } 45% { transform: scale(1.22, 1.14); } 100% { transform: scale(1.1); } }

/* ---------- 공룡 퀴즈 (설명 듣고 고르기, 10/11) ---------- */
.mode-card.hquiz .mode-icon { background: linear-gradient(120deg, #FF7A59, #D9366B) !important; }
.hintquiz .hq-main { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 6px 16px 18px; min-height: 0; }
.hq-bubble { position: relative; width: min(640px, 100%); background: #fff; border-radius: 26px; padding: 18px 22px 20px; box-shadow: 0 6px 16px rgba(10, 46, 110, .14); text-align: center; }
.hq-bubble::after { content: ""; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); border: 14px solid transparent; border-bottom: 0; border-top-color: #fff; }
.hq-pips { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.hq-pips i { width: 12px; height: 12px; border-radius: 50%; background: #DCE6F7; }
.hq-pips i.on { background: #FF7A59; }
.hq-text { margin: 0; font-size: clamp(26px, 7.4vw, 40px); line-height: 1.3; font-weight: 800; color: #0A2E6E; word-break: keep-all; min-height: 2.6em; display: flex; align-items: center; justify-content: center; }
.hq-text.pop { animation: hqPop .35s ease; }
@keyframes hqPop { 0% { transform: scale(.9); opacity: .2; } 100% { transform: none; opacity: 1; } }
.hq-hear { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #EEF3FF; color: #1257D6; display: grid; place-items: center; }
.hq-cards { width: min(720px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.hq-card { aspect-ratio: 1; background: #fff; border: 4px solid #fff; border-radius: 22px; box-shadow: 0 6px 14px rgba(10, 46, 110, .16); padding: 6px; display: grid; place-items: center; overflow: hidden; animation: hqIn .4s both; animation-delay: calc(var(--i) * .12s); transition: opacity .3s, transform .3s; }
.hq-card .art-img { width: 100%; height: 100%; object-fit: contain; }
.hq-card.found { border-color: #FFD54A; transform: scale(1.08); box-shadow: 0 0 0 6px rgba(255, 213, 74, .45), 0 8px 18px rgba(10, 46, 110, .2); }
.hq-card.fade { opacity: .25; transform: scale(.94); }
.hq-card.nope { animation: hqShake .4s; }
@keyframes hqIn { from { transform: translateY(18px) scale(.9); opacity: 0; } }
@keyframes hqShake { 0%, 100% { transform: none; } 25% { transform: translateX(-8px) rotate(-3deg); } 75% { transform: translateX(8px) rotate(3deg); } }
.hq-name { min-height: 1.3em; }
@media (orientation: portrait) and (max-width: 600px) {
  .hq-cards { grid-template-columns: 1fr 1fr; }
  .hq-cards .hq-card:nth-child(3) { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
}
.hq-hear[hidden] { display: none; }
@media (orientation: landscape) and (max-height: 600px) {
  .hintquiz .hq-main { flex-direction: row; align-items: center; justify-content: center; gap: 22px; padding: 4px 20px 12px; }
  .hq-bubble { width: 34%; flex: none; padding: 14px 16px 16px; }
  .hq-bubble::after { left: auto; right: -14px; bottom: 50%; transform: translateY(50%); border: 14px solid transparent; border-right: 0; border-left-color: #fff; }
  .hq-text { font-size: clamp(22px, 4.2vw, 34px); }
  .hq-cards { width: auto; grid-template-columns: repeat(3, min(24vw, calc(100dvh - 150px))); margin: 0; }
  .hq-name { position: absolute; bottom: 8px; left: 0; right: 0; }
}
.hq-text.is-name { color: #1257D6; font-size: clamp(30px, 8.6vw, 46px); }
@media (orientation: landscape) and (max-height: 600px) {
  .hq-bubble { width: 28%; }
  .hq-cards { grid-template-columns: repeat(3, min(19vw, calc(100dvh - 150px))); }
  .hq-text.is-name { font-size: clamp(24px, 4.4vw, 36px); }
}
@media (orientation: landscape) and (max-height: 600px) {
  .hq-bubble { width: 34%; }
  .hq-cards { grid-template-columns: repeat(3, min(17vw, calc(100dvh - 150px))); }
  .hq-text { font-size: clamp(20px, 3.6vw, 32px); }
  .hq-text.is-name { font-size: clamp(20px, 3.4vw, 32px); white-space: nowrap; }
}

/* ---------- 공룡 백과사전 (10/11) ---------- */
.gal-big { flex-direction: column; gap: 14px; display: flex; align-items: center; justify-content: center; }
.gal-more { border: 0; border-radius: 999px; padding: 14px 30px; font: 800 22px/1 var(--font-display, inherit); color: #fff; background: linear-gradient(120deg, #FF7A59, #D9366B); box-shadow: 0 5px 0 rgba(120, 20, 50, .35); animation: galPop .32s .1s both cubic-bezier(.2, 1.3, .4, 1); }
.gal-more:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(120, 20, 50, .35); }
.book { position: fixed; inset: 0; z-index: 30; background: #EEF3FB; display: flex; flex-direction: column; animation: galFade .2s ease; touch-action: pan-y; }
.bk-top { display: flex; align-items: center; gap: 12px; padding: 12px 14px 6px; }
.bk-count { font-weight: 800; color: #6B7FA6; font-size: 16px; }
.bk-scroll { flex: 1; overflow-y: auto; padding: 4px 16px 28px; }
.bk-hero { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; }
.bk-card { width: min(100%, 640px); aspect-ratio: 4 / 3; background: #fff; border-radius: 26px; box-shadow: 0 6px 0 rgba(6, 30, 80, .18); display: grid; place-items: center; padding: 4%; }
.bk-card .art-img { width: 100%; height: 100%; object-fit: contain; }
.bk-nav { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: #1257D6; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(10, 46, 110, .15); }
.bk-nav[hidden] { visibility: hidden; display: grid; }
.bk-name { display: block; margin: 14px auto 4px; border: 0; background: none; text-align: center; font: 800 clamp(30px, 8.6vw, 52px)/1.1 var(--font-card, inherit); color: var(--blue-deep, #0A2E6E); word-break: keep-all; }
.bk-name small { display: block; margin-top: 4px; font: 700 16px/1.2 var(--font-display, inherit); color: #6B7FA6; }
.bk-acts { display: flex; justify-content: center; gap: 12px; margin: 8px 0 14px; }
.bk-acts:empty { display: none; }
.bk-act { display: flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 10px 18px; background: #fff; color: #1257D6; font-weight: 800; font-size: 18px; box-shadow: 0 3px 8px rgba(10, 46, 110, .14); }
.bk-act svg { width: 26px; height: 26px; }
.bk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 760px; margin: 0 auto; }
.bk-tile { background: #fff; border-radius: 22px; padding: 14px 12px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; box-shadow: 0 4px 10px rgba(10, 46, 110, .08); min-width: 0; }
.bk-tile h3 { margin: 0; font-size: 15px; color: #6B7FA6; font-weight: 800; }
.bk-tile b { font-size: clamp(18px, 4.6vw, 24px); color: #0A2E6E; word-break: keep-all; }
.bk-tile small { font-size: 14px; color: #6B7FA6; word-break: keep-all; }
.bk-era { display: flex; width: 100%; height: 26px; border-radius: 13px; overflow: hidden; gap: 3px; margin-top: 4px; }
.bk-era span { position: relative; flex: 1; background: #E3EAF6; }
.bk-era span:nth-child(1).on { background: #F2A33A; } .bk-era span:nth-child(2).on { background: #3FAE6A; } .bk-era span:nth-child(3).on { background: #3B6BFA; }
.bk-era i { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid rgba(0, 0, 0, .25); transform: translate(-50%, -50%); }
.bk-era-l { display: flex; width: 100%; gap: 3px; font-size: 11px; color: #8A9BBE; font-weight: 700; }
.bk-era-l span { flex: 1; }
.bk-diet { display: flex; gap: 6px; height: 64px; align-items: center; }
.bk-diet svg { width: 58px; height: 58px; }
.bk-diet.meat svg { color: #E0563B; } .bk-diet.plant svg { color: #2E9E57; } .bk-diet.both svg { width: 46px; height: 46px; }
.bk-diet.both svg:first-child { color: #E0563B; } .bk-diet.both svg:last-child { color: #2E9E57; } .bk-diet.unknown svg, .bk-q svg { color: #A9B8D6; }
.bk-q svg { width: 58px; height: 58px; }
.bk-people { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 2px; min-height: 64px; max-width: 100%; }
.bk-people i { width: 16px; height: 32px; color: #3B6BFA; display: block; }
.bk-people i svg { width: 100%; height: 100%; display: block; }
.bk-people em { font-style: normal; font-weight: 800; color: #3B6BFA; margin-left: 4px; font-size: 16px; }
.bk-map { width: 100%; max-width: 220px; height: auto; }
.bk-map path { fill: #DCE5F3; stroke: #fff; stroke-width: 1; }
.bk-map path.on { fill: #FF7A59; }
.bk-read { max-width: 760px; margin: 14px auto 0; background: #fff; border-radius: 22px; padding: 16px 18px; box-shadow: 0 4px 10px rgba(10, 46, 110, .08); }
.bk-read p { margin: 6px 0; font-size: 19px; line-height: 1.5; color: #23395F; word-break: keep-all; }
.bk-read p b { color: #D9366B; margin-right: 6px; }
@media (orientation: landscape) and (max-height: 600px) {
  .bk-scroll { display: grid; grid-template-columns: 42% 1fr; gap: 0 18px; align-items: start; }
  .bk-left { position: sticky; top: 0; }
  .bk-name { font-size: clamp(26px, 4.4vw, 44px); margin-top: 8px; }
  .bk-grid { width: 100%; }
}
.bk-era-l span { white-space: nowrap; letter-spacing: -.5px; }
.bk-sec { max-width: 760px; margin: 14px auto 0; background: #fff; border-radius: 22px; padding: 16px 18px; box-shadow: 0 4px 10px rgba(10, 46, 110, .08); }
.bk-sec h3 { margin: 0 0 8px; font-size: 17px; color: #D9366B; font-weight: 800; }
.bk-sec ul { margin: 0; padding: 0; list-style: none; }
.bk-sec li { position: relative; padding-left: 22px; margin: 6px 0; font-size: 19px; line-height: 1.45; color: #23395F; word-break: keep-all; }
.bk-sec li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: #3B6BFA; }
.bk-facts li::before { background: #FFB020; }
.bk-rows { display: grid; gap: 10px; }
.bk-rows div { display: grid; grid-template-columns: 6.6em 1fr; gap: 10px; align-items: baseline; }
.bk-rows dt { font-size: 15px; font-weight: 800; color: #6B7FA6; }
.bk-rows dd { margin: 0; font-size: 18px; line-height: 1.4; color: #23395F; word-break: keep-all; }
.bk-friends { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.bk-friend { flex: none; width: 108px; border: 0; background: #F3F6FC; border-radius: 16px; padding: 6px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bk-friend .art-img { width: 96px; height: 72px; object-fit: contain; }
.bk-friend span { font-size: 13px; font-weight: 800; color: #0A2E6E; word-break: keep-all; text-align: center; line-height: 1.2; }
@media (orientation: landscape) and (max-height: 600px) { .bk-sec { margin-top: 12px; } }

/* ---------- 공룡 미로 (10/11) ---------- */
.mode-card.mazeplay { background: linear-gradient(120deg, #3FBF8F, #1E8C7E); box-shadow: 0 6px 0 #156B60; }
.mode-card.mazeplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
.mazegame, .mazemap { overflow-x: hidden; }
.mazegame .mz-wrap { flex: 1; min-height: 0; display: grid; place-items: center; padding: 6px 14px; }
.mz-box { position: relative; aspect-ratio: var(--ar, 1); width: min(calc(100vw - 36px), 640px, calc((100dvh - 250px) * var(--w, 1) / var(--h, 1))); }
.mz-svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; border-radius: 14px; box-shadow: 0 6px 18px rgba(20, 40, 30, .18); }
.mz-road-edge { fill: none; stroke: var(--e, #3E3524); stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.mz-road { fill: none; stroke-width: .64; stroke-linecap: round; stroke-linejoin: round; }
.mz-start { fill: #fff; opacity: .35; }
.mz-trail { fill: none; stroke: #FF9F1C; stroke-width: .14; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .01 .24; opacity: .9; }
.mz-nest { fill: #9C6B36; } .mz-nest2 { fill: #6E4A24; } .mz-egg { fill: #FFFDF4; stroke: #D9C9A3; stroke-width: .02; }
.mz-goal.wait { animation: mzWiggle .5s ease; transform-box: fill-box; }
.mz-hero { transition: transform .12s ease-out; }
.mz-hero-bg { fill: #fff; stroke: #FF7A59; stroke-width: .05; }
.mz-hero.home .mz-hero-bg { stroke: #FFD54A; stroke-width: .08; }
.mz-name { text-align: center; min-height: 1.4em; }
/* 꾸밈 */
.mz-d-fern { fill: #3F7D33; stroke: #2F6427; stroke-width: .05; }
.mz-jungle .mz-d-fern { fill: #2F8A3E; stroke: #1F5E2A; }
.mz-d-rock { fill: #9A6A3E; } .mz-d-rock-hi { fill: #C9955F; }
.mz-d-shell { fill: #FFE3D3; stroke: #E9A98A; stroke-width: .015; } .mz-d-shell-l { fill: none; stroke: #E9A98A; stroke-width: .012; }
.mz-d-weed { fill: none; stroke: #3FA27A; stroke-width: .035; stroke-linecap: round; }
.mz-d-cloud { fill: #fff; opacity: .55; }
.mz-d-reed { fill: none; stroke: #7C8C3E; stroke-width: .022; stroke-linecap: round; } .mz-d-reed-top { fill: #7A5230; }
.mz-d-crystal { fill: #B9A3F0; } .mz-d-crystal2 { fill: #8FD3F5; }
.mz-d-pine { fill: #2F6A55; }
.mz-d-lava-rock { fill: #2A1C19; } .mz-d-lava { fill: none; stroke: #FF7A2F; stroke-width: .025; stroke-linecap: round; }
/* 줍는 것 · 열쇠 · 문 · 아기 공룡 */
.mz-i-egg { fill: #FFF8E6; stroke: #D9C29A; stroke-width: .02; } .mz-i-spot { fill: #C9A06B; }
.mz-i-bubble { fill: rgba(120, 200, 240, .35); stroke: #3E9BD0; stroke-width: .035; } .mz-i-shine { fill: #fff; }
.mz-i-feather { fill: #FFB4C8; stroke: #E57A9A; stroke-width: .015; } .mz-i-quill { stroke: #E57A9A; stroke-width: .015; }
.mz-i-bone { fill: #FFF6E2; stroke: #CDB68C; stroke-width: .018; }
.mz-bob { animation: mzBob 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mz-item.got, .mz-baby.got { animation: mzGot .45s ease-out forwards; transform-box: fill-box; transform-origin: center; }
.mz-door-s { fill: #000; opacity: .25; transform: translate(.03px, .04px); }
.mz-door-l { fill: #8E7F69; stroke: #4A4034; stroke-width: .035; }
.mz-door-h { fill: #4A4238; }
.mz-door.nudge { animation: mzWiggle .4s ease; transform-box: fill-box; }
.mz-door.open { animation: mzGot .5s ease-out forwards; transform-box: fill-box; transform-origin: center; }
.mz-baby-bg { fill: #fff; stroke: #7FC8A9; stroke-width: .04; }
.mz-follow { transition: transform .15s ease-out; }
.mz-dark { fill: #0E0B14; opacity: .94; pointer-events: none; }
@keyframes mzBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.06px); } }
@keyframes mzGot { to { transform: scale(1.8); opacity: 0; } }
@keyframes mzWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
/* 모을 것 표시 */
.mz-hud { display: flex; justify-content: center; gap: 12px; min-height: 54px; padding: 2px 16px 4px; }
.mz-hud[hidden] { display: none; }
.mz-hud-i { width: 50px; height: 50px; background: #E6ECF4; border-radius: 50%; padding: 3px; opacity: .6; filter: grayscale(1) brightness(.85); }
.mz-hud-i.got { opacity: 1; filter: none; background: #FFE9A8; box-shadow: 0 3px 0 #E8C25A; }
.mz-hud-baby { width: 50px; height: 50px; border-radius: 50%; background: #EEF2F7; display: grid; place-items: center; opacity: .45; filter: grayscale(1); }
.mz-hud-baby img { width: 44px; height: 44px; object-fit: contain; }
.mz-hud-baby.got { opacity: 1; filter: none; background: #E2F5EC; }
.mz-hud.blink { animation: mzWiggle .5s ease 2; }
/* 알 깨기 */
.mz-hatch { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .55); border-radius: 14px; pointer-events: none; }
.mz-hatch[hidden] { display: none; }
.mzh-egg { position: relative; width: 38%; aspect-ratio: 3 / 4; animation: mzhIn .35s ease-out, mzhShake .3s ease-in-out .4s 3; }
.mzh-egg svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mzh-shell { fill: #FFF8E6; stroke: #D9C29A; stroke-width: 2.5; } .mzh-spot { fill: #C9A06B; }
.mzh-card { position: absolute; width: 70%; max-height: 80%; object-fit: contain; transform: scale(.2); opacity: 0; }
.mz-hatch.open .mzh-top { animation: mzhTop .6s ease-out forwards; }
.mz-hatch.open .mzh-bot { animation: mzhFade .6s ease-out .15s forwards; }
.mz-hatch.open .mzh-card { animation: mzhCard .55s cubic-bezier(.3, 1.5, .5, 1) .1s forwards; }
@keyframes mzhIn { from { transform: scale(.3); opacity: 0; } }
@keyframes mzhShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes mzhTop { to { transform: translate(30%, -70%) rotate(35deg); opacity: 0; } }
@keyframes mzhFade { to { transform: translateY(20%); opacity: 0; } }
@keyframes mzhCard { to { transform: scale(1); opacity: 1; } }
@media (orientation: landscape) and (max-height: 600px) {
  .mz-box { width: min(calc((100dvh - 120px) * var(--w, 1) / var(--h, 1)), calc(100vw - 260px)); }
  .mazegame .mz-hud { position: absolute; left: 12px; top: 76px; flex-direction: column; padding: 0; }
  .mazegame .mz-name { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: calc((100vw - (100dvh - 130px)) / 2 - 30px); font-size: clamp(20px, 3.4vw, 34px); word-break: keep-all; line-height: 1.2; }
}
/* 미로 지도 */
.mzm-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 28px; display: flex; flex-direction: column; gap: 16px; }
.mzm-world { background: var(--g); border-radius: 22px; padding: 12px 12px 14px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .15); }
.mzm-world h3 { margin: 0 4px 10px; display: flex; align-items: baseline; justify-content: space-between; color: #fff; font-size: 22px; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.mzm-world h3 small { font-size: 15px; opacity: .9; }
.mzm-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-flow: dense; gap: 10px; }
.mzm-grid > :nth-child(10n+6) { grid-column: 5; } .mzm-grid > :nth-child(10n+7) { grid-column: 4; } .mzm-grid > :nth-child(10n+8) { grid-column: 3; } .mzm-grid > :nth-child(10n+9) { grid-column: 2; } .mzm-grid > :nth-child(10n+10) { grid-column: 1; }
.mzm-dot { aspect-ratio: 1; width: 100%; max-width: 64px; justify-self: center; border-radius: 50%; border: 0; background: var(--r); color: #5A4630; font-weight: 900; font-size: 18px; display: grid; place-items: center; padding: 0; box-shadow: 0 4px 0 rgba(0, 0, 0, .22); }
.mzm-dot img { width: 84%; height: 84%; object-fit: contain; }
.mzm-dot.done { background: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .22), inset 0 0 0 3px #FFD54A; }
.mzm-dot.now { background: #FFD54A; color: #6A4A00; animation: mzmPulse 1.2s ease-in-out infinite; }
.mzm-dot.lock { background: rgba(255, 255, 255, .28); box-shadow: none; }
.mzm-dot.shake { animation: mzWiggle .4s ease; }
@keyframes mzmPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@media (orientation: landscape) and (max-height: 600px) { .mzm-grid { grid-template-columns: repeat(10, 1fr); } .mzm-grid > :nth-child(n) { grid-column: auto; } .mzm-grid > :nth-child(20n+11) { grid-column: 10; } .mzm-grid > :nth-child(20n+12) { grid-column: 9; } .mzm-grid > :nth-child(20n+13) { grid-column: 8; } .mzm-grid > :nth-child(20n+14) { grid-column: 7; } .mzm-grid > :nth-child(20n+15) { grid-column: 6; } .mzm-grid > :nth-child(20n+16) { grid-column: 5; } .mzm-grid > :nth-child(20n+17) { grid-column: 4; } .mzm-grid > :nth-child(20n+18) { grid-column: 3; } .mzm-grid > :nth-child(20n+19) { grid-column: 2; } .mzm-grid > :nth-child(20n+20) { grid-column: 1; } }
.mzh-egg.mzh-img { width: 52%; aspect-ratio: 1; }
.mzh-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mzh-img .mzh-top { transform: translateY(4.2%); }
.mz-hatch.open .mzh-img .mzh-top { animation: mzhTopI .6s ease-out forwards; }
@keyframes mzhTopI { from { transform: translateY(4.2%); } to { transform: translate(25%, -55%) rotate(30deg); opacity: 0; } }
.mz-forest .mz-road { stroke-width: .58; }
.mz-forest .mz-road-edge { stroke-width: .72; opacity: .7; }

/* ---------- 공룡 동화책 (10/12) ---------- */
.mode-card.bookcard { background: linear-gradient(120deg, #F29B4B, #D9663A); color: #fff; border: 0; box-shadow: 0 6px 0 #A9482A; }
.mode-card.bookcard .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
.screen.sb { background: #1F1A17; color: #fff; overflow: hidden; }
.sb .game-top { color: #fff; }
.sb .game-title { color: #FFE9C7; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-wrap { position: relative; display: grid; place-items: center; padding: 0 10px; }
.sb-stage { position: relative; width: min(100%, calc((100dvh - 250px) * 1.5)); aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.45); touch-action: pan-y; user-select: none; background: #2A2420; }
.sb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: sbFade .45s ease; }
.sb-layer { position: absolute; inset: 0; pointer-events: none; }
.sb-actor { position: absolute; transform: translate(-50%, -95%); }
.sb-actor img { height: 100%; width: auto; display: block; position: relative; }
.sb-actor.flip img { transform: scaleX(-1); }
.sb-shadow { position: absolute; left: 12%; right: 12%; bottom: 2%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(20,12,4,.45), rgba(20,12,4,0)); }
.tint-dusk .sb-actor img { filter: brightness(.82) sepia(.18) saturate(1.05); }
.tint-gold .sb-actor img { filter: brightness(.95) sepia(.22) saturate(1.1); }
.tint-night .sb-actor img { filter: brightness(.55) saturate(.6) hue-rotate(195deg) sepia(.12); }
.tint-night .sb-shadow { opacity: .5; }
.sb-actor.in-pop { animation: sbPop .6s cubic-bezier(.3,1.6,.5,1) .25s both; }
.sb-actor.in-walk { animation: sbWalk 1.2s ease-out .2s both; }
.sb-actor.in-right { animation: sbRight .9s ease-out .35s both; }
.sb-actor.in-fade { animation: sbFade 1s ease .3s both; }
.sb-actor.in-hop { animation: sbHop .5s ease-in-out .5s 3 both; }
.sb-actor.in-peek { animation: sbPeek 1.6s ease-out .6s both; }
@keyframes sbFade { from { opacity: 0; } }
@keyframes sbPop { from { transform: translate(-50%, -95%) scale(.3); opacity: 0; } }
@keyframes sbWalk { from { transform: translate(-120%, -95%); opacity: 0; } }
@keyframes sbRight { from { transform: translate(10%, -95%); opacity: 0; } }
@keyframes sbHop { 50% { transform: translate(-50%, -108%); } }
@keyframes sbPeek { from { transform: translate(-28%, -95%); } }
.sb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.88); color: #5A3A1E; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.sb-nav.prev { left: 16px; } .sb-nav.next { right: 16px; }
.sb-text { margin: 16px auto 0; max-width: 680px; padding: 0 20px; text-align: center; font-size: clamp(20px, 5.4vw, 30px); line-height: 1.5; font-weight: 800; color: #FFF6E6; word-break: keep-all; min-height: 3em; cursor: pointer; }
.sb-text.show { animation: sbFade .6s ease; }
.sb-dots { display: flex; justify-content: center; gap: 7px; margin: 10px 0 16px; }
.sb-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); }
.sb-dots i.on { background: #FFC86B; width: 22px; border-radius: 4px; }
.sb-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(30,20,10,.45); animation: sbFade .5s ease; }
.sb-end b { font-size: 56px; color: #FFE08A; text-shadow: 0 3px 0 rgba(0,0,0,.3); }
.sb-end .big-btn { min-width: 200px; }
@media (orientation: landscape) and (max-height: 600px) {
  .screen.sb { display: flex; flex-direction: column; height: 100dvh; }
  .sb .game-top { position: absolute; z-index: 3; left: 0; right: 0; top: 0; }
  .sb .game-title { display: none; }
  .sb-wrap { flex: 1; min-height: 0; padding: 8px 80px 0; }
  .sb-stage { width: auto; height: 100%; max-height: calc(100dvh - 92px); }
  .sb-text { margin: 6px auto 0; font-size: clamp(17px, 3.6vh, 24px); line-height: 1.35; min-height: 2.7em; }
  .sb-dots { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 3; }
  .sb-nav.prev { left: 14px; } .sb-nav.next { right: 14px; }
}
.sb-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 8px 16px 24px; }
.sb-book { border: 0; background: #fff; border-radius: 16px; padding: 8px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.sb-book img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 10px; }
.sb-book b { font-size: 16px; color: #0A2E6E; word-break: keep-all; }
/* 책장 넘기기 */
.sb-stage { perspective: 1800px; }
.sb-flip { position: absolute; inset: 0; z-index: 5; transform-style: preserve-3d; pointer-events: none; }
.sb-flip.fwd { transform-origin: 0 50%; animation: sbTurnF .85s cubic-bezier(.45,.05,.35,1) forwards; }
.sb-flip.back { transform-origin: 100% 50%; animation: sbTurnB .85s cubic-bezier(.45,.05,.35,1) forwards; }
.sb-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.sb-face * { animation: none !important; }
.sb-face.front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.35)); opacity: 0; animation: sbShade .85s ease forwards !important; }
.sb-flip.back .sb-face.front::after { background: linear-gradient(270deg, rgba(0,0,0,0), rgba(0,0,0,.35)); }
.sb-face.rear { transform: rotateY(180deg); background: linear-gradient(90deg, #EFE3CC, #FBF5E9 60%, #E6D7BB); }
.sb-flip.fwd .sb-face.rear { background: linear-gradient(270deg, #EFE3CC, #FBF5E9 60%, #E6D7BB); }
@keyframes sbTurnF { to { transform: rotateY(-178deg); } }
@keyframes sbTurnB { to { transform: rotateY(178deg); } }
@keyframes sbShade { 60% { opacity: 1; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sb-flip { display: none; } }
/* 동화책은 늘 가로: 세로로 든 휴대폰이면 화면 전체를 눕힌다(카드 화면 '가로'와 같은 방식) */
.screen.sb { container-type: size; height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
@media (orientation: portrait) {
  .screen.sb { position: fixed; top: 0; left: 0; width: 100dvh; height: 100vw; transform-origin: top left; transform: rotate(90deg) translateY(-100%); }
}
.sb .game-top { position: absolute; z-index: 3; left: 0; right: 0; top: 0; }
.sb .game-title { display: none; }
.sb-wrap { flex: 1; min-height: 0; padding: 8px 76px 0; }
.sb-stage { height: auto; max-height: none; border-radius: 14px; width: min(calc(100cqw - 152px), calc((100cqh - 96px) * 1.5)); }
.sb-text { margin: 6px auto 0; font-size: clamp(16px, 5cqh, 26px); line-height: 1.35; min-height: 2.7em; max-width: 90cqw; }
.sb-dots { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 3; }
.sb-nav.prev { left: 12px; } .sb-nav.next { right: 12px; }
/* 동화책 공룡 움직임 */
.sb-body, .sb-breath { display: block; height: 100%; transform-origin: 50% 96%; }
.sb-actor img { height: 100%; }
.idle-breathe { animation: sbBreathe 2.8s ease-in-out infinite; }
.idle-sleep { animation: sbBreathe 4.2s ease-in-out infinite; }
.idle-none { animation: none; }
@keyframes sbBreathe { 50% { transform: scale(1.012, 1.03); } }
@keyframes sbWalkTo { from { left: var(--from); } }
@keyframes sbBob { 50% { transform: translateY(-3.5%) rotate(calc(var(--dir) * -1.2deg)); } }
@keyframes sbNod { 50% { transform: rotate(calc(var(--dir) * 3.5deg)) translateY(1.5%); } }
@keyframes sbHopB { 50% { transform: translateY(-12%); } }
@keyframes sbLook { 0%, 100% { transform: scaleX(1); } 25%, 70% { transform: scaleX(-1); } }
@keyframes sbSad { to { transform: rotate(calc(var(--dir) * 5deg)) translateY(3%) scaleY(.97); } }
@keyframes sbLean { to { transform: translateX(calc(var(--dir) * 6%)) rotate(calc(var(--dir) * 2.5deg)); } }
@keyframes sbPeekW { to { transform: translateX(calc(var(--dir) * 9%)); } }
@keyframes sbShakeB { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.sb-zzz { position: absolute; right: 18%; top: 4%; pointer-events: none; }
.sb-zzz i { position: absolute; font-style: normal; font-weight: 900; color: #DDE8FF; text-shadow: 0 2px 6px rgba(0,0,30,.6); font-size: clamp(14px, 4cqh, 28px); opacity: 0; animation: sbZ 3s ease-in-out infinite; }
.sb-zzz i:nth-child(2) { animation-delay: 1s; } .sb-zzz i:nth-child(3) { animation-delay: 2s; font-size: clamp(18px, 5.5cqh, 38px); }
@keyframes sbZ { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(40%, -180%) scale(1.1); } }

/* ---------- 10/12 휴대폰 가로 화면: 스크롤 없이 한 화면에 (왼쪽·오른쪽 나눠 배치) ---------- */
@media (orientation: landscape) and (max-height: 600px) {
  /* 첫 화면: 왼쪽 = 이름표 + 공룡, 오른쪽 = 메뉴 4개 */
  .home-main { max-width: 1180px; display: grid; grid-template-columns: 1.08fr 1fr; grid-template-rows: auto minmax(0, 1fr);
    column-gap: 18px; row-gap: 8px; padding: 10px max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left)); }
  .home-main .home-top { grid-column: 1; grid-row: 1; padding-top: 0; }
  .home-main .hero { grid-column: 1; grid-row: 2; height: auto; min-height: 0; }
  .home-main .hero-text b { font-size: clamp(24px, 8vh, 40px); }
  .home-main .menu-grid { grid-column: 2; grid-row: 1 / 3; grid-template-rows: 1fr 1fr; gap: 14px; padding-bottom: 7px; min-height: 0; }
  .home-main .menu-sq { aspect-ratio: auto; max-height: none; height: 100%; gap: 6px; border-radius: 24px; }
  .home-main .menu-sq b { font-size: clamp(22px, 7vh, 36px); }
  .home-main .menu-sq .menu-icon { width: clamp(40px, 13vh, 64px); height: clamp(40px, 13vh, 64px); border-radius: 16px; }
  .home-main .home-foot { display: none; }

  /* 메뉴 안 화면 공통: 넓게 쓰고 위 간격 줄이기 */
  .home-sec { max-width: 1180px; gap: 8px; padding: 8px max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left)); height: 100dvh; overflow: hidden; }
  .home-sec .sec-title { font-size: 24px; }
  .home-sec .icon-btn { width: 44px; height: 44px; }
  .home-sec .modes { flex: 1; min-height: 0; }

  /* 1 보기: 왼쪽 = 플래시카드 + 설정, 오른쪽 = 나머지 카드들 */
  .sec-blue .modes { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); column-gap: 18px; row-gap: 8px; }
  .sec-blue .modes > .mode-card.flash { grid-column: 1; grid-row: 1; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
  .sec-blue .modes > .opts { grid-column: 1; grid-row: 2; align-self: start; padding: 6px 10px; gap: 4px; }
  .sec-blue .opt-segs .seg { min-height: 30px; font-size: 13px; }
  .sec-blue .modes > .see-row { grid-column: 2; grid-row: 1 / 3; margin: 0; grid-auto-rows: minmax(0, 1fr); row-gap: 10px; min-height: 0; padding: 4px; }
  .sec-blue .see-row .mode-card.half { min-height: 0; padding: 6px 10px; }
  .sec-blue .see-row .mode-card.half .mode-icon { width: 36px; height: 36px; }
  .sec-blue .see-row .mode-card.half .mode-text b { font-size: clamp(16px, 5vh, 22px); }
  .sec-blue .see-row .mode-card.half .mode-text span { display: none; }

  /* 2 따라 하기: 알약 두 개 나란히 */
  .follow-row { grid-template-columns: 1fr 1fr; align-content: center; height: 100%; }
  .follow-row .mode-card { min-height: min(150px, 34vh); }

  /* 3 맞히기: 동그라미를 한 줄로 */
  .guess-row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; align-content: center; height: 100%; }
  .guess-row .mode-card { min-height: 0; align-items: center; }
  .guess-row .mode-card .mode-text b { font-size: clamp(15px, 4.6vh, 20px); }

  /* 4 놀기: 티켓 4줄 × 2 */
  .play-row { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(0, 1fr); height: 100%; gap: 12px; }
  .play-row .mode-card.play, .play-row .mode-card.play.wide { grid-column: auto; min-height: 0; flex-direction: column; justify-content: center; align-items: flex-start; padding: 10px 14px; }
  .play-row .mode-card.play .mode-text b { font-size: clamp(18px, 5.6vh, 24px); }
  .play-row .mode-card.play.wide { grid-column: span 2; }
}
.sb-music { position: relative; margin-left: auto; display: grid; place-items: center; }
.sb-music.off { opacity: .45; }
.sb-music.off svg { position: relative; }
.sb-music.off::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -1.5px 0 0 -15px; width: 30px; height: 3px; background: currentColor; transform: rotate(-45deg); border-radius: 2px; }
/* 미로 빠르게: 땅(아래 판)은 한 번만 그리고, 움직이는 것(위 판)만 다시 그림 */
.mz-box .mz-bg { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.mz-box .mz-fg { position: relative; box-shadow: none; background: transparent; will-change: transform; }
.mz-box { contain: layout paint; }
/* 알 모양 하나로: 둥지 알 = 깨지는 알 (크림색 + 갈색 점) */
.mz-egg { fill: #F7EBD3; stroke: #CDB48A; stroke-width: .018; }
.mz-egg-spot { fill: #B98B5A; }
.mzh-shell { fill: #F7EBD3; stroke: #CDB48A; } .mzh-spot { fill: #B98B5A; }
.mzh-egg { animation: mzhIn .25s ease-out, mzhShake .25s ease-in-out .25s 3; }
/* 보기 화면 동화책 버튼: 다른 카드처럼 연한 단색(버터 노랑) */
.mode-card.bookcard { background: #FFEDB8; color: #6E4300; box-shadow: 0 6px 0 #E8C46A; border: 0; }
.mode-card.bookcard .mode-icon { background: rgba(255,255,255,.7); color: #D98A00; }
.mode-card.bookcard .mode-text span { color: #8A6420; }
.mode-card.bookcard:active { transform: translateY(3px); box-shadow: 0 3px 0 #E8C46A; }
/* 미로 빠르게: 땅(아래 판)은 한 번만 그리고, 움직이는 것(위 판)만 다시 그림 */
.mz-box .mz-bg { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.mz-box .mz-fg { position: relative; box-shadow: none; background: transparent; will-change: transform; }
/* 알 모양 하나로: 둥지 알 = 깨지는 알 (크림색 + 갈색 점) */
.mz-egg { fill: #F7EBD3; stroke: #CDB48A; stroke-width: .018; }
.mz-egg-spot { fill: #B98B5A; }
.mzh-shell { fill: #F7EBD3; stroke: #CDB48A; } .mzh-spot { fill: #B98B5A; }
.mzh-egg { animation: mzhIn .25s ease-out, mzhShake .25s ease-in-out .25s 3; }
/* 동화책: 발자국 · 맞히기 */
.sb-prints { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sb-print { fill: #3E3328; opacity: .64; }
.sb-print-rim { fill: #fff; opacity: .28; }
.sb-print-line { fill: none; stroke: #3E3328; stroke-width: 1.4; stroke-linecap: round; opacity: .6; }
.sb-pr { opacity: 0; animation: sbPrintIn .35s ease-out forwards; }
.sb-face .sb-pr { opacity: 1; }
@keyframes sbPrintIn { from { opacity: 0; } to { opacity: 1; } }
.sb-quiz { position: absolute; left: 0; right: 0; top: 6%; display: flex; justify-content: center; gap: 4%; z-index: 4; animation: sbFade .5s ease .8s both; }
.sb-qc { width: 22%; aspect-ratio: 1.35; border: 4px solid #fff; border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 6px 16px rgba(0,0,0,.28); padding: 4px; display: grid; place-items: center; }
.sb-qc img { width: 100%; height: 100%; object-fit: contain; }
.sb-qc.no { animation: mzWiggle .45s ease; }
.sb-qc.right { border-color: #FFD54A; transform: scale(1.12); transition: transform .3s; }
.sb-qc.dim { opacity: .35; transition: opacity .3s; }
/* 동화책: 알 깨기 · 숫자 세기 */
.sb-hatch { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sb-egg, .sb-hb { position: absolute; transform: translate(-50%, -88%); height: 22%; aspect-ratio: 1; display: grid; place-items: end center; border: 0; padding: 0; background: none; }
.sb-hb { height: 30%; animation: sbPop .5s cubic-bezier(.3,1.6,.5,1) both; }
.sb-egg img, .sb-hb img { height: 100%; width: auto; filter: drop-shadow(0 4px 4px rgba(40,25,10,.35)); }
.sb-egg.tap { pointer-events: auto; cursor: pointer; animation: sbEggWait 1.4s ease-in-out .8s infinite; transform-origin: 50% 90%; }
.sb-egg.tap::after { content: ""; position: absolute; inset: -12% -12% 0; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,230,140,.8); animation: sbRing 1.4s ease-out .8s infinite; pointer-events: none; }
.sb-egg.crack { animation: sbEggCrack .2s ease-in-out 3; }
.sb-egg.open { height: 30%; animation: sbPop .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes sbEggWait { 0%, 70%, 100% { transform: translate(-50%, -88%) rotate(0); } 78% { transform: translate(-50%, -88%) rotate(-8deg); } 88% { transform: translate(-50%, -88%) rotate(8deg); } }
@keyframes sbEggCrack { 25% { transform: translate(-50%, -88%) rotate(-12deg); } 75% { transform: translate(-50%, -88%) rotate(12deg); } }
@keyframes sbRing { from { opacity: .9; transform: scale(.9); } to { opacity: 0; transform: scale(1.25); } }
.sb-bignum { position: absolute; left: 50%; top: 24%; transform: translate(-50%, -50%) scale(.3); font-size: clamp(80px, 34cqh, 220px); font-weight: 900; color: #FFE08A; text-shadow: 0 6px 0 #C98A1A, 0 10px 24px rgba(0,0,0,.35); opacity: 0; pointer-events: none; font-family: var(--font-display, inherit); }
.sb-bignum.show { animation: sbBig .6s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes sbBig { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.sb-cnum { position: absolute; left: 50%; top: -18%; transform: translateX(-50%) scale(.3); font-size: clamp(28px, 10cqh, 64px); font-weight: 900; color: #FFE08A; text-shadow: 0 4px 0 #C98A1A, 0 6px 14px rgba(0,0,0,.35); opacity: 0; animation: sbCnum .5s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes sbCnum { to { opacity: 1; transform: translateX(-50%) scale(1); } }
.sb-egg, .sb-hb { display: block; }
.sb-egg img, .sb-hb img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 100%; width: auto; max-width: none; }
.sb-egg { height: 17%; aspect-ratio: 1.5; }
.sb-egg.open { height: 30%; aspect-ratio: 1.15; }
.sb-hb { aspect-ratio: 1.15; }
/* 미로 휴대폰 메모리 아끼기: 큰 판을 따로 겹(레이어)으로 들고 있지 않고, 줍는 것은 처음 몇 번만 통통 */
.mz-box .mz-bg, .mz-box .mz-fg { will-change: auto; }
.mz-box { contain: none; }
.mz-bob { animation-iteration-count: 3; }
/* 동화책 맞히기: 발자국 끌어다 붙이기 */
.sb-drag { position: absolute; left: 14%; top: 74%; width: 17%; aspect-ratio: 1; transform: translate(-50%, -50%); background: rgba(255,250,240,.92); border: 4px solid #fff; border-radius: 50%; box-shadow: 0 6px 16px rgba(0,0,0,.3); display: grid; place-items: center; z-index: 5; touch-action: none; cursor: grab; transition: left .35s ease, top .35s ease, transform .2s; animation: sbDragHint 1.6s ease-in-out 1.2s 3; }
.sb-drag svg { width: 78%; height: 78%; overflow: visible; }
.sb-drag .sb-print { opacity: .85; }
.sb-drag.hold { transition: none; transform: translate(-50%, -50%) scale(1.12); animation: none; cursor: grabbing; }
.sb-drag.stuck { transform: translate(-50%, -50%) scale(.7); opacity: 0; transition: left .2s, top .2s, transform .5s .2s, opacity .5s .2s; }
.sb-qc.over { transform: scale(1.1); border-color: #FFE08A; transition: transform .15s; }
@keyframes sbDragHint { 0%, 100% { transform: translate(-50%, -50%); } 30% { transform: translate(-50%, -62%) rotate(-6deg); } 60% { transform: translate(-50%, -50%) rotate(4deg); } }
/* 발자국 스티커: 모양 따라 오린 흰 테두리 */
.sb-drag { background: none; border: 0; border-radius: 0; box-shadow: none; width: 19%; filter: drop-shadow(0 5px 6px rgba(0,0,0,.35)); }
.sb-drag svg { width: 100%; height: 100%; }
.sb-stk-w { fill: #fff; stroke: #fff; stroke-width: 4.2; stroke-linejoin: round; }
.sb-stk { fill: #5A4632; }
.sb-stk-hi { fill: none; stroke: rgba(255,255,255,.18); stroke-width: .6; }
.sb-stk-line-w { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.sb-stk-line { fill: none; stroke: #5A4632; stroke-width: 1.5; stroke-linecap: round; }
.sb-drag.hold { filter: drop-shadow(0 12px 10px rgba(0,0,0,.35)); }
/* 화산 땅 세리머니: 우르르 흔들리다 펑! */
.mz-hatch.volc { background: radial-gradient(circle at 50% 60%, rgba(255,170,90,.35), rgba(40,15,8,.55)); }
.mzv { position: relative; width: 70%; aspect-ratio: 200 / 160; animation: mzhIn .3s ease-out, mzvShake .12s linear .3s 9; }
.mzv-svg { width: 100%; height: 100%; overflow: visible; }
.mzv-cone { fill: #6B3A24; stroke: #3E1F12; stroke-width: 2; }
.mzv-crater { fill: #FF7A1F; }
.mzv-drip { fill: #FF6A1A; opacity: 0; }
.mzv-lava { fill: #FFB020; stroke: #FF5A1F; stroke-width: 2; }
.mzv-fount { transform-origin: 0 -52px; transform: scaleY(0); opacity: 0; }
.mzv-smoke circle { fill: #8E8580; opacity: 0; }
.mz-hatch.volc.open .mzv { animation: mzvPop .5s ease-out; }
.mz-hatch.volc.open .mzv-fount { animation: mzvFount .9s cubic-bezier(.2,1.4,.4,1) forwards; }
.mz-hatch.volc.open .mzv-drip { animation: sbFade .6s ease .3s forwards; }
.mz-hatch.volc.open .mzv-smoke circle { animation: mzvSmoke 1.6s ease-out forwards; }
.mz-hatch.volc.open .mzv-smoke circle:nth-child(2) { animation-delay: .15s; } .mz-hatch.volc.open .mzv-smoke circle:nth-child(3) { animation-delay: .3s; }
.mz-hatch.volc .mzh-card { z-index: 2; }
@keyframes mzvShake { 25% { transform: translate(-2%, 1%); } 75% { transform: translate(2%, -1%); } }
@keyframes mzvPop { 30% { transform: scale(1.08, .94); } }
@keyframes mzvFount { to { transform: scaleY(1); opacity: 1; } }
@keyframes mzvSmoke { 0% { opacity: .85; transform: translateY(0) scale(.5); } 100% { opacity: 0; transform: translateY(-30px) scale(1.6); } }
.mzv-smoke circle { transform-box: fill-box; transform-origin: center; }

/* 미로: 땅별 깨기 장면 (10/12) — transform·opacity만 움직임 */
.mzc { position: relative; width: 74%; aspect-ratio: 200 / 160; animation: mzhIn .3s ease-out; }
.mzc-svg { width: 100%; height: 100%; overflow: visible; }
.mzc-svg [class] { transform-box: fill-box; transform-origin: center; }
.mz-hatch.cer .mzh-card { z-index: 2; }
.mz-hatch.cer.open .mzc-L { animation: mzcOutL .7s ease-in forwards; }
.mz-hatch.cer.open .mzc-R { animation: mzcOutR .7s ease-in forwards; }
.mzc-fly, .mzc-grain, .mzc-drop, .mzc-chunk { opacity: 0; transform: translate(0, -30px); }
.mz-hatch.cer.open .mzc-fly, .mz-hatch.cer.open .mzc-drop, .mz-hatch.cer.open .mzc-chunk { animation: mzcFly .9s ease-out var(--d) forwards; }
@keyframes mzcOutL { to { transform: translateX(-80px); opacity: 0; } }
@keyframes mzcOutR { to { transform: translateX(80px); opacity: 0; } }
@keyframes mzcFly { 0% { opacity: 1; transform: translate(0, -30px) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) - 10px)) rotate(220deg); } }
@keyframes mzcRustle { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
/* 숲 */
.mz-hatch.c-forest { background: radial-gradient(circle at 50% 60%, rgba(230,250,200,.55), rgba(40,80,40,.45)); }
.mzc-bush { fill: #3F7D3A; } .mzc-bush2 { fill: #5E9E48; }
.mzc-leafA { fill: #6BAE4F; } .mzc-leafB { fill: #A7D36B; }
.c-forest .mzc-L, .c-forest .mzc-R { animation: mzcRustle .17s linear .2s 5; }
/* 사막 */
.mz-hatch.c-desert { background: radial-gradient(circle at 50% 60%, rgba(255,240,210,.6), rgba(150,95,45,.45)); }
.mzc-sandA { fill: #E8C48A; stroke: #C69A5B; stroke-width: 1.5; } .mzc-sandL { fill: none; stroke: #C69A5B; stroke-width: 2; stroke-linecap: round; }
.c-desert .mzc-sand { animation: mzcSand 1.1s ease-in .1s forwards; }
.c-desert .mzc-grain { animation: mzcFall .8s ease-in calc(.2s + var(--d) * 3) 2; }
.c-desert .mzc-ebot, .c-desert .mzc-etop { animation: mzhShake .22s ease-in-out .75s 2; }
.mz-hatch.c-desert.open .mzc-etop { animation: mzcETop .6s ease-out forwards; }
.mz-hatch.c-desert.open .mzc-ebot { animation: mzhFade .6s ease-out .15s forwards; }
@keyframes mzcSand { to { transform: translateY(26px) scaleY(.45); } }
@keyframes mzcFall { 0% { opacity: 1; transform: translate(calc(var(--dx) * .4), -40px); } 100% { opacity: 0; transform: translate(calc(var(--dx) * .6), 30px); } }
@keyframes mzcETop { to { transform: translate(40px, -80px) rotate(35deg); opacity: 0; } }
/* 바닷가 */
.mz-hatch.c-beach { background: radial-gradient(circle at 50% 60%, rgba(240,250,255,.6), rgba(60,130,150,.4)); }
.mzc-beachS { fill: #F3E1B5; }
.mzc-waveA { fill: #4FA9C8; } .mzc-waveB { fill: #3A8FB0; } .mzc-foam { fill: none; stroke: #FFFFFF; stroke-width: 6; stroke-linecap: round; }
.c-beach .mzc-wave { transform: translateX(-230px); animation: mzcWaveIn .85s cubic-bezier(.3,.8,.4,1) .05s forwards; }
.mz-hatch.c-beach.open .mzc-wave { animation: mzcWaveOut .7s ease-in forwards; }
@keyframes mzcWaveIn { to { transform: translateX(0); } }
@keyframes mzcWaveOut { from { transform: translateX(0); } to { transform: translateX(240px) translateY(10px); opacity: 0; } }
/* 바닷속 */
.mz-hatch.c-sea { background: radial-gradient(circle at 50% 55%, rgba(190,235,250,.5), rgba(20,60,100,.55)); }
.mzc-bubA { fill: rgba(220,245,255,.28); stroke: #E6F8FF; stroke-width: 3; } .mzc-bubH { fill: none; stroke: #FFFFFF; stroke-width: 5; stroke-linecap: round; }
.mzc-sb { fill: rgba(220,245,255,.4); stroke: #E6F8FF; stroke-width: 1.5; opacity: 0; animation: mzcRise 1.2s ease-out var(--d) 2; }
.c-sea .mzc-bub { transform: translateY(140px); animation: mzcBubUp 1.05s cubic-bezier(.3,.9,.4,1) forwards; }
.mz-hatch.c-sea.open .mzc-bub { animation: mzcBubPop .3s ease-out forwards; }
@keyframes mzcRise { 0% { opacity: .9; transform: translateY(40px); } 100% { opacity: 0; transform: translateY(-60px); } }
@keyframes mzcBubUp { 0% { transform: translateY(140px) scale(.5); } 70% { transform: translateY(-6px) scale(1.03, .97); } 100% { transform: translateY(0) scale(1); } }
@keyframes mzcBubPop { from { transform: scale(1); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
/* 하늘 */
.mz-hatch.c-sky { background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.6), rgba(90,150,215,.45)); }
.mzc-cloud { fill: #FFFFFF; } .mzc-arc { fill: none; stroke-width: 8; stroke-dasharray: 280; stroke-dashoffset: 280; }
.c-sky .mzc-L, .c-sky .mzc-R { animation: mzcBob .5s ease-in-out 2 alternate; }
.mz-hatch.c-sky.open .mzc-arc { animation: mzcDraw .8s ease-out .15s forwards; }
.mz-hatch.c-sky.open .mzh-card { animation: mzcFlyIn .75s cubic-bezier(.25,1.2,.5,1) .15s forwards; }
@keyframes mzcBob { to { transform: translateY(-6px); } }
@keyframes mzcDraw { to { stroke-dashoffset: 0; } }
@keyframes mzcFlyIn { 0% { transform: translate(-140%, 40%) rotate(-12deg) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; opacity: 1; } }
/* 정글 */
.mz-hatch.c-jungle { background: radial-gradient(circle at 50% 60%, rgba(220,240,200,.55), rgba(20,60,30,.5)); }
.mzc-stone { fill: #8C8577; stroke: #4E483E; stroke-width: 2.5; } .mzc-crk { fill: none; stroke: #6D6658; stroke-width: 2; stroke-linecap: round; }
.mzc-vineL { fill: none; stroke: #3F7D3A; stroke-width: 4; stroke-linecap: round; }
.c-jungle .mzc-L, .c-jungle .mzc-R { animation: mzcRustle .1s linear .15s 3, mzcRustle .1s linear .6s 3; }
.mz-hatch.c-jungle.open .mzc-vine { animation: mzcVineUp .6s ease-in forwards; }
@keyframes mzcVineUp { to { transform: translateY(-70px); opacity: 0; } }
/* 늪 */
.mz-hatch.c-swamp { background: radial-gradient(circle at 50% 60%, rgba(230,240,200,.55), rgba(50,70,35,.5)); }
.mzc-pond { fill: #5B6B3A; stroke: #3E4A26; stroke-width: 2; } .mzc-pond2 { fill: #6E8048; }
.mzc-reed { fill: none; stroke: #6E7F3E; stroke-width: 4; stroke-linecap: round; }
.mzc-mb { fill: #8FA05E; stroke: #C7D49A; stroke-width: 1.5; animation: mzcBlub .5s ease-in-out var(--d) 3 alternate; }
.mzc-dropA { fill: #BFE7F2; stroke: #6FB6CC; stroke-width: 1; }
.mz-hatch.c-swamp.open .mzc-mb { opacity: 0; }
.c-swamp .mzh-card { width: 56%; margin: -10% 0 0 18%; }
.c-swamp .mzc-baby { width: 30%; margin: 20% 0 0 -52%; }
.mz-hatch.c-swamp.open .mzc-baby { animation-delay: .4s; }
@keyframes mzcBlub { from { transform: scale(.6); } to { transform: scale(1.3); } }
/* 동굴 */
.mz-hatch.c-cave { background: rgba(12,10,20,.9); transition: background .6s ease; }
.mz-hatch.c-cave.open { background: rgba(40,32,58,.55); }
.mzc-glow { transform: scale(0); opacity: 0; }
.mzc-spark { fill: #FFE9A8; animation: mzcSpark .35s ease-in-out infinite alternate; }
.mzc-crys { opacity: .18; stroke: rgba(255,255,255,.6); stroke-width: 1; }
.mz-hatch.c-cave.open .mzc-glow { animation: mzcGlow .7s ease-out forwards; }
.mz-hatch.c-cave.open .mzc-spark { animation: none; opacity: 0; }
.mz-hatch.c-cave.open .mzc-crys { animation: mzcCrys .5s ease-out var(--d) forwards; }
@keyframes mzcSpark { from { transform: scale(.6); opacity: .5; } to { transform: scale(1.3); opacity: 1; } }
@keyframes mzcGlow { to { transform: scale(1); opacity: 1; } }
@keyframes mzcCrys { 0% { opacity: .18; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
/* 눈 */
.mz-hatch.c-snow { background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.7), rgba(120,150,190,.45)); }
.mzc-snow { fill: #FFFFFF; stroke: #BFD4EA; stroke-width: 2.5; } .mzc-snowL { fill: none; stroke: #CFE0F2; stroke-width: 3; stroke-linecap: round; }
.c-snow .mzc-ball { transform: translateX(-220px) rotate(-360deg); animation: mzcRoll 1.05s cubic-bezier(.3,.7,.4,1) forwards; }
.mz-hatch.c-snow.open .mzc-ball { animation: mzcBreak .25s ease-out forwards; }
@keyframes mzcRoll { to { transform: translateX(0) rotate(0); } }
@keyframes mzcBreak { to { transform: scale(1.25); opacity: 0; } }

/* 동화책 책장: 진짜 그림책 표지처럼 (10/13) — 책등·쌓인 종이·제목·표지 그림·주인공 공룡 */
.sb-books { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 22px 18px; padding: 10px 22px 30px 16px; align-items: end; }
.sb-book { position: relative; padding: 0; background: none; border-radius: 0; box-shadow: none; display: block; aspect-ratio: 3 / 4; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
.sb-book:active { transform: translateY(2px) scale(.98); }
.sb-cv { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6%; padding: 9% 8% 8% 15%; background: var(--bk); border-radius: 4px 12px 12px 4px; overflow: hidden;
  box-shadow: 3px 3px 0 #FFFDF6, 4px 4px 0 #D8CFBC, 6px 6px 0 #FFFDF6, 7px 7px 0 #D8CFBC, 9px 12px 14px rgba(20, 40, 80, .22); }
.sb-cv::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9%; background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.08) 70%, rgba(255,255,255,.25)); }
.sb-cv::after { content: ""; position: absolute; left: 9%; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,.18); }
.sb-cv-t { position: relative; background: #FFFBEA; border-radius: 10px; padding: 7% 6%; font-size: clamp(13px, 3.6vw, 17px); line-height: 1.25; color: #0A2E6E; word-break: keep-all; text-align: center; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.sb-cv-pic { position: relative; flex: 1; border-radius: 10px; overflow: hidden; border: 3px solid #FFFBEA; background: #FFFBEA; }
.sb-cv-pic > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-cv-star { position: absolute; left: 50%; bottom: 4%; width: 92%; max-height: 70%; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 4px 3px rgba(0,0,0,.3)); }
.sb-book b.sb-cv-t { font-size: clamp(13px, 3.6vw, 17px); }

/* ---------- 10/13 아이 정보 ---------- */
.home-top-r { display: flex; align-items: center; gap: 8px; }
.kid-chip { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 12px 0 4px; border-radius: 23px; background: #fff; border: 2px solid #DCE6F5; box-shadow: 0 3px 0 #DCE6F5; color: #0A2E6E; font-weight: 800; font-size: 16px; max-width: 54vw; }
.kid-chip > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kid-av { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--av, #EEF2F7); display: grid; place-items: center; overflow: hidden; }
.kid-av img { width: 92%; height: 92%; object-fit: contain; }
.kid-av.plus { font-size: 26px; color: #8AA0C2; font-weight: 800; background: #EEF2F7; }
.kid-eggs { display: inline-flex; align-items: center; gap: 2px; padding-left: 6px; margin-left: 2px; border-left: 2px solid #E8EEF7; color: #B07A00; font-size: 15px; }
.kid-eggs svg { width: 18px; height: 22px; }
.kid-screen { padding: 12px 16px 28px; }
.kid-form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; margin: 14px auto 0; background: #FFFBEA; border-radius: 22px; padding: 20px 18px; }
.kid-lb { display: flex; flex-direction: column; gap: 6px; font-weight: 800; color: #3A4660; font-size: 15px; }
.kid-in { height: 52px; border-radius: 26px; border: 3px solid #EDE3C2; background: #fff; text-align: center; font-size: 20px; font-weight: 800; color: #0A2E6E; font-family: inherit; width: 100%; }
select.kid-in { text-align-last: center; appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8h14l-7 9z' fill='%230A2E6E'/%3E%3C/svg%3E") no-repeat right 16px center / 18px; }
.kid-two { display: grid; grid-template-columns: 3fr 2fr; gap: 10px; }
.kid-avs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.kid-avb { aspect-ratio: 1; border-radius: 50%; border: 3px solid #EDE3C2; background: #fff; padding: 3px; display: grid; place-items: center; transition: transform .12s; }
.kid-avb .kid-av { width: 100%; height: 100%; }
.kid-avb.on { border-color: #0A2E6E; border-width: 4px; transform: scale(1.06); }
.kid-ok { margin-top: 6px; height: 58px; border-radius: 29px; background: #0FA88F; color: #fff; font-size: 22px; font-weight: 900; box-shadow: 0 4px 0 #0A7A68; border: 0; }

/* ---------- 10/13 반짝 알 모으기 (끝 화면 위) ---------- */
.rw { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(20, 24, 40, .72); animation: sbFade .25s ease; }
.rw.out { opacity: 0; transition: opacity .22s; }
.rw-box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rw-glow { position: relative; width: min(62vw, 300px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(255,240,150,.55) 0 45%, rgba(255,230,120,.18) 62%, transparent 72%); animation: mzhIn .35s ease-out; }
.rw-glow[data-jar]::after { content: attr(data-jar); position: absolute; right: 12%; top: 8%; min-width: 34px; height: 34px; border-radius: 17px; background: #FF8A3D; color: #fff; font-weight: 900; font-size: 20px; display: grid; place-items: center; box-shadow: 0 3px 0 #C85F1C; }
.rw-jar { width: 66%; height: 66%; overflow: visible; }
.rw-lid { fill: #2F4DA8; } .rw-lid2 { fill: #5874D6; }
.rw-glass { fill: rgba(140, 230, 230, .45); stroke: #C8FFF6; stroke-width: 3; }
.rw-shine { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 5; stroke-linecap: round; }
.rw-egg { opacity: 0; } .rw-egg.in { opacity: 1; }
.rw-egg.new { opacity: 0; animation: sbFade .2s ease .62s forwards; }
.rw-drop { position: absolute; left: 50%; top: 0; width: 13%; transform: translate(-50%, -60%); animation: rwDrop .65s cubic-bezier(.5, 0, .8, .6) .1s both; }
.rw-drop svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 8px rgba(255, 220, 90, .9)); }
@keyframes rwDrop { 0% { transform: translate(-50%, -160%) rotate(-20deg); opacity: 0; } 25% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(-50%, 260%) rotate(10deg); opacity: 0; } }
.rw-count { display: flex; align-items: center; gap: 6px; color: #FFE58A; font-weight: 900; font-size: 30px; }
.rw-count svg { width: 26px; height: 32px; }
.rw-ok { width: min(56vw, 240px); height: 50px; border-radius: 25px; border: 0; background: #E4FB5E; color: #2C3140; display: grid; place-items: center; box-shadow: 0 4px 0 #A9BD2E; }

/* ---------- 10/13 맞혀 보기: 한글 / English ---------- */
.quiz-lang { grid-template-columns: repeat(2, auto); padding: 3px; border-radius: 14px; }
.quiz-lang .seg { min-height: 38px; font-size: 15px; padding: 0 12px; }
.choice.en { font-family: inherit; font-size: clamp(18px, 4.8vw, 26px); letter-spacing: -.01em; word-break: break-word; }
.quiz-screen .quiz-lang { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 5; background: rgba(255,255,255,.92); }
.quiz-lang .seg { color: var(--blue-deep); }
.quiz-lang .seg.on { background: var(--blue); color: #fff; }
.quiz-screen .quiz-levels { right: 170px; grid-template-columns: repeat(3, auto); }
.quiz-screen .quiz-levels .seg { padding: 0 8px; }
.home-top .brand { min-width: 0; flex: 1; }
@media (max-width: 520px) { .kid-chip > b { display: none; } .kid-chip { padding-right: 10px; } }
.sb-book { width: 100%; }
.sb-book .sb-cv-star { aspect-ratio: auto; border-radius: 0; height: auto; }
.sb-book .sb-cv-pic > img:first-child { aspect-ratio: auto; border-radius: 0; }
.home-top .brand { gap: 8px; }
.home-top .brand-name, .home-top .brand-sub { white-space: nowrap; }
@media (max-width: 520px) { .home-top .brand-name, .home-top .brand-sub { font-size: clamp(26px, 8.2vw, 38px); } }

/* 10/13 책장이 반으로 접히며 넘어가기 (가운데 책등 축) */
.sb-fold { position: absolute; inset: 0; z-index: 5; pointer-events: none; perspective: 2200px; }
.sb-fold * { animation: none !important; }
.sb-half { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.sb-half.l { left: 0; } .sb-half.r { left: 50%; }
.sb-half-in { position: absolute; top: 0; bottom: 0; width: 200%; }
.sb-half.l .sb-half-in { left: 0; } .sb-half.r .sb-half-in { left: -100%; }
.sb-half-in > .sb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-leaf { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; }
.sb-fold.fwd .sb-leaf { left: 50%; transform-origin: 0 50%; animation: sbFoldF .9s cubic-bezier(.45,.05,.3,1) forwards !important; }
.sb-fold.back .sb-leaf { left: 0; transform-origin: 100% 50%; animation: sbFoldB .9s cubic-bezier(.45,.05,.3,1) forwards !important; }
.sb-leaf .sb-half { left: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sb-leaf .sb-half.l .sb-half-in { left: 0; } .sb-leaf .sb-half.r .sb-half-in { left: -100%; }
.sb-leaf .sb-half.rear { transform: rotateY(180deg); }
/* 넘어가는 종이 그늘: 들릴수록 책등 쪽이 어두워짐 */
.sb-leaf .sb-half::after { content: ""; position: absolute; inset: 0; opacity: 0; }
.sb-fold.fwd .sb-leaf .front::after { background: linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,0) 60%); animation: sbFoldShade .9s ease forwards !important; }
.sb-fold.fwd .sb-leaf .rear::after { background: linear-gradient(270deg, rgba(0,0,0,.35), rgba(0,0,0,0) 55%); opacity: 1; animation: sbFoldLight .9s ease forwards !important; }
.sb-fold.back .sb-leaf .front::after { background: linear-gradient(270deg, rgba(0,0,0,.4), rgba(0,0,0,0) 60%); animation: sbFoldShade .9s ease forwards !important; }
.sb-fold.back .sb-leaf .rear::after { background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 55%); opacity: 1; animation: sbFoldLight .9s ease forwards !important; }
.sb-spine { position: absolute; top: 0; bottom: 0; left: calc(50% - 14px); width: 28px; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.28) 50%, rgba(0,0,0,0)); animation: sbSpine .9s ease forwards !important; }
@keyframes sbFoldF { to { transform: rotateY(-180deg); } }
@keyframes sbFoldB { to { transform: rotateY(180deg); } }
@keyframes sbFoldShade { to { opacity: 1; } }
@keyframes sbFoldLight { to { opacity: 0; } }
@keyframes sbSpine { 0% { opacity: .3; } 50% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sb-fold { display: none; } }

/* 10/13 발자국 스티커를 책 위 아무 데나 붙이기 */
.sb-drag.sb-placed { animation: none; cursor: default; transition: transform .15s, opacity .3s; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); z-index: 4; }
.sb-drag.sb-placed.pop { animation: sbStick .35s ease-out; }
.sb-drag.sb-placed.press { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.92); }
.sb-drag.sb-placed.off { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.3); }
.sb-drag.stuck { opacity: 1; transform: translate(-50%, -50%) scale(.8); transition: left .2s, top .2s, transform .3s; animation: none; }
@keyframes sbStick { 0% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.25); } 60% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.9); } 100% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1); } }
@media (prefers-reduced-motion: reduce) { .sb-drag.sb-placed.pop { animation: none; } }

/* 10/13 조금씩 보여요 · 다른 하나 찾기 */
.mode-card.peekplay .mode-icon { background: linear-gradient(120deg, #6FC3F5, #1E6FD1) !important; }
.mode-card.oddplay .mode-icon { background: linear-gradient(120deg, #F7A93B, #E2582A) !important; }
.guess-row { grid-template-columns: repeat(6, 1fr); row-gap: 14px; }
.guess-row .mode-card { grid-column: span 2; min-width: 0; overflow: visible; }
.guess-row .mode-card:nth-child(n+4) { grid-column: span 3; }
.guess-row .mode-card .mode-icon { width: min(100px, 25vw); height: min(100px, 25vw); }
.guess-row .mode-card .mode-icon svg { width: 44px; height: 44px; }
.guess-row .mode-card .mode-text b { font-size: 17px; white-space: normal; word-break: keep-all; line-height: 1.2; display: block; }
@media (orientation: landscape) and (max-height: 600px) {
  .guess-row { grid-template-columns: repeat(7, 1fr); grid-auto-flow: row; }
  .guess-row .mode-card, .guess-row .mode-card:nth-child(n+4) { grid-column: auto; overflow: visible; }
  .guess-row .mode-card .mode-icon { width: min(84px, 11vw); height: min(84px, 11vw); }
  .guess-row .mode-card .mode-text { max-width: 100%; overflow: visible; }
  .guess-row .mode-card .mode-text b { font-size: 14px; white-space: normal; word-break: keep-all; overflow: visible; text-overflow: clip; }
}
.pk-stage { background: radial-gradient(90% 80% at 50% 50%, #fff 0%, var(--blue-soft) 100%); }
.pk-stage .pk-img { opacity: 1; transform: scale(.97); }
.pk-cover { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); z-index: 2; }
.pk-cover i { background: #DCEBFB; border: 1px solid #fff; transition: opacity .45s ease, transform .45s ease; }
.pk-cover i:nth-child(odd) { background: #E8F2FC; }
.pk-cover i.off { opacity: 0; transform: scale(.6); }
.pk-stage.reveal .pk-img { transform: scale(1.04); transition: transform .5s cubic-bezier(.2,1.4,.4,1); }
.oddgame .fcard.same { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .pk-cover i { transition: opacity .2s; } }
.mode-card.saynameplay { background: linear-gradient(120deg, #3FC1A5, #138A73) !important; color: #fff; border: 0; }
.mode-card.saynameplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
@media (orientation: landscape) and (max-height: 600px) {
  .follow-row { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; }
  .follow-row .mode-card { min-height: 0; flex-direction: column; align-items: flex-start; justify-content: center; }
  .follow-row .mode-card .mode-text b { font-size: clamp(20px, 6vh, 28px); }
}
/* 10/13 스티커 판 (4 놀기) */
.mode-card.play.stickerplay { background: linear-gradient(120deg, #FF8FB1, #D94C86); color: #fff; border: 0; }
.mode-card.play.stickerplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
.stk { gap: 8px; padding-bottom: 10px; }
.stk-boards { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; flex: none; }
.stk-bd { flex: none; width: 64px; aspect-ratio: 3 / 2; padding: 0; border-radius: 10px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(10,31,68,.18); background: #fff; }
.stk-bd img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stk-bd.on { border-color: var(--spark, #FFD12E); box-shadow: 0 0 0 2px var(--spark, #FFD12E); }
.stk-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.stk-board { position: relative; width: 100%; aspect-ratio: 3 / 2; max-height: 100%; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 16px rgba(10,31,68,.2); touch-action: none; flex: none; align-self: center; }
.stk-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.stk-layer { position: absolute; inset: 0; }
.stk-it { position: absolute; transform: translate(-50%, -100%); touch-action: none; cursor: grab; }
.stk-it img { width: 100%; display: block; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 4px 3px rgba(0,0,0,.28)); pointer-events: none; }
.stk-it.sel { outline: 3px dashed rgba(255,255,255,.95); outline-offset: 2px; border-radius: 8px; }
.stk-it.hold { cursor: grabbing; }
.stk-it.pop { animation: stkPop .35s ease-out; }
@keyframes stkPop { 0% { transform: translate(-50%, -100%) scale(1.25); } 60% { transform: translate(-50%, -100%) scale(.92); } 100% { transform: translate(-50%, -100%) scale(1); } }
.stk-side { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.stk-tools { display: flex; gap: 8px; justify-content: center; flex: none; }
.stk-tool { width: 52px; height: 52px; border-radius: 16px; border: 3px solid #fff; background: var(--blue-deep, #0A2E6E); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 0 #061A42; }
.stk-tool:disabled { opacity: .3; }
.stk-tool.save { background: #2E9E57; box-shadow: 0 4px 0 #1E7240; margin-left: 10px; }
.stk-tray { flex: 1; min-height: 76px; display: grid; grid-auto-flow: column; grid-auto-columns: 92px; grid-template-rows: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px; }
.stk-pick { padding: 4px; border-radius: 14px; background: #fff; border: 2px solid var(--blue-soft, #DCE7F7); touch-action: none; }
.stk-pick img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.stk-ghost { position: fixed; width: 110px; transform: translate(-50%, -60%) scale(1.1); pointer-events: none; z-index: 1000; filter: drop-shadow(0 8px 8px rgba(0,0,0,.3)); }
@media (orientation: landscape) and (max-height: 600px) {
  .stk-boards { gap: 6px; padding: 0; }
  .stk-bd { width: 48px; border-width: 2px; border-radius: 8px; }
  .stk-main { flex-direction: row; }
  .stk-board { height: 100%; width: auto; align-self: flex-start; }
  .stk-tray { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); grid-auto-rows: 64px; grid-template-rows: none; overflow-y: auto; overflow-x: hidden; }
  .stk-tools { flex-wrap: wrap; }
  .stk-tool { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .stk-it.pop { animation: none; } }
/* 10/13 내 공룡 키우기 (4 놀기) */
.mode-card.play.petplay { background: linear-gradient(120deg, #FFB547, #F06A3B); color: #fff; border: 0; }
.mode-card.play.petplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
.pet-picks { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: center; }
.pet-pk { aspect-ratio: 4 / 3; border-radius: 18px; background: #fff; border: 3px solid #fff; box-shadow: 0 6px 14px rgba(10,31,68,.16); padding: 6px; }
.pet-pk img { width: 100%; height: 100%; object-fit: contain; }
.pet-baby { width: 100%; height: 100%; display: grid; place-items: center; transform: scale(.55); transform-origin: 50% 85%; }
.pet-baby .art-img { width: 100%; height: 100%; object-fit: contain; }
.pet { gap: 8px; padding-bottom: 10px; }
.pet-grow { display: flex; gap: 4px; justify-content: center; min-height: 28px; flex-wrap: wrap; }
.pet-grow i { width: 22px; height: 28px; opacity: .25; filter: grayscale(1); }
.pet-grow i.on { opacity: 1; filter: none; }
.pet-grow svg { width: 100%; height: 100%; }
.pet-max { color: #FFC21A; font-size: 26px; }
.pet-scene { position: relative; flex: 1; min-height: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 6px 16px rgba(10,31,68,.2); touch-action: none; }
.pet-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pet-dino { position: absolute; left: 50%; bottom: 7%; width: min(96%, 150%); max-height: 70%; aspect-ratio: 3 / 2; transform: translateX(-50%) scale(var(--sc, 1)); transform-origin: 50% 100%; touch-action: none; cursor: grab; transition: transform .5s cubic-bezier(.2,1.3,.4,1); }
.pet-dino .art-img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.pet-dino.hop { animation: petHop .45s ease; }
.pet-dino.eat { animation: petEat .25s ease-in-out 3; }
.pet-dino.no { animation: petNo .45s ease; }
.pet-dino.sleep { animation: petBreathe 2.6s ease-in-out infinite; filter: brightness(.7); }
@keyframes petHop { 0%,100% { transform: translateX(-50%) scale(var(--sc)) translateY(0); } 40% { transform: translateX(-50%) scale(var(--sc)) translateY(-10%); } }
@keyframes petEat { 0%,100% { transform: translateX(-50%) scale(var(--sc)) rotate(0); } 50% { transform: translateX(-50%) scale(var(--sc)) rotate(3deg); } }
@keyframes petNo { 0%,100% { transform: translateX(-50%) scale(var(--sc)); } 30% { transform: translateX(-50%) scale(var(--sc)) scaleX(-1); } 70% { transform: translateX(-50%) scale(var(--sc)) scaleX(-1); } }
@keyframes petBreathe { 0%,100% { transform: translateX(-50%) scale(var(--sc)) scaleY(1); } 50% { transform: translateX(-50%) scale(var(--sc)) scaleY(.97); } }
.pet-shell { position: absolute; left: 24%; bottom: 8%; height: 14%; aspect-ratio: 4 / 5; }
.pet-shell .egg { box-shadow: none; }
.pet-shell .egg-top, .pet-shell .egg-crack { display: none; }
.pet-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pet-heart { position: absolute; font-style: normal; font-size: 30px; color: #FF5A8A; text-shadow: 0 2px 4px rgba(0,0,0,.25); animation: petHeart 1.3s ease-out forwards; }
.night .pet-heart { color: #CFE3FF; font-family: var(--font-card, sans-serif); font-weight: 700; }
@keyframes petHeart { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), -260%) scale(1.2); opacity: 0; } }
.pet-foods[hidden] { display: none; }
.pet-foods { position: absolute; left: 0; right: 0; top: 6%; display: flex; justify-content: center; gap: 14px; z-index: 4; }
.pet-food { width: min(22%, 110px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.92); border: 4px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.25); padding: 10%; display: grid; place-items: center; }
.pet-food { position: relative; }
.pet-food img, .pet-food svg { position: absolute; left: 14%; top: 14%; width: 72%; height: 72%; object-fit: contain; }
.pet-food.fade { opacity: .35; }
.pet-bar { display: flex; justify-content: center; gap: 22px; flex: none; }
.pet-btn { width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; color: #fff; display: grid; place-items: center; box-shadow: 0 5px 12px rgba(10,31,68,.25); }
.pet-btn.feed { background: linear-gradient(120deg, #FFB547, #F06A3B); }
.pet-btn.feed.done { box-shadow: 0 0 0 4px #FFD54A, 0 5px 12px rgba(10,31,68,.25); }
.pet-btn.sleepb { background: linear-gradient(120deg, #4E5D9C, #1F2440); }
@media (orientation: landscape) and (max-height: 600px) {
  .pet { flex-direction: column; }
  .pet-bar { position: absolute; right: 18px; bottom: 18px; flex-direction: column; gap: 12px; z-index: 5; }
  .pet-btn { width: 60px; height: 60px; }
  .pet-picks { grid-template-columns: repeat(5, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .pet-dino.hop, .pet-dino.eat, .pet-dino.sleep { animation: none; } .pet-heart { animation-duration: .6s; } }
.play-row .mode-card.play { min-height: min(124px, max(70px, calc((100dvh - 290px) / 5))); }
@media (orientation: landscape) and (max-height: 600px) {
  .play-row { grid-template-columns: repeat(5, 1fr); }
  .pet-scene { aspect-ratio: auto; }
}
@media (orientation: portrait) { .pet-scene { flex: 0 1 auto; aspect-ratio: 3 / 4; max-height: 100%; } .pet { justify-content: flex-start; } }
/* 10/13 오늘 놀이 · 부모 기록 */
.hero-wrap { position: relative; }
.today-go { position: absolute; left: 14px; bottom: 14px; z-index: 3; font-family: var(--font-display); font-size: clamp(20px, 5.4vw, 26px); color: #fff; background: linear-gradient(120deg, #FF9F2E, #F0532F); padding: 10px 22px; border-radius: 999px; border: 4px solid #fff; box-shadow: 0 6px 14px rgba(240,83,47,.35); animation: todayPulse 2.4s ease-in-out infinite; }
.today-go.done { background: linear-gradient(120deg, #2E9E57, #1C7A44); box-shadow: 0 6px 14px rgba(28,122,68,.3); animation: none; font-size: clamp(16px, 4.4vw, 20px); }
.today-go:active { transform: scale(.96); }
@keyframes todayPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.today-step { gap: 18px; }
.ts-path { display: flex; align-items: center; justify-content: center; gap: 0; padding: 8px 4px; }
.ts-dot { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #E3EBF7; color: #8AA0C0; border: 3px solid #fff; flex: none; }
.ts-dot svg { width: 26px; height: 26px; }
.ts-dot.done { background: #2E9E57; color: #fff; }
.ts-dot.now { background: linear-gradient(120deg, #FF9F2E, #F0532F); color: #fff; transform: scale(1.18); box-shadow: 0 6px 14px rgba(240,83,47,.35); }
.ts-line { flex: 1; max-width: 46px; height: 4px; border-radius: 2px; background: #D3DEEE; }
.ts-go { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: none; border: 0; color: var(--blue-deep, #0A2E6E); }
.ts-big { width: min(46vw, 34vh); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #F0532F; box-shadow: 0 10px 24px rgba(10,31,68,.15); animation: tsIn .5s cubic-bezier(.2,1.4,.4,1); }
.ts-big svg { width: 52%; height: 52%; }
.ts-go b { font-family: var(--font-display); font-size: clamp(30px, 8vw, 44px); }
@keyframes tsIn { from { transform: scale(.4); opacity: 0; } }
.te-week { display: flex; gap: 8px; justify-content: center; }
.wd { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wd i { width: 28px; height: 28px; border-radius: 50%; background: #E3EBF7; border: 3px solid transparent; }
.wd.on i { background: #FFC21A; }
.wd.today i { border-color: #1257D6; }
.wd b { font-size: 13px; color: #5D7891; font-weight: 700; }
.te-streak { font-family: var(--font-display); font-size: 24px; color: #F0532F; margin: 0; }
.kid-report { margin-top: 6px; background: none; border: 2px solid #C9D8F2; color: #0A2E6E; font-weight: 800; font-size: 16px; padding: 12px; border-radius: 14px; }
.report { gap: 12px; overflow-y: auto; }
.rp-card { background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: 0 4px 12px rgba(10,31,68,.08); display: flex; flex-direction: column; gap: 10px; }
.rp-card h3 { margin: 0; font-size: 16px; color: #0A2E6E; }
.rp-sub, .rp-note { margin: 0; font-size: 13px; color: #5D7891; text-align: center; }
.rp-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rp-nums div { background: #fff; border-radius: 18px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 4px 12px rgba(10,31,68,.08); text-align: center; }
.rp-nums b { font-family: var(--font-display); font-size: 34px; color: #1257D6; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rp-nums span { font-weight: 800; font-size: 14px; color: #0A2E6E; }
.rp-nums small { font-size: 11px; color: #5D7891; word-break: keep-all; }
.rp-ths { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-th { width: 56px; height: 42px; border-radius: 10px; background: #F2F6FC; display: grid; place-items: center; }
.rp-th img { width: 92%; height: 92%; object-fit: contain; }
.rp-none { font-size: 14px; color: #8AA0C0; }
@media (orientation: landscape) and (max-height: 600px) {
  .today-go { left: 12px; bottom: 10px; padding: 8px 18px; font-size: 20px; }
  .ts-big { width: 30vh; }
}
@media (prefers-reduced-motion: reduce) { .today-go { animation: none; } }
.home-main .hero-wrap { flex: 1; min-height: 150px; display: flex; flex-direction: column; }
.home-main .hero-wrap .hero { flex: 1; height: auto; min-height: 0; }
@media (orientation: landscape) and (max-height: 600px) {
  .home-main .hero-wrap { grid-column: 1; grid-row: 2; min-height: 0; }
}
/* 10/13 동화책 놀이: 그림자·키 막대·색 칩·톡·지도·끌기·붓질·세기·둥지 */
.sb-quiz.plain { top: 5%; }
.sb-shadowbig { position: absolute; left: 50%; top: 92%; height: 52%; transform: translate(-50%, -100%); z-index: 3; pointer-events: none; animation: sbFade .6s ease .3s both; }
.sb-shadowbig img { height: 100%; width: auto; filter: brightness(0) opacity(.82); transition: filter .9s ease; }
.sb-shadowbig.reveal img { filter: none; }
.sb-bars { position: absolute; inset: 30% 18% 6%; z-index: 6; display: flex; justify-content: center; align-items: flex-end; gap: 10%; pointer-events: none; animation: sbFade .3s ease both; }
.sb-bar { position: relative; flex: 0 0 22%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.sb-bar i { width: 46%; height: calc(var(--v) * 78%); border-radius: 10px 10px 4px 4px; background: linear-gradient(#FFE07A, #FFB52E); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.3); transform-origin: 50% 100%; animation: sbBarUp 1.1s cubic-bezier(.2,1,.3,1) .2s both; }
.sb-bar.win i { background: linear-gradient(#9EE07A, #2E9E57); }
.sb-bar img { width: 100%; height: 22%; object-fit: contain; background: rgba(255,255,255,.92); border-radius: 10px; border: 3px solid #fff; }
.sb-bars.w { flex-direction: column; inset: 34% 12% 10%; gap: 10%; align-items: stretch; }
.sb-bars.w .sb-bar { flex: 0 0 34%; height: auto; flex-direction: row-reverse; justify-content: flex-end; }
.sb-bars.w .sb-bar i { height: 70%; width: calc(var(--v) * 70%); border-radius: 4px 10px 10px 4px; transform-origin: 0 50%; animation-name: sbBarRight; }
.sb-bars.w .sb-bar img { width: 22%; height: 100%; }
@keyframes sbBarUp { from { transform: scaleY(0); } }
@keyframes sbBarRight { from { transform: scaleX(0); } }
.sb-chipcard { position: absolute; left: 50%; top: 78%; height: 56%; transform: translate(-50%, -100%); z-index: 3; pointer-events: none; }
.sb-chipcard img { height: 100%; width: auto; transition: filter .8s ease, transform .5s; }
.sb-chipcard.gray img { filter: grayscale(1) brightness(1.15) contrast(.8); }
.sb-chipcard.on img { transform: scale(1.06); }
.sb-chips { position: absolute; left: 0; right: 0; bottom: 5%; z-index: 5; display: flex; justify-content: center; gap: 5%; animation: sbFade .5s ease .6s both; }
.sb-chip { width: 15%; aspect-ratio: 1; border-radius: 50%; border: 5px solid #fff; background: var(--c, #fff); box-shadow: 0 6px 14px rgba(0,0,0,.3); cursor: pointer; }
.sb-chip.txt { background: #fff; color: #0A2E6E; font-family: var(--font-display); font-size: clamp(26px, 6vh, 44px); display: grid; place-items: center; }
.sb-chip.no { animation: mzWiggle .45s ease; }
.sb-chip.right { transform: scale(1.18); box-shadow: 0 0 0 5px #FFD54A, 0 6px 14px rgba(0,0,0,.3); transition: transform .3s; }
.sb-map { position: absolute; inset: 0; z-index: 4; }
.sb-mapsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sb-mapsvg .sea { fill: #BFE3F5; } .sb-mapsvg .near { fill: #E6EDDF; } .sb-mapsvg .land { fill: #8CCB7E; stroke: #fff; stroke-width: .8; stroke-linejoin: round; }
.sb-pin { position: absolute; width: 7%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; cursor: pointer; }
.sb-pin i { position: absolute; inset: 22%; border-radius: 50%; background: #FFD54A; border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(255,213,74,.8); animation: sbPin 1.4s ease-out infinite; }
.sb-pin.on i { background: #F0532F; animation: none; }
@keyframes sbPin { 70% { box-shadow: 0 0 0 14px rgba(255,213,74,0); } 100% { box-shadow: 0 0 0 0 rgba(255,213,74,0); } }
.sb-pinpop { position: absolute; transform: translate(12%, -110%); background: #fff; border-radius: 14px; padding: 6px 10px; box-shadow: 0 6px 16px rgba(0,0,0,.3); display: none; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; z-index: 6; }
.sb-pinpop.show { display: flex; animation: sbPop .5s cubic-bezier(.3,1.6,.5,1) both; }
.sb-pinpop img { width: 110px; height: 70px; object-fit: contain; }
.sb-pinpop b { font-family: var(--font-card); font-size: 16px; color: #0A2E6E; }
.sb-pinpop small { font-size: 12px; color: #5D7891; font-weight: 700; }
.sb-deco { position: absolute; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; overflow: visible; }
.sb-deco .nest-out { fill: #8C6A3F; } .sb-deco .nest-in { fill: #6A4C2A; } .sb-deco .nest-egg { fill: #E9E2D2; stroke: #BFAF92; stroke-width: .8; }
.sb-brush { position: absolute; aspect-ratio: 3 / 2; transform: translate(-50%, -50%); z-index: 4; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.3); touch-action: none; background: #CDB794; }
.sb-brush .fossil { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; filter: sepia(1) saturate(.35) brightness(1.08) contrast(1.15); transition: filter 1.2s ease .3s; }
.sb-brush.alive .fossil { filter: none; }
.sb-brush canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; transition: opacity .6s; }
.sb-brush canvas.gone { opacity: 0; pointer-events: none; }
.sb-count { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sb-cn { position: absolute; transform: translate(-50%, -95%); animation: sbPop .5s cubic-bezier(.3,1.6,.5,1) both; }
.sb-cn img { height: 100%; width: auto; }
.sb-cn b { position: absolute; left: 50%; top: -6%; transform: translate(-50%, -100%); font-family: var(--font-display); font-size: clamp(22px, 5vh, 38px); color: #fff; background: #F0532F; border: 3px solid #fff; border-radius: 50%; width: 1.6em; height: 1.6em; display: grid; place-items: center; animation: sbPop .5s cubic-bezier(.3,1.6,.5,1) both; }
.sb-target { position: absolute; width: 18%; aspect-ratio: 2; transform: translate(-50%, -60%); border-radius: 50%; border: 4px dashed rgba(255,255,255,.9); z-index: 2; pointer-events: none; animation: sbRing 1.4s ease-out infinite; }
.sb-target.done { opacity: 0; transition: opacity .4s; }
.sb-layer .sb-actor.tappable, .sb-layer .sb-actor.draggable { pointer-events: auto; cursor: pointer; }
.sb-actor.draggable { touch-action: none; z-index: 5; }
.sb-actor.draggable.hold { filter: drop-shadow(0 12px 10px rgba(0,0,0,.35)); }
.sb-actor.tappable::after { content: ""; position: absolute; left: 50%; bottom: -4%; width: 30%; height: 8%; transform: translateX(-50%); border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,230,140,.0); animation: sbTapHint 1.8s ease-out 1.2s 3; pointer-events: none; }
@keyframes sbTapHint { 0% { box-shadow: 0 0 0 0 rgba(255,230,140,.9); } 100% { box-shadow: 0 0 0 18px rgba(255,230,140,0); } }
.sb-actor.tapped.tap-hop .sb-body, .sb-actor.tapped.tap-name .sb-body { animation: sbHopB .42s ease-in-out 2 !important; }
.sb-actor.tapped.tap-up .sb-body { animation: sbUp 1.4s ease-in-out !important; }
@keyframes sbUp { 40%, 60% { transform: translateY(-38%); } }
.sb-actor.blanket .sb-body::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 8%; height: 34%; border-radius: 50% 50% 20% 20%; background: radial-gradient(circle at 30% 40%, #8CCB5E 0 18%, transparent 19%), radial-gradient(circle at 65% 35%, #6DB34A 0 20%, transparent 21%), radial-gradient(circle at 48% 70%, #4E9A3A 0 24%, transparent 25%), #5FA845; opacity: .95; animation: sbFade .5s ease both; }
.sb-actor .sb-body { position: relative; display: block; height: 100%; }
.sb-bubble { position: absolute; left: 60%; top: 0; transform: translate(-50%, -100%); background: #fff; color: #1257D6; font-family: var(--font-display); font-size: clamp(18px, 4vh, 30px); padding: 4px 12px; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,.25); animation: sbPop .5s cubic-bezier(.3,1.6,.5,1) both; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .sb-pin i, .sb-target, .sb-actor.tappable::after { animation: none; } }
.sb-deco .nest-egg-hi { fill: rgba(255,255,255,.55); }
/* 10/13 이름 칠하기 */
.mode-card.play.traceplay { background: linear-gradient(120deg, #5BB5F0, #1E6FD9); color: #fff; border: 0; }
.mode-card.play.traceplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
.play-row .mode-card.play { min-height: min(120px, max(62px, calc((100dvh - 300px) / 6))); }
@media (orientation: landscape) and (max-height: 600px) { .play-row { grid-template-columns: repeat(6, 1fr); } }
.trace { gap: 8px; padding-bottom: 10px; }
.tr-top { display: flex; gap: 10px; align-items: center; }
.tr-cards { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; padding: 2px; }
.tr-ck { flex: none; width: 64px; height: 48px; border-radius: 12px; background: #fff; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(10,31,68,.15); padding: 2px; }
.tr-ck img { width: 100%; height: 100%; object-fit: contain; }
.tr-ck.on { border-color: #1E6FD9; }
.tr-lang { flex: none; }
.tr-word { display: flex; justify-content: center; gap: 4px; min-height: 40px; font-family: var(--font-display); font-size: 34px; line-height: 40px; color: #C9D8EC; flex-wrap: wrap; }
.tr-word .done { color: #18A46A; } .tr-word .now { color: #1E6FD9; transform: translateY(-3px); display: inline-block; }
.tr-stage { flex: 1; min-height: 0; display: grid; place-items: center; }
.tr-board { position: relative; height: 100%; aspect-ratio: 1; max-width: 100%; background: #fff; border-radius: 26px; border: 3px solid #D6E3F3; overflow: hidden; touch-action: none; }
.tr-board canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tr-meter { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 10px; border-radius: 99px; background: #EEF3FA; overflow: hidden; }
.tr-meter i { display: block; height: 100%; width: 0; background: #18A46A; transition: width .15s; }
.tr-full { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; animation: sbPop .5s cubic-bezier(.3,1.6,.5,1) both; }
.tr-full img { width: 80%; max-height: 60%; object-fit: contain; }
.tr-full b { font-family: var(--font-display); font-size: clamp(28px, 7vw, 46px); color: #1E6FD9; text-align: center; word-break: keep-all; }
.tr-colors { display: flex; justify-content: center; gap: 10px; flex: none; }
.tr-sw { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #D6E3F3; }
.tr-sw.on { box-shadow: 0 0 0 4px #0A2E6E; }
.tr-er { width: 48px; height: 44px; border-radius: 14px; border: 2px solid #D6E3F3; background: #fff; color: #0A2E6E; display: grid; place-items: center; }
.tr-er.on { border-color: #0A2E6E; }
@media (orientation: landscape) and (max-height: 600px) {
  .trace { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr auto; column-gap: 14px; }
  .trace .game-top { grid-column: 1 / 3; }
  .tr-top { grid-column: 1; } .tr-word { grid-column: 1; font-size: 28px; }
  .tr-stage { grid-column: 2; grid-row: 2 / 5; }
  .tr-colors { grid-column: 1; flex-wrap: wrap; }
}
.tr-board { height: auto; width: 100%; max-height: 100%; aspect-ratio: 1; }
@media (orientation: portrait) { .tr-stage { align-items: start; } .tr-board { width: min(100%, calc(100dvh - 330px)); } }
@media (orientation: landscape) and (max-height: 600px) { .tr-board { height: calc(100dvh - 92px); width: auto; } }
.tr-full[hidden] { display: none; }
@media (orientation: landscape) and (max-height: 600px) { .tr-stage { width: calc(100dvh - 92px); } }
@media (orientation: portrait) { .tr-stage { flex: 0 0 auto; } }
@media (orientation: landscape) and (max-height: 600px) { .trace { grid-template-columns: minmax(0, 1fr) auto; } .tr-top { min-width: 0; } .tr-colors { align-self: center; } }

/* 10/13 아침: 메뉴 화면 위 한국어 / English (앱 전체 이름 말, 기본 한국어) */
.sec-lang { display: flex; background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 3px; flex: none; }
.sec-lang button { border: 0; background: none; min-height: 34px; padding: 0 10px; border-radius: 999px; font-weight: 800; font-size: 14px; color: var(--ink-soft); }
.sec-lang button.on { background: var(--blue-deep); color: #fff; }
.home-sec .sec-title { justify-content: flex-start; }

/* 10/13 화석 발굴 가볍게: 움직이는 붓에 그림자 필터 금지(손가락 따라 매번 다시 그려서 느림) */
.dig-brush { will-change: transform; }
.dig-brush svg { filter: none; }

/* 10/13 스티커 판: 세로 화면에서 공룡 칸이 오른쪽으로 잘리던 것 → 4칸 맞춤 + 아래로 밀어 100마리 */
@media (orientation: portrait) {
  .stk-tray { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 74px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
}

/* 10/13 이름 박수 (2 따라 하기) */
.mode-card.clapplay { background: linear-gradient(120deg, #FFB547, #F07A1A) !important; color: #fff; border: 0; }
.mode-card.clapplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
.clap-syl { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 6px 12px 0; }
.clap-syl b { min-width: calc(min(84vw, 520px) / max(var(--n, 4), 4) - 6px); padding: 10px 2px; border-radius: 16px; background: #fff; border: 3px solid #E3E9F3; color: #9AA9C2; font-family: var(--font-card); font-size: clamp(26px, 8vw, 46px); font-weight: 800; text-align: center; transition: transform .15s, background .15s, color .15s; }
.clap-syl b.on { background: #FFE58A; border-color: #F2B533; color: #0A2E6E; transform: translateY(-6px) scale(1.08); }
.clap-syl b.kid.on { background: #BDF0D5; border-color: #2BB673; }
.clap-syl.done b { animation: clapDone .5s ease; }
@keyframes clapDone { 50% { transform: translateY(-10px) scale(1.12); } }
.clap-hand { display: block; margin: 14px auto 0; width: 110px; height: 110px; border-radius: 50%; border: 0; background: #FFF3D6; color: #F07A1A; box-shadow: 0 5px 0 #F2C77E; }
.clap-hand svg { width: 66%; height: 66%; }
.clap-hand.wait { animation: clapWait 1s ease-in-out infinite; }
.clap-hand.pop { animation: clapPop .25s ease; }
@keyframes clapWait { 50% { transform: scale(1.08); } }
@keyframes clapPop { 50% { transform: scale(.88); } }
.home-sec .sec-top .sec-title { white-space: nowrap; font-size: clamp(20px, 6.2vw, 30px); min-width: 0; }
@media (max-width: 420px) { .sec-lang button { padding: 0 8px; font-size: 13px; } }
/* 10/13 스티커 판: 공룡 칸은 위아래 스크롤이 먼저 (톡 = 붙이기, 옆으로/꾹 = 끌기) */
.stk-pick { touch-action: pan-y; }

/* 이름 박수 배치 (10/13 고침): 세로 = 카드 → 글자 → 손뼉, 가로 = 왼쪽 카드 / 오른쪽 글자·손뼉 */
.clapgame .call-card { max-height: 44vh; }
.clap-hand { flex: none; }
@media (orientation: landscape) {
  .clapgame { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 18px; row-gap: 8px; max-width: none; height: 100dvh; padding-bottom: 12px; }
  .clapgame > .game-top, .clapgame > .call-dots { grid-column: 1 / -1; }
  .clapgame .call-card { grid-column: 1; grid-row: 3 / 5; max-height: none; height: 100%; min-height: 0; }
  .clapgame .clap-syl { grid-column: 2; grid-row: 3; align-self: end; margin: 0; }
  .clapgame .clap-syl b { min-width: 0; flex: 1 1 0; max-width: 92px; font-size: clamp(22px, 6vh, 40px); padding: 8px 2px; }
  .clapgame .clap-hand { grid-column: 2; grid-row: 4; margin: 6px auto 0; width: min(96px, 20vh); height: min(96px, 20vh); }
}
/* 이름 말하기·소리 따라 하기도 가로 화면에서 그림이 칸 밖으로 넘치던 것 → 왼쪽 그림 / 오른쪽 이름·마이크 */
@media (orientation: landscape) {
  .screen.call:not(.clapgame) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto minmax(0, 1fr); column-gap: 18px; row-gap: 6px; max-width: none; height: 100dvh; padding-bottom: 12px; }
  .screen.call:not(.clapgame) > .game-top, .screen.call:not(.clapgame) > .call-dots { grid-column: 1 / -1; }
  .screen.call:not(.clapgame) > .call-card { grid-column: 1; grid-row: 3 / 7; max-height: none; height: 100%; min-height: 0; }
  .screen.call:not(.clapgame) > .call-name { grid-column: 2; grid-row: 4; font-size: clamp(24px, 7vh, 44px); }
  .screen.call:not(.clapgame) > *:not(.game-top):not(.call-dots):not(.call-card):not(.call-name) { grid-column: 2; }
  .screen.call:not(.clapgame) > .call-turn { grid-row: 5; }
}
/* 10/13 이름 쓰기: 시작점이 아닌 곳을 누르면 안내가 살짝 흔들림 */
#fx.hint { animation: trHint .4s ease; }
@keyframes trHint { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* 10/13 숫자 세기 (1 보기) */
.mode-card.countcard { background: #DDF3E4 !important; color: #145C38; }
.mode-card.countcard .mode-icon { background: #fff; color: #18A46A; }
.countgame { gap: 8px; padding-bottom: 12px; }
.cnt-opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cnt-opts .segs { background: #fff; border: 2px solid #DCE6F5; }
.cnt-opts .seg { color: #0A2E6E; min-height: 40px; font-size: 15px; padding: 0 10px; }
.cnt-opts .seg.on { background: #0A2E6E; color: #fff; }
.cnt-mode { grid-template-columns: repeat(2, auto); } .cnt-max { grid-template-columns: repeat(4, auto); }
.cnt-stage { flex: 1; min-height: 0; background: #fff; border-radius: 24px; border: 3px solid #E3E9F3; display: grid; place-items: center; padding: 10px; overflow: hidden; }
.cnt-grid { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 0; align-content: center; justify-content: center; }
.cnt-grid img { width: 100%; aspect-ratio: 1.6; object-fit: contain; }
.cnt-grid.many { gap: 1px 2px; }
.cnt-grid img.new { animation: cntIn .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes cntIn { from { transform: scale(.2); opacity: 0; } }
.cnt-label { display: flex; align-items: baseline; justify-content: center; gap: 14px; }
.cnt-label b { font-family: var(--font-display); font-size: clamp(48px, 15vw, 84px); color: #1E6FD9; line-height: 1; }
.cnt-label b.pop { animation: clapDone .35s ease; }
.cnt-label span { font-family: var(--font-card); font-weight: 800; font-size: clamp(26px, 8vw, 44px); color: #0A2E6E; }
.cnt-play { align-self: center; width: 76px; height: 76px; border-radius: 50%; border: 0; background: #F2643F; color: #fff; box-shadow: 0 5px 0 #C24A2A; display: grid; place-items: center; }
.cnt-play.on { opacity: .35; pointer-events: none; }
@media (orientation: landscape) {
  .countgame { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 16px; max-width: none; height: 100dvh; }
  .countgame > .game-top { grid-column: 1 / -1; }
  .countgame .cnt-opts { grid-column: 2; grid-row: 2; }
  .countgame .cnt-stage { grid-column: 1; grid-row: 2 / 5; }
  .countgame .cnt-label { grid-column: 2; grid-row: 3; align-self: center; flex-direction: column; align-items: center; gap: 4px; }
  .countgame .cnt-play { grid-column: 2; grid-row: 4; }
  .cnt-label b { font-size: clamp(44px, 16vh, 96px); }
}

/* 10/13 가로 화면 점검: 퍼즐은 왼쪽 판 / 오른쪽 조각 (조각이 화면 아래로 잘리던 것) */
@media (orientation: landscape) and (max-height: 600px) {
  .puzzlegame { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); column-gap: 16px; row-gap: 8px; max-width: none; height: 100dvh; padding-bottom: 10px; }
  .puzzlegame > .game-top, .puzzlegame > .game-levels { grid-column: 1 / -1; }
  .puzzlegame .puzzle-board { --w: min(calc((100dvh - 168px) * var(--ratio)), 58vw); grid-column: 1; grid-row: 3; margin: 0; align-self: start; }
  .puzzlegame .puzzle-name { grid-column: 2; grid-row: 3; align-self: end; }
  .puzzlegame .puzzle-tray { grid-column: 2; grid-row: 3; overflow-y: auto; align-content: flex-start; }
  .match-grid { gap: 8px; }
}

/* 10/13 빔빔 친구(점토 그림을 코드로 움직임) */
.buddy { display: inline-block; line-height: 0; transform-origin: 50% 100%; animation: bdIn .5s cubic-bezier(.2,1.5,.4,1) both; -webkit-tap-highlight-color: transparent; }
.buddy img { width: 100%; height: auto; display: block; transform-origin: 50% 100%; pointer-events: none; user-select: none; -webkit-user-select: none; }
.bd-greet img { animation: bdSway 2.8s ease-in-out infinite; }
.bd-jump img { animation: bdHop 1.1s cubic-bezier(.3,0,.5,1) infinite; }
.bd-cheer img { animation: bdHop .8s cubic-bezier(.3,0,.5,1) infinite; }
.bd-think img { animation: bdTilt 2.4s ease-in-out infinite; }
.bd-oops img { animation: bdShake 1.4s ease-in-out infinite; }
.bd-read img { animation: bdNod 2.6s ease-in-out infinite; }
.bd-sleep img { animation: bdBreath 3.6s ease-in-out infinite; }
.bd-egg img { animation: bdWobble 2.2s ease-in-out infinite; }
.buddy.boing { animation: bdBoing .55s cubic-bezier(.2,1.6,.4,1); }
@keyframes bdIn { from { transform: scale(.3) translateY(20%); opacity: 0; } }
@keyframes bdSway { 0%,100% { transform: rotate(-3deg) scaleY(1); } 50% { transform: rotate(3deg) scaleY(1.025); } }
@keyframes bdHop { 0%,100% { transform: translateY(0) scale(1.06,.94); } 15% { transform: translateY(0) scale(.96,1.05); } 45% { transform: translateY(-14%) scale(.98,1.03); } 75% { transform: translateY(0) scale(1.06,.94); } 85% { transform: translateY(0) scale(1,1); } }
@keyframes bdTilt { 0%,100% { transform: rotate(0); } 40%,60% { transform: rotate(-7deg); } }
@keyframes bdShake { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-4deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(0); } }
@keyframes bdNod { 0%,100% { transform: rotate(0) scaleY(1); } 25% { transform: rotate(2deg) scaleY(.98); } 50% { transform: rotate(0) scaleY(1.02); } 75% { transform: rotate(2deg) scaleY(.98); } }
@keyframes bdBreath { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.03,1.05); } }
@keyframes bdWobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes bdBoing { 0% { transform: scale(1); } 30% { transform: scale(1.18,.82); } 60% { transform: scale(.9,1.12) translateY(-8%); } 100% { transform: scale(1); } }
/* 처음 화면: 큰 그림 오른쪽 아래에 걸쳐 앉음 */
.bd-home { position: absolute; right: 4px; bottom: -6px; z-index: 4; width: clamp(96px, 30%, 168px); cursor: pointer; filter: drop-shadow(0 6px 8px rgba(10,31,68,.18)); }
@media (orientation: landscape) { .bd-home { width: clamp(84px, 24vh, 150px); } }
/* 끝 화면: 별 위에서 폴짝 */
.screen.end .bd-end { width: clamp(110px, min(34vw, 26vh), 210px); margin: 0 auto -6px; position: relative; z-index: 2; cursor: pointer; }
@media (orientation: landscape) and (max-height: 600px) { .screen.end .bd-end { width: clamp(80px, 22vh, 130px); margin-bottom: -10px; } }
/* 동화책 책장: 제목 옆에서 책 읽기 */
.bd-shelf { width: 64px; margin: -10px 0 -14px 4px; flex: none; }
/* 말에 맞춰 왼쪽 아래 구석에서 쏙 */
.buddy-pop { position: fixed; left: max(4px, env(safe-area-inset-left)); bottom: 0; z-index: 60; width: clamp(70px, 18vmin, 120px); pointer-events: none; transform: translateY(110%); transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.buddy-pop.show { transform: translateY(8%); }
.buddy-pop .buddy { animation: none; width: 100%; filter: drop-shadow(0 4px 8px rgba(10,31,68,.2)); }
@media (prefers-reduced-motion: reduce) { .buddy, .buddy img, .buddy.boing { animation: none !important; } .buddy-pop { transition: none; } }
/* 가로 폰: 끝 화면이 한 화면에 다 들어오게 (빔빔 + 별 + 글 + 버튼 두 개 나란히) */
@media (orientation: landscape) and (max-height: 600px) {
  .end .stars { font-size: clamp(30px, 10vh, 48px); }
  .end h2.score, .end h2 { font-size: clamp(34px, 13vh, 64px); }
  .end p { margin: 2px 0 10px; font-size: 17px; }
  .end:not(.colordone) .end-actions { grid-template-columns: 1fr 1fr; width: min(100%, 560px); }
  .screen.end .bd-end { width: clamp(70px, 20vh, 110px); }
}
/* 맞혀 보기 위쪽: 난이도와 한국어/English가 겹치지 않게, 글자가 세로로 꺾이지 않게 */
.quiz-screen .quiz-levels { left: 62px; right: 172px; }
.quiz-screen .quiz-levels .seg, .quiz-screen .quiz-lang .seg { white-space: nowrap; }
.quiz-screen .quiz-levels .seg { padding: 0 4px; font-size: 14px; }
/* 가로 화면: 긴 이름 보기 3개가 화면 밖으로 안 나가게 */
.quiz-choices > .choice { min-width: 0; }
@media (min-width: 700px) { .quiz-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } .quiz-choices.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quiz-choices.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (orientation: landscape) and (max-height: 600px) { .quiz-choices .choice, .quiz-choices.n4 .choice { font-size: clamp(17px, 2.6vw, 28px); padding: 6px 8px; } }
/* 10/13 더 알아보기: 화석 이야기 · 몸으로 해 봐요 */
.bk-fossil h3 { display: flex; align-items: center; gap: 6px; }
.bk-fossil h3 svg { color: #B98A4E; flex: none; }
.bk-fossil p, .bk-play p { margin: 0; line-height: 1.6; font-size: 17px; }
.bk-fossil { background: #FBF4E8; border-radius: 16px; padding: 12px 14px; }
.bk-play { background: #EAF6EE; border-radius: 16px; padding: 12px 14px; }
/* 10/13 원래 시작 화면으로 되돌림: 가로 폰에서 브라키오 목이 시작 버튼에 가리지 않게 오른쪽으로 */
@media (orientation: landscape) and (max-height: 600px) {
  .start .parade .p-mid { left: 72%; width: 50vh; bottom: 12vh; }
  .start .parade .p-right { right: 18%; }
}
/* 10/13 새 시작 화면: 코드로 그린 하늘·먼 산·언덕 + 점토 빔빔 */
.start3 { padding: 0 !important; display: block; position: relative; overflow: hidden; background: linear-gradient(180deg, #A9DCFF 0%, #CDEBFF 45%, #EAF7FF 70%, #F4FBFF 100%); color: var(--blue-deep, #0A2E6E); }
.start3 .cloud { opacity: .95; }
.s3-land { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; display: block; }
.s3-sun { position: absolute; top: 7%; right: 12%; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #FFF6B8, #FFD54A 70%); box-shadow: 0 0 0 14px rgba(255, 228, 120, .25), 0 0 40px rgba(255, 210, 80, .5); }
.s3-wrap { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: max(9vh, env(safe-area-inset-top)) 20px max(7vh, env(safe-area-inset-bottom)); text-align: center; }
.s3-title { display: flex; flex-direction: column; align-items: center; }
.s3-brand { font-family: var(--font-display); font-size: clamp(20px, 5.4vw, 28px); color: #fff; background: #FF8A3D; padding: 4px 18px 6px; border-radius: 999px; box-shadow: 0 4px 0 #E0662A; letter-spacing: .04em; transform: rotate(-3deg); }
.s3-title h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 17vw, 110px); line-height: 1; margin: 14px 0 0; color: #1F6FD6; letter-spacing: -.02em; text-shadow: 0 5px 0 #fff, 0 9px 0 rgba(31, 111, 214, .18); white-space: nowrap; }
.s3-title h1 em { font-style: normal; color: #2EAD6B; }
.s3-tag { margin: 12px 0 0; font-weight: 800; font-size: clamp(15px, 4.2vw, 19px); color: #3D6A9A; }
.s3-bb { width: min(64vw, 40vh); flex: none; line-height: 0; background: none; border: 0; padding: 0; transform-origin: 50% 100%; animation: s3Bob 2.6s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.s3-bb img { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 10px rgba(30, 90, 50, .22)); pointer-events: none; }
.s3-bb.boing { animation: bdBoing .55s cubic-bezier(.2,1.6,.4,1); }
@keyframes s3Bob { 0%,100% { transform: translateY(0) rotate(-2deg) scale(1, 1); } 50% { transform: translateY(-3%) rotate(2deg) scale(1.01, 1.02); } }
.s3-go { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: clamp(30px, 8.6vw, 44px); color: #fff; background: linear-gradient(180deg, #FFA24A, #FF7A2F); padding: 14px 44px 16px; border-radius: 999px; border: 5px solid #fff; box-shadow: 0 7px 0 #D85A1E, 0 14px 24px rgba(216, 90, 30, .3); animation: todayPulse 2.4s ease-in-out infinite; }
.s3-go svg { width: .8em; height: .8em; fill: #fff; }
.s3-go:active, .s3-go.pressed { transform: translateY(5px); box-shadow: 0 2px 0 #D85A1E; animation: none; }
@media (orientation: landscape) {
  .s3-land { height: 52%; }
  .s3-wrap { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; align-items: center; justify-items: center; padding: max(16px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); gap: 8px 24px; }
  .s3-title { grid-column: 1; grid-row: 1; align-self: end; }
  .s3-go { grid-column: 1; grid-row: 2; margin-bottom: 4vh; }
  .s3-bb { grid-column: 2; grid-row: 1 / 3; width: min(40vw, 76vh); align-self: end; }
  .s3-title h1 { font-size: clamp(48px, 13vh, 96px); }
  .s3-sun { right: auto; left: 6%; top: 8%; width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .s3-bb, .s3-go { animation: none; } }
@media (orientation: portrait) {
  .s3-land { height: 62%; }
  .s3-wrap { justify-content: flex-start; padding-bottom: max(6vh, env(safe-area-inset-bottom)); }
  .s3-bb { margin-top: auto; width: min(62vw, 38vh); }
  .s3-go { margin-top: 2vh; }
}
.s3-bb { position: relative; }
.s3-bb::after { content: ""; position: absolute; left: 22%; right: 18%; bottom: -1%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 80, 40, .28), transparent); z-index: -1; }
.s3-bb { animation-name: s3Sway; }
@keyframes s3Sway { 0%,100% { transform: rotate(-2deg) scale(1, 1); } 50% { transform: rotate(2deg) scale(1.01, 1.025); } }
@media (orientation: portrait) { .s3-bb { width: min(74vw, 44vh); } .s3-title { margin-top: 2vh; } }
/* 10/13 시작 화면 글자: 둥글고 귀여운 주아체 + 흰 테두리(점토 장난감 느낌) */
.start3 .s3-brand, .start3 .s3-title h1, .start3 .s3-tag, .start3 .s3-go { font-family: "Jua", "Noto Sans KR", system-ui, sans-serif; font-weight: 400; }
.s3-title h1 { font-size: clamp(64px, 19vw, 120px); letter-spacing: 0; color: #2E9BF0; -webkit-text-stroke: 10px #fff; paint-order: stroke fill; text-shadow: 0 6px 0 rgba(40, 120, 200, .22), 0 10px 18px rgba(40, 120, 200, .18); }
.s3-title h1 em { color: #FF8A3D; }
.s3-brand { font-size: clamp(22px, 6vw, 30px); padding: 2px 20px 4px; background: #FFC93C; color: #7A4A00; box-shadow: 0 4px 0 #E3A41C; transform: rotate(-4deg); }
.s3-tag { font-size: clamp(17px, 4.8vw, 22px); color: #2F6DB0; font-weight: 400; background: rgba(255,255,255,.75); padding: 4px 16px; border-radius: 999px; }
.s3-go { font-size: clamp(34px, 9.6vw, 48px); padding: 10px 46px 12px; }
@media (orientation: landscape) { .s3-title h1 { font-size: clamp(54px, 15vh, 104px); -webkit-text-stroke-width: 8px; } }
/* 10/13 공룡 도트카드 */
.mode-card.dotcard { background: #E4EEFF !important; color: #1D4FA8; }
.mode-card.dotcard .mode-icon { background: #fff; color: #2E8BF0; }
.dotgame { gap: 12px; }
.dot-max { max-width: 520px; width: 100%; margin: 0 auto; background: #fff; border: 2px solid #DCE6F5; }
.dot-max .seg { color: var(--blue-deep); }
.dot-max .seg.on { background: var(--blue); color: #fff; }
.dot-max.off { visibility: hidden; }
.dot-stage { flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; }
.dot-card { position: relative; width: min(100cqw, 100cqh - 20px); aspect-ratio: 1; background: #fff; border-radius: 28px; box-shadow: 0 8px 22px rgba(10, 46, 110, .12); padding: 14px; color: var(--dc); }
.dot-card.pop { animation: dotPop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes dotPop { from { transform: scale(.94); opacity: .4; } }
.dot-svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.dot-num { position: absolute; left: 50%; bottom: -18px; translate: -50% 0; min-width: 84px; padding: 2px 18px; border-radius: 999px; background: var(--dc); color: #fff; font-family: "Jua", var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.2; text-align: center; opacity: 0; scale: .6; transition: opacity .15s, scale .25s cubic-bezier(.2,1.6,.4,1); box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.dot-card.show-num .dot-num { opacity: 1; scale: 1; }
.dot-foot { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding-top: 14px; }
.dot-q { margin: 0; font-family: "Jua", var(--font-display); font-size: 26px; color: var(--blue-deep); }
.dot-choices { display: flex; gap: 18px; }
.dot-ch { min-width: 116px; min-height: 76px; border-radius: 22px; background: #fff; border: 3px solid #DCE6F5; box-shadow: 0 5px 0 #DCE6F5; font-family: "Jua", var(--font-display); font-size: 42px; color: var(--blue-deep); }
.dot-ch.right { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 5px 0 var(--green-deep); }
.dot-ch.wrong { animation: shake .35s ease-in-out; background: #FFE7DE; border-color: #F5A788; }
@media (orientation: landscape) and (max-height: 600px) {
  .dotgame { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; gap: 8px 20px; }
  .dotgame .game-top { grid-column: 1 / 3; }
  .dot-max { grid-column: 2; grid-row: 2; width: 300px; }
  .dot-stage { grid-column: 1; grid-row: 2 / 4; }
  .dot-foot { grid-column: 2; grid-row: 3; }
  .dot-ch { min-width: 96px; min-height: 64px; font-size: 36px; }
}
.dot-max { grid-template-columns: repeat(4, 1fr); }
.dot-max .seg { white-space: nowrap; padding: 0 4px; }
.dot-card { background: linear-gradient(180deg, #FFFDF5, #FFF6E0); }
.dot-svg image { image-rendering: auto; }
/* 10/13 도트카드: 숫자는 카드 아래(그림과 안 겹치게), 카드 크기는 숫자 자리를 빼고 */
.dot-card { width: min(100cqw, 100cqh - 76px); margin-bottom: 76px; }
.dot-num { bottom: auto; top: calc(100% + 14px); }
@media (orientation: landscape) and (max-height: 600px) { .dot-card { width: min(100cqw, 100cqh - 64px); margin-bottom: 64px; } .dot-num { top: calc(100% + 8px); font-size: 34px; } }
/* 10/13 도트카드 2판: 차례로/섞어서, 두 장 비교 */
.dot-opts { display: grid; gap: 8px; max-width: 520px; width: 100%; margin: 0 auto; }
.dot-opts.off { visibility: hidden; }
.dot-max.off { visibility: visible; }
.dot-order { grid-template-columns: 1fr 1fr; background: #fff; border: 2px solid #DCE6F5; }
.dot-order .seg { color: var(--blue-deep); } .dot-order .seg.on { background: #FF8A3D; color: #fff; }
.dot-card .dot-num { background: #FF8A3D; }
.dot-pair { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; justify-items: center; }
.dot-pair .dot-pick { width: min(100%, 100cqh - 70px); aspect-ratio: 1; margin: 0; border: 4px solid transparent; cursor: pointer; padding: 10px; }
.dot-pick.right { border-color: var(--green); box-shadow: 0 0 0 6px rgba(46,173,107,.25), 0 8px 22px rgba(10,46,110,.12); }
.dot-pick.wrong { animation: shake .35s ease-in-out; }
.dot-pick .dot-num { top: calc(100% + 10px); font-size: 32px; }
.dot-sign { position: absolute; left: 50%; top: calc((min(50cqw - 7px, 100cqh - 70px)) / 2); translate: -50% -50%; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #FF6A2A; font-family: "Jua", var(--font-display); font-size: 40px; line-height: 1; box-shadow: 0 4px 12px rgba(10,46,110,.18); opacity: 0; scale: .4; transition: opacity .2s, scale .3s cubic-bezier(.2,1.6,.4,1); z-index: 2; }
.dot-sign.on { opacity: 1; scale: 1; }
.dot-ans { margin: 0; font-family: "Jua", var(--font-display); font-size: clamp(17px, 4.6vw, 22px); color: var(--blue-deep); text-align: center; line-height: 1.5; }
.dot-ans b { color: #FF6A2A; font-weight: 400; } .dot-ans em { font-style: normal; color: #2EAD6B; }
@media (orientation: landscape) and (max-height: 600px) {
  .dot-opts { grid-column: 2; grid-row: 2; width: 300px; }
  .dot-max { grid-column: auto; grid-row: auto; width: auto; }
  .dot-pair .dot-pick { width: min(100%, 100cqh - 56px); }
}
/* 카드 크게: 시작하면 고르는 칸을 치우고 카드가 남는 자리를 채움 */
.dot-opts.off { display: none; }
.dot-foot:empty { min-height: 0; padding: 0; }
.dot-stage { perspective: 1400px; }
.dot-card { transform-origin: 50% 100%; }
.dot-card.fall { animation: dotFall .28s cubic-bezier(.55,0,.9,.4) forwards; }
@keyframes dotFall { to { transform: rotateX(-88deg); opacity: .2; } }
.dot-card.pop { animation: dotRise .3s cubic-bezier(.2,1.2,.4,1); }
@keyframes dotRise { from { transform: rotateX(40deg) translateY(-4%); opacity: .3; } }
/* 10/13 카드 크기 하나로 통일 (--dS = JS가 계산) */
.dot-stage { display: flex; align-items: flex-start; justify-content: center; container-type: normal; }
.dot-stage > .dot-card, .dot-pair .dot-pick { width: var(--dS, 300px); height: var(--dS, 300px); margin: 0 0 58px; flex: none; }
.dot-pair { display: flex; flex-direction: column; align-items: center; gap: 0; width: auto; height: auto; }
.dot-stage.land .dot-pair { flex-direction: row; align-items: flex-start; }
.dot-pair .dot-sign { position: static; translate: none; flex: none; width: 54px; height: 54px; margin: -50px 0 -6px; }
.dot-stage.land .dot-pair .dot-sign { margin: calc(var(--dS) / 2 - 27px) 0 0; }
.dot-pair .dot-pick { margin-bottom: 58px; }
.dot-stage.land .dot-pair .dot-pick { margin-bottom: 0; }
.dot-pick .dot-num { top: calc(100% + 8px); }
.dot-pair .dot-sign { margin: -2px 0 8px; }
.dot-stage { align-items: center; }
.dot-stage .dot-pair { align-self: flex-start; }
/* 아래 칸 높이를 늘 같게 → 카드 크기가 처음부터 끝까지 같음 */
.dot-foot, .dot-foot:empty { height: 118px; min-height: 118px; padding: 6px 0 0; flex: none; justify-content: flex-start; }
.dot-ans { font-size: clamp(15px, 4.2vw, 20px); line-height: 1.45; }
@media (orientation: landscape) and (max-height: 600px) { .dot-foot, .dot-foot:empty { height: auto; min-height: 0; } }
/* 10/13 움직이는 빔빔(영상) — 코드 움직임은 끔 */
.buddy.anim img { animation: none !important; }
.s3-bb { animation: none; }
/* 10/13 메뉴 화면: 코드로 그린 풍경 + 둥근 글자 + 파스텔 칸 + 빔빔 친구 */
.home-main { background: linear-gradient(180deg, #EAF6FF 0%, #F6FBFF 60%, #FFFFFF 100%); }
.home-main .brand-name, .home-main .brand-sub { font-family: "Jua", var(--font-display); font-weight: 400; -webkit-text-stroke: 6px #fff; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(40,120,200,.15); }
.home-main .brand-name { color: #FF8A3D; }
.home-main .brand-sub { color: #2E9BF0; }
.hero.hero-drawn { background: linear-gradient(180deg, #A9DCFF 0%, #D2EEFF 55%, #EAF7FF 100%); box-shadow: 0 6px 0 #BFDDF5, 0 10px 22px rgba(40,110,180,.12); }
.hero-land { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; display: block; pointer-events: none; }
.hero-sun { position: absolute; top: 12%; right: 9%; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #FFF6B8, #FFD54A 70%); box-shadow: 0 0 0 10px rgba(255,228,120,.25); pointer-events: none; }
.hero-drawn .hero-text b { font-family: "Jua", var(--font-card); font-weight: 400; color: #1F5FB8; -webkit-text-stroke: 5px #fff; paint-order: stroke fill; }
.home-main .menu-sq { overflow: hidden; border-radius: 30px; isolation: isolate; }
.home-main .menu-sq b { font-family: "Jua", var(--font-display); text-shadow: 0 3px 0 rgba(0,0,0,.12); position: relative; z-index: 2; }
.home-main .menu-sq .menu-icon, .home-main .menu-sq .menu-num { position: relative; z-index: 2; }
.home-main .menu-sq .menu-num { position: absolute; }
.home-main .menu-sq.blue { background: linear-gradient(160deg, #6CB8FF, #3D8BF2); box-shadow: 0 7px 0 #2C6CC4; }
.home-main .menu-sq.green { background: linear-gradient(160deg, #74D9A0, #34B26E); box-shadow: 0 7px 0 #238A52; }
.home-main .menu-sq.navy { background: linear-gradient(160deg, #B3A4FF, #7B66E8); box-shadow: 0 7px 0 #5A47C2; }
.home-main .menu-sq.navy .menu-num { color: #7B66E8; }
.home-main .menu-sq.orange { background: linear-gradient(160deg, #FFC867, #FF9B2E); box-shadow: 0 7px 0 #D9741A; }
.menu-pal { position: absolute; right: -4%; bottom: -6%; width: 46%; height: auto; z-index: 1; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); transform-origin: 50% 100%; animation: palBob 3.2s ease-in-out infinite; }
.menu-sq:nth-child(2) .menu-pal { animation-delay: -.8s; } .menu-sq:nth-child(3) .menu-pal { animation-delay: -1.6s; } .menu-sq:nth-child(4) .menu-pal { animation-delay: -2.4s; width: 52%; }
@keyframes palBob { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-3%); } }
.home-main .menu-sq .menu-icon { background: rgba(255,255,255,.28); }
@media (prefers-reduced-motion: reduce) { .menu-pal { animation: none; } }
/* 메뉴 칸 배치: 친구는 위쪽 크게, 글자는 아래 한 줄 (겹치지 않게) */
.home-main .menu-sq { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 10px 10px 14px; gap: 0; }
.home-main .menu-sq .menu-icon { display: none; }
.home-main .menu-pal, .home-main .menu-sq:nth-child(4) .menu-pal { position: relative; right: auto; bottom: auto; width: auto; height: 62%; max-width: 92%; object-fit: contain; flex: 1 1 auto; min-height: 0; margin-bottom: 4px; }
.home-main .menu-sq b { font-size: clamp(22px, 6.6vw, 34px); white-space: nowrap; }
.home-main .brand-name, .home-main .brand-sub { font-size: clamp(24px, 7.4vw, 38px); -webkit-text-stroke-width: 5px; }
.home-main .brand { gap: 6px; min-width: 0; }
@media (orientation: landscape) and (max-height: 600px) { .home-main .menu-sq b { font-size: clamp(20px, 6vh, 30px); } }
/* 끝 화면: 빔빔 + 친구 나란히 */
.bd-endrow { display: flex; align-items: flex-end; justify-content: center; gap: 0; position: relative; z-index: 2; margin-bottom: -6px; }
.screen.end .bd-endrow .bd-end { margin: 0; }
.screen.end .bd-endrow .bd-end2 { width: clamp(84px, min(26vw, 20vh), 160px); margin-left: -10px; }
@media (orientation: landscape) and (max-height: 600px) { .screen.end .bd-endrow .bd-end2 { width: clamp(60px, 16vh, 90px); } }
/* 10/13 노래 카드: 빔빔과 친구들이 박자에 맞춰 */
.song-pals { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.song-pals .pal { position: absolute; bottom: 1%; width: min(22%, 150px); height: auto; transform-origin: 50% 100%; opacity: 0; scale: .2; translate: 0 30%; transition: opacity .25s, scale .35s cubic-bezier(.2,1.6,.4,1), translate .35s, left .45s cubic-bezier(.3,1.3,.5,1), right .45s; filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)); }
.song-pals .pal.on { opacity: 1; scale: 1; translate: 0 0; }
/* 줄마다: 두 친구가 양쪽 아래 구석 */
.pm-line .pal { left: calc(50% - min(11%, 75px)); }
.pm-line .pal.left { left: 1%; }
.pm-line .pal.right { left: auto; right: 1%; }
/* 전주·후렴·끝: 다섯이 아래에 나란히 모임 */
.pm-intro .pal, .pm-gather .pal, .pm-end .pal { width: min(19%, 140px); left: calc(50% + (var(--i) - 2) * min(19.5%, 142px) - min(9.5%, 70px)); }
.pm-end .pal { width: min(20%, 160px); left: calc(50% + (var(--i) - 2) * min(20%, 162px) - min(10%, 80px)); bottom: 3%; }
.pal.hop { animation: palHop .42s cubic-bezier(.3,0,.5,1); }
.pal.hop2 { animation: palHop2 .42s cubic-bezier(.3,0,.5,1); }
@keyframes palHop { 0% { transform: scale(1.08,.9); } 40% { transform: translateY(-16%) scale(.96,1.06) rotate(-4deg); } 75% { transform: translateY(0) scale(1.06,.94); } 100% { transform: none; } }
@keyframes palHop2 { 0% { transform: scale(1.08,.9); } 40% { transform: translateY(-16%) scale(.96,1.06) rotate(4deg); } 75% { transform: translateY(0) scale(1.06,.94); } 100% { transform: none; } }
.song-stage.paused .pal { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .pal.hop, .pal.hop2 { animation: none; } }
@media (orientation: landscape) and (max-height: 600px) {
  .pm-intro .pal, .pm-gather .pal, .pm-end .pal { width: min(9%, 17vh); left: calc(50% + (var(--i) - 2) * min(9.5%, 18vh) - min(4.5%, 8.5vh)); bottom: 0; }
  .pm-line .pal { width: min(16%, 32vh); }
}
.dot-pair .dot-pick { width: var(--dP, 240px); height: var(--dP, 240px); }
.dot-stage.land .dot-pair .dot-sign { margin: calc(var(--dP) / 2 - 27px) 0 0; }

/* 10/13 키우기 다듬기: 자라기 막대(지금 크기 → 다음 크기), 깨진 알 껍데기, 빔빔(알·잠) */
.pet-grow { display: flex; align-items: center; gap: 10px; justify-content: center; min-height: 52px; flex-wrap: nowrap; padding: 0 6px; }
.pet-grow i { width: auto; height: auto; opacity: 1; filter: none; }
.pg-dino { flex: none; width: 56px; height: 44px; display: grid; place-items: end center; }
.pg-dino img { width: calc(100% * var(--s, 1)); height: auto; object-fit: contain; }
.pg-dino.next img { filter: brightness(.25) opacity(.5); }
.pg-bar { position: relative; flex: 1; max-width: 360px; height: 30px; border-radius: 999px; background: #E3EAF5; box-shadow: inset 0 2px 4px rgba(10,31,68,.15); overflow: hidden; }
.pg-bar > b { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #FFD54A, #FFB020); border-radius: 999px; transition: width .6s ease; }
.pg-eggs { position: absolute; inset: 0; display: flex; justify-content: space-around; align-items: center; padding: 0 6px; }
.pg-eggs i { width: 18px; height: 22px; }
.pg-eggs i svg { width: 100%; height: 100%; }
.pg-eggs i:not(.on) svg path { fill: #fff; stroke: #C5D0E2; }
.pet-max { font-size: 30px; }
.pet-dino .pet-shell { position: absolute; left: 4%; bottom: 0; height: 30%; width: auto; aspect-ratio: 5 / 4; z-index: -1; }
.pet-dino.no .pet-shell, .pet-dino.eat .pet-shell { animation: none; }
.pet-shell svg { width: 100%; height: 100%; display: block; }
.pet-dino { z-index: 1; }
.pet-scene .bd-petsleep { position: absolute; right: 3%; bottom: 3%; width: min(26%, 130px); z-index: 2; pointer-events: none; }
.pet-scene .bd-petsleep img, .egg-stage .bd-petegg img, .sb-zz .buddy img { width: 100%; height: auto; display: block; }
.egg-stage .bd-petegg { position: absolute; left: 4%; bottom: 4%; width: min(30%, 150px); pointer-events: none; }
@media (orientation: landscape) and (max-height: 600px) {
  .pet-grow { min-height: 40px; }
  .pet-dino { width: auto; height: 74%; max-height: none; }
  .pg-dino { width: 44px; height: 34px; }
  .pg-bar { height: 24px; }
  .egg-stage .bd-petegg { width: min(18%, 26vh); }
  .pet-scene .bd-petsleep { width: min(16%, 28vh); }
}

/* 10/13 도트카드 숫자 크게: 큰 숫자 + 읽는 말(네 마리 / 사), 카드와 함께 바로 */
.dot-card .dot-num, .dot-pick .dot-num { display: flex; align-items: baseline; justify-content: center; gap: 12px; white-space: nowrap; min-width: 0; padding: 4px 26px 6px; font-size: 30px; line-height: 1.1; }
.dot-num i { font-style: normal; font-size: 64px; line-height: 1; }
.dot-num span { font-size: 34px; }
.dot-stage > .dot-card { margin-bottom: 92px; }
.dot-stage > .dot-card .dot-num { top: calc(100% + 10px); }
.dot-pair .dot-pick .dot-num { padding: 2px 18px 4px; gap: 8px; }
.dot-pair .dot-pick .dot-num i { font-size: 44px; }
.dot-pair .dot-pick .dot-num span { font-size: 26px; }
.dot-pair .dot-pick { margin-bottom: 70px; }
.dot-stage.land > .dot-card { margin-bottom: 0; }
.dot-stage.land > .dot-card .dot-num { top: 50%; left: calc(100% + 18px); translate: 0 -50%; flex-direction: column; align-items: center; gap: 2px; padding: 10px 22px 12px; border-radius: 28px; }
.dot-stage.land > .dot-card .dot-num i { font-size: 72px; }
.dot-q { font-size: 32px; }
.dot-ans { font-size: clamp(22px, 6.4vw, 28px); line-height: 1.35; }
.dot-say { grid-template-columns: 1fr 1fr; background: #fff; border: 2px solid #DCE6F5; }
.dot-say .seg { color: var(--blue-deep); } .dot-say .seg.on { background: #2EAD6B; color: #fff; }
.dot-ans { word-break: keep-all; }
@media (orientation: landscape) and (max-height: 600px) { .dot-ans { font-size: 21px; } .dot-q { font-size: 28px; } }
/* 세로 화면 두 장 비교: 숫자 띠를 카드 오른쪽에 세로로 */
.dot-stage:not(.land) .dot-pair .dot-pick { margin-bottom: 0; }
.dot-stage:not(.land) .dot-pair .dot-pick .dot-num { top: 50%; left: calc(100% + 10px); translate: 0 -50%; flex-direction: column; align-items: center; gap: 0; width: 96px; padding: 8px 6px 10px; border-radius: 22px; white-space: normal; }
.dot-stage:not(.land) .dot-pair .dot-pick .dot-num i { font-size: 46px; }
.dot-stage:not(.land) .dot-pair .dot-pick .dot-num span { font-size: 22px; text-align: center; word-break: keep-all; line-height: 1.15; }
.dot-stage:not(.land) .dot-pair { transform: translateX(-54px); }
/* 10/13 동화책 끝 화면: 책 안에 다 들어가게 — 왼쪽 자는 빔빔·친구, 오른쪽 끝!·단추 (책 크기 기준 %) */
.sb-end { flex-direction: row; gap: 5%; padding: 5% 6%; container-type: size; }
.sb-zz { height: 54%; display: flex; align-items: flex-end; gap: 2%; flex: none; }
.sb-zz .buddy { height: 100%; width: auto; animation: none; }
.sb-zz .buddy img { height: 100%; width: auto; display: block; }
.sb-zz .buddy + .buddy { height: 82%; }
.sb-endr { display: flex; flex-direction: column; align-items: center; gap: 5cqh; flex: none; }
.sb-end .sb-endr b { font-size: 20cqh; line-height: 1; }
.sb-end .sb-endr .big-btn { min-width: 0; width: 34cqw; height: 19cqh; min-height: 0; padding: 0 8px; font-size: 9cqh; border-radius: 999px; }
/* 10/13 동화책 크게: 책이 화면을 꽉 채우고(양옆은 넘기기 단추 자리만), 글은 책 안 아래쪽에 */
.sb-wrap { padding: 0 64px; }
.sb-box { position: relative; width: min(calc(100cqw - 128px), calc((100cqh - 6px) * 1.5)); aspect-ratio: 3 / 2; }
.sb-box .sb-stage { width: 100%; height: 100%; max-height: none; }
.sb-box .sb-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; margin: 0; max-width: none; min-height: 0; padding: 7% 7% 3.2%; border-radius: 0 0 14px 14px; background: linear-gradient(to top, rgba(12,8,4,.78), rgba(12,8,4,.5) 55%, rgba(12,8,4,0)); font-size: clamp(17px, 6.2cqh, 34px); line-height: 1.3; text-shadow: 0 2px 4px rgba(0,0,0,.7); pointer-events: auto; }
.sb-box .sb-text:empty { display: none; }
.sb-nav { width: 48px; height: 48px; }
.sb-nav.prev { left: 8px; } .sb-nav.next { right: 8px; }
.sb .game-top { padding: 8px; }
.sb .game-top .icon-btn { width: 48px; height: 48px; }
.sb-dots { top: 6px; }
.screen.sb { padding: 0; }
.sb-wrap { padding: 4px 64px; }
.sb-box { width: min(calc(100cqw - 128px), calc((100cqh - 8px) * 1.5)); }
/* 10/13 공룡 탑 쌓기 메뉴 칸 (예전 블록 쌓기 CSS는 백과사전 .bk-* 이름과 겹쳐서 지움) */
.mode-card.play.blockplay { background: linear-gradient(120deg, #4FC3E8, #3B6BFA 55%, #7A4FE0); color: #fff; border: 0; }
.mode-card.play.blockplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
/* 10/13 공룡 탑 쌓기 (블록 쌓기 바꿈) */
.screen.tower { display: flex; flex-direction: column; height: 100dvh; min-height: 0; overflow: hidden; }
.tw-stage { position: relative; flex: 1; min-height: 0; margin: 0 10px; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #8ED3FF 0%, #CFEFFF 55%, #F2FBFF 100%); box-shadow: inset 0 0 0 3px #fff, 0 6px 16px rgba(10,46,110,.14); touch-action: none; user-select: none; cursor: pointer; }
.tw-stage canvas { position: absolute; inset: 0; display: block; }
.tw-count { position: absolute; left: 50%; top: 12%; translate: -50% 0; padding: 6px 24px; border-radius: 999px; background: #FF8A3D; color: #fff; font-family: "Jua", var(--font-display); font-size: clamp(28px, 7vmin, 48px); box-shadow: 0 5px 0 rgba(0,0,0,.15); pointer-events: none; }
.tw-count:empty { display: none; }
.tw-count.pop { animation: dotPop .35s cubic-bezier(.2,1.6,.4,1); }
.tw-dots { display: flex; justify-content: center; gap: 10px; padding: 10px 0 12px; }
.tw-dots i { width: 30px; height: 30px; border-radius: 50%; background: #DCE6F5; transition: background .3s, transform .3s; }
.tw-dots i.on { background: #FFC21A; transform: scale(1.12); }
@media (orientation: landscape) and (max-height: 600px) {
  .screen.tower .game-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; pointer-events: none; }
  .screen.tower .game-top > * { pointer-events: auto; }
  .screen.tower .game-title { display: none; }
  .tw-stage { margin: 8px 70px 8px 76px; }
  .tw-dots { position: absolute; right: 14px; top: 50%; translate: 0 -50%; flex-direction: column; padding: 0; }
  .tw-dots i { width: 24px; height: 24px; }
}
/* 10/13 동화책 글은 책 안 위쪽(하늘 자리)에 — 아래쪽은 공룡이 서 있어서 가림. 맞히기 카드는 글 아래로 */
.sb-box .sb-text { top: 0; bottom: auto; padding: 3% 8% 7%; border-radius: 14px 14px 0 0; background: linear-gradient(to bottom, rgba(12,8,4,.72), rgba(12,8,4,.42) 60%, rgba(12,8,4,0)); }
.sb-box .sb-quiz { top: 27%; }
.sb-dots { top: auto; bottom: 4px; }
/* 10/13 동화책 화석 붓질: 진짜 발굴 붓이 손가락을 따라다님 + 모래 먼지 */
.sb-brush { overflow: visible; background: none; box-shadow: none; }
.sb-pit { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.3); background: #CDB794; }
.sb-tool { position: absolute; left: 62%; top: 58%; width: 16%; aspect-ratio: 60 / 150; transform: translate(-50%, -97%) rotate(var(--tilt, -24deg)); transform-origin: 50% 97%; pointer-events: none; z-index: 5; filter: drop-shadow(3px 5px 3px rgba(60,35,10,.35)); transition: opacity .3s; }
.sb-tool svg { width: 100%; height: 100%; display: block; }
.sb-tool.idle { animation: sbBrushHint 1.2s ease-in-out infinite; }
.sb-tool.gone { opacity: 0; }
@keyframes sbBrushHint { 0%, 100% { transform: translate(-50%, -97%) rotate(-30deg); } 50% { transform: translate(-20%, -97%) rotate(-10deg); } }
.sb-dust { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #E9C98E; pointer-events: none; z-index: 4; animation: digDust .5s ease-out forwards; }
/* 동화책 숨바꼭질: 덤불 톡 → 흔들흔들 열리며 숨은 친구 */
.sb-hide { position: absolute; height: var(--h, 30%); aspect-ratio: 1; transform: translate(-50%, -95%); z-index: 3; }
.sb-hide .who { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; transform: translateX(-50%) translateY(30%) scale(.7); opacity: 0; transition: transform .45s cubic-bezier(.2,1.5,.4,1), opacity .3s; pointer-events: none; }
.sb-hide .who.flip { transform: translateX(-50%) translateY(30%) scale(-.7, .7); }
.sb-hide.open .who { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
.sb-hide.open .who.flip { transform: translateX(-50%) translateY(0) scale(-1, 1); }
.sb-hide .bush { position: absolute; left: -10%; right: -10%; bottom: -4%; height: 80%; border: 0; background: none; padding: 0; cursor: pointer; animation: sbBushWiggle 2.4s ease-in-out infinite; transition: transform .5s ease, opacity .5s; -webkit-tap-highlight-color: transparent; }
.sb-hide .bush i { position: absolute; bottom: 0; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 35% 30%, #7BC86A, #3E8E3A 60%, #2B6B2A); box-shadow: inset 0 -6px 0 rgba(0,0,0,.15); }
.sb-hide .bush i:nth-child(1) { left: 0; width: 52%; height: 72%; }
.sb-hide .bush i:nth-child(2) { left: 26%; width: 50%; height: 100%; }
.sb-hide .bush i:nth-child(3) { right: 0; width: 50%; height: 78%; }
.sb-hide.open .bush { animation: none; transform: translateY(40%) scale(.85); opacity: 0; pointer-events: none; }
@keyframes sbBushWiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-3deg); } 90% { transform: rotate(3deg); } 95% { transform: rotate(-2deg); } }
/* 다 읽은 책: 금색 별 스티커 */
.sb-read { position: absolute; bottom: -6px; right: -6px; z-index: 3; width: 30%; max-width: 46px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FFF3A6, #FFC93C 55%, #F0A21B); color: #fff; font-style: normal; font-size: clamp(16px, 4.6vw, 26px); line-height: 1; text-shadow: 0 1px 0 rgba(160,90,0,.6); box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 0 0 3px #fff; transform: rotate(12deg); pointer-events: none; }
/* 동화책 장면 효과 */
.sb-stage > .sb-bg { animation: sbFade .45s ease, sbKen 18s ease-in-out .45s infinite alternate; transform-origin: 50% 100%; }
@keyframes sbKen { from { transform: scale(1); } to { transform: scale(1.035); } }
.sb-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.sb-fx i { position: absolute; width: calc(14px * var(--s)); height: calc(14px * var(--s)); animation: var(--k) var(--d) linear var(--dl) infinite; opacity: 0; }
.fx-leaf i { --k: fxLeaf; background: #8FC45A; border-radius: 0 80% 0 80%; }
.fx-leaf i:nth-child(3n) { background: #E8B84A; }
@keyframes fxLeaf { 0% { transform: translate(0, -30vh) rotate(0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(6vw, 10vh) rotate(160deg); } 90% { opacity: .9; } 100% { transform: translate(-2vw, 55vh) rotate(340deg); opacity: 0; } }
.fx-bub i { --k: fxBub; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); background: rgba(255,255,255,.15); top: auto !important; bottom: -20px; }
@keyframes fxBub { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .8; } 100% { transform: translate(2vw, -40vh); opacity: 0; } }
.fx-fly i { --k: fxFly; width: calc(18px * var(--s)); height: calc(14px * var(--s)); background: radial-gradient(circle at 25% 50%, #FFB5D0 40%, transparent 42%), radial-gradient(circle at 75% 50%, #FFD36E 40%, transparent 42%); }
@keyframes fxFly { 0% { transform: translate(0,0) scaleX(1); opacity: 0; } 10% { opacity: 1; } 25% { transform: translate(8vw,-4vh) scaleX(.3); } 50% { transform: translate(14vw,2vh) scaleX(1); } 75% { transform: translate(6vw,-6vh) scaleX(.3); } 90% { opacity: 1; } 100% { transform: translate(-2vw,0) scaleX(1); opacity: 0; } }
.fx-seed i { --k: fxSeed; width: calc(8px * var(--s)); height: calc(8px * var(--s)); border-radius: 50%; background: rgba(255,255,240,.95); box-shadow: 0 0 6px #fff; }
@keyframes fxSeed { 0% { transform: translate(-6vw, 0); opacity: 0; } 20% { opacity: .9; } 100% { transform: translate(20vw, -12vh); opacity: 0; } }
.fx-glow i, .fx-star i { --k: fxGlow; width: calc(8px * var(--s)); height: calc(8px * var(--s)); border-radius: 50%; background: #FFF6A0; box-shadow: 0 0 10px 3px rgba(255,240,120,.8); }
.fx-star i { --k: fxTwinkle; background: #fff; box-shadow: 0 0 8px 2px rgba(255,255,255,.9); }
@keyframes fxGlow { 0%,100% { transform: translate(0,0); opacity: 0; } 30% { opacity: 1; } 50% { transform: translate(3vw,-3vh); opacity: .3; } 70% { opacity: 1; transform: translate(5vw,1vh); } }
@keyframes fxTwinkle { 0%,100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }
.sb-half .sb-fx { display: none; }
/* 아무 공룡이나 톡 */
.sb-layer .sb-actor.pokable { pointer-events: auto; cursor: pointer; }
.sb-actor.poked .sb-breath { animation: sbPoke .55s cubic-bezier(.3,1.6,.5,1) !important; }
@keyframes sbPoke { 0% { transform: translateY(0) scale(1,1); } 25% { transform: translateY(0) scale(1.08,.9); } 55% { transform: translateY(-18%) scale(.95,1.06); } 100% { transform: translateY(0) scale(1,1); } }
.sb-spark { position: absolute; width: 0; height: 0; z-index: 6; pointer-events: none; }
.sb-spark i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; background: #FFD84A; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: sbSpark .8s ease-out forwards; transform: rotate(var(--a)); }
@keyframes sbSpark { 0% { transform: rotate(var(--a)) translateY(0) scale(.4); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-70px) scale(1.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sb-fx, .sb-stage > .sb-bg { animation: none; } .sb-fx { display: none; } }
/* 표지 주인공: 잘리지 않게 통째로 */
.sb-book .sb-cv-star { object-fit: contain; width: 92%; height: 72%; max-height: none; object-position: 50% 100%; }
/* ---------- 공룡 섬 탐험 ---------- */
.mode-card.play.questplay { background: linear-gradient(120deg, #3FC1C9, #2E8BD8 60%, #5B5FD6); color: #fff; border: 0; }
.mode-card.play.questplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
.qm { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; background: #F3F8FF; }
.qm-sea { position: relative; flex: 1; margin: 4px 12px 8px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.5) 0 2px, transparent 3px) 0 0 / 46px 46px, linear-gradient(180deg, #7FD4F0, #3FA9DE); box-shadow: inset 0 0 0 4px rgba(255,255,255,.6); }
.qm-sea::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(ellipse at 50% 120%, transparent 0 22px, rgba(255,255,255,.12) 23px 25px); animation: qmWave 6s linear infinite; }
@keyframes qmWave { to { transform: translateY(-25px); } }
.qm-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.qm-path polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.qm-path .p { stroke: rgba(255,255,255,.75); stroke-width: 5; stroke-dasharray: 2 12; }
.qm-path .l { stroke: #FFD84A; stroke-width: 6; stroke-dasharray: 2 12; }
.qm-isl { --x: 50%; --y: 50%; position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: min(30vw, 18vh, 150px); border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; -webkit-tap-highlight-color: transparent; }
.qm-isl:nth-of-type(1) { --x: 28%; --y: 84%; } .qm-isl:nth-of-type(2) { --x: 70%; --y: 66%; } .qm-isl:nth-of-type(3) { --x: 30%; --y: 47%; } .qm-isl:nth-of-type(4) { --x: 70%; --y: 29%; } .qm-isl:nth-of-type(5) { --x: 38%; --y: 12%; }
@media (orientation: landscape) {
  .qm-isl { width: min(17vw, 30vh, 150px); }
  .qm-isl:nth-of-type(1) { --x: 11%; --y: 68%; } .qm-isl:nth-of-type(2) { --x: 30%; --y: 32%; } .qm-isl:nth-of-type(3) { --x: 50%; --y: 66%; } .qm-isl:nth-of-type(4) { --x: 70%; --y: 32%; } .qm-isl:nth-of-type(5) { --x: 89%; --y: 64%; }
}
.qm-land { position: relative; width: 100%; aspect-ratio: 1.5; display: grid; place-items: end center; }
.qm-land::before { content: ""; position: absolute; left: 2%; right: 2%; bottom: 0; height: 44%; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #FBE7B5 0 58%, #E8C47E 60%); box-shadow: 0 0 0 5px rgba(255,255,255,.35), 0 8px 0 rgba(0,70,130,.22); }
.qm-land::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 14%; height: 34%; border-radius: 50% 50% 46% 46%; background: radial-gradient(ellipse at 45% 30%, #9BDB7E, #5DB15A 70%); }
.qm-isl:nth-of-type(5) .qm-land::after { background: radial-gradient(ellipse at 45% 30%, #E7A27A, #B9673F 70%); }
.qm-isl:nth-of-type(4) .qm-land::after { background: radial-gradient(ellipse at 45% 30%, #C9E27A, #8DBB46 70%); }
.qm-land img { position: relative; z-index: 1; width: 86%; height: 82%; object-fit: contain; object-position: 50% 100%; margin-bottom: 16%; filter: drop-shadow(0 3px 2px rgba(0,0,0,.25)); }
.qm-isl > b { position: relative; z-index: 2; margin-top: -4px; background: #fff; color: #17325C; border-radius: 999px; padding: 3px 10px; font-size: clamp(12px, 3.4vw, 16px); white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.qm-isl.lock .qm-land img { filter: brightness(0) opacity(.55); }
.qm-isl.lock > b { color: #7A8AA3; }
.qm-isl.now .qm-land { animation: qmBob 1.6s ease-in-out infinite; }
@keyframes qmBob { 50% { transform: translateY(-6px) scale(1.04); } }
.qm-isl.nope { animation: qmNope .4s; }
@keyframes qmNope { 25% { transform: translate(-54%, -50%); } 75% { transform: translate(-46%, -50%); } }
.qm-flag { position: absolute; top: -4%; right: 4%; width: 30%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-style: normal; color: #fff; background: radial-gradient(circle at 35% 30%, #FFF3A6, #FFC93C 55%, #F0A21B); box-shadow: 0 0 0 3px #fff; font-size: clamp(14px, 3.6vw, 22px); }
.qm-lock { position: absolute; top: 0; right: 6%; z-index: 2; font-style: normal; font-size: clamp(14px, 4vw, 22px); }
.qm-me { position: absolute; width: 58%; left: -30%; bottom: 18%; animation: qmBob 1.2s ease-in-out infinite; pointer-events: none; }
.qm-pals { display: flex; gap: 8px; justify-content: center; align-items: center; padding: 0 12px 12px; }
.qm-pal { width: min(14vw, 8vh, 64px); aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #B8C4D6; font-size: 22px; box-shadow: 0 3px 0 rgba(0,0,0,.08); overflow: hidden; }
.qm-pal.got { background: #FFF3C4; }
.qm-pal img { width: 90%; height: 90%; object-fit: contain; }
.qm-reset { border: 0; border-radius: 999px; background: #fff; color: #17325C; padding: 8px 14px; font: inherit; }
.qm-win { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(10,30,60,.45); animation: sbFade .3s; }
.qm-win-in { position: relative; background: #fff; border-radius: 28px; padding: 18px 26px 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 86vw; }
.qm-win-in img { width: min(46vw, 40vh, 240px); animation: qmPop .6s cubic-bezier(.3,1.6,.5,1); }
.qm-win-in b { font-size: clamp(20px, 5vw, 28px); color: #17325C; }
@keyframes qmPop { from { transform: scale(.2); opacity: 0; } }
.qs-pal { background: #FFF3C4 !important; overflow: hidden; }
.qs-pal img { width: 100%; height: 100%; object-fit: contain; }
@media (orientation: landscape) and (max-height: 500px) { .qm-pals { padding-bottom: 6px; } .qm-pal { width: 40px; } }
/* 키우기: 목욕 · 공놀이 */
.pet-btn.bathb { background: linear-gradient(120deg, #6FD3F5, #2F8FE0); }
.pet-btn.ballb { background: linear-gradient(120deg, #9BE36B, #2FB36A); }
.pet-btn.bathb.done { box-shadow: 0 0 0 4px #FFD54A, 0 5px 12px rgba(10,31,68,.25); }
.pet-scene.bathing .pet-dino { cursor: grab; }
.pet-scene.bathing::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(180deg, rgba(160,225,255,0), rgba(140,215,255,.75)); pointer-events: none; z-index: 1; }
.pet-soap { position: absolute; width: calc(34px * var(--s)); height: calc(34px * var(--s)); margin: calc(-17px * var(--s)); border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 0 18%, rgba(255,255,255,.75) 22%, rgba(200,235,255,.55) 60%, rgba(255,190,240,.45)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.9); animation: petSoapIn .3s cubic-bezier(.3,1.6,.5,1); pointer-events: none; z-index: 4; }
.pet-soap.pop { animation: petSoapPop .45s forwards; }
@keyframes petSoapIn { from { transform: scale(0); } }
@keyframes petSoapPop { to { transform: scale(1.6); opacity: 0; } }
.pet-scene.rinse::before { content: ""; position: absolute; inset: -20% 0 0; z-index: 5; pointer-events: none; background: repeating-linear-gradient(100deg, transparent 0 18px, rgba(120,200,255,.55) 19px 21px, transparent 22px 40px); animation: petRain .35s linear infinite; }
@keyframes petRain { from { transform: translateY(-40px); } to { transform: translateY(0); } }
.pet-dino.shiny { filter: brightness(1.12) saturate(1.15) drop-shadow(0 0 14px rgba(255,255,200,.9)); transition: filter .3s; }
.pet-ball { position: absolute; z-index: 6; width: min(15vw, 15vh, 76px); aspect-ratio: 1; margin: calc(min(15vw, 15vh, 76px) / -2); border-radius: 50%; border: 0; padding: 0;
  background: radial-gradient(circle at 34% 30%, #fff 0 10%, transparent 12%), conic-gradient(#FF5A5A 0 25%, #FFD84A 0 50%, #4FB7FF 0 75%, #7BD66B 0); box-shadow: 0 6px 10px rgba(0,0,0,.25), inset -6px -8px 0 rgba(0,0,0,.12); animation: petBallBob 1s ease-in-out infinite; transition: left .5s cubic-bezier(.4,0,.6,1), top .5s cubic-bezier(.2,-0.6,.6,1); }
.pet-ball.fly { animation: petBallSpin .5s linear; }
@keyframes petBallBob { 50% { transform: translateY(-14px); } }
@keyframes petBallSpin { to { transform: rotate(540deg) scale(.7); } }
@media (orientation: landscape) { .pet-bar .pet-btn { width: 52px; height: 52px; } .pet-bar .pet-btn svg { width: 28px; height: 28px; } .pet-bar { gap: 8px; } }
/* ---------- 공룡 달리기 ---------- */
.mode-card.play.runplay { background: linear-gradient(120deg, #FFC14D, #FF7A45); color: #fff; border: 0; }
.mode-card.play.runplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
.rn-picks { flex: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 16px; padding: 12px; }
.rn-pk { width: min(42vw, 30vh, 220px); border: 0; border-radius: 24px; background: #fff; padding: 12px 10px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 5px 0 rgba(10,31,68,.12); }
.rn-pk img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.rn-pk b { color: #17325C; font-size: clamp(14px, 3.8vw, 18px); }
.run .rn-stage { position: relative; flex: 1; margin: 0 10px 10px; border-radius: 20px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.rn-stage canvas { position: absolute; inset: 0; display: block; }
.rn-eggs { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; background: rgba(255,255,255,.75); border-radius: 999px; padding: 5px 10px; pointer-events: none; }
.rn-eggs i { width: clamp(16px, 4.6vw, 24px); opacity: .3; filter: grayscale(1); transition: .25s; }
.rn-eggs i.on { opacity: 1; filter: none; transform: scale(1.15); }
.rn-eggs svg { width: 100%; display: block; }
.rn-tap { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); background: #fff; color: #FF7A45; font-size: clamp(22px, 6vw, 34px); border-radius: 999px; padding: 8px 22px; box-shadow: 0 5px 0 rgba(0,0,0,.12); animation: qmBob 1s ease-in-out infinite; pointer-events: none; }
.rn-tap.gone { display: none; }
.screen.game.run { display: flex; flex-direction: column; height: 100dvh; }
.screen.game.run-pick { display: flex; flex-direction: column; height: 100dvh; }
@media (orientation: portrait) { .run .rn-stage { flex: none; height: min(calc(100dvh - 100px), 118vw); margin: auto 10px; } }
.rn-pk { min-width: 120px; }
@media (orientation: landscape) { .rn-pk { width: min(26vw, 52vh, 240px); } }
/* ---------- 공룡 식당 ---------- */
.mode-card.play.dinerplay { background: linear-gradient(120deg, #FF8FA3, #E8505B); color: #fff; border: 0; }
.mode-card.play.dinerplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
.screen.game.diner { display: flex; flex-direction: column; height: 100dvh; }
.dn-stage { position: relative; flex: 1; margin: 0 10px 6px; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #FFF4DC 0 62%, #F1D3A6 62%); }
.dn-awning { position: absolute; left: 0; right: 0; top: 0; height: 13%; background: repeating-linear-gradient(90deg, #FF7B7B 0 40px, #fff 40px 80px); border-bottom-left-radius: 50% 30%; border-bottom-right-radius: 50% 30%; box-shadow: 0 4px 0 rgba(0,0,0,.08); }
.dn-guest { position: absolute; left: 50%; bottom: 36%; width: min(70%, 52vh); transform: translateX(150%); display: flex; flex-direction: column; align-items: center; }
.dn-guest img { width: 100%; max-height: 42vh; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 6px 4px rgba(0,0,0,.2)); }
.dn-guest.in { animation: dnIn .7s cubic-bezier(.3,1.3,.5,1) forwards; }
.dn-guest.out { animation: dnOut .6s ease-in forwards; }
.dn-guest.eat img { animation: dnEat .25s ease-in-out 5; transform-origin: 50% 100%; }
.dn-guest.no img { animation: dnNo .45s ease-in-out; }
@keyframes dnIn { from { transform: translateX(150%); } to { transform: translateX(-50%); } }
@keyframes dnOut { from { transform: translateX(-50%); } to { transform: translateX(-260%); } }
@keyframes dnEat { 50% { transform: scale(1.04, .95); } }
@keyframes dnNo { 25% { transform: translateX(-4%) rotate(-3deg); } 75% { transform: translateX(4%) rotate(3deg); } }
.dn-name { margin-top: 4px; background: #fff; color: #17325C; border-radius: 999px; padding: 3px 12px; font-size: clamp(14px, 3.8vw, 20px); box-shadow: 0 2px 0 rgba(0,0,0,.1); }
.dn-counter { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, #C98E52, #A86F3C); border-top: 8px solid #E2B07A; }
.dn-plates { position: absolute; left: 0; right: 0; bottom: 4%; display: flex; justify-content: center; gap: 4%; }
.dn-plate { width: min(26vw, 18vh, 130px); aspect-ratio: 1; border-radius: 50%; border: 0; background: radial-gradient(circle, #fff 0 58%, #E9EEF5 60% 66%, #fff 68%); box-shadow: 0 6px 0 rgba(0,0,0,.18); display: grid; place-items: center; padding: 10%; transition: transform .2s, opacity .3s; }
.dn-plate img, .dn-plate svg { width: 100%; height: 100%; object-fit: contain; }
.dn-plate:active { transform: scale(.94); }
.dn-plate.fade { opacity: .35; }
.dn-plate.pick { animation: dnPick .5s; }
@keyframes dnPick { 50% { transform: translateY(-40%) scale(.8); } }
.dn-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.dn-dots { margin-bottom: 8px; }
@media (orientation: landscape) {
  .dn-guest { bottom: 30%; width: min(40%, 60vh); }
  .dn-guest img { max-height: 46vh; }
  .dn-plate { width: min(16vw, 24vh, 120px); }
  .dn-counter { height: 34%; }
}
.dn-plate { position: relative; padding: 0; }
.dn-plate img, .dn-plate svg { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; object-fit: contain; transform: scale(1.25); }
@media (orientation: landscape) {
  .dn-counter { height: 36%; }
  .dn-plates { bottom: 3%; }
  .dn-plate { width: min(14vw, 26vh, 110px); }
  .dn-guest { bottom: 37%; }
  .dn-guest img { max-height: calc(48vh); }
}
.dn-plate { overflow: hidden; }
.dn-plate img, .dn-plate svg { left: 16%; top: 16%; width: 68%; height: 68%; transform: none; mix-blend-mode: multiply; }
@media (orientation: landscape) { .dn-guest img { max-height: calc(48vh - 56px); } .dn-guest { bottom: 39%; } }
@media (orientation: portrait) { .dn-guest img { max-height: 36vh; } }
/* 메뉴 담당 친구 · 놀이 화면 구경하는 친구 */
.sec-top .bd-sec { width: 58px; margin: -12px 0 -14px 2px; flex: none; cursor: pointer; }
.sec-top .bd-sec img { width: 100%; display: block; }
.game-top .topbar-spacer { position: relative; }
.bd-peek { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 50px; cursor: pointer; animation: bdPeekIn .5s cubic-bezier(.3,1.5,.5,1) both; }
.bd-peek img { width: 100%; display: block; }
@keyframes bdPeekIn { from { transform: translateY(10%) scale(.3); opacity: 0; } }
@media (orientation: landscape) and (max-height: 500px) { .bd-peek { width: 42px; } .sec-top .bd-sec { width: 46px; } }
/* 목욕: 욕조 + 문지르기 안내 비누 (파란 띠 대신) */
.pet-scene.bathing::after { display: none; }
.pet-tub { position: absolute; left: 50%; bottom: 4%; width: 78%; height: 22%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, #FFFFFF, #E6EEF7); border-radius: 18px 18px 46% 46% / 18px 18px 60% 60%; box-shadow: inset 0 10px 0 #9BDCF7, 0 6px 0 rgba(0,0,0,.12); animation: petTubIn .4s cubic-bezier(.3,1.4,.5,1); }
.pet-tub i { position: absolute; top: -10%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 0 20%, rgba(255,255,255,.85) 24%, rgba(205,238,255,.8)); }
.pet-tub i:nth-child(1) { left: 2%; } .pet-tub i:nth-child(2) { left: 20%; top: -18%; width: 26%; } .pet-tub i:nth-child(3) { left: 42%; } .pet-tub i:nth-child(4) { left: 60%; top: -16%; width: 24%; } .pet-tub i:nth-child(5) { left: 78%; }
@keyframes petTubIn { from { transform: translate(-50%, 40%); opacity: 0; } }
.pet-sponge { position: absolute; left: 40%; top: 58%; z-index: 6; width: 64px; height: 42px; border-radius: 14px; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7) 0 6px, transparent 7px) 0 0 / 16px 14px, linear-gradient(135deg, #FFE36E, #FFB938); box-shadow: 0 5px 0 rgba(0,0,0,.15); animation: petSponge 1.4s ease-in-out infinite; }
@keyframes petSponge { 0%,100% { transform: translateX(-60%) rotate(-12deg); } 50% { transform: translateX(60%) rotate(12deg); } }
.pet-tub { width: 62%; height: 11%; bottom: 3%; }
.pet-tub i { top: -40%; width: 16%; }
.pet-tub i:nth-child(2), .pet-tub i:nth-child(4) { top: -55%; width: 18%; }
/* 키우기: 혼자 움직이기 */
.pet-dino { --face: 1; transition: transform .5s cubic-bezier(.2,1.3,.4,1), left 1.6s ease-in-out; }
.pet-dino > .art-img, .pet-dino > img { transform: scaleX(var(--face)); transition: transform .3s; transform-origin: 50% 100%; }
.pet-dino.walk > .art-img, .pet-dino.walk > img { animation: petWalk .32s ease-in-out 5; }
.pet-dino.sniff > .art-img, .pet-dino.sniff > img { animation: petSniff 1.4s ease-in-out; }
.pet-dino.look > .art-img, .pet-dino.look > img { animation: petLook 1.6s ease-in-out; }
.pet-dino.roar > .art-img, .pet-dino.roar > img { animation: petRoar 1s ease-in-out; }
@keyframes petWalk { 50% { transform: scaleX(var(--face)) translateY(-4%) rotate(calc(var(--face) * -2deg)); } }
@keyframes petSniff { 30%,70% { transform: scaleX(var(--face)) rotate(calc(var(--face) * 6deg)); } }
@keyframes petLook { 25%,45% { transform: scaleX(calc(var(--face) * -1)); } 70% { transform: scaleX(var(--face)); } }
@keyframes petRoar { 20% { transform: scaleX(var(--face)) rotate(calc(var(--face) * -7deg)) scale(1.04); } 40%,60% { transform: scaleX(var(--face)) rotate(calc(var(--face) * -7deg)) scale(1.06) translateX(1%); } 50% { transform: scaleX(var(--face)) rotate(calc(var(--face) * -7deg)) scale(1.06) translateX(-1%); } }
.pet-think { position: absolute; bottom: 62%; transform: translateX(-10%); z-index: 4; width: min(22vw, 16vh, 96px); aspect-ratio: 1; border: 0; padding: 12%; border-radius: 50%; background: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.12); animation: petThink .5s cubic-bezier(.3,1.5,.5,1), qmBob 1.4s ease-in-out .5s infinite; }
.pet-think::after { content: ""; position: absolute; left: 6%; bottom: -12%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.pet-think img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
@keyframes petThink { from { transform: translateX(-10%) scale(0); } }
/* 시작 화면: 빔빔 인사 영상 (10/13 사용자 영상) */
.s3-bb.s3-vid { animation: none; aspect-ratio: 16 / 10; border-radius: 28px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 12px 26px rgba(30, 90, 50, .28); background: #CFE9C4; }
.s3-bb.s3-vid::after { display: none; }
.s3-bb.s3-vid video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; pointer-events: none; }
.s3-bb.s3-vid.boing { animation: bdBoing .55s cubic-bezier(.2,1.6,.4,1); }
@media (orientation: portrait) { .s3-bb.s3-vid { width: min(86vw, 52vh); } }
@media (orientation: landscape) { .s3-bb.s3-vid { width: min(46vw, 70vh); align-self: center; } }
/* 시작 화면: 배경 지운 빔빔 영상 */
.s3-bb.s3-cut { aspect-ratio: 620 / 580; border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; animation: none; }
.s3-bb.s3-cut video, .s3-bb.s3-cut img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; filter: drop-shadow(0 12px 10px rgba(30, 90, 50, .22)); }
@media (orientation: portrait) { .s3-bb.s3-cut { width: min(80vw, 46vh); } }
@media (orientation: landscape) { .s3-bb.s3-cut { width: min(44vw, 74vh); align-self: end; } }
/* 영상 아래 소개글 (빔빔 자기소개) */
.video-layer.has-desc { flex-direction: column; justify-content: flex-start; padding-top: max(56px, env(safe-area-inset-top)); overflow-y: auto; }
.video-layer.has-desc video { height: auto; max-height: 46vh; flex: none; }
.video-layer.has-desc .video-name { position: static; transform: none; margin: 12px auto 4px; }
.video-desc { color: #fff; text-align: left; padding: 6px 22px 28px; max-width: 520px; width: 100%; box-sizing: border-box; font-size: clamp(16px, 4.4vw, 20px); line-height: 1.55; }
.video-desc p { margin: 0 0 6px; }
.video-desc b { color: #FFD84A; font-weight: normal; }
@media (orientation: landscape) {
  .video-layer.has-desc { flex-direction: row; align-items: center; justify-content: center; padding: 0 12px; gap: 14px; }
  .video-layer.has-desc video { width: 62vw; max-height: 92vh; }
  .video-layer.has-desc .video-name { display: none; }
  .video-desc { width: 34vw; padding: 8px 0; font-size: clamp(13px, 3.6vh, 17px); }
}
.video-layer.has-desc .video-name { font-size: clamp(22px, 6vw, 32px); padding: 8px 20px; box-shadow: 0 5px 0 rgba(0,0,0,.25); }
/* 화석 발굴: 가로 화면에서 모래판이 화면 밖으로 나가지 않게 (10/14 점검) */
@media (orientation: landscape) {
  .digs .dig-pit { width: min(92vw, 560px, calc((100dvh - 170px) * 4 / 3)); }
  .digs .dig-stage { gap: 4px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .digs .game-hint { font-size: 18px; margin: 0 0 2px; }
  .digs .dig-pit { width: min(92vw, 560px, calc((100dvh - 190px) * 4 / 3)); }
  .digs .dig-stage { align-content: start; padding-top: 6px; }
}
/* ---------- 베타: 처음 안내 · 부모님 안내 ---------- */
.parent-btn { font: 800 20px/1 Georgia, serif; font-style: italic; color: #17325C; }
.guide-ov { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(10,30,60,.5); animation: sbFade .25s; }
.guide-ov.out { opacity: 0; transition: opacity .25s; }
.guide-card { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: #fff; border-radius: 26px; padding: 54px 20px 18px; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.guide-bb { position: absolute; left: 50%; top: -46px; width: 96px; transform: translateX(-50%); }
.guide-card h3 { margin: 0 0 12px; font-size: 22px; color: #17325C; }
.guide-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.guide-steps li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #EEF4FF; color: #17325C; font-size: 16px; }
.guide-steps li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #2E6BE6; color: #fff; font-size: 14px; flex: none; }
.guide-steps li.green span { background: #18A46A; } .guide-steps li.navy span { background: #22336B; } .guide-steps li.orange span { background: #F08A24; }
.guide-tip { margin: 6px 0 4px; font-size: 15px; color: #445; }
.pg-install { background: #F6F8FC; border-radius: 14px; padding: 8px 12px; margin: 0 0 14px; text-align: left; font-size: 14px; color: #334; }
.pg-install p { margin: 4px 0; }
.guide-card .big-btn { width: 100%; }
@media (orientation: landscape) and (max-height: 600px) {
  .guide-card { width: min(640px, 100%); padding-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; text-align: left; }
  .guide-bb { display: none; }
  .guide-card h3, .guide-card .big-btn { grid-column: 1 / -1; }
  .guide-steps { grid-template-columns: 1fr; }
}
.parent-pg { display: flex; flex-direction: column; min-height: 100dvh; }
.pg-body { width: min(620px, 100%); margin: 0 auto; padding: 4px 16px 28px; box-sizing: border-box; }
.pg-body section { background: #fff; border-radius: 18px; padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 3px 0 rgba(10,31,68,.06); }
.pg-body h4 { margin: 0 0 8px; font-size: 17px; color: #17325C; }
.pg-body p { margin: 4px 0; font-size: 15px; line-height: 1.55; color: #334; }
.pg-body .pg-install { margin: 0; }
.pg-body .big-btn { display: block; width: 100%; text-align: center; text-decoration: none; }
.pg-ver { text-align: center; color: #99A; font-size: 13px; }
.parent-link { display: block; margin: 14px auto 8px; border: 0; background: none; color: #7A8AA3; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 6px 12px; }
.pg-body #pg-guide { font-size: 17px; padding: 12px; }
@media (orientation: landscape) and (max-height: 600px) {
  .guide-card { grid-template-columns: 1fr 1.2fr; }
  .guide-card .big-btn { grid-column: auto; }
  .guide-steps { margin: 0; }
  .guide-r .pg-install { margin-bottom: 10px; }
}
.home-main { position: relative; }
.home-main .parent-link { position: absolute; right: 6px; bottom: max(2px, env(safe-area-inset-bottom)); margin: 0; font-size: 12px; padding: 4px 8px; z-index: 3; }

/* 나뭇잎 이불: 진짜 큰 잎사귀 한 장으로 몸을 덮음 (10/14 사용자 "발만 덮고 이불 같지 않아") */
.sb-actor.blanket .sb-body::after { left: -2%; right: 18%; bottom: 2%; height: 62%; border-radius: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%238FD16A%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234E9E3C%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M4%2070%20C20%2020%2080%204%20140%2010%20C170%2013%20190%2026%20197%2040%20C185%2046%20178%2060%20170%2070%20C150%2096%2060%20100%204%2070Z%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22%233D7F2E%22%20stroke-width%3D%223%22/%3E%3Cpath%20d%3D%22M8%2068%20C60%2052%20120%2040%20194%2040%22%20stroke%3D%22%233D7F2E%22%20stroke-width%3D%223%22%20fill%3D%22none%22/%3E%3Cg%20stroke%3D%22%233D7F2E%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20opacity%3D%22.8%22%3E%3Cpath%20d%3D%22M40%2060%20C50%2044%2060%2034%2070%2026%22/%3E%3Cpath%20d%3D%22M70%2054%20C82%2040%2092%2030%20104%2020%22/%3E%3Cpath%20d%3D%22M104%2048%20C116%2036%20126%2026%20138%2016%22/%3E%3Cpath%20d%3D%22M138%2044%20C150%2036%20158%2028%20168%2022%22/%3E%3Cpath%20d%3D%22M50%2062%20C64%2072%2080%2080%2096%2084%22/%3E%3Cpath%20d%3D%22M84%2056%20C100%2066%20116%2074%20132%2078%22/%3E%3Cpath%20d%3D%22M120%2050%20C136%2058%20150%2064%20164%2066%22/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; opacity: 1; filter: drop-shadow(0 3px 2px rgba(0,0,0,.25)); transform-origin: 30% 100%; animation: sbBlanket .6s cubic-bezier(.3,1.4,.5,1) both; }
.sb-actor.flip.blanket .sb-body::after { left: 18%; right: -2%; transform: scaleX(-1); }
@keyframes sbBlanket { from { transform: translateY(-60%) rotate(-12deg); opacity: 0; } }
.sb-actor.flip.blanket .sb-body::after { animation-name: sbBlanketF; }
@keyframes sbBlanketF { from { transform: scaleX(-1) translateY(-60%) rotate(-12deg); opacity: 0; } to { transform: scaleX(-1); } }
/* 그림자 맞히기 장: 카드는 오른쪽에 세로로, 그림자는 왼쪽 가운데 — 카드가 그림자를 가리지 않게 (10/14) */
.sb-quiz.side, .sb-box .sb-quiz.side { left: auto; right: 2.5%; top: 24%; bottom: 4%; flex-direction: column; justify-content: center; align-items: flex-end; gap: 3%; }
.sb-quiz.side .sb-qc { width: auto; height: 22%; max-height: 22%; aspect-ratio: 4 / 3; }
.sb-quiz.side .sb-qc img { width: 100%; height: 100%; object-fit: contain; }
.sb-quiz.side ~ .sb-shadowbig, .sb-shadowbig:has(+ .sb-quiz.side) { left: 40%; }
/* 처음 안내: 빔빔 그림이 위로 잘리지 않게 카드 안에 */
.guide-card { padding-top: 12px; }
.guide-bb { position: static; transform: none; display: block; width: 84px; margin: 0 auto 2px; }

/* ---------- 공룡 도감 + 오늘의 알 (10/14) ---------- */
.dex-badge { position: absolute; top: 12px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 4px; min-width: 56px; height: 56px; padding: 0 12px; border-radius: 999px; background: #fff; color: #1D3D8F; border: 3px solid #fff; box-shadow: 0 6px 14px rgba(20,40,100,.22); font-family: var(--font-display); font-size: 22px; }
.dex-badge svg { width: 28px; height: 28px; }
.dex-badge .dex-dot { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #F0532F; border: 2px solid #fff; }
.dex-badge.dx-egg { width: 76px; height: 86px; padding: 0; justify-content: center; background: radial-gradient(circle, rgba(255,240,170,.95) 0 38%, rgba(255,226,120,0) 70%); border: 0; box-shadow: none; animation: dexEgg 1.8s ease-in-out infinite; }
.dex-badge.dx-egg svg { width: 52px; height: 66px; filter: drop-shadow(0 4px 6px rgba(160,100,0,.35)); }
.dex-spark { position: absolute; inset: -6px; border-radius: 50%; border: 3px dashed rgba(255,214,74,.9); animation: dexSpin 6s linear infinite; }
@keyframes dexEgg { 0%,100% { transform: rotate(0) } 10% { transform: rotate(-9deg) } 20% { transform: rotate(8deg) } 30% { transform: rotate(-5deg) } 40% { transform: rotate(0) } }
@keyframes dexSpin { to { transform: rotate(360deg) } }
.home-main .hero-wrap:has(.dx-egg) .hero-sun { opacity: 0; }

.hx { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%, #2C5BD0 0%, #142C72 70%, #0B1A48 100%); opacity: 0; transition: opacity .25s; overflow: hidden; overflow: clip; }
.hx.in { opacity: 1; } .hx.out { opacity: 0; }
.hx-rays { position: absolute; left: 50%; top: 45%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; background: repeating-conic-gradient(rgba(255,230,140,.13) 0 10deg, transparent 10deg 20deg); animation: dexSpin 30s linear infinite; pointer-events: none; }
.hx.open .hx-rays { background: repeating-conic-gradient(rgba(255,230,140,.28) 0 10deg, transparent 10deg 20deg); animation-duration: 14s; }
.hx-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; max-width: min(92vw, 720px); }
.hx-egg { background: none; border: 0; padding: 0; width: min(58vw, 46vh, 260px); animation: hxWob 2s ease-in-out infinite; }
.hx-egg.knock { animation: hxKnock .35s ease-out; }
.hx-eggsvg { width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(0,0,0,.35)); }
.hx-eggsvg path[class^="hx-c"] { fill: none; stroke: #7A4A10; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.hx-eggsvg path.on { opacity: 1; }
@keyframes hxWob { 0%,100% { transform: rotate(0) } 15% { transform: rotate(-6deg) } 30% { transform: rotate(5deg) } 45% { transform: rotate(0) } }
@keyframes hxKnock { 0% { transform: scale(1) } 30% { transform: scale(.9, 1.08) rotate(-7deg) } 60% { transform: scale(1.06, .95) rotate(6deg) } 100% { transform: scale(1) } }
.hx-hand { position: absolute; right: 8%; bottom: 6%; font-size: 52px; animation: hxHand 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes hxHand { 0%,100% { transform: translate(0,0) } 50% { transform: translate(-10px,-14px) } }
.hx-x { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; border: 0; display: grid; place-items: center; }
.hx-card { width: min(84vw, 520px, 52vh); aspect-ratio: 4/3; border-radius: 28px; background: radial-gradient(circle at 50% 40%, #FFFFFF, #FFF3CF 70%); box-shadow: 0 0 0 6px #FFD54A, 0 0 60px 10px rgba(255,214,74,.55); display: grid; place-items: center; animation: hxPop .7s cubic-bezier(.2,1.6,.4,1) both; }
.hx-card img { width: 92%; height: 92%; object-fit: contain; }
@keyframes hxPop { from { transform: scale(.2) rotate(-12deg); opacity: 0 } to { transform: scale(1) rotate(0); opacity: 1 } }
.hx-name { font-family: var(--font-display); font-size: clamp(30px, 8vw, 46px); color: #fff; text-shadow: 0 4px 0 #0B1A48; animation: hxPop .6s .25s both; text-align: center; }
.hx-fact { margin: 0; color: #FFF3CF; font-size: clamp(16px, 4.4vw, 20px); text-align: center; animation: hxPop .6s .4s both; }
.hx-count { display: flex; align-items: center; gap: 6px; color: #fff; font-family: var(--font-display); font-size: 20px; background: rgba(255,255,255,.14); padding: 4px 14px; border-radius: 999px; }
.hx-count svg { width: 22px; height: 22px; }
.hx-btns { display: flex; gap: 14px; margin-top: 6px; }
.hx-btns button { height: 60px; min-width: 60px; padding: 0 16px; border-radius: 999px; border: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-display); font-size: 20px; }
.hx-again { background: #fff; color: #1D3D8F; }
.hx-book { background: #FFD54A; color: #5A3A00; }
.hx-book svg { width: 26px; height: 26px; }
.hx-ok { background: #2E9E57; color: #fff; }
@media (orientation: landscape) and (max-height: 500px) {
  .hx-open-row { flex-direction: row; }
  .hx.open .hx-stage { display: grid; grid-template-columns: auto auto; grid-auto-rows: auto; column-gap: 22px; row-gap: 6px; align-items: center; }
  .hx.open .hx-card { grid-row: 1 / 7; width: min(48vw, 70vh * 4 / 3); }
  .hx.open .hx-name, .hx.open .hx-fact { text-align: left; justify-self: start; max-width: 40vw; }
  .hx.open .hx-count, .hx.open .hx-btns { justify-self: start; }
  .hx-egg { width: min(30vw, 60vh, 220px); }
}

.dex-screen { padding-bottom: 32px; }
.dx-num { font-family: var(--font-display); font-size: 26px; color: #1D3D8F; padding-right: 6px; }
.dx-num small { font-size: 16px; opacity: .6; }
.dx-bar { height: 12px; border-radius: 999px; background: #E3EAF8; margin: 4px 4px 12px; overflow: hidden; }
.dx-bar i { display: block; height: 100%; background: linear-gradient(90deg, #FFD54A, #FF9F2E); border-radius: inherit; }
.dx-today { display: flex; align-items: center; gap: 10px; margin: 0 4px 12px; width: calc(100% - 8px); justify-content: center; padding: 10px; border-radius: 20px; border: 0; background: linear-gradient(120deg, #FF9F2E, #F0532F); color: #fff; font-family: var(--font-display); font-size: 22px; animation: todayPulse 2.4s ease-in-out infinite; }
.dx-today svg, .dx-tmr svg { width: 30px; height: 38px; }
.dx-tmr { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; color: #5A6B92; font-size: 16px; }
.dx-sec h3 { margin: 10px 6px 8px; font-family: var(--font-display); font-weight: 400; font-size: 20px; color: #1D3D8F; }
.dx-sec h3 small { font-size: 15px; opacity: .6; }
.dx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.dx-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 6px; border-radius: 16px; border: 0; background: #E9EEF8; min-height: 100px; }
.dx-tile img { width: 100%; aspect-ratio: 4/3; object-fit: contain; filter: brightness(0) opacity(.22); }
.dx-tile span { font-size: 13px; line-height: 1.2; color: #8A97B5; text-align: center; word-break: keep-all; }
.dx-tile.on { background: #fff; box-shadow: 0 3px 8px rgba(20,40,100,.1); }
.dx-tile.on img { filter: none; }
.dx-tile.on span { color: #1D3D8F; font-weight: 700; }
.dx-tile.new::after { content: "NEW"; position: absolute; top: 4px; left: 4px; padding: 1px 6px; border-radius: 8px; background: #F0532F; color: #fff; font-size: 11px; font-weight: 800; }
.dx-tile.hi { box-shadow: 0 0 0 4px #FFD54A; }
.dx-tile.shake { animation: dxShake .35s; }
@keyframes dxShake { 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }
.dx-detail { position: fixed; inset: 0; z-index: 50; background: rgba(10,25,70,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dx-box { background: #fff; border-radius: 28px; padding: 16px 18px 18px; width: min(94vw, 520px); max-height: 94vh; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dx-img { width: 100%; border: 0; padding: 0; background: radial-gradient(circle at 50% 40%, #FFFFFF, #EAF1FF 75%); border-radius: 20px; aspect-ratio: 4/3; }
.dx-img img { width: 94%; height: 94%; object-fit: contain; }
.dx-img.roar { animation: hxKnock .45s; }
.dx-name { font-family: var(--font-display); font-weight: 400; font-size: 30px; color: #1D3D8F; text-align: center; }
.dx-en { color: #7A88A8; margin-top: -4px; }
.dx-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.dx-chips span { padding: 3px 10px; border-radius: 999px; background: #EEF3FF; color: #1D3D8F; font-size: 14px; }
.dx-fact { margin: 2px 0 0; text-align: center; color: #33415F; font-size: 17px; }
.dx-box .hx-again { background: #EEF3FF; }
@media (orientation: landscape) and (max-height: 500px) {
  .dx-box { width: min(92vw, 720px); display: grid; grid-template-columns: 46% 1fr; column-gap: 16px; align-items: center; }
  .dx-img { grid-row: 1 / 7; }
  .dx-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .dex-badge.dx-egg, .dex-spark, .hx-rays, .hx-egg, .hx-hand { animation: none; } }
/* 출석 도장 (10/14) */
.st-row { display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin: 0 4px 10px; flex-wrap: wrap; }
.st-day { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.st-day i { width: 34px; height: 34px; border-radius: 50%; background: #E3EAF8; display: grid; place-items: center; border: 2px dashed #C3CEE6; }
.st-day.on i { background: #FFF3CF; border: 2px solid #FFD54A; }
.st-day.today i { box-shadow: 0 0 0 3px #FF9F2E; }
.st-day i svg { width: 20px; height: 26px; }
.st-day small { font-size: 12px; color: #5A6B92; }
.st-total { align-self: center; margin-left: 6px; font-family: var(--font-display); font-weight: 400; font-size: 18px; color: #1D3D8F; }
.st-row.big .st-day i { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); }
.st-row.big .st-day.on i { background: #FFF3CF; border-color: #FFD54A; }
.st-row.big .st-day small, .st-row.big .st-total { color: #fff; }
.st-row.big .st-day.today.on i { animation: hxPop .6s .6s both; }
@media (orientation: landscape) and (max-height: 500px) { .st-row.big { justify-self: start; justify-content: flex-start; margin: 0; } .st-row.big .st-day i { width: 28px; height: 28px; } }
.hx-btns button { white-space: nowrap; }
.hx-name { word-break: keep-all; }
@media (orientation: landscape) and (max-height: 500px) {
  .hx.open .hx-card { width: min(40vw, 62vh * 4 / 3); }
  .hx.open .hx-name { font-size: clamp(24px, 6.4vh, 34px); max-width: 46vw; }
  .hx.open .hx-fact { font-size: 15px; max-width: 46vw; }
  .hx.open .hx-btns button { height: 50px; min-width: 50px; font-size: 17px; }
  .hx.open .hx-stage { row-gap: 4px; }
  .st-row.big .st-total { font-size: 15px; }
}

/* ---------- 화석 연구소 (10/14) ---------- */
.lab { background: linear-gradient(#EAF4FF, #F6EFE2); min-height: 100dvh; display: flex; flex-direction: column; }
.lab-guide { display: flex; align-items: flex-end; gap: 8px; margin: 2px 8px 6px; }
.lab-guide img { width: 76px; height: 76px; object-fit: contain; flex: none; animation: labBob 2.4s ease-in-out infinite; }
.lab-say { margin: 0 0 10px; background: #fff; border-radius: 18px 18px 18px 4px; padding: 10px 14px; font-size: 18px; font-weight: 700; color: #1D3D8F; box-shadow: 0 3px 10px rgba(20,40,100,.1); }
.lab-say.pop { animation: hxPop .35s both; }
@keyframes labBob { 50% { transform: translateY(-5px) } }
.lab-body { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 10px 16px; min-height: 0; }
.lab-tool { display: inline-block; }
.lab-tool svg { width: 100%; height: 100%; }
/* 고르기 */
.lab-pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; max-width: 720px; }
.lab-pcard { position: relative; background: #1E2A44; border-radius: 18px; padding: 10px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 4px 10px rgba(20,40,100,.18); }
.lab-pcard img { width: 100%; aspect-ratio: 16/10; object-fit: contain; }
.lab-pcard b { color: #FFE9B8; font-family: var(--font-display); font-weight: 400; font-size: 18px; }
.lab-stamp { position: absolute; top: 8px; right: 8px; transform: rotate(12deg); border: 3px solid #F0532F; color: #F0532F; font-style: normal; font-weight: 800; font-size: 13px; padding: 2px 6px; border-radius: 8px; background: rgba(255,255,255,.9); }
.lab-stamp.big { top: auto; bottom: 14px; right: 14px; font-size: 22px; padding: 4px 12px; border-width: 4px; animation: labStamp .5s .3s both cubic-bezier(.2,1.6,.4,1); }
@keyframes labStamp { from { transform: rotate(12deg) scale(3); opacity: 0 } to { transform: rotate(12deg) scale(1); opacity: 1 } }
/* 발굴 */
.lab-sand { position: relative; width: 100%; max-width: 640px; aspect-ratio: 4/3; border-radius: 22px; background: radial-gradient(circle at 30% 20%, #F1D9A8, #DDB878 70%); box-shadow: inset 0 -10px 0 rgba(150,100,40,.2); overflow: hidden; }
.lab-mound { position: absolute; width: 26%; aspect-ratio: 1.4; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; }
.lab-dirt { position: absolute; inset: 0; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 40% 30%, #B98A55, #8E6235 75%); box-shadow: 0 6px 0 rgba(90,55,20,.25); transition: transform .35s, opacity .35s; animation: labMound 2.2s ease-in-out infinite; }
.lab-mound:nth-child(2) .lab-dirt { animation-delay: .4s } .lab-mound:nth-child(3) .lab-dirt { animation-delay: .8s } .lab-mound:nth-child(4) .lab-dirt { animation-delay: 1.2s }
@keyframes labMound { 50% { transform: scale(1.04, .97) } }
.lab-bone { position: absolute; inset: 10% 15%; background-repeat: no-repeat; opacity: 0; transition: opacity .3s .15s; }
.lab-mound.open .lab-dirt { transform: scale(1.3); opacity: 0; }
.lab-mound.open .lab-bone { opacity: 1; animation: labFly .45s .3s forwards; }
@keyframes labFly { to { transform: translateY(40px) scale(.4); opacity: 0 } }
.lab-brush { position: absolute; right: 4%; bottom: 4%; width: 54px; height: 54px; transform: rotate(-20deg); pointer-events: none; }
.lab-tray { width: 100%; max-width: 640px; min-height: 84px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; padding: 8px; border-radius: 18px; background: rgba(30,42,68,.92); }
.lab-tchip { width: 70px; height: 56px; background-repeat: no-repeat; background-size: contain !important; background-position: center !important; animation: hxPop .4s both; }
/* 뼈 맞추기 */
.lab-board-wrap { width: 100%; max-width: 760px; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.lab-board { position: relative; width: 100%; border-radius: 18px; background: #1E2A44; }
.lab-ghost { display: block; width: 100%; height: auto; filter: brightness(0) invert(1) opacity(.16); }
.lab-alive { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.9); }
.lab-piece { display: block; background-repeat: no-repeat; touch-action: none; }
.lab-piece.loose { cursor: grab; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.lab-piece.lifted { opacity: .25; }
.lab-piece.flying { position: fixed; z-index: 70; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.lab-piece.set { position: absolute; top: 0; height: 100%; animation: labSnap .3s; }
@keyframes labSnap { 0% { filter: brightness(1.8) } 100% { filter: none } }
.lab-piece.shake, .lab-ch.shake { animation: dxShake .35s; }
.lab-tray.build { min-height: 110px; }
.lab-board.wake .lab-piece.set { animation: labWake .9s ease-in-out; }
@keyframes labWake { 20% { transform: translateY(-4px) rotate(-1deg) } 40% { transform: translateY(2px) rotate(1deg) } 60% { transform: translateY(-3px) } 80% { transform: translateY(1px) } }
.lab-board.alive { background: radial-gradient(circle, #FFFFFF, #EAF1FF 75%); transition: background .6s; }
.lab-board.alive .lab-piece.set, .lab-board.alive .lab-ghost { opacity: 0; transition: opacity .6s; }
.lab-board.alive .lab-alive { opacity: 1; transform: scale(1); transition: opacity .6s, transform .7s cubic-bezier(.2,1.6,.4,1); }
/* 묻고 답하기 */
.lab-lens { position: relative; width: min(70vw, 300px, 38vh); aspect-ratio: 1; }
.lab-zoom { position: absolute; inset: 9%; border-radius: 50%; background-color: #1E2A44; background-repeat: no-repeat; background-size: 420% auto; border: 6px solid #F28C28; box-shadow: 0 6px 14px rgba(0,0,0,.25); }
.lab-lens-tool { position: absolute; right: -14%; bottom: -14%; width: 44%; height: 44%; }
.lab-legs { position: relative; width: 100%; max-width: 600px; background: #1E2A44; border-radius: 18px; padding: 8px; }
.lab-legs img { width: 100%; display: block; }
.lab-ruler { position: absolute; left: 8%; bottom: -6%; width: 30%; height: 18%; animation: labRuler 2.6s ease-in-out infinite; }
@keyframes labRuler { 50% { transform: translateX(120%) } }
.lab-q { width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lab-choices { display: flex; gap: 14px; width: 100%; justify-content: center; }
.lab-ch { flex: 1; max-width: 220px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 20px; background: #fff; border: 4px solid #DCE6F8; font-family: var(--font-display); font-size: 22px; color: #1D3D8F; }
.lab-ch .ic { width: 52px; height: 52px; display: grid; place-items: center; }
.lab-ch .ic svg { width: 100%; height: 100%; }
.ic.meat { color: #E0533C; } .ic.plant { color: #2E9E57; } .ic.feet { color: #6A4B2E; }
.lab-ch.right { border-color: #2E9E57; background: #E9F8EE; animation: hxPop .4s; }
.lab-ch.dim { opacity: .35; }
.lab-explain { margin: 0; background: #FFF6E2; border-radius: 16px; padding: 12px 14px; font-size: 17px; line-height: 1.5; color: #4A3A1A; max-width: 600px; animation: hxPop .4s both; }
.lab-next { padding: 12px 26px; border-radius: 999px; border: 0; background: linear-gradient(120deg, #FF9F2E, #F0532F); color: #fff; font-family: var(--font-display); font-size: 22px; animation: todayPulse 2.4s ease-in-out infinite; }
/* 현미경 */
.lab-scope { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; }
.lab-slide { width: min(64vw, 280px, 40vh); aspect-ratio: 1; border: 0; background: none; padding: 0; border-radius: 50%; box-shadow: 0 0 0 8px #CFE3FF, 0 10px 20px rgba(0,0,0,.25); }
.lab-slide svg { width: 100%; height: 100%; }
.lab-ring.on { stroke: #F0532F; stroke-width: 5; }
.lab-scope-tool { width: 70px; height: 70px; }
.lab-count { position: absolute; top: -6px; right: -6px; min-width: 52px; height: 52px; border-radius: 50%; background: #F0532F; color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 400; font-size: 28px; }
/* 보고서 */
.lab-note { position: relative; width: 100%; max-width: 640px; background: #FFF6E2; border: 6px solid #F28C28; border-radius: 22px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.lab-note-img { background: #fff; border-radius: 14px; aspect-ratio: 16/10; display: grid; place-items: center; overflow: hidden; }
.lab-note-img img { width: 100%; height: 100%; object-fit: contain; }
.lab-note-name { font-family: var(--font-display); font-weight: 400; font-size: 28px; color: #1D3D8F; }
.lab-note ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.lab-note li { display: flex; align-items: center; gap: 8px; font-size: 18px; color: #4A3A1A; }
.lab-note li .ic { width: 30px; height: 30px; display: grid; place-items: center; font-size: 22px; }
.lab-note li .ic svg { width: 100%; height: 100%; }
.lab-got { margin: 8px 0 0; font-weight: 700; color: #2E9E57; }
.lab .end-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
@media (orientation: landscape) and (max-height: 500px) {
  .lab-guide { position: absolute; left: 8px; bottom: 8px; z-index: 3; flex-direction: column; align-items: flex-start; max-width: 190px; margin: 0; pointer-events: none; }
  .lab-guide img { width: 60px; height: 60px; order: 2; }
  .lab-say { font-size: 15px; padding: 8px 10px; margin: 0; border-radius: 14px 14px 14px 4px; }
  .lab-body { padding-left: 200px; padding-right: 12px; }
  .lab-pgrid { grid-template-columns: repeat(3, 1fr); max-width: 640px; }
  .lab-s-dig .lab-body, .lab-s-build .lab-body { flex-direction: row; align-items: center; }
  .lab-sand { width: auto; height: calc(100dvh - 90px); max-width: none; }
  .lab-tray { width: 150px; min-height: 0; align-self: stretch; flex-direction: column; flex-wrap: nowrap; justify-content: center; overflow: hidden; }
  .lab-board-wrap { height: 100%; }
  .lab-board { width: auto; height: auto; max-height: calc(100dvh - 90px); max-width: 100%; }
  .lab-ghost { width: auto; max-width: 100%; max-height: calc(100dvh - 90px); }
  .lab-s-teeth .lab-body, .lab-s-legs .lab-body, .lab-s-micro .lab-body { flex-direction: row; justify-content: center; }
  .lab-legs { max-width: 46vw; }
  .lab-lens { width: min(36vw, 60vh); }
  .lab-slide { width: min(30vw, 58vh); }
  .lab-note { flex-direction: row; align-items: center; max-width: 720px; }
  .lab-note-img { width: 48%; flex: none; }
  .lab-s-report .lab-body { flex-direction: column; }
}
.lab-tray.gone { visibility: hidden; }
.mode-card.play.labplay { background: linear-gradient(120deg, #2C5BD0, #1E2A44); color: #fff; }
.mode-card.play.labplay { border: 0; }
.mode-card.play.labplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
@media (orientation: landscape) and (max-height: 500px) {
  .lab-s-micro .lab-body { display: grid; grid-template-columns: auto minmax(0, 360px); grid-auto-rows: min-content; align-content: center; justify-content: center; column-gap: 20px; row-gap: 10px; }
  .lab-s-micro .lab-scope { grid-row: 1 / 3; }
  .lab-s-micro .lab-explain { font-size: 15px; align-self: end; }
  .lab-s-micro .lab-next { justify-self: start; align-self: start; }
}
/* 화석 연구소 점토 그림 (10/14) */
.lab { background: linear-gradient(rgba(255,255,255,.38), rgba(255,255,255,.38)), url(../assets/lab/bg.webp) center bottom / cover no-repeat, #DDEBFA; }
img.lab-tool { object-fit: contain; }
.lab-brush { width: 78px; height: 70px; }
.lab-lens-tool { width: 50%; height: 50%; right: -18%; bottom: -18%; }
.lab-ruler { height: 22%; width: 34%; }
.lab-scope-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lab-scope-tool { width: 92px; height: 120px; }
.lab-slide-img { width: 100px; height: 52px; }
.lab-note-icon { position: absolute; top: -26px; left: -16px; width: 74px; height: 56px; transform: rotate(-12deg); }
.lab-next { white-space: nowrap; }

/* ---------- 꾸미기 숍 (10/14) ---------- */
.salon { min-height: 100dvh; display: flex; flex-direction: column; background: linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.25)), url(../assets/salon/salon_bg.webp) center / cover no-repeat, #FFE3EE; }
.sl-doors { flex: 1; display: grid; grid-template-columns: 1fr; gap: 14px; padding: 10px 14px 20px; align-content: center; max-width: 720px; width: 100%; margin: 0 auto; }
.sl-door { position: relative; border: 0; border-radius: 26px; padding: 14px; display: flex; align-items: center; gap: 14px; min-height: 150px; box-shadow: 0 8px 18px rgba(200,80,130,.25); }
.sl-door.hair { background: linear-gradient(120deg, #FF8FB8, #FF5C8A); }
.sl-door.nail { background: linear-gradient(120deg, #B18CFF, #7C5CFF); }
.sl-door img { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
.sl-door .sl-door-deco { position: absolute; left: 48px; top: 10px; width: 64px; height: 50px; transform: rotate(-14deg); }
.sl-door b { color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 28px; text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.sl-friends { display: flex; gap: 8px; justify-content: center; padding: 2px 8px 6px; }
.sl-fr { border: 3px solid transparent; background: rgba(255,255,255,.85); border-radius: 16px; padding: 4px 6px 2px; display: flex; flex-direction: column; align-items: center; width: 64px; }
.sl-fr img { width: 44px; height: 44px; object-fit: contain; }
.sl-fr span { font-size: 12px; font-weight: 800; color: #C2185B; }
.sl-fr.on { border-color: #FF5C8A; background: #fff; }
.sl-stage { position: relative; flex: 1; min-height: 0; width: 100%; max-width: 640px; margin: 0 auto; touch-action: none; overflow: hidden; }
.sl-char { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); width: calc(var(--w) * 100%); max-height: 96%; object-fit: contain; object-position: bottom; pointer-events: auto; filter: drop-shadow(0 8px 8px rgba(120,40,80,.18)); }
.sl-item { position: absolute; width: 22%; max-width: 140px; touch-action: none; cursor: grab; filter: drop-shadow(0 3px 3px rgba(0,0,0,.18)); }
.sl-item.sel { outline: 3px dashed #FF5C8A; outline-offset: 4px; border-radius: 10px; }
.sl-tools { display: flex; gap: 10px; justify-content: center; padding: 6px; }
.sl-tools[hidden] { display: none; }
.sl-tools button { width: 52px; height: 52px; border-radius: 50%; border: 0; background: #fff; color: #C2185B; box-shadow: 0 3px 8px rgba(0,0,0,.12); display: grid; place-items: center; }
.sl-tools svg { width: 26px; height: 26px; }
.sl-tray { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 64px); grid-auto-columns: 64px; gap: 6px; overflow-x: auto; padding: 8px 10px; background: rgba(255,255,255,.88); border-radius: 22px 22px 0 0; }
.sl-st { border: 0; background: #FFF0F6; border-radius: 14px; padding: 6px; }
.sl-st img { width: 100%; height: 100%; object-fit: contain; }
.sl-snap { position: fixed; right: 14px; bottom: calc(160px + env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; border: 4px solid #fff; background: linear-gradient(120deg, #FF9F2E, #F0532F); color: #fff; font-family: var(--font-display); font-size: 22px; box-shadow: 0 6px 14px rgba(240,83,47,.35); }
.sl-snap svg { width: 28px; height: 28px; }
/* 네일 */
.sl-paw-wrap { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; }
.sl-paw { position: relative; height: min(56vh, 520px); aspect-ratio: 600/640; max-width: 92vw; }
.sl-paw > img { width: 100%; height: 100%; display: block; }
.sl-nl { position: absolute; inset: 0; pointer-events: none; opacity: 0; -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.sl-nl.on { opacity: 1; }
.sl-nl i { position: absolute; inset: 0; }
.sl-nl .c { mix-blend-mode: multiply; }
.sl-nl .p { opacity: .9; }
.sl-nl.wet { animation: slWet .5s; }
@keyframes slWet { 0% { filter: brightness(1.6) } 100% { filter: none } }
.sl-nhit { position: absolute; border: 0; background: transparent; border-radius: 40%; }
.sl-nhit.n0 { left: -2%; top: 12%; width: 28%; height: 28%; }
.sl-nhit.n1 { left: 29%; top: -2%; width: 33%; height: 26%; }
.sl-nhit.n2 { left: 66%; top: 11%; width: 29%; height: 25%; }
.sl-tip { margin: 6px 0 0; text-align: center; font-family: var(--font-display); font-size: 20px; color: #7C3A9C; text-shadow: 0 2px 0 #fff; }
.sl-colors, .sl-pats { display: flex; gap: 10px; justify-content: center; padding: 6px 10px; flex-wrap: wrap; }
.sl-col { width: 44px; height: 44px; border-radius: 50% 50% 46% 46%; border: 4px solid #fff; background: var(--c); box-shadow: 0 3px 6px rgba(0,0,0,.15); }
.sl-col.on, .sl-pat.on { transform: scale(1.15); box-shadow: 0 0 0 4px #7C5CFF; }
.sl-pat { width: 52px; height: 40px; border-radius: 12px; border: 3px solid #fff; background: var(--pb), var(--c); box-shadow: 0 3px 6px rgba(0,0,0,.15); }
.sl-nail .sl-snap { bottom: calc(18px + env(safe-area-inset-bottom)); }
.sl-nail { padding-bottom: 70px; }
/* 찰칵 */
.sl-photo { position: fixed; inset: 0; z-index: 60; background: rgba(60,20,50,.6); display: flex; align-items: center; justify-content: center; padding: 14px; }
.sl-flash { position: absolute; inset: 0; background: #fff; animation: slFlash .6s forwards; pointer-events: none; }
@keyframes slFlash { from { opacity: 1 } to { opacity: 0 } }
.sl-photo-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sl-polaroid { background: #fff; padding: 12px 12px 40px; border-radius: 6px; transform: rotate(-3deg); box-shadow: 0 12px 30px rgba(0,0,0,.35); animation: hxPop .6s .2s both; }
.sl-polaroid canvas { display: block; width: min(76vw, 52vh, 420px); height: auto; aspect-ratio: 1; }
.sl-bbcam { position: absolute; right: -12px; top: -30px; width: 110px; animation: hxPop .5s .6s both; }
.sl-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mode-card.play.salonplay { background: linear-gradient(120deg, #FF8FB8, #B18CFF); color: #fff; border: 0; }
.mode-card.play.salonplay .mode-icon { background: rgba(255,255,255,.25); color: #fff; }
@media (orientation: landscape) and (max-height: 500px) {
  .sl-doors { grid-template-columns: 1fr 1fr; max-width: 820px; }
  .sl-door { min-height: 200px; flex-direction: column; justify-content: center; }
  .sl-dress { display: grid; grid-template-columns: 1fr 230px; grid-template-rows: auto auto 1fr auto; }
  .sl-dress .game-top { grid-column: 1 / 3; }
  .sl-dress .sl-friends { grid-column: 2; grid-row: 2; flex-wrap: wrap; gap: 4px; }
  .sl-dress .sl-fr { width: 42px; padding: 2px; } .sl-dress .sl-fr img { width: 34px; height: 34px; } .sl-dress .sl-fr span { display: none; }
  .sl-dress .sl-stage { grid-column: 1; grid-row: 2 / 5; height: calc(100dvh - 64px); }
  .sl-dress .sl-tray { grid-column: 2; grid-row: 3; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-template-rows: none; grid-auto-rows: 58px; overflow-y: auto; border-radius: 18px; margin-right: 8px; }
  .sl-dress .sl-tools { grid-column: 2; grid-row: 4; }
  .sl-dress .sl-tools button { width: 44px; height: 44px; }
  .sl-dress .sl-snap { right: auto; left: 14px; bottom: 14px; }
  .sl-nail { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: auto 1fr auto auto; padding-bottom: 0; }
  .sl-nail .game-top { grid-column: 1 / 3; }
  .sl-nail .sl-paw-wrap { grid-column: 1; grid-row: 2 / 5; }
  .sl-nail .sl-paw { height: calc(100dvh - 70px); }
  .sl-nail .sl-tip { grid-column: 2; grid-row: 2; align-self: end; }
  .sl-nail .sl-colors { grid-column: 2; grid-row: 3; }
  .sl-nail .sl-pats { grid-column: 2; grid-row: 4; }
  .sl-nail .sl-snap { right: auto; left: 14px; bottom: 14px; }
  .sl-polaroid canvas { width: min(60vh, 340px); }
  .sl-photo-box { flex-direction: row; }
  .sl-photo-btns { flex-direction: column; }
}
.sl-nl { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.sl-door b { font-size: clamp(20px, 5.6vw, 28px); word-break: keep-all; }
.sl-bbcam { right: auto; left: -24px; top: -40px; }
@media (orientation: landscape) and (max-height: 500px) { .sl-bbcam { left: -50px; top: -20px; width: 90px; } }

/* ---------- 사진 사파리 (10/14) ---------- */
.safari { min-height: 100dvh; display: flex; flex-direction: column; background: linear-gradient(#DFF3FF, #EAF7E4); }
.sf-intro { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 12px; }
.sf-intro img { width: 110px; }
.sf-intro p { margin: 0; font-family: var(--font-display); font-size: 22px; color: #1D5A2E; line-height: 1.35; }
.sf-places { display: grid; gap: 12px; padding: 8px 14px 20px; max-width: 720px; width: 100%; margin: 0 auto; }
.sf-place { position: relative; height: 140px; border: 4px solid #fff; border-radius: 22px; background: center / cover; box-shadow: 0 6px 14px rgba(20,80,40,.2); display: flex; align-items: flex-end; padding: 0; overflow: hidden; }
.sf-place b { width: 100%; padding: 8px 14px; text-align: left; color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 24px; background: linear-gradient(transparent, rgba(0,0,0,.5)); }
.sf-mission { display: flex; align-items: center; gap: 8px; margin: 0 8px 6px; padding: 6px 10px; background: #fff; border-radius: 18px; box-shadow: 0 3px 10px rgba(0,0,0,.1); }
.sf-target { width: 72px; height: 54px; flex: none; border-radius: 12px; background: #EAF5FF; display: grid; place-items: center; overflow: hidden; }
.sf-target img { width: 100%; height: 100%; object-fit: contain; }
.sf-mission b { flex: 1; font-family: var(--font-display); font-weight: 400; font-size: 18px; color: #1D3D8F; }
.sf-film { display: flex; gap: 3px; }
.sf-film i { width: 26px; height: 26px; border-radius: 6px; background: #E3EAF8; border: 2px dashed #C3CEE6; overflow: hidden; display: grid; place-items: center; }
.sf-film i.on { background: #fff; border: 2px solid #FFD54A; animation: hxPop .4s; }
.sf-film i img { width: 100%; height: 100%; object-fit: contain; }
.sf-view { position: relative; flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sf-view::-webkit-scrollbar { display: none; }
.sf-world { position: relative; height: 100%; aspect-ratio: 3 / 2; min-width: 100%; background: center / cover no-repeat; }
.sf-spot { position: absolute; transform: translate(-50%, -100%); aspect-ratio: 480 / 330; }
.sf-bush { position: absolute; left: 0; bottom: 0; width: 100%; pointer-events: none; z-index: 2; }
.sf-hole { position: absolute; left: -4%; right: -4%; bottom: 62%; height: 160%; overflow: hidden; z-index: 1; pointer-events: none; }
.sf-dino { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1000 / 525; transform: translateY(102%); transition: transform .45s cubic-bezier(.3,1.4,.5,1); cursor: pointer; pointer-events: auto; }
.sf-dino img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); }
.sf-spot.up .sf-dino { transform: translateY(0); }
.sf-spot.down .sf-dino { transform: translateY(102%); transition: transform .35s ease-in; }
.sf-play { max-width: none !important; width: 100%; }
.sf-cam { position: fixed; right: 6px; bottom: 6px; width: 96px; z-index: 4; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.sf-cam.click { animation: hxKnock .35s; }
.sf-hint { position: fixed; left: 10px; right: 110px; bottom: 12px; z-index: 4; margin: 0; padding: 8px 12px; background: rgba(255,255,255,.92); border-radius: 16px; font-weight: 700; color: #1D5A2E; font-size: 16px; }
.sf-hint.pop { animation: hxPop .35s; }
.sf-flash { position: fixed; inset: 0; z-index: 50; background: #fff; animation: slFlash .45s forwards; pointer-events: none; }
.sf-album { padding-bottom: 20px; }
.sf-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 10px 16px; max-width: 760px; margin: 0 auto; width: 100%; }
.sf-photo { margin: 0; aspect-ratio: 1; border: 8px solid #fff; border-bottom-width: 30px; border-radius: 4px; background: center 70% / cover; box-shadow: 0 6px 14px rgba(0,0,0,.2); transform: rotate(var(--r)); position: relative; display: grid; place-items: end center; animation: hxPop .5s both; }
.sf-photo img { width: 92%; height: 80%; object-fit: contain; object-position: bottom; }
.sf-photo figcaption { position: absolute; bottom: -26px; left: 0; right: 0; text-align: center; font-family: var(--font-display); font-size: 16px; color: #333; }
.sf-proud { display: block; width: 110px; margin: 4px auto 0; }
.safari .end-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 8px; }
.mode-card.play.safariplay { background: linear-gradient(120deg, #4CBF6B, #1E8C6E); color: #fff; border: 0; }
.mode-card.play.safariplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
@media (orientation: landscape) and (max-height: 500px) {
  .sf-pick .sf-places { grid-template-columns: repeat(3, 1fr); max-width: 820px; }
  .sf-intro img { width: 70px; } .sf-intro p { font-size: 18px; }
  .sf-place { height: 150px; }
  .sf-play { display: block; position: relative; height: 100dvh; overflow: hidden; }
  .sf-play .game-top { position: absolute; left: 0; right: 0; top: 0; z-index: 5; }
  .sf-play .sf-mission { position: absolute; z-index: 5; top: 6px; left: 50%; transform: translateX(-50%); margin: 0; width: min(520px, 62vw); }
  .sf-play .sf-view { position: absolute; inset: 0; }
  .sf-play .sf-world { height: auto; width: 100%; aspect-ratio: 3 / 2; }
  .sf-cam { width: 74px; }
  .sf-hint { right: 90px; font-size: 14px; }
  .sf-photos { grid-template-columns: repeat(5, 1fr); max-width: 820px; gap: 10px; }
  .sf-photo { border-width: 5px; border-bottom-width: 22px; }
  .sf-photo figcaption { font-size: 12px; bottom: -20px; }
  .sf-proud { width: 70px; }
}
@media (orientation: portrait) { .sf-play .sf-world { height: 100%; width: 210%; aspect-ratio: auto; background-position: center bottom; } .sf-play .sf-view { border-radius: 18px; } }
.sf-edge { position: fixed; top: 50%; z-index: 6; width: 54px; height: 54px; border-radius: 50%; border: 0; background: #FFD54A; color: #5A3A00; box-shadow: 0 4px 10px rgba(0,0,0,.25); display: grid; place-items: center; animation: sfEdge .7s ease-in-out infinite alternate; }
.sf-edge svg { width: 30px; height: 30px; }
.sf-edge.l { left: 6px; } .sf-edge.r { right: 6px; }
@keyframes sfEdge { to { transform: scale(1.15) } }

/* 10/14 시작 화면 피피: 빔빔보다 작게, 뒤쪽 언덕에서 날갯짓 */
.s3-pp { position: absolute; z-index: 2; line-height: 0; background: none; border: 0; padding: 0; transform-origin: 50% 100%; -webkit-tap-highlight-color: transparent; animation: s3Float 3.4s ease-in-out infinite; }
.s3-pp video, .s3-pp img { width: 100%; height: auto; display: block; pointer-events: none; filter: drop-shadow(0 8px 6px rgba(30, 90, 50, .18)); }
.s3-pp.boing { animation: bdBoing .55s cubic-bezier(.2,1.6,.4,1); }
@keyframes s3Float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@media (orientation: portrait) { .s3-pp { width: min(30vw, 17vh); left: 7%; top: 37vh; } }
@media (orientation: landscape) { .s3-pp { width: min(15vw, 27vh); left: 55%; top: 7vh; } }
@media (prefers-reduced-motion: reduce) { .s3-pp { animation: none; } }

/* 10/14 오후 꾸미기 숍 고침: 찰칵 버튼은 도구 줄 오른쪽(겹치지 않게), 도구 줄은 자리만 지킴, 장식 크기는 코드가 정함 */
.sl-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; max-width: 640px; width: 100%; margin: 0 auto; }
.sl-bar .sl-tools { padding: 0; gap: 8px; }
.sl-bar .sl-tools button { width: 48px; height: 48px; }
.sl-tools.off { visibility: hidden; }
.sl-bar .sl-snap { position: static; flex: none; padding: 8px 16px; font-size: 20px; }
.sl-item { width: auto; max-width: none; }
.sl-paw { height: auto; width: min(92vw, calc(56vh * 600 / 640), 488px); aspect-ratio: 600 / 640; }
.sl-paw > img { height: auto; }
.sl-nl.c { mix-blend-mode: multiply; }
.sl-nl.p { opacity: .92; }
@media (orientation: landscape) {
  .sl-dress .sl-bar { grid-column: 2; grid-row: 4; flex-wrap: wrap; justify-content: center; padding: 4px; }
  .sl-dress .sl-bar .sl-tools button { width: 42px; height: 42px; }
  .sl-dress .sl-bar .sl-snap { position: fixed; left: 14px; bottom: 14px; right: auto; }
  .sl-nail .sl-paw { height: auto; width: min(calc((100dvh - 70px) * 600 / 640), 55vw); }
}
/* 10/14 오후 메인 다섯째 문: 꾸미기 (아래 넓은 문) */
.menu-deco { grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: 10px; height: clamp(74px, 11vh, 104px); padding: 0 14px 0 96px; border: 0; border-radius: 26px; overflow: visible; color: #fff; background: linear-gradient(120deg, #FF8FB8, #B48CFF); box-shadow: 0 7px 0 #B5508A; }
.menu-deco b { font-family: "Jua", var(--font-display); font-weight: 400; font-size: clamp(26px, 8vw, 38px); text-shadow: 0 3px 0 rgba(0,0,0,.12); }
.menu-deco .md-bori { position: absolute; left: 6px; bottom: 2px; height: 128%; filter: drop-shadow(0 4px 4px rgba(0,0,0,.18)); transform-origin: 50% 100%; animation: mdBob 2.8s ease-in-out infinite; }
.menu-deco .md-shops { margin-left: auto; display: flex; gap: 2px; }
.menu-deco .md-shops img { width: clamp(30px, 9vw, 46px); filter: drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.menu-deco:active { transform: translateY(4px); box-shadow: 0 3px 0 #B5508A; }
@keyframes mdBob { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-3%); } }
@media (orientation: landscape) {
  .home-main .menu-grid { grid-template-rows: 1fr 1fr auto; }
  .menu-deco { height: clamp(58px, 17vh, 84px); padding-left: 80px; }
  .menu-deco .md-shops img { width: clamp(26px, 8vh, 40px); }
}
@media (prefers-reduced-motion: reduce) { .menu-deco .md-bori { animation: none; } }

/* 꾸미기 마을 */
.sl-town { background: linear-gradient(180deg, #BFE6FF 0%, #E6F6FF 45%, #CFEFC4 46%, #A9DE9B 100%) !important; }
.sl-shops { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 6px 16px; max-width: 560px; width: 100%; margin: 0 auto; }
.sl-shop { border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; transform-origin: 50% 100%; }
.sl-shop img { width: 100%; max-width: 230px; filter: drop-shadow(0 8px 8px rgba(40,90,60,.22)); transition: transform .15s; }
.sl-shop:active img { transform: scale(.95); }
.sl-shop b { font-family: "Jua", var(--font-display); font-weight: 400; font-size: 22px; color: #fff; background: rgba(60,40,90,.55); padding: 2px 14px 4px; border-radius: 999px; margin-top: -10px; position: relative; }
.sl-town-bori { display: block; width: min(34vw, 20vh); margin: auto auto 10px; filter: drop-shadow(0 6px 6px rgba(40,90,60,.25)); }
.sl-town-bori.boing { animation: bdBoing .55s cubic-bezier(.2,1.6,.4,1); }
@media (orientation: landscape) {
  .sl-town { display: grid !important; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; }
  .sl-town .game-top { grid-column: 1 / 3; }
  .sl-shops { grid-template-columns: repeat(4, 1fr); max-width: 760px; align-self: center; }
  .sl-town-bori { grid-column: 2; grid-row: 2; width: 22vh; height: auto; align-self: end; margin: 0 12px 6px 0; }
}
.sl-dress { background-size: cover !important; background-position: center !important; }
.sl-me { background: linear-gradient(120deg, #FF8FB8, #B48CFF) !important; color: #fff !important; border: 0 !important; }
.sl-me.done { opacity: .85; }

/* 내 방 (프로필) */
.kid-av.pic { background: #FFF6E6; }
.kid-av.pic img { width: 100%; height: 100%; object-fit: cover; }
.my-room { position: relative; max-width: 520px; width: 100%; margin: 8px auto 0; aspect-ratio: 810 / 1080; max-height: 62vh; border-radius: 24px; overflow: hidden; background: url(../assets/salon/myroom_bg.webp) center / cover no-repeat; box-shadow: 0 8px 18px rgba(30,60,120,.15); }
.mr-frame { position: absolute; left: 33.5%; top: 10.6%; width: 40.5%; height: 25.6%; border-radius: 8px; overflow: hidden; display: grid; place-items: center; }
.mr-frame > img { height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 4px #fff; }
.mr-empty { border: 0; background: none; display: flex; align-items: center; gap: 4px; padding: 0; color: #7C3A9C; font-weight: 900; font-size: clamp(12px, 3.4vw, 16px); }
.mr-empty img { height: clamp(60px, 15vh, 110px); }
.mr-name { position: absolute; left: 0; right: 0; top: 37.5%; text-align: center; font-family: "Jua", var(--font-display); font-weight: 400; font-size: clamp(22px, 6vw, 30px); color: #0A2E6E; text-shadow: 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff; }
.mr-stats { position: absolute; left: 6%; right: 6%; bottom: 9%; display: flex; justify-content: center; gap: 8px; }
.mr-st { flex: 1; max-width: 120px; border: 0; background: rgba(255,255,255,.9); border-radius: 18px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; color: #0A2E6E; box-shadow: 0 3px 0 rgba(200,160,40,.4); }
.mr-st b { font-size: clamp(20px, 5.6vw, 26px); font-weight: 900; line-height: 1.1; }
.mr-st span { font-size: 12px; font-weight: 800; color: #6A7890; }
.mr-st svg { width: 16px; height: 20px; }
.mr-pics { display: flex; gap: 8px; overflow-x: auto; padding: 10px 4px 2px; max-width: 520px; margin: 0 auto; width: 100%; }
.mr-pic { flex: none; width: 58px; height: 58px; border-radius: 50%; border: 3px solid #fff; padding: 0; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.mr-pic.on { border-color: #FF5C8A; }
.mr-pic img { width: 100%; height: 100%; object-fit: cover; }
@media (orientation: landscape) {
  .kid-screen { display: grid; grid-template-columns: minmax(0, 46vh) 1fr; grid-template-rows: auto auto 1fr; column-gap: 16px; align-items: start; }
  .kid-screen .game-top { grid-column: 1 / 3; }
  .my-room { grid-column: 1; grid-row: 2 / 4; max-height: none; height: calc(100dvh - 90px); width: auto; margin: 0; }
  .mr-pics { grid-column: 2; grid-row: 2; margin: 0; }
  .kid-screen .kid-form { grid-column: 2; grid-row: 3; margin-top: 8px; }
}
.kid-screen { overflow-y: auto; height: auto; min-height: 100dvh; }
.my-room, .mr-pics, .kid-screen .kid-form { flex: none; }
.my-room { height: min(62vh, calc((100vw - 32px) * 1080 / 810)); width: auto; max-width: calc(100vw - 32px); }
.sl-shops { gap: 14px 18px; }
.sl-shop img { max-width: 260px; }
.mr-frame > img { width: auto !important; height: 92% !important; max-width: none; aspect-ratio: 1; }
.mr-frame > img { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); }
@media (orientation: landscape) {
  .kid-screen { grid-template-columns: auto 1fr; }
  .my-room { height: calc(100dvh - 84px); width: auto; max-width: none; aspect-ratio: 810 / 1080; }
  .sl-dress { height: 100dvh; min-height: 0; overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .sl-dress .sl-tray { min-height: 0; }
}
/* 꾸미기 마을 → 우리 집 */
.sl-house { display: flex; align-items: center; gap: 12px; margin: 10px auto 0; width: min(92%, 520px); padding: 8px 16px 8px 8px; border: 4px solid #fff; border-radius: 22px; background: #E6F4FF; box-shadow: 0 6px 12px rgba(40,90,140,.18); text-align: left; }
.sl-house span { width: 74px; height: 74px; flex: none; border-radius: 16px; background: center / cover; }
.sl-house b { font-family: "Jua", var(--font-display); font-weight: 400; font-size: 26px; color: #1D5AA8; }
.sl-house em { font-style: normal; font-weight: 800; font-size: 14px; color: #5A7A9C; margin-left: auto; }
@media (orientation: landscape) { .sl-town .sl-house { grid-column: 1; margin-top: 4px; } }

/* 우리 집 습관 */
.habit { min-height: 100dvh; display: flex; flex-direction: column; background: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)), url(../assets/salon/bath_bg.webp) center / cover no-repeat, #E6F4FF; }
.hb-lead { margin: 4px 0 10px; text-align: center; font-family: "Jua", var(--font-display); font-size: 20px; color: #1D5AA8; text-shadow: 0 2px 0 #fff; }
.hb-list { display: grid; gap: 10px; padding: 0 16px 20px; max-width: 560px; width: 100%; margin: 0 auto; }
.hb-card { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border: 0; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 4px 10px rgba(40,90,140,.15); text-align: left; }
.hb-ic { width: 58px; height: 58px; flex: none; display: grid; place-items: center; background: #EAF6FF; border-radius: 16px; }
.hb-ic img, .hb-ic svg { width: 46px; height: 46px; object-fit: contain; }
.hb-card b { font-family: "Jua", var(--font-display); font-weight: 400; font-size: 22px; color: #0A2E6E; }
.hb-lv { margin-left: auto; font-weight: 800; font-size: 13px; color: #E08A00; white-space: nowrap; }
.hb-steps { display: flex; gap: 6px; justify-content: center; list-style: none; margin: 0; padding: 2px 8px 4px; flex-wrap: wrap; }
.hb-steps li { position: relative; width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.8); display: grid; place-items: center; border: 3px solid transparent; }
.hb-steps li span { width: 34px; height: 34px; display: grid; place-items: center; font-weight: 900; color: #8AA0C2; font-size: 20px; }
.hb-steps li img, .hb-steps li svg { width: 100%; height: 100%; object-fit: contain; }
.hb-steps li em { position: absolute; left: -5px; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: #1D5AA8; color: #fff; font-style: normal; font-size: 11px; font-weight: 900; display: grid; place-items: center; }
.hb-steps li.now { border-color: #FFB020; background: #fff; transform: scale(1.08); }
.hb-steps li.done { background: #DDF6E4; }
.hb-steps li.done::after { content: "✓"; position: absolute; right: -4px; bottom: -6px; color: #17A34A; font-weight: 900; font-size: 18px; }
.hb-say { margin: 2px auto 0; min-height: 34px; padding: 4px 16px; border-radius: 999px; background: rgba(255,255,255,.92); font-weight: 900; font-size: 18px; color: #0A2E6E; text-align: center; max-width: 92%; }
.hb-say.tip { background: #FFF6CC; color: #8A5A00; }
.hb-say.no { background: #FFE3E3; color: #C0392B; }
.hb-say.pop { animation: hxPop .3s; }
.hb-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px 12px; touch-action: none; }
.hb-fig { position: relative; max-width: 100%; max-height: 100%; }
.hb-char { height: 100%; max-height: 56vh; }
.hb-char > img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(40,80,120,.2)); }
.hb-mouth { width: min(92vw, 520px, calc(56vh * 400 / 260)); }
.hb-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 10px rgba(120,40,60,.2)); }
.hb-paw { height: min(54vh, calc(88vw * 1007 * .62 / 599)); overflow: hidden; }
.hb-pawin { position: relative; height: calc(100% / .62); }
.hb-pawin > img:first-child { width: 100%; height: 100%; display: block; }
.hb-tip { position: absolute; transition: transform .7s cubic-bezier(.4,0,.8,.4), opacity .7s; }
.hb-tip.cut { transform: translateY(160%) rotate(40deg); opacity: 0; }
.hb-fx { position: absolute; inset: 0; pointer-events: none; }
.hb-fx i { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; }
.hb-fx i.bye { opacity: 0; transition: opacity .25s; }
.hb-dirt { background: radial-gradient(circle at 40% 40%, #A87A4E, #8A5A30 60%, rgba(138,90,48,0) 75%); opacity: .7; aspect-ratio: 1.2; border-radius: 45% 55% 50% 50% !important; }
.hb-foam { background: radial-gradient(circle at 35% 30%, #fff 0 45%, #EAF4FF 70%, #D6E8FF); box-shadow: 0 1px 2px rgba(0,0,0,.08); aspect-ratio: 1; }
.hb-drop { background: radial-gradient(circle at 35% 30%, #fff 0 15%, #8FD3FF 30%, #4FA3FF); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% !important; aspect-ratio: .8; }
.hb-bubble { background: radial-gradient(circle at 35% 30%, #fff, #E0F2FF); aspect-ratio: 1; opacity: .9; }
.hb-germ { width: 5%; aspect-ratio: 1; background: radial-gradient(circle at 35% 35%, #C79BFF, #7E4BD8); box-shadow: inset -2px -2px 0 rgba(0,0,0,.15); }
.hb-germ::before, .hb-germ::after { content: ""; position: absolute; top: 34%; width: 18%; height: 18%; border-radius: 50%; background: #fff; }
.hb-germ::before { left: 26%; } .hb-germ::after { right: 26%; }
.hb-germ.bye { transform: translate(-50%, -50%) scale(1.6); }
.hb-spark { width: 7%; aspect-ratio: 1; background: radial-gradient(circle, #fff 0 20%, #FFE76A 30%, transparent 62%); animation: hbSpark .7s forwards; }
.hb-wind { width: 14%; height: 4% !important; border-radius: 999px !important; background: linear-gradient(90deg, transparent, #8FD3FF, transparent); animation: hbSpark .6s forwards; }
.hb-sun { left: 0 !important; top: 0 !important; width: 100%; height: 100%; transform: none !important; border-radius: 0 !important; background: radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.95) 0 22%, transparent 40%); }
.hb-oil { width: 8%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #fff 0 18%, #FFE59A 30%, rgba(255,210,90,.6) 60%, transparent 70%); }
.hb-paste { width: 18%; height: 8% !important; border-radius: 999px !important; background: linear-gradient(90deg, #fff, #BDE3FF, #fff); animation: hxPop .4s; }
.hb-swish { width: 70%; height: 40% !important; background: radial-gradient(ellipse, rgba(143,211,255,.7), transparent 70%); animation: hbSpark .9s forwards; }
.hb-fig.glow { animation: hbGlow .8s; }
.hb-fig.clean { animation: hbGlow 1s 2; }
@keyframes hbGlow { 50% { filter: brightness(1.12) drop-shadow(0 0 16px rgba(255,240,150,.9)); } }
@keyframes hbSpark { from { transform: translate(-50%, -50%) scale(.4); opacity: 1; } to { transform: translate(-50%, -80%) scale(1.3); opacity: 0; } }
.hb-timer { position: absolute; right: 10px; top: 4px; display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,.9); border-radius: 14px; padding: 4px 8px; animation: hxPop .4s; }
.hb-timer img { width: 40px; height: 40px; object-fit: contain; animation: hbFlip 1s; }
.hb-timer b { font-size: 13px; color: #C2185B; }
@keyframes hbFlip { from { transform: rotate(180deg); } }
.hb-tray { display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px max(10px, env(safe-area-inset-bottom)); background: rgba(255,255,255,.9); border-radius: 22px 22px 0 0; scrollbar-width: none; }
.hb-tool { flex: none; width: 74px; border: 3px solid transparent; border-radius: 16px; background: #F2F8FF; padding: 4px 2px 3px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.hb-tool img, .hb-tool svg { width: 50px; height: 50px; object-fit: contain; }
.hb-tool span { font-size: 12px; font-weight: 800; color: #3A4660; white-space: nowrap; }
.hb-tool.on { border-color: #1D5AA8; background: #fff; }
.hb-tool.hint { animation: hbHint 1s ease-in-out infinite; border-color: #FFB020; }
.hb-tool.no { animation: hbNo .35s; }
@keyframes hbHint { 50% { transform: translateY(-6px); } }
@keyframes hbNo { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.hb-hand { position: fixed; z-index: 30; width: 64px; height: 64px; transform: translate(-30%, -80%) rotate(-15deg); pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
.hb-hand img, .hb-hand svg { width: 100%; height: 100%; object-fit: contain; }
.hb-end { position: fixed; inset: 0; z-index: 40; background: rgba(20,50,90,.45); display: grid; place-items: center; padding: 16px; }
.hb-endbox { background: #fff; border-radius: 26px; padding: 18px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 360px; width: 100%; animation: hxPop .5s; }
.hb-endbox img { width: 120px; height: 120px; object-fit: contain; }
.hb-endbox b { font-family: "Jua", var(--font-display); font-weight: 400; font-size: 28px; color: #1D5AA8; }
.hb-stars { font-size: 32px; color: #FFB020; letter-spacing: 4px; }
.hb-up { margin: 0; font-weight: 800; color: #8A5A00; background: #FFF6CC; padding: 6px 12px; border-radius: 12px; }
@media (orientation: landscape) {
  .hb-play { display: grid; grid-template-columns: 1fr 200px; grid-template-rows: auto auto auto 1fr; }
  .hb-play .game-top { grid-column: 1 / 3; }
  .hb-play .hb-steps { grid-column: 1; }
  .hb-play .hb-say { grid-column: 1; }
  .hb-play .hb-stage { grid-column: 1; grid-row: 4; min-height: 0; }
  .hb-play .hb-tray { grid-column: 2; grid-row: 2 / 5; flex-wrap: wrap; align-content: flex-start; border-radius: 18px 0 0 18px; overflow-y: auto; }
  .hb-play .hb-tool { width: 84px; }
  .hb-char { max-height: calc(100dvh - 150px); }
  .hb-mouth { width: min(60vw, calc((100dvh - 150px) * 400 / 260)); }
  .hb-paw { height: calc(100dvh - 150px); }
  .hb-list { grid-template-columns: 1fr 1fr; max-width: 820px; }
}
.hb-steps li span img, .hb-steps li span svg { width: 34px !important; height: 34px !important; max-width: 34px; max-height: 34px; object-fit: contain; }
.hb-steps li { overflow: visible; }
.hb-steps li span { overflow: hidden; }
/* 틀린 그림 찾기 */
.mode-card.play.spotplay { background: linear-gradient(120deg, #6FD3C1, #3BA7E8); color: #fff; border: 0; } .mode-card.play.spotplay .mode-icon { background: rgba(255,255,255,.22); color: #fff; }
.spot { min-height: 100dvh; display: flex; flex-direction: column; background: #EAF6FF; max-width: none !important; }
.sp-bar { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 0 12px 6px; }
.sp-lv { font-weight: 900; color: #fff; background: #1D5AA8; border-radius: 999px; padding: 3px 12px; font-size: 14px; }
.sp-dots { display: flex; gap: 6px; }
.sp-dots i { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #9BB5D6; background: #fff; }
.sp-dots i.on { background: #FFB020; border-color: #E08A00; animation: hxPop .35s; }
.sp-hint { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #FFD54A; color: #5A3A00; font-weight: 900; font-size: 20px; box-shadow: 0 3px 0 #E0A800; }
.sp-pics { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; padding: 0 10px; }
.sp-pic { position: relative; width: min(100%, calc((100dvh - 190px) / 2 * 4 / 3)); aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: center / cover no-repeat; border: 4px solid #fff; box-shadow: 0 6px 14px rgba(40,90,140,.18); touch-action: manipulation; }
.sp-it { position: absolute; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.2)); }
.sp-mark { position: absolute; transform: translate(-50%, -50%); width: 20%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.sp-mark.ok { border: 4px solid #FF3B6B; box-shadow: 0 0 0 3px #fff; animation: hxPop .35s; }
.sp-mark.no { width: 9%; border: 0; background: radial-gradient(circle, rgba(255,80,80,.6), transparent 70%); animation: hbSpark .6s forwards; }
.sp-mark.hint { border: 4px dashed #FFB020; animation: hbHint .5s ease-in-out 3; }
.sp-tip { margin: 6px 0 10px; text-align: center; font-weight: 900; color: #1D5AA8; font-size: 17px; }
@media (orientation: landscape) {
  .sp-pics { flex-direction: row; }
  .sp-pic { width: min(48vw, calc((100dvh - 150px) * 4 / 3)); }
  .sp-bar { padding-bottom: 2px; }
  .sp-tip { margin: 4px 0; }
}
.hb-cor { position: absolute; transition: opacity .2s; }
.hb-steps { gap: 5px; }
.hb-steps li { width: 42px; height: 42px; }
.hb-long { position: absolute; }
.hb-tip { opacity: 0; transition: none; }
.hb-tip.cut { animation: hbTipFall .8s cubic-bezier(.4,0,.8,.4) forwards; }
@keyframes hbTipFall { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(170%) rotate(40deg); } }
/* 이 닦기: 이마다 닦은 횟수 · 쓸어내는 방향 화살표 */
.hb-cnt { position: absolute; transform: translate(-50%, -50%); min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; background: #1D5AA8; color: #fff; font-size: 13px; font-weight: 900; display: grid; place-items: center; pointer-events: none; z-index: 2; }
.hb-cnt.ok { background: #17A34A; }
.hb-cnt.ok::after { content: "✓"; margin-left: 1px; }
.hb-cnt.bump { animation: hxPop .25s; }
.hb-arrow { position: absolute; transform: translate(-50%, -50%); width: 16px; height: 34px; pointer-events: none; opacity: .75; border-radius: 0 !important; }
.hb-arrow::before { content: ""; position: absolute; left: 6px; top: 2px; width: 4px; bottom: 8px; background: #FFB020; border-radius: 2px; }
.hb-arrow::after { content: ""; position: absolute; left: 1px; bottom: 0; border: 7px solid transparent; border-top: 10px solid #FFB020; border-bottom: 0; }
.hb-arrow.down { animation: hbArrowDown 1s ease-in-out infinite; }
.hb-arrow.up { transform: translate(-50%, -50%) rotate(180deg); animation: hbArrowUp 1s ease-in-out infinite; }
.hb-arrow.side { transform: translate(-50%, -50%) rotate(90deg); animation: hbArrowSide 1s ease-in-out infinite alternate; }
@keyframes hbArrowDown { 0% { margin-top: -6px; opacity: 0; } 50% { opacity: .85; } 100% { margin-top: 6px; opacity: 0; } }
@keyframes hbArrowUp { 0% { margin-top: 6px; opacity: 0; } 50% { opacity: .85; } 100% { margin-top: -6px; opacity: 0; } }
@keyframes hbArrowSide { 0% { margin-left: -8px; } 100% { margin-left: 8px; } }
.hb-mouth.inside .hb-svg { filter: brightness(.9) saturate(.9) drop-shadow(0 8px 10px rgba(120,40,60,.2)); }
.hb-mouth.inside::before { content: "혀 쪽에서 본 안쪽"; position: absolute; left: 50%; top: -4px; transform: translate(-50%, -100%); background: #fff; color: #7A2C3C; font-weight: 900; font-size: 13px; padding: 2px 10px; border-radius: 999px; }
.hb-mouth.chew::before { content: "씹는 면 (어금니 위)"; position: absolute; left: 50%; top: -4px; transform: translate(-50%, -100%); background: #fff; color: #7A2C3C; font-weight: 900; font-size: 13px; padding: 2px 10px; border-radius: 999px; }
/* 10/15 우리 집 효과 그림(사용자 그림): 세균 3종 · 거품 · 비눗방울 · 반짝 · 물방울 · 치약 · 펑 */
.hb-fx i.hb-germ { width: 9%; background: url(../assets/salon/germ_purple.webp) center / contain no-repeat !important; box-shadow: none; border-radius: 0 !important; animation: hbGerm 1.6s ease-in-out infinite alternate; }
.hb-fx i.hb-germ:nth-of-type(3n+2) { background-image: url(../assets/salon/germ_lime.webp) !important; animation-delay: -.5s; }
.hb-fx i.hb-germ:nth-of-type(3n) { background-image: url(../assets/salon/germ_orange.webp) !important; animation-delay: -1s; }
.hb-fx i.hb-germ::before, .hb-fx i.hb-germ::after { display: none; }
.hb-fx i.hb-germ.bye { background-image: url(../assets/salon/fx_puff.webp) !important; transform: translate(-50%, -50%) scale(1.5); opacity: 0; transition: transform .3s, opacity .3s .1s; animation: none; }
@keyframes hbGerm { from { transform: translate(-50%, -50%) rotate(-8deg); } to { transform: translate(-50%, -58%) rotate(8deg); } }
.hb-fx i.hb-foam { background: url(../assets/salon/fx_foam.webp) center / contain no-repeat; box-shadow: none; border-radius: 0 !important; }
.hb-fx i.hb-bubble { background: url(../assets/salon/fx_bubbles.webp) center / contain no-repeat; border-radius: 0 !important; opacity: 1; width: 5% !important; height: auto !important; aspect-ratio: 1; }
.hb-fx i.hb-spark { background: url(../assets/salon/fx_sparkle.webp) center / contain no-repeat; border-radius: 0 !important; width: 9%; }
.hb-fx i.hb-drop { background: url(../assets/salon/fx_drop.webp) center / contain no-repeat !important; border-radius: 0 !important; aspect-ratio: .75; }
.hb-fx i.hb-paste { width: 26% !important; height: auto !important; aspect-ratio: 1.6; border-radius: 0 !important; background: url(../assets/salon/fx_paste.webp) center / contain no-repeat; }
.hb-hand.st-down img, .hb-hand.st-down svg { animation: hbStDown .22s ease-in-out; }
.hb-hand.st-up img, .hb-hand.st-up svg { animation: hbStUp .22s ease-in-out; }
.hb-hand.st-side img, .hb-hand.st-side svg { animation: hbStSide .22s ease-in-out; }
@keyframes hbStDown { 0% { transform: translateY(-14px); } 100% { transform: translateY(10px); } }
@keyframes hbStUp { 0% { transform: translateY(14px); } 100% { transform: translateY(-10px); } }
@keyframes hbStSide { 0% { transform: translateX(-12px); } 50% { transform: translateX(12px); } 100% { transform: translateX(-12px); } }
/* 10/15: 길게 누르면 뜨는 이미지 메뉴(복사·다운로드) 막기 */
.screen img, .screen svg { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
.hb-fig img { pointer-events: none; }
.hb-arrow.circle { width: 30px; height: 30px; border-radius: 50% !important; border: 4px dashed #FFB020; animation: hbArrowSpin 1.4s linear infinite; }
.hb-arrow.circle::before { display: none; }
.hb-arrow.circle::after { left: auto; right: -6px; top: 2px; bottom: auto; border: 6px solid transparent; border-top: 9px solid #FFB020; border-bottom: 0; }
@keyframes hbArrowSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hb-hand.st-circle img, .hb-hand.st-circle svg { animation: hbStCircle .22s linear; }
@keyframes hbStCircle { 0% { transform: translate(10px, 0); } 25% { transform: translate(0, 10px); } 50% { transform: translate(-10px, 0); } 75% { transform: translate(0, -10px); } 100% { transform: translate(10px, 0); } }
/* 10/16 알·별·보석 지갑, 잠금 */
.wallet { display: inline-flex; gap: 6px; align-items: center; }
.wallet .wl { display: inline-flex; align-items: center; gap: 2px; }
.wallet .wl svg { width: 18px; height: 18px; }
.wallet .wl b { font-size: 14px; }
.mr-st svg { width: 26px; height: 26px; }
.rw-star { display: inline-flex; align-items: center; gap: 2px; margin-left: 10px; color: #E89A12; animation: popIn .5s .9s both; }
.rw-star svg { width: 30px; height: 30px; }
.hx-gem { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px auto; padding: 6px 14px; border-radius: 999px; background: #E6F6FF; color: #1D6D99; font-weight: 900; width: max-content; }
.hx-gem svg { width: 28px; height: 28px; }
.is-locked { position: relative; }
.is-locked > *:not(.lk-badge) { opacity: .55; }
.seg.is-locked { opacity: 1; }
.lk-badge { position: absolute; right: -6px; top: -8px; display: inline-flex; align-items: center; gap: 1px; padding: 2px 6px 2px 3px; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgba(10,31,68,.22); font-style: normal; z-index: 3; pointer-events: none; }
.lk-badge svg { width: 16px; height: 16px; }
.lk-badge b { font-size: 12px; color: #2A3550; }
.lk-badge::before { content: "🔒"; font-size: 10px; margin-right: 2px; }
.big-btn.is-locked > *:not(.lk-badge) { opacity: 1; }
.lk-ov { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(10,31,68,.45); animation: fadeIn .2s; padding: 16px; }
.lk-ov.out { opacity: 0; transition: opacity .2s; }
.lk-box { background: #fff; border-radius: 26px; padding: 22px 22px 18px; width: min(330px, 100%); text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,.25); animation: popIn .3s; }
.lk-lock { font-size: 40px; line-height: 1; }
.lk-t { display: block; margin: 8px 0 10px; font-size: 20px; color: #13254A; line-height: 1.35; }
.lk-have { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; }
.lk-have svg { width: 34px; height: 34px; }
.lk-have span { color: #8A94A8; font-size: 16px; }
.lk-need { margin: 10px 0 0; color: #B4473A; font-weight: 800; font-size: 15px; line-height: 1.45; }
.lk-btns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.lk-btns .big-btn { min-width: 110px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.kid-eggs .wallet svg { width: 16px; height: 18px; }
.kid-eggs .wallet b { font-size: 13px; }
.kid-eggs .wallet { gap: 5px; }
/* 10/16 물방울 그림(사용자) 7가지 */
.hb-fx i.hb-drop { aspect-ratio: 1; background-image: url(../assets/salon/fx_wdrop0.webp) !important; }
.hb-fx i.hb-drop.v1 { background-image: url(../assets/salon/fx_wdrop1.webp) !important; }
.hb-fx i.hb-drop.v2 { background-image: url(../assets/salon/fx_wdrop2.webp) !important; }
.hb-fx i.hb-drop.v3 { background-image: url(../assets/salon/fx_wdrop3.webp) !important; }
.hb-fx i.hb-drop.v4 { background-image: url(../assets/salon/fx_wdrop4.webp) !important; }
.hb-fx i.hb-drop.v5 { background-image: url(../assets/salon/fx_wdrop5.webp) !important; }
.hb-fx i.hb-drop.v6 { background-image: url(../assets/salon/fx_wdrop6.webp) !important; aspect-ratio: .7; }
/* 10/16 부드러운 발굴 붓(사용자 그림): 털 끝이 손가락 자리 */
.dig-brush img { position: absolute; left: -26px; top: -92px; width: 84px; height: auto; transform-origin: 26px 92px; filter: drop-shadow(3px 5px 4px rgba(60, 35, 10, .3)); pointer-events: none; }
.dig-brush.idle img { animation: digBrushHint 1.2s ease-in-out infinite; }
.dig-brush.on img { animation: none; }
/* 별·보석 그림 */
.ic-img { display: inline-block; object-fit: contain; vertical-align: middle; }
.wallet .wl img, .lk-badge img { width: 18px; height: 18px; }
.lk-have img, .mr-st img, .hx-gem img { width: 32px; height: 32px; }
.rw-star img { width: 34px; height: 34px; }
/* 10/16 발굴: 붓으로 쓸기 — 흙이 조금씩 얇아지고 뼈가 드러남 */
.lab-sand { touch-action: none; overflow: hidden; }
.lab-mound { pointer-events: none; }
.lab-mound .lab-bone { opacity: calc(var(--p) * 1.1); transition: none; }
.lab-mound .lab-dirt { animation: none; opacity: calc(1 - var(--p) * .85); transform: scale(calc(1 - var(--p) * .25)) translateY(calc(var(--p) * 6%)); transition: opacity .15s, transform .15s; }
.lab-mound .lab-dirt.d2 { inset: 12% 8% 0; opacity: calc(1 - var(--p) * 1.6); background: radial-gradient(circle at 50% 30%, #A97A47, #845A2F 80%); border-radius: 50%; }
.lab-mound.open .lab-dirt { opacity: 0; transform: scale(1.2); }
.lab-mound.open .lab-bone { opacity: 1; animation: labFly .45s .3s forwards; }
.lab-sbrush { position: absolute; width: 74px; height: auto; left: 86%; top: 82%; transform: translate(-28%, -90%) rotate(-6deg); pointer-events: none; z-index: 4; filter: drop-shadow(3px 5px 4px rgba(60,35,10,.3)); transition: transform .1s; }
.lab-sbrush.idle { animation: labBrushHint 1.2s ease-in-out infinite; }
.lab-sbrush.on { transform: translate(-28%, -90%) rotate(-14deg); }
@keyframes labBrushHint { 0%, 100% { transform: translate(-28%, -90%) rotate(-6deg); } 50% { transform: translate(-48%, -90%) rotate(-16deg); } }
.lab-tray-t { color: #fff; font-size: 14px; font-weight: 900; margin-right: 4px; }
.lab-slot { width: 66px; height: 52px; border-radius: 12px; border: 2px dashed rgba(255,255,255,.45); background-repeat: no-repeat; background-origin: content-box; padding: 4px; }
.lab-slot.got { border-style: solid; border-color: #FFD54A; background-color: rgba(255,255,255,.08); animation: hxPop .4s both; }
@media (max-width: 520px) {
  .kid-eggs .wallet { gap: 3px; }
  .kid-eggs .wallet .wl { gap: 1px; }
  .kid-eggs .wallet img, .kid-eggs .wallet svg { width: 14px; height: 15px; }
  .kid-eggs .wallet b { font-size: 12px; }
  .kid-eggs { padding-left: 4px; }
  .kid-chip { gap: 4px; padding-right: 8px; }
}
/* 10/16 지갑(알·별·보석)이 들어가며 제목과 겹치지 않게 */
.home-top { gap: 8px; }
.home-top .brand { min-width: 0; flex-shrink: 1; white-space: nowrap; }
.home-top-r { flex-shrink: 0; }
@media (max-width: 520px) { .home-top .brand-name, .home-top .brand-sub { font-size: clamp(22px, 7.4vw, 34px); } .home-top .brand { gap: 6px; } }
@media (orientation: landscape) and (max-height: 520px) { .home-top .brand-name, .home-top .brand-sub { font-size: clamp(24px, 4vw, 36px); } }
@media (max-width: 430px) and (orientation: portrait) { .home-top .brand { flex-direction: column; align-items: flex-start; gap: 0; } .home-top .brand-name { font-size: 26px; } .home-top .brand-sub { font-size: 20px; } }
/* 10/16 네일: 매니큐어 광택 + 색 16가지 줄 맞춤 */
.sl-nl.g { background: radial-gradient(ellipse 18% 9% at 30% 18%, rgba(255,255,255,.85), transparent 70%), radial-gradient(ellipse 14% 7% at 50% 4%, rgba(255,255,255,.7), transparent 70%), radial-gradient(ellipse 14% 8% at 76% 16%, rgba(255,255,255,.75), transparent 70%); mix-blend-mode: screen; }
.sl-nail .sl-colors { gap: 8px; max-width: 420px; margin: 0 auto; }
.sl-nail .sl-col { width: 36px; height: 36px; border-width: 3px; }
.sl-nail .sl-pats { gap: 8px; max-width: 440px; margin: 0 auto; }
.sl-nail .sl-pat { width: 44px; height: 34px; }
/* 10/16 새 네일 발(작고 둥근 발톱): 누르는 자리·광택 */
.sl-nhit.n0 { left: 2%; top: 9%; width: 29%; height: 30%; }
.sl-nhit.n1 { left: 35%; top: -3%; width: 30%; height: 25%; }
.sl-nhit.n2 { left: 69%; top: 10%; width: 30%; height: 30%; }
.sl-nl.g { background: radial-gradient(ellipse 4% 2.4% at 12% 19%, rgba(255,255,255,.9), transparent 70%), radial-gradient(ellipse 4% 2.4% at 46% 3%, rgba(255,255,255,.9), transparent 70%), radial-gradient(ellipse 4% 2.4% at 82% 20%, rgba(255,255,255,.9), transparent 70%); }
/* 10/16 점토 효과 그림(사용자 9칸): 물방울·물 튀김·로션·선크림·오일·바람 */
.hb-fx i.hb-drop, .hb-fx i.hb-drop.v0, .hb-fx i.hb-drop.v2, .hb-fx i.hb-drop.v3, .hb-fx i.hb-drop.v4, .hb-fx i.hb-drop.v5, .hb-fx i.hb-drop.v6 { background-image: url(../assets/salon/fx2_drop.webp) !important; aspect-ratio: .82; }
.hb-fx i.hb-drop.v1 { background-image: url(../assets/salon/fx2_drops.webp) !important; aspect-ratio: .92; }
.hb-fx i.hb-splash { background: url(../assets/salon/fx2_splash.webp) center / contain no-repeat; border-radius: 0 !important; aspect-ratio: 1.2; animation: hbSplash .65s ease-out forwards; }
@keyframes hbSplash { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1.1); opacity: 0; } }
.hb-fx i.hb-cream { background: url(../assets/salon/fx2_lotion.webp) center / contain no-repeat; border-radius: 0 !important; aspect-ratio: 1.07; transition: opacity .2s; filter: drop-shadow(0 2px 2px rgba(0,0,0,.12)); }
.hb-fx i.hb-cream.sun { background-image: url(../assets/salon/fx2_sun.webp); aspect-ratio: 1.76; }
.hb-fx i.hb-cream.oil { background-image: url(../assets/salon/fx2_oil.webp); aspect-ratio: .74; }
.hb-fx i.pop { animation: hbPop 1.1s ease-out forwards; }
@keyframes hbPop { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.8); opacity: 0; } }
.hb-fx i.hb-wind { width: 16% !important; height: auto !important; aspect-ratio: 1.24; background: url(../assets/salon/fx2_wind.webp) center / contain no-repeat !important; border-radius: 0 !important; }
.hb-fx i.hb-oil { background: url(../assets/salon/fx2_oil.webp) center / contain no-repeat !important; border-radius: 0 !important; aspect-ratio: .74; }
/* 10/16 가발·개구리 모자 뒤 그림(캐릭터 뒤) */
.sl-back { position: absolute; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.15)); }
/* 10/16 첫 화면 친구들(빔빔 양옆, 크기 다르게) */
.s3-fr { position: absolute; z-index: 2; line-height: 0; background: none; border: 0; padding: 0; transform-origin: 50% 100%; -webkit-tap-highlight-color: transparent; animation: s3Bob 3s ease-in-out infinite; }
.s3-fr img { width: 100%; height: auto; display: block; pointer-events: none; filter: drop-shadow(0 8px 6px rgba(30, 90, 50, .2)); }
.s3-fr.boing { animation: bdBoing .55s cubic-bezier(.2,1.6,.4,1); }
.s3-bori { animation-delay: -1.1s; } .s3-kong { animation-delay: -2s; z-index: 4; }
@media (orientation: portrait) {
  .s3-tino { width: min(34vw, 20vh); left: -3%; bottom: 22vh; }
  .s3-bori { width: min(42vw, 25vh); right: -6%; bottom: 23vh; }
  .s3-kong { width: min(26vw, 15vh); right: 2%; bottom: 15.5vh; }
}
@media (orientation: landscape) {
  .s3-tino { width: min(17vw, 34vh); left: 44%; bottom: 6vh; }
  .s3-bori { width: min(19vw, 40vh); right: -2%; bottom: 8vh; }
  .s3-kong { width: min(12vw, 24vh); left: 57%; bottom: 3vh; }
}
@media (prefers-reduced-motion: reduce) { .s3-fr { animation: none; } }
/* 10/16 키우기 고도화: 보살핌 게이지 4개 · 단계 이름 · 3D 아기 공룡 그림 */
.pet-needs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 2px 6px 0; flex: none; }
.pn { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pn i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--c); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(10,31,68,.15); }
.pn i svg { width: 20px; height: 20px; }
.pn b { flex: 1; height: 12px; border-radius: 99px; background: #E3EAF5; overflow: hidden; box-shadow: inset 0 1px 3px rgba(10,31,68,.15); }
.pn s { display: block; height: 100%; border-radius: 99px; background: var(--c); transition: width .6s cubic-bezier(.2,1.3,.4,1); text-decoration: none; }
.pn.up i { animation: bdBoing .5s cubic-bezier(.2,1.6,.4,1); }
.pg-stage { flex: none; font-style: normal; font-weight: 900; font-size: 14px; color: #fff; background: linear-gradient(120deg, #FFB020, #FF7A3D); padding: 4px 10px; border-radius: 99px; box-shadow: 0 2px 6px rgba(200,100,0,.3); }
.pet-dino.has-pose { width: 100%; height: 72%; max-height: none; aspect-ratio: auto; display: flex; align-items: flex-end; justify-content: center; bottom: 6%; }
.pet-dino.has-pose .pet-pose { width: 50%; height: auto; max-height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 10px 8px rgba(40,30,10,.25)); transform: scaleX(var(--face, 1)); transition: transform .3s; }
.pet-dino.has-pose.sleep { filter: none; }
.pet.night .pet-dino.has-pose .pet-pose { filter: brightness(.8) drop-shadow(0 10px 8px rgba(0,0,0,.3)); }
/* ===== 10/16 키우기 고도화(pet2): 방·가구·먹이 고르기·산책·꾸미기 ===== */
.pet2 { gap: 6px; }
.pet2 .pet-scene { border-radius: 24px; box-shadow: 0 8px 20px rgba(10,31,68,.22), inset 0 0 0 3px rgba(255,255,255,.7); }
.pet2 .pet-furn { position: absolute; inset: 0; z-index: 1; }
.pf { position: absolute; transform: translate(0, -100%); border: 0; background: none; padding: 0; line-height: 0; -webkit-tap-highlight-color: transparent; }
.pf img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 5px rgba(60,35,10,.25)); pointer-events: none; }
.pf.wig { animation: pfWig .5s ease; }
@keyframes pfWig { 30% { transform: translate(0,-100%) rotate(-6deg) scale(1.06); } 60% { transform: translate(0,-100%) rotate(5deg); } }
.pf-lamp img { filter: drop-shadow(0 0 14px rgba(255,230,140,.7)) drop-shadow(0 6px 5px rgba(60,35,10,.25)); }
.pet2 .pet-dino { z-index: 70; }
.pet2 .pet-dino.has-pose { bottom: 5%; height: 66%; transition: left 1.5s ease-in-out; }
.pet2 .pet-dino.walk .pet-pose { animation: petWalkBob .4s ease-in-out infinite alternate; }
@keyframes petWalkBob { to { transform: scaleX(var(--face, 1)) translateY(-4%) rotate(calc(var(--face, 1) * -2deg)); } }
.pet2 .pet-dino.on-bed { bottom: 22%; }
.pet-dark { position: absolute; inset: 0; z-index: 80; pointer-events: none; background: radial-gradient(ellipse at 30% 75%, rgba(255,214,120,.12), rgba(10,14,40,.35) 70%); }
.pet2 .pet-fx { z-index: 90; }
/* 먹이 쟁반 */
.pet-tray { position: absolute; left: 3%; right: 3%; top: 4%; z-index: 95; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 10px; border-radius: 22px; background: rgba(255,255,255,.88); box-shadow: 0 8px 20px rgba(0,0,0,.2); backdrop-filter: blur(4px); animation: popIn .3s; }
.pet-tray[hidden] { display: none; }
.pet-tray .pet-food { width: min(15%, 76px); padding: 0; border-width: 3px; background: #FFF8EC; }
.pet-tray .pet-food.water { background: #EAF6FF; }
.pet-tray .pet-food img { left: 10%; top: 10%; width: 80%; height: 80%; }
.pet-flyfood { position: absolute; z-index: 96; width: 64px; height: 64px; object-fit: contain; transform: translate(-50%, -50%); transition: left .5s cubic-bezier(.3,.7,.4,1), top .5s cubic-bezier(.3,-.4,.6,1), transform .5s; pointer-events: none; }
/* 말풍선(먹고 싶은 것·안 먹어요) */
.pet-bub { position: absolute; bottom: 64%; transform: translateX(-30%); z-index: 92; min-width: 64px; height: 64px; padding: 8px 12px; border-radius: 32px; background: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; gap: 4px; animation: popIn .3s; }
.pet-bub::after { content: ""; position: absolute; left: 22%; bottom: -10px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.pet-bub img { width: 46px; height: 46px; object-fit: contain; }
.pet-bub b { font-size: 30px; color: #E8364F; line-height: 1; }
.pet-bub b.dirty { color: #9C7A4E; }
/* 방 꾸미기 버튼(오른쪽 위) */
.pet-deco { position: absolute; right: 3%; top: 3%; z-index: 93; width: 54px; height: 54px; border-radius: 50%; border: 3px solid #fff; background: rgba(255,255,255,.85); box-shadow: 0 4px 10px rgba(0,0,0,.2); padding: 6px; }
.pet-deco img { width: 100%; height: 100%; object-fit: contain; }
/* 아래 버튼 5개: 그림 + 짧은 이름 */
.pet2 .pet-bar { gap: 10px; flex-wrap: nowrap; }
.pet2 .pet-btn { width: 64px; height: 64px; position: relative; padding: 0; }
.pet2 .pet-btn img { width: 72%; height: 72%; object-fit: contain; }
.pet2 .pet-btn svg { width: 32px; height: 32px; }
.pet2 .pet-btn span { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); font-size: 13px; font-weight: 900; color: #0A2E6E; white-space: nowrap; }
.pet2 .pet-bar { padding-bottom: 18px; }
.pet-btn.walkb { background: linear-gradient(120deg, #7BD88F, #2FA866); }
.pet-btn.ballb { background: linear-gradient(120deg, #9EC9FF, #5C8DF0); }
.pet-btn.bathb { background: linear-gradient(120deg, #7FD8F5, #2E9FD8); }
.pn.low i { animation: pnLow 1s ease-in-out infinite; }
@keyframes pnLow { 50% { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(255,90,90,.35); } }
.pg-stage.next { background: #E3EAF5; color: #7A88A6; box-shadow: none; }
/* 꾸미기·산책 고르기 창 */
.pet-shop { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 16px; background: rgba(10,31,68,.45); animation: fadeIn .2s; }
.ps-box { width: min(420px, 100%); max-height: 92dvh; overflow: auto; background: #FFFDF6; border-radius: 26px; padding: 18px 16px 16px; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,.3); animation: popIn .3s; }
.ps-t { display: block; font-size: 22px; color: #0A2E6E; margin-bottom: 12px; }
.ps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.ps-it { position: relative; aspect-ratio: 1; border-radius: 18px; border: 3px solid #fff; background: #F1EAD8; box-shadow: 0 3px 8px rgba(0,0,0,.12); padding: 10%; }
.ps-it img { width: 100%; height: 100%; object-fit: contain; }
.ps-it.have { background: #E4F6E4; }
.ps-ok { position: absolute; right: 4px; bottom: 4px; width: 24px; height: 24px; border-radius: 50%; background: #2FA866; color: #fff; font-style: normal; font-weight: 900; line-height: 24px; }
.ps-it .lk-badge { right: 4px; top: 4px; }
.pw-picks { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
.pw-pk { position: relative; border: 3px solid #fff; border-radius: 18px; overflow: hidden; padding: 0; aspect-ratio: 3 / 1.3; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.pw-pk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-pk span { position: absolute; left: 12px; bottom: 10px; background: rgba(255,255,255,.92); color: #0A2E6E; font-weight: 900; font-size: 18px; padding: 4px 14px; border-radius: 99px; }
.pw-got { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.pw-got img { width: 56px; height: 56px; object-fit: contain; }
/* 산책 화면 */
.pw-bag { display: flex; justify-content: center; gap: 8px; flex: none; }
.pw-bag i { width: 48px; height: 48px; border-radius: 14px; border: 3px dashed #C5D0E2; background: #fff; display: grid; place-items: center; }
.pw-bag i.on { border-style: solid; border-color: #FFC21A; animation: popIn .4s; }
.pw-bag i img { width: 80%; height: 80%; object-fit: contain; }
.pet-scene.walk .pet-dino { transition: left 1.2s ease-in-out; }
.pw-it { position: absolute; z-index: 80; width: 13%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; animation: pwTwinkle 1.6s ease-in-out infinite; }
.pw-it::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,220,.75), transparent); }
.pw-it img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
.pw-it.got { animation: none; transform: translate(-50%, -160%) scale(.3); opacity: 0; transition: transform .5s ease-in, opacity .5s; }
@keyframes pwTwinkle { 50% { transform: translate(-50%, -58%) scale(1.06); } }
@media (orientation: portrait) { .pet2 .pet-scene { aspect-ratio: 4 / 5; } .pet-walk .pet-scene { aspect-ratio: 3 / 4; } }
@media (orientation: landscape) and (max-height: 520px) {
  .pet2 .pet-needs { grid-template-columns: repeat(4, minmax(0, 120px)); justify-content: center; }
  .pet2 .pet-bar { position: absolute; right: 14px; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; gap: 22px; padding-bottom: 0; }
  .pet2 .pet-btn { width: 52px; height: 52px; }
  .pet2 .pet-btn span { bottom: -16px; font-size: 11px; }
  .pet2 .pet-scene { margin-right: 74px; }
}
.pet-trayx { position: absolute; right: -6px; top: -6px; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; background: #8A94A8; color: #fff; font-weight: 900; font-size: 16px; line-height: 1; box-shadow: 0 3px 6px rgba(0,0,0,.2); }
@media (orientation: portrait) { .pet2 .pet-scene { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; } .pet2 { justify-content: flex-start; } }
@keyframes popIn { 0% { scale: .6; opacity: 0; } 70% { scale: 1.06; opacity: 1; } 100% { scale: 1; } }
.ps-it > img { width: 100%; height: 100%; object-fit: contain; }
.ps-it img { width: auto; height: auto; }
.ps-it > img { width: 100%; height: 100%; }
.ps-it.is-locked > img { opacity: .6; filter: grayscale(.3); }
.ps-it .lk-badge img, .lk-badge img.ic-img { width: 16px !important; height: 16px !important; }
/* 10/16 첫 화면 티노·콩이: 더 잘 보이게 움직이기(콩이는 그림 한 장이라 몸짓으로) */
.s3-tino { animation: s3TinoHop 2.4s ease-in-out infinite; }
@keyframes s3TinoHop { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-14%) rotate(-4deg); } 80% { transform: translateY(0) scale(1.04, .96); } 88% { transform: translateY(-6%) rotate(3deg); } }
.s3-kong { animation: s3KongWaddle 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes s3KongWaddle { 0%, 100% { transform: rotate(-5deg) translateX(0); } 25% { transform: rotate(0) translateY(-6%); } 50% { transform: rotate(5deg) translateX(4%); } 75% { transform: rotate(0) translateY(-6%); } }
@media (prefers-reduced-motion: reduce) { .s3-tino, .s3-kong { animation: none; } }
/* 10/16 아이섀도: 눈 바로 위에 살짝 비치게(눈썹처럼 보이지 않게) */
.sl-item.k-shadow { opacity: .62; filter: blur(.4px) saturate(.9); }
/* 10/16 새 네일 발: 제목을 가리지 않게 작게, 칸 안에 */
.sl-nail .sl-paw-wrap { overflow: hidden; padding-top: 6px; }
.sl-nail .sl-paw { width: min(76vw, calc(44vh * 600 / 640), 420px); }
@media (orientation: landscape) and (max-height: 520px) { .sl-nail .sl-paw { width: min(calc((100dvh - 90px) * 600 / 640), 46vw); } }
/* 10/16 옷가게 종류 탭 */
.sl-cats { display: flex; gap: 6px; justify-content: center; padding: 4px 10px 6px; flex-wrap: nowrap; overflow-x: auto; }
.sl-cat { flex: none; padding: 6px 14px; border-radius: 99px; border: 2px solid #fff; background: rgba(255,255,255,.8); color: #7A4A6E; font-weight: 900; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.sl-cat.on { background: #FF5C8A; color: #fff; }
.sl-st[hidden] { display: none; }
@media (orientation: landscape) and (max-height: 520px) {
  .sl-dress { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
  .sl-dress .sl-stage { grid-row: 2 / 6; }
  .sl-dress .sl-cats { grid-column: 2; grid-row: 3; justify-content: flex-start; flex-wrap: wrap; gap: 4px; padding: 2px 8px 4px 0; overflow: visible; }
  .sl-dress .sl-cat { width: auto; height: auto; padding: 3px 9px; font-size: 12px; border-radius: 99px; }
  .sl-dress .sl-tray { grid-row: 4; }
  .sl-dress .sl-bar { grid-row: 5; }
}

/* 10/16 내 방 사진 크게 보기, 숫자 칸 줄 맞춤 */
.mr-zoom { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: zoom-in; }
.mr-zoom > img { height: 92%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 4px #fff; position: absolute; top: 4%; left: 50%; transform: translateX(-50%); }
.mr-zov { position: fixed; inset: 0; z-index: 9000; background: rgba(10,30,70,.82); display: grid; place-items: center; padding: 24px; animation: popIn .25s both; }
.mr-zov.out { opacity: 0; transition: opacity .2s; }
.mr-zov img { max-width: min(92vw, 640px); max-height: 82vh; border-radius: 26px; border: 6px solid #fff; box-shadow: 0 12px 40px rgba(0,0,0,.4); object-fit: contain; background: #fff; }
.mr-zx { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; color: #0A2E6E; font-size: 22px; font-weight: 900; }
.mr-st { justify-content: flex-start; }
.mr-st > svg, .mr-st > img { width: 30px !important; height: 30px !important; flex: none; margin-bottom: 2px; }
.mr-st span { white-space: nowrap; }
/* 10/16 빔빔 마을 · 직업 마을 */
.town { background: linear-gradient(180deg, #BFE6FF, #DFF5D8); }
.tw-wrap { flex: 1; min-height: 0; display: grid; place-items: center; padding: 6px 10px 12px; }
.tw-map { position: relative; height: 100%; max-height: 100%; aspect-ratio: 2 / 3; max-width: 100%; background: #CDEFB8 center / cover no-repeat; border-radius: 26px; box-shadow: 0 10px 24px rgba(30,80,40,.25); overflow: hidden; }
.tw-b { position: absolute; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; }
.tw-b img { width: 100%; filter: drop-shadow(0 6px 6px rgba(20,60,30,.3)); transition: transform .2s; }
.tw-b:active img { transform: scale(.94); }
.tw-b b { margin-top: -6%; background: #fff; color: #0A2E6E; font-size: clamp(11px, 3.4vw, 16px); font-weight: 900; padding: 2px 10px; border-radius: 99px; box-shadow: 0 2px 4px rgba(0,0,0,.15); white-space: nowrap; }
.tw-b.soon img { filter: grayscale(.45) brightness(.97) drop-shadow(0 6px 6px rgba(20,60,30,.3)); }
.tw-soon { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-6deg); background: repeating-linear-gradient(135deg, #FFD23F 0 8px, #333 8px 16px); color: #fff; font-style: normal; font-weight: 900; font-size: 12px; padding: 2px 10px; border-radius: 6px; text-shadow: 0 1px 2px #000; }
.tw-b.nope { animation: twNope .45s; }
@keyframes twNope { 25% { transform: translate(-54%, -50%); } 75% { transform: translate(-46%, -50%); } }
.tw-bb { position: absolute; left: 52%; top: 90%; width: 17%; transform: translate(-50%, -80%); transition: left .6s ease, top .6s ease; pointer-events: none; filter: drop-shadow(0 6px 4px rgba(0,0,0,.2)); }
.tw-bb.walk { animation: twHop .2s 3 alternate; }
@keyframes twHop { to { translate: 0 -8%; } }
.tw-toast { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; color: #0A2E6E; font-weight: 900; font-size: 18px; padding: 10px 20px; border-radius: 99px; box-shadow: 0 6px 16px rgba(0,0,0,.2); animation: popIn .3s both; z-index: 5; }
.jobs .jv-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 8px 14px 16px; align-content: center; }
.jv-b { position: relative; border: 0; background: rgba(255,255,255,.75); border-radius: 22px; padding: 6px 4px 8px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 0 rgba(60,120,80,.25); }
.jv-b img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.jv-b b { font-size: clamp(12px, 3.6vw, 16px); color: #0A2E6E; font-weight: 900; }
.jv-st { position: absolute; top: 4px; right: 4px; width: 30%; }
.stp { display: block; aspect-ratio: 1; border-radius: 50%; border: 3px dashed #E8473A; background: #fff; padding: 8%; transform: rotate(-12deg); box-shadow: 0 0 0 2px #fff; }
.stp img { width: 100%; height: 100%; object-fit: contain; filter: sepia(1) saturate(3) hue-rotate(-30deg) brightness(.9); }
.jv-book { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 14px; z-index: 3; border: 0; background: #fff; border-radius: 16px; padding: 4px 12px; display: flex; align-items: baseline; gap: 3px; color: #E8473A; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.jv-book b { font-size: 22px; font-weight: 900; } .jv-book span { font-size: 13px; color: #8890A0; font-weight: 800; } .jv-book em { font-style: normal; font-size: 13px; font-weight: 900; color: #0A2E6E; margin-left: 4px; }
@media (orientation: landscape) { .jobs .jv-grid { grid-template-columns: repeat(5, 1fr); max-width: 900px; margin: 0 auto; width: 100%; } }
.jv-ov { position: fixed; inset: 0; z-index: 8000; background: rgba(10,30,70,.6); display: grid; place-items: center; padding: 16px; animation: popIn .25s both; }
.jv-ov.out { opacity: 0; transition: opacity .2s; }
.jv-pass { width: min(94vw, 440px); max-height: 92vh; overflow: auto; background: #FFF8E6; border-radius: 26px; padding: 18px 16px; text-align: center; box-shadow: 0 0 0 6px #fff, 0 16px 40px rgba(0,0,0,.3); }
.jv-pt { display: block; font-size: 22px; font-weight: 900; color: #0A2E6E; margin-bottom: 12px; }
.jv-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.jv-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; color: #6A7890; }
.jv-slot .stp { width: 78%; }
.jv-slot b { font-weight: 900; } .jv-slot.on b { color: #E8473A; }
.jv-slot i { position: absolute; top: 0; right: 4px; font-style: normal; font-weight: 900; color: #E8473A; font-size: 13px; }
.jv-empty { width: 78%; aspect-ratio: 1; border-radius: 50%; border: 3px dashed #D5D9E2; }
.jv-bigstamp { width: 52%; margin: 4px auto 10px; animation: stampIn .5s .3s both; }
@keyframes stampIn { 0% { transform: scale(2.4); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1); } }
.jv-msg { font-size: 17px; font-weight: 900; color: #0A2E6E; margin: 0 0 12px; }
/* 일하기 */
.job .jb-lv { margin: 0 auto 4px; }
.jb-play { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 10px 10px; }
.jb-scene { position: relative; width: min(100%, calc(100dvh - 250px)); aspect-ratio: 1; background: #FFF4DA center / cover no-repeat; border-radius: 24px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,.18); touch-action: none; user-select: none; -webkit-user-select: none; }
.jb-tray { width: 100%; max-width: 640px; min-height: 84px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }
@media (orientation: landscape) {
  .jb-play { flex-direction: row; justify-content: center; align-items: stretch; }
  .jb-scene { width: auto; height: 100%; max-height: calc(100dvh - 120px); }
  .jb-tray { width: 190px; flex-direction: column; flex-wrap: wrap; max-height: calc(100dvh - 120px); justify-content: center; }
}
.jb-it { width: 76px; height: 76px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.12); padding: 8px; touch-action: none; animation: popIn .3s both; position: relative; }
.jb-it img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.jb-it.lift { opacity: .35; }
.jb-it.used { opacity: .25; filter: grayscale(1); pointer-events: none; }
.jb-it.hint { animation: jbWiggle 1.2s infinite; }
.jb-it.pay { width: auto; padding: 0 18px; background: #2DB36F; color: #fff; font-size: 18px; }
.jb-it.coin { background: #FFF3C4; }
@keyframes jbWiggle { 50% { transform: rotate(-8deg) scale(1.06); } }
.jb-ghost { position: fixed; z-index: 9000; pointer-events: none; transform: translate(-50%, -60%) scale(1.08); filter: drop-shadow(0 8px 6px rgba(0,0,0,.3)); }
.jb-a { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; transition: scale .3s, opacity .3s; filter: drop-shadow(0 4px 3px rgba(0,0,0,.15)); }
.jb-a.ghost { opacity: .55; filter: none; }
.jb-a.flame { animation: jbFlame .5s infinite alternate; transform-origin: 50% 90%; }
@keyframes jbFlame { to { transform: translate(-50%, -50%) scaleY(1.08) scaleX(.95); } }
.jb-a.out { opacity: 0 !important; }
.jb-a.hot { animation: jbHot .3s 4 alternate; }
@keyframes jbHot { to { filter: drop-shadow(0 0 12px #FF5C5C) brightness(1.08); } }
.jb-a.gone { animation: jbGone .6s forwards; pointer-events: none; }
@keyframes jbGone { to { scale: .3; opacity: 0; } }
.jb-a.grab { animation: jbWiggle 1.2s infinite; cursor: grab; }
.jb-a.tapme { animation: jbPulse 1s infinite; cursor: pointer; }
@keyframes jbPulse { 50% { filter: drop-shadow(0 0 10px #FFF06A) brightness(1.1); scale: 1.06; } }
.jb-a.pull { animation: jbPull .38s; }
@keyframes jbPull { 40% { translate: 0 -24%; } }
.jb-a.hop, .jb-wk.hop { animation: jbHopA .45s; }
@keyframes jbHopA { 40% { translate: 0 -10%; } }
.jb-a.found { animation: jbPulse .5s 3; }
.jb-spot { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 4px dashed var(--c, #fff); background: radial-gradient(circle, rgba(255,255,255,.45), rgba(255,255,255,0) 70%); animation: jbSpot 1s infinite; pointer-events: none; }
@keyframes jbSpot { 50% { scale: 1.12; opacity: .7; } }
.jb-ring { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; --p: 0; background: conic-gradient(#2DB36F calc(var(--p) * 360deg), rgba(255,255,255,.5) 0); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%); pointer-events: none; }
.jb-ring.on { filter: drop-shadow(0 0 6px #fff); }
.jb-tool { position: absolute; width: 16%; transform: translate(-50%, -50%) rotate(-20deg); pointer-events: none; z-index: 4; }
.jb-drop { position: absolute; width: 3%; aspect-ratio: 1; border-radius: 50%; background: #7CCBFF; transform: translate(-50%, -50%); animation: jbDrop .6s forwards; pointer-events: none; z-index: 3; }
.jb-drop.dust { background: #D8D2C6; }
@keyframes jbDrop { to { translate: 0 30%; scale: .2; opacity: 0; } }
.jb-spark { position: absolute; width: 18%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, #fff 0 10%, transparent 12%), conic-gradient(from 0deg, transparent 0 10%, #FFE45C 10% 14%, transparent 14% 35%, #FFE45C 35% 39%, transparent 39% 60%, #FFE45C 60% 64%, transparent 64% 85%, #FFE45C 85% 89%, transparent 89%); border-radius: 50%; animation: jbSpark .7s forwards; pointer-events: none; z-index: 5; }
@keyframes jbSpark { from { scale: .3; opacity: 1; } to { scale: 1.4; opacity: 0; rotate: 45deg; } }
.jb-wk { position: absolute; left: 12%; bottom: 1%; width: 22%; aspect-ratio: 446 / 640; z-index: 2; pointer-events: none; }
.jb-wk img { position: absolute; }
.wk-bb { inset: 0; width: 100%; height: 100%; }
.wk-wear { left: 50%; top: 56%; width: 57.75%; transform: translate(-50%, -10%); }
.wk-hat { left: 50%; top: 16%; width: 66%; transform: translate(-50%, -74%); }
.wk-tool { left: 80%; top: 76%; width: 23%; transform: translate(-50%, -50%); }
.jb-say { position: absolute; left: 4%; right: 4%; top: 3%; text-align: center; background: #fff; color: #0A2E6E; font-weight: 900; font-size: clamp(15px, 4.4vw, 20px); padding: 8px 12px; border-radius: 18px; box-shadow: 0 4px 10px rgba(0,0,0,.15); z-index: 6; pointer-events: none; }
.jb-say:empty { display: none; }
.jb-say.pop { animation: popIn .35s both; }
.jb-say.ok { background: #E3FBEA; color: #1B7A45; }
.jb-say.no { background: #FFE8E3; color: #C2412D; }
.jb-say.num { font-size: clamp(26px, 8vw, 40px); left: 38%; right: 38%; }
.jb-dots { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 6; }
.jb-dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.7); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.jb-dots i.on { background: #FFD23F; }
.jb-order { position: absolute; right: 3%; top: 16%; background: #fff; border-radius: 16px; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; z-index: 5; box-shadow: 0 4px 10px rgba(0,0,0,.15); font-size: 13px; color: #0A2E6E; }
.jb-order span { display: flex; align-items: center; gap: 3px; }
.jb-order img { width: 26px; height: 26px; object-fit: contain; }
.jb-order i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #E8A04A; }
.jb-order i.on { background: #E8A04A; }
.jb-order span.ok { opacity: .55; }
.jb-pal { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.92); padding: 6px 12px; border-radius: 18px; z-index: 5; font-size: 22px; font-weight: 900; color: #0A2E6E; }
.jb-pal i { width: 46px; height: 46px; border-radius: 50%; border: 3px dashed #C9CFDA; display: grid; place-items: center; font-style: normal; }
.jb-pal img { width: 100%; height: 100%; object-fit: contain; }
.jb-pal img.hintc { opacity: .4; }
.jb-a.mixb { animation: popIn .5s both; }
.jb-bill { position: absolute; right: 3%; top: 16%; background: #fff; border-radius: 12px; padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; z-index: 5; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.jb-bill span { display: flex; align-items: center; gap: 3px; }
.jb-bill img { width: 24px; height: 24px; object-fit: contain; }
.jb-bill .cn { width: 12px; height: 12px; border-radius: 50%; background: #F5C542; box-shadow: inset 0 0 0 2px #D9A11F; }
.jb-bill em { font-style: normal; font-weight: 900; color: #0A2E6E; border-top: 2px dashed #D5D9E2; padding-top: 3px; text-align: center; }
.jb-cash { position: absolute; left: 34%; right: 22%; bottom: 8%; min-height: 15%; background: rgba(255,255,255,.75); border-radius: 16px; display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; z-index: 5; align-content: flex-start; }
.jb-cash img { width: 15%; aspect-ratio: 1; object-fit: contain; animation: popIn .25s both; }
.jb-scene.beep::after { content: ""; position: absolute; inset: 0; background: rgba(255,60,60,.12); animation: jbBeep .3s forwards; pointer-events: none; }
@keyframes jbBeep { to { opacity: 0; } }
.jb-scene.bake::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 38%, rgba(255,140,40,.45), transparent 40%); animation: jbBake .6s infinite alternate; pointer-events: none; }
@keyframes jbBake { to { opacity: .4; } }
.jv-win { z-index: 70; }
.jv-pass .lk-btns { display: flex; gap: 8px; justify-content: center; }
.jv-pass .lk-btns .big-btn { white-space: nowrap; font-size: 17px; padding: 12px 16px; min-width: 0; flex: 1; }
.jobs .jv-book { position: static; margin: 0 auto 2px; }
.jb-play { justify-content: center; }
@media (orientation: landscape) {
  .job .jb-lv { position: absolute; top: max(14px, env(safe-area-inset-top)); left: calc(50% + 70px); margin: 0; }
  .jb-scene { max-height: calc(100dvh - 78px); }
  .jb-tray { max-height: calc(100dvh - 78px); }
  .jb-say { font-size: clamp(13px, 2.4vw, 18px); }
}
.town.job { position: relative; }
.jv-b.soon img { filter: grayscale(.5) brightness(.97); }
.jv-b .tw-soon { top: 38%; font-size: 11px; }
.jv-b.nope { animation: jvNope .4s; }
@keyframes jvNope { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.menu-deco b { white-space: nowrap; font-size: clamp(22px, 6.6vw, 34px); }
@media (orientation: landscape) { .menu-deco b { font-size: clamp(18px, 3.2vw, 28px); } }
.tw-soon { white-space: nowrap; }
.tw-map { container-type: inline-size; }
.tw-b b { font-size: clamp(10px, 4.4cqw, 17px); padding: 1px 8px; }
.tw-soon { font-size: clamp(9px, 3.4cqw, 13px); }
@media (orientation: landscape) {
  .tw-wrap { overflow-y: auto; display: block; padding: 4px 0 16px; }
  .tw-map { height: auto; width: min(92%, 560px); margin: 0 auto; max-height: none; }
  .jobs .jv-grid { overflow-y: auto; align-content: start; grid-template-columns: repeat(9, 1fr); max-width: none; gap: 8px; }
  .jobs .jv-b b { font-size: 12px; }
}
.tw-b b { position: relative; z-index: 2; margin-top: -3%; }
/* 붕대: 감긴 모양(흰 띠 두 겹) */
.jb-wrap { position: absolute; aspect-ratio: 2.2; transform: translate(-50%, -50%) rotate(-14deg); border-radius: 8px; background: repeating-linear-gradient(90deg, #FFFDF7 0 6px, #EFE9DC 6px 7px), #fff; box-shadow: 0 2px 3px rgba(0,0,0,.15), inset 0 -3px 0 rgba(0,0,0,.06); animation: popIn .35s both; }
.jb-wrap::after { content: ""; position: absolute; inset: 22% -6% 22% -6%; border-radius: 6px; background: repeating-linear-gradient(90deg, #FFFFFF 0 5px, #F1EBDF 5px 6px); transform: rotate(10deg); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
@media (orientation: portrait) { .s3-kong { width: min(30vw, 18vh); right: 0; } }
.sec-title span { flex: none; } .home-sec .sec-top .sec-title { font-size: clamp(18px, 5.6vw, 30px); gap: 8px; }
/* 10/16 사용자: 칫솔은 눕히고, 잇몸 → 이 끝 한쪽으로만 살살 쓸기(회전법) */
.hb-hand.st-down, .hb-hand.st-up { transform: translate(-50%, -50%) rotate(-78deg); }
.hb-hand.st-down img, .hb-hand.st-down svg, .hb-hand.st-up img, .hb-hand.st-up svg { animation: none; }
.hb-hand.st-down { animation: hbRollD .38s ease-out forwards; }
.hb-hand.st-up { animation: hbRollU .38s ease-out forwards; }
@keyframes hbRollD { 0% { translate: 0 -20px; rotate: -22deg; opacity: 1; } 75% { opacity: 1; } 100% { translate: 0 14px; rotate: 18deg; opacity: .3; } }
@keyframes hbRollU { 0% { translate: 0 20px; rotate: 22deg; opacity: 1; } 75% { opacity: 1; } 100% { translate: 0 -14px; rotate: -18deg; opacity: .3; } }
@media (orientation: landscape) and (max-height: 520px) {
  .egg-btn { width: min(40vw, 38vh); }
  .egg-nest { top: calc(50% + 19vh); width: min(50vw, 44vh); }
}
/* 10/16 붓으로 문지를 때 붓털이 살랑살랑(움직이는 그림으로 바꿔 끼움) */
.lab-sbrush.on, .dig-brush.on img { content: url(../assets/lab/brush_rub.webp); }
/* 10/16 붓: 손잡이를 잡는 자리 = 손가락, 털은 왼쪽 위 */
.lab-sbrush { width: 96px; transform: translate(-75%, -75%); }
.lab-sbrush.on { transform: translate(-75%, -75%) rotate(-4deg); content: url(../assets/lab/brush_rub_r.webp); }
.dig-brush img { left: -72px; top: -72px; width: 96px; transform-origin: 72px 72px; }
.dig-brush.on img { content: url(../assets/lab/brush_rub_r.webp); }
@keyframes labBrushHint2 { 0%, 100% { transform: translate(-75%, -75%) rotate(0); } 50% { transform: translate(-95%, -75%) rotate(-8deg); } }
.lab-sbrush.idle { animation: labBrushHint2 1.2s ease-in-out infinite; }
/* 10/16 긴 붓(사용자 그림): 손가락 = 손잡이 72% 자리, 털은 왼쪽 위 */
.lab-sbrush { width: 140px; transform: translate(-72%, -72%); }
.lab-sbrush.on { transform: translate(-72%, -72%) rotate(-3deg); content: url(../assets/lab/brush_long_rub.webp); }
@keyframes labBrushHint2 { 0%, 100% { transform: translate(-72%, -72%) rotate(0); } 50% { transform: translate(-86%, -72%) rotate(-8deg); } }
.dig-brush img { left: -101px; top: -98px; width: 140px; transform-origin: 101px 98px; }
.dig-brush.on img { content: url(../assets/lab/brush_long_rub.webp); }
/* 10/16 붓대 짧게: 손가락 = 손잡이 가운데 */
.lab-sbrush { width: 120px; transform: translate(-72%, -77%); }
.lab-sbrush.on { transform: translate(-72%, -77%) rotate(-3deg); }
@keyframes labBrushHint2 { 0%, 100% { transform: translate(-72%, -77%) rotate(0); } 50% { transform: translate(-88%, -77%) rotate(-8deg); } }
.dig-brush img { left: -86px; top: -90px; width: 120px; transform-origin: 86px 90px; }
/* 10/16 사용자: 붓이 길어 가장자리를 못 쓺 → 더 작게, 손가락과 털 사이 짧게 */
.lab-sbrush { width: 90px; }
.dig-brush img { left: -65px; top: -68px; width: 90px; transform-origin: 65px 68px; }
/* 털 크게 흔들리는 그림은 여백이 있어 크기·자리 맞춤 */
.lab-sbrush.on { width: 112px; transform: translate(-67.7%, -71.6%) rotate(-3deg); }
.dig-brush.on img { left: -76px; top: -78px; width: 112px; transform-origin: 76px 78px; }
/* 10/16 사용자: 붓털 크게(털만 키움) */
.lab-sbrush { width: 110px; transform: translate(-74%, -79%); }
.lab-sbrush.on { width: 138px; transform: translate(-69.1%, -73%) rotate(-3deg); content: url(../assets/lab/brush_big_rub.webp); }
@keyframes labBrushHint2 { 0%, 100% { transform: translate(-74%, -79%) rotate(0); } 50% { transform: translate(-88%, -79%) rotate(-8deg); } }
.dig-brush img { left: -81px; top: -85px; width: 110px; transform-origin: 81px 85px; }
.dig-brush.on img { left: -95px; top: -99px; width: 138px; transform-origin: 95px 99px; content: url(../assets/lab/brush_big_rub.webp); }
/* 10/16 운동장 */
.sports .sp-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 8px 16px 16px; align-content: center; }
@media (orientation: landscape) { .sports .sp-grid { grid-template-columns: repeat(6, 1fr); } }
.sp-b { position: relative; border: 0; background: rgba(255,255,255,.8); border-radius: 22px; padding: 8px 6px 10px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 0 rgba(60,120,80,.25); }
.sp-b img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.sp-b b { font-size: clamp(14px, 4vw, 18px); color: #0A2E6E; font-weight: 900; }
.sp-medal { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; color: #fff; font-weight: 900; box-shadow: 0 0 0 3px #fff, 0 3px 6px rgba(0,0,0,.2); background: radial-gradient(circle at 35% 30%, #fff6 0 20%, transparent 22%), #CD8A4E; }
.sp-medal.gold { background: radial-gradient(circle at 35% 30%, #fff8 0 20%, transparent 22%), #F2B705; }
.sp-medal.silver { background: radial-gradient(circle at 35% 30%, #fff8 0 20%, transparent 22%), #A9B4C2; }
.sp-bigmedal { display: grid; place-items: center; margin: 6px 0 10px; }
.sp-bigmedal .sp-medal { position: static; width: 110px; height: 110px; font-size: 44px; animation: stampIn .5s .2s both; }
.sp-wk { position: absolute; left: 6%; bottom: 1%; width: 20%; aspect-ratio: 446 / 640; z-index: 2; pointer-events: none; }
.sp-wk img { position: absolute; } .sp-wk .wk-bb { inset: 0; width: 100%; height: 100%; } .sp-wk .wk-wear { left: 50%; top: 56%; width: 57.75%; transform: translate(-50%, -10%); }
.sp-wk.hop { animation: jbHopA .45s; }
.sp-wk.mv-up { animation: spUp .6s; } .sp-wk.mv-spin { animation: spSpin .6s; } .sp-wk.mv-left { animation: spL .6s; } .sp-wk.mv-right { animation: spR .6s; }
@keyframes spUp { 50% { translate: 0 -30%; } } @keyframes spSpin { to { rotate: y 360deg; } } @keyframes spL { 50% { translate: -40% 0; rotate: -12deg; } } @keyframes spR { 50% { translate: 40% 0; rotate: 12deg; } }
.sp-ballet .sp-wk, .sp-yoga .sp-wk, .sp-gym .sp-wk { left: 50%; width: 30%; transform: translateX(-50%); }
.sp-score { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 6; font-weight: 900; color: #0A2E6E; background: rgba(255,255,255,.85); padding: 4px 10px; border-radius: 99px; }
.sp-score:empty { display: none; }
.sp-score i { width: 14px; height: 14px; border-radius: 50%; background: #D5D9E2; } .sp-score i.ok { background: #2DB36F; } .sp-score i.no { background: #FF8A7A; }
.sp-scene > img, .sp-scene > i { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.sp-ball { z-index: 4; filter: drop-shadow(0 4px 3px rgba(0,0,0,.25)); pointer-events: auto !important; }
.sp-ball.tapme { animation: jbPulse 1s infinite; }
.sp-keeper { z-index: 3; } .sp-goal, .sp-hoop, .sp-net { z-index: 1; } .sp-shuttle { z-index: 5; }
.sp-zone { aspect-ratio: 1; border-radius: 50%; border: 4px dashed #fff; background: radial-gradient(circle, rgba(255,240,120,.35), transparent 70%); z-index: 2; }
.sp-zone.hit { animation: jbSpot .3s; }
.sp-breath { aspect-ratio: 1; border-radius: 50%; display: grid !important; place-items: center; font-style: normal; font-weight: 900; font-size: clamp(14px, 4vw, 20px); color: #fff; background: radial-gradient(circle, #9FD4FF, #6BB6F5); box-shadow: 0 0 30px rgba(107,182,245,.6); z-index: 3; transition: background .4s; }
.sp-breath.in { background: radial-gradient(circle, #B8F0C8, #5BD08A); }
.sp-mat { z-index: 1; }
.sp-db { z-index: 4; transition: top .12s; } 
.sp-play .sp-bar { height: 50%; border-radius: 99px; background: rgba(255,255,255,.7); overflow: hidden; display: flex !important; align-items: flex-end; z-index: 5; }
.sp-play .sp-bar i { display: block; width: 100%; height: 0; background: linear-gradient(#FFD23F, #FF8A3D); transition: height .1s; }
.sp-mv { width: 84px; height: 96px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sp-mv img { height: 62px !important; } .sp-mv b { font-size: 13px; color: #0A2E6E; }
.sp-mv.lit { box-shadow: 0 0 0 4px #FFD23F, 0 4px 0 rgba(0,0,0,.12); transform: scale(1.08); }
.sp-mv:disabled { opacity: .7; }
/* 자동차 신호등 표시: 신호등 옆 작은 자동차 */
.jb-a[data-id="sigcar"] { background: #fff; border-radius: 10px; padding: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
/* 미술 공방 색칠 그림(캔버스 위) */
.jb-pic { position: absolute; left: 35%; top: 32%; width: 30%; height: 27%; z-index: 1; pointer-events: none; animation: popIn .4s both; }
.jb-pic svg { width: 100%; height: 100%; }
.jb-pic [data-r] { fill: #fff; stroke: #B9AFC9; stroke-width: 1.2; stroke-dasharray: 3 2; transition: fill .6s; }
.jb-pic [data-r].filled { stroke: rgba(0,0,0,.15); stroke-dasharray: none; animation: jbFill .6s; }
.jb-pic .trunk { fill: #B98A55; }
@keyframes jbFill { 0% { opacity: .3; } 100% { opacity: 1; } }
/* 영수증 크게 (scene 기준 크기) */
.jb-scene { container-type: inline-size; }
.jb-bill { padding: 1.6cqw 2.2cqw; gap: 1cqw; border-radius: 3cqw; }
.jb-bill span { gap: 1cqw; }
.jb-bill img { width: 7.5cqw; height: 7.5cqw; }
.jb-bill .cn { width: 4cqw; height: 4cqw; }
.jb-bill em { font-size: max(18px, 6.4cqw); padding-top: 1cqw; line-height: 1.15; }
.jb-bill em b { color: #E8473A; }
@media (orientation: landscape) {
  .jb-scene { max-height: calc(100dvh - 70px); }
}
/* 직업 일하기: 가로 화면은 장면을 화면 높이 가득 */
@media (orientation: landscape) and (max-height: 600px) {
  .town.job { padding-top: 8px; padding-bottom: 8px; }
  .town.job .game-top { position: absolute; top: 8px; left: 8px; right: 8px; pointer-events: none; z-index: 20; }
  .town.job .game-top > * { pointer-events: auto; }
  .town.job .game-top .game-title { position: absolute; left: 0; top: 64px; width: 120px; text-align: center; font-size: 20px; }
  .town.job .jb-lv { left: auto; right: 8px; top: auto; bottom: 10px; position: absolute; z-index: 20; flex-direction: column; }
  .town.job .jb-play { padding: 0 8px; height: 100%; }
  .town.job .jb-scene { max-height: calc(100dvh - 16px); }
  .town.job .jb-tray { max-height: calc(100dvh - 16px); }
  .jb-bill img { width: max(22px, 7.5cqw); height: max(22px, 7.5cqw); }
  .jb-bill .cn { width: max(12px, 4cqw); height: max(12px, 4cqw); }
  .jb-bill em { font-size: max(22px, 6.4cqw); }
}
@media (orientation: landscape) and (max-height: 600px) {
  .town.job .game-top .game-title, .town.job .game-top > :not(#home) { display: none; }
}
/* 보기 메뉴 가로 화면: 아이콘·글자 나란히, 잘림 없이 */
@media (orientation: landscape) and (max-height: 600px) {
  .see-row { row-gap: 8px; column-gap: 8px; align-content: start; }
  .see-row .mode-card.half { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; padding: 6px 10px; min-height: 0; height: auto; }
  .see-row .mode-card.half .mode-icon { width: 34px; height: 34px; flex: none; }
  .see-row .mode-card.half .mode-text b { font-size: clamp(16px, 4.6vh, 22px); white-space: nowrap; line-height: 1.2; }
  .see-row .mode-card.half .mode-text span { display: none; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .follow-row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .follow-row .mode-card { min-height: 0 !important; height: calc((100dvh - 170px) / 2); flex-direction: row; align-items: center; padding: 10px 16px; gap: 12px; border-radius: 24px; }
  .follow-row .mode-card .mode-icon { width: 48px; height: 48px; flex: none; }
  .follow-row .mode-card .mode-text b { font-size: clamp(20px, 6vh, 28px); white-space: nowrap; }
}
/* 직업: 바쁜 날 · 금빛 도장 · 마을 축제 */
.stp.gold { border: 3px solid #E0A400; background: radial-gradient(circle at 35% 30%, #FFF6C8, #FFD54A 70%); box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(255,190,0,.7); }
.jb-round { position: absolute; left: 3%; top: 15%; z-index: 6; display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 4px 10px; box-shadow: 0 3px 8px rgba(0,0,0,.15); }
.jb-round i { width: 12px; height: 12px; border-radius: 50%; background: #D5D9E2; }
.jb-round i.done { background: #2DB36F; }
.jb-round i.now { background: #FFB020; animation: jbWiggle 1s infinite; }
.jb-round b { font-size: max(15px, 4.2cqw); font-weight: 900; color: #0A2E6E; margin-left: 4px; white-space: nowrap; }
.jb-lv .seg { white-space: nowrap; }
.jv-fest .jv-pass { position: relative; z-index: 2; }
.jv-festring { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: min(300px, 76vw); margin: 8px auto 10px; }
.jv-festring .stp { width: 100%; animation: stampIn .5s both; }
.jv-festring .stp:nth-child(n) { animation-delay: calc(var(--i, 0) * .08s); }
.jv-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.jv-confetti i { position: absolute; top: -20px; left: calc(var(--x) * 1%); width: 10px; height: 16px; background: var(--c); border-radius: 3px; animation: jvFall 2.6s var(--d) linear infinite; }
@keyframes jvFall { to { transform: translateY(110vh) rotate(540deg); } }
@media (orientation: landscape) and (max-height: 600px) {
  .jv-festring { width: min(340px, 50vw); grid-template-columns: repeat(9, 1fr); }
}
@media (orientation: landscape) and (max-height: 600px) {
  .town.job .jb-lv { left: 8px !important; right: auto !important; top: 72px !important; bottom: auto !important; display: flex; flex-direction: column; width: auto; }
  .town.job .jb-lv .seg { font-size: 14px; padding: 8px 10px; }
}
/* 운동장 그림 들어온 뒤 */
.sp-mv svg { width: 54px; height: 54px; flex: none; margin-top: 4px; }
.sp-mv b { font-size: 14px; font-weight: 900; }
.sp-medalimg { width: 120px; animation: stampIn .5s .2s both; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
.sp-medalimg.silver { filter: grayscale(1) brightness(1.18) drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
.sp-medalimg.bronze { filter: sepia(1) saturate(1.6) hue-rotate(-18deg) brightness(.85) drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
.sp-goal, .sp-hoop, .sp-net, .sp-mat, .sp-keeper { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.sp-b img { object-fit: contain; }
.sp-tw-l { display: none; }
@media (orientation: landscape) { .sp-tw-p { display: none; } .sp-tw-l { display: inline; } }
.sp-ballet .jb-tray { flex-wrap: nowrap; gap: 8px; }
.sp-ballet .sp-mv { width: min(76px, 21vw); }
@media (orientation: landscape) and (max-height: 600px) { .sp-ballet .jb-tray { flex-wrap: wrap; flex-direction: row; width: 180px; align-content: center; } }
/* 화석 연구소 2단계 · 야외 발굴지 */
.lab-fieldbtn { width: 100%; max-width: 720px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 18px; padding: 8px 14px 8px 8px; margin-bottom: 10px; background: linear-gradient(90deg, #F2A65A, #E8834A); color: #fff; box-shadow: 0 4px 0 #C0612C; text-align: left; }
.lab-fieldbtn img { width: 76px; height: 56px; object-fit: cover; border-radius: 12px; flex: none; }
.lab-fieldbtn b { display: block; font-size: 20px; font-weight: 900; }
.lab-fieldbtn em { display: block; font-style: normal; font-size: 13px; opacity: .92; }
@media (orientation: landscape) { .lab-pgrid { grid-template-columns: repeat(5, 1fr); max-width: 900px; } .lab-fieldbtn { max-width: 900px; } }
.lab-fieldplay { background: linear-gradient(180deg, #BFE6FF, #F6E3C8); }
.lf-pal { position: absolute; left: 2%; bottom: 1%; width: 18%; z-index: 4; pointer-events: none; filter: drop-shadow(0 4px 3px rgba(0,0,0,.18)); }
.lf-pal.hop { animation: jbHopA .45s; }
.lf-a { pointer-events: none; }
.lf-lb { position: absolute; left: 0; right: 0; bottom: -18px; font-size: 12px; font-weight: 900; color: #0A2E6E; white-space: nowrap; }
.jb-it:has(.lf-lb) { margin-bottom: 16px; }
.lf-ruler { position: absolute; height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, #FFD23F 0 6px, #E0A800 6px 8px); box-shadow: 0 2px 4px rgba(0,0,0,.25); z-index: 5; animation: popIn .3s both; }
.lf-ruler::after { content: attr(data-t); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-weight: 900; font-size: max(14px, 4cqw); color: #0A2E6E; background: #fff; border-radius: 99px; padding: 2px 10px; }
.lf-row { position: absolute; left: 8%; right: 8%; height: 18%; transform: translateY(-50%); border: 3px dashed rgba(255,255,255,.9); border-radius: 18px; background: rgba(255,255,255,.12); z-index: 6; animation: jbWiggle 1.6s infinite; }
.lf-bit { position: absolute; width: 7%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(30deg); border: 0; border-radius: 30% 60% 40% 50%; background: #FFF6E0; box-shadow: 0 0 0 3px #FFD23F, 0 0 14px #FFD23F; z-index: 6; animation: hbHint .8s infinite; }
.lf-bit.got { animation: none; opacity: 0; transition: opacity .3s; pointer-events: none; }
.lf-lens { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 8px solid #F28C28; background: radial-gradient(circle, #F4E9D6, #D9C6A4); box-shadow: 0 8px 18px rgba(0,0,0,.3); z-index: 7; animation: popIn .35s both; }
.lf-mel { position: absolute; width: 16%; aspect-ratio: 1.6; border: 0; border-radius: 50%; transform: translate(-50%, -50%); animation: hbHint 1s infinite; }
.lf-mel.r { background: radial-gradient(circle at 35% 35%, #D9783A, #8A3B12); }
.lf-mel.w { background: radial-gradient(circle at 35% 35%, #fff, #CFC6B8); box-shadow: inset 0 0 0 2px #B9AE9E; }
.lf-mel.got { animation: none; box-shadow: 0 0 0 4px #2DB36F; }
.lf-feather.colored { filter: sepia(.3) saturate(1.6) hue-rotate(-8deg); }
.lf-feather.colored + .lf-x, .lf-feather.colored { transition: filter .8s; }
.wrapped { filter: brightness(1.25) saturate(.35); outline: 6px solid #fff; outline-offset: -6px; border-radius: 30%; }
.lf-go { transition: left 1.2s ease-in; left: 120% !important; }
.lf-onc { transition: left 1.2s ease-in; }
.lf-in { filter: drop-shadow(0 0 6px #fff); pointer-events: none; }
.lf-in[style*="pointer-events: auto"] { animation: jbWiggle 1.4s infinite; }
.lf-done { display: flex; gap: 6px; justify-content: center; margin: 6px 0 10px; }
.lf-done img { width: 52px; height: 52px; object-fit: contain; animation: stampIn .5s both; }
/* 3 맞히기 리뉴얼 (10/17): 동그라미 → 퀴즈 카드(색 카드 + 아이콘 + 설명) */
.sec-navy .sec-title span { background: linear-gradient(160deg, #B3A4FF, #7B66E8) !important; }
.sec-navy .guess-row { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-auto-flow: row !important; gap: 12px !important; height: auto !important; align-content: start !important; }
.sec-navy .guess-row .mode-card, .sec-navy .guess-row .mode-card:nth-child(n+4) { grid-column: auto !important; position: relative; overflow: hidden !important; display: flex; flex-direction: column; align-items: flex-start !important; justify-content: flex-end !important; gap: 6px !important; min-height: 118px !important; padding: 12px 14px !important; border-radius: 22px !important; color: #fff !important; background: var(--g) !important; box-shadow: 0 5px 0 var(--s), 0 8px 16px rgba(40,30,110,.18) !important; border: 0 !important; text-align: left; }
.sec-navy .guess-row .mode-card:last-child:nth-child(odd) { grid-column: 1 / -1 !important; min-height: 92px !important; }
.sec-navy .guess-row .mode-card::before { content: "?"; position: absolute; right: -6px; top: -18px; font-size: 96px; font-weight: 900; color: rgba(255,255,255,.14); line-height: 1; pointer-events: none; }
.sec-navy .guess-row .mode-card .mode-icon { width: 46px !important; height: 46px !important; border-radius: 14px !important; background: rgba(255,255,255,.24) !important; border: 0 !important; box-shadow: none !important; color: #fff; display: grid; place-items: center; }
.sec-navy .guess-row .mode-card .mode-icon svg { width: 28px !important; height: 28px !important; }
.sec-navy .guess-row .mode-card .mode-text { text-align: left !important; }
.sec-navy .guess-row .mode-card .mode-text b { color: #fff !important; font-size: clamp(18px, 5vw, 22px) !important; white-space: nowrap !important; display: block; line-height: 1.15; }
.sec-navy .guess-row .mode-card .mode-text span { display: block !important; font-size: 12px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sec-navy .guess-row .mode-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--s) !important; }
.sec-navy .mode-card.quiz { --g: linear-gradient(135deg, #8F7CFF, #5B45E0); --s: #4231B0; }
.sec-navy .mode-card.hquiz { --g: linear-gradient(135deg, #FF8A6A, #E0457A); --s: #B02F5C; }
.sec-navy .mode-card.find { --g: linear-gradient(135deg, #2CCBD8, #128CB8); --s: #0D6A8C; }
.sec-navy .mode-card.shadowplay { --g: linear-gradient(135deg, #6B78A8, #2E3762); --s: #1F2647; }
.sec-navy .mode-card.sizeplay { --g: linear-gradient(135deg, #7ED957, #2FA65A); --s: #20793F; }
.sec-navy .mode-card.peekplay { --g: linear-gradient(135deg, #6FB8FF, #2F7FE0); --s: #2160AE; }
.sec-navy .mode-card.oddplay { --g: linear-gradient(135deg, #FFB347, #EE6A2A); --s: #BC4E18; }
@media (orientation: landscape) and (max-height: 600px) {
  .sec-navy .guess-row { grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; }
  .sec-navy .guess-row .mode-card, .sec-navy .guess-row .mode-card:nth-child(n+4) { min-height: calc((100dvh - 190px) / 2) !important; padding: 8px 12px !important; }
  .sec-navy .guess-row .mode-card:last-child:nth-child(odd) { grid-column: auto !important; min-height: calc((100dvh - 190px) / 2) !important; }
  .sec-navy .guess-row .mode-card .mode-text span { display: none !important; }
  .sec-navy .guess-row .mode-card .mode-icon { width: 38px !important; height: 38px !important; }
}
/* 경주장 */
.race .rc-pick-t { text-align: center; font-weight: 900; color: #0A2E6E; font-size: 20px; margin: 8px 0 12px; }
.rc-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; max-width: 560px; margin: 0 auto; width: 100%; }
.rc-pb { position: relative; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 5px 0 rgba(10,46,110,.12); padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rc-pb:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rc-pb img { width: min(100%, 160px); aspect-ratio: 1.3; object-fit: contain; }
.rc-pb b { font-size: 18px; font-weight: 900; color: #0A2E6E; }
.rc-best { position: absolute; right: 8px; top: 8px; font-style: normal; font-weight: 900; font-size: 13px; color: #fff; background: #C9A227; border-radius: 99px; padding: 2px 8px; }
.rc-best.p2 { background: #9AA6B8; } .rc-best.p3 { background: #B9774A; }
@media (orientation: landscape) and (max-height: 600px) { .rc-pick { grid-template-columns: repeat(5, 1fr); max-width: 900px; } .rc-pb:last-child:nth-child(odd) { grid-column: auto; } .race .rc-pick-t { margin: 0 0 8px; } }
.rc-scene { background-repeat: repeat-x !important; background-size: auto 100% !important; background-position: 0 0; overflow: hidden; }
.rc-kart { position: absolute; transform: translate(-50%, -78%); pointer-events: none; transition: top .16s ease-out; z-index: 3; filter: drop-shadow(0 4px 3px rgba(0,0,0,.2)); }
.rc-kart.me { z-index: 4; animation: rcBob .3s infinite alternate; }
.rc-kart.boost { filter: drop-shadow(0 0 10px #7FD3FF) drop-shadow(0 4px 3px rgba(0,0,0,.2)); }
.rc-kart.bump { animation: rcShake .12s infinite; }
.rc-kart.win-run { transition: left 1s ease-in; left: 120% !important; }
@keyframes rcBob { to { translate: 0 -2%; } }
@keyframes rcShake { 50% { rotate: -6deg; } }
.rc-thing { position: absolute; transform: translate(-50%, -70%); pointer-events: none; z-index: 2; }
.rc-thing.good { animation: rcGlow .6s infinite alternate; }
.rc-thing.hit { opacity: .45; }
@keyframes rcGlow { to { filter: drop-shadow(0 0 8px #FFE27A); } }
.rc-light { position: absolute; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; animation: popIn .3s both; }
.rc-bar { position: absolute; left: 8%; right: 8%; top: 15%; height: 30px; z-index: 5; pointer-events: none; }
.rc-line { position: absolute; left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%); border-radius: 3px; background: rgba(255,255,255,.85); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.rc-dot { position: absolute; top: 50%; width: 34px; transform: translate(-50%, -50%); transition: left .1s linear; }
.rc-dot.me { width: 42px; z-index: 2; filter: drop-shadow(0 0 4px #fff); }
.rc-flag { position: absolute; right: -14px; top: 50%; width: 26px; transform: translateY(-60%); }
.rc-hud { position: absolute; right: 3%; top: 24%; z-index: 5; display: flex; gap: 6px; }
.rc-hud span { display: flex; align-items: center; gap: 3px; background: rgba(255,255,255,.9); border-radius: 99px; padding: 2px 8px 2px 4px; font-weight: 900; color: #0A2E6E; font-size: max(14px, 3.6cqw); }
.rc-hud img { width: 22px; height: 22px; object-fit: contain; }
.rc-pop { position: absolute; transform: translate(-50%, -50%); z-index: 6; font-weight: 900; color: #fff; text-shadow: 0 2px 0 #E0A800, 0 0 4px rgba(0,0,0,.3); font-size: max(18px, 5cqw); animation: rcUp .8s forwards; pointer-events: none; }
@keyframes rcUp { to { translate: 0 -40px; opacity: 0; } }
.rc-ctl { gap: 14px !important; }
.rc-btn { width: 84px; height: 84px; border: 0; border-radius: 24px; background: #fff; color: #1D5AA8; font-size: 34px; font-weight: 900; box-shadow: 0 5px 0 rgba(10,46,110,.15); touch-action: manipulation; }
.rc-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(10,46,110,.15); }
@media (orientation: landscape) and (max-height: 600px) {
  .race-play .rc-scene { aspect-ratio: 16 / 10; }
  .race-play .rc-ctl { width: 110px !important; }
  .race-play .rc-btn { width: 78px; height: 78px; }
}
.rc-podium { position: relative; width: 200px; margin: 0 auto 6px; }
.rc-pod { width: 100%; display: block; }
.rc-pk { position: absolute; left: 50%; bottom: 62%; width: 46%; transform: translateX(-50%); animation: stampIn .5s .2s both; }
.rc-ic { width: 22px; height: 22px; vertical-align: -5px; }
/* 10/17 영어 보기 글자 크게 */
.choice.en { font-size: clamp(24px, 7.4vw, 38px) !important; line-height: 1.15; }
@media (orientation: landscape) and (max-height: 600px) { .quiz-choices .choice.en { font-size: clamp(20px, 3.4vw, 32px) !important; } }
/* 영어 이름은 세로 화면에서 한 줄에 하나씩 (긴 학명 안 잘리게) */
@media (orientation: portrait) {
  .quiz-choices:has(.choice.en) { grid-template-columns: 1fr !important; gap: 8px !important; }
  .quiz-choices .choice.en { min-height: 60px; font-size: clamp(22px, 6.6vw, 34px) !important; word-break: keep-all; overflow-wrap: normal; white-space: nowrap; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .quiz-screen .quiz-levels { right: auto !important; display: inline-grid !important; grid-template-columns: repeat(3, auto) !important; }
  .quiz-screen .quiz-levels .seg { padding: 0 14px !important; }
}
.pg-done { flex: 1; max-width: 360px; font-weight: 900; color: #B86E00; font-size: 17px; background: #FFF4D6; border-radius: 999px; padding: 4px 14px; text-align: center; white-space: nowrap; }
/* 공 그림이 단추 밖으로 커지지 않게 */
.pet-ball { background: none !important; box-shadow: none !important; overflow: visible; }
.pet-ball img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); }
.pet-picks { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: 100%; box-sizing: border-box; padding: 0 16px; }
.pet-pk { min-width: 0; }
.pet-pk img { width: 100%; height: auto; object-fit: contain; }
@media (orientation: landscape) and (max-height: 600px) { .pet-picks { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
.pet-pick-t { text-align: center; font-weight: 900; font-size: 22px; color: #0A2E6E; margin: 10px 0 0; }
.pet-pk { aspect-ratio: 4 / 3; } .pet-pk img { height: 100%; }
/* 발레 놀이 (보고 따라 하기) */
.sp-ballet .sp-score { bottom: auto; top: 17%; }
.bl-dancer { position: absolute; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; filter: drop-shadow(0 8px 6px rgba(150,60,90,.18)); max-height: 66%; object-fit: contain; }
.bl-dancer.bl-in { animation: blIn .55s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes blIn { 0% { opacity: 0; scale: .8; translate: 0 6%; } 100% { opacity: 1; scale: 1; translate: 0 0; } }
.bl-ring { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; z-index: 5; display: grid; place-items: center; }
.bl-ring i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#FF7EB0 calc(var(--p, 0) * 1%), rgba(255,255,255,.85) 0); animation: blFill var(--t) linear forwards; box-shadow: 0 3px 8px rgba(0,0,0,.15); }
.bl-ring i::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: #fff; }
.bl-ring b { position: relative; font-weight: 900; color: #D23A78; font-size: max(13px, 3.4cqw); }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes blFill { to { --p: 100; } }
.bl-did { border: 0; border-radius: 26px; padding: 16px 34px; font-size: 26px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #FF8FC0, #E0508E); box-shadow: 0 6px 0 #B23A6E; animation: popIn .3s both, jbWiggle 1.6s 1s infinite; }
.bl-did span { color: #FFE27A; }
.bl-seq { display: flex; gap: 10px; justify-content: center; }
.bl-seq span { position: relative; width: 84px; height: 96px; background: #fff; border-radius: 18px; box-shadow: 0 4px 0 rgba(0,0,0,.08); display: grid; place-items: center; }
.bl-seq img { max-width: 90%; max-height: 90%; object-fit: contain; }
.bl-seq b { position: absolute; left: -6px; top: -6px; width: 26px; height: 26px; border-radius: 50%; background: #E0508E; color: #fff; display: grid; place-items: center; font-weight: 900; }
@media (orientation: landscape) and (max-height: 600px) { .bl-seq { flex-direction: column; } .bl-seq span { width: 70px; height: 74px; } .bl-did { padding: 12px 18px; font-size: 20px; } }
.sp-ballet .jb-tray { flex-direction: column; flex-wrap: nowrap !important; gap: 10px; }
.bl-card { background: #fff; border-radius: 20px; padding: 10px 16px; box-shadow: 0 4px 0 rgba(208,80,140,.18); width: min(100%, 420px); box-sizing: border-box; animation: popIn .3s both; }
.bl-card b { display: block; font-size: 24px; font-weight: 900; color: #D23A78; }
.bl-card em { display: block; font-style: normal; font-size: 14px; color: #8A5A72; margin-bottom: 4px; }
.bl-card p { margin: 3px 0 0; font-size: 16px; font-weight: 700; color: #0A2E6E; display: flex; gap: 8px; align-items: baseline; }
.bl-card p i { font-style: normal; flex: none; font-size: 13px; font-weight: 900; color: #fff; background: #FF8FC0; border-radius: 99px; padding: 1px 8px; }
@media (orientation: landscape) and (max-height: 600px) { .sp-ballet .jb-tray { width: 230px !important; } .bl-card { padding: 8px 12px; } .bl-card b { font-size: 20px; } .bl-card p { font-size: 14px; } }
/* 10/17 영유아 앱: 마을·직업·운동장 글자 크게 */
.sp-b b { font-size: clamp(22px, 6.4vw, 30px) !important; }
.jv-b b { font-size: clamp(16px, 4.6vw, 22px) !important; }
.jobs .jv-b b { font-size: clamp(15px, 2.6vw, 20px) !important; }
.tw-b b { font-size: clamp(14px, 5.2cqw, 22px) !important; padding: 2px 12px !important; }
.jb-say { font-size: clamp(19px, 5.4vw, 26px) !important; line-height: 1.25; }
@media (orientation: landscape) and (max-height: 600px) { .jb-say { font-size: clamp(17px, 3vw, 24px) !important; } .sp-b b { font-size: clamp(18px, 3vw, 26px) !important; } }
.bl-card b { font-size: 30px !important; }
.bl-card em { font-size: 17px !important; }
.bl-card p { font-size: 19px !important; }
.bl-card p i { font-size: 15px !important; }
.lf-lb { font-size: 15px !important; bottom: -22px; }
.rc-pb b { font-size: 22px !important; }
.race .rc-pick-t, .pet-pick-t { font-size: 26px !important; }
.jv-msg { font-size: 21px !important; }
.jv-pt { font-size: 28px !important; }
@media (orientation: portrait) {
  .jobs .jv-grid { width: 100%; box-sizing: border-box; padding: 8px 12px 16px; gap: 12px; }
  .jobs .jv-b { width: 100%; }
  .jobs .jv-b img { width: 100%; }
  .jobs .jv-b b { font-size: clamp(17px, 4.8vw, 22px) !important; }
}
@media (orientation: landscape) and (max-height: 600px) { .jobs .jv-b b { font-size: 15px !important; } }
@media (orientation: landscape) and (max-height: 600px) {
  .jobs .jv-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; max-width: 760px !important; gap: 10px !important; align-content: center !important; }
  .jobs .jv-b b { font-size: 17px !important; white-space: nowrap; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .jobs .jv-grid { grid-template-columns: repeat(5, calc((100dvh - 150px) / 2 * .82)) !important; justify-content: center; max-width: none !important; }
  .jobs .jv-b img { width: 100%; aspect-ratio: 1.15; object-fit: contain; }
}
.bl-video { position: fixed; inset: 0; z-index: 9500; background: #000; display: flex; align-items: center; justify-content: center; }
.bl-video video { width: 100%; height: 100%; object-fit: contain; }
.bl-video b { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.92); color: #D23A78; font-weight: 900; font-size: 24px; padding: 8px 20px; border-radius: 99px; white-space: nowrap; }
.bl-skip { position: absolute; right: 16px; bottom: max(20px, env(safe-area-inset-bottom)); border: 0; border-radius: 99px; padding: 12px 22px; font-size: 20px; font-weight: 900; color: #fff; background: rgba(255,255,255,.25); }
/* 발레 놀이 3단계 (bb261): 실루엣 + 위에서 본 발 + 빔빔 */
.blx-stage { position: absolute; left: 0; right: 0; top: 14%; bottom: 17%; z-index: 3; display: flex; align-items: flex-end; justify-content: center; gap: 3%; pointer-events: none; padding: 0 3%; }
.blx-stage.in { animation: blIn .5s cubic-bezier(.3,1.5,.5,1) both; }
.blx-sil { height: 100%; flex: 0 1 auto; display: flex; align-items: flex-end; justify-content: center; max-width: 46%; background: rgba(255,255,255,.72); border-radius: 22px; padding: 6px 10px; box-sizing: border-box; box-shadow: 0 4px 0 rgba(208,80,140,.15); }
.blx-sil img { max-width: 100%; object-fit: contain; display: block; }
.blx-foot { align-self: center; flex: 0 1 30%; max-width: 30%; background: #fff; border-radius: 20px; padding: 8px; box-shadow: 0 4px 0 rgba(208,80,140,.18); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.blx-foot img { width: 100%; height: auto; max-height: 26vh; object-fit: contain; }
.blx-foot span { font-weight: 900; font-size: 16px; color: #D23A78; white-space: nowrap; }
.blx-bb { height: 62%; flex: 0 1 auto; max-width: 26%; display: flex; align-items: flex-end; }
.blx-bb img { height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 5px rgba(150,60,90,.18)); }
.blx-card { position: relative; text-align: center; }
.blx-card .blx-kind { position: absolute; left: 10px; top: -10px; font-style: normal; font-size: 16px; font-weight: 900; color: #fff; background: #FF8FC0; border-radius: 99px; padding: 2px 12px; }
.blx-card b { font-size: 34px !important; }
.blx-card p { display: block !important; font-size: 21px !important; line-height: 1.35; margin-top: 4px !important; }
.blx-q { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; width: 100%; }
.blx-q button { border: 0; border-radius: 22px; padding: 14px 20px; min-width: 96px; font-size: 26px; font-weight: 900; color: #D23A78; background: #fff; box-shadow: 0 5px 0 #F3A9C8; animation: popIn .3s both; }
.blx-q button.ok { background: #6BD38A; color: #fff; box-shadow: 0 5px 0 #3E9C5A; }
.blx-q button.no { opacity: .4; }
@media (orientation: landscape) and (max-height: 600px) {
  .blx-stage { top: 10%; bottom: 8%; }
  .blx-foot img { max-height: 34vh; }
  .blx-card b { font-size: 26px !important; } .blx-card p { font-size: 17px !important; }
  .blx-q { flex-direction: column; align-items: stretch; } .blx-q button { font-size: 21px; padding: 10px 12px; }
}
.blx-card.has-foot { display: flex; align-items: center; gap: 10px; text-align: left; }
.blx-card .blx-foot { flex: 0 0 44%; max-width: 44%; align-self: stretch; background: #FFF4F8; box-shadow: none; padding: 4px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.blx-card .blx-foot img { width: 120%; max-width: none; margin: -10% 0 -6%; max-height: none; }
.blx-card .blx-foot span { font-size: 15px; }
.blx-txt { flex: 1; min-width: 0; }
.blx-card.has-foot .blx-txt b { font-size: 30px !important; }
.blx-card.has-foot .blx-txt p { font-size: 19px !important; }
@media (orientation: landscape) and (max-height: 600px) { .sp-ballet .jb-tray { width: 280px !important; } .blx-card.has-foot .blx-txt b { font-size: 24px !important; } .blx-card.has-foot .blx-txt p { font-size: 16px !important; } }
/* bb264: 발레 — 말풍선·점이 실루엣 머리를 가리지 않게 실루엣을 아래로 */
.sp-ballet .blx-stage { top: 25%; bottom: 13%; }
@media (orientation: landscape) and (max-height: 600px) { .sp-ballet .blx-stage { top: 26%; bottom: 6%; } }
.blx-card .blx-foot img[src$="e.webp"] { width: 100%; max-width: 100%; margin: 6px 0 2px; max-height: 120px; object-fit: contain; }
@media (orientation: landscape) and (max-height: 600px) { .blx-card .blx-foot img[src$="e.webp"] { max-height: 80px; } }
/* ===== 우주 정거장 (10/17) ===== */
.space { background: linear-gradient(#0B1640, #23185A 60%, #3A1F6E); position: relative; }
.space .game-top .game-title { color: #fff; }
.sx-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sx-sky i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #FFF6C8; box-shadow: 0 0 6px #FFF6C8; animation: sxTw 2.6s ease-in-out infinite; }
@keyframes sxTw { 50% { opacity: .25; } }
.sx-grid { position: relative; flex: 1; display: grid; grid-template-columns: 1fr; gap: 14px; padding: 12px 20px 20px; align-content: center; max-width: 520px; width: 100%; margin: 0 auto; box-sizing: border-box; }
@media (orientation: landscape) { .sx-grid { grid-template-columns: repeat(3, 1fr); max-width: 900px; } }
.sx-b { position: relative; border: 0; border-radius: 24px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.25); color: #fff; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
@media (orientation: landscape) { .sx-b { flex-direction: column; } }
.sx-b b { font-size: clamp(22px, 6vw, 30px); font-weight: 900; }
.sx-b.soon { opacity: .55; }
.sx-ic { position: relative; width: 84px; height: 84px; flex: none; display: grid; place-items: center; }
.sx-ic svg { width: 100%; height: 100%; }
.sx-badge { position: absolute; right: 10px; top: 8px; font-style: normal; font-size: 26px; color: #FFE27A; }
.sx-play { background: linear-gradient(#0B1640, #2A1C62); }
.sx-play .game-title { color: #fff; }
.sx-scene { background: radial-gradient(circle at 70% 30%, #3B2A86, #141A4A 55%, #0A0F2E) !important; overflow: hidden; }
.sx-scene .jb-say { z-index: 7; }
.sx-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.sx-lines line { stroke: #FFE27A; stroke-width: .9; stroke-linecap: round; opacity: .9; }
.sx-lines line.late { stroke-dasharray: 2 2; animation: sxDraw .8s both; }
.sx-lines.done line { stroke: #FFF3A6; filter: drop-shadow(0 0 1.5px #FFE27A); }
@keyframes sxDraw { from { opacity: 0; } }
.sx-star { position: absolute; transform: translate(-50%, -50%); width: 13%; max-width: 64px; aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; z-index: 3; background: radial-gradient(circle, #FFFBE0 0 30%, rgba(255,240,170,.55) 45%, transparent 70%); display: grid; place-items: center; }
.sx-star b { position: absolute; top: -34%; font-size: clamp(16px, 4.6vw, 24px); font-weight: 900; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.6); }
.sx-star.next { animation: sxPulse .9s ease-in-out infinite; }
.sx-star.next b { color: #FFE27A; }
.sx-star.on { background: radial-gradient(circle, #FFFFFF 0 32%, rgba(255,226,122,.8) 48%, transparent 72%); }
.sx-star.done b { opacity: 0; }
.sx-star.big { width: 17%; }
@keyframes sxPulse { 50% { transform: translate(-50%, -50%) scale(1.35); } }
.sx-sun { position: absolute; left: -16%; top: -16%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFF6B0, #FFC93C 45%, #FF8A2A 70%, rgba(255,120,40,0) 72%); box-shadow: 0 0 40px #FFB13C; z-index: 1; }
.sx-path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.sx-path polyline { fill: none; stroke: rgba(255,255,255,.28); stroke-width: .6; stroke-dasharray: 1.5 2; }
.sx-pl { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; z-index: 3; box-shadow: inset -6px -6px 12px rgba(0,0,0,.35), 0 0 10px rgba(255,255,255,.15); }
.sx-pl b { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 3px; white-space: nowrap; font-size: clamp(13px, 3.6vw, 18px); font-weight: 900; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.7); opacity: 0; }
.sx-pl.seen b, .sx-pl.next b { opacity: 1; }
.sx-pl.next { animation: sxPulse .9s ease-in-out infinite; outline: 3px solid #FFE27A; outline-offset: 3px; }
.sx-pl.nope { animation: sxShake .4s; }
@keyframes sxShake { 25% { transform: translate(-58%, -50%); } 75% { transform: translate(-42%, -50%); } }
.sx-pl.mercury { background: radial-gradient(circle at 35% 35%, #D2D2D2, #8E8E8E 60%, #5E5E5E); }
.sx-pl.venus { background: radial-gradient(circle at 35% 35%, #FFF0C2, #E8C27A 60%, #B98A42); }
.sx-pl.earth { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5) 0 8%, transparent 9%), radial-gradient(ellipse at 40% 40%, #5CC36B 0 18%, transparent 19%), radial-gradient(ellipse at 66% 64%, #5CC36B 0 16%, transparent 17%), radial-gradient(circle at 35% 35%, #7FC8FF, #2F7FE0 60%, #1A4FA0); }
.sx-pl.mars { background: radial-gradient(circle at 35% 35%, #F29A6E, #D2643C 60%, #8E3A1E); }
.sx-pl.jupiter { background: radial-gradient(ellipse at 66% 62%, #C8553D 0 9%, transparent 10%), repeating-linear-gradient(#E8D2B0 0 12%, #C98C5A 12% 20%, #E2C39A 20% 30%, #B9784A 30% 36%); }
.sx-pl.saturn { background: radial-gradient(circle at 35% 35%, #FFF0C0, #E3C98A 60%, #B89650); overflow: visible; }
.sx-pl.saturn::before { content: ""; position: absolute; left: -38%; right: -38%; top: 38%; height: 24%; border-radius: 50%; border: 4px solid #F3DDA6; transform: rotate(-16deg); box-shadow: 0 0 0 2px rgba(180,150,90,.5); }
.sx-ic .sx-pl.saturn { position: absolute; transform: translate(-50%, -50%); }
.sx-pl.uranus { background: radial-gradient(circle at 35% 35%, #D8FBFF, #8FD8E0 60%, #4FA6B4); }
.sx-pl.neptune { background: radial-gradient(circle at 35% 35%, #8EB0FF, #3D63D6 60%, #1F3A94); }
.sx-rocket { position: absolute; width: 11%; transform: translate(-50%, -50%) rotate(35deg); z-index: 5; transition: left .6s ease-in-out, top .6s ease-in-out; filter: drop-shadow(0 0 6px rgba(255,180,70,.7)); }
.sx-rocket svg { width: 100%; display: block; }
.sx-card { text-align: center; }
.sx-next { margin-top: 4px; }
.sx-win .sx-medal { width: 110px; height: 110px; margin: 6px auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 64px; color: #fff; background: radial-gradient(circle at 35% 30%, #FFE98A, #F5B82E 60%, #C98A12); box-shadow: 0 6px 0 #A8730E; }
.sx-spark { position: absolute; width: 7%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; background: radial-gradient(circle, #fff 0 18%, rgba(255,236,150,.8) 30%, transparent 62%); animation: sxBurst .7s ease-out forwards; }
@keyframes sxBurst { from { scale: .3; opacity: 1; } to { scale: 2.2; opacity: 0; } }
@media (orientation: landscape) { .sx-grid.n2 { grid-template-columns: repeat(2, 1fr); max-width: 640px; } }
/* 로켓 발사 (10/18 그림) */
.sx-pad .sx-sky { opacity: 0; transition: opacity 1.2s; }
.sx-night { position: absolute; inset: 0; z-index: 0; opacity: 0; background: radial-gradient(circle at 70% 30%, #3B2A86, #141A4A 55%, #0A0F2E); transition: opacity 1.4s; pointer-events: none; }
.sx-pad.launch .sx-night, .sx-pad.launch .sx-sky { opacity: 1; }
.sx-moon { position: absolute; right: -30%; top: -30%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 35%, #8C8C9C 0 7%, transparent 8%), radial-gradient(circle at 62% 60%, #8C8C9C 0 9%, transparent 10%), radial-gradient(circle at 40% 72%, #9C9CAC 0 5%, transparent 6%), radial-gradient(circle at 35% 35%, #F4F4F8, #C8C8D4 70%); box-shadow: 0 0 30px rgba(255,255,255,.5); z-index: 1; opacity: 0; transition: right 1.2s ease-out, top 1.2s ease-out, width 1.2s, opacity .6s; }
.sx-moon.near { right: -8%; top: 30%; width: 80%; opacity: 1; }
.sx-bigrocket { position: absolute; left: 50%; bottom: 20%; height: 52%; transform: translateX(-50%); z-index: 3; transition: bottom 2s ease-in, left 1.2s ease-in-out, height 1.2s, transform 1.2s; filter: drop-shadow(0 6px 6px rgba(0,0,0,.2)); }
.sx-bigrocket.go { bottom: 130%; }
.sx-bigrocket.land { bottom: 44%; left: 28%; height: 26%; transform: translateX(-50%) rotate(-12deg); transition: bottom 1.2s ease-out, left 1.2s, height 1.2s, transform 1.2s; }
.sx-astro { position: absolute; left: 20%; bottom: 14%; height: 34%; transform: translateX(-50%); z-index: 4; transition: left .7s ease-in, bottom .7s, height .7s, opacity .7s; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); }
.sx-astro.board { left: 50%; bottom: 40%; height: 10%; opacity: 0; }
.sx-astro.moon { left: 62%; bottom: 36%; height: 30%; opacity: 1; animation: popIn .5s both; }
.sx-scene.launch .sx-sky i { animation: sxRush .6s linear infinite; }
@keyframes sxRush { to { transform: translateY(40px); opacity: .2; } }
.sx-items { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; width: 100%; }
.sx-items button { border: 0; background: #fff; border-radius: 18px; padding: 6px 6px 4px; width: 84px; box-shadow: 0 4px 0 #B8C2E8; display: flex; flex-direction: column; align-items: center; }
.sx-items img { width: 60px; height: 52px; object-fit: contain; }
.sx-items b { font-size: 15px; font-weight: 900; color: #2A2E7A; }
.sx-items button.used { opacity: .3; }
.sx-fly { position: absolute; left: 50%; top: 96%; width: 16%; transform: translate(-50%, -50%); z-index: 6; transition: top .7s ease-in, width .7s, opacity .7s; }
.sx-fly.in { top: 52%; width: 4%; opacity: .2; }
.sx-fuel img { width: 34px; height: 40px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
@media (orientation: landscape) and (max-height: 600px) { .sx-items button { width: 66px; } .sx-items img { width: 46px; height: 38px; } .sx-items b { font-size: 13px; } }
.sx-gauge { position: absolute; right: 7%; bottom: 22%; width: 13%; height: 46%; border-radius: 14px; background: rgba(255,255,255,.18); border: 3px solid #fff; overflow: hidden; z-index: 4; display: flex; align-items: flex-end; }
.sx-gauge i { display: block; width: 100%; height: 0; background: linear-gradient(#7FE0FF, #2F8BFF); transition: height .25s; }
.sx-gauge b { position: absolute; left: 0; right: 0; top: 36%; text-align: center; color: #fff; font-size: clamp(22px, 6vw, 32px); font-weight: 900; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.sx-fuel { margin-top: 6px; border: 0; border-radius: 26px; padding: 14px 34px; font-size: 26px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #5FC4FF, #2F7BEA); box-shadow: 0 6px 0 #1C55AE; }
.sx-fuel:active { transform: translateY(3px); box-shadow: 0 3px 0 #1C55AE; }
.sx-count { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 6; font-size: clamp(80px, 26vw, 140px); font-weight: 900; color: #FFE27A; text-shadow: 0 6px 0 #B97F12, 0 0 30px rgba(255,220,100,.7); pointer-events: none; }
.sx-count.pop { animation: sxCount .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes sxCount { from { scale: .3; opacity: 0; } }
.sx-nums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; max-width: 420px; }
.sx-nums button { border: 0; border-radius: 16px; aspect-ratio: 1; font-size: clamp(22px, 6vw, 30px); font-weight: 900; color: #2A2E7A; background: #fff; box-shadow: 0 4px 0 #B8C2E8; }
.sx-nums button.ok { background: #6BD38A; color: #fff; box-shadow: 0 4px 0 #3E9C5A; }
@media (orientation: landscape) and (max-height: 600px) { .sx-nums { grid-template-columns: repeat(5, 1fr); gap: 6px; } .sx-nums button { font-size: 20px; } .sx-fuel { padding: 10px 24px; font-size: 22px; } }
.video-tile img.vt-fb { object-fit: contain; background: radial-gradient(circle at 50% 40%, #E8F6FF, #BFE3FF); }
.sx-winastro { display: block; height: 130px; margin: 0 auto -18px; position: relative; z-index: 1; animation: popIn .5s both; }
/* 둥둥 별 잡기 (10/18) */
.sx-floater { position: absolute; left: 50%; top: 52%; height: 42%; transform: translate(-50%, -50%); z-index: 2; animation: sxBob 4s ease-in-out infinite; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
@keyframes sxBob { 0%, 100% { transform: translate(-50%, -50%) rotate(-6deg); } 50% { transform: translate(-46%, -58%) rotate(6deg); } }
.sx-catch { position: absolute; right: 5%; top: 16%; z-index: 6; min-width: 64px; padding: 4px 14px; border-radius: 99px; background: rgba(255,255,255,.92); color: #E0A100; font-size: clamp(26px, 7vw, 38px); font-weight: 900; text-align: center; }
.sx-catch::before { content: "★ "; }
.sx-catch.pop { animation: sxCount .4s cubic-bezier(.3,1.6,.5,1) both; }
.sx-fstar { position: absolute; width: 15%; max-width: 72px; aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; padding: 0; z-index: 4; background: none; animation: sxDrift 5s ease-in-out both; }
.sx-fstar::before { content: ""; position: absolute; inset: 0; background: #FFE27A; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 0 6px #FFE27A); }
.sx-fstar.got { animation: sxGot .4s ease-out forwards; }
@keyframes sxDrift { 0% { opacity: 0; scale: .3; } 12% { opacity: 1; scale: 1; } 85% { opacity: 1; } 100% { opacity: 0; translate: 0 -30px; } }
@keyframes sxGot { to { scale: 1.8; opacity: 0; } }
.sx-scene .jb-say { top: 1.5%; }
.sx-star.sm { width: 10%; } .sx-star.sm.big { width: 13%; }
.sx-star.red, .sx-star.red.on { background: radial-gradient(circle, #FFE0D0 0 26%, rgba(255,110,80,.75) 46%, transparent 72%); }
/* 10/18: 세로 화면에서 아래 설명·버튼이 바뀔 때 장면이 위아래로 들썩이지 않게 (운동장·우주) */
@media (orientation: portrait) {
  .sp-play .jb-play { justify-content: flex-start; padding-top: 4px; }
  .sp-play .jb-scene { flex: none; }
}

/* ===== 10/18 음악실 ===== */
.music { background: linear-gradient(#FFE9C7, #FFD6E8 60%, #E9D8FF); position: relative; }
.mu-notesbg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mu-notesbg i { position: absolute; font-style: normal; font-size: 34px; color: rgba(155, 93, 229, .22); animation: muBob 3s ease-in-out infinite; }
@keyframes muBob { 50% { transform: translateY(-12px) rotate(8deg); } }
.mu-grid .mu-b { background: #fff; color: #4A2C7A; border: 3px solid #E7D5FF; box-shadow: 0 6px 0 #D9C2FF; }
.mu-grid .mu-b .sx-badge { color: #F5B82E; }
.mu-grid .mu-b:nth-child(2) .sx-ic svg { filter: drop-shadow(0 0 0 #9B5DE5); }
.mu-grid .mu-b .sx-ic { background: #3E2A6E; border-radius: 22px; padding: 8px; box-sizing: border-box; }
.mu-grid .mu-b .sx-ic img { background: #fff; border-radius: 14px; }
@media (orientation: landscape) { .mu-grid.n4 { grid-template-columns: repeat(2, 1fr); max-width: 680px; } .mu-grid.n5 { grid-template-columns: repeat(3, 1fr); } }
@media (orientation: portrait) { .mu-grid .mu-b { padding: 10px 14px; } .mu-grid .mu-b .sx-ic { width: 70px; height: 70px; } }
.mu-play { background: linear-gradient(#FFE9C7, #FFD6E8); }
.mu-scene { background: radial-gradient(circle at 50% 20%, #FFF7E8, #FFE3C2 70%) !important; }
.mu-xylo { position: absolute; left: 4%; right: 4%; top: 20%; bottom: 6%; display: flex; gap: 2.2%; align-items: center; justify-content: center; }
.mu-xylo::before { content: ""; position: absolute; left: 0; right: 0; top: 18%; height: 5%; background: #B5835A; border-radius: 9px; transform: rotate(4deg); box-shadow: 0 3px 0 #8C5E3A; }
.mu-xylo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18%; height: 5%; background: #B5835A; border-radius: 9px; transform: rotate(-4deg); box-shadow: 0 3px 0 #8C5E3A; }
.mu-bar { position: relative; z-index: 1; flex: 1; border: 0; padding: 0; border-radius: 14px; background: linear-gradient(90deg, rgba(255,255,255,.35), transparent 40%), var(--c); box-shadow: inset 0 -6px 0 rgba(0,0,0,.18), 0 5px 8px rgba(0,0,0,.18); display: flex; align-items: flex-end; justify-content: center; touch-action: none; }
.mu-bar b { margin-bottom: 8%; font-size: clamp(16px, 5.2cqw, 30px); font-weight: 900; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.35); }
.mu-nail { position: absolute; left: 50%; top: 14%; width: 22%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: #EDE3D6; box-shadow: inset 0 -2px 0 #A89580; }
.mu-nail.b { top: auto; bottom: 26%; }
.mu-bar.hit { animation: muHit .3s; }
@keyframes muHit { 40% { transform: translateY(4%) scale(.96); filter: brightness(1.25); } }
.mu-bar.next { animation: muNext .8s ease-in-out infinite; outline: 4px solid #fff; outline-offset: 2px; }
@keyframes muNext { 50% { transform: translateY(-5%); filter: brightness(1.2); } }
.mu-xylo.two { left: 22%; right: 22%; gap: 14%; }
.mu-xylo.two .mu-bar { flex: none; width: 34%; }
.mu-xylo.two .mu-bar b { font-size: clamp(22px, 8cqw, 40px); }
.mu-float { position: absolute; z-index: 8; transform: translate(-50%, -50%); font-style: normal; font-size: clamp(22px, 8cqw, 44px); font-weight: 900; text-shadow: 0 2px 0 #fff; pointer-events: none; animation: muFloat .9s ease-out forwards; }
@keyframes muFloat { to { transform: translate(-50%, -160%) rotate(15deg); opacity: 0; } }
.mu-notebox, .mu-instbox { position: absolute; inset: 16% 6% 8%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; }
.mu-bignote { width: 58%; aspect-ratio: 1; background: #fff; border-radius: 28px; box-shadow: 0 6px 0 #F0D3B5; display: grid; place-items: center; }
.mu-bignote svg { width: 80%; height: 80%; }
.mu-clap { display: flex; gap: 3%; justify-content: center; width: 100%; }
.mu-clap i { font-style: normal; font-size: clamp(26px, 10cqw, 52px); opacity: .25; filter: grayscale(1); transition: .15s; }
.mu-clap i.on { opacity: 1; filter: none; transform: scale(1.2); }
.mu-ear { font-size: clamp(70px, 30cqw, 160px); animation: muBob 1.4s ease-in-out infinite; }
.mu-pick { border: 3px solid #E7D5FF; background: #fff; border-radius: 20px; padding: 8px 10px; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 5px 0 #D9C2FF; font-size: 34px; }
.mu-pick svg, .mu-pick img { width: 64px; height: 64px; object-fit: contain; }
.mu-pick b { font-size: clamp(15px, 4.2vw, 19px); color: #4A2C7A; font-weight: 900; }
.mu-pick.again { min-width: 74px; justify-content: center; }
.mu-pick.nope { animation: sxShake .4s; }
.mu-inst { border: 0; background: #fff; border-radius: 28px; width: 72%; aspect-ratio: 1; box-shadow: 0 6px 0 #F0D3B5; padding: 6%; }
.mu-inst img { width: 100%; height: 100%; object-fit: contain; }
.mu-inst.hit { animation: muHit .3s; }
.mu-listen { background: #9B5DE5 !important; }
.mu-win .sx-medal { font-size: 60px; }
/* 마을 두 번째 동네 표지판 */
.tw-sign { position: absolute; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; z-index: 2; }
.tw-sign img { width: 100%; display: block; filter: drop-shadow(0 5px 5px rgba(20,60,30,.3)); }
.tw-sign b { position: absolute; left: 8%; right: 8%; top: 14%; height: 44%; display: grid; place-items: center; color: #6B3A12; font-weight: 900; font-size: clamp(12px, 4.4cqw, 20px); white-space: nowrap; }
.tw-sign.l b::before { content: "‹ "; } .tw-sign.r b::after { content: " ›"; }
.tw-sign { animation: twSign 1.6s ease-in-out infinite; }
@keyframes twSign { 50% { transform: translate(-50%, -54%); } }
/* 어른 확인 (앱 밖으로 나가는 링크 앞) */
.pg-ov { position: fixed; inset: 0; z-index: 9999; background: rgba(20,20,40,.55); display: grid; place-items: center; padding: 16px; }
.pg-box { background: #fff; border-radius: 26px; padding: 20px 18px; width: min(100%, 380px); text-align: center; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.pg-box h3 { margin: 0 0 6px; font-size: 22px; color: #0A2E6E; }
.pg-box p { margin: 0 0 12px; color: #4A5878; font-size: 16px; }
.pg-q { font-size: 34px; font-weight: 900; color: #0A2E6E; margin: 6px 0 12px; }
.pg-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pg-opts button { border: 0; border-radius: 16px; background: #EEF3FF; font-size: 26px; font-weight: 900; color: #0A2E6E; padding: 12px 0; }
.pg-x { margin-top: 14px; border: 0; background: none; color: #7A869E; font-size: 16px; text-decoration: underline; }
.mu-prog { display: block; width: 46vw; max-width: 220px; height: 12px; border-radius: 99px; background: #E6DAF5; overflow: hidden; }
.mu-prog i { display: block; height: 100%; background: linear-gradient(90deg, #FF5A5A, #FFD23F, #5CC36B, #4FC3F7, #9B5DE5); border-radius: 99px; transition: width .2s; }
.mu-scene .mu-xylo { bottom: 10%; }
.mu-scene .jb-say.num { left: 26%; right: 26%; white-space: nowrap; }
.mu-bar b { font-size: clamp(16px, 6cqw, 34px); }
.mu-grid .mu-b b { font-size: clamp(20px, 5.6vw, 28px); line-height: 1.2; }
.tw-sign b { display: flex; align-items: center; justify-content: center; gap: 2px; font-size: clamp(12px, 4.6cqw, 22px); }
@media (orientation: landscape) {
  .mu-grid.n4, .mu-grid.n5 { grid-template-columns: repeat(var(--mn, 4), 1fr); max-width: 1000px; gap: 12px; }
  .mu-grid.n5 { --mn: 5; }
  .mu-grid .mu-b { padding: 12px 8px; }
  .mu-grid .mu-b b { font-size: clamp(18px, 2.6vw, 26px); text-align: center; }
}
@media (orientation: landscape) and (max-height: 500px) { .mu-grid .mu-b .sx-ic { width: 64px; height: 64px; } }
/* 10/18: 세로 화면 말풍선은 장면 밖(위)에 — 비어 있어도 자리를 지켜서 장면이 들썩이지 않게 */
.jb-play > .jb-say { position: static; inset: auto; width: min(100%, 640px); box-sizing: border-box; flex: none; margin: 0; min-height: 2.7em; display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: 0 3px 8px rgba(0,0,0,.1); }
.jb-play > .jb-say:empty { display: flex; visibility: hidden; }
.jb-play > .jb-say.num { left: auto; right: auto; }
/* 10/18: 가로 화면 마을 지도 — 스크롤 없이 한눈에(건물 3칸×2줄, 지도 그림은 배경으로 꽉) */
@media (orientation: landscape) {
  .tw-wrap { overflow: hidden; display: grid; place-items: center; padding: 4px 12px 10px; }
  .tw-map { aspect-ratio: 16 / 7; height: 100%; width: auto; max-width: 100%; max-height: 100%; background-size: cover !important; background-position: center 60% !important; }
  .tw-b { left: var(--lx) !important; top: var(--ly) !important; width: 21% !important; }
  .tw-b img { max-height: 30cqh; object-fit: contain; }
  .tw-sign { left: 93% !important; top: 86% !important; width: 13% !important; }
  .tw-sign b { font-size: clamp(10px, 1.7cqw, 15px); }
  .tw-bb { width: 7%; }
  .tw-b b { font-size: clamp(11px, 1.9cqw, 17px); }
}
@media (orientation: landscape) {
  .tw-b { width: 16% !important; }
  .tw-b img { max-height: none; }
  .tw-sign { left: 94% !important; top: 50% !important; width: 11% !important; }
  .tw-bb { left: 33% !important; top: 58% !important; transition: none; }
  .tw-bb.walk { left: 33% !important; }
}
.jb-play > .jb-say { min-height: calc(2.5em + 18px); line-height: 1.25; }
/* 10/18 사용자: 노래 가로 — 카드를 크게, 가사는 카드 그림 위쪽 빈 곳에 글자만(배경 띠 없이), 공룡을 가리지 않게 */
@media (orientation: landscape) {
  .songplay .song-stage { position: relative; padding: 0 0 2px; }
  .songplay .song-walker { height: calc(100% - 6px); margin-top: 0; aspect-ratio: 4 / 3; }
  .songplay .song-front .song-img { padding: 19% 4% 3%; }
  .songplay .song-ribbon { top: 3.5%; z-index: 6; background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 .2em; color: #0A2E6E;
    text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 10px #fff; font-size: clamp(28px, 10.5vh, 52px); pointer-events: none; }
  .songplay .song-ribbon .song-notes i { color: #F5B82E; text-shadow: none; }
  .songplay .song-stage:has(.song-walker[hidden]) .song-ribbon { color: #FFE27A; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
  .songplay .song-group { margin-top: 3.2em; }
}
@media (orientation: landscape) {
  .songplay .song-top { position: absolute; left: 0; right: 0; top: 0; z-index: 8; pointer-events: none; padding-top: 8px; }
  .songplay .song-top .icon-btn { pointer-events: auto; }
  .songplay .song-top .song-title { visibility: hidden; }
  .songplay .song-stage { padding: 8px 0 22px; }
  .songplay .song-dots { position: absolute; left: 0; right: 0; bottom: 4px; }
}
/* 10/18: 가로 영상 — 이름이 영상을 너무 가리지 않게 */
@media (orientation: landscape) {
  .video-layer:not(.has-desc) .video-name { transition: left .5s ease, bottom .5s ease, transform .5s ease, font-size .5s ease, padding .5s ease; font-size: clamp(30px, 11vh, 60px); bottom: 6%; }
  .video-layer:not(.has-desc) .video-name.mini { left: 2.5%; bottom: 4%; transform: none; font-size: clamp(20px, 6.5vh, 32px); padding: 6px 16px; border-radius: 14px; box-shadow: 0 4px 0 rgba(0,0,0,.25); opacity: .95; }
}
/* 10/18: 가로 화면 — 알 병 화면이 화면 밖으로 넘쳐 확인 버튼이 안 보이던 것 → 병 왼쪽, 숫자·확인 오른쪽 */
@media (orientation: landscape) {
  .rw-box { display: grid; grid-template-columns: auto auto; column-gap: 32px; row-gap: 14px; align-items: center; }
  .rw-glow { grid-row: 1 / span 2; width: min(78vh, 300px); }
  .rw-count { align-self: end; justify-content: center; font-size: 40px; }
  .rw-count svg { width: 34px; height: 42px; }
  .rw-ok { align-self: start; width: 200px; height: 64px; border-radius: 32px; }
}
/* 10/18: 숫자 세기 가로 — 오른쪽 칸: 고르기 → 큰 숫자·말 → 재생 버튼 (가운데 정렬, 겹치지 않게) */
@media (orientation: landscape) {
  .countgame { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); row-gap: 6px; }
  .countgame .cnt-opts { flex-direction: column; align-items: center; gap: 6px; }
  .countgame .cnt-label { flex-direction: row; align-items: baseline; justify-content: center; gap: 14px; min-height: 0; }
  .countgame .cnt-label b { font-size: clamp(48px, 24vh, 120px); }
  .countgame .cnt-label span { font-size: clamp(26px, 11vh, 54px); white-space: nowrap; }
  .countgame .cnt-play { justify-self: center; width: 72px; height: 72px; }
}
/* 10/18: 도트카드 가로 — 카드는 가로로 넓게, 숫자는 오른쪽에 크게 */
@media (orientation: landscape) {
  .dot-stage.land > .dot-card { width: var(--dW, var(--dS)); height: var(--dH, var(--dS)); }
  .dot-stage.land { justify-content: flex-start; padding-left: 8px; }
  .dot-stage.land > .dot-card .dot-num { left: calc(100% + 16px); padding: 12px 24px 14px; min-width: 150px; }
  .dot-stage.land > .dot-card .dot-num i { font-size: clamp(72px, 30vh, 130px); }
  .dot-stage.land > .dot-card .dot-num span { font-size: clamp(30px, 11vh, 48px); }
  .dotgame .dot-q { font-size: clamp(30px, 10vh, 44px); }
  .dotgame .dot-ch { min-width: 120px; min-height: 90px; font-size: 52px; }
}
/* 10/18 사용자: 꾸미기(메이크업·옷가게·미용실) — 모자 쓸 자리(머리 위)를 남기고 몸이 안 잘리게, 가로 화면은 오른쪽 고르는 칸을 크게 */
.sl-dress .sl-char { max-height: 80%; }
@media (orientation: landscape) {
  .sl-dress { max-width: none !important; width: 100%; grid-template-columns: minmax(0, 1fr) clamp(300px, 42vw, 440px); }
  .sl-dress .sl-stage { height: auto; min-height: 0; max-width: none; }
  .sl-dress .sl-char { width: auto; height: 80%; max-height: 80%; bottom: 1%; }
  .sl-dress .sl-friends { gap: 6px; justify-content: center; padding: 2px 8px 4px 0; flex-wrap: nowrap; }
  .sl-dress .sl-fr { width: 58px; padding: 3px 2px 1px; } .sl-dress .sl-fr img { width: 40px; height: 40px; } .sl-dress .sl-fr span { display: block; font-size: 11px; }
  .sl-dress .sl-cats { flex-wrap: nowrap; justify-content: center; padding: 2px 8px 4px 0; }
  .sl-dress .sl-cat { padding: 5px 12px; font-size: 15px; }
  .sl-dress .sl-tray { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(64px, 19vh, 92px); gap: 8px; padding: 8px; }
  .sl-dress .sl-bar .sl-tools button { width: 48px; height: 48px; }
}
@media (orientation: landscape) { .sl-dress .sl-tray { grid-auto-rows: clamp(58px, 16vh, 76px); gap: 6px; } }
/* 10/18: 우리 집 갈래 */
.hb-cats { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 4px; max-width: 820px; width: 100%; margin: 0 auto; box-sizing: border-box; scrollbar-width: none; }
.hb-cat { flex: none; display: flex; align-items: center; gap: 4px; border: 2px solid #CFE3F7; background: rgba(255,255,255,.9); color: #0A2E6E; border-radius: 99px; padding: 8px 14px; font-family: "Jua", var(--font-display); font-size: 18px; white-space: nowrap; }
.hb-cat.on { background: #1E6FD9; border-color: #1E6FD9; color: #fff; }
.hb-card b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: clamp(18px, 5.4vw, 22px); }
.hb-card.soon { opacity: .75; }
.hb-card.soon .hb-ic { font-size: 30px; }
.hb-card.soon b { white-space: normal; font-size: clamp(16px, 4.6vw, 20px); }
.hb-card.soon .hb-lv { color: #8A97AE; }
@media (orientation: landscape) { .hb-cats { justify-content: center; } .hb-cat { font-size: 16px; padding: 6px 12px; } }
.hb-cats { flex: none; flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: 6px; }
.hb-menu .hb-lead, .hb-menu .hb-list { flex: none; }
@media (orientation: portrait) { .hb-cat { font-size: 16px; padding: 6px 12px; } }
@media (orientation: landscape) {
  .hb-menu .hb-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; grid-template-columns: repeat(3, 1fr); max-width: 900px; align-content: start; }
  .hb-menu .hb-card { padding: 8px 10px 8px 8px; gap: 8px; flex-wrap: wrap; }
  .hb-menu .hb-lv { margin-left: 0; }
  .hb-menu .hb-lead { margin: 2px 0 6px; font-size: 17px; }
}
@media (orientation: landscape) {
  .hb-menu .hb-list { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .hb-menu .hb-card { flex-direction: column; flex-wrap: nowrap; justify-content: center; text-align: center; gap: 6px; padding: 12px 8px; }
  .hb-menu .hb-card b { white-space: normal; font-size: clamp(16px, 2.4vw, 20px); line-height: 1.2; }
  .hb-menu .hb-ic { width: 64px; height: 64px; }
}
@media (orientation: landscape) {
  .hb-menu { max-width: none !important; }
  .hb-menu .hb-list { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); max-width: 980px; }
  .hb-menu .hb-card b { word-break: keep-all; }
}
/* 10/18: 이름 말하기·이름 박수·소리 따라 하기 — 그림이 카드 밖으로 넘쳐 잘리던 것, 가로 화면 그림·글자 크게 */
.call-card { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.call-card .art-img { min-height: 0; max-height: 100%; }
@media (orientation: landscape) {
  .screen.call { padding-left: 12px; padding-right: 12px; max-width: none !important; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important; }
  .screen.call > .call-card { padding: 2%; }
  .screen.call:not(.clapgame) > .call-name { font-size: clamp(34px, 13vh, 64px); }
  .clapgame .clap-syl b { font-size: clamp(26px, 9vh, 48px); max-width: 104px; }
  .clapgame .clap-hand { width: min(110px, 24vh); height: min(110px, 24vh); }
  .screen.call > .game-top { margin-bottom: -4px; }
}
.call-name { overflow-wrap: anywhere; }
/* 10/18: 맞혀보기 가로 — 그림은 왼쪽에 크게, 고르기 버튼은 오른쪽에 세로로 크게 */
@media (orientation: landscape) {
  .quiz-screen { display: grid !important; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); max-width: none !important; height: 100dvh; }
  .quiz-screen > .topbar { grid-column: 1 / -1; }
  .quiz-screen > .quiz-art { grid-column: 1; grid-row: 2; display: grid; place-items: center; padding: 0 0 10px 12px; }
  .quiz-screen > .quiz-art .art-img { width: 100%; height: 100%; max-height: calc(100dvh - 76px); object-fit: contain; }
  .quiz-screen > .quiz-choices { grid-column: 2; grid-row: 2; grid-template-columns: 1fr !important; align-content: center; gap: 10px !important; padding: 0 16px 12px 8px; background: none; }
  .quiz-screen > .quiz-choices .choice, .quiz-screen > .quiz-choices.n4 .choice { font-size: clamp(22px, 8vh, 36px) !important; min-height: min(76px, 19vh); padding: 4px 8px; }
  .quiz-screen > .quiz-choices.n4 { gap: 8px !important; }
  .quiz-screen > .quiz-choices.n4 .choice { min-height: min(64px, 16vh); font-size: clamp(20px, 7vh, 32px) !important; }
}
/* 10/18: 어디 있게? 가로 — 카드는 한 줄로(어려움 6장도), 화면 높이에 맞춰 크기 정함 → 글자·단계 버튼을 가리지 않음 */
@media (orientation: landscape) {
  .screen.find { max-width: none !important; }
  .screen.find .game-levels { max-width: 420px; margin: 0 auto; width: 100%; }
  .screen.find .game-levels .seg { min-height: 36px; }
  .find-floor { flex-wrap: nowrap; align-items: center; gap: 12px; padding: 4px 12px; }
  .find-floor .fcard, .find-floor.n4 .fcard, .find-floor.n6 .fcard { flex: 1 1 0; width: auto; min-width: 0; max-width: calc((100dvh - 230px) * 1.333); }
  .find-name { min-height: 54px; font-size: clamp(28px, 11vh, 48px); }
}
/* 10/18: 크기 순서 — 칸 안 이름이 그림을 가리지 않게(그림 위, 이름 아래). 가로는 줄을 왼쪽에 크게, 카드는 오른쪽 2줄 */
.size-slot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 2px; }
.size-slot img { flex: 1 1 0; min-height: 0; height: auto !important; max-height: 100%; }
.size-slot b { position: static; flex: none; padding: 0 2px; }
@media (orientation: landscape) {
  .sizegame { display: grid !important; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); height: 100dvh; max-width: none !important; column-gap: 12px; padding: 0 12px 10px; box-sizing: border-box; }
  .sizegame > .game-top, .sizegame > .find-dots { grid-column: 1 / -1; }
  .sizegame > .size-line { grid-column: 1; grid-row: 3; height: auto !important; min-height: 0; align-self: stretch; }
  .sizegame > .size-hand { grid-column: 2; grid-row: 3; }
  .sizegame .size-hand-in { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 8px; }
  .sizegame .size-card, .sizegame .size-hand.n4 .size-card { width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 3; }
  .sizegame .size-hand.n3 .size-hand-in { grid-template-columns: 1fr 1fr; }
}
@media (orientation: landscape) {
  .sizegame .size-card.placed { display: none; }
  .sizegame .size-hand.n5 .size-hand-in { grid-template-columns: repeat(3, 1fr); }
  .sizegame .size-hand-in { overflow: hidden; }
}
@media (orientation: portrait) { .sizegame .size-line { height: clamp(170px, 36vh, 340px); } .sizegame .size-hand-in { gap: 14px; } .sizegame .size-card { width: calc(33.3% - 10px); } }
/* 10/18: 키우기 — 공·욕조·샤워볼이 공룡 뒤에 숨던 것, 돌봄 표시, 방 꾸미기 놓기/빼기, 새 알 */
.pet2 .pet-tub { z-index: 75; }
.pet2 .pet-ball { z-index: 95; }
.pet2 .pet-fx { z-index: 85; pointer-events: none; }
.pet2 .pet-sponge { z-index: 96; width: min(18%, 90px); height: auto; aspect-ratio: 1; border-radius: 0; background: none; box-shadow: none; transform: translate(-50%, -50%); filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); left: 62%; top: 52%; animation: petPuff 1.2s ease-in-out infinite; }
.pet2 .pet-sponge.held { animation: none; transition: left .06s linear, top .06s linear; }
@keyframes petPuff { 0%,100% { transform: translate(-80%, -50%) rotate(-14deg); } 50% { transform: translate(-20%, -60%) rotate(14deg); } }
.pet-hint { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); z-index: 97; background: #fff; color: #0A2E6E; font-family: "Jua", var(--font-display); font-size: clamp(18px, 5vw, 24px); padding: 8px 16px; border-radius: 18px; box-shadow: 0 4px 10px rgba(0,0,0,.15); white-space: nowrap; animation: popIn .35s both; pointer-events: none; }
.pet-bar .pet-btn { position: relative; }
.pet-bar .pet-btn.done::after { content: "✓"; position: absolute; right: -2px; top: -2px; width: 24px; height: 24px; border-radius: 50%; background: #2EAD6B; color: #fff; font-size: 15px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.ps-it { position: relative; }
.ps-it .ps-ok { display: none; }
.ps-it.on .ps-ok { display: grid; }
.ps-it.have:not(.on) img { opacity: .45; filter: grayscale(.4); }
.ps-nm { position: absolute; left: 4px; right: 4px; bottom: 4px; font-size: 12px; font-weight: 800; color: #2E5E4E; text-align: center; }
.ps-tip { margin: 4px 0 8px; text-align: center; color: #4A5878; font-size: 15px; }
.pg-new { margin-left: 8px; border: 0; border-radius: 99px; background: linear-gradient(120deg, #FFB020, #FF7A3D); color: #fff; font-weight: 900; font-size: 15px; padding: 4px 12px; box-shadow: 0 3px 0 #C25E1A; }
.pg-done { display: inline-flex; align-items: center; justify-content: center; }
.pet-pk { position: relative; }
.pet-pk.raised { box-shadow: 0 0 0 3px #FFD54A; }
.pk-star { position: absolute; right: 4px; top: 2px; font-style: normal; color: #F5B82E; font-size: 22px; text-shadow: 0 1px 0 #fff; }
/* 10/18: 놀기 가로 — 모든 놀이를 같은 크기 6칸으로, 한 화면에 다 보이게 */
@media (orientation: landscape) and (max-height: 600px) {
  .play-row { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; grid-auto-rows: minmax(78px, 1fr); gap: 8px !important; }
  .play-row .mode-card.play, .play-row .mode-card.play.wide { grid-column: auto !important; min-height: 0 !important; flex-direction: column; align-items: center !important; justify-content: center !important; text-align: center; padding: 6px 4px !important; gap: 4px !important; }
  .play-row .mode-card::before, .play-row .mode-card.wide::before { display: none; }
  .play-row .mode-card.play .mode-icon { width: 36px; height: 36px; }
  .play-row .mode-card.play .mode-text b { font-size: clamp(14px, 4.4vh, 19px) !important; white-space: normal; word-break: keep-all; line-height: 1.15; }
}
/* 10/18: 사파리 사진첩 가로 — 사진 줄 아래에 빔빔과 버튼을 나란히(아래 글자 잘림 없게) */
@media (orientation: landscape) and (max-height: 600px) {
  .sf-album { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); height: 100dvh; padding-bottom: 8px; max-width: none !important; }
  .sf-album > .game-top, .sf-album > .sf-photos { grid-column: 1 / -1; }
  .sf-album .sf-photos { max-width: min(820px, calc((100dvh - 190px) * 5 * 1.05)); }
  .sf-album > .sf-proud { grid-column: 1; grid-row: 3; position: static; height: min(110px, 24vh); width: auto; align-self: center; margin: 0 0 0 40px; transform: none; }
  .sf-album > .end-actions { grid-column: 2; grid-row: 3; display: flex; flex-direction: row; gap: 14px; justify-content: center; align-items: center; margin: 0; padding: 0 16px; }
  .sf-album > .end-actions .big-btn { width: auto; min-width: 200px; flex: 0 1 260px; padding: 10px 18px; font-size: clamp(18px, 5vh, 24px); }
}
@media (orientation: landscape) and (max-height: 600px) {
  .sf-album > .end-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; width: min(100%, 560px) !important; justify-self: center; }
  .sf-album > .end-actions .big-btn { min-width: 0; width: 100%; }
}
@media (orientation: portrait) { .sf-album .sf-photos { grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: min(100%, calc((100dvh - 380px) * .68)); } .sf-album .sf-proud { height: 80px; } }
/* 10/18: 키우기 가로 — 방 그림 비율을 지켜서(가구 자리 그대로) 가운데에, 왼쪽은 게이지·자라기, 오른쪽은 버튼 */
@media (orientation: landscape) {
  .pet2:not(.pet-walk) { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); column-gap: 14px; height: 100dvh; max-width: none !important; padding-bottom: 8px; box-sizing: border-box; }
  .pet2:not(.pet-walk) > .game-top { grid-column: 1 / -1; }
  .pet2:not(.pet-walk) > .pet-needs { grid-column: 1; grid-row: 2 / 4; display: flex; flex-direction: column; justify-content: center; gap: 14px; align-self: center; padding-left: 12px; }
  .pet2:not(.pet-walk) > .pet-needs .pn { width: 100%; }
  .pet2:not(.pet-walk) > .pet-grow { grid-column: 3; grid-row: 2; flex-wrap: wrap; justify-content: center; padding: 0 8px; }
  .pet2:not(.pet-walk) > .pet-scene { grid-column: 2; grid-row: 2 / 4; margin: 0 !important; height: 100%; width: auto; aspect-ratio: 4 / 5; flex: none; }
  .pet2:not(.pet-walk) > .pet-bar { grid-column: 3; grid-row: 3; position: static !important; transform: none !important; display: grid !important; grid-template-columns: repeat(3, auto); justify-content: center; align-content: center; gap: 10px 14px !important; padding: 0 !important; }
}
.pet-hint { font-size: clamp(15px, 4.4cqw, 22px); max-width: 92%; white-space: normal; text-align: center; }
.pet-scene { container-type: inline-size; }
@media (orientation: landscape) { .pet2:not(.pet-walk) > .pet-bar .pet-btn { width: 64px; height: 64px; } }
/* 10/18 사용자: 가로 화면 정리 — 퍼즐·화석 발굴·스티커 판·색칠하기 */
@media (orientation: landscape) and (max-height: 600px) {
  /* 퍼즐: 조각 수 고르기를 제목 줄 오른쪽으로 → 퍼즐판이 화면 높이를 다 씀 */
  .puzzlegame { position: relative; grid-template-rows: auto minmax(0, 1fr) !important; }
  .puzzlegame > .game-top { justify-content: flex-start; gap: 12px; }
  .puzzlegame > .game-levels { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 76px; width: min(52%, 460px); margin: 0; z-index: 3; }
  .puzzlegame > .game-levels .seg { min-height: 40px; font-size: 15px; }
  .puzzlegame .puzzle-board { --w: min(calc((100dvh - 96px) * var(--ratio)), 62vw); grid-row: 2 !important; }
  .puzzlegame .puzzle-name, .puzzlegame .puzzle-tray { grid-row: 2 !important; }
  .puzzlegame .game-title { text-align: left; }
  /* 화석 발굴: 모래판(그림)은 왼쪽에 크게, 이름은 오른쪽에 크게 */
  .digs .dig-stage { grid-auto-flow: column; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: center; justify-content: center; column-gap: 20px; padding-top: 0; }
  .digs .dig-pit { width: min(64vw, calc((100dvh - 130px) * 4 / 3)) !important; }
  .digs .dig-name { font-size: clamp(30px, 11vh, 60px) !important; text-align: left; word-break: keep-all; }
  /* 스티커 판: 판 고르기 줄은 왼쪽(판 위)만, 오른쪽 도구·스티커는 맨 위부터 */
  .stk { display: grid !important; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); column-gap: 12px; height: 100dvh; max-width: none !important; box-sizing: border-box; }
  .stk > .game-top { grid-column: 1 / -1; }
  .stk > .stk-boards { grid-column: 1; grid-row: 2; }
  .stk > .stk-main { display: contents; }
  .stk .stk-board { grid-column: 1; grid-row: 3; width: 100%; height: auto; max-height: 100%; align-self: start; }
  .stk .stk-side { grid-column: 2; grid-row: 2 / 4; min-height: 0; }
  .stk .stk-tray { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); grid-auto-rows: 72px; }
  .stk .stk-tool { width: 48px; height: 48px; }
}
/* 색칠하기: 진짜 색 미니 카드를 왼쪽 위로(오른쪽 위 머리가 가려져서) */
.color-peek { right: auto; left: 8px; }
@media (orientation: landscape) and (max-height: 600px) {
  .digs { max-width: none !important; }
  .digs .game-hint { position: absolute; top: max(62px, env(safe-area-inset-top)); left: 0; right: 0; }
  .digs .find-dots { position: absolute; top: 18px; right: 90px; }
  .digs .dig-stage { margin-top: 28px; }
  .digs .dig-pit { width: min(60vw, calc((100dvh - 120px) * 4 / 3)) !important; }
}
/* 10/18: 눕힌 칫솔 — 손가락은 칫솔대, 칫솔머리는 왼쪽(닦는 자리) */
.hb-hand.lie, .hb-hand.lie.st-down, .hb-hand.lie.st-up, .hb-hand.lie.st-side, .hb-hand.lie.st-circle { width: 69px; height: 150px; transform-origin: 50% 80%; transform: translate(-50%, -80%) rotate(-90deg); animation: none; }
.hb-hand.lie img { animation: none !important; }
.hb-hand.lie.st-down img { animation: hbLieD .22s ease-in-out !important; }
.hb-hand.lie.st-up img { animation: hbLieU .22s ease-in-out !important; }
.hb-hand.lie.st-side img { animation: hbLieS .22s ease-in-out !important; }
.hb-hand.lie.st-circle img { animation: hbLieC .22s linear !important; }
@keyframes hbLieD { 50% { transform: translateX(-8px); } }
@keyframes hbLieU { 50% { transform: translateX(8px); } }
@keyframes hbLieS { 50% { transform: translateY(-8px); } }
@keyframes hbLieC { 25% { transform: translate(4px, -4px); } 50% { transform: translate(0, -8px); } 75% { transform: translate(-4px, -4px); } }
/* 우리 집 끝 화면: 가로에서 잘리던 것 → 그림 왼쪽, 글·버튼 오른쪽 */
@media (orientation: landscape) and (max-height: 600px) {
  .hb-endbox { max-width: 640px; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; row-gap: 6px; align-items: center; padding: 16px 20px; }
  .hb-endbox > img { grid-row: 1 / span 4; width: min(150px, 34vh); height: min(150px, 34vh); }
  .hb-endbox > *:not(img) { grid-column: 2; justify-self: center; }
  .hb-endbox .end-actions { width: 100%; grid-template-columns: 1fr 1fr; }
  .hb-endbox .big-btn { padding: 10px 8px; font-size: 20px; }
}
/* 10/18 음악실 2차: 계이름 순서표 · 따/딴 박자 · 소리 카드 · 가로 배치 */
.mu-songcard { text-align: center; width: 100%; box-sizing: border-box; }
.mu-songcard > b { display: block; font-family: "Jua", var(--font-display); font-weight: 400; font-size: clamp(22px, 6vw, 30px); color: #C2185B; }
.mu-strip { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 8px 0 2px; }
.mu-strip i { font-style: normal; min-width: 2.1em; padding: 6px 4px; border-radius: 14px; background: #F3EEF9; border: 3px solid #E4DAF2; color: #9A8FB0; font-family: "Jua", var(--font-display); font-size: clamp(22px, 6.4vw, 32px); line-height: 1.1; transition: .15s; }
.mu-strip i sup { font-size: .5em; }
.mu-strip i.done { background: var(--c); border-color: var(--c); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.mu-strip i.now { border-color: var(--c); color: #2B2350; background: #fff; transform: translateY(-5px) scale(1.12); box-shadow: 0 4px 0 var(--c); }
.mu-line { display: block; font-style: normal; font-size: 14px; color: #8A7FA6; }
.mu-notebox .mu-bignote { width: min(66%, 52cqh); }
.mu-bignote svg { width: 86%; height: 86%; }
.mu-syls { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mu-syl { display: flex; flex-direction: column; align-items: center; min-width: 3.2em; padding: 6px 6px 4px; border-radius: 16px; background: #fff; border: 3px solid #EDE3F7; opacity: .55; transition: .12s; }
.mu-syl b { font-family: "Jua", var(--font-display); font-weight: 400; font-size: clamp(26px, 8cqw, 44px); color: #4A2C7A; line-height: 1; }
.mu-syl i { font-style: normal; font-size: clamp(20px, 6cqw, 32px); }
.mu-syl.hold b { color: #9B5DE5; }
.mu-syl.rest b { color: #7A869E; }
.mu-syl.half { min-width: 2.4em; }
.mu-syl.on { opacity: 1; transform: scale(1.12); border-color: #FFB020; background: #FFF6D8; }
.mu-syls.sm .mu-syl { min-width: 0; padding: 2px 4px; border-width: 2px; opacity: 1; }
.mu-syls.sm .mu-syl b { font-size: 18px; } .mu-syls.sm .mu-syl i { font-size: 13px; }
.mu-rpick { border: 3px solid #E7D5FF; background: #fff; border-radius: 18px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; align-items: center; box-shadow: 0 4px 0 #D9C2FF; width: 100%; max-width: 360px; }
.mu-rpick.right { border-color: #2EAD6B; box-shadow: 0 4px 0 #1E7A48; }
.mu-rpick.nope { animation: sxShake .4s; }
.mu-rnotes { display: flex; gap: 6px; align-items: flex-end; height: 46px; }
.mu-rnotes i { height: 100%; display: block; }
.mu-rnotes svg { height: 100%; width: auto; }
.mu-hl { position: absolute; inset: 16% 6% 10%; display: flex; gap: 8%; justify-content: center; align-items: center; }
.mu-snd { position: relative; width: 38%; aspect-ratio: 3 / 4; border: 0; border-radius: 26px; background: var(--c); box-shadow: 0 8px 0 rgba(0,0,0,.15); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%; transition: height .4s; }
.mu-snd span { font-size: clamp(44px, 16cqw, 90px); line-height: 1; font-family: "Jua", var(--font-display); color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.25); }
.mu-snd i { font-style: normal; font-size: clamp(26px, 8cqw, 44px); }
.mu-snd.on { animation: muHit .3s; filter: brightness(1.1); box-shadow: 0 0 0 6px #fff, 0 8px 0 rgba(0,0,0,.15); }
.mu-snd.reveal { aspect-ratio: auto; height: var(--h); width: 26%; border-radius: 16px; align-self: flex-end; }
.mu-snd.reveal i { display: none; }
.mu-snd.wide { width: 70%; aspect-ratio: 5 / 3; }
.mu-snd.stairs { align-items: flex-end; flex-direction: row; justify-content: center; gap: 4%; padding: 6%; background: #F3EEF9; }
.mu-snd.stairs em { font-style: normal; width: 28%; height: calc(25% + var(--n) * 9%); border-radius: 12px; background: var(--c); color: #fff; font-family: "Jua", var(--font-display); font-size: clamp(22px, 7cqw, 38px); display: grid; place-items: center; animation: popIn .4s both; animation-delay: calc(var(--t) * .2s); }
.mu-pickrow { display: flex; gap: 12px; justify-content: center; width: 100%; }
.mu-pick.big { min-width: 120px; font-size: 40px; padding: 8px 16px; }
.mu-pick.big b { font-size: clamp(18px, 5vw, 24px); }
.mu-play .mu-card b { font-size: clamp(22px, 6vw, 30px); }
.mu-play .mu-card p { font-size: clamp(17px, 4.6vw, 22px); word-break: keep-all; }
.mu-scene { container-type: size; }
@media (orientation: landscape) {
  .mu-play .jb-tray { width: min(44vw, 420px) !important; max-width: none; flex: none; }
  .mu-play .mu-card { width: 100%; box-sizing: border-box; }
  .mu-play .mu-card b { font-size: clamp(22px, 7vh, 32px); white-space: nowrap; }
  .mu-play .mu-card p { font-size: clamp(16px, 5vh, 22px); }
  .mu-strip i { font-size: clamp(20px, 7vh, 30px); }
  .mu-play .jb-scene { width: min(52vw, calc(100dvh - 24px)) !important; }
}
@media (orientation: landscape) {
  .mu-play .jb-tray { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 8px; overflow-y: auto; max-height: calc(100dvh - 70px); }
  .mu-play .mu-rpick { padding: 4px 8px; gap: 2px; }
  .mu-play .mu-rnotes { height: 34px; }
  .mu-play .mu-pick.again { flex-direction: row; gap: 6px; min-width: 0; padding: 4px 14px; font-size: 22px; }
}
.mu-pick.again { align-self: center; }
/* 10/18: 한 마을 12곳 */
.tw-map.tw12 { aspect-ratio: 5 / 9; background-size: cover; background-position: center; }
.tw12 .tw-b { width: 33%; }
.tw12 .tw-b img { max-height: 11.5cqh; width: auto; max-width: 100%; }
.tw12 { container-type: size; }
.tw12 .tw-b b { font-size: clamp(12px, 4.6cqw, 18px); margin-top: -4%; }
.tw12 .tw-bb { width: 13%; transform: translate(-50%, -100%); }
@media (orientation: landscape) {
  .tw-map.tw12 { aspect-ratio: 16 / 7; }
  .tw12 .tw-b { width: 15.5% !important; }
  .tw12 .tw-b img { max-height: 30cqh; }
  .tw12 .tw-b b { font-size: clamp(11px, 1.7cqw, 16px); }
  .tw12 .tw-bb { display: none; }
}
/* 10/18 뒤집는 카드(음악실·시계탑) */
.fc3d { position: absolute; left: 50%; top: 46%; width: min(62%, 62cqh); aspect-ratio: 1; transform: translate(-50%, -50%); perspective: 1200px; z-index: 5; cursor: pointer; animation: fcIn .5s cubic-bezier(.2,1.4,.4,1) both; transition: transform .55s ease-in, width .55s ease-in, opacity .55s; }
@keyframes fcIn { from { transform: translate(-50%, -50%) scale(.3) rotate(-12deg); opacity: 0; } }
.fc-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
.fc3d.flipped .fc-in { transform: rotateY(180deg); }
.fc-face { position: absolute; inset: 0; border-radius: 26px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; background: #fff; box-shadow: 0 8px 0 rgba(0,0,0,.08), 0 10px 22px rgba(0,0,0,.15); border: 5px solid var(--c, #E7D5FF); }
.fc-front img { width: 84%; height: 84%; object-fit: contain; animation: fcBob 1.6s ease-in-out infinite; }
@keyframes fcBob { 50% { transform: translateY(-5%) rotate(-3deg); } }
.fc3d:not(.flipped) .fc-front::after { content: "톡!"; position: absolute; right: -6%; bottom: -6%; background: #FF5C8A; color: #fff; font-family: "Jua", var(--font-display); font-size: clamp(16px, 5cqw, 24px); padding: 6px 12px; border-radius: 99px; animation: fcBob 1s ease-in-out infinite; }
.fc-back { transform: rotateY(180deg); display: flex; flex-direction: column; gap: 6%; background: radial-gradient(circle at 50% 30%, #fff, #FFF6E8); }
.fc-back b { font-family: "Jua", var(--font-display); font-weight: 400; font-size: clamp(44px, 20cqw, 120px); line-height: 1; }
.fc-back span { font-family: "Jua", var(--font-display); font-size: clamp(18px, 6cqw, 32px); color: #4A5878; padding: 0 8%; text-align: center; word-break: keep-all; }
.fc3d.ride { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.12); opacity: .2; }
.fc-rain { position: absolute; top: -8%; z-index: 9; font-style: normal; pointer-events: none; animation: fcRain 2.4s ease-in forwards; }
@keyframes fcRain { to { transform: translate(var(--dx), 115cqh) rotate(200deg); opacity: .2; } }
.ck-scene { background: radial-gradient(circle at 50% 20%, #FFFBEF, #E6F4FF 70%) !important; container-type: size; }
/* 요일 기차 */
.ck-train { position: absolute; left: 2%; right: 2%; bottom: 7%; height: 17%; display: flex; align-items: flex-end; z-index: 4; transition: transform 1.8s ease-in; }
.ck-train.go { transform: translateX(-120%); }
.ck-train.toot .ck-loco { animation: ckToot .5s; }
@keyframes ckToot { 40% { transform: translateY(-10%) rotate(-4deg); } }
.ck-loco { height: 100%; width: auto; flex: none; transform-origin: bottom; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); clip-path: inset(0 78% 0 0); margin-right: -78%; }
.ck-cars { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; height: 82%; margin-left: 2%; }
.ck-cars i { position: relative; border-radius: 10px; background: #fff; border: 3px solid var(--c); background-size: 78% auto; background-position: center 30%; background-repeat: no-repeat; display: flex; align-items: flex-end; justify-content: center; font-style: normal; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.ck-cars i::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -14%; height: 18%; background: radial-gradient(circle at 25% 50%, #444 0 30%, transparent 32%), radial-gradient(circle at 75% 50%, #444 0 30%, transparent 32%); }
.ck-cars b { font-family: "Jua", var(--font-display); font-weight: 400; color: var(--c); font-size: clamp(14px, 5cqw, 24px); background: rgba(255,255,255,.85); border-radius: 8px; padding: 0 4px; margin-bottom: 4%; }
.ck-cars i:not(.on):not(.empty) b { opacity: .35; }
.ck-cars i.empty { border-style: dashed; background-color: #F4F6FA; }
.ck-cars i.empty b { color: #9AA6BC; }
.ck-cars i.next { animation: sxPulse .9s ease-in-out infinite; box-shadow: 0 0 0 4px #FFD54A; }
.ck-cars i.hop { animation: ckHop .5s both; }
@keyframes ckHop { 40% { transform: translateY(-22%); } }
.ck-cars i.today { box-shadow: 0 0 0 5px #FFD54A, 0 0 20px #FFD54A; transform: translateY(-14%) scale(1.12); }
.ck-cars i.nope { animation: sxShake .4s; }
.ckg-days .fc3d { top: 40%; width: min(58%, 56cqh); }
.ck-picks { display: flex; gap: 10px; justify-content: center; width: 100%; }
.ck-pick { flex: 1; max-width: 120px; border: 3px solid #E3E9F3; background: #fff; border-radius: 18px; padding: 6px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 0 #DCE6F5; }
.ck-pick img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.ck-pick b { font-family: "Jua", var(--font-display); font-weight: 400; font-size: clamp(16px, 4.6vw, 22px); }
.ck-pick.nope, .ck-sbtn.nope { animation: sxShake .4s; }
/* 사계절 나무 */
.ck-tree { position: absolute; left: 50%; top: 45%; width: min(66%, 66cqh); aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; z-index: 4; }
.ck-tree img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0,0,0,.18)); }
.ck-tree.pop img { animation: ckTree .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes ckTree { 0% { transform: scale(.7) rotate(-6deg); } }
.ck-ring { position: absolute; left: 4%; right: 4%; bottom: 7%; display: flex; gap: 6px; justify-content: center; z-index: 5; }
.ck-ring i { font-style: normal; font-family: "Jua", var(--font-display); font-size: clamp(18px, 6cqw, 30px); padding: 4px 14px; border-radius: 99px; background: #fff; color: #9AA6BC; border: 3px solid #E3E9F3; }
.ck-ring i.on { background: var(--c); color: #fff; border-color: var(--c); transform: scale(1.12); }
.ck-q { position: absolute; inset: 14% 12% 12%; display: grid; place-items: center; animation: fcIn .45s both; }
.ck-q img { max-width: 100%; max-height: 100%; object-fit: contain; animation: fcBob 1.8s ease-in-out infinite; }
.ck-sbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 420px; }
.ck-sbtn { border: 0; border-radius: 20px; background: var(--c); color: #fff; font-family: "Jua", var(--font-display); font-size: clamp(26px, 7vw, 36px); padding: 12px 0; box-shadow: 0 5px 0 rgba(0,0,0,.18); }
.ck-sbtn.right { box-shadow: 0 0 0 5px #FFD54A, 0 5px 0 rgba(0,0,0,.18); }
.clocktown { background: linear-gradient(#E6F4FF, #FFF3E0); }
.ck-play { background: linear-gradient(#E6F4FF, #FFF3E0); }
@media (orientation: landscape) { .ck-grid.n2 { grid-template-columns: repeat(2, 1fr); max-width: 680px; } .ck-play .ck-sbtns { grid-template-columns: 1fr 1fr; } }
.fc3d.away { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.mu-fc .fc-back b { color: #4A2C7A; }
.mu-two { display: flex; width: 84%; height: 84%; gap: 4%; } .mu-two img { flex: 1; min-width: 0; object-fit: contain; animation: fcBob 1.6s ease-in-out infinite; }
.mu-bignote.img { background: none; box-shadow: none; display: flex; gap: 4%; justify-content: center; }
.mu-bignote.img img { height: 100%; max-width: 48%; object-fit: contain; animation: fcBob 1.6s ease-in-out infinite; }
.mu-bignote.img img:only-child { max-width: 100%; }
/* 10/18 키우기 목욕 — 사용자 그림 */
.pet2 .pet-soap { background: url(../assets/pet_bath/pb_foam.webp) center / contain no-repeat !important; border-radius: 0 !important; box-shadow: none !important; width: calc(44px * var(--s)) !important; height: calc(40px * var(--s)) !important; }
.pet-tub2 { position: absolute; left: 50%; bottom: 2%; width: 74%; transform: translateX(-50%); z-index: 75; pointer-events: none; }
.pet-tub2 .tub { width: 100%; display: block; opacity: .92; }
.pet-tub2 .duck { position: absolute; width: 18%; left: 70%; top: -6%; animation: petDuck 1.6s ease-in-out infinite; }
@keyframes petDuck { 50% { transform: translateY(-10%) rotate(8deg); } }
.pet-shower { position: absolute; top: 4%; width: 28%; z-index: 96; transform: translateX(-50%) rotate(-20deg); animation: petShower .5s ease-in-out infinite alternate; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(0,0,0,.2)); }
@keyframes petShower { to { transform: translateX(-60%) rotate(-10deg); } }
.pet-towel { position: absolute; top: 46%; width: 34%; z-index: 96; transform: translate(-50%, -50%); animation: petTowel .35s ease-in-out 3 alternate; pointer-events: none; }
@keyframes petTowel { to { transform: translate(-30%, -60%) rotate(10deg); } }
.pet-sparkle { position: absolute; top: 30%; width: 40%; z-index: 97; transform: translateX(-50%); animation: popIn .5s both, fcBob 1s ease-in-out infinite; pointer-events: none; }
@media (orientation: landscape) {
  .tw-map.tw12 { aspect-ratio: auto; width: 100%; height: 100%; max-width: none; }
  .tw12 .tw-b b { font-size: clamp(11px, 3.6cqh, 16px); padding: 1px 6px; }
  .tw12 .tw-b img { max-height: 28cqh; }
}
.fc3d { container-type: inline-size; }
.fc-back b { font-size: 24cqw; white-space: nowrap; }
.fc-back span { font-size: 9cqw; }
.ck-train { bottom: 11%; height: 19%; left: 1%; right: 1%; }
.ck-loco2 { flex: none; font-size: clamp(30px, 12cqw, 60px); line-height: 1; transform: scaleX(-1); margin-right: 1%; }
.ck-cars { gap: 4px; height: 100%; margin-left: 0; }
.ck-cars i { background-size: 86% auto; background-position: center 25%; }
.ckg-days .fc3d { top: 36%; width: min(56%, 50cqh); }
.fc-back b { font-size: 19cqw; }
@media (orientation: landscape) {
  .fc3d { top: 54%; width: min(56%, 58cqh); }
  .ckg-days .fc3d { top: 44%; width: min(50%, 42cqh); }
}
.fc-back { justify-content: center; align-items: center; } .fc-back b { font-size: 30cqw; } .ck-fc .fc-back b { font-size: 19cqw; } .mu-fc .fc-back b { font-size: 22cqw; }
.pet-tub2 { width: 86%; bottom: -16%; } .pet-tub2 .duck { width: 15%; left: 74%; top: 2%; }
/* 10/18: 끝 화면(우주·음악·시계탑·직업) 가로 — 한 화면에: 그림·메달 왼쪽, 글·버튼 오른쪽 */
@media (orientation: landscape) and (max-height: 600px) {
  .jv-win .jv-pass.win { width: min(92vw, 720px); max-height: 94dvh; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: 18px; align-items: center; padding: 14px 18px; }
  .jv-win .jv-pass.win > * { grid-column: 2; }
  .jv-win .jv-pass.win > .sx-winastro { grid-column: 1; grid-row: 1 / span 2; height: min(150px, 40dvh); margin: 0 auto -14px; }
  .jv-win .jv-pass.win > .sx-medal { grid-column: 1; grid-row: 3; width: min(90px, 22dvh); height: min(90px, 22dvh); font-size: min(52px, 13dvh); margin: 0 auto; }
  .jv-win .jv-pass.win > .jv-pt { grid-row: 1; align-self: end; font-size: clamp(22px, 8dvh, 32px); }
  .jv-win .jv-pass.win > .jv-msg { grid-row: 2; margin: 6px 0; }
  .jv-win .jv-pass.win > .lk-btns { grid-row: 3; margin-top: 0; }
}
/* 음악실: 계이름 순서판 — 세로는 실로폰 위, 가로는 실로폰 왼쪽 */
.mu-stripbox { width: min(100%, 640px); box-sizing: border-box; flex: none; background: #fff; border-radius: 22px; padding: 8px 10px; box-shadow: 0 4px 10px rgba(0,0,0,.08); text-align: center; }
.mu-stripbox > b { display: block; font-family: "Jua", var(--font-display); font-weight: 400; font-size: clamp(20px, 5.4vw, 28px); color: #C2185B; line-height: 1.1; }
.mu-stripbox .mu-strip i { font-size: clamp(28px, 8.6vw, 46px); min-width: 1.6em; padding: 4px 4px; }
.mu-stripbox .mu-strip { gap: 5px; margin: 4px 0 0; }
.mu-stripbox.xy .mu-strip i { font-size: clamp(22px, 7vw, 36px); min-width: 1.4em; }
@media (orientation: landscape) {
  .mu-play .jb-play { flex-direction: row !important; align-items: center; justify-content: center; gap: 12px; }
  .mu-play .jb-play > .mu-stripbox { order: -1; width: min(36vw, 380px); align-self: center; }
  .mu-play .jb-play > .mu-stripbox .mu-strip i { font-size: clamp(26px, 10dvh, 46px); }
  .mu-play.mug-song .jb-tray, .mu-play.mug-xylo .jb-tray { width: auto !important; min-width: 150px; }
}
/* 음표 카드 잘림 */
.mu-notebox { inset: 13% 4% 12%; gap: 3%; }
.mu-notebox .mu-bignote { width: min(56%, 46cqh); flex: none; }
.mu-syls { flex: none; }
.mu-syl b { font-size: clamp(22px, 7cqw, 38px); }
@media (orientation: portrait) {
  .mug-notes .jb-tray { max-height: 46dvh; overflow-y: auto; flex-direction: column; flex-wrap: nowrap; }
  .mug-notes .mu-rpick { padding: 4px 8px; gap: 2px; }
  .mug-notes .mu-rnotes { height: 32px; }
}
@media (orientation: landscape) {
  .mu-play .jb-play > .jb-scene { width: min(48vw, calc(100dvh - 30px)) !important; flex: none; }
  .mu-play .jb-play { padding-left: 100px; }
  .mu-play .jb-play > .mu-stripbox { width: min(30vw, 340px); }
}
@media (orientation: portrait) {
  .mug-notes .jb-play:has(.mu-rpick) > .jb-scene { width: min(60%, 26dvh) !important; }
  .mug-notes .jb-tray { max-height: none; overflow: visible; }
}

/* 10/18 가로 마을 지도 그림(map_wide): 화면 꽉, 건물은 잔디 자리 12칸에 딱(town.js가 자리 계산), 빔빔은 흙길 위 */
@media (orientation: landscape) {
  .tw-wrap:has(.tw12) { padding: 0 0 4px; }
  .tw-wrap:has(.tw12.wide) { display: grid; place-items: center; }
  .tw-map.tw12.wide { background-image: var(--wide) !important; background-size: cover !important; background-position: center !important; border-radius: 18px; width: 100%; height: 100%; aspect-ratio: auto; max-width: none; }
  .tw12.wide .tw-b { width: var(--bw) !important; height: auto; z-index: 2; }
  .tw12.wide .tw-b img { max-height: var(--bh); width: auto; max-width: 100%; }
  .tw12.wide .tw-b b { font-size: var(--fs) !important; padding: 1px 8px !important; margin-top: -10%; }
  .tw12.wide .tw-bb { display: block; width: var(--bbw); left: var(--bx) !important; top: var(--by) !important; transform: translate(-50%, -100%); transition: left .6s ease, top .6s ease !important; z-index: 3; }
  .tw12.wide .tw-bb.walk { left: var(--bx) !important; }
}
/* 10/18 음악 기호 카드 (theory.js) — 교과서식 검정 기호, 흰 카드 */
.th-pick { position: absolute; inset: 15% 4% 5%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3cqh 4%; align-content: center; z-index: 4; }
.th-set { position: relative; display: flex; align-items: center; gap: 4%; background: #fff; border: 3px solid #E7D5FF; border-radius: 20px; box-shadow: 0 5px 0 #D9C2FF; padding: 2cqh 4%; color: #4A2C7A; min-height: 0; animation: popIn .4s both; }
.th-set:nth-child(2) { animation-delay: .05s; } .th-set:nth-child(3) { animation-delay: .1s; } .th-set:nth-child(4) { animation-delay: .15s; } .th-set:nth-child(5) { animation-delay: .2s; } .th-set:nth-child(6) { animation-delay: .25s; }
.th-set:active { transform: translateY(3px); box-shadow: 0 2px 0 #D9C2FF; }
.th-ic { flex: none; width: min(15cqh, 30%); aspect-ratio: 1; background: #F6F0FF; border-radius: 14px; display: grid; place-items: center; }
.th-ic svg { width: 86%; height: 86%; }
.th-set b { font-family: "Jua", var(--font-display); font-weight: 400; font-size: clamp(15px, 6.2cqw, 30px); white-space: nowrap; }
.th-set i { display: none; position: absolute; right: 8px; bottom: 4px; font-style: normal; font-size: 13px; color: #9A88C0; font-weight: 800; }
.th-set em { position: absolute; right: 6px; top: 2px; font-style: normal; color: #F5B82E; font-size: 20px; }
.th-fc .fc-front { background: #fff; }
.th-front { width: 94%; height: 94%; display: grid; place-items: center; }
.th-front svg { width: 100%; height: auto; max-height: 100%; }
.th-fc .fc-back b { color: #2B2350; }
.th-fc .fc-back span { font-size: 7.6cqw; }
.th-box { position: absolute; inset: 14% 4% 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4cqh; }
.th-big { width: min(96%, 60cqh); aspect-ratio: 1.2; background: #fff; border-radius: 24px; box-shadow: 0 6px 0 #E8D6C4; display: grid; place-items: center; flex: none; animation: popIn .35s both; }
.th-big { position: relative; min-height: 0; overflow: hidden; }
.th-big svg { position: absolute; left: 4%; top: 4%; width: 92%; height: 92%; }
.th-big line.sl { transition: stroke .2s, stroke-width .2s; }
.th-big line.sl.glow { stroke: #FF5C8A; stroke-width: 3; }
.th-big line.sl.next { animation: thBlink .7s ease-in-out infinite; }
.th-big line.hit, .th-big .th-bl, .th-big .th-ms { cursor: pointer; }
.th-big .th-ms { transition: opacity .2s; }
.th-big .blink { animation: thBlinkF .7s ease-in-out infinite; }
@keyframes thBlink { 50% { stroke: #FFB020; stroke-width: 3.2; } }
@keyframes thBlinkF { 50% { fill: #FFD23F; opacity: .45; } }
.th-beats { position: relative; width: min(96%, 78cqh * 1.2); display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; padding-top: 4px; flex: none; }
.th-beats > span { background: #fff; border-radius: 12px; text-align: center; font-family: "Jua", var(--font-display); font-size: clamp(14px, 4.6cqh, 24px); color: #7A6A9E; padding: 2px 0 26px; transition: background .15s, transform .15s; }
.th-beats > span.now { background: #FFE27A; color: #4A2C7A; transform: scale(1.06); }
.th-segs { position: absolute; left: 0; right: 0; bottom: 6px; height: 16px; pointer-events: none; }
.th-seg { position: absolute; top: 0; height: 100%; font-style: normal; box-sizing: border-box; padding: 0 3px; }
.th-seg::before { content: ""; position: absolute; inset: 0 3px; border-radius: 99px; background: #E9E1F7; }
.th-seg.on::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 0; border-radius: 99px; background: #9B5DE5; }
.th-seg.on.play::after { width: calc(100% - 6px); transition: width var(--d, .6s) linear; }
.th-seg.on.done::after { width: calc(100% - 6px); }
.th-seg.rest { color: #9A88C0; font-size: 12px; font-weight: 900; text-align: center; line-height: 16px; z-index: 1; }
.th-seg.rest::before { background: repeating-linear-gradient(90deg, #E9E1F7 0 6px, transparent 6px 10px); }
.th-seg.rest.play { color: #FF5C8A; }
.th-cond svg { left: 10%; top: 10%; width: 80%; height: 80%; }
.th-ball { transition: cx .45s cubic-bezier(.4,0,.3,1), cy .45s cubic-bezier(.4,0,.3,1); }
.th-pt circle { transition: r .15s; } .th-pt.now circle { r: 10; fill: #FF5C8A; }
.th-acc { display: flex; gap: 8px; flex: none; }
.th-acc span { font-family: "Jua", var(--font-display); font-size: clamp(16px, 5cqh, 26px); background: #fff; color: #7A6A9E; border-radius: 99px; padding: 2px 14px; transition: transform .15s, background .15s; }
.th-acc span.s { color: #E03A6A; } .th-acc span.m { color: #9B5DE5; }
.th-acc span.now { background: #FFE27A; transform: scale(1.15); }
.th-wave { position: relative; width: 22cqh; height: 10cqh; flex: none; }
.th-wave i { position: absolute; left: 50%; top: 50%; width: 10cqh; aspect-ratio: 1; border-radius: 50%; border: 5px solid #9B5DE5; transform: translate(-50%, -50%) scale(.2); opacity: 0; }
.th-wave i.go { animation: thWave .6s ease-out; }
@keyframes thWave { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--s, 1) * 2.4)); } }
.th-pad { position: absolute; right: 4%; bottom: 4%; width: 20cqh; aspect-ratio: 1; border-radius: 50%; border: 0; background: radial-gradient(circle at 40% 35%, #C9A8FF, #7A3FD1); color: #fff; font-family: "Jua", var(--font-display); font-size: clamp(20px, 7cqh, 34px); box-shadow: 0 6px 0 #5A2BA6; transform: scale(var(--s, 1)); transition: transform .12s; animation: popIn .4s both; z-index: 6; }
.th-pad:active { box-shadow: 0 2px 0 #5A2BA6; }
.th-note-say { font-family: "Jua", var(--font-display); font-size: clamp(18px, 5.6cqh, 28px); color: #4A2C7A; background: #fff; border-radius: 99px; padding: 4px 18px; min-height: 1.4em; flex: none; }
.th-note-say:empty { visibility: hidden; }
.th-cmp { display: flex; flex-direction: column; gap: 6px; width: min(96%, 78cqh * 1.2); flex: none; }
.th-cmp b { font-family: "Jua", var(--font-display); font-weight: 400; color: #4A2C7A; font-size: clamp(14px, 4cqh, 20px); }
.th-cmp .th-beats { width: 100%; } .th-cmp .th-beats > span { padding-bottom: 22px; font-size: clamp(12px, 3.4cqh, 18px); }
.th-box:has(.th-cmp) .th-big { width: min(80%, 34cqh); }
.th-box:has(.th-pad) .th-big, .th-box:has(.th-wave) .th-big { width: min(80%, 50cqh); }
.th-q { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; width: 100%; align-items: center; }
.th-opt { background: #fff; border: 4px solid #E7D5FF; border-radius: 20px; aspect-ratio: 1; display: grid; place-items: center; padding: 6%; box-shadow: 0 5px 0 #D9C2FF; animation: popIn .35s both; }
.th-opt svg { width: 100%; height: 100%; }
.th-opt.nope { animation: thNope .45s; border-color: #FFB3B3; }
.th-opt.right { border-color: #5CC36B; background: #EFFFF0; transform: scale(1.06); }
@media (orientation: landscape) {
  .th-pick { inset: 14% 3% 10%; }
  .th-box { inset: 13% 3% 11%; }
  .th-big { width: min(92%, 56cqh); }
  .th-beats, .th-cmp { width: min(96%, 64cqh * 1.3); }
}
@keyframes thNope { 25% { transform: translateX(-6%); } 75% { transform: translateX(6%); } }
/* 10/18 사용자 폰 확인 후 */
/* 따라 치기: 계이름 순서표 한 줄 고정(7칸), 줄이 바뀌어도 아래 실로폰 자리가 그대로 */
.mu-stripbox .mu-strip.fixed { flex-wrap: nowrap; gap: 4px; }
.mu-stripbox .mu-strip.fixed i { flex: 1 1 0; min-width: 0; padding: 4px 0; font-size: clamp(22px, 7.4vw, 44px); }
.mu-stripbox .mu-strip.fixed i.ghost { visibility: hidden; }
.mu-stripbox .mu-line { display: block; font-style: normal; font-size: 14px; color: #8A7FA6; line-height: 1.2; }
@media (orientation: landscape) { .mu-play .jb-play > .mu-stripbox .mu-strip.fixed i { font-size: clamp(16px, 3.6vw, 34px); } }
/* 반짝 음표 비는 카드 뒤로 (글자를 가리지 않게) */
.mu-scene .fc-rain { z-index: 3; }
/* 도레미 카드 뒷면: 계이름 크게 + 오선 위 음표 */
.dr-fc .fc-back { gap: 2%; }
.dr-fc .fc-back b.drn { font-size: 30cqw !important; line-height: .95; }
.dr-fc .fc-back .drs { width: 80%; display: block; }
.dr-fc .fc-back .drs svg, .dr-fc .fc-back img.drs { width: 100%; height: auto; display: block; }
.dr-fc .fc-back span:not(.drs) { font-size: 7cqw; }
/* 플래시카드: 착착 */
.fl-fc { animation: fcIn .28s cubic-bezier(.2,1.4,.4,1) both; }
.fl-fc .fc-in { transition-duration: .3s; }
.fl-fc.away { transition-duration: .18s; }
.fl-fc .fc-back b { color: #2B2350; }
.fc-front > img { width: 84%; height: 84%; object-fit: contain; }
.th-fc .fc-front > img { width: 92%; height: 92%; animation: none; }
.fl-row { display: flex; gap: 10px; justify-content: center; width: 100%; }
.fl-row .mu-pick.big { flex: 1; max-width: 220px; }
.th-basis { font-family: "Jua", var(--font-display); font-size: clamp(14px, 4.2cqh, 22px); color: #4A2C7A; flex: none; }
.th-basis b { color: #E03A6A; font-weight: 400; }
/* 가로 화면 오른쪽 카드가 잘리지 않게(위 '정답' 꼬리표·오른쪽 끝) */
@media (orientation: landscape) {
  .mu-play .jb-tray { padding: 16px 10px 10px !important; box-sizing: border-box; overflow-x: hidden; scrollbar-width: none; }
  .mu-play .jb-tray::-webkit-scrollbar { display: none; }
}
@media (orientation: landscape) {
  .mu-play .jb-play > .mu-stripbox { margin-left: 64px; width: min(34vw, 420px) !important; align-self: flex-end !important; margin-bottom: 18px; }
  .mu-play .jb-play > .mu-stripbox .mu-strip.fixed i { font-size: clamp(18px, 4vw, 40px); }
}
/* 10/18 실사 플래시카드 (photocards.js) — 식물원·행성 */
.pc-garden { background: linear-gradient(#E6F8E2, #FFF3D6); }
.pc-garden .mu-scene, .pc-garden .pc-scene { background: radial-gradient(circle at 50% 20%, #F7FFF2, #D9F2CF 70%) !important; }
.pc-space { background: linear-gradient(#0B1640, #23185A); }
.pc-space .pc-scene { background: radial-gradient(circle at 50% 30%, #2A3A7A, #0B1235 75%) !important; }
.pc-space .game-title { color: #fff; }
.pc-fc .fc-front > img { width: 92%; height: 92%; object-fit: contain; animation: none; }
.pc-space .pc-fc .fc-front { background: #000; border-color: #3D4F9A; }
.pc-fc .fc-back span { font-size: 7.4cqw; }
.pc-home .pc-grid { position: relative; z-index: 2; }
.pc-ic { background: #fff !important; padding: 4px !important; }
.pc-ic img { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }
.pc-home .pc-b { background: #fff; color: #1F5E2E; border: 3px solid #CFEFC4; box-shadow: 0 6px 0 #B5E0A6; }
.pc-deco { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.pc-deco img { position: absolute; width: clamp(54px, 13vw, 96px); animation: pcFly 9s ease-in-out infinite; animation-delay: calc(var(--i) * -2.2s); }
.pc-deco img:nth-child(1) { left: 4%; top: 70%; } .pc-deco img:nth-child(2) { right: 6%; top: 18%; } .pc-deco img:nth-child(3) { left: 8%; top: 16%; } .pc-deco img:nth-child(4) { right: 10%; top: 72%; }
@keyframes pcFly { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 25% { transform: translate(18px, -14px) rotate(6deg); } 50% { transform: translate(-10px, -24px) rotate(-3deg); } 75% { transform: translate(-16px, 6px) rotate(5deg); } }
.pc-q { position: absolute; inset: 16% 4% 12%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; align-items: center; z-index: 4; }
.pc-opt { background: #fff; border: 4px solid #DDEBD7; border-radius: 20px; aspect-ratio: 1; padding: 5%; box-shadow: 0 5px 0 #C3DDB8; animation: popIn .35s both; }
.pc-space .pc-opt { background: #000; border-color: #3D4F9A; box-shadow: 0 5px 0 #26336B; }
.pc-opt img { width: 100%; height: 100%; object-fit: contain; }
.pc-opt.nope { animation: thNope .45s; border-color: #FFB3B3; }
.pc-opt.right { border-color: #5CC36B; transform: scale(1.06); }
@media (orientation: portrait) { .pc-q { grid-template-columns: repeat(2, 1fr); inset: 13% 4% 13%; gap: 3%; } .pc-q .pc-opt:nth-child(3) { grid-column: 1 / -1; width: 50%; justify-self: center; } }
/* 음악 기호: 교과서 그림 */
.th-big.img img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; }
.th-opt img { width: 100%; height: 100%; object-fit: contain; }
/* 10/18 사용자: 카드가 너무 작음 → 플래시카드·뒤집는 카드 크게 */
.mu-play .fc3d { width: min(84%, 82cqh); top: 50%; }
.mu-play .fl-fc { width: min(88%, 86cqh); }
.ckg-days .fc3d { width: min(70%, 60cqh); top: 40%; }
.ckg-days .fl-fc { width: min(70%, 60cqh); top: 39%; }
@media (orientation: landscape) {
  .mu-play .fc3d { width: min(80%, 80cqh); top: 52%; }
  .ckg-days .fc3d, .ckg-days .fl-fc { width: min(60%, 58cqh); top: 42%; }
}
/* 시계탑 카드 뒷면: 한자 · 한국어 · 영어 */
.ck-fc .fc-back { gap: 1%; }
.ck-fc .fc-back em.ck-hj { font-style: normal; font-family: "Noto Sans KR", sans-serif; font-weight: 900; font-size: 34cqw; line-height: 1; }
.ck-fc .fc-back b { font-size: 17cqw !important; line-height: 1.05; }
.ck-fc .fc-back .ck-en { font-family: "Jua", var(--font-display); font-size: 10cqw; color: #4A5878; letter-spacing: .02em; }
/* 일주일 한 줄 */
.ck-week { display: inline-flex; gap: .3em; white-space: nowrap; font-family: "Jua", var(--font-display); font-size: 1.25em; }
.ck-week i { font-style: normal; }
.ck-train.back { transition: none; animation: ckBack 1.2s ease-out; }
@keyframes ckBack { from { transform: translateX(120%); } to { transform: none; } }
.ck-fc .fc-back em.ck-hj small { font-size: .32em; font-weight: 800; margin-left: .1em; color: #4A5878; }
/* 세로: 고르기 버튼은 가로로 납작하게(한 화면에 쏙) */
@media (orientation: portrait) {
  .mu-play .mu-pick.big { flex-direction: row; gap: 8px; font-size: 30px; padding: 6px 16px; min-width: 0; flex: 1; max-width: 200px; justify-content: center; }
  .mu-play .mu-pickrow { gap: 10px; }
  .mu-play .jb-tray { gap: 8px; }
}
/* 10/18 열두 달 카드 (시계탑 색) */
.pc-clock { background: linear-gradient(#E6F3FF, #FFF4E0); }
.pc-clock .pc-scene { background: radial-gradient(circle at 50% 20%, #FFFBEF, #E6F4FF 70%) !important; }
.pc-fc .fc-back .pc-en { font-family: "Jua", var(--font-display); font-size: 9cqw; color: #4A5878; }
@media (orientation: landscape) { .ck-grid.n3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; } }
/* 10/18 사용자: 가로 화면에 공간이 많은데 그림·글자가 작음 → 사진 카드는 장면을 넓게, 카드 크게 */
@media (orientation: landscape) {
  .pc-play .jb-play > .jb-scene { width: min(62vw, calc(100vw - 340px)) !important; height: calc(100dvh - 20px) !important; max-height: none !important; aspect-ratio: auto !important; flex: none; }
  .pc-play .jb-play { padding-left: 84px; }
  .pc-play .jb-tray { width: min(30vw, 360px) !important; }
  .pc-play .fc3d { width: min(70%, 78cqh); top: 55%; }
  .pc-play .pc-q { inset: 17% 3% 11%; gap: 2.5%; }
  .mu-play .fc3d { width: min(84%, 78cqh); top: 55%; }
}
/* 10/18 사계절 장면 그림(사각 전체 컷) — 카드 앞면을 꽉 채움 */
.ckg-seasons .ck-fc .fc-front { overflow: hidden; }
.ckg-seasons .ck-fc .fc-front > img { width: 100%; height: 100%; object-fit: cover; animation: none; border-radius: 20px; }
.ckg-seasons .ck-q img { border-radius: 20px; }

/* 10/18 퍼즐 세로: 짧은 폰(360×728)에서 아래 조각 줄이 잘리던 것 — 판과 조각을 화면 높이에 맞춰 함께 줄임 */
@media (orientation: portrait) {
  .puzzlegame .puzzle-board { --w: min(92vw, calc(46vh * var(--ratio)), calc((100dvh - 210px) / 1.9 * var(--ratio)), 620px); }
  .puzzlegame .piece { --pw: calc(min(92vw, calc(46vh * var(--ratio)), calc((100dvh - 210px) / 1.9 * var(--ratio)), 620px) / var(--n) * .8); }
  .puzzlegame .piece[style*="--n:5"], .puzzlegame .piece[style*="--n:6"] { --pw: calc(min(92vw, calc(46vh * var(--ratio)), calc((100dvh - 210px) / 1.9 * var(--ratio)), 620px) / var(--n) * .72); }
  .puzzlegame .puzzle-tray { overflow-y: auto; }
}

/* 10/18 오후 사용자: 플래시카드 중엔 위 글줄(카드와 같은 글) 없이 카드만 크게 */
.fl-run > .jb-say { display: none !important; }
.fl-run .fl-fc { width: min(94%, 92cqh) !important; top: 50% !important; }
.ckg-days .fl-run .fl-fc { width: min(80%, 70cqh) !important; top: 42% !important; }
/* 사진 카드(식물원·행성·열두 달): 위 말풍선은 아래 카드와 같은 말이라 숨김 → 장면을 다 씀 */
.pc-play .pc-scene > .jb-say { display: none !important; }
.pc-play .pc-scene .fc3d { width: min(90%, 88cqh); top: 50%; }
.pc-play .pc-q { inset: 4% 4% 10%; gap: 4%; align-content: center; justify-items: center; }
.pc-play .pc-opt { width: min(100%, 80cqh); }
@media (orientation: portrait) {
  .pc-play .pc-q { grid-template-columns: repeat(2, 1fr); inset: 3% 4% 10%; row-gap: 3%; }
  .pc-play .pc-opt { width: min(100%, 43cqh); }
  .pc-play .pc-q .pc-opt:nth-child(3) { width: min(50%, 43cqh); }
}
/* 영어 글자 크게 */
.ck-fc .fc-back .ck-en { font-size: 13cqw !important; }
.pc-fc .fc-back .pc-en { font-size: 12cqw !important; }
/* 가로: 장면+오른쪽 칸이 화면 안에 다 들어오게(오른쪽 잘림 고침), 끝 단추는 위아래로 */
@media (orientation: landscape) {
  .pc-play .jb-play, .ck-play .jb-play, .mu-play .jb-play:has(.fl-run, .fl-row) { padding-left: 84px; padding-right: 8px; box-sizing: border-box; width: 100%; max-width: none; gap: 14px; display: flex; align-items: center; }
  .pc-play .jb-tray, .ck-play .jb-tray, .mu-play .jb-play:has(.fl-run, .fl-row) > .jb-tray { width: clamp(190px, 26vw, 320px) !important; flex: none; }
  .pc-play .jb-play > .jb-scene, .ck-play .jb-play > .jb-scene, .mu-play .jb-play:has(.fl-run, .fl-row) > .jb-scene { flex: 1 1 0 !important; width: auto !important; min-width: 0; height: calc(100dvh - 20px) !important; max-height: none !important; aspect-ratio: auto !important; }
  .mu-play .fl-row { flex-direction: column; align-items: stretch; }
  .mu-play .fl-row .mu-pick.big { max-width: none; flex-direction: row; justify-content: center; gap: 8px; padding: 10px; }
}
/* 식물원 꾸밈 친구들: 크게, 살아 움직이게 */
.pc-deco img { width: clamp(70px, min(26vw, 30vh), 190px) !important; filter: drop-shadow(0 6px 6px rgba(40,80,30,.18)); }
.pc-deco img:nth-child(1) { left: -2% !important; top: auto !important; bottom: 6%; animation: pcButterfly 11s ease-in-out infinite !important; }
.pc-deco img:nth-child(2) { right: 4% !important; top: 12% !important; animation: pcBee 7s ease-in-out infinite !important; }
.pc-deco img:nth-child(3) { left: 6% !important; top: 13% !important; animation: pcCrawl 6s ease-in-out infinite !important; }
.pc-deco img:nth-child(4) { right: 6% !important; top: auto !important; bottom: 8%; animation: pcBee 9s ease-in-out infinite reverse !important; }
@keyframes pcButterfly { 0% { transform: translate(0, 0) rotate(-8deg) scaleX(1); } 20% { transform: translate(18vw, -10vh) rotate(8deg) scaleX(.82); } 40% { transform: translate(40vw, -4vh) rotate(-6deg) scaleX(1); } 50% { transform: translate(46vw, -12vh) rotate(4deg) scaleX(-.85); } 70% { transform: translate(24vw, -2vh) rotate(-8deg) scaleX(-1); } 90% { transform: translate(6vw, -8vh) rotate(6deg) scaleX(-.85); } 100% { transform: translate(0, 0) rotate(-8deg) scaleX(1); } }
@keyframes pcBee { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 15% { transform: translate(-6vw, 3vh) rotate(6deg); } 30% { transform: translate(-14vw, -2vh) rotate(-6deg); } 45% { transform: translate(-22vw, 4vh) rotate(4deg) scaleX(-1); } 60% { transform: translate(-12vw, 6vh) rotate(-4deg) scaleX(-1); } 80% { transform: translate(-4vw, -3vh) rotate(5deg); } }
@keyframes pcCrawl { 0%, 100% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(5vw, 0) rotate(8deg); } 40% { transform: translate(10vw, 1vh) rotate(-6deg); } 50% { transform: translate(10vw, 1vh) rotate(180deg); } 70% { transform: translate(4vw, 0) rotate(172deg); } 90% { transform: translate(0, 0) rotate(190deg); } }
.pc-deco img { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .pc-deco img { animation: none !important; } }
/* 도레미 카드 뒷면이 카드 밖으로 넘치던 것(이름 위 잘림·오선 아래 넘침) → 이름 + 오선이 카드 안에 */
.dr-fc .fc-back { justify-content: center; overflow: hidden; padding: 4% 6%; box-sizing: border-box; }
.dr-fc .fc-back b.drn { font-size: 26cqw !important; flex: none; }
.dr-fc .fc-back .drs, .dr-fc .fc-back img.drs { width: auto !important; max-width: 92%; height: 58% !important; max-height: 58%; object-fit: contain; flex: none; }
.dr-fc .fc-back .drs svg { width: auto !important; height: 100% !important; max-width: 100%; }
.dr-fc .fc-back:has(> span:not(.drs)) .drs, .dr-fc .fc-back:has(> span:not(.drs)) img.drs { height: 46% !important; max-height: 46%; }
.dr-fc .fc-back:has(> span:not(.drs)) b.drn { font-size: 22cqw !important; }
/* 말풍선이 장면 밖(.jb-play 바로 아래)으로 옮겨지는 화면이 있어 그쪽도 숨김 */
.jb-play:has(.fl-run) > .jb-say, .pc-play .jb-play > .jb-say { display: none !important; }

/* 10/18 저녁: 플래시카드 아래 점(진행 표시)이 카드 테두리와 겹치지 않게 카드를 조금 위로·작게 */
.fl-run .fl-fc { width: min(94%, 84cqh) !important; top: 45% !important; }
.pc-play .pc-scene .fc3d { width: min(90%, 84cqh); top: 45%; }
.ckg-days .fl-run .fl-fc { width: min(80%, 70cqh) !important; top: 42% !important; }
/* 10/18 저녁: 음악실 세로 — 말풍선+정답 카드+'다 했어요' 단추까지 한 화면에(단추 아래 잘림 고침) */
@media (orientation: portrait) {
  .mu-play .jb-play > .jb-scene { width: min(100%, max(250px, calc(100dvh - 485px))) !important; }
}
/* 10/18 저녁: 세로 화면 플래시카드 — 아래 빈자리 쓰기. 장면을 가로 꽉·세로 길게, 카드 크게 */
.ck-scene { container-type: size; }
@media (orientation: portrait) {
  .pc-play .jb-play > .jb-scene, .ck-play .jb-play:has(.fl-run, .fl-row) > .jb-scene { width: 100% !important; max-width: 600px; height: min(calc(100dvh - 340px), 135vw) !important; max-height: none !important; aspect-ratio: auto !important; }
  .fl-run .fl-fc { width: min(94%, 84cqh) !important; top: 46% !important; }
  .ckg-days .fl-run .fl-fc { width: min(90%, 64cqh) !important; top: 37% !important; }
}
.ck-fc .fc-back .ck-en { font-size: 16cqw !important; white-space: nowrap; }
.pc-fc .fc-back .pc-en { font-size: 14cqw !important; }
/* 10/18 저녁: 시계탑 카드 전부(요일·사계절·열두 달) 세로에서 크게 — 플래시 끝난 뒤 배우기 단계 카드도 */
@media (orientation: portrait) {
  .ck-play .jb-play:has(.ck-fc) > .jb-scene { width: 100% !important; max-width: 600px; height: min(calc(100dvh - 340px), 135vw) !important; max-height: none !important; aspect-ratio: auto !important; }
  .ck-play .ck-fc { width: min(94%, 84cqh) !important; top: 46% !important; }
  .ck-play.ckg-days .ck-fc, .ckg-days .ck-play .ck-fc, .ckg-days .ck-fc { width: min(90%, 64cqh) !important; top: 37% !important; }
}