:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --soft: #f1f5f9;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --danger-soft: #fecaca;
  --danger-bg: #fef2f2;
  --shadow-card: 0 6px 16px -6px rgba(15,23,42,0.12);

  /* per-subject palette */
  --hanja-1: #7c3aed;   /* primary */
  --hanja-2: #6366f1;   /* secondary */
  --hanja-soft: #ede9fe;
  --hanja-deep: #4c1d95;

  --eng-1: #0ea5e9;
  --eng-2: #14b8a6;
  --eng-soft: #ccfbf1;
  --eng-deep: #115e59;

  --conv-1: #f97316;
  --conv-2: #f59e0b;
  --conv-soft: #fef3c7;
  --conv-deep: #92400e;

  /* defaults — overridden by [data-kind] */
  --k1: var(--hanja-1);
  --k2: var(--hanja-2);
  --ksoft: var(--hanja-soft);
  --kdeep: var(--hanja-deep);

  color-scheme: light;
}

/* Dark theme — applies when (OS=dark AND user hasn't forced light)
   OR when user explicitly chose dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220;
    --surface: #131c2e;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --border: #2a3650;
    --soft: #1a2438;
    --danger-soft: #7f1d1d;
    --danger-bg: #1f1217;
    --shadow-card: 0 6px 16px -6px rgba(0,0,0,0.6);

    --hanja-soft: #2a1d4a;
    --hanja-deep: #c4b5fd;
    --eng-soft: #0f3a35;
    --eng-deep: #5eead4;
    --conv-soft: #3a2410;
    --conv-deep: #fcd34d;

    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1220;
  --surface: #131c2e;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: #2a3650;
  --soft: #1a2438;
  --danger-soft: #7f1d1d;
  --danger-bg: #1f1217;
  --shadow-card: 0 6px 16px -6px rgba(0,0,0,0.6);

  --hanja-soft: #2a1d4a;
  --hanja-deep: #c4b5fd;
  --eng-soft: #0f3a35;
  --eng-deep: #5eead4;
  --conv-soft: #3a2410;
  --conv-deep: #fcd34d;

  color-scheme: dark;
}

[data-kind="hanja"] {
  --k1: var(--hanja-1);
  --k2: var(--hanja-2);
  --ksoft: var(--hanja-soft);
  --kdeep: var(--hanja-deep);
}
[data-kind="english"] {
  --k1: var(--eng-1);
  --k2: var(--eng-2);
  --ksoft: var(--eng-soft);
  --kdeep: var(--eng-deep);
}
[data-kind="conversation"] {
  --k1: var(--conv-1);
  --k2: var(--conv-2);
  --ksoft: var(--conv-soft);
  --kdeep: var(--conv-deep);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body.pen-active {
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  overscroll-behavior: contain;
}
body.pen-active input,
body.pen-active textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* ----------------- top bar ----------------- */
/* 기본(라이트)은 평탄한 surface — 다크/mono는 하단의 backdrop-filter 블록과
   각자의 오버라이드에서 처리. */
.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 14px 24px;
  background: var(--surface);
  color: var(--text);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
}
.brand-btn { white-space: nowrap; min-width: 0; flex-shrink: 0; }
.bar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.exam-badge {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  animation: examPulse 1.6s ease-in-out infinite;
}
@keyframes examPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
.bar-right { flex-shrink: 1; min-width: 0; }
.bar-right > * { white-space: nowrap; }
.brand { font-size: 1.05em; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.brand-btn {
  background: transparent;
  border: none;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
  color: var(--text);
}
.brand-btn:hover { background: var(--soft); }

.exam-subs {
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: none;
  flex-direction: column;
  gap: 6px;
}
.exam-subs.open { display: flex; }
/* 응시자 행: 닉네임이 길어도 안 깨지게 2줄 구조 — 위=닉네임, 아래=점수+버튼 */
.exam-subs .sub-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9em;
  padding: 6px 0;
}
.exam-subs .sub-name { font-weight: 500; word-break: break-word; overflow-wrap: anywhere; }
.exam-subs .sub-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.exam-subs .sub-score {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  flex-shrink: 0;
}
.exam-subs .sub-actions { display: flex; gap: 6px; flex-shrink: 0; }
.toggle-subs {
  background: transparent;
  border: none;
  color: var(--k1);
  cursor: pointer;
  padding: 0;
  font-size: 0.85em;
  text-decoration: underline;
}
.toggle-subs:hover { color: var(--kdeep); }
.bar-right { display: flex; align-items: center; gap: 10px; }
.bar-right .muted { color: var(--muted); font-size: 0.82em; }
.appbar button.ghost { color: var(--text); border-color: var(--border); }
.appbar button.ghost:hover { background: var(--soft); }
/* 상단 바 아이콘은 살짝 크게 + 세로 중앙 정렬 (눌린 듯 보이지 않게) */
.appbar button .ic, .appbar .brand-btn .ic { width: 1.25em; height: 1.25em; vertical-align: middle; }

/* 상단바 업데이트 아이콘 — 공부/시험 화면에서 배너 대신 간단 표시 (빨간 점 = 새 소식) */
.update-icon-btn { position: relative; font-size: 1.05em; padding: 6px 10px; line-height: 1; }
.update-icon-btn::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 5px;
  width: 7px;
  height: 7px;
  background: var(--danger);
  border-radius: 50%;
  border: 1.5px solid var(--surface);
}

/* ----------------- settings menu (gear dropdown) ----------------- */
.settings-menu { position: relative; }
#settings-toggle { font-size: 1.05em; padding: 6px 10px; line-height: 1; }
.settings-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px -8px rgba(15,23,42,0.18), 0 2px 6px -2px rgba(15,23,42,0.08);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px;
}
.settings-row + .settings-row { border-top: 1px solid var(--border); }
.settings-label { font-size: 0.86em; color: var(--muted); font-weight: 500; }
.theme-select {
  width: auto; min-width: 0; flex: 0 0 auto;
  padding: 6px 10px; font-size: 0.86em;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); cursor: pointer;
}
.settings-actions { display: flex; align-items: center; gap: 8px; }
.settings-actions .muted { font-size: 0.78em; }
:root[data-style="mono"] .settings-panel { box-shadow: 0 4px 16px -4px rgba(0,0,0,0.12); border-radius: 10px; }

main#app {
  max-width: 820px;
  margin: 8px auto 48px;
  padding: 0 16px;
}

/* ----------------- backdrop-filter (T-F6) ----------------- */
/* 상단 표면(앱바·업데이트 배너)에 한정해 한 세대 새 인상을 부여.
   본문 표면은 그대로 두어 가독성·성능 유지. */
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  :root[data-theme="dark"] .appbar {
    background: rgba(15, 23, 42, 0.7);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .appbar {
      background: rgba(15, 23, 42, 0.7);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      backdrop-filter: blur(20px) saturate(180%);
    }
  }
  :root[data-style="mono"] .appbar {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
  :root[data-style="mono"] #update-banner {
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
  }
}

.view {
  animation: viewfade 0.28s ease;
}
/* 불투명도만 페이드 — translateY(transform)를 쓰면 .view가 transform 조상이 되어
   자손의 position:fixed 하단 바가 화면이 아닌 .view 기준으로 잡혀 전환 끝에 '튐'(겹쳐 보임).
   transform 제거로 하단 바가 항상 뷰포트 고정 유지. */
@keyframes viewfade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ----------------- cards ----------------- */
.card {
  background: var(--surface);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -8px rgba(15,23,42,0.08);
  margin-bottom: 16px;
}
.card.narrow { max-width: 420px; margin: 60px auto; }
.card.center { text-align: center; }

h1 { font-size: 1.7em; margin-bottom: 14px; color: var(--text); letter-spacing: -0.02em; }
h2 {
  font-size: 1.25em;
  margin-bottom: 18px;
  color: var(--text);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

label {
  display: block;
  margin: 14px 0 6px;
  font-weight: 500;
  color: var(--text);
  font-size: 0.95em;
}

input[type=text], input[type=password], select {
  width: 100%;
  /* 카드(max-width 820px)에 맞춰 꽉 차게 — 회차 select와 통일성 */
  padding: 12px 14px;
  font-size: 1em;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* 회차/날짜 picker: 위 토글 행과 너무 붙어 있던 간격 보강 */
#round-picker, #study-round-picker,
#date-picker, #study-date-picker { margin-top: 8px; }
input:focus, select:focus {
  outline: none;
  border-color: var(--k1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--k1) 18%, transparent);
}

/* ----------------- buttons ----------------- */
button {
  padding: 10px 18px;
  font-size: 0.95em;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
  font-family: inherit;
}
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.primary {
  background: var(--k1);
  color: white;
  box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--k1) 28%, transparent);
}
.primary:hover { filter: brightness(1.06); box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--k1) 38%, transparent); }
.primary.small { padding: 7px 14px; font-size: 0.88em; }
.primary.red {
  background: var(--danger);
  box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--danger) 28%, transparent);
}
.primary.red:hover { box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--danger) 38%, transparent); }

.ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.ghost:hover { background: var(--soft); border-color: var(--muted); }
.ghost.small { padding: 6px 12px; font-size: 0.85em; }

.danger {
  background: var(--surface);
  color: var(--danger);
  border: 1.5px solid var(--danger-soft);
}
.danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.danger.small { padding: 6px 12px; font-size: 0.85em; }

/* ----------------- tabs ----------------- */
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.center { justify-content: center; }

