/* ════════════════════════════════════════
   asobito β3 — main.css
   UI Design: Professional Light — 会計・管理業務に最適化された業務UI
   ════════════════════════════════════════ */

/* ────────────────────────────────
   RESET & VARIABLES
──────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ── Background layers（design-tokens.css 経由） */
  --bg:var(--bg-app);          /* #FDFDFF */
  --surf:var(--bg-muted);      /* #F7F8F9 */
  --surf-h:#F0F2F5;
  --bg-subtle:#FFFFFF;
  --bg-active:#F5F6F8;
  /* ── Border */
  --bdr:var(--neutral-border); /* #D0D5DD */
  --bdr-s:#EAECEF;
  /* ── Text hierarchy */
  --t1:var(--text-primary);    /* #1A1F36 */
  --t2:var(--text-main);       /* #3C4257 */
  --t3:var(--text-sub);        /* #697386 */
  --t4:var(--text-muted);      /* #9AA3B2 */
  /* ── Semantic — Step 3/4 で更新 */
  --accent:#2563EB;
  --accent-h:#1D4ED8;
  --accent-d:#EFF6FF;
  --accent-t:#1E40AF;
  --green:#16A34A;  --green-d:#ECFDF5;
  --amber:#F59E0B;  --amber-d:#FFFBEB;
  --red:#DC2626;    --red-d:#FEF2F2;
  /* ── Component backgrounds */
  --card-bg:var(--bg-surface); /* #FFFFFF */
  --topbar-bg:#FFFFFF;
  --sticky-bg:#FFFFFF;
  --modal-bg:#FFFFFF;
  /* ── Layout constants */
  --sw:240px;--th:52px;
  --r:6px;--rs:4px;--rc:6px;
  --fin-right-col-w: 80px;
}
html,body{
  height:100%;
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1.6;
  color:var(--t1);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Typography enforcement — form 系要素は継承が効かないため明示指定 */
button,input,textarea,select,table{font-family:var(--font-sans);}
h1,h2,h3{font-weight:var(--fw-semibold);}
body{
  background:var(--bg);
}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#9CA3AF}

/* ────────────────────────────────
   APP SHELL
──────────────────────────────── */
.app{display:flex;height:100vh;overflow:hidden}

/* ────────────────────────────────
   SIDEBAR — distinctly separated from content
──────────────────────────────── */
.sidebar{
  width:var(--sw);min-width:var(--sw);
  background:var(--sb-bg);      /* ダーク #0E1117 */
  border-right:1px solid var(--sb-bdr);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.sidebar-logo{padding:16px 16px 12px;border-bottom:1px solid var(--sb-bdr)}

/* ロール非表示 */
.role-hidden{display:none!important;}
.logo-mark{
  font-size:16px;font-weight:600;letter-spacing:-.02em;
  color:var(--sb-active);
}
.logo-meta{display:flex;align-items:center;gap:6px;margin-top:3px}
.logo-sub{font-size:11px;color:var(--sb-txt);letter-spacing:.01em}
.logo-beta{font-size:9px;padding:2px 6px;background:rgba(13,148,136,0.15);color:var(--sb-accent);border-radius:3px;font-weight:600;border:1px solid rgba(13,148,136,0.35);letter-spacing:.04em}
.sidebar-nav{flex:1;overflow-y:auto;padding:4px 0;scrollbar-width:thin;scrollbar-color:#334155 transparent}
.sidebar-nav::-webkit-scrollbar{width:3px}
.sidebar-nav::-webkit-scrollbar-thumb{background:#C8CDD5;border-radius:2px}
.nav-group{margin-bottom:2px}
.nav-group-label{
  display:block;padding:16px 12px 4px;
  font-size:10px;font-weight:500;color:var(--sb-group);
  letter-spacing:.08em;text-transform:uppercase;
}
.nav-item{
  display:flex;align-items:center;gap:8px;
  padding:0 12px;height:36px;margin:1px 0;
  cursor:pointer;color:var(--sb-txt);
  border-radius:0;
  transition:background .12s,color .12s;position:relative;
  font-size:13px;font-weight:400;user-select:none;
}
.nav-item:hover{background:rgba(255,255,255,0.06);color:var(--sb-active);border-radius:var(--menu-hover-radius)}
.nav-item.active{
  color:var(--sb-active);font-weight:500;
  background:var(--sb-act-bg);
  border:none;
  border-left:2px solid var(--sb-accent);
  padding-left:10px;
}
.nav-item.active::before{display:none}
.nav-icon{width:15px;height:15px;flex-shrink:0;color:var(--sb-txt)}
.nav-item.active .nav-icon{color:var(--sb-accent)}
.nav-item:hover .nav-icon{color:var(--sb-active)}
.nav-badge{
  margin-left:auto;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;font-size:10px;font-weight:500;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-d);color:var(--accent);
}
.nav-badge.danger{background:#FEE2E2;color:#B91C1C}
.nav-badge.warn{background:#FFFBEB;color:#92400E}
.gov-badge{
  display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  padding:4px 10px;background:rgba(202,138,4,0.15);color:#CA8A04;
  border-radius:6px;font-size:11px;font-weight:500;border:1px solid rgba(202,138,4,0.30);
}
.gov-dot{width:5px;height:5px;border-radius:50%;background:#CA8A04;animation:p-amber 2s infinite}
@keyframes p-amber{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* ────────────────────────────────
   MAIN
──────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
.topbar{
  height:var(--th);min-height:var(--th);display:flex;align-items:center;
  justify-content:space-between;
  padding:0 20px;gap:0;
  background:var(--topbar-bg);
  border-bottom:1px solid var(--bdr);
  position:relative;z-index:10;
}
.topbar-state{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:0 12px;
}
.topbar-right{flex-shrink:0;display:flex;align-items:center;gap:10px}
.topbar-logo{display:flex;align-items:center;gap:5px;flex-shrink:0}
.topbar-logo-name{font-size:15px;font-weight:600;color:var(--t1);letter-spacing:-.01em}
.topbar-logo-beta{font-size:9px;padding:2px 6px;background:rgba(13,148,136,0.12);color:var(--accent);border-radius:3px;font-weight:600;border:1px solid rgba(13,148,136,0.35);letter-spacing:.04em}
.chip{
  font-size:12px;padding:3px 10px;border-radius:6px;font-weight:500;
  background:var(--surf);color:var(--t2);border:1px solid var(--bdr);
}
.chip.live{background:var(--green-d);color:var(--green);border-color:rgba(22,163,74,0.25)}
.chip.live::before{content:'●';margin-right:5px;font-size:7px;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.avatar{
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  background:#EFF6FF;border:1px solid #DBEAFE;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:500;color:#2563EB;transition:opacity .15s;
}
.avatar:hover{opacity:.8}
.topbar-logout-btn{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--bdr);border-radius:6px;
  color:#6B7280;cursor:pointer;transition:background .12s;flex-shrink:0;
  appearance:none;-webkit-appearance:none;padding:0;
}
.topbar-logout-btn:hover{background:var(--surf);}
.biz-rename-group{display:flex;align-items:center;gap:4px}
.biz-rename-icon-btn{
  opacity:0;transition:opacity .15s;
  background:none;border:none;cursor:pointer;
  color:var(--t3);padding:3px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.biz-rename-group:hover .biz-rename-icon-btn{opacity:1}
.biz-rename-icon-btn:hover{color:var(--t1);background:var(--surf)}

/* ────────────────────────────────
   PAGES
──────────────────────────────── */
.pages{flex:1;overflow:hidden;position:relative}
.page{
  position:absolute;inset:0;overflow-y:auto;padding:24px;
  display:none;
}
.page.active{display:block;}

/* ────────────────────────────────
   GRID
──────────────────────────────── */
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.g32{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.g23{display:grid;grid-template-columns:1fr 2fr;gap:16px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}

/* ────────────────────────────────
   CARD — clean professional
──────────────────────────────── */
.card{
  background:var(--card-bg);
  border:1px solid var(--bdr);
  border-radius:var(--rc);
  padding:16px 20px;position:relative;
}
.card::before{display:none}
.card::after{display:none}
.card-title{font-size:13px;font-weight:600;color:var(--t2);margin-bottom:12px}
.card-heading{font-size:13px;font-weight:600;color:var(--t1);letter-spacing:-.01em;line-height:1.4}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:10px;margin-bottom:14px;
  border-bottom:1px solid var(--bdr);
}

/* ────────────────────────────────
   KPI CARD — clean professional
──────────────────────────────── */
.kpi{
  background:var(--card-bg);
  border:1px solid var(--bdr);
  border-radius:var(--rc);
  padding:16px 20px 14px;position:relative;
  cursor:default;
}
.kpi::before{display:none}
.kpi-label{font-size:12px;font-weight:500;color:var(--t3);margin-bottom:8px;letter-spacing:.01em;display:flex;align-items:center;gap:6px;text-transform:none}
.kpi-value{font-size:18px;font-weight:600;color:var(--t1);line-height:1.2;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi-unit{font-size:12px;font-weight:500;color:var(--t3);margin-left:2px}
.kpi-delta{
  display:inline-flex;align-items:center;gap:4px;margin-top:8px;
  font-size:11px;font-weight:500;padding:2px 7px;border-radius:4px;
}
.kpi-delta.pos{color:var(--green);background:var(--green-d)}
.kpi-delta.neg{color:var(--red);background:var(--red-d)}
.kpi-delta.neu{color:var(--t2);background:var(--surf)}
.kpi-icon{
  position:absolute;top:18px;right:18px;
  width:36px;height:36px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
}
.kpi-icon-blue{background:var(--blue-soft);border:1px solid rgba(111,143,228,0.20)}
.kpi-icon-green{background:var(--green-d);border:1px solid rgba(22,163,74,0.20)}
.kpi-icon-amber{background:var(--amber-d);border:1px solid rgba(202,138,4,0.20)}
.kpi-icon-red{background:var(--red-d);border:1px solid rgba(220,38,38,0.20)}
.kpi-icon-purple{background:#F5F3FF;border:1px solid rgba(124,58,237,0.20)}
.kpi-glow{display:none}
/* ユニットエコノミクス KPI サマリ行 */
.kpi-card{
  background:var(--card-bg);
  border:1px solid var(--bdr);
  border-radius:var(--rc);
  padding:16px 20px;
  min-width:0;
}

/* ── Master Card Selection UI ─────────────────────── */
.page-master-inner{max-width:1200px;margin:0 auto;}
.master-card-area{margin-bottom:20px;}
.mcard-group{margin-bottom:16px;}
.mcard-group-label{
  font-size:11px;font-weight:600;letter-spacing:0.08em;color:var(--t3);
  text-transform:uppercase;margin-bottom:12px;
}
.mcard-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
@media(max-width:900px){.mcard-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.mcard-grid{grid-template-columns:1fr;}}
.mcard{
  background:var(--card-bg);border:1px solid var(--bdr);border-radius:10px;
  padding:16px 18px;text-align:left;cursor:pointer;outline:none;
  width:100%;transition:border-color 150ms,box-shadow 150ms;
  min-height:84px;display:flex;flex-direction:column;justify-content:space-between;
}
.mcard:hover{border-color:var(--accent);box-shadow:0 2px 12px rgba(0,0,0,0.08);}
.mcard:hover .mcard-title{color:var(--accent);}
.mcard.active{background:var(--blue-soft);border-color:var(--accent);}
.mcard-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.mcard-title{font-size:14px;font-weight:500;color:var(--t2);transition:color 150ms;}
.mcard.active .mcard-title{color:var(--accent);}
.mcard-sub{font-size:12px;color:var(--t3);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mcard-badge{
  font-size:11px;font-weight:400;padding:2px 8px;border-radius:10px;
  white-space:nowrap;background:var(--surf);color:var(--t3);
}
.mcard-badge--empty{background:#FEF2F2;color:#EF4444;}
/* 会計データ取込カード: primary強調 */
.mcard--primary{border-color:var(--accent);background:linear-gradient(135deg,#f0fdf9 0%,#fff 60%);}
.mcard--primary .mcard-title{color:var(--accent);}
.mcard--primary:hover{box-shadow:0 4px 16px rgba(13,148,136,0.15);}
/* 反映状況バッジ */
.mcard-status-badge{font-size:11px;font-weight:500;border-radius:10px;padding:2px 8px;white-space:nowrap;}
.mcard-status-badge--pending{background:#FEF9C3;color:#A16207;}
.mcard-status-badge--ok{background:var(--surf);color:var(--t3);}

/* ── Master Detail Area ───────────────────────────── */
.master-detail{border-top:1px solid var(--bdr);padding-top:20px;}
.master-detail-hd{margin-bottom:16px;}
.master-detail-ctx{font-size:11px;color:var(--t3);font-weight:500;margin-bottom:2px;}
.master-detail-title{font-size:15px;font-weight:600;color:var(--t1);}
.master-back-btn{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--t3);background:none;border:none;cursor:pointer;padding:4px 8px 4px 4px;border-radius:4px;margin-right:4px;}
.master-back-btn:hover{background:var(--surf-h);color:var(--t2);}
/* btn-text: 組織変更などテキスト系ナビボタン */
.btn-text{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--t3);background:none;border:none;border-radius:5px;padding:4px 8px;cursor:pointer;transition:background 0.15s,color 0.15s;font-family:var(--font-sans);}
.btn-text:hover{background:var(--surf);color:var(--t2);}
.kpi-label{
  font-size:12px;
  color:var(--t3);
  font-weight:400;
  margin-bottom:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.kpi-value{
  font-size:22px;
  font-weight:600;
  color:var(--t1);
  line-height:1.2;
  letter-spacing:-.02em;
}
.kpi-unit{
  font-size:13px;
  font-weight:400;
  color:var(--t2);
  margin-left:2px;
}
.kpi-val{font-size:var(--fs-kpi);font-weight:500;color:var(--t1);letter-spacing:-.03em;line-height:1.1}
.kpi-sub{font-size:11px;color:var(--t3);margin-top:4px}
.kpi-value.state-good  { color:var(--green); }
.kpi-value.state-warn  { color:var(--amber); }
.kpi-value.state-bad   { color:var(--red); }
.kpi-value.state-empty { color:var(--t3); font-weight:400; }
.tc-green{color:var(--green)}
.tc-amber{color:var(--amber)}
.tc-blue{color:var(--accent)}

/* ────────────────────────────────
   SECTION HEADER — Tailwind UI page heading style
──────────────────────────────── */
.sec-hd{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.sec-title{
  font-size:16px;font-weight:600;color:var(--t1);letter-spacing:-.02em;line-height:1.3;
}
.sec-sub{font-size:13px;color:var(--t3);line-height:1.5}

/* ────────────────────────────────
   TABLE — clean professional
──────────────────────────────── */
.tbl{width:100%;border-collapse:collapse}
.tbl th{
  text-align:left;padding:8px 12px;font-size:12px;font-weight:600;
  color:var(--t2);
  border-bottom:1px solid var(--bdr-s);background:#FFFFFF;
  white-space:nowrap;letter-spacing:0;
}
.tbl td{
  padding:9px 12px;font-size:13px;color:var(--t2); /* 通常数値は#374151 */
  border-bottom:1px solid var(--bdr-s);border-right:none;vertical-align:middle;
}

/* ── TABLE ALIGNMENT SYSTEM ─────────────────────────────────
   配置は「データの性質」で決める。
   テキスト（名称・説明）: 左 — 行頭から読むため
   数値（金額・スコア・件数）: 右 — 桁位置を揃えて大小比較しやすくする
   ステータス・バッジ・フラグ: 中央 — 列幅の中で視覚的に目立たせる
   日付: 左 — 書式固定なので桁揃え不要、読み順左から
   アクション（ボタン）: 右 — テーブル右端にまとめることで動線統一
─────────────────────────────────────────────────────────── */
/* 左揃え（デフォルト・テキスト・日付） */
.ta-l { text-align: left !important; }
/* 右揃え（数値・金額）— tabular-nums で桁位置固定 */
.ta-r { text-align: right !important; font-variant-numeric: tabular-nums; }
/* 中央揃え（バッジ・ステータス・フラグ） */
.ta-c { text-align: center !important; }

/* th にも同じ向きを強制（ヘッダーとデータを必ず同一方向に） */
th.ta-l { text-align: left !important; }
th.ta-r { text-align: right !important; }
th.ta-c { text-align: center !important; }
.tbl tr:nth-child(even) td{background:#FFFFFF}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td:not(.t-fix):not(.t-fix-r){background:#F0F2F5 !important}

/* ────────────────────────────────
   BADGE — semantic light, refined
──────────────────────────────── */
.b{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:500;padding:0 8px;height:20px;border-radius:4px;white-space:nowrap;background:var(--neutral);border:1px solid var(--neutral-border);color:var(--text-sub)}
.b-blue{background:var(--blue-soft);border-color:rgba(111,143,228,0.25);color:var(--blue)}
.b-green{background:var(--success-soft);border-color:rgba(75,224,169,.3);color:var(--success)}
.b-amber{background:var(--amber-d);border-color:rgba(202,138,4,0.25);color:var(--amber)}
.b-red{background:var(--red-d);border-color:rgba(220,38,38,0.25);color:var(--red)}
.b-purple{background:#F5F3FF;border-color:rgba(124,58,237,0.25);color:#7C3AED}
.b-gray{background:var(--bg-muted);border-color:var(--neutral-border);color:var(--text-muted)}
.b-pill{border-radius:9999px}
.b-ring{box-shadow:inset 0 0 0 1px currentColor;opacity:.85}
/* ────────────────────────────────
   ALERT LIST
──────────────────────────────── */
.al-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.05);align-items:flex-start}
.al-item:last-child{border-bottom:none}
.al-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.ai-red{background:var(--red-d)}.ai-amber{background:var(--amber-d)}.ai-blue{background:var(--accent-d)}
.al-title{font-size:14px;font-weight:500;color:var(--t1);line-height:1.4;margin-bottom:3px}
.al-desc{font-size:13px;color:var(--t2);line-height:1.5}
.al-time{margin-left:auto;font-size:12px;color:var(--t3);padding-top:2px;white-space:nowrap}

/* ────────────────────────────────
   RISK BARS
──────────────────────────────── */
.risk-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(0,0,0,.05)}
.risk-row:last-child{border-bottom:none}
.risk-label{width:135px;font-size:13px;color:var(--t2);flex-shrink:0}
.risk-track{flex:1;height:6px;background:var(--surf-h);border-radius:3px;overflow:hidden}
.risk-fill{height:100%;border-radius:3px;transition:width .8s cubic-bezier(.4,0,.2,1);width:0}
.rf-low{background:var(--accent)}
.rf-mid{background:var(--accent)}
.rf-high{background:var(--accent)}
.risk-val{width:36px;text-align:right;font-size:14px;font-weight:500;flex-shrink:0}

/* ────────────────────────────────
   BRANCH SCENARIO
──────────────────────────────── */
.bsc{border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;margin-bottom:12px;transition:border-color .2s}
.bsc:hover{border-color:var(--bdr-s)}
.bsc-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surf);border-bottom:1px solid var(--bdr)}
.bsc-name{font-size:12px;font-weight:500;color:var(--t1)}
.bsc-body{padding:12px 14px}
.bm-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bm-row:last-child{margin-bottom:0}
.bm-label{width:115px;font-size:11px;color:var(--t2);flex-shrink:0}
.bm-track{flex:1;height:6px;background:var(--surf-h);border-radius:3px;overflow:hidden}
.bm-fill{height:100%;border-radius:3px;transition:width .8s}
.bm-pos{background:var(--accent)}
.bm-neg{background:var(--t2)}
.bm-warn{background:var(--accent)}
.bm-val{width:95px;text-align:right;font-size:11px;color:var(--t2)}

/* ────────────────────────────────
   LAYER PANEL
──────────────────────────────── */
.lp{border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.lp-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--bdr)}
.ld{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.ld-l1{background:var(--accent)}
.ld-l2{background:var(--green)}
.ld-l3{background:var(--amber)}
.lp-title{font-size:13px;font-weight:500;color:var(--t1)}
.lp-tag{margin-left:6px}
.lp-desc{font-size:11px;color:var(--t2);margin-left:auto}
.lp-body{background:var(--surf)}

/* ────────────────────────────────
   GUILLOTINE
──────────────────────────────── */
.guil-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.05)}
.guil-row:last-child{border-bottom:none}
.guil-dept{width:80px;font-size:12px;color:var(--t2)}
.guil-track{flex:1;height:8px;background:var(--surf-h);border-radius:4px;overflow:hidden;position:relative}
.guil-used{height:100%;border-radius:4px}
.guil-num{font-size:11px;color:var(--t2);width:80px;text-align:right}
.guil-act{width:80px;text-align:right}

/* ────────────────────────────────
   GOV MODES
──────────────────────────────── */
.gov-modes{display:flex;gap:8px}
.gm-btn{
  flex:1;padding:10px 8px;border:1px solid var(--bdr);border-radius:var(--rs);
  text-align:center;cursor:pointer;transition:all .15s;
}
.gm-btn:hover{border-color:var(--bdr-s)}
.gm-btn.on{border-color:var(--amber);background:var(--amber-d)}
.gm-label{font-size:11px;font-weight:500;color:var(--t2)}
.gm-btn.on .gm-label{color:var(--amber)}
.gm-desc{font-size:9px;color:var(--t3);margin-top:2px}

/* ────────────────────────────────
   INFO BOX
──────────────────────────────── */
.infobox{border-radius:var(--rs);padding:10px 14px;font-size:13px;line-height:1.6;margin-top:12px;background:var(--surf);border:1px solid var(--bdr);color:var(--t2)}
.infobox.amber{background:var(--surf);border:1px solid var(--bdr);color:var(--t2)}
.infobox.blue{background:var(--surf);border:1px solid var(--bdr);color:var(--t2)}
.infobox.red{background:var(--surf);border:1px solid var(--bdr);color:var(--t2)}

/* ────────────────────────────────
   PEOPLE KPI
──────────────────────────────── */
.ppl-kpi{text-align:center;padding:6px 4px}
.ppl-val{font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--t1)}
.ppl-val.pos{color:var(--t1)}.ppl-val.mid{color:var(--t1)}.ppl-val.neg{color:var(--t1)}
.ppl-name{font-size:10px;color:var(--t3);margin-top:3px}
.ppl-sub{font-size:10px;color:var(--t2);margin-top:4px}

/* ────────────────────────────────
   HEATMAP
──────────────────────────────── */
.hm-grid{display:grid;grid-template-columns:70px repeat(8,1fr);gap:3px;font-size:9px}
.hm-lbl{display:flex;align-items:center;font-size:10px;color:var(--t2)}
.hm-col-h{text-align:center;color:var(--t3);padding:2px 0;font-size:9px}
.hm-cell{
  height:28px;border-radius:4px;display:flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:500;cursor:default;
  transition:opacity .15s;
}
.hm-cell:hover{opacity:.8}

/* ────────────────────────────────
   DIVIDER
──────────────────────────────── */
.divider{height:1px;background:var(--bdr);margin:16px 0}

/* ────────────────────────────────
   UTILITY
──────────────────────────────── */
.flex{display:flex}.flex-c{display:flex;align-items:center}.flex-bc{display:flex;align-items:center;justify-content:space-between}
.gap4{gap:4px}.gap8{gap:8px}.gap12{gap:12px}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.f10{font-size:12px}.f11{font-size:13px}.f12{font-size:14px}
.tc2{color:var(--t2)}.tc3{color:var(--t3)}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:600}
.tnum{font-variant-numeric:tabular-nums}.w100{width:100%}

/* ────────────────────────────────
   FINANCIAL TABS — clean underline style
──────────────────────────────── */
.fin-tabs{
  display:flex;gap:0;border-bottom:1px solid var(--bdr);
  margin-bottom:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.fin-tab{
  padding:9px 16px;font-size:13px;font-weight:400;
  color:#6B7280;                       /* inactive: text.tertiary */
  cursor:pointer;border:none;border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color 120ms,border-color 120ms;
  background:transparent;outline:none;white-space:nowrap;flex-shrink:0;
  line-height:1.4;
}
.fin-tab:hover{color:var(--t2)}
.fin-tab.active{
  color:#111111;                       /* active: text.primary + 緑下線 */
  border-bottom-color:var(--accent);
  font-weight:500;
}
.fin-pane{display:none}
.fin-pane.active{display:block}

/* ────────────────────────────────
   FINANCIAL TABLE — clean professional
──────────────────────────────── */
.fin-wrap{overflow-x:clip;overflow-y:auto;max-height:calc(100vh - 260px)}
/* 財務諸表ページのみ: 縦スクロールを .page 右端1本に統一 */
#page-financials .fin-wrap{overflow-y:clip;max-height:none}
/* ════════════════════════════════════════
   FINANCIAL FLOW — 構造ツリーテーブル
   「帳票」ではなく「構造ナビゲーション」
   主役: 構造（左）  脇役: 数値（右）
════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   TABLE_SPEC — asobito 標準テーブル v1（2026-04-24 確定）
   ベンチマーク: 予算管理 > 差異分析タブ
   新規テーブルは table-standard / table-financial を必須とする
═══════════════════════════════════════════════════ */

/* ── コンテナ ── */
.table-container{overflow-x:auto;overflow-y:clip}

/* ── 全テーブル共通（B/C分類） ── */
.table-standard{
  min-width:100%;
  table-layout:auto;
  border-collapse:separate;border-spacing:0;
  font-variant-numeric:tabular-nums;
  font-size:14px;font-weight:400;
}
.table-standard th,
.table-standard td{
  font-size:14px;font-weight:400;
  line-height:1.6;
  padding:6px 10px;
  font-variant-numeric:tabular-nums;
  color:var(--t1);
  white-space:nowrap;
  text-transform:none;
  letter-spacing:0;
}
/* ── A分類（財務・横長テーブル）フォント上書き ── */
.table-standard.table-financial th,
.table-standard.table-financial td{
  font-size:12px;line-height:1.5;padding:4px 8px;
}
.table-standard thead{
  position:sticky;top:0;z-index:8;
  background:var(--card-bg);
}
.table-standard tr:hover td{background:#EFF6FF !important}

/* ── A分類追加（数値テーブル）── */
.table-financial .col-dim{
  position:sticky;left:0;z-index:3;
  background:var(--card-bg);
  text-align:left;min-width:160px;
}
.table-financial thead .col-dim{z-index:11;background:var(--sticky-bg)}

/* ═══════════════════════════════════════════════════
   財務テーブル 共通コンポーネント v5
   列単位設計 — 幅は列クラスが唯一の定義元
═══════════════════════════════════════════════════ */
.fin-table-wrapper{overflow-x:auto;overflow-y:clip}
.fin-table{
  min-width:100%;
  table-layout:auto;
  border-collapse:separate;border-spacing:0;
  font-variant-numeric:tabular-nums;
}
.fin-table thead{position:sticky;top:0;z-index:8;background:var(--card-bg)}
.fin-col-first{
  width:160px;min-width:160px;
  text-align:left;
  position:sticky;left:0;z-index:3;
  background:var(--card-bg);
}
.fin-table thead .fin-col-first{z-index:11;background:var(--sticky-bg)}
.fin-col-budget,.fin-col-forecast,.fin-col-actual,.fin-col-diff{
  min-width:90px;
  text-align:right;
}
.fin-col-cumulative{
  min-width:90px;
  text-align:right;
}
.fin-cell{min-width:116px;text-align:right}
.fin-table th,.fin-table td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:400;padding:4px 8px;font-variant-numeric:tabular-nums;color:var(--t1);line-height:1.5}

.fin-tbl{
  font-size:12px;
  font-weight:400;
  font-variant-numeric:tabular-nums;
}

/* ── ヘッダー ── */
.fin-tbl thead th{
  font-size:12px;font-weight:400;color:var(--t3);
  text-align:right;
  padding:4px 8px;
  border-bottom:1px solid var(--bdr);
  white-space:nowrap;
  background:var(--card-bg);
  letter-spacing:.02em;
}
.fin-tbl thead th:not(:first-child){
  overflow:hidden;
}
.fin-tbl thead th:last-child{
  padding-right:16px;
}
.fin-tbl thead th:first-child{
  text-align:left;padding-left:16px;
  font-weight:400;color:var(--t3);
}

/* ── データセル ── */
.fin-tbl td{
  padding:4px 8px;
  font-size:12px;
  font-weight:400;
  color:var(--t1);
  line-height:1.5;
  text-align:right;
  border:none;
  border-bottom:1px solid var(--bdr-s);
  white-space:nowrap;
  transition:background .1s;
}
.fin-tbl td:last-child{
  padding-right:16px;
}
.fin-tbl td:first-child{
  text-align:left;
  padding-left:16px;
}
.fin-tbl tr:hover td:not(:first-child):not(.t-fix-r){background:rgba(0,0,0,.018) !important}

/* ── 空セル・ゼロ値: 控えめな表示 ── */
.fin-null{
  color:var(--t4) !important;
  font-size:9px;
  opacity:0.55;
  letter-spacing:0;
}
.fin-zero{
  color:var(--t4) !important;
  opacity:0.7;
}

/* ── セクション見出し行: 構造ラベル（データでなく区切り） ── */
.fin-row-hd td{
  padding:16px 16px 4px;
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--t2);
  background:transparent !important;
}
.fin-row-hd td:first-child{
  position:sticky;left:0;z-index:2;
  background:var(--card-bg) !important;
}

/* ── スペース行 ── */
.fin-row-space td{height:6px;background:transparent !important;border:none}

/* ── インデント行（営業外/特別損益など） ── */
.fin-indent td{color:var(--t3);font-size:13px}
.fin-indent td:first-child{padding-left:28px}

/* ── sub行（ツリートグル集計行）: 中程度の強調 ── */
.fin-row-sub td{
  font-weight:500;font-size:13px;color:var(--t2);
  background:transparent !important;
  border-top:1px solid var(--bdr-s);
  padding-top:7px;padding-bottom:7px;
}
.fin-row-sub td:first-child{
  position:sticky;left:0;z-index:2;
  background:var(--card-bg) !important;
}

/* ── total行（売上高・営業利益など） ── */
.fin-row-total td{
  font-weight:600;font-size:14px;color:var(--t1);
  background:none !important;
  padding-top:10px;padding-bottom:10px;
  border-top:1px solid var(--bdr-s);
}
.fin-row-total td:first-child{
  position:sticky;left:0;z-index:2;
  background:var(--card-bg) !important;
  letter-spacing:-.015em;
}
/* total行の数値: 構造より少し強く */
.fin-row-total td:not(:first-child){ color:var(--t2); }

/* ── 利益率行: 最も薄く — 補助情報 ── */
.fin-row-rate td{
  color:var(--t4);font-size:12px;
  background:none !important;border:none;
  padding-top:2px;padding-bottom:5px;
}
.fin-row-rate td:first-child{
  padding-left:32px;
  position:sticky;left:0;z-index:2;background:var(--card-bg) !important;
}

/* ── freee内訳行 ── */
.fin-row-detail td{color:var(--t3);font-size:13px}
.fin-row-detail td:first-child{padding-left:32px}
.fin-row-detail:hover td:not(:first-child):not(.t-fix-r){background:rgba(0,0,0,.015) !important}
.fin-detail-hidden{display:none !important}

/* ── ドリルラベル ── */
.fin-drill-label{cursor:pointer;user-select:none}
.fin-drill-label:hover{color:var(--accent)}
.fin-drill-chevron{opacity:.35;transition:transform .18s ease}
.fin-drill-child{color:var(--t3);padding-left:28px !important;font-size:13px}

/* ── 利益率行 ── */
.tc2{color:var(--t3);font-size:13px}

/* ── クリック可能セル ── */
.fin-click{cursor:pointer;transition:color .1s}
.fin-click:hover{color:var(--accent) !important;text-decoration:underline dotted}

/* ── クリック可能な財務数値（静止時から青） ── */
.fin-val-link{color:var(--blue);cursor:pointer;transition:color .1s}
.fin-val-link:hover{color:var(--blue-hover);text-decoration:underline dotted}
/* .fin-table/.fin-tbl の td color:var(--t1) !important を上書き */
.fin-table td.fin-val-link,.fin-tbl td.fin-val-link{color:var(--blue) !important}
.fin-table td.fin-val-link:hover,.fin-tbl td.fin-val-link:hover{color:var(--blue-hover) !important}

/* ════════════════════════════════════════
   Source 接続情報 — ノード単位バインディング状態表示
   ダミー値は出さない。未接続は明示する。
════════════════════════════════════════ */
.fin-src-mini-wrap{
  display:flex;align-items:center;gap:4px;
  margin-top:1px;
  font-size:9.5px;line-height:1.2;
  font-weight:400;
}
.fin-src-badge{
  padding:0 5px;border-radius:3px;
  background:rgba(22,163,74,.08);
  color:var(--accent);
  border:1px solid rgba(22,163,74,.2);
  white-space:nowrap;
  display:inline-block;
  min-width:52px;
  text-align:center;
}
.fin-src-tag{
  padding:0 4px;border-radius:3px;
  background:var(--surf);
  color:var(--t3);
  border:1px solid var(--bdr);
  white-space:nowrap;
}
.fin-src-state{
  color:var(--t4);font-size:9px;
  white-space:nowrap;
  display:inline-block;
  min-width:62px;
  text-align:left;
}
.fin-src-none{
  color:var(--t4);font-style:italic;
  font-size:9px;
  display:inline-block;
  min-width:80px;
}

/* ════════════════════════════════════════
   ツリー構造 — 親子関係の視覚化
   縦ガイドライン + 水平コネクター
════════════════════════════════════════ */

/* ツリートグル付きラベルセル（sub行） */
.fin-tree-label{
  cursor:pointer;user-select:none;
  position:sticky;left:0;
  background:var(--card-bg) !important;
}
.fin-tree-label:hover > span{ color:var(--t1); }

/* ツリー子行 共通 */
.fin-tree-child td:first-child{
  position:sticky;left:0;
  background:var(--card-bg) !important;
}
.fin-tree-child:hover td:not(:first-child):not(.t-fix-r){background:rgba(22,163,74,.025) !important}

/* depth 1: 中程度の明細 */
.fin-tree-depth-1 td{font-size:12.5px;color:var(--t2)}
.fin-tree-depth-1 td:not(:first-child){color:var(--t3)}
/* depth 2: 補助明細 */
.fin-tree-depth-2 td{font-size:12px;color:var(--t3)}

/* ツリーセル — position:relative で ::before/::after の起点 */
.fin-tree-cell{
  position:relative;
  white-space:nowrap;
  text-align:left !important;
}

/* depth-1: 水平コネクター (── 効果) */
.fin-tree-depth-1 .fin-tree-cell::before{
  content:'';
  position:absolute;
  left:12px;top:50%;
  width:10px;height:1px;
  background:var(--bdr);
}
/* depth-1: 縦ガイドライン（最終子でない場合は全高、最終子は上半分） */
.fin-tree-depth-1:not(.fin-tree-last) .fin-tree-cell::after{
  content:'';
  position:absolute;
  left:12px;top:0;bottom:0;
  width:1px;background:var(--bdr);
}
.fin-tree-depth-1.fin-tree-last .fin-tree-cell::after{
  content:'';
  position:absolute;
  left:12px;top:0;height:52%;
  width:1px;background:var(--bdr);
}

/* depth-2: 水平コネクター（より深いレベル） */
.fin-tree-depth-2 .fin-tree-cell::before{
  content:'';
  position:absolute;
  left:28px;top:50%;
  width:10px;height:1px;
  background:rgba(0,0,0,.10);
}
.fin-tree-depth-2:not(.fin-tree-last) .fin-tree-cell::after{
  content:'';
  position:absolute;
  left:28px;top:0;bottom:0;
  width:1px;background:rgba(0,0,0,.10);
}
.fin-tree-depth-2.fin-tree-last .fin-tree-cell::after{
  content:'';
  position:absolute;
  left:28px;top:0;height:52%;
  width:1px;background:rgba(0,0,0,.10);
}

/* セクションジャンプリンク（ツリー子行内） */
.fin-tree-sec-link{
  margin-left:6px;font-size:9px;padding:1px 5px;
  color:var(--t4);border-color:var(--bdr);
}
.fin-tree-sec-link:hover{
  border-color:var(--accent);color:var(--accent);
  background:var(--accent-d);
}
/* 推移view: 固定列 */
.t-fix{position:sticky;z-index:1;background:var(--sticky-bg)}
.lfl-th.t-fix{z-index:5;background:var(--sticky-bg)}
.fin-tbl thead th.t-fix,
.hc-spr  thead th.t-fix { z-index: 9; }
/* 右固定列（body セル） */
.t-fix-r{position:sticky;right:0;z-index:1;background:var(--sticky-bg)}
/* 右上コーナー（sticky top × sticky right）: fin-tbl 用 */
.fin-tbl thead th.t-fix-r { z-index: 9; }
/* 現在月ハイライト（全テーブル共通） */
thead th.cur-month {
  background: rgba(22,163,74,0.12) !important;
  border-bottom: 2px solid var(--accent) !important;
  color: var(--accent) !important;
}
#_lth-row th.t-fix{z-index:4;background:#475569}
/* セマンティックカラー */
.val-neg{color:#B91C1C !important;font-weight:500} /* red-700: 赤字の緊張感を高める */
.val-pos{color:var(--green) !important}
.val-zero{color:var(--t4) !important}              /* t3→t4: ゼロはさらに薄く */

/* ────────────────────────────────
   MODAL — ニューノーマル professional
──────────────────────────────── */
.moverlay{
  position:fixed;inset:0;background:rgba(15,23,42,0.92);backdrop-filter:blur(2px);
  z-index:300;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.moverlay.open{display:flex}
.mbox{
  background:var(--modal-bg);
  border:1px solid var(--bdr-s);border-radius:10px;
  width:100%;max-width:520px;max-height:90vh;overflow:hidden;
  display:flex;flex-direction:column;
  animation:mopen .16s ease;
}
@keyframes mopen{from{opacity:0;transform:scale(.98) translateY(4px)}to{opacity:1;transform:none}}
.mbox-hd{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:20px 24px 18px;border-bottom:1px solid var(--bdr);flex-shrink:0;
  background:var(--surf);
}
.mbox-title{font-size:15px;font-weight:600;color:var(--t1);line-height:1.3;letter-spacing:-.01em}
.mbox-sub{font-size:12px;color:var(--t3);margin-top:3px;line-height:1.5}
.mbox-close{
  width:26px;height:26px;border-radius:6px;background:transparent;
  border:1px solid var(--bdr);color:var(--t3);cursor:pointer;font-size:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .12s;margin-left:12px;margin-top:2px;
}
.mbox-close:hover{background:var(--surf-h);color:var(--t1);border-color:var(--bdr-s)}
.mbox-body{overflow-y:auto;padding:22px 24px}
.mstat-row{display:flex;gap:8px;margin-bottom:12px}
.mstat{
  flex:1;background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rs);
  padding:8px 10px;text-align:center;
}
.mstat-val{font-size:18px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--t1)}
.mstat-lbl{font-size:11px;color:var(--t3);margin-top:2px}
.msec-title{font-size:10px;font-weight:500;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;margin-top:10px}
.mbreakdown{width:100%;border-collapse:collapse}
.mbreakdown td{padding:5px 8px;font-size:12px;border-bottom:1px solid var(--bdr)}
.mbreakdown td:first-child{color:var(--t2)}
.mbreakdown td:last-child{text-align:right;font-weight:500;font-variant-numeric:tabular-nums;color:var(--t1)}
.mbreakdown tr:last-child td{border-bottom:none}
.mtag{display:inline-flex;align-items:center;gap:3px;font-size:10px;padding:1px 5px;border-radius:4px;background:var(--surf);color:var(--t3);margin-left:4px;border:1px solid var(--bdr)}

/* ────────────────────────────────
   YEAR-MONTH PICKER (カスタム年月ピッカー)
──────────────────────────────── */
/* トリガーボタン（form-input と同スタイル） */
.ym-trigger{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:5px 8px;border-radius:5px;border:1px solid var(--bdr);
  background:var(--card-bg);font-size:12px;cursor:pointer;font-family:inherit;
  line-height:1.45;text-align:left;color:var(--t1);
  transition:border-color .12s,box-shadow .12s;
}
.ym-trigger:hover{border-color:var(--bdr-s)}
.ym-trigger:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(22,163,74,0.12)}
/* インライン（ツールバー等）用：ボーダーなし・透過背景 */
.ym-trigger-inline{
  display:inline-flex;align-items:center;gap:4px;
  border:none;background:transparent;font-size:12px;cursor:pointer;
  font-family:inherit;color:var(--t1);padding:0;
  transition:color .12s;
}
.ym-trigger-inline:hover{color:var(--accent)}
/* プレースホルダーテキスト */
.ym-ph{color:var(--t3)}
/* 矢印マーク */
.ym-caret{color:var(--t3);font-size:8px;flex-shrink:0;margin-left:4px}
/* ポップアップ本体（position:fixed — mbox overflow:hidden を回避） */
.ym-popup{
  position:fixed;z-index:1200;
  background:var(--card-bg);border:1px solid var(--bdr-s);border-radius:8px;
  box-shadow:0 4px 20px rgba(15,23,42,0.12),0 1px 4px rgba(15,23,42,0.06);
  padding:10px;min-width:200px;
}
/* 年ナビゲーション行 */
.ym-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:6px}
.ym-nav-btn{
  width:22px;height:22px;border-radius:5px;border:1px solid var(--bdr);
  background:var(--card-bg);color:var(--t2);cursor:pointer;font-size:10px;
  display:flex;align-items:center;justify-content:center;transition:all .1s;flex-shrink:0;
}
.ym-nav-btn:hover{background:var(--surf);border-color:var(--bdr-s);color:var(--t1)}
.ym-year-label{font-size:13px;font-weight:500;color:var(--t1);letter-spacing:-.01em;flex:1;text-align:center}
/* 月バッジグリッド 4列 */
.ym-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:8px}
.ym-month-btn{
  padding:5px 2px;border-radius:5px;border:1px solid transparent;
  background:transparent;color:var(--t2);font-size:11px;font-weight:500;
  cursor:pointer;text-align:center;transition:all .1s;font-family:inherit;line-height:1;
}
.ym-month-btn:hover{background:var(--accent-d);color:var(--accent);border-color:rgba(22,163,74,0.20)}
.ym-month-btn.ym-selected{background:var(--accent);color:#fff;border-color:var(--accent)}
.ym-month-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
/* フッター（クリアボタン） */
.ym-footer{display:flex;padding-top:7px;border-top:1px solid var(--bdr)}
.ym-clear-btn{
  font-size:11px;color:var(--t3);background:none;border:none;
  cursor:pointer;padding:2px 4px;font-family:inherit;transition:color .12s;
}
.ym-clear-btn:hover{color:var(--red)}

/* ────────────────────────────────
   BYNAME TABLE (人員計画)
──────────────────────────────── */
.bnt-wrap{overflow-x:auto;max-height:calc(100vh - 280px)}
.bnt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:900px}
.bnt thead{position:sticky;top:0;z-index:6}
.bnt th{
  padding:8px 10px;font-size:12px;font-weight:500;color:var(--t2);
  text-align:right;white-space:nowrap;background:var(--sticky-bg);
  border-bottom:2px solid var(--bdr-s);letter-spacing:.05em;
}
.bnt th:first-child{text-align:left;min-width:140px;padding-left:14px}
.bnt th:nth-child(2){min-width:70px;text-align:left}
.bnt th:nth-child(3){min-width:60px;text-align:center}
.bnt td{
  padding:6px 10px;font-size:13px;color:var(--t1);
  text-align:right;border-bottom:1px solid rgba(0,0,0,.04);white-space:nowrap;
}
.bnt td:first-child{text-align:left;padding-left:14px;font-weight:500}
.bnt td:nth-child(2){text-align:left;color:var(--t2);font-size:12px}
.bnt td:nth-child(3){text-align:center}
.bnt tr:hover td:not(.t-fix):not(.t-fix-r){background:rgba(0,0,0,0.025)}
.bnt-dept-hd td{
  background:var(--surf);color:var(--t2);font-size:13px;
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding-top:8px;padding-bottom:4px;border-top:1px solid var(--bdr);
}
.bnt-total td{font-weight:500;background:var(--surf);border-top:2px solid rgba(0,0,0,.1)}
.bnt-leave td{color:var(--t3) !important;font-style:italic}
.bnt-zero{color:var(--t3) !important;font-size:11px}

/* ────────────────────────────────
   人件費推移 Byname スプレッドシート
──────────────────────────────── */
/* フィルタバー */
.hc-filter-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 16px;border-bottom:1px solid var(--bdr);
  background:var(--surf);
}
.hc-filter-label{font-size:11px;font-weight:500;color:var(--t3);white-space:nowrap}
.hc-filter-sep{width:1px;height:18px;background:var(--bdr);flex-shrink:0}
.hc-chip{
  font-size:11px;font-weight:500;padding:3px 11px;
  border-radius:20px;border:1px solid var(--bdr-s);
  background:var(--card-bg);color:var(--t2);cursor:pointer;
  transition:all .12s;white-space:nowrap;
}
.hc-chip:hover{border-color:var(--accent);color:var(--accent)}
.hc-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
/* スプレッドシートラッパー */
.hc-spr-wrap{overflow-x:auto;overflow-y:auto;max-height:calc(100vh - 350px)}
/* テーブル本体 — fin-tbl と同一デザイン */
.hc-spr{
  font-size:13px;font-variant-numeric:tabular-nums;
}
/* ヘッダー行 — fin-tbl thead th と統一 */
.hc-spr thead tr:first-child th{
  background:var(--card-bg);
  color:var(--t3);
  font-size:13px;font-weight:400;
  padding:4px 8px;
  border-bottom:1px solid var(--bdr);
  white-space:nowrap;
  text-align:right;
}
.hc-th-info{text-align:left !important}
.hc-th-num{text-align:right !important}
.hc-th-cur{background:rgba(22,163,74,0.12) !important;color:var(--accent) !important;border-bottom:2px solid var(--accent) !important}
.hc-range-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
/* セル共通 */
.hc-spr td{
  padding:4px 8px;
  border-bottom:1px solid var(--bdr);
  font-size:13px;color:var(--t1);
  line-height:1.5;
  white-space:nowrap;
  transition:background .08s;
}
/* ラベル列 */
.hc-spr td:first-child{
  font-size:13px;font-weight:400;color:var(--t2);
  white-space:nowrap;
}
.hc-spr tr:hover td:not(.t-fix):not(.t-fix-r){background:rgba(0,0,0,0.018) !important}
/* 数値列 */
.hc-spr .hc-num{text-align:right}
/* 合計列アクセント */
.hc-spr .hc-total-col{
  font-weight:500;
  border-left:2px solid rgba(0,0,0,.06) !important;
}
/* 行ステート：退職済 */
.hc-spr tr.hc-row-resigned td{color:var(--t3)}
/* セルステート */
td.hc-cell-hire{background:rgba(52,211,153,0.18) !important;color:#34d399 !important}
td.hc-cell-leave-m{background:rgba(248,113,113,0.18) !important;color:#f87171 !important}
td.hc-cell-loa{background:rgba(245,158,11,0.16) !important;color:#fbbf24 !important}
td.hc-cell-zero{text-align:center !important}
/* 合計行 — fin-row-total と統一 */
.hc-spr tr.hc-row-total td{
  background:var(--surf) !important;
  font-weight:600;
  border-top:2px solid var(--bdr);
  position:sticky;bottom:0;z-index:5;
  font-size:12px;
}
/* バッジ類 */
.hc-type-badge{
  font-size:10px;font-weight:500;padding:1px 7px;border-radius:4px;
  background:var(--surf);border:1px solid var(--bdr);color:var(--t2);
  white-space:nowrap;
}
.hc-grade-badge{
  font-size:10px;font-weight:500;padding:1px 7px;border-radius:4px;
  background:#F5F3FF;border:1px solid rgba(124,58,237,0.25);color:#7C3AED;
  white-space:nowrap;
}
.hc-unit-note{font-size:10px;font-weight:400;opacity:.65;margin-left:3px}

/* ────────────────────────────────
   HEADCOUNT MOVEMENT TABLE
──────────────────────────────── */
.hc-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.hc-tbl th{
  padding:6px 12px;font-size:13px;font-weight:500;color:var(--t3);
  text-align:right;white-space:nowrap;border-bottom:2px solid var(--bdr-s);
  background:var(--surf);
}
.hc-tbl th:first-child{text-align:left;min-width:140px}
.hc-tbl td{padding:5px 12px;font-size:13px;color:var(--t1);text-align:right;white-space:nowrap;border-bottom:1px solid rgba(0,0,0,.04)}
.hc-tbl td:first-child{text-align:left;font-size:13px;color:var(--t2);font-weight:500;white-space:nowrap}
.hc-tbl .hc-total{font-weight:500;background:var(--surf);border-top:2px solid rgba(0,0,0,.1)}

/* ────────────────────────────────
   EDIT BUTTON
──────────────────────────────── */
.btn-edit{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:5px;border:1px solid var(--bdr);
  background:var(--surf);color:var(--t3);cursor:pointer;font-size:11px;
  transition:all .15s;flex-shrink:0;
}
.btn-edit:hover{background:var(--accent-d);border-color:var(--accent);color:var(--accent)}

/* ────────────────────────────────
   KANBAN (採用進捗)
──────────────────────────────── */
.kanban-board{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;min-height:320px}
.kanban-col{
  min-width:170px;flex-shrink:0;background:var(--surf);
  border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;
}
.kanban-col-hd{
  padding:9px 12px;font-size:12px;font-weight:500;color:var(--t2);
  letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;
}
.kanban-col-body{padding:8px;display:flex;flex-direction:column;gap:6px}
.kanban-card{
  background:var(--card-bg);border:1px solid var(--bdr);border-radius:var(--rs);
  padding:9px 10px;cursor:pointer;transition:border-color .15s;
}
.kanban-card:hover{border-color:var(--accent)}
.kanban-card.selected{border-color:var(--accent);background:var(--accent-d)}
.kc-name{font-size:13px;font-weight:500;color:var(--t1);margin-bottom:3px}
.kc-slot{font-size:11px;color:var(--t3)}
.kc-days{font-size:11px;color:var(--t2);margin-top:4px}

/* ────────────────────────────────
   CANDIDATE DETAIL PANE
──────────────────────────────── */
.cand-detail{flex:1;min-width:260px}
.score-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.score-row:last-child{border-bottom:none}
.score-label{width:90px;font-size:12px;color:var(--t2);flex-shrink:0}
.score-track{flex:1;height:6px;background:var(--surf-h);border-radius:3px;overflow:hidden}
.score-fill{height:100%;border-radius:3px;background:var(--accent);transition:width .6s}
.score-val{width:24px;text-align:right;font-size:12px;font-weight:500;color:var(--accent)}

/* ────────────────────────────────
   SLOT CARDS
──────────────────────────────── */
/* カード汎用 hover クラス（WF-all など onclick カードに付与） */
.card-hover{transition:border-color .15s;cursor:pointer}
.card-hover:hover{border-color:var(--accent)}
.card-hover.selected{border-color:var(--accent);background:var(--accent-d)}
.slot-cards{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.slot-card{
  background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r);
  padding:12px 14px;min-width:200px;flex:1;max-width:260px;
}
.slot-card-title{font-size:14px;font-weight:500;color:var(--t1);margin-bottom:4px}
.slot-card-meta{font-size:12px;color:var(--t3);margin-bottom:8px}
.slot-progress{height:5px;background:var(--surf-h);border-radius:3px;overflow:hidden;margin-bottom:6px}
.slot-progress-fill{height:100%;border-radius:3px;background:var(--accent);transition:width .6s}
.slot-nums{display:flex;gap:10px;font-size:12px}
.wf-icon-circle{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;margin-bottom:12px}

/* ────────────────────────────────
   EVALUATION — アバター / 一覧
──────────────────────────────── */
.eval-avatar {
  width:32px;height:32px;border-radius:50%;
  background:var(--surf-h);display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:13px;color:var(--t2);flex-shrink:0;
}
.eval-avatar-lg { width:44px;height:44px;font-size:17px; }
.eval-person-row:hover td { background:rgba(0,0,0,0.025) !important; }

/* ────────────────────────────────
   EVALUATION TABLE
──────────────────────────────── */
.eval-tbl{width:100%;border-collapse:collapse}
.eval-tbl th{
  padding:8px 12px;font-size:13px;font-weight:500;color:var(--t2);
  text-align:center;border-bottom:2px solid var(--bdr-s);
  background:var(--surf);white-space:nowrap;
}
.eval-tbl th:first-child,.eval-tbl th:nth-child(2){text-align:left}
.eval-tbl td{
  padding:9px 12px;font-size:14px;text-align:center;
  border-bottom:1px solid rgba(0,0,0,.04);vertical-align:middle;
}
.eval-tbl td:first-child,.eval-tbl td:nth-child(2){text-align:left}
.eval-tbl tr:hover td{background:rgba(0,0,0,0.025)}
.eval-confirmed td{opacity:.65}
.eval-confirmed td:first-child::after{content:' ✅';font-size:12px}
.btn-confirm{
  padding:4px 12px;border-radius:5px;border:1px solid rgba(22,163,74,.3);
  background:var(--green-d);color:var(--green);font-size:13px;font-weight:500;
  cursor:pointer;transition:all .15s;white-space:nowrap;
}
.btn-confirm:hover{background:rgba(22,163,74,.12)}
.btn-confirm:disabled{opacity:.4;cursor:default}

/* ────────────────────────────────
   評価運用 — サマリカードグリッド
──────────────────────────────── */
.eval-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.eval-summary-card{background:var(--card-bg);border:1px solid var(--bdr);border-radius:var(--r);padding:16px}
.eval-summary-card-label{font-size:11px;color:var(--t3);margin-bottom:6px}
.eval-summary-card-value{font-size:22px;font-weight:600;color:var(--t1);line-height:1.2}
.eval-summary-card-diff{font-size:12px;color:var(--t3);margin-top:4px}

/* 個人評価カード */
.eval-person-card{background:var(--card-bg);border:1px solid var(--bdr);border-radius:var(--r);padding:16px;margin-bottom:10px}
.eval-person-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.eval-person-card-body{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.eval-person-card-col{font-size:13px}
.eval-person-card-col-label{font-size:11px;color:var(--t3);margin-bottom:4px}
.eval-person-card-risks{display:flex;flex-wrap:wrap;gap:4px}
.eval-status-chip{font-size:11px;border:1px solid;border-radius:10px;padding:2px 8px}
.eval-risk-tag{font-size:11px;background:rgba(220,38,38,.08);color:var(--danger);border:1px solid rgba(220,38,38,.2);border-radius:10px;padding:2px 8px}
.eval-impact-row{margin-top:10px;padding-top:10px;border-top:1px solid var(--bdr);font-size:12px;color:var(--t2)}

/* 評価者ビュー */
.eval-reviewer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.eval-reviewer-card{background:var(--card-bg);border:1px solid var(--bdr);border-radius:var(--r);padding:16px}
.eval-health-meter{margin:8px 0}

/* 確定・報酬反映 */
.eval-exception-flag{font-size:11px;background:rgba(220,38,38,.08);color:var(--danger);border:1px solid rgba(220,38,38,.2);border-radius:10px;padding:2px 8px;white-space:nowrap}

/* 昇給原資・PL影響 */
.eval-budget-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.eval-chain-row{display:flex;align-items:center;justify-content:space-between}

/* ────────────────────────────────
   BUDGET TABLE
──────────────────────────────── */
.budget-wrap{overflow-x:auto;max-height:calc(100vh - 320px)}
.budget-ver-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.budget-ver-select{
  padding:6px 12px;border-radius:var(--rs);border:1px solid var(--bdr-s);
  background:var(--card-bg);color:var(--t1);font-size:14px;cursor:pointer;
  outline:none;transition:border-color .15s;
}
.budget-ver-select:hover{border-color:var(--accent)}
.acct-ver-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:4px;font-size:12px;font-weight:500;
  background:#EDE9FE;color:#6D28D9;border:1px solid #DDD6FE;
}
.acct-ver-row{
  display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.acct-ver-row:last-child{border-bottom:none}
.acct-ver-range{display:flex;gap:4px;align-items:center}
.acct-range-block{
  height:10px;width:60px;border-radius:3px;background:#EDE9FE;
  border:1px solid #DDD6FE;
}

/* ────────────────────────────────
   BUDGET DETAIL (費目×部門明細入力)
──────────────────────────────── */
.bdg-detail-wrap{overflow-x:clip;overflow-y:auto;max-height:calc(100vh - 220px)}
.bdg-detail-wrap .fin-table-wrapper{overflow-x:auto;overflow-y:clip;width:100%}
.bdg-month-nav{display:flex;gap:4px;padding:10px 16px;background:var(--surf);
  border-bottom:1px solid var(--bdr);align-items:center;flex-wrap:wrap}
.bdg-month-btn{padding:4px 10px;border:1px solid var(--bdr);border-radius:var(--rs);
  font-size:12px;cursor:pointer;background:var(--card-bg);color:var(--t2);transition:all .15s}
.bdg-month-btn:hover{border-color:var(--bdr-s)}
.bdg-month-btn.active{background:var(--accent-d);color:var(--accent);border-color:var(--accent);font-weight:500}
.bdg-detail-grid thead th{padding:7px 8px;font-size:13px;
  font-weight:500;color:var(--t2);background:var(--sticky-bg);
  border-bottom:2px solid var(--bdr);white-space:nowrap;text-align:right;
  position:sticky;top:0;z-index:8}
.bdg-detail-grid thead tr:first-child > th:first-child{text-align:left}
.bdg-detail-grid tbody td{padding:4px 8px;font-size:13px;border-bottom:1px solid rgba(0,0,0,.04);
  color:var(--t1);text-align:right;background:var(--card-bg)}
.bdg-detail-grid tbody td:first-child{text-align:left;padding-left:14px}
.bdg-detail-grid .bdg-row-hd td{font-weight:400;font-size:13px;color:var(--t2);
  background:var(--card-bg);text-align:left !important;padding:4px 8px;
  border-top:1px solid var(--bdr)}
.bdg-detail-grid .bdg-row-total td{font-weight:400;background:var(--card-bg);
  border-top:1px solid var(--bdr)}
.bdg-cell input{width:58px;text-align:right;padding:2px 4px;border:1px solid transparent;
  border-radius:3px;font-size:13px;color:var(--t1);background:transparent;outline:none;
  transition:border-color .15s}
.bdg-cell input:hover{border-color:var(--bdr)}
.bdg-cell input:focus{border-color:var(--accent);background:var(--accent-d);box-shadow:0 0 0 3px rgba(22,163,74,0.12)}
.bdg-cell input.edited{background:var(--accent-d);border-color:var(--accent)}
.bdg-total-cell{font-weight:500;color:var(--t1)}
.variance-pos{color:var(--green)}
.variance-neg{color:var(--red)}
.variance-zero{color:var(--t3)}

/* ────────────────────────────────
   ORG CHART (組織図・職責表)
──────────────────────────────── */
.org-dept-section{margin-bottom:28px}
.org-dept-title{font-size:12px;font-weight:500;color:var(--t2);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:12px;padding-bottom:6px;border-bottom:2px solid var(--bdr)}
.org-nodes{display:flex;flex-wrap:wrap;gap:10px}
.org-node{
  background:var(--card-bg);
  border:1px solid var(--bdr);border-radius:var(--rc);
  padding:10px 14px;min-width:140px;transition:border-color .15s;
}
.org-node:hover{}
.org-node.level-exec{border-left:3px solid var(--accent)}
.org-node.level-mgr{border-left:3px solid #7C3AED}
.org-node.level-ic{border-left:3px solid var(--green)}
.org-node-name{font-size:13px;font-weight:500;color:var(--t1)}
.org-node-title{font-size:11px;color:var(--t2);margin-top:2px}
.org-node-grade{font-size:11px;color:var(--t3);margin-top:1px}
/* ──────────────────────────────────────────────────────────
   組織図 ツリービュー — 縦ライン接続 + レイヤー別強弱
   本部長 > 部長 > マネージャー > スタッフ の構造を線で表現
────────────────────────────────────────────────────────── */

/* 子要素群コンテナ — 縦ラインを border-left で表現 */
.org-tree-children {
  position: relative;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1.5px solid var(--bdr);
}

/* ── 部門ノード行 ── */
.org-tree-row {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--rs);
  cursor: default; user-select: none;
}
.org-tree-row:hover { background: var(--surf-h); }
.org-tree-row-sel   { background: var(--accent-d) !important; }

/* 横接続線（L字） */
.org-tree-row::before {
  content: '';
  position: absolute;
  left: -16px; top: 50%;
  width: 12px; height: 1.5px;
  background: var(--bdr);
}

/* ルートノード（全社）— 接続線なし・見出しスタイル */
.org-tree-row.depth--1 {
  padding: 7px 6px;
  font-weight: 600;
  border-bottom: 1px solid var(--bdr);
  margin-bottom: 6px;
}
.org-tree-row.depth--1::before { display: none; }

/* L1 部門ヘッダー行 — グレー背景でセクション区切り */
.org-tree-row.depth-0 {
  background: var(--surf);
  margin-top: 4px;
  border-radius: var(--rs);
}

.org-tree-toggle {
  font-size: 10px; color: var(--t4);
  width: 14px; flex-shrink: 0;
  cursor: pointer; text-align: center;
}
.org-tree-toggle:hover { color: var(--t2); }
.org-tree-name  { flex: 1; font-size: 13px; color: var(--t1); cursor: pointer; }
.org-tree-name:hover { color: var(--accent); }
.org-tree-count { font-size: 12px; color: var(--t3); min-width: 36px; text-align: right; flex-shrink: 0; }

/* ── 人員行 ── */
.org-tree-person {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: var(--rs);
  cursor: pointer;
}
.org-tree-person:hover    { background: var(--surf-h); }
.org-tree-person-sel      { background: var(--accent-d) !important; }

/* 横接続線（人員） */
.org-tree-person::before {
  content: '';
  position: absolute;
  left: -16px; top: 50%;
  width: 12px; height: 1.5px;
  background: var(--bdr);
}

/* 人員名・役職 共通デフォルト */
.org-tree-person-name  { font-size: 13px; color: var(--t1); font-weight: 400; line-height: 1.3; flex-shrink: 0; }
.org-tree-person-title { font-size: 11px; color: var(--t3); flex-shrink: 0; } /* 後方互換維持 */

/* 役職名 緑バッジ（名前のすぐ右に表示） */
.org-title-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 500;
  padding: 1px 6px; border-radius: 3px;
  background: var(--accent-d); color: var(--accent-t);
  flex-shrink: 0; white-space: nowrap;
}

/* ── レイヤー別スタイル（役職レイヤーで強弱） ── */

/* Layer 1 — 役員 / 本部長（最上位）: 背景ティントで強調（border-leftは使わない — ツリー線と混同するため） */
.org-tree-person.layer-1 {
  background: var(--accent-d); /* 薄いグリーン背景 */
  border-radius: var(--rs);
  padding: 6px 6px;
}
.org-tree-person.layer-1:hover { background: rgba(22,163,74,0.12); }
.org-tree-person.layer-1 .org-tree-person-name {
  font-size: 14px; font-weight: 600; color: var(--t1);
}
.org-tree-person.layer-1 .org-title-badge {
  background: rgba(22,163,74,0.18); color: var(--accent-t); font-weight: 600;
}

/* Layer 2 — 本部長 / CFO */
.org-tree-person.layer-2 .org-tree-person-name { font-size: 13px; font-weight: 500; }

/* Layer 3 — チームリーダー */
.org-tree-person.layer-3 .org-tree-person-name { font-size: 12px; color: var(--t2); }

/* Layer 99 — スタッフ（集約表示 or 個別表示） */
.org-tree-person.layer-99 .org-tree-person-name { font-size: 12px; color: var(--t3); }

/* 管理職 ↔ スタッフ のセパレーター */
.org-tree-layer-sep {
  height: 1px;
  background: var(--bdr);
  margin: 3px 0 3px 6px;
  opacity: 0.7;
}
/* 旧 Kanban（recruitment.js で引き続き使用するため残す）*/
.org-board{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;min-height:280px}
.org-col{min-width:160px;flex-shrink:0;background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden}
.org-col-hd{padding:9px 12px;font-size:12px;font-weight:500;color:var(--t2);border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
.org-col-body{padding:8px;display:flex;flex-direction:column;gap:6px}
.resp-tbl{border-collapse:collapse;min-width:600px}
.resp-tbl th{padding:7px 12px;font-size:13px;font-weight:500;color:var(--t2);
  background:var(--sticky-bg);border-bottom:2px solid var(--bdr);white-space:nowrap}
.resp-tbl th:first-child{text-align:left;min-width:140px;position:sticky;left:0;z-index:3}
.resp-tbl tbody td{padding:6px 12px;text-align:center;border-bottom:1px solid rgba(0,0,0,.04);font-size:13px}
.resp-tbl tbody td:first-child{text-align:left;font-size:12px;color:var(--t2);
  position:sticky;left:0;background:var(--sticky-bg);z-index:1}
.resp-r{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11px;font-weight:500;
  background:var(--accent-d);color:var(--accent)}
.resp-a{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11px;font-weight:500;
  background:var(--green-d);color:var(--green)}
.resp-v{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11px;font-weight:500;
  background:var(--surf);color:var(--t3)}
/* ── WF ステッパー（申請プロセス可視化） ── */
.wf-stepper{
  display:flex;align-items:flex-start;
  padding:16px 32px 14px;
  border-bottom:1px solid var(--bdr);
  background:var(--bg);
  /* 専用スロット(#wf-stepper-wrap)に独立描画するためネガティブマージン不要 */
}
.wf-stepper-step{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:56px;
}
.wf-stepper-circle{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;
  border:2px solid var(--bdr-s);
  color:var(--t4);background:var(--card-bg);
  transition:background .2s,border-color .2s,color .2s;
}
.wf-stepper-step.active .wf-stepper-circle{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.wf-stepper-label{
  font-size:11px;color:var(--t3);text-align:center;white-space:nowrap;
}
.wf-stepper-step.active .wf-stepper-label{
  color:var(--accent);font-weight:600;
}
.wf-stepper-line{
  flex:1;height:2px;background:var(--bdr);
  margin-top:13px;  /* 丸の中央に合わせる (28px/2 - 1px) */
  min-width:20px;
}

/* WF申請フォーム — 2-column grid layout */
.wf-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 32px}
.wf-form-field{display:flex;flex-direction:column;gap:7px}
.wf-form-field.full{grid-column:1 / -1}
.wf-form-section-hd{
  grid-column:1 / -1;display:flex;align-items:center;gap:10px;
  margin-top:22px;margin-bottom:4px;
  padding-left:8px;border-left:2px solid var(--accent);
}
/* 最初のセクションヘッダーは上マージン不要 */
.wf-form-grid > .wf-form-section-hd:first-child{ margin-top:0 }
.wf-form-section-hd span{
  font-size:11px;font-weight:600;color:var(--t2);
  letter-spacing:.03em;white-space:nowrap;
}
.wf-form-section-hd::after{content:'';flex:1;height:1px;background:var(--bdr)}
.wf-form-label{font-size:12px;font-weight:500;color:var(--t2);display:flex;align-items:center;gap:5px}
.wf-req{
  display:inline-block;font-size:10px;font-weight:500;
  color:var(--red);background:var(--red-d);
  padding:1px 6px;border-radius:3px;line-height:1.5;
}
.wf-form-hint{font-size:11px;color:var(--t3);line-height:1.5;margin-top:2px}
/* 入力エリア: 薄灰背景でホワイトモーダルと区別 → フォーカス時に白く浮かび上がる */
.wf-form-input,.wf-form-select,.wf-form-textarea{
  padding:10px 14px;border:1px solid var(--bdr);border-radius:6px;
  font-size:13px;color:var(--t1);background:var(--surf);outline:none;
  transition:border-color .15s,background .15s,box-shadow .15s;
  width:100%;box-sizing:border-box;line-height:1.5}
.wf-form-input:hover,.wf-form-select:hover,.wf-form-textarea:hover{
  border-color:var(--bdr-s);background:var(--surf-h)}
.wf-form-input:focus,.wf-form-select:focus,.wf-form-textarea:focus{
  border-color:var(--accent);background:var(--card-bg);
  box-shadow:0 0 0 3px rgba(22,163,74,0.10)}
.wf-form-textarea{resize:vertical;font-family:inherit;min-height:88px}
/* WF フォームモーダル: 広めのボディパディング */
#wf-form-box .mbox-body{padding:28px 32px;background:var(--card-bg)}

/* ────────────────────────────────
   WF 明細テーブル (items-table)
──────────────────────────────── */
.wf-items-wrap{overflow-x:auto;margin-top:4px}
.wf-items-tbl{width:100%;border-collapse:collapse;font-size:12px}
.wf-items-tbl th{padding:6px 8px;background:var(--surf-h);border:1px solid var(--bdr);font-weight:500;text-align:left;white-space:nowrap}
.wf-items-tbl td{padding:3px 5px;border:1px solid var(--bdr);background:var(--card-bg)}
.wf-items-tbl td input,.wf-items-cell{
  width:100%;border:none;background:var(--surf);border-radius:4px;
  font-size:12px;padding:4px 6px;color:var(--t1);outline:none;
  font-family:inherit;box-sizing:border-box;transition:background .12s}
.wf-items-tbl td input:focus,.wf-items-cell:focus{
  background:var(--card-bg);outline:1px solid var(--accent);border-radius:4px}
.wf-items-del{width:28px;text-align:center;cursor:pointer;color:var(--red);font-size:14px;user-select:none}
.wf-items-del:hover{background:var(--red-d)}
/* 明細行左端の丸 + ボタン */
.wf-item-add-btn{
  width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--accent);
  background:var(--accent-d);color:var(--accent);
  font-size:14px;font-weight:400;line-height:1;
  cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s,color .15s,background .15s;
  flex-shrink:0
}
.wf-item-add-btn:hover{
  background:var(--accent);color:#fff;border-color:var(--accent-h)}
.wf-items-total{text-align:right;font-size:12px;font-weight:500;color:var(--t1);padding:4px 8px 0}

/* ────────────────────────────────
   NAV SUB DIVIDER
──────────────────────────────── */
.nav-sub-divider{height:1px;background:var(--bdr);margin:4px 6px}

/* ────────────────────────────────
   GL IMPORT (総勘定元帳取り込み)
──────────────────────────────── */
.gl-dropzone{border:2px dashed var(--bdr-s);border-radius:var(--rc);padding:32px 16px;
  text-align:center;color:var(--t3);cursor:pointer;transition:border-color .15s}
.gl-dropzone:hover{border-color:var(--accent);color:var(--accent)}
.gl-dropzone-icon{font-size:32px;margin-bottom:8px}
.gl-source-btn{padding:8px 16px;border:1px solid var(--bdr);border-radius:var(--rc);
  font-size:13px;cursor:pointer;color:var(--t2);background:var(--card-bg);transition:.15s}
.gl-source-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-d)}

/* ────────────────────────────────
   SALES KPI PAGE
──────────────────────────────── */
.sales-funnel-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.funnel-col-title{font-weight:500;font-size:13px;color:var(--t1);margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--bdr);display:flex;align-items:center;gap:8px}
.funnel-stage-row{margin-bottom:8px}
.funnel-stage-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--t3);margin-bottom:3px}
.funnel-stage-meta .f-name{font-weight:500;color:var(--t2)}
.funnel-bar-wrap{height:32px;background:var(--surf);border-radius:4px;overflow:hidden}
.funnel-bar{height:100%;border-radius:4px;display:flex;align-items:center;padding:0 10px;color:#fff;font-size:12px;font-weight:500;transition:width .6s ease}
.funnel-cvr-row{display:flex;align-items:center;gap:8px;padding:3px 0 3px 14px}
.funnel-cvr-line{width:1.5px;height:14px;background:var(--bdr-s)}
.funnel-cvr-badge{font-size:11px;font-weight:500;padding:1px 6px;border-radius:3px}
.funnel-cvr-badge.good{color:#6B7280;background:var(--green-d)}
.funnel-cvr-badge.warn{color:#6B7280;background:var(--amber-d)}
.funnel-cvr-badge.bad{color:#6B7280;background:var(--red-d)}
.funnel-won-box{margin-top:16px;padding:14px 16px;background:var(--surf);border-radius:var(--rc);display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.funnel-metric{text-align:center;min-width:72px}
.funnel-metric-val{font-size:20px;font-weight:500;color:var(--t1);line-height:1.1}
.funnel-metric-lbl{font-size:10px;color:var(--t3);margin-top:2px}
.lever-tbl{width:100%;border-collapse:collapse;font-size:13px}
.lever-tbl th{background:var(--surf);padding:8px 12px;text-align:left;font-weight:500;color:var(--t2);font-size:13px;border-bottom:1px solid var(--bdr)}
.lever-tbl td{padding:10px 12px;border-bottom:1px solid var(--surf);vertical-align:middle}
.lever-impact{font-weight:500;color:var(--green)}
.lever-stars{color:var(--amber);letter-spacing:1px;font-size:13px}
.lever-ch-fs{display:inline-block;padding:2px 6px;background:var(--accent-d);color:var(--accent);border-radius:3px;font-size:10px;font-weight:500}
.lever-ch-is{display:inline-block;padding:2px 6px;background:#EDE9FE;color:#6D28D9;border-radius:3px;font-size:10px;font-weight:500}
.lever-note{font-size:11px;color:var(--t3);margin-top:2px}

/* ────────────────────────────────
   職務権限表
──────────────────────────────── */
.auth-matrix-wrap{
  overflow-x:auto;
  overflow-y:auto;
  /* topbar(56px)+sec-hd(72px)+legend(56px)+filter(52px)+余白(24px) */
  max-height:calc(100vh - 260px);
}
.auth-matrix-tbl{border-collapse:collapse;width:100%;min-width:960px;font-size:13px}

/* ヘッダー行 — overflow-y:auto コンテナ内で sticky（z-index 3 で行セルより前面） */
.auth-matrix-tbl th{font-weight:500;padding:8px 10px;text-align:center;border:1px solid rgba(255,255,255,.1);white-space:nowrap;position:sticky;top:0;z-index:3;line-height:1.4}
.auth-matrix-tbl th.auth-item-hd{text-align:left;min-width:200px}
.auth-matrix-tbl th.auth-cond1-hd{text-align:center;min-width:90px;font-size:13px}
.auth-matrix-tbl th.auth-cond2-hd{text-align:center;min-width:110px;font-size:13px}
.auth-hd-sub{display:block;font-weight:400;font-size:10px;opacity:.65;margin-top:1px}

/* ロールヘッダー編集入力（暗背景用） */
.auth-role-edit{font-size:11px;padding:2px 5px;border:1px solid rgba(255,255,255,.3);border-radius:4px;background:rgba(255,255,255,.1);color:#fff;width:100%;text-align:center;font-weight:500}
.auth-role-edit:focus{outline:none;border-color:rgba(255,255,255,.7)}

/* No. 列 */
.auth-matrix-tbl th.auth-id-hd{text-align:center;min-width:56px;max-width:64px;font-size:10px;color:rgba(255,255,255,.7)!important;letter-spacing:.05em}
.auth-matrix-tbl td.auth-id-cell{text-align:center;font-size:10px;color:var(--t3);font-variant-numeric:tabular-nums;padding:4px 6px;white-space:nowrap;vertical-align:middle}
.auth-drag-icon{display:inline-block;margin-right:3px;color:var(--t3);font-size:12px;cursor:grab;opacity:.5;user-select:none}
.auth-drag-icon:hover{opacity:1}

/* セル共通 */
.auth-matrix-tbl td{padding:7px 9px;border:1px solid var(--bdr);vertical-align:middle;transition:background .08s}
.auth-matrix-tbl td.auth-item-cell{color:var(--t1);font-size:13px;padding-left:16px;max-width:220px;vertical-align:middle}
.auth-matrix-tbl td.auth-item-merged{vertical-align:middle}
.auth-matrix-tbl td.auth-item-sub{color:var(--t3);font-size:13px;padding-left:26px}
.auth-matrix-tbl td.auth-cond-cell{font-size:13px;text-align:center;padding:5px 8px;white-space:nowrap}
.auth-matrix-tbl td.auth-role-cell{text-align:center;padding:5px 6px}

/* カテゴリ行 */
.auth-cat-row{background:var(--surf-h)!important}
.auth-cat-row td{font-weight:500;color:var(--t1);font-size:12px;padding:7px 14px;letter-spacing:.02em}
.auth-cat-edit{font-size:12px;font-weight:500;padding:2px 8px;border:1.5px solid var(--bdr-s);border-radius:4px;background:var(--card-bg);color:var(--t1);width:min(280px,100%)}
.auth-cat-edit:focus{outline:none;border-color:var(--accent)}

/* グループ単位ストライプ */
tr.auth-grp-even td{background:#FFFFFF}
tr.auth-grp-odd  td{background:#FFFFFF}
/* グループ末尾に仕切り線 */
tr.auth-grp-last td{border-bottom:1px solid var(--bdr-s)!important}

/* 権限バッジ */
.auth-b{display:inline-block;padding:3px 10px;border-radius:4px;font-size:11px;font-weight:500;white-space:nowrap;cursor:default}
.auth-ketsuai{background:#DCFCE7;color:#15803D;border:1px solid #BBF7D0}
.auth-shonin {background:var(--green-d);color:var(--green);border:1px solid #BBF7D0}
.auth-kyogi  {background:var(--amber-d);color:var(--amber);border:1px solid #FDE68A}
.auth-shinsei{background:var(--accent-d);color:var(--accent);border:1px solid #BBF7D0}
.auth-etsuran{background:var(--surf);color:var(--t2);border:1px solid var(--bdr)}
.auth-none   {color:var(--t3);font-size:13px}

/* 条件タグ */
.auth-cond-tag{display:inline-block;padding:2px 8px;border-radius:10px;background:#EDE9FE;color:#6D28D9;font-size:11px;font-weight:500;white-space:nowrap}
.auth-cond-val{font-size:11px;color:var(--t2)}

/* 編集モード inputs */
.auth-sel{font-size:11px;padding:3px 5px;border:1.5px solid var(--accent);border-radius:4px;background:var(--card-bg);cursor:pointer;width:90px;max-width:90px}
.auth-item-edit{font-size:12px;padding:2px 6px;border:1.5px solid var(--accent);border-radius:4px;background:var(--card-bg);width:100%}
.auth-cond-edit{font-size:11px;padding:2px 5px;border:1.5px solid var(--accent);border-radius:4px;background:var(--card-bg);width:100%;min-width:72px}

/* D&D */
tr.auth-dragging td{opacity:.25;transition:opacity .15s}
tr.auth-drag-over td{background:var(--accent-d)!important;box-shadow:inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}

/* ボタン */
.auth-add-row{width:100%;background:none;border:1px dashed var(--bdr);color:var(--t3);padding:5px 14px;border-radius:0;cursor:pointer;font-size:11px;text-align:left;transition:background .12s,color .12s}
.auth-add-row:hover{background:var(--surf);color:var(--accent)}
.auth-add-cat-btn{border-top:2px dashed var(--bdr);color:var(--accent)!important;border-color:rgba(22,163,74,.3)}
.auth-del-cell{width:28px;padding:3px 5px;text-align:center}
.auth-del-btn{background:none;border:none;color:var(--t3);cursor:pointer;font-size:13px;padding:2px 4px;border-radius:3px}
.auth-del-btn:hover{background:var(--red-d);color:var(--red)}

/* フィルター・凡例 */
.auth-filter-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;align-items:center}
.auth-filter-btn{padding:4px 10px;border-radius:20px;font-size:11px;border:1px solid var(--bdr);background:var(--card-bg);color:var(--t2);cursor:pointer;transition:.15s}
.auth-filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.auth-legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ────────────────────────────────
   PIPELINE PAGE
──────────────────────────────── */
.pipe-prob-wrap{display:flex;align-items:center;gap:6px}
.pipe-prob-bar-bg{width:60px;height:5px;background:var(--surf);border-radius:3px;flex-shrink:0}
.pipe-prob-bar{height:5px;border-radius:3px}

/* ────────────────────────────────
   在庫管理
──────────────────────────────── */
.inv-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;white-space:nowrap}
.inv-receipt   {background:var(--green-d);color:var(--green)}
.inv-issue     {background:var(--accent-d);color:var(--accent)}
.inv-stocktake {background:#EDE9FE;color:#6D28D9}
.inv-adjustment{background:var(--amber-d);color:var(--amber)}
.inv-disposal  {background:var(--red-d);color:var(--red)}
.inv-status-ok {display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;background:var(--green-d);color:var(--green)}
.inv-status-low{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;background:var(--amber-d);color:var(--amber)}
.inv-status-out{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;background:var(--red-d);color:var(--red)}
.inv-method-bar{display:flex;gap:6px;flex-wrap:wrap}
.inv-method-btn{padding:6px 14px;border:1px solid var(--bdr);border-radius:var(--rc);font-size:12px;cursor:pointer;color:var(--t2);background:var(--card-bg);font-weight:500;transition:.15s}
.inv-method-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-d);font-weight:500}
.inv-qty-input{width:70px;padding:4px 6px;border:1.5px solid var(--bdr-s);border-radius:4px;font-size:13px;text-align:right;color:var(--t1)}
.inv-qty-input:focus{outline:none;border-color:var(--accent)}
.inv-diff-pos{color:var(--green);font-weight:500}
.inv-diff-neg{color:var(--red);font-weight:500}
.inv-diff-zero{color:var(--t3)}
.inv-compare-tbl{width:100%;border-collapse:collapse;font-size:13px}
.inv-compare-tbl th,.inv-compare-tbl td{padding:8px 12px;border:1px solid var(--bdr)}
.inv-compare-tbl th{background:var(--surf);color:var(--t2);font-weight:500;text-align:right}
.inv-compare-tbl th:first-child{text-align:left}
.inv-compare-tbl td{text-align:right}
.inv-compare-tbl td:first-child{text-align:left;font-weight:500;color:var(--t1)}
.inv-compare-best{background:var(--green-d)!important;color:var(--green)!important;font-weight:500}
.inv-compare-worst{background:var(--red-d)!important}

/* ────────────────────────────────
   DEBT SCHEDULE PAGE
──────────────────────────────── */
.debt-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;white-space:nowrap}
.debt-short{background:var(--amber-d);color:var(--amber)}
.debt-long{background:var(--accent-d);color:var(--accent)}
.debt-method-eq{background:var(--green-d);color:var(--green)}
.debt-method-ann{background:#EDE9FE;color:#6D28D9}
.debt-method-blt{background:var(--red-d);color:var(--red)}
.debt-status-active{background:var(--green-d);color:var(--green)}
.debt-status-done{background:var(--surf);color:var(--t3)}
.debt-loan-btn{padding:5px 12px;border:1px solid var(--bdr);border-radius:var(--rc);font-size:12px;cursor:pointer;color:var(--t2);background:var(--card-bg);font-weight:500;transition:border-color .15s,color .15s,background .15s}
.debt-loan-btn:hover{border-color:var(--accent);color:var(--accent)}
.debt-loan-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-d);font-weight:500}
.debt-sched-tbl{width:100%;border-collapse:collapse;font-size:13px}
.debt-sched-tbl th,.debt-sched-tbl td{padding:6px 10px;border-bottom:1px solid var(--bdr);text-align:right;white-space:nowrap}
.debt-sched-tbl th{background:var(--surf);font-weight:500;color:var(--t2);font-size:13px}
.debt-sched-tbl td:first-child,.debt-sched-tbl th:first-child{text-align:center;width:36px}
.debt-sched-tbl td:nth-child(2),.debt-sched-tbl th:nth-child(2){text-align:left}
.debt-sched-tbl tr.debt-row-paid td{color:var(--t3)}
.debt-sched-tbl tr.debt-row-next td{background:var(--accent-d) !important;font-weight:500}
.debt-total-row td{background:var(--surf-h)!important;font-weight:500}

/* ────────────────────────────────
   COHORT PAGE
──────────────────────────────── */
.cohort-tbl{width:100%;border-collapse:collapse;font-size:13px}
.cohort-tbl th,.cohort-tbl td{padding:6px 10px;text-align:center;white-space:nowrap}
.cohort-tbl th{background:var(--surf);font-weight:500;color:var(--t2);font-size:13px}
.cohort-tbl td.cohort-label{text-align:left;font-weight:500;color:var(--t1);font-size:13px}
.cohort-tbl td.cohort-init{font-weight:500;color:var(--accent);background:var(--accent-d) !important}
.cohort-cell{display:inline-block;border-radius:4px;padding:2px 6px;font-weight:500;font-size:13px}

/* ────────────────────────────────
   EXPANSION PAGE
──────────────────────────────── */
.nrr-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:14px;font-weight:500}
.nrr-good{background:var(--green-d);color:var(--green)}
.nrr-warn{background:var(--amber-d);color:var(--amber)}
.exp-cust-tbl{width:100%;border-collapse:collapse;font-size:13px}
.exp-cust-tbl th,.exp-cust-tbl td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--bdr)}
.exp-cust-tbl th{background:var(--surf);font-weight:500;color:var(--t2);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.exp-arrow{color:var(--green);font-weight:500;font-size:13px}

/* ────────────────────────────────
   MASTER: 科目マッピング
──────────────────────────────── */
.map-tbl{border-collapse:collapse;width:100%;font-size:13px}
.map-tbl th{padding:5px 10px;font-size:13px;font-weight:500;color:var(--t2);
  text-align:left;border-bottom:2px solid var(--bdr-s);white-space:nowrap;background:var(--surf)}
.map-tbl td{padding:5px 10px;font-size:13px;border-bottom:1px solid var(--bdr);vertical-align:middle;color:var(--t1)}
.map-tbl tr:hover td:not(.t-fix):not(.t-fix-r){background:rgba(0,0,0,0.025)}
/* 会計マッピング チップ */
.map-key{display:inline-block;padding:2px 9px;border-radius:var(--rs);font-size:11.5px;font-weight:400;white-space:nowrap}
.map-key-val{background:var(--surf);color:var(--t1);border:1px solid var(--bdr)}
.map-key-any{background:transparent;color:var(--t3);border:1px dashed var(--bdr);font-style:italic}
.map-result{display:inline-block;padding:2px 9px;border-radius:var(--rs);font-size:11.5px;font-weight:500;
  white-space:nowrap;background:var(--surf);color:var(--t1);border:1px solid var(--bdr)}
/* 優先度バッジ */
.map-score{display:inline-block;min-width:20px;height:20px;line-height:20px;text-align:center;
  border-radius:10px;font-size:10px;font-weight:500;padding:0 5px;
  background:var(--surf);color:var(--t2);border:1px solid var(--bdr)}
/* インライン編集セレクト */
.map-inline-sel{padding:5px 8px;border:1px solid var(--bdr-s);border-radius:var(--rs);
  font-size:12px;color:var(--t1);background:var(--card-bg);outline:none;min-width:90px;width:100%}
.map-inline-sel:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(22,163,74,0.18)}

/* ────────────────────────────────
   VIEW TOGGLE — clean professional
──────────────────────────────── */
.view-toggle-bar{display:flex;align-items:center;gap:6px;margin-bottom:16px}

/* ────────────────────────────────
   FIN SWITCH — 2段スイッチUI
──────────────────────────────── */
.fin-switch-bar{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px 8px;
  border-bottom:1px solid var(--bdr);
  flex-wrap:wrap;
  background:var(--card-bg);
}
.fin-sw-group{
  display:inline-flex;
  border:1px solid var(--bdr);
  border-radius:var(--rs);
  overflow:hidden;
  flex-shrink:0;
}
.fin-sw-btn{
  padding:5px 14px;
  font-size:12px;
  font-weight:400;
  border:none;
  border-right:1px solid var(--bdr);
  background:var(--card-bg);
  color:var(--t3);
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
  line-height:1.4;
}
.fin-sw-btn:last-child{border-right:none}
.fin-sw-btn.active{
  background:var(--accent-d);
  color:var(--accent-t);
  font-weight:500;
}
.fin-sw-btn:hover:not(.active):not(:disabled){
  background:var(--surf);
  color:var(--t2);
}
.fin-sw-btn:disabled{
  opacity:0.35;
  cursor:not-allowed;
}
.fin-sw-sep{
  width:1px;height:20px;
  background:var(--bdr);
  flex-shrink:0;
}

/* ─── Segment selector (replaces fin-sw-btn / brk-btn / fds-btn) ─── */
.seg-group {
  display: inline-flex;
  border: 1px solid var(--bdr-s);
  border-radius: var(--rs);
  overflow: hidden;
}
.seg-btn {
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 400;
  color: var(--t2);
  background: var(--card-bg);
  border: none;
  border-right: 1px solid var(--bdr-s);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.seg-btn:last-child { border-right: none; }
.seg-btn.active {
  background: var(--surf-h);
  color: var(--t1);
  font-weight: 500;
}
.seg-btn:hover:not(.active) { background: var(--surf); }

/* Override: brk-btn.fin-sw-btn.active was wrongly using green fill */
.brk-btn.fin-sw-btn.active {
  background: var(--surf-h) !important;
  color: var(--t1) !important;
}

/* Financial control bar */
.fin-ctrl-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bdr);
  flex-wrap: wrap;
}

/* ────────────────────────────────
   KPI DRILL — Financial ↔ Model 双方向接続
──────────────────────────────── */

/* PL行内の [KPI ▼] トグルボタン */
.fin-kpi-toggle-btn{
  display:inline-flex;align-items:center;gap:3px;
  margin-left:8px;padding:1px 6px;
  font-size:10px;font-weight:500;
  border:1px solid rgba(22,163,74,0.35);border-radius:999px;
  background:var(--accent-d);color:var(--accent-t);
  cursor:pointer;vertical-align:middle;
  transition:all .15s;white-space:nowrap;
}
.fin-kpi-toggle-btn:hover{
  background:var(--accent);color:#fff;border-color:var(--accent);
}

/* インライン展開KPI行 — PLの内側の構造として表示 */
.fin-kpi-drill-row td{
  background:none;
  border:none;
  border-left:2px solid rgba(22,163,74,0.25);
  font-size:12px;
  color:var(--t3);
}
.fin-kpi-drill-row td:first-child{
  border-left:2px solid rgba(22,163,74,0.25);
  position:sticky;left:0;
  background:rgba(236,253,245,0.4) !important;
}
.fin-kpi-drill-row:hover td:not(:first-child):not(.t-fix-r){ background:rgba(22,163,74,.03) !important; }
.fin-kpi-drill-label{
  display:flex;align-items:center;gap:6px;
  padding-left:32px !important;
}

/* KPI ソースタグ */
.fin-kpi-src-tag{
  display:inline-block;padding:1px 5px;
  font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  background:var(--accent-d);color:var(--accent-t);
  border:1px solid rgba(22,163,74,.25);border-radius:3px;
  flex-shrink:0;
}

/* [→ Model] / [→ Financial] リンクボタン */
.fin-kpi-link{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;font-size:10px;font-weight:500;
  border:1px solid var(--bdr-s);border-radius:999px;
  background:var(--card-bg);color:var(--t3);
  cursor:pointer;transition:all .15s;white-space:nowrap;
}
.fin-kpi-link:hover{
  border-color:var(--accent);color:var(--accent);
  background:var(--accent-d);
}
.fin-kpi-model-link{
  margin-left:auto;flex-shrink:0;
}

/* ────────────────────────────────
   TREE STRUCTURE — PLツリー構造行
──────────────────────────────── */

/* ツリー構造トグル可能なラベルセル */
.fin-tree-label{
  cursor:pointer;
  user-select:none;
}
.fin-tree-label:hover{
  color:var(--accent);
}

/* ツリー子行（初期非表示） */
.fin-tree-child td{
  font-size:12.5px;
  color:var(--t2);
}
.fin-tree-child:hover td:not(:first-child):not(.t-fix-r){
  background:rgba(0,0,0,.018);
}
.fin-tree-depth-1 td:first-child{ color:var(--t2); }
.fin-tree-depth-2 td:first-child{ color:var(--t3); }

/* ツリーセル */
.fin-tree-cell{
  white-space:nowrap;
}

/* セクションジャンプリンク（ツリー子行内） */
.fin-tree-sec-link{
  margin-left:6px;font-size:9px;padding:1px 5px;
  color:var(--t4);border-color:var(--bdr);
}
.fin-tree-sec-link:hover{
  border-color:var(--accent);color:var(--accent);
  background:var(--accent-d);
}

/* Model View テーブル */
.fin-model-tbl .fin-row-hd td{
  padding:22px 16px 5px;
  font-size:11px;
  font-weight:600;
  color:var(--t2);
  letter-spacing:0;
  text-transform:none;
  border-bottom:1px solid var(--bdr-s);
}
.fin-model-tbl .fin-row-hd td:first-child{
  position:sticky;left:0;background:var(--card-bg) !important;
}
/* KPI行 */
.fin-model-row td{font-size:12.5px;color:var(--t3)}
.fin-model-row td:first-child{padding-left:20px;color:var(--t2)}
.fin-model-row:hover td{background:rgba(0,0,0,.018)}

/* ハイライトアニメーション（jumpToFinRow / jumpToModelView） */
@keyframes finRowFlash{
  0%  { background:rgba(22,163,74,0.22); }
  60% { background:rgba(22,163,74,0.12); }
  100%{ background:transparent; }
}
.fin-row-highlight td{
  animation: finRowFlash 1.8s ease forwards;
}
.vt-btn{
  display:flex;align-items:center;gap:5px;padding:6px 14px;
  border:1px solid var(--bdr);border-radius:var(--rs);font-size:13px; /* bdr-s→bdr: 明確なアウトライン */
  cursor:pointer;background:var(--card-bg);color:var(--t3);transition:all .15s; /* t2→t3: 非アクティブを沈める */
  font-weight:400;
}
.vt-btn:hover{border-color:var(--bdr-s);color:var(--t1);background:var(--surf)}
.vt-btn.active{
  background:var(--accent-d);color:var(--accent);
  border-color:rgba(22,163,74,0.45);
  font-weight:500;
  box-shadow:0 0 0 1px rgba(22,163,74,0.15); /* グリーンのリングで選択状態を強調 */
}

/* ────────────────────────────────
   FIN CTRL BAR — 財務フロー 3層コントロール
──────────────────────────────── */
.fin-ctrl-bar{
  border:1px solid var(--bdr);
  border-radius:var(--rc);
  background:var(--card-bg);
  overflow:hidden;
  margin-bottom:12px;
}
.fin-ctrl-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  flex-wrap:wrap;
}
.fin-ctrl-row--b{
  border-top:1px solid var(--bdr);
  background:var(--surf);
}
.fin-ctrl-label{
  font-size:10px;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--t3);
  text-transform:uppercase;
  white-space:nowrap;
  min-width:44px;
}
.fin-ctrl-sep{
  width:1px;
  height:18px;
  background:var(--bdr-s);
  flex-shrink:0;
  margin:0 4px;
}

/* 財務諸表に戻るボタン: 元帳/元帳推移モード時のみ表示 */
.fin-back-btn{ display:none !important; }
#page-financials.ledger-mode .fin-back-btn,
#page-financials.trend-mode  .fin-back-btn{
  display:flex !important;
}

/* ────────────────────────────────
   PL TREE NODE — node_type 別スタイル
──────────────────────────────── */
/* pln-subtotal: 独立集計行（利益行）— fin-row-total と併用 */
.pln-subtotal > td { border-top:1px solid var(--bdr); }
/* pln-metric: 比率行 — fin-row-rate と併用 */
.pln-metric > td { font-style:normal; }
/* pln-account: 科目行（通常データ行） */
.pln-account { }
/* pln-depth-1/2: 階層インデント（パディングはインラインで設定） */
.pln-depth-1 > td:first-child { border-left:2px solid var(--bdr-s); }
.pln-depth-2 > td:first-child { border-left:2px solid var(--bdr); }

/* ────────────────────────────────
   LEDGER VIEW (元帳ビュー)
──────────────────────────────── */
.ledger-filter-bar{
  display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid var(--bdr);
  background:var(--surf);flex-wrap:wrap;align-items:center;
}
.ledger-filter-label{font-size:12px;color:var(--t2);white-space:nowrap}
.ledger-filter-select{
  padding:5px 10px;border:1px solid var(--bdr-s);border-radius:var(--rs);
  font-size:13px;background:var(--card-bg);color:var(--t1);cursor:pointer;outline:none;
  transition:border-color .15s;
}
.ledger-filter-select:hover{border-color:var(--accent)}
.ledger-filter-input{
  padding:5px 10px;border:1px solid var(--bdr-s);border-radius:var(--rs);
  font-size:13px;background:var(--card-bg);color:var(--t1);outline:none;
  transition:border-color .15s;min-width:140px;
}
.ledger-filter-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,163,74,0.15)}
.ledger-count{font-size:12px;color:var(--t3);margin-left:auto}
.ledger-view{display:none}
.ledger-view.show{display:block}
.trend-view{display:none}
.trend-view.show{display:block}
.chart-area.hidden{display:none}


/* .card + .card の 24px margin-top を打ち消す（ledger-view と top 位置を揃える） */
#page-financials #fin-trend-view{ margin-top:0; }
/* 推移view フィルタ行 (top:0 sticky) */
.ledger-tbl #_ltf-row th{
  position:sticky;top:0;z-index:3;
  background:var(--sticky-bg);border-bottom:1px solid var(--bdr);
  padding:3px 4px;white-space:nowrap;
}
/* 推移view ヘッダー行 */
.ledger-tbl #_lth-row th{
  position:sticky;top:0;z-index:2;
  padding:5px 10px;font-size:13px;font-weight:500;white-space:nowrap;
  background:var(--surf) !important;color:var(--t2) !important;
  border-bottom:2px solid var(--bdr-s) !important;
}
.ledger-tbl #_lth-row th.num{text-align:right}
.lth-resize{position:absolute;right:0;top:0;width:5px;height:100%;cursor:col-resize;z-index:10;user-select:none}
.lth-resize:hover,.lth-resize:active{background:rgba(255,255,255,.25)}
/* 上部スクロールレール: テーブルと横スクロール同期（下までスクロールしなくても操作可能） */
.scroll-top-rail { overflow-x: auto; overflow-y: hidden; height: 12px; background: var(--surf); border-bottom: 1px solid var(--bdr-s); }
.str-phantom { height: 1px; }
.trend-wrap{overflow-x:auto;overflow-y:clip;scrollbar-width:auto;scrollbar-color:var(--bdr-s) var(--surf)}
.trend-wrap::-webkit-scrollbar{width:7px;height:7px}
.trend-wrap::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:4px}
.trend-wrap::-webkit-scrollbar-thumb:hover{background:#94A3B8}
.trend-wrap::-webkit-scrollbar-track{background:var(--surf)}
/* ── sticky ヘッダーのために border-collapse:separate を使用 ──────────────
   【設計根拠】border-collapse:collapse + position:sticky の組み合わせは
   Chrome/Safari/Firefoxすべてで sticky が機能しない既知のブラウザバグ。
   border-spacing:0 でギャップをなくし、各セルに border を付与することで
   視覚的には collapse と同等を実現する。 ── */
.ledger-tbl{width:100%;border-collapse:separate;border-spacing:0}
/* translateY sticky 時に z-index:8(inline) が tbody sticky-td(z-index:1) より上に出るよう position:relative を付与 */
.ledger-tbl thead{position:relative;z-index:8}
/* フィルタ行 th (上段: top:0) */
.lfl-th{
  position:sticky;top:0;z-index:3;
  background:var(--sticky-bg);border-bottom:1px solid var(--bdr);
  padding:3px 4px;white-space:nowrap;
}
.lfl-sel{
  width:100%;font-size:10px;padding:2px 2px;
  border:1px solid var(--bdr);border-radius:3px;
  background:var(--card-bg);color:var(--t1);cursor:pointer;outline:none;
  overflow:hidden;text-overflow:ellipsis;
}
.lfl-sel:focus{border-color:var(--accent)}
.lfl-inp{
  width:100%;font-size:10px;padding:2px 4px;
  border:1px solid var(--bdr);border-radius:3px;
  background:var(--card-bg);color:var(--t1);outline:none;
}
.lfl-inp:focus{border-color:var(--accent)}
/* ── 元帳フィルタ: カスタムドロップダウン ── */
.lfd-wrap{display:block;width:100%}
.lfd-btn{
  width:100%;display:flex;align-items:center;gap:3px;
  font-size:10px;padding:2px 5px;
  border:1px solid var(--bdr);border-radius:3px;
  background:var(--card-bg);color:var(--t2);cursor:pointer;
  text-align:left;line-height:1.4;
}
.lfd-btn:hover{border-color:var(--accent);color:var(--t1)}
.lfd-btn.lfd-active{border-color:var(--accent);background:var(--accent-d);color:var(--accent)}
.lfd-lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lfd-panel{
  position:fixed;z-index:9999;
  background:var(--card-bg);
  border:1px solid var(--bdr-s);
  border-radius:var(--rs);
  box-shadow:0 8px 24px rgba(15,23,42,0.12);
  min-width:160px;max-width:260px;
  font-weight:400;  /* th の bold 継承をリセット */
}
.lfd-sinp{
  display:block;width:100%;
  font-size:11px;padding:6px 8px;
  border:0;border-bottom:1px solid var(--bdr);
  outline:none;color:var(--t1);background:transparent;
  text-align:left;
}
.lfd-sinp:focus{border-bottom-color:var(--accent)}
.lfd-opts{max-height:200px;overflow-y:auto;padding:4px 0}
.lfd-item{
  display:flex;align-items:center;gap:6px;
  padding:4px 10px;cursor:pointer;
  font-size:11px;color:var(--t1);
  text-align:left;user-select:none;
}
.lfd-item:hover{background:var(--surf)}
.lfd-item input[type="checkbox"]{flex-shrink:0;cursor:pointer;accent-color:var(--accent);width:13px;height:13px}
.lfd-all{font-weight:500;padding-bottom:5px;margin-bottom:2px;border-bottom:1px solid var(--bdr)}
.lfd-oval{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.lfl-reset{
  font-size:10px;padding:2px 5px;
  border:1px solid var(--bdr);border-radius:3px;
  background:var(--card-bg);cursor:pointer;color:var(--t2);
}
.lfl-reset:hover{background:var(--surf-h)}
.lfl-count{font-size:10px;color:var(--t3)}
.lfl-sub{font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}
/* ヘッダー行 th（フィルタアイコン統合列ヘッダー） */
.ledger-tbl #_llh-row th{
  position:sticky;top:0;z-index:2;
  padding:5px 10px;font-size:13px;font-weight:500;white-space:nowrap;
  background:#FFFFFF !important;color:var(--t1) !important;
  border-bottom:2px solid var(--bdr-s) !important;
}
.ledger-tbl #_llh-row th.num{text-align:right}
.ledger-tbl tbody td{padding:4px 8px;font-size:13px;border-bottom:1px solid var(--bdr);color:var(--t1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:#FFFFFF}
.ledger-tbl tbody tr:hover td{background:rgba(0,0,0,0.025) !important}
.ledger-tbl .ledger-section-hd td{
  padding:6px 10px;font-size:13px;font-weight:500;color:var(--t3);
  background:var(--surf) !important;border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);
  position:sticky;z-index:1;
}
.ledger-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.ledger-tbl .lpos{color:var(--green)}
.ledger-tbl .lneg{color:var(--red)}
.ledger-tbl .ltag{
  display:inline-block;padding:1px 7px;border-radius:20px;font-size:11px;
  font-weight:500;background:var(--accent-d);color:var(--accent);border:1px solid rgba(22,163,74,0.25);
}
.ledger-tbl .ltag.green{background:var(--green-d);color:var(--green);border-color:rgba(22,163,74,0.25)}
.ledger-tbl .ltag.amber{background:var(--amber-d);color:var(--amber);border-color:rgba(202,138,4,0.25)}
.ledger-tbl .ltag.purple{background:#F5F3FF;color:#7C3AED;border-color:rgba(124,58,237,0.25)}
.ledger-tbl .ltag.gray{background:var(--surf);color:var(--t3);border-color:var(--bdr)}
.ledger-wrap{overflow-x:auto;overflow-y:clip}

/* ────────────────────────────────
   UNIT SELECT (単位切替)
──────────────────────────────── */
.unit-select{
  padding:4px 8px;border:1px solid var(--bdr);border-radius:var(--rs);
  font-size:13px;background:var(--card-bg);color:var(--t2);cursor:pointer;outline:none;
  transition:border-color .15s;font-family:inherit;
}
.unit-select:hover{border-color:var(--bdr-s);color:var(--t1)}
.unit-chip{font-size:11px;color:var(--t3);white-space:nowrap;user-select:none}

.sub-view-exec,.sub-view-ops,.sub-view-byname{display:none}
.sub-view-exec.show,.sub-view-ops.show,.sub-view-byname.show{display:block}
.sub-kpi-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sub-kpi{flex:1;min-width:140px;padding:14px 16px;background:var(--card-bg);
  border-radius:var(--r);border:1px solid var(--bdr);
}
.sub-kpi-label{font-size:11px;color:var(--t3);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:4px}
.sub-kpi-val{font-size:20px;font-weight:500;color:var(--t1);letter-spacing:-.02em}
.sub-kpi-delta{font-size:12px;margin-top:3px}
.sub-ops-wrap{overflow-x:auto;max-height:calc(100vh - 300px)}
.sub-ops-tbl{width:100%;border-collapse:collapse}
.sub-ops-tbl thead th{
  position:sticky;top:0;z-index:2;padding:7px 10px;font-size:12px;
  font-weight:500;color:var(--t2);background:var(--sticky-bg);
  border-bottom:2px solid var(--bdr);white-space:nowrap;text-align:right;
}
.sub-ops-tbl thead th:first-child{text-align:left;min-width:130px}
.sub-ops-tbl tbody td{padding:6px 10px;font-size:13px;
  border-bottom:1px solid rgba(0,0,0,.04);text-align:right}
.sub-ops-tbl tbody td:first-child{text-align:left;padding-left:16px}
.sub-ops-tbl tfoot td{padding:7px 10px;font-size:13px;font-weight:500;
  border-top:2px solid var(--bdr);background:var(--surf);text-align:right}
.sub-ops-tbl tfoot td:first-child{text-align:left}
.sub-ops-tbl tbody tr:hover td{background:rgba(0,0,0,0.025)}

/* ────────────────────────────────
   MODAL FORM (社員編集 / 契約編集)
──────────────────────────────── */
.emp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.form-group{display:flex;flex-direction:column;gap:3px}
.form-group.span2{grid-column:span 2}
.form-label{font-size:11px;font-weight:500;color:var(--t2);letter-spacing:.01em}
.form-input{
  padding:5px 8px;border-radius:var(--rs);border:1px solid var(--bdr);
  background:var(--card-bg);color:var(--t1);font-size:12px;
  outline:none;transition:border-color .12s,box-shadow .12s;font-family:inherit;
  width:100%;box-sizing:border-box;line-height:1.45;
}
.form-input:hover{border-color:var(--bdr-s)}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(37,99,235,0.12)}
.form-input::placeholder{color:var(--t3)}
.form-input:disabled{opacity:.5;cursor:default;background:var(--surf)}
.form-select{
  padding:5px 8px;border-radius:var(--rs);border:1px solid var(--bdr);
  background:var(--card-bg);color:var(--t1);font-size:12px;
  outline:none;transition:border-color .12s,box-shadow .12s;cursor:pointer;
  width:100%;box-sizing:border-box;line-height:1.45;
}
.form-select:hover{border-color:var(--bdr-s)}
.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(37,99,235,0.12)}
/* 未設定状態（空値）のセレクト → プレースホルダー色 */
.form-select.is-empty{color:var(--t3)}
/* flatpickr カレンダーのデザイン調整 */
.flatpickr-calendar{font-family:var(--font-sans);font-size:12px;border:1px solid var(--bdr);border-radius:var(--r);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--accent);border-color:var(--accent)}
.flatpickr-day:hover{background:var(--accent-d);border-color:transparent}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--accent)}
.flatpickr-current-month .flatpickr-monthDropdown-months{font-size:13px}
.flatpickr-wrapper{width:100%}
.flatpickr-input{width:100%}
.form-textarea{
  padding:5px 8px;border-radius:5px;border:1px solid var(--bdr);
  background:var(--card-bg);color:var(--t1);font-size:12px;
  outline:none;transition:border-color .12s,box-shadow .12s;font-family:inherit;
  width:100%;box-sizing:border-box;line-height:1.45;resize:vertical;
}
.form-textarea:hover{border-color:var(--bdr-s)}
.form-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(22,163,74,0.12)}
.form-textarea::placeholder{color:var(--t3)}
.form-hint{font-size:10px;color:var(--t3);margin-top:3px;line-height:1.4}
/* ── btn-primary: CTA orange solid ── */
.btn-primary{
  display:inline-flex;align-items:center;gap:5px;
  height:32px;padding:0 13px;border-radius:var(--rs);border:none;
  background:var(--cta);
  color:#fff;font-size:13px;font-weight:500;cursor:pointer;
  transition:background 120ms ease;font-family:inherit;
}
.btn-primary:hover{background:var(--cta-hover)}
.btn-primary:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(247,156,42,0.30)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
/* ── btn-secondary: light gray ── */
.btn-secondary{
  display:inline-flex;align-items:center;gap:5px;
  height:32px;padding:0 11px;border-radius:var(--rs);border:1px solid var(--bdr);
  background:var(--card-bg);
  color:var(--t2);font-size:13px;cursor:pointer;
  transition:background 120ms ease,border-color 120ms ease;font-family:inherit;
}
.btn-secondary:hover{background:#F0F2F5;color:var(--t1);border-color:var(--bdr-s)}
.btn-secondary:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(111,143,228,0.20)}
.btn-secondary:disabled{opacity:.5;cursor:not-allowed}
.btn-accent{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 13px;border-radius:var(--rs);border:1px solid rgba(22,163,74,0.25);
  background:var(--accent-d);
  color:var(--accent);font-size:12px;font-weight:500;cursor:pointer;
  transition:all 100ms ease;font-family:inherit;line-height:1.25;
}
.btn-accent:hover{background:rgba(22,163,74,0.12);border-color:rgba(22,163,74,0.45)}
.btn-accent:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(22,163,74,0.20)}
.btn-accent:disabled{opacity:.5;cursor:not-allowed}
.btn-danger{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;border-radius:var(--rs);border:1px solid rgba(220,38,38,0.25);
  background:var(--red-d);color:var(--red);font-size:12px;cursor:pointer;
  transition:all 100ms ease;font-family:inherit;font-weight:500;line-height:1.25;
}
.btn-danger:hover{background:rgba(220,38,38,0.10);border-color:rgba(220,38,38,0.45)}
/* ── size modifier ── */
.btn-sm{padding:4px 9px;font-size:11px}
/* ── freee FS choice buttons ── */
.btn-fs-choice{
  flex:1;font-size:11px;padding:4px 12px;text-align:center;cursor:pointer;
  border:1px solid var(--bdr);border-radius:var(--rs);background:var(--card-bg);
  transition:background 100ms ease,border-color 100ms ease;
}
.btn-fs-choice[data-table="add"] { color:var(--t2); }
.btn-fs-choice[data-table="none"]{ color:var(--t3); }
.btn-fs-choice.fs-active{
  background:var(--accent-d);border-color:rgba(22,163,74,0.35);color:var(--accent);
}
.btn-fs-choice.fs-passive{ color:var(--t3); }
/* ── ghost ── */
.btn-ghost{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;border-radius:var(--rs);border:1px solid var(--bdr);
  background:transparent;color:var(--t2);font-size:12px;
  cursor:pointer;transition:all 100ms ease;font-family:inherit;line-height:1.25;
}
.btn-ghost:hover{background:var(--surf);border-color:var(--bdr-s);color:var(--t1)}
.btn-ghost:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(22,163,74,0.15)}
.btn-ghost:disabled{opacity:.5;cursor:not-allowed}
/* ── link ── */
.btn-link{
  display:inline-flex;align-items:center;gap:4px;
  background:none;border:none;color:var(--accent);
  font-size:12px;font-weight:500;cursor:pointer;padding:0;font-family:inherit;
  transition:color 100ms ease;
}
.btn-link:hover{color:var(--accent-h);text-decoration:underline}
/* ── micro: テーブル行内アクション用 ── */
.btn-micro{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 8px;border-radius:var(--rs);border:1px solid var(--bdr);
  background:var(--card-bg);color:var(--t2);font-size:11px;
  cursor:pointer;transition:all 100ms ease;font-family:inherit;white-space:nowrap;
}
.btn-micro:hover{background:var(--surf);border-color:var(--bdr-s);color:var(--t1)}
.btn-micro+.btn-micro{margin-left:4px}
.btn-micro.primary{background:var(--cta);border-color:var(--cta);color:#fff}
.btn-micro.primary:hover{background:var(--cta-hover)}
.btn-micro.danger{color:var(--red);border-color:rgba(220,38,38,0.30)}
.btn-micro.danger:hover{background:var(--red-d);border-color:rgba(220,38,38,0.40)}
.mbox-footer,.mbox-foot{
  padding:14px 24px;border-top:1px solid var(--bdr);
  display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;
  background:var(--surf);
}

/* ────────────────────────────────
   BUDGET VS ACTUAL (ダッシュボード)
──────────────────────────────── */
.bva-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.bva-row:last-child{border-bottom:none}
.bva-label{width:120px;font-size:13px;color:var(--t2);flex-shrink:0}
.bva-track{flex:1;height:8px;background:var(--surf-h);border-radius:4px;overflow:hidden;position:relative}
.bva-actual{height:100%;border-radius:4px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.bva-budget{position:absolute;top:-2px;height:12px;width:3px;border-radius:2px;background:rgba(0,0,0,.3)}
.bva-val{width:80px;text-align:right;font-size:13px;font-weight:500}
.bva-delta{width:60px;text-align:right;font-size:12px;font-weight:500}
.bva-pos{color:var(--green)}.bva-neg{color:var(--red)}.bva-neu{color:var(--t2)}

/* ────────────────────────────────
   KPI TREE
──────────────────────────────── */
.kti-tree-wrap{min-width:max-content;padding:20px 4px}
/* KPI ノード — Professional Light */
.kti-node{
  background:var(--card-bg);
  border:1px solid var(--bdr);
  border-radius:12px;
  padding:14px 16px 12px;
  min-width:152px;max-width:178px;
  cursor:pointer;
  transition:border-color .15s,background .15s;
  position:relative;overflow:hidden;
}
.kti-node::before{display:none}
.kti-node:hover{
  border-color:var(--accent);
  background:var(--accent-d);
}
.kti-node.selected{border-color:var(--accent);background:var(--accent-d)}
.kti-node.root-node{min-width:164px;padding:16px 18px 14px}
.kti-node-label{font-size:12.5px;font-weight:500;color:var(--t2);margin-bottom:8px;line-height:1.3}
.kti-node-actual{font-size:17px;font-weight:500;margin-bottom:2px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--t1)}
.kti-node-target{font-size:10.5px;color:var(--t3);font-weight:500}
.kti-node-owner{display:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--bdr);font-size:11px;color:var(--t2);align-items:center;gap:5px}
.kti-tree-wrap.show-owner .kti-node-owner{display:flex}
.kti-mbo-badge{font-size:11px;position:absolute;top:6px;right:8px;cursor:default;opacity:.9}
.kti-live-badge{font-size:10px;font-weight:600;position:absolute;top:6px;left:8px;background:var(--accent-d);color:var(--accent-t);padding:1px 5px;border-radius:3px;letter-spacing:.02em;cursor:default}
/* KPI TODO パネル */
.kti-todo-panel{margin-top:8px;padding-top:8px;border-top:1px solid rgba(0,0,0,.07);display:none}
.kti-tree-wrap.show-todo .kti-todo-panel{display:block}
.kti-todo-item{display:flex;align-items:flex-start;gap:5px;padding:3px 0;font-size:10.5px;line-height:1.4;color:var(--t2)}
.kti-todo-freq{
  font-size:9px;font-weight:500;padding:1px 5px;border-radius:3px;
  flex-shrink:0;margin-top:1px;white-space:nowrap;letter-spacing:.04em;
}
.kti-todo-freq.daily{background:var(--accent-d);color:var(--accent)}
.kti-todo-freq.weekly{background:#DCFCE7;color:#15803D}
.kti-todo-freq.monthly{background:var(--green-d);color:var(--green)}
.kti-status-ok,.kti-status-warn,.kti-status-ng{color:var(--t1)}
.kti-subtree{display:flex;align-items:center}
.kti-h-line{width:20px;height:2px;background:var(--bdr-s);flex-shrink:0;align-self:center}
.kti-children{display:flex;flex-direction:column;gap:16px;position:relative}
.kti-children::before{content:'';position:absolute;left:0;top:var(--vline-top,0);height:var(--vline-h,0);width:2px;background:var(--bdr-s)}
.kti-child-row{display:flex;align-items:center}
.kti-child-row::before{content:'';width:20px;height:2px;background:var(--bdr-s);flex-shrink:0}
.kti-legend{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:var(--t2);padding:4px 11px;border-radius:20px;background:var(--surf);border:1px solid var(--bdr)}
.kti-legend::before{display:none}
.kti-legend.status-ok  {background:var(--green-d);color:var(--green);border-color:#BBF7D0}
.kti-legend.status-warn{background:var(--amber-d);color:var(--amber);border-color:#FDE68A}
.kti-legend.status-ng  {background:var(--red-d);color:var(--red);border-color:#FECACA}
/* ── KTI ドラッグ＆ドロップ ── */
.kti-drag-handle{
  position:absolute;top:8px;left:8px;
  font-size:11px;color:transparent;cursor:grab;
  user-select:none;line-height:1;transition:color .15s;
  pointer-events:none;
}
.kti-node:hover .kti-drag-handle{color:var(--t3)}
.kti-node[draggable="true"]{cursor:grab}
.kti-node.kti-dragging{opacity:.35;border-style:dashed;border-color:var(--accent) !important}
.kti-node.kti-drop-over{
  border-color:var(--accent) !important;
  background:var(--accent-d) !important;
  box-shadow:0 0 0 3px rgba(22,163,74,0.18);
}
/* チームTODO（逆算） セクション */
.kti-team-todo{margin-top:24px}
.kti-team-todo-title{
  font-size:13px;font-weight:500;color:var(--t1);
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid var(--bdr);
}
.kti-team-todo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.kti-person-card{
  background:var(--card-bg);
  border:1px solid var(--bdr);border-radius:var(--rc);padding:14px 16px;
  position:relative;overflow:hidden;
}
.kti-person-card::before{display:none}
.kti-person-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--bdr)}
.kti-person-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--accent-d);
  border:1px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:500;color:var(--accent);flex-shrink:0;
}
.kti-person-name{font-size:13px;font-weight:500;color:var(--t1)}
.kti-person-kpi{font-size:11px;color:var(--t3);margin-top:1px}
.kti-task-row{
  display:flex;align-items:flex-start;gap:7px;
  padding:5px 0;border-bottom:1px solid var(--bdr);
}
.kti-task-row:last-child{border-bottom:none;padding-bottom:0}
.kti-task-check{
  width:15px;height:15px;border-radius:4px;
  border:1.5px solid var(--bdr-s);flex-shrink:0;margin-top:1px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .15s;
}
.kti-task-check:hover{border-color:var(--accent);background:var(--accent-d)}
.kti-task-text{font-size:11.5px;color:var(--t2);line-height:1.45;flex:1}
.kti-task-kpi-ref{
  font-size:10px;font-weight:500;padding:1px 5px;border-radius:3px;
  flex-shrink:0;margin-top:2px;
}
.kti-task-kpi-ref.revenue{background:var(--accent-d);color:var(--accent)}
.kti-task-kpi-ref.pipeline{background:#DCFCE7;color:#15803D}
.kti-task-kpi-ref.efficiency{background:var(--green-d);color:var(--green)}
.kti-task-kpi-ref.risk{background:var(--red-d);color:var(--red)}

/* ────────────────────────────────
   CS (カスタマーサクセス)
──────────────────────────────── */
.cs-health-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}
.cs-health-ok{background:var(--green-d);color:var(--green)}
.cs-health-warn{background:var(--amber-d);color:var(--amber)}
.cs-health-ng{background:var(--red-d);color:var(--red)}
.cs-risk-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}
.cs-risk-high{background:var(--red-d);color:var(--red)}
.cs-risk-mid{background:var(--amber-d);color:var(--amber)}
.cs-risk-low{background:var(--green-d);color:var(--green)}
.cs-progress-wrap{width:80px;display:inline-block}
.cs-progress-track{height:5px;background:var(--surf-h);border-radius:3px;overflow:hidden}
.cs-progress-fill{height:100%;border-radius:3px;background:var(--accent);transition:width .6s}
.cs-tbl{width:100%;border-collapse:collapse;font-size:13px}
.cs-tbl th{padding:8px 12px;font-size:11.5px;font-weight:500;color:var(--t2);background:var(--surf);border-bottom:1px solid var(--bdr);text-transform:none;letter-spacing:0}
.cs-tbl td{padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.04);vertical-align:middle}
.cs-tbl tr:hover td{background:rgba(0,0,0,0.025)}

