/* お庭ばん 管理システム CSS (Phase 2-α mock)
 * モバイルファースト + デスクトップ拡張、屋外業務想定 (タップ48px+ / 文字16px+) */

/* ⚠ Critical CSS 二重管理 (decisions v2.102): 以下の変数のうち
   --color-primary / --color-primary-dark / --color-bg / --color-card-bg /
   --color-border / --shadow-md / --topbar-h / --sidebar-w は base.html の
   <style> Critical CSS ブロックにも複製。変更時は両方更新必須。 */
:root {
    /* テーマカラー (Phase 2-ε: 青系 #4a6da7 → オリーブ/苔色 #7b8d42 に変更)
       理由: 植木屋業務に馴染む和テイスト、frontend お庭ばんHP の緑系とトーン統一
       派生色は HSL L値調整: dark = #5e6c33 (L-10%)、light = #eef2dd (L+50% s-30%) */
    --color-primary: #7b8d42;
    --color-primary-dark: #5e6c33;
    --color-primary-light: #eef2dd;
    /* --color-primary-soft (2026-05-13 cmd_color_primary_soft):
       primary の「目立つ薄め版」。tinting (白混ぜ) ではなく tonal shifting
       (色相を暖色側へシフト + 彩度・明度を上げる) で、CTA (FAB 等) の
       rest 時 background として使う。導出規則は spec §UX 共通 FAB 節参照。 */
    --color-primary-soft: #d4e070;
    --color-accent: #76a05a;
    --color-bg: #f5f7fa;
    --color-card-bg: #ffffff;
    --color-text: #2c3e50;
    --color-text-muted: #6c7a89;
    --color-border: #d0d7e0;
    --color-error: #d04545;
    --color-error-bg: #fdecec;
    --color-success: #5a9a6e;
    --color-warning: #d4923a;

    /* M-2c-α: メールラベル配色 (顧客 / 宣伝 / 登録 / ゴミ箱).
       「未分類」は意図的に var を持たず default に倒す。
       Phase β (2026-05-13): 顧客 / システムは schedule のラベル token を alias、
       schedule トークン側の変更が messages に lazy var() resolution で自動波及。
       [data-theme="dark"] 側で再宣言しないことで dark 値も schedule 経由で継承。 */
    --color-label-customer: var(--schedule-color-2);   /* = Indigo 800、schedule 仕事色 */
    --color-label-customer-fg: var(--schedule-color-2-fg);
    --color-label-system:   var(--schedule-color-1);   /* = skyblue、schedule 予約色 */
    --color-label-system-fg: var(--schedule-color-1-fg);
    --color-label-promo:    #f97316;  /* orange, 注目色 (警告ではない) */
    --color-label-register: #1f2937;  /* near-black, 契約/正式 */
    --color-label-trash:    #9ca3af;  /* gray-400, de-emphasized */
    /* M-2c-β: お気に入り (☆) — gold (amber-400) */
    --color-label-starred:  #fbbf24;
    /* M-2e-δ: ハート (♡) — pink-500. ユーザ任意のグルーピング用. */
    --color-label-heart:    #ec4899;
    /* M-2d: 行 hover / 派生背景 (展開 expanded body 用). light は primary-light に倒す. */
    --color-row-hover: #eef2dd;     /* = --color-primary-light */
    --color-bg-subtle: #ecf0e6;     /* primary-light より少し濃い tone, toolbar 用 */

    /* タップ領域 (屋外手袋着用想定) */
    --tap-min: 48px;

    /* フォントサイズ */
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-xxl: 28px;

    /* スペーシング */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 12px;
    --sp-lg: 16px;
    --sp-xl: 24px;

    /* 陰影 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.10);
    /* FAB 専用陰影トークン (2026-05-13 cmd_fab_tactile_polish)
       `--shadow-fab`: rest 時のドロップシャドウ (現状より少し深く)。
       `--shadow-fab-pressed`: press 時、inset で凹んだ感を作る。 */
    --shadow-fab: 0 6px 10px rgba(0, 0, 0, 0.22);
    --shadow-fab-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.10);

    /* レイアウト */
    --topbar-h: 56px;
    --sidebar-w: 240px;

    /* Phase ε-1 (2026-05-12): schedule 月リスト card の最低高さ。1 行のみの
       intraday card (e.g. "Dam広場前 / 撮影" 単独) が時刻表の中で過剰に詰まって
       見える問題対策。content > min なら自然 grow、min がフロアとして効く。 */
    --list-card-min-height: 64px;
    /* Phase ε-4 (2026-05-12): memo なし card 用の縮小 min-height。Sato-san
       dogfood で「体操 / 12 日のよてい等の単行 card が縦に大きすぎ」報告、
       memo の有無で floor を切替。.schedule-list-item.no-memo に適用。 */
    --list-card-min-height-nomemo: 36px;
    /* Phase ε-7 (2026-05-12): schedule list の日付欄ワイド。
       Phase ε-8 (2026-05-12): 6.5em → 6em。
       Phase ε-9 (2026-05-13): 6em → 4em。連泊 IN/OUT 日時を reservation-info 行に
       分離したため、time-col content は `HH:MM` のみ。4em (~64px) で `HH:MM` (~35px)
       + 末尾余白で title 領域を最大化。 */
    --list-date-col-width: 4em;

    /* Phase 5.x グローバルリップル トークン。
       primary 30% + 黒 70% ミックスで「ばれない程度」のブランドニュアンス。
       ダーク時は黒→白に切替 ([data-theme="dark"] ブロック側で override)。 */
    --ripple-color: color-mix(in srgb, var(--color-primary) 30%, #000 70%);
    --ripple-max-opacity: 0.18;
    --ripple-expand-duration: 0.28s;
    --ripple-fade-duration: 0.32s;
    --ripple-easing: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* プルツーリフレッシュ自前実装 トークン (decisions v2.33 由来、Phase 1.4 サークル統一、
       Phase 1.6 X 完全準拠 chip + glyph 二層化、Phase 1.7 弓メタファー物理化、
       Phase 1.8 引き算 polish: vibration / breathing / retract zoom-out 削除)。
       chip = 外側コンテナ (半透明白 + ドロップシャドウ、X / iOS-style)、glyph = 内側 SVG
       (75% 弧 + 矢じり marker、stroke 草色)。詳細は decisions
       `spinner_phase1_8_subtraction_polish` 参照。 */
    --ptr-chip-size: 44px;             /* 外側コンテナの外径 (PTR 用) */
    --ptr-glyph-size: 32px;            /* 内側 SVG glyph 描画域 (PTR 用) */
    --ptr-threshold: 140px;            /* Phase 1.20: 200 → 140 (距離スケール再構築、閾値早く到達で余韻距離 3.5x 拡大) */
    --ptr-max-pull: 240px;             /* Phase 1.24: 280 → 240 (15% 短縮、MAX 到達 15% 早く、副次効果で chip Y at threshold が 119→102px = Phase 1.18 完全同一値に復帰) */
    --ptr-flash-duration: 0.25s;       /* Phase 1.19: 0.2s → 0.25s (flash softening、duration 延長で余韻寄せ) */
    --ptr-retract-duration: 0.075s;    /* Phase 1.15: 0.105s → 0.075s (もうちょい消えるの早く、unified post-release acceleration) */
}

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

/* decisions v2.38: [hidden] 属性は author CSS の display: <value> で簡単に上書きされるため、
   グローバルで !important 付きの display: none を強制する。
   背景: Stage 1 で .sidebar-update-btn / .home-update-banner に display: flex を直書きしたら
   UA stylesheet の [hidden] { display: none } を上書きしてしまい、 el.hidden = true が
   画面表示に反映されない 3 バグ (アプデボタン消えない / バナー空欄表示 / × で閉じない) が発生。
   本ルールは [hidden] のセマンティクスを protect する標準的なベストプラクティス。
   ⚠ Critical CSS 二重管理 (decisions v2.102): base.html の <style> にも複製。
   変更時は両方更新必須。 */
[hidden] {
    display: none !important;
}

/* Phase 5.x: ブラウザネイティブのプルツーリフレッシュを全停止 (decisions v2.33)。
   Android Chrome の白い線インジケータ (主訴) を根絶し、必要画面では自前 PTR
   (pull_to_refresh.js + [data-pull-refresh]) で代替。副次効果として下端バウンスも
   停止するが SaaS 用途では問題なし。 */
html, body {
    overscroll-behavior: none;
}

/* Phase 5.x ネイティブアプリ風 polish: ブラウザ既定の tap-highlight をサイト全体で抑制。
   代替フィードバックは global_ripple.js のリップル (対象外要素は完全フラット)。 */
*, *::before, *::after {
    -webkit-tap-highlight-color: transparent;
}

/* Phase 5.x ネイティブアプリ風 polish: マウス/タッチ時はフォーカス枠非表示、
   キーボード Tab 時のみブランド色のフォーカス枠を表示 (WCAG 2.4.7 維持)。 */
:focus {
    outline: none;
}
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Phase 5.x ネイティブアプリ風 polish — ブラウザ感消去 (browser feel suppression Phase 1)
 * 全体方針: テキスト選択 / iOS callout / 画像ドラッグ をグローバル OFF。
 * 編集系コントロール + 平文メール本文のみ allow-list で例外復活。
 * 右クリック / 長押し contextmenu は native_feel.js が document 一本で抑制。
 * 既存の局所的 user-select: none 宣言 (8 箇所) は無害な冗長として残置。
 */
*, *::before, *::after {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

/* Allow-list: editable controls + 平文メール本文のみ選択 / コピー可。
 * positive list で global_ripple.js の EXCLUDE と pattern を揃える。
 * input[type="tel"] は現状未使用だが将来用に含める (inputmode=tel が type=text 上で使われている)。
 */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="url"],
textarea,
select,
.msg-expanded-body-text {
    user-select: text;
    -webkit-user-select: text;
}

/* 平文メール本文のみ iOS 長押し callout を復活 (「コピー / 共有」を出すため)。
 * 他の allow-list 要素は編集中の callout が UX 的に煩わしいので default に戻さない。
 */
.msg-expanded-body-text {
    -webkit-touch-callout: default;
}

/* ---------------------------------------------------------------------------
   Phase 5.x グローバルリップルフィードバック。
   global_ripple.js が pointerdown 時に対象要素へ [data-ripple-target] 属性 +
   `is-rippling` クラス + `--ripple-x` / `--ripple-y` を付与し、350ms 後に解除する。
   transient な属性付与で「平常時の DOM/CSS にゼロ影響」を担保。
   --------------------------------------------------------------------------- */
[data-ripple-target] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

[data-ripple-target]::after {
    content: "";
    position: absolute;
    top: var(--ripple-y, 50%);
    left: var(--ripple-x, 50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle,
        var(--ripple-color) 0%,
        transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: width 0s, height 0s, opacity var(--ripple-fade-duration) ease-out;
}

[data-ripple-target].is-rippling::after {
    width: 140%;
    height: 140%;
    opacity: var(--ripple-max-opacity);
    transition:
        width var(--ripple-expand-duration) var(--ripple-easing),
        height var(--ripple-expand-duration) var(--ripple-easing),
        opacity var(--ripple-fade-duration) ease-out;
}

/* ---------------------------------------------------------------------------
   プルツーリフレッシュ自前インジケータ (decisions v2.33 / Phase 1.4 サークル統一 /
   Phase 1.6 X 完全準拠 chip + glyph 二層化)。`[data-pull-refresh]` +
   `[data-pull-refresh-handler]` を持つページでのみ pull_to_refresh.js が動的に生成・
   操作する。インジケータ DOM は wrapper `.ptr-indicator` + 内側 `.tallybe-spinner-chip`
   (X / iOS-style 円形コンテナ + 控えめドロップシャドウ) + 中の `<svg class="tallybe-spinner-glyph">`
   (75% 弧 + 矢じり marker) の 3 層構造。wrapper は位置 + state class、chip は容器+flash、
   glyph は rotation/breathing を担当。spinner overlay と chip + glyph 構造を共有。
   --------------------------------------------------------------------------- */
.ptr-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    width: var(--ptr-chip-size);
    height: var(--ptr-chip-size);
    z-index: 200;                  /* topbar / bottom-nav (z-index:100) より上 */
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    /* 既定の transition は retract / 完了用 + Phase 1.6 stage 1 opacity フェードイン用。
       pull 中の opacity は JS から書くが (距離比例)、CSS transition で 1 frame 平滑化。
       transform transition は retract 用。 */
    transition:
        transform var(--ptr-retract-duration) ease-out,
        opacity 80ms ease-out;
}

/* 引きずり中は JS が直接 transform を書く。連続更新の transform transition jitter を
   避けるため transform のみ off。opacity は連続更新 (距離比例) なので transition 維持。 */
.ptr-indicator.is-pulling {
    transition: opacity 80ms ease-out;
}

/* Phase 1.7 Thread 2: pull 中の chip scale を CSS variable で受け取る。
   inline transform を使わないことで、is-flash 時の CSS scale(1.12) が specificity で
   勝つ (inline は specificity 最強だが var() ベースの transform は通常の rule なので
   .is-flash の specificity 比較で勝負できる)。--ptr-pull-scale は JS の applyPullVisual
   が distance 比例で書く (0.9 → 1.0、Math.pow(ratio, 1.5) curve)。 */
.tallybe-spinner-chip {
    transform: scale(var(--ptr-pull-scale, 1));
}

/* 閾値到達時のフラッシュ: chip コンテナ全体 (背景 + シャドウ含む) を一瞬 scale → 1.0
   (~250ms 全体)。Phase 1.4 の SVG-only flash から chip-level に拡張、X / iOS の snappy さを
   コンテナ + シャドウの揺れで表現。
   Phase 1.18: 1.12 → 1.34 (1.2x 強化、「ピン!」感) → Phase 1.19: 1.34 → 1.25 + duration 80ms
   → 100ms (peak softening、duration 延長で「柔らかく長い余韻」、隣接 retract phase の
   perceived length 圧縮を解消、Sato-san feedback 「効きすぎ」対応) */
.ptr-indicator.is-flash .tallybe-spinner-chip {
    transform: scale(1.25);
    transition: transform 100ms ease-out;
}
.ptr-indicator:not(.is-flash) .tallybe-spinner-chip {
    transition: transform 120ms ease-in;
}

/* リフレッシュ中: wrapper を 60px 位置で固定。glyph 自前 rotation (600ms/turn、Phase 1.8) で
   「準備中」を表現。wrapper / chip 自身は無回転。Phase 1.8 で is-breathing 削除 (decoration 過多)。 */
.ptr-indicator.is-refreshing {
    transform: translate(-50%, 60px);
    transition: none;
}

/* Phase 1.8 引き算: 完了 (retract) を「その場で alpha フェード」に再簡素化。
   Phase 1.7 の zoom-out (scale 0.7 + cubic-bezier curve) は overengineering と判定 (Sato-san)、
   X / iOS の純粋 alpha フェードに揃える。位置 / scale 動かず、opacity だけ 1.0 → 0、150ms ease-out。 */
.ptr-indicator.is-retracting {
    opacity: 0;
    transition: opacity var(--ptr-retract-duration) ease-out;
}

/* Phase 1.17 Thread 1: PTR refreshing 中の排他制御 (long-standing bug 修正)。
   showRefreshing で body に .ptr-active を付与、retract で剥がす。
   pointer-events: none で全 click 起点 trigger (bottom-nav / sidebar / button /
   htmx hx-boost / 等) を root から block、375ms の refreshing window 中の input
   leak を構造的に防ぐ。.ptr-indicator は defensive で auto に override (chip 自身に
   click handler はないため実害はないが将来の拡張余地)。
   PTR の touch listener は全て document level (Phase 1.5 確認済) なので
   body の pointer-events: none は PTR 自体の touch handling に影響しない。
   設計憲法: 長時間 feedback 中は pointer-events 制御で全 click 吸収
   (decisions `spinner_phase1_17_exclusive_control_and_slide_buffer` 参照、
   roadmap §7.15 と並列に他 UI への適用候補あり)。 */
body.ptr-active {
    pointer-events: none;
}
body.ptr-active .ptr-indicator {
    pointer-events: auto;
}

html { font-size: var(--fs-base); }
body {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--color-primary); text-decoration: none; }
/* beta288 (2026-05-17): global `a:hover { text-decoration: underline }` を撤廃。
   モバイル tap = :hover sticky で「サブタブやボタンなど文字列にリンクがある部分
   全般」で下線が出て WEB らしさが目立つ (Sato-san FB)、application UX として
   不要。意図的に underline を出したい個別箇所 (schedule-customer-name a:hover
   等) は個別 selector で残してある、global は無し。
   旧 cmd_list_row_tap_underline_fix.md (2026-05-13) の個別打ち消し rule (下記)
   は defensive で残置: 将来 global rule が re-introduce された場合の防壁。 */

/* List-row tap underline 抑止 (2026-05-13, cmd_list_row_tap_underline_fix.md、
   beta288 で global a:hover 撤廃により直接的必要性は消えたが defensive 残置) */
.schedule-list-link:hover,
.schedule-list-item-link:hover,
.settings-hub-row:hover,
.settings-hub-row-danger:hover,
.card-link-area:hover,
.home-event-link:hover,
.home-next-event-card:hover,
a.home-next-event-card:hover,
.home-card-link:hover,
.console-link-card:hover,
.tx-card:hover {
    text-decoration: none;
}

/* =====================================================================
   FAB (Floating Action Button) 共通基盤 (2026-05-13)
   ---------------------------------------------------------------------
   サイト横断で FAB を提供する base class。position / size / shadow /
   transition / press feedback / focus-visible を集約。
   個別の color / right offset / state modifier は subclass で持つ
   (`.schedule-multi-fab` / `.schedule-multi-cancel` 等)。
   将来 取引・メッセージ画面で FAB を載せる際は class="tallybe-fab
   {context-specific-class}" の 2 並列指定で組み立てる。
   ===================================================================== */
.tallybe-fab {
    position: fixed;
    bottom: calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom));
    z-index: 110;
    height: 56px;
    border-radius: 28px;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-fab);
    transition: background 100ms ease-out, color 100ms ease-out,
                box-shadow 100ms ease-out, transform 100ms ease-out,
                opacity 180ms ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    /* <button> default の system font に流されず、<a> 側と同じ body inherit
       (Noto Sans JP) に統一。「+」glyph の形状・位置が要素タイプで微妙に
       ずれるのを防ぐ (Sato-san beta276 視認で entity FABs が tx FAB と
       異なると指摘、原因は <a> vs <button> の font-family 差)。 */
    font-family: inherit;
    -webkit-user-select: none;
    user-select: none;
}
.tallybe-fab:active {
    transform: scale(0.95);
    box-shadow: var(--shadow-fab-pressed);
}
/* <a class="tallybe-fab"> 系で global `a:hover { text-decoration: underline }`
   (line 338) が touch device で sticky になり「+」下に下線が出る issue。
   全 state で text-decoration を打ち消し、<button> 系と挙動統一 (beta278)。 */
.tallybe-fab,
.tallybe-fab:hover,
.tallybe-fab:focus,
.tallybe-fab:active {
    text-decoration: none;
}

/* ====== トップバー (モバイル: 上部固定 / デスクトップ: 上部固定だが幅は同じ) ====== */
/* ⚠ Critical CSS 二重管理 (decisions v2.102): position/top/left/width/height/
   background/color/display/align-items/z-index/box-shadow は base.html の
   <style> Critical CSS にも複製。padding (sp-md) と装飾は本ファイル独自。
   変更時は両方更新必須。 */
.topbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: var(--topbar-h);
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 var(--sp-md);
    z-index: 100;
    box-shadow: var(--shadow-md);
}
.topbar-title {
    flex: 1;
    text-align: center;
    font-size: var(--fs-md);
    font-weight: 500;
    margin: 0 var(--sp-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* decisions v2.28: ホーム画面 topbar 専用、wordmark logo の直左に表示するタリビーアイコン。
   ホーム以外のページは page_title が出るので touch しない。
   若草色 #c3d825 固定 (草色帯背景に対しコントラスト確保のため、light variant 不使用)。 */
.topbar-brand-icon {
    height: 22px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}
@media (min-width: 600px) {
    .topbar-brand-icon { height: 26px; }
}
.hamburger {
    width: var(--tap-min);
    height: var(--tap-min);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
}
.hamburger span {
    display: block;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}
/* T2: 3 lines に descending opacity を適用 (top 1.0 / mid 0.7 / bottom 0.45)。
   "fading menu" の視覚リズム。`.active` 時に nth-child(2) opacity を 0 に
   override する既存ルールが下にあるので X 化アニメーションには影響なし。 */
.hamburger span:nth-child(1) { opacity: 1; }
.hamburger span:nth-child(2) { opacity: 0.7; }
.hamburger span:nth-child(3) { opacity: 0.45; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); opacity: 1; }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); opacity: 1; }

.logout-btn {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.5);
    padding: 8px 14px;
    border-radius: 4px;
    font-size: var(--fs-sm);
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.logout-btn:hover { background: rgba(255,255,255,0.1); text-decoration: none; }

/* ====== サイドバー (モバイル: ハンバーガー時に slide-in / デスクトップ: 常時左固定) ====== */
/* ⚠ Critical CSS 二重管理 (decisions v2.102): 本 .sidebar ルール全体 + .sidebar.open
   は base.html の <style> Critical CSS にも複製 (★ FOUC 阻止の核)。
   transform: translateX(-100%) 単独 + display: flex 常時の隠蔽機構が author CSS
   未到着窓で効かないと UA default `display: block` でサイドバーが見えてしまうため。
   背景は dark mode で translucent (line 4413 [data-theme="dark"] .sidebar) が
   admin.css 到着で上書き、Critical CSS 側は opaque で simplify (FOUC 窓数 100ms
   は通常サイドバー画面外で不可視のため回帰なし)。変更時は両方更新必須。 */
.sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    width: var(--sidebar-w);
    /* Phase 2-ζ: ボトムナビ (z-index 100) がサイドバー (z-index 90) の下端に被るバグ対策。
       サイドバーの高さを bottom-nav 分 + iOS セーフエリア分だけ縮め、sidebar-footer
       (user-email / logout / version) を完全に可視領域に収める。
       M-2e-ζ: 100vh → 100dvh で iPhone Chrome 動的アドレスバーに追従、底部見切れ解消。 */
    height: calc(100dvh - var(--topbar-h) - var(--bottom-nav-h) - env(safe-area-inset-bottom));
    background: #fff;
    border-right: 1px solid var(--color-border);
    transform: translateX(-100%);
    /* Phase 1.4 (decisions v2.105): 250ms → 100ms 短縮で sidebar close lag fix。
       VT snapshot が transition mid-flight で凍結する問題 (htmx ネット往復後の
       startViewTransition 発火時点で sidebar が中間 transform 値、220ms VT 中
       凍結 → 完了でジャンプ) を構造的に解消、ネット往復前に transition 完了。 */
    transition: transform .1s;
    /* beta285: GA4 chart tooltip (z-index:1000) より前面に lift (Sato-san FB
       「tooltip がサイドバーの上に描画される」)。bottom-nav (100) との上下関係
       は height 計算で分離済 (line 513 で bottom-nav 分縮めてる) のため、z-index
       上げても visual overlap は起こらない。 */
    z-index: 1090;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.sidebar.open { transform: translateX(0); }
/* Phase 5.18-α: brand icon `<img>` を `<strong>` の左に並べるため flex 化。
   icon が無い (未ログイン経路) ときも block-level の `<strong>` 単独で違和感なし。 */
.sidebar-brand {
    padding: var(--sp-lg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
}
.sidebar-brand-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 6px;
    object-fit: contain;
}
.sidebar-brand strong {
    display: block;
    font-size: var(--fs-lg);
    color: var(--color-primary-dark);
    min-width: 0;
    overflow-wrap: anywhere;
}
.sidebar-brand span {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.sidebar nav { flex: 1; }
.sidebar nav ul { list-style: none; }
.sidebar nav li { border-bottom: 1px solid var(--color-border); }
.nav-link {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: var(--sp-md) var(--sp-lg);
    color: var(--color-text);
    font-size: var(--fs-base);
    font-weight: 500;
    text-decoration: none;
}
.nav-link:hover { background: var(--color-primary-light); text-decoration: none; }
.nav-link.active { background: var(--color-primary-light); color: var(--color-primary-dark); border-left: 4px solid var(--color-primary); padding-left: calc(var(--sp-lg) - 4px); }
.sidebar-footer { padding: var(--sp-md); color: var(--color-text-muted); font-size: var(--fs-sm); }

.overlay {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    width: 100%;
    height: calc(100dvh - var(--topbar-h));
    background: rgba(0,0,0,0.4);
    /* beta285: GA4 chart tooltip (.ga4-spark-tooltip z-index:1000) より前面に。
       元 80 だと日付タップ後 tooltip 表示中にサイドバー出すと tooltip がサイドバーを
       貫通して描画されていた (Sato-san FB)。sidebar 系 3 要素 (overlay / underlay /
       sidebar 本体) を 1080 / 1089 / 1090 に一括 lift で 整合維持。 */
    z-index: 1080;
    opacity: 0;
    pointer-events: none;
    /* Phase 1.4: sidebar 系と同期して 100ms に揃える (close lag fix)。 */
    transition: opacity .1s;
}
.overlay.open { opacity: 1; pointer-events: auto; }

/* ====== メインコンテンツ ====== */
.content {
    padding-top: calc(var(--topbar-h) + var(--sp-lg));
    padding-left: var(--sp-lg);
    padding-right: var(--sp-lg);
    padding-bottom: var(--sp-xl);
    max-width: 100%;
}

/* ====== ページヘッダー (検索バー + アクション行) ====== */
.page-header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    margin-bottom: var(--sp-lg);
}
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    align-items: center;
}
.filter-bar--multi { gap: var(--sp-sm); }
.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
}
.back-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0 var(--sp-md);
    color: var(--color-text-muted);
    font-size: var(--fs-base);
}

/* ====== フォーム要素 ====== */
.search-input,
.select-input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea {
    min-height: var(--tap-min);
    padding: var(--sp-sm) var(--sp-md);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: var(--fs-base);
    background: #fff;
    color: var(--color-text);
    width: 100%;
    box-sizing: border-box;
}
.search-input:focus,
.select-input:focus,
textarea:focus,
input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.search-input { flex: 1; min-width: 200px; }
.select-input { flex: 1 1 calc(50% - var(--sp-sm)); min-width: 140px; }

textarea { resize: vertical; min-height: 80px; }

.form-label {
    display: block;
    margin-bottom: var(--sp-md);
}
.form-label span {
    display: block;
    font-weight: 500;
    margin-bottom: var(--sp-xs);
    color: var(--color-text);
}

/* ====== ボタン ====== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min);
    padding: 0 var(--sp-lg);
    border: 0;
    border-radius: 6px;
    font-size: var(--fs-base);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary { background: #fff; color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-bg); }
.btn-danger { background: var(--color-error); color: #fff; }
.btn-danger:hover { filter: brightness(0.9); }
.btn-block { width: 100%; }

/* ====== カードリスト (顧客/売上/メッセージの一覧用) ====== */
.card-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}
.card-list-item {
    display: block;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--sp-md) var(--sp-lg);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    min-height: var(--tap-min);
}
.card-list-item:hover { border-color: var(--color-primary); text-decoration: none; box-shadow: var(--shadow-md); }
.card-main { margin-bottom: var(--sp-sm); }
.card-title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-primary-dark);
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    flex-wrap: wrap;
}
.card-sub { color: var(--color-text-muted); font-size: var(--fs-sm); }
.card-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-md);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--sp-xs);
}
.card-info > div { display: flex; align-items: center; gap: 4px; }
.card-meta {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    border-top: 1px dashed var(--color-border);
    padding-top: var(--sp-xs);
    margin-top: var(--sp-xs);
}

/* ====== 情報ボックス (詳細ページ用) ====== */
.info-box {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--sp-lg);
    margin-bottom: var(--sp-lg);
    box-shadow: var(--shadow-sm);
}
.section-h {
    font-size: var(--fs-md);
    color: var(--color-primary-dark);
    margin-bottom: var(--sp-md);
    border-bottom: 2px solid var(--color-primary-light);
    padding-bottom: var(--sp-xs);
}
/* section-h 内 SVG アイコンを文字高さに揃える。default 24x24 が文字 baseline
   より上にせり出る issue (Sato-san 2026-05-17 視認、店舗管理 5 サブカテで指摘)。
   1.1em で文字とほぼ同高、vertical-align で視覚中央へ。 */
.section-h svg {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.15em;
}
.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-sm);
}
.info-grid dt {
    font-weight: 700;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.info-grid dd { font-size: var(--fs-base); margin-bottom: var(--sp-md); }
.meta { color: var(--color-text-muted); font-size: var(--fs-sm); }
.map-link { display: inline-block; margin-left: var(--sp-sm); color: var(--color-accent); }

/* ====== サマリバー / 空状態 ====== */
.summary-bar {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    padding: var(--sp-md) var(--sp-lg);
    border-radius: 6px;
    margin-bottom: var(--sp-lg);
    font-size: var(--fs-base);
}
.empty-state { color: var(--color-text-muted); padding: var(--sp-lg); text-align: center; }

/* ====== リンクリスト (顧客詳細の売上履歴等) ====== */
.link-list { list-style: none; }
.link-list li { border-bottom: 1px solid var(--color-border); }
.link-list li:last-child { border-bottom: 0; }
.link-list li a {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    min-height: var(--tap-min);
    padding: var(--sp-sm);
    color: var(--color-text);
    flex-wrap: wrap;
}
.link-list li a:hover { background: var(--color-primary-light); text-decoration: none; }
.li-date { color: var(--color-text-muted); font-size: var(--fs-sm); min-width: 100px; }
.li-main { flex: 1; }
.li-amount { font-weight: 700; color: var(--color-primary-dark); }

/* ====== バッジ ====== */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--fs-sm);
    font-weight: 500;
}
.badge-in { background: #e7f5ec; color: var(--color-success); }
.badge-out { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge-channel { background: #fff5e6; color: var(--color-warning); border: 1px solid #f3d4a3; }

/* ====== データテーブル (売上明細用) ====== */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
}
.data-table th, .data-table td {
    padding: var(--sp-sm);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}
.data-table th { background: var(--color-bg); color: var(--color-text-muted); font-size: var(--fs-sm); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tfoot td { border-top: 2px solid var(--color-border); padding: var(--sp-sm); }

/* ====== 写真グリッド ====== */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sp-md);
}
.photo-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--color-bg);
}
.photo-item figcaption {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-top: var(--sp-xs);
    text-align: center;
}