.tab-row { flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 16px; }
.tab.tab-updates { margin-left: auto; }
.tab {
  background: transparent;
  color: var(--muted);
  border-radius: 10px 10px 0 0;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-weight: 500;
}
.tab.active {
  color: var(--k1);
  border-bottom-color: var(--k1);
  background: var(--ksoft);
}

/* 업데이트 배너 — 중성 표면 + 과목 액센트는 좌측 보더에만 */
#update-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px 10px 14px;
  background: var(--soft);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--k1);
  font-size: 0.92em;
  flex-wrap: wrap;
}
.update-banner-text { color: var(--text); }
.update-banner-text strong { color: var(--k1); }
.update-banner-actions { display: flex; gap: 6px; flex-shrink: 0; }
#update-banner.hidden { display: none; }
@media (max-width: 600px) {
  #update-banner { padding: 8px 12px; font-size: 0.85em; }
  .update-banner-actions .ghost.small { padding: 4px 8px; }
}

/* 업데이트 히스토리 */
.update-list { display: flex; flex-direction: column; gap: 16px; }
.update-entry {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.update-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 10px;
}
.update-version {
  font-weight: 700; font-size: 1.15em;
  background: var(--k1); color: white;
  padding: 2px 10px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.update-date { font-size: 0.85em; font-variant-numeric: tabular-nums; }
.update-entry ul { margin: 0; padding-left: 20px; line-height: 1.6; }
.update-entry li { margin-bottom: 4px; }

/* ----------------- subject radio (in create form) ----------------- */
.radio-row { display: flex; gap: 12px; padding: 4px 0; }
.subject-picker { display: flex; gap: 10px; padding: 0; }
.subject-picker label {
  flex: 1;
  margin: 0;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  color: var(--muted);
  transition: all 0.15s;
  font-size: 1em;
  position: relative;
}
/* F4: 색 의존 해소 — selected 상태에 ✓ 형태 단서 추가 */
.subject-picker label:has(input:checked)::after,
.mode-picker label:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 0.85em;
  font-weight: 800;
  line-height: 1;
  opacity: 0.9;
}
.subject-picker label input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.subject-picker label.hanja:has(input:checked) {
  border-color: var(--hanja-1);
  color: var(--hanja-1);
  background: var(--hanja-soft);
}
.subject-picker label.english:has(input:checked) {
  border-color: var(--eng-1);
  color: var(--eng-1);
  background: var(--eng-soft);
}
.subject-picker label.conversation:has(input:checked) {
  border-color: var(--conv-1);
  color: var(--conv-1);
  background: var(--conv-soft);
}
.subject-picker label .emoji { display: block; font-size: 1.5em; margin-bottom: 4px; }

.mode-picker { display: flex; flex-direction: column; gap: 6px; padding: 0; }
.mode-picker label {
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
  position: relative;
}
.mode-picker label:has(input:checked) {
  border-color: var(--k1);
  color: var(--k1);
  background: var(--ksoft);
}
.mode-picker label input { margin: 0; }

select optgroup {
  font-weight: 700;
  color: var(--k1);
  background: var(--ksoft);
  font-size: 0.92em;
}
select optgroup option {
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  padding-left: 12px;
}

.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 0.9em; }

.exam-name { color: var(--text); font-weight: 700; }

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92em;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.hide-correct .review-item.is-correct { display: none; }
.exam-list.mine-only .exam-item:not([data-mine]) { display: none; }

/* ---- share / created exam ---- */
.share-box {
  margin: 18px auto 8px;
  max-width: 480px;
  text-align: left;
}
.share-box label {
  display: block;
  font-size: 0.9em;
  color: var(--muted);
  margin-bottom: 6px;
}
.share-url-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.share-url-row input {
  flex: 1;
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 0.92em;
}
.share-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-end;
}
.qr-wrap {
  display: flex;
  justify-content: center;
  margin: 18px 0 6px;
}
.qr-wrap svg, .qr-wrap img {
  width: 220px;
  height: 220px;
  background: white;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--surface);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.9em;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.toast.show { opacity: 0.92; }
.error { color: var(--danger); margin-top: 10px; min-height: 1.2em; font-size: 0.9em; }
.hint { color: var(--muted); font-size: 0.88em; margin: 6px 0 0; }

/* ----------------- exam list ----------------- */
.exam-list { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
/* 목록: 생성일별 묶음 — 박스·날짜 머리글은 결과(.result-set)와 공유해 디자인 통일.
   세트 안에서는 카드 테두리를 빼고 구분선으로 나눠 결과 화면과 같은 룩으로. */
.exam-set-body { display: flex; flex-direction: column; }
.exam-set-body .exam-item {
  border: none; border-radius: 0; box-shadow: none; transform: none;
  border-top: 1px solid var(--border);
}
.exam-set-body .exam-item:first-child { border-top: none; }
.exam-set-body .exam-item:hover { transform: none; box-shadow: none; background: var(--soft); }
/* '내가 본 시험만' 필터 시, 보이는 카드가 없는 날짜 묶음은 통째로 숨김 */
.exam-list.mine-only .exam-set:not(:has(.exam-item[data-mine])) { display: none; }
.exam-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  flex-wrap: wrap;
}
/* Linear/Vercel-style 미세한 lift hover */
.exam-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
  border-color: color-mix(in srgb, var(--text) 18%, var(--border));
}
/* WaniKani 식 과목 컬러는 배지에 집중 (좌측 보더 중복 신호 제거) */
.exam-item .badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.78em;
  border-radius: 999px;
  margin-right: 8px;
  font-weight: 600;
  color: white;
  letter-spacing: 0.01em;
  /* 한자·회화(2자)·영단어(3자) 구분 배지를 같은 크기로 — 폭 고정 + 가운데 정렬.
     영단어(3자)가 가장 넓어 그 폭에 맞춰 2자 배지도 동일하게 채움 */
  min-width: 4.4em;
  text-align: center;
  box-sizing: border-box;
}
.exam-item[data-kind="hanja"] .badge { background: var(--hanja-1); }
.exam-item[data-kind="english"] .badge { background: var(--eng-1); }
.exam-item[data-kind="conversation"] .badge { background: var(--conv-1); }

