/* /lifeplan 専用のスタイル（画面レイアウト・グラフエリア）。static/style.css は共通スタイルのため触らない。 */

/* ============================================================
   Step21-3: 配色ルール（収支の視認性改善）
   既存のブランド色（#1f4e79系）はそのまま再利用し、新規に追加する色は
   支出用のオレンジ1色のみに抑える（派手なデザインは不要という方針のため）。
   ============================================================ */
:root {
  --color-income: #1f4e79;    /* 収入: 既存のブランド色（青）を再利用 */
  --color-expense: #b5651d;   /* 支出: 新規（落ち着いたオレンジ系） */
  --color-positive: #2f7a4d;  /* 黒字: 既存の「追加」ボタン色（緑）を再利用 */
  --color-negative: #c0392b;  /* 赤字: 既存の「削除」ボタン色（赤）を再利用 */
  --color-asset: #163a5c;     /* 累積資産: 既存のボタンhover色（濃い青）を再利用 */
  /* Step27-1: 追加/削除ボタンのhover色（従来は各ボタンのCSSに直書きされていた
     #245e3b・#962d21をここへ集約し、--color-positive/--color-negativeの
     暗め版として変数化した）。 */
  --color-positive-dark: #245e3b;
  --color-negative-dark: #962d21;
  /* Step27-1: カードの角丸・余白は共通のUIデザイントークン（static/style.css）へ
     委譲する。値そのものはstyle.css側で一元管理し、ここでは参照するのみ。
     Step27-1.1でstyle.css側の角丸トークンが役割別（xs/sm/md/lg/pill）に
     細分化されたため、カード用の--radius-large（=--radius-lgの互換エイリアス）
     から、直接--radius-lgを参照する形へ更新した（値は変わらず14pxのまま）。 */
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-md);
}

/* ============================================================
   完了通知トースト（「入力内容を反映」「デフォルト値を設定」「今の入力内容を
   保存」「入力を復元」等の完了を明示する）。formactionの#anchorで画面内の
   別の位置へスクロールする操作が多いため、スクロール位置に関わらず見える
   よう画面上部に固定表示し、数秒後に自動で消える。
   ============================================================ */
.lifeplan-toast {
  position: fixed;
  /* 左上「🔰使い方・簡易版」・右上「⚙デザイン設定」（いずれもposition:fixed、
     top: 1rem、高さ44px）と重ならないよう、.design-settings-panelと同じ
     計算式でその下に配置する。 */
  top: calc(1rem + 44px + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: min(90vw, 420px);
  padding: 0.7rem 1.2rem;
  background-color: var(--theme-primary);
  color: var(--theme-on-primary, #fff);
  border-radius: var(--radius-pill, 999px);
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem;
  text-align: center;
}

/* グラフエリア／「1 入力項目」エリア／「2 シミュレーション結果」エリアの3ブロックを縦に並べる */
.page-area {
  margin-bottom: var(--space-lg);
}

/* ============================================================
   Step27-1: 見出しデザインシステム「大項目」
   （グラフ／1 入力項目／2 シミュレーション結果、および入力項目内の
   「（１）家族構成予定」〜「（５）資産」。Step27-6.1で番号表記を統一）。
   画面内で最も目立つ見出し階層とし、太字・テーマカラー・左アクセントで統一する。
   下線ではなく左アクセントにしたのは、中項目（.card-heading。下線のまま）と
   はっきり区別しつつ、将来見出し先頭へアイコンを追加する場合も
   （テキストをspanで包むだけで）左アクセント自体は変更不要にするため。
   ============================================================ */
.area-heading,
.section-heading {
  font-weight: bold;
  color: var(--theme-primary);
  border-left: 4px solid var(--theme-primary);
  /* Step27-2: 開いている間（Sticky時、下のdetails.input-section[open]側の
     ルール）と閉じている間で上下paddingを同じ値に揃え、「入力内容を反映」
     ボタンの高さ・縦位置が開閉で変わらないようにする（③）。 */
  padding: 0.3rem 0 0.3rem var(--space-sm);
}

.area-heading {
  font-size: 1.15rem;
  margin: 0 0 var(--space-sm);
}

/* Step24-4: 「シミュレーション結果」見出しの右に表示/非表示トグルボタンを並べる行。
   下線はarea-heading自身の左アクセントへ統一したため、行側は左右の配置のみ担う。
   Step27-6.1: タイトルを中央配置にするため、右のボタンと同じ横幅の非表示
   スペーサー（.area-heading-row-spacer）を左に追加する構成へ変更。 */
.area-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-sm);
}

.area-heading-row .area-heading {
  margin: 0;
}

/* Step27-6.1: グラフエリア見出しの中央配置（⑤）。左の非表示スペーサーと
   右のボタンに挟まれた残り幅いっぱいにタイトルを広げ、その中でテキストを
   中央寄せすることで、ボタン幅に関わらず行全体の中央に見えるようにする。
   左アクセント（.area-heading共通の左4px罫線）は左寄せの見出し向けの装飾で、
   中央配置すると左に寄って見えるだけで不要なため、この見出しだけ打ち消す。 */
.area-heading-row .area-heading-centered {
  flex: 1;
  text-align: center;
  border-left: none;
  padding: 0.3rem 0;
  /* Phase 6-4: スマートフォン幅（390px等）では「シミュレーション結果」が
     偶然「結」と「果」の間で改行され、「果」だけが2行目に孤立することが
     あった（日本語は既定でどの文字間でも改行できるため）。word-break:
     keep-allで任意の文字間改行を止め、HTML側の<wbr>（「シミュレーション」と
     「結果」の間）だけを改行可能点にすることで、入るときは1行、入らない
     ときも単語の境目で2行になるようにする。 */
  word-break: keep-all;
}

.area-heading-row-spacer {
  visibility: hidden;
  pointer-events: none;
}

/* Step27-1: 「？ 詳しく」「入力内容を反映」等と共通の、小型アウトライン
   ボタン（トグル/補助操作用）のサイズ。角丸は--radius-medium（カードの
   --radius-largeより控えめ、主要ボタン・入力欄の--radius-smallより丸め、
   「副次的な操作」であることを示すピル寄りの形にする）。 */
.graph-toggle-btn {
  flex: 0 0 auto;
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
  background-color: var(--theme-card-bg);
  color: var(--theme-primary);
  border: 1px solid var(--theme-primary);
  border-radius: var(--radius-medium);
  cursor: pointer;
  white-space: nowrap;
}

.graph-toggle-btn:hover {
  background-color: var(--theme-primary-soft);
}

/* 各エリア内の「本人」「給与」「教育費」などのカード単位。
   角丸・影・余白は「2 シミュレーション結果」の.result-section（static/style.css）と
   共通のトークン（--card-radius/--card-padding。実体は--radius-large/
   --space-md）を使い、入力画面・結果画面で見た目を揃える（Step27-1）。 */
.card {
  background-color: var(--theme-card-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-card);
}

.card:last-child {
  margin-bottom: 0;
}

/* Step27-2: 見出しを持たないカード（「ライフイベント」card-heading削除後の
   .card#life-event-card）で、先頭のヒント文がカード上端に詰まりすぎないよう
   通常の.hintの上余白を打ち消す（カード自体のpaddingで既に十分な間隔がある）。 */
.card-intro-hint {
  margin-top: 0;
}

/* カードタイトル: 「④将来編集」のようなカード内の小見出し(.form-subheadingは
   static/style.cssで別途1rem・上border)より一段強い階層に見えるよう統一する
   （Step21-3。カードデザインの統一）。
   見出しデザインシステム「中項目」（Step27-1）: 大項目
   （.area-heading/.section-heading。太字・左アクセント）より控えめに、
   セミボールド＋下線のみで一段落ち着かせる。 */
.card-heading {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  color: var(--theme-primary);
}

/* グラフ4つを縦に並べるコンテナ（.cardの中に入るため、独自の背景・枠は持たない） */
.chart-wrapper {
  position: relative;
  height: 220px;
  margin-bottom: var(--space-md);
}

.chart-wrapper:last-child {
  margin-bottom: 0;
}

/* 配偶者・子どもなど、1人分の入力を1行程度にまとめるための横並びレイアウト */
.family-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  margin-bottom: var(--space-sm);
}

.family-row:last-child {
  margin-bottom: 0;
}

.family-row label {
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
}

/* 高さ・角丸・余白・フォーカス色は入力欄デザインシステム（static/style.css）へ
   統一済みのため、ここでは最大幅のみ指定する（Step27-1）。 */
.family-row input[type="number"],
.family-row input[type="text"],
.family-row select {
  max-width: 140px;
}

.inline-checkbox {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: normal !important;
  white-space: nowrap;
}

.inline-checkbox input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
}

.child-fieldset.family-row,
.insurance-fieldset.family-row,
.nisa-fieldset.family-row,
.ideco-fieldset.family-row {
  width: 100%;
}

