/* ============================================================
   Tomoro Hub — 共通の見た目（デザインシステム）
   決め事は docs/DESIGN.md。ここに無い見た目を足すときは、先に DESIGN.md に書き足す。
   テーマ: 黒（#14161A）のサイドバー・トップバー × 青1色（#2C5F8A）のアクセント（2026-09-16 CEO が案A）。

   このファイルの並び（後ろの節が前を上書きしないよう、1つのセレクタは1か所で決める）
     1. トークン（:root）        … 層1 原色 → 層2 意味 → 古い名前の別名
     2. 土台（リセット・文字）
     3. 枠（サイドバー・トップバー・本文）
     4. 部品（ボタン・欄・日付・パスワード・切り替え・表・カード・バッジ・指標・空状態・凡例・お知らせ・トースト・ダイアログ・スケルトン）
     5. 画面ごとの共通の部品（ログイン・顧客・分析・カルテ など。今の画面が使っている名前のまま）
     6. 幅ごとの指定
     7. 状態（フォーカス・押下）と「動きを減らす」設定
   2026-10-01 に「賞が取れる水準」の作業で組み直した（重なっていた HCI ブロック・死んだ指定・一律の演出を消した）。
   ============================================================ */

/* ============================================================
   1. トークン
   画面と部品は「層2 意味」の名前だけを使う。層1 は値の置き場で、画面からは直接使わない。
   古い名前（--gold-*・--wood-*・--primary・--border など）は層2・層1 の別名として末尾に残す。
   使う所を新しい名前に置き換え終えたら消す（tests/test_design_system.py が数を固定している）
   ============================================================ */
:root {
  /* ── 層1 原色（値だけ） ── */
  /* 墨・グレー（無彩色。2026-10-25 の試作で青みを抜いた。--ink-400 はグラフの比べる色なので値を変えない） */
  --ink-0: #FFFFFF;
  --ink-50: #F9F9F9;
  --ink-75: #F4F4F4;
  --ink-100: #F3F3F3;
  --ink-200: #E5E5E5;
  --ink-300: #D4D4D4;
  --ink-400: #9BA0A8;
  --ink-500: #737373;
  --ink-550: #666666;
  --ink-600: #4D4D4D;
  --ink-700: #363636;
  --ink-800: #212121;
  --ink-850: #303030;
  --ink-900: #0D0D0D;
  /* 第4弾: iOS のグループの地（設定アプリの灰色）とリンクの青（白地で 5.6:1） */
  --ink-grouped: #F2F2F7;
  --ios-blue: #0066CC;
  --ios-fill: rgba(118, 118, 128, 0.12);
  --ios-separator: rgba(60, 60, 67, 0.18);
  /* 青（アクセント）。薄い段は透明度で持つ（下の面の色に馴染ませる） */
  --blue-50: rgba(44, 95, 138, 0.06);
  --blue-80: rgba(44, 95, 138, 0.08);
  --blue-100: rgba(44, 95, 138, 0.10);
  --blue-200: rgba(44, 95, 138, 0.18);
  --blue-300: rgba(44, 95, 138, 0.36);
  --blue-400: #3E7CB1;
  --blue-500: #2C5F8A;
  --blue-600: #1F4666;
  --blue-700: #17222E;
  --blue-900: #10151C;
  /* 順序のある分類（松竹梅・年代）の濃淡4段（#123E5F・#2C5F8A・#5A7A9C・#7D95B2）。どれも白地で 3:1 以上、
     隣どうしの色差（ΔE2000）は 10 以上（2026-10-06。以前の #1F4666 と #2C5F8A は 8.8 で見分けにくく、#9BB3C9 は 2.2:1 だった） */
  --blue-800: #123E5F;
  --blue-tint-1: #5A7A9C;
  --blue-tint-2: #7D95B2;
  --blue-on-dark: #8FB8DC; /* 黒地の上のフォーカスの輪（#14161A に 8.7:1） */
  /* 状態（くすんだ色。原色は使わない） */
  --green-600: #1A6E3E;
  --green-50: #EAF2ED;
  --green-on-dark: #3F9A68;
  --amber-600: #9A5C00;
  --amber-50: #F6EFE3;
  --amber-on-dark: #D9A441;
  --red-600: #952626;
  --red-700: #7A2020;
  --red-50: #F6E9E9;
  --red-on-dark: #D07A7A;
  /* 種類（料理・ドリンク）とグラフの「比べる色」（2026-10-06 CEO「少しカラフルに」。docs/DESIGN.md 6・7章）。
     白地で 3:1 以上。状態の色（緑・琥珀・赤）・アクセントの青と、ふつうの見え方と1型・2型の色覚の見え方の
     どれでも色差（ΔE2000）が 11 以上離れるものを計算で選んだ。文字の色には使わない（印・線・棒だけ） */
  --ochre-500: #A98C60;  /* 黄土（料理） */
  --ochre-50: #F5F1EA;
  --teal-600: #1A8282;   /* 青緑（ドリンク） */
  --teal-50: #E8F3F3;
  --violet-400: #9673B5; /* 紫（グラフの2本目。赤み寄りで明るめにして、アクセントの青と明るさでも分ける） */
  --wine-600: #8E3A68;   /* えんじ（グラフの3本目） */
  --olive-500: #7E8C2C;  /* オリーブ（グラフの4本目） */

  /* ── 層2 意味（画面と部品はここだけを使う） ── */
  /* 面 */
  --color-bg-page: var(--ink-grouped); /* 第4弾: 灰色の地に白いまとまり（設定アプリの型）。第1弾は白 */
  --color-bg-surface: var(--ink-0);
  --color-bg-subtle: var(--ink-50);    /* 表の見出しの行・行のホバー */
  --color-bg-muted: var(--ink-75);     /* 無効の面・押下 */
  --color-bg-pressed: var(--ink-100);
  --color-bg-track: var(--ios-fill);   /* ページの上に置く切り替えの入れ物（ページの面と同じ色だと見えない） */
  /* 文字（どれも白地で 4.5:1 以上） */
  --color-text: var(--ink-900);        /* 見出し・値 */
  --color-text-2: var(--ink-600);      /* ラベル・表の見出し・二番手のボタン */
  --color-text-3: var(--ink-550);      /* 補足。これより薄い文字は使わない */
  --color-text-placeholder: var(--ink-500);
  --color-text-disabled: var(--color-text-3); /* 押せない文字も 4.5:1 以上（#6B707A は面 #F0F1F3 の上で 4.4:1 だった。R2O-20） */
  --color-text-badge: var(--ink-700);
  --color-icon: var(--ink-500);
  /* 線（1px の実線だけ。濃さは3段） */
  --color-border: var(--ink-200);        /* 区切り・カードの枠 */
  --color-border-strong: var(--ink-300); /* 欄の枠・表の見出しの下・二番手のボタン */
  --color-border-hover: var(--ink-400);
  /* アクセント（フォーカス・選んだ状態・今いる場所・リンク・グラフの主の系列だけ） */
  /* 試作（2026-10-25）: 選んだ状態・今いる場所は墨にする（青は フォーカス・リンク・グラフ・予約の確定の線に残す） */
  --color-accent: var(--ink-900);
  --color-accent-strong: var(--ink-800);
  --color-accent-subtle: rgba(13, 13, 13, 0.05);
  --color-accent-ring: rgba(13, 13, 13, 0.12);
  --color-on-accent: var(--ink-0);
  --color-link: var(--ios-blue);
  /* 黒（主ボタン・トースト・レジの黒い面）。サイドバー・トップバーは下の --color-nav-*（試作で明るくした） */
  --color-chrome: var(--ink-900);
  --color-chrome-pressed: var(--ink-850);
  --color-on-chrome: rgba(255, 255, 255, 0.95);
  --color-on-chrome-2: rgba(255, 255, 255, 0.8);
  --color-on-chrome-3: rgba(255, 255, 255, 0.72);
  --color-chrome-line: rgba(255, 255, 255, 0.08);
  --color-chrome-hover: rgba(255, 255, 255, 0.07);
  /* 明るい枠（サイドバー・トップバー。試作 2026-10-25。以前は黒の枠 --color-chrome） */
  --color-nav-bg: var(--ink-grouped);
  --color-nav-fg: var(--ink-700);
  --color-nav-fg-strong: var(--ink-900);
  --color-nav-fg-2: var(--ink-550);
  --color-nav-hover: rgba(13, 13, 13, 0.04);
  --color-nav-active: var(--ink-0);
  --color-nav-line: rgba(13, 13, 13, 0.06);
  --color-topbar-bg: var(--ink-grouped);
  /* ふきだし（AI相談の自分の発言） */
  --color-bubble: var(--ink-75);
  /* フォーカスの輪 */
  --color-focus: var(--ios-blue);
  --color-focus-on-chrome: var(--blue-on-dark);
  /* 状態: 文字・面・枠 */
  --color-success: var(--green-600);
  --color-success-bg: var(--green-50);
  --color-success-border: rgba(26, 110, 62, 0.24);
  --color-warning: var(--amber-600);
  --color-warning-bg: var(--amber-50);
  --color-warning-border: rgba(154, 92, 0, 0.24);
  --color-danger: var(--red-600);
  --color-danger-strong: var(--red-700);
  --color-danger-bg: var(--red-50);
  --color-danger-border: rgba(149, 38, 38, 0.24);
  --color-info: var(--blue-500);
  --color-info-bg: var(--blue-80);
  --color-info-border: var(--blue-200);
  /* 覆い（ダイアログ・引き出しの後ろ。ぼかしは使わない） */
  --color-scrim: rgba(13, 13, 13, 0.32);

  /* 予約の状態（予約ボードのブロック・凡例・カレンダー・レジで共通）。
     名前は予約の status の値に合わせる（confirmed・completed・no_show → noshow・cancelled）＋未割当 */
  --status-confirmed-bg: var(--ink-0);
  --status-confirmed-border: var(--ink-300);
  --status-confirmed-mark: var(--blue-500); /* 左の 4px の線 */
  --status-confirmed-fg: var(--ink-900);
  /* 完了（会計済み）は成功の色。レジの「会計済み」「済」と同じ色にそろえた（2026-10-06。以前は灰色で、
     同じ状態がレジでは緑・予約ボードでは灰と、画面で色が違っていた） */
  --status-completed-bg: var(--green-50);
  --status-completed-border: rgba(26, 110, 62, 0.24);
  --status-completed-mark: var(--green-600);
  --status-completed-fg: var(--green-600);
  --status-noshow-bg: var(--red-50);
  --status-noshow-border: rgba(149, 38, 38, 0.24);
  --status-noshow-mark: var(--red-600);
  --status-noshow-fg: var(--red-600);
  --status-cancelled-bg: var(--ink-100);
  --status-cancelled-border: var(--ink-200);
  --status-cancelled-mark: var(--ink-300);
  --status-cancelled-fg: var(--ink-550); /* 取り消し線と一緒に使う */
  --status-unassigned-bg: var(--amber-50);
  --status-unassigned-border: rgba(154, 92, 0, 0.24);
  --status-unassigned-mark: var(--amber-600);
  --status-unassigned-fg: var(--amber-600);

  /* 品の種類（料理・ドリンク）。全画面で意味を固定し、ほかの意味には使わない（DESIGN.md 6章）。
     使うのは小さな印だけ（左の 4px の線・8px の点・グラフの棒）。面を塗らない・文字の色にしない */
  --kind-food: var(--ochre-500);
  --kind-food-bg: var(--ochre-50);
  --kind-drink: var(--teal-600);
  --kind-drink-bg: var(--teal-50);

  /* 費用の区分。一覧のバッジは無彩色。内訳の帳面の棒は名前が横にあるので、1色（主役の青）で長さだけを読ませる
     （区分ごとに色を変えると意味の無い色分けになる。DESIGN.md 6・7章） */
  --cat-purchase: var(--blue-500);
  --cat-labor: var(--blue-500);
  --cat-fixed: var(--blue-500);
  --cat-other: var(--ink-300);

  /* グラフ（static/js/viz.js が getComputedStyle で読む） */
  /* 順序のある分類（松竹梅・年代）は青の濃淡（濃い順） */
  --chart-1: var(--blue-800);
  --chart-2: var(--blue-500);
  --chart-3: var(--blue-tint-1);
  --chart-4: var(--blue-tint-2);
  /* 種類の違うものを比べる線・棒（選んだ品・新規とリピート・仕入と売上など）は、この順に配る。
     料理・ドリンクの色（黄土・青緑）は使わない（種類の色をほかの意味に使わないため。DESIGN.md 6.1）。
     線は色に加えて線の形（実線・破線・点線）と点の形（丸・三角・四角・ひし形）も変える（viz.js） */
  --chart-cat-1: var(--blue-500);
  --chart-cat-2: var(--violet-400);
  --chart-cat-3: var(--wine-600);
  --chart-cat-4: var(--olive-500);
  /* グラフの主の系列（1系列・推移）。試作でアクセントを墨にしたので、グラフの青はここで持つ（viz.js が読む） */
  --chart-primary: var(--blue-500);
  --chart-food: var(--kind-food);
  --chart-drink: var(--kind-drink);
  --chart-other: var(--ink-300);
  --chart-compare: var(--ink-400);
  --chart-negative: var(--red-600);
  --chart-grid: var(--ink-200);
  --chart-text: var(--ink-600);

  /* 文字（7段。DESIGN.md 3章。基準は html の 18px） */
  /* 試作（2026-10-25）: 端末の書体（Web フォントを読まない）。Windows は Yu Gothic UI を先に（Semibold を持つ） */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Segoe UI Variable Text", "Segoe UI", "Yu Gothic UI", "Meiryo UI", system-ui, sans-serif;
  --fs-display: 2.353rem; /* 40px レジの合計・主役の数字 */
  --fs-stat: 2rem;        /* 36px 指標のタイルの数字 */
  --fs-h1: 2rem;      /* 30px ページの見出し */
  --fs-h2: 1.294rem;      /* 22px 画面の中の節 */
  --fs-h3: 1.176rem;      /* 20px カードの見出し・フォームの節 */
  --fs-body: 1rem;        /* 18px 本文・値 */
  --fs-ui: 0.941rem;        /* 16.2px ボタン・タブ・表のセル */
  --fs-label: 0.882rem;    /* 15.3px 欄のラベル・表の見出し・バッジ・補足。これより小さくしない */
  --fs-input: 1rem;  /* 16.9px 入力欄（16px 未満だと iPhone・iPad が押したときに拡大する） */
  --fw-regular: 400;      /* 太さは 400・500・600（端末の書体は 600 を持つ。試作で 700 から下げた） */
  --fw-medium: 500;
  --fw-bold: 600;
  --lh-display: 1.12;
  --lh-h1: 1.2;
  --lh-heading: 1.27;
  --lh-body: 1.5;
  --lh-paragraph: 1.7;
  --lh-ui: 1.3;

  /* 余白（4/8/16/24/48/64px。px で持つので基準の 18px に引きずられない）。
     「同じ仲間は 8、仲間の中の区切りは 24、違う話題は 48」 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 48px;
  --space-6: 64px;

  /* 押す所・欄の高さ */
  --control-h-sm: 44px;
  --control-h: 48px;
  --control-h-lg: 56px;
  --tap-min: 44px;

  /* 角丸（試作 2026-10-25。以前は 4〜6px）。小さな印 8・欄と切り替え 12・カードとダイアログ 16〜24・ボタンとチップは丸薬型 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 16px;
  --radius-sheet: 24px;
  --radius-pill: 999px;
  --radius-field: 10px;  /* 第4弾: 入力欄・検索欄・分割ボタン（iOS） */
  --radius-alert: 14px;  /* 第4弾: 確認・お知らせ・メニュー（iOS のアラート） */

  /* 浮いた層（候補の一覧・ポップオーバー・シート・ダイアログ）だけに影。カード・欄・表には付けない */
  --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-composer: 0 2px 12px rgba(0, 0, 0, 0.06);

  /* 動き（DESIGN.md 9章）。動かすのは transform・opacity と、名指しした色だけ。はね返りは使わない */
  --dur-press: 0ms;
  --dur-fast: 120ms;  /* 色・ホバー・押下からの戻り */
  --dur-base: 180ms;  /* 小さな部品の出入り（トースト・ポップオーバー） */
  --dur-slow: 240ms;  /* ダイアログ・ドロワー・引き出しのサイドバー */
  --dur-exit: 140ms;  /* 出るとき（入るときの約 3/4） */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  /* 押した手応えとシートの出だけに使う、少しだけ行き過ぎて戻る動き（試作 2026-10-25。tests/test_design_system.py が名前を限る） */
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --dur-press-in: 100ms;
  --dur-press-out: 150ms;
  --t-colors: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  --t-lift: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  --t-control: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-press-out) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out);

  /* 重なり */
  --z-sticky: 20;
  --z-back-to-top: 60;
  --z-scrim: 99;
  --z-sidebar: 100;
  --z-topbar: 200;
  --z-tooltip: 300;
  --z-drawer: 1300;
  --z-dialog: 9999;
  --z-toast: 10000;
  --z-keypad: 10050;

  /* 枠の寸法 */
  --sidebar-width: 248px;
  --sidebar-collapsed: 72px;
  --topbar-height: 60px;
  /* 本文の左右の余白（1181px 以上 48px・1180px 以下 24px・640px 以下 16px。下の「幅ごとの指定」で切り替える） */
  --page-gutter: var(--space-5);
  --page-top: var(--space-5);

  /* 幅の切れ目（CSS の変数はメディアクエリに使えないので、ここは目印のコメントだけ）:
     スマホ ≤640px／サイドバーを引き出しにする ≤1024px／タブレット ≤1180px／それより広い */

  /* 試作 第3弾: 丸いマークの色（Apple の設定アプリの型。白いマークが 3:1 以上で読める濃さ）。
     色は「どの項目か」の目印で、状態の色（緑・琥珀・赤）とは別に扱う。言葉を必ず添える */
  --icon-red: #D93A30;
  --icon-orange: #C25E00;
  --icon-green: #2E8540;
  --icon-teal: #0F7C8A;
  --icon-blue: #1F6FD1;
  --icon-indigo: #4A4FC4;
  --icon-purple: #8A3FB8;
  --icon-pink: #C8336B;
  --icon-gray: #6E6E73;
  --tabbar-h: 56px;

  /* ── 古い名前（意味の層の別名。値は 2026-10-01 以前と同じ。使う所を置き換えたら消す） ── */
  --gold-50: var(--blue-50);
  --gold-100: var(--blue-100);
  --gold-200: var(--blue-200);
  --gold-300: var(--blue-300);
  --gold-400: var(--blue-400);
  --gold-500: var(--color-accent);
  --gold-600: var(--color-accent-strong);
  --gold-700: var(--blue-700);
  --gold-800: var(--blue-700);
  --gold-900: var(--blue-900);
  --gold-gradient: var(--color-accent); /* 名前だけ残る単色（グラデーションは使わない） */
  --gold-shine: var(--blue-400);
  --wood-50: var(--color-bg-subtle);
  --wood-100: var(--color-bg-page);
  --wood-200: var(--color-border);
  --wood-300: var(--color-border-strong);
  --wood-400: var(--ink-400);
  --wood-500: var(--ink-500);
  --wood-600: var(--color-text-2);
  --wood-700: var(--ink-700);
  --wood-800: var(--ink-800);
  --wood-900: var(--color-chrome);
  --viz-blue: var(--chart-primary);
  --viz-green: var(--color-success);
  --viz-amber: var(--color-warning);
  --viz-rose: var(--color-danger);
  --viz-purple: var(--color-accent-strong);
  --surface-card: var(--color-bg-surface);
  --surface-page: var(--color-bg-page);
  --surface-raised: var(--color-bg-surface);
  --border-subtle: rgba(15, 17, 20, 0.08);
  --white: var(--ink-0);
  --white-soft: var(--ink-50);
  --white-warm: var(--ink-75);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-2);
  --text-muted: var(--color-text-3);
  --text-placeholder: var(--color-text-placeholder);
  --on-dark-strong: var(--color-on-chrome);
  --on-dark: var(--color-on-chrome-2);
  --on-dark-muted: var(--color-on-chrome-3);
  --dark-surface: var(--color-chrome);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --error: var(--color-danger);
  --info: var(--color-info);
  --primary: var(--color-accent);
  --border: var(--color-border);
  --bg-light: var(--color-bg-subtle);
  --font-serif: var(--font-sans);
  --font-display: var(--font-sans);
  --font-numeric: var(--font-sans);
  --fs-small: var(--fs-label);
  --fs-sub: var(--fs-ui);
  --fs-lead: var(--fs-h3);
  --radius-lg: var(--radius-card);
  --radius-xl: var(--radius-sheet);
  --shadow-sm: 0 1px 2px rgba(15, 17, 20, 0.05), 0 1px 1px rgba(15, 17, 20, 0.03);
  --shadow-md: 0 2px 8px rgba(15, 17, 20, 0.07);
  --shadow-lg: 0 4px 16px rgba(15, 17, 20, 0.09);
  --shadow-elevated: var(--shadow-float);
  /* 動きの古い名前: all とはね返りをやめ、名指しのプロパティだけにした（2026-10-01。値は変えた） */
  --transition: var(--t-control);
  --transition-slow: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  --transition-spring: var(--t-control);
  --ease-out-expo: var(--ease-out);
  /* 画面の <style> が使っていたのに定義されていなかった名前（S-02。顧客の候補の一覧が透明になっていた） */
  --surface: var(--color-bg-surface);
  --surface-muted: var(--color-bg-muted);
  --radius: var(--radius-md);
  --shadow-gold: 0 0 #0000; /* 金色の光の名残り。光らせないので影なし */
}

