/* 네말 — 프로젝트 레이어
 * 절대경로: D:\manhattan\fat-man\_apps\nemal\styles\app.css
 * 색·간격·서체는 전부 @fatman-ds 토큰 참조. 여기서 색값을 새로 만들지 않는다.
 * 예외 둘 — 한자 스택과 음성기호 스택. 토큰이 다루지 않는 갈래라 여기서 정의한다.
 * 기준 화면 1920. 좁아지면 단계적으로 접힌다.
 */

:root {
  --font-hanzi: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", var(--font-sans);
  /* mono 서체는 IPA 글리프가 없어 글자마다 다른 서체로 떨어지고 간격이 벌어진다 */
  --font-phonetic: "Segoe UI", "Charis SIL", "Lucida Sans Unicode", "Helvetica Neue", var(--font-sans);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --top-h: 68px;
  --page-x: var(--spacing-10);
  --rail-w: 232px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; }
button { font-family: inherit; }

#shell { height: 100dvh; display: flex; flex-direction: column; }

/* ── 상단 메뉴 ─────────────────────────────────── */
.top {
  flex: 0 0 auto; height: var(--top-h);
  display: flex; align-items: center; gap: var(--spacing-10);
  padding: 0 var(--page-x);
  background: var(--color-bg-surface-elevated);
  border-bottom: 1px solid var(--color-border-default);
}
.wordmark {
  font-size: var(--font-size-24); font-weight: var(--font-weight-extrabold);
  letter-spacing: -.02em; white-space: nowrap;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--color-text-primary); font-family: inherit;
}
.wordmark:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 4px; border-radius: var(--radius-sm); }

/* 처음 상태로 되돌리기 */
.reset-row {
  display: flex; align-items: center; gap: var(--spacing-3); flex-wrap: wrap;
  margin-top: var(--spacing-6); padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-12); color: var(--color-text-muted);
}
.reset-ask { display: flex; align-items: center; gap: var(--spacing-3); flex-wrap: wrap; font-weight: var(--font-weight-semibold); }
.reset-yes {
  border: 1px solid var(--color-feedback-error); background: var(--color-feedback-error);
  color: var(--color-action-primary-foreground); border-radius: var(--radius-md);
  padding: var(--spacing-1-5) var(--spacing-4); cursor: pointer;
  font-family: inherit; font-size: var(--font-size-12); font-weight: var(--font-weight-bold);
}
.reset-yes:hover { filter: brightness(1.08); }
.reset-yes:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.wordmark em { font-style: normal; color: var(--color-accent-1); }
.wordmark span {
  margin-left: var(--spacing-2); font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold); color: var(--color-text-muted);
}
.wordmark span .zh { font-family: var(--font-hanzi); }

.menu { display: flex; gap: var(--spacing-1); flex: 1 1 auto; }
.menu button {
  display: flex; align-items: center; gap: var(--spacing-2);
  border: 0; background: none; cursor: pointer;
  padding: var(--spacing-3) var(--spacing-5); border-radius: var(--radius-lg);
  font-size: var(--font-size-15); font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.menu button svg { width: 20px; height: 20px; display: block; }
.menu button:hover { background: var(--color-bg-surface-sunken); color: var(--color-text-primary); }
.menu button[aria-current="page"] {
  background: var(--color-action-primary); color: var(--color-action-primary-foreground);
}
.menu button:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.top-meta {
  display: flex; align-items: center; gap: var(--spacing-6);
  font-size: var(--font-size-13); font-weight: var(--font-weight-bold);
  color: var(--color-text-muted); white-space: nowrap;
}
.top-meta b { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }

/* ── 본문 ─────────────────────────────────────── */
.page { flex: 1 1 auto; overflow-y: auto; padding: var(--spacing-8) var(--page-x) var(--spacing-12); }
.view { display: none; }
.view.on { display: block; animation: view-in .32s var(--ease-out) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.sec-title {
  font-size: var(--font-size-13); font-weight: var(--font-weight-extrabold);
  color: var(--color-text-muted); margin: 0 0 var(--spacing-4);
}

/* ═══ 오늘 ═══════════════════════════════════════ */
.today {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--spacing-10); align-items: start; max-width: 1680px;
}

.greet { margin: 0 0 var(--spacing-6); }
.greet h1 {
  margin: 0; font-size: var(--font-size-32); font-weight: var(--font-weight-extrabold);
  letter-spacing: -.02em; line-height: var(--line-height-tight);
}
.greet p {
  margin: var(--spacing-2) 0 0; font-size: var(--font-size-15);
  color: var(--color-text-secondary); font-weight: var(--font-weight-medium);
}

/* 오늘의 카드 — 스스로 뒤집혀서 이 물건이 뭔지 한 장면으로 보여준다 */
.hero { perspective: 1800px; height: 340px; cursor: pointer; }
.hero-in {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .8s var(--ease-out);
}
.hero.flip .hero-in { transform: rotateY(180deg); }
.hero-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius-3xl); border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface-elevated);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--spacing-3); padding: var(--spacing-8); text-align: center;
  box-shadow: 0 2px 4px rgba(34, 28, 23, .04), 0 18px 40px rgba(34, 28, 23, .07);
}
.hero-face.back { transform: rotateY(180deg); background: var(--color-bg-surface-sunken); }
.hero-tag {
  position: absolute; top: var(--spacing-6); left: var(--spacing-7);
  font-size: var(--font-size-11); font-weight: var(--font-weight-extrabold);
  letter-spacing: .1em; color: var(--color-text-muted);
}
.hero-tag.zh { font-family: var(--font-hanzi); letter-spacing: .16em; }
.hero-en {
  font-size: var(--font-size-64); font-weight: var(--font-weight-extrabold);
  letter-spacing: -.03em; line-height: var(--line-height-none);
}
.hero-ipa { font-family: var(--font-phonetic); font-size: var(--font-size-20); color: var(--color-text-muted); }
.hero-hanzi {
  font-family: var(--font-hanzi); font-size: var(--font-size-72);
  font-weight: var(--font-weight-bold); line-height: var(--line-height-none);
}
.hero-pinyin { font-family: var(--font-phonetic); font-size: var(--font-size-24); color: var(--color-text-secondary); }
.hero-hint {
  position: absolute; bottom: var(--spacing-6);
  font-size: var(--font-size-12); font-weight: var(--font-weight-bold); color: var(--color-text-disabled);
}

