/* ════════════════════════════════════════════════════════════ */
/* ═══ layers.css ═══ */
/* ════════════════════════════════════════════════════════════ */
/* ============================
   CSS Layer Declaration — Load Order
   MUST be the first stylesheet loaded in every HTML page.
   Layers listed first have LOWEST priority.

   base:       reset, variables, dark-mode (design tokens)
   components: codegen-generated CSS (skeleton-saas, etc.)
   utilities:  shared CSS modules (_shared/css-utilities/*, css-core/*)
   overrides:  variables-override, per-project customizations

   Result: shared utilities ALWAYS beat codegen output,
   regardless of source order or specificity.
   ============================ */
@layer base, components, utilities, overrides;


/* ════════════════════════════════════════════════════════════ */
/* ═══ reset.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer base {
/* Modern CSS Reset + Defensive CSS */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role='list'], ol[role='list'] {
  list-style: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height, var(--header-desktop, 80px));
  overscroll-behavior-y: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  font-family: var(--font-body, var(--font-sans));
  background-color: var(--color-background);
  color: var(--color-text);
}

::selection {
  background-color: var(--color-primary);
  color: var(--color-on-primary, #ffffff);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading, var(--font-sans));
}

code, pre, kbd {
  font-family: var(--font-mono, monospace);
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img, picture {
  max-width: 100%;
  height: auto;
  display: block;
}

button, a {
  touch-action: manipulation;
}

input, button, textarea, select {
  font: inherit;
}

.no-scroll {
  overflow: hidden;
}

/* Custom scrollbar — thin, brand-aware */
:root {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full, 9999px);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* WCAG 2.2 SC 2.4.13 — Global focus-visible outline (progressive enhancement)
 * 기존 outline:none + box-shadow:var(--focus-ring) 컴포넌트와 공존.
 * 개별 컴포넌트가 outline:none 을 선언하면 이 규칙은 무시됨.
 */
:focus-visible {
  outline: var(--focus-outline, 2px solid var(--color-primary));
  outline-offset: var(--focus-outline-offset, 2px);
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ variables.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer base {
:root {
  /* ============================
     Colors — Primary
     ============================ */
  --color-primary: #3b82f6;
  --color-primary-rgb: 59, 130, 246;
  --color-primary-hover: #2563eb;
  --color-primary-light: #eff6ff;
  --color-primary-dark: #1d4ed8;

  /* Contrast Pair — 어두운 배경 위 텍스트 (PRD에서 반드시 오버라이드) */
  --color-on-primary: #ffffff;         /* primary 배경 위 텍스트 */
  --color-on-primary-faded: rgb(255 255 255 / 0.3); /* spinner tracks, ghost borders */
  --color-on-hero: #ffffff;            /* Hero/배너 위 텍스트 */
  --color-on-hero-muted: rgb(255 255 255 / 0.75); /* Hero 위 보조 텍스트 */
  --color-on-dark-faded: rgb(0 0 0 / 0.15); /* light-bg spinner tracks */

  /* color-mix() derived states — primary */
  --color-primary-active:  color-mix(in srgb, var(--color-primary), black 20%);
  --color-primary-subtle:  color-mix(in srgb, var(--color-primary), transparent 90%);

  /* Input focus ring — colored glow (different from --focus-ring double-ring) */
  --input-focus-ring: color-mix(in srgb, var(--color-primary), transparent 75%);

  /* Colors — Secondary */
  --color-secondary: #64748b;
  --color-secondary-hover: #475569;

  /* Colors — Semantic */
  --color-success: #22c55e;
  --color-success-light: color-mix(in srgb, var(--color-success), transparent 88%);
  --color-warning: #f59e0b;
  --color-warning-light: color-mix(in srgb, var(--color-warning), transparent 88%);
  --color-error: #ef4444;
  --color-error-light: color-mix(in srgb, var(--color-error), transparent 88%);
  --color-info: #3b82f6;
  --color-info-light: color-mix(in srgb, var(--color-info), transparent 88%);

  /* Colors — Neutral (Light Mode) */
  --color-background: #ffffff;
  --color-bg: var(--color-background);
  --color-surface: #f8fafc;
  --color-surface-50: #f8fafc;
  --color-surface-100: #f1f5f9;
  --color-surface-200: #e2e8f0;
  --color-surface-300: #cbd5e1;
  --color-surface-400: #94a3b8;
  --color-surface-elevated: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-overlay: rgb(0 0 0 / 0.5);
  --color-text: #0f172a;
  --color-text-primary:   #0f172a;   /* heading, emphasis — alias of --color-text */
  --color-text-secondary: #334155;   /* body text */
  --color-text-muted: #64748b;
  --color-text-disabled: #94a3b8;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-overlay: rgb(0 0 0 / 0.5);

  /* Colors — Dark Mode Values */
  --color-dark-background: #0f172a;
  --color-dark-surface: #1e293b;
  --color-dark-surface-50: #1e293b;
  --color-dark-surface-100: #253348;
  --color-dark-surface-200: #334155;
  --color-dark-surface-300: #475569;
  --color-dark-surface-400: #64748b;
  --color-dark-surface-elevated: #334155;
  --color-dark-surface-raised: #334155;
  --color-dark-text: #f1f5f9;
  --color-dark-text-primary: #f8fafc;
  --color-dark-text-muted: #94a3b8;
  --color-dark-text-disabled: #64748b;
  --color-dark-border: #334155;
  --color-dark-border-strong: #475569;
  --color-dark-overlay: rgb(0 0 0 / 0.7);

  /* Colors — High Contrast (WCAG AAA / Silver Tech Theme C) */
  --color-high-contrast-text: #000000;
  --color-high-contrast-background: #ffffff;
  --color-high-contrast-primary: #1e40af;
  --color-high-contrast-border: #1e293b;
  --color-high-contrast-focus: #b91c1c;

  /* ============================
     Typography
     ============================ */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: var(--font-sans);
  --font-heading: 'Sora', var(--font-sans);
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --text-xs:   clamp(0.75rem,  1.5vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 2vw,   1rem);
  --text-base: clamp(1rem,     2.5vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 3vw,   1.25rem);
  --text-xl:   clamp(1.25rem,  3.5vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,   4vw,   2rem);
  --text-3xl:  clamp(2rem,     5vw,   3rem);
  --text-4xl:  clamp(2.5rem,   6vw,   4rem);
  --text-5xl:  clamp(3rem,     7vw,   5rem);

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.075em;   /* badge, chip uppercase */
  --tracking-widest: 0.12em;   /* section overline, nav-heading */

  /* Silver Tech — 대형 타이포그래피 (Theme C) */
  --text-silver-base: 1.25rem;    /* 20px — 시니어 기본 */
  --text-silver-lg: 1.5rem;       /* 24px */
  --text-silver-xl: 1.875rem;     /* 30px */
  --text-silver-2xl: 2.25rem;     /* 36px */
  --text-silver-heading: 3rem;    /* 48px */

  /* ============================
     Spacing
     ============================ */
  --spacing-px: 1px;
  --spacing-0: 0;
  --spacing-0-5: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-1-5: 0.375rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;

  /* Short aliases (some snippets use --space-N instead of --spacing-N) */
  --space-1: var(--spacing-1);
  --space-2: var(--spacing-2);
  --space-3: var(--spacing-3);
  --space-4: var(--spacing-4);
  --space-5: var(--spacing-5);
  --space-6: var(--spacing-6);
  --space-8: var(--spacing-8);

  /* Named spacing aliases */
  --spacing-md: var(--spacing-4);
  --spacing-xl: var(--spacing-8);

  /* Gap aliases */
  --gap-md: var(--spacing-4);

  /* ============================
     Border Radius
     ============================ */
  --radius-xs: 4px;       /* badge, chip */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* ============================
     Shadows
     ============================ */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* Brand-tinted dual-layer shadows — depth + brand glow */
  --shadow-brand-sm:
    0 4px 12px -6px rgb(0 0 0 / 0.15),
    0 2px 6px -4px color-mix(in srgb, var(--color-primary), transparent 75%);
  --shadow-brand-md:
    0 8px 20px -14px rgb(0 0 0 / 0.18),
    0 4px 10px -8px color-mix(in srgb, var(--color-primary), transparent 88%);
  --shadow-brand-lg:
    0 16px 40px -12px rgb(0 0 0 / 0.20),
    0 8px 20px -10px color-mix(in srgb, var(--color-primary), transparent 82%);

  /* ============================
     Transitions
     ============================ */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-ui: 200ms cubic-bezier(0.4, 0, 0.2, 1);    /* card hover, nav-link, dropdown */
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Motion Curves (tension/spring) — FORBIDDEN: transition: ease */
  --spring-motion: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --smooth-motion: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Duration (standalone — for transition-duration, animation-duration) */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-entrance: 600ms;

  /* Easing (standalone — for transition-timing-function) */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ============================
     Glassmorphism Surface
     reference: common-specs.md §10-4
     ============================ */
  --glass-surface-light: rgba(255, 255, 255, 0.6);
  --glass-surface-dark: rgba(0, 0, 0, 0.6);
  --glass-blur: blur(16px) saturate(180%);
  --glass-border-light: 1px solid rgba(255, 255, 255, 0.15);
  --glass-border-dark: 1px solid rgba(255, 255, 255, 0.1);

  /* ============================
     Z-Index Scale
     ============================ */
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-overlay:  1100;
  --z-header:   1000;   /* 고정 헤더 (navbar) */
  --z-sidebar:   999;   /* 사이드바 드로어 */
  --z-dialog:   1100;   /* 모달 다이얼로그 */
  --z-modal:    1100;   /* --z-dialog 별칭 */
  --z-notification: 1200;   /* 토스트·스낵바 */
  --z-toast:    1200;   /* --z-notification 별칭 */
  --z-popover:  1300;   /* 툴팁·팝오버 */
  --z-tooltip:  1300;   /* --z-popover 별칭 */

  /* ============================
     Focus Ring (WCAG 접근성)
     ============================ */
  --focus-ring: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary);
  --focus-ring-error: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-error);

  /* WCAG 2.2 SC 2.4.13 — Outline 기반 포커스 토큰 */
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --focus-outline-color: var(--color-primary);
  --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);

  /* ============================
     Touch Target (WCAG 2.5.8)
     ============================ */
  --touch-target-min: 44px;

  /* ============================
     Container
     ============================ */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1440px;
  --container-max: var(--container-xl);

  /* ============================
     Breakpoints (Mobile-First, min-width)
     reference: common-specs.md §1-2
     ============================ */
  --bp-xs: 0px;
  --bp-sm: 481px;
  --bp-md: 769px;
  --bp-lg: 1025px;
  --bp-xl: 1281px;

  /* ============================
     PWA Safe Area (notch/home indicator)
     ============================ */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);

  /* ============================
     Fluid Typography (clamp)
     reference: common-specs.md §3-3
     ============================ */
  --fluid-h1: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  --fluid-h2: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --fluid-h3: clamp(1.25rem, 0.875rem + 1.5vw, 2rem);
  --fluid-h4: clamp(1.125rem, 0.875rem + 1vw, 1.5rem);
  --fluid-body: clamp(1rem, 0.875rem + 0.5vw, 1.125rem);

  /* ============================
     Bento Grid
     reference: common-specs.md §6
     ============================ */
  --bento-gap: 16px;
  --bento-radius: 16px;
  --bento-padding: 20px;

  /* ============================
     Layout — Header & Sidebar
     reference: common-specs.md §5
     ============================ */
  --header-desktop: 80px;
  --header-mobile: 56px;
  --header-height: var(--header-desktop);   /* alias: main margin-top / scroll-padding-top 기준 */
  --sidebar-expanded: 240px;
  --sidebar-collapsed: 64px;
  --bottom-tab-height: 56px;

  /* ============================
     Content Line Length (readability)
     reference: common-specs.md §3-1
     ============================ */
  --prose-max-width: 65ch;
  --prose-max-width-cjk: 40ch;

  /* CJK minimum font size */
  --text-xs-cjk: 0.8125rem;  /* 13px */

  /* Fluid spacing (clamp-based responsive) */
  --fluid-section-py: clamp(2rem, 4vw, 3.5rem);
  --fluid-container: clamp(320px, 90vw, 1200px);
  --fluid-gap: clamp(0.5rem, 2vw, 1.5rem);

  /* Section / Container aliases (L3 codegen references these) */
  --section-padding-y:  var(--fluid-section-py);
  --content-max-width:  var(--container-xl);
  --content-padding-x:  clamp(1rem, 4vw, 3rem);

  /* 60-30-10 Color System */
  --color-dominant: var(--color-background);
  --color-secondary-role: var(--color-surface);
  --color-accent-role: var(--color-primary);

  /* Border Radius Personas */
  --radius-card: var(--radius-xl);
  --radius-button: var(--radius-lg);

  /* ============================
     Component Tokens
     ============================ */

  /* Card */
  --card-bg:           var(--color-surface-elevated);
  --card-shadow:       var(--shadow-brand-sm);
  --card-shadow-hover: var(--shadow-brand-md);
  --card-border:       1px solid var(--color-border);
  --card-radius:       var(--radius-card);
  --card-radius-inner: calc(var(--radius-card) - 1px); /* prevents white-gap on inner images */
  --shadow-card:       var(--card-shadow);
  --shadow-card-hover: var(--card-shadow-hover);

  /* Border — subtle variant */
  --color-border-subtle: color-mix(in srgb, var(--color-border), transparent 40%);

  /* Surface — secondary variant */
  --color-surface-2: var(--color-surface-100);

  /* Button */
  --btn-height-sm: 2rem;
  --btn-height-md: 2.75rem;
  --btn-height-lg: 3.25rem;
  --btn-padding-x-sm: var(--spacing-3);
  --btn-padding-x-md: var(--spacing-5);
  --btn-padding-x-lg: var(--spacing-6);
  --btn-radius: var(--radius-button);
  --btn-font-size-sm: var(--text-xs);
  --btn-font-size-md: var(--text-sm);
  --btn-font-size-lg: var(--text-base);

  /* CTA */
  --color-cta: var(--color-primary);
  --color-cta-hover: var(--color-primary-hover);
  --color-on-cta: var(--color-on-primary, #fff);

  /* Input */
  --input-bg:     var(--color-surface-elevated);
  --input-border: 1px solid var(--color-border);
  --input-radius: var(--radius-button);

  /* Table */
  --table-header-bg:  var(--color-surface);
  --table-row-hover:  color-mix(in srgb, var(--color-primary), transparent 95%);
  --table-border:     1px solid var(--color-border);

  /* App Shell */
  --app-sidebar-width: 280px;
  --app-sidebar-width-collapsed: 64px;
  --app-header-height: 64px;
  --app-content-height: calc(100vh - var(--app-header-height));
  --app-panel-border: 1px solid var(--color-border);

  /* File manager */
  --color-file-folder: var(--color-info);
  --color-file-document: var(--color-primary);
  --color-file-image: var(--color-success);
  --color-file-archive: var(--color-warning);

  /* Chat */
  --color-chat-bubble-self: var(--color-primary);
  --color-chat-bubble-other: var(--color-surface-100);
  --color-chat-on-self: var(--color-on-primary);
  --color-chat-on-other: var(--color-text);
  --color-chat-online: var(--color-success);
  --color-chat-away: var(--color-warning);
  --color-chat-offline: var(--color-surface-400);

  /* Kanban */
  --color-kanban-backlog: var(--color-surface-400);
  --color-kanban-todo: var(--color-info);
  --color-kanban-progress: var(--color-warning);
  --color-kanban-done: var(--color-success);

  /* Priority */
  --color-priority-urgent: var(--color-error);
  --color-priority-high: var(--color-warning);
  --color-priority-medium: var(--color-info);
  --color-priority-low: var(--color-surface-400);

  /* ============================
     Brand Override (5-Variable System)
     구매자가 이 5개 변수만 교체하면 전체 브랜드 적용.
     css/variables-override.css 에서 덮어쓰기.
     참조: prd-template.md §12-5
     ============================ */
  --brand-primary: var(--color-primary);
  --brand-secondary: var(--color-secondary);
  --brand-surface: var(--color-surface);
  --brand-text: var(--color-text);
  --brand-font: var(--font-sans);
}

/* ============================
   Category Theme Presets
   codegen이 카테고리에 맞는 기본 색상을 자동 적용.
   <html data-category="saas"> 로 활성화.
   ============================ */
[data-category="saas"] {
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --color-secondary: #06b6d4;
}

[data-category="ecommerce"] {
  --color-primary: #f59e0b;
  --color-primary-hover: #d97706;
  --color-secondary: #10b981;
}

[data-category="healthcare"] {
  --color-primary: #14b8a6;
  --color-primary-hover: #0d9488;
  --color-secondary: #6366f1;
}

[data-category="education"] {
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-secondary: #f59e0b;
}

[data-category="fnb"] {
  --color-primary: #ef4444;
  --color-primary-hover: #dc2626;
  --color-secondary: #f59e0b;
}

@media (max-width: 768px) {
  :root { --header-height: var(--header-mobile); }
}

/* ============================
   Dark Mode Auto-Switch
   ============================ */


/* ============================
   High Contrast Mode (접근성 강화)
   ============================ */
@media (prefers-contrast: more) {
  :root {
    --color-text: var(--color-high-contrast-text);
    --color-background: var(--color-high-contrast-background);
    --color-primary: var(--color-high-contrast-primary);
    --color-border: var(--color-high-contrast-border);
    --focus-ring: 0 0 0 3px var(--color-high-contrast-focus);
    --focus-outline-width: 3px;
    --focus-outline-color: var(--color-high-contrast-focus);
    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
  }
}

/* ============================
   Reduced Data — system font fallback, no web fonts
   ============================ */
@media (prefers-reduced-data: reduce) {
  :root {
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'Courier New', monospace;
  }
}

/* ============================
   Reduced Motion
   ============================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-slow: 0ms;
    --spring-motion: 0ms;
    --smooth-motion: 0ms;
  }
}

/* ============================
   CJK Language Overrides
   ============================ */
:lang(ko), :lang(ja), :lang(zh) {
  --prose-max-width: var(--prose-max-width-cjk);
  --leading-normal: 1.8;
  --text-xs: var(--text-xs-cjk);
  --font-body: 'Pretendard', 'Inter', system-ui, sans-serif;
}

/* ============================
   Border Radius Personas
   ============================ */
[data-tone="sharp"] {
  --radius-card: var(--radius-sm);
  --radius-button: var(--radius-md);
}
[data-tone="modern"] {
  --radius-card: var(--radius-xl);
  --radius-button: var(--radius-lg);
}
[data-tone="soft"] {
  --radius-card: var(--radius-2xl);
  --radius-button: 9999px;
}

/* ============================
   4-Tone Visual System
   Replaces: [data-tone="sharp"/"modern"/"soft"] radius personas above
   ============================ */

[data-tone="minimal"] {
  --color-primary:           #1a1a1a;
  --color-primary-hover:     #2d2d2d;
  --color-primary-dark:      #0d0d0d;
  --color-accent:            #6b7280;
  --radius-card:             var(--radius-sm);
  --radius-button:           var(--radius-sm);
  --shadow-card:             none;
  --font-weight-heading:     500;
}

[data-tone="bold"] {
  --color-primary:           #3b82f6;
  --color-primary-hover:     #2563eb;
  --color-primary-dark:      #1d4ed8;
  --color-accent:            #f59e0b;
  --radius-card:             var(--radius-lg);
  --radius-button:           var(--radius-lg);
  --shadow-card:             var(--shadow-md);
  --font-weight-heading:     800;
}

[data-tone="dark"] {
  --color-bg:                #0a0a0a;
  --color-surface:           #111111;
  --color-text:              #f5f5f5;
  --color-text-muted:        rgba(245, 245, 245, 0.55);
  --color-border:            rgba(255, 255, 255, 0.08);
  --color-primary:           #7c3aed;
  --color-primary-hover:     #6d28d9;
  --color-primary-dark:      #5b21b6;
  --color-on-primary:        #ffffff;
  --glass-surface:           rgba(255, 255, 255, 0.04);
  --glass-blur:              blur(12px);
  --shadow-card:             0 0 0 1px rgba(255,255,255,0.06);
}

[data-tone="warm"] {
  --color-primary:           #ea580c;
  --color-primary-hover:     #c2410c;
  --color-primary-dark:      #9a3412;
  --color-accent:            #facc15;
  --color-bg:                #fffbf7;
  --color-surface:           #fff9f4;
  --color-border:            #f3e8d5;
  --radius-card:             var(--radius-2xl);
  --radius-button:           9999px;
  --font-weight-heading:     700;
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ accordion.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* Sogorox Factory — Accordion Component (Level 1 Skeleton용)
   Smooth height animation via grid-template-rows trick.
   Pairs with accordion.js for keyboard nav + exclusive mode.
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14) */

/* ============================
   Accordion Container
   ============================ */
.accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* ============================
   Accordion Item
   ============================ */
.accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.accordion__item:last-child {
  border-bottom: none;
}

/* ============================
   Trigger Button
   ============================ */
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-4) var(--spacing-5);
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  min-height: var(--touch-target-min, 44px);
  transition: background var(--transition-fast);
}

.accordion__trigger:hover {
  background: var(--color-surface);
}

.accordion__trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  z-index: 1;
  position: relative;
}

/* ---- Chevron icon ---- */
.accordion__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform var(--smooth-motion);
  color: var(--color-text-muted);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(180deg);
}

/* ============================
   Panel (smooth height animation)
   Uses grid-template-rows: 0fr → 1fr
   ============================ */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--smooth-motion);
}

.accordion__panel[aria-hidden="false"],
.accordion__panel.accordion__panel--open {
  grid-template-rows: 1fr;
}

.accordion__panel-inner {
  overflow: hidden;
}

.accordion__content {
  padding: 0 var(--spacing-5) var(--spacing-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed, 1.7);
}

/* ============================
   Dark Mode
   ============================ */

/* ============================
   Reduced Motion
   ============================ */
@media (prefers-reduced-motion: reduce) {
  .accordion__panel {
    transition: none;
  }

  .accordion__icon {
    transition: none;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ animations.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Scroll Animations + Kinetic Typography
   Pairs with js/scroll-animations.js
   Uses data-animate="fade-up|fade-in|slide-left|slide-right|scale-up|blur-in"
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §1-1
   ============================ */

/* ---- Hidden state (before viewport entry) ---- */
.animate--hidden {
  opacity: 0;
  will-change: opacity, transform;
}

/* ---- Visible state (after viewport entry) ---- */
.animate--visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---- Per-animation hidden states ---- */
[data-animate="fade-up"].animate--hidden {
  transform: translateY(30px);
}

[data-animate="fade-in"].animate--hidden {
  /* opacity only — no transform needed */
}

[data-animate="slide-left"].animate--hidden {
  transform: translateX(40px);
}

[data-animate="slide-right"].animate--hidden {
  transform: translateX(-40px);
}

[data-animate="scale-up"].animate--hidden {
  transform: scale(0.92);
}

[data-animate="blur-in"].animate--hidden {
  filter: blur(8px);
  transform: translateY(10px);
}

/* ---- Transition (applied to all animated elements) ---- */
[data-animate] {
  transition-property: opacity, transform, filter;
  transition-duration: var(--duration-entrance);
  transition-timing-function: var(--ease-standard);
}

/* ---- Kinetic Typography Utilities ---- */
.text-reveal {
  display: inline-block;
  overflow: hidden;
}

.text-reveal > span {
  display: inline-block;
  transform: translateY(100%);
  transition: transform var(--spring-motion);
}

.text-reveal.animate--visible > span {
  transform: translateY(0);
}

.text-gradient-shift {
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-primary-hover) 50%,
    var(--color-primary) 100%
  );
  animation: gradient-shift 4s linear infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ---- Stagger children utility ---- */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}

.stagger-children.animate--visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
.stagger-children.animate--visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: none; }
.stagger-children.animate--visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; }
.stagger-children.animate--visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; }
.stagger-children.animate--visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: none; }
.stagger-children.animate--visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; }

/* ---- Animation delay utilities ---- */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* hover-lift, hover-scale, hover-glow → canonical: micro-interactions.css */

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  .text-reveal > span,
  .stagger-children > *,
  .text-gradient-shift {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ app-shell.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   App Shell — 3-Panel Layout for App Pages
   (Chat, Email, File Manager, Kanban, Todo, Calendar, Support, Contacts)

   Structure:
     .app-shell
       .app-shell__sidebar      (list/nav panel, collapsible on mobile)
       .app-shell__main          (primary content area)
       .app-shell__detail        (optional detail/info panel)

   Uses tokens: --app-sidebar-width, --app-content-height, --color-*, --spacing-*
   AI: sogorox-factory | Generated: 2026-05-15 | Reviewed: pending
   ============================ */

/* ---- Shell Container ---- */
.app-shell {
  display: flex;
  height: var(--app-content-height);
  overflow: hidden;
  background: var(--color-background);
}

/* ---- Sidebar Panel ---- */
.app-shell__sidebar {
  width: var(--app-sidebar-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: var(--app-panel-border);
  background: var(--color-surface-elevated);
  overflow: hidden;
}

.app-shell__sidebar-header {
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  flex-shrink: 0;
}

.app-shell__sidebar-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.app-shell__sidebar-search {
  padding: var(--spacing-3) var(--spacing-5);
  flex-shrink: 0;
}

.app-shell__sidebar-search input {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-sm);
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}

.app-shell__sidebar-search input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.app-shell__sidebar-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-surface-300) transparent;
}

.app-shell__sidebar-footer {
  padding: var(--spacing-3) var(--spacing-5);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* ---- Main Content ---- */
.app-shell__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.app-shell__main-header {
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  flex-shrink: 0;
  background: var(--color-surface-elevated);
}

.app-shell__main-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-5);
}

.app-shell__main-footer {
  padding: var(--spacing-3) var(--spacing-5);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-surface-elevated);
}

/* ---- Detail Panel (optional 3rd column) ---- */
.app-shell__detail {
  width: 320px;
  flex-shrink: 0;
  border-left: var(--app-panel-border);
  background: var(--color-surface-elevated);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--smooth-motion), opacity var(--smooth-motion);
}

.app-shell__detail[hidden] {
  width: 0;
  opacity: 0;
  border-left: none;
  overflow: hidden;
}

.app-shell__detail-header {
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.app-shell__detail-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-5);
}

.app-shell__detail-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.app-shell__detail-close:hover {
  background: var(--color-surface-100);
  color: var(--color-text);
}

/* ---- Item List (shared pattern for sidebar items) ---- */
.app-shell__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-5);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

.app-shell__item:hover {
  background: var(--color-surface-100);
}

.app-shell__item--active {
  background: var(--color-primary-light);
}

.app-shell__item-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  background: var(--color-primary-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--text-sm);
}

.app-shell__item-content {
  flex: 1;
  min-width: 0;
}

.app-shell__item-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-shell__item-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: var(--spacing-0-5);
}

.app-shell__item-meta {
  font-size: var(--text-xs);
  color: var(--color-text-disabled);
  flex-shrink: 0;
  text-align: right;
}

/* ---- Status Dot ---- */
.app-shell__status {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.app-shell__status--online  { background: var(--color-chat-online); }
.app-shell__status--away    { background: var(--color-chat-away); }
.app-shell__status--offline { background: var(--color-chat-offline); }

/* ---- Badge (unread count, etc.) ---- */
.app-shell__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: var(--spacing-1);
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  flex-shrink: 0;
}

/* ---- Mobile Toggle Button ---- */
.app-shell__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  border-radius: var(--radius-md);
}

/* ---- Empty State ---- */
.app-shell__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--spacing-4);
  padding: var(--spacing-16);
  color: var(--color-text-muted);
}

.app-shell__empty svg {
  width: 64px;
  height: 64px;
  opacity: 0.4;
}

.app-shell__empty-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-muted);
}

.app-shell__empty-desc {
  font-size: var(--text-sm);
  max-width: 320px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .app-shell__detail {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    z-index: var(--z-overlay, 50);
    box-shadow: var(--shadow-xl);
  }

  .app-shell__detail[hidden] {
    display: none;
  }
}

@media (max-width: 768px) {
  .app-shell {
    position: relative;
  }

  .app-shell__sidebar {
    position: fixed;
    top: var(--header-height, 72px);
    left: 0;
    bottom: 0;
    z-index: var(--z-overlay, 50);
    transform: translateX(-100%);
    transition: transform var(--smooth-motion);
    box-shadow: var(--shadow-xl);
    width: min(var(--app-sidebar-width), 85vw);
  }

  .app-shell__sidebar[data-open="true"] {
    transform: translateX(0);
  }

  .app-shell__toggle {
    display: inline-flex;
  }

  .app-shell__main-body {
    padding: var(--spacing-3);
  }
}