/* ============================================================
   2. 土台
   ============================================================ */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@keyframes toast-in {
  from { transform: translateY(-8px); }
  to { transform: none; }
}

@keyframes dialog-in {
  from { transform: translateY(12px) scale(0.96); opacity: 0; }
  to { transform: none; }
}

@keyframes drawer-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* 300ms 以内に終わる読み込みでは「読み込み中」を見せない（チラつき防止） */
@keyframes kp-appear {
  from { visibility: hidden; }
  to { visibility: visible; }
}

/* 変わった所を一度だけ知らせる（app.js の AppUI.flash） */
@keyframes kp-flash {
  from { background-color: rgba(44, 95, 138, 0.16); }
  to { background-color: transparent; }
}

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

/* hidden 属性は、display を決めている部品（.alert・.scan-progress・グリッドなど）にも必ず勝つ。
   画面ごとに `.xxx[hidden] { display: none }` を書かなくてよい */
[hidden] {
  display: none !important;
}

/* 基準の文字は 18px（2026-09-30 CEO「少し大きく」）。rem の大きさは 1.125 倍、px の寸法は変わらない */
html {
  font-size: 17px; /* 第5弾: Apple の本文の大きさ（17pt）。以前は 18px */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* palt（字詰め）は見出し・ボタン・バッジ・ラベル・数字に効かせ、段落（p）はベタ組みに戻す（DESIGN.md 3章） */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg-page);
  min-height: 100vh;
  min-height: 100dvh; /* iPad の Safari・Chrome は 100vh がツールバーを引っ込めた高さなので、短いページでも少し上下に動いてしまう。見えている高さに合わせる */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: normal; /* 第5弾: iOS と同じく仮名は字詰めしない（以前は palt） */
  line-break: strict;
}

:where(p, blockquote) {
  font-feature-settings: normal;
  text-wrap: pretty;
}

/* 等幅の書体は使わない（ブラウザ既定の code・pre は等幅になる） */
code,
kbd,
samp,
pre {
  font-family: inherit;
  font-size: inherit;
}

::placeholder {
  color: var(--color-text-placeholder);
  opacity: 1;
}

::selection {
  background: var(--color-accent-ring);
  color: var(--color-text);
}

/* 見出し（7段の H1〜H3。字間は 0.03em まで） */
h1,
h2,
h3,
h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  color: inherit;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: 0;
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: 0;
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: 0;
}

h4 {
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
}

/* 金額・数量・時刻・件数は桁をそろえる */
.num,
.amount,
input[type="number"],
input[type="tel"] {
  font-variant-numeric: tabular-nums;
}

:is(th, td).num {
  text-align: right;
  white-space: nowrap;
}

.text-muted {
  color: var(--color-text-3);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-sm);
}

/* ============================================================
   3. 枠（サイドバー・トップバー・本文）
   ============================================================ */
.sidebar {
  width: var(--sidebar-width);
  height: calc(100vh - var(--topbar-height));
  height: calc(100dvh - var(--topbar-height));
  background: var(--color-nav-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  z-index: var(--z-sidebar);
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--color-nav-line);
}

.sidebar > * {
  position: relative;
  z-index: 1;
}

.nav-menu {
  list-style: none;
  padding: var(--space-2) 0;
  flex: 1;
}

.nav-item {
  margin: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--control-h-sm);
  margin: 2px var(--space-2);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-nav-fg);
  text-decoration: none;
  font-size: var(--fs-ui);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  position: relative;
  overflow: hidden;
  white-space: nowrap; /* 幅248pxで項目名を折り返さない */
  transition: var(--t-colors);
}

.nav-link.active {
  background: var(--color-nav-active);
  color: var(--color-nav-fg-strong);
  font-weight: var(--fw-regular);
}

/* 今いる場所は左の 4px の線（黒地で読める明るさの青） */
.nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-2);
  height: calc(100% - var(--space-3));
  width: 4px;
  background: transparent; /* 試作（2026-10-25）: 線は出さず、丸い面だけで今いる場所を示す */
  border-radius: 0 2px 2px 0;
}

.nav-link i {
  width: 18px;
  text-align: center;
  font-size: var(--fs-ui);
  color: var(--color-nav-fg-2);
  flex-shrink: 0;
}

.nav-link.active i {
  color: var(--color-nav-fg-strong);
}

/* 開いたサイドバーではラベルだけで読ませる（全ラベルへの機械的なアイコンをやめた。2026-09-16）。
   たたんだとき（72px）はアイコンが唯一の手がかりなので消さない */
.sidebar:not(.collapsed) .nav-link > i:not(.nav-caret) {
  display: none;
}

.nav-divider {
  height: 1px;
  background: var(--color-nav-line);
  margin: var(--space-2) 0;
}

.nav-section-title {
  font-size: var(--fs-label);
  letter-spacing: 0;
  color: var(--color-nav-fg-2);
  padding: var(--space-3) var(--space-4) var(--space-1);
  font-weight: var(--fw-regular);
}

/* サイドバーのグループ（2026-09-12 再編）。開いている項目（.is-active）と、矢印で開いた項目（.is-open）の子を出す */
.nav-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-2);
  display: none;
}

.nav-group.is-active .nav-sub,
.nav-group.is-open .nav-sub {
  display: block;
}

/* 子の項目も指で押せる高さ（44px）。いちばん長い「デジタル伝票（スマホ）」が幅248pxで折り返さない左の余白 */
.nav-sub-link {
  display: flex;
  align-items: center;
  height: var(--control-h-sm);
  margin: 1px var(--space-2);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3) 0 var(--space-5);
  font-size: var(--fs-label);
  color: var(--color-nav-fg);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: var(--t-colors);
}

.nav-sub-link::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-border-strong);
  transform: translateY(-50%);
}

.nav-sub-link.active {
  color: var(--color-nav-fg-strong);
  background: var(--color-nav-active);
  font-weight: var(--fw-regular);
}

.nav-sub-link.active::before {
  background: var(--color-nav-fg-strong);
}

/* 開閉の矢印は、押す所を 44px 四方にする（見た目の矢印は小さいまま）。向きだけ 120ms で変える */
.nav-link .nav-caret {
  margin-left: auto;
  margin-right: calc(var(--space-3) * -1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  font-size: var(--fs-label);
  padding: 0;
  border-radius: var(--radius-sm);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.nav-group.is-active .nav-caret,
.nav-group.is-open .nav-caret {
  transform: rotate(180deg);
}

.sidebar-footer {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-nav-line);
  background: transparent;
}

.user-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.user-avatar {
  color: var(--color-nav-fg-2);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.user-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-name {
  font-weight: var(--fw-regular);
  font-size: var(--fs-ui);
  color: var(--color-nav-fg-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-role {
  font-size: var(--fs-label);
  color: var(--color-nav-fg-2);
  letter-spacing: 0;
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  height: var(--tap-min);
  color: var(--color-nav-fg);
  text-decoration: none;
  font-size: var(--fs-ui);
  transition: var(--t-colors);
}

/* トップバー（全幅固定） */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-3) 0 0;
  height: var(--topbar-height);
  background: var(--color-topbar-bg);
  border-bottom: 1px solid var(--color-nav-line);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-topbar);
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 1;
  min-width: 0; /* 端末の書体は Noto Sans JP より幅が広く、375px で日付がはみ出した（試作 2026-10-25） */
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--topbar-height);
  height: var(--tap-min);
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-nav-fg);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-h3);
  flex-shrink: 0;
  transition: var(--t-colors);
}

/* マークに言葉を添える（試作 第2弾。マークだけのボタンにしない） */
.sidebar-toggle__text {
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
}

.back-to-top span {
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  min-width: 0;
}

.logo-mark {
  width: 3px;
  height: 24px;
  background: var(--color-nav-fg-strong);
  opacity: 0.85;
  border-radius: 2px;
  flex-shrink: 0;
}

/* 店名と「統合管理システム」を1行に並べる */
.logo-text {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.6em;
  min-width: 0;
  white-space: nowrap;
}

.logo-main {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-nav-fg-strong);
  letter-spacing: 0;
  line-height: 1.2;
}

.shortcut-hint {
  font-size: var(--fs-label);
  color: var(--color-nav-fg-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--color-nav-hover);
  border: 1px solid var(--color-nav-active);
  border-radius: var(--radius-sm);
  cursor: default;
}

/* キーボードの近道の案内は、指で触る端末（iPad・スマホ）では使えないので出さない */
@media (hover: none) and (pointer: coarse) {
  .shortcut-hint {
    display: none;
  }
}

.current-date {
  font-size: var(--fs-label);
  color: var(--color-nav-fg);
  font-weight: var(--fw-regular);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* 本文。トップバーぶんの高さは margin ではなく padding で取る（margin だと全画面で 60px の余計な縦スクロールが出た。2026-09-16） */
.main-content {
  margin-left: var(--sidebar-width);
  padding-top: var(--topbar-height);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg-page);
  /* z-index は付けない。以前の背景の飾り（body::before。今は無い）の上に出すための z-index: 1 が残っていて、
     本文の中の position: fixed の覆い（ダイアログ・引き出し）がサイドバー・トップバーの下に潜っていた（2026-10-01） */
  position: relative;
}