/* ────────────────────────────────
   CONTRACTS CRUD
──────────────────────────────── */
.contract-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contract-row-actions{display:flex;gap:6px;align-items:center}
.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:6px;border:1px solid var(--bdr);
  background:var(--surf);color:var(--t2);cursor:pointer;font-size:12px;
  transition:all .15s;flex-shrink:0;
}
.btn-icon:hover{background:var(--accent-d);border-color:var(--accent);color:var(--accent)}
.btn-icon.danger:hover{background:var(--red-d);border-color:rgba(220,38,38,.35);color:var(--red)}

/* ────────────────────────────────
   RADAR WRAP (採用進捗)
──────────────────────────────── */
.radar-wrap{position:relative;height:200px}

/* ────────────────────────────────
   DECISION LOG (判断ログ)
──────────────────────────────── */
.dl-type-hiring    {background:var(--accent-d);color:var(--accent)}
.dl-type-cost      {background:var(--amber-d);color:var(--amber)}
.dl-type-investment{background:#EDE9FE;color:#6D28D9}

/* ════════════════════════════════════════
   TAILWIND PLUS UI BLOCKS — New Components
   ════════════════════════════════════════ */

/* ────────────────────────────────
   PAGE HEADING
   (Tailwind UI Application UI — Page headings)
──────────────────────────────── */
.page-hd{
  display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap; /* 中程度の幅でタイトル/ボタンが見切れないよう自然に折り返す */
  gap:16px;margin-bottom:24px;padding-bottom:16px;
  border-bottom:1px solid var(--bdr);
}
.page-hd-left{flex:1;min-width:0}
.page-title   {font-size:20px;font-weight:600;color:var(--t1);letter-spacing:-.02em;line-height:1.3;}
.section-title{font-size:16px;font-weight:600;color:var(--t1);letter-spacing:-.01em;}
.page-hd-sub{
  font-size:12px;color:var(--t3);margin-top:4px;
  line-height:1.5;max-width:640px;
}
.page-hd-actions{
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;padding-top:3px;
  flex-wrap:wrap; /* 複数ボタンが横に入りきらない場合に折り返す */
}

/* ────────────────────────────────
   DESCRIPTION LIST
   (Tailwind UI Application UI — Description lists)
──────────────────────────────── */
.desc-list{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--bdr);border-radius:var(--rc);overflow:hidden;
}
.desc-item{
  padding:11px 14px;background:var(--card-bg);
  border-bottom:1px solid var(--bdr);
}
.desc-item:nth-child(odd){border-right:1px solid var(--bdr)}
.desc-item:nth-last-child(-n+2){border-bottom:none}
/* 奇数列の最終2件の border-bottom 制御 */
.desc-item:nth-last-child(1){border-bottom:none}
.desc-item:nth-last-child(2){border-bottom:none}
.desc-dt{
  font-size:11px;font-weight:500;color:var(--t3);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px;
}
.desc-dd{
  font-size:14px;font-weight:500;color:var(--t1);
  font-variant-numeric:tabular-nums;line-height:1.3;
}
.desc-dd.sm{font-size:13px;font-weight:500}
.desc-dd.muted{color:var(--t2);font-weight:400}

