/* ===== デザイントークン =====
   色は必ずこのブロックの変数を経由する。画面側のCSSに色を直書きしない。
   ダークモードは :root[data-theme="dark"] 側だけを差し替えて実現するため、
   ライトとダークで値が変わる色は「意味」で名前を付けている（surface / sunken / border-strong など）。

   data-theme の決まり方（base.html のインラインスクリプト）:
     ログイン済み  -> CustomUser.theme（auto / light / dark）
     未ログイン    -> localStorage の 'tapi-theme'
     auto のとき   -> prefers-color-scheme を見て light / dark のどちらかを入れる
   つまり描画時点では data-theme は必ず light か dark のどちらかが入っている。 */
:root {
    color-scheme: light;

    /* --- ブランド / プライマリ --- */
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #dbeafe;
    --color-primary-text: #ffffff;        /* プライマリ面に乗せる文字 */
    --color-secondary: #64748b;

    /* --- 面（奥→手前） --- */
    --color-background: #f8fafc;          /* ページ地色 */
    --color-surface: #ffffff;             /* カード・パネル */
    --color-surface-sunken: #f1f5f9;      /* 表ヘッダー・内側に沈んだ面 */
    --color-surface-muted: #f8fafc;       /* わずかに色を付けた面 */

    /* --- 文字 --- */
    --color-text-main: #0f172a;
    --color-text-strong: #334155;         /* 本文より少し弱い見出し・ラベル */
    --color-text-muted: #64748b;
    --color-text-faint: #94a3b8;          /* 補助の最も弱い文字 */

    /* --- 罫線 --- */
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;       /* 表の罫線など、はっきり見せたい線 */

    /* --- 状態色（面・文字・縁をセットで持つ） --- */
    --color-error: #ef4444;
    --color-error-surface: #fef2f2;
    --color-error-text: #b91c1c;
    --color-error-border: #fca5a5;
    /* 赤い面として塗りつぶす用（未読バッジ等）。--color-error はダークでは
       暗い面に乗る文字色として明るくするため、塗り用は別に持つ。 */
    --color-danger-solid: #ef4444;
    --color-danger-solid-text: #ffffff;

    --color-success: #10b981;
    --color-success-surface: #dcfce7;
    --color-success-text: #047857;

    --color-warning-surface: #fef3c7;
    --color-warning-text: #92400e;


    /* --- 操作・フォーカス --- */
    --color-selected-surface: #eff6ff;    /* 選択中のチップ・ボタン */
    --color-selected-border: #93c5fd;
    --color-selected-text: #1d4ed8;
    --color-focus-ring: #93c5fd;
    --color-overlay: rgba(2, 6, 23, 0.52);  /* ダイアログの背面 */

    /* --- トースト（ライトでは暗い面。ダークでも暗い面を一段明るくして使う） --- */
    --color-toast-surface: rgba(15, 23, 42, 0.92);
    --color-toast-text: #ffffff;
    --color-toast-error-surface: rgba(185, 28, 28, 0.95);
    --color-toast-error-text: #ffffff;

    /* --- ヒートマップ（人数の濃淡） ---
       heat-1 が最も少なく、heat-4 が最も多い。heat-full は全員可の緑。
       ライトでは「淡い→濃い」、ダークでは「地色に近い→明るい」で同じ向きに見えるようにしている。 */
    --heat-empty: #ffffff;
    --heat-1: #dbeafe;
    --heat-2: #7dd3fc;
    --heat-3: #60a5fa;
    --heat-4: #2563eb;
    --heat-full: #16a34a;
    --heat-count-text: #ffffff;           /* マスの上に出る人数の数字（両テーマで白） */
    --heat-busy-surface: #e2e8f0;         /* 他グループの予定（斜線） */
    --heat-busy-stripe: #cbd5e1;
    --heat-busy-text: #64748b;
    --heat-google-surface: rgba(66, 133, 244, 0.18);  /* Google カレンダー由来 */

    /* --- テーマに依らない固定色 ---
       ユーザーが選んだアバター色やブランド色の面に乗せる文字、
       ブランド色で塗るヒーロー面など、両テーマで同じ値を使うもの。 */
    --color-on-brand: #ffffff;
    --color-brand-hero: #2563eb;
    --color-btn-success: #28a745;
    --color-btn-success-hover: #218838;
    --color-btn-teal: #20c997;
    --color-btn-teal-hover: #17a97e;

    /* --- 塗りつぶしの警告色（バッジ等） --- */
    --color-warning-solid: #f59e0b;
    --color-warning-solid-text: #ffffff;

    /* --- ツールチップ / ポップオーバー ---
       ライトでは地色と反転した暗い面。ダークでも「一段持ち上げた暗い面」のままにする
       （暗い画面でいきなり白い面が出ると目に刺さるため）。
       そのため中の仕切りやアイコン地は両テーマで rgba(255,255,255,…) のままで成立する。 */
    --color-tooltip-surface: rgba(15, 23, 42, 0.95);
    --color-tooltip-text: #ffffff;
    --color-tooltip-border: rgba(255, 255, 255, 0.1);
    --popover-surface: rgba(15, 23, 42, 0.96);
    --popover-text: #ffffff;
    --popover-text-muted: #cbd5e1;
    --popover-border: rgba(255, 255, 255, 0.1);
    --popover-divider: rgba(255, 255, 255, 0.18);
    --popover-hover: rgba(255, 255, 255, 0.1);
    --popover-icon-surface: rgba(255, 255, 255, 0.16);

    /* 蛍光ペン風の下線 */
    --marker-highlight: #fde68a;

    /* --- 情報パネルの弱い縁 --- */
    --color-info-border-soft: #bae6fd;

    /* --- 日程グリッド --- */
    --grid-weekend-surface: #dbeafe;      /* 土日列の下地 */
    --grid-today-surface: #fef3c7;        /* 今日の列 */
    --grid-today-text: #92400e;
    --grid-today-accent: #f59e0b;         /* 今日の列を囲む線 */
    --grid-separator: #94a3b8;            /* 週の区切り・省略行の境界 */

    /* --- 予定グリッド（ダッシュボード） --- */
    --tl-entered-surface: #4ade80;        /* 自分が空きを入れた枠 */

    /* --- 空き時間の入力モード --- */
    --avail-selected-surface: #3b82f6;
    --avail-selected-text: #ffffff;
    --avail-selected-busy-surface: #1d4ed8;  /* 他グループ予定と重なる選択 */
    --avail-locked-surface: #f1f5f9;         /* 入力できない枠（斜線） */
    --avail-locked-stripe: #e2e8f0;
    --gcal-border: #c3d4fb;                  /* Google カレンダー凡例の縁 */

    /* --- タスクバー（ライトでも暗いガラス面） --- */
    --taskbar-surface: rgba(8, 11, 18, 0.94);
    --taskbar-border: rgba(148, 163, 184, 0.24);
    --taskbar-shadow: 0 10px 28px rgba(2, 6, 23, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --taskbar-text: #cbd5e1;
    --taskbar-text-active: #ffffff;
    --taskbar-highlight: rgba(255, 255, 255, 0.16);
    --taskbar-highlight-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.2);
    --taskbar-hover: rgba(255, 255, 255, 0.1);

    /* --- 確定済み予定（ヒートマップ上の斜線） ---
       self = このグループの確定、other = 他グループの確定。
       both は両方が重なったマスで、左上に self・右下に other を置く。 */
    --decided-self-surface: #991b1b;
    --decided-self-stripe: #7f1d1d;
    --decided-self-text: #ffffff;
    --decided-self-outline: #450a0a;
    --decided-other-surface: #fecaca;
    --decided-other-stripe: #fca5a5;
    --decided-other-text: #991b1b;
    --decided-other-outline: #b91c1c;
    --overlap-yellow-surface: #fef08a;
    --overlap-yellow-text: #713f12;
    --overlap-yellow-outline: #a16207;

    /* --- メンバー絞り込みの結果（ヒートマップの塗り替え） --- */
    --filter-active-surface: #16a34a;     /* 絞り込んだ全員が空き */
    --filter-almost-surface: #1d4ed8;     /* あと1人 */
    --filter-partial-surface: #bfdbfe;    /* 一部だけ空き */
    --filter-inactive-surface: #e2e8f0;   /* 条件を満たさない */

    /* --- 選択中のマス（入力中の赤枠） --- */
    --select-marker-surface: rgba(71, 85, 105, 0.48);
    --select-marker-line: #dc143c;
    --select-marker-glow: rgba(220, 20, 60, 0.58);

    /* --- 日程決定画面の濃淡（参加できる割合）---
       グループ画面のヒートマップとは段数も色も別のため、独立したトークンにしている。 */
    --decide-low: #dbeafe;
    --decide-low-border: #bfdbfe;
    --decide-mid: #93c5fd;
    --decide-mid-border: #60a5fa;
    --decide-high: #3b82f6;
    --decide-high-border: #2563eb;
    --decide-full: #22c55e;
    --decide-full-border: #16a34a;

    /* --- アイコンフレームの見本（意図的に暗い面。両テーマ共通） --- */
    --frame-panel-surface: #020617;
    --frame-panel-surface-hover: #0f172a;
    --frame-panel-border: #334155;
    --frame-panel-border-hover: #64748b;
    --frame-panel-border-locked: #1e293b;
    --frame-panel-text-muted: #cbd5e1;
    --frame-preview-backdrop: #000000;
    --frame-badge-surface: #f8fafc;
    --frame-badge-text: #0f172a;

    /* --- 画像を大きく見せるときの暗幕（通常の overlay より濃い） --- */
    --overlay-strong: rgba(15, 23, 42, 0.7);

    /* --- 注意（オレンジ系）。warning（琥珀）より強い注意喚起に使う --- */
    --color-caution-surface: #fff7ed;
    --color-caution-text: #c2410c;
    --color-caution-border: #fdba74;

    /* --- 成功の派生（手順インジケーター・完了パネル） --- */
    --color-success-border: #86efac;
    --color-success-surface-soft: #f0fdf4;
    --color-success-surface-hover: #bbf7d0;
    --color-success-solid-hover: #059669;

    /* --- 通知の種別バッジなどで使う色 --- */
    --color-accent-sky: #0ea5e9;
    --color-violet-surface: #f3e8ff;
    --color-violet-text: #7e22ce;
    --color-warning-surface-soft: #fffbeb;

    /* --- 無効状態の塗り --- */
    --color-disabled-surface: #94a3b8;

    /* --- 今日の列を囲むリング（入力画面） --- */
    --grid-today-ring: rgba(245, 158, 11, 0.55);
    --grid-today-ring-strong: rgba(245, 158, 11, 0.9);

    /* --- 選択中の内側の線 --- */
    --selected-inset: rgba(59, 130, 246, 0.15);
    --avail-selected-busy-stripe: #1e40af;

    /* --- 暗いポップオーバーの強いホバー --- */
    --popover-hover-strong: rgba(255, 255, 255, 0.24);

    /* --- 操作メニューのホバー --- */
    --action-hover-surface: #e0f2fe;
    --action-hover-text: #075985;
    --color-error-surface-strong: #fee2e2;
    --color-error-text-strong: #991b1b;

    /* --- カテゴリ別のアクセント（DB可視化・ストレージ） --- */
    --accent-blue: #2563eb;
    --accent-green: #16a34a;
    --accent-amber: #d97706;
    --accent-cyan: #0891b2;
    --accent-rose: #e11d48;
    --accent-slate: #475569;
    --accent-amber-text: #b45309;
    --accent-rose-text: #be123c;

    /* --- DB可視化の中央カード（意図的に暗い面） --- */
    --db-center-surface: #111827;
    --db-center-border: #1f2937;
    --db-center-text: #ffffff;
    --db-center-text-muted: #cbd5e1;
    --db-group-icon-surface: #ecfeff;
    --db-group-icon-border: #a5f3fc;

    /* --- Spacing --- */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* --- Typography --- */
    --font-sans: 'M PLUS 1p', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-brand: 'M PLUS 1p', sans-serif;

    /* --- Border Radius --- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-popover: 0 4px 12px rgba(0, 0, 0, 0.12);   /* ドロップダウン・ツールチップ */
    --shadow-card: 0 4px 16px rgba(15, 23, 42, 0.07);   /* 一覧のカード */
    --shadow-grid: 0 1px 4px rgba(0, 0, 0, 0.06);       /* 表の外周 */
    --shadow-sheet: 0 -16px 48px rgba(15, 23, 42, 0.24);/* 下から出るシート */
}

