/* ============================================================================
 * 住民税・所得税・国保・JASSO 判定シミュレーター
 * ==========================================================================*/

/* ---------- デザイントークン ----------
 * 配色は3状態。
 *   端末に合わせる … data-theme を付けない（@media prefers-color-scheme が効く）
 *   ライト固定     … data-theme="light"
 *   ダーク固定     … data-theme="dark"
 * ダークの値は @media 側と :root[data-theme="dark"] 側の2か所に書く必要がある
 * （CSSではメディアクエリと属性セレクタを1つの規則にまとめられないため）。
 * 2か所が食い違わないよう test/audit.js の D-4 で機械的に突き合わせている。
 */
:root {
  color-scheme: light;
  --bg: #eef1f5;
  --bg-soft: #f7f9fb;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --line: #dbe2ea;
  --line-soft: #e9eef3;

  --ink: #141d2b;
  --ink-2: #4c5a6e;
  --ink-3: #5c6875;   /* 補足文にも使うので WCAG AA 4.5:1 を満たす濃さにする */

  --brand: #1b5b8f;
  --brand-strong: #0e3f68;
  --brand-soft: #e7f0f8;
  --on-accent: #ffffff;   /* --brand などの上に載せる文字色 */

  --kin: #6b46a8;          /* 均等割 */
  --kin-soft: #f0eafa;
  --sho: #10688f;          /* 所得割 */
  --sho-soft: #e5f2f8;

  --good: #0c7a52;
  --good-soft: #e4f5ec;
  --warn: #9a6400;
  --warn-soft: #fdf2da;
  --bad: #b0322a;
  --bad-soft: #fdeceb;

  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 7px;
  --shadow: 0 1px 2px rgba(15, 32, 51, .05), 0 4px 16px rgba(15, 32, 51, .05);
  --shadow-lg: 0 2px 6px rgba(15, 32, 51, .07), 0 12px 32px rgba(15, 32, 51, .09);
}

/* 端末がダーク（明示的にライトを選んでいないとき） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e141c;
    --bg-soft: #141c26;
    --surface: #18212c;
    --surface-2: #1e2833;
    --line: #2c3846;
    --line-soft: #232e3a;
    --ink: #e6ecf3;
    --ink-2: #aebbcb;
    --ink-3: #8695a8;
    --brand: #6fb1e4;
    --brand-strong: #9ccff4;
    --brand-soft: #172c3e;
    --on-accent: #0e141c;
    --kin: #bda2ee;
    --kin-soft: #251d3a;
    --sho: #6dc0e3;
    --sho-soft: #12303c;
    --good: #5bd2a5;
    --good-soft: #102f24;
    --warn: #e8bc64;
    --warn-soft: #322810;
    --bad: #f59790;
    --bad-soft: #351b1a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .35);
  }
}
/* ダークを明示的に選んだとき（端末がライトでも効かせる） */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e141c;
  --bg-soft: #141c26;
  --surface: #18212c;
  --surface-2: #1e2833;
  --line: #2c3846;
  --line-soft: #232e3a;
  --ink: #e6ecf3;
  --ink-2: #aebbcb;
  --ink-3: #8695a8;
  --brand: #6fb1e4;
  --brand-strong: #9ccff4;
  --brand-soft: #172c3e;
  --on-accent: #0e141c;
  --kin: #bda2ee;
  --kin-soft: #251d3a;
  --sho: #6dc0e3;
  --sho-soft: #12303c;
  --good: #5bd2a5;
  --good-soft: #102f24;
  --warn: #e8bc64;
  --warn-soft: #322810;
  --bad: #f59790;
  --bad-soft: #351b1a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .35);
}

