:root {
  --primary: #2563eb;
  --primary-dark: #1e40af;
  --review: #7c3aed;
  --bg: #f1f5f9;
  --card: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --border: #e2e8f0;
  --input-bg: #ffffff;
  /* 白背景に載る「正解」の文字色。#16a34a は白に対して 3.30:1 しかなく
     通常文字の 4.5:1 に届かないため、#15803d（白に対して 5.01:1）にする。
     ダークモードの --correct は背景が暗く十分な比があるので変更しない。 */
  --correct: #15803d;
  --correct-bg: #f0fdf4;
  /* 不正解バナー（.result-banner.ng）は 17px 太字で、WCAG の「大きい文字」
     （18.66px 太字）にわずかに届かないため通常文字の 4.5:1 が必要になる。
     #dc2626 は誤答背景の上で 4.41:1 しかないので、最小限だけ暗くして
     #cf2020（誤答背景上 4.95:1 / 白背景上 5.41:1）にする。 */
  --wrong: #cf2020;
  --wrong-bg: #fef2f2;
  --demo: #b45309;
  --demo-bg: #fffbeb;
  --demo-border: #fcd34d;
  --chip-bg: #eef2ff;
  --chip-text: #3730a3;
  --track: #e2e8f0;
}

:root[data-theme="dark"] {
  --primary: #3b82f6;
  --primary-dark: #60a5fa;
  --review: #a78bfa;
  --bg: #0f172a;
  --card: #1e293b;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: #334155;
  --input-bg: #0f172a;
  --correct: #4ade80;
  --correct-bg: #14532d;
  --wrong: #f87171;
  --wrong-bg: #7f1d1d;
  --demo: #fbbf24;
  --demo-bg: #451a03;
  --demo-border: #92400e;
  --chip-bg: #312e81;
  --chip-text: #c7d2fe;
  --track: #334155;
}

/* 文字サイズ設定（remの基準を変える） */
:root[data-font="small"] { font-size: 14px; }
:root[data-font="medium"] { font-size: 16px; }
:root[data-font="large"] { font-size: 18px; }

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-size: 1rem;
  -webkit-text-size-adjust: 100%;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

.container-wide {
  max-width: 860px;
}

/* ---- ヘッダー ---- */
.app-header {
  text-align: center;
  padding: 0.5rem 0 1rem;
}

.app-header h1 {
  font-size: 1.375rem;
  margin: 0 0 0.25rem;
}

.subtitle {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0;
}

.quiz-header {
  padding: 0.25rem 0 0.75rem;
}

.back-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
  /* 文字の高さのままだとタップ領域が 17px しかなく、スマートフォンで押しにくい。
     見た目の位置を変えずに当たり判定だけを 44px 確保する。 */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
}

.quiz-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.mode-name {
  font-weight: 700;
  font-size: 1.0625rem;
}

.progress {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

/* 進捗バー */
.progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--track);
  margin-top: 0.5rem;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  width: 0;
  transition: width 0.25s ease;
}

.session-score {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 0.375rem;
}

