/* ===========================================================
   テーマ変数
   -----------------------------------------------------------
   :root にライトテーマ、[data-theme="dark"] にダークテーマを定義。
   固定色はすべて var(--xxx) 参照に置換している。
   app.js の CAT_COLORS も同じ --cat-* 変数を参照しており、
   data-theme 属性を切り替えるだけでインライン style の var() が
   再解決されるため、再描画なしでテーマが切り替わる。
   =========================================================== */
:root {
  /* タイポ役割（見出し=丸ゴ / 本文=角ゴ / 数値・ラベル=等幅台帳） */
  --font-body: 'Zen Kaku Gothic New', sans-serif;
  --font-display: 'Zen Maru Gothic', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* 地色・テキスト（冷たいセージ寄りの紙＝暖色クリームを避ける） */
  --bg: #eef1ea;
  --text: #17231c;
  --text-muted: #5f7065;
  --text-faint: #8a978d;
  --text-dim: #b3bcb4;
  --text-soft: #46544b;

  /* 面 */
  --card-bg: #ffffff;
  --modal-bg: #ffffff;
  --surface: #f5f7f1;
  --surface-2: #e7ece2;
  --surface-3: #eaeee6;
  --image-area-bg: #eef1ea;
  --image-loading-bg: rgba(238,241,234,0.82);

  /* 罫線 */
  --border: #d9e0d6;
  --border-strong: #b6c2b6;
  --divider: #d2dacf;
  --reorder-outline: #20663f;

  /* ブランド（バジル緑＝主役 / 柑橘＝アクセント） */
  --primary: #20663f;
  --primary-strong: #154a2c;
  --on-primary: #ffffff;
  --on-accent: #ffffff;
  --accent: #e2622a;
  --accent-strong: #c44f1e;
  --header-grad-1: #1c5a38;
  --header-grad-2: #2a7a4c;
  --focus-border: #20663f;
  --focus-ring: rgba(32,102,63,0.16);
  --primary-soft: #2c7a4c;
  --placeholder: #aab4ab;

  /* トースト / シャドウ */
  --toast-bg: #17231c;
  --shadow-sm: rgba(23,35,28,0.07);
  --shadow-md: rgba(23,35,28,0.05);
  --shadow-strong: rgba(23,35,28,0.22);

  /* セマンティック（情報/警告/危険/成功） */
  --info-bg: #e8f4fd;
  --info-bg-active: #bbdefb;
  --info-fg: #1976d2;
  --warn-bg: #fff3e0;
  --warn-bg-active: #ffe0b2;
  --warn-fg: #e65100;
  --warn-border: #ffcc80;
  --warn-bg-2: #fff3e0;
  --danger-bg: #ffebee;
  --danger-bg-active: #ef9a9a;
  --danger-fg: #e57373;
  --danger-strong: #c62828;
  --danger-strong-active: #8e0000;
  --danger-soft-bg: #fce4ec;
  --danger-soft-bg-active: #f8bbd0;
  --success: #2e7d32;
  --dimmed-bg: #f9f9f9;
  --dimmed-border: #ccc;

  /* カテゴリカラー（bg=暗背景での地, accent=主役, light=中間） */
  --cat-all-accent: #20663f;   --cat-all-light: #cfe0d3;
  --cat-veg-bg: #e8f5e9;       --cat-veg-accent: #2e7d32;       --cat-veg-light: #c8e6c9;
  --cat-meat-bg: #fce4ec;      --cat-meat-accent: #c62828;      --cat-meat-light: #f8bbd0;
  --cat-fish-bg: #e0f7fa;      --cat-fish-accent: #00838f;      --cat-fish-light: #b2ebf2;
  --cat-dairy-bg: #e3f2fd;     --cat-dairy-accent: #1565c0;     --cat-dairy-light: #bbdefb;
  --cat-grain-bg: #fff8e1;     --cat-grain-accent: #f57f17;     --cat-grain-light: #ffecb3;
  --cat-season-bg: #f3e5f5;    --cat-season-accent: #6a1b9a;    --cat-season-light: #e1bee7;
  --cat-canned-bg: #e0f2f1;    --cat-canned-accent: #00695c;    --cat-canned-light: #b2dfdb;
  --cat-frozen-bg: #e8eaf6;    --cat-frozen-accent: #283593;    --cat-frozen-light: #c5cae9;
  --cat-drink-bg: #e1f5fe;     --cat-drink-accent: #01579b;     --cat-drink-light: #b3e5fc;
  --cat-sweets-bg: #fff0f5;    --cat-sweets-accent: #d81b60;    --cat-sweets-light: #f8bbd0;
  --cat-baking-bg: #fff8f0;    --cat-baking-accent: #d4691e;    --cat-baking-light: #ffd5b0;
  --cat-deli-bg: #fff3e0;      --cat-deli-accent: #e65100;      --cat-deli-light: #ffe0b2;
  --cat-detergent-bg: #f1f8e9; --cat-detergent-accent: #33691e; --cat-detergent-light: #dcedc8;
  --cat-hygiene-bg: #fafafa;   --cat-hygiene-accent: #37474f;   --cat-hygiene-light: #eceff1;
  --cat-daily-bg: #efebe9;     --cat-daily-accent: #4e342e;     --cat-daily-light: #d7ccc8;
  --cat-other-bg: #f5f5f5;     --cat-other-accent: #757575;     --cat-other-light: #eeeeee;
}

