/* ============================================================
   CF表作成アプリ  |  Housing FP
   カラーパレット・レイアウト・CF表スタイル
   ============================================================ */
:root{
  /* ── ブランドカラー ── */
  --navy:#1e3a5f;
  --navy-d:#0f2744;
  --navy-l:#2d5282;
  --blue:#2d7dd2;        /* 収入ゾーン・バッジ */
  --teal:#0891b2;        /* マンション表示 */
  --red:#d63a2a;
  --red-l:#fc5b4a;       /* Excel支出色 */
  --red-bg:#fee9e7;
  --green:#0d8a20;
  --green-l:#14b027;     /* Excel緑（預貯金残高） */
  --green-bg:#e8f9eb;
  --amber:#b8860b;
  --amber-l:#ffc000;
  --amber-bg:#fff9e6;
  --plus:#0d8a20;
  --minus:#d63a2a;
  /* ── 共通 ── */
  --bg:#f0f4f8;
  --card:#fff;
  --border:#d0d8e4;
  --text:#1a202c;
  --muted:#5a6a7e;
  --light:#94a3b8;
  --gray-bg:#f7f9fc;
  --r:10px;
  --rs:6px;
  --sh:0 1px 3px rgba(15,39,68,.07),0 4px 14px rgba(15,39,68,.05);
}

/* ── リセット ── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;background:var(--bg);color:var(--text);font-size:13px;display:flex;flex-direction:column}

/* パネルリサイザー */
.panel-resizer-grip{
  width:14px;
  cursor:col-resize;
  flex-shrink:0;
  position:relative;
  z-index:10;
  touch-action:none;
  background-color:var(--border);
  background-image:radial-gradient(circle,rgba(255,255,255,.75) 2px,transparent 2px);
  background-size:8px 8px;
  background-position:center center;
  transition:background-color .15s;
  user-select:none;
  -webkit-user-select:none;
}
.panel-resizer-grip:hover,.panel-resizer-grip.dragging{
  background-color:var(--navy-l);
}
.panel-resizer-grip button{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:18px;height:36px;border:1px solid rgba(255,255,255,.4);border-radius:4px;
  background:var(--navy-l);color:#fff;font-size:10px;cursor:pointer;
  opacity:.5;transition:opacity .15s;padding:0;z-index:11;
}
.panel-resizer-grip:hover button,.panel-resizer-grip button:hover{opacity:1}

/* ============================================================
   ヘッダー
   ============================================================ */
.hdr{height:50px;background:var(--navy-d);display:flex;align-items:center;justify-content:space-between;padding:0 18px;flex-shrink:0;border-bottom:1px solid var(--navy-l)}
.hdr-logo{display:flex;align-items:center;gap:16px;color:#fff;font-weight:700;font-size:14px;letter-spacing:.02em}
.hdr-badge{background:var(--blue);color:#fff;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.04em}
.hdr-acts{display:flex;gap:6px;align-items:center}
.btn-h{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.15);padding:5px 12px;border-radius:5px;font-size:11px;cursor:pointer;font-family:inherit;transition:.15s;font-weight:500}
.btn-h:hover{background:rgba(255,255,255,.16)}
.live-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ============================================================
   2ペインレイアウト
   ============================================================ */
.layout{display:flex;flex-direction:row!important;flex:1;overflow:hidden}

/* 左パネル：入力フォーム */
.panel-l{width:430px;min-width:300px;flex:0 0 auto;overflow:hidden;background:var(--bg);border-right:2px solid var(--border);transition:width .25s ease,min-width .25s ease,opacity .25s ease}
.panel-l.hidden{display:none!important}
.panel-l::-webkit-scrollbar{width:3px}
.panel-l::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}