/* ---------- ベース ----------
 * 本文フォントは端末に入っているものだけで組む（外部フォントは読み込まない）。
 * 日本語は Hiragino Sans（Mac）／Meiryo・BIZ UDPGothic（Windows）を優先し、
 * 欧文・数字は Segoe UI 系が当たるようにしている。金額の桁が揃うよう
 * 数字には等幅数字（tabular-nums）を効かせる。
 */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", Meiryo, "BIZ UDPGothic", "Yu Gothic UI", sans-serif;
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: .015em;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "palt" 1;
  font-variant-numeric: tabular-nums;
  text-spacing-trim: trim-start;
  /* 日本語を文節の切れ目で折り返す。「軽減割合」が「軽／減割合」のように
     語の途中で切れるのを防ぐ。対応していないブラウザでは従来どおり折り返す。 */
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: anywhere;
}
/* 金額や税率は途中で折り返さない */
.num, td.num, th.num, .kpi .value, .sbox .sv, .readout { word-break: keep-all; overflow-wrap: normal; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
b, strong { font-weight: 700; }
h1, h2, h3, h4 { line-height: 1.5; letter-spacing: .01em; }
:where(a, button, input, select, summary):focus-visible {
  outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 3px;
}

/* ---------- ヘッダ ---------- */
.site-header {
  /* グラデーションの下に不透明色を敷く。グラデーションが効かない環境でも
     白文字とのコントラストが確保され、コントラスト測定も正しく行える。 */
  background-color: #14568b;
  background-image: linear-gradient(140deg, #0d3255 0%, #14568b 55%, #1d6ea8 100%);
  color: #fff; padding: 26px 0 24px;
}
.headtop { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.headtop h1 { flex: 1 1 340px; }
.site-header h1 { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.4; letter-spacing: .01em; }

/* 配色の切替（端末に合わせる／ライト／ダーク） */
.themeswitch { display: flex; gap: 0; flex: none; border-radius: 999px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); }
.themeswitch button {
  font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: 0;
  padding: 7px 13px; min-height: 36px; border: 0; background: transparent;
  color: rgba(255, 255, 255, .85); cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.themeswitch button + button { border-left: 1px solid rgba(255, 255, 255, .22); }
.themeswitch button:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.themeswitch button[aria-pressed="true"] { background: #fff; color: #0d3255; }
.site-header .lead { margin: 0 0 12px; font-size: .95rem; color: rgba(255, 255, 255, .9); max-width: 76ch; }
.site-header .version {
  margin: 0; font-size: .78rem; color: rgba(255, 255, 255, .78);
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.site-header .chip {
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  padding: 2px 10px; border-radius: 999px; font-size: .74rem;
}

/* ---------- ステップナビ（上から下へ進むための現在地表示） ---------- */
.stepnav {
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
/* 中身は JS が作るので、空のまま表示 →あとから中身が入る、の順になる。
   先に高さを取っておかないと、入った瞬間に下の全部が押し下げられる（画面のガタつき）。
   この 52px / 48px は実測値で、test/browser-check.js が実際の高さと突き合わせている。 */
.stepnav .wrap { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-height: 52px; }
.stepnav .wrap::-webkit-scrollbar { display: none; }
/* 未選択のステップも読めるようにする（WCAG AA 4.5:1）。
   薄いグレーの丸に白文字だと1.3:1しかなく、番号が事実上見えなかった。 */
.stepnav a {
  padding: 12px 14px; font-size: .84rem; font-weight: 700; color: var(--ink-2);
  border-bottom: 3px solid transparent; white-space: nowrap; text-decoration: none;
  display: flex; align-items: center; gap: 6px; transition: color .15s, background .15s;
}
.stepnav a b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink-2); font-size: .72rem; flex: none;
}
.stepnav a:hover { color: var(--brand); background: var(--bg-soft); }
.stepnav a.on { color: var(--brand-strong); border-bottom-color: var(--brand); }
.stepnav a.on b { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }
:root[data-theme="dark"] .stepnav a.on b,
:root:not([data-theme="light"]) .stepnav a.on b { color: #0e141c; }

/* ---------- STEP セクション ---------- */
.step { scroll-margin-top: 60px; }
.stepno {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: var(--on-accent);
  font-size: .85rem; font-weight: 800; flex: none;
}
.card > h2 .stepno + span, .card > h2 .stepno ~ * { font-weight: inherit; }
.reference { margin-top: 34px; }
.refhead {
  font-size: 1.02rem; color: var(--ink-2); margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 2px solid var(--line);
}
details.guide { padding: 0; }
details.guide > summary {
  cursor: pointer; padding: 15px 20px; font-size: .97rem; color: var(--brand-strong);
  list-style: none; display: flex; align-items: center; gap: 9px;
}
details.guide > summary::-webkit-details-marker { display: none; }
details.guide > summary::before { content: "▶"; font-size: .72em; color: var(--brand); transition: transform .15s; }
details.guide[open] > summary::before { transform: rotate(90deg); }
details.guide[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 14px; }
details.guide > *:not(summary) { padding-left: 20px; padding-right: 20px; }
details.guide > *:last-child { padding-bottom: 16px; }

/* ---------- カード ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.card > h2 {
  margin: 0 0 16px; font-size: 1.08rem; color: var(--brand-strong); letter-spacing: .01em;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.card > h2::before {
  content: ""; width: 4px; height: 1.05em; border-radius: 2px; background: var(--brand); flex: none;
}
.card h3 { font-size: .98rem; margin: 22px 0 10px; color: var(--ink); }
.card h3:first-of-type { margin-top: 6px; }
.card > p:first-of-type { margin-top: 0; }

/* ---------- フォーム ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px 18px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ---------- 入力欄は「1項目1行」 ----------
 * 3列に並べると、ラベル・入力欄・説明の高さが揃わず項目の切れ目が分からない。
 * 対になる欄（短期の収入と経費など）が列またぎで分断されるのも読みにくい。
 * そこで1行につき1項目とし、ラベルと入力欄を横に、説明をその下に置く。
 * 狭い画面では従来どおりラベルの下に入力欄を積む。
 */
@media (min-width: 641px) {
  .grid.rows { grid-template-columns: 1fr; gap: 0; }
  /* 説明文は1つとは限らない（年分の欄は2つ、控除の欄は説明＋ロック理由）。
     マスに名前を付けて割り当てると、2つ目以降が同じマスに入って文字が重なる。
     そこでラベルと入力欄だけ1行目に固定し、説明文は「横いっぱい」とだけ指定して
     2行目・3行目…へ自動で送る。いくつあっても重ならない。 */
  .grid.rows > .field {
    display: grid;
    grid-template-columns: minmax(220px, 22rem) minmax(140px, 15rem);
    align-items: center;
    gap: 3px 20px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .grid.rows > .field:last-child { border-bottom: 0; }
  .grid.rows > .field > .lbl,
  .grid.rows > .field > span:first-child { grid-column: 1; grid-row: 1; }
  .grid.rows > .field > input,
  .grid.rows > .field > select,
  .grid.rows > .field > .readout { grid-column: 2; grid-row: 1; }
  .grid.rows > .field > .hint,
  .grid.rows > .field > .lockmsg { grid-column: 1 / -1; max-width: 62rem; }
  /* チェックボックスの行は左にチェック、右に文章のまま */
  .grid.rows > .field.checkline {
    display: flex; grid-template-columns: none; grid-template-areas: none;
    align-items: flex-start;
  }
}
.field { display: flex; flex-direction: column; gap: 5px; font-size: .87rem; min-width: 0; }
.field > span { font-weight: 700; color: var(--ink-2); line-height: 1.5; }
input[type="number"], input[type="text"], select {
  font: inherit; font-size: .95rem; padding: 9px 11px; width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); transition: border-color .12s, box-shadow .12s;
}
select { cursor: pointer; }
input:hover, select:hover { border-color: var(--ink-3); }
input:focus, select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
input[type="number"], input.money { text-align: right; font-variant-numeric: tabular-nums; }
input.money::placeholder { font-size: .82em; text-align: right; }
.hint { font-size: .755rem; color: var(--ink-3); font-weight: 400; line-height: 1.55; }
.hint b { color: var(--ink-2); }

.checkline { flex-direction: row; align-items: flex-start; gap: 9px; }
.checkline input { margin: 5px 0 0; flex: none; width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.checkline .ctext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.checkline .lbl, .checkline > span { font-weight: 600; color: var(--ink-2); font-size: .87rem; line-height: 1.5; cursor: pointer; }
.checkline.big > span { font-size: .96rem; font-weight: 700; color: var(--ink); }
.field > .lbl { font-weight: 700; color: var(--ink-2); }

details.sub {
  margin-top: 16px; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  padding: 12px 16px; background: var(--surface-2);
}
details.sub > summary {
  cursor: pointer; font-weight: 700; color: var(--brand); font-size: .89rem; list-style: none;
  display: flex; align-items: center; gap: 7px;
}
details.sub > summary::-webkit-details-marker { display: none; }
details.sub > summary::before { content: "▶"; font-size: .7em; transition: transform .15s; }
details.sub[open] > summary::before { transform: rotate(90deg); }
details.sub[open] > summary { margin-bottom: 14px; }

fieldset.group {
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  padding: 14px 16px 16px; margin: 0 0 16px; background: var(--bg-soft);
  min-width: 0;   /* grid の中で fieldset が縮まないブラウザ対策 */
}
fieldset.group > legend {
  font-weight: 700; color: var(--brand-strong); padding: 0 8px; font-size: .92rem;
  line-height: 1.5;
}
fieldset.group > .hint:first-of-type { margin-top: 0; }

/* 折りたたまずに常時見せる小見出しブロック（生命保険料控除など） */
.subblock {
  margin-top: 16px; padding: 13px 15px 15px;
  border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface-2);
}
.subblock > h3 {
  margin: 0 0 4px; font-size: .89rem; font-weight: 700; color: var(--brand);
  display: flex; align-items: center; gap: 7px;
}
.subblock > h3::before {
  content: ""; width: 3px; height: 1em; border-radius: 2px; background: var(--brand); flex: none;
}
.subblock > .hint { margin: 0 0 10px; }

.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 22px 0 4px; }
button.primary, button.ghost {
  font: inherit; font-weight: 700; padding: 12px 28px; border-radius: var(--r-sm);
  cursor: pointer; border: 1px solid transparent; transition: background .15s, box-shadow .15s, transform .06s;
}
button.primary { background: var(--brand); color: var(--on-accent); box-shadow: var(--shadow); }
button.primary:hover { background: var(--brand-strong); }
button.primary:active { transform: translateY(1px); }
button.ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
button.ghost:hover { background: var(--surface-2); border-color: var(--ink-3); }
.field.inline { flex-direction: row; align-items: center; gap: 9px; }
.field.inline > span { white-space: nowrap; font-size: .84rem; }
.field.inline select { width: auto; }

.hidden { display: none !important; }
.empty { color: var(--ink-3); padding: 60px 20px; text-align: center; font-size: .95rem; }

/* ---------- 注記 ---------- */
.note {
  background: var(--surface-2); border-left: 3px solid var(--brand);
  padding: 14px 18px; margin: 16px 0; border-radius: 0 var(--r-md) var(--r-md) 0;
}
.note h3 { margin: 0 0 6px; color: var(--brand-strong); font-size: .95rem; }
.note p { margin: 6px 0; font-size: .89rem; }
.note ul { margin: 6px 0; padding-left: 1.35em; font-size: .89rem; }
.note li { margin: 3px 0; }
.warn {
  background: var(--warn-soft); border-left: 3px solid var(--warn);
  padding: 12px 16px; border-radius: 0 var(--r-md) var(--r-md) 0; font-size: .86rem; margin: 14px 0;
}
.formula {
  background: var(--brand-soft); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 15px 18px; margin: 14px 0;
  font-size: .93rem; line-height: 2.05;
}
.formula b { color: var(--brand-strong); }
.muted { color: var(--ink-3); font-size: .85em; }

/* ---------- 人ごとの計算（JASSOの支給額算定基準額） ----------
 * 「項目 × 人」の1枚の表にすると、1人分の計算を追うのに目が列を行き来する。
 * 人ごとに1つの計算にして、上から下へ読めば1人分が終わる形にしている。
 * 画面が広いときは横に並べ、狭いときは自動で縦に積まれる。 */
.jcalc {
  display: grid; gap: 14px; margin: 14px 0;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.jperson {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 13px 15px 6px;
}
.jperson h4 {
  margin: 0 0 8px; font-size: .93rem; color: var(--brand-strong);
  padding-bottom: 7px; border-bottom: 2px solid var(--line);
}
.jperson table.detail { width: 100%; min-width: 0; margin: 0; }
.jperson table.detail th {
  font-weight: 400; color: var(--ink-2); padding: 6px 0; text-align: left;
  border-bottom: 1px solid var(--line-soft); line-height: 1.6;
}
.jperson table.detail td {
  padding: 6px 0; text-align: right; font-weight: 700; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
}
.jperson table.detail tr.sum th, .jperson table.detail tr.sum td {
  border-top: 2px solid var(--brand); border-bottom: 0;
  color: var(--brand-strong); padding-top: 9px;
}
.jperson table.detail tr.sum th { font-weight: 700; }
.jperson table.detail tr.sum td { font-size: 1.12em; }
/* 全員の合計。ここが判定に使われる数字なので、いちばん目立たせる */
.jsum {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 14px; margin: 0 0 14px;
  background: var(--brand); color: var(--on-accent);
  border-radius: var(--r-md); padding: 13px 17px;
}
.jsum b { font-size: 1.35rem; }

/* ---------- テーブル ---------- */
.tablewrap { overflow-x: auto; margin: 14px 0; border-radius: var(--r-md); border: 1px solid var(--line); }
table.compare { border-collapse: collapse; width: 100%; font-size: .855rem; min-width: 620px; background: var(--surface); }
table.compare th, table.compare td {
  border-bottom: 1px solid var(--line-soft); padding: 10px 13px; text-align: left; vertical-align: top;
}
table.compare tr:last-child th, table.compare tr:last-child td { border-bottom: 0; }
table.compare thead th { background: var(--surface-2); color: var(--brand-strong); font-weight: 700; border-bottom: 1px solid var(--line); }
table.compare tbody th { background: var(--bg-soft); width: 16%; font-weight: 700; color: var(--ink-2); }
table.compare th.c1 { background: var(--kin-soft) !important; color: var(--kin) !important; }
table.compare th.c2 { background: var(--sho-soft) !important; color: var(--sho) !important; }
table.compare td.good { background: var(--good-soft); }
table.compare td.bad { background: var(--bad-soft); }
/* 金額は右揃え・等幅数字にして桁を揃える。
   table.detail にはあったが table.compare になく、要約表の金額が左揃えで
   桁の比較ができなかった。 */
table.compare td.num, table.compare th.num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 人ごとの税額表：名前が折り返して行が縦に伸びるのを防ぎ、
   役割（生計維持者A／学生本人）は名前の下に小さく添える。 */
table.compare.persons { min-width: 640px; }
table.compare.persons tbody th.who { width: 26%; line-height: 1.5; }
table.compare.persons th.who b { display: block; font-size: .95em; }
table.compare.persons th.who .role {
  display: block; font-size: .78em; font-weight: 400; color: var(--ink-3); margin-top: 1px;
}
table.compare.persons thead th { line-height: 1.4; vertical-align: bottom; }
table.compare.persons td { vertical-align: middle; }
/* 住民税の合計は一番見たい数字なので少し大きく */
table.compare.persons td.total { font-size: 1.06em; }
table.compare.persons td.total b { color: var(--brand-strong); }

table.compare tr.hl { outline: 2px solid var(--brand); outline-offset: -2px; }
table.compare tr.hl td, table.compare tr.hl th { background: var(--brand-soft); }
table.compare .plus { color: var(--bad); font-weight: 700; }
th.l7 { background: var(--good-soft) !important; color: var(--good) !important; }
th.l5 { background: var(--sho-soft) !important; color: var(--sho) !important; }
th.l2 { background: var(--warn-soft) !important; color: var(--warn) !important; }

table.detail { border-collapse: collapse; width: 100%; font-size: .855rem; margin: 10px 0; }
table.detail th, table.detail td { border-bottom: 1px solid var(--line-soft); padding: 7px 11px; text-align: left; }
table.detail th { font-weight: 600; color: var(--ink-2); }
table.detail td.num, table.detail th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.detail tbody tr:hover { background: var(--surface-2); }
table.detail tr.sum { background: var(--surface-2); }
table.detail tr.sum th, table.detail tr.sum td { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--brand); }
table.detail caption { text-align: left; font-weight: 700; color: var(--brand-strong); padding: 8px 0 4px; font-size: .92rem; }
table.detail .memo { color: var(--ink-3); font-size: .9em; font-weight: 400; }

/* ---------- 判定パネル ---------- */
.verdict { border-radius: var(--r-md); padding: 18px 22px; margin-bottom: 16px; border: 1px solid; }
.verdict h3 { margin: 0 0 4px; font-size: .95rem; font-weight: 700; }
.verdict p { margin: 5px 0; font-size: .89rem; }
.verdict .big { font-size: 1.55rem; font-weight: 800; display: block; margin: 6px 0; letter-spacing: -.01em; }
.v-good { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 35%, transparent); color: var(--good); }
.v-bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad); }
.v-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); }
.v-info { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 30%, transparent); color: var(--brand-strong); }
.verdict b { color: inherit; }

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.kpis.five { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.kpi {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 15px; position: relative; overflow: hidden;
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ink-3); }
.kpi .label { font-size: .755rem; color: var(--ink-3); font-weight: 700; display: block; letter-spacing: .02em; }
.kpi .value {
  font-size: 1.38rem; font-weight: 800; color: var(--brand-strong); display: block;
  margin-top: 3px; letter-spacing: -.015em; font-variant-numeric: tabular-nums;
}
.kpi .sub { font-size: .73rem; color: var(--ink-3); display: block; line-height: 1.45; margin-top: 2px; }
.kpi.kin { background: var(--kin-soft); border-color: color-mix(in srgb, var(--kin) 22%, transparent); }
.kpi.kin::before { background: var(--kin); }
.kpi.kin .value { color: var(--kin); }
.kpi.sho { background: var(--sho-soft); border-color: color-mix(in srgb, var(--sho) 22%, transparent); }
.kpi.sho::before { background: var(--sho); }
.kpi.sho .value { color: var(--sho); }
.kpi.exempt { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 25%, transparent); }
.kpi.exempt::before { background: var(--good); }
.kpi.exempt .value { color: var(--good); }

