/* HIBARI Design System v1.0.0 (Section 4.3): OS フォントスタック優先。
 * Inter / JetBrains Mono は spec から除外。日本語可読性最優先で OS フォント
 * (SF Pro Text/Display + Hiragino Sans + Yu Gothic UI + Meiryo UI + Noto Sans JP) を使う。
 * Noto Sans JP のみ Windows/Linux 用フォールバックとして Google Fonts から読み込む。
 * 等幅は ui-monospace + SF Mono + Menlo + Consolas で OS フォント。 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

@import url('./a11y.css'); /* WCAG 2.1 AA ユーティリティ (sr-only / skip-link / required-mark 等) */

/* ========================================================================
   HIBARI Intra — HIBARI Design System v1.0.0 準拠
   ------------------------------------------------------------------------
   参照: docs/HIBARI_DESIGN_SYSTEM.md

   設計原則 (HIBARI 7 原則):
   1. コンテンツファースト — UI は背景に退く
   2. 明瞭さ > 派手さ — 読みやすさを最優先
   3. 既知のパターンを使う — 独自ジェスチャーを発明しない
   4. 階層を視覚化する — 影・余白・レイヤーで表現
   5. 状態を必ず明示する — 全状態を設計
   6. アクセシブルを既定にする — WCAG AA 準拠
   7. 8 の倍数で揃える — spacing を統一

   デザイントークン:
   - Primary: #003399 (HIBARI Brand)
   - Surface: canvas / subdued / raised / overlay / inverse
   - Content: primary / secondary / tertiary / quaternary / brand / onBrand
   - Border: subtle / default / strong / brand
   - Radius: none(0) / xs(4) / sm(6) / md(8) / lg(12) / xl(16) / 2xl(20)
   - Elevation: 0~4 + focus
   - Typography: largeTitle(34) → caption2(11)
   - Motion: instant(0) → lazy(480ms)

   ※ レガシーエイリアス (--color-blue-500 等) は後方互換のため残存
   ======================================================================== */

:root {
  /* === HIBARI Brand Colors === */
  --color-blue-50:  #E6EBF5;  /* brand tint */
  --color-blue-100: #CCd7EB;
  --color-blue-200: #99AFD6;
  --color-blue-300: #6687C2;
  --color-blue-400: #335FAD;
  --color-blue-500: #003399;  /* HIBARI Primary — brand.500 */
  --color-blue-600: #002B85;  /* hover — brand.600 */
  --color-blue-700: #00236D;  /* pressed — brand.700 */
  --color-blue-800: #001B56;
  --color-blue-900: #00133F;

  /* === Solid Gray (Apple System Gray ベース) === */
  --color-white: #FFFFFF;
  --color-gray-50:  #F5F5F7;   /* Apple page background */
  --color-gray-100: #EEEEF0;
  --color-gray-200: #E5E5EA;   /* Apple Gray 5 */
  --color-gray-300: #D1D1D6;   /* Apple Gray 4 */
  --color-gray-420: #C7C7CC;   /* Apple Gray 3 */
  --color-gray-500: #AEAEB2;   /* Apple Gray 2 */
  --color-gray-536: #8E8E93;   /* Apple Gray (label tertiary) */
  --color-gray-600: #6E6E73;   /* Apple label secondary */
  --color-gray-700: #48484A;
  --color-gray-800: #2C2C2E;
  --color-gray-900: #1D1D1F;   /* Apple label primary (true text) */
  --color-black: #000000;

  /* === Semantic (Apple System colors) === */
  --color-success-50:  #E8F8EE;
  --color-success-100: #C7E8D5;
  --color-success-500: #34C759; /* System Green */
  --color-success-700: #248A3D;
  --color-error-50:    #FFE5E5;
  --color-error-100:   #F5C1C3;
  --color-error-500:   #FF3B30; /* System Red */
  --color-error-700:   #C30000;
  --color-warning-50:  #FFF4E5;
  --color-warning-100: #FAE9B3;
  --color-warning-500: #FF9500; /* System Orange */
  --color-warning-700: #B36400;
  --color-info-50:     #E5F0FF;
  --color-info-100:    #CCE0FF;
  --color-info-500:    #007AFF; /* Apple System Blue (info/link用) */
  --color-info-700:    #0062CC; /* WCAG AA (4.5:1 on white) */

  /* Purple (kintai 「個人作業」分類で利用) */
  --color-purple-50:   #F4ECFA;
  --color-purple-500:  #5E2B97;
  --color-purple-700:  #4A1F7A;

  /* === Legacy Aliases (HIBARI Design System Section 4.2 への bridge)
     旧 --color-* を新 token (--brand-*, --surface-*, --content-*, --border-*) に
     マッピングして、dark mode 切替・トークン更新が一箇所で済むようにする。
     新規コードでは新 token を直接使うこと。 === */
  --color-primary:        var(--brand-500);
  --color-primary-hover:  var(--brand-600);
  --color-primary-active: var(--brand-700);
  --color-primary-tint:   var(--brand-50);

  --color-text:           var(--content-primary);
  --color-text-secondary: var(--content-secondary);
  --color-text-muted:     #666668;                /* WCAG AA: 白上 5.8:1 */
  --color-text-on-primary:var(--content-on-brand);

  --color-bg:             var(--surface-subdued);
  --color-surface:        var(--surface-raised);
  --color-surface-hover:  var(--surface-subdued);

  --color-border:         var(--border-subtle);
  --color-border-strong:  var(--border-strong);
  --color-divider:        var(--border-subtle);

  /* HIBARI Brand をリンク/アクセントに使用。
     白上の「テキスト」用に WCAG AA (4.5:1) を満たす shade を用意。 */
  --color-link:              var(--color-blue-500);    /* #003399 — content.brand */
  --color-link-text:         var(--color-blue-500);    /* 白上 10:1 — link 文字 */
  --color-link-visited:      #5E2B97;                  /* 白上 7.5:1 — purple */

  --color-error-text:        #D70015;                  /* 白上 5.5:1 — error 文字色 */
  --color-success-text:      #1B8A37;                  /* 白上 4.6:1 — success 文字色 */
  --color-warning-text:      #995700;                  /* 白上 5.7:1 — warning 文字色 */
  --color-info-text:         #0062B1;                  /* 白上 5.9:1 — info 文字色 */

  --color-danger:         var(--color-error-500);
  --color-success:        var(--color-success-500);
  --color-warning:        var(--color-warning-500);

  /* モーダル overlay (light/dark で共通: 半透明黒)
     spec 7.6: light = rgba(0,0,0,0.4) / dark = rgba(0,0,0,0.6) */
  --color-overlay: rgba(0, 0, 0, 0.4);

  /* === Spacing (HIBARI Design System Section 4.4: 8pt grid) === */
  --space-0:    0;
  --space-0_5:  2px;   /* spec 0.5: 微調整 hairline */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;  /* spec 20: 画面間の余白 */
  --space-24:   96px;  /* spec 24: 最大級の余白 */

  /* === Radius (HIBARI Design System: concentric corner radius) === */
  --radius-none: 0;
  --radius-xs: 4px;    /* バッジ・チップ */
  --radius-sm: 6px;    /* ボタン(small)・入力フィールド */
  --radius-md: 8px;    /* ボタン(default)・select */
  --radius-lg: 12px;   /* カード（既定） */
  --radius-xl: 16px;   /* モーダル・大きなパネル */
  --radius-2xl: 20px;  /* 画面端パネル */
  --radius-full: 9999px; /* アバター・ピル状 */
  --radius-pill: 9999px; /* alias */
  --radius: var(--radius-md);

  /* === Elevation (HIBARI Design System: 控えめなシャドウ) === */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);   /* カード(resting) */
  --elevation-2: 0 2px 4px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.08);   /* カードhover/ドロップダウン */
  --elevation-3: 0 4px 8px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.10);  /* ポップオーバー */
  --elevation-4: 0 8px 16px rgba(0,0,0,0.10), 0 16px 32px rgba(0,0,0,0.12); /* モーダル */
  --elevation-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #003399; /* フォーカスリング */
  --shadow-sm: var(--elevation-1);
  --shadow-md: var(--elevation-2);
  --shadow-lg: var(--elevation-3);
  --shadow-xl: var(--elevation-4);

  /* === Typography
   * 和欧文 1 系統に統一:
   *   欧文 = Inter (Variable Font, Google Fonts) → サンセリフでフォーム/数字との相性◎
   *   和文 = Noto Sans JP (Google Fonts) → 日本語 UI のデファクト
   * Apple SF / Hiragino はフォールバックとして温存 (Web フォント未取得時の見栄え担保)。
   * 参照: docs/adr/0001-design-tokens.md (2026-05-15) */
  /* HIBARI Design System Section 4.3 推奨: 日本語可読性最優先・OS フォントスタック。
     Inter は spec から除外。 */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
               'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
               'Yu Gothic UI', 'Meiryo UI', 'Noto Sans JP',
               system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Roboto Mono', monospace;

  /* === Typography Scale (HIBARI Design System - HIG Text Style)
     参照: HIBARI_DESIGN_SYSTEM.md Section 4.3
     11pt未満は使用禁止（HIG最小値） === */
  --font-size-caption2:    11px;  /* メタ情報 */
  --font-size-caption1:    11px;  /* タグ・バッジ (weight:500) */
  --font-size-footnote:    12px;  /* キャプション */
  --font-size-subheadline: 13px;  /* テーブルヘッダ・ラベル */
  --font-size-callout:     14px;  /* 補足説明 */
  --font-size-body:        15px;  /* 本文の既定 (業務SaaSでは17より15が適切) */
  --font-size-headline:    17px;  /* 強調本文・項目名 */
  --font-size-title3:      20px;  /* サブセクション */
  --font-size-title2:      22px;  /* カードヘッダ */
  --font-size-title1:      28px;  /* セクションタイトル */
  --font-size-largeTitle:  34px;  /* 画面の主タイトル */

  /* レガシーエイリアス（後方互換） */
  --font-size-xs:   var(--font-size-footnote);   /* 12px */
  --font-size-sm:   var(--font-size-subheadline); /* 13px */
  --font-size-md:   var(--font-size-callout);    /* 14px */
  --font-size-base: var(--font-size-body);       /* 15px */
  --font-size-lg:   var(--font-size-headline);   /* 17px */
  --font-size-xl:   var(--font-size-title3);     /* 20px */
  --font-size-2xl:  var(--font-size-title2);     /* 22px */
  --font-size-3xl:  var(--font-size-title1);     /* 28px */
  --font-size-4xl:  var(--font-size-largeTitle); /* 34px */

  /* === Line Height Scale (HIBARI Design System) === */
  --line-height-none:    1;      /* 単行アイコンテキスト、バッジ */
  --line-height-tight:   1.2;    /* largeTitle (41/34), title1 (34/28) */
  --line-height-snug:    1.27;   /* title2 (28/22), title3 (25/20) */
  --line-height-normal:  1.29;   /* headline (22/17) */
  --line-height-relaxed: 1.47;   /* body (22/15), callout (21/14) */
  --line-height-loose:   1.38;   /* subheadline (18/13) */

  /* === Letter Spacing (HIBARI Design System) === */
  --tracking-tight:   -0.02em;  /* largeTitle / title1 */
  --tracking-snug:    -0.01em;  /* title2 / title3 / headline */
  --tracking-normal:   0;       /* body 以下 */
  --tracking-wide:     0.04em;  /* caption uppercase */
  --tracking-wider:    0.06em;  /* グループ見出し (uppercase) */

  /* === Focus (HIBARI brand focus ring)
     WCAG 2.4.7 / 1.4.11: フォーカスリングは隣接色と 3:1 以上のコントラスト。
     HIBARI brand #003399 を 60% alpha で使用。
     --focus-ring-input は入力フィールド用の控えめなリング (テキスト読みやすさ優先)。 */
  --focus-ring: 0 0 0 3px rgba(0, 51, 153, .6);
  --focus-ring-input: 0 0 0 3px rgba(0, 51, 153, .15);

  /* === Layout (HIBARI Design System Section 6.3) === */
  --sidebar-width: 240px;            /* spec: 240px */
  --sidebar-width-collapsed: 64px;   /* spec: 64px */
  --header-height: 56px;             /* spec: 56px */
  --topbar-height: 56px;             /* spec: 56px (旧: 48px) */

  /* ==========================================================================
     HIBARI Design System トークン (CLAUDE.md / HIBARI_DESIGN_SYSTEM.md 参照)
     ========================================================================== */

  /* HIBARI Brand Colors - 10 段階フルパレット (Section 4.1) */
  --brand-50:  #EBF0FA;  /* 極薄背景、Selected セルの hover */
  --brand-100: #D6E1F5;  /* Subtle background */
  --brand-200: #A8BDE6;  /* Border accent */
  --brand-300: #6E8ED1;  /* Disabled primary */
  --brand-400: #3D63BD;  /* Hover lighter */
  --brand-500: #003399;  /* Primary (HIBARI ブランドカラー) */
  --brand-600: #002B85;  /* Primary hover */
  --brand-700: #00236D;  /* Primary pressed */
  --brand-800: #001B54;  /* High emphasis */
  --brand-900: #00113D;  /* Headline on light */

  /* Brand Accent (Red) */
  --brand-accent-red-500: #FF0000;
  --brand-accent-red-600: #D90000;

  /* === Surface Tokens (HIBARI Design System Section 4.2) === */
  --surface-canvas:  #FFFFFF;  /* ページ全体の最下層 */
  --surface-subdued: #F5F5F7;  /* セクション背景 */
  --surface-raised:  #FFFFFF;  /* カード・パネル */
  --surface-overlay: #FFFFFF;  /* モーダル・ポップオーバー */
  --surface-inverse: #1C1C1E;  /* トースト等の反転表示 */

  /* === Content Tokens (HIBARI Design System Section 4.2) === */
  --content-primary:    #1C1C1E;               /* 本文・主要見出し */
  --content-secondary:  rgba(58, 58, 60, 0.72); /* 補助情報。alpha 0.6 では tinted bg (gray-50/100) 上で WCAG AA 未達のため 0.72 に */
  --content-tertiary:   rgba(58, 58, 60, 0.3); /* プレースホルダ・ヒント (30%) */
  --content-quaternary: rgba(58, 58, 60, 0.18);/* 区切り上の文字 (18%) */
  --content-brand:      #003399;               /* リンク・ブランド強調 */
  --content-on-brand:   #FFFFFF;               /* Primaryボタン上の文字 */

  /* === Border Tokens (HIBARI Design System Section 4.2) === */
  --border-subtle:  #E5E5EA;  /* 区切り線 */
  --border-default: #D1D1D6;  /* 入力フィールド枠 */
  --border-strong:  #8E8E93;  /* 強調枠 */
  --border-brand:   #003399;  /* フォーカスリング・選択枠 */

  /* === Interactive Fill (HIBARI Design System Section 4.2) === */
  --fill-primary:    rgba(120, 120, 128, 0.20);
  --fill-secondary:  rgba(120, 120, 128, 0.16);
  --fill-tertiary:   rgba(118, 118, 128, 0.12);
  --fill-quaternary: rgba(116, 116, 128, 0.08);

  /* Status Colors (HIBARI Design System Section 4.1) */
  --status-success: #34C759;
  --status-warning: #FF9500;
  --status-danger:  #FF3B30;
  --status-info:    #007AFF;

  /* Status Background (Badge 用、Section 7.12) — light mode */
  --status-success-bg: #E8F8EC;
  --status-warning-bg: #FFF4E5;
  --status-danger-bg:  #FDECEC;
  --status-info-bg:    #E5F1FF;

  /* Apple System Colors (Light Mode) - Reference */
  --apple-blue:   #007AFF;
  --apple-green:  #34C759;
  --apple-orange: #FF9500;
  --apple-red:    #FF3B30;
  --apple-teal:   #5AC8FA;
  --apple-purple: #AF52DE;
  --apple-pink:   #FF2D55;

  /* Apple Gray Scale */
  --apple-gray:   #8E8E93;
  --apple-gray-2: #AEAEB2;
  --apple-gray-3: #C7C7CC;
  --apple-gray-4: #D1D1D6;
  --apple-gray-5: #E5E5EA;
  --apple-gray-6: #F2F2F7;

  /* Apple Semantic Colors (Light Mode) */
  --apple-label:            #000000;
  --apple-label-secondary:  rgba(60, 60, 67, 1);
  --apple-label-tertiary:   rgba(60, 60, 67, 0.6);
  --apple-label-quaternary: rgba(60, 60, 67, 0.18);
  --apple-fill:             rgba(120, 120, 128, 0.2);
  --apple-fill-secondary:   rgba(120, 120, 128, 0.16);
  --apple-fill-tertiary:    rgba(118, 118, 128, 0.12);
  --apple-separator:        rgba(60, 60, 67, 0.29);
  --apple-separator-opaque: #C6C6C8;
  --apple-background:          #FFFFFF;
  --apple-background-secondary:#F2F2F7;
  --apple-background-tertiary: #FFFFFF;

  /* Apple Typography (SF Pro + 日本語フォールバック、Inter 除外) */
  --font-system:  -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
                  'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
                  'Yu Gothic UI', 'Meiryo UI', 'Noto Sans JP',
                  system-ui, sans-serif;
  --font-rounded: 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, sans-serif;

  /* === Motion Tokens (HIBARI Design System Section 4.7) === */
  /* Duration */
  --motion-instant: 0ms;    /* Reduce Motion 時 */
  --motion-fast:    120ms;  /* hover / 色変化 */
  --motion-base:    200ms;  /* 既定（開閉・出現） */
  --motion-slow:    320ms;  /* モーダル・大移動 */
  --motion-lazy:    480ms;  /* デコラティブな出現（多用禁止） */

  /* Easing */
  --ease-standard:   cubic-bezier(0.4, 0.0, 0.2, 1);  /* 既定 */
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1);    /* 出現 */
  --ease-exit:       cubic-bezier(0.4, 0.0, 1, 1);    /* 退出 */
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1); /* バウンス（軽く） */

  /* Apple Animation Timing (レガシーエイリアス)
     apps/* で再定義されていた --apple-* を core に集約 (task-023a)。
     これ以降 apps 側はローカル定義を削除して core を参照する。 */
  --apple-duration:       var(--motion-base);
  --apple-duration-fast:  var(--motion-fast);
  --apple-duration-slow:  var(--motion-slow);
  --apple-easing:         var(--ease-standard);
  --apple-easing-spring:  var(--ease-spring);
  --apple-easing-out:     var(--ease-emphasized);
  --apple-easing-in:      var(--ease-exit);
  /* Material Design 系の overshoot bounce (apps/kintai/member.html, expenses/m-member.html,
     sales/ui/common.css で重複定義されていた値)。 --ease-spring より overshoot が強めで、
     FAB / モーダル等の「飛び込む」アニメに使用する。 */
  --apple-spring:         cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Touch Target (iOS HIG: 44pt minimum) */
  --min-touch-target: 44px;

  /* Card Shadow (Apple HIG style) */
  --shadow-card:       0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-modal:      0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   テーマ切替時のスムーズトランジション (320ms フェード)
   theme.js が html.theme-transitioning クラスを 320ms 付与し、その間だけ
   各要素の background/color/border に transition をかける。
   prefers-reduced-motion: reduce 時は即座に切替 (320ms→0)。
   ========================================================================== */
