/* 投資信託「お金の増え方」（js/fund-growth.js） */

/* ============================================================
   お金の増え方（投資信託タブ「お金の増え方」）
   **文章と数字が同じ強さで並ぶ画面**＝ここだけは説明文を減らさない。読む人は
   投資の知識を持っていない前提で、グラフの前に必ず1〜2行の言葉を置く。
   色と面は他の資産タブと共有（ヒーローは .ahero）。この節が足すのは、
   読み物としての文章まわりの型だけ。
   ============================================================ */
.grw-card { margin-bottom: var(--sp-4); }
.grw-card h2 { margin-bottom: var(--sp-4); }


/* 追い越しの1行。ヒーローの直下なのでカードにせず1本の帯にし、**文章ではなく
   ラベル＋数字**で置く（説明文を読ませない＝この画面は読み物ではなく見るもの）。 */
.grw-cross-box {
  display: flex; align-items: baseline; gap: var(--sp-3);
  flex-wrap: wrap;
  margin: var(--sp-3) 0 var(--sp-4);
  padding: 12px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-lg);
}
.grw-cross-icon { font-size: var(--text-md); align-self: center; }
.grw-cross-k { font-size: var(--text-sm); color: var(--color-text-muted); }
.grw-cross-v { font-size: var(--text-lg); color: var(--color-text); font-variant-numeric: tabular-nums; }
.grw-cross-v b { font-weight: var(--fw-bold); }
.grw-cross-when { font-size: var(--text-2xs); color: var(--color-text-subtle); }
.grw-cross-sub {
  margin-left: auto;
  font-size: var(--text-2xs); color: var(--color-success-text);
  background: var(--color-success-light);
  border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap;
}

/* 想定年率の3択。**操作はこの1つだけ**なので、他の入力と同じ行に混ぜない */
.grw-ctrl {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.grw-ctrl-label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text); }

/* チャートの結論を数字で受ける。**「その選択でいくら変わるか」だけ**を置く */
.grw-diff {
  display: flex; gap: var(--sp-6); flex-wrap: wrap;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--color-border);
}
.grw-diff-cell { display: flex; flex-direction: column; gap: 2px; }
.grw-diff-cell em {
  font-style: normal; font-size: var(--text-2xs); color: var(--color-text-subtle);
}
.grw-diff-cell b {
  font-size: var(--text-xl); font-weight: var(--fw-bold);
  color: var(--color-success-text); font-variant-numeric: tabular-nums;
}
.grw-diff-cell b.sub { font-size: var(--text-md); color: var(--color-text-muted); }