/* Step27-2追加: .family-row内で、JSがまとめて表示/非表示を切り替える複数の
   ラベル+入力欄（配偶者の「婚姻予定」「出生年度」「婚姻年度」等）を1つの
   グループとして扱うためのラッパー。.family-row自体はflexなので、この
   グループもinline-flexにして中のラベル・入力欄が横並びになるようにする。 */
.family-row .field-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}

/* Step27-2追加: 配偶者・子ども行の「自動反映」バッジ（現在年齢等）。
   本人カードの.field-block-auto（.person-summary-row配下）と見た目を揃えつつ、
   .family-row配下だけにスコープすることで既存の.field-block-autoの
   挙動（「3 収入」①本人のキャリア等）には影響しない。 */
.family-row .field-block-auto {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* 入力エリアの大項目見出し（1 家族構成予定／2 ライフイベント／3 収入／4 支出）。
   太字・テーマカラー・左アクセントは上の「見出しデザインシステム『大項目』」
   （.area-heading, .section-heading）で共通定義済みのため、ここでは
   フォントサイズ・余白のみ指定する。 */
.section-heading {
  font-size: 1.05rem;
  margin: var(--space-lg) 0 var(--space-sm);
}

/* 6項目の最初（家族構成予定）だけ、フォーム先頭の余白を詰める */
form > .input-section:first-child > summary.section-heading {
  margin-top: 0;
}

/* Step24-6: 各見出し（（１）〜（５））の右に「入力内容を反映」ボタンを配置する。
   内側のspanをflexにして見出しテキストとボタンを横並びにする。これにより
   アコーディオンを閉じてもボタンは常に見える（summaryは開閉に関わらず
   必ず表示される要素のため）。
   一番下の送信ボタンと全く同じ送信（フォーム全体をPOST）で、formactionに
   そのセクション最初の入力欄のidを指定し、再読み込み後にそこへ戻れるように
   する（新しい計算・APIは追加しない）。ボタンのクリックがアコーディオンの
   開閉に誤爆しないよう、JS側でクリックを横取りしてから送信し直している
   （static/js内のスクリプト、下記参照）。
   Step27-6.2: このspan（.section-heading-row）はdisplay:flexのため、
   ネイティブの開閉マーカー(::marker)を使うとブラウザによって見出し
   テキストの上に単独表示されてしまうことがあった。マーカーを
   .section-heading-markerというカスタム矢印に置き換え、見出しラベルと
   同じ.section-heading-label（内側のflexグループ）に含めることで、
   マーカー・ラベル・ボタンが常に同じ行に並ぶようにしている。 */
.section-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}

/* マーカーと見出しラベルをひとまとまりにし、.section-heading-row内では
   1つのflexアイテムとして扱う（右のボタンとの間だけ、上のspace-betweenで
   間隔を取る）。 */
.section-heading-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Step27-7.3: 支出カード見出しの「デフォルト値を設定」「入力内容を反映」の
   2ボタンを1つのflexアイテムとしてまとめる（.section-heading-rowのspace-betweenが
   見出しラベルとの間だけに効くようにするため）。 */
.section-heading-buttons {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Step27-1: .graph-toggle-btn/.hint-more-toggleと同じ小型アウトライン
   ボタンのサイズへ統一（padding/font-size/border-radius）。 */
.section-reflect-btn {
  flex: 0 0 auto;
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
  font-weight: normal;
  background-color: var(--theme-card-bg);
  color: var(--theme-primary);
  border: 1px solid var(--theme-primary);
  border-radius: var(--radius-medium);
  cursor: pointer;
}

.section-reflect-btn:hover {
  background-color: var(--theme-primary-soft);
}

/* 概況グラフ（4種類を1キャンバスにまとめたもの）は情報量が多いため少し高さを取る。
   Step21-4でSticky表示にしたため、以前(280px)より少しコンパクトにしている。
   Step27-4でグラフ本体にタイトル（Chart.jsのplugins.title）を追加した分、
   プロット領域が窮屈にならないよう高さを20px広げた。 */
.chart-wrapper-overview {
  height: 250px;
}

/* 収入カード①現在の給与情報: 所属給与表・級・号給・年齢・年度を並べる情報グリッド */
.salary-info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-bottom: 0.8rem;
}

.salary-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.salary-info-item .info-label {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-text-muted);
}

.salary-info-item .info-value {
  font-size: 1.1rem;
}

/* 高さ・角丸・余白・フォーカス色は入力欄デザインシステム（static/style.css）へ
   統一済みのため、ここでは最大幅のみ指定する（Step27-1）。 */
.salary-info-item .info-input {
  max-width: 100px;
}

/* 収入カード②昇任予定: 段階表示される行 */
.promotion-row {
  padding: 0.4rem 0.6rem;
  background-color: var(--theme-surface-alt);
  border-radius: 4px;
}

/* 収入カード⑥給与推移の特徴 */
.salary-insights-list {
  margin: 0;
  padding-left: 1.2rem;
}

.salary-insights-list li {
  margin-bottom: 0.4rem;
}

.salary-insights-list li:last-child {
  margin-bottom: 0;
}

/* 支出カード②生活費・⑥交通費: 月額入力の下に表示する年額の自動表示 */
.expense-annual-preview {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* 支出カード②生活費: 食費・光熱水費・通信費の推計評価（Step22-1「かなり少なめ」〜「かなり多め」） */
.living-expense-evaluation {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--theme-primary);
  margin-left: 0.3rem;
}

/* Step27-3: 支出カード②生活費を「固定費・変動費・保険」へグルーピングする
   際の小見出し（PDF指摘）。既存の見出し階層（.form-subheading＝小項目）の
   下にもう1段グルーピングを設けるため、それより一段軽い扱いにする
   （枠線なし・font-sizeを1段階小さく）。 */
.expense-group-heading {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--theme-primary);
  margin: var(--space-md) 0 var(--space-xs);
}

.expense-group-heading:first-of-type {
  margin-top: var(--space-sm);
}

/* Step27-4: 「2 シミュレーション結果」内のカードを「（１）入力内容の確認」
   「（２）シミュレーション結果」の2グループへ視覚的にまとめる見出し
   （番号表記はStep27-6.1で追加）。カードの並び順・件数は変更せず、
   .expense-group-heading（Step27-3）と同じ「中項目より一段軽い」見た目を共有する。 */
.result-group-heading {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--theme-primary);
  margin: var(--space-md) 0 var(--space-xs);
}

/* Step27-4: 結果カードのうち「年間収支」「資産推移」は最初から開いた状態で
   表示される最重要カードのため、見出しデザインシステムの左アクセント
   （.area-heading等と同じ--theme-primary）をカード自体にも付け、他の
   詳細カードより一段目立たせる（背景・角丸・余白等の変更はしない）。 */
.result-section-key {
  border-left: 4px solid var(--theme-primary);
}

/* 支出カード④将来編集: 年度ごとの編集テーブル（通常は非表示） */
#expense-year-overrides {
  margin: 0.8rem 0;
}

#expense-year-overrides input.expense-override-input {
  max-width: 160px;
}

#toggle-expense-overrides {
  margin-bottom: 0.5rem;
}

/* ============================================================
   Step21-1: 入力エリア／結果エリアのアコーディオン化
   ============================================================ */

/* 開閉できる大項目（（１）家族構成予定〜（５）資産）・結果カード共通 */
summary.section-heading,
summary.card-heading {
  cursor: pointer;
  user-select: none;
}

summary.card-heading::marker {
  color: var(--theme-primary);
}

/* Step27-6.2: summary.section-heading側はネイティブの▶/▼マーカーを使わない。
   中身が.section-heading-row（display:flex）のため、ブラウザによっては
   マーカーが見出しテキストの左ではなく上の行に単独表示されてしまう不具合が
   あった。ネイティブマーカーを非表示にし、.section-heading-markerという
   カスタム矢印をflexの最初の子要素として置くことで、見出しテキスト・
   「入力内容を反映」ボタンと同じ行に確実に並ぶようにする。 */
summary.section-heading {
  list-style: none;
}

summary.section-heading::-webkit-details-marker {
  display: none;
}

.section-heading-marker {
  flex: 0 0 auto;
  display: inline-block;
  color: var(--theme-primary);
  font-size: 0.75em;
}

.section-heading-marker::before {
  content: "▶";
}

details.input-section[open] > summary.section-heading .section-heading-marker::before {
  content: "▼";
}

/* 見出しクリックで開く本文側の余白 */
.input-section .section-body {
  margin-top: 0.8rem;
}

.input-section {
  margin-bottom: 0.3rem;
}

/* 結果カード（<details class="card result-section">）は既存の.cardの背景・余白をそのまま使う */
.result-section > summary.card-heading {
  margin-bottom: 0;
}