:root.theme-transitioning,
:root.theme-transitioning *,
:root.theme-transitioning *::before,
:root.theme-transitioning *::after {
  transition: background-color 280ms var(--ease-standard),
              background 280ms var(--ease-standard),
              color 280ms var(--ease-standard),
              border-color 280ms var(--ease-standard),
              fill 280ms var(--ease-standard),
              stroke 280ms var(--ease-standard),
              box-shadow 280ms var(--ease-standard) !important;
}
@media (prefers-reduced-motion: reduce) {
  :root.theme-transitioning,
  :root.theme-transitioning *,
  :root.theme-transitioning *::before,
  :root.theme-transitioning *::after {
    transition: none !important;
  }
}

/* ==========================================================================
   Dark Mode: HIBARI Design System (Section 10)

   切替戦略 (spec 10.4):
   - <html> に `theme-dark` クラスが付与されている → dark
   - <html> に `theme-light` クラスが付与されている → light (system が dark でも)
   - どちらも無ければ system の prefers-color-scheme: dark に追従

   JS (core/ui/theme.js) が起動時に localStorage.hibari_theme = 'light'|'dark'|'system'
   を読み、html.classList を切替える。Tailwind/shadcn と同じ darkMode:"class" 戦略。

   spec 10.3:「Primary ボタン背景は #003399 のまま維持。content.brand リンクは
   brand.400 周辺で明るく。影は弱める。」を遵守。
   ========================================================================== */

/* dark token group: クラスでの明示指定 OR system 追従 (theme-light でない限り) */
:root.theme-dark,
:root.theme-system.is-system-dark {
  /* HIBARI Brand: ボタン背景は #003399 のまま維持 (spec 10.3) */
  --brand-50:  rgba(110, 142, 209, 0.18);
  --brand-100: rgba(110, 142, 209, 0.28);
  --brand-200: #1B3E80;
  --brand-300: #2D55A8;
  --brand-400: #3D63BD;
  --brand-500: #003399;   /* Primary - dark でも維持 */
  --brand-600: #002B85;
  --brand-700: #00236D;
  --brand-800: #001B54;
  --brand-900: #00113D;

  /* Blue scale alias (後方互換) */
  --color-blue-50:  var(--brand-50);
  --color-blue-500: var(--brand-500);
  --color-blue-600: var(--brand-600);
  --color-blue-700: var(--brand-700);

  /* Surface (上に浮くほど明るい — Section 10.2) */
  --surface-canvas:  #000000;
  --surface-subdued: #1C1C1E;
  --surface-raised:  #2C2C2E;
  --surface-overlay: #3A3A3C;
  --surface-inverse: #F5F5F7;

  /* Content */
  --content-primary:    #FFFFFF;
  --content-secondary:  rgba(235, 235, 245, 0.72); /* dark mode: 同 AA 要件で alpha 0.6 → 0.72 */
  --content-tertiary:   rgba(235, 235, 245, 0.3);
  --content-quaternary: rgba(235, 235, 245, 0.16);
  --content-brand:      #6E8ED1;  /* リンクは brand.300 周辺で明るく (spec 10.3) */
  --content-on-brand:   #FFFFFF;

  /* Border */
  --border-subtle:  #38383A;
  --border-default: #48484A;
  --border-strong:  #636366;
  --border-brand:   #6E8ED1;

  /* Fill (dark variant) */
  --fill-primary:    rgba(120, 120, 128, 0.36);
  --fill-secondary:  rgba(120, 120, 128, 0.32);
  --fill-tertiary:   rgba(118, 118, 128, 0.24);
  --fill-quaternary: rgba(118, 118, 128, 0.18);

  /* Status (dark variant) */
  --status-success: #30D158;
  --status-warning: #FF9F0A;
  --status-danger:  #FF453A;
  --status-info:    #0A84FF;
  --status-success-bg: rgba(48, 209, 88, 0.18);
  --status-warning-bg: rgba(255, 159, 10, 0.18);
  --status-danger-bg:  rgba(255, 69, 58, 0.18);
  --status-info-bg:    rgba(10, 132, 255, 0.18);

  /* Apple System Colors (Dark Mode) */
  --apple-blue:   #0A84FF;
  --apple-green:  #30D158;
  --apple-orange: #FF9F0A;
  --apple-red:    #FF453A;
  --apple-teal:   #64D2FF;
  --apple-purple: #BF5AF2;
  --apple-pink:   #FF375F;

  /* Apple Semantic Colors (Dark Mode) */
  --apple-label:            #FFFFFF;
  --apple-label-secondary:  rgba(235, 235, 245, 0.6);
  --apple-label-tertiary:   rgba(235, 235, 245, 0.3);
  --apple-label-quaternary: rgba(235, 235, 245, 0.18);
  --apple-fill:             rgba(120, 120, 128, 0.36);
  --apple-fill-secondary:   rgba(120, 120, 128, 0.32);
  --apple-fill-tertiary:    rgba(118, 118, 128, 0.24);
  --apple-separator:        rgba(84, 84, 88, 0.6);
  --apple-separator-opaque: #38383A;
  --apple-background:          #000000;
  --apple-background-secondary:#1C1C1E;
  --apple-background-tertiary: #2C2C2E;

  /* レガシー --color-* alias (後方互換) */
  --color-bg:              var(--surface-subdued);
  --color-surface:         var(--surface-raised);
  --color-text:            var(--content-primary);
  --color-text-secondary:  var(--content-secondary);
  --color-text-muted:      rgba(235, 235, 245, 0.45);
  --color-text-on-primary: var(--content-on-brand);
  --color-border:          var(--border-subtle);
  --color-border-strong:   var(--border-strong);
  --color-surface-hover:   #3A3A3C;
  --color-divider:         rgba(84, 84, 88, 0.4);

  /* Primary tint (青の塗り) — dark では HIBARI brand を低彩度 alpha で */
  --color-primary-tint: rgba(110, 142, 209, 0.18);
  --color-link-text:    var(--content-brand);
  --color-link-visited: #BF8AF0;

  /* Tint 系: light の薄い背景 + 濃い文字 → dark では 暗い背景 + 明るい文字 */
  --color-success-50:   rgba(48, 209, 88, 0.15);
  --color-success-100:  rgba(48, 209, 88, 0.25);
  --color-success-500:  #30D158;
  --color-success-700:  #5EE07E;   /* badge 用テキスト (黒上 8:1) */
  --color-success-text: #30D158;
  --color-error-50:     rgba(255, 69, 58, 0.15);
  --color-error-100:    rgba(255, 69, 58, 0.25);
  --color-error-500:    #FF453A;
  --color-error-700:    #FF8A82;   /* badge 用テキスト (黒上 7:1) */
  --color-error-text:   #FF6961;
  --color-warning-50:   rgba(255, 159, 10, 0.15);
  --color-warning-100:  rgba(255, 159, 10, 0.25);
  --color-warning-500:  #FF9F0A;
  --color-warning-700:  #FFC56B;   /* badge 用テキスト (黒上 10:1) */
  --color-warning-text: #FFB340;
  --color-info-50:      rgba(100, 210, 255, 0.15);
  --color-info-100:     rgba(100, 210, 255, 0.25);
  --color-info-500:     #64D2FF;
  --color-info-700:     #8FDDFF;   /* badge 用テキスト */
  --color-info-text:    #64D2FF;

  /* Purple (kintai 個人作業) */
  --color-purple-50:  rgba(191, 90, 242, 0.15);
  --color-purple-500: #BF5AF2;
  --color-purple-700: #D8A9F5;

  /* Primitive gray を dark セマンティクスに再マップ */
  --color-gray-50:  #1C1C1E;
  --color-gray-100: #2C2C2E;
  --color-gray-200: #3A3A3C;
  --color-gray-300: #48484A;
  --color-gray-420: #636366;
  --color-gray-500: #8E8E93;
  --color-gray-536: #98989D;
  --color-gray-600: #AEAEB2;
  --color-gray-700: #C7C7CC;
  --color-gray-800: #D1D1D6;
  --color-gray-900: #F2F2F7;

  /* 2026-05-17: spec 10.3 の通り Primary ボタン背景 (--color-primary) は dark でも
     #003399 維持。同じ var(--color-primary) を text color に使うとダークで読めない
     ため、後段で属性セレクタによる例外置換を行う (#80%ルールバナー等)。 */
  --color-primary-tint: rgba(110, 142, 209, 0.18);
  --color-overlay: rgba(0, 0, 0, 0.6);   /* dark では濃いめ overlay (spec 7.6) */

  /* === Elevation: spec 10.2「ダークでは影を弱める。階層は明度差で示す」 === */
  /* ライト時より薄く透過させ、surface の明度差を主体に */
  --elevation-1: 0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.16);
  --elevation-2: 0 2px 4px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.18);
  --elevation-3: 0 4px 8px rgba(0,0,0,0.28), 0 8px 16px rgba(0,0,0,0.20);
  --elevation-4: 0 8px 16px rgba(0,0,0,0.32), 0 16px 32px rgba(0,0,0,0.24);
  --shadow-card:       var(--elevation-1);
  --shadow-card-hover: var(--elevation-2);
  --shadow-modal:      var(--elevation-4);

  /* Focus ring: dark でも視認できる HIBARI brand */
  --focus-ring: 0 0 0 3px rgba(110, 142, 209, .7);
  --focus-ring-input: 0 0 0 3px rgba(110, 142, 209, .25);

  color-scheme: dark;
}

/* ==========================================================================
   Dark Mode: 半透明ヘッダー / カード / フォーム / モーダルの調整
   ハードコード rgba(255,255,255,.85) を半透明黒に置換し backdrop-blur 質感維持
   ========================================================================== */
:root.theme-dark .topbar,
:root.theme-dark .app-header,
:root.theme-dark .module-topbar,
:root.theme-system.is-system-dark .topbar,
:root.theme-system.is-system-dark .app-header,
:root.theme-system.is-system-dark .module-topbar {
  background: rgba(28, 28, 30, 0.85) !important;
  border-bottom-color: var(--color-border) !important;
  color: var(--color-text) !important;
}
:root.theme-dark .module-topbar .role-badge,
:root.theme-system.is-system-dark .module-topbar .role-badge {
  background: rgba(120, 120, 128, 0.32) !important;
  color: var(--color-text-secondary) !important;
}
/* dark 時の topbar 内リンク・ボタンは var(--color-primary) (#003399) では
   半透明黒地でコントラスト不足。content-brand 明色に切替 */
:root.theme-dark .module-topbar .home-link,
:root.theme-dark .module-topbar button,
:root.theme-system.is-system-dark .module-topbar .home-link,
:root.theme-system.is-system-dark .module-topbar button {
  color: var(--content-brand) !important;
}
:root.theme-dark .app-header,
:root.theme-system.is-system-dark .app-header {
  color: var(--color-text) !important;
}
:root.theme-dark .app-header .page-title,
:root.theme-system.is-system-dark .app-header .page-title,
:root.theme-dark .lobby-brand,
:root.theme-system.is-system-dark .lobby-brand,
:root.theme-dark .module-topbar .crumb,
:root.theme-system.is-system-dark .module-topbar .crumb {
  color: var(--color-text) !important;
}
/* /admin lobby topbar の pill-link / button も dark 時 brand 明色化 */
:root.theme-dark .lobby-topbar .pill-link,
:root.theme-dark .lobby-topbar button,
:root.theme-system.is-system-dark .lobby-topbar .pill-link,
:root.theme-system.is-system-dark .lobby-topbar button {
  color: var(--content-brand) !important;
}
:root.theme-dark .lobby-topbar,
:root.theme-system.is-system-dark .lobby-topbar {
  background: rgba(28, 28, 30, 0.85) !important;
  border-bottom-color: var(--color-border) !important;
}
/* lobby-topbar 内の avatar や badge も dark で適切な色に */
:root.theme-dark .lobby-topbar .badge,
:root.theme-system.is-system-dark .lobby-topbar .badge {
  background: rgba(255, 69, 58, 0.20);
  color: #FF6961;
}
:root.theme-dark .card,
:root.theme-system.is-system-dark .card {
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
:root.theme-dark table thead th,
:root.theme-system.is-system-dark table thead th {
  background: rgba(118, 118, 128, 0.24);
  color: var(--color-text);
}
:root.theme-dark table tbody tr:hover,
:root.theme-system.is-system-dark table tbody tr:hover {
  background: rgba(120, 120, 128, 0.18);
}
:root.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
:root.theme-dark select,
:root.theme-dark textarea,
:root.theme-system.is-system-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
:root.theme-system.is-system-dark select,
:root.theme-system.is-system-dark textarea {
  background: rgba(118, 118, 128, 0.18);
  color: var(--color-text);
  border-color: var(--color-border);
}
:root.theme-dark input::placeholder,
:root.theme-dark textarea::placeholder,
:root.theme-system.is-system-dark input::placeholder,
:root.theme-system.is-system-dark textarea::placeholder {
  color: var(--color-text-muted);
}
:root.theme-dark .modal-bg,
:root.theme-dark .modal-overlay,
:root.theme-dark .drawer-overlay,
:root.theme-system.is-system-dark .modal-bg,
:root.theme-system.is-system-dark .modal-overlay,
:root.theme-system.is-system-dark .drawer-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
}
:root.theme-dark .modal,
:root.theme-system.is-system-dark .modal {
  background: var(--color-surface);
  color: var(--color-text);
}

/* ──────────────────────────────────────────────────────────────
   Theme Switch Transition (theme.js が .theme-transitioning を ON/OFF)
   切替の jarring 防止: 320ms で color / bg / border をフェード。
   ただし transform / opacity は元の transition を保持する。
   reduced-motion 環境では transition を完全に無効化。
   ────────────────────────────────────────────────────────────── */
:root.theme-transitioning,
:root.theme-transitioning *,
:root.theme-transitioning *::before,
:root.theme-transitioning *::after {
  transition-property: background-color, background, color, border-color,
                       fill, stroke, box-shadow, outline-color !important;
  transition-duration: 280ms !important;
  transition-timing-function: var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}