/* ====== メッセージスレッド (チャットUI風) ====== */
.thread {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}
.thread-item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    max-width: 85%;
    padding: var(--sp-md);
    border-radius: 12px;
}
.thread-item--in { background: #f0f4f8; align-self: flex-start; border-bottom-left-radius: 4px; }
.thread-item--out { background: var(--color-primary-light); align-self: flex-end; border-bottom-right-radius: 4px; }
.thread-meta { display: flex; align-items: center; gap: var(--sp-sm); font-size: var(--fs-sm); }
.thread-body { font-size: var(--fs-base); line-height: 1.7; white-space: pre-wrap; }
.reply-form { display: flex; flex-direction: column; gap: var(--sp-md); }
.reply-actions { display: flex; gap: var(--sp-sm); align-items: center; flex-wrap: wrap; }

/* ====== Schedule カレンダー (Phase 3-β-5.14-β で全面刷新) ======
   旧 .calendar / .cal-* / .month-nav / .schedule-header / .schedule-card 系は
   5.14-α 暫定実装と一緒に廃止し .schedule-page / .schedule-cell / .schedule-list-* に再構成。
   status enum (planned/done/cancelled) のカラートークンは本セクション冒頭で定義し
   light/dark 両モードで個別オーバーライド。 */

:root {
    /* schedule status トークン (light) */
    --schedule-planned-fg: #1976d2;
    --schedule-planned-bg: rgba(25, 118, 210, 0.12);
    --schedule-done-fg: var(--color-success);
    --schedule-done-bg: rgba(90, 154, 110, 0.15);
    --schedule-cancelled-fg: var(--color-text-muted);
    --schedule-cancelled-bg: rgba(108, 122, 137, 0.10);
    /* Phase α (2026-05-11): color_index 5 色 (新体系、3-dot 件数 encoding と
       視覚衝突回避)。0=通常 / 1=予約 / 2=仕事 / 3=私用 / 4=タスク。
       表示順 = 番号順。dot 色 (緑/黄/赤) と意図的にずらした色相を採用。
       text fg は WCAG AA (4.5:1) を満たす #000 / #fff に固定。 */
    --schedule-color-0: #eef2dd;     /* 通常 = light olive (現状維持) */
    --schedule-color-0-fg: #7b8d42;
    --schedule-color-1: #87ceeb;     /* 予約 = CSS keyword skyblue (Phase β-3、爽やか水色) */
    --schedule-color-1-fg: #0d47a1;  /* Material Blue 900、skyblue bg 上で読み易い深紺 */
    --schedule-color-2: #283593;     /* 仕事 = Material Indigo 800 (Phase β-3、紺寄り) */
    --schedule-color-2-fg: #ffffff;
    --schedule-color-3: #f8bbd0;     /* 私用 = Material Pink 100 (Phase β-3、上品な薄ピンク) */
    --schedule-color-3-fg: #000000;
    --schedule-color-4: #ffd600;     /* タスク = Material Yellow A700 (Phase β-3、vibrant 純黄) */
    --schedule-color-4-fg: #000000;
    /* --schedule-color-5 削除 (旧 重要 → 通常 0 に data migrate 済) */
    /* Phase δ-1 hotfix (2026-05-12): 連泊帯 (band) の opacity を CSS var 化、
       "蛍光ペンといってもビビッド表現したらやりすぎ、薄いマーカー透明感" の
       sweet spot 探索に使う single tuning knob。0.35 = 紙の上に蛍光ペンを
       引いた感の初期値、実機評価で 0.25 〜 0.55 のレンジで微調整余地。
       色別 alpha tuning が必要になったら per-color rgba token へ昇格判断。 */
    --schedule-band-opacity: 0.35;
    /* Phase δ-1 hotfix-2 (2026-05-12 再設計): 条件付き shift 量。
       IN shift = 同 start_date group の 2 件目以降に発生 (in_slot 1/2)、
       OUT shift = end_date 翌日が他 band で covered の時に発生。両機構
       独立。初期 PC 8px / SP 6px (SP は media query 内 :root override)、
       実機評価で sweet spot 探索余地。同 var を IN/OUT 両方で使用 (色別
       alpha が --schedule-band-opacity で統一されているのと同じ思想)。 */
    --schedule-band-shift: 8px;
    /* Phase δ-2 (2026-05-12): 当日リスト heading 直下の進行中タグ pill の
       opacity。タグ全体 (背景 + 文字) に lift alpha 0.35、蛍光ペン pill
       atmosphere。実機評価で sweet spot 探索余地、必要なら 0.25-0.55 で
       微調整。 */
    --schedule-tag-opacity: 0.35;
    /* Phase δ-5 hotfix-4 (2026-05-12): 月リスト同日連続 card 間の軽い separator 色。
       同日 group 内の card 結合表現で、`.schedule-list-item.is-day-continuation`
       の `border-top` color として使用。light mode は rgba 黒 8%、dark mode は
       下の [data-theme="dark"] block で rgba 白 10% に override、実機で sweet
       spot 探る (Sato-san「軽く線引くくらいで区別」の literal 実装)。 */
    --schedule-list-day-separator: rgba(0, 0, 0, 0.08);
    /* Phase δ-5 hotfix-7 Fix X (2026-05-12): 同日 continuation card の row-in
       上下 padding。Sato-san「当日連結はまあよいね。行間もっと詰めていいよ」
       で hotfix-4 era の `var(--sp-sm)` (= 8px) から 4px に詰める。var 化で
       実機 tune 余地 (2〜6px のレンジで微調整可)。 */
    --schedule-continuation-padding: 4px;
    /* Phase A.2.5: SP cell dot の 3-color busyness gradient (色ラベルと独立)。
       緑=1 件カウンタ、黄=3 件カウンタ、赤=5 件カウンタ。色ラベル hex とは
       別 token = 視覚言語の役割分離 (label = カテゴリ、dot = 件数密度)。 */
    --schedule-dot-low: #5a9a6e;
    --schedule-dot-mid: #EF9F27;
    --schedule-dot-high: #D85A30;
    /* Phase A: 選択日 (single-tap で選んだセル). --color-accent (#76a05a)
       系統の濃淡で、--color-primary-light の today (#eef2dd) より 1 段濃い緑。
       Phase A.2.2' (2026-05-12) で is-today+is-selected の outline は廃止、selected
       単独でも today+selected でも inset shadow に統一。 */
    --schedule-selected-bg: #cdd9b8;
    --schedule-selected-fg: #2c3a17;
    --schedule-selected-shadow: rgba(0, 0, 0, 0.18);
    /* Phase B (2026-05-12): 曜日色 + 祝日色 トークン (light).
       日曜と祝日は同色家族 (--color-error) で統一、土曜は青。--color-weekday-sat の
       青は元 .schedule-weekday.is-sat の hardcode #1976d2 を昇格。祝日名 (cell 内の
       小さい字 + 月リスト)は本文の赤よりやや暗い muted 赤で視認性とノイズ感のバランス. */
    --color-weekday-sun: var(--color-error);
    --color-weekday-sat: #1976d2;
    --schedule-holiday-fg: var(--color-error);
    --schedule-holiday-name-muted: #6b3030;
}
[data-theme="dark"] {
    --schedule-planned-fg: #64b5f6;
    --schedule-planned-bg: rgba(100, 181, 246, 0.18);
    --schedule-done-fg: #9eb35a;
    --schedule-done-bg: rgba(158, 179, 90, 0.18);
    --schedule-cancelled-fg: #a0a6ad;
    --schedule-cancelled-bg: rgba(160, 166, 173, 0.12);
    /* Phase α (2026-05-11): color_index dark variants (新 5 色体系)。
       light 値から彩度 -15% / 明度 +8% の mechanical 変奏。
       text fg は dark mode 背景明度に応じて #000 / #fff で WCAG AA を確保。 */
    --schedule-color-0: #5e6c33;     /* 通常 dark = 深緑系 */
    --schedule-color-0-fg: #ffffff;
    --schedule-color-1: #a8d8ec;     /* 予約 dark = skyblue + 彩度-15%/明度+8% (Phase β-3) */
    --schedule-color-1-fg: #0d47a1;  /* Material Blue 900、light bg 上で読み易い深紺 (light と統一) */
    --schedule-color-2: #3d4ba5;     /* 仕事 dark = Indigo 800 + 明度+8% (Phase β-3、元 800 が dark) */
    --schedule-color-2-fg: #ffffff;  /* Phase β-3 hotfix: 黒 fg は 2.75:1 で AA 不足、白へ flip */
    --schedule-color-3: #fac4d7;     /* 私用 dark = Pink 100 + 微変奏 (Phase β-3) */
    --schedule-color-3-fg: #000000;
    --schedule-color-4: #fee247;     /* タスク dark = Yellow A700 + 微変奏 (Phase β-3) */
    --schedule-color-4-fg: #000000;
    /* --schedule-color-5 削除 (旧 重要 → 通常 0 に data migrate 済) */
    /* Phase δ-5 hotfix-4 (2026-05-12): dark mode 用 day-separator (rgba 白)。 */
    --schedule-list-day-separator: rgba(255, 255, 255, 0.10);
    /* Phase A.2.5: dot 3-color dark variants。 */
    --schedule-dot-low: #7ab98a;
    --schedule-dot-mid: #f0b04e;
    --schedule-dot-high: #e07050;
    /* Phase A: 選択日 (dark). dark の today (#2a3019) より 1 段明るく、
       accent (#82b06a) を弱める方向のオリーブ。本文は薄黄緑で contrast 確保。
       Phase A.2.2' (2026-05-12) で inset shadow を dark でも適用、light より濃い alpha. */
    --schedule-selected-bg: #3d4a26;
    --schedule-selected-fg: #d4e0b9;
    --schedule-selected-shadow: rgba(0, 0, 0, 0.35);
    /* Phase B (2026-05-12): dark の曜日色 + 祝日色. dark での --color-error
       (#d04545) は彩度が刺すので明度上げ。土曜青は --schedule-planned-fg と同値の
       平日青 dark 版 (#64b5f6). */
    --color-weekday-sun: #f08080;
    --color-weekday-sat: #64b5f6;
    --schedule-holiday-fg: #f08080;
    --schedule-holiday-name-muted: #d49b9b;
}

.schedule-page { padding: 0 12px 24px; }

/* =====================================================================
   Phase A.1: Schedule month-switch Carousel (2026-05-11、Phase A の VT API
   経路を全 revert + 置換)
   ---------------------------------------------------------------------
   3-cell 指追従 carousel。`.schedule-carousel-track` の transform: translateX
   を pointer events で更新、release 時に距離 30% OR 速度 0.5 px/ms で snap。
   `is-animating` クラス切替で transition (220ms cubic-bezier(0.4, 0, 0.2, 1))
   を on/off。月ナビ (.schedule-month-nav) は本ブロックの外側 = .schedule-page
   直下に固定配置 (carousel と兄弟、流れない)。
   ===================================================================== */
.schedule-carousel-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    touch-action: pan-y;  /* 縦は browser スクロール、横は JS が pointer events で拾う */
    user-select: none;
    -webkit-user-select: none;
}

.schedule-carousel-track {
    display: flex;
    width: 300%;                          /* 3 cells × 100vw */
    will-change: transform;
    transform: translateX(-33.3333%);     /* 中央 cell を初期表示 */
}

.schedule-carousel-track.is-animating {
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.schedule-carousel-cell {
    flex: 0 0 33.3333%;                   /* 各 cell = track の 1/3 = viewport 1 つぶん */
    min-width: 0;                         /* flex children の縮小許可 */
    box-sizing: border-box;
    /* Phase A.2.6.1 (2026-05-13): swipe 中に隣 cell が flush で touch する違和感を
       内側 padding 4px each side で解消、視覚的に 8px gap。border-box なので
       width は不変、translateX(-33.3333%) math も無変更で safe。 */
    padding: 0 4px;
}

/* prev/next の skeleton は init で content が埋まる前提。空のとき高さで
   layout がガタつかないように min-height: 0 を明示。 */
.schedule-carousel-cell:empty {
    min-height: 0;
}

/* --- 月ナビ --- */
.schedule-month-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0 8px;
}
.schedule-month-prev,
.schedule-month-next {
    font-size: 18px;
    line-height: 1;
    padding: 4px 12px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-decoration: none;
    user-select: none;
}
.schedule-month-prev:hover,
.schedule-month-next:hover { background: var(--color-primary-light); }
.schedule-month-label {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}
.schedule-today-jump {
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    text-decoration: none;
}
/* --- カレンダーグリッド --- */
.schedule-calendar {
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;  /* 縦スクロールは許可、横は JS が拾う */
    margin-bottom: 16px;
}
.schedule-weekday-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}
.schedule-weekday.is-sun { color: var(--color-weekday-sun); }
.schedule-weekday.is-sat { color: var(--color-weekday-sat); }

.schedule-grid {
    /* Phase δ-1 (2026-05-12): 子要素を `.schedule-week-row` に変更。grid 自体は
       週 row が担当、`.schedule-grid` は単なる垂直 container + 左 grid 線担当。 */
    border-left: 1px solid var(--border);
}
.schedule-week-row {
    /* Phase δ-1 (2026-05-12): 週 row = 7 列 grid + position: relative。
       連泊帯 overlay (.schedule-band-layer) の anchor。 */
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.schedule-cell {
    position: relative;
    min-height: 80px;
    padding: 4px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
}
/* Phase A.2.1 (2026-05-11): is-other-month の gray-out 撤去。
   trailing/leading セルは "M/D" 表示で「カレンダーが続いている」見え方にする
   (Sato-san feedback: 「色がついてないので違和感、日付自体は生きているはず」)。
   class は cell wrapper に残置 (将来の別治療や is-other-month 限定 selector の
   フックとして温存)、視覚的 demotion のみ削除。 */
.schedule-cell.is-today {
    background: var(--color-primary-light);
}
.schedule-cell.is-today .schedule-cell-day {
    font-weight: 700;
    color: var(--color-primary-dark);
}
/* Phase A: 単タップで選択された日。
   Phase A.2.2' (2026-05-12): 凹んだ感を inset shadow で表現 (light/dark で alpha 別)。
   `.is-today.is-selected` の outline は撤去 → selected は inset shadow に統一、
   today は font-weight 700 + --color-primary-light bg (上のルール) で識別、両方
   重なるときは selected bg + inset shadow が today bg を上書きする。 */
.schedule-cell.is-selected {
    background: var(--schedule-selected-bg);
    color: var(--schedule-selected-fg);
    box-shadow: inset 0 1px 3px var(--schedule-selected-shadow);
}
.schedule-cell-day { display: block; line-height: 1.3; }

/* Phase B (2026-05-12): cell の曜日色 + 祝日色。.schedule-cell-day (= 日付数字) のみ
   色を変える (cell 自体の bg は is-today / is-selected が握っているので干渉しない)。
   selector 順は weekday(土/日) → 祝日 で、祝日が同 cell の土曜青を override する。 */
.schedule-cell[data-weekday="6"] .schedule-cell-day { color: var(--color-weekday-sun); }
.schedule-cell[data-weekday="5"] .schedule-cell-day { color: var(--color-weekday-sat); }
.schedule-cell[data-holiday="1"] .schedule-cell-day { color: var(--color-weekday-sun); }

/* PC: 日付の下に祝日名を小さく表示。SP は @media で hide。 */
.schedule-cell-holiday {
    display: block;
    font-size: 10px;
    line-height: 1.2;
    color: var(--schedule-holiday-name-muted);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-cell-titles {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    font-size: 11px;
}
.schedule-cell-titles li {
    margin-bottom: 1px;
    border-radius: 3px;
    overflow: hidden;
}
.schedule-cell-titles li a {
    display: block;
    padding: 1px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    background: var(--schedule-planned-bg);
    color: var(--schedule-planned-fg);
}
.schedule-cell-titles li.status-done a { background: var(--schedule-done-bg); color: var(--schedule-done-fg); }
.schedule-cell-titles li.status-cancelled a {
    background: var(--schedule-cancelled-bg);
    color: var(--schedule-cancelled-fg);
    text-decoration: line-through;
}
/* Phase A.2.5 (2026-05-14): color_index 着色 (cell PC title list)。
   `status-X` rule を source order で上書き。`status-cancelled` の line-through は
   並列 rule のため visual に維持される (色だけ color-N 経路で変わる)。 */
.schedule-cell-titles li.color-0 a { background: var(--schedule-color-0); color: var(--schedule-color-0-fg); }
.schedule-cell-titles li.color-1 a { background: var(--schedule-color-1); color: var(--schedule-color-1-fg); }
.schedule-cell-titles li.color-2 a { background: var(--schedule-color-2); color: var(--schedule-color-2-fg); }
.schedule-cell-titles li.color-3 a { background: var(--schedule-color-3); color: var(--schedule-color-3-fg); }
.schedule-cell-titles li.color-4 a { background: var(--schedule-color-4); color: var(--schedule-color-4-fg); }
.schedule-cell-more { font-size: 10px; color: var(--text-secondary); text-align: right; padding: 0 3px; }

/* Phase A.2.5 (2026-05-14): SP 3-dot encoding (色ラベルと独立、件数密度を表現)。
   container `.schedule-cell-dots` に 1-3 個の inner `.schedule-cell-dot--{green|yellow|red}`、
   16 件超で `.schedule-cell.is-saturated` で red dot が pulse animation。 */
.schedule-cell-dots {
    display: none;
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    gap: 2px;
    align-items: center;
}
.schedule-cell-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.schedule-cell-dot--green { background: var(--schedule-dot-low); }
.schedule-cell-dot--yellow { background: var(--schedule-dot-mid); }
.schedule-cell-dot--red { background: var(--schedule-dot-high); }

@keyframes schedule-dot-pulse {
    0%, 100% { opacity: 1.0; }
    50% { opacity: 0.55; }
}
.schedule-cell.is-saturated .schedule-cell-dot--red {
    animation: schedule-dot-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .schedule-cell.is-saturated .schedule-cell-dot--red {
        animation: none;
        box-shadow: 0 0 4px var(--schedule-dot-high);
    }
}

@media (max-width: 600px) {
    .schedule-cell { min-height: 52px; padding: 3px 2px; }
    .schedule-cell-titles { display: none; }
    .schedule-cell-dots { display: inline-flex; }
    /* Phase B: SP は cell 内の祝日名を hide (space 過小)、日付数字だけ赤くなる。
       祝日名は選択日 list の heading 側 (schedule-selected-day-holiday) で見せる. */
    .schedule-cell-holiday { display: none; }
}

/* =====================================================================
   Phase δ-1 (2026-05-12): 連泊帯 (multi-day band) overlay 層
   ---------------------------------------------------------------------
   Method B 採用: 週 row scope の position: absolute overlay。`.schedule-week-row`
   内の右端 sibling (`.schedule-band-layer`) に segment 群を `<div>` で配置。
   band は日付数字の **下** に配置 (top: 22px PC / 20px SP) し、日付数字と
   overlap させない方針 = z-index トリック不要、cell tap が pointer-events
   none 経由で band 範囲を素通り、かつ tap target 領域 (= 日付数字エリア)
   が overlay layer の外に出るため stacking context の影響を受けない。
   pointer-events: none で cell tap (ripple / bottom sheet) を阻害しない。
   Phase δ-1 hotfix #1 (2026-05-12): 当初 top: 4px / height: 16px で日付数字に
   重ね + cell-day z-index: 2 設計だったが、本番で「カレンダー日付タップが
   反応しない」 bug を Sato-san が報告。z-index による stacking context が
   特定 iOS Safari / PWA chromium ビルドで hit-test を狂わせる挙動を疑い、
   band 位置を日付直下 (オーバーラップなし) に移行 = z-index トリック撤廃。
   Phase δ-1 hotfix #2 (2026-05-12 marker): 「ビビッド表現したらやりすぎ、
   いい感じの薄いマーカーで透明感」発言から蛍光ペン美学に再移行:
   - top: 22 → 0 (cell 上端 flush、紙の縁から marker stroke が始まる感)
   - height: 8/6 → 6/5 (細い一筆、太い band では「線を引いた」感が出ない)
   - opacity: var(--schedule-band-opacity) (= 0.35 initial、下地 cell の
     is-today / is-selected / 土日色付き / holiday color が透けて紙の
     凹凸を再現)。日付数字との 2px overlap は 35% alpha で問題なし
   - border-radius: 0 維持 (square edge の方が marker stroke のメタファ)
   ===================================================================== */
.schedule-band-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    pointer-events: none;
}
.schedule-band-segment {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--schedule-color-0);
    opacity: var(--schedule-band-opacity);
    border-radius: 0;  /* 連結感優先、cell 境界をまたぐ */
    box-sizing: border-box;
    pointer-events: none;  /* 親 layer の inherit 念のため明示、iOS Safari の inherit fallback 防衛 */
}
.schedule-band-segment.color-0 { background: var(--schedule-color-0); }
.schedule-band-segment.color-1 { background: var(--schedule-color-1); }
.schedule-band-segment.color-2 { background: var(--schedule-color-2); }
.schedule-band-segment.color-3 { background: var(--schedule-color-3); }
.schedule-band-segment.color-4 { background: var(--schedule-color-4); }
.schedule-band-segment.is-band-start { /* reserved */ }
.schedule-band-segment.is-band-end { /* reserved */ }

@media (max-width: 600px) {
    /* SP: marker は更に細く (5px) で SP cell 高 (min-height 52px) に対する比率を維持 */
    .schedule-band-layer {
        top: 0;
        height: 5px;
    }
    /* Phase δ-1 hotfix-2: SP cell 幅が狭い (約 50-55px) ので shift も縮小、
       最大 in_slot + out 同時で計 3*shift = 18px 削減、cell 幅の半分以下に収まる。 */
    :root {
        --schedule-band-shift: 6px;
    }
}

/* --- Phase A: 選択日の予定リスト (グリッドと月リストの間) ---
   月リストと視覚的に揃え、見出しは選択日付の "M/D(曜)"。Phase B 以降で
   祝日名 / 六曜 / 月相を見出し行に追加していく前提。空ならヘッダのみ表示。 */
.schedule-selected-day-list { margin-top: 16px; }
.schedule-selected-day-list:empty { display: none; }
.schedule-selected-day-heading {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--text-secondary);
}
.schedule-selected-day-list.is-empty .schedule-selected-day-heading {
    color: var(--text-disabled);
}
/* Phase B (2026-05-12): 選択日 heading の祝日名 span (JS が DOM dataset から
   読んで append。例: "5/3(日) 憲法記念日"). 祝日 fg で本文より少し小さく、
   margin で日付と区切る. */
.schedule-selected-day-holiday {
    margin-left: 6px;
    color: var(--schedule-holiday-fg);
    font-size: 13px;
    font-weight: 500;
}

/* --- グリッド下の月リスト --- */
.schedule-month-list { margin-top: 16px; }
.schedule-month-list-heading {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--text-secondary);
}
.schedule-list-items { list-style: none; padding: 0; margin: 0; }
.schedule-list-item {
    border-left: 4px solid var(--schedule-planned-fg);
    /* Phase γ (2026-05-12): card 間 margin 6px → var(--sp-sm) 8px、密度緩和。 */
    margin-bottom: var(--sp-sm);
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0 4px 4px 0;
    /* Phase γ (2026-05-12): flex-direction column に変更。DOM 順 (IN link →
       icons → memo → OUT row) で自然に縦並び、border-left 4px が card 全高
       に渡って自然描画 = IN→OUT 縦帯連続が成立。
       旧 flex-wrap:wrap + order:99 hack (A.2.8) は廃止。 */
    display: flex;
    flex-direction: column;
    /* Phase ε-1 (2026-05-12): 1 行 intraday card が時刻表中で詰まって見える対策。
       min-height = floor、multi-line content は自然 grow して問題なし。
       Phase ε-4 (2026-05-12): memo なし card は .no-memo で 36px に縮小 override。 */
    min-height: var(--list-card-min-height);
}
/* Phase ε-4 (2026-05-12): memo なし card の縮小 min-height。template で
   `{% if not (s.notes and s.notes.strip()) %} no-memo{% endif %}` 付与。
   day-list (JS-built) は本 phase touch なし (ε-3 維持要件)。 */
.schedule-list-item.no-memo {
    min-height: var(--list-card-min-height-nomemo);
}
.schedule-list-item > .schedule-list-link {
    flex: 1;
    min-width: 0;
}
.schedule-list-item.status-done { border-left-color: var(--schedule-done-fg); }
.schedule-list-item.status-cancelled { border-left-color: var(--schedule-cancelled-fg); opacity: 0.75; }
/* Phase A.2.5 (2026-05-14): color_index 着色 (selected-day list + month list)。
   `status-X` rule を source order で上書き、status-cancelled の opacity: 0.75 は
   並列で効くため visual 維持。color-0 は background が pale なので border には
   text fg (-fg) を使う = 見やすさ確保。他 5 色は背景濃度十分で main bg そのまま。 */
.schedule-list-item.color-0 { border-left-color: var(--schedule-color-0-fg); }
.schedule-list-item.color-1 { border-left-color: var(--schedule-color-1); }
.schedule-list-item.color-2 { border-left-color: var(--schedule-color-2); }
.schedule-list-item.color-3 { border-left-color: var(--schedule-color-3); }
.schedule-list-item.color-4 { border-left-color: var(--schedule-color-4); }
/* Phase δ-5 hotfix-4 (2026-05-12, hotfix-5 で revise): 同日連続 card 間の
   border 細分化。Sato-san: 「連泊カードは線引いていいけど、そうじゃないのは
   薄い線すら消して近づけて短縮していい」。
   - 単発同士の同日 continuation: border-top 完全除去、margin-bottom も 0 で
     詰めて短縮 (薄い線すら消す)
   - 連泊カード (is-multi-day): border-top を separator 色で引いて存在感を
     示す (= 上端のマーカー)
   - 連泊カードの**直後**にある同日 continuation: border-top 復活 (= 連泊
     カードの下端も separator で囲んで bracket)
   結果: 単発同士は線なし近接、連泊カードは上下 separator で boundary 明示。 */
/* Phase ε-8 (2026-05-12): 旧 `.is-day-continuation` (δ-5 hotfix-4 由来、ε-6 で
   namespace prev tracking 撤廃時に巻き添えで template emit 撤去) を復活し、
   ε-6 の `groupby` 構造に合わせて `.is-group-continuation` に rename。
   `loop.first` 判定で group 内 2 件目以降に付与、同日 card 合体機構を再構築。
   下記 4 rule (δ-5 hotfix-4/6/7 由来の機能) を全て継承、機能保持の rename:
   - base rule = border-top + margin-top 除去 (連続見せ)
   - .schedule-list-link 内 padding 詰め (δ-5 hotfix-7 Fix X、`--schedule-
     continuation-padding` token で行間短縮)
   - `:has(+ ...)` 双方向 border-bottom / margin-bottom 除去 (δ-5 hotfix-6 Fix P、
     前 card の薄線も消す)
   - `.is-multi-day +` で連泊 card 後の continuation の border-top 復活 (δ-5
     hotfix-6 Fix P、連泊 boundary marker) */
.schedule-list-item.is-group-continuation {
    border-top: none;
    margin-top: 0;
}
.schedule-list-item.is-group-continuation .schedule-list-link {
    padding-top: var(--schedule-continuation-padding);
    padding-bottom: var(--schedule-continuation-padding);
}
.schedule-list-item:has(+ .schedule-list-item.is-group-continuation) {
    margin-bottom: 0;
    border-bottom: none;
}
.schedule-list-item.is-multi-day {
    border-top: 1px solid var(--schedule-list-day-separator);
}
.schedule-list-item.is-multi-day + .schedule-list-item.is-group-continuation {
    border-top: 1px solid var(--schedule-list-day-separator);
}

/* Phase ε-6 (2026-05-12): 月リスト日付見出し行 (`<li class="schedule-list-date-heading">`)。
   `<ul>` 内 sibling として独立配置、card じゃない (border / background / min-height
   なし)。Sato-san スケッチ通り「日付テキストは card の border 外」を構造的に達成。
   見出し右側に連泊 in-progress pill (max 3、ellipsis、改行禁止) を横並び。
   ε-3 `.schedule-list-date-tag` (absolute 枠外配置) / ε-4 `.schedule-list-date-row`
   (連泊 IN 上の別行) / ε-5 `.schedule-list-item-header` (`<li>` 内ヘッダ) の連続
   誤読を本 phase で構造的に終結、全 dead code を撤去。 */
.schedule-list-date-heading {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 4px 4px;
    margin-top: var(--sp-md);
    margin-bottom: var(--sp-xs);
    background: transparent;
    border: none;
    min-height: auto;
    cursor: pointer;
}
.schedule-list-date-heading:first-child {
    margin-top: 0;
}
.schedule-list-date-heading-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
    white-space: nowrap;
}
.schedule-list-date-heading[data-weekday="5"] .schedule-list-date-heading-label {
    color: var(--color-weekday-sat);
}
.schedule-list-date-heading[data-weekday="6"] .schedule-list-date-heading-label {
    color: var(--color-weekday-sun);
}
.schedule-list-date-heading[data-holiday="1"] .schedule-list-date-heading-label {
    color: var(--color-weekday-sun);
}
/* 連泊 in-progress pill 横並び container。max 3 件は template 側で slice、
   3 件超は server 側で drop されているので overflow には到達しない想定だが、
   防御的に `overflow: hidden` + `flex-wrap: nowrap` で 1 行固定。 */
.schedule-list-in-progress-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
}
/* 各 pill。display only (click / hover / cursor 効果なし)、長すぎる title は
   ellipsis で後ろカット。色は `.schedule-day-tag` (当日リスト pill) と同 token
   pattern を流用、`--schedule-color-N` の半透明 bg + `--schedule-color-N-fg`
   フル不透明文字。 */
.schedule-list-in-progress-pill {
    font-size: 12px;
    line-height: 1.4;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--schedule-color-0) calc(var(--schedule-tag-opacity) * 100%), transparent);
    color: var(--schedule-color-0-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12em;
    cursor: default;
}
.schedule-list-in-progress-pill.color-0 {
    background-color: color-mix(in srgb, var(--schedule-color-0) calc(var(--schedule-tag-opacity) * 100%), transparent);
    color: var(--schedule-color-0-fg);
}
.schedule-list-in-progress-pill.color-1 {
    background-color: color-mix(in srgb, var(--schedule-color-1) calc(var(--schedule-tag-opacity) * 100%), transparent);
    color: var(--schedule-color-1-fg);
}
.schedule-list-in-progress-pill.color-2 {
    background-color: color-mix(in srgb, var(--schedule-color-2) calc(var(--schedule-tag-opacity) * 100%), transparent);
    color: var(--schedule-color-2-fg);
}
.schedule-list-in-progress-pill.color-3 {
    background-color: color-mix(in srgb, var(--schedule-color-3) calc(var(--schedule-tag-opacity) * 100%), transparent);
    color: var(--schedule-color-3-fg);
}
.schedule-list-in-progress-pill.color-4 {
    background-color: color-mix(in srgb, var(--schedule-color-4) calc(var(--schedule-tag-opacity) * 100%), transparent);
    color: var(--schedule-color-4-fg);
}

/* Phase δ-5 hotfix-8 Fix AB (2026-05-12): SVG checkout icon baseline 定 deterministic
   fix。hotfix-5 (-3px) / hotfix-6 (-3px) / hotfix-7 (vertical-align: middle) いずれも
   font metric 依存で実機ずれ残留。最終解: parent inline-flex + align-items: center +
   line-height: 1 で flex container baseline を確定、icon は `display: block` (inline
   phantom space 回避) + 明示 14x14 サイズ。font ascender / viewBox 解釈不一致が
   絡んでも flex 整列で安定。 */
/* Phase ε-9 (2026-05-13): 連泊 OUT 行を `.schedule-list-row-reservation-info` に
   restructure、checkin/checkout 両 SVG が flex item として inline-flex に並ぶ
   構造。`.schedule-checkout-icon` を display: block → inline-block に変更で parent
   inline-flex 内 baseline 安定 + reservation-info の flex container と整合。
   新規 `.schedule-checkin-icon` は CSS scaleX(-1) で checkout を視覚反転、 `→[`
   の逆 `[→` の鏡像方向 = 入室 (checkin) を表現。 */
.schedule-checkout-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.schedule-checkin-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    transform: scaleX(-1);
    flex-shrink: 0;
}
/* Phase δ-5 hotfix-8 Fix AA (2026-05-12): intraday end_time を IN と同じ time-col
   位置に戻す。hotfix-7 Fix V の flex space-between (= 右端寄せ) は Sato-san に
   「時刻は時刻の位置のまま」と却下、最初の方針 (= IN と同じ 2-col grid で別行
   emit) に revert、ただし「最後の行だけ浮いて改行された」問題を解決するため
   body block と end link の間の margin/padding を**徹底ゼロ化**:
   - `.is-intraday-end` (IN link と同じ `.schedule-list-item-link` 基底) を end 行に付与
   - body の memo を margin/padding 完全 0 で前 link 直下に密着
   - end 行 link 自体も margin-top: 0、`.schedule-list-item-link.is-out-row` の
     `padding-top: var(--sp-xs)` (= 4px) も is-intraday-end には適用しない
   - body の最終行 text は title-col に muted color (`--muted`) で配置 */
.schedule-list-item-link.is-intraday-end {
    margin-top: 0;
    padding-top: 0;
    /* Phase ε-2 (2026-05-12): 末尾行 link の下 padding も 0 で memo と vertical
       rhythm 統一。前 IN link の memo (`margin: 0`) と密着、card 全体高さの
       浮きを抑止。 */
    padding-bottom: 0;
}
/* Phase ε-1 (2026-05-12): specificity 0,1,0 (.schedule-list-item-title--muted) では
   後段 0,1,0 (.schedule-list-item-title) に source order で負け、font-weight: 500 が
   memo 最終行 (intraday end 行) に残り bold 化していた。scoped compound selector
   (0,2,0) で確実に override。memory `feedback_css_specificity_scoped` の pattern。 */
.schedule-list-item-title.schedule-list-item-title--muted {
    color: var(--text-secondary);
    font-weight: normal;
}
/* Phase ε-2 (2026-05-12): B card (intraday spanned) の末尾行 title を memo と
   font-size / line-height 統一。Phase ε-1 で font-weight は normal 化済 (太字回避)、
   font-size 13px / line-height 1.4 は `.schedule-list-item-memo` (line 1601) と
   同値で memo continuation 行のように自然な vertical rhythm を作る。`.is-intraday-
   end` link 内に scope することで C/D (連泊) 系の `.is-out-row` title には波及しない。 */
.schedule-list-item-link.is-intraday-end .schedule-list-item-title {
    font-size: 13px;
    line-height: 1.4;
}
.schedule-list-item-link.has-intraday-time .schedule-list-item-memo,
.schedule-list-item-link.is-intraday-end + * .schedule-list-item-memo,
.schedule-list-item-link.has-intraday-time + .schedule-list-item-link.is-intraday-end {
    /* 連続する body 〜 end 行を密着させる safety override */
    margin: 0;
}
/* Phase ε-3 (2026-05-12): B card (intraday spanned) IN link の padding-bottom を
   memo の body-col gap (= 4px) と整合。base `.schedule-list-item-link { padding:
   8px 12px }` で IN link 下 padding が 8px、`.is-intraday-end` 上 padding が 0
   (ε-2)、結果 IN body 〜 end body 間距離が 8px となり memo continuation の
   vertical rhythm (= 4px、`.schedule-list-item-body-col { gap: var(--sp-xs) }`)
   と乖離していた。`.has-intraday-time` (= B card の IN link 限定) で
   padding-bottom: 4px に縮め、IN body 〜 end body 間 = 4 + 0 = 4px で memo 内
   title-row → memo gap と同 rhythm を作る。 */
.schedule-list-item-link.has-intraday-time {
    padding-bottom: var(--sp-xs);
}

/* Phase A.2.7 (2026-05-14): selected-day list row 内 📍/🔗 icon (location_text の
   Maps URL 自動検出 + url field 非空 を条件に表示)。row link の右側に flex item
   として配置。tap = window.open(href, '_blank') + stopPropagation で row tap
   (sheet edit-mode open) を抑止。
   selected-day list 限定 = 朝の最短経路 (calendar grid cell + 月リストは density
   過多回避で icon 非表示、scope contained)。
   icon 32x32 = WCAG 推奨 minimum tap target 確保。 */
/* Phase γ-2 (2026-05-12): 当日リスト IN/OUT link を 2 列 grid 化。
   1 列目 = 時刻列 (5em 固定幅、右端に薄い border-right で時刻表感)、
   2 列目 = body-col (title-row + icons inline + memo 縦積み)。
   memo 左端 = title 左端 = 2 列目 開始位置 で自然視覚一致。
   旧 Phase γ flex row + 独立 .schedule-list-item-time-out-row は撤去。 */
.schedule-list-item-link {
    display: grid;
    /* Phase γ-2 hotfix (2026-05-12): 5em → 3.5em で HH:MM fit。
       Phase ε-7 (2026-05-12): 当日リスト link col1 を `--list-date-col-width` に統一。
       Phase ε-8 (2026-05-12): gap sp-sm → sp-xs に詰め。
       Phase ε-9 hotfix (2026-05-13): grid-template-rows: auto auto で 2 行化、
       1 行目 = [time-col][body-col]、2 行目 = reservation-info (grid-column: 2 / -1
       で title 列下、time-col 列をスキップ)。reservation-info 不在の card (A/B/Task)
       は 2 行目が 0 高さで描画されない (= layout regression なし)。 */
    grid-template-columns: var(--list-date-col-width) 1fr;
    grid-template-rows: auto auto;
    gap: var(--sp-xs);
    padding: var(--sp-sm) var(--sp-md);
    text-decoration: none;
    color: var(--text-primary);
}
/* Phase ε-9 (2026-05-13): 当日リスト `.is-out-row` link を廃止、
   `.is-reservation-info` link に置換。関連 rule 全削除:
   - `.is-multi-day .is-out-row .time-col` (multi-day OUT 左寄せ rule)
   - `.is-out-row { padding-top: var(--sp-xs) }`
   - `:has(+ .is-out-row) { padding-bottom: 0 }`
   - `.is-out-row:hover { background: transparent }`
   `.is-reservation-info` は別 padding / flex 構造で扱うため上記不要。 */
.schedule-list-item-link:hover {
    background: var(--color-primary-light);
}

.schedule-list-item-time-col {
    /* Phase γ-3 (2026-05-12): 時刻文字 左寄せ (旧 flex-end + padding-right
       による右寄せ + 縦線右端を廃止)、border-right は削除して下方向
       ::after 縦線方式に切替。position: relative で ::after の anchor。
       日跨ぎ "5/15 11:00" でも左寄せ統一で位置ブレなし (tabular-nums)。 */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    color: var(--text-secondary);
    position: relative;
}
.schedule-list-item-body-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    min-width: 0;
}

.schedule-list-item-time {
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* Phase ε-7 (2026-05-12): 当日リスト time-col も月リストと同 ellipsis 動作で
       cross-month overflow を後ろカット。 */
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Phase ε-9 (2026-05-13): `.schedule-list-item-time--out` 廃止 (連泊 OUT link 撤回)。
   SVG inline 整列は `.schedule-list-reservation-out` (下段) に移譲。 */

.schedule-list-item-title-row {
    /* title + icons inline。長くて wrap したら title 左端から改行
       (= 親 body-col の左端から)。 */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-sm);
    min-width: 0;
}
.schedule-list-item-title {
    font-weight: 500;
    color: var(--text-primary);
    min-width: 0;
    /* title 長い場合は wrap (ellipsis ではなく、改行で表示)。 */
    word-break: break-word;
}

/* Phase γ-3 (2026-05-12): 時刻列の縦線は「IN 時刻文字直下 → OUT 行上端」
   の ::after 1 本に変更。IN/OUT 行ごとに独立 border-right で描画する
   旧方式 (Phase γ-2) は途切れ感が出るため廃止。:has() で「OUT 後続
   IN link」のみ縦線、end_time なし予定では出ない。日跨ぎ予定でも同じ
   表示で統一 (Sato-san 指示「ENDとの途切れ気にしない / 統一化」)。
   :has() は modern browser 対応 (iOS 15.4+ / Chrome 105+ / Firefox 121+)、
   PWA 想定 client で安全範囲。 */
