/* ── 리셋 ───────────────────────────────────────────────
 * [hidden] 은 브라우저 기본 스타일시트의 규칙일 뿐이라, display 를 정하는
 * 작성자 규칙이 언제나 이긴다. 화면 전환을 hidden 속성으로 하고 있으므로
 * !important 로 한 번 못박아 둔다.
 */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ── 색 토큰 ────────────────────────────────────────── */
:root {
  --bg:        #f6f2ea;
  --bg-tint:   #efe8dc;
  --surface:   #fffdf9;
  --surface-2: #f3ede2;
  --line:      #ddd2be;
  --line-soft: #ebe3d5;
  --ink:       #23201b;
  --ink-2:     #5d5648;
  --ink-3:     #8a8172;
  --red:       #c1272d;
  --red-soft:  #f7e4e2;
  --gold:      #b1801f;
  --jade:      #1f7a5c;
  --jade-soft: #ddf0e7;
  --wrong:     #b3261e;
  --wrong-soft:#fbe3e0;
  --shadow:    0 1px 2px rgba(60,45,20,.07), 0 8px 24px -12px rgba(60,45,20,.22);
  --shadow-lg: 0 2px 4px rgba(60,45,20,.08), 0 24px 48px -20px rgba(60,45,20,.3);
  --radius:    14px;
  --han: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
         'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --kr:  -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard',
         'Malgun Gothic', 'Noto Sans KR', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
      --bg:        #16151a;
      --bg-tint:   #1c1b21;
      --surface:   #22212a;
      --surface-2: #2b2934;
      --line:      #3a3846;
      --line-soft: #302e3a;
      --ink:       #ece9f0;
      --ink-2:     #b3aec0;
      --ink-3:     #837e92;
      --red:       #ef6a6a;
      --red-soft:  #3a2226;
      --gold:      #d9a63f;
      --jade:      #4fc79b;
      --jade-soft: #17352c;
      --wrong:     #f07a70;
      --wrong-soft:#3a2220;
      --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
      --shadow-lg: 0 2px 4px rgba(0,0,0,.45), 0 24px 48px -20px rgba(0,0,0,.8);
    
  }
}

:root[data-theme="dark"] {
  --bg:        #16151a;
  --bg-tint:   #1c1b21;
  --surface:   #22212a;
  --surface-2: #2b2934;
  --line:      #3a3846;
  --line-soft: #302e3a;
  --ink:       #ece9f0;
  --ink-2:     #b3aec0;
  --ink-3:     #837e92;
  --red:       #ef6a6a;
  --red-soft:  #3a2226;
  --gold:      #d9a63f;
  --jade:      #4fc79b;
  --jade-soft: #17352c;
  --wrong:     #f07a70;
  --wrong-soft:#3a2220;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.45), 0 24px 48px -20px rgba(0,0,0,.8);
}

/* ── 뼈대 ───────────────────────────────────────────── */
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--kr);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.app {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 64px;
}

.zh { font-family: var(--han); }
.py { font-variant-ligatures: none; letter-spacing: .01em; }

/* ── 머리말 ─────────────────────────────────────────── */
.masthead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 22px;
}
.seal {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-family: var(--han);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--shadow);
}
.masthead-text { flex: 1 1 auto; min-width: 0; }
.masthead h1 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.masthead p { font-size: 13px; color: var(--ink-3); }
.icon-btn {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 17px;
  transition: background .15s, border-color .15s;
}
.icon-btn:hover { background: var(--surface-2); }