.result-section[open] > summary.card-heading {
  margin-bottom: var(--space-sm);
}

/* ============================================================
   Step21-1: 「入力」「自動反映」の区切り
   ============================================================ */

.field-block {
  margin-bottom: var(--space-sm);
}

.field-block-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.4rem;
}

.field-block-input .field-block-label {
  background-color: var(--theme-primary-soft);
  color: var(--theme-primary);
}

.field-block-auto .field-block-label {
  background-color: var(--theme-surface-alt);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border-strong);
}

/* ============================================================
   Step27-2: 「1 家族構成予定」本人カードの「出生年度」と「自動反映
   （現在年齢等）」を横一列に並べるラッパー（④⑤）。他の.field-block-auto
   利用箇所（「3 収入」①本人のキャリア等）に影響しないよう、
   .person-summary-row配下だけへスコープしたセレクタで指定する。
   ============================================================ */
.person-summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-sm);
}

.person-summary-row .field-block {
  margin-bottom: 0;
}

.person-summary-row .field-block-input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
}

/* 配偶者・子ども行（.family-row）とラベルの見た目（文字サイズ・太さ・折返し
   しない）を揃える（④「同じリズム」）。 */
.person-summary-row .field-block-input label {
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
}

.person-summary-row .field-block-auto {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
}

.person-summary-row .field-block-auto .salary-info-grid {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .person-summary-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
}

/* ============================================================
   Step21-1: 入力欄の横幅（内容に応じて調整。要素の種類を問わず優先させるためimportantを使用）
   ============================================================ */

.field-w-year {
  max-width: 6.5rem !important;
}

.field-w-age {
  max-width: 5.5rem !important;
}

/* Step27-9.12: 「例: 30」等のプレースホルダーが数値入力の増減矢印に押されて
   見切れていたため、プレースホルダーのみ少し小さくする（入力済みの値の
   文字サイズには影響しない）。 */
.field-w-age::placeholder {
  font-size: 0.8rem;
}

.field-w-rate {
  max-width: 4.5rem !important;
}

.field-w-amount {
  max-width: 9rem !important;
}

.field-w-text {
  max-width: 12rem !important;
}

/* ============================================================
   Step21-1: 詳細ヒントの折りたたみ（「？ 詳しく」）
   ============================================================ */

/* Step27-1: .graph-toggle-btn/.section-reflect-btnと同じ小型アウトライン
   ボタンのサイズへ統一（padding/font-size/border-radius）。境界線の色だけは
   「？ 詳しく」がより控えめな操作であることを示すためtheme-accent（淡い青）
   のまま残す。 */
.hint-more-toggle {
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
  background-color: var(--theme-card-bg);
  color: var(--theme-primary);
  border: 1px solid var(--theme-accent);
  border-radius: var(--radius-medium);
  cursor: pointer;
  margin-left: 0.3rem;
  vertical-align: middle;
}

.hint-more-toggle:hover {
  background-color: var(--theme-primary-soft);
}

.hint-detail {
  margin-top: 0.4rem;
}

/* ============================================================
   Step21-1: ボタンの役割ごとのサイズ・配置統一（色は既存のまま変更しない）
   ============================================================ */

#add-life-event-row {
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
}

#toggle-expense-overrides {
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
  background-color: var(--theme-card-bg);
  color: var(--theme-primary);
  border: 1px solid var(--theme-primary);
}

#toggle-expense-overrides:hover {
  background-color: var(--theme-primary-soft);
}

/* ============================================================
   Step27-9.9-5: 「入力内容をすべてリセットする」ボタン・確認ダイアログ
   ============================================================ */
.form-reset-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* 頻繁に押す操作ではないため、他の主要ボタン（青塗り）より控えめな
   アウトライン表示にする（#toggle-expense-overridesと同じ考え方）。 */
.reset-all-btn {
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
  background-color: var(--theme-card-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
}

.reset-all-btn:hover {
  background-color: var(--theme-bg);
}

/* ============================================================
   Step28-14: 入力内容のブラウザ保存・復元ボタン群
   ============================================================ */

/* 「保存・復元・？詳しく」の3操作を、角の丸い1つの枠としてまとめ、薄い色
   （--theme-primary-soft。他の淡色ハイライトと同じトークン）を敷いて
   存在感を出す（依頼により、既存カードと同じ--card-radiusで丸めを強め、
   単なる罫線グループより一段目立たせている）。「入力内容をすべてリセット
   する」は元の配置どおり、この枠の外・右側に独立して置く（左詰め3操作／
   右詰めリセットという以前のレイアウトへ戻した）。 */
.input-storage-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background-color: var(--theme-primary-soft);
  border: 1px solid var(--theme-accent);
  border-radius: var(--card-radius);
}

.input-storage-btn {
  white-space: nowrap;
}

/* 「？ 詳しく」は既存の.hint-more-toggleパターン（<p class="hint">に包む
   ことでhint-detailとの隣接関係を保つ）をそのまま使うため、余白だけ
   ボタン行に揃える。 */
.input-storage-hint-p {
  margin: 0;
}

/* 展開時は枠内で改行し、ボタン群の下に説明を表示する。 */
.input-storage-hint-detail {
  flex-basis: 100%;
  margin-top: 0.2rem;
}

.input-storage-feedback {
  color: var(--color-positive);
  margin-top: 0.6rem;
}

@media (max-width: 640px) {
  .form-reset-row {
    justify-content: center;
  }
}

.confirm-dialog {
  border: none;
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--shadow-lg);
  max-width: 360px;
}

.confirm-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.45);
}

.confirm-dialog-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: var(--space-md);
}

/* 「いいえ（リセットしない）」: 誤操作で実行してしまわないよう、
   通常ボタンと同じ強めの配色にして視線・既定フォーカスを集める。 */
.confirm-dialog-btn-safe {
  background-color: var(--theme-primary);
  color: var(--theme-on-primary, #fff);
}

.confirm-dialog-btn-safe:hover {
  background-color: var(--theme-primary-dark);
}

/* 「はい（リセットする）」: あえて目立たせず、押すには意図的な操作が
   必要になるようにする。 */
.confirm-dialog-btn-muted {
  background-color: var(--theme-card-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
}

.confirm-dialog-btn-muted:hover {
  background-color: var(--theme-bg);
}

/* ============================================================
   Step21-2: 支出カード「自由入力」（ライフイベントと同じ追加/削除方式）
   ============================================================ */

#add-custom-expense-row {
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  background-color: var(--color-positive);
}

#add-custom-expense-row:hover {
  background-color: var(--color-positive-dark);
}

.remove-custom-expense-row {
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
  background-color: var(--color-negative);
}

.remove-custom-expense-row:hover {
  background-color: var(--color-negative-dark);
}

/* ============================================================
   Step21-2: 老後ON/OFFトグル
   ============================================================ */

#old-age-fields {
  margin-top: 0.8rem;
}

/* ============================================================
   Step21-3: 収支の視認性改善（色は文字色のみ。背景・枠は変更しない）
   ============================================================ */

.amount-income {
  color: var(--color-income);
}

.amount-expense {
  color: var(--color-expense);
}

.amount-positive {
  color: var(--color-positive);
}

.amount-negative {
  color: var(--color-negative);
}

.amount-asset {
  color: var(--color-asset);
  font-weight: bold;
}

/* ============================================================
   Step21-3: 重要年度のハイライト（結婚・出産・住宅購入・退職など）
   グラフへの縦線は追加せず、年度一覧の該当行だけ目立たせる。
   ============================================================ */

tr.important-year-row {
  background-color: var(--theme-warning-soft);
}

.year-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.7rem;
  font-weight: normal;
  color: var(--theme-warning);
  background-color: var(--theme-warning-soft);
  border-radius: 3px;
  white-space: nowrap;
}

/* Step27-4: 同一年度に複数のイベントが重なる場合、.year-badgeを1件ずつ
   個別のspanとして並べる（結合した1つの長い文字列にしない）ため、表側の
   セルだけwhite-space:normalへ戻して折り返しを許可する（他の金額セル等は
   static/style.cssのth,td{white-space:nowrap}のまま変更しない）。 */
.year-cell {
  white-space: normal;
}

/* ============================================================
   Step21-3: スマホレイアウト（PC表示は変更しない）
   ============================================================ */

