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

/* パネル直下に縦並びするサブグループ（再就職など）は枠が密着しないよう縦マージン。
   家族・資産の枠は .asset-grid の gap で横並び＆間隔がつくので対象外。 */
.panel > .subgroup{margin-top:12px;}
/* NISA枠オーバーの注記が資産ボックスに張り付かないよう余白 */
#nisaCapNote{margin-top:14px;}

/* 判定バナー */
.vd{border-radius:12px;padding:16px 18px;margin:0 0 16px;border:1.5px solid var(--line);background:#fff;display:flex;flex-direction:column;gap:6px;}
.vd .vd-main{font-size:19px;font-weight:800;line-height:1.4;}
.vd .vd-sub{font-size:13px;line-height:1.75;color:var(--ink);}
.vd.ok{background:#eefaf3;border-color:var(--pos);}
.vd.ok .vd-main{color:var(--pos);}
.vd.bad{background:#fdf2f1;border-color:var(--neg);}
.vd.bad .vd-main{color:var(--neg);}

/* 資産寿命カード（不足時は琥珀で警告色） */
.card.card--warn{background:#fdf7ec;border-color:var(--accent);border-width:1.5px;}
.card.card--warn .v{color:var(--accent);}

/* 年次テーブル */
.tbl-strong{font-weight:800;color:var(--navy);}
#tbl .row-work td{color:var(--muted);}
#tbl .row-dead td{background:#fdf2f1;color:var(--neg);}

/* ---- グラフ ---- */
.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-vgrid{stroke:#eef2f6;stroke-width:1;stroke-dasharray:2 4;}
.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-area{fill:#dcebf6;}
.ch-line{fill:none;stroke:var(--ins);stroke-width:2;}
.ch-retire{stroke:var(--navy-2,#3a5978);stroke-width:1.5;stroke-dasharray:4 3;}
.ch-retire-lab{fill:var(--navy);font-size:11px;font-weight:700;font-family:inherit;}
.ch-retire-dot{fill:var(--navy);}
.ch-retire-amt{fill:var(--navy);font-size:11.5px;font-weight:800;font-family:inherit;}
.ch-dot{fill:var(--neg);}
.ch-dot-lab{fill:var(--neg);font-size:11px;font-weight:800;text-anchor:middle;font-family:inherit;}
.ch-note{font-size:11.5px;color:var(--muted);margin:6px 0 0;text-align:center;}