[data-theme="dark"] {
  /* 地色・テキスト（夜の市場＝深い藍緑ベース） */
  --bg: #121915;
  --text: #e4ecdf;
  --text-muted: #9aa89c;
  --text-faint: #7c8a7e;
  --text-dim: #5d6960;
  --text-soft: #b1bdaf;

  /* 面 */
  --card-bg: #1c2620;
  --modal-bg: #1c2620;
  --surface: #18211b;
  --surface-2: #25322a;
  --surface-3: #25322a;
  --image-area-bg: #18211b;
  --image-loading-bg: rgba(18,25,21,0.82);

  /* 罫線 */
  --border: #2d3a31;
  --border-strong: #3d4d41;
  --divider: #2d3a31;
  --reorder-outline: #5aa777;

  /* ブランド（主役色を反転：明るいライムバジル / 柑橘は据え置き寄り） */
  --primary: #79c598;
  --primary-strong: #5aa777;
  --on-primary: #0e1611;
  --on-accent: #0e1611;
  --accent: #f0824a;
  --accent-strong: #e2622a;
  --header-grad-1: #112e1f;
  --header-grad-2: #1d4a31;
  --focus-border: #79c598;
  --focus-ring: rgba(121,197,152,0.2);
  --primary-soft: #79c598;
  --placeholder: #5d6960;

  /* トースト / シャドウ */
  --toast-bg: #25322a;
  --shadow-sm: rgba(0,0,0,0.4);
  --shadow-md: rgba(0,0,0,0.35);
  --shadow-strong: rgba(0,0,0,0.55);

  /* セマンティック */
  --info-bg: #1f2d3a;
  --info-bg-active: #2a3f52;
  --info-fg: #7db4e8;
  --warn-bg: #352918;
  --warn-bg-active: #43341d;
  --warn-fg: #ffb74d;
  --warn-border: #5a431f;
  --warn-bg-2: #352918;
  --danger-bg: #3a2420;
  --danger-bg-active: #4d2f2a;
  --danger-fg: #ef9a9a;
  --danger-strong: #c0564f;
  --danger-strong-active: #d97a73;
  --danger-soft-bg: #3a2228;
  --danger-soft-bg-active: #4d2c34;
  --success: #66bb6a;
  --dimmed-bg: #241d18;
  --dimmed-border: #4a3d34;

  /* カテゴリカラー（色相維持・bg暗/accent明/light中間） */
  --cat-all-accent: #79c598;   --cat-all-light: #243a2c;
  --cat-veg-bg: #1e2a1f;       --cat-veg-accent: #81c784;       --cat-veg-light: #33402f;
  --cat-meat-bg: #2e1f24;      --cat-meat-accent: #ef9a9a;      --cat-meat-light: #42282f;
  --cat-fish-bg: #15241f;      --cat-fish-accent: #4dd0e1;      --cat-fish-light: #243d40;
  --cat-dairy-bg: #172430;     --cat-dairy-accent: #64b5f6;     --cat-dairy-light: #243646;
  --cat-grain-bg: #2c2616;     --cat-grain-accent: #ffb74d;     --cat-grain-light: #3d3520;
  --cat-season-bg: #261d2b;    --cat-season-accent: #ce93d8;    --cat-season-light: #382a40;
  --cat-canned-bg: #15241f;    --cat-canned-accent: #4db6ac;    --cat-canned-light: #22332f;
  --cat-frozen-bg: #1b1d2e;    --cat-frozen-accent: #7986cb;    --cat-frozen-light: #2a2d42;
  --cat-drink-bg: #152631;     --cat-drink-accent: #4fc3f7;     --cat-drink-light: #22384a;
  --cat-sweets-bg: #2e1d24;    --cat-sweets-accent: #f06292;    --cat-sweets-light: #42272f;
  --cat-baking-bg: #2c2218;    --cat-baking-accent: #e8a366;    --cat-baking-light: #3d3022;
  --cat-deli-bg: #2d2316;      --cat-deli-accent: #ffa726;      --cat-deli-light: #3f3320;
  --cat-detergent-bg: #202a18; --cat-detergent-accent: #aed581; --cat-detergent-light: #2e3d24;
  --cat-hygiene-bg: #22262a;   --cat-hygiene-accent: #90a4ae;   --cat-hygiene-light: #333a40;
  --cat-daily-bg: #241e1a;     --cat-daily-accent: #bcaaa4;     --cat-daily-light: #382e28;
  --cat-other-bg: #262321;     --cat-other-accent: #bdbdbd;     --cat-other-light: #36322f;
}