/* この1年の流れ。**金額を左から右へ読ませる**＝率より先に金額が目に入る並び */
.grw-flow {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
}
.grw-flow-end { display: flex; flex-direction: column; gap: 4px; min-width: 8em; }
.grw-flow-cap { font-size: var(--text-2xs); color: var(--color-text-subtle); }
.grw-flow-val {
  font-size: var(--text-xl); font-weight: var(--fw-bold);
  color: var(--color-text); font-variant-numeric: tabular-nums;
}
.grw-flow-mid { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.grw-flow-item { display: flex; flex-direction: column; gap: 4px; }
.grw-flow-k { font-size: var(--text-2xs); color: var(--color-text-subtle); }
.grw-flow-v {
  font-size: var(--text-md); font-weight: var(--fw-semibold);
  color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.grw-flow-v.up { color: var(--color-success-text); }
.grw-flow-v.down { color: var(--color-danger-text); }

/* 率の説明は最後に1行。**金額のあと**に置く順序そのものが説明になっている */
.grw-note {
  margin: var(--sp-4) 0 0;
  font-size: var(--text-sm); line-height: 1.75; color: var(--color-text-muted);
}
.grw-note b { color: var(--color-text); font-weight: var(--fw-bold); }

@media (max-width: 700px) {
  .grw-flow { flex-direction: column; align-items: stretch; }
  .grw-flow-mid { justify-content: space-between; }
}

/* 階段カードの見出し行。**複利を円で、3つの数字だけで言う**
   （20年ぶんの合計 ／ 1年目の段 ／ 20年目の段）＝率のままでは大きさが伝わらない。 */
.grw-stair-head {
  display: flex; align-items: flex-end; gap: var(--sp-5);
  flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.grw-stair-total { display: flex; flex-direction: column; gap: 2px; }
.grw-stair-total em {
  font-style: normal; font-size: var(--text-2xs); color: var(--color-text-subtle);
}
.grw-stair-total b {
  font-size: var(--text-xl); font-weight: var(--fw-bold);
  color: var(--color-success-text); font-variant-numeric: tabular-nums;
}
.grw-stair-total b.plain { color: var(--color-text); }
.grw-yen-cell { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.grw-yen-cell em { font-style: normal; font-size: var(--text-2xs); color: var(--color-text-subtle); }
.grw-yen-cell b { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--color-text); }
.grw-yen-arrow { color: var(--color-text-subtle); align-self: center; }

/* プロフィール（マスタ管理 👤）。1項目しかないので表ではなく1枚のカードで置く */
.mst-profile-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--sp-5); max-width: 44em;
}
.mst-profile-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.mst-profile-row label {
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--color-text); margin-right: var(--sp-2);
}
.mst-profile-row span { font-size: var(--text-sm); color: var(--color-text-muted); }
.mst-profile-now {
  margin-top: var(--sp-4); font-size: var(--text-base); color: var(--color-text-muted);
}
.mst-profile-now b {
  font-size: var(--text-lg); font-weight: var(--fw-bold);
  color: var(--color-text); font-variant-numeric: tabular-nums;
}
.mst-profile-card .mst-hint { margin: var(--sp-3) 0 0; }
.grw-stair-if {
  margin-left: auto; align-self: center;
  font-size: var(--text-2xs); color: var(--color-text-subtle);
  background: var(--color-bg); border-radius: var(--radius-pill); padding: 4px 10px;
}

/* 増えた分の中身（値上がり／為替）。**主役の金額の下に小さく添える**＝内訳であって
   別の数字ではない、と分かる置き方にする。 */
.grw-sub { display: flex; gap: var(--sp-3); margin-top: 4px; flex-wrap: wrap; }
.grw-sub-item { display: flex; align-items: baseline; gap: 4px; }
.grw-sub-item em {
  font-style: normal; font-size: var(--text-3xs); color: var(--color-text-subtle);
}
.grw-sub-item i {
  font-style: normal; font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.grw-sub-item i.up { color: var(--color-success-text); }
.grw-sub-item i.down { color: var(--color-danger-text); }


/* 年ごとの棒の器。**入りきらなくなったら横スクロール**＝年が増えても1本あたりの
   幅（GRW_YEAR_SLOT）を保つ。右端＝いま、左へ遡る。 */
.grw-scroll { overflow-x: auto; overflow-y: hidden; }
.grw-scroll-in { min-width: 100%; }

/* 内訳の表。**為替の列だけ小さなバーを添える**＝数字の並びからは「どの年に効いたか」
   の形が読めない。0を中心に、円安は右（橙）・円高は左（灰）へ伸ばす。 */
.grw-table-wrap { margin-top: var(--sp-4); }
.grw-table-wrap .up { color: var(--color-success-text); }
.grw-table-wrap .down { color: var(--color-danger-text); }

/* 年ごとの内訳の表。**金額の真後ろに薄く塗る**（支出タブの `.sp-amt-cell` と同じ作り）。
   金額は右端で揃うので塗りも右端起点＝行をまたいで長さを比べられる。向きではなく
   **色で符号を出す**（緑＝増えた・赤＝減った）＝列ごとに一番大きい年を100%とする。 */
.grw-amt-cell { position: relative; }
.grw-amt-cell .grw-amt-bar {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  height: 62%; max-width: calc(100% - 16px);
  border-radius: var(--radius-xs); z-index: 0;
}
.grw-amt-cell .grw-amt-bar.pos { background: rgba(16, 185, 129, 0.16); }
.grw-amt-cell .grw-amt-bar.neg { background: rgba(239, 68, 68, 0.16); }
.grw-amt-cell span:last-child { position: relative; z-index: 1; }