/* inputs.js 用の追加スタイル（.scr-<route> で始まるセレクタのみ） */

/* 共通：編集テーブル */
.scr-edit td { padding: 5px 8px; }
.scr-edit .ctl input, .scr-edit select { min-height: 30px; padding: 4px 7px; }
.scr-edit td:first-child { min-width: 140px; }
.scr-take { color: var(--take); }
.scr-shu { color: var(--shu); }
.scr-kin { color: var(--kin); }

/* 基本情報 */
.scr-basic-sum { display: flex; flex-direction: column; padding: 4px 0 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px; }
.scr-basic-sum span { font-size: 12px; color: var(--ink-2); }
.scr-basic-sum b { font-size: 30px; color: var(--ai); line-height: 1.2; }
.scr-basic-sum small { font-size: 13px; color: var(--ink-3); margin-left: 4px; font-weight: 400; }
.scr-basic-score { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.scr-basic-score b { display: block; font-size: 34px; color: var(--ai); line-height: 1.1; }
.scr-basic-score b small { font-size: 13px; color: var(--ink-3); font-weight: 400; }
.scr-basic-score p { margin: 6px 0 0; color: var(--ink-2); }
.scr-basic-coef { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border-radius: var(--radius-s); overflow: hidden; }
.scr-basic-coef > div { background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; }
.scr-basic-coef span { font-size: 12px; color: var(--ink-2); }
.scr-basic-coef b { font-size: 22px; color: var(--ink); }
.scr-basic-coef small { font-size: 11.5px; color: var(--ink-3); }

/* 家族：扶養期間の帯 */
.scr-family-gantt { position: relative; padding-top: 22px; }
.scr-family-axis { position: relative; height: 18px; margin-left: 140px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.scr-family-axis span { position: absolute; top: 0; font-size: 11px; color: var(--ink-3); transform: translateX(-2px); }
.scr-family-gantt-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; height: 34px; }
.scr-family-gantt-row > span { font-size: 13px; }
.scr-family-gantt-row small { color: var(--ink-3); margin-left: 6px; font-size: 11.5px; }
.scr-family-track { position: relative; height: 14px; background: var(--line-2); border-radius: 7px; }
.scr-family-track i { position: absolute; top: 0; height: 100%; border-radius: 7px; }
.scr-family-track i.dep { background: var(--ai-soft); border: 1px solid color-mix(in srgb, var(--ai) 35%, transparent); }
.scr-family-track i.tok { background: var(--ai); opacity: .75; }
.scr-family-track b.ind { position: absolute; top: -3px; width: 12px; height: 20px; margin-left: -6px; border-radius: 3px; background: var(--kin); }
.scr-family-key { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: middle; margin-left: 10px; }
.scr-family-key.dep { background: var(--ai-soft); border: 1px solid var(--ai); }
.scr-family-key.tok { background: var(--ai); }
.scr-family-key.ind { background: var(--kin); width: 8px; }

/* 健康情報 */
.scr-health-lock { border-color: color-mix(in srgb, var(--kin) 50%, var(--line)); }
.scr-health-lock h3 { font-size: 16px; }
.scr-health-lock svg { color: var(--kin); flex: none; }
.scr-health-blur { margin-top: 16px; display: grid; gap: 12px; filter: blur(3px); opacity: .5; pointer-events: none; }
.scr-health-blur .card-b { height: 90px; }
.scr-health .note.warn { margin-bottom: 14px; }
.scr-health-hist { display: grid; grid-template-columns: 1.4fr 0.8fr 1.6fr auto; gap: 10px; align-items: end; padding: 10px; background: var(--surface-2); border-radius: var(--radius-s); }
.scr-health-signal { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radius-m); margin-bottom: 8px; }
.scr-health-signal .dot { width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 2px; }
.scr-health-signal p { margin: 4px 0 0; }
.scr-health-signal.good { background: var(--take-soft); } .scr-health-signal.good .dot { background: var(--take); }
.scr-health-signal.ev { background: var(--kin-soft); } .scr-health-signal.ev .dot { background: var(--kin); }
.scr-health-signal.bad { background: var(--shu-soft); } .scr-health-signal.bad .dot { background: var(--shu); }
.scr-health-grid td, .scr-health-grid th { padding: 4px 8px; }
.scr-health-grid td:first-child { white-space: nowrap; font-size: 12.5px; }
.scr-health-grid input { min-height: 28px; padding: 3px 6px; min-width: 84px; }
.scr-health-grid th input[type=date] { min-width: 130px; font-weight: 400; }
.scr-health-grid td.scr-health-warn input { background: var(--kin-soft); border-color: var(--kin); }
.scr-health-grid tr.scr-health-calc td { background: var(--surface-2); }