/* ===== リセット & ベース ===== */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding-bottom: max(56px, env(safe-area-inset-bottom, 56px));
  transition: background 0.25s, color 0.25s;
}

/* ===== ユーティリティ ===== */
.hidden { display: none !important; }

/* ===== ヘッダー ===== */
.header {
  background: linear-gradient(135deg, var(--header-grad-1) 0%, var(--header-grad-2) 100%);
  padding: 16px 16px 12px;
  padding-top: max(16px, env(safe-area-inset-top, 16px));
  position: sticky; top: 0; z-index: 50;
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 1px 0 rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.25);
}
.header-inner {
  max-width: 600px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
}
.list-selector-btn {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px; padding: 6px 12px;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; color: #fff; text-align: left;
  min-height: 44px;
}
.list-selector-btn:active { background: rgba(255,255,255,0.22); }
#current-list-name {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.list-chevron { font-size: 10px; opacity: 0.7; flex-shrink: 0; }
.subtitle { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.7); white-space: nowrap; letter-spacing: 0.02em; }
.header-actions { display: flex; gap: 6px; flex-shrink: 0; }
.icon-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer; color: #fff;
  transition: background 0.15s;
}
.icon-btn:active { background: rgba(255,255,255,0.28); }

/* ===== カード ===== */
.card {
  background: var(--card-bg); border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px var(--shadow-sm), 0 4px 12px var(--shadow-md);
  margin: 12px; padding: 14px;
  max-width: 600px;
}
@media (min-width: 624px) { .card { margin-left: auto; margin-right: auto; } }