@media (prefers-reduced-motion: reduce) {
  :root.theme-transitioning,
  :root.theme-transitioning *,
  :root.theme-transitioning *::before,
  :root.theme-transitioning *::after {
    transition-duration: 0ms !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   Dark Mode: inline style で color に var(--color-primary) を直接書いて
   いる要素を明色化する (#003399 は dark 地で読めないため、spec 10.3 が
   許容する text 用 brand 明色 #6E8ED1 に置換)。
   ボタンの background では使われないので bg 用途は影響を受けない。
   ────────────────────────────────────────────────────────────── */
:root.theme-dark [style*="color:var(--color-primary)"],
:root.theme-dark [style*="color: var(--color-primary)"],
:root.theme-system.is-system-dark [style*="color:var(--color-primary)"],
:root.theme-system.is-system-dark [style*="color: var(--color-primary)"] {
  color: var(--content-brand) !important;
}

/* 同様に薄色 tint 背景 (--color-blue-50 / --color-primary-tint) 上の
   濃色テキスト (--color-gray-800 等) は dark で薄色 + 明色文字に */
:root.theme-dark [style*="background:var(--color-blue-50)"],
:root.theme-dark [style*="background: var(--color-blue-50)"],
:root.theme-system.is-system-dark [style*="background:var(--color-blue-50)"],
:root.theme-system.is-system-dark [style*="background: var(--color-blue-50)"] {
  background: rgba(110, 142, 209, 0.15) !important;
  border-color: rgba(110, 142, 209, 0.35) !important;
}
:root.theme-dark [style*="background:var(--color-blue-50)"] p,
:root.theme-system.is-system-dark [style*="background:var(--color-blue-50)"] p {
  color: var(--content-primary) !important;
}

/* ──────────────────────────────────────────────────────────────
   Dark Mode: 既存 CSS 規則で color: var(--color-primary) を使う
   箇所 (.text-primary ユーティリティ / .chip.primary 等) は
   #003399 では dark 地で読めないため、content-brand 明色に振替。
   背景用途 (.bg-primary 等) は spec 10.3 通り #003399 を維持。
   ────────────────────────────────────────────────────────────── */
:root.theme-dark .text-primary,
:root.theme-system.is-system-dark .text-primary {
  color: var(--content-brand) !important;
}
:root.theme-dark .checkbox-label:hover,
:root.theme-dark .radio-label:hover,
:root.theme-system.is-system-dark .checkbox-label:hover,
:root.theme-system.is-system-dark .radio-label:hover {
  color: var(--content-brand) !important;
}
:root.theme-dark .chip.primary,
:root.theme-system.is-system-dark .chip.primary {
  background: var(--color-primary-tint);
  color: var(--content-brand);
}
:root.theme-dark .stat-tile.accent .stat-value,
:root.theme-system.is-system-dark .stat-tile.accent .stat-value {
  color: var(--content-brand);
}
/* dept-pill / pill.primary / module-switcher の選択中状態 */
:root.theme-dark .dept-pill,
:root.theme-system.is-system-dark .dept-pill,
:root.theme-dark .pill.primary,
:root.theme-system.is-system-dark .pill.primary,
:root.theme-dark .module-switcher-menu a.current,
:root.theme-system.is-system-dark .module-switcher-menu a.current {
  background: var(--color-primary-tint);
  color: var(--content-brand);
}
/* link color が --color-primary に固定されている要素を一括上書き */
:root.theme-dark a[href]:not(.btn):not(.button):not([class*="btn-"]):not(.pill-link):not(.module-card):not(.m-list-item):not(.m-tab):not(.m-header-back):not(.m-header-action):not(.nav-btn):not(.nav-pill):not(.lobby-card):not(.m-card),
:root.theme-system.is-system-dark a[href]:not(.btn):not(.button):not([class*="btn-"]):not(.pill-link):not(.module-card):not(.m-list-item):not(.m-tab):not(.m-header-back):not(.m-header-action):not(.nav-btn):not(.nav-pill):not(.lobby-card):not(.m-card) {
  color: var(--content-brand);
}

/* ──────────────────────────────────────────────────────────────
   各 app 固有の .brand-text クラスが var(--color-primary) や
   var(--apple-blue) を使う。dark で読みやすいよう content-brand に矯正。
   ────────────────────────────────────────────────────────────── */
:root.theme-dark .brand-text,
:root.theme-system.is-system-dark .brand-text {
  color: var(--content-brand) !important;
}

/* 「ご注意・補助テキスト」用 .text-3 / .text-secondary も低 contrast 対策 */
:root.theme-dark .text-3,
:root.theme-system.is-system-dark .text-3 {
  color: var(--content-secondary) !important;
}

/* tint 背景上の .mono.brand-text を強調 (経費精算 admin 総計 KPI) */
:root.theme-dark [style*="background:var(--color-blue-50)"] .brand-text,
:root.theme-system.is-system-dark [style*="background:var(--color-blue-50)"] .brand-text {
  color: var(--content-brand) !important;
}

/* warning-50 tint 背景上の文字も同様に */
:root.theme-dark [style*="background:var(--color-warning-50)"],
:root.theme-system.is-system-dark [style*="background:var(--color-warning-50)"] {
  background: rgba(255, 159, 10, 0.15) !important;
  border-color: rgba(255, 159, 10, 0.35) !important;
}
:root.theme-dark [style*="background:var(--color-success-50)"],
:root.theme-system.is-system-dark [style*="background:var(--color-success-50)"] {
  background: rgba(48, 209, 88, 0.15) !important;
  border-color: rgba(48, 209, 88, 0.35) !important;
}
:root.theme-dark [style*="background:var(--color-error-50)"],
:root.theme-system.is-system-dark [style*="background:var(--color-error-50)"] {
  background: rgba(255, 69, 58, 0.15) !important;
  border-color: rgba(255, 69, 58, 0.35) !important;
}

/* tint 背景内の小ラベル (.text-3) が読みづらいのを救う */
:root.theme-dark [style*="background:var(--color-warning-50)"] .text-3,
:root.theme-dark [style*="background:var(--color-success-50)"] .text-3,
:root.theme-dark [style*="background:var(--color-error-50)"] .text-3,
:root.theme-dark [style*="background:var(--color-blue-50)"] .text-3,
:root.theme-system.is-system-dark [style*="background:var(--color-warning-50)"] .text-3,
:root.theme-system.is-system-dark [style*="background:var(--color-success-50)"] .text-3,
:root.theme-system.is-system-dark [style*="background:var(--color-error-50)"] .text-3,
:root.theme-system.is-system-dark [style*="background:var(--color-blue-50)"] .text-3 {
  color: var(--content-secondary) !important;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 領域外横スクロール根絶: viewport 幅を超える要素を物理的に隠す */
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  /* body 自体も viewport 幅にロック (子の bug が body を広げないように) */
  overflow-x: hidden;
  max-width: 100vw;
}
/* はみ出し要因のメディア要素を viewport 幅でクランプ */
img, video, svg, iframe, embed, object, canvas, pre, code {
  max-width: 100%;
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.003em; /* Apple system font 推奨 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
b, strong { font-weight: 600; } /* Apple Semibold */
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--color-link-text); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
/* visited は記事本文・メール本文等の "情報リンク" にのみ適用したいので、
   nav/UI 系の link は明示的にこの規則を無効化する (各クラスで :visited を上書き)。
   汎用 a:visited は維持するが、major nav/list/btn には対策済 (mobile.css)。 */
a:visited { color: var(--color-link-visited); }
/* 業務系 UI で visited を不要にするための明示無効化 */
nav a:visited,
.nav-item:visited,
.nav-link:visited,
.module-card:visited,
.pill-link:visited,
.btn:visited,
.button:visited,
[class*="btn-"]:visited,
.tab:visited,
.tabs a:visited,
.dropdown-item:visited,
.breadcrumb a:visited {
  color: inherit;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  /* HIBARI Design System Section 4.6 / Section 9.2:
     border-brand を使うことで dark でも視認できる明色に自動追従。
     2px outline + 3px box-shadow (focus-ring) で WCAG 1.4.11 3:1 を担保。 */
  outline: 2px solid var(--border-brand);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* Apple HIG タイポスケール
   Large Title (34) / Title 1 (28) / Title 2 (22) / Title 3 (20)
   Headline (17 semibold) / Body (17) / Callout (16) / Subhead (15) / Footnote (13) / Caption (12)
*/
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
h1 { font-size: var(--font-size-3xl); font-weight: 700; }      /* Title 1 */
h2 { font-size: var(--font-size-xl) /* 22px → 20px */; font-weight: 600; }      /* Title 2 (semibold) */
h3 { font-size: var(--font-size-lg); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: var(--font-size-base); font-weight: 600; letter-spacing: -0.005em; }
p  { margin: 0 0 var(--space-3); line-height: 1.55; }
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--fill-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--content-primary);
}

/* === Buttons (Apple HIG: Filled / Tinted / Plain)
   参照: .claude/prompts/ui-style-guide.md === */
button {
  font-family: var(--font-system);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  padding: 12px 20px;
  min-height: var(--min-touch-target);  /* 44px - Apple HIG */
  border: none;
  background: var(--apple-fill);
  color: var(--apple-label);
  border-radius: 10px;  /* Apple HIG */
  cursor: pointer;
  transition: all var(--apple-duration) var(--apple-easing);
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
button:hover { background: var(--apple-fill-secondary); }
button:active { transform: scale(0.98); }
button:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

/* Primary = HIBARI Filled button (1画面1個推奨) */
button.primary,
.btn-primary {
  background: var(--brand-500);  /* #003399 */
  color: var(--content-on-brand);
}
button.primary:hover,
.btn-primary:hover { background: var(--brand-600); }  /* #002B85 */
button.primary:active,
.btn-primary:active { background: var(--brand-700); transform: scale(0.98); }  /* #00236D */

/* Secondary = HIBARI Tinted button */
button.secondary,
.btn-secondary {
  background: var(--surface-raised);
  color: var(--content-primary);
  border: 1px solid var(--border-default);
}
button.secondary:hover,
.btn-secondary:hover { background: var(--surface-subdued); }

/* Danger = Apple Filled red */
button.danger,
.btn-danger {
  background: var(--apple-red);
  color: #fff;
}
button.danger:hover,
.btn-danger:hover { background: #d63027; }

/* Success = Green filled */
button.success,
.btn-success {
  background: var(--apple-green);
  color: #fff;
}
button.success:hover,
.btn-success:hover { background: #28a745; }

/* Warning = Orange filled */
button.warning,
.btn-warning {
  background: var(--apple-orange);
  color: #fff;
}
button.warning:hover,
.btn-warning:hover { background: #e68a00; }

/* Tertiary = spec ghost と同等のテキストリンク的ボタン (Section 7.1)
   背景透明 + 文字 content.brand + hover brand.50 */
button.tertiary,
.btn-tertiary {
  background: transparent;
  color: var(--content-brand);
  padding: 8px 12px;
}
button.tertiary:hover,
.btn-tertiary:hover { background: var(--brand-50); }

/* Tinted (Apple HIG iOS-style) = brand-50 bg + brand text の中間バリアント。
   primary より控えめだが、secondary よりブランド存在感がある選択肢。 */
button.tinted,
.btn-tinted {
  background: var(--brand-50);
  color: var(--content-brand);
  border: none;
}
button.tinted:hover,
.btn-tinted:hover { background: var(--brand-100); }
button.tinted:active,
.btn-tinted:active { background: var(--brand-200); }

/* Destructive = spec destructive (status.danger fill + 白文字, Section 7.1) */
button.destructive,
.btn-destructive {
  background: var(--status-danger);
  color: #fff;
}
button.destructive:hover,
.btn-destructive:hover { background: var(--brand-accent-red-600); opacity: .95; }

/* Ghost = spec ghost (背景透明 + 文字 content.primary, hover surface.subdued, Section 7.1)
   ※ 過去 .btn-ghost は content.brand 文字を使っていたが、これは spec 上の tertiary に相当する。
      v1.0.0 では .btn-ghost を spec ghost に矯正し、tertiary 代替として .btn-tertiary を新設。 */
button.ghost,
.btn-ghost {
  background: transparent;
  color: var(--content-primary);
  padding: 8px 12px;
}
button.ghost:hover,
.btn-ghost:hover { background: var(--surface-subdued); }

/* Ghost variants (互換性のため残置) */
button.ghost-danger {
  background: transparent;
  color: var(--status-danger);
}
button.ghost-danger:hover { background: rgba(255, 59, 48, 0.1); }

/* Icon button (square, for toolbar) */
button.icon-btn {
  width: var(--min-touch-target);
  height: var(--min-touch-target);
  padding: 0;
  border-radius: 10px;
}
button.icon-btn.sm { width: 36px; height: 36px; }

/* Size variants (HIBARI Design System Section 7.1) */
button.small,
.btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: var(--font-size-subheadline);  /* 13px */
  min-height: 32px;
  border-radius: var(--radius-sm);  /* 6px */
}
button,
.btn-md {
  height: 44px;  /* HIBARI: 44px touch target */
  padding: 0 16px;
  font-size: var(--font-size-body);  /* 15px */
  min-height: 44px;  /* Apple HIG minimum */
  border-radius: var(--radius-md);  /* 8px */
}
button.large,
.btn-lg {
  height: 48px;
  padding: 0 20px;
  font-size: var(--font-size-headline);  /* 17px */
  min-height: 48px;
  border-radius: var(--radius-md);  /* 8px */
}

/* State */
button:disabled,
button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

/* Full width button */
button.full,
.btn-full { width: 100%; }

/* === Form (Apple HIG: rounded fields with subtle border)
   参照: .claude/prompts/ui-style-guide.md === */
input, select, textarea {
  font-family: var(--font-system);
  font-size: 16px;  /* iOS Safari zoom防止 */
  line-height: 1.4;
  padding: 12px 16px;
  border: 1px solid var(--apple-separator);
  border-radius: 10px;  /* Apple HIG */
  background: var(--color-surface);
  color: var(--apple-label);
  width: 100%;
  transition: border-color var(--apple-duration) var(--apple-easing),
              box-shadow var(--apple-duration) var(--apple-easing);
}
input:hover, select:hover, textarea:hover {
  border-color: var(--apple-gray-3);
}
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  /* outline は border 色変更 + box-shadow リングで代替 (DS Section 7.2) */
  outline: none;
  border-color: var(--border-brand);
  box-shadow: var(--focus-ring-input, 0 0 0 3px rgba(0, 51, 153, 0.15));
}
label {
  font-size: var(--font-size-sm);
  color: var(--apple-label-secondary);
  font-weight: 600;
  letter-spacing: -0.005em;
  display: block;
  margin-bottom: var(--space-1);
}
/* Input size variants */
input.input-sm, select.input-sm, textarea.input-sm {
  padding: 6px 10px;
  font-size: var(--font-size-sm);
  height: 32px;
}
input.input-lg, select.input-lg {
  padding: 14px 16px;
  font-size: var(--font-size-base);
  height: 52px;
}
/* Input states */
input.error, select.error, textarea.error {
  border-color: var(--color-error-500);
}
input.error:focus, select.error:focus, textarea.error:focus {
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.3);
}
input.success, select.success, textarea.success {
  border-color: var(--color-success-500);
}
/* Checkbox & Radio — Apple HIG style */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--border-brand);
  outline-offset: 2px;
}
/* Checkbox label inline wrapper */
.checkbox-label, .radio-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-md);
  color: var(--color-text);
  cursor: pointer;
  font-weight: 400;
}
.checkbox-label:hover, .radio-label:hover {
  color: var(--color-primary);
}
/* Form group (label + input) */
.form-group {
  margin-bottom: var(--space-4);
}
.form-group label {
  display: block;
  margin-bottom: var(--space-1);
}
.form-group .help-text,
.form-group .field-helper,
.field-helper {
  font-size: var(--font-size-caption1, var(--font-size-xs));
  color: var(--content-tertiary, var(--color-text-muted));
  margin-top: var(--space-1);
  line-height: 1.4;
}
.form-group .error-text,
.form-group .field-error,
.field-error,
.form-group .inline-error,
.inline-error {
  font-size: var(--font-size-caption1, var(--font-size-xs));
  color: var(--color-error-text);
  margin-top: var(--space-1);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
/* Field with error: input/select/textarea も赤枠化 */
.form-group.has-error input:not([type="checkbox"]):not([type="radio"]),
.form-group.has-error select,
.form-group.has-error textarea,
.has-error input:not([type="checkbox"]):not([type="radio"]),
.has-error select,
.has-error textarea {
  border-color: var(--color-error-500) !important;
}
.form-group.has-error input:focus-visible,
.form-group.has-error select:focus-visible,
.form-group.has-error textarea:focus-visible,
.has-error input:focus-visible,
.has-error select:focus-visible,
.has-error textarea:focus-visible {
  outline-color: var(--color-error-500);
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15);
}
/* Field with success */
.form-group.has-success .success-text,
.has-success .success-text,
.field-success {
  font-size: var(--font-size-caption1, var(--font-size-xs));
  color: var(--color-success-text);
  margin-top: var(--space-1);
  line-height: 1.4;
}
/* 任意 マーク (label 右に灰色で) */
.optional-mark {
  font-size: var(--font-size-caption2, var(--font-size-xs));
  color: var(--content-tertiary, var(--color-text-muted));
  margin-left: var(--space-1);
  font-weight: 400;
}
/* Inline form (horizontal layout) */
.form-inline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
/* Toggle switch (Apple HIG style) */
.toggle-switch {
  position: relative;
  width: 51px;
  height: 31px;
  background: var(--color-gray-300);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease;
  flex-shrink: 0;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: transform .2s ease;
}
.toggle-switch.active {
  background: var(--color-success-500);
}
.toggle-switch.active::after {
  transform: translateX(20px);
}
/* Search input */
.search-input {
  padding-left: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}
/* Select with custom arrow */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2364748B' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* === App shell (Apple HIG: light sidebar + clear separator) === */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-areas: "sidebar header" "sidebar main";
  height: 100vh;
}

.app-sidebar {
  grid-area: sidebar;
  background: var(--color-gray-50);
  color: var(--color-text);
  padding: var(--space-6) 0 var(--space-4);
  overflow-y: auto;
  border-right: 1px solid var(--color-divider);
}
.app-sidebar .brand {
  font-size: var(--font-size-base) /* 17px → 16px */;
  font-weight: 600;
  padding: 0 var(--space-5) var(--space-5);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.app-sidebar .nav-section {
  padding: var(--space-4) var(--space-5) var(--space-1);
  font-size: var(--font-size-xs) /* 11px → 12px */;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.app-sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 2px var(--space-3);
  padding: 8px var(--space-3);
  cursor: pointer;
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background .15s ease;
}
.app-sidebar .nav-item:hover { background: var(--color-gray-100); text-decoration: none; }
.app-sidebar .nav-item.active {
  background: var(--color-primary);
  color: var(--color-white);
}
.app-sidebar .nav-item .icon { font-size: var(--font-size-base); opacity: .92; width: 20px; text-align: center; }
.app-sidebar .nav-empty {
  padding: var(--space-3) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}
.app-sidebar .settings-link {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

.app-header {
  grid-area: header;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
}
.app-header .page-title { font-size: var(--font-size-base) /* 17px → 16px */; font-weight: 600; letter-spacing: -0.01em; }
.app-header .user-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

.app-main {
  grid-area: main;
  padding: var(--space-6);
  overflow-y: auto;
  background: var(--color-bg);
}

/* === Module topbar (iframe wrapper) — Apple HIG navbar 風 === */
.module-topbar {
  height: var(--topbar-height);
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: var(--color-text);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  gap: var(--space-3);
  font-size: var(--font-size-md);
  border-bottom: 1px solid var(--color-divider);
}
.module-topbar .home-link {
  color: var(--color-primary);
  padding: 6px var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--font-size-md);
}
.module-topbar .home-link:hover { background: var(--color-primary-tint); text-decoration: none; }
.module-topbar .crumb { color: var(--color-text); font-weight: 600; letter-spacing: -0.005em; }
.module-topbar .spacer { flex: 1; }
.module-topbar .user { color: var(--color-text-secondary); }
.module-topbar .role-badge {
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-gray-100);
  color: var(--color-text); /* WCAG AA: 12px 太字でも tinted bg 上で secondary (alpha 0.6) は 3.3:1。text full opacity に */
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.module-topbar button {
  background: transparent;
  color: var(--color-primary);
  border: none;
  padding: 6px var(--space-3);
  font-size: var(--font-size-md);
  font-weight: 500;
  border-radius: var(--radius-sm);
}
.module-topbar button:hover { background: var(--color-primary-tint); }

/* === Cards / Surfaces (HIBARI Design System Section 7.5) === */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);  /* Light Mode: 薄い境界線 */
  border-radius: var(--radius-lg);  /* 12px */
  padding: var(--space-6);  /* 24px - HIBARI DS */
  box-shadow: var(--elevation-1);
  margin-bottom: var(--space-4);
  transition: transform var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-2);
}
/* Dark Mode: borderなし、surface差で表現 (class-based + system follow) */
:root.theme-dark .card,
:root.theme-system.is-system-dark .card {
  border: none;
}
.card.danger { background: var(--color-error-50); color: var(--color-error-700); }
/* Card variants */
.card.success { background: var(--color-success-50); }
.card.warning { background: var(--color-warning-50); }
.card.info { background: var(--color-info-50); }
.card.flat { box-shadow: none; border: none; background: transparent; padding: 0; }
.card.flat:hover { transform: none; box-shadow: none; }
.card.compact { padding: var(--space-3); }
.card.no-hover:hover { transform: none; box-shadow: var(--shadow-card); }
/* Card header/body/footer structure */
.card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
  margin: calc(var(--space-5) * -1);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.card-header h2, .card-header h3 {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 600;
}
.card-body { padding: 0; }
.card-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-divider);
  margin: var(--space-4) calc(var(--space-5) * -1) calc(var(--space-5) * -1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}