@media (max-width: 600px) {
  /* number/text inputの文字サイズが16px未満だとiOSでフォーカス時に
     自動ズームが発生するため、スマホ幅では16pxへ引き上げる。 */
  .family-row input[type="number"],
  .family-row input[type="text"],
  .family-row select,
  .life-event-row input,
  .life-event-row select,
  .salary-info-item .info-input {
    font-size: 16px;
  }

  /* 家族・ライフイベント・収入・支出の横並び入力は、幅が足りない分だけ
     折り返す（1項目=1行相当。gapはfamily-row側の値をそのまま使う）。 */
  .family-row,
  .life-event-row {
    flex-direction: column;
    align-items: stretch;
  }

  .family-row label,
  .life-event-row label {
    white-space: normal;
  }

  .family-row input[type="number"],
  .family-row input[type="text"],
  .family-row select,
  .life-event-row input,
  .life-event-row select,
  .salary-info-grid,
  .field-w-year,
  .field-w-age,
  .field-w-rate,
  .field-w-amount,
  .field-w-text {
    max-width: 100% !important;
    width: 100%;
  }

  .life-event-row input[type="text"] {
    flex: none;
  }

  .card {
    padding: 1rem;
  }

  .chart-wrapper-overview {
    height: 210px;
  }

  .chart-wrapper {
    height: 200px;
  }

  /* Step27-10: 収入カード①のキャリア入力（級・号給・役職名）は.family-rowとは
     別クラス(.salary-info-grid)のため、上の.family-row向けcolumn化ルールの
     対象外だった。役職名が級・号給の続きに折り返されるだけで「6級 20号給」の
     下に役職名という2段表示が保証されていなかったため、明示的に縦積みにする。 */
  .salary-info-grid {
    flex-direction: column;
  }

  .salary-info-item {
    width: 100%;
  }

  /* Step27-10: タップ領域が44px未満のボタン群を底上げする（PC側の値は
     styles自体を上書きせず、この幅でのみ上乗せする）。 */
  .hint-more-toggle,
  .section-reflect-btn,
  .remove-career-row,
  .remove-custom-expense-row,
  .graph-toggle-btn,
  .design-mood-btn,
  .design-dark-toggle {
    padding: 0.55rem 0.9rem;
    font-size: 0.85rem;
  }

  /* Step28-1.3: 「支出」見出しだけ「デフォルト値を設定」「入力内容を反映」の
     2ボタンが並ぶため、スマホ幅では見出しラベル＋2ボタンが1行に収まらず、
     右側のボタンが画面外へはみ出し横スクロールが発生していた。幅が足りない
     場合のみ自然に折り返す（1ボタンのみの他セクション見出しはこれまでどおり
     1行のまま。ボタン自体のサイズ・PC/タブレット表示は変更しない）。 */
  .section-heading-row {
    flex-wrap: wrap;
  }

  /* Step27-10: 雰囲気5種類・基調色5種類を2〜3列のグリッドらしく整列させる
     （PC側の.design-mood-options/.design-color-options自体は無変更）。
     雰囲気ボタンは、幅33%固定だと「ラグジュアリー」等の長いラベルが
     ボタン内で2段に折り返されてしまっていたため、PC側と同じ内容幅（
     flexの初期値）に戻し、.design-mood-optionsのflex-wrapで自然に
     行が折り返る形にする（ボタン自体の折り返しを防ぐのが目的で、
     グリッド化はしない）。 */
  .design-color-swatch {
    flex: 1 1 calc(33% - 0.4rem);
    justify-content: center;
    padding: 0.4rem;
  }

  /* Step27-10: 列数の多い表（家族構成の確認・学費等等）は.table-wrapperの
     横スクロールに頼る設計を維持しつつ、文字・余白を少し詰めてスクロール量を
     減らす（列構成自体は変更しない）。 */
  table {
    font-size: 0.8rem;
  }

  th, td {
    padding: 0.3rem 0.4rem;
  }
}

/* ============================================================
   Step27-10: タブレット（iPad等）レイアウト（601〜1023px）
   従来この幅の専用ブレークポイントが存在せず、PC同様の詰まったflex-wrapに
   任されていた。細かい入力欄が6〜8個フラットに並ぶ行（子ども・保険/NISA/
   iDeCo・キャリアの級/号給/役職名）だけを対象に、画面幅を活かした2カラムの
   グリッド風レイアウトへ整える（他の.family-row（住居予定・車予定・
   一時イベント等、項目数が少ない行）は現状のflex-wrapのままで問題なく
   収まるため対象外。既存にCSS Grid実装が無いため、ここでもflex-basisで
   統一し新しいレイアウト手法は持ち込まない）。
   ============================================================ */
@media (min-width: 601px) and (max-width: 1023px) {
  .child-fieldset.family-row > *,
  .insurance-fieldset.family-row > *,
  .nisa-fieldset.family-row > *,
  .ideco-fieldset.family-row > * {
    flex: 1 1 calc(50% - 0.4rem); /* .family-rowのcolumn-gap(0.8rem)の半分 */
  }

  .salary-info-grid > * {
    flex: 1 1 calc(50% - 0.75rem); /* .salary-info-gridのcolumn-gap(1.5rem)の半分 */
  }
}

/* ============================================================
   Step21-4: グラフエリアのSticky表示
   スクロールしても画面上部（.site-headerの下）へ固定する。
   常に表示され続けるため、背景色を敷いて下のコンテンツが透けないようにする。
   ============================================================ */

.sticky-graph-area {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: var(--theme-bg); /* static/style.cssのbody背景色と揃える */
  padding-top: 0.4rem;
  margin-bottom: var(--space-md);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Phase 3-3（β版公開前UI/UX総点検）で発見: 左上「🔰使い方・簡易版」等の
   position: fixedなボタン（top: 1rem固定、z-index: 100）は、.contentが画面幅いっぱいに
   広がる約1170px以下の画面幅では、スクロールしてこの.sticky-graph-areaが画面上部へ
   固定された瞬間に「シミュレーション結果」見出し・「グラフを隠す」ボタンと重なり、
   見出しが読めなくなる（ボタンの奥に隠れる）。.sticky-graph-areaの上端にボタンの高さ分の
   余白を確保して回避する（--sticky-graph-heightはJSがこの要素の実測高さ＝padding込みで
   再計算するため、この余白は下の入力見出し等のSticky位置にも自動的に反映される）。 */
@media (max-width: 1170px) {
  .sticky-graph-area {
    padding-top: 4rem;
  }
}

.sticky-graph-area .area-heading {
  margin: 0 0 0.5rem;
}

.sticky-graph-area .card {
  padding: 0.8rem 1rem;
  margin-bottom: 0;
}

/* グラフ下の説明文（「1 入力項目」の見出しと同じくスクロールで流れる。Step21-4で
   Sticky対象から外した部分）。グラフとの間隔だけ少し詰める。 */
.graph-caption {
  margin-top: var(--space-sm);
}

.chart-important-years {
  margin-top: 0.4rem;
}

/* Step27-4: 同一年度に複数のイベントが重なる場合でも、.year-badgeが
   個別に折り返せるようinline-flex化する（以前はnowrapな1つの文字列を
   結合していたため、狭い画面で見切れることがあった）。 */
.chart-important-year-item {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.1rem;
}

/* ============================================================
   Step21-4/24-4: グラフエリアの横幅を少し広げる（画面に余裕がある場合のみ）
   金額を万円表記にして凡例を右へ移したことで生まれた余白を活かし、
   グラフだけ.content(Step24-4で1100pxへ拡大)より左右に長くする。
   「1 入力項目」「2 シミュレーション結果」は.contentの1100px幅のまま変更しない。画面が狭い場合は.contentの
   1100px幅からはみ出して横スクロールが出ないよう、十分な余白がある
   画面幅(1400px以上)でのみ適用する。
   ============================================================ */

@media (min-width: 1400px) {
  .graph-width {
    max-width: 1300px;
    margin-left: -100px;
    margin-right: -100px;
  }
}

/* ============================================================
   Step21-4: 概況グラフのキャンバスを囲むラッパー。
   ============================================================ */

.chart-overview-row {
  display: flex;
  align-items: stretch;
}

.chart-overview-row .chart-wrapper-overview {
  flex: 1;
  min-width: 0;
}

/* ============================================================
   Step26-4: 概況グラフ「資産推移」系列（総資産/銀行口座/保険/NISA/iDeCo）の
   表示切替チェックボックス。横幅が狭い画面でも折り返して2段程度に収まるよう
   flex-wrapのみで対応する（ブレークポイント不要）。
   ============================================================ */

.asset-breakdown-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.asset-breakdown-toggles-label {
  color: var(--color-text-muted);
}

.asset-breakdown-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  cursor: pointer;
}

/* Step27-4: チェックボックスのラベル先頭に、対応するグラフ線と同じ色の
   丸をつける（4系列＝銀行口座/保険/NISA/iDeCoがどの線か一目で分かるように）。
   色そのものはJS側（lifeplan_chart.js、既存のASSET_BREAKDOWN_COLORSが
   唯一の情報源）が--legend-colorとして設定するだけで、CSS側に色の値は
   持たせない（色を追加・変更する場合もJS側の1箇所だけで完結する）。 */
