/* ═══ Zukai Slides — Design System v2 ═══
   ビジネス目的から逆算したデザインシステム。
   - 企業の担当者が毎日開くダッシュボード
   - 30秒で全体像を把握し、すぐ作業に入れる
   - プロフェッショナルで信頼感がある
   - ライト/ダーク両モード対応
   ═══════════════════════════════════════════ */


/* ── 1. Primitive Palette ──
   固定の色値。セマンティックトークン経由でのみ使う。 */

:root {
  /* Warm Neutrals — 温かみのあるグレースケール */
  --n-0: #FFFFFF;
  --n-50: #F5F3EF;
  --n-100: #EBE8E3;
  --n-150: #E0DDD7;
  --n-200: #D2CFC8;
  --n-300: #B5B1A9;
  --n-400: #918D84;
  --n-500: #706C64;
  --n-600: #565249;
  --n-700: #3B3832;
  --n-800: #252320;
  --n-850: #1E1C1A;
  --n-900: #141311;
  --n-950: #0C0B0A;

  /* Platform accent — CTA・フォーカスリング用。org非依存 */
  --accent: #4338CA;
  --accent-hover: #3730A3;
  --accent-light: rgba(67, 56, 202, 0.08);

  /* Brand — org別に動的上書き（リンク色・org表示・コンテンツ用） */
  --brand: #445882;
  --brand-light: rgba(68, 88, 130, 0.08);
  --brand-dark: #3A4D72;
  --brand-subtle: rgba(68, 88, 130, 0.04);

  /* Accent — 情報カテゴリの色分け */
  --blue-50: #EEF2FF;
  --blue-100: #C7D2FE;
  --blue-600: #4338CA;
  --green-50: #ECFDF5;
  --green-100: #A7F3D0;
  --green-600: #059669;
  --amber-50: #FEF3C7;
  --amber-100: #FDE68A;
  --amber-600: #B45309;
  --rose-50: #FFF1F2;
  --rose-100: #FECDD3;
  --rose-600: #BE123C;

  /* Semantic status */
  --success: #2D8A5E;
  --success-bg: #ECFDF5;
  --warning: #D97706;
  --warning-bg: #FFFBEB;
  --danger: #D43B3B;
  --danger-bg: #FEF2F2;

  /* Font */
  --font: 'Noto Sans JP', 'Inter', system-ui, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;

  /* Spacing — 4px grid */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Shape */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-btn: 6px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Typography scale — 最小12px、メリハリ */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-kpi: 48px;

  --w-normal: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-black: 800;

  /* Transition */
  --ease: 180ms ease;
  --ease-slow: 300ms ease;
}


/* ── 2. Semantic Tokens — Light Mode (default) ── */

:root {
  /* Surfaces */
  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-hover: var(--n-50);
  --surface-inset: var(--n-100);
  --surface-raised: var(--n-0);

  /* Text */
  --text: var(--n-900);
  --text-secondary: var(--n-500);
  --text-tertiary: var(--n-400);
  --text-inverse: var(--n-0);

  /* Borders */
  --border-color: var(--n-150);
  --border-subtle: var(--n-100);
  --border: 1px solid var(--border-color);
  --border-light: 1px solid var(--border-subtle);

  /* Shadows — 控えめ、必要な場所だけ */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.1);

  /* Sidebar Nav — テーマに従う */
  --nav-bg: var(--n-0);
  --nav-text: var(--n-400);
  --nav-text-hover: var(--n-700);
  --nav-text-active: var(--n-900);
  --nav-active-bg: var(--n-100);
  --nav-divider: var(--n-100);
  --nav-org-text: var(--n-900);
  --nav-border: var(--n-150);

  /* Card */
  --card-bg: var(--surface);
  --card-radius: var(--radius);
  --card-padding: var(--sp-6);

  /* Content rhythm — ページ内全要素の統一ギャップ */
  --content-gap: var(--sp-6);

  /* Focus ring */
  --focus-ring: 0 0 0 3px var(--accent-light);

  /* LP テーマサンプル色 (#301)
     ランディング/LPの「異なるテーマカラー」サンプルチップで使用。
     色を変えるときはここを更新すれば全箇所に反映される */
  --lp-sample-1: var(--accent);
  --lp-sample-2: var(--green-600);
  --lp-sample-3: var(--warning);

  /* Accent tokens (KPI cards) */
  --accent-blue: var(--blue-50);
  --accent-blue-icon: var(--blue-100);
  --accent-blue-text: var(--blue-600);
  --accent-green: var(--green-50);
  --accent-green-icon: var(--green-100);
  --accent-green-text: var(--green-600);
  --accent-amber: var(--amber-50);
  --accent-amber-icon: var(--amber-100);
  --accent-amber-text: var(--amber-600);
  --accent-rose: var(--rose-50);
  --accent-rose-icon: var(--rose-100);
  --accent-rose-text: var(--rose-600);
}


/* ── 3. Dark Mode ── */

[data-theme="dark"] {
  --bg: var(--n-950);
  --surface: var(--n-850);
  --surface-hover: var(--n-800);
  --surface-inset: var(--n-900);
  --surface-raised: var(--n-800);

  --text: var(--n-100);
  --text-secondary: var(--n-300);
  --text-tertiary: var(--n-400);
  --text-inverse: var(--n-900);

  --border-color: var(--n-700);
  --border-subtle: var(--n-800);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.4);

  --nav-bg: var(--n-900);
  --nav-text: var(--n-500);
  --nav-text-hover: var(--n-300);
  --nav-text-active: var(--n-0);
  --nav-active-bg: var(--n-800);
  --nav-divider: var(--n-800);
  --nav-org-text: var(--n-0);
  --nav-border: var(--n-800);

  --card-bg: var(--surface);

  --accent-light: rgba(67, 56, 202, 0.15);
  --brand-light: rgba(68, 88, 130, 0.15);
  --brand-subtle: rgba(68, 88, 130, 0.08);

  /* Accent — ダークモードでは彩度を落とす */
  --accent-blue: rgba(67,56,202,0.12);
  --accent-blue-icon: rgba(67,56,202,0.25);
  --accent-green: rgba(5,150,105,0.12);
  --accent-green-icon: rgba(5,150,105,0.25);
  --accent-amber: rgba(180,83,9,0.12);
  --accent-amber-icon: rgba(180,83,9,0.25);
  --accent-rose: rgba(190,18,60,0.12);
  --accent-rose-icon: rgba(190,18,60,0.25);
}

/* OS設定に従うフォールバック（data-themeが未設定の場合） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: var(--n-950);
    --surface: var(--n-850);
    --surface-hover: var(--n-800);
    --surface-inset: var(--n-900);
    --surface-raised: var(--n-800);
    --text: var(--n-100);
    --text-secondary: var(--n-300);
    --text-tertiary: var(--n-400);
    --text-inverse: var(--n-900);
    --border-color: var(--n-700);
    --border-subtle: var(--n-800);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.4);
    --nav-bg: var(--n-900);
    --nav-text: var(--n-500);
    --nav-text-hover: var(--n-300);
    --nav-text-active: var(--n-0);
    --nav-active-bg: var(--n-800);
    --nav-divider: var(--n-800);
    --nav-org-text: var(--n-0);
    --nav-border: var(--n-800);
    --card-bg: var(--surface);
    --brand-light: rgba(68, 88, 130, 0.15);
    --brand-subtle: rgba(68, 88, 130, 0.08);
    --accent-blue: rgba(67,56,202,0.12);
    --accent-blue-icon: rgba(67,56,202,0.25);
    --accent-green: rgba(5,150,105,0.12);
    --accent-green-icon: rgba(5,150,105,0.25);
    --accent-amber: rgba(180,83,9,0.12);
    --accent-amber-icon: rgba(180,83,9,0.25);
    --accent-rose: rgba(190,18,60,0.12);
    --accent-rose-icon: rgba(190,18,60,0.25);
  }
}


/* ── 4. Legacy Aliases (settings.html互換) ── */

:root {
  --app-font: var(--font);
  --app-bg: var(--bg);
  --app-surface: var(--surface);
  --app-border: var(--border-color);
  --app-border-hover: var(--n-300);
  --app-text: var(--text);
  --app-muted: var(--text-secondary);
  --app-secondary: var(--text-secondary);
  --app-tertiary: var(--text-tertiary);
  --app-primary: var(--accent);
  --app-primary-hover: var(--accent-hover);
  --app-primary-light: var(--accent-light);
  --app-accent: var(--accent);
  --app-accent-hover: var(--accent-hover);
  --app-accent-light: var(--accent-light);
  --app-accent-border: var(--accent-light);
  --app-danger: var(--danger);
  --app-success: var(--success);
  --app-radius: var(--radius);
  --app-radius-sm: var(--radius-sm);
  --app-radius-lg: var(--radius-lg);
  --app-space-xs: var(--sp-1);
  --app-space-sm: var(--sp-2);
  --app-space-md: var(--sp-4);
  --app-space-lg: var(--sp-6);
  --app-space-xl: var(--sp-8);
  --app-text-xs: var(--text-xs);
  --app-text-sm: var(--text-sm);
  --app-text-md: var(--text-sm);
  --app-text-lg: var(--text-base);
  --app-text-xl: var(--text-lg);
  --app-text-2xl: var(--text-lg);
  --app-shadow-sm: var(--shadow-sm);
  --app-shadow-md: var(--shadow-md);
  --app-transition: var(--ease);
  --app-hover-bg: var(--surface-hover);

  /* v1 compat aliases used by overview/brand */
  --white: var(--n-0);
  --gray-50: var(--n-50);
  --gray-100: var(--n-100);
  --gray-200: var(--n-200);
  --gray-400: var(--text-tertiary);
  --gray-600: var(--text-secondary);
  --gray-900: var(--text);
  --space-1: var(--sp-1);
  --space-2: var(--sp-2);
  --space-3: var(--sp-3);
  --space-4: var(--sp-4);
  --space-5: var(--sp-5);
  --space-6: var(--sp-6);
  --space-8: var(--sp-8);
  --space-10: var(--sp-10);
  --space-12: var(--sp-12);
  --weight-normal: var(--w-normal);
  --weight-medium: var(--w-semibold);
  --weight-bold: var(--w-black);
}


/* ── 5. Reset ── */

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

/* Remove browser default focus outline on mouse click;
   keyboard focus is styled via :focus-visible rules */
:focus:not(:focus-visible) { outline: none; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ═══════════════════════════════════════════
   6. COMPONENTS
   ═══════════════════════════════════════════ */

/* ── Button ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  font-weight: var(--w-semibold);
  cursor: pointer;
  transition: all var(--ease);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}
.btn:hover {
  background: var(--surface-hover);
  border-color: var(--n-300);
}
.btn:active { opacity: 0.85; }
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn--accent {
  background: var(--accent);
  color: var(--n-0);
  border-color: var(--accent);
}
.btn--accent:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn--white {
  background: var(--n-0);
  color: var(--accent);
  border-color: var(--n-0);
  font-weight: var(--w-bold);
}
.btn--white:hover {
  background: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.9);
}

.btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-secondary);
}
.btn--ghost:hover {
  background: var(--surface-hover);
  border-color: transparent;
  color: var(--text);
}

.btn--danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: rgba(212, 59, 59, 0.15);
}
.btn--danger:hover { opacity: 0.85; }

.btn--perm-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: auto;
}
.btn--perm-disabled:hover {
  opacity: 0.4;
  transform: none;
  box-shadow: none;
}

.btn--sm {
  height: 28px;
  font-size: 12px;
  padding: 0 10px;
}
.btn--lg {
  height: 40px;
  font-size: 15px;
  padding: 0 24px;
  border-radius: var(--radius-sm);
}


/* ── Input ── */
.app-input {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  font-size: var(--text-sm);
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: all var(--ease);
  width: 100%;
}
.app-input:hover { border-color: var(--n-300); }
.app-input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.app-input::placeholder { color: var(--text-tertiary); }
.app-input--error { border-color: var(--danger); }
.app-input--error:focus { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-bg); }
.app-input--lg { font-size: var(--text-base); padding: var(--sp-3) var(--sp-4); }


/* ── Label ── */
.app-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-1);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}


/* ── Badge ── */
.app-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
}
.app-badge--accent { background: var(--accent-light); color: var(--accent); }
.app-badge--muted { background: var(--surface-inset); color: var(--text-secondary); }
.app-badge--success { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.app-badge--beta {
  background: var(--ed-border, var(--surface-inset));
  color: var(--ed-muted, var(--text-secondary));
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}


/* ── Card ── */
.app-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--sp-4);
  transition: box-shadow var(--ease);
}
.app-card:hover {
  box-shadow: var(--shadow-md);
}
.app-card-title {
  font-size: var(--text-sm);
  font-weight: var(--w-bold);
  margin-bottom: var(--sp-1);
}
.app-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}


/* ── Tabs ── */
.app-tabs {
  display: flex;
  background: var(--surface-inset);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.app-tab {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-xs);
  font-family: var(--font);
  font-weight: var(--w-semibold);
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
  transition: all var(--ease);
  white-space: nowrap;
  line-height: 1.4;
}
.app-tab:hover { color: var(--text-secondary); }
.app-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-tab--active {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}