/* ---------- ゲージ（非課税ラインとの距離） ---------- */
.gauge { margin: 14px 0 18px; }
.gauge-head { display: flex; justify-content: space-between; font-size: .8rem; color: var(--ink-2); margin-bottom: 6px; font-weight: 700; }
.gauge-bar { position: relative; }
.gauge-track {
  height: 24px; border-radius: 12px; background: var(--surface-2);
  border: 1px solid var(--line); overflow: hidden;
}
.gauge-fill { height: 100%; border-radius: 12px 0 0 12px; transition: width .4s ease-out; }
.gauge-fill.under { background: linear-gradient(90deg, color-mix(in srgb, var(--good) 50%, transparent), var(--good)); }
.gauge-fill.over { background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 40%, transparent), var(--bad)); }
.gauge-line {
  position: absolute; top: -4px; height: 32px; width: 2px;
  background: var(--ink); opacity: .8; border-radius: 1px;
}
.gauge-label {
  position: absolute; top: 30px; font-size: .7rem; color: var(--ink-2);
  white-space: nowrap; font-weight: 700; transform: translateX(-50%);
}
.gauge-label.right { transform: translateX(-100%); }
.gauge-label.left { transform: none; }
.gauge-foot { font-size: .78rem; color: var(--ink-3); margin-top: 30px; }