.asset-breakdown-toggles label::before {
  content: "";
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background-color: var(--legend-color, #999);
  flex: 0 0 auto;
}

/* ============================================================
   Step21-4: 入力カード見出し（（１）家族構成予定〜（５）資産）のSticky表示
   カードが開いている間だけ、その見出しを画面上部（グラフの下）へ固定する。
   detailsの範囲を超えると自動的に固定が解除される（position: stickyの標準動作）。
   --sticky-graph-heightはJS（下部のスクリプト）がグラフエリアの実測高さを設定する。
   ============================================================ */

details.input-section[open] > summary.section-heading {
  position: sticky;
  top: var(--sticky-graph-height, 260px);
  z-index: 20;
  background-color: var(--theme-bg);
  /* Step27-2: paddingは.area-heading, .section-heading（開閉共通）の値を
     そのまま使う（Step27-1では0.3rem 0 0.3rem var(--space-sm)をここで
     個別に指定していたが、共通ルール側の値と揃えたため重複指定をやめた）。 */
}

/* Step27: アコーディオンを閉じた際、JS（下部のスクリプト）がこの見出しへ
   scrollIntoViewする際の目標位置。開いている間のsticky位置（top）と揃えることで、
   「1 入力項目」の下（グラフの下）にその項目の見出しが来るようにする。 */
.input-section > summary.section-heading {
  scroll-margin-top: calc(var(--sticky-graph-height, 260px) + 8px);
}

/* ============================================================
   Step27-8.1: 支出カードのみ、一段目（（３）支出）の下にもう一段Sticky表示を
   追加する（現在アコーディオンで開いている中項目名を表示し、スクロール中も
   「今どこを入力しているか」が分かるようにする）。detailsの非summary子要素は
   開閉に連動して自動的に表示/非表示になるため、このdiv自体はJSで出し入れしない
   （中のテキストだけJSが更新する）。--expense-heading-heightはJS（下部の
   スクリプト）が支出カードの一段目見出しの実測高さを設定する。
   ============================================================ */

details[data-section="expense"] > .section-body > .expense-sticky-subheading {
  position: sticky;
  top: calc(var(--sticky-graph-height, 260px) + var(--expense-heading-height, 48px));
  z-index: 19;
  background-color: var(--theme-bg);
  font-weight: 600;
  padding: 0.2rem 0 0.2rem var(--space-sm);
  min-height: 1.4rem;
}

details[data-section="expense"] > .section-body > .expense-sticky-subheading:empty {
  padding: 0;
  min-height: 0;
}

/* Step27-9.19: スクロールでスティッキー表示になると、対象中項目の本来の
   <summary>（開閉トグル）が画面外へ隠れ、開閉できなくなってしまうため、
   このスティッキー表示自体をクリックで対象中項目を開閉できるようにする
   （中身が空の間はクリック対象がないため、cursor変更もしない）。 */
details[data-section="expense"] > .section-body > .expense-sticky-subheading:not(:empty) {
  cursor: pointer;
}

/* クリック後、対象中項目の<summary>までscrollIntoViewする際の目標位置。
   スティッキー表示中の3段（(３)支出見出し・このバー自体の高さ）ぶん
   ずらす。--expense-subheading-heightはJSがこのバーの実測高さを設定する。 */
.expense-subsection-toggle > summary.form-subheading {
  scroll-margin-top: calc(
    var(--sticky-graph-height, 260px) + var(--expense-heading-height, 48px) +
      var(--expense-subheading-height, 32px) + 8px
  );
}

@media (max-width: 600px) {
  .sticky-graph-area .card {
    padding: 0.6rem 0.8rem;
  }

  /* Step27-6.1: 幅の狭い画面では、中央配置した「シミュレーション結果」タイトルと
     左右のボタン/スペーサーの合計幅が窮屈になり、「シミュレーション」という
     ひとつの単語が2行に分かれてしまうことがあるため、ボタン（と同じ幅の
     スペーサー）を少し小さくしてタイトルの余白を確保する。 */
  .sticky-graph-area .area-heading-row .graph-toggle-btn {
    padding: 0.25rem 0.4rem;
    font-size: 0.7rem;
  }

  .sticky-graph-area .area-heading-centered {
    font-size: 0.85rem;
    white-space: nowrap;
  }
}

/* ============================================================
   Step22-3: 支出カード「教育関連費」トグル（習い事・学童・学習塾）
   閉じている間は概要（現在の推計月額合計）のみ表示し、開くと子どもごとの
   入力欄を表示する（金額は空欄なら推計値、という仕組みは②生活費と共通）。
   Step27-5で②生活費から独立した③教育関連費へ昇格（見出し番号のみ変更、
   クラス名・構造・JS連携は既存のまま）。
   ============================================================ */

.education-living-toggle,
.expense-subsection-toggle {
  margin: 0.8rem 0;
}

.education-living-toggle > summary.form-subheading,
.expense-subsection-toggle > summary.form-subheading {
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.education-living-overview {
  margin-left: 0.5rem;
  font-size: 0.85rem;
  font-weight: normal;
  color: var(--color-text-muted);
}

.education-living-child {
  padding: 0.8rem 0;
  border-top: 1px solid var(--color-border);
  margin-top: 0.8rem;
}

.education-living-child:first-child {
  border-top: none;
  padding-top: 0.4rem;
  margin-top: 0.4rem;
}

.education-living-unit-price-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Step27-7.4: 習い事・学童・学習塾の開始・終了年齢欄の横に表示する参考の学年ラベル
   （例:「小学1年生」）。主張し過ぎない表示にする（既存のヒント文言と同じ色調）。 */
.education-living-grade-label {
  margin-left: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.after-school-weekly-count-label {
  margin-left: 0.4rem;
}

/* ============================================================
   Step22-4/22-5: 支出カード②生活費「医療費」「被服・日用品・その他・趣味娯楽」の
   内訳トグル（Step22-4は本人・配偶者・子どもごと、Step22-5は基準単価×年齢層補正）
   ============================================================ */

.expense-breakdown-toggle {
  margin: 0.3rem 0 0.8rem;
  font-size: 0.85rem;
  color: var(--theme-primary);
}

.expense-breakdown-toggle summary {
  cursor: pointer;
}

/* Step27-7.2: 支出カード③教育関連費（習い事・学童・学習塾）の「詳細設定」トグル。
   .expense-breakdown-toggleと同じ入れ子<details>パターン、固定幅は使わない。 */
.education-living-detail {
  margin: 0.4rem 0 0.8rem;
}

/* ============================================================
   Step27-9.22/9.23: 結果カード「（４）学費等」。年度1行にまとめ、教育区分
   （保育園〜大学の6区分）を横並びの列にしたピボット表。table-layout:fixedと
   <colgroup>で6区分の列幅を揃え、一番長い「保育園（0〜3歳）」
   「保育園・幼稚園（4〜6歳）」は見出し内で折り返して収める
   （表全体は.table-wrapperのoverflow-x: autoで、それでも収まらない
   画面幅では横スクロールする）。
   ============================================================ */

/* Step28-13.1: 「支援額」列の追加で列数が9列になり、table-layout: fixed +
   width: 100%（static/style.cssの共通table規則）のままだとスマートフォン幅で
   セルが狭くなりすぎて文字が重なって見えた。table-layout: autoへ変更し、
   min-widthで最低限の可読幅を確保したうえで、.table-wrapper（既存、
   overflow-x: auto）にテーブル単体だけを横スクロールさせる（ページ全体は
   横スクロールしない）。 */
.education-cost-table {
  table-layout: auto;
  width: auto;
  min-width: 520px;
}

.education-cost-table th,
.education-cost-table td {
  padding: 0.3rem 0.4rem;
}

.education-cost-year-col {
  width: 7%;
}

.education-cost-stage-col {
  width: 12%;
}

.education-cost-subsidy-col {
  width: 9%;
}

.education-cost-total-col {
  width: 12%;
}

.education-cost-table-substages th {
  font-size: 0.75rem;
  font-weight: normal;
  white-space: normal;
}

.education-living-detail > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--theme-primary);
}

/* Step27-7.3: デフォルト/ユーザー入力の状態管理（services/tracked_value.py）で、
   その値が「（デフォルト値）」か「（手入力済）」かを示す、小さく主張し過ぎない状態表示。
   支出カードの各金額欄・教育関係費の月額欄で共通利用する（Step27-7.3改訂）。 */
.tracked-value-label {
  margin-left: 0.4rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.expense-breakdown-list {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Step26-7: 年金内訳（本人・配偶者・世帯合計の3グループ）の視覚的な区別 */

.pension-breakdown-groups {
  margin: 0.4rem 0 0;
  padding-left: 0;
  list-style: none;
}

.pension-breakdown-group {
  margin: 0 0 0.6rem;
  padding: 0.3rem 0 0.3rem 0.6rem;
  border-left: 3px solid var(--theme-primary);
}

.pension-breakdown-group:last-child {
  margin-bottom: 0;
}

.pension-breakdown-group-title {
  display: block;
  font-weight: bold;
  color: var(--theme-primary);
}

.pension-breakdown-group .expense-breakdown-list {
  margin: 0.2rem 0 0;
}

/* ============================================================
   Step24-1: 入力値の警告表示（エラーとは異なり送信・計算は妨げない）
   ============================================================ */

.input-warnings {
  margin-top: 0.8rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--theme-warning);
  border-radius: 4px;
  background: var(--theme-warning-soft);
  color: var(--theme-warning);
}

.input-warnings-heading {
  margin: 0 0 0.4rem;
  font-weight: bold;
}

.input-warnings ul {
  margin: 0;
  padding-left: 1.2rem;
}

.input-warnings .hint {
  margin: 0.5rem 0 0;
  color: var(--theme-warning);
}

/* ============================================================
   Step27-6⑤: エラー表示（送信を妨げる入力不足等）。
   .input-warnings（警告・送信は妨げない）と同じ「枠付きボックス」の
   見た目を踏襲しつつ、色だけ既存の--color-negative（赤系）へ変える。
   静的なstyle.cssの.error（文字色のみ）はそのまま残し、ここでは
   ラップする.error-bannerとその見出しにだけボックス装飾を追加する
   （style.cssは触らない方針のため、.errorクラス自体は無変更）。
   ============================================================ */

.error-banner {
  margin-bottom: var(--space-md);
  padding: 0.7rem 1rem;
  border: 1px solid var(--color-negative);
  border-radius: 4px;
  /* Step27-9.9.5: 背景ウォッシュのみ--theme-danger-softへ（ダークモードでも
     破綻しないように）。枠線・見出し文字は既存の--color-negative（収支の赤と
     意図的に同じ色）のまま変更しない。 */
  background: var(--theme-danger-soft);
}

.error-banner-heading {
  margin: 0 0 0.3rem;
  font-weight: bold;
  color: var(--color-negative);
}

.error-banner .error {
  margin-top: 0;
}

/* ============================================================
   Step27-9.9.5: デザイン設定UI（右上の丸型アイコン＋ポップオーバー）
   旧Step24-3の画面上部セレクトボックス（.theme-switcher）を置き換える。
   スマホ・iPad対応（Step27-10）を見据え、ヘッダーのスクロール位置に依存
   しないposition: fixedにしている（将来ボトムシート化する場合も、この
   トグルボタン自体はそのまま残し、パネル側だけ差し替えられる構造）。
   ============================================================ */
.design-settings-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: var(--theme-primary);
  color: var(--theme-on-primary, #fff);
  box-shadow: var(--shadow-md);
}

.design-settings-toggle:hover {
  background-color: var(--theme-primary-dark);
}

.design-settings-panel {
  position: fixed;
  top: calc(1rem + 44px + 0.5rem);
  right: 1rem;
  z-index: 100;
  width: 260px;
  max-width: calc(100vw - 2rem);
  background-color: var(--theme-card-bg);
  color: var(--theme-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md);
}

.design-settings-heading {
  margin: 0 0 var(--space-sm);
  font-weight: bold;
  font-size: 1rem;
}

.design-settings-group {
  margin-bottom: var(--space-sm);
}

.design-settings-group:last-child {
  margin-bottom: 0;
}

.design-settings-label {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-text-muted);
}

.design-mood-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.design-mood-btn {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  font-weight: normal;
  background-color: var(--theme-card-bg);
  color: var(--theme-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  /* 「ラグジュアリー」等、日本語ラベルは既定でどの文字間でも改行できてしまい、
     幅が狭いと1つのボタンの中で文字が2段になることがあったため、常に
     1行で表示する。 */
  white-space: nowrap;
}

.design-mood-btn:hover {
  background-color: var(--theme-bg);
}

.design-mood-btn.is-selected {
  border-color: var(--theme-primary);
  background-color: var(--theme-primary-soft);
  color: var(--theme-primary);
  font-weight: bold;
}

.design-color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.design-color-swatch {
  position: relative;
  display: flex;
  padding: 0.25rem;
  background: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
}

.design-color-swatch:hover {
  background-color: var(--theme-bg);
}

.design-color-swatch.is-selected {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 2px var(--theme-primary-soft);
}

.design-color-swatch-dots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.design-color-swatch-dot {
  width: 100%;
  height: 100%;
}

.design-color-swatch-check {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: var(--theme-primary);
  color: var(--theme-on-primary, #fff);
  font-size: 0.6rem;
  line-height: 15px;
  text-align: center;
  opacity: 0;
}

.design-color-swatch.is-selected .design-color-swatch-check {
  opacity: 1;
}

.design-settings-dark-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.design-dark-toggle {
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  background-color: var(--theme-card-bg);
  color: var(--theme-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
}

.design-dark-toggle.is-on {
  background-color: var(--theme-primary);
  color: var(--theme-on-primary, #fff);
  border-color: var(--theme-primary);
}

/* ============================================================
   Step27-9.9.5: 雰囲気ごとの質感差（色以外）。--radius-*/--shadow-*本体は
   変更せず、[data-mood]でスコープした少数のセレクタだけに追加の質感を
   乗せる（影響範囲を限定するため）。
   ============================================================ */
[data-mood="simple"] .card,
[data-mood="simple"] .result-section {
  box-shadow: var(--shadow-sm);
}

[data-mood="luxury"] .card,
[data-mood="luxury"] .result-section {
  box-shadow: var(--shadow-lg);
}

[data-mood="metallic"] button:not(.design-mood-btn):not(.design-color-swatch):not(.design-dark-toggle) {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0) 40%,
    rgba(0, 0, 0, 0.08)
  );
}

/* ============================================================
   Step25-4: 収入カード「キャリア」エリア（本人・配偶者共通のキャリア区間）
   ============================================================ */

/* 1区間＝開始年齢・終了年齢・勤務状態を横一列に並べる行。.family-rowを併用し
   （Step27-3で実際にクラスを付与）、区間ごとの区切りが分かるよう淡い背景・
   枠線を追加する。 */
.career-row {
  padding: 0.6rem 0.7rem;
  background-color: var(--theme-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.career-row .career-row-label {
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
  margin-right: 0.2rem;
}

/* 勤務先ごとの詳細欄（級・号給等／額面年収／休職中・専業主フの説明）。JSで該当する
   1つだけ表示する。退職金欄（.career-retirement-allowance-wrap）・勤務状態期間
   （.career-work-condition）も同じ見た目を共有する。ただし.career-detailクラス
   自体は付与しない。付与するとJSの排他表示ロジック
   （career-detail-public-employee/private/on-leave/homemakerのいずれか1つだけ
   表示）に巻き込まれ、どの条件にも一致せず常に非表示になってしまうため。 */
.career-detail,
.career-retirement-allowance-wrap,
.career-work-condition {
  margin: 0.4rem 0 0.6rem 0.7rem;
  padding-left: 0.6rem;
  border-left: 3px solid var(--theme-accent);
}

/* 勤務状態期間の開始・終了年齢（.career-condition-age-fields）。通常勤務のときは
   JSがdisplay:noneへ切り替える。表示時は親の.family-row（flex）内でラベル・
   入力が横並びになるよう、このspan自体は独立したレイアウトを持たせずcontentsで
   透過させる。 */
.career-condition-age-fields {
  display: contents;
}

/* 複数の勤務状態期間（.career-condition-period）が並ぶ場合、区切りが分かるよう
   2件目以降にだけ上罫線を入れる。 */
.career-condition-period + .career-condition-period {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px dashed var(--color-border);
}

#add-primary-career-row,
#add-spouse-career-row {
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  background-color: var(--color-positive);
}

#add-primary-career-row:hover,
#add-spouse-career-row:hover {
  background-color: var(--color-positive-dark);
}

.remove-career-row {
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
  background-color: var(--color-negative);
}

.remove-career-row:hover {
  background-color: var(--color-negative-dark);
}

/* ============================================================
   Step27-11: 初心者版「🔰使い方・簡易版」
   右上のデザイン設定（.design-settings-toggle）と対称に、左上へ起動ボタンを
   置く。本体は<dialog>+showModal()（Step27-9.9.5の.confirm-dialogと同じ
   パターン。背景暗転・フォーカストラップ・Escキー処理をブラウザ標準のまま
   使う）。背景を暗く保ちたいという要件のため、::backdropは既存の
   .confirm-dialog（0.45）より濃いめにしている。
   ============================================================ */
.beginner-wizard-toggle {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  border-radius: var(--radius-pill);
  background-color: var(--theme-primary);
  color: var(--theme-on-primary, #fff);
  box-shadow: var(--shadow-md);
}

.beginner-wizard-toggle:hover {
  background-color: var(--theme-primary-dark);
}

.beginner-wizard-dialog {
  width: min(760px, 94vw);
  height: min(88vh, 900px);
  max-width: 94vw;
  max-height: 88vh;
  padding: var(--space-lg);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background-color: var(--theme-card-bg);
  color: var(--theme-text);
  overflow-y: auto;
}

.beginner-wizard-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

.beginner-wizard-close {
  position: sticky;
  top: 0;
  float: right;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  border-radius: var(--radius-pill);
  background-color: var(--theme-card-bg);
  color: var(--theme-text);
  border: 1px solid var(--color-border-strong);
}

.beginner-wizard-progress {
  margin: 0 0 var(--space-md);
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-text-muted);
  text-align: center;
}

.beginner-wizard-page h2 {
  margin-top: 0;
  color: var(--theme-primary);
}

.beginner-wizard-steps {
  padding-left: 1.2rem;
}

.beginner-wizard-steps li {
  margin-bottom: var(--space-sm);
}

.beginner-wizard-age-options,
.beginner-wizard-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0;
}

.beginner-wizard-age-options button,
.beginner-wizard-choice-row button {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  background-color: var(--theme-card-bg);
  color: var(--theme-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.beginner-wizard-age-options button.is-selected,
.beginner-wizard-choice-row button.is-selected {
  border-color: var(--theme-primary);
  background-color: var(--theme-primary-soft);
  color: var(--theme-primary);
  font-weight: bold;
}

.beginner-wizard-age-options button:disabled,
.beginner-wizard-choice-row button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.beginner-wizard-age-manual {
  display: block;
  margin: 0.6rem 0;
  font-size: 0.9rem;
}

.beginner-wizard-age-manual input {
  width: 5rem;
  margin: 0 0.4rem;
}

.beginner-wizard-primary-btn {
  padding: 0.7rem 1.4rem;
  font-size: 1rem;
  font-weight: bold;
  background-color: var(--theme-primary);
  color: var(--theme-on-primary, #fff);
  border-radius: var(--radius-md);
}

.beginner-wizard-primary-btn:hover {
  background-color: var(--theme-primary-dark);
}

.beginner-wizard-result {
  margin-top: var(--space-md);
}

.beginner-wizard-headline {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--theme-primary);
  margin: var(--space-sm) 0;
}

.beginner-wizard-headline-amount {
  font-size: 1.6em;
  color: var(--theme-accent);
}

/* ④給与等推移・⑧支出推移グラフの下に表示する「本人が○歳からの60歳までの
   手取り収入/支出」見出し。.beginner-wizard-headlineと同じ見た目にする。 */
.trend-chart-headline {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--theme-primary);
  margin: var(--space-sm) 0;
}

.trend-chart-headline-amount {
  font-size: 1.6em;
  color: var(--theme-accent);
}

.beginner-wizard-chart-wrapper {
  position: relative;
  height: 260px;
  margin: var(--space-sm) 0;
}

.beginner-wizard-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.beginner-wizard-field-group {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.beginner-wizard-field-label {
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.beginner-wizard-children-ages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.4rem;
}

.beginner-wizard-child-age input {
  width: 4rem;
  margin-left: 0.3rem;
}

.beginner-wizard-insights ul {
  margin: var(--space-sm) 0;
  padding-left: 1.2rem;
}

.beginner-wizard-insights li {
  margin-bottom: 0.3rem;
}

.beginner-wizard-question-cards {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: var(--space-md) 0;
}

.beginner-wizard-question-card {
  margin: 0;
  padding: 0.7rem 1rem;
  background-color: var(--theme-surface-alt);
  border-left: 3px solid var(--theme-accent);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.beginner-wizard-nav {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  background-color: var(--theme-card-bg);
  border-top: 1px solid var(--color-border);
}

.beginner-wizard-nav-btn {
  padding: 0.6rem 1.4rem;
}

@media (max-width: 600px) {
  .beginner-wizard-toggle {
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
  }

  .beginner-wizard-dialog {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    padding: var(--space-md) var(--space-sm);
  }

  .beginner-wizard-chart-wrapper {
    height: 200px;
  }

  .beginner-wizard-age-options button,
  .beginner-wizard-choice-row button {
    flex: 1 1 calc(33% - 0.5rem);
    text-align: center;
  }
}

/* ============================================================
   Step27-12: 透明性・利用情報ページ（このシミュレーターについて／
   データ・出典／利用上の注意／プライバシー／更新日）。
   ベタ書きの色は追加せず、既存の--theme-*トークンのみを使う（50テーマ対応。
   dataviz骨子と同じ「色は最後に、既存トークンから選ぶ」方針）。
   ============================================================ */

.info-page {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.8;
}

.info-page h2 {
  margin: var(--space-lg) 0 var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--theme-border);
  color: var(--theme-primary);
}

.info-page h2:first-child {
  margin-top: 0;
}

.info-page h3 {
  margin: var(--space-md) 0 var(--space-xs);
  color: var(--theme-text);
}

.info-page p,
.info-page li {
  color: var(--theme-text);
}

.info-page ul,
.info-page ol {
  padding-left: 1.4rem;
}

.info-section {
  margin-bottom: var(--space-lg);
}

.info-lead {
  font-size: 1.05rem;
  color: var(--theme-text);
}

/* 「このシミュレーターについて」冒頭のキャッチコピー（Step28-26） */
.info-tagline {
  margin: 0 0 var(--space-sm);
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--theme-primary);
}

/* 情報ページ内の「試してみたい質問例」等の柔らかい強調ボックス（Step28-26）。
   .info-notice（警告トーン）とは意図的に色を分け、primary-softで案内トーンにする。 */
.info-callout {
  margin: var(--space-md) 0;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md);
  background: var(--theme-primary-soft);
}

.info-callout p {
  margin: 0.3rem 0;
}

/* 情報ページ末尾等の「→ 関連ページへ」の誘導リンク（Step28-26） */
.info-arrow-link {
  font-weight: bold;
}

.info-arrow-link a {
  color: var(--theme-primary);
}

/* 「利用上の注意」等の注意喚起。.error-banner（赤系・送信を妨げるエラー用）とは
   意図的に色を分け、警告トーン（--theme-warning系）にする。 */
.info-notice {
  margin: var(--space-md) 0;
  padding: 0.7rem 1rem;
  border: 1px solid var(--theme-warning);
  border-radius: var(--radius-md);
  background: var(--theme-warning-soft);
}

.info-notice-heading {
  margin: 0 0 0.3rem;
  font-weight: bold;
  color: var(--theme-warning);
}

.info-notice p:last-child {
  margin-bottom: 0;
}

.source-category {
  margin: var(--space-lg) 0 var(--space-sm);
  color: var(--theme-primary);
}

.source-card {
  margin-bottom: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  background: var(--theme-card-bg);
}

.source-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.source-card-label {
  font-weight: bold;
  color: var(--theme-text);
}

.source-card-description {
  font-size: 0.9rem;
  color: var(--theme-text-muted);
  margin: 0.3rem 0;
}

.citation-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}

.citation-item {
  padding: 0.5rem 0;
  border-top: 1px solid var(--theme-border);
  font-size: 0.9rem;
}

.citation-item:first-child {
  border-top: none;
}

.citation-badge {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: bold;
}

.citation-badge-confirmed {
  color: var(--theme-success);
  background: var(--theme-success-soft);
}

.citation-badge-provisional {
  color: var(--theme-warning);
  background: var(--theme-warning-soft);
}

.source-card-undocumented {
  font-size: 0.85rem;
  color: var(--theme-text-muted);
  font-style: italic;
}

/* データ・出典：主なデータの一覧表（Step28-29）。左寄せ・折り返し可にして、
   全国共通table規則（style.css、右寄せ・nowrap）を上書きする。 */
.data-source-overview th,
.data-source-overview td {
  text-align: left;
  white-space: normal;
}

/* データ・出典：「公式資料一覧」の折りたたみ（Step28-29）。
   .expense-breakdown-toggleと同じ「小さな詳細開示」の見た目にする。 */
.data-source-detail {
  margin: 0.3rem 0 0.8rem;
  font-size: 0.85rem;
  color: var(--theme-primary);
}

.data-source-detail summary {
  cursor: pointer;
}

/* データ・出典：自治体ごとの給与・手当（都道府県→自治体区分→自治体の階層。
   Step28-29）。自治体数が増えても崩れないよう、ネストした<details>のみで
   構成し新しいUI部品は作らない。 */
.city-tree-prefecture > summary {
  margin: var(--space-sm) 0 0.3rem;
  font-weight: bold;
  color: var(--theme-primary);
  cursor: pointer;
}

.city-tree-category {
  margin-left: 1rem;
}

.city-tree-category > summary {
  color: var(--theme-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
}

.city-tree-list {
  list-style: none;
  margin: 0.3rem 0 0.8rem;
  padding-left: 1.4rem;
}

.city-tree-list li {
  margin-bottom: 0.2rem;
}

/* フッターのサイト情報リンク（このシミュレーターについて／データ・出典／
   利用上の注意／プライバシー／更新情報）。スマホでも押しやすいタップサイズを
   確保する。 */
.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1rem;
  margin: 0.5rem 0;
}

.site-footer-nav a {
  display: inline-block;
  padding: 0.5rem 0.3rem;
  color: var(--theme-text-muted);
  text-decoration: underline;
  font-size: 0.85rem;
}

.site-footer-updated {
  margin: 0;
  font-size: 0.75rem;
  color: var(--theme-text-muted);
}

@media (max-width: 600px) {
  .info-page {
    max-width: 100%;
  }
}

/* ============================================================
   Step28-15: 📈シミュレーション例
   .beginner-wizard-toggle（左上、Step27-11）の右隣に並べる2つ目の固定リンク。
   既存の.beginner-wizard-toggleは無変更のまま、新規クラスとして追加する。
   leftのcalc()は.design-settings-panel（このファイル内、Step27-11）と同じ
   「隣のボタンの実測サイズ＋隙間」パターン（縦積みではなく横方向に適用）。
   ============================================================ */
.simulation-examples-link {
  position: fixed;
  top: 1rem;
  left: calc(1rem + 153px + 0.6rem); /* 🔰ボタンの実測幅(約153px)+隙間 */
  z-index: 100;
  display: inline-block;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  background-color: var(--theme-primary);
  color: var(--theme-on-primary, #fff);
  box-shadow: var(--shadow-md);
}

.simulation-examples-link:hover {
  background-color: var(--theme-primary-dark);
}

.simulation-examples-link:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .simulation-examples-link {
    top: 1rem;
    left: calc(1rem + 133px + 0.5rem); /* スマホ幅での🔰ボタンの実測幅(約133px)+隙間 */
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
  }
}

/* シミュレーション例：記事一覧のカード（.source-cardと同じトークンを流用） */
.example-card {
  display: block;
  margin-bottom: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  background: var(--theme-card-bg);
  text-decoration: none;
  cursor: pointer;
}

.example-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.example-card-title {
  display: block;
  font-weight: bold;
  color: var(--theme-text);
}

.example-card-summary {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: var(--theme-text-muted);
}

/* シミュレーション例：記事詳細の画像（拡大鏡等は今回作らない、シンプルに表示のみ） */
.example-figure {
  margin: var(--space-sm) 0;
  padding: var(--space-sm);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  background: var(--theme-card-bg);
}

.example-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm, 4px);
}