/* ===== 入力エリア ===== */
.input-row { display: flex; gap: 8px; margin-bottom: 8px; }
.main-input {
  flex: 1; padding: 13px 14px; font-size: 16px;
  border: 1.5px solid var(--border); border-radius: 12px;
  outline: none; background: var(--surface); color: var(--text);
  font-family: var(--font-body);
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 50px;
}
.main-input:focus { border-color: var(--focus-border); box-shadow: 0 0 0 3px var(--focus-ring); }
.add-btn {
  background: var(--accent); color: var(--on-accent); border: none;
  border-radius: 12px; width: 50px; min-height: 50px;
  font-size: 24px; cursor: pointer; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s; flex-shrink: 0;
}
.add-btn:active { background: var(--accent-strong); transform: scale(0.94); }

.input-row2 { display: flex; gap: 8px; align-items: stretch; }
.qty-unit-input {
  flex: 1; padding: 10px 12px; font-size: 15px;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--surface); outline: none; color: var(--text);
  font-family: var(--font-body);
  transition: border-color 0.15s, box-shadow 0.15s; min-height: 44px;
}
.qty-unit-input:focus { border-color: var(--focus-border); box-shadow: 0 0 0 3px var(--focus-ring); }
.qty-unit-input::placeholder { color: var(--placeholder); font-size: 13px; }
.memo-toggle-btn {
  padding: 10px 14px; font-size: 13px; border: none;
  border-radius: 10px; cursor: pointer;
  color: var(--primary-soft); font-weight: 600; background: var(--surface-2);
  font-family: var(--font-body);
  transition: background 0.15s; min-height: 44px; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.memo-toggle-btn.active { background: var(--border); }
.memo-input {
  width: 100%; margin-top: 8px; padding: 10px 12px; font-size: 15px;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--surface); outline: none; resize: none; color: var(--text);
  font-family: var(--font-body); transition: border-color 0.15s;
}
.memo-input:focus { border-color: var(--focus-border); }

/* ===== 検索 ===== */
.search-input {
  display: block; width: 100%; padding: 10px 14px; font-size: 15px;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--card-bg); outline: none; color: var(--text);
  font-family: var(--font-body);
  transition: border-color 0.15s, box-shadow 0.15s;
  margin-bottom: 10px; min-height: 44px;
}
.search-input:focus { border-color: var(--focus-border); box-shadow: 0 0 0 3px var(--focus-ring); }
.search-input::-webkit-search-cancel-button { cursor: pointer; }

/* ===== フィルターエリア ===== */
.filter-area { max-width: 600px; margin: 6px 12px 0; }
@media (min-width: 624px) { .filter-area { margin-left: auto; margin-right: auto; } }

.sort-btns { display: flex; gap: 8px; margin-bottom: 10px; }
.sort-btn {
  padding: 0 18px; font-size: 13px; min-height: 36px;
  border: 1.5px solid var(--border-strong); border-radius: 20px;
  cursor: pointer; background: var(--card-bg); color: var(--primary-soft);
  font-family: var(--font-body); font-weight: 600;
  transition: all 0.15s; display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.sort-btn.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.sort-btn:active { transform: scale(0.96); }
.reorder-btn.active { background: var(--success); border-color: var(--success); color: #fff; }

.cat-chips {
  display: flex; gap: 8px;
  overflow-x: auto; flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 4px;
}
.cat-chips::-webkit-scrollbar { display: none; }

.cat-chip {
  padding: 6px 14px; font-size: 13px; border-radius: 20px;
  cursor: pointer; font-family: var(--font-body);
  font-weight: 600; transition: all 0.15s; white-space: nowrap;
  border: 1.5px solid; min-height: 34px; display: flex; align-items: center;
  flex-shrink: 0;
}
.cat-chip:active { transform: scale(0.95); }

/* ===== リストエリア ===== */
.list-area { max-width: 600px; margin: 10px 12px 0; padding: 0; }
@media (min-width: 624px) { .list-area { margin-left: auto; margin-right: auto; } }

.empty-state { text-align: center; padding: 64px 0; animation: fadeIn 0.3s ease; }
.empty-state .empty-icon { font-size: 56px; }
.empty-state p { color: var(--text-faint); margin-top: 12px; font-family: var(--font-display); font-size: 15px; }

.cat-group { margin-bottom: 14px; animation: fadeIn 0.3s ease; }
.cat-group-header {
  display: inline-flex; align-items: center;
  padding: 6px 16px; border-radius: 9px 9px 0 0;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; color: var(--on-accent); letter-spacing: 0.04em;
}
/* 見出しタブ直下の行は左上の角丸を落とし、タブの左辺と段差なく繋ぐ */
.cat-group-header + .item-row { border-top-left-radius: 0; }

.checked-section { margin-top: 20px; }
.checked-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--text-faint); font-weight: 600;
  padding: 4px 2px 10px; border-top: 1px dashed var(--divider);
}
.clear-checked-btn {
  font-size: 12px; padding: 4px 10px; border-radius: 8px;
  background: var(--danger-bg); border: none; color: var(--danger-fg);
  cursor: pointer; font-family: var(--font-body);
  font-weight: 600; transition: background 0.15s;
}
.clear-checked-btn:active { background: var(--danger-bg-active); }

