/* =========================================================
   家計簿アプリ - style.css
   モバイルファースト設計：
     - 基本スタイルはスマホ幅（〜767px）を基準に記述する
     - 768px以上（PC/タブレット）向けの上書きは末尾の
       @media (min-width: 768px) にまとめている
   ========================================================= */

:root {
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-primary: #3d7cf2;
  --color-primary-dark: #2b5fc7;
  --color-text: #22262b;
  --color-text-muted: #6b7280;
  --color-border: #e2e5ea;
  --color-danger: #e0554f;
  --color-danger-dark: #c73f3a;
  /* 一覧の「編集」「削除」ボタン専用の色。テーマ（やさしい・あたたかみ系）が--color-primary/--color-dangerを
     暖色系に差し替えても、この2色だけは常に青系・赤系で固定し、見分けやすさを保つ。 */
  --color-edit: #2b6fe0;
  --color-edit-dark: #1d54b3;
  --color-delete: #c73f3a;
  --color-delete-dark: #a52f2b;
  --radius: 10px;
  --spacing: 16px;
  --bottom-nav-height: 60px;
  --sticky-actions-height: 76px; /* .form-actions（保存/登録ボタン）の実測+余裕を見た高さ */
  --tap-min: 44px; /* Appleのヒューマンインターフェースガイドライン基準の最小タップ領域 */
}

* {
  box-sizing: border-box;
}

html {
  /* iOSでフォームにフォーカスした際の自動ズームを防ぐため、基準フォントサイズは16px以上を維持する */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Segoe UI", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  font-size: 16px;
}

.app-header {
  background: var(--color-primary);
  color: #fff;
  padding: 4px var(--spacing);
}

.app-header h1 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
  text-align: center;
}

/* やさしい・あたたかみ系テーマ時のみ、丸みのある可愛らしい書体（Zen Maru Gothic）に差し替える。
   スタンダードテーマは従来通りのゴシック体のまま。 */
body[data-theme="warm"] .app-header h1,
body[data-theme="warm"] .mascot-message-text {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* やさしい・あたたかみ系テーマ時のみ、下のキャラクターメッセージ行とのバランスを取るため
   タイトルの位置をもう少し下げる（スタンダードテーマではメッセージ行が無いため対象外）。
   h1のmargin-topではなくヘッダー自身のpadding-topで確保する：ヘッダーにpadding-topが
   無いと、子要素(h1)のmargin-topが外側に「抜けて」しまうmargin collapsingが起きるため。 */
body[data-theme="warm"] .app-header {
  padding-top: 11px;
  padding-bottom: 2px;
}

.container {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--spacing);
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  /* 下部固定ナビ + セーフエリアの分だけ、最後のカードが隠れないよう余白を確保する */
  padding-bottom: calc(var(--bottom-nav-height) + var(--spacing) + env(safe-area-inset-bottom, 0px));
}

/* ---------- タブ切り替え：上部タブ（PC用）。モバイルでは非表示にし、下部ナビを使う ---------- */
.tab-nav {
  display: none;
}

.tab-btn {
  border: none;
  background: transparent;
  cursor: pointer;
}

.tab-panel.hidden {
  display: none !important;
}

.tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}

/* ---------- タブ切り替え：下部固定ナビ（モバイル用） ---------- */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  background: var(--color-surface);
  /* border-topではなくbox-shadowで区切り線を描く（borderは高さに1px加算され、
     --bottom-nav-height を基準にした .form-actions の位置計算とズレてしまうため） */
  box-shadow: 0 -1px 0 var(--color-border), 0 -2px 10px rgba(0, 0, 0, 0.07);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav .tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--bottom-nav-height);
  color: var(--color-text-muted);
  font-size: 0.68rem;
  padding: 6px 4px;
}

.bottom-nav .tab-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.bottom-nav .tab-btn.active {
  color: var(--color-primary);
  font-weight: 700;
}

