/* ============================================================
   Step24-3/24-4: テーマカラー切替（Step27-9.9.5で基調色×雰囲気×ダークモードへ拡張）
   背景・ボタン・見出し・アクセントカラーが参照する共通のCSS変数。
   ここがOcean×シンプル×Light（既定）の値で、JS（static/js/design_theme.js）が
   選択された組み合わせの値でこれらの変数を上書きする（JS無効時はこの既定値のまま
   表示される）。収支の色分け（--color-income等、Step21-3）・チャート配色は
   意味を持つ配色のため対象外、一切変更しない。
   Step27-9.9.5: 単色×5テーマだった構成を、役割ベースの19トークン
   （primary系・secondary・accent・surface系・text系・border系・状態色
   warning/danger/success）へ拡張し、雰囲気（パステル/ビビット/シンプル/
   ラグジュアリー/メタリック）とダークモードを掛け合わせた最大50通りを
   tools/generate_design_themes.pyで生成・適用できるようにした
   （このブロックの値自体はOcean×シンプル×Lightの既定値のまま）。 */
:root {
  --theme-primary: #1f4e79;
  --theme-primary-dark: #163a5c;
  --theme-on-primary: #ffffff;
  --theme-secondary: #2f8fa8;
  --theme-accent: #a8d8e8;
  --theme-primary-soft: #e8f4f8;
  --theme-bg: #f2f6f7;
  --theme-card-bg: #ffffff;
  --theme-surface-alt: #f2f2f3;
  --theme-text: #222222;
  --theme-text-muted: #666666;
  --theme-border: #e5e5e5;
  --theme-border-strong: #cccccc;

  /* Step27-9.9.5: 状態色（注意・エラー・成功）。既存の収支黒字/赤字色
     （--color-positive/--color-negative、意味を持つ配色として対象外）とは
     別枠の、UI上の状態表示専用トークン。v1では--theme-warning*を
     .input-warnings、--theme-danger-softを.error-bannerの背景ウォッシュに
     のみ適用する（.error-bannerの枠線・見出し文字は既存の--color-negative
     のまま。理由は下記--color-border等の説明を参照）。--theme-success*は
     現時点で適用先が無いため、将来の拡張用に値のみ用意する。 */
  --theme-warning: #d09d25;
  --theme-warning-soft: #f3eee2;
  --theme-danger: #b24034;
  --theme-danger-soft: #f1e5e4;
  --theme-success: #32764b;
  --theme-success-soft: #e6efe9;

  /* Step27-1: UIデザインシステム。角丸・影・余白・境界線・フォーカス色を
     配色（--theme-*）とは独立した「構造トークン」として切り出す。
     今後のテーマ切替（雰囲気×基調配色。Step28想定）は--theme-*側の値を
     差し替えるだけで対応する想定のため、このブロックの値には配色に関する
     決め打ちを含めない（角丸・影・余白のルールはテーマが変わっても共通）。

     Step27-1.1: 保守性向上のため、角丸・影のトークンを役割別に細分化した
     （見た目は変更しない。値は既存トークンと同一になるよう選定済み）。
     旧トークン（--radius-small等・--shadow-card）は互換性維持のため残し、
     新トークンのエイリアスとする（実体の値は新トークン側の1箇所のみで管理し、
     二重管理を避ける）。 */

  /* 角丸（5段階）。xs/sm/md/lgは既存の3段階（small/medium/large）と同じ値。
     pillのみ今回新規（999px＝完全な半円形）で、現時点ではどの要素にも
     未適用の予約トークン。
       xs   … バッジ・タグ等の極小要素用（将来利用。現状未適用）
       sm   … 入力欄・主要ボタン（フォーム的で控えめ。旧--radius-small相当）
       md   … トグル/補助ボタン（ピル状で少し丸め。旧--radius-medium相当）
       lg   … カード（最も丸く、コンテナであることを示す。旧--radius-large相当）
       pill … 完全な丸型。タグ・アイコンボタン・テーマ切替（Step28）用に予約
              （現時点ではどの要素にも未適用） */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* 旧トークン名（互換エイリアス）。既存CSSはこちらを参照したままでよい。 */
  --radius-small: var(--radius-sm);
  --radius-medium: var(--radius-md);
  --radius-large: var(--radius-lg);

  /* 影（3段階）。今回は既存カードの見た目を変えないことが目的のため、
     shadow-mdの値は旧--shadow-cardと完全に同一にしている。shadow-sm/lgは
     今回どの要素にも未適用の予約トークン。
       sm … ボタン用に予約（将来、ボタンにも軽い影を付ける場合を想定。
            現状のボタンはshadowなしのまま＝未適用）
       md … カード用（現在.card/.result-sectionが使用中。旧--shadow-card相当）
       lg … モーダル・ダイアログ用に予約（将来追加時、背後との重なりが
            はっきり分かるよう他より強めの影にしている。現状未適用） */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.18);

  /* 旧トークン名（互換エイリアス）。既存CSSはこちらを参照したままでよい。 */
  --shadow-card: var(--shadow-md);

  /* 余白スケール（4段階）。xsは行内の詰めた間隔、lgはカード・セクション間。
     既存値を下回らないよう、統一の際は基本的に切り上げる方針にしている
     （余白は「少しゆとりのある」方向にのみ揃える）。 */
  --space-xs: 0.4rem;
  --space-sm: 0.9rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;

  /* 境界線・補助テキストの色。実体は上の--theme-border*/--theme-text-mutedの
     1箇所のみで管理し、この3つの旧トークン名はそこへの参照（エイリアス）とする
     （Step27-9.9.5でテーマ切替対象に昇格。旧トークン名を直接参照している既存
     セレクタは1行も変更せずにテーマ・ダークモードへ追従する）。 */
  --color-border: var(--theme-border);
  --color-border-strong: var(--theme-border-strong);
  --color-text-muted: var(--theme-text-muted);

  /* フォーカス時の強調色（入力欄・ボタン共通） */
  --focus-ring-color: var(--theme-secondary);
  --focus-ring-shadow: 0 0 0 3px var(--theme-primary-soft);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  color: var(--theme-text);
  background-color: var(--theme-bg);
  line-height: 1.6;
}

