/* ============================================================
   style.css — 配達記録アプリ v2
   テーマ: Steel Glass
   改善: ①日ごとモード ②プレビュー ③カレンダー整理
         ④前月比 ⑤前回値 ⑥2段階削除 ⑦ドット表示
         ⑧CSVエクスポート ⑨ステッパー
   ============================================================ */

/*
  初心者向けメモ:
  CSSは「見た目・配置」を決める言語です。
  例:
  - .class は「クラス名」
  - #id は「id名」
  - A B は「Aの中にあるB」
*/

/* ── CSS変数 ── */
:root {
  /* アプリ全体で使う色・サイズをまとめる（後で一括調整しやすい） */
  --bg:          linear-gradient(145deg, #1E293B 0%, #0F172A 100%);
  --card-bg:     rgba(255, 255, 255, 0.055);
  --card-border: 1px solid rgba(255, 255, 255, 0.115);
  --card-blur:   blur(14px);

  --accent:      #34D399;
  --accent-dark: #059669;
  --accent-glow: rgba(52, 211, 153, 0.25);

  --text-primary:   #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted:     #64748B;

  --danger:  #F87171;
  --warning: #FBBF24;
  --success: #34D399;

  --radius:    16px;
  --radius-sm: 10px;
  --spacing:   16px;
  --pad: clamp(0.75rem, 2vw, 1.25rem);
  --btn-h: clamp(2.75rem, 6vw, 3.25rem);
  --header-h: 3.25rem;
}

/* ── リセット ── */
/* ブラウザごとの余白やサイズ差を消す */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* 1rem = 16px に固定（計算しやすい） */
  font-size: 16px;
  /* iOSで文字サイズが勝手に変わるのを抑止 */
  -webkit-text-size-adjust: 100%;
}

body {
  /* フォントはiOSで見やすい標準系 */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'Helvetica Neue', sans-serif;
  /* 背景はグラデーション固定 */
  background:            var(--bg);
  background-attachment: fixed;
  color:     var(--text-primary);
  /* 画面の最小高さをビューポートに合わせる */
  min-height: 100dvh;
  overflow-x: hidden;
  /* タップ時の青いハイライトを消す */
  -webkit-tap-highlight-color: transparent;
}

/* ── ログイン画面 ── */
.auth-screen {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
}
.auth-card {
  width: 100%;
  max-width: 24rem;
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius);
  padding: var(--spacing);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
}
.auth-actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* hidden は汎用的に使う */
.hidden { display: none !important; }

/* ── アプリラッパー ── */
#app {
  /* 画面幅に合わせて中央寄せ */
  width:     100%;
  max-width: 37.5rem;
  margin:    0 auto;
  padding-left:  calc(var(--pad) + env(safe-area-inset-left));
  padding-right: calc(var(--pad) + env(safe-area-inset-right));
  padding-top:   calc(var(--header-h) + env(safe-area-inset-top));
  /* 下部固定ボタン + ホームバー分 */
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

/* ── ヘッダー ── */
.header {
  /* スクロールしてもヘッダーを上に固定 */
  position: fixed;
  top:      0;
  left:     50%;
  transform: translateX(-50%);
  width:    100%;
  max-width: 37.5rem;
  z-index:  100;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: center;
  /* iPhoneのノッチを避けた余白 */
  padding-top:    env(safe-area-inset-top);
  padding-left:   var(--pad);
  padding-right:  var(--pad);
  margin: 0;
  background:              rgba(15, 23, 42, 0.82);
  backdrop-filter:         blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
}
.menu-btn {
  position: absolute;
  left: var(--pad);
  top: calc(env(safe-area-inset-top) + var(--pad));
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 1.25rem;
  cursor: pointer;
}
.menu-btn:active { opacity: 0.6; }
.app-title {
  font-size:      1.0625rem;
  font-weight:    700;
  letter-spacing: 0.06em;
}