/* ===== ダークモード =====
   上の :root と同じ名前の色トークンだけを差し替える。
   spacing / radius / font は共通なのでここには書かない。 */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* プライマリは暗い地色の上で沈むため、ライトより明るい青を使う */
    --color-primary: #60a5fa;
    --color-primary-dark: #93c5fd;
    --color-primary-light: #1e3a5f;
    --color-primary-text: #0b1220;
    --color-secondary: #94a3b8;

    --color-background: #0b1220;
    --color-surface: #151d2c;
    --color-surface-sunken: #101828;
    --color-surface-muted: #131b29;

    --color-text-main: #e6ebf2;
    --color-text-strong: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-faint: #64748b;

    --color-border: #28323f;
    --color-border-strong: #3c4759;

    --color-error: #f87171;
    --color-error-surface: #2d1618;
    --color-error-text: #fca5a5;
    --color-error-border: #7f2a2a;
    --color-danger-solid: #dc2626;
    --color-danger-solid-text: #ffffff;

    --color-success: #34d399;
    --color-success-surface: #10291f;
    --color-success-text: #6ee7b7;

    --color-warning-surface: #2d2410;
    --color-warning-text: #fcd34d;


    --color-selected-surface: #16293f;
    --color-selected-border: #3b82f6;
    --color-selected-text: #bfdbfe;
    --color-focus-ring: #60a5fa;
    --color-overlay: rgba(0, 0, 0, 0.66);

    --color-toast-surface: rgba(37, 47, 64, 0.97);
    --color-toast-text: #e6ebf2;
    --color-toast-error-surface: rgba(153, 27, 27, 0.97);
    --color-toast-error-text: #ffffff;

    /* ヒートマップは「地色に近い→明るい」で人数が増える向きにそろえる */
    /* 段が上がるほど地色から離れるようにしている（隣接段のコントラスト比 1.47 / 1.62 / 1.49）。
       ライトと同じく「人数の違いが見分けられること」を優先し、マスの白い数字の
       コントラストは最下限 3.62 で妥協している。検算は docs/dark-mode.md を参照。 */
    --heat-empty: #151d2c;
    --heat-1: #1b2f4d;
    --heat-2: #214a74;
    --heat-3: #2a6aa8;
    --heat-4: #3885dc;
    --heat-full: #1d9a56;
    --heat-busy-surface: #222c3a;
    --heat-busy-stripe: #3c4759;
    --heat-busy-text: #94a3b8;
    --heat-google-surface: rgba(96, 165, 250, 0.22);

    --color-warning-solid: #fbbf24;
    --color-warning-solid-text: #3a2a05;

    --color-tooltip-surface: rgba(32, 42, 58, 0.97);
    --color-tooltip-text: #e6ebf2;
    --color-tooltip-border: rgba(255, 255, 255, 0.14);
    --popover-surface: rgba(32, 42, 58, 0.97);
    --popover-text: #e6ebf2;
    --popover-text-muted: #94a3b8;
    --popover-border: rgba(255, 255, 255, 0.14);
    --popover-divider: rgba(255, 255, 255, 0.16);
    --popover-hover: rgba(255, 255, 255, 0.12);
    --popover-icon-surface: rgba(255, 255, 255, 0.18);

    --marker-highlight: rgba(251, 191, 36, 0.38);

    --color-info-border-soft: #2a4a6b;

    --grid-weekend-surface: #17283f;
    --grid-today-surface: #332a10;
    --grid-today-text: #fcd34d;
    --grid-today-accent: #d97706;
    --grid-separator: #4a5668;

    --tl-entered-surface: #45c77e;   /* heat-full より明るくして、ライトと同じ明暗関係にする */

    --avail-selected-surface: #2f6fd0;
    --avail-selected-text: #ffffff;
    --avail-selected-busy-surface: #1e4fa8;
    --avail-locked-surface: #1b2432;
    --avail-locked-stripe: #28323f;
    --gcal-border: #3a5280;

    /* タスクバーはライトでも暗いが、ダークでは地色に沈むため一段明るくする */
    --taskbar-surface: rgba(40, 50, 66, 0.94);
    --taskbar-border: rgba(148, 163, 184, 0.38);
    --taskbar-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --taskbar-highlight: rgba(255, 255, 255, 0.18);
    --taskbar-hover: rgba(255, 255, 255, 0.12);

    /* 確定済みは暗い地の上でも赤と判別できるよう、self は一段明るく、
       other は「淡い赤」ではなく「くすんだ赤」に置き換える。 */
    --decided-self-surface: #b91c1c;
    --decided-self-stripe: #7f1d1d;
    --decided-self-text: #ffffff;
    --decided-self-outline: #2a0505;
    --decided-other-surface: #5b2a2e;
    --decided-other-stripe: #7f3a3e;
    --decided-other-text: #fca5a5;
    --decided-other-outline: #fca5a5;
    --overlap-yellow-surface: #713f12;
    --overlap-yellow-text: #fef08a;
    --overlap-yellow-outline: #fde047;

    --filter-active-surface: #22c55e;
    --filter-almost-surface: #3b7ddd;
    --filter-partial-surface: #284a70;
    --filter-inactive-surface: #28323f;

    --select-marker-surface: rgba(148, 163, 184, 0.34);
    --select-marker-line: #f05070;
    --select-marker-glow: rgba(240, 80, 112, 0.5);

    /* ダークでも「地色に近い→明るい」の向きをそろえる */
    --decide-low: #1b2f4d;
    --decide-low-border: #27405f;
    --decide-mid: #214a74;
    --decide-mid-border: #2d5c8a;
    --decide-high: #2a6aa8;
    --decide-high-border: #3885dc;
    --decide-full: #1d9a56;
    --decide-full-border: #2fb46b;

    --overlay-strong: rgba(0, 0, 0, 0.78);

    --color-caution-surface: #2e1c0f;
    --color-caution-text: #fdba74;
    --color-caution-border: #7a4418;

    --color-success-border: #2f7a4e;
    --color-success-surface-soft: #0e2219;
    --color-success-surface-hover: #1b4030;
    --color-success-solid-hover: #10b981;

    --color-accent-sky: #0284c7;
    --color-violet-surface: #2a1b3d;
    --color-violet-text: #d8b4fe;
    --color-warning-surface-soft: #241c0c;

    --color-disabled-surface: #3c4759;

    --grid-today-ring: rgba(217, 119, 6, 0.6);
    --grid-today-ring-strong: rgba(217, 119, 6, 0.95);

    --selected-inset: rgba(96, 165, 250, 0.22);
    --avail-selected-busy-stripe: #16397a;

    --popover-hover-strong: rgba(255, 255, 255, 0.26);

    --action-hover-surface: #15344a;
    --action-hover-text: #7dd3fc;
    --color-error-surface-strong: #3d1a1c;
    --color-error-text-strong: #fca5a5;

    --accent-blue: #60a5fa;
    --accent-green: #34d399;
    --accent-amber: #fbbf24;
    --accent-cyan: #22d3ee;
    --accent-rose: #fb7185;
    --accent-slate: #94a3b8;
    --accent-amber-text: #fcd34d;
    --accent-rose-text: #fda4af;

    --db-center-surface: #0a0f1a;
    --db-center-border: #2b3a4f;
    --db-center-text: #e6ebf2;
    --db-center-text-muted: #94a3b8;
    --db-group-icon-surface: #10262c;
    --db-group-icon-border: #2a5560;

    /* 暗い面では影が見えないため、より濃く・広く落とす */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.6);
    --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.55);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-grid: 0 1px 4px rgba(0, 0, 0, 0.5);
    --shadow-sheet: 0 -16px 48px rgba(0, 0, 0, 0.6);
}

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

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-sans);
    font-weight: 500;
    background-color: var(--color-background);
    color: var(--color-text-main);
    line-height: 1.7;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s, opacity 0.2s;
}

