@charset "UTF-8";

/* ===== デザイントークン ===== */

:root {
  color-scheme: light dark;

  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-alt: #eef1f5;
  --text: #1a1d21;
  --text-weak: #5b6470;
  --border: #d7dce3;

  --accent: #1b4d89;
  --accent-text: #ffffff;
  --accent-weak: #e7eff8;

  --correct: #12734a;
  --correct-weak: #e2f4ea;
  --wrong: #b3261e;
  --wrong-weak: #fbe6e4;
  --bookmark: #a86a00;

  /* アプリバーはライトでは面で塗り、ダークでは境界線で示すので、色を直接書かずトークンにする */
  --appbar-bg: var(--accent);
  --appbar-text: var(--accent-text);
  --appbar-border: transparent;

  --radius: 12px;
  --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);

  /* 端末の安全領域（iPhone のホームバーなど） */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ダークの値は次の2箇所で使う。
     1. 端末がダークで、明示的にライトを選んでいないとき
     2. 表示テーマでダークを選んだとき
   片方だけ直すとずれるので、必ず両方そろえて変更すること。 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171a;
    --surface: #1d2126;
    --surface-alt: #262b31;
    --text: #e8eaed;
    --text-weak: #9aa3ad;
    --border: #363c44;

    --accent: #6aa5e6;
    --accent-text: #10151b;
    --accent-weak: #1e2c3c;

    --correct: #59c99a;
    --correct-weak: #1b3129;
    --wrong: #f08a83;
    --wrong-weak: #35211f;
    --bookmark: #e8b33a;

    --appbar-bg: var(--surface);
    --appbar-text: var(--text);
    --appbar-border: var(--border);

    --shadow: none;
  }
}

:root[data-theme="dark"] {
  --bg: #14171a;
  --surface: #1d2126;
  --surface-alt: #262b31;
  --text: #e8eaed;
  --text-weak: #9aa3ad;
  --border: #363c44;

  --accent: #6aa5e6;
  --accent-text: #10151b;
  --accent-weak: #1e2c3c;

  --correct: #59c99a;
  --correct-weak: #1b3129;
  --wrong: #f08a83;
  --wrong-weak: #35211f;
  --bookmark: #e8b33a;

  --appbar-bg: var(--surface);
  --appbar-text: var(--text);
  --appbar-border: var(--border);

  --shadow: none;
}

/* 手動で選んだときは、フォーム部品やスクロールバーの既定色もそろえる */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ===== ベース ===== */

* { box-sizing: border-box; }

/* display を指定したクラスは [hidden] のUA規則に打ち勝ってしまうので、
   hidden 属性が必ず効くようにここで固定する。
   これがないと非表示のはずの下部バーが画面下のタップを奪う。 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP",
               "Yu Gothic UI", "Meiryo", sans-serif;
  font-size: 16px;
  /* 日本語の長文を読みやすく */
  line-height: 1.85;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

sub, sup { font-size: .72em; line-height: 0; }

/* 画面には出さず、支援技術にだけ伝える */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* 図の拡大や確認ダイアログを開いている間、背面が動かないようにする */
body.is-locked { overflow: hidden; }

/* ===== アプリバー ===== */

/* 背景は全幅のまま、中身だけ本文と同じ 720px に絞る */
.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 10px 0;
  border-bottom: 1px solid var(--appbar-border);
  background: var(--appbar-bg);
  color: var(--appbar-text);
}

/* 左右の余白は内側に持たせる。そうしないと main（max-width:720px + padding:14px）と
   左端がそろわない。 */
.appbar__inner {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 14px;
}

/* 演習画面では button，プライバシーポリシーなどの固定ページでは a で使う。
   [hidden] { display: none !important } を先に置いてあるので，
   display を指定しても hidden 属性は効いたままになる。 */
/* タップ領域は 44px 確保しつつ、上下の負マージンでバーの高さは元のまま保つ */
.appbar__back {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -6px 0 -6px -12px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

/* ライトではバーの背景が --accent なので、輪郭は文字色で描く */
.appbar__back:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

.appbar__title {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ホームだけサイト名＋説明の2本立てにする。
   説明は小さくして1行に収める（.appbar__title は nowrap + ellipsis のため）。 */
.appbar__tagline {
  font-size: 12px;
  font-weight: 400;
  opacity: .85;
}

.appbar__meta {
  flex: none;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  opacity: .9;
}

/* 残り時間がわずかになったとき。--wrong の面に --surface の文字を載せると
   ライト（濃紺のバー）でもダーク（暗い面のバー）でも読める。 */
.appbar__meta.is-warning {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--wrong);
  color: var(--surface);
  font-weight: 700;
  opacity: 1;
}

/* ===== レイアウト ===== */

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 14px calc(24px + var(--safe-bottom));
}