/* 横幅は最後まで使う（2026-09-16。中央寄せの上限はやめた）。左右の余白は --page-gutter（幅で切り替わる） */
.content-area {
  max-width: none;
  margin: 0;
  padding: var(--page-top) var(--page-gutter) var(--space-6);
}

/* 子の要素が中身の幅で本文を押し広げない（スマホで横にはみ出す原因。D-02） */
.content-area > * {
  min-width: 0;
}

/* ページの見出し（本文でいちばん大きい文字。下 24px） */
.page-heading {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  color: var(--color-text);
  letter-spacing: 0;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

/* page_title を設定していない画面では空の見出しになるので、場所を取らせない */
.page-heading:empty {
  display: none;
}

/* ページの見出しの行（H1 ＋ 右に主のボタン1つ） */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.page-header .page-heading {
  margin: 0;
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.page-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

.page-actions-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* 絞り込みの帯（左に検索・絞り込み、右に副のボタン） */
.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.toolbar__end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* 上へ戻るボタン */
.back-to-top {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: var(--tap-min);
  height: var(--tap-min);
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-chrome);
  color: var(--ink-0);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  z-index: var(--z-back-to-top);
  font-size: var(--fs-ui);
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* 引き出しのサイドバー（1024px 以下）の後ろの覆い。display ではなく visibility と opacity で出し入れする
   （display の切り替えでは opacity の変化が効かず、一瞬で出て一瞬で消えていた。M-11）。ぼかしは使わない */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-scrim);
  z-index: var(--z-scrim);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-exit) var(--ease-in), visibility 0s linear var(--dur-exit);
}

.sidebar-overlay.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s;
}

/* サイドバーをたたむ（1025px 以上）。たたむ・開くは動かさず一瞬で切り替える（本文の幅を毎フレーム変えるとレジが重い。M-22） */
@media (min-width: 1025px) {
  .sidebar.collapsed {
    width: var(--sidebar-collapsed);
    overflow: visible;
  }

  .sidebar.collapsed .logo {
    justify-content: center;
  }

  .sidebar.collapsed .logo-text {
    display: none;
  }

  .sidebar.collapsed .nav-menu {
    padding: var(--space-2) 0;
  }

  .sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 0;
    width: auto;
    gap: 0;
    height: var(--control-h-sm);
  }

  .sidebar.collapsed .nav-link span {
    display: none;
  }

  .sidebar.collapsed .nav-link i {
    font-size: var(--fs-h3);
    width: auto;
  }

  .sidebar.collapsed .nav-link::before {
    display: none;
  }

  .sidebar.collapsed .nav-link.active {
    background: var(--color-nav-active);
  }

  .sidebar.collapsed .nav-link.active i {
    color: var(--color-nav-fg-strong);
  }

  .sidebar.collapsed .nav-section-title,
  .sidebar.collapsed .nav-divider,
  .sidebar.collapsed .nav-sub,
  .sidebar.collapsed .nav-caret {
    display: none;
  }

  .sidebar.collapsed .sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sidebar.collapsed .user-info {
    justify-content: center;
    padding: var(--space-2) 0;
  }

  .sidebar.collapsed .user-details {
    display: none;
  }

  .sidebar.collapsed .logout-btn {
    width: 100%;
    height: var(--control-h-sm);
    justify-content: center;
    padding: 0;
    gap: 0;
  }

  .sidebar.collapsed .logout-btn span {
    display: none;
  }

  /* たたんだときの項目名の吹き出し（マウスの端末で、ホバーしたときだけ） */
  .sidebar.collapsed .nav-link,
  .sidebar.collapsed .logout-btn {
    position: relative;
  }

  .sidebar.collapsed .nav-link[data-label]::after,
  .sidebar.collapsed .logout-btn::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-chrome);
    color: var(--ink-0);
    border: 0;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    z-index: var(--z-tooltip);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
    box-shadow: var(--shadow-float);
  }

  .sidebar.collapsed .logout-btn::after {
    content: "ログアウト";
  }

  .main-content.sidebar-collapsed {
    margin-left: var(--sidebar-collapsed);
  }
}

/* マウスの端末だけのホバー（指の端末では、指を離したあとも見た目が残ってしまう。M-07） */
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover {
    background: var(--color-nav-hover);
    color: var(--color-nav-fg-strong);
  }

  .nav-link:hover i {
    color: var(--color-nav-fg-strong);
  }

  .nav-sub-link:hover {
    color: var(--color-nav-fg-strong);
    background: var(--color-nav-hover);
  }

  .nav-link .nav-caret:hover {
    background: var(--color-nav-active);
  }

  .logout-btn:hover {
    background: var(--color-nav-hover);
    color: var(--color-nav-fg-strong);
  }

  .sidebar-toggle:hover {
    background: var(--color-nav-hover);
    color: var(--color-nav-fg-strong);
  }

  .shortcut-hint:hover {
    background: var(--color-nav-active);
    border-color: var(--color-border-strong);
  }

  .back-to-top:hover {
    background: var(--ink-700);
    color: var(--ink-0);
  }
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .sidebar.collapsed .nav-link[data-label]:hover::after,
  .sidebar.collapsed .logout-btn:hover::after {
    opacity: 1;
  }
}

/* ============================================================
   4. 部品
   ============================================================ */

/* ── ボタン `.btn` ──
   高さ 48（小 44・大 56）・角丸 6・1px の枠・影なし。
   主＝墨の塗り・白・700（1つの面に1つだけ）／二番手＝白地・枠 #C7CBD1・墨・500／
   危険＝白地・文字エラー・枠なし／無効＝灰色の面と文字（透明度で薄くしない）。
   新しい名前（.btn--primary など）と今の名前（.btn-primary など）は同じ見た目 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill); /* 試作（2026-10-25）: 丸薬型 */
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  position: relative;
  /* 折り返さない並び（メニュー管理の上のボタンなど）でボタンが縮められるようにする。
     これが無いとボタンが文字の幅より縮まず、スマホでページが横に広がる。並びを折り返すのは画面の担当 */
  overflow: hidden;
  transition: var(--t-control);
}

.btn i,
.btn svg {
  font-size: 1em;
  flex: none;
}

.btn-primary,
.btn--primary,
.btn-submit,
.btn-gold {
  background: var(--color-chrome);
  border-color: var(--color-chrome);
  color: var(--color-on-accent);
  font-weight: var(--fw-bold);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.btn-secondary,
.btn--secondary,
.btn-outline,
.btn-success {
  background: var(--color-bg-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn-ghost,
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-2);
}

/* 危険（削除・取消）。一覧では目立たない文字のボタン。塗りの赤は確認の中だけ（.confirm2-confirm-danger） */
.btn-danger,
.btn--danger,
.btn-warning {
  background: transparent;
  border-color: transparent;
  color: var(--color-danger);
}

.btn-sm,
.btn--sm {
  min-height: var(--control-h-sm);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.btn-lg,
.btn--lg {
  min-height: var(--control-h-lg);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  font-size: var(--fs-body);
}

.btn-block,
.btn--block {
  display: flex;
  width: 100%;
}

/* −／＋ などの四角いボタン */
.btn--square {
  min-width: var(--control-h);
  padding: 0;
}

.btn--sm.btn--square,
.btn-sm.btn--square {
  min-width: var(--control-h-sm);
}

/* 無効 — 半透明にせず、灰色の面と文字で「押せない」と分かるようにする。ホバー・押下の見た目は出さない */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"],
.btn.is-disabled {
  background: var(--color-bg-muted);
  border-color: var(--color-border);
  color: var(--color-text-disabled);
  opacity: 1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── 欄（入力欄・選択欄・テキストエリア） ──
   高さ 48 の1種類・角丸 6・枠 1px #C7CBD1・左右 16・16.9px/400・影なし。
   選択欄は今の画面では <select class="form-input">。テキストエリアは <textarea class="form-input textarea"> */
.form-group {
  margin-bottom: var(--space-4);
}

.form-label,
.field__label {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  line-height: var(--lh-ui);
  color: var(--color-text-2);
  letter-spacing: 0;
  margin-bottom: var(--space-2);
}

/* ラベルのマークは小さく・薄く（消さない。大きさと色と間隔をそろえる） */
.form-label i,
.field__label i {
  color: var(--color-icon);
  font-size: 0.9em;
  margin-right: var(--space-1);
}

.form-group:focus-within .form-label {
  color: var(--color-text);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-input);
  font-weight: var(--fw-regular);
  line-height: var(--lh-ui);
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

/* 小さい欄も同じ高さ（欄の高さは1種類。16px 未満の文字は iPhone・iPad が拡大するので大きさも同じ） */
.form-input-sm {
  height: var(--control-h);
  font-size: var(--fs-input);
}

/* 選択欄: ブラウザの矢印をやめて、右に SVG の矢印 */
select.form-input,
.form-select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234A4F58' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px 12px;
  text-overflow: ellipsis;
  cursor: pointer;
}

select.form-input[multiple],
select.form-input[size]:not([size="1"]) {
  height: auto;
  padding-right: var(--space-3);
  background-image: none;
}

textarea.form-input,
.form-input.textarea,
.form-textarea {
  height: auto;
  min-height: 110px;
  padding: 12px var(--space-3);
  line-height: var(--lh-body);
  resize: vertical;
}

/* 数は右寄せ・桁をそろえる（−／＋ 付きの欄は keypad.css が中央にする）。ブラウザの小さな上下の矢印は出さない */
/* 電話番号（type=tel）は数ではないので左寄せのまま */
:where(input[type="number"], input[inputmode="numeric"]:not([type="tel"]), input[inputmode="decimal"]).form-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

input[type="number"].form-input::-webkit-inner-spin-button,
input[type="number"].form-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* フォーカス: 枠をアクセント 2px にするだけ（輪を重ねない・角丸を変えない。M-17） */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 1px var(--color-focus);
  outline: none;
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background-color: var(--color-bg-muted);
  border-color: var(--color-border);
  color: var(--color-text-disabled);
  opacity: 1;
  cursor: not-allowed;
}

.form-input.is-invalid,
.form-input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.form-input.is-invalid:focus,
.form-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 1px var(--color-danger);
}

/* 欄の下の補足・エラー（8px 空け・文字3） */
.form-hint,
.form-help,
.field__help {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-label);
  line-height: var(--lh-ui);
  color: var(--color-text-3);
  font-feature-settings: normal;
}

.form-error,
.field__error {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-label);
  line-height: var(--lh-ui);
  color: var(--color-danger);
}

/* 入力の行は最大 1120px（記入しやすさは行の長さで決まる。2026-09-16） */
.form-row,
.form-actions {
  max-width: 1120px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* 行の中の欄は、下の余白を持たない（欄の下の余白と行の gap が重なって、縦に2倍開いていた）。
   行と次の塊の間は、行の margin-bottom だけが決める */
.form-row > .form-group {
  margin-bottom: 0;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* フォームの節の見出し（20画面が使っていたのに指定が無く、見出しが下のラベルに貼り付いていた。D-08）。
   見出しの上は下の2倍以上（どの塊の見出しかを近さで示す） */
.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: 0;
  color: var(--color-text);
  text-wrap: balance;
}

.section-title:not(:first-child) {
  margin-top: var(--space-5);
}

.section-title i {
  color: var(--color-icon);
  font-size: 0.9em;
  flex: none;
}

.form-section + .form-section {
  margin-top: var(--space-5);
}

/* チェックボックス・ラジオ: 小さすぎる既定の大きさをやめ、色はアクセント */
input[type="checkbox"],
input[type="radio"] {
  width: 1.111rem;
  height: 1.111rem;
  accent-color: var(--color-accent);
  vertical-align: -0.15em;
  cursor: pointer;
}

/* 日付・時刻の欄（.date-field に包まれていないもの）。端末の部品のままだが、余白と字の形はそろえる。
   Windows の Chrome で「2026/09/30 ()」と空の括弧が出るのは端末の地域設定のせい（.date-field にすれば出ない） */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  color-scheme: light;
  font-variant-numeric: tabular-nums;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

/* ── 日付 `.date-field` ──
   見える所は自前（「10月1日（木）」）、中身は本物の input[type=date] を透明にして全面に重ねる（押すと端末の日付の選び方が開く）。
   DOM は app.js（A2）が作る:
     <span class="date-field [is-empty] [is-disabled]"><span class="date-field__text">10月1日（木）</span>
       <input type="date" class="(元のクラス) date-field__input"></span>
   見た目は入力欄と同じ（高さ 48・枠・角丸 6・左右 16）＋右にカレンダーの小さな SVG */
.date-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 11em;
  max-width: 100%;
  height: var(--control-h);
  padding: 0 40px 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236B707A' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='2.2' y='3.2' width='11.6' height='10.6' rx='1.6'/%3E%3Cpath d='M2.2 6.6h11.6M5.4 1.8v2.6M10.6 1.8v2.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px 16px;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-input);
  line-height: var(--lh-ui);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

/* フォームの欄の中では、ほかの欄と同じく幅いっぱい */
.form-group .date-field,
.date-field.is-block {
  display: flex;
  width: 100%;
}

.date-field__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.date-field.is-empty .date-field__text,
.date-field__text:empty {
  color: var(--color-text-3);
}

.date-field__text:empty::before {
  content: "日付を選ぶ";
}

/* 本物の欄は透明にして全面に重ねる（画面ごとの幅・余白の指定に負けないよう、強めに書く） */
.date-field > input.date-field__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 16px; /* iPhone・iPad で押したときに拡大させない */
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Chrome（PC）は欄のどこを押しても日付の選び方が開くよう、カレンダーの印を全面に広げる */
.date-field > input.date-field__input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.date-field:focus-within {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 1px var(--color-focus);
}

.date-field.is-disabled,
.date-field.is-readonly,
.date-field:has(> input:disabled) {
  background-color: var(--color-bg-muted);
  border-color: var(--color-border);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.date-field.is-disabled > input.date-field__input,
.date-field.is-readonly > input.date-field__input,
.date-field > input.date-field__input:disabled {
  cursor: not-allowed;
}

/* 前後の日へ送るボタンと並べる形（予約ボード・レジの日付） */
.date-field--nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── パスワード ──
   欄の中の右に「表示」の文字のボタン（今の画面のクラス名 .password-wrapper・.password-toggle のまま。D-05・S-03）。
   マークだけのボタンは文字にする決め事（brief）なので、目のマークの代わりに「表示」「隠す」を出す */
.password-wrapper,
.input-affix {
  position: relative;
  display: block;
}

.password-wrapper > .form-input,
.input-affix > .form-input {
  padding-right: 76px;
}

.password-toggle,
.input-affix__btn {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: var(--control-h-sm);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-2);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: var(--fw-regular);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: var(--t-colors);
}

/* 目のマーク（元からあるマーク。消さない）＋「表示／隠す」の文字 */
.password-toggle > i {
  margin-right: 6px;
  font-size: 0.9em;
}

.password-toggle::after {
  content: "表示";
}

.password-wrapper:has(> input[type="text"]) .password-toggle::after,
.password-toggle:has(.fa-eye-slash)::after {
  content: "隠す";
}