/* ---------- ダッシュボードのお知らせ ---------- */
.dashboard-alerts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alert {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.alert-info {
  background: #eaf1ff;
  color: #2b5fc7;
}

.alert-warning {
  background: #fdecea;
  color: var(--color-danger-dark);
}

/* ---------- カード共通 ---------- */
.card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--spacing);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.card h2 {
  margin: 0 0 14px;
  font-size: 1.1rem;
  line-height: 1.4;
}

/* ---------- 月切り替え ---------- */
.month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.month-label {
  font-size: 1.15rem;
  font-weight: 600;
  min-width: 130px;
  text-align: center;
}

/* ---------- 表示パターン切り替え ---------- */
.pattern-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pattern-tab {
  flex: 1;
  min-width: 120px;
  min-height: var(--tap-min);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pattern-tab:hover {
  border-color: var(--color-primary);
}

.pattern-tab.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

/* ---------- 「将来の予定」タブ内のサブタブ（segmented control風） ---------- */
.future-subtabs {
  display: flex;
  gap: 6px;
  background: var(--color-border);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: var(--spacing);
}

.future-subtab-btn {
  flex: 1;
  min-height: var(--tap-min);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.future-subtab-btn.active {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.future-subpanel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}

.future-subpanel.hidden {
  display: none !important;
}

/* ---------- フォーム ---------- */
.field-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  /* 子要素（特にWebKit系の日付入力）が意図せず幅を超えて描画された場合の保険として、
     行の外にはみ出さないようにする。 */
  max-width: 100%;
  overflow: hidden;
}

.field-row label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.checkbox-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap-min);
  font-size: 0.95rem;
  color: var(--color-text);
}

.checkbox-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

input,
select {
  font-size: 1rem; /* 16px。iOSでのフォーカス時自動ズームを防ぐ最低ライン */
  padding: 12px 12px;
  min-height: var(--tap-min);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* flexアイテムはデフォルトで「中身の最小サイズ」を優先し width:100% を無視して
     はみ出すことがある（特にSafariの<input type="date">の内部シャドウDOM）。
     min-width:0 で親幅を優先させ、はみ出しを防ぐ。 */
  min-width: 0;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* 日付系の入力欄（type="date"）はブラウザ標準の内部レイアウトの影響を受けやすいため、
   他の入力欄と幅・位置が揃うよう明示的に指定する。
   WebKit（iOS Safari等）の <input type="date"> は内部にシャドウDOMで
   日/月/年の各フィールドを持ち、これらが要求する最小幅を優先して
   親のflexコンテナ幅を無視し右にはみ出すことがある既知の問題があるため、
   ・-webkit-appearance/appearance:none で標準の内部装飾を外す
   ・.date-input-wrap（display:block かつ overflow:hidden）でラップし、
     たとえ内部要素がはみ出す描画をしても表示上は幅内にクリップされるようにする
   という二重の対策を行う。 */
input[type="date"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.date-input-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.date-input-wrap input[type="date"] {
  display: block;
}

/* 支出入力フォームの日付ピッカーはタップ・視認性を優先して大きめにする */
#dateInput {
  font-size: 1.2rem;
  padding: 12px 12px;
  min-height: 52px;
}

/* 「将来の予定」タブのフォーム（車メンテナンス）は、同じタブ内に複数のフォームが並ぶため、
   .form-actions（画面下部固定）は使わず、フォーム内の通常配置のボタン列にする。 */
.form-actions-static {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

/* 保存/キャンセルボタンは、フォームが長くてもスクロールせず押せるよう
   モバイルでは画面下部（下部ナビの直上）に固定表示する。
   PC幅では通常のフォーム内配置に戻す（@media (min-width: 768px) 参照）。 */
.form-actions {
  display: flex;
  gap: 10px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  padding: 10px var(--spacing);
  background: var(--color-surface);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

/* 固定された保存バーの分、フォーム末尾の項目が隠れないよう余白を確保する */
#expenseForm,
#fixedCostForm {
  padding-bottom: var(--sticky-actions-height);
}

/* 一覧の末尾も、固定保存バー＋下部ナビの高さ分だけ見えなくなるため、
   スクロールし切った際に最後の項目までちゃんと見えるよう余白を確保する
   （余裕を見て +20px 追加）。 */
#expenseListWrap,
#fixedCostListWrap {
  padding-bottom: calc(
    var(--sticky-actions-height) + var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 20px
  );
}

/* ---------- 入力補助（レシートOCR・音声入力） ---------- */
.input-assist {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--color-border);
}