/* ── セクション・カード ── */
.section { margin-top: 1rem; }

/* 画面切り替え */
.view { display: none; }
.view.active { display: block; }

.card {
  /* 透け感のあるカード背景（ガラス風） */
  background:              var(--card-bg);
  backdrop-filter:         var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border:        var(--card-border);
  border-radius: var(--radius);
  padding:       var(--spacing);
}

/* カレンダー枠外にスワイプ中の内容が出ないようにする */
#calendarSection {
  overflow: hidden;
}

.section-title {
  /* 見出しは小さく・強調色で統一 */
  font-size:      0.6875rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--accent);
  margin-bottom:  0.75rem;
}

.section-note {
  /* 補足説明は少し薄い色で */
  font-size:     0.75rem;
  color:         var(--text-muted);
  margin-bottom: 0.75rem;
  line-height:   1.5;
}

/* ── カレンダー ── */

/* スワイプアニメーション */
/* will-change はアニメーションの滑らかさを上げるヒント */
.calendar-swipe-wrapper {
  will-change: transform, opacity;
  touch-action: pan-y;
  overflow: hidden;
}

@keyframes slideFromRight {
  from { transform: translateX(1.5rem); opacity: 0.4; }
  to   { transform: translateX(0);      opacity: 1;   }
}
@keyframes slideFromLeft {
  from { transform: translateX(-1.5rem); opacity: 0.4; }
  to   { transform: translateX(0);       opacity: 1;   }
}
.swipe-next { animation: slideFromRight 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.swipe-prev { animation: slideFromLeft  0.28s cubic-bezier(0.22, 1, 0.36, 1); }

.calendar-nav {
  /* 左右ボタンと月表示を横並び */
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   0.75rem;
}

.nav-btn {
  /* 丸みとサイズを固定してタップしやすくする */
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:  2.5rem;
  height: 2.5rem;
  background:    rgba(255, 255, 255, 0.07);
  border:        1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.5rem;
  color:     var(--text-primary);
  font-size: 1.625rem;
  cursor:    pointer;
  line-height: 1;
  transition: background 0.15s;
}
.nav-btn:active { background: rgba(255, 255, 255, 0.16); }

.month-title {
  /* 月表示はボタンとして扱い、タップでピッカーを開く */
  background: none;
  border:     none;
  color:      var(--text-primary);
  font-size:  1.0625rem;
  font-weight: 700;
  cursor:     pointer;
  padding:    0.25rem 0.75rem;
  border-radius: 0.5rem;
  transition: background 0.15s;
}
.month-title:active { background: rgba(255, 255, 255, 0.1); }

/* 曜日ヘッダー */
.calendar-dow {
  /* 7列のグリッドにする */
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 0.25rem;
}
.dow-cell {
  /* 曜日は小さめ文字で区切りを意識 */
  text-align:  center;
  font-size:   0.6875rem;
  font-weight: 600;
  color:       var(--text-muted);
  padding:     0.25rem 0;
}
.dow-sun { color: #F87171; }
.dow-sat { color: #60A5FA; }

/* 日付グリッド */
#calendarGrid {
  /* 7列のカレンダー */
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 3.5rem;
  min-height: 21.625rem; /* 6行分 + gap の高さを確保 */
  gap: 0.125rem;
}

/* ③ 改善: セルは税抜のみ1行（スッキリ）、税込はモーダルへ */
.cal-cell {
  /* 日付セルの見た目 */
  min-height:    3.5rem;   /* 56px */
  background:    rgba(255, 255, 255, 0.035);
  border:        1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.5rem;
  padding:       0.25rem 0.1875rem 0.3125rem;
  cursor:        pointer;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  overflow:      hidden;
  transition:    background 0.15s, border-color 0.15s;
}
.cal-cell:active  { background: rgba(52, 211, 153, 0.14); }
.cal-cell.selected {
  /* 選択中の日付は緑枠＋背景で強調 */
  background:   rgba(52, 211, 153, 0.18);
  border-color: var(--accent);
  box-shadow:   0 0 0 1px var(--accent-glow);
}
.cal-cell.holiday {
  /* 休日は薄い赤系で区別 */
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.35);
}
.cal-holiday-badge {
  font-size: 0.6875rem;
  color: #F87171;
  margin-top: 0.125rem;
  font-weight: 700;
}
.cal-blank {
  /* 月初の空白セルはクリックできない */
  background:    transparent;
  border-color:  transparent;
  cursor:        default;
  pointer-events: none;
}

.cal-day-num {
  font-size:   0.6875rem;
  font-weight: 700;
  color:       var(--text-primary);
  align-self:  flex-start;
  margin-left: 0.125rem;
  line-height: 1.2;
}

/* ⑦ 改善: 記録ありドットインジケーター */
.cal-dot {
  width:         0.3125rem; /* 5px */
  height:        0.3125rem;
  border-radius: 50%;
  background:    var(--accent);
  margin-top:    0.125rem;
  opacity:       0.6;
  flex-shrink:   0;
}
.cal-cell.selected .cal-dot { opacity: 1; }

/* ③ 改善: カレンダーセルに税抜金額のみ表示 */
.cal-amount {
  width:          100%;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  margin-top:     0.125rem;
  position: relative;
  z-index:  1;
}
.cal-tax-ex {
  /* 金額は省略せず、サイズを少し上げる */
  font-size:            0.5rem;
  font-weight:          700;
  color:                var(--accent);
  font-variant-numeric: tabular-nums;
  white-space:   normal;
  overflow:      visible;
  text-overflow: clip;
  max-width:     100%;
  line-height:   1.3;
}

/* ── ① 改善: 計算モード ラジオボタン ── */
.required-badge {
  display:       inline-block;
  font-size:     0.625rem;
  font-weight:   700;
  color:         #0F172A;
  background:    var(--danger);
  border-radius: 0.25rem;
  padding:       0.0625rem 0.375rem;
  margin-left:   0.375rem;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

.mode-radio-group {
  /* 2つのラジオを横並びにする */
  display: flex;
  flex-direction: column;
  gap:     0.5rem;
}

#workdayGroup .mode-radio-content small {
  color: var(--text-muted);
}

/* 設定で選ぶ「現在のモード」表示 */
.mode-current {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-weight: 700;
}

.mode-radio-label {
  flex:        1;
  display:     flex;
  align-items: flex-start;
  gap:         0.5rem;
  padding:     0.75rem;
  background:  rgba(255, 255, 255, 0.04);
  border:      1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-sm);
  cursor:      pointer;
  transition:  background 0.15s, border-color 0.15s;
}
.mode-radio-label:has(input:checked) {
  background:   rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.4);
}