/* 오른쪽 기둥 */
.side { display: flex; flex-direction: column; gap: var(--spacing-6); }
.panel {
  background: var(--color-bg-surface-elevated); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2xl); padding: var(--spacing-7);
}
.due-line { display: flex; gap: var(--spacing-7); margin-bottom: var(--spacing-6); }
.due-cell b {
  display: block; font-size: var(--font-size-36); line-height: var(--line-height-none);
  font-weight: var(--font-weight-extrabold); font-variant-numeric: tabular-nums;
}
.due-cell span {
  display: block; margin-top: var(--spacing-2);
  font-size: var(--font-size-12); font-weight: var(--font-weight-bold); color: var(--color-text-muted);
}
.due-cell.is-new b { color: var(--color-action-primary); }
.due-cell.is-due b { color: var(--color-accent-2); }
.due-cell.is-leech b { color: var(--color-feedback-error); }

/* 이 화면의 유일한 1차 행동(R3) */
.cta {
  width: 100%; border: 0; border-radius: var(--radius-xl); padding: var(--spacing-5);
  background: var(--color-action-primary); color: var(--color-action-primary-foreground);
  font-size: var(--font-size-18); font-weight: var(--font-weight-extrabold); cursor: pointer;
  box-shadow: 0 5px 0 var(--color-action-primary-active);
  transition: transform .1s var(--ease-out), box-shadow .1s var(--ease-out);
}
.cta:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--color-action-primary-active); }
.cta:disabled {
  background: var(--color-action-secondary); color: var(--color-text-disabled);
  box-shadow: 0 5px 0 var(--color-border-strong); cursor: default;
}
.cta:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 3px; }