/* ===== アイテム行 ===== */
.item-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 10px; border-radius: 12px; margin-bottom: 7px;
  border-left: 4px solid;
  transition: transform 0.1s, opacity 0.2s;
  animation: fadeIn 0.25s ease;
  position: relative;
}
.item-row.dragging { opacity: 0.4; }
.item-row.drag-over { box-shadow: 0 -3px 0 var(--primary); }

/* 並び替えモード：リスト全体に薄い枠 */
.list-area.reorder-mode { outline: 2px dashed var(--reorder-outline); border-radius: 12px; padding: 4px; }

.drag-handle {
  background: none; border: none; cursor: grab;
  padding: 0; flex-shrink: 0; color: var(--text-dim);
  min-width: 24px; min-height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; touch-action: none;
}
.drag-handle:active { cursor: grabbing; }
/* ドラッグハンドルは追加順のみ表示 */
.sort-category .drag-handle { display: none; }

.check-area {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; flex-shrink: 0;
}
.check-btn {
  background: none; border: none; cursor: pointer;
  padding: 0;
  min-width: 36px; min-height: 36px;
  display: flex; align-items: center; justify-content: center;
  margin: -2px 0;
}
.check-circle {
  width: 28px; height: 28px; border-radius: 8px; border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.1s; font-size: 13px; color: var(--on-accent);
}
.check-btn:active .check-circle { transform: scale(0.9); }

