/* 집현전 한글 탐험 — 공통 스타일 (core) */

/* ================================================================ */
/* 1. 토큰                                                           */
/* ================================================================ */
:root {
  --bg: #fbf1dc;
  --paper: #fffaf0;
  --ink: #3b2412;
  --ink-2: #6b4a2b;
  --line: #e2c99a;
  --gold: #f5b82e;
  --gold-2: #d99a00;
  --red: #d64541;
  --green: #2f9e44;
  --blue: #2b5fad;
  --navy: #1d2b4f;
  --sky: #dff1ff;
  --shadow: 0 4px 0 var(--ink);
  --radius: 18px;

  --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  --hud-h: 56px;
  --maxw: 960px;
  --gold-soft: #fff1c4;
  --red-soft: #fde4e1;
  --green-soft: #e1f5e5;
  --paper-2: #f7ead0;
  --wood: #c98a4b;
  --wood-2: #a86b33;
  --shadow-lg: 0 6px 0 var(--ink), 0 14px 30px rgba(59, 36, 18, .22);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

/* ================================================================ */
/* 2. 리셋 / 바탕                                                    */
/* ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 15% 10%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%),
    radial-gradient(ellipse at 85% 90%, rgba(217, 154, 0, .10), rgba(217, 154, 0, 0) 50%),
    repeating-linear-gradient(93deg, rgba(107, 74, 43, .025) 0 2px, rgba(0, 0, 0, 0) 2px 7px),
    repeating-linear-gradient(3deg, rgba(107, 74, 43, .02) 0 1px, rgba(0, 0, 0, 0) 1px 5px);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--blue); }
table { border-collapse: collapse; }
:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--gold); color: var(--ink); }

.emoji { font-family: var(--font-emoji); font-style: normal; line-height: 1; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

#app { position: relative; min-height: 100vh; min-height: 100dvh; }
.boot-loading { padding: 40px 16px; text-align: center; color: var(--ink-2); font-weight: 700; }
.noscript { padding: 24px; text-align: center; }

/* 레이아웃 도우미 */
.center { text-align: center; align-items: center; justify-content: center; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row.center { justify-content: center; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack.center { align-items: center; }

/* ================================================================ */
/* 3. 버튼                                                           */
/* ================================================================ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; min-width: 48px;
  padding: 10px 20px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font-size: 18px; font-weight: 800; line-height: 1.25;
  text-align: center; text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease, opacity .15s;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.btn:hover:not(:disabled) { background: #fffdf6; transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.primary { background: linear-gradient(180deg, #ffd35c 0%, var(--gold) 60%, #eaa81c 100%); }
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffdc78 0%, #f7c046 60%, #eeb02a 100%); }
.btn.ghost { background: rgba(255, 250, 240, .8); border-color: var(--ink-2); color: var(--ink-2); box-shadow: 0 3px 0 var(--ink-2); }
.btn.small { min-height: 48px; padding: 6px 14px; font-size: 16px; border-radius: 14px; }
.btn.big { min-height: 64px; padding: 12px 30px; font-size: 22px; border-radius: 20px; box-shadow: 0 5px 0 var(--ink); }
.btn.big:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .55; box-shadow: 0 2px 0 var(--ink-2); }

/* 보기 버튼 */
.btn.option {
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  font-size: 22px;
  background: var(--paper);
  border-radius: 18px;
}
.btn.option:hover:not(:disabled) { background: var(--gold-soft); }
.btn.ok, .btn.ok:disabled {
  background: var(--green) !important;
  color: #fff !important;
  border-color: #1b5e28;
  box-shadow: 0 4px 0 #1b5e28;
  opacity: 1;
}
.btn.ok::after { content: " ✔"; font-weight: 900; }
.btn.no, .btn.no:disabled {
  background: #eee4d6 !important;
  color: #7a6552 !important;
  border-color: #a38d77;
  border-style: dashed;
  box-shadow: none;
  opacity: .8;
  text-decoration: line-through;
  text-decoration-color: rgba(214, 69, 65, .7);
  text-decoration-thickness: 2px;
}
.btn.no::after { content: " ✕"; color: var(--red); text-decoration: none; display: inline-block; font-weight: 900; }
.btn.option:disabled:not(.ok):not(.no) { opacity: .7; }

/* ================================================================ */
/* 4. 카드 / 문제                                                    */
/* ================================================================ */
.card {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 20px;
}
.q-card {
  position: relative;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: 22px 20px 20px;
  display: flex; flex-direction: column; gap: 18px;
}
.q-card::before {
  content: ""; position: absolute; inset: 7px;
  border: 2px dashed var(--line); border-radius: 16px; pointer-events: none;
}
.q-card > * { position: relative; }
.q-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.q-prompt { font-size: 24px; font-weight: 800; line-height: 1.45; text-align: center; }
.q-visual {
  font-family: var(--font-emoji);
  font-size: 96px; line-height: 1.1; text-align: center;
  filter: drop-shadow(0 4px 0 rgba(59, 36, 18, .15));
}
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.answers.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.answers.big .btn.option { min-height: 84px; font-size: 28px; }
.input-row { display: flex; gap: 10px; align-items: stretch; width: 100%; max-width: 560px; margin: 0 auto; }
.input-row .btn { flex: 0 0 auto; min-height: 64px; font-size: 20px; }
.answer-input {
  flex: 1 1 auto; min-width: 0;
  min-height: 64px;
  padding: 10px 18px;
  font-size: 26px; font-weight: 800; text-align: center;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: inset 0 3px 0 rgba(59, 36, 18, .12);
  outline: none;
}
.answer-input:focus { border-color: var(--blue); box-shadow: inset 0 3px 0 rgba(59, 36, 18, .12), 0 0 0 4px rgba(43, 95, 173, .25); }
.answer-input.wrong { border-color: var(--red); background: var(--red-soft); }
.answer-input.ok { border-color: var(--green); background: var(--green-soft); }
.answer-input::placeholder { color: #b39b82; font-weight: 600; font-size: 20px; }

/* 힌트 */
.hint-box { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 0; margin-top: 14px; }
.hint-box:empty { margin-top: 0; }
.hint {
  position: relative;
  max-width: 560px; width: 100%;
  padding: 12px 18px 12px 16px;
  background: #fff4b8;
  border: 2px solid #e0b93a;
  border-radius: 6px 16px 16px 16px;
  box-shadow: 0 3px 0 rgba(160, 120, 20, .35);
  font-size: 18px; font-weight: 700;
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  transform: rotate(-.6deg);
}
.hint:nth-child(even) { transform: rotate(.5deg); }
.hint-label { font-weight: 900; color: #8a5a00; white-space: nowrap; }
.skip-btn { background: #fff; }

/* 타이머 (막대) */
.timer {
  position: relative;
  height: 18px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 2px 0 var(--ink);
}
.timer-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--green), #6cc070);
  transform-origin: left center;
  transition: transform .1s linear;
}
.timer.low .timer-fill { background: linear-gradient(90deg, var(--red), #f07a5c); }

/* 칩 */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px;
  min-height: 34px;
  background: var(--navy); color: #fff;
  border-radius: 999px;
  font-weight: 800; font-size: 17px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .25);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 자모 타일 / 빈칸 */
.tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  font-size: 36px; font-weight: 900; line-height: 1;
  color: var(--ink);
  background: linear-gradient(180deg, #f3cf98 0%, #e2ad6a 100%);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -4px 0 rgba(120, 70, 20, .25), 0 4px 0 var(--ink);
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  padding: 0;
}
button.tile:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
button.tile:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), 0 1px 0 var(--ink); }
.tile.gold {
  background: linear-gradient(180deg, #ffe27a 0%, var(--gold) 55%, var(--gold-2) 100%);
  color: #5a3300;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(140, 90, 0, .3), 0 4px 0 var(--ink), 0 0 14px rgba(245, 184, 46, .55);
}
.tile.selected { outline: 4px solid var(--blue); outline-offset: 2px; }
.tile:disabled { opacity: .45; }
.slot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
  font-size: 40px; font-weight: 900;
  border: 3px dashed var(--ink-2);
  border-radius: 16px;
  background: rgba(255, 255, 255, .55);
  color: var(--ink);
  transition: background-color .15s, border-color .15s, transform .15s;
}
.slot.filled { border-style: solid; border-color: var(--ink); background: #fff; box-shadow: 0 3px 0 var(--ink); }
.slot.drop-hover, [data-drop].drop-hover { background: var(--gold-soft); border-color: var(--gold-2); transform: scale(1.05); }

/* 별 */
.stars { display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.star {
  display: inline-block;
  font-size: 44px; line-height: 1; font-weight: 900;
  color: #cdb99c;
  text-shadow: 0 3px 0 rgba(59, 36, 18, .25);
  font-family: var(--font);
}
.star.on { color: var(--gold); text-shadow: 0 3px 0 var(--gold-2), 0 0 14px rgba(245, 184, 46, .6); }

/* 금색 조각 타일 */
.piece-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 112px; height: 112px;
  font-size: 68px; font-weight: 900; line-height: 1;
  color: #5a3300;
  background: radial-gradient(circle at 35% 30%, #fff3b0 0%, #ffd452 35%, var(--gold) 65%, var(--gold-2) 100%);
  border: 4px solid var(--ink);
  border-radius: 24px;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .6), inset 0 -6px 0 rgba(140, 90, 0, .35), 0 6px 0 var(--ink), 0 0 28px rgba(245, 184, 46, .7);
}

/* ================================================================ */
/* 5. 애니메이션                                                     */
/* ================================================================ */
@keyframes jh-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
.shake { animation: jh-shake .35s ease; outline: 3px solid var(--red); outline-offset: 2px; }
.shake-rm { outline: 3px solid var(--red); outline-offset: 2px; }
@keyframes jh-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade-in { animation: jh-fade-in .28s ease both; }
@keyframes jh-pop-in { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
.pop-in { animation: jh-pop-in .35s var(--ease-pop); }
@keyframes jh-stamp { 0% { transform: scale(2.2) rotate(-12deg); opacity: 0; } 60% { transform: scale(.9) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes jh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes jh-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 184, 46, .0); } 50% { box-shadow: 0 0 0 6px rgba(245, 184, 46, .45); } }
@keyframes jh-piece-in {
  0% { transform: scale(.2) rotate(-25deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* 파티클 */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 400; overflow: hidden; }
.fx-p { position: absolute; pointer-events: none; will-change: transform, opacity; }
.fx-dot { border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 6px rgba(255, 210, 90, .8); }
.fx-jamo {
  transform: translate(-50%, -50%);
  font-size: 26px; font-weight: 900; color: var(--gold);
  text-shadow: 0 2px 0 var(--ink-2), 0 0 8px rgba(255, 220, 120, .9);
}
.fx-confetti { border-radius: 2px; }

/* ================================================================ */
/* 6. HUD                                                            */
/* ================================================================ */
.hud {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  height: var(--hud-h);
  padding: 0 12px;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  background: linear-gradient(180deg, #25366180 0%, rgba(0, 0, 0, 0) 100%), var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .2), 0 6px 16px rgba(0, 0, 0, .18);
}
.hud-item {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 12px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  font-weight: 800; font-size: 17px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hud-item .emoji { font-size: 18px; }
.hud-of { opacity: .8; font-weight: 700; }
.hud-star-ic { color: var(--gold); font-size: 20px; line-height: 1; }
.hud-pieces-wrap { display: inline-flex; align-items: center; gap: 4px; }
.hud-pieces { display: inline-flex; gap: 4px; }
.hud-slot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 2px dashed rgba(255, 255, 255, .45);
  border-radius: 8px;
  background: rgba(0, 0, 0, .18);
  font-size: 20px; font-weight: 900; line-height: 1;
  color: #5a3300;
}
.hud-slot.on {
  border: 2px solid #fff3c4;
  background: radial-gradient(circle at 35% 30%, #fff3b0 0%, #ffd452 40%, var(--gold) 75%, var(--gold-2) 100%);
  box-shadow: 0 0 10px rgba(245, 184, 46, .75);
}
.hud-slot.new { animation: jh-piece-in .7s var(--ease-pop) both; }
.hud-egg { color: var(--gold); font-size: 30px; font-weight: 900; line-height: 1; margin-left: 2px; text-shadow: 0 0 8px rgba(245, 184, 46, .8); }
.hud-spacer { flex: 1 1 auto; }
.hud-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 48px; height: 48px; padding: 0 10px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 22px; font-weight: 800;
  touch-action: manipulation;
}
.hud-btn:hover { background: rgba(255, 255, 255, .2); }
.hud-btn:focus-visible { outline-color: var(--gold); }
.hud-btn-label { font-size: 16px; }
.hud-map { background: var(--gold); color: var(--ink); border-color: #fff3c4; }
.hud-map:hover { background: #ffc94a; }
.hud-menu-wrap { position: relative; }
.hud-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 220px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 70;
  animation: jh-fade-in .18s ease both;
}
.hud-menu-item {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 14px;
  border: 0; border-radius: 12px;
  background: transparent;
  font-size: 18px; font-weight: 800; text-align: left;
}
.hud-menu-item:hover, .hud-menu-item:focus-visible { background: var(--gold-soft); }
.hud-menu-item .emoji { font-size: 22px; width: 28px; text-align: center; }
.hud-mini-info { display: none; padding: 6px 12px 8px; font-weight: 800; color: var(--ink-2); border-bottom: 2px dashed var(--line); margin-bottom: 4px; }

/* HUD 반응형: 버튼은 어느 폭에서도 48px(터치 목표) 유지. 넘치지 않게 글자·조각 칸·간격을 줄인다.
   (태블릿 세로 768px에서 비밀 글자 ㆍ까지 보여도 한 줄에 들어가도록 860px부터 압축) */
@media (max-width: 860px) {
  .hud { gap: 6px; padding: 0 8px; }
  .hud-item { padding: 0 8px; font-size: 15px; height: 34px; }
  .hud-slot { width: 26px; height: 26px; font-size: 16px; border-radius: 7px; }
  .hud-egg { font-size: 24px; }
  .hud-btn { min-width: 48px; height: 48px; font-size: 20px; padding: 0 6px; }
  .hud-btn-label { display: none; }
}
.hud-menu-sound { display: none; }
/* 520~679px: 완료·별은 그대로 두고, 소리 버튼을 ☰ 메뉴로 옮겨 자리를 만든다 */
@media (max-width: 679px) {
  .hud { gap: 3px; padding: 0 6px; }
  .hud-sound { display: none; }
  .hud-menu-sound { display: flex; }
  .hud-time .emoji { display: none; }
  .hud-item { padding: 0 6px; }
  .hud-pieces { gap: 2px; }
  .hud-pieces-wrap { gap: 2px; min-width: 0; }
  .hud-slot { width: 22px; height: 22px; font-size: 14px; }
  .hud-egg { font-size: 22px; margin-left: 0; }
}
/* 520px 미만: 완료·별은 ☰ 메뉴 윗줄(hud-mini-info)로 */
@media (max-width: 519px) {
  .hud-done, .hud-stars { display: none; }
  .hud-mini-info { display: block; }
  .hud-time { padding: 0 8px; font-size: 15px; }
  .hud-slot { width: 23px; height: 23px; font-size: 15px; }
}
@media (max-width: 370px) {
  .hud-slot { width: 21px; height: 21px; font-size: 13px; border-width: 1.5px; border-radius: 5px; }
  .hud-item { padding: 0 6px; font-size: 14px; }
  .hud-btn { padding: 0 4px; }
}
/* 아주 좁은 폰: 버튼(48px)은 그대로 두고 시간·조각 칸을 더 줄여 겹침을 막는다 */
@media (max-width: 340px) {
  .hud-time { padding: 0 5px; font-size: 13px; }
  .hud-pieces { gap: 1px; }
  .hud-slot { width: 17px; height: 17px; font-size: 11px; border-radius: 4px; }
  .hud-egg { font-size: 18px; }
}

/* ================================================================ */
/* 7. 게임 화면                                                      */
/* ================================================================ */
.game-main {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 16px 40px;
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}
.game-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  padding: 8px 12px 8px 8px;
  background: linear-gradient(180deg, #fffdf6 0%, var(--paper-2) 100%);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.game-icon { width: 56px; height: 70px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 3px 0 rgba(59, 36, 18, .25)); }
.game-titles { flex: 1 1 auto; min-width: 0; }
.game-title { font-size: 24px; font-weight: 900; line-height: 1.2; }
.game-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.game-stage {
  display: inline-block; padding: 1px 10px;
  background: var(--gold-soft); border: 2px solid var(--gold-2); border-radius: 999px;
  color: #6b4300; font-weight: 800;
}
.game-rules-btn { flex: 0 0 auto; }
.game-body { position: relative; }
.game-body > * + * { margin-top: 18px; }
.game-missing { margin-top: 30px; padding: 32px 20px; }
.game-missing-icon { width: 120px; height: 150px; object-fit: contain; margin: 0 auto; }
.grade-lower { font-size: 20px; }
.grade-lower .btn.big, .grade-lower .input-row .btn { min-height: 64px; }

/* 정답/오답 배너 (화면 번쩍임 없이 작은 띠) */
.game-banner {
  position: fixed; left: 50%; top: calc(var(--hud-h) + 12px);
  z-index: 90;
  transform: translate(-50%, -12px);
  opacity: 0;
  pointer-events: none;
  padding: 10px 22px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  font-size: 20px; font-weight: 900;
  background: #fff;
  box-shadow: var(--shadow);
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow: hidden; text-overflow: ellipsis;
  transition: opacity .18s ease, transform .18s ease;
}
.game-banner.show { opacity: 1; transform: translate(-50%, 0); }
.game-banner.good { background: var(--green); color: #fff; border-color: #1b5e28; box-shadow: 0 4px 0 #1b5e28; }
.game-banner.good.soft { background: #eaf7ec; color: #1b5e28; }
.game-banner.bad { background: #fff; color: #9b2320; border-color: var(--red); box-shadow: 0 4px 0 var(--red); }

/* 퀴즈 공통 */
.quiz { display: flex; flex-direction: column; }
.locks {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 14px;
}
.lock-wrap { display: inline-flex; }
.lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px;
  font-family: var(--font-emoji); font-size: 30px;
  background: #5b3a1e;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3), 0 3px 0 var(--ink);
  filter: grayscale(.2);
  transition: transform .2s var(--ease-pop), background-color .2s;
}
.lock.current { background: #8a5a2c; transform: translateY(-4px); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3), 0 3px 0 var(--ink), 0 0 0 4px var(--gold); }
.lock.open { background: var(--gold); filter: none; animation: jh-pop-in .4s var(--ease-pop); }

/* 짝 연결 */
.match-wrap { display: flex; flex-direction: column; gap: 12px; }
.match-title { text-align: center; font-size: 22px; font-weight: 800; }
.match { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; }
.match-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.match-col-title { text-align: center; font-weight: 900; color: var(--ink-2); font-size: 17px; }
.btn.match-item {
  width: 100%; min-height: 64px;
  padding: 10px 40px 10px 14px;
  font-size: 20px;
  background: var(--paper);
  justify-content: center;
  text-align: center;
}
.match-col.left .btn.match-item { padding: 10px 14px 10px 40px; }
.btn.match-item.selected { background: var(--sky); border-color: var(--blue); box-shadow: 0 4px 0 var(--blue), 0 0 0 4px rgba(43, 95, 173, .25); }
.btn.match-item.matched, .btn.match-item.matched:disabled {
  background: var(--green-soft); border-color: var(--green); color: #1d5a2a;
  box-shadow: 0 3px 0 var(--green); opacity: 1;
}
.btn.match-item.miss { border-color: var(--red); background: var(--red-soft); }
.match-badge {
  position: absolute; top: 50%; transform: translateY(-50%);
  right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: 15px; font-weight: 900;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--green);
  animation: jh-stamp .35s var(--ease-pop) both;
}
.match-col.left .match-badge { right: auto; left: 8px; }
@media (max-width: 560px) {
  .match { gap: 10px 12px; }
  .btn.match-item { font-size: 16px; min-height: 56px; padding: 8px 30px 8px 8px; border-radius: 12px; }
  .match-col.left .btn.match-item { padding: 8px 8px 8px 30px; }
  .match-badge { width: 22px; height: 22px; font-size: 12px; right: 4px; }
  .match-col.left .match-badge { left: 4px; }
}

/* 드래그 */
.draggable { cursor: grab; touch-action: none; }
.dragging { opacity: .35; }
.drag-ghost {
  position: fixed !important; left: 0 !important; top: 0 !important; margin: 0 !important;
  z-index: 500; pointer-events: none;
  opacity: .95;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .3) !important;
  cursor: grabbing;
  will-change: transform;
}

/* ================================================================ */
/* 8. 오버레이 / 모달 / 토스트                                        */
/* ================================================================ */
#overlay-root { position: relative; z-index: 200; }
.overlay {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: rgba(29, 20, 10, .55);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.panel {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  margin: auto;
  padding: 26px 22px 22px;
  background: var(--paper);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 120px);
  border: 4px solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 8px 0 var(--ink), 0 24px 50px rgba(0, 0, 0, .35);
  outline: none;
}
.panel.wide { max-width: 720px; }
.panel::before {
  content: ""; position: absolute; inset: 8px;
  border: 2px solid var(--line); border-radius: 17px; pointer-events: none;
}
.panel > * { position: relative; }
.modal-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 48px; height: 48px;
  border: 2px solid var(--ink-2); border-radius: 50%;
  background: #fff; color: var(--ink-2);
  font-size: 20px; font-weight: 900;
}
.modal-x:hover { background: var(--gold-soft); }
.modal-title { font-size: 26px; font-weight: 900; text-align: center; margin: 0 44px 14px; line-height: 1.3; }
.modal-body { font-size: 18px; }
.modal-body p + p { margin-top: 8px; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.modal-actions .btn { flex: 1 1 160px; max-width: 280px; }
.confirm-msg { text-align: center; font-size: 20px; font-weight: 700; }

#toast-root {
  position: fixed; left: 50%; bottom: 24px; bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 450;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
  width: max-content; max-width: calc(100vw - 32px);
}
.toast {
  padding: 12px 22px;
  background: var(--navy); color: #fff;
  border: 3px solid var(--gold);
  border-radius: 16px;
  font-size: 18px; font-weight: 800; text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
}
.toast.in { opacity: 1; transform: none; }
.toast.out { opacity: 0; transform: translateY(8px); }

/* 규칙 모달 */
.rules { display: flex; gap: 16px; align-items: stretch; }
.rules-cast { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rules-sejong {
  width: 92px; height: 92px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--ink);
  background: radial-gradient(circle at 50% 35%, #fff6d6, #f0d9a8);
  box-shadow: 0 3px 0 var(--ink);
}
.rules-sejong img { width: 100%; height: auto; transform: scale(1.55) translateY(14%); transform-origin: 50% 0; }
.rules-guide { width: 110px; height: 150px; }
.rules-guide img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.rules-bubble {
  position: relative; flex: 1 1 auto;
  padding: 16px 18px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 4px 0 var(--ink);
  align-self: center;
}
.rules-bubble::before {
  content: ""; position: absolute; left: -15px; top: 48%;
  border: 12px solid transparent; border-right-color: var(--ink); border-left: 0;
  transform: translateY(-50%);
}
.rules-bubble::after {
  content: ""; position: absolute; left: -10px; top: 48%;
  border: 9px solid transparent; border-right-color: #fff; border-left: 0;
  transform: translateY(-50%);
}
.rules-lead { font-weight: 900; color: var(--ink-2); margin-bottom: 8px; font-size: 17px; }
.rules-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rules-list li {
  padding: 8px 12px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 12px;
  font-size: 18px; font-weight: 700; line-height: 1.45;
}
.rules-list.lower li { font-size: 21px; font-weight: 800; }
@media (max-width: 560px) {
  .rules { flex-direction: column; align-items: center; }
  .rules-cast { flex-direction: row; align-items: flex-end; }
  .rules-guide { width: 80px; height: 108px; }
  .rules-sejong { width: 76px; height: 76px; }
  .rules-bubble { width: 100%; }
  .rules-bubble::before { left: 50%; top: -15px; transform: translateX(-50%); border: 12px solid transparent; border-bottom-color: var(--ink); border-top: 0; }
  .rules-bubble::after { left: 50%; top: -10px; transform: translateX(-50%); border: 9px solid transparent; border-bottom-color: #fff; border-top: 0; }
}

/* 결과 화면 */
.result-overlay { z-index: 220; }
.result-panel { max-width: 600px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
/* 패널은 max-height + overflow-y:auto → 내용이 길면 자식을 줄이지 말고 스크롤한다 */
.result-panel > * { flex-shrink: 0; }
.result-head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.result-icon { width: 76px; height: 94px; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(59, 36, 18, .25)); animation: jh-float 2.4s ease-in-out infinite; }
.result-title { font-size: 34px; font-weight: 900; color: var(--ink); letter-spacing: -.5px; text-shadow: 0 3px 0 var(--gold); }
.result-title.fail { font-size: 26px; text-shadow: none; }
.result-cheer { font-size: 20px; font-weight: 800; color: var(--ink-2); }
.result-stars .star { font-size: 60px; }
.result-stars .star.on { animation: jh-stamp .4s var(--ease-pop) both; }
.result-rewards { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.piece-reveal { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.piece-reveal-label { font-weight: 900; color: var(--gold-2); letter-spacing: 2px; }
.result-piece { animation: jh-piece-in .8s var(--ease-pop) both, jh-glow 1.6s ease-in-out .8s 2; }
.piece-reveal-text { font-size: 24px; font-weight: 900; }
.result-bonus, .result-best {
  padding: 10px 18px;
  background: var(--gold-soft);
  border: 3px solid var(--gold-2);
  border-radius: 16px;
  font-size: 20px; font-weight: 900;
  animation: jh-fade-in .3s ease both;
}
.result-best-stars { color: var(--gold-2); letter-spacing: 2px; }
.result-extra { display: flex; flex-direction: column; gap: 12px; width: 100%; align-items: center; }
.result-sub { font-weight: 900; font-size: 18px; }
.result-badges { animation: jh-fade-in .3s ease both; }
.result-badge-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.result-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: #fff; border: 2px solid var(--ink); border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
}
.result-badge .emoji { font-size: 22px; }
/* 비밀문 열림 알림: 버튼처럼 보이지 않게(잉크 테두리·아래 그림자 없음) 점선 쪽지 띠로 */
.result-unlock {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 16px;
  background: var(--gold-soft);
  border: 2px dashed var(--gold-2);
  border-radius: 16px;
  cursor: default;
  animation: jh-fade-in .4s ease both, jh-glow 1.6s ease-in-out .4s 3;
}
.result-unlock-title { font-size: 22px; font-weight: 900; color: var(--ink); }
.result-unlock-sub { font-size: 17px; font-weight: 800; color: var(--ink-2); }
.result-note { font-size: 17px; font-weight: 700; color: var(--ink-2); background: var(--paper-2); border-radius: 12px; padding: 10px 14px; }
.result-score { font-size: 19px; font-weight: 900; color: var(--ink); }
.review { width: 100%; text-align: left; }
.review summary {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 8px 14px;
  border: 3px solid var(--ink-2); border-radius: 14px;
  background: #fff;
  font-weight: 900; cursor: pointer;
  list-style: none;
}
.review summary::-webkit-details-marker { display: none; }
.review[open] summary { margin-bottom: 10px; background: var(--gold-soft); }
.review-table { width: 100%; font-size: 16px; background: #fff; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; }
.review-table th, .review-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.review-table th { background: var(--paper-2); font-weight: 900; }
.review-a { font-weight: 900; color: #1d5a2a; }
.result-actions { width: 100%; margin-top: 6px; }

/* 누락 화면 안내 */
.missing-screen { max-width: 520px; margin: 60px auto; padding: 32px 20px; }
.missing-title { font-size: 24px; font-weight: 900; }
.missing-sub { color: var(--ink-2); font-weight: 700; }

/* ================================================================ */
/* 9. 반응형                                                          */
/* ================================================================ */
@media (max-width: 600px) {
  body { font-size: 17px; }
  .game-main { padding: 10px 12px 32px; }
  .game-header { gap: 8px; padding: 6px 8px 6px 6px; border-radius: 16px; }
  .game-icon { width: 40px; height: 50px; }
  .game-title { font-size: 19px; }
  .game-sub { font-size: 13px; }
  .game-rules-label { display: none; }
  .chip { font-size: 15px; padding: 3px 10px; min-height: 30px; }
  .q-card { padding: 18px 14px 16px; gap: 14px; border-radius: 18px; }
  .q-prompt { font-size: 21px; }
  .q-visual { font-size: 76px; }
  .answers { gap: 10px; }
  .answers.three { grid-template-columns: minmax(0, 1fr); }
  .btn.option { font-size: 20px; min-height: 60px; }
  .answer-input { font-size: 22px; padding: 8px 12px; }
  .input-row .btn { padding: 8px 14px; }
  .panel { padding: 22px 16px 18px; border-radius: 20px; }
  .modal-title { font-size: 22px; }
  .result-title { font-size: 28px; }
  .result-stars .star { font-size: 50px; }
  .piece-tile { width: 96px; height: 96px; font-size: 58px; }
  .btn.big { font-size: 20px; padding: 10px 18px; }
  .game-banner { font-size: 17px; padding: 8px 16px; }
  .lock { width: 50px; height: 50px; font-size: 26px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .q-visual { font-size: 64px; }
  .panel { padding-top: 18px; }
}

/* ================================================================ */
/* 10. 움직임 줄이기                                                  */
/* ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in { animation: jh-fade-in .2s ease both !important; animation-duration: .2s !important; }
  #fx-layer { display: none; }
}

/* ================================================================ */
/* 11. 인쇄                                                           */
/* ================================================================ */
@media print {
  body { background: #fff !important; }
  .hud, #toast-root, #fx-layer, .game-banner, .modal-x, .no-print { display: none !important; }
  .btn { box-shadow: none; }
}