/* 명화 탐험대 — 밤의 미술관 톤(남색 + 금빛). 기본틀 토큰(--gb-*)만 덮고, 게임 고유 요소는 --aq-* 토큰으로. */
:root {
  --gb-bg: #0b1020;
  --gb-accent: #f0c46a;
  --gb-accent-ink: #2a1c05;
  --gb-gold: #f0c46a;
  --aq-bg: #0b1020;
  --aq-panel: rgba(18, 26, 50, 0.92);
  --aq-panel-2: rgba(255, 255, 255, 0.07);
  --aq-line: rgba(255, 255, 255, 0.12);
  --aq-text: #eef2ff;
  --aq-dim: rgba(238, 242, 255, 0.66);
  --aq-gold: #f0c46a;
  --aq-gold-ink: #2a1c05;
  --aq-good: #7fd8a6;
  --aq-bad: #ff8a80;
  --aq-radius: 16px;
  --aq-font: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
  --aq-text-scale: 1;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--aq-bg); color: var(--aq-text); font-family: var(--aq-font); overflow: hidden;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
body { font-size: calc(15px * var(--aq-text-scale)); }
button { font-family: inherit; touch-action: manipulation; }
#app { position: fixed; inset: 0; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; z-index: 30; }
.fade.on { opacity: 1; }
.reduce .fade { transition: none; }

/* 화면 층: 전체를 덮는 층은 포인터를 통과시키고(캔버스 조작), 단추만 받는다(lessons §5 ②) */
.screen { position: absolute; inset: 0; z-index: 10; }
.screen.hud { pointer-events: none; }
.screen.hud button, .screen.hud .riddle, .screen.hud .stick { pointer-events: auto; }

/* ── 홈 ── */
.home { overflow-y: auto; padding: max(14px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% -10%, #263a73 0%, #0b1020 62%); }
.home-art { position: fixed; inset: 0; background: url("../assets/img/keyart.webp") center 30% / cover no-repeat; opacity: 0.28; pointer-events: none; }
.home .gb-home { position: relative; }
.gb-play small { font-weight: 700; opacity: 0.75; font-size: 13px; }
.home-foot { color: var(--aq-dim); font-size: 12px; text-align: center; margin: 4px 0 0; line-height: 1.5; }

/* ── HUD ── */
.hud-top { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hud-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--aq-line); background: var(--aq-panel); color: var(--aq-text); font-size: 18px; cursor: pointer; }
.chip { min-height: 32px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; background: var(--aq-panel); border: 1px solid var(--aq-line); font-weight: 800; font-size: 14px; }
.chip.gold { color: var(--aq-gold); }
.riddle { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 54px); left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 24px));
  display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--aq-radius); background: var(--aq-panel); border: 1.5px solid color-mix(in srgb, var(--aq-gold) 55%, transparent); }
.riddle-olly { width: 52px; height: 52px; flex: none; object-fit: contain; }
.riddle-k { font-size: 12px; color: var(--aq-gold); font-weight: 800; }
.riddle-t { font-size: 16px; font-weight: 800; line-height: 1.35; }
.riddle-t b { color: var(--aq-gold); }
.guide-wrap { position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none; }
.guide { pointer-events: auto; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--aq-gold); color: var(--aq-gold-ink); font-weight: 900; font-size: 15px; box-shadow: 0 8px 20px rgba(0,0,0,0.35); cursor: pointer; }
.hint { position: absolute; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 64px); transform: translateX(-50%); width: min(520px, calc(100% - 24px));
  background: rgba(8, 12, 26, 0.86); border-radius: 12px; padding: 10px 14px; text-align: center; font-weight: 700; font-size: 14px; line-height: 1.45; }
.stick { position: absolute; left: 0; bottom: 0; width: 42%; height: 52%; touch-action: none; }
.stick-base { position: absolute; width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.25); pointer-events: none; }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: rgba(240, 196, 106, 0.85); }