/* ────────────────────────────────
   EMPTY STATE
   (Tailwind UI Application UI — Empty states)
──────────────────────────────── */
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:60px 24px;
  text-align:center;
}
.empty-icon{
  width:40px;
  height:40px;
  color:var(--t4);
  margin-bottom:16px;
  stroke-width:1.5;
}
.empty-state-icon{
  width:56px;height:56px;border-radius:14px;
  background:var(--surf);border:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:16px;
}
.empty-title{
  font-size:14px;
  font-weight:500;
  color:var(--t2);
  margin-bottom:6px;
}
.empty-state-title{font-size:15px;font-weight:500;color:var(--t1);margin-bottom:6px}
.empty-sub{
  font-size:12px;
  color:var(--t3);
  margin-bottom:16px;
}
.empty-state-sub{font-size:13px;color:var(--t3);line-height:1.6;max-width:340px}
.empty-state-action{margin-top:20px;display:flex;align-items:center;gap:8px}

/* ────────────────────────────────
   SECTION DIVIDER WITH LABEL
   (Tailwind UI Application UI — Dividers)
──────────────────────────────── */
.sec-divider{
  display:flex;align-items:center;gap:12px;
  margin:20px 0 16px;
}
.sec-divider-label{
  font-size:11.5px;font-weight:500;color:var(--t3);
  letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;flex-shrink:0;
}
.sec-divider-line{flex:1;height:1px;background:var(--bdr)}