/* ── Dark Mode ── */

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .app-shell__sidebar,
  .app-shell__detail,
  .app-shell__item,
  .app-shell__detail-close {
    transition: none;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ apps-extra.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Admin Apps Extra — File Manager + Todo + Support Ticket
   Uses design tokens: --color-*, --spacing-*, --radius-*
   AI: sogorox-factory | Generated: 2026-05-14 | Reviewed: sogorox-qa (2026-05-14)
   ============================ */

/* ============================================================
   FILE MANAGER
   ============================================================ */

.fm {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 500px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.fm__sidebar {
  background: var(--color-surface-100, #f8fafc);
  border-right: 1px solid var(--color-border);
  padding: var(--spacing-4);
}

.fm__nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.1s ease;
}

.fm__nav-item:hover { background: var(--color-surface-200, #e2e8f0); }
.fm__nav-item--active { background: var(--color-primary); color: var(--color-on-primary); }

.fm__nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }

.fm__nav-badge {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.fm__storage {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border);
}

.fm__storage-bar {
  height: 6px;
  background: var(--color-surface-200, #e2e8f0);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--spacing-1);
}

.fm__storage-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.fm__storage-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.fm__main {
  display: flex;
  flex-direction: column;
}

.fm__toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.fm__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
}

.fm__breadcrumb a { color: var(--color-primary); text-decoration: none; }

.fm__view-toggle {
  display: flex;
  gap: 2px;
  background: var(--color-surface-100, #f1f5f9);
  border-radius: var(--radius-sm, 4px);
  padding: 2px;
}

.fm__view-btn {
  padding: var(--spacing-1);
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
}

.fm__view-btn--active {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Grid view */
.fm__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  flex: 1;
  overflow-y: auto;
}

.fm__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.1s ease, background 0.1s ease;
}

.fm__item:hover { background: var(--color-surface-100, #f8fafc); }
.fm__item--selected { border-color: var(--color-primary); background: var(--color-primary-light, rgba(59,130,246,0.05)); }

.fm__item-icon {
  width: 48px;
  height: 48px;
  color: var(--color-primary);
}

.fm__item-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-sm, 4px);
}

.fm__item-name {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.fm__item-size {
  font-size: 10px;
  color: var(--color-text-muted);
}

/* List view */
.fm__list {
  flex: 1;
  overflow-y: auto;
}

.fm__list-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  cursor: pointer;
}

.fm__list-item:hover { background: var(--color-surface-100, #f8fafc); }

.fm__list-icon { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; }
.fm__list-name { flex: 1; font-weight: 500; }
.fm__list-date { color: var(--color-text-muted); width: 120px; }
.fm__list-size { color: var(--color-text-muted); width: 80px; text-align: right; }

/* ============================================================
   TODO / TASKS
   ============================================================ */

.todo {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 400px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.todo__sidebar {
  background: var(--color-surface-100, #f8fafc);
  border-right: 1px solid var(--color-border);
  padding: var(--spacing-4);
}

.todo__filter {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.todo__filter:hover { background: var(--color-surface-200, #e2e8f0); }
.todo__filter--active { background: var(--color-primary); color: var(--color-on-primary); }

.todo__filter-count {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.todo__main {
  display: flex;
  flex-direction: column;
}

.todo__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.todo__add-input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface-elevated);
}

.todo__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-2) 0;
}

.todo__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.1s ease;
}

.todo__item:hover { background: var(--color-surface-100, #f8fafc); }

.todo__check {
  margin-top: 2px;
  accent-color: var(--color-primary);
}

.todo__body { flex: 1; min-width: 0; }

.todo__text {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.todo__item--done .todo__text {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.todo__meta {
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.todo__priority {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  align-self: center;
}

.todo__priority--high { background: var(--color-error); }
.todo__priority--medium { background: var(--color-warning); }
.todo__priority--low { background: var(--color-info); }

.todo__actions {
  display: flex;
  gap: var(--spacing-1);
}

.todo__action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
}

.todo__action-btn:hover { background: var(--color-surface-200, #e2e8f0); color: var(--color-text); }

/* Add task button */
.todo__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: var(--spacing-3);
  transition: background var(--transition-fast);
}

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

.todo__add-submit {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
}

.todo__add-submit:hover { background: var(--color-primary-hover); }

/* Sidebar filter nav */
.todo__filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

/* Labels section */
.todo__labels {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.todo__labels-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--spacing-1);
}

.todo__label-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm, 4px);
}

.todo__label-item:hover { background: var(--color-surface-200, #e2e8f0); }

.todo__label-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Task tag */
.todo__tag {
  display: inline-flex;
  padding: 1px var(--spacing-2);
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--color-surface-200, #e2e8f0);
  color: var(--color-text-muted);
}

.todo__tag--primary { background: color-mix(in srgb, var(--color-primary), transparent 85%); color: var(--color-primary); }
.todo__tag--success { background: color-mix(in srgb, var(--color-success), transparent 85%); color: var(--color-success); }
.todo__tag--warning { background: color-mix(in srgb, var(--color-warning), transparent 85%); color: var(--color-warning); }
.todo__tag--error { background: color-mix(in srgb, var(--color-error), transparent 85%); color: var(--color-error); }

/* Task due date */
.todo__due {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

/* Task assignee avatar */
.todo__assignee img {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

/* Detail dialog */
.todo__detail {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 0;
  width: 480px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

.todo__detail::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.todo__detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.todo__detail-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
}

.todo__detail-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 18px;
}

.todo__detail-close:hover { background: var(--color-surface-100, #f1f5f9); }

.todo__detail-body {
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.todo__detail-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.todo__detail-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.todo__detail-input,
.todo__detail-select,
.todo__detail-textarea {
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface-elevated);
}

.todo__detail-input:focus,
.todo__detail-select:focus,
.todo__detail-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 80%);
}

.todo__detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3);
}

.todo__detail-assignees {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.todo__detail-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  border-top: 1px solid var(--color-border);
}

.todo__detail-btn {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--color-surface-elevated);
  color: var(--color-text);
  font-family: inherit;
}

.todo__detail-btn:hover { background: var(--color-surface-100, #f8fafc); }

.todo__detail-btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.todo__detail-btn--primary:hover { opacity: 0.9; }

.todo__detail-btn--danger {
  background: none;
  border-color: var(--color-error);
  color: var(--color-error);
  margin-right: auto;
}

.todo__detail-btn--danger:hover { background: color-mix(in srgb, var(--color-error), transparent 92%); }

/* ============================================================
   SUPPORT TICKET
   ============================================================ */

.ticket {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 500px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ticket__list-panel {
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.ticket__list-header {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  font-size: var(--text-sm);
}

.ticket__list {
  flex: 1;
  overflow-y: auto;
}

.ticket__list-item {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.1s ease;
}

.ticket__list-item:hover { background: var(--color-surface-100, #f8fafc); }
.ticket__list-item--active { background: var(--color-primary-light, rgba(59,130,246,0.05)); border-left: 3px solid var(--color-primary); }

.ticket__list-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface-200, #e2e8f0);
  flex-shrink: 0;
}

.ticket__list-info { flex: 1; min-width: 0; }

.ticket__list-subject {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticket__list-preview {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticket__list-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.ticket__list-time {
  font-size: 10px;
  color: var(--color-text-muted);
}

.ticket__detail {
  display: flex;
  flex-direction: column;
}

.ticket__detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.ticket__detail-subject {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
}

.ticket__detail-status {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
}

.ticket__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.ticket__message {
  display: flex;
  gap: var(--spacing-3);
}

.ticket__msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface-200, #e2e8f0);
  flex-shrink: 0;
}

.ticket__msg-body {
  flex: 1;
  background: var(--color-surface-100, #f8fafc);
  padding: var(--spacing-3);
  border-radius: var(--radius-md);
}

.ticket__message--agent .ticket__msg-body {
  background: var(--color-primary-light, rgba(59,130,246,0.08));
}

.ticket__msg-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-1);
}

.ticket__msg-name {
  font-size: var(--text-sm);
  font-weight: 600;
}

.ticket__msg-time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.ticket__msg-text {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.6;
}

.ticket__reply {
  padding: var(--spacing-3) var(--spacing-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--spacing-2);
}

.ticket__reply-input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  font-family: inherit;
  font-size: var(--text-sm);
  resize: none;
}

/* ============================================================
   DARK MODE
   ============================================================ */
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .fm,
  .todo,
  .ticket {
    grid-template-columns: 1fr;
  }
  .fm__sidebar,
  .todo__sidebar,
  .ticket__list-panel {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fm__item,
  .fm__nav-item,
  .todo__item,
  .todo__add-btn,
  .todo__add-submit,
  .todo__detail-btn,
  .ticket__list-item {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────
   App: Contacts (NiceAdmin App Adaptation §9 Phase 4)
   Hydrated by _shared/js/contacts-app.js
   ───────────────────────────────────────────────────────── */

.app-contacts {
  background: var(--color-background);
}

.app-contacts__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 16px);
  padding: var(--space-lg, 24px);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  min-height: var(--app-content-height);
}

.app-contacts__sidebar > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm, 8px);
}

.app-contacts__sidebar h1 {
  font-size: var(--text-xl, 1.25rem);
  margin: 0;
}

.app-contacts__search input {
  width: 100%;
  padding: var(--space-sm, 8px) var(--space-md, 12px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-background);
  color: var(--color-text);
  font: inherit;
}

.app-contacts__groups {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-contacts__group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm, 8px) var(--space-md, 12px);
  border-radius: var(--radius-md, 8px);
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.15s var(--smooth-motion, ease);
}

.app-contacts__group:hover,
.app-contacts__group:focus-visible {
  background: var(--color-surface-100, rgba(0, 0, 0, 0.04));
}

.app-contacts__group.is-active {
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
}

.app-contacts__group-count {
  font-size: var(--text-sm, 0.85rem);
  opacity: 0.8;
}

.app-contacts__list-pane {
  background: var(--color-background);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  max-height: var(--app-content-height);
}

.app-contacts__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-contacts__item {
  display: flex;
  align-items: center;
  gap: var(--space-md, 12px);
  padding: var(--space-md, 14px) var(--space-lg, 20px);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s var(--smooth-motion, ease);
}

.app-contacts__item:hover {
  background: var(--color-surface-100, rgba(0, 0, 0, 0.03));
}

.app-contacts__item.is-active {
  background: var(--color-surface);
  border-left: 3px solid var(--color-primary);
}

.app-contacts__item-avatar {
  border-radius: 50%;
  flex-shrink: 0;
}

.app-contacts__item-body {
  flex: 1;
  min-width: 0;
}

.app-contacts__item-name {
  margin: 0;
  font-weight: 600;
  color: var(--color-heading, var(--color-text));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-contacts__item-role {
  margin: 0;
  font-size: var(--text-sm, 0.85rem);
  color: var(--color-muted, var(--color-text));
  opacity: 0.75;
}

.app-contacts__detail {
  padding: var(--space-xl, 32px) var(--space-lg, 24px);
  background: var(--color-surface);
  overflow-y: auto;
  max-height: var(--app-content-height);
}

.app-contacts__detail-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding-bottom: var(--space-lg, 24px);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.app-contacts__detail-avatar {
  border-radius: 50%;
}

.app-contacts__detail-name {
  margin: 0;
  font-size: var(--text-2xl, 1.5rem);
}

.app-contacts__detail-role {
  margin: 0;
  color: var(--color-muted, var(--color-text));
  opacity: 0.75;
}

.app-contacts__detail-actions {
  display: flex;
  gap: var(--space-sm, 8px);
  margin-top: var(--space-md, 12px);
  flex-wrap: wrap;
  justify-content: center;
}

.app-contacts__detail-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm, 8px);
  padding: var(--space-lg, 20px) 0;
  margin: 0;
}

.app-contacts__detail-meta > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-xs, 4px) 0;
}

.app-contacts__detail-meta dt {
  font-weight: 600;
  color: var(--color-muted, var(--color-text));
  opacity: 0.75;
  font-size: var(--text-sm, 0.85rem);
}

.app-contacts__detail-meta dd {
  margin: 0;
  text-align: right;
  color: var(--color-text);
}

.app-contacts__detail-notes,
.app-contacts__detail-activity {
  padding-top: var(--space-md, 16px);
  border-top: 1px solid var(--color-border);
}

.app-contacts__detail-notes h3,
.app-contacts__detail-activity h3 {
  font-size: var(--text-sm, 0.85rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted, var(--color-text));
  margin: 0 0 var(--space-sm, 8px);
}

@media (max-width: 768px) {
  .app-contacts__sidebar,
  .app-contacts__list-pane,
  .app-contacts__detail {
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-contacts__group,
  .app-contacts__item {
    transition: none;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ apps.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Admin Apps — Chat, Kanban, Email app layouts
   Uses design tokens: --color-*, --spacing-*, --radius-*
   AI: sogorox-factory | Generated: 2026-05-14 | Reviewed: sogorox-qa (2026-05-14)
   ============================ */

/* ============================
   Chat App
   ============================ */
.app-chat {
  display: flex;
  height: calc(100vh - var(--header-desktop, 80px));
  overflow: hidden;
}

.app-chat__sidebar {
  width: 320px;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.app-chat__sidebar-header {
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-chat__search {
  padding: var(--spacing-3) var(--spacing-5);
}

.app-chat__search input {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-sm);
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}

.app-chat__contacts {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
}

.app-chat__contact {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-5);
  cursor: pointer;
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--color-border);
}

.app-chat__contact:hover { background: var(--color-surface-100, #f8fafc); }
.app-chat__contact--active { background: var(--color-primary-light); }

.app-chat__contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
  position: relative;
}

.app-chat__contact-info {
  flex: 1;
  min-width: 0;
}

.app-chat__contact-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.app-chat__contact-preview {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-chat__contact-time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.app-chat__contact-badge {
  min-width: 18px;
  height: 18px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Chat main area */
.app-chat__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-chat__main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3) var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
}

.app-chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.app-chat__msg {
  display: flex;
  gap: var(--spacing-3);
  max-width: 70%;
}

.app-chat__msg--sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.app-chat__msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  object-fit: cover;
}

.app-chat__msg-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-chat__msg-bubble {
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.5;
  background: var(--color-surface-100, #f1f5f9);
  color: var(--color-text);
}

.app-chat__msg--sent .app-chat__msg-bubble {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.app-chat__msg-time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.app-chat__msg--sent .app-chat__msg-time {
  text-align: right;
}

.app-chat__compose {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-5);
  border-top: 1px solid var(--color-border);
}

.app-chat__compose textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-sm);
  font-family: inherit;
  min-height: 40px;
  max-height: 120px;
  background: var(--color-surface);
  color: var(--color-text);
}

/* Chat sidebar title */
.app-chat__sidebar-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.app-chat__sidebar-close {
  display: none;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
}

.app-chat__sidebar-close:hover { background: var(--color-surface-100, #f1f5f9); }

/* Chat tabs */
.app-chat__tabs {
  display: flex;
  gap: var(--spacing-1);
  padding: 0 var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
}

.app-chat__tab {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.app-chat__tab:hover { color: var(--color-text); }

.app-chat__tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Contact status dot */
.app-chat__contact-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface-elevated, #fff);
}

.app-chat__contact-status--online { background: var(--color-chat-online, var(--color-success)); }
.app-chat__contact-status--away { background: var(--color-chat-away, var(--color-warning)); }
.app-chat__contact-status--busy { background: var(--color-error); }
.app-chat__contact-status--offline { background: var(--color-chat-offline, var(--color-surface-400, #94a3b8)); }

/* Contact header row (name + time) */
.app-chat__contact-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-2);
}

/* Date divider */
.app-chat__date-divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.app-chat__date-divider::before,
.app-chat__date-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* Message status (sent/seen) */
.app-chat__msg-status {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: right;
}

.app-chat__msg-status--seen { color: var(--color-info); }

/* File attachment (inside message) */
.app-chat__msg-file {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-surface-100, #f8fafc);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.app-chat__msg--sent .app-chat__msg-file {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
}

.app-chat__msg-file-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light, color-mix(in srgb, var(--color-primary), transparent 88%));
  border-radius: var(--radius-sm, 4px);
  flex-shrink: 0;
  font-size: 16px;
}

.app-chat__msg-file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-chat__msg-file-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-chat__msg--sent .app-chat__msg-file-name { color: var(--color-on-primary); }

.app-chat__msg-file-size {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.app-chat__msg-file-download {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.app-chat__msg-file-download:hover { background: var(--color-surface-200, #e2e8f0); color: var(--color-primary); }

/* Typing indicator */
.app-chat__typing {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: 0 var(--spacing-5) var(--spacing-2);
}

.app-chat__typing[hidden] { display: none; }

.app-chat__typing-dots {
  display: flex;
  gap: 4px;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-surface-100, #f1f5f9);
  border-radius: var(--radius-lg);
}

.app-chat__typing-dot {
  width: 6px;
  height: 6px;
  background: var(--color-text-muted);
  border-radius: var(--radius-full);
  animation: chatTyping 1.4s infinite;
}

.app-chat__typing-dot:nth-child(2) { animation-delay: 0.2s; }
.app-chat__typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes chatTyping {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* Main header user info */
.app-chat__main-user {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.app-chat__main-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.app-chat__main-avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.app-chat__main-info {
  display: flex;
  flex-direction: column;
}

.app-chat__main-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.app-chat__main-status {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Main header actions */
.app-chat__main-actions {
  display: flex;
  gap: var(--spacing-1);
}

.app-chat__main-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.app-chat__main-btn:hover { background: var(--color-surface-100, #f1f5f9); color: var(--color-text); }

/* Compose wrapper */
.app-chat__compose-wrapper {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-2);
  flex: 1;
}

.app-chat__compose-actions {
  display: flex;
  gap: var(--spacing-1);
  flex-shrink: 0;
}

.app-chat__compose-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.app-chat__compose-btn:hover { color: var(--color-primary); }

.app-chat__compose-field {
  flex: 1;
  min-width: 0;
}

.app-chat__compose-field textarea {
  width: 100%;
  resize: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-sm);
  font-family: inherit;
  min-height: 40px;
  max-height: 120px;
  background: var(--color-surface);
  color: var(--color-text);
}

.app-chat__compose-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 80%);
}

.app-chat__compose-send {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.app-chat__compose-send:hover { background: var(--color-primary-hover); }

/* Info panel (right sidebar) */
.app-chat__info {
  width: 320px;
  border-left: 1px solid var(--color-border);
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}

.app-chat__info.is-open { display: flex; }

.app-chat__info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
}

.app-chat__info-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.app-chat__info-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 18px;
}

.app-chat__info-close:hover { background: var(--color-surface-100, #f1f5f9); }

.app-chat__info-body {
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.app-chat__info-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-2);
}

.app-chat__info-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.app-chat__info-section-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.app-chat__info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.app-chat__info-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}

.app-chat__info-item-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.app-chat__info-item-value {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.app-chat__info-media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-2);
}

.app-chat__info-media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}

.app-chat__info-media img:hover { opacity: 0.8; }

/* ============================
   Kanban Board
   ============================ */
.app-kanban {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  overflow-x: auto;
  min-height: calc(100vh - var(--header-desktop, 80px) - 120px);
  align-items: flex-start;
}

.app-kanban__column {
  min-width: 280px;
  max-width: 320px;
  flex-shrink: 0;
  background: var(--color-surface-100, #f8fafc);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}

.app-kanban__column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3) var(--spacing-4);
}

.app-kanban__column-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.app-kanban__column-count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-200, #e2e8f0);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}

.app-kanban__column-actions {
  display: flex;
  gap: var(--spacing-1);
}

.app-kanban__cards {
  flex: 1;
  padding: 0 var(--spacing-3) var(--spacing-3);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  min-height: 40px;
}

.app-kanban__card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-3);
  cursor: grab;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.app-kanban__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.app-kanban__card.is-dragging {
  opacity: 0.5;
  transform: rotate(3deg);
}

.app-kanban__card-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--spacing-2);
}

.app-kanban__card-labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-2);
}

.app-kanban__card-label {
  height: 4px;
  width: 32px;
  border-radius: var(--radius-full);
}

.app-kanban__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-kanban__card-assignees {
  display: flex;
}

.app-kanban__card-assignee {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface-elevated);
  object-fit: cover;
  margin-left: -6px;
}

.app-kanban__card-assignee:first-child { margin-left: 0; }

.app-kanban__card-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.app-kanban__add-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  padding: var(--spacing-2);
  margin: 0 var(--spacing-3) var(--spacing-3);
  background: none;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

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

/* Kanban header */
.app-kanban__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.app-kanban__header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.app-kanban__header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.app-kanban__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.app-kanban__members {
  display: flex;
  align-items: center;
}

.app-kanban__member {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface-elevated);
  object-fit: cover;
  margin-left: -8px;
}

.app-kanban__member:first-child { margin-left: 0; }

.app-kanban__member-add {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 2px dashed var(--color-border);
  background: var(--color-surface-elevated);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -8px;
  font-size: 14px;
}

.app-kanban__member-add:hover { border-color: var(--color-primary); color: var(--color-primary); }

.app-kanban__filter-btn,
.app-kanban__add-task-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition-fast);
}

.app-kanban__filter-btn {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.app-kanban__filter-btn:hover { background: var(--color-surface-100, #f1f5f9); }

.app-kanban__add-task-btn {
  background: var(--color-primary);
  border: none;
  color: var(--color-on-primary);
}

.app-kanban__add-task-btn:hover { background: var(--color-primary-hover); }

/* Column status dot */
.app-kanban__column-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Column button */
.app-kanban__column-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 14px;
  transition: background var(--transition-fast);
}

.app-kanban__column-btn:hover { background: var(--color-surface-200, #e2e8f0); }

/* Drag-over state */
.app-kanban__cards.is-drag-over {
  background: color-mix(in srgb, var(--color-primary), transparent 95%);
  border-radius: var(--radius-md);
}

/* Card priority border */
.app-kanban__card--high { border-left: 3px solid var(--color-priority-urgent, var(--color-error)); }
.app-kanban__card--medium { border-left: 3px solid var(--color-priority-medium, var(--color-info)); }
.app-kanban__card--low { border-left: 3px solid var(--color-priority-low, var(--color-surface-400, #94a3b8)); }

/* Card description */
.app-kanban__card-description {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card image */
.app-kanban__card-image {
  width: 100%;
  border-radius: var(--radius-sm, 4px);
  margin-bottom: var(--spacing-2);
}

/* Card progress */
.app-kanban__card-progress { margin-bottom: var(--spacing-2); }

.app-kanban__card-progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-1);
}

.app-kanban__card-progress-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.app-kanban__card-progress-value {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
}

.app-kanban__card-progress-bar {
  height: 4px;
  background: var(--color-surface-200, #e2e8f0);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.app-kanban__card-progress-fill {
  height: 100%;
  background: var(--color-success);
  border-radius: var(--radius-full);
}

/* Card checklist */
.app-kanban__card-checklist {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.app-kanban__card-checklist--complete { color: var(--color-success); }

/* Card due date */
.app-kanban__card-due-date {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--text-xs);
  padding: 2px var(--spacing-2);
  border-radius: var(--radius-sm, 4px);
  margin-bottom: var(--spacing-2);
  background: var(--color-surface-200, #e2e8f0);
  color: var(--color-text-muted);
}

.app-kanban__card-due-date--overdue { background: color-mix(in srgb, var(--color-error), transparent 85%); color: var(--color-error); }
.app-kanban__card-due-date--due-soon { background: color-mix(in srgb, var(--color-warning), transparent 85%); color: var(--color-warning); }
.app-kanban__card-due-date--on-track { background: color-mix(in srgb, var(--color-success), transparent 85%); color: var(--color-success); }

/* Card meta item */
.app-kanban__card-meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

/* Card footer border */
.app-kanban__card-footer {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-2);
  margin-top: var(--spacing-2);
}

/* Add column */
.app-kanban__add-column {
  flex: 0 0 280px;
  min-width: 280px;
  display: flex;
  align-items: flex-start;
  padding-top: var(--spacing-4);
}

.app-kanban__add-column-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background: none;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  justify-content: center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.app-kanban__add-column-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Task modal */
.app-kanban__task-modal {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 0;
  width: 560px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

.app-kanban__task-modal::backdrop { background: rgba(0, 0, 0, 0.4); }

.app-kanban__task-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.app-kanban__task-modal-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
}

.app-kanban__task-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 18px;
}

.app-kanban__task-modal-close:hover { background: var(--color-surface-100, #f1f5f9); }

.app-kanban__task-modal-body {
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.app-kanban__task-detail-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.app-kanban__task-detail-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.app-kanban__task-detail-input,
.app-kanban__task-detail-select,
.app-kanban__task-detail-textarea {
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface-elevated);
}

.app-kanban__task-detail-input:focus,
.app-kanban__task-detail-select:focus,
.app-kanban__task-detail-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 80%);
}

.app-kanban__task-detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3);
}

.app-kanban__task-detail-assignees {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.app-kanban__task-detail-labels {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.app-kanban__task-detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.app-kanban__task-detail-section-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.app-kanban__task-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  border-top: 1px solid var(--color-border);
}

.app-kanban__task-modal-btn {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--color-surface-elevated);
  color: var(--color-text);
  font-family: inherit;
}

.app-kanban__task-modal-btn:hover { background: var(--color-surface-100, #f8fafc); }

.app-kanban__task-modal-btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.app-kanban__task-modal-btn--primary:hover { opacity: 0.9; }

.app-kanban__task-modal-btn--danger {
  background: none;
  border-color: var(--color-error);
  color: var(--color-error);
  margin-right: auto;
}

.app-kanban__task-modal-btn--danger:hover { background: color-mix(in srgb, var(--color-error), transparent 92%); }

/* ============================
   Email App
   ============================ */
.app-email {
  display: flex;
  height: calc(100vh - var(--header-desktop, 80px));
  overflow: hidden;
}

.app-email__sidebar {
  width: 220px;
  border-right: 1px solid var(--color-border);
  padding: var(--spacing-4);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.app-email__compose-btn {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: var(--spacing-3);
  transition: background var(--transition-fast);
}

.app-email__compose-btn:hover { background: var(--color-primary-hover); }

.app-email__nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast);
  text-decoration: none;
  border: none;
  background: none;
  font-family: inherit;
  width: 100%;
  text-align: left;
}

.app-email__nav-item:hover { background: var(--color-surface-100, #f1f5f9); }
.app-email__nav-item--active { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }

.app-email__nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.app-email__nav-count {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Email list */
.app-email__list {
  width: 380px;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.app-email__list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.app-email__list-items {
  flex: 1;
  overflow-y: auto;
}

.app-email__item {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.app-email__item:hover { background: var(--color-surface-100, #f8fafc); }
.app-email__item--active { background: var(--color-primary-light); }
.app-email__item--unread .app-email__item-subject { font-weight: 600; }

.app-email__item-checkbox {
  margin-top: 2px;
  flex-shrink: 0;
}

.app-email__item-content {
  flex: 1;
  min-width: 0;
}

.app-email__item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}

.app-email__item-sender {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.app-email__item-time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.app-email__item-subject {
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-email__item-preview {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Email detail */
.app-email__detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-email__detail-header {
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
}

.app-email__detail-subject {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--spacing-2);
}

.app-email__detail-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.app-email__detail-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.app-email__detail-sender-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.app-email__detail-sender-email {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.app-email__detail-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-5);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text);
}

/* Email detail actions */
.app-email__detail-actions {
  display: flex;
  gap: var(--spacing-1);
}

/* Action button (shared by list + detail) */
.app-email__action-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.app-email__action-btn:hover { background: var(--color-surface-100, #f1f5f9); color: var(--color-text); }

/* List actions toolbar */
.app-email__list-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

/* Pagination */
.app-email__pagination {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.app-email__pagination-info {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.app-email__pagination-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
}

.app-email__pagination-btn:hover { background: var(--color-surface-100, #f1f5f9); }

/* Email item star */
.app-email__item-star {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  padding: 0;
}

.app-email__item-star:hover,
.app-email__item-star--active { color: var(--color-warning); }

/* Labels section */
.app-email__labels {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.app-email__labels-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--spacing-1);
}

.app-email__label-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm, 4px);
}

.app-email__label-item:hover { background: var(--color-surface-100, #f1f5f9); }

.app-email__label-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Attachments */
.app-email__attachments {
  padding: var(--spacing-4) var(--spacing-5);
  border-top: 1px solid var(--color-border);
}

.app-email__attachments[hidden] { display: none; }

.app-email__attachments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-3);
  font-size: var(--text-sm);
  font-weight: 600;
}

.app-email__attachments-download {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: inherit;
}

.app-email__attachments-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.app-email__attachment-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-surface-100, #f8fafc);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.app-email__attachment-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary), transparent 88%);
  border-radius: var(--radius-sm, 4px);
  flex-shrink: 0;
  font-size: 16px;
}

.app-email__attachment-info {
  flex: 1;
  min-width: 0;
}

.app-email__attachment-name {
  font-size: var(--text-sm);
  font-weight: 500;
  display: block;
}

.app-email__attachment-size {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.app-email__attachment-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
}

.app-email__attachment-btn:hover { background: var(--color-surface-200, #e2e8f0); color: var(--color-primary); }

/* Quick reply */
.app-email__quick-reply {
  display: flex;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-5);
  border-top: 1px solid var(--color-border);
}

.app-email__quick-reply textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
}

.app-email__quick-reply-send {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-end;
}

.app-email__quick-reply-send:hover { background: var(--color-primary-hover); }

/* Compose modal */
.app-email__compose-modal {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 0;
  width: 600px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

.app-email__compose-modal::backdrop { background: rgba(0, 0, 0, 0.4); }

.app-email__compose-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.app-email__compose-modal-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
}

.app-email__compose-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 18px;
}

.app-email__compose-modal-close:hover { background: var(--color-surface-100, #f1f5f9); }

.app-email__compose-form {
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.app-email__compose-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.app-email__compose-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.app-email__compose-input,
.app-email__compose-textarea {
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface-elevated);
}

.app-email__compose-input:focus,
.app-email__compose-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 80%);
}

.app-email__compose-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3) var(--spacing-4);
  border-top: 1px solid var(--color-border);
}

.app-email__compose-tools {
  display: flex;
  gap: var(--spacing-1);
}

.app-email__compose-tool {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
}

.app-email__compose-tool:hover { color: var(--color-primary); }

.app-email__compose-actions {
  display: flex;
  gap: var(--spacing-2);
}

.app-email__compose-btn-discard {
  padding: var(--spacing-2) var(--spacing-3);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit;
}

.app-email__compose-btn-discard:hover { background: var(--color-surface-100, #f1f5f9); }

.app-email__compose-btn-send {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-on-primary);
  cursor: pointer;
  font-family: inherit;
}

.app-email__compose-btn-send:hover { background: var(--color-primary-hover); }

/* ============================
   Dark Mode
   ============================ */
/* ============================
   Reduced Motion
   ============================ */
@media (prefers-reduced-motion: reduce) {
  .app-chat__contact,
  .app-chat__tab,
  .app-chat__main-btn,
  .app-chat__compose-btn,
  .app-chat__compose-send,
  .app-kanban__card,
  .app-kanban__add-card,
  .app-email__item,
  .app-email__nav-item,
  .app-email__compose-btn {
    transition: none;
  }
  .app-kanban__card:hover { transform: none; }
  .app-chat__typing-dot { animation: none; opacity: 0.5; }
}

/* ============================
   Responsive
   ============================ */
@media (max-width: 1024px) {
  .app-chat__info {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    background: var(--color-surface-elevated, #fff);
    box-shadow: var(--shadow-lg);
  }
}

@media (max-width: 768px) {
  .app-chat__sidebar {
    position: fixed;
    inset: 0;
    width: 100%;
    z-index: 10;
    background: var(--color-surface-elevated, #fff);
    transform: translateX(-100%);
    transition: transform 0.25s var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
  }
  .app-chat__sidebar.is-open { transform: translateX(0); }
  .app-chat__sidebar-close { display: flex; }
  .app-email__sidebar { display: none; }
  .app-email__list { width: 100%; }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ auth.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Auth Pages — Login & Signup
   Split layout with branded left panel and form right panel.
   AI: sogorox-factory | Generated: 2026-05-01 | Reviewed: sogorox-qa (2026-05-23)
   ============================ */

/* Auth pages: hide entire header — brand is in left panel */
body:has(.auth-page) {
  background: var(--color-primary);
  padding-top: 0 !important;
  scroll-padding-top: 0;
}

body:has(.auth-page) > header,
body:has(.auth-page) > .navbar,
body:has(.auth-page) > [class*="navbar"] {
  display: none !important;
}

.auth-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: auto;
  margin: 0 auto;
  max-width: 1100px;
  min-height: 560px;
  border-radius: var(--radius-xl, 16px);
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 64px);
}

.auth-page__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 48px 40px;
  background: color-mix(in srgb, var(--color-primary) 8%, #fff);
  color: var(--color-primary);
  overflow: hidden;
}

.auth-page__left-bg {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-primary) 6%, #fff);
  z-index: 0;
}

.auth-page__left-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  max-width: 380px;
  width: 100%;
  gap: var(--spacing-6);
}

.auth-page__brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  text-decoration: none;
  color: var(--color-text);
  margin-bottom: 0;
}

.auth-page__logo {
  border-radius: var(--radius-md);
}

.auth-page__brand-name {
  font-family: var(--font-heading);
  font-size: var(--fluid-h5);
  font-weight: 700;
}

.auth-page__left-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.auth-page__headline {
  font-family: var(--font-heading);
  font-size: var(--fluid-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0;
}

.auth-page__tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 36ch;
  margin: 0;
}

.auth-page__features {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-top: var(--spacing-2);
}

.auth-page__feature {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.auth-page__quote {
  margin: 0;
  padding-top: var(--spacing-6);
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.auth-page__quote-text {
  font-size: var(--text-base);
  font-family: var(--font-heading);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: var(--spacing-4);
  color: var(--color-text-muted);
}

.auth-page__quote-attribution {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-top: var(--spacing-4);
}

.auth-page__quote-author {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.auth-page__quote-role {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* ---- Right Panel (Form) ---- */
.auth-page__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-10) var(--spacing-8);
  background: #fff;
  overflow-y: auto;
  position: relative;
}

.auth-form-wrap {
  width: 100%;
  max-width: 26rem;
}

/* ---- Auth Mini Footer ---- */
.auth-mini-footer {
  position: absolute;
  bottom: var(--spacing-4);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.auth-mini-footer a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.auth-mini-footer a:hover {
  color: var(--color-primary);
}

.auth-form-wrap__header {
  margin-bottom: var(--spacing-6);
}

.auth-form-wrap__logo-mobile {
  display: none;
  margin-bottom: var(--spacing-4);
}

.auth-form-wrap__title {
  font-family: var(--font-heading);
  font-size: var(--fluid-h3);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-2);
}

.auth-form-wrap__subtitle {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* ---- Social Login Buttons ---- */
.auth-social-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  min-height: 48px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.auth-social-btn:hover {
  border-color: var(--color-text-muted);
  background: var(--color-surface-elevated, var(--color-surface));
}

.auth-social-btn__icon {
  flex-shrink: 0;
}

/* ---- Divider ---- */
.auth-form-wrap__divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.auth-form-wrap__divider::before,
.auth-form-wrap__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border-strong, var(--color-border));
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
  outline: none;
}

/* ---- Form ---- */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.auth-form__link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.auth-form__link:hover {
  text-decoration: underline;
}

.auth-form__forgot {
  display: inline-block;
  text-align: right;
  font-size: var(--text-xs);
  color: var(--color-primary);
  text-decoration: none;
}

.auth-form__forgot:hover {
  text-decoration: underline;
}

/* ---- Checkbox / Remember Me ---- */
.auth-form__remember {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}

.auth-form__remember input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  position: relative;
}

.auth-form__remember input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.auth-form__remember input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.auth-form__remember input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.auth-form__remember span {
  line-height: 1.4;
}

.auth-form__submit {
  margin-top: var(--spacing-2);
}

/* ---- Footer ---- */
.auth-form-wrap__footer {
  text-align: center;
  margin-top: var(--spacing-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.auth-form-wrap__footer a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.auth-form-wrap__footer a:hover {
  text-decoration: underline;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .auth-page {
    grid-template-columns: 1fr;
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
  .auth-page__left {
    display: none;
  }
  .auth-form-wrap__logo-mobile {
    display: block;
  }
}

/* ---- Dark Mode ---- */

@media (prefers-reduced-motion: reduce) {
  .auth-social-btn { transition: none; }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ avatar.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* Sogorox Factory — Avatar / Avatar Group (Level 1 Skeleton용)
   Sizes, group overlap, status dot, initials fallback.
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14) */

/* ============================
   Base Avatar
   ============================ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-surface);
  border: 2px solid var(--color-background);
  flex-shrink: 0;
  position: relative;
}

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

/* ---- Initials fallback ---- */
.avatar__initials {
  font-weight: 600;
  color: var(--color-on-primary, #fff);
  background: var(--color-primary);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

/* ============================
   Sizes
   ============================ */
.avatar--xs { width: 24px; height: 24px; font-size: var(--text-xs); }
.avatar--sm { width: 32px; height: 32px; font-size: var(--text-xs); }
.avatar--md { width: 40px; height: 40px; font-size: var(--text-sm); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--text-base); }
.avatar--xl { width: 80px; height: 80px; font-size: var(--text-xl); }
.avatar--2xl { width: 120px; height: 120px; font-size: var(--text-3xl); }

/* ============================
   Status Indicator Dot
   ============================ */
.avatar__status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25%;
  height: 25%;
  min-width: 8px;
  min-height: 8px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-background);
}

.avatar__status--online  { background: var(--color-success); }
.avatar__status--offline { background: var(--color-text-disabled); }
.avatar__status--busy    { background: var(--color-error); }
.avatar__status--away    { background: var(--color-warning); }

/* ============================
   Avatar Group (overlapping stack)
   ============================ */
.avatar-group {
  display: flex;
  align-items: center;
}

.avatar-group .avatar {
  margin-left: -8px;
  transition: transform var(--transition-fast);
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}

.avatar-group .avatar:hover {
  transform: translateY(-2px);
  z-index: 1;
}

/* ---- Overflow counter ---- */
.avatar-group__overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 2px solid var(--color-background);
  margin-left: -8px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ============================
   Ring (highlight / selection)
   ============================ */
.avatar--ring {
  box-shadow: 0 0 0 3px var(--color-primary);
}

/* ============================
   Dark Mode
   ============================ */

/* ============================
   Reduced Motion
   ============================ */
@media (prefers-reduced-motion: reduce) {
  .avatar-group .avatar {
    transition: none;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ badge.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Badge
   Inline status indicators and labels
   Uses design tokens: --color-*, --spacing-*, --radius-*, --text-*
   ============================ */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-full);
  vertical-align: middle;
  background: color-mix(in srgb, var(--color-primary), transparent 85%);
  color: var(--color-primary-hover, #1d4ed8);
}

/* ---- Color Variants ---- */
.badge--primary {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.badge--success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.badge--warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.badge--error {
  background: var(--color-error-light);
  color: var(--color-error);
}

.badge--info {
  background: var(--color-info-light);
  color: var(--color-info);
}

/* ---- Outline Variant ---- */
.badge--outline {
  background: transparent;
  border: 1px solid currentColor;
}

/* ---- Dot Indicator ---- */
.badge--dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  padding: 0;
  border-radius: var(--radius-full);
  font-size: 0;
  line-height: 0;
}

.badge--dot.badge--primary { background: var(--color-primary); }
.badge--dot.badge--success { background: var(--color-success); }
.badge--dot.badge--warning { background: var(--color-warning); }
.badge--dot.badge--error   { background: var(--color-error); }
.badge--dot.badge--info    { background: var(--color-info); }

/* ---- Soft variants (lighter bg via color-mix) ---- */
.badge--soft-primary { background: color-mix(in srgb, var(--color-primary), transparent 85%); color: var(--color-primary); }
.badge--soft-success { background: color-mix(in srgb, var(--color-success), transparent 85%); color: var(--color-success); }
.badge--soft-warning { background: color-mix(in srgb, var(--color-warning), transparent 85%); color: var(--color-warning); }
.badge--soft-error   { background: color-mix(in srgb, var(--color-error), transparent 85%); color: var(--color-error); }
.badge--soft-info    { background: color-mix(in srgb, var(--color-info), transparent 85%); color: var(--color-info); }

/* ---- Size variants ---- */
.badge--sm { padding: 0.125rem var(--spacing-1-5); font-size: 0.625rem; }
.badge--md { padding: var(--spacing-0-5) var(--spacing-2); font-size: var(--text-xs); }
.badge--lg { padding: var(--spacing-1) var(--spacing-3); font-size: var(--text-sm); }

/* ---- Count bubble (nav/bell) ---- */
.badge--count {
  min-width: 20px;
  height: 20px;
  padding: 0 var(--spacing-1);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* ---- Pulse animation (live/online) ---- */
.badge--pulse {
  position: relative;
}

.badge--pulse::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: inherit;
  opacity: 0.6;
  animation: badge-pulse 1.5s ease-out infinite;
}

@keyframes badge-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ---- Dismissible badge (tag input) ---- */
.badge--dismissible {
  gap: var(--spacing-1);
}

.badge__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.6;
  color: currentColor;
  border-radius: var(--radius-full);
  transition: opacity var(--transition-fast);
}

.badge__close:hover { opacity: 1; }

/* ---- Dark mode ---- */

@media (prefers-reduced-motion: reduce) {
  .badge--pulse::before { animation: none; }
  .badge__close { transition: none; }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ bento-grid.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Bento Grid — Apple-style modular grid layout
   Uses design tokens: --bento-gap, --bento-radius, --bento-padding
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §0-1
   ============================ */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--bento-gap, 16px);
  padding: var(--bento-padding, 20px);
}

/* Named size variants */
.bento-standard {
  border-radius: var(--bento-radius, 16px);
  background: var(--color-surface);
  padding: var(--bento-padding, 20px);
  overflow: hidden;
}

.bento-wide {
  grid-column: span 2;
  border-radius: var(--bento-radius, 16px);
  background: var(--color-surface);
  padding: var(--bento-padding, 20px);
  overflow: hidden;
}

.bento-tall {
  grid-row: span 2;
  border-radius: var(--bento-radius, 16px);
  background: var(--color-surface);
  padding: var(--bento-padding, 20px);
  overflow: hidden;
}

.bento-featured {
  grid-column: span 2;
  grid-row: span 2;
  border-radius: var(--bento-radius, 16px);
  background: var(--color-surface);
  padding: var(--bento-padding, 20px);
  overflow: hidden;
}

/* Hover elevation */
.bento-standard,
.bento-wide,
.bento-tall,
.bento-featured {
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.bento-standard:hover,
.bento-wide:hover,
.bento-tall:hover,
.bento-featured:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Mobile: single column stack */
@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-wide,
  .bento-tall,
  .bento-featured {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* AI: sogorox-factory | Generated: 2026-05-14 | Reviewed: sogorox-qa (2026-05-14) */
@media (prefers-reduced-motion: reduce) {
  .bento-standard,
  .bento-wide,
  .bento-tall,
  .bento-featured { transition: none; }
  .bento-standard:hover,
  .bento-wide:hover,
  .bento-tall:hover,
  .bento-featured:hover { transform: none; }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ blog.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer components {
/* ---- Blog Layout ---- */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: var(--spacing-8);
  align-items: start;
}

/* ---- Blog Featured ---- */
.blog-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-6);
  align-items: center;
  margin-bottom: var(--spacing-8);
  padding: var(--spacing-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.blog-featured__image {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 16/10;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}

.blog-featured__image svg,
.blog-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-featured__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.blog-featured__title {
  font-family: var(--font-heading);
  font-size: var(--fluid-h3);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.blog-featured__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.blog-featured__title a:hover,
.blog-featured__title a:focus-visible {
  color: var(--color-primary);
}

.blog-featured__excerpt {
  color: var(--color-text-muted, color-mix(in srgb, var(--color-text) 65%, transparent));
  line-height: 1.6;
}

.blog-featured__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: 0.8125rem;
  color: var(--color-text-muted, color-mix(in srgb, var(--color-text) 50%, transparent));
}

.blog-featured__author {
  font-weight: 500;
  color: var(--color-text);
}

/* ---- Blog Grid ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--spacing-6);
}

.blog-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* ---- Blog Card ---- */
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: transform var(--smooth-motion), box-shadow var(--smooth-motion);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.blog-card__thumb {
  display: block;
  width: calc(100% + 2px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
  margin: -1px -1px 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.blog-card__thumb svg,
.blog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card__body {
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2);
  flex: 1;
  text-align: left;
}

.blog-card__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.blog-card__title a:hover,
.blog-card__title a:focus-visible {
  color: var(--color-primary);
}

.blog-card__excerpt {
  font-size: 0.875rem;
  color: var(--color-text-muted, color-mix(in srgb, var(--color-text) 65%, transparent));
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__date {
  font-size: 0.75rem;
  color: var(--color-text-muted, color-mix(in srgb, var(--color-text) 50%, transparent));
  margin-top: auto;
}

/* ---- Sidebar (Blog) ---- */
.blog-layout > .sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-5);
  width: 100% !important;
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-right: none !important;
  overflow: visible !important;
  background: transparent !important;
  align-self: start;
  top: auto !important;
}

.sidebar__section {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  padding: var(--spacing-5);
  height: auto !important;
  min-height: 0 !important;
}

.sidebar__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-3);
}

.sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.sidebar__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.875rem;
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  transition: color 0.2s ease-in-out;
}

.sidebar__list li:last-child .sidebar__link {
  border-bottom: none;
}

.sidebar__link:hover {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
  border-radius: var(--radius-sm);
}

.sidebar__count {
  font-size: 0.75rem;
  color: var(--color-text-muted, color-mix(in srgb, var(--color-text) 50%, transparent));
}

.sidebar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.sidebar__tags .badge {
  background: var(--color-surface-elevated, var(--color-surface));
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.sidebar__tags .badge:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

/* ---- Pagination ---- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-8);
}

.pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 var(--spacing-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  gap: var(--spacing-1);
  transition: all var(--smooth-motion);
}

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

.pagination__link--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.pagination__link--disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ---- Article Layout (blog detail) ---- */
.article-layout {
  max-width: 48rem;
  margin: 0 auto;
}

.article__header {
  padding-top: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.article__tags {
  display: flex;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}

.article__title {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: var(--spacing-4);
}

.article__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  font-size: 0.875rem;
  color: var(--color-text-muted, color-mix(in srgb, var(--color-text) 50%, transparent));
}

.article__author-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.article__author-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.article__author-name {
  font-weight: 500;
  color: var(--color-text);
}

.article__date,
.article__reading-time {
  font-size: 0.8125rem;
}

/* ---- Article Body ---- */
.article__body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.article__lead {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--color-text-muted, color-mix(in srgb, var(--color-text) 80%, transparent));
  margin-bottom: var(--spacing-6);
}

.article__hero-image,
.article__inline-image {
  width: 100%;
  border-radius: var(--radius-lg);
  margin: var(--spacing-6) 0;
}

.article__body h2,
.article__body h3 {
  font-family: var(--font-heading);
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-3);
}

.article__body p {
  margin-bottom: var(--spacing-4);
}

.article__body blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--spacing-4);
  margin: var(--spacing-6) 0;
  font-style: italic;
  color: var(--color-text-muted, color-mix(in srgb, var(--color-text) 70%, transparent));
}

.article__body code {
  font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', ui-monospace, monospace);
  background: color-mix(in srgb, var(--color-surface) 85%, var(--color-text));
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.875em;
}

.article__body pre {
  background: color-mix(in srgb, var(--color-text) 95%, var(--color-background));
  color: var(--color-background);
  padding: var(--spacing-5);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: var(--spacing-6) 0;
  line-height: 1.6;
}

.article__body pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: 0.875rem;
}

/* ---- Author Bio ---- */
.author-bio {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  margin: var(--spacing-8) 0;
}

.author-bio__avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-bio__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.author-bio__name {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text);
}

.author-bio__role {
  font-size: 0.8125rem;
  color: var(--color-primary);
  font-weight: 500;
}

.author-bio__desc {
  font-size: 0.875rem;
  color: var(--color-text-muted, color-mix(in srgb, var(--color-text) 65%, transparent));
  line-height: 1.5;
  margin-top: var(--spacing-1);
}

/* ---- Utility ---- */
.badge--small {
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
}

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

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }
  .blog-layout > .sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .blog-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .blog-featured {
    grid-template-columns: 1fr;
  }
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .blog-grid--3col {
    grid-template-columns: 1fr;
  }
  .blog-card__body {
    padding: var(--spacing-4);
  }
  .author-bio {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .pagination {
    flex-wrap: wrap;
    gap: var(--spacing-2);
  }
  .pagination__link {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── Blog Mobile Category Filter Bar ──────────────────────── */
.blog-filter-bar {
  display: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  gap: var(--spacing-2);
  padding-bottom: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.blog-filter-bar::-webkit-scrollbar { height: 0; }

.blog-filter-chip {
  flex-shrink: 0;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.blog-filter-chip:hover,
.blog-filter-chip--active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

@media (max-width: 768px) {
  .blog-filter-bar {
    display: flex;
  }
}

/* ── Blog Featured Card Mobile Enhancement ────────────────── */
.blog-featured {
  position: relative;
}

.blog-featured::before {
  display: none;
}

.blog-featured__image::after {
  content: "Featured";
  position: absolute;
  top: var(--spacing-3);
  left: var(--spacing-3);
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  z-index: 1;
  line-height: 1.5;
}

.blog-featured__content > .badge {
  width: fit-content;
}

@media (max-width: 768px) {
  .blog-featured {
    border: 2px solid var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  }
}

/* ── Blog Card Clickable Area ─────────────────────────────── */
.blog-card {
  position: relative;
  cursor: pointer;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.blog-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.blog-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ bottom-tabs.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Bottom Tab Bar (Mobile Navigation)
   Uses design tokens: --z-header, --touch-target-min, --color-*, --transition-*
   Pairs with: _shared/js/components/bottom-tab-bar.js
   ============================ */

.bottom-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header, 1000);
  display: none;
  background: var(--color-surface, #ffffff);
  border-top: 1px solid var(--color-border, #e2e8f0);
  padding: var(--spacing-1, 4px) 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
  transition: transform var(--transition-normal);
}

.bottom-tabs--hidden {
  transform: translateY(100%);
}

.bottom-tabs__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1, 4px);
  flex: 1;
  min-width: 0;
  min-height: var(--touch-target-min, 44px);
  padding: var(--spacing-1, 4px) var(--spacing-2, 8px);
  text-decoration: none;
  color: var(--color-text-muted, #64748b);
  transition: color var(--transition-fast);
}

.bottom-tabs__tab:hover,
.bottom-tabs__tab:focus-visible {
  color: var(--color-primary);
}

.bottom-tabs__tab--active,
.bottom-tabs__tab[aria-current="page"] {
  color: var(--color-primary);
}

.bottom-tabs__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.bottom-tabs__label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.bottom-tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
  .bottom-tabs {
    display: flex;
  }

  body.has-bottom-tab {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-tabs,
  .bottom-tabs__tab {
    transition: none;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ breadcrumb.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* Sogorox Factory — Breadcrumb Navigation (Level 1 Skeleton용)
   Chevron separators, mobile truncation, ARIA.
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14) */

/* ============================
   Breadcrumb Container
   ============================ */
.breadcrumb {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--spacing-3) 0;
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-1);
  list-style: none;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* ============================
   Breadcrumb Items
   ============================ */
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
}

.breadcrumb__link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.breadcrumb__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumb__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm, 2px);
}

/* Current page (last item) */
.breadcrumb__current {
  color: var(--color-text);
  font-weight: 500;
  white-space: nowrap;
}

/* ============================
   Separator (chevron)
   ============================ */
.breadcrumb__separator {
  display: inline-flex;
  color: var(--color-text-disabled);
  font-size: 0.75em;
  user-select: none;
}

.breadcrumb__separator::after {
  content: "/";
}

.breadcrumb--chevron .breadcrumb__separator::after {
  content: "›";
  font-size: 1.2em;
}

/* ============================
   Mobile Truncation
   ============================ */
@media (max-width: 768px) {
  .breadcrumb {
    font-size: var(--text-xs);
  }

  .breadcrumb__item--truncate {
    display: none;
  }

  .breadcrumb__ellipsis {
    display: inline-flex;
  }
}

.breadcrumb__ellipsis {
  display: none;
  color: var(--color-text-muted);
}

/* ============================
   Dark Mode
   ============================ */

/* ============================
   Reduced Motion
   ============================ */
@media (prefers-reduced-motion: reduce) {
  .breadcrumb__link {
    transition: none;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ button-states.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Button Micro-interaction States
   .btn--loading: spinning indicator
   .btn--success: checkmark + green transition
   .btn--error: shake animation
   Uses design tokens: --color-*, --transition-*, --radius-*
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §1-2
   ============================ */

/* ---- Loading state ---- */
.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--color-on-primary-faded);
  border-top-color: var(--color-on-primary);
  border-radius: 50%;
  animation: btn-spin var(--duration-entrance) linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Dark variant for light-bg buttons */
.btn--loading-dark::after {
  border-color: var(--color-on-dark-faded);
  border-top-color: var(--color-text);
}

/* ---- Success state ---- */
.btn--success {
  background: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: var(--color-on-primary) !important;
  transition: background var(--transition-normal), border-color var(--transition-normal);
  pointer-events: none;
}

.btn--success::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 8px;
  border-left: 2.5px solid var(--color-on-primary);
  border-bottom: 2.5px solid var(--color-on-primary);
  transform: rotate(-45deg);
  margin-right: var(--spacing-2);
  margin-bottom: 2px;
}

/* ---- Error state ---- */
.btn--error {
  background: var(--color-error) !important;
  border-color: var(--color-error) !important;
  color: var(--color-on-primary) !important;
  animation: btn-shake var(--duration-normal) ease-in-out;
}

@keyframes btn-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

/* ---- Pulse feedback (generic) ---- */
.btn--pulse {
  animation: btn-pulse 300ms ease-out;
}

@keyframes btn-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .btn--loading::after { animation: none; opacity: 0.6; }
  .btn--error { animation: none; }
  .btn--pulse { animation: none; }
}

}


/* ════════════════════════════════════════════════════════════ */
/* ═══ button.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Unified Button System
   .btn base + size (sm/md/lg) + style (primary/secondary/ghost/outline/destructive)
   Uses design tokens: --color-*, --spacing-*, --radius-*, --spring-motion
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14)
   ============================ */

/* ---- Base ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--btn-radius, var(--radius-full));
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--spring-motion),
              box-shadow var(--spring-motion);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Sizes — base first, then modifiers override ---- */
.btn,
.btn--md {
  padding: var(--spacing-3) var(--btn-padding-x-md, var(--spacing-6));
  font-size: var(--btn-font-size-md, var(--text-base));
  min-height: var(--btn-height-md, var(--touch-target-min));
}

.btn--sm {
  padding: var(--spacing-1-5) var(--btn-padding-x-sm, var(--spacing-3));
  font-size: var(--btn-font-size-sm, var(--text-sm));
  min-height: var(--btn-height-sm, 32px);
}

.btn--lg {
  padding: var(--spacing-4) var(--btn-padding-x-lg, var(--spacing-8));
  font-size: var(--btn-font-size-lg, var(--text-lg));
  min-height: var(--btn-height-lg, 52px);
}

/* ---- Styles ---- */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: none;
}

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

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

.btn--ghost {
  background: var(--color-on-primary-faded);
  color: var(--color-on-hero);
  border-color: var(--color-on-primary-faded);
  backdrop-filter: blur(4px);
}

.btn--ghost:hover {
  background: rgb(255 255 255 / 0.25);
}

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

.btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--destructive {
  background: var(--color-error);
  color: var(--color-on-primary);
}

.btn--destructive:hover {
  background: var(--color-error);
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ---- Icon button (square) ---- */
.btn--icon {
  padding: var(--spacing-2);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  border-radius: var(--radius-lg);
}

.btn--icon.btn--sm {
  padding: var(--spacing-1-5);
  min-width: 32px;
  min-height: 32px;
}

/* ---- Full width ---- */
.btn--block {
  display: flex;
  width: 100%;
}

/* ---- Icon inside button ---- */
.btn > svg {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

/* ---- Dark mode ---- */

/* ---- On-brand white buttons (for use on primary/brand backgrounds) ---- */
.btn--white {
  background: var(--color-on-primary, #fff);
  color: var(--color-primary);
  border-color: transparent;
}

.btn--white:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

.btn--outline-white {
  background: transparent;
  color: var(--color-on-primary, #fff);
  border: 2px solid rgb(255 255 255 / 0.5);
}

.btn--outline-white:hover {
  border-color: rgb(255 255 255 / 0.9);
  background: rgb(255 255 255 / 0.1);
}

/* ---- CTA (uses --color-cta tokens, falls back to primary) ---- */
.btn--cta {
  background: var(--color-cta, var(--color-primary));
  color: var(--color-on-cta, var(--color-on-primary, #fff));
}

.btn--cta:hover {
  background: var(--color-cta-hover, var(--color-primary-hover));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
  .btn:hover {
    transform: none;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ calendar.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Admin Calendar App — Month / Week / Day views + Event CRUD
   Uses design tokens: --color-*, --spacing-*, --radius-*
   AI: sogorox-factory | Generated: 2026-05-14 | Reviewed: sogorox-qa (2026-05-14)
   ============================ */

/* ============================================================
   LAYOUT SHELL
   ============================================================ */

.cal {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 600px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cal__sidebar {
  background: var(--color-surface-100, #f8fafc);
  border-right: 1px solid var(--color-border);
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.cal__main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================================
   SIDEBAR — Mini calendar + Calendars list
   ============================================================ */

.cal__mini {
  font-size: var(--text-xs);
}

.cal__mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.cal__mini-nav {
  display: flex;
  gap: 2px;
}

.cal__mini-nav-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 12px;
}

.cal__mini-nav-btn:hover { background: var(--color-surface-200, #e2e8f0); }

.cal__mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  text-align: center;
}

.cal__mini-dow {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 2px 0;
}

.cal__mini-day {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  color: var(--color-text);
}

.cal__mini-day:hover { background: var(--color-surface-200, #e2e8f0); }
.cal__mini-day--today { background: var(--color-primary); color: var(--color-on-primary); font-weight: 600; }
.cal__mini-day--selected { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.cal__mini-day--other { color: var(--color-text-muted); opacity: 0.4; }
.cal__mini-day--has-event::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-primary);
}

.cal__mini-day { position: relative; }

/* Calendar list */
.cal__calendars { margin-top: auto; }

.cal__calendars-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-2);
}

.cal__calendar-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1) 0;
  font-size: var(--text-sm);
  cursor: pointer;
}

.cal__calendar-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal__calendar-item input[type="checkbox"] {
  accent-color: var(--color-primary);
}

/* ============================================================
   HEADER — View toggle + Navigation
   ============================================================ */

.cal__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.cal__header-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  min-width: 200px;
}

.cal__header-nav {
  display: flex;
  gap: 2px;
}

.cal__header-nav-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text);
  cursor: pointer;
  font-size: 14px;
}

.cal__header-nav-btn:hover { background: var(--color-surface-100, #f8fafc); }

.cal__today-btn {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--text-sm);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
}

.cal__today-btn:hover { background: var(--color-surface-100, #f8fafc); }

.cal__view-tabs {
  display: flex;
  gap: 2px;
  margin-left: auto;
  background: var(--color-surface-100, #f1f5f9);
  border-radius: var(--radius-sm, 4px);
  padding: 2px;
}

.cal__view-tab {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--text-sm);
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
}

.cal__view-tab:hover { color: var(--color-text); }

.cal__view-tab--active {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  font-weight: 500;
}

/* ============================================================
   MONTH VIEW
   ============================================================ */

.cal__month {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto;
  overflow: hidden;
}

.cal__month-dow {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.cal__month-cell {
  min-height: 100px;
  padding: var(--spacing-1);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  overflow: hidden;
}

.cal__month-cell:nth-child(7n) { border-right: none; }

.cal__month-cell:hover { background: var(--color-surface-100, rgba(0,0,0,0.02)); }
.cal__month-cell--today { background: var(--color-primary-light, rgba(59,130,246,0.04)); }
.cal__month-cell--other { opacity: 0.4; }

.cal__month-date {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text);
  padding: 2px var(--spacing-1);
  margin-bottom: 2px;
}

.cal__month-cell--today .cal__month-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: 50%;
}

/* ============================================================
   WEEK VIEW
   ============================================================ */

.cal__week {
  flex: 1;
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  overflow-y: auto;
}

.cal__week-header {
  display: contents;
}

.cal__week-corner {
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}

.cal__week-day-header {
  text-align: center;
  padding: var(--spacing-2);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.cal__week-day-header:last-child { border-right: none; }

.cal__week-day-header--today {
  color: var(--color-primary);
}

.cal__week-day-num {
  display: block;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-top: 2px;
}

.cal__week-day-header--today .cal__week-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: 50%;
}

.cal__week-time {
  font-size: 10px;
  color: var(--color-text-muted);
  text-align: right;
  padding: 0 var(--spacing-2);
  border-right: 1px solid var(--color-border);
  height: 48px;
  line-height: 1;
  padding-top: 2px;
}

.cal__week-slot {
  height: 48px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border), transparent 50%);
  position: relative;
  cursor: pointer;
}

.cal__week-slot:last-child { border-right: none; }
.cal__week-slot:hover { background: var(--color-surface-100, rgba(0,0,0,0.02)); }

.cal__week-slot:nth-child(8n + 2) {
  border-bottom-color: var(--color-border);
}

/* ============================================================
   DAY VIEW
   ============================================================ */

.cal__day {
  flex: 1;
  display: grid;
  grid-template-columns: 60px 1fr;
  overflow-y: auto;
}

.cal__day-time {
  font-size: 10px;
  color: var(--color-text-muted);
  text-align: right;
  padding: 0 var(--spacing-2);
  border-right: 1px solid var(--color-border);
  height: 48px;
  line-height: 1;
  padding-top: 2px;
}

.cal__day-slot {
  height: 48px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border), transparent 50%);
  position: relative;
  cursor: pointer;
}

.cal__day-slot:hover { background: var(--color-surface-100, rgba(0,0,0,0.02)); }

.cal__day-slot:nth-child(2n) {
  border-bottom-color: var(--color-border);
}

/* Current time indicator */
.cal__now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-error);
  z-index: 2;
  pointer-events: none;
}

.cal__now-line::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-error);
}

/* ============================================================
   EVENTS
   ============================================================ */

.cal__event {
  display: block;
  padding: 1px var(--spacing-1);
  margin: 1px 2px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  border-radius: var(--radius-sm, 3px);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 3px solid;
  transition: opacity 0.1s ease;
}

.cal__event:hover { opacity: 0.85; }

.cal__event--primary {
  background: color-mix(in srgb, var(--color-primary), transparent 85%);
  border-left-color: var(--color-primary);
  color: var(--color-primary);
}

.cal__event--success {
  background: color-mix(in srgb, var(--color-success), transparent 85%);
  border-left-color: var(--color-success);
  color: var(--color-success);
}

.cal__event--warning {
  background: color-mix(in srgb, var(--color-warning), transparent 85%);
  border-left-color: var(--color-warning);
  color: var(--color-warning);
}

.cal__event--error {
  background: color-mix(in srgb, var(--color-error), transparent 85%);
  border-left-color: var(--color-error);
  color: var(--color-error);
}

.cal__event--info {
  background: color-mix(in srgb, var(--color-info), transparent 85%);
  border-left-color: var(--color-info);
  color: var(--color-info);
}

/* Timed events (week/day views) — absolute positioned */
.cal__event--timed {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 1;
  white-space: normal;
  overflow: hidden;
  border-radius: var(--radius-sm, 4px);
  padding: var(--spacing-1);
}

.cal__event-time {
  font-size: 10px;
  opacity: 0.8;
}

.cal__event-title {
  font-weight: 500;
}

/* More events indicator */
.cal__more {
  font-size: 10px;
  color: var(--color-text-muted);
  padding: 1px var(--spacing-1);
  cursor: pointer;
}

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

/* ============================================================
   EVENT MODAL / FORM
   ============================================================ */

.cal__modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: var(--z-modal, 1000);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal__modal {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  width: 420px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}

.cal__modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.cal__modal-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
}