.example-figure figcaption {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--theme-text-muted);
}

/* シミュレーション例：タイトル前の通し番号バッジ（"EX01"等。Step28-25） */
.example-number {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--theme-primary);
  color: var(--theme-on-primary, #fff);
  font-size: 0.8rem;
  font-weight: bold;
  vertical-align: middle;
}

/* シミュレーション例：記事間の相互リンク（「前回」「続き」等。Step28-24） */
.example-related-link {
  font-weight: bold;
}

.example-related-link a {
  color: var(--theme-primary);
}

/* ============================================================
   Phase「保存機能・比較機能拡張」: 保存・呼び出し・削除・比較のUI。
   既存の.reset-all-btn/.confirm-dialog/.chart-wrapper/.info-page等の
   トークン・パターンをそのまま再利用し、新しい配色は最小限（比較ケース
   バッジ用のCASE_COLORSのみ、static/js/saved_simulations_page.js参照）。
   ============================================================ */

/* /lifeplan画面: 「📁 名前を付けて保存する」「📊 保存済み・比較を見る」の
   操作行（.input-storage-actionsと同じ「淡色の枠でひとまとめ」パターン）。 */
.saved-simulation-actions-area {
  margin-bottom: var(--space-md);
}

.saved-simulation-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background-color: var(--theme-primary-soft);
  border: 1px solid var(--theme-accent);
  border-radius: var(--card-radius);
}