/* 시험목록 보기 토글 (목록 / 결과) */
.exam-view-toggle { display: flex; gap: 6px; margin-top: 12px; }
.ev-btn {
  flex: 1; padding: 8px 12px; font-size: 0.9em; font-weight: 600;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.ev-btn:hover { color: var(--text); border-color: var(--muted); }
.ev-btn.active { background: var(--k1); color: #fff; border-color: transparent; }

/* 생성일별 한 세트 박스 — 목록(.exam-set)과 결과(.result-set) 공통(디자인 통일) */
.result-set, .exam-set {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); overflow: hidden;
}
.result-set-head, .exam-set-head {
  padding: 10px 16px; font-weight: 700; font-size: 0.95em;
  background: var(--soft); border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums; color: var(--text);
}
.result-set-head .muted, .exam-set-head .muted { font-weight: 500; font-size: 0.88em; }
/* 세트 안의 과목별 시험 블록 */
.result-exam + .result-exam { border-top: 1px solid var(--border); }
.result-exam-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px 6px;
}
.result-exam-head .badge {
  display: inline-block; padding: 3px 10px; font-size: 0.78em; border-radius: 999px;
  font-weight: 600; color: #fff; min-width: 4.4em; text-align: center; box-sizing: border-box;
}
.result-exam[data-kind="hanja"] .badge { background: var(--hanja-1); }
.result-exam[data-kind="english"] .badge { background: var(--eng-1); }
.result-exam[data-kind="conversation"] .badge { background: var(--conv-1); }
.result-rows { display: flex; flex-direction: column; padding-bottom: 4px; }
.result-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; text-align: left; padding: 10px 16px; cursor: pointer;
  background: none; border: none; border-top: 1px solid var(--border);
  color: var(--text); font-size: 0.95em; font-family: inherit;
}
.result-rows .result-row:first-child { border-top: none; }
.result-row:hover { background: var(--soft); }
.result-row .r-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-row.top .r-name { font-weight: 700; }
.result-row .r-score { flex-shrink: 0; font-variant-numeric: tabular-nums; }
/* 인라인 SVG 아이콘 공통 (이모지 대체) */
.ic { width: 1em; height: 1em; vertical-align: -0.13em; flex-shrink: 0; display: inline-block; }
.ic-crown { color: #f2b01e; margin-right: 4px; vertical-align: -0.18em; }
/* 컴팩트 세그먼트 토글 (회차 | 날짜) */
.seg-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.seg-toggle .seg-btn {
  padding: 6px 16px; font-size: 0.85em; font-weight: 600; line-height: 1;
  background: var(--surface); color: var(--muted); border: none; cursor: pointer; font-family: inherit;
}
.seg-toggle .seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-toggle .seg-btn.active { background: var(--k1); color: #fff; }
:root[data-style="mono"] .seg-toggle .seg-btn.active { background: var(--text); color: var(--bg); }
.result-row .r-pct { color: var(--muted); font-size: 0.85em; }
.exam-meta { flex: 1; min-width: 200px; }
/* 한글이 글자 단위로 끊겨 어색하게 줄바꿈되지 않도록 — 띄어쓰기 단위로만 줄바꿈 */
.exam-meta .title { font-weight: 600; font-variant-numeric: tabular-nums; word-break: keep-all; }
/* 회차·기간을 제목 줄에 붙이지 않고 그 아래 별도 줄로 — 모바일에서 제목이 어중간하게 줄바꿈되는 것 방지 */
.exam-meta .exam-period { color: var(--muted); font-size: 0.85em; margin-top: 2px; font-variant-numeric: tabular-nums; word-break: keep-all; }
/* 부가정보: '라벨 | 값' 2열 그리드로 한 항목씩 줄바꿈(세로 정렬) */
.exam-meta .sub {
  margin-top: 6px;
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  align-items: baseline;
}
.exam-meta .sub .k { color: var(--muted); opacity: 0.75; white-space: nowrap; }
.exam-meta .sub .v { color: var(--muted); }
.exam-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* 액션 버튼 크기 통일: 결과보기·참여하기·이어서 풀기·🔗 링크·🗑 삭제 모두 동일 높이/여백/폰트,
   줄바꿈 금지(라벨이 길어도 한 줄). primary/ghost/danger 위계는 색으로만 구분.
   .primary.small 등 (0,2,0) 선택자를 이기도록 같은 specificity로 명시. */
.exam-actions button,
.exam-actions .primary.small,
.exam-actions .ghost.small,
.exam-actions .danger.small,
:root[data-style="mono"] .exam-actions .primary.small {
  white-space: nowrap;
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 참여하기·결과보기·이어서풀기 등 주 액션(CTA)은 라벨 길이와 무관하게 같은 너비로 통일.
   (링크·삭제는 같은 줄에 그대로 둠) */
.exam-actions .primary.small { min-width: 6.7em; }
/* F10: 시험 카드 안의 destructive(🗑 삭제)는 tertiary 위계로 후퇴.
   기본은 무채색·테두리 없음, hover 시 danger 정체성 드러냄. */
.exam-actions .danger.small {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  opacity: 0.85;
  margin-left: auto;  /* 🗑 삭제만 줄 오른쪽 끝으로 */
}
.exam-actions .danger.small:hover {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-soft);
  opacity: 1;
}

/* ----------------- progress bar ----------------- */
.progress {
  height: 8px;
  background: var(--soft);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.progress.clickable {
  cursor: pointer;
  height: 12px;
  padding: 0;
  transition: filter 0.15s;
  touch-action: none;
}
.progress.clickable:hover { filter: brightness(1.05); }
.progress.dragging { cursor: grabbing; filter: brightness(1.08); }
.progress.dragging .bar { transition: none; }
.progress .bar {
  height: 100%;
  background: linear-gradient(90deg, var(--k1), var(--k2));
  width: 0;
  transition: width 0.4s cubic-bezier(.4,0,.2,1);
  border-radius: 999px;
}
.progress-text {
  text-align: right;
  font-size: 0.9em;
  color: var(--muted);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

/* ----------------- prompt ----------------- */
.prompt {
  position: relative;
  text-align: center;
  padding: 16px 20px 24px;
  background: linear-gradient(135deg, var(--ksoft), var(--surface));
  border: 1px solid color-mix(in srgb, var(--k1) 15%, transparent);
  border-radius: 16px;
  margin-bottom: 20px;
}
.day-chip {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  background: var(--k1);
  color: white;
  font-size: 0.78em;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.prompt-label { font-size: 0.85em; color: var(--muted); margin-bottom: 8px; }
.prompt-value {
  font-size: 2.3em;
  font-weight: 700;
  color: var(--kdeep);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.prompt-extra { font-size: 0.9em; color: var(--muted); margin-top: 8px; }
.prac-answer-desc {
  white-space: pre-wrap;
  line-height: 1.5;
  padding-left: 10px;
  border-left: 2px solid var(--kline, var(--border));
}

.prac-answer-example {
  white-space: pre-wrap;
  line-height: 1.5;
  padding-left: 10px;
  border-left: 2px solid var(--kline, var(--border));
}

/* 정답 부가정보(예문·설명): 뜻·음/정답 칸 아래 전체 폭 사용 → 긴 설명 줄바꿈 최소화.
   정답 공개 후, 내용 있을 때만 표시 */
#prac-answer-supp {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--k1) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
#prac-card:not(.revealed) #prac-answer-supp { display: none; }
#prac-answer-supp:not(:has(> .prompt-extra:not(.hidden))) { display: none; }

/* ----------------- canvas ----------------- */
#canvas-wrap { display: block; }
#pad {
  display: block;
  width: 100%;
  max-width: 100%;
  background: #fff;
  border: 2px dashed color-mix(in srgb, var(--k1) 30%, var(--border));
  border-radius: 16px;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,0.18);
  touch-action: none;
  cursor: crosshair;
}
/* 캔버스 좌/우 탭존 시각 표시(이전·다음 오버레이)는 제거.
   '정답 함께 보기' 공부 모드에서는 좌/우 탭이 여전히 이전/다음으로 동작하지만(JS),
   디자인 오버레이 없이 캔버스 전체가 깔끔한 필기 영역으로 보인다. */

.text-input { margin-bottom: 8px; }

/* Conversation typing input is a textarea so full sentences have room to wrap. */
#conv-text-input {
  width: 100%;
  min-height: 88px;
  padding: 12px 14px;
  font-size: 1.05em;
  line-height: 1.45;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#conv-text-input:focus {
  outline: none;
  border-color: var(--k1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--k1) 18%, transparent);
}

.nav {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  gap: 10px;
}
.nav-top { margin-top: 0; margin-bottom: 20px; }
.quiz-actions-bar {
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}
.quiz-actions-bar #prev-btn,
.quiz-actions-bar #next-btn {
  height: 40px;
  width: 104px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92em;
  line-height: 1;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .quiz-actions-bar #prev-btn,
  .quiz-actions-bar #next-btn { width: 92px; height: 38px; font-size: 0.88em; }
}

/* slide animation between questions */
.slide.slide-in-right { animation: slideInRight 0.32s cubic-bezier(.4,0,.2,1); }
.slide.slide-in-left  { animation: slideInLeft  0.32s cubic-bezier(.4,0,.2,1); }
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ----------------- review ----------------- */
.review-item {
  display: grid;
  grid-template-columns: 36px 1fr 1.2fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.review-item.kind-hanja { grid-template-columns: 36px 1fr 2.4fr auto; }
.review-answer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 14px;
}
.review-answer > .ocr {
  grid-column: 1 / -1;
  justify-self: stretch;
}
.review-item:first-child { border-top: none; }
.review-num { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.review-prompt strong { color: var(--text); display: block; font-size: 1.05em; line-height: 1.4; }
.review-prompt .day-mini {
  display: inline-block;
  background: var(--ksoft);
  color: var(--kdeep);
  font-size: 0.72em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 6px;
  font-weight: 600;
}
.review-prompt small { color: var(--muted); }
.review-answer img { max-width: 100%; max-height: 100px; border: 1px solid var(--border); border-radius: 6px; background: white; }
.review-answer audio { width: 100%; max-width: 320px; height: 36px; }
.review-answer .ocr { color: var(--muted); font-size: 0.78em; margin-top: 4px; }
.review-answer .truth { color: var(--success); font-weight: 700; }
/* English: 우측 큰 정답을 빼고(중복) 내 답을 전체폭으로, 줄바꿈 줄의 정답 글꼴을 키운다 */
.kind-english .review-answer { grid-template-columns: 1fr; justify-items: start; }
.kind-english .review-answer .ocr { font-size: 0.95em; }
.kind-english .review-answer .truth { font-size: 1.5em; line-height: 1.3; }
/* English (default): keyboard text answer, modest size */
.review-answer .my-text { font-size: 1.2em; font-weight: 600; color: var(--text); flex: 0 0 auto; }
.review-answer .my-empty { font-size: 1.2em; font-weight: 600; color: var(--muted); flex: 0 0 auto; }
.review-answer .truth-big {
  font-size: 1.8em;
  font-weight: 700;
  color: var(--success);
  letter-spacing: 0.01em;
  line-height: 1.1;
  word-break: break-word;
  text-align: center;
}
/* Conversation: full sentences — answer spans a full-width row below the prompt
   so long sentences use the whole width instead of wrapping in a narrow column. */
.review-item.kind-conversation {
  grid-template-columns: 36px 1fr auto;
  grid-template-areas:
    "num prompt mark"
    "ans ans   ans";
  row-gap: 8px;
}
.kind-conversation .review-num { grid-area: num; align-self: center; }
.kind-conversation .review-prompt { grid-area: prompt; align-self: center; }
.kind-conversation .review-mark { grid-area: mark; align-self: center; }
.kind-conversation .review-answer {
  grid-area: ans;
  grid-template-columns: 1fr;
  justify-items: stretch;
  gap: 6px;
}
.kind-conversation .review-answer .my-text,
.kind-conversation .review-answer .my-empty,
.kind-conversation .review-answer .truth-big {
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}
/* 내 답 / 정답 라벨로 어느 쪽이 정답인지 명확히 구분 */
.kind-conversation .conv-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.kind-conversation .conv-ans-label {
  flex: 0 0 auto;
  font-size: 0.72em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1.5;
  white-space: nowrap;
}
.kind-conversation .conv-ans-label.mine {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.kind-conversation .conv-ans-label.correct {
  background: var(--success);
  color: #fff;
}

/* Hanja: large for visual comparison with truth */
.kind-hanja .review-answer img { max-width: 100%; max-height: 160px; }
.kind-hanja .review-answer .my-text,
.kind-hanja .review-answer .my-empty,
.kind-hanja .review-answer .truth-big {
  font-size: 10em;
  line-height: 1;
  font-weight: 700;
  font-family: 'Noto Serif KR', 'Apple SD Gothic Neo', serif;
  flex: 0 0 auto;
}
.kind-hanja .review-answer .my-text { color: var(--text); }
.kind-hanja .review-answer .my-empty { color: var(--border); }
.kind-hanja .review-answer .truth-big { color: var(--success); }
@media (max-width: 600px) {
  /* 한자 채점 모바일: 내 답안과 정답이 좌·우로 균형있게 */
  .kind-hanja .review-answer .my-text,
  .kind-hanja .review-answer .my-empty,
  .kind-hanja .review-answer .truth-big { font-size: 5em; }
  .kind-hanja .review-answer img { max-width: 100%; max-height: 110px; }
}

.review-mark {
  display: inline-flex;
  border: 2px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--soft);
}
.mark-btn {
  width: 56px;
  height: 40px;
  border: none;
  background: transparent;
  font-size: 1.3em;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
  padding: 0;
  border-radius: 0;
  font-family: inherit;
}
.mark-btn:not(:disabled):hover { background: rgba(0,0,0,0.04); cursor: pointer; }
.mark-btn + .mark-btn { border-left: 2px solid var(--border); }
.mark-btn.correct.active { background: var(--success); color: white; }
.mark-btn.wrong.active { background: var(--danger); color: white; }
.mark-hist { margin-left: 8px; font-size: 0.78em; }

.summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid var(--border);
  font-size: 1.05em;
}
.summary strong { font-size: 1.5em; color: var(--k1); font-variant-numeric: tabular-nums; }

.big-score {
  font-size: 3.2em;
  font-weight: 800;
  color: var(--k1);
  margin: 22px 0;
  font-variant-numeric: tabular-nums;
}

.ocr-progress { padding: 16px 0; }

/* ----------------- conversation ----------------- */
.conv-record {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 8px;
  flex-wrap: wrap;
}
.conv-record .record-btn {
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid var(--border);
  font-weight: 600;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
}
.conv-record .record-btn.recording {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
  animation: rec-pulse 1.2s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
  50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}
.conv-record audio { flex: 1; min-width: 200px; max-width: 360px; height: 36px; }

#conv-reveal-row { margin-top: 8px; }
.primary.wide { width: 100%; padding: 14px; font-size: 1.05em; }

#conv-answer {
  margin-top: 14px;
  padding: 18px;
  background: var(--ksoft);
  border-radius: 12px;
  border: 2px solid var(--k1);
}