/* ── 카드 ───────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card + .card { margin-top: 14px; }

.section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-3);
  margin-bottom: 10px;
}

/* ── 모드 고르기 ────────────────────────────────────── */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.mode {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  padding: 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line-soft);
  background: var(--surface-2);
  transition: border-color .15s, background .15s, transform .1s;
}
.mode:hover { border-color: var(--line); }
.mode:active { transform: scale(.99); }
.mode[aria-pressed="true"] {
  border-color: var(--red);
  background: var(--red-soft);
}
.mode-icon { flex: none; font-size: 22px; line-height: 1.3; }
.mode-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mode-name { display: block; font-weight: 700; font-size: 15px; }
.mode-desc { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

/* ── 칩 ─────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  transition: all .15s;
}
.chip:hover { border-color: var(--ink-3); }
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* ── 단추 ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  border: 1.5px solid transparent;
  transition: filter .15s, background .15s, transform .1s;
}
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--red); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--bg-tint); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row > .btn { flex: 1 1 160px; }

/* ── 최고 기록 표 ───────────────────────────────────── */
.best-list { display: grid; gap: 6px; }
.best-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--surface-2);
}
.best-row .name { flex: 1 1 auto; font-weight: 600; }
.best-row .val { font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }
.best-row .sub { font-size: 12px; color: var(--ink-3); }
.empty-note { font-size: 13.5px; color: var(--ink-3); }

/* ── 게임 화면 상단 ─────────────────────────────────── */
.hud {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.hud-stat {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.hud-stat .k { font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: .04em; }
.hud-stat .v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hud-spacer { flex: 1 1 auto; }
.lives { font-size: 16px; letter-spacing: 2px; }
.lives .gone { opacity: .22; }

.progress-track {
  height: 6px;
  border-radius: 3px;
  background: var(--line-soft);
  overflow: hidden;
  margin-bottom: 6px;
}
.progress-fill {
  height: 100%;
  background: var(--ink-3);
  border-radius: 3px;
  transition: width .3s ease;
}
.timer-track {
  height: 5px;
  border-radius: 3px;
  background: var(--line-soft);
  overflow: hidden;
  margin-bottom: 16px;
}
.timer-fill {
  height: 100%;
  width: 100%;
  background: var(--jade);
  border-radius: 3px;
  transform-origin: left center;
}
.timer-fill.low { background: var(--red); }

/* ── 문제 ───────────────────────────────────────────── */
.q-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 18px;
  text-align: center;
  margin-bottom: 14px;
}
.q-prompt { font-size: 13px; color: var(--ink-3); font-weight: 600; margin-bottom: 12px; }
.q-hanzi {
  font-family: var(--han);
  font-size: clamp(40px, 12vw, 62px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .04em;
}
.q-pinyin { font-size: 19px; color: var(--red); font-weight: 600; margin-top: 6px; }
.q-korean { font-size: 26px; font-weight: 800; }
.q-sub { font-size: 14px; color: var(--ink-2); margin-top: 8px; }

.q-hanja {
  font-family: var(--han);
  font-size: clamp(36px, 10vw, 52px);
  font-weight: 700;
  letter-spacing: .06em;
}
.q-hanja-read { font-size: 22px; font-weight: 800; margin-top: 4px; }

.speak-btn {
  width: 108px; height: 108px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 42px;
  display: grid; place-items: center;
  margin: 4px auto 0;
  box-shadow: var(--shadow-lg);
  transition: transform .12s, filter .15s;
}
.speak-btn:hover { filter: brightness(1.08); }
.speak-btn:active { transform: scale(.94); }
.speak-btn.playing { animation: ripple 1s ease-out infinite; }
@keyframes ripple {
  0%   { box-shadow: 0 0 0 0 rgba(193,39,45,.45); }
  100% { box-shadow: 0 0 0 26px rgba(193,39,45,0); }
}

/* ── 보기 ───────────────────────────────────────────── */
.options { display: grid; gap: 9px; }
.options.two-col { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.opt {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-size: 16px;
  font-weight: 600;
  transition: border-color .12s, background .12s, transform .08s;
}
.opt:not(:disabled):hover { border-color: var(--ink-3); background: var(--surface-2); }
.opt:not(:disabled):active { transform: scale(.99); }
.opt .key {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3);
}
.opt .label { flex: 1 1 auto; min-width: 0; }
.opt .label-zh { display: block; }
.opt .label-zh { font-family: var(--han); font-size: 22px; font-weight: 700; line-height: 1.3; }
.opt .label-sub { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }

.opt.correct {
  border-color: var(--jade);
  background: var(--jade-soft);
  animation: pop .28s ease;
}
.opt.wrong {
  border-color: var(--wrong);
  background: var(--wrong-soft);
  animation: shake .32s ease;
}
.opt.correct .key, .opt.wrong .key { background: transparent; }
@keyframes pop {
  0% { transform: scale(1); } 45% { transform: scale(1.028); } 100% { transform: scale(1); }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  22% { transform: translateX(-6px); }
  55% { transform: translateX(5px); }
  80% { transform: translateX(-2px); }
}

/* ── 성조 보기 ──────────────────────────────────────── */
.opt-tone { justify-content: flex-start; }
.tone-pattern {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}
.tone-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}
.tone-mark .glyph { font-size: 17px; line-height: 1; color: var(--red); }
.tone-mark .num { font-size: 12px; color: var(--ink-3); }

/* ── 어순 배열 ──────────────────────────────────────── */
.slot-area {
  min-height: 76px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
  padding: 14px;
  border-radius: 12px;
  border: 1.5px dashed var(--line);
  background: var(--surface-2);
  margin-bottom: 12px;
}
.slot-area:empty::after {
  content: '아래에서 낱말을 눌러 문장을 만드세요';
  font-size: 13.5px;
  color: var(--ink-3);
}
.pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  min-height: 48px;
}
.tile {
  font-family: var(--han);
  font-size: 20px;
  font-weight: 700;
  padding: 9px 15px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .1s, opacity .15s, border-color .12s;
}
.tile:hover { border-color: var(--ink-3); }
.tile:active { transform: scale(.96); }
.tile.used { opacity: 0; pointer-events: none; }
.tile.in-slot { background: var(--bg-tint); box-shadow: none; }

