/* 共通の部品：サマリーカード・列の表示切替・グラフ・表（.balance-table）・ページャ・KPIストリップ・列の型・年の帯（yhist） */

/* ============================================================
   Summary Cards
   ============================================================ */
.summary {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.summary-card {
  background: var(--color-surface);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
}

.summary-card .label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.summary-card .value {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.summary-card .sub-value {
  font-size: var(--text-xs);
  color: var(--color-warning-text);
  margin-top: 2px;
  font-weight: var(--fw-medium);
}

/* ============================================================
   Column Toggle
   ============================================================ */
.col-toggle {
  background: var(--color-surface);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-border);
  margin-bottom: var(--sp-5);
}

.col-toggle summary {
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  user-select: none;
}

.col-toggle .cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.col-toggle .cols label {
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.col-toggle .cols label:has(input:checked) {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
  color: var(--color-primary);
}

.col-toggle .cols input {
  accent-color: var(--color-primary);
}

/* ============================================================
   Charts
   ============================================================ */
.charts {
  display: grid;
  /* `minmax(0, 1fr)`＝素の 1fr はトラックの下限が中身の min-content になるため、
     凡例やチャートの最小幅がそのままトラック幅になって画面外へ広がる */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
  align-items: start;
}

/* 列の少ない表は、幅を削るのではなく**相棒を隣に置いて**1つの行にする。
   表だけを狭めると上下のカードと右端が揃わず作りかけに見えるが、隣に並ぶと
   右端が揃ったまま余った幅が情報に変わる。左＝数字を読む（打つ）表、右＝その表の意味。
   1100px を切ったら縦に積む。 */
.pair-cols {
  display: grid;
  /* 素の 1fr はトラックの下限が中身の min-content になるので minmax(0, …) で受ける */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 1100px) { .pair-cols { grid-template-columns: minmax(0, 1fr); } }

/* キャッシュフロー予測のリード。以前は同じ数字をKPIカード4枚で先に出していたが、
   4枚とも下の表にそのまま載っている数字だった＝枠が答える問いを1行で言う。 */
.cf-lead {
  margin: 0 0 var(--sp-4); font-size: var(--text-base); color: var(--color-text-muted);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
}
.cf-lead b { font-size: var(--text-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.cf-lead b.positive { color: var(--color-success-text); }
.cf-lead b.negative { color: var(--color-danger-text); }
.cf-lead span { font-size: var(--text-xs); color: var(--color-text-subtle); }

/* 表は行数ぶん縦に伸びるので、相棒は見えたまま追従させる */
.pair-side { position: sticky; top: var(--sp-4); }

/* 合計セルに予算との差を畳む。月予算/予算/差額の3列は 327px を使い、そのぶん
   月の列が3本減っていた。`差額 = 予算 − 実績` なので実績と差額があれば予算は
   復元でき、3列で言っていたことは実質1.5列ぶんしかない。 */
/* 2つのマトリクスは**上下で横に送る**ので、同じ月が同じ位置に来ないと見比べられない。
   列幅を内容任せにすると表ごとに違う幅になるので、両方とも固定レイアウトで
   「見出し列・合計列は固定、期間の列は等分」にそろえる。 */
#cat-month-table, #inc-item-table { table-layout: fixed; width: 100%; }
#cat-month-table th:first-child, #inc-item-table th:first-child { width: 152px; }
#cat-month-table th:last-child, #inc-item-table th:last-child { width: 168px; }
/* 期間が1つのときは合計列が無い＝最後の列は期間の列なので、幅を戻して等分に混ぜる */
#cat-month-table th:first-child:last-child, #inc-item-table th:first-child:last-child { width: auto; }

/* 列が多い面なので、読む表の既定の余白のままだと面が大きくなりすぎる。
   ここだけ詰める（読む表の既定は変えない）＝字が小さいぶん2段にしても密度が保てる。 */
#cat-month-table th, #inc-item-table th { padding: 7px 8px; font-size: var(--text-2xs); }
#cat-month-table td, #inc-item-table td { padding: 5px 8px; font-size: var(--text-xs); }

/* 予算との差は金額の**下**に置く＝横に並べると1つのセルに数字が2つ並んで、
   どちらが実績か分からなくなる。上が実績・下が差、という関係を段で示す。
   色は1つの規則にそろえる＝超過は赤、予算内は控えめな灰（緑を足すと3すくみになる）。 */
.bal-sub {
  display: block; font-size: var(--text-3xs); line-height: 1.3; margin-top: 1px;
  color: var(--color-text-subtle); font-variant-numeric: tabular-nums;
}
.bal-sub.over { color: var(--color-danger-text); }
.bal-cat-cell .bal-sub { font-weight: var(--fw-normal); }
.bal-mx-legend { font-size: var(--text-2xs); color: var(--color-text-subtle); margin: 6px 2px 0; }
.bal-mx-legend b { font-weight: var(--fw-semibold); color: var(--color-text); }
.bal-mx-legend .bal-sub { display: inline; }
.bal-mx-legend i { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-xs); vertical-align: -1px; margin: 0 3px 0 6px; background: rgba(231, 76, 60, 0.3); }

/* 合計の見出しは2段（合計／予算との差）＝下の段が何の数字かを列の頭で言う。
   濃紺の地なので、本文の `.bal-sub` の色は使えない。 */
.bal-total-th span { display: block; font-size: var(--text-3xs); font-weight: var(--fw-normal); color: rgba(255, 255, 255, 0.7); }
.bal-total-cell { white-space: nowrap; }

/* 相棒を隠したときは1列に戻す（空のトラックを残さない） */
.pair-cols--solo { grid-template-columns: minmax(0, 1fr); }
/* 期間が短いとき（列が1〜2本）だけ、2つのクロス集計を横に並べる。
   収入と支出を同じ月で見比べられて、画面も締まる。長い期間では半分の幅に
   2〜3ヶ月しか入らないので縦に積む＝幅は中身が決める。 */
/* 高さは中身が決める＝伸ばすと、行数の少ないほう（収入）に大きな空白ができる */
.bal-mx-row--pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 1100px) { .bal-mx-row--pair { grid-template-columns: minmax(0, 1fr); } }
/* 中の余白は grid の gap に任せるが、**下の枠との間は器が持つ**＝パネルの
   margin を消すだけだと、次のキャッシュフロー予測がくっついてしまう。 */
.bal-mx-row--pair .balance-panel { margin-bottom: 0; }
.bal-mx-row--pair { margin-bottom: var(--sp-5); }

/* 収支サマリーの2つのクロス集計も**横スクロールを出さない**（窓＋◀▶）。
   ナビとボタンはカード請求と同じ部品（.card-mx-nav / .card-mx-btn）を使う。 */
#incItemPanel .table-wrapper, #catMonthPanel .table-wrapper { overflow-x: hidden; }
#incItemPanel .balance-table td:first-child,
#catMonthPanel .balance-table td:first-child {
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 収支サマリー: 収支の推移を表の隣へ移したので、残る3枚は3列に置く */
.charts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .charts--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.chart-card {
  background: var(--color-surface);
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-border);
}

.chart-card h2 {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============================================================
   Tables
   ============================================================ */
.table-wrapper {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-border);
  overflow-x: auto;
}


/* **`th` の `position: sticky` はこのアプリではほぼ効かない。** `.table-wrapper` が
   `overflow-x: auto` を持つ＝スクロール容器になるので、`top: 0` は「縦に動かない容器」の
   上端を指す。効くのは自前で `overflow-y` を持つ器（`max-height` を付けた表）だけ。
   貼り付いた時だけ影を出す仕組みも作ってみたが、発火する場所がほぼ無いので外した
   （見出しに面の色を持たせておくことは、効く器のために必要なので残す）。 */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

th {
  /* **見出しは面。ただし塗り潰しではなく、下へ抜けていく場**＝白い本体へ溶けるので
     ブロックとして居座らない。スティッキーなので不透明であることが必須（下の行が透ける）。 */
  background: linear-gradient(180deg, var(--color-th-field) 0%, var(--color-th-field-2) 100%);
  color: var(--color-th-fg);
  padding: 11px var(--sp-3) 10px;
  text-align: left;
  position: sticky;
  top: 0;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: 0.045em;
  border-bottom: 1px solid var(--color-th-edge);
  transition: background 0.14s, color 0.14s;
}

th:hover {
  background: linear-gradient(180deg, var(--color-th-tint-2) 0%, var(--color-th-field) 100%);
  color: var(--color-text);
}

th .si {
  margin-left: 4px;
  font-size: var(--text-3xs);
  opacity: 0.7;
}

td {
  padding: 10px var(--sp-3);
  border-bottom: 1px solid var(--color-row-line);
  white-space: nowrap;
  color: var(--color-text);
}

td a {
  color: var(--color-primary);
  text-decoration: none;
}

td a:hover {
  text-decoration: underline;
}

tbody tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background: var(--color-row-hover);
}
tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--color-row-rail);
}

