/* 동글곰 놀이 스타일 (2차 디자인 개편)
   - 배경: 하늘·언덕·구름 장면. 시간대별 하늘색(body.sky-*)
   - 카드: 모서리 --radius, 그림자 --shadow 로 통일
   - 글꼴: 글자 카드·학부모 화면만 Noto Sans KR Round(번들 woff2). 메뉴에는 글자가 없다 */
@font-face {
  font-family: "Noto Sans KR Round";
  src: url(../assets/fonts/NotoSansKR-Round.woff2) format("woff2");
  font-weight: 600 900;
  font-display: swap;
  unicode-range: U+0020-007E, U+1100-1112, U+3131-3163, U+AC00-D7A3;
}
@font-face {
  font-family: "Noto Sans KR Round";
  src: url(../assets/fonts/NotoSansKR-Round-400.woff2) format("woff2");
  font-weight: 100 500;
  font-display: swap;
  unicode-range: U+0020-007E, U+1100-1112, U+3131-3163, U+AC00-D7A3;
}

:root {
  --bg: #FBF1E3;
  --bg-2: #F6E4CC;
  --card: #FFFFFF;
  --ink: #5A3A2A;
  --ink-soft: #8C6B57;
  --accent: #F6C453;
  --blue: #4FA3E0;
  --green: #6CC070;
  --pink: #F08CA0;
  --sky: #BFE3F5;
  --shadow: 0 8px 0 rgba(90, 58, 42, .12), 0 14px 30px rgba(90, 58, 42, .10);
  --shadow-sm: 0 4px 0 rgba(90, 58, 42, .12), 0 8px 18px rgba(90, 58, 42, .08);
  --radius: 28px;
  --tap: 96px;
  --font-round: "Noto Sans KR Round", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --pad-top: max(14px, env(safe-area-inset-top));
  --pad-right: max(28px, env(safe-area-inset-right));
  --pad-bottom: max(14px, env(safe-area-inset-bottom));
  --pad-left: max(28px, env(safe-area-inset-left));
  /* 하늘(낮) */
  --sky-top: #9ED8F7; --sky-bottom: #E9F7FF; --hill-back: #A9DCA0; --hill-front: #7FCB7A; --sun: #FFE27A; --cloud-op: .95;
}
body.sky-morning { --sky-top: #BFE3F5; --sky-bottom: #FFE9D6; --hill-back: #B8E0A8; --hill-front: #8FD38A; --sun: #FFD1A1; }
body.sky-evening { --sky-top: #F8B88B; --sky-bottom: #FFE3C9; --hill-back: #9FCB8E; --hill-front: #74B86F; --sun: #FF9F5A; }
body.sky-night   { --sky-top: #3B4F7E; --sky-bottom: #7A8FC0; --hill-back: #4F8A63; --hill-front: #3F7351; --sun: #FFF4C2; --cloud-op: .55; --ink-on-sky: #FFF; }

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: linear-gradient(var(--sky-top), var(--sky-bottom)); color: var(--ink);
  font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
img { -webkit-user-drag: none; user-select: none; pointer-events: none; }

/* ---------- 배경 장면 ---------- */
#scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; transition: opacity .5s; }
body.in-activity #scene { opacity: .35; }
#scene .sun { position: absolute; right: 8%; top: 7%; width: min(16vh, 120px); height: min(16vh, 120px); border-radius: 50%; background: var(--sun); box-shadow: 0 0 60px 20px rgba(255, 226, 122, .35); animation: breathe 6s ease-in-out infinite; }
#scene .stars { display: none; position: absolute; inset: 0; }
body.sky-night #scene .stars { display: block; }
#scene .stars i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #FFF; opacity: .8; animation: blink 2.6s ease-in-out infinite; }
#scene .cloud { position: absolute; width: min(26vh, 220px); opacity: var(--cloud-op); animation: drift linear infinite; }
#scene .cloud svg { width: 100%; height: auto; filter: drop-shadow(0 6px 0 rgba(90, 58, 42, .06)); }
#scene .cloud.c1 { top: 8%; left: -24%; animation-duration: 95s; }
#scene .cloud.c2 { top: 22%; left: -24%; width: min(18vh, 160px); animation-duration: 130s; animation-delay: -60s; }
#scene .cloud.c3 { top: 4%; left: -24%; width: min(14vh, 120px); animation-duration: 160s; animation-delay: -110s; }
#scene .hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26vh; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(130vw); } }

#app { position: fixed; inset: 0; z-index: 1; }
.screen {
  position: absolute; inset: 0; display: none;
  padding: var(--pad-top) var(--pad-right) var(--pad-bottom) var(--pad-left);
}
.screen.active { display: flex; }
.screen.enter { animation: screen-in .45s ease-out both; }
@keyframes screen-in { 0% { opacity: 0; transform: translateY(14px) scale(.985); } 100% { opacity: 1; transform: none; } }

/* 세로로 들면 돌려 달라는 그림만 보여준다 */
#rotate-overlay { display: none; position: fixed; inset: 0; background: var(--bg); z-index: 60; align-items: center; justify-content: center; }
#rotate-overlay svg { animation: wiggle 1.6s ease-in-out infinite; }
@media (orientation: portrait) { #rotate-overlay { display: flex; } }

/* ---------- 효과 층(파티클) ---------- */
#fx-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.confetti { position: absolute; width: var(--size, 10px); height: var(--size, 10px); border-radius: 3px; transform: translate(-50%, -50%); animation: confetti 1s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes confetti { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 90px)) rotate(var(--rot)); } }
.spark { position: absolute; width: 22px; height: 22px; background: var(--accent); transform: translate(-50%, -50%) scale(0); clip-path: polygon(50% 0, 61% 38%, 100% 38%, 69% 59%, 80% 100%, 50% 75%, 20% 100%, 31% 59%, 0 38%, 39% 38%); animation: spark 1.1s ease-out forwards; }
@keyframes spark { 0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.2) rotate(60deg); } 100% { transform: translate(-50%, -80%) scale(.4) rotate(140deg); opacity: 0; } }

/* ---------- 공통 부품 ---------- */
.round-btn {
  width: var(--tap); height: var(--tap); border-radius: 50%; border: 0;
  background: var(--card); box-shadow: var(--shadow-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  touch-action: manipulation; transition: transform .12s ease;
}
.round-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(90, 58, 42, .14); }
.round-btn svg { width: 58%; height: 58%; }
.round-btn.accent { background: var(--accent); }
.round-btn.big { width: calc(var(--tap) * 1.35); height: calc(var(--tap) * 1.35); }
.screen-home-wrap { position: absolute; right: var(--pad-right); bottom: calc(var(--pad-bottom) + 2px); z-index: 20; }
/* 아이콘 아래 짧은 한글 라벨 */
.labeled { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.btn-label, .door-label, .tile-label { font-family: var(--font-round); font-weight: 700; color: var(--ink); line-height: 1.1; white-space: nowrap; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.btn-label { font-size: clamp(14px, 2.3vh, 20px); background: rgba(255, 255, 255, .75); border-radius: 12px; padding: 2px 10px; }
.door-label { font-size: clamp(20px, 3.6vh, 30px); }
.tile-label { position: absolute; left: 6px; right: 6px; bottom: 8px; text-align: center; font-size: clamp(13px, 2.2vh, 19px); overflow: hidden; text-overflow: ellipsis; }

.pulse-ring { position: relative; }
.pulse-ring::after {
  content: ""; position: absolute; inset: -10px; border-radius: inherit;
  border: 5px solid var(--accent); animation: ring 1.4s ease-out infinite; pointer-events: none;
}
@keyframes ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14%); } 70% { transform: translateY(-4%); } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes spin-in { 0% { transform: scale(.2) rotate(-40deg); opacity: 0; } 70% { transform: scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -16px); } }
@keyframes dash { to { stroke-dashoffset: -60; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(246, 196, 83, 0)); } 50% { filter: drop-shadow(0 0 18px rgba(246, 196, 83, 1)); } }
@keyframes jump { 0%, 100% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(4%) scale(1.06, .92); } 50% { transform: translateY(-22%) scale(.96, 1.06); } 80% { transform: translateY(0) scale(1.04, .96); } }
@keyframes clap-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(26px); } }
@keyframes clap-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-26px); } }
@keyframes chew { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.6); } }
@keyframes dance { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-5deg) translateY(-12px); } 75% { transform: rotate(5deg) translateY(-12px); } }
@keyframes rise { 0% { transform: translate(-50%, -50%) scale(.4); opacity: .9; } 100% { transform: translate(-50%, -260%) scale(1.2); opacity: 0; } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes steam { 0% { transform: translateY(0) scale(1); opacity: .8; } 100% { transform: translateY(-40px) scale(1.4); opacity: 0; } }
@keyframes pop-out { 0% { transform: translateY(40%) scale(.3); opacity: 0; } 60% { transform: translateY(-20%) scale(1.1); opacity: 1; } 100% { transform: translateY(0) scale(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 동글곰 ---------- */
.guide { display: inline-block; line-height: 0; position: relative; }
.guide .bear { overflow: visible; transform-origin: 50% 70%; }
.guide .eyes, .guide .mouth, .guide .zzz, .guide .sparks, .guide .paw, .guide .paws-clap, .guide .cheeks-full,
.guide .hat, .guide .badge, .guide .scarf, .guide .crown { display: none; }
.guide[data-mood="idle"] .eyes-open, .guide[data-mood="idle"] .mouth-smile { display: block; }
.guide[data-mood="hi"] .eyes-open, .guide[data-mood="hi"] .mouth-big, .guide[data-mood="hi"] .paw { display: block; }
.guide[data-mood="happy"] .eyes-happy, .guide[data-mood="happy"] .mouth-open, .guide[data-mood="happy"] .sparks { display: block; }
.guide[data-mood="think"] .eyes-think, .guide[data-mood="think"] .mouth-o { display: block; }
.guide[data-mood="sleep"] .eyes-sleep, .guide[data-mood="sleep"] .mouth-flat, .guide[data-mood="sleep"] .zzz { display: block; }
.guide[data-mood="eat"] .eyes-happy, .guide[data-mood="eat"] .mouth-o, .guide[data-mood="eat"] .cheeks-full { display: block; }
.guide[data-mood="jump"] .eyes-open, .guide[data-mood="jump"] .mouth-big, .guide[data-mood="jump"] .sparks { display: block; }
.guide[data-mood="clap"] .eyes-happy, .guide[data-mood="clap"] .mouth-big, .guide[data-mood="clap"] .paws-clap { display: block; }
.guide[data-mood="eat"] .cheeks { display: none; }
.guide[data-mood="idle"] .bear { animation: breathe 3s ease-in-out infinite; }
.guide[data-mood="sleep"] .bear { animation: breathe 4s ease-in-out infinite; }
.guide[data-mood="sleep"] .zzz text { animation: zz 2.4s ease-in-out infinite; }
.guide[data-mood="sleep"] .zzz text:last-child { animation-delay: .8s; }
.guide[data-mood="happy"] .bear { animation: bounce .55s ease-in-out 3; }
.guide[data-mood="think"] .bear { animation: tilt 1.2s ease-in-out infinite; }
.guide[data-mood="hi"] .bear { animation: wiggle 1s ease-in-out infinite; }
.guide[data-mood="hi"] .paw { transform-origin: 86px 52px; animation: wiggle .5s ease-in-out infinite; }
.guide[data-mood="eat"] .mouth-o { transform-origin: 0 44px; animation: chew .35s ease-in-out infinite; }
.guide[data-mood="eat"] .bear { animation: breathe .7s ease-in-out infinite; }
.guide[data-mood="jump"] .bear { animation: jump .8s ease-in-out 2; }
.guide[data-mood="clap"] .bear { animation: bounce .5s ease-in-out infinite; }
.guide[data-mood="clap"] .paw-l { animation: clap-l .4s ease-in-out infinite; }
.guide[data-mood="clap"] .paw-r { animation: clap-r .4s ease-in-out infinite; }
.guide.talking .bear { animation: bounce .4s ease-in-out infinite; }
.guide.pulse .bear { animation: pop .5s ease-out 1; }
/* 성장 장식: 2 모자, 3 +배지, 4 +목도리, 5 왕관(모자 대신) */
.guide[data-stage="2"] .hat, .guide[data-stage="3"] .hat, .guide[data-stage="4"] .hat { display: block; }
.guide[data-stage="3"] .badge, .guide[data-stage="4"] .badge, .guide[data-stage="5"] .badge { display: block; }
.guide[data-stage="4"] .scarf, .guide[data-stage="5"] .scarf { display: block; }
.guide[data-stage="5"] .crown { display: block; }

/* ---------- 깨우기 ---------- */
#screen-wake { align-items: center; justify-content: center; flex-direction: column; gap: 4vh; }
#screen-wake .wake-btn {
  width: min(48vh, 48vw); height: min(48vh, 48vw); border-radius: 50%; border: 0; background: rgba(255, 255, 255, .55);
  box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation;
}
#screen-wake .wake-btn .guide .bear { width: 80%; height: auto; }
#screen-wake .tap-hint { width: 70px; height: 70px; animation: float 1.4s ease-in-out infinite; }

/* ---------- 홈(허브) ---------- */
#screen-home { flex-direction: row; align-items: stretch; }
.home-left { flex: 0 0 24%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1vh; padding-bottom: 2vh; }
.home-left .guide .bear { width: min(36vh, 26vw); height: auto; }
.footprints { display: flex; gap: 4px; min-height: 30px; flex-wrap: wrap; justify-content: center; max-width: 220px; }
.footprints span { width: 28px; height: 28px; display: inline-block; animation: pop-out .5s ease-out both; transform: rotate(-20deg); }
.footprints span:nth-child(even) { transform: rotate(20deg) translateY(6px); }
.footprints span svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 0 rgba(90, 58, 42, .35)); }
.footprints span svg * { fill: #FFF3D6; }
.home-center { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
.doors { display: flex; gap: min(4vw, 48px); align-items: center; justify-content: center; }
.door-card {
  width: min(46vh, 22vw, 300px); height: min(56vh, 27vw, 370px); border-radius: var(--radius); border: 0; cursor: pointer;
  background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh;
  touch-action: manipulation; transition: transform .15s ease; position: relative;
}
.door-card:active { transform: translateY(4px) scale(.98); }
.door-card .door-icon { width: 64%; height: 60%; display: flex; align-items: center; justify-content: center; }
.door-card .door-icon svg { width: 100%; height: 100%; }
.door-card.journey { background: linear-gradient(#FFFBEF, #FFF1C9); }
.door-card.playground { background: linear-gradient(#F3FBFF, #DDF1FF); }
.door-progress { display: flex; gap: 10px; }
.door-progress i { width: 18px; height: 18px; border-radius: 50%; background: #EADFCB; border: 3px solid #E0C9A8; }
.door-progress i.on { background: var(--green); border-color: var(--green); }
.home-right { flex: 0 0 auto; min-width: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 0; }
.star-count { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 40px; padding: 8px 18px; box-shadow: var(--shadow-sm); font-size: 30px; font-weight: 700; font-family: var(--font-round); white-space: nowrap; }
.star-count svg { width: 38px; height: 38px; }
.parent-corner { position: absolute; left: var(--pad-left); top: var(--pad-top); width: 64px; height: 64px; border-radius: 50%; border: 0; background: transparent; opacity: .45; display: flex; align-items: center; justify-content: center; touch-action: none; z-index: 30; }
.parent-corner svg { width: 34px; height: 34px; }
.parent-corner .hold-ring { position: absolute; inset: 0; border-radius: 50%; border: 4px solid var(--accent); clip-path: inset(0 0 100% 0); }

/* ---------- 여정 ---------- */
#screen-journey { flex-direction: column; align-items: center; justify-content: center; }
.journey-map { position: relative; width: 100%; max-width: 980px; height: min(66vh, 520px); }
.path { position: relative; width: 100%; max-width: 760px; height: min(50vh, 420px); }
.path.journey { max-width: none; height: 100%; }
.path svg.trail { position: absolute; inset: 0; width: 100%; height: 100%; }
.path .stop {
  position: absolute; width: min(20vh, 150px); height: min(20vh, 150px); transform: translate(-50%, -50%);
  border-radius: 50%; border: 0; background: var(--card); box-shadow: var(--shadow); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; touch-action: manipulation; z-index: 2;
}
.path .stop svg { width: 60%; height: 60%; }
.path .stop.done { background: var(--green); }
.path .stop.locked { opacity: .55; }
.path .stop.next { background: var(--accent); }
.path .stop .check { position: absolute; right: -6px; top: -6px; width: 44px; height: 44px; background: var(--card); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.path .stop .check svg { width: 60%; height: 60%; }
.path .flag { position: absolute; width: 48px; height: 48px; transform: translate(-50%, -90%); }
.path .flag svg { width: 100%; height: 100%; }
.path .gate { position: absolute; width: min(16vh, 120px); height: min(16vh, 120px); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
.path .gate svg { width: 100%; height: 100%; }
.path .gate.shut { opacity: .55; filter: grayscale(.4); }
.path .gate.open { animation: glow 1.6s ease-in-out infinite; }
.journey-bear { position: absolute; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; transition: left .6s ease, top .6s ease; }
.journey-bear .guide .bear { width: min(18vh, 130px); height: auto; }
.journey-side { position: absolute; right: var(--pad-right); top: var(--pad-top); }
.room-door.empty { opacity: .75; }
.subject-tabs .labeled { gap: 10px; }
.subject-tabs .btn-label { font-size: clamp(13px, 2vh, 17px); padding: 1px 8px; }

/* ---------- 놀이터 ---------- */
#screen-playground { flex-direction: column; align-items: center; gap: 1.5vh; }
.subject-tabs { display: flex; gap: 18px; justify-content: center; flex: 0 0 auto; }
.subject-tab { width: 84px; height: 84px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .6); box-shadow: var(--shadow-sm); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: .7; transition: transform .15s ease, opacity .15s ease; touch-action: manipulation; }
.subject-tab svg { width: 70%; height: 70%; }
.subject-tab.on { opacity: 1; transform: scale(1.12) translateY(-3px); background: var(--card); outline: 5px solid var(--accent); }
.pack-grid { flex: 1; display: flex; flex-wrap: wrap; gap: min(2.4vh, 22px); align-items: center; justify-content: center; align-content: center; width: min(100%, 980px); padding: 1vh 110px 1vh 0; overflow-y: auto; }
.pack-tile {
  position: relative; width: min(23vh, 15vw, 180px); height: min(23vh, 15vw, 180px); border-radius: var(--radius); border: 0;
  background: var(--card); box-shadow: var(--shadow-sm); cursor: pointer; padding: 10px; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center; transition: transform .15s ease;
}
.pack-tile:active { transform: translateY(3px) scale(.98); }
.pack-tile.ko { border-top: 8px solid var(--pink); } .pack-tile.math { border-top: 8px solid var(--blue); } .pack-tile.en { border-top: 8px solid var(--green); }
.pack-tile .tile-pic { width: 66%; height: 62%; margin-bottom: 14%; display: flex; align-items: center; justify-content: center; }
.pack-tile .tile-pic .asset .word { font-size: min(8vh, 5vw, 60px); }
.tile-glyph { font-family: var(--font-round); font-weight: 700; font-size: min(12vh, 8vw, 96px); color: var(--ink); line-height: 1; }
.pack-tile .tile-kind { position: absolute; right: -8px; bottom: -8px; width: 46px; height: 46px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; }
.pack-tile .tile-kind svg { width: 64%; height: 64%; }
.pack-tile .tile-stars { position: absolute; left: 8px; top: 10px; display: flex; gap: 1px; }
.pack-tile .tile-stars svg { width: 16px; height: 16px; }
.playground-bear { position: absolute; left: calc(var(--pad-left) - 10px); bottom: calc(var(--pad-bottom) - 6px); pointer-events: none; z-index: 4; }
.playground-bear .guide .bear { width: min(20vh, 150px); height: auto; }

/* ---------- 놀이 화면 ---------- */
#screen-activity { flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: center; gap: 14px; height: 56px; flex: 0 0 56px; }
.topbar .dot { width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .7); border: 3px solid #E6D3B8; }
.topbar .dot.on { background: var(--accent); border-color: var(--accent); }
.topbar .dot.now { border-color: var(--ink); }
.stage-wrap { flex: 1; position: relative; display: flex; }
.stage { flex: 1; position: relative; touch-action: none; display: flex; align-items: center; justify-content: center; }
.guide-corner { position: absolute; left: 0; bottom: 0; pointer-events: none; z-index: 5; }
.guide-corner .guide .bear { width: min(22vh, 18vw); height: auto; }
.guide-corner .replay { position: absolute; left: calc(100% - 10px); bottom: 10px; pointer-events: auto; width: 72px; height: 72px; }

/* 보기 카드 */
.choices { display: flex; gap: 3vw; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; padding: 0 4vw; }
.choice {
  width: min(28vh, 22vw, 280px); height: min(28vh, 22vw, 280px); border-radius: var(--radius); border: 0;
  background: var(--card); box-shadow: var(--shadow); cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center; padding: 10px; position: relative; transition: transform .12s ease;
}
.choices.n4 .choice { width: min(26vh, 19vw, 240px); height: min(26vh, 19vw, 240px); }
.choice:active { transform: translateY(3px); }
.choice.correct { background: #DFF5E1; animation: pop .5s ease-out 1; }
.choice.wrong { animation: shake .4s ease-in-out 1; opacity: .5; }
.choice.dim { opacity: .3; pointer-events: none; }
.choice.reveal { outline: 8px solid var(--accent); animation: pop .6s ease-out 2; }

/* 그림 부품: 몸통 + 얼굴 겹치기, 여러 개 세기 */
.asset { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.asset img.body { width: 84%; height: 84%; object-fit: contain; }
.asset img.face { position: absolute; width: 36%; height: 36%; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: contain; }
.asset.shape-triangle img.face { transform: translate(-50%, -20%); }
.asset.multi { flex-wrap: wrap; gap: 4%; padding: 8%; }
.asset.multi img.body { width: 40%; height: 40%; }
.asset.multi.c1 img.body { width: 60%; height: 60%; }
.asset.multi.c5 img.body, .asset.multi.c6 img.body { width: 30%; height: 30%; }
.asset .word { font-family: var(--font-round); font-size: min(9vh, 7vw, 86px); font-weight: 700; letter-spacing: 2px; color: var(--ink); line-height: 1.1; }
.asset .word.small { font-size: min(6vh, 5vw, 56px); }
.asset .word.letter { font-size: min(11vh, 8vw, 100px); letter-spacing: 0; position: relative; }
.asset .dot-color { width: 70%; height: 70%; border-radius: 50%; box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .08); }

/* 분류(드래그) */
.sort-area { position: absolute; inset: 0; }
.sort-bin {
  position: absolute; bottom: 2%; width: 30%; height: 40%; border-radius: 34px; background: rgba(255, 255, 255, .7);
  border: 6px dashed #E0C9A8; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px;
}
.sort-bin.left { left: 12%; } .sort-bin.right { right: 12%; }
.sort-bin .bin-label { width: 30%; height: 44%; }
.sort-bin.over { background: #FFF4D1; border-color: var(--accent); }
.sort-bin .placed { position: absolute; bottom: 6%; display: flex; gap: 2%; left: 6%; right: 6%; justify-content: center; }
.sort-bin .placed .asset { width: 24%; height: auto; aspect-ratio: 1; }
.drag-item {
  position: absolute; width: min(18vh, 14vw, 170px); height: min(18vh, 14vw, 170px); border-radius: 24px;
  background: var(--card); box-shadow: var(--shadow-sm); touch-action: none; cursor: grab; padding: 6px;
  transition: transform .18s ease;
}
.drag-item.lift { transform: scale(1.1); transition: none; z-index: 10; box-shadow: 0 14px 0 rgba(90, 58, 42, .14); }
.drag-item.wrong { animation: shake .4s ease-in-out 1; }
.drag-item.hint { animation: float 1s ease-in-out infinite; outline: 8px solid var(--accent); }

/* 동글곰 간식(바구니 = 입) */
.sort-area.snack .bear-mouth { position: absolute; left: 50%; bottom: -4%; transform: translateX(-50%); width: min(40vh, 300px); transition: transform .2s ease; }
.sort-area.snack .bear-mouth .guide .bear { width: 100%; height: auto; }
.sort-area.snack .bear-mouth.over { transform: translateX(-50%) scale(1.06); }
.snack-target { position: absolute; right: 2%; top: 2%; width: min(14vh, 110px); height: min(14vh, 110px); background: var(--card); border-radius: 22px; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; outline: 5px solid var(--accent); }
.snack-target .asset .word.letter { font-size: min(8vh, 64px); }
.drag-item.cookie { border-radius: 50%; background: #E8B98A; box-shadow: var(--shadow-sm), inset 0 -8px 0 rgba(90, 58, 42, .18); }
.drag-item.cookie::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 24% 30%, #7A4A2A 0 6%, transparent 7%), radial-gradient(circle at 72% 26%, #7A4A2A 0 5%, transparent 6%), radial-gradient(circle at 78% 72%, #7A4A2A 0 6%, transparent 7%), radial-gradient(circle at 26% 76%, #7A4A2A 0 5%, transparent 6%); }
.drag-item.cookie .word.letter { color: #5A3A2A; font-size: min(9vh, 7vw, 76px); }
.drag-item.eaten { transform: scale(0); opacity: 0; transition: transform .3s ease-in, opacity .3s; }

/* 짝 맞추기 */
.match-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5vh; width: min(84vw, 150vh); height: 100%; padding: 2vh 0; }
.match-grid.n4 { grid-template-columns: repeat(2, 1fr); width: min(60vw, 100vh); }
.card { position: relative; border: 0; background: transparent; padding: 0; cursor: pointer; touch-action: manipulation; perspective: 900px; }
.card .inner { position: absolute; inset: 0; transition: transform .45s ease; transform-style: preserve-3d; }
.card.open .inner, .card.matched .inner { transform: rotateY(180deg); }
.card .face-side { position: absolute; inset: 0; border-radius: var(--radius); box-shadow: var(--shadow-sm); backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; align-items: center; justify-content: center; }
.card .back { background: var(--sky); }
.card .back svg { width: 40%; height: 40%; }
.card .front { background: var(--card); transform: rotateY(180deg); }
.card.matched .front { background: #DFF5E1; }
.card.matched { animation: pop .5s ease-out 1; }

/* 따라 그리기 + 발자국 길 */
.trace-wrap { position: relative; width: min(84vh, 60vw); height: min(84vh, 60vw); }
.trace-wrap svg { width: 100%; height: 100%; touch-action: none; overflow: visible; }
.trace-wrap .ghost { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 70; stroke-linecap: round; stroke-linejoin: round; }
.trace-wrap .dashes { fill: none; stroke: #B08968; stroke-width: 8; stroke-dasharray: 24 36; stroke-linecap: round; animation: dash 1.2s linear infinite; }
.trace-wrap .done-path { fill: none; stroke-width: 70; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.trace-wrap.walker .done-path { opacity: .35; }
.trace-wrap .start-dot { animation: pop 1s ease-in-out infinite; }
.trace-wrap .ink { fill: none; stroke-width: 56; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.trace-wrap .print { animation: pop-out .35s ease-out both; }
.trace-walker { position: absolute; width: min(14vh, 110px); transform: translate(-50%, -78%); pointer-events: none; z-index: 4; }
.trace-walker .guide .bear { width: 100%; height: auto; }
.trace-walker.walking .guide .bear { animation: bounce .35s ease-in-out infinite; }

/* 조립 */
.assemble-wrap { position: relative; width: min(84vh, 60vw); height: min(84vh, 60vw); }
.assemble-wrap svg { width: 100%; height: 100%; touch-action: none; overflow: visible; }
.assemble-wrap .shadow-piece { opacity: .9; }
.assemble-wrap .shadow-piece line, .assemble-wrap .shadow-piece path { stroke-dasharray: 14 18; }
.assemble-wrap .piece { cursor: grab; }
.assemble-wrap .piece.lift { filter: drop-shadow(0 12px 0 rgba(90, 58, 42, .18)); }
.assemble-wrap .piece.glide { transition: transform .35s cubic-bezier(.2, .8, .3, 1.2); }
.assemble-wrap .piece.wrong { animation: shake .35s ease-in-out 1; }
.assemble-wrap .piece.hint { animation: blink .6s ease-in-out infinite; }
.assemble-wrap .piece.fade { opacity: .2; transition: opacity .5s; }
.assemble-wrap .letter-group.dance { transform-origin: 500px 420px; animation: dance 1.1s ease-in-out 2; }
.assemble-wrap .letter-face-g { animation: fade-in .4s ease-out both; }

/* 낱말 요리 */
.cook-area { position: absolute; inset: 0; }
.cook-area .pot { position: absolute; left: 50%; top: 30%; width: min(30vh, 22vw, 240px); transform: translate(-50%, -50%); }
.cook-area .pot svg { width: 100%; height: auto; }
.cook-area .pot .steam { opacity: 0; }
.cook-area .pot.boil .steam { animation: steam 1.4s ease-out infinite; }
.cook-area .pot.boil .steam.s2 { animation-delay: .4s; } .cook-area .pot.boil .steam.s3 { animation-delay: .8s; }
.cook-area .pot.boil { animation: wiggle .5s ease-in-out 3; }
.cook-picture { position: absolute; left: 50%; top: 4%; width: min(22vh, 16vw, 170px); height: min(22vh, 16vw, 170px); transform: translateX(-50%); border-radius: var(--radius); border: 0; background: var(--card); box-shadow: var(--shadow); padding: 8px; cursor: pointer; touch-action: manipulation; transition: transform .6s ease-in, opacity .6s; }
.cook-picture.into-pot { transform: translate(-50%, 140%) scale(.25) rotate(40deg); opacity: 0; }
.cook-area .plate { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); width: min(70%, 620px); height: min(30vh, 220px); border-radius: 50% / 40%; background: rgba(255, 255, 255, .85); box-shadow: var(--shadow-sm), inset 0 0 0 14px #F1E7D8; display: flex; align-items: center; justify-content: center; gap: 4%; }
.cook-area .plate.served { outline: 8px solid var(--accent); animation: pop .6s ease-out 1; }
.cook-area .slot { width: min(20vh, 14vw, 150px); height: min(20vh, 14vw, 150px); border-radius: 24px; border: 5px dashed #D9C7AE; color: #D9C7AE; font-family: var(--font-round); font-weight: 700; font-size: min(11vh, 8vw, 90px); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.cook-area .slot.over { background: #FFF4D1; border-color: var(--accent); }
.cook-area .slot.filled { border-style: solid; border-color: transparent; color: transparent; }
.cook-area .chip { position: absolute; width: min(20vh, 14vw, 150px); height: min(20vh, 14vw, 150px); border-radius: 24px; background: var(--card); box-shadow: var(--shadow-sm); font-family: var(--font-round); font-weight: 700; font-size: min(11vh, 8vw, 90px); color: var(--ink); display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; transform: translateX(-50%); }
.cook-area .chip.pop-out { animation: pop-out .7s cubic-bezier(.2, .8, .3, 1.2) both; }
.cook-area .chip.lift { transform: translateX(-50%) scale(1.08); z-index: 10; }
.cook-area .chip.placed { transform: none; transition: left .25s, top .25s; background: #DFF5E1; }
.cook-area .chip.wrong { animation: shake .4s ease-in-out 1; }
.cook-area .chip.hint { animation: float 1s ease-in-out infinite; outline: 8px solid var(--accent); }

/* 문지르기 */
.scrub-wrap { position: relative; width: min(84vh, 60vw); height: min(84vh, 60vw); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); touch-action: none; }
.scrub-wrap.v-mud { background: repeating-linear-gradient(90deg, #DDF2F9 0 60px, #FFFFFF 60px 64px), repeating-linear-gradient(0deg, #DDF2F9 0 60px, #FFFFFF 60px 64px); background-blend-mode: multiply; }
.scrub-wrap.v-steam { background: linear-gradient(#CFE9F8, #EAF6FF); box-shadow: var(--shadow), inset 0 0 0 22px #B08968; }
.scrub-wrap.v-sand { background: linear-gradient(#BFE3F5 0 38%, #F3DFB0 38% 100%); }
.scrub-wrap.v-snow { background: linear-gradient(#D6E9F8, #F6FBFF); }
.scrub-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scrub-wrap .dirt.fade { opacity: 0; transition: opacity .5s; }
.scrub-wrap .sponge { position: absolute; width: 96px; height: 96px; transform: translate(-50%, -50%) rotate(-10deg); opacity: 0; pointer-events: none; transition: opacity .15s; animation: sway .5s ease-in-out infinite; }
.scrub-wrap .sponge.show { opacity: 1; }
.scrub-wrap .sponge.hide { display: none; }
.scrub-wrap .sponge svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 0 rgba(90, 58, 42, .18)); }
.scrub-wrap .bubble { position: absolute; border-radius: 50%; opacity: .9; pointer-events: none; animation: rise .9s ease-out forwards; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .06); }
.scrub-face { position: absolute; transform: translate(-50%, -50%) scale(0); transition: transform .4s cubic-bezier(.2, .8, .3, 1.3); pointer-events: none; width: 96px; height: 96px; }
.scrub-face.show { transform: translate(-50%, -50%) scale(1); }
.scrub-wrap.shine { animation: glow 1.4s ease-in-out 2; }

/* 잡기(글자 비·숨바꼭질) */
.pop-area { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius); touch-action: manipulation; }
.pop-area.sky { background: linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, .55)); }
.pop-ground { position: absolute; left: -5%; right: -5%; bottom: -8%; height: 20%; border-radius: 50% 50% 0 0; background: var(--hill-front); opacity: .8; }
.pop-target { position: absolute; left: 50%; top: 2%; transform: translateX(-50%); width: min(14vh, 110px); height: min(14vh, 110px); background: var(--card); border-radius: 22px; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; outline: 5px solid var(--accent); z-index: 6; }
.pop-target .asset .word.letter { font-size: min(8vh, 64px); }
.pop-target .asset img.body { width: 76%; height: 76%; }
.balloon { position: absolute; left: 0; top: 0; will-change: transform; cursor: pointer; transition: opacity .3s; }
.balloon-body { width: 100%; height: 84%; border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%; background: var(--c, #F08CA0); box-shadow: inset -12px -14px 0 rgba(0, 0, 0, .08), var(--shadow-sm); display: flex; align-items: center; justify-content: center; position: relative; }
.balloon-body::before { content: ""; position: absolute; left: 18%; top: 12%; width: 18%; height: 30%; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.balloon-body::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 12px; background: var(--c, #F08CA0); transform: translateX(-50%); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.balloon-body .asset { width: 80%; height: 80%; }
.balloon-body .asset .word.letter { color: #FFF; font-size: min(10vh, 7vw, 84px); text-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.balloon-string { width: 4px; height: 16%; margin: 8px auto 0; background: rgba(90, 58, 42, .35); border-radius: 2px; }
.balloon.hint .balloon-body { animation: glow .9s ease-in-out infinite; outline: 6px solid var(--accent); }
.balloon.bounce .balloon-body { animation: pop .35s ease-out 1; }
.balloon.burst { opacity: 0; transition: opacity .25s; }
.balloon.burst .balloon-body { transform: scale(1.4); transition: transform .25s; }
.balloon.fly-away { transition: transform 1.2s ease-in !important; transform: translateY(-120vh) !important; }
.parachute { position: absolute; top: -34%; width: min(20vh, 150px); z-index: 5; transition: top 2.3s cubic-bezier(.3, .4, .5, 1); display: flex; flex-direction: column; align-items: center; }
.parachute.land { top: 56%; }
.parachute .canopy { width: 100%; height: auto; animation: sway 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
.parachute .rider { width: 62%; height: auto; aspect-ratio: 1; margin-top: -6px; }
.parachute.wave .rider { animation: wiggle .5s ease-in-out 4; }
.pop-area.still .scene-bg, .pop-area.still .scene-front { position: absolute; inset: 0; width: 100%; height: 100%; }
.pop-area.still .scene-front { pointer-events: none; z-index: 3; }
.hide-items { position: absolute; inset: 0; z-index: 2; }
.hidden-item { position: absolute; width: min(16vh, 12vw, 130px); height: min(16vh, 12vw, 130px); transform: translate(-50%, -50%); border: 0; background: var(--card); border-radius: 22px; box-shadow: var(--shadow-sm); padding: 4px; cursor: pointer; touch-action: manipulation; transition: transform .35s ease; }
.hidden-item .asset .word.letter { font-size: min(10vh, 7vw, 80px); }
.hidden-item.found { transform: translate(-50%, -110%) scale(1.1); z-index: 5; background: #DFF5E1; }
.hidden-item.wiggle { animation: shake .4s ease-in-out 1; }
.hidden-item.hint { animation: glow .9s ease-in-out infinite; outline: 6px solid var(--accent); }
.hidden-item .wave-hand { position: absolute; right: -24px; top: -26px; width: 44px; height: 44px; transform-origin: 50% 100%; animation: wiggle .5s ease-in-out infinite; }
.hidden-item .wave-hand svg { width: 100%; height: 100%; }

/* 글자 공개 카드(이름 + 첫소리 동물) */
.reveal-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2vh 3vw; display: flex; align-items: center; gap: 3vw; animation: card-in .6s ease-out both; min-height: min(46vh, 340px); max-width: 92%; }
@keyframes card-in { 0% { transform: translate(-50%, -50%) scale(.2) rotate(-30deg); opacity: 0; } 70% { transform: translate(-50%, -50%) scale(1.08) rotate(4deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1) rotate(0); } }
.reveal-card.out { opacity: 0; transition: opacity .3s; }
.reveal-left, .reveal-right { display: flex; align-items: center; justify-content: center; }
.reveal-right { width: min(36vh, 26vw, 260px); height: min(36vh, 26vw, 260px); animation: pop-out .6s .2s cubic-bezier(.2, .8, .3, 1.2) both; }
.reveal-left .asset { width: min(36vh, 26vw, 260px); height: min(36vh, 26vw, 260px); }
.reveal-letter { position: relative; font-family: var(--font-round); font-weight: 700; font-size: min(36vh, 24vw, 240px); line-height: 1; color: var(--pink); -webkit-text-stroke: 4px #FFF; text-shadow: 0 10px 0 rgba(90, 58, 42, .12); animation: dance 1.2s ease-in-out 2; }
.reveal-letter.word { font-size: min(22vh, 16vw, 150px); color: var(--ink); letter-spacing: 4px; }
.reveal-letter .letter-face { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); }
.reveal-letter.word .letter-face { display: none; }

/* ---------- 보상 ---------- */
#screen-reward { align-items: center; justify-content: center; flex-direction: column; gap: 3vh; }
.big-star { width: min(40vh, 40vw); height: min(40vh, 40vw); animation: spin-in .8s ease-out 1; filter: drop-shadow(0 10px 0 rgba(90, 58, 42, .12)); }
.sticker-reveal { width: min(36vh, 36vw); height: min(36vh, 36vw); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; animation: spin-in .8s ease-out 1; }
.reward-row { display: flex; gap: 4vw; align-items: center; }
.reward-row .guide .bear { width: min(30vh, 22vw); height: auto; }

/* ---------- 스티커 방 ---------- */
#screen-room { flex-direction: column; padding: 0; }
.room-scene { position: relative; flex: 1; overflow: hidden; }
.room-scene svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.room-scene .sticker { position: absolute; width: min(16vh, 12vw); height: min(16vh, 12vw); transform: translate(-50%, -50%); touch-action: none; cursor: grab; }
.room-scene .sticker.lift { transform: translate(-50%, -50%) scale(1.15); z-index: 10; }
.room-tray { flex: 0 0 auto; height: min(22vh, 180px); background: rgba(255, 255, 255, .85); display: flex; align-items: center; gap: 2vw; padding: 0 calc(var(--pad-left) + 90px) 0 var(--pad-left); overflow-x: auto; }
.room-tray .tray-item { flex: 0 0 auto; width: min(16vh, 130px); height: min(16vh, 130px); border-radius: 22px; background: var(--card); box-shadow: var(--shadow-sm); touch-action: none; padding: 6px; }
.room-tray .tray-item.used { opacity: .35; }
.room-home { position: absolute; right: var(--pad-right); bottom: calc(var(--pad-bottom) + 10px); z-index: 20; }

/* ---------- 끝 인사 ---------- */
#screen-bye { align-items: center; justify-content: center; flex-direction: column; gap: 3vh; }
#screen-bye .guide .bear { width: min(44vh, 40vw); height: auto; }

/* ---------- 학부모 화면(어른용, 글자 있음) ---------- */
#screen-parent { background: #FFFDF8; flex-direction: column; overflow: auto; -webkit-user-select: text; user-select: text; font-size: 17px; font-family: var(--font-round); }
#screen-parent header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
#screen-parent h1 { font-size: 24px; margin: 0; }
#screen-parent h2 { font-size: 18px; margin: 18px 0 8px; }
#screen-parent .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
#screen-parent .panel { background: var(--card); border-radius: 16px; padding: 14px 16px; box-shadow: 0 2px 0 rgba(90, 58, 42, .08); }
#screen-parent .stat { font-size: 30px; font-weight: 700; }
#screen-parent label { display: block; margin: 8px 0 4px; color: var(--ink-soft); font-size: 14px; }
#screen-parent input[type="text"], #screen-parent input[type="number"], #screen-parent select {
  width: 100%; font-size: 18px; padding: 10px 12px; border-radius: 10px; border: 1px solid #DCCBB5; background: #fff; color: var(--ink);
}
#screen-parent .btn { display: inline-block; font-size: 16px; padding: 10px 16px; border-radius: 12px; border: 0; background: var(--accent); color: var(--ink); cursor: pointer; margin: 6px 6px 0 0; }
#screen-parent .btn.ghost { background: #F1E7D8; }
#screen-parent .btn.danger { background: #F5B5B5; }
#screen-parent .bar { height: 10px; background: #F1E7D8; border-radius: 5px; overflow: hidden; margin-top: 6px; }
#screen-parent .bar i { display: block; height: 100%; background: var(--green); }
#screen-parent .muted { color: var(--ink-soft); font-size: 14px; }
#screen-parent table { width: 100%; border-collapse: collapse; font-size: 14px; }
#screen-parent td, #screen-parent th { text-align: left; padding: 4px 6px; border-bottom: 1px solid #F1E7D8; }
#screen-parent .msg { margin-top: 8px; color: #2E7D32; font-size: 14px; min-height: 18px; }
#screen-parent .msg.err { color: #B3261E; }

/* 큰 화면에서 과하게 커지지 않게 */
@media (min-width: 1200px) { :root { --tap: 110px; } }
/* 폰(세로 짧음)에서 여백 줄이기 */
@media (max-height: 460px) {
  :root { --tap: 76px; --radius: 20px; }
  .topbar { height: 40px; flex-basis: 40px; }
  .door-card { width: min(44vh, 24vw, 300px); height: min(62vh, 30vw, 340px); }
  .footprints { display: none; }
  .subject-tab { width: 64px; height: 64px; }
  .pack-grid { gap: 10px; padding-right: 90px; }
  .pack-tile { width: min(30vh, 13vw, 180px); height: min(30vh, 13vw, 180px); }
  .pack-tile .tile-kind { width: 34px; height: 34px; }
  .reveal-card { min-height: 0; padding: 1vh 2vw; }
  .journey-map { height: 86vh; }
  .playground-bear .guide .bear { width: 14vh; }
  .guide-corner .replay { width: 56px; height: 56px; }
  #scene .hills { height: 18vh; }
}