.cal__modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 18px;
}

.cal__modal-close:hover { background: var(--color-surface-200, #e2e8f0); }

.cal__modal-body {
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.cal__form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.cal__form-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cal__form-input,
.cal__form-select,
.cal__form-textarea {
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface-elevated);
}

.cal__form-input:focus,
.cal__form-select:focus,
.cal__form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 80%);
}

.cal__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3);
}

.cal__form-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-sm);
}

.cal__form-check input[type="checkbox"] {
  accent-color: var(--color-primary);
}

.cal__color-options {
  display: flex;
  gap: var(--spacing-2);
}

.cal__color-opt {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}

.cal__color-opt--selected { border-color: var(--color-text); box-shadow: 0 0 0 2px var(--color-surface-elevated); }

.cal__color-opt--primary { background: var(--color-primary); }
.cal__color-opt--success { background: var(--color-success); }
.cal__color-opt--warning { background: var(--color-warning); }
.cal__color-opt--error { background: var(--color-error); }
.cal__color-opt--info { background: var(--color-info); }

.cal__modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  border-top: 1px solid var(--color-border);
}

.cal__modal-btn {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--color-surface-elevated);
  color: var(--color-text);
}

.cal__modal-btn:hover { background: var(--color-surface-100, #f8fafc); }

.cal__modal-btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.cal__modal-btn--primary:hover { opacity: 0.9; }

.cal__modal-btn--danger {
  background: none;
  border-color: var(--color-error);
  color: var(--color-error);
}

.cal__modal-btn--danger:hover { background: color-mix(in srgb, var(--color-error), transparent 92%); }

/* ============================================================
   EVENT POPOVER (quick view)
   ============================================================ */

.cal__popover {
  position: absolute;
  z-index: var(--z-popover, 500);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 280px;
  padding: var(--spacing-3);
}

.cal__popover-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-1);
}

.cal__popover-time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-2);
}

.cal__popover-desc {
  font-size: var(--text-xs);
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: var(--spacing-2);
}

.cal__popover-actions {
  display: flex;
  gap: var(--spacing-2);
  justify-content: flex-end;
}

.cal__popover-btn {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--text-xs);
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  color: var(--color-text-muted);
}

.cal__popover-btn:hover { background: var(--color-surface-200, #e2e8f0); color: var(--color-text); }
.cal__popover-btn--edit { color: var(--color-primary); }
.cal__popover-btn--delete { color: var(--color-error); }

/* ============================================================
   DRAG FEEDBACK
   ============================================================ */

.cal__drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: var(--z-modal, 1000);
  opacity: 0.7;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm, 4px);
  font-size: 11px;
  font-weight: 500;
}

.cal__month-cell--drag-over {
  background: color-mix(in srgb, var(--color-primary), transparent 90%) !important;
}

.cal__week-slot--drag-over,
.cal__day-slot--drag-over {
  background: color-mix(in srgb, var(--color-primary), transparent 90%) !important;
}

/* ============================================================
   DARK MODE
   ============================================================ */

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .cal {
    grid-template-columns: 1fr;
  }
  .cal__sidebar {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    padding: var(--spacing-2);
  }
  .cal__mini { display: none; }
  .cal__calendars { margin-top: 0; }
  .cal__month-cell { min-height: 60px; }
  .cal__event { font-size: 10px; padding: 0 2px; }
  .cal__header { flex-wrap: wrap; }
  .cal__header-title { min-width: auto; font-size: var(--text-base); }
}

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


/* ════════════════════════════════════════════════════════════ */
/* ═══ card.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* Sogorox Factory — Card Component Library (Level 1 Skeleton용)
   Variants: base, glass, elevated, stat, profile, pricing, image
   Uses design tokens: --color-*, --spacing-*, --radius-*, --shadow-*, --glass-*, --spring-motion
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14) */

/* ============================
   Base Card
   ============================ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--spring-motion), box-shadow var(--spring-motion);
}

.card__header {
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
}

.card__body {
  padding: var(--spacing-5);
}

.card__footer {
  padding: var(--spacing-4) var(--spacing-5);
  border-top: 1px solid var(--color-border);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0 0 var(--spacing-1) 0;
}

.card__description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* ============================
   Elevated Card (hover lift)
   CLAUDE.md: translateY(-6px) scale(1.01) + shadow-xl + spring-motion
   ============================ */
.card--elevated:hover,
.card--elevated:focus-within {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-xl);
}

/* ============================
   Glass Card (Glassmorphism)
   ============================ */
.card--glass {
  background: var(--glass-surface-light, rgba(255, 255, 255, 0.6));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-light, rgba(255, 255, 255, 0.3));
}

/* ============================
   Stat / KPI Card
   ============================ */
.card--stat {
  text-align: center;
  padding: var(--spacing-6);
}

.card--stat .card__number {
  font-family: var(--font-heading);
  font-size: var(--text-4xl, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary);
}

.card--stat .card__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--spacing-1);
}

/* Stat card — enhanced layout with icon + trend */
.card--stat-enhanced {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
  text-align: left;
}

.card__stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.card__stat-content {
  flex: 1;
  min-width: 0;
}

.card__stat-content .card__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.025em);
  margin-bottom: var(--spacing-1);
}

.card__stat-content .card__number {
  font-family: var(--font-heading);
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

.card__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: var(--spacing-1);
}

.card__trend--up { color: var(--color-success); }
.card__trend--down { color: var(--color-error); }
.card__trend--neutral { color: var(--color-text-muted); }

.card__trend-arrow {
  width: 12px;
  height: 12px;
}

/* Stat card semantic variants */
.card--stat-enhanced.card--success .card__stat-icon {
  background: var(--color-success-light);
  color: var(--color-success);
}

.card--stat-enhanced.card--warning .card__stat-icon {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.card--stat-enhanced.card--error .card__stat-icon {
  background: var(--color-error-light);
  color: var(--color-error);
}

.card--stat-enhanced.card--info .card__stat-icon {
  background: var(--color-info-light);
  color: var(--color-info);
}

/* ============================
   Profile / Team Card
   ============================ */
.card--profile {
  text-align: center;
  padding: var(--spacing-6);
}

.card--profile .card__avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin: 0 auto var(--spacing-3);
  border: 3px solid var(--color-primary);
}

.card--profile .card__name {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
}

.card--profile .card__role {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--spacing-1) 0 0;
}

/* ============================
   Image Card (top image + body)
   ============================ */
.card--image .card__body {
  padding: var(--spacing-4);
}

/* ============================
   Interactive Card (full-area clickable)
   Touch target: 44px minimum (WCAG 2.5.8)
   ============================ */
a.card,
.card[role="link"],
.card--interactive {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  min-height: var(--touch-target-min, 44px);
}

a.card:focus-visible,
.card--interactive:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ============================
   Container Query — Card Grid (DQ-3)
   Wrap card grids in .card-grid for intrinsic responsive layout.
   ============================ */
.card-grid {
  container-type: inline-size;
  container-name: card-grid;
}

@container card-grid (max-width: 400px) {
  .card--horizontal {
    flex-direction: column;
  }
  .card--horizontal .card__image {
    aspect-ratio: 16 / 9;
    max-height: 200px;
  }
}

@container card-grid (min-width: 600px) {
  .card--horizontal {
    display: flex;
    flex-direction: row;
  }
  .card--horizontal .card__image {
    width: 40%;
    flex-shrink: 0;
    aspect-ratio: 3 / 4;
    max-height: none;
  }
  .card--horizontal .card__body {
    flex: 1;
  }
}

/* ============================
   Dark Mode
   ============================ */

/* ============================
   Reduced Motion
   ============================ */
@media (prefers-reduced-motion: reduce) {
  .card,
  .card--elevated:hover {
    transition: none;
    transform: none;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ contact.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* Contact Section — Map Split & Form layouts
   AI: sogorox-factory | Generated: 2026-05-01 | Reviewed: sogorox-qa (2026-05-14) */

/* ── Shared Grid ────────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8);
  align-items: start;
}

@media (max-width: 767px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ── Info Column ────────────────────────────────────────────────────── */
.contact-info__heading {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  margin: 0 0 var(--spacing-2);
}

.contact-info__subtitle {
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-6);
}

.contact-items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
}

.contact-item__icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

.contact-item__label {
  font-weight: 600;
  font-size: var(--text-sm);
}

.contact-item__value {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── Map Placeholder ────────────────────────────────────────────────── */
.contact-map {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
}

.contact-map__placeholder {
  text-align: center;
  color: var(--color-text-muted);
}

.contact-map__placeholder p {
  font-size: var(--text-sm);
  margin: var(--spacing-2) 0 0;
}

/* ── Form Section (contact-form-section) ───────────────────────────── */
.contact-form-col {
  /* used alongside .contact-grid for left/right split with form */
}

.contact-form-col__heading {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  margin: 0 0 var(--spacing-2);
}

.contact-form-col__subtitle {
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-6);
}

/* ── Centered narrow form section ───────────────────────────────────── */
.contact-form-section {
  max-width: 640px;
  margin: 0 auto;
}

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

.contact-form .btn {
  align-self: flex-start;
}

/* AI: sogorox-factory | Generated: 2026-05-14 | Reviewed: sogorox-qa (2026-05-14) */
/* ── Contact Page Layout (contact.html) ──────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--spacing-8);
  align-items: start;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-6);
}

.contact-card {
  padding: var(--spacing-6);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.contact-card__icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  padding: var(--spacing-2);
}

.contact-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-text);
}

.contact-card__detail {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.contact-card__detail a {
  color: var(--color-primary);
  text-decoration: none;
}

.contact-card__detail a:hover { text-decoration: underline; }

.contact-card__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── Form Wrapper ──────────────────────────────────────────── */
.contact-form-wrapper {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  padding: var(--spacing-8);
}

.contact-form-wrapper__title {
  font-family: var(--font-heading);
  font-size: var(--fluid-h3);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-6);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

/* ── Sidebar (Map + Direct Channels) ──────────────────────── */
.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.contact-sidebar__title {
  font-family: var(--font-heading);
  font-size: var(--fluid-h4);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-4);
}

.contact-map-wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  padding: var(--spacing-6);
  background: var(--color-surface);
}

.contact-map {
  width: 100%;
  display: block;
  border-radius: var(--radius-lg);
}

.contact-map-wrapper iframe {
  width: 100%;
  aspect-ratio: 16/10;
  border: none;
  border-radius: var(--radius-lg);
}

.contact-map-wrapper--interactive {
  position: relative;
}

.contact-map-wrapper--interactive::after {
  content: "Tap to interact with map";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: transparent;
  pointer-events: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.contact-map-wrapper--interactive:not(.is-active) iframe {
  pointer-events: none;
}

.contact-map-wrapper--interactive:not(.is-active)::after {
  pointer-events: auto;
  cursor: pointer;
}

@media (hover: none) {
  .contact-map-wrapper--interactive:not(.is-active)::after {
    background: color-mix(in srgb, var(--color-surface) 40%, transparent);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
}

.contact-direct {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6);
}

.contact-direct__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-4);
}

.contact-direct__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.contact-direct__item:last-child { border-bottom: none; }

.contact-direct__item svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-direct__item strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.contact-direct__item span {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

@media (max-width: 1024px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .contact-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .contact-cards { grid-template-columns: 1fr; }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ cta.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* CTA Variants — cta-split & cta-download
   AI: sogorox-factory | Generated: 2026-05-01 | Reviewed: sogorox-qa (2026-05-14) */

/* ── CTA Split ──────────────────────────────────────────────────────── */
.cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--spacing-12, 3rem);
}

@media (max-width: 767px) {
  .cta-split { grid-template-columns: 1fr; }
}

.cta-split__content h2 {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  margin: 0 0 var(--spacing-3);
}

.cta-split__content p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed, 1.7);
  margin: 0 0 var(--spacing-6);
  max-width: 45ch;
}

.cta-split__benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.cta-split__benefit {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.cta-split__benefit-icon {
  flex-shrink: 0;
  color: var(--color-success);
}

.cta-split__media {
  /* container for image, form, or illustration */
}

.cta-split__media-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-disabled);
}

/* ── CTA Download ───────────────────────────────────────────────────── */
.cta-download {
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
  padding: var(--spacing-12) 0;
  text-align: center;
}

.cta-download h2 {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  margin: 0 0 var(--spacing-3);
}

.cta-download p {
  max-width: 45ch;
  margin: 0 auto var(--spacing-6);
  opacity: 0.9;
}

.cta-download__actions {
  display: flex;
  gap: var(--spacing-3);
  justify-content: center;
  flex-wrap: wrap;
}

.cta-download__btn {
  background: var(--color-text);
  color: var(--color-surface-elevated);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-5);
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-weight: 500;
  transition: opacity var(--transition-ui, 200ms);
}

.cta-download__btn:hover { opacity: 0.85; }

/* ── Dark Mode Overrides ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cta-download__btn { transition: none; }
}

/* ── Newsletter Section ────────────────────────────────────────────── */
.section--newsletter {
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
}

.section--brand {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.section--brand .newsletter__title {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  font-weight: 700;
  color: var(--color-on-primary);
  margin-bottom: var(--spacing-3);
}

.section--brand .newsletter__subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--spacing-6);
}

.newsletter--full {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}

.newsletter__form {
  display: flex;
  gap: var(--spacing-3);
  max-width: 520px;
  margin: 0 auto;
}

.newsletter__input {
  flex: 1;
  padding: var(--spacing-4) var(--spacing-5);
  font: inherit;
  font-size: var(--text-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text);
  background: var(--color-surface);
  min-height: 52px;
}

.newsletter__input--on-brand {
  background: rgba(255, 255, 255, 0.95);
  border-color: transparent;
  color: var(--color-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.newsletter__input--on-brand::placeholder {
  color: var(--color-text-muted);
}

.newsletter__input--on-brand:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.newsletter__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4) var(--spacing-7, 1.75rem);
  font-weight: 600;
  font-size: var(--text-base);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--smooth-motion), transform var(--smooth-motion), box-shadow var(--smooth-motion);
  min-height: 52px;
  white-space: nowrap;
}