a:hover {
    opacity: 0.8;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* ===== Layout ===== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* スマホ幅では左右の余白を詰めて本文の表示幅を広げる（横スクロールする表・グリッド対策にも有効） */
@media (max-width: 479px) {
    .container {
        padding: 0 var(--spacing-md);
    }

    .section {
        margin-bottom: var(--spacing-lg);
    }

    .page-header {
        margin-bottom: var(--spacing-md);
        padding-bottom: var(--spacing-sm);
    }
}

/* ===== Header ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-surface);
    padding: var(--spacing-sm) 0;
    overflow: hidden;
}

/* ヘッダー右端のヒートマップ・ストライプ（日程ヒートマップと同じ配色）。
   セルは base.html の script が固定シードで生成（毎回同じ配置）。
   .site-header の position:sticky を基準に右端へ絶対配置し、はみ出しは overflow:hidden でクリップ。
   コンテンツとの重なりは .container の左右余白（最低 16px）で回避。 */
.header-heatstripe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 7px;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.header-heatstripe .heat-cell {
    flex: 1;
}

/* 段の色はトークン参照。JS 側は段番号のクラスだけを付けるため、
   テーマが切り替わっても再描画せずに色が追従する。 */
.header-heatstripe .heat-cell-1 { background: var(--heat-1); }
.header-heatstripe .heat-cell-2 { background: var(--heat-2); }
.header-heatstripe .heat-cell-3 { background: var(--heat-3); }
.header-heatstripe .heat-cell-4 { background: var(--heat-4); }
.header-heatstripe .heat-cell-5 { background: var(--heat-full); }

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
    gap: var(--spacing-sm);
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    min-height: 44px;
    font-family: var(--font-brand);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
    color: var(--color-text-main);
    letter-spacing: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.brand-logo-mark {
    display: grid;
    grid-template-columns: repeat(2, 0.46rem);
    grid-template-rows: repeat(2, 0.46rem);
    gap: 0.24rem;
    flex-shrink: 0;
}

.brand-logo-mark span {
    border-radius: 3px;
    background: var(--color-primary);
}

.brand-logo-mark span:nth-child(1) {
    background: var(--color-error);
}

.brand-logo-mark span:nth-child(4) {
    background: var(--color-success);
}

.brand-logo-text {
    display: inline-flex;
    align-items: baseline;
    gap: 0.02rem;
}

.brand-logo-i {
    display: inline-block;
    min-width: 0.44em;
    font-family: Consolas, "Courier New", monospace;
    font-size: 1em;
    font-weight: 800;
    font-style: normal;
    line-height: 1;
    color: var(--color-text-main);
    text-align: center;
}

@media (min-width: 480px) {
    .brand-logo {
        font-size: 1.375rem;
    }

    .brand-logo-mark {
        grid-template-columns: repeat(2, 0.5rem);
        grid-template-rows: repeat(2, 0.5rem);
    }
}
.main-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.nav-icon-btn:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

.nav-separator {
    width: 1px;
    height: 22px;
    background: var(--color-border);
    margin: 0 4px;
    flex-shrink: 0;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 3px 10px 3px 3px;
}

.nav-link {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s, color 0.2s;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

@media (min-width: 480px) {
    .nav-link {
        font-size: 0.875rem;
        padding: var(--spacing-sm) var(--spacing-md);
        min-height: 44px;
    }
}

.nav-link:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-brand);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.15s;
    position: relative;
}

.user-avatar-core {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.user-avatar-core img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-frame-image {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* アイコン本体は100%のまま、フレームを外側へ重ねる。 */
[data-avatar-frame]:not([data-avatar-frame=""]) {
    --avatar-frame-scale: 1.45;
    --avatar-frame-x: 0%;
    --avatar-frame-y: 0%;
    transform: translate(var(--avatar-frame-x), var(--avatar-frame-y)) scale(var(--avatar-frame-scale));
}

.user-avatar:hover {
    opacity: 0.85;
}

.user-avatar-warning-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-warning-solid);
    z-index: 3;
    color: var(--color-warning-solid-text);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-surface);
    box-sizing: content-box;
}

.user-greeting {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* スマホ幅ではユーザー名を非表示（ナビ圧迫を防ぐ） */
@media (max-width: 479px) {
    .user-greeting {
        display: none;
    }

    /* ヘッダーナビをコンパクト化（区切り線とユーザー名のみ省略。
       高さ・アイコンサイズはPCと同等にして窮屈さを避ける） */
    .nav-separator {
        display: none;
    }

    .nav-user {
        background: transparent;
        border: none;
        padding: 2px 4px 2px 2px;
        gap: 4px;
    }
}

@media (min-width: 480px) {
    .user-greeting {
        font-size: 0.875rem;
    }
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.9375rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    min-height: 44px;
    gap: var(--spacing-xs);
    white-space: nowrap;
}

/* 送信中などで無効化したボタン（タップターゲットの44pxは維持する） */
.btn:disabled,
.btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn:disabled:hover,
.btn[disabled]:hover {
    opacity: 0.6;
}

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

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

.btn-success {
    background-color: var(--color-btn-success);
    color: var(--color-on-brand);
}

.btn-success:hover {
    background-color: var(--color-btn-success-hover);
    opacity: 1;
}

.btn-teal {
    background-color: var(--color-btn-teal);
    color: var(--color-on-brand);
}

.btn-teal:hover {
    background-color: var(--color-btn-teal-hover);
    opacity: 1;
}

.btn-outline {
    background: transparent;
    color: var(--color-text);
    border: 1.5px solid var(--color-border);
}

.btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
    opacity: 1;
}