/* カスタムラジオボタン */
.mode-radio-label input[type="radio"] {
  appearance:         none;
  -webkit-appearance: none;
  width:     1.125rem;
  height:    1.125rem;
  min-width: 1.125rem;
  border:        2px solid var(--text-muted);
  border-radius: 50%;
  background:    transparent;
  cursor:        pointer;
  margin-top:    0.125rem;
  position:      relative;
  transition:    border-color 0.15s, background 0.15s;
  flex-shrink:   0;
}
.mode-radio-label input[type="radio"]:checked {
  border-color: var(--accent);
  background:   var(--accent);
}
.mode-radio-label input[type="radio"]:checked::after {
  content:       '';
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  width:         0.375rem;
  height:        0.375rem;
  border-radius: 50%;
  background:    #0F172A;
}

.mode-radio-content strong {
  display:      block;
  font-size:    0.875rem;
  color:        var(--text-primary);
  margin-bottom: 0.1875rem;
}
.mode-radio-content small {
  font-size:  0.6875rem;
  color:      var(--text-secondary);
  line-height: 1.4;
}

/* ── ⑨ 改善: ±ステッパー ── */
.stepper-wrap {
  /* + / 入力 / - を横並びにする */
  display: flex;
  gap:     0.375rem;
  align-items: center;
}