/* 収入 */
.scr-income-take .card-b { padding-top: 18px; }
.scr-income-big { font-size: 40px; font-weight: 700; color: var(--ai); line-height: 1.1; }
.scr-income-big small, .scr-income-total small { font-size: 14px; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.scr-income-total { font-size: 22px; font-weight: 700; padding: 3px 0; }
.scr-income-bar { display: flex; height: 26px; border-radius: 5px; overflow: hidden; margin: 14px 0 10px; background: var(--line-2); }
.scr-income-bar i { display: block; height: 100%; }
.scr-income-bar .net, .scr-income-legend .k.net { background: var(--ai); }
.scr-income-bar .soc, .scr-income-legend .k.soc { background: color-mix(in srgb, var(--ink-3) 70%, var(--surface)); }
.scr-income-bar .it, .scr-income-legend .k.it { background: color-mix(in srgb, var(--ink-3) 45%, var(--surface)); }
.scr-income-bar .rt, .scr-income-legend .k.rt { background: color-mix(in srgb, var(--ink-3) 25%, var(--surface)); }
.scr-income-legend li { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 6px; padding: 5px 0; }
.scr-income-legend li.tot { grid-template-columns: 1fr auto; font-weight: 700; border-top: 1px solid var(--line); }
.scr-income-legend .k { width: 12px; height: 12px; border-radius: 3px; }
.scr-income-sev { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; padding: 12px; background: var(--kin-soft); border-radius: var(--radius-m); }
.scr-income-sev span { display: block; font-size: 12px; color: var(--ink-2); }
.scr-income-sev b { font-size: 16px; }
.scr-income-sev div:last-child b { color: var(--kin); font-size: 20px; }

/* 支出 */
.scr-expense-sum { font-size: 13px; color: var(--ink-2); }
.scr-expense-sum b { font-size: 18px; color: var(--ink); margin: 0 2px; }
.scr-expense-back { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--surface-2); border-radius: var(--radius-s); }
.scr-expense-back .ctl input { max-width: 110px; }

/* 教育 */
.scr-edu-plan tr.past td { color: var(--ink-3); }
.scr-edu-plan tr.past .seg, .scr-edu-plan tr.past select { opacity: .55; }
.scr-edu-hero .card-b { padding-top: 18px; }
.scr-edu-big { font-size: 40px; font-weight: 700; color: var(--ai); line-height: 1.1; }
.scr-edu-big small { font-size: 14px; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.scr-edu-years { max-height: 380px; overflow: auto; }
.scr-edu-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scr-edu-cmp > div { padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-s); display: flex; flex-direction: column; }
.scr-edu-cmp span { font-size: 12px; color: var(--ink-2); }
.scr-edu-cmp b { font-size: 20px; }
.scr-edu-cmp small { font-size: 11.5px; color: var(--ink-3); }
.scr-edu-alt { align-items: center; }
.scr-edu-diff { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--radius-m); }
.scr-edu-diff span { font-size: 12px; color: var(--ink-2); }
.scr-edu-diff b { font-size: 26px; }
.scr-edu-diff.up { background: var(--shu-soft); } .scr-edu-diff.up b { color: var(--shu); }
.scr-edu-diff.down { background: var(--take-soft); } .scr-edu-diff.down b { color: var(--take); }
.scr-edu-diff .btn { align-self: flex-start; }

/* 住宅 */
.scr-housing-type .seg span { padding: 7px 16px; }
.scr-housing-hero .card-b { padding-top: 18px; }
.scr-housing-big { font-size: 40px; font-weight: 700; color: var(--ai); line-height: 1.1; margin-bottom: 8px; }
.scr-housing-big small { font-size: 14px; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.scr-housing-burden { margin-top: 12px; }
.scr-housing-gauge { position: relative; height: 10px; border-radius: 5px; background: var(--line-2); margin: 6px 0 4px; }
.scr-housing-gauge i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.scr-housing-gauge i.good { background: var(--take); } .scr-housing-gauge i.ev { background: var(--kin); } .scr-housing-gauge i.bad { background: var(--shu); }
.scr-housing-gauge span { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-3); }
.scr-housing-effect { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.scr-housing-effect > div { padding: 10px 12px; background: var(--kin-soft); border-radius: var(--radius-s); display: flex; flex-direction: column; }
.scr-housing-effect span { font-size: 12px; color: var(--ink-2); }
.scr-housing-effect b { font-size: 20px; color: var(--kin); }
.scr-housing-effect small { font-size: 11.5px; color: var(--ink-3); }
.scr-housing-cost { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-s); font-size: 13px; }
.scr-housing-cost .ctl { width: 110px; }
.scr-housing-sch { max-height: 360px; overflow: auto; }

/* 車・ローン */
.scr-loans-item { padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.scr-loans-item:first-child { padding-top: 0; }
.scr-loans-revo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.scr-loans-revo > div { padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-s); display: flex; flex-direction: column; }
.scr-loans-revo span { font-size: 12px; color: var(--ink-2); }
.scr-loans-revo b { font-size: 18px; }

@media (max-width: 860px) {
  .scr-health-hist { grid-template-columns: 1fr; }
  .scr-family-axis { margin-left: 96px; }
  .scr-family-gantt-row { grid-template-columns: 96px 1fr; }
  .scr-income-sev, .scr-housing-effect, .scr-edu-cmp, .scr-basic-coef { grid-template-columns: 1fr; }
  .scr-income-big, .scr-edu-big, .scr-housing-big { font-size: 32px; }
}

/* 画面直下のカード・グリッドの間隔 */
.scr-basic > .card, .scr-basic > .grid, .scr-family > .card, .scr-family > .grid, .scr-health > .card, .scr-health > .grid,
.scr-income > .card, .scr-income > .grid, .scr-income > .stack, .scr-expense > .card, .scr-expense > .grid,
.scr-education > .card, .scr-education > .grid, .scr-housing > .card, .scr-housing > .grid,
.scr-car > .card, .scr-car > .grid, .scr-loans > .card, .scr-loans > .grid { margin-bottom: 16px; }
.scr-edit .ctl input[type=number] { min-width: 72px; }

/* グリッド内の縦積みが中身の幅で広がらないようにする */
.scr-basic .grid > *, .scr-family .grid > *, .scr-health .grid > *, .scr-income .grid > *, .scr-expense .grid > *,
.scr-education .grid > *, .scr-housing .grid > *, .scr-car .grid > *, .scr-loans .grid > * { min-width: 0; }
.scr-housing .card-h, .scr-expense .card-h, .scr-income .card-h, .scr-education .card-h { flex-wrap: wrap; }