/* ── Avatar row ── */
.avatar-row { display: flex; align-items: center; }
.avatar {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--surface); object-fit: cover; flex-shrink: 0;
  font-size: 10px; display: inline-flex; align-items: center; justify-content: center;
}
.avatar + .avatar { margin-left: -6px; }
.avatar--initial {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: var(--w-semibold);
}
.avatar--more {
  background: var(--surface-inset);
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: var(--w-semibold);
}


/* ═══════════════════════════════════════════
   7. LAYOUT
   ═══════════════════════════════════════════ */

/* ── Header ── */
.app-header {
  height: 52px;
  background: var(--surface);
  border-bottom: var(--border-light);
  padding: 0 var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.app-header-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--w-black);
  color: var(--text);
  letter-spacing: -0.3px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.app-header-title:hover { color: var(--text); opacity: 0.7; }

/* Closed Beta バッジ (#137 / #373): GA時はこのブロックを削除
   .app-header-title::after は LP/help 用、 .app-beta-badge は dashboard/editor 用 */
.app-header-title::after {
  content: 'Beta';
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 2px 8px;
  font-family: var(--font-base);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--accent);
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.app-beta-badge {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 2px 8px;
  font-family: var(--font-base);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--accent);
  vertical-align: middle;
  user-select: none;
}
.app-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.app-header-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .app-header-meta { display: none; }
  /* LP ヘッダーが 405px ぶん要素を持ち 390 viewport を超えるため
     テーマ切替アイコンを LP からは隠す (dashboard sidebar から切替可能) (#453) */
  #landing-theme-toggle { display: none; }
}

/* ── Main container ── */
.app-main {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--sp-8);
}
/* LP uses full-bleed sections — remove constraints */
.app-main--lp {
  max-width: none;
  padding: 0;
}
.app-main--wide { max-width: 960px; }
.app-main--dash { max-width: none; padding: 0; flex: 1; min-width: 0; overflow-y: auto; height: 100vh; }

/* ── App Layout ── */
.app-layout {
  display: flex;
  min-height: 100vh;
}
.app-layout--landing {
  min-height: 100vh;
}

/* モバイル サイドバー (#328) ──
   768px 以下では sidebar を off-canvas で隠し、 ハンバーガーボタンで開閉する。
   sidebar-toggle と sidebar-backdrop はモバイル時のみ表示。 */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 30;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
}
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 20;
}
body.sidebar-open .sidebar-backdrop { display: block; }

@media (max-width: 768px) {
  .sidebar-toggle { display: inline-flex; }
  /* CSS 順序問題: .sidebar / .ws-rail の元定義 (position: sticky) が後ろに書かれていて
     specificity 同じなら後出しが勝つため override されていた。 !important で確実に効かせる (#451)。 */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 25 !important;
    transform: translateX(-100%);
    transition: transform var(--ease);
    box-shadow: var(--shadow-lg);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .ws-rail {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 26 !important;
    transform: translateX(-100%);
    transition: transform var(--ease);
  }
  body.sidebar-open .ws-rail { transform: translateX(0); }
  /* container は元レイアウトで 240+56=296px の幅を占有して main を潰すため 0 幅化 */
  #sidebar-container, #ws-rail-container {
    width: 0;
    min-width: 0;
    overflow: visible;
  }
  /* sidebar + ws-rail を並べて表示するため sidebar を ws-rail の右にずらす */
  body.sidebar-open .sidebar { transform: translateX(56px); }
  /* main はサイドバーが隠れているので全幅 */
  .app-main--dash {
    padding-top: 60px; /* ハンバーガーボタン用の余白 */
  }
}


/* ═══════════════════════════════════════════
   7b. WORKSPACE RAIL — Slack-style switcher
   ═══════════════════════════════════════════ */

.ws-rail {
  width: 56px;
  min-width: 56px;
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 10; /* ::after tooltip を sidebar より前面に出す (#447) */
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-divider);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-4) 0;
  gap: var(--sp-2);
}
.ws-rail-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  min-height: 0;
  /* overflow-y: auto を付けるとツールチップ (::after, 横方向にはみ出す) が clipping される (#441)。
     ws 数が多いケースは将来 fixed positioning + JS で別解化する。 */
}
.ws-rail-item {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--nav-text);
  background: transparent;
  transition: all var(--ease);
  position: relative;
}
/* ws-rail のカスタムツールチップ: ネイティブ title だと 1-2 秒遅延があり「何が選べるかわからない」 を解消する */
.ws-rail-item[data-tooltip]::after,
.ws-rail-add[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + var(--sp-3));
  top: 50%;
  transform: translateY(-50%);
  padding: var(--sp-1) var(--sp-3);
  background: #1f2937;
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  line-height: 1.4;
  white-space: nowrap;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease-out;
  z-index: 100;
}
/* hover でも focus-visible でもないと出さない。 touch デバイスでは :hover が
   sticky (タップ後に維持) になり tooltip が「常に表示」 されてしまうため、
   hover の発火を hover デバイスのみに制限する (#465)。 */
@media (hover: hover) and (pointer: fine) {
  .ws-rail-item:hover::after,
  .ws-rail-add:hover::after {
    opacity: 1;
  }
}
.ws-rail-item:focus-visible::after,
.ws-rail-add:focus-visible::after {
  opacity: 1;
}
.ws-rail-item:hover {
  background: var(--nav-active-bg);
  color: var(--nav-text-hover);
}
.ws-rail-item--active {
  background: var(--brand-primary, var(--accent));
  color: #fff;
}
.ws-rail-item--active:hover {
  opacity: 0.9;
  color: #fff;
}
.ws-rail-initial {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--w-bold);
  line-height: 1;
  pointer-events: none;
}
.ws-rail-add {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  text-decoration: none;
  border: 1px dashed var(--border-color);
  transition: all var(--ease);
  margin-top: auto;
}
.ws-rail-add:hover {
  color: var(--text-secondary);
  border-color: var(--text-secondary);
  background: var(--nav-active-bg);
}
/* + ボタンの意味を明示するラベル (#494)。 PC では tooltip があるので hide。 */
.ws-rail-add-label {
  display: none;
  font-size: 9px;
  line-height: 1;
  margin-top: 4px;
}
@media (max-width: 768px) {
  .ws-rail-add {
    height: auto;
    flex-direction: column;
    padding: 8px 4px;
    gap: 0;
  }
  .ws-rail-add-label {
    display: block;
  }
}

/* ═══════════════════════════════════════════
   8. SIDEBAR — テーマに従う
   ═══════════════════════════════════════════ */

.sidebar {
  width: 240px;
  min-width: 240px;
  height: 100vh;
  position: sticky;
  top: 0;
  background: var(--nav-bg);
  display: flex;
  flex-direction: column;
  padding: var(--sp-5) 0;
  overflow-y: auto;
}

.sidebar-org {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-5) var(--sp-8);
}
.sidebar-product-name {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--w-black);
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.3px;
}
.sidebar-product-name:hover { opacity: 0.7; }
.sidebar-org-name {
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--nav-org-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--sp-3);
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--nav-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  transition: all var(--ease);
}
.sidebar-item:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.sidebar-item:hover {
  color: var(--nav-text-hover);
  background: var(--nav-active-bg);
}
.sidebar-item--active {
  color: var(--nav-text-active);
  background: var(--nav-active-bg);
  font-weight: var(--w-semibold);
}
.sidebar-item--active:hover {
  color: var(--nav-text-active);
  background: var(--nav-active-bg);
}

.sidebar-divider {
  height: 1px;
  background: var(--nav-divider);
  margin: var(--sp-3) var(--sp-5);
}

.sidebar-footer {
  margin-top: auto;
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--nav-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.sidebar-user {
  font-size: var(--text-xs);
  color: var(--nav-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.sidebar-logout {
  background: none;
  border: none;
  color: var(--nav-text);
  font-size: var(--text-xs);
  font-family: var(--font);
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  transition: all var(--ease);
  flex-shrink: 0;
}
.sidebar-logout:hover {
  color: var(--nav-text-hover);
  background: var(--nav-active-bg);
}

/* Theme toggle (in sidebar footer) */
.sidebar-theme-toggle {
  background: none;
  border: none;
  color: var(--nav-text);
  cursor: pointer;
  padding: var(--sp-1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ease);
  flex-shrink: 0;
}
.sidebar-theme-toggle:hover {
  color: var(--nav-text-hover);
  background: var(--nav-active-bg);
}


/* ═══════════════════════════════════════════
   9. UTILITIES
   ═══════════════════════════════════════════ */

.text-muted { color: var(--text-secondary); }
.text-accent { color: var(--accent); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.font-bold { font-weight: var(--w-bold); }
.flex { display: flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.gap-sm { gap: var(--sp-2); }
.gap-md { gap: var(--sp-4); }

/* Spacing utilities (#445 — インライン style="margin-*" の置換先) */
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-md { margin-top: var(--sp-4); }
.mt-lg { margin-top: var(--sp-6); }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mx-auto { margin-left: auto; margin-right: auto; }
.pt-md { padding-top: var(--sp-4); }
.border-t { border-top: var(--border-light); }

/* Icon + label のレイアウト基準 (#445)。 アイコン左、 ラベル右、 縦中央揃え */
.icon-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Icon sizes */
.icon-10 { width: 10px; height: 10px; }
.icon-12 { width: 12px; height: 12px; }
.icon-13 { width: 13px; height: 13px; }
.icon-14 { width: 14px; height: 14px; }
.icon-15 { width: 15px; height: 15px; }
.icon-16 { width: 16px; height: 16px; }
.icon-32 { width: 32px; height: 32px; }
.icon-48 { width: 48px; height: 48px; }

/* 「無題」 placeholder (#499): タイトル未入力スライドを薄色で表示し、 区別 + 入力誘導 */
.title-untitled {
  color: var(--text-tertiary);
  font-weight: var(--w-regular, 400);
  font-style: italic;
}

/* Empty state (#443 — renderEmptyState ヘルパー出力先) */
.app-empty {
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  color: var(--text-tertiary);
}
.app-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto var(--sp-3);
  color: var(--text-tertiary);
}
.app-empty-icon i { width: 32px; height: 32px; }
.app-empty-text {
  font-size: var(--text-base);
  font-weight: var(--w-bold);
  color: var(--text);
  margin-bottom: var(--sp-2);
}
.app-empty-subtitle {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-4);
}
.app-empty-actions {
  margin-top: var(--sp-4);
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
}

/* Loading */
.app-loading {
  text-align: center;
  padding: var(--sp-12);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* Skeleton UI */
.skeleton-bar {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-inset) 25%, var(--surface-hover) 50%, var(--surface-inset) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
/* iframe ロード中のサムネ用 placeholder shimmer (createSlideThumbnail で .slide-thumb-loading を付ける) */
.slide-thumb-loading {
  background: linear-gradient(90deg, var(--surface-inset) 25%, var(--surface-hover) 50%, var(--surface-inset) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-content {
  padding: var(--sp-8);
}


/* ═══════════════════════════════════════════
   10. MODAL
   ═══════════════════════════════════════════ */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  backdrop-filter: blur(4px);
}
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--sp-8);
  width: 420px;
  max-width: 90vw;
  box-shadow: var(--shadow-lg);
}
.modal--md { width: 480px; }
.modal--lg { width: 560px; }
.modal h3 {
  font-size: var(--text-lg);
  font-weight: var(--w-bold);
  margin-bottom: var(--sp-5);
}
.modal label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-1);
  margin-top: var(--sp-4);
}
.modal input, .modal select, .modal textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: all var(--ease);
}
.modal input:focus, .modal select:focus, .modal textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.modal-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  margin-top: var(--sp-8);
}

/* ── Add slides to project modal ── */
.add-slide-search-wrap { margin-bottom: var(--sp-3); }
.add-slide-list {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.add-slide-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
}
.add-slide-item:last-child { border-bottom: none; }
/* Custom checkbox */
.add-slide-check {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid var(--border-color);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  transition: all var(--ease);
  position: relative;
}
.add-slide-check:hover {
  border-color: var(--accent);
}
.add-slide-check:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.add-slide-check:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid var(--n-0);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.add-slide-check:focus-visible {
  box-shadow: var(--focus-ring);
}
.add-slide-info { min-width: 0; flex: 1; }
.add-slide-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.add-slide-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.modal-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-1);
}
.modal-dim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.modal-label-spaced { margin-top: var(--sp-3); }
.modal-textarea { resize: vertical; }
.modal-field-group { margin-top: var(--sp-3); }
.modal-delete--left { margin-right: auto; }
.app-input--date { width: 200px; }

/* app-modal (settings page) */
.app-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  backdrop-filter: blur(4px);
}
.app-modal {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--sp-8);
  width: 480px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.app-modal-title {
  font-size: var(--text-lg);
  font-weight: var(--w-bold);
  margin-bottom: var(--sp-5);
}
.app-modal-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  margin-top: var(--sp-8);
}