.input-assist-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-assist {
  flex: 1;
  min-width: 150px;
  text-align: center;
  font-size: 0.9rem;
}

.btn-assist.recording {
  background: var(--color-danger);
  color: #fff;
  animation: assist-recording-pulse 1s ease-in-out infinite;
}

@keyframes assist-recording-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.assist-status {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.assist-status.assist-status-error {
  color: var(--color-danger-dark);
}

.ocr-preview {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ocr-thumbnail {
  max-width: 160px;
  max-height: 160px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  object-fit: cover;
}

.ocr-raw-text-details {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.ocr-raw-text-details pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--color-bg);
  border-radius: 8px;
  padding: 10px;
  margin-top: 6px;
  max-height: 160px;
  overflow-y: auto;
}

/* ---------- ボタン共通：タップ領域は最低44px四方を確保する ---------- */
.btn {
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  min-height: var(--tap-min);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  flex: 1;
}

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

.btn-secondary {
  background: var(--color-border);
  color: var(--color-text);
}

.btn-secondary:hover {
  background: #d4d8de;
}

.btn-icon {
  background: var(--color-border);
  color: var(--color-text);
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border-radius: 50%;
  font-weight: bold;
}

.btn-icon:hover {
  background: #d4d8de;
}

/* 一覧内の編集・削除ボタン：文字リンク風だが、指で押しやすいよう最低44pxのタップ領域と間隔を持たせる */
.btn-danger,
.btn-edit {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-danger {
  background: transparent;
  color: var(--color-delete);
}

.btn-danger:hover {
  color: var(--color-delete-dark);
  text-decoration: underline;
}

.btn-edit {
  background: transparent;
  color: var(--color-edit);
}

.btn-edit:hover {
  color: var(--color-edit-dark);
  text-decoration: underline;
}

.hidden {
  display: none !important;
}

/* ---------- グラフ上部：表示中の月・合計金額 ---------- */
.chart-summary {
  text-align: center;
  margin-bottom: 12px;
}

.pie-viewing-month {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.pie-month-total {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.chart-box {
  min-width: 0;
}

.chart-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.chart-box canvas {
  max-height: 220px;
  max-width: 100%;
}

/* 円グラフ専用：扇形の外側に項目名・金額のラベルを引き出し線付きで描画するため、
   通常のchart-boxより縦に大きめの描画領域を確保する（Chart.js側はmaintainAspectRatio:falseで
   このコンテナいっぱいに描画する）。 */
.pie-chart-box {
  position: relative;
  height: 360px;
  /* カード自体の左右パディング分だけはみ出させ、外側ラベル用の横幅を少しでも稼ぐ。 */
  margin-left: calc(-1 * var(--spacing));
  margin-right: calc(-1 * var(--spacing));
  width: calc(100% + 2 * var(--spacing));
}

.pie-chart-box canvas {
  max-height: none;
}

/* 月別推移の棒グラフはタップで円グラフを切り替えられるため、タップ可能であることを示す */
#monthlyBarChart {
  cursor: pointer;
}

/* ---------- グラフタブ：棒グラフの期間送り（矢印ボタン・スワイプ） ---------- */
.bar-chart-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}

.bar-chart-range-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  min-width: 120px;
  text-align: center;
}

.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* スワイプ操作の対象領域。縦スクロールは妨げず、横方向のジェスチャーはJS側で検知する。 */
.bar-chart-swipe-area {
  touch-action: pan-y;
}

.empty-msg {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  padding: 24px 0;
}

/* ---------- 支出一覧：直近の月を選べる横スクロールタブ ---------- */
.month-tab-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.month-tab {
  flex-shrink: 0;
  min-height: var(--tap-min);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
}

.month-tab:hover {
  border-color: var(--color-primary);
}

.month-tab.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

/* ---------- 一覧表：モバイルでは列を絞り、文字サイズを抑えて横スクロールを防ぐ ---------- */
.month-total {
  display: block;
  margin-top: 4px;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text);
}