.site-header {
  /* Step27-9.9.5: 右上のデザイン設定アイコン（position: fixed）はヘッダーの
     スクロール位置に依存しないため、position指定はここでは不要。
     Step28-27: 右上の⚙デザイン設定（全ページ共通）・左上の🔰使い方・簡易版／
     📈シミュレーション例（/lifeplanのみ）は、いずれもposition:fixedで
     最前面に浮くため、中央寄せの見出し・サブタイトルがタイトル文言の長さや
     ビューポート幅によってはその下に隠れてしまう（実際に見出しへ「（自治体
     特化）」を追加した際、スマホ幅で2行目が⚙アイコンと重なることが判明した）。
     これらの固定要素のうち最も高さがある⚙（44px）を基準に、上部の余白を
     広めに確保しておくことで、見出しの長さに関わらず重ならないようにする。 */
  padding: calc(1rem + 44px + 0.8rem) 1rem 1.5rem;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  color: var(--theme-on-primary, #fff);
  text-align: center;
}

.site-header h1 {
  margin: 0 0 0.25rem;
  font-size: 1.4rem;
}

.subtitle {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.85;
}

.site-nav {
  margin-top: 0.8rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.site-nav a {
  color: var(--theme-on-primary, #fff);
  opacity: 0.75;
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.2rem;
}

.site-nav a.active {
  opacity: 1;
  border-bottom-color: var(--theme-on-primary, #fff);
  font-weight: bold;
}

.content {
  /* Step24-4: 画面全体の横幅をより広く使い、カード・グラフ・表の情報量を
     増やす（800px→1100px。縦方向は伸ばさない）。 */
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.site-footer {
  text-align: center;
  padding: 1rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Step27-1: カードデザイン。「③結果」の各カードは「②入力」の.card
   （static/css/lifeplan.css）と完全に同じ角丸・影・余白にして、入力画面・
   結果画面のトーンを統一する。 */
.result-section {
  background-color: var(--theme-card-bg);
  border-radius: var(--radius-large);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-card);
}

/* Step27-1: 見出しデザインシステム「小項目」（① ② ③…の丸数字を使う見出し）。
   大項目（.area-heading/.section-heading）・中項目（.card-heading）より
   控えめな強調に留める。 */
.form-subheading {
  font-size: 1rem;
  font-weight: 600;
  color: var(--theme-text);
  margin: var(--space-md) 0 var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.form-row {
  margin-bottom: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-row label {
  font-size: 0.9rem;
  font-weight: bold;
}

.form-row-checkbox label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: normal;
}

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

.form-row input {
  /* Step27-1: 見た目（高さ・角丸・余白・フォーカス色）は下の入力欄デザイン
     システム（input[type=...], select共通ルール）へ統一。ここでは最大幅のみ
     指定する。 */
  max-width: 200px;
}

/* ============================================================
   Step27-1: 入力欄デザインシステム
   テキスト系input・selectの高さ・角丸・余白・フォーカス時の色を、
   出現するカードや画面（入力エリア・結果エリア）を問わず統一する。
   個別の最大幅・flex等のレイアウトは各要素側（.form-row input等）に残し、
   ここでは見た目のみを扱う。
   ============================================================ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
  padding: 0.5rem 0.7rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--theme-text);
  background-color: var(--theme-card-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--focus-ring-color);
  box-shadow: var(--focus-ring-shadow);
}

/* ============================================================
   Step27-1: ボタンデザインシステム
   角丸・高さ（padding基準）・余白・ホバー・押下時の見た目を全ボタン共通にする。
   背景色・文字色は用途別（.graph-toggle-btn等のアウトライン系、
   #add-life-event-row等の追加/削除系）に個別で上書きするが、形・動きは
   このルールを土台にする。
   ============================================================ */
button {
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  font-family: inherit;
  background-color: var(--theme-primary);
  color: var(--theme-on-primary, #fff);
  border: none;
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

button:hover {
  background-color: var(--theme-primary-dark);
}

button:active {
  transform: translateY(1px);
}

button:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: var(--space-sm);
}

.error {
  color: #c0392b;
  font-weight: bold;
  margin-top: 0.8rem;
}

.table-wrapper {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}

th, td {
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.6rem;
  text-align: right;
  white-space: nowrap;
}

th {
  background-color: var(--theme-surface-alt);
  text-align: center;
}

td:first-child, th:first-child {
  text-align: center;
}

/* Step27-2: 境界線色・角丸を入力欄デザインシステムのトークンへ統一し、
   本人・配偶者（枠なし）と並べたときの子ども欄の見た目を揃える（④）。 */
.child-fieldset {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem 0.2rem;
  margin-bottom: var(--space-sm);
}

.child-fieldset legend {
  font-weight: bold;
  padding: 0 0.4rem;
}

.life-event-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* Step27-2: 行間の余白を入力欄デザインシステムの--space-smへ統一（⑥）。 */
  margin-bottom: var(--space-sm);
  align-items: center;
}

/* .life-event-row select/inputの見た目（高さ・角丸・余白等）は上の入力欄
   デザインシステムへ統一済みのため、ここでは個別指定しない。 */
.life-event-row input[type="text"] {
  flex: 1;
  min-width: 120px;
}

/* Step27-2: paddingを行内の入力欄（padding: 0.5rem 0.7rem）に近づけ、
   同じ行内で削除ボタンだけ縦に小さく見える差を減らす（⑥）。 */
.remove-life-event-row {
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  background-color: var(--color-negative);
}

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

#add-life-event-row {
  margin-bottom: 0.5rem;
  background-color: var(--color-positive);
}

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

/* Step27-10: モバイル向けブレークポイントをlifeplan.css側（600px）へ統一
   （従来は480pxのみここだけ別基準だった）。あわせて、右上のデザイン設定
   アイコン（position: fixed; top/right: 1rem; 44px四方。Step27-9.9.5）と
   中央寄せのh1テキストが狭い画面幅で重ならないよう、ヘッダー右側に
   アイコン＋余白分のpaddingを確保する（アイコン側のCSS・位置は無変更）。 */
@media (max-width: 600px) {
  .site-header {
    padding-right: 3.75rem;
  }

  .site-header h1 {
    font-size: 1.2rem;
  }
}