/* 検定ドリル ─ 夜に読むことが多いので暗い面を主、明るい面を従にしている */

:root {
  --accent: #8aa4ff;

  --bg: #10121a;
  --bg-raised: #191c27;
  --bg-sunken: #0b0d13;
  --line: #2a2f3e;
  --line-soft: #1f2431;
  --fg: #e7e9f0;
  --fg-dim: #a2a8bb;
  --fg-faint: #6f7689;

  --ok: #5fd39a;
  --ok-bg: #12291f;
  --ng: #ff8a8a;
  --ng-bg: #2c1618;

  --radius: 12px;
  --gutter: 20px;
  --measure: 46rem;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #fbfbfd;
    --bg-raised: #ffffff;
    --bg-sunken: #f1f2f6;
    --line: #dfe2ea;
    --line-soft: #ebedf2;
    --fg: #1b1e28;
    --fg-dim: #545b6e;
    --fg-faint: #858ca0;
    --accent: #3d5bd9;
    --ok: #12855c;
    --ok-bg: #e6f7ef;
    --ng: #c0343c;
    --ng-bg: #fdecec;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.85;
  /* 本文が和文なので行間を広めに取り、両端揃えはしない(和文では字間が荒れる) */
  text-align: left;
}

/* ───────── 上部バー ───────── */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  padding: max(env(safe-area-inset-top), 0px) 8px 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.bar-title {
  flex: 1;
  margin: 0;
  padding: 0 4px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 52px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-btn {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fg-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.bar-btn:hover { background: var(--bg-raised); color: var(--fg); }

/* ───────── 版面 ───────── */

.view {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 24px var(--gutter) max(64px, calc(env(safe-area-inset-bottom) + 48px));
  outline: none;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--fg-faint);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
}

h2.page-title { margin: 0 0 20px; font-size: 1.45rem; line-height: 1.45; }

.section-head {
  margin: 30px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--fg-dim);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ───────── 一覧の行 ───────── */

.list { display: flex; flex-direction: column; gap: 8px; }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.row:hover { border-color: var(--line); }
.row-main { flex: 1; min-width: 0; }
/* 行の中身は span で組んでいるので、明示的に積み上げる */
.row-title, .row-sub, .hit-line { display: block; }
.row-title { font-weight: 600; line-height: 1.5; }
.row-sub { margin-top: 2px; color: var(--fg-faint); font-size: .82rem; line-height: 1.5; }
.row-mark { flex: none; color: var(--fg-faint); font-size: .8rem; font-variant-numeric: tabular-nums; }
.row-mark.is-ok { color: var(--ok); }
.row-mark.is-ng { color: var(--ng); }

/* ───────── ボタン ───────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: #0b0d13;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn:disabled { opacity: .45; cursor: default; }
.btn-quiet {
  background: var(--bg-raised);
  border-color: var(--line);
  color: var(--fg);
}
.btn-block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn-row .btn { flex: 1 1 12rem; }

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ───────── 検索 ───────── */

.search {
  width: 100%;
  min-height: 46px;
  margin-bottom: 18px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-sunken);
  color: var(--fg);
  font: inherit;
}
.search::placeholder { color: var(--fg-faint); }

.hit-line {
  margin-top: 4px;
  color: var(--fg-dim);
  font-size: .82rem;
  line-height: 1.6;
}
.hit-line mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; }

/* ───────── ノート本文 ───────── */