/* Stat card (dashboard) */
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.stat-card .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.stat-card .stat-value {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  margin-top: var(--space-1);
}
.stat-card .stat-change {
  font-size: var(--font-size-xs);
  margin-top: var(--space-1);
}
.stat-card .stat-change.positive { color: var(--color-success-text); }
.stat-card .stat-change.negative { color: var(--color-error-text); }

/* === Empty State (HIBARI Design System Section 7.13) ===
   構成: [icon (icon-2xl, content.tertiary)] [見出し (title-3)] [説明 (body, content.secondary)] [CTA]
   メッセージは行動指向で書く: 「データがありません」ではなく「最初の顧客を登録しましょう」 */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  color: var(--content-secondary, var(--color-text-secondary));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.empty-state h2,
.empty-state .empty-title {
  color: var(--content-primary, var(--color-text));
  margin: 0;
  font-size: var(--font-size-title3, var(--font-size-xl));
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.empty-state p,
.empty-state .empty-description {
  margin: 0;
  font-size: var(--font-size-body, var(--font-size-base));
  color: var(--content-secondary, var(--color-text-secondary));
  max-width: 48ch;
  line-height: 1.55;
}
.empty-state-icon-large {
  width: 64px;
  height: 64px;
  color: var(--content-tertiary, var(--color-text-muted));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.empty-state-icon-large svg {
  width: 100%;
  height: 100%;
}

/* === Login (Apple HIG: 中央寄せ・大きい角丸・浮遊感) === */
.login-box {
  max-width: 400px;
  margin: 96px auto;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-3);
  padding: var(--space-8);
}
.login-box h1 {
  font-size: var(--font-size-xl) /* 22px → 20px */;
  margin: 0 0 var(--space-6);
  text-align: center;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.login-box .field { margin-bottom: var(--space-4); }
.login-box .field label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
  font-weight: 600;
}
.login-box .error {
  color: var(--color-error-700);
  background: var(--color-error-50);
  border: 1px solid var(--color-error-500);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  min-height: 20px;
  display: none;
}
.login-box .error:not(:empty) { display: block; }

/* === Badge / Tag (HIBARI Design System Section 7.12) === */
.badge {
  display: inline-block;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-xs);  /* 4px */
  font-size: var(--font-size-caption1);  /* 11px */
  font-weight: 500;
  letter-spacing: 0;
  line-height: 20px;
}
.badge.role-super_admin { background: var(--color-error-50); color: var(--color-error-700); }
.badge.role-admin       { background: var(--color-warning-50); color: var(--color-warning-700); }
.badge.role-accountant  { background: var(--color-info-50); color: var(--color-info-text); }
.badge.role-member      { background: var(--color-gray-100); color: var(--color-gray-700); }

/* === Tables (Apple HIG: inset grouped 風) === */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-md);
  line-height: 1.45;
}
th, td {
  text-align: left;
  padding: 12px var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
th {
  background: transparent;
  font-weight: 600;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: var(--color-gray-50); }
tbody tr:last-child td { border-bottom: none; }
/* Table variants */
table.table-striped tbody tr:nth-child(even) { background: var(--color-gray-50); }
table.table-striped tbody tr:hover { background: var(--color-gray-100); }
table.table-bordered { border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; }
table.table-bordered th, table.table-bordered td { border: 1px solid var(--color-divider); }
table.table-compact th, table.table-compact td { padding: 8px var(--space-2); font-size: var(--font-size-sm); }
/* Sticky header */
table.table-sticky thead th { position: sticky; top: 0; background: var(--color-surface); z-index: 1; }

/* === Data Table (Apple HIG)
   参照: .claude/prompts/ui-style-guide.md === */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-system);
  font-size: 14px;
}
.data-table thead th {
  background: var(--apple-background-secondary);
  color: var(--apple-label-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 12px 16px;
  text-align: left;
  border-bottom: none;
}
.data-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--apple-separator);
  vertical-align: middle;
  color: var(--apple-label);
}
.data-table tbody tr {
  cursor: pointer;
  transition: background var(--apple-duration-fast) var(--apple-easing);
}
.data-table tbody tr:hover { background: var(--fill-tertiary); }
.data-table tbody tr.selected { background: var(--brand-50); }  /* HIBARI brand tint */

/* 数値列は右寄せ・等幅 */
.data-table td.num,
.data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.data-table td.center, .data-table th.center { text-align: center; }

/* Table scroll wrapper */
.table-scroll,
.data-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* === Module grid (launcher) === */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.module-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-5);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: background .15s ease, border-color .15s ease;
}
.module-card:hover {
  background: var(--color-gray-50);
  border-color: var(--color-border-strong);
  text-decoration: none;
}
.module-card .icon-large {
  width: 36px;
  height: 36px;
  margin-bottom: var(--space-3);
  line-height: 0;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 0;
}
.module-card .icon-large svg.icon { width: 28px; height: 28px; }
.module-card .label {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.module-card .meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  letter-spacing: -0.005em;
}

/* === Tabs (Apple HIG: Segmented Control)
   参照: .claude/prompts/ui-style-guide.md === */
.tabs {
  display: inline-flex;
  gap: 0;
  padding: 2px;
  background: var(--apple-fill);
  border-radius: 10px;
  margin-bottom: var(--space-6);
  width: fit-content;
}
.tab {
  padding: 8px 16px;
  min-height: var(--min-touch-target);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--font-size-body);  /* 15px */
  font-weight: 500;
  color: var(--color-gray-700); /* WCAG AA: tinted bg (gray-200 等) 上で alpha 0.72 secondary は 4.11:1 と未達。solid #48484A は 5.5:1 以上を確保 */
  border-radius: 0;  /* HIBARI DS: 下線スタイル */
  letter-spacing: 0;
  transition: all var(--motion-fast) var(--ease-standard);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tab:hover { color: var(--content-primary); }
.tab.active {
  background: transparent;
  color: var(--content-brand);  /* #003399 */
  font-weight: 600;
  border-bottom: 2px solid var(--content-brand);
  box-shadow: none;
}

/* === Modal / Dialog (HIBARI Design System Section 7.6) === */
.modal-bg,
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);  /* Light */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: intra-fade-in var(--motion-base) var(--ease-standard);
}
:root.theme-dark .modal-bg,
:root.theme-dark .modal-overlay,
:root.theme-system.is-system-dark .modal-bg,
:root.theme-system.is-system-dark .modal-overlay {
  background: rgba(0, 0, 0, 0.6);  /* Dark: より暗く */
}
.modal {
  background: var(--surface-overlay);
  border-radius: var(--radius-xl);  /* 16px */
  padding: var(--space-6);
  width: 560px;  /* HIBARI DS md size */
  max-width: calc(100% - 32px);
  max-height: 90vh;
  max-height: 90dvh;  /* iOS Safari対応 */
  overflow-y: auto;
  box-shadow: var(--elevation-4);
  animation: intra-modal-in var(--motion-slow) var(--ease-spring);
}
/* サイズバリエーション */
.modal.modal-sm { width: 400px; }
.modal.modal-lg { width: 720px; }
.modal h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.modal-footer {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-5);
}

/* スマホ: フルスクリーンモーダル */
@media (max-width: 480px) {
  .modal {
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
    padding-top: max(24px, var(--safe-area-top));
    padding-bottom: max(24px, var(--safe-area-bottom));
    padding-left: max(16px, var(--safe-area-left));
    padding-right: max(16px, var(--safe-area-right));
  }
}

@keyframes intra-modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* === Toast (Apple HIG)
   参照: .claude/prompts/ui-style-guide.md === */
.toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--apple-label);
  color: var(--apple-background);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 2000;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  animation: toast-in 0.3s var(--apple-easing-spring);
}

/* Toast variants */
.toast.ok,
.toast.success { background: var(--apple-green); color: #fff; }
.toast.err,
.toast.error { background: var(--apple-red); color: #fff; }
.toast.warn,
.toast.warning { background: var(--apple-orange); color: #fff; }
.toast.info { background: var(--apple-blue); color: #fff; }

/* スマホ: 下部に表示 + Safe Area対応 */
@media (max-width: 480px) {
  .toast {
    top: auto;
    bottom: max(16px, calc(var(--safe-area-bottom) + 8px));
    left: max(16px, var(--safe-area-left));
    right: max(16px, var(--safe-area-right));
    transform: none;
  }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (max-width: 480px) {
  @keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* === Pills (dept / role) === */
.role-pill, .dept-pill {
  display: inline-block;
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs) /* 11px → 12px */;
  font-weight: 600;
  letter-spacing: -0.005em;
  /* 狭いセル内で 1 文字ずつ縦に折り返さないよう nowrap 強制 */
  white-space: nowrap;
  word-break: keep-all;
  writing-mode: horizontal-tb;
}
/* テーブル内ボタンも横書き保証 (狭いセルで縦書き化を防ぐ) */
table td button,
table td .btn,
table td [class*="btn-"] {
  white-space: nowrap;
  word-break: keep-all;
  writing-mode: horizontal-tb;
}
table .actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
}
table .actions button {
  white-space: nowrap;
  flex-shrink: 0;
}

.role-pill.role-super_admin { background: var(--color-error-50); color: var(--color-error-700); }
.role-pill.role-admin       { background: var(--color-warning-50); color: var(--color-warning-700); }
.role-pill.role-accountant  { background: var(--color-info-50); color: var(--color-info-text); }
.role-pill.role-member      { background: var(--color-gray-100); color: var(--color-gray-700); }
.dept-pill { background: var(--color-primary-tint); color: var(--color-primary-active); }
.dept-pill.empty {
  background: var(--color-gray-100);
  color: var(--color-text); /* WCAG AA: gray-500 (#AEAEB2) on gray-100 は 1.9:1 と AA 致命的未達。text full opacity に */
  font-style: italic;
}

/* === Utilities === */
[x-cloak] { display: none !important; }
.field-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  align-items: center;
}
.actions { display: flex; gap: var(--space-2); }

/* === Animations & micro-interactions === */
@keyframes intra-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes intra-shimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}
.fade-in { animation: intra-fade-in .25s ease-out; }
.app-main > * { animation: intra-fade-in .25s ease-out; }

/* Smooth interactive states on every clickable */
button, a, .module-card, .mail-row, .emp-card, .mail-nav-item {
  -webkit-tap-highlight-color: transparent;
}
button:not(:disabled), .module-card, a.nav-item {
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease;
}
button.primary:active:not(:disabled) { transform: translateY(1px); }

/* === Skeleton loader === */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-gray-100) 0%,
    var(--color-gray-50) 50%,
    var(--color-gray-100) 100%);
  background-size: 200% 100%;
  animation: intra-shimmer 1.4s infinite linear;
  border-radius: var(--radius-sm);
  display: inline-block;
  min-height: 1em;
}
.skeleton.block { display: block; width: 100%; height: 14px; margin: 6px 0; }
.skeleton.title { height: 20px; width: 40%; margin-bottom: 8px; }
.skeleton.card { height: 80px; margin-bottom: 12px; }

/* === Greeting banner (シンプル・業務ソフト寄り)
   AI 製品っぽいグラデーション + radial overlay は廃止。
   控えめなインセット + 大きい Title 1 文字で挨拶する。 */
.greeting-banner {
  background: transparent;
  color: var(--color-text);
  border-radius: 0;
  padding: var(--space-2) 0 var(--space-6);
  margin-bottom: var(--space-4);
  position: relative;
  overflow: visible;
  box-shadow: none;
}
.greeting-banner::after { content: none; }
.greeting-banner h1 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
}
.greeting-banner .subtitle {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  letter-spacing: -0.005em;
}

/* === Section header (Apple HIG: 大きめで semibold) === */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: var(--space-6) 0 var(--space-3);
}
.section-header h2 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
}
.section-header .section-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.section-header a, .section-header button.link {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font-weight: 700;
}
.section-header a:hover, .section-header button.link:hover {
  text-decoration: underline;
}

/* === Stat tile === */
.stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.stat-tile .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.stat-tile .stat-value {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin: var(--space-1) 0 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stat-tile .stat-meta {
  font-size: var(--font-size-xs) /* 11px → 12px */;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.stat-tile.accent .stat-value { color: var(--color-primary); }
.stat-tile.warn .stat-value { color: var(--color-warning-700); }
.stat-tile.danger .stat-value { color: var(--color-error-700); }

/* === Activity feed === */
.activity-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--font-size-sm);
}
.activity-item:last-child { border-bottom: none; }
.activity-item .activity-dot {
  width: 8px; height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.activity-item .activity-body { flex: 1; }
.activity-item .activity-meta {
  font-size: var(--font-size-xs) /* 11px → 12px */;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* === Empty state (enhanced) === */
.empty-state.compact { padding: var(--space-8) var(--space-4); }
.empty-state .empty-icon {
  font-size: 48px;
  opacity: 0.15;
  display: block;
  margin-bottom: var(--space-3);
}
.empty-state .empty-action { margin-top: var(--space-4); }

/* === Pill (compact tag) === */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: var(--font-size-xs) /* 11px → 12px */;
  font-weight: 700;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
}
.pill.primary { background: var(--color-primary-tint); color: var(--color-primary-active); }
.pill.success { background: var(--color-success-50); color: var(--color-success-700); }
.pill.warn    { background: var(--color-warning-50); color: var(--color-warning-700); }
.pill.danger  { background: var(--color-error-50);   color: var(--color-error-700); }

/* === Module switcher dropdown (topbar) === */
.module-switcher {
  position: relative;
  display: inline-block;
}
.module-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  background: var(--color-gray-100);
  color: var(--color-text);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s ease;
}
.module-switcher-trigger:hover { background: var(--color-gray-200); }
.module-switcher-trigger .caret { font-size: var(--font-size-xs) /* 10px → 12px */; opacity: .6; }
.module-switcher-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-3);
  min-width: 220px;
  padding: var(--space-1);
  z-index: 50;
  animation: intra-fade-in .15s ease;
}
.module-switcher-menu a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-sm);
}
.module-switcher-menu a:hover {
  background: var(--color-gray-50);
  text-decoration: none;
}
.module-switcher-menu a.current { background: var(--color-primary-tint); color: var(--color-primary-active); font-weight: 700; }
.module-switcher-menu hr { border: none; border-top: 1px solid var(--color-divider); margin: var(--space-1) 0; }

/* === Avatar (initials) === */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: 700;
  flex-shrink: 0;
}
.avatar.lg { width: 48px; height: 48px; font-size: var(--font-size-base); }
.avatar.sm { width: 24px; height: 24px; font-size: var(--font-size-xs) /* 10px → 12px */; }

/* === Subtle improvements to existing components === */
.card { transition: box-shadow .15s ease; }
/* .module-card .icon-large は line 503 で定義 (SVG icon 用)。
   旧 chip 風スタイル (青 tint 背景の正方形) は削除。 */

/* === Improved focus visibility === */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .nav-item:focus-visible {
  outline: 2px solid var(--border-brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* === Smooth scrollbars === */
.app-main, .mail-list, .mail-detail-pane, .mail-sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}
.app-main::-webkit-scrollbar,
.mail-list::-webkit-scrollbar,
.mail-detail-pane::-webkit-scrollbar { width: 8px; height: 8px; }
.app-main::-webkit-scrollbar-thumb,
.mail-list::-webkit-scrollbar-thumb,
.mail-detail-pane::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: 4px;
}
.app-main::-webkit-scrollbar-thumb:hover { background: var(--color-gray-420); }

/* === Sticky table header === */
.sticky-thead thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ===========================================================
   Lobby shell — トップバー1本+メインのみ (サイドバーは廃止)
   モジュール内 (module-topbar) と統一された情報階層に揃える
   =========================================================== */