/* 정답 확인 전이 (T-F9) — .hidden 해제 시 한 번 재생 */
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
#conv-answer:not(.hidden),
.prompt-answer:not(.hidden) {
  animation: reveal-rise 0.18s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  #conv-answer:not(.hidden),
  .prompt-answer:not(.hidden) { animation: none; }
}
.conv-sentence {
  font-size: 1.5em;
  font-weight: 600;
  color: var(--kdeep);
  line-height: 1.4;
  text-align: center;
  word-break: break-word;
}
/* 회화 정답 문장에서 시트의 빨간 강조 단어 — 공부 정답·시험 정답/채점 공통 */
.conv-red { color: #e02424; font-weight: 800; }
.conv-note {
  font-size: 0.92em;
  color: var(--muted);
  margin-top: 10px;
  text-align: center;
  white-space: pre-wrap;
}
.conv-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
/* ----------------- 단어/회화 공부 액션 바 ----------------- */
#prac-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
  margin: 0 0 20px;  /* 절대 위치 텍스트(1/15 한자) 공간 확보 */
}
.prac-progress-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
}
.prac-progress-wrap .progress { flex: 1; margin: 0; }
.prac-progress-text {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.78em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.prac-progress-text .muted { font-size: 1em; margin-left: 4px; }
.prac-actions-right { display: flex; gap: 8px; flex-shrink: 0; }
/* 이전 / 정답확인 / 다음 — 동일한 박스 크기 (width·height 고정) */
#prac-prev,
#prac-reveal,
#prac-next {
  height: 40px;
  width: 104px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92em;
  line-height: 1;
  touch-action: manipulation;  /* 탭 즉시 반응 (더블탭 줌 대기 제거) */
}
/* '정답 확인'(상단 데스크톱) 톤다운 빨강 — 하단 바 .bb-reveal와 통일.
   id 선택자라 mono 테마(.primary 재정의)보다 우선. '다음'(#prac-next)은 제외 */
#prac-reveal { background: #c0504d; color: #fff; }
@media (max-width: 600px) {
  #prac-prev, #prac-reveal, #prac-next {
    width: 92px;
    height: 38px;
    font-size: 0.88em;
  }
}
@media (max-width: 600px) {
  #prac-actions { gap: 8px; margin-bottom: 20px; }
  .prac-progress-text { font-size: 0.72em; }
}

/* 공부·시험 공통 하단 고정 액션 바 (모바일 전용) — 좌:이전 / 우:정답확인·다음 */
:root { --prac-bb-h: 88px; }
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  height: calc(var(--prac-bb-h) + env(safe-area-inset-bottom, 0px));
  gap: 10px;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 16px -6px rgba(15,23,42,0.14);
  transition: opacity 0.22s ease;  /* transform 트랜지션 제거 → 등장 즉시 정확한 위치(캔버스 맞춤 정확도) */
}
/* hidden 상태: 아래로 슬라이드 + 투명 (display 유지해 트랜지션 동작) */
.bottom-bar.hidden {
  display: flex !important;
  opacity: 0 !important;
  transform: translateY(100%) !important;
  pointer-events: none !important;
}
.bottom-bar button {
  border: none;
  border-radius: 10px;  /* 일반 버튼과 동일한 모서리 각 */
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  touch-action: manipulation;  /* 더블탭 줌 대기(~300ms) 제거 → 탭 즉시 반응 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: filter 0.15s, background 0.15s, color 0.15s;
}
/* 좌: 이전 / 우: 정답확인·다음 — 50/50 균등 분할.
   이전은 '흰 빈칸' 느낌 제거 위해 같은 과목 색 계열의 연한 톤(ksoft/kdeep) */
.bb-prev {
  flex: 1 1 0;
  background: var(--ksoft);
  color: var(--kdeep);
  font-size: 1.15em;
  font-weight: 700;
}
.bb-prev:active { filter: brightness(0.94); }
.bb-prev:disabled { opacity: 0.4; cursor: default; }
/* 우: 정답확인 / 다음 — 주 CTA (과목 액센트 솔리드) */
.bb-next {
  flex: 1 1 0;
  background: var(--k1);
  color: #fff;
  font-size: 1.15em;
  font-weight: 700;
}
.bb-next:active { filter: brightness(0.9); }
/* '정답 확인' 단계만 톤다운 빨강 (다음/완료 단계는 과목 액센트색 유지) */
.bb-next.bb-reveal { background: #c0504d; }

/* 하단 바 공간만큼 카드 아래 여백 */
#prac-card { margin-bottom: calc(var(--prac-bb-h) + env(safe-area-inset-bottom, 0px) + 12px); }
/* 데스크톱: 하단 바 숨김, 카드 여백 원복 (상단 액션바로 조작) */
@media (min-width: 601px) {
  .bottom-bar,
  .bottom-bar.hidden { display: none !important; }
  #prac-card { margin-bottom: 16px; }
}
/* ---- 테마별 조정 ---- */
/* 컬러 다크: 더 짙은 상단 그림자로 표면 분리 */
:root[data-theme="dark"] .bottom-bar { box-shadow: 0 -2px 22px -4px rgba(0,0,0,0.55); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-style="mono"]) .bottom-bar {
    box-shadow: 0 -2px 22px -4px rgba(0,0,0,0.55);
  }
}
/* 모노: 완전 흑백 — 평탄(그림자 X). 이전=연한 그레이 채움(흰색 회피),
   정답확인=text/bg 반전 (모노 다크에서도 가독) */
:root[data-style="mono"] .bottom-bar { box-shadow: none; }
:root[data-style="mono"] .bb-prev {
  background: color-mix(in srgb, var(--text) 12%, var(--surface));
  color: var(--text);
}
:root[data-style="mono"] .bb-next { background: var(--text); color: var(--bg); }
/* mono 테마에서도 '정답 확인'은 톤다운 빨강 유지 (.bb-next mono 규칙보다 높은 특정도) */
:root[data-style="mono"] .bb-next.bb-reveal { background: #c0504d; color: #fff; }
#prac-card,
#question-card { padding: 16px; margin-bottom: 16px; }
#prac-card .prompt,
#question-card .prompt { margin-bottom: 16px; }
/* 연습 모드 출제 박스 */
#prac-card .prompt { padding: 12px 16px 14px; }
/* 출제(unrevealed) 시 큰 글씨, 정답 확인(revealed) 시 컴팩트 */
#prac-card .prompt-question .prompt-value { font-size: 2.4em; }
#prac-card.revealed .prompt-question .prompt-value { font-size: 1.4em; }
/* 한자는 답안 글자가 크니 출제도 조금만 크게 */
html[data-kind="hanja"] #prac-card .prompt-question .prompt-value { font-size: 1.8em; }
html[data-kind="hanja"] #prac-card.revealed .prompt-question .prompt-value { font-size: 1.4em; }
/* 영단어: 문제만 보일 때(미공개) 글씨 고정 축소 → 최대한 한 줄, 문제마다 동일 크기 */
html[data-kind="english"] #prac-card:not(.revealed) .prompt-question .prompt-value { font-size: 1.5em; line-height: 1.25; }
/* 회화: 한국어 문제 문장이 기본 2.4em이라 너무 큼 → 정답(영어 문장)과 비슷한 크기로 */
html[data-kind="conversation"] #prac-card .prompt-question .prompt-value { font-size: 1.35em; line-height: 1.3; }
html[data-kind="conversation"] #prac-card.revealed .prompt-question .prompt-value { font-size: 1.2em; }
/* 출제·정답 좌우 배치 — 정답 확인 전·후 모두 동일한 세로 크기 유지.
   처음부터 정답 사이즈를 고려해 min-height 고정. 모든 문제에서 동일. */
.prompt-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;  /* 정답 미공개 시 빈 공간 균형 */
  gap: 0;
  min-height: 95px;
}
/* 영단어/회화: 정답(상하 배치) 공간까지 예약 → 출제·확인 박스 크기 동일.
   ~60% 사이즈로 축소 — 폰트 자체도 함께 축소. */
