/* くらべる計算機（繰上げ返済 vs NISA投資）専用スタイル。
   共通は common.css / module.css。ここは新規要素（レンジバー・比較2カラム・判定・グラフ）だけ。 */

:root{ --kuriage:#2f7d5b; --toshi:#2d6ca8; }

/* 入力の小見出し */
.form-sub{ font-size:15px; font-weight:800; color:var(--navy); margin:18px 0 10px; padding-left:9px; border-left:4px solid var(--accent); }
.form-sub:first-child{ margin-top:2px; }
.form-sub-note{ font-size:12px; font-weight:600; color:var(--muted); margin-left:6px; }

/* 入力は「もしもの資産」と同じ：各セクションをカード(.subgroup)化し .asset-grid で横並び、
   カード内は項目を縦積み（.field はラベル上＋入力）。.asset-grid の列指定は module.css を使用 */

/* ラベル右のインライン注記（例：控除の残り年数 ※0で控除なし）*/
.lbl-note{ margin-left:5px; font-weight:400; color:var(--muted); }

/* 元手モードの選択トグル（コンパクトなピル型） */
.mode-tabs{ display:inline-flex; gap:6px; margin:0 0 10px; padding:3px; background:var(--toggle-off); border-radius:999px; }
.mode-tab{ font:inherit; font-size:13px; font-weight:700; color:var(--muted); background:transparent;
  border:0; border-radius:999px; padding:6px 16px; cursor:pointer; transition:.12s; white-space:nowrap; }
.mode-tab:hover{ color:var(--navy); }
.mode-tab.is-active{ background:var(--navy); color:#fff; box-shadow:0 1px 4px rgba(22,50,79,.25); }
/* 使わない方はグレーアウト＋無効化（非表示にはしない） */
.field.is-dim{ opacity:.5; }
.field input:disabled{ background:#f0f2f5; color:#9aa4b0; cursor:not-allowed; }

/* ===== レンジバー（主役）===== */
.alloc-wrap{ margin:20px 0 12px; padding:20px 22px 22px; background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:0 4px 18px rgba(22,50,79,.08); }
/* バーを動かした結果が見えるよう、バー→結果の距離を圧縮（このツール限定）*/
#resultTop{ margin:16px 0 14px; }
.alloc-title{ font-size:14px; font-weight:800; color:var(--navy); text-align:center; letter-spacing:.04em; margin-bottom:8px; }
.alloc-pcts{ display:flex; justify-content:space-between; align-items:flex-end; margin:0 4px 10px; }
.alloc-pct{ display:flex; align-items:baseline; gap:2px; flex-direction:row; }
.alloc-pct .ap-num{ font-size:40px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.alloc-pct--kuriage .ap-num{ color:var(--kuriage); }
.alloc-pct--toshi .ap-num{ color:var(--toshi); }
.alloc-pct .ap-unit{ font-size:18px; font-weight:800; }
.alloc-pct--kuriage .ap-unit{ color:var(--kuriage); }
.alloc-pct--toshi .ap-unit{ color:var(--toshi); }
.alloc-pct .ap-lab{ font-size:15px; font-weight:800; margin:0 6px 4px; align-self:flex-end; }
.alloc-pct--kuriage .ap-lab{ color:var(--kuriage); }
.alloc-pct--toshi .ap-lab{ color:var(--toshi); }

/* レンジ入力：左=繰上げ緑／右=投資青の静的グラデ＋大きめつまみ */
.alloc-slider{ -webkit-appearance:none; appearance:none; width:100%; height:14px; border-radius:999px;
  background:linear-gradient(90deg,var(--kuriage),var(--toshi)); outline:none; cursor:pointer; margin:4px 0; }
.alloc-slider:focus-visible{ box-shadow:0 0 0 3px rgba(45,108,168,.35); }
.alloc-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:36px; height:36px; border-radius:50%;
  background:#fff; border:3px solid var(--navy); box-shadow:0 3px 10px rgba(22,50,79,.30); cursor:grab; transition:transform .06s ease; }
.alloc-slider::-webkit-slider-thumb:active{ transform:scale(1.1); cursor:grabbing; box-shadow:0 5px 16px rgba(22,50,79,.38); }
.alloc-slider::-moz-range-thumb{ width:36px; height:36px; border-radius:50%; background:#fff; border:3px solid var(--navy);
  box-shadow:0 3px 10px rgba(22,50,79,.30); cursor:grab; }
.alloc-slider::-moz-range-thumb:active{ transform:scale(1.1); }
.alloc-slider::-moz-range-track{ height:14px; border-radius:999px; background:linear-gradient(90deg,var(--kuriage),var(--toshi)); }
.alloc-amt{ margin-top:12px; text-align:center; font-size:14px; color:var(--ink); background:var(--paper);
  border-radius:10px; padding:9px 12px; }
.alloc-amt b{ color:var(--navy); }

/* ===== 配分ナッジ＝スライダーの下。module.css の .verdict ボックス(枠線・角丸・余白)を継承し、
   状態でエリア全体を色分け（不利=アンバー/有利=グリーン/中間=グレー）。中の小箱は作らない ===== */
.verdict{ text-align:center; }
.vd-warn{ background:#fdf1e7; border-color:#e5c39a; }
.vd-ok{ background:#eef6f1; border-color:#bcdfce; }
.vd-even{ background:#f2f4f7; border-color:var(--line); }
.vd-msg{ font-size:14px; line-height:1.8; }
.vd-warn .vd-msg{ color:#7a4b12; }
.vd-ok .vd-msg{ color:#2c5a45; }
.vd-even .vd-msg{ color:#42505f; }
.vd-msg b{ font-size:16px; color:var(--navy); }
.vd-msg b.vd-side-t{ color:var(--toshi); }
.vd-msg b.vd-side-k{ color:var(--kuriage); }

/* ===== 前提ゾーン：有利判定＋勢力バー（座布団なし・中央）＝入力の下・スライダーの上 ===== */
.lean{ margin:14px auto 6px; text-align:center; }
.lean-head{ font-size:16px; font-weight:800; color:var(--navy); margin-bottom:14px; }
.lean-head b{ font-size:20px; }
.lean-head .lean-k{ color:var(--kuriage); }
.lean-head .lean-t{ color:var(--toshi); }
.lean-bars{ display:flex; justify-content:center; align-items:flex-end; gap:46px; min-height:130px; }
.lean-bar{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.lean-bh{ width:60px; border-radius:9px 9px 0 0; transition:height .28s cubic-bezier(.22,1,.36,1); }
.lean-bar--k .lean-bh{ background:var(--kuriage); }
.lean-bar--t .lean-bh{ background:var(--toshi); }
.lean-bar.is-lose{ opacity:.38; }
.lean-bar.is-win .lean-bh{ box-shadow:0 5px 16px rgba(22,50,79,.18); }
.lean-bl{ margin-top:8px; font-size:13px; font-weight:800; color:var(--navy); }
.lean-badge{ display:inline-block; margin-left:5px; font-size:10px; font-weight:800; color:#fff; border-radius:999px; padding:1px 8px; font-style:normal; vertical-align:1px; }
.lean-bar--k .lean-badge{ background:var(--kuriage); }
.lean-bar--t .lean-badge{ background:var(--toshi); }
.lean-diff{ margin-top:12px; font-size:13px; color:var(--muted); }
.lean-diff b{ color:var(--navy); font-size:16px; }
.lean-break{ margin-top:6px; font-size:12.5px; color:var(--navy); line-height:1.7; }
.lean-break b{ font-size:14px; }
@media (max-width:640px){ .lean-bars{ gap:32px; min-height:118px; } .lean-bh{ width:52px; } .lean-head b{ font-size:18px; } }

/* ===== 比較2カラム ===== */
.cmp{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:4px 0 8px; }
/* 各ルート：ヘッダーはベタ塗り＋白抜き、外枠線もその色でぐるっと（色帯は使わない）*/
.cmp-col{ border:1.5px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.cmp-col--kuriage{ border-color:var(--kuriage); }
.cmp-col--toshi{ border-color:var(--toshi); }
.cmp-head{ font-size:15px; font-weight:800; color:#fff; margin:0; padding:10px 16px; text-align:center; }
.cmp-col--kuriage .cmp-head{ background:var(--kuriage); }
.cmp-col--toshi .cmp-head{ background:var(--toshi); }
.cmp-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:8px 16px; border-top:1px dashed var(--line); }
.cmp-row:first-of-type{ border-top:0; padding-top:12px; }
.cmp-row:last-of-type{ padding-bottom:14px; }
/* 完済後に余剰を運用に回した分の区切り（繰上げルート内の別枠）*/
.cmp-sep{ margin:6px 16px 0; padding-top:9px; border-top:1.5px solid var(--kuriage); font-size:11px; font-weight:700; color:var(--kuriage); }
.cmp-row .cr-k{ font-size:12.5px; color:var(--muted); }
.cmp-row .cr-v{ font-size:15px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cmp-row .cr-v.cr-neg{ color:var(--neg); }
.cmp-foot{ grid-column:1 / -1; font-size:12.5px; color:var(--muted); line-height:1.7; margin:2px 0 0; }
.cmp-foot b{ color:var(--navy); }

/* ===== グラフ ===== */
#chartBox{ margin:6px 0 2px; }
.ch-svg{ width:100%; height:auto; display:block; }
.ch-grid{ stroke:#e7ebf1; stroke-width:1; }
.ch-ylab{ fill:var(--muted); font-size:11px; text-anchor:end; }
.ch-xlab{ fill:var(--muted); font-size:11px; text-anchor:middle; }
.ch-xlab-end{ font-weight:700; fill:var(--navy); }
.ch-l-cur{ fill:none; stroke:var(--navy); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.ch-l-kuriage{ fill:none; stroke:var(--kuriage); stroke-width:1.6; stroke-dasharray:5 4; opacity:.8; }
.ch-l-toshi{ fill:none; stroke:var(--toshi); stroke-width:1.6; stroke-dasharray:5 4; opacity:.8; }
.ch-legend{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:8px; font-size:12px; color:var(--muted); }
.ch-legend i{ display:inline-block; width:16px; height:3px; border-radius:2px; vertical-align:middle; margin-right:5px; }
.ch-sw-cur{ background:var(--navy); height:4px; }
.ch-sw-k{ background:var(--kuriage); }
.ch-sw-t{ background:var(--toshi); }
.ch-note{ font-size:12px; color:var(--muted); line-height:1.6; margin:4px 0 0; }

@media (max-width:640px){
  .cmp{ grid-template-columns:1fr; }
  .alloc-pct .ap-num{ font-size:32px; }
  .alloc-pct .ap-lab{ font-size:11px; }
  .alloc-wrap{ padding:16px 14px 18px; }
}