/* Phase ε-9 (2026-05-13): `:has(+ .is-out-row)` selector 部分削除 (OUT link 廃止
   に伴い)。`.has-intraday-time` (B card 用) のみ保持、B card の縦線描画は維持。 */
.schedule-list-item-link.has-intraday-time
  .schedule-list-item-time-col::after {
    /* Phase δ-5 hotfix-7 Fix V (2026-05-12): intraday は OUT link が emit され
       ないため `:has(+ .is-out-row)` 経由では縦線描画されない。`.has-intraday-
       time` modifier が IN link についている時も同じ縦線を発火する rule を追加。
       intraday の body 最終行 (end_time inline-end) まで縦線が垂直に伸びる。 */
    content: '';
    position: absolute;
    /* 時刻文字 "HH:MM" (5 字 × tabular-nums ≒ 3em) の中央寄せ位置。
       3.5em 列内で 1.25em 付近 = colon の真下。実機で微調整余地あり。 */
    left: 1.25em;
    top: 1.6em;
    /* card 内境界を跨いで OUT link 上端まで到達。OUT link の padding-top
       (= sp-xs) を相殺するため calc 負値で extend。 */
    bottom: calc(-1 * var(--sp-xs));
    width: 1px;
    background: var(--border);
}

.schedule-list-item-icons {
    display: inline-flex;
    align-items: center;
    /* Phase γ-2 (2026-05-12): icons は title-row 内に inline 配置に変更、
       padding を 0 に (title-row の gap で title との距離を確保)。 */
    gap: 4px;
    padding: 0;
    flex-shrink: 0;
}
.schedule-list-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Phase γ (2026-05-12): 32x32 → 28x28 visual 軽量化。WCAG 推奨
       minimum touch target 32x32 は ::after pseudo overlay で hit-box
       拡張して compliance 維持。 */
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: 5px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    color: inherit;
    font-family: inherit;
    position: relative;
}
.schedule-list-item-icon::after {
    /* Phase γ (2026-05-12): 28x28 visual の周囲 2px overlay で 32x32
       tap target 確保。pointer-events:auto で透明 overlay でも click が
       button に届く。CSS のみで実現、JS 無変更。 */
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    pointer-events: auto;
}
.schedule-list-item-icon:hover {
    background: var(--color-primary-light);
}
.schedule-list-item-icon:active {
    background: var(--color-primary-light);
    opacity: 0.7;
}

/* Phase A.2.8 (2026-05-14): selected-day list row 内 memo preview。
   notes が non-empty の row でのみ <p> が出現、3 行 clamp + white-space: pre-line
   で改行保持。tap で row 親要素の click に伝播 = sheet edit-mode open (A.2.6 動作)、
   icon の stopPropagation との対比で「memo は読みたい → 詳細は sheet で」 UX。
   旅程表 / プログラム化 UX を当日リスト 1 surface で完結させる狙い。 */
.schedule-list-item-memo {
    /* Phase γ-2 (2026-05-12): memo は body-col 内に置かれるため padding 不要。
       title-row と同じ親 (body-col) の左端から始まり、視覚的に title と揃う。 */
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}
/* Phase δ-5 (2026-05-12): `.schedule-list-link` を block container 化、内部の
   `.schedule-list-row-in` (+ 連泊時 `.schedule-list-row-out`) が 5 列 grid。
   1 schedule = 1 card、card 内に IN/OUT 2 行を縦積み、OUT 行 title は
   muted「リターン」 placeholder。 */
.schedule-list-link {
    display: block;
    /* Phase ε-6 (2026-05-12): `.schedule-list-item-header` (ε-5 hotfix) 撤回に
       伴い、card body の padding を 8px 12px (Phase δ-5 base) に復元。card は
       自前で四方 padding を持ち、ヘッダ行 (`.schedule-list-date-heading`、`<ul>`
       内 sibling) と完全分離。 */
    padding: 8px 12px;
    text-decoration: none;
    color: var(--text-primary);
}
/* Phase δ-5 hotfix-6 Fix Q (2026-05-12): row-in/row-out から date 列を除去、
   time / title / customer / icons の 4 列に簡素化。date は absolute 配置の
   `.schedule-list-date-tag` で card 左上に表示、time/title 開始位置が全 card
   で揃う (Sato-san「インデントずれる、日付だけタグっぽいカードにして左上に」)。 */
/* Phase ε-7 (2026-05-12): 月リスト row-in / row-out の col1 (= 日付欄) を新
   token `--list-date-col-width` (6.5em) で固定。全 card type (A/B/C/D + Task)
   で title 列の開始位置が揃い、Sato-san dogfood の「title 開始位置が揃わず気持ち
   悪い」要求を解決。ε-6 `.is-multi-day .schedule-list-row-in { auto 1fr auto auto }`
   override + ε-2 `.schedule-list-row-out { auto 1fr auto auto }` PC override を
   両方撤回、PC + SP base に固定幅 token で統一。
   row-in は memo preview 行 (Phase ε-7 追加 2、`.schedule-list-memo-preview`) を
   2 行目に置く想定で `grid-template-rows: auto auto`、memo 不在時は 2 行目は
   0 高さで描画されないため layout regression なし。row-out は memo preview なし
   = 1 行のみで自然描画。 */
/* Phase ε-9 (2026-05-13): `.schedule-list-row-out` を廃止、`.schedule-list-row-
   reservation-info` (連泊 reservation 行) に置換。
   Phase ε-9 hotfix (2026-05-13): row-in を `grid-template-rows: auto auto auto` で
   3 行化、1 行目 = time/title/customer/attached、2 行目 = memo preview (grid-row:
   2)、3 行目 = reservation-info (grid-row: 3、grid-column: 2 / -1 で title 列下)。
   memo / reservation-info 不在時は対応行 0 高さ。 */
.schedule-list-row-in {
    display: grid;
    grid-template-columns: var(--list-date-col-width) 1fr auto auto;
    gap: var(--sp-xs);
    align-items: center;
    grid-template-rows: auto auto auto;
}
.schedule-list-date { color: var(--text-secondary); font-size: 12px; }
/* Phase B (2026-05-12): 月リスト の date prefix を曜日色 / 祝日色に塗る。本文は
   text-secondary だが weekday/holiday 属性があれば override。 */
.schedule-list-date[data-weekday="6"] { color: var(--color-weekday-sun); }
.schedule-list-date[data-weekday="5"] { color: var(--color-weekday-sat); }
.schedule-list-date[data-holiday="1"] { color: var(--color-weekday-sun); }
.schedule-list-holiday-name {
    font-size: 11px;
    color: var(--schedule-holiday-name-muted);
    margin-left: 4px;
}
/* Phase ε-7 (2026-05-12): 月リスト time-col content (= 日付欄ワイド)。
   `--list-date-col-width` (6.5em) 内に fit、`white-space: nowrap` + ellipsis で
   cross-month overflow (`5/13(水) 14:15` 約 115px) を後ろカット。`tabular-nums`
   で時刻文字幅安定、`text-align: left` で短い表記 (`14:15` / 空) を左寄せ揃え。 */
.schedule-list-time {
    color: var(--text-secondary);
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
/* Phase ε-9 (2026-05-13): `.schedule-list-time--out` 廃止 (OUT 行構造撤回)。
   SVG inline 整列は新 `.schedule-list-reservation-in / -out` に移譲 (下記)。 */
.schedule-list-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Phase ε-9 hotfix (2026-05-13): reservation-info を月リスト row-in 内 / 当日リスト
   item-link 内 の grid item として配置。月リスト = `.schedule-list-row-in` 3 行 grid
   の 3 行目、当日リスト = `.schedule-list-item-link` 2 行 grid の 2 行目に。両 context
   で `grid-column: 2 / -1` (= title 列以降、time-col 列スキップ) は共通、`grid-row`
   は context 別 selector で指定 (下記)。ε-9 で導入した独立 `.is-reservation-info`
   link は撤回、JS は IN link 内 grid item として組み込み、CSS rule も削除。 */
.schedule-list-row-reservation-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding-top: var(--sp-xs);
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    grid-column: 2 / -1;
}
/* 月リスト: row-in (3 行 grid) の 3 行目 */
.schedule-list-row-in > .schedule-list-row-reservation-info {
    grid-row: 3;
}
/* 当日リスト: item-link (2 行 grid) の 2 行目 */
.schedule-list-item-link > .schedule-list-row-reservation-info {
    grid-row: 2;
}
.schedule-list-reservation-in,
.schedule-list-reservation-out {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    white-space: nowrap;
}

/* Phase ε-7 (2026-05-12): 月リスト card に memo 1 行目を preview として 2 行目に表示。
   Sato-san dogfood で「memo の最初の 1 行が見えると card を見ただけで内容が分かる」
   要求。row-in の `grid-template-rows: auto auto` の 2 行目を占有、`grid-column: 2 / -1`
   で title 列以降を span (time-col 列はスキップ、左端 title と揃う)。memo 不在時は
   template で span 自体が emit されず、grid 2 行目は 0 高さで描画されない (= no-memo
   card と同等高さ)。 */
.schedule-list-memo-preview {
    grid-column: 2 / -1;
    grid-row: 2;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Phase δ-3 (2026-05-12): 多日イベントの期間表記 inline span (`→ M/D`)。
   月リスト future/past 両 section の row template で title 直後に挿入、
   `end_date and end_date != date` 条件付き render。grid auto-placement で
   PC は title と customer の間、SP は次行に流れる。色は secondary muted で
   title を圧迫しない、`white-space: nowrap` で「→」と「M/D」が分断されない。 */
.schedule-list-period {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: 6px;
    white-space: nowrap;
}
/* Phase δ-4 (2026-05-12): 月リスト end 行 (多日 event の end_date 行)。
   現状 visual 差別化なし — title 末尾の ↵ mark が signal を担う。class
   フック残置 = 将来 opacity 弱化 / italic / border 等の polish 余地。 */
.schedule-list-item.is-end-row {
    /* reserved for future visual treatment */
}
/* Phase δ-2 (2026-05-12): 当日リスト heading 直下の進行中タグ pill 群。
   多日 event が selected day の中間 / 終了日に該当する時、heading と通常
   row list の間に flex-wrap pill row として表示。pill は schedule の色
   token + --schedule-tag-opacity で半透明描画 (蛍光ペン pill atmosphere)。
   tap = 通常 row と同じ sheet edit 動線。 */
.schedule-day-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 var(--sp-sm, 8px) 0;
}
/* Phase δ-4+δ-2 hotfix (2026-05-12): tag 全体 opacity → background のみ alpha 化。
   Sato-san「文字色が薄い」報告対応、`opacity` 削除して `background-color:
   color-mix(in srgb, var(--schedule-color-N) calc(--schedule-tag-opacity *
   100%), transparent)` で背景のみ半透明、文字色は --schedule-color-N-fg
   フル不透明 (β-3 WCAG AA contrast 維持)。`color-mix()` は iOS 16.2+ /
   Chrome 111+ で利用可、iOS 15.x は宣言無効化で透明 bg + 色付き文字 fallback
   (graceful degradation)。 */
.schedule-day-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    background-color: color-mix(in srgb, var(--schedule-color-0) calc(var(--schedule-tag-opacity) * 100%), transparent);
    color: var(--schedule-color-0-fg);
    text-decoration: none;
}
.schedule-day-tag.color-0 {
    background-color: color-mix(in srgb, var(--schedule-color-0) calc(var(--schedule-tag-opacity) * 100%), transparent);
    color: var(--schedule-color-0-fg);
}
.schedule-day-tag.color-1 {
    background-color: color-mix(in srgb, var(--schedule-color-1) calc(var(--schedule-tag-opacity) * 100%), transparent);
    color: var(--schedule-color-1-fg);
}
.schedule-day-tag.color-2 {
    background-color: color-mix(in srgb, var(--schedule-color-2) calc(var(--schedule-tag-opacity) * 100%), transparent);
    color: var(--schedule-color-2-fg);
}
.schedule-day-tag.color-3 {
    background-color: color-mix(in srgb, var(--schedule-color-3) calc(var(--schedule-tag-opacity) * 100%), transparent);
    color: var(--schedule-color-3-fg);
}
.schedule-day-tag.color-4 {
    background-color: color-mix(in srgb, var(--schedule-color-4) calc(var(--schedule-tag-opacity) * 100%), transparent);
    color: var(--schedule-color-4-fg);
}
.schedule-list-customer { color: var(--text-secondary); font-size: 11px; white-space: nowrap; }
.schedule-list-attached { font-size: 12px; opacity: 0.7; }
.schedule-list-empty { color: var(--text-secondary); padding: 12px; text-align: center; }
@media (max-width: 600px) {
    /* Phase δ-5 hotfix-1 (2026-05-12): SP も単一行 layout に変更。
       δ-5 era の 3 列 × 2 行 (date row1col1 / time row2col1 / title spans
       row1-3 col2 / customer+attached col3) は Sato-san 実機で「日付と
       時刻が縦並びで違和感」報告、PC と同じ横一列の発生順視覚に統一。
       grid-template-columns を auto-sized 5 列、明示的な grid-column/row
       配置は廃止して auto-placement に戻す。 */
    .schedule-list-row-in {
        /* Phase ε-9 (2026-05-13): SP も `.row-out` 撤去、`.row-in` 単独に縮約 */
        grid-template-columns: var(--list-date-col-width) 1fr auto auto;
        grid-template-rows: auto auto;
        gap: 4px 6px;
    }
    .schedule-list-time { grid-column: auto; grid-row: auto; }
    .schedule-list-title { grid-column: auto; grid-row: auto; }
    .schedule-list-customer { grid-column: auto; grid-row: auto; }
    .schedule-list-attached { grid-column: auto; grid-row: auto; text-align: right; }
}

/* ====== Schedule 詳細 ====== */
.schedule-detail { padding: 0 12px 24px; }
.schedule-detail-title {
    font-size: var(--fs-lg);
    margin: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.schedule-detail-actions {
    display: flex;
    gap: var(--sp-sm);
    flex-wrap: wrap;
}
.schedule-detail-section {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.schedule-detail-section h3 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.schedule-detail-datetime { margin: 0; font-size: 15px; color: var(--text-primary); }
.schedule-detail-notes {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    margin: 0;
    color: var(--text-primary);
}

.schedule-status-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1.4;
}
.schedule-status-badge.status-planned { background: var(--schedule-planned-bg); color: var(--schedule-planned-fg); }
.schedule-status-badge.status-done { background: var(--schedule-done-bg); color: var(--schedule-done-fg); }
.schedule-status-badge.status-cancelled { background: var(--schedule-cancelled-bg); color: var(--schedule-cancelled-fg); }

.schedule-customer-name { margin: 0 0 6px; font-size: 15px; font-weight: 500; }
.schedule-customer-name a { color: var(--color-primary-dark); text-decoration: none; }
.schedule-customer-name a:hover { text-decoration: underline; }
.schedule-customer-contacts { list-style: none; padding: 0; margin: 4px 0; font-size: 13px; }
.schedule-customer-contacts li { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; }
.schedule-customer-contacts li a { color: var(--color-primary); text-decoration: none; }
.schedule-customer-contacts li a:hover { text-decoration: underline; }
.schedule-contact-label { color: var(--text-secondary); font-size: 12px; min-width: 1.4em; }
.schedule-contact-sublabel { color: var(--text-muted); font-size: 11px; margin-left: 4px; }
.schedule-customer-address { margin: 6px 0 0; font-size: 13px; color: var(--text-primary); }

/* --- 紐付けセクション --- */
.schedule-linked-section .schedule-linked-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.schedule-linked-section .schedule-linked-header h3 { margin: 0; }
.schedule-link-add-btn { font-size: 13px; padding: 4px 10px; }
.schedule-linked-list { list-style: none; padding: 0; margin: 0; }
.schedule-linked-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
}
.schedule-linked-item:last-child { border-bottom: none; }
.schedule-linked-link {
    flex: 1;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
}
.schedule-linked-link:hover { background: var(--bg-secondary); }
.schedule-linked-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-linked-amount { color: var(--color-primary-dark); font-weight: 500; font-size: 13px; }
.schedule-linked-date { color: var(--text-secondary); font-size: 12px; }
.schedule-linked-empty { color: var(--text-secondary); text-align: center; padding: 16px; }
.schedule-unlink-form { margin: 0; }
.schedule-unlink-btn {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.schedule-unlink-btn:hover {
    background: var(--color-error-bg);
    color: var(--color-error);
    border-color: var(--color-error);
}

/* --- tx-status-badge (linked tx + picker 内で共有) --- */
.tx-status-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}
.tx-status-badge.status-quote { background: rgba(245, 197, 24, 0.18); color: #b8860b; }
.tx-status-badge.status-invoice { background: var(--schedule-planned-bg); color: var(--schedule-planned-fg); }
.tx-status-badge.status-receipt { background: var(--schedule-done-bg); color: var(--schedule-done-fg); }
[data-theme="dark"] .tx-status-badge.status-quote { color: #f5c518; background: rgba(245, 197, 24, 0.20); }

/* --- 紐付けピッカー (native <dialog>) --- */
.link-picker-dialog {
    width: min(90vw, 480px);
    max-height: 80vh;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.link-picker-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}
.link-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    margin: 0;
}
.link-picker-header h3 { margin: 0; font-size: 15px; }
.link-picker-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px 8px;
}
.link-picker-close:hover { color: var(--color-error); }
.link-picker-controls {
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--border-light);
}
.link-picker-search {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
}
.link-picker-all-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.link-picker-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    max-height: 50vh;
}
.link-picker-loading,
.link-picker-empty,
.link-picker-error { padding: 16px; text-align: center; color: var(--text-secondary); font-size: 13px; }
.link-picker-error { color: var(--color-error); }
.link-picker-item { padding: 0; }
.link-picker-item-btn {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}
.link-picker-item-btn:hover { background: var(--color-primary-light); }
.link-picker-item.is-selected .link-picker-item-btn { background: var(--color-primary-light); outline: 2px solid var(--color-primary); outline-offset: -2px; }
.link-picker-item-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-picker-item-meta { grid-column: 1 / 3; font-size: 11px; color: var(--text-secondary); }
.link-picker-submit-form {
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
}
.link-picker-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ====== ログイン画面 ====== */
.login-body {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-lg);
}
.login-card {
    background: #fff;
    border-radius: 12px;
    padding: var(--sp-xl);
    width: 100%;
    max-width: 400px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.login-brand { text-align: center; margin-bottom: var(--sp-xl); }
.login-brand strong {
    display: block;
    font-size: var(--fs-xxl);
    color: var(--color-primary-dark);
}
.login-brand span {
    color: var(--color-text-muted);
    font-size: var(--fs-base);
}
.login-form { display: flex; flex-direction: column; gap: var(--sp-md); }
.login-hint {
    margin-top: var(--sp-lg);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.login-hint code { background: var(--color-bg); padding: 2px 6px; border-radius: 3px; }

/* ====== アラート ====== */
.alert {
    padding: var(--sp-md);
    border-radius: 6px;
    margin-bottom: var(--sp-md);
    font-size: var(--fs-base);
}
.alert-error { background: var(--color-error-bg); color: var(--color-error); border: 1px solid var(--color-error); }

/* ====== デスクトップ拡張 (>=769px) ====== */
@media (min-width: 769px) {
    .hamburger { display: none; }

    .sidebar {
        transform: translateX(0); /* 常時表示 */
    }

    .overlay { display: none; }

    .content {
        margin-left: var(--sidebar-w);
        padding-left: var(--sp-xl);
        padding-right: var(--sp-xl);
        max-width: 1400px;
    }

    /* 詳細ページの info-grid を 2カラム化 */
    .info-grid {
        grid-template-columns: 200px 1fr;
        align-items: baseline;
    }
    .info-grid dd { margin-bottom: var(--sp-sm); }

    .page-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .schedule-header {
        flex-direction: row;
    }
    .filter-bar {
        flex: 1;
    }

    .cal-cell {
        height: 110px;
    }

    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
    .photo-item img {
        height: 160px;
    }
}

/* ============================================================
   Phase 2-δ: ホーム画面 + サイドバー新スタイル + ボトムナビ + SVGアイコン
   ============================================================ */

:root {
    --bottom-nav-h: 56px;
    --bottom-nav-bg: #ffffff;
    --bottom-nav-border: var(--color-border);
    --nav-icon-size: 24px;
    --nav-active-color: var(--color-primary);
    --nav-inactive-color: var(--color-text-muted);
}

/* メインコンテンツ下部にボトムナビ分の余白 (セーフエリア対応) */
.app-main {
    padding-bottom: calc(var(--topbar-h) + var(--bottom-nav-h) + var(--sp-lg) + env(safe-area-inset-bottom));
}

/* ボトムナビ (SP/PC 常時表示、5項目均等) */
/* ⚠ Critical CSS 二重管理 (decisions v2.102): 本 .bottom-nav ルールの主要部分は
   base.html の <style> Critical CSS にも複製。box-shadow と --bottom-nav-bg/
   --bottom-nav-border 経由のトークン参照は本ファイル独自 (Critical CSS 側は
   --color-card-bg / --color-border で直接 substitute)。変更時は両方更新必須。 */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--bottom-nav-bg);
    border-top: 1px solid var(--bottom-nav-border);
    /* beta286: sidebar 系 lift (1080/1089/1090) に追随。元 100 だと overlay (1080) の
       下に来て bottom-nav が暗幕で覆われていた (Sato-san FB)。1091 で sidebar 本体より
       上、tooltip (1000) より上、暗幕 (1080) より上、視覚的に常時 visible 維持。
       Critical CSS (base.html) 側も同値更新。 */
    z-index: 1091;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
}
.bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min);
    color: var(--nav-inactive-color);
    font-size: 11px;
    text-decoration: none;
    gap: 2px;
    padding: 4px 0;
}
.bottom-nav .nav-item.is-active {
    color: var(--nav-active-color);
    font-weight: 700;
}
.bottom-nav .nav-item svg { width: 22px; height: 22px; }
.bottom-nav .nav-label { font-size: 11px; line-height: 1; }

/* サイドバー (PC 常時表示 / SP slide-in) のメニュー項目スタイル更新 */
.sidebar-nav { flex: 1; }
.sidebar-nav ul { list-style: none; }
.sidebar-nav li { border-bottom: 1px solid var(--color-border); }
.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    min-height: var(--tap-min);
    color: var(--color-text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
}
.sidebar-nav .nav-item:hover { background: var(--color-primary-light); text-decoration: none; }
.sidebar-nav .nav-item.is-active {
    background: var(--color-primary-light);
    color: var(--nav-active-color);
    font-weight: 700;
    border-left: 4px solid var(--color-primary);
    padding-left: 12px;
}
.sidebar-nav .nav-item svg {
    width: var(--nav-icon-size);
    height: var(--nav-icon-size);
    flex-shrink: 0;
}

/* サイドバー下部のログアウトブロック + メールアドレス */
.sidebar-footer {
    margin-top: auto;
    border-top: 1px solid var(--color-border);
    padding: 12px 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.sidebar-footer .user-email {
    padding: 0 16px 8px;
    font-size: 12px;
    color: var(--color-text-muted);
    word-break: break-all;
}
.sidebar-footer .nav-item--logout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    min-height: var(--tap-min);
    color: var(--color-error);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}
.sidebar-footer .nav-item--logout:hover { background: var(--color-error-bg); }
.sidebar-footer .nav-item--logout svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.sidebar-footer .sidebar-version {
    display: block;
    padding: 6px 16px 0;
    color: #aab1bd;
    font-size: 11px;
}

/* decisions v2.27→v2.37→v2.52→v2.54→v2.55: アプデボタン (サイドバー下部、ユーザ名行の上)。
   サーバ版 ≠ インストール版時のみ JS で表示 (デフォルトは [hidden])。
   v2.52: GOGO ランプ風意匠の初版 (紺 + マゼンタ放射 + ネオン紫光彩)。
   v2.54: 白筐体 + 紫着地の発光体表現に書換 (光源色 ≠ 結果色 を発見)。
   v2.55 (D-2): さらに 3 つの問題を再修正:
     1. 発光集約: 全面発光 → 中心 20% (ellipse 35% 60%) のホットスポット + 急減衰
     2. 着地点: 紫 → 暗青 (#02021a)。赤光は波長エネルギーを失いながら
        ピンク → マゼンタ → 紫 → 青紫 → 暗青 と推移する物理特性。紫は経由地
     3. margin 追加: サイドバー他項目との視覚的分離、独立 button としての存在感
     - 8 stop radial で物理的色相シフトを再現
     - 5 層 box-shadow (inset 暖色 + 近マゼンタ + 中紫 + 遠青紫 + 外周青ヘイズ)
     - 4 層 text-shadow は暖色限定 (発光は文字周りに集中)
     - margin: 10px 8px で空間的孤立を確保 */
.sidebar-update-btn {
    display: flex;
    align-items: center;
    /* v2.57: ラベル「更新して起動 / v...」のスタックとボタン背景の radial グラデ
       (50% 50% 中心) が視覚的に揃うよう、ラベルをボタン中央に配置。アイコンは
       絶対配置で左に固定し、レイアウト計算からは外す (くるくる回転は維持)。
       gap: 12px は不要 (icon が absolute に変わったため)、撤去。 */
    justify-content: center;
    position: relative;
    width: calc(100% - 16px);  /* margin 8px x 2 を差し引いた可視幅 */
    padding: 12px 16px;
    /* v2.55: サイドバー他項目と視覚的に分離して「ボタン」としての存在感を出す。
       縦 10px で兄弟 .sidebar-user (= 設定リンク) との隙間を確保、
       横 8px で sidebar 端から軽くインセット (筐体が浮いてる印象)。 */
    margin: 10px 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 220ms ease-out, opacity 0.2s, filter 220ms ease-out;

    /* === D-2 背景: 中心 20% に発光集約 + 8 stop で赤→青の波長シフト ===
       ellipse 35% 60% at 50% 50% でボタン横長形状に対し縦方向をやや絞り、
       文字列に沿った楕円ホットスポットを形成。残り 80% は急激な falloff。 */
    background:
        radial-gradient(
            ellipse 35% 60% at 50% 50%,
            #ffffff 0%,        /* ホットスポット中心 = 白く飛んでる */
            #ffc8dc 6%,        /* 白→ピンク */
            #ff60a8 14%,       /* ピンク (光源近接) */
            #c040c0 26%,       /* マゼンタ */
            #5828a8 42%,       /* 紫 (= 経由地、塗料ではない) */
            #1e1270 62%,       /* 青紫 */
            #06062e 85%,       /* 暗青 */
            #02021a 100%       /* ほぼ黒に近い暗青 (= 着地) */
        );

    /* Border: 青紫 low-alpha = 遠ハロー色との連続性 */
    border: 1px solid rgba(60, 50, 180, 0.55);

    /* === 5 層 box-shadow: 距離減衰 + 波長シフトを同時表現 ===
       半径 0/6/18/42/80 px で「光源から離れるほど青寄り・薄く」の物理特性。
       inset 暖色は内側からの輝き、外側は遠ざかるほど cool blue に転ぶ。 */
    box-shadow:
        inset 0 0 12px rgba(255, 140, 195, 0.4),
        0 0 6px rgba(170, 70, 210, 0.55),
        0 0 18px rgba(100, 55, 200, 0.45),
        0 0 42px rgba(50, 70, 210, 0.3),
        0 0 80px rgba(35, 55, 190, 0.18);

    /* 文字: 白核 + 暖色限定 4 層 text-shadow。発光は文字周りに集中、
       ボタン端まで広げない (= 端は暗青で背景と馴染ませる)。 */
    color: #ffffff;
    text-shadow:
        0 0 2px #ffffff,
        0 0 4px rgba(255, 210, 235, 0.95),
        0 0 9px rgba(255, 130, 200, 0.7),
        0 0 16px rgba(200, 90, 220, 0.45);
}
/* v2.52→v2.55: マウント時 1 回フラッシュ (450ms)。次フレームで base 状態に
   settle、以降静止。sidebar は htmx main swap 対象外なので partial swap では
   再 mount されず再生されない。フルページロード時に毎回 1 回再生
   (= 「まだ未更新」の控えめなリマインダ)。
   v2.55: 5 層 box-shadow に合わせて keyframe を全面書換。 */
.sidebar-update-btn:not([hidden]) {
    animation: sidebar-update-flash 450ms ease-out 1;
    animation-fill-mode: forwards;
}
@keyframes sidebar-update-flash {
    0% {
        box-shadow:
            inset 0 0 5px rgba(255, 140, 195, 0.2),
            0 0 3px rgba(170, 70, 210, 0.25),
            0 0 9px rgba(100, 55, 200, 0.15),
            0 0 20px rgba(50, 70, 210, 0.1);
        filter: brightness(0.88);
    }
    25% {
        box-shadow:
            inset 0 0 22px rgba(255, 180, 215, 0.85),
            0 0 18px rgba(220, 110, 230, 0.95),
            0 0 42px rgba(140, 80, 230, 0.75),
            0 0 80px rgba(70, 90, 230, 0.55),
            0 0 130px rgba(50, 70, 220, 0.35);
        filter: brightness(1.22);
    }
    100% {
        /* 末尾は base box-shadow と完全一致させて settle */
        box-shadow:
            inset 0 0 12px rgba(255, 140, 195, 0.4),
            0 0 6px rgba(170, 70, 210, 0.55),
            0 0 18px rgba(100, 55, 200, 0.45),
            0 0 42px rgba(50, 70, 210, 0.3),
            0 0 80px rgba(35, 55, 190, 0.18);
        filter: brightness(1);
    }
}
.sidebar-update-btn:hover {
    box-shadow:
        inset 0 0 16px rgba(255, 160, 205, 0.55),
        0 0 10px rgba(190, 85, 220, 0.75),
        0 0 26px rgba(120, 70, 220, 0.6),
        0 0 56px rgba(60, 80, 220, 0.4),
        0 0 100px rgba(45, 65, 210, 0.24);
}
.sidebar-update-btn:active {
    transform: scale(0.99);
}
/* v2.54: busy 中は彩度を落として「動作中の鎮静感」(明るく光らせない) */
.sidebar-update-btn[disabled],
.sidebar-update-btn[data-busy="1"] {
    opacity: 0.7;
    filter: saturate(0.85);
    pointer-events: none;
}
.sidebar-update-icon {
    /* v2.57: ラベルをボタン中央に置くため、アイコンは absolute で左に固定。
       レイアウト計算から外れて label の中央配置を邪魔しない。
       縦中央は top + margin-top で算出 (transform は spinning 用に温存)。 */
    position: absolute;
    left: 16px;
    top: 50%;
    margin-top: -10px;  /* 高さ 20px の半分、icon の中央をボタン中央に揃える */
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    /* v2.54→v2.55: アイコンも発光体として描画。v2.55 で暖マゼンタ寄りに微調整
       (ボタン中心の D-2 ホットスポット palette と整合)。 */
    filter:
        drop-shadow(0 0 3px rgba(255, 200, 225, 0.9))
        drop-shadow(0 0 6px rgba(220, 110, 200, 0.55));
    transition: transform 600ms ease-out;
}
.sidebar-update-btn.is-spinning .sidebar-update-icon {
    transform: rotate(360deg);
}
/* decisions v2.56: モバイル幅で 1 行だと version 部分が ellipsis 切れする問題を、
   「更新して起動」を 1 行目、version を 2 行目に分離する 2 行レイアウトで解消。
   nowrap / ellipsis / overflow を撤去 (= JS が <br> を挿入して自然改行)。
   line-height を狭めて 2 行でもボタン高がコンパクトに保たれるよう調整。
   v2.57: ラベルをボタン中央に揃えるため flex: 1 を撤去 (auto sizing に変更)、
   button 側の justify-content: center + text-align: center で center 配置。 */
.sidebar-update-label {
    flex: 0 1 auto;
    min-width: 0;
    line-height: 1.2;
}
.sidebar-update-version {
    display: block;
    font-size: 11px;
    font-weight: 500;
    margin-top: 2px;
    opacity: 0.85;
}
/* v2.54: dark mode 専用 override は不要。白筐体 + 暖色グローはサイドバー
   背景色に依存せず両モードで成立する。 */
@media (prefers-reduced-motion: reduce) {
    .sidebar-update-btn:not([hidden]) {
        animation: none !important;
    }
    .sidebar-update-btn {
        transition: none;
    }
}

/* decisions v2.37: HOME アプデ通知バナー (ワンタイム)。アプデボタン押下後の
   初回 HOME 描画でのみ表示、フラグは即削除。 */
.home-update-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: var(--sp-md, 12px) 0;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--color-primary) 15%, white);
    color: var(--color-primary-dark, var(--color-primary));
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, white);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    font-size: 14px;
    line-height: 1.4;
}
.home-update-banner-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
}
.home-update-banner-text {
    flex: 1 1 auto;
    min-width: 0;
}
.home-update-banner-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-primary-dark, var(--color-primary));
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
}
.home-update-banner-close:hover {
    background: color-mix(in srgb, var(--color-primary) 25%, white);
}
[data-theme="dark"] .home-update-banner {
    background: color-mix(in srgb, var(--color-primary) 25%, #2a2f1e);
    color: color-mix(in srgb, var(--color-primary) 70%, white);
    border-color: color-mix(in srgb, var(--color-primary) 50%, #2a2f1e);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .home-update-banner-close {
    color: color-mix(in srgb, var(--color-primary) 70%, white);
}
[data-theme="dark"] .home-update-banner-close:hover {
    background: color-mix(in srgb, var(--color-primary) 35%, #2a2f1e);
}

/* decisions v2.52: HOME 1 行目のアプデ利用可能通知 (落ち着いた info カード調)。
   サイドバーの GOGO ランプ風ボタンとは役割分離 — こちらは取りこぼし防止の
   静かな補助役。クリッカブルで `tallybeClearAndReload({type:'update', from, to})`
   を呼ぶ (3 経路 = サイドバー / HOME 案内 / 設定画面 がすべて同関数集約)。
   既存 `.home-update-banner` (post-update 完了通知ワンタイム) とは別 DOM。 */
.home-update-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: var(--sp-md, 12px) 0;
    padding: 12px 14px;
    border-radius: 8px;
    border-left: 4px solid #4a90e2;
    background: rgba(74, 144, 226, 0.08);
    color: #1d4373;
    font-size: 14px;
    text-decoration: none;
    transition: background 150ms ease-out;
}
.home-update-notice:hover {
    background: rgba(74, 144, 226, 0.13);
}
.home-update-notice:active {
    transform: scale(0.99);
}
.home-update-notice-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.home-update-notice-version {
    font-weight: 600;
}
[data-theme="dark"] .home-update-notice {
    border-left-color: #6ba3e8;
    background: rgba(107, 163, 232, 0.12);
    color: #c8dcf2;
}
[data-theme="dark"] .home-update-notice:hover {
    background: rgba(107, 163, 232, 0.18);
}

/* ヘッダ右の余白 (将来用、今は不可視 div だけ) */
.topbar-actions {
    width: 36px;
    height: var(--tap-min);
}

/* ホーム画面カード (3列 PC / 1列 SP) */
.home-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-lg);
    margin: var(--sp-lg) 0;
}
@media (max-width: 768px) {
    .home-cards { grid-template-columns: 1fr; }
}
.home-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--sp-xl);
    position: relative;
    box-shadow: var(--shadow-sm);
}
.home-card h2 {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0 0 8px;
    font-weight: 500;
    text-align: left;
    white-space: normal;
}
.home-card .home-card-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}
.home-card .home-card-sub {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 6px;
    line-height: 1.5;
}
.home-card .home-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #fef3c7;
    color: #92400e;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

