/* つみたて計算機 ページ専用CSS。共通の体裁は common.css / module.css を利用し、ここには固有要素だけ。 */

/* 非課税メリットの金カード（module の .card を土台に色だけ上書き） */
.card.card--gold{background:#fdf7ec;border-color:var(--accent);border-width:1.5px;}
.card.card--gold .v{color:var(--accent);}

/* 入力の補助テキスト */
.t-hint{font-size:12px;color:var(--muted);line-height:1.7;margin:2px 0 0;}
#realNote{font-size:12.5px;color:var(--muted);line-height:1.7;margin:8px 0 0;}
/* 投資額（元本合計）の表示。1,800万円超で赤 */
.invest-total{margin:12px 0 0;padding:11px 14px;background:#f2f6fa;border:1px solid var(--line);border-radius:10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;}
.invest-total .it-label{font-size:12.5px;font-weight:700;color:var(--navy);}
.invest-total .it-value{font-size:18px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;}
.invest-total .it-msg{flex-basis:100%;margin:4px 0 0;font-size:12px;color:var(--muted);line-height:1.7;}
.invest-total.over{background:#fdf2f1;border-color:var(--neg);}
.invest-total.over .it-value{color:var(--neg);}
.invest-total.over .it-msg{color:var(--neg);font-weight:600;}

/* 年次テーブルの強調セル */
.tbl-strong{font-weight:800;color:var(--navy);}

/* ---- 積み上げグラフ ---- */
.ch-svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px;}
.ch-grid{stroke:#e7edf3;stroke-width:1;}
.ch-ylab{fill:var(--muted);font-size:11px;text-anchor:end;font-family:inherit;}
.ch-xlab{fill:var(--muted);font-size:11px;text-anchor:middle;font-family:inherit;}
.ch-xlab-end{font-weight:700;fill:var(--navy);}
.ch-principal{fill:#d3e3f2;}
.ch-gain{fill:#e7c98a;opacity:.92;}
.ch-line{fill:none;stroke:var(--accent);stroke-width:2;}
.ch-legend{display:flex;gap:18px;justify-content:center;margin:8px 0 0;font-size:12px;color:var(--ink);}
.ch-legend span{display:inline-flex;align-items:center;gap:6px;}
.ch-sw{width:14px;height:12px;border-radius:3px;display:inline-block;}
.ch-sw-p{background:#d3e3f2;}
.ch-sw-g{background:#e7c98a;}
.ch-note{font-size:11.5px;color:var(--muted);margin:6px 0 0;text-align:center;}

/* 入力欄：列を広めにして長いラベルの半端な折り返しを防ぐ */
.tsumi-form .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));max-width:660px;}
.tsumi-form .field label{line-height:1.4;}