.saved-simulation-count {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .saved-simulation-actions {
    justify-content: center;
    text-align: center;
  }
}

/* 保存ダイアログ（.confirm-dialogをベースに、名前・メモの入力欄分だけ拡張）。 */
.save-simulation-dialog {
  max-width: 420px;
  width: 90vw;
}

.save-simulation-dialog-heading {
  margin-top: 0;
}

.save-simulation-memo-row {
  flex-direction: column;
  align-items: stretch;
}

.save-simulation-memo-row textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
}

#save-simulation-name {
  width: 100%;
}

/* .confirm-dialog-btn-safe/-muted は<button>前提のスタイルのため、<a>で
   使う場合はリンクの下線・インライン既定表示だけ打ち消す。 */
.confirm-dialog-btn-link {
  text-decoration: none;
  display: inline-block;
}

/* 「📂 入力を復元」ダイアログ（/lifeplan画面）: 保存済み№1〜№5を
   .saved-slot-card（/lifeplan/savedと同じ見た目）で一覧表示するため、
   通常の.confirm-dialog（max-width: 360px）より横幅を広げ、件数が
   多い場合に備えて縦スクロールできるようにする（.beginner-wizard-dialogと
   同じ考え方）。
   背景色・文字色は明示的にテーマトークンを指定する（.beginner-wizard-dialogと
   同じ理由）。<dialog>要素はブラウザの既定スタイルで常に白背景・黒文字に
   なり、他の.confirm-dialog系（中身がプレーンなテキストのみ）はそれでも
   問題にならなかったが、このダイアログは内部で.saved-slot-card
   （background-color: var(--theme-card-bg)）を使っており、ダークモードでは
   カード側だけが暗い背景色になる一方、文字色はダイアログの既定（黒）を
   そのまま継承してしまい、黒背景に黒文字で読めなくなっていた）。 */
