/* 솔솔 음악이론 — 미리캔버스풍: 굵은 외곽선, 선명한 단색, 스티커 같은 그림자 */
@font-face {
  font-family: 'Bravura';
  src: url('../fonts/bravura.woff2') format('woff2');
  font-display: block;
}

:root {
  --ink: #3A2A20;
  --paper: #FFF6E0;
  --card: #FFFFFF;
  --yellow: #FFD23F;
  --coral: #FF6B6B;
  --mint: #4ECDC4;
  --sky: #5DADE2;
  --purple: #A06CD5;
  --green: #6BCB77;
  --orange: #FF9F43;
  --pink: #FF9AA2;
  --muted: #8A7A6A;
  --line: 4px solid var(--ink);
  --pop: 0 6px 0 var(--ink);
  --radius: 22px;
  --title: 'Jua', 'Apple SD Gothic Neo', sans-serif;
  --body: 'Gowun Dodum', 'Apple SD Gothic Neo', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  background-image: radial-gradient(#F3E3BC 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--body);
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
#app { min-height: 100dvh; display: flex; flex-direction: column; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; }

.screen {
  flex: 1; display: flex; flex-direction: column;
  width: 100%; max-width: 980px; margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  gap: 14px;
}
.center { align-items: center; justify-content: center; text-align: center; }
h1, h2, h3, .title { font-family: var(--title); font-weight: 400; margin: 0; }
h1 { font-size: clamp(30px, 6vw, 46px); }
h2 { font-size: clamp(22px, 4.2vw, 32px); }
.muted { color: var(--muted); }

/* 버튼 */
.btn {
  font-family: var(--title); font-size: clamp(20px, 3.6vw, 26px);
  background: var(--yellow); border: var(--line); border-radius: var(--radius);
  box-shadow: var(--pop); padding: 14px 24px; min-height: 60px;
  transition: transform .08s, box-shadow .08s;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.btn.coral { background: var(--coral); color: #fff; }
.btn.mint { background: var(--mint); }
.btn.sky { background: var(--sky); color: #fff; }
.btn.purple { background: var(--purple); color: #fff; }
.btn.white { background: #fff; }
.btn.small { font-size: 18px; min-height: 46px; padding: 8px 16px; border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.btn.big { font-size: clamp(26px, 5vw, 36px); min-height: 88px; padding: 18px 34px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.icon-btn {
  width: 56px; height: 56px; border-radius: 50%; border: var(--line); background: #fff;
  box-shadow: 0 4px 0 var(--ink); font-size: 26px; display: grid; place-items: center; flex: none;
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

.card {
  background: var(--card); border: var(--line); border-radius: var(--radius);
  box-shadow: var(--pop); padding: 16px;
}

/* 윗줄 */
.topbar { display: flex; align-items: center; gap: 10px; }
.topbar .grow { flex: 1; }
.who { display: flex; align-items: center; gap: 8px; font-family: var(--title); font-size: 22px; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%; border: var(--line); background: #fff;
  display: grid; place-items: center; font-size: 30px; flex: none;
}

/* 음표 지갑 */
.wallet { display: flex; gap: 6px; align-items: center; background: #fff; border: var(--line); border-radius: 999px; padding: 4px 12px; box-shadow: 0 4px 0 var(--ink); }
.wallet .coin { display: flex; align-items: center; gap: 2px; font-family: var(--title); font-size: 20px; }
.wallet .ticket { font-family: var(--title); font-size: 20px; padding-left: 6px; border-left: 3px dotted var(--ink); }

/* 첫 화면: 누구예요? */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; width: 100%; }
.person { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; }
.person .avatar { width: 84px; height: 84px; font-size: 52px; }
.person .name { font-family: var(--title); font-size: 22px; }
.person .lv { font-size: 14px; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 10px; }

/* 홈 */
.home-main { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: center; }
.home-main .hero { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }
.home-main .hero .char { width: min(38vw, 220px); flex: none; }
.bubble {
  position: relative; background: #fff; border: var(--line); border-radius: 26px; padding: 16px 20px;
  font-family: var(--title); font-size: clamp(20px, 3.8vw, 28px); line-height: 1.35; box-shadow: var(--pop);
}
.bubble::before {
  content: ''; position: absolute; left: -18px; top: 38px; border: 12px solid transparent;
  border-right: 16px solid var(--ink);
}
.menu-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 150px; font-family: var(--title); font-size: clamp(22px, 4vw, 30px);
}
.menu-tile .em { font-size: 54px; line-height: 1; }
.menu-tile small { font-family: var(--body); font-size: 15px; }
.menu-tile.wide { grid-column: 1 / -1; min-height: 120px; flex-direction: row; gap: 18px; }

/* 문제 화면 */
.progress { flex: 1; display: flex; gap: 6px; }
.progress i { flex: 1; height: 14px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; }
.progress i.done { background: var(--green); }
.progress i.now { background: var(--yellow); }
.q-head { display: flex; align-items: flex-start; gap: 12px; }
.q-head .char { width: 96px; flex: none; }
.q-head .bubble { flex: 1; min-height: 72px; display: flex; align-items: center; }
.q-visual { display: flex; justify-content: center; align-items: center; min-height: 120px; }
.q-visual svg { max-width: 100%; height: auto; }
.q-visual .playbig { font-size: 70px; width: 150px; height: 150px; }
.q-visual .claps { font-size: 64px; letter-spacing: 6px; }
.options { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* 4지선다 (원장 2026-09-28): 3+1로 어긋나지 않게 넓으면 한 줄 4칸, 좁으면(답 칸 640px 미만) 2×2 */
.options:has(> .opt:nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(clamp(calc(25% - 11px), calc((640px - 100%) * 999), calc(50% - 7px)), 1fr)); }
.options .opt svg { max-width: 100%; height: auto; }
.opt {
  background: #fff; border: var(--line); border-radius: var(--radius); box-shadow: var(--pop);
  min-height: 130px; padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--title); font-size: clamp(22px, 4vw, 30px); transition: transform .1s, opacity .3s;
}
.opt:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.opt .em { font-size: 64px; line-height: 1.05; }
.opt .glyph { display: flex; align-items: center; justify-content: center; }
.opt .big { font-size: 56px; line-height: 1; }
.opt .syl { width: 88px; height: 88px; border-radius: 50%; border: var(--line); display: grid; place-items: center; font-size: 40px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.opt.faded { opacity: .18; pointer-events: none; }
.opt.glow, .glow-target { animation: glow 1s ease-in-out infinite; }
.opt.right { background: #D8F5DB; }
.opt.wrong { animation: shake .4s; background: #FFE0E0; }
@keyframes glow { 0%,100% { box-shadow: var(--pop), 0 0 0 0 rgba(255,210,63,.9); } 50% { box-shadow: var(--pop), 0 0 0 12px rgba(255,210,63,.9); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
.q-foot { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.unsure { background: #fff; }
.unsure.on { background: var(--purple); color: #fff; }

/* 건반 */
.keyboard { width: 100%; max-width: 820px; margin: 0 auto; touch-action: manipulation; }
.keyboard .wk { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.keyboard .bk { fill: var(--ink); stroke: var(--ink); stroke-width: 2; }
.keyboard .key { cursor: pointer; }
.keyboard .key.hl .wk { fill: #FFE88A; }
.keyboard .key.hl .bk { fill: #C9A21B; }
.keyboard .key.press .wk { fill: #B5E8FF; }
.keyboard .key.press .bk { fill: #2F80C9; }
.keyboard .key.ok .wk { fill: #9BE3A5; }
.keyboard .key.no .wk { fill: #FFB3B3; }
.keyboard .key.ok .bk { fill: #2E9E47; }
.keyboard .key.no .bk { fill: #D84A4A; }
.keyboard .key.off { pointer-events: none; opacity: .35; }
.keyboard text { font-family: var(--title); pointer-events: none; }

/* 오선 */
.staff-svg .tap { fill: transparent; cursor: pointer; }
.staff-svg .tap:hover { fill: rgba(93,173,226,.15); }
.staff-svg text.m { font-family: 'Bravura'; }

/* 새로 배워요 */
.intro-tag { display: inline-block; background: var(--coral); color: #fff; font-family: var(--title); font-size: 20px; border: 3px solid var(--ink); border-radius: 999px; padding: 2px 14px; transform: rotate(-3deg); }

/* 결과 */
.result-notes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; min-height: 90px; align-items: flex-end; }
.result-notes .n { font-family: 'Bravura'; font-size: 64px; line-height: 1; animation: drop .5s both; }
@keyframes drop { from { transform: translateY(-60px) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.merge { animation: merge .6s both; }
@keyframes merge { 50% { transform: scale(1.5) rotate(10deg); } }

/* 스티커판 */
.stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.sticker { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; text-align: center; font-size: 15px; }
.sticker .face { width: 70px; height: 70px; border-radius: 50%; border: var(--line); display: grid; place-items: center; font-size: 34px; background: #eee; }
.sticker.mastered .face { background: var(--yellow); }
.sticker.locked { opacity: .45; }
.sticker .stars { color: var(--orange); letter-spacing: 1px; }
.concept-title { font-family: var(--title); font-size: 22px; margin: 8px 0 2px; }

/* 게임 방 */
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.game-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 180px; justify-content: center; font-family: var(--title); font-size: 24px; }
.game-tile .em { font-size: 60px; }
.game-tile small { font-family: var(--body); font-size: 14px; }
.game-tile.soon { opacity: .5; }
.stage { position: relative; flex: 1; border: var(--line); border-radius: var(--radius); overflow: hidden; background: #BDE8C4; min-height: 420px; touch-action: manipulation; }
.hud { display: flex; gap: 10px; align-items: center; font-family: var(--title); font-size: 24px; }
.hud .grow { flex: 1; }
.pill { background: #fff; border: var(--line); border-radius: 999px; padding: 4px 14px; box-shadow: 0 3px 0 var(--ink); }

/* 선생님 */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs .btn.on { background: var(--ink); color: #fff; }
.table { width: 100%; border-collapse: collapse; font-size: 16px; }
.table th, .table td { border-bottom: 2px dashed #E3D3B0; padding: 8px 6px; text-align: left; vertical-align: top; }
.table th { font-family: var(--title); font-weight: 400; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field input, .field select { border: 3px solid var(--ink); border-radius: 12px; padding: 10px 12px; font-size: 18px; background: #fff; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.tag { display: inline-block; border: 2px solid var(--ink); border-radius: 999px; padding: 0 8px; font-size: 13px; margin: 1px 2px; background: #fff; }
.tag.warn { background: #FFE0E0; }
.tag.guess { background: #EFE2FF; }
.tag.good { background: #D8F5DB; }
.report-text { white-space: pre-wrap; font-size: 15px; line-height: 1.6; background: #FFFDF6; border: 2px dashed var(--ink); border-radius: 14px; padding: 12px; user-select: text; -webkit-user-select: text; }
.pinpad { display: grid; grid-template-columns: repeat(3, 80px); gap: 12px; }
.pinpad .btn { min-height: 70px; font-size: 30px; }
.pindots { font-size: 40px; letter-spacing: 12px; min-height: 50px; }

/* 알림 */
#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(120px);
  background: var(--ink); color: #fff; font-family: var(--title); font-size: 20px;
  border-radius: 999px; padding: 10px 22px; transition: transform .3s; z-index: 50; max-width: 90vw; text-align: center;
}
#toast.show { transform: translateX(-50%) translateY(0); }
.confetti { position: fixed; top: -20px; width: 12px; height: 18px; z-index: 40; pointer-events: none; animation: fall linear forwards; border: 2px solid var(--ink); }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
.char-bounce { animation: bounce .6s; }
@keyframes bounce { 30% { transform: translateY(-16px); } 60% { transform: translateY(0); } 80% { transform: translateY(-6px); } }

@media (max-width: 600px) {
  .home-main { grid-template-columns: 1fr; }
  .home-main .hero .char { width: 120px; }
  .q-head .char { width: 64px; }
  .options { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
  .opt { min-height: 104px; }
  .opt .em { font-size: 48px; }
  .opt .glyph svg { height: 70px; width: auto; }
  .opt .syl { width: 64px; height: 64px; font-size: 30px; }
}

/* 묻는 창 */
.modal-back { position: fixed; inset: 0; background: rgba(58,42,32,.45); display: grid; place-items: center; z-index: 60; padding: 16px; }
.modal { max-width: 440px; width: 100%; display: flex; flex-direction: column; gap: 16px; text-align: center; }
.float-note { position: fixed; font-family: 'Bravura'; font-size: 54px; z-index: 45; pointer-events: none; animation: floatUp 1s ease-out forwards; color: var(--ink); }
@keyframes floatUp { to { transform: translateY(-120px); opacity: 0; } }

/* 게임: 두더지 */
.mole-stage { background: linear-gradient(#9FD8F5 0 18%, #8BCF7A 18%); display: grid; place-items: center; padding: 12px; }
.holes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; width: min(100%, 620px); }
.hole { position: relative; aspect-ratio: 1 / .9; overflow: hidden; border-radius: 0 0 50% 50% / 0 0 30% 30%; }
.hole .dirt { position: absolute; left: 4%; right: 4%; bottom: 0; height: 30%; background: #6B4226; border: 4px solid var(--ink); border-radius: 50%; z-index: 2; }
.mole { position: absolute; left: 12%; right: 12%; bottom: 8%; height: 88%; transform: translateY(100%); transition: transform .18s ease-out; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; cursor: pointer; }
.mole.up { transform: translateY(0); }
.mole.hit { filter: brightness(1.3); transform: translateY(30%) scale(.9); }
.mole-face { font-size: clamp(34px, 7vw, 54px); line-height: 1; }
.mole-card { background: #FFF6E0; border: 3px solid var(--ink); border-radius: 12px; padding: 2px 6px; min-width: 70%; display: grid; place-items: center; }
.mole-card svg { max-width: 100%; height: auto; max-height: 64px; }
.shake { animation: shake .35s; }

/* 게임: 음표 비 */
.rain-stage { background: linear-gradient(#CFE8FF, #EAF5FF); }
.rain-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: repeating-linear-gradient(90deg, #fff 0 26px, var(--ink) 26px 30px); border-top: 4px solid var(--ink); }
.drop { position: absolute; top: 0; will-change: transform; }
.drop-card { background: #fff; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink); padding: 2px 4px; }
.drop-card svg { display: block; width: 100px; height: auto; }
.ball { width: 76px; height: 76px; border-radius: 50%; border: 4px solid var(--ink); display: grid; place-items: center; color: #fff; font-family: var(--title); font-size: 34px; box-shadow: 0 4px 0 var(--ink); text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.drop.burst { animation: burst .3s forwards; }
.drop.splash { animation: burst .4s forwards; filter: grayscale(1); }
@keyframes burst { to { transform: scale(1.6); opacity: 0; } }
.rain-keys { display: flex; gap: 8px; }
.rain-key { flex: 1; min-height: 76px; border: var(--line); border-radius: 18px; box-shadow: var(--pop); color: #fff; font-family: var(--title); font-size: clamp(22px, 4.5vw, 34px); text-shadow: 0 2px 0 rgba(0,0,0,.3); touch-action: manipulation; }
.rain-key:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }

.pill[data-target] { display: inline-flex; align-items: center; gap: 6px; min-height: 56px; }

/* 오선은 화면 폭에 맞춰 크게 */
.q-visual .staff-svg { width: min(100%, 560px); height: auto; }
[data-ans] .q-visual .staff-svg { width: min(100%, 680px); }
.opt .staff-svg { width: 100%; max-width: 260px; height: auto; }
.table td:nth-child(2), .table td:nth-child(3), .table td:nth-child(4) { white-space: nowrap; }
@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; }
  .topbar .progress { order: 5; flex-basis: 100%; }
  .wallet { padding: 2px 8px; gap: 4px; }
  .wallet .coin { font-size: 16px; }
  .wallet .coin svg { height: 22px; width: auto; }
  .wallet .ticket { font-size: 16px; }
}

/* 공부 길(시간) · 코너 */
.road { position: relative; flex: 1; height: 18px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; min-width: 120px; }
.road-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: repeating-linear-gradient(45deg, var(--green) 0 10px, #85D68F 10px 20px); border-radius: 999px; transition: width 1s linear; }
.road-runner { position: absolute; top: -14px; left: 0; font-size: 26px; transition: left 1s linear; transform: scaleX(-1); }
.road-flag { position: absolute; right: -6px; top: -16px; font-size: 24px; }
.pill.stars { font-family: var(--title); font-size: 20px; white-space: nowrap; }
.station-bar { min-height: 30px; display: flex; gap: 8px; align-items: center; }
.station-chip { display: inline-block; background: var(--ink); color: #fff; font-family: var(--title); font-size: 18px; border-radius: 999px; padding: 3px 14px; }
.station-card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; cursor: pointer; animation: pop .4s both; }
.station-card .big-icon { font-size: 110px; line-height: 1; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* 필기 패드 */
.pad-wrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.drawpad { position: relative; width: min(100%, 760px); max-height: 62vh; background: #fff; border: var(--line); border-radius: var(--radius); box-shadow: var(--pop); overflow: hidden; touch-action: none; }
.drawpad-under { position: absolute; inset: 0; pointer-events: none; }
.drawpad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }

/* 누르면 읽어 주는 말풍선 */
.bubble.tap-say { cursor: pointer; padding-right: 54px; }
.bubble.tap-say::after {
  content: ''; position: absolute; right: 14px; top: 50%; width: 30px; height: 30px; transform: translateY(-50%);
  background: no-repeat center / 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233A2A20'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3z'/%3E%3Cpath d='M16 7.5a5 5 0 0 1 0 9' fill='none' stroke='%233A2A20' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  border-radius: 50%; background-color: rgba(255,210,63,.35);
}
.bubble.tap-say:active { transform: scale(.98); }
.keyboard.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.keyboard.scroll svg { min-width: 760px; }
.keyboard .key.sel .wk { fill: #CFE3FF; }
.keyboard .key.sel .bk { fill: #3F7BD9; }
.keyboard .tag text { font-family: var(--title); pointer-events: none; }
.keyboard .tag { pointer-events: none; animation: pop .3s both; }

/* 보상 내역 */
.acc-pill { font-family: var(--title); font-size: 20px; background: #fff; border-radius: 999px; padding: 6px 16px; }
.reward-card { display: flex; flex-direction: column; gap: 8px; min-width: min(100%, 420px); }
.reward-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; font-size: 17px; }
.reward-notes { display: flex; gap: 2px; align-items: center; }
.reward-total { border-top: 2px dashed #E3D3B0; padding-top: 8px; text-align: right; font-size: 18px; }
.wallet .beats { font-family: var(--title); font-size: 15px; color: var(--muted); padding-left: 4px; }

/* 같이 해 보기 */
.guide { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.guide-title { font-family: var(--title); font-size: 20px; color: var(--muted); }
.guide-chips, .song-chords { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 8px; }
.chip { font-family: var(--title); font-size: 17px; background: #fff; border: 2px solid #E3D3B0; border-radius: 999px; padding: 3px 12px; }
.chip.step.now { background: var(--yellow); border-color: #E0A21A; transform: scale(1.12); }
.chip.step.done { background: #D8F5DB; border-color: #6BCB77; }
.chip.now { background: var(--yellow); }
.guide-staff { display: flex; justify-content: center; }
.guide-staff svg { width: min(100%, 560px); height: auto; }
.guide-choices { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.guide-choices .btn.right { background: #D8F5DB; }
.guide-choices .btn.faded { opacity: .35; }
.lead { font-size: 18px; margin: 0; line-height: 1.5; }

/* 실험실 · 반주 놀이 목록 */
.lab-list, .song-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.lab-card, .song-card { background: #fff; border-radius: var(--radius); box-shadow: 0 6px 0 #E3D3B0, 0 10px 24px rgba(30,40,80,.08); padding: 16px; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.lab-icon { font-size: 46px; }
.lab-title, .song-title { font-family: var(--title); font-size: 21px; }
.lab-desc, .song-from { font-size: 14px; color: var(--muted); }
.song-best { font-size: 13px; color: var(--muted); }
.slow { font-size: 14px; display: flex; align-items: center; gap: 4px; }

/* 반주 놀이 */
.play-wrap { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.play-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.play-title { font-family: var(--title); font-size: 24px; }
.play-from { font-size: 13px; color: var(--muted); }
.play-score { font-family: var(--title); font-size: 26px; }
.play-strip { display: flex; gap: 8px; overflow-x: auto; padding: 10px 4px; scroll-snap-type: x mandatory; }
.slot { flex: none; width: 86px; height: 86px; border-radius: 18px; background: #fff; display: grid; place-items: center; font-family: var(--title); font-size: 30px; box-shadow: 0 5px 0 #E3D3B0; transition: transform .15s; }
.slot.now { background: var(--yellow); transform: scale(1.12); box-shadow: 0 5px 0 #E0A21A; }
.slot.ok { background: #D8F5DB; box-shadow: 0 5px 0 #6BCB77; }
.slot.bad, .slot.miss { background: #FFE0E0; box-shadow: 0 5px 0 #F2A0A0; }
.play-guide { text-align: center; font-family: var(--title); font-size: 22px; min-height: 30px; }
.play-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: auto; }
.chord-btn { width: 118px; height: 118px; border: 0; border-radius: 26px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 8px 0 rgba(0,0,0,.2); touch-action: manipulation; }
.chord-btn b { font-family: var(--title); font-size: 40px; }
.chord-btn small { font-size: 14px; opacity: .9; }
.chord-btn.hit { animation: hit .18s; }
@keyframes hit { 50% { transform: translateY(6px) scale(.96); box-shadow: 0 2px 0 rgba(0,0,0,.2); } }
.c-C { background: #FF6B6B; } .c-F { background: #2EC4B6; } .c-G { background: #3FA9F5; }
.c-Am { background: #8B5CF6; } .c-Dm { background: #F28C28; } .c-Em { background: #5B7FDE; }
.chip.c-C, .chip.c-F, .chip.c-G, .chip.c-Am, .chip.c-Dm, .chip.c-Em { color: #fff; border: 0; }

/* 리듬 스타 */
.rhythm-stage { background: linear-gradient(180deg, #1E2A4A 0%, #3B2F6B 100%); min-height: 480px; }
.rhythm-stage canvas { position: absolute; inset: 0; touch-action: none; }
.judge { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-family: var(--title); font-size: 40px; pointer-events: none; text-shadow: 0 3px 12px rgba(0,0,0,.4); opacity: 0; }
.judge.pop { animation: judge .5s ease-out; }
@keyframes judge { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: translateY(-20px); } }
button.song-card { border: 0; cursor: pointer; font: inherit; }

/* 잠깐 복습 */
.help-btn { background: #EAF4FF; }
.refresh-back { position: fixed; inset: 0; background: rgba(30,42,74,.5); z-index: 70; display: grid; place-items: center; padding: 16px; }
.refresh { width: min(100%, 720px); max-height: 92vh; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.refresh-head { display: flex; justify-content: space-between; align-items: center; }
.refresh-body { display: flex; flex-direction: column; gap: 14px; }
.eum-table { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: min(100%, 520px); }
.eum-table div { background: #fff; border-radius: 14px; box-shadow: 0 4px 0 #E3D3B0; display: flex; flex-direction: column; align-items: center; padding: 8px 0; }
.eum-table b { font-family: var(--title); font-size: 24px; }
.eum-table span { font-family: var(--title); font-size: 28px; color: #D94F4F; }
.linkish { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.toggle { display: inline-flex; gap: 6px; align-items: center; background: #fff; border-radius: 12px; padding: 8px 12px; box-shadow: 0 3px 0 #E3D3B0; }

/* 게임 방: 레벨 · 자물쇠 */
.game-tile { position: relative; background: #fff; border: 0; border-radius: var(--radius); box-shadow: 0 6px 0 #E3D3B0, 0 10px 24px rgba(30,40,80,.08); padding: 16px 10px; cursor: pointer; font: inherit; }
.game-tile .lv { position: absolute; top: 10px; left: 12px; background: var(--ink); color: #fff; font-family: var(--title); font-size: 14px; border-radius: 999px; padding: 2px 10px; }
.game-tile .goal { color: #D94F4F; }
.game-tile .stars-row { color: var(--orange); letter-spacing: 1px; font-size: 12px; }
.game-tile.locked { background: #F1ECE2; box-shadow: 0 6px 0 #DDD3C0; cursor: default; opacity: 1; }
.game-tile.locked .em.dim { filter: grayscale(1) opacity(.35); }
.game-tile .lock { position: absolute; top: 10px; right: 12px; font-size: 22px; }
.clear-badge, .unlock-badge { font-family: var(--title); font-size: 22px; background: #FFF3C4; border-radius: 16px; padding: 10px 18px; }
.unlock-badge { background: #D8F5DB; animation: pop .5s both; }
.form-pic { display: flex; gap: 6px; width: min(100%, 520px); }
.form-pic .blk { background: var(--sky); color: #fff; font-family: var(--title); font-size: 28px; border-radius: 12px; text-align: center; padding: 14px 0; }
.form-pic .blk:nth-child(2) { background: var(--coral); }

/* 뿅망치 */
.game-tile .em svg.toy-hammer { width: 64px; height: 64px; }
.mole-stage { cursor: pointer; }
.bop { position: fixed; width: 96px; height: 96px; margin: -78px 0 0 -20px; pointer-events: none; z-index: 45; transform-origin: 60% 90%; animation: bop .5s ease-out forwards; }
.bop svg { width: 100%; height: 100%; }
.bop-word { position: absolute; left: 62px; top: -8px; font-family: var(--title); font-size: 26px; color: #E64B5A; text-shadow: 0 2px 0 #fff; animation: pop .3s both; }
@keyframes bop { 0% { transform: rotate(-35deg); } 35% { transform: rotate(12deg) scaleY(.92); } 55% { transform: rotate(4deg); } 100% { transform: rotate(0); opacity: 0; } }

/* 음표 레이스 */
.race-stage { background: #8FD48A; min-height: 460px; }
.race-stage canvas { position: absolute; inset: 0; touch-action: none; }
.pill.mission { font-family: var(--title); font-size: 17px; }
.race-rank { position: relative; height: 40px; margin: 0 20px; }
.race-rank .track-line { position: absolute; left: 0; right: 0; top: 20px; height: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, #1E2A4A 0 10px, #fff 10px 20px); opacity: .35; }
.race-rank .racer { position: absolute; top: 0; font-size: 24px; transform: translateX(-50%); transition: left .2s linear; }
.race-rank .racer.me { font-size: 30px; top: -4px; z-index: 2; filter: drop-shadow(0 2px 0 #fff); }
.race-rank .flag { position: absolute; right: -18px; top: 2px; font-size: 22px; }
.race-pad { display: flex; gap: 12px; }
.race-pad .rp { flex: 1; min-height: 72px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 6px 0 #D8CDB6; font-size: 34px; touch-action: manipulation; }
.race-pad .rp:active { transform: translateY(5px); box-shadow: 0 1px 0 #D8CDB6; }

/* 워크지 */
.sheet-head { display: flex; flex-direction: column; gap: 6px; }
.sheet-title { font-family: var(--title); font-size: 24px; } .sheet-title small { font-family: var(--body); font-size: 15px; color: var(--muted); }
.sheet-ins { background: #FFF3C4; border-radius: 14px; padding: 10px 50px 10px 14px; font-size: 17px; position: relative; }
.sheet-body { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.palette { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.swatch { display: inline-flex; align-items: center; gap: 6px; border: 0; background: #fff; border-radius: 999px; padding: 8px 14px; font-family: var(--title); font-size: 18px; box-shadow: 0 4px 0 #E3D3B0; cursor: pointer; }
.swatch .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 2px solid rgba(0,0,0,.15); }
.swatch small { font-family: var(--body); font-size: 12px; color: var(--muted); }
.swatch.on { outline: 4px solid var(--ink); }
.swatch.sym { padding: 4px 10px; }
.pixel { display: grid; width: min(100%, 560px); gap: 2px; background: #D8CDB6; padding: 2px; border-radius: 10px; }
.px { aspect-ratio: 1; border: 0; background: #fff; display: grid; place-items: center; padding: 0; cursor: pointer; }
.px svg { width: 82%; height: auto; }
.px.done svg { opacity: .15; }
.pixel.reveal .px.done svg { opacity: 0; transition: opacity .6s; }
.px.blank { background: #fff; }
.sudoku { display: grid; grid-template-columns: repeat(4, 1fr); width: min(100%, 420px); border: 4px solid var(--ink); border-radius: 12px; overflow: hidden; }
.sc { aspect-ratio: 1; border: 1px solid #C9BFA8; background: #fff; display: grid; place-items: center; cursor: pointer; }
.sc.given { background: #F4EEE0; cursor: default; } .sc.br { border-right: 4px solid var(--ink); } .sc.bb { border-bottom: 4px solid var(--ink); }
.sc.sel { background: #FFF3C4; } .sc.ok { background: #D8F5DB; }
.hidden-scene { width: min(100%, 720px); height: auto; border-radius: 18px; box-shadow: 0 6px 0 #E3D3B0; }
.hidden-scene .hid { cursor: pointer; }
.find-list { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.find-row { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: 4px 14px; font-size: 17px; }
.match { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26%; width: min(100%, 640px); }
.match-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mcol { display: flex; flex-direction: column; gap: 12px; }
.mitem { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; background: #fff; border: 0; border-radius: 16px; padding: 8px 12px; min-height: 64px; box-shadow: 0 4px 0 #E3D3B0; font-family: var(--title); font-size: 18px; cursor: pointer; }
.mitem.right { justify-content: flex-start; }
.mitem .mdot { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); flex: none; }
.mitem.sel { outline: 4px solid var(--yellow); } .mitem.done { background: #D8F5DB; }
.maze { display: grid; gap: 4px; width: min(100%, 560px); }
.mz { aspect-ratio: 1; border: 0; background: #fff; border-radius: 12px; box-shadow: 0 3px 0 #E3D3B0; display: grid; place-items: center; cursor: pointer; position: relative; }
.mz.start::after { content: '출발'; position: absolute; top: 2px; left: 6px; font-size: 11px; color: #2E9E47; }
.mz.goal::after { content: '🏁'; position: absolute; top: 0; right: 4px; font-size: 14px; }
.mz.walked { background: #FFE88A; }
.maze-seq { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.maze-seq .chip.done { background: #D8F5DB; }
.math-q { display: flex; align-items: center; gap: 16px; font-family: var(--title); font-size: 40px; }
.ws-group { border-top: 2px dashed #E3D3B0; padding-top: 10px; }
.ws-group-title { font-family: var(--title); font-size: 18px; margin-bottom: 6px; }
.ws-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 4px 0; }
.ws-name { flex: 1; min-width: 220px; }
.ws-row select { border: 2px solid var(--ink); border-radius: 10px; padding: 6px; }
button.ws-card { border: 0; cursor: pointer; font: inherit; }

/* 명예의 전당 */
.boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.board-title { font-family: var(--title); font-size: 22px; margin-bottom: 8px; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 14px; font-size: 18px; }
.rank-row.me { background: #FFF3C4; }
.rank-row .medal { width: 34px; text-align: center; font-size: 24px; font-family: var(--title); }
.avatar.sm { width: 38px; height: 38px; font-size: 22px; }

/* ══════════════ 디자인 2: 세련된 입체감 (검은 외곽선 없이, 같은 색의 짙은 아랫단 + 부드러운 빛) ══════════════ */
:root {
  --ink: #1E2A4A;
  --paper: #FFF9F0;
  --muted: #7C8499;
  --line: 0 solid transparent;
  --lip: #E6E0D4;
  --pop: 0 4px 0 var(--lip), 0 12px 26px rgba(30,42,74,.08);
  --soft: 0 2px 0 rgba(30,42,74,.04), 0 14px 30px rgba(30,42,74,.08);
  --radius: 20px;
  --title: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', sans-serif;
  --body: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', sans-serif;
}
body { background: radial-gradient(1200px 600px at 10% -10%, #FFEFD6 0%, transparent 60%), radial-gradient(900px 500px at 110% 10%, #E9E4FF 0%, transparent 55%), #FFF9F0; background-attachment: fixed; color: var(--ink); letter-spacing: -0.01em; }
h1, h2, h3, .title { font-weight: 800; letter-spacing: -0.03em; }
.btn, .menu-tile, .opt, .bubble, .chip, .swatch, .station-chip, .pill, .mitem, .lab-title, .song-title, .play-title, .board-title, .sheet-title, .game-tile, .slot, .chord-btn b, .rain-key, .ws-group-title, .clear-badge, .unlock-badge, .acc-pill, .who, .wallet .coin, .wallet .ticket, .person .name, .concept-title, .intro-tag, .math-q, .judge, .bop-word { font-weight: 800; }

/* 버튼: 그라데이션 + 같은 색 아랫단 + 윗 반사광 */
.btn { border: 0; color: var(--ink); background: linear-gradient(#FFDB63, #FFC43D); box-shadow: 0 5px 0 #E0A21A, inset 0 2px 0 rgba(255,255,255,.5), 0 12px 22px rgba(224,162,26,.22); border-radius: 18px; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #E0A21A, inset 0 2px 0 rgba(255,255,255,.5); }
.btn.coral { background: linear-gradient(#FF8C8C, #FF6B6B); color: #fff; box-shadow: 0 5px 0 #D94F4F, inset 0 2px 0 rgba(255,255,255,.35), 0 12px 22px rgba(217,79,79,.22); }
.btn.mint { background: linear-gradient(#52D9CB, #2EC4B6); color: #fff; box-shadow: 0 5px 0 #1F9E92, inset 0 2px 0 rgba(255,255,255,.35), 0 12px 22px rgba(31,158,146,.22); }
.btn.sky { background: linear-gradient(#63BBF8, #3FA9F5); color: #fff; box-shadow: 0 5px 0 #2583CC, inset 0 2px 0 rgba(255,255,255,.35); }
.btn.purple { background: linear-gradient(#A480FA, #8B5CF6); color: #fff; box-shadow: 0 5px 0 #6D3FD6, inset 0 2px 0 rgba(255,255,255,.35); }
.btn.white, .btn.small.white { background: #fff; color: var(--ink); box-shadow: 0 4px 0 var(--lip), 0 10px 20px rgba(30,42,74,.06); }
.btn.small { box-shadow: 0 4px 0 #E0A21A, inset 0 2px 0 rgba(255,255,255,.5); }
.tabs .btn.on { background: var(--ink); color: #fff; box-shadow: 0 4px 0 #0E1630; }
.icon-btn { border: 0; background: #fff; box-shadow: 0 4px 0 var(--lip), 0 8px 18px rgba(30,42,74,.06); color: var(--ink); }
.card { border: 0; box-shadow: var(--soft); }
.avatar { border: 0; background: linear-gradient(#fff, #F4F1EA); box-shadow: 0 3px 0 var(--lip); }
.wallet { border: 0; box-shadow: 0 3px 0 var(--lip), 0 8px 18px rgba(30,42,74,.06); }
.pill { border: 0; box-shadow: 0 3px 0 var(--lip); }
.bubble { border: 0; box-shadow: var(--soft); border-radius: 22px; font-size: clamp(19px, 3.4vw, 25px); }
.bubble::before { border-right-color: #fff; left: -14px; }
.intro-tag { border: 0; transform: none; border-radius: 12px; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.opt { border: 0; box-shadow: 0 5px 0 var(--lip), 0 12px 24px rgba(30,42,74,.07); }
.opt:active { box-shadow: 0 1px 0 var(--lip); }
.opt.right { background: linear-gradient(#EFFFF1, #D7F6DD); box-shadow: 0 5px 0 #7BD08A; }
.opt.wrong { background: #FFECEC; box-shadow: 0 5px 0 #F2A6A6; }
.opt .syl { border: 0; box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), inset 0 4px 0 rgba(255,255,255,.35), 0 6px 14px rgba(30,42,74,.15); }
.ball { border: 0; box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), inset 0 4px 0 rgba(255,255,255,.35), 0 6px 14px rgba(30,42,74,.18); }
.progress i { border: 0; background: #ECE7DC; }
.field input, .field select { border: 2px solid #E6E0D4; border-radius: 12px; }
.keyboard .wk { stroke: #D6CFC0; stroke-width: 2; }
.keyboard .bk { fill: #2B2340; stroke: #2B2340; }
.staff-svg line { stroke: #2B2340; }
.menu-tile .em { display: grid; place-items: center; }
.menu-tile .ico { width: 64px; height: 64px; }
.menu-tile.wide .ico { width: 56px; height: 56px; }
.drop-card, .mole-card { border: 0; box-shadow: 0 4px 0 var(--lip); }
.stage { border: 0; box-shadow: var(--soft); }
.rain-key { border: 0; box-shadow: 0 6px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.3); }
.sticker .face { border: 0; box-shadow: inset 0 -4px 0 rgba(0,0,0,.08), 0 4px 10px rgba(30,42,74,.1); }
.confetti { border: 0; }
#toast { background: var(--ink); font-weight: 700; }
.modal-back, .refresh-back { background: rgba(30,42,74,.45); backdrop-filter: blur(3px); }

/* 캐릭터 살아 있게: 숨쉬기 · 눈 깜빡임 · 둥실 */
.char-svg { overflow: visible; }
.char-svg .breath { animation: breath 3.2s ease-in-out infinite; transform-origin: 100px 262px; }
.char-svg .blink { animation: blink 5.2s infinite; }
.char-svg .float { animation: floaty 3.6s ease-in-out infinite; }
@keyframes breath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .975); } }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .char-svg .breath, .char-svg .blink, .char-svg .float, .road-runner, .judge, .bop { animation: none !important; } }
.pixel { width: min(100%, 760px); }

/* 이야기 만화 */
.comic { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.comic-top { display: flex; justify-content: space-between; align-items: center; }
.comic-title { font-weight: 800; font-size: 22px; }
.comic-panel { flex: 1; min-height: 360px; border-radius: 26px; background: linear-gradient(180deg, var(--s1), var(--s2)); box-shadow: var(--soft); display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; gap: 14px; overflow: hidden; position: relative; animation: pop .35s both; }
.comic-panel.grey { filter: saturate(.25) brightness(1.02); }
.comic-panel.dark .comic-text { background: rgba(255,255,255,.92); }
.comic-cast { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4%; }
.cast { width: min(34%, 200px); }
.cast-jam { width: min(40%, 230px); }
.comic-text { background: #fff; border-radius: 18px; padding: 14px 54px 14px 18px; font-size: clamp(18px, 3.2vw, 23px); font-weight: 700; line-height: 1.45; position: relative; }
.comic-dots { display: flex; gap: 8px; justify-content: center; }
.comic-dots i { width: 10px; height: 10px; border-radius: 50%; background: #E6E0D4; }
.comic-dots i.on { background: var(--ink); width: 26px; border-radius: 6px; }

/* 지역 · 단원 길 */
.region { border-radius: 24px; padding: 14px 16px; background: linear-gradient(135deg, var(--s1), var(--s2)); box-shadow: var(--soft); }
.region.dark { color: #fff; }
.region-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.region-name { font-weight: 800; font-size: 22px; }
.region-story { font-weight: 700; font-size: 15px; color: inherit; }
.nodes { display: flex; align-items: center; overflow-x: auto; padding: 6px 2px 4px; gap: 0; }
.node { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; }
.node span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; background: rgba(255,255,255,.7); color: #7C8499; box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.node small { font-size: 11px; font-weight: 700; opacity: .85; white-space: nowrap; max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
.node.done span { background: linear-gradient(#FFE27A, #F2AE1B); color: #fff; box-shadow: 0 4px 0 #C98A0E; }
.node.now span { background: #fff; color: var(--ac); box-shadow: 0 4px 0 rgba(0,0,0,.15), 0 0 0 0 rgba(255,255,255,.9); animation: nodepulse 1.6s ease-in-out infinite; }
@keyframes nodepulse { 50% { box-shadow: 0 4px 0 rgba(0,0,0,.15), 0 0 0 10px rgba(255,255,255,.35); } }
.nodes .link { flex: none; width: 18px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.6); margin-bottom: 18px; }
.cast { width: min(40%, 250px); }
.cast-jam { width: min(46%, 290px); }
.share-box { display: flex; flex-direction: column; gap: 6px; background: #F7F4EE; border-radius: 14px; padding: 10px 12px; margin-top: 8px; font-size: 15px; }

/* 계이름 미로 */
.maze-stage { background: #E3F2D8; display: grid; place-items: center; padding: 10px; min-height: 0; }
.maze-stage svg { width: min(100%, 62vh); height: auto; touch-action: none; }
.seq-pill { display: flex; gap: 4px; align-items: center; }
.seq-pill .sq { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; background: #F1ECE2; color: #9AA3B5; }
.seq-pill .sq.got { background: var(--c); color: #fff; }
.seq-pill .sq.now { outline: 3px solid var(--ink); background: #fff; color: var(--ink); }
.seq-pill .sq.exit { background: none; }
.maze-pad { align-items: center; }
.maze-pad .ud { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.maze-pad .ud .rp { min-height: 56px; }

/* 단계 배지 */
.lv-badge { display: inline-block; vertical-align: middle; filter: drop-shadow(0 3px 4px rgba(30,42,74,.18)); }
.person .lv { display: inline-flex; align-items: center; gap: 2px; border: 0; background: #F4F1EA; font-weight: 700; }
.region-name { display: inline-flex; align-items: center; gap: 6px; }
.promo-badges { display: flex; align-items: center; gap: 12px; }
.promo-badges .arrow { font-size: 28px; color: var(--muted); }
.promo-badges .lv-badge:last-child { animation: pop .6s .3s both; }

/* 공부 친구 고르기 */
.buddy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.buddy-card { border: 0; background: #fff; border-radius: 24px; box-shadow: 0 5px 0 var(--lip), 0 12px 24px rgba(30,42,74,.08); padding: 12px 8px 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font: inherit; transition: transform .15s; }
.buddy-card:hover, .buddy-card:focus { transform: translateY(-3px); }
.buddy-card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--lip); }
.buddy-card.last { outline: 3px solid var(--yellow); }
.buddy-pic { width: 110px; }
.buddy-name { font-weight: 800; font-size: 20px; }
.buddy-desc { font-size: 13px; color: var(--muted); text-align: center; }

/* 계이름 쓰기 · 모두 찾기 */
.wr { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.wr-grid { display: grid; gap: 12px; }
.wr-card { background: #fff; border-radius: 18px; box-shadow: var(--soft); padding: 6px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wr-card.active { outline: 4px solid var(--yellow); }
.wr-card.ok { background: #E9FAEC; }
.wr-card.bad { background: #FFECEC; }
.wr-card.retry { outline: 3px dashed #F2A6A6; }
.wr-staff { width: 100%; cursor: pointer; } .wr-staff svg { width: 100%; height: auto; }
.wr-box { width: 100%; min-height: 64px; display: grid; place-items: center; font-weight: 800; font-size: 40px; position: relative; }
.wr-box .drawpad.mini { width: 100%; max-height: none; border-radius: 14px; box-shadow: inset 0 0 0 2px #E6E0D4; background: repeating-linear-gradient(0deg, #fff 0 38px, #F2EEE6 38px 40px); }
.wr-answer { position: absolute; right: 8px; top: 4px; font-size: 24px; color: #2E9E47; background: #fff; border-radius: 10px; padding: 0 8px; }
.wr-keys { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wr-key { width: 64px; height: 64px; border: 0; border-radius: 18px; color: #fff; font-weight: 800; font-size: 26px; box-shadow: 0 5px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.3); }
.wr-key.del { background: #8A93A8; }
.fa { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.fa-count { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; }
.fa-count .syl { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 22px; }
.fa-staff { width: 100%; overflow-x: auto; } .fa-staff svg { width: 100%; min-width: 560px; height: auto; background: #fff; border-radius: 18px; box-shadow: var(--soft); }
.fa-hit { cursor: pointer; }
.wr-input { width: 100%; max-width: 120px; height: 64px; border: 2px solid #E6E0D4; border-radius: 14px; text-align: center; font-size: 34px; font-weight: 800; font-family: var(--title); color: var(--ink); background: #FFFDF8; }
.wr-input:focus { outline: 4px solid var(--yellow); border-color: transparent; }
.wr-input:disabled { background: transparent; border-color: transparent; }

/* 리듬 치기 */
.rh-staff svg { width: min(100%, 680px); height: auto; background: #fff; border-radius: 18px; box-shadow: var(--soft); }
.rh-box { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
.rh-dots { display: flex; gap: 10px; }
.rh-dots i { width: 36px; height: 36px; border-radius: 50%; background: #ECE7DC; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #9AA3B5; transition: transform .1s; }
.rh-dots i.on { background: var(--coral); color: #fff; transform: scale(1.25); }
.rh-line { position: relative; width: min(100%, 620px); height: 34px; border-radius: 17px; background: #fff; box-shadow: inset 0 0 0 2px #E6E0D4; }
.rh-exp { position: absolute; top: 7px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; border: 3px solid #2EC4B6; }
.rh-exp.miss { border-color: #E4505A; }
.rh-me { position: absolute; top: 3px; width: 4px; height: 28px; margin-left: -2px; border-radius: 2px; background: var(--ink); }
.rh-me.extra { background: #E4505A; }
.rh-tap { width: min(100%, 420px); height: 120px; border: 0; border-radius: 30px; font-size: 44px; font-weight: 800; color: #fff; background: linear-gradient(#FF9A9A, #FF6B6B); box-shadow: 0 8px 0 #D94F4F; touch-action: manipulation; }
.rh-tap:disabled { opacity: .45; }
.rh-tap.hit { animation: hit .15s; }

/* 워크지 새 방식 */
.pz-board { display: grid; gap: 6px; width: min(100%, 560px); background: #E6E0D4; padding: 6px; border-radius: 16px; }
.pz-board.whole { gap: 0; padding: 0; background: none; }
.pz-cell { aspect-ratio: 1.2; border: 0; border-radius: 12px; background: #fff; display: grid; place-items: center; cursor: pointer; overflow: hidden; padding: 0; }
.pz-board.whole .pz-cell { border-radius: 0; }
.pz-cell svg { max-width: 100%; max-height: 100%; }
.pz-cell:not(.done) svg { width: 92%; height: 92%; } /* 음자리표 붙은 오선 조각이 칸 밖으로 잘리지 않게 칸에 맞춰 줄인다 */
.pz-cell.done svg { width: 100%; height: 100%; }
.pz-cell.sel { outline: 4px solid var(--yellow); }
.pz-pieces { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pz-piece { border: 0; background: #fff; border-radius: 14px; box-shadow: 0 4px 0 var(--lip); padding: 6px 12px; display: flex; align-items: center; gap: 8px; font: inherit; font-size: 20px; cursor: pointer; }
.pz-mini { width: 40px; opacity: .5; }
.mem { display: grid; gap: 10px; width: min(100%, 560px); }
.mem-card { aspect-ratio: 1; border: 0; border-radius: 16px; background: linear-gradient(#8B5CF6, #6D3FD6); box-shadow: 0 5px 0 #4F2BA8; color: #fff; font-size: 34px; cursor: pointer; position: relative; font: inherit; }
.mem-card .front { display: none; }
.mem-card.up { background: #fff; box-shadow: 0 5px 0 var(--lip); color: var(--ink); }
.mem-card.up .back { display: none; } .mem-card.up .front { display: grid; place-items: center; font-size: 18px; }
.mem-card.matched { background: #E9FAEC; box-shadow: 0 5px 0 #7BD08A; }
.bingo-call { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 999px; padding: 8px 18px; box-shadow: var(--soft); font-size: 18px; }
.bingo-call b { font-size: 24px; }
.bingo { display: grid; gap: 6px; width: min(100%, 520px); }
.bg-cell { aspect-ratio: 1; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 4px 0 var(--lip); display: grid; place-items: center; cursor: pointer; }
.bg-cell.on { background: #FFF1A8; } .bg-cell.line { background: #FFC43D; }
.shop-order { display: flex; align-items: center; gap: 12px; } .shop-order .who { font-size: 64px; }
.shop-basket { min-height: 90px; width: min(100%, 520px); border-radius: 22px; background: #FFF6E0; box-shadow: inset 0 0 0 3px #F2D3A1; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 8px; }
.shop-basket .sum { font-size: 22px; margin-left: 8px; }
.shop-shelf { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.shop-item { border: 0; background: #fff; border-radius: 16px; box-shadow: 0 5px 0 var(--lip); padding: 6px 12px; display: flex; flex-direction: column; align-items: center; cursor: pointer; font: inherit; }
.ox { display: flex; flex-direction: column; gap: 8px; width: min(100%, 620px); }
.ox-row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 6px 12px; box-shadow: var(--soft); }
.ox-claim { flex: 1; font-weight: 800; font-size: 19px; }
.ox-b { width: 56px; height: 56px; border: 0; border-radius: 50%; background: #F4F1EA; font-size: 28px; font-weight: 800; cursor: pointer; }
.ox-row.done { opacity: .6; } .ox-b.on { background: #D7F6DD; }
.zoom-box { width: 220px; height: 220px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 6px var(--ink), var(--soft); display: grid; place-items: center; }
.zoom-in { transition: transform .5s; display: grid; place-items: center; }
.ws-list { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .ws-list .chip.done { background: #D8F5DB; text-decoration: line-through; }
.wgrid { display: grid; gap: 4px; width: min(100%, 520px); }
.wg { aspect-ratio: 1; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 3px 0 var(--lip); font-size: 22px; font-weight: 800; cursor: pointer; }
.wg.sel { background: #FFE27A; } .wg.found { background: #BDEFC6; }
.esc-story { background: #2B2340; color: #fff; border-radius: 16px; padding: 12px 16px; font-weight: 700; }
.esc-q { font-size: 18px; }
.lock { display: flex; gap: 8px; justify-content: center; }
.lock .dial { width: 48px; height: 58px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 3px var(--ink); display: grid; place-items: center; font-size: 28px; font-weight: 800; }
.lock .dial.on { background: #FFE27A; }
.lock.big .dial { width: 64px; height: 76px; font-size: 36px; }
.lock.open .dial { background: #BDEFC6; transform: rotate(-8deg); transition: transform .4s; }
.teacher-btn { position: relative; }
.dot-badge { margin-left: 6px; background: var(--coral); color: #fff; font-size: 12px; border-radius: 999px; padding: 2px 8px; }

/* ───── 선생님: 알림 · 히스토리 · 총 목차 ───── */
.alert-card { background: #FFF8E6; }
.alert-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px dashed #E8D9B0; padding-top: 8px; }
.alert-row span:first-of-type { flex: 1; min-width: 200px; }
details.history summary, details.toc-level summary { cursor: pointer; padding: 6px 0; }
.history-list { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; padding: 6px 2px; }
.history-day { display: flex; gap: 10px; }
.history-date { flex: 0 0 48px; font-weight: 800; color: var(--coral, #FF6B6B); }
.history-day ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.history-day li.h-session { color: #8a7f75; }
.history-day li.h-teacher { color: #3f6fb5; }
.history-day li.h-unit { font-weight: 700; }
details.toc-level { border-top: 1px solid #eee; padding: 4px 0; }
.toc-unit { margin: 6px 0 10px 8px; padding-left: 10px; border-left: 3px solid #FFE08A; }
.toc-unit-h { font-weight: 800; margin: 4px 0; display: flex; gap: 8px; align-items: center; }
.toc-concept { margin: 4px 0 8px; }
.toc-skills { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: #6b6158; margin-top: 2px; }
.toc-st { display: inline-block; width: 16px; font-weight: 800; }
.toc-st.ok { color: #2BAE66; } .toc-st.on { color: #3f6fb5; } .toc-st.weak { color: #FF6B6B; } .toc-st.todo { color: #c9c0b6; }
/* 워크지 목차 썸네일 (문제지 · 완성) */
.ws-thumbs { display: flex; gap: 6px; flex: 0 0 auto; cursor: zoom-in; min-width: 186px; min-height: 140px; }
.ws-mini { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: #8a7f75; }
.ws-frame { width: 90px; height: 127px; overflow: hidden; border: 1px solid #e3dccf; border-radius: 6px; background: #fff; box-shadow: 0 2px 0 #eee4d4; }
.ws-mini-in { width: 700px; transform: scale(0.1286); transform-origin: 0 0; pointer-events: none; }
.ws-mini-in .page { padding: 20px; }
.ws-row { flex-wrap: wrap; }
/* 화면보다 큰 창: 창 바깥(배경)이 스크롤되게. grid 가운데 정렬은 위아래가 잘려서 버튼이 안 보였다 (폰) */
.modal-back, .refresh-back { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 12px calc(24px + env(safe-area-inset-bottom)); }
.modal-back > *, .refresh-back > * { margin: auto; flex-shrink: 0; }
.modal select, .modal input, .modal .field { max-width: 100%; min-width: 0; }
.gt-list { display: flex; flex-direction: column; gap: 8px; }
.gt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 4px; border-top: 1px dashed #eee4d4; }
.gt-row b { flex: 1; min-width: 120px; }
.gt-em { font-size: 28px; width: 40px; display: inline-flex; justify-content: center; }
.gt-em svg { width: 34px; height: 34px; }
.toc-try { padding: 2px 10px; font-size: 13px; margin-left: 6px; }
.toc-concept[data-try-concept] { cursor: pointer; padding: 8px 10px; border-radius: 12px; -webkit-tap-highlight-color: rgba(255, 196, 61, .3); }
.toc-concept[data-try-concept]:hover, .toc-concept[data-try-concept]:active { background: #FFF6DA; }
.toc-skill { padding: 2px 6px; border-radius: 8px; }
.toc-skill:hover, .toc-skill:active { background: #FFE9A8; }
.toc-concept .toc-try { display: inline-flex; min-height: 0; padding: 3px 10px; font-size: 13px; box-shadow: none; vertical-align: middle; }
.toc-w { cursor: pointer; border: 1px solid #eee4d4; background: #fff; padding: 4px 10px; margin: 2px 0; }
/* 두더지: 문제 카드(오선)를 두더지 머리 위로 크게 — 구멍 흙에 가려 오선 아랫줄이 안 보였다 */
.mole { left: 4%; right: 4%; bottom: 14%; height: 86%; }
.mole-card { order: 0; width: 100%; min-width: 0; padding: 3px; z-index: 3; }
.mole-card svg { max-height: none; width: 100%; }
.mole-face { order: 1; margin-top: -4px; }
.mole { bottom: 24%; height: 76%; }
.mole-card { width: auto; max-width: 100%; }
.mole-card svg { width: auto; max-width: 100%; height: clamp(58px, 11vw, 84px); }
.mole-face { font-size: clamp(26px, 5vw, 40px); }
@media (max-width: 560px) {
  .holes { gap: 8px 10px; }
  .hole { aspect-ratio: 1 / 1.3; }
  .mole-card svg { height: 64px; }
  .hud .pill { white-space: nowrap; }
}

/* ── 미니게임 입체감 (2026-09-27): 두더지 · 음표 비 · 미로 · 레이스 ── */
/* 두더지: 하늘 + 원근 잔디 + 흙 둔덕 구멍(안쪽 그늘) + 그린 두더지 */
.mole-stage { position: relative; background: linear-gradient(180deg, #8FCBF2 0%, #CDEBFF 13%, #A5DC8A 13.2%, #93D07A 40%, #7DBF63 100%); isolation: isolate; }
.mole-stage::before { content: ''; position: absolute; left: -60%; right: -60%; top: 13%; bottom: -20%; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 70px, rgba(255,255,255,0) 70px 140px), repeating-linear-gradient(0deg, rgba(40,90,30,.06) 0 38px, rgba(0,0,0,0) 38px 76px);
  transform: perspective(900px) rotateX(32deg); transform-origin: 50% 100%; }
.mole-sky { position: absolute; left: 0; right: 0; top: 0; height: 13%; z-index: -1; pointer-events: none;
  background: radial-gradient(40px 14px at 18% 55%, #fff 60%, transparent 62%), radial-gradient(30px 12px at 24% 45%, #fff 60%, transparent 62%),
    radial-gradient(46px 15px at 78% 50%, #fff 60%, transparent 62%), radial-gradient(28px 11px at 72% 40%, #fff 60%, transparent 62%),
    radial-gradient(120% 60% at 50% 120%, #B9E3A4 45%, transparent 47%); }
.holes { position: relative; z-index: 1; }
.hole { border-radius: 0; }
.hole.row0 { transform: scale(.88); transform-origin: 50% 100%; }
.hole.row1 { transform: scale(.94); transform-origin: 50% 100%; }
.hole .mound, .hole .dirt { position: absolute; left: 1%; right: 1%; bottom: 2%; height: 28%; border: 0; border-radius: 50%;
  background: radial-gradient(ellipse 42% 36% at 50% 44%, #2A1A10 0 55%, #4B2E1A 80%, rgba(75,46,26,0) 82%),
    radial-gradient(ellipse 80% 90% at 42% 30%, #C79A6E 0%, #9A6A43 55%, #7A4F2E 100%); }
.hole .mound { z-index: 0; box-shadow: 0 5px 0 #6A4226, 0 12px 16px rgba(40,60,20,.22); }
.hole .dirt { z-index: 2; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000, #000), radial-gradient(ellipse 42% 36% at 50% 44%, #000 80%, transparent 82%);
  -webkit-mask-composite: source-out;
  mask-image: radial-gradient(ellipse 42% 36% at 50% 44%, transparent 80%, #000 82%), linear-gradient(to bottom, transparent 44%, #000 44%);
  mask-composite: intersect; }
.hole .dirt::after { content: ''; position: absolute; left: 12%; right: 55%; top: 70%; height: 10%; border-radius: 50%; background: rgba(255,255,255,.18); }
.mole { bottom: 14%; height: 86%; transform: translateY(120%); }
.mole.up { transform: translateY(0); }
.mole .mole-body { display: block; width: min(76%, 110px); height: auto; margin-top: -9px; flex: none; position: relative; z-index: 2; overflow: visible; }
.mole .mole-body .dizzy { display: none; }
.mole.hit .mole-body .eyes { display: none; }
.mole.hit .mole-body .dizzy { display: inline; }
.mole .mole-card { position: relative; z-index: 3; box-shadow: 0 4px 0 #E3D3B0, 0 8px 14px rgba(40,30,10,.18); }
.mole.hit { filter: none; transform-origin: 50% 100%; animation: moleSquash .32s ease-out forwards; }
@keyframes moleSquash { 0% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(10%) scale(1.16, .74); } 55% { transform: translateY(6%) scale(.94, 1.06); } 100% { transform: translateY(30%) scale(1, .92); } }
.mole.shake { animation: moleNo .35s; }
@keyframes moleNo { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(0) rotate(-6deg); } 75% { transform: translateY(0) rotate(6deg); } }
.mole-star { position: fixed; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; z-index: 46; animation: moleStar .65s ease-out forwards; }
.mole-star svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 0 #E0A21A); }
@keyframes moleStar { 0% { transform: translate(0, 0) scale(.4) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); opacity: 0; } }
@media (max-width: 560px) { .mole .mole-body { width: min(80%, 84px); } .hole { aspect-ratio: 1 / 1.42; } }

/* 음표 비: 캔버스 하늘(구름 시차·빗줄기·입체 피아노) 위로 반짝이는 물방울 음표 */
.rain-stage { background: #CFE6FB; }
.rain-stage canvas.rain-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.rain-stage .drop { z-index: 1; }
.rain-ground { display: none; }
.drop-card { position: relative; border-radius: 16px; background: linear-gradient(#FFFFFF, #F1F7FF); box-shadow: 0 5px 0 #B9D3EE, 0 10px 18px rgba(40,90,160,.22), inset 0 2px 0 #fff; padding: 3px 5px; }
.drop-card::before { content: ''; position: absolute; left: 50%; top: -13px; width: 22px; height: 22px; margin-left: -11px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: linear-gradient(135deg, #FFFFFF, #E3EFFD); z-index: -1; }
.drop .ball { position: relative; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.85) 0 10%, rgba(255,255,255,0) 38%), var(--c, #4D96FF) !important;
  box-shadow: inset 0 -7px 0 rgba(0,0,0,.16), inset 0 5px 0 rgba(255,255,255,.3), 0 8px 14px rgba(30,42,74,.2); }
.drop .ball::before { content: ''; position: absolute; left: 50%; top: -12px; width: 26px; height: 26px; margin-left: -13px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--c); z-index: -1; }
.drop.burst, .drop.splash { animation: none; }
.drop.burst > * { animation: rainPop .3s ease-out forwards; }
@keyframes rainPop { 40% { opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.drop.splash > * { animation: rainSplat .4s ease-in forwards; transform-origin: 50% 100%; filter: grayscale(.7); }
@keyframes rainSplat { to { transform: scale(1.4, .3); opacity: 0; } }
.rain-news { position: absolute; left: 50%; top: 18%; transform: translate(-50%, -10px); z-index: 3; opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s;
  background: #fff; border-radius: 18px; padding: 12px 18px; box-shadow: 0 5px 0 #E3D3B0, 0 14px 26px rgba(30,42,74,.18); font-weight: 800; font-size: clamp(16px, 3.6vw, 22px); text-align: center; width: max-content; max-width: 88%; }
.rain-news.show { opacity: 1; transform: translate(-50%, 0); }
/* 누르는 건반 (흰건반 = 계이름 색 띠, 검은건반 = 올림·내림) */
.rain-keys { display: block; }
.rain-piano { position: relative; display: flex; gap: 4px; padding: 8px 8px 12px; border-radius: 20px; background: linear-gradient(#46507A, #1E2A4A); box-shadow: 0 6px 0 #121A33, 0 12px 22px rgba(30,42,74,.22); }
.rain-piano::before { content: ''; position: absolute; left: 14px; right: 14px; top: 3px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.25); }
.rk { border: 0; font: inherit; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.rk.w { flex: 1; min-width: 0; min-height: 84px; border-radius: 4px 4px 12px 12px; background: linear-gradient(#FFFFFF 0%, #F6F2EB 80%, #E6DFD2 100%);
  box-shadow: 0 6px 0 #CFC7B8, inset 0 -3px 0 rgba(0,0,0,.04); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; position: relative; }
.rk.w::before { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; height: 6px; border-radius: 4px; background: var(--c); opacity: .9; }
.rk.w span { display: grid; place-items: center; width: 40px; max-width: 92%; aspect-ratio: 1; border-radius: 50%; color: #fff; font-weight: 800; font-size: clamp(18px, 4.4vw, 26px);
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.6) 0 12%, rgba(255,255,255,0) 40%), var(--c); box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), 0 3px 6px rgba(30,42,74,.15); text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.rk.w[data-k="미"] span { color: #5A4300; text-shadow: none; }
.rk.w.down, .rk.w:active { transform: translateY(5px); box-shadow: 0 1px 0 #CFC7B8; }
.rain-piano.has-black .rk.w { min-height: 100px; }
.rk.b { position: absolute; top: 8px; width: calc((100% - 16px) / 7 * .62); height: 54px; transform: translateX(calc(-50% + 4px)); z-index: 2; border-radius: 3px 3px 9px 9px;
  background: linear-gradient(#5A6080, #1B1F30 85%); box-shadow: 0 5px 0 #0E1220, inset 0 2px 0 rgba(255,255,255,.25); color: #fff; padding: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; }
.rk.b small { font-size: 9px; line-height: 1.15; font-weight: 700; opacity: .85; }
.rk.b.down, .rk.b:active { box-shadow: 0 1px 0 #0E1220, inset 0 2px 0 rgba(255,255,255,.2); margin-top: 4px; }
.rk.shake { animation: shake .35s; }

/* 미로: 벽 높이 · 보석 빛 · 캐릭터가 미끄러지듯 */
.maze-stage { background: radial-gradient(120% 90% at 50% 0%, #EAF6DE, #D5EBC4); }
.maze-stage svg { filter: drop-shadow(0 10px 18px rgba(40,80,30,.18)); }
.mz-me { transition: translate .14s ease-out; }
.mz-me .mz-dizzy { display: none; }
.mz-me.stunned { opacity: .6; }
.mz-me.stunned .mz-dizzy { display: inline; }
.mz-me.bump { animation: mzBump .22s ease-out; }
@keyframes mzBump { 40% { scale: 1.12 .86; } }
.mz-glow { animation: mzGlow 1.6s ease-in-out infinite; }
@keyframes mzGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* 레이스: 캔버스가 다 그린다 */
.race-stage { background: #8CD08A; }
@media (prefers-reduced-motion: reduce) { .mz-glow, .mole-star, .mole.hit { animation: none !important; } }

/* 계이름 코너 새 활동 (건반 잇기 · 틀린 칸 찾기 · 가락 읽기 · 순서 빈칸 · 큰보표) */
.seq-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; }
.seq-row { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 6px; }
.seq-row.wrap { flex-wrap: wrap; }
.seq-row .syl { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 26px; font-weight: 800; box-shadow: inset 0 -4px 0 rgba(0,0,0,.14); }
.seq-row .syl.q { background: #fff; color: #E4505A; border: 3px dashed #E4505A; box-shadow: none; }
.seq-arrow { color: var(--muted); font-size: 20px; }
.seq-dir { text-align: center; color: var(--muted); font-weight: 800; margin-top: 6px; }
.syl-pair { display: flex; gap: 6px; justify-content: center; }
.opt .syl.sm { width: 56px; height: 56px; font-size: 26px; }
.acc-name { font-size: 44px; font-weight: 800; line-height: 1; }
.acc-name small { font-size: .8em; margin-left: 2px; }
.twin-staff { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.twin-staff svg { width: min(46%, 240px); height: auto; min-width: 150px; }
.km { display: flex; flex-direction: column; gap: 14px; align-items: center; flex: 1; }
.km-top { display: flex; gap: 12px; align-items: center; font-weight: 800; }
.km-count { background: var(--yellow, #FFD23F); border-radius: 999px; padding: 4px 12px; }
.km-staff { width: min(100%, 420px); cursor: pointer; } .km-staff svg { width: 100%; height: auto; background: #fff; border-radius: 18px; box-shadow: var(--soft); }
.km [data-kb] { width: min(100%, 560px); }
.ox-top { text-align: center; font-weight: 800; font-size: 20px; }
.ox-card { border: 0; font: inherit; cursor: pointer; position: relative; touch-action: manipulation; }
.ox-syl { font-size: 38px; }
.ox-mark { position: absolute; inset: 0; display: none; place-items: center; font-size: 60px; color: #E4505A; font-weight: 800; }
.ox-card.marked .ox-mark { display: grid; }
.ox-card.marked .ox-syl { opacity: .45; }
.mr-title { text-align: center; font-weight: 800; color: var(--muted); }
.mr-staff { width: 100%; overflow-x: auto; } .mr-staff svg { display: block; margin: 0 auto; width: 100%; min-width: 340px; height: auto; background: #fff; border-radius: 18px; box-shadow: var(--soft); }
.wr-num { display: grid; place-items: center; width: 40px; height: 40px; margin: 4px auto; border-radius: 50%; background: #1E2A4A; color: #fff; font-weight: 800; font-size: 20px; }
.mr-play { text-align: center; font-weight: 800; font-size: 24px; background: #FFF6D6; border-radius: 16px; padding: 8px 12px; }
@media (max-width: 560px) {
  .seq-row { gap: 3px; }
  .seq-row .syl { width: 42px; height: 42px; font-size: 20px; }
  .seq-arrow { font-size: 14px; }
  .opt .syl.sm { width: 44px; height: 44px; font-size: 21px; }
  .acc-name { font-size: 36px; }
  .ox-syl { font-size: 30px; }
}

/* ───── 🎻 악기 놀이터 (screens/instlab.js · ui/instruments.js) ───── */
.il-body { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.il-tabs { display: flex; flex-direction: column; gap: 8px; }
.il-tabrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.il-tabrow b { font-size: 14px; color: var(--muted); min-width: 64px; }
.il-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.il-tile { border: 0; background: #fff; border-radius: 20px; box-shadow: 0 5px 0 var(--lip), 0 12px 24px rgba(30,42,74,.07); padding: 10px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; font-size: 18px; color: var(--ink); }
.il-tile:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--lip); }
.il-tile svg { width: 100%; max-width: 120px; height: auto; aspect-ratio: 1; pointer-events: none; }
.inst { display: flex; flex-direction: column; gap: 14px; }
.inst-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; background: #fff; border-radius: 24px; box-shadow: var(--soft); padding: 14px; }
@media (min-width: 760px) { .inst.play .inst-card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.inst-stage { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #FFF8EA, #FFEFD6 72%); border-radius: 20px; padding: 8px; }
.inst-stage svg { width: min(100%, 440px); height: auto; aspect-ratio: 1; touch-action: none; }
.inst.listen .inst-stage svg { width: min(100%, 240px); }
.inst-svg [data-zone] { cursor: pointer; }
.inst-svg .hit { filter: brightness(1.12) drop-shadow(0 0 5px rgba(255,196,61,.95)); }
.inst-svg line.hit, .inst-svg polyline.hit { stroke: #FF6B6B !important; stroke-width: 3.4; }
.inst-info { display: flex; flex-direction: column; gap: 12px; }
.inst-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inst-title h2 { font-size: clamp(26px, 5vw, 34px); flex: 1; }
.inst-title .icon-btn { width: 48px; height: 48px; font-size: 22px; }
.inst-fam { display: inline-block; font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #EFEAFF; color: #6D3FD6; }
.inst-fam.k { background: #FFE9E6; color: #D94F4F; }
.inst-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.inst-pad { display: flex; flex-wrap: wrap; gap: 8px; }
.inst-key { border: 0; min-width: 58px; min-height: 60px; padding: 6px 10px; border-radius: 16px; color: #fff; font-weight: 800; font-size: 18px; background: var(--k); box-shadow: 0 5px 0 var(--kd), inset 0 2px 0 rgba(255,255,255,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; touch-action: manipulation; transition: transform .06s, box-shadow .06s; }
.inst-key small { font-size: 11px; opacity: .85; font-weight: 700; }
.inst-key.hit, .inst-key:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--kd); }
.inst-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.inst-facts li { background: #FFF9F0; border-radius: 14px; padding: 10px 12px; font-size: 17px; line-height: 1.5; cursor: pointer; }
.inst-facts li::before { content: '♪ '; color: #FF6B6B; font-weight: 800; }
.inst-hint { font-size: 14px; margin: 0; }
.jd { display: flex; flex-direction: column; gap: 12px; }
.jd h3 { font-size: 22px; }
.jd-strokes { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.jd-stroke { border: 0; background: #FFF9F0; border-radius: 16px; box-shadow: 0 4px 0 var(--lip); padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 800; font-size: 19px; color: var(--ink); touch-action: manipulation; }
.jd-stroke small { font-size: 12px; color: var(--muted); font-weight: 600; text-align: center; line-height: 1.3; }
.jd-stroke:active, .jd-stroke.hit { transform: translateY(3px); box-shadow: 0 1px 0 var(--lip); background: #FFF0C9; }
.jd-grid { display: grid; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 2px #E6E0D4; }
.jd-cell { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-left: 1px solid #EFE9DD; font-size: 12px; font-weight: 800; transition: background .08s; min-width: 0; }
.jd-cell.bs { border-left: 3px solid #CFC6B4; }
.jd-cell:first-child { border-left: 0; }
.jd-cell svg { width: min(30px, 92%); height: auto; }
.jd-cell.cont { color: #C9B08A; font-size: 18px; }
.jd-cell.on { background: #FFE27A; }
.jd-cell.ok { background: #D7F6DD; }
.jd-cell.half { background: #FFF1C9; }
.jd-cell.miss { background: #FFE1E1; }
.jd-gueum { font-size: clamp(20px, 4.6vw, 28px); font-weight: 800; text-align: center; line-height: 1.6; }
.jd-gueum span { padding: 0 4px; border-radius: 8px; transition: background .08s; }
.jd-gueum span.on { background: #FFE27A; }
.jd-play { display: flex; flex-direction: column; gap: 12px; }
.jd-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jd-pad { border: 0; height: 130px; border-radius: 28px; font-size: 28px; font-weight: 800; color: #fff; touch-action: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: transform .05s, box-shadow .05s; }
.jd-pad small { font-size: 14px; opacity: .9; }
.jd-pad.L { background: linear-gradient(#63BBF8, #3FA9F5); box-shadow: 0 7px 0 #2583CC; }
.jd-pad.R { background: linear-gradient(#FF8C8C, #FF6B6B); box-shadow: 0 7px 0 #D94F4F; }
.jd-pad.hit { transform: translateY(5px); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.jd-status { text-align: center; font-weight: 800; font-size: 19px; min-height: 30px; }
.jd-count { font-size: 42px; color: #FF6B6B; }
.jd-score { font-size: 40px; color: #FFB400; text-align: center; letter-spacing: 4px; }
.jd-score .muted { color: #E6E0D4; }
.iq { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.iq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(100%, 680px); }
@media (min-width: 760px) { .iq-opts { grid-template-columns: repeat(4, 1fr); } }
@media (orientation: landscape) and (max-height: 560px) { .iq-opts { grid-template-columns: repeat(4, 1fr); } .iq-opt svg { max-width: 92px; } } /* 폰 가로: 4지선다 한 줄 */
.iq-opt { border: 0; background: #fff; border-radius: 20px; box-shadow: 0 5px 0 var(--lip), 0 12px 24px rgba(30,42,74,.07); padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; font-size: 19px; color: var(--ink); }
.iq-opt svg { width: 100%; max-width: 130px; height: auto; aspect-ratio: 1; pointer-events: none; }
.iq-opt.right { background: linear-gradient(#EFFFF1, #D7F6DD); box-shadow: 0 5px 0 #7BD08A; }
.iq-opt.wrong { background: #FFECEC; box-shadow: 0 5px 0 #F2A6A6; }
.iq-opt.playing { outline: 4px solid #FFC43D; outline-offset: 2px; }
.iq-prog { font-weight: 800; color: var(--muted); }
.il .topbar h2 { white-space: nowrap; }
.il-qs { display: none; }
@media (max-width: 480px) { .il-ql { display: none; } .il-qs { display: inline; } .il .topbar .btn.small { padding: 8px 12px; font-size: 16px; } }
.jd-cell span { white-space: nowrap; }
@media (max-width: 520px) { .jd-grid.c12 .jd-cell span { display: none; } .jd-grid.c12 .jd-cell.cont::after { content: '~'; } }
/* 수업 설명 속 악기 체험 · 악기 만나기 */
.intro-inst { display: flex; flex-direction: column; gap: 8px; }
.intro-inst-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.intro-inst-tabs .chip { border: 0; border-radius: 999px; padding: 6px 12px; background: #fff; box-shadow: 0 3px 0 #eadfcd; font-weight: 700; cursor: pointer; }
.intro-inst-tabs .chip.on { background: var(--yellow, #FFC43D); box-shadow: 0 3px 0 #E0A21B; }
.inst-opts { display: grid; grid-template-columns: repeat(2, auto); gap: 12px; justify-content: center; } /* 4지선다: 좁으면 2×2, 넓으면 한 줄 (3+1 안 되게) */
@media (min-width: 620px), (orientation: landscape) and (max-height: 560px) { .inst-opts { grid-template-columns: repeat(4, auto); } }
.inst-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: #fff; border-radius: 20px; padding: 10px 12px; box-shadow: 0 5px 0 #eadfcd; cursor: pointer; font-size: 16px; }
.inst-opt.right { background: #DDF7E6; box-shadow: 0 5px 0 #7FD39A; }
.inst-opt.wrong { background: #FFE4E4; box-shadow: 0 5px 0 #F4A3A3; }
.ox .wr-box { display: flex; justify-content: center; align-items: center; gap: 6px; }
.ox .wr-answer { position: static; font-size: 24px; padding: 0 6px; box-shadow: 0 0 0 2px #2E9E47 inset; }
.ox-grid { grid-template-columns: repeat(4, 1fr); max-width: 640px; width: 100%; align-self: center; }
@media (max-width: 560px) { .ox-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── 게임 손질 (2026-09-27): 음표 비 옥타브 줄 · 마구 누르기 잠금 · 리듬 드럼 켜기 ── */
/* 음표 비 레벨 5~: 옥타브마다 한 줄 (위 줄 = 높은 음), 계이름 위·아래 점 = 옥타브 */
.rain-stage.exact { min-height: 230px; }
.rain-keys.exact { display: block; }
.rain-rows { display: flex; flex-direction: column; gap: 6px; }
.rain-row { display: flex; align-items: stretch; gap: 6px; }
.rain-oct-tag { flex: 0 0 34px; display: grid; place-items: center; border-radius: 12px; background: #EEF1F8; color: #46507A; font-size: 12px; font-weight: 800; line-height: 1.1; text-align: center; word-break: keep-all; padding: 2px; }
.rain-oct-tag.mid { background: #FFF1C9; color: #8A6400; }
.rain-row .rain-piano { flex: 1; min-width: 0; padding: 5px 5px 8px; border-radius: 14px; gap: 3px; box-shadow: 0 4px 0 #121A33; }
.rain-row .rain-piano::before { display: none; }
.rain-row .rk.w { min-height: 48px; padding-bottom: 4px; border-radius: 3px 3px 9px 9px; box-shadow: 0 4px 0 #CFC7B8; }
.rain-row .rk.w::before { top: 4px; height: 4px; left: 4px; right: 4px; }
.rain-row .rain-piano.has-black .rk.w { min-height: 64px; }
.rain-row .rk.b { top: 5px; height: 34px; width: calc((100% - 10px) / 7 * .6); transform: translateX(calc(-50% + 2px)); }
.rain-row .rk.b small { font-size: 8px; }
.rk.w span.oct { position: relative; width: 32px; font-size: clamp(14px, 3.8vw, 20px); }
.rk.w span.oct em { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; font-style: normal; }
.rk.w span.oct em i { width: 5px; height: 5px; border-radius: 50%; background: #2B2340; box-shadow: 0 0 0 1.5px #fff; }
.rk.w span.oct em.up { top: -7px; }
.rk.w span.oct em.dn { bottom: -7px; }
@media (min-width: 700px) { .rain-row .rk.w { min-height: 56px; } .rain-oct-tag { flex-basis: 48px; font-size: 14px; } }

/* 마구 누르기 잠금 (2초) */
.mash-lock { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(70,76,96,.42); backdrop-filter: grayscale(1) blur(1px); -webkit-backdrop-filter: grayscale(1) blur(1px); animation: mashIn .2s ease-out; touch-action: none; }
.mash-lock.bye { opacity: 0; transition: opacity .25s; }
.mash-bubble { display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border-radius: 24px; padding: 18px 22px; max-width: min(86vw, 360px); text-align: center; box-shadow: 0 6px 0 #D9D2C3, 0 18px 36px rgba(30,42,74,.25); font-size: clamp(17px, 4.4vw, 21px); color: #2B2340; }
.mash-turtle { font-size: 52px; line-height: 1; animation: mashWalk 1s ease-in-out infinite; }
.mash-count { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #FFD23F; box-shadow: 0 3px 0 #E3B41E; font-size: 24px; font-weight: 800; }
@keyframes mashIn { from { opacity: 0; } }
@keyframes mashWalk { 50% { transform: translateX(6px) rotate(4deg); } }
/* 리듬 스타 곡 고르기: 드럼 켜기/끄기 */
.chip.drum-toggle { border: 0; cursor: pointer; font: inherit; padding: 6px 12px; border-radius: 999px; background: #F3EEE4; }
.chip.drum-toggle[aria-pressed="true"] { background: var(--yellow, #FFD23F); box-shadow: 0 3px 0 #E3B41E; }
/* 폰 가로: 문제(왼쪽) · 답(오른쪽) 두 칸. 세로로 쌓으면 답이 화면 밖으로 밀렸다 */
@media (orientation: landscape) and (max-height: 520px) {
  .screen { padding-top: 6px; }
  .topbar { min-height: 0; padding: 4px 8px; }
  .station-bar { margin: 0; }
  .q-view { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 18px; row-gap: 8px !important; align-items: start; }
  .q-view > .q-head { grid-column: 1; grid-row: 1; }
  .q-view > .q-tag, .q-view > div:first-child:has(.intro-tag) { grid-column: 1 / -1; }
  .q-view > .q-visual { grid-column: 1; grid-row: 2; max-height: calc(100vh - 170px); overflow: auto; }
  .q-view > [data-ans] { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .q-view > div[style*="flex:1"] { display: none; }
  .q-view > .q-foot { grid-column: 1 / -1; grid-row: 3; }
  .intro-view > .intro-inst { grid-column: 2; grid-row: 1 / span 2; }
  .q-head .char { width: 64px; min-width: 64px; }
  .q-head .bubble { font-size: 17px; padding: 10px 14px; }
  .q-visual svg { max-height: calc(100vh - 190px); width: auto; max-width: 100%; }
}

/* ✏️ 오선에 음표 그리기: 오선을 크게, 줄 간격 넉넉하게 (폰에서도 줄 간격 약 28px).
   패드가 거의 정사각형이라 너비를 화면 높이에 맞춰 줄인다 → 세로로 눌려 그림과 획이 어긋나지 않게. */
.drawpad:has(.sn-staff) { width: min(100%, 560px, 58vh); max-height: none; }
.drawpad:has(.sn-staff) .drawpad-under svg { overflow: visible; }
@media (max-width: 520px) { .drawpad:has(.sn-staff) { width: min(100%, 64vh); } }
@media (orientation: landscape) and (max-height: 520px) {
  .q-view [data-ans] .options { gap: 8px; }
  .q-view [data-ans] .opt { min-height: 0; padding: 6px 10px; }
  .q-view [data-ans] .opt .big { font-size: 30px; line-height: 1.1; }
  .q-view [data-ans] .opt svg { max-height: 70px; width: auto; }
}
/* ───── 🎈 창의 워크지 · 진짜 스도쿠 (content/creative.js · ui/sheetview.js) ───── */
.sudoku { align-self: center; margin: 0 auto; }
.sudoku.n6 { width: min(100%, 460px); border-width: 3px; }
.sudoku .sc svg { max-width: 88%; height: auto; pointer-events: none; }
.sudoku.n6 .sc svg { max-width: 92%; max-height: 92%; }
.sc.peer { background: #FFFBEA; }
.sc.given.peer { background: #F1EAD8; }
.sc.sel { background: #FFF0B3; box-shadow: inset 0 0 0 3px #FFC43D; }
.sc.clash { background: #FFE9DC; box-shadow: inset 0 0 0 2px #F4A582; }
.sc.given.clash { background: #FBE3D2; }
.sc.hinted { background: #E7F0FF; }
.sc.ok { background: #E3F7E6; }
.sd-pal .swatch.sym { flex-direction: column; gap: 0; padding: 4px 8px; border-radius: 14px; min-width: 56px; }
.sd-pal .swatch.sym small { font-size: 11px; line-height: 1.1; }
.sd-pal .sd-tool { font-size: 15px; color: var(--muted); justify-content: center; }
.sd-msg { text-align: center; font-size: 15px; color: var(--muted); min-height: 22px; }
.cr-scale { display: flex; justify-content: center; }
.cr-scale svg { width: min(100%, 420px); height: auto; }
.cr-shelf, .cr-bank { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cr-shelf .shop-item, .cr-bank .shop-item { display: flex; flex-direction: column; align-items: center; }
.cr-recipe { background: linear-gradient(#FFFDF7, #FFF4DE); border-radius: 22px; box-shadow: var(--soft, 0 10px 24px rgba(30,42,74,.08)); padding: 16px 18px; width: min(100%, 440px); margin: 0 auto; display: flex; flex-direction: column; gap: 8px; border: 2px dashed #E9CFA0; }
.cr-rtitle { font-family: var(--title); font-size: 24px; font-weight: 800; }
.cr-rtitle small { font-size: 15px; color: var(--muted); font-weight: 600; margin-left: 6px; }
.cr-rneed { font-size: 16px; color: var(--muted); }
.cr-ing { display: flex; align-items: center; gap: 10px; font-size: 26px; font-family: var(--title); }
.cr-x { color: var(--muted); }
.cr-q { display: inline-grid; place-items: center; min-width: 44px; height: 44px; border-radius: 12px; background: #FFF3B0; color: #FF6B6B; box-shadow: inset 0 0 0 2px #FF9F9F; }
.cr-q.ok { background: #DDF7E6; color: #2E9E47; box-shadow: inset 0 0 0 2px #7FD39A; }
.cr-nums { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; width: min(100%, 440px); margin: 0 auto; }
.cr-nums .btn { padding: 10px 0; font-size: 20px; min-width: 0; }
@media (max-width: 480px) { .cr-nums { grid-template-columns: repeat(4, 1fr); } }
.cr-key { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cr-kchip { border: 0; background: #fff; border-radius: 14px; box-shadow: 0 4px 0 var(--lip, #E6E0D4); padding: 6px 12px; display: flex; gap: 6px; align-items: baseline; font-size: 18px; cursor: pointer; font-family: var(--title); }
.cr-kchip span { color: var(--muted); font-size: 15px; }
.cr-kchip span::after { content: ' ='; }
.cr-kchip b { font-size: 22px; color: var(--ink); }
.cr-words { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.cr-word { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.cr-slot { border: 0; background: #fff; border-radius: 14px; box-shadow: 0 4px 0 var(--lip, #E6E0D4); padding: 4px 6px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; min-width: 58px; }
.cr-slot svg { pointer-events: none; }
.cr-letter { min-width: 34px; height: 34px; border-bottom: 3px solid #C9BFA8; font-family: var(--title); font-size: 26px; line-height: 34px; text-align: center; }
.cr-slot.sel { box-shadow: 0 0 0 3px #FFC43D, 0 4px 0 var(--lip, #E6E0D4); }
.cr-slot.ok { background: #EFFFF1; }
.cr-slot.ok .cr-letter { border-color: #7FD39A; color: #2E9E47; }
.cr-reveal { text-align: center; font-family: var(--title); font-size: 24px; min-height: 30px; }
.cr-reveal b { font-size: 32px; color: #E4508F; }
.cr-dir { text-align: center; font-family: var(--title); font-size: 24px; font-weight: 800; }
.cr-train { display: flex; align-items: flex-end; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 8px; border-bottom: 5px solid #C9BFA8; }
.cr-train.go { animation: crGo 1.2s ease-in forwards; }
@keyframes crGo { to { transform: translateX(40%); opacity: .2; } }
.cr-loco { font-size: 46px; line-height: 1; transform: scaleX(-1); }
.cr-car { border: 0; background: #fff; border-radius: 12px 12px 6px 6px; box-shadow: 0 4px 0 var(--lip, #E6E0D4); min-width: 64px; min-height: 64px; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.cr-car small { font-size: 11px; color: var(--muted); max-width: 90px; text-align: center; }
.cr-car svg { pointer-events: none; }
.cr-car.empty { background: repeating-linear-gradient(45deg, #FBF6EA, #FBF6EA 6px, #F3EAD5 6px, #F3EAD5 12px); box-shadow: inset 0 0 0 2px #E3D3B0; cursor: default; }
.cr-train .cr-car::after { content: ''; position: absolute; bottom: -9px; left: 12px; right: 12px; height: 9px; background: radial-gradient(circle at 6px 4px, #6C7FB8 4px, transparent 4.5px) left / 50% 100% repeat-x; }
.cr-yard { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cr-car.gone { visibility: hidden; }
.cr-spot { display: flex; flex-direction: column; gap: 4px; }
.cr-spot .staff-svg { width: 100%; height: auto; }
.cr-cap { font-family: var(--title); font-size: 17px; color: var(--muted); }
.cr-cap b { color: #E4508F; margin-left: 6px; }
.spot-hit { cursor: pointer; }
.spot-hit:hover { fill: rgba(255,196,61,.12); }
.cr-map { background: radial-gradient(circle at 20% 10%, #FFF7E2, #F6E4BC); border-radius: 22px; padding: 14px 16px; box-shadow: inset 0 0 0 3px #E2C488, 0 10px 24px rgba(30,42,74,.08); display: flex; flex-direction: column; gap: 8px; }
.cr-map-title { font-family: var(--title); font-size: 20px; font-weight: 800; }
.cr-map-title span { color: #C2410C; }
.cr-map-staff { display: flex; justify-content: center; }
.cr-map-staff .staff-svg { width: min(100%, 460px); height: auto; }
.cr-steps { margin: 0; padding-left: 26px; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 18px; font-family: var(--title); }
.cr-steps li { color: var(--muted); }
.cr-steps li.now { color: var(--ink); text-decoration: underline wavy #FFC43D; }
.cr-steps li.done b { color: #2E9E47; margin-left: 4px; }
.cr-found { text-align: center; font-family: var(--title); font-size: 26px; color: #C2410C; animation: pop .4s; }
.cr-sylbtns { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: min(100%, 520px); margin: 0 auto; }
.cr-sylbtns .btn { padding: 12px 0; font-size: 22px; min-width: 0; }
.cr-story { background: #fff; border-radius: 22px; padding: 14px 18px; box-shadow: var(--soft, 0 10px 24px rgba(30,42,74,.08)); }
.cr-story-title { font-family: var(--title); font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.cr-story p { font-size: 19px; line-height: 2; margin: 2px 0; }
.cr-blank { border: 0; min-width: 52px; min-height: 40px; border-radius: 10px; background: #FFF3B0; color: #FF6B6B; font-family: var(--title); font-size: 20px; vertical-align: middle; cursor: pointer; box-shadow: inset 0 0 0 2px #FFD27A; }
.cr-blank.sel { box-shadow: inset 0 0 0 3px #FF9F43; }
.cr-blank.ok { background: #EFFFF1; box-shadow: inset 0 0 0 2px #7FD39A; }
.cr-blank svg { vertical-align: middle; pointer-events: none; }
.cr-scale { width: 100%; }
.cr-scale svg { width: min(100%, 480px); }
.cr-spot, .cr-map, .cr-story, .cr-words, .cr-train, .cr-yard { width: 100%; }

/* ── 게임 레벨 1~30 (2026-09-27): 새 규칙 띠 · 진행 막대 · 특별한 두더지/음표 · 가로 화면 ── */
.game-tile .lv small { font-size: 11px; opacity: .7; margin-left: 1px; }
.lv-track { display: block; width: 80%; height: 6px; border-radius: 3px; background: #F1ECE2; overflow: hidden; }
.lv-track i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #FFD23F, #FF9F43); }
.game-tile .tw-next { color: #7A5CD6; }
.twist-banner { position: absolute; left: 50%; top: 12%; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; gap: 6px; width: max-content; max-width: 90%; pointer-events: none; animation: twIn .35s ease-out; transition: opacity .4s, transform .4s; }
.twist-banner > div { display: flex; flex-direction: column; gap: 2px; background: linear-gradient(135deg, #FFFFFF, #F4EEFF); border-radius: 18px; padding: 10px 16px; box-shadow: 0 5px 0 #D9CCF5, 0 14px 26px rgba(30,42,74,.2); text-align: center; }
.twist-banner b { font-size: clamp(16px, 4vw, 21px); color: #5B3FC4; }
.twist-banner span { font-size: clamp(13px, 3.4vw, 16px); color: #2B2340; }
.twist-banner.bye { opacity: 0; transform: translate(-50%, -10px); }
@keyframes twIn { from { opacity: 0; transform: translate(-50%, 12px) scale(.96); } }
.rotate-hint { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 10px; background: #2B2340; color: #fff; border-radius: 999px; padding: 8px 8px 8px 16px; font-size: 15px; font-weight: 700; box-shadow: 0 8px 20px rgba(30,42,74,.3); animation: twIn .35s ease-out; white-space: nowrap; }
.rotate-hint button { border: 0; background: rgba(255,255,255,.18); color: #fff; width: 28px; height: 28px; border-radius: 50%; font: inherit; cursor: pointer; }
/* 두더지: 헬멧 · 번개 · 황금 · 피버 */
.mole .mole-helmet { position: absolute; left: 50%; top: calc(100% - 94px); transform: translateX(-50%); font-size: 30px; z-index: 4; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.mole.gold .mole-body { filter: sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.15) drop-shadow(0 0 8px #FFD23F); }
.mole.gold .mole-card { box-shadow: 0 0 0 3px #FFD23F, 0 4px 0 #E3B41E; }
.mole.flash .mole-card { box-shadow: 0 0 0 3px #3FA9F5, 0 4px 0 #2B7FC0; }
.fever-tag { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 5; background: #FF6B6B; color: #fff; font-weight: 800; border-radius: 999px; padding: 4px 14px; box-shadow: 0 3px 0 #D94F4F; display: none; }
.fever-tag.show { display: block; animation: mashWalk .6s ease-in-out infinite; }
/* 음표 비: 황금 · 무지개 · 껍데기 · 폭풍 */
.drop.gold .drop-card, .drop.gold .ball { box-shadow: 0 0 0 4px #FFD23F, 0 0 18px #FFD23F; }
.drop.rainbow .ball { background: conic-gradient(#FF6B6B, #FFA41B, #FFD23F, #2EC4B6, #3FA9F5, #8B5CF6, #FF6B6B) !important; }
.drop.shell .drop-card, .drop.shell .ball { box-shadow: 0 0 0 5px #9AA0B3, 0 5px 0 5px #6E7589; }
.drop.shell.cracked .drop-card, .drop.shell.cracked .ball { box-shadow: 0 0 0 3px #C9CDD8; opacity: .92; }
.rain-stage.storm { filter: saturate(.8) brightness(.9); }
/* 미로: 음이 많을 때 작게 */
.seq-pill.many { gap: 2px; flex-wrap: wrap; justify-content: flex-end; max-width: 64vw; }
.seq-pill.many .sq { width: 20px; height: 20px; font-size: 10px; }

/* 폰 가로 화면: 게임 (위 HUD 얇게, 무대는 넓게, 건반·방향키는 옆으로) */
@media (orientation: landscape) and (max-height: 520px) {
  .screen:has(> .stage) { height: 100dvh; max-width: none; padding: 6px max(12px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); gap: 6px; }
  .screen:has(> .stage) > .hud { font-size: 17px; gap: 6px; min-height: 0; }
  .screen:has(> .stage) > .hud .pill { padding: 2px 10px; box-shadow: 0 2px 0 var(--ink); }
  .screen:has(> .stage) > .hud .icon-btn { width: 38px; height: 38px; min-width: 38px; font-size: 18px; }
  .screen:has(> .stage) > .hud [data-target] { min-height: 38px; font-size: 18px !important; }
  .screen > .stage { min-height: 0 !important; flex: 1; }
  /* 음표 비 · 미로: 무대 왼쪽, 건반·방향키 오른쪽 */
  .screen:has(> .rain-stage), .screen:has(> .maze-stage) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .screen:has(> .rain-stage) > .hud, .screen:has(> .maze-stage) > .hud { grid-column: 1 / -1; }
  .screen > .rain-stage, .screen > .maze-stage { grid-column: 1; grid-row: 2; }
  .screen > .rain-keys, .screen > .maze-pad { grid-column: 2; grid-row: 2; align-self: center; }
  .screen:has(> .rain-keys:not(.exact)) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .rain-row .rk.w { min-height: 42px; }
  .rain-row .rain-piano.has-black .rk.w { min-height: 54px; }
  .rain-row .rk.b { height: 28px; }
  .rain-rows { gap: 4px; }
  .maze-stage { padding: 4px; }
  .maze-stage svg { width: auto; height: 100%; max-height: calc(100dvh - 84px); max-width: 100%; }
  .maze-pad .rp { min-height: 64px; }
  /* 두더지: 구멍 판을 화면 높이에 맞춘다 */
  .mole-stage { padding: 4px 12px; }
  .mole-stage .holes { width: min(100%, 520px); gap: 0 22px; }
  .mole-stage .hole { aspect-ratio: 1 / .6; }
  .mole-stage .mole { bottom: 10%; height: 90%; }
  .mole-stage .mole .mole-body { width: 58px; margin-top: -6px; }
  .mole-stage .mole-card svg { height: 38px !important; }
  .mole .mole-helmet { font-size: 22px; top: calc(100% - 62px); }
  /* 레이스: 방향 버튼을 길 위 양쪽 아래로 */
  .screen:has(> .race-stage) { position: relative; }
  .screen:has(> .race-stage) > .race-rank { height: 28px; }
  .screen > .race-pad:not(.maze-pad) { position: absolute; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); justify-content: space-between; pointer-events: none; z-index: 5; }
  .screen > .race-pad:not(.maze-pad) .rp { flex: 0 0 min(22vw, 150px); min-height: 70px; opacity: .88; pointer-events: auto; }
  .screen > .maze-pad { gap: 10px; }
  .twist-banner { top: 6%; }
}
@media (max-width: 480px) { .hud [data-target] { font-size: 17px !important; padding: 4px 10px; min-height: 44px; white-space: nowrap; } .hud { gap: 6px; } }
@media (max-width: 480px) { .hud .pill.mission { font-size: 15px; padding: 4px 10px; } .hud [data-lap], .hud [data-rank] { font-size: 16px; padding: 4px 8px; } }
.race-rank .lap-tag { position: absolute; right: 14px; top: -14px; font-size: 12px; font-weight: 800; background: #fff; border-radius: 999px; padding: 1px 8px; box-shadow: 0 2px 0 #E3D3B0; white-space: nowrap; }
.cr-loco { transform: none; }
@media (max-width: 480px) {
  .cr-train { gap: 4px; padding: 6px 2px; }
  .cr-train .cr-car { min-width: 48px; min-height: 52px; padding: 2px; }
  .cr-train .cr-car svg { max-width: 56px; height: auto; }
  .cr-train .cr-car small { display: none; }
  .cr-loco { font-size: 34px; }
}

/* 🎻 현악기 연주판 (instlab.js stringBoard): 왼손 누르기 · 오른손 활/뜯기 */
.inst.has-sb .inst-card { grid-template-areas: "stage" "info" "board" "more"; } /* 폰: 이름·📖 알아보기를 연주판보다 위로 (2026-09-28) */
.inst.has-sb .inst-more { grid-area: more; display: flex; flex-direction: column; gap: 10px; }
.inst.has-sb .inst-stage { grid-area: stage; }
.inst.has-sb .inst-info { grid-area: info; }
.inst.has-sb .sb { grid-area: board; }
.inst.has-sb .inst-stage svg { width: min(100%, 260px); }
@media (min-width: 760px) {
  .inst.play.has-sb .inst-card { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); grid-template-areas: "stage info" "board board" "more more"; }
  .inst.has-sb .inst-stage svg { width: min(100%, 300px); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .inst.play.has-sb .inst-card { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); grid-template-areas: "board board" "stage info"; padding: 10px; gap: 10px; }
  .inst.has-sb .inst-stage svg { width: min(100%, 200px); }
  .sb-note { min-height: 36px; }
  .sb-note b { font-size: 26px; }
}
.sb { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sb-note { display: flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 4px 14px; border-radius: 16px; background: #F4F1EA; color: var(--muted); transition: background .12s, color .12s; flex-wrap: wrap; }
.sb-note b { font-size: 32px; font-weight: 900; line-height: 1.1; color: inherit; }
.sb-note span { font-size: 18px; font-weight: 800; }
.sb-note small { font-size: 13px; font-weight: 700; opacity: .85; }
.sb-note.on { background: #FFE27A; color: var(--ink); }
.sb-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.sb-wrap { position: relative; width: 100%; }
.sb-svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.sb-svg text { pointer-events: none; font-family: inherit; }
.sb-num { font-size: 12px; font-weight: 800; fill: #9A8E7A; }
.sb-fn { font-size: 12px; font-weight: 900; fill: #5A4300; }
.sb-zl { font-size: 12px; font-weight: 800; fill: #9A8E7A; }
.sb-zl.b { fill: #7A6E5A; }
.sb-open { font-size: 13px; font-weight: 900; fill: #3A2A20; }
.sb-open.e { font-size: 10px; font-weight: 700; fill: #8A7A6A; }
.sb-open.g { font-size: 11px; fill: #5E3A1A; }
.sb-str { transition: stroke .08s; }
.sb-str.on { stroke: #FFD04D; filter: drop-shadow(0 0 4px rgba(255,208,77,.9)); }
.sb-dot circle { transition: fill .1s; }
.sb-dot.stick circle { fill: #FF8C8C; }
.sb-dn { font-size: 13px; font-weight: 900; fill: #fff; }
.sb.nodots .sb-tape { display: none; }
.sb-bowg { pointer-events: none; opacity: .9; }
.sb-hint { font-size: 14px; margin: 0; }
.sb-guide { position: absolute; inset: 0; background: rgba(255,255,255,.35); border-radius: 14px; pointer-events: none; }
.sb-guide .btn { position: absolute; right: 8px; bottom: 6px; pointer-events: auto; }
.sb-hand { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sb-hand i { display: block; width: 30px; height: 30px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 2px 8px rgba(30,42,74,.3); }
.sb-hand.l i { background: #FF6B6B; animation: sbPress 1.2s ease-in-out infinite; }
.sb-hand.r i { background: #3FA9F5; }
.sb-hand.r.bow i { width: 14px; height: 54px; border-radius: 8px; animation: sbBow 1s ease-in-out infinite; }
.sb-hand.r.tap i { animation: sbPress .8s ease-in-out infinite; }
.sb-hand span { background: var(--ink, #1E2A4A); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.sb-hand.r span { background: #2583CC; }
@keyframes sbPress { 0%, 100% { transform: scale(1); } 50% { transform: scale(.72); } }
@keyframes sbBow { 0%, 100% { transform: translateY(-16px); } 50% { transform: translateY(16px); } }
@media (max-width: 480px) { .sb-hand span { font-size: 11px; white-space: normal; max-width: 130px; text-align: center; } .sb-note b { font-size: 28px; } }
@media (max-width: 520px) {
  .sb-tools .btn.small { padding: 6px 10px; font-size: 14px; }
  .sb-note { min-height: 38px; padding: 3px 12px; }
  .sb-hand.r span { max-width: 88px; }
}
.sb[data-kind="hae"] .sb-str.on { stroke: #FF7A2E; }
.play-time { font-size: 15px; } .play-pill { background: #F1EDE6; border-radius: 999px; padding: 8px 16px; font-weight: 700; } .play-pill.on { background: #DDF7E6; }
.hold-row { border-top: 1px dashed #eadfcd; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.hold-row.ok { opacity: .75; }
.hold-row textarea { width: 100%; border-radius: 10px; border: 1px solid #e3dccf; padding: 8px; font: inherit; font-size: 14px; }

/* ── 게임 레벨 31~50 (2026-09-27): 이정표 메달 · 새 규칙 모양 ── */
.game-medals { position: absolute; top: 8px; right: 10px; display: flex; gap: 1px; font-size: 16px; line-height: 1; }
.game-medals .medal { filter: drop-shadow(0 1px 1px rgba(30,42,74,.25)); }
.milestone-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 22px 14px; border-radius: 20px; font-family: var(--title);
  background: linear-gradient(160deg, #FFF8DA, #FFE7A8); box-shadow: 0 6px 0 #E8C25A, 0 14px 28px rgba(30,42,74,.18); animation: msPop .7s cubic-bezier(.2,1.6,.4,1) both; }
.milestone-badge .ms-em { font-size: 56px; line-height: 1.1; animation: msSpin 1.6s ease-in-out .5s both; }
.milestone-badge b { font-size: 22px; color: #6B4A00; }
.milestone-badge small { font-size: 14px; color: #8A6A20; font-family: var(--body, inherit); }
.milestone-badge.m10 { background: linear-gradient(160deg, #FFF1E4, #F6CFA8); box-shadow: 0 6px 0 #C98D5A, 0 14px 28px rgba(30,42,74,.18); }
.milestone-badge.m20 { background: linear-gradient(160deg, #FAFBFF, #D9DFEC); box-shadow: 0 6px 0 #A8B0C4, 0 14px 28px rgba(30,42,74,.18); }
.milestone-badge.m20 b, .milestone-badge.m20 small { color: #3E4A66; }
.milestone-badge.m40 { background: linear-gradient(160deg, #EFFBFF, #BDE8FA); box-shadow: 0 6px 0 #6CB9DB, 0 14px 28px rgba(30,42,74,.18); }
.milestone-badge.m40 b, .milestone-badge.m40 small { color: #1D5A78; }
.milestone-badge.m50 { background: linear-gradient(160deg, #FFF4FE, #E6D4FF); box-shadow: 0 6px 0 #A98BF0, 0 0 0 3px #FFD23F, 0 14px 30px rgba(91,63,196,.3); }
.milestone-badge.m50 b, .milestone-badge.m50 small { color: #4A2F9E; }
@keyframes msPop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes msSpin { 0% { transform: rotateY(0); } 60% { transform: rotateY(720deg) scale(1.15); } 100% { transform: rotateY(720deg); } }
@media (prefers-reduced-motion: reduce) { .milestone-badge, .milestone-badge .ms-em { animation: none; } }

/* 두더지: 박자 · 거울 · 튼튼 · 대왕 */
.mole-stage.beat-pulse .holes { animation: beatPulse .22s ease-out; }
@keyframes beatPulse { 0% { transform: scale(1.012); } 100% { transform: none; } }
.mole.twin .mole-card { box-shadow: 0 0 0 3px #C9B5FF, 0 4px 0 #A98BF0; }
.mole.big .mole-card { box-shadow: 0 0 0 4px #7BD88F, 0 4px 0 #4CB860; }
.mole.boss { transform-origin: 50% 100%; }
.mole.boss.up { transform: translateY(0) scale(1.12); }
.mole.boss .mole-body { filter: saturate(1.3) drop-shadow(0 0 10px #FFD23F); }
.mole.boss .mole-card { box-shadow: 0 0 0 4px #FFD23F, 0 4px 0 #E3B41E, 0 0 18px #FFD23F; }
.mole .mole-hp { position: absolute; right: 2%; top: -6px; z-index: 4; font-size: 12px; letter-spacing: 2px; color: #FF6B6B; background: rgba(255,255,255,.85); border-radius: 999px; padding: 0 6px; pointer-events: none; }

/* 음표 비: 두 음자리표 틀 · 밤비 등불 · 피날레 */
.drop.clef-treble .drop-card { box-shadow: 0 0 0 3px #7CC0F5, 0 5px 0 #4D96D9, 0 10px 18px rgba(40,90,160,.22); }
.drop.clef-bass .drop-card { box-shadow: 0 0 0 3px #FFB36B, 0 5px 0 #E08A3A, 0 10px 18px rgba(160,90,40,.22); }
.rain-stage.night::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 110%, rgba(20,24,60,.25), rgba(12,16,48,.72)); pointer-events: none; z-index: 0; }
.rain-stage.night .drop { z-index: 2; }
.drop.lantern .drop-card, .drop.lantern .ball { filter: drop-shadow(0 0 10px rgba(255,214,120,.95)); }
.drop.lantern::after { content: '🏮'; position: absolute; left: -6px; top: -10px; font-size: 18px; pointer-events: none; }
.rain-stage.finale { animation: finaleFlash 3.2s steps(1) infinite; }
@keyframes finaleFlash { 0%, 100% { filter: none; } 48% { filter: brightness(1.6); } 50% { filter: none; } 52% { filter: brightness(1.35); } }
@media (prefers-reduced-motion: reduce) { .rain-stage.finale { animation: none; } }

/* 레이스 유령 · 미로 순간이동 발판 */
.race-rank .racer.ghost { opacity: .55; font-size: 22px; }
.mz-pad { animation: mzPad 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mzPad { 50% { opacity: .65; transform: scale(1.12); } }

/* ── 게임 레벨 51~100 (2026-09-27 원장 "100레벨까지") ── */
.game-medals.many { font-size: 12px; gap: 0; max-width: 60%; flex-wrap: wrap; justify-content: flex-end; }
.milestone-badge.m60 { background: linear-gradient(160deg, #FFFBE6, #FFEA9E); box-shadow: 0 6px 0 #E3B41E, 0 14px 28px rgba(30,42,74,.18); }
.milestone-badge.m70 { background: linear-gradient(160deg, #EEF3FF, #C9D6FF); box-shadow: 0 6px 0 #7F95E0, 0 14px 28px rgba(30,42,74,.18); }
.milestone-badge.m70 b, .milestone-badge.m70 small { color: #2C3E8C; }
.milestone-badge.m80 { background: linear-gradient(120deg, #FFE3E3, #FFF3C4 25%, #DDF7E3 50%, #DDEEFF 75%, #EDE3FF); box-shadow: 0 6px 0 #B9A6F0, 0 14px 28px rgba(30,42,74,.18); }
.milestone-badge.m80 b, .milestone-badge.m80 small { color: #4A2F9E; }
.milestone-badge.m90 { background: linear-gradient(160deg, #FFF0E6, #FFC7A3); box-shadow: 0 6px 0 #E0763A, 0 14px 28px rgba(160,70,20,.22); }
.milestone-badge.m90 b, .milestone-badge.m90 small { color: #8C3A10; }
.milestone-badge.m100 { background: linear-gradient(160deg, #FFFDF2, #FFE27A); box-shadow: 0 6px 0 #D9A400, 0 0 0 4px #FFD23F, 0 0 34px rgba(255,200,40,.65), 0 14px 30px rgba(30,42,74,.25); }
.milestone-badge.m100 .ms-em { font-size: 72px; }

/* 두더지 51~100: 살짝 · 무지개 · 반대로 · 흔들리는 땅 · 폴짝 */
.mole.peek .mole-card { position: relative; }
.mole.peek .mole-card > * { visibility: hidden; }
.mole.peek .mole-card::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--title); font-size: 34px; color: #8A7FA8; }
.mole.rainbow .mole-card { box-shadow: 0 0 0 4px #FF6B6B, 0 0 0 8px #FFD23F, 0 0 0 12px #3FA9F5; }
.mole.hop .mole-card { box-shadow: 0 0 0 3px #FFB3CF, 0 4px 0 #F08A9E; }
.mole-stage.opp { box-shadow: inset 0 0 0 6px #8B5CF6; }
.mole-stage.quake .holes { animation: moleQuake .5s linear; }
@keyframes moleQuake { 0%, 100% { transform: none; } 20% { transform: translate(-8px, 3px) rotate(-1deg); } 40% { transform: translate(8px, -3px) rotate(1deg); } 60% { transform: translate(-6px, 2px); } 80% { transform: translate(5px, -2px); } }

/* 음표 비 51~100: 얼음 · 왕 · 번개 · 메아리 · 무지개 · 구름 커튼 */
.drop.ice .drop-card, .drop.ice .ball { box-shadow: 0 0 0 4px #A6E3FF, 0 0 16px #7FD1FF; }
.drop.ice::after { content: '❄️'; position: absolute; right: -8px; top: -10px; font-size: 18px; }
.drop.giant .drop-card, .drop.giant .ball { box-shadow: 0 0 0 6px #8B5CF6, 0 6px 0 6px #6A42D6, 0 0 20px rgba(139,92,246,.5); }
.drop.giant::before { content: '👑 ' attr(data-hp); position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font-size: 13px; font-weight: 800; background: #fff; border-radius: 999px; padding: 0 6px; z-index: 2; white-space: nowrap; }
.drop.bolt .drop-card, .drop.bolt .ball { box-shadow: 0 0 0 4px #FFE066, 0 0 14px #FFC21A; }
.drop.bolt::after { content: '⚡'; position: absolute; right: -8px; top: -10px; font-size: 18px; }
.drop.echo .drop-card, .drop.echo .ball { opacity: .88; box-shadow: 0 0 0 3px #C9B5FF; }
.drop.rainbow .drop-card { box-shadow: 0 0 0 4px #FF6B6B, 0 0 0 8px #FFD23F, 0 0 0 12px #3FA9F5; }
.rain-stage.cloudtop::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 25%; z-index: 3; pointer-events: none;
  background: radial-gradient(60px 40px at 10% 100%, #fff 60%, transparent 62%), radial-gradient(80px 50px at 35% 100%, #fff 60%, transparent 62%), radial-gradient(70px 44px at 62% 100%, #fff 60%, transparent 62%), radial-gradient(90px 52px at 90% 100%, #fff 60%, transparent 62%), linear-gradient(#F4F8FF, #F4F8FF) top / 100% 70% no-repeat; }
.rain-stage.frozen { filter: saturate(.8) hue-rotate(-12deg) brightness(1.05); }

/* 레이스: 빠르기말 이름을 크게 오래 */
.race-stage .judge { font-size: clamp(24px, 6.4vw, 40px); }
.race-stage .judge.pop { animation-duration: 1.6s; }

/* 계이름 미로: 읽기 쉬운 HUD · 부딪힘 · 퀴즈 문 */
.mz-hud { flex-wrap: wrap; row-gap: 6px; }
.mz-hud .mz-seq { display: flex; gap: 5px; align-items: center; flex-wrap: nowrap; }
@media (max-width: 480px) { .mz-hud .mz-seq { order: 9; flex-basis: 100%; justify-content: center; } }
.mz-seq .sq { min-width: 36px; height: 36px; padding: 0 4px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 1px; font-family: var(--title); font-size: 19px; font-weight: 800; background: #F1ECE2; color: #4A5270; box-sizing: border-box; }
.mz-seq .sq.got { background: var(--c); color: #fff; opacity: .75; }
.mz-seq .sq.got.mi { color: #5A4300; }
.mz-seq .sq.now { min-width: 46px; height: 46px; border-radius: 23px; font-size: 24px; background: #fff; color: var(--ink, #1E2A4A); box-shadow: 0 0 0 3px var(--c), 0 4px 0 var(--c); }
.mz-seq .sq.done-n { background: #DDF3E2; color: #2E7D4F; font-size: 15px; }
.mz-seq .sq.more { background: none; color: #7A8199; font-size: 15px; min-width: 0; }
.mz-seq .sq.exit { background: none; font-size: 22px; min-width: 30px; }
.mz-seq .sq.exit.now { box-shadow: 0 0 0 3px #FFD23F; background: #FFF6CF; }
.mz-seq .clef { font-family: 'Bravura'; font-style: normal; font-size: 22px; line-height: 1; margin: -6px 2px 0 -2px; color: #1E2A4A; }
.mz-seq .clef.bass { font-size: 18px; margin-top: -14px; }
.mz-seq .clef.tint.treble { color: #2F86D6; }
.mz-seq .clef.tint.bass { color: #E0761E; }
.mz-time.low { background: #FFE1E1; color: #C62828; animation: mashWalk .6s ease-in-out infinite; }
.mz-map { cursor: pointer; border: 0; font: inherit; }
.maze-stage { position: relative; }
.maze-stage svg { display: block; }
.maze-stage.mz-hit::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 6px rgba(230,57,70,.85), inset 0 0 60px rgba(230,57,70,.55); animation: mzHit .7s ease-out forwards; }
@keyframes mzHit { 0% { opacity: 1; } 100% { opacity: 0; } }
.mz-float { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); z-index: 6; font-family: var(--title); font-size: clamp(24px, 6vw, 34px); font-weight: 800; pointer-events: none; text-shadow: 0 2px 0 #fff, 0 0 10px #fff; animation: mzFloat 1.2s ease-out forwards; white-space: nowrap; }
@keyframes mzFloat { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -30px); } }
.mz-me.inv { animation: mzInv .18s steps(2) infinite; }
@keyframes mzInv { 50% { opacity: .25; } }
.mz-jam.smart { filter: drop-shadow(0 0 16px rgba(230,57,70,.9)); }
.twist-banner .mz-shape { background: linear-gradient(135deg, #FFFFFF, #EAF7E2); box-shadow: 0 5px 0 #BFE3AE, 0 14px 26px rgba(30,42,74,.2); }
.twist-banner .mz-shape b { color: #2E7D32; font-size: clamp(18px, 4.6vw, 24px); }
.mz-quiz { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(20,24,48,.45); }
.mzq-card { width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: #fff; border-radius: 24px; padding: 16px 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 8px 0 #D9CCF5, 0 20px 40px rgba(20,24,48,.35); animation: msPop .35s cubic-bezier(.2,1.4,.4,1) both; }
.mzq-title { font-family: var(--title); font-size: 20px; color: #5B3FC4; }
.mzq-ask { font-family: var(--title); font-size: clamp(20px, 5.4vw, 26px); color: #1E2A4A; text-align: center; }
.mzq-vis { display: grid; place-items: center; min-height: 90px; }
.mzq-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; }
.mzq-opt { min-height: 58px; border: 0; border-radius: 16px; background: #F3EEFF; box-shadow: 0 5px 0 #CFC2F2; font-family: var(--title); font-size: clamp(20px, 5.6vw, 26px); font-weight: 800; color: #1E2A4A; cursor: pointer; touch-action: manipulation; }
.mzq-opt:active { transform: translateY(4px); box-shadow: 0 1px 0 #CFC2F2; }
.mzq-opt.ok { background: #D8F5DB; box-shadow: 0 5px 0 #7BD88F; }
.mzq-opt.no { background: #FFE1E1; box-shadow: 0 5px 0 #FF9A9A; }
.mzq-opt:disabled { cursor: default; }
.mzq-msg { min-height: 20px; font-size: 16px; color: #C62828; text-align: center; }
.mzq-later { border: 0; background: none; color: #7A8199; font: inherit; font-size: 15px; padding: 6px 10px; cursor: pointer; }
@media (orientation: landscape) and (max-height: 520px) {
  .mzq-card { width: min(640px, 100%); display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'title title' 'vis ask' 'vis opts' 'msg msg' 'later later'; gap: 6px 16px; padding: 10px 16px; }
  .mzq-title { grid-area: title; } .mzq-ask { grid-area: ask; font-size: 20px; } .mzq-vis { grid-area: vis; min-height: 0; } .mzq-opts { grid-area: opts; } .mzq-msg { grid-area: msg; } .mzq-later { grid-area: later; padding: 2px; }
  .mzq-vis svg { max-height: 120px; width: auto; }
  .mzq-opt { min-height: 48px; }
  .mz-seq .sq { min-width: 30px; height: 30px; font-size: 16px; }
  .mz-seq .sq.now { min-width: 38px; height: 38px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .mz-me.inv, .maze-stage.mz-hit::after, .mz-float, .mole-stage.quake .holes, .mz-time.low { animation: none !important; } }
@media (orientation: landscape) and (max-height: 520px) { .mz-seq .clef { font-size: 17px; } .mz-seq .clef.bass { font-size: 14px; margin-top: -10px; } }

/* ───── 새 게임 넷: 🐍 음계 뱀 · 🎈 조표 풍선 · 🪜 청음 사다리 · 🗝️ 음악가 방탈출 (games/snake·balloon·ladder·escape.js) ───── */
@keyframes gxPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gxShake { 0%,100% { translate: 0; } 25% { translate: -8px 0; } 75% { translate: 8px 0; } }
@keyframes gxSay { 0% { opacity: 0; transform: translate(-50%, 8px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }
@keyframes gxGlow { 50% { box-shadow: 0 0 0 5px #FFD23F, 0 0 18px #FFD23F; } }
.sn-say, .bl-say, .ld-say, .ex-say { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 7; pointer-events: none; opacity: 0; background: rgba(255,255,255,.95); border-radius: 999px; padding: 6px 16px; font-family: var(--title); font-size: clamp(16px, 4vw, 21px); box-shadow: 0 4px 0 var(--lip), 0 10px 20px rgba(30,42,74,.12); white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.sn-say.show, .bl-say.show, .ex-say.show { animation: gxSay 1.8s ease-out both; }

/* 🐍 음계 뱀 */
.sn-stage { background: radial-gradient(120% 90% at 50% 0%, #F2FAEA, #D8EDC8); min-height: 0; touch-action: none; }
.sn-stage canvas { position: absolute; inset: 0; display: block; }
.sn-foods { position: absolute; inset: 0; pointer-events: none; }
.sn-food { position: absolute; z-index: 0; display: grid; place-items: center; font-family: var(--title); font-weight: 800; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.sn-food::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--c) 34%, var(--cd) 100%); box-shadow: 0 3px 0 var(--cd); z-index: -1; }
.sn-food.pop { animation: gxPop .35s ease-out; }
.sn-food.gold::before { background: radial-gradient(circle at 35% 30%, #fff, #FFD23F 45%, #E0A21A); box-shadow: 0 0 12px #FFD23F; }
.sn-foods.blink .sn-food { opacity: 0; transition: opacity .25s; }
.sn-stage.fog .sn-foods { -webkit-mask: radial-gradient(circle var(--fr, 120px) at var(--fx, 50%) var(--fy, 50%), #000 55%, transparent 100%); mask: radial-gradient(circle var(--fr, 120px) at var(--fx, 50%) var(--fy, 50%), #000 55%, transparent 100%); }
.sn-stage.fever { box-shadow: inset 0 0 0 4px #FF9F43, var(--soft); }
.sn-seq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; min-height: 40px; }
.sn-key { font-family: var(--title); font-size: 18px; background: #fff; border-radius: 999px; padding: 3px 12px; box-shadow: 0 3px 0 var(--lip); white-space: nowrap; }
.sn-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.sn-chips .sq { min-width: 32px; height: 32px; padding: 0 4px; border-radius: 16px; display: inline-grid; place-items: center; font-family: var(--title); font-size: 17px; background: #F1ECE2; color: #6A7390; }
.sn-chips .sq.got { background: var(--c); color: #fff; opacity: .8; }
.sn-chips .sq.now { background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--c, #FFD23F); }
.sn-chips .sq.q { box-shadow: 0 0 0 3px #FFD23F; }
.sn-chips.many .sq { min-width: 24px; height: 26px; font-size: 13px; }
.sn-staff { background: #fff; border-radius: 12px; padding: 0 6px; box-shadow: 0 3px 0 var(--lip); display: inline-flex; }
.sn-staff svg { height: 64px; width: auto; }
.sn-hearts { color: #FF5A6A; letter-spacing: 1px; white-space: nowrap; }
.sn-pad { display: flex; gap: 10px; align-items: center; }
.sn-pad .ud { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sn-pad .rp { flex: 1; min-height: 56px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 5px 0 #D8CDB6; font-size: 28px; touch-action: manipulation; }
.sn-pad .rp:active { transform: translateY(4px); box-shadow: 0 1px 0 #D8CDB6; }
.sn-pad .ud .rp { min-height: 48px; }
/* 게임 화면은 한 화면 높이 안에: 무대가 남는 높이를 채우고 조작 버튼이 아래로 밀려나지 않게 */
.screen:has(> .sn-stage), .screen:has(> .bl-stage), .screen:has(> .ld-stage), .screen:has(> .ex-stage) { height: 100dvh; min-height: 0; }
.screen > .sn-stage, .screen > .bl-stage, .screen > .ld-stage, .screen > .ex-stage { flex: 1 1 0; min-height: 0; }

/* 🎈 조표 풍선 */
.bl-prompt { align-self: center; display: inline-flex; align-items: center; gap: 8px; border: 0; background: #fff; border-radius: 999px; padding: 6px 18px; min-height: 52px; font-family: var(--title); font-size: clamp(19px, 5vw, 26px); box-shadow: 0 4px 0 var(--lip), 0 10px 20px rgba(30,42,74,.08); max-width: 100%; cursor: pointer; }
.bl-prompt b { color: #D94F4F; font-weight: 400; }
.bl-prompt svg { height: 44px; width: auto; }
.bl-prompt .bl-ps { display: inline-flex; background: #FFF9EC; border-radius: 10px; }
.bl-prompt.ear { color: #5B3FC4; }
.bl-stage { background: linear-gradient(#BFE3FF, #E8F6FF 70%, #FFF6E0); min-height: 0; touch-action: manipulation; }
.bl-stage.night { background: linear-gradient(#1E2550, #3A3F7A 70%, #5B4A7A); }
.bl-stage.night .bl-b { filter: brightness(.75) saturate(.9); animation: blTwinkle 2.4s ease-in-out infinite; }
@keyframes blTwinkle { 50% { filter: brightness(1.05); } }
.bl-stage.hush { filter: grayscale(.7); }
.bl-stage.flash { animation: blFlash .5s; }
@keyframes blFlash { 30% { filter: brightness(1.8); } }
.bl-stage.fever { box-shadow: inset 0 0 0 4px #FF9F43, var(--soft); }
.bl-layer { position: absolute; inset: 0; z-index: 2; }
.bl-b { position: absolute; left: 0; top: 0; cursor: pointer; will-change: transform; touch-action: manipulation; }
.bl-b .bl-shape { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 8px rgba(30,42,74,.18)); }
.bl-label { position: absolute; left: 12%; right: 12%; top: 13%; height: 56%; display: grid; place-items: center; background: rgba(255,255,255,.92); border-radius: 40%; overflow: hidden; pointer-events: none; }
.bl-label svg { max-width: 100%; max-height: 100%; height: auto; }
.bl-name { font-family: var(--title); font-weight: 400; font-size: 17px; line-height: 1.1; text-align: center; color: var(--ink); padding: 0 2px; word-break: keep-all; }
.bl-name.long { font-size: 15px; }
.bl-syl { font-family: var(--title); font-weight: 400; font-size: 30px; }
.bl-jam { font-size: 34px; }
.bl-b.flip .bl-label { transform: rotate(180deg); }
.bl-b.boss .bl-shape { filter: drop-shadow(0 0 10px #FFD23F); }
.bl-hp { position: absolute; left: 0; right: 0; top: -4px; text-align: center; color: #FF6B6B; font-size: 13px; letter-spacing: 2px; pointer-events: none; }
.bl-b.gold .bl-label { box-shadow: 0 0 0 3px #FFD23F; }
.bl-b.bomb .bl-label { background: rgba(240,240,250,.9); }
.bl-b.shake .bl-shape, .bl-b.shake .bl-label { animation: gxShake .3s; }
.bl-b.hit .bl-shape { animation: gxPop .25s; }
.bl-b.bye { opacity: 0; transition: opacity .3s; }
.bl-b.swap { transition: transform .45s ease-in-out; }
.bl-bang { position: absolute; font-size: 42px; transform: translate(-50%, -50%); animation: gxPop .25s ease-out; pointer-events: none; z-index: 3; }
.bl-clouds { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bl-cloud { position: absolute; left: 0; top: 0; font-size: 120px; opacity: .92; filter: drop-shadow(0 6px 10px rgba(30,42,74,.12)); }

/* 🪜 청음 사다리 */
.ld-stage { background: linear-gradient(#DDF0FF, #F7F1E3); min-height: 0; display: grid; place-items: center; }
.ld-svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.ld-me { transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.ld-me.down { transition-duration: .7s; transition-timing-function: ease-in; }
.ld-stage.fog::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 42%; background: linear-gradient(rgba(245,247,252,.97), rgba(245,247,252,0)); pointer-events: none; }
.ld-say { top: auto; bottom: 10px; transition: opacity .25s; }
.ld-say.show { opacity: 1; }
.ld-say.ok { color: #2E8B4B; } .ld-say.no { color: #D94F4F; }
.ld-panel { display: flex; flex-direction: column; gap: 10px; }
.ld-q { display: flex; align-items: center; gap: 10px; justify-content: center; font-family: var(--title); font-size: clamp(18px, 4.6vw, 23px); }
.ld-q b { font-weight: 400; }
.ld-listen { width: 56px; height: 56px; border: 0; border-radius: 50%; background: #fff; font-size: 26px; box-shadow: 0 4px 0 var(--lip); flex: none; }
.ld-listen.on { animation: gxGlow 1s infinite; }
.ld-left { color: #D94F4F; min-width: 40px; }
.ld-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ld-opts.many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ld-opt { border: 0; border-radius: 18px; background: #fff; min-height: 64px; padding: 6px; box-shadow: 0 5px 0 var(--lip); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--title); font-size: clamp(17px, 4.4vw, 22px); touch-action: manipulation; }
.ld-opt b { font-weight: 400; }
.ld-opt small { font-size: 13px; color: var(--muted); font-family: var(--body); }
.ld-opt:disabled { opacity: .55; }
.ld-opt.right { background: #D7F6DD; opacity: 1; box-shadow: 0 5px 0 #7BD08A; }
.ld-opt.wrong { background: #FFE0E0; opacity: 1; box-shadow: 0 5px 0 #F0A0A0; }
.ld-opt:not(:disabled):active { transform: translateY(4px); box-shadow: 0 1px 0 var(--lip); }

/* 🗝️ 음악가 방탈출 */
.ex-stage { background: linear-gradient(color-mix(in srgb, var(--rc) 22%, #FFF8EC), #FFF8EC 55%, #EFD9B8); min-height: 0; overflow: auto; }
.ex-room { display: flex; flex-direction: column; gap: 12px; padding: 12px; min-height: 100%; }
.ex-wall { display: flex; justify-content: center; }
.ex-frame { display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 16px; padding: 8px 18px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--rc) 55%, #fff), 0 8px 18px rgba(30,42,74,.14); text-align: center; }
.ex-frame .ex-portrait { font-size: 34px; }
.ex-frame b { font-family: var(--title); font-weight: 400; font-size: 21px; }
.ex-frame small { color: var(--muted); font-size: 13px; }
.ex-objs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; flex: 1; align-content: center; }
.ex-obj { position: relative; border: 0; border-radius: 18px; background: #fff; min-height: 104px; box-shadow: 0 5px 0 var(--lip), 0 10px 20px rgba(30,42,74,.07); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; font-family: var(--title); touch-action: manipulation; }
.ex-obj .ex-em { font-size: 40px; line-height: 1.1; }
.ex-obj small { font-size: 14px; color: #5A6380; }
.ex-badge { position: absolute; right: 6px; top: 4px; font-size: 18px; }
.ex-badge i { font-style: normal; font-size: 12px; background: var(--ink); color: #fff; border-radius: 999px; padding: 0 6px; margin-left: 2px; vertical-align: 2px; }
.ex-obj.open { background: #E9FAEC; box-shadow: 0 5px 0 #9BDDA8; }
.ex-obj.wait { opacity: .6; }
.ex-obj.laser { box-shadow: 0 0 0 3px #FF3B5C, 0 0 16px #FF3B5C; }
.ex-obj.door { background: linear-gradient(#F4E3C8, #E2C193); }
.ex-obj.door.ready { animation: gxGlow 1.2s infinite; }
.ex-obj.shake, .ex-card.shake { animation: gxShake .3s; }
.ex-sand { position: absolute; left: 6px; top: 4px; font-size: 16px; }
.ex-panel { position: absolute; inset: 0; z-index: 8; background: rgba(30,42,74,.35); display: grid; place-items: center; padding: 8px; overflow: auto; }
.ex-card { position: relative; width: min(100%, 560px); max-height: 100%; overflow: auto; background: #FFFDF8; border-radius: 22px; padding: 12px; box-shadow: 0 14px 36px rgba(30,42,74,.3); display: flex; flex-direction: column; gap: 10px; animation: gxPop .2s ease-out; }
.ex-head { display: flex; align-items: center; gap: 8px; font-family: var(--title); font-size: 20px; }
.ex-head b { font-weight: 400; } .ex-head .ex-em { font-size: 28px; } .ex-head .grow { flex: 1; }
.ex-head .btn.small { padding: 4px 10px; font-size: 15px; min-height: 36px; white-space: nowrap; flex: none; }
.ex-head b { min-width: 0; font-size: clamp(16px, 4.6vw, 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-head .ex-sandt { flex: none; }
.ex-head .icon-btn { width: 40px; height: 40px; min-width: 40px; }
.ex-hint { background: #FFF3C4; border-radius: 12px; padding: 6px 10px; font-size: 15px; }
.ex-body { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ex-note { margin: 0; text-align: center; font-size: 16px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.ex-note.big { font-family: var(--title); font-size: 21px; }
.ex-dust { position: absolute; inset: 56px 8px 8px; border-radius: 16px; background: repeating-linear-gradient(45deg, #CBB99A 0 6px, #D9C8AA 6px 12px); display: grid; place-items: center; font-family: var(--title); font-size: 22px; color: #5A4A30; touch-action: none; z-index: 2; }
.ex-dials { display: flex; gap: 10px; justify-content: center; }
.ex-dial { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ex-dial small { font-family: var(--title); font-size: 15px; color: var(--muted); }
.ex-dial button { width: 52px; height: 38px; border: 0; border-radius: 12px; background: #F3EEE4; font-size: 18px; touch-action: manipulation; }
.ex-dial b { width: 52px; height: 58px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 3px #E0D6C4; display: grid; place-items: center; font-size: 30px; font-family: var(--title); font-weight: 400; }
.ex-go { min-width: 160px; }
.ex-groups { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ex-group { background: #fff; border-radius: 14px; padding: 4px 8px; box-shadow: 0 3px 0 var(--lip); display: flex; flex-direction: column; align-items: center; }
.ex-group small { font-family: var(--title); color: var(--muted); }
.ex-group > div { display: flex; align-items: flex-end; min-height: 50px; }
.ex-staff { background: #fff; border-radius: 14px; padding: 4px; box-shadow: 0 3px 0 var(--lip); max-width: 100%; overflow-x: auto; }
.ex-staff svg { display: block; max-width: 100%; height: auto; }
.ex-slots { display: flex; gap: 6px; }
.ex-slot { width: 46px; height: 52px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 3px #E0D6C4; display: grid; place-items: center; font-family: var(--title); font-size: 24px; }
.ex-slot.on { box-shadow: inset 0 0 0 3px #FFD23F; }
.ex-keys { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ex-key { min-width: 46px; height: 48px; border: 0; border-radius: 14px; background: var(--c, #fff); color: #fff; font-family: var(--title); font-size: 21px; box-shadow: 0 4px 0 rgba(0,0,0,.18); text-shadow: 0 1px 0 rgba(0,0,0,.25); touch-action: manipulation; }
.ex-key:not([style*="--c"]) { background: #fff; color: var(--ink); text-shadow: none; box-shadow: 0 4px 0 var(--lip); }
.ex-key.back { background: #F3EEE4; color: var(--ink); text-shadow: none; }
.ex-key:active { transform: translateY(3px); }
.ex-cards { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ex-cardbtn { position: relative; min-width: 76px; min-height: 76px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 4px 0 var(--lip); display: grid; place-items: center; font-family: var(--title); font-size: 18px; padding: 6px 10px; }
.ex-cardbtn i { font-style: italic; font-family: Georgia, serif; font-size: 18px; }
.ex-cardbtn.done { background: #E9FAEC; box-shadow: 0 4px 0 #9BDDA8; }
.ex-cardbtn.glow, .ex-sym.glow { animation: gxGlow 1s 3; }
.ex-num { position: absolute; left: 6px; top: 2px; font-size: 15px; color: #2E8B4B; }
.ex-pic { position: relative; width: min(100%, 520px); aspect-ratio: 4 / 3; border-radius: 16px; background: radial-gradient(circle at 30% 20%, #FFF9EC, #F1E3C6); box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--rc) 45%, #fff); overflow: hidden; touch-action: manipulation; }
.ex-pic.rot > .ex-sym { rotate: 180deg; }
.ex-sym { position: absolute; border: 0; background: none; padding: 2px; border-radius: 50%; line-height: 0; }
.ex-sym.found { background: rgba(123,216,143,.45); box-shadow: 0 0 0 3px #4CB860; }
.ex-sym.nope { background: rgba(255,120,120,.35); }
.ex-torch { display: none; }
.ex-pic.dark .ex-torch { display: block; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 70px at var(--tx, 50%) var(--ty, 50%), transparent 60%, rgba(12,14,30,.93) 100%); }
.ex-kb { max-width: 420px; }
.ex-prog { font-size: 22px; letter-spacing: 4px; color: #4CB860; }
.ex-listen { display: flex; gap: 8px; }
.ex-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.ex-optbtn { border: 0; border-radius: 16px; background: #fff; min-height: 56px; font-family: var(--title); font-size: 19px; box-shadow: 0 4px 0 var(--lip); }
.ex-optbtn.nope { background: #FFE0E0; }
.ex-ivs { display: flex; flex-direction: column; gap: 4px; font-size: 18px; }
.ex-ivs small { font-family: var(--title); color: var(--muted); }
.ex-panel.win .ex-card { align-items: center; text-align: center; }
.ex-winem { font-size: 52px; }
.ex-wint { font-family: var(--title); font-weight: 400; font-size: 26px; }
.ex-wall { flex-direction: column; align-items: center; gap: 8px; }
.ex-vault { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; font-family: var(--title); font-size: 15px; background: #fff; border-radius: 999px; padding: 3px 12px; box-shadow: 0 3px 0 var(--lip); }
.ex-vault span { display: inline-flex; align-items: center; gap: 1px; } .ex-vault b { font-weight: 400; font-size: 18px; color: #D94F4F; }
.ex-sandt { font-size: 15px; }

/* 폰 가로: 무대 왼쪽 · 조작 오른쪽 */
@media (orientation: landscape) and (max-height: 520px) {
  .screen:has(> .sn-stage), .screen:has(> .ld-stage) { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .screen:has(> .sn-stage) > .hud, .screen:has(> .ld-stage) > .hud { grid-column: 1 / -1; }
  .screen > .sn-seq { grid-column: 2; grid-row: 2; align-self: start; }
  .screen > .sn-stage { grid-column: 1; grid-row: 2 / 4; min-height: 0 !important; }
  .screen > .sn-pad { grid-column: 2; grid-row: 3; align-self: center; }
  .sn-pad .rp { min-height: 64px; }
  .sn-staff svg { height: 48px; }
  .sn-chips .sq { min-width: 26px; height: 26px; font-size: 14px; }
  .screen > .ld-stage { grid-column: 1; grid-row: 2 / 4; }
  .screen > .ld-panel { grid-column: 2; grid-row: 2 / 4; align-self: center; }
  .ld-opts { grid-template-columns: 1fr; }
  .ld-opts.many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-opt { min-height: 48px; }
  .bl-prompt { min-height: 38px; font-size: 18px; padding: 2px 14px; }
  .bl-prompt svg { height: 32px; }
  .ex-room { padding: 8px; gap: 8px; flex-direction: row; align-items: center; }
  .ex-frame { padding: 6px 10px; }
  .ex-objs { flex: 1; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .ex-obj { min-height: 84px; }
  .ex-obj .ex-em { font-size: 32px; }
  .ex-card { padding: 8px; gap: 6px; }
  .ex-dial b { height: 44px; font-size: 24px; } .ex-dial button { height: 30px; }
  .ex-body { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 14px; }
  .ex-body > :not(.ex-dials):not(.ex-go):not(.ex-listen) { flex-basis: 100%; display: flex; justify-content: center; }
  .ex-body > .ex-staff { flex-basis: auto; } .ex-body > .ex-pic { display: block; flex-basis: auto; }
  .ex-go { min-width: 120px; }
  .ex-pic { width: min(100%, 360px); }
}
@media (max-width: 480px) {
  .ex-objs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ex-obj { min-height: 92px; } .ex-obj .ex-em { font-size: 34px; } .ex-obj small { font-size: 12px; }
  .ex-slot { width: 40px; height: 46px; } .ex-key { min-width: 40px; height: 44px; font-size: 19px; }
  .ex-dial b, .ex-dial button { width: 46px; }
}
@media (prefers-reduced-motion: reduce) { .sn-food.pop, .bl-b.hit .bl-shape, .ex-obj.door.ready, .ld-listen.on, .bl-stage.night .bl-b { animation: none !important; } }

/* ✂️ 만들기(출력용) 워크지: 앱 화면에서는 도안 미리 보기만 */
.craft-note { text-align: center; font-size: 17px; margin: 4px 0 10px; }
.craft-note .chip { margin-right: 6px; }
.craft-prev { max-height: 62vh; overflow: auto; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 var(--lip); padding: 12px; }
.craft-prev .page, .craft-prev .cpage { margin-bottom: 18px; border-bottom: 1px dashed #E3DACB; padding-bottom: 12px; }
.print-preview .cpage { margin-top: 14px; }
/* 그림 누르면 소리 (ui/tapsound.js) */
.snd-tap { cursor: pointer; }
.snd-ear { position: absolute; top: 4px; right: 4px; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 3px 0 #eadfcd; display: grid; place-items: center; font-size: 17px; z-index: 2; cursor: pointer; }
.snd-ear.ping { animation: sndPing .5s ease-out; }
@keyframes sndPing { 0% { transform: scale(1); } 40% { transform: scale(1.3); background: #FFE9A8; } 100% { transform: scale(1); } }
/* 두 소리 비교 (유아): 소리 나는 쪽 그림이 반짝 */
.cmp-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 #eadfcd; transition: transform .15s, box-shadow .15s, background .15s; }
.cmp-card.cmp-on { transform: scale(1.12); background: #FFF3C4; box-shadow: 0 0 0 4px #FFC43D, 0 6px 0 #E0A21B; }

/* ✏️ 가로세로 낱말 퍼즐 · 📐 음표 좌표 퍼즐 (앱에서 풀기) */
.cw-grid { display: grid; gap: 3px; max-width: 460px; margin: 0 auto 12px; }
.cw-cell, .cw-void { aspect-ratio: 1; }
.cw-cell { position: relative; background: #fff; border-radius: 8px; box-shadow: 0 2px 0 var(--lip); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: clamp(14px, 3.4vw, 22px); }
.cw-cell small { position: absolute; top: 2px; left: 4px; font-size: 10px; color: #D94F4F; }
.cw-clues { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .cw-clues { grid-template-columns: 1fr; } }
.cw-clues > div { display: flex; flex-direction: column; gap: 6px; }
.cw-clue { text-align: left; border: 0; background: #fff; border-radius: 12px; padding: 8px 10px; box-shadow: 0 3px 0 var(--lip); font: inherit; color: var(--ink); }
.cw-clue i { font-style: normal; color: #D94F4F; font-weight: 800; margin-right: 4px; }
.cw-clue.done { opacity: .45; text-decoration: line-through; }
.cw-opts { margin-top: 10px; flex-wrap: wrap; }
.co-board { display: grid; gap: 4px; max-width: 620px; margin: 0 auto 12px; }
.co-head, .co-row { display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; background: #FFF6E0; border-radius: 10px; padding: 4px 8px; }
.co-row { font-size: 20px; }
.co-cell { min-height: 64px; border: 2px dashed #CFC6B4; border-radius: 10px; background: #fff; }
.co-cell.done { border-style: solid; border-color: #7BD08A; }
.co-cell svg, .co-piece svg { max-width: 100%; height: auto; }
.co-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.co-piece { border: 0; background: #fff; border-radius: 10px; box-shadow: 0 3px 0 var(--lip); padding: 2px; }
.co-piece.sel { box-shadow: 0 0 0 3px #FFC43D; } .co-piece.done { visibility: hidden; }
.toc-jump { display: flex; flex-wrap: wrap; gap: 6px; } .toc-jump .btn { padding: 4px 12px; font-size: 14px; }
/* 리듬 치기: 방법 안내 · 준비 박 · 지나가는 선 */
.rh-how { margin: 0 0 6px; padding-left: 22px; font-size: 15px; line-height: 1.6; text-align: left; }
.rh-count { min-height: 40px; font-size: 26px; font-weight: 800; text-align: center; color: #8a7f75; }
.rh-count.on { color: #F29A4A; animation: sndPing .35s ease-out; }
.rh-count.go { color: #2BAE66; }
.rh-head { position: absolute; top: 6%; bottom: 6%; width: 4px; border-radius: 2px; background: #FF6B6B; box-shadow: 0 0 8px rgba(255,107,107,.7); pointer-events: none; }
/* 넓은 건반: 옆으로 밀기 + 알림 (자르지 않는다) */
.keyboard.scroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; position: relative; -webkit-mask-image: none; }
.keyboard.scroll.more-right { box-shadow: inset -18px 0 14px -12px rgba(30, 42, 74, .35); }
.keyboard.scroll.more-left { box-shadow: inset 18px 0 14px -12px rgba(30, 42, 74, .35); }
.keyboard.scroll.more-left.more-right { box-shadow: inset 18px 0 14px -12px rgba(30, 42, 74, .35), inset -18px 0 14px -12px rgba(30, 42, 74, .35); }
.kb-nav { display: flex; align-items: center; gap: 8px; margin: 6px auto 0; max-width: 820px; }
.kb-arrow { flex: 0 0 auto; width: 44px; height: 38px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 3px 0 #eadfcd; font-size: 18px; cursor: pointer; }
.kb-arrow:disabled { opacity: .35; }
.kb-map { position: relative; flex: 1; height: 10px; border-radius: 5px; background: #EFE8DC; overflow: hidden; }
.kb-map i { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: #FFC43D; }
.kb-tip { position: absolute; transform: translateY(30px); left: 50%; translate: -50% 0; background: #1E2A4A; color: #fff; font-size: 14px; padding: 4px 10px; border-radius: 10px; white-space: nowrap; animation: kbTip 1.6s ease-in-out infinite; pointer-events: none; }
.kb-nav { position: relative; }
@keyframes kbTip { 0%, 100% { transform: translateY(30px) translateX(0); } 50% { transform: translateY(30px) translateX(6px); } }
.read-toggle { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; }
.read-toggle .chip { border: 0; border-radius: 999px; padding: 6px 16px; background: #fff; box-shadow: 0 3px 0 #eadfcd; font-weight: 700; cursor: pointer; }
.read-toggle .chip.on { background: var(--yellow, #FFC43D); box-shadow: 0 3px 0 #E0A21B; }
/* 듣기 문제 예비박 표시 */
.q-visual { position: relative; }
.countin-chip { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); background: #1E2A4A; color: #fff; font-weight: 800; font-size: 20px; padding: 6px 16px; border-radius: 999px; box-shadow: 0 4px 0 rgba(0,0,0,.15); animation: sndPing .3s ease-out; z-index: 3; pointer-events: none; }
/* 보기 번호 배지 + 차례로 들려주는 문제에서 지금 나오는 번호 */
.opt { position: relative; }
.opt-no { position: absolute; top: 6px; left: 7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #EEF1F8; color: #5A6480; font: 800 12px/20px Pretendard Variable, Pretendard, sans-serif; text-align: center; pointer-events: none; }
.opt.playing { outline: 4px solid #4D96FF; outline-offset: 2px; transform: translateY(-3px); }
.opt.playing .opt-no { background: #4D96FF; color: #fff; }
.part-chip { background: #4D96FF; }

/* 계이름: 옥타브까지 구분한 이름 (낮은 파 (F3)) · 주문 외우기 */
.oct-tag { margin: 8px auto 0; width: fit-content; max-width: 100%; padding: 6px 14px; border-radius: 999px; background: #EAF6EC; color: #1F7A3A; font-weight: 800; font-size: 17px; text-align: center; animation: octPop .35s ease-out; }
@keyframes octPop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.wr-oct { display: block; text-align: center; font-size: 12px; font-weight: 700; color: #1F7A3A; margin-top: 2px; }
.ch-staff { display: block; width: 100%; text-align: center; }
.ch-staff svg { max-width: 100%; height: auto; }
.ch-staff.sm { width: auto; }
.ch-chips { display: block; width: 100%; margin-top: 6px; }
.ch-vis { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 4px; }

/* 📘 개념 책 (2026-09-27) */
.cb { display: flex; flex-direction: column; gap: 10px; padding-bottom: 30px; }
.cb-sec { background: #fff; border-radius: 16px; padding: 10px 12px; box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.cb-sec summary { cursor: pointer; font-size: 20px; padding: 4px 2px; }
.cb-unit { font-size: 14px; color: #8a7a6a; margin: 10px 2px 4px; }
.cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cb-item { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; border: 2px solid #F1E3D3; background: #FFFBF5; font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.cb-item.lock { opacity: .45; cursor: default; background: #f5f5f5; }
.cb-ic { font-size: 22px; }
.cbook-modal { max-width: 620px; max-height: 88vh; overflow: auto; text-align: center; }
.cbook-vis { margin-top: 10px; overflow-x: auto; }

/* 게임 레벨 고르기 (2026-09-27) */
.lvpick { max-width: 520px; max-height: 88vh; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; overflow-y: auto; max-height: 46vh; padding: 4px; }
.lv-btn { position: relative; height: 48px; border-radius: 12px; border: 2px solid #F1E3D3; background: #FFFBF5; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.lv-btn.done { background: #FFF4C9; border-color: #F2D46B; }
.lv-btn.now { background: var(--coral, #E86A5A); border-color: var(--coral, #E86A5A); color: #fff; }
.lv-btn i { position: absolute; top: 1px; right: 4px; font-size: 11px; font-style: normal; color: #E0A800; }
.lv-btn.now i { color: #fff; }
.lvpick-h { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; }
.lvpick-em { display: inline-flex; width: 40px; height: 40px; font-size: 34px; line-height: 1; align-items: center; justify-content: center; }
.lvpick-em svg { width: 40px; height: 40px; }
.lvpick > * { flex-shrink: 0; }
.lvpick .lv-grid { flex-shrink: 1; min-height: 60px; }
.lv-start { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 50; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 30px; border-radius: 22px; background: rgba(255,255,255,.95); box-shadow: 0 8px 24px rgba(0,0,0,.18); animation: lvStart 2.6s ease forwards; }
.lv-start b { font-family: var(--title); font-size: 44px; color: var(--coral, #E86A5A); }
.lv-start small { font-size: 16px; color: #6b5a4a; }
@keyframes lvStart { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 20%, 80% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { opacity: 0; } }
.lv-corner { position: absolute; left: 8px; top: 8px; z-index: 40; pointer-events: none; padding: 4px 12px; border-radius: 999px; background: #FFE9A8; font-weight: 800; font-size: 16px; color: #7A4A00; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
/* 게임 중 레벨: 점수 줄의 ← 옆 (screens/games.js) */
.lv-pill { background: #FFE9A8 !important; color: #7A4A00 !important; font-weight: 800; white-space: nowrap; }

/* ⭐ 별 상점 · 🔴 도장 · 꾸민 캐릭터 (2026-09-27) */
.av { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--av); height: var(--av); border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,.06); }
.av-main { font-size: calc(var(--av) * .62); line-height: 1; }
.av-hat { position: absolute; top: calc(var(--av) * -.2); left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: calc(var(--av) * .42); line-height: 1; }
.av-face { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); font-size: calc(var(--av) * .36); line-height: 1; }
.av-hand { position: absolute; bottom: -4%; left: -10%; font-size: calc(var(--av) * .34); line-height: 1; transform: rotate(-12deg); }
.av-pet { position: absolute; bottom: -6%; right: -12%; font-size: calc(var(--av) * .36); line-height: 1; }
.shop-me { display: flex; align-items: center; gap: 22px; padding: 14px 8px 18px 18px; }
.shop-slot h4 { margin: 12px 4px 6px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.shop-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 16px; border: 2px solid #F1E3D3; background: #fff; font: inherit; cursor: pointer; }
.shop-item .si-em { font-size: 36px; width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.shop-item .si-name { font-size: 14px; }
.shop-item .si-price { font-size: 13px; font-weight: 700; color: #C98A00; }
.shop-item.own .si-price { color: #1FA99C; }
.shop-item.on { border-color: #1FA99C; background: #EFFBF8; }
.shop-item.dim { opacity: .5; }
.shop-closed { text-align: center; font-size: 18px; line-height: 1.7; }
.stamp-card h3 { margin: 0 0 8px; }
.stamp-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 460px; }
.stamp { aspect-ratio: 1; border-radius: 50%; border: 2px dashed #E7C9C0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #C9AFA6; }
.stamp.on { border: 0; background: radial-gradient(circle at 40% 35%, #F46B5C, #C8352A); color: #fff; font-weight: 800; font-size: 13px; transform: rotate(-12deg); box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.stamp-rules { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.stamp-rules .ok { color: #1FA99C; font-weight: 700; }
.stamp-pill { background: #FFE8E4; color: #C8352A; font-weight: 800; padding: 6px 14px; border-radius: 999px; }
.locked-home { gap: 14px; }
.menu-tile.gated { position: relative; opacity: .5; filter: grayscale(.5); }
.menu-tile .gate-lock { position: absolute; top: 6px; right: 8px; font-size: 18px; }

/* 새 캐릭터 · 상점 2 (2026-09-27, ui/chibi.js) */
.av2 { display: inline-flex; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.av2 svg { width: 100%; height: 100%; }
.em-av .av2 { border-radius: 14px; }
.person .av2 { border-radius: 18px; }
.shop2 .shop-top { display: flex; align-items: center; gap: 18px; padding: 8px 4px 12px; }
.shop-stage { position: relative; width: 200px; height: 200px; flex-shrink: 0; border-radius: 26px; overflow: hidden; box-shadow: 0 6px 18px rgba(80,50,90,.18); }
.shop-stage.trying { outline: 3px dashed #FF8FB1; outline-offset: 3px; }
.try-tag { position: absolute; top: 8px; left: 8px; background: #FF5C8A; color: #fff; font-weight: 800; font-size: 13px; padding: 2px 10px; border-radius: 999px; }
.shop-side { display: flex; flex-direction: column; gap: 4px; }
.new-note { color: #D8457A; font-weight: 800; }
.shop2 .tabs { display: flex; gap: 6px; margin: 4px 0 10px; flex-wrap: wrap; }
.shop2 .tab { border: 0; font: inherit; font-weight: 700; padding: 8px 16px; border-radius: 999px; background: #F3EEE4; cursor: pointer; }
.shop2 .tab.on { background: var(--yellow, #FFD23F); box-shadow: 0 3px 0 #E3B41E; }
.slot-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.slot-chips .chip { border: 0; font: inherit; padding: 6px 14px; border-radius: 999px; background: #F3EEE4; cursor: pointer; }
.slot-chips .chip.on { background: #7C5CFF; color: #fff; }
.shop2 .shop-item { position: relative; }
.shop2 .shop-item.sel { border-color: #FF5C8A; box-shadow: 0 0 0 3px #FFD0DE; }
.si-ic svg { display: block; }
.si-new { position: absolute; top: 4px; right: 4px; background: #FF5C8A; color: #fff; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 999px; }
.shop-body { padding-bottom: 90px; }
.try-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; background: #fff; padding: 10px 14px; border-radius: 20px; box-shadow: 0 8px 26px rgba(0,0,0,.2); max-width: calc(100vw - 24px); flex-wrap: wrap; justify-content: center; }
.try-bar span { font-weight: 700; }
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.char-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 18px; border: 2px solid #F1E3D3; background: #fff; font: inherit; cursor: pointer; }
.char-card svg { border-radius: 14px; }
.char-card.sel { border-color: #FF5C8A; box-shadow: 0 0 0 3px #FFD0DE; }
.char-card.mine span::after { content: ' ✓'; color: #1FA99C; }
.char-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: 14px; border: 2px solid transparent; background: #fff; cursor: pointer; font: inherit; }
.char-pick.on { border-color: #FFB020; background: #FFF6D8; }
.char-pick small { font-size: 12px; }
@media (max-width: 520px) { .shop-stage { width: 150px; height: 150px; } .shop-stage svg { width: 150px; height: 150px; } }

/* 🙋 로그인 허락 알림 (선생님 화면) */
.login-asks { position: fixed; right: 12px; bottom: 12px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.login-ask { display: flex; align-items: center; gap: 8px; background: #fff; padding: 10px 12px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.2); animation: lvStart 0s; font-size: 16px; }

/* 🔍 확대·축소 단추 (ui/zoom.js) */
.zoom-bar { position: fixed; left: 10px; bottom: 10px; z-index: 40; display: flex; align-items: center; background: rgba(255,255,255,.92); border-radius: 999px; box-shadow: 0 3px 12px rgba(0,0,0,.15); overflow: hidden; }
.zoom-bar button { border: 0; background: none; font: inherit; font-weight: 800; font-size: 18px; min-width: 38px; height: 36px; cursor: pointer; color: #5B4A3A; }
.zoom-bar .zlab { font-size: 13px; min-width: 52px; border-left: 1px solid #eee; border-right: 1px solid #eee; }
@media (min-width: 900px) and (pointer: fine) { .zoom-bar { opacity: .55; } .zoom-bar:hover { opacity: 1; } }
.table .grp-row td { background: #FFF6E0; font-size: 15px; padding-top: 10px; }
.chip.on { background: var(--yellow, #FFD23F); }

/* 🧩 뮤직퍼즐 (screens/musicpuzzle.js · ui/puzzleview.js) — 모든 클래스는 mp- 로 시작 */
.mp-body { display: flex; flex-direction: column; gap: 12px; }
.mp-setup { display: flex; flex-direction: column; gap: 10px; }
.mp-h { font-size: 17px; margin: 6px 0 0; font-weight: 800; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-chip { border: 0; font: inherit; background: #F4EFE6; color: #1E2A4A; border-radius: 14px; padding: 8px 12px; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; box-shadow: 0 3px 0 #E4DCCD; font-size: 15px; text-align: left; }
.mp-chip b { font-size: 16px; }
.mp-chip small { font-size: 12px; color: #7C8499; }
.mp-chip.small { flex-direction: row; align-items: center; }
.mp-chip.on { background: #FFD23F; box-shadow: 0 3px 0 #E3B41E; }
.mp-chip.on small { color: #6B5200; }
.mp-desc, .mp-tip { margin: 0; font-size: 14px; color: #6B7390; }
.mp-picks summary { cursor: pointer; font-size: 15px; color: #5B4A3A; padding: 4px 0; }
.mp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 8px; }
.mp-thumb { border: 2px solid transparent; background: #fff; border-radius: 14px; padding: 4px; font: inherit; font-size: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 2px 0 #E6E0D4; }
.mp-thumb svg { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; display: block; }
.mp-thumb.on { border-color: #FF5C8A; box-shadow: 0 0 0 3px #FFD0DE; }
.mp-go { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.mp-bar, .mp-more { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-bar .grow { flex: 1; }

.mp-play { display: flex; flex-direction: column; gap: 10px; position: relative; }
.mp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mp-head .grow { flex: 1; }
.mp-badge { background: #EEE8FF; color: #5B3FD9; font-weight: 800; border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.mp-prog { font-weight: 800; font-size: 16px; color: #5B4A3A; }
.mp-head [data-check] { opacity: .75; }
.mp-head [data-check].ready { opacity: 1; animation: mpPulse 1.4s ease-in-out infinite; }
@keyframes mpPulse { 50% { transform: scale(1.06); } }
.mp-zhost { overflow: auto; -webkit-overflow-scrolling: touch; padding: 2px; }
.mp-board { position: relative; display: grid; grid-template-columns: repeat(var(--c), 1fr); grid-template-rows: repeat(var(--r), 1fr); gap: 5px;
  width: min(100%, 780px, calc(var(--c) * 170px)); min-width: calc(var(--c) * 98px); aspect-ratio: 1; margin: 0 auto; }
.mp-cell { position: relative; container-type: size; background: #fff; border-radius: 12px; box-shadow: 0 2px 0 #E6E0D4, 0 6px 14px rgba(30,42,74,.06); overflow: hidden; cursor: pointer; transition: border-radius .6s, box-shadow .6s; }
.mp-cell.focus { box-shadow: 0 0 0 3px #7C5CFF, 0 6px 14px rgba(30,42,74,.1); }
.mp-board.picking .mp-cell:not(.filled) { box-shadow: 0 0 0 2px #FFD23F, 0 6px 14px rgba(30,42,74,.06); }
.mp-cell.over { box-shadow: 0 0 0 4px #2EC4B6 !important; }
.mp-no { position: absolute; left: 5px; top: 3px; font-weight: 800; font-size: clamp(10px, 10cqmin, 15px); color: #7C5CFF; z-index: 1; }
.mp-qwrap { position: absolute; inset: 0; padding: 12% 5% 5%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; text-align: center; }
.mp-qt { font-size: clamp(10px, 9cqmin, 18px); font-weight: 700; line-height: 1.2; word-break: keep-all; color: #1E2A4A; }
.mp-qv { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 60cqh; min-height: 0; }
.mp-qv svg { max-width: 92cqw; max-height: 58cqh; width: auto; height: auto; display: block; }
.mp-qv .staff-svg { width: 92cqw; height: auto; max-height: 58cqh; }
.mp-seq { display: flex; gap: 2cqw; }
.mp-seq b { border: 2px solid #1E2A4A; border-radius: 8px; padding: 0 2.6cqw; font-size: clamp(11px, 12cqmin, 22px); background: #FFFDF6; }
.mp-seq b.q { color: #E63946; border-color: #E63946; }
.mp-it { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: clamp(12px, 13cqmin, 26px); color: #1E2A4A; }
.mp-row { display: flex; align-items: center; gap: 1cqw; }
.mp-row svg { max-height: 42cqh; width: auto; }
.mp-plus { font-size: clamp(12px, 12cqmin, 22px); color: #1E2A4A; }
.mp-slot { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.mp-placed { position: absolute; inset: 0; pointer-events: auto; touch-action: none; cursor: grab; }
.mp-frag { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mp-tag { position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px); background: rgba(255,255,255,.92); border-radius: 8px; padding: 1px 6px; font-weight: 800; font-size: clamp(9px, 9cqmin, 14px); color: #1E2A4A; line-height: 1.25; }
.mp-tag svg { height: 1.7em; width: auto; display: block; }
.mp-cell.flip .mp-placed { animation: mpFlip .45s ease-out; }
@keyframes mpFlip { 0% { transform: perspective(400px) rotateY(90deg); } 100% { transform: none; } }
.mp-cell.wrong { box-shadow: 0 0 0 4px #E63946; animation: mpShake .45s; }
.mp-cell.wrong::after { content: '✕'; position: absolute; right: 4px; top: 2px; z-index: 3; background: #E63946; color: #fff; font-weight: 800; border-radius: 999px; width: 22px; height: 22px; display: grid; place-items: center; font-size: 13px; }
@keyframes mpShake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.mp-whole { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1.2s .7s; z-index: 4; }
.mp-whole svg, .mp-full { width: 100%; height: 100%; display: block; }
.mp-complete .mp-board { gap: 0; transition: gap .7s; }
.mp-complete .mp-cell { border-radius: 0; box-shadow: none; }
.mp-complete .mp-tag, .mp-complete .mp-no { opacity: 0; transition: opacity .4s; }
.mp-complete .mp-whole { opacity: 1; }
.mp-complete .mp-board { box-shadow: 0 10px 30px rgba(30,42,74,.18); border-radius: 14px; overflow: hidden; animation: mpPop .9s .5s ease-out both; }
@keyframes mpPop { 0% { transform: scale(1); } 45% { transform: scale(1.04); } 100% { transform: scale(1); } }
.mp-dock { position: sticky; bottom: 0; z-index: 6; background: #FFF9F0; border-radius: 18px 18px 0 0; box-shadow: 0 -6px 18px rgba(30,42,74,.08); padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.mp-focus { min-height: 132px; display: flex; align-items: center; justify-content: center; }
.mp-focus-hint { font-size: 13px; color: #7C8499; text-align: center; }
.mp-focus-q { position: relative; container-type: size; width: min(100%, 360px); height: 132px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 3px #7C5CFF; }
.mp-tray { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-height: 34vh; overflow: auto; padding: 4px; }
.mp-piece { border: 0; font: inherit; min-width: 84px; min-height: 56px; padding: 6px 10px; border-radius: 14px; background: #fff; color: #1E2A4A; box-shadow: 0 3px 0 #D9CFBE, 0 6px 12px rgba(30,42,74,.07); cursor: grab; display: flex; align-items: center; justify-content: center; touch-action: pan-x; user-select: none; -webkit-user-select: none; }
.mp-piece.sel { background: #FFF1B8; box-shadow: 0 0 0 3px #FFB020, 0 3px 0 #E3B41E; transform: translateY(-3px); }
.mp-piece.used { visibility: hidden; width: 0; min-width: 0; padding: 0; margin: 0 -4px; }
.mp-face { font-weight: 800; font-size: 17px; line-height: 1.2; word-break: keep-all; }
.mp-face-vis svg { height: 44px; width: auto; display: block; }
.mp-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -60%) scale(1.08); background: #FFF1B8; border-radius: 14px; padding: 8px 12px; box-shadow: 0 10px 24px rgba(30,42,74,.25); color: #1E2A4A; }
.mp-after { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mp-done-msg { font-weight: 800; font-size: clamp(18px, 3.4vw, 24px); text-align: center; color: #1E2A4A; }
.mp-views { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.mp-vbtn { border: 0; font: inherit; font-size: 14px; padding: 7px 12px; border-radius: 999px; background: #F3EEE4; cursor: pointer; }
.mp-vbtn.on { background: #7C5CFF; color: #fff; }
.mp-view { width: 100%; overflow: auto; }
.mp-qa { position: relative; display: grid; grid-template-columns: repeat(var(--c), 1fr); grid-template-rows: repeat(var(--r), 1fr); gap: 4px; width: min(100%, 780px, calc(var(--c) * 170px)); min-width: calc(var(--c) * 98px); aspect-ratio: 1; margin: 0 auto; }
.mp-qa-cell { position: relative; container-type: size; background: #fff; border-radius: 10px; box-shadow: 0 2px 0 #E6E0D4; overflow: hidden; display: flex; flex-direction: column; }
.mp-qa-cell .mp-qwrap { position: relative; inset: auto; flex: 1; min-height: 0; padding: 12% 5% 2%; }
.mp-qa-cell .mp-qv { max-height: 40cqh; } .mp-qa-cell .mp-qv svg { max-height: 38cqh; }
.mp-qa-ans { align-self: center; margin-bottom: 5%; background: #E4F8EC; color: #0E6B43; border: 2px solid #1FA36A; border-radius: 8px; padding: 0 7px; max-width: 94%; font-size: clamp(10px, 9cqmin, 16px); }
.mp-qa-ans .mp-face { font-size: inherit; } .mp-qa-ans svg { height: 18cqh; width: auto; }
.mp-qa.faint { gap: 0; border-radius: 12px; overflow: hidden; }
.mp-qa.faint .mp-qa-cell { background: transparent; box-shadow: none; border-radius: 0; border: 1px solid rgba(30,42,74,.25); }
.mp-qa-pic { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .25; pointer-events: none; }
.mp-pv-host { overflow: auto; background: #ECE5D8; border-radius: 16px; padding: 12px; }
.mp-pv .mp-print .mpg { background: #fff; width: 210mm; padding: 10mm; min-height: 297mm; margin: 0 auto 16px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
@media (max-width: 700px) {
  .mp-tray { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; max-height: none; scroll-snap-type: x proximity; }
  .mp-piece { flex: 0 0 auto; scroll-snap-align: start; }
  .mp-focus-q { height: 118px; } .mp-focus { min-height: 118px; }
  .mp-chip { font-size: 14px; }
}
.mp-play [hidden], .mp-dock[hidden], .mp-after[hidden], .mp-views[hidden], .mp-view[hidden] { display: none !important; }
.mp-complete [data-check] { display: none; }

/* ───── 🧩 워크지 레벨 사다리 · 기기에서 풀기 (2026-09-27) ───── */
.ws-play { display: flex; flex-direction: column; gap: 12px; }
.ws-part { font-size: 13px; vertical-align: middle; }
.ws-check { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; margin-top: 4px; }
.ws-check .muted { font-size: 15px; }
.ws-bad { outline: 4px solid #E63946 !important; outline-offset: -2px; background-color: #FFECEC !important; }
.ws-empty { outline: 4px dashed #F2A33A !important; outline-offset: -2px; }
.ws-next { text-align: center; font-family: var(--title); font-size: 20px; }
.ws-pixel { touch-action: none; user-select: none; -webkit-user-select: none; gap: 0; padding: 0; background: #fff; border: 2.5px solid #5B4A3A; }
.ws-pixel .px { position: relative; border: 0; cursor: crosshair; transition: background .15s; }
.ws-pixel .px .sub { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); pointer-events: none; }
.ws-pixel .px .sub b { display: block; opacity: .85; }
.ws-pixel .px .tk { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 1; }
.ws-pixel .px .tk svg { width: 88%; height: auto; max-height: 92%; }
.ws-pixel .px.filled .tk { opacity: .35; }
.ws-pixel.reveal .px .tk { opacity: 0; transition: opacity .6s; }
.ws-pixel.reveal .px { border-color: transparent !important; }
.ws-pal { position: sticky; top: 0; z-index: 3; background: rgba(255,251,242,.95); padding: 6px; border-radius: 16px; }
.ws-paint-hint { font-size: 14px; text-align: center; }
.ws-seq { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
.ws-seqnav { display: flex; gap: 12px; align-items: center; justify-content: center; }
.ws-review { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ws-review .chip.on { background: #D8F5DB; }
.ws-syl { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.ws-syl.hand { width: 150px; }
.ws-syl.hand .drawpad.mini { width: 100%; border-radius: 14px; box-shadow: inset 0 0 0 2px #E6E0D4; background: repeating-linear-gradient(0deg, #fff 0 38px, #F2EEE6 38px 40px); }
.ws-syl .ws-clear { position: absolute; right: -6px; top: -6px; width: 30px; height: 30px; font-size: 15px; }
.ws-syl-val { font-family: var(--title); font-size: 34px; min-width: 60px; text-align: center; }
.ws-syl.pad .wr-key { width: 50px; height: 50px; font-size: 22px; }
.ws-num { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ws-num-val { font-family: var(--title); font-size: 36px; min-width: 80px; text-align: center; background: #fff; border-radius: 14px; padding: 2px 14px; box-shadow: var(--soft); }
.ws-num-keys { display: grid; grid-template-columns: repeat(6, 54px); gap: 8px; }
.ws-num-keys .btn { min-height: 50px; font-size: 22px; padding: 0; }
.ws-math { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; width: min(100%, 760px); }
.ws-mq { display: flex; align-items: center; gap: 8px; border: 0; background: #fff; border-radius: 16px; padding: 6px 12px; box-shadow: 0 4px 0 var(--lip); font: inherit; font-size: 22px; cursor: pointer; }
.ws-mq .n { font-size: 13px; color: var(--muted); }
.ws-mq b { margin-left: auto; min-width: 54px; text-align: center; border-bottom: 2px solid var(--ink); font-family: var(--title); }
.ws-mq.sel { outline: 4px solid var(--yellow); }
.ws-chosen { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.shop-item.on, .cr-car.on { outline: 4px solid var(--yellow); }
.pz-cell.put { background: #FFF6D6; }
.pz-put { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 15px; }
.pz-piece.used { opacity: .35; }
.cw-cell.on { background: #FFF3C4; }
.cw-clue.sel { outline: 3px solid var(--yellow); }
.cw-kb { display: inline-flex; gap: 2px; vertical-align: middle; }
.ws-tiles { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ws-tile { background: #6C7FB8; }
.ws-sylpick { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ws-sylpick .chip.on { background: #FFE88A; }
.ws-step { display: inline-block; vertical-align: middle; }
.co-kb { display: inline-flex; align-items: center; gap: 2px; }
.ws-listen { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.ws-lib { padding-left: 18px; border-left: 3px solid #E8DCFF; }
.ws-used, .ws-usedby { background: #FFF1D6; color: #9A6B00; border-radius: 8px; padding: 1px 7px; font-size: 12px; }
@media (max-width: 480px) {
  .ws-num-keys { grid-template-columns: repeat(4, 54px); }
  .ws-pal .swatch { padding: 6px 10px; font-size: 15px; }
  .ws-math { grid-template-columns: 1fr; }
}
/* 뮤직퍼즐: 넓은 화면은 칸 글자가 충분히 커서 '크게 보기' 칸 없이 조각 줄만 (판이 더 많이 보이게) */
@media (min-width: 701px) {
  .mp-focus { display: none; }
  .mp-tray { max-height: 27vh; }
}
.mp-dock-hint { font-size: 13px; color: #7C8499; text-align: center; }
@media (max-width: 700px) { .mp-dock-hint { display: none; } }
.mp-zhost { position: relative; }
.mp-head > .zoom-bar { position: static; box-shadow: 0 2px 8px rgba(0,0,0,.1); opacity: 1; }
.mp-focus-q .mp-qt { font-size: clamp(15px, 13cqmin, 22px); }
/* 🎯 빙고 대결 · 🎏 절기 띠 */
.theme-banner { display: block; width: 100%; height: 42px; margin-bottom: -4px; }
.bg-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(100%, 980px); align-items: start; }
.bg-cap { font-family: var(--title); font-size: 16px; text-align: center; margin-bottom: 4px; }
.bg-bot .bg-cell { cursor: default; }
.bg-cell.back { background: linear-gradient(#8B5CF6, #6D3FD6); box-shadow: 0 4px 0 #4F2BA8; color: #fff; font-family: var(--title); font-size: 20px; }
.bg-cell.flip { animation: bgflip .45s ease-out; }
@keyframes bgflip { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }
.bg-cell.sel { outline: 4px solid var(--yellow); }
.bg-cell.hinted { background: #FFE0B8; }
.bg-vs { display: flex; justify-content: center; }
@media (max-width: 640px) { .bg-boards { grid-template-columns: 1fr; } .bg-bot { width: min(100%, 300px); margin: 0 auto; } }
.mp-toc { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.mp-toc-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; }
.mp-toc-thumb svg, .mp-toc-thumb img { width: 110px; height: 110px; border-radius: 10px; }
.pin-lock { font-size: 13px; opacity: .8; }
.act-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.act-day { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 8px; background: #FAF7F2; border-radius: 10px; font-size: 14px; }
.enter-note { background: #EFFBF4; }
.settings-bar { position: fixed; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 24px)); bottom: 12px; z-index: 60; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; padding: 10px 14px; background: #fff; border-radius: 18px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.settings-bar[hidden] { display: none; }
.settings-bar span { margin-right: auto; font-weight: 700; color: #C8352A; }

/* 워크지 목차: 문제 방식 폴더 → 레벨 칩 + 카드 격자 (뮤직퍼즐과 같은 모양, 2026-09-28) */
.ws-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ws-folder { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; text-align: center; cursor: pointer; border: 0; font: inherit; }
.ws-folder:hover { transform: translateY(-2px); }
.ws-folder-ic { font-size: 40px; line-height: 1.1; }
.ws-folder small { font-size: 12.5px; line-height: 1.35; }
.ws-toc { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.ws-card { text-align: center; }
.ws-card .ws-thumbs { justify-content: center; }
.ws-card select { border: 2px solid var(--ink); border-radius: 10px; padding: 4px; font-size: 13px; }

/* 📐 세로 화면에서 옆으로 넘칠 때 (ui/fit.js) */
.side-hint { position: fixed; top: 0; right: 0; bottom: 0; width: 70px; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 50;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(30,42,74,.18)); }
.side-hint span { position: absolute; right: 8px; top: 42%; pointer-events: auto; cursor: pointer; background: var(--ink, #1E2A4A); color: #fff; font-weight: 700; font-size: 15px;
  border-radius: 999px; padding: 8px 12px; white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,.2); animation: sideNudge 1.4s ease-in-out infinite; }
.side-hint.on { opacity: 1; }
.side-hint:not(.on) span { pointer-events: none; }
@keyframes sideNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
/* 게임 결과: 끝나자마자 누른 손가락이 다시 시작하지 않게 잠깐 잠금 (screens/games.js) */
button.cooling { opacity: .55; }

/* 게임 레벨 고르기: 번호 판은 접어 둔다 (screens/games.js pickLevel) */
.lvpick-more { margin: 10px 0; }
.lvpick-more summary { cursor: pointer; color: #6b5a4a; font-size: 15px; padding: 6px 0; list-style: none; text-align: center; }
.lvpick-more summary::-webkit-details-marker { display: none; }

/* 📚 악기 도감 · 📖 알아보기 · 📝 악기 퀴즈 (screens/instlab.js, 2026-09-28) */
.dex-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 16px; }
.dex-bar .muted { font-size: 13px; }
.dex-st { display: inline-flex; gap: 2px; font-size: 13px; }
.dex-st i { font-style: normal; opacity: .22; filter: grayscale(1); }
.dex-st i.on { opacity: 1; filter: none; }
.il-tile .dex-st { margin-top: 2px; }
.inst-learn { background: #F4F8FF; border-radius: 14px; padding: 10px 12px; margin-top: 8px; }
.il-ltabs { margin-bottom: 6px; }
.il-lines { margin: 4px 0; padding-left: 20px; line-height: 1.6; }
.il-lines li, .inst-learn [data-read] { cursor: pointer; }
.il-how { font-weight: 800; font-size: 17px; margin: 4px 0; }
.il-range { margin: 8px 0; }
.il-rbar { position: relative; height: 18px; border-radius: 9px; background: repeating-linear-gradient(90deg, #fff 0 6px, #E4E8F2 6px 7px); border: 1.5px solid #C9D2E6; }
.il-rseg { position: absolute; top: -2px; bottom: -2px; border-radius: 9px; background: linear-gradient(90deg, #3FA9F5, #8B5CF6); opacity: .85; }
.il-rmid { position: absolute; top: -6px; bottom: -6px; width: 3px; background: #FF6B6B; border-radius: 2px; }
.il-rlab { position: relative; display: flex; justify-content: space-between; font-size: 12px; color: #6A6F85; margin-top: 4px; height: 16px; }
.il-rlab span[style] { position: absolute; transform: translateX(-50%); color: #D94F4F; font-weight: 700; }
.iq-pics { display: flex; gap: 16px; justify-content: center; }
.iq-pic { display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 700; }
.iq-pic svg { width: 110px; height: 110px; }
.iq-q { text-align: center; font-size: 22px; margin: 8px 0; cursor: pointer; }
.iq-topts { display: grid; gap: 8px; width: min(520px, 100%); margin: 0 auto; }
@media (min-width: 600px) { .iq-topts { grid-template-columns: 1fr 1fr; width: min(680px, 100%); } } /* 4지선다: 넓으면 2×2 */
.iq-topt { border: 0; border-radius: 16px; background: #fff; box-shadow: 0 4px 0 #D8CDB6; padding: 12px 14px; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; text-align: center; }
.iq-topt.right { background: #DFF7E4; box-shadow: 0 4px 0 #6BCB77; }
.iq-topt.wrong { background: #FFE3E3; box-shadow: 0 4px 0 #FF8C8C; }
.iq-why { text-align: center; }

/* 🏆 명예의 전당 시상대 · 이달의 1위 · 옷장 팔기 (2026-09-28) */
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin: 6px 0 10px; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; flex: 1; max-width: 130px; }
.pod-name { font-weight: 800; font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-score { font-size: 13px; color: #6b5a4a; }
.pod-step { width: 100%; border-radius: 12px 12px 4px 4px; text-align: center; font-size: 26px; padding-top: 4px; color: #fff; font-weight: 900; }
.pod.p1 .pod-step { height: 64px; background: linear-gradient(#FFD65A, #F2B92E); }
.pod.p2 .pod-step { height: 46px; background: linear-gradient(#D9DEEA, #B8C0D2); }
.pod.p3 .pod-step { height: 34px; background: linear-gradient(#F2BE91, #D9955E); }
.pod.me .pod-name { color: #D94F4F; }
.pod.p1 .pod-av { filter: drop-shadow(0 4px 8px rgba(242,185,46,.45)); }
.rank-row .av2 { flex: 0 0 auto; }
.monthtop { display: flex; flex-direction: column; gap: 2px; background: linear-gradient(135deg, #FFF6D6, #FFE9F2); margin-bottom: 12px; }
.closet-cell { display: flex; flex-direction: column; gap: 4px; }
.sell-btn { font-size: 13px; padding: 4px 6px; }

/* 📚 악기 도감 화면 (instlab.js showDex) */
button.dex-bar { border: 0; background: #FFF6D6; border-radius: 14px; padding: 10px 12px; font: inherit; cursor: pointer; text-align: left; width: 100%; box-shadow: 0 3px 0 #EAD9A0; }
.dex-open { margin-left: auto; font-weight: 800; color: #9A6B00; font-size: 14px; }
.dex { display: flex; flex-direction: column; gap: 12px; }
.dex-head h2 { margin: 0; } .dex-head h2 span { font-size: 18px; color: #9A6B00; } .dex-head p { margin: 4px 0 0; font-size: 14px; }
.dex-fam { background: #fff; border-radius: 16px; padding: 10px; box-shadow: var(--soft); }
.dex-fam.got { background: linear-gradient(135deg, #FFF8DC, #FFFFFF); }
.dex-fam-h { display: flex; justify-content: space-between; margin-bottom: 6px; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.dex-card { border: 0; background: #F7F8FC; border-radius: 14px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; font-size: 13px; cursor: pointer; }
.dex-card svg { width: 64px; height: 64px; }
.dex-card.none svg { filter: grayscale(.6) opacity(.6); }
.dex-card.done { background: #FFF1C2; box-shadow: 0 0 0 2px #F2C84B inset; }
.dex-card.done svg { filter: none; }

/* 🗂 홈 아래 탭 (원장 2026-09-28 B안) — 오늘 · 놀이터 · 탐험실 · 별가게 · 명예의 전당 */
.tab-pane[hidden], .region[hidden] { display: none !important; }

.pane-head { grid-column: 1 / -1; font-family: var(--title); font-size: 28px; font-weight: 800; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pane-head small { font-size: 16px; font-weight: 600; opacity: .7; }
.home-tabs { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 6px; margin: 12px -8px -8px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--card, #fff); border: var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -6px 18px rgba(0,0,0,.08); }
.home-tabs button { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 0; border-radius: 16px; background: none; font: inherit; font-weight: 800; font-size: 15px; color: inherit; opacity: .6; cursor: pointer; }
.home-tabs button i { font-style: normal; font-size: 30px; line-height: 1; transition: transform .15s; }
.home-tabs button.on { opacity: 1; background: var(--yellow); }
.home-tabs button.on i { transform: scale(1.15) translateY(-2px); }
.home-tabs .tab-lock { position: absolute; top: 2px; right: 8px; font-size: 13px; }
@media (max-width: 480px) { .home-tabs button { font-size: 12px; } .home-tabs button i { font-size: 26px; } }

/* 🏠 내 방 · 🐾 펫 (engine/room.js, 원장 2026-09-28 싸이월드 느낌을 더 심플하게) */
.hero-room { grid-column: 1 / -1; }
.room { position: relative; height: 230px; border: var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--pop); cursor: pointer; user-select: none; -webkit-user-select: none; }
.room.big { height: 270px; margin: 8px 0 14px; cursor: default; }
.rm-wall { position: absolute; inset: 0 0 30% 0; }
.rm-floor { position: absolute; inset: 70% 0 0 0; border-top: 3px solid rgba(58,42,32,.25); }
.rm-deco { position: absolute; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0,0,0,.12)); }
.rm-deco.on-wall { top: 12%; right: 16%; font-size: 46px; }
.rm-deco.left { bottom: 16%; left: 4%; font-size: 64px; }
.rm-deco.right { bottom: 16%; right: 4%; font-size: 64px; }
.rm-me { position: absolute; bottom: 8%; left: 20%; }
.rm-say { position: absolute; top: 12px; left: calc(20% + 96px); max-width: min(52%, 380px); margin: 0; font-size: 17px; }
.room.dark .rm-say { background: #fff; }
.rm-pet { position: absolute; bottom: 5%; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; transition-property: left; transition-timing-function: linear; cursor: pointer; font: inherit; color: var(--ink); }
.rm-pet-em { font-size: 42px; line-height: 1; display: inline-block; }
.rm-pet small { font-size: 12px; font-weight: 800; background: rgba(255,255,255,.85); border-radius: 8px; padding: 0 5px; }
.rm-pet.flip .rm-pet-em { transform: scaleX(-1); }
.rm-pet.walk .rm-pet-em { animation: rm-walk .32s ease-in-out infinite alternate; }
.rm-pet.flip.walk .rm-pet-em { animation-name: rm-walk-flip; }
.rm-pet.hop .rm-pet-em { animation: rm-hop .6s ease-out; }
.rm-pet.sleepy .rm-pet-em { transform: rotate(-80deg); opacity: .85; margin-bottom: 2px; }
.rm-zz { position: absolute; top: -14px; right: -10px; font-style: normal; animation: rm-zz 1.8s ease-in-out infinite; }
.rm-pet.love::after { content: '💕'; position: absolute; top: -22px; font-size: 22px; animation: rm-zz .9s ease-out; }
.rm-bowl { position: absolute; bottom: 4%; right: 28%; border: 0; background: none; padding: 0; font-size: 28px; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.rm-bowl i { display: block; height: 5px; background: var(--green); border-radius: 3px; max-width: 34px; }
.rm-bowl.empty span { animation: rm-zz 1.2s ease-in-out infinite; }
.rm-feed { position: absolute; bottom: 30%; left: 50%; transform: translate(-50%, -12px); z-index: 2; }
@keyframes rm-walk { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-5px) rotate(4deg); } }
@keyframes rm-walk-flip { from { transform: scaleX(-1) translateY(0) rotate(-4deg); } to { transform: scaleX(-1) translateY(-5px) rotate(4deg); } }
@keyframes rm-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-22px); } }
@keyframes rm-zz { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-6px); opacity: .5; } }
.rm-list { padding-bottom: 20px; }
.rm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.rm-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 3px solid rgba(58,42,32,.2); border-radius: 18px; background: var(--card); font: inherit; color: var(--ink); cursor: pointer; }
.rm-card.mine { border-color: var(--mint); }
.rm-card.on { border-color: var(--ink); background: #FFF8D6; }
.rm-card small { font-size: 13px; }
.rm-swatch { width: 72px; height: 52px; border-radius: 12px; border: 2px solid rgba(58,42,32,.15); display: grid; place-items: center; font-size: 36px; }
.rm-swatch.pet { border: 0; font-size: 44px; }
.rm-side { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 11px; background: var(--yellow); border-radius: 8px; padding: 0 5px; }
.rm-bowlbar { display: flex; align-items: center; gap: 10px; font-weight: 800; margin-bottom: 10px; flex-wrap: wrap; }
.rm-bowlbar i { width: 140px; height: 12px; border-radius: 6px; background: rgba(0,0,0,.08); overflow: hidden; display: inline-block; }
.rm-bowlbar i b { display: block; height: 100%; background: var(--green); }
.rm-mypets { display: flex; gap: 10px; margin-bottom: 12px; }
.rm-mypet { display: flex; flex-direction: column; align-items: center; padding: 8px 14px; border-radius: 16px; background: var(--card); border: 3px solid var(--mint); }
.rm-mypet span { font-size: 40px; }
@media (max-width: 560px) { .room { height: 200px; } .rm-me { left: 4%; } .rm-say { left: 30%; max-width: 64%; font-size: 15px; } .rm-deco.left, .rm-deco.right { font-size: 48px; } .rm-deco.left { left: auto; right: 30%; } }

/* ✕ 창 닫기 (모든 .modal) */
.modal { position: relative; }
.modal-x { position: absolute; top: 8px; right: 8px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; color: var(--ink); font-size: 20px; font-weight: 900; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.modal-x:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.modal h2 { padding: 0 34px; }

/* 🐾 밥 먹은 날: 방에서 예쁜 말 · 이론 모험에 따라오는 펫 */
.rm-psay { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; white-space: nowrap; font-style: normal; font-size: 13px; font-weight: 800; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 3px 8px; z-index: 4; }
.rm-psay[hidden] { display: none; }
.rm-pet.happy::before { content: '💕'; position: absolute; top: -8px; right: -6px; font-size: 14px; animation: rm-zz 2.4s ease-in-out infinite; }
.rm-pet.pv { opacity: .92; }
.rm-pet.pv small { background: var(--yellow); }
.room.previewing { outline: 4px dashed var(--coral); outline-offset: -8px; }
.room-screen { padding-bottom: 90px; }
.lesson-pet { position: fixed; left: 12px; bottom: 12px; z-index: 40; display: flex; gap: 2px; align-items: flex-end; cursor: pointer; filter: drop-shadow(0 3px 0 rgba(0,0,0,.12)); }
.lesson-pet .lp-em { font-size: 40px; line-height: 1; display: inline-block; animation: rm-walk .9s ease-in-out infinite alternate; }
.lesson-pet .lp-em + .lp-em { animation-delay: .45s; }
.lesson-pet.hop .lp-em { animation: rm-hop .6s ease-out; }
.lesson-pet .lp-say { position: absolute; bottom: 100%; left: 0; margin-bottom: 6px; white-space: nowrap; font-size: 15px; font-weight: 800; background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 5px 10px; box-shadow: 0 3px 0 var(--ink); }
.lesson-pet .lp-say[hidden] { display: none; }
@media (max-width: 560px) { .lesson-pet .lp-em { font-size: 30px; } }
.rm-me { cursor: pointer; transform-origin: 50% 100%; }
.rm-me.jump { animation: rm-jump .62s cubic-bezier(.3,.7,.4,1); }
@keyframes rm-jump { 0% { transform: scale(1.08, .88); } 25% { transform: translateY(-46px) scale(.95, 1.06); } 50% { transform: translateY(-58px) rotate(-6deg); } 80% { transform: translateY(0) scale(1.1, .86); } 100% { transform: none; } }

/* ← 나가는 길이 없는 화면에 저절로 뜨는 뒤로 단추 (router.js floatBack) */
.float-back { position: fixed; top: 10px; left: 10px; z-index: 55; width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; color: var(--ink); font-size: 24px; font-weight: 900; line-height: 1; display: grid; place-items: center; box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.float-back[hidden] { display: none; }
.float-back:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* 📐 내 방: 폰 · 태블릿 · 컴퓨터 어디서나 같은 모양 (원장 2026-09-28 "모양이나 배치가 깨지거나 어그러지지 않도록")
   방은 가로:세로 비율을 고정하고, 안의 가구·펫·캐릭터·말풍선 크기를 방 너비(cqw)에 맞춰 함께 키우고 줄인다. */
.room { height: auto; aspect-ratio: 2.3 / 1; container-type: inline-size; }
.room.big { height: auto; aspect-ratio: 2 / 1; }
.rm-deco.free { position: absolute; transform: translate(-50%, -100%); font-size: clamp(26px, 7.2cqw, 84px); line-height: 1; touch-action: none; }
.rm-deco.free.wallish { font-size: clamp(22px, 5.6cqw, 66px); }
.room.big .rm-deco.free { cursor: grab; }
.rm-deco.free.dragging { cursor: grabbing; filter: drop-shadow(0 8px 6px rgba(0,0,0,.25)); transform: translate(-50%, -100%) scale(1.12); }
.rm-deco.free.pv { outline: 3px dashed var(--coral); outline-offset: 2px; border-radius: 10px; }
.rm-me { bottom: 6%; left: 18%; z-index: 90; }
.rm-me svg, .rm-me img { width: clamp(52px, 12.5cqw, 150px) !important; height: auto !important; }
.rm-say { left: calc(18% + clamp(56px, 13.5cqw, 160px)); font-size: clamp(13px, 1.9cqw, 20px); max-width: 52cqw; z-index: 95; }
.rm-pet { z-index: 92; }
.rm-pet-em { font-size: clamp(28px, 6.2cqw, 76px); }
.rm-pet small { font-size: clamp(10px, 1.4cqw, 15px); }
.rm-psay { font-size: clamp(11px, 1.6cqw, 17px); }
.rm-bowl { font-size: clamp(20px, 3.6cqw, 42px); z-index: 91; }
.rm-feed { z-index: 96; }
.rm-card .rm-side.new { background: var(--coral); color: #fff; }
@media (max-width: 560px) {
  .room, .room.big { height: auto; aspect-ratio: 1.55 / 1; }
  .rm-me { left: 4%; }
  .rm-say { left: calc(4% + clamp(56px, 13.5cqw, 160px)); max-width: 58cqw; }
}

/* 📱 폰 가로 (높이가 낮은 화면): 방은 왼쪽 크게, 단추는 오른쪽 — 줄어들지 않게 (원장 2026-09-28 "폰에서 가로로 보니까 엄청 작아서") */
@media (orientation: landscape) and (max-height: 560px) {
  .screen { padding-top: 6px; padding-bottom: 4px; gap: 8px; }
  .region { padding: 6px 12px; border-radius: 16px; }
  .region-head { margin-bottom: 0; }
  .region-name { font-size: 16px; }
  .region .nodes { display: none; }
  .home-main[data-pane="today"] { grid-template-columns: 1.55fr 1fr; grid-auto-flow: dense; gap: 10px; align-content: start; }
  .home-main[data-pane="today"] .hero-room { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
  .home-main[data-pane="today"] > :not(.hero-room) { grid-column: 2; }
  .home-main[data-pane="today"] .menu-tile.wide { min-height: 0; flex-direction: column; gap: 4px; padding: 12px; }
  .home-main[data-pane="today"] .menu-tile .em { font-size: 38px; }
  .home-main[data-pane="today"] .read-toggle { flex-wrap: wrap; font-size: 14px; }
  .room { aspect-ratio: 1.75 / 1; }
  .home-main.tab-pane:not([data-pane="today"]) { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; align-content: start; }
  .home-main.tab-pane .menu-tile { min-height: 96px; padding: 10px; }
  .home-main.tab-pane .menu-tile .em { font-size: 36px; }
  .pane-head { font-size: 20px; }
  .home-tabs { margin-top: 6px; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); }
  .home-tabs button { flex-direction: row; justify-content: center; gap: 6px; padding: 6px 4px; font-size: 14px; }
  .home-tabs button i { font-size: 22px; }
  /* 내 방 가게: 방은 왼쪽에 붙어 있고 오른쪽 목록만 내려 본다 */
  .room-screen { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; align-items: start; }
  .room-screen > .topbar { grid-column: 1 / -1; }
  .room-screen > .room { grid-column: 1; grid-row: 2 / span 2; position: sticky; top: 8px; margin: 0; }
  .room-screen > .tabs, .room-screen > .rm-list { grid-column: 2; }
  .room-screen .rm-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .room-screen .rm-swatch { width: 56px; height: 42px; font-size: 30px; }
}
.rm-refund { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; margin: 4px 0; border-radius: 14px; background: #EFFAF8; border: 2px solid var(--mint); font-size: 15px; }
@media (orientation: landscape) and (max-height: 560px) { .room-screen > .rm-refund { grid-column: 2; } }
/* 🎹 그림 가구(피아노) */
.rm-deco.free.art { font-size: 0; line-height: 0; min-width: 60px; max-width: 300px; }
.rm-deco.free.art svg { width: 100%; height: auto; display: block; }
.rm-swatch.art svg { width: 88%; height: 88%; }

/* 🔑 마스터 체험 */
.master-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 12px; border-radius: 14px; background: #FFF0C2; border: 2px dashed var(--orange); font-size: 15px; }
.master-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }

/* 🌟 내 스티커판 (원장 2026-09-28 "제목이 한 줄에 안 써 있고 두 줄로 내려와") — 제목은 한 줄, 지갑은 자리가 모자라면 다음 줄로 */
.stickers-screen .topbar { flex-wrap: wrap; row-gap: 6px; }
.st-title { white-space: nowrap; flex: 0 0 auto; font-size: clamp(22px, 5vw, 32px); }
.stickers-screen .topbar .grow { min-width: 0; }
.st-total { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 17px; }
.st-total i { flex: 1 1 160px; max-width: 360px; height: 12px; border-radius: 6px; background: rgba(0,0,0,.08); overflow: hidden; display: block; }
.st-total i b { display: block; height: 100%; background: var(--yellow); }
.st-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.st-tabs .chip { flex: 0 0 auto; white-space: nowrap; }
.st-tabs .chip small { opacity: .7; margin-left: 2px; }
.stickers { grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 22vw, 124px), 1fr)); gap: clamp(8px, 1.6vw, 12px); }
.sticker { min-width: 0; }
.sticker .st-label { font-size: clamp(13px, 1.8vw, 15px); line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; }
.sticker .face { width: clamp(56px, 12vw, 70px); height: clamp(56px, 12vw, 70px); font-size: clamp(26px, 6vw, 34px); }
.sticker .face svg { max-width: 80%; max-height: 80%; }
.concept-title { font-size: clamp(18px, 3.4vw, 22px); }

/* 💌 방명록 · 🏆 트로피 선반 */
.rm-shelf { position: absolute; top: 5%; left: 3%; z-index: 80; display: flex; align-items: flex-end; gap: 2px; padding: 2px 8px 4px; border: 0; border-bottom: 5px solid #A0703F; border-radius: 4px; background: rgba(255,255,255,.35); font-size: clamp(18px, 3.8cqw, 40px); line-height: 1; cursor: pointer; }
.rm-shelf small { font-size: 12px; font-weight: 800; align-self: center; }
.rm-letter { position: absolute; top: 5%; right: 3%; z-index: 80; border: 0; background: none; font-size: clamp(26px, 5.2cqw, 54px); line-height: 1; cursor: pointer; }
.rm-letter.new { animation: rm-hop 1.1s ease-in-out infinite; }
.rm-letter b { position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--coral); color: #fff; font-size: 12px; display: grid; place-items: center; border: 2px solid #fff; }
.gb-modal { max-width: 440px; text-align: left; }
.gb-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; margin-top: 8px; }
.gb-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; background: #FFF8EC; border: 2px solid rgba(58,42,32,.12); }
.gb-note .gb-st { font-size: 30px; line-height: 1; }
.gb-note p { margin: 0; font-weight: 700; font-size: 17px; word-break: keep-all; }
.gb-note small { color: var(--muted); }
.gb-note > div { flex: 1; min-width: 0; }
.gb-note.small .gb-st { font-size: 22px; }
.gb-note.small p { font-size: 15px; }
/* 폰 세로: 방·마스터 줄을 낮게 → '오늘의 모험 출발!'이 첫 화면에 보이게 */
@media (max-width: 560px) and (orientation: portrait) {
  .room, .room.big { aspect-ratio: 1.85 / 1; }
  .master-bar { font-size: 13px; padding: 4px 8px; gap: 4px; }
  .master-bar .muted { display: none; }
  .master-bar .btn.small { padding: 4px 10px; font-size: 13px; min-height: 0; }
  .region { padding: 8px 12px; }
  .region-head { margin-bottom: 4px; }
  .home-main[data-pane="today"] { gap: 10px; align-content: start; }
  .home-main[data-pane="today"] .menu-tile.wide { min-height: 88px; }
}
@media (max-width: 560px) {
  .home-main .menu-tile.wide { flex-wrap: wrap; justify-content: center; column-gap: 12px; row-gap: 2px; }
  .home-main .menu-tile.wide > span:not(.em) { white-space: nowrap; }
  .home-main .menu-tile.wide small { flex-basis: 100%; text-align: center; }
  .home-main .menu-tile.wide .em { font-size: 40px; }
}
.st-prize { padding: 8px 12px; border-radius: 14px; background: #FFF4D0; border: 2px dashed var(--yellow); font-size: 15px; line-height: 1.5; }

/* 🎵 방 음악 */
.bgm-inst { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.bgm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.bgm-song { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 16px; border: 3px solid rgba(58,42,32,.15); background: var(--card); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.bgm-song small { color: var(--muted); font-size: 12px; }
.bgm-song.on { border-color: var(--ink); background: #FFF8D6; }
.rm-music { position: absolute; bottom: 4%; right: 3%; z-index: 97; width: clamp(34px, 6cqw, 52px); height: clamp(34px, 6cqw, 52px); border-radius: 50%; border: 3px solid var(--ink); background: #fff; font-size: clamp(16px, 3cqw, 26px); cursor: pointer; }
.rm-music.on { background: var(--yellow); animation: rm-zz 1.2s ease-in-out infinite; }

/* 📍 총 목차: 학생이 지금 배우는 곳 */
.toc-here { background: #FFF8E1; border: 3px solid var(--yellow); display: flex; flex-direction: column; gap: 8px; }
.toc-here-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; }
.toc-here-row a { font-weight: 800; color: var(--ink); }
.toc-here-bars { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.toc-bar { display: grid; grid-template-columns: 92px 1fr 64px; align-items: center; gap: 8px; font-size: 14px; }
.toc-bar i { height: 10px; border-radius: 5px; background: rgba(0,0,0,.08); overflow: hidden; display: block; }
.toc-bar i b { display: block; height: 100%; background: var(--green); }
.toc-bar.cur span { font-weight: 800; }
.toc-bar small { text-align: right; color: var(--muted); }
.toc-concept.cs-done { background: #EAF8EC; }
.toc-concept.cs-now { background: #FFF6D6; }
.toc-concept.here { outline: 3px solid var(--coral); outline-offset: 2px; animation: here-glow 1.6s ease-in-out 3; }
.here-pin { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 10px; background: var(--coral); color: #fff; font-size: 13px; font-weight: 800; }
@keyframes here-glow { 50% { box-shadow: 0 0 0 6px rgba(255,107,107,.25); } }
.toc-bar { grid-template-columns: 92px 1fr 150px; }
.toc-bar i { position: relative; }
.toc-bar i u { position: absolute; inset: 0 auto 0 0; background: #BFE8C4; text-decoration: none; }
.toc-bar i b { position: relative; }
@media (max-width: 560px) { .toc-bar { grid-template-columns: 80px 1fr; } .toc-bar small { grid-column: 1 / -1; text-align: left; } }

/* 📐 음표 좌표 퍼즐 배치 (원장 2026-09-29): 판·조각 칸이 화면 폭을 다 쓰고, 넓으면 나란히. 붙인 조각은 빠지고 나머지가 앞으로 당겨 채운다 */
.co-wrap { width: 100%; display: grid; gap: 14px; align-items: start; }
@media (min-width: 760px) { .co-wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .co-tray-box { position: sticky; top: 8px; } }
.co-board { width: 100%; max-width: 640px; }
.co-cell { min-width: 0; }
.co-tray-box { width: 100%; background: #FFF8EC; border-radius: 16px; padding: 8px; }
.co-tray-h { font-weight: 800; margin: 0 0 6px 4px; }
.co-tray-h small { color: var(--muted); font-weight: 700; margin-left: 6px; }
.co-tray { width: 100%; grid-template-columns: repeat(auto-fill, minmax(clamp(84px, 22vw, 108px), 1fr)); gap: 8px; align-content: start; }
.co-piece { display: grid; place-items: center; min-height: 72px; }
.co-piece.done { display: none; visibility: visible; }
.co-tray { grid-template-columns: repeat(auto-fill, minmax(clamp(72px, 18vw, 92px), 1fr)); gap: 6px; }
.co-piece { min-height: 0; padding: 4px; }
.co-piece svg { max-height: 74px; width: auto; }
.co-cell svg { max-height: 70px; }
@media (min-width: 760px) { .co-tray-box { max-height: calc(100vh - 24px); overflow-y: auto; } }

/* 🔐 로그인 · 학원 계정 */
.login-screen { min-height: 100vh; }
.login-card { max-width: 420px; width: 100%; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.login-card form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.login-card input { font-size: 18px; }
.login-err { color: var(--coral); min-height: 1.2em; margin: 0; font-weight: 700; }
.acct-card { display: flex; flex-direction: column; gap: 10px; }
.acct-list { display: flex; flex-direction: column; gap: 6px; }
.acct-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-radius: 12px; background: #F6F1E7; }
.acct-row span { flex: 1; min-width: 160px; }
.kind-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kind-pick .kind { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 16px; border: 3px solid rgba(58,42,32,.15); background: #fff; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.kind-pick .kind.on { border-color: var(--ink); background: #FFF8D6; }
.kind-pick small { color: var(--muted); font-size: 13px; }
.login-card .agree { font-size: 14px; text-align: left; line-height: 1.5; }
.login-card .linkish { background: none; border: 0; color: var(--sky); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
.acct-row.pending { background: #FFF1D6; }
@media (max-width: 480px) { .kind-pick { grid-template-columns: 1fr; } }
.login-card .btn.big { font-size: clamp(18px, 4.6vw, 24px); white-space: nowrap; }
.admin-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #FFE9A8; border: 1px solid #E3B41E; color: #7A5A00; font-size: 12px; font-weight: 800; vertical-align: middle; }
.admin-box { background: #FFF8E1; border: 2px dashed #E3B41E; display: flex; flex-direction: column; gap: 8px; }

/* 🌐 언어 고르기 */
.lang-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.lang-pick .chip { padding: 4px 12px; }
.login-card .lang-pick { align-self: flex-end; }
.login-card .no-ads { margin: 4px 0 0; font-size: 14px; color: #2F8A3E; font-weight: 700; }
.login-card .legal-links { margin: 6px 0 0; font-size: 13px; }
.login-card .legal-links a { color: var(--muted); }
/* 👀 이름 치고 들어가기 */
.name-login { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.name-login input { font-size: 24px; text-align: center; padding: 12px; border-radius: 16px; border: 3px solid var(--ink); }
.home-code { background: #F2F8FF; display: flex; flex-direction: column; gap: 2px; }
.hc-code { font-family: ui-monospace, Menlo, monospace; font-size: 24px; font-weight: 800; letter-spacing: 4px; padding: 2px 10px; border-radius: 10px; background: #fff; border: 2px dashed var(--sky); }
/* 🎵 먼저 해 보기 (engine/trial.js) */
.trial-btn { width: 100%; margin: 6px 0 2px; }
.or-line { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.or-line::before, .or-line::after { content: ''; flex: 1; border-top: 1px solid #E5D9C3; }
.trial-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 10px; }
.trial-levels .kind { background: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.trial-bar { font-size: 14px; color: var(--muted); text-align: center; background: #FFF6D8; border-radius: 12px; padding: 6px 10px; }
.trial-bar .linkish { font-size: 14px; }
.tt-card { text-align: left; }
.tt-kids { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.tt-kid { display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid #EEE3CF; border-radius: 14px; padding: 8px 10px; }
.tt-kid .bar { height: 8px; border-radius: 6px; background: #F1E8D6; overflow: hidden; margin-top: 4px; }
.tt-kid .bar i { display: block; height: 100%; background: var(--mint, #6BCB77); }
.tt-lock { display: inline-block; margin: 3px; padding: 4px 10px; border-radius: 999px; background: #F4EEE2; font-size: 14px; }
.tt-report { background: #FFFDF6; border-left: 4px solid var(--sky, #7EC8E3); padding: 8px 12px; border-radius: 8px; line-height: 1.6; }
/* 📢 이달의 새 소식 (engine/news.js) */
.news-card { max-width: 560px; text-align: center; max-height: 86vh; overflow: auto; }
.news-h { margin: 10px 0 4px; font-size: 17px; text-align: left; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.news-item { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #FFF9EC; border-radius: 12px; padding: 6px 4px; font-size: 13px; }
.news-item small { color: var(--muted); font-size: 11px; }
.news-ic { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.news-sw { width: 40px; height: 40px; border-radius: 8px; border: 1px solid #E5D9C3; display: inline-block; }
.hc-until { font-size: 13px; color: var(--muted); }
.hero-room { isolation: isolate; } /* 방 말풍선·펫(z 90+)이 알림 창 위로 비치지 않게 */
.login-mascot { width: 130px; margin: 0 auto -4px; }