/* 下部バーがあるときは本文がその下に隠れないようにする */
body.has-actionbar main {
  padding-bottom: calc(96px + var(--safe-bottom));
}

.heading {
  margin: 28px 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-weak);
}

/* 見出しの右に補助ボタンを並べる */
.heading--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.heading--row h2 { font: inherit; color: inherit; }

.heading:first-child { margin-top: 8px; }

/* ===== カード ===== */

.card {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.card--resume {
  margin-bottom: 16px;
  border: 2px solid var(--accent);
}

.card__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .04em;
}

.card__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}

.card__note {
  font-size: 14px;
  color: var(--text-weak);
}

/* 演習中に「戻る」で抜けたことを伝える。無言でホームに戻ると中断が伝わらない */
.card__flash {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.card__actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.card__actions--stack { flex-direction: column; }

/* まだ何も解いていない間の案内。「0 / – / 0」の統計を出しても意味がない */
.guide {
  padding: 16px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-weak);
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}

/* ===== 成績サマリ ===== */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 8px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.stats__value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.stats__label {
  font-size: 11px;
  color: var(--text-weak);
  text-align: center;
}

/* ===== フォーム ===== */

.field { margin-bottom: 14px; }

.field--inline {
  display: flex;
  align-items: center;
  gap: 12px;
}

.field--inline .field__control { flex: 1; }

.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-weak);
}

.field--inline .field__label { margin-bottom: 0; }

.field__control {
  width: 100%;
  /* iOS で選択時に画面が拡大しないよう 16px 以上を保つ */
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
}

/* 選択肢がなく、決まった値を示すだけの欄 */
.field__static {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
  font-size: 15px;
  line-height: 1.5;
}

.field__note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-weak);
}

/* ===== セグメント（採点タイミング） ===== */

.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: var(--surface-alt);
}

.segmented label { flex: 1; }

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented span {
  display: block;
  padding: 9px 4px;
  border-radius: 7px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

.segmented input:checked + span {
  background: var(--surface);
  font-weight: 600;
  box-shadow: var(--shadow);
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* フッターに置くぶん、本文の設定欄より控えめにする */
.segmented--small span {
  padding: 7px 4px;
  font-size: 13px;
}

/* ===== 演習モード ===== */

.modes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.mode {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.mode__title {
  font-size: 16px;
  font-weight: 600;
}

.mode__note {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-weak);
  line-height: 1.6;
}

/* ===== チップ（年度選択） ===== */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.chips:empty { display: none; }

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: block;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
}

.chip input:checked + span {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
  font-weight: 600;
}

.chip input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== 折りたたみの年度選択（ランダム演習） ===== */

/* 年度別と同じチップが10個並ぶとホームが無駄に長くなるので、
   ランダム側は既定で畳み、対象年度を1行のサマリで示す。 */
.picker {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.picker__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}

/* Safari の開閉マーカーを消す */
.picker__summary::-webkit-details-marker { display: none; }

.picker__summary::after {
  content: "›";
  margin-left: auto;
  color: var(--text-weak);
  font-size: 20px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .15s ease;
}

.picker[open] .picker__summary::after { transform: rotate(-90deg); }

.picker__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 10px;
}

.picker__label {
  flex: none;
  color: var(--text-weak);
}

.picker__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.picker__body {
  padding: 0 14px 12px;
  border-top: 1px solid var(--border);
}

.picker__actions {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.picker__body .chips { margin-top: 12px; margin-bottom: 0; }

/* ===== 任意設定（チェックボックス1行） ===== */

.option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 48px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}

.option input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
}

.option__body { min-width: 0; }

.option__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.option__note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-weak);
}

.option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-weak);
}

.option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== ボタン ===== */

.btn {
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  /* タップ時の遅延ハイライトを避ける */
  -webkit-tap-highlight-color: transparent;
}

.btn--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-text);
}

.btn--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--text-weak);
}

/* opacity で薄くすると文字が読めなくなる。
   「回答する」が押せないことが「まず選択肢を選べ」という唯一の手がかりなので、
   無効時は減光ではなく専用の配色にする。--primary より後に置いて詳細度で勝たせる。 */
.btn:disabled,
.btn--primary:disabled {
  border-color: var(--border);
  background: var(--surface-alt);
  color: var(--text-weak);
  cursor: default;
  opacity: 1;
}

/* 控えめなボタンは無効でも面を出さない（文字色だけで示す） */
.btn--quiet:disabled {
  border-color: transparent;
  background: transparent;
}

