:root {
    --bg: #f6f5f2; --bg-soft: #eceae5; --card: #ffffff;
    --ink: #1c1a17; --ink-soft: #6b6660; --line: #e2ded7;
    --accent: #c2410c; --accent-soft: #fff1e7;
    --ok: #15803d; --bad: #dc2626;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(28,26,23,.05), 0 8px 24px rgba(28,26,23,.06);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #141311; --bg-soft: #24211d; --card: #201e1a;
      --ink: #f2efe9; --ink-soft: #a49d94; --line: #322e29;
      --accent: #fb923c; --accent-soft: #33200f;
      --ok: #4ade80; --bad: #f87171;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    }
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg); color: var(--ink);
    font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased; min-height: 100vh;
  }
  button { font: inherit; color: inherit; cursor: pointer; }
  .wrap { max-width: 880px; margin: 0 auto; padding: 20px 16px 64px; }

  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 18px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; }
  .brand .dot { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 15px; font-weight: 800; }
  .brand small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 12px; letter-spacing: 0; }
  .full { margin: 14px 0 4px; padding: 12px 14px; background: var(--bg-soft); border-radius: 10px; font-size: 15px; line-height: 1.9; font-weight: 600; text-align: left; max-height: 180px; overflow-y: auto; }
  .full .fo { color: var(--ink-soft); }
  .full .fw { color: var(--bad); text-decoration: underline wavy var(--bad); text-underline-offset: 3px; }
  .miss { margin: 14px 0 4px; }
  .miss .k { font-size: 11px; font-weight: 800; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 6px; }
  .miss-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
  .miss-chip { border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 13px; font-weight: 700; color: var(--bad); background: var(--card); }
  .miss-chip b { font-weight: 800; }

  /* 자판 펼침/접기 버튼 — 데스크톱에서는 숨김 (모바일 미디어쿼리에서 다시 표시) */
  .kb-toggle { display: none; }

  /* =========================================================
   * 모바일 레이아웃
   * - 보기·입력 영역을 화면 상단에 고정해 가려지지 않게 한다
   * - 가상 키보드는 작게 접어 두고, 필요할 때 펼친다
   * ========================================================= */
  @media (max-width: 700px) {
    /* 패널 여백·간격 축소 */
    .panel { padding: 12px; border-radius: 12px; }
    .stage-head { padding-bottom: 8px; }
    .taja-note { display: none; }

    /* 통계: 4칸을 한 줄로 얇게 */
    .stats { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
    .stat { padding: 6px 8px; border-radius: 8px; text-align: center; }
    .stat .k { font-size: 10px; margin-bottom: 2px; }
    .stat .v { font-size: 15px; }

    /* 보기·입력을 화면 최상단에 고정 — 실제 손가락 키보드가 열려도 항상 보인다.
       sticky 는 원래 위치에 머물러 스크롤해야 보이므로, 키보드가 열리면
       볼 수 없게 된다. 따라서 fixed 로 화면에 붙이고,
       JS가 실제 영역 높이를 계산해 본문 여백(--stick-h)만큼 밀어준다. */
    .lines-wrap {
      position: fixed !important;
      left: 0;
      right: 0;
      top: 0;
      z-index: 40;
      background: var(--card);
      padding: 6px 10px 4px;
      margin-bottom: 0;
      border-bottom: 1px solid var(--line);
      box-shadow: 0 3px 10px rgba(0,0,0,.12);
    }
    /* 보기·입력은 각각 최대 3줄. 넘으면 내부 스크롤.
       (2줄이면 현재 줄 + 다음 줄이 보이지 않아 입력이 막힌다) */
    .lines-wrap .line-box {
      max-height: calc(var(--row-h, 26px) * 3);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    /* 고정 영역 높이만큼 본문을 아래로 밀어 가림 방지 (JS가 갱신) */
    #view-game .panel { padding-top: calc(var(--stick-h, 150px) + 4px); }
    #view-game .stage-head { margin-top: 0; }
    .lines { gap: 4px; margin-bottom: 0; }
    .line-row { gap: 6px; }
    .line-label { flex: 0 0 26px; font-size: 10px; padding-top: .7em; }
    .line-box { padding: 0 1px; }

    /* 자판 펼침/접기 버튼 (모바일에서만 노출) */
    .kb-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      padding: 8px;
      margin-bottom: 6px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--card);
      color: var(--ink-soft);
      font: inherit;
      font-size: 12px;
      font-weight: 700;
    }
    .kb-toggle::after { content: "▼"; font-size: 10px; }
    .kb-toggle.open::after { content: "▲"; }

    /* 가상 키보드는 접힌 상태로 (펼치기 버튼으로 열기) */
    .kb {
      margin: 0 0 8px;
      padding: 6px;
      border-radius: 10px;
    }
    .kb.collapsed .kb-row,
    .kb.collapsed .kb-legend,
    .kb.collapsed .nextkey { display: none; }
    /* 홈 자리 가이드는 접기式 */
    .home-guide-box { padding: 10px; }
    .hg-side { flex: 1 1 100%; }
    .home-guide-keys { gap: 6px; }

    .hint { font-size: 12px; margin-top: 8px; }
  }


  /* 현재 카테고리 표시 배지 */
  .cat-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--accent-soft, rgba(99,102,241,.14));
    color: var(--accent, #6366f1);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    margin-left: 8px;
  }
  .cat-badge.hidden { display: none; }

  /* 결과 화면: 원문 한 줄 + 내가 친 한 줄 비교 */
  .cmp { display: flex; flex-direction: column; gap: 14px; }
  .cmp-row { display: flex; flex-direction: column; gap: 4px; }
  .cmp-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-soft);
    letter-spacing: .02em;
  }
  .cmp-line {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.7;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .cmp-line.orig { background: rgba(127,127,127,.14); border: 1px solid var(--line); }
  .cmp-line.mine  { background: rgba(99,102,241,.10); border: 1px solid var(--line); }
  .cmp-line .fw { color: var(--bad, #ef4444); text-decoration: underline wavy var(--bad, #ef4444); }
  .cmp-line .fo { color: var(--ink); }

  /* 카테고리 선택창 (카드 내부) */
  .mode .cat {
    margin-top: 8px; width: 100%; padding: 7px 10px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); color: var(--ink);
    font: inherit; font-size: 13px;
    display: block; cursor: pointer;
  }
  .mode .cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 7px 13px; font-size: 13px; color: var(--ink-soft); }
  .chip:hover { border-color: var(--accent); color: var(--accent); }

  .hero { margin: 6px 0 22px; }
  .hero h1 { font-size: 26px; line-height: 1.3; margin: 0 0 8px; letter-spacing: -.03em; }
  .hero p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }

  .modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  @media (max-width: 560px) { .modes { grid-template-columns: 1fr; } }
  .mode { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; transition: transform .12s ease, border-color .12s ease; }
  .mode:hover { transform: translateY(-2px); border-color: var(--accent); }
  .mode .ico { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
  .mode .ico svg { width: 21px; height: 21px; display: block; }
  .mode .name { font-weight: 700; font-size: 16px; }
  .mode .desc { color: var(--ink-soft); font-size: 13px; line-height: 1.55; word-break: keep-all; }
  .mode .best { margin-top: auto; padding-top: 8px; font-size: 12px; color: var(--ink-soft); }
  .mode .best b { color: var(--accent); }

  .stages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  @media (max-width: 560px) { .stages { grid-template-columns: 1fr; } }
  .stage-btn { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; transition: border-color .12s ease, transform .12s ease; }
  .stage-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
  .stage-btn .num { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
  .stage-btn .t { font-weight: 700; font-size: 14px; display: block; }
  .stage-btn .k { font-size: 12px; color: var(--ink-soft); margin-top: 2px; display: block; }
  .stage-btn .k .small { font-size: 10px; border: 1px solid var(--line); background: var(--card); border-radius: 5px; padding: 1px 6px; color: var(--accent); font-weight: 700; cursor: pointer; }
  .stage-btn .k .small:hover { border-color: var(--accent); }

  .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
  .stage-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
  .stage-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
  .back { border: 1px solid var(--line); background: transparent; border-radius: 8px; padding: 5px 9px; font-size: 12px; color: var(--ink-soft); }
  .back:hover { color: var(--accent); border-color: var(--accent); }
  .progress { height: 6px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
  .progress > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s linear; }

  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
  @media (max-width: 560px) { .stats { grid-template-columns: repeat(2, 1fr); } }
  .stat { background: var(--bg-soft); border-radius: 10px; padding: 10px 12px; }
  .stat .k { font-size: 11px; color: var(--ink-soft); letter-spacing: .02em; }
  .stat .v { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
  .stat .v small { font-size: 12px; font-weight: 500; color: var(--ink-soft); margin-left: 2px; }
  .stat.bad .v { color: var(--bad); }
  .taja-note { font-size: 11px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 14px; }

  /* 한/영 상태는 내부 변환으로 처리하므로 사용자에게 노출하지 않는다 */
  .imebar { display: none !important; }
  .ime { display: none; }
  .ime-warn { display: none !important; }

  /* 자판 */
  .kb { margin: 0 0 12px; padding: 10px; background: var(--bg-soft); border-radius: 12px; }
  .nextkey { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; flex-wrap: wrap; }
  .nextkey b { color: var(--accent); font-size: 15px; }
  .nextkey .jk { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 7px; background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; }
  .nextkey .jk.dim { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
  .kb-row { display: flex; gap: 6px; margin-bottom: 6px; }
  #kb-r0 { padding-left: 5%; }
  #kb-r1 { padding-left: 8.5%; }
  #kb-r2 { padding-left: 13%; }
  .kb .k { width: var(--kw, 56px); }
.kb-row:last-of-type { margin-bottom: 0; }
  .kb-row:last-of-type { margin-bottom: 0; }
  .kb .k { flex: 0 0 auto; min-width: 0; border: 1px solid var(--line); background: var(--card); border-radius: 7px; padding: 7px 0 6px; text-align: center; font-size: 15px; font-weight: 700; color: var(--f, var(--ink-soft)); border-bottom: 3px solid var(--f, var(--line)); transition: background .09s ease, color .09s ease; }
  .kb .k.off { opacity: .2; }
  .kb .k.hit { background: var(--f); color: #fff; border-color: var(--f); }
  .kb .k.home { position: relative; }
  .kb .k.home::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: var(--ink-soft); opacity: .6; }
  .kb .k.sp { flex: 5; color: var(--ink-soft); border-bottom-color: var(--line); font-size: 12px; }
  .home-guide { margin: 14px 0 18px; padding: 16px 18px; background: var(--accent-soft); border: 1px solid var(--accent-soft); border-radius: 12px; font-size: 13px; line-height: 1.65; color: var(--ink); }
  .home-guide-title { font-size: 16px; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
  .home-guide p { margin: 6px 0; }
  .home-guide .empty { margin: 8px 0 0; }
  .home-guide-keys { display: flex; gap: 20px; flex-wrap: wrap; margin: 10px 0 12px; }
  .hg-side { flex: 1; min-width: 140px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
  .hg-finger { font-size: 11px; color: var(--ink-soft); font-weight: 700; margin-bottom: 6px; }
  .hg-key { font-size: 26px; font-weight: 800; text-align: center; padding: 6px 4px; border-radius: 7px; background: var(--card); border: 1px solid var(--line); min-width: 40px; }
  .hg-key.home { border-color: var(--accent); background: var(--accent-soft); }
  .kb .k.sp.hit { background: var(--accent); color: #fff; border-color: var(--accent); }
  .f-L5 { --f: #e11d48; } .f-L4 { --f: #ea580c; } .f-L3 { --f: #ca8a04; } .f-L2 { --f: #16a34a; }
  .f-R2 { --f: #0891b2; } .f-R3 { --f: #2563eb; } .f-R4 { --f: #7c3aed; } .f-R5 { --f: #db2777; }
  .kb-legend { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; font-size: 11px; color: var(--ink-soft); }
  .kb-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 4px; vertical-align: -1px; }

  /* 보기 / 입력 두 줄 */
  .lines-wrap { position: sticky; top: 0; border-radius: 10px; z-index: 20; }
  .lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .line-row { display: flex; gap: 10px; align-items: flex-start; }
  .line-label { flex: 0 0 34px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--ink-soft); padding-top: .9em; }
  .line-box { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 8px; padding: 0 2px; }
  .line-box.view { background: var(--bg-soft); }
  .line-box.mine { background: var(--accent-soft); }
  .line { font-size: var(--fs, 23px); line-height: 1.9; font-weight: 600; letter-spacing: 0; user-select: none; }
  .line .cell { display: inline-block; width: var(--cellw, 1.06em); text-align: center; vertical-align: top; }
  /* 줄바꿈 표시자: 블록으로 끊되 높이는 0.
     연속 줄바꿈(\n\n)은 JS 에서 하나로 합쳐지므로 빈 행이 생기지 않는다. */
  .line .cell.brk { display: block; width: 100% !important; height: 0; padding: 0; margin: 0; border: 0; }
  .line .cell.space { width: calc(var(--cellw, 1.06em) * 0.62); }
  .line .cell.cur { color: var(--accent); background: var(--card); border-radius: 5px; box-shadow: 0 2px 0 0 var(--accent); animation: blink 1.05s steps(2, start) infinite; }
  @keyframes blink { 50% { box-shadow: 0 2px 0 0 transparent; } }
  .line .cell.pending { color: var(--ink-soft); }
  .line .cell.done { color: var(--ink); }
  .line .cell.missed { color: var(--bad); text-decoration: underline wavy var(--bad); text-underline-offset: 3px; }
  .line .cell.good { color: var(--ok); }
  .line .cell.wrong { color: var(--bad); text-decoration: underline wavy var(--bad); text-underline-offset: 3px; }
  .line .cell.rest { color: var(--ink-soft); opacity: .35; }

  #typed { position: fixed; top: 0; left: 0; width: 2px; height: 2px; opacity: .01; border: 0; padding: 0; margin: 0; resize: none; font-size: 16px; background: transparent; color: transparent; caret-color: transparent; z-index: -1; }
  .focus-hint { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.04); border: 2px dashed var(--accent); border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--accent); cursor: pointer; }
  @media (prefers-color-scheme: dark) { .focus-hint { background: rgba(255,255,255,.06); } }

  .start-btn { width: 100%; border: none; background: var(--accent); color: #fff; border-radius: 12px; padding: 16px; font-size: 16px; font-weight: 700; }
  .start-btn:hover { filter: brightness(1.06); }
  .hint { text-align: center; font-size: 13px; color: var(--ink-soft); margin-top: 12px; line-height: 1.6; }

  .result { text-align: center; padding: 8px 0; }
  .result .big { font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 6px 0 4px; }
  .result .big small { font-size: 18px; color: var(--ink-soft); font-weight: 600; }
  .result .rank { font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 18px; }
  .result .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 20px; }
  @media (max-width: 560px) { .result .grid { grid-template-columns: repeat(2,1fr); } }
  .result .row { display: flex; gap: 8px; }
  .result .row button { flex: 1; border-radius: 12px; padding: 14px; font-weight: 700; font-size: 15px; }
  .btn-primary { border: none; background: var(--accent); color: #fff; }
  .btn-ghost { border: 1px solid var(--line); background: transparent; color: var(--ink); }

  .empty { color: var(--ink-soft); font-size: 13px; }
  .footer { margin-top: 28px; text-align: center; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
  .footer a { color: var(--accent); text-decoration: none; }
  .hidden { display: none !important; }