/* premium.css — 高級感のあるテーマ層（画面のみ）。style.css / quick.css の後に読み込む。
   配色A（既定）：深緑と金。配色B：html[data-theme="navy"] で深紺と金。
   文言・並び・入力の流れ・印刷（@media print）には触れない。 */
@media screen {

/* ---------- 1. 配色と書体の変数 ---------- */
:root {
  color-scheme: light;
  --p-primary: #144a41;        /* 主色：深い緑 */
  --p-primary-deep: #0f3a34;   /* いちばん深い緑（結果の板） */
  --p-primary-light: #1c5e53;  /* ボタンの上端・ホバー */
  --p-primary-rgb: 20, 74, 65;         /* 影・光のための主色（配色Bで差し替え） */
  --p-primary-deep-rgb: 15, 58, 52;
  --p-rule-long: 72px;                 /* 金の飾り線：ヘッダー・フッター */
  --p-rule: 40px;                      /* 金の飾り線：カードの中 */
  --p-tint: #e9efe9;           /* 主色のごく淡い地 */
  --p-tint-strong: #dbe6de;    /* 選択中の地 */
  --p-paper: #f8f5ee;          /* 生成りの紙 */
  --p-card: #fffdf9;           /* カードの地 */
  --p-ink: #1f2a27;            /* 墨色の本文 */
  --p-muted: #5b665f;          /* 補足の文字（4.5:1 以上） */
  --p-line: #ddd6c6;           /* 薄い罫線 */
  --p-line-soft: #e9e3d5;
  --p-gold: #b8955a;           /* 金（線・飾り・✓ のみ。小さな文字には使わない） */
  --p-gold-line: #cbb27f;
  --p-gold-deep: #7a5c26;      /* 文字に使うときの金（5.7:1） */
  --p-gold-soft: #faf3e3;      /* 金の淡い地（注意書き） */
  --p-gold-soft-line: #d9c79a;
  --p-tax: #9b2f38;            /* 税金の色（落ち着いた臙脂） */
  --p-tax-soft: #fbf3f1;
  --p-tax-line: #e6d3d1;
  --p-slate: #52697c;         /* 3件目の帯（灰青） */
  --p-shadow: 0 1px 2px rgba(31, 42, 39, .04), 0 12px 32px rgba(31, 42, 39, .06);
  --p-shadow-strong: 0 2px 4px rgba(31, 42, 39, .05), 0 18px 44px rgba(31, 42, 39, .09);
  --p-serif: "Hiragino Mincho ProN", "Yu Mincho Demibold", "Yu Mincho", "Noto Serif CJK JP", "Noto Serif JP", "Source Han Serif JP", "MS Mincho", serif;
  --p-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

  /* 既存の変数を差し替える */
  --ink: var(--p-ink);
  --muted: var(--p-muted);
  --green: var(--p-primary);
  --green-dark: var(--p-primary-deep);
  --sage: var(--p-tint);
  --ivory: var(--p-paper);
  --line: var(--p-line);
  --orange: var(--p-tax);
  --tax: var(--p-tax);
  --error: #a4362c;
  --shadow: var(--p-shadow);
  --white: var(--p-card);
  background: var(--p-paper);
}

html[data-theme="navy"] {
  --p-primary: #16284a;
  --p-primary-deep: #10203b;
  --p-primary-light: #22396a;
  --p-primary-rgb: 22, 40, 74;
  --p-primary-deep-rgb: 16, 32, 59;
  --p-tint: #e9ecf2;
  --p-tint-strong: #dde3ee;
}

html, body { background: var(--p-paper); color: var(--p-ink); }

body {
  font-family: var(--p-sans);
  font-size: 16px;
  line-height: 1.85;
  background:
    linear-gradient(180deg, rgba(var(--p-primary-rgb), .035) 0, rgba(var(--p-primary-rgb), 0) 360px),
    var(--p-paper);
}

h1, h2, h3, dialog h2,
.brand > span:not(.brand-monogram),
.hero-points-title,
.frame-cards > h4,
.frame-card h5,
.deemed-card h5,
.comparison h4,
.next-checks h4 {
  font-family: var(--p-serif);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--p-ink);
}

a { color: var(--p-primary); text-decoration-color: var(--p-gold-line); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--p-primary); }

/* キーボード操作の見え方（紙の上で 4.5:1 以上になる濃い金） */
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--p-gold-deep);
  outline-offset: 4px;
}
.quick-calculator .choice:has(input:focus-visible),
.quick-calculator .reason-checks > label:has(input:focus-visible) { outline: 3px solid var(--p-gold-deep); outline-offset: 3px; }

::selection { background: var(--p-tint-strong); }