/* ============================================================
   既存 .nav-link は段階的に廃止 (.sidebar-nav .nav-item へ移行)
   旧クラスのフォールバックは現状維持
   ============================================================ */

/* ============================================================
   Phase 2-γ: 顧客 CRUD + ごみ箱方式の論理削除 用 UI
   ============================================================ */

/* フラッシュメッセージ (リロードで消える方式、フェードアウトはしない) */
.flash {
    padding: var(--sp-md) var(--sp-lg);
    border-radius: 6px;
    margin-bottom: var(--sp-lg);
    font-size: var(--fs-base);
    font-weight: 500;
}
.flash-success {
    background: #e7f5ec;
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

/* フォーム (登録/編集共通) */
.form-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    max-width: 640px;
}
.form-label .required {
    color: var(--color-error);
    font-style: normal;
    margin-left: var(--sp-xs);
}
.form-error {
    display: block;
    margin-top: var(--sp-xs);
    color: var(--color-error);
    font-size: var(--fs-sm);
}

/* date input は base のフォーム入力ルールに含まれていないため明示 */
input[type="date"] {
    min-height: var(--tap-min);
    padding: var(--sp-sm) var(--sp-md);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: var(--fs-base);
    background: #fff;
    color: var(--color-text);
    width: 100%;
    box-sizing: border-box;
}
input[type="date"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* ごみ箱バッジ (件数を丸で表示) */
.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin-left: 6px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* 残り日数表示 (5日以下は赤字で警告) */
.days-left { color: var(--color-text-muted); font-size: var(--fs-sm); }
.days-left--warn { color: var(--color-error); font-weight: 700; }

/* ====== カードリスト + 行末アイコンボタンの併設 (顧客一覧の削除ボタン) ====== */
.card-list-item--row {
    display: flex;
    align-items: stretch;
    padding: 0;            /* 内側の link area / form でパディングを持つ */
    overflow: hidden;
}
.card-list-item--row .card-link-area {
    flex: 1;
    display: block;
    padding: var(--sp-md) var(--sp-lg);
    color: var(--color-text);
    text-decoration: none;
    min-height: var(--tap-min);
}
.card-list-item--row .card-link-area:hover { background: var(--color-primary-light); text-decoration: none; }
.card-list-item--row .card-action-form {
    display: flex;
    align-items: stretch;
    border-left: 1px solid var(--color-border);
}

/* アイコンボタン (ごみ箱アイコン用) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    padding: 0 var(--sp-md);
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--color-error-bg); color: var(--color-error); }
.icon-btn--danger { color: var(--color-text-muted); }
.icon-btn--danger:hover { color: var(--color-error); background: var(--color-error-bg); }
.icon-btn svg { width: 22px; height: 22px; }

/* ============================================================
   Phase 3-α-3: SaaS 基盤 UI (取引一覧/詳細/ごみ箱、ホーム、設定画面)
   ============================================================ */

/* ---------- 操作ボタンバー ---------- */
.tx-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    align-items: center;
    margin-bottom: var(--sp-md);
}
.tx-toolbar .spacer { flex: 1; }
.tx-toolbar .btn-trash-link {
    background: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
}
.tx-toolbar .btn-trash-link:hover { background: var(--color-error-bg); color: var(--color-error); }
/* Phase tx-fab-relayout: 一覧PDF を SVG アイコンのみ化、trash ボタンと同視覚重量。
   background は --color-card-bg 経由でダーク自動追従 (trash の hardcoded #fff より新しい規約)。 */
.tx-toolbar .tx-pdf-btn {
    background: var(--color-card-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: var(--tap-min);
    min-width: var(--tap-min);
    height: var(--tap-min);
}
.tx-toolbar .tx-pdf-btn:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.tx-toolbar .tx-pdf-btn svg { width: 22px; height: 22px; }

/* Phase tx-fab-relayout: ジャンル絞り込み <select> (リボン左、UI shell)。
   ネイティブ矢印は OS 任せ (iOS / Android 既存実装と整合)。 */
.tx-genre-select {
    height: var(--tap-min);
    padding: 0 28px 0 12px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: var(--fs-base);
    line-height: 1;
    appearance: auto;
    -webkit-appearance: auto;
    cursor: pointer;
}
.tx-genre-select:focus {
    outline: 2px solid var(--color-primary-soft);
    outline-offset: 1px;
}
.tx-genre-select option:disabled {
    color: var(--color-text-muted);
}

/* ---------- HTML 標準 details/summary でドロップダウン・絞り込みパネル ---------- */
.dd-wrap {
    position: relative;
    display: inline-block;
}
.dd-wrap > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    min-height: var(--tap-min);
    padding: 0 var(--sp-md);
    border-radius: 6px;
    background: var(--color-primary);
    color: #fff;
    border: 0;
    font-size: var(--fs-base);
    font-weight: 500;
    user-select: none;
}
.dd-wrap > summary::-webkit-details-marker { display: none; }
.dd-wrap > summary:hover { background: var(--color-primary-dark); }
.dd-wrap[open] > summary { background: var(--color-primary-dark); }
.dd-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: var(--shadow-md);
    padding: var(--sp-xs) 0;
}
.dd-menu .dd-item {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    color: var(--color-text);
    text-decoration: none;
    min-height: var(--tap-min);
}
.dd-menu .dd-item:hover { background: var(--color-primary-light); text-decoration: none; }
.dd-menu .dd-item--income:hover { background: #e7f5ec; color: var(--color-success); }
.dd-menu .dd-item--expense:hover { background: var(--color-error-bg); color: var(--color-error); }

/* ---------- 絞り込みパネル ---------- */
.filter-panel {
    margin-bottom: var(--sp-lg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #fff;
}
.filter-panel > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: var(--sp-sm) var(--sp-md);
    min-height: var(--tap-min);
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg);
    border-radius: 6px 6px 0 0;
    user-select: none;
}
.filter-panel > summary::-webkit-details-marker { display: none; }
.filter-panel > summary::after {
    content: '▽';
    margin-left: auto;
    color: var(--color-text-muted);
    transition: transform .2s;
}
.filter-panel[open] > summary::after { transform: rotate(180deg); }
.filter-panel-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-sm);
    padding: var(--sp-md);
    border-top: 1px solid var(--color-border);
}
.filter-panel-body .field { display: flex; flex-direction: column; gap: 2px; }
.filter-panel-body .field-label { font-size: var(--fs-sm); color: var(--color-text-muted); }
.filter-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    padding: 0 var(--sp-md) var(--sp-md);
}

/* Phase 3-β-5.9: 取引一覧の絞り込みパネル — 期間ナビ直下に置くため
   閉じている状態の summary を右寄せ・小さめ・細枠に。 */
.filter-panel--compact {
    background: transparent;
    border: none;
    margin-bottom: var(--sp-sm);
    text-align: right;
}
.filter-panel--compact > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: 4px 10px;
    min-height: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 4px;
}
.filter-panel--compact > summary::after {
    margin-left: 6px;
    font-size: 11px;
}
.filter-panel--compact[open] {
    background: var(--bg-card, #fff);
    border: 1px solid var(--color-border);
    text-align: left;
}
.filter-panel--compact[open] > summary {
    background: var(--color-bg);
    border: none;
    border-radius: 6px 6px 0 0;
    padding: var(--sp-sm) var(--sp-md);
    font-size: var(--fs-base);
    color: var(--color-text);
    display: flex;
    align-items: center;
}

/* ---------- 取引一覧テーブル (色縦棒) ---------- */
.tx-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 var(--sp-xs);
    font-size: var(--fs-base);
}
.tx-table thead th {
    text-align: left;
    padding: var(--sp-xs) var(--sp-md);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    background: var(--color-bg);
}
.tx-table thead th.num { text-align: right; }
.tx-row {
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.tx-row td {
    padding: var(--sp-md);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.tx-row td:first-child {
    border-left: 5px solid var(--bar-color, var(--color-text-muted));
    padding-left: var(--sp-md);
    border-radius: 4px 0 0 4px;
}
.tx-row td:last-child { border-radius: 0 4px 4px 0; }
.tx-row td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.tx-row .tx-detail-link { color: var(--color-text); display: block; }
.tx-row .tx-detail-link:hover { color: var(--color-primary); text-decoration: none; }
.tx-row:hover { box-shadow: var(--shadow-md); }

.tx-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}
.tx-type--income  { color: var(--color-success); background: #e7f5ec; }
.tx-type--expense { color: var(--color-error);   background: var(--color-error-bg); }
.tx-type svg { width: 14px; height: 14px; }

.tx-amount-income { color: var(--color-success); }
.tx-amount-expense { color: var(--color-error); }

/* ---------- 取引一覧 カード形式 (Phase 3-α-3.6: 縦書き解消)
   テーブル形式 (.tx-table / .tx-row) は customer_detail の過去取引と
   transactions_trash で引き続き使用するため残置。一覧画面のみカード化。 */
.tx-cards {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}
.tx-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--bar-color, var(--color-text-muted));
    border-radius: 6px;
    padding: var(--sp-md);
    box-shadow: var(--shadow-sm);
    min-height: var(--tap-min);
}
.tx-card:hover {
    background: var(--color-primary-light);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}
.tx-card:active { background: var(--color-bg); }

.tx-card-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-sm);
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.tx-card-row1-left {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sm);
    flex-wrap: wrap;
}
.tx-card-date {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}
.tx-card-amount {
    font-size: var(--fs-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tx-card-row2 {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    word-break: break-word;
}
.tx-card-row2 .meta-deleted { color: var(--color-error); margin-left: 4px; }
.tx-card-row2-sep { color: var(--color-border); margin: 0 6px; }

@media (max-width: 480px) {
    .tx-card { padding: var(--sp-sm) var(--sp-md); }
    .tx-card-amount { font-size: var(--fs-base); }
}

/* ---------- タグバッジ (取引一覧/詳細/顧客詳細共通) ---------- */
.tag-badge {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--tag-color, var(--color-primary-light));
    color: var(--color-primary-dark);
    border: 1px solid rgba(0,0,0,0.05);
}
/* タグ色を背景にした場合、文字色は黒寄りで読みやすく */
.tag-badge--colored { color: #fff; }

/* カテゴリラベル (取引詳細用) */
.category-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: var(--fs-sm);
    font-weight: 500;
    background: var(--cat-color, var(--color-primary-light));
    color: #fff;
}

/* ---------- ホームカード Phase 3-α-3 拡張 ---------- */
.home-card-with-bar {
    border-left: 5px solid var(--accent-color, var(--color-primary));
}
.home-card-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-sm);
    margin-top: 4px;
}
.home-card-trend--up   { color: var(--color-success); }
.home-card-trend--down { color: var(--color-error); }
.home-card-trend--flat { color: var(--color-text-muted); }

/* ---------- パンくず ---------- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-sm);
}
.breadcrumb a { color: var(--color-primary); }
.breadcrumb-sep { color: var(--color-border); }

/* ---------- 取引詳細ヘッダ ---------- */
.tx-detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-sm);
    margin-bottom: var(--sp-md);
}
.tx-detail-header .tx-detail-date { font-size: var(--fs-md); font-weight: 700; color: var(--color-text); }

/* ---------- customer_detail Phase 3-α-3: 連絡先 + タグ集計 ---------- */
.contact-list { list-style: none; }
.contact-list li { padding: 4px 0; }
.contact-list .meta { color: var(--color-text-muted); margin-right: 6px; }

.tag-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* ---------- 設定画面 (categories / tags) ---------- */
.settings-row {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    padding: var(--sp-sm) var(--sp-md);
    border-bottom: 1px solid var(--color-border);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row .color-swatch {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}
.settings-row .name { flex: 1; font-weight: 500; }
.settings-row .meta { color: var(--color-text-muted); font-size: var(--fs-sm); }
.settings-row .actions { display: flex; gap: var(--sp-xs); }
.settings-row .btn-sm { min-height: 36px; padding: 0 var(--sp-md); font-size: var(--fs-sm); }

/* items 一覧固有 (Phase 1、2026-05-19) — 標準単価 / 単位の表示 */
.settings-row .item-price {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-sm);
}
.settings-row .item-unit {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* items 一覧 polish (2026-05-20、 beta326) — `.is-item-row` modifier で
   商品名 1 行 ellipsis を items 限定適用 (categories 一覧との隔離)。
   `min-width: 0` は flex 親内で text-overflow を効かせる必須 hack。 */
.settings-row.is-item-row .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* HP 掲載アイコン (forward-compat seam、 2026-05-20、 beta329 で投入、 beta331 で案 B に切替)。
   案 B: show_on_website=true 行のみ DOM 出力、 商品名直前に inline くっつき。 beta332 で
   商品名との gap を 4px → 2px に詰める (Sato-san 実機 feedback 「もう少し詰めて」)。
   false 行はアイコン slot ごと存在せず、 商品名が左に詰まる = visible 幅回復 +
   「HP 掲載中の item が目立つ」UX を強化 (oniwaban 25 件中 24 件 false で案 A の slot 圧迫が顕在化)。 */
.settings-row.is-item-row .row-website-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 2px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.settings-row.is-item-row .row-website-icon svg {
    width: 16px;
    height: 16px;
}

/* ============================
   Tally Currency Input (Phase 1.5 foundation、 2026-05-19)
   将来 transactions / quotes / 見積 / セット商品 への横展開を視野。
   ============================ */
.tally-currency-input {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-card-bg);
    transition: border-color 120ms ease, box-shadow 120ms ease;
    overflow: hidden;
    min-width: 180px;
    max-width: 100%;
}
.tally-currency-input.is-focused {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.tally-currency-input__prefix {
    padding: 0 var(--sp-sm) 0 var(--sp-md);
    color: var(--color-text-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    user-select: none;
    pointer-events: none;
}
.tally-currency-input input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px var(--sp-md) 10px 0;
    font-size: var(--fs-base);
    font-variant-numeric: tabular-nums;
    text-align: right;
    outline: none;
    min-width: 0;
}
.tally-currency-input.is-empty input {
    text-align: left;
}
@media (max-width: 480px) {
    .tally-currency-input input {
        font-size: 17px;
        padding: 12px var(--sp-md) 12px 0;
    }
}

/* ============================
   Tally Unit Select (Phase 1.5、 2026-05-19)
   ============================ */
.tally-unit-select select {
    /* 既存 form select スタイルを継承 */
    width: 100%;
    max-width: 280px;
}
.tally-unit-select__add {
    display: flex;
    gap: var(--sp-sm);
    margin-top: var(--sp-sm);
    align-items: center;
    flex-wrap: wrap;
}
.tally-unit-select__add input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 8px var(--sp-md);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-card-bg);
    font-size: var(--fs-base);
}
.btn-mini {
    padding: 6px var(--sp-md);
    font-size: var(--fs-sm);
    border-radius: 6px;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
    line-height: 1.2;
}
.btn-mini:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}
.btn-mini.btn-mini-secondary {
    background: var(--color-card-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-mini.btn-mini-secondary:hover {
    background: var(--color-bg);
}

/* ============================================================
   Phase 2-ζ: ホーム画面拡張 (グラフ枠 + マスタリンク) +
              ハリボテバッジ (items_list.html / settings.html)
   ============================================================ */
.home-chart-card {
    margin: var(--sp-lg) 0;
    padding: var(--sp-lg);
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}
.home-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-md);
}
.home-chart-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-base);
    color: var(--color-primary-dark);
}
.home-chart-header h2 svg {
    width: 20px;
    height: 20px;
}
.home-chart-note {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    background: #fff8e1;
    padding: 2px 8px;
    border-radius: 4px;
}
.home-chart-svg {
    width: 100%;
    height: auto;
    max-height: 200px;
}

/* ハリボテバッジ (items_list.html, settings.html 用) */
.placeholder-badge {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: var(--sp-md);
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 4px;
    color: #6d5e1a;
    font-size: var(--fs-sm);
}

/* ============================================================
   Phase 2-θ: ホーム再編 (4→2カード + 次の予定 + 今週の予定)
   ============================================================ */
.home-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-md);
}
.home-section-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--fs-base);
    color: var(--color-primary-dark);
}
.home-section-header h2 svg {
    width: 20px;
    height: 20px;
}
.home-section-link {
    font-size: var(--fs-sm);
    color: var(--color-primary);
    text-decoration: none;
}
.home-section-link:hover { text-decoration: underline; }

/* 次の予定 (プレースホルダ) */
.home-next-event { margin: var(--sp-lg) 0; }
.home-next-event-card {
    padding: var(--sp-lg);
    background: #fff;
    border-radius: 12px;
    border: 1px dashed var(--color-border);
}
.home-next-event-empty {
    margin: 0 0 8px;
    color: var(--color-text-muted);
}
.home-next-event-future {
    color: #aab1bd;
    font-size: 11px;
}

/* 今週の予定 */
.home-this-week { margin: var(--sp-lg) 0; }
.home-event-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    overflow: hidden;
}
.home-event-item {
    /* Phase 5.14.x: 1 行の中身は <a class="home-event-link"> にラップしたので、
       item 自体の grid は不要に。padding/border-bottom のみ残す。
       grid layout は .home-event-link 側で再定義 (status border-left も付ける)。 */
    padding: 12px var(--sp-md);
    border-bottom: 1px solid var(--color-border);
}
.home-event-item:last-child { border-bottom: none; }
.home-event-date {
    font-size: var(--fs-sm);
    color: var(--color-primary-dark);
    font-weight: 600;
}
.home-event-title { color: var(--color-text); }
.home-event-customer {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.home-event-empty {
    padding: var(--sp-lg);
    text-align: center;
    color: var(--color-text-muted);
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

/* Phase 5.14.x: home の schedule 系セクションを実データ化 (今日 / 次 / 今週)。
   Phase 5.14-β で定義済の --schedule-*-fg/-bg トークンを流用。 */

/* 本日カード内の予定リンク */
.home-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-left: 3px solid var(--schedule-planned-fg);
    padding-left: 8px;
    margin: 4px 0;
}
.home-card-link.home-event-status-done { border-left-color: var(--schedule-done-fg); }
.home-card-link.home-event-status-cancelled { border-left-color: var(--schedule-cancelled-fg); opacity: 0.7; }
.home-card-link:hover { background: var(--color-row-hover, var(--color-primary-light)); }
.home-card-foot {
    margin: 6px 0 0;
    font-size: 12px;
}
.home-card-foot a {
    color: var(--color-primary);
    text-decoration: none;
}
.home-card-foot a:hover { text-decoration: underline; }

/* 次の予定カード (実データ用、placeholder の dashed border は実データ時は solid に) */
a.home-next-event-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-style: solid;
    border-left-width: 4px;
    border-left-color: var(--schedule-planned-fg);
    transition: background 0.15s;
}
a.home-next-event-card:hover { background: var(--color-row-hover, var(--color-primary-light)); }
.home-next-event-date {
    font-size: var(--fs-sm);
    color: var(--color-primary-dark);
    font-weight: 600;
    margin-bottom: 4px;
}
.home-next-event-time {
    margin-left: 8px;
    color: var(--color-text-muted);
    font-weight: 400;
}
.home-next-event-title {
    font-size: var(--fs-md);
    color: var(--color-text);
    margin-bottom: 2px;
}
.home-next-event-customer {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

/* 今週リストの 1 行を link に変えたので、grid layout を a タグ内に再設定 */
.home-event-link {
    display: grid;
    grid-template-columns: 80px 50px 1fr auto;
    gap: 8px;
    align-items: center;
    text-decoration: none;
    color: var(--color-text);
    width: 100%;
}
.home-event-link:hover { background: var(--color-row-hover, var(--color-primary-light)); }
.home-event-link .home-event-time {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
@media (max-width: 480px) {
    .home-event-link {
        grid-template-columns: 60px 1fr;
        grid-template-rows: auto auto;
        gap: 2px 8px;
    }
    .home-event-link .home-event-time {
        grid-column: 1; grid-row: 2;
    }
    .home-event-link .home-event-title { grid-column: 2; grid-row: 1 / 3; }
    .home-event-link .home-event-customer { grid-column: 2; grid-row: 2; font-size: 11px; }
}

/* 今週リスト 1 行の status border (左 4px) */
.home-event-list .home-event-item {
    border-left: 4px solid var(--schedule-planned-fg);
}
.home-event-list .home-event-item.home-event-status-done { border-left-color: var(--schedule-done-fg); }
.home-event-list .home-event-item.home-event-status-cancelled {
    border-left-color: var(--schedule-cancelled-fg);
    opacity: 0.7;
}

/* Phase A.2.5 (2026-05-14): home page event card 着色 (color_index)。
   今日トップ / 次の予定 / 今週リスト 3 surface 共通の border-left 反映。
   Phase A.2.5.1 (2026-05-14、Sato-san dogfood feedback): 初回投入時の unscoped
   rule は既存 `.home-card-link.home-event-status-X` (specificity 0,2,0) に
   負ける + `.home-next-event-card` は dashed 全周 border で left bar visual
   が無いため未表示だった。各 surface ごとに scoped rule で specificity 同等以上
   に + next-event-card には独立 4px left bar を新設で対応。
   color-0 は背景 (pale) ではなく fg (olive) を border 色に使用、他 5 色は背景濃度十分で main bg そのまま。 */

/* (1) 今日トップ card: a.home-card-link (既設 border-left 3px solid) */
.home-card-link.home-event-color-0 { border-left-color: var(--schedule-color-0-fg); }
.home-card-link.home-event-color-1 { border-left-color: var(--schedule-color-1); }
.home-card-link.home-event-color-2 { border-left-color: var(--schedule-color-2); }
.home-card-link.home-event-color-3 { border-left-color: var(--schedule-color-3); }
.home-card-link.home-event-color-4 { border-left-color: var(--schedule-color-4); }

/* (2) 次の予定 card: a.home-next-event-card (既設 1px dashed 全周 border、
       left bar が無いため independent 4px solid を override で設置) */
a.home-next-event-card.home-event-color-0 { border-left: 4px solid var(--schedule-color-0-fg); }
a.home-next-event-card.home-event-color-1 { border-left: 4px solid var(--schedule-color-1); }
a.home-next-event-card.home-event-color-2 { border-left: 4px solid var(--schedule-color-2); }
a.home-next-event-card.home-event-color-3 { border-left: 4px solid var(--schedule-color-3); }
a.home-next-event-card.home-event-color-4 { border-left: 4px solid var(--schedule-color-4); }

/* (3) 今週リスト row: .home-event-list .home-event-item (既設 border-left 4px solid) */
.home-event-list .home-event-item.home-event-color-0 { border-left-color: var(--schedule-color-0-fg); }
.home-event-list .home-event-item.home-event-color-1 { border-left-color: var(--schedule-color-1); }
.home-event-list .home-event-item.home-event-color-2 { border-left-color: var(--schedule-color-2); }
.home-event-list .home-event-item.home-event-color-3 { border-left-color: var(--schedule-color-3); }
.home-event-list .home-event-item.home-event-color-4 { border-left-color: var(--schedule-color-4); }

/* ============================================================
   Phase 2-θ: サイドバー再編 (取引帳簿削除 + サブナビ + 区切り)
   ============================================================ */
.sidebar-divider {
    height: 1px;
    margin: 8px 16px;
    background: var(--color-border);
}
.sidebar-divider--thick {
    height: 2px;
    margin: 12px 12px;
    background: var(--color-primary-light);
    border-radius: 1px;
}
.sidebar-subnav {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-subnav li { border-bottom: 1px solid var(--color-border); }
.sidebar-subnav .nav-item--sub {
    padding-left: 36px;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.sidebar-subnav .nav-item--sub svg {
    width: 18px;
    height: 18px;
}
.sidebar-subnav .nav-item--sub.is-active {
    color: var(--color-primary-dark);
    font-weight: 600;
}

/* ============================================================
   Phase 2-θ: データページ (収支カード + グラフ + 出力アクション)
   ============================================================ */
.page-head {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    margin-bottom: var(--sp-lg);
}
.page-head h1 {
    margin: 0;
    font-size: var(--fs-lg);
    color: var(--color-primary-dark);
}
.page-head .placeholder-badge { margin-bottom: 0; }

.data-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
    margin: var(--sp-lg) 0;
}
@media (max-width: 600px) {
    .data-summary { grid-template-columns: 1fr; }
}
.data-summary-card {
    padding: var(--sp-lg);
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border);
}
.data-summary-card--income { border-left-color: #4caf50; }
.data-summary-card--expense { border-left-color: #f44336; }
.data-summary-card--balance { border-left-color: var(--color-primary); }
.data-summary-card h2 {
    margin: 0 0 8px;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    font-weight: 500;
}
.data-summary-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary-dark);
}
.data-summary-meta {
    margin-top: 4px;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

/* グラフカード (Phase 2-ζ の home-chart-card 系を流用) */
.data-chart-card {
    margin: var(--sp-lg) 0;
    padding: var(--sp-lg);
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}
.data-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-md);
}
.data-chart-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--fs-base);
    color: var(--color-primary-dark);
}
.data-chart-header h2 svg {
    width: 20px;
    height: 20px;
}
.data-chart-svg {
    width: 100%;
    height: auto;
    max-height: 200px;
}

/* 出力アクション */
.data-actions {
    margin: var(--sp-lg) 0;
    padding: var(--sp-lg);
    background: #fafbfc;
    border-radius: 12px;
}
.data-actions h2 {
    margin: 0 0 var(--sp-md);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    font-weight: 500;
}
.data-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ============================================================
   Phase 2-η: スクロール連動 hide/show (X / メルカリ風)
   body.has-scroll-hide のときだけ scroll-hide.js が動作する
   ============================================================ */
.topbar,
.bottom-nav {
    transition: transform 0.25s ease;
    will-change: transform;
}
.topbar.is-scroll-hidden {
    transform: translateY(-100%);
}
/* iOS でセーフエリア分も画面外に逃がさないと、隠した時に下端の余白だけが残るため
   100% + safe-area 分まとめて translate する。 */
.bottom-nav.is-scroll-hidden {
    transform: translateY(calc(100% + env(safe-area-inset-bottom)));
}

/* Phase A.2.4.1 (2026-05-12): bottom sheet open 中は bottom-nav を slide-down で
   隠す。`.bottom-nav { transition: transform 0.25s ease }` (上の Phase 2-η rule)
   を流用、sheet 自身の 240ms slide-up と同期した hide feel。`is-scroll-hidden`
   と同じ translate 量で iOS safe-area 分も画面外へ。 */
body.is-schedule-sheet-open .bottom-nav {
    transform: translateY(calc(100% + env(safe-area-inset-bottom)));
}

/* Phase A.2.4.8 (2026-05-12): bottom sheet open 中の背後 scroll lock。
   - body 全体に overflow: hidden で root scroll 停止。
   - `.schedule-page` (carousel + month-list を含む scope) に touch-action: none
     で touch event の背後到達を物理的に block、Sato-san 報告「後ろの背景が動く /
     swipe 判定で Stage 2 が出たり曖昧」を構造的に解消。
   - sheet 本体は `.schedule-page` の **外側** (main 内 sibling) に置かれているので
     touch-action: none の影響を受けず、sheet 内 input/button 操作は維持される。
   - close 経路 (× / overlay tap / handle swipe-down) で body class が外れた瞬間に
     scroll lock 解除、UX 損失なし。 */
body.is-schedule-sheet-open {
    overflow: hidden;
}
body.is-schedule-sheet-open .schedule-page {
    touch-action: none;
    overflow: hidden;
}

/* ============================================================
   運営コンソール (system_master 専用)
   2026-05-03 (sysadmin tenant 化): 独立レイアウト (base_console.html) を廃止し
   標準 base.html 配下に統合。`.console-body` / `.console-header` /
   `.console-nav` / `.console-header-brand` 等の旧レイアウト用ルールは現在
   未使用。`.console-stats` / `.console-stat-card` / `.console-table` /
   `.console-link-card` / `.console-note` は relocated 後の console_*.html で
   引き続き利用中。
   TODO: prune after sysadmin migration verified — verify in production for
   一定期間 then delete the layout-only rules below.
   ============================================================ */
.console-body {
    background: #f5f7fa;
    margin: 0;
    color: var(--color-text);
}
.console-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: #2d2d2d;
    color: #fff;
    border-bottom: 3px solid var(--color-primary);
}
.console-header-brand strong {
    font-size: 18px;
    color: #fff;
}
.console-badge {
    margin-left: 12px;
    padding: 2px 8px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
}
.console-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.console-user-email {
    font-size: 14px;
    color: #ccc;
}
.console-nav {
    display: flex;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    padding: 0 24px;
}
.console-nav a {
    padding: 12px 20px;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    font-size: var(--fs-sm);
    transition: color .15s, border-color .15s;
}
.console-nav a:hover { color: var(--color-primary); }
.console-nav a.is-active {
    color: var(--color-primary-dark);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}
.console-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.console-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0;
}
@media (max-width: 600px) {
    .console-stats { grid-template-columns: 1fr; }
}
.console-stat-card {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}
.console-stat-label {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}
.console-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.console-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 24px 0;
}
@media (max-width: 600px) {
    .console-links { grid-template-columns: 1fr; }
}
.console-link-card {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: background-color .15s;
}
.console-link-card:hover { background: var(--color-primary-light); }
.console-link-card h3 {
    margin: 0 0 8px;
    color: var(--color-primary-dark);
}
.console-link-card p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.console-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.console-table th,
.console-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-sm);
}
.console-table th {
    background: #fafbfc;
    color: var(--color-text-muted);
    font-weight: 500;
}
.console-table tr.is-inactive { opacity: 0.5; }
.console-table code {
    background: #f0f2f5;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
}

/* バッジ (有効/無効) */
.badge-active {
    background: #e8f5e9;
    color: #2e7d32;
}
.badge-inactive {
    background: #ffebee;
    color: #c62828;
}

.console-note {
    margin-top: 16px;
    padding: 12px;
    background: #fff8e1;
    border-radius: 4px;
    color: #6d5e1a;
    font-size: var(--fs-sm);
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    min-height: 32px;
}

/* tenant 内ユーザ管理画面の小要素 */
.settings-extra {
    margin-top: var(--sp-xl);
    padding-top: var(--sp-lg);
    border-top: 1px solid var(--color-border);
}
.form-note {
    margin-top: var(--sp-md);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

/* ============================================================
   Phase 2-κ ロゴ表示 (ホーム画面: 緑トップバー内に表示)
   ============================================================ */
.topbar-logo {
    height: 28px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}
@media (min-width: 769px) {
    .topbar-logo { height: 32px; }
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================================
   Phase 2-κ console SP 対応 (ヘッダ折返し / nav 横スクロール / table カード化)
   ============================================================ */
.console-header {
    flex-wrap: wrap;
    gap: 8px;
}
.console-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.console-header-brand strong {
    font-size: 18px;
    color: #fff;
    white-space: nowrap;
}
.console-badge {
    white-space: nowrap;
}
.console-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}
.console-user-email {
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .console-header {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 12px;
        gap: 6px;
    }
    .console-header-brand {
        justify-content: flex-start;
    }
    .console-header-actions {
        justify-content: space-between;
    }
    .console-user-email {
        max-width: none;
        flex: 1;
    }
}

/* console nav: SP では横スクロール */
.console-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.console-nav a {
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .console-nav {
        padding: 0 12px;
    }
    .console-nav a {
        padding: 10px 14px;
    }
}

/* console main: SP padding 圧縮 */
@media (max-width: 600px) {
    .console-main {
        padding: 16px 12px;
    }
}

/* console table: PC ではテーブル、SP ではカード化 (data-label 属性で各セルに見出し) */
.console-table th,
.console-table td {
    vertical-align: middle;
    white-space: nowrap;
    word-break: keep-all;
}

@media (max-width: 768px) {
    .console-table {
        display: block;
        border: none;
        background: transparent;
        border-radius: 0;
        overflow: visible;
    }
    .console-table thead {
        display: none;
    }
    .console-table tbody {
        display: block;
    }
    .console-table tr {
        display: block;
        background: #fff;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        margin-bottom: 12px;
        padding: 12px;
        white-space: normal;
    }
    .console-table td {
        display: block;
        padding: 4px 0;
        border-bottom: none;
        white-space: normal;
    }
    .console-table td::before {
        content: attr(data-label);
        display: inline-block;
        width: 6em;
        font-weight: 600;
        color: var(--color-text-muted);
        font-size: 11px;
        margin-right: 8px;
    }
}

/* ボタン縦書き防止 (汎用) */
.btn,
.btn-sm {
    white-space: nowrap;
}

/* ============================================================
   Phase 3-β-5: 取引新規/編集フォーム
   ============================================================ */
.tx-form { display: block; }

.tx-form-type-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--sp-lg);
    border-bottom: 2px solid var(--color-border);
}
.tx-form-type-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: transparent;
    color: var(--color-text-muted);
    border: 0;
    border-bottom: 3px solid transparent;
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.tx-form-type-tab:hover { color: var(--color-text); }
.tx-form-type-tab.is-active.tx-form-type-tab--income {
    color: #2e7d32;
    border-bottom-color: #4caf50;
}
.tx-form-type-tab.is-active.tx-form-type-tab--expense {
    color: #c62828;
    border-bottom-color: #f44336;
}
.tx-form-type-tab.is-locked {
    cursor: not-allowed;
}
.tx-form-type-tab .lock-note {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 8px;
}
.tx-form-type-tab svg { width: 18px; height: 18px; }

.tx-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-md);
    margin-bottom: var(--sp-lg);
}

.tx-form-section {
    margin: var(--sp-lg) 0;
}