.stepper-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:     2.75rem; /* 44px: タップしやすい最低サイズ */
  height:    3rem;
  min-width: 2.75rem;
  background: rgba(255, 255, 255, 0.08);
  border:        1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color:         var(--text-primary);
  font-size:     1.25rem;
  font-weight:   300;
  cursor:        pointer;
  transition:    background 0.12s, transform 0.1s;
  user-select:   none;
  -webkit-user-select: none;
  flex-shrink: 0;
}
.stepper-btn:active {
  background: rgba(52, 211, 153, 0.18);
  transform:  scale(0.94);
}

.stepper-input {
  /* ステッパー中央: 幅を縮めて両脇のボタンと並ぶ */
  flex:       1;
  min-width:  0;
  text-align: center;
}

/* ── フォーム共通 ── */
.form-group { margin-bottom: 0.75rem; }

.form-label {
  display:       block;
  font-size:     0.8125rem;
  font-weight:   500;
  color:         var(--text-secondary);
  margin-bottom: 0.375rem;
}

.form-input {
  /* 入力欄は高さ固定＋16pxでiOSズーム対策 */
  width:      100%;
  height:     3rem;
  background: rgba(255, 255, 255, 0.07);
  border:        1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color:         var(--text-primary);
  font-size:     1rem; /* 16px: iOSズーム防止 */
  font-family:   inherit;
  padding:       0 0.875rem;
  font-variant-numeric: tabular-nums;
  appearance:         none;
  -webkit-appearance: none;
  transition: border-color 0.2s, background 0.2s;
}
.form-input:focus {
  outline:      none;
  border-color: var(--accent);
  background:   rgba(52, 211, 153, 0.06);
}
.form-input[readonly] { color: var(--text-secondary); cursor: default; }
textarea.form-input {
  height: auto;
  min-height: 5.5rem;
  padding: 0.5rem 0.875rem;
  line-height: 1.4;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ── ② 改善: リアルタイムプレビュー ── */
.calc-preview {
  /* プレビュー枠。中身が空なら非表示 */
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           0.5rem;
  min-height:    3rem;
  background:    rgba(52, 211, 153, 0.07);
  border:        1px solid rgba(52, 211, 153, 0.2);
  border-radius: var(--radius-sm);
  padding:       0.625rem 0.875rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  /* 値がないときは非表示 */
}
.calc-preview:empty {
  display: none;
}
.total-count-display {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
}
.total-count-display:empty { display: none; }
.preview-label {
  font-size:  0.75rem;
  color:      var(--text-muted);
  flex-basis: 100%;
  text-align: center;
  margin-bottom: 0.1875rem;
}
.preview-ex {
  font-size:            1.125rem;
  font-weight:          800;
  color:                var(--accent);
  font-variant-numeric: tabular-nums;
}
.preview-sep { color: var(--text-muted); font-size: 0.875rem; }
.preview-in {
  font-size:            0.875rem;
  color:                var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ⑤ 改善: 前回値ボタン */
.btn-ghost {
  display:     block;
  width:       100%;
  padding:     0.5rem;
  background:  none;
  border:      none;
  color:       var(--text-muted);
  font-size:   0.8125rem;
  font-family: inherit;
  cursor:      pointer;
  text-align:  center;
  text-decoration: underline;
  text-decoration-color: rgba(100, 116, 139, 0.4);
  text-underline-offset: 3px;
  transition: color 0.15s;
  margin-bottom: 0.25rem;
}
.btn-ghost:active { color: var(--text-secondary); }

/* メッセージ */
.form-message {
  font-size:  0.8125rem;
  min-height: 1.25rem;
  margin-top: 0.25rem;
  transition: color 0.2s;
}
.form-message.error   { color: var(--danger);  }
.form-message.success { color: var(--success); }

/* ── ボタン ── */
.btn-primary {
  /* 主要アクションボタン（保存） */
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:       100%;
  height:      3.25rem;
  background:  var(--accent);
  color:       #0F172A;
  border:      none;
  border-radius: var(--radius-sm);
  font-size:   1rem;
  font-weight: 700;
  font-family: inherit;
  cursor:      pointer;
  transition:  background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow:  0 4px 16px var(--accent-glow);
  letter-spacing: 0.03em;
}
.btn-primary:active {
  background: var(--accent-dark);
  transform:  scale(0.978);
  box-shadow: none;
}

.btn-secondary {
  /* サブボタン（控除保存やCSVなど） */
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:      2.5rem;
  padding:     0 1rem;
  background:  rgba(255, 255, 255, 0.07);
  color:       var(--text-primary);
  border:      1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  font-size:   0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor:      pointer;
  transition:  background 0.15s;
}
.btn-secondary:active { background: rgba(255, 255, 255, 0.14); }
.btn-full { width: 100%; height: 3rem; font-size: 0.9375rem; }

/* ── ④ 改善: 月合計・前月比 ── */
#monthlyTotals {
  /* 月合計は縦並びで表示 */
  display:        flex;
  flex-direction: column;
}

.total-row {
  /* 1行のラベルと値を左右に配置 */
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         0.5rem 0;
  border-bottom:   1px solid rgba(255, 255, 255, 0.055);
  font-size:       0.875rem;
}
.total-row:last-child { border-bottom: none; }
.total-label { color: var(--text-secondary); }
.total-value {
  font-weight:          600;
  font-variant-numeric: tabular-nums;
  text-align:           right;
}

.total-divider {
  /* セクション区切り線 */
  height:     1px;
  background: rgba(255, 255, 255, 0.08);
  margin:     0.375rem 0;
}

.total-row--final {
  font-size: 1rem;
  padding-top: 0.625rem;
}
.total-row--final .total-label { color: var(--text-primary); font-weight: 600; }
.total-row--final .total-value { color: var(--accent); font-size: 1.0625rem; }

/* ④ 前月比行 */
.total-row--compare {
  /* 前月比の強調ブロック */
  padding:       0.5rem 0.625rem;
  border-bottom: none;
  background:    rgba(255, 255, 255, 0.03);
  border-radius: 0.5rem;
  margin-top:    0.25rem;
}
.total-row--compare .total-label {
  font-size: 0.75rem;
  color:     var(--text-muted);
}
.compare-value {
  font-size:            0.875rem;
  font-weight:          700;
  font-variant-numeric: tabular-nums;
}
.compare-value.up   { color: var(--success); }
.compare-value.down { color: var(--danger);  }
.compare-value.flat { color: var(--text-muted); }

/* ── テーブル ── */
.table-scroll {
  /* スマホで横スクロールできるようにする */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
}
.table-scroll::-webkit-scrollbar { height: 3px; }
.table-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2); border-radius: 99px;
}

