/* ============================================================
   都立高校過去問ドリル
   デジタル庁デザインシステム(DADS)の指針に準拠:
   - 本文16px以上 / 14px未満は使わない
   - 行間150%以上
   - タップ領域44px以上
   - コントラスト比 4.5:1 以上
   ============================================================ */

:root {
  --fg: #1a1a1c;
  --fg-sub: #47515c;
  --bg: #ffffff;
  --bg-sub: #f2f5f8;
  --line: #d3d9df;

  --accent: #1a4fa0;
  --accent-fg: #ffffff;
  --accent-soft: #e8f0fb;

  --correct: #1f7a4d;
  --correct-soft: #e4f4ec;
  --wrong: #b3301f;
  --wrong-soft: #fceae7;
  --hint: #8a5a00;
  --hint-soft: #fdf3e0;

  --radius: 12px;
  --radius-sm: 8px;
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e9edf1;
    --fg-sub: #b6bfc9;
    --bg: #14181d;
    --bg-sub: #1e242b;
    --line: #38424d;

    --accent: #8ab4f8;
    --accent-fg: #10151b;
    --accent-soft: #1d2a3b;

    --correct: #7ddba4;
    --correct-soft: #16281f;
    --wrong: #ff9b8c;
    --wrong-soft: #2d1a17;
    --hint: #f0c674;
    --hint-soft: #2a2317;
  }
}

* {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

.drill {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px calc(32px + env(safe-area-inset-bottom));
}

/* ---------- ヘッダー ---------- */

.drill-header {
  margin-bottom: 20px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--fg-sub);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.drill-header h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.4;
}

.lead {
  margin: 0 0 20px;
  color: var(--fg-sub);
}

/* ---------- ホーム: 年度・教科切替 ---------- */

.year-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 10px;
}