/* ── 공용 단추 ── */
.btn { min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--aq-line); background: var(--aq-panel-2); color: var(--aq-text); font-weight: 800; font-size: 15px; cursor: pointer; }
.btn.main { background: var(--aq-gold); color: var(--aq-gold-ink); border: 0; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn:active:not(:disabled) { transform: scale(0.97); }

/* ── 오버레이 공통 ── */
.overlay { position: absolute; inset: 0; z-index: 20; background: rgba(5, 8, 18, 0.9); display: flex; flex-direction: column; }

/* ── 감상 ── */
.viewer { padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); gap: 10px; }
.view-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 12px; background: #05070d; touch-action: none; }
.view-stage img { position: absolute; left: 50%; top: 50%; max-width: 100%; max-height: 100%; transform-origin: 0 0; will-change: transform; image-rendering: auto; }
.view-mark { position: absolute; border: 3px solid var(--aq-gold); border-radius: 6px; box-shadow: 0 0 0 9999px rgba(0,0,0,0.45); pointer-events: none; }
.view-mark.bad { border-color: var(--aq-bad); box-shadow: none; }
.view-card { background: var(--aq-panel); border-radius: 12px; padding: 10px 14px; line-height: 1.5; font-size: 14px; }
.view-card h3 { margin: 0 0 2px; font-size: 18px; }
.view-card .meta { color: var(--aq-dim); font-size: 13px; }
.view-card .lic { color: var(--aq-dim); font-size: 12px; margin-top: 2px; }
.view-card .lic a { color: var(--aq-dim); }
.view-bar { display: flex; gap: 10px; }
.view-bar .btn { flex: 1; }
.gauge { position: relative; overflow: hidden; }
.gauge-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,0.35); }
.gauge-t { position: relative; }
.view-tip { margin: 0; text-align: center; color: var(--aq-dim); font-size: 12px; }

