/* protection.js 用の追加スタイル（保険・年金・資産・税金・相続・老後・資産運用） */

/* ===== 共通の小見出し ===== */
.scr-insurance .sub-h, .scr-pension .sub-h, .scr-assets .sub-h, .scr-inheritance .sub-h, .scr-investment .sub-h { font-size: 13px; margin: 0 0 8px; color: var(--ink-2); }

/* ===== 保険：主役（必要保障額） ===== */
.scr-insurance .ins-hero { padding: 20px 22px; border-top: 4px solid var(--ai); }
.scr-insurance .ins-hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.scr-insurance .ins-hero-head h2 { font-size: 20px; }
.scr-insurance .ins-hero-head p { margin: 4px 0 0; max-width: 64ch; }
.scr-insurance .ins-hero-body { display: grid; grid-template-columns: 300px 1fr; gap: 24px; margin-top: 16px; align-items: center; }
.scr-insurance .ins-figs > div { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.scr-insurance .ins-figs span { color: var(--ink-2); font-size: 13px; }
.scr-insurance .ins-figs b { font-size: 26px; }
.scr-insurance .ins-figs b small { font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 2px; }
.scr-insurance .ins-figs .is-bad b { color: var(--shu); font-size: 32px; }
.scr-insurance .ins-figs .is-good b { color: var(--take); font-size: 32px; }
.scr-insurance .ins-figs p { margin: 10px 0 0; }
.scr-insurance .ins-props { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.scr-insurance .ins-props li { padding: 10px 14px; border-left: 4px solid var(--line); background: var(--surface-2); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.scr-insurance .ins-props li.t-bad { border-left-color: var(--shu); background: var(--shu-soft); }
.scr-insurance .ins-props li.t-warn { border-left-color: var(--kin); background: var(--kin-soft); }
.scr-insurance .ins-props li.t-good { border-left-color: var(--take); background: var(--take-soft); }
.scr-insurance .ins-props p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }

/* ===== 年金：主役（受給開始年齢） ===== */
.scr-pension .pen-hero { display: grid; grid-template-columns: 360px 1fr; gap: 24px; padding: 20px 22px; border-top: 4px solid var(--kin); }
.scr-pension .pen-hero h2 { font-size: 18px; }
.scr-pension .pen-big { margin: 12px 0 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.scr-pension .pen-big b { font-size: 40px; line-height: 1; color: var(--ai); }
.scr-pension .pen-big span { color: var(--ink-2); font-size: 13px; }
.scr-pension .pen-hero .field { margin-top: 14px; }
.scr-pension .pen-hero p { margin: 8px 0 0; }
.scr-pension .pen-special { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.scr-pension .pen-special li { display: grid; grid-template-columns: 72px 1fr; gap: 8px; align-items: start; font-size: 13px; }
.scr-pension .pen-special .badge { justify-content: center; }

/* ===== 資産：主役（資産の全体像） ===== */
.scr-assets { --sw0: var(--ai); --sw1: var(--take); --sw2: var(--kin); --sw3: #7A6FB0; --sw4: #3E9AA8; --sw5: var(--shu); }
.scr-assets .as-hero { display: grid; grid-template-columns: 1fr 260px 240px; gap: 24px; padding: 20px 22px; align-items: center; }
.scr-assets .as-big { font-size: 40px; font-weight: 700; line-height: 1.1; margin: 2px 0 12px; }
.scr-assets .as-big small { font-size: 14px; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.scr-assets .as-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.scr-assets .as-legend li { display: grid; grid-template-columns: 12px 1fr auto 44px; gap: 8px; align-items: center; font-size: 13px; }
.scr-assets .as-legend i { width: 10px; height: 10px; border-radius: 2px; }
.scr-assets .as-legend em { font-style: normal; color: var(--ink-3); text-align: right; font-size: 12px; }
.scr-assets .as-hero-k { display: grid; gap: 10px; }
.scr-assets .as-nisa { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.scr-assets .as-nisa:last-child { border-bottom: 0; }
.scr-assets .as-nisa .mini-bar { margin-bottom: 4px; }
.scr-assets .tbl .ctl input, .scr-assets .tbl select { min-width: 90px; }

/* ===== 税金：主役（給与の内訳バー） ===== */
.scr-tax .tx-hero { padding: 20px 22px; }
.scr-tax .tx-hero-h h2 { font-size: 18px; }
.scr-tax .tx-hero-h p { margin: 4px 0 0; }
.scr-tax .tx-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 16px; }
.scr-tax .tx-bar { display: flex; height: 26px; border-radius: 4px; overflow: hidden; margin: 8px 0 10px; gap: 2px; }
.scr-tax .tx-bar i { display: block; min-width: 2px; }
.scr-tax .tx-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px 16px; margin: 0; }
.scr-tax .tx-dl dt { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.scr-tax .tx-dl dt i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.scr-tax .tx-dl dd { margin: 0; font-weight: 700; font-size: 16px; }
.scr-tax .tx-hit td { background: var(--kin-soft); font-weight: 700; }

/* ===== 相続：主役 ===== */
.scr-inheritance .ih-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; padding: 20px 22px; align-items: center; }
.scr-inheritance .ih-hero h2 { font-size: 18px; }
.scr-inheritance .ih-figs { margin: 14px 0 8px; }
.scr-inheritance .ih-figs > div { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line-2); gap: 12px; }
.scr-inheritance .ih-figs span { font-size: 13px; color: var(--ink-2); }
.scr-inheritance .ih-figs b { font-size: 24px; }
.scr-inheritance .ih-figs b small { font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 2px; }
.scr-inheritance .ih-figs .is-bad b { color: var(--shu); font-size: 30px; }
.scr-inheritance .ih-figs .is-good b { color: var(--take); font-size: 30px; }
.scr-inheritance .note .field { margin-top: 10px; }

/* ===== 老後資金：主役 ===== */
.scr-retirement .rt-hero { padding: 20px 22px; border-top: 4px solid var(--take); }
.scr-retirement .rt-hero.is-bad { border-top-color: var(--shu); }
.scr-retirement .rt-hero-msg h2 { font-size: 24px; margin: 2px 0 4px; }
.scr-retirement .rt-hero.is-bad .rt-hero-msg h2 { color: var(--shu); }
.scr-retirement .rt-hero-msg p { margin: 0 0 12px; }
.scr-retirement .rt-bench { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.scr-retirement .rt-bench > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); display: flex; flex-direction: column; }
.scr-retirement .rt-bench span { font-size: 12px; color: var(--ink-2); }
.scr-retirement .rt-bench b { font-size: 20px; }
.scr-retirement .rt-bench .hl { border-color: var(--ai); background: var(--ai-soft); }
.scr-retirement .rt-prob { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scr-retirement .rt-prob > div { padding: 12px; border-radius: var(--radius-m); border: 1px solid var(--line); }
.scr-retirement .rt-prob span { display: block; font-size: 12px; color: var(--ink-2); }
.scr-retirement .rt-prob b { font-size: 26px; }
.scr-retirement .rt-prob .good b { color: var(--take); }
.scr-retirement .rt-prob .warn { background: var(--kin-soft); }
.scr-retirement .rt-prob .warn b { color: var(--kin); }
.scr-retirement .rt-prob .bad { background: var(--shu-soft); }
.scr-retirement .rt-prob .bad b { color: var(--shu); }

/* ===== 資産運用：主役（確率と7段階評価） ===== */
.scr-investment .iv-hero { display: grid; grid-template-columns: 340px 1fr; gap: 24px; padding: 20px 22px; }
.scr-investment .iv-rate { display: flex; flex-direction: column; margin: 6px 0 12px; }
.scr-investment .iv-rate b { font-size: 52px; line-height: 1; color: var(--ai); }
.scr-investment .iv-rate span { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.scr-investment .iv-rank { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px; }
.scr-investment .iv-rank i { height: 12px; background: var(--line-2); border-radius: 2px; }
.scr-investment .iv-rank i.on { background: var(--take); }
.scr-investment .iv-rank i.on.r1, .scr-investment .iv-rank i.on.r2 { background: var(--shu); }
.scr-investment .iv-rank i.on.r3, .scr-investment .iv-rank i.on.r4 { background: var(--kin); }
.scr-investment .iv-type { display: flex; align-items: baseline; gap: 12px; padding: 12px 14px; margin: 12px 0; background: var(--ai-soft); border-radius: var(--radius-m); }
.scr-investment .iv-type span { font-size: 12px; color: var(--ink-2); }
.scr-investment .iv-type b { font-size: 22px; color: var(--ai); }
.scr-investment .iv-type em { font-style: normal; color: var(--ink-3); font-size: 12px; margin-left: auto; }
.scr-investment .field + .field { margin-top: 8px; }

/* セグメントは内容幅にそろえる */
.scr-insurance .field > .seg, .scr-pension .field > .seg, .scr-investment .field > .seg { align-self: flex-start; }
.scr-tax .neg { color: var(--shu); } .scr-tax .pos { color: var(--take); }

/* ===== レスポンシブ ===== */
@media (max-width: 1100px) {
  .scr-assets .as-hero { grid-template-columns: 1fr 220px; }
  .scr-assets .as-hero-k { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .scr-insurance .ins-hero-body, .scr-pension .pen-hero, .scr-assets .as-hero, .scr-inheritance .ih-hero, .scr-investment .iv-hero { grid-template-columns: 1fr; }
  .scr-assets .as-hero-k { grid-template-columns: 1fr; }
  .scr-tax .tx-people { grid-template-columns: 1fr; }
  .scr-insurance .ins-hero, .scr-pension .pen-hero, .scr-assets .as-hero, .scr-tax .tx-hero, .scr-inheritance .ih-hero, .scr-retirement .rt-hero, .scr-investment .iv-hero { padding: 16px; }
  .scr-investment .iv-rate b { font-size: 44px; }
}