/* ────────────────────────────────
   STACKED LIST
   (Tailwind UI Application UI — Stacked lists)
──────────────────────────────── */
.stack-list{}
.stack-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--bdr);
  transition:background .1s;
}
.stack-item:first-child{border-top:1px solid var(--bdr)}
.stack-item:hover{background:var(--surf);padding-left:4px;padding-right:4px;margin:0 -4px;border-radius:var(--rs)}
.stack-item-avatar{
  width:38px;height:38px;border-radius:var(--rc);flex-shrink:0;
  background:var(--surf-h);border:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.stack-item-body{flex:1;min-width:0}
.stack-item-title{
  font-size:14px;font-weight:500;color:var(--t1);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stack-item-meta{
  font-size:12px;color:var(--t3);margin-top:2px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.stack-item-action{flex-shrink:0;display:flex;align-items:center;gap:6px}

/* ────────────────────────────────
   STATS GRID (data-grid)
   (Tailwind UI Application UI — Stats)
──────────────────────────────── */
.data-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:0;border:1px solid var(--bdr);border-radius:var(--rc);overflow:hidden;
}
.data-cell{
  background:var(--card-bg);padding:16px 18px;
  border-right:1px solid var(--bdr);border-bottom:1px solid var(--bdr);
}
.data-cell:nth-child(4n),.data-cell:last-child{border-right:none}
.data-cell-label{
  font-size:11px;font-weight:500;color:var(--t3);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px;
}
.data-cell-value{
  font-size:22px;font-weight:500;color:var(--t1);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;
}
.data-cell-sub{font-size:11px;color:var(--t3);margin-top:3px}

/* ────────────────────────────────
   STATUS INDICATOR
   (Tailwind UI — Inline status dot)
──────────────────────────────── */
.status-dot{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:500;
}
.status-dot::before{
  content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0;
}
.status-dot-green{color:var(--green)}.status-dot-green::before{background:var(--green)}
.status-dot-amber{color:var(--amber)}.status-dot-amber::before{background:var(--amber)}
.status-dot-red{color:var(--red)}.status-dot-red::before{background:var(--red)}
.status-dot-gray{color:var(--t2)}.status-dot-gray::before{background:var(--t3)}
.status-dot-blue{color:var(--accent)}.status-dot-blue::before{background:var(--accent)}

/* ────────────────────────────────
   CHIP FILTER BAR
──────────────────────────────── */
.chip-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chip-filter{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 12px;border-radius:9999px;
  font-size:12px;font-weight:500;cursor:pointer;
  border:1px solid var(--bdr-s);background:var(--card-bg);color:var(--t2);
  transition:all .12s;user-select:none;
}
.chip-filter:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-d)}
.chip-filter.active{
  background:var(--accent-d);
  border-color:var(--accent);
  color:var(--accent);font-weight:500;
}
/* ダッシュボード 期間フィルタボタン */
.dash-period-btn.active{
  background:var(--surf-h) !important;
  border-color:var(--bdr-s) !important;
  color:var(--t1) !important;
  font-weight:500 !important;
}
.dash-period-btn:hover{
  background:var(--surf-h) !important;
  color:var(--t1) !important;
}

/* ────────────────────────────────
   CARD SECTION (内部区切り付きセクション)
   (Tailwind UI — Divided card pattern)
──────────────────────────────── */
.card-section{
  padding-top:14px;margin-top:14px;
  border-top:1px solid var(--bdr);
}
.card-section-label{
  font-size:10.5px;font-weight:500;color:var(--t3);
  text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:10px;
}

/* ────────────────────────────────
   CALLOUT / NOTICE BOX
   (Tailwind UI Application UI — Alerts)
──────────────────────────────── */
.callout{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 16px;border-radius:var(--rc);
  border:1px solid var(--bdr);font-size:13px;line-height:1.55;
  background:var(--surf);color:var(--t1);
}
.callout-icon{font-size:16px;flex-shrink:0;margin-top:1px}
.callout-body{flex:1}
.callout-title{font-weight:500;margin-bottom:2px}
.callout.info,.callout-info{background:#ECFDF5;border-color:#BBF7D0;color:#15803D}
.callout.success{background:var(--green-d);border-color:#BBF7D0;color:var(--green)}
.callout.warn{background:var(--amber-d);border-color:#FDE68A;color:var(--amber)}
.callout.danger{background:var(--red-d);border-color:#FECACA;color:var(--red)}

/* ────────────────────────────────
   INLINE METADATA ROW
   (Tailwind UI — Meta tag row)
──────────────────────────────── */
.meta-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--t3);
}
.meta-item{display:flex;align-items:center;gap:5px}
.meta-item-icon{width:14px;height:14px;opacity:.5;flex-shrink:0}

/* ────────────────────────────────
   mb20, mt20 utilities
──────────────────────────────── */
.mb20{margin-bottom:20px}.mt20{margin-top:20px}
.mb24{margin-bottom:24px}.mt24{margin-top:24px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:1200px){.g5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.g5{grid-template-columns:repeat(2,1fr)}}

/* ────────────────────────────────
   2カラムグリッド
──────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.g2{grid-template-columns:1fr}}

/* ────────────────────────────────
   有休消化率 — leave-rate バッジ
──────────────────────────────── */
.leave-rate{font-weight:500;font-size:13px}
.leave-rate.good{color:var(--green)}
.leave-rate.warn{color:var(--amber)}
.leave-rate.risk{color:var(--red)}
.leave-prog-track{height:4px;border-radius:2px;background:var(--surf-h);overflow:hidden;min-width:60px;display:inline-block;vertical-align:middle}
.leave-prog-fill{height:100%;border-radius:2px;transition:width .5s}
.leave-prog-fill.good{background:var(--green)}
.leave-prog-fill.warn{background:var(--amber)}
.leave-prog-fill.risk{background:var(--red)}
.leave-law-ok{color:var(--green);font-weight:500}
.leave-law-ng{color:var(--red);font-weight:500}

/* ────────────────────────────────
   資本政策 — sh-badge（株主種別）
──────────────────────────────── */
.sh-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}
.sh-badge.founder{background:var(--accent-d);color:var(--accent)}
.sh-badge.vc{background:#EDE9FE;color:#6D28D9}
.sh-badge.angel{background:var(--green-d);color:var(--green)}
.sh-badge.pool{background:var(--surf);color:var(--t2)}

/* ────────────────────────────────
   資本政策 — round-badge（ラウンド種別）
──────────────────────────────── */
.round-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}
.round-badge.seed{background:var(--amber-d);color:var(--amber)}
.round-badge.pre-a{background:var(--accent-d);color:var(--accent)}
.round-badge.series-a{background:var(--accent-d);color:var(--accent)}
.round-badge.series-b{background:#EDE9FE;color:#6D28D9}

/* ────────────────────────────────
   資本政策 — so-badge（SOステータス）
──────────────────────────────── */
.so-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}
.so-badge.granted{background:var(--surf);color:var(--t2)}
.so-badge.vesting{background:var(--accent-d);color:var(--accent)}
.so-badge.vested{background:var(--green-d);color:var(--green)}
.so-badge.exercised{background:#EDE9FE;color:#6D28D9}
.so-badge.forfeited{background:var(--surf);color:var(--t3)}

/* ────────────────────────────────
   資本政策 — SOプール プログレスバー
──────────────────────────────── */
.so-pool-bar{display:flex;border-radius:6px;overflow:hidden;height:20px;gap:2px}
.so-pool-seg{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:#fff;transition:width .5s}
.so-pool-seg.issued{background:var(--accent)}
.so-pool-seg.available{background:var(--surf-h);color:var(--t3)}

/* ────────────────────────────────
   資本政策 — 希薄化シミュレーター
──────────────────────────────── */
.dilution-sim{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:768px){.dilution-sim{grid-template-columns:1fr}}
.dilution-input-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dilution-input-row label{font-size:13px;color:var(--t2);min-width:140px}
.dilution-result{background:var(--surf);border-radius:var(--rc);padding:16px}
.dilution-result-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--bdr);font-size:13px}
.dilution-result-row:last-child{border-bottom:none}
.dilution-result-label{color:var(--t2)}
.dilution-result-val{font-weight:500;color:var(--t1)}
.dilution-result-val.risk{color:var(--red)}

/* ────────────────────────────────
   会議体管理（議事録）
──────────────────────────────── */
/* 種別バッジ */
.mt-type-badge{display:inline-block;padding:2px 9px;border-radius:10px;font-size:11px;font-weight:500}
.mt-type-badge.board        {background:var(--accent-d);color:var(--accent)}
.mt-type-badge.shareholders {background:#EDE9FE;color:#6D28D9}
.mt-type-badge.management   {background:var(--green-d);color:var(--green)}

/* ステータスバッジ */
.mt-status-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:2px 9px;border-radius:10px}
.mt-status-badge.done        {background:var(--green-d);color:var(--green)}
.mt-status-badge.scheduled   {background:var(--surf);color:var(--t2);border:1px solid var(--bdr)}
.mt-status-badge.in-progress {background:var(--amber-d);color:var(--amber)}

/* 議題種別バッジ */
.mt-ag-type-badge{display:inline-block;padding:1px 7px;border-radius:8px;font-size:11px;font-weight:500}
.mt-ag-type-badge.confirm    {background:var(--surf);color:var(--t3)}
.mt-ag-type-badge.report     {background:var(--accent-d);color:var(--accent)}
.mt-ag-type-badge.discussion {background:var(--amber-d);color:var(--amber)}
.mt-ag-type-badge.resolution {background:var(--green-d);color:var(--green)}

/* 詳細ヘッダー */
.mt-detail-hd{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.mt-detail-hd .page-hd-title{font-size:18px}

/* 議題カード */
.mt-agenda-card{background:var(--card-bg);border:1px solid var(--bdr);border-radius:var(--rc);margin-bottom:10px;overflow:hidden}
.mt-agenda-card.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(22,163,74,.12)}
.mt-ag-hd{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--surf);border-bottom:1px solid var(--bdr);flex-wrap:wrap}
.mt-ag-num{font-size:12px;font-weight:500;color:var(--t3);min-width:36px;flex-shrink:0}
.mt-ag-title-input{flex:1;min-width:120px;font-size:13px;border:1px solid transparent;border-radius:4px;padding:2px 6px;background:transparent;color:var(--t1)}
.mt-ag-title-input:hover{border-color:var(--bdr)}
.mt-ag-title-input:focus{outline:none;border-color:var(--accent);background:var(--card-bg)}
.mt-ag-dur{font-size:11px;color:var(--t3);white-space:nowrap}
.mt-ag-body{padding:12px 14px}
.mt-ag-content{min-height:60px;resize:vertical}
.mt-ag-snapshot{margin-top:10px}
.mt-ag-snapshot-chart{height:180px;position:relative;margin-top:8px}
.mt-ag-resolution{margin-top:10px;padding-top:10px;border-top:1px solid var(--bdr)}
.mt-ag-comments{margin-top:10px}
.mt-comment-item{display:flex;gap:8px;margin-bottom:6px;font-size:12px;align-items:flex-start}
.mt-comment-meta{color:var(--t3);white-space:nowrap;min-width:110px;font-size:11px}
.mt-comment-text{color:var(--t2);flex:1;line-height:1.5}
.mt-ag-comment-input{display:flex;gap:6px;margin-top:8px}
.mt-ag-comment-input .form-input{flex:1}

/* 出席者アバター群 */
.mt-attendees{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mt-att-avatar{width:28px;height:28px;border-radius:50%;background:#374151;color:#fff;font-size:11px;font-weight:500;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* コピー元バナー */
.mt-copied-banner{background:rgba(245,158,11,0.14);border:1px solid rgba(245,158,11,0.30);border-radius:var(--rs);padding:8px 12px;font-size:12px;color:#fbbf24;margin-bottom:12px}

/* 出席者複数選択 */
.mt-attendees-select{min-height:80px}

/* ══════════════════════════════════════════════════════════
   TABLE_SPEC 統一上書き — 既存クラスを table-standard 仕様に寄せる
   A分類（財務・横長）: 13px / 1.5 / 4px 8px
   B/C分類（通常）: .tbl は別ブロック（14px / 1.6 / 6px 10px）
   ══════════════════════════════════════════════════════════ */

/* ① A分類 font / padding / tabular-nums 統一（財務・横長テーブル） */
.bnt th, .bnt td,
.eval-tbl th, .eval-tbl td,
.resp-tbl th, .resp-tbl td,
.lever-tbl th, .lever-tbl td,
.auth-matrix-tbl th, .auth-matrix-tbl td,
.inv-compare-tbl th, .inv-compare-tbl td,
.debt-sched-tbl th, .debt-sched-tbl td,
.cohort-tbl th, .cohort-tbl td,
.exp-cust-tbl th, .exp-cust-tbl td,
.map-tbl th, .map-tbl td,
.sub-ops-tbl thead th, .sub-ops-tbl tbody td, .sub-ops-tbl tfoot td,
.ledger-tbl #_lth-row th, .ledger-tbl #_llh-row th,
.cs-tbl th, .cs-tbl td {
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 4px 8px !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ① B/C分類 .tbl 強制（通常テーブル: 14px / 1.6 / 6px 10px） */
.tbl th, .tbl td {
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 6px 10px !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ② ヘッダー背景統一（surf: 薄グレー） */
.tbl th,
.bnt th,
.eval-tbl th,
.resp-tbl th,
.lever-tbl th,
.auth-matrix-tbl th,
.inv-compare-tbl th,
.debt-sched-tbl th,
.cohort-tbl th,
.exp-cust-tbl th,
.map-tbl th,
.sub-ops-tbl thead th,
.ledger-tbl #_llh-row th,
.ledger-tbl #_lth-row th,
.cs-tbl th {
  background: var(--surf) !important;
  color: var(--t2) !important;
}

/* ③ ホバー統一（#EFF6FF 薄青 — デザインシステムv2） */
.tbl tr:hover td,
.bnt tr:hover td,
.eval-tbl tr:hover td,
.resp-tbl tbody tr:hover td,
.lever-tbl tr:hover td,
.inv-compare-tbl tr:hover td,
.debt-sched-tbl tbody tr:hover td,
.cohort-tbl tbody tr:hover td,
.exp-cust-tbl tr:hover td,
.map-tbl tr:hover td,
.sub-ops-tbl tbody tr:hover td,
.ledger-tbl tbody tr:hover td,
.cs-tbl tr:hover td,
.fin-tbl tr:hover td:not(:first-child):not(.t-fix-r),
.hc-spr tr:hover td:not(.t-fix):not(.t-fix-r) { background: #EFF6FF !important; }

/* ④ .tbl 構造統一 */
.tbl { font-variant-numeric: tabular-nums; border-collapse: separate; border-spacing: 0; width: 100%; }
.tbl td { border-bottom: 1px solid var(--bdr); transition: background .08s; }
.tbl tr:last-child td { border-bottom: 1px solid var(--bdr); }
.tbl th { white-space: nowrap; border-bottom: 2px solid var(--bdr-s) !important; }

/* ⑤ fin-row-* 統一（fin-data.js 系テーブルの合計行・小計行） */
.fin-row-total td, .fin-row-sub td {
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* ⑥ bdg-detail-grid header 統一（ベンチマーク自身も含む） */
.bdg-detail-grid thead th {
  font-weight: 400 !important;
  padding: 4px 8px !important;
}

/* ⑦ border-collapse: separate 統一（sticky対応・TABLE_SPEC全クラス） */
.tbl, .bnt, .eval-tbl, .resp-tbl, .lever-tbl, .auth-matrix-tbl,
.inv-compare-tbl, .debt-sched-tbl, .cohort-tbl, .exp-cust-tbl,
.map-tbl, .sub-ops-tbl, .cs-tbl, .hc-tbl, .hc-spr,
.fin-table, .fin-tbl, .fin-model-tbl {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* ⑧ hc-spr デザインシステムv2違反除去（緑アクセント→青・bold→400） */
.hc-th-cur {
  background: var(--surf) !important;
  color: var(--t2) !important;
  border-bottom: 2px solid var(--blue) !important;
}
.hc-row-total td {
  font-weight: 400 !important;
  background: var(--surf) !important;
}

/* ⑧ 数値ユーティリティ */
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.num-tbl td:not(:first-child),
.num-tbl th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.num-tbl td:first-child,
.num-tbl th:first-child { text-align: left; }

/* ⑨ 2段ヘッダー */
.sub-ops-tbl thead tr:nth-child(2) th,
.cohort-tbl   thead tr:nth-child(2) th,
.exp-cust-tbl thead tr:nth-child(2) th,
.debt-sched-tbl thead tr:nth-child(2) th {
  background: var(--surf-h) !important;
  color: var(--t2) !important;
  border-bottom: 2px solid var(--bdr-s);
}

/* ⑩ col-total 累計列（緑禁止 — デザインシステムv2） */
.sub-ops-tbl td.col-total,
.cohort-tbl  td.col-total,
.debt-sched-tbl td.col-total {
  font-weight: 400;
  border-left: 2px solid var(--bdr);
}
.sub-ops-tbl thead th.col-total,
.cohort-tbl  thead th.col-total,
.debt-sched-tbl thead th.col-total {
  border-left: 2px solid var(--bdr-s) !important;
  color: var(--t2) !important;
}

/* ════════════════════════════════════════
   MBO 入力フォーム v4
════════════════════════════════════════ */

/* §2 目標カスケード */
.mbo-cascade-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: start;
}
.mbo-cascade-box {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--rs);
  padding: 12px 14px;
}
.mbo-cascade-box-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--t2);
  margin-bottom: 8px;
}
.mbo-cascade-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 30px;
  font-size: 18px;
  color: var(--t3);
}

/* §3 個人目標 — 重みバー */
.mbo-weight-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surf);
  border-radius: var(--rs);
  border: 1px solid var(--bdr);
}
.mbo-weight-track {
  flex: 1;
  height: 6px;
  background: var(--bdr);
  border-radius: 3px;
  overflow: hidden;
}
.mbo-weight-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .2s, background .2s;
}

/* §3 個人目標カード */
.mbo-goal-card {
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
}
.mbo-goal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 12px 16px;
  background: var(--surf);
  border-bottom: 1px solid var(--bdr);
  user-select: none;
}
.mbo-goal-header:hover { background: var(--surf-h); }
.mbo-section-inner {
  padding: 14px 16px;
  border-bottom: 1px solid var(--bdr);
  overflow: hidden;
}
.mbo-section-inner:last-child { border-bottom: none; }

/* §3 因果チェーン */
.mbo-causal-chain {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mbo-causal-box {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--rs);
  padding: 12px 14px;
}
.mbo-causal-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--t2);
  margin-bottom: 8px;
}
.mbo-causal-arrow-v {
  text-align: center;
  font-size: 18px;
  color: var(--t3);
  line-height: 28px;
}
.mbo-causal-therefore {
  border: 2px solid var(--accent);
  border-radius: var(--rs);
  padding: 12px 14px;
  background: var(--accent-d);
}
.mbo-causal-therefore .mbo-causal-label { color: var(--accent); }

/* §3 ステータスボタン */
.mbo-status-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.mbo-status-btn {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--bdr);
  font-size: 11px;
  cursor: pointer;
  background: #fff;
  color: var(--t2);
  transition: all .12s;
}
.mbo-status-btn:hover { border-color: var(--bdr-s); color: var(--t1); }
.mbo-status-btn.mbo-status-on-track  { background: var(--green-d); color: var(--green);  border-color: var(--green); }
.mbo-status-btn.mbo-status-at-risk   { background: var(--amber-d); color: var(--amber);  border-color: var(--amber); }
.mbo-status-btn.mbo-status-off-track { background: var(--red-d);   color: var(--red);    border-color: var(--red); }

/* §3 レビューボックス */
.mbo-review-box {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--rs);
  padding: 12px 14px;
}

/* §5 スコアカード */
.mbo-score-card {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--rs);
  padding: 14px 16px;
  text-align: center;
}
.mbo-score-num {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.03em;
}

/* 整形済みテキスト（locked 表示） */
.mbo-pre {
  white-space: pre-wrap;
  line-height: 1.6;
  color: var(--t1);
}


/* ════════════════════════════════════════
   RESPONSIVE — Mobile & Tablet
   ════════════════════════════════════════ */

/* ── ハンバーガーボタン（デスクトップ常時表示） ── */
.topbar-hamburger {
  display: flex;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border: 1px solid var(--bdr-s);
  border-radius: 6px; background: var(--card-bg);
  cursor: pointer; color: var(--t2);
  flex-shrink: 0; transition: all .15s;
}
.topbar-hamburger:hover { background: var(--surf); color: var(--t1); }
.topbar-hamburger svg { width: 16px; height: 16px; }

/* ── デスクトップ サイドバー折りたたみ（デスクトップ専用・モバイルに汚染しない） ── */
@media(min-width:769px) {
  .sidebar { transition: width .22s ease, min-width .22s ease; }
  .sidebar.desktop-collapsed { width: 6px !important; min-width: 6px !important; background: var(--bdr) !important; overflow: hidden !important; }
}

/* ── テーブルヘッダー角丸（border-collapse:separate のテーブル用） ── */
#_fa-tbl-inner table thead tr:first-child th:first-child { border-top-left-radius: 6px; }
#_fa-tbl-inner table thead tr:first-child th:last-child  { border-top-right-radius: 6px; }

/* ── サイドバーオーバーレイ ── */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 199;
}
.sidebar-overlay.open { display: block; }

/* ── グリッド補完 ── */
@media(max-width:1024px) {
  .g4 { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:900px) {
  .g3 { grid-template-columns: 1fr 1fr; }
  .g23 { grid-template-columns: 1fr; }
  .g32 { grid-template-columns: 1fr; }
}
@media(max-width:640px) {
  .g3 { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: 1fr 1fr; }
  .g23 { grid-template-columns: 1fr; }
  .g32 { grid-template-columns: 1fr; }
}
@media(max-width:480px) {
  .g4 { grid-template-columns: 1fr; }
}

/* ── タブレット（769px〜1024px） ── */
@media(min-width:769px) and (max-width:1024px) {
  :root { --sw: 220px; }
  .page { padding: 20px !important; }
  .topbar { padding: 0 20px; }
}

/* ── モバイル（〜768px） ── */
@media(max-width:768px) {

  /* ─ サイドバー: オフキャンバス ─ */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 200;
    transform: translateX(calc(-100% + 6px));
    transition: transform .25s ease;
    overflow-y: auto;
    overflow-x: hidden;
    width: var(--sw);
  }
  .sidebar.open { transform: translateX(0); }

  /* ─ メインエリア: フル幅 ─ */
  .main { width: 100%; }

  /* ─ ハンバーガーボタン: 表示 ─ */
  .topbar-hamburger { display: flex; }

  /* ─ トップバー: コンパクト ─ */
  .topbar { padding: 0 12px; gap: 8px; height: var(--th); }
  .topbar-right { gap: 6px; }
  .chip.live { display: none; }
  .chip:not(.live) { display: none; }
  .unit-chip { display: none; }

  /* ─ ページパディング縮小 ─ */
  .page { padding: 16px 12px !important; }

  /* ─ モーダル: フル幅・ボトムシート ─ */
  .moverlay { align-items: flex-end; padding: 0; }
  .mbox {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
    width: 100%;
  }

  /* ─ ページヘッダー ─ */
  .page-hd { flex-direction: column; gap: 12px; margin-bottom: 20px !important; padding-bottom: 16px !important; }
  .page-hd-title { font-size: 17px; }
  .page-hd-actions { width: 100%; flex-wrap: wrap; }

  /* ─ sec-hd ─ */
  .sec-hd { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 16px; }

  /* ─ カード ─ */
  .card { padding: 16px; }

  /* ─ KPI カード値 ─ */
  .kpi-value { font-size: 26px; }

  /* ─ フォームグリッド ─ */
  .emp-form-grid { grid-template-columns: 1fr; }
  .form-group.span2 { grid-column: span 1; }
  .contract-form-grid { grid-template-columns: 1fr; }

  /* ─ Description List ─ */
  .desc-list { grid-template-columns: 1fr; }
  .desc-item:nth-child(odd) { border-right: none; }
  .desc-item { border-bottom: 1px solid var(--bdr); }
  .desc-item:last-child { border-bottom: none; }

  /* ─ セールスファネル ─ */
  .sales-funnel-grid { grid-template-columns: 1fr; }

  /* ─ MBO カスケード ─ */
  .mbo-cascade-flow { grid-template-columns: 1fr; }
  .mbo-cascade-arrow { padding-top: 0; }

  /* ─ 評価サマリグリッド ─ */
  .eval-summary-grid { grid-template-columns: repeat(2,1fr); }
  .eval-budget-grid { grid-template-columns: 1fr; }
  .eval-person-card-body { grid-template-columns: 1fr; }

  /* ─ 予算月ナビ ─ */
  .bdg-month-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ─ KPIツリー ─ */
  .kti-tree-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ─ フィルタバー ─ */
  .hc-filter-bar { gap: 8px; padding: 8px 12px; }
  .ledger-filter-bar { flex-wrap: wrap; gap: 6px; }
  .auth-filter-bar { gap: 4px; }

  /* ─ チップフィルタ ─ */
  .chip-bar { gap: 4px; }

  /* ─ スタックリスト ─ */
  .stack-item { gap: 10px; }
  .stack-item-action { flex-direction: column; align-items: flex-end; gap: 4px; }

  /* ─ ガバナンスモード ─ */
  .gov-modes { flex-direction: column; gap: 6px; }

  /* ─ バジェットバージョンバー ─ */
  .budget-ver-bar { flex-wrap: wrap; gap: 6px; }

  /* ─ リスクバー ─ */
  .risk-label { width: 100px; }
  .risk-val { width: 30px; }

  /* ─ BVAバー ─ */
  .bva-label { width: 90px; font-size: 12px; }
  .bva-val { width: 65px; font-size: 12px; }
  .bva-delta { width: 50px; font-size: 11px; }

  /* ─ view-toggle-bar ─ */
  .view-toggle-bar { flex-wrap: wrap; }

  /* ─ 希薄化シミュレーター ─ */
  .dilution-input-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dilution-input-row label { min-width: unset; }

  /* ─ テーブルスクロール確保 ─ */
  .fin-wrap, .hc-spr-wrap, .bnt-wrap, .bdg-detail-wrap,
  .budget-wrap, .sub-ops-wrap,
  .auth-matrix-wrap, .hc-spr-wrap { max-height: none; }

  /* ─ fin-tabs スクロール ─ */
  .fin-tabs { gap: 0; }
  .fin-tab { padding: 8px 12px; font-size: 12.5px; }

  /* ─ パイプライン確率バー ─ */
  .pipe-prob-bar-bg { width: 40px; }

  /* ─ カンバン ─ */
  .kanban-board { padding-bottom: 12px; }
  .kanban-col { min-width: 150px; }

  /* ─ データグリッド ─ */
  .data-grid { grid-template-columns: repeat(2, 1fr); }
  .data-cell-value { font-size: 18px; }

  /* ─ ページサブタイトル ─ */
  .page-hd-sub { font-size: 12px; }

  /* ─ スロットカード ─ */
  .slot-cards { gap: 8px; }
  .slot-card { min-width: 160px; }

  /* ─ 会議体コメント ─ */
  .mt-comment-meta { min-width: 80px; }
  .mt-ag-hd { gap: 6px; }
}

/* ── 財務諸表 部門別/セグメント別ビュー切替ボタン ── */
.brk-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ────────────────────────────────
   PIPELINE DEAL DRAWER
──────────────────────────────── */
.pipe-drawer-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,23,42,0.25);
}
.pipe-drawer {
  position: fixed; top: 0; right: -420px; bottom: 0;
  width: 420px; background: #FFFFFF;
  border-left: 1px solid var(--bdr-s);
  z-index: 201; overflow-y: auto;
  transition: right .25s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.pipe-drawer.open { right: 0; }
.pipe-drawer-hd {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--bdr);
  display: flex; align-items: flex-start; justify-content: space-between;
  background: var(--surf); flex-shrink: 0;
}
.pipe-drawer-body { padding: 20px; flex: 1; overflow-y: auto; }
.pipe-drawer-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--bdr);
  display: flex; gap: 8px; justify-content: flex-end;
  background: var(--surf); flex-shrink: 0;
}