/* 진도 — 고리 + 유닛 막대 */
.ring-row { display: flex; align-items: center; gap: var(--spacing-7); margin-bottom: var(--spacing-6); }
.ring { position: relative; flex: 0 0 auto; width: 108px; height: 108px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .bg { fill: none; stroke: var(--color-bg-surface-sunken); stroke-width: 10; }
.ring .fg {
  fill: none; stroke: var(--color-feedback-success); stroke-width: 10; stroke-linecap: round;
  transition: stroke-dashoffset .8s var(--ease-out);
}
.ring-num {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.ring-num b { font-size: var(--font-size-24); font-weight: var(--font-weight-extrabold); font-variant-numeric: tabular-nums; }
.ring-num span { font-size: var(--font-size-11); color: var(--color-text-muted); font-weight: var(--font-weight-bold); }
.ring-side { font-size: var(--font-size-14); color: var(--color-text-secondary); line-height: var(--line-height-relaxed, 1.7); }
.ring-side b { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }

.unit-row {
  display: flex; align-items: center; gap: var(--spacing-4);
  padding: var(--spacing-3) 0; border-bottom: 1px solid var(--color-border-subtle);
}
.unit-row:last-child { border-bottom: 0; }
.unit-row .name { flex: 0 0 104px; font-size: var(--font-size-14); font-weight: var(--font-weight-bold); }
.unit-row .name i {
  font-style: normal; font-family: var(--font-hanzi); font-size: var(--font-size-12);
  color: var(--color-text-muted); margin-left: var(--spacing-1-5); font-weight: var(--font-weight-regular);
}
.track { flex: 1 1 auto; height: 9px; background: var(--color-bg-surface-sunken); border-radius: var(--radius-full); overflow: hidden; }
.track > i { display: block; height: 100%; background: var(--color-feedback-success); border-radius: var(--radius-full); transition: width .6s var(--ease-out); }
.unit-row .pct {
  flex: 0 0 44px; text-align: right; font-size: var(--font-size-12);
  font-weight: var(--font-weight-bold); color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}

/* ═══ 단어장 ═════════════════════════════════════ */
/* 필터를 한 판에 모았다. 기둥에 주제, 위에 품사로 흩어 두면 조건을 겹쳐 걸기가 어렵다 */
.words-layout { display: block; }

/* 도구 줄 — 검색·발음기호·페이지당 개수 */
.tools { display: flex; align-items: center; gap: var(--spacing-3); margin-bottom: var(--spacing-6); flex-wrap: wrap; }
.search { position: relative; flex: 1 1 320px; max-width: 480px; }
.search svg {
  position: absolute; left: var(--spacing-4); top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--color-text-muted); pointer-events: none;
}
.search input {
  width: 100%; padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-11, 44px);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-lg);
  background: var(--color-bg-surface-elevated); color: var(--color-text-primary);
  font-family: inherit; font-size: var(--font-size-15);
}
.search input::placeholder { color: var(--color-text-disabled); }
.search input:focus { outline: 2px solid var(--color-border-focus); outline-offset: -1px; border-color: transparent; }

.switch {
  background: var(--color-bg-surface-elevated); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg); padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-13); font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary); cursor: pointer; white-space: nowrap;
}
.switch[aria-pressed="true"] {
  color: var(--color-action-primary-foreground);
  background: var(--color-action-primary); border-color: var(--color-action-primary);
}
.switch:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.per-page { display: flex; align-items: center; gap: var(--spacing-2); margin-left: auto; }
.per-page label { font-size: var(--font-size-12); font-weight: var(--font-weight-bold); color: var(--color-text-muted); }
.per-page select {
  border: 1px solid var(--color-border-default); border-radius: var(--radius-lg);
  background: var(--color-bg-surface-elevated); color: var(--color-text-primary);
  font-family: inherit; font-size: var(--font-size-13); font-weight: var(--font-weight-bold);
  padding: var(--spacing-2) var(--spacing-3); cursor: pointer;
}
.per-page select:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }

/* 조건 판 여닫기 — 넓은 화면에서는 늘 펴져 있으므로 이 단추를 숨긴다 */
.filter-toggle { display: none; }

/* 품사·단계·등급 — 한 번 누르면 걸리고 다시 누르면 풀린다 */
.filters {
  display: flex; flex-direction: column; gap: var(--spacing-2-5, 10px);
  padding: var(--spacing-5) var(--spacing-6); margin-bottom: var(--spacing-5);
  background: var(--color-bg-surface-elevated);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-xl);
}
.filter-row { display: flex; align-items: baseline; gap: var(--spacing-4); }
.filter-label {
  flex: 0 0 44px; font-size: var(--font-size-12); font-weight: var(--font-weight-extrabold);
  color: var(--color-text-muted);
}
.chips { display: flex; gap: var(--spacing-2); flex-wrap: wrap; flex: 1 1 auto; }
.chip {
  border: 1px solid var(--color-border-default); background: var(--color-bg-surface);
  border-radius: var(--radius-full); cursor: pointer;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-13); font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary); white-space: nowrap;
  transition: background .12s var(--ease-out), color .12s var(--ease-out), border-color .12s var(--ease-out);
}
.chip:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
.chip .n { margin-left: var(--spacing-2); font-variant-numeric: tabular-nums; opacity: .55; font-weight: var(--font-weight-semibold); }
.chip .sub { margin-left: var(--spacing-1-5); font-size: var(--font-size-11); font-weight: var(--font-weight-semibold); opacity: .6; }
.chip[aria-pressed="true"] {
  background: var(--color-action-primary); border-color: var(--color-action-primary);
  color: var(--color-action-primary-foreground);
}
.chip[aria-pressed="true"] .n, .chip[aria-pressed="true"] .sub { opacity: .78; }
/* 지금 조건에서 고르면 0건이 되는 칩 — 눌러도 되지만 미리 알려 준다 */
.chip[data-empty] { opacity: .42; }
.chip.is-all { border-style: dashed; }
.chip.is-all[aria-pressed="true"] { border-style: solid; }
/* 첫 글자 칩 — 스물다섯 개가 한 줄에 서므로 좁게 준다 */
.chip.is-letter { padding: var(--spacing-2) var(--spacing-3); }
.chip.is-letter .n { margin-left: var(--spacing-1-5); }
.chip:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.count-line {
  display: flex; align-items: center; gap: var(--spacing-3); flex-wrap: wrap;
  font-size: var(--font-size-13); color: var(--color-text-muted);
  font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-4);
}
.count-line b { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }

/* 지금 걸린 조건 — 하나씩 풀거나 한 번에 푼다 */
.active-set { display: flex; align-items: center; gap: var(--spacing-2); flex-wrap: wrap; }
.active-chip {
  display: inline-flex; align-items: center; gap: var(--spacing-2);
  border: 1px solid var(--color-action-primary); background: #FBEDE4;
  color: var(--color-action-primary-active); border-radius: var(--radius-full);
  padding: 3px var(--spacing-3); cursor: pointer;
  font-size: var(--font-size-12); font-weight: var(--font-weight-bold);
}
.active-chip .x { font-size: var(--font-size-14); line-height: 1; opacity: .7; }
.active-chip:hover .x { opacity: 1; }
.clear-all {
  border: 0; background: none; cursor: pointer; color: var(--color-text-muted);
  font-size: var(--font-size-12); font-weight: var(--font-weight-bold);
  text-decoration: underline; text-underline-offset: 3px; padding: 3px var(--spacing-1);
}
.clear-all:hover { color: var(--color-text-primary); }
.active-chip:focus-visible, .clear-all:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

/* 단어 격자 — 1920 에서 4열 */
.word-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-4); }
.word-card {
  position: relative; background: var(--color-bg-surface-elevated);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-xl);
  padding: var(--spacing-5) var(--spacing-5) var(--spacing-4);
  display: flex; flex-direction: column; gap: var(--spacing-2);
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out), transform .15s var(--ease-out);
}
.word-card:hover {
  border-color: var(--color-border-strong); transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(34, 28, 23, .06);
}
/* 잘 까먹는 단어는 왼쪽 띠로 표시한다 — 배경을 칠하면 얼룩말(R1)이 된다 */
.word-card.is-leech { box-shadow: inset 4px 0 0 var(--color-feedback-error); }

.wc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-2); }
.wc-name { min-width: 0; }
.wc-en { font-size: var(--font-size-20); font-weight: var(--font-weight-bold); letter-spacing: -.01em; }
.wc-ipa {
  display: block; font-family: var(--font-phonetic); font-size: var(--font-size-12);
  color: var(--color-text-muted); font-weight: var(--font-weight-regular); margin-top: 2px;
}
.word-grid:not(.show-ipa) .wc-ipa { display: none; }
.wc-acts { display: flex; gap: var(--spacing-1); flex: 0 0 auto; }
.wc-zh { display: flex; align-items: baseline; gap: var(--spacing-3); margin-top: auto; padding-top: var(--spacing-2); }
.wc-hanzi {
  font-family: var(--font-hanzi); font-size: var(--font-size-24); font-weight: var(--font-weight-semibold);
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit; line-height: var(--line-height-tight);
}
.wc-hanzi:hover, .wc-hanzi.playing { color: var(--color-action-primary); }
.wc-pinyin { font-family: var(--font-phonetic); font-size: var(--font-size-13); color: var(--color-text-muted); }
/* 다의어 — 대표 뜻 아래에 다른 뜻을 같이 보여 준다 */
.wc-also, .wc-same {
  display: flex; align-items: baseline; gap: var(--spacing-2); flex-wrap: wrap;
  margin-top: var(--spacing-2); font-size: var(--font-size-12);
}
.wc-also .lab, .wc-same .lab {
  font-size: var(--font-size-10); font-weight: var(--font-weight-extrabold);
  color: var(--color-text-disabled); flex: 0 0 auto;
}
.wc-also .sense { color: var(--color-text-secondary); }
.wc-also .sense b { font-family: var(--font-hanzi); font-weight: var(--font-weight-semibold); font-size: var(--font-size-14); }
.wc-also .sense i { font-family: var(--font-phonetic); font-style: normal; color: var(--color-text-muted); font-size: var(--font-size-11); }
.wc-same .sense-link {
  border: 1px solid var(--color-border-default); background: none; border-radius: var(--radius-sm);
  padding: 1px var(--spacing-2); cursor: pointer; font-family: inherit;
  font-size: var(--font-size-11); font-weight: var(--font-weight-bold); color: var(--color-text-secondary);
}
.wc-same .sense-link:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); }
.wc-same .sense-link:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }

.wc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3);
  margin-top: var(--spacing-3); padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-border-subtle);
}
.mastery { display: flex; gap: 3px; flex: 0 0 auto; }
.mastery i { width: 14px; height: 4px; border-radius: var(--radius-full); background: var(--color-bg-surface-sunken); }
.mastery i.on { background: var(--color-feedback-success); }

/* 꼬리표는 눌리는 단추다 — 누르면 그 조건으로 걸린다 */
.tags { display: flex; gap: var(--spacing-1-5); flex-wrap: wrap; justify-content: flex-end; }
.tag {
  font-size: var(--font-size-10); font-weight: var(--font-weight-bold);
  color: var(--color-text-muted); background: var(--color-bg-surface-sunken);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 2px var(--spacing-2); white-space: nowrap; cursor: pointer;
  transition: color .12s var(--ease-out), border-color .12s var(--ease-out), background .12s var(--ease-out);
}
.tag:hover {
  color: var(--color-action-primary); border-color: var(--color-action-primary);
  background: var(--color-bg-surface);
}
.tag.is-grade { color: var(--color-action-primary-active); background: #FBEDE4; }
.tag.is-grade:hover { border-color: var(--color-action-primary); }
.tag:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }

.icon-btn {
  flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full); cursor: pointer; color: var(--color-text-muted);
  transition: color .15s var(--ease-out), border-color .15s var(--ease-out), transform .1s var(--ease-out);
}
.icon-btn svg { width: 17px; height: 17px; display: block; fill: none; }
.icon-btn:hover { color: var(--color-action-primary); border-color: var(--color-action-primary); }
.icon-btn:active { transform: scale(.9); }
.icon-btn.playing { color: var(--color-action-primary); border-color: var(--color-action-primary); }

/* 켜진 건 통째로 칠한다 — 테두리 색만 바꾸면 32px 에서 티가 안 난다 */
.icon-btn.on-fav {
  background: var(--color-accent-2); border-color: var(--color-accent-2);
  color: var(--color-action-primary-foreground);
}
.icon-btn.on-leech {
  background: var(--color-feedback-error); border-color: var(--color-feedback-error);
  color: var(--color-action-primary-foreground);
}
.icon-btn.on-fav svg, .icon-btn.on-leech svg { fill: currentColor; }
.icon-btn.on-fav:hover, .icon-btn.on-leech:hover { color: var(--color-action-primary-foreground); filter: brightness(1.08); }
.icon-btn:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

/* 카드에도 글자로 띄운다 — 아이콘만으로는 격자에서 훑어볼 수 없다 */
.tag.is-fav {
  color: #7A5B12; background: #FAF0DC; border-color: var(--color-accent-2);
}
.tag.is-fav:hover { border-color: var(--color-accent-2); color: #5E4609; }
.tag.is-leech-mark {
  color: var(--color-feedback-error-foreground); background: var(--color-feedback-error-bg);
  border-color: var(--color-feedback-error);
}
.tag.is-leech-mark:hover { border-color: var(--color-feedback-error); }

/* 페이지네이션(R5) */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--spacing-2); margin-top: var(--spacing-8); }
.pager button {
  min-width: 40px; height: 40px; padding: 0 var(--spacing-3);
  border: 1px solid var(--color-border-default); background: var(--color-bg-surface-elevated);
  border-radius: var(--radius-md); cursor: pointer;
  font-size: var(--font-size-14); font-weight: var(--font-weight-bold); color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  transition: background .12s var(--ease-out), color .12s var(--ease-out), border-color .12s var(--ease-out);
}
.pager button:hover:not(:disabled) { border-color: var(--color-border-strong); color: var(--color-text-primary); }
.pager button[aria-current="page"] {
  background: var(--color-action-primary); border-color: var(--color-action-primary);
  color: var(--color-action-primary-foreground);
}
.pager button:disabled { color: var(--color-text-disabled); cursor: default; }
.pager .gap { color: var(--color-text-disabled); padding: 0 var(--spacing-1); font-weight: var(--font-weight-bold); }
.pager button:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.empty {
  text-align: center; padding: var(--spacing-20) var(--spacing-5);
  color: var(--color-text-muted); font-weight: var(--font-weight-bold); line-height: 1.8;
}

/* ═══ 학습·확인 판 ═══════════════════════════════ */
.session, .s-done, .s-empty { max-width: 760px; margin: 0 auto; }

kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  margin-left: var(--spacing-2);
  border: 1px solid currentColor; border-radius: var(--radius-sm);
  font-family: var(--font-code); font-size: var(--font-size-10); font-weight: var(--font-weight-bold);
  opacity: .6;
}