/* Preset selector (modal) */
.preset-grid { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); max-height: 260px; overflow-y: auto; }
.preset-option { display: block; cursor: pointer; margin: 0; }
.preset-option input { display: none; }
.preset-option--inline { flex: 1; min-width: 100px; }
.preset-card { display: block; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); transition: all var(--ease); }
.preset-option input:checked + .preset-card { border-color: var(--accent); background: var(--accent-light); }
.preset-card:hover { border-color: var(--n-300); }
.preset-card-btn { display: block; width: 100%; background: none; cursor: pointer; margin: 0; padding: 0; border: none; text-align: left; font: inherit; color: inherit; }
.preset-card-btn .preset-card:hover { border-color: var(--accent); background: var(--accent-light); }
.preset-card--with-thumb { display: flex; align-items: center; gap: var(--sp-3); }
.preset-thumb { width: 160px; flex-shrink: 0; border-radius: 3px; overflow: hidden; background: var(--n-100); aspect-ratio: 16/9; }
.preset-thumb--blank { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--n-300); }
.preset-meta { flex: 1; min-width: 0; }
.preset-card--compact { text-align: center; padding: var(--sp-2); }
.preset-name { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--w-semibold); }
.preset-icon { flex-shrink: 0; color: var(--muted); }
.preset-desc { display: block; font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.theme-detail-desc { font-size: var(--text-sm); margin-top: var(--sp-2); line-height: 1.6; }
.wizard-step { font-size: var(--text-xs); font-weight: var(--w-semibold); color: var(--text-tertiary); margin-bottom: var(--sp-5); }
.wizard-selected { background: var(--accent-light); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); }
.modal-sub-options { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Theme detail (Step 2) */
.theme-detail-header { margin-bottom: var(--sp-5); }
.theme-detail-header h3 { margin: var(--sp-2) 0 0; }
.theme-detail-header .text-muted { display: block; }
.theme-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  max-height: 50vh;
  overflow-y: auto;
}
.theme-detail-slide { text-align: center; }
.theme-detail-thumb {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--n-100);
}
.theme-detail-num {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--sp-1);
}

/* Wizard tabs */
.wizard-tabs {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--sp-1);
}
.wizard-tab {
  padding: var(--sp-2) var(--sp-4);
  border: none;
  background: none;
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  font-family: inherit;
  color: var(--text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--ease);
}
.wizard-tab:hover { color: var(--text); }
.wizard-tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* AI generate form */
.ai-gen-form { margin-bottom: var(--sp-4); }
.ai-gen-form label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  margin-bottom: var(--sp-2);
}
.ai-gen-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}
.ai-gen-status {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--sp-2);
  min-height: 1.2em;
}

/* AI file attachment */
.ai-file-attach { margin-top: var(--sp-3); }
.ai-file-list { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); }
.ai-file-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  background: var(--surface-inset); border-radius: var(--radius-btn);
  font-size: var(--text-sm);
}
.ai-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-file-remove {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: var(--text-tertiary); border-radius: var(--radius-btn);
}
.ai-file-remove:hover { color: var(--danger); background: var(--danger-bg); }

/* AI setup panel (inline in modal) */
.ai-setup-notice p { margin-bottom: var(--sp-3); }
.ai-setup-fields { display: flex; flex-direction: column; gap: var(--sp-3); }
.ai-setup-fields .settings-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.ai-setup-fields .settings-label {
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--text-secondary);
}

/* AI loading animation */
.ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) 0;
  min-height: 320px;
}
.ai-loading-slides {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
  width: 280px;
}
.ai-loading-slide {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    135deg,
    var(--surface-raised) 0%,
    var(--n-150) 50%,
    var(--surface-raised) 100%
  );
  background-size: 300% 300%;
  animation: ai-shimmer 2s ease-in-out infinite, ai-slide-in 0.6s ease-out both;
  animation-delay: calc(var(--i) * 0.15s), calc(var(--i) * 0.15s);
}
.ai-loading-text {
  font-size: var(--text-base);
  font-weight: var(--w-medium);
  color: var(--text);
  margin-bottom: var(--sp-2);
  animation: ai-pulse 2s ease-in-out infinite;
}
.ai-loading-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