/* Stage badge — enhanced */
.pipe-stage-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; padding: 2px 8px;
  border-radius: 6px; white-space: nowrap;
}
.pipe-lead   { background: var(--surf); color: #6B7280; border: 1px solid #E5E7EB; }
.pipe-appt   { background: #ECFDF5; color: #16A34A; border: 1px solid rgba(22,163,74,0.25); }
.pipe-demo   { background: #F5F3FF; color: #7C3AED; border: 1px solid rgba(124,58,237,0.25); }
.pipe-close  { background: #FEFCE8; color: #92400E; border: 1px solid rgba(202,138,4,0.25); }
.pipe-won    { background: #F0FDF4; color: #15803D; border: 1px solid rgba(22,163,74,0.25); }
.pipe-lost   { background: #FEF2F2; color: #B91C1C; border: 1px solid rgba(220,38,38,0.25); }

/* Stage stepper */
.pipe-stage-stepper {
  display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0;
}
.pipe-stage-step {
  flex: 1; min-width: 80px; padding: 8px 6px;
  border: 1px solid var(--bdr); border-radius: var(--rs);
  text-align: center; font-size: 11px; font-weight: 500;
  cursor: pointer; transition: all .15s; color: var(--t3);
  background: var(--card-bg);
}
.pipe-stage-step:hover { border-color: var(--accent); color: var(--accent); }
.pipe-stage-step.current {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.pipe-stage-step.past {
  background: var(--green-d); color: var(--green); border-color: rgba(22,163,74,0.25);
}

/* Prob slider */
.prob-slider-wrap { display: flex; align-items: center; gap: 10px; }
.prob-slider {
  flex: 1; -webkit-appearance: none; height: 4px;
  border-radius: 2px; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--val, 50%), var(--surf-h) var(--val, 50%));
}
.prob-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: var(--accent);
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.prob-val-badge {
  min-width: 40px; text-align: center; font-size: 13px;
  font-weight: 500; color: var(--accent);
  background: var(--accent-d); padding: 2px 6px; border-radius: 4px;
}

/* Pipeline list row hover action */
.pipe-row-actions {
  display: none; gap: 4px;
}
tr:hover .pipe-row-actions { display: flex; }

/* Alert banner */
.alert-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: var(--rs);
  margin-bottom: 12px; font-size: 13px;
  border: 1px solid;
}
.alert-banner.danger {
  background: var(--red-d); border-color: rgba(220,38,38,0.25); color: #991B1B;
}
.alert-banner.warn {
  background: var(--amber-d); border-color: rgba(202,138,4,0.25); color: #78350F;
}
.alert-banner.info {
  background: var(--accent-d); border-color: rgba(22,163,74,0.25); color: #14532D;
}
.alert-banner.success {
  background: var(--green-d); border-color: rgba(22,163,74,0.25); color: #14532D;
}

/* Dashboard mission control */
.dash-zone {
  margin-bottom: 20px;
}
.dash-zone-title {
  font-size: 10px; font-weight: 500; color: var(--t3);
  text-transform: uppercase; letter-spacing: .10em;
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.dash-zone-title::after {
  content: ''; flex: 1; height: 1px; background: var(--bdr);
}
.dash-action-card {
  background: var(--card-bg); border: 1px solid var(--bdr);
  border-radius: var(--rc); padding: 14px 18px;
  cursor: pointer; transition: border-color .15s;
  display: flex; align-items: flex-start; gap: 12px;
}
.dash-action-card:hover { border-color: var(--accent); }
.dash-action-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.dash-action-title { font-size: 13px; font-weight: 500; color: var(--t1); margin-bottom: 2px; }
.dash-action-sub   { font-size: 12px; color: var(--t2); line-height: 1.4; }
.dash-action-count {
  margin-left: auto; font-size: 20px; font-weight: 500;
  color: var(--t1); letter-spacing: -.02em; white-space: nowrap;
}

/* ════════════════════════════════════════════════════
   STATE SWITCHER — Real-time / Recognized / Locked
   構造ドリル型UI の「上軸」: 何の状態を見ているか
════════════════════════════════════════════════════ */
.state-switcher{
  display:inline-flex;align-items:center;gap:2px;
  background:var(--surf);border:1px solid var(--bdr);
  border-radius:6px;padding:2px;
}
.state-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px;border-radius:4px;
  font-size:12px;font-weight:500;color:var(--t3);
  cursor:pointer;background:transparent;border:none;
  transition:background .12s,color .12s,box-shadow .12s;
  white-space:nowrap;
}
.state-btn:hover{color:var(--t2)}
.state-btn.active{
  background:var(--card-bg);color:var(--t1);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.state-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
}
.state-realtime  { background:var(--amber); }
.state-recognized{ background:var(--accent); }
.state-locked    { background:var(--t4); }
/* Real-time は生きているデータなので点滅 */
.state-btn[data-state="realtime"].active .state-realtime{
  animation:blink 1.8s infinite;
}

/* ════════════════════════════════════════════════════
   TABLE DESIGN v2 — 構造ドリル型
   思想: 「テーブルは構造の入口」
         行はドリル可能、状態は左ボーダーで表現
════════════════════════════════════════════════════ */

/* ── 基本テーブル刷新 ── */
/* font-size: 14px / padding: 6px 10px は enforcement block（line ~3050）が担保 */
.tbl th{
  background:var(--surf) !important;
  color:var(--t2) !important;
  letter-spacing:.03em;
  border-bottom:1px solid var(--bdr-s) !important;
  padding:6px 10px !important;
  white-space:nowrap;
}
.tbl td{
  border-bottom:1px solid var(--bdr-s);
  transition:background .08s, border-left-color .08s;
}
/* 偶数行の背景 — 白統一（2026-04-04） */
.tbl tr:nth-child(even) td{ background:#FFFFFF }
.tbl tr:hover td{ background:rgba(0,0,0,.025) !important }

/* ── 状態行 — 左ボーダーで状態を表現 ── */
.tbl tr.s-raw td:first-child     { border-left:2px solid var(--amber) }
.tbl tr.s-recognized td:first-child { border-left:2px solid var(--accent) }
.tbl tr.s-locked td:first-child   { border-left:2px solid var(--t4) }

/* ── ドリルダウン行 ── */
.tbl tr.drillable{ cursor:pointer }
.tbl tr.drillable:hover td{ background:var(--accent-d) !important }
/* expand indicator: ▶ を td.drill-col の末尾に */
.tbl td.drill-col{
  display:flex;align-items:center;gap:0;
}
.tbl td.drill-col::after{
  content:'›';margin-left:auto;padding-left:8px;
  font-size:14px;color:var(--t4);
  transition:transform .15s,color .15s;
  flex-shrink:0;
}
.tbl tr.drillable:hover td.drill-col::after{ color:var(--accent);transform:translateX(2px) }
.tbl tr.drillable.expanded td.drill-col::after{ content:'›';transform:rotate(90deg);color:var(--accent) }

/* ── サブ行（ドリル展開後の子行）── */
.tbl tr.sub-row td{
  background:var(--accent-d) !important;
  font-size:12px;color:var(--t3);
  padding-top:5px;padding-bottom:5px;
}
.tbl tr.sub-row td:first-child{ padding-left:28px }
.tbl tr.sub-row:hover td{ background:rgba(22,163,74,.08) !important }

/* ── 状態バッジ（テーブル内）── */
.state-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:500;padding:2px 7px;
  border-radius:4px;white-space:nowrap;
}
.state-badge.raw      { background:var(--amber-d);color:var(--amber);border:1px solid rgba(245,158,11,.25) }
.state-badge.recognized{ background:var(--accent-d);color:var(--accent);border:1px solid rgba(22,163,74,.25) }
.state-badge.locked   { background:var(--surf);color:var(--t3);border:1px solid var(--bdr) }
.state-badge::before{
  content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;
}


/* ── View Toggle（Financial / Model）── */
.topbar-view-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--rs);
  padding: 2px;
  margin: 0 8px;
}
.view-btn {
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--t3);
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: all .12s;
}
.view-btn.active {
  background: var(--card-bg);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.view-btn:hover:not(.active) {
  color: var(--t2);
  background: rgba(0,0,0,.03);
}

/* ── Period selector ── */
/* ════════════════════════════════════════
   INPUT LAYER — 入力レイヤー
   Apple的UX: タブ1段のみ / カードUI廃止 / アイコン廃止
   ════════════════════════════════════════ */

/* 外部取込 行リスト */
.input-import-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bdr-s);
  cursor: pointer;
  transition: background .1s;
}
.input-import-row:hover {
  background: var(--surf);
}
.input-import-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--t1);
}
.input-import-sub {
  font-size: 11px;
  color: var(--t3);
  margin-top: 1px;
}

/* ツールバー */
.input-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.input-toolbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.input-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 一括入力テーブル */
.bulk-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.bulk-tbl thead th {
  background: var(--surf);
  border-bottom: 1px solid var(--bdr);
  padding: 7px 10px;
  text-align: left;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--t2);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.bulk-tbl tbody tr:hover td {
  background: rgba(0,0,0,.015);
}
.bulk-tbl tbody td {
  border-bottom: 1px solid var(--bdr-s);
  padding: 3px 4px;
  vertical-align: middle;
}

/* セル入力 */
.input-cell {
  width: 100%;
  border: none;
  background: transparent;
  padding: 4px 6px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--t1);
  border-radius: var(--rs);
  outline: none;
  min-width: 60px;
}
.input-cell:focus {
  background: var(--accent-d);
  box-shadow: 0 0 0 2px rgba(22,163,74,.25);
}
.input-cell-select {
  width: 100%;
  border: none;
  background: transparent;
  padding: 4px 6px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--t1);
  border-radius: var(--rs);
  outline: none;
  cursor: pointer;
}
.input-cell-select:focus {
  background: var(--accent-d);
}

/* 行番号 */
.input-row-no {
  padding: 0 8px;
  color: var(--t4);
  font-size: 11px;
  user-select: none;
}

/* 行削除ボタン */
.input-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--t4);
  font-size: 14px;
  padding: 2px 6px;
  border-radius: var(--rs);
  line-height: 1;
}
.input-del-btn:hover {
  color: var(--red);
  background: var(--red-d);
}

/* ────────────────────────────────
   TOPBAR PERIOD (元の定義に戻る)
──────────────────────────────── */
.topbar-period {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 4px;
}