.expense-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.expense-table th,
.expense-table td {
  padding: 10px 4px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  word-break: break-word;
}

.expense-table th {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.75rem;
}

/* メモ列（4列目）はモバイルでは省略し、横スクロールの原因を作らない */
.expense-table th:nth-child(4),
.expense-table td:nth-child(4) {
  display: none;
}

.month-group-header {
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.85rem;
  padding-top: 14px;
  border-bottom: 1px solid var(--color-border);
}

.category-classification {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.85em;
}

.fixed-cost-name {
  font-weight: 600;
}

.fixed-cost-meta {
  color: var(--color-text-muted);
  font-size: 0.8em;
  margin-top: 2px;
}

.badge-fixed,
.badge-subscription,
.badge-shared,
.badge-private {
  display: inline-block;
  margin-top: 4px;
  margin-right: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.7rem;
  white-space: nowrap;
}

.badge-fixed {
  background: #eaf1ff;
  color: var(--color-primary-dark);
}

.badge-subscription {
  background: #f1eaff;
  color: #6f3fc0;
}

.badge-shared {
  background: #e6f7ee;
  color: #1f8a4c;
}

.badge-private {
  background: #f3f3f3;
  color: var(--color-text-muted);
}

.row-fixed-cost {
  background: #fafbfd;
}

.fixed-cost-hint {
  display: inline-block;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* ---------- 将来の予定：過去の車検歴を反映ボタン ---------- */
.cm-apply-history-row {
  margin-bottom: 16px;
}

.cm-apply-history-row .btn {
  width: 100%;
}

/* ---------- 将来の予定：車検間隔早見表 ---------- */
.reference-table-details {
  margin-bottom: 16px;
}

.reference-table-details summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 4px 0;
}

/* スマホ幅でも横スクロールなしで収まるよう「区分・車種」を1列に集約し、
   「初回」「2回目以降」は別列のまま幅を狭くする。長い車種名は折り返す
   （white-space: nowrapにしない）ことで横スクロールを避ける。 */
.reference-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-top: 8px;
  table-layout: fixed;
}

.reference-table th,
.reference-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  white-space: normal;
  word-break: break-word;
}

.reference-table th:first-child,
.reference-table td:first-child {
  width: 60%;
}

.reference-table th:nth-child(2),
.reference-table td:nth-child(2),
.reference-table th:nth-child(3),
.reference-table td:nth-child(3) {
  width: 20%;
  text-align: center;
}