html:not([data-kind="hanja"]) .prompt-row { min-height: 104px; }
.prompt-question,
.prompt-answer {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
/* 정답 단어 + 🔊 발음 버튼을 한 줄에 (발음 버튼이 줄 전체를 차지하지 않도록 단어 옆에 배치) */
.prac-answer-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* 단어+발음 묶음 — 줄 안에서 가운데 정렬되는 앵커 */
.answer-word {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  max-width: 100%;
}
#prac-tts-row { display: inline-flex; align-items: center; }
/* 라벨·값·extra 자체 마진 제거 — gap이 모든 간격 담당 */
.prompt-question .prompt-label,
.prompt-question .prompt-value,
.prompt-question .prompt-extra,
.prompt-answer .prompt-label,
.prompt-answer .prompt-value,
.prompt-answer .prompt-extra { margin: 0; }
.prompt-answer .prompt-value { font-size: 1.15em; color: var(--success); font-weight: 700; }
.prompt-answer .prompt-label { color: var(--success); font-weight: 600; font-size: 0.78em; }
.prompt-answer .prompt-extra { color: var(--muted); font-size: 0.85em; }
#prac-tts-row { display: flex; justify-content: center; margin-top: 2px; }
#prac-tts-row .ghost.small { padding: 2px 8px; font-size: 0.78em; white-space: nowrap; }
/* 영단어: 단어는 줄 정중앙, 🔊 발음 버튼은 그 단어 오른쪽에 매달리게(가운데 정렬을 밀지 않음).
   .answer-word는 단어 폭만큼만 차지(버튼이 absolute라 흐름에서 빠짐) → 줄에서 가운데. */
html[data-kind="english"] #prac-tts-row {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
  margin-left: 8px;
}
/* 회화: 정답 문장이 길어 발음 버튼을 옆이 아니라 문장 아래 줄로 내려 가운데 표시 */
html[data-kind="conversation"] .answer-word { flex-direction: column; }
/* 한자는 한 글자라 크게 보여줘야 잘 보임 */
html[data-kind=hanja] .prompt-answer .prompt-value {
  font-size: 2em;
  line-height: 1.05;
  font-family: 'Noto Serif KR', 'Apple SD Gothic Neo', serif;
}
/* 공부모드: 정답(한자 글자·영어 단어)은 클릭 시 구글 검색 (클릭 가능 단서) */
#prac-answer-value.searchable { cursor: pointer; }
#prac-answer-value.searchable:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
/* 영단어 공부 정답: 인쇄체 정답 아래 필기체(cursive)로 한 번 더 — 필기체 읽기 연습.
   latin 서브셋 woff2 자체 번들(Learning Curve, Blue Vinyl Fonts) → 기기 무관 동일한 손글씨 필기체.
   라이선스: 개인 용도 무료 / 상업 사용은 저작자(bvfonts@bvfonts.com) 문의. LICENSE-LearningCurve.txt 참고. */
@font-face {
  font-family: 'Learning Curve';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/learning-curve-latin.woff2') format('woff2');
}
.answer-cursive {
  font-family: 'Learning Curve', cursive;
  font-weight: 400;
  font-size: 3.2em; /* Learning Curve는 획이 가늘고 x-height가 낮아 크게(≈1.7배) */
  line-height: 1.35;
  color: var(--text);
  margin-top: 6px;
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere;
  cursor: pointer; /* 탭 → 따라쓰기 연습장 */
}
/* 회화 문장 정답은 길어서 단어보다 작게 — 여러 줄로 감싸 읽기 편하게 */
.answer-cursive.sentence { font-size: 2.2em; line-height: 1.3; }
/* 탭 가능 단서: 필기체 끝에 작은 연필 (middle=소문자 몸통과 세로 중앙 정렬) */
.answer-cursive::after {
  content: '✍️';
  font-size: 0.38em;
  margin-left: 10px;
  opacity: 0.55;
  vertical-align: middle;
}
/* ---------- 필기체 따라쓰기 모달 (영단어 공부) ----------
   4선 연습장(종이는 #pad처럼 테마 무관 흰색) 위에 회색 견본 + 필기 레이어. */
.trace-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  padding: 16px;
  overscroll-behavior: contain;
}
.trace-modal.hidden { display: none; }
.trace-sheet {
  display: flex; flex-direction: column;
  width: 100%; max-width: 640px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 60px -12px rgba(0,0,0,0.4);
  overflow: hidden;
}
.trace-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border);
}
#trace-word {
  font-size: 1.05em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trace-head-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* 필기체 견본 줄 — 종이 안 위쪽에 겹쳐 표시(잉크 캔버스 아래 레이어).
   견본 글자 위에도 그대로 따라 쓸 수 있다 */
.trace-cursive-sample {
  position: absolute; top: 0; left: 0; right: 0;
  pointer-events: none;
  font-family: 'Learning Curve', cursive;
  font-size: 2em;
  line-height: 1.3;
  text-align: center;
  color: #6b7280; /* 종이가 항상 흰색이라 테마 무관 회색 */
  padding: 8px 12px 2px;
  overflow-wrap: anywhere;
}
.trace-paper {
  position: relative;
  width: 100%;
  height: min(48vh, 372px); /* 견본 줄이 종이 안으로 들어온 만큼 종이를 키움 */
  background: #fff; /* 필기 종이는 테마 무관 흰색 (#pad와 동일) */
  touch-action: none;
  cursor: crosshair;
}
.trace-paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.trace-hint {
  text-align: center; color: var(--muted); font-size: 0.8em;
  padding: 8px 12px 10px;
}
/* 필기체 쓰기 모드(상단 바 진입) — 단어 직접 입력 · 랜덤 */
.trace-input-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px 0;
}
.trace-input-row.hidden { display: none; }
.trace-input-row input { flex: 1; min-width: 0; }
.trace-input-row button { flex-shrink: 0; white-space: nowrap; }
.trace-input-row .trace-source { flex-shrink: 0; }
/* 필기 가로모드 — 머리줄 '가로' 버튼으로 전환(자동 아님). 세로로 든 상태에서만 의미가
   있어 portrait 한정. iOS 웹은 화면 방향 잠금 API가 없어 CSS 회전이 표준 대응이고,
   필기 좌표는 JS tracePoint가 같은 조건으로 함께 변환한다. */
@media (orientation: portrait) {
  .trace-modal.rotated { overflow: hidden; }
  .trace-modal.rotated .trace-sheet {
    transform: rotate(90deg);
    width: 80vh;   /* 아이폰 고려 — 화면(세로 길이)의 80%만 사용해 여백 확보 */
    max-width: none;
    flex-shrink: 0;
  }
  /* 가로모드는 종이를 더 높게 + 견본 글자도 크게 (줄 간격·글자 확대) */
  .trace-modal.rotated .trace-paper { height: clamp(180px, calc(100vw - 165px), 380px); }
  .trace-modal.rotated .trace-cursive-sample { font-size: 2.4em; padding-top: 4px; }
  .trace-modal.rotated .trace-hint { padding: 6px 12px 8px; }
}
/* 기기가 이미 가로 화면이면 전환 버튼 불필요 */
@media (orientation: landscape) {
  #trace-rotate { display: none; }
}
/* 한자: 정답 확인 시 좌(출제)·점선·우(정답) 좌우 배치 (한 글자라 narrow OK) */
html[data-kind="hanja"] #prac-card.revealed .prompt-row {
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
}
html[data-kind="hanja"] #prac-card.revealed .prompt-question,
html[data-kind="hanja"] #prac-card.revealed .prompt-answer {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}
html[data-kind="hanja"] #prac-card.revealed .prompt-question {
  padding-right: 16px;
  border-right: 1px dashed color-mix(in srgb, var(--k1) 30%, transparent);
}
/* 영단어/회화: 정답 확인 시 상하(수직) 배치 — 줄바꿈 회피.
   .prompt-row는 flex-direction: column 기본값 유지하고 답안 위에 dashed divider */
html:not([data-kind="hanja"]) #prac-card.revealed .prompt-answer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--k1) 30%, transparent);
}
/* 한자 + 정답 함께 보기: 한자 글자를 크게 (시인성 우선).
   세 모드(한자쓰기/뜻쓰기/혼합) 모두 한자가 들어가는 칸(.hanja-char)에 적용.
   단일 글자라도 줄바꿈 방지(white-space: nowrap). */