.btn--block { display: block; width: 100%; }
.btn--grow { flex: 1; }

/* 年度の一括選択のような補助操作用 */
.btn--small {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== 進捗 ===== */

.progress { margin-bottom: 18px; }

.progress__bar {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-alt);
  overflow: hidden;
}

.progress__bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width .2s ease;
}

.progress__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.progress__text {
  font-size: 13px;
  color: var(--text-weak);
  font-variant-numeric: tabular-nums;
}

.progress__accuracy {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ===== 問題番号ナビゲータ ===== */

/* 30問の「まとめて採点」で第25問から第3問へ戻るのに「前へ」を22回押すのは無理があるので、
   マークシートの一覧と同じメタファーで、番号から直接飛べるようにする。折りたたみは .picker と共用。 */
.navigator__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  padding: 12px 14px 14px;
}

.navigator__cell {
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* まとめて採点のときは正誤を出せないので、回答済みかどうかだけを示す */
.navigator__cell.is-answered {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
  font-weight: 600;
}

.navigator__cell.is-correct {
  border-color: var(--correct);
  background: var(--correct-weak);
  color: var(--correct);
  font-weight: 600;
}

.navigator__cell.is-wrong {
  border-color: var(--wrong);
  background: var(--wrong-weak);
  color: var(--wrong);
  font-weight: 600;
}

.navigator__cell.is-current {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.navigator__cell:disabled {
  background: var(--surface-alt);
  color: var(--text-weak);
  cursor: default;
}

.navigator__cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.navigator__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 0 14px 14px;
  font-size: 12px;
  color: var(--text-weak);
}

.navigator__legend span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  vertical-align: 0;
}

.navigator__legend .is-answered::before { border-color: var(--accent); background: var(--accent-weak); }
.navigator__legend .is-correct::before { border-color: var(--correct); background: var(--correct-weak); }
.navigator__legend .is-wrong::before { border-color: var(--wrong); background: var(--wrong-weak); }
/* .navigator__cell:disabled と同じ見た目にする */
.navigator__legend .is-locked::before { background: var(--surface-alt); }

/* ===== 問題 ===== */

.question {
  padding: 18px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* 問題の見出し行。左に出典（年度・問番号）、右にブックマーク */
.question__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.question__number {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

/* ブックマーク。押しても本文は描き直さないので、見た目の切り替えはここだけで完結する。
   タップ領域を44px確保しつつ、負マージンで見出し行の高さは増やさない。 */
.bookmark {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin: -12px -8px -12px 0;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-weak);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.bookmark__mark {
  font-size: 19px;
  line-height: 1;
}

.bookmark[aria-pressed="true"] {
  color: var(--bookmark);
}

.bookmark:hover {
  background: var(--surface-alt);
}

.bookmark:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.question__text {
  font-size: 16px;
  line-height: 1.9;
}

/* 補足ブロック */

.block { margin-top: 16px; }

.block--heading {
  font-weight: 600;
  font-size: 15px;
}

.block--heading + .block { margin-top: 4px; }

.block--list {
  padding-left: 2px;
}

.block--list li {
  margin-bottom: 4px;
  line-height: 1.8;
}

.block--list.is-bullet li {
  padding-left: 1.2em;
  text-indent: -1.2em;
}

.block--list.is-bullet li::before {
  content: "・";
}

.block--pre {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--surface-alt);
  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Noto Sans Mono CJK JP", monospace;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
}

/* 本文中の空欄（原本では枠で囲まれている） */
.blank {
  display: inline-block;
  min-width: 2.4em;
  padding: 0 .4em;
  border: 1px solid currentColor;
  font-style: normal;
  text-align: center;
}

/* 図表 */

.figure { margin: 16px 0 0; }

.figure__button {
  display: block;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  /* 図はスキャン画像なので、暗所でも白地のまま見せる */
  background: #ffffff;
  cursor: zoom-in;
}

.figure__button img {
  display: block;
  width: 100%;
  height: auto;
}

.figure__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.figure__caption {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-weak);
  text-align: center;
}

.figure__hint {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-weak);
  text-align: center;
}

/* ===== 選択肢 ===== */

.choices {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

/* 「10 / 20 / 100 / 1,000」のような極端に短い選択肢は、
   幅に応じて自動で折り返す。390px なら2列、広ければ4列まで並ぶ。 */
.choices--inline {
  grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));
}

/* two-column は画像の選択肢（グラフ・論理回路）を含むので、
   スマホ幅で2列にすると図が小さくなりすぎる。広い画面でだけ2列にする。 */