.lobby-shell {
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}
.lobby-topbar {
  height: var(--topbar-height);
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: var(--color-text);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  gap: var(--space-3);
  font-size: var(--font-size-md);
  border-bottom: 1px solid var(--color-divider);
  position: sticky;
  top: 0;
  z-index: 10;
}
.lobby-topbar .lobby-brand {
  font-size: var(--font-size-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* === Brand dot (HIBARI Intra ロゴマーク)
   小さい青ドット。 lobby / sidebar / login で共通。 */
.brand-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}
.app-sidebar .brand,
.member-sidebar .brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.app-sidebar .brand .brand-dot,
.member-sidebar .brand .brand-dot { width: 8px; height: 8px; background: var(--color-primary); }
.lobby-topbar .lobby-brand .accent {
  color: var(--color-text-secondary);
  font-weight: 400;
  margin-left: 6px;
}
.lobby-topbar .spacer { flex: 1; }
.lobby-topbar .user-name { color: var(--color-text); font-weight: 500; }
.lobby-topbar .user-meta { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.lobby-topbar .pill-link {
  color: var(--color-primary);
  text-decoration: none;
  padding: 6px var(--space-3);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: 500;
}
.lobby-topbar .pill-link:hover { background: var(--color-primary-tint); text-decoration: none; }
.lobby-topbar button {
  background: transparent;
  color: var(--color-primary);
  border: none;
  padding: 6px var(--space-3);
  font-size: var(--font-size-md);
  font-weight: 500;
  border-radius: var(--radius-sm);
}
.lobby-topbar button:hover { background: var(--color-primary-tint); }
.lobby-main {
  flex: 1;
  padding: var(--space-6);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ===========================================================
   Responsive Utilities
   =========================================================== */

/* ハンバーガーメニューボタン */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.menu-toggle:hover { background: var(--color-gray-100); }
.menu-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.menu-toggle svg { width: 24px; height: 24px; }

/* サイドバー背景オーバーレイ */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 49;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sidebar-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* ===========================================================
   Responsive: Tablet (768px - 1023px)
   サイドバーをアイコンのみ表示に折りたたみ
   =========================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* App Shell */
  .app-shell {
    grid-template-columns: var(--sidebar-width-collapsed) 1fr;
  }
  .app-sidebar {
    width: var(--sidebar-width-collapsed);
    padding: var(--space-4) 0;
  }
  .app-sidebar .brand {
    padding: 0 var(--space-3);
    justify-content: center;
  }
  .app-sidebar .brand span:not(.brand-dot) { display: none; }
  .app-sidebar .nav-section { display: none; }
  .app-sidebar .nav-item {
    justify-content: center;
    padding: var(--space-3);
    margin: 2px var(--space-2);
  }
  .app-sidebar .nav-item span:not(.icon):not([class*="icon"]) { display: none; }
  .app-sidebar .settings-link { margin-top: var(--space-4); }

  /* Member Shell */
  .member-shell {
    grid-template-columns: var(--sidebar-width-collapsed) 1fr;
  }
  .member-sidebar {
    width: var(--sidebar-width-collapsed);
    padding: var(--space-4) 0;
  }
  .member-sidebar .brand {
    padding: 0 var(--space-3);
    justify-content: center;
  }
  .member-sidebar .brand span:not(.brand-dot) { display: none; }
  .member-sidebar .nav-section { display: none; }
  .member-sidebar a {
    justify-content: center;
    padding: var(--space-3);
    margin: 2px var(--space-2);
  }
  .member-sidebar a span:not(.icon):not([class*="icon"]) { display: none; }

  /* モジュールグリッド */
  .module-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ヘッダー */
  .app-header, .member-header {
    padding: 0 var(--space-4);
  }

  /* Lobby */
  .lobby-main {
    padding: var(--space-5);
  }

  /* レスポンシブ可視性 */
  .hide-tablet { display: none !important; }
  .show-tablet { display: block !important; }
  .show-tablet-flex { display: flex !important; }
}

/* ===========================================================
   Responsive: Mobile (~767px)
   サイドバーをオーバーレイドロワーに変更
   =========================================================== */
@media (max-width: 767px) {
  /* ハンバーガーメニュー表示 */
  .menu-toggle {
    display: flex;
  }

  /* App Shell */
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main";
  }
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: 280px;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--elevation-4);
  }
  .app-sidebar.open {
    transform: translateX(0);
  }

  /* Member Shell */
  .member-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main";
  }
  .member-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: 280px;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--elevation-4);
  }
  .member-sidebar.open {
    transform: translateX(0);
  }

  /* ヘッダー */
  .app-header, .member-header, .lobby-topbar {
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }
  .app-header .page-title,
  .member-header .page-title {
    font-size: var(--font-size-base) /* 15px → 16px */;
  }
  .app-header .user-info,
  .member-header .user-info {
    gap: var(--space-2);
    font-size: var(--font-size-sm);
  }

  /* メイン領域 */
  .app-main, .member-main, .lobby-main {
    padding: var(--space-4);
  }

  /* モジュールグリッド */
  .module-grid {
    grid-template-columns: 1fr;
  }

  /* グリーティングバナー */
  .greeting-banner h1 {
    font-size: var(--font-size-xl) /* 22px → 20px */;
  }

  /* セクションヘッダー */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  /* モーダル */
  .modal {
    width: calc(100vw - var(--space-6));
    max-height: 85vh;
    margin: var(--space-3);
    padding: var(--space-5);
  }
  .modal h3 {
    font-size: var(--font-size-base) /* 17px → 16px */;
  }

  /* iframe 内ページのスマホ表示: 子の独自ヘッダー要素を非表示にして親 lobby
     のトップバー (← 管理ホーム / ユーザー情報) との重複を解消する。
     html.in-iframe は core/ui/a11y.js が起動時に付与する。
     スマホでのみ重複が深刻 (画面が狭いため) なので @media (max-width: 767px) 内のみ。 */
  html.in-iframe .topbar .user,
  html.in-iframe .topbar .search,
  html.in-iframe .sidebar .foot,
  html.in-iframe .sales-topbar .user,
  html.in-iframe .lobby-topbar,
  html.in-iframe .member-header .user-info {
    display: none !important;
  }

  /* タブナビ: 折返ではなく横スクロールに統一 (タブだけは画面幅を超えやすい)
     5+ タブが折返すと縦が伸びるので、横スクロール ピル風で扱う */
  .app-tabs-inner,
  .mgmt-tabs,
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    scrollbar-width: none;
    max-width: 100%;
  }
  .app-tabs-inner::-webkit-scrollbar,
  .mgmt-tabs::-webkit-scrollbar,
  .tabs::-webkit-scrollbar { display: none; }
  .app-tabs-inner > *,
  .mgmt-tabs > *,
  .tabs > * { flex-shrink: 0; }

  /* ===========================================================
     テーブル: スマホで 1 行=1 カード形式に変換 (縦スクロールで完結)
     -----------------------------------------------------------
     旧: width: max-content で横スクロール頼り (UX 悪化)
     新: thead 非表示 + tr block 化 + td に data-label (JS で thead から自動付与)
     対象: .data-table 全て、および .data-table-mobile-card を付けたテーブル
     例外: opt-in で <table class="no-mobile-card"> なら通常表示維持
     =========================================================== */
  .data-table,
  table.responsive,
  .card .data-table,
  .card table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .data-table:not(.no-mobile-card) thead,
  table.responsive:not(.no-mobile-card) thead {
    display: none;
  }
  .data-table:not(.no-mobile-card) tbody,
  table.responsive:not(.no-mobile-card) tbody {
    display: block;
    width: 100%;
  }
  .data-table:not(.no-mobile-card) tr,
  table.responsive:not(.no-mobile-card) tr {
    display: block;
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    margin-bottom: var(--space-2);
  }
  .data-table:not(.no-mobile-card) td,
  table.responsive:not(.no-mobile-card) td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) 0 !important;
    border: none !important;
    text-align: right;
    width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .data-table:not(.no-mobile-card) td::before,
  table.responsive:not(.no-mobile-card) td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    text-align: left;
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 6em;
  }
  /* data-label が空 (チェックボックス列など) は ::before を表示しない */
  .data-table:not(.no-mobile-card) td:not([data-label])::before,
  .data-table:not(.no-mobile-card) td[data-label=""]::before {
    content: none;
  }
  /* card の inline style="overflow:hidden" は OK (table はもう block 化されている) */

  /* フォーム */
  .field-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  /* ボタン */
  button {
    padding: 12px 18px;
  }
  button.small {
    padding: 8px 14px;
  }

  /* Toast */
  .toast {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    text-align: center;
  }

  /* Lobby topbar */
  .lobby-topbar .user-name { font-size: var(--font-size-sm); }
  .lobby-topbar .user-meta { display: none; }
  .lobby-topbar .badge { font-size: var(--font-size-xs) /* 10px → 12px */; padding: 2px 6px; }

  /* ===========================================================
     iframe 内モジュール画面用 汎用モバイル規則
     (apps/*/ui/admin.html / member.html は body 直下に inline padding を
      持つことが多いので、!important で強制 override)
     =========================================================== */
  /* body 直下のページラッパー: inline padding を縮める */
  body > [x-data][style*="padding"] {
    padding: var(--space-3) !important;
  }
  /* 汎用テーブル (data-table / table) の横スクロール強制 */
  table, .data-table {
    font-size: var(--font-size-xs);
  }
  table th, table td,
  .data-table th, .data-table td {
    padding: 8px 10px !important;
    white-space: nowrap;
  }
  /* テーブル親要素は横スクロール許可 */
  .card > div[style*="overflow"],
  .table-scroll, .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* card 内余白の圧縮 (inline padding が無い場合だけ効く) */
  .card { padding: var(--space-3); }
  .card-header { padding: 10px 12px !important; }
  .card-header h2 { font-size: var(--font-size-sm) !important; }

  /* タブナビは横スクロール許可 */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex-shrink: 0;
    padding: 8px 14px !important;
    font-size: var(--font-size-sm) !important;
  }

  /* ステータスチップは折り返し */
  .status-chips, .chips {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .status-chip, .chip {
    padding: 4px 10px !important;
    font-size: var(--font-size-xs) /* 11px → 12px */ !important;
  }

  /* 入力フォーム共通 */
  input, select, textarea, .input {
    font-size: var(--font-size-base) !important; /* iOS Safari の自動ズーム防止 */
    max-width: 100%;
  }
  .input-sm {
    font-size: var(--font-size-md) !important;
    padding: 6px 8px !important;
  }

  /* btn 系をモバイルでも押しやすく */
  .btn {
    padding: 10px 14px !important;
    font-size: var(--font-size-sm) !important;
    min-height: 40px;
  }
  .btn-sm {
    padding: 6px 10px !important;
    font-size: var(--font-size-xs) !important;
    min-height: 32px;
  }

  /* モーダルカード */
  .modal-card, .modal-overlay > div {
    width: calc(100vw - var(--space-4)) !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    margin: var(--space-2) !important;
    padding: var(--space-4) !important;
    overflow-y: auto;
  }
  .modal-title { font-size: var(--font-size-base) /* 15px → 16px */ !important; }
  .modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .modal-actions .btn { width: 100%; }

  /* よく使われる inline-style flex を縦並びに */
  .responsive-stack {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* レスポンシブ可視性 */
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
  .show-mobile-flex { display: flex !important; }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .show-mobile, .show-tablet { display: none !important; }
  .show-mobile-flex, .show-tablet-flex { display: none !important; }
}

/* ===========================================================
   Utility Classes
   インラインスタイルの代替として使用可能なユーティリティ
   =========================================================== */

/* === Typography: Font Size === */
.text-xs   { font-size: var(--font-size-xs) !important; }   /* 12px */
.text-sm   { font-size: var(--font-size-sm) !important; }   /* 13px */
.text-md   { font-size: var(--font-size-md) !important; }   /* 14px */
.text-base { font-size: var(--font-size-base) !important; } /* 16px */
.text-lg   { font-size: var(--font-size-lg) !important; }   /* 18px */
.text-xl   { font-size: var(--font-size-xl) !important; }   /* 20px */
.text-2xl  { font-size: var(--font-size-2xl) !important; }  /* 24px */
.text-3xl  { font-size: var(--font-size-3xl) !important; }  /* 28px */
.text-4xl  { font-size: var(--font-size-4xl) !important; }  /* 34px */

/* === Typography: Font Weight === */
.font-normal   { font-weight: 400 !important; }
.font-medium   { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold     { font-weight: 700 !important; }

/* === Typography: Line Height === */
.leading-none    { line-height: var(--line-height-none) !important; }    /* 1 */
.leading-tight   { line-height: var(--line-height-tight) !important; }   /* 1.2 */
.leading-snug    { line-height: var(--line-height-snug) !important; }    /* 1.4 */
.leading-normal  { line-height: var(--line-height-normal) !important; }  /* 1.5 */
.leading-relaxed { line-height: var(--line-height-relaxed) !important; } /* 1.7 */

/* === Typography: Text Align === */
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

/* === Typography: Text Color === */
.text-primary   { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-muted     { color: var(--color-text-muted) !important; }
.text-success   { color: var(--color-success-text) !important; }
.text-error     { color: var(--color-error-text) !important; }
.text-warning   { color: var(--color-warning-text) !important; }
.text-info      { color: var(--color-info-text) !important; }
.text-white     { color: var(--color-white) !important; }
.text-brand     { color: var(--content-brand) !important; }
.text-on-brand  { color: var(--content-on-brand) !important; }

/* === Typography: Type Scale (HIBARI Design System Section 4.3) ===
   spec の Type Token を CSS utility class として露出。
   font-size + line-height + letter-spacing + weight を一括適用。 */
.text-large-title {
  font-size: var(--font-size-largeTitle);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}
.text-title-1 {
  font-size: var(--font-size-title1);
  line-height: 1.21;
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}
.text-title-2 {
  font-size: var(--font-size-title2);
  line-height: 1.27;
  letter-spacing: var(--tracking-snug);
  font-weight: 700;
}
.text-title-3 {
  font-size: var(--font-size-title3);
  line-height: 1.25;
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
}
.text-headline {
  font-size: var(--font-size-headline);
  line-height: 1.29;
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
}
.text-body {
  font-size: var(--font-size-body);
  line-height: 1.47;
  letter-spacing: var(--tracking-normal);
  font-weight: 400;
}
.text-callout {
  font-size: var(--font-size-callout);
  line-height: 1.5;
  font-weight: 400;
}
.text-subheadline {
  font-size: var(--font-size-subheadline);
  line-height: 1.38;
  font-weight: 500;
}
.text-footnote {
  font-size: var(--font-size-footnote);
  line-height: 1.33;
  font-weight: 400;
}
.text-caption-1 {
  font-size: var(--font-size-caption1);
  line-height: 1.27;
  font-weight: 500;
}
.text-caption-2 {
  font-size: var(--font-size-caption2);
  line-height: 1.27;
  font-weight: 400;
}
/* モバイル時に body を 17px に上げる (spec Section 4.3 注記) */
@media (max-width: 767px) {
  .text-body { font-size: var(--font-size-headline); }
}

/* === Background Color === */
.bg-primary   { background-color: var(--color-primary) !important; }
.bg-surface   { background-color: var(--color-surface) !important; }
.bg-gray      { background-color: var(--color-gray-100) !important; }
.bg-success   { background-color: var(--color-success-50) !important; }
.bg-error     { background-color: var(--color-error-50) !important; }
.bg-warning   { background-color: var(--color-warning-50) !important; }
.bg-info      { background-color: var(--color-info-50) !important; }

/* === Spacing: Padding === */
.p-0  { padding: 0 !important; }
.p-1  { padding: var(--space-1) !important; }
.p-2  { padding: var(--space-2) !important; }
.p-3  { padding: var(--space-3) !important; }
.p-4  { padding: var(--space-4) !important; }
.p-5  { padding: var(--space-5) !important; }
.p-6  { padding: var(--space-6) !important; }
.p-8  { padding: var(--space-8) !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }

/* === Spacing: Margin === */
.m-0  { margin: 0 !important; }
.m-1  { margin: var(--space-1) !important; }
.m-2  { margin: var(--space-2) !important; }
.m-3  { margin: var(--space-3) !important; }
.m-4  { margin: var(--space-4) !important; }
.m-auto { margin: auto !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-0    { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-2    { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-4    { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-6 { margin-top: var(--space-6) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }

/* === Spacing: Gap (for flex/grid) === */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-6 { gap: var(--space-6) !important; }

/* === Border Radius === */
.rounded-none { border-radius: 0 !important; }
.rounded-sm   { border-radius: var(--radius-sm) !important; }
.rounded-md   { border-radius: var(--radius-md) !important; }
.rounded-lg   { border-radius: var(--radius-lg) !important; }
.rounded-xl   { border-radius: var(--radius-xl) !important; }
.rounded-pill { border-radius: var(--radius-pill) !important; }
.rounded-full { border-radius: 50% !important; }

/* === Display ===
 * !!! 重要 !!! 表示系ユーティリティに !important を付けないこと。
 * 理由: !important を付けると Alpine.js の `x-show` が設定する inline `display: none`
 *      を打ち消してしまい、全モーダル/ドロップダウン/トーストが常時表示状態になる
 *      不具合が発生する (調整額モーダル誤表示。2026-05-15 に 2 回再発)。
 *
 * このルールは下記で検出される:
 *   - scripts/lint-style-hardcode.js (CI 失敗)
 *   - docs/adr/0002-design-tokens-consolidation.md
 *
 * .hidden だけは「強制的に隠す」明確な意図のため !important を残す。
 * .block / .inline-block / .inline / .flex / .inline-flex / .grid は **絶対に
 * !important を付けない**。付け直しの PR は revert すること。
 */
.hidden       { display: none !important; }
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }

/* === Flexbox === */
.flex-row     { flex-direction: row !important; }
.flex-col     { flex-direction: column !important; }
.flex-wrap    { flex-wrap: wrap !important; }
.flex-nowrap  { flex-wrap: nowrap !important; }
.flex-1       { flex: 1 1 0% !important; }
.flex-auto    { flex: 1 1 auto !important; }
.flex-none    { flex: none !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

.items-start   { align-items: flex-start !important; }
.items-center  { align-items: center !important; }
.items-end     { align-items: flex-end !important; }
.items-stretch { align-items: stretch !important; }
.items-baseline { align-items: baseline !important; }

.justify-start   { justify-content: flex-start !important; }
.justify-center  { justify-content: center !important; }
.justify-end     { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around  { justify-content: space-around !important; }

/* === Width & Height === */
.w-full   { width: 100% !important; }
.w-auto   { width: auto !important; }
.h-full   { height: 100% !important; }
.h-auto   { height: auto !important; }
.min-h-0  { min-height: 0 !important; }
.max-w-sm { max-width: 480px !important; }
.max-w-md { max-width: 640px !important; }
.max-w-lg { max-width: 800px !important; }
.max-w-xl { max-width: 1024px !important; }

/* === Position === */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed    { position: fixed !important; }
.sticky   { position: sticky !important; }

/* === Overflow === */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto   { overflow: auto !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }

/* === Cursor === */
.cursor-pointer  { cursor: pointer !important; }
.cursor-default  { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* === Opacity === */
.opacity-0   { opacity: 0 !important; }
.opacity-50  { opacity: 0.5 !important; }
.opacity-75  { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* === Truncate (text overflow) === */
.truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.whitespace-nowrap { white-space: nowrap !important; }
.whitespace-pre-wrap { white-space: pre-wrap !important; }

/* === Transition === */
.transition {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
.transition-fast { transition-duration: 100ms !important; }
.transition-slow { transition-duration: 300ms !important; }

/* === Shadow === */
.shadow-none { box-shadow: none !important; }
.shadow-sm   { box-shadow: var(--elevation-1) !important; }
.shadow      { box-shadow: var(--elevation-2) !important; }
.shadow-md   { box-shadow: var(--elevation-3) !important; }
.shadow-lg   { box-shadow: var(--elevation-4) !important; }

/* === Border === */
.border      { border: 1px solid var(--color-border) !important; }
.border-0    { border: none !important; }
.border-t    { border-top: 1px solid var(--color-border) !important; }
.border-b    { border-bottom: 1px solid var(--color-border) !important; }
.border-l    { border-left: 1px solid var(--color-border) !important; }
.border-r    { border-right: 1px solid var(--color-border) !important; }

/* === Tabular Numbers (for data display) === */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* === Selection === */
.select-none { user-select: none !important; }
.select-all  { user-select: all !important; }

/* ===========================================================
   Non-integer Font Size Override
   11.5px, 12.5px 等の非整数値を整数に底上げ
   =========================================================== */
[style*="font-size:var(--font-size-xs)"],
[style*="font-size: var(--font-size-xs)"] { font-size: var(--font-size-xs) !important; }

[style*="font-size:var(--font-size-xs)"],
[style*="font-size: var(--font-size-xs)"] { font-size: var(--font-size-sm) !important; }

[style*="font-size:var(--font-size-xs) /* 10.5px → 12px */"],
[style*="font-size: var(--font-size-xs) /* 10.5px → 12px */"] { font-size: var(--font-size-xs) !important; }

[style*="font-size:var(--font-size-sm)"],
[style*="font-size: var(--font-size-sm)"] { font-size: var(--font-size-md) !important; }

/* 9px, 10px, 11px は WCAG 推奨の 12px 以上に底上げ */
[style*="font-size:var(--font-size-xs) /* 9px → 12px */"],
[style*="font-size: var(--font-size-xs) /* 9px → 12px */"],
[style*="font-size:var(--font-size-xs) /* 10px → 12px */"],
[style*="font-size: var(--font-size-xs) /* 10px → 12px */"],
[style*="font-size:var(--font-size-xs) /* 11px → 12px */"],
[style*="font-size: var(--font-size-xs) /* 11px → 12px */"] { font-size: var(--font-size-xs) !important; }

/* ===========================================================
   Additional Components
   =========================================================== */

/* === Breadcrumb === */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.breadcrumb a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color .15s ease;
}
.breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.breadcrumb .separator {
  color: var(--color-gray-300);
  margin: 0 var(--space-1);
}
.breadcrumb .current {
  color: var(--color-text);
  font-weight: 500;
}

/* === Alert / Notification Bar === */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.alert .alert-icon { flex-shrink: 0; font-size: var(--font-size-lg); }
.alert .alert-content { flex: 1; }
.alert .alert-title { font-weight: 600; margin-bottom: 2px; }
.alert .alert-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  font-size: var(--font-size-lg);
  cursor: pointer;
  opacity: .6;
  padding: 0;
  line-height: 1;
}
.alert .alert-close:hover { opacity: 1; }

.alert.alert-info {
  background: var(--color-info-50);
  color: var(--color-info-text);
  border: 1px solid var(--color-info-500);
}
.alert.alert-success {
  background: var(--color-success-50);
  color: var(--color-success-text);
  border: 1px solid var(--color-success-500);
}
.alert.alert-warning {
  background: var(--color-warning-50);
  color: var(--color-warning-text);
  border: 1px solid var(--color-warning-500);
}
.alert.alert-error {
  background: var(--color-error-50);
  color: var(--color-error-text);
  border: 1px solid var(--color-error-500);
}

/* === Progress Bar === */
.progress {
  width: 100%;
  height: 8px;
  background: var(--color-gray-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress .progress-bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: width .3s ease;
}
.progress .progress-bar.success { background: var(--color-success-500); }
.progress .progress-bar.warning { background: var(--color-warning-500); }
.progress .progress-bar.error { background: var(--color-error-500); }

.progress.lg { height: 12px; }
.progress.sm { height: 4px; }

/* === Dropdown Menu === */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-trigger {
  cursor: pointer;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-3);
  padding: var(--space-1);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.dropdown.open .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu.right { left: auto; right: 0; }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: background .1s ease;
}
.dropdown-item:hover {
  background: var(--color-gray-50);
  text-decoration: none;
}
.dropdown-item.active {
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-weight: 600;
}
.dropdown-item.danger { color: var(--color-error-text); }
.dropdown-item.danger:hover { background: var(--color-error-50); }
.dropdown-divider {
  height: 1px;
  background: var(--color-divider);
  margin: var(--space-1) 0;
}
.dropdown-header {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* === Stepper / Steps === */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
}
.stepper-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.stepper-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 700;
  flex-shrink: 0;
}
.stepper-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.stepper-step.active .stepper-number {
  background: var(--color-primary);
  color: var(--color-white);
}
.stepper-step.active .stepper-label {
  color: var(--color-text);
  font-weight: 600;
}
.stepper-step.completed .stepper-number {
  background: var(--color-success-500);
  color: var(--color-white);
}
.stepper-step.completed .stepper-label {
  color: var(--color-success-text);
}
.stepper-line {
  flex: 1;
  height: 2px;
  background: var(--color-gray-200);
  margin: 0 var(--space-3);
  min-width: 40px;
}
.stepper-line.completed { background: var(--color-success-500); }

/* === Tooltip (CSS only, for simple cases) === */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-2);
  background: var(--color-gray-900);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility .15s ease;
  z-index: 60;
  pointer-events: none;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
  opacity: 1;
  visibility: visible;
}
[data-tooltip-position="bottom"]::after {
  top: calc(100% + 6px);
  bottom: auto;
}
[data-tooltip-position="left"]::after {
  right: calc(100% + 6px);
  left: auto;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}
[data-tooltip-position="right"]::after {
  left: calc(100% + 6px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

/* === Divider with text === */
.divider-text {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-divider);
}
.divider-text span {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* === KPI / Metric Card === */
.metric-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.metric-card .metric-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.metric-card .metric-icon.success { background: var(--color-success-50); color: var(--color-success-700); }
.metric-card .metric-icon.warning { background: var(--color-warning-50); color: var(--color-warning-700); }
.metric-card .metric-icon.error { background: var(--color-error-50); color: var(--color-error-700); }
.metric-card .metric-body { flex: 1; min-width: 0; }
.metric-card .metric-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.metric-card .metric-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.metric-card .metric-change {
  font-size: var(--font-size-xs);
  margin-top: var(--space-1);
}
.metric-card .metric-change.up { color: var(--color-success-text); }
.metric-card .metric-change.down { color: var(--color-error-text); }

/* === List Group === */
.list-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.list-group-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--font-size-md);
  color: var(--color-text);
  text-decoration: none;
  transition: background .1s ease;
}
.list-group-item:last-child { border-bottom: none; }
.list-group-item:hover { background: var(--color-gray-50); text-decoration: none; }
.list-group-item.active {
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-weight: 500;
}

/* === Description List (key-value pairs) === */
.dl-grid {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: var(--font-size-md);
}
.dl-grid dt {
  color: var(--color-text-muted);
  font-weight: 500;
}
.dl-grid dd {
  color: var(--color-text);
  margin: 0;
}

/* === Chip / Tag (inline labels) === */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: var(--radius-pill);
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
}
.chip.primary { background: var(--color-primary-tint); color: var(--color-primary); }
.chip.success { background: var(--color-success-50); color: var(--color-success-700); }
.chip.warning { background: var(--color-warning-50); color: var(--color-warning-700); }
.chip.error { background: var(--color-error-50); color: var(--color-error-700); }
.chip .chip-close {
  margin-left: 2px;
  cursor: pointer;
  opacity: .6;
  transition: opacity .1s ease;
}
.chip .chip-close:hover { opacity: 1; }

/* === Confirmation Dialog overlay === */
.confirm-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.confirm-dialog .dialog-box {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  max-width: 400px;
  width: calc(100vw - var(--space-8));
  box-shadow: var(--elevation-4);
  text-align: center;
}
.confirm-dialog .dialog-icon {
  font-size: 48px;
  margin-bottom: var(--space-3);
}
.confirm-dialog .dialog-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.confirm-dialog .dialog-message {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}
.confirm-dialog .dialog-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}
.confirm-dialog.danger .dialog-icon { color: var(--color-error-text); }
.confirm-dialog.warning .dialog-icon { color: var(--color-warning-text); }

/* === Loading Spinner (standalone) === */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.spinner.sm { width: 14px; height: 14px; border-width: 1.5px; }
.spinner.lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; opacity: .6; }
}

/* === Search Results (autocomplete style) === */
.search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-3);
  max-height: 300px;
  overflow-y: auto;
  z-index: 50;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background .1s ease;
}
.search-result-item:hover,
.search-result-item.highlighted {
  background: var(--color-gray-50);
}
.search-result-item .result-title { font-weight: 500; }
.search-result-item .result-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.search-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* === Inline Editable === */
.editable {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  transition: background .1s ease;
  cursor: text;
}
.editable:hover {
  background: var(--color-gray-50);
}
.editable .edit-icon {
  opacity: 0;
  transition: opacity .1s ease;
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}
.editable:hover .edit-icon { opacity: 1; }