@keyframes ai-shimmer {
  0% { background-position: 100% 100%; }
  50% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
@keyframes ai-slide-in {
  from { opacity: 0; transform: translateY(12px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ai-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ═══════════════════════════════════════════
   11. LANDING PAGE
   Design tokens borrowed from slide system:
   - Gradient: 135deg, grad-start → grad-mid → grad-end
   - Cards: 16px radius, warm bg (#F5F6F8)
   - Typography: weight 900/700/500 hierarchy
   - Spacing: 8px grid
   - Colors: warm neutral --n-50 ~ --n-900
   ═══════════════════════════════════════════ */

/* ── Shared layout ── */
.lp-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 0 var(--sp-6);
}

/* ── Gradient background ── */
.lp-grad {
  background: linear-gradient(135deg, var(--grad-start, #4338CA) 0%, var(--grad-mid, #6366F1) 45%, var(--grad-end, #818CF8) 100%);
  color: var(--n-0);
}
.lp-grad .lp-section-title,
.lp-grad .lp-section-lead { color: var(--n-0); }
.lp-grad .lp-section-lead { opacity: 0.9; }

/* ── Header bar — slide h-title style ── */
.lp-header-bar {
  font-family: var(--font-display);
  font-size: 48px; font-weight: var(--w-black);
  letter-spacing: -1.5px; line-height: 1.2;
  color: var(--text);
  padding-bottom: var(--sp-2);
  border-bottom: 3px solid var(--accent);
  margin-bottom: var(--sp-5);
  display: inline-block;
}

/* ── Hero ── */
.lp-hero {
  padding: 100px 0 80px;
  text-align: center;
}
.lp-kicker {
  font-size: var(--text-sm); font-weight: var(--w-semibold);
  letter-spacing: 0.5px; opacity: 0.85;
  margin-bottom: var(--sp-4);
  color: rgba(255,255,255,0.85);
}
.lp-hero-title {
  font-size: 72px; font-weight: var(--w-black);
  line-height: 1.15; letter-spacing: -2px;
  margin-bottom: var(--sp-6);
  color: var(--n-0);
}
.lp-hero-sub {
  font-size: var(--text-lg); line-height: 1.8;
  color: rgba(255,255,255,0.85);
  margin: 0 auto var(--sp-10);
}
.lp-hero-cta {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3);
}
.lp-hero-note {
  font-size: var(--text-sm); color: rgba(255,255,255,0.65);
}

/* ── Shared number badge ── */
.lp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
  box-shadow: 0 0 0 3px var(--lp-num-ring, #fff);
}
.lp-section--warm .lp-num { --lp-num-ring: var(--n-100); }

/* ── Axonometric architecture diagram ── */
.lp-arch {
  display: flex;
  justify-content: center;
  padding: 24px 0 0;
}
.lp-arch-scene-wrap {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 460px;
}
.lp-arch-scene {
  width: 480px;
  height: 300px;
  position: absolute;
  bottom: 50%;
  left: 50%;
  margin-left: -240px;
  margin-bottom: -150px;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-45deg);
}
.lp-arch-layer {
  position: absolute;
  inset: 0;
  transform: translateZ(var(--z, 0));
  transform-style: preserve-3d;
}

/* ── Structure wrapper — hover interaction container ── */
.lp-structure [data-layer] { cursor: pointer; }
/* opacity on arch-layer itself breaks preserve-3d; dim children instead */
.lp-structure[data-focus] .lp-arch-layer > * { opacity: 0.15; transition: opacity 0.25s ease; }
.lp-structure[data-focus="1"] .lp-arch-layer[data-layer="1"] > *,
.lp-structure[data-focus="2"] .lp-arch-layer[data-layer="2"] > *,
.lp-structure[data-focus="3"] .lp-arch-layer[data-layer="3"] > * { opacity: 1; }
.lp-structure .lp-arch-layer > * { transition: opacity 0.25s ease; }
.lp-structure[data-focus] .lp-arch-legend-item { opacity: 0.3; }
.lp-structure[data-focus="1"] .lp-arch-legend-item[data-layer="1"],
.lp-structure[data-focus="2"] .lp-arch-legend-item[data-layer="2"],
.lp-structure[data-focus="3"] .lp-arch-legend-item[data-layer="3"] { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
.lp-structure .lp-arch-legend-item { box-shadow: 0 0 0 2px transparent; border-radius: var(--radius-sm); transition: opacity 0.25s ease, box-shadow 0.25s ease; }
/* Flat view: outline focused elements */
.lp-structure[data-focus="1"] .lp-flat-slide { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 12px; }
.lp-structure[data-focus="2"] .lp-flat [data-layer="2"] { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.lp-structure[data-focus="3"] .lp-flat [data-layer="3"] { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
/* Dim non-focused flat elements */
.lp-structure[data-focus] .lp-flat-slide { opacity: 0.5; transition: opacity 0.25s ease; }
.lp-structure[data-focus="1"] .lp-flat-slide { opacity: 1; }
.lp-structure[data-focus="2"] .lp-flat-slide,
.lp-structure[data-focus="3"] .lp-flat-slide { opacity: 1; }

/* ── Legend (between axo and flat) ── */
.lp-arch-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin: var(--sp-8) 0;
}
.lp-arch-legend-item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
}
.lp-arch-legend-item strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.lp-arch-legend-item > div > span {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Layer 1 — Frame base */
.lp-arch-plate {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.lp-arch-plate--frame {
  background: linear-gradient(135deg, var(--grad-start, #4338CA) 0%, var(--grad-mid, #6366F1) 50%, var(--grad-end, #818CF8) 100%);
}

/* Layer membrane — 透明。パーツだけが浮かぶ */
.lp-arch-hfc,
.lp-arch-blocks {
  background: transparent;
  border-radius: 8px;
}

/* Layer 2 — Header + Footer + Content area */
.lp-arch-hfc {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 8px;
}
.lp-arch-hdr {
  height: 36px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
}
.lp-arch-hdr::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grad-start, #4338CA);
  opacity: 0.5;
}
.lp-arch-hdr::after {
  content: '';
  width: 56px; height: 5px;
  border-radius: 3px;
  background: #ddd;
}
.lp-arch-cnt {
  flex: 1;
  border-radius: 5px;
  display: flex;
  gap: 8px;
  padding: 6px;
}
.lp-arch-ftr {
  height: 22px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.lp-arch-card {
  flex: 1;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Layer 3 — Blocks (grouped per card, KPI pattern) */
.lp-arch-blocks {
  display: flex;
  gap: 10px;
  padding: 52px 12px 36px;
  height: 100%;
}
.lp-arch-blk-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.lp-arch-blk {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
}
/* Icon block — colored circle */
.lp-arch-blk--icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--grad-start, #4338CA);
  opacity: 0.6;
}
.lp-arch-blk--icon-g { background: #059669; }
.lp-arch-blk--icon-a { background: #d97706; }
/* Number block — large colored text, no background */
.lp-arch-blk--num {
  color: var(--grad-start, #4338CA);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
}
.lp-arch-blk--num-g { color: #059669; }
.lp-arch-blk--num-a { color: #d97706; }
/* Label block — small muted text, no background (hardcoded: slide preview) */
.lp-arch-blk--lbl {
  color: #918D84;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Connector struts (4 corners per layer gap) */
.lp-arch-strut {
  position: absolute;
  width: 1px;
  height: 100px;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.15) 0, rgba(0,0,0,0.15) 3px, transparent 3px, transparent 7px);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.lp-arch-strut--tl { left: 0; top: 0; transform-origin: top center; transform: translateZ(-50px) rotateX(-90deg); }
.lp-arch-strut--tr { right: 0; top: 0; transform-origin: top center; transform: translateZ(-50px) rotateX(-90deg); }
.lp-arch-strut--bl { left: 0; bottom: 0; transform-origin: bottom center; transform: translateZ(-50px) rotateX(-90deg); }
.lp-arch-strut--br { right: 0; bottom: 0; transform-origin: bottom center; transform: translateZ(-50px) rotateX(-90deg); }
/* ── Flat front-view diagram (2D, with number badges) ── */
.lp-flat {
  display: flex;
  justify-content: center;
  padding: 0 0 var(--sp-6);
}
.lp-flat-wrap {
  max-width: 800px;
  display: flex;
  justify-content: center;
}
.lp-flat-slide {
  position: relative;
  width: 480px;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--grad-start, #4338CA) 0%, var(--grad-mid, #6366F1) 50%, var(--grad-end, #818CF8) 100%);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.lp-flat-hdr {
  height: 32px;
  background: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 6px;
}
.lp-flat-hdr-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grad-start, #4338CA);
  opacity: 0.5;
}
.lp-flat-hdr-bar {
  width: 48px; height: 4px;
  border-radius: 2px;
  background: #ddd;
}
.lp-flat-content {
  flex: 1;
  display: flex;
  gap: 10px;
}
.lp-flat-card {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 12px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.lp-flat-blks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
}
.lp-flat-blk-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  opacity: 0.7;
}
.lp-flat-blk-num {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
}
.lp-flat-blk-lbl {
  font-size: 10px;
  font-weight: 600;
  color: #918D84;
  letter-spacing: 0.5px;
}
.lp-flat-ftr {
  height: 24px;
  background: #fff;
  border-radius: 6px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  padding: 0 4px;
}

/* ── Story section (なぜ必要か) ── */
.lp-story-insight {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.7;
  margin-bottom: var(--sp-8);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--accent);
}

/* ── Pain / Scene 2-column section (ひとりで作るとき / チームで作るとき) ── */
.lp-pains, .lp-scenes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}
.lp-pain-title, .lp-scene-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--sp-4) 0;
}
.lp-pain-list, .lp-scene-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lp-pain-list li, .lp-scene-list li {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.8;
  padding-left: var(--sp-5);
  position: relative;
  margin-bottom: var(--sp-2);
}
.lp-pain-list li::before, .lp-scene-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 12px;
  height: 2px;
  background: var(--text-tertiary);
}
@media (max-width: 768px) {
  .lp-pains, .lp-scenes {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

/* ── Origin / social proof section ── */
.lp-origin-body {
  margin-bottom: var(--sp-6);
}
.lp-origin-text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--sp-3);
}
.lp-origin-text:last-child { margin-bottom: 0; }
.lp-origin-text strong { color: var(--text); }
.lp-origin-meta {
  display: flex;
  gap: var(--sp-8);
}
.lp-origin-meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}
.lp-origin-meta-item i { color: var(--accent); }

/* ── Step icon (unified circle) ── */
.lp-step-visual {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-step-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--n-0);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
[data-theme="dark"] .lp-step-icon {
  background: var(--n-800);
}

@media (max-width: 768px) {
  .lp-arch-scene-wrap { height: 400px; }
  .lp-arch-scene {
    width: 280px; height: 175px;
    margin-left: -140px;
    margin-bottom: -88px;
  }
  .lp-arch-legend { grid-template-columns: repeat(2, 1fr); }
  .lp-flat-slide { width: 100%; max-width: 360px; }
}
@media (max-width: 480px) {
  .lp-arch-legend { grid-template-columns: 1fr; }
}

.landing-divider { margin: var(--sp-4) 0; color: var(--text-tertiary); font-size: var(--text-sm); text-align: center; }
.landing-email-form { display: flex; gap: var(--sp-2); }
.landing-email-form .app-input { flex: 1; min-width: 0; }
.landing-sent { color: var(--accent); margin-top: var(--sp-4); font-size: var(--text-sm); }

/* ── Login Page ── */
.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 64px); padding: var(--sp-8);
}
.login-card {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: var(--sp-6);
  text-align: center;
}
.login-header { display: flex; flex-direction: column; gap: var(--sp-2); }
.login-title {
  font-size: 32px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text); margin: 0;
}
.login-subtitle {
  font-size: var(--text-base); color: var(--text-secondary); margin: 0;
}
.login-auth-section {
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.login-google-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  width: 100%; padding: 14px var(--sp-5);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  font-size: var(--text-base); font-weight: 500;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.login-google-btn:hover {
  background: var(--surface-hover); border-color: var(--text-tertiary);
}
.login-google-btn svg { flex-shrink: 0; }
/* GIS rendered button (iOS Safari #463): Google 提供ボタンを中央寄せ */
.login-gis-container {
  display: flex;
  justify-content: center;
  min-height: 44px;
}
.login-email-toggle { width: 100%; }
.login-divider {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--text-tertiary); font-size: var(--text-sm);
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border-color);
}
.login-email-form {
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.login-email-form .app-input { width: 100%; }
.login-sent {
  color: var(--accent); font-size: var(--text-sm);
  padding: var(--sp-3) var(--sp-4); background: var(--surface-raised);
  border-radius: var(--radius-sm);
}
.login-consent { text-align: left; }
.login-consent-label {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--text-xs); line-height: 1.5;
  color: var(--text-tertiary); cursor: pointer;
}
.login-consent-label a {
  color: var(--text-secondary); text-decoration: underline;
  text-underline-offset: 2px;
}
.login-consent-label a:hover { color: var(--accent); }
.login-checkbox {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px;
  border: 2px solid var(--border-color); border-radius: 4px;
  background: var(--card-bg);
  transition: all 0.15s; position: relative;
}
.login-checkbox--checked {
  background: var(--accent); border-color: var(--accent);
}
.login-checkbox--checked::after {
  content: ''; position: absolute;
  left: 4px; top: 1px; width: 6px; height: 10px;
  border: solid var(--n-0); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.login-checkbox--error {
  border-color: var(--error); animation: login-shake 0.3s;
}
@keyframes login-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.login-switch {
  font-size: var(--text-sm); color: var(--text-secondary);
  text-align: center; margin-bottom: var(--sp-3);
}
.login-switch a { color: var(--brand-primary, var(--accent)); text-decoration: none; font-weight: 500; }
.login-switch a:hover { text-decoration: underline; }
.login-back {
  color: var(--text-tertiary); font-size: var(--text-sm);
  text-decoration: none;
}
.login-back:hover { color: var(--text); }

/* ── Scroll reveal ── */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; }
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ── LP Sections ── */
.lp-section {
  padding: 72px 0 56px;
}
.lp-section--warm {
  background: var(--n-100);
}
.lp-section-title {
  font-family: var(--font-display);
  font-size: 48px; font-weight: var(--w-black);
  letter-spacing: -1.5px; line-height: 1.2;
  margin-bottom: var(--sp-4);
}
.lp-section-lead {
  font-size: var(--text-lg); line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: var(--sp-8);
}

/* ── How it works: steps — slide number block style ── */
.lp-steps {
  display: flex; flex-direction: column;
  gap: var(--sp-8);
}
.lp-step {
  display: flex; align-items: center;
  gap: var(--sp-5);
}
.lp-step-num {
  font-family: var(--font-display);
  font-size: 56px; font-weight: var(--w-black);
  line-height: 1;
  background: linear-gradient(135deg, var(--grad-start, #4338CA), var(--grad-end, #818CF8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
  width: 56px;
  text-align: center;
}
.lp-step-body { flex: 1; }
.lp-step-title {
  font-size: var(--text-xl); font-weight: var(--w-bold);
  margin-bottom: var(--sp-3);
  letter-spacing: -0.5px;
}
.lp-step-desc {
  font-size: var(--text-base); color: var(--text-secondary);
  line-height: 1.8;
}

/* ── VS comparison cards ── */
.lp-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.lp-vs-card {
  padding: 36px;
  border-radius: var(--radius);
}
.lp-vs-card--muted {
  background: var(--n-100);
  border: 1px solid var(--n-200);
}
[data-theme="dark"] .lp-vs-card--muted {
  background: var(--n-800);
  border-color: var(--n-700);
}
.lp-vs-card--accent {
  background: var(--accent);
  color: #fff;
}
.lp-vs-card-badge {
  font-size: var(--text-sm);
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-3);
}
.lp-vs-card--accent .lp-vs-card-badge { color: rgba(255,255,255,0.7); }
.lp-vs-card-name {
  font-size: 28px;
  font-weight: var(--w-black);
  letter-spacing: -1px;
  margin-bottom: var(--sp-6);
}
.lp-vs-card--accent .lp-vs-card-name { color: #fff; }
.lp-vs-card-rows {
  display: flex;
  flex-direction: column;
}
.lp-vs-pair {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--n-200);
}
.lp-vs-card--accent .lp-vs-pair { border-top-color: rgba(255,255,255,0.2); }
[data-theme="dark"] .lp-vs-card--muted .lp-vs-pair { border-top-color: var(--n-700); }
.lp-vs-label {
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.lp-vs-card--accent .lp-vs-label { color: rgba(255,255,255,0.6); }
.lp-vs-pair > span:last-child {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}
.lp-vs-card--accent .lp-vs-pair > span:last-child {
  color: #fff;
  font-weight: var(--w-semibold);
}

/* ── Proposal flow: 3-step horizontal ── */
.lp-proposal-flow {
  display: flex; align-items: flex-start; justify-content: center;
  gap: var(--sp-6);
  margin: var(--sp-10) 0;
}
.lp-proposal-step {
  flex: 1;
  padding: var(--sp-8);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.lp-proposal-step-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--grad-start, #4338CA), var(--grad-end, #818CF8));
  border-radius: var(--radius-sm);
  color: var(--n-0);
  margin: 0 auto var(--sp-5);
}
.lp-proposal-step-title {
  font-size: var(--text-lg); font-weight: var(--w-bold);
  margin-bottom: var(--sp-3);
  color: var(--text);
}
.lp-proposal-step-desc {
  font-size: var(--text-sm); color: var(--text-secondary);
  line-height: 1.7;
}
.lp-proposal-arrow {
  display: flex; align-items: center;
  align-self: center;
  color: rgba(255,255,255,0.5);
}
.lp-proposal-point {
  text-align: center;
  font-size: var(--text-base);
  color: rgba(255,255,255,0.85);
  font-weight: var(--w-semibold);
  margin-top: var(--sp-8);
}

@media (max-width: 768px) {
  .lp-proposal-flow { flex-direction: column; align-items: center; }
  .lp-proposal-step { max-width: 100%; }
  .lp-proposal-arrow { transform: rotate(90deg); }
}

/* ── Roles: 4-column grid ── */
.lp-roles {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.lp-role {
  padding: var(--sp-6);
  background: var(--surface);
  border-radius: var(--radius);
}
.lp-role-header {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.lp-role-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--grad-start, #4338CA), var(--grad-end, #818CF8));
  border-radius: var(--radius-sm);
  color: var(--n-0);
  flex-shrink: 0;
}
.lp-role-name {
  font-size: var(--text-base); font-weight: var(--w-bold);
}
.lp-role-desc {
  font-size: var(--text-sm); color: var(--text-secondary);
  line-height: 1.7;
}

/* ── Panel mock: deformed editor panel ── */
.lp-panel-demo {
  display: flex; align-items: center; gap: var(--sp-8);
  margin-top: var(--sp-10);
  padding: var(--sp-6);
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
}
.lp-panel-mock {
  width: 300px; flex-shrink: 0;
  background: var(--n-50);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--n-200);
}
.lp-panel-tabs {
  display: flex;
  background: var(--n-0);
  border-bottom: 1px solid var(--n-200);
}
.lp-panel-tab {
  flex: 1;
  padding: var(--sp-2) 0;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  color: var(--text-secondary);
  cursor: default;
  position: relative;
}
.lp-panel-tab--active {
  color: var(--text);
  font-weight: var(--w-bold);
}
.lp-panel-tab--active::after {
  content: '';
  position: absolute; bottom: 0; left: 20%; right: 20%;
  height: 2px;
  background: var(--grad-start, #4338CA);
  border-radius: 2px;
}
.lp-panel-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 var(--sp-1);
  font-size: 10px; font-weight: var(--w-bold);
  background: var(--grad-start, #4338CA);
  color: var(--n-0);
  border-radius: var(--radius-full);
  margin-left: var(--sp-1);
  vertical-align: middle;
}
.lp-panel-body {
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.lp-panel-group-label {
  font-size: 10px;
  font-weight: var(--w-bold);
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  padding-top: var(--sp-2);
}
.lp-panel-group-label:first-child { padding-top: 0; }
.lp-panel-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-1) 0;
}
.lp-panel-label {
  font-size: var(--text-xs); color: var(--text);
  font-weight: var(--w-medium);
}
.lp-panel-ctrl {
  display: flex; gap: 1px;
  background: var(--n-200);
  border-radius: var(--radius-btn);
  overflow: hidden;
}
.lp-panel-seg {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--text-xs);
  background: var(--n-0);
  color: var(--text-secondary);
  cursor: default;
}
.lp-panel-seg--on {
  background: var(--grad-start, #4338CA);
  color: var(--n-0);
  font-weight: var(--w-semibold);
}
.lp-panel-toggle {
  width: 32px; height: 18px;
  border-radius: 9px;
  background: var(--n-200);
  position: relative;
  cursor: default;
}
.lp-panel-toggle::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--n-0);
  transition: transform 0.15s;
}
.lp-panel-toggle--on {
  background: var(--grad-start, #4338CA);
}
.lp-panel-toggle--on::after {
  transform: translateX(14px);
}
.lp-panel-note {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--sp-2);
}
.lp-panel-note-main {
  font-size: var(--text-lg); font-weight: var(--w-bold);
  line-height: 1.6;
}
.lp-panel-note-sub {
  font-size: var(--text-sm); color: var(--text-secondary);
  line-height: 1.8;
}

/* ── Features: 3 horizontal cards ── */
.lp-features {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.lp-feature {
  padding: var(--sp-6);
  background: var(--surface);
  border-radius: var(--radius);
}
.lp-feature-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--grad-start, #4338CA), var(--grad-end, #818CF8));
  border-radius: var(--radius-sm);
  color: var(--n-0);
  margin-bottom: var(--sp-4);
}
.lp-feature-title {
  font-size: var(--text-base); font-weight: var(--w-bold);
  margin-bottom: var(--sp-2);
}
.lp-feature-desc {
  font-size: var(--text-sm); color: var(--text-secondary);
  line-height: 1.7;
}

/* ── Core pillars — white cards on gradient ── */
.lp-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.lp-pillar {
  padding: 40px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.lp-pillar-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--grad-start, #4338CA), var(--grad-end, #818CF8));
  border-radius: var(--radius-sm);
  color: var(--n-0);
  margin-bottom: var(--sp-5);
}
.lp-pillar-title {
  font-size: var(--text-xl); font-weight: var(--w-bold);
  margin-bottom: var(--sp-3);
  color: var(--text);
  letter-spacing: -0.5px;
}
.lp-pillar-desc {
  font-size: var(--text-base); color: var(--text-secondary);
  line-height: 1.8;
}

/* ── FAQ ── */
.lp-faq {
  max-width: 720px;
  display: flex; flex-direction: column;
}
.lp-faq-item {
  border-bottom: 1px solid var(--border-color);
}
.lp-faq-q {
  padding: var(--sp-5) 0;
  font-size: var(--text-base); font-weight: var(--w-semibold);
  cursor: pointer; list-style: none;
}
.lp-faq-q::-webkit-details-marker { display: none; }
.lp-faq-q::after {
  content: '+'; float: right;
  font-size: var(--text-lg); color: var(--text-tertiary);
  font-weight: var(--w-normal);
  transition: transform 0.2s;
}
details[open] .lp-faq-q::after {
  content: '\2212';
}
.lp-faq-a {
  font-size: var(--text-sm); color: var(--text-secondary);
  line-height: 1.8;
  padding: 0 0 var(--sp-5);
}

/* ── CTA ── */
.lp-cta {
  text-align: center;
  padding: 80px 0;
}
.lp-cta-title {
  font-family: var(--font-display);
  font-size: 48px; font-weight: var(--w-black);
  letter-spacing: -1.5px;
  margin-bottom: var(--sp-4);
  color: var(--n-0);
}
.lp-cta-desc {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--sp-8);
  line-height: 1.8;
}
.lp-cta-sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  margin-top: var(--sp-4);
}

