/* ホーム */

/* ============================================================
   ホームダッシュボード
   ============================================================ */
.home-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.home-head h1 { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--color-text); margin: 0; }
.home-date { font-size: var(--text-sm); color: var(--color-text-muted); }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.home-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: 18px 20px; cursor: pointer;
  box-shadow: var(--shadow-xs); transition: box-shadow 0.15s, transform 0.12s;
  position: relative; overflow: hidden;
}
.home-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-primary); opacity: 0.85; }
.home-card.home-alert::before { background: var(--color-warning); }
.home-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.home-card-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.home-card-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.home-arrow { font-size: var(--text-base); color: var(--color-text-subtle); transition: transform 0.12s; }
.home-card:hover .home-arrow { transform: translateX(3px); color: var(--color-primary); }
.home-big { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--color-text); line-height: 1.15; font-variant-numeric: tabular-nums; }
.home-big.pos { color: var(--color-success-text); }
.home-big.neg { color: var(--color-danger-text); }
.home-unit { font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--color-text-muted); margin-left: 3px; }
.home-delta { font-size: var(--text-xs); font-weight: var(--fw-semibold); margin-top: 3px; font-variant-numeric: tabular-nums; }
.home-delta.pos { color: var(--color-success-text); }
.home-delta.neg { color: var(--color-danger-text); }
.home-sub { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: 4px; font-variant-numeric: tabular-nums; }
.home-sub .pos { color: var(--color-success-text); font-weight: var(--fw-semibold); }
.home-sub .neg { color: var(--color-danger-text); font-weight: var(--fw-semibold); }
.home-prog { height: 7px; background: var(--color-bg); border-radius: var(--radius-sm); overflow: hidden; margin: 7px 0 5px; }
.home-prog i { display: block; height: 100%; border-radius: var(--radius-sm); transition: width 0.3s; }
.home-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.home-chip { font-size: var(--text-2xs); background: rgba(245,158,11,0.12); color: var(--color-warning-text); border-radius: var(--radius-pill); padding: 2px 9px; }
.home-ok { font-size: var(--text-sm); color: var(--color-success-text); font-weight: var(--fw-semibold); padding: 8px 0; }

/* ============================================================
   ホーム強化（ヒーロー・スパークライン・最近の支出・カテゴリ内訳）
   ============================================================ */
#home-hero { margin-bottom: 16px; }
/* ホームのヒーロー。**配色は資産系のヒーロー（.ahero）と揃える**＝ここが指している
   のは純資産タブそのもので、同じ「純資産 ¥13,956,304」を明るい青と濃紺の2通りで
   出していると、別のものに見える。構造（純資産＋スパークライン＋今月の貯蓄の3分割・
   クリックで遷移）はホーム固有なのでそのまま。 */