html[data-kind="hanja"] #prac-card.view-mode .hanja-char {
  font-size: 3.6em !important;
  line-height: 1.1;
  white-space: nowrap;
  font-family: 'Noto Serif KR', 'Apple SD Gothic Neo', serif;
}
@media (max-width: 600px) {
  html[data-kind="hanja"] #prac-card.view-mode .hanja-char { font-size: 2.8em !important; }
}
/* 필기 공간: 모든 과목·모든 상태에서 동일 사이즈 유지 */
#pad { height: min(56vh, 480px) !important; transition: height 0.2s; }
/* 영단어/회화는 prompt 박스가 크니 캔버스도 좀 더 축소 (단, 출제·확인 시 동일) */
html:not([data-kind="hanja"]) #pad { height: min(46vh, 380px) !important; }
#prac-canvas-wrap { margin-bottom: 4px; }

/* 입력 행: 손글씨/키보드(좌) + 한번더/지우기(우). 4개 모두 동일 pill */
#prac-input-mode-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 8px 0;
  height: 32px;
  flex-wrap: nowrap;
}
#prac-imode-radios {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 32px;
}
/* 4개의 pill — 동일한 박스 모델·사이즈 */
#prac-input-mode-row .prac-pill {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 78px;
  height: 32px;
  padding: 0 8px;
  margin: 0;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.82em;
  line-height: 1;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* 라디오 입력은 시각적으로 숨기고 pill 자체가 선택 상태를 표현 */
#prac-imode-radios input[type=radio] {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
#prac-imode-radios label:has(input:checked) {
  border-color: var(--text);
  color: var(--text);
  font-weight: 600;
}
/* 한번더는 우측 그룹의 시작 — margin-left: auto 로 push */
#prac-input-mode-row .prac-star-row {
  margin-left: auto;
  background: var(--soft);
  border-color: transparent;
}
.prac-star-row input[type=checkbox] {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}
#prac-input-mode-row .prac-star-row:has(input:checked) {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--text);
  border-color: transparent;
  font-weight: 600;
}
#prac-input-mode-row .prac-clear-btn {
  color: var(--text);
}
#prac-input-mode-row .prac-clear-btn:hover { background: var(--soft); border-color: var(--muted); }
/* 정답 함께 보기: 필기창 토글 — 닫힘=ghost, 열림(.active)=강조 */
#prac-canvas-toggle { color: var(--text); }
#prac-canvas-toggle:hover { background: var(--soft); border-color: var(--muted); }
#prac-canvas-toggle.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  font-weight: 600;
}
/* 모노 테마: ghost border가 1px이므로 모든 pill을 1px로 통일 */
:root[data-style="mono"] #prac-input-mode-row .prac-pill { border-width: 1px; }
:root[data-style="mono"] #prac-input-mode-row .prac-star-row { border-color: transparent; }
/* iPhone 17 (393px) 등 모바일에서 한 줄 유지 */
@media (max-width: 600px) {
  #prac-input-mode-row { gap: 4px; }
  #prac-imode-radios { gap: 4px; }
  #prac-input-mode-row .prac-pill {
    width: 72px;
    font-size: 0.78em;
    padding: 0 6px;
  }
}
@media (max-width: 360px) {
  #prac-input-mode-row .prac-pill { width: 66px; font-size: 0.74em; }
}

/* 시험 모드 라디오 행: 지우기(좌) + 라디오 + 자동저장(우) — 같은 라인 높이 */
#input-mode-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 8px 0 8px;
  height: 32px;
  flex-wrap: nowrap;
}
#imode-radios { display: inline-flex; gap: 12px; align-items: center; height: 32px; }
#imode-radios label { display: inline-flex; align-items: center; height: 32px; gap: 4px; }
#input-mode-row .quiz-clear-btn {
  box-sizing: border-box;
  height: 32px;
  padding: 0 12px;
  margin: 0;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.85em;
  line-height: 1;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
#input-mode-row .quiz-clear-btn:hover { background: var(--soft); border-color: var(--muted); }
.quiz-autosave { margin-left: auto; font-size: 0.78em; line-height: 1.3; }
:root[data-style="mono"] #input-mode-row .quiz-clear-btn { border-width: 1px; }


/* ----------------- responsive ----------------- */
@media (max-width: 600px) {
  /* 시험 카드: 정보(meta) 위, 액션 버튼 줄은 카드 전체 폭으로 → CTA+링크+삭제 한 줄 확보 */
  .exam-item { flex-direction: column; align-items: stretch; }
  .exam-actions { width: 100%; }
  .tab { padding: 8px 10px; font-size: 0.9em; }
  .tab-updates .tab-text { display: none; }
  .tab-updates { padding: 8px 12px; font-size: 1.05em; }
  .appbar { padding: 8px 12px; gap: 6px; }
  .brand { font-size: 0.95em; }
  .bar-right { gap: 6px; }
  .bar-right .muted { font-size: 0.82em; }  /* F11: 12px 미만 → 13px+ */
  .appbar button.ghost { padding: 6px 10px; font-size: 0.85em; }
  /* 350px 이하 (작은 폰): 텍스트 줄여 이모지만 보이게 */
  .card { padding: 20px 18px; }
  .prompt { padding: 14px 16px 18px; }
  .prompt-value { font-size: 1.8em; }
  #prac-card { padding: 12px 14px; }
  #prac-card .prompt { padding: 10px 10px 12px; margin-bottom: 10px; }
  /* 출제는 크게, 정답 확인은 컴팩트 */
  #prac-card .prompt-question .prompt-value { font-size: 1.9em; }
  #prac-card.revealed .prompt-question .prompt-value { font-size: 1.2em; }
  html[data-kind="hanja"] #prac-card .prompt-question .prompt-value { font-size: 1.5em; }
  html[data-kind="hanja"] #prac-card.revealed .prompt-question .prompt-value { font-size: 1.2em; }
  html[data-kind="english"] #prac-card:not(.revealed) .prompt-question .prompt-value { font-size: 1.3em; }
  html[data-kind="conversation"] #prac-card .prompt-question .prompt-value { font-size: 1.2em; }
  html[data-kind="conversation"] #prac-card.revealed .prompt-question .prompt-value { font-size: 1.1em; }
  .prompt-answer .prompt-value { font-size: 1em; }
  html[data-kind=hanja] .prompt-answer .prompt-value { font-size: 1.7em; }
  /* 한자 좌우 배치에서 컬럼 폭 좁아도 fit */
  html[data-kind="hanja"] #prac-card.revealed .prompt-row { gap: 10px; }
  html[data-kind="hanja"] #prac-card.revealed .prompt-question { padding-right: 10px; }
  .prompt-row { min-height: 100px; }
  html:not([data-kind="hanja"]) .prompt-row { min-height: 100px; }
  /* 모바일: 한 화면 fit — 작은 폰까지 안 잘리도록 dvh 기반 동적 사이즈
     긴 영단어 뜻(2~3줄 wrap) 까지 고려해 보수적 캡 */
  /* 상단 이전/정답확인/다음 버튼 숨김 — 모바일은 하단 바로 조작, 진행(스크롤)바만 얇게 남김 */
  #prac-actions #prac-prev,
  #prac-actions .prac-actions-right { display: none; }
  /* 진행(스크롤)바를 카드(캔버스) 내용 폭에 맞춰 좌우 정렬(카드 가로 패딩 14px만큼 안쪽) + 여백 절제 */
  #prac-actions { margin-bottom: 16px; padding: 0 14px; }
  /* 단어시험도 동일: 상단 이전/다음 숨기고 하단 바로 통일, 진행바만 남김 */
  .quiz-actions-bar #prev-btn,
  .quiz-actions-bar #next-btn { display: none; }
  .quiz-actions-bar { margin-bottom: 16px; padding: 0 14px; }
  /* 하단 바에 가리지 않도록 시험 카드 아래 여백 확보 */
  #question-card { margin-bottom: calc(var(--prac-bb-h) + env(safe-area-inset-bottom, 0px) + 12px); }

  /* 하단 바 높이(--prac-bb-h) 차감. 상단 버튼 숨김으로 확보한 공간만큼 필기영역 ↑.
     공부/시험 화면은 업데이트 배너를 숨기므로 배너 차감 불필요. */
  #pad {
    height: min(460px, max(170px, calc(100dvh - 392px - var(--prac-bb-h)))) !important;
  }
  html:not([data-kind="hanja"]) #pad {
    height: min(380px, max(150px, calc(100dvh - 472px - var(--prac-bb-h)))) !important;
  }
  /* 부가설명이 길어도 화면을 넘지 않도록 캡 + 내부 스크롤.
     캔버스 높이는 JS(fitPracticePad)가 '남는 공간'에 맞춰 채움(설명 길이에 자동 적응). */
  #prac-answer-supp { max-height: 38vh; overflow-y: auto; }
  .review-item,
  .review-item.kind-hanja {
    grid-template-columns: 30px 1fr;
    grid-template-areas: "n p" "n a" "m m";
    gap: 8px;
  }
  .review-num { grid-area: n; }
  .review-prompt { grid-area: p; }
  .review-answer { grid-area: a; }
  /* 회화 채점 레이아웃 (영역명만 다름) */
  .review-item.kind-conversation {
    grid-template-columns: 30px 1fr;
    grid-template-areas:
      "num prompt"
      "ans ans"
      "mark mark";
  }
  .kind-conversation .review-mark { grid-area: mark; }
  /* 모든 과목 공통: O/X를 하단 전체폭으로 큼직하게 (회화처럼) → 상단에서 폭을 뺏기지 않아 줄바꿈 최소화 */
  .review-mark {
    grid-area: m;
    justify-self: stretch;
    align-self: auto;
    width: 100%;
    border-radius: 12px;
  }
  .mark-btn { flex: 1; width: auto; height: 48px; font-size: 1.4em; }
  .review-answer img { max-height: 80px; }
  .review-answer .truth-big { font-size: 2.2em; }
  /* OCR/정답 보조 라인은 작아도 OK, 단 너무 작지 않게 */
  .review-answer .ocr { font-size: 0.9em; }
  .summary { flex-direction: column; gap: 12px; align-items: stretch; }
}