.item-body { flex: 1; min-width: 0; }
.item-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.item-name {
  font-size: 16px; font-weight: 600;
  font-family: var(--font-display);
  transition: color 0.2s, text-decoration 0.2s; word-break: break-word;
}
.item-name.checked { text-decoration: line-through; color: var(--text-dim); }
.qty-badge {
  font-family: var(--font-mono); font-feature-settings: 'tnum' 1;
  font-size: 12px; padding: 2px 8px; border-radius: 6px; font-weight: 500;
  letter-spacing: -0.02em; flex-shrink: 0;
}
.classify-btn {
  font-size: 11px; padding: 3px 9px; border-radius: 8px;
  background: var(--warn-bg-2); color: var(--warn-fg); border: 1px solid var(--warn-border);
  cursor: pointer; font-family: var(--font-body);
  font-weight: 600; min-height: 28px; transition: background 0.15s;
}
.classify-btn:active { background: var(--warn-bg-active); }
.item-memo { margin: 5px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.item-cat-label { font-size: 11px; margin-top: 4px; display: block; opacity: 0.75; font-weight: 500; }
.item-image-icon { font-size: 16px; line-height: 1; opacity: 0.85; }

.item-actions { display: flex; gap: 4px; flex-shrink: 0; margin-top: -2px; }
.edit-btn {
  background: var(--info-bg); border: none; color: var(--info-fg);
  border-radius: 8px; min-width: 34px; min-height: 34px;
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.delete-btn {
  background: var(--danger-bg); border: none; color: var(--danger-fg);
  border-radius: 8px; min-width: 34px; min-height: 34px;
  cursor: pointer; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.item-row:hover .edit-btn,
.item-row:hover .delete-btn { opacity: 1; }
@media (hover: none), (max-width: 600px) {
  .edit-btn, .delete-btn { opacity: 1 !important; }
}
.edit-btn:active { background: var(--info-bg-active); }
.delete-btn:active { background: var(--danger-bg-active); }

/* ドラッグゴースト */
.drag-ghost {
  position: fixed; z-index: 999; pointer-events: none;
  opacity: 0.88; box-shadow: 0 8px 28px var(--shadow-strong);
  border-radius: 12px; transform: scale(1.02);
}
.drag-placeholder {
  border-radius: 12px; margin-bottom: 7px;
  border: 2px dashed var(--focus-border); background: var(--focus-ring);
}

/* ===== モーダル ===== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 100; animation: overlayIn 0.2s ease;
}
.modal {
  background: var(--modal-bg); border-radius: 20px 20px 0 0;
  width: 100%; max-width: 600px; padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  max-height: 82vh; overflow-y: auto; animation: slideUp 0.3s ease;
}
.modal::before {
  content: ''; display: block; width: 36px; height: 4px;
  background: var(--divider); border-radius: 2px; margin: 0 auto 16px;
}
.modal-title { font-family: var(--font-display); font-size: 18px; color: var(--text); margin-bottom: 4px; }
.modal-subtitle { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.5; }
.modal-label {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--text-faint); font-weight: 500;
  margin: 14px 0 6px; text-transform: uppercase; letter-spacing: 0.08em;
}
.modal-cat-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.modal-cat-btn {
  padding: 7px 14px; font-size: 13px; border-radius: 20px;
  border: none; cursor: pointer; font-family: var(--font-body);
  font-weight: 600; transition: all 0.15s; min-height: 36px;
}
.modal-cat-btn:active { transform: scale(0.95); }
.modal-input {
  width: 100%; padding: 12px 14px; font-size: 16px;
  border: 1.5px solid var(--border); border-radius: 10px;
  outline: none; background: var(--surface); color: var(--text);
  font-family: var(--font-body); min-height: 48px;
}
.modal-input:focus { border-color: var(--focus-border); box-shadow: 0 0 0 3px var(--focus-ring); }
.modal-btns { display: flex; gap: 10px; margin-top: 18px; }
.modal-btns-top { margin-top: 12px; }
.modal-cancel-btn {
  flex: 1; padding: 14px; background: var(--surface-3); border: none;
  border-radius: 12px; font-size: 15px; cursor: pointer; color: var(--text-soft);
  font-family: var(--font-body); font-weight: 600; min-height: 50px;
}
.modal-ok-btn {
  flex: 2; padding: 14px; background: var(--primary); border: none;
  border-radius: 12px; font-size: 15px; cursor: pointer; color: var(--on-primary);
  font-weight: 700; font-family: var(--font-body);
  transition: background 0.15s; min-height: 50px;
}
.modal-ok-btn:active { background: var(--primary-strong); }
.modal-ok-btn--danger { background: var(--danger-strong); color: #fff; }
.modal-ok-btn--danger:active { background: var(--danger-strong-active); }

/* ===== 写真確認モーダル ===== */
.photo-confirm-modal { padding-bottom: max(24px, env(safe-area-inset-bottom, 24px)); }

.photo-confirm-image-area {
  position: relative; width: 100%; height: 220px;
  background: var(--image-area-bg); border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}

.photo-confirm-img {
  width: 100%; height: 100%; object-fit: contain;
}

.photo-confirm-name {
  text-align: center; font-size: 1.1rem; font-weight: 700;
  color: var(--primary); margin: 0 0 16px;
}

/* ===== アイテム詳細ポップアップ ===== */
.item-detail-modal { padding-bottom: max(24px, env(safe-area-inset-bottom, 24px)); }

.item-detail-image-area {
  position: relative; width: 100%; height: 220px;
  background: var(--image-area-bg); border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.item-detail-img {
  width: 100%; height: 100%; object-fit: contain;
}
.item-detail-no-image {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-faint);
}
.item-detail-no-image-icon { font-size: 40px; }
.item-detail-no-image-text { font-size: 13px; }
.item-detail-image-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--image-loading-bg);
}
.item-detail-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border); border-top-color: var(--primary);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}