/* ── 문제 ── */
.quiz { justify-content: flex-end; background: rgba(5, 8, 18, 0.55); pointer-events: none; }
.quiz .quiz-box { pointer-events: auto; margin: 0 auto max(12px, env(safe-area-inset-bottom)); width: min(620px, calc(100% - 20px)); background: var(--aq-panel); border-radius: 18px; padding: 14px; border: 1px solid var(--aq-line); box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
.quiz.detail { background: transparent; }
.quiz-kind { font-size: 12px; color: var(--aq-gold); font-weight: 800; }
.quiz-q { font-size: 18px; font-weight: 900; margin: 4px 0 10px; line-height: 1.35; }
.quiz-media { display: flex; justify-content: center; }
.quiz-media img, .quiz-media canvas { max-height: 26vh; max-width: 100%; border-radius: 10px; }
.quiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.choice { min-height: 56px; border-radius: 14px; border: 1.5px solid var(--aq-line); background: var(--aq-panel-2); color: var(--aq-text); font-weight: 800; font-size: 16px; cursor: pointer; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.choice small { font-weight: 600; color: var(--aq-dim); font-size: 12px; }
.choice .sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.6); }
.choice.pic { padding: 4px; min-height: 120px; }
.choice.pic img { width: 100%; height: 110px; object-fit: contain; border-radius: 8px; background: #000; }
.choice.ok { border-color: var(--aq-good); background: color-mix(in srgb, var(--aq-good) 28%, transparent); }
.choice.no { border-color: var(--aq-bad); background: color-mix(in srgb, var(--aq-bad) 22%, transparent); }
.quiz-choices.three { grid-template-columns: 1fr 1fr 1fr; }
.quiz-feedback { margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-weight: 900; font-size: 17px; text-align: center; }
.quiz-feedback.ok { background: color-mix(in srgb, var(--aq-good) 25%, transparent); color: #d8ffe9; }
.quiz-feedback.no { background: color-mix(in srgb, var(--aq-bad) 25%, transparent); color: #ffe1de; }
.chrono { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chrono button { border: 1.5px solid var(--aq-line); background: var(--aq-panel-2); border-radius: 12px; padding: 4px; color: var(--aq-text); cursor: pointer; min-height: 44px; }
.chrono img { width: 100%; height: 22vh; object-fit: contain; background: #000; border-radius: 8px; }
.chrono .n { display: block; font-weight: 900; font-size: 18px; color: var(--aq-gold); min-height: 24px; }

/* ── 화면 모드 ── */
.stage { background: radial-gradient(ellipse at 50% 0%, #1e2b55 0%, #0b1020 70%); display: flex; flex-direction: column; padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); gap: 10px; }
.stage-top { display: flex; align-items: center; gap: 8px; }
.stage-top #modeBar { flex: 1; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.stage-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.stage-art { flex: 1; min-height: 0; position: relative; border-radius: 12px; background: #05070d; overflow: hidden; touch-action: none; }
.stage-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.stage-card { background: var(--aq-panel); border-radius: 16px; padding: 12px; }
.stage-card .quiz-q { margin-top: 0; }
.combo { color: var(--aq-gold); font-weight: 900; }

/* ── 결과 ── */
.result { align-items: center; justify-content: center; padding: 16px; }
.result-box { width: min(480px, 100%); background: var(--aq-panel); border-radius: 20px; padding: 20px; text-align: center; border: 1.5px solid color-mix(in srgb, var(--aq-gold) 50%, transparent); }
.result-box h2 { margin: 4px 0 6px; font-size: 24px; }
.result-stars { font-size: 40px; letter-spacing: 4px; color: var(--aq-gold); }
.result-row { color: var(--aq-dim); margin: 4px 0; }
.result-thumbs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.result-thumbs img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
.result-thumbs img.grey { filter: grayscale(1); opacity: 0.6; }
.result-actions { display: grid; gap: 8px; margin-top: 12px; }

/* ── 도감 ── */
.panel { background: var(--aq-bg); display: flex; flex-direction: column; padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); gap: 10px; overflow: hidden; }
.panel-top { display: flex; align-items: center; gap: 10px; }
.panel-top h2 { margin: 0; font-size: 20px; flex: 1; }
.dex-tabs { display: flex; gap: 6px; overflow-x: auto; flex: none; }
.dex-tabs button { flex: none; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--aq-line); background: var(--aq-panel-2); color: var(--aq-text); font-weight: 800; cursor: pointer; }
.dex-tabs button.on { background: var(--aq-gold); color: var(--aq-gold-ink); }
.dex-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; align-content: start; }
.dex-cell { border: 1px solid var(--aq-line); background: var(--aq-panel-2); border-radius: 12px; padding: 6px; color: var(--aq-text); cursor: pointer; text-align: center; font-size: 12px; font-weight: 700; min-height: 44px; }
.dex-cell img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 4px; }
.dex-cell.off img { filter: brightness(0) opacity(0.55); }
.dex-cell.off { color: var(--aq-dim); }

/* ── 나만의 전시실 ── */
.my-bar { position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 0 12px; }
.my-bar .btn { pointer-events: auto; background: var(--aq-panel); }

/* ── 모달 ── */
.modal { align-items: center; justify-content: center; padding: 16px; }
.modal-box { width: min(520px, 100%); max-height: 100%; overflow-y: auto; background: var(--aq-panel); border-radius: 20px; padding: 18px; border: 1px solid var(--aq-line); }
.modal-box h2 { margin: 0 0 10px; font-size: 20px; }
.modal-box p { line-height: 1.55; color: var(--aq-dim); margin: 6px 0; }
.modal-box .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--aq-line); }
.modal-box .row:last-of-type { border-bottom: 0; }
.seg { display: inline-flex; border-radius: 12px; overflow: hidden; border: 1px solid var(--aq-line); }
.seg button { min-height: 44px; min-width: 56px; padding: 0 10px; border: 0; background: transparent; color: var(--aq-text); font-weight: 800; cursor: pointer; }
.seg button.on { background: var(--aq-gold); color: var(--aq-gold-ink); }
.modal-actions { display: grid; gap: 8px; margin-top: 14px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 52vh; overflow-y: auto; margin-top: 8px; }
.pick-grid button { border: 1.5px solid var(--aq-line); background: var(--aq-panel-2); border-radius: 10px; padding: 4px; color: var(--aq-text); cursor: pointer; font-size: 12px; font-weight: 700; min-height: 44px; }
.pick-grid button.on { border-color: var(--aq-gold); }
.pick-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
.code-big { font-size: 40px; font-weight: 900; letter-spacing: 8px; text-align: center; color: var(--aq-gold); margin: 10px 0; }
.code-input { width: 100%; font-size: 28px; font-weight: 900; text-align: center; letter-spacing: 6px; padding: 8px; border-radius: 12px; border: 1px solid var(--aq-line); background: #0b1020; color: var(--aq-text); }
.shop-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shop-item .sw { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.4); flex: none; }

/* ── 토스트 ── */
.toast { position: absolute; left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 58px); transform: translateX(-50%); z-index: 40; background: rgba(10, 14, 28, 0.94); border: 1px solid var(--aq-gold); color: var(--aq-text); border-radius: 999px; padding: 10px 18px; font-weight: 800; font-size: 15px; max-width: calc(100% - 24px); text-align: center; pointer-events: none; }