/* =================================================================== */
/* Mono theme — 완전 흑백 · Pretendard · 정제된 타이포·컴포넌트       */
/* =================================================================== */
:root[data-style="mono"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #09090b;
  --muted: #71717a;
  --border: #e4e4e7;
  --soft: #f4f4f5;
  --shadow-card: none;
  --hanja-1: #09090b; --hanja-2: #09090b; --hanja-soft: #f4f4f5; --hanja-deep: #09090b;
  --eng-1: #09090b;   --eng-2: #09090b;   --eng-soft: #f4f4f5;   --eng-deep: #09090b;
  --conv-1: #09090b;  --conv-2: #09090b;  --conv-soft: #f4f4f5;  --conv-deep: #09090b;
  color-scheme: light;
}
/* 명시적 사용자 선택: 모노 다크 */
:root[data-style="mono"][data-theme="dark"] {
  --bg: #09090b;
  --surface: #09090b;
  --text: #fafafa;
  --muted: #a1a1aa;
  --border: #27272a;
  --soft: #18181b;
  --hanja-1: #fafafa; --hanja-2: #fafafa; --hanja-soft: #18181b; --hanja-deep: #fafafa;
  --eng-1: #fafafa;   --eng-2: #fafafa;   --eng-soft: #18181b;   --eng-deep: #fafafa;
  --conv-1: #fafafa;  --conv-2: #fafafa;  --conv-soft: #18181b;  --conv-deep: #fafafa;
  color-scheme: dark;
}
/* 레거시 fallback: data-style="mono"만 있고 data-theme 미설정인 경우 OS 선호도 추종 */
@media (prefers-color-scheme: dark) {
  :root[data-style="mono"]:not([data-theme]) {
    --bg: #09090b;
    --surface: #09090b;
    --text: #fafafa;
    --muted: #a1a1aa;
    --border: #27272a;
    --soft: #18181b;
    --hanja-1: #fafafa; --hanja-2: #fafafa; --hanja-soft: #18181b; --hanja-deep: #fafafa;
    --eng-1: #fafafa;   --eng-2: #fafafa;   --eng-soft: #18181b;   --eng-deep: #fafafa;
    --conv-1: #fafafa;  --conv-2: #fafafa;  --conv-soft: #18181b;  --conv-deep: #fafafa;
    color-scheme: dark;
  }
}

/* 폰트: Pretendard (한글+영문 균형) */
:root[data-style="mono"],
:root[data-style="mono"] body,
:root[data-style="mono"] button,
:root[data-style="mono"] input,
:root[data-style="mono"] select,
:root[data-style="mono"] textarea {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: "ss06" 1;  /* 한글 정렬 개선 (Pretendard) */
}

/* 타이포 위계 강화 */
:root[data-style="mono"] h1 {
  font-size: 1.9em;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 8px;
  line-height: 1.15;
}
:root[data-style="mono"] h2 {
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
:root[data-style="mono"] .hint,
:root[data-style="mono"] p.muted {
  color: var(--muted);
  font-size: 0.92em;
  margin-bottom: 18px;
}
:root[data-style="mono"] label {
  font-size: 0.82em;
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
  margin: 16px 0 4px;
  letter-spacing: 0;
}
/* 라벨 + 컨트롤은 한 그룹으로 보이도록 라벨 하단 간격 축소.
   line-height: 1.2 로 박스 자체의 빈 공간도 좁힘. */
:root[data-style="mono"] label:has(+ .subject-picker),
:root[data-style="mono"] label:has(+ .mode-picker) {
  margin: 10px 0 0;
  line-height: 1.2;
}

/* 상단 바: 플랫, 보더 1px hairline */
:root[data-style="mono"] .appbar {
  background: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  padding: 12px 24px;
}
:root[data-style="mono"] .appbar .brand,
:root[data-style="mono"] .appbar .brand-btn {
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.02em;
}
:root[data-style="mono"] .appbar .brand-btn:hover { background: var(--soft); }
:root[data-style="mono"] .appbar button.ghost {
  color: var(--text);
  border-color: var(--border);
  background: transparent;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.86em;
}
:root[data-style="mono"] .appbar button.ghost:hover { background: var(--soft); border-color: var(--text); }
:root[data-style="mono"] .appbar .bar-right .muted { color: var(--muted); }

/* 카드: 보더만 (그림자 X), 라운드 적당히 */
:root[data-style="mono"] .card {
  border: 1px solid var(--border);
  box-shadow: none;
  border-radius: 14px;
  padding: 24px;
}

/* primary 버튼: 솔리드 흑/백, 정제된 사이즈 */
:root[data-style="mono"] .primary {
  background: var(--text);
  color: var(--bg);
  box-shadow: none;
  border-radius: 8px;
  padding: 11px 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
:root[data-style="mono"] .primary:hover {
  background: color-mix(in srgb, var(--text) 85%, var(--bg));
  box-shadow: none;
  filter: none;
}
:root[data-style="mono"] .primary.red { background: #dc2626; color: #ffffff; }
:root[data-style="mono"] .primary.red:hover { background: #b91c1c; box-shadow: none; }

/* ghost 버튼: 1px hairline */
:root[data-style="mono"] button.ghost {
  border-width: 1px;
  border-radius: 8px;
  font-weight: 500;
}

/* 과목 픽커: 라이트/다크와 동일한 "독립 박스" 구조 — 컨테이너 제거 */
:root[data-style="mono"] .subject-picker {
  border: none;
  padding: 0;
  gap: 10px;
  background: transparent;
}
:root[data-style="mono"] .subject-picker label {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  font-weight: 500;
  background: var(--surface);
  color: var(--muted);
  font-size: 1em;
}
:root[data-style="mono"] .subject-picker label .emoji {
  font-size: 1.5em;
  margin-bottom: 4px;
}
:root[data-style="mono"] .subject-picker label:hover {
  color: var(--text);
  border-color: var(--muted);
  background: var(--surface);
}
:root[data-style="mono"] .subject-picker label.hanja:has(input:checked),
:root[data-style="mono"] .subject-picker label.english:has(input:checked),
:root[data-style="mono"] .subject-picker label.conversation:has(input:checked) {
  background: var(--surface);
  color: var(--text);
  border-color: var(--text);
  border-width: 2px;
  box-shadow: none;
  font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  :root[data-style="mono"] .subject-picker label.hanja:has(input:checked),
  :root[data-style="mono"] .subject-picker label.english:has(input:checked),
  :root[data-style="mono"] .subject-picker label.conversation:has(input:checked) {
    background: var(--surface);
    color: var(--text);
    border-color: var(--text);
  }
}

/* mode-picker (시험유형/문제범위): 가는 보더 + 단일 액센트 */
:root[data-style="mono"] .mode-picker label {
  border-width: 1px;
  border-radius: 8px;
  padding: 11px 14px;
  font-weight: 500;
  color: var(--muted);
}
:root[data-style="mono"] .mode-picker label:hover { color: var(--text); }
:root[data-style="mono"] .mode-picker label:has(input:checked) {
  border-color: var(--text);
  color: var(--text);
  background: var(--soft);
  font-weight: 600;
}

/* 입력/셀렉트: 1px hairline, 더 정제된 패딩 */
:root[data-style="mono"] input[type=text],
:root[data-style="mono"] input[type=password],
:root[data-style="mono"] select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 0.95em;
  background: var(--surface);
  transition: border-color 0.12s;
}
:root[data-style="mono"] input:focus,
:root[data-style="mono"] select:focus {
  border-color: var(--text);
  box-shadow: none;
}

/* 탭: Linear 스타일 — 가는 언더라인, 미니멀 */
:root[data-style="mono"] .tab-row {
  border-bottom: 1px solid var(--border);
  gap: 0;
  margin-bottom: 16px;
}
:root[data-style="mono"] .tab {
  padding: 11px 16px;
  font-size: 0.92em;
  font-weight: 500;
  color: var(--muted);
  border-radius: 0;
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s;
}
:root[data-style="mono"] .tab:hover { color: var(--text); background: transparent; }
:root[data-style="mono"] .tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
  font-weight: 600;
  background: transparent;
}

/* 진행바: 단일 액센트, 더 가늘게 */
:root[data-style="mono"] .progress {
  background: var(--soft);
  height: 4px;
  border-radius: 999px;
}
:root[data-style="mono"] .progress.clickable { height: 10px; }
:root[data-style="mono"] .progress .bar {
  background: var(--text);
  border-radius: 999px;
}

/* 숫자·날짜·진행 표시: tabular nums + 모노스페이스 */
:root[data-style="mono"] #prac-progress-text,
:root[data-style="mono"] #progress-text,
:root[data-style="mono"] #day-chip,
:root[data-style="mono"] #prac-day-chip,
:root[data-style="mono"] .progress-text,
:root[data-style="mono"] .exam-meta .sub {
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: -0.01em;
  font-size: 0.86em;
}

/* color:white 하드코딩 컴포넌트들 — 모노 다크에서 안 보이는 문제 일괄 수정 */
:root[data-style="mono"] .day-chip,
:root[data-style="mono"] .update-version,
:root[data-style="mono"] .exam-item .badge,
:root[data-style="mono"] .result-exam .badge {
  background: var(--text);
  color: var(--bg);
}
/* 모노: --k1이 글자색과 같아 '결과' 토글 활성 버튼이 같은 색으로 안 보이던 것 방지 */
:root[data-style="mono"] .ev-btn.active { background: var(--text); color: var(--bg); }

/* 업데이트 배너 */
:root[data-style="mono"] #update-banner {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}

/* row gap 살짝 더 여유 */
:root[data-style="mono"] .row { gap: 8px; }

/* 모바일에서 탭 줄바꿈 방지: 기본 테마와 동일하게 축소 */
@media (max-width: 600px) {
  :root[data-style="mono"] .tab { padding: 9px 10px; font-size: 0.86em; }
  :root[data-style="mono"] .tab-updates { padding: 9px 12px; font-size: 1.02em; }
  :root[data-style="mono"] .tab-updates .tab-text { display: none; }
  :root[data-style="mono"] .card { padding: 22px 20px; }
}

/* ----------------- WordTalk (실시간 채팅) ----------------- */
.comment-toggle-btn { white-space: nowrap; position: relative; }
.comment-badge {
  position: absolute; top: 2px; right: 2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger); border: 1.5px solid var(--surface);
  box-shadow: 0 0 0 1px var(--danger);
}
.comment-badge.hidden { display: none; }
/* 아주 좁은 화면에선 라벨 숨기고 이모지만 (별도 span으로 토글) */
@media (max-width: 430px) {
  .comment-toggle-btn .comment-toggle-label { display: none; }
  .sheet-link-btn .sheet-link-label { display: none; }
  .cursive-toggle-btn .cursive-toggle-label { display: none; }
}

/* 저장된 '한번더' 목록 버튼들 (홈 공부 탭, 최신순 스택) */
.study-starred-list { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.study-starred-list:not(:empty) { margin-top: 10px; }

.comment-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  padding: 16px;
}
.comment-modal.hidden { display: none; }
.comment-sheet {
  display: flex; flex-direction: column;
  width: 100%; max-width: 520px;
  height: min(82vh, 760px);
  max-height: 100%;  /* 키보드로 모달 높이가 줄면 시트도 따라 줄어 입력창이 보이게 */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 60px -12px rgba(0,0,0,0.4);
  overflow: hidden;
}
.comment-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; font-size: 1.05em;
}
.wt-head-actions { display: flex; align-items: center; gap: 6px; }