/* ── UIリファクタリング: Card廃止 / ミニマル設計 ─────────────────── */
.card, .panel, .box {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.card-header {
  border-bottom: none !important;
  background: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.kpi-main {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.kpi-positive { color: #16a34a; }
.kpi-negative { color: #dc2626; }
/* 資金状況 ミニマルレイアウト */
.cp-summary { margin-bottom: 32px; }
.cp-runway-label { font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.cp-runway-value { font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; margin-bottom: 4px; }
.cp-runway-sub   { font-size: 12px; color: var(--t3); margin-bottom: 24px; }
.cp-row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--bdr); max-width: 480px; }
.cp-row:last-child { border-bottom: none; }
.cp-row-label { font-size: 13px; color: var(--t2); }
.cp-row-value { font-size: 14px; font-weight: 500; color: var(--t1); }
.cp-section-label { font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; margin: 20px 0 8px; }

/* ── 2030 Design: Silent UI ─────────────────────────────────────
   UIが消えているように感じる。情報ではなく判断が残る。
──────────────────────────────────────────────────────────────── */

/* アイコン全廃（ナビ・empty-state） */
.nav-icon { display: none !important; }
.empty-state-icon { display: none !important; }

/* ナビ: アイコン削除後の padding 調整 */
.nav-item { gap: 0 !important; padding-left: 14px !important; }
.nav-item.active { padding-left: 12px !important; }

/* ページ説明文廃止（ラベルを削る） */
.page-hd-sub { display: none !important; }

/* ── PLテーブル 2030: Supabaseミニマル準拠 ─────────────────────
   KPIバッジ廃止 / ソース廃止 / 現在列強調 / 行背景廃止 / 単色
──────────────────────────────────────────────────────────────── */

/* KPIバッジ・ソース表示 全廃 */
.fin-kpi-toggle-btn  { display: none !important; }
.fin-src-mini,
.fin-src-badge,
.fin-src-state,
.fin-src-none,
.fin-src-warn        { display: none !important; }

/* 行背景色 全廃 */
.fin-row-hd td,
.fin-row-total td,
.fin-row-sub td,
.fin-row-rate td,
.fin-tbl tbody tr.fin-row-hd td { background: none !important; border-color: transparent !important; }

/* テーブルセクション区切り線 廃止 */
.fin-tbl td,
.fin-tbl th           { border-left: none !important; border-right: none !important; border-top: none !important; }
.fin-tbl tbody tr     { border-bottom: 1px solid var(--bdr) !important; }
.fin-tbl tbody tr.fin-row-hd { border-bottom: none !important; }

/* hover強調 廃止 */
.fin-tbl tbody tr:hover td { background: none !important; }

/* 数値色 統一（マイナスのみ赤） */
.fin-tbl td           { color: var(--t1) !important; }
.fin-tbl .val-neg     { color: var(--danger) !important; }

/* PL行 タイポグラフィ: 13px/400 統一（AL section準拠） */
.fin-tbl td:first-child                      { font-size: 13px; font-weight: 400; color: var(--t1); }
.fin-row-total td:first-child                { font-size: 12px; font-weight: 400 !important; }
.fin-row-sub td:first-child                  { font-size: 12px; font-weight: 400 !important; }
.fin-row-rate td                             { font-size: 11px; font-weight: 400; color: var(--t3) !important; }
.pln-depth-1 td:first-child,
.pln-depth-2 td:first-child                 { font-size: 13px; font-weight: 400; color: var(--t2); }
.fin-tbl td:not(:first-child)               { font-size: 13px; font-weight: 400; }

/* 現在列: 太字（カラー変化なし） */
.fin-tbl th.current-col,
.fin-tbl td.current-col                     { font-weight: 600 !important; }

/* 過去列: 薄く（仕様 0.55〜0.7、中央値 0.6 を採用） */
.fin-tbl th.past-col,
.fin-tbl td.past-col                        { opacity: 0.6; }

/* ヘッダ: uppercase 廃止・軽量化 */
.fin-tbl thead th                           { font-size: 11px; font-weight: 400; color: var(--t3); background: none !important; border-bottom: 1px solid var(--bdr); }

/* コントロールバー: ラベル廃止、ボタンをテキストリンク化 */
.fin-ctrl-label                             { display: none !important; }
.fin-sw-btn {
  border: none !important;
  background: none !important;
  color: #999;
  font-size: 13px;
  font-weight: 400;
  padding: 4px 8px !important;
  border-radius: 0 !important;
  transition: color .1s;
}
.fin-sw-btn:hover                           { color: #111 !important; background: none !important; }
.fin-sw-btn.active                          { color: #111 !important; font-weight: 500 !important; border-bottom: 1px solid #111 !important; }
.fin-ctrl-sep                               { display: none !important; }
/* STATEボタン テキスト化 */
.fds-btn {
  border: none !important;
  background: none !important;
  font-size: 11px !important;
  color: #999 !important;
  padding: 4px 8px !important;
  font-weight: 400 !important;
}
.fds-btn[style*="accent"]                   { color: #111 !important; font-weight: 500 !important; }
/* fin-ctrl-bar 余白縮小 */
.fin-ctrl-bar                               { padding: 0 !important; margin-bottom: 8px !important; }
.fin-ctrl-row                               { padding: 4px 0 !important; gap: 0 !important; }
.fin-ctrl-row--b                            { padding-top: 2px !important; }
/* vt-btn テキスト化 */
.vt-btn {
  border: none !important;
  background: none !important;
  color: #999 !important;
  font-size: 12px !important;
  padding: 2px 8px !important;
  margin-right: 5px !important;
}
.vt-btn:hover                               { color: #111 !important; }
.vt-btn.active                              { color: var(--accent) !important; font-weight: 600 !important; background: var(--accent-d) !important; border-radius: var(--rs) !important; }
/* fds-state-label 非表示 */
#fds-state-label                            { display: none !important; }
/* SW-group ボーダーレス */
.fin-sw-group                               { border: none !important; background: none !important; gap: 0 !important; }
/* fin-ctrl-row--b: グレー背景廃止・白統一 */
.fin-ctrl-row--b                            { background: none !important; border-top: 1px solid var(--bdr) !important; }

/* ── メインタブ [PL][BS][CF][資金] ── */
.fin-main-tab {
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--t3);
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  font-family: inherit;
  line-height: 1;
  letter-spacing: 0;
}
.fin-main-tab.active                        { color: var(--accent-t); border-bottom-color: var(--accent); }
.fin-main-tab:hover                         { color: var(--t2); }

/* ── PL サブバッジ [管理][財務] — PLとBSの間にインライン表示 ── */
#fin-pl-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  max-width: 0;
  padding: 0;
  opacity: 0;
  transition: max-width .2s ease, opacity .15s ease, padding .2s ease;
}
#fin-pl-sub.visible {
  max-width: 120px;
  padding: 0 8px;
  opacity: 1;
}
.fin-pl-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 3px;
  border: 1px solid var(--bdr-s);
  background: var(--card-bg);
  color: var(--t3);
  cursor: pointer;
  transition: color .1s, background .1s, border-color .1s;
}
.fin-pl-badge:hover { color: var(--t2); border-color: var(--bdr); }
.fin-pl-badge.active {
  background: var(--accent-d);
  color: var(--accent);
  border-color: rgba(37,99,235,0.3);
  font-weight: 600;
}

/* ════════════════════════════════════════
   asobito Design System 2030
   全画面共通 Spacing / Typography / Color トークン
   asobito_design_system_complete.md 準拠
════════════════════════════════════════ */

/* ── Spacing Tokens ── */
:root {
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-sm2: 12px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 40px;
  --sp-3xl: 48px;
  --sp-4xl: 64px;
}

/* ── Typography Tokens ── */
:root {
  --fs-micro:  12px;   /* 比率 / メタ */
  --fs-meta:   13px;   /* ボタン / タブ / 子行 */
  --fs-body:   14px;   /* 基本テキスト / 主行ラベル */
  --fs-strong: 16px;   /* 強調 body */
  --fs-section:18px;   /* セクションタイトル */
  --fs-title:  24px;   /* ページタイトル */
  --fs-kpi:    28px;   /* KPI 値 */
  --fs-hero:   40px;   /* 最重要 KPI */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   600;
}

/* ── ページタイトル: components.css .page-hd-title が担保（!important 禁止） ── */

/* ── KPI Typography 統一（28px 標準 / 40px hero） ── */
.kpi-label                                 { font-size: var(--fs-micro) !important; font-weight: var(--fw-normal) !important; color: var(--t3); }
.kpi-value                                 { font-size: var(--fs-kpi) !important; font-weight: var(--fw-bold) !important; letter-spacing: -.02em; }
.kpi-unit                                  { font-size: var(--fs-micro) !important; font-weight: var(--fw-normal) !important; color: var(--t3); }
.kpi-main                                  { font-size: var(--fs-hero) !important; font-weight: var(--fw-bold) !important; }

/* ── Table Row Heights（Design System: primary 44px / normal 36px / child 30px / meta 24px） ── */
.tbl tbody tr                              { height: 36px; }
.tbl tbody tr.fin-row-sub,
.tbl tbody tr.fin-row-total                { height: 44px; }
.tbl tbody tr.pln-depth-1,
.tbl tbody tr.pln-depth-2                  { height: 30px; }
.tbl tbody tr.fin-row-rate,
.tbl tbody tr.fin-row-detail               { height: 24px; }

/* ── Section / Block Spacing 統一 ── */
.card + .card                              { margin-top: var(--sp-lg); }    /* 24px: ブロック間 */
.card-section                              { margin-top: var(--sp-2xl); }   /* 40px: セクション間 */
.mb-section                                { margin-bottom: var(--sp-2xl); }

/* ── Badge / Tag: 使用最小化（許可された状態・警告用途のみ） ── */
.b-pill, .b-ring                           { height: 20px; padding: 0 8px; font-size: var(--fs-micro); line-height: 20px; }

/* ── Shadow 禁止: 全コンポーネント ── */
.card, .kpi, .kpi-card, .modal, .mbox     { box-shadow: none !important; }

/* ── Left-line decoration 禁止 ── */
[class*="left-line"], [class*="border-l"]  { border-left: none !important; }

/* ── Gradient 禁止 ── */
[class*="gradient"]                        { background: none !important; }

/* ── Button height 統一 32px（小型 28px は .btn-sm で対応済み） ── */
.btn-primary, .btn-secondary               { height: 32px !important; font-size: var(--fs-meta) !important; font-weight: var(--fw-medium) !important; }
.btn-accent, .btn-danger                   { height: 28px !important; font-size: var(--fs-meta) !important; font-weight: var(--fw-medium) !important; padding: 0 12px !important; }

/* ════════════════════════════════════════
   §3-3 fin-row-hd: グレー背景完全廃止
   sticky 用に白のみ確保（surf = グレー は廃止）
════════════════════════════════════════ */
/* sticky セル: 白を確保してコンテンツが透けないようにする */
.fin-tbl tbody tr.fin-row-hd td:first-child { background: #FFFFFF !important; }
/* 上部余白: セクション間の区切りは余白のみ（border-top で視覚補助）*/
.fin-tbl tbody tr.fin-row-hd              { border-top: 1px solid var(--bdr) !important; }
/* hd ラベル: 上に余白を確保 */
.fin-tbl tbody tr.fin-row-hd td          {
  padding-top: 18px !important;
  padding-bottom: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--t3) !important;
  letter-spacing: 0.04em !important;
}

/* ════════════════════════════════════════
   §3-4 fin-indent: 階層強化
   左ボーダー + フォントサイズ差 + 色階調
════════════════════════════════════════ */
/* data 子行（indent:true) */
.fin-tbl .fin-indent td:first-child {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--t2) !important;
  padding-left: 24px !important;
  border-left: none !important;
}
/* 数値列（子行）: 少し薄く */
.fin-tbl .fin-indent td:not(:first-child) { color: var(--t2) !important; font-size: 12px !important; }

/* fin-row-sub（集計行）: 左ボーダーなし・親を引き継ぐ太さ */
.fin-tbl .fin-row-sub td:first-child { border-left: none !important; }

/* pln-depth-1/2（実際の子行クラス）: 色を明示上書き */
.fin-tbl tr.pln-depth-1 td:first-child,
.fin-tbl tr.pln-depth-2 td:first-child {
  color: var(--t2) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  border-left: none !important;
}
.fin-tbl tr.pln-depth-1 td:not(:first-child),
.fin-tbl tr.pln-depth-2 td:not(:first-child) {
  color: var(--t2) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* ════════════════════════════════════════
   §3-5 現在列: 強調 + 他列を薄く（current-col 補強）
════════════════════════════════════════ */
/* current-col: 全セルで太字に加え、ヘッダーもわずかに濃く */
.fin-tbl th.current-col                  { color: #111 !important; font-weight: 600 !important; font-size: 12px !important; }
.fin-tbl td.current-col                  { font-weight: 600 !important; }
/* past-col: opacity でなく color で淡化（print でも機能するように） */
.fin-tbl th.past-col                     { color: #bbb !important; }
.fin-tbl td.past-col                     { color: #aaa !important; opacity: 1 !important; }
/* 過去列の負値も淡化維持 */
.fin-tbl td.past-col.val-neg,
.fin-tbl td.past-col .val-neg            { color: rgba(220,38,38,0.45) !important; }

/* ════════════════════════════════════════
   レイアウト構造（アイコンレール型サイドバー）
   slim=48px / hover=130px / expanded=240px
   Main: 常に 48px オフセット（サイドバーはオーバーレイ）
════════════════════════════════════════ */

/* ── Topbar: 全幅固定 ── */
.topbar {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 300 !important;
}

/* ════════════════════════════════════════
   アイコンレール — Supabase型
   ・slim(48px): アイコンのみ
   ・hover(200px): 全グループのアイコン+ラベルが一斉横展開
   ・グループhover: 右側にサブ項目フライアウト（参考2）
════════════════════════════════════════ */

/* サイドバー: slim デフォルト、hover で横展開 */
.sidebar {
  position: fixed !important;
  top: var(--th) !important; left: 0 !important; bottom: 0 !important;
  z-index: 200 !important;
  width: 48px !important; min-width: 48px !important;
  display: flex !important; flex-direction: column !important;
  overflow: hidden !important;
  background: var(--sb-bg) !important;
  border-right: 1px solid var(--sb-bdr) !important;
  transition: width 0.18s ease !important;
}
/* hover で全ラベル一斉表示 */
.sidebar:hover:not(.desktop-collapsed) {
  width: 200px !important;
  z-index: 210 !important;
  box-shadow: 2px 0 10px rgba(0,0,0,0.06) !important;
}
/* flyout 展開中はサイドバーを hover 展開状態に保持 */
.sidebar.nav-flyout-open {
  width: 200px !important;
  z-index: 210 !important;
  box-shadow: 2px 0 10px rgba(0,0,0,0.06) !important;
}

/* Main: 常に48pxオフセット（サイドバーはoverlay） */
.main { margin-left: 48px !important; padding-top: var(--th) !important; }

/* desktop-collapsed */
.sidebar.desktop-collapsed { width: 6px !important; min-width: 6px !important; }
.sidebar.desktop-collapsed + .main, .main.sidebar-collapsed { margin-left: 6px !important; }

/* ── グループヘッダー ── */
.sidebar-nav .nav-group { position: relative !important; }
.sidebar-nav .nav-group-hd {
  display: flex !important; align-items: center !important;
  gap: 8px !important; padding: 8px 16px !important;
  white-space: nowrap !important;
  cursor: pointer !important; color: var(--sb-txt) !important;
  transition: color 0.12s !important;
}
/* L1 hover: expanded mode のみ適用（slim mode / collapsed には当たらない） */
.sidebar:hover:not(.desktop-collapsed) .sidebar-nav .nav-group:hover .nav-group-hd {
  color: var(--sb-active) !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: var(--menu-hover-radius) !important;
}
.sidebar.nav-flyout-open .sidebar-nav .nav-group:hover .nav-group-hd {
  color: var(--sb-active) !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: var(--menu-hover-radius) !important;
}
.sidebar-nav .nav-group-icon { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }

/* グループラベル: 旧ルール(padding:16px 12px 4px)を完全上書き */
/* slim時は max-width:0 で非表示、hover時にスライドイン（アイコン位置は一切動かない） */
.sidebar-nav .nav-group-label {
  display: block !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 12px !important; font-weight: 500 !important;
  color: inherit !important; white-space: nowrap !important;
  letter-spacing: 0 !important; text-transform: none !important;
  max-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: max-width 0.18s ease, opacity 0.15s ease !important;
}
.sidebar:hover:not(.desktop-collapsed) .sidebar-nav .nav-group-label {
  max-width: 140px !important;
  opacity: 1 !important;
}
.sidebar.nav-flyout-open .sidebar-nav .nav-group-label {
  max-width: 140px !important;
  opacity: 1 !important;
}
/* アクティブグループ: ラベルは teal 文字のみ（下線廃止・slim時に不可視のため） */
.sidebar-nav .nav-group.nav-group-active .nav-group-label {
  color: var(--sb-accent) !important;
}
/* ── L1 nav-chevron: slim時非表示 → expanded時スライドイン ── */
.sidebar-nav .nav-group-hd .nav-chevron {
  opacity: 0 !important;
  max-width: 0 !important;       /* レイアウトから除去: flex-shrink:0 があるため width ではなく max-width */
  overflow: hidden !important;   /* SVG コンテンツのはみ出し防止 */
  margin-left: 0 !important;     /* auto を無効化: 0px幅でも margin-left:auto は free space を吸収するため */
  transform: translateX(-2px) !important;
  transition: opacity 0.15s ease, transform 0.18s ease, max-width 0.18s ease, color 120ms ease !important;
}
.sidebar:hover:not(.desktop-collapsed) .sidebar-nav .nav-group-hd .nav-chevron,
.sidebar.nav-flyout-open .sidebar-nav .nav-group-hd .nav-chevron {
  opacity: 1 !important;
  max-width: 20px !important;    /* 自然サイズへ復帰（chevron は 14px） */
  margin-left: auto !important;  /* 右寄せ復帰 */
  transform: translateX(0) !important;
}
.sidebar:hover:not(.desktop-collapsed) .sidebar-nav .nav-group:hover .nav-group-hd .nav-chevron,
.sidebar.nav-flyout-open .sidebar-nav .nav-group:hover .nav-group-hd .nav-chevron {
  color: var(--sb-active) !important;
}
.sidebar-nav .nav-group.nav-group-active .nav-group-hd .nav-chevron {
  color: var(--sb-accent) !important;
}
/* ── L1 slim active（独立コンポーネント: 丸pill / 統一文法の対象外） */
.sidebar-nav .nav-group.nav-group-active .nav-group-hd {
  color: var(--sb-active) !important;
  background: var(--sb-act-bg) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  width: 32px !important;
  height: 32px !important;
  margin: 2px auto !important;
  justify-content: center !important;
  padding: 0 !important;
  gap: 0 !important;
}
/* ── L1 expanded active（pill統一: slim active と同造形・装飾なし） */
.sidebar:hover:not(.desktop-collapsed) .sidebar-nav .nav-group.nav-group-active .nav-group-hd {
  color: var(--sb-active) !important;
  background: var(--sb-act-bg) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  margin: 2px 8px !important;
  justify-content: flex-start !important;
  padding: var(--menu-hover-py) var(--menu-hover-px) !important;
  gap: 8px !important;
}
.sidebar.nav-flyout-open .sidebar-nav .nav-group.nav-group-active .nav-group-hd {
  color: var(--sb-active) !important;
  background: var(--sb-act-bg) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  margin: 2px 8px !important;
  justify-content: flex-start !important;
  padding: var(--menu-hover-py) var(--menu-hover-px) !important;
  gap: 8px !important;
}

/* ── サブ項目フライアウト: hover ではなく click で表示 ── */
.sidebar-nav .nav-group-flyout {
  display: none !important;
  position: fixed !important;
  min-width: 192px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.08) !important;
  z-index: 300 !important;
  padding: var(--_sp-4) !important;  /* 構造余白 4px 全周 — 12px リズム起点 */
  max-height: calc(100vh - 80px) !important;
  overflow-y: auto !important;
}
/* クリックで開いたグループ */
.sidebar-nav .nav-group.nav-group-open .nav-group-flyout { display: block !important; }

/* フライアウト内ラベル: 非表示（サイドバー側グループ名と重複するため） */
.sidebar-nav .nav-group-flyout-label { display: none !important; }

/* フライアウト内セクション見出し */
.sidebar-nav .nav-group-flyout .nav-flyout-section {
  display: block !important;
  padding: var(--menu-hover-py) var(--menu-hover-px) var(--_sp-4) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--t4) !important;
  white-space: nowrap !important;
}
/* フライアウト内区切り線 */
.sidebar-nav .nav-group-flyout .nav-flyout-divider {
  display: block !important;
  height: 1px !important;
  background: var(--bdr) !important;
  margin: var(--_sp-4) var(--_sp-8) !important;
}
/* フライアウト内 nav-item: サイドバーグループ行と同じパディング・フォントサイズで縦位置を揃える */
.sidebar-nav .nav-group-flyout .nav-item {
  display: flex !important; align-items: center !important;
  padding: var(--menu-hover-py) var(--menu-hover-px) !important; font-size: 12px !important;
  line-height: 1 !important;  /* leading除去: normal(≈1.21)だと非整数14.5pxになり flexbox中央配置で1px下方ズレが発生するため */
  color: var(--t2) !important; cursor: pointer !important; white-space: nowrap !important;
}
/* ── L2/L3 共通ホバー（統一文法） */
.sidebar-nav .nav-group-flyout .nav-item:hover {
  background: var(--menu-hover-bg) !important;
  color: var(--menu-hover-text) !important;
  border-radius: var(--menu-hover-radius) !important;
}
/* ── L2 active（pill・装飾なし） */
.sidebar-nav .nav-group-flyout .nav-item.active {
  background: var(--menu-active-bg) !important;
  color: var(--menu-active-text) !important;
  font-weight: var(--fw-regular) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}


/* ── 事業 2段 flyout ── */

/* flyout 内ラベル（経営/事業など）: 経営・人・組織・業務は非表示、事業L1ヘッダーは表示 */
.nav-biz-root .nav-group-flyout .nav-group-flyout-label {
  display: block !important;
  padding: 8px 12px 4px !important;
  font-size: 11px !important; font-weight: 600 !important;
  color: var(--t3) !important;
  border-bottom: 1px solid var(--bdr) !important;
  margin-bottom: 4px !important;
}

/* L1 アイテム（4事業） */
.nav-biz-l1-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  font-size: 12px !important; color: var(--t2) !important;
  cursor: pointer !important;
  border-radius: 4px !important; margin: 0 4px !important;
  transition: background 0.1s !important;
}
.nav-biz-l1-item:hover,
.nav-biz-l1-item.active {
  background: var(--blue-soft) !important;
  color: var(--blue) !important;
}
.nav-biz-l1-arrow {
  font-size: 9px !important; color: var(--t4) !important; flex-shrink: 0 !important;
}
.nav-biz-l1-item:hover .nav-biz-l1-arrow,
.nav-biz-l1-item.active .nav-biz-l1-arrow {
  color: var(--blue) !important;
}

/* L2: 事業サブアイテムパネル（position:fixed） */
.nav-biz-l2 {
  position: fixed !important;
  min-width: 192px !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--r) !important;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.08) !important;
  z-index: 310 !important;
  padding: 0 0 8px !important;
}

/* L2 ラベル */
.nav-biz-l2-label {
  padding: 8px 12px 4px !important;
  font-size: 11px !important; font-weight: 600 !important;
  color: var(--t3) !important;
  border-bottom: 1px solid var(--bdr) !important;
  margin-bottom: 4px !important;
}

/* L2 内 nav-item */
.nav-biz-l2 .nav-item {
  display: flex !important; align-items: center !important;
  padding: 8px 12px !important; font-size: 12px !important;
  color: var(--t2) !important; cursor: pointer !important; white-space: nowrap !important;
}
.nav-biz-l2 .nav-item:hover { background: var(--blue-soft) !important; color: var(--blue) !important; }
.nav-biz-l2 .nav-item.active {
  background: var(--blue-soft) !important;
  color: var(--blue) !important; font-weight: 600 !important;
  border-left: 2px solid var(--blue) !important; padding-left: 10px !important;
}


/* ════════════════════════════════════════
   テーブルフォントサイズ統一
   13px/1.5 統一（AL section 新仕様）
════════════════════════════════════════ */
.fin-tbl td:first-child                    { font-size: 12px !important; font-weight: 400 !important; color: var(--t1) !important; }
.fin-tbl td:not(:first-child)              { font-size: 12px !important; font-weight: 400 !important; }
.fin-tbl .fin-row-total td:first-child     { font-size: 12px !important; font-weight: 400 !important; }
.fin-tbl .fin-row-sub td:first-child       { font-size: 12px !important; font-weight: 400 !important; }
.fin-tbl .fin-indent td:first-child        { font-size: 12px !important; font-weight: 400 !important; color: var(--t2) !important; }
.fin-tbl .fin-indent td:not(:first-child)  { font-size: 12px !important; font-weight: 400 !important; color: var(--t2) !important; }
.fin-tbl .fin-row-rate td                  { font-size: 11px !important; font-weight: 400 !important; }

/* 行高: 13px/1.5 に合わせて調整 */
.fin-tbl tbody tr                          { height: 32px !important; }
.fin-tbl tbody tr.fin-row-total            { height: 40px !important; }
.fin-tbl tbody tr.fin-row-rate             { height: 30px !important; }
.fin-tbl thead tr                          { height: 32px !important; }

/* ════════════════════════════════════════
   余白設計: 大きく・静謐・無駄なし
   Supabaseの余白感に近づける
════════════════════════════════════════ */
/* ページコンテンツ余白:
   .main は flex column。topbar(52px, position:relative) が先頭にあり .pages はその下から始まる。
   .page は position:absolute;inset:0 で .pages 起点に展開する。
   padding-top: 28px は topbar クリアランスではなく header 上部の意図的な余白。
   topbar は position:relative（通常フロー内）のため .pages は既に topbar 下端から始まる。
   デスクトップのみに適用（min-width:1025px）。tablet/mobile は後述のメディアクエリで上書きされる。 */
@media(min-width:1025px) {
  .page { padding: 28px 32px 24px 32px !important; }
  .page-hd { margin-bottom: 22px !important; padding-bottom: 16px !important; }
}

.fin-top-kpi-val { font-size: 26px !important; font-weight: 600 !important; letter-spacing: -0.02em; }
.fin-top-kpi-label { font-size: 12px !important; color: #6B7280 !important; font-weight: 400 !important; margin-bottom: 6px !important; }

/* ページヘッダー下余白（削除 — @media(min-width:1025px) ブロックに移動済み） */

/* カード余白拡大 */
.card { padding: 20px 24px !important; }
.card-header { padding: 0 0 16px 0 !important; margin-bottom: 16px !important; }

/* ════════════════════════════════════════
   財務テーブル: 左軸整列 + 外資系資料スタイル
   ① fin-wrap カードの横 padding を除去（KPI左端と揃える）
   ② テーブル背景を薄グレー単色に統一
   ③ 各行に薄グレー下線（コンサル資料スタイル）
════════════════════════════════════════ */

/* ① fin-wrap を内包するカードの横 padding を 0 に（上下は維持）
   .card と .fin-wrap は別要素なので :has() セレクタで対応 */
.card:has(.fin-wrap),
.card.fin-wrap,
.fin-wrap.card {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ② テーブル背景を白統一（2026-04-04） */
.fin-tbl { background: #FFFFFF !important; }
.fin-tbl thead tr { background: #FFFFFF !important; }
.fin-tbl tbody tr { background: #FFFFFF !important; }

/* ゼブラ背景をリセット */
.fin-tbl tbody tr:nth-child(odd),
.fin-tbl tbody tr:nth-child(even) { background: #FFFFFF !important; }

/* sticky セル背景も統一 */
.fin-tbl thead th:first-child { background: #FFFFFF !important; }
.fin-tbl tbody td:first-child { background: #FFFFFF !important; }
.fin-tbl tr.fin-row-hd td:first-child { background: #FFFFFF !important; }
.fin-tbl tr.fin-row-total td:first-child { background: #FFFFFF !important; }
.fin-tbl tr.fin-row-sub td:first-child { background: #FFFFFF !important; }

/* ③ 各行の下線（横ラインのみ・縦線なし） */
.fin-tbl thead th { border-bottom: 1px solid #D0D2D6 !important; border-right: none !important; border-top: none !important; }
.fin-tbl tbody td { border-bottom: 1px solid #E4E5E8 !important; border-right: none !important; border-top: none !important; }
.fin-tbl tbody tr.fin-row-total td { border-bottom: 1px solid #C0C2C8 !important; border-top: 1px solid #C0C2C8 !important; }
.fin-tbl tbody tr.fin-row-hd td { border-bottom: none !important; border-top: 1px solid #D0D2D6 !important; }

/* ヘッダー左端の padding を first-child に合わせる */
.fin-tbl thead th:first-child { padding-left: 16px !important; }
/* !important を外すことで renderFinTimeline の inline style（depth×20+8px）が機能する */
.fin-tbl tbody td:first-child { padding-left: 16px; }
.fin-tbl tbody tr.pln-depth-1 td:first-child { padding-left: 28px !important; }
.fin-tbl tbody tr.pln-depth-2 td:first-child { padding-left: 40px !important; }

/* ════════════════════════════════════════
   サイドバー アイコン視認性強化
   collapsed時: アイコンを中央寄せ・色を濃く
   active時: アクセントカラーで明示
════════════════════════════════════════ */
/* アイコン: Supabaseサイドバー用に再表示（旧 display:none を上書き） */
.nav-icon {
  display: inline-block !important;
  flex-shrink: 0 !important;
  color: var(--t2) !important;
  transition: color 0.12s !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
}
/* active: 青=導線 */
.nav-item.active .nav-icon { color: var(--blue) !important; }
/* hover: 青 */
.nav-item:hover .nav-icon  { color: var(--blue) !important; }

/* nav-item gap: アイコン復活に伴い gap を確保 */
.nav-item { gap: 8px !important; }
/* collapsed時: gap は維持しつつラベルは opacity:0 で隠す（幅ゼロにはしない） */

/* collapsed/open 共にダークサイドバー */
.sidebar:not(.sb-open) {
  background: var(--sb-bg) !important;
  border-right: 1px solid var(--sb-bdr) !important;
}
.sidebar.sb-open {
  background: var(--sb-bg) !important;
  border-right: 1px solid var(--sb-bdr) !important;
}

/* nav-sub-item のアイコン（サブナビ展開時） */
.nav-sub-item .nav-icon {
  width: 14px !important;
  height: 14px !important;
  color: var(--t3) !important;
}
.nav-sub-item.active .nav-icon { color: var(--blue) !important; }

/* ハンバーガーボタン: デスクトップでは不要（ホバー展開に置き換え）。モバイルのみ表示 */
@media (min-width: 769px) {
  #topbar-hamburger { display: none !important; }
}

/* ════════════════════════════════════════
   その他 細部仕上げ
════════════════════════════════════════ */

/* ════════════════════════════════════════
   fin-tbl 罫線統一 + 12ヶ月区切り除去
   外資系資料スタイル:
   - 全行の下線を同一 #E8E9EC で統一
   - 合計行のみ上下に同じ細線（太線なし）
   - past-col/current-col の色差を除去（区切り感を消す）
   - 全数値セルを同一テキスト色に揃える
════════════════════════════════════════ */

/* ── 罫線色: 全行統一 1本 ── */
/* 外資系資料スタイル: 縦線なし・全行同一の薄いグレー下線のみ */
:root { --fin-line: #D4D6DA; }

.fin-tbl thead th {
  border-bottom: 1px solid var(--fin-line) !important;
  border-top: none !important; border-left: none !important; border-right: none !important;
}
.fin-tbl tbody td {
  border-bottom: 1px solid var(--fin-line) !important;
  border-top: none !important; border-left: none !important; border-right: none !important;
}
/* 合計行・hd行: 全行と同じ下線のみ。上線なし（ユーザー指示: 忖度不要） */
.fin-tbl tbody tr.fin-row-total td {
  border-top: none !important;
  border-bottom: 1px solid var(--fin-line) !important;
}
.fin-tbl tbody tr.fin-row-hd td {
  border-top: none !important;
  border-bottom: none !important;
}

/* 12ヶ月区切りを除去: past-col の色・opacity を通常と同じに */
.fin-tbl th.past-col,
.fin-tbl td.past-col {
  color: inherit !important;
  opacity: 1 !important;
}

/* 数値セル（非first-child）の色統一: 全列同一 #374151 */
.fin-tbl tbody td:not(:first-child) {
  color: #374151 !important;
}
/* クリック可能数値（fin-val-link）は青 — tbody指定で上記 :not(:first-child) に勝つ */
.fin-tbl tbody td.fin-val-link,.fin-table tbody td.fin-val-link{color:var(--blue) !important}
.fin-tbl tbody td.fin-val-link:hover,.fin-table tbody td.fin-val-link:hover{color:var(--blue-hover) !important}

/* current-col: 太字のみ、色は同じ（区切り感なし） */
.fin-tbl th.current-col {
  color: #1F2937 !important;
  font-weight: 600 !important;
}
.fin-tbl td.current-col {
  color: #1F2937 !important;
  font-weight: 600 !important;
}

/* 負値: current/past 問わず同じ赤 */
.fin-tbl td .val-neg,
.fin-tbl td.val-neg { color: #DC2626 !important; }

/* ── breadcrumb（ページ内） ── */
.breadcrumb{width:100%;display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.bc-link{
  background:none;border:none;
  padding:0;border-radius:3px;cursor:pointer;
  font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--t2);line-height:inherit;
  transition:color 120ms,background 120ms;
}
.bc-link:hover{color:var(--t1);}
.bc-sep{color:var(--t4);font-size:var(--fs-caption);}
.bc-current{font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--t2);}

/* ページヘッダータイトル: components.css .page-hd-title が担保（!important 禁止） */
/* page-hd-sub: 旧Silent UIで非表示になっていたが情報補助として復活 */
.page-hd-sub   { display: block !important; font-size: 12px !important; color: var(--t3) !important; margin-top: 3px !important; font-weight: 400 !important; }

/* ── グループアイコン (panel内で使用) ── */
.nav-group-icon {
  width: 16px !important; height: 16px !important; flex-shrink: 0 !important;
  color: var(--t3) !important; transition: color 0.15s !important;
}

/* ════════════════════════════════════════
   Supabase ACTIVE バッジスタイル統一
   緑バッジは全てこのスタイルに準拠 (#3ECF8E)
════════════════════════════════════════ */
:root {
  --sb-green: #3ECF8E;           /* Supabase brand green */
  --sb-green-bg: #E8F9F3;        /* light mint background */
  --sb-green-border: rgba(62,207,142,0.40);
  --sb-green-text: #048848;      /* readable dark green */
}

/* 全緑バッジ: Supabase ACTIVE スタイル（.b-green は --success 系を使うため除外） */
.chip.live,
.debt-status-active,
.inv-status-ok,
.debt-method-eq,
.so-badge.vested,
.mt-status-badge.done,
.auth-shonin,
.inv-receipt,
.nrr-good,
.pipe-appt,
.state-badge.recognized {
  background: var(--sb-green-bg) !important;
  color: var(--sb-green-text) !important;
  border-color: var(--sb-green-border) !important;
  border-style: solid !important;
  border-width: 1px !important;
}

/* ── CRM 顧客管理 ── */
.crm-funnel { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.crm-funnel-row { display: flex; align-items: center; gap: 12px; }
.crm-funnel-label { width: 96px; font-size: 12px; color: var(--t3); text-align: right; flex-shrink: 0; }
.crm-funnel-bar-wrap { flex: 1; background: var(--surf); border-radius: 3px; height: 24px; overflow: hidden; }
.crm-funnel-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; }
.crm-funnel-meta { width: 120px; font-size: 12px; color: var(--t2); flex-shrink: 0; }
.crm-stage-won .crm-funnel-bar { background: var(--green); }
.crm-stage-lost .crm-funnel-bar { background: var(--red); }
.crm-account-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bdr); }
.crm-account-row:last-child { border-bottom: none; }
.crm-account-name { flex: 1; font-weight: 500; color: var(--t1); font-size: 13px; }
.crm-account-meta { font-size: 12px; color: var(--t3); }
.crm-mrr-bar { display: flex; gap: 4px; margin-bottom: 8px; align-items: center; }
.crm-mrr-label { font-size: 11px; color: var(--t3); width: 80px; }
.crm-mrr-type-new  { background: var(--green); }
.crm-mrr-type-expansion { background: rgba(22,163,74,0.5); }
.crm-mrr-type-contraction { background: var(--amber); }
.crm-mrr-type-churn { background: var(--red); }
.crm-mrr-type-reactivation { background: rgba(22,163,74,0.7); }
.crm-conv-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.crm-conv-label { width: 120px; font-size: 12px; color: var(--t3); }
.crm-conv-bar-wrap { flex: 1; background: var(--surf); border-radius: 3px; height: 14px; overflow: hidden; }
.crm-conv-bar { height: 100%; background: rgba(22,163,74,0.6); border-radius: 3px; }
.crm-conv-pct { width: 48px; font-size: 12px; color: var(--t2); text-align: right; }

/* ════════════════════════════════════════
   ビジネスモデル可視化 (kpimodel-pane-biz-model)
════════════════════════════════════════ */

/* ── 収益ファネル ── */
.biz-funnel-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  overflow-x: auto;
  padding: 4px 0 8px;
}
.biz-funnel-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 18px;
  background: var(--surf);
  border-radius: var(--r);
  min-width: 112px;
  flex-shrink: 0;
  gap: 4px;
  transition: background 0.15s;
}
.biz-funnel-step:hover { background: var(--surf-h); }
.biz-funnel-icon-box {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.biz-funnel-val   { font-size: 16px; font-weight: 600; color: var(--t1); line-height: 1.2; }
.biz-funnel-label { font-size: 11px; color: var(--t3); font-weight: 500; }
.biz-funnel-sub   { font-size: 10px; color: var(--t4); margin-top: 2px; }
.biz-funnel-connector {
  display: flex; align-items: center;
  padding: 0 6px;
  flex-shrink: 0;
  margin-bottom: 12px; /* sub text offset */
}

/* ── Unit Economics ── */
.biz-ue-wrap { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.biz-ue-boxes { display: flex; align-items: center; gap: 10px; }
.biz-ue-box {
  flex: 1; text-align: center;
  padding: 14px 10px;
  border-radius: 8px;
  border: 1px solid var(--bdr);
}
.biz-ue-box.biz-ue-cac { background: #FFFBEB; border-color: rgba(217,119,6,0.2); }
.biz-ue-box.biz-ue-ltv { background: var(--green-d); border-color: rgba(22,163,74,0.2); }
.biz-ue-tag  { font-size: 10px; color: var(--t4); margin-bottom: 4px; }
.biz-ue-main { font-size: 15px; font-weight: 600; color: var(--t1); }
.biz-ue-name { font-size: 10px; color: var(--t3); margin-top: 3px; }
.biz-ue-arrow-col {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  flex-shrink: 0;
  color: var(--t3);
}
.biz-ue-metric { text-align: center; }
.biz-ue-metric-label { font-size: 10px; color: var(--t4); }
.biz-ue-metric-val   { font-size: 13px; font-weight: 600; }
.biz-ue-ratio {
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ratio-color, var(--bdr)) 20%, transparent);
  background: color-mix(in srgb, var(--ratio-color, var(--surf)) 8%, var(--card-bg));
}
.biz-ue-ratio-label { font-size: 11px; color: var(--t3); margin-bottom: 4px; }
.biz-ue-ratio-val   { font-size: 26px; font-weight: 600; line-height: 1.2; }
.biz-ue-ratio-note  { font-size: 11px; color: var(--t3); margin-top: 4px; }
.biz-ue-extra {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--bdr);
  border-radius: 6px;
  background: var(--surf);
}

/* ── レバー感度分析 ── */
.biz-lever-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 4px;
}
@media (max-width: 900px) { .biz-lever-grid { grid-template-columns: 1fr; } }
.biz-lever-card {
  padding: 14px 16px;
  border: 1px solid var(--bdr);
  border-radius: var(--rs);
  background: var(--card-bg);
  display: flex; flex-direction: column; gap: 8px;
}
.biz-lever-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.biz-lever-label   { font-size: 11px; color: var(--t3); }
.biz-lever-current { font-size: 17px; font-weight: 600; color: var(--t1); margin-top: 2px; }
.biz-lever-hint    { font-size: 10px; color: var(--t4); text-align: right; line-height: 1.4; white-space: nowrap; }
.biz-lever-range {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
  height: 4px;
}
.biz-lever-scale {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--t4);
  margin-top: -4px;
}
.biz-lever-result {
  padding: 8px 10px;
  background: var(--surf);
  border-radius: 6px;
  margin-top: 2px;
}
.biz-lever-arr { transition: color 0.2s; }

/* ════════════════════════════════════════
   認識ルール — freee接続フルマップ
════════════════════════════════════════ */

/* ── 接続状態バッジ ── */
.recog-badge {
  display: inline-block;
  font-size: 10px; font-weight: 500;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.recog-badge-ok   { background: var(--green-d);  color: #065F46; border-color: rgba(22,163,74,.2); }
.recog-badge-warn { background: var(--amber-d);  color: #78350F; border-color: rgba(217,119,6,.2); }
.recog-badge-none { background: var(--surf);     color: var(--t3); border-color: var(--bdr); }

/* ── 認識カテゴリバッジ ── */
.recog-cat-badge {
  display: inline-block;
  font-size: 10px; font-weight: 500;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}

/* ── テーブル行の左ボーダー強調 ── */
.recog-map-tbl tbody tr { border-left: 2px solid transparent; }
.recog-map-tbl tbody tr.recog-row-complete { border-left-color: var(--green); }
.recog-map-tbl tbody tr.recog-row-fa-only  { border-left-color: var(--amber); }
.recog-map-tbl tbody tr.recog-row-none     { border-left-color: var(--bdr-s); }

/* ── アイコンボタン小 ── */
.btn-icon-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--bdr);
  border-radius: var(--rs);
  background: var(--card-bg);
  cursor: pointer;
  color: var(--t3);
  transition: background .12s, color .12s, border-color .12s;
}
.btn-icon-sm:hover {
  background: var(--surf-h);
  color: var(--t1);
  border-color: var(--bdr-s);
}

/* ════════════════════════════════════════
   WF承認フロー — 縦型タイムライン & ステータスバナー
════════════════════════════════════════ */

/* ── ステータスバナー ── */
.wf-status-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--rs);
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.wf-banner-icon {
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.wf-banner-body { flex: 1; min-width: 0; }
.wf-banner-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--t1);
}
.wf-banner-sub {
  font-size: 12px;
  color: var(--t2);
  margin-top: 1px;
}

.wf-banner-pending  {
  background: #FFFBEB;
  border-color: #FDE68A;
}
.wf-banner-pending .wf-banner-icon  { color: #CA8A04; }
.wf-banner-pending .wf-banner-title { color: #92400E; }

.wf-banner-approved {
  background: var(--green-d);
  border-color: rgba(22,163,74,.25);
}
.wf-banner-approved .wf-banner-icon  { color: var(--green); }
.wf-banner-approved .wf-banner-title { color: #065F46; }

.wf-banner-rejected {
  background: var(--red-d);
  border-color: rgba(220,38,38,.25);
}
.wf-banner-rejected .wf-banner-icon  { color: var(--red); }
.wf-banner-rejected .wf-banner-title { color: #991B1B; }

/* ── 縦型タイムライン ── */
.wf-timeline {
  display: flex;
  flex-direction: column;
}

.wf-timeline-step {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.wf-timeline-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 28px;
}

.wf-timeline-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.wf-timeline-line {
  flex: 1;
  width: 2px;
  margin: 4px 0;
  min-height: 12px;
}

.wf-timeline-body {
  flex: 1;
  min-width: 0;
  margin-bottom: 8px;
}

/* ════════════════════════════════════════
   管理会計 ディメンションフィルタバー
════════════════════════════════════════ */
.ma-dim-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--bdr);
  flex-wrap: wrap;
}
.ma-dim-label-left {
  font-size: 11px;
  font-weight: 500;
  color: var(--t3);
  letter-spacing: .04em;
  margin-right: 4px;
}
.ma-dim-chip {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--bdr-s);
  background: var(--card-bg);
  color: var(--t2);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ma-dim-chip:hover { background: var(--surf-h); color: var(--t1); }
.ma-dim-chip.active {
  background: var(--accent-d);
  color: var(--accent-t);
  border-color: var(--accent);
  font-weight: 500;
}
.ma-dim-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ma-dim-select-label {
  font-size: 11px;
  color: var(--t3);
  white-space: nowrap;
}
.ma-dim-select {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--bdr-s);
  border-radius: var(--rs);
  background: var(--card-bg);
  color: var(--t1);
  cursor: pointer;
}
.ma-dim-select.active {
  border-color: var(--accent);
  background: var(--accent-d);
  color: var(--accent-t);
}
.ma-dim-active-badge {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--amber-d);
  color: #78350F;
  border: 1px solid rgba(217,119,6,.2);
  font-weight: 500;
  margin-left: auto;
}

/* ── 事業計画 インライン編集セル ── */
.bdg-data-cell { transition: background .15s; }
.bdg-data-cell:hover { background: var(--accent-d) !important; cursor: pointer; }
.bdg-data-cell:active { background: rgba(22,163,74,.15) !important; }

/* ── コマンドパレット ─────────────────────────────────────────── */
.cmd-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.45);
  z-index: 500;
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
}
.cmd-box {
  background: var(--card-bg);
  border: 1px solid var(--bdr-s);
  border-radius: 12px;
  width: 540px; max-width: calc(100vw - 32px);
  max-height: 480px; overflow: hidden;
  display: flex; flex-direction: column;
  animation: mopen .14s ease;
}
.cmd-search-row {
  display: flex; align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.cmd-search-icon {
  width: 16px; height: 16px; color: var(--t3); flex-shrink: 0;
}
.cmd-input {
  flex: 1; padding: 16px 10px;
  font-size: 15px; color: var(--t1);
  border: none; outline: none; background: transparent;
  font-family: inherit;
}
.cmd-input::placeholder { color: var(--t4, #9CA3AF); }
.cmd-esc-hint {
  font-size: 11px; color: var(--t4, #9CA3AF);
  padding: 3px 6px; border: 1px solid var(--bdr); border-radius: 4px;
  cursor: pointer; flex-shrink: 0;
}
.cmd-esc-hint:hover { color: var(--t2); border-color: var(--bdr-s); }
.cmd-body {
  overflow-y: auto; padding: 6px 4px 8px; max-height: 380px;
  scrollbar-width: thin; scrollbar-color: #C8CDD5 transparent;
}
.cmd-section-label {
  font-size: 11px; font-weight: 500; color: var(--t3);
  padding: 8px 10px 4px; letter-spacing: .04em;
}
.cmd-item {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  transition: background .08s;
}
.cmd-item:hover, .cmd-item.active { background: var(--surf-h, #EDEFF2); }
.cmd-item-label { font-size: 13px; color: var(--t1); }
.cmd-item-group {
  font-size: 10px; color: var(--t3); margin-left: auto;
  background: var(--surf); padding: 2px 6px; border-radius: 3px; white-space: nowrap;
}
.cmd-item-lock { font-size: 11px; color: var(--t4, #9CA3AF); margin-left: 4px; flex-shrink: 0; }
.cmd-empty { padding: 24px 12px; text-align: center; font-size: 13px; color: var(--t3); }

/* 権限外ページのゲート */
.cmd-access-gate {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg); z-index: 10;
  gap: 8px;
}
.cmd-access-gate .empty-state-icon { display: flex !important; font-size: 32px; }
.cmd-access-gate .empty-state-title { font-size: 16px; font-weight: 500; color: var(--t1); }
.cmd-access-gate .empty-state-sub { font-size: 13px; color: var(--t3); }

/* ════════════════════════════════════════
   受信トレイ (Inbox)
   バッジ + サイドバー右フライアウト
════════════════════════════════════════ */


/* ── フライアウト本体 ── */
.inbox-flyout {
  position: fixed;
  left: var(--sw);
  bottom: 0;
  width: 320px;
  max-height: 480px;
  background: var(--card-bg);
  border: 1px solid var(--bdr);
  border-radius: var(--r) var(--r) 0 0;
  border-bottom: none;
  box-shadow: 4px -2px 16px rgba(0,0,0,0.08);
  display: none;
  flex-direction: column;
  z-index: 1200;
}
.inbox-flyout-hd {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--bdr);
  font-size: 13px; font-weight: 500; color: var(--t1);
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.inbox-flyout-hd-title { flex: 1; }
.inbox-flyout-close {
  cursor: pointer; color: var(--t3); font-size: 14px;
  padding: 2px 4px; border-radius: var(--rs); line-height: 1;
}
.inbox-flyout-close:hover { background: var(--surf-h); color: var(--t1); }
.inbox-flyout-body { flex: 1; overflow-y: auto; }
.inbox-flyout-cta {
  padding: 10px 14px;
  border-top: 1px solid var(--bdr);
  font-size: 12px; font-weight: 500; color: var(--accent);
  cursor: pointer; flex-shrink: 0; text-align: center;
}
.inbox-flyout-cta:hover { background: var(--surf); }

/* ── アイテム行 ── */
.inbox-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--bdr);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
}
.inbox-item:last-child { border-bottom: none; }
.inbox-item:hover { background: var(--surf); }
.inbox-item-no      { font-size: 11px; color: var(--t3); font-weight: 500; }
.inbox-item-subject { font-size: 13px; color: var(--t1); }
.inbox-item-meta    { font-size: 11px; color: var(--t3); }
.inbox-item-step {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 500;
  background: var(--amber-d); color: var(--amber);
  border-radius: var(--rs); padding: 1px 6px;
}
.inbox-empty {
  padding: 32px 14px; text-align: center;
  color: var(--t3); font-size: 13px;
}


/* ──────────────────────────────────────────────────────────────
   組織図 ビュースイッチ + カードビュー
────────────────────────────────────────────────────────────── */

/* ビュースイッチボタン */
.org-view-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px; border-radius: var(--rs);
  border: 1px solid var(--bdr); background: var(--card-bg);
  font-size: 12px; color: var(--t2); cursor: pointer;
  transition: all .12s;
}
.org-view-btn.active {
  border-color: var(--accent); background: var(--accent-d);
  color: var(--accent); font-weight: 500;
}
.org-view-btn:hover:not(.active) { background: var(--surf-h); }

/* カードビュー — 部門グリッド */
.org-card-grid {
  display: flex; gap: 14px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 8px;
}
.org-dept-col { flex: 0 0 188px; }
.org-dept-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 11px;
  background: var(--surf); border: 1px solid var(--bdr);
  border-radius: var(--rs) var(--rs) 0 0;
  font-size: 12px; font-weight: 500; color: var(--t1);
}
.org-dept-count {
  font-size: 11px; color: var(--t3); font-weight: 400;
  background: var(--card-bg); border: 1px solid var(--bdr);
  border-radius: 10px; padding: 1px 7px;
}
.org-dept-body {
  border: 1px solid var(--bdr); border-top: none;
  border-radius: 0 0 var(--rs) var(--rs);
  background: var(--card-bg);
}
.org-person-card {
  padding: 8px 11px; cursor: pointer;
  border-bottom: 1px solid var(--bdr);
  transition: background .1s;
}
.org-person-card:last-child { border-bottom: none; }
.org-person-card:hover { background: var(--surf); }
.org-person-card.sel  { background: var(--accent-d); }
.org-person-name  { font-size: 13px; font-weight: 500; color: var(--t1); }
.org-person-title { font-size: 11px; color: var(--t3); margin-top: 2px; }

/* 兼務バッジ */
.org-concurrent-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 500;
  padding: 1px 5px; border-radius: 3px;
  background: var(--amber-d); color: var(--amber);
  flex-shrink: 0;
}

/* レイヤーフィルタボタン */
.org-layer-btn {
  padding: 3px 10px; border-radius: var(--rs);
  border: 1px solid var(--bdr); background: var(--card-bg);
  font-size: 11px; color: var(--t3); cursor: pointer;
  transition: all .12s;
}
.org-layer-btn.active {
  border-color: var(--accent); background: var(--accent-d);
  color: var(--accent); font-weight: 500;
}
.org-layer-btn:hover:not(.active) { background: var(--surf-h); color: var(--t2); }

/* ════════════════════════════════════════
   アプリローディングオーバーレイ
   _transitionDataPhase() が show/hide を制御する
   ════════════════════════════════════════ */
/* トップバーローディングインジケーター（2026-04-11 非ブロッキング設計）
   フルスクリーンオーバーレイを廃止し、2px アニメーションバーに差し替え。
   Supabaseデータ取得中のみ表示。ページ操作を妨げない。 */
#topbar-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 10000; /* auth-gate(9999) より上 */
  background: linear-gradient(
    90deg,
    var(--accent, #16A34A) 0%,
    #4ADE80 40%,
    var(--accent, #16A34A) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: _topbar-shimmer 1.4s ease-in-out infinite;
  display: none; /* JS で block/none を切り替え */
}
@keyframes _topbar-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* データロード失敗バナー（非ブロッキック — ページ上部に固定。閉じることができる） */
#data-error-banner {
  position: fixed;
  top: var(--th, 52px);  /* トップバーの直下 */
  left: var(--sw, 240px); /* サイドバーの右端から開始 */
  right: 0;
  z-index: 9000;
  display: none; /* JS で flex/none を切り替え */
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: #FEF2F2;
  border-bottom: 1px solid rgba(220, 38, 38, 0.2);
  font-size: 13px;
  color: #DC2626;
}
#data-error-banner button {
  padding: 3px 10px;
  font-size: 12px;
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: var(--rs, 4px);
  background: #fff;
  color: #DC2626;
  cursor: pointer;
}

#app-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998; /* auth-gate(9999) の直下 */
  background: var(--bg, #FFFFFF);
  display: flex; /* JS で none/flex を切り替え（フォールバック用として残す） */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--bdr, #E5E7EB);
  border-top-color: var(--accent, #16A34A);
  border-radius: 50%;
  animation: _loading-spin 0.75s linear infinite;
}
@keyframes _loading-spin {
  to { transform: rotate(360deg); }
}
.loading-msg {
  font-size: 13px;
  color: var(--t3, #6B7280);
  margin: 0;
}

/* ════════════════════════════════════════
   ダッシュボード — Scope bar（2026-04-14）
   ════════════════════════════════════════ */
/* Scope 非露出（プランv11: データ層整備後に display:flex へ戻す） */
.dash-scope-bar {
  display: none;
  gap: 4px;
  margin-bottom: 2px;
}
.dash-scope-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 12px;
  border-radius: 99px;
  border: 1px solid var(--bdr-s);
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.dash-scope-btn:hover {
  background: var(--surf-h);
  color: var(--t2);
}
.dash-scope-btn.active {
  background: var(--accent-d);
  color: var(--accent-t);
  border-color: var(--accent);
}

/* ════════════════════════════════════════
   ダッシュボード — 判断案件カード（Block A）
   ════════════════════════════════════════ */
.dash-queue-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--bdr);
  border-radius: var(--rs);
  background: var(--bg);
}
.dash-queue-card-main {
  flex: 1;
  min-width: 0;
}
.dash-queue-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-queue-card-badge {
  font-size: 11px;
  font-weight: 400;
  color: var(--t3);
  white-space: nowrap;
}
.dash-queue-card-meta {
  font-size: 12px;
  color: var(--t3);
  margin-top: 2px;
}
.dash-queue-card-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ════════════════════════════════════════
   ダッシュボード v8 — Block A: 現在地 KPIグリッド
   ════════════════════════════════════════ */
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.dash-kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--bdr);
  border-radius: var(--rc);
  padding: 11px 13px;
}
.dash-kpi-label {
  font-size: 12px;
  color: var(--t3);
  margin-bottom: 6px;
}
.dash-kpi-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--t1);
  margin-bottom: 5px;
  line-height: 1.2;
}
.dash-kpi-subs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
}
.dash-kpi-note {
  font-size: 10px;
  color: var(--t4);
  margin-top: 4px;
  line-height: 1.4;
}

/* ════════════════════════════════════════
   ダッシュボード v8 — Block B: 要素サマリ
   ════════════════════════════════════════ */
.dash-elem-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bdr);
}
.dash-elem-row:last-child { border-bottom: none; }
.dash-elem-total {
  font-weight: 500;
  background: var(--surf);
  margin: 0 -16px;
  padding: 10px 16px;
}
.dash-elem-label { font-size: 13px; color: var(--t1); }
.dash-elem-value { font-size: 14px; font-weight: 500; color: var(--t1); white-space: nowrap; }
.dash-elem-mom   { font-size: 12px; white-space: nowrap; }
.dash-elem-drill { white-space: nowrap; }

.dash-elem-burn-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
}
.dash-elem-burn-item { display: flex; align-items: center; gap: 6px; }
.dash-elem-burn-label { color: var(--t3); font-size: 11px; }

.dash-elem-runway { display: flex; flex-direction: column; gap: 8px; }
.dash-elem-runway-section { font-size: 13px; }
.dash-elem-runway-forecast { opacity: 0.75; }
.dash-elem-runway-header {
  font-size: 11px;
  font-weight: 500;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.dash-elem-runway-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--t1);
}
.dash-elem-runway-items span { display: flex; align-items: center; gap: 8px; }

/* btn-link: テキストスタイルのボタン */
.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

/* ── Dashboard skeleton（Phase A: Initial Paint 用）── */
.dash-skel-line {
  display: inline-block;
  background: var(--surf-h);
  border-radius: 3px;
  vertical-align: middle;
  animation: _dashSkelPulse 1.4s ease-in-out infinite;
}
@keyframes _dashSkelPulse {
  0%, 100% { opacity: 0.9; }
  50%       { opacity: 0.45; }
}

/* ══ Dashboard v11 — Lens / Section / Commitments ══════════════════════
   single-page mode: 5セクション固定順・Lens は見出し/強調のみ変える
══════════════════════════════════════════════════════════════════════ */

/* Lens トグルバー */
.dash-model-bar {
  display: flex;
  gap: 6px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
}
.dash-model-btn {
  padding: 4px 14px;
  font-size: 12px;
  border: 1px solid var(--bdr);
  background: var(--card-bg);
  border-radius: var(--rs);
  cursor: pointer;
  color: var(--t2);
  font-weight: 500;
  transition: background .12s, color .12s, border-color .12s;
}
.dash-model-btn:hover {
  background: var(--surf-h);
  color: var(--t1);
}
.dash-model-btn.active {
  background: var(--accent-d);
  color: var(--accent-t);
  border-color: var(--accent);
  box-shadow: none;
}

/* 5セクションコンテナ（順序固定・order 制御なし）*/
#dash-sections-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.dash-section-hd { margin-bottom: 12px; }
.dash-section-heading {
  font-size: 15px;
  font-weight: 600;
  color: var(--t1);
  margin-bottom: 4px;
}
.dash-section-desc {
  font-size: 12px;
  color: var(--t3);
  line-height: 1.6;
}

/* Lens 補助強調（emphasis セクションは JS で opacity:1 に戻す）*/
body[data-dash-model="growth"]         .dash-section:not(#dash-section-drivers)   { opacity: 0.9; }
body[data-dash-model="growth"]         #dash-section-drivers                       { opacity: 1; }
body[data-dash-model="profitability"]  .dash-section:not(#dash-section-decisions)  { opacity: 0.9; }
body[data-dash-model="profitability"]  #dash-section-decisions                     { opacity: 1; }
body[data-dash-model="sustainability"] .dash-section:not(#dash-section-impact)     { opacity: 0.9; }
body[data-dash-model="sustainability"] #dash-section-impact                        { opacity: 1; }

/* Commitments */
.dash-net-impact-bar {
  display: flex;
  gap: 16px;
  padding: 10px 14px;
  background: var(--surf);
  border-radius: var(--rs);
  margin-bottom: 14px;
  border: 1px solid var(--bdr);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--t2);
}
.dash-commit-pending-band {
  background: var(--amber-d);
  border: 1px solid rgba(217,119,6,.2);
  border-radius: var(--rs);
  padding: 12px 16px;
  margin-top: 12px;
}
.dash-commit-origin {
  font-size: 10px;
  color: var(--t4);
  padding: 1px 6px;
  border: 1px solid var(--bdr);
  border-radius: 10px;
  margin-left: 0;
  display: inline-block;
}
.dash-commit-effective {
  font-size: 11px;
  color: var(--t3);
  margin-left: 6px;
  display: inline-block;
}
.dash-sample-notice {
  font-size: 11px;
  color: var(--amber);
  background: var(--amber-d);
  border: 1px solid rgba(217,119,6,.2);
  border-radius: var(--rs);
  padding: 6px 12px;
  margin-bottom: 12px;
}

/* ════════════════════════════════════════
   ダッシュボード v12 — Lens別シグナル行
   状態（✓/⚠/✕） → 方向（↑↓→） → 数値
   ════════════════════════════════════════ */
.dash-signal-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dash-signal-row {
  display: grid;
  grid-template-columns: 20px 18px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bdr);
}
.dash-signal-row:last-child { border-bottom: none; }
.dash-signal-icon {
  font-size: 13px;
  text-align: center;
  line-height: 1;
}
.dash-signal-dir {
  font-size: 12px;
  color: var(--t3);
  text-align: center;
}
.dash-signal-label {
  font-size: 12px;
  color: var(--t2);
}
.dash-signal-label small {
  font-size: 10px;
  color: var(--t4);
  margin-left: 4px;
}
.dash-signal-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--t1);
  white-space: nowrap;
  text-align: right;
}
.dash-signal-row.sig-good .dash-signal-icon { color: var(--green); }
.dash-signal-row.sig-warn .dash-signal-icon { color: var(--amber); }
.dash-signal-row.sig-bad  .dash-signal-icon { color: var(--red); }
.dash-signal-row.sig-nc   .dash-signal-icon { color: var(--t4); }
.dash-signal-row.sig-good .dash-signal-value { color: var(--green); }
.dash-signal-row.sig-bad  .dash-signal-value { color: var(--red); }

/* v12 — 統合アクションキュー行 */
.dash-decided-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--bdr);
}
.dash-decided-item:last-child { border-bottom: none; }
.dash-decided-item:hover { background: var(--surf); margin: 0 -16px; padding: 8px 16px; }

/* v12 — Section 5 Lens別サマリーバー */
.dash-lens-impact-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: var(--surf);
  border-radius: var(--rs);
  margin-bottom: 14px;
  border: 1px solid var(--bdr);
  font-size: 12px;
  color: var(--t2);
}
.dash-lens-impact-main {
  font-size: 13px;
  font-weight: 500;
  color: var(--t1);
}
.dash-lens-impact-net {
  font-size: 12px;
  font-weight: 500;
  padding-top: 6px;
  border-top: 1px solid var(--bdr);
  margin-top: 4px;
}

/* ── World Map（観測UI）──────────────────────── */
.wm-cell { padding:10px 16px; border-bottom:1px solid var(--bdr-s); text-align:center; vertical-align:middle; }
.wm-cell-active { cursor:pointer; }
.wm-cell-active:hover { background:var(--surf-h); }
.wm-cell-disabled { opacity:.5; cursor:default; }
.wm-biz { font-size:13px; font-weight:500; color:var(--t1); padding:12px 16px; border-bottom:1px solid var(--bdr-s); white-space:nowrap; }
.wm-row:last-child .wm-biz, .wm-row:last-child .wm-cell { border-bottom:none; }
.wm-row-bad  > .wm-biz { border-left:2px solid var(--red);   padding-left:14px; }
.wm-row-warn > .wm-biz { border-left:2px solid var(--amber); padding-left:14px; }
.wm-val { font-size:15px; font-weight:500; display:inline-flex; align-items:center; justify-content:center; gap:3px; }
.wm-val-good { color:var(--accent); }
.wm-val-warn { color:var(--amber); }
.wm-val-bad  { color:var(--red); }
.wm-val-nc   { color:var(--t4); font-weight:400; font-size:13px; }
.wm-arr { font-size:12px; }
.wm-sub  { font-size:10px; color:var(--t3); margin-top:3px; }
.wm-hint { font-size:11px; color:var(--t4); font-weight:400; margin-top:3px; }

/* ── World Map v3: Scope + Time + Model ─────── */
.wm-scope-card  { border:1px solid var(--bdr); border-radius:6px; background:var(--card-bg); padding:14px 16px; cursor:pointer; }
.wm-scope-card:hover { background:var(--surf); }
.wm-scope-type  { font-size:10px; color:var(--t4); margin-bottom:2px; }
.wm-model-badge { display:inline-block; font-size:10px; padding:1px 6px; border-radius:3px; border:1px solid var(--bdr); color:var(--t3); margin-left:6px; }
.wm-axes        { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.wm-axis        { }
.wm-axis-label  { font-size:10px; color:var(--t4); margin-bottom:3px; }
.wm-axis-val    { font-size:13px; font-weight:500; color:var(--t1); font-variant-numeric:tabular-nums; }
.wm-axis-nc     { font-size:11px; color:var(--t4); }
.wm-time-row    { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:6px; }
.wm-time-cell   { text-align:center; font-size:10px; }
.wm-time-lbl    { color:var(--t4); }
.wm-time-val    { font-variant-numeric:tabular-nums; color:var(--t2); }
.wm-time-fcast  { color:var(--t3); font-style:italic; }
.wm-time-delta-pos { color:var(--accent); font-size:9px; }
.wm-time-delta-neg { color:var(--red);    font-size:9px; }
/* v4: 時間軸認知設計 */
.wm-time-val.is-current  { font-weight:600; color:var(--t1); }
.wm-time-val.is-forecast { color:var(--t4); font-style:italic; }
.wm-time-delta           { font-size:9px; min-height:12px; }
.wm-time-delta.pos       { color:var(--accent); }
.wm-time-delta.neg       { color:var(--red); }
/* v4: mixed 2軸表示 */
.wm-mixed-block { }
.wm-mixed-label { font-size:10px; font-weight:600; color:var(--t3); margin-bottom:4px; }
.wm-spark-row   { display:flex; gap:8px; margin-top:8px; }
.wm-spark-item  { flex:1; }
.wm-spark-lbl   { font-size:9px; color:var(--t4); margin-bottom:2px; }
.wm-pending-badge { display:inline-flex; align-items:center; gap:3px; font-size:10px; padding:1px 5px; border-radius:3px; background:rgba(220,38,38,.08); color:var(--red); border:1px solid rgba(220,38,38,.2); }
.wm-reflected-row { font-size:11px; color:var(--t3); padding:5px 0; border-bottom:1px solid var(--bdr); }
.wm-reflected-row:last-child { border-bottom:none; }
.wm-breadcrumb  { font-size:11px; color:var(--t4); margin-bottom:10px; }
.wm-bc-sep      { margin:0 4px; }
.wm-bc-link     { cursor:pointer; }
.wm-bc-link:hover { color:var(--t2); text-decoration:underline; }
.wm-empty       { padding:32px 16px; text-align:center; color:var(--t3); font-size:12px; }
.wm-kpi-nc-block { padding:10px 14px; background:var(--surf); border-radius:4px; font-size:11px; color:var(--t3); margin-top:8px; }

/* ── World Map v5: 新スケルトン CSS ──────────────────────── */
.wm-body { padding: 10px 24px 36px; }
/* data-ready ローディング制御: JS描画完了まで全コンテンツ領域を非表示 */
.wm-body[data-ready="false"] #wm-ctrl-bar,
.wm-body[data-ready="false"] #wm-kpi-row,
.wm-body[data-ready="false"] #wm-wf-row,
.wm-body[data-ready="false"] #wm-decision-impact,
.wm-body[data-ready="false"] #wm-status-bar { display:none; }
.wm-loading-row { padding:60px 0; color:var(--t3); font-size:13px; text-align:center; }
.wm-body[data-ready="true"] .wm-loading-row { display:none; }

/* コントロールバー */
.wm-ctrl-bar { display:flex; align-items:center; gap:16px; padding:10px 0 14px; border-bottom:1px solid var(--bdr); margin-bottom:24px; flex-wrap:wrap; }
.wm-lens-group { display:flex; align-items:center; gap:4px; }
.wm-lens-select { padding:4px 10px; border:1px solid var(--bdr); border-radius:4px; font-size:13px; color:var(--t1); background:var(--bg); cursor:pointer; }
.wm-obs-row { display:flex; align-items:center; gap:10px; margin-left:auto; }
.wm-obs-time { font-size:12px; color:var(--t3); }
.wm-refresh-btn { font-size:12px; color:var(--blue); background:none; border:none; cursor:pointer; padding:0; display:flex; align-items:center; gap:4px; }
.wm-refresh-btn:hover { color:var(--blue-h); }

/* KPI行 */
.wm-kpi-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:0; border:1px solid rgba(229,231,235,0.7); border-radius:4px; overflow:hidden; margin-bottom:24px; }
/* KPIセル: 2カラム（左=数値群 / 右=sparkline） */
.wm-kpi-cell { display:grid; grid-template-columns:1fr 100px; align-items:center; gap:0 16px; padding:20px 24px; background:var(--bg); border-right:1px solid rgba(229,231,235,0.7); }
.wm-kpi-cell-left { } /* label / value / delta の縦積み */
.wm-kpi-cell-right { display:flex; align-items:center; justify-content:center; } /* sparkline 右側中央 */
.wm-kpi-fund { padding:20px 24px; background:var(--bg); display:flex; flex-direction:column; }
.wm-kpi-label { font-size:11px; color:var(--t3); margin-bottom:10px; letter-spacing:0.02em; }
.wm-kpi-value { font-size:24px; font-weight:400; color:var(--t1); font-variant-numeric:tabular-nums; margin-bottom:8px; line-height:1.15; }
.wm-kpi-unit { font-size:14px; font-weight:400; color:var(--t2); margin-left:2px; }
.wm-kpi-delta { font-size:12px; }
.wm-kpi-delta.pos { color:var(--blue); }
.wm-kpi-delta.neg { color:var(--danger); }
.wm-kpi-sparkline { display:block; }
/* 資金状態 上段グループ（現預金 + Runway 横並び） */
.wm-fund-top-group { display:flex; gap:20px; flex:1; }
.wm-fund-kpi { flex:1; }
.wm-fund-sub-label { font-size:11px; color:var(--t3); margin-bottom:6px; }
.wm-fund-sub-value { font-size:18px; font-weight:400; color:var(--t1); font-variant-numeric:tabular-nums; line-height:1.2; }
/* 資金状態 下段（Burn Rate） */
.wm-fund-burn { display:flex; justify-content:space-between; align-items:baseline; padding-top:10px; border-top:1px solid var(--bdr); margin-top:auto; }
.wm-fund-row { display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; border-bottom:1px solid var(--bdr); }
.wm-fund-row:last-child { border-bottom:none; }
.wm-fund-label { font-size:11px; color:var(--t3); }
.wm-fund-value { font-size:13px; font-weight:400; color:var(--t2); font-variant-numeric:tabular-nums; }