.item-detail-img-btns {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.item-detail-upload-label {
  flex: 1; padding: 12px; text-align: center;
  background: var(--surface-3); border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--primary);
  cursor: pointer; font-family: var(--font-body);
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.item-detail-upload-label:active { background: var(--border); }
.item-detail-delete-img-btn {
  padding: 12px 16px; background: var(--danger-soft-bg); border: none;
  border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--danger-strong);
  cursor: pointer; font-family: var(--font-body);
  min-height: 44px; transition: background 0.15s;
}
.item-detail-delete-img-btn:active { background: var(--danger-soft-bg-active); }

.item-detail-info { margin-bottom: 4px; }
.item-detail-field-name {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; margin-bottom: 4px;
}
.item-detail-field-qty {
  font-size: 15px; color: var(--text-soft); margin-bottom: 6px;
}
.item-detail-field-memo {
  font-size: 14px; color: var(--text-muted); margin-bottom: 6px; line-height: 1.5;
}
.item-detail-field-cat {
  font-size: 13px; font-weight: 600;
}

/* ===== リスト管理パネル ===== */
.lists-container { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px; background: var(--surface);
  border: 1.5px solid var(--border);
}
.list-item.active { background: var(--surface-2); border-color: var(--focus-border); }
.list-item-name {
  flex: 1; font-size: 15px; font-weight: 600;
  font-family: var(--font-display); cursor: pointer;
}
.list-item-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.list-rename-btn, .list-delete-btn {
  background: none; border: none; cursor: pointer;
  padding: 4px 8px; border-radius: 8px; font-size: 16px;
  min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center;
}
.list-rename-btn:active { background: var(--border); }
.list-delete-btn { color: var(--danger-fg); }
.list-delete-btn:active { background: var(--danger-bg); }
.new-list-btn {
  width: 100%; padding: 14px; background: var(--surface-2); border: 1.5px dashed var(--border-strong);
  border-radius: 12px; font-size: 15px; cursor: pointer; color: var(--primary-soft);
  font-family: var(--font-body); font-weight: 600; min-height: 50px;
}
.new-list-btn:active { background: var(--border); }

/* ===== カテゴリ管理 ===== */
.cat-manage-list { display: flex; flex-direction: column; gap: 8px; }
.cat-manage-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
}
.cat-manage-label {
  flex: 1; font-size: 14px; font-weight: 600;
  font-family: var(--font-body);
}
.cat-rename-btn, .cat-delete-btn {
  background: none; border: none; cursor: pointer;
  padding: 4px 8px; border-radius: 8px; font-size: 15px;
  min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center;
}
.cat-rename-btn:active { background: var(--border); }
.cat-delete-btn { color: var(--danger-fg); }
.cat-delete-btn:active { background: var(--danger-bg); }

/* ===== トースト ===== */
.toast {
  position: fixed; bottom: max(32px, env(safe-area-inset-bottom, 32px));
  left: 50%; transform: translateX(-50%);
  background: var(--toast-bg); color: #fff; padding: 11px 22px;
  border-radius: 22px; font-size: 14px; z-index: 200;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  animation: toastIn 0.3s ease; pointer-events: none;
  max-width: calc(100vw - 32px); white-space: normal; text-align: center;
}
.toast.has-undo { pointer-events: auto; display: flex; align-items: center; gap: 12px; }
.toast-undo-btn {
  background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.4);
  color: #fff; border-radius: 8px; padding: 4px 12px; font-size: 13px;
  cursor: pointer; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}