/* ---------- 区分・軽減割合のステップ表示 ---------- */
.steps { display: flex; gap: 6px; margin: 14px 0; flex-wrap: wrap; }
.step2 {
  flex: 1 1 120px; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 11px 12px; background: var(--surface-2); text-align: center;
}
.step2 .t { font-size: .82rem; font-weight: 800; color: var(--ink-2); display: block; }
.step2 .d { font-size: .72rem; color: var(--ink-3); display: block; line-height: 1.4; margin-top: 2px; }
.step2.on { background: var(--good-soft); border-color: var(--good); box-shadow: 0 0 0 2px color-mix(in srgb, var(--good) 22%, transparent); }
.step2.on .t { color: var(--good); }
.step2.off { opacity: .55; }

/* ---------- STEP 1 の選択肢 ---------- */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.choice {
  border: 2px solid var(--line); border-radius: var(--r-md); padding: 14px 16px;
  background: var(--surface-2); cursor: pointer; display: block; transition: border-color .15s, background .15s;
}
.choice:hover { border-color: var(--brand); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .ct { font-weight: 800; font-size: .98rem; display: block; color: var(--ink-2); }
.choice .cd { font-size: .8rem; color: var(--ink-3); display: block; margin-top: 5px; line-height: 1.6; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.choice:has(input:checked) .ct { color: var(--brand-strong); }
.choice:has(input:checked) .ct::before { content: "✓ "; color: var(--brand); }

/* ---------- STEP 3 世帯にいる人 ---------- */
.member {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px 10px;
  margin-bottom: 10px; background: var(--surface-2);
}
.member.fixed { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 22%, transparent); }
.mhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.mtag {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 22px;
  border-radius: 999px; font-size: .72rem; font-weight: 800; color: var(--on-accent); background: var(--ink-2); padding: 0 8px;
}
.mtag.a { background: var(--brand); }
.mtag.b { background: var(--kin); }
.mtag.c { background: var(--sho); }
.mhead b { font-size: .95rem; }
.mtoggle { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-2); font-weight: 700; cursor: pointer; }
.mtoggle input { accent-color: var(--brand); }
.relsel { width: auto; min-width: 130px; padding: 5px 9px; font-size: .88rem; font-weight: 700; }
.mhead b.muted { font-weight: 700; font-size: .85rem; color: var(--ink-3); }
.jassotoggle {
  margin-top: 16px; padding: 12px 15px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface-2);
}
.del {
  margin-left: auto; border: 1px solid var(--line); background: var(--surface); color: var(--ink-3);
  border-radius: var(--r-sm); font: inherit; font-size: .78rem; padding: 4px 12px; cursor: pointer;
}
.del:hover { color: var(--bad); border-color: var(--bad); }
.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 14px; }
/* 国保の加入チェックは説明が長いので、狭い列に押し込めず1行まるごと使う */
.mgrid > .kokuholine { grid-column: 1 / -1; }
.kokuholine .hint { max-width: 78ch; }
.mgrid .field { font-size: .8rem; }
.mgrid input, .mgrid select { padding: 7px 9px; font-size: .9rem; }
.readout {
  padding: 7px 10px; border: 1px dashed var(--line); border-radius: var(--r-sm);
  background: var(--surface); text-align: right; font-variant-numeric: tabular-nums; font-weight: 700;
}
.mnote {
  margin-top: 9px; font-size: .8rem; line-height: 1.6; padding: 8px 11px;
  border-radius: var(--r-sm); background: var(--surface); border-left: 3px solid var(--line);
}
.mnote.ok { border-left-color: var(--good); }
.mnote.ng { border-left-color: var(--bad); }
.mnote.muted { color: var(--ink-3); }
/* 「入れ忘れていませんか」の注意（間違いとは言い切れないので警告色は控えめに） */
.mnote b.attn { color: var(--warn); }
.mnote:has(b.attn) { background: var(--warn-soft); border-left-color: var(--warn); }
.rosteradd { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.addrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px dashed var(--line); border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 10px; background: var(--bg-soft);
}
.addrow .hint { margin: 0; }
.detailtoggle {
  margin-top: 10px; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
}
.detailperson {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: 16px; background: var(--bg-soft);
}
.detailperson > h3 {
  margin: 0 0 12px; font-size: 1rem; color: var(--brand-strong);
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.card.sectionhead { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.card.sectionhead > h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: 6px; }
.card.sectionhead .hint { margin: 0; }
button.small { padding: 7px 14px; font-size: .84rem; }

/* ---------- 自動集計のまとめ ---------- */
.summarybox {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px;
  background: var(--bg-soft); margin-top: 6px;
}
.summarybox h3 { margin: 0 0 10px; font-size: .9rem; color: var(--brand-strong); }
.sgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; }
.sbox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px; }
.sbox .st { font-size: .73rem; color: var(--ink-3); font-weight: 700; display: block; }
.sbox .sv { font-size: 1.15rem; font-weight: 800; color: var(--brand-strong); display: block; font-variant-numeric: tabular-nums; }
.sbox .sd { font-size: .7rem; color: var(--ink-3); display: block; line-height: 1.45; }