.year-link {
  display: flex;
  min-width: 0;
  min-height: var(--tap);
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg-sub);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.year-link.is-current {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.subject-switch {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 16px;
}

.subject-link {
  display: flex;
  min-width: 0;
  min-height: var(--tap);
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-sub);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.subject-link.is-current {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
}

h2 {
  margin: 24px 0 12px;
  font-size: 1.125rem;
  line-height: 1.5;
}

/* ---------- ボタン共通 ---------- */

.btn {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-top: 12px;
  padding: 12px 16px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}

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

.btn-primary.is-disabled,
.btn-primary:disabled {
  background: var(--bg-sub);
  border-color: var(--line);
  color: var(--fg-sub);
  cursor: default;
}

.btn-quiet {
  background: transparent;
  border-color: var(--line);
  color: var(--fg-sub);
}

.btn-hint {
  background: var(--hint-soft);
  border-color: var(--hint);
  color: var(--hint);
}

.btn-review {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-ok {
  background: var(--correct-soft);
  border-color: var(--correct);
  color: var(--correct);
}

.btn-ng {
  background: var(--wrong-soft);
  border-color: var(--wrong);
  color: var(--wrong);
}

.btn:focus-visible,
.key:focus-visible,
.choice:focus-visible,
.course:focus-visible,
.back:focus-visible,
.field-btn:focus-visible,
.year-link:focus-visible,
.subject-link:focus-visible,
.passage > summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- ホーム: 記録 ---------- */

.record {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--bg-sub);
}

.record h2 {
  margin-top: 0;
}

.progress {
  height: 10px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
}

.record-line {
  margin: 10px 0 0;
  font-size: 0.9375rem;
}

/* ---------- ホーム: コース ---------- */

.courses {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.course {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.course:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.course-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.course-label {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
}

.course-note {
  color: var(--fg-sub);
  font-size: 0.875rem;
  line-height: 1.5;
}

.course-meta {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-sub);
  color: var(--fg-sub);
  font-size: 0.875rem;
  font-weight: 700;
}

/* ---------- 出題画面 ---------- */

.drill-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.back {
  min-height: var(--tap);
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.remain {
  color: var(--fg-sub);
  font-size: 0.9375rem;
  font-weight: 700;
}

.dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}

.dot.is-current {
  background: var(--accent);
  transform: scale(1.3);
}

.dot.is-correct {
  background: var(--correct);
}

.dot.is-wrong {
  background: var(--wrong);
}

.dot.is-done {
  background: var(--fg-sub);
}

/* ---------- 問題カード ---------- */

.card {
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.card-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--fg-sub);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
}

.card-topic {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

.card-prompt {
  margin-bottom: 16px;
  font-size: 1.0625rem;
  line-height: 1.9;
}

/* 長い数式は横スクロール（ページ全体を崩さない） */
.card-prompt mjx-container {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.card-hard {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--hint-soft);
  color: var(--hint);
  font-size: 0.9375rem;
}

/* 原本の資料を見ないと解けない問題の案内 */
.card-original {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--hint-soft);
  color: var(--hint);
  font-size: 0.9375rem;
}

.card-original a {
  margin-inline-start: 4px;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* ---------- 選択肢 ---------- */

.choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.choice-body {
  min-width: 0;
  overflow-wrap: anywhere;
}

.choice-mark {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-sub);
  color: var(--fg-sub);
  font-weight: 700;
  line-height: 28px;
  text-align: center;
}

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

.choice.is-selected .choice-mark {
  background: var(--accent);
  color: var(--accent-fg);
}

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

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

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

.choice:disabled {
  cursor: default;
}

/* ---------- 数値入力 ---------- */

.numeric {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.375rem;
  font-weight: 700;
}

.field-affix {
  color: var(--fg-sub);
  font-size: 1.0625rem;
}

.field-value {
  min-width: 72px;
  padding: 8px 12px;
  border-bottom: 3px solid var(--accent);
  text-align: center;
}

.field-value.is-empty {
  border-bottom-color: var(--line);
  color: var(--fg-sub);
}

.field-row {
  display: flex;
  gap: 10px;
}

.field-btn {
  flex: 1;
  min-height: var(--tap);
  padding: 4px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.field-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* 分数 */
.fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  align-self: flex-start;
}

.frac-part {
  min-width: 64px;
  min-height: var(--tap);
  padding: 4px 12px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 1.375rem;
  font-weight: 700;
  cursor: pointer;
}

.frac-part.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.frac-bar {
  display: block;
  width: 84px;
  height: 3px;
  background: var(--fg);
}

/* 根号 */
.radical {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
}

.rad-part {
  min-width: 56px;
  min-height: var(--tap);
  padding: 4px 10px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 1.375rem;
  font-weight: 700;
  cursor: pointer;
}

.rad-part.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.rad-sign {
  font-size: 1.5rem;
}

.rad-in {
  border-top: 3px solid var(--fg);
}

/* テンキー */
.keypad {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.key {
  min-height: 52px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.key:active {
  background: var(--accent-soft);
}

.key-op {
  background: var(--bg-sub);
}

/* ---------- ヒント ---------- */

.hint {
  margin: 14px 0 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--hint-soft);
  color: var(--hint);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ---------- 作図・証明 ---------- */

.written-note {
  margin: 0 0 12px;
  color: var(--fg-sub);
}

.selfcheck {
  margin: 0 0 12px;
  padding-left: 1.3em;
}

.selfcheck li {
  margin-bottom: 6px;
  line-height: 1.7;
}

.self-buttons {
  display: flex;
  gap: 10px;
}

.self-buttons .btn {
  margin-top: 12px;
}

/* ---------- フィードバック ---------- */

.feedback {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--bg-sub);
}

.verdict {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 700;
}

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

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

.verdict.is-self {
  color: var(--fg-sub);
  font-size: 1.0625rem;
}

.correct-answer {
  margin: 0 0 12px;
  font-size: 1.0625rem;
}

.explain {
  margin-bottom: 14px;
  line-height: 1.9;
}

.review-link {
  display: inline-block;
  min-height: var(--tap);
  padding: 10px 0;
  color: var(--accent);
  font-weight: 700;
  line-height: 1.6;
}

/* ---------- 結果 ---------- */

.result {
  padding: 20px 16px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  text-align: center;
}

.result h2 {
  margin-top: 0;
}

.score {
  margin: 0 0 8px;
  font-size: 1.125rem;
}

.score strong {
  font-size: 2rem;
  color: var(--accent);
}

.cheer {
  margin: 0;
  line-height: 1.8;
}

/* ---------- フッター ---------- */

.drill-footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--fg-sub);
  font-size: 0.875rem;
  line-height: 1.7;
}

.drill-footer p {
  margin: 0 0 6px;
}

.drill-footer a {
  color: var(--accent);
}

/* ---------- 小さい画面 ---------- */

@media (max-width: 420px) {
  .drill {
    padding-right: 12px;
    padding-left: 12px;
  }

  .subject-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .card,
  .feedback {
    padding: 14px;
  }

  .keypad {
    grid-template-columns: repeat(5, 1fr);
  }

}

@media (max-width: 340px) {
  .self-buttons {
    flex-direction: column;
    gap: 0;
  }
}

/* ---------- 図 ---------- */