.tr {
  text-align: right;
}

/* ============================================================
   Pagination
   ============================================================ */
.pg {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.pg button {
  padding: 6px var(--sp-3);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font);
  color: var(--color-text-muted);
  transition: background 0.12s, border-color 0.12s;
}

.pg button:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
  color: var(--color-primary);
}

.pg button:disabled {
  opacity: 0.35;
  cursor: default;
  background: var(--color-surface);
}

.pg button:disabled:hover {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.pg span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ページ送り（<< < n/N > >>）だけをまとめた入れ物。1ページしかない時にここだけ
   隠す＝**表示件数の切替は常に残る**（ページャごと隠すと「全」を選んだ瞬間に
   切替そのものが消えて、リロードするまで戻せなくなる）。`display:contents` で
   `.pg` の flex の並び・gap は包む前と変わらない。 */
.pg-nav {
  display: contents;
}

/* ============================================================
   Balance Panel
   ============================================================ */
.balance-panel {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-border);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
/* 最後の1枚は下の余白を持たない＝ページの下は #main-content の padding だけにする。
   両方が効いていると下に40pxの空きができ、中身が画面に収まっているのに少しだけ
   スクロールできるページになっていた（価格ウォッチの商品詳細など）。
   対象はタブの直下と、その中の見方の枠（予算の月次/年次、純資産の表示/入力）の直下だけ。
   それより内側の「枠の最後」は後ろに次のカードが続くことがある（収支の #bal-mx-row）。 */
#main-content > * > .balance-panel:last-child,
#main-content > * > div:not(#bal-mx-row) > .balance-panel:last-child { margin-bottom: 0; }

.balance-panel h2 {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: var(--sp-3);
}

/* 月別/年別などの排他ビュー切替はセグメント意匠で統一（カレンダーの .cal-mode-seg・
   期間カードの .pnav-unit-row と同系。隣の期間セグメントと調和させる） */
.balance-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-4);
}