/* ウォーターフォール行 */
.wm-wf-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:28px; }
.wm-wf-section { }
.wm-wf-title { font-size:13px; font-weight:400; color:var(--t2); margin-bottom:4px; }
.wm-wf-unit { font-size:11px; color:var(--t3); margin-bottom:16px; }
.wm-wf-delta-badge { font-size:11px; margin-left:6px; }
.wm-wf-delta-badge.pos { color:var(--blue); }
.wm-wf-delta-badge.neg { color:var(--danger); }

/* ウォーターフォールチャート（純HTML/CSS・position:absolute 底部基準） */
/* gap / max-width は JS が --wf-gap / inline style で動的上書きする（バー本数に応じて自動調整）*/
.wm-wf-chart { position:relative; display:flex; align-items:flex-end; gap:24px; height:160px; margin-top:22px; margin-bottom:36px; overflow:visible; }
.wm-wf-chart::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:var(--bdr); pointer-events:none; }
/* position:absolute で bottom%/height% がコンテナHEIGHT基準になる（marginはWIDTH基準のため使用禁止）*/
.wm-wf-col { position:relative; flex:1; max-width:64px; min-width:28px; height:100%; }
.wm-wf-seg { position:absolute; left:10%; right:10%; min-height:3px; border-radius:2px 2px 0 0; }
.wm-wf-seg.wf-baseline { background:rgba(148,163,184,0.50); }
.wm-wf-seg.wf-increase  { background:rgba(37,99,235,0.22); }
.wm-wf-seg.wf-decrease  { background:rgba(220,38,38,0.22); }
/* subtotal: sign別に静かな色分岐（positive=slate, negative=muted terracotta）*/
.wm-wf-seg.wf-subtotal               { left:16%; right:16%; }
.wm-wf-seg.wf-subtotal.wf-subtotal-pos { background:rgba(90,110,135,0.24); }
.wm-wf-seg.wf-subtotal.wf-subtotal-neg { background:rgba(165,80,80,0.19); }
/* コネクタ線: height:13px（上6px余白+1px線+下6px余白）bottom は JS が -7px オフセット */
.wm-wf-connector { position:absolute; left:90%; right:calc(-1 * var(--wf-gap, 24px) - 10%); height:13px; background:transparent; pointer-events:none; z-index:1; }
.wm-wf-connector::before { content:''; display:block; position:absolute; top:6px; left:0; right:0; height:1px; background:rgba(100,116,139,0.38); }
/* ゼロ線: negative landing WF でゼロ位置を明示する補助線（chartの::afterと別物）*/
.wm-wf-zero-line { position:absolute; left:0; right:0; height:1px; background:rgba(100,116,139,0.28); pointer-events:none; z-index:0; }
.wm-wf-amount { position:absolute; top:-21px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:400; font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; line-height:1.2; }
.wm-wf-amount.pos { color:var(--blue); opacity:0.85; }
.wm-wf-amount.neg { color:var(--danger); opacity:0.80; }
.wm-wf-amount.neutral { color:var(--t3); }
.wm-wf-col-label { position:absolute; bottom:-28px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--t4); white-space:nowrap; text-align:center; max-width:68px; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }
/* WFバー ドリルダウン クリック可能スタイル（Silent UI準拠）*/
.wm-wf-col--drill { cursor:pointer; }
.wm-wf-col--drill:hover .wm-wf-seg { opacity:0.8; }
.wm-wf-col--drill:hover .wm-wf-col-label { color:var(--t2); }
/* 根拠HUB対応 drillable バー */
.wm-wf-drillable { cursor:pointer; }
.wm-wf-drillable:hover .wm-wf-seg { opacity:0.8; }
.wm-wf-drillable:hover .wm-wf-col-label { color:var(--t2); }
/* データなし 空状態 — チャートエリアと同一高さを確保して左右baseline揃え */
.wm-wf-empty-body { height:182px; display:flex; flex-direction:column; justify-content:flex-start; padding-top:28px; }

/* 内訳サマリ */
.wm-wf-breakdown { margin-top:4px; }
.wm-wf-breakdown-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-bottom:1px solid var(--bdr); font-size:12px; }
.wm-wf-breakdown-row:last-child { border-bottom:none; }
.wm-wf-bd-label { display:flex; align-items:center; gap:6px; color:var(--t2); }
.wm-wf-bd-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.wm-wf-bd-amount { font-variant-numeric:tabular-nums; }
.wm-wf-bd-amount.pos { color:var(--blue); }
.wm-wf-bd-amount.neg { color:var(--danger); }

/* 利益構造サマリ */
.wm-profit-metric-row { display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--bdr); font-size:13px; }
.wm-profit-metric-row:last-child { border-bottom:none; }
.wm-profit-metric-label { color:var(--t2); font-weight:400; }
.wm-profit-metric-value { color:var(--t1); font-variant-numeric:tabular-nums; }
.wm-profit-metric-delta { font-size:11px; color:var(--blue); margin-left:6px; }
.wm-profit-metric-delta.neg { color:var(--danger); }

/* ─── 根拠HUB ─── */
.wmhub-hd { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--bdr); margin-bottom:20px; }
.wmhub-back { font-size:13px; color:var(--blue); background:none; cursor:pointer; padding:4px 10px; border:1px solid var(--blue); border-radius:4px; flex-shrink:0; }
.wmhub-back:hover { background:var(--blue); color:#fff; }
.wmhub-breadcrumb { font-size:13px; color:var(--t2); }
.wmhub-breadcrumb strong { color:var(--t1); }
.wmhub-contrib-section { margin-bottom:24px; }
.wmhub-section-title { font-size:13px; font-weight:500; color:var(--t2); margin-bottom:10px; }
.wmhub-empty { font-size:13px; color:var(--t4); padding:16px 0; }
.wmhub-contrib-label { min-width:160px; }
.wmhub-contrib-name { font-size:13px; color:var(--t1); }
.wmhub-contrib-reason { font-size:11px; color:var(--t3); margin-top:2px; }
.wmhub-badge { font-size:11px; padding:2px 6px; border-radius:2px; white-space:nowrap; }
.wmhub-badge-wf  { background:var(--blue-soft); color:var(--blue); }
.wmhub-badge-evt { background:var(--surf); color:var(--t3); }
.wmhub-contrib-status { font-size:12px; color:var(--t3); white-space:nowrap; }
.wmhub-contrib-date   { font-size:12px; color:var(--t3); white-space:nowrap; }
.wmhub-contrib-rev,
.wmhub-contrib-profit { text-align:right; font-variant-numeric:tabular-nums; font-size:13px; }
.wmhub-contrib-cash   { text-align:right; font-size:12px; color:var(--t3); }
.wmhub-cash-nil { color:var(--t4); font-size:12px; }
/* P1-1: stronger total row */
.wmhub-contrib-total td { font-weight:500; border-top:2px solid var(--bdr); background:var(--surf); }
.wmhub-actions { padding-top:16px; border-top:1px solid var(--bdr); }
.wmhub-actions-title { font-size:12px; color:var(--t3); margin-bottom:10px; }
.wmhub-actions-btns { display:flex; gap:10px; flex-wrap:wrap; }
.wmhub-cta { font-size:13px; padding:7px 16px; border:1px solid var(--bdr); border-radius:4px; background:var(--bg); color:var(--blue); cursor:pointer; }
.wmhub-cta:hover { background:var(--blue-soft); border-color:var(--blue); }
.wmhub-cta-disabled,.wmhub-cta:disabled { color:var(--t4); border-color:var(--bdr); cursor:default; background:var(--bg); }
/* P1-2: content column priority */
.wmhub-table { width:100%; }
.wmhub-table th:nth-child(1),
.wmhub-table td:nth-child(1) { min-width:220px; width:28%; }
.wmhub-table th:nth-child(2), .wmhub-table td:nth-child(2) { width:120px; }
.wmhub-table th:nth-child(3), .wmhub-table td:nth-child(3) { width:90px; }
.wmhub-table th:nth-child(4), .wmhub-table td:nth-child(4) { width:80px; }
.wmhub-table th:nth-child(5), .wmhub-table td:nth-child(5) { width:110px; text-align:right; }
.wmhub-table th:nth-child(6), .wmhub-table td:nth-child(6) { width:110px; text-align:right; }
.wmhub-table th:nth-child(7), .wmhub-table td:nth-child(7) { width:80px; text-align:right; }
/* P1-3: constrain whitespace on low-row tables */
.wmhub-body { max-width:960px; }
/* P2: last-viewed bar — subtle muted highlight (opacity only, no border, no animation) */
.wm-wf-last-viewed .wm-wf-seg { opacity:0.5; }
.wm-wf-last-viewed .wm-wf-col-label { color:var(--t2); }
.pos { color:var(--blue); }
.neg { color:var(--danger); }

/* 意思決定インパクト */
.wm-decision-impact { margin-bottom:24px; }
.wm-decision-hd { font-size:13px; font-weight:400; color:var(--t2); margin-bottom:14px; }
.wm-decision-cards { display:grid; grid-template-columns:repeat(4,1fr) auto; gap:12px; align-items:stretch; }
.wm-decision-card { padding:16px 16px; border:1px solid rgba(229,231,235,0.7); border-radius:4px; display:flex; flex-direction:column; gap:8px; background:var(--bg); min-height:160px; }
.wm-decision-type { display:inline-block; padding:2px 6px; border-radius:2px; font-size:11px; font-weight:500; width:fit-content; }
.wm-decision-type.revenue { background:var(--blue-soft); color:var(--blue); }
.wm-decision-type.cost { background:#FEF2F2; color:var(--danger); }
.wm-decision-card-title { font-size:13px; font-weight:400; color:var(--t1); min-height:38px; flex:1; }
.wm-decision-impacts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wm-impact-label { font-size:11px; color:var(--t3); margin-bottom:2px; }
.wm-impact-value { font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; }
.wm-impact-value.pos { color:var(--blue); }
.wm-impact-value.neg { color:var(--danger); }
.wm-impact-value.nil { color:var(--t4); }
.wm-decision-cta { font-size:12px; color:var(--blue); cursor:pointer; background:none; border:none; padding:0; text-align:left; margin-top:auto; padding-top:4px; }
.wm-decision-cta:hover { color:var(--blue-h); }
.wm-decision-add { display:flex; align-items:center; justify-content:center; border:1px dashed rgba(229,231,235,0.5); border-radius:4px; font-size:11px; color:var(--t4); cursor:pointer; padding:20px 12px; flex-direction:column; gap:6px; background:none; }
.wm-decision-add:hover { background:var(--surf); }

/* ステータスバー（グリッドレイアウト: dot/ラベル/金額を同一列に配置 → 横位置が必ず一致する）*/
.wm-status-bar { position:relative; margin-top:8px; }
/* ライン: grid に先立って絶対配置。left/right 12.5% で4列の中心間を繋ぐ */
.wm-status-line-bg { position:absolute; top:3px; left:12.5%; right:12.5%; height:1px; background:var(--bdr); pointer-events:none; }
.wm-status-grid { display:grid; grid-template-columns:repeat(4,1fr); position:relative; }
.wm-status-stage-col { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 4px; }
.wm-status-dot { width:8px; height:8px; border-radius:50%; background:var(--t2); flex-shrink:0; margin-bottom:10px; }
.wm-status-dot.inactive { background:var(--bdr); }
.wm-status-stage { font-size:11px; color:var(--t3); margin-bottom:4px; }
.wm-status-amount { font-size:13px; font-weight:400; color:var(--t1); font-variant-numeric:tabular-nums; margin-bottom:2px; }
.wm-status-count { font-size:11px; color:var(--t4); }

/* ── Step 8: sticky列はホバー背景から保護（全テーブル共通・最終上書き） ──
   【層1】.t-fix / .t-fix-r クラス使用テーブル（hc-spr 等）
         specificity(0,2,2)+!importantで同スペックの後発ルールが勝つ位置に配置。 */
tr:hover td.t-fix,
tr:hover td.t-fix-r {
  background: var(--sticky-bg) !important;
}
/* 【層2】fin-tbl ファミリー: td:first-child が sticky（.t-fix クラス不使用）
         specificity(0,3,2)+!importantでL4560(0,2,3)に勝つ。 */
.fin-tbl tr:hover td:first-child,
.fin-row-detail:hover td:first-child,
.fin-tree-child:hover td:first-child,
.fin-kpi-drill-row:hover td:first-child {
  background: var(--card-bg) !important;
}

/* ── Phase 11: アンカーバッジ（右固定列・前月比シグナル） ── */
.fin-sig-th {
  width: 70px; min-width: 70px; max-width: 70px;
  text-align: center; font-size: 10px; color: var(--t4);
  padding: 0 6px;
  background: var(--sticky-bg);
}
.fin-sig-td {
  width: 70px; min-width: 70px; max-width: 70px;
  text-align: center;
  padding: 0 4px;
  background: var(--sticky-bg);
}
.fin-sig-badge {
  display: inline-block;
  font-size: 10px; font-weight: 500;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
}
.fin-sig-badge.sig-note {
  color: var(--t3);
  background: rgba(107, 114, 128, 0.08);
}
.fin-sig-badge.sig-warn {
  color: #92400E;
  background: rgba(251, 191, 36, 0.18);
  cursor: pointer;
}
.fin-sig-badge.sig-warn:hover {
  background: rgba(251, 191, 36, 0.32);
}
.fin-sig-badge.sig-none {
  color: var(--t4);
  background: none;
}

/* ═══════════════════════════════════════════════════════
   Phase I: UI構造パッチ — 2026-04-22
   biz-detail の帳票UI → 判断UI 変換
═══════════════════════════════════════════════════════ */

/* コンテナ制御（全幅禁止） */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.section { margin-top: 32px; }
.section-inner { max-width: 900px; margin: 0 auto; }
.svc-customer-wide { max-width: 1100px; }

/* ── 年度予算ページ ── */
.budget-hd-badge {
  font-size: 11px;
  padding: 2px 8px;
  vertical-align: middle;
  margin-left: 8px;
}
.budget-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bdr);
}
.budget-meta-item { font-size: 12px; color: var(--t3); }
.budget-meta-label { margin-right: 4px; }
.budget-meta-val   { color: var(--t2); }

.budget-flow-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
}
.budget-flow-card {
  flex: 1;
  min-width: 180px;
  border: 1px solid var(--bdr);
  border-radius: 6px;
  padding: 16px 18px;
  background: var(--card-bg);
}
.budget-flow-card-hd {
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bdr);
}
.budget-flow-card-desc {
  font-size: 12px;
  color: var(--t3);
  line-height: 1.6;
}
.budget-flow-card-hint {
  font-size: 11px;
  color: var(--t4);
  margin-top: 8px;
}