.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dropdown-toggle .chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.dropdown-toggle[aria-expanded="true"] .chevron,
.dropdown-toggle.open .chevron {
    transform: rotate(180deg);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary-light);
    opacity: 1;
}

.btn-ghost {
    background-color: transparent;
    color: var(--color-text-muted);
}

.btn-ghost:hover {
    background-color: var(--color-background);
    color: var(--color-text-main);
}

.btn-lg {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1rem;
    min-height: 52px;
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.875rem;
    min-height: 36px;
}

.btn-full {
    width: 100%;
}

.btn-text {
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.9375rem;
    padding: var(--spacing-xs);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ===== Forms ===== */
.form-group {
    display: block;
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--color-text-main);
}

.form-input,
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group input[type="search"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group select,
.form-group textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: inherit;
    background-color: var(--color-surface);
    color: var(--color-text-main);
    min-height: 48px;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.form-input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

/* ===== Cards ===== */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

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

.card-body {
    padding: var(--spacing-md);
    flex: 1;
}

.card-footer {
    padding: 8px var(--spacing-md);
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

/* ===== Sections ===== */
.section {
    margin-bottom: var(--spacing-xl);
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-main);
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}

@media (min-width: 640px) {
    .page-title {
        font-size: 2rem;
    }
}

/* ===== Page Header ===== */
.page-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

@media (min-width: 640px) {
    .page-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.back-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
}

/* ===== Dashboard ===== */
/* 先頭の見出し「決定済みの予定」の上下余白をそろえる。
   上: main-content は上パディング0なのでコンテナ側の padding-top で付与
      （見出しに margin-top を付けるとマージン相殺で消えるため）。
   下: 同じ見出しの margin-bottom を上と同値にして対称にする。 */
.dashboard-container {
    padding-top: 12px;
}

.dashboard-container .section:first-child .section-title {
    margin-bottom: 12px;
}
.dashboard-container .dashboard-events-section.is-empty {
    margin-bottom: 20px;
}

.dashboard-container .dashboard-events-section.is-empty .section-title {
    margin-bottom: 8px;
}

.dashboard-container .dashboard-events-section.is-empty .dashboard-events-empty {
    padding: 10px 0 12px;
    background: transparent;
    border-radius: 0;
}

.dashboard-container .dashboard-events-section.is-empty .dashboard-events-empty p {
    margin-bottom: 0;
}

.dashboard-header {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    align-items: center;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-popover);
    min-width: 220px;
    z-index: 100;
    padding: var(--spacing-xs) 0;
}

.dropdown-menu.open {
    display: block;
}

/* 右端に寄せるドロップダウン（モバイルで右端ボタンが使う） */
.dropdown-menu-end {
    left: auto;
    right: 0;
}

.dropdown-section {
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: stretch;
}

.dropdown-input {
    flex: 1;
    min-width: 0;
}

.dropdown-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--spacing-xs) 0;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-text);
}

.dropdown-item:hover {
    background: var(--color-surface-sunken);
}

.dropdown-item-danger {
    color: var(--color-error-text);
}

.dropdown-item-danger:hover {
    background: var(--color-error-surface);
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 640px) {
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

.group-name {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.group-desc {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ===== Auth Pages ===== */
.auth-container {
    display: flex;
    justify-content: center;
    padding: var(--spacing-lg) var(--spacing-md);
}

.auth-card {
    background: var(--color-surface);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-sm);
}

.auth-title {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    font-size: 1.5rem;
    font-weight: 600;
}

.auth-lead {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.auth-footer {
    margin-top: var(--spacing-lg);
    text-align: center;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.auth-footer a {
    color: var(--color-primary);
    font-weight: 500;
}

.legal-consent {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.legal-consent-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    min-height: 44px;
    cursor: pointer;
    line-height: 1.6;
}

.legal-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--color-primary);
}

.legal-consent input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.legal-consent a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-consent a:hover {
    color: var(--color-primary-dark);
    opacity: 1;
}

.legal-consent a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ===== Error States ===== */
.error-list {
    color: var(--color-error);
    font-size: 0.875rem;
    margin-top: var(--spacing-xs);
}

.error-summary {
    background-color: var(--color-error-surface);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-sm);
    color: var(--color-error-text);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: 0.9375rem;
}

.help-text {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
    line-height: 1.5;
}

/* ===== Survey ===== */
.survey-container {
    max-width: 760px;
    padding-top: var(--spacing-lg);
}

.survey-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.survey-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.survey-question-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.survey-options > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.survey-options label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-background);
}

.survey-options input[type="radio"] {
    width: auto;
    min-height: auto;
}

.required-mark {
    color: var(--color-error);
}

/* ===== Hero Section ===== */
.hero-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-background);
}

.hero-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

@media (min-width: 768px) {
    .hero-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        min-height: 70vh;
    }
}

.hero-content {
    text-align: center;
}

@media (min-width: 768px) {
    .hero-content {
        text-align: left;
    }
}

.hero-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-family: var(--font-brand);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-main);
}

.hero-logo-mark {
    grid-template-columns: repeat(2, 0.8rem);
    grid-template-rows: repeat(2, 0.8rem);
    gap: 0.34rem;
}

.hero-logo-mark span {
    border-radius: 5px;
}

@media (min-width: 768px) {
    .hero-title {
        justify-content: flex-start;
        gap: 0.8rem;
        font-size: 3.5rem;
    }

    .hero-logo-mark {
        grid-template-columns: repeat(2, 1.05rem);
        grid-template-rows: repeat(2, 1.05rem);
        gap: 0.44rem;
    }
}

.hero-subtitle {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
    line-height: 1.8;
}

@media (min-width: 768px) {
    .hero-subtitle {
        font-size: 1.125rem;
    }
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

@media (min-width: 480px) {
    .hero-actions {
        flex-direction: row;
        justify-content: center;
    }
}

@media (min-width: 768px) {
    .hero-actions {
        justify-content: flex-start;
    }
}

.hero-image {
    display: none;
}

@media (min-width: 768px) {
    .hero-image {
        display: block;
    }
}

/* ===== Member List ===== */
.member-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.member-item {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.875rem;
}

.badge {
    background: var(--color-border);
    color: var(--color-secondary);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    font-weight: 500;
}

/* ===== Invite Section ===== */
.invite-section {
    background: var(--color-primary-light);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-info-border-soft);
    margin-bottom: var(--spacing-xl);
}

.invite-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