.balance-toggle button {
  padding: 5px 14px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.balance-toggle button:hover:not(.active) {
  color: var(--color-primary);
}

.balance-toggle button.active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-xs);
}

.balance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  /* **数字は全部の表で桁を揃える**＝金額が縦に並ぶ表で幅の違う数字が混ざると、
     桁の位置がずれて大小が読めない。以前は5つの面にだけ個別に指定していた。 */
  font-variant-numeric: tabular-nums;
}

.balance-table th {
  /* **面の色は外せない**＝素の `th` から `position: sticky` を継いでいるので、透明にすると
     見出しの下を行が通り抜ける。以前は濃紺のベタ塗りがたまたま目隠しを兼ねていた。 */
  background: linear-gradient(180deg, var(--color-th-field) 0%, var(--color-th-field-2) 100%);
  color: var(--color-th-fg);
  padding: 10px var(--sp-3) 9px;
  text-align: right;
  cursor: default;
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: 0.045em;
  border-bottom: 1px solid var(--color-th-edge);
}

.balance-table th:first-child {
  text-align: left;
}

.balance-table td {
  padding: 9px var(--sp-3);
  border-bottom: 1px solid var(--color-row-line);
  text-align: right;
  white-space: nowrap;
}

/* 最後の行の罫は引かない＝器の縁が閉じているので、線が1本余って見える */
.balance-table tbody tr:last-child td { border-bottom: none; }
.balance-table tfoot tr:last-child td { border-bottom: none; }

.balance-table td:first-child {
  text-align: left;
  font-weight: var(--fw-medium);
}