/* === File Upload Drop Zone === */
.drop-zone {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
  cursor: pointer;
}
.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
}
.drop-zone .drop-icon {
  font-size: 48px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.drop-zone .drop-text {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}
.drop-zone .drop-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* ===========================================================
   Responsive Utility Classes
   ===========================================================
   Apple Human Interface Guidelines (HIG) 準拠
   参照: https://developer.apple.com/design/human-interface-guidelines/

   ブレークポイント (既存コードとの互換性を維持):
     sm: ~767px   (モバイル / iPhone)
     md: 768px+   (タブレット以上 / iPad)
     lg: 1024px+  (デスクトップ / Mac)

   ※ Apple HIG 公式値 (735px / 1069px) とは若干異なるが、
     既存の Responsive セクション (line 1331-1687) との一貫性を優先。

   命名規則: {breakpoint}:{utility}
   例: md:flex-row, lg:grid-cols-3, sm:hidden

   注意: display 系に !important を付けると Alpine.js の x-show と衝突するため
         hidden 以外の display は !important なし (既存ルール参照: line 1812-1825)
   =========================================================== */

/* ---------------------------------------------------------
   CSS Custom Properties: Breakpoints, Viewport & Touch
   ---------------------------------------------------------
   モバイルブラウザ対応:
     - iOS Safari: アドレスバー動的変化、ノッチ、ホームインジケーター
     - Android Chrome: アドレスバー、ナビゲーションバー
   --------------------------------------------------------- */
:root {
  /* Breakpoints (参照用 - @media では直接数値を使用) */
  --breakpoint-sm: 767px;   /* max-width: モバイル */
  --breakpoint-md: 768px;   /* min-width: タブレット+ */
  --breakpoint-lg: 1024px;  /* min-width: デスクトップ */

  /* Viewport Height (モバイルブラウザのアドレスバー問題対策)
     - lvh: Large Viewport Height (アドレスバー非表示時)
     - svh: Small Viewport Height (アドレスバー表示時)
     - dvh: Dynamic Viewport Height (動的に追従) ← 推奨
     参照: https://web.dev/viewport-units/ */
  --vh-fallback: 1vh;                          /* フォールバック */
  --vh-dynamic: 1dvh;                          /* 動的 (Safari 15.4+, Chrome 108+) */
  --vh-small: 1svh;                            /* 最小 (アドレスバー表示時) */
  --vh-large: 1lvh;                            /* 最大 (アドレスバー非表示時) */

  /* Apple HIG: Touch Targets (タップ領域の最小サイズ)
     iOS: 44x44pt 推奨, Android: 48x48dp
     参照: https://developer.apple.com/design/human-interface-guidelines/accessibility */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;

  /* Safe Area (ノッチ/ホームインジケーター対応)
     iOS Safari で viewport-fit=cover 時に有効
     <meta name="viewport" content="..., viewport-fit=cover"> が必要 */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}

/* ---------------------------------------------------------
   Responsive: Mobile (sm: ~767px)
   --------------------------------------------------------- */
@media (max-width: 767px) {
  /* Display */
  .sm\:hidden { display: none !important; }
  .sm\:block { display: block; }
  .sm\:flex { display: flex; }
  .sm\:inline { display: inline; }
  .sm\:inline-block { display: inline-block; }
  .sm\:inline-flex { display: inline-flex; }
  .sm\:grid { display: grid; }

  /* Flex Direction */
  .sm\:flex-col { flex-direction: column !important; }
  .sm\:flex-row { flex-direction: row !important; }

  /* Flex Wrap */
  .sm\:flex-wrap { flex-wrap: wrap !important; }
  .sm\:flex-nowrap { flex-wrap: nowrap !important; }

  /* Align Items */
  .sm\:items-start { align-items: flex-start !important; }
  .sm\:items-center { align-items: center !important; }
  .sm\:items-end { align-items: flex-end !important; }
  .sm\:items-stretch { align-items: stretch !important; }

  /* Justify Content */
  .sm\:justify-start { justify-content: flex-start !important; }
  .sm\:justify-center { justify-content: center !important; }
  .sm\:justify-end { justify-content: flex-end !important; }
  .sm\:justify-between { justify-content: space-between !important; }

  /* Grid Columns */
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Gap */
  .sm\:gap-0 { gap: 0 !important; }
  .sm\:gap-1 { gap: var(--space-1) !important; }
  .sm\:gap-2 { gap: var(--space-2) !important; }
  .sm\:gap-3 { gap: var(--space-3) !important; }
  .sm\:gap-4 { gap: var(--space-4) !important; }

  /* Width */
  .sm\:w-full { width: 100% !important; }
  .sm\:w-auto { width: auto !important; }

  /* Text Align */
  .sm\:text-left { text-align: left !important; }
  .sm\:text-center { text-align: center !important; }
  .sm\:text-right { text-align: right !important; }

  /* Text Size */
  .sm\:text-xs { font-size: var(--font-size-xs) !important; }
  .sm\:text-sm { font-size: var(--font-size-sm) !important; }
  .sm\:text-base { font-size: var(--font-size-base) !important; }

  /* Padding */
  .sm\:p-0 { padding: 0 !important; }
  .sm\:p-2 { padding: var(--space-2) !important; }
  .sm\:p-3 { padding: var(--space-3) !important; }
  .sm\:p-4 { padding: var(--space-4) !important; }
  .sm\:px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
  .sm\:px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
  .sm\:px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .sm\:py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
  .sm\:py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
  .sm\:py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }

  /* Margin */
  .sm\:m-0 { margin: 0 !important; }
  .sm\:mx-auto { margin-left: auto !important; margin-right: auto !important; }
  .sm\:mt-2 { margin-top: var(--space-2) !important; }
  .sm\:mt-4 { margin-top: var(--space-4) !important; }
  .sm\:mb-2 { margin-bottom: var(--space-2) !important; }
  .sm\:mb-4 { margin-bottom: var(--space-4) !important; }

  /* Order (for reordering flex/grid items) */
  .sm\:order-first { order: -1 !important; }
  .sm\:order-last { order: 999 !important; }
  .sm\:order-1 { order: 1 !important; }
  .sm\:order-2 { order: 2 !important; }
}

/* ---------------------------------------------------------
   Responsive: Tablet+ (md: 768px+)
   --------------------------------------------------------- */
@media (min-width: 768px) {
  /* Display */
  .md\:hidden { display: none !important; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:inline { display: inline; }
  .md\:inline-block { display: inline-block; }
  .md\:inline-flex { display: inline-flex; }
  .md\:grid { display: grid; }

  /* Flex Direction */
  .md\:flex-col { flex-direction: column !important; }
  .md\:flex-row { flex-direction: row !important; }

  /* Flex Wrap */
  .md\:flex-wrap { flex-wrap: wrap !important; }
  .md\:flex-nowrap { flex-wrap: nowrap !important; }

  /* Align Items */
  .md\:items-start { align-items: flex-start !important; }
  .md\:items-center { align-items: center !important; }
  .md\:items-end { align-items: flex-end !important; }
  .md\:items-stretch { align-items: stretch !important; }

  /* Justify Content */
  .md\:justify-start { justify-content: flex-start !important; }
  .md\:justify-center { justify-content: center !important; }
  .md\:justify-end { justify-content: flex-end !important; }
  .md\:justify-between { justify-content: space-between !important; }

  /* Grid Columns */
  .md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

  /* Gap */
  .md\:gap-0 { gap: 0 !important; }
  .md\:gap-2 { gap: var(--space-2) !important; }
  .md\:gap-3 { gap: var(--space-3) !important; }
  .md\:gap-4 { gap: var(--space-4) !important; }
  .md\:gap-6 { gap: var(--space-6) !important; }

  /* Width */
  .md\:w-full { width: 100% !important; }
  .md\:w-auto { width: auto !important; }
  .md\:w-1\/2 { width: 50% !important; }
  .md\:w-1\/3 { width: 33.333333% !important; }
  .md\:w-2\/3 { width: 66.666667% !important; }

  /* Text Align */
  .md\:text-left { text-align: left !important; }
  .md\:text-center { text-align: center !important; }
  .md\:text-right { text-align: right !important; }

  /* Text Size */
  .md\:text-sm { font-size: var(--font-size-sm) !important; }
  .md\:text-base { font-size: var(--font-size-base) !important; }
  .md\:text-lg { font-size: var(--font-size-lg) !important; }

  /* Padding */
  .md\:p-0 { padding: 0 !important; }
  .md\:p-4 { padding: var(--space-4) !important; }
  .md\:p-5 { padding: var(--space-5) !important; }
  .md\:p-6 { padding: var(--space-6) !important; }
  .md\:px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .md\:px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .md\:py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .md\:py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }

  /* Margin */
  .md\:m-0 { margin: 0 !important; }
  .md\:mx-auto { margin-left: auto !important; margin-right: auto !important; }
  .md\:mt-0 { margin-top: 0 !important; }
  .md\:mt-4 { margin-top: var(--space-4) !important; }
  .md\:mb-0 { margin-bottom: 0 !important; }
  .md\:mb-4 { margin-bottom: var(--space-4) !important; }

  /* Order */
  .md\:order-first { order: -1 !important; }
  .md\:order-last { order: 999 !important; }
  .md\:order-1 { order: 1 !important; }
  .md\:order-2 { order: 2 !important; }
}