@media (min-width: 480px) {
  .choices--two-column { grid-template-columns: 1fr 1fr; }
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.choice__label {
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}

.choice__text { flex: 1; }

/* SQL 文のように，行の並びそのものが選択肢の意味をもつ場合 */
.choices--pre .choice__text {
  min-width: 0;
  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Noto Sans Mono CJK JP", monospace;
  font-size: 13px;
  white-space: pre;
  overflow-x: auto;
}

/* 論理回路やグラフのように、選択肢そのものが図の場合 */
.choice__image {
  flex: 1;
  padding: 6px;
  border-radius: 6px;
  /* スキャン画像なので、暗所でも白地のまま見せる */
  background: #ffffff;
}

.choice__image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.choice.is-selected {
  border-color: var(--accent);
  background: var(--accent-weak);
}

.choice.is-correct {
  border-color: var(--correct);
  background: var(--correct-weak);
}

.choice.is-wrong {
  border-color: var(--wrong);
  background: var(--wrong-weak);
}

/* 正誤を色だけで伝えると色覚特性のある人に届かないので、記号も添える */
.choice.is-correct::after,
.choice.is-wrong::after {
  flex: none;
  align-self: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.choice.is-correct::after { content: "○"; color: var(--correct); }
.choice.is-wrong::after { content: "×"; color: var(--wrong); }

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

.choice:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== 判定 ===== */

.verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 600;
  /* 採点時にここへスクロールする。固定ヘッダに潜り込まないよう余白をとる */
  scroll-margin-top: 64px;
}

.verdict--correct { background: var(--correct-weak); color: var(--correct); }
.verdict--wrong { background: var(--wrong-weak); color: var(--wrong); }

.verdict__note {
  font-weight: 400;
  font-size: 14px;
}

/* ===== 解説 ===== */

.explanation {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--surface-alt);
  font-size: 15px;
  line-height: 1.85;
}

.explanation p + p { margin-top: .7em; }

.explanation__title {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-weak);
}

.explanation--empty {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-weak);
}

/* ===== キーボード操作の案内 ===== */

/* タッチ端末では意味がないので、マウス・キーボードの環境にだけ出す */
.kbdhint { display: none; }

@media (hover: hover) and (pointer: fine) {
  .kbdhint {
    display: block;
    margin-top: 14px;
    font-size: 12px;
    line-height: 2;
    color: var(--text-weak);
    text-align: center;
  }
}

.kbdhint kbd {
  display: inline-block;
  min-width: 20px;
  margin: 0 2px;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  font-family: inherit;
  font-size: 11px;
  text-align: center;
}

/* ===== 出典 ===== */

/* IPA は問題ごとの出典明記を条件にしている。演習中はフッタが隠れるので，
   問題の末尾に必ず出す。読むものではないので目立たせない。 */
.question__source {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-weak);
}

.question__source-note { white-space: nowrap; }

/* ===== 下部アクションバー ===== */

/* 背景と境界線は全幅に伸ばし、ボタンだけ本文と同じ 720px に収める。
   広い画面で帯が浮島にならないようにするため。 */
.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 10px 0 calc(10px + var(--safe-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.actionbar__inner {
  display: flex;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 14px;
}


/* ===== 結果 ===== */

.score {
  padding: 24px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}

.score__rate {
  font-size: 44px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--accent);
}

/* 午前試験の合格基準は 60%。達したかどうかが一目で分かるようにする */
.score__rate.is-pass { color: var(--correct); }
.score__rate.is-fail { color: var(--wrong); }

.score__detail {
  margin-top: 4px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.score__pass {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-weak);
}

.score__time {
  margin-top: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-weak);
}

.score__time .is-timeup { color: var(--wrong); font-weight: 600; }

.score__label {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-weak);
}

.score + .card__actions { margin: 16px 0 0; }

/* ===== 解答一覧の絞り込み ===== */

.listfilter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.listfilter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 4px 4px 0;
  font-size: 14px;
  cursor: pointer;
}

.listfilter__toggle input { width: 18px; height: 18px; }

/* 正解の行だけを隠す。data-correct は結果画面の描画時に付ける */
.answerlist.is-wrong-only li[data-correct="1"] { display: none; }

/* ===== 解答一覧 ===== */

/* minmax(0, 1fr) が要。グリッドの列は既定で min-content 未満に縮まないので、
   中の .answerlist__title（white-space: nowrap）の全文幅まで列が広がり、
   ビューポート幅に関係なく結果画面が横にはみ出していた */