/* ---------- 2. ヘッダー ---------- */
.site-header { min-height: 84px; border-bottom: 1px solid var(--p-line); position: relative; }
.site-header::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: var(--p-rule-long); height: 1px; background: var(--p-gold);
}
.brand { gap: 14px; color: var(--p-ink); }
.brand > span { font-size: 22px; letter-spacing: .06em; }
.brand small, body .brand small { font-family: var(--p-sans); font-weight: 500; font-size: 14px; letter-spacing: 0; color: var(--p-muted); }
.brand > .brand-monogram, .brand-monogram {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(160deg, var(--p-primary-light), var(--p-primary-deep));
  color: #fff; font-family: var(--p-sans); font-weight: 700; font-size: 22px; letter-spacing: 0; line-height: 1;
  box-shadow: 0 0 0 2px var(--p-paper), 0 0 0 3px var(--p-gold), 0 6px 14px rgba(31, 42, 39, .14);
}
html[data-theme="navy"] .brand > .brand-monogram { box-shadow: 0 0 0 1px var(--p-paper), 0 0 0 2px var(--p-gold), 0 6px 14px rgba(31, 42, 39, .14); }
.header-link { color: var(--p-primary); letter-spacing: 0; }

/* ---------- 3. ヒーロー ---------- */
.hero { padding-block: 34px 22px; }
.hero h1 { font-size: 30px; line-height: 1.5; letter-spacing: .06em; }
.hero-lead { color: var(--p-muted); font-size: 16px; line-height: 1.9; margin-top: 10px; }
.hero-art { padding: 5px; background: var(--p-card); border: 1px solid var(--p-gold-line); border-radius: 14px; box-shadow: var(--p-shadow); }
.hero-art img { border-radius: 9px; }
.hero-points { position: relative; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--p-line-soft); }
.hero-points::before { content: ""; position: absolute; left: 0; top: -1px; width: var(--p-rule); height: 1px; background: var(--p-gold); }
.hero-points-title { font-size: 19px; margin-bottom: 10px; }
.point-list li { font-size: 16px; color: var(--p-ink); padding-left: 28px; }
.point-list li::before { color: var(--p-gold-deep); font-family: var(--p-sans); font-weight: 700; font-size: 15px; }

/* ---------- 4. ボタン ---------- */
.button { border-radius: 12px; letter-spacing: .02em; transition: background .18s, transform .18s, box-shadow .18s; }
.button:hover { transform: translateY(-1px); }
.primary,
.example-start .try-example,
.quick-calculator .unit-suggest .chip-button,
.quick-calculator .range-result .button,
.quick-calculator .live-panel .sample-inline .button,
.quick-calculator .live-panel .add-more .button,
.blocked-result .button,
.next-sample .button.primary,
.mobile-result-bar .bar-action {
  background: var(--p-primary);
  color: #fff;
  border: 1px solid var(--p-primary-deep);
  box-shadow: 0 4px 12px rgba(var(--p-primary-deep-rgb), .16);
}
.primary:hover,
.example-start .try-example:hover,
.quick-calculator .unit-suggest .chip-button:hover,
.quick-calculator .range-result .button:hover,
.mobile-result-bar .bar-action:hover {
  background: var(--p-primary-light);
  border-color: var(--p-primary);
  box-shadow: 0 6px 16px rgba(var(--p-primary-deep-rgb), .2);
}
.example-start .try-example { border-radius: 14px; min-height: 68px; letter-spacing: .04em; }
.example-start .try-example span { opacity: .92; }
.secondary,
.quick-calculator .live-panel .button {
  background: var(--p-card); color: var(--p-primary); border-color: var(--p-primary);
  box-shadow: 0 2px 6px rgba(31, 42, 39, .05);
}
.secondary:hover, .quick-calculator .live-panel .button:hover { background: var(--p-tint); border-color: var(--p-primary); }
.text-button { color: var(--p-primary); text-decoration-color: var(--p-gold-line); }
.more-examples > summary { color: var(--p-primary); text-decoration-color: var(--p-gold-line); }
.example-links button { background: var(--p-card); border: 1px solid var(--p-line); border-radius: 12px; color: var(--p-ink); box-shadow: 0 1px 3px rgba(31, 42, 39, .04); }
.example-links button:hover { border-color: var(--p-primary); background: var(--p-tint); }
.safety-line { color: var(--p-muted); }