/* ---------------------------------------------------------
   Responsive: Desktop (lg: 1024px+)
   --------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Display */
  .lg\:hidden { display: none !important; }
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:inline { display: inline; }
  .lg\:inline-block { display: inline-block; }
  .lg\:inline-flex { display: inline-flex; }
  .lg\:grid { display: grid; }

  /* Flex Direction */
  .lg\:flex-col { flex-direction: column !important; }
  .lg\:flex-row { flex-direction: row !important; }

  /* Flex Wrap */
  .lg\:flex-wrap { flex-wrap: wrap !important; }
  .lg\:flex-nowrap { flex-wrap: nowrap !important; }

  /* Align Items */
  .lg\:items-start { align-items: flex-start !important; }
  .lg\:items-center { align-items: center !important; }
  .lg\:items-end { align-items: flex-end !important; }
  .lg\:items-stretch { align-items: stretch !important; }

  /* Justify Content */
  .lg\:justify-start { justify-content: flex-start !important; }
  .lg\:justify-center { justify-content: center !important; }
  .lg\:justify-end { justify-content: flex-end !important; }
  .lg\:justify-between { justify-content: space-between !important; }

  /* Grid Columns */
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr) !important; }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, 1fr) !important; }

  /* Gap */
  .lg\:gap-0 { gap: 0 !important; }
  .lg\:gap-4 { gap: var(--space-4) !important; }
  .lg\:gap-6 { gap: var(--space-6) !important; }
  .lg\:gap-8 { gap: var(--space-8) !important; }

  /* Width */
  .lg\:w-full { width: 100% !important; }
  .lg\:w-auto { width: auto !important; }
  .lg\:w-1\/2 { width: 50% !important; }
  .lg\:w-1\/3 { width: 33.333333% !important; }
  .lg\:w-1\/4 { width: 25% !important; }
  .lg\:w-2\/3 { width: 66.666667% !important; }
  .lg\:w-3\/4 { width: 75% !important; }

  /* Max Width */
  .lg\:max-w-none { max-width: none !important; }
  .lg\:max-w-lg { max-width: 800px !important; }
  .lg\:max-w-xl { max-width: 1024px !important; }
  .lg\:max-w-2xl { max-width: 1280px !important; }

  /* Text Align */
  .lg\:text-left { text-align: left !important; }
  .lg\:text-center { text-align: center !important; }
  .lg\:text-right { text-align: right !important; }

  /* Text Size */
  .lg\:text-base { font-size: var(--font-size-base) !important; }
  .lg\:text-lg { font-size: var(--font-size-lg) !important; }
  .lg\:text-xl { font-size: var(--font-size-xl) !important; }

  /* Padding */
  .lg\:p-0 { padding: 0 !important; }
  .lg\:p-6 { padding: var(--space-6) !important; }
  .lg\:p-8 { padding: var(--space-8) !important; }
  .lg\:px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .lg\:px-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
  .lg\:py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
  .lg\:py-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }

  /* Margin */
  .lg\:m-0 { margin: 0 !important; }
  .lg\:mx-auto { margin-left: auto !important; margin-right: auto !important; }
  .lg\:mt-0 { margin-top: 0 !important; }
  .lg\:mt-6 { margin-top: var(--space-6) !important; }
  .lg\:mb-0 { margin-bottom: 0 !important; }
  .lg\:mb-6 { margin-bottom: var(--space-6) !important; }

  /* Order */
  .lg\:order-first { order: -1 !important; }
  .lg\:order-last { order: 999 !important; }
  .lg\:order-1 { order: 1 !important; }
  .lg\:order-2 { order: 2 !important; }
}

/* ---------------------------------------------------------
   Responsive Container
   ---------------------------------------------------------
   .container-responsive: 画面幅に応じて最大幅とパディングを調整
   --------------------------------------------------------- */
.container-responsive {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
@media (min-width: 768px) {
  .container-responsive {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}
@media (min-width: 1024px) {
  .container-responsive {
    max-width: 1200px;
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}
@media (min-width: 1280px) {
  .container-responsive {
    max-width: 1400px;
  }
}

/* ---------------------------------------------------------
   Responsive Stack (flex column on mobile, row on desktop)
   --------------------------------------------------------- */
.responsive-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .responsive-row {
    flex-direction: row;
    align-items: center;
  }
}

/* .responsive-row-reverse: モバイルでは縦並び、タブレット以上で横並び（逆順） */
.responsive-row-reverse {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .responsive-row-reverse {
    flex-direction: row-reverse;
    align-items: center;
  }
}

/* ---------------------------------------------------------
   Responsive Grid (auto-fit columns)
   ---------------------------------------------------------
   .grid-auto-fit: 自動的に列数を調整するレスポンシブグリッド
   --grid-min-width で最小列幅を指定 (デフォルト: 280px)
   --------------------------------------------------------- */
.grid-auto-fit {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-width, 280px), 1fr));
}
.grid-auto-fit.gap-2 { gap: var(--space-2); }
.grid-auto-fit.gap-6 { gap: var(--space-6); }

/* ---------------------------------------------------------
   Aspect Ratio (responsive image/video containers)
   --------------------------------------------------------- */
.aspect-video {
  aspect-ratio: 16 / 9;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-4-3 {
  aspect-ratio: 4 / 3;
}

/* ---------------------------------------------------------
   Responsive Typography Helpers
   --------------------------------------------------------- */
/* .text-responsive: 画面サイズに応じてフォントサイズを自動調整 */
.text-responsive-sm {
  font-size: var(--font-size-xs);
}
@media (min-width: 768px) {
  .text-responsive-sm {
    font-size: var(--font-size-sm);
  }
}

.text-responsive-base {
  font-size: var(--font-size-sm);
}
@media (min-width: 768px) {
  .text-responsive-base {
    font-size: var(--font-size-base);
  }
}

.text-responsive-lg {
  font-size: var(--font-size-base);
}
@media (min-width: 768px) {
  .text-responsive-lg {
    font-size: var(--font-size-lg);
  }
}
@media (min-width: 1024px) {
  .text-responsive-lg {
    font-size: var(--font-size-xl);
  }
}

/* .heading-responsive: レスポンシブ見出しサイズ */
.heading-responsive {
  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: var(--line-height-tight);
}
@media (min-width: 768px) {
  .heading-responsive {
    font-size: var(--font-size-2xl);
  }
}
@media (min-width: 1024px) {
  .heading-responsive {
    font-size: var(--font-size-3xl);
  }
}

/* ---------------------------------------------------------
   Apple HIG: Touch Target Utilities
   ---------------------------------------------------------
   タップ可能な要素の最小サイズを保証
   iOS HIG: 44x44pt, Material Design: 48x48dp
   --------------------------------------------------------- */
.touch-target {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}
.touch-target-comfortable {
  min-width: var(--touch-target-comfortable);
  min-height: var(--touch-target-comfortable);
}

/* タップ領域を視覚的サイズより広げる (アイコンボタン等に有効) */
.touch-target-expand {
  position: relative;
}
.touch-target-expand::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  min-width: 100%;
  min-height: 100%;
}

/* ---------------------------------------------------------
   Apple HIG: Safe Area Utilities
   ---------------------------------------------------------
   ノッチ付きデバイス (iPhone X+) のセーフエリア対応
   --------------------------------------------------------- */
.safe-area-top {
  padding-top: var(--safe-area-top);
}
.safe-area-bottom {
  padding-bottom: var(--safe-area-bottom);
}
.safe-area-left {
  padding-left: var(--safe-area-left);
}
.safe-area-right {
  padding-right: var(--safe-area-right);
}
.safe-area-x {
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}
.safe-area-y {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
}
.safe-area-all {
  padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left);
}

/* ---------------------------------------------------------
   Apple HIG: Vibrancy / Blur Utilities
   ---------------------------------------------------------
   iOS/macOS スタイルの半透明背景
   --------------------------------------------------------- */
.backdrop-blur {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.backdrop-blur-sm {
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
}
.backdrop-blur-lg {
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  backdrop-filter: blur(40px) saturate(200%);
}

/* Vibrancy 背景 (システムバー風) */
.bg-vibrancy {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
:root.theme-dark .bg-vibrancy,
:root.theme-system.is-system-dark .bg-vibrancy {
  background: rgba(30, 30, 30, 0.72);
}

/* ---------------------------------------------------------
   Reduced Motion Support (Apple HIG: Accessibility)
   ---------------------------------------------------------
   モーション削減設定時のアニメーション無効化
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .transition,
  .transition-fast,
  .transition-slow {
    transition: none !important;
  }

  /* スクロール動作もインスタントに */
  html {
    scroll-behavior: auto !important;
  }
}

/* ===========================================================
   Mobile Browser Compatibility (iOS Safari / Android Chrome)
   ===========================================================
   スマホ版の Safari / Chrome での表示問題に対応
   =========================================================== */

/* ---------------------------------------------------------
   Viewport Height Fix (100vh 問題)
   ---------------------------------------------------------
   iOS Safari: アドレスバーの表示/非表示で高さが変動
   解決策: dvh (Dynamic Viewport Height) を使用し、vhにフォールバック
   --------------------------------------------------------- */

/* 全画面高さ (動的 - アドレスバーに追従) */
.h-screen-dynamic {
  height: 100vh;               /* フォールバック */
  height: 100dvh;              /* Safari 15.4+, Chrome 108+ */
}
.min-h-screen-dynamic {
  min-height: 100vh;
  min-height: 100dvh;
}
.max-h-screen-dynamic {
  max-height: 100vh;
  max-height: 100dvh;
}

/* 全画面高さ (最小 - アドレスバー表示時のサイズ) */
.h-screen-safe {
  height: 100vh;
  height: 100svh;              /* Small Viewport Height */
}
.min-h-screen-safe {
  min-height: 100vh;
  min-height: 100svh;
}

/* 全画面高さ (最大 - アドレスバー非表示時のサイズ) */
.h-screen-large {
  height: 100vh;
  height: 100lvh;              /* Large Viewport Height */
}

/* ---------------------------------------------------------
   iOS Safari: Input Zoom Prevention
   ---------------------------------------------------------
   iOS Safari はフォントサイズ16px未満のinputにフォーカスすると
   自動ズームが発生。16px以上で防止。
   --------------------------------------------------------- */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  select,
  textarea {
    font-size: max(16px, 1em) !important;
  }
}

/* ---------------------------------------------------------
   iOS Safari: Momentum Scrolling & Touch Behavior
   --------------------------------------------------------- */
.scroll-touch {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}
.scroll-touch-x {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

/* タップハイライト制御 */
.tap-transparent {
  -webkit-tap-highlight-color: transparent;
}
.tap-subtle {
  -webkit-tap-highlight-color: rgba(0, 122, 255, 0.1);
}

/* 長押しコールアウト無効化 */
.no-callout {
  -webkit-touch-callout: none;
}

/* スクロールチェーン防止 (モーダル内スクロール等) */
.overscroll-none {
  overscroll-behavior: none;
}
.overscroll-contain {
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------
   Mobile: Fixed Bottom Bar (ホームインジケーター対応)
   ---------------------------------------------------------
   iPhone X+ のホームインジケーター領域を考慮した固定バー
   --------------------------------------------------------- */
.fixed-bottom-safe {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: var(--safe-area-bottom);
}

/* ボトムナビゲーションバー */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: calc(56px + var(--safe-area-bottom));
  padding-bottom: var(--safe-area-bottom);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: 40;
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 56px;
  padding: 6px 0;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-size-xs);
  gap: 2px;
  transition: color 0.15s ease;
  min-width: var(--touch-target-min);
}
.bottom-nav-item:hover,
.bottom-nav-item.active {
  color: var(--color-primary);
}
.bottom-nav-item svg,
.bottom-nav-item .icon {
  width: 24px;
  height: 24px;
}

/* 固定ボトムバーがある場合のbodyパディング */
.has-bottom-nav {
  padding-bottom: calc(56px + var(--safe-area-bottom));
}

/* ---------------------------------------------------------
   Mobile: Sticky/Fixed Header with Safe Area
   --------------------------------------------------------- */
.sticky-header-safe {
  position: sticky;
  top: 0;
  padding-top: var(--safe-area-top);
  z-index: 30;
}

.fixed-header-safe {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-top: var(--safe-area-top);
  z-index: 30;
}

.has-fixed-header {
  padding-top: calc(var(--header-height) + var(--safe-area-top));
}

/* ---------------------------------------------------------
   Mobile: Landscape Mode Adjustments
   ---------------------------------------------------------
   横向き時の表示調整
   --------------------------------------------------------- */
@media (max-width: 767px) and (orientation: landscape) {
  /* 横向きでは高さを抑えめに */
  .modal,
  .modal-card {
    max-height: 85vh !important;
    max-height: 85svh !important;
  }

  /* ボトムナビは横向きでは小さく */
  .bottom-nav {
    height: calc(48px + var(--safe-area-bottom));
  }
  .bottom-nav-item {
    height: 48px;
    flex-direction: row;
    gap: var(--space-2);
  }
}

/* =========================================================================
   Apple HIG 2025: Liquid Glass Design System
   =========================================================================
   iOS 26 / macOS 26 で導入された新しいデザイン言語
   - 透明感のあるガラス質感
   - 動的な光の反射と屈折
   - コンテンツに応じた適応的な表示
   参照: https://developer.apple.com/design/
   ========================================================================= */

/* ---------------------------------------------------------
   Liquid Glass: 基本ユーティリティ
   --------------------------------------------------------- */

/* グラスモーフィズム基本スタイル */
.glass {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 軽いグラス (ナビバー、ツールバー) */
.glass-light {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* 強いグラス (モーダル、フローティングUI) */
.glass-heavy {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* カラーグラス (アクセントカラー付き) */
.glass-primary {
  background: rgba(0, 122, 255, 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 122, 255, 0.2);
}

.glass-success {
  background: rgba(52, 199, 89, 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(52, 199, 89, 0.2);
}

.glass-warning {
  background: rgba(255, 149, 0, 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 149, 0, 0.2);
}

.glass-danger {
  background: rgba(255, 59, 48, 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 59, 48, 0.2);
}

/* ダークモード対応 */
:root.theme-dark .glass,
:root.theme-system.is-system-dark .glass {
  background: rgba(40, 40, 40, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
:root.theme-dark .glass-light,
:root.theme-system.is-system-dark .glass-light {
  background: rgba(40, 40, 40, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
}
:root.theme-dark .glass-heavy,
:root.theme-system.is-system-dark .glass-heavy {
  background: rgba(50, 50, 50, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ---------------------------------------------------------
   Liquid Glass: ボタン
   --------------------------------------------------------- */
.btn-glass {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: var(--color-text);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}
.btn-glass:active {
  transform: translateY(0) scale(0.98);
}

.btn-glass-primary {
  background: rgba(0, 122, 255, 0.85);
  border-color: rgba(0, 122, 255, 0.3);
  color: white;
}
.btn-glass-primary:hover {
  background: rgba(0, 122, 255, 0.95);
}

/* ---------------------------------------------------------
   Touch Targets: 44x44pt 最小サイズ保証 (Apple HIG)
   --------------------------------------------------------- */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 小さい見た目でも 44x44 のタッチ領域を確保 */
.touch-target-expand {
  position: relative;
}
.touch-target-expand::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

/* ---------------------------------------------------------
   Enhanced Transitions (Apple HIG: Fluid Motion)
   --------------------------------------------------------- */
:root {
  /* Apple の Spring アニメーション風タイミング */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* デュレーション */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;
}

/* トランジションユーティリティ */
.transition-spring {
  transition-timing-function: var(--ease-spring);
}
.transition-smooth {
  transition-timing-function: var(--ease-smooth);
}

/* モーションスケール (ホバー/アクティブ) */
.hover-lift {
  transition: transform var(--duration-fast) var(--ease-smooth),
              box-shadow var(--duration-fast) var(--ease-smooth);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-2);
}
.hover-lift:active {
  transform: translateY(0);
}

.hover-scale {
  transition: transform var(--duration-fast) var(--ease-spring);
}
.hover-scale:hover {
  transform: scale(1.02);
}
.hover-scale:active {
  transform: scale(0.98);
}

.hover-glow {
  transition: box-shadow var(--duration-normal) var(--ease-smooth);
}
.hover-glow:hover {
  box-shadow: 0 0 0 4px var(--color-primary-tint);
}

/* ---------------------------------------------------------
   Improved Modal (Apple HIG: Sheet style)
   --------------------------------------------------------- */
.modal-sheet-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-smooth),
              visibility var(--duration-normal);
}
.modal-sheet-bg.open {
  opacity: 1;
  visibility: visible;
}

.modal-sheet {
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-spring);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}
.modal-sheet-bg.open .modal-sheet {
  transform: translateY(0);
}

/* シートのハンドル (ドラッグインジケーター) */
.modal-sheet-handle {
  width: 36px;
  height: 5px;
  background: var(--color-gray-300);
  border-radius: var(--radius-pill);
  margin: 8px auto 16px;
}

/* デスクトップではセンターモーダル */
@media (min-width: 768px) {
  .modal-sheet-bg {
    align-items: center;
  }
  .modal-sheet {
    border-radius: var(--radius-xl);
    max-height: 80vh;
    transform: translateY(20px) scale(0.95);
    opacity: 0;
  }
  .modal-sheet-bg.open .modal-sheet {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .modal-sheet-handle {
    display: none;
  }
}

/* ---------------------------------------------------------
   Floating Action Button (Apple HIG: Liquid Glass style)
   --------------------------------------------------------- */
.fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  border: none;
  box-shadow:
    0 4px 16px rgba(0, 122, 255, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring),
              box-shadow var(--duration-fast) var(--ease-smooth);
  z-index: 100;
}
.fab:hover {
  transform: scale(1.08);
  box-shadow:
    0 6px 20px rgba(0, 122, 255, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.12);
}
.fab:active {
  transform: scale(0.95);
}

/* Liquid Glass FAB */
.fab-glass {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: var(--color-primary);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------
   Pill Navigation (Apple Tab Bar style)
   --------------------------------------------------------- */
.pill-nav {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--color-gray-100);
  border-radius: var(--radius-pill);
}
.pill-nav-item {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
}
.pill-nav-item:hover {
  color: var(--color-text);
}
.pill-nav-item.active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--elevation-1);
}

/* Liquid Glass Pill Nav */
.pill-nav-glass {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.pill-nav-glass .pill-nav-item.active {
  background: rgba(255, 255, 255, 0.9);
}

/* ---------------------------------------------------------
   Progress Indicators (Apple HIG style)
   --------------------------------------------------------- */
.progress-bar {
  height: 4px;
  background: var(--color-gray-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: width var(--duration-slow) var(--ease-decelerate);
}

/* 太いプログレスバー */
.progress-bar-thick {
  height: 8px;
}

/* グラデーションプログレス */
.progress-bar-gradient .progress-bar-fill {
  background: linear-gradient(90deg, var(--color-primary), var(--color-info-500));
}

/* ---------------------------------------------------------
   Skeleton Loading (Apple HIG: Shimmer effect)
   --------------------------------------------------------- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-gray-100) 0%,
    var(--color-gray-50) 50%,
    var(--color-gray-100) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}
.skeleton-text:last-child {
  width: 60%;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-card {
  height: 120px;
}

/* ---------------------------------------------------------
   Toast Notifications (Apple HIG style)
   --------------------------------------------------------- */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  min-width: 280px;
  max-width: 400px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-900);
  color: white;
  font-size: var(--font-size-sm);
  font-weight: 500;
  box-shadow: var(--elevation-3);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toast-in var(--duration-normal) var(--ease-spring);
}

.toast-glass {
  background: rgba(50, 50, 50, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

.toast-success {
  background: var(--color-success-500);
}
.toast-error {
  background: var(--color-error-500);
}
.toast-warning {
  background: var(--color-warning-500);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.toast-exit {
  animation: toast-out var(--duration-fast) var(--ease-accelerate) forwards;
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
}

/* モバイルではボトムに表示 */
@media (max-width: 767px) {
  .toast-container {
    top: auto;
    bottom: 24px;
    right: 16px;
    left: 16px;
  }
  .toast {
    min-width: 0;
    max-width: 100%;
  }
}

/* ---------------------------------------------------------
   Accessibility: Enhanced Focus States
   --------------------------------------------------------- */
/* より視認性の高いフォーカスリング */
.focus-ring-enhanced:focus-visible {
  outline: 3px solid var(--border-brand);
  outline-offset: 3px;
  box-shadow:
    0 0 0 6px rgba(0, 122, 255, 0.2),
    var(--focus-ring);
}

/* ハイコントラストモード対応 */
@media (forced-colors: active) {
  .glass,
  .glass-light,
  .glass-heavy {
    background: Canvas;
    border: 2px solid CanvasText;
  }

  .btn-glass,
  .btn-glass-primary {
    background: ButtonFace;
    border: 2px solid ButtonText;
    color: ButtonText;
  }

  .fab,
  .fab-glass {
    background: ButtonFace;
    border: 2px solid ButtonText;
    color: ButtonText;
  }
}

/* ===========================================================
   Additional Mobile Components (task-008)
   ===========================================================
   モバイル向け追加コンポーネント
   - Swipe Card (スワイプアクション)
   - Action Sheet (iOS風ボトムシート)
   - Pull to Refresh (引き下げ更新)
   - Expandable FAB (展開式FAB)
   - Segmented Control (iOS風セグメント)
   - List Tail Spacer (FAB重なり防止)
   =========================================================== */

/* ---------------------------------------------------------
   Swipe Card (左右スワイプアクション)
   ---------------------------------------------------------
   メール/メッセージアプリ風のスワイプ操作カード
   使用例: 経費承認/却下、タスク完了/削除 等
   --------------------------------------------------------- */
.swipe-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.swipe-card-actions {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
}

.swipe-card-actions-left {
  left: 0;
  justify-content: flex-start;
}

.swipe-card-actions-right {
  right: 0;
  justify-content: flex-end;
}

.swipe-card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 0 var(--space-4);
  color: white;
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.swipe-card-action.approve,
.swipe-card-action.success {
  background: var(--color-success-500);
}

.swipe-card-action.reject,
.swipe-card-action.delete {
  background: var(--color-error-500);
}

.swipe-card-action.archive {
  background: var(--color-warning-500);
}

.swipe-card-action.edit {
  background: var(--color-primary);
}

.swipe-card-content {
  position: relative;
  background: var(--color-surface);
  transition: transform var(--duration-fast) var(--ease-smooth);
  z-index: 1;
}

/* スワイプ後のヒント表示 */
.swipe-card-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity var(--duration-fast) ease;
  pointer-events: none;
}

.swipe-card-hint-left { left: var(--space-4); }
.swipe-card-hint-right { right: var(--space-4); }

.swipe-card:hover .swipe-card-hint {
  opacity: 1;
}

/* ---------------------------------------------------------
   Action Sheet (iOS風アクションシート)
   ---------------------------------------------------------
   画面下部からスライドインするメニュー
   --------------------------------------------------------- */
.action-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-smooth),
              visibility var(--duration-normal);
}

.action-sheet-overlay.open {
  opacity: 1;
  visibility: visible;
}

.action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-2) var(--space-4);
  padding-bottom: calc(var(--space-2) + var(--safe-area-bottom));
  z-index: 1101;
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-spring);
}