.line-items-wrap {
    overflow-x: auto;
    margin-bottom: 8px;
}
.line-items-table {
    width: 100%;
    border-collapse: collapse;
}
.line-items-table th,
.line-items-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.line-items-table th {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: left;
}
.line-items-table th.num,
.line-items-table td.num { text-align: right; }
.line-items-table .col-name { min-width: 180px; }
.line-items-table .col-qty { width: 90px; }
.line-items-table .col-price { width: 130px; }
.line-items-table .col-subtotal { width: 130px; white-space: nowrap; }
.line-items-table .col-action { width: 44px; text-align: center; }
.line-items-table input[type="text"],
.line-items-table input[type="number"] {
    width: 100%;
    padding: 8px;
    font-size: var(--fs-base);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #fff;
}
.line-items-table input[type="number"] { text-align: right; }
.btn-remove-row {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: var(--color-error);
    border: 1px solid var(--color-border);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.btn-remove-row:hover:not(:disabled) {
    background: var(--color-error-bg);
    border-color: var(--color-error);
}
.btn-remove-row:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.line-items-actions {
    margin: 8px 0 var(--sp-lg);
}

@media (max-width: 600px) {
    .line-items-table thead { display: none; }
    .line-items-table tbody,
    .line-items-table tr,
    .line-items-table td { display: block; width: 100%; }
    .line-items-table tr {
        border: 1px solid var(--color-border);
        border-radius: 8px;
        margin-bottom: 12px;
        padding: 8px;
    }
    .line-items-table td {
        border-bottom: 0;
        padding: 4px 0;
    }
    .line-items-table .col-action { text-align: right; }
    .line-items-table .col-name input { min-width: 0; }
}

.tx-form-totals {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: var(--sp-md) 0 var(--sp-lg);
    padding: 12px 16px;
    background: var(--color-primary-light);
    border-radius: 8px;
    max-width: 360px;
    margin-left: auto;
}
.tx-form-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.tx-form-totals-row .num { font-variant-numeric: tabular-nums; }
.tx-form-totals-row--grand {
    border-top: 1px solid var(--color-border);
    padding-top: 6px;
    font-size: var(--fs-md);
}

.tx-form-tags-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 14px;
    background: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.tag-chip:hover { border-color: var(--color-primary); }
.tag-chip.is-selected {
    background: var(--tag-color, var(--color-primary));
    color: #fff;
    border-color: var(--tag-color, var(--color-primary));
}

.form-error {
    display: block;
    color: var(--color-error);
    font-size: var(--fs-sm);
    margin-top: 4px;
}
.alert {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: var(--sp-md);
}
.alert-error {
    background: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

/* ============================================================
   Phase 3-β-5.1: 取引フォーム UI 追い込み
   - 3カード分割 / sticky footer / 明細 PC=table SP=card
   - タグ chip の tag.color 反映 / 合計エリア強調
   ============================================================ */

/* tallybe パレットへのエイリアス: 仕様書の var 名 → 既存 tallybe 変数 */
:root {
    --bg-card: var(--color-card-bg);
    --bg-page: var(--color-bg);
    --bg-card-header: #f8f9fa;
    --bg-muted: #f0f0f0;
    --border: var(--color-border);
    --border-light: #f0f0f0;
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-muted);
    --text-muted: #aaa;
    --accent: var(--color-primary);
    --accent-dark: var(--color-primary-dark);
    /* Phase 3-β-5.9 addendum: 「無効/非アクティブ」を明示するグレートークン
       (opacity を使うと白基調で「ぼやけた白」に見えるため明示的な色を割り当てる) */
    --bg-disabled: #ececec;
    --text-disabled: #b5b5b5;
    --bg-secondary: #f4f5f7;
}

/* ----- 取引フォーム本体 ----- */
/* sticky footer の高さ (約 70px = 12px+ボタン高24px+12px+safe-area) ぶんの padding を
   form 末尾に確保し、最後のテキストエリアが footer に隠れないようにする。 */
.tx-form { padding-bottom: 96px; }

/* ----- カード共通 ----- */
.tx-form-card {
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border);
    margin: 12px 0 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.tx-form-card-title {
    margin: 0;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    background: linear-gradient(to right, rgba(123, 141, 66, 0.06), transparent);
    border-bottom: 1px solid var(--border);
    letter-spacing: 0.02em;
}
.tx-form-card-title em.required { font-style: normal; color: var(--color-error); margin-left: 4px; font-weight: 400; }
.tx-form-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ----- 基本情報グリッド (再定義) ----- */
.tx-form-card .tx-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 0;
}

/* ----- type タブ (既存スタイルを再利用、カード内余白だけ調整) ----- */
.tx-form-card .tx-form-type-tabs { margin-bottom: 4px; }

/* ----- 明細グリッド ----- */
.line-items-grid {
    width: 100%;
}

/* PC: table-like (768px 以上) */
@media (min-width: 768px) {
    .line-items-header,
    .line-item-row {
        display: grid;
        grid-template-columns: 1fr 80px 110px 110px 40px;
        gap: 8px;
        align-items: center;
        padding: 8px 0;
    }
    .line-items-header {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border);
        padding-bottom: 8px;
        margin-bottom: 4px;
    }
    .line-items-header [role="columnheader"]:nth-child(2),
    .line-items-header [role="columnheader"]:nth-child(3),
    .line-items-header [role="columnheader"]:nth-child(4) {
        text-align: right;
    }
    .line-item-row {
        border-bottom: 1px solid var(--border-light);
    }
    .line-item-row:last-child { border-bottom: none; }
    .cell-name input.item-name-input {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 4px;
        font-size: 14px;
    }
    .cell-qty input,
    .cell-unit-price input {
        width: 100%;
        padding: 8px;
        text-align: right;
        border: 1px solid var(--border);
        border-radius: 4px;
        font-size: 14px;
    }
    .cell-subtotal {
        text-align: right;
        font-weight: 600;
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }
    .cell-subtotal .subtotal-display::before {
        content: "¥";
        font-weight: 400;
        color: var(--text-secondary);
        margin-right: 1px;
    }
    .cell-action { text-align: center; }
    .line-item-row [role="cell"][data-label]::before { display: none; }
}

/* SP: card-like (767px 以下) */
@media (max-width: 767px) {
    .line-items-header { display: none; }
    .line-item-row {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
        padding: 12px;
        margin-bottom: 10px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .cell-name { grid-column: 1 / -1; }
    .cell-name input.item-name-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 16px;  /* iOS の zoom 防止 */
    }
    .cell-qty,
    .cell-unit-price {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .cell-qty::before,
    .cell-unit-price::before {
        content: attr(data-label);
        font-size: 11px;
        color: var(--text-secondary);
        font-weight: 500;
    }
    .cell-qty input,
    .cell-unit-price input {
        width: 100%;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 16px;
        text-align: right;
    }
    .cell-subtotal {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding-top: 8px;
        border-top: 1px dashed var(--border-light);
        font-weight: 600;
    }
    .cell-subtotal::before {
        content: "小計";
        font-size: 12px;
        color: var(--text-secondary);
        font-weight: 500;
    }
    .cell-subtotal .subtotal-display::before {
        content: "¥";
        color: var(--text-secondary);
        font-weight: 400;
        margin-right: 1px;
    }
    .cell-action {
        position: absolute;
        top: 6px;
        right: 6px;
    }
}

/* ----- 削除 × ボタン (× を地味に、hover で赤) ----- */
.btn-remove-row {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-remove-row:hover:not([disabled]) {
    background: rgba(208, 69, 69, 0.08);
    color: var(--color-error);
}
.btn-remove-row[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ----- 「+ 明細を追加」破線枠ボタン ----- */
.btn-add-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    margin-top: 12px;
    background: transparent;
    border: 1.5px dashed var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-add-row:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(123, 141, 66, 0.04);
}

/* ----- 合計エリア (右寄せ階層化、税込を強調) ----- */
.line-items-totals {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}
.total-row {
    display: grid;
    grid-template-columns: 100px 160px;
    gap: 12px;
    align-items: center;
    font-size: 14px;
}
.total-label {
    color: var(--text-secondary);
    text-align: right;
}
.total-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.tax-input {
    width: 110px;
    padding: 4px 8px;
    text-align: right;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 14px;
}
.total-row-grand {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1.5px solid var(--border);
}
.total-row-grand .total-label {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}
.total-row-grand .total-value {
    font-weight: 700;
    font-size: 18px;
    color: var(--accent-dark);
}
@media (max-width: 600px) {
    .line-items-totals { align-items: stretch; }
    .total-row { grid-template-columns: 1fr 1fr; }
    .tax-input { width: 100%; }
}

/* ----- タグ chip (色対応 + ドット + 選択時塗り) ----- */
.tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}
.tx-form-card .tag-chip {
    --chip-color: #6b7280;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
    border: 1.5px solid var(--chip-color);
    color: var(--chip-color);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tx-form-card .tag-chip::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chip-color);
    margin-right: 6px;
}
.tx-form-card .tag-chip:hover {
    background: color-mix(in srgb, var(--chip-color) 8%, transparent);
}
.tx-form-card .tag-chip.is-selected {
    background: var(--chip-color);
    color: #fff;
    border-color: var(--chip-color);
}
.tx-form-card .tag-chip.is-selected::before {
    background: #fff;
}

/* ----- Sticky footer ----- */
.tx-form-footer {
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: var(--bg-page);
    border-top: 1px solid var(--border);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    margin-top: 16px;
    margin-left: -16px;
    margin-right: -16px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}
.tx-form-footer .btn {
    flex: 0 1 auto;
    min-width: 100px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tx-form-footer .btn-primary {
    background: var(--accent);
    color: #fff;
}
.tx-form-footer .btn-primary:hover {
    background: var(--accent-dark);
}
.tx-form-footer .btn-cancel {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.tx-form-footer .btn-cancel:hover {
    background: var(--bg-muted);
}
@media (max-width: 600px) {
    .tx-form-footer .btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ----- ボトムナビとの競合解消: フォーム編集中はボトムナビを隠す ----- */
body.is-tx-form .bottom-nav { display: none; }
/* ボトムナビが消えるので app-main の bottom padding を縮める (sticky footer 自体が下端を埋める) */
body.is-tx-form .app-main {
    padding-bottom: var(--sp-md);
}

/* ============================================================
   Phase 3-β-5.2: description を「タイトル」に昇格
   - フォーム上部に大きめ入力
   - 詳細ページで見出し級表示
   - 一覧カードの primary 行
   ============================================================ */

/* ----- フォーム: タイトル入力 (基本情報カード最上部) ----- */
.form-field-title {
    margin-bottom: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
}
.form-field-title label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.form-field-hint {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 4px;
}
.form-input-title {
    width: 100%;
    padding: 12px 14px;
    font-size: 17px;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
}
.form-input-title:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -1px;
    border-color: var(--color-primary);
}
.form-input-title::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

/* ----- 詳細ページ: タイトル見出し ----- */
.tx-detail-title {
    margin: 8px 0 16px;
    padding: 14px 18px;
    background: var(--bg-card);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 8px 8px 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.tx-detail-title-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.tx-detail-title-text {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
}
@media (max-width: 600px) {
    .tx-detail-title { padding: 12px 14px; }
    .tx-detail-title-text { font-size: 18px; }
}

/* ----- 一覧カード: タイトルを primary 行、顧客/カテゴリを secondary 行 ----- */
.tx-list-card-content {
    margin-top: 4px;
    min-width: 0;  /* text-overflow を子要素で効かせるため */
}
.tx-list-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tx-list-card-title-fallback {
    font-weight: 500;
    color: var(--text-secondary);
}
.tx-list-card-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tx-list-card-sub-sep {
    margin: 0 6px;
    color: var(--border);
}
.tx-list-card-sub .meta-deleted {
    margin-left: 4px;
    color: var(--color-error);
    font-size: 11px;
}

/* ============================================================
   Phase 3-β-5.9: 期間ナビ (月◁ 月 月▷ | 年◁ 年 年▷ | 全件)
   - 月/年 各 3 セル (1fr 2fr 1fr) を 1 つのボタンに見せる
   - 全幅比率: 月 40% / 年 40% / 全件 20%
   - 矢印は所属するボタンが非アクティブのとき .is-disabled で操作不可
   ============================================================ */
.period-nav {
    display: grid;
    grid-template-columns: 4fr 4fr 2fr;
    gap: 6px;
    padding: 8px 0 0;
    margin-bottom: 8px;
}
.period-nav-group {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: background 100ms ease-out, border-color 100ms ease-out, box-shadow 100ms ease-out;
}
.period-nav-group > a,
.period-nav-all {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 13px;
    user-select: none;
    transition: background 100ms ease-out, color 100ms ease-out, border-color 100ms ease-out;
}
.period-nav-group > a {
    border-right: 1px solid var(--border);
}
.period-nav-group > a:last-child { border-right: none; }
.period-nav-arrow {
    font-size: 15px;
    line-height: 1;
}
/* Phase tx-fab-polish: 非アクティブグループ内の矢印を「死にすぎ明示グレー」から
   group bg に溶け込む透過 + subtle fade に変更。pointer-events:none で機能は据置、
   見た目は「諦め感」を減らし他モード入口として残す。 */
.period-nav-arrow.is-disabled {
    background: transparent;
    color: var(--text-secondary);
    opacity: 0.55;
    pointer-events: none;
    cursor: default;
}
.period-nav-label {
    font-weight: 500;
}
/* Phase tx-fab-polish: active group は border + box-shadow で枠を強調し、
   label cell のみ --color-primary-soft (薄黄緑) を当てる。矢印セルは container
   bg (card-bg = 白) のまま、文字色だけ muted 化してラベル主役を維持
   (Sato-san 判断: 矢印の背景は白、色だけ変える)。 */
.period-nav-group.is-active {
    border-color: var(--color-primary-soft);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}
.period-nav-group.is-active > .period-nav-arrow {
    color: var(--color-success);
}
.period-nav-group.is-active > .period-nav-arrow:active {
    background: var(--color-primary);
    color: #fff;
}
.period-nav-group.is-active > .period-nav-label {
    background: var(--color-primary-soft);
    color: var(--color-text);
    font-weight: 700;
}
.period-nav-group.is-active > .period-nav-label:active {
    background: var(--color-primary);
    color: #fff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
/* Phase 3-β-5.9 addendum: 非アクティブのラベル・全件はソフトグレー (active との階調を強める) */
.period-nav-group:not(.is-active) > .period-nav-label {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.period-nav-group:not(.is-active) > .period-nav-label:hover {
    color: var(--color-primary);
}
.period-nav-group:not(.is-active) > .period-nav-label:active {
    background: var(--color-primary-soft);
    color: var(--color-text);
}
.period-nav-all {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: background 100ms ease-out, color 100ms ease-out, border-color 100ms ease-out, box-shadow 100ms ease-out;
}
.period-nav-all:hover { color: var(--color-primary); }
.period-nav-all:not(.is-active):active {
    background: var(--color-primary-soft);
    color: var(--color-text);
}
.period-nav-all.is-active {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-soft);
    color: var(--color-text);
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}
.period-nav-all.is-active:active {
    background: var(--color-primary);
    color: #fff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
@media (max-width: 600px) {
    .period-nav { gap: 4px; }
    .period-nav-group > a,
    .period-nav-all { height: 40px; font-size: 13px; }
}

/* 期間つきサマリの span カラーリング (Phase 3-β-5.3) */
.tx-list-summary {
    flex-wrap: wrap;
}
/* Phase 3-β-5.9: 2 段サマリ
   Phase tx-fab-polish: 情報密度の核なのに小さい違和感を解消、若干拡張。 */
.tx-list-summary--two-line {
    display: block;
    padding: 12px 16px;
}
.tx-list-summary-line1 {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 6px;
}
.tx-list-summary-line2 {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
}
.tx-list-summary-period {
    font-weight: 700;
    color: var(--text-primary);
    font-size: var(--fs-md);
}
.tx-list-summary-sep {
    color: var(--border);
    margin: 0 4px;
}
.tx-list-summary-count {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 400;
}
.tx-list-summary-income {
    color: var(--color-success);
    font-weight: 700;
    font-size: var(--fs-md);
}
.tx-list-summary-expense {
    color: var(--color-error);
    font-weight: 700;
    font-size: var(--fs-md);
}

/* 当月 0 件時の空状態 */
.tx-list-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-secondary);
}
.tx-list-empty p { margin: 0 0 8px; }
.tx-list-empty .link-action {
    display: inline-block;
    margin-top: 4px;
    color: var(--color-primary);
    text-decoration: underline;
}

/* ============================================================
   Phase 3-β-5.4 / 5.5: 見積もり (status='quote') 関連
   - 登録区分ラジオ (transaction 新規フォーム)
   - 見積もりバッジ (一覧/詳細)
   ============================================================ */
.form-field-status-select {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}
.form-field-status-select fieldset {
    border: none;
    padding: 0;
    margin: 0;
}
.form-field-status-select legend.form-field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.status-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin-right: 8px;
    margin-bottom: 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    background: var(--bg-card);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.status-radio:hover { border-color: var(--color-primary); }
.status-radio:has(input:checked) {
    border-color: var(--color-primary);
    background: rgba(123, 141, 66, 0.08);
    color: var(--color-primary-dark);
    font-weight: 500;
}
.status-radio input[type="radio"] {
    margin: 0;
}

/* 見積もりバッジ (一覧カード/詳細ヘッダ) */
.quote-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: #6c7a89;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: 0.04em;
}

/* 見積詳細「ステータス操作」セクション */
.quote-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.quote-actions .btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* 見積一覧サマリ用 */
.tx-list-summary-amount {
    color: var(--color-primary-dark);
    font-weight: 600;
}

/* ============================================================
   Phase 3-β-5.7-α: サイドバー半透明 + 店舗管理ハブ
   ============================================================ */

/* M-2e-η-fix: M-2e-η の `.sidebar::before` underlay は CSS painting 順序で
   `.sidebar` 自身の rgba(0.70) 背景を完全に覆ってしまい (step 1: element bg
   → step 2: negative-z descendants)、translucent 質感が消える bug があった
   (Playwright 実測で確認)。`.sidebar` の sibling として `.sidebar-bg-underlay`
   を DOM 上 sidebar より前に置くことで、stacking 順序で sidebar の真裏に位置し、
   `backdrop-filter` がこの underlay (純白 light / 純黒 dark) を blur する構造に。
   page bg `--color-bg: #f5f7fa` の灰色 bleed を回避しつつ frosted glass 質感維持。 */
.sidebar {
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(12px) saturate(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
}
/* M-2e-η-fix: sibling underlay。sidebar と同じ位置 / サイズ / slide animation で
   z-index: 89 (sidebar 90 の真下)。pointer-events: none で sidebar の overlay
   click 等を妨げない。dark テーマは下の [data-theme="dark"] block で background
   を override。
   背景は白 0.85 alpha — 完全 opaque だと sidebar の translucent + backdrop-filter
   の視覚効果が "blur over solid = solid" で完全に消えるため、わずかに
   transparency を残し body bg の 15% を blur 経由で混ぜる。これで Maeda-san の
   「白ベースで半透明」感を担保しつつ、Phase 5.7-ζ の灰色 bleed (= 100% body bg
   通過) を避ける。 */
.sidebar-bg-underlay {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    width: var(--sidebar-w);
    height: calc(100dvh - var(--topbar-h) - var(--bottom-nav-h) - env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.85);
    /* beta285: sidebar 系 lift (sidebar 1090 の真下、tooltip 1000 より上)。 */
    z-index: 1089;
    transform: translateX(-100%);
    /* Phase 1.4: sidebar 系と同期して 100ms に揃える (close lag fix)。 */
    transition: transform .1s;
    pointer-events: none;
}
body.sidebar-open .sidebar-bg-underlay {
    transform: translateX(0);
}
/* デスクトップでは sidebar が常時表示なので underlay も常時表示 */
@media (min-width: 769px) {
    .sidebar-bg-underlay { transform: translateX(0); }
}
/* Phase 5.7-ε: ブランド行は完全不透明にして区切り感を維持 */
.sidebar .sidebar-brand {
    background: var(--color-card-bg);
}
/* 子要素の文字・アイコンは完全不透明に固定 (背景 alpha は子に継承されない仕様だが belt-and-suspenders) */
.sidebar a,
.sidebar .nav-label,
.sidebar svg,
.sidebar img,
.sidebar h1,
.sidebar h2,
.sidebar strong,
.sidebar .user-email,
.sidebar .sidebar-version {
    opacity: 1;
}

/* 店舗管理 hub */
.store-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 16px 0;
}
.store-hub-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.store-hub-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
.store-hub-card-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(123, 141, 66, 0.10);
    border-radius: 10px;
    color: var(--color-primary);
}
.store-hub-card-icon svg { width: 24px; height: 24px; }
.store-hub-card-body { flex: 1 1 auto; min-width: 0; }
.store-hub-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.store-hub-card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* 店舗設定フォーム — placeholder 行 */
.placeholder-tag {
    font-size: 11px;
    font-weight: 400;
    background: var(--bg-muted);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
    vertical-align: middle;
}
.form-input:disabled,
input[type="text"]:disabled {
    background: var(--bg-muted);
    color: var(--text-muted);
    cursor: not-allowed;
}
.alert-success {
    background: rgba(76, 175, 80, 0.08);
    color: #2e7d32;
    border: 1px solid #a5d6a7;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: var(--sp-md);
}

/* ============================================================
   Phase 3-β-5.7-β: ダークモード + サイドバー底部 + 設定ページ
   ============================================================ */

/* ----- ダークモード変数 (data-theme=dark のとき override) -----
   既存の tallybe パレット (--color-*) と Phase 5.7-α エイリアス (--bg-*, --text-*) を
   両方上書きする。 light theme は :root で定義済みなので無変更。 */
/* ⚠ Critical CSS 二重管理 (decisions v2.102): --color-primary / --color-primary-dark /
   --color-bg / --color-card-bg / --color-border の 5 個は base.html の <style>
   Critical CSS の [data-theme="dark"] にも複製。変更時は両方更新必須。 */
[data-theme="dark"] {
    /* Phase 5.x グローバルリップル: 暗背景では白アルファに反転。 */
    --ripple-color: color-mix(in srgb, var(--color-primary) 30%, #fff 70%);

    /* 既存 tallybe 変数 */
    --color-primary: #9eb35a;
    --color-primary-dark: #c2d076;
    --color-primary-light: #2a3019;
    /* --color-primary-soft (dark theme):
       dark 背景でギラつかないよう、light 版より彩度・明度の上げ幅を控えめに。
       Sato-san 実機調整余地あり (本値は規約からの初期 starting value)。 */
    --color-primary-soft: #c8d585;
    --color-accent: #82b06a;
    --color-bg: #1a1d21;
    --color-card-bg: #252930;
    --color-text: #e6e9ec;
    --color-text-muted: #9ba2aa;
    --color-border: #3d434c;
    --color-error: #ef5350;
    --color-error-bg: #3a1f20;
    --color-success: #66bb6a;
    --color-warning: #ffa726;

    /* M-2c-α: ダーク用ラベル色トーン上げ. 登録は near-black では
       ダーク背景に埋もれるので gray-200 に反転 (formal/neutral 維持).
       Phase β (2026-05-13): --color-label-customer / --color-label-system は :root
       で var(--schedule-color-{2,1}) alias 化済、本ブロックで再宣言しないことで
       schedule の dark 値 (--schedule-color-{2,1}: #3d4ba5 / #a8d8ec) を lazy
       resolution で自動継承する。schedule 色を変えれば messages も追従。 */
    --color-label-promo:    #fb923c;  /* orange-400 */
    --color-label-register: #e5e7eb;  /* gray-200 */
    --color-label-trash:    #6b7280;  /* gray-500 */
    /* M-2c-β: お気に入り — amber-300 (やや明るく) */
    --color-label-starred:  #fcd34d;
    /* M-2e-δ: ハート — pink-400 (dark で若干明るめ) */
    --color-label-heart:    #f472b6;
    /* M-2d: dark 用 hover / 派生背景 */
    --color-row-hover: #2a3019;     /* = --color-primary-light (dark) */
    --color-bg-subtle: #21241b;     /* card-bg と bg の間のトーン */

    /* 5.7-α エイリアス (本ファイル末尾の :root で定義済) を上書き */
    --bg-card: #252930;
    --bg-page: #1a1d21;
    --bg-card-header: #2a2e35;
    --bg-muted: #2f343c;
    --border: #3d434c;
    --border-light: #2f343c;
    --text-primary: #e6e9ec;
    --text-secondary: #a0a6ad;
    --text-muted: #707880;
    --accent: #9eb35a;
    --accent-dark: #c2d076;
    /* Phase 3-β-5.9 addendum: ダーク用 disabled トーン
       (バッジ/page bg より暗めで「沈んでいる」と判別できる輝度に) */
    --bg-disabled: #1d2025;
    --text-disabled: #5d646c;
    --bg-secondary: #2c313a;
    /* FAB 陰影 (dark theme 用に alpha 強化、暗背景でも陰影が見えるよう調整) */
    --shadow-fab: 0 6px 10px rgba(0, 0, 0, 0.45);
    --shadow-fab-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.30);
}

/* ダーク時のフォーム要素: 既存 input は <body bg> に依存して描かれる箇所が多いので
   ブラウザデフォルトの白塗りを上書き。 */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input:not([type]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border);
}
[data-theme="dark"] input:disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] select:disabled {
    background: var(--bg-muted);
    color: var(--text-muted);
}
/* Chrome の autofill 黄色を抑制 */
[data-theme="dark"] input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px var(--bg-card) inset;
    -webkit-text-fill-color: var(--text-primary);
}

/* ----- サイドバー底部 (display name + ⚙) ----- */
/* M-2e-ζ: sidebar-user は <a href=settings> でラップして行全体を tap target に。
   padding を 14px 16px に拡大してサム親指で押しやすく。inner gear (sidebar-settings-link)
   は冗長なので非表示、staff のプロファイル切替ボタンは event.stopPropagation で独立動作。 */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 8px;
}
.sidebar-user:hover {
    background: var(--color-row-hover, rgba(0, 0, 0, 0.04));
    text-decoration: none;
}
.sidebar-user:active {
    background: var(--color-row-active, rgba(0, 0, 0, 0.08));
}
[data-theme="dark"] .sidebar-user:hover {
    background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .sidebar-user:active {
    background: rgba(255, 255, 255, 0.10);
}
/* 行が link になったので内側 gear (旧 sidebar-settings-link) は冗長。HTML 側で削除予定 */
.sidebar-user .sidebar-settings-link { display: none; }
.sidebar-user-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}
.sidebar-user-name {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-settings-link {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.sidebar-settings-link:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-primary);
}
[data-theme="dark"] .sidebar-settings-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ----- 設定ページ ----- */
.settings-list {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 16px;
    margin: 0;
}
.settings-list dt {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}
.settings-list dd {
    margin: 0;
    font-size: 14px;
    color: var(--text-primary);
}
.setting-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 16px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}
.setting-row:last-child { border-bottom: none; }
.setting-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.theme-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.theme-option {
    padding: 8px 14px;
    font-size: 13px;
    background: var(--bg-card);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-right: 1px solid var(--border);
}
.theme-option:last-child { border-right: none; }
.theme-option.is-active {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}
.theme-option:hover:not(.is-active) {
    background: var(--bg-muted);
}

.plan-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.plan-badge-free {
    background: var(--bg-muted);
    color: var(--text-secondary);
}
.plan-badge-standard {
    background: rgba(33, 150, 243, 0.15);
    color: #1976d2;
}
.plan-badge-pro {
    background: rgba(123, 141, 66, 0.15);
    color: var(--color-primary-dark);
}

.btn-logout {
    display: inline-block;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--color-error);
    color: var(--color-error);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}
.btn-logout:hover {
    background: var(--color-error-bg);
}

.muted { color: var(--text-muted); font-size: 13px; }
.settings-hint {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .settings-list,
    .setting-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ----- ダーク時の既存「白島」コンポーネント上書き (first-pass best-effort) -----
   元 CSS は background: #fff をハードコードしている箇所が多く、変数化していないため
   全画面ダーク化を完全には満たせない。可視性の高い主要要素のみ明示的に override。
   覆っていない箇所 (一部 badge / カレンダー / フォーム旧スタイル) は次フェーズで掃除予定。 */
[data-theme="dark"] body {
    background: var(--color-bg);
    color: var(--color-text);
}
[data-theme="dark"] .topbar { background: var(--color-primary-dark); }
[data-theme="dark"] .tx-card,
[data-theme="dark"] .tx-toolbar,
[data-theme="dark"] .dd-menu,
[data-theme="dark"] .filter-panel,
[data-theme="dark"] .info-box,
[data-theme="dark"] .tx-form-card,
[data-theme="dark"] .store-hub-card,
[data-theme="dark"] .line-item-row,
[data-theme="dark"] .tx-list-empty,
[data-theme="dark"] .data-summary-card {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border);
}
/* Phase 3-β-5.9: compact filter は閉じている時 transparent。 */
[data-theme="dark"] .filter-panel--compact:not([open]) {
    background: transparent;
    border-color: transparent;
}
[data-theme="dark"] .filter-panel--compact > summary {
    color: var(--text-secondary);
    border-color: var(--border-light);
}
[data-theme="dark"] .filter-panel--compact[open] > summary {
    background: var(--bg-card-header);
    color: var(--text-primary);
}
[data-theme="dark"] .tx-card-row2,
[data-theme="dark"] .tx-list-card-sub,
[data-theme="dark"] .tx-card-date,
[data-theme="dark"] .tx-form-card-title {
    color: var(--text-secondary);
}
[data-theme="dark"] .tx-list-card-title { color: var(--text-primary); }
[data-theme="dark"] .summary-bar,
[data-theme="dark"] .tx-form-totals,
[data-theme="dark"] .tx-detail-title {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--bg-card));
    color: var(--text-primary);
}
[data-theme="dark"] .tx-form-card-title {
    background: var(--bg-card-header);
    border-bottom-color: var(--border);
}
[data-theme="dark"] .btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border);
}
[data-theme="dark"] .placeholder-tag,
[data-theme="dark"] .badge-count {
    background: var(--bg-muted);
    color: var(--text-secondary);
}
[data-theme="dark"] .alert-success {
    background: rgba(102, 187, 106, 0.12);
    color: #81c784;
    border-color: #2e7d32;
}
[data-theme="dark"] .alert-error {
    background: rgba(239, 83, 80, 0.10);
    color: #ef9a9a;
    border-color: #c62828;
}
/* ボトムナビとサイドバーは半透明 + blur を活かす */
[data-theme="dark"] .bottom-nav {
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    border-top-color: var(--border);
}
/* Phase 5.7-γ hotfix: ダーク時のサイドバー半透明 + backdrop-blur。
   Phase 5.7-ε→ζ: 0.85 → 0.70 (ライト同様、brand 行 opaque)。
   M-2e-η-fix: ライトと同じ sibling underlay 構造で揃える。translucent + blur は
   base .sidebar から継承、background だけ darker rgba に上書き、`.sidebar-bg-underlay`
   は dark card bg で override。 */
[data-theme="dark"] .sidebar {
    background: rgba(37, 41, 48, 0.70);
}
[data-theme="dark"] .sidebar-bg-underlay {
    background: rgba(37, 41, 48, 0.85);
}
[data-theme="dark"] .sidebar .sidebar-brand {
    background: var(--bg-card);
}
[data-theme="dark"] .overlay {
    background: rgba(0, 0, 0, 0.55);
}

/* ============================================================
   Phase 3-β-5.7-γ: 左端スワイプの gesture exclusion zone
   ----------------------------------------------------
   Android Chrome のシステム戻るジェスチャーは、画面左端からの touch を OS が
   先取りし JS まで届かない。CSS `touch-action: pan-y` を持つ要素上では
   Chromium が GestureExclusion を Android に通知し touch event がページに届く。
   src: https://developer.android.com/develop/ui/views/touch-and-input/gestures/gesturenav
        https://github.com/w3c/pointerevents/issues/295
   ============================================================ */
.edge-swipe-zone {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 24px;
    z-index: 50;             /* 主コンテンツ上、サイドバー (90+) 下 */
    touch-action: pan-y;     /* 縦スクロールは許可、横スワイプは JS に */
    -webkit-tap-highlight-color: transparent;
    background: transparent; /* 視覚的に見えない */
    pointer-events: auto;
}
/* デスクトップ常時表示モードではサイドバーが既に開いた状態なのでゾーン不要 */
@media (min-width: 769px) {
    .edge-swipe-zone { display: none; }
}
/* サイドバー開いてる時は二重発火防止のため非表示 (admin.js が body.sidebar-open を toggle) */
body.sidebar-open .edge-swipe-zone {
    display: none;
}

/* ============================================================
   Phase 3-β-5.7-δ: ボトムナビ コントラスト強化 + スライド インジケータ
   ============================================================ */

/* 既存 .bottom-nav .nav-item 系のルールを上書きしてコントラストを強める。
   active = primary green、未選択 = muted。
   Phase 5.7-ε: 旧版で position:relative を加えたが、line 627 の position:fixed を
   clobber してナビが viewport 下端に張り付かなくなる回帰を引き起こしていた。
   position:fixed は子の absolute の positioning context を作るので relative 不要。 */

.bottom-nav .nav-item {
    color: var(--color-text-muted);
    font-weight: 500;
    transition: color 0.18s ease;
}
.bottom-nav .nav-item:hover {
    color: var(--color-text);
}
.bottom-nav .nav-item.is-active {
    color: var(--color-primary);
    font-weight: 600;  /* 700 だと太すぎ感、600 で十分強調 */
}
.bottom-nav .nav-item svg {
    transition: transform 0.18s ease;
}
.bottom-nav .nav-item.is-active svg {
    transform: scale(1.08);
    color: var(--color-primary);
}

/* スライド インジケータ */
.bottom-nav-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 20%;          /* JS が itemCount から再計算 */
    background: var(--color-primary);
    border-radius: 2px 2px 0 0;
    transform: translateX(0);
    /* Phase 5.7-η-fix4: transform の CSS transition を撤去。CSS transition と JS による
       inline transform 書込みの競合で Chrome Android では paint scheduling 次第で
       「初回 left → idx, 以降 warp」というランダム発火が起きていた。
       transform は admin.js が Web Animations API で明示的に keyframes 制御する。
       opacity だけは fade in/out 用に CSS transition を残す。 */
    transition: opacity 0.18s ease;
    pointer-events: none;
    opacity: 0;          /* JS が active 時に 1 に */
    z-index: 1;
}

/* ============================================================
   Phase 3-β-5.7-δ: 店舗管理サブタブ (5 sub-page を横タブで結ぶ)
   ============================================================ */