/* 右パネル：CF表 */
.panel-r{flex:1 1 0%;min-width:150px;overflow:hidden;display:flex;flex-direction:column}
.r-tabs{display:flex;background:var(--navy);padding:0 14px;gap:4px;flex-shrink:0;align-items:flex-end}
.rtab{padding:9px 20px 8px;border:none;background:rgba(255,255,255,.1);font-family:inherit;font-size:12px;color:rgba(255,255,255,.65);cursor:pointer;border-radius:8px 8px 0 0;transition:.15s;font-weight:600;letter-spacing:.02em;border:1px solid transparent;border-bottom:none;margin-bottom:0;position:relative;top:1px}
.rtab:hover{background:rgba(255,255,255,.18);color:rgba(255,255,255,.9)}
.rtab.on{background:var(--gray-bg);color:var(--navy);border-color:rgba(255,255,255,.15);font-weight:800;top:0;padding-top:10px}
/* シナリオタブ（CF表1, CF表2, ...） */
.scen-tabs{display:flex;align-items:flex-end;gap:3px}
.scen-tabs .rtab{display:inline-flex;align-items:center;gap:4px}
.stab-name{outline:none;border:none;background:transparent;font:inherit;color:inherit;width:auto;cursor:pointer;padding:0}
.stab-name:focus{background:rgba(255,255,255,.15);border-radius:3px;padding:0 3px;cursor:text}
.rtab.on .stab-name{color:var(--navy)}
.stab-rm{background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;font-size:12px;padding:0 0 0 2px;line-height:1}
.rtab.on .stab-rm{color:rgba(0,0,0,.3)}
.stab-rm:hover{color:#f87171}
.stab-add{padding:5px 10px;border:1px dashed rgba(255,255,255,.3);background:transparent;color:rgba(255,255,255,.5);border-radius:6px;cursor:pointer;font-size:13px;font-weight:700;transition:.15s;margin-bottom:1px}
.stab-add:hover{background:rgba(255,255,255,.1);color:#fff}
/* シナリオ追加モーダル */
.scen-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2000;display:flex;align-items:center;justify-content:center}
.scen-modal{background:#fff;border-radius:12px;padding:24px;width:300px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
/* 右パネル本体：シンプルに縦スクロールのみ */
.r-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:14px 16px}
.r-body::-webkit-scrollbar{width:6px}
.r-body::-webkit-scrollbar-track{background:#f0f4f8}
.r-body::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:3px}
.r-summary{margin-bottom:8px}
/* テーブル：横スクロール */
.tbl-wrap{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;border:1px solid var(--border);will-change:transform}
.tbl-wrap::-webkit-scrollbar{height:10px}
.tbl-wrap::-webkit-scrollbar-track{background:#e8ecf0}
.tbl-wrap::-webkit-scrollbar-thumb{background:#7b8fa3;border-radius:5px}
.tbl-wrap::-webkit-scrollbar-thumb:hover{background:#4a5e73}

/* ============================================================
   入力フォーム共通
   ============================================================ */
.fi{padding:12px 13px}
/* インデックスタブ（非表示） */
.sh-tab{display:none}
/* 固定ジャンプナビ（パネル下部） */
.panel-l{display:flex;flex-direction:column}
.panel-l>.fi{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.panel-l>.fi::-webkit-scrollbar{width:3px}
.panel-l>.fi::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}
.sec-jump{flex-shrink:0;z-index:50;background:var(--navy);display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:5px;border-top:1px solid rgba(255,255,255,.15)}
.sec-jump-btn{background:rgba(255,255,255,.1);color:#fff;border:none;border-radius:6px;padding:5px 4px;cursor:pointer;font-family:inherit;font-weight:700;transition:.15s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.2;opacity:.45}
.sec-jump-btn .sj-em{font-size:13px;line-height:1}
.sec-jump-btn .sj-lbl{font-size:9px}
.sec-jump-btn:hover{opacity:.75}
.sec-jump-btn.active{opacity:1;box-shadow:0 0 0 2px rgba(255,255,255,.5)}

/* セクション */
.sec{background:var(--card);border-radius:var(--r);margin-bottom:12px;box-shadow:var(--sh);overflow:hidden;border:1px solid var(--border)}
.sh{padding:9px 13px;color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;letter-spacing:.02em;background:var(--navy)}
.sh:hover{background:var(--navy-l)}
.stog{margin-left:auto;font-size:13px;transition:transform .2s}
.stog.on{transform:rotate(180deg)}
.sb{padding:14px}
.sb.col{display:none}

/* 物件タイプカード */
.type-row{display:flex;gap:8px;margin-bottom:9px}
.tc{flex:1;background:var(--card);border:2px solid var(--border);border-radius:var(--r);padding:10px 12px;cursor:pointer;transition:all .25s ease;display:flex;align-items:center;gap:8px;opacity:.6;transform:scale(.97)}
.tc:hover{border-color:var(--navy-l);background:#f0f4f8;opacity:.85;transform:scale(.99)}
.tc.on{border-color:var(--teal);background:linear-gradient(135deg,#e0f7fa,#eef6ff);opacity:1;transform:scale(1);box-shadow:0 0 0 2px rgba(8,145,178,.25),0 2px 8px rgba(8,145,178,.12)}
.tc-icon{font-size:22px}
.tc-lbl{font-size:12px;font-weight:700}
.tc-desc{font-size:10px;color:var(--muted);margin-top:1px}

/* トグルボタン（万が一シミュレーション等） */
.btn-tog{padding:6px 14px;border:2px solid var(--border);border-radius:var(--r);background:var(--card);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit}
.btn-tog:hover{border-color:var(--navy-l);background:#f0f4f8}
.btn-tog.on{border-color:var(--navy);background:#eef2f7;color:var(--navy)}
/* 万が一CF表の変更セル */
.mg-changed{background:rgba(194,24,91,.1)!important}
.mg-zero{background:rgba(194,24,91,.08)!important;color:#c2185b!important}

/* エラーバナー */
.err-bar{background:var(--red-bg);border:1.5px solid #fca5a5;border-radius:var(--rs);padding:8px 12px;margin-bottom:9px;display:none}
.err-bar.show{display:block}
.err-bar ul{margin:4px 0 0 15px;font-size:11px;color:var(--red);line-height:1.9}

/* グリッド */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.g4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px}
.fg{display:flex;flex-direction:column;gap:4px}

/* フォーム部品 */
.lbl{font-size:11px;font-weight:700;color:#4a5568;text-transform:uppercase;letter-spacing:.04em}
.req{color:var(--red);margin-left:2px}
.inp,.sel{border:1.5px solid var(--border);border-radius:var(--rs);padding:7px 10px;font-family:inherit;font-size:14px;color:var(--text);background:#fff;width:100%;transition:.15s}
.inp:focus,.sel:focus{outline:none;border-color:var(--navy-l);box-shadow:0 0 0 3px rgba(30,58,95,.15)}
.inp.err{border-color:var(--red);background:var(--red-bg)}
.inp[readonly]{background:var(--gray-bg);color:var(--blue);font-weight:700}

/* 未入力フィールド：点線ボーダー＋薄い背景 */
.inp:placeholder-shown{background:#f8f8f8;border-style:dashed;border-color:#ccc}
.inp::placeholder{color:#999;font-style:italic;font-weight:400;font-size:12px}
/* 値が0のフィールド（JSで付与） */
.inp.is-zero{color:#bbb;font-style:italic}

/* 年齢入力：上下スピナーを常時表示 */
.inp.age-inp{background:#f0f4ff;border-color:#b8c8e8;text-align:center;font-weight:700;font-size:14px;color:var(--navy);-moz-appearance:number-input}
.inp.age-inp::-webkit-inner-spin-button,.inp.age-inp::-webkit-outer-spin-button{opacity:1;height:30px;cursor:pointer}

/* 金額入力：スピナー非表示 */
.inp.amt-inp{-moz-appearance:textfield;text-align:right;background:#fffef8;border-color:#d4ccaa;font-size:15px;font-weight:700}
.inp.amt-inp::-webkit-inner-spin-button,.inp.amt-inp::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

.suf{display:flex}
.suf .inp{border-radius:var(--rs) 0 0 var(--rs);flex:1;min-width:0}
.sl{background:var(--gray-bg);border:1.5px solid var(--border);border-left:none;padding:7px 9px;font-size:11px;font-weight:600;color:#5a6a7e;border-radius:0 var(--rs) var(--rs) 0;white-space:nowrap}
.hint{font-size:10px;color:var(--muted);line-height:1.5}
.hint.ok{color:#3a8a3a}
.hint.ng{color:var(--red);font-weight:600}
.divider{border:none;border-top:1px solid var(--border);margin:10px 0}
.sub{font-size:12px;font-weight:700;color:var(--navy);margin-bottom:6px;display:flex;align-items:center;gap:5px;padding-bottom:4px;border-bottom:1px solid var(--border)}

/* ペルソナヘッダー（ご主人様・奥様） */
.persona{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--rs);margin-bottom:9px;background:#eef2f7;border:1px solid #c8d6e8}
.persona-icon{font-size:18px}
.persona-lbl{font-size:11px;font-weight:700;color:#2d7dd2}

/* 動的追加行（金利・生活費ステップなど） */
.drow{display:grid;gap:6px;align-items:center;background:var(--gray-bg);border-radius:var(--rs);padding:6px 8px;margin-bottom:5px;border:1px solid var(--border)}
.drow-4{grid-template-columns:55px 1fr 1fr auto}
.drow-5{grid-template-columns:1fr 1fr}/* 産休育休：2行2列 */
.dlbl{font-size:10px;font-weight:700;color:var(--navy)}
.btn-add{background:#eef2f7;color:var(--navy);border:1px solid #c8d6e8;border-radius:5px;padding:4px 10px;cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;transition:.15s}
.btn-add:hover{background:#dce6f0}
.btn-rm{background:var(--red-bg);color:var(--red);border:1px solid #fca5a5;border-radius:5px;padding:4px 7px;cursor:pointer;font-size:11px}
.btn-rm:hover{background:#fee2e2}

/* 生活費合計バー */
.lc-bar{background:#eef2f7;border:1px solid #c8d6e8;border-radius:var(--rs);padding:8px 12px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:8px}

/* 収入プレビュー */
.inc-prev{background:#eef2f7;border:1px solid #c8d6e8;border-radius:var(--rs);padding:9px 12px;margin-top:8px;display:none}
.inc-prev-t{font-weight:700;color:var(--navy);margin-bottom:4px;font-size:11px}

/* ============================================================
   CF表：サマリーカード
   ============================================================ */
.sum-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.sc{background:var(--card);border-radius:var(--r);padding:10px 13px;box-shadow:var(--sh);position:relative;overflow:hidden;border:1px solid var(--border)}
.sc::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;border-radius:4px 0 0 4px}
.sc.inc::before{background:var(--blue)}
.sc.exp::before{background:var(--red-l)}
.sc.bal::before{background:var(--green)}
.sc.dng::before{background:var(--red)}
.sc-lbl{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-left:8px}
.sc-val{font-size:20px;font-weight:800;font-family:'Cascadia Code','Consolas','Menlo',monospace;margin-top:2px;margin-left:8px}
.sc-sub{font-size:10px;color:var(--muted);margin-top:1px;margin-left:8px}

/* ============================================================
   CF表：テーブル共通
   ============================================================ */
.cf{border-collapse:collapse;min-width:100%;font-size:11px;font-family:'Cascadia Code','Consolas','Menlo',monospace;contain:layout style}
.cf th,.cf td{border-right:1px solid #ccd4e0;border-bottom:1px solid #ccd4e0;padding:3px 6px;white-space:nowrap;min-width:48px;width:48px;text-align:right}

/* 固定左2列（contain: paint でiOS再描画を抑制） */
.cf th:first-child,.cf td:first-child{position:-webkit-sticky;position:sticky;left:0;z-index:4;min-width:86px;max-width:86px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;text-align:left;font-size:10px;border-right:none!important;contain:layout style paint}
.cf th:nth-child(2),.cf td:nth-child(2){position:-webkit-sticky;position:sticky;left:86px;z-index:4;min-width:105px;max-width:105px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;text-align:left;font-size:10px;border-right:2px solid #6b8cae!important;contain:layout style paint}

/* 合計列（最右） */
.cf th:last-child{background:#1a2e4a!important;color:#fff!important;font-weight:700;font-size:10px;min-width:80px;width:80px;text-align:right;padding:3px 10px;border-left:10px solid #0f2744!important}
.cf tr:not(.ryr) td:last-child{font-weight:700;border-left:10px solid rgba(0,0,0,.08)!important;min-width:80px;width:80px;padding:3px 10px!important}
.rinc  td:last-child,.rinct td:last-child{background:var(--blue)!important;color:#fff!important}
.rexp  td:last-child,.rexpt td:last-child{background:var(--red-l)!important;color:#fff!important}
.rbal  td:last-child,.rsav  td:last-child{background:var(--green)!important;color:#fff!important}
.relapsed td:last-child{background:var(--navy-d)!important;color:#8aa4bc!important}
.rage  td:last-child{background:#d8e2f0!important;color:#1a2a3a!important}
.rev-h td:last-child,.rev-w td:last-child,.rev-c td:last-child{background:#ffe8cc!important;color:#7a3a00!important}

/* ============================================================
   CF表：行スタイル
   ============================================================ */

/* 年ヘッダー（縦スクロール固定） */
.ryr th{background:var(--navy);color:#fff;font-size:10px;text-align:center;padding:3px 6px;border-right:1px solid #2d5282;border-bottom:2px solid var(--navy);position:sticky;top:0;z-index:5;contain:layout style paint}
.ryr th:first-child,.ryr th:nth-child(2){text-align:left;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;background:var(--navy)!important;z-index:6;}

/* 経過年数：ネイビー地で年ヘッダーと連続 */
.relapsed td{background:var(--navy-d);color:#a0b4c8;font-size:10px;text-align:center;border-bottom:1px solid #2d5282;padding:2px 6px}
.relapsed td:first-child,.relapsed td:nth-child(2){text-align:left;color:#8aa4bc;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;font-size:10px;max-width:86px;overflow:hidden;text-overflow:ellipsis;background:var(--navy-d)!important}

/* 年齢行：薄い水色 */
.rage td{background:#e8f4fc;font-size:10px;color:#3a6a8a;text-align:center;border-bottom:1px solid #b8d8ee}
.rage td:first-child,.rage td:nth-child(2){text-align:left;color:#1a4a6a;background:#cce8f8!important;font-size:10px;font-weight:600;border-right:2px solid #9acce8}

/* イベント行：全員オレンジ系ベース、子どもは教育フェーズで色分け */
.rev-h td,.rev-w td,.rev-c td{background:#fffcf7;font-size:9px;text-align:center;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;color:#8a5a30;border-bottom:1px solid #ffe8cc}
.rev-h td:first-child,.rev-h td:nth-child(2),
.rev-w td:first-child,.rev-w td:nth-child(2),
.rev-c td:first-child,.rev-c td:nth-child(2){background:#ffe8cc!important;color:#7a3a00;font-weight:700;text-align:left;border-right:2px solid var(--border)}

/* 収入カテゴリ見出し */
.rcat.inc-cat td{background:#4a90d9;color:#fff;font-weight:700;font-size:10.5px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;padding:3px 6px;border-top:2px solid #2d6fa8;border-bottom:1px solid #3a7ec4}

/* 収入明細 */
.rinc td{background:#fbfdff;border-bottom:1px solid #e8f0fa;color:#1a2a3a}
.rinc td:first-child,.rinc td:nth-child(2){background:#e8f2fc!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;color:#1a3a5f;font-weight:600;border-right:2px solid #6b8cae!important}

/* 収入合計 */
.rinct td{background:var(--blue);color:#fff;font-weight:700;font-size:11px;border-top:2px solid #1a5fa0;border-bottom:2px solid #1a5fa0}
.rinct td:first-child,.rinct td:nth-child(2){background:var(--blue)!important;color:#fff!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;border-right:2px solid #6b8cae!important}

/* 支出カテゴリ見出し */
.rcat.exp-cat td{background:var(--red-l);color:#fff;font-weight:700;font-size:10.5px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;padding:3px 6px;border-top:2px solid var(--red);border-bottom:1px solid #e04030}

/* 支出明細 */
.rexp td{background:#fffaf9;border-bottom:1px solid #f4e8e4;color:#2a2a2a}
.rexp td:first-child,.rexp td:nth-child(2){background:#fdecea!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;color:#8b1a10;font-weight:500;border-right:2px solid #6b8cae!important}

/* 支出合計 */
.rexpt td{background:var(--red-l);color:#fff;font-weight:700;font-size:11px;border-top:2px solid var(--red);border-bottom:2px solid var(--red)}
.rexpt td:first-child,.rexpt td:nth-child(2){background:var(--red-l)!important;color:#fff!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;border-right:2px solid #6b8cae!important}

/* 年間収支 */
.rbal td{background:#fff;font-weight:700;font-size:11px;border-top:2px solid #ccc;border-bottom:1px solid #e0e6f0;color:#2a2a2a}
.rbal td.vn{background:#ffd6d0!important;color:var(--minus)!important;font-weight:700!important}
.rbal td:first-child,.rbal td:nth-child(2){background:#f5f8fc!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;font-weight:700;border-right:2px solid #6b8cae!important}

/* 預貯金残高：Excel #14B027（緑地白文字） */
.rsav td{background:var(--green-l);color:#fff;font-weight:700;font-size:11px;border-top:2px solid #0a7018;border-bottom:2px solid #0a7018}
.rsav td.vn{background:#c0392b!important;color:#fff!important;}
.rsav td:first-child,.rsav td:nth-child(2){background:var(--green-l)!important;color:#fff;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;border-right:2px solid #6b8cae!important}

/* ローン残高（補助情報） */
.rloan td{background:#f8fafb;color:var(--muted);font-size:10px;border-bottom:1px solid #e4eaf2}
.rloan td:first-child,.rloan td:nth-child(2){background:#eef2f7!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;color:var(--navy);font-weight:500;border-right:2px solid #6b8cae!important}
/* その他金融資産（補助情報） */
.rfin td{background:#f0f8ff;color:#1a4a7a;font-size:10px;font-weight:600;border-bottom:1px solid #cce4f8}
.rfin td:first-child,.rfin td:nth-child(2){background:#dbeeff!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;color:#1a3a6a;font-weight:700;border-right:2px solid #6b8cae!important}
.rfin td:last-child{background:#2d7dd2!important;color:#fff!important;font-weight:700}
/* 総金融資産合計 */
.rttl td{background:#1a4a7a;color:#fff;font-size:11px;font-weight:700;border-top:2px solid #0d2a4a;border-bottom:2px solid #0d2a4a}
.rttl td:first-child,.rttl td:nth-child(2){background:#1a4a7a!important;color:#fff!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Meiryo',sans-serif;border-right:2px solid #6b8cae!important}
.rttl td:last-child{background:#0d2a4a!important;color:#fff!important;font-weight:700}

/* 逝去年・退職年ハイライト */
td.col-death{background:rgba(150,150,150,.18)!important}
td.col-retire{background:rgba(255,220,0,.16)!important}

/* ============================================================
   教育費フェーズ色（イベント行・教育費明細行 共通）
   ============================================================ */
.ev-hoiku,.edu-hoiku{background:#ffedf6!important;color:#880044!important;font-weight:600!important}
.ev-elem ,.edu-elem {background:#eaf6ea!important;color:#1a5c20!important;font-weight:600!important}
.ev-mid  ,.edu-mid  {background:#fffcda!important;color:#5a4000!important;font-weight:600!important}
.ev-high ,.edu-high {background:#f3eeff!important;color:#3a008a!important;font-weight:600!important}
.ev-univ ,.edu-univ {background:#ffd8a0!important;color:#6b2000!important;font-weight:600!important}
.ev-senmon,.edu-senmon{background:#edf6ff!important;color:#003480!important;font-weight:600!important}

/* 数値カラー */
.vp{color:var(--plus);font-weight:600}
.vn{color:var(--minus);font-weight:700}
.vz{color:#bec8d4}

/* 手動上書きセル */
.cell-ovr{background:#fff9e0!important;outline:1.5px solid #f0c040!important;color:#7a5000!important;font-weight:700!important}
[contenteditable="true"]:hover{cursor:text;outline:1px dashed #94a3b8}
[contenteditable="true"]:focus{outline:2px solid var(--navy)!important;background:#fff!important}
/* fill handle */
[contenteditable="true"]{position:relative}
.fill-handle{position:absolute;right:-3px;bottom:-3px;width:7px;height:7px;background:var(--navy);border:1px solid #fff;cursor:crosshair;z-index:5;pointer-events:auto}
.fill-preview{background:#d0e8ff!important;outline:1.5px dashed #3b82f6!important}
.cell-selected{background:#cce0ff!important;outline:1.5px solid #3b82f6!important}
.btn-add-row{background:none;border:1px dashed rgba(100,140,200,.4);color:rgba(100,140,200,.7);font-size:11px;padding:2px 10px;border-radius:4px;cursor:pointer;font-family:inherit}
.btn-add-row:hover{background:rgba(100,140,200,.1);color:rgba(100,160,220,.9);border-color:rgba(100,160,220,.6)}
.radd td{border:none!important;padding:2px!important}
.btn-del-row{background:none;border:none;color:rgba(200,80,80,.5);font-size:12px;cursor:pointer;padding:0 4px;line-height:1}
.btn-del-row:hover{color:#e55}
.custom-lbl{cursor:text;min-width:60px}

/* ============================================================
   グラフ
   ============================================================ */
.ch-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ch-card{background:var(--card);border-radius:var(--r);padding:13px;box-shadow:var(--sh);border:1px solid var(--border)}
.ch-title{font-size:12px;font-weight:700;color:var(--navy);margin-bottom:8px;padding-bottom:7px;border-bottom:2px solid var(--border)}
.ch-wrap{position:relative;height:190px}

/* 空状態 */
.empty{text-align:center;padding:60px 20px;color:var(--muted)}

.empty-ic{font-size:48px;opacity:.3;margin-bottom:12px}

/* ============================================================
   印刷
   ============================================================ */
.print-footer{display:none}

@page{size:A4 landscape;margin:8mm 10mm}

@media print{
  *{box-sizing:border-box;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important}
  html,body{height:auto;overflow:visible;margin:0;padding:0}
  .hdr,.panel-l,.r-tabs,.btn-h,.btn-add,.btn-rm,.cf-summary{display:none!important}
  #pw-lock{display:none!important}
  .layout{display:block}
  .panel-r{overflow:visible;width:100%}
  .r-body{overflow:visible;padding:4px;width:100%}

  /* 前提条件バー */
  div[style*="border:1.5px solid #c8d6e8"]{overflow:visible;margin-bottom:4px!important}
  span[style*="border-radius:99px"]{font-size:10px!important;padding:2px 8px!important}

  /* CF表：複数ページOK、読みやすいサイズ */
  .tbl-wrap{overflow:visible;box-shadow:none;border:1px solid #ccd4e0}
  .cf{font-size:9px;table-layout:auto;border-collapse:collapse}
  .cf th,.cf td{padding:3px 5px;min-width:40px;white-space:nowrap;border-right:1px solid #ccd4e0;border-bottom:1px solid #ccd4e0;font-size:9px}
  .cf th:first-child,.cf td:first-child{position:static;min-width:70px;max-width:none;font-size:9px;text-align:left}
  .cf th:nth-child(2),.cf td:nth-child(2){position:static;min-width:90px;max-width:none;font-size:9px;border-right:2px solid #6b8cae!important;box-shadow:none;text-align:left}
  .cf th:last-child,.cf tr:not(.ryr) td:last-child{min-width:60px;padding:3px 6px!important;border-left:3px solid rgba(0,0,0,.15)!important;font-size:9px}

  /* 行 */
  .cf tr{line-height:1.4}
  .ryr th{font-size:9px!important;padding:3px 5px!important}
  .relapsed td{font-size:8px!important}
  .rage td{font-size:8px!important}
  .rev-h td,.rev-w td,.rev-c td{font-size:8px!important}

  /* 印刷フッター */
  .print-footer{
    display:flex!important;
    justify-content:space-between;
    align-items:flex-start;
    margin-top:8px;
    padding:8px 10px;
    border-top:1.5px solid #94a3b8;
    font-size:8px;
    color:#475569;
    line-height:1.8;
    gap:16px;
    page-break-inside:avoid
  }
  .pf-left{flex:1;font-size:8px}
  .pf-notes{flex:1.5;font-size:8px;color:#64748b;line-height:1.8}
}

/* ============================================================
   iPad / タブレット対応 (〜1366px) - 左右配置（PC風）
   ============================================================ */
@media screen and (max-width:1366px){
  /* 左右配置を維持、パネル幅を調整 */
  .panel-l{width:370px!important;min-width:340px!important}
  .r-body{padding:10px 12px}
  /* ヘッダー */
  .hdr{flex-wrap:wrap;gap:4px;padding:6px 10px}
  .btn-h{font-size:10px;padding:5px 10px;min-height:32px}
  /* タブバー */
  .r-tabs{padding:0 8px;flex-wrap:wrap;gap:2px}
  .rtab{font-size:11px;padding:8px 12px 7px}
  /* セクションジャンプ */
  .sec-jump{gap:2px;padding:4px}
  .sec-jump-btn .sj-em{font-size:12px}
  .sec-jump-btn .sj-lbl{font-size:8.5px}
  /* CF表セル */
  .cf th,.cf td{padding:2px 4px;min-width:44px;width:44px;font-size:10px}
  .cf th:first-child,.cf td:first-child{min-width:70px;max-width:70px;font-size:9px;position:sticky;left:0;z-index:4}
  .cf th:nth-child(2),.cf td:nth-child(2){min-width:88px;max-width:88px;font-size:9px;position:sticky;left:70px;z-index:4}
  /* サマリー */
  .cf-summary{flex-wrap:wrap;gap:6px}
  .sc{min-width:120px;padding:6px 10px}
  .sc-val{font-size:20px}
  /* タッチ操作用：タップしやすいサイズ */
  .inp,.sel{min-height:36px;font-size:14px!important}
  .btn-add,.btn-rm{min-height:32px}
  .btn-tog{min-height:34px}
  .tc{min-height:40px}
  select.sel{font-size:13px!important}
  .sh{font-size:12px;padding:8px 12px 8px 20px}
}
/* 縦向きiPad / 小型タブレット (〜820px) */
@media screen and (max-width:820px){
  .panel-l{width:320px!important;min-width:300px!important}
  .cf th,.cf td{min-width:40px;width:40px;font-size:9px;padding:2px 3px}
  .cf th:first-child,.cf td:first-child{min-width:60px;max-width:60px;font-size:8px;position:sticky;left:0;z-index:4}
  .cf th:nth-child(2),.cf td:nth-child(2){min-width:78px;max-width:78px;font-size:8px;position:sticky;left:60px;z-index:4}
  .sc{min-width:100px;padding:5px 8px}
  .sc-val{font-size:18px}
  .g3{grid-template-columns:1fr 1fr}
  .rtab{font-size:10px;padding:7px 10px 6px}
}

/* ============================================================
   固定列（カテゴリ・項目）背景色 - 透け防止
   各行の背景色を固定列にも確実に適用する
   ============================================================ */
.ryr         th:first-child,.ryr         th:nth-child(2){background:var(--navy)!important;color:#fff!important}
.relapsed    td:first-child,.relapsed    td:nth-child(2){background:var(--navy-d)!important;color:#8aa4bc!important}
.rage        td:first-child,.rage        td:nth-child(2){background:#cce8f8!important;color:#1a4a6a!important}
.rev-h       td:first-child,.rev-h       td:nth-child(2){background:#ffe8cc!important;color:#7a3a00!important}
.rev-w       td:first-child,.rev-w       td:nth-child(2){background:#ffe8cc!important;color:#7a3a00!important}
.rev-c       td:first-child,.rev-c       td:nth-child(2){background:#ffe8cc!important;color:#7a3a00!important}
.rcat.inc-cat td:first-child,.rcat.inc-cat td:nth-child(2){background:#4a90d9!important;color:#fff!important}
.rinc        td:first-child,.rinc        td:nth-child(2){background:#e8f2fc!important;color:#1a3a5f!important}
.rinct       td:first-child,.rinct       td:nth-child(2){background:var(--blue)!important;color:#fff!important}
.rcat.exp-cat td:first-child,.rcat.exp-cat td:nth-child(2){background:var(--red-l)!important;color:#fff!important}
.rexp        td:first-child,.rexp        td:nth-child(2){background:#fdecea!important;color:#8b1a10!important}
.rexpt       td:first-child,.rexpt       td:nth-child(2){background:var(--red-l)!important;color:#fff!important}
.rbal        td:first-child,.rbal        td:nth-child(2){background:#f5f8fc!important;color:#2a2a2a!important}
.rsav        td:first-child,.rsav        td:nth-child(2){background:var(--green-l)!important;color:#fff!important}
.rloan       td:first-child,.rloan       td:nth-child(2){background:#eef2f7!important;color:var(--navy)!important}
.rfin        td:first-child,.rfin        td:nth-child(2){background:#dbeeff!important;color:#1a3a6a!important}
.rttl        td:first-child,.rttl        td:nth-child(2){background:#1a4a7a!important;color:#fff!important}
/* 固定列の右境界線（項目列のみ）*/
.cf td:nth-child(2),.cf th:nth-child(2){border-right:2px solid #8aa0b8!important}
.cf td:first-child,.cf th:first-child{border-right:none!important}

/* ===== CF表フォーカス連動ハイライト ===== */

/* 行ハイライト：フォーカス中ずっと点灯 */
.cf-row-highlight td{
  background:rgba(251,191,36,.08) !important;
  border-top:1px solid rgba(245,158,11,.35) !important;
  border-bottom:1px solid rgba(245,158,11,.35) !important;
}
.cf-row-highlight td:first-child{
  border-left:3px solid rgba(245,158,11,.6) !important;
}
/* 固定列（カテゴリ・項目）は透けない */
.cf-row-highlight td:first-child,
.cf-row-highlight td:nth-child(2){
  background:#fffdf0 !important;
  color:#7c2d12 !important;
}

/* 範囲セル：fromAge〜toAge の列のみ強調 */
.cf-row-highlight td.cf-cell-range{
  background:rgba(251,191,36,.38) !important;
  outline:1px solid rgba(245,158,11,.6) !important;
  outline-offset:-1px;
  font-weight:600 !important;
  color:#5a2000 !important;
}

/* ===== セクション色統一（CF表との対応） ===== */
/* ①家族構成：水色系 */
#children-cont .btn-rm{border-color:#9acce8;color:#3a6a8a}
/* ②自己資産：緑系 */
#ins-savings-cont .drow,#securities-cont>div{border-color:#a7f3d0!important}
/* ③収入設定：ブルー系 */
#h-income-cont>div,#w-income-cont>div{background:#eef5ff!important;border-color:#b8d4f8!important}
#h-income-cont .dlbl,#w-income-cont .dlbl{color:#2d7dd2!important}
/* ペルソナ（収入）はブルー系に */
.persona.h,.persona.w{background:#eef5ff!important;border:1px solid #b8d4f8!important}

/* ── 入力中フィールド ハイライト（最後に定義して確実に上書き） ──
   .panel-l 内のすべての .inp に適用。age-inp / amt-inp より後に来るので詳細度問題なし */
.panel-l .inp.inp-active,
.panel-l .inp.age-inp.inp-active,
.panel-l .inp.amt-inp.inp-active {
  border-color: #f59e0b !important;
  background: #fffbeb !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.25) !important;
  color: var(--navy) !important;
}

/* ============================================================
   レスポンシブ対応（iPhone / スマホ）
   ============================================================ */
/* --- iPad 縦持ち（768px〜1024px）--- */
@media screen and (max-width:1024px){
  /* ヘッダー：ボタンが折り返せるように */
  .hdr{height:auto;padding:8px 12px;flex-wrap:wrap;gap:6px}
  .hdr-acts{flex-wrap:wrap;gap:5px}
  .btn-h{padding:7px 10px;font-size:11px}

  /* 入力パネル幅を調整 */
  .panel-l{width:380px;min-width:200px}

  /* 入力フィールド：タッチ対応（44px最小タップ領域） */
  .inp,.sel{font-size:16px!important;padding:9px 10px!important;min-height:44px}
  .inp.age-inp{font-size:16px!important;padding:9px!important;min-height:44px}
  .inp.amt-inp{font-size:16px!important;padding:9px 10px!important;min-height:44px}
  .lbl{font-size:12px}
  .sl{padding:9px;font-size:12px}
  .hint{font-size:11px}

  /* ボタン：タッチ対応 */
  .btn-add,.btn-rm{padding:8px 12px;font-size:12px;min-height:40px}
  .sh{padding:11px 13px;font-size:12px}
  .stog{font-size:15px}

  /* セクション */
  .drow{padding:8px;gap:6px}
  .dlbl{font-size:11px}

  /* タブ */
  .r-tabs{flex-wrap:wrap;gap:3px}

  /* 前提条件バー横スクロール */
  div[style*="border:1.5px solid #c8d6e8"]{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* リサイザー：タッチ操作用に幅を広げる */
  .panel-resizer-grip{width:22px!important;touch-action:none!important}

  /* iOS キーボード表示時の画面押し上げ防止 */
  html,body{position:fixed;width:100%;height:100%;overflow:hidden}
}

/* --- iPad かつ パネル非表示時に全幅活用 --- */
@media screen and (max-width:1024px){
  .panel-l.hidden{display:none!important}
  .panel-l.hidden+.panel-resizer-grip{display:none!important}
}

/* --- スマホ（〜480px） --- */

/* タッチデバイス全般（iPad Pro横向き等、1024px超も含む） */
@media (pointer:coarse) and (hover:none){
  .inp,.sel{font-size:16px!important;min-height:44px!important}
  .inp.age-inp,.inp.amt-inp{font-size:16px!important;min-height:44px!important}
  .btn-add,.btn-rm{min-height:44px!important}
  .btn-tog{min-height:40px!important;font-size:12px!important;padding:6px 10px!important}
  .sh{min-height:44px}
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button{
    -webkit-appearance:none;margin:0
  }
}

@media screen and (max-width:480px){
  .panel-l{width:280px;min-width:240px}
  .panel-l.hidden{display:none!important}
  #panel-resizer{display:none!important}
  .r-body{padding:8px}

  /* グリッド：1列に */
  .g2{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr}
  .fi{padding:8px}
  .sb{padding:10px}

  /* サマリーカード */
  .sum-row{grid-template-columns:1fr 1fr;gap:6px}

  /* CF表セル縮小 */
  .cf th,.cf td{padding:3px 4px;font-size:10px;min-width:42px;width:42px}
  .cf th:first-child,.cf td:first-child{min-width:65px;max-width:65px;font-size:9px}
  .cf th:nth-child(2),.cf td:nth-child(2){min-width:80px;max-width:80px;font-size:9px;left:65px!important}

  /* モーダル */
  div[style*="position:fixed"][style*="z-index:9999"] > div{
    width:95vw!important;max-width:95vw!important;max-height:90vh!important;padding:16px!important
  }
}