/* 하루말 — 모바일 우선 스타일 */
:root {
  /* 디자인 B '글자가 주인공' (2026-10-22): 흰 바탕 · 먹색 글자 · 주 색 하나(일본어 남색, 영어 청록), 그림자 없이 선과 여백으로 */
  color-scheme: only light;  /* 휴대폰이 다크 모드여도 늘 흰 바탕·검은 글씨 */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --line: #e9e9ee;
  --text: #111114;
  --text-2: #4a4a55;
  --text-3: #5f5f6b;          /* 흰 바탕·연회색 바탕 모두 4.5:1 이상 */
  --accent: #2e3a8c;          /* 남색: 주 버튼 바탕·링크·활성 (흰 글자도 4.5:1 이상) */
  --accent-strong: #1f2866;   /* 누름·진한 강조 */
  --accent-pastel: #e4e7f5;   /* 배지·선택된 하위 탭 */
  --on-pastel: #1f2866;
  --accent-soft: #f2f3fa;
  --hl: #d5daf2;               /* 형광펜 */
  --on-accent: #ffffff;
  --good: #15803d;
  --good-soft: #dcfce7;
  --bad: #b91c1c;
  --bad-soft: #fef2f2;
  --warn: #b45309;            /* 연한 바탕(-soft) 위 글자도 4.5:1 이상 */
  --warn-soft: #fef3c7;
  --spark: #f59e0b;           /* 특별 강조: 연속일·이정표·콤보 */
  --spark-soft: #fffbeb;
  --series-1: #3d4ba8;
  --grow: var(--accent);   /* 진행 바: 주 색 한 가지 */
  --shadow: none;          /* 카드는 그림자 없이 선으로 */
  --shadow-lg: 0 12px 32px rgba(15,23,42,.14);
  --radius: 16px;
  --radius-sm: 10px;
  --nav-h: 60px;
  --font: "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Hiragino Sans", "Noto Sans KR", "Noto Sans JP", "Malgun Gothic", sans-serif;
  --font-jp: var(--font);
  --font-glyph: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;   /* 크게 보여 주는 글자 하나 (홈의 다음 할 일) */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.6 var(--font);
  letter-spacing: -0.011em;
  /* 한국어는 단어 단위로 줄바꿈, 너무 긴 낱말만 강제로 끊는다 */
  word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
}
.jp { font-family: var(--font-jp); word-break: normal; line-break: strict; letter-spacing: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-underline-offset: 2px; }
/* iOS 는 16px 미만 입력창에서 화면을 확대하므로 16px 이상 유지 */
input, select, textarea { font-size: 16px; }

/* ── 상단 바 ── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  /* 넓은 화면에서도 본문(640px) 폭에 맞춘다 */
  padding: calc(env(safe-area-inset-top) + 8px) max(20px, calc((100% - 640px) / 2 + 20px)) 8px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.brand { font-weight: 600; font-size: 16px; letter-spacing: 0.02em; margin-right: auto; color: var(--text); }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; }
.seg button {
  border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--text-2); min-height: 34px; cursor: pointer;
}
.seg button.on { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.level-select {
  appearance: none; -webkit-appearance: none; border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: 15px; min-height: 36px;
}
.icon-btn {
  border: 0; background: transparent; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer;
  display: inline-grid; place-items: center; color: var(--text);
}

/* ── 하단 탭 ── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: center;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar .inner { display: flex; width: 100%; max-width: 640px; }
.tabbar button {
  letter-spacing: -0.02em;
  flex: 1; border: 0; background: transparent; height: var(--nav-h); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500; color: var(--text-3);
}
.tabbar button.on { color: var(--text); font-weight: 600; }

/* ── 레이아웃 ── */
main { max-width: 640px; margin: 0 auto; padding: 14px 20px 0; }
/* 카드 (디자인 B): 상자 대신 위쪽 선과 여백으로 나눈다 — 첫 카드는 선 없이 */
.card {
  background: var(--surface); border: 0; border-top: 1px solid var(--line); border-radius: 0;
  padding: 20px 0; margin: 0;
}
:is(main, #pane, #hj) > .card:first-child, :is(main, #pane, #hj) > .subtabs + .card, :is(main, #pane, #hj) > .seg + .card { border-top: 0; padding-top: 8px; }
/* 단어 카드처럼 손으로 넘기는 것만 테두리 */
.card.flash { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 12px; }
.card h2, .card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.4; }
.card h3 { font-size: 14px; font-weight: 600; color: var(--text-2); letter-spacing: -0.01em; }
.muted { color: var(--text-3); font-size: 14px; line-height: 1.55; }
.small { font-size: 13px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }
.stack > * + * { margin-top: 10px; }
.hidden { display: none !important; }
.center { text-align: center; }
hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }

.subtabs { display: flex; gap: 22px; overflow-x: auto; margin-bottom: 8px; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs button {
  flex: none; border: 0; background: none; border-radius: 0; padding: 0; margin-bottom: -1px;
  font-size: 15px; font-weight: 500; color: var(--text-3); min-height: 44px; cursor: pointer; border-bottom: 2px solid transparent;
}
.subtabs button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }

/* ── 버튼 ── */
.btn {
  font-weight: 600; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 10px 18px; min-height: 48px; cursor: pointer;
  text-decoration: none; touch-action: manipulation; transition: background .15s, transform .1s;
}
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.primary:active:not(:disabled) { background: var(--accent-strong); }
.btn.ghost { background: transparent; }
.btn.block { width: 100%; }
.btn.sm { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:active:not(:disabled) { transform: scale(.98); }

/* ── 폼 ── */
label.field { display: block; font-size: 14px; color: var(--text-2); font-weight: 600; }
label.field > input, label.field > select, label.field > textarea { margin-top: 6px; }
.input, textarea.input, select.input {
  width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm);
  padding: 12px 14px; min-height: 48px; outline: none;
}
.input:focus { border-color: var(--accent); box-shadow: none; }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.6; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px;
  font-size: 14px; min-height: 36px; cursor: pointer; color: var(--text-2); font-weight: 600;
}
.chip.on { background: var(--accent-pastel); border-color: transparent; color: var(--on-pastel); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; }
.switch input { width: 46px; height: 28px; appearance: none; -webkit-appearance: none; background: var(--line); border-radius: 999px; position: relative; cursor: pointer; flex: none; transition: background .15s; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(18px); }