/* ── 検索 ── */
.search-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrapper i {
  position: absolute;
  left: var(--space-3);
  color: var(--color-icon);
  font-size: var(--fs-label);
  pointer-events: none;
}

.search-input-wrapper:focus-within i {
  color: var(--color-accent);
}

/* フォーカスしても幅は変えない（隣のボタンが動いて押し間違える。M-19） */
.search-input {
  width: 280px;
  height: var(--control-h);
  padding: 0 var(--space-3) 0 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-input);
  outline: none;
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.search-input:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 1px var(--color-focus);
}

/* ── 選ぶチップ（複数から選ぶ・押すと選ばれる） ──
   高さ 44・角丸 6・枠 1px。選ぶと枠をアクセント 2px（影で足して幅を変えない）＋面＋文字 700。
   費用の登録の「候補のボタン」（.pick-chip。クラス名はテストと JS が使っている）も同じ形 */
.chip,
.pick-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-bg-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: var(--t-colors);
}

.chip.is-active,
.chip[aria-pressed="true"],
.chip:has(> input:checked),
.pick-chip.is-active {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
  background: var(--color-accent-subtle);
  font-weight: var(--fw-bold);
}

/* ── 切り替え `.seg`（1つを選ぶ） ──
   入れ物は #E1E3E7（--color-bg-track）・角丸 6・内側 4。項目は高さ 44・角丸 4・左右 16・500・文字2。
   選ぶと白地＋1px #C7CBD1＋墨 700。選んだ状態は一瞬で切り替える（動かさない）。
   今ある名前（レジの組 .group-tab、分類 .cat-tab、AI相談の .oc-tab、顧客分析の .q-tabs）にも同じ見た目を当てる。
   画面の <style> が同じ名前を決めている所は画面側が勝つ（画面の担当が消すと、この見た目になる） */
.seg,
.group-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  padding: var(--space-1);
  background: var(--color-bg-track); /* 白いページの上で見える薄いグレー */
  border-radius: var(--radius-pill);
}

.seg__item,
.seg > button,
.seg > a,
.group-tab,
.cat-tab,
.oc-tab,
.q-tabs > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: none;
  color: var(--color-text-2);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: var(--fw-regular);
  line-height: var(--lh-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

.seg__item[aria-pressed="true"],
.seg__item[aria-selected="true"],
.seg__item[aria-current="page"],
.seg__item.is-active,
.seg > .active,
.group-tab.active,
.cat-tab.active,
.oc-tab.active,
.q-tabs > .active {
  background: var(--color-bg-surface);
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

.group-tabs {
  margin-top: var(--space-2);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled):not([aria-disabled="true"]),
  .btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
  .btn-submit:hover:not(:disabled),
  .btn-gold:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
  }

  .btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
  .btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
  .btn-outline:hover:not(:disabled):not([aria-disabled="true"]),
  .btn-success:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-hover);
  }

  .btn-ghost:hover:not(:disabled),
  .btn--ghost:hover:not(:disabled) {
    background: var(--color-bg-subtle);
    color: var(--color-text);
  }

  .btn-danger:hover:not(:disabled),
  .btn--danger:hover:not(:disabled),
  .btn-warning:hover:not(:disabled) {
    background: var(--color-danger-bg);
  }

  .form-input:hover:not(:disabled):not(:focus),
  .form-select:hover:not(:disabled):not(:focus),
  .form-textarea:hover:not(:disabled):not(:focus),
  .search-input:hover:not(:focus),
  .date-field:hover:not(:focus-within):not(.is-disabled) {
    border-color: var(--color-border-hover);
  }

  .password-toggle:hover,
  .input-affix__btn:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
  }

  .chip:hover:not(.is-active):not([aria-pressed="true"]),
  .pick-chip:hover:not(.is-active) {
    border-color: var(--color-border-hover);
  }

  .seg__item:hover:not(.is-active):not([aria-pressed="true"]):not([aria-selected="true"]),
  .seg > button:hover:not(.active),
  .seg > a:hover:not(.active),
  .group-tab:hover:not(.active),
  .cat-tab:hover:not(.active),
  .oc-tab:hover:not(.active),
  .q-tabs > button:hover:not(.active) {
    color: var(--color-text);
    background: rgba(13, 13, 13, 0.04);
  }
}

/* 押下（ホバーより後ろに置いて、押している間はホバーの見た目に勝たせる） */
/* 押した瞬間に見た目を変え（0ms）、離したら 120ms で戻す。iOS は文書に touchstart の聞き手があると :active が効く（app.js） */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  transition-duration: var(--dur-press-in);
  transform: scale(0.98);
}

/* 試作（2026-10-25）: 押している間は 0.98 倍に縮み、離すと 150ms で少し行き過ぎて戻る（--ease-spring） */
:is(.chip, .pick-chip, .seg__item, .seg > button, .seg > a, .group-tab, .cat-tab, .oc-tab, .q-tabs > button,
  .nav-link, .nav-sub-link, .logout-btn, .card--interactive, .back-to-top, .sidebar-toggle) {
  transition-property: color, background-color, border-color, opacity, transform, box-shadow;
  transition-duration: var(--dur-fast), var(--dur-fast), var(--dur-fast), var(--dur-fast), var(--dur-press-out), var(--dur-fast);
  transition-timing-function: var(--ease-out), var(--ease-out), var(--ease-out), var(--ease-out), var(--ease-spring), var(--ease-out);
}

:is(.chip, .pick-chip, .seg__item, .seg > button, .seg > a, .group-tab, .cat-tab, .oc-tab, .q-tabs > button,
  .nav-link, .nav-sub-link, .logout-btn, .card--interactive, .back-to-top, .sidebar-toggle):active {
  transform: scale(0.98);
  transition-duration: var(--dur-fast), var(--dur-fast), var(--dur-fast), var(--dur-fast), var(--dur-press-in), var(--dur-fast);
}

.btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
.btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.btn-outline:active:not(:disabled):not([aria-disabled="true"]),
.btn-success:active:not(:disabled):not([aria-disabled="true"]),
.btn-ghost:active:not(:disabled):not([aria-disabled="true"]),
.btn--ghost:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-bg-pressed);
}

.btn-primary:active:not(:disabled):not([aria-disabled="true"]),
.btn--primary:active:not(:disabled):not([aria-disabled="true"]),
.btn-submit:active:not(:disabled):not([aria-disabled="true"]),
.btn-gold:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-chrome-pressed);
  border-color: var(--color-chrome-pressed);
  opacity: 1;
}

.btn-danger:active:not(:disabled):not([aria-disabled="true"]),
.btn--danger:active:not(:disabled):not([aria-disabled="true"]),
.btn-warning:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-danger-bg);
}

.password-toggle:active,
.input-affix__btn:active {
  background: var(--color-bg-pressed);
  transition-duration: var(--dur-press);
}

.chip:active,
.pick-chip:active {
  background: var(--color-bg-pressed);
  transition-duration: var(--dur-press);
}

.seg__item:active,
.seg > button:active,
.seg > a:active,
.group-tab:active,
.cat-tab:active,
.oc-tab:active,
.q-tabs > button:active {
  background: var(--color-bg-surface);
}


/* ── 「その他」メニュー `.more-menu`（たまにしか使わない道具をまとめる。DESIGN.md 8章） ──
   <details class="more-menu"><summary class="btn btn-outline">その他</summary>
   <div class="more-menu__panel"><a class="btn btn-outline">…</a>…</div></details>
   開くと右端をそろえた浮いた層（白・枠 #C7CBD1・影）。項目は高さ 44・左寄せ・枠なし。外を押す・Esc で閉じる動きは画面の JS */
.more-menu {
  position: relative;
}

.more-menu > summary {
  list-style: none;
}

.more-menu > summary::-webkit-details-marker {
  display: none;
}

.more-menu > summary::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234A4F58' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

.more-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: var(--z-sticky);
  min-width: 240px;
  padding: var(--space-1);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
}

.more-menu__panel .btn {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border-color: transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-regular);
}

@media (hover: hover) and (pointer: fine) {
  .more-menu__panel .btn:hover {
    background: var(--color-bg-subtle);
    border-color: transparent;
  }
}

/* ── 戻るリンク `.back-link`（ページの見出しの上。一覧に戻る。DESIGN.md 8章） ──
   <div class="back-row"><a class="back-link"><i class="fas fa-arrow-left"></i> 一覧</a></div>
   見出しの上の余白を打ち消して、見出しに寄せる */
.back-row {
  margin: calc(var(--space-2) * -1) 0 var(--space-1);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  color: var(--color-text-2);
  font-size: var(--fs-ui);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .back-link:hover {
    color: var(--color-text);
  }
}

/* ── 表 `.data-table` ──
   見出しの行は高さ 44・面 #F7F8F9・ラベル段・文字2・下に 1px #C7CBD1。行は 56 以上・セルの左右 16・区切り #E1E3E7。
   数字は右寄せ（<td class="num">）。操作の列（.col-actions）は右端に固定 */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}

.data-table td {
  height: 56px;
}

.data-table thead th {
  height: 44px;
  background: var(--color-bg-surface); /* 試作: 見出しの行は塗らず、線だけ */
  border-bottom-color: var(--color-border);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--color-text-2);
  white-space: nowrap;
  letter-spacing: 0;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table .num {
  text-align: right;
  white-space: nowrap;
}

/* 操作の列は右端に固定する（position: sticky）。あふれない表では何も動かないので、固定は常に書いてよい。
   区切りの縦線は、表が横にあふれて、列の下に別の列が潜るときだけ出す
   （あふれないのに線があると、ただの縦線が1本残る）。あふれたときだけ動くスクロール連動の指定で出す。
   これに未対応のブラウザ（Safari 26 より前）は、線は出ないが固定は効く */
.data-table .col-actions {
  position: sticky;
  right: 0;
  text-align: right;
  white-space: nowrap;
  background: var(--color-bg-surface);
}

.data-table thead .col-actions {
  background: var(--color-bg-surface);
}

@keyframes col-actions-edge {
  from,
  to {
    box-shadow: inset 1px 0 0 var(--color-border);
  }
}

@supports (animation-timeline: scroll()) {
  .data-table .col-actions {
    animation: col-actions-edge linear both;
    animation-timeline: scroll(nearest inline);
  }
}

/* 行の操作（文字のボタンを右に並べる。削除は危険の文字のボタン＋確認） */
/* 表のセル（td.row-actions）を flex にすると表が崩れるので、セル以外に効かせる */
.row-actions:not(td):not(th) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  flex-wrap: nowrap;
}

td.row-actions {
  text-align: right;
  white-space: nowrap;
}

.row-actions form {
  margin: 0;
}

/* 表の中のリンク（クラスの無い a）は本文の色＋控えめな下線。:where で強さを0にしているので、画面側の指定が勝つ */
:where(.data-table) a:where(:not([class])) {
  color: var(--color-text);
  font-weight: var(--fw-regular);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* 本文の中のクラスの無いリンクは、アクセントの濃い青＋下線 */
:where(.content-area, .karte-drawer-body) a:where(:not([class])) {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--blue-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.link-gold {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--blue-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  font-weight: var(--fw-regular);
}

/* ── カード ──
   白・1px #E1E3E7・角丸 6・内側 24（スマホ 16）・影なし。見出しは H3（下 16）・下線なし。
   押せないカードはホバーで変えない（押せるように見える偽の手がかりになる。D-25） */
.card,
.form-card,
.chart-card,
.kpi-card,
.stat {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  box-shadow: none;
}

/* 列の多い表は、カードの中で横にスクロールする */
.table-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: none;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.card__title,
.chart-card h3,
.chart-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: 0;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.card__head .card__title {
  margin: 0;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* ── 指標のタイル（.stat。今の名前 .kpi-card も同じ形） ──
   ラベル → 8 → 数字 36px/700 → 4 → 補足（文字3）。悪い値は数字だけエラーの色 */
.kpi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.kpi-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  position: relative;
}

.stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 指標のマークは箱をやめて小さく（消さない） */
.kpi-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: var(--color-icon);
  font-size: var(--fs-body);
}

.kpi-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kpi-label,
.stat__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  line-height: var(--lh-ui);
  color: var(--color-text-2);
  letter-spacing: 0;
}

.kpi-value,
.stat__value {
  margin-top: var(--space-2);
  font-size: var(--fs-stat);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: 0;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.kpi-sub,
.stat__sub {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-1);
  font-size: var(--fs-label);
  line-height: var(--lh-ui);
  color: var(--color-text-3);
}

.kpi-change,
.stat__delta {
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
}

/* 増＝青、減＝赤（緑は状態だけに使う。DESIGN.md 6章） */
.kpi-change.positive,
.stat__delta.is-up {
  color: var(--color-link);
}

/* 悪い値は数字だけをエラーの色に（枠は変えない） */
.kpi-change.negative,
.kpi-flag,
.stat__delta.is-down,
.stat__value.is-negative,
.kpi-value.is-negative {
  color: var(--color-danger);
}

.kpi-flag {
  font-weight: var(--fw-bold);
}

/* ── 数字の組版と、分析の画面の共通の形（_partials/figures.html のマクロ fig_yen・fig_num・fig_pct が出す class。DESIGN.md 3章・8章） ──
   ダッシュボード・商品分析・顧客分析・食材別・顧客カルテ・売上の一覧と編集が使う。画面の <style> には書かない。
   主役の数字の「¥」は 0.7em、単位は 0.6em にして、数字だけを大きく読ませる（数字の隣でベースラインをそろえる） */
.kpi-yen {
  font-size: 0.7em;
  font-weight: var(--fw-regular);
  margin-right: 0.04em;
}

.kpi-unit {
  font-size: 0.6em;
  font-weight: var(--fw-regular);
  margin-left: 0.12em;
}

.kpi-none {
  color: var(--color-text-3);
  font-weight: var(--fw-regular);
}

/* 比べた期間と前期の金額など、補足の2行目 */
.kpi-hint {
  display: block;
  color: var(--color-text-3);
  font-size: var(--fs-label);
}

/* 期間の1行と、同じ行に置く操作（絞り込み・表示項目）。期間は画面の上の日付の指定と同じ内容なので、帯や箱にしない */
.ax-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

.ax-period {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text-2);
  font-variant-numeric: tabular-nums;
}

/* 節の見出し（H2。下線は引かず、余白で分ける） */
.ax-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-text);
}

.ax-title i,
.chart-title > i:first-child,
.card__title > i:first-child {
  font-size: 0.9em;
  color: var(--color-icon);
}

.chart-title > i:first-child,
.card__title > i:first-child {
  margin-right: var(--space-2);
}

/* カードの見出しの行（見出し ＋ 右に切り替え・件数） */
.ax-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}

.ax-head .chart-title {
  margin-bottom: 0;
}

.ax-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.ax-note {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-label);
  color: var(--color-text-3);
}

/* 表示件数（数を入れる。iPad では数字パッドが出る）と「すべて」 */
.count-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-label);
  color: var(--color-text-2);
}

.count-control .count-input {
  width: 5.5rem;
  text-align: right;
}

/* ── 帳面（名前・棒・金額・構成比の1行）。棒は構成比を 100% の幅で見せる ── */
.mix-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mix-row {
  display: grid;
  grid-template-columns: minmax(96px, 160px) minmax(0, 1fr) 136px 72px;
  align-items: center;
  column-gap: var(--space-3);
  min-height: 56px;
  border-top: 1px solid var(--color-border);
}