/* 검색 바 */
.wt-search-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; background: var(--surface);
}
.wt-search-bar.hidden { display: none; }
.wt-search-input {
  flex: 1 1 auto; padding: 7px 11px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--bg); color: var(--text);
  font-size: 0.9em; font-family: inherit;
}
.wt-search-head { color: var(--muted); text-align: center; font-size: 0.8em; padding: 2px 0 4px; }

/* 메시지 목록 (스크롤 영역) */
.wt-list-wrap { position: relative; flex: 1 1 auto; display: flex; min-height: 0; }
.comment-list {
  flex: 1 1 auto; overflow-y: auto;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch;
}

/* 말풍선 — 내 메시지는 오른쪽, 상대는 왼쪽 */
.wt-msg { display: flex; flex-direction: column; max-width: 100%; align-items: flex-start; }
.wt-msg.mine { align-items: flex-end; }
.wt-name { font-size: 0.76em; color: var(--muted); font-weight: 700; margin: 0 6px 3px; }
.wt-bubble {
  max-width: 80%; padding: 8px 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  font-size: 0.95em; line-height: 1.45; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.wt-msg.mine .wt-bubble { background: var(--k1); color: #fff; border-color: transparent; }
/* 인용(답글) 칩 */
.wt-quote {
  display: block; width: 100%; max-width: 100%; text-align: left;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border: none; border-left: 3px solid var(--k1); border-radius: 6px;
  padding: 4px 8px; margin-bottom: 5px;
  font-size: 0.78em; color: var(--muted); cursor: pointer; font-family: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wt-msg.mine .wt-quote {
  background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.92);
  border-left-color: rgba(255,255,255,0.7);
}
/* 모노 테마: 내 말풍선은 메신저식 '연한 회색' 바탕 + 일반 글씨색(검정 모노=짙은 회색).
   (--k1==--text라 흰 글씨가 바탕과 겹치던 문제도 함께 해결) */
:root[data-style="mono"] .wt-msg.mine .wt-bubble {
  background: color-mix(in srgb, var(--text) 8%, var(--bg)); color: var(--text);
}
:root[data-style="mono"] .wt-msg.mine .wt-quote {
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--muted);
  border-left-color: color-mix(in srgb, var(--text) 45%, transparent);
}
.wt-text { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.wt-text a { color: inherit; text-decoration: underline; }
.wt-foot { display: flex; align-items: center; gap: 8px; margin: 3px 6px 0; font-size: 0.72em; color: var(--muted); }
.wt-msg.mine .wt-foot { flex-direction: row-reverse; }
.wt-foot .link-btn { font-size: 1em; }
.wt-del { color: var(--muted); opacity: 0.7; }
.wt-del:hover { opacity: 1; }
.wt-flash .wt-bubble { animation: wt-flash 1.1s ease; }
@keyframes wt-flash {
  0%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
  30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--k1) 55%, transparent); }
}
.comment-empty { color: var(--muted); text-align: center; padding: 24px 0; font-size: 0.9em; }

/* '새 메시지' 점프 버튼 — 목록 위에 떠 있음 */
.wt-jump {
  position: absolute; right: 14px; bottom: 12px; z-index: 2;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 0.82em; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.3);
}
.wt-jump.hidden { display: none; }

.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--k1); font-size: 0.8em; font-family: inherit; font-weight: 600;
}
.comment-reply-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 16px; background: var(--bg); border-top: 1px solid var(--border);
  font-size: 0.85em; color: var(--text); flex-shrink: 0;
}
.comment-reply-banner.hidden { display: none; }

.comment-composer {
  flex-shrink: 0; border-top: 1px solid var(--border);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 8px; background: var(--surface);
}
.comment-nick {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); color: var(--text); font-size: 0.9em;
}
.comment-send-row { display: flex; gap: 8px; align-items: flex-end; }
#comment-attach { flex-shrink: 0; padding: 8px 10px; border-radius: 18px; line-height: 1; }
.comment-body {
  flex: 1 1 auto; resize: none; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 18px; background: var(--bg); color: var(--text); font-family: inherit;
  font-size: 0.95em; line-height: 1.4; max-height: 120px;
}
.comment-send-row .primary { flex-shrink: 0; white-space: nowrap; border-radius: 18px; }
.comment-err { margin: 0; min-height: 0; }
.comment-err:empty { display: none; }

/* 첨부 미리보기(전송 대기 중) */
.comment-pending-attach {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); font-size: 0.85em;
}
.comment-pending-attach.hidden { display: none; }
.wt-pending-thumb { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.wt-pending-file { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#comment-attach-remove { margin-left: auto; font-size: 1em; color: var(--muted); }

/* 채팅 말풍선 안 첨부 이미지/파일 */
.wt-img-link { display: block; }
.wt-img {
  display: block; max-width: 100%; max-height: 240px; border-radius: 10px;
  margin-bottom: 4px; cursor: pointer;
}
.wt-file-chip {
  display: flex; align-items: center; gap: 6px; padding: 6px 4px;
  background: none; border: none; color: inherit; font-family: inherit;
  text-decoration: none; font-size: 0.92em; word-break: break-all; cursor: pointer;
}

/* 이미지 전체보기 — 배경이 항상 검정이라 버튼은 테마와 무관하게 고정 밝은색으로 강제 대비. */
.wt-lightbox {
  position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,0.88);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.wt-lightbox.hidden { display: none; }
#wt-lightbox-img { max-width: 92vw; max-height: 78vh; object-fit: contain; border-radius: 8px; }
.wt-lightbox-bar { display: flex; gap: 10px; }
.wt-lightbox-x {
  position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: 14px;
  width: 40px; height: 40px; border-radius: 50%; z-index: 1;
  background: rgba(255,255,255,0.14); border: 1.5px solid rgba(255,255,255,0.5);
  color: #fff; font-size: 1.1em; line-height: 1; cursor: pointer;
}
.wt-lightbox-x:hover { background: rgba(255,255,255,0.24); }
.wt-lightbox-btn {
  border-radius: 999px; padding: 9px 22px; font-size: 0.92em; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,0.14); border: 1.5px solid rgba(255,255,255,0.5); color: #fff;
}
.wt-lightbox-btn:hover { background: rgba(255,255,255,0.24); }
.wt-lightbox-btn-primary { background: #fff; color: #111; border-color: #fff; }
.wt-lightbox-btn-primary:hover { background: #e6e6e6; }
.wt-filesheet-name {
  color: #fff; font-size: 1em; font-weight: 600;
  word-break: break-all; text-align: center; max-width: 86vw; padding: 0 20px;
}