.reference-table th {
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ---------- 将来の予定：車のメンテナンス ---------- */
.car-maintenance-summary {
  margin: 14px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: right;
}

.car-next-date-soon {
  color: var(--color-danger-dark);
  font-weight: 700;
}

.car-next-date-overdue {
  color: var(--color-danger-dark);
  font-weight: 700;
}

/* ---------- 将来の予定：ふるさと納税シミュレーター ---------- */
.furusato-result {
  text-align: center;
  background: var(--color-bg);
  border-radius: 10px;
  padding: 16px;
  margin: 4px 0 16px;
}

.furusato-result-label {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.furusato-result-value {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  font-variant-numeric: tabular-nums;
}

.furusato-disclaimer {
  margin: 10px 0 0;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.furusato-remaining-text {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
}

.furusato-remaining-text.furusato-remaining-zero {
  color: var(--color-text-muted);
  font-weight: normal;
}

/* ---------- 資産目標：バーンダウンチャートのペース評価 ---------- */
.pace-good {
  color: #1a8a4a;
}

.pace-behind {
  color: var(--color-danger-dark);
}

/* ---------- 資産目標：達成金額／目標金額／残りの併記表示 ---------- */
.asset-goal-summary {
  margin: 0 0 12px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
}

/* ---------- ライフプラン：資産推移グラフの表示期間切り替え（5/15/25/35/45年） ---------- */
.range-tabs {
  display: flex;
  gap: 4px;
  background: var(--color-bg);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 10px;
}

.range-tab {
  flex: 1;
  min-height: var(--tap-min);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: 8px;
  padding: 6px 2px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.range-tab.active {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ---------- ライフプラン：現在の資産額（万円＋円の分割入力） ---------- */
.split-amount-row {
  display: flex;
  gap: 8px;
}

.split-amount-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.split-amount-item input {
  flex: 1;
  min-width: 0;
}

.split-amount-unit {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.actions-col {
  text-align: left;
}

.expense-table td.amount-cell {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 操作列：ボタンが大きくなった分、必要なら折り返して横スクロールを防ぐ（gapで間隔を確保） */
.expense-table td.actions-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  text-align: left;
  white-space: normal;
}

/* =========================================================
   PC・タブレット向け拡張（768px以上）
   ========================================================= */
@media (min-width: 768px) {
  .container {
    padding-bottom: var(--spacing);
  }

  /* 上部タブを表示し、下部固定ナビは隠す */
  .tab-nav {
    display: flex;
    background: var(--color-primary);
    gap: 4px;
    padding: 0 max(var(--spacing), calc((100% - 760px) / 2));
  }

  .tab-nav .tab-btn {
    flex: 1;
    color: rgba(255, 255, 255, 0.75);
    padding: 12px 8px;
    min-height: var(--tap-min);
    font-size: 0.9rem;
    border-bottom: 3px solid transparent;
  }

  .tab-nav .tab-btn.active {
    color: #fff;
    border-bottom-color: #fff;
    font-weight: 600;
  }

  .bottom-nav {
    display: none !important;
  }

  /* PCでは保存ボタンをフォーム内の通常配置に戻す（画面が広く固定表示の必要性が低いため） */
  .form-actions {
    position: static;
    box-shadow: none;
    padding: 0;
    margin-top: 4px;
  }

  #expenseForm,
  #fixedCostForm {
    padding-bottom: 0;
  }

  #expenseListWrap,
  #fixedCostListWrap {
    padding-bottom: 0;
  }

  .expense-table {
    font-size: 0.9rem;
  }

  .expense-table th,
  .expense-table td {
    padding: 8px 6px;
  }

  .expense-table th:nth-child(4),
  .expense-table td:nth-child(4) {
    display: table-cell;
  }

  .month-total {
    float: right;
    display: inline;
    margin-top: 0;
  }

  .actions-col {
    text-align: right;
  }

  .expense-table td.actions-cell {
    display: table-cell;
    text-align: right;
    white-space: nowrap;
  }

  .actions-cell button + button {
    margin-left: 6px;
  }

  .category-classification {
    display: inline;
  }
}

/* ---------- ライフプラン：資産クラス一覧／ライフイベント一覧（1行1件のコンパクトな表） ----------
   .expense-tableの「4列目はモバイルで省略」ルールは、この2つの表では列の意味が異なる
   （4列目＝積立額／想定費用）ため、まずそれを無効化した上で、列ごとに固定幅を割り当てる。 */
.asset-class-table,
.life-event-table {
  table-layout: fixed;
  font-size: 0.72rem;
}

.asset-class-table th,
.asset-class-table td,
.life-event-table th,
.life-event-table td {
  padding: 8px 3px;
  font-size: 0.7rem;
  text-align: center;
}

/* 見出し・データの列揃えを表全体で中央揃えに統一する（.expense-table側のamount-cell右寄せ・
   actions-col左寄せのルールより詳細度を上げて上書きする）。 */
.asset-class-table td.amount-cell,
.life-event-table td.amount-cell,
.asset-class-table th.actions-col,
.life-event-table th.actions-col {
  text-align: center;
}

.asset-class-table th:nth-child(4),
.asset-class-table td:nth-child(4),
.life-event-table th:nth-child(4),
.life-event-table td:nth-child(4) {
  display: table-cell;
}

.asset-class-table td.amount-cell,
.life-event-table td.amount-cell {
  white-space: normal;
}

.asset-class-table th:nth-child(1),
.asset-class-table td:nth-child(1) {
  width: 20%;
}

.asset-class-table th:nth-child(2),
.asset-class-table td:nth-child(2) {
  width: 13%;
}

.asset-class-table th:nth-child(3),
.asset-class-table td:nth-child(3),
.asset-class-table th:nth-child(4),
.asset-class-table td:nth-child(4) {
  width: 23%;
}

.asset-class-table th:nth-child(5),
.asset-class-table td:nth-child(5) {
  width: 21%;
}

/* 操作列のボタンは横並びのままだと収まらないため、縦に並べて幅を確保する。
   tdの display は table-cell のまま変更しない（display:blockにするとtable-layout:fixedの
   列幅計算からこのセルが外れてしまい、列幅が崩れるため）。ボタン自体をブロック化して縦に積む。 */
.asset-class-table td.actions-cell,
.life-event-table td.actions-cell {
  display: table-cell;
  white-space: normal;
  text-align: center;
}

.asset-class-table td.actions-cell button,
.life-event-table td.actions-cell button {
  display: block;
  width: 100%;
}

.asset-class-table td.actions-cell button + button,
.life-event-table td.actions-cell button + button {
  margin-top: 4px;
}

.life-event-table th:nth-child(1),
.life-event-table td:nth-child(1) {
  width: 34%;
}

.life-event-table th:nth-child(2),
.life-event-table td:nth-child(2) {
  width: 18%;
}

.life-event-table th:nth-child(3),
.life-event-table td:nth-child(3) {
  width: 26%;
}

.life-event-table th:nth-child(4),
.life-event-table td:nth-child(4) {
  width: 22%;
}

/* ---------- テーマ：やさしい・あたたかみ系（クリーム×テラコッタの暖色パレットに差し替え） ---------- */
body[data-theme="warm"] {
  --color-bg: #fdf3e7;
  --color-surface: #fffaf3;
  --color-primary: #e8916a;
  --color-primary-dark: #d9784c;
  --color-text: #4a3728;
  --color-text-muted: #9c8570;
  --color-border: #f0ddc4;
  --color-danger: #e0716a;
  --color-danger-dark: #c85850;
}

/* ---------- マスコット機能：猫・犬キャラクター画像（やさしい・あたたかみ系テーマの時のみ表示） ---------- */
.mascot-image {
  display: block;
  width: 96px;
  height: auto;
  margin: 0 auto;
}

/* ヘッダーと一体化したキャラクターメッセージ（改善1）。
   スタンダードテーマでは非表示にし、従来通りシンプルなヘッダーのままにする。
   左に「笑う」、右に「やったー！」を配置し、中央にメッセージを挟む。 */
.header-mascot-row {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 0;
}

body[data-theme="warm"] .header-mascot-row {
  display: flex;
}

.mascot-message-mascot {
  flex-shrink: 0;
}

.mascot-message-mascot:empty {
  display: none;
}

.mascot-message-mascot .mascot-image {
  width: 100px;
  margin: 0;
}

.mascot-message-text {
  margin: 0;
  flex: 1;
  min-width: 0; /* flexアイテムがコンテンツ幅ぶん広がってレイアウトを崩さないようにする */
  text-align: center;
  /* 画面幅に応じて滑らかに拡大し、狭い端末でも折り返さない範囲でできるだけ大きくする
     （左右のキャラクター画像は現状サイズ＝100pxのまま変更しない方針のため、
     文字サイズ側を画面幅に応じて可変にすることで両立させている）。
     実測（canvasでのテキスト幅計測）に基づき、主要なスマホ幅（360px〜）では
     折り返し・省略なしで収まるよう、実際に必要な幅よりわずかに小さめに調整している。
     万一それでも収まりきらない極端に狭い画面向けの保険として、下のellipsisも設定する。 */
  font-size: clamp(0.7rem, calc(10vw - 25px), 1.15rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}

/* グラフタブ・バーンダウンチャート内で使う、中央寄せのマスコット表示欄。
   空の場合（標準テーマ・画像読み込み失敗時）は高さを持たず、レイアウトを圧迫しない。 */
.mascot-inline {
  text-align: center;
  margin-bottom: 8px;
}

.mascot-inline:empty {
  display: none;
  margin-bottom: 0;
}

/* ---------- マスコットの吹き出し（ライフプラン資産推移グラフ・バーンダウンチャート共通） ---------- */
.mascot-speech-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.mascot-speech-row .mascot-image {
  width: 68px;
  margin: 0;
  flex-shrink: 0;
}

/* ライフプラン：資産推移シミュレーションのマスコットは、通常の吹き出し用（68px）の1.3倍、
   セリフの文字サイズも少し大きめにする。バーンダウンチャート側も同じ大きさに揃える。 */
#lifePlanMascotSpeech .mascot-image,
#assetGoalMascotSpeech .mascot-image {
  width: 88px;
}

#lifePlanMascotSpeech .speech-bubble,
#assetGoalMascotSpeech .speech-bubble {
  font-size: 0.95rem;
}

.speech-bubble {
  position: relative;
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.5;
}

.speech-bubble::before,
.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: 16px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.speech-bubble::before {
  left: -9px;
  border-right: 9px solid var(--color-border);
}

.speech-bubble::after {
  left: -7px;
  border-right: 8px solid var(--color-surface);
}

/* 目標達成状況：キャラクターを右側、吹き出し（セリフ）を左側に配置する
   （他の吹き出し利用箇所とは左右逆のレイアウト）。サイズは通常の.mascot-image（96px）の約1.4倍
   （前回の192pxからの約0.7倍）にする。 */
#goalStatusSpeech .mascot-speech-row {
  flex-direction: row-reverse;
  /* 基本形はalign-items:flex-endのため、キャラクター（134px）に対して吹き出しの文字が
     下寄りになり、直下の一覧と重なって見えていた。中央揃えにし、上下の余白も揃えることで、
     見出しと一覧のちょうど中間あたりに来るようにする。 */
  align-items: center;
  margin-bottom: 12px;
}

#goalStatusSpeech .mascot-image {
  width: 134px;
}

#goalStatusSpeech .speech-bubble {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 0.95rem;
  text-align: center;
}