.newsletter__btn--inverse {
  background: #fff;
  color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.newsletter__btn--inverse:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.newsletter__disclaimer {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--spacing-3);
}

@media (max-width: 640px) {
  .newsletter__form {
    flex-direction: column;
  }
  .newsletter__btn {
    width: 100%;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ footer.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Footer Utility
   Uses design tokens: --color-*, --spacing-*, --radius-*, --text-*
   Reference: T-14 App Shell, common-specs.md
   AI: sogorox-factory | Generated: 2026-04-14 | Reviewed: sogorox-qa (2026-05-14)
   ============================ */

.footer {
  width: 100%;
  padding: var(--spacing-16) 0 var(--spacing-8);
  padding-bottom: max(var(--spacing-8), env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
}

.footer__container {
  max-width: var(--container-xl, 1200px);
  margin: 0 auto;
  padding: 0 var(--spacing-6);
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--spacing-10);
}

/* Brand column */
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  text-decoration: none;
  color: var(--color-text);
}

.footer__logo-img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
}

.footer__logo-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
}

.footer__description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 30ch;
}

/* Link groups */
.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.footer__heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0 0 var(--spacing-2);
}

.footer__links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.footer__link {
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--color-primary);
}

/* Social icons */
.footer__social {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-top: var(--spacing-2);
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min, 44px);
  height: var(--touch-target-min, 44px);
  min-width: 44px;
  min-height: 44px;
  color: var(--color-text-muted);
  border-radius: var(--radius-lg);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.footer__social-icon {
  width: 20px;
  height: 20px;
}

/* Bottom bar — copyright + credits */
.footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer__year {
  /* Target for JS dynamic year update */
}

.footer__credit-link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__credit-link:hover,
.footer__credit-link:focus-visible {
  color: var(--color-primary);
}

/* ============================
   Dark Mode (manual toggle)
   ============================ */

/* ============================
   System dark mode fallback
   ============================ */
/* ============================
   Responsive
   ============================ */
@media (max-width: 1024px) {
  .footer__container {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-8);
  }
}

@media (max-width: 768px) {
  .footer__container {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--spacing-2);
    text-align: center;
  }
}

/* ── Variants ───────────────────────────────────────────────────────── */
.footer--dark {
  background: var(--color-text);
  color: var(--color-surface);
  border-top: none;
}

.footer--dark .footer__heading {
  color: var(--color-surface);
}

.footer--dark .footer__link {
  color: rgba(255, 255, 255, 0.65);
}

.footer--dark .footer__link:hover {
  color: #fff;
}

.footer--dark .footer__description {
  color: rgba(255, 255, 255, 0.55);
}

.footer--dark .footer__logo-text {
  color: #fff;
}

.footer--dark .footer__bottom {
  border-top-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.65);
}

.footer--dark .footer__social-link {
  color: rgba(255, 255, 255, 0.55);
}

.footer--dark .footer__social-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.footer--minimal {
  padding: var(--spacing-6) 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.footer--minimal .footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.footer--minimal .footer__brand-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.footer--minimal .footer__logo-img {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
}

.footer--minimal .footer__copyright {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer--minimal nav ul {
  display: flex;
  gap: var(--spacing-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ============================
   Focus visible (keyboard nav)
   ============================ */
.footer__link:focus-visible,
.footer__social-link:focus-visible,
.footer__credit-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ============================
   Footer Variants
   ============================ */

/* Newsletter hero — large newsletter CTA band */
.footer--newsletter-hero .footer__newsletter-band {
  padding: var(--spacing-12) 0;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-8);
}
.footer--newsletter-hero .footer__newsletter-headline {
  font-size: var(--fluid-h3);
  font-weight: 700;
  margin-bottom: var(--spacing-2);
}
.footer--newsletter-hero .footer__newsletter-sub {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-5);
}
.footer--newsletter-hero .footer__newsletter-form {
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  gap: var(--spacing-2);
}
.footer--newsletter-hero .footer__newsletter-input {
  flex: 1;
}

/* Stacked centered — all content centered, stacked vertically */
.footer--stacked {
  text-align: center;
}
.footer--stacked .footer__inner {
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
}
.footer--stacked .footer__brand--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}
.footer--stacked .footer__social--centered {
  display: flex;
  justify-content: center;
  gap: var(--spacing-4);
}
.footer--stacked .footer__links--centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-4) var(--spacing-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer--stacked .footer__bottom--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-6);
  margin-top: var(--spacing-2);
  width: 100%;
}

/* Enterprise — legal-heavy multi-column */
.footer--enterprise .footer__enterprise-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-6);
}
@media (max-width: 1023px) {
  .footer--enterprise .footer__enterprise-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 639px) {
  .footer--enterprise .footer__enterprise-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.footer--enterprise .footer__legal-row {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-4);
  margin-top: var(--spacing-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.footer--enterprise .footer__compliance {
  display: flex;
  gap: var(--spacing-3);
  align-items: center;
  flex-wrap: wrap;
}
.footer--enterprise .footer__compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Social first top row */
.footer__social-first-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  padding-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-6);
}
.footer__social--lg {
  gap: var(--spacing-4);
}
.footer__social-link--lg {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  transition: color var(--transition-ui, 200ms), border-color var(--transition-ui, 200ms);
}
.footer__social-link--lg:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.footer__nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2) var(--spacing-6);
  list-style: none;
  margin: 0 0 var(--spacing-6);
  padding: 0;
}

/* Two-col brand layout */
.footer__two-col {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--spacing-12);
  align-items: start;
}
@media (max-width: 767px) {
  .footer__two-col {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
  }
}
.footer__two-col-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-6);
}

/* Map layout */
.footer__map-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8);
  align-items: start;
}
@media (max-width: 767px) {
  .footer__map-layout {
    grid-template-columns: 1fr;
  }
}
.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}
.footer__contact-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  margin-top: 2px;
}
.footer__map-placeholder {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  color: var(--color-text-muted);
}
.footer__map-icon {
  width: 48px;
  height: 48px;
  color: var(--color-primary);
  opacity: 0.5;
}

/* App download buttons */
.footer__app-download {
  margin-bottom: var(--spacing-8);
}
.footer__app-heading {
  font-size: var(--fluid-h4);
  font-weight: 700;
  margin-bottom: var(--spacing-4);
  color: var(--color-surface);
}
.footer__app-buttons {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}
.footer__app-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-5);
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius-lg);
  color: var(--color-surface);
  text-decoration: none;
  transition: background var(--transition-ui, 200ms);
}
.footer__app-btn:hover {
  background: rgb(255 255 255 / 0.18);
}
.footer__app-btn-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.footer__app-btn-sub {
  display: block;
  font-size: var(--text-xs);
  opacity: 0.75;
}
.footer__app-btn-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Enterprise brand column */
.footer__enterprise-brand {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  padding-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-6);
}

@media (prefers-reduced-motion: reduce) {
  .footer__link { transition: none; }
  .footer__social-link { transition: none; }
  .footer__credit-link { transition: none; }
  .footer__social-link--lg { transition: none; }
  .footer__app-btn { transition: none; }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ forms-advanced.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Advanced Form Fields
   File upload dropzone, range slider, star rating, textarea counter
   Extends forms.css — requires design tokens
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14)
   ============================ */

/* ---- File Upload Dropzone ---- */
.form-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-8) var(--spacing-4);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  min-height: 160px;
  text-align: center;
}

.form-dropzone:hover,
.form-dropzone--dragover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.form-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.form-dropzone__icon {
  width: 40px;
  height: 40px;
  color: var(--color-text-muted);
}

.form-dropzone__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.form-dropzone__text strong {
  color: var(--color-primary);
}

.form-dropzone__hint {
  font-size: var(--text-xs);
  color: var(--color-text-disabled);
}

.form-dropzone__preview {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  margin-top: var(--spacing-3);
}

.form-dropzone__thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.form-dropzone__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form-dropzone__thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: var(--color-error);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-full);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Range Slider ---- */
.form-range {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.form-range__track {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
  outline: none;
  transition: background var(--transition-fast);
}

.form-range__track::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--spring-motion), box-shadow var(--spring-motion);
}

.form-range__track::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-md);
}

.form-range__track::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.form-range__track:focus-visible {
  box-shadow: var(--focus-ring);
}

.form-range__labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.form-range__value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-align: center;
}

/* ---- Star Rating ---- */
.form-stars {
  display: inline-flex;
  gap: var(--spacing-1);
  direction: rtl;
}

.form-stars input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.form-stars label {
  cursor: pointer;
  color: var(--color-border-strong);
  transition: color var(--transition-fast), transform var(--transition-fast);
  font-size: 0;
}

.form-stars label svg {
  width: 28px;
  height: 28px;
}

.form-stars input:checked ~ label,
.form-stars label:hover,
.form-stars label:hover ~ label {
  color: var(--color-warning);
}

.form-stars label:hover {
  transform: scale(1.15);
}

.form-stars input:focus-visible + label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Textarea with Character Counter ---- */
.form-textarea-wrapper {
  position: relative;
}

.form-textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: var(--spacing-3) var(--spacing-4);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.form-textarea-counter {
  position: absolute;
  bottom: var(--spacing-2);
  right: var(--spacing-3);
  font-size: var(--text-xs);
  color: var(--color-text-disabled);
  pointer-events: none;
}

.form-textarea-counter--warn {
  color: var(--color-warning);
  font-weight: 600;
}

.form-textarea-counter--over {
  color: var(--color-error);
  font-weight: 600;
}

/* ---- Number Stepper ---- */
.form-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.form-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  background: var(--color-surface);
  border: none;
  color: var(--color-text);
  font-size: var(--text-lg);
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;
}

.form-stepper__btn:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.form-stepper__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.form-stepper__btn:focus-visible {
  box-shadow: var(--focus-ring);
  z-index: 1;
}

.form-stepper__input {
  width: 56px;
  height: var(--touch-target-min);
  text-align: center;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface-elevated);
  -moz-appearance: textfield;
}

.form-stepper__input::-webkit-outer-spin-button,
.form-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- Dark mode ---- */
/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .form-range__track::-webkit-slider-thumb,
  .form-stars label {
    transition: none;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ forms.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Form Components
   Inputs, selects, checkboxes, toggles, floating labels
   Uses design tokens: --color-*, --spacing-*, --radius-*, --transition-*, --focus-ring
   ============================ */

/* ---- Form Group ---- */
.form-group {
  position: relative;
  margin-bottom: var(--spacing-5);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-1-5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

/* ---- Text Input & Select ---- */
.form-input,
.form-select {
  display: block;
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 40px;
}

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

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.form-input:disabled,
.form-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-surface);
}

/* Validation states */
.form-input:invalid:not(:placeholder-shown) {
  border-color: var(--color-error);
}

.form-input:invalid:not(:placeholder-shown):focus {
  box-shadow: var(--focus-ring-error);
}

.form-input:valid:not(:placeholder-shown) {
  border-color: var(--color-success);
}

/* JS-driven validation */
.form-group.has-error .form-input {
  border-color: var(--color-error);
}

.form-group.has-error .form-input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 20%, transparent);
}

.form-group.has-error .form-label {
  color: var(--color-error);
}

.form-error-message {
  font-size: 0.8125rem;
  color: var(--color-error);
  margin-top: var(--spacing-1);
}

.form-group.has-success .form-input {
  border-color: var(--color-success);
}

/* Select arrow */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-4) center;
  padding-right: var(--spacing-10);
}

/* ---- Floating Label ---- */
.form-group--floating {
  position: relative;
}

.form-group--floating .form-input {
  padding-top: var(--spacing-5);
  padding-bottom: var(--spacing-2);
}

.form-group--floating .form-label {
  position: absolute;
  top: 50%;
  left: var(--spacing-4);
  transform: translateY(-50%);
  margin-bottom: 0;
  pointer-events: none;
  color: var(--color-text-disabled);
  transition: transform var(--transition-fast), font-size var(--transition-fast), color var(--transition-fast);
  transform-origin: left center;
}

.form-group--floating .form-input:focus ~ .form-label,
.form-group--floating .form-input:not(:placeholder-shown) ~ .form-label {
  transform: translateY(-130%) scale(0.8);
  color: var(--color-primary);
}

/* ---- Checkbox & Radio ---- */
.form-checkbox,
.form-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text);
  min-height: var(--touch-target-min);
}

.form-checkbox input,
.form-radio input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.form-checkbox input:focus-visible,
.form-radio input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---- Toggle Switch ---- */
.form-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text);
  min-height: var(--touch-target-min);
}

.form-toggle__track {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.form-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--color-surface-elevated);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.form-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.form-toggle input:checked + .form-toggle__track {
  background: var(--color-primary);
}

.form-toggle input:checked + .form-toggle__track::after {
  transform: translateX(20px);
}

.form-toggle input:focus-visible + .form-toggle__track {
  box-shadow: var(--focus-ring);
}

/* ---- Hint & Error Text ---- */
.form-hint {
  display: block;
  margin-top: var(--spacing-1-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.form-error {
  display: block;
  margin-top: var(--spacing-1-5);
  font-size: var(--text-xs);
  color: var(--color-error);
  font-weight: 500;
}

/* ---- Dark mode ---- */

/* ── Form Row (2-column grid for side-by-side fields) ───────────────── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
}

.form-row--3col { grid-template-columns: repeat(3, 1fr); }
.form-row--4col { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .form-row--3col,
  .form-row--4col { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .form-row,
  .form-row--3col,
  .form-row--4col { grid-template-columns: 1fr; }
}

/* ── Fieldset / Legend ─────────────────────────────── */
.form-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.form-fieldset legend,
.form-legend {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  padding: 0 var(--spacing-2);
}

/* ── Required indicator ────────────────────────────── */
.form-label--required::after {
  content: " *";
  color: var(--color-error);
  font-weight: 400;
}

/* ── Help text (neutral, distinct from error) ──────── */
.form-help {
  display: block;
  margin-top: var(--spacing-1-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

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

/* ── Input Group (prefix / suffix) ─────────────────── */
.form-input-group {
  display: flex;
  align-items: stretch;
}

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

.form-input-group .form-input:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.form-input-group .form-input:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.form-input-group__addon {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

.form-input-group__addon:first-child {
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.form-input-group__addon:last-child {
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ── Readonly state ────────────────────────────────── */
.form-input[readonly] {
  background: var(--color-surface);
  border-style: dashed;
  cursor: default;
}

/* ── Form section divider ──────────────────────────── */
.form-section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-border);
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-5);
}

/* ── Form actions row ──────────────────────────────── */
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-border);
  margin-top: var(--spacing-6);
}

.form-actions--right {
  justify-content: flex-end;
}

.form-actions--between {
  justify-content: space-between;
}

/* ── Textarea ──────────────────────────────────────── */
.form-textarea {
  display: block;
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  resize: vertical;
  min-height: 120px;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

/* ── Input sizes ───────────────────────────────────── */
.form-input--sm { padding: var(--spacing-2) var(--spacing-3); font-size: var(--text-sm); min-height: 32px; }
.form-input--lg { padding: var(--spacing-4) var(--spacing-5); font-size: var(--text-lg); min-height: 48px; }

@media (prefers-reduced-motion: reduce) {
  .form-input,
  .form-select { transition: none; }
  .form-textarea { transition: none; }
  .form-group--floating .form-label { transition: none; }
  .form-toggle__track { transition: none; }
  .form-toggle__track::after { transition: none; }
}

/* ---- Input Wrap (for password toggle) ---- */
.form-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input-wrap .form-input {
  padding-right: 2.75rem;
}

.form-input-toggle {
  position: absolute;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  color: var(--color-text-muted, color-mix(in srgb, var(--color-text) 50%, transparent));
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.form-input-toggle:hover {
  color: var(--color-text);
}

.form-input-toggle:focus-visible {
  outline: var(--focus-ring);
}

/* ---- Required Asterisk ---- */
.form-required {
  color: var(--color-error, #ef4444);
  margin-left: 0.125rem;
}

/* ---- Hint Text ---- */
.form-hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted, color-mix(in srgb, var(--color-text) 50%, transparent));
  margin-top: var(--spacing-1);
}

/* ---- Form Row (inline fields) ---- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
}

/* ---- Form Submit / Full-width Button ---- */
.form-submit {
  margin-top: var(--spacing-2);
}

.btn--full {
  width: 100%;
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ glass.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Glassmorphism / Liquid Glass Utility
   Uses design tokens: --glass-surface-*, --glass-blur, --glass-border-*
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §1-3
   ============================ */

.glass {
  background: var(--glass-surface-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border-light);
  border-radius: var(--radius-xl);
}

.glass-light {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-xl);
}

.glass-dark {
  background: var(--glass-surface-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border-dark);
  border-radius: var(--radius-xl);
}

/* Fallback: no backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: var(--color-surface); border: 1px solid var(--color-border); }
  .glass-light { background: rgba(255, 255, 255, 0.95); border: 1px solid var(--color-border); }
  .glass-dark { background: var(--color-dark-surface); border: 1px solid var(--color-dark-border); }
}

/* Auto dark mode */
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ grid.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* Sogorox Factory — 공통 그리드 유틸리티 (Level 1 Skeleton용)
   5-Tier Breakpoint System (Mobile-First):
   XS: 0-480px | SM: 481-768px | MD: 769-1024px | LG: 1025-1280px | XL: 1281px+
   Reference: variables.css --bp-xs/sm/md/lg/xl */

.container {
  width: 100%;
  max-width: var(--container-max, 1200px);
  margin-inline: auto;
  padding-inline: clamp(var(--spacing-4), 5vw, var(--spacing-10));
}

/* ============================
   Grid — Mobile-First (base = 1 column)
   ============================ */

.grid {
  display: grid;
  gap: var(--spacing-4);
}

.grid-2,
.grid-3,
.grid-4 {
  grid-template-columns: 1fr;
}

.grid-auto {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* SM (481px+): 2-column for all multi-column grids */
@media (min-width: 481px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* LG (1025px+): full column count restored */
@media (min-width: 1025px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

/* XL (1281px+): container centering for ultra-wide */
@media (min-width: 1281px) {
  .container {
    max-width: var(--container-2xl, 1440px);
  }
}

/* ============================
   Flex Utilities
   ============================ */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

/* ============================
   Gap Utilities
   ============================ */

.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ hero.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Hero Section — 3 Variants (text-first, split, video-bg)
   Uses design tokens: --fluid-h1, --font-heading, --color-*, --spacing-*
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §0-4
   ============================ */

/* ---- Shared ---- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}

.hero--compact {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1rem, 2vw, 2rem);
}

.hero__container {
  position: relative;
  z-index: 1;
}

.hero__badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-4);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--fluid-h1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-bottom: var(--spacing-6);
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: var(--prose-max-width);
  margin-bottom: var(--spacing-8);
}

.hero__actions {
  display: flex;
  gap: var(--spacing-4);
  flex-wrap: wrap;
  margin-top: var(--spacing-2);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4) var(--spacing-8);
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  border-radius: var(--radius-full);
  min-height: 52px;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hero__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.hero__cta--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.hero__cta--primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.hero__cta--secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}

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

.hero__cta--ghost {
  background: var(--color-on-primary-faded);
  color: var(--color-on-hero);
  border: 1px solid var(--color-on-primary-faded);
  backdrop-filter: blur(4px);
}

.hero__cta--ghost:hover {
  background: rgb(255 255 255 / 0.25);
}

.hero__social-proof {
  margin-top: var(--spacing-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---- Variant: Text-First ---- */
.hero--text-first {
  text-align: center;
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}

.hero--text-first .hero__subtitle {
  margin-inline: auto;
}

.hero--text-first .hero__actions {
  justify-content: center;
}

/* ---- Variant: Split ---- */
.hero__container--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-12);
  align-items: center;
}

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

.hero__image {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: var(--radius-2xl);
  object-fit: cover;
}

/* ---- Variant: Video Background ---- */
.hero--video {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}

.hero__video-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    var(--hero-overlay-start, rgba(0, 0, 0, 0.5)) 0%,
    var(--hero-overlay-end, rgba(0, 0, 0, 0.3)) 100%
  );
  pointer-events: none;
}

.hero__video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--color-overlay), var(--color-dark-overlay));
}

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

.hero__container--centered .hero__subtitle {
  margin-inline: auto;
}

.hero__container--centered .hero__actions {
  justify-content: center;
}

.hero__title--light { color: var(--color-on-hero); }
.hero__subtitle--light { color: var(--color-on-hero-muted); }

/* ---- Tablet (769-1024px) ---- */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero {
    padding: var(--spacing-16) 0;
  }
  .hero__container--split {
    gap: var(--spacing-8);
    grid-template-columns: 1.2fr 0.8fr;
  }
  .hero__visual {
    max-width: 100%;
  }
  .hero__image {
    max-width: 400px;
  }
}

/* ---- Mobile (768px and below) ---- */
@media (max-width: 768px) {
  .hero {
    padding: var(--spacing-12) 0;
  }
  .hero--text-first {
    padding: var(--spacing-16) 0 var(--spacing-10);
  }
  .hero__container--split {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__container--split .hero__actions {
    justify-content: center;
  }
  .hero__visual {
    max-width: 300px;
    margin-inline: auto;
  }
  .hero--video {
    min-height: 60vh;
  }
  .hero__video {
    display: none;
  }
  .hero__video-wrapper {
    background-size: cover;
    background-position: center;
  }
}

/* ---- Mobile Small (480px and below) ---- */
@media (max-width: 480px) {
  .hero {
    padding: var(--spacing-10) 0;
  }
  .hero--text-first {
    padding: var(--spacing-12) 0 var(--spacing-8);
  }
  .hero__visual {
    max-width: 240px;
  }
  .hero__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ---- Dark mode ---- */
/* ============================
   Hero Variants
   ============================ */

/* Gradient centered — full-width gradient, centered content */
.hero--gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, var(--color-primary)) 100%);
  color: var(--color-on-primary);
}
.hero--gradient .hero__badge {
  background: rgb(255 255 255 / 0.2);
  color: var(--color-on-primary);
  border-color: rgb(255 255 255 / 0.3);
}
.hero--gradient .hero__container--centered {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.hero--gradient .hero__secondary-cta--light {
  color: var(--color-on-primary);
  border-color: rgb(255 255 255 / 0.4);
}
.hero--gradient .hero__secondary-cta--light:hover {
  background: rgb(255 255 255 / 0.12);
}

/* Dark dramatic — deep dark bg with radial glow */
.hero--dark {
  background: var(--color-text);
  color: var(--color-surface);
  position: relative;
  overflow: hidden;
}
.hero--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 50%, var(--color-primary) 0%, transparent 65%);
  opacity: 0.12;
  pointer-events: none;
}
.hero--dark .hero__subtitle {
  color: rgb(255 255 255 / 0.7);
}
.hero--dark .hero__badge {
  background: rgb(255 255 255 / 0.08);
  color: rgb(255 255 255 / 0.9);
  border-color: rgb(255 255 255 / 0.15);
}

/* Editorial minimal — newspaper-style typography */
.hero--editorial {
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 2px solid var(--color-text);
}
.hero--editorial .hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest, 0.12em);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-6);
}
.hero--editorial .hero__title {
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--spacing-6);
}
.hero--editorial .hero__editorial-divider {
  width: 60px;
  height: 4px;
  background: var(--color-primary);
  margin-bottom: var(--spacing-6);
}

/* Split reverse — media left, text right */
.hero__container--split-reverse {
  direction: rtl;
}
.hero__container--split-reverse > * {
  direction: ltr;
}

/* Announcement bar variant */
.hero--announcement .hero__announcement-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--spacing-8);
  border-radius: var(--radius-full);
}
.hero--announcement .hero__announcement-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.hero--announcement .hero__announcement-link {
  color: var(--color-on-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: var(--spacing-1);
}

/* Interactive demo frame */
.hero__demo-frame {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.hero__demo-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.hero__demo-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.hero__demo-dot--red { background: var(--color-error); }
.hero__demo-dot--yellow { background: var(--color-warning); }
.hero__demo-dot--green { background: var(--color-success); }
.hero__demo-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 280px;
}
.hero__demo-sidebar {
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}
.hero__demo-content {
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
.hero__demo-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  height: 64px;
}
.hero__demo-card--wide {
  height: 120px;
}

/* Image placeholder SVG in hero media */
.hero__img-placeholder {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta { transition: none; }
  .hero__cta--primary:hover { transform: none; }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ image-placeholder.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* Image placeholder — visible fallback when no real image is available */

.image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
  background-color: var(--color-surface, #f8fafc);
  border: 1px dashed var(--color-border, #e2e8f0);
  border-radius: var(--radius-card, 0.75rem);
  color: var(--color-text-muted, #94a3b8);
  overflow: hidden;
  position: relative;
}

.image--placeholder::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='40' height='40' rx='4'/%3E%3Ccircle cx='16' cy='16' r='4'/%3E%3Cpath d='M44 30l-10-10L8 44'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
}

.image--placeholder[data-ratio="16/9"] { aspect-ratio: 16 / 9; min-height: auto; }
.image--placeholder[data-ratio="4/3"]  { aspect-ratio: 4 / 3;  min-height: auto; }
.image--placeholder[data-ratio="1/1"]  { aspect-ratio: 1 / 1;  min-height: auto; }

.fnb-card__media .image--placeholder,
.blog-card__media .image--placeholder,
.about-story__visual .image--placeholder {
  min-height: 0;
  height: 100%;
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ layout.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* Sogorox Factory — 공통 레이아웃 유틸리티 (Level 1 Skeleton용)
   모든 boilerplate/page 스니펫이 참조하는 기본 구조 CSS.
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14) */

/* ============================
   Skip Navigation (WCAG)
   ============================ */
.skip-link,
.skip-nav {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: var(--z-tooltip, 500);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus,
.skip-nav:focus {
  left: var(--spacing-4);
  top: var(--spacing-2);
  width: auto;
  height: auto;
  overflow: visible;
}

/* ============================
   Body — Flex Column + Header Clearance
   ============================ */
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding-top: var(--header-desktop, 80px);
}

body > main,
body > [role="main"],
body > #main-content,
#main-content {
  flex: 1 0 auto;
}

body > footer,
body > .footer {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  body {
    padding-top: var(--header-mobile, 56px);
  }
}

@media (max-width: 768px) {
  .page {
    min-height: calc(100vh - var(--header-mobile, 56px));
  }
}

/* ============================
   Dashboard Layout (Sidebar + Main)
   ============================ */
.layout-dashboard {
  display: flex;
  min-height: calc(100vh - var(--header-desktop, 80px));
}

.layout-dashboard__sidebar {
  width: var(--sidebar-expanded, 240px);
  flex-shrink: 0;
  transition: width var(--smooth-motion, 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94));
}

.layout-dashboard__sidebar.sidebar--collapsed {
  width: var(--sidebar-collapsed, 64px);
}

.layout-dashboard__content {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-6);
  background: var(--color-background);
}

@media (max-width: 768px) {
  .layout-dashboard {
    flex-direction: column;
    min-height: calc(100vh - var(--header-mobile, 56px));
  }

  .layout-dashboard__sidebar {
    width: 100%;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay, 200);
    transform: translateX(-100%);
    transition: transform var(--smooth-motion, 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94));
  }

  .layout-dashboard__sidebar.sidebar--expanded {
    transform: translateX(0);
  }

  .layout-dashboard__content {
    padding: var(--spacing-4);
  }
}

/* ============================
   Section Spacing
   ============================ */
.section {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.section--sm {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.section--lg {
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

[class*="section--"] {
  padding-block: var(--section-padding, clamp(2rem, 3vw, 2.75rem));
}

@media (max-width: 640px) {
  .section { padding-block: clamp(1.5rem, 3vw, 2rem); }
  .section--lg { padding-block: clamp(2rem, 3vw, 2.5rem); }
  [class*="section--"] { padding-block: var(--section-padding, clamp(1.25rem, 3vw, 2rem)); }
}

/* ============================
   Section Color Variants
   ============================ */
.section--surface {
  background: var(--color-surface);
}

.section--alt {
  background: var(--color-background);
}

.section--brand {
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
}

/* ============================
   Bottom Tab Bar Clearance (PWA mobile)
   ============================ */
@media (max-width: 768px) {
  body.has-bottom-tab {
    padding-bottom: calc(var(--bottom-tab-height, 56px) + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  }
}

/* ============================
   Prose Container (readable line length)
   ============================ */
.prose {
  max-width: var(--prose-max-width, 65ch);
  margin-inline: auto;
}

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


/* ════════════════════════════════════════════════════════════ */
/* ═══ logo-cloud.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* Logo Cloud — Trusted-by partner/client logos
   AI: sogorox-factory | Generated: 2026-05-01 | Reviewed: sogorox-qa (2026-05-14) */

.logo-strip {
  padding: var(--spacing-8) 0;
  text-align: center;
}

.logo-strip__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  margin: 0 0 var(--spacing-6);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider, 0.075em);
}

.logo-strip__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  opacity: 0.6;
}

.logo-strip__img {
  height: 32px;
  width: auto;
  filter: grayscale(1);
  transition: filter var(--transition-ui, 200ms), opacity var(--transition-ui, 200ms);
}

.logo-strip__logos:hover .logo-strip__img { opacity: 0.8; }
.logo-strip__img:hover { filter: none; opacity: 1 !important; }

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

/* ── Dark Mode Overrides ───────────────────────────────────────────── */
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ micro-interactions.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Micro-Interactions
   Validation shake, success pulse, ripple effect, smooth focus
   Uses design tokens: --color-*, --transition-*, --spring-motion
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14)
   ============================ */

/* ---- Form Validation Shake ---- */
.shake {
  animation: mi-shake var(--duration-normal) var(--ease-standard);
}

@keyframes mi-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-1px); }
}

/* ---- Success Checkmark Animation ---- */
.success-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  animation: mi-pop var(--duration-slow) var(--ease-spring);
}

.success-check svg {
  stroke: var(--color-on-primary);
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: mi-draw-check var(--duration-slow) var(--ease-standard) forwards;
  animation-delay: 200ms;
}

@keyframes mi-pop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes mi-draw-check {
  to { stroke-dashoffset: 0; }
}

/* ---- Button Ripple Effect (CSS-only) ---- */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--color-on-primary-faded) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-standard), opacity var(--duration-normal);
}

.btn-ripple:active::after {
  transform: scale(0);
  opacity: 0.3;
  transition: 0s;
}

/* ---- Smooth Scale on Press ---- */
.press-scale {
  transition: transform var(--transition-fast);
}

.press-scale:active {
  transform: scale(0.97);
}

/* ---- Focus Glow ---- */
.focus-glow:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background),
              0 0 0 4px var(--color-primary),
              0 0 16px var(--color-primary-light);
  transition: box-shadow var(--transition-fast);
}

/* ---- Slide-in from bottom (for toasts, notifications) ---- */
.slide-in-up {
  animation: mi-slide-in-up var(--duration-normal) var(--ease-spring) forwards;
}

@keyframes mi-slide-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Slide-out to bottom ---- */
.slide-out-down {
  animation: mi-slide-out-down var(--duration-normal) var(--ease-standard) forwards;
}

@keyframes mi-slide-out-down {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* ---- Skeleton Pulse (content loading) ---- */
.pulse {
  animation: mi-pulse 1.5s var(--ease-standard) infinite;
}

@keyframes mi-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ---- Counter / Number Tick ---- */
.counter-tick {
  display: inline-block;
  animation: mi-counter-tick var(--duration-normal) var(--ease-spring);
}

@keyframes mi-counter-tick {
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---- Hover Lift (reusable utility) ---- */
.hover-lift {
  transition: transform var(--spring-motion), box-shadow var(--spring-motion);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ---- Hover Glow ---- */
.hover-glow {
  transition: box-shadow var(--transition-fast);
}

.hover-glow:hover {
  box-shadow: 0 0 20px var(--color-primary-light);
}

/* ---- Input Focus Underline ---- */
.input-underline {
  position: relative;
}

.input-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--transition-fast), left var(--transition-fast);
}

.input-underline:focus-within::after {
  width: 100%;
  left: 0;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .shake,
  .success-check,
  .success-check svg,
  .slide-in-up,
  .slide-out-down,
  .pulse,
  .counter-tick {
    animation: none !important;
  }

  .btn-ripple::after {
    display: none;
  }

  .press-scale:active {
    transform: none;
  }

  .hover-lift:hover {
    transform: none;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ navbar.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Smart Sticky Navigation
   Uses design tokens: --z-header, --glass-*, --header-*, --touch-target-min
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §0-2
   ============================ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header, 1000);
  background: var(--color-surface, #ffffff);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  transition:
    transform var(--transition-normal),
    background var(--smooth-motion),
    backdrop-filter var(--smooth-motion),
    border-color var(--smooth-motion);
}

.navbar[data-scrolled] {
  background: var(--glass-surface-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: var(--glass-border-light);
}

.navbar--hidden {
  transform: translateY(-100%);
}

.navbar--compact .navbar__inner {
  height: var(--header-mobile, 56px);
}

.navbar__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand links actions";
  align-items: center;
  gap: var(--spacing-4);
  height: var(--header-desktop, 80px);
  transition: height var(--transition-normal);
}

.navbar__brand   { grid-area: brand; }
.navbar__links   { grid-area: links; justify-content: center; }
.navbar__actions { grid-area: actions; }

/* Brand */
.navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  text-decoration: none;
  color: var(--color-text);
}

.navbar__logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
}

.navbar__brand-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
}

/* Desktop Links */
.navbar__links {
  display: flex;
  list-style: none;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
}

.navbar__link {
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color var(--transition-fast);
  position: relative;
}

.navbar__link:hover,
.navbar__link:focus-visible {
  color: var(--color-primary);
}

.navbar__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--transition-normal);
}

.navbar__link:hover::after {
  width: 100%;
}

/* Actions */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.navbar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-5);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.navbar__cta:hover {
  background: var(--color-primary-hover);
  transform: scale(1.02);
}

/* Theme Toggle */
.navbar__theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.navbar__theme-toggle:hover {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.navbar__theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.navbar__theme-toggle svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* Hamburger */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: var(--touch-target-min, 44px);
  height: var(--touch-target-min, 44px);
  min-width: 48px;
  min-height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-2);
}

.navbar__hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: var(--radius-full);
  transition: transform var(--transition-normal), opacity var(--transition-fast);
}

.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-line:nth-child(2) {
  opacity: 0;
}
.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu */
.navbar__mobile-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--color-surface);
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.navbar__mobile-menu[aria-hidden="false"],
.navbar__mobile-menu--active {
  display: flex !important;
}

.navbar__mobile-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
  min-height: 56px;
  flex-shrink: 0;
  width: 100%;
}

.navbar__mobile-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: auto;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-surface-elevated, #f4f4f5);
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--smooth-motion);
}

.navbar__mobile-close:hover {
  background-color: color-mix(in srgb, var(--color-text) 10%, transparent);
}

.navbar__mobile-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}



.navbar__mobile-links {
  list-style: none;
  margin: 0;
  padding: var(--spacing-4) var(--spacing-5);
  display: flex;
  flex-direction: column;
}

.navbar__mobile-link {
  display: block;
  padding: var(--spacing-3) 0;
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast);
}

.navbar__mobile-link:hover {
  color: var(--color-primary);
}

.navbar__mobile-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: var(--spacing-2) var(--spacing-5) var(--spacing-5);
  padding: var(--spacing-3) var(--spacing-6);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-full);
  text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
  .navbar__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand actions";
    height: var(--header-mobile, 56px);
  }
  .navbar__links,
  .navbar__cta {
    display: none;
  }
  .navbar__hamburger {
    display: flex;
  }
}

/* 대형 화면: 검색/링크 영역 최대 너비 제한 */
@media (min-width: 1200px) {
  .navbar__inner {
    grid-template-columns: minmax(200px, auto) minmax(300px, 520px) auto;
  }
}