.s-head { display: flex; align-items: center; gap: var(--spacing-4); margin-bottom: var(--spacing-6); }
.s-what {
  font-size: var(--font-size-13); font-weight: var(--font-weight-bold); color: var(--color-text-muted);
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s-bar { flex: 1 1 auto; height: 8px; background: var(--color-bg-surface-sunken); border-radius: var(--radius-full); overflow: hidden; }
.s-bar > i { display: block; height: 100%; width: 0; background: var(--color-action-primary); border-radius: var(--radius-full); transition: width .35s var(--ease-out); }
.s-count {
  font-size: var(--font-size-13); font-weight: var(--font-weight-extrabold);
  font-variant-numeric: tabular-nums; color: var(--color-text-secondary);
}

/* 뒤집는 카드 */
.flip { perspective: 1800px; height: 320px; cursor: pointer; margin-bottom: var(--spacing-5); }
.flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s var(--ease-out); }
.flip.is-flipped .flip-in { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius-3xl); border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface-elevated);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--spacing-3); padding: var(--spacing-8); text-align: center;
  box-shadow: 0 2px 4px rgba(34, 28, 23, .04), 0 18px 40px rgba(34, 28, 23, .07);
}
.flip-face.back { transform: rotateY(180deg); background: var(--color-bg-surface-sunken); }
.flip-tag {
  position: absolute; top: var(--spacing-6); left: var(--spacing-7);
  font-size: var(--font-size-11); font-weight: var(--font-weight-extrabold);
  letter-spacing: .1em; color: var(--color-text-muted);
}
.flip-tag.zh { font-family: var(--font-hanzi); letter-spacing: .16em; }
.flip-en { font-size: var(--font-size-56); font-weight: var(--font-weight-extrabold); letter-spacing: -.03em; line-height: var(--line-height-none); }
.flip-ipa { font-family: var(--font-phonetic); font-size: var(--font-size-20); color: var(--color-text-muted); }
.flip-hanzi { font-family: var(--font-hanzi); font-size: var(--font-size-64); font-weight: var(--font-weight-bold); line-height: var(--line-height-none); }
.flip-pinyin { font-family: var(--font-phonetic); font-size: var(--font-size-22); color: var(--color-text-secondary); }
.flip-hint {
  position: absolute; bottom: var(--spacing-6); display: flex; align-items: center;
  font-size: var(--font-size-12); font-weight: var(--font-weight-bold); color: var(--color-text-disabled);
}

.s-sound { display: flex; gap: var(--spacing-2); justify-content: center; margin-bottom: var(--spacing-5); }

/* 예문 — 품사로 발음이 갈리는 낱말에만 붙는다. 뜻을 본 뒤에야 뜬다.
   영어를 위, 중국어를 아래 두고 중국어를 조금 키운다 — 뜻의 기준 언어가 중국어라서다 */
.sent-line {
  display: flex; flex-direction: column; gap: var(--spacing-1);
  margin: calc(var(--spacing-5) * -1) 0 var(--spacing-5); text-align: center;
}
.sent-line .sent-en { font-size: var(--font-size-14); color: var(--color-text-secondary); }
.sent-line .sent-zh { font-size: var(--font-size-16); color: var(--color-text-primary); }

/* 판정 버튼 — 카드를 뒤집기 전에는 눌러도 소용없으니 흐리게 둔다 */
.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-3); opacity: .38; pointer-events: none; transition: opacity .25s var(--ease-out); }
.grade.is-open { opacity: 1; pointer-events: auto; }
.grade .g {
  border: 0; border-radius: var(--radius-xl); padding: var(--spacing-5) var(--spacing-3);
  font-size: var(--font-size-16); font-weight: var(--font-weight-extrabold);
  color: var(--color-action-primary-foreground); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s var(--ease-out), filter .15s var(--ease-out);
}
.grade .g:hover { filter: brightness(1.07); }
.grade .g:active { transform: scale(.96); }
.grade .g-no { background: var(--color-feedback-error); }
.grade .g-mid { background: var(--color-feedback-warning); }
.grade .g-ok { background: var(--color-feedback-success); }
.grade .g:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 3px; }

.s-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4);
  margin-top: var(--spacing-6); font-size: var(--font-size-13); color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}
.opt { display: flex; align-items: center; gap: var(--spacing-2); cursor: pointer; }
.opt input { width: 16px; height: 16px; accent-color: var(--color-action-primary); cursor: pointer; }
.hint-key { display: flex; align-items: center; }
.linkish {
  border: 0; background: none; cursor: pointer; color: var(--color-text-muted);
  font-family: inherit; font-size: var(--font-size-13); font-weight: var(--font-weight-bold);
  text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--color-text-primary); }