/* Design card links */
.budget-flow-card-links { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.budget-flow-card-link { font-size: 12px; color: var(--accent); cursor: pointer; }
.budget-flow-card-link:hover { text-decoration: underline; }
.budget-flow-card-link.disabled { color: var(--t4); cursor: default; pointer-events: none; }

/* === Cost Design View v5 === */
.cost-design-wrap { padding: 0 0 40px; }

/* Breadcrumb */
.cost-breadcrumb { display: flex; align-items: center; gap: 6px; padding: 8px 0 16px; font-size: 12px; color: var(--t3); }
.cost-breadcrumb-link { color: var(--accent); cursor: pointer; }
.cost-breadcrumb-link:hover { text-decoration: underline; }
.cost-breadcrumb-cur { color: var(--t1); font-weight: 500; }

/* レンズバー */
.cost-lens-bar { display: flex; gap: 6px; padding: 0 0 14px; }
.cost-lens-btn {
  font-size: 12px; padding: 4px 12px; border-radius: 4px;
  border: 1px solid var(--bdr); background: var(--card-bg); color: var(--t2); cursor: pointer;
}
.cost-lens-btn:hover:not([disabled]) { background: var(--surf); }
.cost-lens-btn.active { background: var(--t1); color: #fff; border-color: var(--t1); }
.cost-lens-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* 共通アクションバー */
.cost-common-actions { display: flex; gap: 8px; padding: 0 0 16px; }

/* Section blocks */
.cost-section-block { margin-bottom: 32px; }
.cost-section-hd { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--bdr); }
.cost-section-title { font-size: 14px; font-weight: 600; color: var(--t1); }
.cost-section-desc { font-size: 12px; color: var(--t3); flex: 1; }
.cost-section-actions { display: flex; gap: 8px; margin-left: auto; }

/* 未来拘束サマリー */
.cost-nature-summary {
  display: flex; gap: 20px; align-items: center;
  padding: 8px 12px; margin-bottom: 10px;
  background: var(--surf); border: 1px solid var(--bdr); border-radius: 4px;
  font-size: 12px; color: var(--t2);
}
.cost-nature-summary span { white-space: nowrap; }
.cost-nature-summary--change { border-left: 3px solid #F59E0B; }

/* 統制補足1行 */
.cost-section-note { font-size: 11px; color: var(--t4); margin: 0 0 8px; line-height: 1.5; }

/* AN原則: 親は overflow-x:clip */
.cost-regular-wrap, .cost-event-wrap { overflow-x: clip; }

/* テーブル密度 */
.cost-section-block th, .cost-section-block td {
  font-size: 12px; padding: 3px 6px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Column widths */
.cost-col-no     { width: 32px;  min-width: 32px;  text-align: center; }
/* 左4列 sticky — ID(left:0/110px) 内容説明(left:110px/150px) 科目G(left:260px/88px) 部門(left:348px/80px) */
.cost-col-id     { min-width: 110px; position: sticky; left: 0;     z-index: 3; background: var(--card-bg); font-family: monospace; font-size: 11px; }
.cost-col-desc   { min-width: 150px; position: sticky; left: 110px; z-index: 3; background: var(--card-bg); }
.cost-col-acct   { min-width: 88px;  position: sticky; left: 260px; z-index: 3; background: var(--card-bg); }
.cost-col-dept   { min-width: 80px;  position: sticky; left: 348px; z-index: 3; background: var(--card-bg); }
.cost-col-nature { min-width: 60px; text-align: center; }
.cost-col-attr   { min-width: 110px; text-align: center; }
.cost-col-acct-nm { min-width: 120px; font-weight: 500; }
.cost-col-vs     { min-width: 60px;  text-align: center; }
.cost-col-vendor { min-width: 110px; }
.cost-col-alloc  { min-width: 48px;  text-align: center; }
.cost-col-tol    { min-width: 90px; }
.cost-col-memo   { min-width: 100px; }
.cost-col-month  { min-width: 76px; width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.cost-col-num    { text-align: right; font-variant-numeric: tabular-nums; }
.cost-col-annual { font-variant-numeric: tabular-nums; text-align: right; }

/* Sticky thead — 左4列は z-index を tbody より高く */
.cost-section-block thead th { position: sticky; top: 0; background: var(--surf); z-index: 8; }
.cost-section-block thead th.cost-col-id   { z-index: 11; background: var(--surf); }
.cost-section-block thead th.cost-col-desc { z-index: 11; background: var(--surf); }
.cost-section-block thead th.cost-col-acct { z-index: 11; background: var(--surf); }
.cost-section-block thead th.cost-col-dept { z-index: 11; background: var(--surf); }

/* cost-all-view: ID列なし — sticky left オフセット上書き */
.cost-all-view .cost-col-desc { left: 0; }
.cost-all-view .cost-col-acct { left: 150px; }
.cost-all-view .cost-col-dept { left: 238px; }
.cost-all-view thead th.cost-col-desc { z-index: 11; background: var(--surf); }
.cost-all-view thead th.cost-col-acct { z-index: 11; background: var(--surf); }
.cost-all-view thead th.cost-col-dept { z-index: 11; background: var(--surf); }

/* 支出性質タグ */
.cost-nature-tag { display: inline-block; font-size: 11px; padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.cost-nature-tag--maintain     { background: var(--surf); color: var(--t2); border: 1px solid var(--bdr); }
.cost-nature-tag--change       { background: rgba(37,99,235,.08); color: var(--blue); border: 1px solid rgba(37,99,235,.2); }
.cost-nature-tag--unclassified { background: transparent; color: var(--t4); border: 1px solid var(--bdr); }

/* 追加行ボタン */
.cost-add-row { padding: 10px 16px; }

/* 操作列ボタン */
.cost-ops-btn { font-size: 11px; padding: 2px 5px; border-radius: 3px; border: 1px solid var(--bdr); background: var(--card-bg); color: var(--t2); cursor: pointer; display: block; width: 100%; margin-bottom: 2px; }
.cost-ops-btn:hover:not(:disabled) { background: var(--surf); }
.cost-ops-btn:disabled { opacity: .35; cursor: not-allowed; }
.cost-ops-del { border-color: rgba(220,38,38,.35); color: var(--red); }
.cost-ops-del:hover:not(:disabled) { background: rgba(220,38,38,.06); }

/* semanticGroup ヘッダ行 */
.cost-group-hd td { background: var(--surf); font-size: 12px; color: var(--t3); padding: 4px 8px; border-top: 1px solid var(--bdr); }
.cost-group-label { font-weight: 500; }
.cost-group-count { font-size: 11px; color: var(--t4); margin-left: 4px; }

/* 依存・影響アイコン */
.cost-dep-icon { font-size: 10px; color: var(--t4); margin-right: 2px; }
.cost-imp-icon { font-size: 10px; color: var(--t4); margin-right: 2px; }

/* フィルタバー */
.cost-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--bdr); background: var(--surf); }
.cost-filter-search { flex: 1; min-width: 160px; max-width: 260px; font-size: 13px; padding: 4px 8px; border: 1px solid var(--bdr); border-radius: 4px; background: var(--card-bg); color: var(--t1); }
.cost-filter-bar select { font-size: 12px; padding: 4px 8px; border: 1px solid var(--bdr); border-radius: 4px; background: var(--card-bg); color: var(--t2); }
.cost-filter-count { font-size: 12px; color: var(--t3); margin-left: auto; }

/* 計画範囲バー */
.cost-horizon-bar { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--bdr); background: var(--surf); }
.cost-horizon-label { font-size: 12px; color: var(--t3); margin-right: 4px; }
.cost-horizon-btn { font-size: 12px; padding: 3px 10px; border-radius: 4px; border: 1px solid var(--bdr); background: var(--card-bg); color: var(--t2); cursor: pointer; }
.cost-horizon-btn.active { background: var(--t1); color: #fff; border-color: var(--t1); }
.cost-horizon-btn:disabled { opacity: .4; cursor: not-allowed; }
.cost-scenario-label { font-size: 12px; color: var(--t3); margin-left: 8px; }

/* Vendor match badges */
.badge-vendor-confirmed { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: rgba(22,163,74,0.1);  color: #16A34A; border: 1px solid rgba(22,163,74,0.25); }
.badge-vendor-undecided { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: rgba(156,163,175,0.15); color: var(--t3); border: 1px solid var(--bdr); }
.badge-vendor-family    { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: rgba(59,130,246,0.1);  color: #2563EB; border: 1px solid rgba(59,130,246,0.25); }
.badge-vendor-dynamic   { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: rgba(245,158,11,0.1);  color: #D97706; border: 1px solid rgba(245,158,11,0.25); }

/* 変化属性バッジ */
.badge-attr-event    { font-size: 10px; padding: 1px 5px; border-radius: 3px;
  background: rgba(59,130,246,0.1); color: #2563EB; border: 1px solid rgba(59,130,246,0.25); }
.badge-attr-strategy { font-size: 10px; padding: 1px 5px; border-radius: 3px;
  background: rgba(245,158,11,0.1); color: #D97706; border: 1px solid rgba(245,158,11,0.25); }
.badge-attr-mixed    { font-size: 10px; padding: 1px 5px; border-radius: 3px;
  background: rgba(156,163,175,0.15); color: var(--t3); border: 1px solid var(--bdr); }

/* 科目集約色分け */
.cost-acct-maintain { color: var(--t2); }
.cost-acct-change   { color: #D97706; }

/* 修正行インジケーター */
.cost-row-revised { background: rgba(245,158,11,0.05); }

/* 旧WF/rules/AIクラスは空定義（将来清掃） */
.cost-wf-flow,.cost-wf-step,.cost-wf-arrow,.cost-wf-step-name,.cost-wf-step-desc,
.cost-rules-grid,.cost-rule-card,.cost-rule-card-hd,.cost-rule-card-body,
.cost-ai-block,.cost-ai-hd,.cost-ai-title,.badge-ai-ready,.cost-ai-hint-row,.cost-ai-hint-key {}

/* ─── 予算行: 白背景・ゼブラなし ─── */
.cost-row td                { background: var(--card-bg); }
.cost-row:hover td          { background: #EFF6FF; }

/* ─── ops ボタン: hover 時のみ表示 ─── */
.cost-col-ops               { width: 36px; min-width: 36px; text-align: center; padding: 2px 4px; }
.cost-ops-wrap              { position: relative; }
.cost-ops-trigger           { font-size: 13px; padding: 0 4px; border: none; background: transparent; color: var(--t3); cursor: pointer; opacity: 0; transition: opacity 0.1s; line-height: 1.6; border-radius: 3px; }
.cost-row:hover .cost-ops-trigger { opacity: 1; }
.cost-ops-trigger:hover     { background: var(--surf); color: var(--t1); }
.cost-ops-menu              { display: none; position: absolute; right: 0; top: 100%; background: var(--card-bg); border: 1px solid var(--bdr); border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); z-index: 50; min-width: 80px; }
.cost-ops-menu-item         { display: block; width: 100%; text-align: left; font-size: 12px; padding: 5px 10px; background: transparent; border: none; color: var(--t2); cursor: pointer; white-space: nowrap; }
.cost-ops-menu-item:hover   { background: var(--surf); color: var(--t1); }
.cost-ops-menu-item.cost-ops-del { color: var(--red); }
.cost-ops-menu-item.cost-ops-del:hover { background: rgba(220,38,38,.06); }

/* ── future state: 第1行ヘッダー ── */
.cost-fs-card-row td        { background: var(--card-bg); border-top: 2px solid var(--bdr); padding: 5px 10px; }
.cost-fs-card-hd            { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cost-group-collapse-btn    { font-size: 9px; padding: 0 4px; background: transparent; border: 1px solid var(--bdr); border-radius: 3px; color: var(--t4); cursor: pointer; }
.cost-fs-label              { font-size: 13px; color: var(--t1); font-weight: 500; }
/* maturity バッジ */
.cost-fs-maturity           { font-size: 9px; padding: 0 5px; border-radius: 3px; vertical-align: middle; border: 1px solid; }
.cost-fm-hypothesis         { color: var(--t3);     border-color: var(--bdr);          background: transparent; }
.cost-fm-reproducing        { color: #2563EB;       border-color: rgba(37,99,235,.2);  background: rgba(37,99,235,.06); }
.cost-fm-scaling            { color: #059669;       border-color: rgba(5,150,105,.25); background: rgba(5,150,105,.06); }
.cost-fm-established        { color: var(--t4);     border-color: var(--bdr-s,#F3F4F6); background: transparent; }
.cost-fs-due                { font-size: 10px; color: var(--t4); }
.cost-fs-priority           { font-size: 9px; color: var(--t4); }
.cost-group-total           { font-size: 12px; color: var(--t2); margin-left: auto; font-variant-numeric: tabular-nums; }

/* ── 第2行: stateValidationMetrics ── */
.cost-fs-metrics-row td     { background: var(--card-bg); padding: 2px 10px 5px; border-bottom: 1px solid var(--bdr-s,#F3F4F6); }
.cost-fs-metrics-cell       { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.cost-sv-label              { font-size: 10px; color: var(--t4); }
.cost-sv-chip               { font-size: 10px; padding: 1px 6px; border-radius: 3px; border: 1px solid; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.cost-sv-chip--positive     { color: #059669; border-color: rgba(5,150,105,.25); background: rgba(5,150,105,.06); }
.cost-sv-chip--neutral      { color: var(--t3); border-color: var(--bdr-s,#F3F4F6); background: transparent; }
.cost-sv-chip strong        { font-weight: 500; }
.cost-sv-now                { font-size: 10px; color: var(--t3); }
.cost-sv-arr                { font-size: 9px; color: var(--t4); }

/* ── 第3段: capability sub-header ── */
.cost-cap-hd td             { background: transparent; border-top: none; padding: 2px 10px 2px 20px; }
.cost-cap-label             { font-size: 11px; color: var(--t3); }

/* ── driverType 行クラス / バッジ ── */
.cost-dt-fixed       td.cost-col-month { opacity: 1; }
.cost-dt-estimated   td.cost-col-month { opacity: 0.88; }
.cost-dt-headcount   td.cost-col-month { opacity: 0.85; }
.cost-dt-usage       td.cost-col-month { opacity: 0.83; }
.cost-dt-revenue     td.cost-col-month { opacity: 0.83; }
.cost-dt-variable    td.cost-col-month { opacity: 0.82; }
.cost-dt-project     td.cost-col-month { opacity: 0.80; }
.cost-dt-unclassified td.cost-col-month { opacity: 0.5; font-style: italic; color: var(--t4) !important; }

.cost-driver-badge          { font-size: 9px; padding: 0 3px; border-radius: 3px; margin-left: 3px; vertical-align: middle; }
.cost-dt-fixed.cost-driver-badge,
.cost-dt-estimated.cost-driver-badge  { color: var(--t4); background: transparent; border: 1px solid var(--bdr-s,#F3F4F6); }
.cost-dt-headcount.cost-driver-badge  { color: #2563EB; background: rgba(37,99,235,.06); border: 1px solid rgba(37,99,235,.2); }
.cost-dt-usage.cost-driver-badge      { color: #059669; background: rgba(5,150,105,.06); border: 1px solid rgba(5,150,105,.25); }
.cost-dt-revenue.cost-driver-badge    { color: #7C3AED; background: rgba(124,58,237,.06); border: 1px solid rgba(124,58,237,.25); }
.cost-dt-variable.cost-driver-badge   { color: var(--t3); background: transparent; border: 1px solid var(--bdr); }
.cost-dt-project.cost-driver-badge    { color: #2563EB; background: rgba(37,99,235,.06); border: 1px solid rgba(37,99,235,.2); }
.cost-dt-unclassified.cost-driver-badge { color: var(--t4); background: transparent; border: 1px dashed var(--bdr); }

/* ── セクション説明 / 評価観点 ── */
.cost-section-subtitle      { font-size: 12px; color: var(--t3); padding: 4px 16px 6px; border-bottom: 1px solid var(--bdr-s,#F3F4F6); }
.cost-section-criteria      { font-size: 11px; color: var(--t4); margin-left: 8px; }

/* ── 因果ノード（causal nodes）── */
.cost-causal-nodes          { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-top: 2px; }
.cost-causal-arrow          { font-size: 8px; color: var(--t4); }
.cost-causal-node           { font-size: 9px; padding: 0 4px; border-radius: 3px; line-height: 1.7; border: 1px solid; white-space: nowrap; }
.cost-cn-revenue            { color: #2563EB; border-color: rgba(37,99,235,.25); background: rgba(37,99,235,.06); }
.cost-cn-kpi                { color: #7C3AED; border-color: rgba(124,58,237,.25); background: rgba(124,58,237,.06); }
.cost-cn-org                { color: #059669; border-color: rgba(5,150,105,.25);  background: rgba(5,150,105,.06); }
.cost-cn-efficiency         { color: #6B7280; border-color: rgba(107,114,128,.25); background: rgba(107,114,128,.06); }
.cost-cn-ops                { color: #6B7280; border-color: rgba(107,114,128,.2);  background: rgba(107,114,128,.04); }
.cost-cn-event              { color: #2563EB; border-color: rgba(37,99,235,.3); background: rgba(37,99,235,.08); font-weight: 500; }
.cost-cn-delta-group        { display: inline-flex; gap: 3px; flex-wrap: wrap; vertical-align: middle; }
.cost-cn-delta              { font-size: 9px; padding: 0 4px; border-radius: 3px; line-height: 1.7; border: 1px solid; white-space: nowrap; font-weight: 500; }
.cost-cn-delta--positive    { color: #059669; border-color: rgba(5,150,105,.3); background: rgba(5,150,105,.08); }
.cost-cn-delta--neutral     { color: var(--t3); border-color: var(--bdr-s,#F3F4F6); background: transparent; }

/* ── desc セル内部構造 ── */
.cost-desc-purpose          { display: block; font-size: 11px; color: var(--t3); line-height: 1.5; }
.cost-desc-name             { display: block; font-size: 12px; color: var(--t1); line-height: 1.5; }
.cost-desc-name--solo       { font-size: 13px; }
.cost-theme-badge           { font-size: 9px; padding: 0 4px; border-radius: 3px; margin-left: 4px; color: #D97706; background: rgba(217,119,6,.06); border: 1px solid rgba(217,119,6,.2); vertical-align: middle; }

/* ── セクションナビ pill ── */
.cost-section-nav           { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 16px; border-bottom: 1px solid var(--bdr-s,#F3F4F6); }
.cost-nav-pill              { font-size: 11px; padding: 2px 9px; border-radius: 12px; background: transparent; border: 1px solid var(--bdr); color: var(--t2); cursor: pointer; }
.cost-nav-pill:hover        { background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.25); color: #2563EB; }
.cost-np-scale              { font-size: 10px; color: var(--t4); margin-left: 4px; font-variant-numeric: tabular-nums; }
.cost-np-maturity--reproducing  { border-color: rgba(37,99,235,.3); color: #2563EB; }
.cost-np-maturity--hypothesis   { /* default */ }
.cost-np-maturity--scaling      { border-color: rgba(5,150,105,.3); color: #059669; }
.cost-np-maturity--established  { color: var(--t4); }

/* ── 戦略意思ステートメント（strategy map）── */
.cost-strategy-map          { padding: 6px 16px 4px; border-bottom: 1px solid var(--bdr-s,#F3F4F6); }
.cost-strategy-statement    { font-size: 12px; color: var(--t2); margin-bottom: 5px; }
.cost-strategy-statement strong { color: var(--t1); font-weight: 500; }
.cost-strategy-maturity     { font-size: 10px; color: var(--t4); margin-left: 4px; }
.cost-strategy-bar          { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 1px; }
.cost-strategy-seg--foundation   { background: #94A3B8; }
.cost-strategy-seg--growth       { background: #2563EB; }
.cost-strategy-seg--acquisition  { background: #7C3AED; }
.cost-strategy-seg--market       { background: #059669; }
.cost-strategy-seg--organization { background: #D97706; }
.cost-strategy-seg--other        { background: #E5E7EB; }

/* ── 未達リスクパネル ── */
.cost-filter-wrap           { position: relative; }
.cost-priority-alert        { font-size: 12px; padding: 3px 10px; border-radius: 12px; background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.2); color: var(--red); cursor: pointer; white-space: nowrap; }
.cost-priority-alert strong { font-weight: 600; }
.cost-priority-alert:hover  { background: rgba(220,38,38,.12); }
.cost-priority-alert.open   { background: rgba(220,38,38,.15); }
.cost-priority-ok           { font-size: 12px; color: var(--t4); }
.cost-priority-panel        { background: var(--card-bg); border: 1px solid var(--bdr); border-radius: 4px; padding: 8px 12px; min-width: 280px; margin-top: 4px; }
.cost-risk-fs               { padding: 4px 0; border-bottom: 1px solid var(--bdr-s,#F3F4F6); }
.cost-risk-fs:last-child    { border-bottom: none; }
.cost-risk-fs-label         { font-size: 11px; color: var(--t1); font-weight: 500; }
.cost-priority-list         { margin: 3px 0 0 8px; padding: 0; list-style: disc; }
.cost-priority-list li      { font-size: 11px; color: var(--t2); line-height: 1.7; }
.cost-priority-list small   { color: var(--t4); }
.cost-risk-reason           { display: block; font-size: 10px; color: var(--t4); margin-left: 12px; line-height: 1.5; }
.cost-priority-more         { color: var(--t4); list-style: none; }

/* ── 今日列ハイライト ── */
.cost-col-today             { background: rgba(37,99,235,.04) !important; }

/* biz-detail ヘッダー 3列 grid */
.biz-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bdr);
}
.svc-name {
  font-size: 15px;
  font-weight: 400;
  color: var(--t2);
  margin-left: 12px;
}
.rm-tag {
  font-size: 12px;
  color: var(--t3);
  margin-left: 8px;
}

/* KPI カードグリッド（数値主役） */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.kpi-card {
  padding: 16px 20px;
  border: 1px solid var(--bdr);
  border-radius: var(--rc);
  background: var(--card-bg);
}
.kpi-value { font-size: 24px; font-weight: 600; color: var(--t1); line-height: 1.2; letter-spacing: -.02em; }
.kpi-label { font-size: 12px; color: var(--t2); margin-bottom: 6px; }

/* タブ文法（青・グレー禁止） */
.tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tab-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 400;
  border: 1px solid #DBEAFE;
  color: #2563EB;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}
.tab-btn:hover { background: #EFF6FF; }
.tab-btn.active {
  background: #2563EB;
  color: #fff;
  border-color: #2563EB;
  font-weight: 500;
}

/* テーブル行カード化（ストライプ禁止・hover） */
.tbl tr:nth-child(even) td { background: transparent !important; }
.tbl tbody tr {
  background: #fff;
  border-bottom: 1px solid #E5E7EB;
  transition: background 0.15s ease;
}
.tbl tbody tr:hover { background: #F9FAFB !important; cursor: pointer; }

/* イベントテーブル列幅（意味単位で寄せる） */
.biz-evt-tbl td:nth-child(1) { width: 100px; }
.biz-evt-tbl td:nth-child(2) { width: auto; }
.biz-evt-tbl td:nth-child(3) { width: 120px; }
.biz-evt-tbl td:nth-child(4) { width: 160px; }

/* ════════════════════════════════════════
   TABLE_SPEC v1 — 最終強制上書きブロック
   main.css 末尾に配置。全定義に勝つ。

   禁止ルール（例外なし）:
   - 行種別で padding を個別指定すること
   - 行種別で font-weight を個別指定すること
   - 行ごとのスタイル分岐（hd/sub/total で別値）
   - インラインスタイルで padding/font-weight を設定すること
   - クラスごとの例外設計（table-specが唯一の正）
════════════════════════════════════════ */

/* ─ ① 行種別 padding・font-weight 完全統一 ─
   hd/sub/total の行種別で padding/font-weight を
   変えることを禁止。すべて 4px 8px / 400 に統一。 */
.fin-row-hd td,
.fin-tbl .fin-row-hd td,
.fin-tbl tbody tr.fin-row-hd td,
.fin-model-tbl .fin-row-hd td {
  padding: 4px 8px !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}
.fin-row-sub td,
.fin-tbl .fin-row-sub td {
  padding: 4px 8px !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}
.fin-row-total td,
.fin-tbl .fin-row-total td,
.fin-tbl tbody tr.fin-row-total td {
  padding: 4px 8px !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}

/* ─ ② 左列 sticky padding（top/right/bottom のみ固定。left は DFS inline style に委ねる） ─ */
.fin-tbl tbody td:first-child,
.fin-tbl tbody tr.fin-row-hd td:first-child,
.fin-tbl tbody tr.fin-row-sub td:first-child,
.fin-tbl tbody tr.fin-row-total td:first-child {
  padding-top: 4px !important;
  padding-right: 8px !important;
  padding-bottom: 4px !important;
  /* padding-left は renderFinTimeline の inline style（depth×20+8px）に委ねる */
}
/* 階層ツリーの深さインデント（構造として保持） */
.fin-tbl tbody tr.pln-depth-1 td:first-child { padding-left: 28px !important; }
.fin-tbl tbody tr.pln-depth-2 td:first-child { padding-left: 40px !important; }

/* ─ ③ 行高強制解除: height を auto に戻す ─
   padding のみが行高を決定する構造に戻す。
   height 固定値は padding の効果を上書きするため禁止。 */
.tbl tbody tr,
.tbl tbody tr.fin-row-sub,
.tbl tbody tr.fin-row-total,
.tbl tbody tr.pln-depth-1,
.tbl tbody tr.pln-depth-2,
.tbl tbody tr.fin-row-rate,
.tbl tbody tr.fin-row-detail { height: auto !important; min-height: 0 !important; }

.fin-tbl tbody tr,
.fin-tbl tbody tr.fin-row-total,
.fin-tbl tbody tr.fin-row-rate,
.fin-tbl thead tr             { height: auto !important; min-height: 0 !important; }

/* ─ ④ table-standard 強制（通常テーブル: 14px/1.6、財務テーブル: 13px/1.5） ─ */
.table-standard th,
.table-standard td {
  padding: 6px 10px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}
.table-standard.table-financial th,
.table-standard.table-financial td {
  padding: 4px 8px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* ─ ⑤ hover 統一: #EFF6FF（TABLE_SPEC: 薄青）─ */
.tbl tbody tr:hover,
.tbl tbody tr:hover td { background: #EFF6FF !important; }

/* ─ ⑥ fin-sig-badge 行高影響排除 ─
   inline-block の fin-sig-badge は line-height:1 でも font x-height の
   影響で line box を 1px 膨らませる。
   含む td の line-height を 0 にして strut を消し、
   行高を badge-なし列（15.4px strut）に委ねる。 */
.fin-tbl td:has(> .fin-sig-badge:only-child) { line-height: 0; }

/* ─ ⑦ fin-row-hd 境界線（border-collapse:separate では tr の border は無視）─
   line 4850 で border-top/bottom が none になるため td に直接付与して上書き。
   border-top = セクション区切り / border-bottom = 通常 td と同様。
   → hd 行高: 4+15.4+4+1+1 = 25.4px（ベンチマーク bdg-row-hd と一致）。 */
.fin-tbl tbody tr.fin-row-hd td {
  border-top:    1px solid var(--bdr) !important;
  border-bottom: 1px solid var(--bdr) !important;
}

/* ─ ⑨ fin-row-total 上境界線 ─
   ベンチマーク（bdg-row-total）は 25.39px（border-top + border-bottom）。
   line 4846「ユーザー指示: 忖度不要」で border-top が none だが、
   TABLE_SPEC「差異分析と目視完全一致」を優先してここで上書きする。
   同一セレクタ (0,2,3) + !important — 後方位置で優先。 */
.fin-tbl tbody tr.fin-row-total td {
  border-top: 1px solid var(--bdr) !important;
}

/* ─ ⑧ fin-src-mini-wrap margin-top 排除 ─
   height:0（子要素が非表示）の div に margin-top:1px があると
   行高が 25.39px → 26.39px に膨らむ。ベンチマーク基準の 25.39px に収めるため 0 に統一。
   ※ Rule ⑨ の border-top 追加後もこの 0 が正しい値。 */
.fin-src-mini-wrap { margin-top: 0 !important; }

/* ─ ⑩ 全行の左ディメンション列を sticky 固定 ─
   hd/sub/total は JS が fin-col-first クラスを付与して sticky になるが、
   通常行（fin-indent 等）は fin-col-first が付いていないため position:static。
   横スクロール時に行ラベル文脈が消えるのを防ぐため CSS で強制 sticky にする。
   fin-col-first（z-index:3）と合わせて z-index:2 を付与（thead の 8 より下）。
   background:#fff で後ろのセルが透けないよう保護。 */
.fin-tbl tbody td:first-child,
.fin-table tbody td:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 2 !important;
  background: #FFFFFF !important;
}

/* ─ ⑪ fin-table / fin-tbl 全セル font-size / font-weight 統一 ─
   inline style="font-size:12/13px" や font-weight:500/600 を上書きする。
   spans inside cells は個別修正済み（fin-data.js:1467, budget.js:326）。 */
.fin-table th, .fin-table td,
.fin-tbl th, .fin-tbl td {
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* ── Funnel Trend Flyout ─────────────────────────────────────────── */
.ft-flyout {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; justify-content: flex-end;
}
.ft-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.35);
}
.ft-panel {
  position: relative; z-index: 1;
  width: clamp(640px, 84vw, 1100px);
  height: 100vh;
  background: var(--card-bg);
  border-left: 1px solid var(--bdr);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: ft-slide-in 0.22s ease;
}
@keyframes ft-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ヘッダー */
.ft-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.ft-hd-left { display: flex; align-items: baseline; gap: 8px; }
.ft-hd-title { font-size: 13px; font-weight: 600; color: var(--t1); }
.ft-hd-sub   { font-size: 11px; color: var(--t3); }
.ft-close {
  background: none; border: none; cursor: pointer;
  font-size: 16px; color: var(--t3); padding: 2px 8px; line-height: 1;
}
.ft-close:hover { color: var(--t1); }

/* 月次カード横スクロール */
.ft-cards-wrap {
  overflow-x: auto; overflow-y: clip;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.ft-cards {
  display: flex; gap: 8px;
  padding: 10px 16px;
  min-width: max-content;
}
.ft-month-card {
  flex-shrink: 0; min-width: 130px;
  padding: 8px 10px;
  border: 1px solid var(--bdr);
  border-radius: 4px;
  cursor: pointer;
  background: var(--card-bg);
}
.ft-month-card:hover  { background: #EFF6FF; }
.ft-month-card.active { border-color: #2563EB; background: #EFF6FF; }
.ft-card-ym    { font-size: 11px; font-weight: 600; color: var(--t1); margin-bottom: 5px; }
.ft-card-kpi   { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.ft-card-label { font-size: 10px; color: var(--t3); }
.ft-card-val   { font-size: 12px; font-weight: 600; color: var(--t1); }
.ft-card-won   { font-size: 10px; color: var(--t2); }
.ft-card-carry { font-size: 10px; color: var(--t3); }

/* 詳細セクション（スクロール可能） */
.ft-detail {
  flex: 1; overflow-y: auto;
  padding: 14px 16px;
}
.ft-detail-hd { margin-bottom: 10px; }
.ft-detail-title { font-size: 12px; font-weight: 600; color: var(--t1); }

/* 最優先アクション（意思決定UI） */
.ft-action {
  font-size: 11px; line-height: 1.7;
  margin-bottom: 14px; padding: 10px 12px;
  border-radius: 4px;
}
.ft-action-warn { background: #FEF3C7; border: 1px solid #FDE68A; }
.ft-action-ok   { background: var(--surf); border: 1px solid var(--bdr); }
.ft-action-title {
  font-size: 12px; font-weight: 600; color: var(--t1);
  margin-bottom: 6px;
}
.ft-action-item { display: flex; gap: 6px; color: var(--t1); padding: 1px 0; }
.ft-action-label { color: var(--t3); flex-shrink: 0; min-width: 80px; }
.ft-action-next  { margin-top: 4px; }
.ft-action-next .ft-action-label { color: var(--t2); font-weight: 600; }

/* セクション共通 */
.ft-section { margin-bottom: 14px; }
.ft-section-title {
  font-size: 11px; font-weight: 600; color: var(--t2);
  border-bottom: 1px solid var(--bdr);
  padding-bottom: 3px; margin-bottom: 5px;
}
.ft-row {
  font-size: 11px; color: var(--t1);
  display: flex; justify-content: space-between;
  padding: 2px 0;
  font-variant-numeric: tabular-nums;
}
.ft-row-sub { font-size: 10px; color: var(--t3); padding-left: 8px; }
.ft-won-val { color: #166534; }
.ft-lost-val { color: var(--red); }

/* CVR */
.ft-cvr-section { border-top: 1px solid var(--bdr); padding-top: 10px; margin-top: 4px; }
.ft-cvr-row {
  display: grid; grid-template-columns: 110px 50px 1fr;
  align-items: baseline; gap: 8px;
  padding: 3px 0;
  font-size: 11px;
}
.ft-cvr-label { color: var(--t2); }
.ft-cvr-val   { font-weight: 600; color: var(--t1); text-align: right; font-variant-numeric: tabular-nums; }
.ft-cvr-desc  { color: var(--t3); }
.ft-cvr-pending { font-size: 10px; font-weight: 400; color: var(--t3); }

/* トリガーボタン（ファネルヘッダー右端） */
.svc-funnel-hd-row {
  display: flex; justify-content: flex-end;
  margin-bottom: 10px;
}
.btn-link-sm {
  background: none; border: none; cursor: pointer;
  font-size: 11px; color: #2563EB; padding: 0;
}
.btn-link-sm:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   財務タイムライン スケルトン CSS
   2026-05-06 追加
═══════════════════════════════════════════════════════════ */

/* ── 列単位状態クラス（背景着色廃止・境界線のみで表現） ── */
/* col-forecast / col-landing: 背景着色を廃止（白のまま） */

/* 実績→見込 境界線（強化版） */
.fin-table th.col-forecast-start,
.fin-table td.col-forecast-start {
  border-left: 2px solid var(--bdr) !important;
}

/* 旧セル単位クラス（参照コードが残っている間は無害に維持） */
td.cell-empty { color: var(--t4); }
td.col-landing-bg { }
th.current-col    { }
th[data-state="forecast"] { color: var(--t3); }
.next-fy-col { color: var(--t3); }
.fin-table th.col-fy-start,
.fin-table td.col-fy-start {
  border-left: 2px solid var(--bdr-s) !important;
}
/* FY ラベル文字は削除済み — 境界は border-left のみで表現 */
td.cell-actual   {}
td.cell-landing  {}
td.cell-forecast {}

/* ── 見込バッジ（廃止: 背景着色・バッジで意味を表現しない） ── */
/* .tl-col-badge / .tl-badge-forecast: 削除済み */

/* ── 年度境界列 ── */
.fin-table th.fy-boundary-col,
.fin-table td.fy-boundary-col { border-right: 2px solid rgba(22,163,74,0.4) !important; }
/* fy-boundary-col::after FY ラベル削除済み */

/* ── 状態マーク（thead用・控えめ） ── */
.tl-state-mark { display: inline-block; font-size: 9px; padding: 0 3px; border-radius: 2px; margin-left: 2px; vertical-align: middle; line-height: 14px; }
.tl-mark-actual   { background: rgba(59,130,246,0.08); color: #3B82F6; }
.tl-mark-forecast { background: var(--amber-d, rgba(245,158,11,0.1)); color: var(--amber); }
.tl-mark-landing  { background: var(--amber-d); color: var(--amber); }
/* ── 月次ヘッダー縦積みラッパー（詳細テーブル用） ── */
.fin-th-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; width: 100%; }
.fin-th-ym { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-table thead th .fin-th-wrap .tl-state-mark { margin-left: 0; }
/* .tl-mark-next-fy: 廃止（翌期表現はLayer Cで境界線・ラベル・グルーピングとして再実装） */

/* ── 表示期間バナー ── */
.fin-period-banner { font-size: 11px; color: var(--t3); padding: 6px 12px; background: var(--surf); border-bottom: 1px solid var(--bdr-s); }

/* ── PL 実績累計列（通常列・右固定なし・summary zone） ── */
.fin-col-ytd {
  min-width: 116px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border-left: 2px solid var(--bdr);
  white-space: nowrap;
}


/* ── 元帳/元帳推移 Utility ボタン（証跡レイヤ: 意思決定タブと階層が異なる） ── */
.fin-util-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: 11px;
  border: 1px solid var(--bdr); border-radius: 4px;
  background: transparent; color: var(--t3);
  cursor: pointer; white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.fin-util-btn:hover { border-color: var(--bdr-s); color: var(--t2); }
/* active: 枠線と文字色のみ。背景塗りなし・下線なし */
.fin-util-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: transparent;
  font-weight: 500;
}
/* 証跡ゾーン: 右端に配置し divider で意思決定レイヤと明示分離 */
.fin-util-zone {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
  padding-left: 12px;
  border-left: 1px solid var(--bdr);
}
/* 元帳推移ヘッダーのフィルタボタン: 白背景対応（dark bg 用の透明色を除去） */

/* ── 右フライアウト（Step 3 再設計: overlay + panel 構造） ── */
.fin-flyout {
  display: none; position: fixed; inset: 0; z-index: 899;
}
.fin-flyout.open { display: block; }

.fin-flyout-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.15);
}
.fin-flyout-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: clamp(420px, 34vw, 620px);
  background: var(--card-bg); border-left: 1px solid var(--bdr);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .2s ease;
  overflow: hidden; overscroll-behavior: contain;
}
.fin-flyout.open .fin-flyout-panel { transform: translateX(0); }

.fin-flyout-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--bdr); flex-shrink: 0;
}
.fin-flyout-hd-left { flex: 1; min-width: 0; }
.fin-flyout-hd-right { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.fin-flyout-title { font-size: 13px; font-weight: 600; color: var(--t1); }
.fin-flyout-meta  { font-size: 11px; color: var(--t3); margin-top: 2px; }

.fin-flyout-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
}
.fin-flyout-section { padding: 12px 16px; border-bottom: 1px solid var(--bdr-s); }

/* KPIカード行 */
.ffk-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 12px; }
.ffk-card { border: 1px solid var(--bdr-s); border-radius: var(--rs); padding: 10px 12px; }
.ffk-label { font-size: 11px; color: var(--t3); margin-bottom: 4px; }
.ffk-val { font-size: 15px; font-weight: 500; color: var(--t1); font-variant-numeric: tabular-nums; }
.ffk-na { font-size: 13px; color: var(--t4); font-weight: 400; }

/* セクション内テキスト */
.ffs-title { font-size: 12px; font-weight: 500; color: var(--t3); margin-bottom: 6px; }
.ffs-ph-note { font-weight: 400; opacity: 0.7; }
.ffs-ph-body { font-size: 12px; color: var(--t4); }

/* ドリルボタン */
.fin-flyout-drill-btn {
  font-size: 13px; color: var(--accent); background: none;
  border: 1px solid rgba(37,99,235,0.3); border-radius: var(--rs);
  padding: 6px 12px; cursor: pointer;
}
.fin-flyout-drill-btn:hover { background: var(--accent-d); }

/* 元帳ショートカットボタン・閉じるボタン */
.fin-flyout-ledger-btn {
  font-size: 12px; color: var(--t3); background: none;
  border: 1px solid var(--bdr); border-radius: var(--rs);
  padding: 3px 8px; cursor: pointer;
}
.fin-flyout-ledger-btn:hover { color: var(--t1); border-color: var(--t3); }
.fin-flyout-close {
  font-size: 14px; color: var(--t3); background: none;
  border: none; cursor: pointer; padding: 4px 6px; border-radius: var(--rs);
}
.fin-flyout-close:hover { background: var(--surf-h); color: var(--t1); }

/* ── 支払申請 会計化プレビュー フライアウト ── M4追加 */
#py-journal-flyout {
  position: fixed; top: 0; right: -520px; bottom: 0;
  width: 500px; z-index: 1100;
  background: var(--card-bg); border-left: 1px solid var(--bdr);
  display: flex; flex-direction: column;
  transition: right .2s ease;
  overflow: hidden;
}
#py-journal-flyout.open { right: 0; }
#py-journal-flyout .pjf-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--bdr);
  background: var(--surf); flex-shrink: 0;
}
#py-journal-flyout .pjf-hd-title { font-size: 13px; font-weight: 500; color: var(--t1); }
#py-journal-flyout .pjf-close {
  background: none; border: none; cursor: pointer;
  color: var(--t3); font-size: 18px; padding: 2px 6px; line-height: 1;
}
#py-journal-flyout .pjf-close:hover { color: var(--t1); }
#py-journal-flyout .pjf-body { flex: 1; overflow-y: auto; padding: 16px; }
#py-journal-flyout .pjf-meta {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  font-size: 12px; color: var(--t2); margin-bottom: 12px;
}
#py-journal-flyout .pjf-meta .pjf-meta-label { color: var(--t3); white-space: nowrap; }
#py-journal-flyout .pjf-summary {
  background: var(--surf); border-radius: 6px; border: 1px solid var(--bdr);
  padding: 10px 12px; margin-bottom: 14px; font-size: 12px;
}
#py-journal-flyout .pjf-summary-row {
  display: flex; justify-content: space-between; padding: 2px 0; color: var(--t2);
}
#py-journal-flyout .pjf-summary-row.total {
  font-weight: 500; color: var(--t1);
  border-top: 1px solid var(--bdr); margin-top: 4px; padding-top: 6px;
}
#py-journal-flyout .pjf-summary-row.alert { color: var(--danger); }
#py-journal-flyout .pjf-section-title {
  font-size: 11px; font-weight: 500; color: var(--t3);
  margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--bdr);
}
#py-journal-flyout .pjf-group {
  border: 1px solid var(--bdr); border-radius: 4px;
  margin-bottom: 8px; font-size: 12px; overflow: hidden;
}
#py-journal-flyout .pjf-group.has-review { border-color: #F59E0B; }
#py-journal-flyout .pjf-group-label {
  background: var(--surf); padding: 4px 10px;
  font-size: 11px; color: var(--t3); border-bottom: 1px solid var(--bdr);
  display: flex; align-items: center; gap: 6px;
}
#py-journal-flyout .pjf-jrow {
  display: grid; grid-template-columns: 36px 1fr 90px;
  padding: 4px 10px; gap: 6px; align-items: center;
}
#py-journal-flyout .pjf-jrow + .pjf-jrow { border-top: 1px solid var(--bdr); }
#py-journal-flyout .pjf-jrow.credit { background: #F9FAFB; }
#py-journal-flyout .pjf-side { font-size: 11px; color: var(--t3); }
#py-journal-flyout .pjf-acct { color: var(--t1); }
#py-journal-flyout .pjf-acct.unset { color: var(--danger); }
#py-journal-flyout .pjf-amt { text-align: right; font-variant-numeric: tabular-nums; }
#py-journal-flyout .pjf-chip {
  display: inline-block; font-size: 10px; font-weight: 500;
  padding: 1px 5px; border-radius: 10px;
  background: #FEF3C7; color: #92400E;
}
/* M6: ステータスチップ 3色 */
#py-journal-flyout .pjf-chip.pjf-chip-ok   { background: #d1fae5; color: #065f46; }
#py-journal-flyout .pjf-chip.pjf-chip-warn { background: #FEF3C7; color: #92400E; }
#py-journal-flyout .pjf-chip.pjf-chip-err  { background: #fee2e2; color: #991b1b; }
/* M7: 未解決理由チップ */
#py-journal-flyout .pjf-gap-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
#py-journal-flyout .pjf-gap-chip  { display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: 11px; background: #FEF3C7; color: #92400E;
  border: 1px solid #FCD34D; white-space: nowrap; }
/* M6: グループボーダー色 */
#py-journal-flyout .pjf-group.has-warning { border-color: #F59E0B; }
#py-journal-flyout .pjf-group.has-error   { border-color: var(--danger); }
/* M6: グループラベルをクリッカブルに */
#py-journal-flyout .pjf-group-label { cursor: pointer; }
#py-journal-flyout .pjf-group-label:hover { background: var(--blue-soft); }
/* M6: 折りたたみ */
#py-journal-flyout .pjf-group.collapsed > div:last-child { display: none; }
/* M6: jrow に4列目（ステータスチップ）追加 */
#py-journal-flyout .pjf-jrow { grid-template-columns: 36px 1fr 90px auto; }
#py-journal-flyout .pjf-rule-card {
  background: var(--surf); border-radius: 4px; border: 1px solid var(--bdr);
  padding: 8px 10px; margin-bottom: 6px; font-size: 11px;
  display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; color: var(--t2);
}
#py-journal-flyout .pjf-rule-label { color: var(--t3); }

/* M8: 会計化準備状態カード */
.pjf-ready-card    { margin: 8px 0; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--bdr); background: var(--bg); }
.pjf-ready-ok      { border-color: #16A34A; background: #F0FDF4; }
.pjf-ready-warn    { border-color: #EA580C; background: #FFF7ED; }
.pjf-ready-err     { border-color: #DC2626; background: #FEF2F2; }
.pjf-ready-title   { font-size: 12px; font-weight: 500; color: var(--t1); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.pjf-ready-badge   { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--surf); color: var(--t2); }
.pjf-ready-chips   { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.pjf-ready-chip    { font-size: 11px; padding: 2px 8px; border-radius: 12px; white-space: nowrap; }
.pjf-ready-chip-err  { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.pjf-ready-chip-warn { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.pjf-ready-preview { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--t3); }

/* 状態バッジ（flyout内・timeline共通） */
.fin-state-badge { display: inline-block; padding: 1px 7px; font-size: 11px; font-weight: 500; border-radius: var(--rs); }
.fin-state-actual   { background: var(--surf);     color: var(--t3); }
.fin-state-landing  { background: var(--amber-d);  color: var(--amber); }
.fin-state-forecast { background: var(--accent-d); color: var(--accent-t); }
.fin-state-empty    { background: var(--surf-h);   color: var(--t4); }

/* ── Overview ── */
.ov-section-hd { font-size: 12px; font-weight: 600; color: var(--t3); padding: 12px 0 4px; letter-spacing: .05em; }
.ov-mini-grid { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0 0 16px; }
.ov-mini-card { border: 1px solid var(--bdr); border-radius: var(--r); padding: 14px 16px; background: var(--card-bg); }
.ov-mini-card-hd { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.ov-mini-card-hd-left { display: flex; align-items: baseline; gap: 6px; }
.ov-mini-card-hd-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ov-cmp-slot { min-height: 0; }
.ov-mini-title { font-size: 13px; font-weight: 600; color: var(--t2); }
.ov-mini-unit  { font-size: 11px; font-weight: 400; color: var(--t4); }
.ov-month-row { display: flex; }
.ov-month-col { display: flex; flex-direction: column; align-items: flex-end; width: 80px; flex-shrink: 0; padding: 0 4px; box-sizing: border-box; }
.ov-month-col.fy-boundary-col { border-right: 2px solid rgba(22,163,74,0.4); }
.ov-month-badge-ph { height: 14px; }
.ov-month-col .tl-state-mark { white-space: nowrap; display: block; text-align: right; }
.ov-month-ym { font-size: 11px; color: var(--t3); white-space: nowrap; font-variant-numeric: tabular-nums; margin-top: 2px; text-align: right; }
.ov-month-val { font-size: 11px; color: var(--t1); white-space: nowrap; font-variant-numeric: tabular-nums; margin-top: 2px; text-align: right; }
.ov-month-col.col-next-fy .ov-month-ym,
.ov-month-col.col-next-fy .ov-month-val { color: var(--t4); }
.col-next-fy { color: var(--t4) !important; }
.ov-nav-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 12px 0 16px; }
.ov-nav-card { border: 1px solid var(--bdr); border-radius: var(--r); padding: 12px; background: var(--card-bg); text-align: left; cursor: pointer; width: 100%; }
.ov-nav-card:hover { border-color: var(--accent-t); background: var(--accent-d); }
.ov-nav-title { font-size: 14px; font-weight: 600; color: var(--t1); margin-bottom: 4px; }
.ov-nav-sub   { font-size: 12px; color: var(--t3); }
.ov-placeholder-box { border: 1px dashed var(--bdr); border-radius: var(--r); padding: 14px 16px; background: var(--surf); }
.ov-ph-label { font-size: 11px; font-weight: 600; color: var(--t3); margin-bottom: 4px; }
.ov-ph-desc  { font-size: 12px; color: var(--t3); line-height: 1.7; }

/* ── Overview KPI 比較帯 ── */
.ov-kpi-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--bdr-s); border-radius: var(--r);
  overflow: hidden; margin-bottom: 16px;
}
.ov-kpi-band-item {
  padding: 14px 16px; border-right: 1px solid var(--bdr-s);
}
.ov-kpi-band-item:last-child { border-right: none; }
.ov-kb-label { font-size: 11px; color: var(--t3); margin-bottom: 6px; }
.ov-kb-unit  { font-size: 10px; color: var(--t4); margin-left: 4px; }
.ov-kb-val   { font-size: 20px; font-weight: 500; color: var(--t1); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.ov-kb-diff  { font-size: 11px; color: var(--t3); }
.ov-kb-na    { color: var(--t4); }
.future-slot { height: 28px; }

/* ── 財務ページ密度（#page-financials 専用） ── */
#page-financials .fin-ctrl-bar { padding: 6px 12px !important; margin-bottom: 0 !important; }
#page-financials .fiscal-period-row { padding: 2px 12px; }
#page-financials .fin-period-banner { padding: 4px 12px; font-size: 12px; }
#page-financials .ov-section-hd { margin: 12px 0 6px; font-size: 12px; }

/* ── 元帳: 列ヘッダーフィルタアイコン ── */
.lhd-label { vertical-align: middle; }
.lhd-filter-btn {
  opacity: 0.35; background: none; border: none; cursor: pointer;
  padding: 0 0 0 3px; color: var(--t3);
  transition: opacity .15s; vertical-align: middle;
}
.lhd-filter-btn:hover { opacity: 1; color: var(--blue); }
.lhd-filter-active { opacity: 1 !important; color: var(--blue) !important; }

/* ── 元帳: 共有ポーバー ── */
.lfd-popover {
  display: none; position: fixed; z-index: 1000;
  background: var(--card-bg); border: 1px solid var(--bdr);
  border-radius: var(--r); width: 260px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  flex-direction: column; overflow: hidden;
}
.lfd-popover.open { display: flex; }
.lfd-popover .lfd-sinp {
  padding: 8px 10px; border: none;
  border-bottom: 1px solid var(--bdr-s);
  font-size: 13px; outline: none; width: 100%; box-sizing: border-box;
  background: var(--card-bg); color: var(--t1);
}
.lfd-popover .lfd-opts { overflow-y: auto; max-height: 240px; padding: 4px 0; }

/* ── 元帳: 集計バー ── */
.ledger-filter-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 5px 12px; background: var(--surf);
  border-bottom: 1px solid var(--bdr-s);
  font-size: 12px; color: var(--t3); flex-shrink: 0;
  /* 元帳/元帳推移でヘッダーY座標を揃えるため固定高さ */
  box-sizing: border-box; height: 31px;
}
.lfb-num { font-variant-numeric: tabular-nums; color: var(--t1); }
.lfb-count { font-variant-numeric: tabular-nums; color: var(--t2); }
.lfb-reset-btn {
  margin-left: auto; background: none; border: none;
  color: var(--t3); cursor: pointer; font-size: 12px;
}
.lfb-reset-btn:hover { color: var(--blue); }

/* ── Evidence（確認系レイヤー） ── */
.ev-category { padding: 16px; border-bottom: 1px solid var(--bdr-s); }
.ev-category-title { font-size: 11px; font-weight: 600; color: var(--t3); margin-bottom: 10px; letter-spacing: .05em; text-transform: uppercase; }
.ev-items { display: flex; flex-direction: column; gap: 6px; }
.ev-item-btn { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--bdr); border-radius: var(--rs); background: var(--card-bg); cursor: pointer; }
.ev-item-btn:hover { border-color: var(--accent-t); background: var(--accent-d); }
.ev-item-name { font-size: 13px; font-weight: 500; color: var(--t1); margin-bottom: 2px; }
.ev-item-desc { font-size: 11px; color: var(--t3); }
.ev-item-ph { padding: 10px 12px; border: 1px dashed var(--bdr); border-radius: var(--rs); background: var(--surf); }
.ev-item-ph .ev-item-name { color: var(--t3); }
.ev-item-ph .ev-item-desc { color: var(--t4); font-style: italic; }

/* ══════════════════════════════════════════════════════════════
   経営テーマ（management-theme） — STEP1
══════════════════════════════════════════════════════════════ */
.mt-theme-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px;
  padding: 80px 24px; text-align: center;
}
.mt-theme-empty-icon { opacity: .5; }
.mt-theme-empty-title {
  font-size: 15px; font-weight: 500; color: var(--t1);
}
.mt-theme-empty-body {
  font-size: 13px; color: var(--t3); line-height: 1.7;
}
.mt-theme-empty-cta { margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════
   未来変更テーマ（future-design） — STEP1
══════════════════════════════════════════════════════════════ */

/* A: 経営テーマ コンテキスト */
.fd-theme-context {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--rs);
  margin-bottom: 20px;
}
.fd-theme-context-inner { display: flex; align-items: center; gap: 12px; }
.fd-theme-context-label {
  font-size: 11px; font-weight: 500; color: var(--t3);
  text-transform: uppercase; letter-spacing: .05em;
  flex-shrink: 0;
}
.fd-theme-context-empty { font-size: 13px; color: var(--t4); }
.fd-theme-context-link {
  font-size: 12px; color: var(--blue); text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
}
.fd-theme-context-link:hover { text-decoration: underline; }

/* B: サマリーカード */
.fd-summary-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.fd-summary-card {
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--bdr);
  border-radius: var(--rs);
  text-align: center;
}
.fd-summary-card-value {
  font-size: 24px; font-weight: 500; color: var(--t3);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.fd-summary-card-label {
  font-size: 11px; color: var(--t3);
}

/* C: テーマ一覧 空状態 */
.fd-list-section {
  padding: 48px 24px;
  background: var(--card-bg);
  border: 1px solid var(--bdr);
  border-radius: var(--rs);
  margin-bottom: 24px;
}
.fd-list-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center;
}
.fd-list-empty-title {
  font-size: 14px; font-weight: 500; color: var(--t2);
}
.fd-list-empty-body {
  font-size: 13px; color: var(--t3); line-height: 1.7;
}
.fd-list-empty-cta { margin-top: 4px; }

/* D: 暫定導線バナー */
.fd-interim-banner {
  text-align: right;
  padding: 8px 0;
}
.fd-interim-banner a {
  font-size: 12px; color: var(--t3); text-decoration: none;
}
.fd-interim-banner a:hover { color: var(--blue); text-decoration: underline; }

/* レスポンシブ: サマリーカードを 3列→2列に折り返し */
@media (max-width: 900px) {
  .fd-summary-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .fd-summary-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── WFホーム ──────────────────────────────────────────────── */
.wf-pane-hidden { display: none !important; }

.wf-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--bdr);
  margin-bottom: 16px;
}
.wf-tab-btn {
  padding: 8px 20px;
  font-size: 13px;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--t2);
  font-weight: 400;
}
.wf-tab-btn.active {
  border-bottom-color: var(--blue);
  color: var(--blue);
  font-weight: 600;
}

.wf-section-label {
  font-size: 12px;
  color: var(--t3);
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.wf-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.wf-section-link {
  font-size: 11px;
  color: var(--blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* 今やること */
.wf-todo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.wf-todo-card {
  background: var(--card-bg);
  border: 1px solid var(--bdr);
  border-radius: var(--rs);
  padding: 14px 16px;
  cursor: pointer;
}
.wf-todo-card:hover { background: var(--blue-soft); }
.wf-todo-card.has-action { border-left: 3px solid var(--blue); }
.wf-todo-card-label {
  font-size: 11px;
  color: var(--t3);
  margin-bottom: 8px;
}
.wf-todo-card-count {
  font-size: 24px;
  font-weight: 600;
  color: var(--t1);
}
.wf-todo-card.has-action .wf-todo-card-count { color: var(--blue); }

/* よく使う申請 */
.wf-fav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.wf-fav-card {
  background: var(--card-bg);
  border: 1px solid var(--bdr);
  border-radius: var(--rs);
  padding: 14px 16px;
  cursor: pointer;
}
.wf-fav-card:hover { background: var(--blue-soft); }
.wf-fav-card-name {
  font-size: 13px;
  color: var(--t1);
  font-weight: 500;
  margin-bottom: 4px;
}
.wf-fav-card-cta {
  font-size: 11px;
  color: var(--blue);
}

/* 最近使った申請 */
.wf-recent-types-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.wf-recent-type-card {
  min-width: 140px;
  flex-shrink: 0;
  background: var(--card-bg);
  border: 1px solid var(--bdr);
  border-radius: var(--rs);
  padding: 10px 14px;
  cursor: pointer;
}
.wf-recent-type-card:hover { background: var(--blue-soft); }
.wf-recent-type-name { font-size: 12px; color: var(--t1); font-weight: 500; }
.wf-recent-type-date { font-size: 11px; color: var(--t3); margin-top: 3px; }

/* すべての申請 */
.wf-all-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.wf-all-types-cat-label {
  font-size: 11px;
  color: var(--t3);
  font-weight: 600;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--bdr);
}
.wf-all-types-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 13px;
  color: var(--t1);
  cursor: pointer;
  border-bottom: 1px solid var(--bdr);
}
.wf-all-types-item:hover { color: var(--blue); }
.wf-all-types-item-arrow { color: var(--t4); font-size: 11px; }

/* ── WF一覧 ────────────────────────────────────────────── */

/* サマリー行 */
.wf-list-summary {
  display: flex;
  align-items: baseline;
  margin-bottom: 12px;
}
.wf-list-summary-item {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 0 16px;
  border-left: 1px solid var(--bdr);
  cursor: pointer;
}

/* ── 採用管理: 誰待ちバッジ ── */
.recruit-who-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: var(--surf);
  color: var(--t3);
}
.recruit-who-badge.hr   { background: var(--blue-soft); color: var(--blue); }
.recruit-who-badge.cand { background: #FEF9C3; color: #B45309; }
.recruit-who-badge.done { color: var(--t4); background: transparent; }

/* ── 採用管理: 充足率バー ── */
.recruit-fill-bar {
  height: 4px;
  background: var(--bdr);
  border-radius: 2px;
  margin-top: 3px;
  overflow: hidden;
}
.recruit-fill-bar-inner {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
  transition: width 0.3s;
}
.recruit-fill-bar-inner.full { background: var(--success); }
.recruit-fill-bar-inner.low  { background: var(--danger); }

/* ── 採用計画: 未充足影響・期待インパクト 2行ellipsis ── */
.recruit-plan-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}
.wf-list-summary-item:first-child {
  padding-left: 0;
  border-left: none;
}
.wf-list-summary-item:hover .wf-list-summary-label { color: var(--blue); }
.wf-list-summary-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--t1);
  line-height: 1;
}
.wf-list-summary-value.has-action { color: var(--blue); }
.wf-list-summary-label {
  font-size: 12px;
  color: var(--t3);
}

/* テーブルスクロールコンテナ */
.wf-table-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 260px);
  min-height: 200px;
}

/* 自分が対応すべき行 */
.wf-row-myturn > td { background: var(--blue-soft); }
.wf-row-myturn > td:first-child { border-left: 3px solid var(--blue); }
.wf-row-myturn:hover > td { background: var(--blue-soft) !important; }

/* ステータスバッジ */
.wf-badge { font-size:11px;padding:2px 8px;border-radius:10px;white-space:nowrap; }
.wf-badge-urgent         { background:#ECFDF5;color:#15803D;border:1px solid #86EFAC;font-weight:600; }
.wf-badge-urgent-overdue { background:#ECFDF5;color:#15803D;border:1px solid #FCA5A5;font-weight:600; }
.wf-badge-draft          { background:var(--surf);color:var(--t3);border:1px solid var(--bdr); }
.wf-badge-pending        { background:#FFFBEB;color:#CA8A04;border:1px solid #FDE68A; }
.wf-badge-pending-overdue{ background:#FFFBEB;color:#92400E;border:1px solid #FCA5A5; }
.wf-badge-rejected       { background:#FEF2F2;color:#DC2626;border:1px solid #FECACA; }
.wf-badge-approved       { background:var(--surf);color:var(--t3);border:1px solid var(--bdr); }
.wf-badge-default        { background:var(--surf);color:var(--t2);border:1px solid var(--bdr); }

/* テーブル行・セル */
.wf-list-th {
  padding: 8px 10px;
  font-size: 11px;
  color: var(--t3);
  font-weight: 500;
  border-bottom: 1px solid var(--bdr);
  white-space: nowrap;
  text-align: left;
}
.wf-list-td {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--t2);
  white-space: nowrap;
  border-bottom: 1px solid var(--bdr);
}
.wf-list-td-subject {
  font-size: 13px;
  color: var(--t1);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-type-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: var(--rs);
  white-space: nowrap;
}

/* sidebar-user-mode: 左下ユーザーエリア有効時は右上を非表示（fallback: _initSidebarUser() 失敗時は topbar-right が残る） */
body.sidebar-user-mode .topbar-right { display: none !important; }

/* ── world-map 承認確認モーダル ── */
.wm-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:2000;display:flex;align-items:center;justify-content:center;}
.wm-modal-box{background:var(--card-bg);border:1px solid var(--bdr);border-radius:10px;padding:28px 32px;min-width:340px;max-width:480px;}
.wm-modal-msg{font-size:15px;font-weight:500;color:var(--t1);margin-bottom:10px;}
.wm-modal-sub{font-size:13px;color:var(--t3);line-height:1.6;margin-bottom:24px;white-space:pre-line;}
.wm-modal-actions{display:flex;gap:8px;justify-content:flex-end;}