/* ── Footer ── */
.lp-footer {
  text-align: center; padding: var(--sp-10) var(--sp-6) var(--sp-8);
  color: var(--text-tertiary); font-size: var(--text-xs);
  border-top: 1px solid var(--border-color);
}
.lp-footer-links {
  display: flex; justify-content: center; gap: var(--sp-6);
  margin-bottom: var(--sp-3);
}
.lp-footer-links a {
  color: var(--text-tertiary); text-decoration: none;
  font-size: var(--text-sm);
}
.lp-footer-links a:hover { color: var(--text-secondary); }
.lp-footer-copy { color: var(--text-tertiary); }

/* ── LP Dark Mode ── */
/* 図の内部（.lp-arch-*、.lp-flat-*）はスライドプレビューなのでダークモードでも変えない */
[data-theme="dark"] .lp-section--warm { background: var(--n-850); }
[data-theme="dark"] .lp-arch-hdr,
[data-theme="dark"] .lp-arch-ftr,
[data-theme="dark"] .lp-arch-card,
[data-theme="dark"] .lp-arch-blk-group {
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .lp-num {
  box-shadow: 0 0 0 3px var(--n-850);
}
[data-theme="dark"] .lp-arch-strut { background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.15) 0, rgba(255,255,255,0.15) 3px, transparent 3px, transparent 7px); }
/* System preference dark mode fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .lp-section--warm { background: var(--n-850); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .lp-num { box-shadow: 0 0 0 3px var(--n-850); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .lp-arch-strut { background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.15) 0, rgba(255,255,255,0.15) 3px, transparent 3px, transparent 7px); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .lp-step-icon { background: var(--n-800); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .lp-vs-card--muted { background: var(--n-800); border-color: var(--n-700); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .lp-vs-card--muted .lp-vs-pair { border-top-color: var(--n-700); }
}

/* ── LP Responsive ── */
@media (max-width: 1024px) {
  .lp-pillars { grid-template-columns: 1fr; }
  .lp-vs { grid-template-columns: 1fr; }
  .lp-features { grid-template-columns: 1fr 1fr; }
  .lp-roles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .lp-inner { padding: 0 var(--sp-4); }
  .lp-hero { padding: 72px 0 56px; }
  .lp-hero-title { font-size: 40px; letter-spacing: -1px; }
  .lp-hero-cta { flex-direction: column; }
}
@media (max-width: 480px) {
  .lp-hero { padding: 56px 0 40px; }
  .lp-hero-title { font-size: 28px; letter-spacing: -0.5px; line-height: 1.25; }
  .lp-hero-sub { font-size: var(--text-base); }
  .lp-section { padding: 48px 0 36px; }
  .lp-section-title { font-size: 32px; letter-spacing: -0.5px; }
  .lp-header-bar { font-size: 32px; }
  .lp-step { flex-direction: column; gap: var(--sp-3); }
  .lp-step-num { font-size: 40px; width: auto; text-align: left; }
  .lp-step-title { font-size: var(--text-lg); }
  .lp-step-visual { display: none; }
  .lp-origin-meta { flex-direction: column; gap: var(--sp-3); }
  .lp-vs { grid-template-columns: 1fr; }
  .lp-vs-card,
  .lp-pillar { padding: 28px 24px; }
  .lp-features { grid-template-columns: 1fr; }
  .lp-pillars { grid-template-columns: 1fr; }
  .lp-roles { grid-template-columns: 1fr; }
  .lp-panel-demo { flex-direction: column; }
  .lp-panel-mock { width: 100%; }
  .lp-cta { padding: 56px 0; }
  .lp-cta-title { font-size: 32px; }
}

/* Landing org cards */
.dash-card {
  background: var(--card-bg); border-radius: var(--card-radius);
  padding: var(--sp-6); transition: box-shadow var(--ease), transform var(--ease);
  color: inherit; display: flex; flex-direction: column; gap: var(--sp-3);
  text-decoration: none; min-height: 100px;
}
.dash-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dash-card-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--accent-light); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.card-title { font-size: var(--text-base); font-weight: var(--w-semibold); }
.card-sub { font-size: var(--text-xs); color: var(--text-secondary); }

/* ── Interactive card — クリック可能なカードの共通アフォーダンス ── */
/* モバイル時にリスト行 (.row-interactive) の右端に > アイコンを表示して
   タップ可能であることを明示 (#493) */
@media (max-width: 768px) {
  .row-interactive {
    position: relative;
    padding-right: 32px !important;
  }
  .row-interactive::after {
    content: '›';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
  }
}
.card-interactive {
  cursor: pointer;
  transition: box-shadow var(--ease), background var(--ease);
}
.card-interactive:hover {
  box-shadow: var(--shadow-md);
}
.card-interactive:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.card-interactive:active {
  background: var(--surface-hover);
}
/* リスト行向け（背景変化のみ、影なし） */
.row-interactive {
  cursor: pointer;
  transition: background var(--ease);
}
.row-interactive:hover {
  background: var(--surface-hover);
}
.row-interactive:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring);
}


/* ═══════════════════════════════════════════
   12. VIEW COMPONENTS
   デザイン意図:
   - サイズ = 重要度 (KPI 48px > 見出し 32px > セクション 20px > 本文 15px)
   - 余白 = グループ (セクション間 64px > グループ内 24px > 要素内 12px)
   - 色 = カテゴリ (アクセント4色をKPIに集中)
   - カード = 16px角丸、背景色差で浮かせる、hover時のみ控えめshadow
   ═══════════════════════════════════════════ */

/* ── Section card — すべてのコンテンツを包む基本カード ── */
.section-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
}
.section-card + .section-card {
  margin-top: var(--content-gap);
}

/* ── View title ── */
.view-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--w-black);
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.view-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--sp-1);
}
.view-header {
  display: flex;
  flex-direction: column;
}


/* ═══ Overview ═══ */

.overview-main { min-width: 0; }

/* Greeting */
.overview-greeting {
  margin-bottom: var(--content-gap);
}
.overview-greeting-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--w-black);
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1.1;
}

/* KPI cards — 最も重要。大きく、色で差別化 */
.overview-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--content-gap);
  margin-bottom: var(--content-gap);
}
.overview-kpi-card {
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  text-decoration: none;
  color: inherit;
  background: var(--card-bg);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}
.overview-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* KPIアイコンは accent 統一 (4色使い分けは意味のないカラフル化) */
.overview-kpi-card .overview-kpi-icon {
  background: var(--accent-light);
  color: var(--accent);
}
.overview-kpi-info { min-width: 0; }
.overview-kpi-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-kpi);
  font-weight: var(--w-black);
  color: var(--text);
  line-height: 1;
  letter-spacing: -2px;
}
.overview-kpi-meta {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.overview-kpi-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--sp-1);
  font-weight: var(--w-medium);
}

/* Section headers */
.dash-section {
  margin-bottom: var(--content-gap);
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-4);
}
.section-title {
  font-size: var(--text-lg);
  font-weight: var(--w-bold);
  color: var(--text);
}
.dash-section-title {
  font-size: var(--text-lg);
  font-weight: var(--w-bold);
  color: var(--text);
  margin-bottom: var(--sp-4);
}
.dash-section-title-count {
  font-size: var(--text-sm);
  font-weight: var(--w-normal);
  color: var(--text-tertiary);
  margin-left: var(--sp-2);
}

/* Overview link — ボタンスタイル */
.overview-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  font-family: var(--font);
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--w-semibold);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  transition: background var(--ease);
}
.overview-link:hover { background: var(--accent-light); }
.overview-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Recent work cards — クリーンな白カード */
.overview-recent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--content-gap);
}
.overview-recent-item {
  display: flex;
  flex-direction: column;
  border-radius: var(--card-radius);
  text-decoration: none;
  color: inherit;
  background: var(--card-bg);
  overflow: hidden;
}
.overview-recent-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-hover);
  border-bottom: 1px solid var(--border-color);
}
.overview-recent-thumb--empty {
  background: var(--surface-hover);
}
.overview-recent-body {
  display: flex;
  flex-direction: column;
  padding: var(--card-padding);
  min-height: 96px;
  justify-content: space-between;
}
.overview-recent-title {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--w-bold);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: var(--sp-1);
}
.overview-recent-slides {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: auto;
}
.overview-recent-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-4);
}
.overview-recent-proj {
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: var(--w-semibold);
}
.overview-recent-time {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Template shortcut */
.overview-template-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-3);
}
.overview-template-item {
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  text-decoration: none;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
}
/* Progress bar */
.progress-bar {
  height: 4px;
  background: var(--surface-inset);
  border-radius: 2px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width var(--ease-slow);
}

/* Deadline alerts (main area) */
.dash-deadline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) 0;
}
.dash-deadline + .dash-deadline {
  border-top: 1px solid var(--border-subtle);
}
.dash-deadline-name {
  font-size: var(--text-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-right: var(--sp-4);
}
.dash-deadline-due {
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  flex-shrink: 0;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
}
.dash-deadline--soon {
  color: var(--warning);
  background: var(--warning-bg);
}
.dash-deadline--past {
  color: var(--danger);
  background: var(--danger-bg);
}


/* ═══ Slides View ═══ */

.slides-view { }
.slides-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--content-gap);
}
.slides-main { min-width: 0; }

/* Filter sidebar */
.slides-filter-sidebar {
  min-width: 0;
  align-self: flex-start;
  position: sticky;
  top: var(--sp-10);
}
.slides-filter-group {
  margin-bottom: var(--sp-6);
}
.slides-filter-group:last-child {
  margin-bottom: 0;
}
.slides-filter-group-title {
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.slides-filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: all var(--ease);
}
.slides-filter-item:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.slides-filter-item--active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: var(--w-semibold);
}
.slides-filter-count {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.slides-filter-item--active .slides-filter-count {
  color: var(--accent);
}
.slides-filter-item--drop-target {
  background: var(--brand-light, rgba(99,102,241,0.08));
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}
.slides-row--dragging { opacity: 0.4; }

/* Toolbar */
.slides-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--content-gap);
  gap: var(--sp-3);
}
.slides-toolbar-actions {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}
.slides-result-count {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}
.slides-view-toggle {
  display: flex;
  background: var(--surface-inset);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.slides-view-btn { border-radius: calc(var(--radius-sm) - 2px); border-color: transparent; }
.slides-view-btn--active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* Table — カード内に収まる */
.slides-table { }
.slides-table-header {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--card-padding);
  margin: calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding)) 0;
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  color: var(--text-tertiary);
  border-bottom: 2px solid var(--border-color);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.slides-table-row {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--card-padding);
  margin: 0 calc(-1 * var(--card-padding));
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.slides-table-row:last-child {
  margin-bottom: calc(-1 * var(--card-padding));
  border-radius: 0 0 var(--card-radius) var(--card-radius);
}
.slides-table-row + .slides-table-row {
  border-top: 1px solid var(--border-subtle);
}
.slides-item-title {
  font-weight: var(--w-semibold);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slides-item-title:hover {
  color: var(--accent);
}

/* Grid */
.slides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--content-gap);
}
.slides-grid-item {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid var(--border-color);
}
.slides-grid-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-hover);
  border-bottom: 1px solid var(--border-color);
}
.slides-grid-body {
  padding: var(--card-padding);
}
.slides-grid-title {
  font-size: var(--text-base);
  font-weight: var(--w-bold);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  margin-bottom: var(--sp-2);
}
.slides-grid-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.slides-grid-proj {
  color: var(--text-secondary);
}
.slides-grid-item {
  position: relative;
}
.slides-grid-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.slides-grid-action {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  opacity: 0;
  transition: opacity var(--ease);
}
.slides-grid-item:hover .slides-grid-action {
  opacity: 1;
}
.slides-row-actions {
  display: flex;
  justify-content: flex-end;
}

