/* 固定費・変動費診断 */

/* ============================================================
   固定費・変動費診断
   ============================================================ */
.cost-h3 { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--color-text); margin: 22px 0 10px; }
.cost-h3 .cost-sub { font-size: var(--text-2xs); font-weight: var(--fw-normal); color: var(--color-text-subtle); }
.cost-note { font-size: var(--text-sm); color: var(--color-text-subtle); background: var(--color-bg); border-radius: var(--radius-lg); padding: 14px 16px; }
.cost-rule { display: grid; gap: 14px; max-width: 720px; }
.cost-rule-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text); margin-bottom: 5px; }
.cost-rule-val.ok { color: var(--color-success-text); }
.cost-rule-val.bad { color: var(--color-danger-text); }
.cost-rule-amt { font-size: var(--text-2xs); font-weight: var(--fw-medium); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.cost-rule-bar { position: relative; height: 14px; background: var(--color-bg); border-radius: var(--radius-md); overflow: hidden; }
.cost-rule-bar i { display: block; height: 100%; border-radius: var(--radius-md); transition: width 0.3s; }
.cost-bar-needs { background: #6366f1; }
.cost-bar-wants { background: #f59e0b; }
.cost-bar-save { background: #10b981; }
.cost-rule-target { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--color-text); opacity: 0.65; z-index: 1; }
.cost-rule-note { font-size: var(--text-2xs); margin-top: 4px; }
.cost-rule-note.ok { color: var(--color-success-text); }
.cost-rule-note.bad { color: var(--color-warning-text); }
#costPanel .cost-table td, #costPanel .cost-table th { font-variant-numeric: tabular-nums; vertical-align: middle; }
.cost-row-fixed td:first-child { border-left: 3px solid #6366f1; }
.cost-row-variable td:first-child { border-left: 3px solid #f59e0b; }
.cost-row-excluded { opacity: 0.6; }
.cost-row-excluded td:first-child { border-left: 3px solid var(--color-border); }
/* カテゴリ分類：見出しと保存を同じ行に置く＝変更するセレクトから保存が見える。
   以前はページ最上部にあり、17行あるセレクトの下端からは 1685px 上だった。 */
.cost-cat-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  /* 左右の見出しを同じ器に入れて高さを揃える＝左だけボタンが入るぶん背が高く、
     見出しの上端がずれていた（右も同じ .cost-cat-head で包む） */
  min-height: 34px; margin: 22px 0 10px;
}
.cost-cat-head .cost-h3 { margin: 0; }
.cost-save { margin-left: auto; font-size: var(--text-xs); padding: 6px 14px; }
.cost-save:disabled { opacity: 0.45; cursor: not-allowed; }
/* 「未保存」も表の側に出す。空のときは詰めない（ボタンの位置が動かないように） */
.cost-dirty { font-size: var(--text-2xs); color: var(--color-warning-text); font-weight: var(--fw-semibold); }

.cost-sel { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-xs); background: var(--color-surface); }

/* カテゴリ分類の表 ＋ その結果を1つの行にする。
   **表だけを狭めない**＝3列の表を単体で細くすると上下のカード（KPIの帯・月次推移）と
   右端が揃わず、読みやすい幅ではなく作りかけに見える。隣に「分類した結果どう積み上がったか」
   を置くと右端が揃ったまま、余った幅が情報に変わる。 */
.cost-cat-cols {
  display: grid;
  /* 素の 1fr はトラックの下限が中身の min-content になるので minmax(0, …) で受ける */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  margin-top: var(--sp-4);
}
@media (max-width: 1100px) { .cost-cat-cols { grid-template-columns: minmax(0, 1fr); } }

/* 表はカテゴリのぶんだけ縦に長いので、結果のほうは見えたまま追従させる */
.cost-side { position: sticky; top: var(--sp-4); display: grid; gap: var(--sp-5); }

.cost-bd-grp { display: grid; gap: 7px; }
.cost-bd-head { display: flex; align-items: baseline; gap: 7px; font-size: var(--text-sm); }
.cost-bd-dot { width: 9px; height: 9px; border-radius: var(--radius-xs); flex-shrink: 0; align-self: center; }
/* 色は 50/30/20 の帯・月次推移チャートと同じもの＝同じ分類が画面内で別の色にならない */
.cost-bd-fixed { background: #6366f1; }
.cost-bd-variable { background: #f59e0b; }
.cost-bd-excluded { background: #94a3b8; }
.cost-bd-label { font-weight: var(--fw-bold); color: var(--color-text); }
.cost-bd-n { font-size: var(--text-2xs); color: var(--color-text-subtle); }
.cost-bd-amt { margin-left: auto; font-weight: var(--fw-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; }
.cost-bd-pct { font-size: var(--text-2xs); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }
.cost-bd-bar { display: flex; gap: 1px; height: 12px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); }
.cost-bd-bar i { display: block; height: 100%; }
.cost-bd-list { list-style: none; margin: 3px 0 0; padding: 0; display: grid; gap: 2px; }
.cost-bd-list li { display: flex; align-items: baseline; gap: 8px; font-size: var(--text-xs); color: var(--color-text-muted); }
.cost-bd-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost-bd-v { color: var(--color-text); font-variant-numeric: tabular-nums; }
.cost-bd-s { color: var(--color-text-subtle); font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }
.cost-bd-none { font-size: var(--text-xs); color: var(--color-text-subtle); margin: 0; }