.store-subtabs {
    display: flex;
    gap: 0;
    margin: 0 0 var(--sp-md);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.store-subtabs::-webkit-scrollbar { display: none; }
.store-subtab {
    /* beta287: 5 subtab を画面幅で均等分割 (元 flex: 0 0 auto で左寄りだった、
       Sato-san FB「均等にして」)。flex: 1 1 0 で grow 等分、text-align center で
       文字を tab 中央配置。狭画面で文字が溢れる場合は親 overflow-x: auto で scroll。 */
    flex: 1 1 0;
    text-align: center;
    padding: 10px 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.18s, border-color 0.18s;
    white-space: nowrap;
}
.store-subtab:hover {
    color: var(--color-text);
}
.store-subtab.is-active {
    color: var(--color-primary);
    font-weight: 600;
    border-bottom-color: var(--color-primary);
}

/* ============================================================
   Phase 3-β-5.7-ζ: サイドバー開いた時の背景スクロールロック
   ----------------------------------------------------
   admin.js の openMenu/closeMenu が body.sidebar-open を toggle している前提。
   ロック中も sidebar 自身は内部スクロール可能のままにする (パン y のみ許可)。
   Android Chrome のアドレスバー auto-hide による visual gap も防止される。
   ============================================================ */
/* M-2e-η: 旧 body scroll lock (overflow:hidden + touch-action:none) は
   「タップ反応するけどスクロール無反応」の混乱を生んでいたので撤回。
   sidebar 開きながら body は通常 scroll、その scroll 自体が close trigger
   になる (admin.js の scroll/touchmove listener 参照)。
   sidebar 内部 scroll (長い nav リスト等) は引き続き有効。 */
body.sidebar-open .sidebar {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* ============================================================
   Phase M-2a: メール受信箱 (mobile-first 全面刷新)
   - 旧 M-1 (.mail-* クラス) は撤去、.msg-* を採用。
   - 主な狙い:
     1. 横スクロール撲滅 (overflow-wrap + min-width: 0 + minmax(0, 1fr))
     2. SNS 風の subject/snippet 単行 truncate
     3. 太字 = 未読 (タブから「未読」を削除)
     4. 受信 / ゴミ箱 の 2 タブ + バッジ
     5. ピル形検索 (focus でわずかに scale + shadow lift)
     6. 右スワイプで Trash 移動 (CSS は reveal/transform、JS は touch event)
   ============================================================ */

/* ---- flash variants (M-1 から流用) ---- */
.flash-info {
    background: #e6f4ff;
    color: #0c5294;
    border: 1px solid #5fa8d3;
}
.flash-warning {
    background: #fff5e0;
    color: #8a5a00;
    border: 1px solid #d6a843;
}
.flash-error {
    background: #fdecea;
    color: #b3261e;
    border: 1px solid #e08079;
}
.msg-autosync-banner { font-size: var(--fs-sm); }

/* Mobile messages list: prevent horizontal overflow from long unbroken strings
   (English subjects, URLs). 親 .app-main を超えて伸びさせない。
   M-2e-η: `overflow-x: hidden` だと CSS spec 上 overflow-y も auto に
   暗黙昇格され `.app-main` が scroll container 化、`.msg-tabs` の
   `position: sticky` が「.app-main 内で stick」になるが `.app-main` は
   高さ制約なくスクロールしないため sticky range ゼロで動作不能だった。
   `overflow-x: clip` は scroll container を作らない (CSS Overflow 3) ので
   sticky が body viewport 基準で正しく動く。Chrome 90+ / Firefox 81+ /
   Safari 15.4+ サポート、Maeda-san 環境は十分新しい。 */
.msg-list-page .app-main { overflow-x: clip; }

/* ---- Header: search pill + tabs ----
   M-2e-η-fix: `.msg-tabs` 自身に `position: sticky + overflow-x: auto` を当てると、
   CSS Overflow 3 仕様で `.msg-tabs` が scroll container 化 → sticky が無効化される
   (Playwright 実測で `position: static` に resolve されることを確認)。
   sticky を親 `.msg-list-header` に移動、`.msg-tabs` は overflow-x: auto を維持して
   iPhone SE 等で 7 アイコン横スクロール可能に。 */
.msg-list-header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    margin-bottom: var(--sp-sm);
    position: sticky;
    top: var(--topbar-h);
    z-index: 8;
    background: var(--color-bg);
    transition: top 0.2s ease;
}
body[data-header-hidden="true"] .msg-list-header {
    top: 0;
}
.msg-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0 var(--sp-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    min-width: 0;
}
.msg-search:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 2px 12px rgba(123, 141, 66, 0.18);
    transform: scale(1.02);
}
.msg-search-icon {
    flex-shrink: 0;
    font-size: 1em;
    color: var(--color-text-muted);
    margin-right: 4px;
    line-height: 1;
}
.msg-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 8px 4px;
    font-size: var(--fs-base);
    color: var(--color-text);
    appearance: none;
    -webkit-appearance: none;
}
/* iOS Safari の検索 input ネイティブ × ボタンを抑止 (我々の clear リンクと重複するため) */
.msg-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.msg-search-clear {
    flex-shrink: 0;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 0 6px;
    font-size: 1.1em;
    line-height: 1;
    border-radius: 50%;
}
.msg-search-clear:hover { background: var(--color-primary-light); color: var(--color-text); }

@media (min-width: 720px) {
    .msg-list-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .msg-search { max-width: 360px; margin-left: auto; order: 2; }
    .msg-tabs { order: 1; }
}

/* ---- Tabs (M-2b: 5 タブ → M-2e-δ: 7 タブ 未/顧/宣/登/♡/☆/🗑) ----
   M-2e-η-fix: position: sticky は親 `.msg-list-header` に移動 (理由: overflow-x:
   auto と sticky を同要素に当てると Chromium が sticky を static に reset するため)。
   .msg-tabs 自身は overflow-x: auto を維持して 7 アイコンの横スクロールを可能に。 */
.msg-tabs {
    display: flex;
    gap: var(--sp-sm);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.msg-tabs::-webkit-scrollbar { display: none; }
.msg-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--fs-base);
    font-weight: 500;
    background: transparent;
    white-space: nowrap;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
@media (max-width: 480px) {
    .msg-tabs { gap: 2px; }
    .msg-tab { padding: 8px 8px; font-size: 14px; }
}
/* M-2c-α: active タブにラベル色を適用. text + 下線 + バッジ背景の 3 箇所.
   "all" は色を意図せず持たないので既存 default (--color-primary) のまま。 */
.msg-tab.is-active[data-label="customer"] {
    color: var(--color-label-customer);
    border-bottom-color: var(--color-label-customer);
}
.msg-tab.is-active[data-label="promo"] {
    color: var(--color-label-promo);
    border-bottom-color: var(--color-label-promo);
}
.msg-tab.is-active[data-label="register"] {
    color: var(--color-label-register);
    border-bottom-color: var(--color-label-register);
}
.msg-tab.is-active[data-label="trash"] {
    color: var(--color-label-trash);
    border-bottom-color: var(--color-label-trash);
}
/* M-2e-δ: ハート (♡) アクティブ配色 (pink). */
.msg-tab.is-active[data-label="heart"] {
    color: var(--color-label-heart);
    border-bottom-color: var(--color-label-heart);
}
/* Phase β (2026-05-13): システム アクティブ配色 (= schedule 予約色 alias). */
.msg-tab.is-active[data-label="system"] {
    color: var(--color-label-system);
    border-bottom-color: var(--color-label-system);
}
.msg-tab.is-active[data-label="customer"] .msg-tab-badge {
    background: var(--color-label-customer);
}
.msg-tab.is-active[data-label="promo"] .msg-tab-badge {
    background: var(--color-label-promo);
}
.msg-tab.is-active[data-label="register"] .msg-tab-badge {
    background: var(--color-label-register);
}
.msg-tab.is-active[data-label="trash"] .msg-tab-badge {
    background: var(--color-label-trash);
}
.msg-tab.is-active[data-label="heart"] .msg-tab-badge {
    background: var(--color-label-heart);
}
.msg-tab.is-active[data-label="system"] .msg-tab-badge {
    background: var(--color-label-system);
}
/* M-2c-β: お気に入り (☆) アクティブ配色. ゴールド背景に dark text でコントラスト. */
.msg-tab.is-active[data-label="starred"] {
    color: var(--color-label-starred);
    border-bottom-color: var(--color-label-starred);
}
.msg-tab.is-active[data-label="starred"] .msg-tab-badge {
    background: var(--color-label-starred);
    color: #1f2937;
}
/* M-2c-β: SVG trash アイコン用 tab. padding を絞り、icon は currentColor で
   親の text color を継承 (active 時に msg-tab.is-active のラベル色に追従). */
.msg-tab-icon {
    padding-left: 8px;
    padding-right: 8px;
}
.msg-tab-svg {
    display: block;
    color: var(--color-text-muted);
}
.msg-tab.is-active .msg-tab-svg {
    color: var(--color-label-trash);
}
.msg-tab:hover { background: var(--color-primary-light); color: var(--color-text); text-decoration: none; }
.msg-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}
.msg-tab-badge {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

/* ---- Pull-to-refresh indicator ---- */
.msg-ptr-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    transition: height 0.18s ease, opacity 0.18s ease;
    opacity: 0;
}
.msg-ptr-indicator.is-active {
    height: 36px;
    opacity: 1;
}
.msg-ptr-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: msg-ptr-spin 0.6s linear infinite;
}
@keyframes msg-ptr-spin { to { transform: rotate(360deg); } }

/* ---- List ---- */
.msg-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--sp-sm);
}
.empty-state { text-align: center; color: var(--color-text-muted); padding: var(--sp-xl) 0; }

/* ---- Row: positioning + swipe substrate ----
   .msg-row はスワイプ時に下から赤い "ゴミ箱へ" 帯を見せるための relative wrapper。
   スワイプ中、JS が .msg-row-link に translateX を当てる。 */
.msg-row {
    position: relative;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    /* スワイプ中ブラウザ既定の水平 pan を抑止し、JS のみで translate する */
    touch-action: pan-y;
    /* M-2c-α: 左 4px 帯でラベル色 accent. 既定 transparent、effective-kind 値で色付け. */
    border-left: 4px solid transparent;
}
.msg-row[data-effective-kind="customer"] { border-left-color: var(--color-label-customer); }
.msg-row[data-effective-kind="promo"]    { border-left-color: var(--color-label-promo); }
.msg-row[data-effective-kind="register"] { border-left-color: var(--color-label-register); }
.msg-row[data-effective-kind="heart"]    { border-left-color: var(--color-label-heart); }
.msg-row[data-effective-kind="system"]   { border-left-color: var(--color-label-system); }
/* Trash 内のカードはグレー context が十分なのでラベル色を出さない */
.msg-row[data-folder="Trash"] { border-left-color: transparent; }
/* M-2c-β: ☆ お気に入りカードに gold 帯を重ねる (dual-border).
   `.msg-row` の `box-shadow: inset` は子の `.msg-row-link` (background:#fff,
   z-index:1) に覆われるため、`::after` を absolute で z-index:2 に重ねる。
   `position: absolute; left: 0` は親の padding-box 基準、つまり 4px 左ボーダー
   の内側 (= ラベル色 border の右隣) に張り付く形で 2px gold strip を描く。
   未分類 (label transparent) なら gold が card 端付近 (4px の透明 border 直後)
   に見え、ラベル付き (label color) なら 4px ラベル色 + 2px gold の dual band. */
.msg-row[data-starred="1"]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--color-label-starred);
    z-index: 2;
    pointer-events: none;
}

/* ---- M-2d: アコーディオン展開 (詳細画面廃止 → インライン表示) ---- */
/* `.msg-row-summary` は `.msg-row-link` と同じ要素 (button) に重ねて class が
   付いているので、既存スタイル (背景/padding/swipe transform) は流用される。
   button 既定の reset を当てて見た目を a タグと揃える。 */
.msg-row-summary {
    width: 100%;
    text-align: left;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    /* swipe 用の transform は .msg-row-link 経由で適用される (二重指定回避) */
}
.msg-row.is-expanded .msg-row-summary {
    background: var(--color-row-hover);
}

/* stage 2-B (2026-05-13): snippet は展開時に hide (詳細ペインや本文と情報二重化を回避). */
.msg-row.is-expanded .msg-row-snippet {
    display: none;
}

/* stage 2-B (2026-05-13): 日付 short/long 切替.
   default: short のみ表示 (`05/06 14:21`)、long で年付き (`2026/05/06 14:21`)。
   stage 2-C UX (beta227): 切替 trigger を `.is-detail-open` から `.is-expanded` に変更。
   i tap (差出人ちらみ) では year prefix を出さず short のままが Sato-san 期待挙動、
   year は本文 (body) を開いた時にだけ意味のある情報として提示する。 */
.msg-row-date-short { display: inline; }
.msg-row-date-long  { display: none; }
.msg-row.is-expanded .msg-row-date-short { display: none; }
.msg-row.is-expanded .msg-row-date-long  { display: inline; }

/* stage 2-C (2026-05-13): 送信元詳細トグル i ボタン.
   line1 内 (from-name と date の間) に flex child として常時配置。
   collapsed / expanded 問わず常時表示、tap で詳細ペインのみ独立開閉。
   align-self: center は line1 の baseline 配置と独立して垂直中心化するため. */
.msg-info-toggle {
    flex-shrink: 0;
    align-self: center;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.msg-info-toggle:hover {
    background: var(--color-row-hover);
    color: var(--color-text);
}
.msg-info-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.msg-row.is-detail-open .msg-info-toggle {
    color: var(--color-primary);
}

/* stage 2-C UX (beta226): 旧 shell-isolation guard は detail pane が shell 外に
   移設されたので不要 (削除済)。i open は shell.hidden を触らない → body/toolbar/
   attachments は単純に shell hidden のまま隠れる。 */

.msg-row-expanded[hidden] { display: none; }
.msg-row-expanded {
    display: block;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    z-index: 3;  /* swipe::before (z:0) + link (z:1) + ::after star (z:2) より上 */
    position: relative;
}

/* stage 2-B (2026-05-13): 旧 .msg-expanded-sticky / .msg-expanded-meta /
   .msg-expanded-from-name / .msg-expanded-subject / .msg-expanded-date /
   .msg-expanded-collapse の 7 selectors を削除。役割を新 .msg-expanded-detail
   (FROM/TO/CC ペイン) と summary 行 (件名 / from-name / 日付 short/long 切替) に
   再配置。.msg-expanded-from-addr は addr 値表示として detail-pane 内で再利用
   (クラス名残置)。 */
.msg-expanded-detail[hidden] { display: none; }
.msg-expanded-detail {
    /* stage 2-C UX (beta226): detail pane が .msg-row-main 直下 (line1 と subject の間) に
       移動したため、padding を inline 配置に合わせて圧縮 + border-bottom を撤去
       (shell 内 divider 役割は消滅、background hover 色で領域分離は十分)。 */
    display: block;
    margin: var(--sp-xs) 0;
    padding: var(--sp-sm) var(--sp-md);
    background: var(--color-row-hover);
    border-radius: 4px;
    font-size: var(--fs-sm);
    color: var(--color-text);
}
.msg-expanded-detail-row {
    display: flex;
    gap: var(--sp-sm);
    line-height: 1.6;
    word-break: break-all;
}
.msg-expanded-detail-row[hidden] { display: none; }
.msg-expanded-detail-label {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-weight: 600;
    min-width: 3.5em;
}
.msg-expanded-detail-value {
    flex: 1 1 auto;
    color: var(--color-text);
    overflow-wrap: anywhere;
}
/* .msg-expanded-from-addr はクラス名残置 (旧 sticky 内の addr 表示要素として
   定義していたが、stage 2-B では .msg-expanded-detail-value と組合せで使用、
   個別 styling は不要なので空 selector ルール削除済)。 */

/* stage 2-C: Reply-To のドメインが From と異なる時に出す ⚠ マーク. */
.msg-expanded-replyto-warn {
    flex-shrink: 0;
    margin-left: var(--sp-xs);
    color: var(--color-warning);
    font-size: var(--fs-sm);
}
.msg-expanded-replyto-warn[hidden] { display: none; }

.msg-expanded-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-md);
    padding: var(--sp-sm) var(--sp-md);
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
}
.msg-expanded-toolbar[hidden] { display: none; }
.msg-expanded-html-toggle {
    background: none;
    border: 1px solid var(--color-border);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: inherit;
}
.msg-expanded-html-toggle[data-mode="html"] {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.msg-expanded-html-pin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text-muted);
}

.msg-expanded-body {
    padding: var(--sp-md);
    min-height: 80px;
}
.msg-expanded-loading {
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--sp-lg) 0;
}
.msg-expanded-body-text {
    /* font-family は body 既定 (Noto Sans JP) を継承するので明示なし */
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--color-text);
}
.msg-expanded-body-html {
    width: 100%;
    /* M-2e-β: min-height 撤廃 — iframe 内 notifier が postMessage で動的高さ通知、
       JS が iframe.style.height をセット → 内部スクロール消滅 + カード一体スクロール. */
    border: 0;
    background: #fff;
    border-radius: 4px;
    display: block;
}
[data-theme="dark"] .msg-expanded-body-html {
    background: #fff;  /* HTML mail は light bg 前提なので dark でも白を維持 */
}

/* Phase LINE-1: メッセージ source channel バッジ (一覧の subject 行頭) */
.msg-channel-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    margin-right: 6px;
    border-radius: 3px;
    vertical-align: 1px;
    letter-spacing: 0.02em;
}
.msg-channel-badge--line {
    color: #fff;
    background: #06c755;  /* LINE brand green */
}

/* Phase LINE-1: 同一送信者 LINE 連続行を「会話 continuation」として畳む。
   display 順 DESC で 1 行上が同じ line_user_id の場合、template が
   .msg-row--continuation を付与する。ヘッダ・件名・長日付を hide、
   時刻 (HH:MM) と本文 snippet だけ残し、上行と border を一体化する。 */
.msg-row-date-time-only { display: none; }
.msg-row--continuation .msg-row-from,
.msg-row--continuation .msg-info-toggle,
.msg-row--continuation .msg-row-subject,
.msg-row--continuation .msg-row-date-short,
.msg-row--continuation .msg-row-date-long {
    display: none;
}
.msg-row--continuation .msg-row-date-time-only {
    display: inline;
    font-size: 11px;
    color: var(--color-text-muted);
}
.msg-row--continuation {
    border-top: 1px dashed var(--color-border);
    margin-top: -1px;          /* 上行下境界と重ねて 1 本線に */
    padding-top: 4px;
}
.msg-row--continuation .msg-row-line1 {
    min-height: 0;
    margin-bottom: 2px;
}

/* M-2e: 添付ファイル UI (一覧バッジ + 展開時 list) */
.msg-attachment-indicator {
    display: inline-block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-right: 6px;
    padding: 1px 6px;
    background: var(--color-bg-subtle);
    border-radius: 3px;
    vertical-align: 1px;
}
.msg-expanded-attachments {
    margin-top: var(--sp-md);
    padding: var(--sp-md);
    border-top: 1px solid var(--color-border);
}
.msg-expanded-attachments[hidden] { display: none; }
.msg-expanded-attachments-title {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: var(--sp-sm);
}
.msg-expanded-attachments-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.msg-expanded-attachment-item {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: 6px;
    background: var(--color-bg-subtle);
    font-size: 13px;
}
.msg-attachment-icon { flex: 0 0 auto; }
.msg-attachment-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 500;
}
.msg-attachment-size {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 12px;
}
.msg-attachment-dl {
    flex: 0 0 auto;
    padding: 4px 12px;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
}
.msg-attachment-dl:hover { opacity: 0.9; text-decoration: none; }

/* M-2e-α: 画像添付の inline 表示 */
.msg-expanded-attachment-item.is-image {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background: var(--color-bg-subtle);
    overflow: hidden;
}
.msg-attachment-image-wrap {
    width: 100%;
    background: #000;  /* letterbox padding for non-rectangular images */
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 400px;
    overflow: hidden;
    cursor: pointer;
}
.msg-attachment-image {
    display: block;
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}
.msg-expanded-attachment-item.is-image .msg-attachment-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: 8px 12px;
    font-size: 12px;
    color: var(--color-text-muted);
}
.msg-expanded-attachment-item.is-image .msg-attachment-meta .msg-attachment-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.msg-expanded-attachment-item.is-image .msg-attachment-meta .msg-attachment-dl {
    flex: 0 0 auto;
    padding: 4px 10px;
    font-size: 11px;
}

/* ===================================================================
   M-2e-β: メッセージ画面 UI 全面リニューアル
   - topbar 右側 🔍 toggle
   - 検索オーバーレイ (topbar を全幅で覆う)
   - 6 タブ icon-only + notification dot
   - 旧 .msg-search / .msg-tab-badge 削除
   =================================================================== */

/* 旧 in-tab-row search input は廃止 */
.msg-search { display: none; }

/* 旧 chunky 数値バッジを隠す (新 .msg-tab-dot に置換) */
.msg-tab .msg-tab-badge { display: none; }

/* topbar-actions スロット内の 🔍 toggle ボタン */
.topbar-actions {
    display: flex;
    align-items: center;
}
.msg-search-toggle {
    background: none;
    border: 0;
    padding: 8px;
    width: var(--tap-min);
    height: var(--tap-min);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.msg-search-toggle:hover { background: rgba(255,255,255,0.15); }

/* 検索オーバーレイ: topbar を fixed で覆う */
.msg-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-h);
    background: var(--color-primary);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: 0 var(--sp-md);
}
.msg-search-overlay[hidden] { display: none; }
.msg-search-back {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 8px;
    width: var(--tap-min);
    height: var(--tap-min);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.msg-search-back:hover { background: rgba(255,255,255,0.15); }
.msg-search-overlay-form {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
}
.msg-search-overlay-input {
    width: 100%;
    padding: 8px 32px 8px 14px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.4;
}
.msg-search-overlay-input:focus { outline: 2px solid #fff; outline-offset: 0; }
.msg-search-overlay-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 4px 8px;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

/* 6 icon-only タブ. 既存 .msg-tab base styles (M-2c-α) は残しつつ、
   icon-only 専用のレイアウト調整 + active 時のラベル色適用. */
.msg-tab.msg-tab-icon-only {
    position: relative;
    padding: 10px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;  /* タップ最小ターゲット */
}
.msg-tab.msg-tab-icon-only .msg-tab-svg {
    display: block;
    color: var(--color-text-muted);
    transition: color 0.12s;
}
.msg-tab.msg-tab-icon-only.is-active .msg-tab-svg { color: var(--color-text); }
/* M-2c-α 配色を SVG 色に適用 (active 時のみ) */
.msg-tab.is-active[data-label="customer"] .msg-tab-svg { color: var(--color-label-customer); }
.msg-tab.is-active[data-label="promo"]    .msg-tab-svg { color: var(--color-label-promo); }
.msg-tab.is-active[data-label="register"] .msg-tab-svg { color: var(--color-label-register); }
.msg-tab.is-active[data-label="heart"]    .msg-tab-svg { color: var(--color-label-heart); }
.msg-tab.is-active[data-label="system"]   .msg-tab-svg { color: var(--color-label-system); }
.msg-tab.is-active[data-label="none"]     .msg-tab-svg { color: var(--color-text); }
.msg-tab.is-active[data-label="starred"]  .msg-tab-svg { color: var(--color-label-starred); }
.msg-tab.is-active[data-label="trash"]    .msg-tab-svg { color: var(--color-label-trash); }

/* 通知 dot: アイコン右上、件数表示 (99+ で頭打ち) */
.msg-tab-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;  /* red-500 */
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* white ring でアイコンとの視覚分離 (header bg と blend) */
    box-shadow: 0 0 0 2px var(--color-bg);
    pointer-events: none;
}
[data-theme="dark"] .msg-tab-dot {
    background: #f87171;  /* red-400 */
}

/* Phase β (2026-05-13): 8 タブ収まり redesign。
   8 個並べてもフル幅占有 + アイコンサイズアップ。
   - .msg-tabs { gap: 0 } で gap を消し、.msg-tab に flex: 1 1 0 で等分割。
   - SVG 22→24px (M-2c-α 比 +9%)、padding を絞って 24px icon をクリア。
   - notification dot は ring 2px 込みで 20px、top/right 2px で nibble 回避。 */
@media (max-width: 480px) {
    .msg-tabs { gap: 0; }
    .msg-tab.msg-tab-icon-only {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 4px;
    }
    .msg-tab.msg-tab-icon-only .msg-tab-svg,
    .msg-tab.msg-tab-icon-only svg { width: 24px; height: 24px; }
    .msg-tab-dot { top: 2px; right: 2px; }
}
/* デスクトップ (480px 以上): flex で等分割しつつ既存 min-width を維持して
   タブが過度に広がらないようにする。 */
@media (min-width: 481px) {
    .msg-tabs { gap: 0; }
    .msg-tab.msg-tab-icon-only { flex: 1 1 0; }
}

/* ===================================================================
   M-2e-γ: kebab compact layout
   - ラベル行: 4 アイコン横並び、active = ラベル色
   - お気に入り / 常にHTML 行: 1 行 + ✓ glyph (data-active="1" で表示)
   - ゴミ箱行: 単独
   - 旧 .msg-kebab-section-label / .msg-kebab-item は使わず別 class
   =================================================================== */

/* 旧 section ラベルが残っていたら強制 hide */
.msg-kebab-section-label { display: none; }

/* kebab base layout 上書き (M-2c から padding/width 調整) */
#msg-kebab-menu {
    width: 220px;
    padding: 6px 0;
}

/* 共通 row container */
.msg-kebab-row {
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

/* ラベル行 (beta222 hotfix: 6 SVG を 3 列 grid に変更、メニュー幅圧縮 + tap 範囲拡大).
   旧 flex 横並び (justify-content: space-around) は 4 個前提だったが M-2e-δ heart +
   stage 2-B システムタブで 6 個になり横スクロールせず詰まる窮屈さが発生。grid
   auto-flow で 7 個目以降は次行に折返、min-height 44px でタップ範囲確保。 */
.msg-kebab-labels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 8px 12px;
    cursor: default;
}
.msg-kebab-label-btn {
    background: none;
    border: 0;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: color 0.15s, background 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}
.msg-kebab-label-btn:hover { background: var(--color-row-hover); }
.msg-kebab-label-btn .msg-tab-svg { display: block; color: inherit; }
/* active = M-2c-α 配色を流用 (タブと同じ mental model) */
.msg-kebab-label-btn[data-active="1"][data-kind="customer"] { color: var(--color-label-customer); }
.msg-kebab-label-btn[data-active="1"][data-kind="promo"]    { color: var(--color-label-promo); }
.msg-kebab-label-btn[data-active="1"][data-kind="register"] { color: var(--color-label-register); }
.msg-kebab-label-btn[data-active="1"][data-kind="heart"]    { color: var(--color-label-heart); }
.msg-kebab-label-btn[data-active="1"][data-kind="system"]   { color: var(--color-label-system); }
.msg-kebab-label-btn[data-active="1"][data-kind=""]         { color: var(--color-text); }

/* toggle 行 (お気に入り / 常にHTML) */
.msg-kebab-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--color-text);
}
.msg-kebab-toggle-row:hover { background: var(--color-row-hover); }
.msg-kebab-check {
    display: inline-block;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    font-size: 14px;
    color: var(--color-primary);
    visibility: hidden;
}
.msg-kebab-toggle-row[data-active="1"] .msg-kebab-check { visibility: visible; }
/* お気に入り active 時の ✓ は gold (starred 色) で意味的に揃える */
.msg-kebab-toggle-row[data-action="star-toggle"][data-active="1"] .msg-kebab-check {
    color: var(--color-label-starred);
}

/* beta222 hotfix (2026-05-13): お気に入り行 ☆ アイコン (チェックマーク代替).
   非 active = outline only gray (空の星)、active = ★ gold 塗り。
   `.msg-kebab-check` は star-toggle 行でのみ visibility:hidden に倒す
   (HTML 残置で旧 spec ベース他箇所への影響なし)、active 状態は
   `.msg-kebab-toggle-row[data-active="1"]` 経由で SVG fill / color を切替。 */
.msg-kebab-star-toggle .msg-kebab-check { display: none; }
.msg-kebab-star-icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
    fill: none;
    transition: color 0.15s ease, fill 0.15s ease;
}
.msg-kebab-toggle-row[data-action="star-toggle"][data-active="1"] .msg-kebab-star-icon {
    color: var(--color-label-starred);
    fill: var(--color-label-starred);
}