/* Action dropdown menu */
.slides-action-menu {
  z-index: 1000;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--sp-2) 0;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.slides-action-menu-label {
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  color: var(--text-tertiary);
  padding: var(--sp-2) var(--sp-4);
}
.slides-action-menu-item {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  cursor: pointer;
  color: var(--text);
}
.slides-action-menu-item:hover {
  background: var(--surface-hover);
}
.slides-action-menu-item--muted {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  padding: var(--sp-2) var(--sp-4);
}
.slides-action-menu-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--sp-2) 0;
}

/* Prompt dialog */
.prompt-input {
  margin: var(--sp-4) 0;
}
.prompt-textarea {
  margin: var(--sp-4) 0;
  width: 100%;
  min-height: 80px;
  resize: vertical;
}


/* ═══ Projects View ═══ */

.projects-view { }
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--content-gap);
}

.pv-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.pv-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}
.pv-card-name {
  font-size: var(--text-lg);
  font-weight: var(--w-bold);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.pv-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}
.pv-card-stats {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.pv-card-progress { flex: 1; }
.pv-card-deadline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
}
.pv-card-deadline--past { color: var(--danger); background: var(--danger-bg); }
.pv-card-deadline--soon { color: var(--warning); background: var(--warning-bg); }
.pv-card-deadline--normal { color: var(--text-tertiary); }
.pv-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.pv-card-docs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--sp-3);
}
.pv-card-doc {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
}
.pv-card-doc:hover { color: var(--accent); }
.pv-card-doc-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.pv-card-doc-meta {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  flex-shrink: 0;
}
.pv-card-more {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  padding: var(--sp-2) 0;
}
.pv-card-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.pv-edit-btn { opacity: 0; transition: opacity var(--ease); }
.pv-card:hover .pv-edit-btn { opacity: 1; }
.pv-card-add { align-self: flex-start; }
.projects-unassigned { margin-top: var(--content-gap); }


/* ═══ Members View ═══ */

/* Invite link dialog */
.invite-link-row { display: flex; gap: var(--sp-2); }
.invite-link-row .app-input { flex: 1; min-width: 0; font-family: monospace; font-size: var(--text-sm); }

.members-view { }
.members-group {
  margin-bottom: var(--content-gap);
}
.members-group:last-child {
  margin-bottom: 0;
}
.members-group-header {
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.members-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--card-padding);
  margin: 0 calc(-1 * var(--card-padding));
  transition: background var(--ease);
}
.members-row:hover { background: var(--surface-hover); }
.members-row:first-child {
  margin-top: calc(-1 * var(--card-padding));
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.members-row:last-child {
  margin-bottom: calc(-1 * var(--card-padding));
  border-radius: 0 0 var(--card-radius) var(--card-radius);
}
.members-row:only-child {
  margin-top: calc(-1 * var(--card-padding));
  margin-bottom: calc(-1 * var(--card-padding));
  border-radius: var(--card-radius);
}
.members-row + .members-row {
  border-top: 1px solid var(--border-subtle);
}
.members-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  font-weight: var(--w-bold);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.members-avatar--editable {
  cursor: pointer;
  transition: opacity 0.15s;
}
.members-avatar--editable:hover {
  opacity: 0.7;
}
.members-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.members-info { flex: 1; min-width: 0; }
.members-name {
  font-weight: var(--w-semibold);
  font-size: var(--text-base);
  color: var(--text);
}
.members-name--editable {
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  margin: -2px -6px;
  transition: background var(--ease);
}
.members-name--editable:hover {
  background: var(--surface-hover);
}
.members-email {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 1px;
}
.members-role-badge { flex-shrink: 0; }
.members-actions { flex-shrink: 0; }

/* ── Permissions Summary ── */
.permissions-summary {
  margin-bottom: var(--content-gap);
}
.permissions-summary-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  padding: var(--sp-3) 0;
}
.permissions-summary-toggle::-webkit-details-marker { display: none; }
.permissions-summary-toggle::after {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--text-tertiary);
  border-bottom: 1.5px solid var(--text-tertiary);
  transform: rotate(-45deg);
  transition: transform var(--ease);
  margin-left: var(--sp-1);
}
.permissions-summary[open] > .permissions-summary-toggle::after {
  transform: rotate(45deg);
}
.permissions-summary-body {
  overflow-x: auto;
}
.permissions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}
.permissions-table th,
.permissions-table td {
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
}
.permissions-table th:first-child,
.permissions-table td:first-child {
  text-align: left;
  font-weight: var(--w-medium);
  color: var(--text-secondary);
}
.permissions-table th {
  font-weight: var(--w-semibold);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.permissions-table tbody td {
  color: var(--text-tertiary);
}
.permissions-table .perm-yes { color: var(--success, #22c55e); }
.permissions-table .perm-no  { color: var(--text-tertiary); opacity: 0.5; }

/* ── Invite Role Description ── */
.invite-role-desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--sp-1);
  min-height: 1.4em;
}


/* ═══ Settings View ═══ */

.settings-view {
  max-width: 600px;
}
.settings-section {
  margin-bottom: var(--content-gap);
}
.settings-field {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
}
.settings-field + .settings-field {
  border-top: 1px solid var(--border-subtle);
}
.settings-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  width: 120px;
  flex-shrink: 0;
}
.settings-value {
  font-size: var(--text-sm);
  color: var(--text);
}
.settings-edit-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex: 1;
}
.settings-theme-selector {
  display: flex;
  gap: var(--sp-2);
}
.settings-theme-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: all var(--ease);
}
.settings-theme-btn:hover {
  border-color: var(--border-color);
  color: var(--text);
}
.settings-theme-btn--active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}
.settings-legal {
  display: flex;
  gap: var(--sp-6);
}
.settings-legal-link {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-decoration: none;
}
.settings-legal-link:hover {
  color: var(--text);
}

/* Sidebar user link */
.sidebar-user-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user-link:hover {
  color: var(--text);
}
.sidebar-footer-btn {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
}
.sidebar-footer-btn:hover {
  color: var(--text);
}

/* Feedback banner — sidebar 下部にバナー化 (#468) */
.sidebar-feedback-banner {
  margin: var(--sp-4) var(--sp-3) var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.sidebar-feedback-text {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}
.sidebar-feedback-btn {
  width: 100%;
  justify-content: center;
}


/* ═══ Brand View ═══ */

.brand-view { }

.brand-section {
  margin-bottom: var(--content-gap);
}
.brand-section:last-child {
  margin-bottom: 0;
}
.brand-section-title {
  font-size: var(--text-lg);
  font-weight: var(--w-bold);
  color: var(--text);
  margin-bottom: var(--sp-4);
}
.brand-section-desc {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: calc(-1 * var(--sp-2));
  margin-bottom: var(--sp-4);
}

/* ── #518 Phase G: AI 提案 ── */
.brand-palette-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.brand-palette-head .brand-section-title {
  margin-bottom: 0;
}
.brand-ai-loading {
  display: flex;
  justify-content: center;
  padding: var(--sp-6) 0;
  font-size: 32px;
  color: var(--text-tertiary);
}
.brand-ai-preview {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}
.brand-ai-swatch-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-btn);
  background: var(--surface-inset);
}
.brand-ai-swatch {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-btn);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}
.brand-ai-swatch-info {
  flex: 1;
}
.brand-ai-swatch-label {
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  color: var(--text);
}
.brand-ai-swatch-hex {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-family: monospace;
}

/* ── #518 Phase B: Level Tabs ── */
.brand-level-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-inset);
  border-radius: var(--radius-btn);
  margin-bottom: var(--sp-3);
}
.brand-level-tab {
  padding: var(--sp-1) var(--sp-3);
  border: 0;
  background: transparent;
  border-radius: calc(var(--radius-btn) - 2px);
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.brand-level-tab:hover {
  color: var(--text);
}
.brand-level-tab.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.brand-level-desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-3);
}

/* Level に応じた palette item 表示制御 */
.brand-palette[data-active-level="1"] .brand-palette-item[data-level="2"],
.brand-palette[data-active-level="1"] .brand-palette-item[data-level="3"],
.brand-palette[data-active-level="2"] .brand-palette-item[data-level="3"] {
  display: none;
}

/* #518 Phase D: 機能色セクションは L3 のときだけ表示 */
.brand-function-colors[data-active-level="1"],
.brand-function-colors[data-active-level="2"] {
  display: none;
}
.brand-section-badge {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 2px var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  background: var(--surface-inset);
  color: var(--text-tertiary);
  border-radius: 999px;
  vertical-align: middle;
}

/* ── #518 Phase H: WCAG コントラストバッジ ── */
.brand-contrast-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  flex-shrink: 0;
  line-height: 1.4;
}
.brand-contrast-badge i {
  font-size: 12px;
}
.brand-contrast-badge--aaa { background: color-mix(in srgb, #059669 12%, transparent); color: #047857; }
.brand-contrast-badge--aa  { background: color-mix(in srgb, #16A34A 12%, transparent); color: #15803D; }
.brand-contrast-badge--low { background: color-mix(in srgb, #D97706 14%, transparent); color: #B45309; }
.brand-contrast-badge--bad { background: color-mix(in srgb, #DC2626 14%, transparent); color: #B91C1C; }

/* Palette */
.brand-palette {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.brand-palette-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-btn);
  transition: background var(--ease);
  cursor: pointer;
}
.brand-palette-item:hover {
  background: var(--surface-hover);
}
.brand-palette-info { flex: 1; min-width: 0; }
.brand-palette-label {
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  color: var(--text);
}
.brand-palette-desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 1px;
}
.brand-palette-hex {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-family: monospace;
  flex-shrink: 0;
}
.brand-swatch {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-btn);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
  transition: transform var(--ease), box-shadow var(--ease);
}
.brand-palette-item:hover .brand-swatch {
  transform: scale(1.1);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.15);
}
.brand-color-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.brand-palette-edit {
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--ease);
}
.brand-palette-item:hover .brand-palette-edit {
  opacity: 1;
}
.brand-save {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* ── Logo Upload ── */

.brand-logo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--content-gap);
}

.brand-logo-slot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.brand-logo-label {
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--text-secondary);
}

.brand-logo-preview {
  aspect-ratio: 3 / 1;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: opacity 0.15s;
}

.brand-logo-preview:hover {
  opacity: 0.8;
}

.brand-logo-slot--dark .brand-logo-preview {
  background: var(--n-800);
}

.brand-logo-slot--light .brand-logo-preview {
  background: var(--n-100);
}

.brand-logo-img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

.brand-logo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.brand-logo-empty i {
  font-size: 24px;
}

.brand-logo-remove {
  align-self: flex-start;
}

/* #518 Phase F: ロゴから色抽出ボタン */
.brand-logo-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}
.brand-logo-actions-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
/* Spinner (既存 editor.css の `.spin` を dashboard でも使えるよう同等定義) */
.spin {
  display: inline-block;
  animation: app-spin 1s linear infinite;
}
@keyframes app-spin {
  to { transform: rotate(360deg); }
}

/* ── Icon Weight Picker ── */

.brand-icon-weights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.brand-icon-weight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.brand-icon-weight:hover {
  border-color: var(--n-300);
}
.brand-icon-weight--selected {
  border-color: var(--accent);
  background: var(--accent-light);
}
.brand-icon-weight-icons {
  display: flex;
  gap: var(--sp-3);
  font-size: 22px;
  color: var(--text-secondary);
}
.brand-icon-weight--selected .brand-icon-weight-icons {
  color: var(--accent);
}
.brand-icon-weight-label {
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  color: var(--text-tertiary);
}
.brand-icon-weight--selected .brand-icon-weight-label {
  color: var(--accent);
}

/* ── Slide Preview (iframe-based) ── */

.brand-preview-slides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--content-gap);
}
.brand-slide-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.brand-slide-label {
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  color: var(--text-tertiary);
}
.brand-slide-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--surface-inset);
}
.brand-slide-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1200px;
  height: 675px;
  border: none;
  transform-origin: 0 0;
  display: block;
  pointer-events: none;
}


/* ═══ Admin Panel (#532) ═══ */

.admin-migration-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: color-mix(in srgb, #D97706 10%, var(--surface));
  border: 1px solid color-mix(in srgb, #D97706 30%, transparent);
  border-radius: var(--radius);
  margin-bottom: var(--sp-5);
}
.admin-migration-text {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  flex: 1;
}
.admin-migration-text i {
  font-size: 22px;
  color: #B45309;
  flex-shrink: 0;
  margin-top: 2px;
}
.admin-migration-list {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-family: monospace;
  margin-top: 4px;
  word-break: break-all;
}

.admin-bootstrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.admin-bootstrap .ph { font-size: 24px; }

.admin-blocked {
  max-width: 480px;
  margin: 80px auto;
  padding: 48px var(--sp-6);
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(15,23,42,0.05);
}
.admin-blocked .ph {
  font-size: 56px;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-3);
}
.admin-blocked h1 {
  font-size: var(--text-xl);
  font-weight: var(--w-bold);
  color: var(--text);
  margin-bottom: var(--sp-3);
}
.admin-blocked p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--sp-5);
  line-height: 1.6;
}