table {
  /* 表の最小幅を確保して横スクロールを発生させる */
  width:           100%;
  min-width:       33rem;
  border-collapse: collapse;
  font-size:       0.75rem;
}

/* ── データ診断 ── */
.diagnostic-block {
  margin-bottom: 0.75rem;
}
.diagnostic-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.diagnostic-value {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  word-break: break-all;
}
th {
  background:     rgba(52, 211, 153, 0.1);
  color:          var(--accent);
  font-weight:    700;
  font-size:      0.6875rem;
  letter-spacing: 0.04em;
  padding:        0.625rem 0.5rem;
  text-align:     center;
  white-space:    nowrap;
}
td {
  padding:              0.625rem 0.5rem;
  text-align:           center;
  border-bottom:        1px solid rgba(255, 255, 255, 0.055);
  color:                var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space:          nowrap;
}
tr:last-child td { border-bottom: none; }
.table-empty { padding: 1.5rem; text-align: center; color: var(--text-muted); }

/* ⑥ 改善: 2段階削除ボタン */
.btn-delete {
  /* 削除ボタン（危険操作なので赤系） */
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:        2rem;
  height:       2rem;
  background:   rgba(248, 113, 113, 0.1);
  border:       1px solid rgba(248, 113, 113, 0.3);
  border-radius: 0.375rem;
  color:        var(--danger);
  font-size:    0.6875rem;
  font-weight:  700;
  font-family:  inherit;
  cursor:       pointer;
  transition:   background 0.2s, border-color 0.2s, color 0.2s, width 0.2s;
  white-space:  nowrap;
}
/* 1回目タップ後: 確認状態（幅が広がり色が変わる） */
.btn-delete--armed {
  width:        4rem;
  background:   rgba(248, 113, 113, 0.28);
  border-color: var(--danger);
  color:        var(--danger);
  animation:    armedPulse 0.8s ease infinite;
}
@keyframes armedPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
  50%       { box-shadow: 0 0 0 4px rgba(248,113,113,0.25); }
}