#goalStatusSpeech .speech-bubble::before,
#goalStatusSpeech .speech-bubble::after {
  left: auto;
  border-right: none;
}

#goalStatusSpeech .speech-bubble::before {
  right: -9px;
  border-left: 9px solid var(--color-border);
}

#goalStatusSpeech .speech-bubble::after {
  right: -7px;
  border-left: 8px solid var(--color-surface);
}

/* ---------- 設定タブ：カテゴリ管理 ---------- */
.category-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
}

.category-card-name {
  font-weight: 600;
}

.category-card-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  font-size: 0.85em;
  color: var(--color-text-muted);
}

.category-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.category-reorder-btns {
  display: flex;
  gap: 4px;
}

.category-reorder-btns .btn-icon:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- 支出入力：按分（レシート分割）入力エリア ---------- */
.split-section {
  margin-top: 4px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.split-section h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.split-total-label {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.split-row {
  padding: 10px 0;
  border-bottom: 1px dashed var(--color-border);
}

.split-row:last-child {
  border-bottom: none;
}

.split-row-remove {
  margin-top: 6px;
}

/* ---------- 設定タブ：家族共有 ---------- */
.family-status-box {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--color-bg);
}

.family-status-text {
  margin: 0 0 6px;
  font-weight: 600;
}

.family-invite-code {
  margin: 0 0 10px;
  font-size: 1.1em;
  letter-spacing: 0.05em;
}