.mix-list--dense .mix-row {
  min-height: 44px;
}

.mix-row:first-child {
  border-top: 0;
}

.mix-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mix-track {
  height: 8px;
  border-radius: 2px;
  background: var(--color-bg-muted);
  overflow: hidden;
}

.mix-track:empty {
  background: transparent;
}

/* 既定はアクセント。区分ごとの色は JS が viz.js の対応表で上書きする */
.mix-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--chart-primary);
}

.mix-fill.is-other {
  background: var(--chart-other);
}

.mix-amount,
.mix-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mix-amount {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
}

.mix-pct {
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--color-text-2);
}

/* 割引・調整と合計の行（足し算の続きなので、棒は描かない） */
.mix-row--adjust .mix-name {
  color: var(--color-text-2);
  font-weight: var(--fw-regular);
}

.mix-row--adjust .mix-amount {
  font-weight: var(--fw-regular);
}

.mix-row--adjust .mix-amount.is-negative {
  color: var(--color-danger);
}

.mix-row--sum {
  border-top-color: var(--color-border-strong);
}

.mix-row--sum .mix-name {
  font-weight: var(--fw-bold);
}

.mix-icon {
  margin-right: var(--space-1);
  font-size: 0.9em;
  color: var(--color-icon);
}

.mix-note {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-label);
  color: var(--color-text-3);
}

.chart-failed {
  color: var(--color-text-3);
  padding: var(--space-3) 0;
  font-size: var(--fs-label);
}

/* 棒は名前と金額の下に、幅いっぱいで置く（幅の狭いカード・スマホ） */
.mix-list--stacked .mix-row {
  grid-template-columns: minmax(0, 1fr) auto 64px;
  grid-template-areas: "name amount pct" "track track track";
  row-gap: var(--space-2);
  padding: var(--space-2) 0;
}

.mix-list--stacked .mix-name { grid-area: name; }
.mix-list--stacked .mix-amount { grid-area: amount; }
.mix-list--stacked .mix-pct { grid-area: pct; }
.mix-list--stacked .mix-track { grid-area: track; }
.mix-list--stacked .mix-track:empty { display: none; }

@media (max-width: 640px) {
  .mix-row {
    grid-template-columns: minmax(0, 1fr) auto 64px;
    grid-template-areas: "name amount pct" "track track track";
    row-gap: var(--space-2);
    padding: var(--space-2) 0;
  }

  .mix-name { grid-area: name; }
  .mix-amount { grid-area: amount; }
  .mix-pct { grid-area: pct; }
  .mix-track { grid-area: track; }
  .mix-track:empty { display: none; }
}

/* 読み込み中（スケルトン。単色の明滅。くるくる回るマークは使わない） */
.skeleton,
.kpi-card.loading .kpi-value,
.kpi-card.loading .kpi-sub,
.kpi-card.loading .kpi-label {
  color: transparent;
  border-radius: var(--radius-sm);
  background: var(--color-border);
  animation: skeleton-pulse 1.2s ease-in-out infinite;
  user-select: none;
}

.skeleton {
  display: block;
  min-height: 1em;
}

/* 共通の「読み込み中」（app.js の renderLoadingIndicator）。回るマークは出さず、文字を明滅させる */
.app-loading-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  color: var(--color-text-3);
  font-size: var(--fs-ui);
  grid-column: 1 / -1;
  animation: kp-appear 1ms linear 300ms both, skeleton-pulse 1.2s ease-in-out 300ms infinite;
}

.app-loading-indicator .fa-spinner {
  display: none;
}

/* 変わった行を 600ms だけ薄い青にして消す（レジのカートに足した行など。動きを減らす設定では出さない） */
.kp-flash {
  animation: kp-flash 600ms var(--ease-out);
}

/* ── バッジ ──
   高さ 28・左右 8・角丸 4・ラベル段・折り返さない（「固定／費」と2行に割れていた。D-11）。
   標準は無彩色。状態のバッジだけ状態の色。費用の区分（仕入・人件費・固定費・その他）は分類なので無彩色 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-bg-muted);
  color: var(--color-text-badge);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
}

.badge-purchase,
.badge-labor,
.badge-fixed,
.badge-other {
  background: var(--color-bg-muted);
  border-color: transparent;
  color: var(--color-text-badge);
}

.badge--success,
.tag-success,
.badge--status-completed {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.badge--warning,
.tag-warning,
.badge--status-unassigned {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

.badge--danger,
.badge--status-no_show {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

.badge--accent,
.tag-info {
  background: var(--color-accent-subtle);
  border-color: var(--color-info-border);
  color: var(--color-accent-strong);
}

.badge--status-confirmed {
  background: var(--status-confirmed-bg);
  border-color: var(--status-confirmed-border);
  box-shadow: inset 3px 0 0 var(--status-confirmed-mark);
  color: var(--status-confirmed-fg);
  padding-left: 12px;
}

.badge--status-cancelled {
  background: var(--status-cancelled-bg);
  color: var(--status-cancelled-fg);
  text-decoration: line-through;
}

/* タグ（バッジと同じ形。画面ごとの <style> で上書きしている所はそちらが勝つ） */
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  color: var(--color-text-badge);
  font-size: var(--fs-label);
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

/* 顧客の自動タグ（顧客一覧・食材から声かけ・誕生日記念日・カルテ）。
   分類のタグ（来店・金額）は無彩色、離反の心配はエラー、誕生日・記念日が近いは注意の色 */
.ct-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.ct-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  color: var(--color-text-2);
  font-size: var(--fs-label);
  line-height: 1.5;
  white-space: nowrap;
}

.ct-visit,
.ct-spend {
  border-color: var(--color-border-strong);
  background: var(--color-bg-muted);
  color: var(--color-text-badge);
}

.ct-risk {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.ct-anniversary {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

/* 品の種類の印 `.kind-dot`（料理＝黄土・ドリンク＝青緑。DESIGN.md 6章）。8px の丸。
   色だけで伝えないよう、必ず「料理」「ドリンク」の文字の前に置く（レジ・スマホ伝票の切り替え、レジの合計）。
   種類の分からないものは灰 */
.kind-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--color-border-strong);
  vertical-align: 0.1em;
}

.kind-dot[data-kind="food"] {
  background: var(--kind-food);
}

.kind-dot[data-kind="drink"] {
  background: var(--kind-drink);
}

/* 切り替え（.seg の項目・レジの .cat-tab）は gap で文字との間を空けるので、丸の右の余白は付けない */
.seg__item > .kind-dot,
.seg > button > .kind-dot,
.cat-tab > .kind-dot {
  margin-right: 0;
}

/* 順位の印（丸。28px） */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--ink-0);
  background: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.rank-badge.rank-1,
.rank-badge.rank-2,
.rank-badge.rank-3 {
  background: var(--color-accent);
}

/* ── 凡例 `.legend` ──
   予約の状態の色見本は、予約のブロックと同じ形（白地＋左の 4px の線 など）で描く。
   予約ボードの凡例（<i class="fas fa-square tag-status-confirmed">）も同じ色見本にする（それまでクラスの定義が無く黒い四角だった。D-04・S-05） */
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-label);
  color: var(--color-text-2);
}

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.legend__swatch,
.tag-status-confirmed,
.tag-status-completed,
.tag-status-no_show,
.tag-status-cancelled,
.tag-status-unassigned {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: 3px; /* 小さな色見本は角丸を小さく（第5弾。8px だと左の線と合わせて三日月の形に崩れていた） */
  background: var(--color-bg-surface);
  vertical-align: -3px;
  font-size: 0;
}

/* マークの字（■）は描かず、色見本の四角だけを見せる */
.tag-status-confirmed::before,
.tag-status-completed::before,
.tag-status-no_show::before,
.tag-status-cancelled::before,
.tag-status-unassigned::before {
  content: none;
}

.legend__swatch[data-status="confirmed"],
.tag-status-confirmed {
  background: var(--status-confirmed-bg);
  border-color: var(--status-confirmed-border);
  box-shadow: inset 4px 0 0 var(--status-confirmed-mark);
}

.legend__swatch[data-status="completed"],
.tag-status-completed {
  background: var(--status-completed-bg);
  border-color: var(--status-completed-border);
  box-shadow: inset 4px 0 0 var(--status-completed-mark);
}

.legend__swatch[data-status="no_show"],
.tag-status-no_show {
  background: var(--status-noshow-bg);
  border-color: var(--status-noshow-border);
  box-shadow: inset 4px 0 0 var(--status-noshow-mark);
}

.legend__swatch[data-status="cancelled"],
.tag-status-cancelled {
  background: var(--status-cancelled-bg);
  border-color: var(--status-cancelled-border);
}

.legend__swatch[data-status="unassigned"],
.tag-status-unassigned {
  background: var(--status-unassigned-bg);
  border-color: var(--status-unassigned-border);
  box-shadow: inset 4px 0 0 var(--status-unassigned-mark);
}

/* ── 空状態 `.empty-state` ──
   大きなマークは出さない。中身の位置に左寄せで、今の状態（本文 700）→ 8 → 次にすること（ラベル段）→ 16 → 主ボタン。
   中身は .empty-state__title・__text・__action（今の「マーク＋<p>」の形も同じ見た目になる。マークは消さず、見出しの上に小さく）。
   DESIGN.md の `.empty` は、3画面が「空のとき」の印（.kp-alert.empty など）に同じ名前を使っているので、この名前にした */
.empty-state {
  padding: var(--space-6) var(--space-4);
  text-align: left;
  color: var(--color-text);
}

td.empty-state {
  padding: var(--space-5) var(--space-4);
}

.empty-state__title,
.empty-state p:not(.empty-state__text):not(.empty-hint) {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
  color: var(--color-text);
}

.empty-state__text,
.empty-hint {
  margin-top: var(--space-2);
  font-size: var(--fs-label);
  line-height: var(--lh-ui);
  color: var(--color-text-3);
}

.empty-state__action,
.empty-state > .btn,
.empty-state > a.btn {
  margin-top: var(--space-3);
}

.empty-state > i:first-child {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-h3);
  color: var(--color-icon);
}

/* ── 本文の中のお知らせ（.alert） ──
   左に 4px の線＋状態の面。自動で消すと下の内容が跳ぶので、成功の知らせはトーストに寄せる（M-12。消す処理は app.js） */
.alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: 12px calc(var(--tap-min) + var(--space-2)) 12px var(--space-3);
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--radius-md);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
}

.alert > i:first-child {
  flex: none;
}

/* 文の右に操作（フォーム・ボタン）を置くお知らせ（base.html のメール未確認の帯） */
.alert--action {
  flex-wrap: wrap;
}

.alert--action > form {
  margin-left: auto;
}

/* 閉じるボタンは指で押せる 44px 四方（見た目の × は小さいまま） */
.alert-close {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font-size: var(--fs-ui);
  cursor: pointer;
  transition: var(--t-colors);
}

.alert-fade-out {
  opacity: 0;
  transition: opacity var(--dur-exit) var(--ease-in);
}

.alert-success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  border-left-color: var(--color-success);
  color: var(--color-success);
}

.alert-error {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  border-left-color: var(--color-danger);
  color: var(--color-danger);
}

.alert-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  border-left-color: var(--color-warning);
  color: var(--color-warning);
}

.alert-info {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
  border-left-color: var(--color-info);
  color: var(--color-accent-strong);
}

/* 説明の箱 */
.help-box {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.help-box h4 {
  margin: 0 0 var(--space-1);
  color: var(--color-text);
  font-size: var(--fs-ui);
}

.help-box p {
  margin: 0;
  font-size: var(--fs-label);
  color: var(--color-text-2);
  line-height: var(--lh-ui);
}

/* ── トースト（1種類。画面の上の中央。M-02・M-16） ──
   下に出すとレジの会計のボタンを塞いでいた。本体は押しても下の操作を邪魔しない（閉じる × だけ押せる）。
   入り 180ms（下へ 8px＋不透明度）・出 140ms（不透明度だけ） */
#toast-container {
  position: fixed;
  top: calc(var(--topbar-height) + var(--space-2));
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: max-content;
  max-width: calc(100vw - var(--space-5));
  pointer-events: none;
}

.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 240px;
  max-width: 480px;
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-left: 4px solid var(--blue-on-dark);
  border-radius: var(--radius-md);
  background: var(--color-chrome);
  color: var(--ink-0);
  font-size: var(--fs-ui);
  font-weight: var(--fw-regular);
  line-height: var(--lh-ui);
  box-shadow: var(--shadow-float);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-exit) var(--ease-in);
}

.toast.toast-visible {
  opacity: 1;
  animation: toast-in var(--dur-base) var(--ease-spring);
  transition: opacity var(--dur-base) var(--ease-out);
}

.toast > i {
  flex-shrink: 0;
  font-size: var(--fs-ui);
}

.toast-message {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-1) 0;
}

.toast-success {
  border-left-color: var(--green-on-dark);
}

.toast-success > i {
  color: var(--green-on-dark);
}

.toast-error {
  border-left-color: var(--red-on-dark);
}

.toast-error > i {
  color: var(--red-on-dark);
}

.toast-warning {
  border-left-color: var(--amber-on-dark);
}

.toast-warning > i {
  color: var(--amber-on-dark);
}

.toast-info > i {
  color: var(--blue-on-dark);
}

/* 閉じる（×）だけ押せる。押す所は 44px 四方（ボタンの既定の枠と灰色の面は消す） */
.toast-close {
  margin: 0 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-on-chrome-2);
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}

/* 残り時間の線は出さない（動きを増やさない） */
.toast-progress {
  display: none;
}

/* ── ダイアログ（confirm2） ──
   白・角丸 6・内側 24・見出し H3・ボタンは右寄せ（主が右）。覆いはぼかし無しの 45%（180ms）、本体は 240ms で入り 140ms で出る。
   はね返りは使わない */
.confirm2-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background: var(--color-scrim);
  opacity: 0;
  transition: opacity var(--dur-exit) var(--ease-in);
}

.confirm2-overlay.confirm2-visible {
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out);
}

.confirm2-box {
  width: min(440px, 100%);
  padding: var(--space-4);
  border: 0;
  border-radius: var(--radius-sheet);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-float);
}

.confirm2-overlay.confirm2-visible .confirm2-box {
  animation: dialog-in var(--dur-slow) var(--ease-spring);
}

.confirm2-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  font-size: var(--fs-h3);
}

/* 削除など（danger）はマークを出さない（2026-09-30 CEO「ゴミ箱のマークは文字に」。app.js の confirm2） */
.confirm2-icon-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.confirm2-icon-info {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.confirm2-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.confirm2-message {
  font-size: var(--fs-ui);
  line-height: var(--lh-body);
  color: var(--color-text-2);
  margin-bottom: var(--space-4);
  font-feature-settings: normal;
}

.confirm2-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.confirm2-cancel,
.confirm2-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  cursor: pointer;
  touch-action: manipulation;
  transition: var(--t-control);
}