@media (min-width: 768px) {
    .invite-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.invite-method h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.invite-input-group {
    display: flex;
    gap: var(--spacing-sm);
}

.invite-input-group input {
    flex: 1;
    min-width: 0;
}

.invite-note {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

.invite-expiry {
    font-size: 0.875rem;
    color: var(--color-text);
    margin-top: var(--spacing-xs);
}

/* ===== Grid (Heatmap) ===== */
.grid-container {
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.grid-wrapper {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overflow-anchor: none;
    /* ピンチ操作でマスの大きさを変えられるよう、寸法は変数で持つ */
    --grid-cell-width: 40px;
    --grid-cell-height: 32px;
    --grid-time-width: 56px;
    --grid-date-height: 56px;
}

.grid-table {
    /* sticky 列の包含幅を横長グリッド全体に固定する */
    display: block;
    width: max-content;
    min-width: 100%;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    overflow: visible;
    box-shadow: var(--shadow-grid);
}

.grid-row {
    display: flex;
}

.grid-cell {
    width: var(--grid-cell-width);
    height: var(--grid-cell-height);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.month-corner {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* 週の境界（日曜と月曜の間）を太線で区切る */
.grid-cell.week-start {
    border-left: 2px solid var(--grid-separator);
}

.header-row {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-surface-sunken);
    border-bottom: 1.5px solid var(--color-border-strong);
}

.header-row .grid-cell {
    height: auto;
    border-bottom: none;
}

.time-header {
    width: var(--grid-time-width);
    background: var(--color-surface-sunken);
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 20;
    border-right: 1.5px solid var(--color-border-strong);
}

.date-header {
    flex-direction: column;
    height: var(--grid-date-height);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.month-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.02em;
}

.month-label.invisible {
    visibility: hidden;
}

.day-name {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 0.6875rem;
}

.time-label {
    width: var(--grid-time-width);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 15;
    border-right: 1.5px solid var(--color-border-strong);
    justify-content: flex-end;
    padding-right: 6px;
}

.slot-cell:hover {
    filter: brightness(0.93);
    cursor: default;
}

.date-header.weekend {
    background-color: var(--grid-weekend-surface);
}

.date-header.today {
    background-color: var(--grid-today-surface);
    color: var(--grid-today-text);
    box-shadow: inset 0 -3px 0 var(--grid-today-accent);
}

.date-header.weekend.today {
    background-color: var(--grid-today-surface);
}

.slot-cell.weekend.cell-0 {
    background-color: var(--grid-weekend-surface);
}

.slot-cell {
    background: var(--color-surface);
    transition: background 0.1s;
}

/* Heatmap Colors (人数ベース) */
.cell-0 {
    background-color: var(--color-surface);
}

.cell-low {
    background-color: var(--heat-2);
}

.cell-mid {
    background-color: var(--heat-3);
}

.cell-high {
    background-color: var(--heat-4);
}

.cell-full {
    background-color: var(--heat-full);
}

/* ===== Time Range Form ===== */
.time-range-form {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.time-range-form label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.time-range-form select {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    min-height: 36px;
    background: var(--color-surface);
}

/* ===== Main Content ===== */
.main-content {
    flex: 1;
    padding: 0 0 var(--spacing-sm) 0;
}

@media (min-width: 480px) {
    .main-content {
        padding-bottom: var(--spacing-lg);
    }
}

/* ===== Footer ===== */
.site-footer {
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-lg) 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.site-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.site-footer-copyright {
    margin: 0;
}

.site-footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md);
}

.site-footer-links a {
    color: var(--color-text-muted);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.site-footer-links a:hover {
    color: var(--color-primary);
    opacity: 1;
}

@media (min-width: 640px) {
    .site-footer-inner {
        flex-direction: row;
        justify-content: center;
        gap: var(--spacing-lg);
    }
}

/* ===== Legal Pages ===== */
.skip-link {
    position: fixed;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    z-index: 100000;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: var(--color-surface);
    transform: translateY(calc(-100% - var(--spacing-lg)));
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.legal-page {
    padding: var(--spacing-lg) 0 var(--spacing-xl);
    overflow-wrap: anywhere;
}

.legal-container {
    max-width: 860px;
}

.legal-header,
.legal-toc,
.legal-document {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.legal-header {
    padding: var(--spacing-lg) var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.legal-kicker {
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-xs);
}

.legal-summary {
    color: var(--color-text-muted);
    margin-top: var(--spacing-sm);
}

.legal-header h1,
.legal-section h2,
.legal-section h3 {
    text-wrap: balance;
}

.legal-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--spacing-xs) var(--spacing-md);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.legal-meta dt {
    color: var(--color-text-muted);
}

.legal-meta dd {
    margin: 0;
}

.legal-toc {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.legal-toc-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.legal-toc ol {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--spacing-md);
    padding-left: var(--spacing-lg);
    margin: 0;
}

.legal-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-primary);
}

.legal-toc a:hover {
    color: var(--color-primary-dark);
    opacity: 1;
}

.legal-toc a:focus-visible,
.legal-contact a:focus-visible,
.legal-section a:focus-visible,
.site-footer-links a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.legal-document {
    padding: var(--spacing-lg) var(--spacing-md);
}

.legal-section {
    scroll-margin-top: 80px;
}

.legal-section + .legal-section {
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
}

.legal-section h2 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
}

.legal-section h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: var(--spacing-md) 0 var(--spacing-xs);
}

.legal-section p + p,
.legal-section p + ul,
.legal-section p + ol,
.legal-section ul + p,
.legal-section ol + p {
    margin-top: var(--spacing-sm);
}

.legal-section ul,
.legal-section ol {
    padding-left: var(--spacing-lg);
}

.legal-section li + li {
    margin-top: var(--spacing-xs);
}

.legal-note {
    background: var(--color-background);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.legal-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: var(--spacing-md);
}

.legal-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.legal-table th,
.legal-table td {
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    vertical-align: top;
}

.legal-table th {
    background: var(--color-background);
    font-weight: 700;
}

.legal-table th[scope="row"] {
    width: 30%;
}

.legal-contact {
    background: var(--color-background);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.legal-contact a,
.legal-section a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-contact a:hover,
.legal-section a:hover {
    color: var(--color-primary-dark);
    opacity: 1;
}

@media (min-width: 480px) {
    .legal-page {
        padding-top: var(--spacing-xl);
    }

    .legal-header,
    .legal-document {
        padding: var(--spacing-xl);
    }
}

@media (min-width: 640px) {
    .legal-toc ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===== Empty State ===== */
.empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    background: var(--color-background);
    border-radius: var(--radius-md);
}

.empty-state p {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

/* ===== Utilities ===== */
.text-muted {
    color: var(--color-text-muted);
}

.text-center {
    text-align: center;
}

.text-sm {
    font-size: 0.875rem;
}

.flex {
    display: flex;
}

.flex-between {
    justify-content: space-between;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.hidden {
    display: none;
}

@media (min-width: 640px) {
    .sm\:block {
        display: block;
    }

    .sm\:flex {
        display: flex;
    }
}

/* Header Actions */
.header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .header-actions {
        width: 100%;
    }

    .header-actions .btn {
        flex: 1;
        text-align: center;
    }
}

/* Event List */
.event-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: box-shadow 0.2s;
}

.event-card:hover {
    box-shadow: var(--shadow-md);
}

.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: 8px;
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
}

.event-day {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.event-weekday {
    font-size: 0.75rem;
    color: var(--color-primary);
    opacity: 0.8;
}

.event-info {
    flex: 1;
}

.event-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-main);
    margin-bottom: 2px;
}

.event-time {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Delete Button */
.btn-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    background: var(--color-background);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1.25rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-delete:hover {
    background: var(--color-danger-solid);
    color: var(--color-danger-solid-text);
    border-color: var(--color-danger-solid);
}

.event-delete-form {
    margin-left: auto;
}

/* Secondary Button */
.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
}

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

/* Tooltip Styles */
.grid-tooltip {
    display: none;
    position: fixed;
    background: var(--color-tooltip-surface);
    color: var(--color-tooltip-text);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
    box-shadow: var(--shadow-popover);
    border: 1px solid var(--color-tooltip-border);
}
/* ===== Mobile: Grid ===== */
@media (max-width: 640px) {
    .grid-container {
        justify-content: flex-start;
    }

    .grid-wrapper {
        /* flex スクロールコンテナは iOS で sticky 列が外れるため使わない */
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .grid-table {
        margin: 0;
    }

    .grid-wrapper {
        --grid-cell-width: 32px;
        --grid-cell-height: 28px;
        --grid-time-width: 52px;
        --grid-date-height: 48px;
    }

    .grid-cell {
        font-size: 0.65rem;
    }

    .time-header,
    .time-label {
        font-size: 0.6rem;
        position: -webkit-sticky;
        position: sticky;
    }

    .month-corner {
        font-size: 1rem;
    }

    .date-header {
        font-size: 0.65rem;
    }

    .month-label {
        font-size: 0.55rem;
    }

    .day-name {
        font-size: 0.6rem;
    }

    .time-range-form {
        font-size: 0.8rem;
        gap: 4px;
    }
}
/* ===== Member Input Timeline (merged into heatmap grid) ===== */
.tl-separator-row .grid-cell {
    border-top: 2.5px solid var(--grid-separator);
    height: auto;
    border-bottom: none;
    background: var(--color-surface-sunken);
}

.tl-separator-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--color-text-strong);
    justify-content: flex-start !important;
    padding: 3px 4px;
    white-space: nowrap;
}

.tl-separator-fill {
    border-bottom: none !important;
}

.tl-member-name {
    font-size: 0.6rem;
    height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-cell {
    height: 24px;
}

.tl-entered {
    background-color: var(--tl-entered-surface);
}

.tl-entered.weekend {
    background-color: var(--tl-entered-surface);
}

.tl-empty,
.tl-empty.weekend {
    background-color: var(--heat-empty) !important;
}

.timeline-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.tl-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid var(--color-border-strong);
}

.tl-legend-entered {
    background-color: var(--tl-entered-surface);
}

.tl-legend-empty {
    background-color: var(--color-surface);
}

@media (max-width: 640px) {
    .tl-member-name {
        font-size: 0.55rem;
        height: 22px;
    }

    .timeline-cell {
        height: 22px;
    }
}

/* ===== DB Visualizer ===== */
.db-visual-page {
    padding-top: var(--spacing-lg);
}

.db-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.db-section-title-row .section-title {
    margin-bottom: 0;
}

.db-section-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    background: var(--color-surface);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
}

.db-kpi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
}

.db-kpi-card {
    min-height: 116px;
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--db-accent);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
}