.restore-input-dialog {
  width: min(480px, 92vw);
  max-width: 92vw;
  max-height: 80vh;
  overflow-y: auto;
  background-color: var(--theme-card-bg);
  color: var(--theme-text);
}

.restore-input-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.8rem 0;
}

.restore-input-card .saved-slot-card-actions button {
  width: 100%;
}

/* /lifeplan/saved 画面全体 */
.saved-simulations-page .saved-simulations-list-section,
.saved-simulations-page .saved-recall-section,
.saved-simulations-page .saved-compare-section {
  margin-bottom: var(--space-lg);
}

.saved-simulations-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.8rem;
}

.saved-slot-card {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--card-radius);
  padding: 0.8rem 0.9rem;
  background-color: var(--theme-card-bg);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.saved-slot-card-empty {
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  border-style: dashed;
}

.saved-slot-card-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.saved-slot-number-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--theme-primary);
  color: var(--theme-on-primary, #fff);
  font-size: 0.8rem;
  font-weight: bold;
  flex-shrink: 0;
}

.saved-slot-name {
  font-weight: bold;
  word-break: break-word;
}

.saved-slot-memo {
  font-size: 0.85rem;
  color: var(--theme-text);
  margin: 0;
  word-break: break-word;
  white-space: pre-wrap;
}

.saved-slot-meta {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0;
}

.saved-slot-card-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

.saved-slot-card-actions button {
  flex: 1 1 auto;
  white-space: nowrap;
}

/* 呼び出し結果（読み取り専用表示） */
.saved-recall-section {
  border: 1px solid var(--theme-accent);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  background-color: var(--theme-primary-soft);
}

.saved-recall-memo {
  white-space: pre-wrap;
  word-break: break-word;
}

/* 比較UI */
.saved-compare-controls {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.saved-compare-metric-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.saved-compare-case-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.saved-compare-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  word-break: break-word;
}

.saved-compare-checkbox-label-disabled {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.saved-compare-case-badge {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-pill, 999px);
  background-color: var(--case-color, var(--theme-primary));
  color: #fff;
  font-size: 0.78rem;
  font-weight: bold;
  flex-shrink: 0;
}

.saved-compare-numeric-summary {
  margin-top: 0.8rem;
}

.saved-compare-summary-heading {
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.saved-compare-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.saved-compare-summary-list li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.saved-compare-trends {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.8rem;
}

.saved-compare-trend-card {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--card-radius);
  padding: 0.7rem 0.9rem;
  background-color: var(--theme-card-bg);
}

.saved-compare-trend-heading {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-weight: bold;
  margin: 0 0 0.3rem;
  flex-wrap: wrap;
}

.saved-compare-trend-card ul {
  margin: 0;
  padding-left: 1.2rem;
}

.saved-compare-trend-card li {
  margin-bottom: 0.2rem;
}

/* 比較チャートは横並び金額+年齢軸のため、他のchart-wrapperよりやや高さを
   確保する（データ・計算は無関係、表示領域のみの調整）。 */
.saved-compare-section .chart-wrapper {
  height: 280px;
}

@media (max-width: 640px) {
  .saved-compare-section .chart-wrapper {
    height: 240px;
  }
}