/*
 * common.css — Formula design system (v2 — 改善版)
 * Generated by design-system/extract.mjs
 *
 * Inputs (3 種類、ユーザー提供のみ):
 *   1. Figma Variables (../figma_variables/)         → 値ソース (Layer 1 + 2)
 *   2. Flowbite OSS    (.tmp/sources/flowbite/)      → 構造ソース (Layer 3 class taxonomy / commit 752fb71 / v4.0.1)
 *   3. view.md         (02_Areas/adapters/views/; aggregate fallback: 02_Areas/workflows/{WF_ID}/view.md) → spec ソース (画面構造・pixel・hex・class 名)
 *
 * 改善内容 (v2):
 *   - Token 命名: 短縮版 (--bg-brand) を主、long path (--color-background-bg-brand) は後方互換 alias
 *   - 新規 token: z-index / animation duration / easing / icon-size / container / breakpoint scale
 *   - 新規 component: Toast / Tooltip / Dropdown / Drawer / Skeleton / Spinner / Empty state
 *   - 拡張: Form validation feedback (icon + helper text)
 *   - 整合: .btn--back (BEM 統一)
 *   - 整合: input--xs 新設、reduced-motion 対応
 *   - 構造: extract.mjs を tokens.mjs / components.mjs に分割
 *
 * Token 数:
 *   - Themes (Layer 2 semantic): 176 (light + dark 双対)
 *   - Primitives (Layer 1 palette): 339
 *
 * Flowbite audit:
 *   - flowbite default.css の semantic token: 0
 *   - Figma Themes の semantic token:        176
 *   - brand 解決: flowbite=n/a (source missing) / figma=#0040d5
 */

/* ============================================================
   Layer 1 + 2: Token Layer (Figma 由来 + 短縮 alias + 拡張 token)
   ============================================================ */
:root {
  /* === Layer 1: Primitives palette (Figma colors/* 直読、決定論的) === */
  --amber-050: #fffbeb;
  --amber-100: #fef3c6;
  --amber-200: #fee685;
  --amber-300: #ffd230;
  --amber-400: #ffb900;
  --amber-500: #fe9a00;
  --amber-600: #e17100;
  --amber-700: #bb4d00;
  --amber-800: #973c00;
  --amber-900: #7b3306;
  --amber-950: #461901;
  --brand-050: #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-400: #60a5ff;
  --brand-500: #3b82ff;
  --brand-600: #004efd;
  --brand-700: #0040d5;
  --brand-800: #1a3fa3;
  --brand-900: #0f2a7a;
  --brand-950: #0b1c54;
  --cyan-050: #ecfeff;
  --cyan-100: #cefafe;
  --cyan-200: #a2f4fd;
  --cyan-300: #53eafd;
  --cyan-400: #00d3f2;
  --cyan-500: #00b8db;
  --cyan-600: #0092b8;
  --cyan-700: #007595;
  --cyan-800: #005f78;
  --cyan-900: #104e64;
  --cyan-950: #053345;
  --emerald-050: #ecfdf5;
  --emerald-100: #d0fae5;
  --emerald-200: #a4f4cf;
  --emerald-300: #5ee9b5;
  --emerald-400: #00d492;
  --emerald-500: #00bc7d;
  --emerald-600: #009966;
  --emerald-700: #007a55;
  --emerald-800: #006045;
  --emerald-900: #004f3b;
  --emerald-950: #002c22;
  --fuchsia-050: #fdf4ff;
  --fuchsia-100: #fae8ff;
  --fuchsia-200: #f6cfff;
  --fuchsia-300: #f4a8ff;
  --fuchsia-400: #ed6aff;
  --fuchsia-500: #e12afb;
  --fuchsia-600: #c800de;
  --fuchsia-700: #a800b7;
  --fuchsia-800: #8a0194;
  --fuchsia-900: #721378;
  --fuchsia-950: #4b004f;
  --gray-050: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5dc;
  --gray-400: #99a1af;
  --gray-500: #6a7282;
  --gray-600: #4a5565;
  --gray-700: #333e4f;
  --gray-800: #1e2939;
  --gray-900: #101828;
  --gray-950: #030712;
  --green-100: #dcfce7;
  --green-200: #b9f8cf;
  --green-300: #7bf1a8;
  --green-400: #05df72;
  --green-50: #f0fdf4;
  --green-500: #00c950;
  --green-600: #00a63e;
  --green-700: #008236;
  --green-800: #016630;
  --green-900: #0d542b;
  --green-950: #032e15;
  --indigo-100: #e0e7ff;
  --indigo-200: #c6d2ff;
  --indigo-300: #a3b3ff;
  --indigo-400: #7c86ff;
  --indigo-50: #eef2ff;
  --indigo-500: #615fff;
  --indigo-600: #4f39f6;
  --indigo-700: #432dd7;
  --indigo-800: #372aac;
  --indigo-900: #312c85;
  --indigo-950: #1e1a4d;
  --lime-050: #f7fee7;
  --lime-100: #ecfcca;
  --lime-200: #d8f999;
  --lime-300: #bbf451;
  --lime-400: #9ae600;
  --lime-500: #7ccf00;
  --lime-600: #5ea500;
  --lime-700: #497d00;
  --lime-800: #3c6300;
  --lime-900: #35530e;
  --lime-950: #192e03;
  --neutral-050: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a1a1a1;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;
  --orange-050: #fff8f1;
  --orange-100: #feecdc;
  --orange-200: #fcd9bd;
  --orange-300: #fdba8c;
  --orange-400: #ff8a4c;
  --orange-500: #ff5a1f;
  --orange-600: #d03801;
  --orange-700: #b43403;
  --orange-800: #8a2c0d;
  --orange-900: #771d1d;
  --orange-950: #441306;
  --pink-050: #fdf2f8;
  --pink-100: #fce7f3;
  --pink-200: #fccee8;
  --pink-300: #fda5d5;
  --pink-400: #fb64b6;
  --pink-500: #f6339a;
  --pink-600: #e60076;
  --pink-700: #c6005c;
  --pink-800: #a3004c;
  --pink-900: #861043;
  --pink-950: #510424;
  --purple-050: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d4ff;
  --purple-300: #dab2ff;
  --purple-400: #c27aff;
  --purple-500: #ad46ff;
  --purple-600: #9810fa;
  --purple-700: #8200db;
  --purple-800: #6e11b0;
  --purple-900: #59168b;
  --purple-950: #3c0366;
  --red-050: #fef2f2;
  --red-100: #ffe2e2;
  --red-200: #ffc9c9;
  --red-300: #ffa2a2;
  --red-400: #ff6467;
  --red-500: #fb2c36;
  --red-600: #e7000b;
  --red-700: #c10007;
  --red-800: #9f0712;
  --red-900: #82181a;
  --red-950: #460809;
  --rose-050: #fef0f2;
  --rose-100: #ffe4e6;
  --rose-200: #ffccd3;
  --rose-300: #ffa1ad;
  --rose-400: #ff637e;
  --rose-500: #ff2056;
  --rose-600: #ec003f;
  --rose-700: #c70036;
  --rose-800: #a50036;
  --rose-900: #8b0836;
  --rose-950: #4d0218;
  --sky-050: #f0f9ff;
  --sky-100: #dff2fe;
  --sky-200: #b8e6fe;
  --sky-300: #74d4ff;
  --sky-400: #00bcff;
  --sky-500: #00a6f4;
  --sky-600: #0084d1;
  --sky-700: #0069a8;
  --sky-800: #00598a;
  --sky-900: #024a70;
  --sky-950: #052f4a;
  --slate-050: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cad5e2;
  --slate-400: #90a1b9;
  --slate-500: #62748e;
  --slate-600: #45556c;
  --slate-700: #314158;
  --slate-800: #1d293d;
  --slate-900: #131c34;
  --slate-950: #020618;
  --stone-050: #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;
  --stone-300: #d6d3d1;
  --stone-400: #a6a09b;
  --stone-500: #79716b;
  --stone-600: #57534d;
  --stone-700: #44403b;
  --stone-800: #292524;
  --stone-900: #1c1917;
  --stone-950: #0c0a09;
  --teal-100: #cbfbf1;
  --teal-200: #96f7e4;
  --teal-300: #46ecd5;
  --teal-400: #00d5be;
  --teal-50: #f0fdfa;
  --teal-500: #00bba7;
  --teal-600: #009689;
  --teal-700: #00786f;
  --teal-800: #005f59;
  --teal-900: #0d4e4a;
  --teal-950: #032f2e;
  --yellow-050: #fefce8;
  --yellow-100: #fef9c2;
  --yellow-200: #fff085;
  --yellow-300: #ffdf20;
  --yellow-400: #fdc700;
  --yellow-500: #f0b100;
  --yellow-600: #d08700;
  --yellow-700: #a65f00;
  --yellow-800: #894b00;
  --yellow-900: #733e0a;
  --yellow-950: #432004;
  --zinc-050: #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #9f9fa9;
  --zinc-500: #71717b;
  --zinc-600: #52525c;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;

  /* === Layer 2: Themes (Figma Themes — semantic alias) === */
  --border-border-radius-rounded-base: 8px;
  --typography-font-family-font-base: Inter;
  --typography-font-size-text-6xl: 60px;
  --typography-font-size-text-4xl: 36px;
  --typography-font-size-text-3xl: 30px;
  --typography-font-size-text-2xl: 24px;
  --typography-font-size-text-xl: 20px;
  --typography-font-size-text-lg: 18px;
  --typography-font-size-text-base: 16px;
  --typography-font-size-text-sm: 14px;
  --typography-font-size-text-xs: 12px;
  --color-background-bg-success-soft: #ecfdf5;
  --color-background-bg-danger-soft: #fef0f2;
  --color-text-text-fg-success-strong: #004f3b;
  --color-text-text-fg-danger-strong: #8b0836;
  --color-border-border-success-subtle: #a4f4cf;
  --color-border-border-danger-subtle: #ffccd3;
  --color-background-bg-warning-soft: #fff8f1;
  --color-background-bg-brand-softer: #eff6ff;
  --color-background-bg-secondary: #f9fafb;
  --color-border-border-warning-subtle: #fcd9bd;
  --color-text-text-fg-warning: #771d1d;
  --color-text-text-heading: #101828;
  --color-text-text-white: #ffffff;
  --border-border-width-border: 1px;
  --bg-variants-white: #ffffff;
  --color-border-border-base: #e5e7eb;
  --color-border-border-brand-subtle: #bfdbfe;
  --color-text-text-fg-info: #0f2a7a;
  --border-border-width-border-lg: 4px;
  --color-text-text-fg-disabled: #99a1af;
  --color-text-text-fg-brand: #0040d5;
  --color-text-text-body: #4a5565;
  --color-text-text-black: #101828;
  --color-text-text-body-subtle: #6a7282;
  --color-background-bg-success-medium: #d0fae5;
  --color-background-bg-danger-medium: #ffe4e6;
  --color-background-bg-warning-medium: #feecdc;
  --color-background-bg-brand-soft: #dbeafe;
  --color-background-bg-brand: #0040d5;
  --color-text-text-fg-brand-strong: #0f2a7a;
  --color-background-bg-dark: #1e2939;
  --color-background-bg-dark-strong: #101828;
  --color-background-bg-secondary-medium: #f9fafb;
  --color-background-bg-secondary-soft: #f9fafb;
  --color-background-bg-primary-soft: #ffffff;
  --color-background-bg-primary-medium: #ffffff;
  --color-background-bg-tertiary: #f3f4f6;
  --color-border-border-light: #f3f4f6;
  --border-border-width-border-md: 2px;
  --border-border-radius-rounded-lg: 12px;
  --border-border-radius-rounded-full: 9999px;
  --color-border-border-base-medium: #e5e7eb;
  --border-border-radius-rounded-0: 0px;
  --color-background-bg-secondary-strong: #f9fafb;
  --color-border-border-base-strong: #e5e7eb;
  --color-background-bg-primary: #ffffff;
  --color-background-bg-quaternary: #e5e7eb;
  --typography-font-size-text-5xl: 48px;
  --typography-font-weight-font-extrabold: Extrabold;
  --typography-font-weight-font-bold: Bold;
  --typography-font-weight-font-semibold: Semibold;
  --typography-font-weight-font-medium: Medium;
  --typography-font-weight-font-normal: Regular;
  --typography-line-height-leading-9: 36px;
  --typography-line-height-leading-7: 28px;
  --typography-line-height-leading-8: 32px;
  --typography-line-height-leading-6: 24px;
  --typography-line-height-leading-4: 16px;
  --typography-line-height-leading-none: 1px;
  --typography-line-height-leading-5: 20px;
  --typography-letter-spacing-tracking-tighter: -0.800000011920929px;
  --typography-line-height-leading-heading(none): 60px;
  --typography-letter-spacing-tracking-tight: -0.4000000059604645px;
  --color-border-border-brand: #0040d5;
  --color-background-bg-white: #ffffff;
  --color-background-bg-disabled: #f3f4f6;
  --color-border-border-success: #007a55;
  --color-border-border-danger: #c70036;
  --color-border-border-warning: #d03801;
  --color-border-border-dark: #1e2939;
  --color-background-bg-brand-strong: #1a3fa3;
  --container-xl: 1280px;
  --container-2xl: 1563px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-sm: 640px;
  --container-xs: 380px;
  --color-text-text-fg-danger: #c70036;
  --border-border-width-border-0: 0px;
  --max-width-max-w-3xl: 768px;
  --max-width-max-w-2xl: 672px;
  --max-width-max-w-xl: 576px;
  --max-width-max-w-md: 448px;
  --max-width-max-w-7xl: 1280px;
  --max-width-max-w-4xl: 896px;
  --max-width-max-w-6xl: 1152px;
  --max-width-max-w-lg: 512px;
  --max-width-max-w-sm: 384px;
  --max-width-max-w-5xl: 1024px;
  --max-width-max-w-xs: 320px;
  --color-background-bg-tertiary-medium: #f3f4f6;
  --color-background-bg-success: #007a55;
  --color-background-bg-danger: #c70036;
  --color-background-bg-warning: #ff5a1f;
  --color-background-bg-success-strong: #006045;
  --color-background-bg-danger-strong: #a50036;
  --color-background-bg-warning-strong: #b43403;
  --color-border-border-dark-subtle: #1e2939;
  --border-border-radius-rounded: 8px;
  --border-border-radius-rounded-xs: 4px;
  --bg-variants-gray: #f3f4f6;
  --color-background-bg-primary-strong: #ffffff;
  --color-background-bg-gray: #d1d5dc;
  --color-text-text-fg-yellow: #fdc700;
  --color-border-border-buffer: #ffffff;
  --color-border-border-buffer-medium: #ffffff;
  --color-border-border-buffer-strong: #ffffff;
  --color-background-bg-quaternary-medium: #e5e7eb;
  --color-border-border-light-medium: #f3f4f6;
  --color-border-border-brand-light: #004efd;
  --typography-font-size-text-xxs: 8px;
  --color-text-text-fg-success: #007a55;
  --color-background-bg-brand-medium: #bfdbfe;
  --color-text-text-fg-warning-subtle: #d03801;
  --color-border-border-buffer-gradient-secondary: #f9fafb;
  --color-border-border-base-subtle: #e5e7eb;
  --color-border-border-light-subtle: #f3f4f6;
  --border-border-width-border-xl: 8px;
  --color-border-border-muted: #f9fafb;
  --border-border-radius-rounded-xxs: 2px;
  --border-border-radius-rounded-xl: 16px;
  --border-border-radius-rounded-sm: 6px;
  --color-text-text-fg-brand-subtle: #bfdbfe;
  --color-text-text-fg-purple: #9810fa;
  --color-text-text-fg-cyan: #0092b8;
  --color-text-text-fg-indigo: #4f39f6;
  --color-text-text-fg-pink: #e60076;
  --color-text-text-fg-lime: #5ea500;
  --color-background-bg-purple: #ad46ff;
  --color-background-bg-sky: #00a6f4;
  --color-background-bg-teal: #009689;
  --color-background-bg-pink: #e60076;
  --color-background-bg-cyan: #00b8db;
  --color-background-bg-fuchsia: #c800de;
  --color-background-bg-indigo: #4f39f6;
  --color-background-bg-orange: #ff8a4c;
  --color-border-border-purple: #ad46ff;
  --color-border-border-orange: #ff8a4c;
  --color-background-bg-tertiary-soft: #f3f4f6;
  --color-border-border-purple-subtle: #e9d4ff;
  --color-border-border-yellow-subtle: #fef9c2;
  --color-border-border-teal-subtle: #96f7e4;
  --color-border-border-teal: #00d5be;
  --color-border-border-pink-subtle: #fccee8;
  --color-border-border-pink: #fb64b6;
  --color-background-bg-purple-soft: #faf5ff;
  --color-background-bg-purple-medium: #f3e8ff;
  --color-background-bg-purple-strong: #8200db;
  --color-background-bg-teal-soft: #f0fdfa;
  --color-background-bg-teal-medium: #cbfbf1;
  --color-background-bg-teal-strong: #00786f;
  --color-background-bg-pink-soft: #fdf2f8;
  --color-background-bg-pink-medium: #fce7f3;
  --color-background-bg-pink-strong: #c6005c;
  --color-background-bg-yellow-soft: #fefce8;
  --color-background-bg-yellow-medium: #fff085;
  --color-background-bg-yellow-strong: #a65f00;
  --color-background-bg-yellow: #fdc700;
  --color-border-border-yellow: #fdc700;
  --color-text-text-fg-purple-strong: #59168b;
  --color-text-text-fg-yellow-strong: #733e0a;
  --color-text-text-fg-pink-strong: #861043;
  --color-text-text-fg-teal: #009689;
  --color-text-text-fg-teal-strong: #0d4e4a;
  /* Modal backdrop: gray-600 (#4a5565) @ 75% opacity */
  --color-background-bg-modal: rgba(74, 85, 101, 0.75);

  /* === Short alias (推奨) === */
  --radius-base: var(--border-border-radius-rounded-base);
  --font-font-base: var(--typography-font-family-font-base);
  --text-6xl: var(--typography-font-size-text-6xl);
  --text-4xl: var(--typography-font-size-text-4xl);
  --text-3xl: var(--typography-font-size-text-3xl);
  --text-2xl: var(--typography-font-size-text-2xl);
  --text-xl: var(--typography-font-size-text-xl);
  --text-lg: var(--typography-font-size-text-lg);
  --text-base: var(--typography-font-size-text-base);
  --text-sm: var(--typography-font-size-text-sm);
  --text-xs: var(--typography-font-size-text-xs);
  --bg-success-soft: var(--color-background-bg-success-soft);
  --bg-danger-soft: var(--color-background-bg-danger-soft);
  --text-fg-success-strong: var(--color-text-text-fg-success-strong);
  --text-fg-danger-strong: var(--color-text-text-fg-danger-strong);
  --border-success-subtle: var(--color-border-border-success-subtle);
  --border-danger-subtle: var(--color-border-border-danger-subtle);
  --bg-warning-soft: var(--color-background-bg-warning-soft);
  --bg-brand-softer: var(--color-background-bg-brand-softer);
  --bg-secondary: var(--color-background-bg-secondary);
  --border-warning-subtle: var(--color-border-border-warning-subtle);
  --text-fg-warning: var(--color-text-text-fg-warning);
  --text-heading: var(--color-text-text-heading);
  --text-white: var(--color-text-text-white);
  --border-width: var(--border-border-width-border);
  --border-base: var(--color-border-border-base);
  --border-brand-subtle: var(--color-border-border-brand-subtle);
  --text-fg-info: var(--color-text-text-fg-info);
  --border-width-lg: var(--border-border-width-border-lg);
  --text-fg-disabled: var(--color-text-text-fg-disabled);
  --text-fg-brand: var(--color-text-text-fg-brand);
  --text-body: var(--color-text-text-body);
  --text-black: var(--color-text-text-black);
  --text-body-subtle: var(--color-text-text-body-subtle);
  --bg-success-medium: var(--color-background-bg-success-medium);
  --bg-danger-medium: var(--color-background-bg-danger-medium);
  --bg-warning-medium: var(--color-background-bg-warning-medium);
  --bg-brand-soft: var(--color-background-bg-brand-soft);
  --bg-brand: var(--color-background-bg-brand);
  --text-fg-brand-strong: var(--color-text-text-fg-brand-strong);
  --bg-dark: var(--color-background-bg-dark);
  --bg-dark-strong: var(--color-background-bg-dark-strong);
  --bg-secondary-medium: var(--color-background-bg-secondary-medium);
  --bg-secondary-soft: var(--color-background-bg-secondary-soft);
  --bg-primary-soft: var(--color-background-bg-primary-soft);
  --bg-primary-medium: var(--color-background-bg-primary-medium);
  --bg-tertiary: var(--color-background-bg-tertiary);
  --border-light: var(--color-border-border-light);
  --border-width-md: var(--border-border-width-border-md);
  --radius-lg: var(--border-border-radius-rounded-lg);
  --radius-full: var(--border-border-radius-rounded-full);
  --border-base-medium: var(--color-border-border-base-medium);
  --radius-0: var(--border-border-radius-rounded-0);
  --bg-secondary-strong: var(--color-background-bg-secondary-strong);
  --border-base-strong: var(--color-border-border-base-strong);
  --bg-primary: var(--color-background-bg-primary);
  --bg-quaternary: var(--color-background-bg-quaternary);
  --text-5xl: var(--typography-font-size-text-5xl);
  --weight-extrabold: var(--typography-font-weight-font-extrabold);
  --weight-bold: var(--typography-font-weight-font-bold);
  --weight-semibold: var(--typography-font-weight-font-semibold);
  --weight-medium: var(--typography-font-weight-font-medium);
  --weight-normal: var(--typography-font-weight-font-normal);
  --leading-9: var(--typography-line-height-leading-9);
  --leading-7: var(--typography-line-height-leading-7);
  --leading-8: var(--typography-line-height-leading-8);
  --leading-6: var(--typography-line-height-leading-6);
  --leading-4: var(--typography-line-height-leading-4);
  --leading-none: var(--typography-line-height-leading-none);
  --leading-5: var(--typography-line-height-leading-5);
  --tracking-tighter: var(--typography-letter-spacing-tracking-tighter);
  --leading-heading(none): var(--typography-line-height-leading-heading(none));
  --tracking-tight: var(--typography-letter-spacing-tracking-tight);
  --border-brand: var(--color-border-border-brand);
  --bg-white: var(--color-background-bg-white);
  --bg-disabled: var(--color-background-bg-disabled);
  --border-success: var(--color-border-border-success);
  --border-danger: var(--color-border-border-danger);
  --border-warning: var(--color-border-border-warning);
  --border-dark: var(--color-border-border-dark);
  --bg-brand-strong: var(--color-background-bg-brand-strong);
  --text-fg-danger: var(--color-text-text-fg-danger);
  --border-width-0: var(--border-border-width-border-0);
  --bg-tertiary-medium: var(--color-background-bg-tertiary-medium);
  --bg-success: var(--color-background-bg-success);
  --bg-danger: var(--color-background-bg-danger);
  --bg-warning: var(--color-background-bg-warning);
  --bg-success-strong: var(--color-background-bg-success-strong);
  --bg-danger-strong: var(--color-background-bg-danger-strong);
  --bg-warning-strong: var(--color-background-bg-warning-strong);
  --border-dark-subtle: var(--color-border-border-dark-subtle);
  --radius: var(--border-border-radius-rounded);
  --radius-xs: var(--border-border-radius-rounded-xs);
  --bg-primary-strong: var(--color-background-bg-primary-strong);
  --bg-gray: var(--color-background-bg-gray);
  --text-fg-yellow: var(--color-text-text-fg-yellow);
  --border-buffer: var(--color-border-border-buffer);
  --border-buffer-medium: var(--color-border-border-buffer-medium);
  --border-buffer-strong: var(--color-border-border-buffer-strong);
  --bg-quaternary-medium: var(--color-background-bg-quaternary-medium);
  --border-light-medium: var(--color-border-border-light-medium);
  --border-brand-light: var(--color-border-border-brand-light);
  --text-xxs: var(--typography-font-size-text-xxs);
  --text-fg-success: var(--color-text-text-fg-success);
  --bg-brand-medium: var(--color-background-bg-brand-medium);
  --text-fg-warning-subtle: var(--color-text-text-fg-warning-subtle);
  --border-buffer-gradient-secondary: var(--color-border-border-buffer-gradient-secondary);
  --border-base-subtle: var(--color-border-border-base-subtle);
  --border-light-subtle: var(--color-border-border-light-subtle);
  --border-width-xl: var(--border-border-width-border-xl);
  --border-muted: var(--color-border-border-muted);
  --radius-xxs: var(--border-border-radius-rounded-xxs);
  --radius-xl: var(--border-border-radius-rounded-xl);
  --radius-sm: var(--border-border-radius-rounded-sm);
  --text-fg-brand-subtle: var(--color-text-text-fg-brand-subtle);
  --text-fg-purple: var(--color-text-text-fg-purple);
  --text-fg-cyan: var(--color-text-text-fg-cyan);
  --text-fg-indigo: var(--color-text-text-fg-indigo);
  --text-fg-pink: var(--color-text-text-fg-pink);
  --text-fg-lime: var(--color-text-text-fg-lime);
  --bg-purple: var(--color-background-bg-purple);
  --bg-sky: var(--color-background-bg-sky);
  --bg-teal: var(--color-background-bg-teal);
  --bg-pink: var(--color-background-bg-pink);
  --bg-cyan: var(--color-background-bg-cyan);
  --bg-fuchsia: var(--color-background-bg-fuchsia);
  --bg-indigo: var(--color-background-bg-indigo);
  --bg-orange: var(--color-background-bg-orange);
  --border-purple: var(--color-border-border-purple);
  --border-orange: var(--color-border-border-orange);
  --bg-tertiary-soft: var(--color-background-bg-tertiary-soft);
  --border-purple-subtle: var(--color-border-border-purple-subtle);
  --border-yellow-subtle: var(--color-border-border-yellow-subtle);
  --border-teal-subtle: var(--color-border-border-teal-subtle);
  --border-teal: var(--color-border-border-teal);
  --border-pink-subtle: var(--color-border-border-pink-subtle);
  --border-pink: var(--color-border-border-pink);
  --bg-purple-soft: var(--color-background-bg-purple-soft);
  --bg-purple-medium: var(--color-background-bg-purple-medium);
  --bg-purple-strong: var(--color-background-bg-purple-strong);
  --bg-teal-soft: var(--color-background-bg-teal-soft);
  --bg-teal-medium: var(--color-background-bg-teal-medium);
  --bg-teal-strong: var(--color-background-bg-teal-strong);

  /* Chart standard palette: normal categorical / reference comparison. */
  --chart-standard-01: var(--brand-600);
  --chart-standard-02: var(--purple-600);
  --chart-standard-03: var(--cyan-500);
  --chart-standard-04: var(--brand-400);
  --chart-standard-05: var(--purple-300);
  --chart-reference-primary: var(--brand-600);
  --chart-reference-secondary: var(--brand-200);
  --chart-other: var(--gray-200);

  /* Chart category palette: exception order for 9-15 categories only. */
  --chart-category-01: var(--brand-600);
  --chart-category-02: var(--purple-600);
  --chart-category-03: var(--cyan-500);
  --chart-category-04: var(--brand-400);
  --chart-category-05: var(--purple-300);
  --chart-category-06: var(--cyan-300);
  --chart-category-07: var(--slate-500);
  --chart-category-08: var(--slate-400);
  --chart-category-09: var(--slate-300);
  --chart-category-10: var(--stone-500);
  --chart-category-11: var(--stone-400);
  --chart-category-12: var(--stone-300);
  --chart-category-13: var(--gray-500);
  --chart-category-14: var(--gray-400);
  --chart-category-15: var(--gray-300);

  --bg-pink-soft: var(--color-background-bg-pink-soft);
  --bg-pink-medium: var(--color-background-bg-pink-medium);
  --bg-pink-strong: var(--color-background-bg-pink-strong);
  --bg-yellow-soft: var(--color-background-bg-yellow-soft);
  --bg-yellow-medium: var(--color-background-bg-yellow-medium);
  --bg-yellow-strong: var(--color-background-bg-yellow-strong);
  --bg-yellow: var(--color-background-bg-yellow);
  --border-yellow: var(--color-border-border-yellow);
  --text-fg-purple-strong: var(--color-text-text-fg-purple-strong);
  --text-fg-yellow-strong: var(--color-text-text-fg-yellow-strong);
  --text-fg-pink-strong: var(--color-text-text-fg-pink-strong);
  --text-fg-teal: var(--color-text-text-fg-teal);
  --text-fg-teal-strong: var(--color-text-text-fg-teal-strong);
  --bg-modal: var(--color-background-bg-modal);

  /* === Supplemental tokens (Figma に無いが業務 UI に必要) === */

  /* Section 見出し色 (Figma に slate なし、Tailwind slate-200/100 採用) */
  --bg-section-main:   #e2e8f0;
  --bg-section-sub:    #f1f5f9;

  /* Sidebar */
  --bg-sidebar:        var(--bg-dark-strong);
  --bg-sidebar-hover:  rgba(255, 255, 255, 0.10);

  /* Surfaces (alias) */
  --bg-page:           var(--bg-secondary);
  --bg-card:           var(--bg-primary);
  --bg-input:          var(--bg-secondary);
  --bg-overlay:        rgba(0, 0, 0, 0.5);
  /* --bg-disabled は line 521 で正規 alias 済 (旧 shorten() の自己参照バグを削除) */

  /* Text alias (短縮)
     NOTE: --text-heading / --text-body は line 468 / 477 で正規 alias 済。
     かつて shorten() ツールが自己参照宣言 (--text-body: var(--text-body)) を
     吐いていたが循環参照になるため削除。 */
  --text-label:        var(--text-body-subtle);
  --text-on-dark:      var(--text-white);
  --text-disabled:     var(--text-fg-disabled);
  /* --text-muted: 抑えめ本文色。light = gray/400, dark = gray/600 (.dark 側で上書き) */
  --text-muted:        var(--gray-400);

  /* Brand alias (用途別) */
  --primary:           var(--bg-brand);
  --primary-hover:     var(--bg-brand-strong);
  --primary-bg:        var(--bg-brand-softer);
  --primary-bg-medium: var(--bg-brand-soft);
  --primary-border:    var(--border-brand-subtle);
  --primary-text:      var(--text-fg-brand);
  --primary-text-strong: var(--text-fg-brand-strong);

  --success:        var(--bg-success);
  --success-bg:     var(--bg-success-soft);
  --success-border: var(--border-success-subtle);
  --success-text:   var(--text-fg-success-strong);

  --danger:         var(--bg-danger);
  --danger-bg:      var(--bg-danger-soft);
  --danger-border:  var(--border-danger-subtle);
  --danger-text:    var(--text-fg-danger-strong);

  --warning:        var(--bg-warning);
  --warning-bg:     var(--bg-warning-soft);
  --warning-border: var(--border-warning-subtle);
  --warning-text:   var(--text-fg-warning);

  --info-bg:        var(--bg-brand-softer);
  --info-border:    var(--border-brand-subtle);
  --info-text:      var(--text-fg-brand-strong);

  /* Border alias */
  --border-default:    var(--border-base);
  --border-input:      var(--border-base);
  --border-focus:      var(--bg-brand);
  /* --border-light は line 493 で正規 alias 済 (旧 shorten() の自己参照バグを削除) */
  --border-strong:     var(--border-base-strong);

  /* Radius alias (業務 UI 既定 4px)
     NOTE: 旧 shorten() ツールが --radius-xs/-sm/-md/-lg/-xl/-full を自己参照 or 存在しない
     --radius で定義しており循環参照 → invalid 化。line 446/495/538/557-559 の正規 alias を
     使うため override は削除。--radius-xxl のみ Figma に primitive がないので Layer 5 で新設。 */
  --radius-default:    4px;
  --radius-xxl:        24px;

  /* Spacing scale (Figma Primitives 直読、決定論的) */
  --space-0: 0px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 18px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;
  --space-36: 144px;
  --space-40: 160px;
  --space-44: 176px;
  --space-48: 192px;
  --space-52: 208px;
  --space-56: 224px;
  --space-60: 240px;
  --space-64: 256px;
  --space-72: 288px;
  --space-80: 320px;
  --space-96: 384px;
  --space-px: 1px;

  /* Layout constants */
  --sidebar-width: 64px;

  /* Typography */
  --font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-xs:    var(--text-xs);    /* 12 */
  --font-sm:    var(--text-sm);    /* 14 */
  --font-base:  var(--text-base);  /* 16 */
  --font-lg:    var(--text-lg);    /* 18 */
  --font-xl:    var(--text-xl);    /* 20 */
  --font-2xl:   var(--text-2xl);   /* 24 */
  /* WHY: Figma 由来 --typography-font-weight-font-* は "Extrabold" / "Semibold" など
     文字列値で抽出されており CSS font-weight 値として無効 (→ inherit/initial = 400)。
     ここで数値に上書きして CSS 規格に準拠 */
  --weight-normal:   400;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;
  --leading-tight:   1.0;
  --leading-normal:  1.43;
  --leading-relaxed: 1.5;

  /* Shadow (Figma 仕様準拠 — base color rgba(29, 41, 61, x) = gray/800 ベース)
     スケール: xs (subtle border) / sm (card) / base (btn rest) / md (popover) /
              lg (modal) / xl (dialog) / 2xl (toast / drawer 影) */
  --shadow-xs:  0px 1px 0.5px rgba(29, 41, 61, 0.02);
  --shadow-sm:  0px 1px 2px rgba(29, 41, 61, 0.05);
  --shadow:     0px 1px 3px rgba(29, 41, 61, 0.1), 0px 1px 2px rgba(29, 41, 61, 0.1);
  --shadow-md:  0px 4px 6px rgba(29, 41, 61, 0.1), 0px 2px 4px rgba(29, 41, 61, 0.1);
  --shadow-lg:  0px 10px 15px rgba(29, 41, 61, 0.1), 0px 4px 6px rgba(29, 41, 61, 0.1);
  --shadow-xl:  0px 20px 25px rgba(29, 41, 61, 0.1), 0px 8px 10px rgba(29, 41, 61, 0.1);
  --shadow-2xl: 0px 25px 50px rgba(29, 41, 61, 0.25);
  --shadow-sticky-column: linear-gradient(90deg, rgba(29, 41, 61, 0.07), rgba(29, 41, 61, 0));

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(0, 64, 213, 0.1);

  /* Z-index scale (新規) */
  /* z-index hierarchy (DESIGN.md §8.16):
     content < sticky/fixed < drawer < modal < popover/tooltip/dropdown < toast
     Toast 最上位の理由: 「今起きたこと」(成功/失敗) を Modal 操作後に伝える必要があるため */
  --z-content:     0;        /* main content base */
  --z-sticky:      1000;     /* sticky header, app-footer */
  --z-fixed:       1000;     /* fixed elements at header level (alias) */
  --z-drawer:      6000;     /* side panel */
  --z-modal:       7000;     /* dialog */
  --z-popover:     8000;     /* popover (Modal 内 element の説明用) */
  --z-tooltip:     8000;     /* tooltip (Modal 内 icon の hover 説明用) */
  --z-dropdown:    8000;     /* dropdown menu (Modal 内 select 等で必要) */
  --z-toast:       9000;     /* notification (Modal 操作後の結果通知) */

  /* Animation duration scale (新規) */
  --duration-fast:    100ms;
  --duration-normal:  150ms;
  --duration-slow:    300ms;

  /* Easing curves (新規) */
  --ease-in:        cubic-bezier(0.4, 0.0, 1, 1);
  --ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-default:   var(--ease-in-out);

  /* Icon size scale (新規) */
  --icon-xs:  12px;
  --icon-sm:  16px;
  --icon-md:  20px;
  --icon-lg:  24px;
  --icon-xl:  32px;

  /* Container max-width (Figma の max-width tokens 由来) */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1400px;

  /* Breakpoint scale (新規 — magic number 解消) */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1200px;
  --bp-2xl: 1440px;

}

.dark, [data-theme="dark"] {
  --border-border-radius-rounded-base: 8px;
  --typography-font-family-font-base: Inter;
  --typography-font-size-text-6xl: 60px;
  --typography-font-size-text-4xl: 36px;
  --typography-font-size-text-3xl: 30px;
  --typography-font-size-text-2xl: 24px;
  --typography-font-size-text-xl: 20px;
  --typography-font-size-text-lg: 18px;
  --typography-font-size-text-base: 16px;
  --typography-font-size-text-sm: 14px;
  --typography-font-size-text-xs: 12px;
  --color-background-bg-success-soft: #002c22;
  --color-background-bg-danger-soft: #4d0218;
  --color-text-text-fg-success-strong: #5ee9b5;
  --color-text-text-fg-danger-strong: #ffa1ad;
  --color-border-border-success-subtle: #004f3b;
  --color-border-border-danger-subtle: #8b0836;
  --color-background-bg-warning-soft: #441306;
  --color-background-bg-brand-softer: #0b1c54;
  --color-background-bg-secondary: #030712;
  --color-border-border-warning-subtle: #771d1d;
  --color-text-text-fg-warning: #fdba8c;
  --color-text-text-heading: #ffffff;
  --color-text-text-white: #ffffff;
  --border-border-width-border: 1px;
  --bg-variants-white: #030712;
  --color-border-border-base: #1e2939;
  --color-border-border-brand-subtle: #0f2a7a;
  --color-text-text-fg-info: #93c5fd;
  --border-border-width-border-lg: 4px;
  --color-text-text-fg-disabled: #4a5565;
  --color-text-text-fg-brand: #3b82ff;
  --color-text-text-body: #99a1af;
  --color-text-text-black: #101828;
  --color-text-text-body-subtle: #99a1af;
  --color-background-bg-success-medium: #004f3b;
  --color-background-bg-danger-medium: #8b0836;
  --color-background-bg-warning-medium: #771d1d;
  --color-background-bg-brand-soft: #0f2a7a;
  --color-background-bg-brand: #004efd;
  --color-text-text-fg-brand-strong: #60a5ff;
  --color-background-bg-dark: #1e2939;
  --color-background-bg-dark-strong: #333e4f;
  --color-background-bg-secondary-medium: #1e2939;
  --color-background-bg-secondary-soft: #101828;
  --color-background-bg-primary-soft: #101828;
  --color-background-bg-primary-medium: #1e2939;
  --color-background-bg-tertiary: #1e2939;
  --color-border-border-light: #101828;
  --border-border-width-border-md: 2px;
  --border-border-radius-rounded-lg: 12px;
  --border-border-radius-rounded-full: 9999px;
  --color-border-border-base-medium: #333e4f;
  --border-border-radius-rounded-0: 0px;
  --color-background-bg-secondary-strong: #333e4f;
  --color-border-border-base-strong: #4a5565;
  --color-background-bg-primary: #030712;
  --color-background-bg-quaternary: #333e4f;
  --typography-font-size-text-5xl: 48px;
  --typography-font-weight-font-extrabold: Extrabold;
  --typography-font-weight-font-bold: Bold;
  --typography-font-weight-font-semibold: Semibold;
  --typography-font-weight-font-medium: Medium;
  --typography-font-weight-font-normal: Regular;
  --typography-line-height-leading-9: 36px;
  --typography-line-height-leading-7: 28px;
  --typography-line-height-leading-8: 32px;
  --typography-line-height-leading-6: 24px;
  --typography-line-height-leading-4: 16px;
  --typography-line-height-leading-none: 1px;
  --typography-line-height-leading-5: 20px;
  --typography-letter-spacing-tracking-tighter: -0.800000011920929px;
  --typography-line-height-leading-heading(none): 60px;
  --typography-letter-spacing-tracking-tight: -0.4000000059604645px;
  --color-border-border-brand: #3b82ff;
  --color-background-bg-white: #ffffff;
  --color-background-bg-disabled: #1e2939;
  --color-border-border-success: #009966;
  --color-border-border-danger: #ec003f;
  --color-border-border-warning: #ff5a1f;
  --color-border-border-dark: #4a5565;
  --color-background-bg-brand-strong: #0040d5;
  --container-xl: 1280px;
  --container-2xl: 1563px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-sm: 640px;
  --container-xs: 380px;
  --color-text-text-fg-danger: #ff2056;
  --border-border-width-border-0: 0px;
  --max-width-max-w-3xl: 768px;
  --max-width-max-w-2xl: 672px;
  --max-width-max-w-xl: 576px;
  --max-width-max-w-md: 448px;
  --max-width-max-w-7xl: 1280px;
  --max-width-max-w-4xl: 896px;
  --max-width-max-w-6xl: 1152px;
  --max-width-max-w-lg: 512px;
  --max-width-max-w-sm: 384px;
  --max-width-max-w-5xl: 1024px;
  --max-width-max-w-xs: 320px;
  --color-background-bg-tertiary-medium: #333e4f;
  --color-background-bg-success: #009966;
  --color-background-bg-danger: #c70036;
  --color-background-bg-warning: #d03801;
  --color-background-bg-success-strong: #007a55;
  --color-background-bg-danger-strong: #a50036;
  --color-background-bg-warning-strong: #b43403;
  --color-border-border-dark-subtle: #333e4f;
  --border-border-radius-rounded: 8px;
  --border-border-radius-rounded-xs: 4px;
  --bg-variants-gray: #030712;
  --color-background-bg-primary-strong: #333e4f;
  --color-background-bg-gray: #4a5565;
  --color-text-text-fg-yellow: #fdc700;
  --color-border-border-buffer: #030712;
  --color-border-border-buffer-medium: #101828;
  --color-border-border-buffer-strong: #1e2939;
  --color-background-bg-quaternary-medium: #4a5565;
  --color-border-border-light-medium: #333e4f;
  --color-border-border-brand-light: #004efd;
  --typography-font-size-text-xxs: 8px;
  --color-text-text-fg-success: #009966;
  --color-background-bg-brand-medium: #0f2a7a;
  --color-text-text-fg-warning-subtle: #ff5a1f;
  --color-border-border-buffer-gradient-secondary: #030712;
  --color-border-border-base-subtle: #101828;
  --color-border-border-light-subtle: #101828;
  --border-border-width-border-xl: 8px;
  --color-border-border-muted: #101828;
  --border-border-radius-rounded-xxs: 2px;
  --border-border-radius-rounded-xl: 16px;
  --border-border-radius-rounded-sm: 6px;
  --color-text-text-fg-brand-subtle: #bfdbfe;
  --color-text-text-fg-purple: #ad46ff;
  --color-text-text-fg-cyan: #00b8db;
  --color-text-text-fg-indigo: #615fff;
  --color-text-text-fg-pink: #f6339a;
  --color-text-text-fg-lime: #7ccf00;
  --color-background-bg-purple: #ad46ff;
  --color-background-bg-sky: #00a6f4;
  --color-background-bg-teal: #00bba7;
  --color-background-bg-pink: #f6339a;
  --color-background-bg-cyan: #00b8db;
  --color-background-bg-fuchsia: #e12afb;
  --color-background-bg-indigo: #615fff;
  --color-background-bg-orange: #ff8a4c;
  --color-border-border-purple: #ad46ff;
  --color-border-border-orange: #ff8a4c;
  --color-background-bg-tertiary-soft: #101828;
  --color-border-border-purple-subtle: #59168b;
  --color-border-border-yellow-subtle: #733e0a;
  --color-border-border-teal-subtle: #0d4e4a;
  --color-border-border-teal: #00d5be;
  --color-border-border-pink-subtle: #861043;
  --color-border-border-pink: #fb64b6;
  --color-background-bg-purple-soft: #3c0366;
  --color-background-bg-purple-medium: #59168b;
  --color-background-bg-purple-strong: #8200db;
  --color-background-bg-teal-soft: #032f2e;
  --color-background-bg-teal-medium: #0d4e4a;
  --color-background-bg-teal-strong: #00786f;
  --color-background-bg-pink-soft: #510424;
  --color-background-bg-pink-medium: #861043;
  --color-background-bg-pink-strong: #c6005c;
  --color-background-bg-yellow-soft: #432004;
  --color-background-bg-yellow-medium: #733e0a;
  --color-background-bg-yellow-strong: #a65f00;
  --color-background-bg-yellow: #fdc700;
  --color-border-border-yellow: #fdc700;
  --color-text-text-fg-purple-strong: #dab2ff;
  --color-text-text-fg-yellow-strong: #ffdf20;
  --color-text-text-fg-pink-strong: #fda5d5;
  --color-text-text-fg-teal: #00bba7;
  --color-text-text-fg-teal-strong: #46ecd5;
  /* Modal backdrop: gray-600 (#4a5565) @ 75% opacity */
  --color-background-bg-modal: rgba(74, 85, 101, 0.75);

  /* === Short alias (推奨) === */
  --radius-base: var(--border-border-radius-rounded-base);
  --font-font-base: var(--typography-font-family-font-base);
  --text-6xl: var(--typography-font-size-text-6xl);
  --text-4xl: var(--typography-font-size-text-4xl);
  --text-3xl: var(--typography-font-size-text-3xl);
  --text-2xl: var(--typography-font-size-text-2xl);
  --text-xl: var(--typography-font-size-text-xl);
  --text-lg: var(--typography-font-size-text-lg);
  --text-base: var(--typography-font-size-text-base);
  --text-sm: var(--typography-font-size-text-sm);
  --text-xs: var(--typography-font-size-text-xs);
  --bg-success-soft: var(--color-background-bg-success-soft);
  --bg-danger-soft: var(--color-background-bg-danger-soft);
  --text-fg-success-strong: var(--color-text-text-fg-success-strong);
  --text-fg-danger-strong: var(--color-text-text-fg-danger-strong);
  --border-success-subtle: var(--color-border-border-success-subtle);
  --border-danger-subtle: var(--color-border-border-danger-subtle);
  --bg-warning-soft: var(--color-background-bg-warning-soft);
  --bg-brand-softer: var(--color-background-bg-brand-softer);
  --bg-secondary: var(--color-background-bg-secondary);
  --border-warning-subtle: var(--color-border-border-warning-subtle);
  --text-fg-warning: var(--color-text-text-fg-warning);
  --text-heading: var(--color-text-text-heading);
  --text-white: var(--color-text-text-white);
  --border-width: var(--border-border-width-border);
  --border-base: var(--color-border-border-base);
  --border-brand-subtle: var(--color-border-border-brand-subtle);
  --text-fg-info: var(--color-text-text-fg-info);
  --border-width-lg: var(--border-border-width-border-lg);
  --text-fg-disabled: var(--color-text-text-fg-disabled);
  --text-fg-brand: var(--color-text-text-fg-brand);
  --text-body: var(--color-text-text-body);
  --text-black: var(--color-text-text-black);
  --text-body-subtle: var(--color-text-text-body-subtle);
  --bg-success-medium: var(--color-background-bg-success-medium);
  --bg-danger-medium: var(--color-background-bg-danger-medium);
  --bg-warning-medium: var(--color-background-bg-warning-medium);
  --bg-brand-soft: var(--color-background-bg-brand-soft);
  --bg-brand: var(--color-background-bg-brand);
  --text-fg-brand-strong: var(--color-text-text-fg-brand-strong);
  --bg-dark: var(--color-background-bg-dark);
  --bg-dark-strong: var(--color-background-bg-dark-strong);
  --bg-secondary-medium: var(--color-background-bg-secondary-medium);
  --bg-secondary-soft: var(--color-background-bg-secondary-soft);
  --bg-primary-soft: var(--color-background-bg-primary-soft);
  --bg-primary-medium: var(--color-background-bg-primary-medium);
  --bg-tertiary: var(--color-background-bg-tertiary);
  --border-light: var(--color-border-border-light);
  --border-width-md: var(--border-border-width-border-md);
  --radius-lg: var(--border-border-radius-rounded-lg);
  --radius-full: var(--border-border-radius-rounded-full);
  --border-base-medium: var(--color-border-border-base-medium);
  --radius-0: var(--border-border-radius-rounded-0);
  --bg-secondary-strong: var(--color-background-bg-secondary-strong);
  --border-base-strong: var(--color-border-border-base-strong);
  --bg-primary: var(--color-background-bg-primary);
  --bg-quaternary: var(--color-background-bg-quaternary);
  --text-5xl: var(--typography-font-size-text-5xl);
  --weight-extrabold: var(--typography-font-weight-font-extrabold);
  --weight-bold: var(--typography-font-weight-font-bold);
  --weight-semibold: var(--typography-font-weight-font-semibold);
  --weight-medium: var(--typography-font-weight-font-medium);
  --weight-normal: var(--typography-font-weight-font-normal);
  --leading-9: var(--typography-line-height-leading-9);
  --leading-7: var(--typography-line-height-leading-7);
  --leading-8: var(--typography-line-height-leading-8);
  --leading-6: var(--typography-line-height-leading-6);
  --leading-4: var(--typography-line-height-leading-4);
  --leading-none: var(--typography-line-height-leading-none);
  --leading-5: var(--typography-line-height-leading-5);
  --tracking-tighter: var(--typography-letter-spacing-tracking-tighter);
  --leading-heading(none): var(--typography-line-height-leading-heading(none));
  --tracking-tight: var(--typography-letter-spacing-tracking-tight);
  --border-brand: var(--color-border-border-brand);
  --bg-white: var(--color-background-bg-white);
  --bg-disabled: var(--color-background-bg-disabled);
  --border-success: var(--color-border-border-success);
  --border-danger: var(--color-border-border-danger);
  --border-warning: var(--color-border-border-warning);
  --border-dark: var(--color-border-border-dark);
  --bg-brand-strong: var(--color-background-bg-brand-strong);
  --text-fg-danger: var(--color-text-text-fg-danger);
  --border-width-0: var(--border-border-width-border-0);
  --bg-tertiary-medium: var(--color-background-bg-tertiary-medium);
  --bg-success: var(--color-background-bg-success);
  --bg-danger: var(--color-background-bg-danger);
  --bg-warning: var(--color-background-bg-warning);
  --bg-success-strong: var(--color-background-bg-success-strong);
  --bg-danger-strong: var(--color-background-bg-danger-strong);
  --bg-warning-strong: var(--color-background-bg-warning-strong);
  --border-dark-subtle: var(--color-border-border-dark-subtle);
  --radius: var(--border-border-radius-rounded);
  --radius-xs: var(--border-border-radius-rounded-xs);
  --bg-primary-strong: var(--color-background-bg-primary-strong);
  --bg-gray: var(--color-background-bg-gray);
  --text-fg-yellow: var(--color-text-text-fg-yellow);
  --border-buffer: var(--color-border-border-buffer);
  --border-buffer-medium: var(--color-border-border-buffer-medium);
  --border-buffer-strong: var(--color-border-border-buffer-strong);
  --bg-quaternary-medium: var(--color-background-bg-quaternary-medium);
  --border-light-medium: var(--color-border-border-light-medium);
  --border-brand-light: var(--color-border-border-brand-light);
  --text-xxs: var(--typography-font-size-text-xxs);
  --text-fg-success: var(--color-text-text-fg-success);
  --bg-brand-medium: var(--color-background-bg-brand-medium);
  --text-fg-warning-subtle: var(--color-text-text-fg-warning-subtle);
  --border-buffer-gradient-secondary: var(--color-border-border-buffer-gradient-secondary);
  --border-base-subtle: var(--color-border-border-base-subtle);
  --border-light-subtle: var(--color-border-border-light-subtle);
  --border-width-xl: var(--border-border-width-border-xl);
  --border-muted: var(--color-border-border-muted);
  --radius-xxs: var(--border-border-radius-rounded-xxs);
  --radius-xl: var(--border-border-radius-rounded-xl);
  --radius-sm: var(--border-border-radius-rounded-sm);
  --text-fg-brand-subtle: var(--color-text-text-fg-brand-subtle);
  --text-fg-purple: var(--color-text-text-fg-purple);
  --text-fg-cyan: var(--color-text-text-fg-cyan);
  --text-fg-indigo: var(--color-text-text-fg-indigo);
  --text-fg-pink: var(--color-text-text-fg-pink);
  --text-fg-lime: var(--color-text-text-fg-lime);
  --bg-purple: var(--color-background-bg-purple);
  --bg-sky: var(--color-background-bg-sky);
  --bg-teal: var(--color-background-bg-teal);
  --bg-pink: var(--color-background-bg-pink);
  --bg-cyan: var(--color-background-bg-cyan);
  --bg-fuchsia: var(--color-background-bg-fuchsia);
  --bg-indigo: var(--color-background-bg-indigo);
  --bg-orange: var(--color-background-bg-orange);
  --border-purple: var(--color-border-border-purple);
  --border-orange: var(--color-border-border-orange);
  --bg-tertiary-soft: var(--color-background-bg-tertiary-soft);
  --border-purple-subtle: var(--color-border-border-purple-subtle);
  --border-yellow-subtle: var(--color-border-border-yellow-subtle);
  --border-teal-subtle: var(--color-border-border-teal-subtle);
  --border-teal: var(--color-border-border-teal);
  --border-pink-subtle: var(--color-border-border-pink-subtle);
  --border-pink: var(--color-border-border-pink);
  --bg-purple-soft: var(--color-background-bg-purple-soft);
  --bg-purple-medium: var(--color-background-bg-purple-medium);
  --bg-purple-strong: var(--color-background-bg-purple-strong);
  --bg-teal-soft: var(--color-background-bg-teal-soft);
  --bg-teal-medium: var(--color-background-bg-teal-medium);
  --bg-teal-strong: var(--color-background-bg-teal-strong);
  --bg-pink-soft: var(--color-background-bg-pink-soft);
  --bg-pink-medium: var(--color-background-bg-pink-medium);
  --bg-pink-strong: var(--color-background-bg-pink-strong);
  --bg-yellow-soft: var(--color-background-bg-yellow-soft);
  --bg-yellow-medium: var(--color-background-bg-yellow-medium);
  --bg-yellow-strong: var(--color-background-bg-yellow-strong);
  --bg-yellow: var(--color-background-bg-yellow);
  --border-yellow: var(--color-border-border-yellow);
  --text-fg-purple-strong: var(--color-text-text-fg-purple-strong);
  --text-fg-yellow-strong: var(--color-text-text-fg-yellow-strong);
  --text-fg-pink-strong: var(--color-text-text-fg-pink-strong);
  --text-fg-teal: var(--color-text-text-fg-teal);
  --text-fg-teal-strong: var(--color-text-text-fg-teal-strong);
  --bg-modal: var(--color-background-bg-modal);
  /* --text-muted: dark 用上書き (light = gray/400 → dark = gray/600) */
  --text-muted: var(--gray-600);
  /* dark 側でも Figma 由来の文字列無効値 (Bold / Extrabold etc.) を数値で上書き */
  --weight-normal:   400;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;
}



/* ============================================================
   Layer 3+4 CANONICAL: Figma SSOT (auto-generated)
   ----------
   Source: figma-derived.css (toolchain/scripts/figma-build-css.mjs)
   Each rule has a Figma node id trace comment.
   ============================================================ */
/* ============================================================
   Layer 3: Components (from Figma COMPONENTS pages)
   ============================================================ */
/* fig:15115:1844 (default variant) */
.btn {
  display: flex;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-3);
  justify-content: center;
  align-items: center;
  background: var(--bg-brand);
  border-radius: var(--radius-xs);
  box-shadow: 0px 1px 0.5px rgba(29, 41, 61, 0.019999999552965164);
  color: var(--text-white);
  text-decoration: none;   /* <a class="btn"> の下線を打ち消す */
}

/* fig:15396:4087 (variant Color=Secondary diff) */
.btn.btn--secondary {
  background: var(--bg-primary-soft);
  border: var(--border-width) solid var(--border-base);
  color: var(--text-body);
}

/* fig:15115:1884 (variant Color=Success diff) */
.btn.btn--success {
  background: var(--bg-success);
}

/* fig:15115:1904 (variant Color=Danger diff) */
.btn.btn--danger {
  background: var(--bg-danger);
}

/* fig:15115:1924 (variant Color=Warning diff) */
.btn.btn--warning {
  background: var(--bg-warning);
}

/* fig:15394:5171 (variant Color=Dark diff) */
.btn.btn--dark {
  background: var(--bg-dark);
}

/* fig:15600:207870 (variant Color=Ghost diff) — user spec: text-body (text-heading は hover 時のみ) */
.btn.btn--ghost {
  color: var(--text-body);
}

/* fig:15115:1840 (variant Size=sm diff) */
.btn.btn--sm {
  padding: var(--space-2) var(--space-3);
}

/* fig:15115:1828 (variant Size=base diff) */
.btn.btn--base {
  padding: var(--space-2-5) var(--space-4);
}

/* fig:15115:1832 (variant Size=l diff) */
.btn.btn--l {
  padding: var(--space-3) var(--space-5);
}

/* fig:15115:1836 (variant Size=xl diff) */
.btn.btn--xl {
  padding: var(--space-3-5) var(--space-6);
}

/* fig:15115:1964 (variant State=Hover diff) */
.btn:hover {
  background: var(--bg-brand-strong);
}

/* fig:15115:1984 (variant State=Focus diff) */
.btn:focus {
  background: var(--bg-brand-strong);
  box-shadow: 0px 0px 0px var(--bg-brand-medium);
}

/* fig:15115:2004 (variant State=Disabled diff) */
.btn:disabled {
  background: var(--bg-disabled);
  border: var(--border-width) solid var(--border-base-medium);
  color: var(--text-fg-disabled);
}

/* fig:14986:52537 (default variant) */
/* === Alert (Figma 3:251728 — 5 type × 5 color) ===
   Type variants:
     Default     padding 16、icon + text + optional close (single line)
                 with action button は .alert--with-actions で padding-block 12
     Inline      padding 8/12 (compact)
     Complex     padding 16、icon + (title + description) + action button below + close
     Small       padding 4/8/4/4、radius 9999 (pill)、Badge + text + chevron
     Border top  Default 同 spec で radius=0 (section header 用)
   Color variants (5): Default / Info / Success / Warning / Danger
   Each color has matching bg / border / text + brand-strong button color。
   close button (×) と action button は optional — actions slot で右側 (close の左) に配置可能。 */
.alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);                                    /* Figma Hgap8 (icon ↔ text) */
  padding: var(--space-4);
  background-color: var(--bg-page);                   /* Default = gray-50 */
  border: var(--border-width) solid var(--border-base);                   /* gray-200 */
  border-radius: var(--radius-xs);
  color: var(--text-black);                              /* gray-900 */
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  box-sizing: border-box;
}
.alert__icon {                                 /* 16×16 leading icon */
  display: inline-flex;
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
  color: inherit;
}
.alert__body {                                 /* main text container — flex:1 で残り width を埋め close/action を右に押す */
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.alert__title {                                /* 16/16 500 (Complex の title) */
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  color: inherit;
}
.alert__description,
.alert__text {                                 /* 14/20 400 (Description text) */
  margin: 0 !important;                        /* preview の `.ds-section p` (Svelte scoped) を override */
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: inherit;
}
.alert__actions {                              /* 右端 (close の左)、action button slot */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.alert__close {                                /* close (×) icon button — 最右端、optional */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-4);
  height: var(--space-4);
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.8;
}
.alert__close:hover { opacity: 1; }

.alert--with-actions {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.alert--with-actions .alert__actions + .alert__close {
  margin-left: var(--space-2);
}

/* === Type modifiers === */
.alert--inline { padding: var(--space-2) var(--space-3); }          /* compact (Hgap8、padding 8/12) */

/* Border top — top border 4px のみ visible (left/right/bottom は透明)、radius 0 で section banner 用。
   Figma sides=t4/r0/b0/l0 (top stroke weight 4px、他 0)。 */
.alert--border-top {
  border-radius: 0;
  border-top-width: var(--border-width-lg);
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

/* Complex — column layout で title row + description + action button を縦積み。
   Figma 構造: "Description frame" (Vgap8 で title↔description) + Vgap16 で button。
   `.alert__content` で title+description を nest し、outer alert--complex の gap 16 で button と分離。 */
.alert--complex {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);                                   /* Figma 外側 Vgap16 (content ↔ button) */
}
.alert--complex .alert__content {              /* inner wrapper: title row + description (Vgap8) */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                                    /* Figma 内側 Vgap8 (title ↔ description) */
}
.alert--complex .alert__head {                 /* title row: icon + title + close */
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.alert--complex .alert__head .alert__title { flex: 1; }
.alert--complex .alert__actions { align-self: flex-start; }
/* Figma 3:251729: description / button ともに container 左端から始まる (icon と同 indent、追加 indent なし) */

/* Small — pill (radius 9999)、Badge ("New") + text + chevron right */
.alert--small {
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  border-radius: var(--radius-full);
  font-size: 14px;
}
.alert__badge {                                /* "New" badge inside Small alert */
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5) var(--space-2);
  background-color: var(--bg-quaternary);                   /* default = gray-200 (color 別に override) */
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: inherit;
  flex-shrink: 0;
}
.alert--small .alert__chevron {                /* trailing chevron-right (16×16) */
  flex-shrink: 0;
  margin-left: auto;
}

/* === Color modifiers (5) — Figma 確定 4 色 + Default === */
/* Default — gray-50 bg / gray-200 border / gray-900 text */
.alert--default { background-color: var(--bg-secondary); border-color: var(--border-base); color: var(--text-heading); }
.alert--default .alert__badge { background-color: var(--bg-quaternary); }

/* Info — blue-50 / blue-200 / brand-900 (#0f2a7a) */
.alert--info {
  background-color: var(--bg-brand-softer);
  border-color: var(--border-brand-subtle);
  color: var(--text-fg-info);
}
.alert--info .alert__badge { background-color: var(--bg-brand-soft); }

/* Success — green-50 / green-200 / dark green (#004f3b) */
.alert--success {
  background-color: var(--bg-success-soft);
  border-color: var(--border-success-subtle);
  color: var(--text-fg-success-strong);
}
.alert--success .alert__badge { background-color: var(--bg-success-medium); }

/* Warning — orange-50 / orange-200 / dark orange (#771d1d) */
.alert--warning {
  background-color: var(--bg-warning-soft);
  border-color: var(--border-warning-subtle);
  color: var(--text-fg-warning);
}
.alert--warning .alert__badge { background-color: var(--bg-warning-medium); }

/* Danger — red-50 / red-200 / dark red (#8b0836) */
.alert--danger {
  background-color: var(--bg-danger-soft);
  border-color: var(--border-danger-subtle);
  color: var(--text-fg-danger-strong);
}
.alert--danger .alert__badge { background-color: var(--bg-danger-medium); }

/* fig:3335:17111 (default variant) */
.badge {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-1-5);
  justify-content: center;
  align-items: center;
  background: var(--bg-danger-soft);
  border: var(--border-width) solid var(--border-danger-subtle);
  border-radius: var(--radius-xxs);
  color: var(--text-fg-danger-strong);
}

/* === Card (Figma 19626:19574 — image card) ===
   base: bg-card + border-base + radius 4 + pad 24 + vertical gap 24 + shadow-sm token。
   sub-elements:
     - .card__image    image / icon placeholder (gray-100 bg、radius 12、default 192h)
     - .card__heading-group  heading + text 縦 stack (gap 12)
     - .card__heading  24/32 700 (Figma)
     - .card__text     16/24 400
   note: .card は独立した content / image card 用 primitive。Section / Table / Alert / Empty state / Modal の代替にはしない。 */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);                                 /* Figma: 24 (旧 var(--space-7)=28 から修正) */
  background: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
  color: var(--text-black);
  font-family: var(--font-family);
}
.card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--space-48);
  background-color: var(--bg-tertiary);                     /* gray-100 placeholder */
  border-radius: var(--radius-lg);
  color: var(--text-label);                                /* icon color */
  flex-shrink: 0;
  overflow: hidden;
}
.card__image > img {                             /* 実画像は container 全体を fill (cover で crop) */
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__image > svg {                             /* icon placeholder は natural size 維持 */
  max-width: 100%;
  max-height: 100%;
}
.card__heading-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.card__heading {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--text-black);
  margin: 0 !important;                          /* preview の `.ds-section h2/h3` (Svelte scoped) を override */
}
.card__text {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--text-body);
  margin: 0 !important;
}

/* fig:15643:19620 (variant Type=With Image diff) */
.card.card--with-image {
  padding: var(--space-6);
}

/* fig:15643:19639 (variant Type=Split diff) */
.card.card--split {
  padding: var(--space-6);
}

/* fig:15643:19686 (variant Type=Centered with full image diff) */
.card.card--centered-with-full-image {
  color: var(--text-fg-brand-strong);
}

/* fig:15647:19728 (variant Type=User profile diff) */
.card.card--user-profile {
  padding: var(--space-6);
  justify-content: center;
  align-items: center;
}

/* fig:15650:21005 (variant Type=Login form diff) */
.card.card--login-form {
  padding: var(--space-6);
}

/* fig:15656:51464 (variant Type=E-commerce diff) */
.card.card--e-commerce {
  padding: var(--space-6);
  color: var(--text-fg-brand-strong);
}

/* fig:15660:1896 (variant Type=CTA card diff) */
.card.card--cta-card {
  padding: var(--space-6);
  align-items: center;
}

/* fig:15674:573 (variant Type=With full width tabs diff) */
.card.card--with-full-width-tabs {
  align-items: center;
  color: var(--text-body);
}

/* fig:15672:501 (variant Type=With nav tabs diff) */
.card.card--with-nav-tabs {
  gap: var(--space-8);
  padding: var(--space-6);
  align-items: center;
}

/* fig:15714:14518 (variant Type=Pricing card diff) */
.card.card--pricing-card {
  padding: var(--space-6);
  color: var(--text-body);
}

/* fig:15682:365 (variant Type=Cars with list diff) */
.card.card--cars-with-list {
  padding: var(--space-6);
}

/* fig:15716:6598 (variant Type=Crypto diff) */
.card.card--crypto {
  padding: var(--space-6);
}

/* fig:15716:1160 (variant Type=Grid card diff) */
.card.card--grid-card {
  justify-content: center;
}

/* === Stats widget (Figma 30:144285 — 10 type) ===
   KPI / dashboard 用 card。base = .stats-widget (white bg + border + radius 4 + pad 24)。
   variants:
     - default               label + number (column gap 8、cA=center — label 先、number 後)
     - --icon                with right icon (HORIZONTAL gap 14、left icon-shape 48×48)
     - --with-badge          stat + label + percent badge (column)
     - --progress            progress bar 内蔵 (heading & number + .progress)
     - --dropdown            dropdown header + button (HORIZONTAL header)
   sub-elements:
     - .stats-widget__number      24/24 700 #101828
     - .stats-widget__label       16/24 400 #4a5565
     - .stats-widget__icon-shape  48×48 brand-soft + brand icon (radius 4)
     - .stats-widget__group       heading & description column (flex gap 8) */
.stats-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  box-sizing: border-box;
  font-family: var(--font-family);
  min-width: 200px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stats-widget__number {
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  color: var(--text-black);
  margin: 0 !important;
}
.stats-widget__label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--text-body);
  margin: 0 !important;
}
/* === .kpi-denom — KPI fraction の「/ 分母」部分 ===
   分子（stats-widget__number / kpi-value）に続く span として使う。
   分子より小さく・細く・薄くすることで視覚的な重み付けを区別する。 */
.kpi-denom {
  font-size: var(--text-sm);       /* 14px vs 分子 24px */
  font-weight: var(--weight-regular);
  color: var(--text-body-subtle);
  margin-left: var(--space-1);
}
.stats-widget__icon-shape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  background-color: var(--bg-brand-softer);                     /* brand-50 */
  border-radius: var(--radius-xs);
  color: var(--text-fg-brand);                                /* brand */
  flex-shrink: 0;
}
.stats-widget__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
/* Variant: With right icon (HORIZONTAL) */
.stats-widget--icon {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3-5);
  text-align: left;
}
/* Variant: progress bar 内蔵 */
.stats-widget--progress {
  align-items: stretch;
  gap: var(--space-3);
  text-align: left;
}
/* Variant: dropdown & link header */
.stats-widget--dropdown {
  align-items: stretch;
  gap: var(--space-5);
  text-align: left;
}
.stats-widget__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2-5);
}
.stats-widget--section {
  min-width: 0;
}
.stats-widget__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-6);
}

/* === Widget / Chart Widget (Figma 30:144285 + 12:148628 SM + 48:144538 MD + 52:145124 LG)
   chart / KPI / dashboard widget。header (heading + delta or KPI) + body (chart) + footer (dropdown + link)。
   sizes:
     - .widget        (default = MD、min-width 360、pad 24、gap 24)
     - .widget--sm    (Chart Widget(SM)、min-width 280、pad 24、gap 24)
     - .widget--lg    (Chart Widget(LG) Desktop、pad 32、gap 32)
   chart specific sub-elements:
     - .widget__chart  chart container (optional min-height 200 推奨)
     - .widget__legend horizontal legend (gap 16、dot + text)
     - .widget__legend-dot 8×8 round
   header LG variant:
     - .widget-header--lg  multi-row header (column flex、gap 12) */
.widget {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  font-family: var(--font-family);
  min-width: 360px;
  box-shadow: var(--shadow-sm);
}
.widget--sm {
  min-width: 280px;
}
.widget--lg {
  padding: var(--space-8);
  gap: var(--space-8);
}

/* Chart container — chart 描画領域。SVG / canvas / chart library を内側に配置。
   layout (flex-direction / gap / height 等) は chart 種別ごとに inline or 個別 class で指定。 */
.widget__chart {
  position: relative;
}

/* Legend — chart 凡例 (HORIZONTAL gap 16、各 item は dot + text) */
.widget__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 12px;
  line-height: 16px;
  color: var(--text-body);
  font-weight: 500;
}
.widget__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}
.widget__legend-dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background-color: var(--bg-brand);
  flex-shrink: 0;
}

/* Header LG variant (Chart Widget MD/LG での multi-row header) */
.widget-header--lg {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}
.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.widget-header__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
.widget-header__number {
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  color: var(--text-black);
  margin: 0 !important;
}
.widget-header__label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--text-body);
  margin: 0 !important;
}
.widget-header__delta {                          /* % change indicator (e.g., +10%、-3.7%) */
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--text-fg-success);                                /* default: success */
  flex-shrink: 0;
}
.widget-header__delta--down { color: var(--text-fg-danger); } /* danger */
.widget-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--border-light);                 /* gray-100 */
}
.widget-footer__dropdown {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--text-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.widget-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--text-fg-brand);                                /* brand */
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
}
.widget-footer__link:hover { text-decoration: underline; }

/* fig:15611:223557 (default variant) */
/* === Pagination (Figma 15611:224012 — 8 Type × 2 Style 完全準拠) ===
   `.pagination`         outer flex container (gap 切替で type 別 layout)
   `.pagination__list`   joined button group (Hgap=-1、border 共有、first/last のみ radius)
   `.pagination__btn`    36h button (icon-only / text / mixed)、states: default/hover/active/disabled
   `.pagination__ellipsis` "..." separator (joined group 内で 36×36 dots icon)
   `.pagination--ghost`  Ghost style modifier (border / bg 削除、text body / hover で text-heading)
   helpers: `__helper` (showing N) / `__label` (Go to / Page) / `__input` / `__go-btn` */
.pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;                              /* 狭い viewport で button 折り返し */
  font-family: var(--font-family);
}
.pagination--gap-12 { gap: var(--space-3); }              /* Two buttons / Dropdown & buttons / Simple with input */
.pagination--gap-16 { gap: var(--space-4); }              /* With dropdown / With input */
.pagination--column { flex-direction: column; gap: var(--space-4); align-items: center; }   /* Buttons & helper text */

/* Joined button list — buttons share borders via margin-left: -1px (input-row--joined と同 pattern) */
.pagination__list {
  display: inline-flex;
  align-items: center;
  list-style: none;                             /* <li> bullet dot を消す */
  padding: 0;
  margin: 0;
}
.pagination__list .pagination__btn { border-radius: 0; }
.pagination__list .pagination__btn:not(:first-child) { margin-left: calc(var(--space-px) * -1); }
.pagination__list .pagination__btn:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.pagination__list .pagination__btn:last-child  { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.pagination__list .pagination__btn:hover,
.pagination__list .pagination__btn:focus-visible,
.pagination__list .pagination__btn[aria-current="page"] { z-index: 1; }

/* Base button — 36h、Gray style 既定 (white bg + gray-200 border + gray-600 text) */
.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);                                     /* icon + text 間 (Figma Hgap6) */
  height: var(--space-9);
  min-width: var(--space-9);
  padding: var(--space-2) var(--space-3);                            /* Figma 確定 (text variant)、icon-only も 36×36 維持 */
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);                   /* gray-200 */
  border-radius: var(--radius-xs);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-body);                               /* gray-600 */
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
}
.pagination__btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--bg-page);                    /* gray-50 */
}
.pagination__btn:focus-visible {
  outline: var(--border-width-md) solid var(--border-brand);
  outline-offset: calc(var(--space-0-5) * -1);
}
/* Active (current page) — Gray style: bg gray-50 + brand-medium text */
.pagination__btn[aria-current="page"] {
  background-color: var(--bg-page);
  color: var(--text-fg-brand);                               /* brand-medium */
}
/* Disabled — gray-400 text (clickable な見た目を消す) */
.pagination__btn:disabled,
.pagination__btn[aria-disabled="true"] {
  color: var(--text-muted);                               /* gray-400 */
  cursor: not-allowed;
  background-color: var(--bg-tertiary);                    /* gray-100 (Disabled label "of 99 pages" pattern) */
}
/* Icon-only square — padding 削除して 36×36 keep */
.pagination__btn--icon {
  padding: 0;
  width: var(--space-9);
}

/* Range / info text — pagination 内 「N-M件 / Total件」 等の plain text (button ではない) */
.pagination__range {
  font-family: inherit;
  font-size: var(--font-sm);                     /* 14 */
  font-weight: var(--weight-medium);
  color: var(--text-body);
  white-space: nowrap;
}

/* Ellipsis ("...") — joined list 内の dots-horizontal icon、disabled 風 (clickable でも非 active) */
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: 0;
  color: var(--text-body);
  cursor: default;
  box-sizing: border-box;
}

/* === Style=Ghost — border 削除、bg 透明 (active 以外)、text-body / hover で text-heading (user spec、btn--ghost と統一) === */
.pagination--ghost .pagination__btn,
.pagination--ghost .pagination__ellipsis {
  background-color: transparent;
  border: 0;
  color: var(--text-body);                               /* gray-600 */
}
.pagination--ghost .pagination__btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--bg-tertiary);                    /* gray-100 (slightly stronger hover) */
  color: var(--text-heading);                              /* gray-900 (hover で濃く、btn--ghost 同等の affordance) */
}
.pagination--ghost .pagination__btn[aria-current="page"] {
  background-color: var(--bg-page);
  color: var(--text-heading);                              /* gray-900 (Ghost active は brand 色なし、強調のため heading) */
}
/* Ghost disabled — `.pagination--ghost .pagination__btn` (0,2,0) が `.pagination__btn:disabled` (0,2,0) を後勝ちで上書きするため、
   ghost 用に disabled state を明示的に再定義する */
.pagination--ghost .pagination__btn:disabled,
.pagination--ghost .pagination__btn[aria-disabled="true"] {
  color: var(--text-muted);
  cursor: not-allowed;
}
/* Ghost: joined list でも border 無いので margin-left: -1 不要 */
.pagination--ghost .pagination__list .pagination__btn:not(:first-child) { margin-left: 0; }

/* Helpers — showing-text / page-input / go-btn */
.pagination__helper {                          /* "Showing 1 to 10 of 100 Entries" */
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: var(--text-body);
}
.pagination__label {                           /* "Go to" / "Page" inline label */
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  color: var(--text-body);
}
.pagination__input-row {                       /* Go to + input + Page wrapper */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.pagination__input {                           /* small page-number input (Figma 44×36 / 36×36) */
  width: var(--space-11);
  height: var(--space-9);
  padding: var(--space-2) var(--space-2-5);
  background-color: var(--bg-page);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-black);
  text-align: center;
  box-sizing: border-box;
  -moz-appearance: textfield;
  appearance: textfield;
}
.pagination__input::-webkit-outer-spin-button,
.pagination__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pagination__input:focus { outline: none; border-color: var(--text-fg-brand); }

.pagination__go-btn {                          /* "Go" button (dark navy bg + white text) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  height: var(--space-9);
  padding: var(--space-2) var(--space-3);
  background-color: var(--bg-dark);                   /* gray-800 */
  border: 0;
  border-radius: var(--radius-xs);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-white);
  cursor: pointer;
}
.pagination__go-btn:hover { background-color: var(--text-heading); }   /* gray-900 */

/* fig:15663:3499 (default variant) */
/* === Nav tabs (Figma 15663:3498 + 15663:3660 — 6 Type variants) ===
   `.tabs` container (gap 切替で variant)、`.tab` item (icon + text + badge optional)、
   active state は `.active` または `aria-selected="true"` で切替。
   Type variants: Default (sub nav) / Pills (filter/category) / Border bottom (page view/category)
                  Button group (utility mode switch) / Button (component-local)
                  / Vertical pills (page-local side nav) / Vertical card (settings-like section nav).
   Topbar 内 tabs は .tabs--border-bottom を基本とし、.tabs--fill / .tabs--padded の独自 rule を優先。 */
.tabs {
  display: flex;
  align-items: center;
  gap: var(--space-6);                                   /* Default: Figma Hgap24 */
  font-family: var(--font-family);
}

/* Type modifiers */
.tabs--pills { gap: var(--space-2); }                     /* Figma Hgap8 */
.tabs--border-bottom { border-bottom: var(--border-width) solid var(--border-base); }
.tabs--button {
  gap: var(--space-1);
  padding: var(--space-3);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
}
.tabs--vertical { flex-direction: column; gap: var(--space-1); align-items: stretch; }
/* Type=Fill — 各 tab を flex: 1 で full-width 等分配置 + center-aligned (Status Tabs 等で使用) */
.tabs--fill {
  width: 100%;
  gap: 0;
}
.tabs--fill > .tab {
  flex: 1;
  justify-content: center;
}
.tabs--vertical-card {
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
}
/* Type=Button group — segmented control (Figma 15667:6229)。
   joined buttons (gap 0、各 button 間 1px gray-200 divider)、
   container は bg white + border + radius 4 (overflow hidden で角丸 clip)。
   active で gray-50 bg + brand-medium icon (text は gray-900 固定)。
   width: fit-content で content 幅に shrink (デフォルトの flex は parent 全幅) */
.tabs--button-group {
  width: fit-content;
  gap: 0;
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

/* === Tab item base — text-only Default (gray-600 → brand-medium on hover/active) === */
.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);                                    /* Figma Hgap6 (icon ↔ text ↔ badge) */
  padding: 0;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-body);                              /* gray-600 */
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}
.tab:hover:not(:disabled),
.tab[aria-selected="true"],
.tab.active {
  color: var(--text-fg-brand);                              /* brand-medium */
}
.tab:focus-visible { outline: var(--border-width-md) solid var(--border-brand); outline-offset: var(--space-0-5); border-radius: var(--radius-xs); }

/* Type=Pills — padding 8/16、radius 4、active で blue-50 bg */
.tabs--pills .tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-xs);
}
.tabs--pills .tab:hover:not(:disabled),
.tabs--pills .tab[aria-selected="true"],
.tabs--pills .tab.active {
  background-color: var(--bg-brand-softer);
  color: var(--text-fg-brand);
}

/* Type=Border bottom — padding 8/0/12/0、active で 1px brand bottom border。
   Figma item 36h は理論上 padding 8/8 で center 配置だが、CSS 上は font line-height で descender が
   line-box 下端付近に来るため visual gap が不足 → bottom padding を 12px に増やして underline と
   text の breathing room を確保 (visual gap ~14px 確保) */
.tabs--border-bottom .tab {
  padding: var(--space-2) 0 var(--space-3);
  margin-bottom: calc(var(--space-px) * -1);                         /* container border と重ねる */
  border-bottom: var(--border-width) solid transparent;
}
.tabs--border-bottom .tab:hover:not(:disabled),
.tabs--border-bottom .tab[aria-selected="true"],
.tabs--border-bottom .tab.active {
  color: var(--text-fg-brand);
  border-bottom-color: var(--border-brand);
}
.tabs--border-bottom .tab:focus-visible { outline: none; border-radius: 0; box-shadow: 0 0 0 var(--border-width-md) var(--border-brand) inset; }

/* Type=Padded — Normal Tabs 等で使用。
   tabs--border-bottom .tab の `padding: 8 0 12` を override するため tabs--border-bottom rule の後に配置
   tab 自体の L/R padding は 0、tabs 間は 32px gap で形成する */
.tabs--padded {
  gap: var(--space-8);
}
.tabs--padded > .tab {
  padding-left: 0;
  padding-right: 0;
}

/* Type=Button (in bordered card) — padding 10/16、radius 2、active で gray-50 bg */
.tabs--button .tab {
  padding: var(--space-2-5) var(--space-4);
  border-radius: var(--radius-xxs);
  color: var(--text-black);                              /* gray-900 (active 系の色は bg で示す) */
}
.tabs--button .tab[aria-selected="true"],
.tabs--button .tab.active {
  background-color: var(--bg-page);
  color: var(--text-black);
}
.tabs--button .tab:hover:not(:disabled) { background-color: var(--bg-tertiary); color: var(--text-heading); }

/* Type=Button group — segmented joined buttons、padding 10/16、active で gray-50 bg。
   text は gray-900 固定、icon (svg) のみ active で brand-medium に切替 */
.tabs--button-group .tab {
  padding: var(--space-2-5) var(--space-4);
  border-radius: 0;
  border-right: var(--border-width) solid var(--border-base);
  color: var(--text-black);                              /* text gray-900 (常時) */
}
.tabs--button-group .tab svg { color: var(--text-body); }   /* icon gray-600 default */
.tabs--button-group .tab:last-child { border-right: 0; }
.tabs--button-group .tab:hover:not(:disabled) {
  background-color: var(--bg-tertiary);
  color: var(--text-black);
}
.tabs--button-group .tab[aria-selected="true"],
.tabs--button-group .tab.active {
  background-color: var(--bg-page);
  color: var(--text-black);                              /* text gray-900 維持 */
}
.tabs--button-group .tab[aria-selected="true"] svg,
.tabs--button-group .tab.active svg {
  color: var(--text-fg-brand);                              /* icon brand-medium */
}

/* Type=Vertical (full-width pill item per row) — padding 8/16、radius 4 */
.tabs--vertical .tab,
.tabs--vertical-card .tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-xs);
  justify-content: flex-start;
  width: 100%;
}
.tabs--vertical .tab:hover:not(:disabled),
.tabs--vertical .tab[aria-selected="true"],
.tabs--vertical .tab.active,
.tabs--vertical-card .tab:hover:not(:disabled),
.tabs--vertical-card .tab[aria-selected="true"],
.tabs--vertical-card .tab.active {
  background-color: var(--bg-brand-softer);
  color: var(--text-fg-brand);
}

/* === Drawer (Figma 15753:2373 Drawer / 15765:1636 Drawer heading / 17235:11029 Drawer footer) ===
   side-panel modal variant。Modal の structure と類似だが viewport 端に anchor する fixed panel。
   container: \`.drawer\` (white bg + pad 20 + VERTICAL gap 20)
   sections:  \`.drawer-header\` (pad 20、HORIZONTAL gap 24、border-bottom; \`--compact\` で pad 16) /
              \`.drawer-body\`   (VERTICAL gap 16) /
              \`.drawer-footer\` (pad 20、HORIZONTAL gap 16、border-top; \`--between\` / \`--stack\` modifier)
   sub-elements: title (18/28 700) / subtitle (14/20 400) /
                 __group / __icon-shape (48×48 white sq) / __logo / __icons / --vertical / __avatars
   backdrop:  \`.drawer-overlay\` (var(--bg-modal) = rgba(74,85,101,0.75))
   positioning: Layer 5 \`.drawer--right / --left / --top / --bottom\` (fixed) */
.drawer {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--bg-card);
  color: var(--text-black);
  font-family: var(--font-family);
  box-sizing: border-box;
}

/* === Dropdown (Figma 3283:21147 item / 15772:13690 header / 15772:13704 menu / 15791:11964 examples)
   .dropdown-menu  outer popover card (bg-card, border-base, radius-xs, shadow-md token)
   .dropdown-item  list item (h32, padding 8/8, gap 6, font 14/14/500)
     :hover         bg-tertiary, text-black
     :disabled      text-fg-disabled
   .dropdown-header  optional top section (bg-page)
   .dropdown-divider 1px line
   ============================================================ */

/* Item — primitive list row */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  width: 100%;
  padding: var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xxs);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  color: var(--text-body);                            /* gray-600 (Initial、Figma 確定) */
  text-align: left;
  text-decoration: none;
  transition: background-color var(--duration-normal, 0.2s) ease, color var(--duration-normal, 0.2s) ease;
  box-sizing: border-box;
}
.dropdown-item:hover,
.dropdown-item:focus-visible {
  background-color: var(--bg-tertiary);                 /* gray-100 (Hover、Figma 確定) */
  color: var(--text-black);                            /* gray-900 */
  outline: none;
}
.dropdown-item:disabled,
.dropdown-item[aria-disabled="true"] {
  color: var(--text-muted);                            /* gray-400 (Disabled) */
  cursor: not-allowed;
  background: transparent;
}
.dropdown-item--danger { color: var(--text-fg-danger); }
.dropdown-item--danger:hover { background-color: var(--bg-danger-soft); color: var(--text-fg-danger-strong); }

/* Item sub-elements */
.dropdown-item__icon-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  flex: 1;
  min-width: 0;
}
.dropdown-item__secondary {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  color: var(--text-label);                            /* gray-500 */
}
.dropdown-item:hover .dropdown-item__secondary { color: var(--text-heading); }
.dropdown-item__chevron {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

/* Two buttons variant — main row + side actions */
.dropdown-item--two-buttons {
  height: var(--space-10);
  justify-content: space-between;
}
.dropdown-item--two-buttons .dropdown-item__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  margin-left: auto;
}

/* Editable variant — actions are hidden by default, shown on hover/focus
   (user の personal saved view の edit/delete icons 等に使用)
   icons は plain (button styling 無し)、dropdown-item の高さを膨らませない */
.dropdown-item--editable {
  justify-content: space-between;
}
.dropdown-item--editable .dropdown-item__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);                       /* 8px between icons */
  margin-left: auto;
  margin-right: var(--space-1);              /* 4px from right edge */
  visibility: hidden;
}
.dropdown-item--editable:hover .dropdown-item__actions,
.dropdown-item--editable:focus-within .dropdown-item__actions {
  visibility: visible;
}
.dropdown-item__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-body);
  cursor: pointer;
}
.dropdown-item__action:hover { color: var(--text-heading); }
.dropdown-item__action--danger { color: var(--text-fg-danger); }
.dropdown-item__action--danger:hover { color: var(--text-fg-danger-strong); }

/* Boxed item — vertical card style */
.dropdown-item--boxed {
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-3);
  background-color: var(--bg-tertiary);                 /* gray-100 */
}

/* fig:15424:45889 — Tooltip (Figma 完全準拠)
   bg-dark、text-white 500/14/16、padding 8/12、radius-xs、shadow-md token。
   Position 4 種: Top / Bottom / Left / Right (arrow ::after で実装) */
.tooltip {
  position: absolute;
  z-index: var(--z-tooltip);
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background-color: var(--bg-dark);
  color: var(--text-white);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  pointer-events: none;
}
/* Arrow (CSS triangle、bg と同色) */
.tooltip::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: var(--border-width-lg) solid transparent;
}
/* === Position modifiers === */
.tooltip--top {
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
}
.tooltip--top::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--border-dark);
}
.tooltip--bottom {
  top: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
}
.tooltip--bottom::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--border-dark);
}
.tooltip--left {
  right: calc(100% + var(--space-2));
  top: 50%;
  transform: translateY(-50%);
}
.tooltip--left::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--border-dark);
}
.tooltip--right {
  left: calc(100% + var(--space-2));
  top: 50%;
  transform: translateY(-50%);
}
.tooltip--right::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--border-dark);
}
/* Hover-driven helper — wrap trigger + tooltip in `.tooltip-wrap`
   (parent must have position: relative) */
.tooltip-wrap {
  position: relative;
  display: inline-flex;
}
.tooltip-wrap > .tooltip {
  display: none;
  opacity: 0;
  transition: opacity var(--duration-normal) ease;
}
.tooltip-wrap:hover > .tooltip,
.tooltip-wrap:focus-within > .tooltip {
  display: inline-flex;
  opacity: 1;
}

/* fig:16164:35871 (default variant) */
/* === Toast (Figma 16164:35870 — 9 Type variants) ===
   全 toast: bg-card (Warning/Error は semantic tint)、border-width/base、radius-xs、shadow-md、padding space-4
   width 切替: space-80 default / 380 / 384 / 640 (Warning)
   layout: 横並び (icon/avatar + content + close) または column (With header / progress bar)
   実運用: `.toast-region` (position: fixed; bottom/right: space-6) 内に stack、auto-dismiss (JS 制御) */
.toast {
  display: flex;
  gap: var(--space-3);                                   /* Figma Hgap12 (icon ↔ content ↔ close) */
  padding: var(--space-4);
  width: var(--space-80);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
  font-family: var(--font-family);
  color: var(--text-black);
  box-sizing: border-box;
  pointer-events: auto;
}
/* Width modifiers — content type に応じて切替 */
.toast--w-380 { width: 380px; }
.toast--w-384 { width: 384px; }
.toast--w-640 { width: 640px; }

/* Color variants (Warning / Error 専用 tinted bg/border、text 色は __title/__message を含む全 child を上書き) */
.toast--warning {
  background-color: var(--bg-warning-soft);
  border-color: var(--border-warning-subtle);
  color: var(--text-fg-warning);
}
.toast--error {
  background-color: var(--bg-danger-soft);
  border-color: var(--border-danger-subtle);
  color: var(--text-fg-danger-strong);
}

/* Column layout (With header / With progress bar / With illustration の縦積み) */
.toast--column { flex-direction: column; gap: var(--space-3-5); }
.toast--header-padded { padding: var(--space-3); }       /* With header は padding 12 */

/* Single-line variants (Icon shape & text / Icon & text) */
.toast--single { align-items: center; gap: var(--space-2-5); padding: var(--space-4); }

/* === Slots === */
.toast__icon {                                 /* 20×20 leading icon */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  flex-shrink: 0;
  color: inherit;
}
.toast__icon-shape {                           /* 36×36 colored bg + icon (Icon shape variants、円形) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  border-radius: var(--radius-full);                       /* circular */
  flex-shrink: 0;
}
.toast__icon-shape--info    { background-color: var(--bg-brand-softer); color: var(--text-fg-brand); }
.toast__icon-shape--success { background-color: var(--bg-success-soft); color: var(--text-fg-success-strong); }
.toast__icon-shape--warning { background-color: var(--bg-warning-soft); color: var(--text-fg-warning); }
.toast__icon-shape--danger  { background-color: var(--bg-danger-soft); color: var(--text-fg-danger-strong); }
.toast__avatar { flex-shrink: 0; }             /* Avatar 32×32 (use .avatar) */

.toast__header {                               /* With header の top bar (gray-50 bg) */
  padding: var(--space-2) var(--space-2-5);
  background-color: var(--bg-page);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  color: var(--text-black);
}
.toast__body {                                 /* main content column、flex:1 で残り width 占有 */
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.toast__group {                                /* title + message inner wrapper (gap 2 or 8) */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.toast__group--tight { gap: var(--space-0-5); }             /* Avatar & button: name↔message gap 2 */
.toast__title {
  margin: 0 !important;                        /* preview の `.ds-section p` override */
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  color: inherit;
}
.toast__title--lg { font-size: 16px; line-height: 24px; }   /* Avatar & button: 16/24 */
.toast__message {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: inherit;
}
.toast__message--muted { color: var(--text-body); }     /* default toast の message は gray-600 */
.toast__time {                                 /* "a few seconds ago" — brand-medium */
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  color: var(--text-fg-brand);
}
.toast__actions {                              /* buttons row — gap 12 */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.toast__progress {                             /* progress bar row (left-text + bar + right-text) */
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.toast__progress-text {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-body);
  flex-shrink: 0;
}
.toast__progress-bar {                         /* same as `.progress__track` 6h */
  flex: 1;
  height: var(--space-1-5);
  background-color: var(--bg-quaternary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.toast__progress-fill {
  height: 100%;
  background-color: var(--bg-brand);
  border-radius: var(--radius-lg);
  transition: width 0.2s ease;
}

/* Close button — 32×32 circle (Figma "Button" 32×32 r=16) */
.toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--text-body);
  cursor: pointer;
  flex-shrink: 0;
}
.toast__close:hover { background-color: var(--bg-tertiary); }
.toast__close:focus-visible { outline: var(--border-width-md) solid var(--border-brand); outline-offset: var(--space-0-5); }
/* Avatar & button variant の close は brand-medium icon 色 */
.toast__close--brand { color: var(--text-fg-brand); }

/* === Stepper (Figma 16135:14545 nav link + 148:145630 navigation + 16143:14072 examples) ===
   Wizard / multi-step form 用 navigation。`.stepper` container + `.stepper__step` items + `.stepper__separator` line。
   step 内: `.stepper__shape` (numbered circle / icon shape / dot) + `.stepper__text` (+ optional `.stepper__desc`)。
   States (item に付与): `--initial` (default、gray) / `--active` (brand) / `--completed` (brand + check) / `--error` (red) / `--disabled` (gray-400) */
.stepper {
  display: flex;
  align-items: center;
  gap: var(--space-4);                                   /* Default Hgap16 */
  font-family: var(--font-family);
}
.stepper--vertical { flex-direction: column; align-items: stretch; gap: 0; }
.stepper--gap-20 { gap: var(--space-5); }                /* Only icons / Icons & text */
.stepper--with-dots {                          /* text 上 + dot 下 + 横 line を背景に */
  position: relative;
  justify-content: space-between;
  gap: 0;
}
.stepper--with-dots::before {                  /* horizontal line through dots (bottom-aligned) */
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 7px;                                 /* dot center: 12px from bottom (dot 16h、center 8) */
  height: var(--space-px);
  background-color: var(--bg-quaternary);
  z-index: 0;
}
.stepper--with-dots .stepper__step { position: relative; z-index: 1; }
/* dot 自身が white bg を持ち line を mask、text 側は透明で line を通す */

/* Step item — flex row default、Default type は icon + text inline */
.stepper__step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);                                    /* Default Hgap8 */
  color: var(--text-body);                              /* gray-600 (Initial) */
}
.stepper__step--vertical-stack {
  flex-direction: column;
  gap: var(--space-3);                                   /* Vgap12 (with dots variant) */
}
.stepper__step--with-desc {
  align-items: center;
  gap: var(--space-3);                                   /* Hgap12 (Number & text / Icon shape & text) */
}

/* Shape — numbered circle / icon shape / dot */
.stepper__shape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);                                 /* Default 20×20 (Initial: border-only) */
  height: var(--space-5);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--text-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.stepper__shape--lg {                          /* Number & text / Icon shape & text 36×36 */
  width: var(--space-9);
  height: var(--space-9);
  background-color: var(--bg-tertiary);                   /* default tinted bg */
  border: 0;
  font-size: 16px;
  line-height: 16px;
}
.stepper__shape--xl {                          /* Only icons 48×48 */
  width: var(--space-12);
  height: var(--space-12);
  background-color: var(--bg-tertiary);
  border: 0;
}
.stepper__shape--dot {                         /* With dots variant 16×16 */
  width: var(--space-4);
  height: var(--space-4);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  font-size: 0;
}

/* Text */
.stepper__text {
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  color: inherit;
  white-space: nowrap;
}
.stepper__group {                              /* heading + desc wrapper */
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}
.stepper__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: inherit;
  opacity: 0.95;
}

/* Separator — between steps (horizontal default、vertical で flex direction) */
.stepper__separator {
  flex: 1;
  min-width: var(--space-6);
  height: var(--space-px);
  background-color: var(--bg-quaternary);
}
/* Vertical variant — Figma 161:146117 (Type=Vertical, Breakpoint=Desktop)
   markup は `.stepper__shape--lg` (36×36) を使用、separator は 1×56 line を shape center に配置。
   counterAxisAlignItems=CENTER (figma) → no-desc / with-desc とも align-items: center。 */
.stepper--vertical .stepper__step {
  align-items: center;                         /* figma cAlign=CENTER */
  gap: var(--space-3);
}
.stepper--vertical .stepper__text {
  white-space: normal;                         /* sidebar 内で wrap 許可 */
}
.stepper--vertical .stepper__separator {
  flex: 0 0 auto;
  width: var(--space-px);
  height: var(--space-14);                                /* figma: 1×56 vertical line */
  min-width: 0;
  margin-left: calc((var(--space-9) - var(--border-width-md)) / 2); /* 36 shape の center */
}

/* === State modifiers === */
/* Active — brand color + brand border on shape */
.stepper__step--active {
  color: var(--text-fg-brand);
}
.stepper__step--active .stepper__shape {
  border-color: var(--border-brand);
  color: var(--text-fg-brand);
}
.stepper__step--active .stepper__shape--lg,
.stepper__step--active .stepper__shape--xl {
  background-color: var(--bg-brand-softer);
  color: var(--text-fg-brand);
}
.stepper__step--active .stepper__shape--dot {                /* Figma 16135:14545: outlined (white bg + brand border) */
  background-color: var(--bg-card);
  border-color: var(--border-brand);
}

/* Completed — Figma 16135:14545 (Default outlined / Number&text & Icon shape are tinted bg) */
.stepper__step--completed {
  color: var(--text-fg-brand);
}
.stepper__step--completed .stepper__shape {                  /* Default: outlined brand */
  background-color: transparent;
  border-color: var(--border-brand);
  color: var(--text-fg-brand);
}
.stepper__step--completed .stepper__shape--lg,
.stepper__step--completed .stepper__shape--xl {              /* Number&text / Icon shape: tinted bg + brand */
  background-color: var(--bg-brand-softer);
  color: var(--text-fg-brand);
}
.stepper__step--completed .stepper__shape--dot {             /* Dot: filled brand */
  background-color: var(--bg-brand);
  border-color: var(--border-brand);
}

/* Error — Figma 16135:14545 (Default outlined / large is tinted bg) */
.stepper__step--error {
  color: var(--text-fg-danger);
}
.stepper__step--error .stepper__shape {                      /* Default: outlined danger */
  background-color: transparent;
  border-color: var(--border-danger);
  color: var(--text-fg-danger);
}
.stepper__step--error .stepper__shape--lg,
.stepper__step--error .stepper__shape--xl {                  /* Number&text / Icon shape: tinted danger + dark danger icon */
  background-color: var(--bg-danger-soft);
  color: var(--text-fg-danger-strong);
}
.stepper__step--error .stepper__shape--dot {                 /* Dot: filled danger */
  background-color: var(--bg-danger);
  border-color: var(--border-danger);
}

/* Disabled — Figma 16135:14545 (gray-400 全般、dot は white bg + gray border) */
.stepper__step--disabled {
  color: var(--text-muted);
}
.stepper__step--disabled .stepper__shape {
  border-color: var(--border-base);
  color: var(--text-muted);
}
.stepper__step--disabled .stepper__shape--lg,
.stepper__step--disabled .stepper__shape--xl {
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
}
.stepper__step--disabled .stepper__shape--dot {
  background-color: var(--bg-card);
  border-color: var(--border-base);
}

/* === Card alert variation — Figma 16135:14545 (Type=Card alert) / 16143:14063 (Cards example) ===
   各 step が card 状: 440×56、bg + border (1) + radius 4 + padding 16、Number + Title + (optional) trailing icon。
   States: Initial #f9fafb / Active & Completed #eff6ff + #bfdbfe / Error #fef0f2 + #ffccd3 / Disabled = Initial 風 + gray-400 text。 */
.stepper--cards {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
.stepper__step--card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  background-color: var(--bg-page);
  color: var(--text-body);
  width: 100%;
}
.stepper__step--card .stepper__num {           /* card 内の number は plain text (circle なし) */
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: inherit;
  flex-shrink: 0;
  min-width: var(--space-3);
}
.stepper__step--card .stepper__text {
  flex: 1;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: inherit;
  white-space: normal;
}
.stepper__step--card .stepper__card-icon {
  margin-left: auto;
  display: inline-flex;
  flex-shrink: 0;
  color: inherit;
}
/* state overrides — selector 2 つ組み合わせで base state より specificity 高く */
.stepper__step--card.stepper__step--active,
.stepper__step--card.stepper__step--completed {
  background-color: var(--bg-brand-softer);
  border-color: var(--border-brand-subtle);
  color: var(--text-fg-info);                              /* Figma: brand-900 (text & icon) */
}
.stepper__step--card.stepper__step--error {
  background-color: var(--bg-danger-soft);
  border-color: var(--border-danger-subtle);
  color: var(--text-fg-danger-strong);
}
.stepper__step--card.stepper__step--disabled {
  background-color: var(--bg-page);
  border-color: var(--border-base);
  color: var(--text-muted);
}

/* === List (Figma 15660:11206 List item / 15660:12367 List) ===
   横配置 list を表す primitive。container = `.list` + items = `.list-item`。
   size:
     - `.list` / `.list--sm` — Size=sm (default、font-size 14px、line-height 20px)
   container variants:
     - `.list`           — Type=Default (column flex, gap 16)
     - `.list--divider`  — Type=Divider (gap 0、各 item 間に 1px gray-200 line + padding 12)
   item base: 24h、HORIZONTAL flex、cA=center、gap 6、radius 6 (hover 用)。
   states: Initial = body #4a5565 / icon #6a7282、Hover = #101828、Disabled = #99a1af。
   sub-elements: __icon (20×20 leading) / __avatar (32×32) / __icon-shape (36×36 rounded square) /
                 __text (main 14/20) / __body (text + sub stack) / __sub (helper text 14/20) /
                 __trailing (右寄せ wrapper) / __num ($599 等右寄せ number) / __sum-status (Transaction 系の縦 stack 右寄せ)。
   Card variant (`.list-item--card`): bg + border + radius 4 + padding 16 + gap 24 (Type=Card)。 */
.list {
  --list-item-font-size: var(--text-sm);
  --list-item-line-height: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-family: var(--font-family);
}
.list--sm {
  --list-item-font-size: var(--text-sm);
  --list-item-line-height: 20px;
}
/* 2-line body (avatar/icon-shape + helper text) を含む list は items が縦に大きいので gap を 16 に拡張 */
.list:has(.list-item__body) {
  gap: var(--space-4);
}
.list--divider {
  gap: 0;
}
.list--divider > .list-item {
  padding-block: var(--space-3);
  border-radius: 0;
}
.list--divider > .list-item:first-child { padding-top: 0; }
.list--divider > .list-item:last-child  { padding-bottom: 0; }
.list--divider > .list-item:not(:last-child) {
  border-bottom: var(--border-width) solid var(--border-base);
}

/* Item base */
.list-item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-family: var(--font-family);
  font-size: var(--list-item-font-size, var(--text-sm));
  line-height: var(--list-item-line-height, 20px);
  font-weight: 400;
}
.list-item:hover,
.list-item--active {
  color: var(--text-black);
}
.list-item--disabled,
.list-item:disabled {
  color: var(--text-muted);
  pointer-events: none;
  cursor: not-allowed;
}

/* Leading icon — 20×20 (Lucide currentColor 利用、icon のみ少し濃い gray) */
.list-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  flex-shrink: 0;
  color: var(--text-label);
}
.list-item:hover .list-item__icon,
.list-item--active .list-item__icon { color: var(--text-heading); }
.list-item--disabled .list-item__icon { color: var(--text-fg-disabled); }

/* Avatar — 32×32 round (img 想定) */
.list-item__avatar {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

/* Icon shape — 36×36 rounded square + tinted bg (Transaction 系) */
.list-item__icon-shape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  border-radius: var(--radius-xs);
  background-color: var(--bg-tertiary);
  color: var(--text-body);
  flex-shrink: 0;
}

/* avatar / icon-shape の直後に来る body は item base の gap (6) より広め (12) を取る
   — Figma の Left content frame は gap 8 だが視認性向上で 12 を採用 */
.list-item__avatar + .list-item__body,
.list-item__icon-shape + .list-item__body {
  margin-left: var(--space-1-5);                            /* base gap 6 + 6 = 12 */
}

/* Body — text 単体 OR text + helper の縦 stack */
.list-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-px);                                    /* figma: 1px */
  min-width: 0;
}
.list-item__text {
  font-size: var(--list-item-font-size, var(--text-sm));
  line-height: var(--list-item-line-height, 20px);
  font-weight: 400;
  color: inherit;
}
.list-item__body > .list-item__text {         /* with-helper の main text も Size=sm (14/20) */
  font-size: var(--list-item-font-size, var(--text-sm));
  line-height: var(--list-item-line-height, 20px);
  font-weight: 500;
  color: var(--text-black);
}
.list-item--disabled .list-item__body > .list-item__text { color: var(--text-fg-disabled); }
.list-item__sub {
  font-size: var(--list-item-font-size, var(--text-sm));
  line-height: var(--list-item-line-height, 20px);
  font-weight: 400;
  color: var(--text-body);
}
.list-item--disabled .list-item__sub { color: var(--text-fg-disabled); }

/* Trailing — 右寄せ */
.list-item__trailing {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  margin-left: auto;
  flex-shrink: 0;
  color: inherit;
}

/* Right number — fs=14/20 fw=500 (With number 系) */
.list-item__num {
  font-size: var(--list-item-font-size, var(--text-sm));
  line-height: var(--list-item-line-height, 20px);
  font-weight: 500;
  color: inherit;
  flex-shrink: 0;
  margin-left: auto;
}
.list-item__num--lg {                         /* 互換 class。List の default は Size=sm のまま */
  font-size: var(--list-item-font-size, var(--text-sm));
  line-height: var(--list-item-line-height, 20px);
}

/* Sum & Status — Transaction 系の右寄せ縦 stack */
.list-item__sum-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  margin-left: auto;
  flex-shrink: 0;
}
.list-item__sum {
  font-size: var(--list-item-font-size, var(--text-sm));
  line-height: var(--list-item-line-height, 20px);
  font-weight: 700;
  color: var(--text-black);
}
.list-item--disabled .list-item__sum { color: var(--text-fg-disabled); }
.list-item__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--list-item-font-size, var(--text-sm));
  line-height: var(--list-item-line-height, 20px);
  font-weight: 400;
  color: var(--text-body);
}
.list-item__status::before {
  content: '';
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background-color: var(--bg-success);                   /* default: success */
  flex-shrink: 0;
}
.list-item__status--warning::before { background-color: var(--bg-warning-strong); }
.list-item__status--danger::before  { background-color: var(--text-fg-danger); }
.list-item--disabled .list-item__status,
.list-item--disabled .list-item__status::before { color: var(--text-fg-disabled); background-color: var(--text-fg-disabled); }

/* Card variant — bg + border + radius 4 + padding 16 + gap 24 */
.list-item--card {
  padding: var(--space-4);
  gap: var(--space-6);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  background-color: var(--bg-page);
}
.list-item--card:hover,
.list-item--card.list-item--active {
  background-color: var(--bg-brand-softer);
  border-color: var(--border-brand-subtle);
  color: var(--text-fg-info);                              /* brand-900 */
}
.list-item--card.list-item--disabled {
  background-color: var(--bg-page);
  border-color: var(--border-base);
  color: var(--text-muted);
}

/* === Skeleton (Figma 13251:80914 — 6 type × dark variants) ===
   Predictable layout の初期ロード placeholder。composable な sub-elements で 6 variant を表現。
   action processing / background refresh / Empty / Error の代替にはしない。
   bar 色: primary placeholder = var(--bg-gray)、secondary placeholder = var(--bg-quaternary)
   sub-elements:
     - \`.skeleton__bar\`        horizontal placeholder bar (token color、full radius、height 8 default)
     - \`.skeleton__bar--light\` secondary lighter bar
     - \`.skeleton__bar--lg\`    heading bar
     - \`.skeleton__image\`      image placeholder
     - \`.skeleton__circle\`     round avatar placeholder
   variants:
     - \`.skeleton\`             base (column flex、gap 16、pad 16)
     - \`.skeleton--image-text\` Type=Image + Text (HORIZONTAL)
     - \`.skeleton--text\`       Type=Text (centered)
     - \`.skeleton--list\`       Type=List (bordered rows、no padding)
     - \`.skeleton--simple-text\` Type=Simple text (no padding、gap 10)
     - \`.skeleton--widget\`     Type=Widget (gap 24)
   animation: \`.skeleton--animate\` で pulse opacity (任意 opt-in)
*/
.skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  font-family: var(--font-family);
}

/* === sub-elements === */
.skeleton__bar {
  height: var(--space-2);
  background-color: var(--bg-gray);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.skeleton__bar--light { background-color: var(--bg-quaternary); }
.skeleton__bar--lg    { height: var(--space-7); border-radius: var(--radius-full); }   /* heading shape */
.skeleton__bar--md    { height: 9px; }
.skeleton__bar--sm    { height: 6px; }
.skeleton__bar--xs    { height: 5px; }

.skeleton__image {
  background-color: var(--bg-gray);
  border-radius: var(--radius-xs);
  width: 100%;
  height: 95px;                                  /* component dimension: Type=Card + Image */
  flex-shrink: 0;
}

.skeleton__circle {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background-color: var(--bg-quaternary);
  flex-shrink: 0;
}
.skeleton__circle--sm { width: var(--space-5); height: var(--space-5); }   /* user-circle 等 */

/* layout helpers */
.skeleton__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-1-5);
}
.skeleton__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

/* === Variants === */
.skeleton--image-text {                          /* Type=Image + Text (Horizontal) */
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
}
.skeleton--image-text .skeleton__image {
  width: var(--space-56);
  height: 148px;
  flex-shrink: 0;
}

.skeleton--text {                                /* Type=Text (centered heading + author) */
  align-items: center;
}

.skeleton--list {                                /* Type=List (bordered table rows) */
  padding: 0;
  gap: 0;
}
.skeleton--list > .skeleton__list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2-5);
  border-bottom: var(--border-width) solid var(--border-base);
  height: var(--space-10);
  box-sizing: border-box;
}
.skeleton--list > .skeleton__list-row:last-child { border-bottom: 0; }

.skeleton--simple-text {                         /* Type=Simple text (multi-line bars) */
  padding: 0;
  gap: var(--space-2-5);
}

.skeleton--widget {                              /* Type=Widget (larger gap) */
  gap: var(--space-6);
}

/* === animation (opt-in) === */
@keyframes ds-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.skeleton--animate .skeleton__bar,
.skeleton--animate .skeleton__image,
.skeleton--animate .skeleton__circle {
  animation: ds-skeleton-pulse 1.6s ease-in-out infinite;
}

/* === Accordion (Figma 2370:20939 + 17169:283464) ===
   FAQ / collapsible content。base = .accordion (vertical stack of items)。
   Style variants:
     - .accordion             (default、container 1 つに radius 12、items 間は border 区切り)
     - .accordion--cards      (各 item が card、独立 border + radius 4)
   Item:
     - .accordion-item              container
     - .accordion-item__head        button (HORIZONTAL、heading + chevron、cA=center pA=space-between)
     - .accordion-item__body        collapsible body (VERTICAL gap 12)
   States (head):
     - default: bg transparent、text gray-700 (#4a5565)
     - hover:   bg gray-50 (#f9fafb)、text gray-900
     - open:    bg gray-100 (#f3f4f6)、text gray-900
   Sub-elements:
     - __lead          left side wrapper (icon + heading group、HORIZONTAL gap 8)
     - __title         16/24 500
     - __subtitle      14/20 400 (with-subheader 用)
     - __group         title + subtitle column (gap 1)
     - __icon-shape    36×36 round white + gray border (with-subheader 用)
     - __chevron       angle-down/up (open で 180deg rotate) */
.accordion {
  display: flex;
  flex-direction: column;
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);                            /* user spec: Default / With sub-header とも 4 */
  overflow: hidden;
  font-family: var(--font-family);
  background: var(--bg-card);
}
.accordion-item {
  display: flex;
  flex-direction: column;
  border-bottom: var(--border-width) solid var(--border-base);
}
.accordion-item:last-child { border-bottom: 0; }

/* Card variant — items は独立 card */
.accordion--cards {
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: var(--space-2);
  overflow: visible;
}
.accordion--cards .accordion-item {
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

/* Flush variant (Figma 2382:21370) — outer border / radius なし、各 item は bottom border のみ。pad 20 (small) */
.accordion--flush {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.accordion--flush .accordion-item__head {
  padding: var(--space-5);                                 /* Figma Flush: 20 all sides */
}
.accordion--flush .accordion-item__body {
  padding: var(--space-5);
}

/* Head button */
.accordion-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);                            /* Figma desktop: vertical 20、horizontal 24 (\"24/20\" は w/h ではなく v/h) */
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--text-body);
  width: 100%;
  font-family: var(--font-family);
  box-sizing: border-box;
}
.accordion-item__head:hover:not(:disabled) {
  background-color: var(--bg-page);
  color: var(--text-black);
}
.accordion-item__head[aria-expanded="true"],
.accordion-item--open > .accordion-item__head {
  background-color: var(--bg-tertiary);
  color: var(--text-black);
}

/* Lead (icon + heading) */
.accordion-item__lead {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
.accordion-item__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: inherit;
  margin: 0 !important;
}
.accordion-item__subtitle {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--text-body);
  margin: 0 !important;
}
.accordion-item__group {                         /* title + subtitle column */
  display: flex;
  flex-direction: column;
  gap: var(--space-px);
  flex: 1;
  min-width: 0;
}
.accordion-item__icon-shape {                    /* 36×36 round (with-subheader) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  background: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-full);
  color: var(--text-black);
  flex-shrink: 0;
}
/* lead 内に icon-shape がある時 gap を 10 に拡張 (Figma: Icon & Heading gap=10) */
.accordion-item__lead:has(.accordion-item__icon-shape) {
  gap: var(--space-2-5);
}
.accordion-item__chevron {
  flex-shrink: 0;
  color: inherit;
  display: inline-flex;
  transition: transform 0.2s ease;
}
.accordion-item__head[aria-expanded="true"] .accordion-item__chevron,
.accordion-item--open > .accordion-item__head .accordion-item__chevron {
  transform: rotate(180deg);
}

/* Body */
.accordion-item__body {
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--text-body);
  background: var(--bg-card);
  border-top: var(--border-width) solid var(--border-base);
}
.accordion-item__body > * { margin: 0 !important; }

/* Mobile breakpoint — pad 14/16 (Figma mobile spec) */
@media (max-width: 640px) {
  .accordion-item__head { padding: var(--space-3-5) var(--space-4); }
  .accordion-item__body { padding: var(--space-4); }
}

/* === Chat bubble (Figma 15722:4499 Bubble + 3173:984 Bubble content + 15722:3849 Chat bubble) ===
   chat / messaging UI 用 bubble。3 layer 構成:
     1. .chat               row container (Direction=Left/Right、avatar + bubble、HORIZONTAL gap 10)
     2. .chat-bubble        bubble shell (bg + radius asymmetric + pad 16、Orientation 別 corner radius)
     3. .chat-bubble__*     content sub-elements (text / file / audio / image 等)
   Direction modifier:
     - .chat--left          avatar 左 + bubble 右 (受信側)、bubble は flat top-right
     - .chat--right         bubble 左 + avatar 右 (送信側)、bubble は flat top-left + reverse layout
   Bubble variants:
     - .chat-bubble (default、bg gray-100 + pad 16)
     - .chat-bubble--clean (no bg/padding、text only) */
.chat {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  font-family: var(--font-family);
}
.chat--right {
  flex-direction: row-reverse;
}
.chat__avatar {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  object-fit: cover;
  background-color: var(--bg-quaternary);                      /* fallback when img missing */
}

.chat-bubble {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background-color: var(--bg-tertiary);                      /* gray-100 (Figma Bubble bg) */
  /* Orientation=Left: 受信側、flat top-right */
  border-radius: var(--radius) 0 var(--radius) var(--radius);                  /* tl=8, tr=0, br=8, bl=8 */
  max-width: 360px;
  box-sizing: border-box;
  font-family: var(--font-family);
}
/* Media (non-text-only) bubbles: min-width 320px (Figma 確定: image/link/file/audio/grid 系) */
.chat-bubble:has(.chat-bubble__image),
.chat-bubble:has(.chat-bubble__images),
.chat-bubble:has(.chat-bubble__link),
.chat-bubble:has(.chat-bubble__file),
.chat-bubble:has(.chat-bubble__audio) {
  min-width: var(--space-80);
}
/* Orientation=Right (送信側): flat top-left */
.chat--right .chat-bubble,
.chat-bubble--right {
  border-radius: 0 var(--radius) var(--radius) var(--radius);                  /* tl=0, tr=8, br=8, bl=8 */
}

/* Clean variant — bg / padding なし (text-only bubble) */
.chat-bubble--clean {
  background-color: transparent;
  padding: 0;
}

/* Bubble header — name + timestamp */
.chat-bubble__head {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}
.chat-bubble__name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--text-black);
  margin: 0 !important;
}
.chat-bubble__time {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--text-body);
}

/* Bubble body — main content */
.chat-bubble__text {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--text-body);
  margin: 0 !important;
}

/* Status footer — \"Delivered\" / \"Read\" 等 */
.chat-bubble__status {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--text-label);                                 /* gray-600 lighter */
  margin: 0 !important;
}

/* === Bubble content sub-types === */

/* Type=Image (image inside bubble) */
.chat-bubble__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 175px;
  background-color: var(--bg-page);                      /* lighter gray for embedded */
  border-radius: var(--radius-xs);
  overflow: hidden;
  color: var(--text-label);
}
.chat-bubble__image > img,
.chat-bubble__image > svg { max-width: 100%; max-height: 100%; object-fit: cover; }

/* Type=Grid images — 2 image grid */
.chat-bubble__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

/* Type=Link — preview card with bg #f9fafb + border + radius 12 + pad 16 */
.chat-bubble__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background-color: var(--bg-page);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.chat-bubble__link a {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text-fg-brand);
  text-decoration: none;
  word-break: break-all;
}

/* Type=File — file row with download */
.chat-bubble__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2-5);
  width: 100%;
}
.chat-bubble__file-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  flex: 1;
  min-width: 0;
}
.chat-bubble__file-name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text-black);
  margin: 0 !important;
}
.chat-bubble__file-meta {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--text-body);
  display: flex;
  gap: var(--space-2);
}
.chat-bubble__file-action {
  flex-shrink: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-body);
  padding: 0;
}

/* Type=Audio — pause + waveform + duration */
.chat-bubble__audio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.chat-bubble__audio-play {
  flex-shrink: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-body);
  padding: 0;
}
.chat-bubble__audio-bars {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
}
.chat-bubble__audio-bar {
  flex: 1;
  height: var(--space-3);
  background-color: var(--bg-gray);
  border-radius: var(--radius-xxs);
}
.chat-bubble__audio-bar--played { background-color: var(--bg-brand); }
.chat-bubble__audio-time {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--text-black);
  flex-shrink: 0;
}

/* Bubble + dots wrapper — bubble の隣に more menu (dots-vertical) を opt-in で配置
   (Figma 15722:3850: editable mode のみ dots あり、view-only は省略) */
.chat__bubble-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  min-width: 0;                                  /* bubble の max-width を有効化 */
}
.chat--right .chat__bubble-wrap {
  flex-direction: row-reverse;                   /* 送信側: dots は bubble の左 (avatar の反対側) */
}
/* dots-vertical button (more options) — 編集可能 mode のみ markup に含める。
   ホバー (\.chat:hover) または focus-visible 時に表示、layout は常に確保 (visibility) */
.chat__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-body);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.chat:hover .chat__dots,
.chat__dots:focus-visible {
  visibility: visible;
  opacity: 1;
}
.chat__dots:hover { color: var(--text-heading); background-color: var(--bg-tertiary); }

/* === Timeline (Figma 15925:181007 Timeline Item / 15925:181000 Timeline) ===
   container = `.timeline` (vertical column, gap 44) / `.timeline--horizontal` (row, gap 44, line=top border)。
   item = `.timeline-item` (relative + padding-left 28、dot は ::before、line は ::after で next item へ繋ぐ)。
   default dot = 12×12、bg gray-100、white outer ring (line を mask)。
   `.timeline--cards` で dot 20×20 + light brand bg、items 内側に `.timeline-item__card` (bg + border + radius 4 + pad 24) を被せる。
   sub-elements: __head (badge + title + desc 縦 stack、gap 8) / __title (18/28 700) / __desc (16/24 400) / __buttons (HORIZONTAL gap 12) / __card (optional card wrapper)。 */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  font-family: var(--font-family);
}
.timeline-item {
  position: relative;
  padding-left: var(--space-7);                          /* dot (12) + 16 spacing */
  display: flex;
  flex-direction: column;
  gap: var(--space-5);                                   /* head ↔ buttons (Figma 確定) */
}
/* Dot — Default 12×12、gray-100 bg、white ring */
.timeline-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-2);                                    /* badge (20h) center より少し上、title baseline 周辺 */
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-full);
  background-color: var(--bg-tertiary);
  box-shadow: 0 0 0 2px var(--border-buffer);               /* white ring (line mask 用) */
  z-index: 1;
}
/* Line — 隣接 item へ繋ぐ vertical line */
.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 5.5px;                                 /* dot center (6) - 0.5 で 1px line を中央に */
  top: var(--space-3-5);                                   /* dot center (8 + 6 = 14) */
  bottom: -58px;                               /* gap (44) + 次 dot center (14) = 58、次 dot の white ring に隠れる */
  width: var(--space-px);
  background-color: var(--bg-quaternary);
  z-index: 0;
}

/* Head — badge + title + desc 縦 stack */
.timeline-item__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;                     /* badge が伸びないように */
  gap: var(--space-2);
}
.timeline-item__title {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--text-black);
  margin: 0 !important;                        /* preview の `.ds-section h3` (Svelte scoped) を override */
}
.timeline-item__desc {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--text-body);
  margin: 0 !important;                        /* preview の `.ds-section p` (Svelte scoped) を override */
}
.timeline-item__buttons {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Card wrapper — Type=As card 等で head + buttons を card で囲む。直接 item の child として 1 つだけ置く想定 */
.timeline-item__card {
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Cards variant — dot を 20×20 + light brand bg、items は自動で card 風 (Icons & Card) */
.timeline--cards .timeline-item {
  padding-left: var(--space-9);                          /* 20 dot + 16 spacing */
}
.timeline--cards .timeline-item::before {
  top: var(--space-4);                                   /* card padding-top 24 と整合 (24 - dot半 - 微調整) */
  width: var(--space-5);
  height: var(--space-5);
  background-color: var(--bg-brand-softer);
  box-shadow: 0 0 0 2px var(--border-buffer);
}
.timeline--cards .timeline-item:not(:last-child)::after {
  left: 9.5px;                                 /* 20 dot center - 0.5 */
  top: 26px;                                   /* dot center (16 + 20/2) */
  bottom: -70px;                               /* gap (44) + next dot center (26) で次 dot center に到達 */
}

/* Horizontal variant — items を横並び、line は container 上端 (border-top) */
.timeline--horizontal {
  flex-direction: row;
  gap: var(--space-11);
  padding-top: var(--space-7);                           /* dot + 16 spacing */
  border-top: var(--border-width) solid var(--border-base);
  position: relative;
}
.timeline--horizontal .timeline-item {
  padding-left: 0;
  flex: 1 1 0;
  min-width: 0;
  /* dot を上に移動 */
}
.timeline--horizontal .timeline-item::before {
  left: 0;
  top: -34px;                                  /* container padding-top 28 + dot height/2 - 12 = -34 で上 line に乗る */
}
.timeline--horizontal .timeline-item::after {
  /* horizontal mode は line 不要 (container 上の border-top が一本通る) */
  display: none;
}

/* fig:14047:80996 (default variant) */
/* === Progress bar (Figma 15626:14514 Bars + 672:988 Progress Bars) ===
   `.progress`                outer wrapper (Top/Bottom label: flex column gap 6)
   `.progress--side-label`    horizontal: label + bar + label (gap 6)
   `.progress__label-row`     2 labels に対する flex row (space-between)
   `.progress__label`         12/16 500 gray-600
   `.progress__track`         track (h=6 default、gray-200 bg、radius 12、overflow hidden)
   `.progress__track--lg`     h=10
   `.progress__fill`          colored fill (h=100%、radius 12、width inline で % 指定、transition)
   color modifier: --primary / --success / --gray / --dark / --danger / --warning */
.progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);                                    /* Figma Vgap6 (label ↔ bar) */
  width: 100%;
  font-family: var(--font-family);
}
.progress--side-label {
  flex-direction: row;
  align-items: center;
  gap: var(--space-1-5);                                    /* Figma Hgap6 (label ↔ bar) */
}
.progress__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.progress__label {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-body);                              /* gray-600 */
}
.progress__track {
  position: relative;
  width: 100%;                                 /* column flex (Top/Bottom label) で stretch */
  height: var(--space-1-5);                                 /* Size=base */
  background-color: var(--bg-quaternary);                   /* gray-200 */
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.progress__track--lg { height: 10px; }         /* Size=lg */
/* Side label: row flex 内で track が remaining space を埋める */
.progress--side-label .progress__track { flex: 1; width: auto; }
.progress__fill {
  height: 100%;
  background-color: var(--bg-brand);                   /* default = Color=Primary */
  border-radius: var(--radius-lg);
  transition: width var(--duration-normal, 0.2s) ease;
}
.progress__fill--primary { background-color: var(--bg-brand); }
.progress__fill--success { background-color: var(--bg-success); }
.progress__fill--gray    { background-color: var(--bg-gray); }
.progress__fill--dark    { background-color: var(--bg-dark); }
.progress__fill--danger  { background-color: var(--text-fg-danger); }
.progress__fill--warning { background-color: var(--bg-warning); }

/* === Rating (Figma 15656:54363 — 3 type variants) ===
   Type=Default:     read-only 5 stars (20×20 yellow) + score text
   Type=With badge:  5 stars + badge (e.g. ".badge--info" の "4.8 out of 5")
   Type=Star input:  interactive 1-5 star input
   Type=Scale input: NPS-style scale — left label + joined 0-5 buttons + right label */
.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);                                    /* Figma Hgap8 (stars ↔ text/badge) */
  font-family: var(--font-family);
}
.rating__stars {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);                                    /* Figma Hgap4 (star 同士) */
}
.rating__star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--text-fg-yellow);                              /* yellow-400 (Figma 確定) */
  cursor: default;
}
button.rating__star { cursor: pointer; }
.rating__star--inactive { color: var(--bg-gray); }    /* semantic gray (未選択 star) */
.rating__star:focus-visible { outline: var(--border-width-md) solid var(--border-brand); outline-offset: var(--space-0-5); border-radius: var(--radius-xxs); }
.rating__score {
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  color: var(--text-body);                              /* gray-600 */
}

/* Type=Radio input (NPS scale) — label + joined 0-5 buttons + label */
.rating--scale { gap: var(--space-4); }                  /* Figma Hgap16 (label ↔ buttons) */
.rating__label {
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  color: var(--text-black);                              /* gray-900 */
}
.rating__scale {
  display: inline-flex;
  align-items: center;
}
.rating__scale-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);                  /* gray-200 */
  border-radius: 0;                            /* joined */
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-black);                              /* gray-900 */
  cursor: pointer;
  box-sizing: border-box;
}
.rating__scale .rating__scale-btn:not(:first-child) { margin-left: calc(var(--space-px) * -1); }
.rating__scale .rating__scale-btn:first-child {
  border-top-left-radius: var(--radius-xs);
  border-bottom-left-radius: var(--radius-xs);
}
.rating__scale .rating__scale-btn:last-child {
  border-top-right-radius: var(--radius-xs);
  border-bottom-right-radius: var(--radius-xs);
}
.rating__scale-btn:hover:not(:disabled) { background-color: var(--bg-secondary); z-index: 1; }
.rating__scale-btn:focus-visible { z-index: 1; outline: var(--border-width-md) solid var(--border-brand); outline-offset: calc(var(--space-0-5) * -1); }
.rating__scale-btn[aria-checked="true"] {
  background-color: var(--bg-page);
  color: var(--text-fg-brand);                              /* brand-medium で selected を明示 */
  z-index: 1;
}

/* === Separator (Figma 15913:178898 — 3 type variants with text + Plain) ===
   Type=Default:        solid line + text + solid line (gray-200 1px)
   Type=Gradient lines: fade-out gradient + text + fade-in gradient
   Type=Dashed:         dashed line + text + dashed line
   Type=Plain:          text なし horizontal rule
   text は 14/14 500 gray-600、左右 line は flex で残り space を埋める (Hgap16) */
.separator {
  display: flex;
  align-items: center;
  gap: var(--space-4);                                   /* Figma Hgap16 (line ↔ text ↔ line) */
  font-family: var(--font-family);
}
.separator__line {
  flex: 1;
  height: var(--space-px);
  background-color: var(--border-base);
}
.separator__text {
  font-size: var(--font-sm);
  font-weight: 500;
  line-height: var(--leading-tight);
  color: var(--text-body);                              /* gray-600 */
  white-space: nowrap;
}
/* Type=Gradient lines — left line fades from transparent → gray-200、right line gray-200 → transparent */
.separator--gradient .separator__line:first-child {
  background: linear-gradient(to right, transparent, var(--border-base));
}
.separator--gradient .separator__line:last-child {
  background: linear-gradient(to right, var(--border-base), transparent);
}
/* Type=Dashed — solid bg → dashed border-top (1px gray-200) */
.separator--dashed .separator__line {
  background: none;
  height: 0;
  border-top: var(--border-width) dashed var(--border-base);
}
.separator-plain {
  border: 0;
  border-top: var(--border-width) solid var(--border-base);
  margin: var(--space-4) 0;
}

/* fig:19931:75647 (default variant) */
/* === Topbar (Figma 19931:45071、3 variants: Default / Status Tabs / Normal Tabs) ===
   page header — breadcrumb + title + (optional badge + back-arrow + buttons + 3-dots + tabs)
   Layer 4 generic、全画面共通の page header として使用 */
.topbar-block {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-card);
  border-bottom: var(--border-width) solid var(--border-base);
}
.topbar-block__main {                               /* 上段: 92h、左右に Frame 4 + Button Container */
  display: flex;
  align-items: flex-end;                            /* right side button row を bottom に揃える */
  justify-content: space-between;
  gap: var(--space-3);                              /* 12px */
  padding: var(--space-4) var(--space-5) var(--space-5) var(--space-5);  /* 16/20/20/20 */
}
.topbar-block__left {                               /* breadcrumb + title row 縦 stack */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                              /* 16px */
  flex: 1;
  min-width: 0;
}
.topbar-block__title-row {                          /* back-arrow + badge + title 横並び */
  display: flex;
  align-items: center;
  gap: var(--space-2);                              /* 8px (back-arrow / badge / title 間) */
  min-width: 0;
}
.topbar-block__title-row > .saved-view {            /* title と saved-view の間は 16px (user spec) — gap 8 + extra margin-left 8 で合計 16 */
  margin-left: var(--space-2);
}
.topbar-block__back {                               /* back-arrow (sub-page でのみ表示) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-body);
  flex-shrink: 0;
}
.topbar-block__back:hover { color: var(--text-heading); }
.topbar-block__title {                              /* page title (必須、20/700/28、Figma 確定) */
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--text-heading);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-block__right {                              /* right side: archive label + buttons + 3-dots */
  display: flex;
  align-items: center;
  gap: var(--space-5);                              /* 20px between archive label and button group */
  flex-shrink: 0;
}
.topbar-block__archive {                            /* archive count link (applicable 時のみ、click でアーカイブ list へ遷移) */
  font-size: 14px;
  line-height: 20px;
  color: var(--text-body);                          /* default は body 色 (gray-600)、subtle */
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
}
.topbar-block__archive:hover {
  color: var(--text-fg-brand);                      /* hover で brand 色 + underline */
  text-decoration: underline;
}
.topbar-block__buttons {                            /* button list — max 2 buttons + 3-dots */
  display: flex;
  align-items: center;
  gap: var(--space-2);                              /* 8px between buttons */
}
.topbar-block__inline-select {                      /* optional context selector — left of button group */
  display: flex;
  align-items: center;
  gap: var(--space-2);                              /* 8px between label and select */
  margin-right: var(--space-2);                     /* 8px gap before first button */
}
.topbar-block__inline-select-label {               /* label text for inline select */
  font-size: var(--text-sm);
  color: var(--text-body);
  white-space: nowrap;
}
.topbar-block__tabs {                               /* 下段の nav tabs (Status Tabs / Normal Tabs variant でのみ) */
  padding: 0 var(--space-5);
}

/* === Application UI Sticky Footer (Figma 20094:124265 — 2 type) ===
   app shell / page level の fixed action surface。production use では必ず .app-footer--sticky を付ける。
   spec: h=72、pad 12/32、gap 24、bg white、border-top gray-200。
   variants:
     - Middle-aligned (default): 決済 / 最終確認用。single CTA button only
     - --split: 編集 / 管理 / 選択済み項目からの作成・編集用。左 summary + 右 actions
*/
.app-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-8) var(--space-5);
  background-color: var(--bg-primary);
  border-top: var(--border-width) solid var(--border-base);
  box-sizing: border-box;
  width: 100%;
}
.app-footer--split { justify-content: space-between; }
.app-footer--end { justify-content: flex-end; }
.app-footer--sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto; /* override base width:100% so left+right constraints determine width */
  z-index: var(--z-sticky);
}
/* .page-fl (sidenav shell): offset footer by sidenav collapsed width so it doesn't cover the nav rail */
.page-fl .app-footer--sticky {
  left: 64px;
}
.app-footer__label-pair {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.app-footer__label {
  font-size: var(--text-base);
  line-height: 24px;
  font-weight: var(--weight-normal);
  color: var(--text-body);
}
.app-footer__value {
  font-size: var(--text-base);
  line-height: 24px;
  font-weight: var(--weight-bold);
  color: var(--text-heading);
}
.app-footer__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* fig:19932:281348 (default variant) */
/* === Section component (Figma 19932:281350) — Layer 4 generic, 4 hierarchy levels ===
   Nesting max 3 levels、3-level の場合 last は必ず 4th。組合せ例: 1st > 2nd > 4th / 2nd > 3rd > 4th 等 */
.section {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  overflow: hidden;
  color: var(--text-heading);
  box-shadow: var(--shadow-sm);
}
/* 2nd/3rd/4th nested sections: no outer border / radius (visual hierarchy via header bg + 4th border-bottom only) */
.section--lvl-2,
.section--lvl-3,
.section--lvl-4 {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* === Section Header (Figma 19932:276608) — 4 Hierarchy × 4 Type ===
   Heights per Figma: 1st=56 / 2nd=48 / 3rd=38(title)-48(button) / 4th=38(title)-48(button) */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);                                  /* 20 between title and actions */
  padding: var(--space-3) var(--space-5);               /* 1st default: 12/20 */
  background-color: var(--slate-200);                   /* 1st bg: slate-200 */
  color: var(--text-heading);
  min-height: 56px;                                     /* Figma 1st default */
  box-sizing: border-box;
}
button.section-header {
  width: 100%;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.section-header__title {                                 /* title group: icon + text + meta icon + badge */
  display: flex;
  align-items: center;
  gap: var(--space-3);                                  /* 12 */
  flex: 1;
  min-width: 0;
}
.section-header__title-text {                            /* 1st default: 18/700/28 (Figma 確定) — flex 無し、icon/badge と隣接 */
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--text-heading);
  margin: 0;
}
.section-header__actions {                               /* button list / toggle buttons / badge group */
  display: flex;
  align-items: center;
  gap: var(--space-2);                                  /* 8 */
  flex-shrink: 0;
}

/* Hierarchy 2nd — 16/16/12/12 padding、slate-100、title 16/600/24、min-height 48 */
.section-header--lvl-2 {
  padding: var(--space-3) var(--space-4);               /* 12/16 */
  background-color: var(--slate-100);
  min-height: 48px;
}
.section-header--lvl-2 .section-header__title-text {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

/* Hierarchy 3rd — padding 8/16 (V/H、user spec)、bg slate-100、title 14/600/20、min-height 38 (title only) */
.section-header--lvl-3 {
  padding: var(--space-2) var(--space-4);
  background-color: var(--slate-100);
  min-height: 38px;
}
.section-header--lvl-3 .section-header__title-text {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

/* Hierarchy 4th — padding 8/16/8/0 (V/H、user spec)、no bg、title 14/500/20、min-height 38、border-bottom (user spec) */
.section-header--lvl-4 {
  padding: var(--space-2) var(--space-4) var(--space-2) 0;
  background-color: transparent;
  min-height: 38px;
  border-bottom: var(--border-width) solid var(--border-base);
}
.section-header--lvl-4 .section-header__title-text {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

/* Section Body (Widget) — section content container with form-grid 等 */
.section-body {
  padding: var(--space-5);                              /* 1st: 20 all sides (user spec) */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                                  /* 16 between content groups */
  background-color: var(--bg-card);
}
.section-body > p {
  margin-top: 0;
  margin-bottom: 0;
}
.section-body :is(.card, .stats-widget, .widget, .table-card) {
  box-shadow: none;
}
/* section-body 内の stats-widget は min-width を解除して grid 1fr が正しく機能するようにする */
.section-body .stats-widget {
  min-width: 0;
}
/* table-card inside section-body: edge-to-edge; section owns border/radius/shadow */
.section-body > .table-card {
  margin-top: 0;                                          /* clear .table-card base 16px */
  margin-bottom: 0;                                       /* clear .table-card base 16px; flex gap handles spacing */
  margin-left: calc(-1 * var(--space-5));                 /* reach section inner left edge */
  margin-right: calc(-1 * var(--space-5));                /* reach section inner right edge */
  max-width: calc(100% + 2 * var(--space-5));             /* counteract max-width: 100% base */
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
.section-body > .table-card:first-child { margin-top: calc(-1 * var(--space-5)); }
.section-body > .table-card:last-child  { margin-bottom: calc(-1 * var(--space-5)); }
/* add bottom border when table is followed by other content (e.g. action row) */
.section-body > .table-card:not(:last-child) {
  border-bottom: var(--border-width) solid var(--border-default);
}
/* restore top separator: overrides .table-card > .tbl:first-child... { border-top: 0 } at line 4375 */
.section-body > .table-card > .tbl:first-child thead tr:first-child .tbl-cell-head,
.section-body > .table-card > .tbl-scroll:first-child .tbl thead tr:first-child .tbl-cell-head {
  border-top: var(--border-width) solid var(--border-default);
}
/* === .action-row — section 内フォーム送信ボタン行 (右寄せ固定) ===
   section-body の直接の子として置き、section-body の gap: var(--space-4) でフォームと分離する。
   複数ボタン間は gap: var(--space-2)。primary は右端に置く (btn placement rule)。 */
.action-row {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.section-body.hidden { display: none; }
.section-body--lvl-2,
.section-body--lvl-3 {
  padding: var(--space-4);                              /* 2nd / 3rd: 16 all sides */
}
.section-body--lvl-4 {
  padding: var(--space-4) 0;                            /* 4th: 16 V / 0 H */
}
/* nested 4th section: form-grid-N の直後に来る場合は 12px 上余白を入れて grid と分離 */
:is(.form-grid, .form-grid-1, .form-grid-2, .form-grid-3, .form-grid-4, .form-grid-5, .form-grid-6, .form-grid-7, .form-grid-8) + .section--lvl-4 {
  margin-top: var(--space-3);                           /* 12 */
}

/* Variant: header-bg=false — no separate header bar、1st title is inline within body */
.section--no-header-bg > .section-body {
  gap: var(--space-5);                                  /* 20 between title and content */
}
.section--no-header-bg > .section-body > .section-header {
  padding: 0;
  background-color: transparent;
  min-height: auto;
}

/* === Form Grid (Figma 19932:280991) — label/value data grid for section body ===
   Use .form-grid-N (N=1..8) for new UI. .form-grid is kept as a legacy 4-col alias. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);                                  /* 20 between items */
}
.form-grid-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                                  /* 8 between term and description */
  min-width: 0;
}
.form-grid-item--compact { gap: var(--space-2); }
.form-grid-item__term {                                  /* label: 14/20/600 heading */
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--weight-semibold, 600);
  color: var(--text-heading);
  margin: 0;
}
.form-grid-item__description {                           /* value: 16/24/regular body */
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--text-body);
  margin: 0;
}
.form-grid-item__description-wrap {                       /* read-only description wrapper、edit mode で input field と高さを揃える (Figma Frame 6 — min-h 40 + align center) */
  display: flex;
  align-items: center;
  min-height: 40px;
}
.form-grid-item__badges {                                /* badge row */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* === Modal (Figma 3284:23643 Modal / 15848:175695 header / 15848:175329 footer) ===
   container: \`.modal\`     (white bg + gray-200 border + radius 8 + pad 24 + VERTICAL gap 24)
   sections:  \`.modal-header\` (pad 20、HORIZONTAL gap 24、border-bottom)
              \`.modal-body\`   (VERTICAL gap 16、no padding/border、scroll 可)
              \`.modal-footer\` (pad 16、HORIZONTAL gap 12、justify-end / \`--between\` で space-between)
   close btn: \`.modal-close\` (36×36 radius 4)
   title:     \`.modal-title\` (18/28 700)、\`.modal-subtitle\` (14/20 400 supporting text) */
.modal {
  position: relative;                            /* `.modal-close--floating` の absolute positioning 基準 */
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                                     /* user spec: sections (header / body / footer) 間 24px */
  padding: var(--space-6);                                 /* user spec: modal 全体 24px (Figma 3284:23659 準拠) */
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius);
  box-shadow: 0 1px 0.5px rgba(29, 41, 61, 0.02);
  color: var(--text-black);
  font-family: var(--font-family);
  width: 100%;
  max-width: 512px;                              /* default = sm (DESIGN.md §8.13.1)、各 variant で max-width override */
  max-height: calc(100vh - var(--space-12));
  box-sizing: border-box;
  overflow: hidden;
}
/* Modal width tokens (DESIGN.md §8.13.1):
   xs (384) = 確認/警告/簡易 popup、sm (512) = 標準 form/list、md (768) = 大きい form/複雑 layout、lg (1152) = 特殊 3-column 等 */
.modal--xs { max-width: 384px; }                 /* 確認 / 警告 / 簡易 popup (Yes/No、削除確認、success通知) */
.modal--sm { max-width: 512px; }                 /* 標準 form modal (3+ field、validation 含む)、list 表示 / 簡単 form (1-2 field、share、timeline) */
.modal--md { max-width: 768px; }                 /* 大きい form / 複雑 layout */
.modal--lg { max-width: 1152px; }                /* 特殊 layout (Custom Settings の 3-column / 多 column form) */

/* fig:20107:312390 (variant Type=Success diff) — centered modal variant */
.modal.modal--success {
  padding: var(--space-8) var(--space-6);
  justify-content: center;
  align-items: center;
}

/* fig:20161:4800 (variant Type=Failed diff) */
.modal.modal--failed {
  padding: var(--space-8) var(--space-6);
  justify-content: center;
  align-items: center;
}

/* fig:19929:29776 (default variant) */
.table-toolbar {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  align-items: center;
  background: var(--bg-primary-soft);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs) var(--radius-xs) var(--radius-0) var(--radius-0);
  color: var(--text-body-subtle);
}

/* fig:20095:138141 (variant Type=When checked diff) */
.table-toolbar.table-toolbar--when-checked {
  gap: var(--space-5);
  justify-content: space-between;
  color: var(--text-heading);
}

/* fig:19929:31393 (default variant) */
.tbl {
  display: flex;
  flex-direction: column;
  background: var(--bg-primary-soft);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  box-shadow: 0px 1px 2px rgba(29, 41, 61, 0.05000000074505806);
  color: var(--text-body-subtle);
}
/* `.tbl` が `.table-card` 内にある場合、card 側 border が table 周囲を担うため `.tbl` の border は省略 (double border 防止) */
.table-card .tbl {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.table-card > .datatable-header {
  border-bottom: var(--border-width) solid var(--border-default);
}
.table-card > .datatable-header:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.table-card > .datatable-footer:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.table-card > .tbl-scroll:first-child,
.table-card > .tbl-scroll:first-child .tbl {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.table-card > .tbl-scroll:last-child,
.table-card > .tbl-scroll:last-child .tbl {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.table-card > .tbl-scroll:first-child .tbl thead tr:first-child .tbl-cell-head:first-child,
.table-card > .datatable-header + .tbl-scroll .tbl thead tr:first-child .tbl-cell-head:first-child {
  border-top-left-radius: inherit;
}
.table-card > .tbl-scroll:first-child .tbl thead tr:first-child .tbl-cell-head:last-child,
.table-card > .datatable-header + .tbl-scroll .tbl thead tr:first-child .tbl-cell-head:last-child {
  border-top-right-radius: inherit;
}
.table-card > .tbl-scroll:last-child .tbl tbody tr:last-child > .tbl-cell:first-child {
  border-bottom-left-radius: inherit;
}
.table-card > .tbl-scroll:last-child .tbl tbody tr:last-child > .tbl-cell:last-child {
  border-bottom-right-radius: inherit;
}
.table-card > .tbl:first-child thead tr:first-child .tbl-cell-head,
.table-card > .tbl-scroll:first-child .tbl thead tr:first-child .tbl-cell-head,
.table-card > .datatable-header + .tbl thead tr:first-child .tbl-cell-head,
.table-card > .datatable-header + .tbl-scroll .tbl thead tr:first-child .tbl-cell-head {
  border-top: 0;
}
.table-card > .tbl:last-child tbody tr:last-child > .tbl-cell,
.table-card > .tbl-scroll:last-child .tbl tbody tr:last-child > .tbl-cell {
  border-bottom: 0;
}

/* fig:19929:33952 (default variant、Size=md): 56h、padding 6V/20H */
.tbl-cell {
  display: flex;
  padding: var(--space-1-5) var(--space-5);
  align-items: center;
  min-height: 56px;                                       /* Figma 確定 (md default) */
  border-bottom: var(--border-width) solid var(--border-base);
  border-top: 0;
  /* left/right border は table-card の border と double 表示になるため省略 (border-collapse: collapse でも cell の四辺 border は外側に重なる) */
  color: var(--text-heading);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

/* Override line 11409 — text 系 cell は ellipsis を保持 (truncation + tooltip on hover が標準 UX)、
   narrow cell (checkbox/icon-only) のみ overflow visible にして「…」誤表示を防ぐ。
   `vertical-align: middle` で cell 内 content を vertical center、inline children (input/svg) も baseline 揃え */
.tbl th.tbl-cell-head,
.tbl td.tbl-cell {
  vertical-align: middle;
  /* overflow: hidden + text-overflow: ellipsis は line 11409 から継承 */
}
/* thead は列の数値右揃え (.col-num) に関わらず常に左揃え */
.tbl th.tbl-cell-head { text-align: left; }
/* 数値列ヘッダー: body cell が右寄せ (tbl-cell--num) の列に合わせて右揃えにする modifier */
.tbl th.tbl-cell-head--num { text-align: right; }
/* line 11409 の `padding: var(--space-2-5) var(--space-3)` (10/12) を打ち消し、
   user spec の cell modifier padding + height を適用 (specificity を `.tbl th` (1,1) より上の (2,1) に)。
   `display: table-cell` mode では `min-height` が無視されることがあるため、`height` を使う (table-cell では height が最小値扱い) */
.tbl th.tbl-cell-head            { padding: var(--space-2) var(--space-5); height: 44px; font-size: var(--text-sm); line-height: var(--leading-tight); }   /* md: 8V/20H、44h、14px */
.tbl th.tbl-cell-head--sm        { padding: var(--space-2) var(--space-3); height: 40px; font-size: var(--text-xs); line-height: var(--leading-tight); }   /* sm: 8V/12H、40h、12px */
.tbl td.tbl-cell                 { padding: var(--space-1-5) var(--space-5); height: 56px; font-size: var(--text-sm); line-height: var(--leading-tight); } /* md: 6V/20H、56h、14px */
.tbl td.tbl-cell--sm             { padding: var(--space-1-5) var(--space-3); height: 44px; font-size: var(--text-xs); line-height: var(--leading-tight); } /* sm: 6V/12H、44h、12px */
.tbl td.tbl-cell--with-input     { padding: var(--space-1) var(--space-5); height: 56px; }   /* with-input md: 4V/20H、56h */
.tbl td.tbl-cell--with-input.tbl-cell--sm { padding: var(--space-1) var(--space-3); height: 44px; }  /* with-input sm: 4V/12H、44h */
.tbl th.tbl-cell-head > *,
.tbl td.tbl-cell > *,
.tbl th.tbl-cell-head input,
.tbl th.tbl-cell-head svg,
.tbl td.tbl-cell input,
.tbl td.tbl-cell svg {
  vertical-align: middle;
}
/* narrow cell (text 無し): ellipsis 抑制 — content が input / icon のみで text overflow が起きない */
.tbl th.tbl-cell-head--checkbox,
.tbl th.tbl-cell-head--only-icon,
.tbl th.tbl-cell-head--actions,
.tbl td.tbl-cell--checkbox,
.tbl td.tbl-cell--only-icon,
.tbl td.tbl-cell--toggle,
.tbl td.tbl-cell--action-button {
  overflow: visible;
  text-overflow: clip;
}
.tbl-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden; /* CSS propagation: overflow-x:auto → overflow-y becomes auto unless explicitly set */
  overscroll-behavior-x: none;
}
.tbl-scroll--fit {
  overflow-x: hidden;
}
.tbl-scroll--sticky-checkbox .tbl,
.tbl-scroll--sticky-actions .tbl {
  border-collapse: separate;
  border-spacing: 0;
}
.tbl-scroll--sticky-checkbox .tbl th.tbl-cell-head,
.tbl-scroll--sticky-checkbox .tbl td.tbl-cell,
.tbl-scroll--sticky-actions .tbl th.tbl-cell-head,
.tbl-scroll--sticky-actions .tbl td.tbl-cell {
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
.tbl-scroll--sticky-checkbox .tbl-cell-head--checkbox,
.tbl-scroll--sticky-checkbox .tbl-cell--checkbox {
  position: sticky;
  left: 0;
  z-index: calc(var(--z-sticky) + 3);
  background: var(--bg-card);
  box-shadow: none;
}
.tbl-scroll--sticky-checkbox .tbl-cell-head--checkbox::after,
.tbl-scroll--sticky-checkbox .tbl-cell--checkbox::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: -20px;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  background: var(--shadow-sticky-column);
  opacity: 0;
  transition: opacity 120ms ease;
}
.tbl-scroll--sticky-checkbox.is-scrolled-x .tbl-cell-head--checkbox::after,
.tbl-scroll--sticky-checkbox.is-scrolled-x .tbl-cell--checkbox::after {
  opacity: 1;
}
.tbl-scroll--sticky-checkbox .tbl-cell-head--checkbox {
  background: var(--bg-secondary-medium);
  z-index: calc(var(--z-sticky) + 4);
}
.tbl-scroll--sticky-checkbox .tbl-row--selected > .tbl-cell--checkbox {
  background: var(--bg-brand-softer);
}
.tbl-scroll--sticky-actions .tbl-cell-head--actions,
.tbl-scroll--sticky-actions .tbl-cell--buttons {
  position: sticky;
  right: 0;
  z-index: calc(var(--z-sticky) + 3);
  background: var(--bg-card);
  border-left: var(--border-width) solid var(--border-default);
  box-shadow: none;
  overflow: hidden;
  text-overflow: clip;
}
.tbl-scroll--sticky-actions .tbl th.tbl-cell-head--actions,
.tbl-scroll--sticky-actions .tbl td.tbl-cell--buttons {
  border-left: var(--border-width) solid var(--border-default);
}
.tbl-scroll--sticky-actions .tbl-cell-head--actions {
  background: var(--bg-secondary-medium);
  z-index: calc(var(--z-sticky) + 4);
}
.tbl-scroll--sticky-actions .tbl-row--selected > .tbl-cell--buttons {
  background: var(--bg-brand-softer);
}
.tbl.tbl--resizable {
  table-layout: fixed;
}
.tbl-scroll--resizable {
  position: relative;
  max-width: 100%;
  min-width: 0;
}
.tbl--resizable th.tbl-cell-head:not(.tbl-cell-head--checkbox):not(.tbl-cell-head--actions) {
  position: relative;
  overflow: visible;
}
.tbl-col-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: calc(var(--z-sticky) + 2);
  width: 8px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}
.tbl-col-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: var(--tbl-resizer-line-height, 100%);
  transform: translateX(-50%);
  background: var(--border-focus);
  opacity: 0;
  pointer-events: none;
}
.tbl-col-resizer:hover::after,
.tbl-col-resizer:focus-visible::after,
.tbl-col-resizer--active::after {
  opacity: 1;
}
.tbl-col-resizer:focus-visible {
  outline: none;
}
.tbl-resize-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: calc(var(--z-sticky) + 2);
  height: var(--tbl-resizer-line-height, 100%);
  pointer-events: none;
}
.tbl-resize-overlay .tbl-col-resizer {
  right: auto;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: auto;
}
.tbl-resize-overlay .tbl-col-resizer::after {
  top: 0;
  height: var(--tbl-resizer-line-height, 100%);
}
body.is-table-column-resizing,
body.is-table-column-resizing * {
  cursor: col-resize !important;
  user-select: none;
}

/* fig:19929:33954 (variant Size=sm diff): 44h、padding 6V/12H */
.tbl-cell.tbl-cell--sm {
  padding: var(--space-1-5) var(--space-3);
  min-height: 44px;                                       /* Figma 確定 */
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}

/* fig:19929:34118 (variant Type=Badge diff) */
.tbl-cell.tbl-cell--badge {
  color: var(--text-fg-success-strong);
}

/* fig:19929:34104 (variant Type=Buttons diff) */
.tbl-cell.tbl-cell--buttons {
  gap: 0;
  font-size: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
.tbl-cell.tbl-cell--buttons > .btn {
  flex: 0 0 var(--space-8);
  inline-size: var(--space-8);
  min-inline-size: var(--space-8);
  font-size: var(--text-xs);
}

.tbl-cell.tbl-cell--expander {
  padding: var(--space-1) var(--space-1);
  text-align: center;
  overflow: visible;
  text-overflow: clip;
}
.tbl.tbl--nested-parent th.tbl-cell-head {
  border-top: 0;
}
.tbl td.tbl-cell--nested-panel {
  height: auto;
  padding: 0;
  border-top: 0;
  border-bottom: 0;
  overflow: visible;
  white-space: normal;
  background: var(--bg-card);
}
.tbl tbody tr.tbl-row--nested-panel:hover .tbl-cell--nested-panel {
  background: var(--bg-card);
}
.tbl-product-thumb {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  vertical-align: middle;
}
.tbl-nested-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-16) + var(--space-1));
  background: var(--bg-card);
}
.tbl-nested-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
}
.tbl.tbl--nested-detail {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.tbl.tbl--nested-detail th.tbl-cell-head {
  border-top: 0;
}
.tbl.tbl--nested-detail td.tbl-cell--sm {
  height: 36px;
  min-height: 36px;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  background: var(--bg-card);
}
.tbl.tbl--nested-detail td.tbl-cell:hover {
  background: var(--bg-card);
}
.tbl.tbl--nested-detail tbody tr:last-child .tbl-cell {
  border-bottom: 0;
}
.tbl.tbl--nested-detail tbody tr:hover {
  background: transparent;
  cursor: default;
}
.tbl.tbl--nested-detail tbody tr:hover .tbl-cell {
  background: var(--bg-card);
}
.tbl-nested-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-body-subtle);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}
.tbl-nested-summary__left {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.tbl-nested-summary strong {
  color: var(--text-body);
  font-weight: var(--weight-medium);
}

.tbl td.tbl-cell--empty {
  height: auto;
  padding: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  text-align: center;
  background: var(--bg-card);
}
.tbl td.tbl-cell--empty:hover,
.tbl:not(.tbl--read-only) tbody tr.tbl-row--empty:hover > .tbl-cell--empty {
  background: var(--bg-card);
}
/* specificity (0,4,2) beats the general (0,3,2) tr:hover rule — no bg-page bleed, no pointer cursor */
.tbl:not(.tbl--read-only) tbody tr.tbl-row--empty:hover {
  background: var(--bg-card);
  cursor: default;
}
.tbl tbody tr.tbl-row--empty:hover {
  cursor: default;
}
.tbl-empty-state {
  min-height: 240px;
  padding: var(--space-10) var(--space-6);
}
.table-card--empty .tbl thead tr:first-child .tbl-cell-head {
  border-top: 0;
}
.table-card--empty .tbl td.tbl-cell--empty {
  border-top: 0;
  border-bottom: 0;
}

/* fig:19929:34110 (variant Type=Action button diff) */
.tbl-cell.tbl-cell--action-button {
  gap: var(--space-2);
}

/* fig:19929:34022 (variant Type=Avatar group diff) */
.tbl-cell.tbl-cell--avatar-group {
  color: var(--text-body);
}

/* fig:19929:34026 (variant Type=Link diff) */
.tbl-cell.tbl-cell--link {
  color: var(--text-fg-brand);
}

/* fig:19929:34036 (variant Type=Progress bar diff) */
.tbl-cell.tbl-cell--progress-bar {
  color: var(--text-body);
}

/* fig:19929:34040 (variant Type=Time tracking diff) */
.tbl-cell.tbl-cell--time-tracking {
  color: var(--text-body);
}

/* fig:19929:34058 (variant Type=Icons diff) */
.tbl-cell.tbl-cell--icons {
  gap: var(--space-2);
}

/* fig:19929:33956 (variant Type=Image & text diff) */
.tbl-cell.tbl-cell--image-text {
  gap: var(--space-2);
}

/* fig:19929:33964 (variant Type=Text & helper diff) */
.tbl-cell.tbl-cell--text-helper {
  gap: var(--space-2);
}

/* fig:19929:34122 (variant Type=2 data diff) */
.tbl-cell.tbl-cell--2-data {
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}

/* fig:19929:33996 (variant Type=Icon & button diff) */
.tbl-cell.tbl-cell--icon-button {
  gap: var(--space-3);
}

/* fig:19929:34072 (variant Type=Rating diff) */
.tbl-cell.tbl-cell--rating {
  gap: var(--space-2);
}

/* fig:19929:34288 (variant Type=Logo & text diff) */
.tbl-cell.tbl-cell--logo-text {
  gap: var(--space-2);
}

/* fig:19929:34300 (variant Type=Separate data diff) */
.tbl-cell.tbl-cell--separate-data {
  gap: var(--space-2);
  color: var(--text-body);
}

/* fig:19929:34324 (variant Type=With input diff): md 0V/20H、sm 0V/12H (user spec) */
.tbl-cell.tbl-cell--with-input {
  gap: var(--space-2);
  padding: var(--space-0) var(--space-5);                 /* md: 0 V / 20 H */
  color: var(--text-body-subtle);
}
.tbl-cell.tbl-cell--with-input.tbl-cell--sm {
  padding: var(--space-0) var(--space-3);                 /* sm: 0 V / 12 H (user spec) */
}

/* fig:19929:34150 (variant State=Hover diff) — cell 単位 hover (個別 cell の interactive 用。read-only table は除外) */
.tbl:not(.tbl--read-only) .tbl-cell:hover {
  background: var(--bg-secondary);
}

/* === Row-level state modifiers (Figma 19929:33951 State=Hover/Selected = entire row) === */
.tbl-row--hover > .tbl-cell {
  background: var(--bg-secondary);                       /* gray-50 (#f9fafb) */
}
.tbl-row--selected > .tbl-cell {
  background: var(--bg-brand-softer);                    /* brand-50 (#eff6ff) */
}
/* Auto: tbody の hover で全 cell が gray-50 に (interactive table のみ。read-only table は除外) */
.tbl:not(.tbl--read-only) tbody tr:hover > .tbl-cell { background: var(--bg-secondary); }
.tbl tbody tr.tbl-row--selected:hover > .tbl-cell { background: var(--bg-brand-softer); } /* selected hover は selected を維持 */
/* Read-only table: row cursor を default に */
.tbl--read-only tbody tr { cursor: default; }

/* === Missing type modifiers (Figma 19929:33951 26 types のうち auto-generation で抜けた 9 つ) === */
/* Narrow cells: text-align center で horizontal center (display: table-cell mode で動作) */
.tbl-cell.tbl-cell--checkbox,
.tbl-cell.tbl-cell--only-icon,
.tbl-cell.tbl-cell--toggle { text-align: center; }
/* Wide cells: inline content の間に 8px gap (margin-left で table-cell mode で動作 — gap は flex 専用なので無効) */
.tbl-cell.tbl-cell--checkbox-text > * + *,
.tbl-cell.tbl-cell--user > * + *,
.tbl-cell.tbl-cell--side-icons-text > * + *,
.tbl-cell.tbl-cell--dot-text > * + *,
.tbl-cell.tbl-cell--toggle-labels > * + *,
.tbl-cell.tbl-cell--icons > * + *,
.tbl-cell.tbl-cell--image-text > * + *,
.tbl-cell.tbl-cell--text-helper > * + *,
.tbl-cell.tbl-cell--logo-text > * + *,
.tbl-cell.tbl-cell--rating > * + *,
.tbl-cell.tbl-cell--with-input > * + * { margin-left: var(--space-2); }              /* 8 */
.tbl-cell.tbl-cell--buttons > * + * { margin-left: 0; }
/* Separate data / Flag & text: 要素間 4px (狭め、user spec) */
.tbl-cell.tbl-cell--separate-data > * + *,
.tbl-cell.tbl-cell--flag-text > * + * { margin-left: var(--space-1); }                /* 4 */
/* Icon & button: icon → text 4px、text → button 12px (user spec) */
.tbl-cell.tbl-cell--icon-button > * + * { margin-left: var(--space-1); }              /* 4 */
.tbl-cell.tbl-cell--icon-button > .btn { margin-left: var(--space-3); }               /* 12 (button 直前は text、その間は 12) */
/* Link cell: <a> を inline-flex + hover で underline */
.tbl-cell--link a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);                                                                  /* 4 (icon と text 間) */
}
.tbl-cell--link a:hover { text-decoration: underline; }

/* === Head cell type modifiers (Figma 19929:34347 4 types × 2 sizes = 8 variants) === */
/* table-cell mode で動作するため flex の代わりに text-align で horizontal center */
.tbl-cell-head.tbl-cell-head--checkbox,
.tbl-cell-head.tbl-cell-head--only-icon { text-align: center; }
/* Checkbox & text head: inline content (checkbox + text [+ icon]) は inline-block で並ぶ。gap は inline-block 間 8px */
.tbl-cell-head.tbl-cell-head--checkbox-text > * + * { margin-left: var(--space-2); }
/* Head cell の Type=Text に icon 付き (optional): inner wrapper で text + question-circle 横並び */
.tbl-cell-head__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}   /* 4px gap、inline-flex で table-cell 内に収める */
.tbl-cell-head__text,
.tbl-cell-head__inner > span:not(.tooltip),
.tbl-cell-head--checkbox-text > span:not(.tooltip) {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.tbl-cell-head__inner > .tbl-cell-head__text,
.tbl-cell-head__inner > span:not(.tooltip) {
  flex: 1 1 auto;
}
.tbl-cell-head__inner > svg,
.tbl-cell-head__helper {
  flex: 0 0 auto;
}
.tbl-cell-head--checkbox-text > .tbl-cell-head__text,
.tbl-cell-head--checkbox-text > span:not(.tooltip) {
  max-width: calc(100% - 56px);
}
.tbl-cell-head__helper {
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-body-subtle);
  font: inherit;
  cursor: help;
  outline: none;
}
.tbl-cell-head__helper:focus-visible {
  border-radius: var(--radius-xxs);
  box-shadow: 0 0 0 2px var(--border-focus-ring);
}
.tbl th.tbl-cell-head:has(.tbl-cell-head__helper),
.tbl-cell-head__inner:has(.tbl-cell-head__helper),
.tbl-cell-head--checkbox-text:has(.tbl-cell-head__helper),
.tbl-cell-head--only-icon:has(.tbl-cell-head__helper) {
  overflow: visible;
}

/* === Sortable head cell — clickable + hover + active states === */
.tbl-cell-head--sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color var(--duration-normal, 0.15s) ease;
}
.tbl-cell-head--sortable:hover { background-color: var(--bg-secondary-strong); }   /* default bg --bg-secondary-medium より少し濃く */
.tbl-cell-head--sortable:active { background-color: var(--bg-tertiary); }
/* sort 中の column は icon が brand 色 (asc/desc 共通) */
.tbl-cell-head--sorted .tbl-cell-head__inner svg { color: var(--text-fg-brand); }

/* fig:19929:34348 (default variant、Type=Text Size=md): 44h、padding 0V/20H */
.tbl-cell-head {
  display: flex;
  flex-direction: column;
  padding: var(--space-0) var(--space-5);
  justify-content: center;
  min-height: 44px;                                       /* Figma 確定 */
  background: var(--bg-secondary-medium);
  border-bottom: var(--border-width) solid var(--border-base-medium);
  border-top: 0;
  /* left/right border は table-card border と double 表示になるため省略 */
  color: var(--text-body);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

/* fig:19931:266704 (variant Size=sm diff): 40h、padding 8V/12H (user spec 修正) */
.tbl-cell-head.tbl-cell-head--sm {
  padding: var(--space-2) var(--space-3);
  min-height: 40px;                                       /* Figma 確定 */
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}

/* fig:19929:42119 (default variant) */
.datatable {
  display: flex;
  flex-direction: column;
  background: var(--bg-primary-soft);
  border-radius: var(--radius-xs);
  box-shadow: 0px 1px 2px rgba(29, 41, 61, 0.05000000074505806);
  color: var(--text-body);
}

/* fig:19929:43084 (default variant) */
.datatable-header {
  display: flex;
  gap: var(--space-2-5);
  padding: var(--space-4);
  justify-content: space-between;
  align-items: center;
  background: var(--bg-primary-soft);
  border-radius: var(--radius-xs) var(--radius-xs) var(--radius-0) var(--radius-0);
  color: var(--text-body-subtle);
}
.datatable-header--sticky {
  border-bottom: var(--border-width) solid var(--border-default);
}
.datatable-header--sticky.is-sticky-enabled {
  position: sticky;
  top: var(--datatable-header-sticky-top, 16px);
  z-index: calc(var(--z-sticky) + 4);
  isolation: isolate;
}
.datatable-header--sticky.is-sticky-enabled > * {
  position: relative;
  z-index: 1;
}
.datatable-header--sticky.is-sticky-enabled.is-stuck::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--border-width));
  right: calc(-1 * var(--border-width));
  top: calc(-1 * (var(--datatable-header-sticky-top, 16px) + var(--border-width)));
  height: calc(var(--datatable-header-sticky-top, 16px) + var(--border-width));
  background: var(--bg-page);
  pointer-events: none;
  z-index: 0;
}

/* fig:19929:43133 (variant Breakpoints=Mobile diff) */
.datatable-header.datatable-header--mobile {
  gap: var(--space-4);
}

/* Datatable Header — 2 state primitive (Figma 19929:29776 default + 20095:138141 selected)
   Left/Right group は flex container、各 button / input は gap で揃える */
.datatable-header__left,
.datatable-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);                                  /* 8 */
}
.datatable-header__left {
  flex: 1;
  min-width: 0;                                         /* search input が flex shrink 可能に */
}
.datatable-header__right {
  flex-shrink: 0;
}
/* Selected state (--selected): row checkbox 選択時に header が変形 */
.datatable-header--selected {
  background-color: var(--bg-brand-softer);             /* brand-50 — 視覚的に「選択モード」を示す */
}
.datatable-header__selected-count {
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}

/* fig:19929:30054 Type=Default — pagination 単独で右寄せ (padding 16/20、justify=flex-end) */
.datatable-footer {
  display: flex;
  padding: var(--space-4) var(--space-5);               /* 16 V / 20 H (Figma Default 確定) */
  justify-content: flex-end;                            /* 単一 pagination 右寄せ */
  align-items: center;
  gap: var(--space-5);                                  /* 20 (Figma itemSpacing) */
  background: var(--bg-primary-soft);
  border-radius: var(--radius-0) var(--radius-0) var(--radius-xs) var(--radius-xs);
  color: var(--text-body);
}

/* 2-children variant: __left + __right を両端寄せ (例: bulk action footer など) */
.datatable-footer:has(.datatable-footer__left) {
  justify-content: space-between;
}
.datatable-footer__left,
.datatable-footer__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* fig:20095:130825 Type=Total Amount — 列合計行 (padding 12/20、両端寄せ、stack 可能) */
.datatable-footer--total {
  padding: var(--space-3) var(--space-5);               /* 12 V / 20 H */
  justify-content: space-between;
  background: var(--bg-secondary-medium);                /* Total row は subtle gray bg で table body と区別 (user spec) */
  border-radius: 0;                                      /* stack 時は middle row のため radius 無し、最後の row のみ親で round */
}
.datatable-footer--total + .datatable-footer--total {
  border-top: var(--border-width) solid var(--border-base); /* stack 時 row 間 separator */
}
.datatable-footer--total + .datatable-footer {
  border-top: var(--border-width) solid var(--border-base);
}
.datatable-footer__total-label,
.datatable-footer__total-values {
  display: flex;
  align-items: center;
  gap: var(--space-2);                                  /* 8 (Figma 確定) */
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}
.datatable-footer__total-values { font-weight: var(--weight-semibold); }

/* fig:19929:43176 (variant Breakpoints=Mobile diff) */
.datatable-footer.datatable-footer--mobile {
  flex-direction: column;
  gap: var(--space-4);
}


/* ============================================================
   Layer 3+4 supplements (after Figma to override):
   - .btn--outline / .btn--ghost / .btn--icon (variant additions)
   - .form-grid-N (multi-column grid, distinct from Figma single-col .form-grid)
   - Domain classes (.cat-pill--*, .status-pill--*, .loading-pill--*)
   - Utility classes (.text-*, .mb-*, .gap-*, .flex, .hidden)
   ============================================================ */

/* ============================================================
   3.1 Reset / Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
body {
  font-family: var(--font-family);
  font-size: var(--font-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
.page {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg-page);
}
.page-content {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: 0 var(--space-7) var(--space-7);
}

/* ============================================================
   3.3 Main / Topbar / PageHeader
   ============================================================ */
.main {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  padding: var(--space-7) var(--space-8);
}
.main--flush { padding: 0; }
/* ============================================================
   3.4 Section
   ============================================================ */
/* Section canonical rules live in the Figma-derived block above. */

/* ============================================================
   3.5 Card / Card Grid
   ============================================================ */
.card-header { padding: var(--space-5) var(--space-7); border-bottom: var(--border-width) solid var(--border-default); }
.card-body   { padding: var(--space-7); }
.card-grid   { display: grid; gap: var(--space-5); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   3.6 Form: Group / Label / Helper
   ============================================================ */
.form-group  { margin-bottom: var(--space-5); }

/* === Form Label (Figma node 15161:53968) ===
   Type variants:
     Default — text のみ
     Required & icon — text + asterisk + info icon
     Two texts — main label + secondary helper text を横並び
*/
.form-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-black);                          /* gray-900 (Figma 確定) */
}
.form-label-required {
  color: var(--text-fg-danger);                          /* danger (Figma 確定) */
  margin-left: calc(var(--space-0-5) * -1);              /* parent gap 4px を 2px 縮めて text に近づける (実際 2px gap) */
  font-weight: 500;
}
.form-label-icon {
  color: var(--text-label);                          /* gray-500 (Figma 確定) — info icon */
  display: inline-flex;
  align-items: center;
  position: relative;                      /* tooltip child の anchor */
  cursor: help;
}
/* tooltip child: hover / focus-within で fade-in (`.tooltip-wrap` と同等の behavior) */
.form-label-icon > .tooltip {
  display: none;
  opacity: 0;
  transition: opacity var(--duration-normal, 0.2s) ease;
}
.form-label-icon:hover > .tooltip,
.form-label-icon:focus-within > .tooltip {
  display: inline-flex;
  opacity: 1;
}
/* Two texts: main label の右に secondary helper text */
.form-label-helper {
  margin-left: var(--space-1);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-label);                          /* gray-500 */
}
/* === Form Helper (Figma node 15168:17828) ===
   Type variants:
     Default — text のみ
     Left & Right text — 左 helper text + 右 action link
     Progress bar — 進捗バー + 達成リスト
     Tags — badge 並列
*/
.section-desc {
  font-size: var(--text-sm);
  color: var(--text-body-subtle);
  margin: 0 0 var(--space-3);
}

.form-helper {
  margin-top: var(--space-1);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-body);                          /* gray-600 (Figma 確定) */
}
.form-helper svg { width: var(--icon-xs); height: var(--icon-xs); flex-shrink: 0; }

/* state: 色 override */
.form-helper--danger  { color: var(--text-fg-danger); }
.form-helper--success { color: var(--text-fg-success); }
.form-helper--warning { color: var(--text-fg-warning); }

/* Type=Left & Right text — flex で左右配置 (parent の inline-flex を block に override) */
.form-helper--split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2-5);
  width: 100%;
}
.form-helper-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-fg-brand);                          /* brand */
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.form-helper-action:hover { text-decoration: underline; }

/* Type=Progress bar — 縦積み progress + 達成リスト
   親 .form-helper の inline-flex / align-items:center を打消して block 全幅に */
.form-helper--progress {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2-5);
  width: 100%;
}
.form-helper-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
.form-helper-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-body);
}
.form-helper-progress-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.form-helper-progress-bar {
  height: var(--space-1);
  background-color: var(--bg-quaternary);               /* gray-200 */
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.form-helper-progress-fill {
  height: 100%;
  background-color: var(--bg-warning);               /* warning/orange — strength 弱 (default) */
  border-radius: var(--radius-lg);
  transition: width var(--duration-normal, 0.2s) ease;
}
.form-helper-progress-fill--success { background-color: var(--bg-success); }
.form-helper-progress-fill--warning { background-color: var(--bg-warning); }
.form-helper-progress-fill--danger  { background-color: var(--text-fg-danger); }

/* Checklist (progress 内の達成リスト or 単体使用) */
.form-helper-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}
.form-helper-list-heading {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-black);                          /* gray-900 */
}
.form-helper-list-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
.form-helper-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-body);                          /* gray-600 — pending */
}
.form-helper-list-item--done {
  color: var(--text-fg-success);                          /* success — done */
}

/* Type=Tags — badge を flex で並列 */
.form-helper--tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
}
.form-item   { display: flex; flex-direction: column; gap: var(--space-1); }
.form-value  { font-size: var(--font-sm); font-weight: var(--weight-medium); color: var(--text-body); line-height: var(--leading-normal); }
.form-value--link, .form-value a {
  color: var(--primary-text-strong); font-weight: var(--weight-medium); text-decoration: underline;
}

/* ============================================================
   3.7 Form Grid
   ============================================================ */
/* form-grid-N: 多列フォームグリッド (我々のドメイン用、self-contained で Figma 単列とは別概念) */
.form-grid-1, .form-grid-2, .form-grid-3, .form-grid-4,
.form-grid-5, .form-grid-6, .form-grid-7, .form-grid-8 {
  display: grid;
  gap: var(--space-5);
}
.form-grid-1 { grid-template-columns: 1fr; }
.form-grid-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
.form-grid-4 { grid-template-columns: repeat(4, 1fr); }
.form-grid-5 { grid-template-columns: repeat(5, 1fr); }
.form-grid-6 { grid-template-columns: repeat(6, 1fr); }
.form-grid-7 { grid-template-columns: repeat(7, 1fr); }
.form-grid-8 { grid-template-columns: repeat(8, 1fr); }
@media (max-width: 1200px) {
  .form-grid-5, .form-grid-6, .form-grid-7 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
@media (max-width: 768px) {
  .form-grid-3, .form-grid-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* ============================================================
   3.8 Input / Select / Textarea (拡張: state + icon)
   ============================================================ */
/* === Input field (Figma node 15030:62446 完全準拠) ===
   Sizes (4): sm 36 / base 40 / lg 48 / xl 52 — height 明示固定
   States (7): Initial / Focus / Filled / Disabled / Read-only / Success / Danger
   Type (5): Default / Add-on icon / Add-on text / Inner button / Stacked placeholder
   left / right icon は .input-wrap で wrap して absolute 配置 */

/* Wrapper for left/right icon support */
.input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.input-wrap > .input { width: 100%; }
.input-icon-left,
.input-icon-right {
  position: absolute;
  display: flex;
  align-items: center;
  color: var(--text-label);                          /* gray-500 */
  pointer-events: none;
  flex-shrink: 0;
  z-index: 1;
}
.input-icon-left  { left: 12px; }
.input-icon-right { right: 12px; pointer-events: auto; }
.input-icon-button {
  width: var(--space-6);
  height: var(--space-6);
  justify-content: center;
  padding: 0;
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-xxs);
  color: var(--text-label);
  cursor: pointer;
}
.input-icon-button:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-body);
}
.input-wrap--with-left-icon  > .input { padding-left: var(--space-9); }
.input-wrap--with-right-icon > .input { padding-right: var(--space-9); }
.input, .select, .textarea {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  /* base = default size */
  height: var(--space-10);
  padding: 0 var(--space-3);                         /* horizontal のみ、height で vertical 制御 */
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  background-color: var(--bg-card);               /* default = white (white surface 上を想定) */
  border: var(--border-width) solid var(--border-base);               /* gray-200 */
  border-radius: var(--radius-xs);
  color: var(--text-black);                          /* gray-900 (filled text) */
  transition: border-color var(--duration-normal, 0.2s) ease, background-color var(--duration-normal, 0.2s) ease;
}
.textarea { height: auto; padding: var(--space-3-5); resize: vertical; min-height: 100px; }

/* === Sizes (Figma node 15030:62446 確定値) === */
.input--sm   { height: 36px; padding: 0 var(--space-2-5); font-size: 14px; line-height: 20px; }
.input--base { height: 40px; padding: 0 var(--space-3); font-size: 14px; line-height: 20px; }
.input--lg   { height: 48px; padding: 0 var(--space-3-5); font-size: 16px; line-height: 24px; }
.input--xl   { height: 52px; padding: 0 var(--space-4); font-size: 16px; line-height: 24px; }
.input--xs   { height: 32px; padding: 0 var(--space-2); font-size: 12px; line-height: 16px; }  /* 拡張 */

/* === States === */
.input::placeholder, .textarea::placeholder { color: var(--text-body-subtle); }   /* gray-500 */

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--border-brand);                   /* brand */
  color: var(--text-black);
}

.input:disabled, .select:disabled, .textarea:disabled {
  background-color: var(--bg-secondary-medium);      /* disabled surface — 全 data input field 共通 (input/select/textarea/timepicker/datepicker trigger 等) */
  color: var(--text-muted);                          /* gray-400 */
  -webkit-text-fill-color: var(--text-fg-disabled);
  cursor: not-allowed;
}

.input[readonly], .textarea[readonly] {
  background-color: var(--bg-tertiary);               /* gray-100 (Figma Read-only) */
  color: var(--text-body);
  cursor: default;
}

/* WHY: <input type="date"|"datetime-local"|"month"|"week"> のネイティブ calendar
   picker icon をブラウザデフォルトから Lucide 風 SVG に置換 (Webkit のみ)。
   stroke 色 = currentColor 相当 (gray-500 = #6a7282) で他 icon と統一。 */
.input[type="date"]::-webkit-calendar-picker-indicator,
.input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.input[type="month"]::-webkit-calendar-picker-indicator,
.input[type="week"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a7282' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2v4'/><path d='M16 2v4'/><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M3 10h18'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: pointer;
  opacity: 0.7;
  width: var(--space-5); height: var(--space-5);
}
.input[type="time"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  /* Lucide Clock icon */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a7282' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: pointer;
  opacity: 0.7;
  width: var(--space-5); height: var(--space-5);
}
.input[type="date"]::-webkit-calendar-picker-indicator:hover,
.input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.input[type="month"]::-webkit-calendar-picker-indicator:hover,
.input[type="week"]::-webkit-calendar-picker-indicator:hover,
.input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
/* === Validation states (Figma 確定: bg + border + text 全て変化) === */
.input--success {
  background-color: var(--bg-success-soft);               /* emerald-50 */
  border-color: var(--border-success-subtle);                   /* emerald-200 */
  color: var(--text-fg-success-strong);                          /* emerald-900 */
}
.input--success::placeholder { color: var(--text-fg-success); }
.input-wrap--success .input-icon-right { color: var(--text-fg-success); }

.input--danger {
  background-color: var(--bg-danger-soft);               /* rose-50 */
  border-color: var(--border-danger-subtle);                   /* rose-200 */
  color: var(--text-fg-danger-strong);                          /* rose-900 */
}
.input--danger::placeholder { color: var(--text-fg-danger); }
.input-wrap--danger .input-icon-left,
.input-wrap--danger .input-icon-right { color: var(--text-fg-danger); }

/* Validation state focus: 各 state の色で border を維持 (default `.input:focus` の brand blue を上書き)
   .input--success/--danger/--warning は datepicker/timepicker/select/textarea でも同じ class が使われる */
.input--success:focus,
.select.input--success:focus,
.textarea.input--success:focus {
  border-color: var(--border-success);
}
.input--danger:focus,
.select.input--danger:focus,
.textarea.input--danger:focus {
  border-color: var(--border-danger);
}
.input--warning:focus,
.select.input--warning:focus,
.textarea.input--warning:focus {
  border-color: var(--border-warning);
}

/* warning は Figma に明示的な variant が無いが、互換のため残す */
.input--warning {
  background-color: var(--bg-warning-soft);
  border-color: var(--border-warning-subtle);
  color: var(--text-fg-warning);
}
.input--warning::placeholder { color: var(--text-fg-warning); }
.input-wrap--warning .input-icon-right { color: var(--text-fg-warning); }
.select {
  cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a7282' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: var(--space-8);
}

/* === .select-trigger — custom dropdown trigger button (mimics native <select>) ===
   `<button type="button" class="input select-trigger">` で `<select>` を置き換え、
   click で `.dropdown-menu--popover` を開閉する pattern。
   text は左寄せ、unselected の placeholder は gray-500 を使用。
   dropdown を出す data input field は必ず wrapper で包む:
   - select: `.select-wrap`
   - datepicker: `.datepicker-wrap`
   - timepicker: `.timepicker-wrap`
   - autocomplete: `.autocomplete-wrap`
   popover を fixed/portal で wrapper 外に描画する場合も、trigger 自体は wrapper 内に置く。 */
.select-trigger {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select-trigger--placeholder { color: var(--text-body-subtle); }   /* gray-500 */
/* trigger を持つ wrapper は relative position で popover を anchoring */
.select-wrap,
.datepicker-wrap,
.timepicker-wrap,
.dropdown-input-wrap {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-width: 0;
}
.autocomplete-wrap { position: relative; }
.select-wrap > .input,
.select-wrap > .select-trigger,
.datepicker-wrap > .input-wrap,
.timepicker-wrap > .input-wrap,
.dropdown-input-wrap > .input,
.dropdown-input-wrap > .input-wrap,
.dropdown-input-wrap > .select-trigger { width: 100%; }
.textarea { resize: vertical; min-height: 100px; }

/* =========================================================
   Textarea — composite layouts (Figma 12694:50031 + 15207:3350)
   Default は素の .textarea。残り 3 type + Rich text editor を以下で実装。
   ========================================================= */

/* === .textarea-card — outer container wrapping textarea + footer/toolbar
   (Figma "Buttons inside" / Rich editor の border が外周のみで内部 frames は無 border) === */
.textarea-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color var(--duration-normal, 0.2s) ease;
}
.textarea-card:focus-within { border-color: var(--text-fg-brand); }
/* Inner textarea — strip its own border/radius (parent has it) */
.textarea-card > .textarea {
  border: 0;
  border-radius: 0;
  background: transparent;
  resize: vertical;
  min-height: 120px;
}
.textarea-card > .textarea:focus { outline: none; }

/* === .textarea-card__footer — action bar (Buttons inside) === */
.textarea-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2-5);
  background-color: var(--bg-card);
  border-top: var(--border-width) solid var(--border-base);
}
.textarea-card__footer-icons {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* === .textarea-card__toolbar — rich text editor formatting bar === */
.textarea-card__toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--bg-card);
  border-bottom: var(--border-width) solid var(--border-base);
}
.textarea-card__toolbar-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.textarea-card__toolbar-separator {
  display: inline-block;
  width: var(--space-px);
  height: var(--space-4);
  background-color: var(--bg-quaternary);                /* gray-200 */
  margin: 0 var(--space-1);
  flex-shrink: 0;
}

/* === .textarea-toolbar-btn — small icon button (28×28) for toolbar === */
.textarea-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  padding: var(--space-1);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xxs);
  cursor: pointer;
  color: var(--text-body);                            /* gray-600 (Figma 確定) */
  transition: background-color var(--duration-normal, 0.2s) ease;
}
.textarea-toolbar-btn:hover { background-color: var(--bg-tertiary); }
.textarea-toolbar-btn:focus { outline: none; background-color: var(--bg-tertiary); }
.textarea-toolbar-btn--active,
.textarea-toolbar-btn[aria-pressed="true"] {
  background-color: var(--bg-tertiary);
  color: var(--text-black);
}

/* === .textarea-chatroom — compact chat-style sender (Figma Chatroom variant) === */
.textarea-chatroom {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  background-color: var(--bg-page);
  border-radius: var(--radius-xs);
  box-sizing: border-box;
}
.textarea-chatroom > .input-wrap,
.textarea-chatroom > .input { flex: 1; }
.textarea-chatroom .textarea-toolbar-btn { width: 32px; height: 32px; padding: var(--space-1-5); }
/* Send button (last child, brand color icon) */
.textarea-chatroom-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  padding: var(--space-1);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--text-fg-brand);                            /* brand-medium (Figma 確定) */
}
.textarea-chatroom-send:hover { background-color: rgba(0, 64, 213, 0.08); }


/* =========================================================
   Input Types (Figma node 15030:62446 — 5 type variants)
   Default は素の .input。残り 4 type を以下で実装。
   ========================================================= */

/* === Type=Add-on icon / Add-on text — input-group: 添付された左 icon/text + input === */
.input-group {
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.input-group:focus-within { border-color: var(--text-fg-brand); }
.input-group-addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--bg-tertiary);
  border-right: var(--border-width) solid var(--border-base);
  color: var(--text-label);
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 20px;
}
/* size-dependent padding/height — Figma 抽出値 */
.input-group--sm   { height: 36px; }
.input-group--base { height: 40px; }
.input-group--lg   { height: 48px; }
.input-group--xl   { height: 52px; }
.input-group--sm   .input-group-addon { padding: 0 var(--space-2);  }
.input-group--base .input-group-addon { padding: 0 var(--space-2-5); }
.input-group--lg   .input-group-addon { padding: 0 var(--space-3); font-size: 16px; line-height: 24px; }
.input-group--xl   .input-group-addon { padding: 0 var(--space-3-5); font-size: 16px; line-height: 24px; }
/* Inside the group, .input loses its own border/radius */
.input-group > .input {
  border: 0;
  border-radius: 0;
  flex: 1;
  background: transparent;
  height: 100%;
}
.input-group > .input:focus {
  border: 0;
  outline: none;
}

/* === Type=Inner button — 左 icon + placeholder + 右 inner button === */
.input-inner {
  display: inline-flex;
  align-items: center;
  width: 100%;
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  gap: var(--space-2);
  box-sizing: border-box;
}
.input-inner:focus-within { border-color: var(--text-fg-brand); }
.input-inner--sm   { height: 48px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-2-5); }
.input-inner--base { height: 52px; padding: var(--space-2-5) var(--space-2-5) var(--space-2-5) var(--space-3); }
.input-inner--lg   { height: 56px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3-5); }
.input-inner--xl   { height: 60px; padding: var(--space-3-5) var(--space-3-5) var(--space-3-5) var(--space-4); }
.input-inner > .input-text {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-black);
}
.input-inner--lg > .input-text,
.input-inner--xl > .input-text { font-size: 16px; line-height: 24px; }
.input-inner > .input-text::placeholder { color: var(--text-body-subtle); }
.input-inner > .lucide,
.input-inner > svg { flex-shrink: 0; color: var(--text-body-subtle); }
.input-inner > .btn { flex-shrink: 0; }

/* === Type=Stacked placeholder — 上=数字/値, 下=icon+小ラベル の縦積み === */
.input-stacked {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  gap: var(--space-0-5);
  box-sizing: border-box;
}
.input-stacked:focus-within { border-color: var(--text-fg-brand); }
.input-stacked--sm   { height: 36px; padding: var(--space-2);  }
.input-stacked--base { height: 40px; padding: var(--space-2-5); }
.input-stacked--lg   { height: 48px; padding: var(--space-3); }
.input-stacked--xl   { height: 52px; padding: var(--space-3-5); }
.input-stacked-top {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 16px;
  color: var(--text-black);
  background: transparent;
  border: 0;
  padding: 0;
  outline: none;
  width: 100%;
}
.input-stacked--lg .input-stacked-top,
.input-stacked--xl .input-stacked-top { font-size: 16px; line-height: 16px; }
.input-stacked-bottom {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  color: var(--text-label);
  font-family: var(--font-family);
  font-size: 12px;
  line-height: 12px;
}
.input-stacked--lg .input-stacked-bottom,
.input-stacked--xl .input-stacked-bottom { font-size: 14px; line-height: 14px; }
.input-stacked-bottom > .lucide,
.input-stacked-bottom > svg { flex-shrink: 0; }

/* =========================================================
   Form Compositions (Figma 439:64015 / 15425:61546 / 15431:82113 /
   15515:147924 / 15539:161783 / 15543:164944)
   = Input form / Select form / Search form / Number form / Phone form / Copy to clipboard form
   それぞれ 7〜13 個の Type variant を持つ。共通 layout primitive を抽出して
   汎用クラス化、preview 側で各 form の代表 variant を組み合わせて demo する。
   ========================================================= */

/* === .form-group--inline — Label を input の左横に配置 (Inline variant 共通) ===
   既存 .form-group は flex-direction: column (label の上 / input の下)。
   Inline では row 化し、label を flex-shrink: 0 で固定、input が残りを埋める。 */
.form-group--inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
}
.form-group--inline > .form-label {
  flex-shrink: 0;
  margin: 0;
}
.form-group--inline > .input,
.form-group--inline > .select,
.form-group--inline > .input-wrap,
.form-group--inline > .select-wrap,
.form-group--inline > .input-file,
.form-group--inline > .input-row,
.form-group--inline > .input-group,
.form-group--inline > .input-inner {
  flex: 1;
  min-width: 0;
}
/* Inline form group row spacing — tighter than stacked (var(--space-5)) */
.form-group.form-group--inline {
  margin-bottom: var(--space-2);
}
/* Radio / checkbox rows need extra breathing space */
.form-group.form-group--inline:has(input[type="checkbox"], input[type="radio"]) {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

/* === .input-row — 複数 input/button を横並び ===
   modifier:
     --joined  : Figma 抽出 itemSpacing: -1 → border 重ね合わせで 1 本の divider 共有
     --spaced  : 16px の gap で完全分離 (with spaced buttons / with button (spaced))
     --gap     : 8〜10px の中間 gap (search の 3 inputs / select の Range inputs separator)
     --range   : range inputs 用、中央に "~" や icon separator を挟む
     --equal   : 子要素を flex: 1 で等幅化 (2 inputs / 3 inputs) */
.input-row {
  display: inline-flex;
  align-items: stretch;
  width: 100%;
}
/* Joined — borders を重ね合わせ (margin-left: -1px)
   注: .btn など個別 class が `border-radius` を後段で再定義するため、
       compound class selector (specificity 0,2,0) で確実に勝たせる必要あり。 */
.input-row--joined > .btn,
.input-row--joined > .input,
.input-row--joined > .select,
.input-row--joined > .textarea,
.input-row--joined > .input-wrap,
.input-row--joined > .input-group,
.input-row--joined > .input-inner,
.input-row--joined > .input-stacked,
.input-row--joined > .select-wrap {
  margin-left: calc(var(--space-px) * -1);
  border-radius: 0;
  position: relative;
}
.input-row--joined > .btn:first-child,
.input-row--joined > .input:first-child,
.input-row--joined > .select:first-child,
.input-row--joined > .textarea:first-child,
.input-row--joined > .input-wrap:first-child,
.input-row--joined > .input-group:first-child,
.input-row--joined > .input-inner:first-child,
.input-row--joined > .input-stacked:first-child,
.input-row--joined > .select-wrap:first-child {
  margin-left: 0;
  border-top-left-radius: var(--radius-xs);
  border-bottom-left-radius: var(--radius-xs);
}
.input-row--joined > .btn:last-child,
.input-row--joined > .input:last-child,
.input-row--joined > .select:last-child,
.input-row--joined > .textarea:last-child,
.input-row--joined > .input-wrap:last-child,
.input-row--joined > .input-group:last-child,
.input-row--joined > .input-inner:last-child,
.input-row--joined > .input-stacked:last-child,
.input-row--joined > .select-wrap:last-child {
  border-top-right-radius: var(--radius-xs);
  border-bottom-right-radius: var(--radius-xs);
}
/* focus / hover は z-index で前面化、border が他の要素に隠れないように */
.input-row--joined > .btn:hover,
.input-row--joined > .btn:focus,
.input-row--joined > .input:hover,
.input-row--joined > .input:focus,
.input-row--joined > .select:hover,
.input-row--joined > .select:focus,
.input-row--joined > .input-wrap:focus-within,
.input-row--joined > .input-group:focus-within,
.input-row--joined > .input-inner:focus-within { z-index: 2; }

/* `.input-wrap` / `.select-wrap` は wrapper で border 自体を持たず、内部要素 (.input /
   .select-trigger) が border を持つ。joined row 内では内部 element の radius も
   合わせて削る必要あり。 */
.input-row--joined > .input-wrap > .input,
.input-row--joined > .select-wrap > .select-trigger {
  border-radius: 0;
}
.input-row--joined > .input-wrap:first-child > .input,
.input-row--joined > .select-wrap:first-child > .select-trigger {
  border-top-left-radius: var(--radius-xs);
  border-bottom-left-radius: var(--radius-xs);
}
.input-row--joined > .input-wrap:last-child > .input,
.input-row--joined > .select-wrap:last-child > .select-trigger {
  border-top-right-radius: var(--radius-xs);
  border-bottom-right-radius: var(--radius-xs);
}
/* Spaced — 16px gap (with spaced button) */
.input-row--spaced { gap: var(--space-4); }
/* Gap — 8〜10px gap (3 inputs separated) */
.input-row--gap { gap: var(--space-2-5); }
/* Range — center に separator (~ or icon) */
.input-row--range { gap: var(--space-2); align-items: center; }
/* Equal — children を等幅 */
.input-row--equal > .input,
.input-row--equal > .select,
.input-row--equal > .input-wrap,
.input-row--equal > .form-group { flex: 1; min-width: 0; }
/* Inside .input-row--joined, button heights match input heights */
.input-row--joined > .btn { flex-shrink: 0; }

/* Range separator (~ or sort icon between two inputs) */
.input-row-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-label);
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 20px;
  padding: 0 var(--space-1);
}

/* === .input-stack — input + button を vertical 積み (Input form Stacked variant) === */
.input-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}
.input-stack > .input,
.input-stack > .input-wrap,
.input-stack > .input-group,
.input-stack > .input-inner,
.input-stack > .btn { width: 100%; }
.input-stack > .btn { justify-content: center; }

/* === .input--ghost — borderless input variant (Number form Ghost input) ===
   Stepper 中央の数字表示 input で、左右の +/− button だけが border を持つ。 */
.input--ghost,
.input-stacked.input--ghost,
.input-group.input--ghost,
.input-inner.input--ghost {
  background-color: transparent;
  border-color: transparent;
}
.input--ghost:focus,
.input--ghost:focus-within { border-color: transparent; }

/* =========================================================
   File upload — 2 Figma node 準拠
   1) `.input-file` — Default (15543:166321 Type=Default)
      = 「Choose files」addon button + filename display + clipboard icon
   2) `.dropzone` — Advanced / With cta's (15543:167015 + 166321 Type=Advanced)
      = 全面 dropzone area。Type 2 種、State: Initial / Hover / Focus / Drag over / Selected / Uploading / Success / Danger / Disabled
   ========================================================= */

/* === .input-file (Default type) === */
.input-file {
  display: inline-flex;
  align-items: stretch;
  position: relative;
  width: 100%;
  height: var(--space-10);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  overflow: hidden;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
}
.input-file:focus-within { border-color: var(--text-fg-brand); }
.input-file > input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.input-file__btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 var(--space-2-5);
  background-color: var(--bg-tertiary);          /* gray-100 (Figma) */
  border-right: var(--border-width) solid var(--border-base);
  color: var(--text-label);                      /* gray-500 (placeholder text) */
  font-weight: 400;
}
.input-file__name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  padding: 0 var(--space-2-5);
  color: var(--text-label);                      /* gray-500 (Figma "No file chosen" placeholder) */
}
.input-file__name--filled { color: var(--text-heading); }   /* gray-900 when filename selected */
.input-file__name-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.input-file__icon {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--text-black);                      /* gray-900 (Figma 確定: clipboard icon dark) */
}
/* States — 検証用 */
.input-file--success { border-color: var(--border-success-subtle); background-color: var(--bg-success-soft); }
.input-file--success .input-file__name,
.input-file--success .input-file__btn,
.input-file--success .input-file__icon { color: var(--text-fg-success-strong); }
.input-file--danger { border-color: var(--border-danger-subtle); background-color: var(--bg-danger-soft); }
.input-file--danger .input-file__name,
.input-file--danger .input-file__btn,
.input-file--danger .input-file__icon { color: var(--text-fg-danger-strong); }
.input-file--disabled,
.input-file:has(input:disabled) { background-color: var(--bg-secondary-medium); cursor: not-allowed; }
.input-file--disabled .input-file__name,
.input-file--disabled .input-file__btn,
.input-file--disabled .input-file__icon { color: var(--text-fg-disabled); }

/* === .dropzone (File upload input area / Advanced type) ===
   Figma 確定: outer 1px border + radius 4 + bg gray-50、中央に upload icon +
   text + meta + Browse button を縦積み。State で全色変化。 */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: calc(var(--space-12) + var(--space-1)) var(--space-6); /* 228h component / 124h container → 上下 padding 52px */
  background-color: var(--bg-page);           /* gray-50 (Figma False/default) */
  border: var(--border-width) solid var(--border-base);           /* gray-200 */
  border-radius: var(--radius-xs);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  position: relative;
  font-family: var(--font-family);
}
.dropzone > input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone:hover { background-color: var(--bg-tertiary); }   /* gray-100 (Figma Hover) */
.dropzone:focus-within {
  border-color: var(--border-brand);
  box-shadow: 0 0 0 var(--border-width-md) var(--border-brand-subtle);
}

.dropzone__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.dropzone__icon {
  color: var(--text-label);                      /* gray-500 */
}
.dropzone__title {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-label);                      /* gray-500 (Figma) */
}
.dropzone__meta {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-label);
}

/* Advanced — Browse file button 内蔵 */
.dropzone__btn {
  /* component-local file picker action。Upload / Import の main action は footer / action row 側に置く */
  position: relative;
  z-index: 1;                           /* 背面の hidden input より前面に */
}

.dropzone--dragover {
  background-color: var(--bg-brand-softer);
  border-color: var(--border-brand);
  box-shadow: 0 0 0 var(--border-width-md) var(--border-brand-subtle);
}
.dropzone--selected {
  background-color: var(--bg-card);
  border-color: var(--border-brand-subtle);
}
.dropzone--uploading {
  background-color: var(--bg-secondary-soft);
  border-color: var(--border-base);
  cursor: progress;
}
.dropzone--uploading > input[type="file"] { cursor: progress; }

/* === With cta's variant === */
.dropzone--cta .dropzone__placeholder { gap: var(--space-5); }
.dropzone__cta-text {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-body);                      /* gray-600 (Figma) */
}
.dropzone__cta-list {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}
.dropzone__cta-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1-5);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  color: inherit;
  font: inherit;
  position: relative;
  z-index: 1;
  text-decoration: none;
}
.dropzone__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-full);
  color: var(--text-body);                      /* gray-600 */
}
.dropzone__cta-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-body);
}

/* === States (Figma 5 state、bg + border + text 全変化) === */
.dropzone--success {
  background-color: var(--bg-success-soft);           /* emerald-50 */
  border-color: var(--border-success-subtle);               /* emerald-200 */
}
.dropzone--success .dropzone__icon,
.dropzone--success .dropzone__title,
.dropzone--success .dropzone__meta,
.dropzone--success .dropzone__cta-text,
.dropzone--success .dropzone__cta-label { color: var(--text-fg-success-strong); }

.dropzone--danger {
  background-color: var(--bg-danger-soft);           /* rose-50 */
  border-color: var(--border-danger-subtle);               /* rose-200 */
}
.dropzone--danger .dropzone__icon,
.dropzone--danger .dropzone__title,
.dropzone--danger .dropzone__meta,
.dropzone--danger .dropzone__cta-text,
.dropzone--danger .dropzone__cta-label { color: var(--text-fg-danger-strong); }

.dropzone--disabled,
.dropzone:has(input[type="file"]:disabled) {
  background-color: var(--bg-secondary-medium);
  cursor: not-allowed;
}
.dropzone--disabled .dropzone__icon,
.dropzone--disabled .dropzone__title,
.dropzone--disabled .dropzone__meta,
.dropzone--disabled .dropzone__cta-text,
.dropzone--disabled .dropzone__cta-label { color: var(--text-fg-disabled); }
.dropzone--disabled:hover { background-color: var(--bg-secondary-medium); }   /* hover を打ち消す */

/* === File list / file row === */
.file-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}
.dropzone + .file-list { margin-top: var(--space-3); }
.file-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  font-family: var(--font-family);
}
.file-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-8);
  height: var(--space-8);
  color: var(--text-body);
  background-color: var(--bg-secondary-soft);
  border-radius: var(--radius-xs);
}
.file-row__main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}
.file-row__name {
  overflow: hidden;
  color: var(--text-heading);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-row__meta {
  color: var(--text-label);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.file-row__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}
.file-row__progress {
  width: 100%;
  height: var(--space-1-5);
  overflow: hidden;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-full);
}
.file-row__progress-fill {
  height: 100%;
  background-color: var(--bg-brand);
  border-radius: var(--radius-full);
  transition: width 0.2s ease;
}
.file-row--uploading {
  border-color: var(--border-brand-subtle);
  background-color: var(--bg-brand-softer);
}
.file-row--success {
  border-color: var(--border-success-subtle);
  background-color: var(--bg-success-soft);
}
.file-row--success .file-row__icon,
.file-row--success .file-row__meta { color: var(--text-fg-success-strong); }
.file-row--danger {
  border-color: var(--border-danger-subtle);
  background-color: var(--bg-danger-soft);
}
.file-row--danger .file-row__icon,
.file-row--danger .file-row__meta { color: var(--text-fg-danger-strong); }
.file-row--danger .file-row__progress-fill { background-color: var(--text-fg-danger); }

/* =========================================================
   Tag input (Figma node 15276:18210)
   = 複数 tag (avatar + label + close) を入力 field 内に並べ、末尾でタイピング
   Sizes (4): sm 36 / base 40 / lg 48 / xl 52
   States (8): Initial / Focus / Filled / Disabled / Read-only / Success / Danger / Max reached
   ========================================================= */

.input-tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--space-10);                        /* base */
  padding: var(--space-2-5);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);               /* gray-200 */
  border-radius: var(--radius-xs);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: text;
  box-sizing: border-box;
  transition: border-color var(--duration-normal, 0.2s) ease, background-color var(--duration-normal, 0.2s) ease;
}
.input-tags:focus-within { border-color: var(--text-fg-brand); }   /* brand-medium (Focus) */

/* Sizes (Figma 確定値) */
.input-tags--sm   { min-height: 36px; padding: var(--space-2);  font-size: 14px; line-height: 20px; }
.input-tags--base { min-height: 40px; padding: var(--space-2-5); font-size: 14px; line-height: 20px; }
.input-tags--lg   { min-height: 48px; padding: var(--space-3); font-size: 16px; line-height: 24px; }
.input-tags--xl   { min-height: 52px; padding: var(--space-3-5); font-size: 16px; line-height: 24px; }

/* Validation states */
.input-tags--success { background-color: var(--bg-success-soft); border-color: var(--border-success-subtle); }
.input-tags--danger  { background-color: var(--bg-danger-soft); border-color: var(--border-danger-subtle);  }
.input-tags--max { background-color: var(--bg-warning-soft); border-color: var(--border-warning-subtle); }
/* Validation state focus: state 色の border を維持 (default :focus-within の brand を上書き) */
.input-tags--success:focus-within { border-color: var(--border-success); }
.input-tags--danger:focus-within { border-color: var(--border-danger); }
.input-tags--max:focus-within { border-color: var(--border-warning); }
.input-tags--disabled,
.input-tags:has(input:disabled) { background-color: var(--bg-secondary-medium); cursor: not-allowed; }
.input-tags--disabled .input-tags-input,
.input-tags--disabled .input-tags-input::placeholder,
.input-tags:has(input:disabled) .input-tags-input::placeholder { color: var(--text-fg-disabled); }
.input-tags--readonly,
.input-tags[aria-readonly="true"] {
  background-color: var(--bg-tertiary);
  cursor: default;
}
.input-tags--readonly .input-tags-input,
.input-tags[aria-readonly="true"] .input-tags-input,
.input-tags--readonly .input-tags-clear,
.input-tags[aria-readonly="true"] .input-tags-clear,
.input-tag--readonly .input-tag-close {
  display: none;
}
.input-tags--max .input-tags-input::placeholder { color: var(--text-fg-warning); }

/* Tag (badge inside) — Figma: padding 2/4, gap 4, radius 2, bg white, border gray-200 */
.input-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--space-5);
  padding: var(--space-0-5) var(--space-1);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xxs);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-black);                          /* gray-900 */
  flex-shrink: 0;
  box-sizing: border-box;
  transition: background-color var(--duration-normal, 0.2s) ease, border-color var(--duration-normal, 0.2s) ease;
}
.input-tag:hover {
  background-color: var(--bg-tertiary);               /* gray-100 (subtle hover bg) */
  border-color: var(--bg-gray);                   /* gray-300 (one step darker) */
}
/* Inside Success/Danger states, tag hover keeps semantic tint */
.input-tags--success .input-tag:hover {
  background-color: var(--bg-success-medium);               /* semantic success medium */
  border-color: var(--border-success-subtle);                   /* semantic success subtle */
}
.input-tags--danger .input-tag:hover {
  background-color: var(--bg-danger-medium);               /* semantic danger medium */
  border-color: var(--border-danger-subtle);                   /* semantic danger subtle */
}
.input-tags--max .input-tag:hover {
  background-color: var(--bg-warning-medium);
  border-color: var(--border-warning-subtle);
}
/* Disabled — no hover effect */
.input-tags--disabled .input-tag:hover,
.input-tags:has(input:disabled) .input-tag:hover,
.input-tags--readonly .input-tag:hover,
.input-tags[aria-readonly="true"] .input-tag:hover,
.input-tag--readonly:hover {
  background-color: var(--bg-card);
  border-color: var(--border-base);
}
.input-tags--disabled .input-tag:hover,
.input-tags:has(input:disabled) .input-tag:hover {
  cursor: not-allowed;
}
.input-tags--lg .input-tag,
.input-tags--xl .input-tag {
  height: var(--space-6);
  padding: var(--space-1) var(--space-1-5);
  gap: var(--space-1-5);
  font-size: 14px;
  line-height: 16px;
}

/* Tag avatar (circle, 14×14 sm/base, also 14 in lg/xl per Figma) */
.input-tag-avatar {
  width: var(--space-3-5);
  height: var(--space-3-5);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  object-fit: cover;
  background-color: var(--bg-quaternary);
}

/* Tag close icon button */
.input-tag-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-3);
  height: var(--space-3);
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-black);                          /* gray-900 (Figma 確定: tag close は dark) */
}
.input-tags--lg .input-tag-close,
.input-tags--xl .input-tag-close { width: 14px; height: 14px; }
.input-tag-close:focus-visible,
.input-tags-clear:focus-visible {
  outline: var(--border-width-md) solid var(--border-brand);
  outline-offset: var(--space-0-5);
  border-radius: var(--radius-xxs);
}
.input-tag-close:disabled,
.input-tags-clear:disabled {
  color: var(--text-fg-disabled);
  cursor: not-allowed;
}

/* Inner input (typing area) */
.input-tags-input {
  flex: 1;
  min-width: 60px;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  color: var(--text-black);
}
.input-tags-input::placeholder { color: var(--text-body-subtle); }   /* gray-500 (Figma Initial) */

/* Right "Clear all" close button (Figma: 16x16 close icon at far right) */
.input-tags-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-4);
  height: var(--space-4);
  flex-shrink: 0;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-label);                          /* gray-500 */
}
.input-tags-clear:hover { color: var(--text-heading); }

/* =========================================================
   OTP Inputs (Figma 15408:2781 + 15408:3287)
   = One-time-passcode の単一文字 cell + 6 桁等の composition
   Sizes (4): sm 36 / base 40 / lg 48 / xl 52 (square)
   States (7): Initial / Focus / Filled / Disabled / Read-only / Success / Danger
   Compositions (4): Default(joined) / Spaced / Separator / Separator spaced
   ========================================================= */

/* === Single cell .input-otp === */
.input-otp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--space-10);                              /* base default */
  height: var(--space-10);
  padding: 0;
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);                /* gray-200 */
  border-radius: var(--radius-xs);
  text-align: center;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 700;                          /* Figma 確定: bold */
  line-height: 16px;
  color: var(--text-black);                            /* gray-900 (filled text) */
  transition: border-color var(--duration-normal, 0.2s) ease, background-color var(--duration-normal, 0.2s) ease;
}
.input-otp::placeholder { color: var(--text-body-subtle); }
.input-otp:focus { outline: none; border-color: var(--text-fg-brand); }   /* brand-medium */

/* Sizes (Figma 確定値) */
.input-otp--sm   { width: 36px; height: 36px; font-size: 16px; line-height: 16px; }
.input-otp--base { width: 40px; height: 40px; font-size: 16px; line-height: 16px; }
.input-otp--lg   { width: 48px; height: 48px; font-size: 24px; line-height: 24px; }
.input-otp--xl   { width: 52px; height: 52px; font-size: 24px; line-height: 24px; }

/* States */
.input-otp:disabled { background-color: var(--bg-secondary-medium); color: var(--text-fg-disabled); cursor: not-allowed; -webkit-text-fill-color: var(--text-fg-disabled); }
.input-otp[readonly] { background-color: var(--bg-tertiary); color: var(--text-body); cursor: default; }
.input-otp--success { background-color: var(--bg-success-soft); border-color: var(--border-success-subtle); color: var(--text-fg-success-strong); }
.input-otp--danger  { background-color: var(--bg-danger-soft); border-color: var(--border-danger-subtle); color: var(--text-fg-danger-strong); }
/* Validation state focus: state 色の border を維持 (default :focus の brand を上書き) */
.input-otp--success:focus { border-color: var(--border-success); }
.input-otp--danger:focus { border-color: var(--border-danger); }

/* === Row container .input-otp-row ===
   modifier:
     (none)     — flex 並列 (gap 0)、cell は自前の border 表示
     --joined   — Figma "Default" / "Separator" 内の joined groups。border 重ね合わせ
     --spaced   — Figma "Spaced" / "Separator spaced"。gap 8px
   width: fit-content + display: flex で block-level として form-group 内では label の下に改行表示。
   nested 内側 row はそのまま flex として inline 配置される。 */
.input-otp-row {
  display: flex;
  align-items: center;
  gap: 0;
  width: fit-content;
}
.input-otp-row--spaced { gap: var(--space-2); }

/* Joined — borders 重ね合わせ (Figma `Hgap-1`) */
.input-otp-row--joined > .input-otp {
  margin-left: calc(var(--space-px) * -1);
  border-radius: 0;
  position: relative;
}
.input-otp-row--joined > .input-otp:first-child {
  margin-left: 0;
  border-top-left-radius: var(--radius-xs);
  border-bottom-left-radius: var(--radius-xs);
}
.input-otp-row--joined > .input-otp:last-child {
  border-top-right-radius: var(--radius-xs);
  border-bottom-right-radius: var(--radius-xs);
}
.input-otp-row--joined > .input-otp:hover,
.input-otp-row--joined > .input-otp:focus { z-index: 2; }

/* Separator between groups (Figma: 12×2 dash, color gray-800) */
.input-otp-separator {
  display: inline-block;
  flex-shrink: 0;
  width: var(--space-3);
  height: var(--space-0-5);
  margin: 0 var(--space-2);                             /* Figma "Separator" type の Hgap8 を separator の左右に */
  background-color: var(--bg-dark);                 /* gray-800 (Figma stroke 色) */
}

/* =========================================================
   Datepicker (Figma 15799:15074 / 11914 / 13105 / 16637)
   = Day / Month / Year / Range の calendar dropdown
   構成:
     `.datepicker`          — outer card
       `.datepicker-header`   — prev / month label / next
         `.datepicker-nav`    — arrow icon button (32×32)
         `.datepicker-month-label` — 700/14/20px gray-900
       `.datepicker-grid`     — calendar body
         `.datepicker-weekdays` / `-weekday` — Sun..Sat 7-col
         `.datepicker-weeks` / `-week` / `-cell` — body
       `.datepicker-footer`   — Clear / Today buttons
   `.datepicker-cell` modifier:
     --selected      — 単一選択 (bg brand, white text, radius 2)
     --in-range      — range 中間 (bg gray-100, gray-900 text)
     --range-start   — range 開始 (bg brand, white, square right edge)
     --range-end     — range 終了 (bg brand, white, square left edge)
     --today         — outlined (border brand)
     --out-of-month  — 隣月 (gray-400)
     :hover          — bg gray-100 + gray-900 text
     :disabled       — text gray-400, no hover
   ========================================================= */
.datepicker {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  font-family: var(--font-family);
  box-sizing: border-box;
  user-select: none;
}

/* Header — prev / label / next */
.datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.datepicker-month-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--text-black);                            /* gray-900 */
  text-align: center;
  flex: 1;
  margin: 0;
}
.datepicker-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--text-body);                            /* gray-600 */
  flex-shrink: 0;
  transition: background-color var(--duration-normal, 0.2s) ease, color var(--duration-normal, 0.2s) ease;
}
.datepicker-nav:hover { background-color: var(--bg-secondary); color: var(--text-fg-brand); }
.datepicker-nav:disabled { color: var(--text-fg-disabled); cursor: not-allowed; background: transparent; }

/* Calendar body */
.datepicker-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}
.datepicker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 36px);
  gap: 0;
}
.datepicker-weekday {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-3);
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  color: var(--text-body);                            /* gray-600 */
}
.datepicker-weeks {
  display: grid;
  grid-template-columns: repeat(7, 36px);
  gap: 0;
}
.datepicker-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-xxs);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: var(--text-body);                            /* gray-600 (Initial) */
  transition: background-color var(--duration-normal, 0.2s) ease, color var(--duration-normal, 0.2s) ease;
  box-sizing: border-box;
}
.datepicker-cell:hover {
  background-color: var(--bg-tertiary);                 /* gray-100 */
  color: var(--text-black);                            /* gray-900 */
}
.datepicker-cell:disabled,
.datepicker-cell--out-of-month {
  color: var(--text-muted);                            /* gray-400 */
  cursor: not-allowed;
}
.datepicker-cell--out-of-month:hover { background: transparent; color: var(--text-fg-disabled); }
.datepicker-cell--today,
.datepicker-cell--outlined {
  border: var(--border-width) solid var(--border-brand);                 /* brand-medium */
  color: var(--text-black);
}
.datepicker-cell--selected,
.datepicker-cell--active {
  background-color: var(--bg-brand);                 /* brand-medium */
  color: var(--text-white);
  border-radius: var(--radius-xxs);
}
.datepicker-cell--selected:hover,
.datepicker-cell--active:hover { background-color: var(--bg-brand); color: var(--text-white); }
.datepicker-cell--in-range,
.datepicker-cell--active-between {
  background-color: var(--bg-tertiary);                 /* gray-100 (連続部分は square) */
  color: var(--text-black);
  border-radius: 0;
}
.datepicker-cell--range-start,
.datepicker-cell--active-start {
  background-color: var(--bg-brand);
  color: var(--text-white);
  border-radius: var(--radius-xxs) 0 0 var(--radius-xxs);
}
.datepicker-cell--range-end,
.datepicker-cell--active-end {
  background-color: var(--bg-brand);
  color: var(--text-white);
  border-radius: 0 var(--radius-xxs) var(--radius-xxs) 0;
}

/* Year / Month picker — 3-col / 4-col grid (cell 57×36 or 79×36) */
.datepicker-grid--year,
.datepicker-grid--month {
  display: grid;
  gap: var(--space-1-5);
}
.datepicker-grid--year { grid-template-columns: repeat(3, 1fr); }
.datepicker-grid--month { grid-template-columns: repeat(3, 1fr); }
.datepicker-grid--year .datepicker-cell,
.datepicker-grid--month .datepicker-cell {
  width: auto;
  min-width: 57px;
}

/* Footer — Clear (secondary) / Today (primary) buttons */
.datepicker-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.datepicker-footer > .btn { flex: 1; }

/* Range — 2 calendars side-by-side */
.datepicker--range {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-6);
}
.datepicker__panes {
  display: flex;
  gap: 0;
}
.datepicker__panes > .datepicker {
  border: 0;
  padding: 0;
  border-radius: 0;
}

/* =========================================================
   Timepicker (Figma 15382:21296 / 15390:18261 / 15390:23437)
   = 時刻入力 input + dropdown popover menu
   Default は editable input。必要な場合だけ Wheel columns popover を入力補助として付ける。
   Stepper は compact / modal、Slider は特殊用途。
   Input field は `.timepicker-wrap` + 既存 `.input` + Clock icon、または `.input-group` (left/right add-on) を再利用。
   以下は dropdown popover 専用 class。
   ========================================================= */

/* Outer popover card */
.timepicker {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  font-family: var(--font-family);
  box-sizing: border-box;
  user-select: none;
}

/* Header (Tiepicker / Advanced) */
.timepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-base);
}
.timepicker-header-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: var(--text-black);
  text-align: center;
  flex: 1;
}

/* === Canonical type — wheel columns (Hour / Min / optional AM-PM) === */
.timepicker--wheel {
  width: var(--space-48);
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.timepicker--wheel-ampm {
  width: var(--space-60);
}
.timepicker-wheel {
  position: relative;
  overflow: hidden;
}
.timepicker-wheel__selection {
  position: absolute;
  z-index: 0;
  top: calc(var(--space-10) * 3);
  left: var(--space-1);
  right: var(--space-1);
  height: var(--space-10);
  background-color: var(--bg-brand);
  border-radius: var(--radius-xxs);
}
.timepicker-wheel__cols {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.timepicker--wheel-ampm .timepicker-wheel__cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.timepicker-wheel__col {
  display: flex;
  flex-direction: column;
  height: calc(var(--space-10) * 7);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-right: var(--border-width) solid var(--border-base);
}
.timepicker-wheel__col:last-child {
  border-right: 0;
}
.timepicker-wheel__col::-webkit-scrollbar {
  display: none;
}
.timepicker-wheel__cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--space-10);
  padding: 0;
  background-color: transparent;
  border: 0;
  color: var(--text-black);
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}
.timepicker-wheel__cell:hover {
  background-color: var(--bg-tertiary);
}
.timepicker-wheel__cell--selected,
.timepicker-wheel__cell[aria-pressed="true"] {
  color: var(--text-white);
  font-weight: 700;
}
.timepicker-wheel__cell--selected:hover,
.timepicker-wheel__cell[aria-pressed="true"]:hover {
  background-color: transparent;
}
.timepicker-wheel__footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--border-width) solid var(--border-base);
}
.timepicker-wheel__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--space-10);
  padding: 0;
  background-color: var(--bg-card);
  border: 0;
  color: var(--text-black);
  cursor: pointer;
}
.timepicker-wheel__action:hover {
  background-color: var(--bg-tertiary);
}

/* === Legacy reference — 2 scrollable columns (Hour / Min) === */
.timepicker-cols {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.timepicker-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  width: var(--space-14);
  padding-inline-end: var(--space-2);
  max-height: var(--timepicker-col-max-height, var(--space-80));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  box-sizing: border-box;
}
.timepicker-col-label {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: var(--text-body);                            /* gray-600 */
}
.timepicker-col-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xxs);
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  color: var(--text-black);
  flex-shrink: 0;
  transition: background-color var(--duration-normal, 0.2s) ease, color var(--duration-normal, 0.2s) ease;
}
.timepicker-col-cell:hover { background-color: var(--bg-tertiary); }
.timepicker-col-cell--selected,
.timepicker-col-cell[aria-selected="true"],
.timepicker-col-cell[aria-pressed="true"] {
  background-color: var(--bg-brand);                 /* brand-medium */
  color: var(--text-white);
}

/* === Stepper type — up / value / down (Advanced + Tiepicker) === */
.timepicker-steppers {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.timepicker-stepper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.timepicker-stepper-label {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: var(--text-body);
}
.timepicker-stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  padding: 0;
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--text-body);                            /* gray-600 */
  flex-shrink: 0;
  transition: background-color var(--duration-normal, 0.2s) ease;
}
.timepicker-stepper-btn:hover { background-color: var(--bg-secondary); }
.timepicker-stepper-btn:disabled { color: var(--text-fg-disabled); cursor: not-allowed; }

/* === AM/PM toggle (button group joined) === */
.timepicker-ampm {
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.timepicker-ampm > button {
  flex: 1;
}

/* === Footer (Cancel / Ok / Apply) === */
.timepicker-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}
.timepicker-footer > .btn { width: 100%; justify-content: center; }

/* =========================================================
   Range slider (Figma 15424:44390 thumb / 44099 bars / 3284:22435 examples / 15427:265 helper)
   = native `<input type="range">` を `.range-slider` でスタイリング
   構成:
     `.range-slider`              — single-thumb input
     `.range-slider-row`          — flex row (icon + label + slider + label + icon)
     `.range-slider-control`      — slider + exact number input
     `.range-slider-helper`       — tick labels 行
     `.range-slider--range`       — 2-thumb visual demo (preview only — JS が必要)
   ========================================================= */

/* === Base track + thumb (single value) === */
.range-slider {
  --range-fill: var(--bg-brand);
  --range-track: var(--bg-quaternary);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--space-2);
  background-color: var(--range-track);                 /* gray-200 (Figma track) */
  border-radius: var(--radius-full);
  cursor: pointer;
  outline: none;
  /* Webkit: filled bar via background gradient (set via inline `--value` or JS) */
  background-image: linear-gradient(to right,
    var(--range-fill) 0%, var(--range-fill) var(--range-value, 50%),
    transparent var(--range-value, 50%), transparent 100%);
  background-repeat: no-repeat;
}
.range-slider:focus { outline: none; }
.range-slider:focus-visible {
  outline: var(--border-width-md) solid var(--border-brand);
  outline-offset: var(--space-2);
}
.range-slider:disabled { opacity: 0.5; cursor: not-allowed; }
.range-slider--danger {
  --range-fill: var(--bg-danger);
  --range-track: var(--bg-danger-soft);
}

/* Webkit thumb */
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--space-5);
  height: var(--space-5);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);                 /* gray-200 (Initial) */
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: border-color var(--duration-normal, 0.2s) ease;
}
.range-slider:hover::-webkit-slider-thumb,
.range-slider:focus::-webkit-slider-thumb,
.range-slider:active::-webkit-slider-thumb {
  border-color: var(--border-brand);                     /* brand-medium (Active) */
}

/* Firefox thumb + track + progress */
.range-slider::-moz-range-track {
  width: 100%;
  height: var(--space-2);
  background-color: var(--range-track);
  border-radius: var(--radius-full);
}
.range-slider::-moz-range-progress {
  height: var(--space-2);
  background-color: var(--range-fill);
  border-radius: var(--radius-full) 0 0 var(--radius-full);
}
.range-slider::-moz-range-thumb {
  width: var(--space-5);
  height: var(--space-5);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: border-color var(--duration-normal, 0.2s) ease;
}
.range-slider:hover::-moz-range-thumb,
.range-slider:focus::-moz-range-thumb,
.range-slider:active::-moz-range-thumb {
  border-color: var(--border-brand);
}

/* === Row wrapper — icon + min label + slider + max label + icon === */
.range-slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.range-slider-row > .range-slider { flex: 1; }
.range-slider-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-body);                            /* gray-600 */
}
.range-slider-row__label {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-body);
  flex-shrink: 0;
  min-width: var(--space-10);
  text-align: center;
}

/* === Helper (tick labels under track) === */
.range-slider-helper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-body);
}
.range-slider-helper > * { flex: 1; text-align: center; }
.range-slider-helper > *:first-child { text-align: left; }
.range-slider-helper > *:last-child { text-align: right; }

/* === Field + exact value input === */
.range-slider-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}
.range-slider-control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.range-slider-control > .range-slider { flex: 1; }
.range-slider-value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  flex-shrink: 0;
}
.range-slider-value__input {
  width: var(--space-20);
  text-align: right;
}
.range-slider-value__unit {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-body);
}

/* === Range (2-thumb visual demo) ===
   native <input type="range"> は単一 value のみのため、2 thumb の見た目を
   <div> ベースで模倣する preview-only 構造。実装側で JS による双方向制御が必要。 */
.range-slider--range {
  position: relative;
  width: 100%;
  height: var(--space-5);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.range-slider--range__track {
  position: absolute;
  inset: var(--space-1-5) 0 var(--space-1-5) 0;
  height: var(--space-2);
  background-color: var(--bg-quaternary);
  border-radius: var(--radius-full);
}
.range-slider--range__fill {
  position: absolute;
  height: var(--space-2);
  background-color: var(--range-fill, var(--bg-brand));
  border-radius: var(--radius-full);
  /* set via inline style: left: X%, right: Y% */
}
.range-slider--range__thumb {
  position: absolute;
  width: var(--space-5);
  height: var(--space-5);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  transform: translateX(-50%);
  cursor: pointer;
  transition: border-color var(--duration-normal, 0.2s) ease;
}
.range-slider--range__thumb--active,
.range-slider--range__thumb:hover {
  border-color: var(--border-brand);
}

/* =========================================================
   Toggle switch (Figma 15548:169564 + 15550:180930 + 15576:193248)
   = `<input type="checkbox" class="toggle">` を pill-style switch に
   Sizes: base 36×20 thumb 16 / lg 44×24 thumb 20
   States: Initial / Focus / Disabled × Checked false/true
   ========================================================= */

/* The switch itself — styled checkbox */
.toggle {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: var(--space-9);
  height: var(--space-5);
  padding: 0;
  margin: 0;
  background-color: var(--bg-tertiary);                 /* gray-100 (Initial bg) */
  border: var(--border-width) solid var(--border-base);                 /* gray-200 (Initial border) */
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: background-color var(--duration-normal, 0.2s) ease, border-color var(--duration-normal, 0.2s) ease;
}
.toggle::before {
  content: '';
  position: absolute;
  top: var(--space-px);
  left: var(--space-px);
  width: var(--space-4);
  height: var(--space-4);
  background-color: var(--bg-card);                 /* thumb */
  border-radius: var(--radius-full);
  transition: transform var(--duration-normal, 0.2s) ease, background-color var(--duration-normal, 0.2s) ease;
}
.toggle:checked {
  background-color: var(--bg-brand);                 /* brand-medium (Checked bg) */
  border-color: var(--border-brand-light);                     /* brand-strong (Checked border) */
}
.toggle:checked::before {
  transform: translateX(16px);
}
.toggle:focus-visible {
  outline: var(--border-width-md) solid rgba(0, 64, 213, 0.3);
  outline-offset: var(--space-0-5);
}
.toggle:disabled {
  cursor: not-allowed;
  background-color: var(--bg-tertiary);
  border-color: var(--border-light);
}
.toggle:disabled::before { background-color: var(--bg-secondary); }

/* Size: lg */
.toggle--lg {
  width: var(--space-11);
  height: var(--space-6);
}
.toggle--lg::before {
  width: var(--space-5);
  height: var(--space-5);
}
.toggle--lg:checked::before {
  transform: translateX(20px);
}

/* === Toggle inputs (form-group level) ===
   Patterns: Default (switch + label/helper) / Left & Right label / Left & Right icons */

/* Default — switch + (label + helper) horizontal */
.toggle-input {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}
.toggle-input > .toggle { margin-top: 0; flex-shrink: 0; }
.toggle-input__body {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-0-5);
}
.toggle-input__label {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-black);                            /* gray-900 */
}
.toggle-input__helper {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-body);                            /* gray-600 */
}

/* Left & Right label — horizontal (label・switch・label) */
.toggle-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-black);
}
.toggle-row > .toggle-row__icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-body);
  flex-shrink: 0;
}

/* === Toggle card (Simple card / Logo & text / Advanced with icon) ===
   bordered container with switch on right edge */
.toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-4);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
}
.toggle-card--compact { gap: var(--space-2-5); }
.toggle-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}
.toggle-card__title {
  margin: 0;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-black);
}
.toggle-card__helper {
  margin: 0;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-body);
}
.toggle-card__row {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  flex: 1;
  min-width: 0;
}
.toggle-card__icon-shape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  background-color: var(--bg-tertiary);                 /* gray-100 */
  border-radius: var(--radius-xs);
  color: var(--text-body);
  flex-shrink: 0;
}
.toggle-card__logo {
  display: inline-flex;
  align-items: center;
  height: var(--space-8);
  flex-shrink: 0;
  /* logo wordmark color is brand-specific; consumer overrides */
}
.toggle-card__paragraph {
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-body);
}

/* === Toggle group (segmented control / pill-style) ===
   Figma "Advanced" / "Only icons" type — multiple buttons in a pill bg */
.toggle-segment {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  padding: var(--space-1-5);
  background-color: var(--bg-tertiary);                 /* gray-100 */
  border-radius: var(--radius-xs);
}
.toggle-segment__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xxs);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-body);                            /* gray-600 (inactive) */
  transition: background-color var(--duration-normal, 0.2s) ease, color var(--duration-normal, 0.2s) ease;
}
.toggle-segment__btn:hover { color: var(--text-heading); }
.toggle-segment__btn--active,
.toggle-segment__btn[aria-pressed="true"] {
  background-color: var(--bg-card);
  color: var(--text-black);                            /* gray-900 (active) */
}
/* Icon-only variant — square 28×28 */
.toggle-segment--icon-only .toggle-segment__btn {
  width: var(--space-7);
  height: var(--space-7);
  padding: var(--space-1);
}

/* =========================================================
   Checkbox / Radio (Figma 15553:182874 input + 15553:182971 form + 15568:191380 group)
   = `<input type="checkbox|radio" class="checkbox|radio">` を styled square / circle に
   16×16、bg gray-50、border gray-200。
   Checked: brand bg + white check icon (checkbox) / brand border + brand dot (radio)
   ========================================================= */

/* === .checkbox (square 16×16 with check icon) === */
.checkbox {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: var(--space-4);
  height: var(--space-4);
  margin: 0;
  padding: 0;
  background-color: var(--bg-primary);              /* white (user spec、旧 bg-page=gray-50 → white に統一) */
  border: var(--border-width) solid var(--border-base);                 /* gray-200 */
  border-radius: var(--radius-xxs);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
  transition: background-color var(--duration-normal, 0.2s) ease, border-color var(--duration-normal, 0.2s) ease;
}
.checkbox:checked {
  background-color: var(--bg-brand);                 /* brand-medium */
  border-color: var(--border-brand);
}
/* Check icon — Lucide-style SVG via background-image */
.checkbox:checked::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: center;
}
.checkbox:focus-visible {
  outline: var(--border-width-md) solid rgba(0, 64, 213, 0.3);
  outline-offset: var(--space-0-5);
}
.checkbox:disabled {
  cursor: not-allowed;
  border-color: var(--border-light);                     /* gray-100 */
  background-color: var(--bg-page);
}
.checkbox:disabled:checked {
  background-color: var(--bg-page);
}
.checkbox:disabled:checked::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2399a1af' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
/* Indeterminate — middle dash */
.checkbox:indeterminate {
  background-color: var(--bg-brand);
  border-color: var(--border-brand);
}
.checkbox:indeterminate::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>");
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: center;
}

/* === .radio (circle 16×16 with dot) === */
.radio {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: var(--space-4);
  height: var(--space-4);
  margin: 0;
  padding: 0;
  background-color: var(--bg-primary);              /* white (user spec、旧 bg-page=gray-50 → white) */
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-full);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
  transition: background-color var(--duration-normal, 0.2s) ease, border-color var(--duration-normal, 0.2s) ease;
}
.radio:checked {
  background-color: var(--bg-primary);              /* white (user spec、明示。dot は ::before の brand 色) */
  border-color: var(--border-brand);
}
.radio:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--space-2);
  height: var(--space-2);
  background-color: var(--bg-brand);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
}
.radio:focus-visible {
  outline: var(--border-width-md) solid rgba(0, 64, 213, 0.3);
  outline-offset: var(--space-0-5);
}
.radio:disabled {
  cursor: not-allowed;
  border-color: var(--border-light);
  background-color: var(--bg-page);
}
.radio:disabled:checked::before {
  background-color: var(--bg-quaternary);                 /* gray-200 (Figma disabled dot) */
}

/* === Form pattern: input + label + helper (Default / With helper / Simple) === */
.checkbox-input,
.radio-input {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  cursor: pointer;
}
.checkbox-input > .checkbox,
.radio-input > .checkbox { flex-shrink: 0; }    /* checkbox は label と top 揃え (margin-top 無し、user spec) */
.checkbox-input > .radio,
.radio-input > .radio { margin-top: var(--space-0-5); flex-shrink: 0; }
.checkbox-input__body,
.radio-input__body {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-0-5);
}
.checkbox-input__label,
.radio-input__label {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-black);                            /* gray-900 */
}
.checkbox-input__helper,
.radio-input__helper {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-body);                            /* gray-600 */
}

/* === Card pattern (Left checkbox card / Advanced / Icon & text) === */
.checkbox-card,
.radio-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  padding: var(--space-4);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background-color var(--duration-normal, 0.2s) ease, border-color var(--duration-normal, 0.2s) ease;
}
.checkbox-card:hover,
.radio-card:hover {
  background-color: var(--bg-page);
}
/* :has() で input の checked 状態を反映、border を brand に */
.checkbox-card:has(.checkbox:checked),
.radio-card:has(.radio:checked) {
  border-color: var(--border-brand);
}
.checkbox-card > .checkbox { flex-shrink: 0; }   /* checkbox は margin-top 無し (user spec) */
.radio-card > .radio { margin-top: var(--space-0-5); flex-shrink: 0; }
.checkbox-card__body,
.radio-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  flex: 1;
  min-width: 0;
}
.checkbox-card__title,
.radio-card__title {
  margin: 0;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-black);
}
.checkbox-card__helper,
.radio-card__helper {
  margin: 0;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-body);
}

/* === Simple chip-style (label-only, padded card without input visible) === */
.checkbox-chip,
.radio-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-black);
  position: relative;
  transition: background-color var(--duration-normal, 0.2s) ease, border-color var(--duration-normal, 0.2s) ease, color var(--duration-normal, 0.2s) ease;
}
.checkbox-chip:hover,
.radio-chip:hover {
  background-color: var(--bg-page);
}
/* Checked state — blue-tinted bg + brand border + brand text + check icon prefix
   selector は `:has(:checked)` (input class 不問) と modifier `--active` の両方に対応 */
.checkbox-chip:has(:checked),
.radio-chip:has(:checked),
.checkbox-chip--active,
.radio-chip--active {
  background-color: var(--bg-brand-softer);                 /* blue-50 */
  border-color: var(--border-brand);                     /* brand-medium */
  color: var(--text-fg-brand);
}
.checkbox-chip > input,
.radio-chip > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* === Vertical card variant (Figma "Big cards grid") ===
   icon at top + label/helper below、grid layout 用 */
.checkbox-card--vertical,
.radio-card--vertical {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
.checkbox-card--vertical > .checkbox,
.checkbox-card--vertical > .radio,
.radio-card--vertical > .checkbox,
.radio-card--vertical > .radio { margin-top: 0; }

/* === Tinted variant (Figma "With description" — checked bg/border が brand-tinted) ===
   通常の card は border のみ brand-medium に切替するが、tinted では bg + border + text 全て brand 系に */
.checkbox-card--tinted:has(.checkbox:checked),
.radio-card--tinted:has(.radio:checked) {
  background-color: var(--bg-brand-softer);                 /* blue-50 (Figma) */
  border-color: var(--border-brand-subtle);                     /* blue-200 */
}
.checkbox-card--tinted:has(.checkbox:checked) .checkbox-card__title,
.radio-card--tinted:has(.radio:checked) .radio-card__title,
.checkbox-card--tinted:has(.checkbox:checked) .checkbox-card__helper,
.radio-card--tinted:has(.radio:checked) .radio-card__helper {
  color: var(--text-fg-info);                            /* blue-900 (deep brand) */
}

/* === Price display (Figma "With description" の price block) === */
.radio-card-price,
.checkbox-card-price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-0-5);
}
.radio-card-price__value,
.checkbox-card-price__value {
  font-family: var(--font-family);
  font-size: 36px;
  font-weight: 700;
  line-height: 36px;
  color: var(--text-black);
}
.radio-card-price__unit,
.checkbox-card-price__unit {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--text-body);
}

/* === Only Icon (square round button-like for selecting an icon) === */
.checkbox-icon-tile,
.radio-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  padding: 0;
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--text-label);                            /* gray-500 (default) */
  transition: background-color var(--duration-normal, 0.2s) ease, border-color var(--duration-normal, 0.2s) ease, color var(--duration-normal, 0.2s) ease;
  position: relative;
}
.checkbox-icon-tile:hover,
.radio-icon-tile:hover {
  background-color: var(--bg-page);
}
.checkbox-icon-tile:has(.checkbox:checked),
.radio-icon-tile:has(.radio:checked),
.checkbox-icon-tile--active,
.radio-icon-tile--active {
  border-color: var(--border-brand);
  color: var(--text-fg-brand);
}
.checkbox-icon-tile > input,
.radio-icon-tile > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* === .input--no-spinner — hide native number spinner buttons ===
   `<input type="number">` 内部の上下 spinner を非表示化。stepper UI で text-align: center
   が効かない (spinner が右側を専有していた) のを修正するため。 */
.input--no-spinner::-webkit-outer-spin-button,
.input--no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input--no-spinner {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* =========================================================
   Color picker (Figma 6917:11017)
   = 2 type variants: Default (swatch grid) / Choose color (HSV picker)
   ========================================================= */

/* Outer popover card — `.dropdown-menu` と同 spec */
.color-picker {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  font-family: var(--font-family);
  box-sizing: border-box;
  z-index: var(--z-dropdown, 30);
}

/* Current color preview row (Default type) — 現在選択中の色 + label */
.color-picker__preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.color-picker__preview-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 83px;
  height: var(--space-8);
  padding: var(--space-1);
  background-color: var(--bg-page);                 /* gray-50 (frame bg) */
  border: var(--border-width) solid var(--border-base);                 /* gray-200 */
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}
.color-picker__preview-swatch-inner {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xxs);
  /* bg-color set inline (ex: style="background-color: #0040d5;") */
}
.color-picker__preview-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  color: var(--text-body);                            /* gray-600 */
}

/* Swatch grid — 7-col grid of 24×24 cells with gap 4 */
.color-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 24px);
  gap: var(--space-1);
}
.color-picker__swatch {
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xxs);
  cursor: pointer;
  /* bg-color set inline */
  transition: transform var(--duration-normal, 0.2s) ease, box-shadow var(--duration-normal, 0.2s) ease;
}
.color-picker__swatch:hover { transform: scale(1.1); }
.color-picker__swatch--active,
.color-picker__swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--border-buffer), 0 0 0 4px var(--border-brand);  /* brand ring with white inner */
}

/* Reset color link (Default type bottom) */
.color-picker__reset {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;                        /* swatch grid 下に center 配置 */
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  color: var(--text-body);                            /* gray-600 */
}
.color-picker__reset:hover { color: var(--text-fg-disabled); text-decoration: none; }   /* hover で disabled gray、underline 無し */

/* === Choose color variant — HSV picker === */
.color-picker--choose {
  width: var(--space-60);
  gap: var(--space-3);
}

/* Saturation/Value canvas — bg は inline gradient で指定 */
.color-picker__canvas {
  position: relative;
  width: 216px;
  height: 119px;
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  cursor: crosshair;
  touch-action: none;                        /* drag 中の page scroll を防ぐ */
  /* bg は inline で linear-gradient を指定 */
}
.color-picker__canvas-dot {
  position: absolute;
  width: var(--space-4);
  height: var(--space-4);
  background-color: var(--bg-card);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.color-picker__canvas-dot::after {
  content: '';
  position: absolute;
  inset: var(--space-px);
  border: var(--border-width-lg) solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-full);
}

/* Hue slider row */
.color-picker__hue-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.color-picker__hue-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  color: var(--text-black);
  flex-shrink: 0;
}
.color-picker__hue-current {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.color-picker__hue-slider {
  position: relative;
  flex: 1;
  height: var(--space-2-5);
  background: linear-gradient(to right,
    var(--bg-danger) 0%, var(--bg-yellow) 17%, var(--bg-success) 33%,
    var(--bg-cyan) 50%, var(--bg-brand) 67%, var(--bg-fuchsia) 83%, var(--bg-danger) 100%);
  border: var(--border-width) solid var(--bg-section-main);
  border-radius: var(--radius);
  cursor: pointer;
  touch-action: none;                        /* drag 中の page scroll を防ぐ */
}
.color-picker__hue-thumb {
  position: absolute;
  top: 50%;
  width: var(--space-4);
  height: var(--space-4);
  background-color: var(--bg-brand-strong);
  border: var(--border-width-md) solid var(--border-buffer);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

/* RGB / HEX input row */
/* RGB & Icon row — Figma node 6922:11086 (216x52, Hgap4, counterAxisAlignItems=MAX = bottom)。
   icon 16x16 が container 下端に来るよう align-items: flex-end。 */
.color-picker__rgb {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
}
.color-picker__rgb-fields {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  flex: 1;
}
.color-picker__rgb-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  flex: 0 0 36px;                              /* Figma: R/G/B columns are 36w fixed */
  min-width: 0;
}
.color-picker__rgb-field--hex { flex: 0 0 64px; }     /* Figma: Hex column is 64w fixed */
.color-picker__rgb-input {
  height: var(--space-7);
  padding: var(--space-2) var(--space-1);                          /* horizontal padding 4 to fit 3-digit numbers */
  background-color: transparent;
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);                        /* form input 共通 radius (4px) */
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  color: var(--text-black);
  text-align: center;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  /* native number input の spinner buttons を非表示化 (Figma に spinner なし) */
  -moz-appearance: textfield;
  appearance: textfield;
}
.color-picker__rgb-input::-webkit-outer-spin-button,
.color-picker__rgb-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.color-picker__rgb-input:focus { border-color: var(--text-fg-brand); }
.color-picker__rgb-label {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  color: var(--text-black);
  text-align: center;
}
/* Toggle button between RGB / CMYK modes — chevron-sort icon (Lucide ChevronsUpDown)。
   Figma node 6922:11086: 16x16 icon。parent (.color-picker__rgb) が align-items: flex-end なので
   container 下端 (= label 行と水平揃え) に配置される。 */
.color-picker__rgb-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-4);
  height: var(--space-4);                              /* Figma chevron-sort 16x16 */
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-heading);                            /* semantic heading */
  flex-shrink: 0;
}
.color-picker__rgb-toggle:hover { color: var(--text-heading); }

/* ============================================================
   3.21 Popover (Figma 3303:16700 Popover + 16100:10663 Popover content + 16227:18806 Examples)
   container 255w default、border-base、radius-xs、shadow-md token。
   header 32h (bg-tertiary、padding 6/12、border-bottom)、body は content type で padding 異なる。
   arrow は 10x10 rotated 45° の diamond、4 position (top/bottom/left/right) で border 切替。
   ============================================================ */
.popover {
  position: relative;                          /* arrow positioning anchor */
  display: inline-flex;
  flex-direction: column;
  width: 255px;                                /* Figma default container 255w */
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);                   /* gray-200 */
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
  font-family: var(--font-family);
  z-index: var(--z-popover);
  box-sizing: border-box;
}
/* width modifiers — content type に応じて 216 / 305 / 320 / 384 を選択 */
.popover--w-216 { width: 216px; }
.popover--w-305 { width: 305px; }
.popover--w-320 { width: 320px; }
.popover--w-384 { width: 384px; }
.popover--w-89  { width: 89px; }              /* Vertical items default */
.popover--auto  { width: auto; }

/* Header (optional) — gray-100 bg, 14/20 700 (#101828) */
.popover__header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--space-8);
  padding: var(--space-1-5) var(--space-3);
  background-color: var(--bg-tertiary);                   /* gray-100 */
  border-bottom: var(--border-width) solid var(--border-base);
  border-top-left-radius: var(--radius-xs);
  border-top-right-radius: var(--radius-xs);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--text-black);
  box-sizing: border-box;
}
/* Body — Type=Text の textonly variant (padding 8/12) */
.popover__body {
  padding: var(--space-2) var(--space-3);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-body);                              /* gray-600 */
}
/* Padded body (User profile / Company profile / etc.) — padding 12 + flex column gap 10 */
.popover__body--padded {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  padding: var(--space-3);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-body);
}
.popover__body--gap-12 { gap: var(--space-3); }
.popover__body--gap-16 { gap: var(--space-4); }
.popover__body--horizontal {                   /* Description & image / Logo & details で horizontal layout */
  flex-direction: row;
  gap: var(--space-3);
  align-items: stretch;
}

/* Headings / paragraphs inside popover body */
.popover__heading {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  color: var(--text-black);
}
.popover__paragraph {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-body);
}
.popover__paragraph--xs {                      /* Tech company / @username 等 12/12 */
  font-size: 12px;
  line-height: 12px;
}
.popover__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--text-fg-brand);                              /* brand-medium */
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  text-decoration: none;
}
.popover__link:hover { text-decoration: underline; }

/* Vertical informational list — action menu として新規利用しない */
.popover__items {
  display: flex;
  flex-direction: column;
}
.popover__item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  border-bottom: var(--border-width) solid var(--border-base);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  color: var(--text-body);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.popover__item:last-child { border-bottom: 0; }
.popover__item:hover { background-color: var(--bg-secondary); }
.popover__item:focus-visible {
  outline: var(--border-width-md) solid var(--border-brand);
  outline-offset: calc(var(--space-0-5) * -1);
}
.popover__item-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
  color: var(--text-body);
}

/* Arrow — 10×10 white square rotated 45°、border は 2 辺だけ visible
   "back" 側 (popover に向く 2 辺) は border 透過させて popover 内側と一体化 */
.popover__arrow {
  position: absolute;
  width: var(--space-2-5);
  height: var(--space-2-5);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  pointer-events: none;
}
/* Position modifier: arrow placement に応じて popover を anchor する側を指定。
   container 自身の position は preview 側で `position: relative` 親 + top/left で配置する */
.popover--top    .popover__arrow {             /* popover が trigger の上 → arrow は popover 下端中央、下向き */
  bottom: calc(var(--space-1-5) * -1);
  left: 50%;
  margin-left: calc((var(--space-2-5) / 2) * -1);
  transform: rotate(45deg);
  border-top: 0;
  border-left: 0;
}
.popover--bottom .popover__arrow {             /* popover が trigger の下 → arrow は popover 上端中央、上向き */
  top: calc(var(--space-1-5) * -1);
  left: 50%;
  margin-left: calc((var(--space-2-5) / 2) * -1);
  transform: rotate(45deg);
  border-bottom: 0;
  border-right: 0;
}
/* arrow が上端 + header あり → arrow bg を header と同色 (gray-100) にして一体化 */
.popover--bottom:has(> .popover__header) .popover__arrow {
  background-color: var(--bg-tertiary);
}
.popover--left   .popover__arrow {             /* popover が trigger の左 → arrow は popover 右端中央、右向き */
  right: calc(var(--space-1-5) * -1);
  top: 50%;
  margin-top: calc((var(--space-2-5) / 2) * -1);
  transform: rotate(45deg);
  border-bottom: 0;
  border-left: 0;
}
.popover--right  .popover__arrow {             /* popover が trigger の右 → arrow は popover 左端中央、左向き */
  left: calc(var(--space-1-5) * -1);
  top: 50%;
  margin-top: calc((var(--space-2-5) / 2) * -1);
  transform: rotate(45deg);
  border-top: 0;
  border-right: 0;
}

/* Hover-driven helper (tooltip-wrap と同 pattern):
   `.popover-wrap` 内に trigger + popover 配置、hover/focus-within で popover を表示 */
.popover-wrap {
  position: relative;
  display: inline-flex;
}
.popover-wrap > .popover {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) ease;
}
.popover-wrap:hover > .popover,
.popover-wrap:focus-within > .popover {
  opacity: 1;
  pointer-events: auto;
}
/* anchor offsets for popover-wrap (space-2 gap from trigger) */
.popover-wrap > .popover.popover--top    { bottom: calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%); }
.popover-wrap > .popover.popover--bottom { top:    calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%); }
.popover-wrap > .popover.popover--left   { right:  calc(100% + var(--space-2)); top:  50%; transform: translateY(-50%); }
.popover-wrap > .popover.popover--right  { left:   calc(100% + var(--space-2)); top:  50%; transform: translateY(-50%); }

/* ============================================================
   3.9 Button system (Flowbite v3.1 / Figma node:15115-1821 準拠)

   構成:
   - Sizes:   xs / sm / base (default) / lg / xl
   - Colors:  primary / secondary / success / danger / warning / dark / light / ghost
   - Styles:  solid (default) / outline / ghost
   - States:  hover / focus / disabled / loading
   - Mods:    icon (square) / with-icon (gap auto) / loading / back

   Layer 3 の `.btn` (line 1154) で base layout (display:flex / gap / padding /
   radius / shadow) を持っており、ここではその上に color × style を載せる。
   ============================================================ */

/* === Sizes (Figma node 15115:1828〜1840 と完全一致)
   Figma 名称 → Layer 5 alias:
     default (15115:1844) → padding なし上書き (= xs 相当)
     sm  (15115:1840) → .btn--sm
     base (15115:1828) → .btn--base (本実装の default にもこれを使用)
     l   (15115:1832) → .btn--lg / .btn--l
     xl  (15115:1836) → .btn--xl
   .btn 単独 (size class なし) は実用上 base が期待されるため Layer 3 の
   xs サイズを base padding で上書き */
.btn {
  /* WHY: <button> は UA stylesheet で font-family が独自値 (Arial 等) になるため
     body の継承が効かない。明示的に var(--font-family) を指定しないと Noto Sans JP が
     当たらず、weight 500 を指定してもフォントが対応していなければ regular として描画される */
  font-family: var(--font-family);
  box-sizing: border-box;                     /* height 固定時に border が overflow しない */
  height: var(--space-10);                               /* base height — 明示固定 */
  padding: 0 var(--space-4);                            /* horizontal padding のみ (vertical は height で制御) */
  gap: var(--space-1-5);                                   /* item spacing */
  font-size: 14px;                            /* base font-size */
  font-weight: 500;                           /* medium — Figma 確定 */
  line-height: 20px;                          /* Figma 確定 */
  border-radius: var(--radius-xs);
  border: 0;                                  /* UA stylesheet の default border を reset。
                                                 各 variant (secondary / outline 系) は specificity で上書き */
}
/* === Sizes (Figma node 15115:1821 API 取得値、完全一致)
   height は明示固定し、padding は horizontal のみ */
.btn--xs   { height: 32px; padding: 0 var(--space-3); font-size: 12px; line-height: 20px; }
.btn--sm   { height: 36px; padding: 0 var(--space-3); font-size: 14px; line-height: 20px; }
.btn--base { height: 40px; padding: 0 var(--space-4); font-size: 14px; line-height: 20px; }
.btn--lg, .btn--l { height: 48px; padding: 0 var(--space-5); font-size: 16px; line-height: 24px; }
.btn--xl   { height: 52px; padding: 0 var(--space-6); font-size: 16px; line-height: 24px; }

/* === Solid variants ===
   各 color: bg-{color} + 白文字 (light/secondary は body 色) */
/* Focus ring: Figma 仕様で全 variant 2px spread の box-shadow (= OUTSIDE stroke 相当)。
   focus 時の bg は hover bg と同値。 */

/* WHY: Layer 3 の `.btn:focus { background: brand-strong }` (line 1231) は全 variant に
   適用されてしまうバグ。click 後 mouse-out で `:focus` のみ残ると全 button が
   brand-strong (濃い青) に変わる。各 variant ごとに `:focus` で initial bg を再適用して
   Layer 3 の意図しない overflow を抑止。:focus-visible / :hover / :active は別 rule で
   高 specificity (0,3,0) なので mouse focus にだけ作用する */
.btn--primary:focus { background-color: var(--bg-brand); }
.btn--secondary:focus { background-color: var(--bg-primary-soft); }
.btn--success:focus { background-color: var(--bg-success); }
.btn--danger:focus { background-color: var(--bg-danger); }
.btn--warning:focus { background-color: var(--bg-warning); }
.btn--dark:focus { background-color: var(--bg-dark); }
.btn--light:focus { background-color: var(--bg-white); }
.btn--ghost:focus { background-color: transparent; }
/* outline 系は initial bg = transparent */
.btn--outline:focus,
.btn--outline-primary:focus,
.btn--outline-secondary:focus,
.btn--outline-success:focus,
.btn--outline-danger:focus,
.btn--outline-warning:focus,
.btn--outline-dark:focus { background-color: transparent; }

/* :active = :hover と同値 (Figma に Active state は無いため hover を流用) */

.btn--primary {
  background-color: var(--bg-brand);
  color: var(--text-white); border: none;
}
.btn--primary:hover:not(:disabled),
.btn--primary:active:not(:disabled) { background-color: var(--bg-brand-strong); }
.btn--primary:focus-visible:not(:disabled) {
  outline: none;
  background-color: var(--bg-brand-strong);    /* #1a3fa3 */
  box-shadow: 0 0 0 2px var(--border-brand-subtle);  /* #bfdbfe */
}

.btn--secondary {
  background-color: var(--bg-primary-soft);
  color: var(--text-body);
  border: var(--border-width) solid var(--border-base);
}
.btn--secondary:hover:not(:disabled),
.btn--secondary:active:not(:disabled) { background-color: var(--bg-secondary); }
/* :active のみ text + icon を brand 色に */
.btn--secondary:active:not(:disabled) { color: var(--text-fg-brand); }
.btn--secondary:focus-visible:not(:disabled) {
  outline: none;
  background-color: var(--bg-secondary);         /* #f9fafb */
  box-shadow: 0 0 0 2px var(--gray-100);         /* #f3f4f6 */
}

.btn--success {
  background-color: var(--bg-success);
  color: var(--text-white); border: none;
}
.btn--success:hover:not(:disabled),
.btn--success:active:not(:disabled) { background-color: var(--bg-success-strong); }
.btn--success:focus-visible:not(:disabled) {
  outline: none;
  background-color: var(--bg-success-strong);     /* #006045 */
  box-shadow: 0 0 0 2px var(--border-success-subtle);  /* #a4f4cf */
}

.btn--danger {
  background-color: var(--bg-danger);
  color: var(--text-white); border: none;
}
.btn--danger:hover:not(:disabled),
.btn--danger:active:not(:disabled) { background-color: var(--bg-danger-strong); }
.btn--danger:focus-visible:not(:disabled) {
  outline: none;
  background-color: var(--bg-danger-strong);      /* #a50036 */
  box-shadow: 0 0 0 2px var(--border-danger-subtle);   /* #ffccd3 */
}

.btn--warning {
  background-color: var(--bg-warning);
  color: var(--text-white); border: none;
}
.btn--warning:hover:not(:disabled),
.btn--warning:active:not(:disabled) { background-color: var(--bg-warning-strong); }
.btn--warning:focus-visible:not(:disabled) {
  outline: none;
  background-color: var(--bg-warning-strong);     /* #b43403 */
  box-shadow: 0 0 0 2px var(--border-warning-subtle);  /* #fcd9bd */
}

.btn--dark {
  background-color: var(--bg-dark);
  color: var(--text-white); border: none;
}
.btn--dark:hover:not(:disabled),
.btn--dark:active:not(:disabled) { background-color: var(--bg-dark-strong); }
.btn--dark:focus-visible:not(:disabled) {
  outline: none;
  background-color: var(--bg-dark-strong);        /* #101828 */
  box-shadow: 0 0 0 2px var(--gray-200);          /* #e5e7eb */
}

.btn--light {
  background-color: var(--bg-white);
  color: var(--text-body);
  border: var(--border-width) solid var(--border-base);
}
.btn--light:hover:not(:disabled),
.btn--light:active:not(:disabled) { background-color: var(--bg-secondary); }
.btn--light:focus-visible:not(:disabled) {
  outline: none;
  background-color: var(--bg-secondary);
  box-shadow: 0 0 0 2px var(--gray-100);
}

.btn--ghost {
  background-color: transparent;
  color: var(--text-body); border: none;
}
.btn--ghost:hover:not(:disabled),
.btn--ghost:active:not(:disabled) {
  background-color: var(--bg-secondary-soft);
  color: var(--text-heading);
}
.btn--ghost:focus-visible:not(:disabled) {
  outline: none;
  background-color: transparent;
  box-shadow: 0 0 0 2px var(--gray-100);          /* #f3f4f6 */
}

/* Ghost Danger (Figma node 15115:1821, Color=Danger Ghost) — icon-only 想定の delete 系 */
.btn--ghost-danger {
  background-color: transparent;
  color: var(--text-fg-danger);                   /* #c70036 (danger) */
  border: none;
}
.btn--ghost-danger:hover:not(:disabled),
.btn--ghost-danger:active:not(:disabled) {
  background-color: var(--bg-danger-soft);        /* #fef0f2 */
  color: var(--text-fg-danger);
}
.btn--ghost-danger:focus-visible:not(:disabled) {
  outline: none;
  background-color: var(--bg-danger-soft);
  box-shadow: 0 0 0 2px var(--border-danger-subtle);  /* #ffccd3 */
}
/* Layer 3 .btn:focus override 対策 */
.btn--ghost-danger:focus { background-color: transparent; }

/* === Outline variants ===
   各 color: 透明 bg + border + colored text */
.btn--outline {
  background-color: transparent;
  color: var(--text-body);
  border: var(--border-width) solid var(--border-base);
}
.btn--outline:hover:not(:disabled),
.btn--outline:active:not(:disabled) { background-color: var(--bg-secondary-soft); }
.btn--outline:focus-visible:not(:disabled) {
  outline: none;
  box-shadow: 0 0 0 2px var(--gray-100);
}

.btn--outline-primary {
  background-color: transparent;
  color: var(--text-fg-brand);
  border: var(--border-width) solid var(--border-brand);
}
.btn--outline-primary:hover:not(:disabled),
.btn--outline-primary:active:not(:disabled) { background-color: var(--bg-brand-softer); }
.btn--outline-primary:focus-visible:not(:disabled) {
  outline: none;
  box-shadow: 0 0 0 2px var(--border-brand-subtle);  /* #bfdbfe */
}

.btn--outline-secondary {
  background-color: transparent;
  color: var(--text-body);
  border: var(--border-width) solid var(--border-base-medium);
}
.btn--outline-secondary:hover:not(:disabled),
.btn--outline-secondary:active:not(:disabled) { background-color: var(--bg-secondary); }
.btn--outline-secondary:focus-visible:not(:disabled) {
  outline: none;
  box-shadow: 0 0 0 2px var(--gray-100);
}

.btn--outline-success {
  background-color: transparent;
  color: var(--text-fg-success);
  border: var(--border-width) solid var(--border-success);
}
.btn--outline-success:hover:not(:disabled),
.btn--outline-success:active:not(:disabled) { background-color: var(--bg-success-soft); }
.btn--outline-success:focus-visible:not(:disabled) {
  outline: none;
  box-shadow: 0 0 0 2px var(--border-success-subtle);  /* #a4f4cf */
}

.btn--outline-danger {
  background-color: transparent;
  color: var(--text-fg-danger);
  border: var(--border-width) solid var(--border-danger);
}
.btn--outline-danger:hover:not(:disabled),
.btn--outline-danger:active:not(:disabled) { background-color: var(--bg-danger-soft); }
.btn--outline-danger:focus-visible:not(:disabled) {
  outline: none;
  box-shadow: 0 0 0 2px var(--border-danger-subtle);  /* #ffccd3 */
}

.btn--outline-warning {
  background-color: transparent;
  color: var(--text-fg-warning);
  border: var(--border-width) solid var(--border-warning);
}
.btn--outline-warning:hover:not(:disabled),
.btn--outline-warning:active:not(:disabled) { background-color: var(--bg-warning-soft); }
.btn--outline-warning:focus-visible:not(:disabled) {
  outline: none;
  box-shadow: 0 0 0 2px var(--border-warning-subtle);  /* #fcd9bd */
}

.btn--outline-dark {
  background-color: transparent;
  color: var(--text-heading);
  border: var(--border-width) solid var(--border-dark);
}
.btn--outline-dark:hover:not(:disabled),
.btn--outline-dark:active:not(:disabled) { background-color: var(--bg-secondary); }
.btn--outline-dark:focus-visible:not(:disabled) {
  outline: none;
  box-shadow: 0 0 0 2px var(--gray-200);          /* #e5e7eb */
}

/* === Disabled state (Figma node 15115:1821 確定値) ===
   全 color × 全 style で単色 gray に変換 (色情報を消去):
     bg     = #f3f4f6 (gray-100)
     border = #e5e7eb (gray-200) / 1px
     text   = #99a1af (gray-400)
     opacity = 1 (フェードしない)
   例外: ghost は bg/border なし、text のみ gray */
.btn:disabled, .btn[aria-disabled="true"] {
  background-color: var(--bg-disabled) !important;       /* #f3f4f6 */
  border: var(--border-width) solid var(--border-base-medium) !important; /* #e5e7eb */
  color: var(--text-fg-disabled) !important;             /* #99a1af */
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--ghost:disabled, .btn--ghost[aria-disabled="true"],
.btn--ghost-danger:disabled, .btn--ghost-danger[aria-disabled="true"] {
  background-color: transparent !important;
  border: none !important;
  /* text 色は上の rule で gray-400 に */
}

/* === Modifier: persistent active state ===
   `.btn--active` / `aria-pressed="true"` / `aria-current` で button を「選択中」表示。
   :active (mouse-down 専用) と同じ視覚 (text + icon brand 色 + hover bg) を永続適用。
   主に btn-group の selected item / pagination の current page で使用 */
.btn--secondary.btn--active,
.btn--secondary[aria-pressed="true"]:not(:disabled),
.btn--secondary[aria-current]:not(:disabled) {
  background-color: var(--bg-secondary);
  color: var(--text-fg-brand);
}
.btn--light.btn--active,
.btn--light[aria-pressed="true"]:not(:disabled),
.btn--light[aria-current]:not(:disabled) {
  background-color: var(--bg-secondary);
  color: var(--text-fg-brand);
}
/* btn-group 内で active button の border が他に隠されないよう前面に */
.btn-group > .btn--active,
.btn-group > .btn[aria-pressed="true"],
.btn-group > .btn[aria-current] { z-index: 1; }

/* === Modifier: icon-only square (width = height、text 版と完全一致) === */
.btn--icon { width: 40px; height: 40px; padding: 0 !important; flex-shrink: 0; line-height: 1; }
.btn--icon.btn--xs { width: 32px; height: 32px; }
.btn--icon.btn--sm { width: 36px; height: 36px; }
.btn--icon.btn--base { width: 40px; height: 40px; }
.btn--icon.btn--lg, .btn--icon.btn--l { width: 48px; height: 48px; }
.btn--icon.btn--xl { width: 52px; height: 52px; }

/* === Modifier: back button === */
.btn--back {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-3) var(--space-5);
  background: none; border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs); cursor: pointer;
  font-size: var(--font-sm); color: var(--text-body);
}
.btn--back:hover { background-color: var(--bg-secondary); }

/* === Modifier: with-icon (icon + text の gap auto) ===
   .btn 自体に gap:--space-1-5 が定義済なので追加スタイル不要だが、
   class 名として明示できるよう alias を用意 */
.btn--with-icon { /* alias only — gap は .btn から継承 */ }

/* === Modifier: loading ===
   テキストは visible のまま、左に spinner を inline 描画。
   currentColor で button の text 色を継承するため variant 毎の調整不要 */
.btn--loading {
  pointer-events: none;
  cursor: wait;
}
.btn--loading::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  border: var(--border-width-md) solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ds-spin 0.6s linear infinite;
  flex-shrink: 0;
}
/* icon-only button では text が無いので spinner を中央に置き、size は box の半分強 */
.btn--icon.btn--loading::before {
  width: 60%; height: 60%;
}

/* === Button group (Figma node 15394:5318 + 15398:8246) ===
   隣接 button を 1 つの control に見せる。border を -1px で重ね、
   first/last だけ角丸。hover/focus 時に z-index で前面に出して border が見えるよう */
.btn-group {
  display: inline-flex;
  isolation: isolate;
}
.btn-group > .btn,
.btn-group > .btn-group {
  border-radius: 0;
  margin-left: calc(var(--space-px) * -1);
  position: relative;
}
.btn-group > .btn:hover:not(:disabled),
.btn-group > .btn:focus:not(:disabled),
.btn-group > .btn:focus-visible:not(:disabled),
.btn-group > .btn:active:not(:disabled) { z-index: 1; }
.btn-group > .btn:first-child,
.btn-group > .btn-group:first-child > .btn:first-child {
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
  margin-left: 0;
}
.btn-group > .btn:last-child,
.btn-group > .btn-group:last-child > .btn:last-child {
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

/* === Button group: vertical variant (Figma "Vertical") === */
.btn-group--vertical {
  flex-direction: column;
  display: inline-flex;
}
.btn-group--vertical > .btn {
  margin-left: 0;
  margin-top: calc(var(--space-px) * -1);
  border-radius: 0;
  width: 100%;
}
.btn-group--vertical > .btn:first-child {
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  margin-top: 0;
}
.btn-group--vertical > .btn:last-child {
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
}

/* ============================================================
   3.10 Badge
   ============================================================ */
/* === Badge (Figma node 639:4756 完全準拠)
   Themes (10): Gray / White / Brand / Danger / Warning / Success / Purple / Teal / Pink / Yellow
   Sizes (3): sm / lg / xl
   Types: Default / With avatar / With dot / With loader / With secondary text
   全て pill 形 (radius 9999) + 1px border、bg-soft + text-strong + border-subtle の組合せ */

/* Base reset (Layer 3 を上書き、theme なしのデフォルト = Gray) */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 500;
  border-radius: var(--radius-xxs);                    /* Figma 確定 — slightly rounded square */
  /* sm = default size */
  height: var(--space-5);
  padding: 0 var(--space-1-5);
  gap: var(--space-1);
  font-size: 12px;
  line-height: 16px;
  background-color: var(--gray-100);     /* #f3f4f6 */
  color: var(--gray-900);                /* #101828 */
  border: var(--border-width) solid var(--gray-200);     /* #e5e7eb */
}
/* pill 形 (OnlyText=True) — radius 9999、min-width = height で短い text でも円形を維持
   `.badge.badge--pill` で specificity を上げて line 3712 の `width: auto` reset を打消 */
.badge.badge--pill {
  border-radius: var(--radius-full);
  min-width: var(--space-5);                       /* sm = default、height と一致 */
}
.badge.badge--pill.badge--lg { min-width: 24px; }
.badge.badge--pill.badge--xl { min-width: 32px; }
/* Only icon — width = height で square + pill (Figma OnlyIcon=True と一致)
   `.badge.badge--icon-only` で specificity を上げて line ~3712 の `.badge { width: auto }` を打消 */
.badge.badge--icon-only {
  border-radius: var(--radius-full);
  padding: 0;
  flex-shrink: 0;
  width: var(--space-5);                           /* sm = default、height: 20px は base から継承 */
}
.badge.badge--icon-only.badge--lg { width: 24px; height: 24px; }
.badge.badge--icon-only.badge--xl { width: 32px; height: 32px; }

/* === Sizes (height 明示固定、padding は horizontal のみ) === */
.badge--sm { height: 20px; padding: 0 var(--space-1-5); gap: var(--space-1); font-size: 12px; line-height: 16px; }
.badge--lg { height: 24px; padding: 0 var(--space-2); gap: var(--space-1-5); font-size: 14px; line-height: 16px; }
.badge--xl { height: 32px; padding: 0 var(--space-2); gap: var(--space-1-5); font-size: 14px; line-height: 16px; }

/* === Themes (10) === */
.badge--gray    { background-color: var(--bg-tertiary); border-color: var(--border-base); color: var(--text-heading); }
.badge--white   { background-color: var(--bg-white); border-color: var(--border-base); color: var(--text-heading); }
.badge--brand   { background-color: var(--bg-brand-softer); border-color: var(--border-brand-subtle); color: var(--text-fg-brand-strong); }
.badge--danger  { background-color: var(--bg-danger-soft); border-color: var(--border-danger-subtle); color: var(--text-fg-danger-strong); }
.badge--warning { background-color: var(--bg-warning-soft); border-color: var(--border-warning-subtle); color: var(--text-fg-warning); }
.badge--success { background-color: var(--bg-success-soft); border-color: var(--border-success-subtle); color: var(--text-fg-success-strong); }
.badge--purple  { background-color: var(--bg-purple-soft); border-color: var(--border-purple-subtle); color: var(--text-fg-purple-strong); }
.badge--teal    { background-color: var(--bg-teal-soft); border-color: var(--border-teal-subtle); color: var(--text-fg-teal-strong); }
.badge--pink    { background-color: var(--bg-pink-soft); border-color: var(--border-pink-subtle); color: var(--text-fg-pink-strong); }
.badge--yellow  { background-color: var(--bg-yellow-soft); border-color: var(--border-yellow-subtle); color: var(--text-fg-yellow-strong); }

/* alias: info → brand 互換 */
.badge--info    { background-color: var(--bg-brand-softer); border-color: var(--border-brand-subtle); color: var(--text-fg-brand-strong); }

/* === Type modifiers === */

/* With dot — text 左に小さい dot (currentColor を継承して theme に追従) */
.badge-dot {
  width: var(--space-1-5);
  height: var(--space-1-5);
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex-shrink: 0;
}

/* With loader — text 左に spinner */
.badge-spinner {
  width: 0.875em;
  height: 0.875em;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: ds-spin 0.6s linear infinite;
  flex-shrink: 0;
}

/* With secondary text — main + secondary を横並び (Figma layout HORIZONTAL gap=6)
   間に縦線 separator (currentColor を opacity 落として) */
.badge-text {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-1-5);
}
.badge-text-secondary {
  font-weight: 400;            /* regular (primary は 500 medium) */
}
.badge-text-separator {
  width: var(--space-px);
  height: 0.85em;
  background-color: currentColor;
  opacity: 0.3;
  flex-shrink: 0;
}

/* Close (×) icon — clickable */
.badge-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: currentColor;
  opacity: 0.7;
  flex-shrink: 0;
}
.badge-close:hover { opacity: 1; }

/* ============================================================
   3.12.5 Breadcrumb (Figma node 3284:24211 + 15633:19362)
   ============================================================ */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--gray-600);
}

/* item — link or text segment */
.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--gray-600);                     /* #4a5565 — Figma Initial */
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-default, ease);
}
.breadcrumb-item:hover:not([aria-current]):not(:disabled) {
  color: var(--text-fg-brand);                /* #0040d5 — Figma Hover */
}
.breadcrumb-item[aria-current="page"],
.breadcrumb-item.breadcrumb-item--current {
  color: var(--gray-500);                     /* #6a7282 — Figma Active (current page) */
  cursor: default;
}

/* separator (chevron / slash 等) — items 間の区切り */
.breadcrumb-separator {
  color: var(--gray-500);                     /* #6a7282 */
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  user-select: none;
}

/* === Type variants === */

/* Background — bg + border でカード風 (Figma Type=Background) */
.breadcrumb--background {
  padding: var(--space-2-5);
  background: var(--bg-secondary);            /* #f9fafb */
  border: var(--border-width) solid var(--border-base-medium);/* #e5e7eb */
  border-radius: var(--radius-xs);
}

/* Only buttons — gap 4、items 間 chevron なしで btn 並列 */
.breadcrumb--only-buttons {
  gap: var(--space-1);
  color: var(--text-heading);
}

/* ============================================================
   3.14 Modal — Figma 15848:175695 (header) / 15848:175329 (footer)
   ============================================================ */
/* Modal header (Figma 15848:175695、user spec で pad 調整)
   Default: pad 0 0 20px 0 (only bottom)、HORIZONTAL gap 24、cA=CENTER、border-bottom。
   左に title (or icon + heading)、右に close button (36×36)。
   horizontal pad は modal の pad=24 が外側で吸収。 */
.modal-header {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0;                                    /* user spec: padding-bottom 0 (modal の gap 24 で間隔) */
  border-bottom: 0;                              /* user spec: border-bottom 無し */
  margin: 0;                                     /* reset inherited modal header spacing */
}
/* heading 側 (title 単体 or group) を grow して close を右端へ。icon は除外 (固定 40×40) */
.modal-header > .modal-title,
.modal-header > .modal-header__group {
  flex: 1;
  min-width: 0;
}
.modal-title {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--text-black);
  margin: 0 !important;                          /* preview の `.ds-section h2/h3` (Svelte scoped) を override */
}
.modal-subtitle {                                /* Type=Heading & supporting text */
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--text-body);
  margin: 0 !important;
}
.modal-header__group {                           /* title + subtitle stack (Type=Heading & supporting text) */
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  flex: 1;
  min-width: 0;
}
/* Modal header sub-elements (Figma 15848:175695 全 7 type)
   - Type=Default                    : title 単体 (+ optional icon)
   - Type=Heading & supporting text  : __group (title + subtitle 縦 stack、gap 6)
   - Type=Icon + Heading & helper    : __icon-shape (48×48 white sq + gray border) + __group
   - Type=With Logo                  : __logo (48×48 logo image) + __group
   - Type=Logo & icons               : __logo + __group + __icons (右側 icon button group)
   - Type=Avatar group               : --vertical 配置、__avatars + heading + close を 1 列、helper text 下
   - Type=Breadcrumb                 : breadcrumb component を直接 child に */
.modal-header__icon-shape {                      /* Type=Icon + Heading: 48×48 white + gray border + radius 4 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-xs);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  color: var(--text-body);
  flex-shrink: 0;
}
.modal-header__logo {                            /* Type=With Logo: 48×48、logo image container (border なし) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  flex-shrink: 0;
}
.modal-header__logo > img,
.modal-header__logo > svg {
  max-width: 100%;
  max-height: 100%;
}
/* Figma 仕様: \"Icon & Heading\" 内部 wrapper の gap=10、header 全体 gap=24。
   markup を二段にせず、logo/icon-shape の直後 group に negative margin で 24→10 に縮める */
.modal-header__logo + .modal-header__group,
.modal-header__icon-shape + .modal-header__group {
  margin-left: calc(var(--space-3-5) * -1);                            /* parent gap 24 - 14 = 10 (Figma 確定) */
}
.modal-header__icons {                           /* Type=Logo & icons: 右側 icon button 群 (HORIZONTAL gap 8) */
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}
/* Type=Avatar group は VERTICAL 配置 (gap 8) */
.modal-header--vertical {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
.modal-header--vertical .modal-header__row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1;
}
.modal-header--vertical .modal-header__row > .modal-title,
.modal-header--vertical .modal-header__row > .modal-header__group {
  flex: 1;
  min-width: 0;
}
/* Avatar group (overlap -16) — Type=Avatar group 用、既存 .avatar-group があれば流用可 */
.modal-header__avatars {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.modal-header__avatars > * + * { margin-left: calc(var(--space-4) * -1); }   /* overlap */
.modal-header__avatars > * {
  border: var(--border-width-md) solid var(--border-buffer);                     /* white ring (重なり境界の視認性) */
  border-radius: var(--radius-full);
  width: var(--space-11);
  height: var(--space-11);
  box-sizing: border-box;
}

/* Modal body — VERTICAL gap 16、scroll 可、padding 0 (modal pad=24 が外側で囲む) */
.modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0;
  margin: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.modal-body p { margin: 0; }
.modal-body > .table-card { margin: 0; }          /* modal padding (24px) が外周を担うため table-card 自身の margin は不要 */

/* Key-value list for modal body (confirm dialogs, detail views) */
.modal-kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1-5) var(--space-5);
  margin: 0;
}
.modal-kv dt {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body-subtle);
  white-space: nowrap;
  padding: var(--space-0-5) 0;
}
.modal-kv dd {
  font-size: var(--text-sm);
  color: var(--text-heading);
  margin: 0;
  padding: var(--space-0-5) 0;
}
.modal-body--center {                            /* Type=Popup / Type=With progress bar の中央寄せ body */
  align-items: center;
  text-align: center;
}

/* Modal footer (Figma 15848:175329) — 全 4 type
   - Type=Buttons         : pad 16、HORIZONTAL、justify-end (default)、buttons は min-width 96
   - Type=Pagination      : pad 16、HORIZONTAL、justify-between (左に \"Showing X of Y\"、右に pagination)
   - Type=3 buttons       : pad 16、HORIZONTAL、justify-between (左に 1 button、右に 2 button group)
   - Type=Buttons & links : pad 16、HORIZONTAL、justify-between (左に links、右に buttons) */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) 0 0 0;                 /* user spec: top 16 のみ (modal の gap + body との視覚的余白) */
  border-top: 0;                                 /* user spec: border-top 無し */
  margin: 0;
}
.modal-footer--between {
  justify-content: space-between;
}
.modal-footer--center {                          /* Type=Popup の center 寄せ button row */
  justify-content: center;
}
/* footer 内の text button (.btn) は Figma 通り 96 min-width。icon-only / pagination 内 button は除外 */
.modal-footer > .btn {
  min-width: var(--space-24);
}
/* footer 内の links list (Type=Buttons & links 用) — text dot text */
.modal-footer__links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.modal-footer__links > a,
.modal-footer__links > .modal-footer__link {
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: var(--text-body);
  text-decoration: none;
}
.modal-footer__links > a:hover { color: var(--text-heading); }
.modal-footer__links-dot {                       /* 6×6 gray dot (項目区切り) */
  display: inline-block;
  width: var(--space-1-5);
  height: var(--space-1-5);
  border-radius: var(--radius-full);
  background-color: var(--bg-quaternary);
  flex-shrink: 0;
}
/* footer 内の button group (右寄せ用 wrapper、Type=3 buttons 等) */
.modal-footer__group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.modal-footer__group > .btn {
  min-width: var(--space-24);
}
/* Pagination 系 footer 用 — \"Showing X of Y\" text */
.modal-footer__info {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text-body);
}

/* 3.15 Alert — see Layer 3 §3.4 area `.alert` (Figma 3:251728 完全準拠) */

/* ============================================================
   3.18 Toast region — `.toast` の正規 implementation は Layer 3 §3.X (Figma 16164:35870 完全準拠)。
   ここでは fixed-position の stack container のみ定義。
   ============================================================ */
.toast-region {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column-reverse;              /* 新 toast を bottom に積む (visually 下から積み上がる) */
  gap: var(--space-3);
  z-index: var(--z-toast);
  pointer-events: none;                        /* container は pass-through、各 .toast 自身が pointer-events: auto */
  max-width: calc(100vw - var(--space-12));
}
.toast-region > .toast { animation: ds-slide-in var(--duration-normal) ease-out; }
@keyframes ds-slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ============================================================
   3.19 Tooltip — see Layer 3 `.tooltip` (line ~1700) for the canonical
   Figma-準拠 implementation。tooltip content は `.tooltip` に統合。
   ============================================================ */

/* ============================================================
   3.20 Dropdown menu (Figma 15772:13704 完全準拠)
   `.dropdown-menu`     popover container (bg-card, border-base, radius 4, shadow-md token)
   `.dropdown-menu__list` 通常 padding 6px の inner list
   `.dropdown-header`   top section variants (Text & helper / With avatar / 等)
   `.dropdown-divider`  1px gray-200 separator
   `.dropdown-item`     individual row (Layer 3 §で既に定義)
   ============================================================ */
.dropdown-menu {
  display: inline-flex;
  flex-direction: column;
  min-width: var(--space-56);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);                 /* gray-200 */
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
  padding: var(--space-1-5);
  z-index: var(--z-dropdown, 30);
  font-family: var(--font-family);
  box-sizing: border-box;
}
.dropdown-wrap {
  position: relative;
  display: inline-flex;
}
/* When used as absolute popover */
.dropdown-menu--popover {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  display: none;
  max-height: calc(8 * var(--space-9) + var(--space-3)); /* 8 items × 36px + 12px padding = 300px */
  overflow-y: auto;
}
.dropdown-wrap--open > .dropdown-menu--popover { display: inline-flex; }

/* Inner list (when grouped under heading/separators) */
.dropdown-menu__list {
  display: flex;
  flex-direction: column;
}

/* Divider — 1px gray-200 line */
.dropdown-divider {
  height: var(--space-px);
  background-color: var(--bg-quaternary);
  border: 0;                                                                      /* <hr> UA default の inset border をリセット */
  margin: var(--space-1-5) calc(var(--space-1-5) * -1);                          /* extend full-width past parent padding */
}

/* === Header variants (Figma 15772:13690) ===
   Default = "Text & helper" type — vertical flex (Figma 15772:13762: Vgap 2)
   Modifier:
     --row    With avatar / Selector type — horizontal layout
     --big    Big avatar — vertical with button (gap 12) */
.dropdown-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-2) var(--space-2-5);
  background-color: var(--bg-page);                 /* gray-50 (Figma 確定) */
  border-radius: var(--radius-xxs);
  margin: calc(var(--space-1-5) * -1) calc(var(--space-1-5) * -1) var(--space-1-5) calc(var(--space-1-5) * -1);                /* full-bleed inside menu padding */
}
/* `<p class="dropdown-header__title">` で利用される際、preview などの global
   `p { margin: 0 0 var(--space-3) }` (Svelte scoped で specificity 0,3,1) に勝つため
   `!important` で margin reset する */
.dropdown-header__title {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  color: var(--text-black);                            /* gray-900 */
}
.dropdown-header__helper {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-body);                            /* gray-600 */
}
/* Row variant — avatar + body + badge を横並び (With avatar / Selector type) */
.dropdown-header--row {
  flex-direction: row;
  align-items: center;
  gap: var(--space-1-5);
}
/* Body wrapper (row variant 内で text を縦積みにグルーピング) */
.dropdown-header__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  flex: 1;
  min-width: 0;
}
/* Big avatar variant — vertical with button (gap 12) */
.dropdown-header--big {
  align-items: flex-start;
  gap: var(--space-3);
  background: transparent;
}

/* === Dropdown heading — bold title section (Figma "Heading & Button" type) ===
   menu 内の section heading として使う。bg なし、bold 14px。
   Figma 確定: paddingTop 8 / paddingBottom 0 (item の paddingTop 8 と合わせて 8px gap) */
.dropdown-heading {
  margin: 0 calc(var(--space-1-5) * -1);                            /* extend full-width past parent padding */
  padding: var(--space-2) var(--space-2-5) 0 var(--space-2-5);                  /* paddingBottom: 0 (Figma 確定) */
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--text-black);                            /* gray-900 */
}
/* 2 つ目以降の heading (multi-section menu) には、前 section との視覚的区切りで
   margin-top を追加。最初の heading には適用されない (`* + ` selector)。
   `!important`: preview の `.ds-section p { margin: 0 0 var(--space-3) }` (Svelte scoped、
   specificity 0,3,1) が `* + .dropdown-heading` (0,1,0) を override するため。 */
* + .dropdown-heading {
  margin-top: var(--space-2) !important;
}

/* === Grid layout (Figma "Grid" type) ===
   3-col grid of icon-tile items (87×68 each) for app launcher / quick-action menu */
.dropdown-menu--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1-5);
}
.dropdown-item--grid-cell {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  padding: var(--space-3);
  background-color: var(--bg-page);                 /* gray-50 */
  text-align: center;
  width: auto;
  min-height: 68px;
}
.dropdown-item--grid-cell:hover,
.dropdown-item--grid-cell--active {
  background-color: var(--bg-quaternary);                 /* gray-200 (Figma active state) */
  color: var(--text-black);
}

/* === Empty state (Figma "Text & illustration") ===
   menu 全体を 1 つの empty-state container として使う */
.dropdown-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-4);
  background-color: var(--bg-page);
  border-radius: var(--radius-xs);
  margin: calc(var(--space-1-5) * -1);                              /* full-bleed */
  text-align: center;
}
.dropdown-empty__title {
  margin: 0 !important;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  color: var(--text-black);
}
.dropdown-empty__helper {
  margin: 0 !important;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-body);
}

/* === CTA box (Figma "Menu" type の上部 CTA section) ===
   bordered box with heading + button、menu の先頭で promo / upsell に使う */
.dropdown-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: var(--bg-page);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xxs);
  margin: 0 0 var(--space-1-5) 0;
}
.dropdown-cta__title {
  margin: 0 !important;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-black);
}

/* === Autocomplete (Figma 15824:168818 item / 2956:1274 menu / 15824:168246 examples) ===
   検索 input + dropdown popover、各 item は `.dropdown-item` を流用。差分:
     - 右端に close (X) icon (検索履歴の削除用)
     - 一部 type は Save icon + separator + close の actions group を持つ
     - "Heading & description" type は icon shape (36×36) + heading + helper の rich item
   ========================================================= */

/* Item — dropdown-item を base に、右端 close button を持つ pattern */
.autocomplete-item {
  /* dropdown-item と同 spec で composition に使う想定。class 名は意味重視 */
}

/* Selectable body — item 内 action と候補選択を分離する */
.autocomplete-item__select {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  flex: 1;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.autocomplete-item__select:focus-visible {
  outline: var(--border-width-md) solid var(--border-brand);
  outline-offset: var(--space-0-5);
  border-radius: var(--radius-xxs);
}

/* Close button (X) — item 内右端に配置、検索履歴から削除 */
.autocomplete-item__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-3-5);
  height: var(--space-3-5);
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-body);                            /* gray-600 (Figma) */
  flex-shrink: 0;
}
.autocomplete-item__close:hover { color: var(--text-heading); }

/* Right actions group (Save + separator + close、Bordered/Heading types) */
.autocomplete-item__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  margin-left: auto;
  flex-shrink: 0;
}
.autocomplete-item__actions-separator {
  width: var(--space-px);
  height: var(--space-2-5);
  background-color: var(--bg-quaternary);                 /* gray-200 */
}
.autocomplete-item__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-3-5);
  height: var(--space-3-5);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-body);
  flex-shrink: 0;
}
.autocomplete-item__action-icon:hover { color: var(--text-heading); }

/* Secondary text (right-side helper text、With secondary text type) */
.autocomplete-item__secondary {
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  color: var(--text-label);                            /* gray-500 */
}

/* Icon shape (round bordered icon, Heading & description type) */
.autocomplete-item__icon-shape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-full);
  color: var(--text-black);
  flex-shrink: 0;
}

/* Heading & helper body (vertical stack, Heading & description type) */
.autocomplete-item__heading-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  flex: 1;
  min-width: 0;
}
.autocomplete-item__heading {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-black);
}
.autocomplete-item__helper {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-body);
}

/* Highlight — query match emphasis (Highlighted text variant) */
.autocomplete-highlight {
  font-weight: 700;
  color: var(--text-black);
}

/* ============================================================
   3.21 Drawer — Figma 15753:2373 (Drawer) + 15765:1636 (heading) + 17235:11029 (footer)
   ============================================================ */
.drawer-overlay {
  position: fixed; inset: 0;
  background: var(--bg-modal);                   /* Modal と同じ rgba(74,85,101,0.75) */
  z-index: calc(var(--z-drawer) - 1);
}

/* === Drawer header (Figma 15765:1636 — 8 type) ===
   Default: padding-bottom 16 only + border-bottom (drawer pad=20 が外側を囲む)、HORIZONTAL gap 24、cA=CENTER
   Compact (Type=Heading / Logo): padding-bottom 16、SPACE_BETWEEN */
.drawer-header {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0 0 var(--space-4) 0;                           /* user spec: bottom 16 のみ */
  border-bottom: var(--border-width) solid var(--border-base);
  margin: 0;
}
.drawer-header--compact {                        /* Type=Heading / Logo: 同 padding-bottom 16 */
  padding: 0 0 var(--space-4) 0;
  gap: 0;
}
/* heading 側 (title 単体 or group) を grow して close を右端へ。icon-shape 等は除外 */
.drawer-header > .drawer-title,
.drawer-header > .drawer-header__group,
.drawer-header > .drawer-header__breadcrumb {
  flex: 1;
  min-width: 0;
}
.drawer-header--compact > * {
  margin-right: auto;                            /* SPACE_BETWEEN 風 */
}
.drawer-header--compact > .drawer-close {
  margin-right: 0;
  margin-left: auto;
}

/* Title / Subtitle */
.drawer-title {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--text-black);
  margin: 0 !important;
}
.drawer-subtitle {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--text-body);
  margin: 0 !important;
}
.drawer-header__group {                          /* title + subtitle stack — Figma: gap 0 (line-height で視覚 gap が出る) */
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-width: 0;
}
/* Type=With icon — 48×48 white sq + gray border */
.drawer-header__icon-shape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  background: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  color: var(--text-body);
  flex-shrink: 0;
}
/* Type=With Logo / Logo & icons / Logo & text — 48×48 logo container */
.drawer-header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  flex-shrink: 0;
}
.drawer-header__logo > img,
.drawer-header__logo > svg { max-width: 100%; max-height: 100%; }
/* Type=Logo & icons — 右側 icon button 群 */
.drawer-header__icons {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}
/* Type=With user group — VERTICAL 配置 + 下に helper text */
.drawer-header--vertical {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
.drawer-header--vertical .drawer-header__row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.drawer-header--vertical .drawer-header__row > .drawer-title,
.drawer-header--vertical .drawer-header__row > .drawer-header__group {
  flex: 1;
  min-width: 0;
}
/* Avatar group (overlap -16) */
.drawer-header__avatars {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.drawer-header__avatars > * + * { margin-left: calc(var(--space-4) * -1); }
.drawer-header__avatars > * {
  border: var(--border-width-md) solid var(--border-buffer);
  border-radius: var(--radius-full);
  width: var(--space-11);
  height: var(--space-11);
  box-sizing: border-box;
}
/* Logo + Heading 後の group 間 gap を 10px に縮小 (Figma 通り、wrapper 不要) */
.drawer-header__logo + .drawer-header__group,
.drawer-header__icon-shape + .drawer-header__group {
  margin-left: calc(var(--space-3-5) * -1);                            /* parent gap 24 - 14 = 10 */
}
/* Avatar (avatar variant、32×32 round) */
.drawer-header__avatar {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  object-fit: cover;
}

/* Close button (existing .drawer-close でも互換、新規 drawer 系は modal-close と同等) */
.drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-label);
  cursor: pointer;
  flex-shrink: 0;
}
.drawer-close:hover { background-color: var(--bg-tertiary); color: var(--text-heading); }
.drawer-close:focus-visible { outline: var(--border-width-md) solid var(--border-brand); outline-offset: var(--space-0-5); }

/* === Drawer body — VERTICAL gap 16、scroll 可、pad 0 (drawer pad=20 が外側で囲む) === */
.drawer-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0;
  margin: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* === Drawer footer (Figma 17235:11029 — 4 type) ===
   default (Type=Two buttons): pad 20、HORIZONTAL cA=CENTER gap 16、justify-end
   --between (Type=3 buttons / Buttons & links): pA=SPACE_BETWEEN
   --stack (Type=Type4 mobile): VERTICAL gap 16 (button が full width で縦並び) */
.drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);                                      /* user spec: button 間 8 */
  padding: var(--space-5) 0 0 0;                           /* user spec: top 20 のみ (drawer pad=20 が外側を囲む) */
  border-top: var(--border-width) solid var(--border-base);
  margin: 0;
}
.drawer-footer--between {
  justify-content: space-between;
}
.drawer-footer--stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);                                      /* user spec: stacked button 間 8 */
}
.drawer-footer--stack > .btn { width: 100%; }
.drawer-footer__group {                          /* 右寄せ button group (Type=3 buttons)、内部 gap も 8 */
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.drawer-footer__links {                          /* Terms / Privacy 系 link group (Type=Buttons & links) */
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.drawer-footer__links > a {
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: var(--text-body);
  text-decoration: none;
}
.drawer-footer__links > a:hover { color: var(--text-heading); }
.drawer-footer__links-dot {
  display: inline-block;
  width: var(--space-1-5);
  height: var(--space-1-5);
  border-radius: var(--radius-full);
  background-color: var(--bg-quaternary);
  flex-shrink: 0;
}

@keyframes ds-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes ds-slide-in-left  { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes ds-slide-in-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ds-slide-in-top    { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ============================================================
   3.21b Navbar — Figma 15954:6692 (Nav link) + 20416:263692/263742/263792 (Navbar patterns)
   ============================================================ */

/* === Navbar container === */
/* 全体: pad 12 vertical (12/12 = top/bottom 12)、bg white、border-bottom gray-200。
   inner content は HORIZONTAL flex で max-width 中央寄せ。
   variants:
     - .navbar              base (1 level、logo + nav links + buttons)
     - .navbar--with-input  pA=SPACE_BETWEEN (logo+input | nav links + buttons)
     - .navbar--search      logo + search bar (大型 input) + buttons */
.navbar {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--bg-card);
  border-bottom: var(--border-width) solid var(--border-base);
  padding: var(--space-3) var(--space-6);
  box-sizing: border-box;
  font-family: var(--font-family);
}
.navbar__content {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.navbar--with-input .navbar__content { justify-content: space-between; }

/* Sub-sections inside navbar */
.navbar__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.navbar__logo > img,
.navbar__logo > svg { max-height: 20px; width: auto; }
.navbar__links {                                 /* Nav Links group (HORIZONTAL gap 24) */
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1;
}
.navbar__buttons {                               /* 右側 button group (HORIZONTAL gap 12) */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.navbar__group {                                 /* logo+input / right content 等 grouping (HORIZONTAL gap 16) */
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.navbar__avatar {                                /* 32×32 round avatar (button group 内) */
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* === Nav link (Figma 15954:6692 — 13 type × 4 state) ===
   composable design: base \`.nav-link\` (HORIZONTAL gap 6 with text + optional icon/chevron) + modifiers + sub-elements。
   Layout modifiers:
     - .nav-link            base (HORIZONTAL inline)
     - .nav-link--bordered  card-style (border + radius 4 + pad 6/8 + min-width 224 + space-between)
     - .nav-link--stacked   VERTICAL (Icon top: icon 20×20 上 + text 下)
     - .nav-link--rich      large multi-line (Heading & helper / With icon shape / Big Icons / Top icon & cta)
   States (modifier or :hover):
     - default              text gray-700 (#4a5565、fw=500)
     - hover / .nav-link--active   text brand (#0040d5)
     - disabled / .nav-link--disabled   text gray-400 (#99a1af)
   Sub-elements:
     - .nav-link__chevron        right-side angle-down (18×18)
     - .nav-link__flag           left-side country flag (16×16)
     - .nav-link__icon-shape     bordered icon container (24×24 default、--lg で 36×36)
     - .nav-link__title          large title (16/18 700 #101828) — rich variant 用
     - .nav-link__desc           helper text (14/20 400 #4a5565) — rich variant 用
     - .nav-link__group          title + desc column (gap 4) — rich variant 用
     - .nav-link__sub            secondary text (16/24 500 #6a7282) — Double text variant 用 */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;                              /* Type=Default は fw=400 だが 500 が default、必要時に override */
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}
.nav-link:hover:not(:disabled):not(.nav-link--disabled),
.nav-link.nav-link--active { color: var(--text-fg-brand); }
.nav-link:disabled,
.nav-link.nav-link--disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* Sub-elements (color: inherit でテキストと同期) */
.nav-link__chevron,
.nav-link__flag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: inherit;
}
.nav-link__icon-shape {                          /* 24×24 white sq + gray border (rich variant 用) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  background-color: var(--bg-card);
  color: var(--text-body);
  flex-shrink: 0;
}
.nav-link__icon-shape--lg {                      /* 36×36 (Big Icons / Top icon & cta) */
  width: var(--space-9);
  height: var(--space-9);
}
.nav-link__title {                               /* rich variant の title (16/18 700) */
  font-size: 16px;
  line-height: 18px;
  font-weight: 700;
  color: var(--text-black);
  margin: 0 !important;
}
.nav-link__desc {                                /* rich variant の description (14/20 400) */
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--text-body);
  margin: 0 !important;
  white-space: normal;
}
.nav-link__group {                               /* title + desc column */
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}
.nav-link__sub {                                 /* Double text の secondary text (16/24 500 gray-600) */
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--text-label);
}

/* === Modifier: --bordered (Type=Bordered / 2 icons) ===
   1px border + radius 4 + pad 6/8 + min-width 224 + space-between (icon group | chevron) */
.nav-link--bordered {
  padding: var(--space-1-5) var(--space-2);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  background-color: var(--bg-card);
  justify-content: space-between;
  min-width: var(--space-56);
  color: var(--text-black);                                /* bordered では text 黒 (Figma 確定) */
}
.nav-link--bordered:hover:not(:disabled):not(.nav-link--disabled),
.nav-link--bordered.nav-link--active {
  background-color: var(--bg-page);
  color: var(--text-black);                                /* bg のみ変化、text は黒のまま */
}
.nav-link--bordered:disabled,
.nav-link--bordered.nav-link--disabled {
  background-color: var(--bg-page);
  color: var(--text-muted);
}

/* === Modifier: --stacked (Type=Icon top) ===
   VERTICAL flex で icon (上) + text (下) を縦に並べる */
.nav-link--stacked {
  flex-direction: column;
  gap: var(--space-1-5);
  text-align: center;
}

/* === Modifier: --rich (Type=Heading & helper / With icon shape / Big Icons / Top icon & cta) ===
   pad 8 (Top icon & cta は 12)、HORIZONTAL gap 6 (Big Icons は 10) で icon + text-block を配置。
   Top icon & cta variant は --stacked と組合せで VERTICAL に */
.nav-link--rich {
  padding: var(--space-2);
  gap: var(--space-1-5);
  align-items: flex-start;
  text-align: left;
  min-width: var(--space-72);
  box-sizing: border-box;
  border-radius: var(--radius-xs);                            /* user spec: 4px (旧 6) */
  border: 0;                                     /* Figma 確定: rich variants は border なし */
  white-space: normal;
}
.nav-link--rich:hover:not(:disabled):not(.nav-link--disabled) {
  background-color: var(--bg-page);
}
/* Active state: bg gray-50 + title/desc/icon を brand に (Figma 確定) */
.nav-link--rich.nav-link--active {
  background-color: var(--bg-page);
}
.nav-link--rich.nav-link--active .nav-link__title,
.nav-link--rich.nav-link--active .nav-link__desc {
  color: var(--text-fg-brand);
}
/* Disabled state: bg gray-50 + 全 text/icon を gray-400 に (Figma 確定) */
.nav-link--rich.nav-link--disabled {
  background-color: var(--bg-page);
  cursor: not-allowed;
  pointer-events: none;
}
.nav-link--rich.nav-link--disabled .nav-link__title,
.nav-link--rich.nav-link--disabled .nav-link__desc {
  color: var(--text-muted);
}
.nav-link--rich.nav-link--disabled .nav-link__icon-shape {
  color: var(--text-muted);
}
.nav-link--rich.nav-link--stacked {              /* Top icon & cta */
  padding: var(--space-3);
  gap: var(--space-2-5);
  align-items: center;
}
.nav-link--rich .nav-link__icon-shape--lg {
  margin-right: var(--space-1);                             /* Big Icons は gap 10 だが 8/6 = wider feel */
}

/* === Megamenu (Figma 863:176589 Full width / 3520:20513 Icon shape) ===
   navbar dropdown panel で複数 columns + .nav-link--rich を grid で並べる。
   variants:
     - .megamenu             base (full-width navbar dropdown、bg white + shadow)
     - .megamenu--bordered   card-style (border + radius 4 + pad 24) — Type=Icon shape
   sub-elements:
     - .megamenu__inner      content max-width 1280 中央寄せ
     - .megamenu__cols       columns wrapper (HORIZONTAL gap 32 + pad 48)
     - .megamenu__col        single column (VERTICAL gap 12) — 各 col に複数 .nav-link--rich を配置 */
.megamenu {
  background-color: var(--bg-card);
  font-family: var(--font-family);
  width: 100%;
  box-shadow: 0 8px 24px rgba(29, 41, 61, 0.06);
  box-sizing: border-box;
}
.megamenu__inner {
  display: flex;
  max-width: 1280px;
  margin: 0 auto;
}
.megamenu__cols {
  display: flex;
  flex: 1;
  gap: var(--space-5);                                     /* user spec: column 間 20 */
  padding: var(--space-12);
  min-width: 0;
}
.megamenu__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
/* megamenu 内の nav-link--rich は column 幅に合わせて shrink (default 288 min-width を解除) */
.megamenu__col .nav-link--rich {
  min-width: 0;
}

/* Bordered variant (Type=Icon shape — pad 24、no shadow、border) */
.megamenu--bordered {
  border: var(--border-width) solid var(--border-light);
  border-radius: var(--radius-xs);
  box-shadow: 0 4px 16px rgba(29, 41, 61, 0.04);
}
.megamenu--bordered .megamenu__cols {
  padding: var(--space-6);
  gap: var(--space-5);                                     /* user spec: 20 統一 */
}

/* === Gallery (Figma 2109:198072 — 6 type) ===
   image grid container。base = .gallery、variants で grid layout を切替。
   variants:
     - .gallery--grid-3       3-col grid (Type=Grid 3 columns)
     - .gallery--grid-2       2-col grid (Type=Grid 2 columns)
     - .gallery--masonry      column flex (Type=Masonry、各 item の height 異なる)
     - .gallery--featured     featured image (1 large 上 + 3 small 下) (Type=Featured image)
     - .gallery--carousel     single image + arrow controls (Type=Carousel)
     - .gallery--with-filters filter chips + grid (Type=With filters)
   sub-elements:
     - .gallery__item         単一 image (gray-100 placeholder + radius 4)
     - .gallery__item--lg     featured image (大型)
     - .gallery__row          horizontal row of items (Featured image の small row 等)
     - .gallery__filters      filter chip group (--with-filters 用)
     - .gallery__controls     carousel arrow controls (--carousel 用) */
.gallery {
  display: grid;
  gap: var(--space-3);                                     /* user spec: 12 */
  font-family: var(--font-family);
}
.gallery__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 13 / 12;                         /* Figma: 416×384 ≈ 13:12 */
  background-color: var(--bg-tertiary);                     /* gray-100 placeholder */
  border-radius: var(--radius-xs);
  color: var(--text-label);                                /* icon color */
  overflow: hidden;
}
.gallery__item > img,
.gallery__item > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === Variant: Grid 3 columns === */
.gallery--grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* === Variant: Grid 2 columns === */
.gallery--grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.gallery--grid-2 .gallery__item {
  aspect-ratio: 79 / 48;                         /* Figma: 632×384 ≈ 79:48 */
}

/* === Variant: Masonry (column flex でブロックを下から積む) === */
.gallery--masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  align-items: start;
}
.gallery--masonry .gallery__item {
  aspect-ratio: auto;
  height: var(--space-96);
}
.gallery--masonry .gallery__item--tall {
  height: 784px;
  grid-row: span 2;
}

/* === Variant: Featured image (1 large + 3 small row) === */
.gallery--featured {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.gallery--featured .gallery__item--lg {
  width: 100%;
  height: 404px;
  aspect-ratio: auto;
}
.gallery__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.gallery__row .gallery__item {
  aspect-ratio: auto;
  height: var(--space-60);
}

/* === Variant: Carousel === */
.gallery--carousel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}
.gallery--carousel .gallery__item {
  width: 100%;
  height: 404px;
  aspect-ratio: auto;
}
.gallery__controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.gallery__control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-11);
  height: var(--space-11);
  background: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  color: var(--text-body);
  cursor: pointer;
  padding: 0;
}
.gallery__control-btn:hover { background-color: var(--bg-secondary); color: var(--text-heading); }
.gallery__control-btn:disabled { color: var(--text-fg-disabled); cursor: not-allowed; }

/* === Variant: With filters === */
.gallery--with-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.gallery__filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.gallery__filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-3);
  background: transparent;
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-full);
  color: var(--text-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-family);
}
.gallery__filter:hover { background-color: var(--bg-secondary); color: var(--text-heading); }
.gallery__filter.gallery__filter--active {
  background-color: var(--bg-brand-softer);
  border-color: var(--border-brand-subtle);
  color: var(--text-fg-brand);
}
.gallery--with-filters .gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* === Carousel (Figma 3284:23933 — 4 type) ===
   image / cards の slide carousel。controls (arrow buttons) と indicators (dots) を組合せる。
   variants:
     - .carousel               base (Type=Default、image overlay の上に控えめ controls)
     - .carousel--with-indicators  controls + dots indicators (Type=Default with controls & indicators)
     - .carousel--cards        cards 横並び + 外側 arrow controls (Type=With cards)
     - .carousel--cards-bottom cards 横並び + 下に navigation (Type=Cards & bottom controls)
   sub-elements:
     - .carousel__viewport     image / cards 表示エリア
     - .carousel__controls     overlay arrow controls (HORIZONTAL space-between)
     - .carousel__control      single arrow button (44×44 round)
     - .carousel__control--overlay  半透明 white (image 上に乗せる時)
     - .carousel__control--solid    dark bg (アクティブ side button)
     - .carousel__indicators   dot row (HORIZONTAL gap 16)
     - .carousel__indicator    14×14 round (active = full opacity)
     - .carousel__cards        cards group (HORIZONTAL gap)
     - .carousel__nav          bottom navigation (controls + indicators 横並び) */
.carousel {
  position: relative;
  font-family: var(--font-family);
  width: 100%;
}

/* Image-overlay variant (Type=Default) */
.carousel__viewport {
  position: relative;
  width: 100%;
  height: 400px;
  background-color: var(--bg-gray);                     /* gray-300 placeholder */
  border-radius: var(--radius-xs);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel__viewport > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Overlay controls — image の上に左右配置 */
.carousel__controls {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-8);
  pointer-events: none;
}
.carousel__controls > * { pointer-events: auto; }

/* Carousel control button */
.carousel__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-11);
  height: var(--space-11);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--bg-card);
  color: var(--text-body);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}
.carousel__control:hover:not(:disabled) { background-color: var(--bg-tertiary); }
.carousel__control:disabled { color: var(--text-fg-disabled); cursor: not-allowed; }
/* Overlay variant — image 上に乗せる場合の半透明 white (Figma: opacity 0.3) */
.carousel__control--overlay {
  background-color: rgba(255, 255, 255, 0.3);
  color: var(--text-white);
}
.carousel__control--overlay:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.5);
}
/* Solid variant — Type=With cards の右 (active) 側 */
.carousel__control--solid {
  background-color: var(--bg-sidebar);
  color: var(--text-white);
}
.carousel__control--solid:hover:not(:disabled) { background-color: var(--bg-dark); }
.carousel__control--gray {                        /* Type=With cards の disabled 側 */
  background-color: var(--bg-gray);
  color: var(--text-white);
}

/* Indicators (dot row) */
.carousel__indicators {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.carousel__indicator {
  width: var(--space-3-5);
  height: var(--space-3-5);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.carousel__indicator:hover { background-color: rgba(255, 255, 255, 0.6); }
.carousel__indicator.carousel__indicator--active {
  background-color: var(--bg-card);
}
/* dark variant — gray bg の indicator (white bg context 用) */
.carousel__indicator--dark {
  background-color: var(--bg-gray);
}
.carousel__indicator--dark:hover { background-color: var(--text-body-subtle); }
.carousel__indicator--dark.carousel__indicator--active {
  background-color: var(--bg-sidebar);
}

/* Indicators positioning — overlay variant (image 下端中央) */
.carousel--with-indicators .carousel__indicators {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
}

/* === Variant: With cards (HORIZONTAL: 左 control + cards + 右 control) === */
.carousel--cards {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.carousel__cards {
  display: flex;
  gap: var(--space-6);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.carousel__cards > * {
  flex-shrink: 0;
  flex: 1;
  min-width: 0;
}

/* === Slide track (translateX based smooth slide) — cards carousel 用 ===
   __track  : 表示 viewport (overflow: hidden + container query 基準)
   __strip  : 全 cards を横並び (transform: translateX で slide、widthはintentionallyに広い)
   __cell   : 単一 card (track 基準で width 計算、container query でサイズ確定)
   --slide-offset: page あたりの translateX (inline で計算) */
.carousel__track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;                    /* container query 基準 */
}
.carousel__strip {
  display: flex;
  gap: var(--space-6);
  transform: translateX(var(--slide-offset, 0));
  transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}
.carousel__cell {
  flex-shrink: 0;
  /* track 幅基準で (track - 2*gap) / 3 = 1 cell width */
  width: calc((100cqw - var(--space-12)) / 3);
  box-sizing: border-box;
}
/* Cards & bottom controls は gap 16 */
.carousel--cards-bottom .carousel__strip { gap: var(--space-4); }
.carousel--cards-bottom .carousel__cell {
  width: calc((100cqw - var(--space-8)) / 3);              /* gap 16 × 2 = 32 */
}

/* === Variant: Cards & bottom controls === */
.carousel--cards-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: center;
}
.carousel--cards-bottom .carousel__cards {
  width: 100%;
  gap: var(--space-4);
}
.carousel__nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* === Speed Dial (Figma 16143:18799 link + 16149:19842 menus + 14231:74726 examples) ===
   floating action button (FAB) + 展開する menu。typical な右下 fixed UI。
   構成:
     - .speed-dial            外側 wrapper (FAB + menu を position container として包む)
     - .speed-dial__fab       main FAB button (48×48 brand bg、open/close toggle)
     - .speed-dial__menu      menu container (absolute、open 時に表示)
     - .speed-dial__item      個別 nav link (48×48 white bg + gray border、Type=Default)
   item modifiers:
     - .speed-dial__item--text-icon  Type=Text & icon (56×56 vertical、icon + text 12/12)
     - .speed-dial__item--rounded    radius 9999 (Rounded variant)
   menu position modifiers:
     - .speed-dial--top       menu が FAB の上に展開 (default 想定)
     - .speed-dial--bottom    menu が FAB の下
     - .speed-dial--left      menu が FAB の左 (横並び)
     - .speed-dial--right     menu が FAB の右
   states:
     - default: bg white、icon gray-700
     - hover:   bg gray-100、icon/text gray-900
     - disabled: gray-400 icon */
.speed-dial {
  position: relative;
  display: inline-flex;
  font-family: var(--font-family);
}
.speed-dial__fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  padding: 0;
  background-color: var(--bg-brand);              /* #0040d5 (btn--primary と同 default) */
  color: var(--text-white);
  border: 0;
  border-radius: var(--radius-xs);
  box-shadow: 0 4px 16px rgba(29, 41, 61, 0.12);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.2s ease, box-shadow 0.15s ease;
  z-index: 1;
}
.speed-dial__fab:hover:not(:disabled),
.speed-dial__fab:active:not(:disabled) {
  background-color: var(--bg-brand-strong);       /* #1a3fa3 (btn--primary hover/active と同) */
}
.speed-dial__fab:focus-visible:not(:disabled) {
  outline: none;
  background-color: var(--bg-brand-strong);
  box-shadow: 0 4px 16px rgba(29, 41, 61, 0.12), 0 0 0 2px var(--border-brand-subtle);
}
.speed-dial__fab:disabled {
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: not-allowed;
}
.speed-dial--rounded .speed-dial__fab { border-radius: var(--radius-full); }
/* open 時 FAB icon を 45deg 回転 (plus → close 風) */
.speed-dial--open .speed-dial__fab > * { transform: rotate(45deg); transition: transform 0.2s ease; }

.speed-dial__menu {
  display: inline-flex;
  gap: var(--space-2);
}
/* Position: top (default) — FAB の上に column 展開 */
.speed-dial--top {
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--space-3);
}
.speed-dial--top .speed-dial__menu {
  flex-direction: column-reverse;
  align-items: flex-end;
}
/* Position: bottom */
.speed-dial--bottom {
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}
.speed-dial--bottom .speed-dial__menu {
  flex-direction: column;
  align-items: flex-end;
}
/* Position: right (横並び、FAB が左) */
.speed-dial--right {
  flex-direction: row;
  align-items: flex-end;
  gap: var(--space-3);
}
.speed-dial--right .speed-dial__menu {
  flex-direction: row;
  align-items: flex-end;
}
/* Position: left (横並び、FAB が右) */
.speed-dial--left {
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: var(--space-3);
}
.speed-dial--left .speed-dial__menu {
  flex-direction: row-reverse;
  align-items: flex-end;
}

/* Item — single nav link (Default Type) */
.speed-dial__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  padding: 0;
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  color: var(--text-body);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
  font-family: var(--font-family);
}
.speed-dial__item:hover:not(:disabled) {
  background-color: var(--bg-tertiary);
  color: var(--text-black);
}
.speed-dial__item:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}
.speed-dial--rounded .speed-dial__item { border-radius: var(--radius-full); }

/* Text & icon variant — 56×56、column flex (icon + text 下) */
.speed-dial__item--text-icon {
  flex-direction: column;
  width: var(--space-14);
  height: var(--space-14);
  gap: var(--space-1);
  font-size: 12px;
  line-height: 12px;
  font-weight: 500;
}

/* Outside text variant — text label が item の隣に表示 (HORIZONTAL gap 10) */
.speed-dial__item-with-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
}
.speed-dial__item-with-label > .speed-dial__label {
  font-size: 12px;
  line-height: 12px;
  font-weight: 500;
  color: var(--text-body);
}

/* Menu open / close (animated reveal) */
.speed-dial__menu {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
  transform-origin: bottom right;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.speed-dial--open .speed-dial__menu {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.speed-dial--bottom .speed-dial__menu { transform-origin: top right; }
.speed-dial--right .speed-dial__menu { transform-origin: bottom left; }
.speed-dial--left .speed-dial__menu { transform-origin: bottom right; }

/* Dropdown menu variant (Type=Dropdown menu from sd2) — list style */
/* selector を 2 class chain にして specificity を 0,2,0 に上げ、親の align-items: flex-end を確実に override */
.speed-dial__menu.speed-dial__dropdown {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1-5);
  padding: var(--space-2);
  background: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  box-shadow: 0 8px 24px rgba(29, 41, 61, 0.08);
  min-width: var(--space-48);
}
.speed-dial__dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xxs);
  color: var(--text-body);
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family);
}
.speed-dial__dropdown-item:hover:not(:disabled) {
  background-color: var(--bg-tertiary);
  color: var(--text-black);
}
.speed-dial__dropdown-item:disabled { color: var(--text-fg-disabled); cursor: not-allowed; }

/* === Sidenav (Figma 19929:25631 Primary Sidebar + 19929:26581 header + 19929:26606 footer + 19929:26498 list item) ===
   App shell の primary navigation。dark mode は `data-theme="dark"` を `.sidenav-wrap` または `.sidenav` 要素に付与して scope (CSS var cascade で subtree のみ dark)。
   container = .sidenav (column flex、288w expanded / 64w collapsed)、
   構造 = .sidenav__header + .sidenav__main (scroll content) + .sidenav__footer。
   list = .sidenav-list (column flex gap 8)、items = .sidenav-item (HORIZONTAL gap 6、pad 6/8、radius 4)。
   states: default = text-body、hover/active = bg-tertiary + text-fg-brand (light) / bg-tertiary + text-white (dark)、disabled = text-fg-disabled。
   App shell pattern: `.sidenav-wrap` で `.sidenav--collapsed` を base に、expanded を on-hover slide-in で重ねる。
   height = 100dvh canonical (`100vh` fallback)。header/footer は固定、`.sidenav__main` のみ scroll。 */
/* === Sidenav wrap — collapsed default + hover で expanded slide in === */
.sidenav-wrap {
  position: relative;
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  height: 100vh;
  height: 100dvh;
  overflow: visible;
  z-index: var(--z-drawer);
}
.sidenav-wrap > .sidenav--collapsed {
  position: relative;
  z-index: 1;
}
/* expanded (288w) は absolute で wrap 上に重ね、少し左に offset + opacity 0 で hidden、on-hover で 0 に slide
   visibility は transition delay で「slide-out 完了後に hidden」「slide-in は即 visible」を実現 →
   hidden 状態では invisible + pointer-events none なのでページ左 nav 等を覆わない */
.sidenav-wrap > .sidenav:not(.sidenav--collapsed) {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  transform: translateX(calc(var(--space-2) * -1));
  opacity: 0;
  visibility: hidden;
  transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out), visibility 0s linear var(--duration-slow);
  z-index: 2;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
}
.sidenav-wrap:hover > .sidenav:not(.sidenav--collapsed),
.sidenav-wrap:focus-within > .sidenav:not(.sidenav--collapsed) {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out), visibility 0s linear 0s;
  pointer-events: auto;
}

.sidenav {
  display: flex;
  flex-direction: column;
  width: 288px;
  padding: var(--space-5);
  gap: var(--space-4);
  background-color: var(--bg-primary);
  border-right: var(--border-width) solid var(--border-base);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  box-sizing: border-box;
}
.sidenav-wrap > .sidenav { height: 100%; }
.sidenav--collapsed { width: 64px; padding: var(--space-5) 0; align-items: center; }

.sidenav__main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow-y: auto;
  width: 100%;
}
.sidenav__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sidenav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidenav-list--bordered {
  border-top: var(--border-width) solid var(--border-base);
  padding-top: var(--space-4);
}
.sidenav-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* === Sidenav header (5 type variants) === */
.sidenav-header {
  display: flex;
  align-items: center;
  padding: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-base);
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
}

.sidenav-header--heading { gap: var(--space-1-5); align-items: center; }
.sidenav-header__title {
  font-size: var(--text-lg);
  line-height: 24px;
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  margin: 0;
}
/* heading variant: title の line-height を font-size と一致させ (1 ratio) text の visual center
   (cap-height/2) が icon center と揃うようにする。Figma 18/24 spec から line-height のみ変更。 */
.sidenav-header--heading .sidenav-header__title {
  line-height: 1;
}
.sidenav-header__icon { color: var(--text-heading); flex-shrink: 0; display: block; }

.sidenav-header--logo { padding: var(--space-4) var(--space-2); }
.sidenav--collapsed .sidenav-header--logo { justify-content: center; padding-inline: 0; }
.sidenav-header__logo { height: 20px; }
/* dark theme scope で logo を white に invert (PortX logo は黒 SVG) */
[data-theme="dark"] .sidenav-header__logo { filter: brightness(0) invert(1); }

.sidenav-header--user {
  padding: var(--space-2);
  gap: var(--space-2);
  border: 0;
}
.sidenav-header__user-block {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.sidenav-header__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-brand);
  color: var(--text-white);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.sidenav-header__name-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.sidenav-header__name {
  font-size: var(--text-base);
  line-height: 16px;
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidenav-header__supporting {
  font-size: var(--text-sm);
  line-height: 14px;
  color: var(--text-body);
}
.sidenav-header__chevron { color: var(--text-body); flex-shrink: 0; }

.sidenav-header--text-icons {
  border: 0;
  padding: 0;
  gap: var(--space-4);
}
.sidenav-header__icons {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  color: var(--text-body);
}

.sidenav-header--advanced {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  border: 0;
  padding: 0;
}
.sidenav-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.sidenav-header__row-buttons {
  display: flex;
  gap: var(--space-2);
}

/* === Sidenav navigation list item === */
.sidenav-item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-xs);
  background: transparent;
  border: 0;
  color: var(--text-body);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 24px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  width: 100%;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
}
.sidenav-item__left {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  flex: 1;
  min-width: 0;
}
.sidenav-item__icon { flex-shrink: 0; color: inherit; }
.sidenav-item__text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidenav-item__chevron { flex-shrink: 0; color: inherit; }
.sidenav-item__badge { flex-shrink: 0; }
.sidenav-item__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-left: auto;
}

.sidenav-item:hover:not(:disabled):not(.sidenav-item--disabled),
.sidenav-item.sidenav-item--active {
  background-color: var(--bg-tertiary);
  color: var(--text-fg-brand);
}
.sidenav-item--submenu-open {
  background-color: var(--bg-tertiary);
  color: var(--text-fg-brand);
}
/* dark theme: hover/active で text を heading 色 (white) に切替 (brand 色は dark mode でも視認性 OK だが Figma 仕様通り white) */
[data-theme="dark"] .sidenav-item:hover:not(:disabled):not(.sidenav-item--disabled),
[data-theme="dark"] .sidenav-item.sidenav-item--active {
  color: var(--text-heading);
}
[data-theme="dark"] .sidenav-item--submenu-open {
  color: var(--text-fg-brand);
}
.sidenav-item:disabled,
.sidenav-item.sidenav-item--disabled {
  color: var(--text-fg-disabled);
  pointer-events: none;
  cursor: not-allowed;
}

/* Collapsed type — icon-only square button (36x36) */
.sidenav-item--icon-only {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
}
/* collapsed 時: li は sidenav 幅 (64px) まで stretch するが icon button (36px) は left-aligned になるため auto margin で中央寄せ */
.sidenav--collapsed .sidenav-item--icon-only {
  margin-inline: auto;
}

/* Children list (expanded sidenav submenu) */
.sidenav-item__children,
.sidenav-submenu {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0;
  margin: 0 0 var(--space-1);
  list-style: none;
  width: 100%;
  box-sizing: border-box;
}
.sidenav-submenu > li {
  width: 100%;
}
.sidenav-subitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--space-9);
  padding: var(--space-1-5) var(--space-2) var(--space-1-5) calc(var(--space-8) + var(--space-2));
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-body);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 24px;
  font-weight: var(--weight-medium);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.sidenav-subitem__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidenav-subitem__badge {
  flex-shrink: 0;
  margin-left: auto;
}
.sidenav-subitem:hover:not(:disabled):not(.sidenav-subitem--disabled),
.sidenav-subitem--active {
  color: var(--text-fg-brand);
  background-color: var(--bg-tertiary);
}
[data-theme="dark"] .sidenav-subitem:hover:not(:disabled):not(.sidenav-subitem--disabled),
[data-theme="dark"] .sidenav-subitem--active {
  background-color: var(--bg-tertiary);
  color: var(--text-heading);
}
.sidenav-subitem:disabled,
.sidenav-subitem--disabled {
  color: var(--text-fg-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* === Sidenav footer (6 type variants) === */
.sidenav-footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
}

.sidenav-footer--progress { gap: var(--space-4); }
.sidenav-footer__progress-text {
  display: flex;
  flex-direction: column;
}
.sidenav-footer__progress-label {
  font-size: var(--text-sm);
  line-height: 20px;
  font-weight: var(--weight-normal);
  color: var(--text-body);
}
.sidenav-footer__progress-value {
  font-size: var(--text-base);
  line-height: 24px;
  font-weight: var(--weight-bold);
  color: var(--text-heading);
}

.sidenav-footer--user {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.sidenav-footer--user:hover { background-color: var(--bg-tertiary); }
/* user select footer: chevron を最右に押し出す (name-block は伸ばさず content size のまま、間の余白で右寄せ) */
.sidenav-footer--user > .sidenav-header__chevron { margin-left: auto; }

/* Account menu — sidenav user footer popover.
   Visual definition lives in common.css; auth / open-close behavior stays in Core. */
.account-menu-wrap {
  position: relative;
  display: inline-flex;
}
.account-menu-wrap--expanded {
  display: flex;
  width: 100%;
}
.account-menu-trigger {
  border: 0;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.account-menu-trigger--row {
  display: flex;
  width: 100%;
  background: transparent;
  color: inherit;
  text-align: left;
}
.account-menu-trigger:hover {
  opacity: 0.85;
}
.account-menu-trigger--row:hover {
  background-color: var(--bg-tertiary);
}
.account-menu-trigger.open {
  outline: var(--border-width-md) solid var(--border-brand);
  outline-offset: var(--space-0-5);
}
.sidenav-wrap > .sidenav:has(.account-menu-trigger.open) {
  overflow: visible;
  z-index: calc(var(--z-popover) + 1);
}
.account-menu-popover {
  position: absolute;
  bottom: 0;
  left: calc(100% + var(--space-2));
  z-index: var(--z-popover);
  overflow: hidden;
  border: var(--border-width) solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
}
.account-menu {
  display: flex;
  min-width: 15rem;
  flex-direction: column;
  font-size: var(--text-sm);
}
.account-menu__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--border-light);
}
.account-menu__name,
.account-menu__email,
.account-menu__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}
.account-menu__name {
  color: var(--text-heading);
  font-weight: var(--weight-semibold);
}
.account-menu__email {
  color: var(--text-label);
  font-size: var(--text-xs);
}
.account-menu__name span,
.account-menu__email span {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu__action {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  font: inherit;
  padding: var(--space-2) var(--space-3);
  text-align: left;
}
.account-menu__action:hover {
  background: var(--bg-tertiary);
  color: var(--text-heading);
}

.sidenav-footer--buttons {
  flex-direction: row;
  gap: var(--space-2);
}

.sidenav-footer--list {
  padding: var(--space-5);
  border-top: var(--border-width) solid var(--border-base);
  gap: var(--space-4);
}
.sidenav-footer--list-horizontal { flex-direction: row; }

.sidenav-footer__list-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  line-height: 24px;
  font-weight: var(--weight-medium);
  color: var(--text-body);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.sidenav-footer__list-item:hover { color: var(--text-fg-brand); }
[data-theme="dark"] .sidenav-footer__list-item:hover { color: var(--text-heading); }

.sidenav-footer--alert { padding: 0; }

/* === Bottom Navigation (Figma 2109:203370 buttons + 15610:223203 patterns) ===
   mobile 用 fixed bottom bar。container = .bottom-nav (white bg、HORIZONTAL flex)、items = .bottom-nav__item (column flex、icon + label)。
   variants:
     - .bottom-nav             Default (380w 等の white bar、no border、4-5 nav items)
     - .bottom-nav--bordered   各 item 間に right border、最後の item は border なし
     - .bottom-nav--rounded    全体を pill 形 (radius 9999) — Action button variant の base
     - .bottom-nav--between    pA=SPACE_BETWEEN (Pagination / Action button 用)
   sub-elements:
     - .bottom-nav__item       単一 nav button (column flex、icon 24×24 + label 14/20 500)
     - .bottom-nav__center     center action area (CTA button をはめる用、pad で sized)
   states (item):
     - default: icon/text gray-700 (#4a5565)
     - hover/active: icon/text brand (#0040d5)
     - .bottom-nav__item--active 同上 (selected 状態) */
.bottom-nav {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--bg-card);
  font-family: var(--font-family);
  box-sizing: border-box;
}
.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--space-1);
  padding: var(--space-2);
  min-height: var(--space-16);
  background: transparent;
  border: 0;
  color: var(--text-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-family);
  transition: color 0.15s ease;
}
.bottom-nav__item:hover:not(:disabled),
.bottom-nav__item.bottom-nav__item--active {
  color: var(--text-fg-brand);
}
.bottom-nav__item:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Variant: Bordered (各 item 間に右 border、最後は省略) */
.bottom-nav--bordered .bottom-nav__item:not(:last-child) {
  border-right: var(--border-width) solid var(--border-base);
}

/* Variant: SPACE_BETWEEN — pagination / action button 系 */
.bottom-nav--between {
  justify-content: space-between;
}
.bottom-nav--between .bottom-nav__item { flex: 0 0 auto; min-width: 58px; }

/* center area (CTA button 用 wrapper) */
.bottom-nav__center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 var(--space-4);
}

/* Variant: Rounded (Action button base — pill 形) */
.bottom-nav--rounded {
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.bottom-nav--rounded .bottom-nav__item:not(:last-child) {
  border-right: var(--border-width) solid var(--border-base);
}

/* Variant: Segment controls (上に segment、下に nav row) */
.bottom-nav--segment {
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-4) var(--space-2);
  gap: var(--space-4);
}
.bottom-nav__segment {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-0-5);
  padding: var(--space-1-5);
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-xs);
  align-self: center;
}
.bottom-nav__segment-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xxs);
  color: var(--text-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-family);
  min-width: 54px;
  height: var(--space-6);
}
.bottom-nav__segment-btn:hover:not(:disabled) { color: var(--text-heading); }
.bottom-nav__segment-btn.bottom-nav__segment-btn--active {
  background-color: var(--bg-card);
  color: var(--text-black);
  box-shadow: 0 1px 2px rgba(29, 41, 61, 0.05);
}
.bottom-nav__segment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom-nav--segment .bottom-nav__item { min-height: 40px; flex: 1; }

/* ============================================================
   3.22 Skeleton / Spinner (新規 — Loading state)
   skeleton は Layer 3 §「Skeleton (Figma 13251:80914)」で実装済 (sub-elements + 6 variants)。
   predictable layout の初期ロードに限定し、action processing / Empty / Error の代替にはしない。
   廃止済みの旧 modifier は使わず、Layer 3 の sub-elements へ移行する。
   ============================================================ */

/* Spinner — Figma 3284:24078 (Type=Default × 5 sizes × 2 track variants)。
   `.spinner`               default = medium (50×50、Track=True)
   `.spinner--xs/sm/md/lg/xl` — 12 / 24 / 50 / 75 / 100 (Figma xs/small/medium/base/large)
   `.spinner--no-track`     Track=False (track 透過、loader 上端のみ着色) */
.spinner {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: var(--border-width-lg) solid var(--border-base);                   /* gray-200 — Track */
  border-top-color: var(--border-brand);                   /* brand-medium — loader arc */
  border-radius: var(--radius-full);
  animation: ds-spin 1s linear infinite;
}
.spinner--xs { width: 12px; height: 12px; border-width: 2px; }      /* Figma xs */
.spinner--sm { width: 24px; height: 24px; border-width: 2px; }      /* Figma small */
.spinner--md { width: 50px; height: 50px; border-width: 4px; }      /* Figma medium = default */
.spinner--lg { width: 75px; height: 75px; border-width: 6px; }      /* Figma base */
.spinner--xl { width: 100px; height: 100px; border-width: 8px; }    /* Figma large */
.spinner--no-track {                          /* Track=False — track ring 透過、loader arc のみ */
  border-color: transparent;
  border-top-color: var(--border-brand);
}
@keyframes ds-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* === KBD (Figma 13693:82465 — keyboard key display) ===
   Single style (Dark mode=False default、`--dark` modifier で反転)。
   全 keys 共通 spec: h=28、padding 6/8、bg gray-100、border 1px gray-200、radius 4、
   text 12/16 700 gray-900。<kbd> tag そのものに class 付与で使用。 */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-7);
  height: var(--space-7);
  padding: var(--space-1-5) var(--space-2);
  background-color: var(--bg-tertiary);                   /* gray-100 */
  border: var(--border-width) solid var(--border-base);                   /* gray-200 */
  border-radius: var(--radius-xs);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: var(--text-black);                              /* gray-900 */
  box-sizing: border-box;
  white-space: nowrap;
  vertical-align: middle;
}
/* Dark mode — gray-800 bg + white text + gray-700 border (inverted) */
.kbd--dark {
  background-color: var(--bg-dark);                   /* gray-800 */
  border-color: var(--border-dark-subtle);                       /* semantic dark subtle */
  color: var(--text-white);
}

/* === Avatar (Figma 15682:515 + 15695:5839 + 15701:21095) ===
   Avatar (15682:515): 6 sizes (xs/sm/base/lg/xl/2xl) × 4 type variants:
     Default (image)、With status (green dot)、Placeholder (gray bg + "PH" 等 initials)、With remove button
   Avatar group (15695:5839): 3 sizes (sm/base/lg) × Default + With counter
   Avatar group label (15701:21095): Text (avatar + name) / Heading & helper (avatar + name + email) */

/* Base — 32px circular avatar (Size=base default) */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  background-color: var(--bg-tertiary);                   /* placeholder bg fallback */
  color: var(--text-body);                              /* placeholder text fallback */
  border-radius: var(--radius-full);
  overflow: hidden;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  vertical-align: middle;
  box-sizing: border-box;
}
.avatar > img,
.avatar > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Sizes (Figma 確定値) */
.avatar--xs   { width: 18px; height: 18px; font-size: 8px;  }   /* Figma xs */
.avatar--sm   { width: 24px; height: 24px; font-size: 10px; }   /* Figma sm */
.avatar--base { width: 32px; height: 32px; font-size: 14px; }   /* Figma base = default */
.avatar--lg   { width: 44px; height: 44px; font-size: 18px; }   /* Figma lg */
.avatar--xl   { width: 56px; height: 56px; font-size: 22px; }   /* Figma xl */
.avatar--2xl  { width: 64px; height: 64px; font-size: 24px; }   /* Figma 2xl */

/* === Avatar with overlays (status / remove) === */
.avatar-wrap {                                 /* relative anchor for status / remove badge */
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
/* Status dot (green) — bottom-right、size は parent avatar に合わせて切替 */
.avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: var(--space-2);
  height: var(--space-2);
  background-color: var(--bg-success);                   /* success-medium */
  border-radius: var(--radius-full);
  border: var(--border-width-md) solid var(--border-buffer);
  box-sizing: content-box;
}
.avatar-wrap:has(.avatar--xs) .avatar-status,
.avatar-wrap:has(.avatar--sm) .avatar-status   { width: 6px; height: 6px; border-width: 1px; }
.avatar-wrap:has(.avatar--base) .avatar-status { width: 8px; height: 8px; border-width: 2px; }
.avatar-wrap:has(.avatar--lg) .avatar-status   { width: 12px; height: 12px; border-width: 2px; }
.avatar-wrap:has(.avatar--xl) .avatar-status,
.avatar-wrap:has(.avatar--2xl) .avatar-status  { width: 16px; height: 16px; border-width: 2px; }

/* Remove button — close icon at top-right (gray-100 bg + close X) */
.avatar-remove {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  padding: 0;
  background-color: var(--bg-tertiary);
  color: var(--text-body);
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.avatar-remove:hover { background-color: var(--bg-quaternary); color: var(--text-heading); }
/* size adjustment: smaller avatars → smaller remove btn */
.avatar-wrap:has(.avatar--sm) .avatar-remove,
.avatar-wrap:has(.avatar--xs) .avatar-remove { width: 14px; height: 14px; }
.avatar-wrap:has(.avatar--base) .avatar-remove { width: 16px; height: 16px; }

/* === Avatar with label (Text / Heading & helper) === */
.avatar-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);                                    /* base default (Figma Hgap8) */
}
.avatar-label--sm  { gap: var(--space-1-5); }               /* Figma sm Hgap6 */
.avatar-label--lg  { gap: var(--space-2-5); }              /* Figma lg Hgap10 */
.avatar-label--xl  { gap: var(--space-2-5); }              /* Figma xl Hgap10 */
.avatar-label__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);                                    /* Figma Vgap6 (sm では 2) */
}
.avatar-label--sm .avatar-label__body { gap: var(--space-0-5); }    /* Figma sm Vgap2 */
.avatar-label__name {                          /* Title — 16/16 500 gray-900 (sm/text variants は 12/16) */
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-black);
}
.avatar-label__helper {                        /* Supporting text — 14/16 400 gray-600 */
  margin: 0;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: var(--text-body);
}
/* size variants — heading/helper の font-size を size に応じて切替 */
.avatar-label--sm .avatar-label__name   { font-size: 12px; line-height: 16px; }
.avatar-label--sm .avatar-label__helper { font-size: 12px; line-height: 12px; }
.avatar-label--lg .avatar-label__helper { font-size: 16px; line-height: 16px; }
.avatar-label--xl .avatar-label__name   { font-size: 20px; line-height: 20px; }
.avatar-label--xl .avatar-label__helper { font-size: 18px; line-height: 18px; }

/* === Avatar group (stacked、negative margin で重ね、白 border で分離) === */
.avatar-group {
  display: inline-flex;
  align-items: center;
}
/* size 別の overlap 量 + border 太さ (Figma 確定値) */
.avatar-group--sm   > .avatar,
.avatar-group--sm   > .avatar-counter { margin-left: calc(var(--space-2) * -1);  border: var(--border-width) solid var(--border-buffer); }
.avatar-group--base > .avatar,
.avatar-group--base > .avatar-counter { margin-left: calc(var(--space-3-5) * -1); border: var(--border-width-md) solid var(--border-buffer); }
.avatar-group--lg   > .avatar,
.avatar-group--lg   > .avatar-counter { margin-left: calc(var(--space-4) * -1); border: var(--border-width-md) solid var(--border-buffer); }
.avatar-group > .avatar:first-child,
.avatar-group > .avatar-counter:first-child { margin-left: 0; }

/* Counter chip — gray-200 bg + "+N" text、avatar group の最末尾に配置 */
.avatar-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-quaternary);
  color: var(--text-body);
  border-radius: var(--radius-full);
  font-family: var(--font-family);
  font-weight: 500;
  flex-shrink: 0;
  box-sizing: border-box;
}
.avatar-group--sm   > .avatar-counter { width: 24px; height: 24px; font-size: 8px; }
.avatar-group--base > .avatar-counter { width: 32px; height: 32px; font-size: 12px; }
.avatar-group--lg   > .avatar-counter { width: 44px; height: 44px; font-size: 14px; }

/* === Icon shape (Figma 2180:20847 — 6 size × 7 color × 2 type = 84 variants) ===
   colored bg + center icon の reusable foundation。
   alert / dropdown / toast / autocomplete 等で chip/badge/avatar 的視覚要素として使用。
   icon は consumer 側で `<Icon size={N} />` 指定 (推奨 size: shape の ~58%)。 */
.icon-shape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);                                 /* base default */
  height: var(--space-9);
  background-color: var(--bg-tertiary);                   /* default = gray bg */
  color: var(--text-body);                              /* default = gray text */
  border-radius: var(--radius-full);                       /* Type=Circle (default) */
  flex-shrink: 0;
  box-sizing: border-box;
}
/* Type=Square */
.icon-shape--square { border-radius: var(--radius-xs); }

/* Size — Figma 確定値 (推奨 icon size 併記) */
.icon-shape--xs   { width: 16px; height: 16px; }      /* icon 10 */
.icon-shape--sm   { width: 24px; height: 24px; }      /* icon 16 */
.icon-shape--base { width: 36px; height: 36px; }      /* icon 20、default */
.icon-shape--lg   { width: 48px; height: 48px; }      /* icon 28 */
.icon-shape--xl   { width: 64px; height: 64px; }      /* icon 36 */
.icon-shape--2xl  { width: 96px; height: 96px; }      /* icon 56 */

/* Color — bg + icon (text inherits) */
.icon-shape--green  { background-color: var(--bg-success-soft); color: var(--text-fg-success-strong); }
.icon-shape--red    { background-color: var(--bg-danger-soft); color: var(--text-fg-danger-strong); }
.icon-shape--brand  { background-color: var(--bg-brand-softer); color: var(--text-fg-brand); }
.icon-shape--yellow { background-color: var(--bg-warning-soft); color: var(--text-fg-warning); }
.icon-shape--gray   { background-color: var(--bg-tertiary); color: var(--text-body); }
.icon-shape--dark   { background-color: var(--bg-dark); color: var(--text-white); }
.icon-shape--white  { background-color: var(--bg-white); color: var(--text-body); border: var(--border-width) solid var(--border-base); }

/* ============================================================
   3.23 Empty state
   data 取得成功 + 0 件の正常 state。Error state は .empty-state--error で別状態として扱う。
   ============================================================ */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-9) var(--space-7);
  text-align: center;
  color: var(--text-label);
}
.empty-state-icon { width: var(--space-12); height: var(--space-12); color: var(--text-disabled); margin-bottom: var(--space-4); }
.empty-state-title { font-size: var(--font-base); font-weight: var(--weight-bold); color: var(--text-heading); margin-bottom: var(--space-2); }
.empty-state-desc  { font-size: var(--font-sm); margin-bottom: var(--space-5); }
.empty-state-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
.empty-state--error .empty-state-icon { color: var(--text-fg-danger); }

/* ============================================================
   3.24 Utility classes
   ============================================================ */
.text-heading { color: var(--text-heading); }
.text-label   { color: var(--text-label); }
.text-muted   { color: var(--text-muted); }
.text-danger  { color: var(--danger-text); }
.text-success { color: var(--success-text); }
.text-xs  { font-size: var(--font-xs); }
.text-sm  { font-size: var(--font-sm); }
.text-base { font-size: var(--font-base); }
.text-lg  { font-size: var(--font-lg); }
.text-xl  { font-size: var(--font-xl); }
.text-2xl { font-size: var(--font-2xl); }
.font-bold    { font-weight: var(--weight-bold); }
.font-medium  { font-weight: var(--weight-medium); }
.font-mono    { font-family: var(--font-mono); }
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.flex         { display: flex; }
.flex-1       { flex: 1; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-end     { display: flex; justify-content: flex-end; }
.flex-center  { display: flex; align-items: center; }
.flex-col     { display: flex; flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-end  { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }
.gap-8 { gap: var(--space-8); }
.gap-9 { gap: var(--space-9); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-9 { margin-top: var(--space-9); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-9 { margin-bottom: var(--space-9); }
.ml-1 { margin-left: var(--space-1); } .ml-2 { margin-left: var(--space-2); } .ml-3 { margin-left: var(--space-3); } .ml-4 { margin-left: var(--space-4); }
.mr-1 { margin-right: var(--space-1); } .mr-2 { margin-right: var(--space-2); } .mr-3 { margin-right: var(--space-3); } .mr-4 { margin-right: var(--space-4); }
.p-1 { padding: var(--space-1); } .p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); }
.w-full { width: 100%; }
.h-full { height: 100vh; }
.hidden { display: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: calc(var(--space-px) * -1);
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ============================================================
   3.25 Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Layer 4: Page Composition Patterns
   ------------------------------------------------------------
   Verification feedback (2026-04-30): /design-system generate で
   list / admin-tabbed pattern を生成すると、既存 .section / .tbl
   だけでは画面構成 (full-screen flex / topbar / table-card 等) を
   表現できず、LLM が inline <style> で 50 class を再発明していた。
   これを Layer 4 として規格化し、再生成可能にする。
   ============================================================ */

/* 4.1 Page-level flex layout: .page-fl / .sidenav / .main-fl は Layer 5
   (extract.mjs nonFigmaSupplement) に統一。Layer 4 では定義しない (重複防止) */

/* 4.3 Notification bell + company badge */
.bell-btn {
  position: relative; padding: var(--space-2-5) var(--space-4); border-radius: var(--radius-xs);
  border: var(--border-width) solid var(--border-default); background: var(--bg-card);
  color: var(--text-body); display: inline-flex; align-items: center; gap: var(--space-1-5);
  font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: var(--shadow-sm);
}
.bell-btn:hover { background: var(--bg-page); }
.bell-icon-btn {
  position: relative; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-width) solid var(--border-default); background: var(--bg-card); border-radius: var(--radius-xs);
  color: var(--text-body); cursor: pointer;
}
.notif-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--space-4-5); height: var(--space-4-5); padding: 0 calc(var(--space-2-5) / 2);
  border-radius: var(--radius-full); background: var(--bg-danger);
  color: var(--text-white); font-size: 11px; font-weight: 600;
}
.bell-icon-btn .notif-count { position: absolute; top: -4px; right: -4px; }
.company-badge {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3-5); border-radius: var(--space-1);
  border: var(--border-width) solid var(--border-default); background: var(--bg-page);
  font-size: 14px; font-weight: 500; color: var(--text-body);
}

/* 4.6 Table card (white card wrapping table + toolbar + pagination) */
.table-card {
  background: var(--bg-card); border-radius: var(--radius);
  margin: var(--space-4); border: var(--space-px) solid var(--border-default);
  display: flex; flex-direction: column; overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  box-shadow: var(--shadow-sm);
}
.table-card--sticky-header {
  overflow: visible;
}
.table-card:not(.table-card--sticky-header):has(.tbl-cell-head__helper) {
  overflow: hidden;
}
.toolbar      { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); gap: var(--space-2); }
.toolbar-left { display: flex; align-items: center; gap: var(--space-2); }
.toolbar-btn {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3); border: var(--space-px) solid var(--border-default); border-radius: var(--space-1);
  background: var(--bg-card); color: var(--text-body);
  font-size: 14px; font-weight: 500; cursor: pointer;
}
.search-field        { position: relative; width: 320px; }
.search-field svg    { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-label); }
.search-input {
  width: 100%; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
  border: var(--border-width) solid var(--border-default); border-radius: var(--border-width-lg);
  background: var(--bg-page);
  font-size: 14px; color: var(--text-body);
}

/* 4.7 Compact table inside table-card (.tbl), with sortable headers */
.col-num                 { text-align: right; font-variant-numeric: tabular-nums; }
.edi-num                 { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* 4.8 Pills / chips (Layer 4 generic + Layer 5 project overlay per DESIGN.md §8.35)
   - .cat-pill / .loading-pill / .status-pill は Layer 4 generic base (modifier 無しは color 無し白 chip)
   - 案件固有 modifier (--{project}-* 等) は project.css に書く (upstream 配布対象外) */
.cat-pill                { display: inline-block; padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-xs); font-size: 12px; font-weight: 500; background: var(--bg-tertiary); color: var(--text-body); }
.loading-pill            { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-xs); font-size: 12px; font-weight: 500; color: var(--text-body); }
.status-pill             { display: inline-block; padding: var(--space-0-5) var(--space-2-5); border-radius: var(--radius-xs); font-size: 12px; font-weight: 500; background: var(--bg-tertiary); color: var(--text-body); }
.status-pill--gray       { background: var(--bg-quaternary); color: var(--text-body); }
.status-pill--ok         { background: var(--bg-success-soft); color: var(--text-fg-success-strong); }
.status-pill--warn       { background: var(--bg-warning-medium); color: var(--text-fg-warning); }
.ro-pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2); border-radius: var(--space-1);
  font-size: 12px; font-weight: 500;
  background: var(--bg-tertiary); color: var(--text-body);
}
.ro-pill::before         { content: "●"; color: var(--text-label); font-size: 10px; }
.site-chip {
  display: inline-flex; align-items: center; padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-xs);
  font-size: 12px; font-weight: 500;
  background: var(--bg-purple-soft); color: var(--text-fg-purple-strong);
  border: var(--border-width) solid var(--border-purple-subtle);
}

/* === 4.8.1 Saved View (Figma 20091:311575、Layer 4 custom component) ===
   既存 primitive を流用 (拡張ルール DESIGN.md §8.18):
   - trigger = `.input.input--sm.select-trigger` + `.input-wrap--with-left-icon/right-icon` (default 白 bg のまま)
   - dropdown = `.dropdown-menu` + `.dropdown-item` + `.dropdown-divider` (既存 styling そのまま)
   - container = `.saved-view` (relative + flex で trigger + Reset/Save 横並び)
   - 拡張: trigger width (320)、active 時 border-brand、status dot icon、dropdown 配置のみ */
.saved-view {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.saved-view__field { min-width: 240px; }
.saved-view--active .saved-view__field > .input {
  border-color: var(--border-brand);
}
.saved-view__dot {                          /* status-dot leading icon */
  width: var(--space-2-5);
  height: var(--space-2-5);
  border-radius: var(--radius-full);
  background-color: var(--bg-warning);
  flex-shrink: 0;
}
.saved-view__menu {                         /* .dropdown-menu の position-only 拡張 (trigger と同じ min-width 240) */
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 240px;
  z-index: var(--z-dropdown);
}

/* === 4.8.2 Filter (Figma 20092:311578、Layer 4 custom component) ===
   既存 primitive を流用:
   - trigger = `.btn.btn--secondary.btn--sm` + Filter icon + chevron
   - panel = `.dropdown-menu` (position-only 拡張で 720w + popover position に変更)
   - 条件 row 内: `.select.select--sm` + `.input.input--sm` + `.btn.btn--icon.btn--ghost.btn--sm`
   - 必要な拡張: `.filter-wrap` (relative)、`.filter-panel` (.dropdown-menu の wide variant) のみ */
.filter-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;                                   /* trigger + クリア button 隣接 (gap 無し、user spec) */
}
.filter-panel {                             /* .dropdown-menu の wide-popover variant (Figma 20092:311578、Type=Advanced active) */
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  width: 960px;                             /* Figma spec: 960px fixed */
  padding: var(--space-5);                  /* Figma: 20px all sides */
  gap: var(--space-4);                      /* Figma: 16px between sections */
  z-index: var(--z-popover);
}
.filter-condition {                         /* 条件 row の flex layout のみ (920×40、gap 12) */
  display: flex;
  align-items: center;
  gap: var(--space-3);                      /* Figma: 12px (regular row) */
}
.filter-condition__conjunction {            /* AND/OR/where 接続詞 (左端、40px 固定幅) */
  flex: 0 0 40px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-label);
  text-align: left;
}
.filter-condition__remove {                 /* 行削除 X (Figma: 20×20 inline icon、border/bg 無し) */
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-label);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
}
.filter-condition__remove:hover { color: var(--text-heading); }   /* hover で icon 色のみ変更 (背景色は変えない、user spec) */
.filter-footer {                            /* 検索ルール追加 + クリア/検索 buttons (Figma 920×36 + 920×48) */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.filter-footer__actions {                   /* クリア + 検索 right-align */
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-3);              /* Figma: 12px top */
}
.filter-footer__actions > .btn {            /* Figma: 96×36 (modal footer と統一) */
  min-width: var(--space-24);
}
.filter-simple-grid > .form-group {         /* grid gap で間隔を制御 — .form-group の default margin-bottom 20px を打ち消す */
  margin-bottom: 0;
}

/* === 4.8.3 Custom Settings 3-column (Figma 20096:196977、modal body 内 layout) ===
   既存 primitive を流用:
   - 外側 = `.modal` (max-width 1152 で large variant)
   - 各 column の items = `.dropdown-item` (既存 primitive 流用)
   - 必要な拡張: `.col-settings-3col` (3-grid layout)、`.col-settings-col` (column container) のみ */
.col-settings-3col {                        /* 3-col grid (Figma: 各列 357w、gap 16) */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: minmax(0, 1fr);       /* row を container 高さに固定 — 中身が overflow しても各列は fill して内部 scroll */
  gap: var(--space-4);
  height: 100%;
  box-sizing: border-box;
  min-height: 0;
}
.col-settings-col {                         /* 各列 = label + list (label は外、list が card) */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);                      /* label と list 間 12px (Figma) */
  min-height: 0;                            /* flex item で list scroll を可能に */
}
.col-settings-col__label {                  /* "カテゴリ" / "項目" / "項目の表示順" */
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--weight-medium);
  color: var(--text-heading);
}
.col-settings-col__list {                   /* list card — 白背景 + border + radius */
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  overflow: hidden;
  min-height: 0;
}
.col-settings-col__list-header {            /* middle 列の header (search input or category bulk-add) */
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--border-base);
  background-color: var(--bg-secondary-medium);   /* user spec: header に背景色で list 本体と区別 */
}
.col-settings-col__list-body {              /* scroll 可能 list body — padding 無し (item 自体が padding を持つ) */
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.col-settings-col__list-body--bordered > * {       /* 各 item に bottom border (last-child も含めて全 item) */
  border-bottom: var(--border-width) solid var(--border-base);
}
.col-settings-col__list-body > .dropdown-item {    /* 中 (項目) / 右 (項目の表示順) 列の list item は vertical 8 / horizontal 12 (user spec) */
  padding: var(--space-2) var(--space-3);
}
.col-settings-col__list-body--category > .dropdown-item { /* 左 (カテゴリ) 列のみ padding 12px */
  padding: var(--space-3);
}
.col-settings-col__list-body--category > .dropdown-item[aria-current="true"] {  /* 選択中 category — brand-soft bg + brand text で active 状態を明示 */
  background-color: var(--bg-brand-softer);
  color: var(--text-fg-brand);
  font-weight: var(--weight-semibold, 600);
}
/* Drag-handle row (右列、display order) */
.col-settings-row--draggable {
  cursor: grab;
}
.col-settings-row--draggable:active {
  cursor: grabbing;
}
.col-settings-row--draggable[draggable="true"]:hover .col-settings-row__drag-handle {
  color: var(--text-heading);
}
/* Drop line indicator (drag 中、insert 位置を brand color の 2px line で示す) */
.col-settings-drop-line {
  height: 2px;
  background-color: var(--bg-brand);
  margin: 0;
  flex-shrink: 0;
  position: relative;
}
.col-settings-drop-line::before {           /* 左端の dot で insert 位置を強調 */
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--bg-brand);
}

/* === 4.8.4 History (Figma 20097:213725、Layer 4 custom component) ===
   既存 `.timeline` / `.timeline-item` を流用、status icon は `--status-success` / `--status-danger` modifier で
   dot を icon-shape (check/X) に置換。details は `.tbl.tbl--history-detail` を流用し、
   diff 表現のみ history modifier で拡張する。status badge は `.history-status` (Layer 4 helper)。 */
.timeline-item--status-success::before,
.timeline-item--status-danger::before {
  width: var(--space-5);                    /* 20×20 icon-shape (default 12 から拡張) */
  height: var(--space-5);
  background-color: var(--bg-success-soft);
  border: var(--border-width) solid var(--border-success-subtle);
  top: 0;                                   /* title baseline と icon center を揃える (default 8 → 0) */
}
.timeline-item--status-danger::before {
  background-color: var(--bg-danger-soft);
  border-color: var(--border-danger-subtle);
}
.timeline-item--status-success,
.timeline-item--status-danger {
  padding-left: calc(var(--space-12) + var(--space-1)); /* Figma 20097:209478: rail 20 + gap 8 + Timeline Item 内部 padding-left 24 = 52 */
}
.timeline-item--status-success:not(:last-child)::after,
.timeline-item--status-danger:not(:last-child)::after {
  left: 9.5px;                              /* 20 dot center - 0.5 */
}
/* check / X icon を ::before の中に表示するため、HTML 側で <span class="timeline-item__status-icon"> を使う
   20×20 dot の center に icon を配置 (icon は 12×12)、flex center で確実に揃える */
.timeline-item__status-icon {
  position: absolute;
  left: 0;
  top: 0;                                   /* title baseline と icon を揃える (dot ::before も top: 0) */
  width: var(--space-5);                    /* 20×20 = dot サイズと一致 */
  height: var(--space-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.timeline-item--status-success .timeline-item__status-icon { color: var(--text-fg-success-strong); }
.timeline-item--status-danger .timeline-item__status-icon { color: var(--text-fg-danger-strong); }

.history-status {                           /* status badge for meta row (Layer 4 helper) */
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  line-height: 16px;
  font-weight: var(--weight-normal);
}
.history-status--succeed { color: var(--text-fg-success); }   /* user spec: -strong ではなく regular */
.history-status--failed { color: var(--text-fg-danger); }

/* History item — Figma 20097:209478 (Layer 4 custom component) */
.history-item__body {                       /* head + toggle + details の vertical stack — head↔toggle は narrow (4)、toggle↔details は margin-top で 16 へ */
  display: flex;
  flex-direction: column;
  gap: var(--space-1);                      /* head ↔ toggle = 4 (user spec: 詳細を見る↔上 text の gap を狭く) */
  flex: 1;
  min-width: 0;
}
.history-item__head {                       /* Heading & Paragraph — title + meta、gap 4 (Figma spec) */
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-start;
}
.history-item__title {                      /* Title — 14/20/600、簡潔な変更内容 */
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--weight-semibold, 600);
  color: var(--text-heading);
  margin: 0;
}
.history-item__meta {                       /* Meta row — datetime / section / action / executor / status (gap 8) */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 12px;
  line-height: 16px;
  color: var(--text-body);
}
.history-item__meta-sep--dash {             /* "—" dash separator (date+time ↔ section の間に 1 つだけ) */
  color: var(--text-muted);
  user-select: none;
}
.history-item__meta-sep--line {             /* vertical line (1×14、section/action/executor/status の間) */
  display: inline-block;
  width: 1px;
  height: 14px;
  background-color: var(--border-base);
}
.history-item__toggle {                     /* "詳細を見る / 詳細を畳む" toggle button — text button、brand 色 */
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-fg-brand);
  cursor: pointer;
  align-self: flex-start;
}
.history-item__toggle:hover { color: var(--text-fg-brand-strong); text-decoration: underline; }
.history-item__details {                    /* details table wrapper、card 風。toggle↔details = body gap 4 + margin-top 12 = 16 */
  margin-top: var(--space-3);               /* extra 12 + body gap 4 = 16 visible separation */
  background-color: var(--bg-card);         /* table body bg = bg-card (= bg-primary、user spec) */
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  overflow: hidden;
  width: 100%;
}
.history-item__details .tbl--history-detail {
  width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  table-layout: auto;
}
.tbl.tbl--history-detail th.tbl-cell-head {
  height: 40px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  text-align: left;
  border-bottom: var(--border-width) solid var(--border-base);
  vertical-align: middle;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.tbl.tbl--history-detail th.tbl-cell,
.tbl.tbl--history-detail td.tbl-cell {
  height: 44px;
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  text-align: left;
  border-bottom: var(--border-width) solid var(--border-base);
  vertical-align: middle;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.tbl.tbl--history-detail tbody tr:last-child th,
.tbl.tbl--history-detail tbody tr:last-child td { border-bottom: 0; }   /* thead の tr (only child = last) に誤適用するのを防ぐため tbody スコープを明示 */
.tbl.tbl--history-detail thead th.tbl-cell-head {                /* default: 値 column (変更前/変更後 等) は bg-card (= bg-primary) */
  background-color: var(--bg-card);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  border-bottom: var(--border-width) solid var(--border-base);  /* table-head 下境界 — border-base (user spec) */
}
.tbl.tbl--history-detail th.history-th-label,
.tbl.tbl--history-detail thead th.tbl-cell-head.history-th-label {  /* label column (項目 等) のみ bg-secondary-medium */
  background-color: var(--bg-secondary-medium);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
}
.tbl.tbl--history-detail td.tbl-cell { color: var(--text-body); }
.tbl.tbl--history-detail tbody tr:hover {
  background: transparent;
  cursor: default;
}
.tbl.tbl--history-detail tbody tr:hover > .tbl-cell {
  background-color: var(--bg-card);
}
.tbl.tbl--history-detail tbody tr:hover > .history-th-label {
  background-color: var(--bg-secondary-medium);
}
/* Diff cells — 3-col 変更前/変更後 separate column 用 */
.tbl.tbl--history-detail td.history-diff-old {       /* 編集前の値: subtle 色のみ (3-col の default、user spec: strikethrough 不要) */
  color: var(--text-body-subtle);
}
.tbl.tbl--history-detail td.history-diff-old--strike {  /* 4-col 編集 row 等で取消線を追加したい場合の modifier */
  text-decoration: line-through;
}
/* Stacked cell content — 編集 row の場合に old/new を 1 cell 内 stacked 表示 (user spec: 旧 strike+subtle 上 / 新 medium+purple 下) */
.history-cell-changed {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}
.history-cell-changed__old {
  color: var(--text-body-subtle);
  text-decoration: line-through;
}
.history-cell-changed__new {
  color: var(--text-fg-purple);
  font-weight: var(--weight-medium);
}
.tbl.tbl--history-detail td.history-diff-new {       /* 編集後の値: medium + purple 色 */
  font-weight: var(--weight-medium);
  color: var(--text-fg-purple);
}
/* row 操作 badge cell (左端、編集/追加/削除) — `.badge--purple/--success/--danger` を使う、cell padding 調整 */
.tbl.tbl--history-detail td.history-diff-status {
  width: 72px;
  min-width: 72px;
  max-width: 72px;
  text-align: center;
  white-space: nowrap;
  /* bg なし — table 更新 case では table-head のみ bg-secondary-medium、badge column 全体は plain white (user spec) */
}
.history-nested-expander {
  width: 48px;
  text-align: center;
  color: var(--text-body-subtle);
}
.history-nested-summary {
  color: var(--text-body-subtle);
}
.history-item__details--nested {
  background: var(--bg-page);
}
.history-item__details--nested .tbl--history-nested {
  table-layout: fixed;
}
.history-nested-parent-badge {
  flex-shrink: 0;
}
.history-item__details--nested .tbl.tbl--history-detail th.tbl-cell-head--sm {
  height: 40px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-item__details--nested .tbl.tbl--history-detail thead th.tbl-cell-head {
  background: var(--bg-secondary-medium);
}
.history-item__details--nested .tbl.tbl--history-detail td.tbl-cell--sm {
  height: 44px;
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  vertical-align: middle;
}
.history-item__details--nested .tbl.tbl--history-detail th:first-child,
.history-item__details--nested .tbl.tbl--history-detail td.history-diff-status {
  width: auto;
  text-align: center;
}
.tbl.tbl--history-detail .history-nested-parent-row,
.tbl.tbl--history-detail .history-nested-parent-row:hover {
  background: var(--bg-card);
  cursor: default;
}
.tbl.tbl--history-detail .history-nested-parent-row > .tbl-cell,
.tbl.tbl--history-detail .history-nested-parent-row:hover > .tbl-cell,
.tbl.tbl--history-detail .history-nested-parent-row > .tbl-cell:hover {
  background: var(--bg-card);
  color: var(--text-body);
  border-bottom: var(--border-width) solid var(--border-base);
  vertical-align: middle;
}
.tbl.tbl--history-detail .history-nested-panel-row,
.tbl.tbl--history-detail .history-nested-panel-row:hover {
  background: var(--bg-page);
  cursor: default;
}
.tbl.tbl--history-detail .history-nested-panel-row > .history-nested-panel-cell,
.tbl.tbl--history-detail .history-nested-panel-row:hover > .history-nested-panel-cell,
.tbl.tbl--history-detail .history-nested-panel-cell:hover {
  height: auto;
  padding: 0;
  background: var(--bg-page);
  border-bottom: var(--border-width) solid var(--border-base);
  white-space: normal;
  overflow: visible;
}
.history-item__details--nested .tbl.tbl--history-detail td.tbl-cell--sm.history-nested-panel-cell,
.history-item__details--nested .tbl.tbl--history-detail .history-nested-panel-row:hover > td.tbl-cell--sm.history-nested-panel-cell,
.history-item__details--nested .tbl.tbl--history-detail td.tbl-cell--sm.history-nested-panel-cell:hover {
  height: auto;
  padding: 0;
  background: var(--bg-page);
  border-bottom: var(--border-width) solid var(--border-base);
  white-space: normal;
  overflow: visible;
}
.tbl.tbl--history-detail tbody tr:last-child .history-nested-panel-cell {
  border-bottom: 0;
}
.history-nested-panel {
  padding: var(--space-1) var(--space-3) var(--space-3) var(--space-12);
  background: var(--bg-page);
}
.history-nested-table-wrap {
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-card);
}
.history-nested-table-wrap .tbl.tbl--history-detail {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.tbl.tbl--history-detail.tbl--history-nested-detail th.tbl-cell-head,
.tbl.tbl--history-detail.tbl--history-nested-detail th.tbl-cell,
.tbl.tbl--history-detail.tbl--history-nested-detail td.tbl-cell {
  background: var(--bg-page);
}
.tbl.tbl--history-detail.tbl--history-nested-detail thead tr:first-child .tbl-cell-head {
  border-top: 0;
}
.history-item__details--nested .tbl.tbl--history-nested-detail thead th.tbl-cell-head {
  border-bottom: var(--border-width) solid var(--border-base);
}
.tbl.tbl--history-detail.tbl--history-nested-detail tbody tr:hover,
.tbl.tbl--history-detail.tbl--history-nested-detail tbody tr:hover > .tbl-cell {
  background: var(--bg-page);
  cursor: default;
}
.tbl.tbl--history-detail.tbl--history-nested-detail tbody tr:hover > .history-th-label {
  background: var(--bg-secondary-medium);
}
.tbl.tbl--history-detail.tbl--history-nested-detail tbody tr:last-child th,
.tbl.tbl--history-detail.tbl--history-nested-detail tbody tr:last-child td {
  border-bottom: 0;
}

/* 4.9 Pagination row (table footer) */
.pag-row     { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.per-page    { padding: var(--space-2) var(--space-7) var(--space-2) var(--space-3); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-xs); background: var(--bg-card); font-size: 14px; color: var(--text-body); }
.pag-btn {
  width: var(--space-8); height: var(--space-8);
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-width) solid var(--border-default); border-radius: var(--border-width-lg);
  background: var(--bg-card); color: var(--text-body);
  font-size: 14px; cursor: pointer;
}
.pag-btn:hover    { background: var(--bg-page); }
.pag-info         { font-size: 14px; color: var(--text-body); }
.pag-info strong  { color: var(--text-heading); font-weight: 600; }

/* 4.11 Modal backdrop + close button (used with .modal Layer 3) */
.modal-backdrop {
  position: fixed; inset: 0;
  background: var(--bg-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
  z-index: var(--z-modal);
}
.modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-label); font-size: 20px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
}
.modal-close:hover { background: var(--bg-page); color: var(--text-heading); }
/* Floating close — Type=Popup / Type=With progress bar 等の header なし modal で右上に絶対配置
   (Figma: 36×36 round) */
.modal-close--floating {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: var(--space-9);
  height: var(--space-9);
  padding: 0;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   Layer 5: Non-Figma Layout Supplement
   ----------
   Figma は visual design tool。下記は CSS layout の関心事で、
   Figma 上で表現されない (frame に position:fixed の概念がない等)。
   Figma 単独 SSOT の例外として、この層で明示的に補う。
   ============================================================ */

/* WHY: .page = full viewport flex container (sidenav + main 横並び)。
   Figma frame は子要素の x/y 座標を持つが CSS の flex/grid 関係は表現しない */
.page {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg-page);
}
.page-fl {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* WHY: .main = sidenav の右に広がるコンテンツ領域。Figma では描画範囲外。
   topbar は full-width のため main 自身に padding は持たせず、body content のみ
   .main-body wrapper で 16px padding を与える (Figma page template 準拠)。
   margin-left:0 は非 flex `.page` 時代の sidebar offset を打ち消すため明示。
   を打ち消すため明示。現在の .page は display:flex なので flex layout で sidenav 隣接 */
.main {
  flex: 1;
  margin-left: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  overflow-x: auto;
}
/* WHY: scroll container のみ。flex-column にすると .section が flex-shrink:1 で
   潰れ、.section の overflow:hidden で content が clip される (Dashboard で
   KPI 値見切れ事象)。block flow で素直に積む */
.main-fl {
  flex: 1;
  min-width: 0;
  background: var(--bg-page);
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  padding: 0;
}
/* WHY: topbar 直下 body content の枠。Figma page template (node 19929-21169) で
   topbar は full-width / body は 16px 余白、section 間は vertical/horizontal とも 16px という分離構造を 1:1 で写像 */
.main-body {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
  padding: var(--space-4) var(--space-4) var(--space-10);
}
.main-body > * {
  min-width: 0;
}
/* App Shell body area に置く visual surface container / top-level surface は shadow-sm。
   `.main-body__grid` / `.card-grid` などの layout helper 自体は shadow を持たず、
   その中に置かれる table / section / card / widget などの surface が shadow を持つ。
   `.main-body-surface` / `.main-body-container` は custom visual surface 用の alias で、
   spacing-only wrapper には使わない。 */
.main-body-container,
.main-body-surface {
  min-width: 0;
  background-color: var(--bg-card);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-xs);
  box-sizing: border-box;
}
.main-body > :is(.section, .table-card, .card, .widget, .stats-widget, .main-body-container, .main-body-surface),
.main-body__grid > :is(.section, .table-card, .card, .widget, .stats-widget, .main-body-container, .main-body-surface),
.main-body > .card-grid > :is(.card, .widget, .stats-widget, .main-body-container, .main-body-surface),
.app-shell-builder-layout > :is(.section, .table-card, .card, .widget, .stats-widget, .main-body-container, .main-body-surface),
.app-shell-dashboard-grid > :is(.section, .table-card, .card, .widget, .stats-widget, .main-body-container, .main-body-surface),
.app-shell-dashboard-side > :is(.section, .table-card, .card, .widget, .stats-widget, .main-body-container, .main-body-surface) {
  box-shadow: var(--shadow-sm);
}
.main-body__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.main-body > .card-grid {
  gap: var(--space-4);
}
.main-body > .table-card,
.main-body__grid > .table-card {
  margin: 0;
}
.page-fl .table-card {
  border-radius: var(--radius-xs);
}
.app-shell-sample-frame {
  height: calc(var(--space-96) * 2);
  border: var(--border-width) solid var(--border-base);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--bg-page);
}
.app-shell-builder-layout {
  display: grid;
  grid-template-columns: minmax(var(--space-64), var(--space-80)) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.app-shell-builder-main,
.app-shell-dashboard-side {
  display: grid;
  gap: var(--space-4);
}
.app-shell-field-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.app-shell-field-tile {
  justify-content: space-between;
  min-height: var(--space-12);
  background-color: var(--bg-primary-soft);
}
.app-shell-field-tile .list-item__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(var(--space-80), 1fr);
  gap: var(--space-4);
  align-items: start;
}
.app-shell-map-placeholder {
  min-height: var(--space-64);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, transparent 0 36%, var(--bg-brand-softer) 36% 42%, transparent 42%),
    linear-gradient(25deg, transparent 0 58%, var(--bg-secondary) 58% 66%, transparent 66%),
    var(--bg-primary-soft);
  border: var(--border-width) solid var(--border-default);
}
@media (max-width: 900px) {
  .main-body__grid { grid-template-columns: 1fr; }
  .app-shell-builder-layout,
  .app-shell-dashboard-grid,
  .app-shell-field-tile-grid {
    grid-template-columns: 1fr;
  }
}

/* WHY: section 間の縦余白。Figma はキャンバス上の y 距離で表すが
   CSS の margin との 1:1 対応は曖昧 (gap on parent vs margin on child) */
/* Section adjacent margin reset (主 Section rule は §3.4 に移動済) */
.section + .section { margin-top: 0; }

/* WHY: btn はインタラクションを伴う。Figma の variant は state を表すが
   CSS の :hover / cursor は実装側で補う。
   inline-flex で content size に shrink (Figma frame は flex column で full-width に育つため) */
/* WHY: white-space:nowrap で button label が flex 親に絞られても改行しない。
   flex-shrink:0 で toolbar 内で他要素に圧迫されて潰れない */
.btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; white-space: nowrap; flex-shrink: 0; text-decoration: none; }
/* WHY: a.btn は UA stylesheet の a:-webkit-any-link { text-decoration: underline } (specificity 0-1-1) に
   負けることがある。a.btn で明示的に 0-1-1 specificity を確保する */
a.btn { text-decoration: none; }
/* .btn:disabled は §3.9 line ~2703 で Figma 確定値 (gray-100/200/400) で定義済 */

/* WHY: <button class="form-item"> は drill-down 等で使われるが、native button chrome
   (灰色 bg + outset border) が <div class="form-item"> と並ぶと視覚的に揃わない。
   .form-item に限り native button chrome を reset し、<div>/<button> で同じ見た目に */
button.form-item {
  background: transparent; border: none; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}

/* WHY: badge / pill 系は inline-flex で content size に shrink。
   Figma frame は auto-layout flex で抽出されるため block 化して列幅を埋めてしまう。 */
.badge, .status-pill, .cat-pill, .loading-pill, .ro-pill, .site-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto;
}

/* WHY: tbl は <table> 要素なので display: table に強制 (Figma 由来の display:flex を override)。
   Figma frame の auto-layout は flex として抽出されるが、<table> には不適切。
   width:100% + table-layout:fixed で columns を均等分配し空白を防ぐ。
   text-overflow で長い ID は省略 (... ホバーで全文表示する UX 想定)。 */
.tbl       { display: table; width: 100%; border-collapse: collapse; table-layout: fixed; }
.tbl thead { display: table-header-group; }
.tbl tbody { display: table-row-group; }
.tbl tr    { display: table-row; }
.tbl th, .tbl td { display: table-cell; overflow: hidden; text-overflow: ellipsis; }
.tbl thead tr { background: var(--bg-page); }
.tbl th, .tbl td {
  padding: var(--space-2-5) var(--space-3); font-size: var(--space-3);
  border-bottom: var(--border-width) solid var(--border-default);
  text-align: left; white-space: nowrap;
}
.tbl:not(.tbl--read-only) tbody tr:hover { background: var(--bg-page); cursor: pointer; }

/* WHY: resizable/fixed-layout table は colgroup で列幅を決める。
   compound cell の inline content が列幅外へはみ出すと scrollWidth だけが増え、
   sticky actions の右側に空白スクロールが発生するため、cell 内で必ず truncate する。 */
.tbl.tbl--resizable td.tbl-cell {
  max-width: 0;
}
.tbl.tbl--resizable td.tbl-cell > * {
  max-width: 100%;
}
.tbl.tbl--resizable td.tbl-cell :where(span, a) {
  min-width: 0;
}
.tbl.tbl--resizable td.tbl-cell--user > .avatar + span {
  display: inline-flex;
  max-width: calc(100% - var(--space-6) - var(--space-2));
  min-width: 0;
  overflow: hidden;
  vertical-align: middle;
}
.tbl.tbl--resizable td.tbl-cell--user > .avatar + span > span,
.tbl.tbl--resizable td.tbl-cell--flag-text > span:last-child,
.tbl.tbl--resizable td.tbl-cell--dot-text > span:last-child,
.tbl.tbl--resizable td.tbl-cell--side-icons-text > span:last-child {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* WHY: modal-backdrop は viewport 全面 dim。Figma frame は overlay 概念がない。
   bg は \`var(--bg-modal)\` = rgba(74,85,101,0.75) (= gray-700 75%、Figma token \`color-background-bg-modal\`)。 */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
  background: var(--bg-modal);
}

/* WHY: drawer 位置決定。Layer 3 で見た目 (bg/pad/gap)、ここで position: fixed を補う。
   variants: --right (default) / --left / --top / --bottom (positioning + slide animation) */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--space-96);                                  /* Figma Default 384、--md/--lg で override 可 */
  max-width: 100vw;
  z-index: var(--z-drawer);
  transform: translateX(100%);
  transition: transform var(--duration-normal);
  box-shadow: 0 0 24px rgba(29, 41, 61, 0.06);
}
.drawer--open { transform: translateX(0); }
/* --right (default) */
.drawer--right { right: 0; left: auto; bottom: 0; top: 0; transform: translateX(100%); }
.drawer--right.drawer--open { transform: translateX(0); }
/* --left */
.drawer--left  { left: 0; right: auto; bottom: 0; top: 0; transform: translateX(-100%); }
.drawer--left.drawer--open { transform: translateX(0); }
/* --top */
.drawer--top {
  top: 0; left: 0; right: 0; bottom: auto;
  width: 100%; max-width: 100vw;
  transform: translateY(-100%);
}
.drawer--top.drawer--open { transform: translateY(0); }
/* --bottom */
.drawer--bottom {
  bottom: 0; left: 0; right: 0; top: auto;
  width: 100%; max-width: 100vw;
  transform: translateY(100%);
}
.drawer--bottom.drawer--open { transform: translateY(0); }
/* width sizes */
.drawer--sm { width: 320px; }
.drawer--md { width: 384px; }
.drawer--lg { width: 448px; }