/* trash 行 (単独、folder=Trash 行で hidden 化は JS) */
.msg-kebab-trash-row {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    font-size: 14px;
    color: #b3261e;
}
.msg-kebab-trash-row:hover { background: rgba(239, 68, 68, 0.1); }
[data-theme="dark"] .msg-kebab-trash-row { color: #ef5350; }
[data-theme="dark"] .msg-kebab-trash-row:hover { background: rgba(239, 83, 80, 0.15); }
.msg-row.is-unread .msg-row-from,
.msg-row.is-unread .msg-row-subject {
    font-weight: 700;
    color: var(--color-text);
}

/* スワイプ時に .msg-row::before が下地として「ゴミ箱へ」を見せる */
.msg-row::before {
    content: "🗑 ゴミ箱へ";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding-left: 16px;
    background: linear-gradient(90deg, #b3261e 0%, #d33c2f 100%);
    color: #fff;
    font-weight: 600;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.msg-row.is-swiping::before { opacity: 1; }

.msg-row-link {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    background: #fff;
    text-decoration: none;
    color: inherit;
    padding: var(--sp-sm) 38px var(--sp-sm) var(--sp-md);
    /* swipe 用の transform / transition. JS が transform を直接書き換える。 */
    transform: translateX(0);
    transition: transform 0.18s ease, background 0.08s ease;
    min-width: 0;  /* 横溢れ防止: flex/grid 子はこれで内部 truncate を許可 */
}
@media (hover: hover) {
    .msg-row-link:hover { background: var(--color-primary-light); }
}
.msg-row-link:active { background: var(--color-primary-light); }
.msg-row.is-snapping .msg-row-link { transition: transform 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28); }

.msg-row-main {
    flex: 1;
    min-width: 0;  /* truncate 起爆 */
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-wrap: anywhere;
}
.msg-row-line1 {
    display: flex;
    align-items: baseline;
    gap: var(--sp-sm);
    min-width: 0;
}
.msg-row-from {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--color-text);
}
.msg-row-date {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.msg-row-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
    font-size: var(--fs-base);
}
.msg-row-snippet {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* Kebab menu trigger (デスクトップ + 障害者向けの非ジェスチャー操作) */
.msg-row-kebab {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 18px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
}
.msg-row-kebab:hover { background: var(--color-primary-light); color: var(--color-text); }
.msg-row-kebab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Kebab popover (single, JS positioning) */
.msg-kebab-menu {
    position: absolute;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    padding: 4px 0;
    min-width: 180px;
}
.msg-kebab-menu[hidden] { display: none; }
.msg-kebab-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--color-text);
    text-align: left;
    font-size: var(--fs-base);
    cursor: pointer;
}
.msg-kebab-item:hover { background: var(--color-primary-light); }
/* M-2b: kebab section header + divider + danger item */
.msg-kebab-section-label {
    font-size: 11px;
    color: var(--color-text-muted);
    padding: 6px 12px 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.msg-kebab-divider {
    height: 1px;
    background: var(--color-border);
    margin: 4px 0;
}
.msg-kebab-danger { color: #b3261e; }

/* M-2b: detail-page label row */
.msg-detail-label-row {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    padding: var(--sp-md, 12px) 0;
    border-top: 1px solid var(--color-border);
    margin-top: var(--sp-md, 12px);
}
.msg-detail-label-current { font-size: 13px; color: var(--color-text-muted); }
.msg-detail-label-current strong { color: var(--color-text); margin-left: 4px; }
.msg-detail-label-auto { color: var(--color-text-muted); font-size: 11px; margin-left: 6px; }
.msg-detail-label-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-detail-label-actions .btn { padding: 6px 12px; font-size: 13px; }
.msg-detail-label-actions .btn[aria-pressed="true"] {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Toast */
.msg-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 200;
    background: rgba(40, 40, 40, 0.92);
    color: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    animation: msg-toast-in 0.18s ease;
}
.msg-toast[hidden] { display: none; }
@keyframes msg-toast-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---- Pagination (M-1 から流用、不変) ---- */
.pagination {
    display: flex;
    gap: var(--sp-sm);
    align-items: center;
    justify-content: center;
    margin: var(--sp-lg) 0;
}
.pagination .is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ============================================================
   Phase M-2a: メール詳細 (SNS-style, label-less)
   ============================================================ */
.msg-detail-topnav {
    margin-bottom: var(--sp-sm);
}
.msg-detail-back {
    display: inline-block;
    padding: 6px 0;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--fs-sm);
}
.msg-detail-back:hover { color: var(--color-primary); }

.msg-detail-header {
    padding: 0 0 var(--sp-md);
    /* M-2c-α: ラベル別 4px 左ボーダー accent (一覧カードと視覚連動). */
    border-left: 4px solid transparent;
    padding-left: var(--sp-md);
    transition: border-left-color 0.15s ease;
}
.msg-detail-header[data-effective-kind="customer"] { border-left-color: var(--color-label-customer); }
.msg-detail-header[data-effective-kind="promo"]    { border-left-color: var(--color-label-promo); }
.msg-detail-header[data-effective-kind="register"] { border-left-color: var(--color-label-register); }
.msg-detail-header[data-effective-kind="heart"]    { border-left-color: var(--color-label-heart); }
.msg-detail-header[data-effective-kind="system"]   { border-left-color: var(--color-label-system); }
/* none / trash / 未指定 は transparent (default) で出さない */
/* M-2c-β: 詳細画面ヘッダにも gold inset shadow (一覧との視覚連動) */
.msg-detail-header[data-starred="1"] {
    box-shadow: inset 4px 0 0 var(--color-label-starred);
}

/* M-2c-β: 詳細画面 ☆ トグル用行 */
.msg-detail-star-row {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    padding: var(--sp-md, 12px) 0 0;
}
.msg-detail-star-toggle {
    align-self: flex-start;
    padding: 6px 12px;
    font-size: 13px;
}
.msg-detail-star-toggle .star-on { color: var(--color-label-starred); }
.msg-detail-star-toggle .star-off { color: var(--color-text-muted); }
.msg-detail-from { display: flex; align-items: baseline; gap: var(--sp-xs); }
.msg-detail-fromname {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.msg-detail-fromaddr-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.msg-detail-fromaddr-toggle {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: var(--fs-sm);
    line-height: 1;
}
.msg-detail-fromaddr-toggle:hover { background: var(--color-primary-light); color: var(--color-text); }
.msg-detail-fromaddr-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.msg-detail-fromaddr {
    overflow-wrap: anywhere;
    word-break: break-all;
}
.msg-detail-fromaddr[hidden] { display: none; }

.msg-detail-subject {
    font-size: 1.25em;
    font-weight: 700;
    color: var(--color-text);
    margin: var(--sp-md) 0 4px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.msg-detail-date {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.msg-detail-disclosure {
    margin-top: var(--sp-md);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.msg-detail-disclosure summary {
    cursor: pointer;
    list-style: none;
    padding: 4px 0;
}
.msg-detail-disclosure summary::-webkit-details-marker { display: none; }
.msg-detail-meta {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 4px var(--sp-md);
    margin: var(--sp-xs) 0 0;
    font-size: var(--fs-sm);
}
.msg-detail-meta dt { font-weight: 500; color: var(--color-text-muted); }
.msg-detail-meta dd { margin: 0; overflow-wrap: anywhere; }
.msg-detail-addrlist { margin: 0; padding-left: var(--sp-md); }

.msg-detail-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--sp-md) 0;
}

.msg-detail-body { padding: 0 0 var(--sp-md); }
.msg-body-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-family: inherit;
    background: #f7f8f3;
    padding: var(--sp-md);
    border-radius: 8px;
    line-height: 1.7;
    color: var(--color-text);
}
.msg-body-html-note {
    margin-top: var(--sp-md);
    padding: var(--sp-xs) var(--sp-sm);
    background: #fff5e0;
    border-left: 3px solid #d6a843;
    color: #8a5a00;
    font-size: var(--fs-sm);
}
.msg-body-html-frame {
    width: 100%;
    min-height: 320px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    margin-top: var(--sp-sm);
}

.msg-detail-footer {
    margin-top: var(--sp-lg);
    padding-top: var(--sp-md);
    border-top: 1px dashed var(--color-border);
    text-align: center;
}
.msg-detail-trash-link {
    border: none;
    background: transparent;
    color: #b3261e;
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--fs-sm);
    padding: 8px 12px;
}
.msg-detail-trash-link:hover { color: #80120e; }
.msg-detail-trash-link:focus-visible { outline: 2px solid #b3261e; outline-offset: 2px; }

/* ---- Dark mode tweaks ---- */
[data-theme="dark"] .msg-search { background: #2a2c25; border-color: #3d4030; }
[data-theme="dark"] .msg-row { background: #23241f; border-color: #3d4030; }
[data-theme="dark"] .msg-row-link { background: #23241f; }
[data-theme="dark"] .msg-row-link:active { background: #2e2f28; }
[data-theme="dark"] .msg-body-text { background: #23241f; }
[data-theme="dark"] .msg-body-html-frame { background: #f7f8f3; }
[data-theme="dark"] .msg-detail-divider { background: #3d4030; }
[data-theme="dark"] .msg-kebab-menu { background: #23241f; border-color: #3d4030; }

/* ============================================================
   Phase 3-β-5.8: 取引一覧の見積りタブ統合
   - type タブの「見積り」アクティブ色 (黄色)
   - 見積カード黄色バー + インラインバッジ
   - 取引詳細の「見積もり」黄色ステータスバッジ
   - 新規ボタンのポップオーバー
   ============================================================ */


/* インライン見積バッジ (一覧カード内) */
.quote-badge-inline {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    background: #f5c518;
    color: #4a3800;
    border-radius: 10px;
    line-height: 1.4;
    vertical-align: middle;
}

/* 見積カード本体 — bar 色は inline で --bar-color 上書き済 */
.tx-card--quote {
    background: linear-gradient(to right, rgba(245, 197, 24, 0.06), transparent 12%);
}
.tx-card--quote:hover {
    background: linear-gradient(to right, rgba(245, 197, 24, 0.12), var(--color-primary-light) 30%);
}

/* 見積金額の色 (灰寄り、未確定感) */
.tx-amount-quote { color: #8a6500; }

/* サマリ行の見積系 */
.tx-list-summary-quote {
    color: #8a6500;
    font-weight: 700;
}
.tx-list-summary-quote-secondary {
    color: var(--color-text-muted);
    font-weight: 500;
}
.tx-list-summary-quote-note {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    font-weight: 400;
}

/* 詳細画面のステータスバッジ (見積もり黄色) */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.4;
}
.status-badge-quote {
    background: #f5c518;
    color: #4a3800;
}

/* Dark mode: Phase 3-β-5.8 */
[data-theme="dark"] .quote-badge-inline {
    background: #d4a017;
    color: #1a1200;
}
[data-theme="dark"] .status-badge-quote {
    background: #d4a017;
    color: #1a1200;
}
[data-theme="dark"] .tx-list-summary-quote { color: #f5c518; }
[data-theme="dark"] .tx-amount-quote { color: #f5c518; }
[data-theme="dark"] .tx-card--quote {
    background: linear-gradient(to right, rgba(245, 197, 24, 0.10), transparent 14%), var(--bg-card);
}
/* ============================================================
   Phase 3-β-5.9: 店舗管理 → スタッフ一覧 (表示専用ハリボテ)
   ============================================================ */

.staff-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.staff-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: background 0.15s, opacity 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-sm);
}

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

.staff-card-terminated {
    opacity: 0.55;
}

.staff-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.staff-card-body {
    flex-grow: 1;
    min-width: 0;
}

.staff-card-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.staff-card-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

.staff-self-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: 10px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    line-height: 1.4;
}

.role-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    line-height: 1.4;
}

.role-badge-system_master {
    background: #6c5ce7;
    color: #fff;
}

.role-badge-tenant_master {
    background: var(--color-primary);
    color: #fff;
}

.role-badge-staff {
    background: #95a5a6;
    color: #fff;
}

.employment-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 10px;
    line-height: 1.4;
}

.employment-badge-active {
    background: #d4f5dd;
    color: #2e7d32;
}

.employment-badge-suspended {
    background: #fff3cd;
    color: #856404;
}

.employment-badge-terminated {
    background: #e9ecef;
    color: #6c757d;
}

.staff-card-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    flex-wrap: wrap;
}

.staff-card-email {
    word-break: break-all;
}

.staff-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn.btn-sm,
.btn-sm {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12px;
}

@media (max-width: 480px) {
    .staff-card {
        flex-wrap: wrap;
    }
    .staff-card-actions {
        margin-left: 56px;
        margin-top: 4px;
    }
}

/* Dark mode: Phase 3-β-5.9 */
[data-theme="dark"] .staff-card {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="dark"] .staff-card-name { color: var(--text-primary); }
[data-theme="dark"] .staff-card-meta { color: var(--text-secondary); }
[data-theme="dark"] .employment-badge-active {
    background: rgba(76, 175, 80, 0.18);
    color: #81c784;
}
[data-theme="dark"] .employment-badge-suspended {
    background: rgba(255, 193, 7, 0.18);
    color: #ffd54f;
}
[data-theme="dark"] .employment-badge-terminated {
    background: rgba(108, 117, 125, 0.20);
    color: #adb5bd;
}
[data-theme="dark"] .role-badge-system_master {
    background: #8579ee;
    color: #fff;
}
[data-theme="dark"] .role-badge-staff {
    background: #7d8a8c;
    color: #fff;
}

/* ============================================================
   Phase 3-β-5.10: 権限プロファイル基盤 (表示モックアップ)
   - スタッフカード内のプロファイル chip
   - 権限プロファイル一覧セクション (店長/副店長/バイト/レジ機A カード)
   - サイドバー display_name 下のプロファイル切替ボタン (staff のみ)
   ============================================================ */

/* スタッフカード内のプロファイル chip */
.staff-card-profiles {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.profile-chip {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border: 1px solid var(--border);
    border-radius: 10px;
    line-height: 1.4;
}

.profile-chip-empty {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    background: #fff3cd;
    color: #856404;
    border-radius: 10px;
    font-weight: 500;
}

[data-theme="dark"] .profile-chip {
    background: rgba(123, 141, 66, 0.18);
    color: #c5d39a;
    border-color: var(--border);
}

[data-theme="dark"] .profile-chip-empty {
    background: rgba(255, 193, 7, 0.18);
    color: #ffd54f;
}

/* 権限プロファイル一覧セクション */
.store-section {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.store-section-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--text-primary);
}

.store-section-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 12px;
    line-height: 1.6;
}

.profile-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.profile-card {
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--shadow-sm);
    text-align: left;
    color: inherit;
    font-family: inherit;
}

.profile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.profile-card-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.profile-default-badge {
    font-size: 10px;
    padding: 1px 6px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 8px;
    line-height: 1.4;
    font-weight: 600;
}

.profile-card-summary {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.profile-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    gap: 6px;
}

.profile-card-add {
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-secondary);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: 84px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    box-shadow: none;
}

.profile-card-add:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

[data-theme="dark"] .profile-card-add:hover {
    background: rgba(123, 141, 66, 0.18);
    color: #c5d39a;
}

.profile-card-add-icon {
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
}

.profile-card-add-label {
    font-size: 12px;
}

/* サイドバー display_name エリア拡張: staff の場合 display_name の下にプロファイル名を縦並び */
.sidebar-user-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

/* 既存 .sidebar-user-name は flex:1 を持っていたが、入れ子 .sidebar-user-info に
   その役割を移動。.sidebar-user-info 内では .sidebar-user-name は単純なテキスト要素 */
.sidebar-user-info .sidebar-user-name {
    flex: 0 0 auto;
}

.sidebar-user-profile {
    display: inline-block;
    padding: 1px 4px;
    font-size: 11px;
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.sidebar-user-profile:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text);
}

[data-theme="dark"] .sidebar-user-profile:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

/* T1: sts ユーザ行の右端に設定遷移先の visual hint としてギア。
   `.sidebar-user-info` が flex: 1 で残幅を取るため、gear は右端に自然配置。
   `margin-left: auto` は冗長だが明示。muted + hover で brighten してアフォーダンス。
   `<a>` 全体が link なので gear は装飾、`aria-hidden` で screen reader からは隠す。 */
.sidebar-user-gear {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    opacity: 0.7;
    transition: opacity 0.15s, color 0.15s;
}
.sidebar-user-gear svg {
    width: 18px;
    height: 18px;
}
.sidebar-user:hover .sidebar-user-gear {
    opacity: 1;
    color: var(--color-text);
}

/* ============================================================
   T3: 設定 hub + フォーム (Claude/iOS 風 row UI)
   ============================================================ */

/* Hub layout */
.settings-hub {
    padding: 16px;
    max-width: 600px;
    margin: 0 auto;
}
.settings-hub-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 24px;
}
.settings-hub-hero-main {
    flex: 1 1 auto;
    min-width: 0;
}
.settings-hub-email {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    word-break: break-all;
    line-height: 1.4;
}
.settings-hub-tenant {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.settings-hub-hero-side {
    flex: 0 0 auto;
}
.settings-hub-plan-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.settings-hub-plan-badge.plan-badge-free { background: var(--color-text-muted); }
.settings-hub-plan-badge.plan-badge-pro { background: var(--color-primary); }

/* Section list */
.settings-hub-sections {
    display: flex;
    flex-direction: column;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}
.settings-hub-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    transition: background 0.15s;
    min-height: var(--tap-min, 48px);
}
.settings-hub-row:last-child { border-bottom: none; }
.settings-hub-row:hover { background: var(--color-row-hover, var(--color-primary-light)); text-decoration: none; }
.settings-hub-row-icon {
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}
.settings-hub-row-icon svg { width: 22px; height: 22px; }
.settings-hub-row-label {
    flex: 1 1 auto;
    font-size: 16px;
}
.settings-hub-row-status {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
}
.settings-hub-row-status-ok    { background: rgba(90, 154, 110, 0.15); color: var(--color-success); }
.settings-hub-row-status-warn  { background: rgba(212, 146, 58, 0.15); color: var(--color-warning); }
.settings-hub-row-status-pending { background: rgba(108, 122, 137, 0.15); color: var(--color-text-muted); }
.settings-hub-row-chevron {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 18px;
    line-height: 1;
}
.settings-hub-title {
    font-size: 19px;
    margin: 16px 0;
    padding: 0 4px;
    color: var(--color-text);
}
.settings-hub-footer {
    padding: 24px 4px 8px;
    text-align: center;
}
.settings-hub-logout {
    display: inline-block;
    padding: 8px 20px;
    color: var(--color-error);
    text-decoration: none;
    font-size: 14px;
    border-radius: 6px;
}
.settings-hub-logout:hover { background: var(--color-error-bg); text-decoration: none; }

/* decisions v2.38: 設定画面の常設「キャッシュをクリアして更新」ボタン。
   アプデボタン (.sidebar-update-btn) とは異なり SW 状態に依存せず常時動作する保険用途。
   primary を 12% mix on transparent でログアウトの destructive 系と差別化。 */
.settings-cache-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 12px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary-dark);
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 180ms ease, transform 200ms ease;
}
.settings-cache-clear-btn:hover {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.settings-cache-clear-btn:active {
    transform: scale(0.98);
}
.settings-cache-clear-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.settings-cache-clear-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    transition: transform 600ms ease-out;
}
.settings-cache-clear-btn.is-spinning .settings-cache-clear-icon {
    transform: rotate(360deg);
}
[data-theme="dark"] .settings-cache-clear-btn {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
    color: color-mix(in srgb, var(--color-primary) 70%, white);
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}
[data-theme="dark"] .settings-cache-clear-btn:hover {
    background: color-mix(in srgb, var(--color-primary) 26%, transparent);
}

/* Back bar */
.settings-back-bar { padding: 4px 4px 8px; }
.settings-back-link {
    display: inline-block;
    text-decoration: none;
    color: var(--color-primary);
    font-size: 15px;
    padding: 6px 0;
}
.settings-back-link:hover { text-decoration: underline; }

/* Form page */
.settings-form-page {
    padding: 16px;
    max-width: 600px;
    margin: 0 auto;
}
.settings-form-title {
    font-size: 22px;
    margin: 12px 0 16px;
    color: var(--color-text);
}
.settings-flash {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 15px;
}
.settings-flash-ok {
    background: rgba(90, 154, 110, 0.10);
    color: var(--color-success);
    border: 1px solid rgba(90, 154, 110, 0.30);
}
.settings-flash-warn {
    background: rgba(212, 146, 58, 0.10);
    color: var(--color-warning);
    border: 1px solid rgba(212, 146, 58, 0.30);
}
.settings-flash code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 4px;
    border-radius: 3px;
}

/* Fieldset */
.settings-fieldset {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    background: var(--color-card-bg);
}
.settings-fieldset legend {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 0 8px;
}
.settings-field {
    display: block;
    margin-bottom: 12px;
}
.settings-field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}
.settings-field-hint {
    display: block;
    color: var(--color-text-muted);
    font-size: 12px;
    margin-top: 4px;
}
.settings-fieldset input[type="text"],
.settings-fieldset input[type="number"],
.settings-fieldset input[type="email"],
.settings-fieldset input[type="password"] {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
    box-sizing: border-box;
    font-family: inherit;
}
.settings-fieldset input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: var(--color-primary);
}
.settings-checkbox {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--color-text);
    margin-bottom: 12px;
    cursor: pointer;
}
.settings-checkbox input[type="checkbox"] {
    width: auto !important;
    margin: 0;
}

/* Test row */
.settings-test-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.settings-test-btn {
    padding: 9px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text);
    font-family: inherit;
}
.settings-test-btn:hover { background: var(--color-row-hover, var(--color-primary-light)); }
.settings-test-result {
    font-size: 14px;
    min-height: 1.4em;
    padding: 2px 0;
}
.settings-test-ok      { color: var(--color-success); }
.settings-test-ng      { color: var(--color-error); }
.settings-test-pending { color: var(--color-text-muted); }

.settings-form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
}
.settings-form-actions .btn-primary {
    padding: 11px 28px;
    background: var(--color-primary);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
.settings-form-actions .btn-primary:hover { background: var(--color-primary-dark); }

/* ====== Settings: アカウント追加スタイル ====== */
.settings-account-profile-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.settings-account-profile-current {
    font-size: 15px;
    color: var(--color-text);
}
.settings-account-profile-switch-btn {
    /* settings-test-btn ベースで OK だが、フィールドの後にぽつんと置くため
       少しだけ余白を取る */
    margin-top: 4px;
}

/* ====== Settings: 請求 (billing) ====== */
.settings-hub-row.settings-hub-row-danger {
    color: var(--color-error);
}
.settings-hub-row.settings-hub-row-danger:hover {
    background: var(--color-error-bg);
}
.settings-hub-row.settings-hub-row-danger .settings-hub-row-chevron {
    color: var(--color-error);
}

/* 現在のプランカード */
.settings-billing-plan { max-width: 980px; }
.plan-current-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.plan-current-info { flex: 1 1 auto; min-width: 0; }
.plan-current-label {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}
.plan-current-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary-dark);
}
.plan-current-price {
    font-size: 18px;
    color: var(--color-text);
    margin-top: 4px;
}
.plan-current-price-suffix {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-left: 2px;
}
.plan-current-renewal {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 6px;
}
.plan-current-actions { flex: 0 0 auto; }
.plan-current-actions .btn-secondary {
    display: inline-block;
    padding: 9px 18px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
}
.plan-current-actions .btn-secondary:hover { background: var(--color-row-hover, var(--color-primary-light)); text-decoration: none; }

.plan-compare-heading {
    font-size: 18px;
    margin: 24px 0 12px;
    color: var(--color-text);
}

/* 3 カード比較 */
.plan-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: stretch;
}
.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
}
.plan-card.is-current {
    border-color: var(--color-primary);
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-card-bg) 50%);
}
.plan-card-recommended {
    border-color: var(--color-primary);
    box-shadow: 0 4px 14px rgba(123, 141, 66, 0.15);
}
.plan-card-recommended-ribbon {
    position: absolute;
    top: -10px;
    right: 14px;
    background: var(--color-primary);
    color: #fff;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.plan-card-header { margin-bottom: 12px; }
.plan-card-name {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary-dark);
}
.plan-card-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
}
.plan-card-price-suffix {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-left: 2px;
    font-weight: 400;
}
.plan-card-annual {
    font-size: 12px;
    color: var(--color-text-muted);
    min-height: 1.4em;
    margin-top: 4px;
}
.plan-card-features {
    list-style: none;
    padding: 0;
    margin: 12px 0 16px;
    flex: 1 1 auto;
}
.plan-card-features li {
    padding: 6px 0 6px 22px;
    font-size: 13px;
    color: var(--color-text);
    position: relative;
    border-bottom: 1px dashed var(--color-border);
}
.plan-card-features li:last-child { border-bottom: none; }
.plan-card-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}
.plan-card-features li.is-warn::before {
    content: "!";
    color: var(--color-warning);
}
.plan-card-cta { margin-top: 8px; }
.plan-card-cta .btn-primary,
.plan-card-cta .btn-secondary {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
}
.plan-card-cta .btn-primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.plan-card-cta .btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); }
.plan-card-cta .btn-primary:disabled,
.plan-card-cta .btn-secondary:disabled {
    background: var(--color-bg);
    color: var(--color-text-muted);
    border-color: var(--color-border);
    cursor: default;
}
.plan-card-cta .btn-secondary {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}
.plan-card-cta .btn-secondary:hover:not(:disabled) { background: var(--color-row-hover, var(--color-primary-light)); }
.plan-cards-note {
    margin-top: 16px;
    font-size: 11px;
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .plan-cards { grid-template-columns: 1fr; }
    .plan-card-recommended-ribbon { right: 12px; }
}

/* ====== Settings: 支払い方法 (billing/payment) ====== */
.settings-payment-empty {
    margin: 0;
    padding: 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
    background: var(--color-bg);
    border-radius: 8px;
}
.settings-payment-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 15px;
    color: var(--color-text);
}
.settings-payment-option-disabled {
    color: var(--color-text-muted);
    cursor: not-allowed;
}
.settings-payment-option-label { font-weight: 500; }
.settings-payment-card-form {
    margin: 8px 0 12px 24px;
    padding: 12px;
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: 8px;
}
.settings-payment-card-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 480px) {
    .settings-payment-card-form { margin-left: 0; }
    .settings-payment-card-row { grid-template-columns: 1fr; }
}
.settings-payment-card-form input:disabled {
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* ====== Settings: 領収書 (billing/receipts) ====== */
.settings-receipts-table-wrap {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow-x: auto;
}
.settings-receipts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.settings-receipts-table th,
.settings-receipts-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.settings-receipts-table thead th {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-bg);
}
.settings-receipts-table tbody tr:last-child td { border-bottom: none; }
.settings-receipts-amount {
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}
.settings-receipts-pdf {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 13px;
}
.settings-receipts-pdf:hover { text-decoration: underline; }
.settings-receipts-note {
    margin-top: 12px;
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
}
@media (max-width: 480px) {
    .settings-receipts-table { font-size: 13px; }
    .settings-receipts-table th,
    .settings-receipts-table td { padding: 8px 10px; }
}

/* dark theme tweaks: 主要なものだけ override (variables tied) */
[data-theme="dark"] .plan-card.is-current {
    background: linear-gradient(180deg, rgba(123, 141, 66, 0.18) 0%, var(--bg-card) 50%);
    border-color: var(--color-primary);
}
[data-theme="dark"] .plan-current-card,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .settings-receipts-table-wrap {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="dark"] .settings-receipts-table thead th {
    background: var(--bg-card-header);
    color: var(--text-secondary);
}
[data-theme="dark"] .settings-payment-empty,
[data-theme="dark"] .settings-payment-card-form {
    background: var(--bg-card-header);
}
[data-theme="dark"] .settings-payment-card-form input:disabled {
    background: var(--bg-card);
}

/* Placeholder page */
.settings-placeholder {
    padding: 32px 16px;
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}
.settings-placeholder p { margin: 0; }
.settings-placeholder-note {
    font-size: 12px !important;
    margin-top: 16px !important;
    opacity: 0.7;
}

/* =====================================================================
   Phase 5.18-α: 店舗設定 + ブランドアイコンピッカー
   ===================================================================== */
.form-required {
    color: var(--color-danger, #c0392b);
    margin-left: 2px;
}
.form-help {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
}
.form-help-muted {
    margin-top: 24px;
    margin-bottom: 8px;
    opacity: 0.7;
}

.brand-icon-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin: 0;
}
.brand-icon-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-card-bg);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
    position: relative;
}
.brand-icon-option:hover:not(.is-locked) {
    border-color: var(--color-primary);
}
.brand-icon-option.is-selected {
    border-color: var(--color-primary);
    background: var(--color-primary-lightest, rgba(123, 141, 66, 0.08));
}
.brand-icon-option input[type="radio"] {
    /* radio 自体は隠して、option 全体を tap target にする */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.brand-icon-preview {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: contain;
    background: var(--color-card-bg);
}
.brand-icon-preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
}
.brand-icon-label {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}
.brand-icon-tier-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}
.brand-icon-picker-locked .brand-icon-option.is-locked {
    cursor: not-allowed;
    opacity: 0.55;
}

/* ============================================================
   Hero onboarding card — Phase 2-α web_admin_menu_mockup (2026-05-06)
   汎用化 (旧 .ga4-connect-*、Phase 1 data_web_onboarding_polish で導入)。
   GA4 連携前画面 (/data/web 連携前 onboarding) と /web/integrations placeholder で
   共有使用、将来別 onboarding 画面でも再利用可。トークン使用ルール厳守:
   `--color-card-bg` 使用 (Phase 1 の `#fff` 直書きを retrofit)、新規 hex なし。
   ============================================================ */
.hero-onboarding-card {
    max-width: 480px;
    margin: 48px auto 0;
    padding: 40px 24px;
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-card-bg);
}
.hero-onboarding-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
}
.hero-onboarding-card-icon svg {
    width: 40px;
    height: 40px;
}
.hero-onboarding-card-heading {
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.45;
    margin: 0 0 24px;
    color: var(--color-text);
}
/* `.btn` は既に `display: inline-flex` + `align-items: center` で min-height 内の
   ラベル縦中央寄せを実現済 (admin.css 中の `.btn` 定義参照)。`display` を override
   すると flex 中央寄せが壊れるため、ここでは min-width のみ追加。水平方向は親
   `.hero-onboarding-card` の `text-align: center` で自動中央寄せ。 */
.hero-onboarding-card-btn {
    min-width: 220px;
}
.hero-onboarding-card-fineprint {
    margin: 12px 0 0;
    line-height: 1.5;
}
@media (max-width: 480px) {
    .hero-onboarding-card {
        margin: 32px 16px 0;
        padding: 32px 20px;
    }
    .hero-onboarding-card-icon {
        width: 64px;
        height: 64px;
    }
    .hero-onboarding-card-icon svg {
        width: 36px;
        height: 36px;
    }
}

/* ============================================================
   Disabled tile — Phase 2-α web_admin_menu_mockup (2026-05-06)
   将来機能 placeholder の汎用 tile。Phase β+ 予定の項目を「ここに来る」と
   伝えるための disabled 表示。`.brand-icon-option.is-locked` (Phase 5.18-α、
   brand icon picker 専用) の視覚言語を generic 名前空間に切り出し。
   /web/site /web/sns で使用、将来 /web/seo 等の追加 placeholder にも再利用可。
   ============================================================ */
.disabled-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-card-bg);
    opacity: 0.55;
    cursor: not-allowed;
}
.disabled-tile + .disabled-tile {
    margin-top: 12px;
}
.disabled-tile__label {
    font-weight: 600;
    color: var(--color-text);
}
.disabled-tile__placeholder {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    font-style: italic;
}
.disabled-tile__badge {
    align-self: flex-end;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

/* ============================================================
   WEB管理 form 系 — Phase 2-β web_admin_phase_2_beta (2026-05-06)
   サイト情報 / SNS の編集 form 用。`.form-label` / `.form-help` /
   `.form-help-muted` / `.form-error` は既存 (admin.css:498/7014/7020/1751
   等)、`.form-row` / `.form-actions` / `.is-error` / `.web-admin-form` /
   `.form-success-banner` を新規追加。`.form-control` クラスは markup 側で
   付与しているが CSS は無く bare `input` styling (admin.css:480) に倒す。
   ============================================================ */
.web-admin-form {
    max-width: 640px;
    margin: 0 auto;
}
.web-admin-form .form-row {
    margin-bottom: var(--sp-lg);
}
.web-admin-form .form-row:last-of-type {
    margin-bottom: 0;
}
.web-admin-form input[type="url"],
.web-admin-form input[type="text"],
.web-admin-form textarea {
    width: 100%;
}
.web-admin-form textarea {
    resize: vertical;
    min-height: 96px;
    font-family: inherit;
}
.web-admin-form input.is-error,
.web-admin-form textarea.is-error {
    border-color: var(--color-error);
}
.web-admin-form .form-actions {
    margin-top: var(--sp-xl);
    display: flex;
    justify-content: flex-end;
}
.form-success-banner {
    max-width: 640px;
    margin: 0 auto var(--sp-lg);
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border: 1px solid var(--color-border);
    font-size: var(--fs-base);
}

/* ============================================================
   WEB管理 upsell — Phase 2-β web_admin_phase_2_beta (2026-05-06)
   `.hero-onboarding-card` を再利用、追加要素のみ定義。
   Phase 2-γ で plan_code カラム追加後に実機で初めて表示される。
   ============================================================ */
.upsell-feature-list {
    margin: 0 0 12px;
    color: var(--color-text);
    text-align: left;
}
.upsell-features {
    text-align: left;
    margin: 0 0 24px;
    padding-left: 24px;
    color: var(--color-text-muted);
    font-size: var(--fs-base);
    line-height: 1.7;
}
.upsell-features li {
    margin-bottom: 4px;
}

/* ============================================================
   GA4 連携済画面 — Phase 2-γ-1 ga4_property_switcher (2026-05-06)
   /web/integrations の連携済時の設定画面。プロパティ一覧 + アクティブ表示 +
   リスト更新ボタン。
   ============================================================ */
.ga4-connected-heading {
    font-size: var(--fs-lg);
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--color-text);
}
.ga4-connected-fineprint {
    margin: 0 0 16px;
    line-height: 1.5;
}
.ga4-property-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.ga4-property-list-item {
    position: relative;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-card-bg);
    margin-bottom: 8px;
}
.ga4-property-list-item.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}
.ga4-property-list-item__name {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
    /* アクティブ badge と重ならないよう右に余白 */
    padding-right: 80px;
}
.ga4-property-list-item__id {
    line-height: 1.3;
}
.ga4-property-list-item__badge {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-card-bg);
    font-weight: 600;
}
.ga4-refresh-properties-form {
    margin: 0;
}

/* ============================================================
   Form エラーバナー — Phase 2-γ-1
   `.form-success-banner` (Phase 2-β) の対 (エラー版)。
   ============================================================ */
.form-error-banner {
    max-width: 640px;
    margin: 0 auto 16px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-error);
    font-size: var(--fs-base);
}

/* ============================================================
   Phase 7.1 + Phase 1.1 (decisions v2.100) — View Transitions API
   Phase 1: htmx-boost 全 swap で root 全体を Level 1 fade + Level 2 slide。
   Phase 1.1: 部位別 view-transition-name で <main> のみアニメ、topbar /
              bottom-nav / bottom-nav-indicator は固定見せ (animation: none)。
              実機検証で「ヘッダごとフェード+スライド」違和感が確定したため
              スコープ縮小、Phase 1 観察項目 (a)/(b)/(c) も同時解消。
   meta name="view-transition" / @view-transition は意図的に未追加 (Phase 1
   cross-document VT 不採用方針を継承、schedule 月切替の location.href ハード
   遷移経由で stale data-transition-dir リーク回避)。
   ============================================================ */

/* 部位別スナップショット分離: topbar / sidebar / underlay / overlay / bottom-nav /
   indicator は固定見せ、main#main のみ Level 1 fade + Level 2 directional slide。
   Phase 1.3 (decisions v2.103): sidebar / sidebar-bg-underlay / sidebar-overlay
   の 3 要素を追加分離。サイドバー開放中の遷移で暗幕の数ミリ秒チラツキ
   (CSS transition 中間値で VT スナップショット凍結 → 視覚的に「明るくなった」
   検知) を構造的に解消。 */
header.topbar {
    view-transition-name: topbar;
}
/* Phase 1.4 (decisions v2.105): hamburger 個別分離 (pulpul 仮説 F 解消)。
   topbar の子要素として VT スナップショットに巻き込まれていた状態から、独立
   compositor layer に昇格させて 3 span transition の 2 フレーム描画副作用を
   回避。A/B 実験 (beta84) で症状消失を確認、修正方針 α として正式実装。 */
.hamburger {
    view-transition-name: hamburger;
}
aside.sidebar {
    view-transition-name: sidebar;
}
.sidebar-bg-underlay {
    view-transition-name: sidebar-bg-underlay;
}
#sidebar-overlay {
    view-transition-name: sidebar-overlay;
}
.bottom-nav {
    view-transition-name: bottom-nav;
}
.bottom-nav-indicator {
    view-transition-name: bottom-nav-indicator;
}
main#main {
    view-transition-name: main-content;
}

/* 固定見せ要素: VT default の fade-out/fade-in を打消し、視覚的に「動かない」要素にする。
   Phase 1.4 (decisions v2.105) 最終形: 7 要素 × old/new = 14 selector
   (topbar / hamburger / sidebar / sidebar-bg-underlay / sidebar-overlay /
   bottom-nav / bottom-nav-indicator)。main-content は除外、Level 1 fade +
   Level 2 directional slide 対象。 */
::view-transition-old(topbar),
::view-transition-new(topbar),
::view-transition-old(hamburger),
::view-transition-new(hamburger),
::view-transition-old(sidebar),
::view-transition-new(sidebar),
::view-transition-old(sidebar-bg-underlay),
::view-transition-new(sidebar-bg-underlay),
::view-transition-old(sidebar-overlay),
::view-transition-new(sidebar-overlay),
::view-transition-old(bottom-nav),
::view-transition-new(bottom-nav),
::view-transition-old(bottom-nav-indicator),
::view-transition-new(bottom-nav-indicator) {
    animation: none;
}

