/* 진법 젤리 마을 — 앱 화면. 토큰은 DESIGN.md '진법젤리 확장' 그대로(새 색·글꼴을 만들지 않는다).
   모양 규칙(DESIGN.md 반경): 카드·버튼 18px · 작은 칸 11px · 진법 알약은 끝까지 둥글게(999px). 그림자는 떠 있는 카드·누르는 버튼에만, 마을 길은 1px 선만.
   쌓임: 캔버스 0 · HUD 1 · 화면 조작 2 · 대화상자는 브라우저 맨 위 층(top layer). */
/* 글꼴: 앱은 swap(글꼴을 기다리느라 글자가 안 보이는 일이 없게). 영상용 lib/fonts/fonts.css 는 block 이라 따로 둔다 */
@font-face { font-family: "Fredoka"; src: url("../lib/fonts/Fredoka-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Pretendard Variable"; src: url("../lib/fonts/PretendardVariable.woff2") format("woff2"); font-weight: 45 920; font-display: swap; }
:root {
  --ink: #3b3252; --ink-2: #5a7390; --red: #c9636d; --mute: #a69dc0; --card: #fffdf9; --line: #e8e4f0;
  --b10: #b3831f; --b2: #7566c0; --b8: #2b968f; --b16: #2e77c8;
  --t10: #fff4dd; --t2: #f1edff; --t8: #e3f6f3; --t16: #e6f0fc;
  --v1: #ff8db4; --v2: #ffa970; --v4: #ffd54a; --v8: #69d6a3; --v16: #79b4ff; --v32: #ad97ff; --v64: #e08ae0; --v128: #8fd3e8;
  --forest: #35915a; --qs: 1;
  --ok: #8fdfb9; --zero: #e8e4f0;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --kr: "Pretendard Variable", Pretendard, "Malgun Gothic", sans-serif;
  --num: Fredoka, "Pretendard Variable", Pretendard, sans-serif;
  --shadow: 0 14px 36px rgba(96, 74, 150, .16), 0 2px 6px rgba(96, 74, 150, .08);
  --press: 0 6px 0 rgba(59, 50, 82, .12);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 500 20px/1.5 var(--kr); color: var(--ink); background: var(--t16); word-break: keep-all; overflow-wrap: break-word; -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
button { font: inherit; color: inherit; }
button, a { touch-action: manipulation; }
@media (pointer: fine) { html { overscroll-behavior: none; } }
.skip { position: fixed; left: 16px; top: -100px; z-index: 5; min-height: 64px; padding: 0 22px; border: 0; border-radius: 18px; background: var(--ink); color: #fff; font: 700 20px var(--kr); }
.skip:focus-visible { top: 16px; outline: 4px solid var(--v4); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }
/* 숫자는 고정폭(자리가 흔들리지 않게) */
.bpill, .hud .n, .hud .chip, .key, .qno, .qans, .qask, .stop .sname, .dock .pic, .strip, .pv, .stamp .sl { font-variant-numeric: tabular-nums; }

/* 3D 무대(실험실·시작 화면 뒤) */
#c { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; touch-action: none; z-index: 0; filter: saturate(1.08) contrast(1.04); }
#hudLayer { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.hud-scale { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.hud-scale > div { position: absolute; inset: 0; }
.hud .kr { font: 700 40px var(--kr); color: var(--ink-2); padding: 4px 8px; }
body.on-map #c, body.on-map #hudLayer { display: none; }

.screen { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.screen > * { pointer-events: auto; }

/* 버튼 — 아이 손: 최소 64px, 글자 20px 이상, 누르면 살짝 눌림 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; min-width: 64px; padding: 0 20px; border: 0; border-radius: 18px;
  background: var(--card); color: var(--ink); font: 700 20px/1.1 var(--kr); cursor: pointer; box-shadow: var(--press), var(--shadow);
  transition: transform .3s var(--ease), opacity .3s var(--ease); text-decoration: none; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(59, 50, 82, .12), var(--shadow); }
.btn:focus-visible, .lab-card:focus-visible, .key:focus-visible, .stop a:focus-visible { outline: 4px solid var(--b16); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--v4); color: var(--ink); }
.btn.icon { padding: 0; width: 64px; }
.btn.xl { min-height: 80px; padding: 0 40px; font-size: 26px; border-radius: 18px; }
.btn.xl .ic { width: 32px; height: 32px; }
.btn[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* 위 막대 */
.bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.bar-title { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.bar-title .ic { width: 32px; height: 32px; color: var(--b16); }
.sound { display: flex; gap: 10px; margin-left: auto; }

/* ── 실험실 */
.lab-top { position: absolute; left: 0; right: 0; top: 0; flex-wrap: wrap; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
.lab-top .bar-title { background: rgba(255, 253, 249, .86); padding: 8px 18px; border-radius: 999px; font-size: 24px; min-height: 52px; }
.bases { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(255, 253, 249, .86); box-shadow: var(--shadow); margin-left: auto; }
.base { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 64px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 700 22px var(--kr); cursor: pointer; transition: transform .3s var(--ease); }
.base:hover { transform: translateY(-2px); }
.base:active { transform: translateY(2px); }
.base .num { font-size: 28px; }
.base[aria-checked="true"] { color: #fff; }
.base[aria-checked="true"][data-b="10"] { background: var(--b10); } .base[aria-checked="true"][data-b="2"] { background: var(--b2); }
.base[aria-checked="true"][data-b="8"] { background: var(--b8); } .base[aria-checked="true"][data-b="16"] { background: var(--b16); }
.base:focus-visible { outline: 4px solid var(--b16); outline-offset: 2px; }
.base.target::after { content: ""; position: absolute; inset: -5px; border-radius: 999px; border: 4px solid var(--v4); animation: ring 1.6s var(--ease) 3; pointer-events: none; }
@keyframes ring { 50% { transform: scale(1.12); opacity: .45; } }
.lab-top .sound { margin-left: 0; }
.cams { display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(255, 253, 249, .86); box-shadow: var(--shadow); }
.btn.cam { gap: 6px; min-height: 64px; padding: 0 14px; border-radius: 999px; box-shadow: none; background: transparent; font-size: 20px; }
.btn.cam .ic { width: 24px; height: 24px; }
.btn.cam[aria-pressed="true"] { background: var(--ink); color: #fff; }
.dock { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 10px; align-items: flex-end; padding: 10px; border-radius: 18px; background: rgba(255, 253, 249, .72); box-shadow: var(--shadow); max-width: calc(100% - 24px); }
.dock .btn { flex-direction: column; gap: 4px; min-width: 100px; min-height: 76px; padding: 8px 14px; font-size: 20px; }
.dock .btn.step { min-width: 168px; min-height: 92px; font-size: 22px; }
.dock .pic { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; font: 700 26px var(--num); }
.dock .pic svg.icon { display: block; }
.dock .pic .ic { width: 30px; height: 30px; }
#bAuto[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* 대화상자(여권·탐험가 번호·선생님 메뉴) */
.sheet { overscroll-behavior: contain; border: 0; padding: 22px; border-radius: 18px; background: linear-gradient(180deg, var(--t2), var(--card) 40%); color: var(--ink); box-shadow: 0 30px 80px rgba(59, 50, 82, .3); width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.sheet.wide { width: min(720px, calc(100vw - 24px)); }
.sheet::backdrop { background: rgba(59, 50, 82, .35); }
.sheet[open] { animation: rise .45s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.sheet-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 10px; }
.sheet-head h2 { font-size: 28px; font-weight: 800; min-width: 0; }
.sheet-head .btn { flex: none; }
.pad-out { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 10px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 3px var(--line); }
.pad-out .num { font-size: 64px; font-weight: 700; line-height: 1.1; min-width: 1.4em; text-align: center; }
.pad-out .unit { font-size: 24px; font-weight: 700; }
.pad-out.bad { box-shadow: inset 0 0 0 4px var(--red); animation: shake .4s var(--ease); }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.pad-hint { margin: 10px 0 14px; text-align: center; color: var(--ink); font-size: 20px; }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key { min-height: 72px; border: 0; border-radius: 18px; background: var(--card); box-shadow: var(--press), var(--shadow); font: 700 34px var(--num); color: var(--ink); cursor: pointer; transition: transform .3s var(--ease); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.key:hover { transform: translateY(-2px); }
.key:active { transform: translateY(3px); }
.key.ok { background: var(--v4); font: 800 24px var(--kr); }
.key.ok[disabled] { opacity: .42; cursor: not-allowed; }
.key.del { font: 700 22px var(--kr); }
.bd-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 30px; }
.bd-title .no { font: 700 20px var(--num); color: #fff; background: var(--ink); padding: 2px 12px; border-radius: 999px; }
.bd-how { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 3px var(--line); font-size: 22px; }
.bd-how .big { font: 700 34px var(--num); }
.bd-how .note { flex-basis: 100%; color: var(--ink); font-size: 20px; font-weight: 500; }
.bd-sub { margin: 18px 0 10px; font-size: 22px; font-weight: 800; }
.bd-ex { display: flex; flex-wrap: wrap; gap: 12px; }
.ex { display: inline-flex; align-items: baseline; gap: 2px; min-height: 64px; padding: 10px 22px; border: 0; border-radius: 18px; background: var(--card); box-shadow: var(--press), var(--shadow); font: 700 30px var(--num); color: var(--ink); cursor: pointer; transition: transform .3s var(--ease); }
.ex:hover { transform: translateY(-2px); }
.ex:active { transform: translateY(3px); }
.ex, .lab-card, .bridge { text-decoration: none; }
.ex .bs { font-size: .55em; font-weight: 700; padding: 1px 8px 2px; border-radius: 999px; margin-left: 4px; transform: translateY(.3em); display: inline-block; }
.bd-foot { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }

/* ── 세로 화면(휴대폰): 실험실 위 막대는 두 줄 */
@media (orientation: portrait) {
  .lab-top { gap: 8px; padding: 8px; }
  .lab-top .bar-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
  .bases { margin: 0; gap: 2px; padding: 4px; flex: 1; justify-content: space-between; }
  .base { padding: 0 10px; min-width: 52px; justify-content: center; font-size: 20px; }
  .base .num { font-size: 24px; }
  .base .w { display: none; }
  .cams { order: 5; padding: 4px; }
  .btn.cam { width: 56px; padding: 0; }
  .btn.cam span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lab-top .sound { order: 6; margin-left: auto; }
  .dock { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); transform: none; max-width: none; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 6px; padding: 6px; border-radius: 18px; }
  .dock .btn { min-width: 0; min-height: 72px; padding: 6px 2px; font-size: 20px; border-radius: 18px; }
  .dock .btn.step { grid-column: span 2; min-height: 72px; }
  .dock .btn span:not(.pic) { font-size: 20px; letter-spacing: -.04em; }
  .sheet { padding: 18px; }
}
@media (max-width: 1260px) { .btn.cam { width: 64px; padding: 0; } .btn.cam span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (max-width: 960px) and (orientation: landscape) {   /* 작은 가로 창(800×600): 위 막대를 한 줄로 — 진법 단추는 숫자만(읽기는 aria-label) */
  .base .w { display: none; }
  .base { padding: 0 14px; min-width: 64px; justify-content: center; }
  .gs .cells { display: none; }
}
@media (max-width: 1100px) and (orientation: landscape) {
  .dock .btn { min-width: 84px; padding: 8px 8px; }
  .dock .btn.step { min-width: 140px; }
  .lab-top .bar-title { display: none; }
}

/* ── 톱니(선생님 메뉴, 2초 꾹) */
.gear { position: relative; }
.gear::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 5px; border-radius: 3px; background: var(--b16); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; }   /* 꾹 누르는 2초 동안 차오르는 막대 */
.gear.holding::after { opacity: 1; animation: hold 2s linear forwards; }
@keyframes hold { to { transform: scaleX(1); } }
/* ── 칸 건물: 칸막이 고르기 · 단추 그림 */
.gsel { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255, 253, 249, .86); box-shadow: var(--shadow); margin-left: auto; }
.gs { gap: 6px; padding: 0 16px; }
.gs .bs { display: inline-block; font: 700 15px var(--num); padding: 1px 6px 2px; border-radius: 999px; transform: translateY(6px); }
/* 작은 진법 알약(글자 19px 미만)은 흰 바탕 + 진법색 테두리 + 잉크색 글자(SPEC 2.5 대비 확보) */
.ex .bs, .gs .bs, .key.lj small .bs, .ltable .bs, .hud .strip16 .bs, .bar-row .bn .bs, .plist .bs, .stamp .bs { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--bc, var(--ink)); }
.bs.b10 { --bc: var(--b10); } .bs.b2 { --bc: var(--b2); } .bs.b8 { --bc: var(--b8); } .bs.b16 { --bc: var(--b16); }
.gs[aria-checked="true"] .bs { box-shadow: none; }
.hud.kit .op, .qz-title .ar { color: var(--ink-2); }
.gs[aria-checked="true"] { background: var(--ink); color: #fff; }
.gs[aria-checked="true"] .cells i { border-color: #fff; }
.gs[aria-disabled="true"] { opacity: .5; }
.cells { display: inline-flex; gap: 2px; padding: 3px; border-radius: 6px; box-shadow: inset 0 0 0 2px currentColor; }
.cells i { width: 9px; height: 13px; border-radius: 3px; border: 2px solid var(--ink-2); }
.cells.open { box-shadow: none; gap: 4px; }
.dock .pic .cells i { width: 11px; height: 16px; }
.dock .pic .wts { font: 700 22px var(--num); letter-spacing: .08em; }
.dock .pic .zic { width: 26px; height: 26px; border-radius: 50%; border: 7px solid #cfc8de; box-sizing: border-box; }
.dock .pic .jel { width: 24px; height: 24px; border-radius: 8px; background: var(--v1); box-shadow: inset 0 -3px 0 rgba(224, 98, 143, .5); }
.dock .pic b { font: 700 24px var(--num); }
.btn.back-quiz { background: var(--v4); }
/* 칸 건물: 키보드로 전구 켜고 끄기(3D 집을 누르는 것과 같음) — 평소엔 숨었다가 초점이 들어오면 조작 막대 위에 나타난다 */
.bitkeys { position: fixed; left: 50%; bottom: calc(118px + env(safe-area-inset-bottom)); z-index: 3; display: flex; gap: 8px; padding: 8px; border-radius: 18px; background: rgba(255, 253, 249, .95); box-shadow: var(--shadow); transform: translateX(-50%); }
.bitkeys:not(:focus-within) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.bitkeys .btn { min-width: 64px; padding: 0 12px; font: 700 22px var(--num); }
.bitkeys .btn[aria-pressed="true"] { background: #ffd54a; color: var(--ink); }
/* HUD: 왜 3칸(4칸)인가 카드 */
.hud .why { width: 520px; padding: 14px 22px; font: 600 26px/1.45 var(--kr); white-space: normal; word-break: keep-all; color: var(--ink); }
.hud .why p { margin: 0; }
.hud .why b { font-weight: 800; }
/* HUD: 16진법 숫자 띠(0~9 · A~F, 글자 아래 10~15) */
.hud .strip16 { display: grid; grid-template-columns: repeat(8, auto); gap: 8px 10px; align-items: start; padding: 14px 20px; font-size: 44px; }
.hud .strip16 .sd { display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 18px; padding: 2px; }
.hud .strip16 .sd.hit { background: #fff3c4; box-shadow: 0 0 0 4px #ffd54a; }

/* ── 퀴즈: 왼쪽 문제 카드 · 오른쪽 위 박사와 하나(3D) · 오른쪽 아래 도움 카드 */
.hud.kit { position: relative; inset: auto; pointer-events: auto; white-space: normal; }
#quiz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 20px; padding: 0 max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.quiz-top { grid-column: 1 / -1; padding: max(12px, env(safe-area-inset-top)) 0 12px; flex-wrap: wrap; }
.qz-title { background: rgba(255, 253, 249, .86); padding: 6px 18px 6px 8px; border-radius: 999px; min-height: 52px; gap: 8px; }
.qz-title .ar { color: var(--ink-2); font: 600 24px var(--num); }
.qprog { display: flex; gap: 6px; margin: 0 0 0 auto; padding: 6px 12px; list-style: none; border-radius: 999px; background: rgba(255, 253, 249, .86); }
.qprog li { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.qprog li .ic { width: 30px; height: 30px; color: #cfc6e6; }
.qprog li.now { background: #fff3c4; }
.qprog li.now .ic { color: #d9a21f; }
.qprog li.star .ic { fill: var(--v4); color: #c79a1c; }
.quiz-top .sound { margin-left: 0; }
.qmain { grid-column: 1; grid-row: 2; align-self: start; max-height: 100%; overflow: auto; overscroll-behavior: contain; scroll-padding-bottom: 110px; display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 20px; border-radius: 18px;
  background: linear-gradient(180deg, var(--t2), var(--card) 46%); box-shadow: var(--shadow); color: var(--ink); font-family: var(--kr); }
.qhead { display: flex; align-items: center; gap: 14px; }
.qno { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--v4); font: 700 calc(30px * var(--qs)) var(--num); box-shadow: inset 0 -4px 0 rgba(59, 50, 82, .14); }
.qask { flex: 1; min-width: 0; font: 600 calc(50px * var(--qs)) / 1.2 var(--num); }
.qask-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.qask .cell3 { padding: 0 .12em; border-radius: .2em; box-shadow: inset 0 0 0 3px #d9d1ee; background: #fff; }
.qask .bar { display: inline-block; width: 6px; height: .9em; margin: 0 .14em; border-radius: 3px; background: var(--b8); align-self: center; }
.qans { display: flex; align-items: center; justify-content: center; min-height: calc(84px * var(--qs)); padding: 6px 16px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 3px var(--line); font: 600 calc(54px * var(--qs)) var(--num); }
.qans .n { align-items: center; }
.qans .slot { display: inline-grid; place-items: center; min-width: .7em; }
.qans .qbox.empty { margin-right: 4px; }
.qans .slot.cursor { width: 4px; min-width: 0; height: .9em; margin: 0 4px; border-radius: 2px; background: var(--b16); }   /* 깜빡이지 않는 글자 자리 표시 */
.qtip { margin: 0 0 6px; text-align: center; font-size: calc(20px * var(--qs)); }
.bulbrow { display: flex; gap: 8px; justify-content: center; }
.bh { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; max-width: 96px; padding: 6px 2px 8px; border: 0; border-radius: 18px; background: transparent; cursor: pointer; transition: transform .3s var(--ease); }
.bh:hover { background: rgba(255, 255, 255, .7); }
.bh:active { transform: translateY(3px); }
.bh:focus-visible { outline: 4px solid var(--b16); outline-offset: 2px; }
.bh[disabled] { cursor: default; }
.bh .wt { font-size: calc(22px * var(--qs)); min-height: 1.3em; }
.bh .roof { width: 92%; height: 24px; background: var(--rc); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bh .body { display: grid; place-items: center; width: 78%; height: 54px; border-radius: 0 0 12px 12px; background: #fffaf2; box-shadow: inset 0 0 0 3px #efe8f7; }
.bh .lamp { position: relative; width: 30px; height: 30px; border-radius: 50%; background: #d9d4e6; box-shadow: inset 0 -3px 0 rgba(59, 50, 82, .12); }
.bh .lamp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ffd54a; box-shadow: 0 0 0 6px rgba(255, 213, 74, .35), 0 0 22px 8px rgba(255, 207, 74, .65); opacity: 0; transition: opacity .3s var(--ease); }
.bh.on .lamp::after { opacity: 1; }
.bh .dig { font-size: calc(30px * var(--qs)); }
.kgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.kgrid .key { min-height: calc(68px * var(--qs)); font-size: calc(34px * var(--qs)); }
.kgrid .key.bad { background: #f5f2fa; color: #b9b0cf; box-shadow: inset 0 0 0 3px #e1daee; background-image: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(205, 197, 222, .35) 8px 11px); }
.kgrid .key.lj { position: relative; flex-direction: column; gap: 0; line-height: 1; background: #dceaff; color: #2e4f91; box-shadow: inset 0 0 0 4px #9cc6ff, var(--press); }
.kgrid .key.lj b { font: 700 calc(32px * var(--qs)) var(--num); }
.kgrid .key.lj small { font: 600 calc(20px * var(--qs)) var(--num); color: var(--ink); }
.kgrid .key.lj small .bs, .ltable .bs { font-size: .72em; transform: translateY(.25em); }   /* 작은 (10) 알약도 읽히게 */
.lj-face { width: 24px; height: 7px; margin-bottom: 3px; background: radial-gradient(circle at 3.5px 3.5px, #2a2140 3px, transparent 3.5px) left / 7px 7px no-repeat, radial-gradient(circle at 3.5px 3.5px, #2a2140 3px, transparent 3.5px) right / 7px 7px no-repeat; }
.kgrid .key.del { font-size: 22px; }
.qact { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.qmain > .qact { position: sticky; bottom: -20px; margin: 0 -22px -20px; padding: 10px 22px 16px; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, rgba(255, 253, 249, 0), var(--card) 30%); }
.nw { white-space: nowrap; }   /* 주 버튼은 늘 보이게 */
.qact .btn.big { min-height: 72px; min-width: 168px; font-size: 24px; }
.qact .btn.used { opacity: .55; }
.shake { animation: shake .45s var(--ease) 2; }
/* 도움 카드(오개념 장면 · 힌트 · 풀이 · 맞음) */
.qside { grid-column: 2; grid-row: 2; align-self: end; max-height: 58%; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 18px 22px; border-radius: 18px;
  background: linear-gradient(180deg, var(--t10), var(--card) 50%); box-shadow: var(--shadow); color: var(--ink); font-family: var(--kr); animation: rise .45s var(--ease); }
.qside:focus-visible { outline: 4px solid var(--b16); outline-offset: 3px; }   /* 길어지면 키보드로 스크롤(초점 받음) */
.qside.right { background: linear-gradient(180deg, #e8f8ef, var(--card) 60%); }
.qside .say { margin: 0; font-size: calc(24px * var(--qs)); font-weight: 800; line-height: 1.35; }
.qside .say .ic { vertical-align: -6px; margin-right: 6px; }
.qside .say.ok { color: #2f6b52; font-size: calc(30px * var(--qs)); }
.qside .say .ic { width: 30px; height: 30px; }
.qside .note { margin: 0; font-size: calc(20px * var(--qs)); }
.qside .line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 calc(38px * var(--qs)) var(--num); }
.qside .line.big { font-size: calc(46px * var(--qs)); }
.qside .line .kr { font: 700 calc(20px * var(--qs)) var(--kr); color: var(--ink-2); }
.qside .gap { width: 14px; }
.hintc { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-radius: 18px; background: #fff8dc; box-shadow: inset 0 0 0 3px #ffe8a3; }
.mini-lad { position: relative; display: flex; flex-direction: column; gap: 6px; padding-right: 52px; width: max-content; font: 600 calc(34px * var(--qs)) var(--num); }
.mini-lad .lr { display: flex; align-items: center; gap: 10px; }
.mini-lad .dv { color: var(--ink-2); width: 1.1em; text-align: right; }
.mini-lad .nb { min-width: 2.2em; padding: 0 8px; border-left: 4px solid var(--line); border-bottom: 4px solid var(--line); border-bottom-left-radius: 14px; }
.mini-lad .rbox { width: 1.15em; height: 1.15em; border-radius: 10px; border: 4px dashed #c9bfe3; }
.mini-lad .rbox.first { border-color: var(--b2); }
.uparrow { position: absolute; right: 0; top: 8px; bottom: 8px; width: 36px; height: calc(100% - 16px); }
.uparrow path { fill: none; stroke: #b59cff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.sol-lad { position: relative; display: flex; flex-direction: column; gap: 4px; padding-right: 48px; width: max-content; font: 600 calc(32px * var(--qs)) var(--num); }
.sol-lad .sl { display: flex; align-items: center; gap: 8px; }
.grp { display: flex; align-items: center; gap: 8px; font: 600 calc(36px * var(--qs)) var(--num); }
.grp .cell3 { padding: 2px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 4px var(--b8); }
.grp.bad .cell3 { box-shadow: inset 0 0 0 4px #ff8f9b; }
.grp .mk { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 26px; font-weight: 800; }
.grp .mk.no { background: #ffd6db; color: #a33a4a; } .grp .mk.yes { background: #c8f0da; color: #2f6b52; }
.grp .zpad { font-style: normal; color: #b0a7c6; }
.tilt { display: inline-block; transform-origin: 0 100%; animation: tilt 2.4s var(--ease) .3s both; }
@keyframes tilt { 0% { transform: none; } 20% { transform: rotate(-6deg); } 35% { transform: rotate(4deg); } 50% { transform: rotate(-8deg); } 100% { transform: rotate(-24deg) translateY(10px); opacity: .45; } }
.ltable { display: flex; flex-wrap: wrap; gap: 10px; font: 600 calc(34px * var(--qs)) var(--num); }
.ltable .lt { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .9em; }
.ltable .lt .n { font-size: .7em; }
.wrow { display: flex; gap: 10px; font: 600 calc(36px * var(--qs)) var(--num); }
.wrow .wc { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wrow .w { font-size: .7em; }
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); align-items: center; gap: 4px 10px; font-size: calc(20px * var(--qs)); font-weight: 700; }
.barv { display: block; width: var(--w); height: 24px; border-radius: 12px; }
.barv.mine { background: var(--v32); } .barv.goal { background: var(--v8); }
.bar-row .bn { grid-column: 2; font: 600 calc(30px * var(--qs)) var(--num); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.chunks { display: flex; flex-wrap: wrap; gap: 12px; font: 600 calc(30px * var(--qs)) var(--num); }
.chunks .ck { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 3px var(--line); }
.chunks .cd { margin: 0 6px; font-size: 1.3em; }
.chunks.col { flex-direction: column; align-items: flex-start; gap: 8px; }
.chunks .ck .chip { font-size: .8em; }
/* 끝: 별 · 도장 */
.qend { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 8px 0; }
.qend-t { font-size: calc(40px * var(--qs)); font-weight: 800; }
.stars { display: flex; gap: 8px; }
.stars span .ic { width: 52px; height: 52px; color: #cfc6e6; }
.stars span.on .ic { fill: var(--v4); color: #c79a1c; }
.qend .say { margin: 0; font-size: 22px; font-weight: 700; }
.qend .note { margin: 0; font-size: 20px; }
.qend .qact { justify-content: center; }
.stamp { --sc: var(--b2); display: grid; justify-items: center; align-content: center; gap: 2px; width: min(120px, 100%); height: auto; aspect-ratio: 1; border-radius: 50%; border: 5px dashed var(--sc); color: var(--sc); background: #fff; list-style: none; }
.stamp .ic { width: 40px; height: 40px; }
.stamp .sl { font: 700 20px var(--num); }
.stamp .ss { display: inline-flex; align-items: center; gap: 2px; font: 700 18px var(--num); }
.stamp .ss .ic { width: 18px; height: 18px; fill: currentColor; }
.stamp.forest { --sc: var(--forest); } .stamp.sea { --sc: var(--b8); } .stamp.space { --sc: var(--b16); } .stamp.village { --sc: var(--b10); }
.stamp.got { border-style: solid; background: radial-gradient(circle, #fff 58%, color-mix(in srgb, var(--sc) 14%, #fff)); transform: rotate(-8deg); }
.stamp.gold { box-shadow: 0 0 0 5px #fff, 0 0 0 9px #d9a21f; }
.stamp.big { width: 180px; height: 180px; border-style: solid; border-width: 7px; transform: rotate(-8deg); animation: stampIn .5s var(--ease) both; }
.stamp.big .ic { width: 64px; height: 64px; }
.stamp.big span { font: 700 28px var(--num); }
@keyframes stampIn { from { transform: scale(1.8) rotate(-8deg); opacity: 0; } }
.qtimer { position: relative; flex: none; width: 64px; height: 64px; }
.qtimer svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.qtimer .tr { fill: #fffdf9; stroke: #ece6fb; stroke-width: 5; }
.qtimer .tp { fill: none; stroke: #c4b0ff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.qtimer .num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; font-weight: 700; }
body.lesson { --qs: 1.5; }
@media (max-height: 900px) { body.lesson { --qs: 1.25; } }
.stamp:not(.got) .ic { opacity: .55; }   /* 아직 못 받은 도장: 그림만 흐리게(글자 대비는 그대로) */

/* ── 선생님 메뉴 */
.tbody { display: flex; flex-direction: column; gap: 14px; }
.trow { margin: 0; padding: 14px 16px; border: 0; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 3px var(--line); }
.tnote { margin: 6px 0 0; font-size: 20px; }
.tnote kbd { display: inline-block; min-width: 1.6em; margin: 0 2px; padding: 0 6px; border-radius: 8px; background: #f1edff; font: 700 18px var(--num); text-align: center; box-shadow: inset 0 -2px 0 rgba(59, 50, 82, .15); }
.sw { display: flex; align-items: center; gap: 14px; min-height: 64px; cursor: pointer; font-size: 22px; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swt { position: relative; flex: none; width: 64px; height: 38px; border-radius: 999px; background: #d9d4e6; }
.swt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--b8); opacity: 0; transition: opacity .3s var(--ease); }
.sw input:checked + .swt::before { opacity: 1; }
.sw:hover .swt { box-shadow: 0 0 0 4px rgba(46, 119, 200, .18); }
.swt::after { content: ""; position: absolute; left: 4px; top: 4px; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(59, 50, 82, .2); transition: transform .3s var(--ease); }
.sw input:checked + .swt::after { transform: translateX(26px); }
.sw input:focus-visible + .swt { outline: 4px solid var(--b16); outline-offset: 3px; }
.tset { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.tset legend { float: left; width: 100%; font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.tset label, .tload label { display: flex; flex-direction: column; gap: 4px; font-size: 20px; font-weight: 700; }
.tset select, .tset input, .tload input { min-height: 64px; padding: 0 14px; border: 0; border-radius: 18px; background: #f6f3fb; box-shadow: inset 0 0 0 3px var(--line); font: 600 22px var(--kr); color: var(--ink); }
.tset input { width: 8em; font-family: var(--num); }
.tset select:focus-visible, .tset input:focus-visible, .tload input:focus-visible { outline: 4px solid var(--b16); outline-offset: 2px; }
.tcode { flex-basis: 100%; font: 700 40px var(--num); color: var(--b2); }
.tbtns { display: flex; gap: 12px; flex-wrap: wrap; flex-basis: 100%; justify-content: flex-end; }
.tload { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.tload .tnote { flex-basis: 100%; }
.btn.danger { color: var(--red); }
/* ── 학습지(화면에서는 종이 미리보기, 인쇄하면 종이만) */
#print { position: static; pointer-events: auto; min-height: 100dvh; padding: 16px; background: #eef0f6; }
.print-bar { display: flex; gap: 12px; justify-content: flex-end; max-width: 900px; margin: 0 auto 12px; }
.print-box { max-width: 900px; margin: 0 auto; padding: 36px 40px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); color: #222; }
.ph h2 { font-size: 30px; font-weight: 800; }
.ph .pc { font: 700 24px var(--num); color: var(--b2); margin-left: 8px; }
.ph p { margin: 6px 0 0; font-size: 18px; }
.ph .who { display: flex; gap: 10px; align-items: flex-end; justify-content: flex-end; }
.ph .ln { display: inline-block; width: 160px; border-bottom: 2px solid #222; }
.ph .ln.short { width: 60px; }
.plist { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin: 22px 0 0; padding: 0 0 0 28px; font-family: var(--num); color: #222; }
.plist > li { break-inside: avoid; font-size: 18px; }
.plist .pq { display: flex; align-items: center; gap: 8px; font-size: 30px; font-weight: 600; }
.plist .bs { font-size: .5em; }
.wb { display: inline-block; width: 36px; height: 36px; border: 2px solid #8a83a3; border-radius: 6px; vertical-align: middle; }
.wb.ans { width: 120px; }
.wb.r { width: 30px; height: 30px; }
.wb.wide { width: 70px; }
.wb.sq { width: 26px; height: 26px; }
.wl { margin-top: 8px; font-size: 22px; }
.wlr { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.wd { width: 1.2em; text-align: right; color: #666; }
.wn { min-width: 70px; padding: 2px 8px; }
.wn.bar { border-left: 2px solid #222; border-bottom: 2px solid #222; border-bottom-left-radius: 10px; }
.wdots { color: #888; }
.wfree { height: 120px; margin-top: 6px; border: 2px dashed #ccc; border-radius: 10px; }
.ws, .wsum, .wg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; font-size: 22px; }
.ws .wt { display: inline-flex; align-items: center; gap: 4px; }
.ws .chip { font-size: 18px; }
.wck { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; border: 2px solid #b8b0cf; border-radius: 10px; }
.wbits { font-size: 24px; letter-spacing: .12em; }
.wwt { font-size: 16px; color: #555; letter-spacing: .2em; }
.wcells { display: flex; gap: 2px; }
.pletters { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; font-size: 22px; }
.pkey { margin-top: 28px; padding-top: 16px; border-top: 2px dashed #bbb; font-size: 16px; }
.pkey h3 { font-size: 18px; margin: 0 0 8px; }
.pkey ol { columns: 2; }
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; }
  body > :not(#print), .print-bar, dialog { display: none !important; }
  #print { padding: 0; background: #fff; }
  .print-box { max-width: none; padding: 0; box-shadow: none; border-radius: 0; }
  .pkey { break-before: page; border-top: 0; }
}

/* ── 세로 화면: 퀴즈는 위쪽 띠에 박사·하나, 아래로 문제 카드 · 도움 카드(스크롤) */
@media (orientation: portrait) {
  #quiz { display: flex; flex-direction: column; overflow-y: auto; padding-top: 0; scroll-padding-bottom: 110px; }
  #quiz::before { content: ""; order: 1; flex: none; height: 25vh; }
  .quiz-top { order: 0; gap: 8px; }
  .qz-title { font-size: 20px; }
  .qprog { margin-left: 0; padding: 4px 8px; }
  .qprog li { width: 34px; height: 34px; }
  .quiz-top .sound { margin-left: auto; }
  .qmain { order: 2; max-height: none; overflow: visible; flex: none; padding: 14px 14px 16px; }
  .qmain > .qact { bottom: 0; margin: 0 -14px -16px; padding: 10px 14px 14px; }
  .qside { order: 3; max-height: none; flex: none; margin-top: 12px; align-self: stretch; }
  .qask { font-size: calc(34px * var(--qs)); }
  .qno { width: 44px; height: 44px; font-size: 24px; }
  .kgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .bulbrow { gap: 2px; }
  .bh .body { height: 46px; }
  .gsel { margin: 0; gap: 2px; padding: 4px; flex: 1; justify-content: space-between; }
  .gs { padding: 0 8px; min-width: 52px; justify-content: center; }
  .gs .w, .gs .cells { display: none; }
  .gs:first-child .w { display: inline; font-size: 18px; }
  .plist { grid-template-columns: 1fr; }
  .print-box { padding: 20px 16px; }
  .bar-row { grid-template-columns: minmax(0, 1fr); }   /* 좁은 폭: 막대 아래에 수를 */
  .bar-row .bn { grid-column: 1; }
}
@media (max-width: 1100px) and (orientation: landscape) {
  #quiz { grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); }
  .gs .w { display: none; }
  .gs:first-child .w { display: inline; font-size: 20px; }   /* '칸막이 없음'은 글자뿐이라 남긴다 */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── 진법 알약 · 실험실 고르기 카드(지도의 실험실 섬 → 대화상자) */
.bpill { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.45em; padding: 0 .35em; border-radius: 999px; color: #fff; font: 700 1em var(--num); }
.bpill.b10 { background: var(--b10); } .bpill.b2 { background: var(--b2); } .bpill.b8 { background: var(--b8); } .bpill.b16 { background: var(--b16); }
.labs { display: grid; gap: 12px; }
.lab-card { display: flex; align-items: center; gap: 16px; min-height: 84px; padding: 10px 18px; border-radius: 18px; background: var(--card); box-shadow: var(--press), 0 0 0 1px rgba(59, 50, 82, .08); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease); }
.lab-card:hover { transform: translateY(-2px); }
.lab-card:active { transform: translateY(3px); }
.lab-card .lab-ic img { display: block; width: 56px; height: 56px; }
.lab-txt { display: flex; flex-direction: column; line-height: 1.3; }
.lab-txt b { font-size: 22px; font-weight: 800; }
.lab-txt span { font-size: 18px; color: var(--ink-2); font-weight: 500; }

/* ── 바꾸기 역 끝 단추(실험실 위, 오른쪽 아래): 확인 문제 · 다음 역 */
.st-bar { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: 120px; z-index: 3; display: flex; gap: 8px; padding: 8px; border-radius: 18px; background: rgba(255, 253, 249, .92); box-shadow: var(--shadow); }
.st-bar .btn { min-height: 64px; padding: 0 16px; gap: 8px; box-shadow: none; }
.st-bar .btn.primary { box-shadow: var(--press); }
.st-bar .nxp, .btn.next .nxp { display: inline-flex; align-items: center; gap: 2px; font: 700 20px var(--num); }
.st-bar .nxp .ar, .btn.next .nxp .ar { color: var(--ink-2); }
.st-bar .nxp .w, .btn.next .nxp .w { font: 700 18px var(--kr); }
#labTitle .bpill { font-size: .9em; }
#labTitle .ar { color: var(--ink-2); margin: 0 2px; }
/* core 묶음 기계의 '×b' 칩은 인라인 #a69dc0(흰 칩 위 2.5:1) — 앱에서는 잉크 2(4.9:1)로 */
.hud .chip.white[style*="#a69dc0"] { color: var(--ink-2) !important; }
@media (max-width: 560px) {   /* 휴대폰: 역 끝 단추는 화면 폭에 맞춰 둘로 나눈다 */
  .st-bar { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); }
  .st-bar .btn { flex: 1 1 0; min-width: 0; padding: 0 10px; gap: 6px; }
}
.st-bar .nxp { max-width: 360px; overflow: hidden; white-space: nowrap; }
.st-bar .nxp .tagp { font-size: 16px; }
@media (max-width: 560px) { .st-bar .nxp { display: none; } }

/* ── 9판 설정 판(오른쪽에서 나옴) · 끝 막대 차례 · 실험실 고르기 두 묶음 */
.sheet.side { inset: 0 0 0 auto; margin: 0; width: min(460px, 100vw); height: 100dvh; max-height: 100dvh; padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) 20px; border-radius: 18px 0 0 18px; }
.sheet.side[open] { animation: slidein .45s var(--ease); }
@keyframes slidein { from { opacity: 0; transform: translateX(48px); } }
.sbody { display: grid; }
.sset { display: grid; gap: 10px; padding: 18px 0; border-top: 1px solid var(--line); }
.sset:first-child { border-top: 0; padding-top: 4px; }
.sset h3 { font: 800 20px/1.3 var(--kr); }
.sset .sw { font-size: 20px; }
.srange { display: grid; grid-template-columns: auto minmax(0, 1fr) 3ch; align-items: center; gap: 14px; min-height: 64px; font-size: 20px; }
.srange input { width: 100%; height: 44px; accent-color: var(--b16); cursor: pointer; }
.srange input:focus-visible { outline: 4px solid var(--b16); outline-offset: 2px; }
.srange output { font: 700 20px var(--num); text-align: right; }
.sq, .fbc { margin: 0; padding: 0; border: 0; min-width: 0; }
.sq legend, .fbc legend { padding: 0; margin-bottom: 8px; font: 700 20px var(--kr); }
.sqs, .fbcs { display: flex; flex-wrap: wrap; gap: 8px; }
.sqo { position: relative; display: inline-flex; }
.sqo input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sqo span { display: inline-flex; align-items: center; min-height: 56px; padding: 0 18px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); font: 700 19px var(--kr); cursor: pointer; }
@media (hover: hover) { .sqo:hover input:not(:checked) + span { box-shadow: inset 0 0 0 2px var(--mute); } }
.sqo input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.sqo input:focus-visible + span { outline: 4px solid var(--b16); outline-offset: 2px; }
#fbForm { display: grid; gap: 10px; }
.sfield { display: grid; gap: 6px; font-size: 20px; }
.sfield textarea, .sfield input { width: 100%; min-height: 56px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); font: 500 19px/1.5 var(--kr); resize: vertical; }
.sfield textarea::placeholder { color: var(--ink-2); }
.sfield textarea:focus-visible, .sfield input:focus-visible { outline: 4px solid var(--b16); outline-offset: 1px; border-color: var(--b16); }
.sfield .opt { font-weight: 600; color: var(--ink-2); }
.snote { margin: 0; font: 600 17px/1.45 var(--kr); color: var(--ink-2); }
.snote.warn { color: var(--ink); }
.sact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sask { flex-basis: 100%; margin: 0; font: 700 20px var(--kr); }
.smsg { margin: 0; min-height: 28px; font: 700 18px/1.45 var(--kr); }
.smsg.ok, .smsg.bad { padding: 8px 12px; border-radius: 11px; }
.smsg.ok { background: var(--t8); box-shadow: inset 4px 0 0 var(--ok); }
.smsg.bad { background: #fdf0f1; box-shadow: inset 4px 0 0 var(--red); }
.smsg:empty { padding: 0; }
.sabout p, .slist { margin: 0; font-size: 18px; }
.sabout h3 { margin-top: 8px; }
.sabout a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--b16); font-weight: 700; text-underline-offset: 3px; }
.sabout a .ic, #sPlay .ic:last-child { width: 18px; height: 18px; }
.slist { padding-left: 1.2em; color: var(--ink); }
#sPlay { justify-content: flex-start; white-space: normal; text-align: left; }
.st-bar .stno { align-self: center; padding: 0 6px 0 8px; font: 600 18px var(--num); color: var(--ink-2); white-space: nowrap; }
.labh { margin: 14px 0 10px; font: 800 20px var(--kr); }
.labh:first-of-type { margin-top: 0; }
.sheet.wide .labs { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lab-ic.xi { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 18px; }
.lab-ic.xi .ic { width: 34px; height: 34px; }
.xi.b10 { background: var(--t10); color: var(--b10); } .xi.b2 { background: var(--t2); color: var(--b2); } .xi.b8 { background: var(--t8); color: var(--b8); } .xi.b16 { background: var(--t16); color: var(--b16); }
@media (max-width: 560px) { .sheet.side { border-radius: 0; } }
html:has(#stBar:not([hidden])) { scroll-padding-bottom: 130px; }   /* 9판: 아래 끝 막대가 초점 받은 단추를 가리지 않게(글 화면 스크롤) */

/* ── 영상 창(video.js): 앱 안에서 유튜브 · 유튜브 마크 */
.ytm { width: 30px; height: 22px; flex: none; }
.vnote { margin: 0 0 12px; padding: 12px 16px; border-radius: 11px; background: var(--t16); box-shadow: inset 0 0 0 2px var(--b16); font: 700 19px/1.45 var(--kr); text-wrap: pretty; }
.sheet.vid { width: min(880px, calc(100vw - 24px)); padding: 18px; }
.vframe { aspect-ratio: 16 / 9; max-height: calc(100dvh - 230px); margin-inline: auto; border-radius: 14px; overflow: hidden; background: var(--ink); }
.vframe iframe { display: block; width: 100%; height: 100%; border: 0; }
.vframe .vsoon { display: grid; place-items: center; height: 100%; margin: 0; color: #fff; font: 700 clamp(18px, 3vw, 26px)/1.3 var(--kr, "Pretendard Variable", sans-serif); }
.vacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.vacts .btn { min-height: 56px; padding: 0 18px; font-size: 19px; }
.vacts a.btn { margin-left: auto; }
@media (max-width: 600px) {   /* 휴대폰: 화면 폭 그대로 · 단추는 한 줄에 하나 */
  .sheet.vid { width: 100vw; max-width: 100vw; padding: 12px; border-radius: 18px; }
  .vacts .btn { flex: 1 1 100%; white-space: normal; }
  .vacts a.btn { margin-left: 0; }
}