/* ---------- 5. カードと見出し番号 ---------- */
.quick-calculator .scheme-panel,
.quick-calculator .receipt-card {
  background: linear-gradient(180deg, #fffefb 0, var(--p-card) 120px);
  border: 1px solid var(--p-line);
  border-radius: 14px;
  box-shadow: var(--p-shadow), inset 0 1px 0 rgba(255, 255, 255, .7);
  padding: 28px 26px 26px;
}
/* v3.1 (D5): the input card wears a thin gold top rule, like the result panel. */
.quick-calculator .receipt-card { border-top: 2px solid var(--p-gold-line); }
.quick-calculator .receipt-card:focus-within { box-shadow: var(--p-shadow-strong), inset 0 1px 0 rgba(255, 255, 255, .7); }
.quick-calculator .scheme-panel { margin-bottom: 22px; }
.quick-calculator #receipt-cards { gap: 20px; }
.quick-calculator .scheme-panel h3 { font-size: 21px; margin-bottom: 12px; }
.quick-calculator .entry-heading { font-size: 20px; margin: 26px 0 14px; }
body .section-number {
  width: 30px; height: 30px; flex-basis: 30px; border-radius: 50%;
  background: var(--p-card); border: 1.5px solid var(--p-gold); color: var(--p-primary);
  font-family: var(--p-serif); font-weight: 600; font-size: 15px; margin-right: 12px;
  box-shadow: 0 0 0 3px var(--p-card), 0 0 0 4px var(--p-gold-line);
}
/* v3.1 (D5): the input heading carries the same short gold rule as the hero and the footer. */
.quick-calculator .calc-head h2 { position: relative; padding-bottom: 10px; margin-bottom: 10px; }
.quick-calculator .calc-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--p-rule); height: 1px; background: var(--p-gold); }
.quick-calculator .live-heading .section-number { margin-right: 11px; }
.quick-calculator .receipt-heading { border-bottom: 1px solid var(--p-line-soft); padding-bottom: 12px; margin-bottom: 20px; position: relative; }
.quick-calculator .receipt-heading::after { content: ""; position: absolute; left: 0; bottom: -1px; width: var(--p-rule); height: 1px; background: var(--p-gold); }
.quick-calculator .receipt-heading h3 { font-size: 20px; }
.quick-calculator .receipt-heading button { color: var(--p-muted); text-decoration-color: var(--p-line); }
.quick-calculator .receipt-heading button:hover { color: var(--p-primary); }

/* 制度のチェック */
.quick-calculator .choice { background: var(--p-card); border: 1px solid var(--p-line); border-radius: 12px; transition: background .18s, border-color .18s, box-shadow .18s; }
.quick-calculator .choice:hover { border-color: var(--p-gold-line); }
.quick-calculator .choice:has(input:checked) { background: var(--p-tint); border-color: var(--p-primary); box-shadow: inset 0 0 0 1px var(--p-primary); }
.quick-calculator .choice input, .quick-calculator .reason-checks input, .quick-calculator .receipt-more input[type="checkbox"], .quick-calculator .option-radios input[type="radio"], .checkbox-row input { accent-color: var(--p-primary); }
.quick-calculator .choice small, body .quick-calculator .choice small, body .quick-calculator .option-radios small { color: var(--p-muted); font-size: 14px; }
.quick-calculator :is(.other-choices, .past-help, .reason-more, .receipt-help, .receipt-more, .live-tax-detail) > summary { color: var(--p-primary); }
.quick-calculator .history-reminder { border-top: 1px solid var(--p-line-soft); }