/* ── 채점 결과 ──────────────────────────────────────── */
.feedback {
  margin-top: 14px;
  padding: 15px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--line-soft);
  background: var(--surface);
  animation: rise .22s ease;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.feedback.ok   { border-color: var(--jade); background: var(--jade-soft); }
.feedback.no   { border-color: var(--wrong); background: var(--wrong-soft); }
.fb-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; }
.fb-head .gain { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--jade); }
.fb-body { font-size: 14px; color: var(--ink-2); margin-top: 7px; line-height: 1.55; }
.fb-body .zh { font-size: 17px; font-weight: 700; color: var(--ink); }
.fb-body .py { color: var(--red); font-weight: 600; }

.note {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--gold);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.note .badge {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap;
}

/* ── 결과 화면 ──────────────────────────────────────── */
.score-hero {
  text-align: center;
  padding: 26px 18px 22px;
}
.score-hero .grade {
  font-family: var(--han);
  font-size: 58px;
  font-weight: 700;
  line-height: 1;
  color: var(--red);
}
.score-hero .score { font-size: 42px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 6px; }
.score-hero .caption { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.new-best {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}
.stat-box {
  padding: 12px 8px;
  border-radius: 10px;
  background: var(--surface-2);
  text-align: center;
}
.stat-box .v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-box .k { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }

.review-item {
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.review-item:first-child { border-top: none; }
.review-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.review-head .zh { font-size: 21px; font-weight: 700; }
.review-head .py { color: var(--red); font-weight: 600; font-size: 14px; }
.review-head .kr { color: var(--ink-2); font-size: 14px; }
.review-said { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.review-said b { color: var(--wrong); font-weight: 700; }

footer {
  margin-top: 28px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.7;
}
footer a { color: var(--ink-2); }

.warn {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--red-soft);
  border: 1px solid var(--red);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 420px) {
  .app { padding: 14px 12px 48px; }
  .card { padding: 15px; }
  .stat-row { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}