/* ── 下部固定保存バー ── */
.save-bar {
  /* 画面下に固定される保存バー */
  position: fixed;
  bottom:   0;
  left:     0;
  right:    0;
  z-index:  100;
  padding:  0.75rem var(--pad);
  padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom));
  background:              rgba(15, 23, 42, 0.9);
  backdrop-filter:         blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  /* 入力欄の上に重ならないようにする（クリックを邪魔しない） */
  pointer-events: none;
}
.save-bar .btn-primary { pointer-events: auto; }

/* メニュー一覧 */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* テーマ切替 */
.theme-toggle {
  display: flex;
  gap: 0.5rem;
}

/* 年間グラフ */
.annual-chart {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.25rem;
  align-items: end;
  min-height: 10rem;
}
.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.bar-stack {
  display: flex;
  gap: 0.125rem;
  align-items: flex-end;
  height: 8rem;
}
.bar {
  width: 0.5rem;
  border-radius: 0.25rem;
  background: var(--accent);
}
.bar.inc { background: #60A5FA; }
.bar-label {
  font-size: 0.625rem;
  color: var(--text-muted);
}
.chart-legend {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.legend-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.legend-swatch {
  width: 0.75rem;
  height: 0.5rem;
  background: var(--accent);
  border-radius: 0.125rem;
}
.legend-swatch.inc { background: #60A5FA; }

/* ライトモード */
body.theme-light {
  --bg: #F4F6FB;
  --card-bg: #FFFFFF;
  --card-border: 1px solid #0F172A;
  --card-blur: blur(0px);
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;
}
body.theme-light .header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
body.theme-light .save-bar {
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
body.theme-light .modal-content {
  background: #FFFFFF;
  border: 1px solid #0F172A;
  color: #0F172A;
}
body.theme-light .modal-title,
body.theme-light .section-note,
body.theme-light .modal-actions .btn-secondary,
body.theme-light .modal-actions .btn-primary {
  color: #0F172A;
}
body.theme-light .modal-overlay {
  background: rgba(0, 0, 0, 0.15);
}
body.theme-light .memo-row,
body.theme-light .confirm-row {
  border: 1px solid #0F172A;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
}
body.theme-light .menu-list .btn-secondary,
body.theme-light .modal-actions .btn-secondary,
body.theme-light .modal-actions .btn-primary,
body.theme-light .picker-select {
  border: 1px solid #0F172A;
}

/* ライトモード: ホームの各項目を黒枠で囲う（バーガーメニュー以外） */
body.theme-light .card,
body.theme-light .form-input,
body.theme-light .stepper-btn,
body.theme-light .mode-current,
body.theme-light .calc-preview,
body.theme-light .table-scroll,
body.theme-light .btn-ghost {
  border: 1px solid #0F172A;
}
body.theme-light .cal-cell.holiday {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(220, 38, 38, 0.4);
}
.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* ── モーダル共通 ── */
.modal {
  /* 画面全体を覆うモーダルのベース */
  position: fixed;
  inset:    0;
  z-index:  200;
  display:  flex;
  align-items: stretch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
/* モーダル専用の非表示クラス（display:noneにしないのでアニメーションできる） */
.modal.is-hidden { opacity: 0; pointer-events: none; }
.modal:not(.is-hidden) { opacity: 1; pointer-events: auto; }

.modal-overlay {
  /* 背景の暗いスクリーン */
  position:                absolute;
  inset:                   0;
  background:              rgba(0, 0, 0, 0.55);
  backdrop-filter:         blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: opacity;
}

.modal-content {
  /* モーダル本体のパネル */
  position:   relative;
  width:      100%;
  max-width:  22rem;
  background: #1C2537;
  border:     1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  padding:     1.5rem var(--spacing);
  padding-bottom: 1.5rem;
  margin-top: calc(env(safe-area-inset-top) + var(--pad));
  margin-bottom: calc(env(safe-area-inset-bottom) + var(--pad));
  max-height: calc(100dvh - (env(safe-area-inset-top) + env(safe-area-inset-bottom) + 2 * var(--pad)));
  overflow-y:  auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-110%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.modal:not(.is-hidden) .modal-content {
  transform: translateX(0);
}
.modal:not(.is-hidden) .modal-overlay {
  opacity: 1;
}
/* 閉じる時は右へ抜ける */
.modal.is-closing .modal-content {
  transform: translateX(110%);
}
/* 閉じる時は背景もフェードアウト */
.modal.is-closing .modal-overlay {
  opacity: 0;
}

.modal-title {
  font-size:    1rem;
  font-weight:  700;
  text-align:   center;
  margin-bottom: 1rem;
}

.modal-actions {
  /* モーダル内のボタン横並び */
  display: flex;
  gap:     0.625rem;
  margin-top: 1rem;
}
.modal-actions .btn-secondary { flex: 1; height: 3rem; font-size: 0.9375rem; }
.modal-actions .btn-primary   { flex: 2; }
.modal-actions--single .btn-primary { flex: 1; }

/* ── ピッカー ── */
.picker-row { display: flex; gap: 0.75rem; margin-bottom: 0.25rem; }
.picker-select {
  /* 年/月のセレクトボックス */
  flex:       1;
  height:     3rem;
  background: rgba(255, 255, 255, 0.08);
  border:        1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  color:         var(--text-primary);
  font-size:     1rem;
  font-family:   inherit;
  padding:       0 0.75rem;
  appearance:         none;
  -webkit-appearance: none;
  text-align:    center;
  cursor:        pointer;
}
.picker-select option { background: #1C2537; color: var(--text-primary); }

/* ── メモモーダル ── */
#memoBody { display: flex; flex-direction: column; gap: 0; margin-bottom: 0.25rem; }
.memo-row {
  /* 詳細モーダルの1行 */
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         0.625rem 0;
  border-bottom:   1px solid rgba(255, 255, 255, 0.06);
  font-size:       0.9375rem;
}
.memo-row:last-child { border-bottom: none; }
.memo-label { color: var(--text-secondary); }
.memo-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.memo-row--total .memo-value { color: var(--accent); font-size: 1.0625rem; }

/* ── 保存確認モーダル ── */
#saveConfirmBody {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0.25rem;
}
.confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.625rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.9375rem;
}
.confirm-row:last-child { border-bottom: none; }
.confirm-label { color: var(--text-secondary); }
.confirm-value { font-weight: 600; font-variant-numeric: tabular-nums; }