.home-hero-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(135deg, #182338 0%, #1f3355 55%, #24406b 100%);
  border-radius: var(--radius-xl); padding: 20px 24px; color: var(--color-text-on-accent);
  box-shadow: var(--shadow-md);
}
.home-hero-card::after {
  content: "";
  position: absolute; right: -90px; top: -130px;
  width: 340px; height: 340px; border-radius: var(--radius-circle);
  background: radial-gradient(circle, rgba(75,124,243,0.32) 0%, rgba(75,124,243,0) 70%);
  pointer-events: none;
}
.home-hero-card > * { position: relative; z-index: 1; }
.home-hero-main { cursor: pointer; }
.home-hero-label { font-size: var(--text-2xs); font-weight: var(--fw-normal); letter-spacing: 0.08em; color: rgba(255,255,255,0.62); }
.home-hero-val { font-size: var(--text-2xl); font-weight: var(--fw-bold); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.home-hero-delta { font-size: var(--text-sm); font-weight: var(--fw-semibold); margin-top: 3px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.72); }
.home-hero-delta.pos { color: var(--color-success-on-dark); }
.home-hero-delta.neg { color: var(--color-danger-on-dark); }
.home-hero-spark { flex: 1; min-width: 120px; max-width: 260px; height: 44px; cursor: pointer; }
.home-hero-spark .home-spark { width: 100%; height: 100%; }
.home-hero-side {
  margin-left: auto; text-align: right; cursor: pointer;
  border-left: 1px solid rgba(255,255,255,0.16); padding-left: 20px;
}
.home-hero-side-label { font-size: var(--text-2xs); font-weight: var(--fw-normal); letter-spacing: 0.08em; color: rgba(255,255,255,0.62); }
.home-hero-side-val { font-size: var(--text-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.home-hero-side-val.pos { color: var(--color-success-on-dark); }
.home-hero-side-val.neg { color: var(--color-danger-on-dark); }
.home-hero-side-sub { font-size: var(--text-2xs); color: rgba(255,255,255,0.55); margin-top: 3px; font-variant-numeric: tabular-nums; }
.home-spark { display: block; width: 100%; height: 30px; margin: 6px 0; }

.home-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-top: 16px; }
.home-panel-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: 16px 18px; cursor: pointer;
  box-shadow: var(--shadow-xs); transition: box-shadow 0.15s, transform 0.12s;
}
.home-panel-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.home-panel-wide { grid-column: 1 / -1; }
/* 収支トレンド（12ヶ月: 収入/支出バー＋累計貯蓄ライン＋KPI） */
.home-trend-legend { display: flex; gap: 14px; margin: 6px 0 2px; font-size: var(--text-2xs); color: var(--color-text-subtle); }
.home-trend-key { display: inline-flex; align-items: center; gap: 5px; }
.home-trend-key.inc::before, .home-trend-key.spd::before { content: ""; width: 9px; height: 9px; border-radius: var(--radius-xs); }
.home-trend-key.inc::before { background: var(--color-success); }
.home-trend-key.spd::before { background: var(--color-danger); }
.home-trend-key.line::before { content: ""; width: 13px; height: 0; border-top: 2.4px solid #6366f1; border-radius: var(--radius-xs); }
.home-trend-key.avg::before { content: ""; width: 13px; height: 0; border-top: 1.6px dashed #94a3b8; }
/* ヘッダKPI */
.home-trend2-kpis { display: flex; gap: 28px; flex-wrap: wrap; margin: 8px 0 2px; }
.home-trend2-kpis .htk { display: flex; flex-direction: column; gap: 1px; }
.home-trend2-kpis .htk-l { font-size: var(--text-2xs); color: var(--color-text-subtle); }
.home-trend2-kpis .htk-v { font-size: var(--text-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.home-trend2-kpis .htk-v.pos { color: var(--color-success-text); }
.home-trend2-kpis .htk-v.neg { color: var(--color-danger-text); }
/* プロット */
.home-trend2 { margin-top: 8px; }
.home-trend2-plot { position: relative; display: flex; align-items: flex-end; gap: 0; height: 96px; }
.home-trend2-col { flex: 1; min-width: 0; display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
.home-trend2-bar { width: 9px; border-radius: var(--radius-xs) var(--radius-xs) 0 0; min-height: 2px; transition: opacity 0.12s; }
.home-trend2-bar.inc { background: var(--color-success); }
.home-trend2-bar.spd { background: var(--color-danger); }
.home-trend2-plot:hover .home-trend2-bar { opacity: 0.55; }
.home-trend2-plot .home-trend2-bar:hover { opacity: 1; }
.home-trend2-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.home-trend2-end { position: absolute; width: 9px; height: 9px; border-radius: var(--radius-circle); background: #6366f1; border: 2px solid var(--color-surface); box-shadow: var(--shadow-xs); transform: translate(-50%, -50%); cursor: pointer; }
.home-trend2-axis { display: flex; gap: 0; margin-top: 5px; }
.home-trend2-lbl { flex: 1; min-width: 0; text-align: center; font-size: var(--text-3xs); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.home-rc-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-circle); margin-right: 6px; flex-shrink: 0; }
.home-rc-list { margin-top: 8px; }
.home-rc-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.home-rc-row:first-child { border-top: none; }
.home-rc-date { color: var(--color-text-subtle); font-size: var(--text-xs); width: 42px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.home-rc-name { flex: 1; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--color-text); }
.home-rc-amt { font-weight: var(--fw-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; }
.home-cat-list { margin-top: 8px; }
.home-cat-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: var(--text-sm); }
.home-cat-name { display: flex; align-items: center; width: 110px; flex-shrink: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--color-text); }
.home-cat-bar { flex: 1; height: 8px; background: var(--color-bg); border-radius: var(--radius-sm); overflow: hidden; }
.home-cat-bar i { display: block; height: 100%; border-radius: var(--radius-sm); }
.home-cat-amt { font-weight: var(--fw-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; width: 86px; text-align: right; }
.home-cat-total { font-size: var(--text-xs); color: var(--color-text-subtle); text-align: right; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }

/* ホームのカードを区分に分ける（要対応 / 今月 / 資産・目標）。
   13枚が同じ大きさで一列に並んでいると「未確認35件」と「定期の支払いの月額」が
   同じ重さに見えた。**要対応かどうかはカードの accent が決める**ので、
   件数が0になればその区分から勝手に外れる（＝空の区分は出ない）。 */
#home-grid { display: block; }
.home-sec + .home-sec { margin-top: 22px; }
.home-sec-hd {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-text-muted);
  letter-spacing: 0.04em; margin: 0 0 10px 2px;
}
.home-sec-n {
  font-size: var(--text-2xs); font-weight: var(--fw-bold); color: var(--color-text-subtle);
  background: var(--color-bg); border-radius: var(--radius-pill); padding: 1px 8px;
}
.home-sec--alert .home-sec-hd { color: var(--color-warning-text); }
.home-sec--alert .home-sec-n { color: var(--color-warning-text); background: rgba(245,158,11,0.14); }