/* Dark mode */

/* Focus visible for keyboard nav */
.navbar__link:focus-visible,
.navbar__cta:focus-visible,
.navbar__hamburger:focus-visible,
.navbar__mobile-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ============================
   Navbar Variants
   ============================ */

/* Top accent — 3px primary bar at top edge */
.navbar--top-accent {
  border-top: 3px solid var(--color-primary);
  border-bottom: 1px solid var(--color-border);
}

/* Centered logo — brand in grid center column */
.navbar--centered-logo .navbar__inner {
  grid-template-columns: 1fr auto 1fr;
}
.navbar--centered-logo .navbar__brand {
  grid-column: 2;
  justify-self: center;
}
.navbar--centered-logo .navbar__links {
  grid-column: 1;
  justify-self: start;
  order: -1;
}
.navbar--centered-logo .navbar__actions {
  grid-column: 3;
  justify-self: end;
}

/* Dark solid — opaque dark background, no glass */
.navbar--dark-solid {
  background: var(--color-text);
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.navbar--dark-solid[data-scrolled] {
  background: var(--color-text);
  backdrop-filter: none;
}
.navbar--dark-solid .navbar__link,
.navbar--dark-solid .navbar__logo-text {
  color: var(--color-surface);
}
.navbar--dark-solid .navbar__link:hover {
  color: var(--color-primary-light, var(--color-primary));
}

/* Floating pill — rounded, floating above content */
.navbar--floating-pill {
  position: absolute;
  top: var(--spacing-4);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--spacing-8));
  max-width: 1200px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--glass-surface);
  backdrop-filter: var(--glass-blur);
  z-index: var(--z-header, 1000);
}
.navbar--floating-pill .navbar__inner {
  padding: 0 var(--spacing-4);
  height: 56px;
}

/* Minimal wordmark — no logo image, minimal links, no CTA */
.navbar--minimal-wordmark .navbar__cta {
  display: none;
}
.navbar--minimal-wordmark .navbar__logo-img {
  display: none;
}
.navbar--minimal-wordmark .navbar__logo-text {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

/* Mega menu container */
.navbar__dropdown-group {
  position: relative;
}
.navbar__mega-menu {
  position: absolute;
  top: calc(100% + var(--spacing-2));
  left: 50%;
  transform: translateX(-50%);
  min-width: 560px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-5);
  z-index: var(--z-dropdown, 50);
}
.navbar__mega-menu[hidden] {
  display: none;
}
.navbar__mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-6);
}
.navbar__mega-heading {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider, 0.075em);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-3);
}
.navbar__mega-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: background var(--transition-ui, 200ms);
}
.navbar__mega-link:hover {
  background: var(--color-bg);
}
.navbar__mega-link-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  color: var(--color-primary);
}
.navbar__dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  background: none;
  border: none;
  cursor: pointer;
}

/* Announcement bar (used with navbar-with-announcement) */
.announcement-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  position: relative;
}
.announcement-bar__text {
  margin: 0;
}
.announcement-bar__cta {
  color: var(--color-on-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.announcement-bar__close {
  position: absolute;
  right: var(--spacing-4);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-on-primary);
  cursor: pointer;
  opacity: 0.75;
  font-size: var(--text-base);
  line-height: 1;
  padding: var(--spacing-1);
}
.announcement-bar__close:hover {
  opacity: 1;
}

/* Search bar (used with navbar-with-search) */
.navbar__search {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0 var(--spacing-2) 0 var(--spacing-4);
  transition: border-color var(--transition-ui, 200ms);
}
.navbar__search:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
.navbar__search-input {
  background: none;
  border: none;
  outline: none;
  font-size: var(--text-sm);
  color: var(--color-text);
  width: 100%;
  min-width: 0;
  padding: var(--spacing-2) 0;
}
.navbar__search-input::placeholder {
  color: var(--color-text-muted);
}
.navbar__search-btn {
  flex-shrink: 0;
}
.navbar__search--mobile {
  margin: var(--spacing-3) 0;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .navbar,
  .navbar__inner,
  .navbar__link,
  .navbar__link::after,
  .navbar__cta,
  .navbar__theme-toggle,
  .navbar__hamburger-line,
  .navbar__mobile-link,
  .navbar__mega-link,
  .navbar__search {
    transition: none;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ password-strength.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* Sogorox Factory — Password Strength & Eye Toggle (Level 1 Skeleton용)
   Pairs with password-strength.js.
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14) */

/* ============================
   Password Field Wrapper
   ============================ */
.password-field {
  position: relative;
}

.password-field .form-input {
  padding-right: calc(var(--touch-target-min, 44px) + var(--spacing-2));
}

/* ============================
   Eye Toggle Button
   ============================ */
.password-field__toggle {
  position: absolute;
  right: var(--spacing-1);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min, 44px);
  height: var(--touch-target-min, 44px);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast);
}

.password-field__toggle:hover {
  color: var(--color-text);
}

.password-field__toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.password-field__toggle-icon {
  width: 20px;
  height: 20px;
}

/* ============================
   Strength Meter Bar
   ============================ */
.password-strength {
  margin-top: var(--spacing-2);
}

.password-strength__bar {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}

.password-strength__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--smooth-motion), background-color var(--smooth-motion);
  width: 0;
}

.password-strength__fill[data-strength="0"] { width: 0; }
.password-strength__fill[data-strength="1"] { width: 25%; background: var(--color-error); }
.password-strength__fill[data-strength="2"] { width: 50%; background: var(--color-warning); }
.password-strength__fill[data-strength="3"] { width: 75%; background: var(--color-info, #3b82f6); }
.password-strength__fill[data-strength="4"] { width: 100%; background: var(--color-success); }

.password-strength__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--spacing-1);
}

/* ============================
   Requirement Checklist
   ============================ */
.password-checklist {
  list-style: none;
  padding: 0;
  margin: var(--spacing-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.password-checklist__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.password-checklist__item--met {
  color: var(--color-success);
}

.password-checklist__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ============================
   Reduced Motion
   ============================ */
@media (prefers-reduced-motion: reduce) {
  .password-strength__fill {
    transition: none;
  }
}

/* ── Dark Mode Overrides ───────────────────────────────────────────── */
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ pricing.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Pricing Table Styles
   Uses design tokens: --color-*, --spacing-*, --radius-*, --shadow-*
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §2-2
   ============================ */

.pricing {
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
}

.pricing__heading {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  font-weight: 700;
  text-align: center;
  color: var(--color-text);
  margin-bottom: var(--spacing-2);
}

.pricing__subheading {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  margin-bottom: var(--spacing-8);
}

/* Toggle */
.pricing__toggle {
  display: flex;
  justify-content: center;
  gap: var(--spacing-1);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  padding: var(--spacing-1);
  width: fit-content;
  margin: 0 auto var(--spacing-10);
  border: 1px solid var(--color-border);
}

.pricing__toggle-btn {
  padding: var(--spacing-2) var(--spacing-5);
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.pricing__toggle-btn--active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.pricing__save-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-success);
  margin-left: var(--spacing-1);
}

.pricing__toggle-btn--active .pricing__save-badge {
  color: rgba(255, 255, 255, 0.9);
}

/* Grid */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-6);
  max-width: 1000px;
  margin: 0 auto;
  align-items: stretch;
}

/* Card */
.pricing__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-8);
  text-align: center;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.pricing__card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Featured card */
.pricing__card--featured {
  border-color: var(--color-primary);
  border-width: 2px;
  box-shadow: var(--shadow-xl);
  transform: scale(1.04);
}

.pricing__card--featured:hover {
  transform: scale(1.04) translateY(-4px);
}

.pricing__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--spacing-1) var(--spacing-4);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pricing__plan-name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-1);
}

.pricing__plan-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-6);
}

/* Price */
.pricing__price {
  margin-bottom: var(--spacing-6);
}

.pricing__amount {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-text);
  transition: opacity 0.2s ease;
}

.pricing__period {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Features */
.pricing__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-8);
  text-align: left;
  flex: 1;
}

.pricing__feature {
  padding: var(--spacing-2) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding-left: var(--spacing-6);
  position: relative;
}

.pricing__feature::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: 700;
}

/* CTA */
.pricing__cta {
  display: block;
  width: 100%;
  padding: var(--spacing-3) var(--spacing-6);
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  text-align: center;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), transform var(--transition-fast);
  margin-top: auto;
}

.pricing__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.pricing__cta--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.pricing__cta--primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.pricing__cta--secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}

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

/* Mobile */
@media (max-width: 768px) {
  .pricing__card--featured {
    transform: none;
  }
  .pricing__card--featured:hover {
    transform: translateY(-4px);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .pricing__toggle-btn,
  .pricing__card,
  .pricing__cta {
    transition: none;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ process.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* Process Steps Section — numbered horizontal flow
   AI: sogorox-factory | Generated: 2026-05-01 | Reviewed: sogorox-qa (2026-05-14) */

.process-header {
  text-align: center;
  margin-bottom: var(--spacing-10);
}

.process-header h2 {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  margin: 0 0 var(--spacing-2);
}

.process-header p {
  color: var(--color-text-muted);
  max-width: 50ch;
  margin: 0 auto;
}

/* Outer wrapper provides relative context for the connector line */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-6);
  position: relative;
}

@media (max-width: 767px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
  .process-steps { grid-template-columns: 1fr; }
}

/* Horizontal line behind the number circles */
.process-connector {
  position: absolute;
  top: 28px;
  left: calc(12.5% + 24px);
  right: calc(12.5% + 24px);
  height: 2px;
  background: var(--color-border);
}

@media (max-width: 767px) {
  .process-connector { display: none; }
}

.process-step {
  text-align: center;
  position: relative;
}

.process-step__number {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  margin: 0 auto var(--spacing-4);
  position: relative;
  z-index: 1;
}

.process-step__title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--spacing-2);
}

.process-step__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ── Dark Mode Overrides ───────────────────────────────────────────── */
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ sidebar.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Sidebar Navigation
   Collapsible sidebar with mobile drawer
   Uses design tokens: --color-*, --spacing-*, --radius-*, --transition-*,
     --header-desktop, --sidebar-expanded, --sidebar-collapsed, --z-*
   ============================ */

/* ---- Base Sidebar ---- */
.layout-dashboard .sidebar {
  position: sticky;
  top: var(--header-desktop, 80px);
  left: 0;
  width: var(--sidebar-expanded, 240px);
  height: calc(100vh - var(--header-desktop, 80px));
  background: var(--color-surface-elevated);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--z-sticky, 100);
  transition: width var(--transition-normal);
  flex-shrink: 0;
}

/* ---- Collapsed State ---- */
.layout-dashboard .sidebar--collapsed {
  width: var(--sidebar-collapsed, 64px);
}

.layout-dashboard .sidebar--collapsed .sidebar__label {
  display: none;
}

.layout-dashboard .sidebar--collapsed .sidebar__link {
  justify-content: center;
  padding: var(--spacing-3);
}

/* ---- Navigation ---- */
.layout-dashboard .sidebar__nav {
  padding: var(--spacing-4) var(--spacing-3);
  list-style: none;
  margin: 0;
}

.layout-dashboard .sidebar__section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-top: var(--spacing-4);
}

.layout-dashboard .sidebar__section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--color-border), transparent 40%);
}

.layout-dashboard .sidebar--collapsed .sidebar__section-title {
  display: none;
}

/* ---- Link Items ---- */
.layout-dashboard .sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-3);
  min-height: var(--touch-target-min);
  border-radius: var(--radius-md);
  border-left: 2px solid transparent;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition:
    background var(--transition-ui, 200ms),
    color var(--transition-ui, 200ms),
    border-color var(--transition-ui, 200ms);
}

.layout-dashboard .sidebar__link:hover {
  background: var(--color-surface);
  color: var(--color-text);
  border-left-color: color-mix(in srgb, var(--color-primary), transparent 55%);
}

.layout-dashboard .sidebar__link--active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight: 600;
}

.layout-dashboard .sidebar__link--active:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
}

.layout-dashboard .sidebar__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- Icon & Label ---- */
.layout-dashboard .sidebar__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.layout-dashboard .sidebar__label {
  transition: opacity var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Toggle Button ---- */
.layout-dashboard .sidebar__toggle {
  position: absolute;
  top: var(--spacing-4);
  right: calc(-1 * var(--spacing-4));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-text-muted);
  box-shadow: var(--shadow-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  z-index: 1;
}

.layout-dashboard .sidebar__toggle:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

.layout-dashboard .sidebar__toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- Mobile: off-screen drawer ---- */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-expanded, 240px);
    z-index: var(--z-sidebar, 999);
    transform: translateX(-100%);
    transition: transform var(--smooth-motion);
  }

  .sidebar--collapsed {
    width: var(--sidebar-expanded, 240px);
    transform: translateX(-100%);
  }

  .sidebar--collapsed .sidebar__label { display: inline; }
  .sidebar--collapsed .sidebar__link { justify-content: flex-start; padding: var(--spacing-3); }
  .sidebar--collapsed .sidebar__section-title { display: block; }

  .sidebar--open {
    transform: translateX(0);
  }

  .sidebar__toggle {
    display: none;
  }
}

/* ---- Mobile Backdrop ---- */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: calc(var(--z-sidebar, 999) - 1);
  transition: opacity var(--smooth-motion);
}

.sidebar-backdrop--visible {
  display: block;
}

/* ---- Dark mode ---- */

/* ============================
   Sidebar Variants
   ============================ */

/* ---- Submenu (nested nav) ---- */
.layout-dashboard .sidebar__submenu {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.layout-dashboard .sidebar__submenu .sidebar__link {
  padding-left: calc(var(--spacing-4) + var(--spacing-6));
  font-size: var(--text-sm);
}

.layout-dashboard .sidebar__link--has-children {
  position: relative;
}

.layout-dashboard .sidebar__link--has-children::after {
  content: "";
  position: absolute;
  right: var(--spacing-4);
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform var(--transition-fast);
  opacity: 0.5;
}

.layout-dashboard .sidebar__link--has-children[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(45deg);
}

/* ---- Nav badge ---- */
.layout-dashboard .sidebar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--spacing-1-5);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-full);
  background: var(--color-error);
  color: #ffffff;
  margin-left: auto;
}

/* Dark sidebar */
.layout-dashboard .sidebar--dark {
  background: var(--color-text);
  border-right-color: transparent;
  color: var(--color-surface);
}
.layout-dashboard .sidebar--dark .sidebar__link {
  color: rgb(255 255 255 / 0.7);
}
.layout-dashboard .sidebar--dark .sidebar__link:hover {
  background: rgb(255 255 255 / 0.08);
  color: var(--color-surface);
}
.layout-dashboard .sidebar--dark .sidebar__link--active {
  background: rgb(255 255 255 / 0.12);
  color: var(--color-surface);
}
.layout-dashboard .sidebar--dark .sidebar__heading {
  color: rgb(255 255 255 / 0.35);
}
.layout-dashboard .sidebar--dark .sidebar__logo-text {
  color: var(--color-surface);
}

/* Compact sidebar */
.layout-dashboard .sidebar--compact {
  width: 200px;
}
.layout-dashboard .sidebar--compact .sidebar__link {
  padding: var(--spacing-1-5, 0.375rem) var(--spacing-3);
  font-size: var(--text-sm);
}
.layout-dashboard .sidebar--compact .sidebar__logo-text {
  font-size: var(--text-sm);
}
.layout-dashboard .sidebar--compact .sidebar__section {
  padding: 0 var(--spacing-3);
}
.layout-dashboard .sidebar--compact .sidebar__heading {
  font-size: var(--text-xs);
}

/* Floating sidebar — no border, shadow, rounded right edge */
.layout-dashboard .sidebar--floating {
  border-right: none;
  box-shadow: var(--shadow-xl);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  margin: var(--spacing-3) 0 var(--spacing-3) var(--spacing-3);
  height: calc(100vh - var(--spacing-6));
  top: var(--spacing-3);
}

/* Rail sidebar — icon-only, expands on hover */
.layout-dashboard .sidebar--rail {
  width: 64px;
  overflow: hidden;
  transition: width var(--smooth-motion);
}
.layout-dashboard .sidebar--rail:hover,
.layout-dashboard .sidebar--rail:focus-within {
  width: 260px;
}
.layout-dashboard .sidebar--rail .sidebar__logo-text,
.layout-dashboard .sidebar--rail .sidebar__link-text,
.layout-dashboard .sidebar--rail .sidebar__heading {
  opacity: 0;
  transition: opacity var(--smooth-motion);
  white-space: nowrap;
  overflow: hidden;
}
.layout-dashboard .sidebar--rail:hover .sidebar__logo-text,
.layout-dashboard .sidebar--rail:hover .sidebar__link-text,
.layout-dashboard .sidebar--rail:hover .sidebar__heading,
.layout-dashboard .sidebar--rail:focus-within .sidebar__logo-text,
.layout-dashboard .sidebar--rail:focus-within .sidebar__link-text,
.layout-dashboard .sidebar--rail:focus-within .sidebar__heading {
  opacity: 1;
}
.layout-dashboard .sidebar--rail .sidebar__link {
  justify-content: flex-start;
}
.layout-dashboard .sidebar--rail .sidebar__link-icon {
  flex-shrink: 0;
  width: 24px;
}

/* Wide sidebar */
.layout-dashboard .sidebar--wide {
  width: 320px;
}
.layout-dashboard .sidebar__workspace-switcher {
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-2);
}
.layout-dashboard .sidebar__workspace-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  transition: background var(--transition-ui, 200ms);
}
.layout-dashboard .sidebar__workspace-btn:hover {
  background: var(--color-surface);
}
.layout-dashboard .sidebar__workspace-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}
.layout-dashboard .sidebar__workspace-name {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layout-dashboard .sidebar__chevron {
  flex-shrink: 0;
  opacity: 0.5;
}

/* Collapsible toggle button */
.layout-dashboard .sidebar__collapse-btn {
  position: absolute;
  top: var(--spacing-5);
  right: calc(-1 * var(--spacing-4));
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: background var(--transition-ui, 200ms);
}
.layout-dashboard .sidebar__collapse-btn:hover {
  background: var(--color-bg);
}
.layout-dashboard .sidebar__collapse-icon {
  width: 14px;
  height: 14px;
  transition: transform var(--smooth-motion);
}
.layout-dashboard .sidebar__collapse-btn[aria-expanded="false"] .sidebar__collapse-icon {
  transform: rotate(180deg);
}

/* Icon-only sidebar */
.layout-dashboard .sidebar--icon-only {
  width: 64px;
  overflow: hidden;
}
.layout-dashboard .sidebar--icon-only .sidebar__logo-text,
.layout-dashboard .sidebar--icon-only .sidebar__link-text,
.layout-dashboard .sidebar--icon-only .sidebar__heading,
.layout-dashboard .sidebar--icon-only .sidebar__badge {
  display: none;
}
.layout-dashboard .sidebar--icon-only .sidebar__link {
  justify-content: center;
  padding: var(--spacing-3);
}
.layout-dashboard .sidebar--icon-only .sidebar__link-icon {
  width: 24px;
  height: 24px;
}

/* Sidebar search */
.layout-dashboard .sidebar__search {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}
.layout-dashboard .sidebar__search-label {
  /* sr-only pattern */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.layout-dashboard .sidebar__search-input {
  width: 100%;
}

/* Top nav (horizontal sub-navigation) */
.top-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--spacing-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.top-nav::-webkit-scrollbar {
  display: none;
}
.top-nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-1);
  white-space: nowrap;
}
.top-nav__link {
  display: block;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-ui, 200ms), border-color var(--transition-ui, 200ms);
}
.top-nav__link:hover {
  color: var(--color-text);
}
.top-nav__link--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar__link,
  .sidebar__label,
  .sidebar__toggle,
  .sidebar-backdrop,
  .sidebar--rail,
  .sidebar--rail .sidebar__logo-text,
  .sidebar--rail .sidebar__link-text,
  .sidebar--rail .sidebar__heading,
  .sidebar__link--has-children::after,
  .sidebar__workspace-btn,
  .sidebar__collapse-btn,
  .sidebar__collapse-icon,
  .top-nav__link {
    transition: none;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ stats.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* Stats Counter Section
   AI: sogorox-factory | Generated: 2026-05-01 | Reviewed: sogorox-qa (2026-05-14) */

.stats-section {
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
  padding: var(--spacing-10) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-6);
  text-align: center;
}

@media (max-width: 767px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
  .stats-grid { grid-template-columns: 1fr; }
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

.stat-value {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  font-weight: 800;
  line-height: 1;
}

.stat-label {
  font-size: var(--text-sm);
  opacity: 0.8;
}

/* ── Dark Mode Overrides ───────────────────────────────────────────── */
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ table.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Data Table
   Responsive table with striped/hover variants
   Uses design tokens: --color-*, --spacing-*, --radius-*, --transition-*
   ============================ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.data-table th,
.data-table td {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky, 100);
  background: var(--color-surface);
}

.data-table th {
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Striped variant */
.data-table--striped tbody tr:nth-child(even) {
  background: var(--color-surface);
}

/* Hover variant */
.data-table--hover tbody tr {
  transition: background var(--transition-fast);
}

.data-table--hover tbody tr:hover {
  background: var(--color-primary-light);
}

/* Bordered variant */
.data-table--bordered th,
.data-table--bordered td {
  border: 1px solid var(--color-border);
}

/* Compact variant */
.data-table--compact th,
.data-table--compact td {
  padding: var(--spacing-2) var(--spacing-3);
}

/* Responsive card layout below md */
@media (max-width: 768px) {
  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .data-table tbody tr {
    display: block;
    margin-bottom: var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
  }

  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
    text-align: right;
  }

  .data-table td:last-child {
    border-bottom: none;
  }

  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    text-align: left;
    margin-right: var(--spacing-4);
  }
}

/* ---- Sort indicators ---- */
.data-table th[data-sort] {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: calc(var(--spacing-4) + 18px);
}

.data-table th[data-sort]::after {
  content: "⇅";
  position: absolute;
  right: var(--spacing-4);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.3;
  font-size: 0.75em;
}

.data-table th[data-sort="asc"]::after {
  content: "▲";
  opacity: 0.8;
  color: var(--color-primary);
}

.data-table th[data-sort="desc"]::after {
  content: "▼";
  opacity: 0.8;
  color: var(--color-primary);
}

/* ---- Row selection ---- */
.data-table__select {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.data-table tbody tr.data-table__row--selected {
  background: color-mix(in srgb, var(--color-primary), transparent 92%);
}

/* ---- Sticky first column ---- */
.data-table--sticky-col th:first-child,
.data-table--sticky-col td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-surface-elevated, var(--color-background));
  box-shadow: 2px 0 4px -2px rgb(0 0 0 / 0.08);
}

/* ---- Expandable row ---- */
.data-table__row--expandable {
  cursor: pointer;
}

.data-table__expand-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.data-table__row--expanded .data-table__expand-icon {
  transform: rotate(90deg);
}

.data-table__row-detail {
  display: none;
}

.data-table__row--expanded + .data-table__row-detail {
  display: table-row;
}

.data-table__row-detail td {
  padding: var(--spacing-4) var(--spacing-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* ---- Loading state (skeleton rows) ---- */
.data-table--loading tbody td {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.data-table--loading tbody td::after {
  content: "";
  position: absolute;
  inset: var(--spacing-2) var(--spacing-4);
  background: var(--color-surface-200, #e2e8f0);
  border-radius: var(--radius-sm);
  animation: data-table-pulse 1.5s ease-in-out infinite;
}

@keyframes data-table-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ---- Empty state ---- */
.data-table__empty {
  text-align: center;
  padding: var(--spacing-12, 3rem) var(--spacing-4);
  color: var(--color-text-muted);
}

.data-table__empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--spacing-4);
  opacity: 0.4;
}

.data-table__empty-text {
  font-size: var(--text-base);
  font-weight: 500;
}

.data-table__empty-hint {
  font-size: var(--text-sm);
  margin-top: var(--spacing-1);
}

/* ---- Scroll shadow wrapper ---- */
.data-table-wrapper {
  overflow-x: auto;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.data-table-wrapper::before,
.data-table-wrapper::after {
  content: "";
  position: sticky;
  top: 0;
  bottom: 0;
  width: 16px;
  pointer-events: none;
  z-index: 2;
}

.data-table-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--color-background), transparent);
}

.data-table-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--color-background), transparent);
}

/* ---- Status badge in table ---- */
.data-table__status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: 0.125rem var(--spacing-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}

.data-table__status--active {
  background: var(--color-success-light);
  color: var(--color-success);
}

.data-table__status--inactive {
  background: var(--color-surface-200, #e2e8f0);
  color: var(--color-text-muted);
}

.data-table__status--pending {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.data-table__status--error {
  background: var(--color-error-light);
  color: var(--color-error);
}

/* ---- Bulk actions bar ---- */
.data-table__bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--spacing-3);
}

.data-table__bulk-count {
  font-weight: 600;
  color: var(--color-primary);
}

/* Dark mode */

/* Column Resize Handle */
.data-table__resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  background: transparent;
}

.data-table__resize-handle:hover {
  background: var(--color-primary);
  opacity: 0.4;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .data-table--hover tbody tr,
  .data-table__expand-icon {
    transition: none;
  }
  .data-table--loading tbody td::after {
    animation: none;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ tabs.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Tabs & Segment Control
   Accessible tab navigation with ARIA support
   Uses design tokens: --color-*, --spacing-*, --radius-*, --transition-*
   ============================ */

/* ---- Container ---- */
.tabs {
  width: 100%;
}

/* ---- Tab List ---- */
.tabs__list {
  display: flex;
  gap: var(--spacing-1);
  border-bottom: 2px solid var(--color-border);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Tab Trigger ---- */
.tabs__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  min-height: var(--touch-target-min);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.tabs__trigger:hover {
  color: var(--color-text);
  background: var(--color-surface);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.tabs__trigger[aria-selected="true"] {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom-color: var(--color-primary);
}

.tabs__trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---- Tab Panel ---- */
.tabs__panel {
  padding-top: var(--spacing-5);
}

.tabs__panel[hidden] {
  display: none;
}

/* ---- Segment Control Variant ---- */
.tabs--segment .tabs__list {
  display: inline-flex;
  gap: var(--spacing-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-1);
}

.tabs--segment .tabs__trigger {
  border-bottom: none;
  margin-bottom: 0;
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-4);
}

.tabs--segment .tabs__trigger:hover {
  background: transparent;
}

.tabs--segment .tabs__trigger[aria-selected="true"] {
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  border-bottom-color: transparent;
}

/* ---- Vertical tabs ---- */
.tabs--vertical {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--spacing-6);
}

.tabs--vertical .tabs__list {
  flex-direction: column;
  border-bottom: none;
  border-right: 2px solid var(--color-border);
  gap: 0;
}

.tabs--vertical .tabs__trigger {
  border-bottom: none;
  border-right: 2px solid transparent;
  margin-bottom: 0;
  margin-right: -2px;
  text-align: left;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.tabs--vertical .tabs__trigger[aria-selected="true"] {
  border-right-color: var(--color-primary);
  border-bottom-color: transparent;
  background: var(--color-primary-light);
}

.tabs--vertical .tabs__panel {
  padding-top: 0;
}

@media (max-width: 768px) {
  .tabs--vertical {
    grid-template-columns: 1fr;
  }
  .tabs--vertical .tabs__list {
    flex-direction: row;
    border-right: none;
    border-bottom: 2px solid var(--color-border);
    overflow-x: auto;
  }
  .tabs--vertical .tabs__trigger {
    border-right: none;
    border-bottom: 2px solid transparent;
    margin-right: 0;
    margin-bottom: -2px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  .tabs--vertical .tabs__trigger[aria-selected="true"] {
    border-right-color: transparent;
    border-bottom-color: var(--color-primary);
  }
}

/* ---- Disabled tab ---- */
.tabs__trigger[disabled],
.tabs__trigger--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Tab badge (count) ---- */
.tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--spacing-1);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-full);
  background: var(--color-surface-200, #e2e8f0);
  color: var(--color-text-muted);
}

.tabs__trigger[aria-selected="true"] .tabs__badge {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* ---- Scrollable tabs (hide scrollbar) ---- */
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__list { scrollbar-width: none; }

/* ---- Pill variant ---- */
.tabs--pill .tabs__list {
  border-bottom: none;
  gap: var(--spacing-2);
}

.tabs--pill .tabs__trigger {
  border-bottom: none;
  margin-bottom: 0;
  border-radius: var(--radius-full);
  padding: var(--spacing-2) var(--spacing-4);
}

.tabs--pill .tabs__trigger[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-bottom-color: transparent;
}

/* ---- Dark mode ---- */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .tabs__trigger {
    transition: none;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ team.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* Team Grid Section
   AI: sogorox-factory | Generated: 2026-05-01 | Reviewed: sogorox-qa (2026-05-14) */

.team-header {
  text-align: center;
  margin-bottom: var(--spacing-8);
}

.team-header h2 {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  margin: 0 0 var(--spacing-2);
}

.team-header p {
  color: var(--color-text-muted);
  max-width: 50ch;
  margin: 0 auto;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-6);
}

@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .team-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--spacing-4);
    padding-bottom: var(--spacing-3);
  }
  .team-grid > * {
    flex: 0 0 75%;
    scroll-snap-align: center;
    min-width: 0;
  }
  .team-grid::-webkit-scrollbar { height: 4px; }
  .team-grid::-webkit-scrollbar-track { background: var(--color-border); border-radius: 2px; }
  .team-grid::-webkit-scrollbar-thumb { background: var(--color-text-muted); border-radius: 2px; }
}

.member-card {
  padding: var(--spacing-6);
  text-align: center;
}

.member-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin: 0 auto var(--spacing-3);
  display: block;
}

.member-card__name {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--spacing-1);
}

.member-card__role {
  font-size: var(--text-sm);
  color: var(--color-primary);
  margin: 0 0 var(--spacing-2);
}

.member-card__bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ── Dark Mode Overrides ───────────────────────────────────────────── */
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ timeline.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* Sogorox Factory — Timeline Component (Level 1 Skeleton용)
   Vertical timeline for about pages, order tracking, onboarding.
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14) */

/* ============================
   Timeline Container
   ============================ */
.timeline {
  position: relative;
  padding-left: var(--spacing-8);
}

.timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}

/* ============================
   Timeline Item
   ============================ */
.timeline__item {
  position: relative;
  padding-bottom: var(--spacing-8);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

/* ---- Marker dot ---- */
.timeline__marker {
  position: absolute;
  left: calc(-1 * var(--spacing-8) + 8px);
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  z-index: 1;
}

.timeline__item--active .timeline__marker {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
}

.timeline__item--completed .timeline__marker {
  background: var(--color-success);
  border-color: var(--color-success);
}

/* ---- Content ---- */
.timeline__date {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-1);
}

.timeline__title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--spacing-1);
}

.timeline__description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed, 1.7);
  margin: 0;
}

/* ============================
   Horizontal variant (order tracking)
   ============================ */
.timeline--horizontal {
  display: flex;
  padding-left: 0;
  overflow-x: auto;
  gap: var(--spacing-6);
}

.timeline--horizontal::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  bottom: auto;
  height: 2px;
  width: 100%;
}

.timeline--horizontal .timeline__item {
  padding-bottom: 0;
  padding-top: var(--spacing-8);
  min-width: 140px;
  text-align: center;
  flex-shrink: 0;
}