.db-kpi-label,
.db-kpi-detail {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.db-kpi-value {
    color: var(--color-text-main);
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
}

.db-mindmap {
    display: grid;
    gap: var(--spacing-md);
    align-items: center;
}

.db-map-center {
    min-height: 132px;
    border: 2px solid var(--db-center-border);
    border-radius: var(--radius-md);
    background: var(--db-center-surface);
    color: var(--db-center-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-md);
}

.db-map-center-label {
    font-size: 0.78rem;
    color: var(--db-center-text-muted);
    font-weight: 700;
}

.db-map-center strong {
    font-size: 1.2rem;
    line-height: 1.25;
}

.db-map-branches {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

.db-map-branch {
    position: relative;
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--db-accent);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--spacing-md);
}

.db-branch-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.db-branch-heading h3 {
    font-size: 1rem;
    line-height: 1.3;
    margin: 0;
}

.db-branch-heading p,
.db-group-main p,
.db-activity-item p {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
    margin: 0;
}

.db-branch-heading strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--db-accent) 12%, var(--color-surface));
    color: var(--db-accent);
    font-size: 1rem;
}

.db-branch-list {
    display: grid;
    gap: 6px;
}

.db-branch-list li {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-background);
    color: var(--color-text-main);
    font-size: 0.86rem;
}

.db-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

.db-flow-step {
    position: relative;
    min-height: 72px;
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--db-accent);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

.db-flow-step span {
    font-weight: 700;
}

.db-flow-step strong {
    color: var(--db-accent);
    font-size: 1.4rem;
}

.db-insight-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.db-panel,
.db-group-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--spacing-md);
}

.db-panel .section-title {
    margin-bottom: var(--spacing-md);
    font-size: 1rem;
}

.db-bar-list {
    display: grid;
    gap: var(--spacing-md);
}

.db-bar-row {
    display: grid;
    gap: 6px;
}

.db-bar-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    font-size: 0.88rem;
}

.db-bar-meta strong {
    color: var(--db-accent);
}

.db-meter-track {
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-background);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.db-meter-fill {
    display: block;
    width: var(--meter-width);
    min-width: 3px;
    max-width: 100%;
    height: 100%;
    background: var(--db-accent);
    border-radius: var(--radius-full);
}

.db-group-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

.db-group-card {
    display: grid;
    gap: var(--spacing-md);
}

.db-group-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.db-group-main h3 {
    font-size: 1rem;
    line-height: 1.3;
    margin: 0;
    overflow-wrap: anywhere;
}