/* ---- カード ---- */
.card {
  background: var(--card);
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.card h2 {
  font-size: 1rem;
  margin: 0 0 0.75rem;
}

.card h3 {
  font-size: 0.9375rem;
  margin: 0 0 0.5rem;
}

/* ---- ボタン ---- */
.btn-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.btn {
  display: block;
  width: 100%;
  padding: 0.8125rem 1rem;
  min-height: 48px;
  border-radius: 12px;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  background: var(--track);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  opacity: 0.85;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-review {
  background: var(--review);
  color: #fff;
}

.btn-danger {
  background: var(--wrong);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  border: 2px solid var(--border);
  color: var(--text);
}

.btn.disabled {
  background: var(--track);
  color: var(--muted);
  opacity: 0.6;
  pointer-events: none;
}

.btn-small {
  display: inline-block;
  width: auto;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
}

.btn-small.btn-ghost {
  background: transparent;
  color: var(--text);
}

.btn-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-row .btn {
  flex: 1;
  min-width: 8rem;
}

/* セグメント選択（設定用） */
.segment {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.segment button {
  flex: 1;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.segment button.active {
  border-color: var(--primary);
  background: var(--chip-bg);
  color: var(--chip-text);
}

/* ---- フォーム ---- */
select,
input[type="text"],
input[type="number"],
input[type="search"],
textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}

textarea {
  min-height: 5rem;
  resize: vertical;
}

label.field {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0.75rem 0 0.25rem;
}

.field-row {
  display: flex;
  gap: 0.5rem;
}

.field-row > * {
  flex: 1;
}

/* ---- 問題画面 ---- */
.q-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-text);
}

.badge-chapter {
  background: var(--primary);
  color: #fff;
}

.badge-demo {
  background: var(--demo-bg);
  color: var(--demo);
  border: 1px solid var(--demo-border);
}

.badge-status-approved { background: var(--correct-bg); color: var(--correct); }
.badge-status-needs_review { background: var(--demo-bg); color: var(--demo); }
.badge-status-draft { background: var(--track); color: var(--muted); }

.q-text {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem;
  white-space: pre-wrap;
}

.choices {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.choice-btn {
  text-align: left;
  background: var(--card);
  border: 2px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-weight: 500;
}

.choice-btn .kana {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--primary);
}

.choice-btn:disabled {
  cursor: default;
  opacity: 1;
}

.choice-btn.correct {
  border-color: var(--correct);
  background: var(--correct-bg);
}

.choice-btn.wrong {
  border-color: var(--wrong);
  background: var(--wrong-bg);
}

.result-banner {
  margin: 1rem 0 0.75rem;
  padding: 0.625rem;
  border-radius: 12px;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 700;
}

.result-banner.ok {
  background: var(--correct-bg);
  color: var(--correct);
}

.result-banner.ng {
  background: var(--wrong-bg);
  color: var(--wrong);
}

/* 解説（開閉式） */
details.explanation {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  margin-bottom: 1rem;
}

details.explanation summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.75rem 0.875rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}

details.explanation .explanation-body {
  padding: 0 0.875rem 0.875rem;
}

.explanation-body p {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  white-space: pre-wrap;
}

.choice-exp {
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

.choice-exp p {
  margin: 0 0 0.375rem;
}

.source-note {
  font-size: 0.75rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

/* 問題アクション（お気に入り・保留・フィードバック） */
.q-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.75rem 0;
}

.q-actions button {
  flex: 1;
  min-height: 44px;
  padding: 0.5rem 0.5rem;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.q-actions button.on {
  border-color: var(--review);
  background: var(--chip-bg);
  color: var(--chip-text);
}

.quiz-nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.quiz-nav .btn {
  flex: 1;
}

.feedback-box {
  margin-top: 0.75rem;
}

.feedback-box .note-ok {
  color: var(--correct);
  font-size: 0.8125rem;
  margin: 0.5rem 0 0;
}

/* ---- 結果画面 ---- */
.score-big {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0.25rem 0;
}

.score-big small {
  font-size: 1.125rem;
  color: var(--muted);
  font-weight: 600;
}

.score-rate {
  text-align: center;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.answer-row {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

.answer-row:last-child {
  border-bottom: none;
}

.answer-mark {
  flex-shrink: 0;
  font-weight: 800;
  font-size: 1rem;
}

.answer-mark.ok { color: var(--correct); }
.answer-mark.ng { color: var(--wrong); }

/* ---- リスト ---- */
.review-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.review-item:last-child {
  border-bottom: none;
}

.review-item .q-snippet {
  font-size: 0.875rem;
  margin: 0.25rem 0 0.5rem;
}

.streak-label {
  font-size: 0.75rem;
  color: var(--review);
  font-weight: 700;
}

.item-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

/* ---- 表 ---- */
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.stats-table th,
.stats-table td {
  padding: 0.375rem 0.25rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.stats-table th.num,
.stats-table td.num {
  text-align: right;
}

.table-scroll {
  overflow-x: auto;
}

/* ---- 管理画面 ---- */
.admin-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.admin-filters .full {
  grid-column: 1 / -1;
}

.admin-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem;
  margin-bottom: 0.625rem;
}

.admin-item .q-snippet {
  font-size: 0.875rem;
  margin: 0.375rem 0 0.5rem;
}

.admin-item .meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.admin-item .id-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  color: var(--muted);
}

.issue-list {
  background: var(--wrong-bg);
  border-radius: 10px;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--wrong);
}

.issue-list.ok {
  background: var(--correct-bg);
  color: var(--correct);
}

.issue-list ul {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}

.admin-note {
  font-size: 0.8125rem;
  color: var(--demo);
  background: var(--demo-bg);
  border: 1px solid var(--demo-border);
  border-radius: 10px;
  padding: 0.625rem 0.875rem;
}

/* トグル行 */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
}

.toggle-row .desc {
  font-size: 0.875rem;
}

.toggle-row input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--primary);
}