.figure {
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.figure-body {
  /* 図が画面より大きいときは横スクロールさせ、縦につぶさない */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.figure-svg {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
  /* 線も文字も currentColor なので、ライト/ダーク両方で読める */
  color: var(--fg);
}

.figure figcaption {
  margin-top: 8px;
  color: var(--fg-sub);
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: center;
}

/* SVG内の文字 */
.fig-label {
  fill: currentColor;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
}

.fig-label.is-on {
  fill: var(--accent);
}

.fig-num {
  fill: currentColor;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  text-anchor: middle;
}

.fig-axis {
  fill: currentColor;
  font-size: 11px;
  font-family: inherit;
  opacity: 0.85;
}

.fig-grid {
  stroke: currentColor;
  stroke-width: 0.5;
  opacity: 0.18;
}

/* 入力のしかたの案内（分数・ルートも入力できることを伝える） */
.input-help {
  margin: 4px 0 0;
  color: var(--fg-sub);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ---------- 記号（ア・イ…）で答える欄 ---------- */
/* 理科・社会の「①②の組み合わせを選ぶ」問題に使う */

.sign-input {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.choice-help {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-sub);
}

.choice-help p {
  margin: 0 0 4px;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.choice-help p:last-child {
  margin-bottom: 0;
}

.sign-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sign-label {
  min-width: 5.5em;
  font-weight: 700;
}

.sign-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sign-btn {
  min-width: var(--tap);
  min-height: var(--tap);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
}

.sign-btn.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.sign-btn.is-answer {
  border-color: var(--correct);
  background: var(--correct-soft);
  color: var(--correct);
}

.sign-btn.is-wrong {
  border-color: var(--wrong);
  background: var(--wrong-soft);
  color: var(--wrong);
}

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

/* ---------- 図の中のデータ表 ---------- */

.figure-table {
  width: 100%;
  margin: 0 auto 8px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.figure-table th,
.figure-table td {
  padding: 6px 10px;
  border: 1px solid var(--line);
  line-height: 1.6;
  text-align: center;
}

.figure-table th {
  background: var(--bg-sub);
  font-weight: 700;
}

.figure-subcaption {
  margin: 0 0 4px;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: left;
}

/* ---------- 英語の読む資料（台本・本文・Eメール） ---------- */

.script {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  text-align: left;
}

.script-title {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  font-weight: 700;
}

.script-note {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-sub);
  color: var(--fg-sub);
  font-size: 0.875rem;
  line-height: 1.7;
}

.script p {
  margin: 0 0 10px;
  line-height: 1.9;
}

.script p:last-child {
  margin-bottom: 0;
}

/* 会話文は「話し手」と「せりふ」を横にならべる */
.say {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  line-height: 1.9;
}

.say .who {
  flex-shrink: 0;
  min-width: 4.2em;
  font-weight: 700;
}

.say .line {
  flex: 1;
}

/* 英作文で書く場所 */
.blank-area {
  display: block;
  padding: 14px 12px;
  border: 2px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg-sub);
  text-align: center;
}

/* ---------- 大問の共通本文（長文・対話文） ---------- */

.passage {
  margin-bottom: 16px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  overflow: hidden;
}

.passage > summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  padding: 10px 14px;
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.passage > summary::-webkit-details-marker {
  display: none;
}

.passage > summary::after {
  content: "▼";
  margin-left: auto;
  font-size: 0.75em;
}

.passage[open] > summary::after {
  content: "▲";
}

.passage-note {
  margin: 0;
  padding: 0 14px 10px;
  color: var(--fg-sub);
  font-size: 0.875rem;
  line-height: 1.7;
}

.passage-body {
  max-height: 44vh;
  padding: 0 14px 12px;
  overflow-y: auto;
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- 文字で答える欄（国語の漢字など） ---------- */

.text-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.text-field {
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 1.375rem;
  line-height: 1.6;
  text-align: center;
}

.text-field:focus {
  border-color: var(--accent);
  outline: 3px solid var(--accent-soft);
}

.text-field:disabled {
  background: var(--bg-sub);
  color: var(--fg-sub);
}

/* ---------- 原本から取り込んだ図・写真 ---------- */

.fig-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.fig-grid figure,
figure.photo {
  margin: 0;
}

.fig-grid img,
figure.photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}

figure.photo {
  margin-bottom: 10px;
}

figure.photo figcaption {
  margin-top: 4px;
  color: var(--fg-sub);
  font-size: 0.875rem;
  text-align: center;
}

/* 後半で定義した複合UIは、狭い画面では縦に並べて横はみ出しを防ぐ */
@media (max-width: 420px) {
  .sign-row {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  .sign-label {
    min-width: 0;
  }

  .sign-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(44px, 1fr));
    width: 100%;
  }

  .fig-grid {
    grid-template-columns: 1fr;
  }

  .passage-body {
    max-height: none;
    overflow-y: visible;
  }
}