<!--
=============================================================
  レシート管理アプリ 機能概要
=============================================================

【基本機能】
  - Gemini API（モデル選択可）でレシート画像を解析し店舗名・日付・商品・金額を抽出
  - 店舗名からチェーン・ブランド名（store_brand）を自動抽出（例：アピタ名古屋→アピタ）
  - 通常モード（1枚）／分割モード（最大5枚）の撮影に対応
  - データは IndexedDB に保存（サーバー不要）
  - 複数ユーザー切り替え対応
  - Gemini API 呼び出しは指数バックオフ付きリトライ（最大5回・429/50x対応）
  - ブラウザ戻るボタン対応（History API によるモーダル・詳細ビューの閉じ処理）
  - バックグラウンドからの復帰時（visibilitychange / pageshow）に表示を自動更新

【追加タブ】
  - レシート画像のアップロード・解析・プレビュー確認・保存
  - 解析完了後、保存前にプレビューを直接編集可能
    - 店舗名・日付・時刻の編集（✏️ 店舗・日付ボタン）
    - 各商品の名前・カテゴリ・金額の編集（商品行タップ or ✏️ボタン）
    - 商品の削除・新規追加（＋ 商品を追加ボタン）
  - 解析完了時にブラウザ通知を送信

【履歴タブ】
  - レシート一覧（追加順／日付新しい順／日付古い順）
  - 商品名でのインクリメンタル検索（ヒット件数表示・マッチ箇所ハイライト）
  - 一覧の金額を常に右端に揃える
  - レシート詳細表示（店舗名・日付・商品一覧）
  - 店舗名・日付・時刻の編集
  - 商品ごとの名前・カテゴリ・金額編集／削除
  - 割り勘機能：人数指定で1人あたり金額を表示（詳細ビュー内）
  - 再カテゴライズボタン（🔄）：Gemini API でカテゴリを再割り当て
    - 同時実行は最大5件まで制限
    - 店名からの一括カテゴライズ（コンビニ・外食等）も反映
    - store_brand（チェーン名）も同時に再抽出・更新

【集計タブ】
  - グループモード切り替え：📊 商品カテゴリ別 / 🏪 店別
  - 期間フィルター（今月／今週／年月／年間／カスタム／全期間）
  - 合計支出・レシート数・商品数のサマリー
  - 棒グラフ／円グラフ切り替え（Chart.js 4.4.1）
  - カテゴリ別モード：大カテゴリ → 中カテゴリ → 小カテゴリの3段階ドリルダウン
    - バーだけでなくY軸ラベル（カテゴリ名）タップでも選択可能
  - 小カテゴリ選択時、グラフ下に該当レシート一覧を表示
    - 履歴タブのカードUI（再カテゴライズボタン含む）を流用
  - カードタップで集計タブ内に詳細を表示（タブ移動なし）
    - 詳細ビューでも割り勘機能を利用可能
    - ← 戻るで小カテゴリ選択済みのリスト表示に戻る
  - 年間表示：特定の年を選んで月別支出グラフ（棒・折れ線切り替え）
    - 月バータップでその月のカテゴリ別支出グラフをドリルダウン表示

【設定】
  - Gemini API キーの登録
  - 使用モデルの選択（gemini-2.5-flash / 2.0-flash / 1.5-flash / 1.5-flash-8b）
  - 大中カテゴリ管理（largeDef）：大カテゴリの追加・編集・削除、中カテゴリの割り当て（複数可）
    - JSON エクスポート／インポート対応
  - 中小カテゴリ管理（categoryDef）：中／小カテゴリの追加・編集・削除
    - 小カテゴリはドラッグ＆ドロップで並び替え（PC・スマホ対応）
    - JSON エクスポート／インポート対応
  - 店カテゴリ管理（store_def）：レシート保存時に store_brand を自動登録、手動追加・編集・削除対応
  - データのバックアップ（JSON エクスポート／インポート、重複スキップ）

【カテゴリ管理】
  - 大カテゴリ（largeDef）・中カテゴリ（categoryDef）・小カテゴリを localStorage に保存
  - 大カテゴリは中カテゴリをidで管理（名前変更時に自動追従）
  - Gemini プロンプトにカテゴリ定義を自動埋め込み
  - コンビニ・外食等の店舗タイプ系カテゴリは店名から自動判定

=============================================================
-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>家計簿</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Space+Mono&display=swap');


  :root {
    --bg: #111;
    --surface: #1c1c1c;
    --surface2: #272727;
    --border: #333;
    --accent: #c8ff57;
    --text: #f0f0f0;
    --text-dim: #777;
    --danger: #ff5050;
    --radius: 10px;
    --btn-on-accent: #111;
  }

  /* ライトテーマ */
  body.theme-light {
    --bg: #f0ede8;
    --surface: #faf8f5;
    --surface2: #ede9e3;
    --border: #d8d2c8;
    --accent: #2d6a4f;
    --text: #1a1814;
    --text-dim: #8a8278;
    --danger: #c0392b;
    --btn-on-accent: #fff;
  }

  /* ライトテーマ ボタン調整 */
  body.theme-light .btn-primary { color: #fff; }
  body.theme-light .btn-secondary { background: #e8e4dd; color: var(--text); }
  body.theme-light .btn-danger:hover { background: #fde8e6; color: var(--danger); }
  body.theme-light .btn-delete-receipt:hover { background: #fde8e6; }
  body.theme-light .period-btn.active { color: #fff; }
  body.theme-light .stat-type-btn.active-expense { background: #fff5f5; }
  body.theme-light .group-mode-btn.active { background: #fff; }
  body.theme-light .mode-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
  body.theme-light .view-toggle-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
  body.theme-light .chart-type-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
  body.theme-light .manual-cat-opt.active { color: var(--accent); background: #e8f4ef; }
  body.theme-light .manual-mid-opt.active,
  body.theme-light .manual-small-opt.active { color: var(--accent); }
  body.theme-light .store-select-opt.active { color: var(--accent); background: #e8f4ef; }
  body.theme-light .recategorize-btn { background: var(--surface2); border-color: var(--border); color: var(--text-dim); }
  body.theme-light .split-toggle::after { background: #fff; }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  /* カメラ起動時ユーザー名トースト */
  #user-toast {
    position: fixed;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: #fff;
    color: #222;
    font-size: 14px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    padding: 10px 22px;
    border-radius: 24px;
    white-space: nowrap;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    transition: opacity 0.2s, transform 0.2s;
  }
  #user-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* 自動保存カウントダウン。タップで停止できるよう pointer-events を有効にする */
  #autosave-toast {
    position: fixed;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    width: calc(100% - 32px);
    max-width: 420px;
    box-sizing: border-box;
    background: #1f2933;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    font-size: 13px;
    line-height: 1.5;
    font-family: 'Noto Sans JP', sans-serif;
    padding: 12px 16px;
    border-radius: 12px;
    text-align: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transition: opacity 0.2s, transform 0.2s;
  }
  #autosave-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
  #autosave-toast .autosave-sub {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.75;
  }
  #autosave-toast .autosave-count {
    font-weight: 700;
    font-size: 15px;
  }

  /* 初期セットアップの案内。モーダルより手前に出すが、
     pointer-events: none にして下のユーザー追加・APIキー入力の操作を妨げない */
  #onboard-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    width: calc(100% - 32px);
    max-width: 420px;
    box-sizing: border-box;
    background: #1f2933;
    color: #fff;
    border: 1px solid var(--accent);
    font-size: 13px;
    line-height: 1.6;
    font-family: 'Noto Sans JP', sans-serif;
    padding: 12px 16px;
    border-radius: 12px;
    text-align: center;
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.45);
    transition: opacity 0.2s, transform 0.2s;
  }
  #onboard-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  #onboard-toast .onboard-sub {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.75;
  }

  body {
    font-family: 'Noto Sans JP', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: 110px;
  }

  /* ヘッダー */
  .header {
    padding: 20px 16px 12px;
    border-bottom: 1px solid var(--border);
    /* 左右を同じ幅（1fr）にして中央列を真ん中に保つ。
       右に更新日時を追加してもユーザー名がずれないようにするため */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
  }
  .header h1 { min-width: 0; }
  .header-center {
    display: flex;
    justify-content: center;
    min-width: 0;
  }
  .header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
  }
  .header h1 {
    font-family: 'Space Mono', monospace;
    font-size: 18px;
    letter-spacing: 1px;
    color: var(--accent);
  }
  /* ファイルの更新日時（ユーザー名と設定ボタンの間） */
  .build-label {
    flex-shrink: 1;
    margin: 0;
    font-size: 10px;
    line-height: 1.25;
    color: var(--text-dim);
    text-align: right;
    white-space: pre-line;
  }

  .settings-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 6px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
  }
  .settings-btn:hover { border-color: var(--accent); color: var(--accent); }

  /* セクション */
  .section { padding: 16px; }

  /* カード */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
  }
  .card-title {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
  }

  /* 入力欄 */
  input[type="text"], input[type="password"] {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 14px;
    font-family: 'Space Mono', monospace;
    outline: none;
  }
  input:focus { border-color: var(--accent); }

  /* ボタン */
  .btn {
    width: 100%;
    padding: 12px;
    border-radius: var(--radius);
    border: none;
    font-size: 14px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
  }
  .btn:hover { opacity: 0.85; }
  .btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .btn-primary { background: var(--accent); color: var(--btn-on-accent); margin-top: 10px; }
  .btn-secondary {
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
    margin-top: 8px;
  }

  /* アップロードゾーン */
  .upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 32px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s;
    position: relative;
  }
  .upload-zone:hover, .upload-zone.drag-over {
    border-color: var(--accent);
  }
  .upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }
  /* 長押し（ファイルから選択）用：選択メニュー・テキスト選択を抑止 */
  .upload-zone, .add-photo-btn {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  /* 長押しが成立した状態のフィードバック */
  .upload-zone.lp-ready, .add-photo-btn.lp-ready {
    border-style: solid;
    border-color: var(--accent);
    color: var(--accent);
  }
  .upload-icon { font-size: 36px; margin-bottom: 8px; }
  .upload-label { font-size: 14px; color: var(--text-dim); }
  .upload-sublabel { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

  /* プレビュー */
  #preview-img {
    width: 100%;
    border-radius: var(--radius);
    margin-top: 12px;
    display: none;
    max-height: 200px;
    object-fit: cover;
  }

  /* ステータス */
  .status {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 10px;
  }
  .status.loading {
    align-items: center;
    gap: 10px;
    background: var(--surface2);
    color: var(--text-dim);
  }
  .status.error {
    background: #2a1212;
    color: var(--danger);
    border: 1px solid var(--danger);
  }
  .status.success {
    background: #1a2a10;
    color: var(--accent);
    border: 1px solid var(--accent);
  }

  /* スピナー */
  .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* 解析結果プレビュー */
  #result-preview {
    display: none;
    margin-top: 12px;
  }
  .result-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
  }
  .result-store { font-size: 15px; font-weight: 700; }
  .result-date { font-size: 12px; color: var(--text-dim); }
  .result-total {
    font-family: 'Space Mono', monospace;
    font-size: 18px;
    color: var(--accent);
    margin-bottom: 12px;
  }

  .item-list { list-style: none; }
  .item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    gap: 8px;
  }
  .item-row:last-child { border-bottom: none; }
  .item-name { flex: 1; }
  .item-cat {
    font-size: 11px;
    color: var(--text-dim);
    background: var(--surface2);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: normal;
    word-break: break-all;
    max-width: 180px;
    line-height: 1.4;
  }
  .item-price {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    white-space: nowrap;
  }

  /* 履歴リスト */
  .history-list { list-style: none; }
  .history-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .history-left { flex: 1; min-width: 0; }
  .history-store { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
  .history-date { font-size: 12px; color: var(--text-dim); }
  .history-right { text-align: right; flex-shrink: 0; min-width: 96px; }
  .history-total {
    font-family: 'Space Mono', monospace;
    font-size: 15px;
    color: var(--accent);
    min-width: 60px;
    text-align: right;
  }
  .history-count { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
  .history-chevron { color: var(--text-dim); font-size: 16px; flex-shrink: 0; margin-left: 4px; }

  .empty-state {
    text-align: center;
    padding: 40px 16px;
    color: var(--text-dim);
    font-size: 14px;
  }

  /* 設定モーダル */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 200;
    align-items: center;
    justify-content: center;
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    width: calc(100% - 32px);
    max-width: 420px;
    position: relative; /* 右上の✕ボタンの基準 */
  }
  .modal-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--accent);
  }
  /* 直下のタイトルだけ✕ぶんの余白を空ける（エディタ類の入れ子タイトルは対象外） */
  .modal > .modal-title { padding-right: 34px; }
  /* 全モーダル共通：右上角の閉じるボタン */
  .modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-dim);
    font-size: 15px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    z-index: 2;
  }
  .modal-close:active {
    background: var(--border);
    color: var(--text);
  }
  .modal-label {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 6px;
  }

  /* タブ（ボトムナビゲーション） */
  .tabs {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 100;
    margin-bottom: 0;
  }
  .tab {
    flex: 1;
    padding: 24px 4px 20px;
    text-align: center;
    font-size: 14px;
    color: var(--text-dim);
    cursor: pointer;
    border-top: 2px solid transparent;
    transition: all 0.15s;
  }
  .tab.active {
    color: var(--accent);
    border-top-color: var(--accent);
  }

  .tab-content { display: none; }
  .tab-content.active { display: block; }

  .section-title {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 12px;
    padding-top: 4px;
  }

  /* 履歴ソート */
  .history-sort-bar {
    display: flex;
    background: var(--surface2);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
  }
  .sort-btn {
    flex: 1;
    padding: 6px 4px;
    border: none;
    background: none;
    color: var(--text-dim);
    font-size: 11px;
    font-family: inherit;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .sort-btn.active {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
  }

  /* 商品名検索 */
  .history-search-bar {
    display: flex;
    align-items: center;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 12px;
    gap: 6px;
  }
  .history-search-bar input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
  }
  .history-search-bar input::placeholder { color: var(--text-dim); }
  .history-search-clear {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    display: none;
  }
  .history-search-match {
    font-size: 11px;
    color: var(--accent);
    background: var(--surface2);
    border-radius: 4px;
    padding: 1px 6px;
    margin-bottom: 8px;
    display: none;
  }
  .history-item-highlight {
    background: rgba(200,255,87,0.18);
    border-radius: 3px;
    padding: 0 2px;
  }


  /* 複数画像プレビュー */
  .multi-preview {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .preview-thumb {
    position: relative;
    width: calc(50% - 4px);
  }
  .preview-thumb img {
    width: 100%;
    border-radius: 6px;
    display: block;
    max-height: 120px;
    object-fit: cover;
    border: 1px solid var(--border);
  }
  .preview-thumb-del {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .preview-thumb-label {
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
    margin-top: 3px;
  }
  .add-photo-btn {
    width: calc(50% - 4px);
    min-height: 80px;
    border: 2px dashed var(--border);
    border-radius: 6px;
    background: none;
    color: var(--text-dim);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
  }
  .add-photo-btn:hover { border-color: var(--accent); color: var(--accent); }
  .add-photo-btn input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  /* 編集・削除ボタン */
  .detail-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }
  .btn-edit {
    flex: 1;
    padding: 9px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
  }
  .btn-edit:hover { border-color: var(--accent); color: var(--accent); }
  .btn-delete-receipt {
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid var(--danger);
    background: transparent;
    color: var(--danger);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
  }
  .btn-delete-receipt:hover { background: color-mix(in srgb, var(--danger) 15%, var(--surface)); }
  .detail-item-row { position: relative; }
  .item-edit-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
    flex-shrink: 0;
  }
  .item-edit-btn:hover { color: var(--accent); }

  /* 編集モーダル */
  .modal-label { margin-top: 12px; }
  .modal-label:first-of-type { margin-top: 0; }
  .modal-row {
    display: flex;
    gap: 8px;
  }
  .modal-row input { flex: 1; }
  select {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
  }
  select:focus { border-color: var(--accent); }
  .btn-danger {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
    margin-top: 8px;
  }
  .btn-danger:hover { background: color-mix(in srgb, var(--danger) 15%, var(--surface)); }

  /* 詳細画面 */
  .detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 57px;
    background: var(--bg);
    z-index: 90;
  }
  .back-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 6px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    white-space: nowrap;
  }
  .back-btn:hover { border-color: var(--accent); color: var(--accent); }
  .detail-title-block { flex: 1; min-width: 0; }
  .detail-store {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .detail-date { font-size: 12px; color: var(--text-dim); }
  .detail-total-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-dim);
  }
  .detail-total-amount {
    font-family: 'Space Mono', monospace;
    font-size: 18px;
    color: var(--accent);
  }
  .detail-items { padding: 12px 16px; }
  .detail-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    gap: 8px;
  }
  .detail-item-row:last-child { border-bottom: none; }
  .detail-item-left { flex: 1; min-width: 0; }
  .detail-item-name {
    font-size: 14px;
    margin-bottom: 3px;
    word-break: break-all;
  }
  .detail-item-cat {
    font-size: 11px;
    color: var(--text-dim);
    background: var(--surface2);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    white-space: normal;
    word-break: break-all;
    line-height: 1.4;
  }
  .detail-item-price {
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    white-space: nowrap;
  }
  .detail-item-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .detail-item-split {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--accent);
    opacity: 0.75;
    white-space: nowrap;
  }

  /* 割り勘バー */
  .split-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  .split-bar-label { color: var(--text-dim); flex-shrink: 0; }
  .split-toggle {
    width: 36px; height: 20px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s;
  }
  .split-toggle.on { background: var(--accent); border-color: var(--accent); }
  .split-toggle::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    background: var(--bg);
    border-radius: 50%;
    top: 2px; left: 2px;
    transition: left 0.2s;
  }
  .split-toggle.on::after { left: 18px; }
  .split-count-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }
  .split-count-wrap.hidden { display: none; }
  .split-count-btn {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    width: 26px; height: 26px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
  }
  .split-count-btn:hover { border-color: var(--accent); color: var(--accent); }
  .split-count-val {
    font-family: 'Space Mono', monospace;
    font-size: 15px;
    min-width: 24px;
    text-align: center;
  }
  .split-count-unit { font-size: 12px; color: var(--text-dim); }

  /* ===== 集計タブ ===== */
  .period-selector {
    display: flex;
    gap: 6px;
    padding: 12px 16px 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .period-selector::-webkit-scrollbar { display: none; }
  .period-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
  }
  .period-btn.active {
    background: var(--accent);
    color: var(--btn-on-accent);
    border-color: var(--accent);
    font-weight: 700;
  }
  /* 期間バーの前後移動ボタン */
  .period-selector-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 12px 0;
  }
  .period-selector-wrap .period-selector {
    flex: 1;
    min-width: 0;
    padding: 0;
  }
  .period-nav-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
    font-size: 16px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .period-nav-btn:disabled { opacity: 0.25; cursor: default; }

  .stats-summary {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
  }
  .stats-summary-card {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    text-align: center;
  }
  .stats-summary-label {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 4px;
  }
  .stats-summary-value {
    font-family: 'Space Mono', monospace;
    font-size: 15px;
    color: var(--accent);
  }

  /* 収支サマリーバー */
  .balance-bar {
    display: flex;
    gap: 8px;
    margin: 12px 16px 0;
  }
  .balance-card {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 8px;
    text-align: center;
  }
  .balance-label {
    font-size: 10px;
    color: var(--text-dim);
    margin-bottom: 3px;
    letter-spacing: 0.5px;
  }
  .balance-value {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 700;
  }
  .balance-value.expense { color: #ff6b6b; }
  .balance-value.income  { color: var(--accent); }
  .balance-value.surplus { color: var(--accent); }
  .balance-value.deficit { color: #ff6b6b; }

  /* グループ切替バー */
  /* 支出/収入タブ */
  .stat-type-bar {
    display: flex;
    margin: 10px 16px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
  }
  .stat-type-btn {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: var(--surface2);
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.5px;
  }
  .stat-type-btn.active-expense {
    background: var(--surface);
    color: #ff6b6b;
    border-bottom: 2px solid #ff6b6b;
  }
  .stat-type-btn.active-income {
    background: var(--surface);
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
  }

  .group-mode-bar {
    display: flex;
    background: var(--surface2);
    border-radius: 8px;
    padding: 3px;
    margin: 8px 16px 0;
    border: 1px solid var(--border);
  }
  .group-mode-btn {
    flex: 1;
    padding: 8px;
    border: none;
    background: none;
    color: var(--text-dim);
    font-size: 13px;
    font-family: inherit;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .group-mode-btn.active {
    background: var(--surface);
    color: var(--accent);
    border: 1px solid var(--border);
    font-weight: 700;
  }

  /* グラフ切り替えトグル */
  .chart-type-toggle {
    display: flex;
    background: var(--surface2);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
  }
  .chart-type-btn {
    flex: 1;
    padding: 7px;
    border: none;
    background: none;
    color: var(--text-dim);
    font-size: 12px;
    font-family: inherit;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .chart-type-btn.active {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
  }

  .chart-section {
    padding: 0 16px 16px;
  }
  .chart-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    margin-top: 16px;
  }
  .chart-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    flex: 1;
  }
  .chart-back-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    display: none;
  }
  .chart-back-btn.visible { display: block; }
  .chart-back-btn:hover { border-color: var(--accent); color: var(--accent); }
  .chart-hint {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 8px;
  }
  .chart-container {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
  }
  .stats-empty {
    text-align: center;
    padding: 60px 16px;
    color: var(--text-dim);
    font-size: 14px;
  }

  /* 再カテゴライズボタン */
  .recat-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s, transform 0.15s;
  }
  .recat-btn:hover { opacity: 1; }
  .recat-btn.spinning { animation: spin 0.7s linear infinite; opacity: 1; pointer-events: none; }
  .recat-btn.error { opacity: 1; filter: drop-shadow(0 0 3px var(--danger)); }

  /* 設定モーダル */
  #settings-modal {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  #settings-modal .modal {
    margin: 16px auto;
  }

  /* タグの✕・✏️ボタンホバー */
  #cat-editor-list button:hover {
    opacity: 0.75;
  }

  /* select要素スタイル統一（モーダル内） */
  .modal select {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 14px;
    font-family: 'Noto Sans JP', sans-serif;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    display: block;
    margin-bottom: 4px;
  }
  .modal select:focus { border-color: var(--accent); }

  /* 大カテゴリselectはアクセントボーダーで区別 */
  #edit-item-large-cat { border-color: var(--accent) !important; }

  /* カテゴリ編集アコーディオン：ヘッダーホバー */
  .middle-card [role="button"]:hover { background: var(--surface) !important; }
  .middle-card [role="button"]:active { opacity: 0.85; }

  /* ユーザーリスト */
  .user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
  }
  .user-item:last-child { border-bottom: none; }
  .user-item-name {
    flex: 1;
    font-size: 13px;
    color: var(--text-dim);
    opacity: 0.9;
  }
  .active-user .user-item-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    opacity: 1;
  }
  .user-item-badge {
    font-size: 11px;
    color: var(--accent);
    background: rgba(200,255,87,0.12);
    border: 1px solid var(--accent);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
  }
  .user-item-del {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.4;
    padding: 2px 4px;
  }
  .user-item-del:hover { opacity: 1; }

  /* 手入力モード切り替え */
  .mode-toggle {
    display: flex;
    background: var(--surface2);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
  }
  .mode-btn {
    flex: 1;
    padding: 7px 4px;
    border: none;
    background: none;
    color: var(--text-dim);
    font-size: 12px;
    font-family: inherit;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .mode-btn.active {
    background: var(--surface);
    color: var(--accent);
    border: 1px solid var(--border);
    font-weight: 700;
  }

  /* 手入力商品行 */
  .manual-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    gap: 8px;
    font-size: 13px;
  }
  .manual-item-row:last-child { border-bottom: none; }
  /* 追加済みリスト：中身がないときは余白を作らない */
  #manual-items-list:empty { display: none; }
  .manual-item-del {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 15px;
    cursor: pointer;
    padding: 2px 4px;
    flex-shrink: 0;
  }
  .manual-cat-item {
    padding: 10px 0;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
  }
  .manual-cat-item:last-child { border-bottom: none; }
  .manual-cat-item.active { color: var(--accent); font-weight: 700; }
  .manual-cat-opt {
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
  }
  .manual-cat-opt:last-child { border-bottom: none; }
  .manual-cat-opt:active { background: var(--surface); }
  .manual-cat-opt.active { color: var(--accent); font-weight: 700; }

  /* カレンダービュー */
  .history-view-toggle {
    display: flex;
    background: var(--surface2);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
  }
  .view-toggle-btn {
    flex: 1;
    padding: 7px 4px;
    border: none;
    background: none;
    color: var(--text-dim);
    font-size: 12px;
    font-family: inherit;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .view-toggle-btn.active {
    background: var(--surface);
    color: var(--accent);
    border: 1px solid var(--border);
    font-weight: 700;
  }
  .cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .cal-nav-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 16px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cal-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
  .cal-month-label {
    font-family: 'Space Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
  }
  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 8px;
  }
  .cal-dow {
    text-align: center;
    font-size: 10px;
    color: var(--text-dim);
    padding: 4px 0;
  }
  .cal-dow.sun { color: #ff6b6b; }
  .cal-dow.sat { color: #6b9fff; }
  .cal-cell {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    min-height: 52px;
    padding: 4px 3px 3px;
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .cal-cell.has-data { cursor: pointer; border-color: #444; }
  .cal-cell.has-data:active { background: var(--surface2); }
  .cal-cell.today { border-color: var(--accent); }
  .cal-cell.empty { background: transparent; border-color: transparent; }
  .cal-day-num {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-dim);
    line-height: 1;
    margin-bottom: 3px;
    align-self: flex-start;
    padding-left: 1px;
  }
  .cal-cell.today .cal-day-num { color: var(--accent); font-weight: 700; }
  .cal-day-num.sun { color: #ff6b6b; }
  .cal-day-num.sat { color: #6b9fff; }
  .cal-dot-row {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2px;
  }
  .cal-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.7;
  }
  .cal-amount {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
    line-height: 1.2;
  }
  .cal-day-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 8px;
    overflow: hidden;
  }
  .cal-day-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
  }
  .cal-day-panel-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 18px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
  }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
</head>
<body>

<!-- カメラ起動時ユーザー名トースト -->
<div id="user-toast"></div>

<!-- 自動保存カウントダウントースト（タップで停止） -->
<div id="autosave-toast" onclick="stopAutoSaveByUser()"></div>

<!-- 初期セットアップ案内トースト（ユーザー追加 / APIキー保存の促し） -->
<div id="onboard-toast"></div>

<!-- ヘッダー -->
<div class="header">
  <h1>家計簿</h1>
  <div class="header-center">
    <button class="user-btn" onclick="openUserModalWithHistory()">
      <span class="user-icon">👤</span>
      <span id="current-user-label">未選択</span>
    </button>
  </div>
  <div class="header-right">
    <span id="build-label" class="build-label"></span>
    <button class="settings-btn" onclick="openSettingsWithHistory()">⚙ 設定</button>
  </div>
</div>

<!-- データ保全バナー（永続化未許可 / バックアップ未実施の警告） -->
<div id="data-safety-banner" style="display:none; margin:8px 12px 0; padding:10px 12px; border-radius:8px; font-size:12px; line-height:1.6; background:var(--surface2); border:1px solid var(--danger); color:var(--text);"></div>

<!-- ユーザーモーダル -->
<div class="modal-overlay" id="user-modal">
  <div class="modal">
    <button type="button" class="modal-close" onclick="closeModal('user-modal')" aria-label="閉じる">✕</button>
    <div class="modal-title">👤 ユーザー切り替え</div>
    <ul class="user-list" id="user-list"></ul>
    <div style="border-top:1px solid var(--border); padding-top:12px;">
      <div class="modal-label">新しいユーザーを追加</div>
      <div class="user-add-row">
        <input type="text" id="new-user-input" placeholder="ユーザー名" maxlength="20">
        <button class="btn-sm" onclick="addUser()">追加</button>
      </div>
    </div>
    <div style="border-top:1px solid var(--border); margin:12px 0;"></div>
    <div class="modal-label">データのバックアップ</div>
    <div id="export-status" style="font-size:12px; color:var(--text-dim); margin-bottom:8px;"></div>
    <button class="btn btn-primary" id="share-export-btn" onclick="shareExportData()" style="display:none;">📨 共有（Claude・Driveへ直接送る）</button>
    <button class="btn btn-secondary" onclick="exportData()">📤 エクスポート（JSON保存）</button>
    <label style="display:block; position:relative; width:100%; margin-top:8px;">
      <input type="file" accept=".json" id="import-file-input" style="position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;">
      <div class="btn btn-secondary" style="margin-top:0; text-align:center; pointer-events:none;">📥 インポート（JSONから復元）</div>
    </label>
    <button class="btn btn-secondary" style="margin-top:12px;" onclick="closeModal('user-modal')">閉じる</button>
  </div>
</div>

<!-- ユーザー削除ロック：認証モーダル -->
<div class="modal-overlay" id="delete-auth-modal">
  <div class="modal">
    <button type="button" class="modal-close" onclick="cancelDeleteAuth()" aria-label="閉じる">✕</button>
    <div class="modal-title">🔒 削除の確認</div>
    <div id="delete-auth-target" style="font-size:13px;color:var(--text-dim);margin-bottom:12px;"></div>

    <!-- 生体認証 -->
    <div id="delete-auth-bio" style="display:none;">
      <p style="font-size:13px;color:var(--text-dim);margin-bottom:12px;">端末の生体認証で本人確認します。</p>
      <button class="btn btn-primary" onclick="runDeleteAuthBiometric()">🔓 生体認証で確認</button>
    </div>

    <!-- パスワード（Chrome の「パスワードを保存しますか」を出さないため
         form + username/current-password のログインフォーム構造を使わない -->
    <div id="delete-auth-form" style="display:none;">
      <div class="modal-label">削除用パスワード</div>
      <input type="password" id="delete-auth-password" name="delete-auth-pin"
             autocomplete="off" placeholder="パスワードを入力"
             enterkeyhint="done" aria-label="削除用パスワード">
      <button type="button" class="btn btn-primary" onclick="submitDeleteAuthPassword()">確認して削除</button>
    </div>

    <div id="delete-auth-msg" style="font-size:12px;min-height:16px;margin-top:8px;"></div>
    <button class="btn btn-secondary" onclick="cancelDeleteAuth()">キャンセル</button>
  </div>
</div>

<!-- ユーザー削除ロック：設定モーダル -->
<div class="modal-overlay" id="delete-lock-modal">
  <div class="modal">
    <button type="button" class="modal-close" onclick="closeModal('delete-lock-modal')" aria-label="閉じる">✕</button>
    <div class="modal-title">🔒 ユーザー削除ロック</div>
    <p style="font-size:12px;color:var(--text-dim);margin-bottom:12px;">
      ユーザー削除は取り消せないため、実行前に本人確認を求めます。
    </p>
    <div id="delete-lock-current" style="font-size:13px;margin-bottom:14px;"></div>

    <div id="delete-lock-bio-section" style="display:none;">
      <button class="btn btn-secondary" onclick="registerDeleteBiometric()">👆 生体認証を登録する</button>
    </div>
    <div id="delete-lock-bio-unavailable" style="font-size:12px;color:var(--text-dim);margin-bottom:10px;display:none;"></div>

    <div id="delete-lock-form">
      <div class="modal-label">新しい削除用パスワード</div>
      <input type="password" id="delete-lock-new" name="delete-lock-pin"
             autocomplete="off" placeholder="4文字以上" aria-label="新しい削除用パスワード">
      <div class="modal-label" style="margin-top:10px;">確認のため再入力</div>
      <input type="password" id="delete-lock-new2" name="delete-lock-pin-confirm"
             autocomplete="off" placeholder="もう一度入力" aria-label="パスワード再入力">
      <button type="button" class="btn btn-primary" onclick="saveDeleteLockPassword()">🔑 パスワードを設定</button>
    </div>

    <button class="btn btn-secondary" onclick="clearDeleteLock()">ロックを解除（無効化）</button>
    <div id="delete-lock-msg" style="font-size:12px;min-height:16px;margin-top:8px;"></div>
    <button class="btn btn-secondary" onclick="closeModal('delete-lock-modal')">閉じる</button>
  </div>
</div>

<!-- アップロードタブ -->
<div id="tab-upload" class="tab-content active">
  <div class="section">

    <div class="card">
      <div class="card-title">レシート画像</div>

      <!-- モード切り替え -->
      <div class="mode-toggle">
        <button class="mode-btn active" id="mode-single" onclick="setMode('single')">📄 通常（1枚）</button>
        <button class="mode-btn" id="mode-multi" onclick="setMode('multi')">📋 分割（複数枚）</button>
      </div>

      <!-- 通常モード -->
      <div id="single-mode-ui">
        <div class="upload-zone" id="upload-zone">
          <input type="file" accept="image/*" capture="environment" id="file-input" onchange="onFileSelected(event)">
          <div class="upload-icon">📄</div>
          <div class="upload-label">タップして撮影</div>
          <div class="upload-sublabel">長押しでファイルから選択／JPG・PNG対応</div>
        </div>
        <!-- 長押し時に使う「ファイルから選択」用（capture なし＝カメラを起動しない） -->
        <input type="file" accept="image/*" id="file-input-gallery" style="display:none;" onchange="onFileSelected(event)">
        <img id="preview-img" alt="プレビュー">
      </div>

      <!-- 分割モード -->
      <div id="multi-mode-ui" style="display:none;">
        <div class="multi-preview" id="multi-preview"></div>
      </div>
    </div>

    <!-- 分割モードのみ解析ボタンを表示（通常モードは画像選択後に自動解析） -->
    <button class="btn btn-primary" id="analyze-btn" onclick="analyzeReceipt()" disabled style="display:none;">
      解析する
    </button>

    <!-- ステータス -->
    <div class="status loading" id="status-loading" style="display:none;">
      <div class="spinner"></div>
      <span>Geminiで解析中...</span>
    </div>
    <div class="status error" id="status-error" style="display:none;">
      <span id="status-error-msg"></span>
      <button id="retry-btn" onclick="analyzeReceipt()" style="display:none;margin-top:10px;width:100%;padding:9px;border-radius:8px;border:1px solid var(--danger);background:transparent;color:var(--danger);font-size:13px;font-family:inherit;cursor:pointer;font-weight:700;">🔄 同じ写真で再スキャン</button>
    </div>
    <div class="status success" id="status-success" style="display:none;"></div>

    <!-- 解析結果プレビュー -->
    <div id="result-preview">
      <div class="card">
        <div class="result-header">
          <div>
            <div class="result-store" id="res-store">—</div>
            <span id="res-store-brand" style="display:none;font-size:11px;color:var(--text-dim);background:var(--surface2);padding:2px 8px;border-radius:10px;margin-top:3px;"></span>
          </div>
          <div class="result-date" id="res-date">—</div>
        </div>
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
          <div class="result-total" id="res-total" style="margin-bottom:0;">¥—</div>
          <button onclick="openPreviewReceiptEdit()" style="background:none;border:1px solid var(--border);color:var(--text-dim);font-size:12px;padding:4px 10px;border-radius:6px;cursor:pointer;font-family:inherit;">✏️ 店舗・日付</button>
        </div>
        <ul class="item-list" id="res-items"></ul>
        <button onclick="openPreviewAddItem()" style="width:100%;margin-top:10px;background:none;border:1px dashed var(--border);color:var(--text-dim);font-size:12px;padding:8px;border-radius:6px;cursor:pointer;font-family:inherit;">＋ 商品を追加</button>
      </div>
      <button class="btn btn-primary" onclick="saveReceipt()">💾 保存する</button>
      <button class="btn btn-secondary" onclick="resetUpload()">やり直す</button>
    </div>

  </div>

  <!-- ===== 手入力セクション ===== -->
  <div class="section" id="manual-entry-section">
    <div class="card" id="manual-entry-card">
      <div class="card-title">✍️ 手入力で追加</div>

      <!-- 追加済み商品・保存メッセージ（入力欄より上に表示） -->
      <ul class="item-list" id="manual-items-list" style="margin-bottom:12px;"></ul>

      <input type="hidden" id="manual-store" value="手入力">
      <input type="hidden" id="manual-time" value="">

      <!-- 支出/収入 -->
      <div style="margin-bottom:14px;">
        <div style="display:flex;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:3px;gap:0;">
          <button id="entry-type-expense" onclick="setManualEntryType('expense')"
            class="view-toggle-btn active" style="flex:1;font-size:13px;">💸 支出</button>
          <button id="entry-type-income" onclick="setManualEntryType('income')"
            class="view-toggle-btn" style="flex:1;font-size:13px;">💰 収入</button>
        </div>
      </div>

      <!-- 日付 -->
      <div style="margin-bottom:12px;">
        <div class="modal-label" style="margin-bottom:4px;">日付</div>
        <div style="display:flex;align-items:center;gap:6px;">
          <button onclick="manualDateShift(-1)" style="flex-shrink:0;width:36px;height:40px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text-dim);font-size:18px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;">‹</button>
          <input type="date" id="manual-date" style="flex:1;min-width:0;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:10px 8px;color:var(--text);font-size:14px;outline:none;text-align:center;">
          <button onclick="manualDateShift(+1)" style="flex-shrink:0;width:36px;height:40px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text-dim);font-size:18px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;">›</button>
        </div>
      </div>

      <!-- 商品名 -->
      <div style="margin-bottom:12px;">
        <div class="modal-label" style="margin-bottom:4px;">商品名</div>
        <input type="text" id="manual-item-name" placeholder="" style="width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text);font-size:14px;outline:none;">
      </div>

      <!-- 支出 -->
      <div id="manual-large-row" style="margin-bottom:12px;">
        <div style="margin-bottom:4px;">
          <div class="modal-label">支出</div>
        </div>

        <!-- カテゴリ ドロップダウン -->
        <div id="manual-cat-dropdown" style="position:relative;margin-bottom:8px;">
          <div id="manual-cat-selected" onclick="toggleManualCatDropdown()"
            style="display:flex;justify-content:space-between;align-items:center;
                   background:var(--surface2);border:1px solid var(--border);border-radius:6px;
                   padding:10px 12px;cursor:pointer;font-size:14px;color:var(--text);">
            <span id="manual-cat-label">食費</span>
            <span id="manual-cat-arrow" style="font-size:12px;color:var(--text-dim);">▼</span>
          </div>
          <div id="manual-cat-list" style="display:none;position:absolute;top:100%;left:0;right:0;
               background:var(--surface2);border:1px solid var(--border);border-radius:6px;
               margin-top:4px;z-index:100;overflow-y:auto;max-height:45vh;">
            <div class="manual-cat-opt active" onclick="chooseManualCat(0,'食費')">食費</div>
            <div class="manual-cat-opt" onclick="chooseManualCat(1,'日用品')">日用品</div>
            <div class="manual-cat-opt" onclick="chooseManualCat(2,'衣服')">衣服</div>
            <div class="manual-cat-opt" onclick="chooseManualCat(3,'美容')">美容</div>
            <div class="manual-cat-opt" onclick="chooseManualCat(4,'医療・健康')">医療・健康</div>
            <div class="manual-cat-opt" onclick="chooseManualCat(5,'交通費')">交通費</div>
            <div class="manual-cat-opt" onclick="chooseManualCat(6,'住居費')">住居費</div>
            <div class="manual-cat-opt" onclick="chooseManualCat(7,'水道・光熱費')">水道・光熱費</div>
            <div class="manual-cat-opt" onclick="chooseManualCat(8,'通信費')">通信費</div>
            <div class="manual-cat-opt" onclick="chooseManualCat(9,'教育・教養')">教育・教養</div>
            <div class="manual-cat-opt" onclick="chooseManualCat(10,'趣味・娯楽')">趣味・娯楽</div>
            <div class="manual-cat-opt" onclick="chooseManualCat(11,'交際費')">交際費</div>
            <div class="manual-cat-opt" onclick="chooseManualCat(12,'サービス')">サービス</div>
            <div class="manual-cat-opt" onclick="chooseManualCat(13,'保険・税金')">保険・税金</div>
            <div class="manual-cat-opt" onclick="chooseManualCat(14,'ネットショッピング')">ネットショッピング</div>
            <div class="manual-cat-opt" onclick="chooseManualCat(15,'チャージ・入金')">チャージ・入金</div>
            <div class="manual-cat-opt" onclick="chooseManualCat(16,'未分類')">未分類</div>
          </div>
        </div>

        <div id="manual-large-grid" style="display:none;"></div>

        <!-- 中カテゴリ ドロップダウン（大カテゴリ選択後に表示） -->
        <div id="manual-mid-dropdown" style="display:none;padding-left:14px;margin-bottom:8px;border-left:2px solid var(--border);">
          <div style="position:relative;">
            <div id="manual-mid-selected" onclick="toggleManualMidDropdown()"
              style="display:flex;justify-content:space-between;align-items:center;
                     background:var(--surface2);border:1px solid var(--border);border-radius:6px;
                     padding:7px 10px;cursor:pointer;font-size:13px;color:var(--text);">
              <span id="manual-mid-label" style="color:var(--text-dim);font-size:12px;"></span>
              <span id="manual-mid-arrow" style="font-size:11px;color:var(--text-dim);">▼</span>
            </div>
            <div id="manual-mid-list" style="display:none;position:absolute;top:100%;left:0;right:0;
                 background:var(--surface2);border:1px solid var(--border);border-radius:6px;
                 margin-top:4px;z-index:101;overflow-y:auto;max-height:200px;">
            </div>
          </div>
        </div>

        <!-- 小カテゴリ ドロップダウン（中カテゴリ選択後に表示・任意） -->
        <div id="manual-small-dropdown" style="display:none;padding-left:28px;margin-bottom:8px;border-left:2px solid var(--border);">
          <div style="position:relative;">
            <div id="manual-small-selected" onclick="toggleManualSmallDropdown()"
              style="display:flex;justify-content:space-between;align-items:center;
                     background:var(--surface2);border:1px solid var(--border);border-radius:6px;
                     padding:7px 10px;cursor:pointer;font-size:13px;color:var(--text);">
              <span id="manual-small-label" style="color:var(--text-dim);font-size:12px;"></span>
              <span id="manual-small-arrow" style="font-size:11px;color:var(--text-dim);">▼</span>
            </div>
            <div id="manual-small-list" style="display:none;position:absolute;top:100%;left:0;right:0;
                 background:var(--surface2);border:1px solid var(--border);border-radius:6px;
                 margin-top:4px;z-index:101;overflow-y:auto;max-height:200px;">
            </div>
          </div>
        </div>
        <div style="display:flex;align-items:center;gap:8px;">
          <input type="number" id="manual-item-price" placeholder="" style="flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text);font-size:14px;outline:none;">
          <span style="font-size:14px;color:var(--text-dim);white-space:nowrap;">円</span>
        </div>
      </div>

      <!-- 複数商品をまとめて登録するための追加ボタン -->
      <button id="manual-add-item-btn" onclick="addManualItem()"
        style="width:100%;margin-bottom:12px;background:none;border:1px dashed var(--border);color:var(--text-dim);font-size:12px;padding:8px;border-radius:6px;cursor:pointer;font-family:inherit;">＋ 商品を追加</button>

      <!-- 店舗名 -->
      <div id="manual-store-area" style="margin-bottom:12px;">
        <div class="modal-label" style="margin-bottom:4px;">店舗名<span style="font-size:11px;color:var(--text-dim);font-weight:400;margin-left:6px;">（オプション）</span></div>
        <!-- 選択 / 手入力 切り替えタブ -->
        <div style="display:flex;gap:6px;margin-bottom:6px;">
          <button id="store-mode-select-btn" onclick="setStoreMode('select')"
            style="flex:1;padding:5px 0;font-size:12px;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:var(--btn-on-accent,#111);font-family:inherit;cursor:pointer;font-weight:700;">一覧から選択</button>
          <button id="store-mode-input-btn" onclick="setStoreMode('input')"
            style="flex:1;padding:5px 0;font-size:12px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text-dim);font-family:inherit;cursor:pointer;">手入力</button>
        </div>
        <!-- 選択モード -->
        <div id="store-select-wrap" style="position:relative;">
          <div onclick="toggleStoreDropdown()"
            style="display:flex;justify-content:space-between;align-items:center;
                   background:var(--surface2);border:1px solid var(--border);border-radius:6px;
                   padding:10px 12px;cursor:pointer;font-size:14px;color:var(--text);">
            <span id="store-select-label" style="color:var(--text-dim);">店舗を選択</span>
            <span id="store-select-arrow" style="font-size:12px;color:var(--text-dim);">▼</span>
          </div>
          <div id="store-select-list" style="display:none;position:absolute;top:100%;left:0;right:0;
               background:var(--surface2);border:1px solid var(--border);border-radius:6px;
               margin-top:4px;z-index:102;overflow-y:auto;max-height:200px;">
          </div>
        </div>
        <!-- 手入力モード -->
        <div id="store-input-wrap" style="display:none;">
          <input type="text" id="manual-store-text" placeholder="店舗名を入力"
            oninput="document.getElementById('manual-store').value=this.value||'手入力'"
            style="width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text);font-size:14px;outline:none;">
        </div>
      </div>

      <!-- 中カテゴリ（非表示・addManualItemで参照のみ） -->
      <select id="manual-item-middle" style="display:none;"></select>
      <!-- 小カテゴリ（非表示） -->
      <div id="manual-small-wrap" style="display:none;"></div>
      <div id="manual-cat-import-hint" style="display:none;"></div>
      <div id="manual-add-item-form" style="display:none;"></div>

      <span id="manual-total" style="display:none;"></span>

      <!-- 保存結果メッセージ（「保存する」のすぐ上） -->
      <div id="manual-save-msg" style="display:none;font-size:13px;text-align:center;padding:6px 0 2px;"></div>

      <button class="btn btn-primary" onclick="saveManualReceipt()">💾 保存する</button>
      <button class="btn btn-secondary" onclick="clearManualEntry()">🗑 クリア</button>
    </div>
  </div>
</div>

<!-- 履歴タブ -->
<div id="tab-history" class="tab-content">
  <!-- 一覧ビュー -->
  <div id="history-list-view">
    <div class="section">
      <!-- ビュー切り替え -->
      <div class="history-view-toggle">
        <button class="view-toggle-btn active" id="view-btn-cal" onclick="switchHistoryView('cal')">📅 カレンダー</button>
        <button class="view-toggle-btn" id="view-btn-list" onclick="switchHistoryView('list')">☰ リスト</button>
      </div>

      <!-- リストビュー本体 -->
      <div id="history-list-body" style="display:none;">
        <div class="history-sort-bar">
        <button class="sort-btn active" id="sort-added" onclick="setHistorySort('added')">追加順</button>
        <button class="sort-btn" id="sort-date-desc" onclick="setHistorySort('date-desc')">日付新しい順</button>
        <button class="sort-btn" id="sort-date-asc" onclick="setHistorySort('date-asc')">日付古い順</button>
      </div>
      <div class="history-search-bar">
        <span style="color:var(--text-dim);font-size:14px;">🔍</span>
        <input type="text" id="history-search-input" placeholder="商品名で検索…"
          oninput="onHistorySearchInput()" autocomplete="off" autocorrect="off" spellcheck="false">
        <button class="history-search-clear" id="history-search-clear" onclick="clearHistorySearch()">✕</button>
      </div>
      <div class="history-search-match" id="history-search-match"></div>

      <!-- 一括再カテゴライズ -->
      <div id="bulk-recat-bar" style="margin-bottom:10px;">
        <button id="bulk-recat-btn" onclick="startBulkRecategorize()"
          style="width:100%;padding:9px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text-dim);font-size:13px;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;">
          🔄 全件まとめて再カテゴライズ
        </button>
        <div id="bulk-recat-progress" style="display:none;margin-top:8px;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;">
            <span id="bulk-recat-label" style="font-size:12px;color:var(--text-dim);">準備中...</span>
            <button onclick="cancelBulkRecategorize()"
              style="background:none;border:1px solid var(--border);color:var(--text-dim);font-size:11px;padding:2px 8px;border-radius:5px;cursor:pointer;font-family:inherit;">
              キャンセル
            </button>
          </div>
          <div style="background:var(--surface2);border-radius:4px;height:6px;overflow:hidden;border:1px solid var(--border);">
            <div id="bulk-recat-bar-fill" style="height:100%;background:var(--accent);width:0%;transition:width 0.3s;border-radius:4px;"></div>
          </div>
        </div>
      </div>

      <ul class="history-list" id="history-list"></ul>
      </div><!-- /#history-list-body -->

      <!-- カレンダービュー本体 -->
      <div id="history-cal-body">
        <div class="cal-nav">
          <button class="cal-nav-btn" onclick="calChangeMonth(-1)">‹</button>
          <span class="cal-month-label" id="cal-month-label">—</span>
          <button class="cal-nav-btn" onclick="calChangeMonth(+1)">›</button>
        </div>
        <div class="cal-grid" id="cal-grid"></div>
        <div id="cal-day-panel" style="display:none;"></div>
      </div>

    </div>
  </div>
  <!-- 詳細ビュー -->
  <div id="history-detail-view" style="display:none;">
    <div class="detail-header">
      <button class="back-btn" onclick="backFromDetail()">← 戻る</button>
      <div class="detail-title-block">
        <div class="detail-store" id="detail-store">—</div>
        <span id="detail-store-brand" style="display:none;font-size:10px;color:var(--text-dim);background:var(--surface2);padding:1px 8px;border-radius:8px;margin-top:2px;display:none;"></span>
        <div class="detail-date" id="detail-date">—</div>
      </div>
    </div>
    <div class="detail-total-bar">
      <span>合計金額</span>
      <span class="detail-total-amount" id="detail-total">¥—</span>
    </div>
    <div class="detail-actions">
      <button class="btn-edit" onclick="openReceiptEditModal()">✏️ 店舗名・日付を編集</button>
      <button class="btn-delete-receipt" onclick="deleteCurrentReceipt()">🗑 削除</button>
    </div>
    <div class="split-bar" id="split-bar-history">
      <span class="split-bar-label">割り勘</span>
      <div class="split-toggle" id="split-toggle-history" onclick="toggleSplit('history')"></div>
      <div class="split-count-wrap hidden" id="split-count-wrap-history">
        <button class="split-count-btn" onclick="changeSplitCount('history', -1)">−</button>
        <span class="split-count-val" id="split-count-val-history">2</span>
        <span class="split-count-unit">人</span>
        <button class="split-count-btn" onclick="changeSplitCount('history', +1)">＋</button>
      </div>
    </div>
    <div class="detail-items" id="detail-items"></div>
  </div>
</div>

<!-- 集計タブ -->
<div id="tab-stats" class="tab-content">
  <!-- 収支サマリーバー -->
  <div class="balance-bar">
    <div class="balance-card">
      <div class="balance-label">💸 支出</div>
      <div class="balance-value expense" id="balance-expense">¥—</div>
    </div>
    <div class="balance-card">
      <div class="balance-label">💰 収入</div>
      <div class="balance-value income" id="balance-income">¥—</div>
    </div>
    <div class="balance-card">
      <div class="balance-label">収支</div>
      <div class="balance-value" id="balance-net">¥—</div>
    </div>
  </div>
  <div class="stat-type-bar">
    <button class="stat-type-btn active-expense" id="stat-type-expense" onclick="setStatType('expense')">💸 支出</button>
    <button class="stat-type-btn" id="stat-type-income" onclick="setStatType('income')">💰 収入</button>
  </div>
  <div class="group-mode-bar">
    <button class="group-mode-btn active" id="group-mode-category" onclick="setGroupMode('category')">📊 商品カテゴリ別</button>
    <button class="group-mode-btn" id="group-mode-store" onclick="setGroupMode('store')">🏪 店別</button>
  </div>
  <div class="period-selector-wrap">
    <button class="period-nav-btn" id="period-prev" onclick="shiftPeriod(-1)" title="前へ">‹</button>
    <div class="period-selector">
      <button class="period-btn active" onclick="jumpToCurrentMonth()" id="period-yearmonth">月</button>
      <button class="period-btn" onclick="setPeriod('week')" id="period-week">今週</button>
      <button class="period-btn" onclick="jumpToCurrentYear()" id="period-yearly">年間</button>
      <button class="period-btn" onclick="openCustomPeriodModal()" id="period-custom">カスタム</button>
      <button class="period-btn" onclick="setPeriod('all')" id="period-all">全期間</button>
    </div>
    <button class="period-nav-btn" id="period-next" onclick="shiftPeriod(1)" title="次へ">›</button>
  </div>

  <!-- 年月選択モーダル -->
  <div class="modal-overlay" id="yearmonth-modal">
    <div class="modal">
    <button type="button" class="modal-close" onclick="closeModal('yearmonth-modal')" aria-label="閉じる">✕</button>
      <div class="modal-title">📅 月を選択</div>
      <div class="modal-label">年</div>
      <select id="ym-year"></select>
      <div class="modal-label">月</div>
      <select id="ym-month">
        <option value="1">1月</option><option value="2">2月</option>
        <option value="3">3月</option><option value="4">4月</option>
        <option value="5">5月</option><option value="6">6月</option>
        <option value="7">7月</option><option value="8">8月</option>
        <option value="9">9月</option><option value="10">10月</option>
        <option value="11">11月</option><option value="12">12月</option>
      </select>
      <button class="btn btn-primary" onclick="applyYearMonth()">この月を表示</button>
      <button class="btn btn-secondary" onclick="closeModal('yearmonth-modal')">キャンセル</button>
    </div>
  </div>

  <!-- 年間選択モーダル -->
  <div class="modal-overlay" id="yearly-modal">
    <div class="modal">
    <button type="button" class="modal-close" onclick="closeModal('yearly-modal')" aria-label="閉じる">✕</button>
      <div class="modal-title">📆 年を選択</div>
      <div class="modal-label">年</div>
      <select id="yearly-year"></select>
      <button class="btn btn-primary" onclick="applyYearly()">この年を表示</button>
      <button class="btn btn-secondary" onclick="closeModal('yearly-modal')">キャンセル</button>
    </div>
  </div>

  <!-- カスタム期間モーダル -->
  <div class="modal-overlay" id="custom-period-modal">
    <div class="modal">
    <button type="button" class="modal-close" onclick="closeModal('custom-period-modal')" aria-label="閉じる">✕</button>
      <div class="modal-title">🗓 期間を指定</div>
      <div class="modal-label">開始日</div>
      <input type="date" id="custom-from" style="width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text);font-size:14px;outline:none;">
      <div class="modal-label">終了日</div>
      <input type="date" id="custom-to" style="width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text);font-size:14px;outline:none;">
      <button class="btn btn-primary" onclick="applyCustomPeriod()">この期間を表示</button>
      <button class="btn btn-secondary" onclick="closeModal('custom-period-modal')">キャンセル</button>
    </div>
  </div>

  <div class="stats-summary" id="stats-summary">
    <div class="stats-summary-card">
      <div class="stats-summary-label" id="stats-total-label">合計支出</div>
      <div class="stats-summary-value" id="stats-total">¥—</div>
    </div>
    <div class="stats-summary-card">
      <div class="stats-summary-label">レシート数</div>
      <div class="stats-summary-value" id="stats-count">—</div>
    </div>
    <div class="stats-summary-card">
      <div class="stats-summary-label">商品数</div>
      <div class="stats-summary-value" id="stats-items">—</div>
    </div>
  </div>

  <div class="chart-section" id="stats-chart-section">
    <div class="chart-type-toggle">
      <button class="chart-type-btn active" id="chart-type-pie" onclick="setChartType('pie')">🥧 円グラフ</button>
      <button class="chart-type-btn" id="chart-type-bar" onclick="setChartType('bar')">📊 棒グラフ</button>
    </div>
    <div class="chart-header">
      <div class="chart-title" id="chart-title">大カテゴリ別支出</div>
      <button class="chart-back-btn" id="chart-back-btn" onclick="drillUp()">← 戻る</button>
    </div>
    <div class="chart-hint" id="chart-hint">タップすると小カテゴリを表示</div>
    <div class="chart-container">
      <canvas id="stats-chart"></canvas>
    </div>
  </div>

  <div class="stats-empty" id="stats-empty" style="display:none;">
    データがありません
  </div>

  <!-- 年間月別グラフセクション -->
  <div id="yearly-chart-section" style="display:none;">
    <div class="chart-type-toggle">
      <button class="chart-type-btn active" id="yearly-chart-type-bar" onclick="setYearlyChartType('bar')">📊 棒グラフ</button>
      <button class="chart-type-btn" id="yearly-chart-type-line" onclick="setYearlyChartType('line')">📈 折れ線</button>
    </div>
    <div class="chart-header">
      <div class="chart-title" id="yearly-chart-title">月別支出</div>
    </div>
    <div class="chart-container" style="height:260px;">
      <canvas id="yearly-chart"></canvas>
    </div>
    <div id="yearly-month-detail" style="display:none; margin-top:8px;">
      <div class="chart-header">
        <div class="chart-title" id="yearly-detail-title"></div>
        <button class="chart-back-btn visible" onclick="closeYearlyDetail()">← 戻る</button>
      </div>
      <div class="chart-container">
        <canvas id="yearly-detail-chart"></canvas>
      </div>
    </div>
  </div>
  <div class="stats-empty" id="yearly-empty" style="display:none;">
    データがありません
  </div>

  <!-- 小カテゴリ選択時のレシート一覧 -->
  <div id="stats-receipt-list-section" style="display:none;">
    <div style="display:flex;justify-content:space-between;align-items:baseline;padding:0 16px;margin-bottom:8px;"><div class="section-title" id="stats-receipt-list-title" style="margin-bottom:0;"></div><div style="display:flex;align-items:center;gap:6px;margin-left:8px;"><button id="stats-list-recat-btn" class="recat-btn" title="表示中のレシートを一括再カテゴライズ" style="display:none;font-size:17px;" onclick="bulkRecatStatsList()">🔄</button><div id="stats-receipt-list-total" style="font-family:'Space Mono',monospace;font-size:14px;color:var(--accent);white-space:nowrap;"></div></div></div>
    <div style="padding: 0 16px 16px;">
      <ul class="history-list" id="stats-receipt-list"></ul>
    </div>
  </div>

  <!-- 集計タブ内詳細ビュー -->
  <div id="stats-detail-view" style="display:none;">
    <div class="detail-header">
      <button class="back-btn" onclick="closeStatsDetail()">← 戻る</button>
      <div class="detail-title-block">
        <div class="detail-store" id="stats-detail-store">—</div>
        <span id="stats-detail-store-brand" style="display:none;font-size:10px;color:var(--text-dim);background:var(--surface2);padding:1px 8px;border-radius:8px;margin-top:2px;"></span>
        <div class="detail-date" id="stats-detail-date">—</div>
      </div>
    </div>
    <div class="detail-total-bar">
      <span>合計金額</span>
      <span class="detail-total-amount" id="stats-detail-total">¥—</span>
    </div>
    <div class="detail-actions">
      <button class="btn-edit" onclick="openReceiptEditModal()">✏️ 店舗名・日付を編集</button>
      <button class="btn-delete-receipt" onclick="deleteCurrentReceipt()">🗑 削除</button>
    </div>
    <div class="split-bar" id="split-bar-stats">
      <span class="split-bar-label">割り勘</span>
      <div class="split-toggle" id="split-toggle-stats" onclick="toggleSplit('stats')"></div>
      <div class="split-count-wrap hidden" id="split-count-wrap-stats">
        <button class="split-count-btn" onclick="changeSplitCount('stats', -1)">−</button>
        <span class="split-count-val" id="split-count-val-stats">2</span>
        <span class="split-count-unit">人</span>
        <button class="split-count-btn" onclick="changeSplitCount('stats', +1)">＋</button>
      </div>
    </div>
    <div class="detail-items" id="stats-detail-items"></div>
  </div>
</div>

<!-- レシート編集モーダル -->
<div class="modal-overlay" id="receipt-edit-modal">
  <div class="modal">
    <button type="button" class="modal-close" onclick="closeModal('receipt-edit-modal')" aria-label="閉じる">✕</button>
    <div class="modal-title">✏️ レシート情報を編集</div>
    <!-- 通常：店舗名テキスト -->
    <div id="edit-store-text-row">
      <div class="modal-label">店舗名</div>
      <input type="text" id="edit-store-input" placeholder="店舗名">
    </div>
    <!-- 収入：カテゴリ選択 -->
    <div id="edit-income-cat-row" style="display:none;">
      <div class="modal-label">収入カテゴリ</div>
      <select id="edit-income-cat-select" style="width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text);font-size:14px;font-family:inherit;outline:none;appearance:none;cursor:pointer;"></select>
    </div>
    <div class="modal-label">日付</div>
    <input type="date" id="edit-date-input">
    <div class="modal-label">購入時刻（任意）</div>
    <input type="time" id="edit-time-input">
    <button class="btn btn-primary" onclick="saveReceiptEdit()">保存</button>
    <button class="btn btn-secondary" onclick="closeModal('receipt-edit-modal')">キャンセル</button>
  </div>
</div>

<!-- 商品編集モーダル -->
<div class="modal-overlay" id="item-edit-modal">
  <div class="modal">
    <button type="button" class="modal-close" onclick="closeModal('item-edit-modal')" aria-label="閉じる">✕</button>
    <div class="modal-title">✏️ 商品を編集</div>
    <div class="modal-label">商品名</div>
    <input type="text" id="edit-item-name" placeholder="商品名">
    <div class="modal-label" id="edit-large-label" style="display:none;">大カテゴリ</div>
    <select id="edit-item-large-cat" onchange="onLargeCategoryChange()" style="display:none;width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text);font-size:14px;font-family:inherit;outline:none;margin-bottom:2px;appearance:none;cursor:pointer;"></select>
    <div class="modal-label">中カテゴリ</div>
    <select id="edit-item-large" onchange="onMiddleCategoryChange()"></select>
    <div class="modal-label">小カテゴリ</div>
    <div id="small-cat-container">
      <!-- カテゴリ定義あり → select、なし → input -->
    </div>
    <div class="modal-label">金額</div>
    <input type="number" id="edit-item-price" placeholder="0">
    <button class="btn btn-primary" onclick="saveItemEdit()">保存</button>
    <button class="btn btn-danger" onclick="deleteCurrentItem()">この商品を削除</button>
    <button class="btn btn-secondary" onclick="closeModal('item-edit-modal')">キャンセル</button>
  </div>
</div>


</div>

<!-- 設定モーダル -->
<div class="modal-overlay" id="settings-modal">
  <div class="modal">
    <button type="button" class="modal-close" onclick="closeSettings()" aria-label="閉じる">✕</button>
    <div class="modal-title">⚙ 設定</div>

    <div class="modal-label">テーマ</div>
    <div style="display:flex;gap:8px;margin-bottom:4px;">
      <button id="theme-btn-auto" onclick="setTheme('auto')"
        style="flex:1;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text-dim);font-size:13px;font-family:inherit;cursor:pointer;">
        🌓 自動
      </button>
      <button id="theme-btn-dark" onclick="setTheme('dark')"
        style="flex:1;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text-dim);font-size:13px;font-family:inherit;cursor:pointer;">
        🌙 ダーク
      </button>
      <button id="theme-btn-light" onclick="setTheme('light')"
        style="flex:1;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text-dim);font-size:13px;font-family:inherit;cursor:pointer;">
        ☀️ ライト
      </button>
    </div>
    <div class="modal-label">Gemini API キー</div>
    <input type="password" id="api-key-input" placeholder="AIza...">
    <button class="btn btn-primary" onclick="saveApiKey()">APIキーを保存</button>

    <div class="modal-label" style="margin-top:16px;">使用モデル</div>
    <select id="gemini-model-select" onchange="saveGeminiModel()" style="width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:10px 12px; color:var(--text); font-size:14px; font-family:'Space Mono',monospace; outline:none; appearance:none; cursor:pointer;">
      <option value="gemini-2.5-flash">gemini-2.5-flash（最新・高精度）</option>
      <option value="gemini-2.0-flash">gemini-2.0-flash</option>
      <option value="gemini-1.5-flash">gemini-1.5-flash（混雑時の代替）</option>
      <option value="gemini-1.5-flash-8b">gemini-1.5-flash-8b（軽量・高速）</option>
    </select>
    <div id="model-saved-msg" style="font-size:12px; color:var(--accent); margin-top:6px; min-height:16px;"></div>

    <div class="modal-label" style="margin-top:16px;">商品カテゴリ管理</div>
    <div id="category-status" style="font-size:12px; margin-bottom:8px; color:var(--text-dim);">読み込み中...</div>
    <button class="btn btn-secondary" onclick="openLargeEditorFromSettings()">🗂 商品カテゴリを編集</button>

    <div class="modal-label" style="margin-top:12px;">収入カテゴリ管理</div>
    <div id="income-cat-status" style="font-size:12px; margin-bottom:8px; color:var(--text-dim);"></div>
    <button class="btn btn-secondary" onclick="openIncomeCatEditorFromSettings()">💰 収入カテゴリを編集</button>

    <div class="modal-label" style="margin-top:12px;">店カテゴリ管理</div>
    <div id="store-def-status" style="font-size:12px; margin-bottom:8px; color:var(--text-dim);">読み込み中...</div>
    <button class="btn btn-secondary" onclick="openStoreEditorFromSettings()">🏪 店カテゴリを編集</button>

    <div class="modal-label" style="margin-top:12px;">ユーザー削除ロック</div>
    <div id="delete-lock-status" style="font-size:12px; margin-bottom:8px; color:var(--text-dim);"></div>
    <button class="btn btn-secondary" onclick="openDeleteLockModal()">🔒 削除ロックを設定</button>

    <div class="modal-label" style="margin-top:16px;">動作設定</div>

    <div style="font-size:12px;color:var(--text-dim);margin-bottom:4px;">解析後の自動保存</div>
    <select id="pref-autosave" onchange="onPrefChange('autosaveSec', this.value)" style="width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:9px 10px; color:var(--text); font-size:13px; font-family:inherit; outline:none; appearance:none; cursor:pointer; margin-bottom:10px;">
      <option value="0">自動保存しない</option>
      <option value="5">5秒後</option>
      <option value="10">10秒後</option>
      <option value="15">15秒後</option>
      <option value="20">20秒後</option>
      <option value="30">30秒後</option>
      <option value="60">60秒後</option>
    </select>

    <div style="font-size:12px;color:var(--text-dim);margin-bottom:4px;">効果音</div>
    <select id="pref-sound" onchange="onPrefChange('soundMode', this.value)" style="width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:9px 10px; color:var(--text); font-size:13px; font-family:inherit; outline:none; appearance:none; cursor:pointer; margin-bottom:10px;">
      <option value="all">すべて鳴らす</option>
      <option value="save">保存・解析完了のみ（カウント音なし）</option>
      <option value="off">鳴らさない</option>
    </select>

    <div style="font-size:12px;color:var(--text-dim);margin-bottom:4px;">効果音の音量</div>
    <select id="pref-volume" onchange="onPrefChange('soundVolume', this.value)" style="width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:9px 10px; color:var(--text); font-size:13px; font-family:inherit; outline:none; appearance:none; cursor:pointer; margin-bottom:10px;">
      <option value="0.5">小</option>
      <option value="1">標準</option>
      <option value="1.6">大</option>
    </select>

    <div style="font-size:12px;color:var(--text-dim);margin-bottom:4px;">起動時に開くタブ</div>
    <select id="pref-start-tab" onchange="onPrefChange('startTab', this.value)" style="width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:9px 10px; color:var(--text); font-size:13px; font-family:inherit; outline:none; appearance:none; cursor:pointer; margin-bottom:10px;">
      <option value="upload">📷 追加</option>
      <option value="history">📋 履歴</option>
      <option value="stats">📊 集計</option>
    </select>

    <div style="font-size:12px;color:var(--text-dim);margin-bottom:4px;">履歴の初期表示</div>
    <select id="pref-history-view" onchange="onPrefChange('historyView', this.value)" style="width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:9px 10px; color:var(--text); font-size:13px; font-family:inherit; outline:none; appearance:none; cursor:pointer; margin-bottom:10px;">
      <option value="cal">📅 カレンダー</option>
      <option value="list">☰ リスト</option>
    </select>

    <div style="font-size:12px;color:var(--text-dim);margin-bottom:4px;">レシート画像の選び方</div>
    <select id="pref-camera" onchange="onPrefChange('cameraMode', this.value)" style="width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:9px 10px; color:var(--text); font-size:13px; font-family:inherit; outline:none; appearance:none; cursor:pointer; margin-bottom:10px;">
      <option value="camera">タップで撮影／長押しでファイル</option>
      <option value="gallery">タップでファイル／長押しで撮影</option>
    </select>

    <div style="font-size:12px;color:var(--text-dim);margin-bottom:4px;">バックアップの催促</div>
    <select id="pref-backup-days" onchange="onPrefChange('backupDays', this.value)" style="width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:9px 10px; color:var(--text); font-size:13px; font-family:inherit; outline:none; appearance:none; cursor:pointer; margin-bottom:10px;">
      <option value="7">7日以上未実施で警告</option>
      <option value="14">14日以上未実施で警告</option>
      <option value="30">30日以上未実施で警告</option>
      <option value="0">催促しない</option>
    </select>

    <button class="btn btn-secondary" onclick="resetPrefs()">動作設定を初期値に戻す</button>

    <div class="modal-label" style="margin-top:16px;">バージョン</div>
    <div id="version-info" style="font-size:12px; margin-bottom:8px; color:var(--text-dim);">確認中...</div>

    <div class="modal-label" style="margin-top:16px;">環境チェック</div>
    <div id="env-check" style="font-size:12px; margin-bottom:8px; color:var(--text-dim);">確認中...</div>
    <button class="btn btn-secondary" onclick="testSaveChime()">🔔 保存音をテスト</button>

    <button class="btn btn-secondary" onclick="closeSettings()">閉じる</button>
  </div>
</div>

<!-- 収入カテゴリエディタ -->
<div class="modal-overlay" id="income-cat-editor-overlay" style="align-items:flex-start; overflow-y:auto;">
  <div class="modal" style="width:calc(100% - 32px); max-width:480px; margin:16px auto; max-height:none;">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;">
      <div class="modal-title" style="margin-bottom:0;">💰 収入カテゴリ編集</div>
      <button type="button" class="modal-close" onclick="closeIncomeCatEditor()" aria-label="閉じる">✕</button>
    </div>
    <p style="font-size:12px;color:var(--text-dim);margin-bottom:14px;">手入力フォームの「収入」選択時に表示されるカテゴリ一覧を管理します。</p>
    <div id="income-cat-list-ui" style="margin-bottom:16px;"></div>
    <div style="display:flex;gap:8px;margin-bottom:4px;">
      <input type="text" id="income-cat-new-input" placeholder="新しいカテゴリ名"
        style="flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:9px 12px;color:var(--text);font-size:14px;outline:none;">
      <button onclick="addIncomeCatItem()"
        style="padding:9px 16px;background:var(--accent);color:#111;border:none;border-radius:6px;font-size:14px;font-family:inherit;font-weight:700;cursor:pointer;">＋</button>
    </div>
    <div id="income-cat-msg" style="font-size:12px;min-height:16px;margin-top:6px;"></div>
  </div>
</div>

<!-- 収入カテゴリ名 変更モーダル -->
<div class="modal-overlay" id="income-cat-edit-modal">
  <div class="modal">
    <button type="button" class="modal-close" onclick="closeModal('income-cat-edit-modal')" aria-label="閉じる">✕</button>
    <div class="modal-title">✏️ 収入カテゴリ名を変更</div>
    <div class="modal-label">カテゴリ名</div>
    <input type="text" id="income-cat-edit-input" placeholder="例：奨学金">
    <p style="font-size:11px;color:var(--text-dim);margin:8px 0 4px;">
      既存の収入レコードのカテゴリ名も自動で更新されます。
    </p>
    <button class="btn btn-primary" onclick="saveIncomeCatRename()">保存</button>
    <button class="btn btn-secondary" onclick="closeModal('income-cat-edit-modal')">キャンセル</button>
  </div>
</div>

<!-- 大中カテゴリエディタ（フルスクリーン） Phase2 -->
<div class="modal-overlay" id="large-editor-overlay" style="align-items:flex-start; overflow-y:auto;">
  <div class="modal" style="width:calc(100% - 32px); max-width:480px; margin:16px auto; max-height:none;">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;">
      <div class="modal-title" style="margin-bottom:0;">🗂 商品カテゴリ編集</div>
      <button type="button" class="modal-close" onclick="closeLargeEditor()" aria-label="閉じる">✕</button>
    </div>
    <p style="font-size:12px;color:var(--text-dim);margin-bottom:12px;">大カテゴリの追加・編集・削除ができます。中カテゴリをタップすると小カテゴリが展開されます。↔ で大カテゴリ割り当てを変更できます。</p>
    <!-- 追加・インポート -->
    <div style="display:flex; gap:6px; margin-bottom:8px;">
      <button class="btn btn-primary" style="flex:1; margin-top:0; padding:8px; font-size:12px;" onclick="openAddLargeModal()">＋ 大カテゴリ追加</button>
    </div>
    <!-- ツールバー -->
    <div style="display:flex; gap:6px; margin-bottom:8px;">
      <button class="btn btn-secondary" style="flex:1; margin-top:0; padding:8px; font-size:12px;" onclick="resetLargeDefToDefault()">↺ 初期値に戻す</button>
    </div>
    <div style="display:flex; gap:6px; margin-bottom:12px;">
      <button class="btn btn-secondary" style="flex:1; margin-top:0; padding:8px; font-size:12px;" onclick="exportAllCategoryDef()">📤 エクスポート</button>
      <label style="flex:1; position:relative; margin-top:0;">
        <input type="file" accept=".json" id="all-cat-import-file" style="position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;">
        <div class="btn btn-secondary" style="margin-top:0; text-align:center; pointer-events:none; padding:8px; font-size:12px;">📥 インポート（上書き）</div>
      </label>
    </div>
    <div id="large-editor-list"></div>
  </div>
</div>

<!-- 大カテゴリ追加/編集モーダル -->
<div class="modal-overlay" id="add-large-modal">
  <div class="modal">
    <button type="button" class="modal-close" onclick="closeModal('add-large-modal')" aria-label="閉じる">✕</button>
    <div class="modal-title" id="add-large-title">＋ 大カテゴリ追加</div>
    <div class="modal-label">大カテゴリ名</div>
    <input type="text" id="add-large-input" placeholder="例：食品">
    <button class="btn btn-primary" onclick="saveLargeCategory()">保存</button>
    <button class="btn btn-secondary" onclick="closeModal('add-large-modal')">キャンセル</button>
  </div>
</div>

<!-- 大中エディタ：中カテゴリ追加モーダル -->
<div class="modal-overlay" id="add-middle-to-large-modal">
  <div class="modal">
    <button type="button" class="modal-close" onclick="closeModal('add-middle-to-large-modal')" aria-label="閉じる">✕</button>
    <div class="modal-title">＋ 中カテゴリ追加</div>
    <div class="modal-label">中カテゴリ名</div>
    <input type="text" id="add-middle-to-large-input" placeholder="例：乳製品">
    <div class="modal-label" style="margin-top:12px;">割り当てる大カテゴリ</div>
    <select id="add-middle-to-large-select" style="width:100%;padding:10px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;margin-bottom:8px;"></select>
    <button class="btn btn-primary" onclick="saveMiddleToLarge()">追加</button>
    <button class="btn btn-secondary" onclick="closeModal('add-middle-to-large-modal')">キャンセル</button>
  </div>
</div>

<!-- 大中エディタ：中カテゴリ割り当て変更モーダル -->
<div class="modal-overlay" id="move-middle-modal">
  <div class="modal">
    <button type="button" class="modal-close" onclick="closeModal('move-middle-modal')" aria-label="閉じる">✕</button>
    <div class="modal-title">↔ 大カテゴリの割り当て</div>
    <div class="modal-label" id="move-middle-name-label">中カテゴリ：—</div>
    <div class="modal-label" style="margin-top:12px;">所属させる大カテゴリ（複数選択可）</div>
    <div id="move-middle-checks" style="margin-bottom:12px;max-height:240px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;padding:8px 12px;"></div>
    <button class="btn btn-primary" onclick="saveMoveMiddle()">保存</button>
    <button class="btn btn-secondary" onclick="closeModal('move-middle-modal')">キャンセル</button>
  </div>
</div>

<!-- 店カテゴリエディタ（フルスクリーン） -->
<div class="modal-overlay" id="store-editor-overlay" style="align-items:flex-start; overflow-y:auto;">
  <div class="modal" style="width:calc(100% - 32px); max-width:480px; margin:16px auto; max-height:none;">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;">
      <div class="modal-title" style="margin-bottom:0;">🏪 店カテゴリ編集</div>
      <button type="button" class="modal-close" onclick="closeStoreEditor()" aria-label="閉じる">✕</button>
    </div>
    <p style="font-size:12px;color:var(--text-dim);margin-bottom:12px;">レシート保存時に店名が自動登録されます。手動で追加・編集・削除もできます。</p>
    <button class="btn btn-primary" style="margin-top:0; margin-bottom:8px; padding:8px; font-size:12px;" onclick="openAddStoreModal()">＋ 店を追加</button>
    <div style="display:flex; gap:6px; margin-bottom:8px;">
      <button class="btn btn-secondary" style="flex:1; margin-top:0; padding:8px; font-size:12px;" onclick="exportStoreDef()">📤 JSONエクスポート</button>
    </div>
    <div style="display:flex; gap:6px; margin-bottom:12px;">
      <label style="flex:1; position:relative;">
        <input type="file" accept=".json" id="store-import-file" style="position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;">
        <div class="btn btn-secondary" style="margin-top:0; text-align:center; pointer-events:none; padding:8px; font-size:12px;">📥 JSONからインポート（追加・上書き）</div>
      </label>
    </div>
    <div id="store-editor-list"></div>
  </div>
</div>

<!-- 店カテゴリ追加/編集モーダル -->
<div class="modal-overlay" id="add-store-modal">
  <div class="modal">
    <button type="button" class="modal-close" onclick="closeModal('add-store-modal')" aria-label="閉じる">✕</button>
    <div class="modal-title" id="add-store-title">＋ 店を追加</div>
    <div class="modal-label">店名</div>
    <input type="text" id="add-store-input" placeholder="例：アピタ">
    <button class="btn btn-primary" onclick="saveStoreDef()">保存</button>
    <button class="btn btn-secondary" onclick="closeModal('add-store-modal')">キャンセル</button>
  </div>
</div>

<!-- 中カテゴリ追加/編集モーダル -->
<div class="modal-overlay" id="add-middle-modal">
  <div class="modal">
    <button type="button" class="modal-close" onclick="closeModal('add-middle-modal')" aria-label="閉じる">✕</button>
    <div class="modal-title" id="add-middle-title">＋ 中カテゴリ追加</div>
    <div class="modal-label">中カテゴリ名</div>
    <input type="text" id="add-middle-input" placeholder="例：乳製品">
    <button class="btn btn-primary" onclick="saveMiddleCategory()">保存</button>
    <button class="btn btn-secondary" onclick="closeModal('add-middle-modal')">キャンセル</button>
  </div>
</div>

<!-- 小カテゴリ追加/編集モーダル -->
<div class="modal-overlay" id="add-small-modal">
  <div class="modal">
    <button type="button" class="modal-close" onclick="closeModal('add-small-modal')" aria-label="閉じる">✕</button>
    <div class="modal-title" id="add-small-title">＋ 小カテゴリ追加</div>
    <div class="modal-label" id="add-small-parent-label">中カテゴリ：—</div>
    <input type="text" id="add-small-input" placeholder="例：牛乳">
    <button class="btn btn-primary" onclick="saveSmallCategory()">保存</button>
    <button class="btn btn-secondary" onclick="closeModal('add-small-modal')">キャンセル</button>
  </div>
</div>

<script>
// ===== ユーザー管理 =====
const USERS_KEY = 'app_users';
const CURRENT_USER_KEY = 'current_user';

function getUsers() {
  try { return JSON.parse(localStorage.getItem(USERS_KEY)) || []; }
  catch { return []; }
}

function saveUsers(users) {
  const json = JSON.stringify(users);
  localStorage.setItem(USERS_KEY, json);
  _saveSettingIDB(USERS_KEY, json);
}

// ===== 設定用IndexedDB（content://スキームでlocalStorageが永続しない対策） =====
const SETTINGS_DB_NAME = 'receipt_settings_db';
const SETTINGS_DB_VERSION = 1;

function _openSettingsDB() {
  return new Promise((resolve, reject) => {
    let done = false;
    const settle = (fn, v) => { if (!done) { done = true; fn(v); } };
    const req = indexedDB.open(SETTINGS_DB_NAME, SETTINGS_DB_VERSION);
    req.onupgradeneeded = e => {
      const d = e.target.result;
      if (!d.objectStoreNames.contains('settings')) {
        d.createObjectStore('settings', { keyPath: 'key' });
      }
    };
    req.onsuccess = e => settle(resolve, e.target.result);
    req.onerror   = e => settle(reject, e.target.error);
    // 他のタブが同じDBを掴んでいるとブロックされ、ハンドラが無いと永久に待つ。
    // 初期化処理の先頭で呼ばれるため、ここで固まるとアプリ全体が起動しなくなる。
    req.onblocked = () => settle(reject, new Error('設定DBがブロックされています'));
    setTimeout(() => settle(reject, new Error('設定DBのオープンがタイムアウトしました')), 4000);
  });
}

async function _saveSettingIDB(key, value) {
  try {
    const sdb = await _openSettingsDB();
    await new Promise((resolve, reject) => {
      const tx = sdb.transaction('settings', 'readwrite');
      tx.objectStore('settings').put({ key, value });
      tx.oncomplete = resolve;
      tx.onerror = reject;
    });
    sdb.close();
  } catch(e) {}
}

async function _loadSettingIDB(key) {
  try {
    const sdb = await _openSettingsDB();
    const result = await new Promise((resolve, reject) => {
      const tx = sdb.transaction('settings', 'readonly');
      const req = tx.objectStore('settings').get(key);
      req.onsuccess = () => resolve(req.result?.value ?? null);
      req.onerror = reject;
    });
    sdb.close();
    return result;
  } catch(e) { return null; }
}

function getCurrentUser() {
  return localStorage.getItem(CURRENT_USER_KEY) || null;
}

function setCurrentUser(name) {
  localStorage.setItem(CURRENT_USER_KEY, name);
  document.getElementById('current-user-label').textContent = name;
  _saveSettingIDB(CURRENT_USER_KEY, name);
}

function dbNameForUser(name) {
  return 'receipt_db_' + name;
}

async function openUserModal() {
  // DB接続より先にモーダルを表示する。
  // DBのオープンに失敗しても「ユーザー切り替え」画面だけは必ず開けるようにして、
  // 復旧手段（別ユーザーへ切り替え・インポート）を失わないため。
  document.getElementById('user-modal').classList.add('open');
  renderUserList();
  document.getElementById('new-user-input').value = '';

  // インポートリスナー登録（重複防止のため onchange で上書き）
  const importInput = document.getElementById('import-file-input');
  importInput.onchange = async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    await importData(file);
    importInput.value = '';
  };

  // 共有はHTTPS配信時のみ使えるため、使える環境でだけボタンを出す
  const shareBtn = document.getElementById('share-export-btn');
  if (shareBtn) shareBtn.style.display = canShareFiles() ? 'block' : 'none';
  _shareFileCache = null;

  if (!db) {
    try {
      db = await openDB();
    } catch (err) {
      console.error('openDB失敗', err);
      setExportStatus(`⚠ データベースを開けませんでした：${err.message}`, 'var(--danger)');
      return;
    }
  }
  updateExportStatus();
  prepareShareFile(); // タップ時に待たずに共有できるよう先に作っておく
}

function renderUserList() {
  const users = getUsers();
  const current = getCurrentUser();
  const ul = document.getElementById('user-list');
  ul.innerHTML = '';
  if (users.length === 0) {
    ul.innerHTML = '<li style="color:var(--text-dim);font-size:13px;padding:8px 0;">ユーザーがいません</li>';
    return;
  }
  users.forEach(name => {
    const li = document.createElement('li');
    li.className = 'user-item' + (name === current ? ' active-user' : '');
    li.innerHTML = `
      <span class="user-item-name">${name}</span>
      ${name === current ? '<span class="user-item-badge">使用中</span>' : ''}
      <button class="user-item-del" onclick="deleteUser('${name}', event)" title="削除">🗑</button>
    `;
    if (name !== current) {
      li.addEventListener('click', () => switchUser(name));
    }
    ul.appendChild(li);
  });
}

async function addUser() {
  const input = document.getElementById('new-user-input');
  const name = input.value.trim();
  if (!name) { alert('ユーザー名を入力してください'); return; }
  const users = getUsers();
  if (users.includes(name)) { alert('同じ名前のユーザーが既に存在します'); return; }
  users.push(name);
  saveUsers(users);
  input.value = '';
  hideOnboardToast();
  await switchUser(name);
  // 追加が終わるとユーザーモーダルは閉じる。APIキーが未保存ならそのまま設定へ案内する。
  // switchUser 内の history.back() が処理されるのを待ってから開く。
  if (!hasApiKey()) setTimeout(promptApiKey, 400);
}

async function switchUser(name) {
  setCurrentUser(name);
  const label = document.getElementById('current-user-label');
  if (label) label.textContent = name;

  // DB接続より先にUIを確定させる。
  // 接続待ちの間モーダルが閉じないと「タップしても反応しない」ように見えるため。
  db = null;
  _skipNextCloseTopLayer = true;
  _closeModalInner('user-modal');
  history.back(); // pushStateエントリを消費

  loadCategoryDefFromStorage();
  loadLargeDefFromStorage();
  updateStoreDefStatus();
  updateIncomeCatStatus();
  try { resetUpload(); } catch (_) {}

  try {
    db = await openDBOnce();
  } catch (e) {
    console.warn('切り替え後のDB接続に失敗（以降の操作時に再接続します）', e);
  }

  try { await loadHistory(); } catch (_) {}
  if (document.getElementById('tab-stats').classList.contains('active')) loadStats();
  showStatus('success', `${name} に切り替えました`);
}

// ===== 初期セットアップの促し（ユーザー追加 → APIキー保存） =====
// 方針：未設定のものだけを順に案内する。ユーザーが未登録なら必ずユーザー追加から始め、
// ユーザーがいてAPIキーだけ無い場合はAPIキーの案内から始める。
// 案内は画面下部のトーストで出すだけなので操作を妨げず、「閉じる」でいつでも中断できる。

function hasAppUser() { return !!getCurrentUser(); }
function hasApiKey()  { return !!localStorage.getItem('gemini_api_key'); }

// 案内は画面下部のトースト。履歴スタックには積まず、
// 対象の操作が完了するか、案内元のモーダルを閉じた時点で自動的に消える。
function showOnboardToast(main, sub) {
  const el = document.getElementById('onboard-toast');
  if (!el) return;
  el.innerHTML = `${main}<span class="onboard-sub">${sub}</span>`;
  el.classList.add('show');
}

function hideOnboardToast() {
  const el = document.getElementById('onboard-toast');
  if (el) el.classList.remove('show');
}

function promptAddUser() {
  openUserModalWithHistory();
  setTimeout(() => showOnboardToast(
    '👤 ユーザーを追加してください',
    '「新しいユーザーを追加」に名前を入力して「追加」'
  ), 300);
}

function promptApiKey() {
  openSettingsWithHistory();
  setTimeout(() => showOnboardToast(
    '🔑 APIキーを保存してください',
    'レシート解析には Gemini の APIキーが必要です'
  ), 300);
}

// セットアップが未完了なら案内する共通の入口。すべて設定済みなら何もしない。
function promptSetup() {
  if (!hasAppUser()) { promptAddUser(); return; }
  if (!hasApiKey())  { promptApiKey();  return; }
}

// ===== ユーザー削除ロック =====
// 注意：これは「誤操作・第三者による軽率な削除」を防ぐための確認ゲートであり、
// 端末を持つ人が本気で回避しようとすれば localStorage 編集等で突破できる。
// ブラウザ上のローカルアプリである以上、真の機密保護にはならない点に留意。
const DEL_LOCK_MODE_KEY = 'delete_lock_mode';   // 'none' | 'webauthn' | 'password'
const DEL_LOCK_CRED_KEY = 'delete_lock_cred';   // WebAuthn credential rawId (base64)
const DEL_LOCK_PASS_KEY = 'delete_lock_pass';   // {algo, salt, hash, iter}

function getDeleteLockMode() {
  return localStorage.getItem(DEL_LOCK_MODE_KEY) || 'none';
}

// WebAuthn が実際に使える環境か。HTTPS/localhost 以外（file:// content:// 等）は
// isSecureContext が true でも RP ID を決定できないため利用不可。
function canUseWebAuthn() {
  if (!window.PublicKeyCredential || !window.isSecureContext) return false;
  const p = location.protocol;
  if (p === 'https:') return true;
  if (p === 'http:' && /^(localhost|127\.0\.0\.1|\[::1\])$/.test(location.hostname)) return true;
  return false;
}

function _b64(buf) {
  return btoa(String.fromCharCode(...new Uint8Array(buf)));
}
function _unb64(str) {
  return Uint8Array.from(atob(str), c => c.charCodeAt(0));
}

// パスワードハッシュ。crypto.subtle があれば PBKDF2、無ければ簡易ハッシュにフォールバック。
// 検証時は保存時の algo をそのまま使うので、環境が変わっても一致する。
async function _hashPassword(password, saltB64, algo) {
  const salt = _unb64(saltB64);
  if (algo === 'pbkdf2' && window.crypto?.subtle) {
    const key = await crypto.subtle.importKey('raw', new TextEncoder().encode(password), 'PBKDF2', false, ['deriveBits']);
    const bits = await crypto.subtle.deriveBits(
      { name: 'PBKDF2', salt, iterations: 120000, hash: 'SHA-256' }, key, 256);
    return _b64(bits);
  }
  // フォールバック（crypto.subtle 非対応環境用・強度は低い）
  let h1 = 0x811c9dc5, h2 = 0x01000193;
  const src = saltB64 + '\u0000' + password;
  for (let round = 0; round < 5000; round++) {
    for (let i = 0; i < src.length; i++) {
      h1 = ((h1 ^ src.charCodeAt(i)) * 16777619) >>> 0;
      h2 = ((h2 + h1) ^ (h2 << 5)) >>> 0;
    }
  }
  return 'fb:' + h1.toString(16) + h2.toString(16);
}

function _newSalt() {
  const a = new Uint8Array(16);
  (window.crypto || {}).getRandomValues ? crypto.getRandomValues(a)
    : a.forEach((_, i) => a[i] = Math.floor(Math.random() * 256));
  return _b64(a);
}

// ── 認証ゲート本体：成功で true を resolve ──
let _deleteAuthResolve = null;

function requireDeleteAuth(targetLabel) {
  const mode = getDeleteLockMode();
  if (mode === 'none') return Promise.resolve(true); // 未設定なら従来通り confirm のみ

  return new Promise(resolve => {
    _deleteAuthResolve = resolve;
    document.getElementById('delete-auth-target').textContent = `「${targetLabel}」を削除するには本人確認が必要です。`;
    document.getElementById('delete-auth-msg').textContent = '';
    const bio = document.getElementById('delete-auth-bio');
    const form = document.getElementById('delete-auth-form');
    const pw = document.getElementById('delete-auth-password');
    pw.value = '';

    if (mode === 'webauthn' && canUseWebAuthn()) {
      bio.style.display = 'block'; form.style.display = 'none';
    } else {
      bio.style.display = 'none'; form.style.display = 'block';
      if (mode === 'webauthn') {
        document.getElementById('delete-auth-msg').style.color = 'var(--text-dim)';
        document.getElementById('delete-auth-msg').textContent = 'この環境では生体認証が使えないため、パスワードで確認します。';
      }
      setTimeout(() => pw.focus(), 250);
    }
    openModal('delete-auth-modal');
  });
}

function _finishDeleteAuth(ok) {
  const r = _deleteAuthResolve;
  _deleteAuthResolve = null;
  document.getElementById('delete-auth-password').value = '';
  closeModal('delete-auth-modal');
  if (r) r(ok);
}

function cancelDeleteAuth() { _finishDeleteAuth(false); }

async function runDeleteAuthBiometric() {
  const msg = document.getElementById('delete-auth-msg');
  const credId = localStorage.getItem(DEL_LOCK_CRED_KEY);
  if (!credId) { msg.style.color = 'var(--danger)'; msg.textContent = '登録済みの生体認証がありません'; return; }
  try {
    const challenge = new Uint8Array(32);
    crypto.getRandomValues(challenge);
    const assertion = await navigator.credentials.get({
      publicKey: {
        challenge,
        allowCredentials: [{ type: 'public-key', id: _unb64(credId) }],
        userVerification: 'required',
        timeout: 60000
      }
    });
    if (assertion) { _finishDeleteAuth(true); return; }
    msg.style.color = 'var(--danger)'; msg.textContent = '認証できませんでした';
  } catch (e) {
    console.error(e);
    msg.style.color = 'var(--danger)';
    msg.textContent = '認証に失敗しました：' + (e.name || e.message);
  }
}

async function submitDeleteAuthPassword() {
  const msg = document.getElementById('delete-auth-msg');
  const input = document.getElementById('delete-auth-password').value;
  if (!input) { msg.style.color = 'var(--danger)'; msg.textContent = 'パスワードを入力してください'; return; }
  let rec;
  try { rec = JSON.parse(localStorage.getItem(DEL_LOCK_PASS_KEY) || 'null'); } catch (e) { rec = null; }
  if (!rec) { msg.style.color = 'var(--danger)'; msg.textContent = 'パスワードが未設定です'; return; }
  const h = await _hashPassword(input, rec.salt, rec.algo);
  if (h === rec.hash) { _finishDeleteAuth(true); }
  else { msg.style.color = 'var(--danger)'; msg.textContent = 'パスワードが違います'; }
}

// ── 設定モーダル ──
function openDeleteLockModal() {
  _closeSettingsInner();
  renderDeleteLockState();
  document.getElementById('delete-lock-new').value = '';
  document.getElementById('delete-lock-new2').value = '';
  document.getElementById('delete-lock-msg').textContent = '';
  openModal('delete-lock-modal');
}

function renderDeleteLockState() {
  const mode = getDeleteLockMode();
  const el = document.getElementById('delete-lock-current');
  const label = { none: '未設定（確認ダイアログのみ）', webauthn: '生体認証', password: 'パスワード' }[mode];
  el.innerHTML = `現在の設定：<b style="color:var(--accent);">${label}</b>`;

  const bioSec = document.getElementById('delete-lock-bio-section');
  const bioNg  = document.getElementById('delete-lock-bio-unavailable');
  if (canUseWebAuthn()) {
    bioSec.style.display = 'block'; bioNg.style.display = 'none';
  } else {
    bioSec.style.display = 'none'; bioNg.style.display = 'block';
    bioNg.textContent = `生体認証はHTTPSで配信された場合のみ利用できます（現在：${location.protocol}）。パスワードを設定してください。`;
  }
  updateDeleteLockStatus();
}

function updateDeleteLockStatus() {
  const el = document.getElementById('delete-lock-status');
  if (!el) return;
  const mode = getDeleteLockMode();
  el.textContent = { none: '未設定', webauthn: '生体認証', password: 'パスワード' }[mode];
}

async function registerDeleteBiometric() {
  const msg = document.getElementById('delete-lock-msg');
  if (!canUseWebAuthn()) { msg.style.color = 'var(--danger)'; msg.textContent = 'この環境では生体認証を登録できません'; return; }
  try {
    const challenge = new Uint8Array(32); crypto.getRandomValues(challenge);
    const userId = new Uint8Array(16);    crypto.getRandomValues(userId);
    const cred = await navigator.credentials.create({
      publicKey: {
        challenge,
        rp: { name: 'レシート管理' },
        user: { id: userId, name: 'delete-lock', displayName: 'ユーザー削除ロック' },
        pubKeyCredParams: [{ type: 'public-key', alg: -7 }, { type: 'public-key', alg: -257 }],
        authenticatorSelection: { authenticatorAttachment: 'platform', userVerification: 'required' },
        timeout: 60000,
        attestation: 'none'
      }
    });
    localStorage.setItem(DEL_LOCK_CRED_KEY, _b64(cred.rawId));
    localStorage.setItem(DEL_LOCK_MODE_KEY, 'webauthn');
    renderDeleteLockState();
    msg.style.color = 'var(--accent)'; msg.textContent = '生体認証を登録しました';
  } catch (e) {
    console.error(e);
    msg.style.color = 'var(--danger)';
    msg.textContent = '登録に失敗しました：' + (e.name || e.message);
  }
}

async function saveDeleteLockPassword() {
  const msg = document.getElementById('delete-lock-msg');
  const p1 = document.getElementById('delete-lock-new').value;
  const p2 = document.getElementById('delete-lock-new2').value;
  if (p1.length < 4) { msg.style.color = 'var(--danger)'; msg.textContent = '4文字以上にしてください'; return; }
  if (p1 !== p2)     { msg.style.color = 'var(--danger)'; msg.textContent = '確認用パスワードが一致しません'; return; }

  const algo = window.crypto?.subtle ? 'pbkdf2' : 'fallback';
  const salt = _newSalt();
  const hash = await _hashPassword(p1, salt, algo);
  localStorage.setItem(DEL_LOCK_PASS_KEY, JSON.stringify({ algo, salt, hash }));
  localStorage.setItem(DEL_LOCK_MODE_KEY, 'password');
  document.getElementById('delete-lock-new').value = '';
  document.getElementById('delete-lock-new2').value = '';
  renderDeleteLockState();
  msg.style.color = 'var(--accent)';
  msg.textContent = 'パスワードを設定しました' + (algo === 'fallback' ? '（簡易方式）' : '');
}

function clearDeleteLock() {
  if (!confirm('ユーザー削除ロックを無効にしますか？\n以後、確認ダイアログのみで削除できるようになります。')) return;
  localStorage.removeItem(DEL_LOCK_MODE_KEY);
  localStorage.removeItem(DEL_LOCK_CRED_KEY);
  localStorage.removeItem(DEL_LOCK_PASS_KEY);
  renderDeleteLockState();
  const msg = document.getElementById('delete-lock-msg');
  msg.style.color = 'var(--text-dim)'; msg.textContent = 'ロックを解除しました';
}

async function deleteUser(name, e) {
  e.stopPropagation();
  if (!confirm(`「${name}」を削除しますか？
このユーザーのデータもすべて削除されます。`)) return;

  // 本人確認（未設定なら素通り）
  const ok = await requireDeleteAuth(name);
  if (!ok) return;

  const isCurrent = getCurrentUser() === name;

  // 削除対象のDB接続が開いたままだと deleteDatabase が onblocked になり永久に待つ。
  // 先に接続を閉じてから削除する。
  if (isCurrent && db) {
    try { db.close(); } catch (_) {}
    db = null;
  }

  // IndexedDBを削除（blocked / タイムアウトも必ず後処理へ進む）
  const delResult = await new Promise(resolve => {
    let done = false;
    const finish = v => { if (!done) { done = true; resolve(v); } };
    const req = indexedDB.deleteDatabase(dbNameForUser(name));
    req.onsuccess = () => finish('ok');
    req.onerror   = () => finish('error');
    req.onblocked = () => finish('blocked');
    // 念のためのタイムアウト（無反応で固まるのを防ぐ）
    setTimeout(() => finish('timeout'), 5000);
  });

  const users = getUsers().filter(u => u !== name);
  saveUsers(users);

  // 削除したのが現在ユーザーなら、残っているユーザーへ自動で切り替える。
  // 「ユーザー未選択」状態は多くの処理が db=null 前提になっていないため避ける。
  if (isCurrent) {
    localStorage.removeItem(CURRENT_USER_KEY);
    document.getElementById('current-user-label').textContent = '未選択';
    db = null;
    if (users.length > 0) {
      try {
        setCurrentUser(users[0]);
        db = await openDB();
        loadCategoryDefFromStorage();
        loadLargeDefFromStorage();
        updateStoreDefStatus();
        updateIncomeCatStatus();
      } catch (err) {
        console.error('切り替え失敗', err);
        db = null;
      }
    }
    try { resetUpload(); } catch (_) {}
    if (db) { try { await loadHistory(); } catch (_) {} }
  }
  renderUserList();

  if (delResult === 'ok') {
    const suffix = (isCurrent && users.length > 0) ? `（${users[0]} に切り替えました）` : '';
    showStatus('success', `「${name}」を削除しました${suffix}`);
  } else {
    showStatus('error', `「${name}」を一覧から削除しました。ただしデータ本体の削除が完了していない可能性があります（${delResult}）。他のタブでこのアプリを開いていないか確認してください。`);
  }
}

// ===== IndexedDB セットアップ =====
const DB_VERSION = 1;
let db;

function openDB() {
  const currentUser = getCurrentUser();
  const dbName = currentUser ? dbNameForUser(currentUser) : 'receipt_db_default';
  return new Promise((resolve, reject) => {
    let done = false;
    const req = indexedDB.open(dbName, DB_VERSION);
    req.onupgradeneeded = e => {
      const d = e.target.result;
      if (!d.objectStoreNames.contains('receipts')) {
        const store = d.createObjectStore('receipts', { keyPath: 'id', autoIncrement: true });
        store.createIndex('date', 'date');
      }
    };
    req.onsuccess = e => { if (!done) { done = true; resolve(e.target.result); } };
    req.onerror   = e => { if (!done) { done = true; reject(e.target.error); } };
    // 削除処理などでブロックされたまま永久に待たないようにする
    req.onblocked = () => { if (!done) { done = true; reject(new Error('DBがブロックされています（他のタブで開いている可能性）')); } };
    // 端末が遅いと5秒では足りず誤ってタイムアウトすることがあったため余裕を持たせる
    setTimeout(() => { if (!done) { done = true; reject(new Error('DBのオープンがタイムアウトしました')); } }, 20000);
  });
}

// 同時に何度も openDB が走らないよう、進行中の接続処理を共有する
let _openDBInFlight = null;
function openDBOnce() {
  if (!_openDBInFlight) {
    _openDBInFlight = openDB().finally(() => { _openDBInFlight = null; });
  }
  return _openDBInFlight;
}

// DB接続が失われていたら開き直す。
// 起動直後のタイミングやバックグラウンド復帰で db が null になることがあり、
// そのまま db.transaction を呼ぶと「Cannot read properties of undefined」になるため、
// すべてのDB操作の入口で接続を保証する。
async function ensureDB() {
  if (db) return db;
  db = await openDBOnce();
  return db;
}

async function dbAdd(storeName, data) {
  const d = await ensureDB();
  return new Promise((resolve, reject) => {
    const tx = d.transaction(storeName, 'readwrite');
    const req = tx.objectStore(storeName).add(data);
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}

// レシートを書き換えたら立つフラグ。詳細ビューを閉じたときに裏の一覧を描き直すために使う。
let _receiptsDirty = false;

async function dbPut(storeName, data) {
  const d = await ensureDB();
  if (storeName === 'receipts') _receiptsDirty = true;
  return new Promise((resolve, reject) => {
    const tx = d.transaction(storeName, 'readwrite');
    const req = tx.objectStore(storeName).put(data);
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}

async function dbDelete(storeName, id) {
  const d = await ensureDB();
  if (storeName === 'receipts') _receiptsDirty = true;
  return new Promise((resolve, reject) => {
    const tx = d.transaction(storeName, 'readwrite');
    const req = tx.objectStore(storeName).delete(id);
    req.onsuccess = () => resolve();
    req.onerror = () => reject(req.error);
  });
}

async function dbGetAll(storeName) {
  const d = await ensureDB();
  return new Promise((resolve, reject) => {
    const tx = d.transaction(storeName, 'readonly');
    const req = tx.objectStore(storeName).getAll();
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}

// ===== 店カテゴリ定義 =====
// store_def: [{id, name}, ...] のオブジェクト配列をlocalStorageに保存
// 旧形式 ["アピタ", ...] は自動マイグレーション
const STORE_DEF_KEY = 'store_def';

const _DEFAULT_STORE_DEF = [];

function loadStoreDefFromStorage() {
  try {
    const raw = localStorage.getItem(STORE_DEF_KEY);
    if (!raw) return [];
    const parsed = JSON.parse(raw);
    // 旧形式（文字列配列）を自動マイグレーション
    if (Array.isArray(parsed) && parsed.length > 0 && typeof parsed[0] === 'string') {
      const migrated = parsed.map(name => ({ id: _genStoreId(), name }));
      localStorage.setItem(STORE_DEF_KEY, JSON.stringify(migrated));
      return migrated;
    }
    return parsed;
  } catch(e) {
    return [];
  }
}

function _genStoreId() {
  return 'store_' + Date.now() + '_' + Math.random().toString(36).slice(2, 7);
}

function _saveStoreDefData(stores) {
  localStorage.setItem(STORE_DEF_KEY, JSON.stringify(stores));
  updateStoreDefStatus();
}

function updateStoreDefStatus() {
  const el = document.getElementById('store-def-status');
  if (!el) return;
  const stores = loadStoreDefFromStorage();
  el.textContent = stores.length > 0 ? `${stores.length}店舗登録済み` : '未登録';
  el.style.color = stores.length > 0 ? 'var(--accent)' : 'var(--text-dim)';
}

// レシート保存時に store_brand を自動登録し、idを返す
function autoRegisterStoreBrand(brand) {
  if (!brand || !brand.trim()) return null;
  const name = brand.trim();
  const stores = loadStoreDefFromStorage();
  const existing = stores.find(s => s.name === name);
  if (existing) return existing.id;
  const newEntry = { id: _genStoreId(), name };
  stores.push(newEntry);
  stores.sort((a, b) => a.name.localeCompare(b.name, 'ja'));
  _saveStoreDefData(stores);
  return newEntry.id;
}

// 店カテゴリエディタ
let storeEditIndex = null; // null=新規, 数値=編集中index

function openStoreEditor() {
  renderStoreEditorList();
  document.getElementById('store-editor-overlay').classList.add('open');
  document.body.style.overflow = 'hidden';

  // JSONインポートイベント登録（重複防止）
  const storeImport = document.getElementById('store-import-file');
  storeImport.onchange = async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    try {
      const text = await file.text();
      const data = JSON.parse(text);
      // バリデーション
      if (!Array.isArray(data)) throw new Error('配列形式ではありません');
      for (let i = 0; i < data.length; i++) {
        if (typeof data[i].name !== 'string' || !data[i].name.trim()) {
          throw new Error(`[${i}].name が不正です`);
        }
      }
      const existing = loadStoreDefFromStorage();
      // 既存と名前照合して追加/上書き（id保持・重複スキップ）
      let addCount = 0, skipCount = 0;
      data.forEach(entry => {
        const name = entry.name.trim();
        const found = existing.find(s => s.name === name);
        if (!found) {
          existing.push({ id: entry.id || _genStoreId(), name });
          addCount++;
        } else {
          skipCount++;
        }
      });
      _saveStoreDefData(existing);
      renderStoreEditorList();
      storeImport.value = '';
      alert(`インポート完了：${addCount}件追加、${skipCount}件スキップ（重複）`);
    } catch(e2) {
      alert(`読み込みエラー：${e2.message}`);
      storeImport.value = '';
    }
  };
}

function _closeStoreEditorBase() {
  document.getElementById('store-editor-overlay').classList.remove('open');
  document.body.style.overflow = '';
  updateStoreDefStatus();
}
var closeStoreEditor = _closeStoreEditorBase;

function openStoreEditorFromSettings() {
  _closeSettingsInner();
  openStoreEditor();
  _pushNavState('store-editor');
}

function renderStoreEditorList() {
  const container = document.getElementById('store-editor-list');
  container.innerHTML = '';
  const stores = loadStoreDefFromStorage();

  if (stores.length === 0) {
    container.innerHTML = '<div style="text-align:center;padding:24px;color:var(--text-dim);font-size:13px;">まだ店カテゴリがありません</div>';
    return;
  }

  stores.forEach((entry, idx) => {
    const row = document.createElement('div');
    row.style.cssText = 'display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--border);';
    row.innerHTML = `
      <span style="flex:1;font-size:14px;">🏪 ${escHtml(entry.name)}</span>
      <button onclick="openEditStoreModal(${idx})" style="background:none;border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-size:12px;padding:4px 10px;border-radius:6px;">✏️</button>
      <button onclick="deleteStoreDef(${idx})" style="background:none;border:1px solid var(--danger);color:var(--danger);cursor:pointer;font-size:12px;padding:4px 10px;border-radius:6px;">🗑</button>
    `;
    container.appendChild(row);
  });
}

var openAddStoreModal = function() {
  storeEditIndex = null;
  document.getElementById('add-store-title').textContent = '＋ 店を追加';
  document.getElementById('add-store-input').value = '';
  document.getElementById('add-store-modal').classList.add('open');
  setTimeout(() => document.getElementById('add-store-input').focus(), 50);
};

var openEditStoreModal = function(idx) {
  storeEditIndex = idx;
  const stores = loadStoreDefFromStorage();
  document.getElementById('add-store-title').textContent = '✏️ 店名を編集';
  document.getElementById('add-store-input').value = stores[idx]?.name || '';
  document.getElementById('add-store-modal').classList.add('open');
  setTimeout(() => document.getElementById('add-store-input').focus(), 50);
};

function saveStoreDef() {
  const name = document.getElementById('add-store-input').value.trim();
  if (!name) { alert('店名を入力してください'); return; }
  const stores = loadStoreDefFromStorage();

  if (storeEditIndex === null) {
    if (stores.some(s => s.name === name)) { alert('同じ名前の店が既に登録されています'); return; }
    stores.push({ id: _genStoreId(), name });
  } else {
    const old = stores[storeEditIndex];
    if (name !== old.name && stores.some(s => s.name === name)) { alert('同じ名前の店が既に登録されています'); return; }
    stores[storeEditIndex] = { id: old.id, name }; // idを保持したまま名前だけ変更
  }
  stores.sort((a, b) => a.name.localeCompare(b.name, 'ja'));
  localStorage.setItem(STORE_DEF_KEY, JSON.stringify(stores));
  updateStoreDefStatus();
  renderStoreEditorList();
  closeModal('add-store-modal');
}

function deleteStoreDef(idx) {
  const stores = loadStoreDefFromStorage();
  if (!confirm(`「${stores[idx].name}」を削除しますか？`)) return;
  stores.splice(idx, 1);
  localStorage.setItem(STORE_DEF_KEY, JSON.stringify(stores));
  updateStoreDefStatus();
  renderStoreEditorList();
}

// ===== カメラ起動時ユーザー名トースト =====
let _toastTimer = null;
function showUserToast() {
  const user = getCurrentUser();
  if (!user) return;
  const el = document.getElementById('user-toast');
  el.textContent = '👤 ' + user;
  // 前のタイマーがあればリセット
  if (_toastTimer) { clearTimeout(_toastTimer); _toastTimer = null; }
  // 一旦クラスを外してリフローさせてからshowを付ける（連続起動時も再アニメーション）
  el.classList.remove('show');
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      el.classList.add('show');
      _toastTimer = setTimeout(() => {
        el.classList.remove('show');
        _toastTimer = null;
      }, 2000);
    });
  });
}


const DEFAULT_CATEGORY_DEF = [{"middle": "ソフトドリンク", "small": ["水・ミネラルウォーター", "炭酸水", "お茶", "コーヒー", "紅茶", "ジュース・果汁飲料", "野菜ジュース", "炭酸飲料", "スポーツドリンク", "栄養ドリンク", "その他ソフトドリンク"]}, {"middle": "乳飲料", "small": ["牛乳", "豆乳", "乳酸菌飲料", "カフェオレ・ラテ", "その他乳飲料"]}, {"middle": "お酒", "small": ["ビール", "発泡酒・第三のビール", "チューハイ・サワー", "ワイン", "日本酒", "焼酎", "ウイスキー", "その他お酒"]}, {"middle": "ノンアルコール飲料", "small": ["ノンアルコールビール", "ノンアルコールチューハイ", "その他ノンアルコール飲料"]}, {"middle": "茶葉・粉末飲料", "small": ["茶葉", "インスタントコーヒー", "粉末飲料", "その他茶葉・粉末飲料"]}, {"middle": "米", "small": ["白米", "玄米", "無洗米", "パックご飯", "その他米"]}, {"middle": "パン", "small": ["食パン", "ロールパン", "菓子パン", "惣菜パン", "その他パン"]}, {"middle": "麺類", "small": ["パスタ", "うどん", "そば", "中華麺", "そうめん", "その他麺類"]}, {"middle": "シリアル", "small": ["シリアル", "グラノーラ", "オートミール", "その他シリアル"]}, {"middle": "粉類", "small": ["強力粉", "薄力粉", "米粉", "ドライイースト", "ホットケーキミックス", "その他粉類"]}, {"middle": "肉", "small": ["豚肉", "牛肉", "鶏肉", "ひき肉", "その他肉"]}, {"middle": "加工肉", "small": ["ハム", "ベーコン", "ウインナー・ソーセージ", "ナゲット", "魚肉ソーセージ", "その他加工肉"]}, {"middle": "魚介", "small": ["鮮魚", "刺身", "干物", "えび・かに", "貝類", "その他魚介"]}, {"middle": "練り物", "small": ["ちくわ", "はんぺん", "かまぼこ", "さつま揚げ", "その他練り物"]}, {"middle": "卵", "small": ["卵"]}, {"middle": "乳製品", "small": ["ヨーグルト", "チーズ", "バター", "生クリーム", "その他乳製品"]}, {"middle": "大豆製品", "small": ["納豆", "豆腐", "油揚げ", "厚揚げ", "その他大豆製品"]}, {"middle": "野菜", "small": ["玉ねぎ", "ねぎ", "じゃがいも", "にんじん", "トマト", "きゅうり", "なす", "ピーマン", "かぼちゃ", "大根", "キャベツ", "レタス", "ほうれん草", "小松菜", "ブロッコリー", "もやし", "きのこ", "にんにく", "しょうが", "カット野菜", "その他野菜"]}, {"middle": "フルーツ", "small": ["バナナ", "りんご", "みかん", "いちご", "ぶどう", "梨", "桃", "キウイ", "メロン", "スイカ", "柿", "その他フルーツ"]}, {"middle": "冷凍食品", "small": ["冷凍米飯", "冷凍麺", "冷凍おかず", "冷凍野菜", "その他冷凍食品"]}, {"middle": "インスタント食品", "small": ["カップラーメン", "袋麺", "カップ焼きそば", "カップうどん・そば", "カップスープ", "インスタント味噌汁", "その他インスタント食品"]}, {"middle": "レトルト食品", "small": ["レトルトカレー", "パスタソース", "レトルトスープ", "丼の素", "その他レトルト食品"]}, {"middle": "缶詰", "small": ["ツナ缶", "サバ缶", "トマト缶", "果物缶", "その他缶詰"]}, {"middle": "惣菜", "small": ["揚げ物", "サラダ", "煮物", "餃子", "その他惣菜"]}, {"middle": "漬物", "small": ["梅干し", "キムチ", "たくあん", "らっきょう", "その他漬物"]}, {"middle": "ご飯のお供", "small": ["ふりかけ", "のり", "なめ茸", "お茶漬け", "佃煮", "その他ご飯のお供"]}, {"middle": "パンのお供", "small": ["ジャム", "マーガリン", "はちみつ", "スプレッド", "その他パンのお供"]}, {"middle": "調味料", "small": ["醤油", "味噌", "塩", "砂糖", "酢", "みりん", "料理酒", "だし", "こしょう・香辛料", "マヨネーズ", "ケチャップ", "ソース", "ドレッシング", "めんつゆ", "中華調味料", "その他調味料"]}, {"middle": "食用油", "small": ["サラダ油", "オリーブオイル", "ごま油", "その他食用油"]}, {"middle": "ルウ", "small": ["カレールウ", "シチュールウ", "その他ルウ"]}, {"middle": "お菓子", "small": ["チョコレート", "クッキー・ビスケット", "スナック菓子", "ポテトチップス", "飴・キャラメル", "グミ", "ガム", "せんべい", "駄菓子", "ナッツ・おつまみ", "その他お菓子"]}, {"middle": "スイーツ", "small": ["ケーキ", "アイス", "プリン", "ゼリー", "和菓子", "その他スイーツ"]}, {"middle": "コンビニ", "small": ["おにぎり", "弁当", "サンドイッチ", "パン", "ホットスナック", "惣菜", "デザート", "ドリンク", "その他コンビニ"]}, {"middle": "外食", "small": ["定食・ランチ", "丼もの", "ラーメン", "うどん・そば", "パスタ", "カレー", "寿司", "焼肉", "ファストフード", "カフェ", "居酒屋", "ビュッフェ", "その他外食"]}, {"middle": "テイクアウト・デリバリー", "small": ["弁当", "ピザ", "ハンバーガー", "丼・定食", "配達手数料", "その他テイクアウト"]}, {"middle": "その他食費", "small": ["その他食費"]}, {"middle": "洗剤", "small": ["洗濯洗剤", "柔軟剤", "食器用洗剤", "お風呂用洗剤", "トイレ用洗剤", "住居用洗剤", "その他洗剤"]}, {"middle": "紙製品", "small": ["トイレットペーパー", "ティッシュ", "キッチンペーパー", "ウェットティッシュ", "その他紙製品"]}, {"middle": "掃除用品", "small": ["ゴミ袋", "掃除シート", "スポンジ", "ブラシ", "その他掃除用品"]}, {"middle": "キッチン用品", "small": ["ラップ・ホイル", "保存袋", "保存容器", "調理器具", "食器", "その他キッチン用品"]}, {"middle": "衛生用品", "small": ["マスク", "生理用品", "除菌・消毒用品", "絆創膏", "その他衛生用品"]}, {"middle": "防虫・防臭", "small": ["殺虫剤", "虫除け", "消臭剤", "芳香剤", "除湿剤", "その他防虫・防臭"]}, {"middle": "電池・照明", "small": ["乾電池", "電球", "延長コード", "その他電池・照明"]}, {"middle": "その他日用品", "small": ["その他日用品"]}, {"middle": "トップス", "small": ["Tシャツ・カットソー", "シャツ・ブラウス", "ニット・セーター", "パーカー・スウェット", "その他トップス"]}, {"middle": "ボトムス", "small": ["パンツ", "ジーンズ", "スカート", "ショートパンツ", "その他ボトムス"]}, {"middle": "アウター", "small": ["ジャケット", "コート", "ダウン", "カーディガン", "その他アウター"]}, {"middle": "インナー・靴下", "small": ["下着", "肌着", "靴下", "タイツ・ストッキング", "その他インナー"]}, {"middle": "靴", "small": ["スニーカー", "革靴", "サンダル", "ブーツ", "その他靴"]}, {"middle": "バッグ・小物", "small": ["バッグ", "財布", "帽子", "ベルト", "マフラー・手袋", "傘", "その他小物"]}, {"middle": "アクセサリー", "small": ["腕時計", "ネックレス", "指輪", "ピアス・イヤリング", "その他アクセサリー"]}, {"middle": "スポーツ・アウトドアウェア", "small": ["トレーニングウェア", "水着", "アウトドアウェア", "その他スポーツウェア"]}, {"middle": "フォーマル・ビジネス", "small": ["スーツ", "ワイシャツ", "ネクタイ", "礼服", "その他フォーマル"]}, {"middle": "ルームウェア", "small": ["パジャマ", "部屋着", "その他ルームウェア"]}, {"middle": "衣類ケア", "small": ["クリーニング", "お直し・修理", "補修用品", "その他衣類ケア"]}, {"middle": "その他衣服", "small": ["その他衣服"]}, {"middle": "スキンケア", "small": ["化粧水", "乳液・クリーム", "美容液", "洗顔料", "クレンジング", "パック", "日焼け止め", "リップクリーム", "その他スキンケア"]}, {"middle": "メイク用品", "small": ["ベースメイク", "アイメイク", "チーク", "口紅・リップ", "眉用品", "その他メイク用品"]}, {"middle": "ヘアケア", "small": ["シャンプー・コンディショナー", "トリートメント", "ヘアオイル", "整髪料", "ヘアカラー", "その他ヘアケア"]}, {"middle": "ボディケア", "small": ["ボディソープ", "石鹸", "ボディクリーム", "ハンドクリーム", "入浴剤", "制汗剤", "その他ボディケア"]}, {"middle": "オーラルケア", "small": ["歯ブラシ", "歯磨き粉", "デンタルフロス", "マウスウォッシュ", "その他オーラルケア"]}, {"middle": "シェービング・脱毛", "small": ["カミソリ", "シェービングフォーム", "除毛・脱毛用品", "その他シェービング"]}, {"middle": "ネイル・フレグランス", "small": ["マニキュア", "ネイルケア用品", "香水", "その他ネイル・フレグランス"]}, {"middle": "美容家電", "small": ["ドライヤー", "ヘアアイロン", "シェーバー", "電動歯ブラシ", "その他美容家電"]}, {"middle": "美容サービス", "small": ["美容院・理髪店", "ヘアカラー・パーマ", "ネイルサロン", "エステ", "脱毛サロン", "その他美容サービス"]}, {"middle": "その他美容", "small": ["その他美容"]}, {"middle": "診察・治療", "small": ["内科", "歯科", "眼科", "皮膚科", "耳鼻科", "整形外科", "心療内科・精神科", "その他診療科"]}, {"middle": "薬", "small": ["処方薬", "風邪薬", "鎮痛剤", "胃腸薬", "目薬", "外用薬", "その他薬"]}, {"middle": "検査・健診", "small": ["健康診断", "人間ドック", "各種検査", "予防接種", "その他検査・健診"]}, {"middle": "入院・手術", "small": ["入院費", "手術費", "その他入院費用"]}, {"middle": "整体・リハビリ", "small": ["整骨・接骨", "鍼灸", "マッサージ", "リハビリ", "その他整体"]}, {"middle": "医療用品", "small": ["絆創膏", "包帯・ガーゼ", "体温計", "サポーター", "コンタクトレンズ", "眼鏡", "その他医療用品"]}, {"middle": "健康維持", "small": ["サプリメント", "プロテイン", "ジム・フィットネス", "その他健康維持"]}, {"middle": "その他医療・健康", "small": ["診断書・文書料", "通院交通費", "その他医療・健康"]}, {"middle": "電車", "small": ["切符", "IC乗車", "乗り越し精算", "その他電車"]}, {"middle": "新幹線・特急", "small": ["乗車券", "特急券", "指定席・グリーン券", "その他新幹線・特急"]}, {"middle": "バス", "small": ["路線バス", "高速バス", "空港バス", "その他バス"]}, {"middle": "定期券", "small": ["通学定期", "通勤定期", "その他定期券"]}, {"middle": "タクシー", "small": ["タクシー", "配車アプリ", "その他タクシー"]}, {"middle": "飛行機・船", "small": ["航空券", "手荷物料金", "フェリー", "その他飛行機・船"]}, {"middle": "自動車・バイク", "small": ["ガソリン", "高速道路料金", "駐車場", "駐輪場", "車検・整備", "自動車税", "任意保険", "その他自動車・バイク"]}, {"middle": "レンタル移動", "small": ["レンタカー", "カーシェア", "レンタサイクル", "その他レンタル移動"]}, {"middle": "その他交通費", "small": ["その他交通費"]}, {"middle": "家賃", "small": ["家賃", "管理費・共益費", "駐車場代", "その他家賃"]}, {"middle": "契約費用", "small": ["敷金", "礼金", "更新料", "仲介手数料", "火災保険", "その他契約費用"]}, {"middle": "家具", "small": ["机", "椅子", "収納・棚", "ベッド", "照明", "カーテン", "その他家具"]}, {"middle": "寝具", "small": ["布団", "枕", "シーツ・カバー", "毛布", "その他寝具"]}, {"middle": "インテリア", "small": ["ラグ・マット", "時計", "観葉植物", "装飾品", "その他インテリア"]}, {"middle": "家電", "small": ["冷蔵庫", "洗濯機", "エアコン", "掃除機", "電子レンジ", "炊飯器", "テレビ", "その他家電"]}, {"middle": "DIY・修繕", "small": ["工具", "資材", "ネジ・金具", "園芸用品", "修理費", "その他DIY・修繕"]}, {"middle": "引越し", "small": ["引越し費用", "梱包資材", "その他引越し"]}, {"middle": "その他住居費", "small": ["その他住居費"]}, {"middle": "電気代", "small": ["電気料金", "その他電気代"]}, {"middle": "ガス代", "small": ["都市ガス", "プロパンガス", "その他ガス代"]}, {"middle": "水道代", "small": ["上下水道料金", "その他水道代"]}, {"middle": "その他燃料", "small": ["灯油", "カセットボンベ", "その他燃料"]}, {"middle": "スマホ・携帯", "small": ["月額基本料", "データ追加", "通話料", "端末代", "その他スマホ・携帯"]}, {"middle": "インターネット回線", "small": ["光回線", "モバイルWi-Fi", "プロバイダ料金", "その他ネット回線"]}, {"middle": "通信機器", "small": ["スマホ本体", "ルーター", "SIMカード", "ケーブル・充電器", "その他通信機器"]}, {"middle": "その他通信費", "small": ["郵送・宅配", "その他通信費"]}, {"middle": "学費", "small": ["授業料", "入学金", "施設費", "実習費", "その他学費"]}, {"middle": "教材・書籍", "small": ["教科書", "参考書", "問題集", "専門書", "電子書籍", "その他教材・書籍"]}, {"middle": "文房具", "small": ["ペン類", "ノート・ルーズリーフ", "消しゴム", "のり・テープ", "ハサミ・カッター", "ファイル", "その他文房具"]}, {"middle": "学用品", "small": ["カバン", "電卓", "製図用品", "実験・実習用品", "その他学用品"]}, {"middle": "資格・受験", "small": ["受験料", "検定料", "出願費用", "その他資格・受験"]}, {"middle": "講座・学習サービス", "small": ["塾・予備校", "通信教育", "オンライン講座", "学習アプリ", "その他学習サービス"]}, {"middle": "その他教育・教養", "small": ["学会・研究費", "部費・サークル費", "その他教育・教養"]}, {"middle": "書籍・雑誌", "small": ["マンガ", "小説・ライトノベル", "雑誌", "電子書籍", "その他書籍"]}, {"middle": "映画・映像", "small": ["映画鑑賞料", "パンフレット", "映画館の飲食", "DVD・Blu-ray", "その他映画・映像"]}, {"middle": "音楽", "small": ["CD・レコード", "ライブ・コンサート", "楽器・機材", "その他音楽"]}, {"middle": "ゲーム", "small": ["ゲームソフト", "ゲーム機・周辺機器", "アプリ内課金", "その他ゲーム"]}, {"middle": "グッズ・推し活", "small": ["缶バッジ", "アクリルスタンド", "キーホルダー", "ぬいぐるみ", "フィギュア", "ペンライト", "その他グッズ"]}, {"middle": "イベント・レジャー", "small": ["テーマパーク", "動物園・水族館", "美術館・博物館", "温泉・銭湯", "スポーツ観戦", "フェス・イベント", "その他レジャー"]}, {"middle": "スポーツ・アウトドア", "small": ["用具", "施設利用料", "キャンプ用品", "その他スポーツ・アウトドア"]}, {"middle": "旅行", "small": ["宿泊費", "パッケージツアー", "現地交通費", "観光・入場料", "おみやげ", "その他旅行"]}, {"middle": "創作・制作", "small": ["電子部品", "工作材料", "画材", "ソフトウェア", "その他創作・制作"]}, {"middle": "その他趣味・娯楽", "small": ["その他趣味・娯楽"]}, {"middle": "食事・飲み会", "small": ["ランチ", "飲み会", "カフェ", "二次会", "その他食事・飲み会"]}, {"middle": "プレゼント", "small": ["誕生日プレゼント", "記念日プレゼント", "お土産", "その他プレゼント"]}, {"middle": "冠婚葬祭", "small": ["ご祝儀", "香典", "会費", "その他冠婚葬祭"]}, {"middle": "お中元・お歳暮", "small": ["お中元", "お歳暮", "お年賀", "その他贈答"]}, {"middle": "その他交際費", "small": ["立替", "差し入れ", "その他交際費"]}, {"middle": "サブスク・会員費", "small": ["動画配信", "音楽配信", "電子書籍", "クラウドストレージ", "ソフトウェア", "その他サブスク"]}, {"middle": "宿泊・施設利用", "small": ["ホテル", "旅館", "ネットカフェ", "コワーキング", "その他施設利用"]}, {"middle": "修理・メンテナンス", "small": ["家電修理", "PC・スマホ修理", "靴・バッグ修理", "その他修理"]}, {"middle": "クリーニング・洗濯", "small": ["クリーニング", "コインランドリー", "その他クリーニング"]}, {"middle": "配送・郵送", "small": ["宅配便", "郵便", "切手・はがき", "梱包資材", "その他配送"]}, {"middle": "手数料", "small": ["ATM手数料", "振込手数料", "年会費", "キャンセル料", "その他手数料"]}, {"middle": "行政手続き", "small": ["証明書発行", "印紙代", "更新手数料", "その他行政手続き"]}, {"middle": "その他サービス", "small": ["写真・印刷", "レンタル", "代行サービス", "その他サービス"]}, {"middle": "保険", "small": ["医療保険", "生命保険", "損害保険", "自転車保険", "その他保険"]}, {"middle": "税金", "small": ["住民税", "所得税", "固定資産税", "その他税金"]}, {"middle": "社会保険", "small": ["国民健康保険", "国民年金", "その他社会保険"]}, {"middle": "その他保険・税金", "small": ["その他保険・税金"]}, {"middle": "通販サイト", "small": ["通販サイト", "その他通販サイト"]}, {"middle": "フリマ・オークション", "small": ["フリマアプリ", "ネットオークション", "その他フリマ"]}, {"middle": "専門通販", "small": ["電子部品・パーツ", "書籍通販", "衣類通販", "その他専門通販"]}, {"middle": "送料・手数料", "small": ["送料", "代引手数料", "その他送料・手数料"]}, {"middle": "コード決済", "small": ["コード決済チャージ", "その他コード決済"]}, {"middle": "交通系ICカード", "small": ["交通系ICチャージ", "その他交通系IC"]}, {"middle": "プリペイド", "small": ["プリペイドカード", "ギフトカード", "その他プリペイド"]}, {"middle": "その他チャージ", "small": ["ポイント購入", "その他チャージ"]}, {"middle": "その他", "small": ["その他"]}, {"middle": "立替・精算", "small": ["立替", "精算", "その他立替・精算"]}, {"middle": "現金引き出し", "small": ["ATM出金", "その他現金引き出し"]}, {"middle": "その他支出", "small": ["その他支出"]}, {"middle": "モバイルクレカ", "small": ["チャージ", "その他モバイルクレカ"]}];

const DEFAULT_LARGE_DEF = [{"large": "食費", "middles": ["ソフトドリンク", "乳飲料", "お酒", "ノンアルコール飲料", "茶葉・粉末飲料", "米", "パン", "麺類", "シリアル", "粉類", "肉", "加工肉", "魚介", "練り物", "卵", "乳製品", "大豆製品", "野菜", "フルーツ", "冷凍食品", "インスタント食品", "レトルト食品", "缶詰", "惣菜", "漬物", "ご飯のお供", "パンのお供", "調味料", "食用油", "ルウ", "お菓子", "スイーツ", "コンビニ", "外食", "テイクアウト・デリバリー", "その他食費"]}, {"large": "日用品", "middles": ["洗剤", "紙製品", "掃除用品", "キッチン用品", "衛生用品", "防虫・防臭", "電池・照明", "その他日用品"]}, {"large": "衣服", "middles": ["トップス", "ボトムス", "アウター", "インナー・靴下", "靴", "バッグ・小物", "アクセサリー", "スポーツ・アウトドアウェア", "フォーマル・ビジネス", "ルームウェア", "衣類ケア", "その他衣服"]}, {"large": "美容", "middles": ["スキンケア", "メイク用品", "ヘアケア", "ボディケア", "オーラルケア", "シェービング・脱毛", "ネイル・フレグランス", "美容家電", "美容サービス", "その他美容"]}, {"large": "医療・健康", "middles": ["診察・治療", "薬", "検査・健診", "入院・手術", "整体・リハビリ", "医療用品", "健康維持", "その他医療・健康"]}, {"large": "交通費", "middles": ["電車", "新幹線・特急", "バス", "定期券", "タクシー", "飛行機・船", "自動車・バイク", "レンタル移動", "その他交通費"]}, {"large": "住居費", "middles": ["家賃", "契約費用", "家具", "寝具", "インテリア", "家電", "DIY・修繕", "引越し", "その他住居費"]}, {"large": "水道・光熱費", "middles": ["電気代", "ガス代", "水道代", "その他燃料"]}, {"large": "通信費", "middles": ["スマホ・携帯", "インターネット回線", "通信機器", "その他通信費"]}, {"large": "教育・教養", "middles": ["学費", "教材・書籍", "文房具", "学用品", "資格・受験", "講座・学習サービス", "その他教育・教養"]}, {"large": "趣味・娯楽", "middles": ["書籍・雑誌", "映画・映像", "音楽", "ゲーム", "グッズ・推し活", "イベント・レジャー", "スポーツ・アウトドア", "旅行", "創作・制作", "その他趣味・娯楽"]}, {"large": "交際費", "middles": ["食事・飲み会", "プレゼント", "冠婚葬祭", "お中元・お歳暮", "その他交際費"]}, {"large": "サービス", "middles": ["サブスク・会員費", "宿泊・施設利用", "修理・メンテナンス", "クリーニング・洗濯", "配送・郵送", "手数料", "行政手続き", "その他サービス"]}, {"large": "保険・税金", "middles": ["保険", "税金", "社会保険", "その他保険・税金"]}, {"large": "ネットショッピング", "middles": ["通販サイト", "フリマ・オークション", "専門通販", "送料・手数料"]}, {"large": "チャージ・入金", "middles": ["コード決済", "交通系ICカード", "モバイルクレカ", "プリペイド", "その他チャージ"]}, {"large": "未分類", "middles": ["その他", "立替・精算", "現金引き出し", "その他支出"]}];

let categoryDef = null; // [{ id: "mid_xxx", middle: "野菜", small: ["じゃがいも", ...] }, ...]

function _genMiddleId() {
  return 'mid_' + Date.now() + '_' + Math.random().toString(36).slice(2, 7);
}

// id→名前解決ヘルパー（表示・集計で使用）
function midIdToName(id) {
  if (!id || !categoryDef) return null;
  const entry = categoryDef.find(m => m.id === id);
  return entry ? entry.middle : null;
}

// 名前→id解決ヘルパー（マイグレーション・後方互換で使用）

// itemのmiddle_category名を解決（id優先→名前フォールバック→その他）
function resolveMiddleName(item) {
  if (item.middle_category_id) {
    const name = midIdToName(item.middle_category_id);
    if (name) return name;
  }
  return item.middle_category || item.large_category || 'その他';
}

// itemが属する大カテゴリ名を解決（largeDef未設定時はnull）
function resolveLargeName(item) {
  if (!largeDef || largeDef.length === 0) return null;
  // middle_category_id → largeDef で逆引き
  let midId = item.middle_category_id;
  if (!midId) {
    // idなし → 名前からidを引く
    const midName = resolveMiddleName(item);
    const entry = categoryDef && categoryDef.find(m => m.middle === midName);
    midId = entry ? entry.id : null;
  }
  if (!midId) return '未分類';
  const ld = largeDef.find(l => l.middles.includes(midId));
  return ld ? ld.large : '未分類';
}

// カテゴリバッジ用テキストを生成（大›中›小 or 中›小）
function resolveCatLabel(item) {
  const mid   = resolveMiddleName(item);
  const small = item.small_category || '';
  const large = resolveLargeName(item);

  if (large && large !== '未分類') {
    return small ? `${large} › ${mid} › ${small}` : `${large} › ${mid}`;
  }
  return small ? `${mid} › ${small}` : mid;
}
function midNameToId(name) {
  if (!name || !categoryDef) return null;
  const entry = categoryDef.find(m => m.middle === name);
  return entry ? entry.id : null;
}

// IDが現在のcategoryDefに存在しない場合は名前で再解決するヘルパー
// インポート後にIDが食い違う問題を集計・ドリルダウン全箇所で吸収する
function resolveMidId(item) {
  let midId = item.middle_category_id;
  if (midId && categoryDef && !categoryDef.some(m => m.id === midId)) {
    // IDが現在のcategoryDefに存在しない → 名前で再解決
    midId = midNameToId(resolveMiddleName(item));
  }
  if (!midId) midId = midNameToId(resolveMiddleName(item));
  return midId;
}

function loadCategoryDefFromStorage() {
  try {
    const raw = localStorage.getItem('category_def');
    if (raw) {
      categoryDef = JSON.parse(raw);
      // 旧形式（idなし）を自動マイグレーション
      let migrated = false;
      categoryDef.forEach(m => {
        if (!m.id) { m.id = _genMiddleId(); migrated = true; }
      });
      if (migrated) localStorage.setItem('category_def', JSON.stringify(categoryDef));
    } else {
      // 初回：デフォルトをlocalStorageに保存して使用
      categoryDef = JSON.parse(JSON.stringify(DEFAULT_CATEGORY_DEF)).map(m => ({ id: _genMiddleId(), ...m }));
      localStorage.setItem('category_def', JSON.stringify(categoryDef));
    }
  } catch(e) {
    categoryDef = JSON.parse(JSON.stringify(DEFAULT_CATEGORY_DEF)).map(m => ({ id: _genMiddleId(), ...m }));
  }
}

// ===== 大中カテゴリ定義 (Phase1) =====
// largeDef: [{ large: "未分類", middles: ["野菜", "肉", ...] }, ...]
const LARGE_DEF_KEY = 'large_def';
let largeDef = null;

function loadLargeDefFromStorage() {
  try {
    const raw = localStorage.getItem(LARGE_DEF_KEY);
    if (raw) {
      largeDef = JSON.parse(raw);
      // categoryDef に存在するが largeDef に未登録の中カテゴリを「未分類」に追加
      _syncLargeDefFromCategoryDef();
    } else {
      // 初回：全中カテゴリを「未分類」にまとめて生成
      _initLargeDef();
    }
  } catch(e) {
    _initLargeDef();
  }
}

function _initLargeDef() {
  largeDef = JSON.parse(JSON.stringify(DEFAULT_LARGE_DEF));
  // 初回も名前→id変換を実行（categoryDefロード後に呼ばれることが前提）
  _syncLargeDefFromCategoryDef();
  saveLargeDef();
}

// categoryDef の中カテゴリが largeDef に存在しない場合「未分類」に追加
// largeDef.middles は id配列。旧形式（名前配列）を自動マイグレーション
function _syncLargeDefFromCategoryDef() {
  // largeDef.middles の旧形式（名前文字列）をidに変換
  const validIds = new Set((categoryDef || []).map(m => m.id));
  let lmigrated = false;
  (largeDef || []).forEach(l => {
    l.middles = l.middles.map(entry => {
      if (typeof entry === 'string' && !validIds.has(entry)) {
        const found = (categoryDef || []).find(m => m.middle === entry);
        lmigrated = true;
        return found ? found.id : null;
      }
      return entry;
    }).filter(Boolean);
  });
  if (lmigrated) saveLargeDef();

  // ── 収入大カテゴリのマイグレーション ──
  // largeDef に「収入」がない、またはmiddlesが空の場合に正しく補完する。
  const INCOME_LARGE_NAME = '収入';
  const INCOME_MIDDLE_NAMES = ['給与・賞与','お小遣い','副業・フリーランス','投資・運用','売却・フリマ','補助・給付金','その他収入'];
  const incomeIds = INCOME_MIDDLE_NAMES
    .map(name => (categoryDef || []).find(m => m.middle === name))
    .filter(Boolean).map(m => m.id);

  if (incomeIds.length > 0) {
    let incomeEntry = largeDef.find(l => l.large === INCOME_LARGE_NAME);
    const needsFix = !incomeEntry || incomeEntry.middles.length === 0;
    if (needsFix) {
      // 他の大カテゴリ（未分類含む）から収入IDを除去
      (largeDef || []).forEach(l => {
        if (l.large !== INCOME_LARGE_NAME)
          l.middles = l.middles.filter(id => !incomeIds.includes(id));
      });
      if (!incomeEntry) {
        largeDef.push({ large: INCOME_LARGE_NAME, middles: incomeIds });
      } else {
        incomeEntry.middles = incomeIds;
      }
      saveLargeDef();
    }
  }

  // 未登録IDは「未分類」へ（収入カテゴリは除外済み）
  const allIds = (categoryDef || []).map(m => m.id);
  const registered = largeDef.flatMap(l => l.middles);
  const unregistered = allIds.filter(id => !registered.includes(id));
  if (unregistered.length > 0) {
    let unclassified = largeDef.find(l => l.large === '未分類');
    if (!unclassified) {
      unclassified = { large: '未分類', middles: [] };
      largeDef.push(unclassified);
    }
    unclassified.middles.push(...unregistered);
    saveLargeDef();
  }
}

function saveLargeDef() {
  localStorage.setItem(LARGE_DEF_KEY, JSON.stringify(largeDef));
}

// 中カテゴリ名変更時の largeDef 同期
// idで管理するためlargeDef側の変更は不要。categoryDef.middle書き換えのみで反映される
function syncLargeDefOnMiddleRename(oldName, newName) {
  // id管理に移行済みのため何もしない（後方互換のため関数は残す）
}

// 中カテゴリ削除時の largeDef 同期（idで削除）
function syncLargeDefOnMiddleDelete(id) {
  if (!id) return;
  let changed = false;
  (largeDef || []).forEach(l => {
    const idx = l.middles.indexOf(id);
    if (idx !== -1) { l.middles.splice(idx, 1); changed = true; }
  });
  if (changed) saveLargeDef();
}

// 中カテゴリ追加時の largeDef 同期（「未分類」にidで追加）
function syncLargeDefOnMiddleAdd(id) {
  if (!largeDef || !id) return;
  let unclassified = largeDef.find(l => l.large === '未分類');
  if (!unclassified) {
    unclassified = { large: '未分類', middles: [] };
    largeDef.push(unclassified);
  }
  if (!unclassified.middles.includes(id)) {
    unclassified.middles.push(id);
    saveLargeDef();
  }
}

function validateLargeDef(data) {
  if (!Array.isArray(data)) return '配列形式ではありません';
  for (let i = 0; i < data.length; i++) {
    if (typeof data[i].large !== 'string') return `[${i}].large が文字列ではありません`;
    if (!Array.isArray(data[i].middles)) return `[${i}].middles が配列ではありません`;
  }
  return null;
}

// largeDef インポート時の名前→idマイグレーション（インポートJSON が旧名前形式の場合に対応）
function migrateLargeDefMiddlesToIds(data) {
  data.forEach(l => {
    l.middles = l.middles.map(entry => {
      if (typeof entry !== 'string') return entry;
      // idとして存在するか確認
      if (categoryDef && categoryDef.find(m => m.id === entry)) return entry;
      // 名前として存在するなら変換
      const found = categoryDef && categoryDef.find(m => m.middle === entry);
      return found ? found.id : null;
    }).filter(Boolean);
  });
}

// 大中カテゴリをデフォルトに戻す
function resetLargeDefToDefault() {
  if (!confirm('大中カテゴリをデフォルトに戻しますか？\n現在の変更はすべて失われます。')) return;
  largeDef = JSON.parse(JSON.stringify(DEFAULT_LARGE_DEF));
  // categoryDef に存在するが DEFAULT_LARGE_DEF にない中カテゴリを「未分類」に補完
  _syncLargeDefFromCategoryDef();
  saveLargeDef();
  renderLargeEditorList();
}

// 大中カテゴリ + 中小カテゴリをまとめてJSONエクスポート
function exportAllCategoryDef() {
  const now = new Date();
  const pad = n => String(n).padStart(2, '0');
  const dateStr = `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())}_${now.getHours()}:${pad(now.getMinutes())}`;
  const payload = { largeDef, categoryDef };
  const json = JSON.stringify(payload, null, 2);
  const blob = new Blob([json], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `商品カテゴリ_${dateStr}.json`;
  a.click();
  URL.revokeObjectURL(url);
}

// 大中カテゴリ定義をJSONエクスポート
function exportLargeDef() {
  const json = JSON.stringify(largeDef, null, 2);
  const blob = new Blob([json], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  const now = new Date();
  const pad = n => String(n).padStart(2, '0');
  const dateStr = `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())}_${now.getHours()}:${pad(now.getMinutes())}`;
  a.href = url;
  a.download = `商品カテゴリ_${dateStr}.json`;
  a.click();
  URL.revokeObjectURL(url);
}

function exportStoreDef() {
  const stores = loadStoreDefFromStorage();
  const json = JSON.stringify(stores, null, 2);
  const blob = new Blob([json], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  const now = new Date();
  const pad = n => String(n).padStart(2, '0');
  const dateStr = `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())}_${now.getHours()}:${pad(now.getMinutes())}`;
  a.href = url;
  a.download = `店カテゴリ_${dateStr}.json`;
  a.click();
  URL.revokeObjectURL(url);
}

// ===== 大中カテゴリエディタ (Phase2) =====
let largeEditIndex = null; // null=新規, 数値=編集中index
let moveMiddleName = null; // 移動対象の中カテゴリ名
let moveMiddleFromLargeIdx = null; // 移動元の大カテゴリindex
// 大中エディタで展開中の中カテゴリ（midIdのSet）
const _largeEditorOpenSet = new Set();
// 大中エディタで展開中の大カテゴリ（largeNameのSet）。デフォルト閉じ
const _largeCardOpenSet = new Set();

function openLargeEditorFromSettings() {
  _closeSettingsInner();
  openLargeEditor();
  _pushNavState('large-editor');
}

function openLargeEditor() {
  renderLargeEditorList();
  document.getElementById('large-editor-overlay').classList.add('open');
  document.body.style.overflow = 'hidden';

  // 商品カテゴリ一括インポートイベント登録
  const allCatImport = document.getElementById('all-cat-import-file');
  allCatImport.onchange = async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    try {
      const text = await file.text();
      const data = JSON.parse(text);
      // { largeDef, categoryDef } 形式チェック
      if (!data.largeDef || !data.categoryDef) {
        alert('JSONの形式が正しくありません：largeDef / categoryDef キーが必要です');
        allCatImport.value = ''; return;
      }
      const errL = validateLargeDef(data.largeDef);
      if (errL) { alert(`largeDef の形式が正しくありません：${errL}`); allCatImport.value = ''; return; }
      const errC = validateCategoryDef(data.categoryDef);
      if (errC) { alert(`categoryDef の形式が正しくありません：${errC}`); allCatImport.value = ''; return; }
      if (!confirm(`大カテゴリ ${data.largeDef.length}件・中小カテゴリ ${data.categoryDef.length}件で上書きします。よろしいですか？`)) {
        allCatImport.value = ''; return;
      }
      // categoryDef を先に適用（idを補完）
      categoryDef = data.categoryDef.map(m => ({ id: m.id || _genMiddleId(), ...m }));
      saveCategoryDef();
      // largeDef を適用
      largeDef = data.largeDef;
      migrateLargeDefMiddlesToIds(largeDef);
      // largeDef に存在しない中カテゴリIDを未分類に補完
      {
        const allIds = categoryDef.map(m => m.id);
        const registered = largeDef.flatMap(l => l.middles);
        const unregistered = allIds.filter(id => !registered.includes(id));
        if (unregistered.length > 0) {
          let unclassified = largeDef.find(l => l.large === '未分類');
          if (!unclassified) { unclassified = { large: '未分類', middles: [] }; largeDef.push(unclassified); }
          unclassified.middles.push(...unregistered);
        }
      }
      saveLargeDef();
      renderLargeEditorList();
      allCatImport.value = '';
      alert('商品カテゴリのインポートが完了しました。');
    } catch(e2) {
      alert(`読み込みエラー：${e2.message}`);
      allCatImport.value = '';
    }
  };
}

// ===== 収入カテゴリ管理 =====
const INCOME_CAT_KEY = 'income_categories';
const INCOME_CAT_DEFAULT = ['給与・賞与','お小遣い','副業・フリーランス','投資・運用','売却・フリマ','補助・給付金','その他収入'];

function loadIncomeCategories() {
  try {
    const raw = localStorage.getItem(INCOME_CAT_KEY);
    return raw ? JSON.parse(raw) : [...INCOME_CAT_DEFAULT];
  } catch(e) { return [...INCOME_CAT_DEFAULT]; }
}

function saveIncomeCategories(list) {
  localStorage.setItem(INCOME_CAT_KEY, JSON.stringify(list));
}

function updateIncomeCatStatus() {
  const el = document.getElementById('income-cat-status');
  if (!el) return;
  const list = loadIncomeCategories();
  el.textContent = list.length + ' 件';
}

function openIncomeCatEditorFromSettings() {
  _closeSettingsInner();
  document.getElementById('income-cat-editor-overlay').classList.add('open');
  document.body.style.overflow = 'hidden';
  renderIncomeCatList();
  _pushNavState('income-cat-editor');
}

function closeIncomeCatEditor() {
  if (_handlingPopstate) { _closeIncomeCatEditorInner(); return; }
  history.back();
}

function _closeIncomeCatEditorInner() {
  document.getElementById('income-cat-editor-overlay').classList.remove('open');
  document.body.style.overflow = '';
  updateIncomeCatStatus();
  // 手入力フォームのドロップダウンも最新化
  refreshManualCategoryUI();
}

function renderIncomeCatList() {
  const ul = document.getElementById('income-cat-list-ui');
  if (!ul) return;
  const list = loadIncomeCategories();
  ul.innerHTML = '';
  if (list.length === 0) {
    ul.innerHTML = '<div style="font-size:13px;color:var(--text-dim);padding:8px 0;">カテゴリがありません</div>';
    return;
  }
  list.forEach((name, idx) => {
    const row = document.createElement('div');
    row.style.cssText = 'display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--border);';
    row.innerHTML = `
      <span style="flex:1;font-size:14px;">${escHtml(name)}</span>
      <button onclick="openEditIncomeCatModal(${idx})"
        style="background:none;border:1px solid var(--border);border-radius:6px;color:var(--text-dim);font-size:13px;padding:4px 10px;cursor:pointer;font-family:inherit;">✏️</button>
      <button onclick="deleteIncomeCatItem(${idx})"
        style="background:none;border:1px solid var(--border);border-radius:6px;color:var(--danger);font-size:13px;padding:4px 10px;cursor:pointer;">削除</button>
    `;
    ul.appendChild(row);
  });
}

function addIncomeCatItem() {
  const input = document.getElementById('income-cat-new-input');
  const name = input.value.trim();
  const msg = document.getElementById('income-cat-msg');
  if (!name) { msg.style.color='var(--danger)'; msg.textContent='カテゴリ名を入力してください'; return; }
  const list = loadIncomeCategories();
  if (list.includes(name)) { msg.style.color='var(--danger)'; msg.textContent='同じ名前がすでに存在します'; return; }
  list.push(name);
  saveIncomeCategories(list);
  input.value = '';
  msg.style.color='var(--accent)'; msg.textContent='追加しました';
  setTimeout(() => { if(msg) msg.textContent=''; }, 2000);
  renderIncomeCatList();
}

// ── 収入カテゴリ名の変更 ──
let _incomeCatEditIndex = null; // null=未選択, 数値=編集中index

function openEditIncomeCatModal(idx) {
  const list = loadIncomeCategories();
  if (!list[idx]) return;
  _incomeCatEditIndex = idx;
  const input = document.getElementById('income-cat-edit-input');
  input.value = list[idx];
  openModal('income-cat-edit-modal');
  setTimeout(() => { input.focus(); input.select(); }, 50);
}

/**
 * 既存レコードの収入カテゴリ名を旧名→新名に置換する。
 * 収入カテゴリは（中カテゴリと違い）idではなく名前で紐付いているため、
 * 名前変更時にレコード側も更新しないと過去データが旧名のまま孤立する。
 * @returns {Promise<number>} 更新したレコード件数
 */
async function migrateIncomeCatName(oldName, newName) {
  const all = await dbGetAll('receipts');
  const brandIds = new Set();
  let updated = 0;

  for (const r of all) {
    if (r.entry_type !== 'income') continue;
    let changed = false;

    if (r.store === oldName)       { r.store = newName;       changed = true; }
    if (r.store_brand === oldName) { r.store_brand = newName; changed = true; }
    (r.items || []).forEach(it => {
      if (it.middle_category === oldName) { it.middle_category = newName; changed = true; }
    });

    if (changed) {
      if (r.store_brand_id) brandIds.add(r.store_brand_id);
      await dbPut('receipts', r);
      updated++;
    }
  }

  // 収入カテゴリは保存時に店ブランドとしても自動登録されるため、
  // 対象レコードが参照している店定義エントリも同時にリネームする
  if (brandIds.size > 0) {
    const stores = loadStoreDefFromStorage();
    let storeChanged = false;
    stores.forEach(s => {
      if (brandIds.has(s.id) && s.name === oldName) { s.name = newName; storeChanged = true; }
    });
    if (storeChanged) {
      stores.sort((a, b) => a.name.localeCompare(b.name, 'ja'));
      localStorage.setItem(STORE_DEF_KEY, JSON.stringify(stores));
    }
  }

  return updated;
}

async function saveIncomeCatRename() {
  const input = document.getElementById('income-cat-edit-input');
  const newName = input.value.trim();
  const msg = document.getElementById('income-cat-msg');
  if (_incomeCatEditIndex === null) { closeModal('income-cat-edit-modal'); return; }
  if (!newName) { alert('カテゴリ名を入力してください'); return; }

  const list = loadIncomeCategories();
  const oldName = list[_incomeCatEditIndex];
  if (newName === oldName) { closeModal('income-cat-edit-modal'); return; }
  if (list.includes(newName)) { alert('同じ名前がすでに存在します'); return; }

  list[_incomeCatEditIndex] = newName;
  saveIncomeCategories(list);

  let updated = 0;
  try {
    updated = await migrateIncomeCatName(oldName, newName);
  } catch (e) {
    console.error('収入カテゴリ名の反映に失敗', e);
    if (msg) { msg.style.color = 'var(--danger)'; msg.textContent = 'カテゴリ名は変更しましたが、既存レコードの更新に失敗しました'; }
    _incomeCatEditIndex = null;
    renderIncomeCatList();
    closeModal('income-cat-edit-modal');
    return;
  }

  _incomeCatEditIndex = null;
  renderIncomeCatList();
  closeModal('income-cat-edit-modal');

  if (msg) {
    msg.style.color = 'var(--accent)';
    msg.textContent = `「${oldName}」→「${newName}」に変更しました` + (updated > 0 ? `（レコード${updated}件を更新）` : '');
    setTimeout(() => { if (msg) msg.textContent = ''; }, 3000);
  }

  // 集計タブが表示中なら即時反映
  const statsTab = document.getElementById('tab-stats');
  if (statsTab && statsTab.classList.contains('active')) loadStats();
}

function deleteIncomeCatItem(idx) {
  const list = loadIncomeCategories();
  if (!confirm(`「${list[idx]}」を削除しますか？`)) return;
  list.splice(idx, 1);
  saveIncomeCategories(list);
  renderIncomeCatList();
}

function closeLargeEditor() {
  if (_handlingPopstate) { _closeLargeEditorInner(); return; }
  history.back();
}

function _closeLargeEditorInner() {
  document.getElementById('large-editor-overlay').classList.remove('open');
  document.body.style.overflow = '';
  syncCategoryDefOrderFromLargeDef();
  // 追加タブのカテゴリUIを最新化。これがないとタブ切替まで編集内容が反映されない。
  refreshManualCategoryUI();
}

// 大中エディタが開いていれば再描画（中小側の変更後に呼ぶ）
function syncRenderLargeEditor() {
  if (document.getElementById('large-editor-overlay').classList.contains('open')) {
    renderLargeEditorList();
  }
}

// 中小エディタが開いていれば再描画（大中側の変更後に呼ぶ）
// 中小エディタは廃止済み（大中エディタに統合）
function syncRenderCatEditor() { /* noop */ }

function syncCategoryDefOrderFromLargeDef() {
  if (!categoryDef || !largeDef) return;
  const seen = new Set();
  const orderedIds = [];
  for (const l of largeDef) {
    for (const id of (l.middles || [])) {
      if (!seen.has(id)) { seen.add(id); orderedIds.push(id); }
    }
  }
  const idToEntry = new Map(categoryDef.map(m => [m.id, m]));
  const reordered = orderedIds.map(id => idToEntry.get(id)).filter(Boolean);
  categoryDef.forEach(m => { if (!seen.has(m.id)) reordered.push(m); });
  categoryDef.length = 0;
  reordered.forEach(m => categoryDef.push(m));
  saveCategoryDef();
}

function renderLargeEditorList() {
  const container = document.getElementById('large-editor-list');
  container.innerHTML = '';
  (largeDef || []).forEach((ld, lIdx) => {
    const isLargeOpen = _largeCardOpenSet.has(ld.large);

    const wrap = document.createElement('div');
    wrap.className = 'large-card';
    wrap.dataset.lidx = lIdx;
    wrap.style.cssText = 'background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden;';

    // 大カテゴリヘッダー
    const header = document.createElement('div');
    header.style.cssText = 'display:flex;align-items:center;gap:8px;padding:10px 12px;' + (isLargeOpen ? 'border-bottom:1px solid var(--border);' : '') + 'background:var(--surface2);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;';

    const largeHandle = document.createElement('span');
    largeHandle.className = 'large-drag-handle';
    largeHandle.style.cssText = 'color:var(--text-dim);font-size:14px;cursor:grab;flex-shrink:0;padding:0 2px;touch-action:none;';
    largeHandle.textContent = '⠿';
    largeHandle.title = 'ドラッグで並び替え';

    const largeChevron = document.createElement('span');
    largeChevron.style.cssText = `font-size:11px;color:var(--text-dim);transition:transform 0.2s;transform:${isLargeOpen ? 'rotate(90deg)' : 'rotate(0deg)'};flex-shrink:0;`;
    largeChevron.textContent = '▶';

    const largeName = document.createElement('span');
    largeName.style.cssText = 'flex:1;font-size:14px;font-weight:700;';
    largeName.textContent = ld.large;

    const midCountSpan = document.createElement('span');
    midCountSpan.style.cssText = 'font-size:11px;color:var(--text-dim);flex-shrink:0;';
    midCountSpan.textContent = `中${(ld.middles||[]).length}件`;

    const editLargeBtn = document.createElement('button');
    editLargeBtn.onclick = (e) => { e.stopPropagation(); openEditLargeModal(lIdx); };
    editLargeBtn.style.cssText = 'background:none;border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-size:13px;padding:4px 8px;border-radius:6px;flex-shrink:0;';
    editLargeBtn.textContent = '✏️';

    const delLargeBtn = document.createElement('button');
    delLargeBtn.onclick = (e) => { e.stopPropagation(); deleteLargeCategory(lIdx); };
    delLargeBtn.style.cssText = 'background:none;border:1px solid var(--danger);color:var(--danger);cursor:pointer;font-size:13px;padding:4px 8px;border-radius:6px;flex-shrink:0;';
    delLargeBtn.textContent = '🗑';

    // ヘッダークリックで大カテゴリ開閉（ドラッグハンドル・ボタン以外）
    header.addEventListener('click', (e) => {
      if (e.target.closest('.large-drag-handle') || e.target.closest('button')) return;
      if (_largeCardOpenSet.has(ld.large)) _largeCardOpenSet.delete(ld.large);
      else _largeCardOpenSet.add(ld.large);
      renderLargeEditorList();
    });

    header.appendChild(largeHandle);
    header.appendChild(largeChevron);
    header.appendChild(largeName);
    header.appendChild(midCountSpan);
    header.appendChild(editLargeBtn);
    header.appendChild(delLargeBtn);
    wrap.appendChild(header);

    // 中カテゴリ一覧（大カテゴリが開いているときのみ表示）
    if (isLargeOpen) {
    const midSection = document.createElement('div');
    midSection.className = 'mid-section';
    midSection.style.cssText = 'padding:8px 12px;display:flex;flex-direction:column;gap:6px;';
    midSection.dataset.lidx = lIdx;

    (ld.middles || []).forEach(midId => {
      const midEntry = (categoryDef || []).find(m => m.id === midId);
      const midName = midEntry ? midEntry.middle : midId;
      const isOpen = _largeEditorOpenSet.has(midId);

      const midCard = document.createElement('div');
      midCard.className = 'mid-card';
      midCard.dataset.midid = midId;
      midCard.style.cssText = 'border:1px solid var(--border);border-radius:8px;overflow:hidden;';

      const midHeader = document.createElement('div');
      midHeader.style.cssText = 'display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface2);user-select:none;-webkit-tap-highlight-color:transparent;';

      const midHandle = document.createElement('span');
      midHandle.className = 'mid-drag-handle';
      midHandle.style.cssText = 'color:var(--text-dim);font-size:13px;cursor:grab;flex-shrink:0;padding:0 2px;touch-action:none;';
      midHandle.textContent = '⠿';
      midHandle.title = 'ドラッグで並び替え';

      const chevron = document.createElement('span');
      chevron.style.cssText = `font-size:11px;color:var(--text-dim);transition:transform 0.2s;transform:${isOpen ? 'rotate(90deg)' : 'rotate(0deg)'};flex-shrink:0;cursor:pointer;`;
      chevron.textContent = '▶';

      const midNameSpan = document.createElement('span');
      midNameSpan.style.cssText = 'flex:1;font-size:13px;font-weight:700;cursor:pointer;';
      midNameSpan.textContent = midName;

      const smallCountSpan = document.createElement('span');
      smallCountSpan.style.cssText = 'font-size:11px;color:var(--text-dim);flex-shrink:0;';
      smallCountSpan.textContent = midEntry ? `小${midEntry.small.length}件` : '';

      const moveBtn = document.createElement('button');
      moveBtn.textContent = '↔';
      moveBtn.title = '大カテゴリ割り当て変更';
      moveBtn.style.cssText = 'background:none;border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-size:12px;padding:3px 7px;border-radius:6px;flex-shrink:0;';
      moveBtn.onclick = (e) => { e.stopPropagation(); openMoveMiddleModal(midId, lIdx); };

      const editMidBtn = document.createElement('button');
      editMidBtn.textContent = '✏️';
      editMidBtn.title = '名前を変更';
      editMidBtn.style.cssText = 'background:none;border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-size:12px;padding:3px 7px;border-radius:6px;flex-shrink:0;';
      const mIdxForEdit = categoryDef.findIndex(m => m.id === midId);
      editMidBtn.onclick = (e) => { e.stopPropagation(); openEditMiddleModal(mIdxForEdit); };

      const delMidBtn = document.createElement('button');
      delMidBtn.textContent = '🗑';
      delMidBtn.title = '削除';
      delMidBtn.style.cssText = 'background:none;border:1px solid var(--danger);color:var(--danger);cursor:pointer;font-size:12px;padding:3px 7px;border-radius:6px;flex-shrink:0;';
      delMidBtn.onclick = (e) => { e.stopPropagation(); deleteMiddleFromLarge(midId, lIdx); };

      // クリックで展開/折りたたみ（ハンドル以外）
      const toggleExpand = () => {
        if (_largeEditorOpenSet.has(midId)) _largeEditorOpenSet.delete(midId);
        else _largeEditorOpenSet.add(midId);
        renderLargeEditorList();
      };
      chevron.addEventListener('click', toggleExpand);
      midNameSpan.addEventListener('click', toggleExpand);
      smallCountSpan.addEventListener('click', toggleExpand);

      midHeader.appendChild(midHandle);
      midHeader.appendChild(chevron);
      midHeader.appendChild(midNameSpan);
      midHeader.appendChild(smallCountSpan);
      midHeader.appendChild(moveBtn);
      midHeader.appendChild(editMidBtn);
      midHeader.appendChild(delMidBtn);
      midCard.appendChild(midHeader);

      // 小カテゴリ一覧（展開時のみ）
      if (isOpen && midEntry) {
        const smallSection = document.createElement('div');
        smallSection.style.cssText = 'border-top:1px solid var(--border);';
        const smallList = document.createElement('div');
        smallList.style.cssText = 'padding:8px 10px;display:flex;flex-wrap:wrap;gap:6px;';
        const mIdx = categoryDef.findIndex(m => m.id === midId);
        midEntry.small.forEach((sm, sIdx) => smallList.appendChild(createSmallTag(sm, mIdx, sIdx)));
        const addSmBtn = document.createElement('button');
        addSmBtn.className = 'small-add-btn';
        addSmBtn.style.cssText = 'background:none;border:1px dashed var(--border);border-radius:20px;padding:4px 12px;font-size:12px;color:var(--text-dim);cursor:pointer;';
        addSmBtn.textContent = '＋ 小カテゴリ追加';
        addSmBtn.onclick = () => openAddSmallModal(mIdx);
        smallList.appendChild(addSmBtn);
        if (mIdx !== -1) initSmallDragDrop(smallList, mIdx);
        smallSection.appendChild(smallList);
        midCard.appendChild(smallSection);
      }

      midSection.appendChild(midCard);
    });

    if ((ld.middles || []).length === 0) {
      const empty = document.createElement('span');
      empty.style.cssText = 'font-size:12px;color:var(--text-dim);padding:4px 0;';
      empty.textContent = '中カテゴリなし';
      midSection.appendChild(empty);
    }

    const addMidBtn = document.createElement('button');
    addMidBtn.textContent = '＋ 中カテゴリ追加';
    addMidBtn.style.cssText = 'width:100%;background:none;border:1px dashed var(--border);border-radius:8px;padding:8px;font-size:12px;color:var(--text-dim);cursor:pointer;font-family:inherit;margin-top:2px;';
    addMidBtn.addEventListener('mouseenter', () => { addMidBtn.style.borderColor = 'var(--accent)'; addMidBtn.style.color = 'var(--accent)'; });
    addMidBtn.addEventListener('mouseleave', () => { addMidBtn.style.borderColor = 'var(--border)'; addMidBtn.style.color = 'var(--text-dim)'; });
    addMidBtn.onclick = () => openAddMiddleFromLargeModal(lIdx);
    midSection.appendChild(addMidBtn);

    wrap.appendChild(midSection);
    } // end if(isLargeOpen)
    container.appendChild(wrap);
  });

  // ドラッグ初期化
  initLargeDragDrop(container);
  container.querySelectorAll('.mid-section').forEach((sec) => {
    initMidCardDragDrop(sec, parseInt(sec.dataset.lidx));
  });
}

// 大カテゴリ追加モーダル
function openAddLargeModal() {
  largeEditIndex = null;
  document.getElementById('add-large-title').textContent = '＋ 大カテゴリ追加';
  document.getElementById('add-large-input').value = '';
  document.getElementById('add-large-modal').classList.add('open');
  setTimeout(() => document.getElementById('add-large-input').focus(), 50);
  _pushNavState('add-large-modal');
}

function openEditLargeModal(lIdx) {
  largeEditIndex = lIdx;
  document.getElementById('add-large-title').textContent = '✏️ 大カテゴリ編集';
  document.getElementById('add-large-input').value = largeDef[lIdx].large;
  document.getElementById('add-large-modal').classList.add('open');
  setTimeout(() => document.getElementById('add-large-input').focus(), 50);
  _pushNavState('add-large-modal');
}

function saveLargeCategory() {
  const name = document.getElementById('add-large-input').value.trim();
  if (!name) { alert('カテゴリ名を入力してください'); return; }
  if (largeEditIndex === null) {
    if (largeDef.some(l => l.large === name)) { alert('同じ名前の大カテゴリが既に存在します'); return; }
    largeDef.push({ large: name, middles: [] });
  } else {
    if (name !== largeDef[largeEditIndex].large && largeDef.some(l => l.large === name)) { alert('同じ名前の大カテゴリが既に存在します'); return; }
    largeDef[largeEditIndex].large = name;
  }
  saveLargeDef();
  renderLargeEditorList();
  closeModal('add-large-modal');
}

function createMidTag(midId, lIdx) {
  const midName = midIdToName(midId) || midId;
  const tag = document.createElement('div');
  tag.className = 'mid-tag';
  tag.dataset.midid = midId;
  tag.style.cssText = 'display:inline-flex;align-items:center;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:4px 10px;font-size:12px;user-select:none;touch-action:none;cursor:grab;';
  tag.title = 'ドラッグで並び替え／タップで大カテゴリ割り当て変更';
  tag.innerHTML = `
    <span class="drag-handle" style="color:var(--text-dim);font-size:11px;margin-right:2px;cursor:grab;">⠿</span>
    <span>${escHtml(midName)}</span>
  `;
  tag.addEventListener('click', () => {
    if (tag._wasDragged) { tag._wasDragged = false; return; }
    openMoveMiddleModal(midId, lIdx);
  });
  tag.addEventListener('mouseenter', () => { tag.style.borderColor = 'var(--accent)'; });
  tag.addEventListener('mouseleave', () => { tag.style.borderColor = 'var(--border)'; });
  return tag;
}

// ===== 中カテゴリ ドラッグ＆ドロップ（大中エディタ用、PC mouse + スマホ touch 対応） =====
// ===== 大カテゴリ 縦並びドラッグ＆ドロップ =====
function initLargeDragDrop(container) {
  let dragging = null, ghost = null, offsetX = 0, offsetY = 0, lastTarget = null, didMove = false;

  function getCards() { return [...container.querySelectorAll('.large-card')]; }

  function getCardUnder(cx, cy) {
    return getCards().filter(c => c !== dragging).find(c => {
      const r = c.getBoundingClientRect();
      return cx >= r.left && cx <= r.right && cy >= r.top && cy <= r.bottom;
    }) || null;
  }

  function startDrag(card, cx, cy) {
    dragging = card;
    didMove = false;
    const rect = card.getBoundingClientRect();
    offsetX = cx - rect.left; offsetY = cy - rect.top;
    ghost = card.cloneNode(true);
    ghost.style.cssText += ';position:fixed;pointer-events:none;opacity:0.7;z-index:9999;box-shadow:0 4px 20px rgba(0,0,0,0.5);transition:none;width:' + rect.width + 'px;';
    document.body.appendChild(ghost);
    moveGhost(cx, cy);
    card.style.opacity = '0.35';
    card.style.outline = '2px dashed var(--accent)';
  }

  function moveGhost(cx, cy) {
    ghost.style.left = (cx - offsetX) + 'px';
    ghost.style.top  = (cy - offsetY) + 'px';
  }

  function updateIndicator(target) {
    if (lastTarget && lastTarget !== target) {
      lastTarget.style.borderTop = ''; lastTarget.style.borderBottom = '';
    }
    lastTarget = target;
    if (!target) return;
    const r = target.getBoundingClientRect();
    const ghostCy = parseFloat(ghost.style.top) + ghost.offsetHeight / 2;
    if (ghostCy < r.top + r.height / 2) {
      target.style.borderTop = '3px solid var(--accent)'; target.style.borderBottom = '';
    } else {
      target.style.borderBottom = '3px solid var(--accent)'; target.style.borderTop = '';
    }
  }

  function drop(cx, cy) {
    if (ghost) { ghost.remove(); ghost = null; }
    if (lastTarget) { lastTarget.style.borderTop = ''; lastTarget.style.borderBottom = ''; lastTarget = null; }
    if (dragging) { dragging.style.opacity = ''; dragging.style.outline = ''; }
    const target = getCardUnder(cx, cy);
    if (didMove && target && target !== dragging) {
      const cards = getCards();
      const fromIdx = cards.indexOf(dragging);
      const toIdx   = cards.indexOf(target);
      const r = target.getBoundingClientRect();
      const ghostCy = cy - offsetY + offsetY; // = cy
      const insertBefore = cy < r.top + r.height / 2;
      const [moved] = largeDef.splice(fromIdx, 1);
      const newTo = insertBefore ? toIdx - (fromIdx < toIdx ? 1 : 0) : toIdx - (fromIdx < toIdx ? 1 : 0) + 1;
      largeDef.splice(Math.max(0, newTo), 0, moved);
      saveLargeDef();
      renderLargeEditorList();
    }
    dragging = null;
  }

  function onMouseMove(e) {
    if (!dragging) return;
    didMove = true;
    moveGhost(e.clientX, e.clientY);
    updateIndicator(getCardUnder(e.clientX, e.clientY));
  }
  function onMouseUp(e) { if (!dragging) return; drop(e.clientX, e.clientY); }

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);

  container.addEventListener('mousedown', e => {
    const handle = e.target.closest('.large-drag-handle');
    if (!handle) return;
    const card = handle.closest('.large-card');
    if (!card) return;
    startDrag(card, e.clientX, e.clientY);
    e.preventDefault();
  });

  container.addEventListener('touchstart', e => {
    const handle = e.target.closest('.large-drag-handle');
    if (!handle) return;
    const card = handle.closest('.large-card');
    if (!card) return;
    const t = e.touches[0];
    startDrag(card, t.clientX, t.clientY);
    e.preventDefault();
  }, { passive: false });

  // touchmove: ドラッグ中のみ document レベルでスクロールを止める
  function onTouchMoveLarge(e) {
    if (!dragging) return;
    didMove = true;
    const t = e.touches[0];
    moveGhost(t.clientX, t.clientY);
    updateIndicator(getCardUnder(t.clientX, t.clientY));
    e.preventDefault();
  }
  document.addEventListener('touchmove', onTouchMoveLarge, { passive: false });

  container.addEventListener('touchend', e => {
    if (!dragging) return;
    const t = e.changedTouches[0];
    drop(t.clientX, t.clientY);
  });
}

// ===== 中カテゴリ 縦並びドラッグ＆ドロップ（大カテゴリ内） =====
function initMidCardDragDrop(midSection, lIdx) {
  let dragging = null, ghost = null, offsetX = 0, offsetY = 0, lastTarget = null, didMove = false;

  function getCards() { return [...midSection.querySelectorAll('.mid-card')]; }

  function getCardUnder(cx, cy) {
    return getCards().filter(c => c !== dragging).find(c => {
      const r = c.getBoundingClientRect();
      return cx >= r.left && cx <= r.right && cy >= r.top && cy <= r.bottom;
    }) || null;
  }

  function startDrag(card, cx, cy) {
    dragging = card;
    didMove = false;
    const rect = card.getBoundingClientRect();
    offsetX = cx - rect.left; offsetY = cy - rect.top;
    ghost = card.cloneNode(true);
    ghost.style.cssText += ';position:fixed;pointer-events:none;opacity:0.7;z-index:9999;box-shadow:0 4px 16px rgba(0,0,0,0.5);transition:none;width:' + rect.width + 'px;';
    document.body.appendChild(ghost);
    moveGhost(cx, cy);
    card.style.opacity = '0.35';
    card.style.outline = '2px dashed var(--accent)';
  }

  function moveGhost(cx, cy) {
    ghost.style.left = (cx - offsetX) + 'px';
    ghost.style.top  = (cy - offsetY) + 'px';
  }

  function updateIndicator(target) {
    if (lastTarget && lastTarget !== target) {
      lastTarget.style.borderTop = ''; lastTarget.style.borderBottom = '';
    }
    lastTarget = target;
    if (!target) return;
    const r = target.getBoundingClientRect();
    const ghostCy = parseFloat(ghost.style.top) + ghost.offsetHeight / 2;
    if (ghostCy < r.top + r.height / 2) {
      target.style.borderTop = '3px solid var(--accent)'; target.style.borderBottom = '';
    } else {
      target.style.borderBottom = '3px solid var(--accent)'; target.style.borderTop = '';
    }
  }

  function drop(cx, cy) {
    if (ghost) { ghost.remove(); ghost = null; }
    if (lastTarget) { lastTarget.style.borderTop = ''; lastTarget.style.borderBottom = ''; lastTarget = null; }
    if (dragging) { dragging.style.opacity = ''; dragging.style.outline = ''; }
    const target = getCardUnder(cx, cy);
    if (didMove && target && target !== dragging) {
      const cards = getCards();
      const fromIdx = cards.indexOf(dragging);
      const toIdx   = cards.indexOf(target);
      const r = target.getBoundingClientRect();
      const insertBefore = cy < r.top + r.height / 2;
      const arr = largeDef[lIdx].middles;
      const [moved] = arr.splice(fromIdx, 1);
      const newTo = insertBefore ? toIdx - (fromIdx < toIdx ? 1 : 0) : toIdx - (fromIdx < toIdx ? 1 : 0) + 1;
      arr.splice(Math.max(0, newTo), 0, moved);
      saveLargeDef();
      renderLargeEditorList();
    }
    dragging = null;
  }

  function onMouseMove(e) {
    if (!dragging) return;
    didMove = true;
    moveGhost(e.clientX, e.clientY);
    updateIndicator(getCardUnder(e.clientX, e.clientY));
  }
  function onMouseUp(e) { if (!dragging) return; drop(e.clientX, e.clientY); }

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);

  midSection.addEventListener('mousedown', e => {
    const handle = e.target.closest('.mid-drag-handle');
    if (!handle) return;
    const card = handle.closest('.mid-card');
    if (!card) return;
    startDrag(card, e.clientX, e.clientY);
    e.preventDefault();
  });

  midSection.addEventListener('touchstart', e => {
    const handle = e.target.closest('.mid-drag-handle');
    if (!handle) return;
    const card = handle.closest('.mid-card');
    if (!card) return;
    const t = e.touches[0];
    startDrag(card, t.clientX, t.clientY);
    e.preventDefault();
  }, { passive: false });

  // touchmove: ドラッグ中のみ document レベルでスクロールを止める
  function onTouchMoveMid(e) {
    if (!dragging) return;
    didMove = true;
    const t = e.touches[0];
    moveGhost(t.clientX, t.clientY);
    updateIndicator(getCardUnder(t.clientX, t.clientY));
    e.preventDefault();
  }
  document.addEventListener('touchmove', onTouchMoveMid, { passive: false });

  midSection.addEventListener('touchend', e => {
    if (!dragging) return;
    const t = e.changedTouches[0];
    drop(t.clientX, t.clientY);
  });
}

// 旧・横並びタグ用（未使用になったが互換のため残す）
function initMidDragDrop(listEl, lIdx) { /* 縦並びカード方式に移行済み */ }

function deleteLargeCategory(lIdx) {
  const ld = largeDef[lIdx];
  if (ld.middles.length > 0) {
    if (!confirm(`「${ld.large}」を削除しますか？
割り当て中の中カテゴリ（${ld.middles.length}件）は「未分類」に移動します。`)) return;
    // 未分類に移動
    let unclassified = largeDef.find((l, i) => l.large === '未分類' && i !== lIdx);
    if (!unclassified) {
      unclassified = { large: '未分類', middles: [] };
      largeDef.push(unclassified);
    }
    unclassified.middles.push(...ld.middles);
  } else {
    if (!confirm(`「${ld.large}」を削除しますか？`)) return;
  }
  largeDef.splice(lIdx, 1);
  saveLargeDef();
  renderLargeEditorList();
}

// 中カテゴリ追加（大中エディタから）
function openAddMiddleFromLargeModal(defaultLargeIdx) {
  document.getElementById('add-middle-to-large-input').value = '';
  // 大カテゴリ選択肢を生成
  const sel = document.getElementById('add-middle-to-large-select');
  sel.innerHTML = (largeDef || []).map((l, i) => `<option value="${i}">${escHtml(l.large)}</option>`).join('');
  // 呼び出し元の大カテゴリを初期選択
  if (defaultLargeIdx !== undefined) sel.value = defaultLargeIdx;
  document.getElementById('add-middle-to-large-modal').classList.add('open');
  setTimeout(() => document.getElementById('add-middle-to-large-input').focus(), 50);
  _pushNavState('add-middle-to-large-modal');
}

function saveMiddleToLarge() {
  const name = document.getElementById('add-middle-to-large-input').value.trim();
  if (!name) { alert('中カテゴリ名を入力してください'); return; }
  if (categoryDef.some(m => m.middle === name)) { alert('同じ名前の中カテゴリが既に存在します'); return; }
  const lIdx = parseInt(document.getElementById('add-middle-to-large-select').value);
  // categoryDef に追加（idを付与）
  const newMid = { id: _genMiddleId(), middle: name, small: [] };
  categoryDef.push(newMid);
  saveCategoryDef();
  // largeDef の指定大カテゴリにidで追加
  largeDef[lIdx].middles.push(newMid.id);
  saveLargeDef();
  renderLargeEditorList();
  syncRenderCatEditor(); // 中小エディタが開いていれば同期
  closeModal('add-middle-to-large-modal');
}

// 中カテゴリの大カテゴリ割り当て変更（複数選択対応）
function openMoveMiddleModal(midId, fromLargeIdx) {
  moveMiddleName = midId;
  moveMiddleFromLargeIdx = fromLargeIdx;
  const midName = midIdToName(midId) || midId;
  document.getElementById('move-middle-name-label').textContent = `中カテゴリ：${midName}`;

  // 現在この中カテゴリが所属している大カテゴリのindexセット
  const currentLargeIdxs = new Set(
    (largeDef || []).reduce((acc, l, i) => {
      if (l.middles.includes(midId)) acc.push(i);
      return acc;
    }, [])
  );

  const container = document.getElementById('move-middle-checks');
  container.innerHTML = '';
  (largeDef || []).forEach((l, i) => {
    const label = document.createElement('label');
    label.style.cssText = 'display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--border);cursor:pointer;font-size:14px;';
    const cb = document.createElement('input');
    cb.type = 'checkbox';
    cb.value = i;
    cb.checked = currentLargeIdxs.has(i);
    cb.style.cssText = 'width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;';
    const span = document.createElement('span');
    span.textContent = l.large;
    label.appendChild(cb);
    label.appendChild(span);
    container.appendChild(label);
  });

  document.getElementById('move-middle-modal').classList.add('open');
  _pushNavState('move-middle-modal');
}

function saveMoveMiddle() {
  const midId = moveMiddleName;
  const checks = document.querySelectorAll('#move-middle-checks input[type=checkbox]');
  const selectedIdxs = new Set([...checks].filter(cb => cb.checked).map(cb => parseInt(cb.value)));

  if (selectedIdxs.size === 0) {
    alert('少なくとも1つの大カテゴリを選択してください');
    return;
  }

  // 全大カテゴリに対して所属を更新
  (largeDef || []).forEach((l, i) => {
    const has = l.middles.includes(midId);
    if (selectedIdxs.has(i) && !has) {
      l.middles.push(midId);
    } else if (!selectedIdxs.has(i) && has) {
      l.middles = l.middles.filter(id => id !== midId);
    }
  });

  saveLargeDef();
  renderLargeEditorList();
  closeModal('move-middle-modal');
}

// 大中エディタから中カテゴリを削除（categoryDefからも削除）
function deleteMiddleFromLarge(midId, lIdx) {
  const midName = midIdToName(midId) || midId;
  if (!confirm(`「${midName}」を削除しますか？\n中小カテゴリ定義からも削除され、小カテゴリもすべて失われます。`)) return;
  // largeDef から削除（id）
  const list = largeDef[lIdx].middles;
  const i = list.indexOf(midId);
  if (i !== -1) list.splice(i, 1);
  saveLargeDef();
  // categoryDef から削除（id）
  const ci = categoryDef.findIndex(m => m.id === midId);
  if (ci !== -1) categoryDef.splice(ci, 1);
  saveCategoryDef();
  renderLargeEditorList();
  syncRenderCatEditor(); // 中小エディタが開いていれば同期
}

function updateCategoryStatus() {
  const el = document.getElementById('category-status');
  if (!el) return;
  if (categoryDef && categoryDef.length > 0) {
    const midCount = categoryDef.length;
    const smallCount = categoryDef.reduce((s, m) => s + (m.small?.length || 0), 0);
    el.textContent = `中カテゴリ ${midCount}件 / 小カテゴリ合計 ${smallCount}件`;
    el.style.color = 'var(--accent)';
  } else {
    el.textContent = 'カテゴリ未設定';
    el.style.color = 'var(--text-dim)';
  }
}

function clearCategoryDef() {
  if (!confirm('カテゴリをデフォルトに戻しますか？')) return;
  categoryDef = JSON.parse(JSON.stringify(DEFAULT_CATEGORY_DEF));
  localStorage.setItem('category_def', JSON.stringify(categoryDef));
  updateCategoryStatus();
}

// カテゴリJSONのバリデーション
function validateCategoryDef(data) {
  if (!Array.isArray(data)) return '配列形式ではありません';
  for (let i = 0; i < data.length; i++) {
    const item = data[i];
    if (typeof item.middle !== 'string') return `[${i}].middle が文字列ではありません`;
    if (!Array.isArray(item.small)) return `[${i}].small が配列ではありません`;
  }
  return null; // OK
}

// 店舗タイプ系カテゴリかどうかを判定するキーワード
const STORE_TYPE_KEYWORDS = [
  'コンビニ', '外食', 'テイクアウト', '飲食', 'レストラン',
  'ファスト', 'デリバリー', '惣菜', '弁当', 'カフェ', '居酒屋'
];

function isStoreTypeCategory(middleName) {
  return STORE_TYPE_KEYWORDS.some(kw => middleName.includes(kw));
}

// カテゴリ定義からプロンプト用文字列を生成
function buildCategoryPrompt() {
  if (!categoryDef || categoryDef.length === 0) return null;

  // largeDef が利用可能な場合は「大カテゴリ > 中カテゴリ：小カテゴリ」の階層形式で出力
  let lines;
  if (largeDef && largeDef.length > 0) {
    const idToMid = new Map(categoryDef.map(m => [m.id, m]));
    const renderedIds = new Set();
    const blocks = [];

    for (const ld of largeDef) {
      const midLines = [];
      for (const midId of (ld.middles || [])) {
        const m = idToMid.get(midId);
        if (!m) continue;
        renderedIds.add(midId);
        const smalls = m.small.map(s => `"${s}"`).join('、');
        midLines.push(`  ・${m.middle}：${smalls}`);
      }
      if (midLines.length > 0) {
        blocks.push(`【${ld.large}】\n${midLines.join('\n')}`);
      }
    }

    // largeDef に含まれていない中カテゴリをフォールバック出力
    const orphans = categoryDef.filter(m => !renderedIds.has(m.id));
    if (orphans.length > 0) {
      const orphanLines = orphans.map(m => {
        const smalls = m.small.map(s => `"${s}"`).join('、');
        return `  ・${m.middle}：${smalls}`;
      });
      blocks.push(`【未分類】\n${orphanLines.join('\n')}`);
    }

    lines = blocks.join('\n');
  } else {
    // largeDef 未設定時のフォールバック（従来形式）
    lines = categoryDef.map(m => {
      const smalls = m.small.map(s => `"${s}"`).join('、');
      return `・${m.middle}：${smalls}`;
    }).join('\n');
  }

  // 店舗タイプ系の中カテゴリを抽出
  const storeTypeCategories = categoryDef
    .map(m => m.middle)
    .filter(isStoreTypeCategory);

  const storeTypeNote = storeTypeCategories.length > 0
    ? `
店舗タイプの判断（最優先）：
- レシートの店名から店舗タイプを判断し、以下の中カテゴリに該当すると判断できる場合は、商品ごとの中カテゴリにかかわらず全商品をそのカテゴリで統一すること
- 対象カテゴリ：${storeTypeCategories.map(c => `「${c}」`).join('、')}
- 例：店名がセブン-イレブン・ローソン・ファミリーマート等なら「コンビニ」、マクドナルド・吉野家・松屋・カフェ等なら「外食・テイクアウト」など
- 店名が上記に明らかに該当する場合のみ適用し、判断が難しい場合は通常の商品別カテゴライズを行うこと`
    : '';

  return `カテゴリ定義（必ずこの定義に従うこと）:
${lines}
${storeTypeNote}

カテゴライズ手順：
1. まず店名から店舗タイプを判断し、店舗タイプ系カテゴリに該当するか確認する
2. 該当する場合は全商品をそのカテゴリで統一し、小カテゴリは商品名から個別に判断する
3. 該当しない場合は大カテゴリ→中カテゴリの順に絞り込みながら商品に合う中カテゴリを判断する
4. 一致した中カテゴリの小カテゴリ一覧から最も近いものを選ぶ
5. どの小カテゴリにも当てはまらない場合は、その中カテゴリの最後の選択肢を使う
6. どの中カテゴリにも当てはまらない場合は middle_category="その他"、small_category="その他" とする
7. middle_category と small_category は必ず上記定義の文字列をそのまま使うこと（独自の文字列を作らない）`;
}

// ===== 動作設定（カスタマイズ） =====
// localStorage に1つのJSONとして保持する。
// 項目を増やすときは PREF_DEFAULTS に追加するだけでよい。
const PREFS_KEY = 'app_prefs';
const PREF_DEFAULTS = {
  autosaveSec: 10,      // 0 = 自動保存しない
  soundMode: 'all',     // 'all' | 'save' | 'off'
  soundVolume: 1,       // 音量倍率
  startTab: 'upload',   // 'upload' | 'history' | 'stats'
  historyView: 'cal',   // 'cal' | 'list'
  cameraMode: 'camera', // 'camera' | 'gallery'
  backupDays: 14,       // 0 = 催促しない
};
let _prefs = null;

function loadPrefs() {
  if (_prefs) return _prefs;
  let stored = {};
  try {
    const raw = localStorage.getItem(PREFS_KEY);
    if (raw) stored = JSON.parse(raw) || {};
  } catch (e) { stored = {}; }
  _prefs = Object.assign({}, PREF_DEFAULTS, stored);
  return _prefs;
}

function getPref(key) {
  const v = loadPrefs()[key];
  return v === undefined ? PREF_DEFAULTS[key] : v;
}

function setPref(key, value) {
  loadPrefs();
  _prefs[key] = value;
  _persistPrefs();
}

// localStorage は「閲覧データの削除」や容量不足で消えるので、
// テーマ・APIキーと同じく IndexedDB にも二重書きしておく。
function _persistPrefs() {
  const json = JSON.stringify(_prefs);
  try { localStorage.setItem(PREFS_KEY, json); } catch (e) {}
  _saveSettingIDB(PREFS_KEY, json);
}

// 数値で持つものは select の文字列を変換してから保存する
const _PREF_NUMERIC = ['autosaveSec', 'soundVolume', 'backupDays'];

function onPrefChange(key, value) {
  setPref(key, _PREF_NUMERIC.includes(key) ? Number(value) : value);
  applyPrefsImmediate();
  // 変更が分かるように音でフィードバックする
  if (key === 'soundMode' || key === 'soundVolume') playCountdownTick(2);
}

function resetPrefs() {
  _prefs = Object.assign({}, PREF_DEFAULTS);
  _persistPrefs();
  renderPrefsUI();
  applyPrefsImmediate();
}

// select の選択状態を現在の設定に合わせる
function renderPrefsUI() {
  const map = {
    'pref-autosave':      'autosaveSec',
    'pref-sound':         'soundMode',
    'pref-volume':        'soundVolume',
    'pref-start-tab':     'startTab',
    'pref-history-view':  'historyView',
    'pref-camera':        'cameraMode',
    'pref-backup-days':   'backupDays',
  };
  Object.keys(map).forEach(id => {
    const el = document.getElementById(id);
    if (el) el.value = String(getPref(map[id]));
  });
}

// 値を変えた瞬間に反映できるものを適用する
function applyPrefsImmediate() {
  updateDataSafetyBanner();          // 催促日数の変更を即反映
  updateUploadLabelByPref();         // タップ／長押しの説明文を差し替え
}

// アップロードゾーンの説明文を設定に合わせる
function updateUploadLabelByPref() {
  const isCam = getPref('cameraMode') !== 'gallery';
  const label = document.querySelector('#upload-zone .upload-label');
  const sub   = document.querySelector('#upload-zone .upload-sublabel');
  if (label) label.textContent = isCam ? 'タップして撮影' : 'タップしてファイルから選択';
  if (sub)   sub.textContent   = isCam
    ? '長押しでファイルから選択／JPG・PNG対応'
    : '長押しで撮影／JPG・PNG対応';
}

// ===== バージョン情報 =====
// APP_BUILD はこのファイルを更新するたびに書き換える。
// サーバー上の最新版をキャッシュ無しで取得し、この値を比べることで
// 「今見ているのが最新版か、キャッシュの古い版か」を判別する。
const APP_BUILD = '2026-09-09 01:50';

// '2026-09-03 22:30' → '2026年9月3日\n22:30更新'
function formatBuildLabel(build) {
  const m = /^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})/.exec(build || '');
  if (!m) return build || '';
  const [, y, mo, d, hh, mi] = m;
  return `${Number(y)}年${Number(mo)}月${Number(d)}日\n${hh}:${mi}更新`;
}

function renderBuildLabel() {
  const el = document.getElementById('build-label');
  if (el) el.textContent = formatBuildLabel(APP_BUILD);
}

function _extractBuild(text) {
  const m = text.match(/APP_BUILD\s*=\s*'([^']+)'/);
  return m ? m[1] : null;
}

// キャッシュを避けて再読み込みする
function reloadLatestVersion() {
  location.replace(location.pathname + '?v=' + Date.now());
}

async function renderVersionInfo() {
  const el = document.getElementById('version-info');
  if (!el) return;

  const rows = [`この画面の版：<b>${APP_BUILD}</b>`];
  const paint = extra => {
    el.innerHTML = rows.concat(extra || []).map(r => `<div style="padding:3px 0;">${r}</div>`).join('');
  };
  paint('<span style="color:var(--text-dim);">サーバーの最新版を確認中...</span>');

  let serverBuild = null, failed = null;
  try {
    const res = await fetch(location.pathname + '?_check=' + Date.now(), { cache: 'no-store' });
    if (!res.ok) throw new Error('HTTP ' + res.status);
    serverBuild = _extractBuild(await res.text());
    if (!serverBuild) throw new Error('版情報が見つかりません');
  } catch (e) {
    failed = e.message;
  }

  if (failed) {
    rows.push(`<span style="color:var(--text-dim);">サーバーの確認に失敗：${escHtml(failed)}</span>`);
    paint();
  } else if (serverBuild === APP_BUILD) {
    rows.push('<span style="color:var(--accent);">✅ 最新版を表示中です</span>');
    paint();
  } else {
    rows.push(`<span style="color:var(--danger);">⚠ 反映待ち（キャッシュの古い版を表示中）</span>`);
    rows.push(`<span style="color:var(--text-dim);">サーバー側の版：<b>${escHtml(serverBuild)}</b></span>`);
    paint();
    el.innerHTML += '<button class="btn btn-secondary" style="margin-top:6px;" onclick="reloadLatestVersion()">🔄 最新版を読み込む</button>';
  }
}

// ===== 設定（APIキー） =====
function openSettings() {
  const key = localStorage.getItem('gemini_api_key') || '';
  document.getElementById('api-key-input').value = key;
  const model = localStorage.getItem('gemini_model') || 'gemini-2.5-flash';
  document.getElementById('gemini-model-select').value = model;
  updateCategoryStatus();
  updateStoreDefStatus();
  updateExportStatus();
  updateDeleteLockStatus();
  renderEnvCheck();
  renderPrefsUI();
  renderVersionInfo();
  _updateThemeBtns();
  document.getElementById('settings-modal').classList.add('open');
}

// ===== テーマ切り替え =====
// システム設定変化を監視して自動テーマを追従させる
var _systemThemeMediaQuery = window.matchMedia('(prefers-color-scheme: light)');
function _applyThemeClass() {
  const theme = localStorage.getItem('app_theme') || 'auto';
  let isLight;
  if (theme === 'light') isLight = true;
  else if (theme === 'dark') isLight = false;
  else isLight = _systemThemeMediaQuery.matches; // auto: システム設定に従う
  document.body.classList.toggle('theme-light', isLight);
}
_systemThemeMediaQuery.addEventListener('change', function() {
  if ((localStorage.getItem('app_theme') || 'auto') === 'auto') _applyThemeClass();
});

function setTheme(theme) {
  localStorage.setItem('app_theme', theme);
  _saveSettingIDB('app_theme', theme);
  _applyThemeClass();
  _updateThemeBtns();
}

function _updateThemeBtns() {
  const theme = localStorage.getItem('app_theme') || 'auto';
  const autoBtn  = document.getElementById('theme-btn-auto');
  const darkBtn  = document.getElementById('theme-btn-dark');
  const lightBtn = document.getElementById('theme-btn-light');
  if (!darkBtn || !lightBtn) return;
  [
    [autoBtn,  theme === 'auto'],
    [darkBtn,  theme === 'dark'],
    [lightBtn, theme === 'light'],
  ].forEach(([btn, active]) => {
    if (!btn) return;
    btn.style.borderWidth = active ? '2px' : '1px';
    btn.style.borderColor = active ? 'var(--accent)' : 'var(--border)';
    btn.style.color       = active ? 'var(--text)'   : 'var(--text-dim)';
    btn.style.fontWeight  = active ? '700' : '400';
  });
}

function _closeSettingsBase() {
  document.getElementById('settings-modal').classList.remove('open');
}
var closeSettings = _closeSettingsBase;

// ===== エクスポート =====
// エクスポート内容とファイル名を組み立てる（ダウンロード／共有で共通利用）
async function buildExportFile() {
  const records = await dbGetAll('receipts');
  const payload = {
    version: 2,
    exported_at: new Date().toISOString(),
    categoryDef: categoryDef || [],
    largeDef: largeDef || [],
    prefs: loadPrefs(),
    records
  };
  const json = JSON.stringify(payload, null, 2);
  const dateStr = (() => {
    const n = new Date(); const pad = x => String(x).padStart(2, '0');
    return `${n.getFullYear()}-${pad(n.getMonth() + 1)}-${pad(n.getDate())}_${n.getHours()}_${pad(n.getMinutes())}`;
  })();
  const userName = getCurrentUser() || 'unknown';
  const filename = `エクスポートデータ_${userName}_${dateStr}.json`;
  return { json, filename, count: records.length };
}

// ===== HTTPS環境向け機能 =====
// Chromeは空き容量が減るとIndexedDBを勝手に削除することがある。
// セキュアコンテキストでは永続化を要求できるので、起動時に一度だけ申請する。
async function requestPersistentStorage() {
  try {
    if (!navigator.storage || !navigator.storage.persist) return null;
    if (await navigator.storage.persisted()) return true;
    return await navigator.storage.persist();
  } catch (e) {
    console.warn('永続ストレージの申請に失敗', e);
    return null;
  }
}

// ===== データ保全（永続化状態＋バックアップ催促） =====
const BACKUP_AT_KEY      = 'last_backup_at';
const BACKUP_COUNT_KEY   = 'last_backup_count';
// 催促までの日数は設定画面から変更できる（0なら催促しない）
function backupDaysLimit() { return Number(getPref('backupDays')) || 0; }
const BACKUP_COUNT_LIMIT = 20; // 前回バックアップからこれ以上増えたら催促
const BANNER_SNOOZE_KEY  = 'data_safety_banner_snoozed_at';
const BANNER_SNOOZE_DAYS = 7;  // 「閉じる」を押してから再表示しない日数

// エクスポート／共有が成功したタイミングで呼ぶ
function markBackupDone(count) {
  try {
    localStorage.setItem(BACKUP_AT_KEY, new Date().toISOString());
    localStorage.setItem(BACKUP_COUNT_KEY, String(count));
  } catch (e) {}
  updateDataSafetyBanner();
}

function getBackupInfo() {
  let at = null, count = null;
  try {
    const raw = localStorage.getItem(BACKUP_AT_KEY);
    if (raw) { const d = new Date(raw); if (!isNaN(d)) at = d; }
    const c = parseInt(localStorage.getItem(BACKUP_COUNT_KEY), 10);
    if (!isNaN(c)) count = c;
  } catch (e) {}
  const days = at ? Math.floor((Date.now() - at.getTime()) / 86400000) : null;
  return { at, count, days };
}

function isDataSafetyBannerSnoozed() {
  try {
    const raw = localStorage.getItem(BANNER_SNOOZE_KEY);
    if (!raw) return false;
    const t = new Date(raw).getTime();
    if (isNaN(t)) return false;
    const elapsed = Date.now() - t;
    // 端末の時計が巻き戻った場合は記録を捨てて表示に戻す
    if (elapsed < 0) { localStorage.removeItem(BANNER_SNOOZE_KEY); return false; }
    return elapsed < BANNER_SNOOZE_DAYS * 86400000;
  } catch (e) { return false; }
}

function snoozeDataSafetyBanner() {
  try { localStorage.setItem(BANNER_SNOOZE_KEY, new Date().toISOString()); } catch (e) {}
  const el = document.getElementById('data-safety-banner');
  if (el) el.style.display = 'none';
  renderEnvCheck();
}

// 非表示期間を手動で解除する（設定画面から）
function resetDataSafetyBannerSnooze() {
  try { localStorage.removeItem(BANNER_SNOOZE_KEY); } catch (e) {}
  renderEnvCheck();
  updateDataSafetyBanner();
}

// 「永続化されているか」と「バックアップが古くないか」を確認してバナーを出す
async function updateDataSafetyBanner() {
  const el = document.getElementById('data-safety-banner');
  if (!el) return;
  if (isDataSafetyBannerSnoozed()) { el.style.display = 'none'; return; }

  let persisted = null;
  try {
    if (navigator.storage && navigator.storage.persisted) persisted = await navigator.storage.persisted();
  } catch (e) {}

  let total = null;
  try { total = (await dbGetAll('receipts')).length; } catch (e) {}

  const { at, count, days } = getBackupInfo();
  const unsaved = (total !== null && count !== null) ? Math.max(0, total - count) : null;
  const limit = backupDaysLimit();
  const backupStale = (limit > 0) && (total !== null && total > 0) && (
    at === null || days >= limit || (unsaved !== null && unsaved >= BACKUP_COUNT_LIMIT)
  );

  const msgs = [];
  if (persisted !== true) {
    msgs.push('<b>⚠ データが自動削除される可能性があります</b><br>'
      + 'ブラウザの永続化が未許可です（空き容量が減ると保存データがまとめて削除されることがあります）。'
      + 'このサイトをホーム画面に追加する／ブックマークして何度か開くと許可されやすくなります。');
  }
  if (backupStale) {
    const detail = at === null
      ? 'まだ一度もバックアップしていません。'
      : `前回のバックアップから${days}日${(unsaved !== null && unsaved > 0) ? `、未保存 ${unsaved} 件` : ''}です。`;
    msgs.push('<b>📤 バックアップをおすすめします</b><br>' + detail
      + ' ユーザー設定の「エクスポート」からJSONを保存してください。');
  }

  if (msgs.length === 0) { el.style.display = 'none'; return; }

  el.innerHTML = msgs.map(m => `<div style="margin-bottom:6px;">${m}</div>`).join('')
    + '<div style="display:flex; gap:8px; margin-top:8px;">'
    + '<button onclick="openUserModalWithHistory()" style="flex:1;padding:6px;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:var(--btn-on-accent,#111);font-size:12px;font-family:inherit;font-weight:700;cursor:pointer;">ユーザー設定を開く</button>'
    + `<button onclick="snoozeDataSafetyBanner()" style="flex:1;padding:6px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);font-size:12px;font-family:inherit;cursor:pointer;">閉じる（${BANNER_SNOOZE_DAYS}日間）</button>`
    + '</div>';
  el.style.display = 'block';
}

// 設定画面に出す環境チェック。HTTPS移行がうまくいったか一目で分かるようにする。
async function renderEnvCheck() {
  const el = document.getElementById('env-check');
  if (!el) return;
  const rows = [];
  const mark = ok => ok ? '<span style="color:var(--accent);">✅</span>' : '<span style="color:var(--danger);">❌</span>';

  const isHttps = location.protocol === 'https:'
    || (location.protocol === 'http:' && /^(localhost|127\.0\.0\.1|\[::1\])$/.test(location.hostname));
  rows.push(`${mark(isHttps)} HTTPS配信（現在：${location.protocol}//${location.hostname || '（なし）'}）`);
  rows.push(`${mark(canUseWebAuthn())} 生体認証（WebAuthn）`);
  rows.push(`${mark(canShareFiles())} ファイル共有（Web Share）`);
  rows.push(`${mark(!!(window.crypto && window.crypto.subtle))} 強度の高いパスワードハッシュ（PBKDF2）`);

  let persisted = null;
  try {
    if (navigator.storage && navigator.storage.persisted) persisted = await navigator.storage.persisted();
  } catch (e) {}
  rows.push(`${mark(persisted === true)} データの永続化（自動削除の防止）`);

  try {
    if (navigator.storage && navigator.storage.estimate) {
      const est = await navigator.storage.estimate();
      const mb = x => (x / 1024 / 1024).toFixed(1);
      rows.push(`<span style="color:var(--text-dim);">使用量：${mb(est.usage || 0)}MB / ${mb(est.quota || 0)}MB</span>`);
    }
  } catch (e) {}

  const { at, days } = getBackupInfo();
  if (at) {
    const limit = backupDaysLimit();
    rows.push(`${mark(limit === 0 || days < limit)} 最終バックアップ：${at.getFullYear()}/${at.getMonth()+1}/${at.getDate()}（${days}日前）`);
  } else {
    rows.push(`${mark(false)} 最終バックアップ：まだ実施していません`);
  }

  if (isDataSafetyBannerSnoozed()) {
    rows.push('<span style="color:var(--text-dim);">警告バナーは非表示中（閉じるを押してから'
      + `${BANNER_SNOOZE_DAYS}日間）`
      + ' <a href="#" onclick="resetDataSafetyBannerSnooze(); return false;" style="color:var(--accent);">今すぐ再表示</a></span>');
  }

  el.innerHTML = rows.map(r => `<div style="padding:3px 0;">${r}</div>`).join('');
}

async function exportData() {
  try {
    const { json, filename, count } = await buildExportFile();
    const blob = new Blob([json], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    a.click();
    URL.revokeObjectURL(url);
    markBackupDone(count);
    setExportStatus(`✅ ${count}件をエクスポートしました`, 'var(--accent)');
  } catch(e) {
    setExportStatus(`❌ エクスポート失敗：${e.message}`, 'var(--danger)');
  }
}

// ダウンロードフォルダを経由せず、共有シートで直接アプリへ送る。
// HTTPS(セキュアコンテキスト)かつユーザー操作起点でのみ動作する。
function canShareFiles() {
  try {
    if (!navigator.canShare || !navigator.share) return false;
    const probe = new File(['{}'], 'probe.json', { type: 'application/json' });
    return navigator.canShare({ files: [probe] });
  } catch (e) { return false; }
}

// 共有用ファイルを事前に用意しておく。
// navigator.share() は「タップ直後の一時的なユーザー操作権限」がある間しか呼べず、
// クリック後にDB読み込みを await すると権限が失効して Permission denied になる。
// そのためモーダルを開いた時点でファイルを作っておき、タップ時は共有だけ行う。
let _shareFileCache = null;

async function prepareShareFile() {
  if (!canShareFiles()) { _shareFileCache = null; return; }
  try {
    const { json, filename, count } = await buildExportFile();
    _shareFileCache = {
      file: new File([json], filename, { type: 'application/json' }),
      count
    };
  } catch (e) {
    console.warn('共有ファイルの準備に失敗', e);
    _shareFileCache = null;
  }
}

// awaitを挟まず同期的に navigator.share() を呼ぶ（asyncにしないこと）
function shareExportData() {
  if (!canShareFiles()) {
    setExportStatus('❌ この環境では共有が使えません（HTTPS配信が必要です）', 'var(--danger)');
    return;
  }
  if (!_shareFileCache) {
    setExportStatus('⏳ 準備中です。もう一度タップしてください', 'var(--text-dim)');
    prepareShareFile();
    return;
  }
  const { file, count } = _shareFileCache;
  navigator.share({ files: [file], title: '家計簿データ', text: `${count}件の記録` })
    .then(() => {
      markBackupDone(count);
      setExportStatus(`✅ ${count}件を共有しました`, 'var(--accent)');
      prepareShareFile(); // 次回用に作り直す
    })
    .catch(e => {
      if (e && e.name === 'AbortError') return; // ユーザーがキャンセルしただけ
      setExportStatus(`❌ 共有失敗：${e.message}（📤エクスポートをお使いください）`, 'var(--danger)');
    });
}

// ===== インポート =====
// 転送中に混入したBOMや制御文字で JSON.parse が失敗することがあるため、
// そのまま読めないときだけ除去して再試行する。
function parseImportJson(text) {
  try {
    return JSON.parse(text);
  } catch (e) {
    const cleaned = text
      .replace(/^\uFEFF/, '')                                  // BOM
      .replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F]/g, '') // 制御文字（改行・タブは残す）
      .replace(/[\u200B-\u200D\u2060]/g, '')                   // ゼロ幅スペース
      .trim();
    const parsed = JSON.parse(cleaned); // ここでも失敗すれば呼び出し元に例外を返す
    console.warn('インポートJSONに不正な文字が含まれていたため除去して読み込みました');
    return parsed;
  }
}

async function importData(file) {
  setExportStatus('⏳ 読み込み中...', 'var(--text-dim)');
  try {
    const text = await file.text();
    const payload = parseImportJson(text);

    // 形式チェック
    if (!payload.records || !Array.isArray(payload.records)) {
      throw new Error('recordsフィールドが見つかりません');
    }
    const incoming = payload.records;
    const total = incoming.length;

    // version 2以降: categoryDef と largeDef もインポートしてIDを同期
    // これにより middle_category_id が正しく大カテゴリに紐づく
    if (payload.version >= 2 && Array.isArray(payload.categoryDef) && payload.categoryDef.length > 0) {
      // categoryDef をそのまま上書き（IDを保持）
      categoryDef = payload.categoryDef.map(m => ({ id: m.id || _genMiddleId(), ...m }));
      localStorage.setItem('category_def', JSON.stringify(categoryDef));
    } else if (!payload.version || payload.version < 2) {
      // version 1（旧形式）: middle_category 名からIDを再マッピング
      // incoming レコード内の middle_category_id を現在の categoryDef のIDに書き換える
      const nameToId = {};
      (categoryDef || []).forEach(m => { nameToId[m.middle] = m.id; });
      incoming.forEach(r => {
        (r.items || []).forEach(item => {
          if (item.middle_category && !item.middle_category_id) {
            item.middle_category_id = nameToId[item.middle_category] || null;
          } else if (item.middle_category && item.middle_category_id) {
            // IDが現在のcategoryDefに存在しない場合は名前で再解決
            const exists = (categoryDef || []).some(m => m.id === item.middle_category_id);
            if (!exists) {
              item.middle_category_id = nameToId[item.middle_category] || null;
            }
          }
        });
      });
    }

    // 動作設定（自動保存秒数・効果音など）も引き継ぐ。
    // 知らないキーは無視し、既定値で埋めることで古いファイルでも壊れないようにする。
    if (payload.prefs && typeof payload.prefs === 'object') {
      const picked = {};
      Object.keys(PREF_DEFAULTS).forEach(k => {
        if (payload.prefs[k] !== undefined) picked[k] = payload.prefs[k];
      });
      _prefs = Object.assign({}, PREF_DEFAULTS, picked);
      _persistPrefs();
      renderPrefsUI();
      applyPrefsImmediate();
    }

    if (payload.version >= 2 && Array.isArray(payload.largeDef) && payload.largeDef.length > 0) {
      // largeDef もそのまま上書き（IDベースのmiddles配列を保持）
      largeDef = payload.largeDef;
      _syncLargeDefFromCategoryDef(); // 存在チェック＆補完
      saveLargeDef();
    }

    // 現在のユーザーのDBを確実に開く
    const idb = await ensureDB();

    // 既存データを全削除（上書きモード）
    await new Promise((resolve, reject) => {
      const tx = idb.transaction('receipts', 'readwrite');
      const req = tx.objectStore('receipts').clear();
      req.onsuccess = () => resolve();
      req.onerror = () => reject(req.error);
    });

    let added = 0;
    for (const r of incoming) {
      // idを除いて新規追加（IndexedDB が autoIncrement で採番）
      // manually_categorized は全てtrueにリセット（再カテゴライズを無効化）
      const { id, ...rest } = r;
      if (Array.isArray(rest.items)) {
        rest.items = rest.items.map(item => ({ ...item, manually_categorized: true }));
      }
      await dbAdd('receipts', rest);
      added++;
      if (added % 10 === 0) {
        setExportStatus(`⏳ ${added}件保存済み / ${total}件中`, 'var(--text-dim)');
        await new Promise(r => setTimeout(r, 0));
      }
    }
    setExportStatus(`✅ ${added}件を保存しました`, 'var(--accent)');
    updateExportStatus();
  } catch(e) {
    setExportStatus(`❌ インポート失敗：${e.message}`, 'var(--danger)');
  }
}

async function updateExportStatus() {
  try {
    if (!db) db = await openDB();
    const records = await dbGetAll('receipts');
    const el = document.getElementById('export-status');
    if (el) {
      el.textContent = `${records.length}件保存済み`;
      el.style.color = 'var(--accent)';
    }
  } catch(e) {}
}

function setExportStatus(msg, color) {
  const el = document.getElementById('export-status');
  if (el) { el.textContent = msg; el.style.color = color; }
}

function saveApiKey() {
  const key = document.getElementById('api-key-input').value.trim();
  if (!key) { alert('APIキーを入力してください'); return; }
  localStorage.setItem('gemini_api_key', key);
  _saveSettingIDB('gemini_api_key', key);
  hideOnboardToast();
  _skipNextCloseTopLayer = true;
  _closeSettingsInner();
  history.back(); // pushStateエントリを消費（閉じ処理は上で完了済み）
  showStatus('success', 'APIキーを保存しました');
}

function saveGeminiModel() {
  const model = document.getElementById('gemini-model-select').value;
  localStorage.setItem('gemini_model', model);
  const msg = document.getElementById('model-saved-msg');
  if (msg) {
    msg.textContent = '✓ 保存しました';
    clearTimeout(msg._t);
    msg._t = setTimeout(() => { msg.textContent = ''; }, 2000);
  }
}

// ===== タブ切り替え =====
function switchTab(name) {
  document.querySelectorAll('.tab').forEach((t, i) => {
    t.classList.toggle('active', ['upload','history','stats'][i] === name);
  });
  document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
  document.getElementById('tab-' + name).classList.add('active');
  if (name === 'history') {
    if (_historyView === 'cal') loadCalendar();
    else loadHistory();
  }
  if (name === 'stats') { initMonthPeriod(); loadStats(); }
  if (name === 'upload') { refreshManualCategoryUI(); rebuildStoreDropdown(); }
}

// ===== ファイル選択 =====
let selectedFile = null;
let selectedFiles = []; // 分割モード用
let parsedData = null;
let currentMode = 'single';

function setMode(mode) {
  currentMode = mode;
  document.getElementById('mode-single').classList.toggle('active', mode === 'single');
  document.getElementById('mode-multi').classList.toggle('active', mode === 'multi');
  document.getElementById('single-mode-ui').style.display = mode === 'single' ? 'block' : 'none';
  document.getElementById('multi-mode-ui').style.display = mode === 'multi' ? 'block' : 'none';
  // 通常モードは自動解析なのでボタン非表示、分割モードはボタン表示
  const analyzeBtn = document.getElementById('analyze-btn');
  analyzeBtn.style.display = mode === 'multi' ? 'block' : 'none';
  // リセット
  selectedFile = null;
  selectedFiles = [];
  document.getElementById('file-input').value = '';
  document.getElementById('preview-img').style.display = 'none';
  renderMultiPreview();
  analyzeBtn.disabled = true;
  document.getElementById('result-preview').style.display = 'none';
  hideStatus();
}

function onFileSelected(e) {
  const file = e.target.files[0];
  if (!file) return;
  selectedFile = file;
  const url = URL.createObjectURL(file);
  const img = document.getElementById('preview-img');
  img.onload = () => URL.revokeObjectURL(url); // 表示後すぐ解放
  img.src = url;
  img.style.display = 'block';
  document.getElementById('analyze-btn').disabled = false;
  hideStatus();
  document.getElementById('result-preview').style.display = 'none';
  // 画像選択後すぐに自動解析開始
  analyzeReceipt();
}

function onMultiFileSelected(e) {
  const file = e.target.files[0];
  if (!file) return;
  selectedFiles.push(file);
  e.target.value = '';
  renderMultiPreview();
  document.getElementById('analyze-btn').disabled = selectedFiles.length === 0;
  hideStatus();
  document.getElementById('result-preview').style.display = 'none';
}

function removeMultiFile(idx) {
  selectedFiles.splice(idx, 1);
  renderMultiPreview();
  document.getElementById('analyze-btn').disabled = selectedFiles.length === 0;
}

// ===== 長押しで「ファイルから選択」 =====
// 通常タップ : capture 付き input → カメラ起動
// 長押し     : capture なし input → Android のファイル／ギャラリー選択
// ※ ファイル選択ダイアログはユーザー操作内でしか開けないため、
//   「長押し成立をバイブと枠線で通知 → 指を離した瞬間に開く」としている
const LONG_PRESS_MS = 500;      // 長押しとみなす時間
const LONG_PRESS_MOVE_TOL = 12; // これ以上動いたらスクロールとみなしてキャンセル（px）

function setupLongPressPicker(zone, camInput, galInput) {
  let timer = null;   // 長押し判定タイマー
  let ready = false;  // 長押し成立（指を離せばファイル選択）
  let fired = false;  // ファイル選択を開いた＝カメラの click を打ち消す
  let sx = 0, sy = 0;

  const reset = () => {
    if (timer) { clearTimeout(timer); timer = null; }
    ready = false;
    zone.classList.remove('lp-ready');
  };

  zone.addEventListener('pointerdown', (e) => {
    fired = false;              // 新しい操作の開始でフラグをクリア
    reset();
    sx = e.clientX; sy = e.clientY;
    timer = setTimeout(() => {
      timer = null;
      ready = true;
      zone.classList.add('lp-ready');
      if (navigator.vibrate) { try { navigator.vibrate(30); } catch (_) {} }
    }, LONG_PRESS_MS);
  });

  zone.addEventListener('pointermove', (e) => {
    if (!timer && !ready) return;
    if (Math.abs(e.clientX - sx) > LONG_PRESS_MOVE_TOL ||
        Math.abs(e.clientY - sy) > LONG_PRESS_MOVE_TOL) reset();
  });

  zone.addEventListener('pointerup', () => {
    if (ready) {
      fired = true;             // 直後に来る camInput の click を拒否させる
      reset();
      showUserToast();
      galInput.click();         // ユーザー操作内なのでダイアログを開ける
    } else {
      reset();
    }
  });

  ['pointercancel', 'pointerleave'].forEach(ev => zone.addEventListener(ev, reset));

  // 長押しが成立したときは、カメラ起動の click をキャンセル
  camInput.addEventListener('click', (e) => {
    if (fired) { e.preventDefault(); e.stopPropagation(); }
  }, true);

  // 長押しで出るコンテキストメニューを抑止
  zone.addEventListener('contextmenu', (e) => e.preventDefault());
}

function renderMultiPreview() {
  const container = document.getElementById('multi-preview');
  container.innerHTML = '';
  selectedFiles.forEach((file, idx) => {
    const url = URL.createObjectURL(file);
    const div = document.createElement('div');
    div.className = 'preview-thumb';
    const thumbImg = document.createElement('img');
    thumbImg.alt = `${idx+1}枚目`;
    thumbImg.onload = () => URL.revokeObjectURL(url); // 表示後すぐ解放
    thumbImg.src = url;
    const delBtn = document.createElement('button');
    delBtn.className = 'preview-thumb-del';
    delBtn.textContent = '✕';
    delBtn.onclick = () => removeMultiFile(idx);
    const label = document.createElement('div');
    label.className = 'preview-thumb-label';
    label.textContent = `${idx+1}枚目`;
    div.appendChild(thumbImg);
    div.appendChild(delBtn);
    div.appendChild(label);
    container.appendChild(div);
  });
  // 追加ボタン（最大5枚）
  if (selectedFiles.length < 5) {
    const btn = document.createElement('button');
    btn.className = 'add-photo-btn';
    btn.innerHTML = `
      <input type="file" accept="image/*" capture="environment" class="cam-input" onchange="onMultiFileSelected(event)">
      <input type="file" accept="image/*" class="gallery-input" style="display:none;" onchange="onMultiFileSelected(event)">
      <span style="font-size:24px;">＋</span>
      <span>${selectedFiles.length === 0 ? '撮影 / 選択' : '追加'}</span>
      <span style="font-size:10px;opacity:0.7;">長押しでファイル</span>
    `;
    container.appendChild(btn);
    const camInput = btn.querySelector('.cam-input');
    const galInput = btn.querySelector('.gallery-input');
    camInput.addEventListener('click', showUserToast);
    setupLongPressPicker(btn, camInput, galInput);
  }
}

// ===== Gemini 解析 =====
async function analyzeReceipt() {
  if (!getCurrentUser()) { promptSetup(); return; }
  const apiKey = localStorage.getItem('gemini_api_key');
  if (!apiKey) { promptSetup(); return; }
  if (currentMode === 'single' && !selectedFile) return;
  if (currentMode === 'multi' && selectedFiles.length === 0) return;

  // 初回のみ通知許可を求める
  await requestNotificationPermission();

  showStatus('loading');
  document.getElementById('analyze-btn').disabled = true;
  document.getElementById('result-preview').style.display = 'none';

  try {
    // 画像パーツ構築（通常 or 分割）
    // fileToBase64 内で縮小圧縮済み。mime_type は常に image/jpeg。
    let imageParts = [];
    if (currentMode === 'multi') {
      for (const f of selectedFiles) {
        const b64 = await fileToBase64(f);
        imageParts.push({ inline_data: { mime_type: 'image/jpeg', data: b64 } });
        await new Promise(r => setTimeout(r, 30)); // 1枚ごとにGC機会
      }
    } else {
      const base64 = await fileToBase64(selectedFile);
      imageParts.push({ inline_data: { mime_type: 'image/jpeg', data: base64 } });
    }

    await new Promise(r => setTimeout(r, 30)); // JSON化前にGC機会

    const categoryPrompt = buildCategoryPrompt();
    const categorySection = categoryPrompt
      ? categoryPrompt
      : `カテゴリ定義：
middle_category（中カテゴリ）: 野菜、肉類、魚介類、飲料、麺類、乳製品、パン、菓子、調味料、冷凍食品、その他 のいずれか
small_category（小カテゴリ）: 居酒屋メニューレベルの一般名称（例：じゃがいも、豚肉、緑茶、ビール、そうめん、牛乳、食パン）
メーカー名・ブランド名は使わない。判断困難な場合は middle_category="その他"、small_category="その他"`;

    const prompt = `このレシート画像を読み取り、以下のJSON形式のみで返してください。他のテキストは一切不要です。

{
  "store": "店舗名（レシートに記載の正式名称。例：アピタ名古屋）",
  "store_brand": "チェーン・ブランド名（地名・番号・支店名などを除いた共通名称。例：アピタ）",
  "date": "YYYY-MM-DD",
  "time": "HH:MM",
  "total": 合計金額(数値),
  "items": [
    {
      "name": "商品名（レシートの表記を省略せず正確に。黒・白・塩・糖などの修飾語も含めること）",
      "middle_category": "中カテゴリ",
      "small_category": "小カテゴリ",
      "price": 税込金額(数値、レシートに印字されている個別商品の金額をそのまま。税抜表示レシートの場合は税込換算した金額)
    }
  ]
}

${categorySection}

store_brand（チェーン・ブランド名）の抽出ルール：
- store（正式店舗名）から地名・番号・支店名・方角などを除いた、チェーン共通の名称を入れること
- 例：「アピタ名古屋」→「アピタ」、「イオン八事店」→「イオン」、「セブン-イレブン渋谷3丁目店」→「セブン-イレブン」
- 例：「マクドナルド梅田店」→「マクドナルド」、「スターバックスコーヒー表参道店」→「スターバックスコーヒー」
- 個人店・ブランド判別困難な場合はstoreと同じ値を入れる（nullにしない）

注意：
- dateが読み取れない場合は今日の日付
- timeはレシートに購入時刻が記載されている場合のみHH:MM形式で入れる。読み取れない場合はnull
- 合計金額は税・割引をすべて反映した実際の支払い金額（税込み合計）。小計ではなく、レシートに「合計」「お買上金額」「お支払い金額」として印字されている金額
- 商品名は絶対に省略・短縮しないこと
- ポイント情報・会員情報・税額明細・「合計」「お会計」等の合計行はitemsに含めない（購入商品のみ）`;

    const _geminiUrl1 = `https://generativelanguage.googleapis.com/v1beta/models/${localStorage.getItem('gemini_model') || 'gemini-2.5-flash'}:generateContent?key=${apiKey}`;
    const _geminiBody1 = JSON.stringify({
      contents: [{
        parts: [
          ...imageParts,
          { text: currentMode === 'multi'
            ? `これらの画像は1枚のレシートを分割して撮影したものです。上から順に読み取り、1つのレシートとして統合して解析してください。

${prompt}`
            : prompt
          }
        ]
      }]
    });
    // base64文字列を含む imageParts を即解放（最大メモリ使用箇所）
    imageParts = null;

    // ローディング表示を「解析中」に戻す（リトライ後の再表示用）
    const _restoreLoadingMsg1 = () => {
      const sp = document.querySelector('#status-loading span');
      if (sp) sp.textContent = 'Geminiで解析中...';
    };

    const res = await callGeminiWithRetry(
      _geminiUrl1,
      { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: _geminiBody1 },
      {
        maxRetries: 5,
        baseDelayMs: 1000,
        onRetry: (attempt, delayMs) => {
          const sec = Math.round(delayMs / 1000);
          showStatus('loading');
          const sp = document.querySelector('#status-loading span');
          if (sp) sp.textContent = `混雑しているため再試行しています… (${attempt}/5回目・${sec}秒後)`;
        }
      }
    );
    _restoreLoadingMsg1();

    if (!res.ok) {
      const err = await res.json().catch(() => ({}));
      const status = res.status;
      const e = new Error(err.error?.message || `HTTP ${status}`);
      e.status = status;
      throw e;
    }

    const data = await res.json();
    const text = data.candidates?.[0]?.content?.parts?.[0]?.text || '';
    const clean = text.replace(/```json|```/g, '').trim();
    parsedData = JSON.parse(clean);
    stripTotalRowFromItems(parsedData);

    if (!parsedData.items || parsedData.items.length === 0) {
      parsedData = null;
      throw Object.assign(new Error('商品が検出されませんでした。レシートが正しく映っているか確認してください。'), { _custom: true });
    }

    renderResult(parsedData);
    showStatus('success', '解析完了！内容を確認して保存してください。');
    // 解析完了音（Web Audio API）
    try {
      const actx = new (window.AudioContext || window.webkitAudioContext)();
      const now = actx.currentTime;
      [0, 0.18].forEach((offset, i) => {
        const osc = actx.createOscillator();
        const gain = actx.createGain();
        osc.connect(gain);
        gain.connect(actx.destination);
        osc.frequency.value = i === 0 ? 880 : 1100;
        osc.type = 'sine';
        gain.gain.setValueAtTime(0.3, now + offset);
        gain.gain.exponentialRampToValueAtTime(0.001, now + offset + 0.25);
        osc.start(now + offset);
        osc.stop(now + offset + 0.25);
      });
    } catch(e) {}

  } catch (err) {
    showStatus('error', toJapaneseGeminiError(err));
    document.getElementById('analyze-btn').disabled = false;
    // エラー音（下降・不協和）
    try {
      const actx = new (window.AudioContext || window.webkitAudioContext)();
      const now = actx.currentTime;
      [0, 0.2].forEach((offset, i) => {
        const osc = actx.createOscillator();
        const gain = actx.createGain();
        osc.connect(gain);
        gain.connect(actx.destination);
        osc.frequency.value = i === 0 ? 440 : 330;
        osc.type = 'sawtooth';
        gain.gain.setValueAtTime(0.25, now + offset);
        gain.gain.exponentialRampToValueAtTime(0.001, now + offset + 0.3);
        osc.start(now + offset);
        osc.stop(now + offset + 0.3);
      });
    } catch(e) {}
  }
}

// Geminiが「合計」行を商品として items に混入させてしまうケースへの対処。
// 該当行を items から除外し、その金額を正式な合計として採用する（items の二重計上を防ぐ）。
function stripTotalRowFromItems(data) {
  if (!data || !Array.isArray(data.items) || data.items.length === 0) return;
  const totalNamePattern = /^(合計|合計金額|お会計|お買上金額|お買い上げ金額|お支払い?金額|税込合計|total)$/i;
  const kept = [];
  let matchedPrice = null;
  data.items.forEach(item => {
    const name = (item && item.name || '').trim();
    if (totalNamePattern.test(name) && typeof item.price === 'number') {
      // 複数マッチした場合は金額が大きい方（税込合計である可能性が高い）を採用
      if (matchedPrice === null || item.price > matchedPrice) matchedPrice = item.price;
    } else {
      kept.push(item);
    }
  });
  if (matchedPrice !== null) {
    data.items = kept;
    data.total = matchedPrice;
  }
}

function renderResult(data) {
  document.getElementById('res-store').textContent = data.store || '不明';
  // store_brand が store と異なる場合はブランド名を補足表示
  const brandEl = document.getElementById('res-store-brand');
  if (brandEl) {
    const brand = (data.store_brand || '').trim();
    const store = (data.store || '').trim();
    if (brand && brand !== store) {
      brandEl.textContent = '🏷 ' + brand;
      brandEl.style.display = 'inline-block';
    } else {
      brandEl.style.display = 'none';
    }
  }
  const dateStr = data.date || '—';
  const timeStr = data.time ? ` ${data.time}` : '';
  document.getElementById('res-date').textContent = dateStr + timeStr;
  // 合計はr.total（税込）優先、なければitemsの合計
  const _itemsSum = (data.items || []).reduce((s, i) => s + (i.price || 0), 0);
  const calcTotal = (data.total && data.total > _itemsSum) ? data.total : (_itemsSum || data.total || 0);
  document.getElementById('res-total').textContent = `¥${calcTotal.toLocaleString()}`;

  const ul = document.getElementById('res-items');
  ul.innerHTML = '';
  (data.items || []).forEach((item, idx) => {
    const li = document.createElement('li');
    li.className = 'item-row';
    li.style.cursor = 'pointer';
    li.innerHTML = `
      <span class="item-name">${escHtml(item.name)}</span>
      <span class="item-cat">${escHtml(resolveCatLabel(item))}</span>
      <span class="item-price">¥${(item.price || 0).toLocaleString()}</span>
      <button class="item-edit-btn" title="編集" onclick="openPreviewItemEdit(${idx}); event.stopPropagation();">✏️</button>
    `;
    li.addEventListener('click', () => openPreviewItemEdit(idx));
    ul.appendChild(li);
  });

  document.getElementById('result-preview').style.display = 'block';

  // 表示・編集のたびにカウントダウンを仕切り直す
  scheduleAutoSave();
}

// ===== 自動保存（解析結果を一定時間さわらなければ保存） =====
// 秒数は設定画面から変更できる（0なら自動保存しない）
let _autoSaveTick = null;     // setInterval のID
let _autoSaveLeft = 0;        // 残り秒
let _autoSaveStopped = false; // ユーザーがトーストをタップして止めたか（次の写真までON）

function _autoSaveToastEl() { return document.getElementById('autosave-toast'); }

function showAutoSaveToast(html) {
  const el = _autoSaveToastEl();
  if (!el) return;
  el.innerHTML = html;
  el.classList.add('show');
}

function hideAutoSaveToast() {
  const el = _autoSaveToastEl();
  if (el) el.classList.remove('show');
}

function renderAutoSaveToast() {
  showAutoSaveToast(
    `<span class="autosave-count">${_autoSaveLeft}秒後</span>に自動保存します`
    + '<span class="autosave-sub">内容を編集するとカウントし直します／タップで自動保存を止める</span>'
  );
}

// カウントダウンを開始（再呼び出しで最初からやり直し）。
// renderResult から呼ばれるので、プレビューを編集するたびにリセットされる。
function scheduleAutoSave() {
  clearAutoSaveTimer();
  if (_autoSaveStopped) return;
  if (!parsedData) return;
  // プレビューが表示されていないときは何もしない
  const pv = document.getElementById('result-preview');
  if (!pv || pv.style.display === 'none') return;

  const sec = Number(getPref('autosaveSec')) || 0;
  if (sec <= 0) return; // 設定で自動保存を切っている
  _autoSaveLeft = sec;
  renderAutoSaveToast();
  _autoSaveTick = setInterval(() => {
    _autoSaveLeft--;
    if (_autoSaveLeft <= 3 && _autoSaveLeft > 0) playCountdownTick(_autoSaveLeft);
    if (_autoSaveLeft <= 0) {
      clearAutoSaveTimer();
      hideAutoSaveToast();
      saveReceipt();
    } else {
      renderAutoSaveToast();
    }
  }, 1000);
}

function clearAutoSaveTimer() {
  if (_autoSaveTick) { clearInterval(_autoSaveTick); _autoSaveTick = null; }
}

// 一時停止（編集モーダルを開いている間など）。停止フラグは立てない。
function pauseAutoSave() {
  clearAutoSaveTimer();
  hideAutoSaveToast();
}

// トーストをタップしたとき。この写真については以降カウントしない。
function stopAutoSaveByUser() {
  clearAutoSaveTimer();
  _autoSaveStopped = true;
  showAutoSaveToast('自動保存を止めました<span class="autosave-sub">「💾 保存する」で手動保存してください</span>');
  setTimeout(hideAutoSaveToast, 2500);
}

// 新しい写真を解析するときに停止フラグを戻す
function resetAutoSaveState() {
  clearAutoSaveTimer();
  hideAutoSaveToast();
  _autoSaveStopped = false;
}

// ===== 効果音 =====
// 解析完了音（実際に鳴っている）と同じ方式にする。
//   - 呼ばれるたび new AudioContext() を作る
//   - currentTime をその場で読んで予約する（resume 待ちをしない）
//   - ゲインは setValueAtTime → exponentialRampToValueAtTime(0.001)
// 作ったコンテキストは上限に当たらないよう、鳴り終わったら閉じる。
// notes: [{ f: 周波数, at: 開始オフセット(秒), d: 長さ(秒), vol, atk: 立ち上がり(秒), harm: 倍音の音量比 }]
// 耳障りを避けるためのポイント：
//   - 音量をいきなり最大にするとブチッというクリックノイズが出るので、数msかけて上げる
//   - ピッチを急に変えない（定常の鐘のような減衰にする）
//   - オクターブ上の倍音を薄く重ねて柔らかな響きにする
function _playNotes(notes) {
  try {
    if (getPref('soundMode') === 'off') return;
    const volScale = Number(getPref('soundVolume')) || 1;
    const actx = new (window.AudioContext || window.webkitAudioContext)();
    const now = actx.currentTime;
    let last = 0;

    const voice = (f, t0, dur, vol, atk) => {
      const osc = actx.createOscillator();
      const gain = actx.createGain();
      osc.connect(gain);
      gain.connect(actx.destination);
      osc.type = 'sine';
      osc.frequency.value = f;
      gain.gain.setValueAtTime(0, t0);
      gain.gain.linearRampToValueAtTime(vol, t0 + atk);          // ゆるやかな立ち上がり
      gain.gain.exponentialRampToValueAtTime(0.0008, t0 + dur);  // 鐘のような減衰
      gain.gain.setValueAtTime(0, t0 + dur);
      osc.start(t0);
      osc.stop(t0 + dur + 0.02);
    };

    notes.forEach(n => {
      const t0 = now + (n.at || 0);
      const dur = n.d || 0.4;
      const vol = (n.vol == null ? 0.25 : n.vol) * volScale;
      const atk = n.atk == null ? 0.012 : n.atk;
      voice(n.f, t0, dur, vol, atk);
      if (n.harm) voice(n.f * 2, t0, dur * 0.6, vol * n.harm, atk);
      last = Math.max(last, (n.at || 0) + dur);
    });

    setTimeout(() => { try { actx.close(); } catch (e) {} }, (last + 0.5) * 1000);
  } catch (e) {}
}

// 自動保存の残り3・2・1秒で鳴らす柔らかい音
// E メジャーの和音を順に上げ、保存時の E6 へ自然につなげる
function playCountdownTick(left) {
  if (getPref('soundMode') !== 'all') return; // カウント音を切っている
  const table = { 3: 329.63, 2: 415.30, 1: 493.88 }; // E4 / G#4 / B4
  const f = table[left] || 329.63;
  _playNotes([{ f, d: 0.42, vol: 0.20, atk: 0.018, harm: 0.10 }]);
}

// 保存完了音「ぴぃこんこん」
function playSaveChime() {
  _playNotes([
    { f: 659.25, at: 0.00, d: 0.32, vol: 0.20, atk: 0.014, harm: 0.10 }, // ぴぃ E5
    { f: 329.63, at: 0.22, d: 0.50, vol: 0.26, atk: 0.018, harm: 0.10 }, // こん E4
    { f: 329.63, at: 0.50, d: 0.65, vol: 0.26, atk: 0.018, harm: 0.10 }, // こん E4
  ]);
}

// 設定画面からの動作確認用
function testSaveChime() {
  playCountdownTick(3);
  setTimeout(() => playCountdownTick(2), 700);
  setTimeout(() => playCountdownTick(1), 1400);
  setTimeout(() => playSaveChime(), 2100);
}

// ===== 保存 =====
async function saveReceipt() {
  if (!parsedData) return;
  pauseAutoSave();
  try {
    // store_brand を店カテゴリに自動登録し、idを取得
    const storeBrandId = autoRegisterStoreBrand(parsedData.store_brand);
    // 各商品にmiddle_category_idを付与
    const items = (parsedData.items || []).map(item => ({
      ...item,
      middle_category_id: midNameToId(item.middle_category) || null
    }));
    await dbAdd('receipts', {
      ...parsedData,
      items,
      store_brand_id: storeBrandId || null,
      saved_at: new Date().toISOString()
    });
    playSaveChime();
    showStatus('success', '保存しました！');
    resetUpload();
  } catch (err) {
    showStatus('error', `保存エラー: ${err.message}`);
  }
}

// ===== プレビュー編集（保存前の解析結果を直接編集） =====
let previewEditItemIndex = null; // null=新規追加, 数値=編集中index

// 店舗・日付を編集
function openPreviewReceiptEdit() {
  pauseAutoSave();
  document.getElementById('edit-store-input').value = parsedData.store || '';
  document.getElementById('edit-date-input').value = parsedData.date || '';
  document.getElementById('edit-time-input').value = parsedData.time || '';
  // 保存ボタンをプレビュー用に差し替え
  const modal = document.getElementById('receipt-edit-modal');
  modal.dataset.mode = 'preview';
  modal.classList.add('open');
}

// 商品を編集（index指定）または新規追加（引数なし）
function openPreviewItemEdit(idx) {
  pauseAutoSave();
  previewEditItemIndex = (idx !== undefined) ? idx : null;
  const modal = document.getElementById('item-edit-modal');
  modal.dataset.mode = 'preview';

  if (previewEditItemIndex !== null) {
    const item = parsedData.items[previewEditItemIndex];
    document.getElementById('edit-item-name').value = item.name || '';
    document.getElementById('edit-item-price').value = item.price || 0;
    buildMiddleCategorySelectFromItem(item);
    // small_category の初期値を正しくセット
    const smallEl = document.getElementById('edit-item-small');
    if (smallEl && item.small_category) {
      if (smallEl.tagName === 'SELECT') {
        const match = [...smallEl.options].find(o => o.value === item.small_category);
        if (match) smallEl.value = item.small_category;
      } else {
        smallEl.value = item.small_category;
      }
    }
  } else {
    // 新規追加
    document.getElementById('edit-item-name').value = '';
    document.getElementById('edit-item-price').value = 0;
    buildMiddleCategorySelect('');
  }
  modal.classList.add('open');
}

// 商品追加ボタン用
function openPreviewAddItem() {
  openPreviewItemEdit(undefined);
}


async function requestNotificationPermission() {
  if (!('Notification' in window)) return; // 非対応ブラウザ
  if (Notification.permission === 'granted') return; // 既に許可済み
  if (Notification.permission === 'denied') return; // 拒否済みは再要求しない
  await Notification.requestPermission();
}

function sendNotification(title, body) {
  if (!('Notification' in window)) return;
  if (Notification.permission !== 'granted') return;
  try {
    new Notification(title, {
      body,
      icon: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="%23111"/><text x="16" y="22" text-anchor="middle" font-size="18">🧾</text></svg>',
      badge: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="%23111"/><text x="16" y="22" text-anchor="middle" font-size="18">🧾</text></svg>',
      tag: 'receipt-analyzed', // 同じtagは重複通知されない
    });
  } catch(e) {
    console.warn('通知エラー:', e);
  }
}

function resetUpload() {
  resetAutoSaveState();
  selectedFile = null;
  selectedFiles = [];
  parsedData = null;
  document.getElementById('file-input').value = '';
  const previewImg = document.getElementById('preview-img');
  previewImg.src = '';
  previewImg.style.display = 'none';
  document.getElementById('analyze-btn').disabled = true;
  document.getElementById('result-preview').style.display = 'none';
  renderMultiPreview();
  hideStatus();
}

// ===== 履歴表示 =====
let currentHistorySort = 'added';
let currentHistorySearch = '';

function onHistorySearchInput() {
  const val = document.getElementById('history-search-input').value;
  currentHistorySearch = val;
  document.getElementById('history-search-clear').style.display = val ? 'block' : 'none';
  loadHistory();
}

function clearHistorySearch() {
  currentHistorySearch = '';
  document.getElementById('history-search-input').value = '';
  document.getElementById('history-search-clear').style.display = 'none';
  loadHistory();
}

function setHistorySort(sort) {
  currentHistorySort = sort;
  ['added', 'date-desc', 'date-asc'].forEach(s => {
    document.getElementById('sort-' + s).classList.toggle('active', s === sort);
  });
  loadHistory();
}

async function loadHistory() {
  const list = document.getElementById('history-list');
  list.innerHTML = '';
  try {
    const records = await dbGetAll('receipts');
    // store_brandがあるレシートのブランド名のみstore_defに登録（store_brandなしは対象外）
    // 過去に r.store で誤登録された分もここでクリーンアップ
    const validBrands = new Set(
      records.map(r => (r.store_brand || '').trim()).filter(Boolean)
    );
    const storeFullNames = new Set(
      records.map(r => (r.store || '').trim()).filter(Boolean)
    );
    let stores = loadStoreDefFromStorage(); // [{id, name}, ...]
    // store_brandを持つレシートがなく、かつフル店名と一致する登録済み店名を除去
    stores = stores.filter(s => validBrands.has(s.name) || (!storeFullNames.has(s.name)));
    // 未登録のstore_brandを追加（idなし既存レコードの補完）
    let migrated = false;
    validBrands.forEach(brand => {
      if (!stores.some(s => s.name === brand)) {
        stores.push({ id: _genStoreId(), name: brand });
        migrated = true;
      }
    });
    if (migrated || stores.length !== loadStoreDefFromStorage().length) {
      stores.sort((a, b) => a.name.localeCompare(b.name, 'ja'));
      localStorage.setItem(STORE_DEF_KEY, JSON.stringify(stores));
      updateStoreDefStatus();
    }
    // store_brand_idが未設定のレシートにidを付与（既存データの移行）
    let needsDbUpdate = false;
    records.forEach(r => {
      if (r.store_brand && !r.store_brand_id) {
        const entry = stores.find(s => s.name === r.store_brand.trim());
        if (entry) { r.store_brand_id = entry.id; needsDbUpdate = true; }
      }
      // middle_category_idが未設定の商品にidを付与（既存データの移行）
      // またはIDが現在のcategoryDefに存在しない場合も名前で再解決
      (r.items || []).forEach(item => {
        if (item.middle_category && !item.middle_category_id) {
          const mid = item.middle_category || item.large_category;
          const midId = midNameToId(mid);
          if (midId) { item.middle_category_id = midId; needsDbUpdate = true; }
        } else if (item.middle_category && item.middle_category_id) {
          // IDが現在のcategoryDefに存在するか確認（インポート後のID不一致対策）
          const exists = categoryDef && categoryDef.some(m => m.id === item.middle_category_id);
          if (!exists) {
            const midId = midNameToId(item.middle_category);
            if (midId) { item.middle_category_id = midId; needsDbUpdate = true; }
          }
        }
      });
    });
    if (needsDbUpdate) {
      for (const r of records) {
        await dbPut('receipts', r);
      }
    }
    if (records.length === 0) {
      list.innerHTML = '<div class="empty-state">まだレシートがありません</div>';
      return;
    }
    if (currentHistorySort === 'added') {
      // id昇順（追加順）
      records.sort((a, b) => (b.id || 0) - (a.id || 0));
    } else if (currentHistorySort === 'date-desc') {
      records.sort((a, b) => {
        const aKey = (a.date || '') + (a.time ? ' ' + a.time : '');
        const bKey = (b.date || '') + (b.time ? ' ' + b.time : '');
        return bKey.localeCompare(aKey);
      });
    } else if (currentHistorySort === 'date-asc') {
      records.sort((a, b) => {
        const aKey = (a.date || '') + (a.time ? ' ' + a.time : '');
        const bKey = (b.date || '') + (b.time ? ' ' + b.time : '');
        return aKey.localeCompare(bKey);
      });
    }
    // 商品名検索フィルタリング
    const searchQuery = (currentHistorySearch || '').trim();
    const matchEl = document.getElementById('history-search-match');
    let displayRecords = records;
    if (searchQuery) {
      const q = searchQuery.toLowerCase();
      displayRecords = records.map(r => {
        const matchedItems = (r.items || []).filter(item =>
          (item.name || '').toLowerCase().includes(q)
        );
        return matchedItems.length > 0 ? { ...r, _matchedItems: matchedItems } : null;
      }).filter(Boolean);
      matchEl.textContent = `「${searchQuery}」を含む商品：${displayRecords.reduce((s, r) => s + r._matchedItems.length, 0)}件 / ${displayRecords.length}レシート`;
      matchEl.style.display = 'block';
      if (displayRecords.length === 0) {
        list.innerHTML = '<div class="empty-state">該当する商品が見つかりません</div>';
        return;
      }
    } else {
      matchEl.style.display = 'none';
    }

    function highlightText(text, query) {
      if (!query) return text;
      const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
      return text.replace(new RegExp(`(${escaped})`, 'gi'),
        '<span class="history-item-highlight">$1</span>');
    }

    displayRecords.forEach(r => {
      const li = document.createElement('li');
      li.className = 'history-item';
      li.dataset.id = r.id;
      const dateTime = r.date ? (r.time ? `${r.date} ${r.time}` : r.date) : '—';
      // 検索時はマッチした商品名を表示
      const matchedItemsHtml = searchQuery && r._matchedItems
        ? `<div style="font-size:11px;color:var(--text-dim);margin-top:3px;line-height:1.6;">
            ${r._matchedItems.slice(0, 3).map(item =>
              `<span style="margin-right:6px;">• ${highlightText(item.name, searchQuery)}</span>`
            ).join('')}${r._matchedItems.length > 3 ? `<span>…他${r._matchedItems.length - 3}件</span>` : ''}
           </div>`
        : '';
      li.innerHTML = `
        <div class="history-left">
          <div class="history-store">${r.store || '不明'}</div>
          ${(() => {
            const brand = (r.store_brand || '').trim();
            const store = (r.store || '').trim();
            if (brand && brand !== store) {
              return `<span style="font-size:10px;color:var(--text-dim);background:var(--surface2);padding:1px 7px;border-radius:8px;display:inline-block;margin-bottom:2px;">🏷 ${brand}</span>`;
            }
            const storeDef = loadStoreDefFromStorage();
            if (r.store_brand_id) {
              const entry = storeDef.find(s => s.id === r.store_brand_id);
              if (entry && entry.name !== store) {
                return `<span style="font-size:10px;color:var(--text-dim);background:var(--surface2);padding:1px 7px;border-radius:8px;display:inline-block;margin-bottom:2px;">🏷 ${entry.name}</span>`;
              }
            }
            const matched = storeDef.find(def => store.includes(def.name) || def.name.includes(store));
            if (matched && matched.name !== store) {
              return `<span style="font-size:10px;color:var(--text-dim);background:var(--surface2);padding:1px 7px;border-radius:8px;display:inline-block;margin-bottom:2px;">🏷 ${matched.name}</span>`;
            }
            if (storeDef.some(s => s.name === store)) {
              return `<span style="font-size:10px;color:var(--text-dim);background:var(--surface2);padding:1px 7px;border-radius:8px;display:inline-block;margin-bottom:2px;">🏷 ${store}</span>`;
            }
            return '';
          })()}
          <div class="history-date">${dateTime}</div>
          ${matchedItemsHtml}
        </div>
        <div class="history-right">
          <div style="display:flex;align-items:center;gap:6px;justify-content:flex-end;">
            <button class="recat-btn" title="再カテゴライズ">🔄</button>
            <div class="history-total">¥${effectiveTotal(r).toLocaleString()}</div>
          </div>
          <div class="history-count">${(r.items || []).length}点</div>
        </div>
        <span class="history-chevron">›</span>
      `;
      // 再カテゴライズボタン：addEventListener で確実にstopPropagation
      const recatBtn = li.querySelector('.recat-btn');
      if (recatDoneIds.has(r.id)) recatBtn.textContent = '✅';
      recatBtn.addEventListener('click', e => {
        e.stopPropagation();
        recategorizeReceipt(r.id, recatBtn);
      });
      li.addEventListener('click', () => showDetail(r));
      list.appendChild(li);
    });
  } catch (err) {
    list.innerHTML = `<div class="empty-state">読み込みエラー: ${err.message}</div>`;
  }
}

// ===== カレンダービュー =====
let _calYear = 0;
let _calMonth = 0; // 0-indexed
let _calRecords = [];
let _historyView = 'cal'; // 'list' | 'cal'（起動時に設定で上書き）

function switchHistoryView(mode) {
  _historyView = mode;
  document.getElementById('view-btn-list').classList.toggle('active', mode === 'list');
  document.getElementById('view-btn-cal').classList.toggle('active', mode === 'cal');
  document.getElementById('history-list-body').style.display = mode === 'list' ? 'block' : 'none';
  document.getElementById('history-cal-body').style.display = mode === 'cal' ? 'block' : 'none';
  // 切り替えた側の中身をここで描画する
  // （以前は list 側を呼んでいなかったため、タブを往復するまで空のままだった）
  if (mode === 'cal') loadCalendar();
  else loadHistory();
}

async function loadCalendar() {
  try {
    _calRecords = await dbGetAll('receipts');
  } catch(e) { _calRecords = []; }

  // 履歴（カレンダー）を開いたときは常に今日の月を表示する
  // ※ 月の前後移動（calChangeMonth）は renderCalendar だけを呼ぶのでここを通らず、閲覧中の月は保たれる
  const now = new Date();
  _calYear = now.getFullYear();
  _calMonth = now.getMonth();

  renderCalendar();

  // 今日のレシートがあれば日別パネルも開いておく
  const pad2 = n => String(n).padStart(2, '0');
  const todayStr = `${_calYear}-${pad2(_calMonth + 1)}-${pad2(now.getDate())}`;
  const todayRecords = _calRecords.filter(r => r.date === todayStr);
  if (todayRecords.length > 0) {
    showCalDayPanel(todayStr, todayRecords);
  } else {
    const panel = document.getElementById('cal-day-panel');
    if (panel) panel.style.display = 'none';
  }
}

function calChangeMonth(delta) {
  _calMonth += delta;
  if (_calMonth > 11) { _calMonth = 0; _calYear++; }
  if (_calMonth < 0)  { _calMonth = 11; _calYear--; }
  document.getElementById('cal-day-panel').style.display = 'none';
  renderCalendar();
}

function renderCalendar() {
  const y = _calYear, m = _calMonth;
  const pad2 = n => String(n).padStart(2, '0');
  const monthStr = `${y}-${pad2(m + 1)}`;

  document.getElementById('cal-month-label').textContent = `${y} / ${pad2(m + 1)}`;

  // この月のレシートを日付→配列 にまとめる
  const byDate = {};
  _calRecords.forEach(r => {
    if (!r.date || !r.date.startsWith(monthStr)) return;
    if (!byDate[r.date]) byDate[r.date] = [];
    byDate[r.date].push(r);
  });

  const today = new Date();
  const todayStr = `${today.getFullYear()}-${pad2(today.getMonth()+1)}-${pad2(today.getDate())}`;

  const grid = document.getElementById('cal-grid');
  grid.innerHTML = '';

  // 曜日ヘッダー
  const dows = ['日','月','火','水','木','金','土'];
  const dowClasses = ['sun','','','','','','sat'];
  dows.forEach((d, i) => {
    const cell = document.createElement('div');
    cell.className = 'cal-dow' + (dowClasses[i] ? ' ' + dowClasses[i] : '');
    cell.textContent = d;
    grid.appendChild(cell);
  });

  // 1日の曜日（0=日）
  const firstDow = new Date(y, m, 1).getDay();
  const daysInMonth = new Date(y, m + 1, 0).getDate();

  // 空白セル
  for (let i = 0; i < firstDow; i++) {
    const cell = document.createElement('div');
    cell.className = 'cal-cell empty';
    grid.appendChild(cell);
  }

  for (let d = 1; d <= daysInMonth; d++) {
    const dateStr = `${y}-${pad2(m+1)}-${pad2(d)}`;
    const dow = (firstDow + d - 1) % 7;
    const records = byDate[dateStr] || [];
    const total = records.reduce((s, r) => s + (effectiveTotal(r) || 0), 0);

    const cell = document.createElement('div');
    cell.className = 'cal-cell' +
      (records.length > 0 ? ' has-data' : '') +
      (dateStr === todayStr ? ' today' : '');

    const numClass = dow === 0 ? ' sun' : dow === 6 ? ' sat' : '';
    cell.innerHTML = `<span class="cal-day-num${numClass}">${d}</span>`;

    if (records.length > 0) {
      // ドット（最大3個）
      const dotRow = document.createElement('div');
      dotRow.className = 'cal-dot-row';
      const dotCount = Math.min(records.length, 3);
      for (let i = 0; i < dotCount; i++) {
        const dot = document.createElement('div');
        dot.className = 'cal-dot';
        dotRow.appendChild(dot);
      }
      cell.appendChild(dotRow);
      // 合計金額
      const amt = document.createElement('div');
      amt.className = 'cal-amount';
      amt.textContent = total >= 10000
        ? `¥${(total/1000).toFixed(0)}k`
        : `¥${total.toLocaleString()}`;
      cell.appendChild(amt);

      cell.addEventListener('click', () => showCalDayPanel(dateStr, records));
    }

    grid.appendChild(cell);
  }
}

function showCalDayPanel(dateStr, records) {
  const panel = document.getElementById('cal-day-panel');
  const [y, m, d] = dateStr.split('-').map(Number);
  const label = `${y}年${m}月${d}日`;

  panel.innerHTML = '';

  // ヘッダー
  const header = document.createElement('div');
  header.className = 'cal-day-panel-header';

  const titleSpan = document.createElement('span');
  titleSpan.textContent = `${label}（${records.length}件）`;

  const btnRow = document.createElement('div');
  btnRow.style.cssText = 'display:flex;align-items:center;gap:8px;';

  // 全て再カテゴライズボタン
  const bulkBtn = document.createElement('button');
  bulkBtn.textContent = '🔄 全て';
  bulkBtn.style.cssText = 'background:none;border:1px solid var(--border);color:var(--text-dim);font-size:11px;padding:3px 8px;border-radius:6px;cursor:pointer;font-family:inherit;white-space:nowrap;';
  bulkBtn.title = 'この日のレシートを全て再カテゴライズ';
  bulkBtn.addEventListener('click', () => calDayBulkRecat(records, bulkBtn));

  const closeBtn = document.createElement('button');
  closeBtn.className = 'cal-day-panel-close';
  closeBtn.textContent = '✕';
  closeBtn.addEventListener('click', () => { panel.style.display = 'none'; });

  btnRow.appendChild(bulkBtn);
  btnRow.appendChild(closeBtn);
  header.appendChild(titleSpan);
  header.appendChild(btnRow);
  panel.appendChild(header);

  // レシート一覧
  const ul = document.createElement('ul');
  ul.className = 'history-list';
  ul.style.cssText = 'margin:0;padding:8px 12px;';

  records.forEach(r => {
    const li = document.createElement('li');
    li.className = 'history-item';
    li.style.cursor = 'pointer';

    const left = document.createElement('div');
    left.className = 'history-left';
    left.innerHTML = `
      <div class="history-store">${escHtml(r.store || '不明')}</div>
      <div class="history-date">${r.time || ''}</div>`;

    const right = document.createElement('div');
    right.className = 'history-right';

    const topRow = document.createElement('div');
    topRow.style.cssText = 'display:flex;align-items:center;gap:6px;justify-content:flex-end;';

    const recatBtn = document.createElement('button');
    recatBtn.className = 'recat-btn';
    recatBtn.title = '再カテゴライズ';
    recatBtn.textContent = recatDoneIds.has(r.id) ? '✅' : '🔄';
    recatBtn.addEventListener('click', e => {
      e.stopPropagation();
      recategorizeReceipt(r.id, recatBtn);
    });

    const totalDiv = document.createElement('div');
    totalDiv.className = 'history-total';
    totalDiv.textContent = `¥${effectiveTotal(r).toLocaleString()}`;

    topRow.appendChild(recatBtn);
    topRow.appendChild(totalDiv);

    const countDiv = document.createElement('div');
    countDiv.className = 'history-count';
    countDiv.textContent = `${(r.items || []).length}点`;

    right.appendChild(topRow);
    right.appendChild(countDiv);

    const chevron = document.createElement('span');
    chevron.className = 'history-chevron';
    chevron.textContent = '›';

    li.appendChild(left);
    li.appendChild(right);
    li.appendChild(chevron);
    li.addEventListener('click', () => showDetailFromCal(r.id));
    ul.appendChild(li);
  });

  panel.appendChild(ul);
  panel.style.display = 'block';
  panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

async function calDayBulkRecat(records, bulkBtn) {
  const apiKey = localStorage.getItem('gemini_api_key');
  if (!apiKey) { promptSetup(); return; }

  // 手入力・手動カテゴライズ済みでも再カテゴライズできるようにする
  const targets = records.slice();

  if (targets.length === 0) {
    const orig = bulkBtn.textContent;
    bulkBtn.textContent = '🚫 スキップ';
    setTimeout(() => { bulkBtn.textContent = orig; }, 2000);
    return;
  }

  bulkBtn.disabled = true;
  bulkBtn.textContent = `⏳ 0/${targets.length}`;

  let done = 0;
  for (const r of targets) {
    const dummyBtn = document.createElement('button');
    dummyBtn.textContent = '🔄';
    await recategorizeReceipt(r.id, dummyBtn).catch(() => {});
    done++;
    bulkBtn.textContent = `⏳ ${done}/${targets.length}`;
  }

  bulkBtn.textContent = `✅ 完了`;
  bulkBtn.disabled = false;
  // カレンダー再描画
  _calRecords = await dbGetAll('receipts');
  renderCalendar();
  // パネル内のボタンを✅に更新
  document.querySelectorAll('#cal-day-panel .recat-btn').forEach(btn => {
    btn.textContent = '✅';
  });
}

async function showDetailFromCal(id) {
  const all = await dbGetAll('receipts');
  const r = all.find(rec => rec.id === id);
  if (r) showDetail(r);
}

// ===== 詳細表示・編集 =====

// 割り勘考慮の実質負担合計を返す
function effectiveTotal(r) {
  const itemsSum = (r.items || []).reduce((s, i) => s + (i.price || 0), 0);
  // r.total（Geminiが返した税込合計）が items 合計より大きい場合（税抜price問題）は r.total を優先
  const raw = (r.total && r.total > itemsSum) ? r.total : (itemsSum || r.total || 0);
  if (!r.split_enabled) return raw;
  return Math.ceil(raw / (r.split_count || 2));
}

// ===== 編集機能 =====
let currentRecordId = null;
let currentRecord = null;
let currentItemIndex = null;
let currentDetailContext = 'history'; // 'history' or 'stats'

async function _showDetailBase(r) {
  currentDetailContext = 'history';
  await _loadAndShowDetail(r);
  document.getElementById('history-list-view').style.display = 'none';
  document.getElementById('history-detail-view').style.display = 'block';
  window.scrollTo(0, 0);
}
var showDetail = _showDetailBase;

async function _showDetailFromStatsBase(r) {
  currentDetailContext = 'stats';
  await _loadAndShowDetail(r);
  // 集計タブ内で他エリアを隠して詳細を表示
  document.getElementById('stats-summary').style.display = 'none';
  document.getElementById('stats-chart-section').style.display = 'none';
  document.getElementById('stats-empty').style.display = 'none';
  document.getElementById('stats-receipt-list-section').style.display = 'none';
  document.getElementById('stats-detail-view').style.display = 'block';
  window.scrollTo(0, 0);
}
var showDetailFromStats = _showDetailFromStatsBase;

async function _loadAndShowDetail(r) {
  try {
    const all = await dbGetAll('receipts');
    const latest = all.find(rec => rec.id === r.id);
    currentRecordId = r.id;
    currentRecord = JSON.parse(JSON.stringify(latest || r));
  } catch(e) {
    currentRecordId = r.id;
    currentRecord = JSON.parse(JSON.stringify(r));
  }
  _renderDetail();
}

function _closeStatsDetailBase() {
  document.getElementById('stats-detail-view').style.display = 'none';
  document.getElementById('stats-summary').style.display = '';
  document.getElementById('stats-chart-section').style.display = '';
  document.getElementById('stats-receipt-list-section').style.display = 'block';
  const section = document.getElementById('stats-receipt-list-section');
  setTimeout(() => section.scrollIntoView({ behavior: 'smooth', block: 'start' }), 50);
  // 詳細で編集・削除していたら、裏の一覧が古いままなので描き直す
  if (_receiptsDirty) { _receiptsDirty = false; _refreshStatsAfterEdit(); }
}
var closeStatsDetail = _closeStatsDetailBase;

function _renderDetail() {
  const r = currentRecord;
  const ctx = currentDetailContext;
  const storeEl  = document.getElementById(ctx === 'stats' ? 'stats-detail-store'  : 'detail-store');
  const dateEl   = document.getElementById(ctx === 'stats' ? 'stats-detail-date'   : 'detail-date');
  const totalEl  = document.getElementById(ctx === 'stats' ? 'stats-detail-total'  : 'detail-total');
  const container= document.getElementById(ctx === 'stats' ? 'stats-detail-items'  : 'detail-items');

  storeEl.textContent = r.store || '不明';
  // store_brand の補足表示
  const brandElId = ctx === 'stats' ? 'stats-detail-store-brand' : 'detail-store-brand';
  const brandDetailEl = document.getElementById(brandElId);
  if (brandDetailEl) {
    const brand = (r.store_brand || '').trim();
    const store = (r.store || '').trim();
    if (brand && brand !== store) {
      brandDetailEl.textContent = '🏷 ' + brand;
      brandDetailEl.style.display = 'inline-block';
    } else {
      brandDetailEl.style.display = 'none';
    }
  }
  const dateTime = r.date ? (r.time ? `${r.date} ${r.time}` : r.date) : '—';
  dateEl.textContent = dateTime;

  const splitOn = !!r.split_enabled;
  const splitCount = r.split_count || 2;

  const itemsSum = (r.items || []).reduce((s, i) => s + (i.price || 0), 0);
  const total = (r.total && r.total > itemsSum) ? r.total : (itemsSum || r.total || 0);
  const displayTotal = splitOn ? Math.ceil(total / splitCount) : total;
  totalEl.textContent = '¥' + displayTotal.toLocaleString();

  // 割り勘UIを同期
  _syncSplitBar(ctx);

  container.innerHTML = '';
  (r.items || []).forEach((item, idx) => {
    const div = document.createElement('div');
    div.className = 'detail-item-row';
    const price = item.price || 0;
    const splitHtml = splitOn
      ? `<div class="detail-item-split">÷${splitCount} = ¥${Math.ceil(price / splitCount).toLocaleString()}</div>`
      : '';
    div.innerHTML = `
      <div class="detail-item-left">
        <div class="detail-item-name">${item.name || '—'}</div>
        <span class="detail-item-cat">${escHtml(resolveCatLabel(item))}</span>
      </div>
      <div class="detail-item-price-block">
        <div class="detail-item-price">¥${price.toLocaleString()}</div>
        ${splitHtml}
      </div>
      <button class="item-edit-btn" onclick="openItemEditModal(${idx})">✏️</button>
    `;
    container.appendChild(div);
  });
}

// 割り勘バーのUI状態をcurrentRecordに合わせて同期
function _syncSplitBar(ctx) {
  const r = currentRecord;
  const suffix = ctx === 'stats' ? 'stats' : 'history';
  const toggleEl = document.getElementById('split-toggle-' + suffix);
  const wrapEl   = document.getElementById('split-count-wrap-' + suffix);
  const valEl    = document.getElementById('split-count-val-' + suffix);
  if (!toggleEl) return;
  const on = !!r.split_enabled;
  const count = r.split_count || 2;
  toggleEl.classList.toggle('on', on);
  wrapEl.classList.toggle('hidden', !on);
  valEl.textContent = count;
}

async function toggleSplit(ctx) {
  const r = currentRecord;
  if (!r.split_enabled) {
    r.split_enabled = true;
    r.split_count = r.split_count || 2;
  } else {
    r.split_enabled = false;
  }
  await dbPut('receipts', r);
  _renderDetail();
}

async function changeSplitCount(ctx, delta) {
  const r = currentRecord;
  const newCount = Math.max(2, (r.split_count || 2) + delta);
  r.split_count = newCount;
  await dbPut('receipts', r);
  _renderDetail();
}

// レシート情報編集
var openReceiptEditModal = function() {
  const isIncome = currentRecord.entry_type === 'income';
  // 店舗名 or 収入カテゴリの切り替え
  document.getElementById('edit-store-text-row').style.display = isIncome ? 'none' : 'block';
  document.getElementById('edit-income-cat-row').style.display = isIncome ? 'block' : 'none';
  if (isIncome) {
    const sel = document.getElementById('edit-income-cat-select');
    const cats = loadIncomeCategories();
    sel.innerHTML = cats.map(c => `<option value="${escHtml(c)}"${c === currentRecord.store ? ' selected' : ''}>${escHtml(c)}</option>`).join('');
  } else {
    document.getElementById('edit-store-input').value = currentRecord.store || '';
  }
  document.getElementById('edit-date-input').value = currentRecord.date || '';
  document.getElementById('edit-time-input').value = currentRecord.time || '';
  document.getElementById('receipt-edit-modal').classList.add('open');
};

async function saveReceiptEdit() {
  const modal = document.getElementById('receipt-edit-modal');
  const isPreview = modal.dataset.mode === 'preview';
  const isIncome = !isPreview && currentRecord.entry_type === 'income';

  let newStore;
  if (isIncome) {
    newStore = document.getElementById('edit-income-cat-select').value;
  } else {
    newStore = document.getElementById('edit-store-input').value.trim();
  }
  const newDate  = document.getElementById('edit-date-input').value;
  const newTime  = document.getElementById('edit-time-input').value || null;

  if (isPreview) {
    // parsedData を直接更新
    if (newStore) parsedData.store = newStore;
    if (newDate)  parsedData.date = newDate;
    parsedData.time = newTime;
    closeModal('receipt-edit-modal');
    renderResult(parsedData);
  } else {
    currentRecord.store = newStore || currentRecord.store;
    currentRecord.date  = newDate  || currentRecord.date;
    currentRecord.time  = newTime;
    await dbPut('receipts', currentRecord);
    closeModal('receipt-edit-modal');
    _renderDetail();
  }
}

// ===== Phase1: 大→中→小 3段階カテゴリ連動 =====

// 大カテゴリselectを構築して表示（largeDef あり時のみ）
function buildLargeCategorySelect(currentMiddle) {
  const sel = document.getElementById('edit-item-large-cat');
  const label = document.getElementById('edit-large-label');
  if (!largeDef || largeDef.length === 0) {
    sel.style.display = 'none';
    label.style.display = 'none';
    return;
  }
  sel.style.display = 'block';
  label.style.display = 'block';
  sel.innerHTML = '';

  // currentMiddle が属している大カテゴリを初期選択
  let defaultLargeIdx = 0;
  if (currentMiddle && categoryDef) {
    const midEntry = categoryDef.find(m => m.middle === currentMiddle);
    if (midEntry) {
      const found = largeDef.findIndex(l => l.middles.includes(midEntry.id));
      if (found !== -1) defaultLargeIdx = found;
    }
  }

  largeDef.forEach((ld, i) => {
    const opt = document.createElement('option');
    opt.value = i;
    opt.textContent = ld.large;
    if (i === defaultLargeIdx) opt.selected = true;
    sel.appendChild(opt);
  });
}

// 大カテゴリ変更 → 中カテゴリselectを絞り込む
function onLargeCategoryChange(currentMiddle) {
  const lIdx = parseInt(document.getElementById('edit-item-large-cat').value);
  const ld = largeDef[lIdx];
  const sel = document.getElementById('edit-item-large');
  sel.innerHTML = '';

  // その大カテゴリに属する中カテゴリのid一覧から名前へ変換
  const midEntries = (ld.middles || [])
    .map(id => categoryDef.find(m => m.id === id))
    .filter(Boolean);

  if (midEntries.length === 0) {
    // 大カテゴリに中カテゴリが未登録の場合は全中カテゴリを表示
    categoryDef.forEach(m => {
      const opt = document.createElement('option');
      opt.value = m.middle;
      opt.textContent = m.middle;
      if (m.middle === currentMiddle) opt.selected = true;
      sel.appendChild(opt);
    });
  } else {
    midEntries.forEach(m => {
      const opt = document.createElement('option');
      opt.value = m.middle;
      opt.textContent = m.middle;
      if (m.middle === currentMiddle) opt.selected = true;
      sel.appendChild(opt);
    });
  }

  // 小カテゴリも更新
  onMiddleCategoryChange();
}

// カテゴリ定義から中カテゴリselectを構築（largeDef未使用時のフォールバック）
function buildMiddleCategorySelect(currentMiddle) {
  buildLargeCategorySelect(currentMiddle);

  if (largeDef && largeDef.length > 0) {
    // 大カテゴリ連動モード：大カテゴリselectに基づいて中カテゴリを絞り込む
    onLargeCategoryChange(currentMiddle);
  } else {
    // largeDef なし：全中カテゴリをフラットに表示
    const sel = document.getElementById('edit-item-large');
    sel.innerHTML = '';
    const middles = categoryDef
      ? categoryDef.map(m => m.middle)
      : ['野菜','肉類','魚介類','飲料','麺類','乳製品','パン','菓子','調味料','冷凍食品','その他'];
    middles.forEach(m => {
      const opt = document.createElement('option');
      opt.value = m;
      opt.textContent = m;
      if (m === currentMiddle) opt.selected = true;
      sel.appendChild(opt);
    });
    onMiddleCategoryChange();
  }
}

// item の middle_category を解決してselectを初期値にセット
function buildMiddleCategorySelectFromItem(item) {
  const resolvedName = resolveMiddleName(item);
  buildMiddleCategorySelect(resolvedName);
}

// 中カテゴリ変更時に小カテゴリUIを更新
function onMiddleCategoryChange(currentSmall) {
  const middle = document.getElementById('edit-item-large').value;
  const container = document.getElementById('small-cat-container');
  // currentSmall が引数で渡されていない場合は既存の選択値を保持
  const prevSmall = currentSmall !== undefined
    ? currentSmall
    : (document.getElementById('edit-item-small')?.value || '');
  container.innerHTML = '';

  if (categoryDef) {
    const def = categoryDef.find(m => m.middle === middle);
    const smalls = def ? def.small : ['その他'];
    const sel = document.createElement('select');
    sel.id = 'edit-item-small';
    sel.style.cssText = 'width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text);font-size:14px;font-family:inherit;outline:none;appearance:none;cursor:pointer;';
    smalls.forEach(s => {
      const opt = document.createElement('option');
      opt.value = s;
      opt.textContent = s;
      if (s === prevSmall) opt.selected = true;
      sel.appendChild(opt);
    });
    container.appendChild(sel);
  } else {
    const inp = document.createElement('input');
    inp.type = 'text';
    inp.id = 'edit-item-small';
    inp.placeholder = '例：じゃがいも、緑茶';
    inp.value = prevSmall;
    container.appendChild(inp);
  }
}

// 商品編集
var openItemEditModal = function(idx) {
  currentItemIndex = idx;
  const item = currentRecord.items[idx];
  document.getElementById('edit-item-name').value = item.name || '';
  document.getElementById('edit-item-price').value = item.price || 0;

  // price がマイナス（収入）かどうかで UI を切り替える
  const isIncome = (item.price || 0) < 0 || currentRecord.entry_type === 'income';

  const largeCatSel  = document.getElementById('edit-item-large-cat');
  const largeCatLabel= document.getElementById('edit-large-label');
  const midSel       = document.getElementById('edit-item-large');
  const smallCon     = document.getElementById('small-cat-container');
  const midLabel     = midSel.previousElementSibling; // 「中カテゴリ」ラベル
  const smallLabel   = smallCon.previousElementSibling; // 「小カテゴリ」ラベル

  if (isIncome) {
    // ── 収入モード：大/中/小カテゴリ行を非表示にして収入カテゴリselectを表示 ──
    largeCatSel.style.display   = 'none';
    largeCatLabel.style.display = 'none';
    midSel.style.display        = 'none';
    if (midLabel)   midLabel.style.display   = 'none';
    smallCon.style.display      = 'none';
    if (smallLabel) smallLabel.style.display = 'none';

    // 収入カテゴリselectをmidSel代わりに組み立て
    midSel.innerHTML = '';
    const incomeNames = loadIncomeCategories();
    const currentMid = resolveMiddleName(item) || item.middle_category || '';
    incomeNames.forEach(name => {
      const opt = document.createElement('option');
      opt.value = name;
      opt.textContent = name;
      if (name === currentMid) opt.selected = true;
      midSel.appendChild(opt);
    });
    midSel.style.display = 'block';
    if (midLabel) { midLabel.style.display = 'block'; midLabel.textContent = '収入カテゴリ'; }
  } else {
    // ── 支出モード：通常の大/中/小カテゴリ ──
    if (midLabel)   midLabel.style.display   = 'block';
    if (midLabel)   midLabel.textContent     = '中カテゴリ';
    midSel.style.display = 'block';
    smallCon.style.display = 'block';
    if (smallLabel) smallLabel.style.display = 'block';

    buildMiddleCategorySelectFromItem(item);
    // small_category の初期値を正しくセット
    const smallEl = document.getElementById('edit-item-small');
    if (smallEl && item.small_category) {
      if (smallEl.tagName === 'SELECT') {
        const match = [...smallEl.options].find(o => o.value === item.small_category);
        if (match) smallEl.value = item.small_category;
      } else {
        smallEl.value = item.small_category;
      }
    }
  }

  document.getElementById('item-edit-modal').classList.add('open');
};

async function saveItemEdit() {
  const modal = document.getElementById('item-edit-modal');
  const isPreview = modal.dataset.mode === 'preview';

  const newName  = document.getElementById('edit-item-name').value.trim();
  const newMid   = document.getElementById('edit-item-large').value;
  const newSmall = document.getElementById('edit-item-small')?.value?.trim() || '';
  const newPrice = parseInt(document.getElementById('edit-item-price').value) || 0;

  // price がマイナス（収入）かどうか
  const isIncome = newPrice < 0 || currentRecord.entry_type === 'income';

  if (isPreview) {
    if (previewEditItemIndex !== null) {
      const item = parsedData.items[previewEditItemIndex];
      item.name = newName || item.name;
      item.middle_category = newMid;
      item.middle_category_id = isIncome ? null : (midNameToId(newMid) || null);
      if (!isIncome) item.small_category = newSmall || item.small_category;
      item.price = newPrice;
    } else {
      parsedData.items.push({
        name: newName || '新しい商品',
        middle_category: newMid,
        small_category: isIncome ? '' : newSmall,
        price: newPrice
      });
    }
    parsedData.total = parsedData.items.reduce((s, i) => s + (i.price || 0), 0);
    closeModal('item-edit-modal');
    renderResult(parsedData);
  } else {
    const item = currentRecord.items[currentItemIndex];
    item.name = newName || item.name;
    item.middle_category = newMid;
    item.middle_category_id = isIncome ? null : (midNameToId(item.middle_category) || null);
    if (!isIncome) item.small_category = newSmall || item.small_category;
    item.price = newPrice;
    item.manually_categorized = true;
    currentRecord.total = currentRecord.items.reduce((s, i) => s + (i.price || 0), 0);
    await dbPut('receipts', currentRecord);
    closeModal('item-edit-modal');
    _renderDetail();
  }
}

async function deleteCurrentItem() {
  if (!confirm('この商品を削除しますか？')) return;
  const modal = document.getElementById('item-edit-modal');
  const isPreview = modal.dataset.mode === 'preview';

  if (isPreview) {
    if (previewEditItemIndex !== null) {
      parsedData.items.splice(previewEditItemIndex, 1);
      parsedData.total = parsedData.items.reduce((s, i) => s + (i.price || 0), 0);
    }
    closeModal('item-edit-modal');
    renderResult(parsedData);
  } else {
    currentRecord.items.splice(currentItemIndex, 1);
    currentRecord.total = currentRecord.items.reduce((s, i) => s + (i.price || 0), 0);
    await dbPut('receipts', currentRecord);
    closeModal('item-edit-modal');
    _renderDetail();
  }
}

// レシートごと削除
async function deleteCurrentReceipt() {
  if (!confirm('このレシートを削除しますか？')) return;
  await dbDelete('receipts', currentRecordId);
  if (currentDetailContext === 'stats') {
    // 詳細ビューを閉じる＋historyを戻す
    _closeStatsDetailBase();
    history.back();
  } else {
    // 履歴一覧に戻る＋historyを戻す
    showHistoryList();
    loadHistory();
    history.back();
  }
}

function showHistoryList() {
  document.getElementById('history-list-view').style.display = 'block';
  document.getElementById('history-detail-view').style.display = 'none';
}

function _backFromDetailBase() {
  showHistoryList();
  // 詳細で編集・削除していたら、履歴一覧が古いままなので読み直す
  if (_receiptsDirty) { _receiptsDirty = false; loadHistory(); }
}
var backFromDetail = _backFromDetailBase;

function _closeModalBase(id) {
  const el = document.getElementById(id);
  el.classList.remove('open');
  // プレビューモードをリセット
  if (el.dataset.mode) delete el.dataset.mode;
}
// closeModal は History管理ブロックで上書き定義される
var closeModal = _closeModalBase;

// ===== ユーティリティ =====
// ===== 超低メモリ対応 画像圧縮 (Redmi 12 5G / WebView ~150MB 想定) =====
//
// 【なぜ従来実装がOOMになるか】
//   readAsDataURL → ファイル全体をRAMに展開(例:5MB) + base64文字列(6.7MB)
//   + canvas描画用のImageオブジェクト展開(幅×高×4byte: 4032×3024×4 ≒ 48MB!)
//   → 合計 60MB超 を一瞬で消費 → WebViewのOOM
//
// 【この実装の戦略】
//   1. createImageBitmap でピクセル展開せずにサイズだけ取得
//   2. 出力サイズを 800px 以下に抑えてから canvas に描画
//      → ピクセル展開量: 800×1067×4 ≒ 3.4MB に激減
//   3. JPEG品質 0.7 でさらに圧縮
//   4. canvas を 1×1 に即リセットして GPU/RAM を返す
//   5. createImageBitmap 非対応の場合は FileReader → Image の
//      フォールバックだが、その場合も 600px まで落とす
//   6. それでも失敗したら 400px / 品質0.5 で最終リトライ
//
async function fileToBase64(file) {
  // 出力上限（この数値がピクセル展開RAMに直結する）
  // 800px → 4:3なら800×600 → 4byte×480000 ≒ 1.9MB のみ
  const MAX_SIDE = 800;
  const QUALITY  = 0.70;

  // canvas に img を描画して base64 を返す共通関数
  // canvas は使い終わったら 1×1 にリセットして即解放
  function _drawAndExport(source, srcW, srcH, maxSide, quality) {
    const scale = Math.min(maxSide / Math.max(srcW, srcH, 1), 1);
    const w = Math.max(1, Math.round(srcW * scale));
    const h = Math.max(1, Math.round(srcH * scale));
    const canvas = document.createElement('canvas');
    canvas.width  = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(source, 0, 0, w, h);
    const dataUrl = canvas.toDataURL('image/jpeg', quality);
    // 即解放
    canvas.width = 1; canvas.height = 1;
    return dataUrl;
  }

  // ---- 試行1: createImageBitmap (最も低メモリ) ----
  if (typeof createImageBitmap === 'function') {
    let bitmap = null;
    try {
      // createImageBitmap はデコードのみ行い DOM に乗らないため軽量
      bitmap = await createImageBitmap(file);
      const dataUrl = _drawAndExport(bitmap, bitmap.width, bitmap.height, MAX_SIDE, QUALITY);
      bitmap.close(); // GPU メモリを即解放
      return dataUrl.split(',')[1];
    } catch(e) {
      if (bitmap) try { bitmap.close(); } catch(_) {}
      // 失敗したら次の方法へ
    }
  }

  // ---- 試行2: FileReader → Image (フォールバック) ----
  // readAsDataURL は全データをRAMに乗せるため MAX_SIDE をさらに絞る
  const FALLBACK_MAX  = 600;
  const FALLBACK_QUAL = 0.65;

  async function _viaImage(maxSide, quality) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onerror = reject;
      reader.onload = () => {
        const dataUrl = reader.result;
        const img = new Image();
        img.onerror = reject;
        img.onload = () => {
          try {
            const out = _drawAndExport(img, img.naturalWidth, img.naturalHeight, maxSide, quality);
            img.src = ''; // Image を解放
            // reader の result も GC に任せる
            resolve(out.split(',')[1]);
          } catch(e) { reject(e); }
        };
        img.src = dataUrl;
      };
      reader.readAsDataURL(file);
    });
  }

  try {
    await new Promise(r => setTimeout(r, 30)); // GC の機会
    return await _viaImage(FALLBACK_MAX, FALLBACK_QUAL);
  } catch(e) {
    // ---- 試行3: 最終手段 400px / 0.5 品質 ----
    await new Promise(r => setTimeout(r, 100));
    try {
      return await _viaImage(400, 0.50);
    } catch(e2) {
      throw new Error('メモリ不足のため画像を処理できませんでした。他のアプリを閉じてから再試行してください。');
    }
  }
}

// ===== Gemini APIエラーメッセージ 日本語変換 =====
function toJapaneseGeminiError(err) {
  if (err?._custom) return err.message;
  const msg = (err?.message || String(err)).toLowerCase();
  const status = err?.status;

  // メモリ不足（Android WebView / 低メモリ端末）
  if (/メモリ不足|out.?of.?memory|alloc|oom|memory|compress|canvas/i.test(msg)) {
    return 'メモリ不足で処理できませんでした。他のアプリをすべて閉じてから再試行してください。';
  }

  // 混雑・過負荷・リトライ枯渇
  if (status === 429 || /quota|rate.?limit|resource.?exhausted|too many request/i.test(msg)) {
    return 'APIの使用制限に達しました。しばらく経ってからもう一度お試しください。';
  }
  if (status === 503 || /overload|unavailable|server.?busy|capacity/i.test(msg)) {
    return 'サーバーが混雑しています。しばらく待ってから再試行してください。';
  }
  if (status === 500 || status === 502 || status === 504) {
    return 'サーバーで一時的なエラーが発生しました。しばらく経ってから再試行してください。';
  }

  // モデルが使用不可
  if (/model.*not.*found|not.*support|deprecated|no longer available|invalid model/i.test(msg)) {
    return '選択中のモデルは現在使用できません。設定から別のモデルに切り替えてください。';
  }
  if (/model.*overload|model.*busy/i.test(msg)) {
    return '選択中のモデルが混雑しています。しばらく待つか、設定から別のモデルを試してください。';
  }

  // 認証・APIキー
  if (status === 401 || status === 403 || /api.?key|invalid.*key|unauthorized|permission/i.test(msg)) {
    return 'APIキーが無効または権限がありません。設定を確認してください。';
  }

  // リクエスト不正
  if (status === 400 || /invalid.*request|bad.?request|parse.*error/i.test(msg)) {
    return 'リクエストが不正です。画像やデータを確認してもう一度お試しください。';
  }

  // ネットワーク
  if (/network|fetch|failed to fetch|connection|timeout/i.test(msg)) {
    return 'ネットワークエラーが発生しました。接続を確認してから再試行してください。';
  }

  // JSONパースエラー（Geminiの返答が壊れている）
  if (/json|unexpected token|syntax/i.test(msg)) {
    return '解析結果の読み取りに失敗しました。もう一度試してください。';
  }

  // その他（元のメッセージをそのまま添える）
  return `エラーが発生しました（${err?.message || err}）`;
}

// ===== Gemini API 指数バックオフ リトライラッパー =====
/**
 * Gemini API fetch を指数バックオフ付きでリトライする共通関数
 *
 * @param {string}   url          - fetch 先 URL
 * @param {object}   fetchOptions - fetch() の第2引数（method/headers/body など）
 * @param {object}   [opts]       - リトライ設定
 * @param {number}   [opts.maxRetries=5]      - 最大リトライ回数
 * @param {number}   [opts.baseDelayMs=1000]  - 初回待機時間(ms)
 * @param {Function} [opts.onRetry]           - リトライ直前に呼ばれるコールバック (attempt, delayMs) => void
 * @returns {Promise<Response>} - 成功時の Response オブジェクト
 */
async function callGeminiWithRetry(url, fetchOptions, opts = {}) {
  const maxRetries  = opts.maxRetries  ?? 5;
  const baseDelayMs = opts.baseDelayMs ?? 1000;
  const onRetry     = opts.onRetry     ?? null;

  // リトライ対象とするHTTPステータス
  const RETRYABLE_STATUS = new Set([429, 500, 502, 503, 504]);

  let lastError;
  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    try {
      const res = await fetch(url, fetchOptions);

      // 成功 or リトライ不要なエラー（400, 401, 403 など）はそのまま返す
      if (res.ok || !RETRYABLE_STATUS.has(res.status)) {
        return res;
      }

      // リトライ対象ステータス
      const errBody = await res.json().catch(() => ({}));
      lastError = new Error(errBody.error?.message || `HTTP ${res.status}`);
      lastError.status = res.status;

    } catch (networkErr) {
      // ネットワーク障害もリトライ対象
      lastError = networkErr;
    }

    // 最後の試行だった場合はリトライせずループを抜ける
    if (attempt >= maxRetries) break;

    const delayMs = baseDelayMs * Math.pow(2, attempt);
    if (onRetry) onRetry(attempt + 1, delayMs);
    await new Promise(resolve => setTimeout(resolve, delayMs));
  }

  throw lastError;
}

function showStatus(type, msg) {
  hideStatus();
  if (type === 'loading') {
    document.getElementById('status-loading').style.display = 'flex';
  } else if (type === 'error') {
    const el = document.getElementById('status-error');
    document.getElementById('status-error-msg').textContent = msg;
    const canRetry = (selectedFile || selectedFiles.length > 0);
    document.getElementById('retry-btn').style.display = canRetry ? 'block' : 'none';
    el.style.display = 'block';
  } else if (type === 'success') {
    const el = document.getElementById('status-success');
    el.textContent = msg;
    el.style.display = 'block';
  }
}

function hideStatus() {
  document.getElementById('status-loading').style.display = 'none';
  document.getElementById('status-error').style.display = 'none';
  document.getElementById('status-success').style.display = 'none';
}

// ===== 集計・グラフ (Phase 4) =====
let statsChart = null;
let currentPeriod = 'yearmonth';
let drillMiddle = null;
let drillLarge = null; // Phase4: 大カテゴリドリルダウン
let currentChartType = 'pie';
let currentGroupMode = 'category'; // 'category' or 'store'
let currentStatType = 'expense'; // 'expense' | 'income'

function setStatType(type) {
  currentStatType = type;
  const isExpense = type === 'expense';
  const expBtn = document.getElementById('stat-type-expense');
  const incBtn = document.getElementById('stat-type-income');
  expBtn.className = 'stat-type-btn' + (isExpense ? ' active-expense' : '');
  incBtn.className = 'stat-type-btn' + (!isExpense ? ' active-income' : '');
  const lbl = document.getElementById('stats-total-label');
  if (lbl) lbl.textContent = isExpense ? '合計支出' : '合計収入';
  if (document.getElementById('tab-stats').classList.contains('active')) loadStats();
}

function setGroupMode(mode) {
  currentGroupMode = mode;
  document.getElementById('group-mode-category').classList.toggle('active', mode === 'category');
  document.getElementById('group-mode-store').classList.toggle('active', mode === 'store');
  // 店別モードでは円グラフも使えるが、ドリルダウンは不要なのでリセット
  drillMiddle = null;
  loadStats();
}
let currentChartMap = {};
let currentChartTitle = '';
let currentIsDrill = false;
let currentStoreRecords = []; // 店別モードのタップ処理用

function setChartType(type) {
  currentChartType = type;
  document.getElementById('chart-type-bar').classList.toggle('active', type === 'bar');
  document.getElementById('chart-type-pie').classList.toggle('active', type === 'pie');
  // 店別モード中は renderStoreChart 経由で再描画
  if (currentGroupMode === 'store') {
    loadStats();
    return;
  }
  renderChart(currentChartMap, currentChartTitle, currentIsDrill);
} // ドリルダウン中の中カテゴリ名

function cssVar(name) {
  return getComputedStyle(document.body).getPropertyValue(name).trim();
}

const CHART_COLORS = [
  '#c8ff57','#57d4ff','#ff7f57','#c857ff','#57ffc8',
  '#ffd457','#ff57a8','#57a8ff','#a8ff57','#ff5757',
  '#57ffef','#ffa857','#b457ff','#57ff7f','#ff57d4'
];

// カスタム期間・年月の状態（デフォルト今月）
const _initNow = new Date();
let customPeriodFrom = new Date(_initNow.getFullYear(), _initNow.getMonth(), 1, 0, 0, 0);
let customPeriodTo   = new Date(_initNow.getFullYear(), _initNow.getMonth() + 1, 0, 23, 59, 59);

function getPeriodRange(period) {
  const now = new Date();
  const to = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
  let from;
  if (period === 'week') {
    from = new Date(to);
    from.setDate(from.getDate() - 6);
    from.setHours(0,0,0,0);
  } else if (period === 'month') {
    from = new Date(now.getFullYear(), now.getMonth(), 1);
  } else if (period === 'custom' || period === 'yearmonth') {
    return { from: customPeriodFrom, to: customPeriodTo };
  } else {
    from = new Date(0);
  }
  return { from, to };
}

function filterByPeriod(records, period) {
  const { from, to } = getPeriodRange(period);
  return records.filter(r => {
    if (!r.date) return true;
    const d = new Date(r.date);
    return d >= from && d <= to;
  });
}

function setPeriod(period) {
  currentPeriod = period;
  drillMiddle = null;
  drillLarge = null;
  document.querySelectorAll('.period-btn').forEach(b => b.classList.remove('active'));
  const btn = document.getElementById('period-' + period);
  if (btn) btn.classList.add('active');
  _updatePeriodNav();
  loadStats();
}

// ===== 期間の前後移動（‹ ›） =====
// 月・年間・カスタムのときだけ有効（今週・全期間は基準が固定のため）
function _updatePeriodNav() {
  const enabled = (currentPeriod === 'yearmonth' || currentPeriod === 'yearly' || currentPeriod === 'custom');
  document.querySelectorAll('.period-nav-btn').forEach(b => { b.disabled = !enabled; });
}

function shiftPeriod(delta) {
  if (currentPeriod === 'yearmonth') {
    const d = new Date(customPeriodFrom.getFullYear(), customPeriodFrom.getMonth() + delta, 1);
    applyYearMonthValues(d.getFullYear(), d.getMonth() + 1);
  } else if (currentPeriod === 'yearly') {
    applyYearlyValue(yearlyYear + delta);
  } else if (currentPeriod === 'custom') {
    // 選択中の期間の長さ分だけ前後にずらす
    const step = (customPeriodTo.getTime() - customPeriodFrom.getTime()) + 1000;
    customPeriodFrom = new Date(customPeriodFrom.getTime() + delta * step);
    customPeriodTo   = new Date(customPeriodTo.getTime()   + delta * step);
    loadStats();
  }
}

// 月ボタン：今月へジャンプ
function jumpToCurrentMonth() {
  const now = new Date();
  applyYearMonthValues(now.getFullYear(), now.getMonth() + 1);
}

// 年間ボタン：今年へジャンプ
function jumpToCurrentYear() {
  applyYearlyValue(new Date().getFullYear());
}

function applyYearMonthValues(y, m) {
  customPeriodFrom = new Date(y, m - 1, 1, 0, 0, 0);
  customPeriodTo   = new Date(y, m, 0, 23, 59, 59);
  document.getElementById('period-yearmonth').textContent = monthBtnLabel(y, m);
  currentPeriod = 'yearmonth';
  drillMiddle = null;
  drillLarge = null;
  document.querySelectorAll('.period-btn').forEach(b => b.classList.remove('active'));
  document.getElementById('period-yearmonth').classList.add('active');
  _updatePeriodNav();
  loadStats();
}

function applyYearlyValue(year) {
  yearlyYear = year;
  document.getElementById('period-yearly').textContent = `${yearlyYear}年`;
  currentPeriod = 'yearly';
  drillMiddle = null;
  drillLarge = null;
  document.querySelectorAll('.period-btn').forEach(b => b.classList.remove('active'));
  document.getElementById('period-yearly').classList.add('active');
  _updatePeriodNav();
  loadStats();
}

// ===== 月ボタン初期化（今月をデフォルト適用） =====
function monthBtnLabel(y, m) {
  const thisYear = new Date().getFullYear();
  return y === thisYear ? `${m}月` : `${y}年${m}月`;
}

function initMonthPeriod() {
  if (currentPeriod === 'yearmonth') return;
  const now = new Date();
  const y = now.getFullYear();
  const m = now.getMonth() + 1;
  customPeriodFrom = new Date(y, m - 1, 1, 0, 0, 0);
  customPeriodTo   = new Date(y, m, 0, 23, 59, 59);
  document.getElementById('period-yearmonth').textContent = monthBtnLabel(y, m);
  currentPeriod = 'yearmonth';
  document.querySelectorAll('.period-btn').forEach(b => b.classList.remove('active'));
  document.getElementById('period-yearmonth').classList.add('active');
  _updatePeriodNav();
}

// ===== 年月選択 =====
function openYearMonthModal() {
  // 年セレクトを動的生成（現在年から5年前まで）
  const now = new Date();
  const yearSel = document.getElementById('ym-year');
  yearSel.innerHTML = '';
  for (let y = now.getFullYear(); y >= now.getFullYear() - 5; y--) {
    const opt = document.createElement('option');
    opt.value = y;
    opt.textContent = y + '年';
    yearSel.appendChild(opt);
  }
  // デフォルトを今月に
  yearSel.value = now.getFullYear();
  document.getElementById('ym-month').value = now.getMonth() + 1;
  openModal('yearmonth-modal');
}

function applyYearMonth() {
  const y = parseInt(document.getElementById('ym-year').value);
  const m = parseInt(document.getElementById('ym-month').value);
  customPeriodFrom = new Date(y, m - 1, 1, 0, 0, 0);
  customPeriodTo   = new Date(y, m, 0, 23, 59, 59); // 月末
  closeModal('yearmonth-modal');
  // ボタンラベルを更新
  document.getElementById('period-yearmonth').textContent = monthBtnLabel(y, m);
  currentPeriod = 'yearmonth';
  document.querySelectorAll('.period-btn').forEach(b => b.classList.remove('active'));
  document.getElementById('period-yearmonth').classList.add('active');
  loadStats();
}

// ===== 年間表示 =====
let yearlyYear = new Date().getFullYear();
let yearlyChartType = 'bar';
let yearlyChart = null;
let yearlyDetailChart = null;
let yearlyRecords = [];

function openYearlyModal() {
  const now = new Date();
  const yearSel = document.getElementById('yearly-year');
  yearSel.innerHTML = '';
  for (let y = now.getFullYear(); y >= now.getFullYear() - 10; y--) {
    const opt = document.createElement('option');
    opt.value = y;
    opt.textContent = y + '年';
    yearSel.appendChild(opt);
  }
  yearSel.value = yearlyYear || now.getFullYear();
  openModal('yearly-modal');
}

function applyYearly() {
  yearlyYear = parseInt(document.getElementById('yearly-year').value);
  closeModal('yearly-modal');
  document.getElementById('period-yearly').textContent = `${yearlyYear}年`;
  currentPeriod = 'yearly';
  document.querySelectorAll('.period-btn').forEach(b => b.classList.remove('active'));
  document.getElementById('period-yearly').classList.add('active');
  loadStats();
}

function setYearlyChartType(type) {
  yearlyChartType = type;
  document.getElementById('yearly-chart-type-bar').classList.toggle('active', type === 'bar');
  document.getElementById('yearly-chart-type-line').classList.toggle('active', type === 'line');
  renderYearlyChart(yearlyRecords, yearlyYear);
}

function closeYearlyDetail() {
  document.getElementById('yearly-month-detail').style.display = 'none';
  if (yearlyDetailChart) { yearlyDetailChart.destroy(); yearlyDetailChart = null; }
}

async function loadYearlyStats(year) {
  const all = await dbGetAll('receipts');
  let yearlyRecordsAll = all.filter(r => {
    if (!r.date) return false;
    return new Date(r.date).getFullYear() === year;
  });

  // 収支バー更新（年間全レコード対象）
  updateBalanceBar(yearlyRecordsAll);

  // 支出/収入フィルタ
  if (currentStatType === 'income') {
    yearlyRecords = yearlyRecordsAll.filter(r => r.entry_type === 'income');
  } else {
    yearlyRecords = yearlyRecordsAll.filter(r => !r.entry_type || r.entry_type === 'expense');
  }

  // サマリー更新
  const allItems = yearlyRecords.flatMap(r => r.items || []);
  const total = yearlyRecords.reduce((s, r) => s + effectiveTotal(r), 0);
  document.getElementById('stats-total').textContent = '¥' + Math.abs(total).toLocaleString();
  document.getElementById('stats-count').textContent = yearlyRecords.length + '件';
  document.getElementById('stats-items').textContent = allItems.length + '点';

  // 通常グラフセクション非表示、年間グラフ表示
  document.getElementById('stats-chart-section').style.display = 'none';
  document.getElementById('stats-empty').style.display = 'none';
  document.getElementById('yearly-month-detail').style.display = 'none';

  if (yearlyRecords.length === 0) {
    document.getElementById('yearly-chart-section').style.display = 'none';
    document.getElementById('yearly-empty').style.display = 'block';
    return;
  }
  document.getElementById('yearly-empty').style.display = 'none';
  document.getElementById('yearly-chart-section').style.display = 'block';
  renderYearlyChart(yearlyRecords, year);
}

function renderYearlyChart(records, year) {
  // 月ごとの合計を集計
  const monthTotals = Array(12).fill(0);
  records.forEach(r => {
    const m = new Date(r.date).getMonth(); // 0-11
    monthTotals[m] += Math.abs(effectiveTotal(r));
  });
  const labels = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];

  document.getElementById('yearly-chart-title').textContent = `${year}年 月別${currentStatType === 'income' ? '収入' : '支出'}`;
  document.getElementById('yearly-month-detail').style.display = 'none';
  if (yearlyDetailChart) { yearlyDetailChart.destroy(); yearlyDetailChart = null; }

  if (yearlyChart) { yearlyChart.destroy(); yearlyChart = null; }
  const canvas = document.getElementById('yearly-chart');
  canvas.style.height = '240px';
  const ctx = canvas.getContext('2d');

  const isLine = yearlyChartType === 'line';
  yearlyChart = new Chart(ctx, {
    type: isLine ? 'line' : 'bar',
    data: {
      labels,
      datasets: [{
        data: monthTotals,
        backgroundColor: isLine ? 'rgba(200,255,87,0.15)' : labels.map((_, i) => CHART_COLORS[i % CHART_COLORS.length] + 'cc'),
        borderColor: isLine ? '#c8ff57' : labels.map((_, i) => CHART_COLORS[i % CHART_COLORS.length]),
        borderWidth: isLine ? 2 : 1,
        borderRadius: isLine ? 0 : 4,
        fill: isLine,
        tension: 0.3,
        pointBackgroundColor: '#c8ff57',
        pointRadius: isLine ? 4 : 0,
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false },
        tooltip: {
          callbacks: {
            label: ctx => ' ¥' + ctx.parsed.y.toLocaleString()
          }
        }
      },
      scales: {
        x: { ticks: { color: cssVar('--text'), font: { size: 11 } }, grid: { color: cssVar('--border') } },
        y: { ticks: { color: cssVar('--text-dim'), callback: v => '¥' + v.toLocaleString() }, grid: { color: cssVar('--border') } }
      },
      onClick: (evt, elements) => {
        if (!elements.length) return;
        const monthIdx = elements[0].index;
        showYearlyMonthDetail(records, year, monthIdx);
      }
    }
  });
}

function showYearlyMonthDetail(records, year, monthIdx) {
  // その月のレコードだけ絞り込み
  const monthRecords = records.filter(r => new Date(r.date).getMonth() === monthIdx);
  if (monthRecords.length === 0) return;

  const monthLabel = (monthIdx + 1) + '月';
  document.getElementById('yearly-detail-title').textContent = `${year}年${monthLabel} カテゴリ別支出`;
  document.getElementById('yearly-month-detail').style.display = 'block';

  // カテゴリ別集計（renderStats と同じロジック）
  const _isIncomeStat = currentStatType === 'income';
  const map = {};
  if (largeDef && largeDef.length > 0) {
    const midIdToLarge = {};
    for (const ld of largeDef) {
      for (const midId of (ld.middles || [])) midIdToLarge[midId] = ld.large;
    }
    monthRecords.forEach(r => {
      const ratio = r.split_enabled ? 1 / (r.split_count || 2) : 1;
      (r.items || []).forEach(item => {
        const isIncomeItem = r.entry_type === 'income';
        const midId = isIncomeItem ? null : resolveMidId(item);
        const key = isIncomeItem ? '収入' : ((midId && midIdToLarge[midId]) || '未分類');
        if (_isIncomeStat && key !== '収入') return;
        if (!_isIncomeStat && key === '収入') return;
        map[key] = (map[key] || 0) + Math.abs((item.price || 0) * ratio);
      });
    });
  } else {
    monthRecords.forEach(r => {
      const ratio = r.split_enabled ? 1 / (r.split_count || 2) : 1;
      (r.items || []).forEach(item => {
        const key = resolveMiddleName(item);
        map[key] = (map[key] || 0) + Math.abs((item.price || 0) * ratio);
      });
    });
  }
  Object.keys(map).forEach(k => { map[k] = Math.ceil(Math.abs(map[k])); });

  const sorted = Object.entries(map).sort((a, b) => b[1] - a[1]);
  const labels = sorted.map(e => e[0]);
  const values = sorted.map(e => e[1]);
  const total = values.reduce((s, v) => s + v, 0);

  if (yearlyDetailChart) { yearlyDetailChart.destroy(); yearlyDetailChart = null; }
  const canvas = document.getElementById('yearly-detail-chart');
  const BAR_HEIGHT = 36;
  canvas.style.height = (labels.length * BAR_HEIGHT + 60) + 'px';
  const ctx = canvas.getContext('2d');
  yearlyDetailChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels,
      datasets: [{
        data: values,
        backgroundColor: labels.map((_, i) => CHART_COLORS[i % CHART_COLORS.length] + 'cc'),
        borderColor: labels.map((_, i) => CHART_COLORS[i % CHART_COLORS.length]),
        borderWidth: 1,
        borderRadius: 4,
      }]
    },
    options: {
      indexAxis: 'y',
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false },
        tooltip: {
          callbacks: {
            label: ctx => {
              const val = ctx.parsed.x;
              const pct = total > 0 ? ((val / total) * 100).toFixed(1) : 0;
              return ` ¥${val.toLocaleString()} (${pct}%)`;
            }
          }
        }
      },
      scales: {
        x: { ticks: { color: cssVar('--text-dim'), callback: v => '¥' + v.toLocaleString() }, grid: { color: cssVar('--border') } },
        y: { ticks: { color: cssVar('--text'), font: { size: 12 } }, grid: { color: cssVar('--border') } }
      }
    }
  });

  // スクロールして見えるように
  document.getElementById('yearly-month-detail').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

// ===== カスタム期間 =====
function openCustomPeriodModal() {
  const now = new Date();
  const pad = n => String(n).padStart(2,'0');
  const toStr = d => `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}`;
  // デフォルト：今月1日〜今日
  document.getElementById('custom-from').value = toStr(new Date(now.getFullYear(), now.getMonth(), 1));
  document.getElementById('custom-to').value   = toStr(now);
  openModal('custom-period-modal');
}

function applyCustomPeriod() {
  const fromStr = document.getElementById('custom-from').value;
  const toStr   = document.getElementById('custom-to').value;
  if (!fromStr || !toStr) { alert('開始日と終了日を入力してください'); return; }
  const from = new Date(fromStr + 'T00:00:00');
  const to   = new Date(toStr   + 'T23:59:59');
  if (from > to) { alert('終了日は開始日以降にしてください'); return; }
  customPeriodFrom = from;
  customPeriodTo   = to;
  closeModal('custom-period-modal');
  // ボタンラベルを更新
  const label = `🗓 ${fromStr.slice(5)}〜${toStr.slice(5)}`;
  document.getElementById('period-custom').textContent = label;
  currentPeriod = 'custom';
  document.querySelectorAll('.period-btn').forEach(b => b.classList.remove('active'));
  document.getElementById('period-custom').classList.add('active');
  loadStats();
}

// モーダルを開くユーティリティ（closeModalとペア）
function openModal(id) {
  document.getElementById(id).classList.add('open');
  _pushNavState(id);
}

async function loadStats() {
  drillMiddle = null;
  drillLarge = null;
  document.getElementById('stats-receipt-list-section').style.display = 'none';
  document.getElementById('stats-receipt-list').innerHTML = '';
  document.getElementById('stats-detail-view').style.display = 'none';
  document.getElementById('stats-summary').style.display = '';

  // 年間モード
  if (currentPeriod === 'yearly') {
    document.getElementById('yearly-chart-section').style.display = 'none';
    document.getElementById('yearly-empty').style.display = 'none';
    document.getElementById('stats-chart-section').style.display = 'none';
    try {
      await loadYearlyStats(yearlyYear || new Date().getFullYear());
    } catch(e) { console.error(e); }
    return;
  }

  // 通常モード
  document.getElementById('yearly-chart-section').style.display = 'none';
  document.getElementById('yearly-empty').style.display = 'none';
  document.getElementById('stats-chart-section').style.display = '';
  try {
    const all = await dbGetAll('receipts');
    const records = filterByPeriod(all, currentPeriod);
    updateBalanceBar(records);
    renderStats(records);
  } catch(e) {
    console.error(e);
  }
}

function updateBalanceBar(records) {
  const expenseRecords = records.filter(r => !r.entry_type || r.entry_type === 'expense');
  const incomeRecords  = records.filter(r => r.entry_type === 'income');
  const totalExpense = expenseRecords.reduce((s, r) => s + Math.abs(effectiveTotal(r)), 0);
  const totalIncome  = incomeRecords.reduce((s, r) => s + Math.abs(effectiveTotal(r)), 0);
  const net = totalIncome - totalExpense;

  const expEl = document.getElementById('balance-expense');
  const incEl = document.getElementById('balance-income');
  const netEl = document.getElementById('balance-net');
  if (!expEl) return;

  expEl.textContent = '¥' + totalExpense.toLocaleString();
  incEl.textContent = '¥' + totalIncome.toLocaleString();
  netEl.textContent = (net >= 0 ? '+' : '') + '¥' + net.toLocaleString();
  netEl.className = 'balance-value ' + (net >= 0 ? 'surplus' : 'deficit');
}

// 支出/収入の種別フィルタ（renderStats と編集後の再集計で共用）
function filterByStatType(records) {
  return currentStatType === 'income'
    ? records.filter(r => r.entry_type === 'income')
    : records.filter(r => !r.entry_type || r.entry_type === 'expense');
}

// サマリー（合計・件数・点数）を更新し、対象商品の配列を返す
function updateStatsSummary(records) {
  const allItems = records.flatMap(r => r.items || []);
  const total = records.reduce((s, r) => s + effectiveTotal(r), 0);
  document.getElementById('stats-total').textContent = '¥' + Math.abs(total).toLocaleString();
  document.getElementById('stats-count').textContent = records.length + '件';
  document.getElementById('stats-items').textContent = allItems.length + '点';
  return allItems;
}

function renderStats(records) {
  records = filterByStatType(records);
  const allItems = updateStatsSummary(records);

  const empty = document.getElementById('stats-empty');
  const section = document.getElementById('stats-chart-section');

  if (allItems.length === 0) {
    empty.style.display = 'block';
    section.style.display = 'none';
    destroyChart();
    return;
  }
  empty.style.display = 'none';
  section.style.display = 'block';

  if (currentGroupMode === 'store') {
    // 店別集計：store_defに登録済みの店のみ対象
    const storeDef = loadStoreDefFromStorage(); // [{id, name}, ...]
    const storeIdToName = Object.fromEntries(storeDef.map(s => [s.id, s.name]));
    const storeNameSet = new Set(storeDef.map(s => s.name));
    const storeMap = {};
    records.forEach(r => {
      // id優先でマッチ、なければ名前でフォールバック
      let key = null;
      if (r.store_brand_id && storeIdToName[r.store_brand_id]) {
        key = storeIdToName[r.store_brand_id];
      } else {
        const brand = (r.store_brand && r.store_brand !== r.store ? r.store_brand : null) || r.store || '不明';
        if (storeNameSet.has(brand)) key = brand;
      }
      if (key) {
        storeMap[key] = (storeMap[key] || 0) + Math.abs(effectiveTotal(r));
      }
    });
    // 店別モードではドリルダウンなし・タップでその店のレシート一覧を表示
    renderStoreChart(storeMap, records);
    return;
  }

  // Phase4: 大カテゴリが設定されている場合は大カテゴリ別集計、なければ中カテゴリ別
  const isIncomeStat = currentStatType === 'income';

  // 収入モード：item.middle_category（「給与・賞与」等）を直接集計
  if (isIncomeStat) {
    const incomeMap = {};
    records.forEach(r => {
      const ratio = r.split_enabled ? 1 / (r.split_count || 2) : 1;
      (r.items || []).forEach(item => {
        const key = item.middle_category || 'その他収入';
        incomeMap[key] = (incomeMap[key] || 0) + Math.abs((item.price || 0) * ratio);
      });
    });
    Object.keys(incomeMap).forEach(k => { incomeMap[k] = Math.ceil(incomeMap[k]); });
    renderBarChart(incomeMap, '収入カテゴリ別', false);
    return;
  }

  if (largeDef && largeDef.length > 0) {
    const idToMid = new Map(categoryDef.map(m => [m.id, m]));
    // 中カテゴリid → 大カテゴリ名のマップを構築
    const midIdToLarge = {};
    for (const ld of largeDef) {
      for (const midId of (ld.middles || [])) {
        midIdToLarge[midId] = ld.large;
      }
    }
    const largeMap = {};
    records.forEach(r => {
      const ratio = r.split_enabled ? 1 / (r.split_count || 2) : 1;
      (r.items || []).forEach(item => {
        const midId = resolveMidId(item);
        const largeName = (midId && midIdToLarge[midId]) || '未分類';
        largeMap[largeName] = (largeMap[largeName] || 0) + Math.abs((item.price || 0) * ratio);
      });
    });
    Object.keys(largeMap).forEach(k => { largeMap[k] = Math.ceil(Math.abs(largeMap[k])); });
    renderBarChart(largeMap, '大カテゴリ別支出', false);
  } else {
    // largeDef未設定時は従来の中カテゴリ別
    const midMap = {};
    records.forEach(r => {
      const ratio = r.split_enabled ? 1 / (r.split_count || 2) : 1;
      (r.items || []).forEach(item => {
        const key = resolveMiddleName(item);
        midMap[key] = (midMap[key] || 0) + Math.abs((item.price || 0) * ratio);
      });
    });
    Object.keys(midMap).forEach(k => { midMap[k] = Math.ceil(Math.abs(midMap[k])); });
    renderBarChart(midMap, isIncomeStat ? '中カテゴリ別収入' : '中カテゴリ別支出', false);
  }
}

function renderBarChart(map, title, isDrill) {
  renderChart(map, title, isDrill);
}

function renderChart(map, title, isDrill) {
  // 状態保存（切り替え用）
  currentChartMap = map;
  currentChartTitle = title;
  currentIsDrill = isDrill;

  const sorted = Object.entries(map).sort((a, b) => b[1] - a[1]);
  const labels = sorted.map(e => e[0]);
  const values = sorted.map(e => e[1]);
  const total = values.reduce((s, v) => s + v, 0);

  document.getElementById('chart-title').textContent = title;
  const backBtn = document.getElementById('chart-back-btn');
  const hint = document.getElementById('chart-hint');
  backBtn.classList.toggle('visible', isDrill);

  // 収入モードはドリル不可（大カテゴリのみ）。支出は小カテゴリ段階まで可
  const canDrillFurther = isDrill && drillLarge && !drillMiddle;
  // 店別モード：ドリルダウンではなく、タップでその店のレシート一覧を表示
  const storeTap = currentGroupMode === 'store';
  const canDrill = currentStatType !== 'income' && !storeTap && (!isDrill || canDrillFurther);
  // 収入モード：ドリルの代わりに、タップで該当レシート一覧を表示（支出の小カテゴリ段階と同じ挙動）
  const incomeTap = currentStatType === 'income' && !storeTap && !isDrill;
  hint.style.display = (canDrill || incomeTap || storeTap) ? 'block' : 'none';
  hint.textContent = canDrill ? 'タップすると小カテゴリを表示'
    : (storeTap ? 'タップするとレシート一覧を表示' : 'タップすると該当レシートを表示');

  destroyChart();

  const canvas = document.getElementById('stats-chart');

  if (currentChartType === 'pie') {
    // 円グラフ（引き出し線ラベル付き）
    const itemCount = labels.length;
    const canvasH = Math.max(420, 320 + itemCount * 8);
    canvas.style.height = canvasH + 'px';
    const ctx = canvas.getContext('2d');

    // 引き出し線ラベルをafterDraw hookで描画（Excelスタイル）
    const outerLabelPlugin = {
      id: 'outerLabel',
      afterDraw(chart) {
        const { ctx: c, chartArea, data } = chart;
        const meta = chart.getDatasetMeta(0);
        const cx = (chartArea.left + chartArea.right) / 2;
        const cy = (chartArea.top + chartArea.bottom) / 2;
        const r = meta.data[0] ? meta.data[0].outerRadius : 80;
        const W = chart.width;
        const MARGIN = 4;
        const LINE_GAP = 14; // ラベル最小間隔
        const ELBOW = r + 20; // 折れ点の距離
        const HORIZ = 16;     // 水平線の長さ

        c.save();
        c.font = '11px sans-serif';
        c.textBaseline = 'middle';

        const outerItems = [];

        meta.data.forEach((arc, i) => {
          const val = data.datasets[0].data[i];
          const pct = total > 0 ? ((val / total) * 100).toFixed(1) : 0;
          const pctNum = parseFloat(pct);
          const midAngle = (arc.startAngle + arc.endAngle) / 2;
          const cos = Math.cos(midAngle);
          const sin = Math.sin(midAngle);
          const label = data.labels[i];
          const color = data.datasets[0].borderColor[i];

          if (pctNum >= 10) {
            // 内側ラベル
            const innerR = r * 0.65;
            const tx = cx + cos * innerR;
            const ty = cy + sin * innerR;
            const pctText = pct + '%';

            c.font = 'bold 11px sans-serif';
            const nameW = c.measureText(label).width;
            c.font = '10px sans-serif';
            const pctW = c.measureText(pctText).width;
            const boxW = Math.max(nameW, pctW) + 10;
            const boxH = 30;

            c.fillStyle = 'rgba(0,0,0,0.55)';
            c.beginPath();
            if (c.roundRect) c.roundRect(tx - boxW/2, ty - boxH/2, boxW, boxH, 3);
            else c.rect(tx - boxW/2, ty - boxH/2, boxW, boxH);
            c.fill();

            c.fillStyle = '#ffffff';
            c.textAlign = 'center';
            c.font = 'bold 11px sans-serif';
            c.fillText(label, tx, ty - 7);
            c.font = '10px sans-serif';
            c.fillStyle = '#dddddd';
            c.fillText(pctText, tx, ty + 7);
            c.font = '11px sans-serif';

          } else {
            const isRight = cos > 0 || (Math.abs(cos) < 0.08 && sin < 0);
            // 折れ点（elbow）
            const ex = cx + cos * ELBOW;
            const ey = cy + sin * ELBOW;
            outerItems.push({ i, midAngle, cos, sin, isRight, label, color, pct, pctNum, ex, ey });
          }
        });

        // 左右に分けて重なり回避
        ['right', 'left'].forEach(side => {
          const items = outerItems
            .filter(it => side === 'right' ? it.isRight : !it.isRight)
            .sort((a, b) => a.ey - b.ey); // Y座標で上から順

          if (items.length === 0) return;

          // 各ラベルの目標Y（折れ点のY）
          let ys = items.map(it => it.ey);

          // 重なり解消：上→下パス、下→上パスを繰り返す
          for (let pass = 0; pass < 20; pass++) {
            let changed = false;
            for (let k = 1; k < ys.length; k++) {
              if (ys[k] - ys[k-1] < LINE_GAP) {
                const mid = (ys[k] + ys[k-1]) / 2;
                ys[k-1] = mid - LINE_GAP / 2;
                ys[k]   = mid + LINE_GAP / 2;
                changed = true;
              }
            }
            for (let k = ys.length - 2; k >= 0; k--) {
              if (ys[k+1] - ys[k] < LINE_GAP) {
                const mid = (ys[k+1] + ys[k]) / 2;
                ys[k]   = mid - LINE_GAP / 2;
                ys[k+1] = mid + LINE_GAP / 2;
                changed = true;
              }
            }
            if (!changed) break;
          }

          // 描画
          items.forEach((it, idx) => {
            const labelY = ys[idx];
            const fullText = `${it.label} ${it.pct}%`;
            const textW = c.measureText(fullText).width;

            // 引き出し線：円外縁 → 折れ点(ex,ey) → 水平線終点
            const x1 = cx + it.cos * (r + 2);
            const y1 = cy + it.sin * (r + 2);
            const x2 = it.ex;
            const y2 = labelY; // ずれた後のY
            const x3 = x2 + (it.isRight ? HORIZ : -HORIZ);
            const y3 = y2;

            c.beginPath();
            c.moveTo(x1, y1);
            c.lineTo(x2, y2);
            c.lineTo(x3, y3);
            c.strokeStyle = it.color;
            c.lineWidth = 1.2;
            c.stroke();

            // テキスト（はみ出し防止）
            let tx = x3 + (it.isRight ? 3 : -3);
            if (it.isRight && tx + textW > W - MARGIN) tx = W - textW - MARGIN;
            if (!it.isRight && tx - textW < MARGIN) tx = textW + MARGIN;

            c.fillStyle = cssVar('--text');
            c.textAlign = it.isRight ? 'left' : 'right';
            c.fillText(fullText, tx, y3);
          });
        });

        c.restore();
      }
    };

    statsChart = new Chart(ctx, {
      type: 'pie',
      plugins: [outerLabelPlugin],
      data: {
        labels,
        datasets: [{
          data: values,
          backgroundColor: labels.map((_, i) => CHART_COLORS[i % CHART_COLORS.length] + 'cc'),
          borderColor: labels.map((_, i) => CHART_COLORS[i % CHART_COLORS.length]),
          borderWidth: 1,
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        layout: { padding: { top: 40, bottom: 40, left: 60, right: 60 } },
        plugins: {
          legend: { display: false },
          tooltip: {
            callbacks: {
              label: ctx => {
                const val = ctx.parsed;
                const pct = total > 0 ? ((val / total) * 100).toFixed(1) : 0;
                return ` ¥${val.toLocaleString()} (${pct}%)`;
              }
            }
          }
        },
      onClick: (canDrill || incomeTap || storeTap) ? async (evt, elements) => {
        if (!elements.length) return;
        if (storeTap) await renderStoreReceipts(labels[elements[0].index], currentStoreRecords);
        else if (incomeTap) await renderIncomeCatReceipts(labels[elements[0].index]);
        else await drillDown(labels[elements[0].index]);
      } : null
      }
    });
  } else {
    // 棒グラフ
    const BAR_HEIGHT = 36;
    const PADDING = 60;
    const canvasHeight = labels.length * BAR_HEIGHT + PADDING;
    canvas.style.height = canvasHeight + 'px';

    const ctx = canvas.getContext('2d');
    statsChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels,
        datasets: [{
          data: values,
          backgroundColor: labels.map((_, i) => CHART_COLORS[i % CHART_COLORS.length] + 'cc'),
          borderColor: labels.map((_, i) => CHART_COLORS[i % CHART_COLORS.length]),
          borderWidth: 1,
          borderRadius: 4,
        }]
      },
      options: {
        indexAxis: 'y',
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false },
          tooltip: {
            callbacks: {
              label: ctx => {
                const val = ctx.parsed.x;
                const pct = total > 0 ? ((val / total) * 100).toFixed(1) : 0;
                return ` ¥${val.toLocaleString()} (${pct}%)`;
              }
            }
          }
        },
        scales: {
          x: {
            ticks: { color: cssVar('--text-dim'), callback: v => '¥' + v.toLocaleString() },
            grid: { color: cssVar('--border') }
          },
          y: {
            ticks: { color: cssVar('--text'), font: { size: 12 } },
            grid: { color: cssVar('--border') }
          }
        },
        onClick: (canDrill || incomeTap || storeTap) ? async (evt, elements) => {
          if (!elements.length) return;
          if (storeTap) await renderStoreReceipts(labels[elements[0].index], currentStoreRecords);
          else if (incomeTap) await renderIncomeCatReceipts(labels[elements[0].index]);
          else await drillDown(labels[elements[0].index]);
        } : null
      }
    });

    if (canDrill) {
      canvas.addEventListener('click', _makeMiddleBarHitHandler(labels));
      canvas.addEventListener('touchstart', _makeMiddleBarHitHandler(labels), { passive: true });
    } else if (incomeTap) {
      canvas.addEventListener('click', _makeIncomeBarHitHandler(labels));
      canvas.addEventListener('touchstart', _makeIncomeBarHitHandler(labels), { passive: true });
    }
  }
}

function _makeMiddleBarHitHandler(labels) {
  return async function(e) {
    if (!statsChart) return;
    const yScale = statsChart.scales.y;
    if (!yScale) return;

    const rect = statsChart.canvas.getBoundingClientRect();
    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const offsetY = clientY - rect.top;
    const offsetX = clientX - rect.left;

    if (offsetX >= statsChart.chartArea.left) return;

    for (let i = 0; i < labels.length; i++) {
      const cy = yScale.getPixelForValue(i);
      if (offsetY >= cy - 18 && offsetY <= cy + 18) {
        await drillDown(labels[i]);
        return;
      }
    }
  };
}

// 収入グラフ：Y軸ラベル（カテゴリ名）タップ対応
function _makeIncomeBarHitHandler(labels) {
  return async function(e) {
    if (!statsChart) return;
    const yScale = statsChart.scales.y;
    if (!yScale) return;

    const rect = statsChart.canvas.getBoundingClientRect();
    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const offsetY = clientY - rect.top;
    const offsetX = clientX - rect.left;

    if (offsetX >= statsChart.chartArea.left) return; // バー側はChart.jsのonClickに任せる

    for (let i = 0; i < labels.length; i++) {
      const cy = yScale.getPixelForValue(i);
      if (offsetY >= cy - 18 && offsetY <= cy + 18) {
        await renderIncomeCatReceipts(labels[i]);
        return;
      }
    }
  };
}

// ===== 収入カテゴリ別レシート一覧（支出の小カテゴリ段階と同じ構造） =====
async function renderIncomeCatReceipts(catName) {
  const all = await dbGetAll('receipts');
  const records = filterByPeriod(all, currentPeriod).filter(r => r.entry_type === 'income');

  const matched = records
    .map(r => {
      const matchItems = (r.items || []).filter(item => (item.middle_category || 'その他収入') === catName);
      if (matchItems.length === 0) return null;
      const ratio = r.split_enabled ? 1 / (r.split_count || 2) : 1;
      const matchTotal = matchItems.reduce((s, i) => s + Math.abs((i.price || 0) * ratio), 0);
      return { r, matchItems, matchTotal };
    })
    .filter(Boolean)
    .sort((a, b) => (b.r.id || 0) - (a.r.id || 0));

  const section = document.getElementById('stats-receipt-list-section');
  const titleEl = document.getElementById('stats-receipt-list-title');
  const listEl  = document.getElementById('stats-receipt-list');

  titleEl.textContent = `「${catName}」の収入（${matched.length}件）`;
  const grandTotal = matched.reduce((s, { matchTotal }) => s + matchTotal, 0);
  document.getElementById('stats-receipt-list-total').textContent = grandTotal > 0 ? `¥${Math.ceil(grandTotal).toLocaleString()}` : '';
  listEl.innerHTML = '';

  if (matched.length === 0) {
    listEl.innerHTML = '<div class="empty-state">該当レシートがありません</div>';
  } else {
    matched.forEach(({ r, matchItems, matchTotal }) => {
      const li = document.createElement('li');
      li.className = 'history-item';
      const dateTime = r.date ? (r.time ? `${r.date} ${r.time}` : r.date) : '—';
      const itemNames = matchItems.map(i => i.name || '').filter(Boolean);
      const itemLabel = itemNames.length > 0
        ? (itemNames.length > 3 ? itemNames.slice(0, 3).join('、') + '…' : itemNames.join('、'))
        : '';
      li.innerHTML = `
        <div class="history-left">
          <div class="history-store">${r.store || catName}</div>
          <div class="history-date">${dateTime}</div>
          ${itemLabel ? `<div class="history-date" style="margin-top:3px;color:var(--text-dim);font-size:11px;">${itemLabel}</div>` : ''}
        </div>
        <div class="history-right">
          <div class="history-total">¥${Math.ceil(matchTotal).toLocaleString()}</div>
          <div class="history-count">${matchItems.length}点</div>
        </div>
        <span class="history-chevron">›</span>
      `;
      li.addEventListener('click', () => showDetailFromStats(r));
      listEl.appendChild(li);
    });
  }

  section.style.display = 'block';
  section.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

// ===== 店別グラフ =====
function renderStoreChart(storeMap, records) {
  currentStoreRecords = records;
  currentChartMap = storeMap;
  currentChartTitle = '店別支出';
  currentIsDrill = false;

  document.getElementById('chart-title').textContent = currentChartTitle;
  document.getElementById('chart-back-btn').classList.remove('visible');
  document.getElementById('chart-hint').style.display = 'block';
  document.getElementById('chart-hint').textContent = 'タップするとレシート一覧を表示';
  document.getElementById('stats-receipt-list-section').style.display = 'none';
  document.getElementById('stats-receipt-list').innerHTML = '';

  destroyChart();

  const sorted = Object.entries(storeMap).sort((a, b) => b[1] - a[1]);
  const labels = sorted.map(e => e[0]);
  const values = sorted.map(e => e[1]);
  const total = values.reduce((s, v) => s + v, 0);

  const canvas = document.getElementById('stats-chart');

  if (currentChartType === 'pie') {
    // 円グラフは既存の renderChart に委譲
    renderChart(storeMap, '店別支出', false);
    return;
  }

  // 棒グラフ
  const BAR_HEIGHT = 36;
  const PADDING = 60;
  canvas.style.height = (labels.length * BAR_HEIGHT + PADDING) + 'px';
  const ctx = canvas.getContext('2d');

  statsChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels,
      datasets: [{
        data: values,
        backgroundColor: labels.map((_, i) => CHART_COLORS[i % CHART_COLORS.length] + 'cc'),
        borderColor: labels.map((_, i) => CHART_COLORS[i % CHART_COLORS.length]),
        borderWidth: 1,
        borderRadius: 4,
      }]
    },
    options: {
      indexAxis: 'y',
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false },
        tooltip: {
          callbacks: {
            label: ctx => {
              const val = ctx.parsed.x;
              const pct = total > 0 ? ((val / total) * 100).toFixed(1) : 0;
              return ` ¥${val.toLocaleString()} (${pct}%)`;
            }
          }
        }
      },
      scales: {
        x: {
          ticks: { color: cssVar('--text-dim'), callback: v => '¥' + v.toLocaleString() },
          grid: { color: cssVar('--border') }
        },
        y: {
          ticks: { color: cssVar('--text'), font: { size: 12 } },
          grid: { color: cssVar('--border') }
        }
      },
      onClick: async (evt, elements) => {
        if (!elements.length) return;
        await renderStoreReceipts(labels[elements[0].index], records);
      }
    }
  });

  // Y軸ラベルタップ対応
  const handler = async (e) => {
    if (!statsChart) return;
    const yScale = statsChart.scales.y;
    if (!yScale) return;
    const rect = statsChart.canvas.getBoundingClientRect();
    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const offsetY = clientY - rect.top;
    const offsetX = clientX - rect.left;
    if (offsetX >= statsChart.chartArea.left) return;
    for (let i = 0; i < labels.length; i++) {
      const cy = yScale.getPixelForValue(i);
      if (offsetY >= cy - 18 && offsetY <= cy + 18) {
        await renderStoreReceipts(labels[i], records);
        return;
      }
    }
  };
  canvas.addEventListener('click', handler);
  canvas.addEventListener('touchstart', handler, { passive: true });
}

async function renderStoreReceipts(storeName, records) {
  const storeDef = loadStoreDefFromStorage();
  const storeEntry = storeDef.find(s => s.name === storeName);
  const matched = records
    .filter(r => {
      // id優先でマッチ
      if (storeEntry && r.store_brand_id === storeEntry.id) return true;
      // フォールバック：名前照合
      const key = (r.store_brand && r.store_brand !== r.store ? r.store_brand : null) || r.store || '不明';
      return key === storeName;
    })
    .sort((a, b) => (b.id || 0) - (a.id || 0));

  const section = document.getElementById('stats-receipt-list-section');
  const titleEl = document.getElementById('stats-receipt-list-title');
  const listEl = document.getElementById('stats-receipt-list');

  titleEl.textContent = `「${storeName}」のレシート（${matched.length}件）`;
  const grandTotal = matched.reduce((s, r) => s + Math.abs(effectiveTotal(r)), 0);
  document.getElementById('stats-receipt-list-total').textContent = grandTotal > 0 ? `¥${Math.ceil(grandTotal).toLocaleString()}` : '';
  listEl.innerHTML = '';

  if (matched.length === 0) {
    listEl.innerHTML = '<div class="empty-state">該当レシートがありません</div>';
  } else {
    matched.forEach(r => {
      const li = document.createElement('li');
      li.className = 'history-item';
      const dateTime = r.date ? (r.time ? `${r.date} ${r.time}` : r.date) : '—';
      li.innerHTML = `
        <div class="history-left">
          <div class="history-store">${r.store || '不明'}</div>
          <div class="history-date">${dateTime}</div>
        </div>
        <div class="history-right">
          <div style="display:flex;align-items:center;gap:6px;justify-content:flex-end;">
            <button class="recat-btn" data-rid="${r.id}" title="再カテゴライズ">🔄</button>
            <div class="history-total">¥${effectiveTotal(r).toLocaleString()}</div>
          </div>
          <div class="history-count">${(r.items || []).length}点</div>
        </div>
        <span class="history-chevron">›</span>
      `;
      const recatBtn = li.querySelector('.recat-btn');
      recatBtn.addEventListener('click', e => {
        e.stopPropagation();
        recategorizeReceipt(r.id, recatBtn);
      });
      li.addEventListener('click', () => showDetailFromStats(r));
      listEl.appendChild(li);
    });
  }

  section.style.display = 'block';
  section.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

var drillDown = async function(label) {
  // 収入モードは大カテゴリのみ（中小カテゴリなし）→ドリル不可
  if (currentStatType === 'income') return;

  const all = await dbGetAll('receipts');
  let records = filterByPeriod(all, currentPeriod);
  // 支出/収入フィルタ（renderStatsと同じ）
  if (currentStatType === 'income') {
    records = records.filter(r => r.entry_type === 'income');
  } else {
    records = records.filter(r => !r.entry_type || r.entry_type === 'expense');
  }

  // 大カテゴリ → 中カテゴリのドリル
  if (!drillLarge && largeDef && largeDef.length > 0) {
    drillLarge = label;
    // 集計側と同じロジック：中カテゴリid→大カテゴリ名マップを構築
    const midIdToLarge = {};
    for (const ld of largeDef) {
      for (const midId of (ld.middles || [])) {
        midIdToLarge[midId] = ld.large;
      }
    }
    const isUnclassified = label === '未分類';
    // 集計側と完全に同じロジックで largeMap と midMap を同時に構築
    const _largeCheck = {};
    const midMap = {};
    records.forEach(r => {
      const ratio = r.split_enabled ? 1 / (r.split_count || 2) : 1;
      (r.items || []).forEach(item => {
        const isIncomeItem = r.entry_type === 'income';
        const midId = isIncomeItem ? null : resolveMidId(item);
        const itemLarge = isIncomeItem ? '収入' : ((midId && midIdToLarge[midId]) || '未分類');
        if (currentStatType !== 'income' && isIncomeItem) return;
        _largeCheck[itemLarge] = (_largeCheck[itemLarge] || 0) + Math.abs((item.price || 0) * ratio);
        if (itemLarge !== label) return;
        // 収入アイテムは middle_category を直接中カテゴリ名として使う
        const midName = isIncomeItem
          ? (item.middle_category || 'その他収入')
          : (resolveMiddleName(item) || 'その他');
        midMap[midName] = (midMap[midName] || 0) + Math.abs((item.price || 0) * ratio);
      });
    });
    console.log('[DEBUG] 集計再計算 largeMap:', JSON.stringify(Object.fromEntries(Object.entries(_largeCheck).map(([k,v])=>[k,Math.ceil(v)]))));
    console.log('[DEBUG] midMap合計:', Math.ceil(Object.values(midMap).reduce((s,v)=>s+v,0)), '各:', JSON.stringify(Object.fromEntries(Object.entries(midMap).map(([k,v])=>[k,Math.ceil(v)]))));
    Object.keys(midMap).forEach(k => { midMap[k] = Math.ceil(Math.abs(midMap[k])); });
    currentChartMap = midMap;
    currentChartTitle = `${label} › 中カテゴリ別`;
    currentIsDrill = true;
    renderChart(midMap, currentChartTitle, true);
    await renderLargeDrillReceipts(label, midIdToLarge, records);
    return;
  }

  // 中カテゴリ → 小カテゴリのドリル
  const middle = label;
  drillMiddle = middle;
  const smallMap = {};
  records.forEach(r => {
    const ratio = r.split_enabled ? 1 / (r.split_count || 2) : 1;
    (r.items || [])
      .filter(item => resolveMiddleName(item) === middle)
      .forEach(item => {
        const key = item.small_category || 'その他';
        smallMap[key] = (smallMap[key] || 0) + Math.abs((item.price || 0) * ratio);
      });
  });
  Object.keys(smallMap).forEach(k => { smallMap[k] = Math.ceil(Math.abs(smallMap[k])); });

  // レシートリストをリセット
  document.getElementById('stats-receipt-list-section').style.display = 'none';
  document.getElementById('stats-receipt-list').innerHTML = '';

  // 小カテゴリ棒グラフを描画（クリックでレシートリスト表示）
  currentChartMap = smallMap;
  currentChartTitle = drillLarge ? `${drillLarge} › ${middle} › 小カテゴリ別` : `${middle} › 小カテゴリ別`;
  currentIsDrill = true;

  const sorted = Object.entries(smallMap).sort((a, b) => b[1] - a[1]);
  const labels = sorted.map(e => e[0]);
  const values = sorted.map(e => e[1]);
  const total = values.reduce((s, v) => s + v, 0);

  document.getElementById('chart-title').textContent = currentChartTitle;
  document.getElementById('chart-back-btn').classList.add('visible');
  document.getElementById('chart-hint').style.display = 'block';
  document.getElementById('chart-hint').textContent = 'タップすると該当レシートを表示';

  destroyChart();

  const canvas = document.getElementById('stats-chart');
  const BAR_HEIGHT = 36;
  const PADDING = 60;
  canvas.style.height = (labels.length * BAR_HEIGHT + PADDING) + 'px';
  const ctx = canvas.getContext('2d');

  statsChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels,
      datasets: [{
        data: values,
        backgroundColor: labels.map((_, i) => CHART_COLORS[i % CHART_COLORS.length] + 'cc'),
        borderColor: labels.map((_, i) => CHART_COLORS[i % CHART_COLORS.length]),
        borderWidth: 1,
        borderRadius: 4,
      }]
    },
    options: {
      indexAxis: 'y',
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false },
        tooltip: {
          callbacks: {
            label: ctx => {
              const val = ctx.parsed.x;
              const pct = total > 0 ? ((val / total) * 100).toFixed(1) : 0;
              return ` ¥${val.toLocaleString()} (${pct}%)`;
            }
          }
        }
      },
      scales: {
        x: {
          ticks: { color: cssVar('--text-dim'), callback: v => '¥' + v.toLocaleString() },
          grid: { color: cssVar('--border') }
        },
        y: {
          ticks: { color: cssVar('--text'), font: { size: 12 } },
          grid: { color: cssVar('--border') }
        }
      },
      onClick: async (evt, elements) => {
        if (!elements.length) return;
        await renderSmallDrillReceipts(middle, labels[elements[0].index]);
      }
    }
  });

  // Y軸ラベル（カテゴリ名）タップ対応：Chart.jsのonClickが拾わない領域をcanvasで直接検知
  canvas.addEventListener('click', _makeSmallBarHitHandler(middle, labels));
  canvas.addEventListener('touchstart', _makeSmallBarHitHandler(middle, labels), { passive: true });

  // 中カテゴリに該当するレシート一覧を表示
  await renderMiddleDrillReceipts(middle, records);
}

function _makeSmallBarHitHandler(middle, labels) {
  return async function(e) {
    if (!statsChart) return;
    const yScale = statsChart.scales.y;
    if (!yScale) return;

    const rect = statsChart.canvas.getBoundingClientRect();
    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const offsetY = clientY - rect.top;
    const offsetX = clientX - rect.left;

    // Y軸ラベル領域（バーより左側）のみ対象
    const chartAreaLeft = statsChart.chartArea.left;
    if (offsetX >= chartAreaLeft) return; // バー側はChart.jsのonClickに任せる

    for (let i = 0; i < labels.length; i++) {
      const cy = yScale.getPixelForValue(i);
      if (offsetY >= cy - 18 && offsetY <= cy + 18) {
        await renderSmallDrillReceipts(middle, labels[i]);
        return;
      }
    }
  };
}

async function renderLargeDrillReceipts(large, midIdToLarge, records) {
  const matched = records
    .map(r => {
      const matchItems = (r.items || []).filter(item => {
        const isIncomeItem = r.entry_type === 'income';
        const midId = isIncomeItem ? null : resolveMidId(item);
        const itemLarge = isIncomeItem ? '収入' : ((midId && midIdToLarge[midId]) || '未分類');
        if (currentStatType !== 'income' && isIncomeItem) return false;
        return itemLarge === large;
      });
      if (matchItems.length === 0) return null;
      const ratio = r.split_enabled ? 1 / (r.split_count || 2) : 1;
      const matchTotal = matchItems.reduce((s, i) => s + Math.abs((i.price || 0) * ratio), 0);
      return { r, matchItems, matchTotal };
    })
    .filter(Boolean)
    .sort((a, b) => (b.r.id || 0) - (a.r.id || 0));

  const section = document.getElementById('stats-receipt-list-section');
  const titleEl = document.getElementById('stats-receipt-list-title');
  const listEl  = document.getElementById('stats-receipt-list');

  titleEl.textContent = `「${large}」を含むレシート（${matched.length}件）`;
  const grandTotal = matched.reduce((s, { matchTotal }) => s + matchTotal, 0);
  document.getElementById('stats-receipt-list-total').textContent = grandTotal > 0 ? `¥${Math.ceil(grandTotal).toLocaleString()}` : '';
  listEl.innerHTML = '';

  if (matched.length === 0) {
    listEl.innerHTML = '<div class="empty-state">該当レシートがありません</div>';
  } else {
    matched.forEach(({ r, matchItems, matchTotal }) => {
      const li = document.createElement('li');
      li.className = 'history-item';
      const dateTime = r.date ? (r.time ? `${r.date} ${r.time}` : r.date) : '—';
      const itemNames = matchItems.map(i => i.name || '').filter(Boolean);
      const itemLabel = itemNames.length > 0
        ? (itemNames.length > 3 ? itemNames.slice(0, 3).join('、') + '…' : itemNames.join('、'))
        : '';
      li.innerHTML = `
        <div class="history-left">
          <div class="history-store">${r.store || '不明'}</div>
          <div class="history-date">${dateTime}</div>
          ${itemLabel ? `<div class="history-date" style="margin-top:3px;color:var(--text-dim);font-size:11px;">${itemLabel}</div>` : ''}
        </div>
        <div class="history-right">
          <div style="display:flex;align-items:center;gap:6px;justify-content:flex-end;">
            <button class="recat-btn" data-rid="${r.id}" title="再カテゴライズ">🔄</button>
            <div class="history-total">¥${Math.ceil(matchTotal).toLocaleString()}</div>
          </div>
          <div class="history-count">${matchItems.length}点</div>
        </div>
        <span class="history-chevron">›</span>
      `;
      const recatBtn = li.querySelector('.recat-btn');
      recatBtn.addEventListener('click', e => {
        e.stopPropagation();
        recategorizeReceipt(r.id, recatBtn);
      });
      li.addEventListener('click', () => showDetailFromStats(r));
      listEl.appendChild(li);
    });
  }

  section.style.display = 'block';
  section.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

async function renderMiddleDrillReceipts(middle, records) {
  const matched = records
    .map(r => {
      const matchItems = (r.items || []).filter(item => resolveMiddleName(item) === middle);
      if (matchItems.length === 0) return null;
      const ratio = r.split_enabled ? 1 / (r.split_count || 2) : 1;
      const matchTotal = matchItems.reduce((s, i) => s + Math.abs((i.price || 0) * ratio), 0);
      return { r, matchItems, matchTotal };
    })
    .filter(Boolean)
    .sort((a, b) => (b.r.id || 0) - (a.r.id || 0));

  const section = document.getElementById('stats-receipt-list-section');
  const titleEl = document.getElementById('stats-receipt-list-title');
  const listEl  = document.getElementById('stats-receipt-list');

  titleEl.textContent = `「${middle}」を含むレシート（${matched.length}件）`;
  const grandTotal = matched.reduce((s, { matchTotal }) => s + matchTotal, 0);
  document.getElementById('stats-receipt-list-total').textContent = grandTotal > 0 ? `¥${Math.ceil(grandTotal).toLocaleString()}` : '';
  listEl.innerHTML = '';

  if (matched.length === 0) {
    listEl.innerHTML = '<div class="empty-state">該当レシートがありません</div>';
  } else {
    matched.forEach(({ r, matchItems, matchTotal }) => {
      const li = document.createElement('li');
      li.className = 'history-item';
      const dateTime = r.date ? (r.time ? `${r.date} ${r.time}` : r.date) : '—';
      // 該当商品名をサブテキストとして表示（最大3件）
      const itemNames = matchItems.map(i => i.name || '').filter(Boolean);
      const itemLabel = itemNames.length > 0
        ? (itemNames.length > 3 ? itemNames.slice(0, 3).join('、') + '…' : itemNames.join('、'))
        : '';
      li.innerHTML = `
        <div class="history-left">
          <div class="history-store">${r.store || '不明'}</div>
          <div class="history-date">${dateTime}</div>
          ${itemLabel ? `<div class="history-date" style="margin-top:3px;color:var(--text-dim);font-size:11px;">${itemLabel}</div>` : ''}
        </div>
        <div class="history-right">
          <div style="display:flex;align-items:center;gap:6px;justify-content:flex-end;">
            <button class="recat-btn" data-rid="${r.id}" title="再カテゴライズ">🔄</button>
            <div class="history-total">¥${Math.ceil(matchTotal).toLocaleString()}</div>
          </div>
          <div class="history-count">${matchItems.length}点</div>
        </div>
        <span class="history-chevron">›</span>
      `;
      const recatBtn = li.querySelector('.recat-btn');
      recatBtn.addEventListener('click', e => {
        e.stopPropagation();
        recategorizeReceipt(r.id, recatBtn);
      });
      li.addEventListener('click', () => showDetailFromStats(r));
      listEl.appendChild(li);
    });
  }

  section.style.display = 'block';
  // グラフ（棒グラフ）の先頭へスクロール（レシートリストではなくグラフを先に見せる）
  const chartSection = document.getElementById('stats-chart-section');
  if (chartSection) chartSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

async function renderSmallDrillReceipts(middle, small) {
  const all = await dbGetAll('receipts');
  const records = filterByPeriod(all, currentPeriod);

  // 対象の小カテゴリを含むレシートを抽出し、該当商品の金額合計も計算
  const matched = records
    .map(r => {
      const matchItems = (r.items || []).filter(item =>
        resolveMiddleName(item) === middle &&
        (item.small_category || 'その他') === small
      );
      if (matchItems.length === 0) return null;
      const ratio = r.split_enabled ? 1 / (r.split_count || 2) : 1;
      return { r, matchItems, matchTotal: matchItems.reduce((s, i) => s + Math.abs((i.price || 0) * ratio), 0) };
    })
    .filter(Boolean)
    .sort((a, b) => (b.r.id || 0) - (a.r.id || 0));

  const section = document.getElementById('stats-receipt-list-section');
  const titleEl = document.getElementById('stats-receipt-list-title');
  const listEl = document.getElementById('stats-receipt-list');

  titleEl.textContent = `「${small}」を含むレシート（${matched.length}件）`;
  const grandTotal = matched.reduce((s, { matchTotal }) => s + matchTotal, 0);
  document.getElementById('stats-receipt-list-total').textContent = grandTotal > 0 ? `¥${Math.ceil(grandTotal).toLocaleString()}` : '';
  listEl.innerHTML = '';

  if (matched.length === 0) {
    listEl.innerHTML = '<div class="empty-state">該当レシートがありません</div>';
  } else {
    matched.forEach(({ r, matchItems, matchTotal }) => {
      const li = document.createElement('li');
      li.className = 'history-item';
      const dateTime = r.date ? (r.time ? `${r.date} ${r.time}` : r.date) : '—';
      li.innerHTML = `
        <div class="history-left">
          <div class="history-store">${r.store || '不明'}</div>
          <div class="history-date">${dateTime}</div>
        </div>
        <div class="history-right">
          <div style="display:flex;align-items:center;gap:6px;justify-content:flex-end;">
            <button class="recat-btn" data-rid="${r.id}" title="再カテゴライズ">🔄</button>
            <div class="history-total">¥${Math.ceil(matchTotal).toLocaleString()}</div>
          </div>
          <div class="history-count">${matchItems.length}点</div>
        </div>
        <span class="history-chevron">›</span>
      `;
      const recatBtn = li.querySelector('.recat-btn');
      recatBtn.addEventListener('click', e => {
        e.stopPropagation();
        recategorizeReceipt(r.id, recatBtn);
      });
      li.addEventListener('click', () => {
        showDetailFromStats(r);
      });
      listEl.appendChild(li);
    });
  }

  section.style.display = 'block';
  section.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

// ===== 編集内容の即時反映（集計タブ） =====
// 集計の一覧は「どの条件で開いたか」でしか再現できないため、
// 直近の描画呼び出しを覚えておき、レコードだけ最新に差し替えて描き直す。
let _statsListRerender = null;

// 同じ絞り込み結果のまま、各レコードをDBの最新内容に差し替える（削除済みは除外）
async function _refreshRecords(records) {
  const all = await dbGetAll('receipts');
  const byId = new Map(all.map(r => [r.id, r]));
  return records.map(r => byId.get(r.id)).filter(Boolean);
}

// 内部でDBを読み直す描画関数（引数にレコードを取らない）
const _origRenderIncomeCatReceipts_r = renderIncomeCatReceipts;
renderIncomeCatReceipts = async function(catName) {
  _statsListRerender = () => _origRenderIncomeCatReceipts_r(catName);
  return _origRenderIncomeCatReceipts_r(catName);
};

const _origRenderSmallDrillReceipts_r = renderSmallDrillReceipts;
renderSmallDrillReceipts = async function(middle, small) {
  _statsListRerender = () => _origRenderSmallDrillReceipts_r(middle, small);
  return _origRenderSmallDrillReceipts_r(middle, small);
};

// レコード配列を受け取る描画関数（再描画時に中身を最新へ差し替える）
const _origRenderStoreReceipts_r = renderStoreReceipts;
renderStoreReceipts = async function(storeName, records) {
  _statsListRerender = async () => _origRenderStoreReceipts_r(storeName, await _refreshRecords(records));
  return _origRenderStoreReceipts_r(storeName, records);
};

const _origRenderLargeDrillReceipts_r = renderLargeDrillReceipts;
renderLargeDrillReceipts = async function(large, midIdToLarge, records) {
  _statsListRerender = async () => _origRenderLargeDrillReceipts_r(large, midIdToLarge, await _refreshRecords(records));
  return _origRenderLargeDrillReceipts_r(large, midIdToLarge, records);
};

const _origRenderMiddleDrillReceipts_r = renderMiddleDrillReceipts;
renderMiddleDrillReceipts = async function(middle, records) {
  _statsListRerender = async () => _origRenderMiddleDrillReceipts_r(middle, await _refreshRecords(records));
  return _origRenderMiddleDrillReceipts_r(middle, records);
};

// 詳細ビューで編集・削除した内容を集計タブに反映する
async function _refreshStatsAfterEdit() {
  try {
    const listOpen = document.getElementById('stats-receipt-list-section').style.display !== 'none';
    const drilled  = !!(drillLarge || drillMiddle || currentIsDrill);
    if (!listOpen && !drilled) {
      // 最上位表示ならグラフごと描き直す
      await loadStats();
      return;
    }
    // ドリル中・一覧表示中は位置を保つため、サマリーと開いている一覧だけを更新する
    const all = await dbGetAll('receipts');
    const records = filterByPeriod(all, currentPeriod);
    updateBalanceBar(records);
    updateStatsSummary(filterByStatType(records));
    if (_statsListRerender) await _statsListRerender();
  } catch (e) {
    console.warn('集計の再描画に失敗', e);
  }
}

async function _drillUpBase() {
  await _drillUpInner();
}
var drillUp = _drillUpBase;

function destroyChart() {
  if (statsChart) {
    statsChart.destroy();
    statsChart = null;
  }
  // canvasを新要素に置き換えてリスナーを完全リセット
  const old = document.getElementById('stats-chart');
  if (old) {
    const fresh = document.createElement('canvas');
    fresh.id = 'stats-chart';
    old.parentNode.replaceChild(fresh, old);
  }
}


// ===== 統合History管理（PC Esc / スマホ・ブラウザ戻るボタン 両対応） =====
// Phase7-4: 全モーダル・詳細ビュー・ドリルダウンに対応
//
// 方針:
//   - 画面を「開く」ときに history.pushState でスタックを積む
//   - 「閉じる」ボタンを押したとき → history.back() でスタックを戻す
//   - ブラウザ/スマホの戻るボタン → popstate で対応するUIを閉じる
//   - PCのEscキー → 同じ優先順位で閉じる
//   - _handlingPopstate フラグで二重back防止

let _handlingPopstate = false;

// historyスタックに状態を積む
function _pushNavState(type) {
  history.pushState({ navType: type }, '');
}

// UIを「純粋に閉じるだけ」の内部関数群（history操作なし）
// これらをpopstateハンドラとEscから呼ぶ
function _closeModalInner(id) {
  const el = document.getElementById(id);
  el.classList.remove('open');
  if (el.dataset.mode) delete el.dataset.mode;
  // 案内元のモーダルを閉じたら案内トーストも下げる
  if (id === 'user-modal') hideOnboardToast();
}
function _closeSettingsInner() {
  document.getElementById('settings-modal').classList.remove('open');
  hideOnboardToast();
  if (document.getElementById('tab-stats').classList.contains('active')) {
    loadStats();
  }
  // 設定内でカテゴリを編集した場合に備え、追加タブのカテゴリUIを作り直す
  refreshManualCategoryUI();
}
function _closeCategoryEditorInner() { /* 中小エディタ廃止済み */ }

function syncLargeDefOrderFromCategoryDef() {
  if (!categoryDef || !largeDef) return;
  const idToOrder = new Map(categoryDef.map((m, i) => [m.id, i]));
  let changed = false;
  for (const l of largeDef) {
    const sorted = [...(l.middles || [])].sort((a, b) => {
      const ia = idToOrder.has(a) ? idToOrder.get(a) : Infinity;
      const ib = idToOrder.has(b) ? idToOrder.get(b) : Infinity;
      return ia - ib;
    });
    if (sorted.some((id, i) => id !== l.middles[i])) {
      l.middles = sorted;
      changed = true;
    }
  }
  if (changed) saveLargeDef();
}
function _closeStatsDetailInner() {
  document.getElementById('stats-detail-view').style.display = 'none';
  document.getElementById('stats-summary').style.display = '';
  document.getElementById('stats-chart-section').style.display = '';
  document.getElementById('stats-receipt-list-section').style.display = 'block';
  const section = document.getElementById('stats-receipt-list-section');
  setTimeout(() => section.scrollIntoView({ behavior: 'smooth', block: 'start' }), 50);
}
function _backFromDetailInner() {
  document.getElementById('history-list-view').style.display = 'block';
  document.getElementById('history-detail-view').style.display = 'none';
}
async function _drillUpInner() {
  document.getElementById('stats-receipt-list-section').style.display = 'none';
  document.getElementById('stats-receipt-list').innerHTML = '';
  const all = await dbGetAll('receipts');
  const records = filterByPeriod(all, currentPeriod);

  // 小カテゴリ表示中 → 中カテゴリ表示に戻る
  if (drillMiddle && drillLarge) {
    drillMiddle = null;
    // drillLargeの大カテゴリに属する中カテゴリ集計を再表示
    const ldEntry = largeDef.find(ld => ld.large === drillLarge);
    const midIds = new Set(ldEntry ? ldEntry.middles : []);
    const midMap = {};
    records.forEach(r => {
      const ratio = r.split_enabled ? 1 / (r.split_count || 2) : 1;
      (r.items || []).forEach(item => {
        const midName = resolveMiddleName(item);
        const midEntry = categoryDef.find(m => m.middle === midName);
        if (!midEntry || !midIds.has(midEntry.id)) return;
        midMap[midName] = (midMap[midName] || 0) + Math.abs((item.price || 0) * ratio);
      });
    });
    Object.keys(midMap).forEach(k => { midMap[k] = Math.ceil(Math.abs(midMap[k])); });
    currentChartTitle = `${drillLarge} › 中カテゴリ別`;
    currentIsDrill = true;
    renderChart(midMap, currentChartTitle, true);
    return;
  }

  // 中カテゴリ表示中（largeDef使用時）→ 大カテゴリ表示に戻る
  if (drillLarge) {
    drillLarge = null;
    drillMiddle = null;
    currentIsDrill = false;
    renderStats(records);
    return;
  }

  // largeDef未使用時の従来動作（中→トップ）
  drillMiddle = null;
  drillLarge = null;
  currentIsDrill = false;
  renderStats(records);
}

// 優先度順に「今開いている最前面のUI」を閉じる共通ロジック
async function _closeTopLayer() {
  if (document.getElementById('delete-auth-modal').classList.contains('open')) {
    _closeModalInner('delete-auth-modal');
    document.getElementById('delete-auth-password').value = '';
    if (_deleteAuthResolve) { const r = _deleteAuthResolve; _deleteAuthResolve = null; r(false); }
    return;
  }
  if (document.getElementById('delete-lock-modal').classList.contains('open')) {
    _closeModalInner('delete-lock-modal'); return;
  }
  if (document.getElementById('income-cat-edit-modal').classList.contains('open')) {
    _closeModalInner('income-cat-edit-modal'); _incomeCatEditIndex = null; return;
  }
  if (document.getElementById('add-store-modal').classList.contains('open')) {
    _closeModalInner('add-store-modal'); return;
  }
  if (document.getElementById('add-small-modal').classList.contains('open')) {
    _closeModalInner('add-small-modal'); return;
  }
  if (document.getElementById('add-middle-modal').classList.contains('open')) {
    _closeModalInner('add-middle-modal'); return;
  }
  if (document.getElementById('item-edit-modal').classList.contains('open')) {
    _closeModalInner('item-edit-modal'); return;
  }
  if (document.getElementById('receipt-edit-modal').classList.contains('open')) {
    _closeModalInner('receipt-edit-modal'); return;
  }
  if (document.getElementById('yearmonth-modal').classList.contains('open')) {
    _closeModalInner('yearmonth-modal'); return;
  }
  if (document.getElementById('yearly-modal').classList.contains('open')) {
    _closeModalInner('yearly-modal'); return;
  }
  if (document.getElementById('custom-period-modal').classList.contains('open')) {
    _closeModalInner('custom-period-modal'); return;
  }
  if (document.getElementById('user-modal').classList.contains('open')) {
    _closeModalInner('user-modal'); return;
  }
  if (document.getElementById('move-middle-modal').classList.contains('open')) {
    _closeModalInner('move-middle-modal'); return;
  }
  if (document.getElementById('add-large-modal').classList.contains('open')) {
    _closeModalInner('add-large-modal'); return;
  }
  if (document.getElementById('add-middle-to-large-modal').classList.contains('open')) {
    _closeModalInner('add-middle-to-large-modal'); return;
  }
  if (document.getElementById('income-cat-editor-overlay').classList.contains('open')) {
    _closeIncomeCatEditorInner(); return;
  }
  if (document.getElementById('large-editor-overlay').classList.contains('open')) {
    _closeLargeEditorInner(); return;
  }
  if (document.getElementById('store-editor-overlay').classList.contains('open')) {
    _closeStoreEditorInner(); return;
  }
  if (document.getElementById('settings-modal').classList.contains('open')) {
    _closeSettingsInner(); return;
  }
  if (document.getElementById('stats-detail-view').style.display !== 'none') {
    _closeStatsDetailInner(); return;
  }
  if (document.getElementById('history-detail-view').style.display !== 'none') {
    _backFromDetailInner(); return;
  }
  if (currentIsDrill || drillLarge || drillMiddle) {
    await _drillUpInner(); return;
  }
}

// --- 「開く」系関数：pushState を付与 ---

function openSettingsWithHistory() {
  openSettings();
  _pushNavState('settings');
}

function openUserModalWithHistory() {
  openUserModal();
  _pushNavState('user-modal');
}

// --- 「閉じる」系関数：history.back() を呼ぶ（popstateが実際の閉じ処理を行う） ---
// 元の closeModal / closeSettings / closeCategoryEditor を上書き

const _origCloseModal_base = closeModal;
closeModal = function(id) {
  if (_handlingPopstate) { _closeModalInner(id); return; }
  history.back(); // → popstateで _closeModalInner が呼ばれる
};

const _origCloseSettings_base = closeSettings;
closeSettings = function() {
  if (_handlingPopstate) { _closeSettingsInner(); return; }
  history.back();
};

// large-editor も同パターンでラップ
const _origCloseLargeEditor_base = closeLargeEditor;
closeLargeEditor = function() {
  if (_handlingPopstate) { _closeLargeEditorInner(); return; }
  history.back();
};

// store-editor も同パターンでラップ
function _closeStoreEditorInner() { _closeStoreEditorBase(); }
const _origCloseStoreEditor_base = closeStoreEditor;
closeStoreEditor = function() {
  if (_handlingPopstate) { _closeStoreEditorInner(); return; }
  history.back();
};

const _origCloseStatsDetail_base = closeStatsDetail;
closeStatsDetail = function() {
  if (_handlingPopstate) { _closeStatsDetailInner(); return; }
  history.back();
};

const _origBackFromDetail_base = backFromDetail;
backFromDetail = function() {
  if (_handlingPopstate) { _backFromDetailInner(); return; }
  history.back();
};

const _origDrillUp_base = drillUp;
drillUp = async function() {
  if (_handlingPopstate) { await _drillUpInner(); return; }
  history.back();
};

// --- 「開く」系関数：pushState を付与（モーダル・詳細ビュー） ---
// HTML の onclick で直接呼ばれるため、呼び出し後に pushState を追加する形で対応

const _origOpenItemEditModal_b = openItemEditModal;
openItemEditModal = function(idx) {
  _origOpenItemEditModal_b(idx);
  _pushNavState('item-edit-modal');
};

const _origOpenReceiptEditModal_b = openReceiptEditModal;
openReceiptEditModal = function() {
  _origOpenReceiptEditModal_b();
  _pushNavState('receipt-edit-modal');
};

// プレビュー編集モーダルにも pushState を追加
// （スキャン後の解析結果編集時に closeModal→history.back() と対応させる）
const _origOpenPreviewItemEdit_b = openPreviewItemEdit;
openPreviewItemEdit = function(idx) {
  _origOpenPreviewItemEdit_b(idx);
  _pushNavState('item-edit-modal');
};

const _origOpenPreviewReceiptEdit_b = openPreviewReceiptEdit;
openPreviewReceiptEdit = function() {
  _origOpenPreviewReceiptEdit_b();
  _pushNavState('receipt-edit-modal');
};

const _origOpenAddMiddleModal_b = openAddMiddleModal;
openAddMiddleModal = function() {
  _origOpenAddMiddleModal_b();
  _pushNavState('add-middle-modal');
};

const _origOpenEditMiddleModal_b = openEditMiddleModal;
openEditMiddleModal = function(mIdx) {
  _origOpenEditMiddleModal_b(mIdx);
  _pushNavState('add-middle-modal');
};

const _origOpenAddStoreModal_b = openAddStoreModal;
openAddStoreModal = function() {
  _origOpenAddStoreModal_b();
  _pushNavState('add-store-modal');
};

const _origOpenEditStoreModal_b = openEditStoreModal;
openEditStoreModal = function(idx) {
  _origOpenEditStoreModal_b(idx);
  _pushNavState('add-store-modal');
};

// openAddSmallModal / openEditSmallModal の History API ラップは
// 本定義（var openAddSmallModal = ...）の直後に移動済み

// showDetail / showDetailFromStats / drillDown も pushState を追加
const _origShowDetail_b = showDetail;
showDetail = async function(r) {
  await _origShowDetail_b(r);
  _pushNavState('history-detail');
};

const _origShowDetailFromStats_b = showDetailFromStats;
showDetailFromStats = async function(r) {
  await _origShowDetailFromStats_b(r);
  _pushNavState('stats-detail');
};

const _origDrillDown_b = drillDown;
drillDown = async function(middle) {
  await _origDrillDown_b(middle);
  _pushNavState('stats-drill');
};

// --- popstate ハンドラ（ブラウザ/スマホの戻るボタン） ---
let _skipNextCloseTopLayer = false;
window.addEventListener('popstate', async e => {
  if (_skipNextCloseTopLayer) { _skipNextCloseTopLayer = false; return; }
  _handlingPopstate = true;
  try {
    await _closeTopLayer();
  } finally {
    _handlingPopstate = false;
  }
});

// --- PCはEscキーでも閉じる（history.back()経由で統一） ---
document.addEventListener('keydown', e => {
  if (e.key !== 'Escape') return;
  // 何か開いていれば history.back() → popstate → _closeTopLayer の流れで閉じる
  const anyOpen =
    document.getElementById('add-small-modal').classList.contains('open') ||
    document.getElementById('add-middle-modal').classList.contains('open') ||
    document.getElementById('item-edit-modal').classList.contains('open') ||
    document.getElementById('receipt-edit-modal').classList.contains('open') ||
    document.getElementById('yearmonth-modal').classList.contains('open') ||
    document.getElementById('custom-period-modal').classList.contains('open') ||
    document.getElementById('user-modal').classList.contains('open') ||
    document.getElementById('large-editor-overlay').classList.contains('open') ||
    document.getElementById('add-large-modal').classList.contains('open') ||
    document.getElementById('add-middle-to-large-modal').classList.contains('open') ||
    document.getElementById('move-middle-modal').classList.contains('open') ||
    document.getElementById('store-editor-overlay').classList.contains('open') ||
    document.getElementById('settings-modal').classList.contains('open') ||
    document.getElementById('stats-detail-view').style.display !== 'none' ||
    document.getElementById('history-detail-view').style.display !== 'none' ||
    currentIsDrill;
  if (anyOpen) history.back();
});

// ===== 初期化 =====
async function initApp(isResume) {
  // localStorageの値で先にヘッダー表示を確定させる。
  // このあとのIDB復元が遅れても「未選択」のまま固まらないようにするため。
  {
    const preUser = getCurrentUser();
    const label = document.getElementById('current-user-label');
    if (preUser && label) label.textContent = preUser;
  }

  // ── IDB → localStorage 復元 ──
  // localStorageはリロード・スキーム変更・プライベートブラウズで消えることがある。
  // IDBは永続的なため、起動のたびにIDB値でlocalStorageを上書き同期する。
  // ただしここで待ち続けると初期化全体が止まるので、必ず時間で打ち切る。
  try {
    const restore = Promise.all([
      _loadSettingIDB(CURRENT_USER_KEY),
      _loadSettingIDB(USERS_KEY),
      _loadSettingIDB('app_theme'),
      _loadSettingIDB('gemini_api_key'),
      _loadSettingIDB(PREFS_KEY),
    ]);
    const timeout = new Promise(res => setTimeout(() => res(null), 5000));
    const restored = await Promise.race([restore, timeout]);
    if (restored) {
      const [idbUser, idbUsers, idbTheme, idbKey, idbPrefs] = restored;
      // IDBに値があれば常にlocalStorageへ同期（localStorageが古くても上書き）
      if (idbUser)  localStorage.setItem(CURRENT_USER_KEY, idbUser);
      if (idbUsers) localStorage.setItem(USERS_KEY, idbUsers);
      if (idbTheme) localStorage.setItem('app_theme', idbTheme);
      if (idbKey)   localStorage.setItem('gemini_api_key', idbKey);
      if (idbPrefs) { localStorage.setItem(PREFS_KEY, idbPrefs); _prefs = null; }
    } else {
      console.warn('IDB設定の復元がタイムアウトしました（localStorageの値で続行）');
    }
  } catch(e) {
    console.warn('IDB設定の復元に失敗:', e);
  }

  // historyベースエントリを確保（初回のみ）
  if (!isResume && !history.state) {
    history.replaceState({ navType: 'base' }, '');
  }
  // 分割モードの初期UI描画（初回のみ）
  if (!isResume) renderMultiPreview();
  // カテゴリは常にロード（ユーザー不要・initManualEntry より先に）
  loadCategoryDefFromStorage();
  loadLargeDefFromStorage();
  // 手入力セクション初期化（初回のみ・カテゴリロード後）
  if (!isResume) initManualEntry();
  updateStoreDefStatus();

  // ユーザー復元（IDB→localStorage同期済みなので直接取得できる）
  let currentUser = getCurrentUser();

  // テーマ復元
  _applyThemeClass();

  // 永続ストレージの申請（初回のみ・失敗しても続行）
  if (!isResume) { requestPersistentStorage(); }
  updateDataSafetyBanner();

  if (currentUser) {
    document.getElementById('current-user-label').textContent = currentUser;
    // DB接続が切れていたら再接続（最大3回）。
    // ここで例外を投げると initApp 全体が中断し、db=null のまま操作不能になるため、
    // 失敗しても続行する。以降のDB操作は ensureDB() が自動で開き直す。
    for (let attempt = 1; attempt <= 3; attempt++) {
      try {
        db = await openDBOnce();
        break;
      } catch (e) {
        console.warn(`DB接続失敗（${attempt}/3）`, e);
        if (attempt < 3) await new Promise(r => setTimeout(r, 600));
      }
    }
    // 復帰時は表示中のタブを再描画して真っ暗を防ぐ
    if (isResume) {
      loadHistory();
      if (document.getElementById('tab-stats').classList.contains('active')) { initMonthPeriod(); loadStats(); }
    }
  }

  // 初期セットアップ（ユーザー追加 → APIキー保存）が未完了なら案内する。
  // 復帰時は毎回出さない。
  if (!isResume) setTimeout(promptSetup, 400);

  // ── URLトリガーによるエクスポート ──
  // 「…/#export」で開かれたら書き出す。自動判断ではなく、MacroDroid等からの
  // 明示的な命令を受ける入口。エクスポートボタンを押すのと同じ動作。
  if (!isResume && location.hash === '#export') {
    try { history.replaceState(history.state, '', location.pathname + location.search); } catch (_) {}
    setTimeout(() => { exportData(); }, 800); // DB接続の完了を待つ
  }
}

// 履歴の初期表示を設定に合わせる（ここでは表示切り替えのみで読み込みはしない。
// 読み込みは switchTab('history') が _historyView を見て行う）
function applyHistoryViewPref() {
  _historyView = getPref('historyView') === 'list' ? 'list' : 'cal';
  const isList = _historyView === 'list';
  document.getElementById('view-btn-list').classList.toggle('active', isList);
  document.getElementById('view-btn-cal').classList.toggle('active', !isList);
  document.getElementById('history-list-body').style.display = isList ? 'block' : 'none';
  document.getElementById('history-cal-body').style.display  = isList ? 'none' : 'block';
}
applyHistoryViewPref();

renderBuildLabel();

(async () => {
  await initApp(false);
  // initApp の中で IDB から設定が復元されることがあるので、
  // localStorage が消えていたケースに備えてここでもう一度適用する。
  applyHistoryViewPref();
  updateUploadLabelByPref();
  // 起動時に開くタブ（DB接続完了後に切り替える）
  const startTab = getPref('startTab');
  if (startTab === 'history' || startTab === 'stats') switchTab(startTab);
})();

// 年間ボタンの初期ラベルを今年に設定
document.getElementById('period-yearly').textContent = `${yearlyYear}年`;
// 月ボタンの初期ラベルを今月に設定
(function() {
  const now = new Date();
  document.getElementById('period-yearmonth').textContent = monthBtnLabel(now.getFullYear(), now.getMonth() + 1);
})();

// #file-input（通常モード）クリック時にユーザー名トーストを表示
// 一度だけ登録すればよいため初回起動後に設定
document.getElementById('file-input').addEventListener('click', showUserToast);

// 通常モード：長押しで「ファイルから選択」を有効化
// 設定に従って「タップ側」と「長押し側」を入れ替える。
// タップ側はゾーン全面を覆う input（#file-input）なので、
// capture 属性を付け外しして役割を入れ替える。
(function () {
  const zone = document.getElementById('upload-zone');
  const tapInput  = document.getElementById('file-input');
  const longInput = document.getElementById('file-input-gallery');
  if (getPref('cameraMode') === 'gallery') {
    tapInput.removeAttribute('capture');       // タップ＝ファイル選択
    longInput.setAttribute('capture', 'environment'); // 長押し＝撮影
  }
  setupLongPressPicker(zone, tapInput, longInput);
  updateUploadLabelByPref();
})();

// アプリをバックグラウンドから復帰したとき（タブ切り替え・スリープ解除など）
document.addEventListener('visibilitychange', async () => {
  if (document.visibilityState === 'visible') {
    await initApp(true);
  }
});

// bfcache（戻るボタンなど）からの復帰
window.addEventListener('pageshow', async (e) => {
  if (e.persisted) {
    await initApp(true);
  }
});

// ===== カテゴリエディタ =====
let catEditMiddleIndex = null; // 編集中の中カテゴリindex（nullなら新規）
let catEditSmallIndex = null;  // 編集中の小カテゴリindex（nullなら新規）
let catEditSmallMiddleIndex = null; // 小カテゴリ編集時の親中カテゴリindex

function saveCategoryDef() {
  localStorage.setItem('category_def', JSON.stringify(categoryDef));
  updateCategoryStatus();
}

function openCategoryEditor() { /* 廃止済み：商品カテゴリエディタ(large-editor)に統合 */ }
function _closeCategoryEditorBase() { /* 廃止済み */ }
var closeCategoryEditor = _closeCategoryEditorBase;

function resetCategoryToDefault() {
  if (!confirm('カテゴリをデフォルトに戻しますか？\n現在の変更はすべて失われます。')) return;
  categoryDef = JSON.parse(JSON.stringify(DEFAULT_CATEGORY_DEF));
  saveCategoryDef();
  renderCatEditorList();
}

function exportCategoryDef() {
  const json = JSON.stringify(categoryDef, null, 2);
  const blob = new Blob([json], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  const now = new Date();
  const pad = n => String(n).padStart(2, '0');
  const dateStr = `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())}_${now.getHours()}:${pad(now.getMinutes())}`;
  a.href = url;
  a.download = `カテゴリ一覧_${dateStr}.json`;
  a.click();
  URL.revokeObjectURL(url);
}

// ===== Phase2: カテゴリ編集 アコーディオン対応 =====
// 展開中の中カテゴリindexを管理（Set で複数展開も可能、初期は全閉）
let _catEditorOpenSet = new Set();

function renderCatEditorList() {
  const container = document.getElementById('cat-editor-list');
  container.innerHTML = '';
  (categoryDef || []).forEach((mid, mIdx) => {
    const isOpen = _catEditorOpenSet.has(mIdx);

    const wrap = document.createElement('div');
    wrap.className = 'middle-card';
    wrap.dataset.midx = mIdx;
    wrap.style.cssText = 'background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden;';

    // ── 中カテゴリヘッダー（タップで展開/折りたたみ） ──
    const header = document.createElement('div');
    header.style.cssText = 'display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--surface2);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;';
    header.setAttribute('role', 'button');
    header.setAttribute('aria-expanded', isOpen ? 'true' : 'false');

    // 展開アイコン
    const chevron = document.createElement('span');
    chevron.className = 'cat-chevron';
    chevron.style.cssText = `font-size:12px;color:var(--text-dim);transition:transform 0.2s;transform:${isOpen ? 'rotate(90deg)' : 'rotate(0deg)'};flex-shrink:0;`;
    chevron.textContent = '▶';

    const nameSpan = document.createElement('span');
    nameSpan.style.cssText = 'flex:1;font-size:14px;font-weight:700;';
    nameSpan.textContent = mid.middle;

    const countSpan = document.createElement('span');
    countSpan.style.cssText = 'font-size:11px;color:var(--text-dim);flex-shrink:0;';
    countSpan.textContent = `小${mid.small.length}件`;

    const editBtn = document.createElement('button');
    editBtn.style.cssText = 'background:none;border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-size:13px;padding:4px 8px;border-radius:6px;flex-shrink:0;';
    editBtn.textContent = '✏️';
    editBtn.title = '中カテゴリを編集';
    editBtn.onclick = (e) => { e.stopPropagation(); openEditMiddleModal(mIdx); };

    const delBtn = document.createElement('button');
    delBtn.style.cssText = 'background:none;border:1px solid var(--danger);color:var(--danger);cursor:pointer;font-size:13px;padding:4px 8px;border-radius:6px;flex-shrink:0;';
    delBtn.textContent = '🗑';
    delBtn.title = '中カテゴリを削除';
    delBtn.onclick = (e) => { e.stopPropagation(); deleteMiddleCategory(mIdx); };

    header.appendChild(chevron);
    header.appendChild(nameSpan);
    header.appendChild(countSpan);
    header.appendChild(editBtn);
    header.appendChild(delBtn);

    // ヘッダークリックで開閉
    header.addEventListener('click', () => {
      if (_catEditorOpenSet.has(mIdx)) {
        _catEditorOpenSet.delete(mIdx);
      } else {
        _catEditorOpenSet.add(mIdx);
      }
      renderCatEditorList();
    });

    wrap.appendChild(header);

    // ── 小カテゴリ一覧（展開時のみ表示） ──
    if (isOpen) {
      const smallSection = document.createElement('div');
      smallSection.style.cssText = 'border-top:1px solid var(--border);';

      const smallList = document.createElement('div');
      smallList.style.cssText = 'padding:8px 12px;display:flex;flex-wrap:wrap;gap:6px;';
      smallList.dataset.midx = mIdx;

      mid.small.forEach((sm, sIdx) => {
        smallList.appendChild(createSmallTag(sm, mIdx, sIdx));
      });

      // 小カテゴリ追加ボタン
      const addSmBtn = document.createElement('button');
      addSmBtn.className = 'small-add-btn';
      addSmBtn.style.cssText = 'background:none;border:1px dashed var(--border);border-radius:20px;padding:4px 12px;font-size:12px;color:var(--text-dim);cursor:pointer;';
      addSmBtn.textContent = '＋ 小カテゴリ追加';
      addSmBtn.onclick = () => openAddSmallModal(mIdx);
      smallList.appendChild(addSmBtn);

      initSmallDragDrop(smallList, mIdx);

      smallSection.appendChild(smallList);
      wrap.appendChild(smallSection);
    }

    container.appendChild(wrap);
  });

  // ＋ 中カテゴリ追加ボタン（リスト末尾）
  const addMidBtn = document.createElement('button');
  addMidBtn.style.cssText = 'width:100%;padding:10px;background:none;border:1px dashed var(--border);border-radius:10px;color:var(--text-dim);font-size:13px;cursor:pointer;margin-top:4px;font-family:inherit;';
  addMidBtn.textContent = '＋ 中カテゴリを追加';
  addMidBtn.onclick = () => openAddMiddleModal();
  container.appendChild(addMidBtn);
}

function createSmallTag(sm, mIdx, sIdx) {
  const tag = document.createElement('div');
  tag.className = 'small-tag';
  tag.draggable = true;
  tag.dataset.sidx = sIdx;
  tag.style.cssText = 'display:inline-flex;align-items:center;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:4px 10px;font-size:12px;user-select:none;';
  tag.innerHTML = `
    <span class="drag-handle" style="color:var(--text-dim);font-size:11px;margin-right:2px;cursor:grab;touch-action:none;">⠿</span>
    <span>${escHtml(sm)}</span>
    <button onclick="openEditSmallModal(${mIdx},${sIdx})" style="background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:11px;padding:0 2px;" title="編集">✏️</button>
    <button onclick="deleteSmallCategory(${mIdx},${sIdx})" style="background:none;border:none;color:var(--danger);cursor:pointer;font-size:11px;padding:0 2px;" title="削除">✕</button>
  `;
  return tag;
}

// ===== 再カテゴライズ =====
const RECAT_MAX_CONCURRENT = 5;
let recatActiveCount = 0;
const recatDoneIds = new Set(); // 再カテゴライズ完了済みID（ページリロードまで保持）

async function recategorizeReceipt(id, btn) {
  // エラー状態のタップ → エラー内容をクリップボードにコピー
  if (btn.classList.contains('error')) {
    const errText = btn.dataset.errorMsg || btn.title || '（エラー内容なし）';
    try {
      await navigator.clipboard.writeText(errText);
      const prev = btn.textContent;
      btn.textContent = '📋';
      setTimeout(() => { btn.textContent = prev; }, 1200);
    } catch {
      // クリップボードAPI未対応の場合はそのままリトライへ
      btn.classList.remove('error');
      btn.title = '再カテゴライズ';
      delete btn.dataset.errorMsg;
      recategorizeReceipt(id, btn);
    }
    return;
  }

  const apiKey = localStorage.getItem('gemini_api_key');
  if (!apiKey) { promptSetup(); return; }

  // （手入力・手動カテゴライズ済みをブロックする判定は廃止し、どのレシートでも実行できる）

  if (recatActiveCount >= RECAT_MAX_CONCURRENT) {
    const orig = btn.textContent;
    btn.textContent = '⚠️';
    btn.title = `同時実行は最大${RECAT_MAX_CONCURRENT}件までです`;
    setTimeout(() => { btn.textContent = orig; btn.title = '再カテゴライズ'; }, 2000);
    return;
  }

  recatActiveCount++;
  btn.classList.remove('error');
  btn.title = '再カテゴライズ';
  delete btn.dataset.errorMsg;
  btn.classList.add('spinning');
  btn.textContent = '🔄';

  try {
    const all = await dbGetAll('receipts');
    const record = all.find(r => r.id === id);
    if (!record || !record.items?.length) { btn.classList.remove('spinning'); recatActiveCount--; return; }

    // 中カテゴリ名一覧・小カテゴリマップを作成（検証用）
    const midNames = categoryDef.map(m => m.middle);
    const smallMap = {}; // { "中カテゴリ": Set(["小1","小2",...]) }
    categoryDef.forEach(m => { smallMap[m.middle] = new Set(m.small); });

    // カテゴリ定義を列挙（largeDef が利用可能なら大カテゴリ階層を付与）
    let catLines;
    if (largeDef && largeDef.length > 0) {
      const idToMid = new Map(categoryDef.map(m => [m.id, m]));
      const renderedIds = new Set();
      const blocks = [];
      for (const ld of largeDef) {
        const midLines = [];
        for (const midId of (ld.middles || [])) {
          const m = idToMid.get(midId);
          if (!m) continue;
          renderedIds.add(midId);
          midLines.push(`  "${m.middle}": [${m.small.map(s => `"${s}"`).join(', ')}]`);
        }
        if (midLines.length > 0) {
          blocks.push(`【${ld.large}】\n${midLines.join('\n')}`);
        }
      }
      const orphans = categoryDef.filter(m => !renderedIds.has(m.id));
      if (orphans.length > 0) {
        const orphanLines = orphans.map(m =>
          `  "${m.middle}": [${m.small.map(s => `"${s}"`).join(', ')}]`
        );
        blocks.push(`【未分類】\n${orphanLines.join('\n')}`);
      }
      catLines = blocks.join('\n');
    } else {
      catLines = categoryDef.map(m =>
        `"${m.middle}": [${m.small.map(s => `"${s}"`).join(', ')}]`
      ).join('\n');
    }

    // 有効な中カテゴリ名の配列（Geminiへの明示的な制約）
    const validMidList = categoryDef.map(m => `"${m.middle}"`).join(', ');

    const itemLines = record.items.map((item, i) => `${i}: ${item.name}`).join('\n');
    const store = record.store || '';

    // 店舗タイプ系カテゴリ（コンビニ・外食等）を抽出して店名判定ルールを組み立てる
    const storeTypeMids = categoryDef
      .map(m => m.middle)
      .filter(isStoreTypeCategory);
    const storeTypeRuleText = storeTypeMids.length > 0
      ? `【店名による一括カテゴライズ（最優先）】
- 店名が以下の店舗タイプに明らかに該当する場合、全商品の middle_category をそのカテゴリで統一すること
- 対象カテゴリ：${storeTypeMids.map(c => `「${c}」`).join('、')}
- 例：アピタ・イオン・ヨークベニマル等のスーパーは商品別カテゴリを適用、セブン-イレブン・ローソン・ファミリーマート等は「コンビニ」、マクドナルド・吉野家・スターバックス等は「外食・テイクアウト」
- 店名から判断できない・個人店・スーパー等は通常の商品別カテゴライズを行うこと`
      : '';

    const prompt = `以下の商品リストを、指定したカテゴリ定義に従って分類してください。

店名: ${store}
商品リスト:
${itemLines}

【使用可能な中カテゴリ名一覧】（この中から完全一致で選ぶこと）:
[${validMidList}]

【カテゴリ定義】（中カテゴリ名: [使用できる小カテゴリ一覧]）
${catLines}

${storeTypeRuleText}

【厳守ルール】
- middle_category は【使用可能な中カテゴリ名一覧】の文字列を一字一句そのまま使うこと（変更・追加・削除禁止）
- small_category はその中カテゴリの小カテゴリ一覧の文字列を一字一句そのまま使うこと
- リストにない文字列を絶対に作らないこと（「交通-」「交通（新幹線）」などNG）
- どれにも当てはまらない場合のみ middle_category="その他", small_category="その他" を使うこと
- 全商品を必ず分類すること

また、店名から store_brand（チェーン・ブランド名）も抽出してください。

JSONのみ返してください（説明文・マークダウン・コードブロック不要）。形式：
{"store_brand":"チェーン名（例：アピタ、イオン、セブン-イレブン。判別困難なら店名と同じ値）","items":[{"index":0,"middle_category":"...","small_category":"..."},...]}`;

    const _geminiUrl2 = `https://generativelanguage.googleapis.com/v1beta/models/${localStorage.getItem('gemini_model') || 'gemini-2.5-flash'}:generateContent?key=${apiKey}`;
    const _geminiBody2 = JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] });

    // リトライ中はボタンに残り時間を表示する
    const _origBtnText = btn.textContent;
    let _retryTimer = null;

    const res = await callGeminiWithRetry(
      _geminiUrl2,
      { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: _geminiBody2 },
      {
        maxRetries: 5,
        baseDelayMs: 1000,
        onRetry: (attempt, delayMs) => {
          // ボタンにカウントダウン表示
          let remaining = Math.round(delayMs / 1000);
          btn.textContent = `⏳${remaining}s`;
          btn.title = `混雑しているため再試行中 (${attempt}/5回目)`;
          if (_retryTimer) clearInterval(_retryTimer);
          _retryTimer = setInterval(() => {
            remaining--;
            if (remaining > 0) {
              btn.textContent = `⏳${remaining}s`;
            } else {
              clearInterval(_retryTimer);
              btn.textContent = '🔄';
            }
          }, 1000);
        }
      }
    );
    if (_retryTimer) { clearInterval(_retryTimer); _retryTimer = null; }
    btn.textContent = '🔄';
    btn.title = '再カテゴライズ';

    if (!res.ok) {
      const err = await res.json().catch(() => ({}));
      const status = res.status;
      if (status === 429 || status === 503) {
        throw new Error('現在サーバーが大変混雑しています。しばらく経ってからもう一度お試しください。');
      }
      throw new Error(err.error?.message || `HTTP ${status}`);
    }

    const data = await res.json();
    const raw = data.candidates?.[0]?.content?.parts?.[0]?.text || '';
    const clean = raw.replace(/```json|```/g, '').trim();
    const parsed = JSON.parse(clean);

    // レスポンスが {store_brand, items:[...]} 形式か、旧来の [...] 形式かを吸収
    const results = Array.isArray(parsed) ? parsed : (parsed.items || []);
    const newStoreBrand = Array.isArray(parsed) ? null : (parsed.store_brand || null);

    // store_brand を更新（値があり、かつ空文字でなければ）
    if (newStoreBrand && newStoreBrand.trim()) {
      record.store_brand = newStoreBrand.trim();
      record.store_brand_id = autoRegisterStoreBrand(newStoreBrand.trim()) || record.store_brand_id || null;
    }

    // カテゴリ検証＆フォールバック付きで更新
    results.forEach(({ index, middle_category, small_category }) => {
      if (!record.items[index]) return;

      let mid = middle_category;
      let sm = small_category;

      // 中カテゴリが定義に存在しない場合→「その他」
      if (!midNames.includes(mid)) {
        mid = 'その他';
        sm = 'その他';
      } else {
        // 小カテゴリが定義に存在しない場合→その中カテゴリの最後の小カテゴリ
        if (!smallMap[mid]?.has(sm)) {
          const smalls = categoryDef.find(m => m.middle === mid)?.small || [];
          sm = smalls[smalls.length - 1] || 'その他';
        }
      }

      record.items[index].middle_category = mid;
      record.items[index].middle_category_id = midNameToId(mid) || null;
      record.items[index].small_category = sm;
    });

    await dbPut('receipts', record);

    if (currentRecordId === id) {
      currentRecord = JSON.parse(JSON.stringify(record));
      _renderDetail();
    }

    recatDoneIds.add(id);

    // 履歴一覧が表示中なら再描画してstore_brandバッジを即時反映
    const historyListView = document.getElementById('history-list-view');
    if (historyListView && historyListView.style.display !== 'none') {
      // 再描画前にスクロール位置を保存
      const scrollY = window.scrollY;
      await loadHistory();
      // スクロール位置を復元
      window.scrollTo({ top: scrollY, behavior: 'instant' });
      // 再描画でボタンが差し替わるので、新しいボタンを取得して✅をセット
      const newBtn = historyListView.querySelector(`[data-id="${id}"] .recat-btn`);
      if (newBtn) {
        newBtn.classList.remove('spinning');
        newBtn.textContent = '✅';
      }
    } else {
      btn.classList.remove('spinning');
      btn.textContent = '✅';
    }

  } catch(e) {
    btn.classList.remove('spinning');
    btn.textContent = '❌';
    btn.classList.add('error');
    const errMsg = `再カテゴライズ失敗：${toJapaneseGeminiError(e)}`;
    btn.title = errMsg + '（タップでコピー）';
    btn.dataset.errorMsg = errMsg;
    console.error('再カテゴライズエラー:', e);
  } finally {
    recatActiveCount--;
  }
}

// ===== 統計リストの表示中レシートを一括再カテゴライズ =====
function _statsListRecatTargets() {
  return Array.from(document.querySelectorAll('#stats-receipt-list .recat-btn[data-rid]'));
}

function _updateStatsListRecatBtn() {
  const btn = document.getElementById('stats-list-recat-btn');
  if (!btn || btn.dataset.busy === '1') return;
  const n = _statsListRecatTargets().length;
  btn.style.display = n > 0 ? '' : 'none';
  btn.textContent = '\u{1F504}';
  btn.style.fontSize = '17px';
  btn.disabled = false;
  btn.classList.remove('spinning');
  btn.title = n > 0 ? `表示中の${n}件を一括再カテゴライズ` : '表示中のレシートを一括再カテゴライズ';
}

async function bulkRecatStatsList() {
  const btn = document.getElementById('stats-list-recat-btn');
  if (!btn || btn.dataset.busy === '1') return;

  const apiKey = localStorage.getItem('gemini_api_key');
  if (!apiKey) { promptSetup(); return; }

  const targets = _statsListRecatTargets();
  if (targets.length === 0) return;
  if (!confirm(`表示中の${targets.length}件を再カテゴライズします。よろしいですか？`)) return;

  btn.dataset.busy = '1';
  btn.disabled = true;
  btn.style.fontSize = '13px';

  let done = 0;
  btn.textContent = `0/${targets.length}`;
  for (const t of targets) {
    const id = Number(t.dataset.rid);
    if (!Number.isFinite(id)) { done++; continue; }
    t.classList.remove('error');
    delete t.dataset.errorMsg;
    await recategorizeReceipt(id, t).catch(() => {});
    done++;
    btn.textContent = `${done}/${targets.length}`;
  }

  btn.textContent = '\u2705';
  btn.style.fontSize = '17px';
  setTimeout(() => {
    delete btn.dataset.busy;
    _updateStatsListRecatBtn();
  }, 1500);
}

function _initStatsListRecatObserver() {
  const listEl = document.getElementById('stats-receipt-list');
  if (!listEl) return;
  new MutationObserver(() => _updateStatsListRecatBtn())
    .observe(listEl, { childList: true, subtree: true });
  _updateStatsListRecatBtn();
}
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', _initStatsListRecatObserver);
} else {
  _initStatsListRecatObserver();
}

// ===== 一括再カテゴライズ =====
let _bulkRecatCancelled = false;

async function startBulkRecategorize() {
  const apiKey = localStorage.getItem('gemini_api_key');
  if (!apiKey) { promptSetup(); return; }

  const all = await dbGetAll('receipts');
  if (!all.length) { alert('レシートがありません'); return; }

  _bulkRecatCancelled = false;

  // UI切り替え
  document.getElementById('bulk-recat-btn').style.display = 'none';
  document.getElementById('bulk-recat-progress').style.display = 'block';

  const label = document.getElementById('bulk-recat-label');
  const fill  = document.getElementById('bulk-recat-bar-fill');

  // 手入力・手動カテゴライズ済みも含めて全件を対象にする
  const targets = all.slice();
  const skipped = 0;

  const ids = targets.map(r => r.id);
  const total = ids.length;
  let done = 0, errCount = 0;

  label.textContent = `0 / ${total} 件完了`;
  fill.style.width = '0%';

  // 5件ずつ並列処理（RECAT_MAX_CONCURRENTを活用）
  const CHUNK = RECAT_MAX_CONCURRENT;
  for (let i = 0; i < ids.length; i += CHUNK) {
    if (_bulkRecatCancelled) break;

    const chunk = ids.slice(i, i + CHUNK);

    // ダミーボタンを生成してrecategorizeReceiptに渡す
    await Promise.all(chunk.map(id => {
      if (_bulkRecatCancelled) return Promise.resolve();
      const dummyBtn = document.createElement('button');
      dummyBtn.textContent = '🔄';
      return recategorizeReceipt(id, dummyBtn).then(() => {
        done++;
        label.textContent = `${done} / ${total} 件完了${errCount ? `（エラー ${errCount} 件）` : ''}`;
        fill.style.width = `${Math.round(done / total * 100)}%`;
      }).catch(() => {
        done++;
        errCount++;
        label.textContent = `${done} / ${total} 件完了${errCount ? `（エラー ${errCount} 件）` : ''}`;
        fill.style.width = `${Math.round(done / total * 100)}%`;
      });
    }));
  }

  // 完了
  const cancelled = _bulkRecatCancelled;
  _bulkRecatCancelled = false;

  if (cancelled) {
    label.textContent = `中断しました（${done} / ${total} 件完了）`;
    fill.style.background = 'var(--text-dim)';
  } else {
    fill.style.width = '100%';
    const skipNote = skipped > 0 ? `・スキップ ${skipped} 件` : '';
    label.textContent = errCount
      ? `完了（${total} 件中 ${errCount} 件エラー${skipNote}）`
      : `✅ ${total} 件完了${skipNote}`;
  }

  // 3秒後にリセット
  setTimeout(() => {
    document.getElementById('bulk-recat-btn').style.display = '';
    document.getElementById('bulk-recat-progress').style.display = 'none';
    fill.style.width = '0%';
    fill.style.background = 'var(--accent)';
    loadHistory();
  }, 3000);
}

function cancelBulkRecategorize() {
  _bulkRecatCancelled = true;
  document.getElementById('bulk-recat-label').textContent = 'キャンセル中...';
}


function initSmallDragDrop(listEl, mIdx) {
  let dragging = null;       // ドラッグ中のタグ要素
  let ghost = null;          // 半透明クローン
  let offsetX = 0, offsetY = 0;
  let lastTarget = null;

  // ---- MOUSE ----
  listEl.addEventListener('mousedown', e => {
    // ドラッグハンドル（⠿）のみでドラッグ開始
    const handle = e.target.closest('.drag-handle');
    if (!handle) return;
    const tag = handle.closest('.small-tag');
    if (!tag) return;
    startDrag(tag, e.clientX, e.clientY);
    e.preventDefault();
  });

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);

  function onMouseMove(e) {
    if (!dragging) return;
    moveGhost(e.clientX, e.clientY);
    const target = getTagUnder(e.clientX, e.clientY, listEl);
    updateDropIndicator(target);
  }
  function onMouseUp(e) {
    if (!dragging) return;
    drop(e.clientX, e.clientY, listEl, mIdx);
  }

  // ---- TOUCH ----
  listEl.addEventListener('touchstart', e => {
    // ドラッグハンドル（⠿）のみでドラッグ開始
    const handle = e.target.closest('.drag-handle');
    if (!handle) return;
    const tag = handle.closest('.small-tag');
    if (!tag) return;
    const t = e.touches[0];
    startDrag(tag, t.clientX, t.clientY);
    e.preventDefault();
  }, { passive: false });

  // touchmove: ドラッグ中のみ document レベルでスクロールを止める
  function onTouchMoveSmall(e) {
    if (!dragging) return;
    const t = e.touches[0];
    moveGhost(t.clientX, t.clientY);
    const target = getTagUnder(t.clientX, t.clientY, listEl);
    updateDropIndicator(target);
    e.preventDefault();
  }
  document.addEventListener('touchmove', onTouchMoveSmall, { passive: false });

  listEl.addEventListener('touchend', e => {
    if (!dragging) return;
    const t = e.changedTouches[0];
    drop(t.clientX, t.clientY, listEl, mIdx);
  });

  // ---- 共通 ----
  function startDrag(tag, cx, cy) {
    dragging = tag;
    const rect = tag.getBoundingClientRect();
    offsetX = cx - rect.left;
    offsetY = cy - rect.top;

    // ゴースト作成
    ghost = tag.cloneNode(true);
    ghost.style.cssText += ';position:fixed;pointer-events:none;opacity:0.75;z-index:9999;box-shadow:0 4px 16px rgba(0,0,0,0.5);transition:none;';
    ghost.style.width = rect.width + 'px';
    document.body.appendChild(ghost);
    moveGhost(cx, cy);

    // 元タグを薄く
    tag.style.opacity = '0.35';
    tag.style.border = '1px dashed var(--accent)';
  }

  function moveGhost(cx, cy) {
    ghost.style.left = (cx - offsetX) + 'px';
    ghost.style.top  = (cy - offsetY) + 'px';
  }

  function getTagUnder(cx, cy, list) {
    const tags = [...list.querySelectorAll('.small-tag')].filter(t => t !== dragging);
    for (const t of tags) {
      const r = t.getBoundingClientRect();
      if (cx >= r.left && cx <= r.right && cy >= r.top && cy <= r.bottom) return t;
    }
    return null;
  }

  function updateDropIndicator(target) {
    // 前回のインジケータをリセット
    if (lastTarget && lastTarget !== target) {
      lastTarget.style.borderLeft = '';
      lastTarget.style.borderRight = '';
    }
    lastTarget = target;
    if (!target) return;
    const r = target.getBoundingClientRect();
    // ゴーストの中心X で左右判定
    const ghostCx = parseFloat(ghost.style.left) + ghost.offsetWidth / 2;
    if (ghostCx < r.left + r.width / 2) {
      target.style.borderLeft = '2px solid var(--accent)';
      target.style.borderRight = '';
    } else {
      target.style.borderRight = '2px solid var(--accent)';
      target.style.borderLeft = '';
    }
  }

  function drop(cx, cy, list, midxLocal) {
    // クリーンアップ
    if (ghost) { ghost.remove(); ghost = null; }
    if (lastTarget) {
      lastTarget.style.borderLeft = '';
      lastTarget.style.borderRight = '';
      lastTarget = null;
    }
    dragging.style.opacity = '';
    dragging.style.border = '';

    const target = getTagUnder(cx, cy, list);
    if (target && target !== dragging) {
      const tags = [...list.querySelectorAll('.small-tag')];
      const fromIdx = tags.indexOf(dragging);
      const toIdx   = tags.indexOf(target);

      // 左右どちら寄りか
      const r = target.getBoundingClientRect();
      const insertBefore = cx < r.left + r.width / 2;

      // categoryDef 配列を更新
      const arr = categoryDef[midxLocal].small;
      const [moved] = arr.splice(fromIdx, 1);
      const newTo = insertBefore ? toIdx - (fromIdx < toIdx ? 1 : 0) : toIdx - (fromIdx < toIdx ? 1 : 0) + 1;
      arr.splice(Math.max(0, newTo), 0, moved);

      saveCategoryDef();
      renderCatEditorList();
      syncRenderLargeEditor();
    }

    dragging = null;
  }
}


function escHtml(s) {
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

// 中カテゴリ追加モーダル
var openAddMiddleModal = function() {
  catEditMiddleIndex = null;
  document.getElementById('add-middle-title').textContent = '＋ 中カテゴリ追加';
  document.getElementById('add-middle-input').value = '';
  document.getElementById('add-middle-modal').classList.add('open');
  setTimeout(() => document.getElementById('add-middle-input').focus(), 50);
};

// 中カテゴリ編集モーダル
var openEditMiddleModal = function(mIdx) {
  catEditMiddleIndex = mIdx;
  document.getElementById('add-middle-title').textContent = '✏️ 中カテゴリ編集';
  document.getElementById('add-middle-input').value = categoryDef[mIdx].middle;
  document.getElementById('add-middle-modal').classList.add('open');
  setTimeout(() => document.getElementById('add-middle-input').focus(), 50);
};

function saveMiddleCategory() {
  const name = document.getElementById('add-middle-input').value.trim();
  if (!name) { alert('カテゴリ名を入力してください'); return; }

  if (catEditMiddleIndex === null) {
    // 新規追加（idを付与）
    if (categoryDef.some(m => m.middle === name)) { alert('同じ名前の中カテゴリが既に存在します'); return; }
    const newMid = { id: _genMiddleId(), middle: name, small: [] };
    categoryDef.push(newMid);
    syncLargeDefOnMiddleAdd(newMid.id); // largeDef 同期（id）
  } else {
    // 編集：名前のみ変更。idはそのままなのでlargeDef同期不要
    const oldName = categoryDef[catEditMiddleIndex].middle;
    if (name !== oldName && categoryDef.some(m => m.middle === name)) { alert('同じ名前の中カテゴリが既に存在します'); return; }
    categoryDef[catEditMiddleIndex].middle = name;
    // idで管理するためlargeDef側は変更不要
  }
  saveCategoryDef();
  renderCatEditorList();
  syncRenderLargeEditor(); // 大中エディタが開いていれば同期
  // 集計タブが表示中なら名前変更をグラフに即時反映
  if (document.getElementById('tab-stats').classList.contains('active')) {
    loadStats();
  }
  closeModal('add-middle-modal');
}

function deleteMiddleCategory(mIdx) {
  const entry = categoryDef[mIdx];
  if (!confirm(`「${entry.middle}」を削除しますか？\n小カテゴリもすべて削除されます。`)) return;
  const midId = entry.id;
  categoryDef.splice(mIdx, 1);
  syncLargeDefOnMiddleDelete(midId); // largeDef 同期（id）
  saveCategoryDef();
  renderCatEditorList();
  syncRenderLargeEditor(); // 大中エディタが開いていれば同期
}

// 小カテゴリ追加モーダル
var openAddSmallModal = function(mIdx) {
  catEditSmallMiddleIndex = mIdx;
  catEditSmallIndex = null;
  document.getElementById('add-small-title').textContent = '\uff0b 小カテゴリ追加';
  document.getElementById('add-small-parent-label').textContent = `中カテゴリ：${categoryDef[mIdx].middle}`;
  document.getElementById('add-small-input').value = '';
  openModal('add-small-modal');
  setTimeout(() => document.getElementById('add-small-input').focus(), 50);
};

// 小カテゴリ編集モーダル
var openEditSmallModal = function(mIdx, sIdx) {
  catEditSmallMiddleIndex = mIdx;
  catEditSmallIndex = sIdx;
  document.getElementById('add-small-title').textContent = '\u270f\ufe0f 小カテゴリ編集';
  document.getElementById('add-small-parent-label').textContent = `中カテゴリ：${categoryDef[mIdx].middle}`;
  document.getElementById('add-small-input').value = categoryDef[mIdx].small[sIdx];
  openModal('add-small-modal');
  setTimeout(() => document.getElementById('add-small-input').focus(), 50);
};

// History API ラップ（本定義の直後に配置することで正しく機能する）
(function() {
  var _origAdd = openAddSmallModal;
  openAddSmallModal = function(mIdx) {
    _origAdd(mIdx);
    _pushNavState('add-small-modal');
  };
  var _origEdit = openEditSmallModal;
  openEditSmallModal = function(mIdx, sIdx) {
    _origEdit(mIdx, sIdx);
    _pushNavState('add-small-modal');
  };
})();

function saveSmallCategory() {
  const name = document.getElementById('add-small-input').value.trim();
  if (!name) { alert('カテゴリ名を入力してください'); return; }
  const mIdx = catEditSmallMiddleIndex;

  if (catEditSmallIndex === null) {
    // 新規追加
    categoryDef[mIdx].small.push(name);
  } else {
    // 編集
    categoryDef[mIdx].small[catEditSmallIndex] = name;
  }
  saveCategoryDef();
  renderCatEditorList();
  syncRenderLargeEditor();
  closeModal('add-small-modal');
}

function deleteSmallCategory(mIdx, sIdx) {
  const name = categoryDef[mIdx].small[sIdx];
  if (!confirm(`「${name}」を削除しますか？`)) return;
  categoryDef[mIdx].small.splice(sIdx, 1);
  saveCategoryDef();
  renderCatEditorList();
  syncRenderLargeEditor();
}
// ===== 手入力レシート追加 =====
let manualItems = []; // { name, middle_category, middle_category_id, small_category, price }

function initManualEntry() {
  const today = new Date();
  const pad = n => String(n).padStart(2, '0');
  const todayStr = `${today.getFullYear()}-${pad(today.getMonth()+1)}-${pad(today.getDate())}`;
  const dateEl = document.getElementById('manual-date');
  if (dateEl && !dateEl.value) dateEl.value = todayStr;
  // HTMLに直書きされた初期カテゴリのままにならないよう、保存済み定義で必ず作り直す
  refreshManualCategoryUI();
  rebuildStoreDropdown();
  renderManualItems();
}

// 大カテゴリ select を構築（largeDef あり時のみ表示）
// 大カテゴリ名→絵文字アイコンマップ
// 大カテゴリ アイコンSVG定義（カラフルなネオン線画風）
const LARGE_CAT_SVG = {
  '食費': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <path d="M10 8v8c0 3.3 2.7 6 6 6h1v10" stroke="#f5a623" stroke-width="2.2" stroke-linecap="round"/>
    <path d="M20 8v24" stroke="#f5a623" stroke-width="2.2" stroke-linecap="round"/>
    <circle cx="27" cy="14" r="6" stroke="#f5a623" stroke-width="2.2"/>
    <path d="M27 20v12" stroke="#f5a623" stroke-width="2.2" stroke-linecap="round"/>
  </svg>`,
  '日用品': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <path d="M15 8h10l2 6H13L15 8z" stroke="#4cd964" stroke-width="2" stroke-linejoin="round"/>
    <path d="M13 14v16a2 2 0 002 2h10a2 2 0 002-2V14" stroke="#4cd964" stroke-width="2" stroke-linecap="round"/>
    <path d="M18 20c0 2 4 2 4 4" stroke="#4cd964" stroke-width="2" stroke-linecap="round"/>
  </svg>`,
  '衣服': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <path d="M14 8l-6 8 4 2v14h16V18l4-2-6-8" stroke="#5ac8fa" stroke-width="2" stroke-linejoin="round"/>
    <path d="M14 8c0 3.3 2.7 6 6 6s6-2.7 6-6" stroke="#5ac8fa" stroke-width="2"/>
  </svg>`,
  '美容': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <rect x="16" y="7" width="8" height="4" rx="2" stroke="#ff6b9d" stroke-width="2"/>
    <rect x="15" y="11" width="10" height="20" rx="3" stroke="#ff6b9d" stroke-width="2"/>
    <path d="M19 15v8" stroke="#ff6b9d" stroke-width="2" stroke-linecap="round"/>
  </svg>`,
  '交際費': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <path d="M12 14l3 6h10l3-6" stroke="#f5a623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M15 20l-3 12h16l-3-12" stroke="#f5a623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M16 10c1-2 7-2 8 0" stroke="#f5a623" stroke-width="2" stroke-linecap="round"/>
  </svg>`,
  '医療・健康': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <rect x="10" y="10" width="20" height="20" rx="3" stroke="#4cd964" stroke-width="2"/>
    <path d="M20 15v10M15 20h10" stroke="#4cd964" stroke-width="2.5" stroke-linecap="round"/>
  </svg>`,
  '教育・教養': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <rect x="10" y="9" width="14" height="18" rx="2" stroke="#ff6b9d" stroke-width="2"/>
    <path d="M14 13h6M14 17h6M14 21h4" stroke="#ff6b9d" stroke-width="1.8" stroke-linecap="round"/>
    <path d="M26 20l2 2-2 2" stroke="#ff6b9d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>`,
  '水道・光熱費': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <path d="M20 8v6M12 12l4 4M28 12l-4 4" stroke="#5ac8fa" stroke-width="2" stroke-linecap="round"/>
    <path d="M14 24c0-3.3 2.7-6 6-6s6 2.7 6 6c0 2-2 4-2 4H16s-2-2-2-4z" stroke="#5ac8fa" stroke-width="2"/>
    <path d="M17 32h6" stroke="#5ac8fa" stroke-width="2" stroke-linecap="round"/>
  </svg>`,
  '交通費': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <rect x="10" y="10" width="20" height="18" rx="4" stroke="#f5a623" stroke-width="2"/>
    <path d="M10 18h20" stroke="#f5a623" stroke-width="2"/>
    <path d="M15 28v4M25 28v4" stroke="#f5a623" stroke-width="2" stroke-linecap="round"/>
    <rect x="13" y="13" width="5" height="4" rx="1" stroke="#f5a623" stroke-width="1.5"/>
    <rect x="22" y="13" width="5" height="4" rx="1" stroke="#f5a623" stroke-width="1.5"/>
  </svg>`,
  '通信費': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <rect x="13" y="7" width="14" height="26" rx="3" stroke="#4cd964" stroke-width="2"/>
    <path d="M17 11h6" stroke="#4cd964" stroke-width="1.8" stroke-linecap="round"/>
    <circle cx="20" cy="27" r="1.5" fill="#4cd964"/>
  </svg>`,
  '住居費': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <path d="M8 20L20 9l12 11" stroke="#ff6b9d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M13 20v12h14V20" stroke="#ff6b9d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    <rect x="17" y="24" width="6" height="8" rx="1" stroke="#ff6b9d" stroke-width="1.8"/>
  </svg>`,
  '未分類': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <rect x="9" y="9" width="22" height="22" rx="3" stroke="#999" stroke-width="2"/>
    <path d="M20 17v4M20 25v2" stroke="#999" stroke-width="2.5" stroke-linecap="round"/>
  </svg>`,
  '趣味・娯楽': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <path d="M12 14h16a3 3 0 013 3v6a3 3 0 01-3 3H12a3 3 0 01-3-3v-6a3 3 0 013-3z" stroke="#af52de" stroke-width="2"/>
    <path d="M15 17v6M12 20h6M25 19h.01M28 22h.01" stroke="#af52de" stroke-width="2" stroke-linecap="round"/>
  </svg>`,
  'サービス': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <path d="M20 12a8 8 0 100 16 8 8 0 000-16z" stroke="#ff9500" stroke-width="2"/>
    <path d="M20 6v3M20 31v3M6 20h3M31 20h3M10 10l2 2M28 28l2 2M30 10l-2 2M12 28l-2 2" stroke="#ff9500" stroke-width="2" stroke-linecap="round"/>
  </svg>`,
  '保険・税金': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <path d="M20 7l11 4v9c0 7-5 11-11 13-6-2-11-6-11-13v-9l11-4z" stroke="#34c759" stroke-width="2" stroke-linejoin="round"/>
    <path d="M15 20l4 4 7-7" stroke="#34c759" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>`,
  'ネットショッピング': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <path d="M8 11h4l3 14h14" stroke="#5856d6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M14 15h18l-2 8H15" stroke="#5856d6" stroke-width="2" stroke-linejoin="round"/>
    <circle cx="17" cy="30" r="2" stroke="#5856d6" stroke-width="2"/>
    <circle cx="28" cy="30" r="2" stroke="#5856d6" stroke-width="2"/>
  </svg>`,
  'チャージ・入金': `<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <rect x="7" y="12" width="26" height="16" rx="3" stroke="#00c7be" stroke-width="2"/>
    <path d="M7 18h26" stroke="#00c7be" stroke-width="2"/>
    <path d="M20 22v4M18 24h4" stroke="#00c7be" stroke-width="2" stroke-linecap="round"/>
  </svg>`,
};

// 現在選択中の大カテゴリindex
let _manualLargeIdx = 0;
let _manualSmall = ''; // 手入力で選択中の小カテゴリ（未選択は空文字列）

function toggleManualCatDropdown() {
  const list = document.getElementById('manual-cat-list');
  const arrow = document.getElementById('manual-cat-arrow');
  const trigger = document.getElementById('manual-cat-selected');
  const open = list.style.display === 'none';
  if (open) {
    // 上下どちらに開くか判定
    const rect = trigger.getBoundingClientRect();
    const spaceBelow = window.innerHeight - rect.bottom;
    const spaceAbove = rect.top;
    const maxH = window.innerHeight * 0.45;
    if (spaceBelow < maxH && spaceAbove > spaceBelow) {
      list.style.top = 'auto';
      list.style.bottom = '100%';
      list.style.marginTop = '0';
      list.style.marginBottom = '4px';
    } else {
      list.style.top = '100%';
      list.style.bottom = 'auto';
      list.style.marginTop = '4px';
      list.style.marginBottom = '0';
    }
  }
  list.style.display = open ? 'block' : 'none';
  arrow.textContent = open ? '▲' : '▼';
}

function chooseManualCat(idx, name) {
  _manualLargeIdx = idx;
  document.getElementById('manual-cat-label').textContent = name;
  document.getElementById('manual-cat-list').style.display = 'none';
  document.getElementById('manual-cat-arrow').textContent = '▼';
  document.querySelectorAll('.manual-cat-opt').forEach((el, i) => {
    el.classList.toggle('active', i === idx);
  });
  onManualLargeChange(idx);
  rebuildManualMidDropdown(idx);
}

function toggleManualMidDropdown() {
  const list = document.getElementById('manual-mid-list');
  const arrow = document.getElementById('manual-mid-arrow');
  const trigger = document.getElementById('manual-mid-selected');
  const isHidden = list.style.display === 'none' || list.style.display === '';
  if (isHidden) {
    const rect = trigger.getBoundingClientRect();
    const spaceBelow = window.innerHeight - rect.bottom;
    const spaceAbove = rect.top;
    const maxH = Math.min(200, window.innerHeight * 0.4);
    if (spaceBelow < maxH && spaceAbove > spaceBelow) {
      list.style.top = 'auto';
      list.style.bottom = '100%';
      list.style.marginTop = '0';
      list.style.marginBottom = '4px';
    } else {
      list.style.top = '100%';
      list.style.bottom = 'auto';
      list.style.marginTop = '4px';
      list.style.marginBottom = '0';
    }
  }
  list.style.display = isHidden ? 'block' : 'none';
  arrow.textContent = isHidden ? '▲' : '▼';
}

function chooseMidCat(midName) {
  const lbl = document.getElementById('manual-mid-label');
  lbl.textContent = midName;
  lbl.style.color = 'var(--text)';
  document.getElementById('manual-mid-list').style.display = 'none';
  document.getElementById('manual-mid-arrow').textContent = '▼';
  document.querySelectorAll('.manual-mid-opt').forEach(el => {
    el.classList.toggle('active', el.textContent === midName);
  });
  // 既存の hidden select に反映（addManualItem が参照）
  const midSel = document.getElementById('manual-item-middle');
  if (midSel) {
    for (let opt of midSel.options) {
      if (opt.value === midName) { midSel.value = midName; break; }
    }
  }
  // 小カテゴリをこの中カテゴリの内容で作り直す
  rebuildManualSmallDropdown(midName);
}

// ===== 小カテゴリ（任意） =====
function toggleManualSmallDropdown() {
  const list = document.getElementById('manual-small-list');
  const arrow = document.getElementById('manual-small-arrow');
  const trigger = document.getElementById('manual-small-selected');
  const isHidden = list.style.display === 'none' || list.style.display === '';
  if (isHidden) {
    // 画面下部で開くと見切れるため、余白に応じて上側に開く
    const rect = trigger.getBoundingClientRect();
    const spaceBelow = window.innerHeight - rect.bottom;
    const spaceAbove = rect.top;
    const maxH = Math.min(200, window.innerHeight * 0.4);
    if (spaceBelow < maxH && spaceAbove > spaceBelow) {
      list.style.top = 'auto';
      list.style.bottom = '100%';
      list.style.marginTop = '0';
      list.style.marginBottom = '4px';
    } else {
      list.style.top = '100%';
      list.style.bottom = 'auto';
      list.style.marginTop = '4px';
      list.style.marginBottom = '0';
    }
  }
  list.style.display = isHidden ? 'block' : 'none';
  arrow.textContent = isHidden ? '▲' : '▼';
}

function chooseSmallCat(smallName) {
  _manualSmall = smallName || '';
  const lbl = document.getElementById('manual-small-label');
  if (lbl) {
    lbl.textContent = _manualSmall || '選択（オプション）';
    lbl.style.color = _manualSmall ? 'var(--text)' : 'var(--text-dim)';
  }
  const list = document.getElementById('manual-small-list');
  if (list) list.style.display = 'none';
  const arrow = document.getElementById('manual-small-arrow');
  if (arrow) arrow.textContent = '▼';
  document.querySelectorAll('.manual-small-opt').forEach(el => {
    el.classList.toggle('active', el.dataset.small === _manualSmall);
  });
}

// 中カテゴリ名から小カテゴリ一覧を作る。
// midName が空・定義なし・小カテゴリ0件のいずれも非表示にする。
function rebuildManualSmallDropdown(midName) {
  const wrap = document.getElementById('manual-small-dropdown');
  const list = document.getElementById('manual-small-list');
  if (!wrap || !list) return;

  _manualSmall = '';
  const entry = midName ? (categoryDef || []).find(m => m.middle === midName) : null;
  const smalls = (entry && Array.isArray(entry.small)) ? entry.small : [];

  if (smalls.length === 0) {
    wrap.style.display = 'none';
    list.innerHTML = '';
    return;
  }

  wrap.style.display = 'block';
  list.innerHTML = '';

  // 任意項目なので「選択しない」を先頭に置く
  const none = document.createElement('div');
  none.className = 'manual-cat-opt manual-small-opt active';
  none.dataset.small = '';
  none.textContent = '— 選択しない —';
  none.onclick = () => chooseSmallCat('');
  list.appendChild(none);

  smalls.forEach(sm => {
    const div = document.createElement('div');
    div.className = 'manual-cat-opt manual-small-opt';
    div.dataset.small = sm;
    div.textContent = sm;
    div.onclick = () => chooseSmallCat(sm);
    list.appendChild(div);
  });

  // 初期は未選択
  const lbl = document.getElementById('manual-small-label');
  if (lbl) {
    lbl.textContent = '選択（オプション）';
    lbl.style.color = 'var(--text-dim)';
  }
  list.style.display = 'none';
  document.getElementById('manual-small-arrow').textContent = '▼';
}

function rebuildManualMidDropdown(lIdx) {
  const def = (largeDef && largeDef.length > 0) ? largeDef : DEFAULT_LARGE_DEF;
  const ld = def[lIdx];
  const wrap = document.getElementById('manual-mid-dropdown');
  const list = document.getElementById('manual-mid-list');
  const label = document.getElementById('manual-mid-label');
  if (!wrap || !list || !ld) return;

  // 中カテゴリ一覧を取得
  const midEntries = (ld.middles || []).map(entry => {
    const byId = (categoryDef || []).find(m => m.id === entry);
    if (byId) return byId;
    return (categoryDef || []).find(m => m.middle === entry) || null;
  }).filter(Boolean);

  if (midEntries.length === 0) {
    wrap.style.display = 'none';
    rebuildManualSmallDropdown('');
    return;
  }

  wrap.style.display = 'block';
  list.innerHTML = '';
  midEntries.forEach((m, i) => {
    const div = document.createElement('div');
    div.className = 'manual-cat-opt manual-mid-opt' + (i === 0 ? ' active' : '');
    div.textContent = m.middle;
    div.onclick = () => chooseMidCat(m.middle);
    list.appendChild(div);
  });

  // 初期は未選択
  label.textContent = '選択（オプション）';
  label.style.color = 'var(--text-dim)';
  list.style.display = 'none';
  document.getElementById('manual-mid-arrow').textContent = '▼';

  // hidden select を空に
  const midSel = document.getElementById('manual-item-middle');
  if (midSel) midSel.value = '';

  // 中カテゴリが未選択に戻るので、小カテゴリも閉じる
  rebuildManualSmallDropdown('');
}

function selectManualLarge(i) {
  const def = (largeDef && largeDef.length > 0) ? largeDef : DEFAULT_LARGE_DEF;
  chooseManualCat(i, def[i]?.large || '');
}

// 追加タブ切り替え時：largeDef から大カテゴリを抽出してドロップダウンを再構築
function rebuildManualCatDropdown() {
  const def = (largeDef && largeDef.length > 0) ? largeDef : DEFAULT_LARGE_DEF;
  const list = document.getElementById('manual-cat-list');
  const label = document.getElementById('manual-cat-label');
  if (!list) return;

  // 現在の選択名を保持して再選択
  const currentName = label ? label.textContent : '';
  list.innerHTML = '';
  let newIdx = 0;
  def.forEach((ld, i) => {
    const div = document.createElement('div');
    div.className = 'manual-cat-opt';
    div.textContent = ld.large;
    div.onclick = () => chooseManualCat(i, ld.large);
    list.appendChild(div);
    if (ld.large === currentName) newIdx = i;
  });

  // active クラスと表示ラベルを更新
  const opts = list.querySelectorAll('.manual-cat-opt');
  opts.forEach((el, i) => el.classList.toggle('active', i === newIdx));
  if (label) label.textContent = def[newIdx]?.large || '';
  _manualLargeIdx = newIdx;
  // 中カテゴリドロップダウンも初期化
  rebuildManualMidDropdown(newIdx);
}

// 追加タブのカテゴリUI（大カテゴリのドロップダウン・グリッド・中カテゴリ）を
// 現在の largeDef / categoryDef / 収入カテゴリで再構築する共通処理。
// 初回ロード・各エディタを閉じたとき・インポート後など、定義が変わりうる箇所から必ず呼ぶ。
function refreshManualCategoryUI() {
  try {
    // _manualEntryType は後方で let 宣言されているため、初期化直後の呼び出しでは
    // TDZ に入る可能性がある。参照失敗時は支出モード扱いにする。
    let type = 'expense';
    try { type = _manualEntryType; } catch (_) {}

    if (type === 'income') {
      // 収入モードは収入カテゴリで作り直す（setManualEntryType が担当）
      if (typeof setManualEntryType === 'function') setManualEntryType('income');
      return;
    }
    buildManualLargeSelect();
    rebuildManualCatDropdown();
  } catch (e) {
    // ここで例外を投げると initApp 全体が止まり、画面全体が無反応になるため握りつぶす
    console.warn('カテゴリUIの再構築に失敗:', e);
  }
}

function buildManualLargeSelect() {
  const def = (largeDef && largeDef.length > 0) ? largeDef : DEFAULT_LARGE_DEF;
  if (!largeDef || largeDef.length === 0) largeDef = JSON.parse(JSON.stringify(DEFAULT_LARGE_DEF));
  const grid = document.getElementById('manual-large-grid');
  if (!grid) return;
  // largeDef がデフォルトと異なる場合のみ再描画
  grid.innerHTML = '';
  def.forEach((ld, i) => {
    const div = document.createElement('div');
    div.className = 'manual-cat-item' + (i === _manualLargeIdx ? ' active' : '');
    div.textContent = ld.large;
    div.onclick = () => selectManualLarge(i);
    grid.appendChild(div);
  });
  onManualLargeChange(_manualLargeIdx);
}

function _renderManualLargeGrid(selectedIdx) {
  selectManualLarge(selectedIdx);
}

// 大カテゴリ変更 → 中カテゴリを絞り込む
function onManualLargeChange(lIdx) {
  if (lIdx === undefined) lIdx = _manualLargeIdx;
  _manualLargeIdx = lIdx;
  if (!largeDef || !largeDef[lIdx]) return;
  const ld = largeDef[lIdx];
  const midSel = document.getElementById('manual-item-middle');
  if (!midSel) return;
  midSel.innerHTML = '';

  // id で引く → 見つからなければ名前で引く（未変換の名前文字列にも対応）
  const midEntries = (ld.middles || []).map(entry => {
    const byId = (categoryDef || []).find(m => m.id === entry);
    if (byId) return byId;
    const byName = (categoryDef || []).find(m => m.middle === entry);
    return byName || null;
  }).filter(Boolean);

  const list = midEntries.length > 0 ? midEntries : (categoryDef || []);
  list.forEach(m => {
    const opt = document.createElement('option');
    opt.value = m.middle;
    opt.textContent = m.middle;
    midSel.appendChild(opt);
  });
  if (!midSel.innerHTML) midSel.innerHTML = '<option value="その他">その他</option>';
  onManualMiddleChange();
}

// largeDef なし時：全中カテゴリをフラット表示
function buildManualMiddleSelectAll() {
  const midSel = document.getElementById('manual-item-middle');
  midSel.innerHTML = '';
  (categoryDef || []).forEach(m => {
    const opt = document.createElement('option');
    opt.value = m.middle;
    opt.textContent = m.middle;
    midSel.appendChild(opt);
  });
  if (!midSel.innerHTML) midSel.innerHTML = '<option value="その他">その他</option>';
  onManualMiddleChange();
}

// 中カテゴリ変更 → 小カテゴリを更新
function onManualMiddleChange() {
  const middle = document.getElementById('manual-item-middle').value;
  const wrap = document.getElementById('manual-small-wrap');
  // ラベルを保持しつつselectだけ差し替え
  let label = wrap.querySelector('.small-cat-label');
  if (!label) {
    label = document.createElement('div');
    label.className = 'small-cat-label';
    label.style.cssText = 'font-size:11px;color:var(--text-dim);margin-bottom:3px;';
    label.textContent = '小カテゴリ';
    wrap.innerHTML = '';
    wrap.appendChild(label);
  } else {
    // labelより後の要素を削除
    while (label.nextSibling) wrap.removeChild(label.nextSibling);
  }
  const def = (categoryDef || []).find(m => m.middle === middle);
  const smalls = def ? def.small : ['その他'];
  const sel = document.createElement('select');
  sel.id = 'manual-item-small';
  sel.style.cssText = 'width:100%;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text);font-size:13px;font-family:inherit;outline:none;appearance:none;cursor:pointer;';
  smalls.forEach(s => {
    const opt = document.createElement('option');
    opt.value = s;
    opt.textContent = s;
    sel.appendChild(opt);
  });
  wrap.appendChild(sel);
}

// カテゴリJSONをファイルからインポート（categoryDef）
function importCategoryDefFromFile(event) {
  const file = event.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = function(e) {
    try {
      let parsed = JSON.parse(e.target.result);
      // エクスポート形式が配列直接 or {categoryDef:[...]} のどちらにも対応
      if (!Array.isArray(parsed) && parsed.categoryDef) parsed = parsed.categoryDef;
      if (!Array.isArray(parsed)) throw new Error('categoryDefの形式が不正です');
      // id付与
      parsed.forEach(m => { if (!m.id) m.id = _genMiddleId(); });
      categoryDef = parsed;
      localStorage.setItem('category_def', JSON.stringify(categoryDef));
      refreshManualCategoryUI();
      _updateManualCatImportHint();
      showManualStatus('success', 'カテゴリを読み込みました！');
    } catch(err) {
      showManualStatus('error', 'JSONの読み込みに失敗: ' + err.message);
    }
    event.target.value = '';
  };
  reader.readAsText(file);
}

// カテゴリJSONをファイルからインポート（largeDef）
function importLargeDefFromFile(event) {
  const file = event.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = function(e) {
    try {
      let parsed = JSON.parse(e.target.result);
      if (!Array.isArray(parsed) && parsed.largeDef) parsed = parsed.largeDef;
      if (!Array.isArray(parsed)) throw new Error('largeDefの形式が不正です');
      largeDef = parsed;
      localStorage.setItem(LARGE_DEF_KEY, JSON.stringify(largeDef));
      refreshManualCategoryUI();
      _updateManualCatImportHint();
      showManualStatus('success', '大カテゴリを読み込みました！');
    } catch(err) {
      showManualStatus('error', 'JSONの読み込みに失敗: ' + err.message);
    }
    event.target.value = '';
  };
  reader.readAsText(file);
}

// カテゴリが「その他」のみの場合にヒントを表示
function _updateManualCatImportHint() {
  const hint = document.getElementById('manual-cat-import-hint');
  if (!hint) return;
  const hasProperCats = categoryDef && categoryDef.length > 1;
  hint.style.display = hasProperCats ? 'none' : 'block';
}

function addManualItem() {
  const nameEl = document.getElementById('manual-item-name');
  const priceEl = document.getElementById('manual-item-price');
  const name = nameEl.value.trim();
  const priceRaw = priceEl.value.trim();
  const price = parseInt(priceRaw) || 0;

  // 商品名も金額も未入力のときは積まない（空アイテムの混入防止）
  if (!name && !priceRaw) return false;


  // 中カテゴリ：ドロップダウンで選ばれた値を優先して使う
  let middle = 'その他';
  let middleId = null;
  const midSel = document.getElementById('manual-item-middle');
  const selVal = midSel ? midSel.value : '';
  if (selVal) {
    middle = selVal;
    const entry = (categoryDef || []).find(m => m.middle === selVal);
    middleId = entry ? entry.id : null;
  }

  manualItems.push({
    name,
    middle_category: middle,
    middle_category_id: middleId || midNameToId(middle) || null,
    small_category: _manualSmall || '',
    price
  });
  nameEl.value = '';
  priceEl.value = '';
  renderManualItems();
  nameEl.focus();
  return true;
}

function deleteManualItem(idx) {
  manualItems.splice(idx, 1);
  renderManualItems();
}

function renderManualItems() {
  const ul = document.getElementById('manual-items-list');
  ul.innerHTML = '';
  if (manualItems.length === 0) {
    document.getElementById('manual-total').textContent = '¥0';
    return;
  }
  manualItems.forEach((item, idx) => {
    const li = document.createElement('li');
    li.className = 'manual-item-row';
    li.innerHTML = `
      <div style="flex:1;min-width:0;">
        <div style="font-size:13px;word-break:break-all;">${escHtml(item.name) || '<span style="color:var(--text-dim);">商品名なし</span>'}</div>
        <span class="item-cat">${escHtml(resolveCatLabel(item))}</span>
      </div>
      <span class="item-price" style="font-family:'Space Mono',monospace;white-space:nowrap;">¥${(item.price||0).toLocaleString()}</span>
      <button class="manual-item-del" onclick="deleteManualItem(${idx})" title="削除">✕</button>
    `;
    ul.appendChild(li);
  });
  const total = manualItems.reduce((s, i) => s + (i.price || 0), 0);
  document.getElementById('manual-total').textContent = '¥' + total.toLocaleString();
}

async function saveManualReceipt() {
  if (!getCurrentUser()) { promptSetup(); return; }
  // 入力欄に書きかけの1件があれば取り込む
  //（「＋ 商品を追加」で積んだ分は manualItems に保持されている）
  addManualItem();
  if (manualItems.length === 0) {
    showManualStatus('error', '商品名か金額を入力してください');
    return;
  }
  let store = document.getElementById('manual-store').value.trim();

  if (_manualEntryType === 'income') {
    // 収入：件名は選択中のカテゴリ名
    const catLabel = document.getElementById('manual-cat-label');
    store = (catLabel && catLabel.textContent.trim()) ? catLabel.textContent.trim() : '収入';
  } else if (!store || store === '手入力' || store === '店舗を選択') {
    const midSel = document.getElementById('manual-item-middle');
    const midVal = midSel ? midSel.value : '';
    if (midVal) {
      store = midVal;
    } else {
      const def = (largeDef && largeDef.length > 0) ? largeDef : DEFAULT_LARGE_DEF;
      store = def[_manualLargeIdx]?.large || '手入力';
    }
  }
  const date = document.getElementById('manual-date').value;
  const time = document.getElementById('manual-time').value || null;

  if (!date)  { showManualStatus('error', '日付を入力してください'); return; }

  try {
    const storeBrandId = autoRegisterStoreBrand(store);
    // 収入の場合は price を負値にして保存（集計で区別）
  const sign = _manualEntryType === 'income' ? -1 : 1;
  const signedItems = manualItems.map(it => ({ ...it, price: (it.price || 0) * sign, entry_type: _manualEntryType }));
  const total = signedItems.reduce((s, i) => s + (i.price || 0), 0);
    await dbAdd('receipts', {
      store,
      store_brand: store,
      store_brand_id: storeBrandId || null,
      date,
      time,
      total,
      entry_type: _manualEntryType,
      items: signedItems,
      manually_entered: true,
      saved_at: new Date().toISOString()
    });
    playSaveChime();
    clearManualEntry();
    showManualStatus('success', '保存しました！');
  } catch(err) {
    showManualStatus('error', `保存エラー: ${err.message}`);
  }
}

// ===== 手入力：支出 / 収入 切り替え =====
let _manualEntryType = 'expense'; // 'expense' | 'income'

function setManualEntryType(type) {
  _manualEntryType = type;
  const isExpense = type === 'expense';
  document.getElementById('entry-type-expense').classList.toggle('active', isExpense);
  document.getElementById('entry-type-income').classList.toggle('active', !isExpense);
  // 店舗エリア：収入時は非表示
  const storeArea = document.getElementById('manual-store-area');
  if (storeArea) storeArea.style.display = isExpense ? 'block' : 'none';
  // ラベル切り替え
  const label = document.querySelector('#manual-large-row .modal-label');
  if (label) label.textContent = isExpense ? '支出' : '収入';

  const INCOME_NAMES = loadIncomeCategories();
  const catList  = document.getElementById('manual-cat-list');
  const catLabel = document.getElementById('manual-cat-label');
  const midWrap  = document.getElementById('manual-mid-dropdown');

  if (!isExpense) {
    // ── 収入モード：ドロップダウンを収入カテゴリ名で上書き、中カテゴリ非表示 ──
    if (catList) {
      catList.innerHTML = '';
      INCOME_NAMES.forEach((name, i) => {
        const div = document.createElement('div');
        div.className = 'manual-cat-opt' + (i === 0 ? ' active' : '');
        div.textContent = name;
        div.onclick = () => {
          catList.querySelectorAll('.manual-cat-opt').forEach((el,j) => el.classList.toggle('active', j===i));
          if (catLabel) catLabel.textContent = name;
          catList.style.display = 'none';
          document.getElementById('manual-cat-arrow').textContent = '▼';
          // hidden select に反映
          const midSel = document.getElementById('manual-item-middle');
          if (midSel) midSel.value = name;
        };
        catList.appendChild(div);
      });
    }
    if (catLabel) catLabel.textContent = INCOME_NAMES[0];
    if (midWrap)  midWrap.style.display = 'none';
    rebuildManualSmallDropdown(''); // 収入モードでは小カテゴリも非表示
    // hidden select を収入カテゴリで作り直す
    // （支出用の option しかないと value が弱く無視され、保存時に「その他」になってしまう）
    const midSel = document.getElementById('manual-item-middle');
    if (midSel) {
      midSel.innerHTML = '';
      INCOME_NAMES.forEach(n => {
        const opt = document.createElement('option');
        opt.value = n;
        opt.textContent = n;
        midSel.appendChild(opt);
      });
      midSel.value = INCOME_NAMES[0];
    }
  } else {
    // ── 支出モード：通常の大カテゴリドロップダウンに戻す ──
    rebuildManualCatDropdown();
    const def = (largeDef && largeDef.length > 0) ? largeDef : DEFAULT_LARGE_DEF;
    const expIdx = def.findIndex(l => l.large === '食費');
    chooseManualCat(expIdx >= 0 ? expIdx : 0, def[expIdx >= 0 ? expIdx : 0]?.large || '食費');
  }
}

function clearManualEntry() {
  manualItems = [];
  document.getElementById('manual-store').value = '手入力';
  // 店舗選択UIをリセット
  const storeLabel = document.getElementById('store-select-label');
  if (storeLabel) { storeLabel.textContent = '店舗を選択'; storeLabel.style.color = 'var(--text-dim)'; }
  document.querySelectorAll('.store-select-opt').forEach(el => el.classList.remove('active'));
  const storeTxt = document.getElementById('manual-store-text');
  if (storeTxt) storeTxt.value = '';
  document.getElementById('manual-time').value = '';
  const today = new Date();
  const pad = n => String(n).padStart(2, '0');
  document.getElementById('manual-date').value = `${today.getFullYear()}-${pad(today.getMonth()+1)}-${pad(today.getDate())}`;
  document.getElementById('manual-item-name').value = '';
  document.getElementById('manual-item-price').value = '';
  renderManualItems();
  // 支出/収入トグルをリセット
  setManualEntryType('expense');
}

// ===== 手入力：日付前後移動 =====
function manualDateShift(delta) {
  const input = document.getElementById('manual-date');
  const current = input.value;
  const d = current ? new Date(current + 'T00:00:00') : new Date();
  d.setDate(d.getDate() + delta);
  const pad = n => String(n).padStart(2, '0');
  input.value = `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}`;
}

// ===== 手入力：店舗名 =====
let _storeMode = 'select'; // 'select' | 'input'

function setStoreMode(mode) {
  _storeMode = mode;
  const accentTextColor = document.body.classList.contains('theme-light') ? '#fff' : '#111';
  const isSelect = mode === 'select';
  document.getElementById('store-select-wrap').style.display = isSelect ? 'block' : 'none';
  document.getElementById('store-input-wrap').style.display = isSelect ? 'none' : 'block';
  const selBtn = document.getElementById('store-mode-select-btn');
  const inpBtn = document.getElementById('store-mode-input-btn');
  if (selBtn) {
    selBtn.style.background    = isSelect ? 'var(--accent)' : 'var(--surface2)';
    selBtn.style.color         = isSelect ? accentTextColor : 'var(--text-dim)';
    selBtn.style.borderColor   = isSelect ? 'var(--accent)' : 'var(--border)';
    selBtn.style.fontWeight    = isSelect ? '700' : '400';
  }
  if (inpBtn) {
    inpBtn.style.background    = isSelect ? 'var(--surface2)' : 'var(--accent)';
    inpBtn.style.color         = isSelect ? 'var(--text-dim)' : accentTextColor;
    inpBtn.style.borderColor   = isSelect ? 'var(--border)' : 'var(--accent)';
    inpBtn.style.fontWeight    = isSelect ? '400' : '700';
  }
  // hidden に値を同期
  if (isSelect) {
    const lbl = document.getElementById('store-select-label');
    const v = lbl ? lbl.textContent : '';
    document.getElementById('manual-store').value = (v && v !== '店舗を選択') ? v : '手入力';
  } else {
    const txt = document.getElementById('manual-store-text');
    document.getElementById('manual-store').value = (txt && txt.value.trim()) ? txt.value.trim() : '手入力';
  }
}

function toggleStoreDropdown() {
  const list = document.getElementById('store-select-list');
  const arrow = document.getElementById('store-select-arrow');
  const trigger = list.previousElementSibling;
  const isHidden = list.style.display === 'none' || list.style.display === '';
  if (isHidden && trigger) {
    const rect = trigger.getBoundingClientRect();
    const spaceBelow = window.innerHeight - rect.bottom;
    const spaceAbove = rect.top;
    const maxH = 200;
    if (spaceBelow < maxH && spaceAbove > spaceBelow) {
      list.style.top = 'auto';
      list.style.bottom = '100%';
      list.style.marginTop = '0';
      list.style.marginBottom = '4px';
    } else {
      list.style.top = '100%';
      list.style.bottom = 'auto';
      list.style.marginTop = '4px';
      list.style.marginBottom = '0';
    }
  }
  list.style.display = isHidden ? 'block' : 'none';
  arrow.textContent = isHidden ? '▲' : '▼';
}

function chooseStore(name) {
  document.getElementById('store-select-label').textContent = name;
  document.getElementById('store-select-label').style.color = 'var(--text)';
  document.getElementById('store-select-list').style.display = 'none';
  document.getElementById('store-select-arrow').textContent = '▼';
  document.getElementById('manual-store').value = name;
  document.querySelectorAll('.store-select-opt').forEach(el => {
    el.classList.toggle('active', el.textContent === name);
  });
}

function rebuildStoreDropdown() {
  const list = document.getElementById('store-select-list');
  if (!list) return;
  const stores = loadStoreDefFromStorage();
  list.innerHTML = '';
  if (stores.length === 0) {
    const div = document.createElement('div');
    div.style.cssText = 'padding:10px 12px;font-size:13px;color:var(--text-dim);';
    div.textContent = '登録済み店舗がありません';
    list.appendChild(div);
    return;
  }
  const current = document.getElementById('manual-store').value;
  stores.forEach(s => {
    const div = document.createElement('div');
    div.className = 'manual-cat-opt store-select-opt' + (s.name === current ? ' active' : '');
    div.textContent = s.name;
    div.onclick = () => chooseStore(s.name);
    list.appendChild(div);
  });
}

function showManualStatus(type, msg) {
  if (type === 'loading') { showStatus(type, msg); return; }

  // 成功・エラーは「保存する」ボタンのすぐ上に表示する
  const el = document.getElementById('manual-save-msg');
  if (!el) { showStatus(type, msg); setTimeout(hideStatus, 3000); return; }
  el.textContent = msg;
  el.style.color = (type === 'error') ? 'var(--danger)' : 'var(--accent)';
  el.style.display = 'block';
  clearTimeout(el._hideTimer);
  el._hideTimer = setTimeout(() => {
    el.style.display = 'none';
    el.textContent = '';
  }, 3000);
}
</script>

<!-- ボトムナビゲーション タブ -->
<div class="tabs">
  <div class="tab active" onclick="switchTab('upload')">📷 追加</div>
  <div class="tab" onclick="switchTab('history')">📋 履歴</div>
  <div class="tab" onclick="switchTab('stats')">📊 集計</div>
</div>

</html>