/* ===== ローディング ===== */
.loading-overlay {
  position: fixed; inset: 0; background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; z-index: 300;
}
.loading-overlay p { color: var(--text-faint); margin-top: 14px; font-family: var(--font-display); }
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border); border-top-color: var(--focus-border);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}

/* ===== アニメーション ===== */
@keyframes fadeIn   { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideUp  { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes overlayIn{ from { opacity:0; } to { opacity:1; } }
@keyframes toastIn  { from { opacity:0; transform:translateX(-50%) translateY(16px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes spin     { to { transform:rotate(360deg); } }

/* ===== 献立レコメンド ===== */
.recipe-source-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.recipe-source-btn { flex: 1; justify-content: center; }

.recipe-result {
  min-height: 120px; max-height: 50vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
}
.recipe-loading { display: flex; justify-content: center; align-items: center; min-height: 120px; }
.recipe-message {
  text-align: center; color: var(--text-muted); font-size: 14px;
  line-height: 1.7; padding: 24px 8px;
}

.recipe-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
}
.recipe-item-head { display: flex; align-items: center; gap: 8px; }
.recipe-item-title {
  flex: 1; font-size: 14px; font-weight: 600; color: var(--text);
  text-decoration: none; line-height: 1.4;
}
.recipe-item-materials {
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
}
a.recipe-item-title { color: var(--focus-border); }
a.recipe-item-title:hover { text-decoration: underline; }
.recipe-item-tag {
  flex-shrink: 0; font-size: 11px; font-weight: 600;
  color: var(--primary-soft); background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 2px 8px; white-space: nowrap;
}

.recipe-credit { font-size: 11px; color: var(--text-muted); text-align: right; margin-top: 10px; }
.recipe-credit a { color: var(--focus-border); }

/* 材料指定モード */
.recipe-ingredient-picker { margin-bottom: 14px; }
.recipe-ing-input-row { display: flex; gap: 8px; }
.recipe-ing-input-row .modal-input { flex: 1; margin: 0; }
.recipe-ing-add-btn, .recipe-ing-search-btn {
  border: none; cursor: pointer; border-radius: 10px;
  background: var(--primary); color: var(--on-primary);
  font-family: var(--font-body); font-weight: 600;
}
.recipe-ing-add-btn { padding: 0 16px; min-height: 40px; white-space: nowrap; flex-shrink: 0; }
.recipe-ing-search-btn { width: 100%; min-height: 42px; margin-top: 12px; font-size: 14px; }
.recipe-ing-add-btn:active, .recipe-ing-search-btn:active { transform: scale(0.98); }

.recipe-ing-selected { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.recipe-ing-suggest-label { font-size: 12px; color: var(--text-muted); margin: 14px 0 6px; }
.recipe-ing-suggest { display: flex; flex-wrap: wrap; gap: 6px; }

.recipe-ing-chip {
  padding: 6px 12px; font-size: 13px; border-radius: 16px;
  border: 1.5px solid var(--border-strong); cursor: pointer;
  background: var(--card-bg); color: var(--primary-soft);
  font-family: var(--font-body); font-weight: 600;
}
.recipe-ing-chip:active { transform: scale(0.96); }
.recipe-ing-chip--selected { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.recipe-ing-chip--active { opacity: 0.45; cursor: default; }
.recipe-ing-empty { font-size: 13px; color: var(--text-muted); }

/* ===== フッター ===== */
.app-footer {
  max-width: 600px;
  margin: 8px auto 0;
  padding: 18px 16px 24px;
  text-align: center;
}
.app-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 8px;
}
.app-footer-links a {
  color: var(--primary);
  font-size: 13px;
  text-decoration: none;
}
.app-footer-links a:hover { text-decoration: underline; }
.app-footer-copy {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}

/* ===== 品質フロア：キーボードフォーカス / モーション配慮 ===== */
/* マウス・タッチ操作では枠を出さず、キーボード操作時のみ明示する */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* ヘッダー内の半透明ボタンは地色が濃いため白で縁取る */
.header :focus-visible,
.help-header :focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}