.timeline--horizontal .timeline__marker {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* ============================
   Dark Mode
   ============================ */
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ toast.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Toast Notification System
   Pairs with js/toast.js
   Uses design tokens: --z-notification, --radius-*, --shadow-*, --color-*
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §2-3
   ============================ */

.toast-container {
  position: fixed;
  top: var(--spacing-4);
  right: var(--spacing-4);
  z-index: var(--z-notification, 1200);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  pointer-events: none;
  max-width: 380px;
  width: 100%;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(100%);
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* Enter */
.toast--visible {
  opacity: 1;
  transform: translateX(0);
  animation: toast-in 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

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

/* Exit */
.toast--exit {
  animation: toast-out 250ms ease-in forwards;
}

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

/* Icon */
.toast__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-lg);
}

.toast__message {
  flex: 1;
  line-height: var(--leading-normal);
}

.toast__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.toast__close:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

/* Type variants */
.toast--success .toast__icon { background: var(--color-success-light); color: var(--color-success); }
.toast--error .toast__icon   { background: var(--color-error-light); color: var(--color-error); }
.toast--warning .toast__icon { background: var(--color-warning-light); color: var(--color-warning); }
.toast--info .toast__icon    { background: var(--color-info-light); color: var(--color-info); }

.toast--success { border-left: 3px solid var(--color-success); }
.toast--error   { border-left: 3px solid var(--color-error); }
.toast--warning { border-left: 3px solid var(--color-warning); }
.toast--info    { border-left: 3px solid var(--color-info); }

/* ---- Action button (Undo, Retry) ---- */
.toast__action {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  white-space: nowrap;
}

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

/* ---- Auto-dismiss progress bar ---- */
.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.toast__progress-bar {
  height: 100%;
  width: 100%;
  transform-origin: left;
  animation: toast-progress linear forwards;
}

.toast--success .toast__progress-bar { background: var(--color-success); }
.toast--error .toast__progress-bar   { background: var(--color-error); }
.toast--warning .toast__progress-bar { background: var(--color-warning); }
.toast--info .toast__progress-bar    { background: var(--color-info); }

@keyframes toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.toast {
  position: relative;
  overflow: hidden;
}

/* Mobile: full width bottom */
@media (max-width: 480px) {
  .toast-container {
    top: auto;
    bottom: var(--spacing-4);
    left: var(--spacing-4);
    right: var(--spacing-4);
    max-width: none;
  }
  .toast--visible { animation-name: toast-in-mobile; }
  .toast--exit { animation-name: toast-out-mobile; }

  @keyframes toast-in-mobile {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes toast-out-mobile {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(100%); }
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .toast--visible,
  .toast--exit {
    animation: none;
    transform: none;
    opacity: 1;
  }
  .toast--exit { opacity: 0; }
}

/* Dark mode */
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ typography.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* Sogorox Factory — 공통 타이포그래피 유틸리티 (Level 1 Skeleton용) */

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }

.font-sans { font-family: var(--font-sans); }
.font-heading { font-family: var(--font-heading); }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

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

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

.leading-tight { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Dark Mode Overrides ───────────────────────────────────────────── */
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ skeleton-loader.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer utilities {
/* ============================
   Skeleton Loader — Shimmer placeholders
   .skeleton-text, .skeleton-image, .skeleton-card, .skeleton-avatar
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §1-4
   ============================ */

/* ---- Base shimmer ---- */
[class^="skeleton-"],
[class*=" skeleton-"] {
  background: linear-gradient(
    90deg,
    var(--color-surface) 25%,
    var(--color-border) 50%,
    var(--color-surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

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

/* ---- Variants ---- */
.skeleton-text {
  height: 1em;
  width: 100%;
  margin-bottom: var(--spacing-2);
}

.skeleton-text:last-child {
  width: 70%;
}

.skeleton-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
}

.skeleton-card {
  width: 100%;
  min-height: 200px;
  border-radius: var(--radius-xl);
  padding: var(--spacing-4);
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.skeleton-button {
  height: 40px;
  width: 120px;
  border-radius: var(--radius-full);
}

/* ---- Skeleton-to-content transition (CLS prevention) ---- */
.skeleton-container {
  position: relative;
}

.skeleton-container > [class^="skeleton-"],
.skeleton-container > [class*=" skeleton-"] {
  transition: opacity var(--transition-normal, 300ms) var(--smooth-motion, ease);
}

.skeleton-container.skeleton-loaded > [class^="skeleton-"],
.skeleton-container.skeleton-loaded > [class*=" skeleton-"] {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.skeleton-container > .skeleton-content {
  opacity: 0;
  transition: opacity var(--transition-normal, 300ms) var(--smooth-motion, ease);
}

.skeleton-container.skeleton-loaded > .skeleton-content {
  opacity: 1;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  [class^="skeleton-"],
  [class*=" skeleton-"] {
    animation: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
  }
}

/* ---- Dark mode ---- */
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ skeleton-saas.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer components {
/* skeleton-saas.css — auto-generated by bundle-css.sh */
/* Generated: 2026-05-15 | Do not edit manually */

/* ── image-placeholder ─────────────────────────── */
/* Image placeholder — visible fallback when no real image is available */

.image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
  background-color: var(--color-surface, var(--color-surface));
  border: 1px dashed var(--color-border, var(--color-surface-200));
  border-radius: var(--radius-card, 0.75rem);
  color: var(--color-text-muted, var(--color-text-secondary));
  overflow: hidden;
  position: relative;
}

.image--placeholder::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='40' height='40' rx='4'/%3E%3Ccircle cx='16' cy='16' r='4'/%3E%3Cpath d='M44 30l-10-10L8 44'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
}

.image--placeholder[data-ratio="16/9"] { aspect-ratio: 16 / 9; min-height: auto; }
.image--placeholder[data-ratio="4/3"]  { aspect-ratio: 4 / 3;  min-height: auto; }
.image--placeholder[data-ratio="1/1"]  { aspect-ratio: 1 / 1;  min-height: auto; }

.fnb-card__media .image--placeholder,
.blog-card__media .image--placeholder,
.about-story__visual .image--placeholder {
  min-height: 0;
  height: 100%;
}

/* ── button ─────────────────────────── */
/* ============================
   Unified Button System
   .btn base + size (sm/md/lg) + style (primary/secondary/ghost/outline/destructive)
   Uses design tokens: --color-*, --spacing-*, --radius-*, --spring-motion
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14)
   ============================ */

/* ---- Base ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--btn-radius, var(--radius-full));
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--spring-motion),
              box-shadow var(--spring-motion);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Sizes — base first, then modifiers override ---- */
.btn,
.btn--md {
  padding: var(--spacing-3) var(--btn-padding-x-md, var(--spacing-6));
  font-size: var(--btn-font-size-md, var(--text-base));
  min-height: var(--btn-height-md, var(--touch-target-min));
}

.btn--sm {
  padding: var(--spacing-1-5) var(--btn-padding-x-sm, var(--spacing-3));
  font-size: var(--btn-font-size-sm, var(--text-sm));
  min-height: var(--btn-height-sm, 32px);
}

.btn--lg {
  padding: var(--spacing-4) var(--btn-padding-x-lg, var(--spacing-8));
  font-size: var(--btn-font-size-lg, var(--text-lg));
  min-height: var(--btn-height-lg, 52px);
}

/* ---- Styles ---- */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: none;
}

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

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

.btn--ghost {
  background: var(--color-on-primary-faded);
  color: var(--color-on-hero);
  border-color: var(--color-on-primary-faded);
  backdrop-filter: blur(4px);
}

.btn--ghost:hover {
  background: rgb(255 255 255 / 0.25);
}

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

.btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--destructive {
  background: var(--color-error);
  color: var(--color-on-primary);
}

.btn--destructive:hover {
  background: var(--color-error);
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ---- Icon button (square) ---- */
.btn--icon {
  padding: var(--spacing-2);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  border-radius: var(--radius-lg);
}

.btn--icon.btn--sm {
  padding: var(--spacing-1-5);
  min-width: 32px;
  min-height: 32px;
}

/* ---- Full width ---- */
.btn--block {
  display: flex;
  width: 100%;
}

/* ---- Icon inside button ---- */
.btn > svg {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

/* ---- Dark mode ---- */

/* ---- On-brand white buttons (for use on primary/brand backgrounds) ---- */
.btn--white {
  background: var(--color-on-primary, var(--color-on-primary));
  color: var(--color-primary);
  border-color: transparent;
}

.btn--white:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

.btn--outline-white {
  background: transparent;
  color: var(--color-on-primary, var(--color-on-primary));
  border: 2px solid rgb(255 255 255 / 0.5);
}

.btn--outline-white:hover {
  border-color: rgb(255 255 255 / 0.9);
  background: rgb(255 255 255 / 0.1);
}

/* ---- CTA (uses --color-cta tokens, falls back to primary) ---- */
.btn--cta {
  background: var(--color-cta, var(--color-primary));
  color: var(--color-on-cta, var(--color-on-primary, var(--color-on-primary)));
}

.btn--cta:hover {
  background: var(--color-cta-hover, var(--color-primary-hover));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
  .btn:hover {
    transform: none;
  }
}

/* ── button-states ─────────────────────────── */
/* ============================
   Button Micro-interaction States
   .btn--loading: spinning indicator
   .btn--success: checkmark + green transition
   .btn--error: shake animation
   Uses design tokens: --color-*, --transition-*, --radius-*
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §1-2
   ============================ */

/* ---- Loading state ---- */
.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--color-on-primary-faded);
  border-top-color: var(--color-on-primary);
  border-radius: 50%;
  animation: btn-spin var(--duration-entrance) linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Dark variant for light-bg buttons */
.btn--loading-dark::after {
  border-color: var(--color-on-dark-faded);
  border-top-color: var(--color-text);
}

/* ---- Success state ---- */
.btn--success {
  background: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: var(--color-on-primary) !important;
  transition: background var(--transition-normal), border-color var(--transition-normal);
  pointer-events: none;
}

.btn--success::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 8px;
  border-left: 2.5px solid var(--color-on-primary);
  border-bottom: 2.5px solid var(--color-on-primary);
  transform: rotate(-45deg);
  margin-right: var(--spacing-2);
  margin-bottom: 2px;
}

/* ---- Error state ---- */
.btn--error {
  background: var(--color-error) !important;
  border-color: var(--color-error) !important;
  color: var(--color-on-primary) !important;
  animation: btn-shake var(--duration-normal) ease-in-out;
}

@keyframes btn-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

/* ---- Pulse feedback (generic) ---- */
.btn--pulse {
  animation: btn-pulse 300ms ease-out;
}

@keyframes btn-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .btn--loading::after { animation: none; opacity: 0.6; }
  .btn--error { animation: none; }
  .btn--pulse { animation: none; }
}

/* ── card ─────────────────────────── */
/* Sogorox Factory — Card Component Library (Level 1 Skeleton용)
   Variants: base, glass, elevated, stat, profile, pricing, image
   Uses design tokens: --color-*, --spacing-*, --radius-*, --shadow-*, --glass-*, --spring-motion
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14) */

/* ============================
   Base Card
   ============================ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--spring-motion), box-shadow var(--spring-motion);
}

.card__header {
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
}

.card__body {
  padding: var(--spacing-5);
}

.card__footer {
  padding: var(--spacing-4) var(--spacing-5);
  border-top: 1px solid var(--color-border);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0 0 var(--spacing-1) 0;
}

.card__description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* ============================
   Elevated Card (hover lift)
   CLAUDE.md: translateY(-6px) scale(1.01) + shadow-xl + spring-motion
   ============================ */
.card--elevated:hover,
.card--elevated:focus-within {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-xl);
}

/* ============================
   Glass Card (Glassmorphism)
   ============================ */
.card--glass {
  background: var(--glass-surface-light, var(--_dyn-28));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-light, var(--_dyn-24));
}

/* ============================
   Stat / KPI Card
   ============================ */
.card--stat {
  text-align: center;
  padding: var(--spacing-6);
}

.card--stat .card__number {
  font-family: var(--font-heading);
  font-size: var(--text-4xl, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary);
}

.card--stat .card__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--spacing-1);
}

/* Stat card — enhanced layout with icon + trend */
.card--stat-enhanced {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
  text-align: left;
}

.card__stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.card__stat-content {
  flex: 1;
  min-width: 0;
}

.card__stat-content .card__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.025em);
  margin-bottom: var(--spacing-1);
}

.card__stat-content .card__number {
  font-family: var(--font-heading);
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

.card__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: var(--spacing-1);
}

.card__trend--up { color: var(--color-success); }
.card__trend--down { color: var(--color-error); }
.card__trend--neutral { color: var(--color-text-muted); }

.card__trend-arrow {
  width: 12px;
  height: 12px;
}

/* Stat card semantic variants */
.card--stat-enhanced.card--success .card__stat-icon {
  background: var(--color-success-light);
  color: var(--color-success);
}

.card--stat-enhanced.card--warning .card__stat-icon {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.card--stat-enhanced.card--error .card__stat-icon {
  background: var(--color-error-light);
  color: var(--color-error);
}

.card--stat-enhanced.card--info .card__stat-icon {
  background: var(--color-info-light);
  color: var(--color-info);
}

/* ============================
   Profile / Team Card
   ============================ */
.card--profile {
  text-align: center;
  padding: var(--spacing-6);
}

.card--profile .card__avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin: 0 auto var(--spacing-3);
  border: 3px solid var(--color-primary);
}

.card--profile .card__name {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
}

.card--profile .card__role {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--spacing-1) 0 0;
}

/* ============================
   Image Card (top image + body)
   ============================ */
.card--image .card__body {
  padding: var(--spacing-4);
}

/* ============================
   Interactive Card (full-area clickable)
   Touch target: 44px minimum (WCAG 2.5.8)
   ============================ */
a.card,
.card[role="link"],
.card--interactive {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  min-height: var(--touch-target-min, 44px);
}

a.card:focus-visible,
.card--interactive:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ============================
   Container Query — Card Grid (DQ-3)
   Wrap card grids in .card-grid for intrinsic responsive layout.
   ============================ */
.card-grid {
  container-type: inline-size;
  container-name: card-grid;
}

@container card-grid (max-width: 400px) {
  .card--horizontal {
    flex-direction: column;
  }
  .card--horizontal .card__image {
    aspect-ratio: 16 / 9;
    max-height: 200px;
  }
}

@container card-grid (min-width: 600px) {
  .card--horizontal {
    display: flex;
    flex-direction: row;
  }
  .card--horizontal .card__image {
    width: 40%;
    flex-shrink: 0;
    aspect-ratio: 3 / 4;
    max-height: none;
  }
  .card--horizontal .card__body {
    flex: 1;
  }
}

/* ============================
   Dark Mode
   ============================ */

/* ============================
   Reduced Motion
   ============================ */
@media (prefers-reduced-motion: reduce) {
  .card,
  .card--elevated:hover {
    transition: none;
    transform: none;
  }
}

/* ── hero ─────────────────────────── */
/* ============================
   Hero Section — 3 Variants (text-first, split, video-bg)
   Uses design tokens: --fluid-h1, --font-heading, --color-*, --spacing-*
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §0-4
   ============================ */

/* ---- Shared ---- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}

.hero--compact {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1rem, 2vw, 2rem);
}

.hero__container {
  position: relative;
  z-index: 1;
}

.hero__badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-4);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--fluid-h1);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-bottom: var(--spacing-4);
}

.hero__subtitle {
  font-size: var(--fluid-body);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: var(--prose-max-width);
  margin-bottom: var(--spacing-8);
}

.hero__actions {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-6);
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hero__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.hero__cta--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.hero__cta--primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.hero__cta--secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}

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

.hero__cta--ghost {
  background: var(--color-on-primary-faded);
  color: var(--color-on-hero);
  border: 1px solid var(--color-on-primary-faded);
  backdrop-filter: blur(4px);
}

.hero__cta--ghost:hover {
  background: rgb(255 255 255 / 0.25);
}

.hero__social-proof {
  margin-top: var(--spacing-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---- Variant: Text-First ---- */
.hero--text-first {
  text-align: center;
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}

.hero--text-first .hero__subtitle {
  margin-inline: auto;
}

.hero--text-first .hero__actions {
  justify-content: center;
}

/* ---- Variant: Split ---- */
.hero__container--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-12);
  align-items: center;
}

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

.hero__image {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: var(--radius-2xl);
  object-fit: cover;
}

/* ---- Variant: Video Background ---- */
.hero--video {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}

.hero__video-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--color-overlay), var(--color-dark-overlay));
}

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

.hero__container--centered .hero__subtitle {
  margin-inline: auto;
}

.hero__container--centered .hero__actions {
  justify-content: center;
}

.hero__title--light { color: var(--color-on-hero); }
.hero__subtitle--light { color: var(--color-on-hero-muted); }

/* ---- Tablet (769-1024px) ---- */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero {
    padding: var(--spacing-16) 0;
  }
  .hero__container--split {
    gap: var(--spacing-8);
    grid-template-columns: 1.2fr 0.8fr;
  }
  .hero__visual {
    max-width: 100%;
  }
  .hero__image {
    max-width: 400px;
  }
}

/* ---- Mobile (768px and below) ---- */
@media (max-width: 768px) {
  .hero {
    padding: var(--spacing-12) 0;
  }
  .hero--text-first {
    padding: var(--spacing-16) 0 var(--spacing-10);
  }
  .hero__container--split {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__container--split .hero__actions {
    justify-content: center;
  }
  .hero__visual {
    max-width: 300px;
    margin-inline: auto;
  }
  .hero--video {
    min-height: 60vh;
  }
  .hero__video {
    display: none;
  }
  .hero__video-wrapper {
    background-size: cover;
    background-position: center;
  }
}

/* ---- Mobile Small (480px and below) ---- */
@media (max-width: 480px) {
  .hero {
    padding: var(--spacing-10) 0;
  }
  .hero--text-first {
    padding: var(--spacing-12) 0 var(--spacing-8);
  }
  .hero__visual {
    max-width: 240px;
  }
  .hero__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ---- Dark mode ---- */
/* ============================
   Hero Variants
   ============================ */

/* Gradient centered — full-width gradient, centered content */
.hero--gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, var(--color-primary)) 100%);
  color: var(--color-on-primary);
}
.hero--gradient .hero__badge {
  background: rgb(255 255 255 / 0.2);
  color: var(--color-on-primary);
  border-color: rgb(255 255 255 / 0.3);
}
.hero--gradient .hero__container--centered {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.hero--gradient .hero__secondary-cta--light {
  color: var(--color-on-primary);
  border-color: rgb(255 255 255 / 0.4);
}
.hero--gradient .hero__secondary-cta--light:hover {
  background: rgb(255 255 255 / 0.12);
}

/* Dark dramatic — deep dark bg with radial glow */
.hero--dark {
  background: var(--color-text);
  color: var(--color-surface);
  position: relative;
  overflow: hidden;
}
.hero--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 50%, var(--color-primary) 0%, transparent 65%);
  opacity: 0.12;
  pointer-events: none;
}
.hero--dark .hero__subtitle {
  color: rgb(255 255 255 / 0.7);
}
.hero--dark .hero__badge {
  background: rgb(255 255 255 / 0.08);
  color: rgb(255 255 255 / 0.9);
  border-color: rgb(255 255 255 / 0.15);
}

/* Editorial minimal — newspaper-style typography */
.hero--editorial {
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 2px solid var(--color-text);
}
.hero--editorial .hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest, 0.12em);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-6);
}
.hero--editorial .hero__title {
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--spacing-6);
}
.hero--editorial .hero__editorial-divider {
  width: 60px;
  height: 4px;
  background: var(--color-primary);
  margin-bottom: var(--spacing-6);
}

/* Split reverse — media left, text right */
.hero__container--split-reverse {
  direction: rtl;
}
.hero__container--split-reverse > * {
  direction: ltr;
}

/* Announcement bar variant */
.hero--announcement .hero__announcement-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--spacing-8);
  border-radius: var(--radius-full);
}
.hero--announcement .hero__announcement-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.hero--announcement .hero__announcement-link {
  color: var(--color-on-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: var(--spacing-1);
}

/* Interactive demo frame */
.hero__demo-frame {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.hero__demo-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.hero__demo-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.hero__demo-dot--red {
.hero__demo-dot--yellow {
.hero__demo-dot--green {
.hero__demo-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 280px;
}
.hero__demo-sidebar {
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}
.hero__demo-content {
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
.hero__demo-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  height: 64px;
}
.hero__demo-card--wide {
  height: 120px;
}

/* Image placeholder SVG in hero media */
.hero__img-placeholder {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta { transition: none; }
  .hero__cta--primary:hover { transform: none; }
}

/* ── navbar ─────────────────────────── */
/* ============================
   Smart Sticky Navigation
   Uses design tokens: --z-header, --glass-*, --header-*, --touch-target-min
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §0-2
   ============================ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header, 1000);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition:
    transform var(--transition-normal),
    background var(--smooth-motion),
    backdrop-filter var(--smooth-motion),
    border-color var(--smooth-motion);
}

.navbar[data-scrolled] {
  background: var(--glass-surface-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: var(--glass-border-light);
}

.navbar--hidden {
  transform: translateY(-100%);
}

.navbar--compact .navbar__inner {
  height: var(--header-mobile, 56px);
}

.navbar__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand links actions";
  align-items: center;
  gap: var(--spacing-4);
  height: var(--header-desktop, 80px);
  transition: height var(--transition-normal);
}

.navbar__brand   { grid-area: brand; }
.navbar__links   { grid-area: links; justify-content: center; }
.navbar__actions { grid-area: actions; }

/* Brand */
.navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  text-decoration: none;
  color: var(--color-text);
}

.navbar__logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
}

.navbar__brand-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
}

/* Desktop Links */
.navbar__links {
  display: flex;
  list-style: none;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
}

.navbar__link {
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color var(--transition-fast);
  position: relative;
}

.navbar__link:hover,
.navbar__link:focus-visible {
  color: var(--color-primary);
}

.navbar__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--transition-normal);
}

.navbar__link:hover::after {
  width: 100%;
}

/* Actions */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.navbar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-5);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.navbar__cta:hover {
  background: var(--color-primary-hover);
  transform: scale(1.02);
}

/* Theme Toggle */
.navbar__theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.navbar__theme-toggle:hover {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.navbar__theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.navbar__theme-toggle svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* Hamburger */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: var(--touch-target-min, 44px);
  height: var(--touch-target-min, 44px);
  min-width: 48px;
  min-height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-2);
}

.navbar__hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: var(--radius-full);
  transition: transform var(--transition-normal), opacity var(--transition-fast);
}

.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-line:nth-child(2) {
  opacity: 0;
}
.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu */
.navbar__mobile-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--color-surface);
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.navbar__mobile-menu[aria-hidden="false"],
.navbar__mobile-menu--active {
  display: flex !important;
}

.navbar__mobile-links {
  list-style: none;
  margin: 0;
  padding: var(--spacing-4) var(--spacing-5);
  display: flex;
  flex-direction: column;
}

.navbar__mobile-link {
  display: block;
  padding: var(--spacing-3) 0;
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast);
}

.navbar__mobile-link:hover {
  color: var(--color-primary);
}

.navbar__mobile-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: var(--spacing-2) var(--spacing-5) var(--spacing-5);
  padding: var(--spacing-3) var(--spacing-6);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-full);
  text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
  .navbar__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand actions";
    height: var(--header-mobile, 56px);
  }
  .navbar__links,
  .navbar__cta {
    display: none;
  }
  .navbar__hamburger {
    display: flex;
  }
}

/* 대형 화면: 검색/링크 영역 최대 너비 제한 */
@media (min-width: 1200px) {
  .navbar__inner {
    grid-template-columns: minmax(200px, auto) minmax(300px, 520px) auto;
  }
}

/* Dark mode */

/* Focus visible for keyboard nav */
.navbar__link:focus-visible,
.navbar__cta:focus-visible,
.navbar__hamburger:focus-visible,
.navbar__mobile-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ============================
   Navbar Variants
   ============================ */

/* Top accent — 3px primary bar at top edge */
.navbar--top-accent {
  border-top: 3px solid var(--color-primary);
  border-bottom: 1px solid var(--color-border);
}

/* Centered logo — brand in grid center column */
.navbar--centered-logo .navbar__inner {
  grid-template-columns: 1fr auto 1fr;
}
.navbar--centered-logo .navbar__brand {
  grid-column: 2;
  justify-self: center;
}
.navbar--centered-logo .navbar__links {
  grid-column: 1;
  justify-self: start;
  order: -1;
}
.navbar--centered-logo .navbar__actions {
  grid-column: 3;
  justify-self: end;
}

/* Dark solid — opaque dark background, no glass */
.navbar--dark-solid {
  background: var(--color-text);
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.navbar--dark-solid[data-scrolled] {
  background: var(--color-text);
  backdrop-filter: none;
}
.navbar--dark-solid .navbar__link,
.navbar--dark-solid .navbar__logo-text {
  color: var(--color-surface);
}
.navbar--dark-solid .navbar__link:hover {
  color: var(--color-primary-light, var(--color-primary));
}

/* Floating pill — rounded, floating above content */
.navbar--floating-pill {
  position: absolute;
  top: var(--spacing-4);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--spacing-8));
  max-width: 1200px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--glass-surface);
  backdrop-filter: var(--glass-blur);
  z-index: var(--z-header, 1000);
}
.navbar--floating-pill .navbar__inner {
  padding: 0 var(--spacing-4);
  height: 56px;
}

/* Minimal wordmark — no logo image, minimal links, no CTA */
.navbar--minimal-wordmark .navbar__cta {
  display: none;
}
.navbar--minimal-wordmark .navbar__logo-img {
  display: none;
}
.navbar--minimal-wordmark .navbar__logo-text {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

/* Mega menu container */
.navbar__dropdown-group {
  position: relative;
}
.navbar__mega-menu {
  position: absolute;
  top: calc(100% + var(--spacing-2));
  left: 50%;
  transform: translateX(-50%);
  min-width: 560px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-5);
  z-index: var(--z-dropdown, 50);
}
.navbar__mega-menu[hidden] {
  display: none;
}
.navbar__mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-6);
}
.navbar__mega-heading {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider, 0.075em);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-3);
}
.navbar__mega-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: background var(--transition-ui, 200ms);
}
.navbar__mega-link:hover {
  background: var(--color-bg);
}
.navbar__mega-link-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  color: var(--color-primary);
}
.navbar__dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  background: none;
  border: none;
  cursor: pointer;
}

/* Announcement bar (used with navbar-with-announcement) */
.announcement-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  position: relative;
}
.announcement-bar__text {
  margin: 0;
}
.announcement-bar__cta {
  color: var(--color-on-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.announcement-bar__close {
  position: absolute;
  right: var(--spacing-4);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-on-primary);
  cursor: pointer;
  opacity: 0.75;
  font-size: var(--text-base);
  line-height: 1;
  padding: var(--spacing-1);
}
.announcement-bar__close:hover {
  opacity: 1;
}

/* Search bar (used with navbar-with-search) */
.navbar__search {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0 var(--spacing-2) 0 var(--spacing-4);
  transition: border-color var(--transition-ui, 200ms);
}
.navbar__search:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
.navbar__search-input {
  background: none;
  border: none;
  outline: none;
  font-size: var(--text-sm);
  color: var(--color-text);
  width: 100%;
  min-width: 0;
  padding: var(--spacing-2) 0;
}
.navbar__search-input::placeholder {
  color: var(--color-text-muted);
}
.navbar__search-btn {
  flex-shrink: 0;
}
.navbar__search--mobile {
  margin: var(--spacing-3) 0;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .navbar,
  .navbar__inner,
  .navbar__link,
  .navbar__link::after,
  .navbar__cta,
  .navbar__theme-toggle,
  .navbar__hamburger-line,
  .navbar__mobile-link,
  .navbar__mega-link,
  .navbar__search {
    transition: none;
  }
}

/* ── footer ─────────────────────────── */
/* ============================
   Footer Utility
   Uses design tokens: --color-*, --spacing-*, --radius-*, --text-*
   Reference: T-14 App Shell, common-specs.md
   AI: sogorox-factory | Generated: 2026-04-14 | Reviewed: sogorox-qa (2026-05-14)
   ============================ */

.footer {
  width: 100%;
  padding: var(--spacing-16) 0 var(--spacing-8);
  padding-bottom: max(var(--spacing-8), env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
}

.footer__container {
  max-width: var(--container-xl, 1200px);
  margin: 0 auto;
  padding: 0 var(--spacing-6);
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--spacing-10);
}

/* Brand column */
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  text-decoration: none;
  color: var(--color-text);
}

.footer__logo-img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
}

.footer__logo-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
}

.footer__description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 30ch;
}

/* Link groups */
.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.footer__heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0 0 var(--spacing-2);
}

.footer__link {
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--color-primary);
}

/* Social icons */
.footer__social {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-top: var(--spacing-2);
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min, 44px);
  height: var(--touch-target-min, 44px);
  min-width: 44px;
  min-height: 44px;
  color: var(--color-text-muted);
  border-radius: var(--radius-lg);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.footer__social-icon {
  width: 20px;
  height: 20px;
}

/* Bottom bar — copyright + credits */
.footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer__year {
  /* Target for JS dynamic year update */
}

.footer__credit-link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__credit-link:hover,
.footer__credit-link:focus-visible {
  color: var(--color-primary);
}

/* ============================
   Dark Mode (manual toggle)
   ============================ */

/* ============================
   System dark mode fallback
   ============================ */
/* ============================
   Responsive
   ============================ */
@media (max-width: 1024px) {
  .footer__container {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-8);
  }
}

@media (max-width: 768px) {
  .footer__container {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--spacing-2);
    text-align: center;
  }
}

/* ── Variants ───────────────────────────────────────────────────────── */
.footer--dark {
  background: var(--color-text);
  color: var(--color-surface);
  border-top: none;
}

.footer--minimal {
  padding: var(--spacing-6) 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.footer--minimal .footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.footer--minimal .footer__brand-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.footer--minimal .footer__logo-img {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
}

.footer--minimal .footer__copyright {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer--minimal nav ul {
  display: flex;
  gap: var(--spacing-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ============================
   Focus visible (keyboard nav)
   ============================ */
.footer__link:focus-visible,
.footer__social-link:focus-visible,
.footer__credit-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ============================
   Footer Variants
   ============================ */

/* Newsletter hero — large newsletter CTA band */
.footer--newsletter-hero .footer__newsletter-band {
  padding: var(--spacing-12) 0;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-8);
}
.footer--newsletter-hero .footer__newsletter-headline {
  font-size: var(--fluid-h3);
  font-weight: 700;
  margin-bottom: var(--spacing-2);
}
.footer--newsletter-hero .footer__newsletter-sub {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-5);
}
.footer--newsletter-hero .footer__newsletter-form {
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  gap: var(--spacing-2);
}
.footer--newsletter-hero .footer__newsletter-input {
  flex: 1;
}

/* Stacked centered — all content centered, stacked vertically */
.footer--stacked {
  text-align: center;
}
.footer--stacked .footer__inner {
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
}
.footer--stacked .footer__brand--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}
.footer--stacked .footer__social--centered {
  display: flex;
  justify-content: center;
  gap: var(--spacing-4);
}
.footer--stacked .footer__links--centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-4) var(--spacing-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer--stacked .footer__bottom--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-6);
  margin-top: var(--spacing-2);
  width: 100%;
}

/* Enterprise — legal-heavy multi-column */
.footer--enterprise .footer__enterprise-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-6);
}
@media (max-width: 1023px) {
  .footer--enterprise .footer__enterprise-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 639px) {
  .footer--enterprise .footer__enterprise-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.footer--enterprise .footer__legal-row {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-4);
  margin-top: var(--spacing-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.footer--enterprise .footer__compliance {
  display: flex;
  gap: var(--spacing-3);
  align-items: center;
  flex-wrap: wrap;
}
.footer--enterprise .footer__compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Social first top row */
.footer__social-first-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  padding-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-6);
}
.footer__social--lg {
  gap: var(--spacing-4);
}
.footer__social-link--lg {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  transition: color var(--transition-ui, 200ms), border-color var(--transition-ui, 200ms);
}
.footer__social-link--lg:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.footer__nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2) var(--spacing-6);
  list-style: none;
  margin: 0 0 var(--spacing-6);
  padding: 0;
}

/* Two-col brand layout */
.footer__two-col {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--spacing-12);
  align-items: start;
}
@media (max-width: 767px) {
  .footer__two-col {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
  }
}
.footer__two-col-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-6);
}

/* Map layout */
.footer__map-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8);
  align-items: start;
}
@media (max-width: 767px) {
  .footer__map-layout {
    grid-template-columns: 1fr;
  }
}
.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}
.footer__contact-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  margin-top: 2px;
}
.footer__map-placeholder {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  color: var(--color-text-muted);
}
.footer__map-icon {
  width: 48px;
  height: 48px;
  color: var(--color-primary);
  opacity: 0.5;
}

/* App download buttons */
.footer__app-download {
  margin-bottom: var(--spacing-8);
}
.footer__app-heading {
  font-size: var(--fluid-h4);
  font-weight: 700;
  margin-bottom: var(--spacing-4);
  color: var(--color-surface);
}
.footer__app-buttons {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}
.footer__app-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-5);
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius-lg);
  color: var(--color-surface);
  text-decoration: none;
  transition: background var(--transition-ui, 200ms);
}
.footer__app-btn:hover {
  background: rgb(255 255 255 / 0.18);
}
.footer__app-btn-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.footer__app-btn-sub {
  display: block;
  font-size: var(--text-xs);
  opacity: 0.75;
}
.footer__app-btn-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Enterprise brand column */
.footer__enterprise-brand {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  padding-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-6);
}

@media (prefers-reduced-motion: reduce) {
  .footer__link { transition: none; }
  .footer__social-link { transition: none; }
  .footer__credit-link { transition: none; }
  .footer__social-link--lg { transition: none; }
  .footer__app-btn { transition: none; }
}

/* ── forms ─────────────────────────── */
/* ============================
   Form Components
   Inputs, selects, checkboxes, toggles, floating labels
   Uses design tokens: --color-*, --spacing-*, --radius-*, --transition-*, --focus-ring
   ============================ */

/* ---- Form Group ---- */
.form-group {
  position: relative;
  margin-bottom: var(--spacing-5);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-1-5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

/* ---- Text Input & Select ---- */
.form-input,
.form-select {
  display: block;
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 40px;
}

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

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.form-input:disabled,
.form-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-surface);
}

/* Validation states */
.form-input:invalid:not(:placeholder-shown) {
  border-color: var(--color-error);
}

.form-input:invalid:not(:placeholder-shown):focus {
  box-shadow: var(--focus-ring-error);
}

.form-input:valid:not(:placeholder-shown) {
  border-color: var(--color-success);
}

/* JS-driven validation */
.form-group.has-error .form-input {
  border-color: var(--color-error);
}

.form-group.has-error .form-input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 20%, transparent);
}

.form-group.has-error .form-label {
  color: var(--color-error);
}

.form-error-message {
  font-size: 0.8125rem;
  color: var(--color-error);
  margin-top: var(--spacing-1);
}

.form-group.has-success .form-input {
  border-color: var(--color-success);
}

/* Select arrow */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-4) center;
  padding-right: var(--spacing-10);
}

/* ---- Floating Label ---- */
.form-group--floating {
  position: relative;
}

.form-group--floating .form-input {
  padding-top: var(--spacing-5);
  padding-bottom: var(--spacing-2);
}

.form-group--floating .form-label {
  position: absolute;
  top: 50%;
  left: var(--spacing-4);
  transform: translateY(-50%);
  margin-bottom: 0;
  pointer-events: none;
  color: var(--color-text-disabled);
  transition: transform var(--transition-fast), font-size var(--transition-fast), color var(--transition-fast);
  transform-origin: left center;
}

.form-group--floating .form-input:focus ~ .form-label,
.form-group--floating .form-input:not(:placeholder-shown) ~ .form-label {
  transform: translateY(-130%) scale(0.8);
  color: var(--color-primary);
}

/* ---- Checkbox & Radio ---- */
.form-checkbox,
.form-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text);
  min-height: var(--touch-target-min);
}

.form-checkbox input,
.form-radio input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.form-checkbox input:focus-visible,
.form-radio input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---- Toggle Switch ---- */
.form-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text);
  min-height: var(--touch-target-min);
}

.form-toggle__track {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.form-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--color-surface-elevated);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.form-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.form-toggle input:checked + .form-toggle__track {
  background: var(--color-primary);
}

.form-toggle input:checked + .form-toggle__track::after {
  transform: translateX(20px);
}

.form-toggle input:focus-visible + .form-toggle__track {
  box-shadow: var(--focus-ring);
}

/* ---- Hint & Error Text ---- */
.form-hint {
  display: block;
  margin-top: var(--spacing-1-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.form-error {
  display: block;
  margin-top: var(--spacing-1-5);
  font-size: var(--text-xs);
  color: var(--color-error);
  font-weight: 500;
}

/* ---- Dark mode ---- */

/* ── Form Row (2-column grid for side-by-side fields) ───────────────── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
}

.form-row--3col { grid-template-columns: repeat(3, 1fr); }
.form-row--4col { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .form-row--3col,
  .form-row--4col { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .form-row,
  .form-row--3col,
  .form-row--4col { grid-template-columns: 1fr; }
}

/* ── Fieldset / Legend ─────────────────────────────── */
.form-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.form-fieldset legend,
.form-legend {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  padding: 0 var(--spacing-2);
}

/* ── Required indicator ────────────────────────────── */
.form-label--required::after {
  content: " *";
  color: var(--color-error);
  font-weight: 400;
}

/* ── Help text (neutral, distinct from error) ──────── */
.form-help {
  display: block;
  margin-top: var(--spacing-1-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

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

/* ── Input Group (prefix / suffix) ─────────────────── */
.form-input-group {
  display: flex;
  align-items: stretch;
}

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

.form-input-group .form-input:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.form-input-group .form-input:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.form-input-group__addon {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

.form-input-group__addon:first-child {
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.form-input-group__addon:last-child {
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ── Readonly state ────────────────────────────────── */
.form-input[readonly] {
  background: var(--color-surface);
  border-style: dashed;
  cursor: default;
}

/* ── Form section divider ──────────────────────────── */
.form-section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-border);
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-5);
}

/* ── Form actions row ──────────────────────────────── */
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-border);
  margin-top: var(--spacing-6);
}

.form-actions--right {
  justify-content: flex-end;
}

.form-actions--between {
  justify-content: space-between;
}

/* ── Textarea ──────────────────────────────────────── */
.form-textarea {
  display: block;
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  resize: vertical;
  min-height: 120px;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

/* ── Input sizes ───────────────────────────────────── */
.form-input--sm { padding: var(--spacing-2) var(--spacing-3); font-size: var(--text-sm); min-height: 32px; }
.form-input--lg { padding: var(--spacing-4) var(--spacing-5); font-size: var(--text-lg); min-height: 48px; }

@media (prefers-reduced-motion: reduce) {
  .form-input,
  .form-select { transition: none; }
  .form-textarea { transition: none; }
  .form-group--floating .form-label { transition: none; }
  .form-toggle__track { transition: none; }
  .form-toggle__track::after { transition: none; }
}

/* ── badge ─────────────────────────── */
/* ============================
   Badge
   Inline status indicators and labels
   Uses design tokens: --color-*, --spacing-*, --radius-*, --text-*
   ============================ */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-full);
  vertical-align: middle;
  background: color-mix(in srgb, var(--color-primary), transparent 85%);
  color: var(--color-primary-hover, #1d4ed8);
}

/* ---- Color Variants ---- */
.badge--primary {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.badge--success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.badge--warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.badge--error {
  background: var(--color-error-light);
  color: var(--color-error);
}

.badge--info {
  background: var(--color-info-light);
  color: var(--color-info);
}

/* ---- Outline Variant ---- */
.badge--outline {
  background: transparent;
  border: 1px solid currentColor;
}

/* ---- Dot Indicator ---- */
.badge--dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  padding: 0;
  border-radius: var(--radius-full);
  font-size: 0;
  line-height: 0;
}

.badge--dot.badge--primary { background: var(--color-primary); }
.badge--dot.badge--success { background: var(--color-success); }
.badge--dot.badge--warning { background: var(--color-warning); }
.badge--dot.badge--error   { background: var(--color-error); }
.badge--dot.badge--info    { background: var(--color-info); }

/* ---- Soft variants (lighter bg via color-mix) ---- */
.badge--soft-primary { background: color-mix(in srgb, var(--color-primary), transparent 85%); color: var(--color-primary); }
.badge--soft-success { background: color-mix(in srgb, var(--color-success), transparent 85%); color: var(--color-success); }
.badge--soft-warning { background: color-mix(in srgb, var(--color-warning), transparent 85%); color: var(--color-warning); }
.badge--soft-error   { background: color-mix(in srgb, var(--color-error), transparent 85%); color: var(--color-error); }
.badge--soft-info    { background: color-mix(in srgb, var(--color-info), transparent 85%); color: var(--color-info); }

/* ---- Size variants ---- */
.badge--sm { padding: 0.125rem var(--spacing-1-5); font-size: 0.625rem; }
.badge--md { padding: var(--spacing-0-5) var(--spacing-2); font-size: var(--text-xs); }
.badge--lg { padding: var(--spacing-1) var(--spacing-3); font-size: var(--text-sm); }

/* ---- Count bubble (nav/bell) ---- */
.badge--count {
  min-width: 20px;
  height: 20px;
  padding: 0 var(--spacing-1);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* ---- Pulse animation (live/online) ---- */
.badge--pulse {
  position: relative;
}

.badge--pulse::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: inherit;
  opacity: 0.6;
  animation: badge-pulse 1.5s ease-out infinite;
}

@keyframes badge-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ---- Dismissible badge (tag input) ---- */
.badge--dismissible {
  gap: var(--spacing-1);
}

.badge__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.6;
  color: currentColor;
  border-radius: var(--radius-full);
  transition: opacity var(--transition-fast);
}

.badge__close:hover { opacity: 1; }

/* ---- Dark mode ---- */

@media (prefers-reduced-motion: reduce) {
  .badge--pulse::before { animation: none; }
  .badge__close { transition: none; }
}

/* ── chip ─────────────────────────── */
/* Sogorox Factory — Filter Chip / Tag Bar (Level 1 Skeleton용)
   Removable chips, horizontal scroll on mobile.
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14) */

/* ============================
   Chip Bar (horizontal scrollable row)
   ============================ */
.chip-bar {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  align-items: center;
}

.chip-bar--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--spacing-1);
}