.answerlist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.answerlist__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.answerlist__mark {
  flex: none;
  width: 24px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.answerlist__mark.is-correct { color: var(--correct); }
.answerlist__mark.is-wrong { color: var(--wrong); }

.answerlist__body { flex: 1; min-width: 0; }

/* span のままだと display:inline で overflow / text-overflow が効かず、
   折り返さない長い行が縮まずに親を押し広げる（.answerlist__body の min-width:0 も無効になる）。
   結果画面だけ横にはみ出していた原因。.option__title / .option__note と同じく block にする */
.answerlist__title {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.answerlist__note {
  display: block;
  font-size: 12px;
  color: var(--text-weak);
}

.answerlist__chev { flex: none; color: var(--text-weak); }

.answerlist__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== 履歴 ===== */

.history { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }

/* 押しても何も起きない行なので、カード（影付き）ではなく一覧の行として見せる。
   影を付けると「押せそう」に見えて行き止まりになる。 */
.history__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.history__body { flex: 1; min-width: 0; }

/* .answerlist__title と同じ理由で block にする（span のままだと ellipsis が効かない） */
.history__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history__note {
  display: block;
  font-size: 12px;
  color: var(--text-weak);
}

.history__score {
  flex: none;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.empty {
  padding: 20px 14px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-weak);
  font-size: 14px;
  text-align: center;
}

/* ===== 確認ダイアログ ===== */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  /* スマホでは下から、広い画面では中央に出す */
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, .45);
}

.sheet__panel {
  width: 100%;
  max-width: 480px;
  padding: 20px 16px calc(16px + var(--safe-bottom));
  border-radius: 16px 16px 0 0;
  background: var(--surface);
}

@media (min-width: 480px) {
  .sheet { align-items: center; padding: 16px; }
  .sheet__panel { border-radius: var(--radius); padding-bottom: 16px; }
}

.sheet__title {
  font-size: 17px;
  font-weight: 600;
}

.sheet__body {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-weak);
}

.sheet__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

/* ===== 図の拡大表示 ===== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, .82);
  overflow: auto;
}

.lightbox img {
  /* 小さい図も拡大され、大きい図は横スクロールで読める */
  min-width: min(100%, 640px);
  max-width: none;
  height: auto;
  background: #ffffff;
  border-radius: 6px;
}

.lightbox__close {
  position: fixed;
  top: 10px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #111;
  font-size: 26px;
  line-height: 44px;
  cursor: pointer;
}

/* ===== 固定ページ（プライバシーポリシー・運営者情報） ===== */

.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 14px 8px;
}

.doc__section { margin-bottom: 28px; }

.doc h2 {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}

.doc p {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.9;
}

/* ベースで ul, ol の list-style を消しているので、固定ページでは戻す */
.doc ul {
  margin: 0 0 10px;
  padding-left: 1.3em;
  list-style: disc;
  font-size: 14px;
  line-height: 1.9;
}

.doc li { margin-bottom: 6px; }

.doc a {
  color: var(--accent);
  text-underline-offset: 2px;
}

.doc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.8;
}

.doc__table th,
.doc__table td {
  padding: 10px 12px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.doc__table th {
  width: 34%;
  background: var(--surface-alt);
  font-weight: 600;
  white-space: nowrap;
}

/* 連絡先。JS が動けば mailto リンクに置き換わる（js/doc.js） */
.doc__contact {
  font-size: 15px;
  font-weight: 600;
}

.mail { word-break: break-all; }

/* 未記入のまま公開してしまわないよう、はっきり目立たせる */
.doc__todo {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--wrong);
  border-radius: 6px;
  background: var(--wrong-weak);
  color: var(--wrong);
  font-size: 13px;
  font-weight: 600;
}

/* ===== フッタ ===== */

.colophon {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 14px calc(28px + var(--safe-bottom));
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-weak);
  text-align: center;
}

.colophon__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* リンク自体が上下のパディングを持つので、ここでの間隔は詰めてよい */
  gap: 0 8px;
  margin-top: 4px;
  font-size: 12px;
}

/* 文字の高さ（20px）のままだとタップ領域が小さすぎて、隣のリンクと押し間違える。
   見た目は変えずに当たり判定だけ44pxにする */
.colophon__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--text-weak);
  text-underline-offset: 2px;
}

/* テーマ設定。演習と関係ない設定なので本文ではなくここに置く。
   フッター全体は中央寄せだが、この行だけは左のラベルと右の切り替えで組む */
.colophon__theme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 340px;
  margin: 14px auto 0;
  text-align: left;
}

.colophon__theme-label {
  flex: none;
  font-size: 12px;
}

.colophon__theme .segmented {
  flex: 1;
  min-width: 0;
}

body.has-actionbar .colophon { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}