/* **ホバーは掴んだ感じにする**＝面を平らに塗るだけでは「選べる」ことしか伝わらない。
   左端に軌道を出すと、どの行を持ち上げたのかが端から端まで追える。
   **面にグラデーションは使えない**＝`td` ごとに描き直されるので列の境目で縞になる
   （`tr` に置けば行を貫くが、独自の背景を持つセル＝ヒートマップ・入力列に覆われる）。 */
.balance-table tbody tr:hover td {
  background: var(--color-row-hover);
}
.balance-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--color-row-rail);
}

.balance-table .positive {
  color: var(--color-text);
}

.balance-table .negative {
  color: var(--color-danger-text);
}

.budget-heatmap-table {
  border-collapse: collapse;
  font-size: var(--text-xs);
  white-space: nowrap;
}

.budget-heatmap-table th {
  background: linear-gradient(180deg, var(--color-th-field) 0%, var(--color-th-field-2) 100%);
  color: var(--color-th-fg);
  padding: 8px 8px;
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: 0.035em;
  border-bottom: 1px solid var(--color-th-edge);
}

.budget-heatmap-table td {
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid rgba(0,0,0,0.04);
  line-height: 1.3;
}

.budget-heatmap-table tbody tr:hover td {
  filter: brightness(0.95);
}

/* **合計は見出しの鏡**＝同じ面を上下反転させて置く。表は上下を閉じた1つのものになり、
   間の行だけが白い＝「どこからどこまでが1枚か」が塗りで分かる（罫を足さずに済む）。 */
.balance-table tfoot td {
  border-top: 1px solid var(--color-th-edge);
  font-weight: var(--fw-bold);
  background: linear-gradient(180deg, var(--color-th-field-2) 0%, var(--color-th-field) 100%);
}

/* ============================================================
   Chart Utilities
   ============================================================ */
.chart-full-width { grid-column: 1 / -1; }

#app.single-month .charts .chart-full-width {
  grid-column: auto;
}

.monthly-chart-wrap { position: relative; height: 240px; }
.monthly-chart-wrap canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

.inv-chart-wrap { position: relative; height: 280px; }
.inv-chart-wrap canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

.sim-chart-wrap { position: relative; height: 260px; }
.sim-chart-wrap canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

#bump-chart-card { min-height: 380px; position: relative; }
#bump-chart-card canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

#budget-trend-chart-card { min-height: 280px; position: relative; }
#budget-trend-chart-card canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

/* ============================================================
   Fund Badges
   ============================================================ */
.fund-badge {
  display: inline-block;
  font-size: var(--text-3xs);
  font-weight: var(--fw-bold);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  margin-right: 4px;
  vertical-align: middle;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.fund-badge.new-nisa { background: var(--color-danger);   color: var(--color-text-on-accent); }
.fund-badge.old-nisa { background: var(--color-text-muted);               color: var(--color-text-on-accent); }
.fund-badge.non-nisa { background: var(--color-primary);  color: var(--color-text-on-accent); }

/* ============================================================
   汎用KPIストリップ（予算・投資等で共有。ライト・アクセントバー付き）
   ============================================================ */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--kpi-accent, var(--color-primary));
}
.kpi-card.kpi-hero { grid-column: span 2; }
.kpi-card.kpi-pos { --kpi-accent: var(--color-success); }
.kpi-card.kpi-neg { --kpi-accent: var(--color-danger); }
.kpi-card.kpi-warn { --kpi-accent: var(--color-warning); }
.kpi-label { font-size: var(--text-2xs); color: var(--color-text-muted); letter-spacing: 0.02em; margin-bottom: 5px; }
.kpi-val { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--color-text); line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-card.kpi-hero .kpi-val { font-size: var(--text-xl); }
.kpi-sub { font-size: var(--text-2xs); color: var(--color-text-subtle); margin-top: 3px; font-variant-numeric: tabular-nums; }
.val-pos { color: var(--color-success-text); }
.val-neg { color: var(--color-danger-text); }

/* 構成比バー（全銘柄テーブル）。**背景に敷くのをやめて実体のあるバーにする**
   ＝薄い塗りを数字の裏に置くと、どちらも読み取れない。 */