.confirm2-cancel {
  background: var(--color-bg-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

.confirm2-confirm {
  font-weight: var(--fw-bold);
  color: var(--ink-0);
}

/* 塗りの赤は確認の中だけ（取り消せない操作） */
.confirm2-confirm-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
}

.confirm2-confirm-warning,
.confirm2-confirm-info {
  background: var(--color-chrome);
  border-color: var(--color-chrome);
}

@media (hover: hover) and (pointer: fine) {
  .data-table tbody tr:hover {
    background: var(--color-bg-subtle);
  }

  .data-table tbody tr:hover .col-actions {
    background: var(--color-bg-subtle);
  }

  :where(.data-table) a:where(:not([class])):hover,
  :where(.content-area, .karte-drawer-body) a:where(:not([class])):hover,
  .link-gold:hover {
    color: var(--color-accent);
    text-decoration-color: currentColor;
  }

  .card--interactive:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-1px);
  }

  .alert-close:hover {
    background: rgba(0, 0, 0, 0.05);
  }

  .toast-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--ink-0);
  }

  .confirm2-cancel:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-hover);
  }

  .confirm2-confirm-danger:hover {
    background: var(--color-danger-strong);
    border-color: var(--color-danger-strong);
  }

  .confirm2-confirm-warning:hover,
  .confirm2-confirm-info:hover {
    opacity: 0.9;
  }
}

.card--interactive {
  cursor: pointer;
  transition: var(--t-control);
}

.confirm2-cancel:active {
  background: var(--color-bg-pressed);
  transition-duration: var(--dur-press);
}

.confirm2-confirm:active {
  transform: translateY(1px);
  transition-duration: var(--dur-press);
}

.confirm2-confirm-warning:active,
.confirm2-confirm-info:active {
  background: var(--color-chrome-pressed);
  opacity: 1;
}

/* ── シート `.sheet`（試作 第2弾 2026-10-25。docs/DESIGN.md 8.2） ──
   押したカードの位置から広がり、閉じると元の位置へ縮む（static/js/app.js の AppMotion）。
   広い画面は真ん中、スマホは下から。上の「つまみ」を下に引いても閉じられるが、必ず「閉じる」ボタンも置く。
   <div class="sheet" id="…" hidden role="dialog" aria-modal="true" aria-labelledby="…">
     <div class="sheet__panel"><div class="sheet__grab" aria-hidden="true"></div>
       <div class="sheet__head"><h2 class="sheet__title">…</h2><button class="btn btn-outline btn-sm" data-sheet-close>閉じる</button></div>
       <div class="sheet__body">…</div></div></div>
   開くボタンは data-sheet-open="シートの id" */
.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  background: var(--color-scrim);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.sheet-scrim.is-visible {
  opacity: 1;
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-dialog) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  pointer-events: none;
}

.sheet__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sheet);
  background: var(--color-bg-surface);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
  pointer-events: auto;
  transform-origin: center;
  will-change: transform;
}

.sheet__grab {
  flex: none;
  display: flex;
  justify-content: center;
  height: 24px;
  cursor: grab;
  touch-action: none;
}

.sheet__grab::before {
  content: "";
  width: 40px;
  height: 5px;
  margin-top: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}

.sheet__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-2);
}

.sheet__title {
  margin: 0;
  font-size: var(--fs-h3);
}

.sheet__body {
  overflow-y: auto;
  padding: var(--space-2) var(--space-4) var(--space-4);
}

body.sheet-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .sheet {
    align-items: flex-end;
    padding: 0;
  }

  .sheet__panel {
    width: 100%;
    max-height: 88vh;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 見た目には出さず、読み上げにだけ残す文字（言葉の付いたラベルを画面から省くときだけ使う） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── 確定の印 `.done-check`（確定したら、チェックがふわっと入る） ── */
.done-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: var(--color-success);
  color: var(--ink-0);
  font-size: 0.8em;
  flex: none;
  animation: check-pop 360ms var(--ease-spring);
}

@keyframes check-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ── 進み具合の棒 `.progress-bar`（読み取り中など、待つ間に進みを見せる） ── */
.progress-bar {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-bg-muted);
}

.progress-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--color-text);
  transition: width var(--dur-slow) var(--ease-out);
}

/* 1枚の中の進みは分からないので、棒の上を薄い帯が流れて「止まっていない」ことを見せる */
.progress-bar.is-working::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 30%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.45);
  animation: progress-run 1.4s var(--ease-out) infinite;
}

@keyframes progress-run {
  from { transform: translateX(-100%); }
  to { transform: translateX(340%); }
}

/* ============================================================
   5. 画面ごとの共通の部品（今の画面が使っている名前のまま。見た目はトークンだけで決める）
   ============================================================ */

/* ── 期間の切り替え（_partials/period_nav.html。ダッシュボード・商品分析・顧客分析・食材別・AI相談） ──
   「今日・直近7日…」と月のボタンは切り替え（.seg）の形にする。選んだもの（.btn-primary）は白地＋枠＋墨 700 */
.dashboard-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.period-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.period-nav .period-presets {
  align-items: center;
  padding: 2px;
  background: var(--ios-fill);
  border-radius: var(--radius-field);
}

/* 期間・月の切り替えは、分割ボタン（.seg）と同じ形: 標準の太さ・選んだものは白い面に影（第7弾。以前は枠と太字） */
.period-nav .period-presets > .btn {
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-weight: var(--fw-regular);
  transform: none;
  opacity: 1;
}

.period-nav .period-presets > .btn-primary {
  background: var(--color-bg-surface);
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

/* まだ来ていない月: 押せない。透明度で薄くせず、読める濃さ（文字3。切り替えの入れ物の #E1E3E7 の上で 4.6:1）のまま、
   細い字で押せる月（500）と分ける（2026-09-30 の決まり「薄いグレーをなくす」。破線の枠は 2026-10-01 にやめた。D-26） */
.period-nav .period-presets > .btn.is-future {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-3);
  font-weight: var(--fw-regular);
  cursor: not-allowed;
}

.period-custom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* 日付の指定の欄と「適用」は欄と同じ高さ 48 にそろえる。開始と終了の欄の幅は、
   いちばん長い「10月10日（土）」と右のカレンダーの印が入る幅にそろえる（150px では入りきらず幅がずれた） */
.period-custom .form-input-sm,
.period-custom .date-field {
  width: auto;
  min-width: 10.5em;
}

.period-custom .btn {
  min-height: var(--control-h);
}

.period-sep {
  color: var(--color-text-2);
  font-size: var(--fs-label);
}

/* 表示項目の切り替え（ダッシュボード） */
.widget-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  padding: 12px var(--space-3);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-label);
}

.widget-toggle .toggle-label {
  font-weight: var(--fw-regular);
  color: var(--color-text);
  white-space: nowrap;
}

.widget-toggle label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  cursor: pointer;
  white-space: nowrap;
  color: var(--color-text-2);
}

/* ── 顧客一覧 ── */
.customer-sort-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
}

.customer-sort-select {
  min-width: 220px;
}

.customer-table-wrap {
  display: block;
}

.customer-card-grid {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.customer-list-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.customer-list-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.customer-list-card-head h3 {
  margin-top: var(--space-2);
  font-size: var(--fs-body);
}

.customer-list-card-meta {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--color-text-2);
  font-size: var(--fs-label);
}

.customer-list-card-meta span {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.customer-list-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.customer-list-card-actions form {
  margin: 0;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.page-info {
  font-size: var(--fs-label);
  color: var(--color-text-3);
  font-variant-numeric: tabular-nums;
}

/* ── ログイン前の画面の外枠（base.html の login_content。中の見た目は auth/_entrance_style.html） ── */
.login-layout {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── CSV の取り込み ── */
.upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.upload-card {
  padding: var(--space-5) var(--space-4);
  text-align: center;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.upload-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
  font-size: 1.4rem;
  color: var(--color-accent-strong);
}

.upload-card h3 {
  margin-bottom: var(--space-1);
  font-size: var(--fs-h3);
  color: var(--color-text);
}

.upload-desc {
  margin-bottom: var(--space-3);
  font-size: var(--fs-label);
  color: var(--color-text-3);
}

.file-input {
  display: none;
}

/* ファイルを選ぶ（破線はやめて実線。D-26） */
.file-input-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  margin-bottom: var(--space-3);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--fs-ui);
  cursor: pointer;
  transition: var(--t-colors);
}

.file-name {
  display: block;
  min-height: 1.2rem;
  margin-bottom: var(--space-2);
  font-size: var(--fs-label);
  color: var(--color-accent-strong);
}

.csv-hint {
  margin-top: var(--space-3);
  text-align: left;
}

.csv-hint summary {
  font-size: var(--fs-label);
  color: var(--color-text-2);
  cursor: pointer;
}

.csv-hint code {
  display: block;
  margin-top: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  font-size: var(--fs-label);
  word-break: break-all;
  color: var(--color-text-2);
}

.csv-columns {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-2);
  font-size: var(--fs-label);
}

.csv-columns th {
  padding: var(--space-1) var(--space-2);
  text-align: left;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-strong);
  color: var(--color-text-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}

.csv-columns td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.csv-columns code {
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-accent-subtle);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--color-accent-strong);
}

/* ── おすすめ（ml/recommend.html） ── */
.inline-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.customer-pref-card {
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.pref-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.recommend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-3);
}

.recommend-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.recommend-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-chrome);
  color: var(--color-on-chrome-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
}

.recommend-content {
  flex: 1;
  min-width: 0;
}

.recommend-name {
  margin-bottom: 2px;
  font-size: var(--fs-body);
  color: var(--color-text);
}

.recommend-category {
  font-size: var(--fs-label);
  color: var(--color-text-3);
}

.recommend-desc {
  margin-top: var(--space-1);
  font-size: var(--fs-label);
  color: var(--color-text-2);
}

.recommend-price {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.recommend-score {
  position: absolute;
  right: var(--space-3);
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-label);
  color: var(--color-text-3);
}

.score-bar {
  height: 4px;
  max-width: 60px;
  border-radius: 2px;
  background: var(--chart-primary);
}

/* ── DB の閲覧（運営者） ── */
.db-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.db-table-wrap {
  overflow: visible;
}

.db-table-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.db-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.db-raw-table {
  font-size: var(--fs-label);
  white-space: nowrap;
}

.db-raw-table td,
.db-raw-table th {
  max-width: 200px;
  padding: var(--space-1) var(--space-2);
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-count {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.3);
  font-size: var(--fs-label);
}

/* ── AI相談のデータの箱 ── */
/* ── レジ（pos.html。画面の <style> が同じ名前を決めている所は画面側が勝つ） ── */
.pos-layout {
  gap: var(--space-4);
}

/* 第7弾: 左右の列そのものは面を持たない。灰色の地の上に、白い角丸のまとまり
   （カテゴリの一覧・注文の一覧・会計の欄）を置く（設定アプリの型。pos.html） */
.menu-panel,
.cart-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.menu-grid {
  gap: 12px;
}

/* 品のボタン: 1px の枠で境目を見せる。押している間は面を一段濃く（大きな面なので少しだけ縮める） */
.menu-btn {
  min-height: 96px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
  touch-action: manipulation;
}

.menu-btn:active {
  background: var(--color-bg-pressed);
  border-color: var(--color-border-strong);
  transform: scale(0.97);
  transition-duration: var(--dur-press);
}

.cart-item-price {
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.total-display {
  padding: 12px 0;
}

.total-display .total-value-lg,
.verify-total-value,
.success-card .total {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.total-display .total-value-lg {
  color: var(--color-text);
}

.pay-btn {
  min-height: var(--control-h-sm);
  border-color: var(--color-border-strong);
}

.pay-btn.active {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.checkout-btn {
  min-height: 60px;
  font-size: var(--fs-body);
  background: var(--color-chrome);
  border-color: var(--color-chrome);
}

/* ── 顧客カルテのドロワー（顧客管理以外の画面で顧客名を押すと右から開く。中身は customers/_panel.html） ── */
.js-karte-name {
  text-decoration: underline dotted rgba(255, 255, 255, 0.6);
  text-underline-offset: 2px;
  cursor: pointer;
}

.karte-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: none;
}

.karte-drawer.open {
  display: block;
}

.karte-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-scrim);
}

.karte-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(480px, 100vw);
  background: var(--color-bg-page);
  box-shadow: var(--shadow-float);
  animation: drawer-in var(--dur-slow) var(--ease-out);
}

.karte-drawer-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--topbar-height);
  padding: 0 var(--space-2) 0 var(--space-3);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.karte-drawer-title {
  flex: 1;
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
}

.karte-drawer-title i {
  margin-right: var(--space-1);
  color: var(--color-icon);
}

.karte-drawer-head .btn-outline {
  background: transparent;
}

.karte-drawer-close {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-2);
  font-size: var(--fs-h3);
  cursor: pointer;
}

.karte-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

body.karte-drawer-open {
  overflow: hidden;
}

/* ドロワーの中のカルテの要約（.kp-*） */
.kp {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--fs-ui);
  color: var(--color-text);
}

.kp-error {
  color: var(--color-danger);
  font-size: var(--fs-label);
}

.kp-head,
.kp-section,
.kp-kpis,
.kp-alert,
.kp-next {
  padding: 12px var(--space-3);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.kp-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.kp-name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}

.kp-rank {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  color: var(--color-text-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.kp-rank-regular {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--ink-0);
}

.kp-rank-repeater {
  background: var(--color-accent-subtle);
  border-color: var(--blue-300);
  color: var(--color-accent-strong);
}

.kp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-3);
  margin-top: var(--space-1);
  font-size: var(--fs-label);
  color: var(--color-text-2);
}

.kp-meta i {
  margin-right: 2px;
  color: var(--color-icon);
}

.kp-soon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.kp-soon span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
}

.kp-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  padding: 12px;
}

.kp-kpi .lbl {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--color-text-2);
}

.kp-kpi .val {
  display: block;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.kp-kpi .val small {
  margin-left: 2px;
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--color-text-3);
}

.kp-next {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-ui);
  font-weight: var(--fw-regular);
  color: var(--color-accent-strong);
}

.kp-next i {
  margin-right: var(--space-1);
}

.kp-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 12px;
  border-left: 4px solid var(--color-danger);
  background: var(--color-danger-bg);
}

.kp-alert.empty {
  padding: var(--space-2) 12px;
  border-left-color: var(--color-border-strong);
  background: var(--color-bg-subtle);
  text-align: left;
}

.kp-alert-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--color-danger);
  white-space: nowrap;
}

.kp-alert.empty .kp-alert-label {
  color: var(--color-text-2);
}

.kp-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.kp-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-sm);
  background: var(--color-accent-subtle);
  color: var(--color-accent-strong);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
}

.kp-tag em {
  font-style: normal;
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--color-text-3);
}

.kp-tag-alert {
  border-color: var(--color-danger-border);
  background: var(--color-bg-surface);
  color: var(--color-danger);
}

.kp-section-title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  color: var(--color-text-2);
}

.kp-section-title i {
  margin-right: var(--space-1);
  color: var(--color-icon);
}

.kp-dl {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: var(--space-1) var(--space-2);
  margin: 0;
}

.kp-dl dt {
  padding-top: 2px;
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--color-text-2);
}

.kp-dl dd {
  margin: 0;
  word-break: break-word;
}

.kp-none {
  font-size: var(--fs-label);
  color: var(--color-text-3);
}

.kp-fixed-memo {
  margin-bottom: var(--space-2);
  padding: var(--space-2) 12px;
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  background: var(--color-accent-subtle);
  white-space: pre-wrap;
}