.admin-header {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 10;
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--text);
  font-weight: var(--w-bold);
}
.admin-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, #4338CA 0%, #6366F1 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.05em;
}
.admin-brand-name { font-size: var(--text-base); }
.admin-brand-badge {
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #DC2626;
  color: #fff;
}
.admin-nav {
  display: flex;
  gap: 2px;
  margin-left: var(--sp-4);
}
.admin-nav-item {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-btn);
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-nav-item:hover { background: var(--surface-hover); color: var(--text); }
.admin-nav-item.is-active {
  background: var(--surface-inset);
  color: var(--text);
  font-weight: var(--w-semibold);
}
.admin-header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.admin-link {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.admin-link:hover { color: var(--text); }

.admin-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5);
}
.admin-section { margin-bottom: var(--sp-6); }
.admin-section-title {
  font-size: var(--text-xl);
  font-weight: var(--w-bold);
  margin-bottom: var(--sp-4);
  color: var(--text);
}
.admin-section-count {
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--text-tertiary);
  margin-left: var(--sp-2);
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.admin-stat {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.admin-stat-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--w-medium);
  letter-spacing: 0.02em;
}
.admin-stat-num {
  font-size: 36px;
  font-weight: var(--w-bold);
  color: var(--text);
  font-family: var(--font-num, 'Inter', sans-serif);
  letter-spacing: -0.02em;
  margin-top: 4px;
}

.admin-loading {
  padding: var(--sp-6);
  text-align: center;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}
.admin-loading .ph { font-size: 20px; }
.admin-empty {
  padding: var(--sp-6);
  text-align: center;
  color: var(--text-tertiary);
}
.admin-error {
  padding: var(--sp-4);
  background: color-mix(in srgb, #DC2626 8%, var(--surface));
  border: 1px solid color-mix(in srgb, #DC2626 30%, transparent);
  border-radius: var(--radius);
  color: #991B1B;
  font-size: var(--text-sm);
}

.admin-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table th, .admin-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border-subtle);
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table th {
  background: var(--surface-inset);
  font-weight: var(--w-semibold);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-table th.num, .admin-table td.num { text-align: right; font-family: var(--font-num, 'Inter', sans-serif); }
.admin-table td.muted { color: var(--text-tertiary); }
.admin-table tbody tr:hover { background: var(--surface-hover); }
.admin-org-link {
  color: var(--text);
  text-decoration: none;
  font-weight: var(--w-semibold);
}
.admin-org-link:hover { color: var(--brand, #4338CA); text-decoration: underline; }
.admin-table code {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: var(--surface-inset);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Admin: 運営者追加フォーム ── */
.admin-add-form {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.admin-add-input {
  flex: 1 1 220px;
  min-width: 200px;
}
.admin-self-tag {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-inset);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
}
.admin-remove-btn {
  padding: 4px 8px;
  font-size: var(--text-xs);
}

/* ── Admin Feedback (Kadai 参考) ── */
.admin-section-desc {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-4);
}
.admin-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #DC2626;
  color: #fff;
  font-size: 11px;
  font-weight: var(--w-bold);
  line-height: 1;
  margin-left: 6px;
}
/* HTML hidden 属性を効かせる (display: inline-flex を上書き) */
.admin-nav-badge[hidden] { display: none; }

.admin-filters {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  margin-bottom: var(--sp-4);
}
.admin-filter-pill {
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-filter-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.admin-filter-pill select {
  padding: 4px 8px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.admin-filters #fb-reload { margin-left: auto; }

/* フィードバック table 行 */
.fb-table tbody tr { cursor: pointer; }
.fb-table tbody tr:hover { background: var(--surface-hover); }
.fb-body-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text);
  line-height: 1.5;
}
.fb-body-cell { max-width: 0; }
.fb-meta-cell { font-size: var(--text-xs); }
.fb-org-tag code { font-size: 10px; }

/* status / type バッジ */
.fb-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--w-semibold);
  line-height: 1.4;
  white-space: nowrap;
}
.fb-status--new         { background: color-mix(in srgb, #4338CA 12%, transparent); color: #4338CA; }
.fb-status--in-progress { background: color-mix(in srgb, #D97706 14%, transparent); color: #B45309; }
.fb-status--resolved    { background: color-mix(in srgb, #16A34A 12%, transparent); color: #15803D; }
.fb-status--wontfix     { background: var(--surface-inset); color: var(--text-tertiary); }
.fb-status--duplicate   { background: var(--surface-inset); color: var(--text-tertiary); }

.fb-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: var(--w-semibold);
}
.fb-type i { font-size: 13px; }
.fb-type--bug     { color: #DC2626; }
.fb-type--feature { color: #0891B2; }
.fb-type--other   { color: var(--text-tertiary); }

/* 詳細モーダル */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.admin-modal {
  width: 680px;
  max-width: 100%;
  max-height: 90vh;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-modal-head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.admin-modal-title {
  font-size: var(--text-lg);
  font-weight: var(--w-semibold);
}
.admin-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-tertiary);
  padding: 0;
}
.admin-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-5);
}
.admin-modal-foot {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--surface-inset);
}

.fb-modal-badges {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 6px;
}
.fb-modal-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.fb-modal-org {
  font-size: var(--text-xs);
  margin-top: 4px;
}
.fb-modal-org code {
  font-size: 10px;
  color: var(--text-tertiary);
  background: var(--surface-inset);
  padding: 1px 6px;
  border-radius: 4px;
}

.fb-field { margin-bottom: var(--sp-4); }
.fb-field--half { /* placeholder */ }
.fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.fb-label {
  display: block;
  font-size: 11px;
  font-weight: var(--w-semibold);
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.fb-body-view {
  padding: var(--sp-3);
  background: var(--surface-inset);
  border-radius: var(--radius-btn);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
}
.fb-page-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 6px;
}
.fb-page-hint code { font-size: 10px; }

.fb-input, .fb-select, .fb-textarea {
  width: 100%;
  padding: 6px 10px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  background: var(--surface);
  color: var(--text);
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}
.fb-textarea { resize: vertical; }
.fb-select { cursor: pointer; }
.fb-gh-row { display: flex; gap: 6px; }
.fb-gh-link {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-subtle);
  color: var(--brand, #4338CA);
  text-decoration: none;
  font-size: 12px;
}

.fb-unassigned {
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
}
.fb-assignee {
  font-size: 11px;
  color: var(--text);
  padding: 1px 6px;
  background: color-mix(in srgb, #4338CA 10%, transparent);
  border-radius: 4px;
  display: inline-block;
}

/* ═══ Templates View ═══ */

/* ── Template view ── */
.templates-view { }

/* section-header toggle variant (used by tags) */
.section-header--toggle { cursor: pointer; }
.section-header--toggle:hover .section-title { color: var(--accent); }
.section-desc {
  font-size: var(--text-sm);
  font-weight: var(--w-normal);
  color: var(--text-tertiary);
  margin-left: var(--sp-2);
}

/* Scope groups (inside section-card) */
.tmpl-scope-group { }
.tmpl-scope-group + .tmpl-scope-group { border-top: 1px solid var(--border-subtle); padding-top: var(--sp-4); margin-top: var(--sp-4); }
.tmpl-scope-label {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-3);
}
.tmpl-scope-empty {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  padding: var(--sp-4) 0;
}

/* ── Theme cards — 入れ物（複数スライドを包含） ── */
.tmpl-theme-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.tmpl-theme-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
}
.tmpl-theme-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.tmpl-theme-name {
  font-weight: var(--w-bold);
  font-size: var(--text-base);
}
.tmpl-theme-meta {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  flex: 1;
}
.tmpl-theme-slides {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  padding-bottom: var(--sp-1);
}
.tmpl-theme-slide {
  flex-shrink: 0;
  text-align: center;
}
.tmpl-theme-slide-thumb {
  width: 160px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--n-100);
}
.tmpl-theme-slide-num {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--sp-1);
}

/* ── Layout grid — 独立した1枚カード ── */
.tmpl-lo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-4);
}
.tmpl-lo-card {
  text-align: center;
}
.tmpl-lo-thumb-wrap {
  position: relative;
}
.tmpl-lo-thumb {
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--n-100);
}
.tmpl-lo-info {
  margin-top: var(--sp-2);
}
.tmpl-lo-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
}
.tmpl-lo-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  margin-top: 2px;
}
.tmpl-lo-badge--theme {
  background: var(--accent-light);
  color: var(--accent);
}
.tmpl-lo-badge--standalone {
  background: var(--surface-inset);
  color: var(--text-tertiary);
}
.tmpl-lo-menu-btn {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  opacity: 0;
  transition: opacity var(--ease);
}
.tmpl-lo-card:hover .tmpl-lo-menu-btn { opacity: 1; }

/* Tags section */
.tmpl-tag-count {
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  background: var(--surface-inset);
  border-radius: var(--radius-full);
  padding: var(--sp-1) var(--sp-2);
  min-width: 24px;
  text-align: center;
  color: var(--text-secondary);
}
.tmpl-tags-body { }
.tmpl-tags-list {
  display: flex;
  flex-direction: column;
}
.tmpl-tag-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}
.tmpl-tag-item + .tmpl-tag-item { border-top: 1px solid var(--border-subtle); }
.tmpl-tag-name {
  font-weight: var(--w-semibold);
  font-size: var(--text-sm);
  flex: 1;
}
.tmpl-tag-add { margin-top: var(--sp-3); }
.tmpl-tag-add-row {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-3);
  flex-wrap: wrap;
}
.tmpl-tag-add-row .app-input { width: auto; }
.tmpl-tag-add-row .app-input--grow { flex: 1; min-width: 120px; }
.tmpl-tag-add-row .app-input--fixed { width: 140px; }
.tmpl-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  white-space: nowrap;
}


/* ═══ Dashboard Shared ═══ */

/* Content wrapper */
.dash-content {
  padding: var(--content-gap);
  max-width: 1400px;
  margin: 0 auto;
}

/* Hero */
.dash-hero {
  background: var(--accent);
  padding: var(--sp-10);
  color: var(--n-0);
}
.dash-hero-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-hero-left {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.dash-hero-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
}
.dash-hero-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--w-black);
  letter-spacing: -0.5px;
  line-height: 1;
}
.dash-hero-numbers {
  display: flex;
  gap: var(--sp-8);
}
.dash-hero-num { text-align: center; }
.dash-hero-num-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-kpi);
  font-weight: var(--w-black);
  line-height: 1;
  letter-spacing: -2px;
}
.dash-hero-num-label {
  display: block;
  font-size: var(--text-xs);
  opacity: 0.6;
  margin-top: var(--sp-1);
}

/* Setup banner */
.dash-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--card-padding);
  background: var(--accent-light);
  border-radius: var(--radius);
  margin-bottom: var(--content-gap);
}
.dash-banner--setup {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
}
.dash-banner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-banner-title {
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  color: var(--text);
}
.dash-banner-text {
  font-size: var(--text-sm);
  color: var(--text);
}
.dash-banner-progress {
  font-size: var(--text-xs);
  font-weight: var(--w-bold);
  color: var(--accent);
}
.dash-banner-link {
  font-size: var(--text-sm);
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--w-semibold);
}
.setup-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.setup-step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}
.setup-step:hover {
  background: rgba(0,0,0,0.04);
}
.setup-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  flex-shrink: 0;
  color: var(--muted);
}
.setup-step--done .setup-step-icon {
  background: var(--accent);
  color: #fff;
}
.setup-step-body {
  display: flex;
  flex-direction: column;
}
.setup-step-label {
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
}
.setup-step--done .setup-step-label {
  text-decoration: line-through;
  color: var(--muted);
}
.setup-step-desc {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Toolbar */
.dash-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  gap: var(--sp-3);
}
.dash-toolbar-actions {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}

/* Search */
.dash-search-wrap { position: relative; }
.dash-search-icon {
  width: 14px; height: 14px;
  position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%);
  color: var(--text-tertiary); pointer-events: none;
}
.dash-search {
  width: 240px;
  height: 32px;
  padding: 0 var(--sp-4) 0 34px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  font-family: var(--font);
  outline: none;
  transition: all var(--ease);
}
.dash-search:hover { border-color: var(--n-300); }
.dash-search:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.dash-filter {
  font-size: var(--text-sm);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
}
.dash-filter:hover { border-color: var(--n-300); }