.db-group-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--db-group-icon-surface);
    border: 1px solid var(--db-group-icon-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.db-group-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.db-group-stats div {
    padding: 8px;
    border-radius: var(--radius-sm);
    background: var(--color-background);
    text-align: center;
}

.db-group-stats dt {
    color: var(--color-text-muted);
    font-size: 0.72rem;
}

.db-group-stats dd {
    color: var(--color-text-main);
    font-size: 1.05rem;
    font-weight: 700;
}

.db-activity-list {
    display: grid;
    gap: 8px;
}

.db-activity-item {
    min-height: 56px;
    padding: 8px;
    border-radius: var(--radius-sm);
    background: var(--color-background);
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: var(--spacing-sm);
}

.db-activity-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.db-activity-item strong {
    display: block;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.db-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.db-relation-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

.db-relation-table th,
.db-relation-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    font-size: 0.86rem;
}

.db-relation-table th {
    background: var(--color-background);
    color: var(--color-text-muted);
    font-weight: 700;
}

.db-relation-table tr:last-child td {
    border-bottom: none;
}

.db-accent-blue {
    --db-accent: var(--accent-blue);
}

.db-accent-green {
    --db-accent: var(--accent-green);
}

.db-accent-amber {
    --db-accent: var(--accent-amber);
}

.db-accent-cyan {
    --db-accent: var(--accent-cyan);
}

.db-accent-rose {
    --db-accent: var(--accent-rose);
}

.db-accent-slate {
    --db-accent: var(--accent-slate);
}

/* DB可視化: 今日から1週間の確定日程 */
.db-week-list {
    display: grid;
    gap: 8px;
}

.db-week-day {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.db-week-day.is-weekend {
    background: var(--color-background);
}

.db-week-day.is-today {
    border-color: var(--color-primary);
}

/* 過ぎた日は枠線を破線にして、文字の読みやすさは落とさずに区別する */
.db-week-day.is-past {
    border-style: dashed;
}

.db-week-date-tag {
    align-self: flex-start;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.db-week-day.is-weekend .db-week-date-tag {
    background: var(--color-surface);
}

/* 今日のタグは土日より後に置き、週末の指定で打ち消されないようにする */
.db-week-day .db-week-date-tag.is-today {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}

.db-week-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.db-week-date-day {
    color: var(--color-text-main);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.db-week-date-weekday {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.db-week-events {
    display: grid;
    gap: 6px;
}

.db-week-event {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 8px;
    border-radius: var(--radius-sm);
    background: var(--color-background);
}

.db-week-day.is-weekend .db-week-event {
    background: var(--color-surface);
}

.db-week-event-time {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.db-week-event strong {
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.db-week-event-group {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.db-week-empty {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

@media (min-width: 640px) {
    .db-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 画面が広ければ日付を左の見出し列に寄せる */
    .db-week-day {
        grid-template-columns: 96px minmax(0, 1fr);
        align-items: start;
    }

    .db-week-date {
        flex-direction: column;
        gap: 2px;
    }

    .db-group-grid,
    .db-insight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .db-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .db-mindmap {
        grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.8fr);
    }

    .db-map-branches {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .db-flow {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .db-flow-step {
        min-height: 96px;
        align-items: flex-start;
        flex-direction: column;
    }

    .db-flow-step::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -15px;
        width: 20px;
        height: 2px;
        background: var(--color-border);
    }

    .db-flow-step:last-child::after {
        content: none;
    }

    .db-insight-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .db-group-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ===== ストレージ使用状況ページ ===== */
.storage-summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.storage-summary-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-sm);
}

.storage-figure-label {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.storage-figure-value {
    display: block;
    color: var(--color-text-main);
    font-size: 1.1rem;
    line-height: 1.3;
    word-break: break-all;
}

.storage-usage-track {
    height: 14px;
    border-radius: var(--radius-full);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.storage-usage-fill {
    display: block;
    width: var(--usage-width);
    min-width: 3px;
    max-width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--storage-level-color, var(--color-primary));
}

.storage-level-normal {
    --storage-level-color: var(--accent-blue);
}

.storage-level-warning {
    --storage-level-color: var(--accent-amber);
    border-color: var(--accent-amber);
    color: var(--accent-amber-text);
}

.storage-level-danger {
    --storage-level-color: var(--accent-rose);
    border-color: var(--accent-rose);
    color: var(--accent-rose-text);
}

.storage-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    align-items: center;
}

.storage-donut {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--donut-gradient);
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-sm);
}

.storage-donut-hole {
    width: 58%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--color-surface);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 6px;
}

.storage-donut-total {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-main);
    word-break: break-all;
}

.storage-donut-caption {
    display: block;
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.storage-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.storage-legend-row {
    display: grid;
    grid-template-columns: 16px 1fr auto auto;
    align-items: center;
    gap: var(--spacing-sm);
    min-height: 40px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--color-border);
}

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

.storage-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.storage-legend-label {
    color: var(--color-text-main);
    font-size: 0.88rem;
    min-width: 0;
}

.storage-legend-size {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

.storage-legend-percent {
    color: var(--color-text-main);
    font-weight: 700;
    font-size: 0.86rem;
    white-space: nowrap;
    min-width: 3.2em;
    text-align: right;
}

.storage-table {
    min-width: 480px;
}

.storage-warn {
    color: var(--accent-amber-text);
    font-size: 0.72rem;
    font-weight: 700;
}

.storage-rank-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.storage-rank-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

.storage-rank-item:last-child {
    border-bottom: none;
}

.storage-rank-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.storage-rank-kind {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 2px 8px;
}

.storage-rank-name {
    font-size: 0.85rem;
    color: var(--color-text-main);
    word-break: break-all;
}

.storage-rank-meta {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.storage-rank-size {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-text-main);
    white-space: nowrap;
}

.storage-rank-date {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.storage-generated {
    margin-top: var(--spacing-lg);
    text-align: right;
}

@media (min-width: 640px) {
    .storage-breakdown {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-xl);
    }

    .storage-donut {
        flex-shrink: 0;
    }

    .storage-legend {
        max-width: 420px;
    }
}
/* ===== Bottom navigation / contextual action bar ===== */
:root {
    --bottom-ui-height: calc(64px + env(safe-area-inset-bottom));
    --taskbar-height: 68px;
    --taskbar-clearance: calc(88px + env(safe-area-inset-bottom));
}

/* ===== Page transition =====
   ヘッダーを残し、本文側だけを白い面で短く覆う。
   opacity のみを動かして、スマホでも描画負荷を抑える。 */
.page-transition-veil {
    position: fixed;
    z-index: 9998;
    top: var(--page-transition-top, 64px);
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--color-surface);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease-out;
    will-change: opacity;
}

.page-transition-enabled .page-transition-veil.is-visible {
    opacity: 1;
    pointer-events: auto;
}

body.is-page-leaving .site-header {
    z-index: 9999;
}

@media (prefers-reduced-motion: reduce) {
    .page-transition-veil {
        display: none;
        transition: none;
    }
}

body.has-taskbar {
    padding-bottom: var(--taskbar-clearance);
}

body.has-taskbar .main-nav .nav-separator,
body.has-taskbar .main-nav .nav-user {
    display: none;
}

.taskbar {
    position: fixed;
    left: 16px;
    right: 16px;
    /* --viewport-bottom-gap は base.html が visualViewport から実測して入れる。
       iOS Safari は下スクロールで下部バーが畳まれると見えている範囲が下へ広がるが、
       position: fixed はレイアウトビューポート基準のままなので、その差のぶん浮いてしまう。
       差は負の値で入るので、足すと本来の下端まで押し下がる。通常の環境では 0。 */
    bottom: calc(10px + env(safe-area-inset-bottom) + var(--viewport-bottom-gap, 0px));
    /* ページ遷移の白い面（9998）より前に置き、画面が切り替わっても出しっぱなしにする。 */
    z-index: 9999;
    display: flex;
    align-items: stretch;
    height: var(--taskbar-height);
    padding: 5px;
    border: 1px solid var(--taskbar-border);
    border-radius: 999px;
    background: var(--taskbar-surface);
    box-shadow: var(--taskbar-shadow);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* 固定バーのdisplay指定がブラウザ既定の[hidden]を上書きするため、非表示状態を明示する。 */
.taskbar[hidden],
.bottom-action-bar[hidden] {
    display: none;
}

/* 選択中の項目を示すピル。タップした項目まで、1枚の図形が横へ滑って移動する。 */
.taskbar-selection {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc((100% - 10px) / var(--taskbar-count, 3));
    border-radius: 999px;
    background: var(--taskbar-highlight);
    box-shadow: var(--taskbar-highlight-shadow);
    opacity: 0;
    transform: translate3d(calc(var(--taskbar-index, 0) * 100%), 0, 0);
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms ease;
    pointer-events: none;
}

.taskbar.has-selection .taskbar-selection {
    opacity: 1;
}

.taskbar-btn {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 56px;
    padding: 6px 4px;
    border: 0;
    border-radius: 999px;
    color: var(--taskbar-text);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.taskbar-btn.is-current,
.taskbar-btn.is-transition-target {
    color: var(--taskbar-text-active);
}

/* JS無効などでピルを置けないときだけ、従来どおりボタン自体を塗る。 */
.taskbar:not(.has-selection) .taskbar-btn.is-current {
    background: var(--taskbar-highlight);
    box-shadow: var(--taskbar-highlight-shadow);
}

/* 遷移中は、白い文字色もタップされた項目へ渡す。 */
.taskbar.is-navigating .taskbar-btn.is-current:not(.is-transition-target) {
    color: var(--taskbar-text);
}

.taskbar-btn:active {
    transform: scale(0.96);
}

.taskbar-btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.taskbar-btn svg {
    width: 24px;
    height: 24px;
}

.taskbar-label {
    max-width: 100%;
    white-space: nowrap;
}

.taskbar-icon-wrap {
    position: relative;
    display: inline-flex;
}

.taskbar-status-badge {
    position: absolute;
    top: -7px;
    right: -9px;
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-danger-solid);
    color: var(--color-danger-solid-text);
    font-size: 0.65rem;
    line-height: 1;
}

.site-footer {
    padding-bottom: calc(var(--spacing-lg) + var(--bottom-ui-height, 72px));
}

.toast {
    bottom: calc(var(--bottom-ui-height, 72px) + 16px);
}

body.has-taskbar .site-footer {
    padding-bottom: calc(var(--spacing-lg) + var(--taskbar-clearance));
}

body.has-taskbar .toast {
    bottom: var(--taskbar-clearance);
}

.bottom-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    /* タスクバーと同じ理由でずれるため、同じ補正を当てる */
    bottom: var(--viewport-bottom-gap, 0px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--bottom-ui-height);
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.bottom-action-bar .btn {
    min-height: 48px;
}

.bottom-action-bar-note {
    min-width: 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.list-create-dialog {
    overscroll-behavior: contain;
    width: min(380px, calc(100vw - 32px));
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.list-create-dialog::backdrop {
    background: var(--color-overlay);
}

@media (prefers-reduced-motion: no-preference) {
    .list-create-dialog[open] {
        animation: create-dialog-enter 160ms ease-out;
    }

    .list-create-dialog[open]::backdrop {
        animation: create-dialog-backdrop-enter 160ms ease-out;
    }

    @keyframes create-dialog-enter {
        from {
            opacity: 0;
            transform: translateY(8px) scale(0.985);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes create-dialog-backdrop-enter {
        from { background: transparent; }
        to { background: var(--color-overlay); }
    }
}

.list-create-header,
.list-create-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
}

.list-create-header {
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
}

.list-create-footer {
    justify-content: flex-end;
}

.list-create-title {
    margin: 0;
    font-size: 1rem;
}

.list-create-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    text-decoration: none;
}

.list-create-body {
    display: grid;
    gap: 6px;
    padding: 16px;
}

.list-create-label {
    font-size: 0.875rem;
    font-weight: 700;
}

.list-create-input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-main);
    font: inherit;
}

.list-create-input:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.list-create-dialog .form-group {
    display: grid;
    gap: 6px;
    margin: 0;
}

.list-create-dialog .form-input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-main);
    font: inherit;
}

.list-create-dialog textarea.form-input {
    min-height: 96px;
    resize: vertical;
}

.list-create-dialog .form-input:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.list-create-dialog .error-list {
    margin: 0;
    padding: 0;
    color: var(--color-error);
    font-size: 0.8125rem;
    list-style: none;
}

@media (min-width: 480px) {
    .taskbar {
        left: 50%;
        right: auto;
        width: min(calc(100% - 32px), 460px);
        transform: translateX(-50%);
    }

    .bottom-action-bar {
        left: 50%;
        right: auto;
        width: min(100%, 480px);
        transform: translateX(-50%);
    }
}

@media (hover: hover) {
    .taskbar-btn:not(.is-current):hover {
        color: var(--taskbar-text-active);
        background: var(--taskbar-hover);
    }
}

@media (prefers-reduced-motion: reduce) {
    .taskbar-btn,
    .taskbar-selection {
        transition: none;
    }
}

/* ===== Update announcement ===== */
.update-announcement {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: min(76svh, 640px);
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    overflow: hidden;
    border: 0;
    border-radius: 24px 24px 0 0;
    background: var(--color-surface-muted);
    color: var(--color-text-main);
    box-shadow: var(--shadow-sheet);
}

.update-announcement::backdrop {
    background: var(--color-overlay);
}

.update-announcement-hero {
    position: relative;
    overflow: hidden;
    padding: 22px 20px 24px;
    background: var(--color-brand-hero);
    color: var(--color-on-brand);
}

.update-announcement-mark {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 5px;
    margin-bottom: 18px;
}

.update-announcement-mark span {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--color-on-brand);
}

.update-announcement-mark span:nth-child(2) { opacity: 0.72; }
/* 以下の装飾色はブランド色のヒーロー面に乗るため、テーマで切り替えない */
.update-announcement-mark span:nth-child(3) { background: #6ee7b7; }
.update-announcement-mark span:nth-child(4) { background: #fde68a; }

.update-announcement-blocks {
    position: absolute;
    right: -18px;
    bottom: -22px;
    display: grid;
    grid-template-columns: repeat(2, 68px);
    gap: 8px;
    transform: rotate(-7deg);
    opacity: 0.18;
}

.update-announcement-blocks span {
    width: 68px;
    height: 68px;
    border-radius: 17px;
    background: var(--color-on-brand);
}

.update-announcement-blocks span:nth-child(2) { background: #fca5a5; }
.update-announcement-blocks span:nth-child(3) { background: #86efac; }
.update-announcement-blocks span:nth-child(4) { background: #fde68a; }

.update-announcement-hero h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 6px;
    color: var(--color-on-brand);
    font-size: clamp(1rem, 5vw, 1.25rem);
    line-height: 1.35;
    letter-spacing: -0.035em;
    white-space: nowrap;
}

.update-announcement-hero p {
    position: relative;
    z-index: 1;
    margin: 0;
    /* ブランド色のヒーロー面に乗る文字。両テーマで同じ。 */
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.8125rem;
    line-height: 1.65;
}

.update-announcement-hero p span {
    display: block;
    text-wrap: pretty;
}

.update-announcement-body {
    padding: 16px 20px 20px;
}

.update-announcement-items {
    display: grid;
    gap: 10px;
    max-height: min(34svh, 280px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.update-announcement-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.update-announcement-kind {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--accent-blue);
    font-size: 0.6875rem;
    font-weight: 800;
}

.update-announcement-kind.is-improve {
    background: var(--color-success-surface);
    color: var(--color-success-text);
}

.update-announcement-item h3 {
    margin: 0 0 3px;
    font-size: 0.9375rem;
    line-height: 1.35;
}

.update-announcement-item p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.55;
}

.update-announcement-form {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.update-announcement-preference {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.8125rem;
}

.update-announcement-preference input {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    accent-color: var(--color-primary);
}

.update-announcement-preference small {
    display: block;
    margin-top: 2px;
    font-size: 0.6875rem;
}

.update-announcement-close {
    width: 100%;
    min-height: 48px;
}

@media (min-width: 640px) {
    .update-announcement {
        inset: 50% auto auto 50%;
        width: min(440px, calc(100vw - 32px));
        max-height: min(680px, calc(100vh - 48px));
        transform: translate(-50%, -50%);
        border-radius: 20px;
        padding-bottom: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .update-announcement[open] {
        animation: update-announcement-enter 180ms ease-out;
    }

    @keyframes update-announcement-enter {
        from { opacity: 0; transform: translateY(18px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @media (min-width: 640px) {
        @keyframes update-announcement-enter {
            from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
            to { opacity: 1; transform: translate(-50%, -50%); }
        }
    }
}

/* ===== 空き時間入力モード（グループ画面のグリッド上で編集する） ===== */

/* display 指定を持つ要素は hidden 属性だけでは消えないため明示する */
.heatmap-legend[hidden],
.availability-legend[hidden],
.availability-legend-item[hidden],
.availability-toolbar[hidden],
.group-action-bar[hidden] {
    display: none !important;
}

.grid-table.grid-fading {
    opacity: 0;
}

.grid-table {
    transition: opacity 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
    .grid-table {
        transition: none;
    }
}

/* 入力モード中は集計向けの装飾を消し、選択状態だけが見えるようにする */
.grid-table.edit-mode .slot-cell {
    position: relative;
    background: var(--color-surface);
    background-image: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.grid-table.edit-mode .slot-cell.weekend {
    background: var(--grid-weekend-surface);
}

.grid-table.edit-mode .slot-cell.today {
    background: var(--grid-today-surface);
}

.grid-table.edit-mode .slot-cell.avail-busy {
    background: var(--heat-busy-surface);
    background-image: repeating-linear-gradient(45deg, var(--heat-busy-surface) 0, var(--heat-busy-surface) 5px, var(--heat-busy-stripe) 5px, var(--heat-busy-stripe) 6px);
    color: var(--heat-busy-text);
}

.grid-table.edit-mode .slot-cell.avail-selected {
    background: var(--avail-selected-surface);
    background-image: none;
    color: var(--avail-selected-text);
}

.grid-table.edit-mode .slot-cell.avail-busy.avail-selected {
    background: var(--avail-selected-busy-surface);
    background-image: none;
}

/* 確定済みそのものは色付けせず、印だけ出す。選択中は選択色を優先する */
.grid-table.edit-mode .slot-cell.avail-decided {
    background-image: none;
    color: var(--color-text-main);
}

.grid-table.edit-mode .slot-cell.avail-decided.avail-selected {
    background: var(--avail-selected-surface);
    color: var(--avail-selected-text);
}

/* 今日の列は一体の枠で囲い、入力中の現在地をわかりやすくする
   （旧・単独入力ページの 83a2c0fc「今日の列を一体表示に変更」を引き継ぐ） */
/* グリッド線の !important（group_detail.html 内）に勝たせるため、
   今日の列だけは枠線も !important で上書きする。 */
.grid-table.edit-mode .date-header.today {
    background: var(--grid-today-surface);
    color: var(--grid-today-text);
    border-top: 3px solid var(--grid-today-accent) !important;
    border-right: 3px solid var(--grid-today-accent) !important;
    border-left: 3px solid var(--grid-today-accent) !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 6px 6px 0 0;
    box-shadow: none;
}

.grid-table.edit-mode .slot-cell.today {
    border-right: 3px solid var(--grid-today-accent) !important;
    border-left: 3px solid var(--grid-today-accent) !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: none;
}

.grid-table.edit-mode .last-hour-row .slot-cell.today {
    border-bottom: 3px solid var(--grid-today-accent) !important;
    border-radius: 0 0 6px 6px;
}

/* 過去の日付は入力対象外（保存は今日以降のみ） */
.grid-table.edit-mode .slot-cell.avail-locked {
    background: var(--avail-locked-surface);
    background-image: repeating-linear-gradient(45deg, var(--avail-locked-surface) 0, var(--avail-locked-surface) 4px, var(--avail-locked-stripe) 4px, var(--avail-locked-stripe) 5px);
    cursor: not-allowed;
}

.grid-table.edit-mode .date-header.avail-locked,
.grid-table.edit-mode .time-label.avail-locked {
    opacity: 0.5;
}

.avail-label {
    position: relative;
    z-index: 2;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

/* Googleカレンダーの予定（固定1色・うっすら・入力を邪魔しない） */
.gcal-overlay {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 2px;
    background: var(--heat-google-surface);
}

/* 連続選択中はグリッドの横スクロールを止め、指の動きを選択に使う */
.grid-wrapper.continuous-select-mode {
    overflow-x: auto;
    touch-action: pan-y;
}

.grid-wrapper.continuous-select-mode .slot-cell {
    user-select: none;
}

/* --- 入力モードのツールバー --- */
.availability-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--spacing-sm);
    padding: 8px 10px;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.availability-toolbar select {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    min-height: 36px;
    background: var(--color-surface);
}

.availability-toolbar .btn-jump-today {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: 0.875rem;
    cursor: pointer;
}

.continuous-select-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    min-height: 36px;
    cursor: pointer;
}

.continuous-select-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

.availability-toolbar-note {
    width: 100%;
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* --- 入力モードの凡例 --- */
.availability-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: var(--spacing-sm);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.availability-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.availability-legend-sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 18px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--avail-selected-text);
}

.availability-legend-selected {
    background: var(--avail-selected-surface);
}

.availability-legend-empty {
    background: var(--color-surface);
}

.availability-legend-busy {
    background: var(--heat-busy-surface);
    background-image: repeating-linear-gradient(45deg, var(--heat-busy-surface) 0, var(--heat-busy-surface) 5px, var(--heat-busy-stripe) 5px, var(--heat-busy-stripe) 6px);
    color: var(--heat-busy-text);
}

.availability-legend-decided {
    background: var(--color-surface);
    color: var(--color-text-main);
}

.availability-legend-gcal {
    background: var(--heat-google-surface);
    border-color: var(--gcal-border);
}

/* --- 入力モード中に使えない操作は隠す ---
   スマホでは表示週数・フィルターを残すとグリッドが画面外へ押し出されるため、
   薄く表示するのではなく畳んでしまう。 */
body.availability-editing .member-filter,
body.availability-editing .range-field-weeks,
body.availability-editing .timeline-toggle-row,
body.availability-editing .timeline-legend {
    display: none;
}

.range-field {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

body.availability-editing .grid-table .tl-collapsible-row,
body.availability-editing .grid-table .tl-separator-row {
    display: none;
}

/* 読み込み中・保存中・エラーの一言。下部バーの上に重ねて出す */
.availability-saving-note {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bottom-ui-height, 72px) + 8px);
    transform: translateX(-50%);
    z-index: 201;
    margin: 0;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    background: var(--color-toast-surface);
    color: var(--color-toast-text);
    font-size: 0.8125rem;
    max-width: min(360px, calc(100vw - 32px));
    text-align: center;
}

.availability-saving-note:empty {
    display: none;
}

.availability-saving-note.text-error {
    background: var(--color-toast-error-surface);
    color: var(--color-toast-error-text);
}