.kp-notes,
.kp-visits {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kp-notes li {
  display: grid;
  grid-template-columns: 3.2em auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-1);
}

.kp-note-date,
.kp-visit-date {
  padding-top: 2px;
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-3);
  white-space: nowrap;
}

.kp-note-kind {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  color: var(--color-text-badge);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  white-space: nowrap;
}

.kp-visits li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.kp-visit-meta {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-label);
  color: var(--color-text-2);
}

.kp-visit-amount {
  font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  white-space: nowrap;
}

.kp-actions {
  display: flex;
  justify-content: flex-end;
  padding-bottom: var(--space-2);
}

@media (hover: hover) and (pointer: fine) {
  .widget-toggle label:hover {
    color: var(--color-text);
  }

  .period-nav .period-presets > .btn:not(.btn-primary):not(.is-future):hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--color-text);
    transform: none;
  }

  .period-nav .period-presets > .btn-primary:hover {
    opacity: 1;
    transform: none;
  }

  .file-input-label:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
  }

  .menu-btn:hover {
    border-color: var(--color-border-strong);
    transform: none;
  }

  .cart-item:hover {
    background: var(--color-bg-subtle);
  }

  .karte-drawer-head .btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--ink-0);
  }

  .karte-drawer-close:hover {
    color: var(--ink-0);
  }
}

/* ============================================================
   6. 幅ごとの指定
   ============================================================ */

/* タブレット（10〜11インチ。1180px 以下）: 本文の左右は 24px */
@media (max-width: 1180px) {
  :root {
    --page-gutter: var(--space-4);
    --page-top: var(--space-4);
  }
}

/* iPad 10〜11インチの幅（768〜1180px）のフォーム: 2列にする。送るボタンの帯を下に固定するのは、
   画面に収まらない長いフォーム（.luxury-form--long。目安は欄が7つ以上）だけ。ボタンが1つのカードには固定しない */
@media (min-width: 768px) and (max-width: 1180px) {
  .luxury-form .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .luxury-form .form-group.full-width {
    grid-column: 1 / -1;
  }

  .luxury-form--long .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: var(--space-3) 0;
    background: var(--color-bg-surface);
    border-top: 1px solid var(--color-border);
  }
}

/* サイドバーを引き出しにする（1024px 以下）。入り 240ms・出 180ms で、後ろの覆いと一緒に動かす */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-in);
  }

  .sidebar.open {
    transform: none;
    box-shadow: var(--shadow-float);
    transition: transform var(--dur-slow) var(--ease-out);
  }

  /* 1画面に収まるよう、項目の中でスクロールしてフッターを常に見せる */
  .nav-menu {
    overflow-y: auto;
    min-height: 0;
  }

  .sidebar-footer {
    flex-shrink: 0;
  }

  .main-content {
    margin-left: 0;
  }

  .top-bar {
    padding: 0 var(--space-3) 0 0;
  }

  .kpi-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chart-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-table-wrap {
    display: none;
  }

  .customer-card-grid {
    display: grid;
  }
}

@media (max-width: 768px) {
  .top-bar-right {
    gap: var(--space-2);
  }

  .shortcut-hint {
    display: none;
  }

  .back-to-top {
    right: var(--space-3);
    bottom: var(--space-3);
  }
}

/* スマホ（640px 以下）: 本文とカードの内側は 16px */
@media (max-width: 640px) {
  :root {
    --page-gutter: var(--space-3);
    --page-top: var(--space-4);
  }

  /* トップバーに「統合管理システム」を出さない（店名・開閉ボタン・日付が1行に収まるように） */
  .card,
  .form-card,
  .chart-card,
  .kpi-card,
  .stat,
  .customer-list-card {
    padding: var(--space-3);
  }

  .kpi-cards,
  .form-row,
  .customer-card-grid,
  .upload-grid,
  .recommend-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .page-actions-group {
    width: 100%;
  }

  .page-actions-group .btn,
  .search-form .btn {
    justify-content: center;
  }

  .search-form,
  .search-input-wrapper,
  .search-input {
    width: 100%;
  }

  .customer-sort-select {
    min-width: 0;
    width: 100%;
  }

  /* ダイアログはスマホでは下から出るシート */
  .confirm2-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .confirm2-box {
    width: 100%;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }

  .confirm2-actions > * {
    flex: 1 1 0;
  }

  /* ログイン: 縦に積む */
}

/* ============================================================
   7. 状態と動き
   ============================================================ */

/* フォーカスの輪（キーボードで動かしたとき）: 2px・離し 2px の1種類。要素の角丸は変えない（M-17）。
   白地は青、黒地（トースト）は明るい青（試作でサイドバー・トップバー・カルテの見出しは明るくした） */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

:is(.toast) :focus-visible {
  outline-color: var(--color-focus-on-chrome);
}

/* サイドバーは横のはみ出しを切るので、輪を内側に描く */
.sidebar :focus-visible {
  outline-offset: -2px;
}

/* 入力欄は輪を出さず、枠をアクセント 2px にする（上の「欄」の :focus） */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.search-input:focus-visible,
.date-field > input.date-field__input:focus-visible {
  outline: none;
}

/* 押す所は、ダブルタップで画面が拡大されないようにする（−／＋ の連打など） */
:where(button, a, [role="button"], input[type="checkbox"], input[type="radio"], label, summary) {
  touch-action: manipulation;
}

/* 一律の演出はやめた（禁止事項9・D-06・M-04）。app.js がクラスを付けても要素を隠さない・動かさない */
.scroll-reveal,
.scroll-reveal.revealed {
  opacity: 1;
  transform: none;
  transition: none;
}

/* 波紋（Material 風）・品のボタンの「ポン」・カートの数の印の膨らみは使わない（M-15・M-21） */
.ripple {
  display: none;
}

.menu-btn-pop,
.badge-bounce {
  animation: none;
}

/* 動きを減らす設定（OS の「視差効果を減らす」）: 移動を消し、色と不透明度の短い変化だけ残す（M-03） */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-property: color, background-color, border-color, opacity, visibility !important;
    transition-duration: var(--dur-fast) !important;
    scroll-behavior: auto !important;
  }

  .done-check,
  .progress-bar.is-working::after {
    animation: none !important;
  }

  /* 押したときに縮めない（試作の触感を切る） */
  .btn:active,
  :is(.chip, .pick-chip, .seg__item, .seg > button, .seg > a, .group-tab, .cat-tab, .oc-tab, .q-tabs > button,
    .nav-link, .nav-sub-link, .logout-btn, .card--interactive, .back-to-top, .sidebar-toggle):active {
    transform: none !important;
  }

  /* 明滅を止めて灰色の四角だけ */
  .skeleton,
  .kpi-card.loading .kpi-value,
  .kpi-card.loading .kpi-sub,
  .kpi-card.loading .kpi-label,
  .kp-flash {
    animation: none !important;
  }

  /* 読み込み中は明滅させず、300ms 遅らせて出すことだけ残す */
  .app-loading-indicator {
    animation: kp-appear 1ms linear 300ms both !important;
  }

  .btn:active:not(:disabled):not([aria-disabled="true"]),
  .menu-btn:active,
  .confirm2-confirm:active {
    transform: none;
  }
}

/* ============================================================
   8. 試作 第3弾（2026-10-25）: 毎日使い慣れたアプリの「型」にそろえる（docs/DESIGN.md 14章）
   - iPad: Apple の設定アプリのような、明るい左のリスト（色つきの丸いマーク＋言葉）＋右の中身
   - スマホ: 下のタブバー（マーク＋言葉）
   - 設定・管理: 角丸でまとめた縦のリスト（左に色つきの丸いマーク、右に今の値と「›」）
   - ホバーに頼らない（iPad にマウスは無い）。押す所は 44px 以上
   この節は試作の層。採るときは各節へ組み込む
   ============================================================ */

/* ── 色つきの丸いマーク `.app-icon`（言葉と組で使う。マークだけのボタンにしない） ── */
.app-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--icon-gray);
  color: var(--ink-0);
  font-size: 0.85rem;
}

.app-icon--red { background: var(--icon-red); }
.app-icon--orange { background: var(--icon-orange); }
.app-icon--green { background: var(--icon-green); }
.app-icon--teal { background: var(--icon-teal); }
.app-icon--blue { background: var(--icon-blue); }
.app-icon--indigo { background: var(--icon-indigo); }
.app-icon--purple { background: var(--icon-purple); }
.app-icon--pink { background: var(--icon-pink); }

/* ── サイドバー: 開いているときも、項目の前に色つきの丸いマークを出す（設定アプリの左のリスト） ── */
.sidebar:not(.collapsed) .nav-link > i:not(.nav-caret) {
  display: inline-flex;
}

.nav-link > i:not(.nav-caret) {
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--icon-gray);
  color: var(--ink-0) !important;
  font-size: 0.85rem;
}

#nav-pos > i:not(.nav-caret) { background: var(--icon-green); }
#nav-reservations > i:not(.nav-caret) { background: var(--icon-orange); }
#nav-customers > i:not(.nav-caret) { background: var(--icon-blue); }
#nav-menu > i:not(.nav-caret) { background: var(--icon-pink); }
#nav-finance > i:not(.nav-caret) { background: var(--icon-indigo); }
#nav-calendar > i:not(.nav-caret) { background: var(--icon-red); }
#nav-attendance > i:not(.nav-caret) { background: var(--icon-teal); }
#nav-analytics > i:not(.nav-caret) { background: var(--icon-purple); }
#nav-settings > i:not(.nav-caret) { background: var(--icon-gray); }

.nav-link {
  gap: var(--space-2);
  min-height: var(--control-h);
  height: auto;
}

.nav-sub-link {
  padding-left: 54px;
}

.nav-sub-link::before {
  left: 40px;
}

/* 指で触る端末（iPad）では、たたんだサイドバーをマークだけの列にしない（項目名がホバーでしか読めないため）。
   たたむと全部しまい、上の「開く」で出す */
@media (min-width: 1025px) and (hover: none) {
  .sidebar.collapsed {
    width: 0;
    overflow: hidden;
    border-right: 0;
  }

  .main-content.sidebar-collapsed {
    margin-left: 0;
  }
}

/* ── 角丸でまとめた縦のリスト `.ios-group`（設定・管理・ホームの「もっと見る」） ──
   <h3 class="ios-group__title">見出し</h3>
   <div class="ios-group">
     <a class="ios-row" href="…"><span class="app-icon app-icon--blue"><i class="fas fa-…"></i></span>
       <span class="ios-row__label">項目</span><span class="ios-row__value">今の値</span><span class="ios-row__chev" aria-hidden="true">›</span></a>
   </div> */
.ios-group__title {
  margin: var(--space-4) var(--space-3) var(--space-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--color-text-3);
}

.ios-group__title:first-child {
  margin-top: 0;
}

.ios-group {
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-bg-muted);
}

.ios-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-ui);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease-out);
}

/* 行の区切りは、マークの右から（設定アプリと同じ） */
.ios-row + .ios-row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 58px;
  height: 1px;
  background: var(--color-border);
}

.ios-row:active {
  background: var(--color-border);
  transition-duration: 0ms;
}

.ios-row.is-current {
  background: var(--color-border);
}

.ios-row__label {
  flex: 1;
  min-width: 0;
  font-weight: var(--fw-regular);
}

.ios-row__sub {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--color-text-3);
}

.ios-row__value {
  flex: none;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-ui);
  color: var(--color-text-3);
}

.ios-row__chev {
  flex: none;
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--color-text-3);
}

/* ── スマホの下のタブバー `.tabbar`（マーク＋言葉。5つまで） ── */
.tabbar {
  display: none;
}

@media (max-width: 640px) {
  .tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-topbar);
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-bg-surface);
    border-top: 1px solid var(--color-border);
  }

  .tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--tap-min);
    color: var(--color-text-3);
    font-size: 0.85rem;
    font-weight: var(--fw-medium);
    line-height: 1.2;
    text-decoration: none;
    transition: transform var(--dur-press-out) var(--ease-spring);
  }

  .tabbar__item i {
    font-size: 1.1rem;
  }

  .tabbar__item.is-active {
    color: var(--color-text);
  }

  .tabbar__item:active {
    transform: scale(0.94);
    transition-duration: var(--dur-press-in);
  }

  /* タブバーの分だけ、本文と下に固定したもの（AI相談の入力欄・伝票の登録）を持ち上げる */
  body.has-tabbar .main-content {
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }

  body.has-tabbar :is(.ai-form, .scan-import-actions, .store-actions) {
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }

  body.has-tabbar .back-to-top {
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-3));
  }

  /* キーボードが出ている間は、タブバーをしまって入力欄を見せる（static/js/app.js が kb-open を付ける） */
  body.kb-open .tabbar {
    display: none;
  }

  body.kb-open.has-tabbar :is(.ai-form, .scan-import-actions, .store-actions) {
    bottom: var(--kb, 0px);
  }
}

/* ── ホーム画面から開いたとき（PWA）: ノッチ・ホームバーに重ねない ── */
.top-bar {
  padding-top: env(safe-area-inset-top);
  height: calc(var(--topbar-height) + env(safe-area-inset-top));
}