.note { overflow-wrap: anywhere; }
.note h1 { margin: 0 0 18px; font-size: 1.5rem; line-height: 1.45; }
.note h2 {
  margin: 34px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1.15rem;
  line-height: 1.5;
}
.note h3 { margin: 26px 0 8px; font-size: 1rem; }
.note p { margin: 0 0 1.1em; }
.note ul, .note ol { margin: 0 0 1.1em; padding-left: 1.5em; }
.note li { margin: .3em 0; }
.note li > ul, .note li > ol { margin: .3em 0; }
.note a { color: var(--accent); text-underline-offset: 3px; }
.note strong { font-weight: 700; }
.note mark {
  padding: 1px 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: inherit;
}
.note code {
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--bg-sunken);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
}
.note pre {
  margin: 0 0 1.1em;
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-sunken);
  line-height: 1.7;
}
.note pre code { padding: 0; background: none; }
.note blockquote {
  margin: 0 0 1.1em;
  padding: 2px 16px;
  border-left: 3px solid var(--accent);
  color: var(--fg-dim);
}
.note blockquote p:last-child { margin-bottom: 0; }
.note hr { margin: 30px 0; border: 0; border-top: 1px solid var(--line-soft); }
.note img { max-width: 100%; height: auto; border-radius: 8px; }

/* 列の多い表はスマホでは収まりきらない。
   スクロールできる方向にだけ影が出るので、切れていることが分かる。 */
.table-wrap {
  margin: 0 0 1.1em;
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--bg), transparent) left / 20px 100% no-repeat,
    linear-gradient(to left, var(--bg), transparent) right / 20px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .28), transparent) left / 10px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .28), transparent) right / 10px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.note table { border-collapse: collapse; min-width: 100%; font-size: .93rem; }
.note th, .note td {
  padding: 9px 14px;
  border: 1px solid var(--line-soft);
  line-height: 1.6;
  /* 文章が入る列は折り返させる。狭すぎて縦一列にならないよう下限だけ置く */
  min-width: 5em;
}
.note th { background: var(--bg-sunken); font-weight: 600; text-align: left; white-space: nowrap; }
.note td { font-variant-numeric: tabular-nums; }
/* 数値だけの列(右寄せ指定)は折り返さない */
.note td[style*="right"] { white-space: nowrap; min-width: 0; }

/* 目次 */
.toc {
  margin: 0 0 26px;
  padding: 12px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-raised);
  font-size: .9rem;
}
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin: .2em 0; }
.toc .lv3 { padding-left: 1em; }
.toc a { color: var(--fg-dim); text-decoration: none; }
.toc a:hover { color: var(--accent); }

/* ───────── 演習 ───────── */

.q-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--fg-faint);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.q-progress .track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-sunken);
  overflow: hidden;
}
.q-progress .fill { height: 100%; background: var(--accent); transition: width .25s ease; }

.q-text {
  margin: 0 0 22px;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.75;
}

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

.choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: inherit;
  font: inherit;
  line-height: 1.7;
  text-align: left;
  cursor: pointer;
}
.choice:hover:not(:disabled) { border-color: var(--accent); }
.choice:disabled { cursor: default; }
.choice .key {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--bg-sunken);
  color: var(--fg-dim);
  font-size: .82rem;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}
.choice.is-right { border-color: var(--ok); background: var(--ok-bg); }
.choice.is-right .key { background: var(--ok); color: #06140d; }
.choice.is-wrong { border-color: var(--ng); background: var(--ng-bg); }
.choice.is-wrong .key { background: var(--ng); color: #2c0e10; }
.choice.is-faded { opacity: .5; }

.verdict {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.verdict-head { font-weight: 700; }
.verdict.ok .verdict-head { color: var(--ok); }
.verdict.ng .verdict-head { color: var(--ng); }
.verdict p { margin: 8px 0 0; color: var(--fg-dim); font-size: .95rem; }

/* ───────── 結果 ───────── */

.score {
  margin: 8px 0 6px;
  font-size: 3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.score small { color: var(--fg-faint); font-size: 1rem; font-weight: 600; }

/* ───────── 補助 ───────── */

.empty {
  padding: 40px 20px;
  color: var(--fg-faint);
  text-align: center;
}

.note-line { margin: 18px 0 0; color: var(--fg-faint); font-size: .84rem; line-height: 1.7; }

.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 50;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: .88rem;
  box-shadow: 0 6px 24px rgb(0 0 0 / .3);
}

@media (max-width: 480px) {
  :root { --gutter: 16px; }
  body { font-size: 15.5px; }
  .score { font-size: 2.5rem; }
}