/* **寄せは列の性質であって、セルごとの飾りではない。** 以前は `.balance-table td` の
   既定が右寄せで、文字の列だけインラインで左へ戻していた（実測198箇所）＝書き忘れると
   中身だけ右へ寄る事故が起き、しかも「どの列が何なのか」がどこにも書かれていなかった。
   表に1回 `data-cols` で宣言し、貼り直しは `watchColTypes()` が自動でやる。
   **`.balance-table td` と同じ詳細度なので、後に置くことで勝たせている。** */
td.c-l, th.c-l { text-align: left; }
td.c-r, th.c-r { text-align: right; }
td.c-c, th.c-c { text-align: center; }

/* **通貨記号は数字より軽く。** 右寄せの列では桁数がばらつくぶん ¥ が縦にそろわず、
   数字と同じ重さだと列の左端がざらつく。記号を沈めて数字だけが列を作るようにする。
   包むのは描き終わった DOM のセルだけ（`_markYen()`）＝文字列を作る側で包むと、
   `title` 属性・チャートのツールチップ・confirm に生のタグが出る（実測48箇所）。 */
.yc {
  /* **沈めるのであって、色を置き換えるのではない。** 固定の灰色にしていたため、
     数字が色を持つ場所（予算年次のヒートマップの緑赤橙、損益の緑赤、濃紺のヒーロー）で
     **記号だけ灰色に化けていた**。`opacity` なら地の色を継いだまま弱まるので、
     緑のセルでは薄い緑、赤のセルでは薄い赤になる。 */
  opacity: 0.55;
  font-weight: var(--fw-normal);
  font-size: 0.86em;
  margin-right: 0.5px;
}

/* 年の帯（yhist）＝**毎月1回積み上がる記録**を12マスで辿る共通の形。
   在庫の「これまでの棚卸」と純資産の「既存データ一覧」が共有する。
   どちらも以前は件数ぶんだけ縦に伸びる一覧で（表のページ送り／チップの折り返し）、
   古い月へ遡るのに何度もめくる必要があり、1件から分かることはほとんど無かった。
   年で括れば12マスに収まり、**入力を飛ばした月がそのまま穴として見える**。 */
.yhist-h { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0 0 10px; }
/* 年の選択は他のタブ（固定費・予算年次）と同じ期間ナビゲーター。見出しと同じ行に置く。
   **上の表との間を空ける**＝入力の表と履歴は別の区画なので、詰まっていると続きに見える。
   下は 10px（帯とは近くてよい＝見出しと帯は1つの塊）。 */
.yhist-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: var(--sp-8) 0 10px;
}
.yhist-head .yhist-h { margin: 0; }
.yhist-note { font-size: var(--text-2xs); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }

.yhist-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
}
@media (max-width: 1100px) { .yhist-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .yhist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.yhist-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 4px 8px;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface);
}
/* 記録の無い月は沈める＝棚卸を飛ばした月がそのまま見える */
.yhist-cell.empty { background: var(--color-bg); border-style: dashed; }
.yhist-m { font-size: var(--text-2xs); color: var(--color-text-subtle); }
.yhist-none { font-size: var(--text-xs); color: var(--color-border); line-height: 22px; }

.yhist-chip {
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 2px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-bg); cursor: pointer;
  font-family: var(--font); font-size: var(--text-2xs); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.yhist-chip b { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-text); }
/* 添える小さい数＝在庫は「その時点で追っていた商品の数」、純資産は「入れた口座の数」。
   どちらも増えていった過程がそのまま出る */
.yhist-chip em { font-style: normal; color: var(--color-text-subtle); }
.yhist-chip:hover { border-color: var(--color-primary-border); background: var(--color-primary-light); }
.yhist-chip.on {
  border-color: var(--color-primary); background: var(--color-primary);
  color: rgba(255, 255, 255, 0.85);
}
.yhist-chip.on b, .yhist-chip.on em { color: var(--color-text-on-accent); }
/* 投信の月次入力：未確認が残っている月の印。自動生成した行を確定し忘れた月が帯で分かる。
   **マスの角に出す**＝チップの中に入れるとその月だけ幅が変わり、文字が切れた。 */
.yhist-cell { position: relative; }
.yhist-cell.warn::after {
  content: ""; position: absolute; top: 5px; right: 5px;
  width: 6px; height: 6px; border-radius: var(--radius-circle); background: var(--color-warning, #f59e0b);
}