.action-sheet-overlay.open .action-sheet {
  transform: translateY(0);
}

.action-sheet-group {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.action-sheet-title {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  border-bottom: 1px solid var(--color-divider);
}

.action-sheet-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: var(--color-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-divider);
  cursor: pointer;
  transition: background var(--duration-instant) ease;
  min-height: var(--touch-target-min);
}

.action-sheet-item:last-child {
  border-bottom: none;
}

.action-sheet-item:active {
  background: var(--color-gray-100);
}

.action-sheet-item.destructive {
  color: var(--color-error-500);
}

.action-sheet-cancel {
  font-weight: 600;
}

/* Liquid Glass Action Sheet */
.action-sheet-glass .action-sheet-group {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

:root.theme-dark .action-sheet-glass .action-sheet-group,
:root.theme-system.is-system-dark .action-sheet-glass .action-sheet-group {
  background: rgba(40, 40, 40, 0.9);
}

/* デスクトップではセンターモーダル風 */
@media (min-width: 768px) {
  .action-sheet {
    left: 50%;
    right: auto;
    bottom: 50%;
    transform: translate(-50%, 50%) scale(0.95);
    opacity: 0;
    max-width: 400px;
    width: calc(100% - var(--space-8));
  }

  .action-sheet-overlay.open .action-sheet {
    transform: translate(-50%, 50%) scale(1);
    opacity: 1;
  }
}

/* ---------------------------------------------------------
   Pull to Refresh (引き下げ更新)
   ---------------------------------------------------------
   リストの上部を引き下げて更新するUI
   --------------------------------------------------------- */
.pull-to-refresh {
  position: relative;
  overflow: hidden;
}

.pull-to-refresh-indicator {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.pull-to-refresh-indicator .spinner {
  margin-right: var(--space-2);
}

/* 引き下げ中の状態 */
.pull-to-refresh.pulling .pull-to-refresh-indicator {
  transform: translateY(60px);
}

/* リフレッシュ中 */
.pull-to-refresh.refreshing .pull-to-refresh-indicator {
  transform: translateY(60px);
}

.pull-to-refresh-content {
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.pull-to-refresh.pulling .pull-to-refresh-content,
.pull-to-refresh.refreshing .pull-to-refresh-content {
  transform: translateY(60px);
}

/* 引き下げ量に応じた矢印回転 */
.pull-to-refresh-arrow {
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.pull-to-refresh.ready .pull-to-refresh-arrow {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------
   Expandable FAB (展開式FAB)
   ---------------------------------------------------------
   複数アクションを持つ展開可能なFAB
   --------------------------------------------------------- */
.fab-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
}

/* ボトムナビがある場合の位置調整 */
.has-bottom-nav .fab-container {
  bottom: calc(80px + var(--safe-area-bottom));
}

.fab-container .fab-main {
  position: relative;
  z-index: 2;
}

.fab-options {
  position: absolute;
  bottom: calc(100% + var(--space-3));
  right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--duration-fast) var(--ease-smooth),
              visibility var(--duration-fast),
              transform var(--duration-fast) var(--ease-spring);
}

.fab-container.open .fab-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fab-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--elevation-2);
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: transform var(--duration-fast) var(--ease-spring),
              box-shadow var(--duration-fast) var(--ease-smooth);
}

.fab-option:hover {
  transform: scale(1.05);
  box-shadow: var(--elevation-3);
}

.fab-option-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fab-option-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  padding-right: var(--space-2);
}

/* FABアイコン回転アニメーション */
.fab-main .fab-icon {
  transition: transform var(--duration-fast) var(--ease-spring);
}

.fab-container.open .fab-main .fab-icon {
  transform: rotate(45deg);
}

/* ---------------------------------------------------------
   Segmented Control (iOS風セグメントコントロール)
   ---------------------------------------------------------
   タブの代替となるセグメント選択UI
   --------------------------------------------------------- */
.segmented-control {
  display: inline-flex;
  padding: 2px;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  position: relative;
}

.segmented-control-item {
  position: relative;
  z-index: 1;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-smooth);
  min-height: 36px;
}

.segmented-control-item:hover {
  color: var(--color-text);
}

.segmented-control-item.active {
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: var(--elevation-1);
}

/* アニメーション付きインジケーター (JS連携用) */
.segmented-control-indicator {
  position: absolute;
  top: 2px;
  bottom: 2px;
  background: var(--color-surface);
  border-radius: calc(var(--radius-md) - 2px);
  box-shadow: var(--elevation-1);
  transition: left var(--duration-fast) var(--ease-spring),
              width var(--duration-fast) var(--ease-spring);
}

/* 全幅セグメントコントロール */
.segmented-control-full {
  width: 100%;
}

.segmented-control-full .segmented-control-item {
  flex: 1;
  text-align: center;
}

/* Liquid Glass Segmented Control */
.segmented-control-glass {
  background: rgba(120, 120, 128, 0.12);
}

.segmented-control-glass .segmented-control-item.active {
  background: rgba(255, 255, 255, 0.9);
}

:root.theme-dark .segmented-control-glass,
:root.theme-system.is-system-dark .segmented-control-glass {
  background: rgba(120, 120, 128, 0.24);
}
:root.theme-dark .segmented-control-glass .segmented-control-item.active,
:root.theme-system.is-system-dark .segmented-control-glass .segmented-control-item.active {
  background: rgba(60, 60, 60, 0.9);
}

/* ---------------------------------------------------------
   List Tail Spacer (FAB重なり防止)
   ---------------------------------------------------------
   リストの末尾にFABと重ならないスペースを確保
   --------------------------------------------------------- */
.list-tail-spacer {
  height: calc(80px + var(--safe-area-bottom));
}

/* FABあり + ボトムナビありの場合 */
.has-bottom-nav .list-tail-spacer {
  height: calc(140px + var(--safe-area-bottom));
}

/* スモールFAB用 */
.list-tail-spacer-sm {
  height: calc(60px + var(--safe-area-bottom));
}

/* ---------------------------------------------------------
   Empty State (モバイル向け空状態表示)
   --------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

.empty-state-icon {
  font-size: 64px;
  margin-bottom: var(--space-4);
  opacity: 0.4;
}

.empty-state-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.empty-state-description {
  font-size: var(--font-size-sm);
  max-width: 280px;
  line-height: 1.5;
}

.empty-state-action {
  margin-top: var(--space-4);
}

/* ---------------------------------------------------------
   Chip Input (タグ入力)
   --------------------------------------------------------- */
.chip-input {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-height: 44px;
  align-items: center;
  cursor: text;
  transition: border-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
}

.chip-input:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-tint);
}

.chip-input .chip {
  margin: 0;
}

.chip-input-field {
  flex: 1;
  min-width: 120px;
  border: none;
  background: transparent;
  font-size: var(--font-size-md);
  padding: var(--space-1) var(--space-2);
  /* outline は親 .chip-input の :focus-within (L5447) で表現するため抑制。
     これ単独の代替は不要 (DS 規約: 親で同等表示があれば許容)。 */
  outline: none;
}

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

/* ---------------------------------------------------------
   Swipe to Delete (リストアイテム削除)
   --------------------------------------------------------- */
.swipe-delete-item {
  position: relative;
  overflow: hidden;
}

.swipe-delete-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80px;
  background: var(--color-error-500);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.swipe-delete-content {
  position: relative;
  background: var(--color-surface);
  transition: transform var(--duration-fast) var(--ease-smooth);
}

/* ---------------------------------------------------------
   Numeric Keypad Input (数値入力向け)
   --------------------------------------------------------- */
.input-numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
  /* iOS/Android で数字キーボードを表示 */
  inputmode: numeric;
}

/* 金額入力用 */
.input-currency {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}

.input-currency::before {
  content: '¥';
  position: absolute;
  left: var(--space-3);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   Quick Action Bar (クイックアクションバー)
   ---------------------------------------------------------
   選択時に表示されるコンテキストアクションバー
   --------------------------------------------------------- */
.quick-action-bar {
  position: fixed;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  padding: var(--space-3);
  background: var(--color-gray-900);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  z-index: 90;
  transform: translateY(calc(100% + var(--space-8)));
  opacity: 0;
  transition: transform var(--duration-normal) var(--ease-spring),
              opacity var(--duration-normal) var(--ease-smooth);
  box-shadow: var(--elevation-4);
}

.quick-action-bar.visible {
  transform: translateY(0);
  opacity: 1;
}

/* ボトムナビがある場合 */
.has-bottom-nav .quick-action-bar {
  bottom: calc(72px + var(--safe-area-bottom));
}

.quick-action-bar-info {
  color: white;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.quick-action-bar-actions {
  display: flex;
  gap: var(--space-2);
}

.quick-action-bar-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border: none;
  cursor: pointer;
  min-height: 36px;
  transition: opacity var(--duration-fast) ease;
}

.quick-action-bar-btn:active {
  opacity: 0.8;
}

.quick-action-bar-btn.primary {
  background: var(--color-primary);
  color: white;
}

.quick-action-bar-btn.secondary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.quick-action-bar-btn.danger {
  background: var(--color-error-500);
  color: white;
}

/* Liquid Glass Quick Action Bar */
.quick-action-bar-glass {
  background: rgba(40, 40, 40, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

/* ===========================================================
   Print Styles & Utilities
   ===========================================================
   業務系（経費精算・勤怠表・経営ダッシュボード等）の印刷需要に対応。
   各アプリの HTML で重複していた @media print 定義を共通化する。

   設計方針:
   - 紙面では「業務文書」として可読性を優先（黒文字・白背景・余白最小）
   - インタラクション要素（toast / modal / FAB / skip-link / sidebar / topbar 等）は全て非表示
   - カード・テーブルは枠線あり / 影なし / break-inside avoid
   - ヘッダ背景・badge は print-color-adjust:exact で構造を保持
   - 各画面で個別調整したい場合は .no-print / .print-only / .print-break-* で対応

   注意: 印刷では screen tokens（--color-border 等）が紙面で読みにくいため、
         pt/mm/#999 等の生値を限定的に使用する（DESIGN SYSTEM 例外）。
   =========================================================== */

/* 印刷ユーティリティ (screen でも有効: .print-only は通常非表示) */
.print-only { display: none; }

@page {
  margin: 12mm 10mm;
}

@media print {
  /* === Reset === */
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  [x-cloak] { display: none !important; }

  /* === Hide interactive / shell chrome === */
  .skip-link,
  .toast,
  .toast-container,
  .modal,
  .modal-overlay,
  .modal-bg,
  .modal-backdrop,
  .fab,
  .fab-container,
  .fab-options,
  .bottom-nav,
  .quick-action-bar,
  .app-sidebar,
  .sidebar-backdrop,
  .module-switcher,
  .lobby-topbar,
  .module-topbar,
  .theme-toggle,
  .theme-switcher,
  .help-btn,
  .help-panel,
  .tabs,
  [role="tablist"],
  [aria-hidden="true"] {
    display: none !important;
  }

  /* tabpanel は印刷時に全て展開（タブ切替なしで全内容を出す運用） */
  [role="tabpanel"] {
    display: block !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* === Layout reset === */
  main,
  .module-shell,
  .lobby-main,
  .lobby-shell {
    padding: 0 !important;
    max-width: none !important;
  }

  /* === Card === */
  .card {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    background: #fff !important;
    margin-bottom: 12pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .card-header,
  .card-footer {
    background: #f5f5f5 !important;
    border-bottom: 1px solid #999 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* === Tables === */
  table,
  .data-table {
    width: 100% !important;
    min-width: auto !important;
    font-size: 9pt;
    border-collapse: collapse !important;
  }
  table th, table td,
  .data-table th, .data-table td {
    padding: 4pt 6pt !important;
    border: 1px solid #999 !important;
  }
  table th,
  .data-table th {
    background: #efefef !important;
    color: #000 !important;
    font-weight: 700 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* 複数ページに跨るテーブルでヘッダを毎ページ繰返 */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr { page-break-inside: avoid; break-inside: avoid; }

  /* === Badge / Pill / Chip === */
  .badge, .pill, .chip, .tag {
    border: 1px solid #999 !important;
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* === Buttons / form controls === */
  /* 印刷時はインタラクションを全て隠す（.print-only で例外可） */
  button:not(.print-only),
  .btn:not(.print-only),
  [role="button"]:not(.print-only),
  input[type="submit"]:not(.print-only),
  input[type="button"]:not(.print-only) {
    display: none !important;
  }
  /* 入力フォーム自体は表示するが枠線を弱める（記入済みの値を確認する用） */
  input, select, textarea {
    border: 1px solid #999 !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  /* === Typography === */
  .page-title, h1 { font-size: 18pt; margin: 0 0 8pt; }
  h2, .section-header { font-size: 14pt; }
  h3 { font-size: 12pt; }
  h1, h2, h3, h4 {
    break-after: avoid;
    page-break-after: avoid;
    color: #000 !important;
  }
  .text-3, .text-secondary, .text-muted {
    color: #555 !important;
  }

  /* === Links === */
  a { color: #000 !important; text-decoration: none; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
  a[href^="#"]::after,
  a[href^="javascript:"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after { content: ""; }

  /* === Media === */
  img, svg { max-width: 100% !important; height: auto !important; }

  /* === Utility classes === */
  .no-print { display: none !important; }
  .print-only { display: revert !important; }
  .print-block { display: block !important; }
  .print-inline { display: inline !important; }
  .print-inline-block { display: inline-block !important; }
  .print-flex { display: flex !important; }
  .print-break-before { break-before: page; page-break-before: always; }
  .print-break-after  { break-after:  page; page-break-after:  always; }
  .print-break-inside-avoid,
  .avoid-break {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* 強制モノクロ化（status 色等を消したいセクション用） */
  .print-bw,
  .print-bw * {
    background: #fff !important;
    color: #000 !important;
    border-color: #999 !important;
  }
}