/* ── 홈 ── */
.hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.stat .v { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 12.5px; color: var(--text-3); font-weight: 550; margin-top: 2px; }
.rec { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.rec:first-of-type { border-top: 0; }
.rec .arrow { margin-left: auto; color: var(--text-3); }

/* ── 퀴즈 ── */
.qhead { display: flex; justify-content: flex-end; align-items: center; font-size: 14px; color: var(--text-3); margin-bottom: 8px; }
.qhead > :first-child { margin-right: auto; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* 그만: 어느 화면이든 줄 맨 오른쪽 ✕ */
.qhead > .q-quit { order: 10; width: 32px; height: 32px; margin-right: -6px; font-size: 18px; color: var(--text-3); }
.qhead > .q-quit .ic { width: 20px; height: 20px; }
.progress { height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; margin-bottom: 14px; }
.progress > div { height: 100%; background: var(--grow); background-size: 100cqw 100%; border-radius: 999px; transition: width .2s; }
.progress { container-type: inline-size; }
.big-kana { font-family: var(--font-glyph); font-size: clamp(96px, 34vw, 144px); line-height: 1.15; text-align: center; margin: 8px 0 4px; font-weight: 400; letter-spacing: 0; }
.big-word { font-family: var(--font-jp); font-size: clamp(36px, 12vw, 52px); text-align: center; margin: 8px 0; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.big-word:not(.en) { font-family: var(--font-glyph); font-weight: 400; }
.big-word.en { font-family: inherit; }
.big-roma { font-size: clamp(48px, 16vw, 72px); text-align: center; font-weight: 600; margin: 10px 0; letter-spacing: 0.02em; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.options.list { grid-template-columns: 1fr; }
.opt {
  border: 1px solid var(--line); background: var(--surface); border-radius: 12px; min-height: 64px; padding: 10px;
  transition: border-color .12s, background .12s;
  font-size: 18px; font-weight: 600; cursor: pointer; touch-action: manipulation; word-break: keep-all;
}
.opt.kana { font-family: var(--font-glyph); font-size: 40px; min-height: 92px; font-weight: 400; }
/* 손글씨 판: 가운데 십자선(쓰기 칸) */
.hw-pad { display: block; width: min(100%, 300px); aspect-ratio: 1; margin: 6px auto 0; touch-action: none; cursor: crosshair;
  color: var(--text); background-color: var(--surface-2); border-radius: 16px;
  background-image: linear-gradient(to right, transparent calc(50% - 0.5px), color-mix(in srgb, var(--text) 15%, transparent) 0 calc(50% + 0.5px), transparent 0),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), color-mix(in srgb, var(--text) 15%, transparent) 0 calc(50% + 0.5px), transparent 0); }
.opt.right { border-color: var(--good); background: var(--good-soft); color: var(--good); animation: opt-ok .3s ease-out; }
@keyframes opt-ok { 50% { transform: scale(1.03); } }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); animation: opt-ng .3s; }
@keyframes opt-ng { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.feedback { border-radius: 12px; padding: 12px 14px; margin-top: 12px; font-weight: 600; line-height: 1.55; }
.feedback.ok { background: var(--good-soft); color: var(--good); }
.feedback.ng { background: var(--bad-soft); color: var(--bad); }
.feedback.near { background: var(--warn-soft); color: var(--warn); }
.feedback .sub { font-weight: 450; color: var(--text-2); margin-top: 6px; font-size: 14.5px; line-height: 1.6; }
.answer-input { text-align: center; font-size: 26px; font-weight: 600; letter-spacing: .04em; }
.answer-input::placeholder { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--text-3); }

/* 가나 표 — 섹션 하나가 스크롤 없이 한 화면에 들어오도록 남은 높이를 행 수로 나눈다 */
.kana-fit {
  display: grid; gap: 5px;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  height: calc(100dvh - 300px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  min-height: 300px; max-height: 640px;
}
.kcell {
  border: 1px solid var(--line); background: var(--surface); border-radius: 10px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-height: 0; overflow: hidden;
}
.kcell .k { font-family: var(--font-jp); font-size: clamp(16px, 3.6dvh, 30px); line-height: 1.1; }
.kcell .r { font-size: clamp(9px, 1.5dvh, 12px); color: var(--text-3); line-height: 1.2; }
.kcell.empty { visibility: hidden; }
.kcell.m3 { background: var(--accent-soft); border-color: transparent; }
.kcell.m3 .k { color: var(--on-pastel); }
.kcell.weak { background: var(--bad-soft); border-color: transparent; }
.kcell.weak::after { content: ""; position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--bad); }
.ktools { display: flex; gap: 6px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin: 8px 0 0; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 4px; vertical-align: -1px; margin-right: 4px; border: 1px solid var(--line); }
.card.tight { padding: 12px; }
.ktools .seg button { padding: 6px 10px; white-space: nowrap; }
/* 화면이 낮은 폰(SE 등): 로마자를 글자 옆에 두어 칸 높이를 줄인다 */
@media (max-height: 720px) {
  .kcell { flex-direction: row; gap: 4px; }
  .kcell .r { font-size: 10px; }
}
@media (max-width: 380px) {
  .ktools .seg button { padding: 6px 8px; font-size: 13px; }
}