.chip-bar--scroll::-webkit-scrollbar {
  display: none;
}

/* ============================
   Chip
   ============================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  cursor: default;
  min-height: 28px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

/* ---- Interactive chip (clickable filter) ---- */
.chip--interactive {
  cursor: pointer;
}

.chip--interactive:hover {
  background: var(--color-surface-elevated, var(--color-surface));
  border-color: var(--color-border-strong);
}

.chip--interactive:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- Active state ---- */
.chip--active {
  background: var(--color-primary);
  color: var(--color-on-primary, var(--color-on-primary));
  border-color: var(--color-primary);
}

.chip--active:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* ---- Remove button ---- */
.chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  border-radius: var(--radius-full);
  padding: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

.chip__remove:hover {
  opacity: 1;
  background: var(--_dyn-30);
}

.chip--active .chip__remove:hover {
  background: var(--_dyn-31);
}

.chip__remove-icon {
  width: 12px;
  height: 12px;
}

/* ---- Chip icon/avatar prefix ---- */
.chip__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.chip__avatar {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
  margin-left: -4px;
}

/* ============================
   Size Variants
   ============================ */
.chip--sm {
  padding: 2px var(--spacing-2);
  font-size: 10px;
  min-height: 24px;
}

.chip--lg {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--text-sm);
  min-height: 36px;
}

/* ============================
   Color Variants
   ============================ */
.chip--success { background: var(--color-success); color: var(--color-on-primary); border-color: var(--color-success); }
.chip--warning { background: var(--color-warning); color: var(--color-text); border-color: var(--color-warning); }
.chip--error   { background: var(--color-error); color: var(--color-on-primary); border-color: var(--color-error); }
.chip--info    { background: var(--color-info, var(--color-primary)); color: var(--color-on-primary); border-color: var(--color-info, var(--color-primary)); }

/* ============================
   Dark Mode
   ============================ */

/* ============================
   Reduced Motion
   ============================ */
@media (prefers-reduced-motion: reduce) {
  .chip,
  .chip__remove {
    transition: none;
  }
}

/* ── grid ─────────────────────────── */
/* Sogorox Factory — 공통 그리드 유틸리티 (Level 1 Skeleton용)
   5-Tier Breakpoint System (Mobile-First):
   XS: 0-480px | SM: 481-768px | MD: 769-1024px | LG: 1025-1280px | XL: 1281px+
   Reference: variables.css --bp-xs/sm/md/lg/xl */

.container {
  width: 100%;
  max-width: var(--container-max, 1200px);
  margin-inline: auto;
  padding-inline: clamp(var(--spacing-4), 5vw, var(--spacing-10));
}

/* ============================
   Grid — Mobile-First (base = 1 column)
   ============================ */

.grid {
  display: grid;
  gap: var(--spacing-4);
}

.grid-2,
.grid-3,
.grid-4 {
  grid-template-columns: 1fr;
}

.grid-auto {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* SM (481px+): 2-column for all multi-column grids */
@media (min-width: 481px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* LG (1025px+): full column count restored */
@media (min-width: 1025px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

/* XL (1281px+): container centering for ultra-wide */
@media (min-width: 1281px) {
  .container {
    max-width: var(--container-2xl, 1440px);
  }
}

/* ============================
   Flex Utilities
   ============================ */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

/* ============================
   Gap Utilities
   ============================ */

.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }

/* ── layout ─────────────────────────── */
/* Sogorox Factory — 공통 레이아웃 유틸리티 (Level 1 Skeleton용)
   모든 boilerplate/page 스니펫이 참조하는 기본 구조 CSS.
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14) */

/* ============================
   Skip Navigation (WCAG)
   ============================ */
.skip-link,
.skip-nav {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: var(--z-tooltip, 500);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-primary);
  color: var(--color-on-primary, var(--color-on-primary));
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus,
.skip-nav:focus {
  left: var(--spacing-4);
  top: var(--spacing-2);
  width: auto;
  height: auto;
  overflow: visible;
}

/* ============================
   Body — Flex Column + Header Clearance
   ============================ */
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding-top: var(--header-desktop, 80px);
}

body > main,
body > [role="main"],
body > #main-content,
#main-content {
  flex: 1 0 auto;
}

body > footer,
body > .footer {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  body {
    padding-top: var(--header-mobile, 56px);
  }
}

@media (max-width: 768px) {
  .page {
    min-height: calc(100vh - var(--header-mobile, 56px));
  }
}

/* ============================
   Dashboard Layout (Sidebar + Main)
   ============================ */
.layout-dashboard {
  display: flex;
  min-height: calc(100vh - var(--header-desktop, 80px));
}

.layout-dashboard__sidebar {
  width: var(--sidebar-expanded, 240px);
  flex-shrink: 0;
  transition: width var(--smooth-motion, 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94));
}

.layout-dashboard__sidebar.sidebar--collapsed {
  width: var(--sidebar-collapsed, 64px);
}

.layout-dashboard__content {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-6);
  background: var(--color-background);
}

@media (max-width: 768px) {
  .layout-dashboard {
    flex-direction: column;
    min-height: calc(100vh - var(--header-mobile, 56px));
  }

  .layout-dashboard__sidebar {
    width: 100%;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay, 200);
    transform: translateX(-100%);
    transition: transform var(--smooth-motion, 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94));
  }

  .layout-dashboard__sidebar.sidebar--expanded {
    transform: translateX(0);
  }

  .layout-dashboard__content {
    padding: var(--spacing-4);
  }
}

/* ============================
   Section Spacing (components layer — overridden by utilities layer)
   ============================ */
.section {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.section--sm {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.section--lg {
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

/* ============================
   Section Color Variants
   ============================ */
.section--surface {
  background: var(--color-surface);
}

.section--alt {
  background: var(--color-background);
}

.section--brand {
  background: var(--color-primary);
  color: var(--color-on-primary, var(--color-on-primary));
}

/* ============================
   Bottom Tab Bar Clearance (PWA mobile)
   ============================ */
@media (max-width: 768px) {
  body.has-bottom-tab {
    padding-bottom: calc(var(--bottom-tab-height, 56px) + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  }
}

/* ============================
   Prose Container (readable line length)
   ============================ */
.prose {
  max-width: var(--prose-max-width, 65ch);
  margin-inline: auto;
}

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

/* ── typography ─────────────────────────── */
/* Sogorox Factory — 공통 타이포그래피 유틸리티 (Level 1 Skeleton용) */

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }

.font-sans { font-family: var(--font-sans); }
.font-heading { font-family: var(--font-heading); }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

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

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

.leading-tight { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Dark Mode Overrides ───────────────────────────────────────────── */
/* ── glass ─────────────────────────── */
/* ============================
   Glassmorphism / Liquid Glass Utility
   Uses design tokens: --glass-surface-*, --glass-blur, --glass-border-*
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §1-3
   ============================ */

.glass {
  background: var(--glass-surface-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border-light);
  border-radius: var(--radius-xl);
}

.glass-light {
  background: var(--_dyn-32);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  border: 1px solid var(--_dyn-24);
  border-radius: var(--radius-xl);
}

.glass-dark {
  background: var(--glass-surface-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border-dark);
  border-radius: var(--radius-xl);
}

/* Fallback: no backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: var(--color-surface); border: 1px solid var(--color-border); }
  .glass-light { background: var(--_dyn-33); border: 1px solid var(--color-border); }
  .glass-dark { background: var(--color-dark-surface); border: 1px solid var(--color-dark-border); }
}

/* Auto dark mode */
/* ── empty-state ─────────────────────────── */
/* Sogorox Factory — Empty State Component (Level 1 Skeleton용)
   Centered illustration + text + CTA for empty lists, no results, no data.
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14) */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-12, 3rem) var(--spacing-6);
  max-width: 400px;
  margin: 0 auto;
}

.empty-state__icon {
  width: 80px;
  height: 80px;
  color: var(--color-text-disabled);
  margin-bottom: var(--spacing-4);
}

.empty-state__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0 0 var(--spacing-2);
}

.empty-state__description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed, 1.7);
  margin: 0 0 var(--spacing-6);
}

.empty-state__action {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-5);
  background: var(--color-primary);
  color: var(--color-on-primary, var(--color-on-primary));
  border: none;
  border-radius: var(--radius-full);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  min-height: var(--touch-target-min, 44px);
  transition: transform var(--spring-motion), box-shadow var(--spring-motion);
}

.empty-state__action:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.empty-state__action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

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

/* ── Dark Mode Overrides ───────────────────────────────────────────── */
/* ── skeleton-loader ─────────────────────────── */
/* ============================
   Skeleton Loader — Shimmer placeholders
   .skeleton-text, .skeleton-image, .skeleton-card, .skeleton-avatar
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §1-4
   ============================ */

/* ---- Base shimmer ---- */
[class^="skeleton-"],
[class*=" skeleton-"] {
  background: linear-gradient(
    90deg,
    var(--color-surface) 25%,
    var(--color-border) 50%,
    var(--color-surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

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

/* ---- Variants ---- */
.skeleton-text {
  height: 1em;
  width: 100%;
  margin-bottom: var(--spacing-2);
}

.skeleton-text:last-child {
  width: 70%;
}

.skeleton-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
}

.skeleton-card {
  width: 100%;
  min-height: 200px;
  border-radius: var(--radius-xl);
  padding: var(--spacing-4);
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.skeleton-button {
  height: 40px;
  width: 120px;
  border-radius: var(--radius-full);
}

/* ---- Skeleton-to-content transition (CLS prevention) ---- */
.skeleton-container {
  position: relative;
}

.skeleton-container > [class^="skeleton-"],
.skeleton-container > [class*=" skeleton-"] {
  transition: opacity var(--transition-normal, 300ms) var(--smooth-motion, ease);
}

.skeleton-container.skeleton-loaded > [class^="skeleton-"],
.skeleton-container.skeleton-loaded > [class*=" skeleton-"] {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.skeleton-container > .skeleton-content {
  opacity: 0;
  transition: opacity var(--transition-normal, 300ms) var(--smooth-motion, ease);
}

.skeleton-container.skeleton-loaded > .skeleton-content {
  opacity: 1;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  [class^="skeleton-"],
  [class*=" skeleton-"] {
    animation: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
  }
}

/* ---- Dark mode ---- */
/* ── animations ─────────────────────────── */
/* ============================
   Scroll Animations + Kinetic Typography
   Pairs with js/scroll-animations.js
   Uses data-animate="fade-up|fade-in|slide-left|slide-right|scale-up|blur-in"
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §1-1
   ============================ */

/* ---- Hidden state (before viewport entry) ---- */
.animate--hidden {
  opacity: 0;
  will-change: opacity, transform;
}

/* ---- Visible state (after viewport entry) ---- */
.animate--visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---- Per-animation hidden states ---- */
[data-animate="fade-up"].animate--hidden {
  transform: translateY(30px);
}

[data-animate="fade-in"].animate--hidden {
  /* opacity only — no transform needed */
}

[data-animate="slide-left"].animate--hidden {
  transform: translateX(40px);
}

[data-animate="slide-right"].animate--hidden {
  transform: translateX(-40px);
}

[data-animate="scale-up"].animate--hidden {
  transform: scale(0.92);
}

[data-animate="blur-in"].animate--hidden {
  filter: blur(8px);
  transform: translateY(10px);
}

/* ---- Transition (applied to all animated elements) ---- */
[data-animate] {
  transition-property: opacity, transform, filter;
  transition-duration: var(--duration-entrance);
  transition-timing-function: var(--ease-standard);
}

/* ---- Kinetic Typography Utilities ---- */
.text-reveal {
  display: inline-block;
  overflow: hidden;
}

.text-reveal > span {
  display: inline-block;
  transform: translateY(100%);
  transition: transform var(--spring-motion);
}

.text-reveal.animate--visible > span {
  transform: translateY(0);
}

.text-gradient-shift {
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-primary-hover) 50%,
    var(--color-primary) 100%
  );
  animation: gradient-shift 4s linear infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ---- Stagger children utility ---- */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}

.stagger-children.animate--visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
.stagger-children.animate--visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: none; }
.stagger-children.animate--visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; }
.stagger-children.animate--visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; }
.stagger-children.animate--visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: none; }
.stagger-children.animate--visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; }

/* ---- Animation delay utilities ---- */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* hover-lift, hover-scale, hover-glow → canonical: micro-interactions.css */

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  .text-reveal > span,
  .stagger-children > *,
  .text-gradient-shift {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ── micro-interactions ─────────────────────────── */
/* ============================
   Micro-Interactions
   Validation shake, success pulse, ripple effect, smooth focus
   Uses design tokens: --color-*, --transition-*, --spring-motion
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14)
   ============================ */

/* ---- Form Validation Shake ---- */
.shake {
  animation: mi-shake var(--duration-normal) var(--ease-standard);
}

@keyframes mi-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-1px); }
}

/* ---- Success Checkmark Animation ---- */
.success-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  animation: mi-pop var(--duration-slow) var(--ease-spring);
}

.success-check svg {
  stroke: var(--color-on-primary);
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: mi-draw-check var(--duration-slow) var(--ease-standard) forwards;
  animation-delay: 200ms;
}

@keyframes mi-pop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes mi-draw-check {
  to { stroke-dashoffset: 0; }
}

/* ---- Button Ripple Effect (CSS-only) ---- */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--color-on-primary-faded) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-standard), opacity var(--duration-normal);
}

.btn-ripple:active::after {
  transform: scale(0);
  opacity: 0.3;
  transition: 0s;
}

/* ---- Smooth Scale on Press ---- */
.press-scale {
  transition: transform var(--transition-fast);
}

.press-scale:active {
  transform: scale(0.97);
}

/* ---- Focus Glow ---- */
.focus-glow:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background),
              0 0 0 4px var(--color-primary),
              0 0 16px var(--color-primary-light);
  transition: box-shadow var(--transition-fast);
}

/* ---- Slide-in from bottom (for toasts, notifications) ---- */
.slide-in-up {
  animation: mi-slide-in-up var(--duration-normal) var(--ease-spring) forwards;
}

@keyframes mi-slide-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Slide-out to bottom ---- */
.slide-out-down {
  animation: mi-slide-out-down var(--duration-normal) var(--ease-standard) forwards;
}

@keyframes mi-slide-out-down {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* ---- Skeleton Pulse (content loading) ---- */
.pulse {
  animation: mi-pulse 1.5s var(--ease-standard) infinite;
}

@keyframes mi-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ---- Counter / Number Tick ---- */
.counter-tick {
  display: inline-block;
  animation: mi-counter-tick var(--duration-normal) var(--ease-spring);
}

@keyframes mi-counter-tick {
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---- Hover Lift (reusable utility) ---- */
.hover-lift {
  transition: transform var(--spring-motion), box-shadow var(--spring-motion);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ---- Hover Glow ---- */
.hover-glow {
  transition: box-shadow var(--transition-fast);
}

.hover-glow:hover {
  box-shadow: 0 0 20px var(--color-primary-light);
}

/* ---- Input Focus Underline ---- */
.input-underline {
  position: relative;
}

.input-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--transition-fast), left var(--transition-fast);
}

.input-underline:focus-within::after {
  width: 100%;
  left: 0;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .shake,
  .success-check,
  .success-check svg,
  .slide-in-up,
  .slide-out-down,
  .pulse,
  .counter-tick {
    animation: none !important;
  }

  .btn-ripple::after {
    display: none;
  }

  .press-scale:active {
    transform: none;
  }

  .hover-lift:hover {
    transform: none;
  }
}

/* ── responsive ─────────────────────────── */
/* Sogorox Factory — Responsive Utilities (Level 1 Skeleton용)
   5-Tier Breakpoint System (Mobile-First):
   XS: 0-480px | SM: 481-768px | MD: 769-1024px | LG: 1025-1280px | XL: 1281px+
   Reference: variables.css --bp-xs/sm/md/lg/xl */

/* ============================
   Visibility — Hide at breakpoint and above
   ============================ */

/* hide from SM (481px) and up */
@media (min-width: 481px)  { .hide-sm-up  { display: none !important; } }
/* hide from MD (769px) and up */
@media (min-width: 769px)  { .hide-md-up  { display: none !important; } }
/* hide from LG (1025px) and up */
@media (min-width: 1025px) { .hide-lg-up  { display: none !important; } }

/* ============================
   Visibility — Hide at breakpoint and below
   ============================ */

/* hide at XS only (0-480px) */
@media (max-width: 480px) { .hide-xs { display: none !important; } }
/* hide at SM and below (0-768px) */
@media (max-width: 768px) { .hide-sm { display: none !important; } }
/* hide at MD and below (0-1024px) */
@media (max-width: 1024px) { .hide-md { display: none !important; } }

/* ============================
   Visibility — Show only at specific tier
   ============================ */

.show-xs-only { display: none !important; }
@media (max-width: 480px) { .show-xs-only { display: revert !important; } }

.show-sm-only { display: none !important; }
@media (min-width: 481px) and (max-width: 768px) { .show-sm-only { display: revert !important; } }

.show-md-only { display: none !important; }
@media (min-width: 769px) and (max-width: 1024px) { .show-md-only { display: revert !important; } }

.show-lg-only { display: none !important; }
@media (min-width: 1025px) and (max-width: 1280px) { .show-lg-only { display: revert !important; } }

.show-xl-only { display: none !important; }
@media (min-width: 1281px) { .show-xl-only { display: revert !important; } }

/* ============================
   Stack — Collapse flex-row to column
   ============================ */

.stack-sm {
  display: flex;
  gap: var(--spacing-4);
}
@media (max-width: 768px) {
  .stack-sm {
    flex-direction: column;
  }
}

.stack-md {
  display: flex;
  gap: var(--spacing-4);
}
@media (max-width: 1024px) {
  .stack-md {
    flex-direction: column;
  }
}

/* ============================
   Container Variants
   ============================ */

.container--narrow {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: clamp(var(--spacing-4), 5vw, var(--spacing-10));
}

.container--wide {
  max-width: var(--container-2xl, 1440px);
  margin-inline: auto;
  padding-inline: clamp(var(--spacing-4), 5vw, var(--spacing-10));
}

/* ============================
   Text Alignment — Responsive
   ============================ */

@media (max-width: 768px) {
  .text-center-sm {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .text-center-xs {
    text-align: center;
  }
}

/* ============================
   Full-Width — Mobile only
   ============================ */

@media (max-width: 480px) {
  .full-width-xs {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .full-width-sm {
    width: 100%;
  }
}

/* ── back-to-top ─────────────────────────── */
/* Back to Top — fixed button, appears after 100px scroll
   Pairs with: js/back-to-top.js */

.back-to-top {
  position: fixed;
  bottom: var(--spacing-xl, 1.875rem);
  right: var(--spacing-xl, 1.875rem);
  width: 44px;
  height: 44px; /* WCAG 2.5.5 touch target minimum */
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  box-shadow: var(--shadow-md);
  transition:
    opacity var(--smooth-motion),
    visibility var(--smooth-motion),
    transform var(--spring-motion),
    box-shadow var(--spring-motion);
  z-index: var(--z-overlay);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.back-to-top:active {
  transform: scale(0.95);
}

.back-to-top:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px var(--color-primary)), var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.01ms, visibility 0.01ms;
  }
  .back-to-top:hover,
  .back-to-top:active {
    transform: none;
  }
}

@media (max-width: 480px) {
  .back-to-top {
    bottom: var(--spacing-md, 0.875rem);
    right: var(--spacing-md, 0.875rem);
  }
}

/* ── Dark Mode Overrides ───────────────────────────────────────────── */
/* ── stats ─────────────────────────── */
/* Stats Counter Section
   AI: sogorox-factory | Generated: 2026-05-01 | Reviewed: sogorox-qa (2026-05-14) */

.stats-section {
  background: var(--color-primary);
  color: var(--color-on-primary, var(--color-on-primary));
  padding: var(--spacing-10) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-6);
  text-align: center;
}

@media (max-width: 767px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
  .stats-grid { grid-template-columns: 1fr; }
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

.stat-value {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  font-weight: 800;
  line-height: 1;
}

.stat-label {
  font-size: var(--text-sm);
  opacity: 0.8;
}

/* ── Dark Mode Overrides ───────────────────────────────────────────── */
/* ── cta ─────────────────────────── */
/* CTA Variants — cta-split & cta-download
   AI: sogorox-factory | Generated: 2026-05-01 | Reviewed: sogorox-qa (2026-05-14) */

/* ── CTA Split ──────────────────────────────────────────────────────── */
.cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--spacing-12, 3rem);
}

@media (max-width: 767px) {
  .cta-split { grid-template-columns: 1fr; }
}

.cta-split__content h2 {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  margin: 0 0 var(--spacing-3);
}

.cta-split__content p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed, 1.7);
  margin: 0 0 var(--spacing-6);
  max-width: 45ch;
}

.cta-split__benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.cta-split__benefit {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.cta-split__benefit-icon {
  flex-shrink: 0;
  color: var(--color-success);
}

.cta-split__media {
  /* container for image, form, or illustration */
}

.cta-split__media-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-disabled);
}

/* ── CTA Download ───────────────────────────────────────────────────── */
.cta-download {
  background: var(--color-primary);
  color: var(--color-on-primary, var(--color-on-primary));
  padding: var(--spacing-12) 0;
  text-align: center;
}

.cta-download h2 {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  margin: 0 0 var(--spacing-3);
}

.cta-download p {
  max-width: 45ch;
  margin: 0 auto var(--spacing-6);
  opacity: 0.9;
}

.cta-download__actions {
  display: flex;
  gap: var(--spacing-3);
  justify-content: center;
  flex-wrap: wrap;
}

.cta-download__btn {
  background: var(--color-text);
  color: var(--color-surface-elevated);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-5);
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-weight: 500;
  transition: opacity var(--transition-ui, 200ms);
}

.cta-download__btn:hover { opacity: 0.85; }

/* ── Dark Mode Overrides ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cta-download__btn { transition: none; }
}

/* ── feature ─────────────────────────── */
/* Feature Sections — icon-grid & general feature layouts
   AI: sogorox-factory | Generated: 2026-05-01 | Reviewed: sogorox-qa (2026-05-14) */

/* ── Section Header (reusable across sections) ──────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-8);
}

.section-header h2 {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  margin: 0 0 var(--spacing-2);
}

.section-header p {
  color: var(--color-text-muted);
  max-width: 50ch;
  margin: 0 auto;
}

.section-header__eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider, 0.075em);
  margin: 0 0 var(--spacing-2);
}

/* ── Feature Grid ───────────────────────────────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-6);
}

@media (max-width: 1023px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* ── Feature Card ───────────────────────────────────────────────────── */
.feature-card {
  padding: var(--spacing-5);
}

.feature-card h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--spacing-2);
}

.feature-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-relaxed, 1.7);
}

/* ── Feature Icon ───────────────────────────────────────────────────── */
.feature-icon {
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-3);
  color: var(--color-on-primary, var(--color-on-primary));
  flex-shrink: 0;
}

.feature-icon--sm {
  width: 36px;
  height: 36px;
}

.feature-icon--lg {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
}

.feature-icon--surface {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* ── Dark Mode Overrides ───────────────────────────────────────────── */
/* ── saas ─────────────────────────── */
/* SaaS Product Specific Components — Dashboard Preview & Integrations
   AI: sogorox-factory | Generated: 2026-05-01 | Reviewed: sogorox-qa (2026-05-14) */

/* ── Dashboard Preview Container ───────────────────────────────────── */
.dashboard-preview {
  width: 100%;
  padding: var(--spacing-6) var(--spacing-4);
}

.dashboard-preview__frame {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

/* ── macOS-style Browser Chrome ─────────────────────────────────────── */
.dashboard-preview__topbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.dashboard-preview__dots {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.dashboard-preview__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--color-border);
}

/* Traffic light dots — fixed UI chrome colors, not design tokens */
.dashboard-preview__dot--red    { background: var(--_dyn-17); }
.dashboard-preview__dot--yellow { background: var(--_dyn-18); }
.dashboard-preview__dot--green  { background: var(--_dyn-19); }

.dashboard-preview__url-bar {
  flex: 1;
  height: 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ── Sidebar + Main Layout ──────────────────────────────────────────── */
.dashboard-preview__body {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 320px;
}

@media (max-width: 639px) {
  .dashboard-preview__body { grid-template-columns: 1fr; }
}

.dashboard-preview__sidebar {
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

@media (max-width: 639px) {
  .dashboard-preview__sidebar { display: none; }
}

/* ── Nav Item Skeletons ─────────────────────────────────────────────── */
.dashboard-preview__sidebar-item {
  height: 32px;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--smooth-motion);
}

.dashboard-preview__sidebar-item--active {
  background: var(--color-primary);
  opacity: 0.15;
}

/* ── Main Content Area ──────────────────────────────────────────────── */
.dashboard-preview__main {
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/* ── Metrics Row ────────────────────────────────────────────────────── */
.dashboard-preview__stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-3);
}

@media (max-width: 639px) {
  .dashboard-preview__stat-row { grid-template-columns: repeat(2, 1fr); }
}

.dashboard-preview__stat {
  height: 64px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ── Chart Area Skeleton ────────────────────────────────────────────── */
.dashboard-preview__chart {
  height: 140px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ── Integration Grid ───────────────────────────────────────────────── */
.integration-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
  align-items: center;
}

@media (min-width: 640px) {
  .integration-grid { grid-template-columns: repeat(5, 1fr); }
}

.integrations-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

.integrations-grid__item--center {
  grid-row: 1;
  position: relative;
}

.integrations-grid__badge {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: transform var(--spring-motion), box-shadow var(--spring-motion);

  &:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}

.integrations-grid__name {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* ── Reduced Motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .integrations-grid__badge { transition: none; }
  .integrations-grid__badge:hover { transform: none; }
}

/* ── Dark Mode Overrides ───────────────────────────────────────────── */
/* ── pricing ─────────────────────────── */
/* ============================
   Pricing Table Styles
   Uses design tokens: --color-*, --spacing-*, --radius-*, --shadow-*
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §2-2
   ============================ */

.pricing {
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
}

.pricing__heading {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  font-weight: 700;
  text-align: center;
  color: var(--color-text);
  margin-bottom: var(--spacing-2);
}

.pricing__subheading {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  margin-bottom: var(--spacing-8);
}

/* Toggle */
.pricing__toggle {
  display: flex;
  justify-content: center;
  gap: var(--spacing-1);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  padding: var(--spacing-1);
  width: fit-content;
  margin: 0 auto var(--spacing-10);
  border: 1px solid var(--color-border);
}

.pricing__toggle-btn {
  padding: var(--spacing-2) var(--spacing-5);
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.pricing__toggle-btn--active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.pricing__save-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-success);
  margin-left: var(--spacing-1);
}

.pricing__toggle-btn--active .pricing__save-badge {
  color: var(--_dyn-35);
}

/* Grid */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-6);
  max-width: 1000px;
  margin: 0 auto;
  align-items: stretch;
}

/* Card */
.pricing__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-8);
  text-align: center;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.pricing__card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Featured card */
.pricing__card--featured {
  border-color: var(--color-primary);
  border-width: 2px;
  box-shadow: var(--shadow-xl);
  transform: scale(1.04);
}

.pricing__card--featured:hover {
  transform: scale(1.04) translateY(-4px);
}

.pricing__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--spacing-1) var(--spacing-4);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pricing__plan-name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-1);
}

.pricing__plan-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-6);
}

/* Price */
.pricing__price {
  margin-bottom: var(--spacing-6);
}

.pricing__amount {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-text);
  transition: opacity 0.2s ease;
}

.pricing__period {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Features */
.pricing__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-8);
  text-align: left;
  flex: 1;
}

.pricing__feature {
  padding: var(--spacing-2) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding-left: var(--spacing-6);
  position: relative;
}

.pricing__feature::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: 700;
}

/* CTA */
.pricing__cta {
  display: block;
  width: 100%;
  padding: var(--spacing-3) var(--spacing-6);
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  text-align: center;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), transform var(--transition-fast);
  margin-top: auto;
}

.pricing__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.pricing__cta--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.pricing__cta--primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.pricing__cta--secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}

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

/* Mobile */
@media (max-width: 768px) {
  .pricing__card--featured {
    transform: none;
  }
  .pricing__card--featured:hover {
    transform: translateY(-4px);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .pricing__toggle-btn,
  .pricing__card,
  .pricing__cta {
    transition: none;
  }
}

/* ── tabs ─────────────────────────── */
/* ============================
   Tabs & Segment Control
   Accessible tab navigation with ARIA support
   Uses design tokens: --color-*, --spacing-*, --radius-*, --transition-*
   ============================ */

/* ---- Container ---- */
.tabs {
  width: 100%;
}

/* ---- Tab List ---- */
.tabs__list {
  display: flex;
  gap: var(--spacing-1);
  border-bottom: 2px solid var(--color-border);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Tab Trigger ---- */
.tabs__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  min-height: var(--touch-target-min);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.tabs__trigger:hover {
  color: var(--color-text);
  background: var(--color-surface);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.tabs__trigger[aria-selected="true"] {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom-color: var(--color-primary);
}

.tabs__trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---- Tab Panel ---- */
.tabs__panel {
  padding-top: var(--spacing-5);
}

.tabs__panel[hidden] {
  display: none;
}

/* ---- Segment Control Variant ---- */
.tabs--segment .tabs__list {
  display: inline-flex;
  gap: var(--spacing-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-1);
}

.tabs--segment .tabs__trigger {
  border-bottom: none;
  margin-bottom: 0;
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-4);
}

.tabs--segment .tabs__trigger:hover {
  background: transparent;
}

.tabs--segment .tabs__trigger[aria-selected="true"] {
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  border-bottom-color: transparent;
}

/* ---- Vertical tabs ---- */
.tabs--vertical {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--spacing-6);
}

.tabs--vertical .tabs__list {
  flex-direction: column;
  border-bottom: none;
  border-right: 2px solid var(--color-border);
  gap: 0;
}

.tabs--vertical .tabs__trigger {
  border-bottom: none;
  border-right: 2px solid transparent;
  margin-bottom: 0;
  margin-right: -2px;
  text-align: left;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.tabs--vertical .tabs__trigger[aria-selected="true"] {
  border-right-color: var(--color-primary);
  border-bottom-color: transparent;
  background: var(--color-primary-light);
}

.tabs--vertical .tabs__panel {
  padding-top: 0;
}

@media (max-width: 768px) {
  .tabs--vertical {
    grid-template-columns: 1fr;
  }
  .tabs--vertical .tabs__list {
    flex-direction: row;
    border-right: none;
    border-bottom: 2px solid var(--color-border);
    overflow-x: auto;
  }
  .tabs--vertical .tabs__trigger {
    border-right: none;
    border-bottom: 2px solid transparent;
    margin-right: 0;
    margin-bottom: -2px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  .tabs--vertical .tabs__trigger[aria-selected="true"] {
    border-right-color: transparent;
    border-bottom-color: var(--color-primary);
  }
}

/* ---- Disabled tab ---- */
.tabs__trigger[disabled],
.tabs__trigger--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Tab badge (count) ---- */
.tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--spacing-1);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-full);
  background: var(--color-surface-200, var(--color-surface-200));
  color: var(--color-text-muted);
}

.tabs__trigger[aria-selected="true"] .tabs__badge {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* ---- Scrollable tabs (hide scrollbar) ---- */
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__list { scrollbar-width: none; }

/* ---- Pill variant ---- */
.tabs--pill .tabs__list {
  border-bottom: none;
  gap: var(--spacing-2);
}

.tabs--pill .tabs__trigger {
  border-bottom: none;
  margin-bottom: 0;
  border-radius: var(--radius-full);
  padding: var(--spacing-2) var(--spacing-4);
}

.tabs--pill .tabs__trigger[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-bottom-color: transparent;
}

/* ---- Dark mode ---- */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .tabs__trigger {
    transition: none;
  }
}

/* ── dialog ─────────────────────────── */
/* ============================
   Dialog
   Enhances native <dialog> element
   Uses design tokens: --color-*, --spacing-*, --radius-*, --shadow-*, --glass-*
   ============================ */

/* ---- Entry Animation ---- */
@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ---- Base Dialog ---- */
.dialog {
  padding: 0;
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  overflow: hidden;
  max-width: 560px;
  width: calc(100% - var(--spacing-8));
}

.dialog::backdrop {
  background: var(--color-overlay);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.dialog[open] {
  animation: dialog-enter var(--transition-normal) both;
}

/* ---- Header ---- */
.dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
}

.dialog__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}

.dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.dialog__close:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

.dialog__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- Body ---- */
.dialog__body {
  padding: var(--spacing-5);
  overflow-y: auto;
  max-height: 60vh;
}

/* ---- Footer ---- */
.dialog__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-5);
  border-top: 1px solid var(--color-border);
}

/* ---- Size Variants ---- */
.dialog--sm { max-width: 400px; }
.dialog--md { max-width: 560px; }
.dialog--lg { max-width: 720px; }
.dialog--full {
  max-width: 95vw;
  max-height: 95vh;
  width: 95vw;
  height: 95vh;
}

.dialog--full .dialog__body {
  max-height: none;
  flex: 1;
}

/* ---- Alert Dialog (confirm/cancel only, no close btn) ---- */
.dialog--alert {
  max-width: 400px;
}