/* ---------- ロック中の項目 ---------- */
/* ロック中は薄く表示し、🔒 と理由で伝える（打ち消し線は読みにくいので使わない） */
.field.locked .lbl { color: var(--ink-3); }
.lockmsg {
  display: block; font-size: .74rem; color: var(--bad); font-weight: 700; line-height: 1.5;
  margin-top: 3px; text-decoration: none !important;
}
.lockmsg:empty { display: none; }
.derived {
  margin: 10px 0 0; font-size: .82rem; color: var(--ink-2);
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 8px 11px;
}
.derived .ng { color: var(--bad); font-weight: 700; }
input:disabled, select:disabled { background: var(--surface-2); cursor: not-allowed; color: var(--ink-3); }

/* ---------- バッジ ---------- */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .755rem; font-weight: 700; white-space: nowrap; }
.badge.ok { background: var(--good-soft); color: var(--good); }
.badge.ng { background: var(--bad-soft); color: var(--bad); }
.badge.n { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.badge.info { background: var(--brand-soft); color: var(--brand-strong); }

/* ---------- 出典 ---------- */
.sourceline { padding: 7px 0; border-bottom: 1px dotted var(--line); font-size: .855rem; }
.sourceline:last-child { border-bottom: 0; }
.sourceline .cat {
  display: inline-block; min-width: 64px; font-weight: 700; color: var(--brand);
  font-size: .74rem; background: var(--brand-soft); padding: 1px 8px; border-radius: 4px; margin-right: 8px;
  text-align: center;
}
.sourceline a { color: var(--brand); word-break: break-all; font-size: .78rem; text-decoration: none; }
.sourceline a:hover { text-decoration: underline; }

.site-footer { padding: 20px 0 40px; color: var(--ink-3); font-size: .8rem; text-align: center; }

/* ---------- スマートフォン・タブレット ----------
 * ねらい
 *   ・入力欄は1列にして、指で押せる大きさ（44px以上）を確保する
 *   ・iOS で入力時に画面が拡大されないよう、入力欄の文字は16px以上にする
 *   ・幅の広い表は自前の枠内だけで横スクロールさせ、本文は横に流れないようにする
 */
@media (max-width: 820px) {
  .grid, .grid.two { grid-template-columns: 1fr; }
  .mgrid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .choices { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; line-height: 1.8; }
  .wrap { padding: 0 13px; }
  .card { padding: 15px 14px; border-radius: var(--r-md); margin-bottom: 14px; }
  .card > h2 { font-size: 1rem; gap: 8px; }
  .site-header { padding: 18px 0 18px; }
  .site-header h1 { font-size: 1.14rem; }
  .site-header .lead { font-size: .88rem; }
  .headtop { gap: 12px; }
  .themeswitch { width: 100%; }
  .themeswitch button { flex: 1 1 0; padding: 9px 6px; min-height: 44px; }

  /* 指で押せる大きさ。iOSの自動ズーム回避のため文字は16px以上 */
  input[type="number"], input[type="text"], select { font-size: 16px; padding: 11px 12px; min-height: 44px; }
  .mgrid input, .mgrid select { font-size: 16px; padding: 9px 10px; min-height: 42px; }
  /* チェックボックスはラベル全体が押せる。行そのものを44px確保する。 */
  .checkline { min-height: 44px; padding: 5px 0; }
  .checkline input { width: 22px; height: 22px; margin-top: 2px; }
  .choice { padding: 15px 14px; }
  button.primary, button.ghost { width: 100%; justify-content: center; min-height: 48px; padding: 13px 20px; }
  button.small, .del { width: auto; min-height: 40px; }
  .actions { flex-direction: column; align-items: stretch; }

  .kpis, .kpis.five { grid-template-columns: 1fr 1fr; }
  .kpi .value { font-size: 1.2rem; }
  .sgrid { grid-template-columns: 1fr 1fr; }
  .steps { flex-direction: column; }
  .stepnav a { padding: 11px 11px; font-size: .8rem; }
  .stepnav .wrap { min-height: 48px; }

  fieldset.group { padding: 12px 12px 14px; }
  fieldset.group > legend { font-size: .88rem; }
  .subblock { padding: 11px 12px 13px; }
  .member { padding: 11px 11px 9px; }
  .mhead { gap: 8px; }
  /* 続柄セレクトも16px以上にする（iOSの自動ズーム回避） */
  .relsel { min-width: 0; flex: 1 1 130px; font-size: 16px; padding: 8px 10px; min-height: 42px; }

  /* 横並びの設定行（PDFに入れる内容など）は縦に積む。
     横並びのままだとセレクトが縮まず画面からはみ出す。 */
  .field.inline { flex-direction: column; align-items: stretch; gap: 6px; }
  .field.inline > span { white-space: normal; }
  .field.inline select { width: 100%; }

  /* ---- 狭い画面では、表を縦に積み直す ----
   *
   * 「項目 × 人」の表を横に並べたままだと、1列あたり70pxほどしか取れず、
   * 「51,300円 以上 154,500円 未満」や「税額の決まり方」が1文字ずつ
   * 縦に並んでしまう。右端の列は画面の外に出て、横スクロールにも気づけない。
   *
   * そこで1行を1つのカードにして、行の見出しを小見出し、
   * 各マスを「列の見出し ─ 値」として縦に積む。結果の表だけでなく、
   * 制度の解説にある表も同じ形にする（そちらのほうが列が細かく、潰れやすい）。
   * 列の見出しは JS が data-label として各マスに入れている（app.js の
   * labelTableCells）。横スクロールは要らなくなる。 */
  .tablewrap { overflow-x: visible; border: 0; border-radius: 0; padding: 0; }
  table.compare, table.detail,
  table.compare.persons, table.compare.narrow {
    display: block; min-width: 0; width: 100%; font-size: .87rem; background: none;
  }
  /* 人ごとの表は名前を横幅で確保していたが、縦に積むので不要 */
  table.compare.persons tbody th.who { width: auto; }
  table.compare.persons th.who b { display: inline; }
  table.compare.persons th.who .role { display: inline; margin-left: 6px; }
  /* 表の見出し。table を display:block にすると caption が15px幅に潰れる */
  table.compare > caption, table.detail > caption {
    display: block; width: auto; text-align: left; padding: 2px 0 6px;
  }
  table.compare > thead, table.detail > thead { display: none; }
  table.compare > tbody, table.detail > tbody { display: block; }
  table.compare > tbody > tr, table.detail > tbody > tr {
    display: block; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 10px 12px; margin-bottom: 8px;
  }
  table.compare > tbody > tr:last-child,
  table.detail > tbody > tr:last-child { margin-bottom: 0; }
  /* 行の見出し（左端）はカードの小見出しに */
  table.compare > tbody > tr > th,
  table.detail > tbody > tr > th {
    display: block; width: auto; padding: 0 0 7px; border: 0; background: none;
    font-weight: 700; color: var(--ink); line-height: 1.6;
  }
  table.compare > tbody > tr > td,
  table.detail > tbody > tr > td {
    display: block; width: auto; padding: 7px 0 3px; border: 0;
    border-top: 1px solid var(--line-soft); text-align: left; white-space: normal;
  }
  /* 列の見出しは小さな見出しとして値の上に置く。
     値の幅を削らないので、何文字の値でも1文字ずつにはならない。 */
  table.compare > tbody > tr > td::before,
  table.detail > tbody > tr > td::before {
    content: attr(data-label); display: block;
    font-size: .8em; font-weight: 400; color: var(--ink-2); line-height: 1.5;
    word-break: auto-phrase;
  }
  table.compare > tbody > tr > td:not([data-label])::before,
  table.detail > tbody > tr > td:not([data-label])::before { content: none; }
  /* 金額は「見出し ─ 金額」を1行に収める（桁が右に揃って比べやすい）。
     値の側を先に必要な幅だけ確保するので、金額が折り返すことはない。 */
  table.compare > tbody > tr > td.num,
  table.detail > tbody > tr > td.num {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px; align-items: baseline;
  }
  table.compare > tbody > tr > td.num::before,
  table.detail > tbody > tr > td.num::before { align-self: baseline; }
  /* 値の列が1つだけの表（項目 ─ 金額）は、枠で囲わず1行ずつ並べる。
     1項目ごとに箱ができると、数字1つを読むのに画面を大きく使ってしまう。 */
  table[data-value-cols="1"] > tbody > tr,
  table[data-value-cols="1"] > tr {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 2px 14px;
    background: none; border: 0; border-bottom: 1px solid var(--line-soft);
    border-radius: 0; padding: 8px 2px; margin: 0;
  }
  /* 値が長いときは折り返して次の行に回す。
     幅を決め打ちで分け合うと、長い値が項目名を幅ゼロまで押し潰してしまう。 */
  table[data-value-cols="1"] > tbody > tr > th,
  table[data-value-cols="1"] > tr > th {
    display: block; flex: 0 1 auto; min-width: 0;
    padding: 0; border: 0; font-weight: 400; color: var(--ink-2); line-height: 1.6;
  }
  table[data-value-cols="1"] > tbody > tr > td,
  table[data-value-cols="1"] > tr > td {
    display: block; flex: 0 1 auto; min-width: 0;
    padding: 0; border: 0; text-align: right; font-weight: 700;
  }
  /* 文章が入る欄は右揃えだと読みにくいので左のまま */
  table[data-value-cols="1"] > tbody > tr > td:not(.num),
  table[data-value-cols="1"] > tr > td:not(.num) { text-align: left; font-weight: 400; }
  table[data-value-cols="1"] > tbody > tr.sum,
  table[data-value-cols="1"] > tr.sum {
    background: var(--brand-soft); border-bottom-color: var(--brand);
    border-radius: var(--r-sm); padding: 9px 10px; margin: 2px 0;
  }
  table[data-value-cols="1"] > tbody > tr.sum > th,
  table[data-value-cols="1"] > tr.sum > th { color: var(--brand-strong); font-weight: 700; }
  /* 枠で囲っているので、マスの下線は要らない（二重に線が出る） */
  table[data-value-cols="1"] > tbody > tr.sum > th,
  table[data-value-cols="1"] > tbody > tr.sum > td,
  table[data-value-cols="1"] > tr.sum > th,
  table[data-value-cols="1"] > tr.sum > td { border-bottom: 0; }

  /* 人ごとの計算（.jperson）は、もともと「項目 ─ 金額」の2列で狭い画面でも
     そのまま読める。積み直しの対象から外して、二重線が出ないようにする。 */
  .jperson table.detail { display: table; width: 100%; }
  .jperson table.detail > tbody { display: table-row-group; }
  .jperson table.detail > tbody > tr {
    display: table-row; background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
  }
  .jperson table.detail > tbody > tr > th,
  .jperson table.detail > tbody > tr > td {
    display: table-cell; padding: 6px 0; border-bottom: 1px solid var(--line-soft);
  }
  .jperson table.detail > tbody > tr > td::before { content: none; }
  .jperson table.detail > tbody > tr.sum > th,
  .jperson table.detail > tbody > tr.sum > td {
    border-top: 2px solid var(--brand); border-bottom: 0; padding-top: 9px;
  }

  /* 合計行はカードごと目立たせる */
  table.detail > tbody > tr.sum { border-color: var(--brand); background: var(--brand-soft); }
  table.compare > tbody > tr > td.good { background: none; color: var(--good); font-weight: 700; }
  table.compare > tbody > tr > td.bad { background: none; color: var(--bad); font-weight: 700; }
  table.compare > tbody > tr > th.c1, table.compare > tbody > tr > th.c2 { background: none !important; }
  .formula { font-size: .87rem; line-height: 1.85; padding: 12px 13px; }
  .verdict { padding: 15px 15px; }
  .verdict .big { font-size: 1.3rem; }
  .gauge-label { font-size: .66rem; }
}
@media (max-width: 380px) {
  .kpis, .kpis.five, .sgrid { grid-template-columns: 1fr; }
}
/* 表がはみ出していることを指で気づけるように、端に影を出す */
.tablewrap {
  background:
    linear-gradient(to right, var(--surface) 30%, transparent),
    linear-gradient(to left, var(--surface) 30%, transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
/* 動きを減らす設定にしている端末ではアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- 印刷（PDF保存） ---------- */
@media print {
  @page { size: A4; margin: 13mm 11mm; }
  /* ダークで表示していても紙は白基調にする。
   * :root[data-theme="dark"] のほうが詳細度が高いので、
   * ここでも同じ詳細度のセレクタを並べて確実に上書きする。 */
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    color-scheme: light;
    --bg: #fff; --bg-soft: #fafbfc; --surface: #fff; --surface-2: #f6f8fa;
    --line: #c6ced8; --line-soft: #dfe5ec; --ink: #101822; --ink-2: #3d4a5c; --ink-3: #6b7787;
    --brand: #14568b; --brand-strong: #0d3255; --brand-soft: #eaf2f9;
    --kin: #5c3c94; --kin-soft: #f2ecfb; --sho: #0e5c80; --sho-soft: #e6f2f8;
    --good: #0a6b47; --good-soft: #e7f6ee; --warn: #8a5a00; --warn-soft: #fdf3dc;
    --bad: #9c2c25; --bad-soft: #fdeceb;
    --shadow: none; --shadow-lg: none;
  }
  body { background: #fff; font-size: 10pt; line-height: 1.55; }
  .no-print, .stepnav, .site-footer, .actions { display: none !important; }
  .site-header {
    background: #fff !important; color: #000 !important;
    border-bottom: 2.5px solid #0d3255; padding: 0 0 8px; margin-bottom: 10px;
  }
  .site-header h1 { font-size: 14pt; color: #0d3255; }
  .site-header .lead { display: none; }
  .site-header .version { color: #444; }
  .site-header .chip { background: #eef2f6; border-color: #ccd; color: #333; }
  .wrap { max-width: none; padding: 0; }
  /* 入力欄は印刷しない。結果（と、指定があれば解説・出典）だけを出す */
  .step:not(#stepResult), .reference { display: none !important; }
  #stepResult { display: block !important; }
  body.print-all .reference { display: block !important; }
  body.print-all #tab-guide { break-before: page; }
  details.guide > summary { list-style: none; }
  details.guide > summary::before { content: ""; }
  .card {
    border: 1px solid #b9c3cf; box-shadow: none; break-inside: avoid;
    margin-bottom: 9px; padding: 10px 13px; border-radius: 6px;
  }
  .card > h2 { font-size: 11pt; margin-bottom: 9px; }
  .verdict, .kpi, .gauge, .steps { break-inside: avoid; }
  .verdict .big { font-size: 15pt; }
  .kpi .value { font-size: 13pt; }
  table.detail, table.compare { font-size: 8.6pt; }
  table.compare { min-width: 0; }
  .tablewrap { overflow: visible; }
  a { color: #14568b; text-decoration: none; }
  .print-only { display: block !important; }
}
.print-only { display: none; }

/* ヘッダー内の鮮度表示。背景を不透明にして、文字とのコントラストを確実にする */
.site-header #freshness {
  margin: 12px 0 0; font-size: .8rem; line-height: 1.65;
  background: #0b2b48; color: #e8f1fa;
  padding: 9px 13px; border-radius: var(--r-sm); border-left: 3px solid rgba(255, 255, 255, .35);
}
/* ステップナビと同じ理由で、中身が入る前に高さを取っておく。
   狭い画面ほど折り返して背が高くなるので、幅ごとに実測値を入れている。 */
.site-header #freshness { min-height: 39px; }
@media (max-width: 640px) { .site-header #freshness { min-height: 60px; } }
@media (max-width: 380px) { .site-header #freshness { min-height: 81px; } }
.site-header #freshness b { color: #ffffff; }
/* 確認予定日を過ぎたときだけ色を変えて目立たせる */
.site-header #freshness.warn {
  background: #5c3d00; color: #fff3d4; border-left-color: #ffd166; font-size: .84rem;
}
.site-header #freshness.warn b { color: #ffe9a8; }
/* 中身が入る前は、場所だけ取って何も見えない状態にする。
   display:none にすると高さが 0 になり、結局あとで押し下げが起きる。 */
.site-header #freshness:empty { background: none; border-left-color: transparent; }