/* Level 1: main-content 限定の cross-fade (default). */
::view-transition-old(main-content) {
    animation: vt-fade-out 200ms ease-out forwards;
}
::view-transition-new(main-content) {
    animation: vt-fade-in 200ms ease-in forwards;
}
@keyframes vt-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes vt-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Level 2 forward: 旧画面が左へ抜け、新画面が右からスライドイン (main-content のみ). */
html[data-transition-dir="forward"]::view-transition-old(main-content) {
    animation: vt-slide-out-left 220ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
html[data-transition-dir="forward"]::view-transition-new(main-content) {
    animation: vt-slide-in-right 220ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Level 2 backward: 旧画面が右へ抜け、新画面が左からスライドイン (main-content のみ). */
html[data-transition-dir="backward"]::view-transition-old(main-content) {
    animation: vt-slide-out-right 220ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
html[data-transition-dir="backward"]::view-transition-new(main-content) {
    animation: vt-slide-in-left 220ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Level 2 none: 同タブ再タップ等で transition 抑制 (main-content も含めて全停止). */
html[data-transition-dir="none"]::view-transition-old(main-content),
html[data-transition-dir="none"]::view-transition-new(main-content) {
    animation: none;
}

/* 12% translate は低スペック Android の GPU compositing 負荷と
   「画面が完全に滑り出る」体感を避けるため。サブトル = アプリ的. */
@keyframes vt-slide-out-left {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-12%); }
}
@keyframes vt-slide-in-right {
    from { opacity: 0; transform: translateX(12%); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes vt-slide-out-right {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(12%); }
}
@keyframes vt-slide-in-left {
    from { opacity: 0; transform: translateX(-12%); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Reduced motion: main-content のアニメも全停止 (固定見せ要素は元から動かない). */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(main-content),
    ::view-transition-new(main-content) {
        animation: none !important;
    }
}

/* ============================================================
   Phase 1.1 spinner — main-scope full-area overlay (2026-05-09, beta91)
   decisions 'spinner_phase1_1_main_overlay_redesign' 参照。
   Phase 1 の hybrid (button-inline 16px + area-overlay 48px) 廃止、main 全体を
   覆う single overlay に簡素化。alpha 0.55 → 0.75 + blur 4px → 6px に強化、
   chart 等のコンテンツとの視認分離を確保。マスコットは 48px のみ (16px は認識
   不能で廃止)。z-index 50 = sidebar (80/89/90) / topbar / bottom-nav (100) / PTR
   (200) より下、main 内通常コンテンツより上。
   ============================================================ */

/* Phase 1.6 (beta96): X / iOS-style chip + glyph 二層構造の unified spinner。
   PTR (chip --md 44px / glyph --md 32px) と spinner overlay (chip --lg 64px /
   glyph --lg 48px) で chip + glyph + 内部 SVG 構造を完全共有。glyph は
   75% 弧 (path) + 矢じり (SVG marker, orient=auto) で X / iOS 定番完備。
   chip は半透明白 + 控えめドロップシャドウで「浮く chip」感、SVG とは別レイヤー。
   stage 1 (pulling) は chip opacity を距離比例フェードイン (Phase 1.4 の dasharray
   操作は廃止、X 流の「弓 = 引っ張る対象は不動、kinetic は手の側」semantics)。
   詳細: decisions `spinner_phase1_6_x_compliant_visual_polish` 参照。 */

@keyframes tallybe-spinner-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.tallybe-spinner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 50;
    pointer-events: auto;
}

[data-theme="dark"] .tallybe-spinner-overlay {
    background: rgba(20, 22, 18, 0.75);
}

/* Phase 1.6 chip: 円形コンテナ。半透明白 + 控えめドロップシャドウで「浮く」感。
   PTR + spinner overlay で size modifier (--lg / --md) のみ違い、構造は完全共通。 */
.tallybe-spinner-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .tallybe-spinner-chip {
    background: rgba(30, 32, 28, 0.92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.tallybe-spinner-chip--lg { width: 64px; height: 64px; }
.tallybe-spinner-chip--md { width: 44px; height: 44px; }

/* Phase 1.6 glyph: 内側 SVG。rotation 常時 ON、size は chip modifier に追従。
   75% 弧 (path) + 矢じり (marker-end) で X / iOS 定番。 */
.tallybe-spinner-glyph {
    display: block;
    will-change: transform;
}

/* Phase 1.9: rotation を class-conditional に scope 化。Phase 1.4-1.8 までは universal
   `.tallybe-spinner-glyph` に animation 適用していたため、PTR の pull 中も glyph が回って
   しまう regression があった (bow メタファー的に矢は引かれている間は静止すべき)。
   PTR は `.is-refreshing` 適用時のみ回転、spinner overlay は表示中ずっと回転 (loading
   semantic)。詳細は decisions `spinner_phase1_9_rotation_scope_bugfix` 参照。 */
.ptr-indicator.is-refreshing .tallybe-spinner-glyph {
    /* Phase 1.15: 600ms → 350ms (1.7x faster post-release rotation)。Sato-san 「数回転する」
       感覚と一致 (1.5 秒 handler 中に 約 4.3 回転)。stage 4 と一緒に「post-release 1 イベント」
       として加速統一 (decisions `spinner_phase1_15_unified_post_release_acceleration`)。
       Phase 2.3: CSS variable 経由 duration 動的化 (handoff v2.0 §Phase 2 Backlog 3)。
       JS showRefreshing() で `--ptr-stage3-duration` を shrinkStartDistance ベース計算 + 注入、
       MAX_PULL 引き切り時は random bonus (0%-20%、8 段階一様抽選)。default 値 350ms は Phase 1.15
       baseline = JS 未注入時 fallback で regression 防御。 */
    animation: tallybe-spinner-rotate var(--ptr-stage3-duration, 350ms) linear infinite;
}
/* Phase 1.10: stage 4 (retract) — rotation 加速。弓メタファー: 矢が放たれて加速していく感、
   フェード中の最後の kinetic phase。threshold 到達 retract のみ有効 (showRefreshing で inline
   transform clear 済の場合)、threshold 未到達 retract では applyPullVisual の inline rotate
   が specificity で勝つため静止フェードになる (= 弓を引きかけて離した自然挙動)。 */
.ptr-indicator.is-retracting .tallybe-spinner-glyph {
    /* Phase 1.15: 180ms → 105ms (1.7x faster、stage 3 と同 1.7x で post-release 加速統一)。
       75ms duration の retract 中に ~71% (257°) 回って消える、「ぴゅっ」感を強化。
       Phase 2.3: CSS variable 経由 duration 動的化、stage 3 = stage 3 / STAGE4_RATIO=1.7 で
       Phase 1.15 統一加速比率維持。default 値 105ms は Phase 1.15 baseline、JS 未注入時 fallback。 */
    animation: tallybe-spinner-rotate var(--ptr-stage4-duration, 105ms) linear infinite;
}
.tallybe-spinner-overlay .tallybe-spinner-glyph {
    /* Phase 1.15 では overlay は 600ms 維持。PTR とは別 UX context (loading semantics)、
       PTR の post-release 加速 (release event の kinetic) と意味が違うため意図的に分離。 */
    animation: tallybe-spinner-rotate 600ms linear infinite;
}

.tallybe-spinner-chip--lg .tallybe-spinner-glyph { width: 48px; height: 48px; }
.tallybe-spinner-chip--md .tallybe-spinner-glyph { width: 32px; height: 32px; }

.tallybe-spinner-glyph .arc {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.tallybe-spinner-glyph .arrowhead {
    /* Phase 1.7 Thread 4: marker サイズ 5 → 3.5 でかわいさ寄せ。stroke + linejoin round で
       三角形の先端を softens (純 fill だと角がカクッと立つため)。 */
    fill: var(--color-primary);
    stroke: var(--color-primary);
    stroke-width: 0.5;
    stroke-linejoin: round;
}

[data-theme="dark"] .tallybe-spinner-glyph .arc {
    /* --color-primary は :root[data-theme=dark] で #9eb35a (若草系) に自動 flip、
       サイドバー active 等のアクセント色と統一。 */
    stroke: var(--color-primary);
}

[data-theme="dark"] .tallybe-spinner-glyph .arrowhead {
    fill: var(--color-primary);
    stroke: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
    /* Phase 1.9: 新 class-conditional セレクタ (specificity 0,2,1) は universal セレクタ
       (0,1,0) より高いため、universal `.tallybe-spinner-glyph { animation: none }` 単独
       では PTR refresh / overlay 中の rotation を抑制できない。両方の selector を列挙して
       reduced-motion で確実に止める。 */
    .tallybe-spinner-glyph,
    .ptr-indicator.is-refreshing .tallybe-spinner-glyph,
    .ptr-indicator.is-retracting .tallybe-spinner-glyph,
    .tallybe-spinner-overlay .tallybe-spinner-glyph {
        animation: none;
    }
}

/* Phase A の View Transitions API 経路は Phase A.1 (2026-05-11) で revert。
   月切替は schedule-carousel-* (本ファイルの schedule セクション内) の指追従
   carousel に置換。view-transition-name: schedule-grid 命名空間 + 4 keyframes は撤去。
   詳細は decisions v2.133 / spec v4.14 §10 参照。 */

/* =====================================================================
   Phase A.2.1: Multi-select mode (2026-05-11)
   ---------------------------------------------------------------------
   body.is-schedule-multi-mode が立つと FAB「作成」+ 「× キャンセル」が
   下から fade + scale でスライドイン (~180ms)。selected-day-list は
   single (heading 1 行 + 当日 list) と multi (summary + N 段ブロック) の
   2 mode を `.is-multi` class で切替。
   ===================================================================== */
/* =====================================================================
   Schedule multi-select FAB + cancel (2026-05-12 Phase A.2.2' から
   2026-05-13 .tallybe-fab base 化にリファクタ)
   共通 layout / shadow / press feedback は .tallybe-fab に集約済、
   ここでは color / right offset / state modifier のみ宣言。
   ===================================================================== */
/* FAB: 常時表示。0/1 件は「+」、N>1 は「作成 (N)」を JS の
   updateMultiFabState() が is-multi-action 付与で切替。 */
.schedule-multi-fab {
    right: 16px;
    padding: 0;
    min-width: 56px;
    width: 56px;
    background: var(--color-primary-soft);
    color: #fff;
    /* 「+」字を大きく見せる font-size、is-multi-action で 14px に縮む */
    font-size: 28px;
    line-height: 1;
    opacity: 1;
    pointer-events: auto;
}
.schedule-multi-fab:active {
    background: var(--color-primary);
}

/* =====================================================================
   Phase tx-fab-relayout: 取引一覧 右下 FAB (.tallybe-fab composition)。
   click で hidden <select>.showPicker() を発火し OS ピッカーから作成種別を選ぶ。
   将来 revolver UI に置換予定。
   ===================================================================== */
.tx-new-fab {
    right: 16px;
    padding: 0;
    min-width: 56px;
    width: 56px;
    background: var(--color-primary-soft);
    color: #fff;
    font-size: 28px;
    line-height: 1;
}
.tx-new-fab:active {
    background: var(--color-primary);
}
/* hidden <select>: showPicker() に届く必要があるので display:none は不可、
   visibility hidden + 1px サイズで non-tappable + non-readable に。 */
.tx-new-picker {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    border: none;
    padding: 0;
    margin: 0;
}

/* =====================================================================
   Phase β (2026-05-13): メッセージ画面 FAB UI shell。
   .tallybe-fab base を inherit (z-index: 110 で .msg-search-overlay (200)
   より下、tap target 56px、bottom = bottom-nav + 16 + safe-area)。
   tx-new-fab と同じ structure、background は --color-primary-soft で同 paradigm。
   ===================================================================== */
.msg-new-fab {
    right: 16px;
    padding: 0;
    min-width: 56px;
    width: 56px;
    background: var(--color-primary-soft);
    color: #fff;
    font-size: 28px;
    line-height: 1;
}
.msg-new-fab:active {
    background: var(--color-primary);
}
/* msg-new-picker は .tx-new-picker class を併記しているので追加スタイル不要。 */

/* =====================================================================
   Master entity FABs (2026-05-17 fab_ui_unification、betaNNN)
   商品 / 顧客 / カテゴリ / タグ / スタッフ の 5 entity 用 modifier。
   tx-new-fab と同 visual treatment (right 16px / 56px square /
   --color-primary-soft 背景 / 28px + アイコン)、`.tallybe-fab` base から
   position / size / shadow / press feedback / focus-visible を inherit。
   ===================================================================== */
.items-new-fab,
.customers-new-fab,
.categories-new-fab,
.tags-new-fab,
.staff-new-fab {
    right: 16px;
    padding: 0;
    min-width: 56px;
    width: 56px;
    background: var(--color-primary-soft);
    color: #fff;
    font-size: 28px;
    line-height: 1;
}
.items-new-fab:active,
.customers-new-fab:active,
.categories-new-fab:active,
.tags-new-fab:active,
.staff-new-fab:active {
    background: var(--color-primary);
}

/* =====================================================================
   Cross-page FAB persistence (2026-05-17 fab_ui_unification、betaNNN)
   hamburger 同 pattern (admin.css 8534-8536 + 8563-8564 参照)。
   FAB が両 page に存在する場合 view-transition 中視覚的に静止、
   片側のみの場合は default に fallback して main-content と一緒に slide。
   ===================================================================== */
.tallybe-fab-persistent {
    view-transition-name: persistent-fab;
}
/* old snapshot を opacity 0 で隠し、new snapshot のみ stationary で表示。
   両方 opacity 1 で重ねると半透明 box-shadow (rgba 0.22) が 2 重描画されて
   0.4 相当の濃さになり「下半分に大きめにかかる」glitch (Sato-san 2026-05-17
   beta273 視認で specify) が出る。new 単独表示で shadow も単一描画化。 */
::view-transition-old(persistent-fab) {
    animation: none;
    opacity: 0;
}
::view-transition-new(persistent-fab) {
    animation: none;
}

/* =====================================================================
   Mockup form (placeholder /new pages for Task 3、2026-05-17)
   ===================================================================== */
.mockup-form fieldset {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 12px;
    margin: 12px 0;
}
.mockup-form fieldset legend {
    padding: 0 8px;
    font-size: 13px;
    color: var(--color-text-muted, #666);
}
.placeholder-note {
    margin-top: 24px;
    padding: 12px;
    background: var(--color-row-hover, #f5f5f5);
    border-left: 3px solid var(--color-text-muted, #999);
    color: var(--color-text-muted, #666);
    font-size: 13px;
    border-radius: 4px;
}

/* 最終 row が FAB に覆われないよう、msg-list-page スコープで bottom padding 追加。
   .tallybe-fab bottom = bottom-nav-h(56) + 16 + safe-area、+ FAB height(56) で
   おおよそ 128px の下方領域を FAB が占める。最終 row が tap で展開した時にも
   下端が見えるよう 100px 程度の追加余白を確保。 */
.msg-list-page main#main {
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
}
.schedule-multi-fab.is-multi-action {
    /* multi-action 時は「作成 (N)」テキストを収めるため幅を可変化、
       「+」モード (base) は他 FAB と同じ 56x56 円形 (beta276)。 */
    padding: 0 22px;
    width: auto;
    font-size: 14px;
    line-height: 1.2;
}
/* cancel × button: 非表示が baseline (multi mode 外)、
   body.is-schedule-multi-mode が立つと slide-in。 */
.schedule-multi-cancel {
    right: 88px;            /* 16 + 56 + 16 spacing */
    width: 56px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    font-size: 22px;
    line-height: 1;
    opacity: 0;
    transform: translateY(20px) scale(0.92);
    pointer-events: none;
    /* slide-in 用 transition は base の opacity 180ms を活かしつつ、
       transform は 180ms ease-out で個別宣言 (.tallybe-fab base の
       transform 100ms より長くゆっくり) */
    transition: opacity 180ms ease-out, transform 180ms ease-out,
                background 100ms ease-out, color 100ms ease-out,
                box-shadow 100ms ease-out;
}
.schedule-multi-cancel:active {
    background: var(--color-row-active, rgba(0, 0, 0, 0.08));
    /* :active 時の transform は base .tallybe-fab:active の scale(0.95) が
       適用される (translateY(0) scale(0.95) になる、is-schedule-multi-mode
       gate と組み合わさるため下で再宣言) */
}
body.is-schedule-multi-mode .schedule-multi-cancel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* multi mode 中 cancel press: translateY(0) を維持しつつ scale(0.95) */
body.is-schedule-multi-mode .schedule-multi-cancel:active {
    transform: translateY(0) scale(0.95);
}
/* multi-mode 中の viewport 微妙アウトライン (Phase A.2.1.1) は Phase A.2.2' で撤去
   (視覚ノイズの整理、selected cell の inset shadow に統一)。 */

/* =====================================================================
   Phase A.2.2' (2026-05-12): Multi-mode summary
   ---------------------------------------------------------------------
   Phase A.2.1.1 の chip UI (横並び M/D row) は撤去。multi mode の表示は
   summary 1 行 + 最初に選択された日の詳細 (single-mode build を再利用)。
   件数ハイライトは grid 上の .is-selected (inset shadow) + FAB の「作成 (N)」
   ラベルが担うため、selected-day-list 内に件数表示の二重化を避ける。
   ===================================================================== */
.schedule-selected-day-multi-summary {
    font-weight: 600;
    margin: 8px 0 12px;  /* Phase A.2.2': chip 廃止で下マージン拡大 (詳細との余白) */
    color: var(--text-primary);
    font-size: 14px;
}

/* tap-flash micro feedback (defensive、ripple が体感不足だった場合に JS 側で発火) */
.schedule-cell.is-tap-flash {
    background: var(--schedule-selected-bg);
    transition: background 80ms ease-out;
}

/* schedule_form: multi-day prefill summary block */
.form-multi-date-summary {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-weight: 500;
    color: var(--text-primary);
}
.form-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 4px 0 0;
}

/* =====================================================================
   Phase A.2.4 (2026-05-12): schedule bottom sheet (Google Calendar 風 quick-create)
   ---------------------------------------------------------------------
   - overlay (z-150)+ sheet (z-150) は bottom-nav (100) と FAB (110) より上。
   - server-rendered once、CSS で hidden、JS の openSheet() が data-state="open"
     を立てて slide-up + opacity transition。
   - Stage 1 / Stage 2 の切替は sheet の data-stage 属性で CSS 制御。
   ===================================================================== */
.schedule-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 140;
    opacity: 0;
    transition: opacity 200ms ease-out;
    pointer-events: none;
}
.schedule-sheet-overlay[data-state="open"] {
    opacity: 1;
    pointer-events: auto;
}
.schedule-sheet-overlay[hidden] {
    display: none;
}

.schedule-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background: var(--bg-card);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.schedule-sheet[data-state="open"] {
    transform: translateY(0);
}
.schedule-sheet[hidden] {
    display: none;
}

/* Phase A.2.4.5 (2026-05-12): handle bar の hit area を「wrapper を大きく + 視覚
   bar を pseudo-element で内側描画」に構造変更。
   旧 Phase A.2.4.2 の「視覚 4px bar に ::before で transparent overlay 拡張」は
   Sato-san 実機で「視覚バーの 4px しか反応しない、外側が判定外」bug を起こした
   = pseudo の overlay box が touch hit testing から外れていた。
   今回は inverted: wrapper 自体を 200×36px の touch target にして、視覚 bar は
   ::before で中央に absolute 配置。pointer-events: none を ::before に明示して
   全 touch event を parent (.schedule-sheet-handle) が確実に catch。 */
.schedule-sheet-handle {
    width: 200px;
    height: 36px;
    margin: 0 auto;
    touch-action: none;
    cursor: grab;
    position: relative;
    /* wrapper 自体は完全透明、bg は ::before の visual bar が担当 */
    background: transparent;
}
.schedule-sheet-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 4px;
    background: var(--text-disabled);
    border-radius: 2px;
    opacity: 0.4;
    pointer-events: none;  /* 視覚専用、touch は親 wrapper が catch */
}

/* Phase A.2.4.1 (2026-05-12): header に「保存」(左) + ×(右) を集約、
   「予定を追加」h3 撤去 (input field 自体が役割を示すため dead weight)。
   padding を縮小、gap で button 間スペース。 */
.schedule-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px 8px;
    gap: 8px;
}
.schedule-sheet-save-header {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    min-width: 80px;
}
.schedule-sheet-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    min-width: 32px;
    min-height: 32px;
}
.schedule-sheet-close:hover,
.schedule-sheet-close:active {
    color: var(--text-primary);
    background: var(--color-primary-light);
}

/* form scroll 領域。soft keyboard 表示時に内部 scroll で title 入力が隠れないよう */
.schedule-sheet-form {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 16px 16px;
    -webkit-overflow-scrolling: touch;
}

/* Stage 1 layout (Phase A.2.4.1 で再構成):
   タイトル input (full width) + horizontal row [日付 | 時刻 | chevron] の 2 段。
   Phase A.2.4.10 (2026-05-12): max-height を CSS 変数経由に。
   `updateStageMaxHeights()` (schedule_calendar.js) が `scrollHeight + 8px` を測定
   して `--sheet-stage1-max-height` に set。content と max-height が完全一致するため
   cubic-bezier 後半シュート由来の「先端跳ね」が構造的に発生しない (Phase A.2.4.9
   の固定値 180/700 では content と乖離していた問題を根本解消)。fallback 値
   (`200px` / `800px`) は JS が走る前 / sheet 未 open 状態での安全網。
   easing は ease-out 維持、時間 200→350ms (Sato-san「もう少しゆっくり」要望)、
   opacity 150→250ms (時間比率維持で違和感なく)。 */
.schedule-sheet-stage1 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    /* Phase A.2.4.10.9 (2026-05-12): transition 1000→400ms (Sato-san「さすがに長い」)。
       Phase A.2.4.10.8 で確立した JS inline style.maxHeight 直接制御 pattern は維持
       (CSS 変数経由 transition は browser で effective でない問題に対応)。 */
    transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 0;
}
/* Phase A.2.4.10.9 (2026-05-12): Stage 1 を title + chevron 1 行に純化。
   title input が flex で width 拡張、chevron が右端固定。日付/開始時刻は Stage 2 へ。 */
.schedule-sheet-stage1-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.schedule-sheet-stage1-title {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 12px;
    font-size: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
}
.schedule-sheet-stage1-title:focus {
    border-color: var(--color-primary);
    outline: none;
}
.schedule-sheet-expand {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    border-radius: 8px;
}
.schedule-sheet-expand:hover,
.schedule-sheet-expand:active {
    background: var(--color-primary-light);
    color: var(--text-primary);
}
/* Stage 2 では chevron 非表示 (戻るは swipe-down のみ)。visibility hidden で
   flex slot を維持して row layout の shift を防ぐ。 */
.schedule-sheet[data-stage="2"] .schedule-sheet-expand {
    visibility: hidden;
}

/* Stage 2 layout (Phase A.2.4.9 で template 直書きに切替、_schedule_form_fields.html
   から decouple)。Phase A.2.4.1 で Stage 2 actions block 撤去、保存は header。
   Phase A.2.4.10 (2026-05-12): max-height を CSS 変数化、JS の scrollHeight 動的
   測定で content と完全一致 (「先端跳ね」根本解消)、時間 200→350ms (聡さん要望)。 */
.schedule-sheet-stage2 {
    overflow: hidden;
    /* Phase A.2.4.10.9 (2026-05-12): transition 1000→400ms (Sato-san「さすがに長い」)。
       Phase A.2.4.10.8 の JS inline style.maxHeight 直接制御 pattern は維持。 */
    transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 0;
}

/* Phase A.2.4.9 (2026-05-12): Stage 2 を _schedule_form_fields.html 共有から
   decouple、sheet 専用 layout に再構成。旧 .schedule-sheet-stage2 .form-field 系の
   polish CSS は Phase A.2.4.7 で導入したが本 phase で template 直書きに切替えたため
   全削除、新 .sheet-stage2-* selector で書き直し。
   Stage 2 構成: タイトル + [日付|開始|終了] 3 列 + 色ラベル 6 個 (3×2) + ユーザ + メモ。 */
.schedule-sheet-stage2 {
    padding: 4px 0;
}
.sheet-stage2-field {
    margin-bottom: 12px;
}
.sheet-stage2-title {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    font-size: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
}
.sheet-stage2-title:focus {
    border-color: var(--color-primary);
    outline: none;
}
/* Phase 2 (2026-05-29): 場所自動投入のインライン chip (title 欄直下)。
   schedule_place_suggest.js が JS で生成、hidden 属性で開閉。1 タップで地図URL 欄に
   gmap_url 投入。tap target は add / × を別ボタンで空間分離 (iOS hit-test 安全)。 */
.sheet-stage2-place-suggest {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: -4px 0 12px;
}
.sheet-stage2-place-suggest[hidden] {
    display: none;
}
.sheet-stage2-place-chip {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.sheet-stage2-place-chip-add {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--color-primary-light);
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.sheet-stage2-place-chip-add:active {
    background: var(--color-primary);
    color: #fff;
}
.sheet-stage2-place-chip-pin {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
}
.sheet-stage2-place-chip-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sheet-stage2-place-chip-plus {
    flex: 0 0 auto;
    font-weight: 700;
    opacity: 0.7;
}
.sheet-stage2-place-chip-dismiss {
    flex: 0 0 auto;
    width: 40px;
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.sheet-stage2-place-chip-dismiss:active {
    background: var(--border);
}
/* Phase β (2026-05-12): 旧 .sheet-stage2-row3 (3 列 date/start/end) を撤去、
   日付+開始 の 2 列 .sheet-stage2-row-start に置換。終了日時は別 toggle。 */
.sheet-stage2-row-start {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.sheet-stage2-date,
.sheet-stage2-end-date,
.sheet-stage2-start,
.sheet-stage2-end-time {
    padding: 9px 8px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    min-width: 0;
}
.sheet-stage2-date:focus,
.sheet-stage2-end-date:focus,
.sheet-stage2-start:focus,
.sheet-stage2-end-time:focus {
    border-color: var(--color-primary);
    outline: none;
}
/* Phase β (2026-05-12): 終了日時 collapsible toggle。
   button は subtle (text-muted)、expand 時は accent。end-fields は
   日付+時刻 の 2 列 grid (row-start と揃え)。 */
.sheet-stage2-end-toggle-wrap {
    margin-bottom: 14px;
}
.sheet-stage2-end-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
}
.sheet-stage2-end-toggle:hover,
.sheet-stage2-end-toggle:focus-visible {
    color: var(--text-primary);
    outline: none;
}
.sheet-stage2-end-toggle-wrap[data-expanded="true"] .sheet-stage2-end-toggle {
    color: var(--text-primary);
}
.sheet-stage2-end-toggle-icon {
    font-size: 10px;
    line-height: 1;
}
.sheet-stage2-end-fields {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 8px;
    margin-top: 8px;
}
.sheet-stage2-end-fields[hidden] {
    display: none;
}
/* Phase β (2026-05-12): 色ラベル 5 個 (旧 6 個 → 5 個、Phase α data migrate 後)。
   表示順 = 番号順 = 0(通常) / 1(予約) / 2(仕事) / 3(私用) / 4(タスク)。
   button あたりの width が拡大、font-size 10→11px、height 36→38px。 */
.sheet-stage2-colors {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
}
.sheet-stage2-color {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 150ms ease, transform 100ms ease;
}
.sheet-stage2-color:hover,
.sheet-stage2-color:active {
    transform: scale(0.95);
}
.sheet-stage2-color[data-selected="true"] {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-card);
}
.sheet-stage2-color-label {
    font-size: 11px;
    font-weight: 500;
    pointer-events: none;
    white-space: nowrap;
}
/* Phase β-3 hotfix (2026-05-12): fg は data-color-index 経由で
   var(--schedule-color-N-fg) token 参照へ統一、Phase α 期の color:white +
   text-shadow ハードコード解除。β-3 retune で予約 (skyblue) / 私用 (Pink
   100) / タスク (Yellow A700) bg が淡色化、white text では可読性不足を
   Sato-san が実機で報告。各 label の fg を token 経由にすれば light/dark
   両 mode で WCAG AA 自動確保。text-shadow は color-2 (Indigo 800、依然
   white text) のみ維持、color-1/3/4 は dark text on light bg で shadow が
   逆光して不要。color-0 は旧 var(--color-primary) override から
   var(--schedule-color-0-fg) token 参照へ移行 (light は #7b8d42 olive で
   同値、dark は white で contrast 改善 = 旧 dark olive-on-dark olive を
   解消)。 */
.sheet-stage2-color[data-color-index="0"] .sheet-stage2-color-label {
    color: var(--schedule-color-0-fg);
}
.sheet-stage2-color[data-color-index="1"] .sheet-stage2-color-label {
    color: var(--schedule-color-1-fg);
}
.sheet-stage2-color[data-color-index="2"] .sheet-stage2-color-label {
    color: var(--schedule-color-2-fg);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.sheet-stage2-color[data-color-index="3"] .sheet-stage2-color-label {
    color: var(--schedule-color-3-fg);
}
.sheet-stage2-color[data-color-index="4"] .sheet-stage2-color-label {
    color: var(--schedule-color-4-fg);
}
.sheet-stage2-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.sheet-stage2-select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 14px;
}
.sheet-stage2-select:focus {
    border-color: var(--color-primary);
    outline: none;
}
.sheet-stage2-notes {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 14px;
    resize: vertical;
    min-height: 60px;
}
.sheet-stage2-notes:focus {
    border-color: var(--color-primary);
    outline: none;
}

@media (max-width: 600px) {
    .schedule-sheet {
        max-height: 85vh;
    }
}

/* ============================================================
 * Phase A.2.6.2 (2026-05-13): bottom sheet root focus 時の outline 抑制
 * tabindex="-1" + JS focus による sheet root focus は「sheet opened」を
 * accessibility 経由で示すだけ、視覚的な outline は不要。
 * ============================================================ */
[data-schedule-sheet]:focus,
[data-schedule-sheet]:focus-visible {
    outline: none;
}

/* ============================================================
 * Phase A.2.6.1 (2026-05-13): cell 全件 DOM 化 + 月リスト 過去予定 section
 * Phase ε-1 (2026-05-12): 過去 5 件 cap + 「もっと見る」 toggle を廃止 (Fix H)
 * ============================================================ */

/* cell 内 PC view は max 3 + 他N件 を維持、4 件目以降は DOM には居るが非表示。
   選択日詳細リスト (JS が cell <li> を copy) で全件表示するため、cell 側だけ hide。
   `.schedule-list-item` (JS が新規生成する class) には影響しない (class 名違うため)。 */
.schedule-cell-titles .is-cell-overflow {
    display: none;
}

.schedule-month-list-past-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #666);
}
.schedule-month-list-past-line {
    flex: 1;
    height: 1px;
    background: var(--border-color, #e0e0e0);
}
.schedule-month-list-past-label {
    padding: 0 4px;
}

/* ============================================================
 * Phase A.2.6 (2026-05-13): bottom sheet edit mode 拡張
 *   - 場所 (textarea) / URL (input[type=url])
 *   - 関連する取引 mock (色ラベル A.2.4.9 mock と同じ pattern)
 *   - 削除リンク (edit mode のみ display、赤テキスト underline)
 * ============================================================ */
.sheet-stage2-location {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    border: 1px solid var(--border-color, #d0d0d0);
    border-radius: 6px;
    background: var(--input-bg, #fff);
    color: var(--text-primary, #222);
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
    resize: vertical;
}
.sheet-stage2-location:focus {
    border-color: var(--color-primary);
    outline: none;
}
.sheet-stage2-url {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color, #d0d0d0);
    border-radius: 6px;
    background: var(--input-bg, #fff);
    color: var(--text-primary, #222);
    font-size: 14px;
    box-sizing: border-box;
}
.sheet-stage2-url:focus {
    border-color: var(--color-primary);
    outline: none;
}
.sheet-stage2-linked-mock {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--border-color, #d0d0d0);
    border-radius: 8px;
    background: var(--bg-secondary, #f7f7f7);
}
.sheet-stage2-linked-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.sheet-stage2-linked-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #555);
}
.sheet-stage2-link-add-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color, #d0d0d0);
    border-radius: 6px;
    background: var(--input-bg, #fff);
    color: var(--text-secondary, #555);
    font-size: 13px;
    cursor: not-allowed;
    opacity: 0.6;
}
.sheet-stage2-linked-hint {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary, #555);
    font-style: italic;
}
.sheet-stage2-delete-wrap {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color, #e0e0e0);
    /* Phase A.2.6.3 (2026-05-13): 削除リンクを右寄せ。低頻度の破壊的アクションに
       対する誤タップ予防、iOS / Material の慣例 (destructive but optional) に整合。 */
    text-align: right;
}
.sheet-stage2-delete-wrap[hidden] {
    display: none;
}
.sheet-stage2-delete-form {
    margin: 0;
    /* Phase A.2.6.3: text-align:right に従う形にするため inline-block 化。
       form が wrap の幅を取らず content (button) サイズに縮む。 */
    display: inline-block;
}
.sheet-stage2-delete-link {
    display: inline-block;
    padding: 8px 4px;
    background: none;
    border: none;
    color: #d32f2f;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
}
.sheet-stage2-delete-link:hover {
    color: #b71c1c;
    opacity: 0.85;
}

/* ============================================================
   Task 1 final (2026-05-15): topbar 右側 ⚙ 設定ボタン + 設定ハブ画面
   ============================================================ */

/* topbar-actions: 旧 36px width 制約を解除 (legacy rule @ L2690 と
   messages の flex container rule @ L6365 の上に乗る形)。複数ボタン
   (🔍 + ⚙) を並べる必要があるため content-driven 幅へ。 */
.topbar-actions {
    width: auto;
    min-width: var(--tap-min);
}

/* 単一の topbar アクション (⚙ / 🔍 等)。msg-search-toggle と視覚一致。 */
.topbar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    color: #fff;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: 4px;
}
.topbar-action:hover { background: rgba(255, 255, 255, 0.15); }
.topbar-action svg { width: 24px; height: 24px; }

/* Settings hub (entity 別設定ハブの共通スタイル) */
.settings-hub {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--sp-md);
}
.settings-hub-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: var(--sp-md);
    overflow: hidden;
}
.settings-hub-card-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    padding: var(--sp-sm) var(--sp-md);
    border-bottom: 1px solid var(--color-border);
    margin: 0;
}
.settings-hub-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.settings-hub-link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}
.settings-hub-links li:last-child .settings-hub-link,
.settings-hub-link:last-child {
    border-bottom: none;
}
.settings-hub-link:hover { background: var(--color-row-hover); }
.settings-hub-link-label {
    font-size: var(--fs-base);
    font-weight: 500;
}
.settings-hub-link-desc {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    grid-row: 2;
}
.settings-hub-link-arrow {
    grid-column: 2;
    grid-row: 1 / 3;
    font-size: 1.2em;
    color: var(--color-text-muted);
}
.settings-hub-link.is-disabled { cursor: not-allowed; }
.settings-hub-link.is-disabled:hover { background: transparent; }
.settings-hub-links--disabled .settings-hub-link-label {
    color: var(--color-text-muted);
}

/* 戻るナビ (Task 1 final UI polish、2026-05-15) — Sato-san directive: 明確に大きめ */
.back-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    background: transparent;
    border-radius: 8px;
    margin-bottom: 12px;
    min-height: 48px;
    box-sizing: border-box;
    transition: background 0.15s;
}
.back-nav:hover { background: var(--color-row-hover); }
.back-nav:active { background: var(--color-row-hover); opacity: 0.7; }
.back-nav-arrow {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.back-nav-label { line-height: 1.3; }

/* mockup form: 保存 button を中央配置 (category_polish_v2、2026-05-17)。
   bare `.form-actions` には flex 既定なし → mockup scoped で center 化。
   schedule_form / web/* (.web-admin-form scoped) は影響受けず。 */
.mockup-form .form-actions {
    display: flex;
    justify-content: center;
}

/* カテゴリ CRUD (Task 3、2026-05-17): Layer 1 「組込み」 badge + lock icon、
   delete form 区切り、 radio inline。 customer_form の form-stack pattern に
   揃えるが、 category 固有 visual primitive は本ブロックで scoped 化。 */
.badge-builtin {
    background: #eceff1;
    color: #607d8b;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.badge-builtin svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.form-builtin-banner {
    margin: var(--sp-md) 0;
}
.form-builtin-banner .form-note {
    margin-top: var(--sp-sm);
}
.form-stack.form-danger {
    margin-top: var(--sp-xl);
    padding-top: var(--sp-lg);
    border-top: 1px solid var(--color-border);
}
.radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: var(--sp-md);
    cursor: pointer;
}
.radio-inline input[type="radio"]:disabled + * {
    opacity: 0.6;
}

/* カテゴリ CRUD polish v3 (`category_crud_polish_v3`、2026-05-17、beta292):
   - 一覧の universal 行は 「組込み」 badge 撤去、 name 接頭に lock icon のみ
   - form の 種別 fieldset は browser default border 撤去 (カテゴリ名 と統一感)
   - 種別 + 色 picker を flex row で並べ、 native color picker を viewport 内に */
.settings-row .name {
    display: flex;
    align-items: center;
}
.builtin-lock {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    color: var(--color-text-muted);
}
.builtin-lock svg {
    width: 14px;
    height: 14px;
}
.form-stack fieldset.form-label {
    border: none;
    padding: 0;
    margin: 0 0 var(--sp-md);
    min-width: 0;
}
.form-stack fieldset.form-label legend {
    display: block;
    padding: 0;
    margin-bottom: var(--sp-xs);
    font-weight: 500;
    color: var(--color-text);
}
.form-row-type-color {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-lg);
}
.form-row-type-color > fieldset.form-label {
    flex: 1 1 auto;
    margin-bottom: 0;
}
.form-row-type-color > .form-label-color {
    flex: 0 0 auto;
    margin-bottom: 0;
}
.form-row-type-color .form-label-color input[type="color"] {
    width: 56px;
    height: 36px;
    cursor: pointer;
    padding: 0;
}

/* ============================================================
   Phase 3 (beta301): カテゴリ一覧 is_active toggle + 鍵 + 非active
   ============================================================ */
.settings-row .row-toggle-area {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.settings-row .lock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    opacity: 0.55;
}
.settings-row .lock-icon svg {
    width: 18px;
    height: 18px;
}
.settings-row.is-inactive {
    opacity: 0.5;
}
.settings-row.is-inactive .name {
    color: var(--color-text-muted);
    font-weight: normal;
}

/* toggle-form は flex item として toggle-switch だけを表示するための薄い wrapper */
.settings-row .toggle-form {
    margin: 0;
    padding: 0;
    display: flex;
}

/* iOS 風 slide toggle (CSS 単独、JS は htmx PATCH のみ) */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}
/* beta306: 古いキャッシュからのアニメーション持越し対策、子全要素の transition を強制無効化 */
.toggle-switch,
.toggle-switch *,
.toggle-switch *::before,
.toggle-switch *::after {
    transition: none !important;
}
.toggle-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    border-radius: 22px;
}
.toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-primary);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(18px);
}
.toggle-switch input:focus-visible + .toggle-slider {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

[data-theme="dark"] .toggle-slider {
    background-color: #555;
}
[data-theme="dark"] .toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-primary-soft);
}

/* ============================================================
   Phase 4 (beta308): カテゴリ編集ページ polish + 並び順 dropdown
   - 既存 .form-help / .form-note は触らない、新規 .form-help-icon を追加
   - 既存 .form-stack.form-danger に視覚効果を追記 + 新 .form-danger-label
   - 並び順 fieldset 用 .form-current-value + 使用状態 toggle-row
   ============================================================ */

/* 補助情報、info アイコン左 + 1 行のテキスト右の横並び表示。
   既存 .form-help は触らず、icon 付き polished pattern として scope を分離。 */
.form-help-icon {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-muted);
    display: flex;
    gap: 6px;
    align-items: flex-start;
}
.form-help-icon .info-icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-top: 1px;
    display: inline-flex;
}
.form-help-icon .info-icon svg {
    width: 14px;
    height: 14px;
}

/* 並び順 fieldset の「現在: 並び N」表示 */
.form-current-value {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* 使用状態 fieldset の toggle + ラベル横並び */
.toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.toggle-label-text {
    font-size: 14px;
}

/* 削除エリア視覚効果 (既存 .form-stack.form-danger に追記)。
   背景 + ボーダーで「危険な操作」カードとして視覚分離。 */
.form-stack.form-danger {
    padding: var(--sp-md);
    background: rgba(220, 53, 69, 0.05);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: 8px;
}
.form-danger-label {
    margin: 0 0 12px;
    font-weight: bold;
    font-size: 14px;
    color: var(--color-error);
}

[data-theme="dark"] .form-stack.form-danger {
    background: rgba(255, 100, 100, 0.08);
    border-color: rgba(255, 100, 100, 0.3);
}
[data-theme="dark"] .form-danger-label {
    color: #ef9a9a;
}