/* ---- 補助 ---- */
.muted {
  color: var(--muted);
}

.small {
  font-size: 0.8125rem;
}

.note {
  font-size: 0.75rem;
  color: var(--demo);
  background: var(--demo-bg);
  border: 1px solid var(--demo-border);
  border-radius: 12px;
  padding: 0.625rem 0.875rem;
}

.site-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.8;
}

/* ===== 模試（exam.html）=====
   既存クラスの意味は変えず、模試専用クラスを追記している。
   通常演習の .choice-btn.correct / .wrong は模試では一切付けない。 */

.note-warn {
  color: var(--wrong);
  background: var(--wrong-bg);
  border-color: var(--wrong);
}

.exam-breakdown {
  line-height: 2;
  font-size: 0.9375rem;
}

.exam-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text);
  white-space: nowrap;
}

.exam-timer.is-low {
  color: var(--wrong);
}

/* モード選択ボタン。2行になるので .btn の中身を縦に積む */
.exam-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  min-height: 56px;
}

.exam-mode-title {
  font-weight: 700;
}

.exam-mode-sub {
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.85;
}

.badge-answered {
  background: var(--chip-bg);
  color: var(--chip-text);
}

/* 模試の選択肢。選択中は「枠線＋背景＋文字」の3つで示し、色だけに頼らない */
.exam-choice.selected {
  border-color: var(--primary);
  background: var(--chip-bg);
}

.exam-selected-mark {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--chip-text);
  background: var(--card);
  border: 1px solid var(--primary);
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
}

/* 問題一覧の凡例 */
.exam-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0.875rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.exam-legend li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.exam-legend .is-sample {
  min-width: 28px;
  min-height: 28px;
  font-size: 0.6875rem;
  pointer-events: none;
}

/* 120問のグリッド。375px では 6 列（44px + 隙間で収まる）。
   広い画面では auto-fill で自然に列数が増える。横スクロールは発生させない。 */
.exam-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.375rem;
}

@media (min-width: 420px) {
  .exam-grid {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  }
}

.exam-grid-btn {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

/* 回答済みは背景で示す */
.exam-grid-btn.answered {
  background: var(--chip-bg);
  color: var(--chip-text);
  border-color: var(--chip-text);
}

/* 見直しは旗で示す（色ではなく記号） */
.exam-grid-btn.flagged {
  border-style: dashed;
}

.exam-grid-flag {
  position: absolute;
  top: -2px;
  right: 2px;
  font-size: 0.625rem;
  line-height: 1;
  color: var(--review);
}

/* 表示中は太枠で示す */
.exam-grid-btn.current {
  border-width: 3px;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--chip-bg);
}

.exam-grid-btn:focus-visible,
.exam-choice:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

#exam-q-text:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

/* ===== 模試の結果画面（exam-result.html）と履歴 ===== */

.exam-guide {
  margin: 0.875rem 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.exam-guide-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border);
}

.exam-guide-row:last-child {
  border-bottom: none;
}

.exam-guide-diff {
  background: var(--chip-bg);
  color: var(--chip-text);
}

/* 正解 / 誤答 / 未回答。数字と語を並べ、色だけに頼らない */
.exam-tally {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0.875rem 0;
}

.exam-tally li {
  flex: 1;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.5rem 0.25rem;
}

.exam-tally-label {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
}