.main-content {
  padding-top: calc(var(--topbar-height) + env(safe-area-inset-top));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.sidebar {
  top: calc(var(--topbar-height) + env(safe-area-inset-top));
  height: calc(100vh - var(--topbar-height) - env(safe-area-inset-top));
  height: calc(100dvh - var(--topbar-height) - env(safe-area-inset-top));
  padding-bottom: env(safe-area-inset-bottom);
}

@media (prefers-reduced-motion: reduce) {
  .tabbar__item:active {
    transform: none;
  }
}

/* キーボードの分だけ、下に固定した入力欄を持ち上げる（--kb は static/js/app.js が入れる） */
body.kb-open :is(.ai-form, .scan-import-actions, .store-actions) {
  bottom: var(--kb, 0px);
}

/* ── 設定の2ペイン `.settings-split`（試作 第3弾。設定アプリの iPad 版の型） ──
   左に設定の一覧（_partials/settings_list.html）、右に中身。設定の入口（/settings、.is-root）では、
   狭い幅でも一覧を上に出す。ほかの設定の画面では、狭い幅は一覧をしまい「‹ 設定」で戻る */
.settings-split {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.settings-split__nav {
  position: sticky;
  top: calc(var(--topbar-height) + env(safe-area-inset-top) + var(--space-3));
}

.settings-split__main {
  min-width: 0;
}

.settings-back {
  display: none;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  margin-bottom: var(--space-2);
  color: var(--color-link);
  font-size: var(--fs-ui);
  font-weight: var(--fw-regular);
  text-decoration: none;
}

.settings-back span {
  font-size: var(--fs-h3);
}

@media (max-width: 1024px) {
  .settings-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-split__nav {
    position: static;
  }

  .settings-split:not(.is-root) .settings-split__nav {
    display: none;
  }

  .settings-back {
    display: inline-flex;
  }
}

/* ============================================================
   9. 試作 第4弾（2026-10-25 CEO「細かいところも全部、伝えた通りに限りなく近く」）
   全画面の部品を、毎日使い慣れたアプリの型（Apple の設定・YouTube・X・Instagram・Gemini）にそろえる。
   - 地は灰色（#F2F2F7）、まとまり（カード・表・設定のリスト）は白・枠なし・角丸 16
   - 見出しは iOS の大きな題名、節の見出しは小さな灰色の文字
   - 入力欄は白・細い線・角丸 10、検索欄は灰色の面・虫めがね（iOS の検索欄）
   - ボタン: 主は墨の丸薬型（X・YouTube）、二番手は灰色の面（iOS の灰色のボタン）、文字のボタンは青（iOS）、危険は赤い文字
   - 切り替えは iOS の分割ボタン（灰色の入れ物に白い選んだ印）、絞り込みのチップは YouTube の丸いチップ
   - 確認は iOS のアラート（真ん中・角丸 14・下に区切り線で並ぶ文字のボタン）、トーストは黒い丸薬
   この節は試作の層。採るときは各節へ組み込む
   ============================================================ */

/* ── 地・題名 ── */
body,
.main-content {
  background: var(--color-bg-page);
}

.page-heading {
  font-size: 2rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}

/* 節の見出し（カードの中の「プロフィール」など）: iOS のグループの題名のように小さく灰色に */
.section-title {
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.section-title i {
  display: none;
}

.ax-title {
  font-size: var(--fs-h2);
}

.ax-title > i {
  display: none;
}

/* ── まとまり: 白・枠なし・角丸 16 ── */
:is(.card, .form-card, .chart-card, .kpi-card, .stat, .table-card, .entry-card, .upload-card, .home-card, .scan-preview-card) {
  border-color: transparent;
  border-radius: var(--radius-card);
  background: var(--color-bg-surface);
  box-shadow: none;
}

.table-card {
  /* 角丸の外は隠すが、列が多いときは横に送れるようにする（以前は overflow: hidden で右の「金額」が切れていた） */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
}

/* 表: 見出しは小さな灰色、行の区切りは細い線、行は 52px 以上（iOS のリスト） */
.data-table thead th {
  height: 40px;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--ios-separator);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--color-text-3);
}

.data-table td {
  height: 52px;
  border-bottom: 1px solid var(--ios-separator);
}

.data-table thead .col-actions,
.data-table .col-actions {
  background: var(--color-bg-surface);
}

/* ── 入力欄 ──
   第7弾: 画面の上の道具の行（並び替え・日付・絞り込み）や表の中の欄も、フォームのまとまりの中と同じ
   「灰色の面・枠なし」にそろえる（検索欄・分割ボタン・二番手のボタンと同じ面）。触ると白に青い線 */
.form-input,
.form-select,
.form-textarea,
.date-field {
  border-color: transparent;
  border-radius: var(--radius-field);
  background-color: var(--ios-fill);
}

:is(.form-input, .form-select, .form-textarea):focus,
.date-field:focus-within {
  border-color: var(--color-focus);
  background-color: var(--color-bg-surface);
}

.form-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--color-text-2);
}

/* 検索欄: 灰色の面・虫めがね・枠なし（iOS の検索欄） */
input[type="search"].form-input,
.search-input,
.form-input.search-input {
  border-color: transparent;
  border-radius: var(--radius-field);
  background-color: var(--ios-fill);
}

input[type="search"].form-input:focus,
.search-input:focus {
  background-color: var(--color-bg-surface);
  border-color: var(--color-focus);
}

/* ── ボタン ── */
.btn-secondary,
.btn--secondary,
.btn-outline,
.btn-success {
  border-color: transparent;
  background: var(--ios-fill);
  color: var(--color-text);
}

.btn-ghost,
.btn--ghost {
  color: var(--color-link);
}

.btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
.btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.btn-outline:active:not(:disabled):not([aria-disabled="true"]),
.btn-success:active:not(:disabled):not([aria-disabled="true"]) {
  background: rgba(118, 118, 128, 0.24);
}

@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover,
  .btn--secondary:hover,
  .btn-outline:hover,
  .btn-success:hover {
    background: rgba(118, 118, 128, 0.18);
    border-color: transparent;
  }
}

/* 「その他」メニューの中のボタンは、リストの行の形（区切り線のある白い行） */
.more-menu__panel {
  border: 0;
  border-radius: var(--radius-alert);
  padding: 4px 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}

.more-menu__panel .btn {
  justify-content: flex-start;
  width: 100%;
  border-radius: 0;
  background: transparent;
}

.more-menu__panel .btn + .btn {
  border-top: 1px solid var(--ios-separator);
}

/* ── 切り替え（iOS の分割ボタン）: 灰色の入れ物・角丸 10・選んだものは白い面に影 ── */
.seg,
.group-tabs {
  border-radius: var(--radius-field);
  padding: 2px;
  gap: 0;
  background: var(--ios-fill);
}

.seg__item,
.seg > button,
.seg > a,
.group-tab,
.cat-tab,
.oc-tab,
.q-tabs > button {
  border-radius: var(--radius-sm);
  min-height: 40px;
  color: var(--color-text);
}

/* 選ぶチップ（絞り込み）: YouTube の丸いチップ。選ぶと墨の面に白い文字 */
.chip,
.pick-chip {
  border-color: transparent;
  background: var(--ios-fill);
}

.chip.is-active,
.chip[aria-pressed="true"],
.chip:has(> input:checked),
.pick-chip.is-active {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-bg-surface);
  box-shadow: none;
}

/* ── お知らせ（本文の中）: 左の線をやめ、色の面だけの角丸（iOS のバナー） ── */
.alert {
  border: 0;
  border-radius: var(--radius-alert);
}

.help-box {
  border: 0;
  border-radius: var(--radius-alert);
  background: var(--color-bg-surface);
}

/* ── 空の状態: 真ん中に、丸いマークと言葉（iOS の「項目がありません」） ── */
.empty-state {
  text-align: center;
}

.empty-state > i:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--ios-fill);
  font-size: var(--fs-h2);
}

/* ── 戻るリンク: iOS の「‹ 一覧」（青い文字） ── */
.back-link {
  color: var(--color-link);
  font-weight: var(--fw-regular);
}

.back-link i {
  font-size: 0.9em;
}

/* ── 確認（iOS のアラート）: 真ん中・幅 320・角丸 14・下に区切り線で並ぶ文字のボタン ── */
.confirm2-box {
  width: min(320px, 100%);
  padding: var(--space-4) 0 0;
  border-radius: var(--radius-alert);
  text-align: center;
  overflow: hidden;
}

.confirm2-icon {
  margin: 0 auto var(--space-2);
}

.confirm2-title {
  padding: 0 var(--space-4);
  font-size: var(--fs-body);
}

.confirm2-message {
  padding: 0 var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--fs-label);
}

.confirm2-actions {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0;
  border-top: 1px solid var(--ios-separator);
}

.confirm2-cancel,
.confirm2-confirm {
  min-height: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-link);
  font-size: var(--fs-body);
}

.confirm2-cancel {
  order: 0;
  font-weight: var(--fw-regular);
}

.confirm2-confirm {
  order: 1;
  border-left: 1px solid var(--ios-separator);
  font-weight: var(--fw-bold);
}

.confirm2-confirm-danger {
  background: transparent;
  color: var(--color-danger);
}

.confirm2-confirm-warning,
.confirm2-confirm-info {
  background: transparent;
  color: var(--color-link);
}

.confirm2-cancel:active,
.confirm2-confirm:active,
.confirm2-confirm-warning:active,
.confirm2-confirm-info:active {
  transform: none;
  background: var(--ios-fill);
}

@media (hover: hover) and (pointer: fine) {
  .confirm2-cancel:hover,
  .confirm2-confirm-danger:hover,
  .confirm2-confirm-warning:hover,
  .confirm2-confirm-info:hover {
    background: rgba(118, 118, 128, 0.08);
    opacity: 1;
  }
}

/* ── トースト: 黒い丸薬（左の線はやめ、マークの色で成功・失敗を示す） ── */
.toast {
  border-left: 0;
  border-radius: var(--radius-pill);
  padding-left: var(--space-4);
}

/* ── サイドバー: 選んだ行は白い面（設定アプリの静かな型）。区切り線は細く ── */
.sidebar {
  border-right: 1px solid var(--ios-separator);
}

.top-bar {
  border-bottom: 1px solid var(--ios-separator);
}

.sidebar-footer {
  border-top: 1px solid var(--ios-separator);
}

.nav-link.active,
.nav-sub-link.active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* 設定のリスト・ホームの「もっと見る」: 白いまとまり（灰色の地の上） */
.ios-group {
  background: var(--color-bg-surface);
}

.ios-row:active,
.ios-row.is-current {
  background: rgba(118, 118, 128, 0.12);
}

/* ホームの期間のチップ: 灰色の地の上は白いチップ、選んだものは墨 */
.home-chip {
  background: var(--color-bg-surface);
}

/* AI相談: 履歴は白いまとまり、自分の吹き出しは白、入力欄は白 */
.ai-history-panel {
  background: var(--color-bg-surface);
}

.ai-message.user {
  background: var(--color-bg-surface);
}

.ai-message.system,
.ai-settings,
.ai-sec .ai-cards li {
  background: var(--color-bg-surface);
}

.ai-form {
  background: var(--color-bg-page);
}

.ai-question-row,
.home-ask {
  border-color: transparent;
}

/* スマホのタブバー: 灰色の地に細い線（iOS のタブバー） */
@media (max-width: 640px) {
  .tabbar {
    background: rgba(249, 249, 249, 0.96);
    border-top: 1px solid var(--ios-separator);
  }
}

/* ── チェックとラジオ: iOS の丸い印（選ぶと青い丸に白いチェック）。押す所は行やラベルごと ── */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid #C7C7CC;
  border-radius: 50%;
  background: var(--color-bg-surface) center / 14px 14px no-repeat;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

input[type="checkbox"]:checked {
  border-color: var(--ios-blue);
  background-color: var(--ios-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 5.8 10 11 4.5'/%3E%3C/svg%3E");
}

input[type="radio"]:checked {
  border: 7px solid var(--ios-blue);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  background-color: var(--color-bg-muted);
  cursor: not-allowed;
}

/* ── 入力のまとまり（iPad 以上）: 設定アプリの行の型。名前は左・欄は右・行の間は細い線 ──
   欄は「押せる所」と分かるよう、薄い灰色の面のまま残す（ITに詳しくない人が欄を見落とさないように）。
   長い文の欄・チップを並べる欄・チェックの欄は、名前を上に置いたまま */
@media (min-width: 641px) {
  .content-area .form-card .form-row:not(form[method="get" i] *) {
    display: block;
    margin: 0;
  }

  .content-area .form-card .form-group:not(.form-check):not(:has(textarea)):not(:has(.chip)):not(:has(.pick-chip)):not(form[method="get" i] *) {
    display: grid;
    grid-template-columns: minmax(140px, 30%) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--ios-separator);
  }

  .content-area .form-card .form-section > .section-title + .form-group,
  .content-area .form-card .form-section > .section-title + .form-row > .form-group:first-child,
  .content-area .form-card .form-section > .section-title + .field-grid > .form-group:first-child {
    border-top: 0;
  }

  .content-area .form-card .form-group:not(.form-check):not(:has(textarea)):not(:has(.chip)):not(:has(.pick-chip)):not(form[method="get" i] *) > .form-label {
    margin: 0;
    font-size: var(--fs-ui);
    font-weight: var(--fw-medium);
    color: var(--color-text);
  }

  .content-area .form-card .form-group:not(.form-check):not(:has(textarea)):not(:has(.chip)):not(:has(.pick-chip)):not(form[method="get" i] *) > :not(.form-label) {
    grid-column: 2;
  }
}

.content-area .form-card :is(.form-input, .form-select, .date-field):not(:focus):not(:focus-within) {
  border-color: transparent;
  background-color: var(--ios-fill);
}

/* 設定の中の画面: 上の「‹ 設定」と同じ行き先の「個人設定へ戻る」は重ねて出さない */
.settings-split__main a.btn[href="/settings"],
.settings-split__main > a.btn[href="/settings"],
.settings-split__main .back-row {
  display: none;
}

/* たたんだサイドバー（マウスの端末）: 丸いマークを 36px の丸のまま、真ん中にそろえる */
@media (min-width: 1025px) {
  .sidebar.collapsed .nav-link {
    margin: 4px auto;
    width: 48px;
    padding: 0;
  }

  .sidebar.collapsed .nav-link > i:not(.nav-caret) {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }
}

/* 戻るリンクの矢印を、iOS の「‹」にする（マークの代わりに文字の山かっこ） */
.back-link > i.fa-arrow-left {
  display: none;
}

.back-link::before {
  content: "‹";
  margin-right: 2px;
  font-size: 1.5em;
  line-height: 1;
}

/* 第5弾: 丸いマークの中のマークを、どの状態（開いた・たたんだ・指の端末）でも真ん中にそろえる。
   たたんだときにマークが丸の上に寄り、丸の上が切れていた */
.nav-link > i:not(.nav-caret) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  overflow: visible;
}

.nav-link > i:not(.nav-caret)::before,
.app-icon > i::before,
.tabbar__item i::before {
  line-height: 1;
}

@media (min-width: 1025px) {
  .sidebar.collapsed .nav-link {
    height: 48px;
    overflow: visible;
  }
}

/* 第5弾: 設定の一覧の行で、長いメールアドレスが右の値（「オーナー ›」）に重なっていた。
   名前と補足は、はみ出す分を「…」で省く */
.ios-row__label {
  overflow: hidden;
}

.ios-row__label,
.ios-row__sub {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ios-row__sub {
  overflow: hidden;
}

/* 第5弾: 内訳の棒の端を、灰色の溝と同じ丸みにそろえる（棒だけ角が立って、溝からずれて見えた） */
.mix-fill {
  border-radius: inherit;
}

/* 第6弾（Apple の設定アプリに寄せる）: 表の文字は標準の太さ・短い列は折り返さない・縦の区切りを出さない */
.data-table td:not(.cell-wrap) {
  white-space: nowrap;
}

.data-table .cell-wrap {
  min-width: 11em;
}

.data-table .col-actions,
.data-table thead .col-actions {
  box-shadow: none;
  animation: none;
}

/* 設定アプリの行のように、題名の下に灰色の補足を1行つける（表のセルの中。サブカテゴリと取引先をここへ） */
.cell-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--color-text-3);
}

/* 設定アプリの行（マークの無い版）と、グループの下の灰色の注（フッター）。プランの画面で使う */
.ios-row--plain {
  cursor: default;
}

.ios-row--plain + .ios-row--plain::before {
  left: var(--space-3);
}

.ios-row--plain .ios-row__label {
  white-space: normal;
  overflow: visible;
}

.ios-row__value--strong {
  color: var(--color-text);
}

.ios-group__note {
  margin: var(--space-2) var(--space-3) var(--space-4);
  font-size: var(--fs-label);
  line-height: var(--lh-ui);
  color: var(--color-text-3);
}

/* レジの支払方法を、iOS の分割ボタン（灰色の入れ物・選んだものは白に影）にする（第6弾）。
   形は変えず、押す所の大きさ（control-h）と並びもそのまま */
.payment-row {
  gap: 0;
  padding: 2px;
  border-radius: var(--radius-md);
  background: var(--ios-fill);
}

.payment-row .pay-btn {
  border: 0;
  border-radius: var(--radius-field);
  background: transparent;
  box-shadow: none;
}

.payment-row .pay-btn.active {
  background: var(--color-bg-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  font-weight: var(--fw-bold);
}