/* 확인 — 네 개 중 고르기 */
.ask {
  background: var(--color-bg-surface-elevated); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2xl); padding: var(--spacing-10) var(--spacing-6);
  text-align: center; margin-bottom: var(--spacing-6);
  box-shadow: 0 2px 4px rgba(34, 28, 23, .04), 0 14px 32px rgba(34, 28, 23, .05);
}
.ask-dir { font-size: var(--font-size-12); font-weight: var(--font-weight-extrabold); color: var(--color-text-muted); margin-bottom: var(--spacing-4); letter-spacing: .04em; }
.ask-en { font-size: var(--font-size-48); font-weight: var(--font-weight-extrabold); letter-spacing: -.02em; line-height: var(--line-height-none); }
.ask-hanzi { font-family: var(--font-hanzi); font-size: var(--font-size-56); font-weight: var(--font-weight-bold); line-height: var(--line-height-none); }
.ask-pinyin { font-family: var(--font-phonetic); font-size: var(--font-size-20); color: var(--color-text-secondary); margin-top: var(--spacing-3); }

.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-3); }
.choice {
  display: flex; align-items: center; gap: var(--spacing-3);
  border: 2px solid var(--color-border-default); background: var(--color-bg-surface-elevated);
  border-radius: var(--radius-xl); padding: var(--spacing-5); cursor: pointer;
  font-family: inherit; font-size: var(--font-size-22); font-weight: var(--font-weight-bold);
  color: var(--color-text-primary); text-align: left;
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out), transform .1s var(--ease-out);
}
.choice kbd { margin: 0; flex: 0 0 auto; color: var(--color-text-muted); }
.choice.zh span { font-family: var(--font-hanzi); }
.choice:hover { border-color: var(--color-border-strong); }
.choice:active { transform: scale(.99); }
.choice.is-right { border-color: var(--color-feedback-success); background: var(--color-feedback-success-bg); }
.choice.is-wrong { border-color: var(--color-feedback-error); background: var(--color-feedback-error-bg); }
.choice:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

/* 판이 끝났을 때 */
.s-done, .s-empty { text-align: center; padding: var(--spacing-16) 0; }
.s-done h2, .s-empty h2 { margin: 0 0 var(--spacing-3); font-size: var(--font-size-28); }
.s-done p, .s-empty p { margin: 0 0 var(--spacing-8); color: var(--color-text-secondary); font-size: var(--font-size-15); line-height: 1.8; }
.score {
  font-size: var(--font-size-64); font-weight: var(--font-weight-extrabold);
  color: var(--color-action-primary); font-variant-numeric: tabular-nums; line-height: 1;
  margin-bottom: var(--spacing-3);
}
.s-actions { display: flex; gap: var(--spacing-4); align-items: center; justify-content: center; }
.s-actions .cta { width: auto; padding: var(--spacing-4) var(--spacing-10); }

.wrong-list { text-align: left; max-width: 440px; margin: 0 auto var(--spacing-8); }
.wrong-list h3 { font-size: var(--font-size-12); font-weight: var(--font-weight-extrabold); color: var(--color-text-muted); margin: 0 0 var(--spacing-3); }
.wrong-row {
  display: flex; align-items: baseline; gap: var(--spacing-4);
  padding: var(--spacing-3) 0; border-bottom: 1px solid var(--color-border-subtle);
}
.wrong-row:last-child { border-bottom: 0; }
.wrong-row b { flex: 1 1 auto; font-size: var(--font-size-16); }
.wrong-row .zh { font-family: var(--font-hanzi); font-size: var(--font-size-18); font-weight: var(--font-weight-semibold); }
.wrong-row .py { font-family: var(--font-phonetic); font-size: var(--font-size-12); color: var(--color-text-muted); width: 96px; text-align: right; }

/* 단어장 → 학습·확인 넘어가기 */
.run-from-filter { display: flex; gap: var(--spacing-2); margin-bottom: var(--spacing-5); flex-wrap: wrap; }
.chip.is-run {
  background: var(--color-action-primary); border-color: var(--color-action-primary);
  color: var(--color-action-primary-foreground); padding: var(--spacing-3) var(--spacing-5);
  font-size: var(--font-size-14);
}
.chip.is-run b { margin-left: var(--spacing-2); font-weight: var(--font-weight-extrabold); }
.chip.is-run:hover { filter: brightness(1.07); color: var(--color-action-primary-foreground); border-color: var(--color-action-primary); }