/* 단어 카드 */
.flash { min-height: 260px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.flash .reading { font-family: var(--font-jp); font-size: 20px; color: var(--text-2); }
.flash .meaning { font-size: 22px; font-weight: 600; margin-top: 6px; }
.flash .pos { font-size: 13px; color: var(--text-3); }
.example { background: var(--surface-2); border-radius: 12px; padding: 12px; margin-top: 14px; text-align: left; }
.example .ja { font-size: 17px; line-height: 1.6; }
.btn.again { color: var(--bad); }
.wlist .w { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.wlist .w:first-child { border-top: 0; }
.wlist .w .main { flex: 1; min-width: 0; }
.wlist .w .t { font-size: 18px; font-weight: 600; line-height: 1.4; }
.wlist .w .m { font-size: 14px; color: var(--text-2); line-height: 1.5; }
/* 상태 표시: 알약 바탕 없이 작은 글자만 (디자인 B) */
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 0; background: none; color: var(--text-3); white-space: nowrap; }
.badge.good { color: var(--good); }
.badge.bad { color: var(--bad); }
.badge.warn { color: var(--warn); }
.badge.accent { color: var(--accent); }
ruby rt { font-size: .5em; color: var(--text-3); font-weight: 450; letter-spacing: 0; }
ruby.kj { cursor: pointer; border-radius: 4px; }
ruby.kj:active { background: var(--accent-soft); }
.hanja { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; min-height: 28px; }
.hj { background: var(--accent-soft); color: var(--on-pastel); border-radius: 12px; padding: 3px 10px; font-size: 13.5px; font-weight: 550;
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.35; }
/* 한자 칩의 음독·훈독 줄 (전역 .yomi 상자 모양을 끈다) */
.hj .yomi { font-size: 11px; font-weight: 500; color: var(--text-2); display: block; background: none; padding: 0; margin: 0; border-radius: 0; text-align: center; }
.hj b { font-weight: 600; margin-right: 2px; }
/* 루비가 있는 줄은 위아래 여백을 넉넉히 */
.example .ja, .ex .t, .kv .v, .prompt { line-height: 2; }

/* 문장 */
.prompt { font-size: 20px; font-weight: 600; line-height: 1.65; letter-spacing: -0.02em; }
.prompt.jp { font-family: var(--font-jp); font-size: 22px; font-weight: 500; letter-spacing: 0; }
.hint-list { margin: 8px 0 0; padding: 0; list-style: none; }
.hint-list li { padding: 4px 0; font-size: 15px; }
.score {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 600; flex: none;
  border: 5px solid var(--line);
}
.score.hi { border-color: var(--good-soft); color: var(--good); background: var(--good-soft); }
.score.mid { border-color: var(--warn-soft); color: var(--warn); background: var(--warn-soft); }
.score.lo { border-color: var(--bad-soft); color: var(--bad); background: var(--bad-soft); }
.kv { margin-top: 16px; }
.kv .k { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.kv .v { font-size: 17px; margin-top: 3px; line-height: 1.65; }
.mistake { border-top: 1px solid var(--line); padding: 8px 0 2px; margin-top: 10px; }
.mistake .fix { font-weight: 600; }
.strike { text-decoration: line-through; color: var(--bad); }

/* ── 분석 (차트) ── */
.meter { margin: 10px 0; }
.meter .top { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.meter .top b { font-weight: 600; }
.meter .bar { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; display: flex; gap: 2px; }
.meter .bar .fill { height: 100%; background: var(--series-1); border-radius: 999px; }
.meter .bar .fill.light { background: color-mix(in srgb, var(--series-1) 35%, var(--surface-2)); }
.hbar { display: grid; grid-template-columns: 112px 1fr 34px; gap: 8px; align-items: center; padding: 6px 0; cursor: pointer; }
.hbar .name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .track { height: 14px; }
.hbar .track div { height: 100%; background: var(--series-1); border-radius: 0 4px 4px 0; min-width: 4px; }
.hbar .n { font-size: 13px; color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
.spark { width: 100%; height: 110px; display: block; }
.spark .b { fill: var(--series-1); }
.spark .b:hover, .spark .b.active { opacity: .7; }
.spark .grid { stroke: var(--line); stroke-width: 1; }
.spark text { fill: var(--text-3); font-size: 10px; }
.chart-tip { font-size: 13px; color: var(--text-2); min-height: 20px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.pairs { display: flex; flex-wrap: wrap; gap: 8px; }
.pair {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px;
  font-family: var(--font-jp); font-size: 22px; background: var(--surface);
}
.pair small { font-family: inherit; font-size: 12px; color: var(--text-3); }

/* ── 모달 · 토스트 ── */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  background: var(--surface); box-shadow: 0 24px 60px rgba(15,23,42,.16); width: 100%; max-width: 640px; max-height: 88vh; overflow: auto;
  border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
}
.sheet { position: relative; }
.sheet-x { position: sticky; top: -6px; float: right; margin: -8px -6px 0 0; z-index: 1; background: var(--surface); font-size: 16px; }
.flash { transition: transform .18s ease; will-change: transform; }
.sheet .grab { width: 40px; height: 5px; border-radius: 999px; background: var(--line); margin: -6px auto 12px; }
.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px); transform: translateX(-50%);
  background: var(--text); color: #fff; padding: 10px 16px; border-radius: 12px; z-index: 50; font-size: 14px; font-weight: 600;
  max-width: calc(100% - 32px); box-shadow: 0 4px 16px rgba(0,0,0,.2);
  white-space: pre-line; text-align: center; line-height: 1.5; width: max-content;   /* 두 줄 알림 (\n): 줄마다 한 줄로 */
}
.milestone .ms-ring { width: 64px; height: 64px; margin: 4px auto 0; color: var(--accent);
  display: grid; place-items: center; animation: ms-pop .5s ease-out; }
@keyframes ms-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.milestone .ms-ring .ic { width: 32px; height: 32px; }
.combo {   /* 퀴즈 연속 정답 (#98) */
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 64px); transform: translateX(-50%);
  background: var(--text); color: #fff; padding: 6px 14px; border-radius: 999px; z-index: 50;
  font-weight: 600; font-size: 15px; pointer-events: none; animation: combo-pop 1.1s ease-out forwards;
}
@keyframes combo-pop { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.9); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; } }
/* 영어 모드: 짙은 청록 (#111) — 대비는 tests/js/contrast.test.mjs 가 일본어와 같이 확인 */
:root[data-lang="en"] {
  --accent: #0f5e59;
  --accent-strong: #0a4642;
  --accent-pastel: #dcefed;
  --on-pastel: #0a4642;
  --accent-soft: #f0f7f6;
  --hl: #c4e4e0;
  --series-1: #1f7a73;
}
.mode-tag { display: none; margin-right: auto; font-weight: 600; color: var(--accent); font-size: 15px; }   /* 학습 중엔 바꾸는 대신 지금 모드만 */
body:has(#main .qhead) .mode-tag { display: inline-flex; }
.mode-splash { position: fixed; inset: 0; z-index: 80; display: grid; place-content: center; justify-items: center; gap: 6px;
  background: var(--accent); color: #fff; pointer-events: none; animation: mode-fade .9s ease forwards; }
.mode-splash .ms-big { font-family: var(--font-glyph); font-size: 96px; font-weight: 400; line-height: 1; }
.mode-splash .ms-name { font-size: 18px; font-weight: 600; }
@keyframes mode-fade { 0% { opacity: 0; } 20% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.spinner { display: inline-block; width: 18px; height: 18px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { padding: 40px 0; text-align: center; color: var(--text-3); }
/* 빈 상태: 옅은 타일 위 책 그림 */
.empty-state { padding: 56px 8px 28px; text-align: center; color: var(--text-3); }

/* ── 로그인 ── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-wrap .card { width: 100%; max-width: 380px; }
.auth-wrap h1 { margin: 0 0 4px; font-size: 26px; }
.error { color: var(--bad); font-size: 14px; min-height: 20px; }

@media (min-width: 700px) {
  main { padding-top: 20px; }
  .hero { gap: 12px; }
}

/* 아이콘 */
.ic { width: 1.1em; height: 1.1em; vertical-align: -0.18em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--series-1); flex: none; margin-top: 9px; }

/* 문법 */
.glist .g { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.glist .g:first-child { border-top: 0; }
.glist .num { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--text-3); font-size: 12px; font-weight: 600; display: grid; place-items: center; flex: none; }
.glist .g.done .num { background: var(--good-soft); color: var(--good); }
.glist .title { font-size: 17px; font-weight: 600; line-height: 1.4; }
.glist .mean { font-size: 13.5px; color: var(--text-2); line-height: 1.5; margin-top: 1px; }
.lesson-title { font-size: 26px; font-weight: 600; line-height: 1.35; margin: 4px 0 10px; letter-spacing: -0.02em; }
.pattern { display: inline-block; background: var(--accent-soft); color: var(--on-pastel); border-radius: 10px; padding: 6px 10px; font-size: 15px; font-weight: 600; }
.lesson-sec { font-size: 16px; line-height: 1.75; }
.lesson-sec h3 { margin: 22px 0 8px; }
.lesson-sec ul { margin: 0; padding-left: 20px; }
.lesson-sec li { margin: 6px 0; }
.ex { padding: 10px 0; border-top: 1px solid var(--line); }
/* 예문 복습 카드: 문장이 주인공 */
.flash > .row { justify-content: center; }   /* 가운데 정렬 카드 안의 버튼 줄 (듣기·따라 말하기) */
.ex-card .ex-sent { font-size: 21px; line-height: 1.8; font-weight: 500; }
.ex-card .ex-sent.en { font-size: 19px; }
.ex:first-child { border-top: 0; }
.ex .t { font-size: 18px; line-height: 1.6; }

/* 홈: 하루 목표 (주 색 바탕으로 가장 먼저 눈에 들어오게) + 오늘의 학습 */
/* 홈 (디자인 B): 오늘 진행 한 줄 → 다음 할 일 하나를 큰 글자로 → 그다음 · 더 해 보기 목록 */
.hn-bar { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: 13px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hn-track { flex: 1; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.hn-track > div { height: 100%; background: var(--accent); border-radius: 2px; }
.hn { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 4px 28px; }
.hn-l { font-size: 13px; color: var(--text-3); font-weight: 500; }
.hn-glyph { font-family: var(--font-glyph); font-size: clamp(120px, 40vw, 168px); line-height: 1.1; font-weight: 400; margin: 6px 0 2px; letter-spacing: 0; }
.hn-glyph .ic { width: .6em; height: .6em; stroke-width: 1.2; }
.hn-t { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.hn-s { font-size: 14px; color: var(--text-3); margin-top: 4px; }
.hn .hn-go { max-width: 420px; margin-top: 26px; min-height: 56px; border-radius: 28px; font-size: 17px; box-shadow: none; }
.hn .hn-short { margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; }
.hn-list { border-top: 1px solid var(--line); padding: 4px 0 8px; }
.hn-h { font-size: 13px; color: var(--text-3); font-weight: 500; padding: 12px 0 2px; }
.hn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 15.5px; cursor: pointer; }
.hn-row > span:first-child { white-space: nowrap; }
.hn-n { color: var(--text-3); font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hn-row.done > span:first-child { color: var(--text-3); }
.hn-btns { display: flex; gap: 6px; }
.hn-btns .plan-n { color: var(--text-3); font-weight: 500; }
.hn-opts { border-top: 1px solid var(--line); padding: 4px 0 8px; }
.hn-opts .chips { margin-bottom: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 카드 제목 앞 작은 아이콘 */
.h-ic { display: flex; align-items: center; gap: 8px; }
.h-ic > .ic { color: var(--accent); width: 20px; height: 20px; }
.tile { min-width: 28px; flex: none; display: grid; place-items: center; color: var(--text);
  font-family: var(--font-glyph); font-size: 22px; font-weight: 400; line-height: 1; }
.tile .ic { width: 17px; height: 17px; }
.fold.card > summary { gap: 10px; }
/* 이번 주 실력 변화 한 줄: 좁은 화면에선 항목 단위로 줄바꿈 */
/* 이번 주: 2×2 칸 */
.wk { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.wk-t { border-top: 1px solid var(--line); padding: 10px 0 4px; min-width: 0; }
.wk-l { font-size: 13px; color: var(--text-2); font-weight: 600; }
.wk-v { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; font-variant-numeric: tabular-nums; }
.wk-v small { font-size: 14px; color: var(--text-3); font-weight: 500; margin-left: 1px; }
.wk-s { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-s .up { color: var(--good); font-weight: 600; }
.wk-s .down { color: var(--bad); font-weight: 600; }
.plan-count { font-size: 14px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.plan { margin-top: 6px; }
.plan-row { display: flex; align-items: center; gap: 12px; padding: 12px 10px; margin: 0 -10px; border-radius: 12px; cursor: pointer; min-height: 60px; }
.plan-row + .plan-row { margin-top: 2px; }
.plan-row .check { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 16px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent); font-family: var(--font-jp); }
.plan-row .check .ic { width: 18px; height: 18px; }
.plan-row.done .check { background: var(--good-soft); color: var(--good); }
.plan-row.done b { color: var(--text-3); font-weight: 600; }
.plan-row.next { background: var(--accent-soft); }
.plan-row.next .check { background: var(--accent); color: #fff; }
.plan-row .arrow { color: var(--text-3); }
.plan-row:active { background: var(--surface-2); }

/* 문법 복습 배너 · 가나 추천 세트 */
.review-banner, .rec-set { display: flex; align-items: center; gap: 12px; }
.review-banner .btn, .rec-set .btn { flex: none; }

/* 힌트 단어 담기 */
.hint-list li { display: flex; align-items: center; gap: 8px; }
.hint-list .btn.sm { min-height: 36px; padding: 4px 10px; font-size: 13px; flex: none; }

/* 모바일: 주 버튼을 하단 탭 위에 붙여 둔다 (긴 화면에서도 바로 누를 수 있게) */
.sticky-actions {
  position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px); z-index: 5;
  padding-top: 8px; margin-top: 12px;
  background: linear-gradient(to bottom, transparent, var(--bg) 35%);
}
.card .sticky-actions { background: linear-gradient(to bottom, transparent, var(--surface) 35%); }

/* ── 한자 ── */
.big-kanji { font-family: var(--font-glyph); font-size: clamp(96px, 34vw, 144px); line-height: 1.1; text-align: center; font-weight: 400; letter-spacing: 0; }
.hun { font-size: 24px; font-weight: 600; text-align: center; margin-top: 6px; color: var(--on-pastel); }
.yomi { display: grid; gap: 6px; margin: 14px 0 4px; text-align: left; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.yomi .jp { font-size: 17px; }
.hj-ex { text-align: left; margin-top: 8px; }
.hj-ex > .row { padding: 6px 0; border-top: 1px solid var(--line); }
.hj-ex > .row:first-child { border-top: 0; }
.kana-fit.hj-fit { height: calc(100dvh - 370px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 320px; }
.hj-fit .kcell .k { font-size: clamp(18px, 3.4dvh, 28px); }
.kcell.seen { background: var(--surface-2); border-color: transparent; }

/* ── 듣기 ── */
/* 재생: 가운데 큰 둥근 버튼, 느리게는 그 아래 작게 */
.listen-play { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 18px 0 16px; }
.listen-play .play { width: 76px; height: 76px; min-height: 0; padding: 0; border-radius: 50%; }
.listen-play .play svg { width: 32px; height: 32px; }
.listen-play .link-btn { font-size: 14px; padding: 4px 10px; }
.d-miss { background: var(--warn-soft); color: var(--warn); border-radius: 3px; text-decoration: underline; text-underline-offset: 3px; }
.d-extra { background: var(--bad-soft); color: var(--bad); border-radius: 3px; text-decoration: line-through; }
.diff { font-size: 16px; letter-spacing: 0.02em; }

/* ── 토익 ── */
.en { font-family: var(--font); letter-spacing: 0; }
.p5-q { font-size: 18px; line-height: 1.7; margin: 6px 0 14px; word-break: normal; overflow-wrap: break-word; }
.blank { display: inline-block; min-width: 72px; border-bottom: 2px solid var(--series-1); margin: 0 4px; transform: translateY(-4px); }
.p5-opt { text-align: left; font-size: 16px; font-weight: 550; padding: 12px 14px; min-height: 52px; }
.p5-opt b { color: var(--text-3); margin-right: 6px; font-weight: 600; }
.p5-timer { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.p5-timer > div { height: 100%; width: 100%; background: var(--series-1); border-radius: 999px; transition: width .1s linear; }
.p5-timer > div.low { background: var(--bad); }
.opt:disabled { cursor: default; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ═══ 태블릿 (iPad) ═══════════════════════════════════════════════════
   세로(768~1023px 폭): 본문을 넓히고 홈은 2단.
   가로(1024px 이상이면서 높이가 낮을 때): 하단 탭을 왼쪽 세로 레일로 옮겨 세로 공간을 확보. */
@media (min-width: 768px) {
  body { font-size: 17px; }
  main { max-width: 860px; padding: 20px 24px 0; }
  .topbar { padding-left: max(24px, calc((100% - 860px) / 2 + 24px)); padding-right: max(24px, calc((100% - 860px) / 2 + 24px)); }
  .tabbar .inner { max-width: 860px; }
  .card { padding: 22px 0; }
  .card.flash { padding: 22px; }
  /* 홈: 카드 두 단 (오늘의 학습이 한 단을 차지) */
  /* 문제 풀이 화면은 시선이 흩어지지 않게 카드째로 읽기 좋은 폭(680px) 가운데에 */
  .card:has(.qhead), .card.flash,
  #pane > .qhead, #pane > .progress, #pane > .sticky-actions, #pane > p.center,
  #hj > .qhead, #hj > .progress, #hj > .sticky-actions, #hj > p.center { max-width: 680px; margin-left: auto; margin-right: auto; }
  #pane > .qhead, #hj > .qhead { display: flex; }
  .big-word { font-size: 60px; }
  .opt { min-height: 68px; font-size: 19px; }
  .opt.kana { min-height: 110px; font-size: 46px; }
  /* 팝업은 아래 시트 대신 가운데 모달 */
  .sheet-backdrop { align-items: center; padding: 24px; }
  .sheet { max-width: 600px; border-radius: 20px; max-height: 84vh; padding-bottom: 20px; }
  .sheet .grab { display: none; }
  .toast { bottom: calc(var(--nav-h) + 24px); }
}

/* iPad 가로 등 넓고 낮은 화면: 왼쪽 세로 탭 레일 */
@media (min-width: 1024px) and (max-height: 1100px), (min-width: 1180px) {
  :root { --rail-w: 92px; }
  body { padding-left: var(--rail-w); padding-bottom: 24px; }
  .tabbar {
    top: 0; bottom: 0; right: auto; width: var(--rail-w);
    border-top: 0; border-right: 1px solid var(--line);
    padding: calc(env(safe-area-inset-top) + 76px) 0 env(safe-area-inset-bottom);
    align-items: flex-start;
  }
  .tabbar .inner { flex-direction: column; gap: 4px; max-width: none; }
  .tabbar button { height: 56px; flex: none; margin: 0 8px; width: calc(var(--rail-w) - 16px); }
  /* 하단 탭이 없으니 고정 버튼·알림을 화면 아래에 붙인다 */
  .sticky-actions { bottom: calc(env(safe-area-inset-bottom) + 12px); }
  .toast { bottom: 24px; left: calc(50% + var(--rail-w) / 2); }
  main { max-width: 960px; }
  .topbar { padding-left: max(24px, calc((100% - 960px) / 2 + 24px)); padding-right: max(24px, calc((100% - 960px) / 2 + 24px)); }
  /* 탭 레일 덕분에 표에 쓸 수 있는 높이가 늘어난다 */
  .kana-fit { height: calc(100dvh - 250px); }
  .kana-fit.hj-fit { height: calc(100dvh - 320px); }
}

/* 마우스·트랙패드(아이패드 매직 키보드 포함): 누를 수 있는 곳을 살짝 표시 */
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled), .opt:hover:not(:disabled), .chip:hover, .plan-row:hover, .rec:hover, .glist .g:hover, .wlist .w:hover, .kcell:hover, .hn-row:hover {
    filter: brightness(0.97);
  }
  .tabbar button:hover { color: var(--text); }
}

/* 형광펜: 글자 아래쪽 절반만 칠한 듯이 */
mark { background: linear-gradient(transparent 45%, var(--hl) 45%); color: inherit; padding: 0 1px; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
ruby mark, mark ruby { background: linear-gradient(transparent 55%, var(--hl) 55%); }
/* 예문 해설 · 정답 풀이 속 예문 */
.ex-note { margin-top: 6px; padding: 8px 10px; background: var(--accent-soft);
  border-radius: 8px; font-size: 14px; line-height: 1.65; color: var(--text); }
.fb-ex { margin-top: 8px; padding: 8px 10px; background: var(--surface); border-radius: 10px; color: var(--text); line-height: 1.9; }
.fb-ex .ja { font-size: 17px; }
/* 단어 손글씨: 쓸 글자 칸 */
.hw-slots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.hw-slots .slot { width: 38px; height: 44px; border: 1.5px dashed var(--line); border-radius: 10px; display: grid; place-items: center;
  font-size: 24px; background: var(--surface); }
.hw-slots .slot.cur { border: 2px solid var(--accent); background: var(--accent-soft); }
.hw-slots .slot.ok { border-style: solid; border-color: var(--good); color: var(--good); }
.hw-slots .slot.ng { border-style: solid; border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }

/* ── 접어 두는 칸: 핵심만 보이고 자세한 설명은 눌러서 ── */
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--text-2);
  font-size: 14px; font-weight: 600; padding: 6px 0; -webkit-tap-highlight-color: transparent; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); margin-left: 2px; transition: transform .15s; }
.fold[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.fold-body { padding-bottom: 4px; }
.fold.sec { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 6px; }
.fold.card > summary { color: var(--text); font-size: 16px; }
.fold.card[open] > summary { margin-bottom: 8px; }
.fold.note { margin-top: 2px; }
.fold.note > summary { font-size: 12.5px; color: var(--accent); padding: 4px 0 0; font-weight: 600; }
.fold.note .ex-note { margin-top: 4px; }
/* 홈 '이어서 학습' · 학습을 마친 화면의 '다음' */
.go-next { margin: 0 0 14px; justify-content: center; gap: 6px; }   /* 시험 '이어서' (홈은 .goal .btn) */
.go-next .plan-n, .next-step .plan-n { opacity: .75; font-weight: 500; font-size: 13px; }
.link-btn { background: none; border: 0; padding: 4px 0 0; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; position: relative; }
/* 작은 글자 버튼은 보이는 크기는 그대로, 누르는 곳만 넓게 (손가락 44px 정도) */
.link-btn::after, .inmode .seg button::after { content: ''; position: absolute; inset: -10px 0; }
/* AI 내용 평가 (좋아요 · 별로) — 눈에 덜 띄게 오른쪽 아래 */
.kstat { margin: -12px 0 18px; text-align: center; font-size: 13px; color: var(--text-3); line-height: 1.7; }
/* 홈 할 일: 한 줄씩 */
.plan-row { min-height: 50px; padding: 9px 10px; }
.plan-row .plan-n { color: var(--text-3); font-size: 13.5px; font-variant-numeric: tabular-nums; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-row.next .plan-n { color: var(--accent); font-weight: 600; }
/* 헤더의 가나 표 버튼 */
.icon-btn.kt-top { font-size: 19px; font-weight: 600; color: var(--text); width: 36px; }
/* 헤더 메뉴 (언어·수준·불편함 기록·설정) */
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.menu-row > span { color: var(--text-2); font-weight: 600; font-size: 14px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 4px; border: 0; border-top: 1px solid var(--line);
  background: none; font: inherit; font-weight: 600; color: var(--text); text-align: left; cursor: pointer; }
.menu-item .ic { color: var(--text-2); }
.sheet .kana-fit { height: min(62dvh, 560px); min-height: 280px; }
#kt-sheet { padding-top: 4px; }
/* 가나 쓰기 연습: 행·단 글자 칸 */
.kw-slots { gap: 4px; margin: 2px 0 6px; }
.kw-slots .slot { width: 34px; height: 38px; font-size: 21px; }
.kw-slots .slot small { font-family: var(--font); font-size: 10.5px; color: var(--text-3); }
.kw-slots .slot.cur small { color: var(--accent); font-weight: 600; }
.hw-slots .slot.hint { border-style: solid; border-color: var(--series-1); color: var(--accent); background: var(--accent-soft); }
.kw-preview { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 20px; color: var(--text-2); }
.kw-preview .new { color: var(--accent); font-weight: 600; }
.kw-preview .later { opacity: .3; }

/* 손글씨 입력 (가나 입력칸 공통) */
.inmode { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 6px; }
.inmode .seg button { min-height: 30px; padding: 4px 9px; font-size: 13px; position: relative; }
.inmode .kscript { margin-right: auto; }
.inmode .kscript[hidden] { display: none; }
.inmode .kscript button { font-size: 15px; padding: 4px 10px; }
.hwk-prev { min-height: 1.6em; padding: 2px 4px; text-align: center; font-size: 20px; color: var(--accent); }
.hwk:empty { display: none; }
/* 손글씨일 때: 입력칸은 숨기고 쓴 글자를 판 위 한 줄로 */
.hw-hidden { display: none !important; }
.hwk-out { min-height: 46px; padding: 6px 8px; border-bottom: 2px solid var(--accent-pastel); font-size: 22px; line-height: 1.5;
  text-align: center; word-break: break-all; margin-bottom: 8px; }
.hwk-out:empty::before { content: attr(data-ph); color: var(--text-3); font-size: 15px; }
.hwk { margin-top: 8px; }
.hwk-pad { width: min(100%, 240px); }
.hwk-cands { display: flex; justify-content: center; gap: 6px; min-height: 40px; margin-top: 8px; }
.hwk-cands .chip { font-size: 20px; min-width: 46px; justify-content: center; }
.hwk-keys { margin-top: 6px; }
.btn-row { flex-wrap: nowrap; }
.btn-row .btn.sm, .hwk-keys .btn.sm { white-space: nowrap; padding-left: 10px; padding-right: 10px; }

/* 한자 단어 풀이 */
.fold.bd { margin-top: 6px; text-align: left; }
.bd-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.bd-part { display: grid; gap: 1px; background: var(--accent-soft); color: var(--on-pastel); border-radius: 12px; padding: 6px 10px; font-size: 13.5px; }
.bd-part b { font-size: 20px; font-weight: 600; }
.bd-part small { font-size: 11.5px; }
.fold.bd > summary { font-size: 12.5px; color: var(--accent); padding: 4px 0 0; font-weight: 600; }
.hw-miss { display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* 15분 코스 */
#course-bar { padding: 8px 16px 0; }
.course-in { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); max-width: 720px; margin: 0 auto; }
.course-track { flex: 1; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.course-track > div { height: 100%; background: var(--grow); transition: width .3s; }
.course-done { text-align: center; font-size: 15px; line-height: 1.6; margin-bottom: 10px; }

/* 약점 분석: 영역마다 한 줄 요약, 눌러서 자세히 */
.fold.card > summary .an-sum { flex: 1; min-width: 0; text-align: right; font-size: 13px; color: var(--text-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 모바일 다듬기: 글자가 상자를 넘지 않고, 상자 안 글자는 가운데로 ── */
body { overflow-wrap: break-word; }
.card, .grow { min-width: 0; }
.big-word, .prompt, .opt, .feedback, .kv .v, .ex-sent, .meaning { overflow-wrap: anywhere; }
.btn, .chip, .seg button, .subtabs button { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.chip, .seg button, .subtabs button { white-space: nowrap; }
.btn { max-width: 100%; }
.btn .plan-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; opacity: .8; }
.opt { display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.35; }
/* 오늘의 학습: 제목은 한 줄, 오른쪽 내용이 길면 말줄임 */
.plan-row b.grow { flex: 1 0 auto; white-space: nowrap; }   /* 제목은 줄이지 않고, 오른쪽 내용을 말줄임 */
.plan-row .plan-n { flex: 0 1 auto; max-width: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.nowrap { white-space: nowrap; }
.qhead { gap: 8px; }
.qhead > span:first-child { white-space: nowrap; }
.hint-list li > .grow { overflow-wrap: anywhere; }
/* 몰입: 카드·문제를 푸는 동안(진행 줄이 있을 때)은 하위 탭을 숨긴다 — 하단 탭으로는 언제든 나갈 수 있다 */
#main:has(.qhead) > .subtabs, #pane:has(.qhead) > .seg { display: none; }   /* 한자 공부·퀴즈·표 메뉴도 */

/* 단어 활용표 */
.conj { width: 100%; text-align: left; }
.conj-row { border-top: 1px solid var(--line); }
.conj-row > summary { gap: 10px; }
.conj-l { flex: 0 0 auto; min-width: 72px; font-size: 13px; color: var(--text-3); font-weight: 600; }
.conj-f { flex: 1; min-width: 0; font-size: 17px; font-weight: 500; color: var(--text); }
.conj-body { display: grid; gap: 6px; padding: 0 0 10px; }
.conj-all { flex-wrap: nowrap; align-items: center; font-size: 15px; line-height: 2; }
.conj-ex { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.conj-ex .ja { font-size: 16px; line-height: 2; }
.conj-more > summary { font-size: 13px; color: var(--accent); }
.more-ex { margin-top: 6px; }
.more-ex > summary { font-size: 12.5px; color: var(--accent); padding: 4px 0; }
.more-ex .conj-ex { background: var(--surface); }

/* ── JLPT 모의시험 ── */
.ex-cur > h2 { color: var(--accent); }
.ex-set + .ex-set { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ex-set > * + * { margin-top: 6px; }
.ex-set .btn { margin-top: 10px; }
.ex-hists { margin-top: 8px; }
.ex-hist { display: flex; align-items: center; gap: 6px; padding: 8px 2px; border-top: 1px solid var(--line); cursor: pointer; font-variant-numeric: tabular-nums; }
.ex-hist:first-child { border-top: 0; }
.ex-hist .arrow { color: var(--text-3); }
.ex-head { gap: 10px; }
.ex-head > span:first-child { flex: 1; }
.ex-timer { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-2); }
.ex-timer.low { color: var(--bad); }
.ex-timer.paused { opacity: .5; }
.ex-mondai .fold { margin-top: 4px; }
.ex-passage { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; line-height: 1.9; font-size: 16px; max-height: 46vh; overflow-y: auto; white-space: normal; word-break: break-all; }
.ex-qt { font-size: 18px; line-height: 1.85; word-break: break-all; }
.ex-qno { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 4px; border: 1.5px solid var(--text-3); font-size: 13px; font-weight: 600; margin-right: 4px; vertical-align: 2px; }
.ex-ul { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ex-blank { display: inline-block; width: 2.6em; border-bottom: 1.5px solid var(--text-2); margin: 0 3px; text-align: center; line-height: 1.3; }
.ex-blank.star { color: var(--accent); font-size: 14px; }
.ex-no { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border: 1.5px solid var(--text-2); font-size: 12px; margin: 0 2px; vertical-align: 2px; }
.ex-situ { background: var(--accent-soft); border-radius: 10px; padding: 8px 12px; font-size: 14.5px; line-height: 1.55; }
.ex-opts .ex-opt { justify-content: flex-start; text-align: left; gap: 10px; min-height: 52px; font-size: 16.5px; font-weight: 500; }
.ex-opts.audio { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; }
.ex-opts.audio .ex-opt { justify-content: center; min-height: 60px; }
.ex-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--text-2); }
.ex-opt.sel { border-color: var(--accent); background: var(--accent-soft); }
.ex-opt.sel .ex-n { background: var(--accent-pastel); color: var(--on-pastel); }
.ex-nav { margin-top: 12px; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.ex-grid button { min-height: 44px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ex-grid button.done { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ex-grid button.cur { border-color: var(--accent); }
.ex-big { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ex-pass { font-size: 14px; padding: 4px 12px; }
.ex-score > * + * { margin-top: 6px; }
.ex-type { grid-template-columns: 92px 1fr 40px; cursor: default; }
.ex-rev.ng { border-top: 2px solid var(--bad); }
.ex-ropts > * + * { margin-top: 6px; }
.ex-ropt { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); }
.ex-ropt .ic { flex: none; width: 18px; height: 18px; stroke: var(--good); fill: none; stroke-width: 2.5; }
.ex-ropt.right { border-color: var(--good); background: var(--good-soft); }
.ex-ropt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.ex-ropt .jp { font-size: 16px; line-height: 1.6; word-break: break-all; }
.ex-script { font-size: 15px; line-height: 1.8; }
.ex-script b { display: inline-block; min-width: 1.4em; font-weight: 600; }
.ex-x { flex: none; color: var(--bad); font-weight: 600; }
/* 가나: 헷갈린 두 글자 나란히 */
.kpair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.kpair-c { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
.kpair-c .jp { font-family: var(--font-glyph); font-size: 44px; line-height: 1.1; font-weight: 400; }
.kpair-c small { color: var(--text-2); font-weight: 450; }
.kpair-c.ok { border-color: var(--good); background: var(--good-soft); }
.kpair-tip { margin-top: 8px; }
/* 홈: 짧게 · 복습만 */
/* 모의시험: 영역만 짧게 */
.ex-set .ex-secs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ex-secs .chip small { opacity: .7; }
/* 주제별 학습 */
.topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.topic-grid > .topic-card { padding: 14px 0; border-top: 1px solid var(--line); }
.topic-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.topic-card b { overflow-wrap: anywhere; }
.topic-card .progress { width: 100%; margin-top: 4px; }
.topic-words { display: flex; flex-wrap: wrap; gap: 6px; }
.topic-w { display: inline-flex; flex-direction: column; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; max-width: 100%; }
.topic-w small { color: var(--text-2); overflow-wrap: anywhere; }
.topic-w.learned { border-color: var(--accent); }
.topic-w.known { background: var(--good-soft); border-color: transparent; }
.sec-title { margin: 6px 2px 10px; font-size: 17px; }
/* 불편함 메모: 지난 기록 */
.note-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.note-list li { border-top: 1px solid var(--line); padding-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* 시작 화면 (단어·한자, #110) */
.hn.intro-card { padding: 32px 4px 24px; }

/* 기초 개념 (#113) */
.ck-sec > summary { color: var(--text); font-size: 16px; }
.ck-sec p { margin: 6px 0; }
.ck-table-wrap { overflow-x: auto; margin: 8px 0 4px; }
.ck-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.9; }
.ck-table th, .ck-table td { border-bottom: 1px solid var(--line); padding: 6px; text-align: left; vertical-align: top; }
.ck-table thead th { background: var(--accent-soft); color: var(--on-pastel); font-weight: 600; font-size: 13.5px; }
.ck-table tbody th { color: var(--text-2); font-weight: 600; font-size: 13px; white-space: nowrap; }
.ck-traps, .ck-tip { margin-top: 16px; border-radius: 12px; padding: 4px 14px 10px; }
.ck-traps { background: var(--surface-2); }
.ck-traps h3 { color: var(--text); }
.ck-tip { background: var(--accent-soft); }
.ck-tip h3 { color: var(--accent); }
.ck-traps h3, .ck-tip h3 { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; }
.ck-tip p { margin: 0; }