:root {
  --bg: #fbfaf7; --fg: #1d2330; --muted: #5d6675; --line: #d9dce3; --card: #ffffff;
  --accent: #1f5fbf; --accent-fg: #ffffff; --ok: #1a7f4b; --ng: #b3261e;
  --hl-line: rgba(255, 200, 0, 0.28); --hl-pass: rgba(255, 170, 0, 0.55); --hl-col: rgba(80, 160, 255, 0.18);
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14171d; --fg: #e7e9ee; --muted: #a2abba; --line: #343a46; --card: #1c2029; --accent: #7fb0ff; --accent-fg: #0d1524; --ok: #5fd39a; --ng: #ff8a80; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; line-height: 1.8; }
a { color: var(--accent); }
main { max-width: 52rem; margin: 0 auto; padding: 1rem 1.1rem 3rem; }
h1 { font-size: 1.6rem; line-height: 1.4; margin: 1rem 0 0.6rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 0.6rem; padding-bottom: 0.2rem; border-bottom: 2px solid var(--line); }
h3 { font-size: 1.05rem; margin: 1.4rem 0 0.4rem; }
code { font-family: var(--mono); background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 0 0.3em; }
pre { font-family: var(--mono); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 0.8rem 1rem; overflow-x: auto; line-height: 1.6; }
pre code { border: none; padding: 0; background: none; }
.site-header { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: baseline; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--card); }
.site-header .brand { font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--fg); }
.site-header nav { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.92rem; }
.site-footer { border-top: 1px solid var(--line); padding: 1.2rem 1.1rem 2rem; font-size: 0.85rem; color: var(--muted); text-align: center; }
.breadcrumbs { font-size: 0.85rem; color: var(--muted); }
.meta, .note { color: var(--muted); font-size: 0.9rem; }
.lead { font-size: 1.1rem; }
.button { display: inline-block; background: var(--accent); color: var(--accent-fg); border: none; border-radius: 6px; padding: 0.5rem 1.1rem; font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.button:disabled { opacity: 0.45; cursor: not-allowed; }
.chip { border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 999px; padding: 0.2rem 0.9rem; cursor: pointer; font-size: 0.9rem; }
.chip[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.8rem; }
.cards a { display: block; height: 100%; padding: 0.8rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--fg); }
.cards a span { display: block; font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
.cards a em { display: block; font-style: normal; font-size: 0.82rem; color: var(--accent); margin-top: 0.3rem; }
.links { padding-left: 1.2rem; }
.problem-list { columns: 2; padding-left: 2rem; }
.problem-list span { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
@media (max-width: 40rem) { .problem-list { columns: 1; } }
.worked { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 1rem; margin: 0.8rem 0; }

/* プログラム（行番号つき） */
.giji-code, .giji-trace { font-family: var(--mono); font-size: 0.9rem; }
.giji-code { border-collapse: collapse; width: 100%; background: var(--card); border: 1px solid var(--line); }
.giji-code td { padding: 0 0.6rem; white-space: pre; line-height: 1.7; }
.giji-code td.no { text-align: right; color: var(--muted); user-select: none; width: 1%; border-right: 1px solid var(--line); }
.giji-code tr.focus td { background: var(--hl-line); }
.giji-code tr.focus td.no { color: var(--fg); font-weight: 700; }
.giji-code.plain td { padding-left: 0.9rem; }
.giji-code .marker { color: var(--muted); }
.giji-code .blank { font-weight: 700; }
.giji-code .blank.filled { background: rgba(26, 127, 75, 0.2); border-radius: 3px; padding: 0 0.2em; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-hint { margin: 0 0 0.2rem; font-size: 0.78rem; color: var(--muted); text-align: right; }
@media (max-width: 40rem) {
  .giji-code, .giji-trace { font-size: 0.78rem; }
  .giji-code td { padding: 0 0.4rem; line-height: 1.65; }
  .giji-trace th, .giji-trace td { padding: 0.15rem 0.4rem; }
}
@media (min-height: 44rem) {
  .problem.js .program { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 0.3rem 0; max-height: 55vh; overflow: auto; }
}

/* トレース表 */
.giji-trace-wrap { max-height: 32rem; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.giji-trace { border-collapse: collapse; width: 100%; }
.giji-trace th, .giji-trace td { padding: 0.15rem 0.6rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.giji-trace th { position: sticky; top: 0; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.giji-trace .focus-col { background: var(--hl-col); }
.giji-trace tr.focus-line td { background: var(--hl-line); }
.giji-trace tr.focus-pass td { background: var(--hl-pass); font-weight: 700; }
.giji-trace tr.focus-pass td.focus-col { outline: 2px solid #e07800; }
.giji-trace td.changed { font-weight: 700; }
.giji-trace td.empty { color: var(--muted); opacity: 0.5; }

/* 設問 */
.question { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 0.2rem 1rem 1rem; margin: 1.2rem 0; }
.question h2 { border: none; margin: 0.8rem 0 0.2rem; }
.question fieldset { border: none; padding: 0; margin: 0.4rem 0 0.8rem; }
.question legend { font-size: 0.85rem; color: var(--muted); }
.question label { display: block; padding: 0.3rem 0.5rem; border-radius: 6px; cursor: pointer; }
.question label span { font-family: var(--mono); }
.question label.is-answer { background: rgba(26, 127, 75, 0.16); }
.question label.is-chosen-wrong { background: rgba(179, 38, 30, 0.14); }
.verdict { font-weight: 700; font-size: 1.05rem; }
.is-correct .verdict { color: var(--ok); }
.is-wrong .verdict { color: var(--ng); }
.result ul { padding-left: 1.2rem; }
.score { font-weight: 700; }
.focus-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.5rem; flex-wrap: wrap; }

.mode-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.8rem 0 0.4rem; }
.mode-switch .note { flex-basis: 100%; margin: 0; }
.exam-lead { margin-top: 1rem; }
.exam-heading { font-weight: 700; margin: 1rem 0 0.3rem; }
#mode-exam p, #mode-exam label span, #mode-exam .combo { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; }
#mode-exam .giji-code, #mode-exam label span, #mode-exam .combo td { font-family: var(--mono); }
.combo { border-collapse: collapse; margin: 0.3rem 0 0.8rem; }
.combo th, .combo td { border: 1px solid var(--line); padding: 0.25rem 0.8rem; text-align: left; white-space: nowrap; }
.combo thead th { text-align: center; background: var(--bg); }
.combo tr.is-answer td, .combo tr.is-answer th { background: rgba(26, 127, 75, 0.16); }
.combo tr.is-chosen-wrong td, .combo tr.is-chosen-wrong th { background: rgba(179, 38, 30, 0.14); }
.problem.js .noscript-only { display: none; }

.badge { display: inline-block; font-size: 0.75rem; font-weight: 700; line-height: 1.5; padding: 0 0.5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); vertical-align: 0.1em; white-space: nowrap; }
.badge.pace-standard { border-color: var(--accent); color: var(--accent); }
.cards a .badge { display: inline-block; }
.hints { margin: 0.6rem 0 1rem; }
.hint { border: 1px solid var(--line); border-radius: 6px; background: var(--card); margin: 0.4rem 0; padding: 0.3rem 0.8rem; }
.hint summary { cursor: pointer; font-size: 0.92rem; color: var(--accent); }
.hint .note { margin: 0.4rem 0; }
.hint .giji-trace-wrap { margin-bottom: 0.5rem; }

/* トップ：今日の1問 */
.daily h1 { font-size: 1.25rem; margin: 0.4rem 0 0; }
.daily-lead { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--muted); }
.daily .question { margin: 0.4rem 0 0; padding: 0.6rem 0.9rem 0.9rem; }
.daily-meta, .daily-call { margin: 0 0 0.3rem; font-size: 0.9rem; }
.daily .prompt { margin: 0.6rem 0 0.4rem; font-weight: 700; }
.daily-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 0.7rem; }
.daily-choices label { border: 1px solid var(--line); margin: 0; }
.daily-choices label.is-answer { background: rgba(26, 127, 75, 0.16); }
.daily-choices label.is-chosen-wrong { background: rgba(179, 38, 30, 0.14); }
.daily .after-answer { display: none; }
.daily .answered .after-answer { display: block; }
.daily-next { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.level-entry { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 0.6rem; margin: 1.2rem 0 0; }
.level-entry a { display: block; text-align: center; padding: 0.7rem 0.4rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--fg); }
.level-entry a strong { display: block; font-size: 1.05rem; }
.level-entry a span { font-size: 0.8rem; color: var(--muted); }

/* JavaScript が動くときだけ、解答前の内容や選んでいない形式を隠す（動かない環境では全部読める） */
.problem.js .locked,
.problem.js .after-answer,
.problem.js .review { display: none; }
.problem.js .answered .after-answer { display: block; }
.problem.js[data-mode="practice"] #mode-exam,
.problem.js[data-mode="exam"] #mode-practice,
.problem.js[data-mode="exam"] .practice-only { display: none; }
.problem.js[data-mode="practice"].all-done .review,
.problem.js[data-mode="exam"].exam-done .review { display: block; }