.dialog--alert .dialog__body {
  text-align: center;
  padding: var(--spacing-6) var(--spacing-5);
}

.dialog--alert .dialog__footer {
  justify-content: center;
}

.dialog--alert .dialog__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
}

.dialog--alert .dialog__icon--danger {
  background: var(--color-error-light);
  color: var(--color-error);
}

.dialog--alert .dialog__icon--warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.dialog--alert .dialog__icon--success {
  background: var(--color-success-light);
  color: var(--color-success);
}

/* ---- Danger zone confirmation ---- */
.dialog--danger .dialog__header {
  border-bottom-color: var(--color-error-light);
}

.dialog--danger .dialog__title {
  color: var(--color-error);
}

/* ---- Drawer variant (slide from right) ---- */
@keyframes dialog-drawer-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes dialog-drawer-left {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.dialog--drawer-right,
.dialog--drawer-left {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  border-radius: 0;
  margin: 0;
  max-width: 420px;
}

.dialog--drawer-right {
  right: 0;
  left: auto;
  border-left: 1px solid var(--color-border);
}

.dialog--drawer-right[open] {
  animation: dialog-drawer-right var(--transition-normal) both;
}

.dialog--drawer-left {
  left: 0;
  right: auto;
  border-right: 1px solid var(--color-border);
}

.dialog--drawer-left[open] {
  animation: dialog-drawer-left var(--transition-normal) both;
}

.dialog--drawer-right .dialog__body,
.dialog--drawer-left .dialog__body {
  max-height: none;
  flex: 1;
  overflow-y: auto;
}

/* ---- Dark mode ---- */

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .dialog[open] {
    animation: none;
  }
}

/* ── search ─────────────────────────── */
/* Sogorox Factory — Search Bar + Autocomplete (Level 1 Skeleton용)
   Pairs with search.js. Scrim overlay, recent searches, keyboard nav.
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14) */

/* ============================
   Search Wrapper
   ============================ */
.search {
  position: relative;
  width: 100%;
  max-width: 560px;
}

.search__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search__input {
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  padding-left: calc(var(--spacing-4) + 24px + var(--spacing-2));
  font: inherit;
  font-size: var(--text-base);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text);
  min-height: var(--touch-target-min, 44px);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.search__icon {
  position: absolute;
  left: var(--spacing-4);
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.search__clear {
  position: absolute;
  right: var(--spacing-2);
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
}

.search__clear:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

.search.search--has-value .search__clear {
  display: inline-flex;
}

/* ============================
   Dropdown Panel
   ============================ */
.search__dropdown {
  position: absolute;
  top: calc(100% + var(--spacing-2));
  left: 0;
  right: 0;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown, 50);
  display: none;
  overflow: hidden;
  max-height: 400px;
  overflow-y: auto;
}

.search.search--open .search__dropdown {
  display: block;
}

/* ---- Section headers ---- */
.search__section-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--spacing-3) var(--spacing-4) var(--spacing-1);
}

/* ---- Result items ---- */
.search__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-4);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  min-height: var(--touch-target-min, 44px);
}

.search__item:hover,
.search__item--highlighted {
  background: var(--color-surface);
}

.search__item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.search__item-icon {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.search__item-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

/* ---- Category chips ---- */
.search__categories {
  display: flex;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4) var(--spacing-3);
  flex-wrap: wrap;
}

.search__category-chip {
  font-size: var(--text-xs);
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-text);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.search__category-chip:hover {
  background: var(--color-primary);
  color: var(--color-on-primary, var(--color-on-primary));
  border-color: var(--color-primary);
}

/* ============================
   Scrim (background overlay)
   ============================ */
.search-scrim {
  position: fixed;
  inset: 0;
  background: var(--color-overlay, var(--_dyn-27));
  z-index: calc(var(--z-dropdown, 50) - 1);
  display: none;
}

.search-scrim--visible {
  display: block;
}

/* ============================
   Dark Mode
   ============================ */

/* ============================
   Reduced Motion
   ============================ */
@media (prefers-reduced-motion: reduce) {
  .search__input,
  .search__item,
  .search__category-chip {
    transition: none;
  }
}

/* ── newsletter ─────────────────────────── */
/* Sogorox Factory — Newsletter Inline Subscription (Level 1 Skeleton용)
   Compact email input + submit. GDPR checkbox. Optimistic UI feedback.
   AI: sogorox-factory | Generated: 2026-04-22 | Reviewed: sogorox-qa (2026-05-14) */

/* ============================
   Newsletter Container
   ============================ */
.newsletter {
  max-width: 480px;
}

.newsletter__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0 0 var(--spacing-2);
}

.newsletter__description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-4);
}

/* ============================
   Form Row (input + button)
   ============================ */
.newsletter__form {
  display: flex;
  gap: var(--spacing-2);
}

.newsletter__input {
  flex: 1;
  padding: var(--spacing-3) var(--spacing-4);
  font: inherit;
  font-size: var(--text-base);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text);
  min-height: var(--touch-target-min, 44px);
  transition: border-color var(--transition-fast);
}

.newsletter__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.newsletter__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-5);
  background: var(--color-primary);
  color: var(--color-on-primary, var(--color-on-primary));
  border: none;
  border-radius: var(--radius-full);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: var(--touch-target-min, 44px);
  transition: transform var(--spring-motion), box-shadow var(--spring-motion);
}

.newsletter__submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.newsletter__submit:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.newsletter__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ============================
   GDPR Consent Checkbox
   ============================ */
.newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.newsletter__consent input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}

.newsletter__consent a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ============================
   States (optimistic UI)
   ============================ */
.newsletter--loading .newsletter__submit {
  pointer-events: none;
  opacity: 0.7;
}

.newsletter--success .newsletter__form {
  display: none;
}

.newsletter--success .newsletter__consent {
  display: none;
}

.newsletter__success-message {
  display: none;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-success);
  color: var(--color-on-primary);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--text-sm);
  animation: newsletter-success-enter var(--smooth-motion) both;
}

.newsletter--success .newsletter__success-message {
  display: inline-flex;
}

@keyframes newsletter-success-enter {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================
   Error State
   ============================ */
.newsletter__error {
  display: none;
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--spacing-2);
}

.newsletter--error .newsletter__error {
  display: block;
}

.newsletter--error .newsletter__input {
  border-color: var(--color-error);
}

/* ============================
   Responsive — Stack on narrow screens
   ============================ */
@media (max-width: 480px) {
  .newsletter__form {
    flex-direction: column;
  }

  .newsletter__submit {
    width: 100%;
    justify-content: center;
  }
}

/* ============================
   Dark Mode
   ============================ */

/* ============================
   Reduced Motion
   ============================ */
@media (prefers-reduced-motion: reduce) {
  .newsletter__submit {
    transition: none;
  }

  .newsletter__success-message {
    animation: none;
  }
}

/* ── logo-cloud ─────────────────────────── */
/* Logo Cloud — Trusted-by partner/client logos
   AI: sogorox-factory | Generated: 2026-05-01 | Reviewed: sogorox-qa (2026-05-14) */

.logo-strip {
  padding: var(--spacing-8) 0;
  text-align: center;
}

.logo-strip__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  margin: 0 0 var(--spacing-6);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider, 0.075em);
}

.logo-strip__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  opacity: 0.6;
}

.logo-strip__img {
  height: 32px;
  width: auto;
  filter: grayscale(1);
  transition: filter var(--transition-ui, 200ms), opacity var(--transition-ui, 200ms);
}

.logo-strip__logos:hover .logo-strip__img { opacity: 0.8; }
.logo-strip__img:hover { filter: none; opacity: 1 !important; }

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

/* ── Dark Mode Overrides ───────────────────────────────────────────── */
/* ── bento-grid ─────────────────────────── */
/* ============================
   Bento Grid — Apple-style modular grid layout
   Uses design tokens: --bento-gap, --bento-radius, --bento-padding
   Reference: 2026-04-12-factory-shared-modules-web-trends.md §0-1
   ============================ */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--bento-gap, 16px);
  padding: var(--bento-padding, 20px);
}

/* Named size variants */
.bento-standard {
  border-radius: var(--bento-radius, 16px);
  background: var(--color-surface);
  padding: var(--bento-padding, 20px);
  overflow: hidden;
}

.bento-wide {
  grid-column: span 2;
  border-radius: var(--bento-radius, 16px);
  background: var(--color-surface);
  padding: var(--bento-padding, 20px);
  overflow: hidden;
}

.bento-tall {
  grid-row: span 2;
  border-radius: var(--bento-radius, 16px);
  background: var(--color-surface);
  padding: var(--bento-padding, 20px);
  overflow: hidden;
}

.bento-featured {
  grid-column: span 2;
  grid-row: span 2;
  border-radius: var(--bento-radius, 16px);
  background: var(--color-surface);
  padding: var(--bento-padding, 20px);
  overflow: hidden;
}

/* Hover elevation */
.bento-standard,
.bento-wide,
.bento-tall,
.bento-featured {
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.bento-standard:hover,
.bento-wide:hover,
.bento-tall:hover,
.bento-featured:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Mobile: single column stack */
@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-wide,
  .bento-tall,
  .bento-featured {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* AI: sogorox-factory | Generated: 2026-05-14 | Reviewed: sogorox-qa (2026-05-14) */
@media (prefers-reduced-motion: reduce) {
  .bento-standard,
  .bento-wide,
  .bento-tall,
  .bento-featured { transition: none; }
  .bento-standard:hover,
  .bento-wide:hover,
  .bento-tall:hover,
  .bento-featured:hover { transform: none; }
}

/* ── CORP-06 Missing BEM Classes ───────────────────
   28 classes used by _shared/snippets/ but missing from CSS.
   AI: sogorox-factory | Generated: 2026-05-21 | Reviewed: pending
   ────────────────────────────────────────────────── */

/* ============================
   Section — Generic Header / Grid / Variants
   Used by: about-split.html, feature-alternating.html, features-alternating.html
   ============================ */

.section__header {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: var(--spacing-16, 4rem);
}

.section__title {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  margin-bottom: var(--spacing-4);
}

.section__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 40rem;
  margin-inline: auto;
}

.section__grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.section__grid.grid {
  display: grid;
  flex-direction: unset;
  gap: var(--spacing-12);
  align-items: center;
}

.section--about {
  padding-block: clamp(3rem, 6vw, 5rem);
  background-color: var(--color-background);
}

.section--newsletter {
  padding-block: var(--spacing-16);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* ============================
   Hero — Split Layout Modifier
   Used by: hero-split.html
   ============================ */

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

/* ============================
   About — Split Layout
   Used by: about-split.html
   ============================ */

.about-split__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  justify-content: center;
}

.about-split__text {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.about-split__visual {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.about-split__image {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--radius-xl);
  object-fit: cover;
  transition: transform var(--smooth-motion);
}

.about-split__visual:hover .about-split__image {
  transform: scale(1.03);
}

.about-split__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
}

.about-split__stat {
  text-align: center;
  padding: var(--spacing-5) var(--spacing-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.about-split__stat-value {
  font-family: var(--font-heading);
  font-size: var(--fluid-h3);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--spacing-1);
}

.about-split__stat-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  .about-split__image { transition: none; }
  .about-split__visual:hover .about-split__image { transform: none; }
}

/* ============================
   Feature Row — Alternating Layout
   Used by: feature-alternating.html
   ============================ */

.feature-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  align-items: center;
}

.feature-row__visual {
  order: 2;
}

.feature-row__content {
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-6) 0;
}

.feature-row__title {
  font-family: var(--font-heading);
  font-size: var(--fluid-h3);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
}

.feature-row__desc {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 48ch;
}

.feature-row__visual {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.feature-row__visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
  transition: transform var(--smooth-motion);
}

.feature-row__visual:hover img {
  transform: scale(1.03);
}

@media (min-width: 769px) {
  .feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-12);
    align-items: center;
  }

  .feature-row__visual,
  .feature-row__content {
    order: unset;
  }

  .feature-row:nth-child(even) {
    direction: rtl;
  }

  .feature-row:nth-child(even) > * {
    direction: ltr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-row__visual img { transition: none; }
  .feature-row__visual:hover img { transform: none; }
}

/* ============================
   Newsletter — Full-Width Variant
   Used by: newsletter-full.html
   ============================ */

.newsletter--full {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}

.newsletter__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-on-primary);
  opacity: 0.85;
  line-height: var(--leading-relaxed);
  margin-bottom: var(--spacing-6);
}

.newsletter__input--on-brand {
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-background);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  outline: none;
  transition: border-color var(--smooth-motion), box-shadow var(--smooth-motion);
}

.newsletter__input--on-brand:focus {
  border-color: var(--color-on-primary);
  box-shadow: 0 0 0 3px var(--color-on-primary-faded);
}

.newsletter__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background-color var(--smooth-motion), transform var(--spring-motion);
  min-height: 44px;
  min-width: 44px;
}

.newsletter__btn--inverse {
  background-color: var(--color-background);
  color: var(--color-primary);
}

.newsletter__btn--inverse:hover {
  background-color: var(--color-surface);
  transform: translateY(-2px);
}

.newsletter__btn--inverse:active {
  transform: translateY(0);
}

.newsletter__disclaimer {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-on-primary);
  opacity: 0.7;
  margin-top: var(--spacing-4);
  line-height: var(--leading-normal);
}

@media (min-width: 769px) {
  .newsletter--full .newsletter__form {
    display: flex;
    gap: var(--spacing-3);
    align-items: stretch;
  }

  .newsletter__input--on-brand {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .newsletter__btn { transition: none; }
  .newsletter__btn--inverse:hover { transform: none; }
}

/* ── Dark Mode Overrides ────────────────────────── */
}
}
}
}

@layer components {
/* ── About Page: stat-card, stats-grid, hero--compact ── */
.hero--compact {
  padding: var(--spacing-8) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--spacing-4);
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
  text-align: center;
}

.stat-card__number {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.stat-card__label {
  font-size: 0.875rem;
  color: var(--color-text-muted, color-mix(in srgb, var(--color-text) 60%, transparent));
  margin-top: var(--spacing-1);
}

/* ── Timeline extensions ── */
.timeline__content {
  flex: 1;
}

.timeline__desc {
  font-size: 0.875rem;
  color: var(--color-text-muted, color-mix(in srgb, var(--color-text) 65%, transparent));
  line-height: 1.5;
  margin-top: var(--spacing-1);
}

/* ── Features Page: feature-row modifiers ── */
.feature-row--image-left {
  direction: ltr;
}

.feature-row--image-right {
  direction: rtl;
}

.feature-row--image-right > * {
  direction: ltr;
}

.feature-row__list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.feature-row__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  font-size: 0.9375rem;
}

.feature-row__placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted, color-mix(in srgb, var(--color-text) 50%, transparent));
  font-size: 0.875rem;
}

.section--cta {
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  padding: var(--spacing-12) var(--spacing-6);
  border-radius: var(--radius-xl);
}

/* ── Table Utilities ── */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.comparison-table th,
.comparison-table td {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.comparison-table thead th {
  background: var(--color-surface);
  font-weight: 600;
  font-size: 0.875rem;
}

.comparison-table tbody td {
  font-size: 0.875rem;
}

/* ── FAQ (as accordion variant) ── */
.faq-list {
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--smooth-motion), box-shadow var(--smooth-motion);
}

.faq-item[open] {
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  width: 100%;
  padding: var(--spacing-4) var(--spacing-5);
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  list-style: none;
  min-height: var(--touch-target-min, 44px);
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question::after {
  content: '+';
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-muted);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  transition: background var(--smooth-motion), color var(--smooth-motion);
}

.faq-item[open] .faq-item__question::after {
  content: '−';
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

.faq-item__question:hover {
  background: color-mix(in srgb, var(--color-surface) 95%, var(--color-text));
}

.faq-item__question:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-md);
}

.faq-item__answer {
  padding: 0 var(--spacing-5) var(--spacing-5);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed, 1.7);
  color: var(--color-text-muted);
  border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  margin: 0 var(--spacing-5);
  padding: var(--spacing-4) 0 var(--spacing-4);
}

/* ── Hero Compact ─────────────────────────────── */
.hero--compact {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1rem, 2vw, 2rem);
  text-align: center;
}

.hero--compact .hero__title {
  font-size: var(--fluid-h2);
}

.hero--compact .hero__subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* ── Section Alt Background ─────────────────── */
.section--alt {
  background: var(--color-surface);
}

/* ── About Split (canonical styles in variables-override.css @layer overrides) ── */

/* ── Team Section ─────────────────────────────── */
.team-header {
  text-align: center;
  margin-bottom: var(--spacing-10);
}

.team-header h2 {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-3);
}

.team-header p {
  color: var(--color-text-muted);
  max-width: 40rem;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--spacing-6);
}

/* ── Feature Row Modifiers ─────────────────────────────── */
.feature-row--image-left,
.feature-row--image-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-12);
  align-items: center;
  margin-bottom: var(--spacing-10);
}

@media (max-width: 768px) {
  .feature-row--image-left,
  .feature-row--image-right {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }
  .feature-row--image-left .feature-row__visual,
  .feature-row--image-right .feature-row__visual {
    order: 2;
  }
  .feature-row--image-left .feature-row__content,
  .feature-row--image-right .feature-row__content {
    order: 1;
  }
  .feature-row--image-right {
    direction: ltr;
  }
}

.feature-row__desc {
  line-height: 1.7;
  margin-bottom: var(--spacing-4);
}

.feature-row__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.feature-row__list li {
  position: relative;
  padding-left: var(--spacing-6);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.feature-row__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: 700;
}

.feature-row__visual img,
.feature-row__visual svg {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.feature-row__placeholder {
  width: 100%;
  height: auto;
}

/* ── Section CTA ─────────────────────────────── */
.section--cta {
  background: var(--color-primary);
  color: var(--color-on-primary);
  text-align: center;
  padding: var(--spacing-16) 0;
  border-radius: var(--radius-2xl);
  margin: 0 var(--spacing-4) var(--spacing-8);
}

.section--cta .section__title {
  color: var(--color-on-primary);
}

.section--cta .section__subtitle {
  color: rgba(255, 255, 255, 0.8);
}

/* ── Comparison Table ─────────────────────────── */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.comparison-table th,
.comparison-table td {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border);
}

.comparison-table th {
  background: var(--color-surface);
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.comparison-table td {
  color: var(--color-text);
}

.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.comparison-table tbody tr:hover {
  background: var(--color-surface);
}

/* ── FAQ ─────────────────────────────────────── */
.faq-list {
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--smooth-motion), box-shadow var(--smooth-motion);
}

.faq-item[open] {
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.faq-item__question {
  padding: var(--spacing-4) var(--spacing-5);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  min-height: var(--touch-target-min, 44px);
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question::after {
  content: '+';
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-muted);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  transition: background var(--smooth-motion), color var(--smooth-motion);
}

.faq-item[open] .faq-item__question::after {
  content: '−';
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

.faq-item__question:hover {
  background: color-mix(in srgb, var(--color-surface) 95%, var(--color-text));
}

.faq-item__question:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-md);
}

.faq-item__answer {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed, 1.7);
  font-size: var(--text-sm);
  border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  margin: 0 var(--spacing-5);
  padding: var(--spacing-4) 0 var(--spacing-4);
}

/* ── Form extras (contact/auth) ───────────────── */
.form-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.form-textarea {
  display: block;
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  resize: vertical;
  min-height: 120px;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-6);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  font-size: var(--text-base);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--smooth-motion);
}

.form-submit:hover {
  background: var(--color-primary-hover);
}

.form-submit:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Responsive ───────────────────────────────── */
@media (max-width: 1024px) {
  .feature-row,
  .feature-row--image-left,
  .feature-row--image-right {
    gap: var(--spacing-8);
  }
  .about-split__stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .feature-row,
  .feature-row--image-left,
  .feature-row--image-right {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }
  .about-split__stats {
    grid-template-columns: 1fr;
  }
  .section--cta {
    margin: 0;
    border-radius: 0;
  }
}
}


/* ════════════════════════════════════════════════════════════ */
/* ═══ main.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer components {
/* AI: claude-sonnet-4-6 | Generated: 2026-05-21 | Reviewed: pending */

  

  html {
    scroll-padding-top: var(--header-desktop);
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    letter-spacing: -0.025em;
  }

  /* Archive hero — editorial newspaper style */
  .hero--archive {
    background-color: var(--color-background);
    border-bottom: 2px solid var(--color-text);
    padding-block: var(--spacing-16) var(--spacing-12);
    text-align: center;
  }

  .hero--archive .hero__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-widest, 0.15em);
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-4);
  }

  .hero--archive .hero__title {
    font-size: var(--fluid-h1);
    font-weight: 900;
    color: var(--color-text);
    line-height: 1.1;
    margin-bottom: var(--spacing-6);
  }

  .hero--archive .hero__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 52ch;
    margin-inline: auto;
    line-height: 1.8;
    margin-bottom: var(--spacing-8);
  }

  /* Archive search bar */
  .archive-search {
    display: flex;
    align-items: center;
    max-width: 600px;
    margin-inline: auto;
    background: var(--color-surface);
    border: 2px solid var(--color-text);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-md);
  }

  .archive-search__input {
    flex: 1;
    border: none;
    outline: none;
    padding: var(--spacing-4) var(--spacing-5);
    font-family: var(--font-body);
    font-size: var(--text-base);
    background: transparent;
    color: var(--color-text);
  }

  .archive-search__input::placeholder {
    color: var(--color-text-muted);
  }

  .archive-search__btn {
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-primary);
    color: var(--color-on-primary);
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: background var(--smooth-motion);
    min-height: 44px;
  }

  .archive-search__btn:hover {
    background: var(--color-primary-hover);
  }

  /* Newspaper divider */
  .divider--editorial {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-block: var(--spacing-8);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-widest, 0.12em);
    text-transform: uppercase;
  }

  .divider--editorial::before,
  .divider--editorial::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border-strong);
  }

  /* Filter chips row */
  .archive-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    align-items: center;
    padding-block: var(--spacing-6);
    border-bottom: 1px solid var(--color-border);
  }

  .archive-filters__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-right: var(--spacing-2);
  }

  /* Newsletter card — editorial style */
  .newsletter-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    transition: all var(--spring-motion);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
  }

  .newsletter-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary);
  }

  .newsletter-card__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
  }

  .newsletter-card__date {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 500;
  }

  .newsletter-card__issue {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-primary-light);
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-sm);
  }

  .newsletter-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.4;
    letter-spacing: -0.02em;
  }

  .newsletter-card__excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .newsletter-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border);
  }

  .newsletter-card__tags {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
  }

  /* Monthly timeline nav */
  .month-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
  }

  .month-nav__year {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-widest, 0.12em);
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: var(--spacing-3) var(--spacing-4) var(--spacing-2);
  }

  .month-nav__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all var(--smooth-motion);
  }

  .month-nav__item:hover,
  .month-nav__item.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 600;
  }

  .month-nav__count {
    font-size: var(--text-xs);
    background: var(--color-border);
    color: var(--color-text-muted);
    padding: 1px var(--spacing-2);
    border-radius: var(--radius-full);
  }

  .month-nav__item.active .month-nav__count {
    background: var(--color-primary);
    color: var(--color-on-primary);
  }

  /* Archive layout — sidebar + main */
  .archive-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
    padding-block: var(--spacing-12);
  }

  @media (min-width: 1025px) {
    .archive-layout {
      grid-template-columns: 260px 1fr;
      gap: var(--spacing-12);
    }
  }

  .archive-sidebar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    height: fit-content;
    position: sticky;
    top: calc(var(--header-desktop) + var(--spacing-6));
  }

  .archive-sidebar__heading {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: var(--tracking-widest, 0.1em);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-border);
  }

  /* Stats strip */
  .archive-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-4);
    padding-block: var(--spacing-8);
    border-block: 1px solid var(--color-border);
    margin-block: var(--spacing-8);
  }

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

  .archive-stat__number {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--fluid-h3);
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
  }

  .archive-stat__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--spacing-1);
    letter-spacing: var(--tracking-wider, 0.08em);
  }

  /* Featured newsletter */
  .newsletter-featured {
    background: var(--color-surface);
    border: 2px solid var(--color-text);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    display: grid;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    transition: all var(--spring-motion);
  }

  .newsletter-featured:hover {
    box-shadow: 6px 6px 0 var(--color-text);
    transform: translate(-2px, -2px);
  }

  @media (min-width: 769px) {
    .newsletter-featured {
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }
  }

  .newsletter-featured__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-widest, 0.12em);
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--spacing-4);
  }

  .newsletter-featured__title {
    font-family: var(--font-heading);
    font-size: var(--fluid-h3);
    font-weight: 900;
    color: var(--color-text);
    line-height: 1.25;
    letter-spacing: -0.03em;
    margin-bottom: var(--spacing-4);
  }

  /* Empty state */
  .archive-empty {
    text-align: center;
    padding-block: var(--spacing-16);
    color: var(--color-text-muted);
  }

  .archive-empty__icon {
    width: 80px;
    height: 80px;
    margin-inline: auto;
    margin-bottom: var(--spacing-6);
    color: var(--color-border-strong);
  }

  .archive-empty__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-3);
  }

  /* Blog detail */
  .article-header {
    padding-block: var(--spacing-12) var(--spacing-8);
    border-bottom: 2px solid var(--color-text);
    margin-bottom: var(--spacing-10);
  }

  .article-body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-text);
    max-width: 72ch;
    margin-inline: auto;
  }

  .article-body h2,
  .article-body h3 {
    font-family: var(--font-heading);
    margin-block: var(--spacing-8) var(--spacing-4);
  }

  .article-body p {
    margin-bottom: var(--spacing-5);
  }

  .font-heading { font-family: var(--font-heading); }
  .text-editorial { letter-spacing: -0.03em; }

  @media (prefers-reduced-motion: reduce) {
    .newsletter-card,
    .newsletter-featured,
    .archive-search__btn {
      transition: none;
      transform: none;
    }
  }

.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay-start, var(--_dyn-27));
  z-index: 1;
}

/* Unlayered body fallback — ensures visibility when @layer is ignored */
html {
  background-color: var(--color-background, var(--color-on-primary));
  color: var(--color-text-primary, var(--color-background));
}

/* T-17 autofix: extracted from offline.html */
.offline {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: var(--spacing-6);
        text-align: center;
        background: var(--color-background);
        color: var(--color-text);
      }

      .offline__icon {
        width: 80px;
        height: 80px;
        color: var(--color-text-muted);
        margin-bottom: var(--spacing-6);
      }

      .offline__title {
        font-family: var(--font-heading);
        font-size: var(--fluid-h2, clamp(1.5rem, 1rem + 2vw, 2.5rem));
        font-weight: 700;
        margin: 0 0 var(--spacing-3);
      }

      .offline__description {
        font-size: var(--text-base);
        color: var(--color-text-muted);
        max-width: 40ch;
        margin: 0 auto var(--spacing-6);
        line-height: var(--leading-relaxed, 1.7);
      }

      .offline__retry {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-2);
        padding: var(--spacing-3) var(--spacing-6);
        background: var(--color-primary);
        color: var(--color-on-primary, var(--color-on-primary));
        border: none;
        border-radius: var(--radius-full);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
        min-height: var(--touch-target-min, 44px);
        transition: transform var(--spring-motion), box-shadow var(--spring-motion);
      }

      .offline__retry:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
      }

      .offline__retry:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
      }

      .offline__cached-links {
        margin-top: var(--spacing-8);
        text-align: left;
        width: 100%;
        max-width: 320px;
      }

      .offline__cached-title {
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--color-text-muted);
        margin-bottom: var(--spacing-2);
      }

      .offline__cached-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .offline__cached-list li {
        padding: var(--spacing-2) 0;
        border-bottom: 1px solid var(--color-border);
      }

      .offline__cached-list a {
        color: var(--color-primary);
        text-decoration: none;
        font-size: var(--text-sm);
      }

      .offline__cached-list a:hover {
        text-decoration: underline;
      }

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

/* T-17 autofix: extracted from privacy@media (prefers-reduced-motion: reduce) {
        .offline__retry {
          transition: none;
        }ontainer-xl, 1200px);
        margin: 0 auto;
        padding: var(--spacing-8) var(--spacing-4);
      }

      .toc {
        position: sticky;
        top: calc(var(--header-desktop, 80px) + var(--spacing-4));
        align-self: flex-start;
        width: 220px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-1);
        border-right: 1px solid var(--color-border);
        padding-right: var(--spacing-4);
      }

      .toc__link {
        display: block;
        padding: var(--spacing-1) var(--spacing-2);
        font-size: var(--text-sm);
        color: var(--color-text-muted);
        text-decoration: none;
        border-radius: var(--radius-md);
        transition: color var(--transition-fast), background var(--transition-fast);
        border-left: 2px solid transparent;
      }

      .toc__link:hover { color: var(--color-text); background: var(--color-surface); }
      .toc__link--active { color: var(--color-primary); border-left-color: var(--color-primary); font-weight: 600; }

      .legal-content { flex: 1; min-width: 0; max-width: var(--prose-max-width, 65ch); }
      .legal-content h1 { font-size: var(--fluid-h1); font-family: var(--font-heading); margin: 0 0 var(--spacing-2); }
      .legal-content h2 { font-size: var(--fluid-h3); font-family: var(--font-heading); margin: var(--spacing-8) 0 var(--spacing-3); padding-top: var(--spacing-4); }
      .legal-content h3 { font-size: var(--text-lg); font-weight: 600; margin: var(--spacing-6) 0 var(--spacing-2); }
      .legal-content p { margin: 0 0 var(--spacing-4); line-height: var(--leading-relaxed, 1.7); color: var(--color-text-muted); }
      .legal-content ul { margin: 0 0 var(--spacing-4); padding-left: var(--spacing-5); color: var(--color-text-muted); }
      .legal-content li { margin-bottom: var(--spacing-2); line-height: var(--leading-relaxed, 1.7); }

      .legal-content .callout {
        padding: var(--spacing-4);
        background: var(--color-surface);
        border-left: 3px solid var(--color-primary);
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
        margin: var(--spacing-4) 0;
      }
      .legal-content .callout p { margin: 0; color: var(--color-text); }
      .legal-meta { font-size: var(--text-sm); color: var(--color-text-disabled); margin-bottom: var(--spacing-6); }

      @media (max-width: 768px) {
        .legal-layout { flex-direction: column; }
        .toc {
          position: static; width: 100%; flex-direction: row; flex-wrap: wrap;
          border-right: none; border-bottom: 1px solid var(--color-border);
          padding-right: 0; padding-bottom: var(--spacing-3); margin-bottom: var(--spacing-4);
        }
        .toc__link { border-left: none; }
      }

/* GLOBAL OVERRIDES — Outside @layer */

:root {
  --_qo-on-brand: var(--color-on-primary, #fff);
  --_qo-on-brand-muted: var(--color-on-hero-muted, rgb(255 255 255 / 0.75));
  --_qo-on-brand-soft: rgb(255 255 255 / 0.85);
  --_qo-on-brand-faint: rgb(255 255 255 / 0.7);
  --_qo-on-brand-subtle: rgb(255 255 255 / 0.8);
  --_qo-on-brand-bright: rgb(255 255 255 / 0.9);
  --_qo-glass-bg: rgb(255 255 255 / 0.15);
  --_qo-glass-border: rgb(255 255 255 / 0.35);
  --_qo-overlay-dark: rgb(26 16 22 / 0.92);
  --_qo-overlay-dark-soft: rgb(26 16 22 / 0.85);

/* Age-gate close fix — unlayered .age-gate display:flex overrides @layer display:none */
.age-gate:not([open]) { display: none !important; }

/* Text contrast on dark/colored backgrounds */
.age-gate__title, .age-gate__panel h2 { color: var(--_qo-on-brand) !important; }
.age-gate__desc, .age-gate__panel p { color: var(--_qo-on-brand-muted) !important; }
.age-gate__actions .btn--pill,
.age-gate__actions button { color: var(--_qo-on-brand) !important; }
button.btn--pill,
a.btn--pill.btn--glow,
.btn--pill.btn--glow { color: var(--_qo-on-brand) !important; }
a.btn--pill.btn--outline,
.btn--outline { color: var(--_qo-on-brand) !important; }
.section--brand .btn--pill,
.section--brand a.btn--pill { color: var(--_qo-on-brand) !important; }
.btn-submit { color: var(--_qo-on-brand) !important; }

/* Stats on brand/gradient backgrounds */
.section--brand .stat-value,
.stats-section.section--brand .stat-value { color: var(--_qo-on-brand) !important; }
.section--brand .stat-label,
.stats-section.section--brand .stat-label { color: var(--_qo-on-brand-muted) !important; }
.section--brand .stat-item { border-color: var(--_qo-glass-bg) !important; }

/* All text on section--brand backgrounds */
.section--brand h2, .section--brand .section-title { color: var(--_qo-on-brand) !important; }
.section--brand p { color: var(--_qo-on-brand-soft) !important; }
.section--brand .section-overline { color: var(--_qo-on-brand-faint) !important; 
.section--brand .section-subtitle { color: var(--_qo-on-brand-subtle) !important; 

/* Button spacing */
.btn--pill { padding: 16px 32px !important; min-height: 48px !important; 
.age-gate__actions .btn--pill { padding: 20px 40px !important; min-height: 56px !important;

 }
}
}
}
}

}


/* ════════════════════════════════════════════════════════════ */
/* ═══ variables-override.css ═══ */
/* ════════════════════════════════════════════════════════════ */
@layer overrides {
:root {
  --color-primary: #3B82F6;
  --color-primary-hover: #2563EB;
  --color-background: #FAF9F6;
  --color-surface: #FFFFFF;
  --font-heading: 'Noto Serif KR', var(--font-sans);
  --font-body: 'Pretendard', system-ui;
}

.newsletter--full {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}

.about-split__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
}

.about-split__stat {
  text-align: center;
  padding: var(--spacing-5) var(--spacing-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.about-split__stat-value {
  font-family: var(--font-heading);
  font-size: var(--fluid-h3);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--spacing-1);
}

.about-split__stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.3;
}

.section__grid.grid {
  gap: var(--spacing-12);
  align-items: center;
}

@media (max-width: 768px) {
  .about-split__stats {
    grid-template-columns: 1fr;
  }
}
}




/* ══════════════════════════════════════════════════
   Blog Page — Final Override Block
   Overrides dashboard sidebar collision + blog QA fixes
   ══════════════════════════════════════════════════ */
.blog-layout > .sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-5) !important;
  width: 100% !important;
  position: static !important;
  top: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-right: none !important;
  overflow: visible !important;
  background: transparent !important;
  align-self: start !important;
}

.blog-layout > .sidebar .sidebar__section {
  background: var(--color-surface) !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--color-border) !important;
  padding: var(--spacing-5) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  position: static !important;
  overflow: visible !important;
}

.blog-featured__content > .badge {
  width: fit-content !important;
  display: inline-flex !important;
}

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

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

.sidebar__tags .badge:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pagination__link--disabled {
  opacity: 0.4 !important;
  pointer-events: none !important;
  cursor: default !important;
}

.blog-layout .sidebar__section--search {
  padding: var(--spacing-3) !important;
  border-bottom: none !important;
}

.blog-layout .sidebar__search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  border-bottom: none !important;
}

.blog-layout .sidebar__search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  pointer-events: none;
  flex-shrink: 0;
}

.blog-layout .sidebar__search-input {
  width: 100% !important;
  height: 40px !important;
  padding: 0 var(--spacing-4) 0 36px !important;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface) 80%, var(--color-background));
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  transition: border-color var(--smooth-motion), box-shadow var(--smooth-motion), background var(--smooth-motion);
}

.blog-layout .sidebar__search-input:focus {
  outline: none;
  border-color: var(--color-primary) !important;
  background: var(--color-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.blog-layout .sidebar__search-input::placeholder {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}