/* ── 좁은 화면 ─────────────────────────────────── */
@media (min-width: 1760px) {
  .word-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1500px) {
  .word-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  :root { --page-x: var(--spacing-6); }
  .today { grid-template-columns: minmax(0, 1fr); }
  .word-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top { gap: var(--spacing-5); }
  .top-meta { display: none; }
  .filters { padding: var(--spacing-4); }
  .filter-row { align-items: flex-start; }
  .filter-label { flex-basis: 40px; }
}
@media (max-width: 720px) {
  :root { --page-x: var(--spacing-4); }
  .word-grid { grid-template-columns: minmax(0, 1fr); }
  .menu button { padding: var(--spacing-3); font-size: var(--font-size-13); }
  /* 좁은 화면에선 글자를 지우고 아이콘만 남긴다.
     display:none 으로 지우면 접근성 트리에서도 사라져 버튼에 이름이 없어진다
     — 화면 낭독기한테는 이름 없는 버튼 넷이 된다. 그래서 눈에서만 치운다. */
  .menu button span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .hero { height: 260px; }
  .hero-en { font-size: var(--font-size-40); }
  .hero-hanzi { font-size: var(--font-size-48); }

  /* 조건 판은 접어 둔다 — 다 펴면 1700px 이라 단어가 한 개도 안 보인다 */
  .filter-toggle {
    display: flex; align-items: center; gap: var(--spacing-2); width: 100%;
    margin-bottom: var(--spacing-4); cursor: pointer;
    background: var(--color-bg-surface-elevated); border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg); padding: var(--spacing-3) var(--spacing-4);
    font-family: inherit; font-size: var(--font-size-14); font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
  }
  .filter-toggle b {
    min-width: 20px; height: 20px; display: grid; place-items: center;
    background: var(--color-action-primary); color: var(--color-action-primary-foreground);
    border-radius: var(--radius-full); font-size: var(--font-size-11); padding: 0 6px;
  }
  .filter-toggle b:empty { display: none; }
  .filter-toggle::after {
    content: ''; margin-left: auto; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease-out);
  }
  .filter-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .filters { display: none; }
  .filters.is-open { display: flex; }

  /* 라벨을 칩 위로 올린다 — 옆에 두면 라벨이 100px 가까이 먹어서
     주제 줄이 31줄까지 늘어난다. 폭을 통째로 칩에 준다 */
  .filters { padding: var(--spacing-4) var(--spacing-4) var(--spacing-2); gap: var(--spacing-4); }
  .filter-row { flex-direction: column; align-items: stretch; gap: var(--spacing-2); }
  .filter-label { flex: 0 0 auto; }
  .chip { padding: var(--spacing-2) var(--spacing-3); font-size: var(--font-size-12); }
  .chip .n { margin-left: var(--spacing-1-5); }

  /* 도구 줄도 세로로.
     .search 의 flex-basis 는 가로 배치용 320px 이라 세로로 눕히면 '높이' 320px 이 된다.
     반드시 같이 풀어 줘야 한다 */
  .tools { flex-direction: column; align-items: stretch; gap: var(--spacing-2); }
  .search { flex: 0 0 auto; max-width: none; }
  .per-page { margin-left: 0; justify-content: space-between; }
  .per-page select { flex: 1 1 auto; min-width: 0; }
  .switch { width: 100%; }

  /* 학습·확인 */
  .flip { height: 240px; }
  .flip-en { font-size: var(--font-size-36); }
  .flip-hanzi { font-size: var(--font-size-48); }
  .flip-ipa, .flip-pinyin { font-size: var(--font-size-16); }
  .grade .g { padding: var(--spacing-4) var(--spacing-2); font-size: var(--font-size-14); flex-direction: column; gap: 2px; }
  .grade .g kbd { display: none; }
  .choices { grid-template-columns: minmax(0, 1fr); }
  .choice { padding: var(--spacing-4); font-size: var(--font-size-18); }
  .ask { padding: var(--spacing-7) var(--spacing-4); }
  .ask-en { font-size: var(--font-size-32); }
  .ask-hanzi { font-size: var(--font-size-40); }
  .s-foot { flex-direction: column; align-items: flex-start; gap: var(--spacing-3); }
  .hint-key { display: none; }
  .s-head { gap: var(--spacing-3); }
  .s-what { max-width: 140px; }

  /* 오늘 */
  .greet h1 { font-size: var(--font-size-24); }
  .due-line { gap: var(--spacing-5); }
  .due-cell b { font-size: var(--font-size-28); }
  .ring-row { gap: var(--spacing-4); }
  .ring { width: 84px; height: 84px; }
  .panel { padding: var(--spacing-5); }
  .unit-row .name { flex-basis: 84px; font-size: var(--font-size-13); }
}

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