.exam-tally-value {
  display: block;
  font-weight: 700;
  font-size: 1rem;
}

/* 章別・カテゴリ別は横長の表にせず縦カードで積む（375pxで横スクロールしない） */
.exam-stat-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.exam-stat {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.625rem 0.75rem;
}

.exam-stat-label {
  font-size: 0.875rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.exam-stat-numbers {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.exam-stat-score {
  font-size: 0.9375rem;
  font-weight: 700;
}

.exam-stat-rate {
  font-size: 0.875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.exam-stat-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--track);
  margin-top: 0.375rem;
  overflow: hidden;
}

.exam-stat-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
}

.exam-stat-sub {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.exam-low-title {
  margin-top: 1rem;
}

.exam-low-list {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  line-height: 2;
}

.exam-details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
}

.exam-details[open] > summary {
  margin-bottom: 0.625rem;
}

/* 解答一覧。初期状態はすべて閉じておき、開いたときだけ詳細を描く */
.exam-answer {
  border-bottom: 1px solid var(--border);
}

.exam-answer:last-child {
  border-bottom: none;
}

.exam-answer > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.25rem 0;
  cursor: pointer;
  font-size: 0.8125rem;
}

.exam-answer-no {
  flex-shrink: 0;
  font-weight: 700;
  min-width: 3.25rem;
}

.exam-answer-mark {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
}

.exam-answer-state {
  flex-shrink: 0;
  font-weight: 600;
  min-width: 3rem;
}

.exam-answer-snippet {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.exam-answer.is-correct .exam-answer-mark,
.exam-answer.is-correct .exam-answer-state { color: var(--correct); }
.exam-answer.is-wrong .exam-answer-mark,
.exam-answer.is-wrong .exam-answer-state { color: var(--wrong); }
.exam-answer.is-unanswered .exam-answer-mark,
.exam-answer.is-unanswered .exam-answer-state { color: var(--muted); }

.exam-answer-body {
  padding: 0.5rem 0 1rem;
}

.exam-choice-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.exam-choice-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
}

.exam-choice-row.is-answer {
  border-color: var(--correct);
  background: var(--correct-bg);
}

.exam-choice-row.is-mine:not(.is-answer) {
  border-color: var(--wrong);
  background: var(--wrong-bg);
}

.exam-choice-kana {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--primary);
}

.exam-choice-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.exam-choice-tags {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.exam-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.0625rem 0.5rem;
  white-space: nowrap;
}

.exam-tag-mine {
  background: var(--chip-bg);
  color: var(--chip-text);
}

.exam-tag-answer {
  background: var(--correct);
  color: #fff;
}

.exam-answer-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

.exam-answer-facts dt {
  font-weight: 600;
  color: var(--muted);
}

.exam-answer-facts dd {
  margin: 0;
}

.exam-review-msg,
.exam-retry-msg {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--chip-text);
}

.exam-retry-msg {
  color: var(--wrong);
}

/* 開始画面の「最近の模試」 */
.exam-history {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.exam-history-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.125rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}

.exam-history-when {
  font-weight: 600;
}

.exam-history-score {
  grid-row: span 2;
  align-self: center;
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.exam-history-sub {
  color: var(--muted);
  font-size: 0.75rem;
}

.exam-answer > summary:focus-visible,
.exam-details > summary:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* ===== 公開ページ共通（フッター・説明文・規約ページ） ===== */

.site-footer p {
  margin: 0 0 0.5rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.footer-links a {
  color: var(--muted);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.footer-copy {
  margin-bottom: 0;
}

/* ホームの「学習記録はこのブラウザに保存されます」 */
.storage-note {
  margin: 0.875rem 0 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.8;
}

/* プライバシー・利用規約の本文 */
.doc h2 {
  font-size: 0.9375rem;
  margin: 1.25rem 0 0.5rem;
}

.doc h2:first-child {
  margin-top: 0;
}

.doc p {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.9;
}

.doc ul {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.9;
}

.doc a {
  color: var(--primary);
}

/* ホームのサブタイトル補足 */
.subtitle-sub {
  color: var(--muted);
  font-size: 0.75rem;
  margin: 0.25rem 0 0;
}