@media (min-width: 900px) {
  .quiz .quiz-box { margin-bottom: 24px; }
  .quiz-media img, .quiz-media canvas { max-height: 30vh; }
}
@media (max-height: 520px) {
  .quiz-media img, .quiz-media canvas { max-height: 18vh; }
  .choice { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .fade { transition: none; } }

/* 화면 모드: 감상 화면 위에 모드 띠만 */
.viewer.with-bar { padding-top: calc(max(10px, env(safe-area-inset-top)) + 56px); }
#scr-stage.bar-only { z-index: 22; background: transparent; pointer-events: none; }
#scr-stage.bar-only .stage-top { pointer-events: auto; }
#scr-stage.bar-only .stage-body { display: none; }
.chrono small { display: block; color: var(--aq-dim); font-size: 12px; margin-top: 2px; }

/* 키트 CSS(kit/numpad · kit/frac) — CSP 라 인라인 주입 대신 여기 둔다(키트가 탐침으로 확인하고 주입을 건너뛴다) */
.gb-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%,340px);margin:10px auto 0;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.gb-numpad-key{min-height:56px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:inherit;font:inherit;font-size:1.5rem;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .06s,background .06s}
.gb-numpad-key.down,.gb-numpad-key:active{transform:scale(.94);background:rgba(255,255,255,.2)}
.gb-numpad-key.del{font-size:1.3rem}.gb-numpad-key.ok{background:linear-gradient(135deg,#1fb5a5,#6a5ae0);border-color:transparent;color:#fff;font-size:1.15rem}.gb-numpad-key.ok.wide{grid-column:1/-1}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 .12em;font-size:.9em;font-variant-numeric:tabular-nums}
.frac-n{padding:0 .18em .06em;border-bottom:.09em solid currentColor}.frac-d{padding:.06em .18em 0}.frac-mixed{white-space:nowrap}.frac-mixed>.frac{margin-left:.06em}
/* 디테일 문제: 그림이 문제 카드에 가려지지 않게 감상 카드·단추를 접는다 */
.viewer.reserve .view-card, .viewer.reserve .view-bar, .viewer.reserve .view-tip { display: none; }
.quiz.detail .quiz-media canvas { max-height: 16vh; }
.quiz.detail .quiz-q { font-size: 16px; margin-bottom: 6px; }

/* @gb-juice-css v1 — kit/juice/juice.css. 게임 스타일시트 끝에 그대로 붙인다(CSP style-src 'self' 라 JS 가 <style> 을 넣지 않는다). */
.gbj-layer{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.gbj-pop{position:absolute;transform:translate(-50%,-50%) scale(var(--s));font:900 22px/1 system-ui,sans-serif;text-shadow:0 2px 0 #0008,0 0 12px currentColor;white-space:nowrap;animation:gbjPop .9s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes gbjPop{0%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--s)*.3))}15%{opacity:1;transform:translate(-50%,-80%) scale(calc(var(--s)*1.35))}35%{transform:translate(calc(-50% + var(--dx)),-120%) scale(var(--s))}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-260%) scale(calc(var(--s)*.9))}}
.gbj-punch{animation:gbjPunch .32s cubic-bezier(.2,2,.4,1)}
@keyframes gbjPunch{0%{transform:scale(1)}30%{transform:scale(var(--gbj-p))}100%{transform:scale(1)}}
.gbj-flash{position:absolute;inset:0;opacity:0}
.gbj-flash.gbj-go{animation:gbjFlash .35s ease-out forwards}
@keyframes gbjFlash{to{opacity:0}}
/* 가운데 큰 글자 — 자리는 게임이 --gbj-banner-top 으로 옮긴다(HUD 배너·선택 카드와 겹치지 않게 · 2026-10-12 끝까지 진화 실측). 좁은 화면에서 넘치지 않게 vw 로 줄인다 */
.gbj-banner{position:absolute;left:50%;top:var(--gbj-banner-top,40%);transform:translate(-50%,-50%);font:900 clamp(22px,8vw,44px)/1.1 system-ui,sans-serif;text-align:center;opacity:0;text-shadow:0 3px 0 #000a,0 0 24px currentColor;max-width:92vw;width:max-content}
.gbj-banner.gbj-go{animation:gbjBan var(--d,1.4s) cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes gbjBan{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-8deg)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(2deg)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.gbj-pop,.gbj-banner.gbj-go,.gbj-punch{animation-duration:.01s}}
/* 명화 탐험대 반짝임(juice burst — 게임이 그린다) */
.aq-spark { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px currentColor; background: currentColor; animation: aqSpark 0.75s cubic-bezier(0.15, 0.8, 0.3, 1) forwards; }
@keyframes aqSpark { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3); } }
@media (prefers-reduced-motion: reduce) { .aq-spark { display: none; } }