/* Recent cards (shared) */
.dash-recent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--content-gap);
}
.dash-recent-item {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
}
.dash-recent-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.dash-recent-title {
  font-size: var(--text-base);
  font-weight: var(--w-bold);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.dash-recent-time {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.dash-recent-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.dash-recent-proj {
  color: var(--accent);
  font-weight: var(--w-semibold);
}
.dash-recent-slides { font-variant-numeric: tabular-nums; }
.dash-recent-bar {
  height: 2px;
  background: var(--surface-inset);
  border-radius: 1px;
  margin-top: var(--sp-3);
}
.dash-recent-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0.35;
}

/* Document rows */
.dash-doc {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--card-padding);
  margin: 0 calc(-1 * var(--card-padding));
  color: inherit;
  text-decoration: none;
}
.dash-doc:first-child {
  margin-top: calc(-1 * var(--card-padding));
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.dash-doc:last-child {
  margin-bottom: calc(-1 * var(--card-padding));
  border-radius: 0 0 var(--card-radius) var(--card-radius);
}
.dash-doc:only-child {
  margin-top: calc(-1 * var(--card-padding));
  margin-bottom: calc(-1 * var(--card-padding));
  border-radius: var(--card-radius);
}
.dash-doc + .dash-doc { border-top: 1px solid var(--border-subtle); }
.dash-doc-info { flex: 1; min-width: 0; }
.dash-doc-title {
  font-size: var(--text-base);
  font-weight: var(--w-semibold);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.dash-doc-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}
.dash-doc-time {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Empty state */
.dash-empty {
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
}
.dash-empty-title {
  font-size: var(--text-lg);
  font-weight: var(--w-bold);
  color: var(--text);
  margin-bottom: var(--sp-4);
}
.dash-empty-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--sp-6);
}
.dash-empty-inline {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
}
.dash-empty-inline-text {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* Progress bar (shared) */
.dash-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-inset);
  overflow: hidden;
}
.dash-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width var(--ease-slow);
}


/* ═══════════════════════════════════════════
   13. RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 1024px) {
  .brand-preview-slides { grid-template-columns: 1fr; }
}
/* iOS Safari は input/select/textarea の font-size が 16px 未満だと focus 時に
   自動 zoom する (accessibility 仕様)。 zoom されるとピンチアウトで戻す手間が出るため、
   モバイル時は最低 16px に上げて zoom を抑止する (#473)。 */
@media (max-width: 768px) {
  input,
  select,
  textarea,
  .app-input {
    font-size: 16px !important;
  }
}

@media (max-width: 768px) {
  .dash-hero { padding: var(--sp-8) var(--sp-4); }
  .dash-hero-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .dash-hero-title { font-size: var(--text-xl); }
  /* sidebar-toggle (左上 fixed 40x40 at sp-3=12px) と view-title が
     重なるのを避けるため、 dash-content の上端に余白を取る (#469) */
  .dash-content { padding: 64px var(--sp-4) var(--sp-4); }
  .dash-recent { grid-template-columns: 1fr; }
  .overview-recent { grid-template-columns: 1fr; }
  /* 4 カードは 2x2 grid (#496: ラベルを短縮 + メタを 2 行目に分離して改行回避) */
  .overview-kpi { grid-template-columns: 1fr 1fr; }
  /* カード内の縦並びをコンパクトに */
  .overview-kpi-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3);
  }
  .overview-kpi-value { font-size: 28px; }
  .slides-layout { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  /* sidebar 展開中はハンバーガーボタンを隠す (ws-rail のアイコンと被るため #462)。
     閉じる操作は backdrop タップで行う。 */
  body.sidebar-open .sidebar-toggle { display: none; }
  /* settings の theme 切替 3 ボタン: 「システ/ム」 のような不自然な改行を nowrap で抑止 + padding 縮小 (#462) */
  .settings-theme-selector { gap: var(--sp-1); }
  .settings-theme-btn {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--text-xs);
    white-space: nowrap;
    flex: 1;
    justify-content: center;
  }
  /* slides view: toolbar が intrinsic で view-title を 31px に潰していた (#467)。
     toolbar 全体を縦並びにし、 title と actions を 2 段に。 */
  .slides-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }
  .slides-toolbar-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  /* view-title が flex で潰れないよう保護 */
  .view-header {
    width: 100%;
    min-width: 0;
  }
  .view-title {
    font-size: var(--text-xl);
  }
}


/* ═══════════════════════════════════════════
   14. MOBILE BLOCK
   ═══════════════════════════════════════════ */

.mobile-block {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: var(--bg); align-items: center; justify-content: center;
  text-align: center; padding: var(--sp-8);
}
.mobile-block-inner { max-width: 320px; }
.mobile-block-icon { margin-bottom: var(--sp-4); color: var(--text-tertiary); font-size: 32px; }
.mobile-block-title { font-size: var(--text-xl); font-weight: var(--w-bold); margin-bottom: var(--sp-2); }
.mobile-block-text { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.7; }
@media (max-width: 768px) {
  .mobile-block { display: flex; }
  /* PC版ブロック表示中は staging のロール切替バッジを隠す (#295) */
  #role-override-badge { display: none !important; }
}


/* ═══════════════════════════════════════════
   Toast Notifications
   ═══════════════════════════════════════════ */

.feedback-types {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.feedback-type-btn {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--text-sm);
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s, border-color 0.15s;
}
.feedback-type-btn:hover {
  background: var(--bg-hover);
}
.feedback-type-btn--active {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
  font-weight: var(--w-semibold);
}
.feedback-body {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  margin-bottom: var(--sp-4);
}

.toast-container {
  position: fixed;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font);
  color: var(--n-0);
  background: var(--n-800);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity var(--ease), transform var(--ease);
  max-width: 360px;
}
.toast--visible { opacity: 1; transform: translateX(0); }
.toast--success { background: var(--n-800); }
.toast--error { background: var(--danger); }
.toast--warning { background: var(--warning); }

/* Confirm dialog message */
.confirm-message {
  font-size: var(--text-sm);
  line-height: 1.6;
  white-space: pre-line;
  margin-bottom: var(--sp-5);
}

/* Note: `.badge` は style.css (スライドキャンバス) 用に予約。 アプリ UI のバッジは
   `.app-badge` + `.app-badge--<variant>` を使う (#443)。 */

/* ═══════════════════════════════════════════
   LEGAL PAGES — terms, privacy
   ═══════════════════════════════════════════ */
.legal-body h2 {
  font-size: var(--text-lg);
  font-weight: var(--w-bold);
  margin: var(--sp-8) 0 var(--sp-3);
  color: var(--text);
}
.legal-body h3 {
  font-size: var(--text-base);
  font-weight: var(--w-semibold);
  margin: var(--sp-5) 0 var(--sp-2);
  color: var(--text);
}
.legal-body p {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: var(--sp-3);
}
.legal-body ol,
.legal-body ul {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-3);
}
.legal-body li { margin-bottom: var(--sp-1); }
.legal-body a { color: var(--accent); }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: var(--sp-4);
}
.legal-table th,
.legal-table td {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-color);
  text-align: left;
  color: var(--text-secondary);
}
.legal-table th {
  background: var(--surface-secondary, var(--n-50));
  color: var(--text);
  font-weight: var(--w-medium);
  white-space: nowrap;
}
.legal-table thead th { font-weight: var(--w-semibold); }

/* ── Proposals View (#319) ──
   全幅レイアウト (max-width 撤廃)、 タイトルとタブの余白を確保。
   .app-tabs 自体は既に定義済み (line 520) のセグメント型を使う */
.proposals-view .view-header {
  margin-bottom: var(--sp-6);
}
.proposals-view .app-tabs {
  /* inline-flex で必要幅だけ取る (親全幅にすると灰色帯が異様に伸びる) */
  display: inline-flex;
  margin-bottom: var(--sp-6);
}
.proposals-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.proposals-loading {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
/* 処理済み等で薄く見せる汎用 utility (#319) */
.is-resolved { opacity: 0.65; }
.proposal-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.proposal-card-instance {
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  color: var(--text-secondary);
}
.proposal-card-slide {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.proposal-role {
  font-size: 10px;
  font-weight: var(--w-semibold);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--accent);
  letter-spacing: 0.04em;
}
.proposal-role--owner {
  background: var(--accent);
  color: #fff;
}
.proposal-age {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-left: auto;
}
/* #283 で経過時間の色分けは廃止。 警告色用クラスは #322 で完全削除 */
.proposal-card-summary {
  font-size: var(--text-base);
  font-weight: var(--w-semibold);
  color: var(--text);
  margin-bottom: var(--sp-2);
  line-height: 1.4;
}
.proposal-card-proposer {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--sp-3);
}
.proposal-card-reason {
  font-size: var(--text-sm);
  color: var(--text);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-secondary, var(--surface-hover));
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);
}

/* ── Proposal preview thumbnails (#317, #319) ── */
.proposal-preview {
  display: flex;
  align-items: stretch;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.proposal-preview-cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  flex: 1 1 320px;
  max-width: 480px;
}
.proposal-preview-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--surface);
}
.proposal-preview-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--w-medium);
}
.proposal-preview-cell--delete .proposal-preview-thumb {
  border-color: var(--danger);
  opacity: 0.7;
}
.proposal-preview-cell--delete .proposal-preview-label {
  color: var(--danger);
}
.proposal-preview-arrow {
  display: flex;
  align-items: center;
  color: var(--text-tertiary);
  padding-top: 22px; /* label の高さ分オフセット */
  flex: 0 0 auto;
}
.proposal-preview-more {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  align-self: center;
}

.proposal-card-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.proposal-card-status {
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
}
.proposal-card-status--approved { color: var(--success, #27ae60); }
.proposal-card-status--rejected { color: var(--danger); }
.proposal-card-review-note {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  padding-left: var(--sp-2);
  border-left: 2px solid var(--danger);
  margin-top: var(--sp-1);
}
.proposal-card-open {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--brand);
  text-decoration: none;
  margin-top: var(--sp-2);
}
.proposal-card-open:hover { text-decoration: underline; }

/* ── Slides サインアップ招待 (#542) ── */
.signup-invites-section {
  margin-bottom: var(--sp-5);
}
.signup-invites-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface);
}
.signup-invites-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.signup-invites-summary::-webkit-details-marker { display: none; }
.signup-invites-summary::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid var(--text-tertiary);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.signup-invites-card[open] > .signup-invites-summary::before { transform: rotate(90deg); }
.signup-invites-title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--w-semibold);
  flex: 1;
}
.signup-invites-quota {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.signup-invites-quota strong {
  color: var(--text-primary);
  font-weight: var(--w-semibold);
}
.signup-invites-body {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}
.signup-invites-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
}
.signup-invites-empty {
  margin: var(--sp-3) 0 0;
}
.signup-invites-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.signup-invites-row {
  padding: var(--sp-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg);
}
.signup-invites-row--used,
.signup-invites-row--revoked,
.signup-invites-row--expired {
  opacity: 0.65;
}
.signup-invites-row-main {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.signup-invites-url {
  flex: 1;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
}
.signup-invites-row-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}
.signup-invites-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
}
.signup-invites-status--active {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
}
.signup-invites-status--used {
  background: var(--surface-inset);
  color: var(--text-tertiary);
}
.signup-invites-status--revoked,
.signup-invites-status--expired {
  background: var(--surface-inset);
  color: var(--text-tertiary);
  text-decoration: line-through;
}
.signup-invites-used {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ── /signup ページの invite ステータス・ゲート (#542) ── */
.invite-status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--surface-inset);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  margin-bottom: var(--sp-4);
}
.invite-status--ok {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
}
.invite-status--bad {
  background: color-mix(in srgb, #dc2626 10%, transparent);
  color: #dc2626;
}
.signup-gated {
  padding: var(--sp-4) 0;
  text-align: center;
}
.signup-gated p {
  margin: 0 0 var(--sp-3);
}

/* /admin の招待画面: token を 1 行に収めて表示 (#542) */
.admin-invite-url {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.admin-invite-token {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: var(--surface-inset);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── 告知バナー (#550) ── */
.announcement-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  background: #eef2ff;
  color: var(--text-primary);
  font-size: var(--text-sm);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.announcement-banner--info {
  background: #eef2ff;
  color: #312e81;
}
.announcement-banner--warning {
  background: #fef3c7;
  color: #78350f;
}
.announcement-banner--urgent {
  background: #fee2e2;
  color: #7f1d1d;
}
.announcement-banner-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.announcement-banner-body {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.announcement-banner-title {
  font-weight: var(--w-semibold);
}
.announcement-banner-text a {
  color: inherit;
  text-decoration: underline;
}
.announcement-banner-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
}
.announcement-banner-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}
/* バナー表示中の body 余白調整 */
body:has(.announcement-banner) {
  padding-top: 52px;
}

/* お知らせ管理画面の type バッジ */
.ann-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
}
.ann-type--info { background: #e0e7ff; color: #312e81; }
.ann-type--warning { background: #fef3c7; color: #78350f; }
.ann-type--urgent { background: #fee2e2; color: #7f1d1d; }

/* 編集モーダルの 2 カラム配置 */
.fb-field-row {
  display: flex;
  gap: var(--sp-3);
}
.fb-field-row .fb-field {
  flex: 1;
}

/* /admin のエラーログ画面 (#548) */
.err-msg-truncate {
  font-size: var(--text-xs);
  max-width: 480px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono, monospace);
}
.err-page-code {
  font-size: var(--text-xs);
}
.err-detail-modal {
  max-width: 720px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}
.err-pre {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  background: var(--surface-inset);
  padding: var(--sp-3);
  border-radius: var(--radius);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 320px;
  overflow: auto;
  margin: 0;
}