/* 入力欄 */
.quick-calculator input:not([type="checkbox"]), .quick-calculator select,
input, select { border: 1px solid #b9b2a2; border-radius: 10px; background: #fff; color: var(--p-ink); }
input:focus, select:focus, .quick-calculator input:not([type="checkbox"]):focus, .quick-calculator select:focus { border-color: var(--p-primary); box-shadow: 0 0 0 1px var(--p-gold-line), 0 0 0 4px rgba(184, 149, 90, .16); }
.quick-calculator input:not([type="checkbox"]):hover, .quick-calculator select:hover { border-color: var(--p-gold-line); }
body .quick-calculator .date-controls input { color: var(--p-ink); }
.quick-calculator .core-fields input, .quick-calculator .year-block input, .quick-calculator .date-controls input { font-variant-numeric: tabular-nums lining-nums; }
.quick-calculator #comparison-event { font-size: 16px; }
.quick-calculator .field-group > label, .quick-calculator .core-fields label, .quick-calculator .field-label { color: var(--p-ink); }
.quick-calculator .label-sub { color: var(--p-muted); }
.quick-calculator .amount-readout-text { color: var(--p-primary); font-variant-numeric: tabular-nums; }
.quick-calculator .quick-period { background: var(--p-paper); border: 1px solid var(--p-line-soft); border-radius: 12px; }
.quick-calculator .period-readout { color: var(--p-primary); }
.quick-calculator .era-hint { color: var(--p-muted); }
.quick-calculator .date-pair-grid > .period-arrow { color: var(--p-gold-deep); }
.quick-calculator .summary-line { background: var(--p-paper); border: 1px solid var(--p-line-soft); border-radius: 10px; }
.quick-calculator .year-chip { background: var(--p-card); border: 1px solid #b9b2a2; border-radius: 10px; color: var(--p-ink); }
.quick-calculator .year-chip:hover { border-color: var(--p-primary); }
.quick-calculator .year-chip[aria-pressed="true"] { background: var(--p-tint); border-color: var(--p-primary); color: var(--p-primary); box-shadow: inset 0 0 0 1px var(--p-primary); }
.quick-calculator .reason-checks > label { background: var(--p-card); border: 1px solid var(--p-line); }
.quick-calculator .reason-checks > label:has(input:checked),
.quick-calculator .option-radios .reason-checks > label:has(input:checked) { background: var(--p-tint); border-color: var(--p-primary); }
.quick-calculator .option-radios .reason-checks > label { border-color: var(--p-line); }
.quick-calculator .receipt-more { border-top: 1px solid var(--p-line-soft); }
.quick-calculator .overlap-note { background: var(--p-gold-soft); border: 1px solid var(--p-gold-soft-line); }

/* 補足の注意書き（紙色＋薄い罫線。読んでほしい「説明」の金地とは分ける） */
.quick-calculator .sample-banner,
.quick-calculator .unit-suggest,
.quick-calculator .day-note,
.quick-calculator .sample-inline,
.quick-calculator .range-result,
.next-sample,
.excluded-note,
.comparison .cmp-company,
.frame-card .fc-carry {
  background: var(--p-paper); border: 1px solid var(--p-line-soft);
}
.excluded-note { border-style: dashed; border-color: var(--p-line); }
.quick-calculator .sample-banner { background: var(--p-gold-soft); border: 1px solid var(--p-gold-soft-line); border-left: 4px solid var(--p-gold); border-radius: 12px; }
.quick-calculator .sample-banner strong, .quick-calculator .confirm-note, .quick-calculator .range-result .range-label, .quick-calculator .range-result .range-sub, .quick-calculator .role-confirm-result h4 { color: #4a3a10; }
.quick-calculator .role-radios.needs-confirm { border-color: var(--p-gold); background: var(--p-gold-soft); }
.quick-calculator select.needs-day { border-color: var(--p-gold-deep); background: var(--p-gold-soft); box-shadow: 0 0 0 3px rgba(184, 149, 90, .35); }
/* 読んでほしい説明（みなし勤続年数の特例）だけ金の淡い地＋金の左罫線 */
.deemed-card, .deemed-pointer { background: var(--p-gold-soft); border: 1px solid var(--p-gold-soft-line); border-left: 4px solid var(--p-gold); }
.deemed-card .dc-p4 { background: var(--p-card); color: var(--p-primary); }
.deemed-pointer a { color: #4a3a10; display: inline; padding-block: 14px; } /* 行内のまま上下に余白＝広い画面でも指で押せる高さ（44px以上） */

/* 角丸は3段（10＝内側の小箱と入力欄／12＝ボタン・注意書き／14＝カード） */
.frame-card .fc-carry, .frame-card .fc-multi, .frame-card .fc-db, .deemed-card .dc-p4, .calc-group h4, .calc-step pre, .summary-card, .result-row .row-net, .quick-calculator .day-note, .comparison .cmp-company { border-radius: 10px; }
.next-message { border-radius: 14px; }
.quick-calculator .kind-badge { border-radius: 999px; }

/* 折りたたみの印は金に */
summary::marker { color: var(--p-gold-deep); font-size: .75em; }
summary::-webkit-details-marker { color: var(--p-gold-deep); }

/* ---------- 6. 結果パネル ---------- */
.quick-calculator .live-panel {
  background: var(--p-card);
  border: 1px solid var(--p-gold-line);
  border-top: 3px solid var(--p-gold);
  border-radius: 14px;
  box-shadow: var(--p-shadow-strong);
  padding: 24px;
}
.quick-calculator .live-heading { border-bottom: 1px solid var(--p-line-soft); }
.quick-calculator .live-heading h3 { font-size: 21px; }
.quick-calculator #live-status { background: var(--p-tint); color: #46554d; border-radius: 999px; padding: 4px 12px; }

.quick-calculator .live-total {
  position: relative;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(184, 149, 90, .14), rgba(184, 149, 90, 0) 60%),
    linear-gradient(160deg, var(--p-primary) 0%, var(--p-primary-deep) 100%);
  color: #fff;
  border-radius: 12px;
  border: 1px solid rgba(184, 149, 90, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .03), 0 12px 30px rgba(var(--p-primary-deep-rgb), .2);
  padding: 24px 18px 22px;
}
.quick-calculator .live-total::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 12px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 149, 90, .7), transparent);
}
.quick-calculator .live-total > p { color: #e8dcc2; letter-spacing: .06em; }
.quick-calculator .live-total > strong {
  font-family: var(--p-serif); font-weight: 600; letter-spacing: .01em; color: #fff;
  font-variant-numeric: tabular-nums lining-nums; font-size: clamp(40px, 5vw, 52px); line-height: 1.5;
}
.quick-calculator .live-total strong small { font-family: var(--p-serif); font-weight: 600; color: #e8dcc2; }
.quick-calculator .live-total .live-exact { color: #d9e2dc; font-family: var(--p-serif); letter-spacing: .04em; }
.quick-calculator .live-total .net-explanation { color: #d9e2dc; }

.quick-calculator .live-flow { border: 1px solid var(--p-line); border-radius: 12px; background: var(--p-card); overflow: hidden; }
.quick-calculator .live-flow dt, body .quick-calculator .live-flow dt { color: var(--p-muted); }
.quick-calculator .live-flow dd { font-family: var(--p-serif); font-weight: 600; letter-spacing: .01em; color: var(--p-ink); font-variant-numeric: tabular-nums lining-nums; }
.quick-calculator .live-flow .tax { border-left: 1px solid var(--p-tax-line); background: var(--p-tax-soft); }
.quick-calculator .live-flow .tax dt, .quick-calculator .live-flow .tax dd, .quick-calculator .live-flow .tax small { color: var(--p-tax); }
.quick-calculator .live-bar { background: var(--p-tax); height: 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(31, 42, 39, .06); }
.quick-calculator .live-bar > span, .quick-calculator .live-bar > i { background: linear-gradient(90deg, var(--p-primary-deep), var(--p-primary-light)); }
.quick-calculator .live-legend { color: var(--p-muted); }
.quick-calculator .live-legend i { background: var(--p-primary); }
.quick-calculator .live-legend .tax { color: var(--p-tax); }
.quick-calculator .live-legend .tax i { background: var(--p-tax); }
.quick-calculator .live-tax-detail .tax, .quick-calculator .result-row .tax, .cash-breakdown .tax { color: var(--p-tax); }
.quick-calculator .live-tax-detail dd { font-variant-numeric: tabular-nums; }
.round-note, .flow-note, .receipt-sequence span, .frame-flow .flow-title, .frame-card .fc-note, .frame-card .fc-rule, .deemed-card .dc-p5, .deemed-card .dc-p4n, .deemed-card .dc-days, .deemed-card .dc-law, .comparison .cmp-caption, .comparison-table .cmp-same { color: var(--p-muted); }
.receipt-sequence, .add-more, .frame-card .fc-multi, .frame-card .fc-db { background: var(--p-paper); border: 1px solid var(--p-line-soft); }
.quick-calculator .pending-list li { background: var(--p-paper); border: 1px solid var(--p-line-soft); border-radius: 12px; }
.quick-calculator .pending-list span { color: var(--p-primary); }

/* 枠カード・みなしカード・次の確認 */
.frame-cards > h4 { font-size: 18px; }
.frame-card, .next-checks { background: var(--p-card); border: 1px solid var(--p-line); border-radius: 12px; box-shadow: 0 1px 3px rgba(31, 42, 39, .04); }
.frame-card h5 { font-size: 17px; }
/* fix33 item 6: the same marks as the figure (ch-base / ch-cut / ch-kojo / ch-amount) */
.frame-meter { background: transparent; border-radius: 3px; box-shadow: none; }
.frame-meter .fm-base { background: var(--p-tint-strong); box-shadow: inset 0 0 0 1px var(--p-primary); }
.frame-meter .fm-kojo { background: var(--p-primary); }
.frame-meter .fm-cut { background: repeating-linear-gradient(45deg, transparent 0 4px, var(--p-gold-deep) 4px 6px); box-shadow: inset 0 0 0 1px var(--p-gold-deep); }
.frame-meter .fm-line { background: var(--p-gold-deep); }
.frame-card p.fm-caption { color: var(--p-muted); }
.frame-card .fc-frame, .frame-card .fc-rest, .comparison-table .cmp-input { color: var(--p-primary); }
.frame-flow { border-top: 1px dashed var(--p-line); }
.frame-flow p { font-variant-numeric: tabular-nums; }
.check-list li { border-top: 1px solid var(--p-line-soft); }
.check-list li::before { background: transparent; border: 1.5px solid var(--p-gold); color: var(--p-primary); font-family: var(--p-serif); font-weight: 600; }

/* 詳細の折りたたみ */
.quick-calculator .result-detail > h3 { font-size: 22px; }
.quick-calculator .result-detail > details { background: var(--p-card); border: 1px solid var(--p-line); border-radius: 12px; box-shadow: var(--p-shadow); }
body .quick-calculator .result-detail > details > summary { color: var(--p-ink); font-family: var(--p-serif); font-weight: 600; letter-spacing: .03em; font-size: 16px; }
.quick-calculator .result-detail > details[open] > summary { border-bottom: 1px solid var(--p-line-soft); margin-bottom: 8px; }
.result-row { background: var(--p-card); border: 1px solid var(--p-line-soft); border-radius: 12px; }
.result-row header { border-bottom: 1px solid var(--p-line-soft); }
.result-row dd { font-family: var(--p-serif); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; color: var(--p-ink); }
.result-row .row-net dd { color: var(--p-primary); }
.summary-card, .calc-step pre, .calc-step .eq { background: var(--p-paper); border: 1px solid var(--p-line-soft); }
.calc-group h4 { background: var(--p-tint); font-family: var(--p-sans); font-weight: 700; letter-spacing: 0; }
.calc-step { border-bottom: 1px dashed var(--p-line); }
.calc-step > p, .calc-step .reason, .calc-step .extra, .calc-step .basis { color: var(--p-muted); }
.calc-step .eq p { color: var(--p-ink); } /* v3.5: the formulas in ink, the 補足 and 根拠 muted */
.comparison-table thead { background: var(--p-tint); }
.comparison-table th, .comparison-table td { border-bottom: 1px solid var(--p-line-soft); }
.comparison-table tr.is-input th, .comparison-table tr.is-input td { background: var(--p-tint); }
.comparison-table tbody td { font-variant-numeric: tabular-nums; }
.quick-calculator .result-detail .comparison-table tbody td:nth-child(2) { color: var(--p-tax); }
.quick-calculator .comparison-table tr { border-color: var(--p-line-soft); }
.cash-breakdown { background: var(--p-paper); border: 1px solid var(--p-line-soft); }
.cash-net { border-top: 1px solid var(--p-line); color: var(--p-primary); }
.audit-link { color: var(--p-primary); }
.next-message { background: var(--p-tint); }

/* ---------- 7. 結果バー ---------- */
.mobile-result-bar {
  background: var(--p-card);
  color: var(--p-primary);
  border: 1px solid var(--p-gold-line);
  border-top: 3px solid var(--p-gold);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 28px rgba(31, 42, 39, .12);
}
.mobile-result-bar strong { color: var(--p-primary); font-family: var(--p-sans); font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.mobile-result-bar[data-state="empty"] strong, .mobile-result-bar[data-state="incomplete"] strong, .mobile-result-bar[data-state="history"] strong { color: var(--p-ink); font-family: var(--p-sans); font-weight: 700; }
.mobile-result-bar[data-state="range"] strong, .mobile-result-bar[data-state="role-confirm"] strong, .mobile-result-bar[data-state="blocked"] strong, .mobile-result-bar[data-state="needs-days"] strong { color: #4a3a10; font-family: var(--p-sans); font-weight: 700; }
.mobile-result-bar .bar-action { border-radius: 10px; }

/* ---------- 8. 使い方・フッター・ダイアログ ---------- */
.help-fold { border-top: 1px solid var(--p-line); border-bottom: 1px solid var(--p-line); }
body .about .help-fold > summary { color: var(--p-ink); font-family: var(--p-serif); font-weight: 600; letter-spacing: .04em; font-size: 17px; }
.about-grid h3 { font-size: 18px; }
.about-grid p, .faq p, .disclosure > p, .disclosure > ul { color: var(--p-muted); }
.disclosure { border-bottom: 1px solid var(--p-line-soft); }
.disclosure > summary { color: var(--p-ink); }
.faq { border-top: 1px solid var(--p-line-soft); }
.site-footer { border-top: 1px solid var(--p-line); position: relative; padding-top: 30px; }
.site-footer::before { content: ""; position: absolute; left: 0; top: -1px; width: var(--p-rule-long); height: 1px; background: var(--p-gold); }
.site-footer .author-line { font-family: var(--p-serif); font-weight: 600; letter-spacing: .1em; font-size: 17px; color: var(--p-ink); }
.site-footer .fine-print, .site-footer > p { color: var(--p-muted); }
body .site-footer .verification-link { padding-block: 14px; } /* 広い画面でも押せる高さ（44px以上）。行内のままなので並びは変わらない */
dialog { background: var(--p-card); border: 1px solid var(--p-gold-line); border-top: 3px solid var(--p-gold); border-radius: 16px; box-shadow: 0 24px 80px rgba(var(--p-primary-deep-rgb), .28); }
dialog::backdrop { background: rgba(var(--p-primary-deep-rgb), .45); backdrop-filter: blur(4px); }
dialog > p { color: var(--p-muted); }
.skip-link { background: var(--p-card); border: 1px solid var(--p-gold-line); }
.noscript { background: var(--p-gold-soft); }
.no-receipts { color: var(--p-muted); }
.next-checks h4 { font-size: 18px; }

/* 太字（見出し以外）は本文の書体のまま */
.quick-calculator .empty-result strong, .quick-calculator .summary-line strong, .receipt-sequence, .frame-card .fc-status { font-family: var(--p-sans); }

/* ---------- 9. 幅ごとの調整 ---------- */
@media (max-width: 900px) {
  .mobile-result-bar { border-left: 0; border-right: 0; border-radius: 0; border-top: 3px solid var(--p-gold); }
  .mobile-result-bar span, .mobile-result-bar strong { color: var(--p-primary); }
}

@media (max-width: 650px) {
  .site-header { min-height: 72px; }
  .brand > span { font-size: 19px; }
  .brand > .brand-monogram { width: 40px; height: 40px; font-size: 21px; }
  .header-link { max-width: 5.2em; line-height: 1.5; }
  .hero { padding-block: 22px 16px; }
  .hero h1 { font-size: 23px; letter-spacing: .05em; }
  .hero-lead { font-size: 16px; }
  .hero-art { padding: 3px; border-radius: 10px; }
  .hero-art img { border-radius: 7px; }
  .hero-points-title { font-size: 18px; }
  .point-list li { font-size: 16px; }
  .quick-calculator .scheme-panel, .quick-calculator .receipt-card { padding: 22px 15px 20px; }
  .quick-calculator .scheme-panel h3 { font-size: 19px; }
  .quick-calculator .entry-heading { font-size: 18px; }
  .quick-calculator .receipt-heading h3 { font-size: 18px; }
  .quick-calculator .live-panel { padding: 20px 16px; }
  .quick-calculator .live-heading h3 { font-size: 20px; }
  .quick-calculator .live-total { padding: 20px 12px 18px; }
  .quick-calculator .live-total > strong { font-size: 42px; }
  .quick-calculator .result-detail > h3 { font-size: 20px; }
  .frame-card h5 { font-size: 16px; }
  .result-row .row-net { background: var(--p-tint); }
  body .about .help-fold > summary { font-size: 16px; }
  .site-footer .author-line { font-size: 16px; }
}

@media (max-width: 370px) {
  .site-header { flex-wrap: wrap; padding-bottom: 6px; }
  .site-header .header-link { max-width: none; width: 100%; justify-content: flex-end; text-align: right; margin-top: -8px; }
  .hero h1 { font-size: 20px; }
  .quick-calculator .scheme-panel, .quick-calculator .receipt-card { padding: 18px 12px; }
  .quick-calculator .live-total > strong { font-size: 36px; }
  .brand > span { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .button:hover { transform: none; }
}

/* ---------- 10. v3.2 (2026-10-02 午後) ---------- */
/* I3: the longer heading; I5: the illustration in its frame; I6: the 3 points in a box (pale paper, thin gold rule, serif heading). */
.hero h1 { font-size: 26px; line-height: 1.55; letter-spacing: .04em; }
.hero-points { background: var(--p-paper); border: 1px solid var(--p-gold-line); border-radius: 14px; padding: 18px 22px 16px; margin-top: 20px; box-shadow: var(--p-shadow); }
.hero-points::before { display: none; }
.hero-art { padding: 5px; }
/* J: the ② button and the ③ title wear the same gold rule as ①; the numbers inside the two buttons are white discs. */
.proceed-button { background: var(--p-primary); color: #fff; border: 1px solid var(--p-primary-deep); box-shadow: 0 4px 12px rgba(var(--p-primary-deep-rgb), .16); }
.proceed-button:hover { background: var(--p-primary-light); border-color: var(--p-primary); }
body .proceed-button .section-number, body .quick-calculator .go-button .section-number { background: #fff; color: var(--p-primary); border: 1.5px solid var(--p-gold); box-shadow: none; margin-right: 12px; flex: 0 0 30px; }
.quick-calculator .entry-title { position: relative; padding-bottom: 10px; margin-bottom: 16px; }
.quick-calculator .entry-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--p-rule); height: 1px; background: var(--p-gold); }
.quick-calculator .add-receipt { color: var(--p-primary); }
.proceed-missing { color: var(--error); }
@media (max-width: 650px) {
  .hero h1 { font-size: 22px; }
  .hero-points { padding: 14px 16px 12px; }
  .hero-art { padding: 4px; }
}
@media (max-width: 370px) {
  .hero h1 { font-size: 20px; }
}

}

/* v3.3: 免責事項（フッター） */
.site-footer .disclaimer { margin: 18px 0 12px; padding-top: 14px; border-top: 1px solid var(--p-line); }
.site-footer .disclaimer-title { font-family: var(--p-serif, "Noto Serif JP", serif); font-size: 16px; font-weight: 600; color: var(--p-ink); margin: 0 0 8px; letter-spacing: .04em; }
.site-footer .disclaimer-list { margin: 0; padding-left: 1.25em; }
.site-footer .disclaimer-list li { margin: 4px 0; }

/* v3.7 (CC3): the red sentences — what is missing, the premise a result was computed on, the one-line reason when a condition cannot be computed. premium's red (--error), 16px, bold, one sentence each. */
.quick-calculator .result-alert, .quick-calculator .pending-list a.result-alert, #print-sheet .result-alert { color: var(--error); font-size: 16px; font-weight: 700; line-height: 1.6; margin: 0 0 8px; }
.quick-calculator .pending-list a.result-alert span { color: var(--error); font-size: 15px; font-weight: 600; }
.quick-calculator .alert-list li { border-color: #e6c3bd; background: #fdf4f2; }
.quick-calculator .blocked-item .result-alert strong { color: var(--error); }
.quick-calculator .result-alert a { color: var(--p-primary); font-weight: 600; }
.quick-calculator .go-missing, body .quick-calculator .go-missing { color: var(--error); font-size: 16px; font-weight: 700; }
.quick-calculator .confirm-note, body .quick-calculator .confirm-note { color: var(--error); font-size: 16px; font-weight: 700; }
.quick-calculator .live-panel[data-state="incomplete"] #live-status, .quick-calculator .live-panel[data-state="history"] #live-status, .quick-calculator .live-panel[data-state="blocked"] #live-status { color: var(--error); font-weight: 700; }
/* v3.7 (AA): the one-line hint under 障害が直接の原因 and 通算 in the fold. */
.quick-calculator .receipt-more .checkbox-row small, body .quick-calculator .receipt-more .checkbox-row small { display: block; font-size: 14px; font-weight: 400; line-height: 1.7; color: var(--p-muted); margin-top: 2px; }
.quick-calculator .receipt-more .checkbox-row { align-items: flex-start; }
.quick-calculator .receipt-more .checkbox-row input { margin-top: 4px; }
/* v3.7 (CC2): the panel's label can be a sentence (「入力待ち：2件目（企業型DC）の受取金額」): it wraps under the heading instead of running out of the box. */
.quick-calculator .live-panel[data-state="incomplete"] .live-heading, .quick-calculator .live-panel[data-state="filled"] .live-heading, .quick-calculator .live-panel[data-state="history"] .live-heading { flex-wrap: wrap; }
.quick-calculator .live-panel[data-state="incomplete"] #live-status, .quick-calculator .live-panel[data-state="filled"] #live-status, .quick-calculator .live-panel[data-state="history"] #live-status { white-space: normal; max-width: 100%; margin-left: 0; font-size: 16px; line-height: 1.5; border-radius: 10px; padding: 6px 12px; }
/* v3.7 (CC1a): the first missing field keeps its red frame while it has the focus (the focus ring alone is gold). */
body .quick-calculator .receipt-card input[aria-invalid="true"], body .quick-calculator .receipt-card select[aria-invalid="true"], body .quick-calculator .receipt-card input[aria-invalid="true"]:focus, body .quick-calculator .receipt-card select[aria-invalid="true"]:focus { border: 2px solid var(--error); box-shadow: 0 0 0 3px rgba(164, 54, 44, .22); }
/* v3.7 修正1 (2026-10-03): each 欄名 in the waiting label stays on one line (an inline block wraps as a whole; it still breaks inside when wider than the panel, so no horizontal scroll). */
.quick-calculator #live-status .nowrap { display: inline-block; }
/* v3.7 修正2 (2026-10-03): the red sentence inside 計算書③ (and on the print sheet) keeps 16px・bold — the 14px rule of .result-detail must not shrink it. */
body .quick-calculator .result-detail .calc-step p.result-alert, body .quick-calculator .calc-step p.result-alert, #print-sheet .calc-step p.result-alert, body.print-view #print-sheet .calc-step p.result-alert { color: var(--error); font-size: 16px; font-weight: 700; line-height: 1.6; }

/* v3.8 (JJ・2026-10-03): 税金の計算の流れ — one card per receipt; a line is item (left, 14px muted) / formula (16px) / result (bold, in the formula). */
.quick-calculator .judge-wrap, .quick-calculator .rate-wrap { margin: 0 0 16px; }
.quick-calculator .judge-wrap h5, .quick-calculator .rate-wrap h5 { margin: 0 0 8px; font-size: 16px; font-family: var(--p-sans); font-weight: 700; color: var(--p-primary); }
.quick-calculator .judge-table th[scope="row"] { width: 30%; }
.quick-calculator .rate-table td { text-align: right; }
.quick-calculator .rate-table td:first-child { text-align: left; }
.quick-calculator .rate-table td, .quick-calculator .rate-table th { white-space: nowrap; }
.quick-calculator .rate-table td:first-child, .quick-calculator .rate-table th:first-child { white-space: normal; }
.quick-calculator .calc-card { border: 1px solid var(--p-line); border-radius: 12px; background: var(--p-card); padding: 0 14px 12px; margin: 0 0 18px; }
.quick-calculator .calc-card > h4 { margin: 0 -14px 10px; border-radius: 12px 12px 0 0; font-size: 17px; }
.quick-calculator .calc-card .calc-step:last-of-type { border-bottom: 0; }
.quick-calculator .calc-card > p.law { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--p-line-soft); font-size: 14px; color: var(--p-muted); }
.quick-calculator .calc-step .eq .cl { display: grid; grid-template-columns: 1fr; gap: 0 12px; align-items: baseline; }
.quick-calculator .calc-step .eq .cl + .cl { margin-top: 6px; }
.quick-calculator .calc-step .eq .cl-k { font-size: 14px; line-height: 1.6; font-weight: 600; color: var(--p-muted); }
.quick-calculator .calc-step .eq .cl-f { font-size: 16px; line-height: 1.8; }
.quick-calculator .calc-step .eq .cl-v, .quick-calculator .calc-step .eq .cl-v b { font-weight: 700; color: var(--p-primary); }
@media (min-width: 700px) { .quick-calculator .calc-step .eq .cl { grid-template-columns: 11em 1fr; } }
.quick-calculator .calc-step .note.note-ref { color: var(--p-muted); }
.quick-calculator .calc-step .note.calc-ref-line { background: var(--p-gold-soft); border: 1px solid var(--p-gold-soft-line); border-radius: 8px; padding: 6px 10px; color: var(--p-ink); }
.quick-calculator .live-note.past-note { color: var(--p-muted); font-size: 14px; }
#print-sheet .calc-card { border: 1px solid #999; padding: 0 8px 6px; margin: 0 0 10px; break-inside: avoid; }
#print-sheet .calc-card > h4 { margin: 0 -8px 6px; }
#print-sheet .calc-step .eq .cl-k { font-weight: 600; color: #333; margin-right: 6px; }
#print-sheet .calc-step .eq .cl-v { font-weight: 700; }
#print-sheet .judge-wrap h5, #print-sheet .rate-wrap h5 { margin: 0 0 4px; }
body.print-view #print-sheet .calc-step .eq .cl-k { font-size: 14px; }
body.print-view #print-sheet .calc-card > p.law, body.print-view #print-sheet .calc-step .note.note-ref { font-size: 14px; }
/* 修正第1回 (2026-10-03・指摘9): the step headings on the print sheet (手順1 勤続年数 …) at 14px (10.5pt) — the same as the other sheet headings; print-view keeps its 17px. */
#print-sheet .calc-step h5 { font-size: 14px; }