/* ---- assets/css/lumedian.css ---- */
/* 출처: lumedian-design-system/dist/lumedian.css 그대로 복사(2026-10-21, D 세션). 여기서 고치지 말고 디자인 시스템에서 다시 복사한다. */
/* Lumedian Design Tokens — 자동 생성 파일. 고치지 말 것.
   원본: tokens/tokens.json → node scripts/build-tokens.mjs
   테마: <html data-theme="light|dark">, 속성이 없으면 OS 설정(prefers-color-scheme)을 따른다. */

:root {
	--lm-color-white: #FFFFFF;
	--lm-color-black: #000000;
	--lm-color-ink: #12100E;
	--lm-color-paper: #E3DCD0;
	--lm-color-cream: #F2E9DA;
	--lm-color-lumen-50: #FEFAF2;
	--lm-color-lumen-100: #FEF2E2;
	--lm-color-lumen-200: #FDE3BC;
	--lm-color-lumen-300: #FFC66E;
	--lm-color-lumen-350: #F8B85E;
	--lm-color-lumen-400: #E1A650;
	--lm-color-lumen-500: #C58104;
	--lm-color-lumen-600: #A16602;
	--lm-color-lumen-700: #7F4D01;
	--lm-color-lumen-800: #663B02;
	--lm-color-lumen-900: #502C00;
	--lm-color-lumen-950: #3B1E00;
	--lm-color-neutral-25: #FCF9F4;
	--lm-color-neutral-50: #F8F4EE;
	--lm-color-neutral-100: #F2E9DA;
	--lm-color-neutral-200: #E3DCD0;
	--lm-color-neutral-300: #D5CFC6;
	--lm-color-neutral-400: #B7B0A5;
	--lm-color-neutral-500: #978F82;
	--lm-color-neutral-600: #70685D;
	--lm-color-neutral-700: #5E574E;
	--lm-color-neutral-800: #4A443C;
	--lm-color-neutral-900: #38342D;
	--lm-color-neutral-950: #12100E;
	--lm-color-night-400: #5B5754;
	--lm-color-night-500: #46413E;
	--lm-color-night-600: #36322F;
	--lm-color-night-700: #2C2825;
	--lm-color-night-750: #23201D;
	--lm-color-night-800: #1C1916;
	--lm-color-night-850: #161310;
	--lm-color-night-900: #100D0A;
	--lm-color-night-950: #0A0805;
	--lm-color-cobalt-50: #F8FBFE;
	--lm-color-cobalt-100: #EFF5FF;
	--lm-color-cobalt-200: #D9E7FE;
	--lm-color-cobalt-300: #B7D1FE;
	--lm-color-cobalt-400: #8AB2FB;
	--lm-color-cobalt-500: #6490E0;
	--lm-color-cobalt-600: #4972BE;
	--lm-color-cobalt-700: #33579A;
	--lm-color-cobalt-800: #26447C;
	--lm-color-cobalt-900: #1C335F;
	--lm-color-cobalt-950: #142545;
	--lm-color-cyan-50: #F4FCFD;
	--lm-color-cyan-100: #E7F7FA;
	--lm-color-cyan-200: #CEEBF2;
	--lm-color-cyan-300: #AAD8E1;
	--lm-color-cyan-400: #7DBAC7;
	--lm-color-cyan-500: #539AA9;
	--lm-color-cyan-600: #367C8C;
	--lm-color-cyan-700: #1F606E;
	--lm-color-cyan-800: #154B58;
	--lm-color-cyan-900: #103A43;
	--lm-color-cyan-950: #0B2931;
	--lm-color-magenta-50: #FEF9FC;
	--lm-color-magenta-100: #FEF1F7;
	--lm-color-magenta-200: #FFDDED;
	--lm-color-magenta-300: #FBBEDC;
	--lm-color-magenta-400: #E89AC1;
	--lm-color-magenta-500: #CA74A1;
	--lm-color-magenta-600: #A95884;
	--lm-color-magenta-700: #85416B;
	--lm-color-magenta-800: #6B3155;
	--lm-color-magenta-900: #522541;
	--lm-color-magenta-950: #3C1A2F;
	--lm-color-success-50: #F4FDF6;
	--lm-color-success-100: #E6F9EA;
	--lm-color-success-200: #CCEFD4;
	--lm-color-success-300: #A7DDB4;
	--lm-color-success-400: #78C18C;
	--lm-color-success-500: #4CA067;
	--lm-color-success-600: #2E834C;
	--lm-color-success-700: #156635;
	--lm-color-success-800: #0A5027;
	--lm-color-success-900: #083C1D;
	--lm-color-success-950: #072D15;
	--lm-color-warning-50: #FEFAF8;
	--lm-color-warning-100: #FEF1EB;
	--lm-color-warning-200: #FEE0D1;
	--lm-color-warning-300: #FEC3A5;
	--lm-color-warning-400: #FD9760;
	--lm-color-warning-500: #E1712C;
	--lm-color-warning-600: #BD5300;
	--lm-color-warning-700: #934001;
	--lm-color-warning-800: #753100;
	--lm-color-warning-900: #5A2501;
	--lm-color-warning-950: #431A01;
	--lm-color-danger-50: #FFFAF9;
	--lm-color-danger-100: #FEF2F0;
	--lm-color-danger-200: #FEDFDB;
	--lm-color-danger-300: #FFC1B9;
	--lm-color-danger-400: #FE948A;
	--lm-color-danger-500: #F16159;
	--lm-color-danger-600: #CD413D;
	--lm-color-danger-700: #A62828;
	--lm-color-danger-800: #851C1D;
	--lm-color-danger-900: #671514;
	--lm-color-danger-950: #4C100F;
	--lm-color-data-cobalt-light: #4F74D6;
	--lm-color-data-cobalt-dark: #6F8EE4;
	--lm-color-data-magenta-light: #C2558F;
	--lm-color-data-magenta-dark: #EFA2C8;
	--lm-color-data-violet-light: #6E52B8;
	--lm-color-data-violet-dark: #9078D4;
	--lm-color-data-jade-light: #2E8C66;
	--lm-color-data-jade-dark: #4FB088;
	--lm-color-data-lumen-light: #D99A3C;
	--lm-color-data-lumen-dark: #EDB463;
	--lm-color-data-cyan-light: #2D8DA0;
	--lm-color-data-cyan-dark: #55AFC0;
	--lm-color-data-ember-light: #CC5F33;
	--lm-color-data-ember-dark: #E07F55;
	--lm-color-data-graphite-light: #5F5950;
	--lm-color-data-graphite-dark: #BDB6AA;
	--lm-color-kelvin-2700: #FFA757;
	--lm-color-kelvin-3200: #FFB87B;
	--lm-color-kelvin-4000: #FFCEA6;
	--lm-color-kelvin-5000: #FFE4CE;
	--lm-color-kelvin-5600: #FFEFE1;
	--lm-color-kelvin-6500: #FFFEFA;
	--lm-color-kelvin-7500: #E6EBFF;
	--lm-color-kelvin-9300: #CFDDFF;
	--lm-font-sans: 'Pyeojin Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
	--lm-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	--lm-font-features: normal;
	--lm-font-features-spec: 'ss06', 'tnum', 'case';
	--lm-font-features-num: 'tnum';
	--lm-font-weight-light: 300;
	--lm-font-weight-regular: 400;
	--lm-font-weight-medium: 500;
	--lm-font-weight-semibold: 600;
	--lm-font-weight-bold: 700;
	--lm-font-weight-extrabold: 800;
	--lm-font-weight-black: 900;
	--lm-text-display-2xl-size: 6.5rem;
	--lm-text-display-2xl-line-height: 6.25rem;
	--lm-text-display-2xl-tracking: -0.04em;
	--lm-text-display-2xl-weight: 500;
	--lm-text-display-xl-size: 5rem;
	--lm-text-display-xl-line-height: 5rem;
	--lm-text-display-xl-tracking: -0.035em;
	--lm-text-display-xl-weight: 500;
	--lm-text-display-lg-size: 4rem;
	--lm-text-display-lg-line-height: 4.25rem;
	--lm-text-display-lg-tracking: -0.03em;
	--lm-text-display-lg-weight: 500;
	--lm-text-display-md-size: 3rem;
	--lm-text-display-md-line-height: 3.375rem;
	--lm-text-display-md-tracking: -0.025em;
	--lm-text-display-md-weight: 500;
	--lm-text-heading-xl-size: 2.5rem;
	--lm-text-heading-xl-line-height: 3rem;
	--lm-text-heading-xl-tracking: -0.025em;
	--lm-text-heading-xl-weight: 600;
	--lm-text-heading-lg-size: 2rem;
	--lm-text-heading-lg-line-height: 2.5rem;
	--lm-text-heading-lg-tracking: -0.02em;
	--lm-text-heading-lg-weight: 600;
	--lm-text-heading-md-size: 1.5rem;
	--lm-text-heading-md-line-height: 2rem;
	--lm-text-heading-md-tracking: -0.015em;
	--lm-text-heading-md-weight: 600;
	--lm-text-heading-sm-size: 1.25rem;
	--lm-text-heading-sm-line-height: 1.75rem;
	--lm-text-heading-sm-tracking: -0.01em;
	--lm-text-heading-sm-weight: 600;
	--lm-text-title-size: 1.0625rem;
	--lm-text-title-line-height: 1.625rem;
	--lm-text-title-tracking: -0.005em;
	--lm-text-title-weight: 600;
	--lm-text-body-lg-size: 1.0625rem;
	--lm-text-body-lg-line-height: 1.75rem;
	--lm-text-body-lg-tracking: 0em;
	--lm-text-body-lg-weight: 400;
	--lm-text-body-size: 0.9375rem;
	--lm-text-body-line-height: 1.5rem;
	--lm-text-body-tracking: 0em;
	--lm-text-body-weight: 400;
	--lm-text-body-sm-size: 0.875rem;
	--lm-text-body-sm-line-height: 1.375rem;
	--lm-text-body-sm-tracking: 0em;
	--lm-text-body-sm-weight: 400;
	--lm-text-label-size: 0.8125rem;
	--lm-text-label-line-height: 1.125rem;
	--lm-text-label-tracking: 0em;
	--lm-text-label-weight: 600;
	--lm-text-caption-size: 0.75rem;
	--lm-text-caption-line-height: 1.125rem;
	--lm-text-caption-tracking: 0.005em;
	--lm-text-caption-weight: 400;
	--lm-text-overline-size: 0.6875rem;
	--lm-text-overline-line-height: 1rem;
	--lm-text-overline-tracking: 0.2em;
	--lm-text-overline-weight: 600;
	--lm-text-numeric-xl-size: 2.5rem;
	--lm-text-numeric-xl-line-height: 2.75rem;
	--lm-text-numeric-xl-tracking: -0.02em;
	--lm-text-numeric-xl-weight: 600;
	--lm-text-numeric-lg-size: 1.75rem;
	--lm-text-numeric-lg-line-height: 2rem;
	--lm-text-numeric-lg-tracking: -0.015em;
	--lm-text-numeric-lg-weight: 600;
	--lm-text-code-size: 0.8125rem;
	--lm-text-code-line-height: 1.25rem;
	--lm-text-code-tracking: 0em;
	--lm-text-code-weight: 400;
	--lm-space-0: 0px;
	--lm-space-1: 4px;
	--lm-space-2: 8px;
	--lm-space-3: 12px;
	--lm-space-4: 16px;
	--lm-space-5: 20px;
	--lm-space-6: 24px;
	--lm-space-8: 32px;
	--lm-space-10: 40px;
	--lm-space-12: 48px;
	--lm-space-16: 64px;
	--lm-space-20: 80px;
	--lm-space-24: 96px;
	--lm-space-32: 128px;
	--lm-space-0-5: 2px;
	--lm-space-1-5: 6px;
	--lm-space-2-5: 10px;
	--lm-radius-none: 0px;
	--lm-radius-xs: 2px;
	--lm-radius-sm: 3px;
	--lm-radius-md: 4px;
	--lm-radius-lg: 6px;
	--lm-radius-xl: 8px;
	--lm-radius-full: 9999px;
	--lm-duration-instant: 80ms;
	--lm-duration-fast: 140ms;
	--lm-duration-base: 200ms;
	--lm-duration-slow: 320ms;
	--lm-duration-slower: 480ms;
	--lm-duration-reveal: 800ms;
	--lm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--lm-ease-enter: cubic-bezier(0, 0, 0, 1);
	--lm-ease-exit: cubic-bezier(0.4, 0, 1, 1);
	--lm-ease-emphasized: cubic-bezier(0.3, 0, 0, 1.1);
	--lm-ease-power-on: cubic-bezier(0.7, 0, 0.2, 1);
	--lm-z-base: 0;
	--lm-z-raised: 10;
	--lm-z-sticky: 100;
	--lm-z-header: 200;
	--lm-z-dropdown: 300;
	--lm-z-overlay: 400;
	--lm-z-modal: 500;
	--lm-z-popover: 600;
	--lm-z-toast: 700;
	--lm-z-tooltip: 800;
	--lm-size-control-sm: 32px;
	--lm-size-control-md: 40px;
	--lm-size-control-lg: 48px;
	--lm-size-icon-sm: 16px;
	--lm-size-icon-md: 20px;
	--lm-size-icon-lg: 24px;
	--lm-size-touch-min: 44px;
	--lm-size-content-max: 1392px;
	--lm-size-prose-max: 68ch;
	--lm-breakpoint-sm: 480px;
	--lm-breakpoint-md: 768px;
	--lm-breakpoint-lg: 1024px;
	--lm-breakpoint-xl: 1280px;
	--lm-breakpoint-2xl: 1536px;
	--lm-ratio-16x9: 16 / 9;
	--lm-ratio-21x9: 21 / 9;
	--lm-ratio-32x9: 32 / 9;
	--lm-ratio-4x3: 4 / 3;
	--lm-ratio-1x1: 1 / 1;
	--lm-ratio-1x2: 1 / 2;
	--lm-ratio-9x16: 9 / 16;
	--lm-safe-title: 5%;
	--lm-safe-action: 3.5%;
	--lm-logo-min-led: 168px;
	--lm-text-min-led: 16px;
	--lm-focus-offset: 2px;
}

:root, [data-theme="light"] {
	--lm-bg-canvas: #FCF9F4;
	--lm-bg-surface: #FFFFFF;
	--lm-bg-surface-raised: #FFFFFF;
	--lm-bg-surface-sunken: #F2E9DA;
	--lm-bg-surface-hover: #F8F4EE;
	--lm-bg-band: #E3DCD0;
	--lm-bg-surface-selected: #FEFAF2;
	--lm-bg-inverse: #12100E;
	--lm-bg-brand: #FFC66E;
	--lm-bg-brand-subtle: #FEF2E2;
	--lm-bg-screen: #000000;
	--lm-bg-overlay: rgb(18 16 14 / 0.56);
	--lm-fg-primary: #12100E;
	--lm-fg-secondary: #5E574E;
	--lm-fg-tertiary: #70685D;
	--lm-fg-disabled: #978F82;
	--lm-fg-inverse: #F2E9DA;
	--lm-fg-on-brand: #12100E;
	--lm-fg-brand: #7F4D01;
	--lm-fg-link: #33579A;
	--lm-fg-link-hover: #26447C;
	--lm-border-subtle: #D5CFC6;
	--lm-border-default: #B7B0A5;
	--lm-border-strong: #70685D;
	--lm-border-inverse: #12100E;
	--lm-border-brand: #FFC66E;
	--lm-action-primary-bg: #12100E;
	--lm-action-primary-bg-hover: #38342D;
	--lm-action-primary-fg: #F2E9DA;
	--lm-action-accent-bg: #FFC66E;
	--lm-action-accent-bg-hover: #F8B85E;
	--lm-action-accent-fg: #12100E;
	--lm-action-secondary-bg: #FFFFFF;
	--lm-action-secondary-bg-hover: #F8F4EE;
	--lm-action-secondary-fg: #12100E;
	--lm-action-secondary-border: #B7B0A5;
	--lm-action-ghost-bg-hover: #F8F4EE;
	--lm-action-danger-bg: #CD413D;
	--lm-action-danger-bg-hover: #A62828;
	--lm-action-danger-fg: #FFFFFF;
	--lm-action-disabled-bg: #D5CFC6;
	--lm-action-disabled-fg: #70685D;
	--lm-status-success-fg: #156635;
	--lm-status-success-bg: #E6F9EA;
	--lm-status-success-border: #A7DDB4;
	--lm-status-success-solid: #4CA067;
	--lm-status-warning-fg: #934001;
	--lm-status-warning-bg: #FEF1EB;
	--lm-status-warning-border: #FEC3A5;
	--lm-status-warning-solid: #E1712C;
	--lm-status-danger-fg: #A62828;
	--lm-status-danger-bg: #FEF2F0;
	--lm-status-danger-border: #FFC1B9;
	--lm-status-danger-solid: #F16159;
	--lm-status-info-fg: #33579A;
	--lm-status-info-bg: #EFF5FF;
	--lm-status-info-border: #B7D1FE;
	--lm-status-info-solid: #6490E0;
	--lm-status-neutral-fg: #5E574E;
	--lm-status-neutral-bg: #F2E9DA;
	--lm-status-neutral-border: #B7B0A5;
	--lm-status-neutral-solid: #978F82;
	--lm-status-live-solid: #CD413D;
	--lm-accent-cobalt-fg: #33579A;
	--lm-accent-cobalt-bg: #EFF5FF;
	--lm-accent-cobalt-solid: #4972BE;
	--lm-accent-cyan-fg: #1F606E;
	--lm-accent-cyan-bg: #E7F7FA;
	--lm-accent-cyan-solid: #539AA9;
	--lm-accent-magenta-fg: #85416B;
	--lm-accent-magenta-bg: #FEF1F7;
	--lm-accent-magenta-solid: #CA74A1;
	--lm-accent-lumen-fg: #7F4D01;
	--lm-accent-lumen-bg: #FEF2E2;
	--lm-accent-lumen-solid: #FFC66E;
	--lm-data-cobalt: #4F74D6;
	--lm-data-magenta: #C2558F;
	--lm-data-violet: #6E52B8;
	--lm-data-jade: #2E8C66;
	--lm-data-lumen: #D99A3C;
	--lm-data-cyan: #2D8DA0;
	--lm-data-ember: #CC5F33;
	--lm-data-graphite: #5F5950;
	--lm-shadow-xs: 0 1px 2px rgb(18 16 14 / 0.06);
	--lm-shadow-sm: 0 2px 6px rgb(18 16 14 / 0.08), 0 1px 2px rgb(18 16 14 / 0.04);
	--lm-shadow-md: 0 8px 24px rgb(18 16 14 / 0.10), 0 2px 6px rgb(18 16 14 / 0.05);
	--lm-shadow-lg: 0 20px 48px rgb(18 16 14 / 0.14), 0 4px 12px rgb(18 16 14 / 0.06);
	--lm-shadow-xl: 0 32px 80px rgb(18 16 14 / 0.18);
	--lm-focus-ring: 0 0 0 2px #12100E, 0 0 0 4px #FFC66E;
	color-scheme: light;
}

[data-theme="dark"] {
	--lm-bg-canvas: #100D0A;
	--lm-bg-surface: #161310;
	--lm-bg-surface-raised: #1C1916;
	--lm-bg-surface-sunken: #0A0805;
	--lm-bg-surface-hover: #23201D;
	--lm-bg-band: #1C1916;
	--lm-bg-surface-selected: #3B1E00;
	--lm-bg-inverse: #F2E9DA;
	--lm-bg-brand: #FFC66E;
	--lm-bg-brand-subtle: #3B1E00;
	--lm-bg-screen: #000000;
	--lm-bg-overlay: rgb(0 0 0 / 0.64);
	--lm-fg-primary: #F2E9DA;
	--lm-fg-secondary: #B7B0A5;
	--lm-fg-tertiary: #978F82;
	--lm-fg-disabled: #5E574E;
	--lm-fg-inverse: #12100E;
	--lm-fg-on-brand: #12100E;
	--lm-fg-brand: #FFC66E;
	--lm-fg-link: #8AB2FB;
	--lm-fg-link-hover: #B7D1FE;
	--lm-border-subtle: #2C2825;
	--lm-border-default: #36322F;
	--lm-border-strong: #70685D;
	--lm-border-inverse: #F2E9DA;
	--lm-border-brand: #FFC66E;
	--lm-action-primary-bg: #F2E9DA;
	--lm-action-primary-bg-hover: #E3DCD0;
	--lm-action-primary-fg: #12100E;
	--lm-action-accent-bg: #FFC66E;
	--lm-action-accent-bg-hover: #F8B85E;
	--lm-action-accent-fg: #12100E;
	--lm-action-secondary-bg: #1C1916;
	--lm-action-secondary-bg-hover: #23201D;
	--lm-action-secondary-fg: #F2E9DA;
	--lm-action-secondary-border: #36322F;
	--lm-action-ghost-bg-hover: #23201D;
	--lm-action-danger-bg: #F16159;
	--lm-action-danger-bg-hover: #FE948A;
	--lm-action-danger-fg: #12100E;
	--lm-action-disabled-bg: #23201D;
	--lm-action-disabled-fg: #5E574E;
	--lm-status-success-fg: #78C18C;
	--lm-status-success-bg: #072D15;
	--lm-status-success-border: #0A5027;
	--lm-status-success-solid: #78C18C;
	--lm-status-warning-fg: #FD9760;
	--lm-status-warning-bg: #431A01;
	--lm-status-warning-border: #753100;
	--lm-status-warning-solid: #FD9760;
	--lm-status-danger-fg: #FE948A;
	--lm-status-danger-bg: #4C100F;
	--lm-status-danger-border: #851C1D;
	--lm-status-danger-solid: #FE948A;
	--lm-status-info-fg: #8AB2FB;
	--lm-status-info-bg: #142545;
	--lm-status-info-border: #26447C;
	--lm-status-info-solid: #8AB2FB;
	--lm-status-neutral-fg: #B7B0A5;
	--lm-status-neutral-bg: #23201D;
	--lm-status-neutral-border: #36322F;
	--lm-status-neutral-solid: #978F82;
	--lm-status-live-solid: #F16159;
	--lm-accent-cobalt-fg: #B7D1FE;
	--lm-accent-cobalt-bg: #142545;
	--lm-accent-cobalt-solid: #8AB2FB;
	--lm-accent-cyan-fg: #AAD8E1;
	--lm-accent-cyan-bg: #0B2931;
	--lm-accent-cyan-solid: #7DBAC7;
	--lm-accent-magenta-fg: #FBBEDC;
	--lm-accent-magenta-bg: #3C1A2F;
	--lm-accent-magenta-solid: #E89AC1;
	--lm-accent-lumen-fg: #FFC66E;
	--lm-accent-lumen-bg: #3B1E00;
	--lm-accent-lumen-solid: #FFC66E;
	--lm-data-cobalt: #6F8EE4;
	--lm-data-magenta: #EFA2C8;
	--lm-data-violet: #9078D4;
	--lm-data-jade: #4FB088;
	--lm-data-lumen: #EDB463;
	--lm-data-cyan: #55AFC0;
	--lm-data-ember: #E07F55;
	--lm-data-graphite: #BDB6AA;
	--lm-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
	--lm-shadow-sm: 0 2px 6px rgb(0 0 0 / 0.45);
	--lm-shadow-md: 0 8px 24px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.04);
	--lm-shadow-lg: 0 20px 48px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.05);
	--lm-shadow-xl: 0 32px 80px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.06);
	--lm-focus-ring: 0 0 0 2px #FFC66E, 0 0 0 4px #12100E;
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--lm-bg-canvas: #100D0A;
		--lm-bg-surface: #161310;
		--lm-bg-surface-raised: #1C1916;
		--lm-bg-surface-sunken: #0A0805;
		--lm-bg-surface-hover: #23201D;
		--lm-bg-band: #1C1916;
		--lm-bg-surface-selected: #3B1E00;
		--lm-bg-inverse: #F2E9DA;
		--lm-bg-brand: #FFC66E;
		--lm-bg-brand-subtle: #3B1E00;
		--lm-bg-screen: #000000;
		--lm-bg-overlay: rgb(0 0 0 / 0.64);
		--lm-fg-primary: #F2E9DA;
		--lm-fg-secondary: #B7B0A5;
		--lm-fg-tertiary: #978F82;
		--lm-fg-disabled: #5E574E;
		--lm-fg-inverse: #12100E;
		--lm-fg-on-brand: #12100E;
		--lm-fg-brand: #FFC66E;
		--lm-fg-link: #8AB2FB;
		--lm-fg-link-hover: #B7D1FE;
		--lm-border-subtle: #2C2825;
		--lm-border-default: #36322F;
		--lm-border-strong: #70685D;
		--lm-border-inverse: #F2E9DA;
		--lm-border-brand: #FFC66E;
		--lm-action-primary-bg: #F2E9DA;
		--lm-action-primary-bg-hover: #E3DCD0;
		--lm-action-primary-fg: #12100E;
		--lm-action-accent-bg: #FFC66E;
		--lm-action-accent-bg-hover: #F8B85E;
		--lm-action-accent-fg: #12100E;
		--lm-action-secondary-bg: #1C1916;
		--lm-action-secondary-bg-hover: #23201D;
		--lm-action-secondary-fg: #F2E9DA;
		--lm-action-secondary-border: #36322F;
		--lm-action-ghost-bg-hover: #23201D;
		--lm-action-danger-bg: #F16159;
		--lm-action-danger-bg-hover: #FE948A;
		--lm-action-danger-fg: #12100E;
		--lm-action-disabled-bg: #23201D;
		--lm-action-disabled-fg: #5E574E;
		--lm-status-success-fg: #78C18C;
		--lm-status-success-bg: #072D15;
		--lm-status-success-border: #0A5027;
		--lm-status-success-solid: #78C18C;
		--lm-status-warning-fg: #FD9760;
		--lm-status-warning-bg: #431A01;
		--lm-status-warning-border: #753100;
		--lm-status-warning-solid: #FD9760;
		--lm-status-danger-fg: #FE948A;
		--lm-status-danger-bg: #4C100F;
		--lm-status-danger-border: #851C1D;
		--lm-status-danger-solid: #FE948A;
		--lm-status-info-fg: #8AB2FB;
		--lm-status-info-bg: #142545;
		--lm-status-info-border: #26447C;
		--lm-status-info-solid: #8AB2FB;
		--lm-status-neutral-fg: #B7B0A5;
		--lm-status-neutral-bg: #23201D;
		--lm-status-neutral-border: #36322F;
		--lm-status-neutral-solid: #978F82;
		--lm-status-live-solid: #F16159;
		--lm-accent-cobalt-fg: #B7D1FE;
		--lm-accent-cobalt-bg: #142545;
		--lm-accent-cobalt-solid: #8AB2FB;
		--lm-accent-cyan-fg: #AAD8E1;
		--lm-accent-cyan-bg: #0B2931;
		--lm-accent-cyan-solid: #7DBAC7;
		--lm-accent-magenta-fg: #FBBEDC;
		--lm-accent-magenta-bg: #3C1A2F;
		--lm-accent-magenta-solid: #E89AC1;
		--lm-accent-lumen-fg: #FFC66E;
		--lm-accent-lumen-bg: #3B1E00;
		--lm-accent-lumen-solid: #FFC66E;
		--lm-data-cobalt: #6F8EE4;
		--lm-data-magenta: #EFA2C8;
		--lm-data-violet: #9078D4;
		--lm-data-jade: #4FB088;
		--lm-data-lumen: #EDB463;
		--lm-data-cyan: #55AFC0;
		--lm-data-ember: #E07F55;
		--lm-data-graphite: #BDB6AA;
		--lm-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
		--lm-shadow-sm: 0 2px 6px rgb(0 0 0 / 0.45);
		--lm-shadow-md: 0 8px 24px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.04);
		--lm-shadow-lg: 0 20px 48px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.05);
		--lm-shadow-xl: 0 32px 80px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.06);
		--lm-focus-ring: 0 0 0 2px #FFC66E, 0 0 0 4px #12100E;
		color-scheme: dark;
	}
	}

/* ---------- 글자 스타일 ---------- */
.lm-text-display-2xl {
	font-size: var(--lm-text-display-2xl-size);
	line-height: var(--lm-text-display-2xl-line-height);
	letter-spacing: var(--lm-text-display-2xl-tracking);
	font-weight: var(--lm-text-display-2xl-weight);
}
.lm-text-display-xl {
	font-size: var(--lm-text-display-xl-size);
	line-height: var(--lm-text-display-xl-line-height);
	letter-spacing: var(--lm-text-display-xl-tracking);
	font-weight: var(--lm-text-display-xl-weight);
}
.lm-text-display-lg {
	font-size: var(--lm-text-display-lg-size);
	line-height: var(--lm-text-display-lg-line-height);
	letter-spacing: var(--lm-text-display-lg-tracking);
	font-weight: var(--lm-text-display-lg-weight);
}
.lm-text-display-md {
	font-size: var(--lm-text-display-md-size);
	line-height: var(--lm-text-display-md-line-height);
	letter-spacing: var(--lm-text-display-md-tracking);
	font-weight: var(--lm-text-display-md-weight);
}
.lm-text-heading-xl {
	font-size: var(--lm-text-heading-xl-size);
	line-height: var(--lm-text-heading-xl-line-height);
	letter-spacing: var(--lm-text-heading-xl-tracking);
	font-weight: var(--lm-text-heading-xl-weight);
}
.lm-text-heading-lg {
	font-size: var(--lm-text-heading-lg-size);
	line-height: var(--lm-text-heading-lg-line-height);
	letter-spacing: var(--lm-text-heading-lg-tracking);
	font-weight: var(--lm-text-heading-lg-weight);
}
.lm-text-heading-md {
	font-size: var(--lm-text-heading-md-size);
	line-height: var(--lm-text-heading-md-line-height);
	letter-spacing: var(--lm-text-heading-md-tracking);
	font-weight: var(--lm-text-heading-md-weight);
}
.lm-text-heading-sm {
	font-size: var(--lm-text-heading-sm-size);
	line-height: var(--lm-text-heading-sm-line-height);
	letter-spacing: var(--lm-text-heading-sm-tracking);
	font-weight: var(--lm-text-heading-sm-weight);
}
.lm-text-title {
	font-size: var(--lm-text-title-size);
	line-height: var(--lm-text-title-line-height);
	letter-spacing: var(--lm-text-title-tracking);
	font-weight: var(--lm-text-title-weight);
}
.lm-text-body-lg {
	font-size: var(--lm-text-body-lg-size);
	line-height: var(--lm-text-body-lg-line-height);
	letter-spacing: var(--lm-text-body-lg-tracking);
	font-weight: var(--lm-text-body-lg-weight);
}
.lm-text-body {
	font-size: var(--lm-text-body-size);
	line-height: var(--lm-text-body-line-height);
	letter-spacing: var(--lm-text-body-tracking);
	font-weight: var(--lm-text-body-weight);
}
.lm-text-body-sm {
	font-size: var(--lm-text-body-sm-size);
	line-height: var(--lm-text-body-sm-line-height);
	letter-spacing: var(--lm-text-body-sm-tracking);
	font-weight: var(--lm-text-body-sm-weight);
}
.lm-text-label {
	font-size: var(--lm-text-label-size);
	line-height: var(--lm-text-label-line-height);
	letter-spacing: var(--lm-text-label-tracking);
	font-weight: var(--lm-text-label-weight);
}
.lm-text-caption {
	font-size: var(--lm-text-caption-size);
	line-height: var(--lm-text-caption-line-height);
	letter-spacing: var(--lm-text-caption-tracking);
	font-weight: var(--lm-text-caption-weight);
}
.lm-text-overline {
	font-size: var(--lm-text-overline-size);
	line-height: var(--lm-text-overline-line-height);
	letter-spacing: var(--lm-text-overline-tracking);
	font-weight: var(--lm-text-overline-weight);
	text-transform: uppercase;
}
.lm-text-numeric-xl {
	font-size: var(--lm-text-numeric-xl-size);
	line-height: var(--lm-text-numeric-xl-line-height);
	letter-spacing: var(--lm-text-numeric-xl-tracking);
	font-weight: var(--lm-text-numeric-xl-weight);
	font-feature-settings: var(--lm-font-features-num);
}
.lm-text-numeric-lg {
	font-size: var(--lm-text-numeric-lg-size);
	line-height: var(--lm-text-numeric-lg-line-height);
	letter-spacing: var(--lm-text-numeric-lg-tracking);
	font-weight: var(--lm-text-numeric-lg-weight);
	font-feature-settings: var(--lm-font-features-num);
}
.lm-text-code {
	font-size: var(--lm-text-code-size);
	line-height: var(--lm-text-code-line-height);
	letter-spacing: var(--lm-text-code-tracking);
	font-weight: var(--lm-text-code-weight);
	font-family: var(--lm-font-mono);
}
.lm-num { font-feature-settings: var(--lm-font-features-num); }
.lm-spec { font-feature-settings: var(--lm-font-features-spec); }


/* ---- assets/css/components.css ---- */
/* 출처: lumedian-design-system/css/components.css 그대로 복사(2026-10-21, D 세션). 여기서 고치지 말고 디자인 시스템에서 다시 복사한다. */
/* Lumedian 컴포넌트 기준 구현(.lm-*).
   먼저 fonts/fonts.css, dist/lumedian.css를 불러온다. 값은 모두 토큰 변수(--lm-*)에서 가져온다 — 이 파일에 색 값(hex)을 직접 쓰지 않는다.
   모양 원칙: 각진 기하(컨트롤 4px · 카드 6px · 떠 있는 면 8px), 영역은 면 색과 선으로 나누고 그림자는 떠 있는 면에만.
   호박색(lumen)은 '주요 강조·선택·켜짐'에만 쓴다. 호박색 위 글자는 항상 ink. */

/* ---------- 기초 ---------- */
.lm-root {
	font-family: var(--lm-font-sans);
	font-feature-settings: var(--lm-font-features);
	font-size: var(--lm-text-body-size);
	line-height: var(--lm-text-body-line-height);
	color: var(--lm-fg-primary);
	background: var(--lm-bg-canvas);
	-webkit-font-smoothing: antialiased;
}
:where(.lm-root :lang(ko), .lm-root:lang(ko)) { word-break: keep-all; overflow-wrap: break-word; }

.lm-icon {
	width: var(--lm-size-icon-md); height: var(--lm-size-icon-md); flex: none;
	fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.lm-icon--sm { width: var(--lm-size-icon-sm); height: var(--lm-size-icon-sm); stroke-width: 2; }
.lm-icon--lg { width: var(--lm-size-icon-lg); height: var(--lm-size-icon-lg); stroke-width: 1.5; }

.lm-focusable:focus-visible,
.lm-btn:focus-visible, .lm-input:focus-visible, .lm-select:focus-visible, .lm-textarea:focus-visible,
.lm-tab:focus-visible, .lm-chip:focus-visible, .lm-link:focus-visible, .lm-menu__item:focus-visible,
.lm-page:focus-visible, .lm-segmented__btn:focus-visible, .lm-card--interactive:focus-visible, .lm-accordion summary:focus-visible {
	outline: none; box-shadow: var(--lm-focus-ring);
}
.lm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 버튼 ---------- */
.lm-btn {
	--btn-h: var(--lm-size-control-md);
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--lm-space-2);
	min-height: var(--btn-h); padding: 0 var(--lm-space-4);
	border: 1px solid transparent; border-radius: var(--lm-radius-md);
	font: inherit; font-size: var(--lm-text-label-size); line-height: 1; font-weight: var(--lm-font-weight-semibold); letter-spacing: 0;
	white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
	transition: background-color var(--lm-duration-fast) var(--lm-ease-standard), border-color var(--lm-duration-fast) var(--lm-ease-standard),
		color var(--lm-duration-fast) var(--lm-ease-standard), transform var(--lm-duration-instant) var(--lm-ease-standard);
}
.lm-btn:active:not(:disabled):not([aria-disabled='true']) { transform: translateY(1px); }
.lm-btn .lm-icon { width: 18px; height: 18px; margin-inline: -2px; }
.lm-btn--sm { --btn-h: var(--lm-size-control-sm); padding: 0 var(--lm-space-3); font-size: 12px; }
.lm-btn--lg { --btn-h: var(--lm-size-control-lg); padding: 0 var(--lm-space-6); font-size: 15px; }
.lm-btn--block { display: flex; width: 100%; }
.lm-btn--icon { width: var(--btn-h); padding: 0; }

.lm-btn--primary { background: var(--lm-action-primary-bg); color: var(--lm-action-primary-fg); }
.lm-btn--primary:hover { background: var(--lm-action-primary-bg-hover); }
.lm-btn--accent { background: var(--lm-action-accent-bg); color: var(--lm-action-accent-fg); }
.lm-btn--accent:hover { background: var(--lm-action-accent-bg-hover); }
.lm-btn--secondary { background: var(--lm-action-secondary-bg); color: var(--lm-action-secondary-fg); border-color: var(--lm-action-secondary-border); }
.lm-btn--secondary:hover { background: var(--lm-action-secondary-bg-hover); border-color: var(--lm-border-strong); }
.lm-btn--ghost { background: transparent; color: var(--lm-fg-primary); }
.lm-btn--ghost:hover { background: var(--lm-action-ghost-bg-hover); }
.lm-btn--danger { background: var(--lm-action-danger-bg); color: var(--lm-action-danger-fg); }
.lm-btn--danger:hover { background: var(--lm-action-danger-bg-hover); }
/* 밑줄 버튼: 마케팅 화면의 3차 행동 */
.lm-btn--underline {
	min-height: auto; padding: 4px 0; border-radius: 0; background: none; color: var(--lm-fg-primary);
	border-bottom: 1.5px solid currentColor;
}
.lm-btn--underline:hover { border-bottom-width: 3px; padding-bottom: 2.5px; }

.lm-btn:disabled, .lm-btn[aria-disabled='true'] {
	background: var(--lm-action-disabled-bg); color: var(--lm-action-disabled-fg); border-color: transparent; cursor: not-allowed;
}
.lm-btn--ghost:disabled, .lm-btn--underline:disabled { background: none; }

/* 처리 중: 글자를 숨기고(폭은 그대로) 그 자리에 원형 로딩을 돌린다 — 아래 '원형 로딩' 참고 */
.lm-btn.is-loading { color: transparent !important; pointer-events: none; --sp-size: 16px; --sp-line: 2px; --sp-color: var(--btn-loader, var(--lm-action-primary-fg)); }
.lm-btn--sm.is-loading { --sp-size: 13px; --sp-line: 1.5px; }
.lm-btn--lg.is-loading { --sp-size: 18px; }
.lm-btn--accent.is-loading, .lm-btn--secondary.is-loading, .lm-btn--ghost.is-loading, .lm-btn--underline.is-loading { --btn-loader: var(--lm-fg-primary); }
.lm-btn--danger.is-loading { --btn-loader: var(--lm-action-danger-fg); }

.lm-btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--lm-space-2); align-items: center; }

.lm-link { color: var(--lm-fg-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: 1px; }
.lm-link:hover { color: var(--lm-fg-link-hover); text-decoration-thickness: 2px; }
/* 조용한 링크: 마케팅·본문용. 검정 글자 + 호박색 밑줄 띠 */
.lm-link--quiet { color: var(--lm-fg-primary); text-decoration: none; background: linear-gradient(var(--lm-color-lumen-400), var(--lm-color-lumen-400)) 0 100% / 100% 0.12em no-repeat; transition: background-size var(--lm-duration-fast) var(--lm-ease-standard); }
.lm-link--quiet:hover { color: var(--lm-fg-primary); background-size: 100% 100%; }

/* ---------- 입력 ---------- */
.lm-field { display: grid; gap: var(--lm-space-1-5); min-width: 0; }
.lm-label { font-size: var(--lm-text-label-size); line-height: var(--lm-text-label-line-height); font-weight: var(--lm-font-weight-semibold); color: var(--lm-fg-primary); }
.lm-label__opt { font-weight: var(--lm-font-weight-regular); color: var(--lm-fg-tertiary); margin-left: var(--lm-space-1); }
.lm-label__req { color: var(--lm-status-danger-fg); margin-left: 2px; }
.lm-hint { font-size: var(--lm-text-caption-size); line-height: var(--lm-text-caption-line-height); color: var(--lm-fg-tertiary); }
.lm-error-text { display: flex; gap: var(--lm-space-1); align-items: flex-start; font-size: var(--lm-text-caption-size); line-height: var(--lm-text-caption-line-height); color: var(--lm-status-danger-fg); font-weight: var(--lm-font-weight-medium); }
.lm-error-text .lm-icon { width: 14px; height: 14px; margin-top: 2px; }

.lm-input, .lm-select, .lm-textarea {
	width: 100%; min-height: var(--lm-size-control-md); padding: 0 var(--lm-space-3);
	background: var(--lm-bg-surface); color: var(--lm-fg-primary);
	border: 1px solid var(--lm-border-strong); border-radius: var(--lm-radius-md);
	font: inherit; font-size: var(--lm-text-body-sm-size);
	transition: border-color var(--lm-duration-fast) var(--lm-ease-standard), box-shadow var(--lm-duration-fast) var(--lm-ease-standard);
}
.lm-input::placeholder, .lm-textarea::placeholder { color: var(--lm-fg-tertiary); }
.lm-input:hover, .lm-select:hover, .lm-textarea:hover { border-color: var(--lm-fg-secondary); }
.lm-input:focus-visible, .lm-select:focus-visible, .lm-textarea:focus-visible { border-color: var(--lm-border-inverse); }
.lm-textarea { min-height: 96px; padding: var(--lm-space-2-5) var(--lm-space-3); line-height: 1.6; resize: vertical; }
.lm-select {
	appearance: none; padding-right: var(--lm-space-10); cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.lm-input--sm, .lm-select--sm { min-height: var(--lm-size-control-sm); font-size: 13px; }
.lm-input--lg, .lm-select--lg { min-height: var(--lm-size-control-lg); font-size: 15px; padding-inline: var(--lm-space-4); }
.lm-input[aria-invalid='true'], .lm-select[aria-invalid='true'], .lm-textarea[aria-invalid='true'] { border-color: var(--lm-status-danger-solid); border-width: 1.5px; }
.lm-input:disabled, .lm-select:disabled, .lm-textarea:disabled { background: var(--lm-action-disabled-bg); color: var(--lm-fg-disabled); border-color: var(--lm-border-default); cursor: not-allowed; }
.lm-input[readonly] { background: var(--lm-bg-surface-sunken); border-color: var(--lm-border-default); }
.lm-input.lm-spec, .lm-input--spec { font-feature-settings: var(--lm-font-features-spec); }

/* 앞뒤 붙이(단위·아이콘) */
.lm-input-group {
	display: flex; align-items: stretch; min-height: var(--lm-size-control-md);
	background: var(--lm-bg-surface); border: 1px solid var(--lm-border-strong); border-radius: var(--lm-radius-md);
	transition: border-color var(--lm-duration-fast) var(--lm-ease-standard), box-shadow var(--lm-duration-fast) var(--lm-ease-standard);
}
.lm-input-group:hover { border-color: var(--lm-fg-secondary); }
.lm-input-group:focus-within { border-color: var(--lm-border-inverse); box-shadow: var(--lm-focus-ring); }
.lm-input-group .lm-input { border: 0; min-height: 0; background: transparent; box-shadow: none !important; }
.lm-input-group__affix {
	display: flex; align-items: center; gap: var(--lm-space-1); padding: 0 var(--lm-space-3);
	color: var(--lm-fg-tertiary); font-size: var(--lm-text-body-sm-size); white-space: nowrap;
}
.lm-input-group__affix--box { background: var(--lm-bg-surface-sunken); border-left: 1px solid var(--lm-border-default); border-radius: 0 var(--lm-radius-md) var(--lm-radius-md) 0; color: var(--lm-fg-secondary); font-weight: var(--lm-font-weight-medium); }
.lm-input-group__affix:first-child.lm-input-group__affix--box { border-left: 0; border-right: 1px solid var(--lm-border-default); border-radius: var(--lm-radius-md) 0 0 var(--lm-radius-md); }

/* 체크박스·라디오 — 네이티브 input에 모양만 입힌다 */
.lm-check, .lm-radio { display: inline-flex; align-items: flex-start; gap: var(--lm-space-2); cursor: pointer; font-size: var(--lm-text-body-sm-size); line-height: 20px; }
.lm-check input, .lm-radio input {
	appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; display: grid; place-items: center;
	background: var(--lm-bg-surface); border: 1.5px solid var(--lm-border-strong); cursor: pointer;
	transition: background-color var(--lm-duration-fast) var(--lm-ease-standard), border-color var(--lm-duration-fast) var(--lm-ease-standard);
}
.lm-check input { border-radius: var(--lm-radius-sm); }
.lm-radio input { border-radius: 50%; }
.lm-check input:hover, .lm-radio input:hover { border-color: var(--lm-fg-primary); }
.lm-check input:checked, .lm-check input:indeterminate { background: var(--lm-action-primary-bg); border-color: var(--lm-action-primary-bg); }
.lm-check input:checked::before {
	content: ''; width: 10px; height: 6px; margin-top: -3px;
	border-left: 2px solid var(--lm-action-primary-fg); border-bottom: 2px solid var(--lm-action-primary-fg); transform: rotate(-45deg);
}
.lm-check input:indeterminate::before { content: ''; width: 10px; height: 2px; background: var(--lm-action-primary-fg); }
.lm-radio input:checked { border-color: var(--lm-action-primary-bg); border-width: 5.5px; }
.lm-check input:focus-visible, .lm-radio input:focus-visible { outline: none; box-shadow: var(--lm-focus-ring); }
.lm-check:has(input:disabled), .lm-radio:has(input:disabled) { color: var(--lm-fg-disabled); cursor: not-allowed; }
.lm-check input:disabled, .lm-radio input:disabled { background: var(--lm-action-disabled-bg); border-color: var(--lm-border-default); cursor: not-allowed; }
.lm-check input:disabled:checked { background: var(--lm-border-default); }
.lm-check__desc { display: block; color: var(--lm-fg-tertiary); font-size: var(--lm-text-caption-size); line-height: 18px; }

/* 스위치 — 켜지면 손잡이가 호박색으로 '점등'된다. 손잡이는 각진 픽셀 */
.lm-switch { display: inline-flex; align-items: center; gap: var(--lm-space-3); cursor: pointer; font-size: var(--lm-text-body-sm-size); }
.lm-switch input {
	appearance: none; flex: none; position: relative; width: 40px; height: 22px; margin: 0; cursor: pointer;
	background: var(--lm-bg-surface); border: 1.5px solid var(--lm-border-strong); border-radius: var(--lm-radius-sm);
	transition: background-color var(--lm-duration-base) var(--lm-ease-standard), border-color var(--lm-duration-base) var(--lm-ease-standard);
}
.lm-switch input::before {
	content: ''; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 1.5px;
	background: var(--lm-border-strong); transition: transform var(--lm-duration-base) var(--lm-ease-emphasized), background-color var(--lm-duration-base) var(--lm-ease-standard), box-shadow var(--lm-duration-base);
}
.lm-switch input:checked { background: var(--lm-color-ink); border-color: var(--lm-color-ink); }
.lm-switch input:checked::before { transform: translateX(18px); background: var(--lm-color-lumen-300); box-shadow: 0 0 8px rgb(255 198 110 / 0.55); }
[data-theme='dark'] .lm-switch input:checked { border-color: var(--lm-color-lumen-300); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .lm-switch input:checked { border-color: var(--lm-color-lumen-300); } }
.lm-switch input:focus-visible { outline: none; box-shadow: var(--lm-focus-ring); }
.lm-switch:has(input:disabled) { color: var(--lm-fg-disabled); cursor: not-allowed; }
.lm-switch input:disabled { background: var(--lm-action-disabled-bg); border-color: var(--lm-border-default); cursor: not-allowed; }
.lm-switch input:disabled::before { background: var(--lm-border-default); box-shadow: none; }
.lm-switch input:disabled:checked::before { background: var(--lm-fg-disabled); }

/* 세그먼트 컨트롤 — 보기 전환(목록/격자, 일/주/월) */
.lm-segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--lm-bg-surface-sunken); border: 1px solid var(--lm-border-subtle); border-radius: var(--lm-radius-md); }
.lm-segmented__btn {
	display: inline-flex; align-items: center; gap: var(--lm-space-1-5); min-height: 30px; padding: 0 var(--lm-space-3);
	border: 0; border-radius: var(--lm-radius-sm); background: transparent; color: var(--lm-fg-secondary);
	font: inherit; font-size: 13px; font-weight: var(--lm-font-weight-semibold); cursor: pointer;
}
.lm-segmented__btn:hover { color: var(--lm-fg-primary); }
.lm-segmented__btn[aria-pressed='true'], .lm-segmented__btn[aria-selected='true'] { background: var(--lm-bg-surface-raised); color: var(--lm-fg-primary); box-shadow: var(--lm-shadow-xs), 0 0 0 1px var(--lm-border-default); }
.lm-segmented__btn .lm-icon { width: 16px; height: 16px; }

/* ---------- 탭·칩 ---------- */
.lm-tabs { display: flex; gap: var(--lm-space-6); border-bottom: 1px solid var(--lm-border-subtle); overflow-x: auto; scrollbar-width: none; }
.lm-tab {
	position: relative; display: inline-flex; align-items: center; gap: var(--lm-space-1-5); padding: var(--lm-space-3) 0; margin-bottom: -1px;
	border: 0; background: none; color: var(--lm-fg-tertiary); font: inherit; font-size: 14px; font-weight: var(--lm-font-weight-semibold);
	white-space: nowrap; cursor: pointer; border-radius: 2px;
}
.lm-tab:hover { color: var(--lm-fg-primary); }
.lm-tab[aria-selected='true'] { color: var(--lm-fg-primary); }
.lm-tab[aria-selected='true']::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--lm-fg-primary); }
.lm-tab__count { min-width: 20px; padding: 1px 6px; border-radius: var(--lm-radius-xs); background: var(--lm-status-neutral-bg); color: var(--lm-fg-secondary); font-size: 11px; line-height: 16px; text-align: center; font-feature-settings: var(--lm-font-features-num); }
.lm-tab[aria-selected='true'] .lm-tab__count { background: var(--lm-bg-brand); color: var(--lm-fg-on-brand); }

/* 칩: 필터·분류 선택. 선택되면 검정(다크에서는 흰) 판 */
.lm-chips { display: flex; flex-wrap: wrap; gap: var(--lm-space-2); }
.lm-chip {
	display: inline-flex; align-items: center; gap: var(--lm-space-1-5); min-height: 32px; padding: 0 var(--lm-space-3);
	border: 1px solid var(--lm-border-default); border-radius: var(--lm-radius-sm); background: var(--lm-bg-surface);
	color: var(--lm-fg-primary); font: inherit; font-size: 13px; font-weight: var(--lm-font-weight-medium); cursor: pointer; white-space: nowrap;
}
.lm-chip:hover { border-color: var(--lm-border-strong); background: var(--lm-bg-surface-hover); }
.lm-chip[aria-pressed='true'], .lm-chip[aria-selected='true'] { background: var(--lm-action-primary-bg); border-color: var(--lm-action-primary-bg); color: var(--lm-action-primary-fg); }
.lm-chip .lm-icon { width: 14px; height: 14px; }

/* ---------- 배지·태그·상태 ---------- */
.lm-tag {
	display: inline-flex; align-items: center; gap: var(--lm-space-1); height: 22px; padding: 0 var(--lm-space-2);
	border-radius: var(--lm-radius-xs); background: var(--lm-status-neutral-bg); color: var(--lm-fg-secondary);
	font-size: 12px; font-weight: var(--lm-font-weight-semibold); line-height: 1; white-space: nowrap;
}
.lm-tag--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--lm-border-default); }
.lm-tag--brand { background: var(--lm-bg-brand); color: var(--lm-fg-on-brand); }
.lm-tag--inverse { background: var(--lm-bg-inverse); color: var(--lm-fg-inverse); }
.lm-tag--cobalt { background: var(--lm-accent-cobalt-bg); color: var(--lm-accent-cobalt-fg); }
.lm-tag--cyan { background: var(--lm-accent-cyan-bg); color: var(--lm-accent-cyan-fg); }
.lm-tag--magenta { background: var(--lm-accent-magenta-bg); color: var(--lm-accent-magenta-fg); }
.lm-tag--spec { font-feature-settings: var(--lm-font-features-spec); }

.lm-badge {
	display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--lm-space-2);
	border-radius: var(--lm-radius-sm); font-size: 12px; font-weight: var(--lm-font-weight-semibold); line-height: 1; white-space: nowrap;
	background: var(--lm-status-neutral-bg); color: var(--lm-status-neutral-fg);
}
.lm-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--badge-dot, var(--lm-status-neutral-solid)); flex: none; }
.lm-badge--plain::before { display: none; }
.lm-badge--success { background: var(--lm-status-success-bg); color: var(--lm-status-success-fg); --badge-dot: var(--lm-status-success-solid); }
.lm-badge--warning { background: var(--lm-status-warning-bg); color: var(--lm-status-warning-fg); --badge-dot: var(--lm-status-warning-solid); }
.lm-badge--danger { background: var(--lm-status-danger-bg); color: var(--lm-status-danger-fg); --badge-dot: var(--lm-status-danger-solid); }
.lm-badge--info { background: var(--lm-status-info-bg); color: var(--lm-status-info-fg); --badge-dot: var(--lm-status-info-solid); }
.lm-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--lm-border-default); color: var(--lm-fg-secondary); }

/* 송출 중(LIVE) — 방송 탈리 라이트. 점이 천천히 숨 쉰다 */
.lm-live {
	display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--lm-space-2);
	border-radius: var(--lm-radius-xs); background: var(--lm-status-live-solid); color: var(--lm-color-white);
	font-size: 11px; font-weight: var(--lm-font-weight-bold); letter-spacing: 0.08em; line-height: 1;
}
.lm-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: lm-breathe 1.6s var(--lm-ease-standard) infinite; }
@keyframes lm-breathe { 50% { opacity: 0.25; } }

/* 기기 상태 점 */
.lm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lm-status-neutral-solid); flex: none; }
.lm-dot--online { background: var(--lm-status-success-solid); box-shadow: 0 0 0 3px var(--lm-status-success-bg); }
.lm-dot--warning { background: var(--lm-status-warning-solid); box-shadow: 0 0 0 3px var(--lm-status-warning-bg); }
.lm-dot--error { background: var(--lm-status-danger-solid); box-shadow: 0 0 0 3px var(--lm-status-danger-bg); }
.lm-dot--offline { background: transparent; box-shadow: inset 0 0 0 2px var(--lm-status-neutral-solid); }

/* ---------- 카드·패널 ---------- */
.lm-card { display: flex; flex-direction: column; min-width: 0; background: var(--lm-bg-surface); border: 1px solid var(--lm-border-subtle); border-radius: var(--lm-radius-lg); overflow: hidden; }
.lm-card__media { position: relative; aspect-ratio: var(--lm-ratio-16x9); background: var(--lm-bg-screen); overflow: hidden; }
.lm-card__media img, .lm-card__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-card__body { display: grid; gap: var(--lm-space-2); padding: var(--lm-space-5); }
.lm-card__eyebrow { font-size: var(--lm-text-overline-size); line-height: var(--lm-text-overline-line-height); letter-spacing: var(--lm-text-overline-tracking); font-weight: var(--lm-text-overline-weight); text-transform: uppercase; color: var(--lm-fg-tertiary); }
.lm-card__title { margin: 0; font-size: var(--lm-text-heading-sm-size); line-height: var(--lm-text-heading-sm-line-height); letter-spacing: var(--lm-text-heading-sm-tracking); font-weight: var(--lm-font-weight-semibold); }
.lm-card__text { margin: 0; color: var(--lm-fg-secondary); font-size: var(--lm-text-body-sm-size); line-height: var(--lm-text-body-sm-line-height); }
.lm-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--lm-space-3); margin-top: auto; padding: var(--lm-space-3) var(--lm-space-5); border-top: 1px solid var(--lm-border-subtle); font-size: 13px; color: var(--lm-fg-tertiary); }
.lm-card--interactive { cursor: pointer; text-decoration: none; color: inherit; transition: border-color var(--lm-duration-fast) var(--lm-ease-standard), transform var(--lm-duration-base) var(--lm-ease-standard); }
.lm-card--interactive:hover { border-color: var(--lm-border-inverse); }
.lm-card--interactive:hover .lm-card__media img { transform: scale(1.03); }
.lm-card__media img { transition: transform var(--lm-duration-slower) var(--lm-ease-standard); }
.lm-card--sunken { background: var(--lm-bg-surface-sunken); border-color: transparent; }
.lm-card--brand { background: var(--lm-bg-brand); color: var(--lm-fg-on-brand); border-color: transparent; }
.lm-card--brand .lm-card__text, .lm-card--brand .lm-card__eyebrow { color: var(--lm-fg-on-brand); opacity: 0.78; }
.lm-card--inverse { background: var(--lm-bg-inverse); color: var(--lm-fg-inverse); border-color: transparent; }
.lm-card--inverse .lm-card__text, .lm-card--inverse .lm-card__eyebrow { color: var(--lm-fg-inverse); opacity: 0.7; }

.lm-panel { background: var(--lm-bg-surface); border: 1px solid var(--lm-border-subtle); border-radius: var(--lm-radius-lg); }
.lm-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--lm-space-3); padding: var(--lm-space-4) var(--lm-space-5); border-bottom: 1px solid var(--lm-border-subtle); }
.lm-panel__title { margin: 0; font-size: var(--lm-text-title-size); line-height: var(--lm-text-title-line-height); font-weight: var(--lm-font-weight-semibold); }
.lm-panel__body { padding: var(--lm-space-5); }

/* KPI 숫자 */
.lm-stat { display: grid; gap: var(--lm-space-1); padding: var(--lm-space-5); background: var(--lm-bg-surface); border: 1px solid var(--lm-border-subtle); border-radius: var(--lm-radius-lg); }
.lm-stat__label { display: flex; align-items: center; gap: var(--lm-space-1-5); font-size: 13px; color: var(--lm-fg-secondary); font-weight: var(--lm-font-weight-medium); }
.lm-stat__value { font-size: var(--lm-text-numeric-xl-size); line-height: var(--lm-text-numeric-xl-line-height); letter-spacing: var(--lm-text-numeric-xl-tracking); font-weight: var(--lm-font-weight-semibold); font-feature-settings: var(--lm-font-features-num); }
.lm-stat__unit { font-size: 0.5em; font-weight: var(--lm-font-weight-semibold); color: var(--lm-fg-tertiary); margin-left: 2px; letter-spacing: 0; }
.lm-stat__delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: var(--lm-font-weight-semibold); font-feature-settings: var(--lm-font-features-num); }
.lm-stat__delta--up { color: var(--lm-status-success-fg); }
.lm-stat__delta--down { color: var(--lm-status-danger-fg); }
.lm-stat__meta { font-size: 12px; color: var(--lm-fg-tertiary); }
.lm-stat--brand { background: var(--lm-bg-brand); border-color: transparent; color: var(--lm-fg-on-brand); }
.lm-stat--brand .lm-stat__label, .lm-stat--brand .lm-stat__meta, .lm-stat--brand .lm-stat__unit { color: var(--lm-fg-on-brand); opacity: 0.72; }

/* 사양 목록(키-값) */
.lm-specs { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; margin: 0; border-top: 1px solid var(--lm-border-subtle); }
.lm-specs dt, .lm-specs dd { margin: 0; padding: var(--lm-space-3) 0; border-bottom: 1px solid var(--lm-border-subtle); font-size: var(--lm-text-body-sm-size); }
.lm-specs dt { color: var(--lm-fg-tertiary); padding-right: var(--lm-space-6); }
.lm-specs dd { font-weight: var(--lm-font-weight-semibold); font-feature-settings: var(--lm-font-features-spec); }

/* ---------- 표 ---------- */
.lm-table-wrap { overflow-x: auto; border: 1px solid var(--lm-border-subtle); border-radius: var(--lm-radius-lg); background: var(--lm-bg-surface); }
.lm-table { width: 100%; border-collapse: collapse; font-size: var(--lm-text-body-sm-size); }
.lm-table th {
	position: sticky; top: 0; z-index: 1; padding: var(--lm-space-2-5) var(--lm-space-4); text-align: left; white-space: nowrap;
	background: var(--lm-bg-surface-sunken); color: var(--lm-fg-tertiary); font-size: 12px; font-weight: var(--lm-font-weight-semibold);
	border-bottom: 1px solid var(--lm-border-default);
}
.lm-table td { padding: var(--lm-space-3) var(--lm-space-4); border-bottom: 1px solid var(--lm-border-subtle); vertical-align: middle; }
.lm-table tbody tr:last-child td { border-bottom: 0; }
.lm-table tbody tr:hover td { background: var(--lm-bg-surface-hover); }
.lm-table tbody tr[aria-selected='true'] td { background: var(--lm-bg-surface-selected); }
.lm-table tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 3px 0 0 var(--lm-fg-brand); }
.lm-table .is-num, .lm-table th.is-num { text-align: right; font-feature-settings: var(--lm-font-features-num); white-space: nowrap; }
.lm-table .is-spec { font-feature-settings: var(--lm-font-features-spec); white-space: nowrap; }
.lm-table .is-muted { color: var(--lm-fg-tertiary); }
.lm-table .is-check { width: 44px; }
.lm-table__primary { font-weight: var(--lm-font-weight-semibold); }
.lm-table__sub { display: block; font-size: 12px; color: var(--lm-fg-tertiary); }
.lm-table--compact th { padding-block: 6px; }
.lm-table--compact td { padding-block: 7px; }
.lm-table th[aria-sort] { cursor: pointer; }
.lm-table th[aria-sort]::after { content: '↕'; margin-left: 4px; opacity: 0.4; }
.lm-table th[aria-sort='ascending']::after { content: '↑'; opacity: 1; }
.lm-table th[aria-sort='descending']::after { content: '↓'; opacity: 1; }

/* ---------- 알림·피드백 ---------- */
.lm-alert {
	display: grid; grid-template-columns: auto 1fr auto; gap: var(--lm-space-3); align-items: start; padding: var(--lm-space-4);
	border-radius: var(--lm-radius-lg); border: 1px solid var(--lm-status-neutral-border); background: var(--lm-status-neutral-bg); color: var(--lm-fg-primary);
	font-size: var(--lm-text-body-sm-size); line-height: var(--lm-text-body-sm-line-height);
}
.lm-alert > .lm-icon { color: var(--alert-icon, var(--lm-status-neutral-fg)); margin-top: 1px; }
.lm-alert__title { display: block; font-weight: var(--lm-font-weight-bold); margin-bottom: 2px; }
.lm-alert__actions { display: flex; gap: var(--lm-space-2); margin-top: var(--lm-space-3); }
.lm-alert--success { background: var(--lm-status-success-bg); border-color: var(--lm-status-success-border); --alert-icon: var(--lm-status-success-fg); }
.lm-alert--warning { background: var(--lm-status-warning-bg); border-color: var(--lm-status-warning-border); --alert-icon: var(--lm-status-warning-fg); }
.lm-alert--danger { background: var(--lm-status-danger-bg); border-color: var(--lm-status-danger-border); --alert-icon: var(--lm-status-danger-fg); }
.lm-alert--info { background: var(--lm-status-info-bg); border-color: var(--lm-status-info-border); --alert-icon: var(--lm-status-info-fg); }
/* 페이지 맨 위 띠 */
.lm-banner { display: flex; align-items: center; justify-content: center; gap: var(--lm-space-3); padding: var(--lm-space-2) var(--lm-space-4); background: var(--lm-bg-inverse); color: var(--lm-fg-inverse); font-size: 13px; font-weight: var(--lm-font-weight-medium); }
.lm-banner--brand { background: var(--lm-bg-brand); color: var(--lm-fg-on-brand); }

.lm-toast {
	display: flex; align-items: center; gap: var(--lm-space-3); min-width: 280px; max-width: 420px; padding: var(--lm-space-3) var(--lm-space-4);
	background: var(--lm-bg-inverse); color: var(--lm-fg-inverse); border-radius: var(--lm-radius-xl); box-shadow: var(--lm-shadow-lg);
	font-size: var(--lm-text-body-sm-size); z-index: var(--lm-z-toast);
}
.lm-toast { --toast-accent: var(--lm-color-lumen-300); }
.lm-toast__action { margin-left: auto; padding: 0; border: 0; background: none; color: var(--toast-accent); font: inherit; font-weight: var(--lm-font-weight-bold); cursor: pointer; }
[data-theme='dark'] .lm-toast { --toast-accent: var(--lm-color-lumen-700); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .lm-toast { --toast-accent: var(--lm-color-lumen-700); } }
[data-theme='light'] .lm-toast { --toast-accent: var(--lm-color-lumen-300); }
.lm-toast .lm-icon--status { color: var(--toast-accent); }

.lm-tooltip {
	position: relative; display: inline-block; max-width: 260px; padding: 6px var(--lm-space-2-5);
	background: var(--lm-bg-inverse); color: var(--lm-fg-inverse); border-radius: var(--lm-radius-md);
	font-size: 12px; line-height: 17px; font-weight: var(--lm-font-weight-medium); box-shadow: var(--lm-shadow-sm); z-index: var(--lm-z-tooltip);
}
.lm-tooltip::after { content: ''; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; background: inherit; transform: translate(-50%, -4px) rotate(45deg); border-radius: 1px; }

.lm-progress { height: 6px; background: var(--lm-bg-surface-sunken); border-radius: var(--lm-radius-xs); overflow: hidden; box-shadow: inset 0 0 0 1px var(--lm-border-subtle); }
.lm-progress__bar { height: 100%; width: var(--value, 0%); background: var(--lm-fg-primary); border-radius: inherit; transition: width var(--lm-duration-slow) var(--lm-ease-standard); }
.lm-progress--brand .lm-progress__bar { background: var(--lm-color-lumen-300); box-shadow: inset 0 0 0 1px var(--lm-fg-brand); }
.lm-progress--success .lm-progress__bar { background: var(--lm-status-success-solid); }
.lm-progress--danger .lm-progress__bar { background: var(--lm-status-danger-solid); }
.lm-progress--indeterminate .lm-progress__bar { width: 30%; animation: lm-indeterminate 1.4s var(--lm-ease-standard) infinite; }
@keyframes lm-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* LED 레벨 미터 — 칸(세그먼트)이 하나씩 켜진다. 밝기·신호·저장 공간처럼 '양'을 보여 줄 때 */
.lm-meter { --segments: 10; --lit: 0; display: grid; grid-template-columns: repeat(var(--segments), 1fr); gap: 3px; height: 12px; }
.lm-meter > i { border-radius: 1px; background: var(--lm-bg-surface-sunken); box-shadow: inset 0 0 0 1px var(--lm-border-subtle); }
.lm-meter > i.is-lit { background: var(--lm-color-lumen-300); box-shadow: inset 0 0 0 1px var(--lm-fg-brand); }
.lm-meter--warning > i.is-lit { background: var(--lm-status-warning-solid); }
.lm-meter--danger > i.is-lit { background: var(--lm-status-danger-solid); }

/* ---------- 원형 로딩 ----------
   옅은 원(궤도) 위로 원호 하나가 0.8초에 한 바퀴 일정하게 돈다. 가장 익숙한 '기다리는 중' 신호라 브랜드 장식 없이 그대로 쓴다.
   쓰는 곳: 버튼 처리 중(.lm-btn.is-loading), 페이지·구역 로더(.lm-loader). 크기·선 굵기·색은 --sp-size·--sp-line·--sp-color.
   완전한 원은 원래 상태 점·아바타에만 쓰지만, 로딩은 예외로 둔다. */
.lm-loader {
	--sp-size: 20px; --sp-line: 2px; --sp-color: currentColor;
	position: relative; display: inline-block; flex: none; vertical-align: middle;
	width: var(--sp-size); height: var(--sp-size);
}
.lm-loader > i { display: none; } /* 예전 3×3 점 마크업과 호환 */
.lm-loader--sm { --sp-size: 14px; --sp-line: 1.5px; }
.lm-loader--lg { --sp-size: 32px; --sp-line: 2.5px; }
/* 호박색은 어두운 면(ink·화면 미리보기) 위에서만. 밝은 바탕에서는 1.5:1이라 보이지 않는다 */
.lm-loader--brand { --sp-color: var(--lm-color-lumen-300); }
.lm-btn.is-loading::after, .lm-loader::after {
	content: ''; position: absolute; inset: 0; margin: auto; box-sizing: border-box;
	width: var(--sp-size); height: var(--sp-size); border-radius: 50%; pointer-events: none;
	color: var(--sp-color);
	border: var(--sp-line) solid color-mix(in srgb, currentColor 20%, transparent); border-top-color: currentColor;
	animation: lm-spin 0.8s linear infinite;
}
@keyframes lm-spin { to { transform: rotate(360deg); } }
@keyframes lm-spin-breathe { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.lm-skeleton { display: block; border-radius: var(--lm-radius-sm); background: linear-gradient(90deg, var(--lm-bg-surface-sunken) 0%, var(--lm-bg-surface-hover) 50%, var(--lm-bg-surface-sunken) 100%) 0 0 / 200% 100%; animation: lm-shimmer 1.6s linear infinite; }
@keyframes lm-shimmer { to { background-position: -200% 0; } }

/* ---------- 떠 있는 면 ---------- */
.lm-menu { display: grid; min-width: 200px; padding: var(--lm-space-1); background: var(--lm-bg-surface-raised); border: 1px solid var(--lm-border-default); border-radius: var(--lm-radius-xl); box-shadow: var(--lm-shadow-md); z-index: var(--lm-z-dropdown); }
.lm-menu__item {
	display: flex; align-items: center; gap: var(--lm-space-2-5); min-height: 34px; padding: 0 var(--lm-space-2-5);
	border: 0; border-radius: var(--lm-radius-md); background: none; color: var(--lm-fg-primary); font: inherit; font-size: 14px; text-align: left; cursor: pointer; text-decoration: none;
}
.lm-menu__item:hover, .lm-menu__item[data-active] { background: var(--lm-bg-surface-hover); }
.lm-menu__item .lm-icon { width: 16px; height: 16px; color: var(--lm-fg-tertiary); }
.lm-menu__item--danger { color: var(--lm-status-danger-fg); }
.lm-menu__item--danger .lm-icon { color: inherit; }
.lm-menu__shortcut { margin-left: auto; color: var(--lm-fg-tertiary); font-size: 12px; }
.lm-menu__sep { height: 1px; margin: var(--lm-space-1) calc(var(--lm-space-1) * -1); background: var(--lm-border-subtle); }
.lm-menu__label { padding: var(--lm-space-2) var(--lm-space-2-5) var(--lm-space-1); font-size: 11px; font-weight: var(--lm-font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-fg-tertiary); }

.lm-backdrop { position: fixed; inset: 0; background: var(--lm-bg-overlay); z-index: var(--lm-z-overlay); }
.lm-modal {
	display: flex; flex-direction: column; width: min(560px, calc(100vw - 32px)); max-width: 100%; max-height: calc(100dvh - 64px);
	background: var(--lm-bg-surface-raised); border-radius: var(--lm-radius-xl); box-shadow: var(--lm-shadow-xl); overflow: hidden; z-index: var(--lm-z-modal);
}
.lm-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lm-space-4); padding: var(--lm-space-5) var(--lm-space-6) var(--lm-space-3); }
.lm-modal__title { margin: 0; font-size: var(--lm-text-heading-sm-size); line-height: var(--lm-text-heading-sm-line-height); font-weight: var(--lm-font-weight-semibold); letter-spacing: var(--lm-text-heading-sm-tracking); }
.lm-modal__body { padding: 0 var(--lm-space-6) var(--lm-space-5); overflow-y: auto; color: var(--lm-fg-secondary); font-size: var(--lm-text-body-sm-size); line-height: 1.65; }
.lm-modal__foot { display: flex; justify-content: flex-end; gap: var(--lm-space-2); padding: var(--lm-space-4) var(--lm-space-6); border-top: 1px solid var(--lm-border-subtle); background: var(--lm-bg-surface-sunken); }
.lm-modal--danger .lm-modal__head { box-shadow: inset 0 3px 0 var(--lm-status-danger-solid); }
dialog.lm-modal { border: 0; padding: 0; color: var(--lm-fg-primary); }
dialog.lm-modal::backdrop { background: var(--lm-bg-overlay); }

.lm-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--lm-bg-surface-raised); box-shadow: var(--lm-shadow-xl); z-index: var(--lm-z-modal); }

.lm-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--lm-space-3); padding: var(--lm-space-4) var(--lm-space-5); border-bottom: 1px solid var(--lm-border-subtle); }
.lm-drawer__title { margin: 0; font-size: var(--lm-text-title-size); line-height: var(--lm-text-title-line-height); font-weight: var(--lm-font-weight-bold); }
.lm-drawer__body { flex: 1; overflow-y: auto; padding: var(--lm-space-5); }
.lm-drawer__foot { display: flex; justify-content: flex-end; gap: var(--lm-space-2); padding: var(--lm-space-4) var(--lm-space-5); border-top: 1px solid var(--lm-border-subtle); background: var(--lm-bg-surface-sunken); }

/* 툴팁 방향 — 기본은 위(화살표가 아래) */
.lm-tooltip--bottom::after { top: auto; bottom: 100%; transform: translate(-50%, 4px) rotate(45deg); }
.lm-tooltip--right::after { left: auto; right: 100%; top: 50%; transform: translate(4px, -50%) rotate(45deg); }

/* 빈 표 */
.lm-table__empty td { padding: var(--lm-space-12) var(--lm-space-4); text-align: center; color: var(--lm-fg-tertiary); }
.lm-table tbody tr.lm-table__empty:hover td { background: transparent; }

/* 입력 그룹 크기·오류 */
.lm-input-group--sm { min-height: var(--lm-size-control-sm); }
.lm-input-group--lg { min-height: var(--lm-size-control-lg); }
.lm-input-group:has([aria-invalid='true']) { border-color: var(--lm-status-danger-solid); border-width: 1.5px; }
.lm-input-group:has(.lm-input:disabled) { background: var(--lm-action-disabled-bg); border-color: var(--lm-border-default); }

/* 알림 닫기 버튼 */
.lm-alert__close { display: grid; place-items: center; width: 28px; height: 28px; margin: -4px -4px 0 0; padding: 0; border: 0; border-radius: var(--lm-radius-md); background: none; color: var(--lm-fg-secondary); cursor: pointer; }
.lm-alert__close:hover { background: rgb(18 16 14 / 0.06); color: var(--lm-fg-primary); }
.lm-alert__close:focus-visible { outline: none; box-shadow: var(--lm-focus-ring); }
.lm-alert__close .lm-icon { width: 16px; height: 16px; }

/* ---------- 내비게이션 ---------- */
.lm-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lm-space-1-5); margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--lm-fg-tertiary); }
.lm-breadcrumb li { display: inline-flex; align-items: center; gap: var(--lm-space-1-5); }
.lm-breadcrumb li + li::before { content: '/'; color: var(--lm-border-strong); }
.lm-breadcrumb a { color: inherit; text-decoration: none; }
.lm-breadcrumb a:hover { color: var(--lm-fg-primary); text-decoration: underline; text-underline-offset: 3px; }
.lm-breadcrumb [aria-current='page'] { color: var(--lm-fg-primary); font-weight: var(--lm-font-weight-semibold); }

.lm-pagination { display: flex; align-items: center; gap: var(--lm-space-1); }
.lm-page {
	display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 var(--lm-space-2);
	border: 1px solid transparent; border-radius: var(--lm-radius-md); background: none; color: var(--lm-fg-secondary);
	font: inherit; font-size: 13px; font-weight: var(--lm-font-weight-semibold); font-feature-settings: var(--lm-font-features-num); cursor: pointer; text-decoration: none;
}
.lm-page:hover { background: var(--lm-action-ghost-bg-hover); color: var(--lm-fg-primary); }
.lm-page[aria-current='page'] { background: var(--lm-action-primary-bg); color: var(--lm-action-primary-fg); }
.lm-page:disabled { color: var(--lm-fg-disabled); background: none; cursor: not-allowed; }
.lm-page .lm-icon { width: 16px; height: 16px; }

/* 단계 표시 — 견적·설치 진행 */
.lm-steps { display: flex; gap: var(--lm-space-2); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.lm-steps li { flex: 1; min-width: 0; display: grid; gap: var(--lm-space-2); counter-increment: step; font-size: 13px; color: var(--lm-fg-tertiary); }
.lm-steps li::before { content: ''; height: 4px; border-radius: 1px; background: var(--lm-border-subtle); }
.lm-steps__label::before { content: counter(step, decimal-leading-zero) '  '; font-feature-settings: var(--lm-font-features-num); font-weight: var(--lm-font-weight-bold); }
.lm-steps li.is-done::before { background: var(--lm-fg-primary); }
.lm-steps li.is-current::before { background: var(--lm-color-lumen-300); box-shadow: inset 0 0 0 1px var(--lm-fg-brand); }
.lm-steps li.is-done, .lm-steps li.is-current { color: var(--lm-fg-primary); }
.lm-steps li.is-current .lm-steps__label { font-weight: var(--lm-font-weight-bold); }

.lm-accordion { border-top: 1px solid var(--lm-border-subtle); }
.lm-accordion details { border-bottom: 1px solid var(--lm-border-subtle); }
.lm-accordion summary {
	display: flex; align-items: center; justify-content: space-between; gap: var(--lm-space-4); padding: var(--lm-space-4) 0;
	list-style: none; cursor: pointer; font-weight: var(--lm-font-weight-semibold); font-size: 15px; border-radius: 2px;
}
.lm-accordion summary::-webkit-details-marker { display: none; }
.lm-accordion summary::after { content: '+'; flex: none; width: 24px; height: 24px; display: grid; place-items: center; font-size: 18px; font-weight: var(--lm-font-weight-regular); transition: transform var(--lm-duration-base) var(--lm-ease-standard); }
.lm-accordion details[open] summary::after { transform: rotate(45deg); }
.lm-accordion__body { padding: 0 0 var(--lm-space-5); color: var(--lm-fg-secondary); font-size: var(--lm-text-body-sm-size); line-height: 1.7; }

/* ---------- 기타 ---------- */
.lm-avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lm-bg-brand); color: var(--lm-fg-on-brand); font-size: 12px; font-weight: var(--lm-font-weight-bold); overflow: hidden; flex: none; }
.lm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lm-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.lm-avatar--lg { width: 44px; height: 44px; font-size: 15px; }
.lm-avatar--neutral { background: var(--lm-status-neutral-bg); color: var(--lm-fg-secondary); }

.lm-kbd { display: inline-flex; align-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--lm-radius-sm); border: 1px solid var(--lm-border-default); border-bottom-width: 2px; background: var(--lm-bg-surface); font: 11px/1 var(--lm-font-mono); color: var(--lm-fg-secondary); }
.lm-code { padding: 1px 5px; border-radius: var(--lm-radius-xs); background: var(--lm-bg-surface-sunken); font-family: var(--lm-font-mono); font-size: 0.88em; color: var(--lm-fg-primary); }
.lm-divider { height: 1px; margin: var(--lm-space-6) 0; border: 0; background: var(--lm-border-subtle); }

.lm-empty { display: grid; justify-items: center; gap: var(--lm-space-3); padding: var(--lm-space-12) var(--lm-space-6); text-align: center; }
.lm-empty__art { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--lm-radius-lg); background: var(--lm-bg-surface-sunken); color: var(--lm-fg-tertiary); }
.lm-empty__title { margin: 0; font-size: var(--lm-text-title-size); font-weight: var(--lm-font-weight-bold); }
.lm-empty__text { margin: 0; max-width: 360px; color: var(--lm-fg-secondary); font-size: var(--lm-text-body-sm-size); }

.lm-dropzone { display: grid; justify-items: center; gap: var(--lm-space-2); padding: var(--lm-space-8) var(--lm-space-6); border: 1.5px dashed var(--lm-border-strong); border-radius: var(--lm-radius-lg); background: var(--lm-bg-surface-sunken); text-align: center; color: var(--lm-fg-secondary); font-size: var(--lm-text-body-sm-size); cursor: pointer; transition: border-color var(--lm-duration-fast), background-color var(--lm-duration-fast); }
.lm-dropzone:hover, .lm-dropzone.is-dragover { border-color: var(--lm-fg-primary); background: var(--lm-bg-brand-subtle); }
.lm-dropzone strong { color: var(--lm-fg-primary); }

/* ---------- LED 화면 미리보기 ---------- */
/* 테마와 무관하게 완전한 검정. 베젤(테두리)·픽셀 격자·안전 영역을 켜고 끌 수 있다 */
.lm-screen {
	--ratio: var(--lm-ratio-16x9); --bezel: 10px;
	position: relative; aspect-ratio: var(--ratio); background: var(--lm-bg-screen); color: var(--lm-color-white);
	border: var(--bezel) solid var(--lm-color-night-800); border-radius: var(--lm-radius-md); overflow: hidden;
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.04) inset;
}
.lm-screen--bare { --bezel: 0px; border-radius: 0; }
.lm-screen__content { position: absolute; inset: 0; display: grid; place-items: center; }
.lm-screen__content img, .lm-screen__content video { width: 100%; height: 100%; object-fit: cover; }
.lm-screen--pixels::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(circle at 50% 50%, transparent 0 55%, rgb(0 0 0 / 0.55) 70%);
	background-size: var(--pitch, 6px) var(--pitch, 6px);
}
.lm-screen--safe::before {
	content: ''; position: absolute; inset: var(--lm-safe-title); z-index: 2; pointer-events: none;
	border: 1px dashed rgb(255 198 110 / 0.7);
}
.lm-screen__label { position: absolute; right: var(--lm-space-3); bottom: var(--lm-space-2); z-index: 3; font: 10px/1 var(--lm-font-mono); letter-spacing: 0.12em; color: rgb(255 255 255 / 0.5); }
.lm-screen__status { position: absolute; left: var(--lm-space-3); top: var(--lm-space-3); z-index: 3; }

/* 캐비닛 격자 — 화면을 캐비닛 단위로 나눠 보여 준다 */
/* --cab-w/--cab-h: 캐비닛 한 장의 가로·세로(mm 또는 비율). 500×1000이면 1/2 */
.lm-cabinets { --cols: 8; --rows: 4; --cab-w: 1; --cab-h: 1; display: grid; width: 100%; height: auto; align-self: start; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: 1px; background: var(--lm-color-night-700); aspect-ratio: calc(var(--cols) * var(--cab-w)) / calc(var(--rows) * var(--cab-h)); border: 1px solid var(--lm-color-night-700); }
.lm-cabinets > i { background: var(--lm-color-night-900); }
.lm-cabinets > i.is-fault { background: var(--lm-color-danger-900); box-shadow: inset 0 0 0 1px var(--lm-color-danger-500); }
.lm-cabinets > i.is-warn { background: var(--lm-color-warning-950); box-shadow: inset 0 0 0 1px var(--lm-color-warning-500); }

@media (prefers-reduced-motion: reduce) {
	.lm-live::before, .lm-skeleton, .lm-progress--indeterminate .lm-progress__bar { animation: none; }
	/* 원형 로딩: 돌지 않고 멈춘 원호가 천천히 밝아졌다 어두워진다(깜빡임 없음) */
	.lm-btn.is-loading::after, .lm-loader::after { animation: lm-spin-breathe 2s ease-in-out infinite; }
	.lm-btn, .lm-switch input::before, .lm-card__media img { transition: none; }
}


/* ---- css/site.css ---- */
/* Lumedian 사이트 — 페이지 배치. 값은 디자인 시스템 토큰(--lm-*)에서 가져온다.
   규칙: 기본 바탕 warm white, 카드 흰색, 모래는 페이지당 1–2띠, 검정은 사례·영상·CTA·바닥글,
   호박색은 1px 선·주 버튼 하나·작은 마름모만(면적 10% 이하). 큰 제목 500, 자간 좁게, 선 1px. */

/* ---------- 기초 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--lm-bg-canvas); color: var(--lm-fg-primary); }
html.menu-open, html.menu-open body { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
[hidden] { display: none !important; }
:where(a, button, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--lm-focus-ring); border-radius: var(--lm-radius-xs); }

.wrap { width: 100%; max-width: calc(var(--lm-size-content-max) + 92px); margin-inline: auto; padding-inline: 46px; }
.skip { position: absolute; left: 16px; top: -100px; z-index: var(--lm-z-toast); padding: 10px 14px; background: var(--lm-color-ink); color: var(--lm-color-cream); text-decoration: none; border-radius: var(--lm-radius-sm); font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- 글자 ---------- */
.eyebrow { font-size: var(--lm-text-overline-size); line-height: var(--lm-text-overline-line-height); letter-spacing: var(--lm-text-overline-tracking); font-weight: var(--lm-text-overline-weight); text-transform: uppercase; color: var(--lm-fg-secondary); }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.eyebrow--amber { color: var(--lm-color-lumen-300); }
.lead { font-size: var(--lm-text-body-lg-size); line-height: var(--lm-text-body-lg-line-height); color: var(--lm-fg-secondary); max-width: 58ch; }
.h-display { margin-top: 14px; font-size: var(--lm-text-display-md-size); line-height: var(--lm-text-display-md-line-height); letter-spacing: var(--lm-text-display-md-tracking); font-weight: 500; text-wrap: balance; }
.h-section { margin-top: 14px; font-size: var(--lm-text-heading-xl-size); line-height: var(--lm-text-heading-xl-line-height); letter-spacing: -0.03em; font-weight: 500; text-wrap: balance; }
.dia { display: inline-block; width: 7px; height: 7px; margin-left: 10px; vertical-align: 0.2em; background: var(--lm-color-lumen-300); box-shadow: 0 0 0 1px var(--lm-color-lumen-700); transform: rotate(45deg); }
.btns { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }

/* ---------- 띠 ---------- */
.band { padding-block: 96px; background: var(--lm-bg-canvas); }
.band--tight { padding-block: 48px 96px; }
.band.band--flush { padding-block: 0; } /* 좁은 화면 .band 여백보다 우선(그림 위아래 검은 띠 방지) */
.band--line { border-top: 1px solid var(--lm-border-default); }
.band--sand { background: var(--lm-color-paper); }
.band--ink { background: var(--lm-color-ink); color: var(--lm-color-cream); }
.band--ink .eyebrow:not(.eyebrow--amber) { color: var(--lm-color-neutral-400); }
.band--ink .lead, .band--ink .band__aside p { color: var(--lm-color-neutral-400); }
.band--ink .lm-btn--underline { color: var(--lm-color-cream); }
.band__head { margin-bottom: 48px; }
.band__head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px 48px; align-items: end; }
.band__aside { display: grid; gap: 16px; justify-items: start; }
.band__aside p { color: var(--lm-fg-secondary); }

/* ---------- 헤더 ---------- */
/* 헤더 축소(사용자 판정 10-21): 스크롤 80px 뒤 데스크톱 72→44, 1024 미만 56→48.
   흐름 속 높이(--hd-h)는 그대로 두고 그려지는 바(::before)와 내용 줄(--bar)만 줄인다 — 줄어도 본문이 튀지 않게.
   남는 아래쪽은 투명·클릭 통과(pointer-events) */
.hd { --hd-h: 72px; --bar: 72px; position: sticky; top: 0; z-index: var(--lm-z-header); height: var(--hd-h); pointer-events: none; }
.hd::before { content: ''; position: absolute; inset: 0 0 auto; height: var(--bar); background: var(--lm-color-white); border-bottom: 1px solid var(--lm-border-subtle); pointer-events: auto;
	transition: height 200ms ease-out, background-color 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out; }
.hd__in { position: relative; display: flex; align-items: center; gap: 32px; height: var(--bar); max-width: calc(var(--lm-size-content-max) + 92px); margin-inline: auto; padding-inline: 46px; pointer-events: auto; transition: height 200ms ease-out, padding 200ms ease-out; }
.hd.is-compact { --bar: 44px; }
.hd.is-compact::before { background: rgb(255 255 255 / .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: transparent; box-shadow: 0 1px 0 rgb(18 16 14 / .04), 0 6px 16px rgb(18 16 14 / .06); }
.hd.is-compact .hd__nav a { padding-block: 4px; font-size: 13px; }
.hd.is-compact .hd__cta { --btn-h: 28px; } /* 글자는 sm 기본 12px 그대로 — 줄어든 바에서 커지지 않게 */
.hd .hd__cta { transition: min-height 200ms ease-out; }
.hd__logo { display: block; flex: none; border-radius: var(--lm-radius-xs); }
.hd__logo img { width: 104px; height: auto; transition: width 200ms ease-out; }
.hd.is-compact .hd__logo img { width: 72px; }
.hd__nav { margin-inline: auto; }
.hd__nav + .hd__end { margin-left: 0; }
.hd__nav ul { display: flex; gap: 4px; }
.hd__nav a { display: block; padding: 8px 14px; border-radius: var(--lm-radius-md); font-size: 14px; font-weight: 600; text-decoration: none; color: var(--lm-fg-primary); }
.hd__nav a:hover { background: var(--lm-action-ghost-bg-hover); }
.hd__nav a[aria-current='page'] { box-shadow: inset 0 -1px 0 var(--lm-color-ink); border-radius: 0; }
.hd__end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hd__menu { display: none; width: 44px; height: 44px; }

.menu { position: fixed; inset: 0; z-index: var(--lm-z-modal); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--lm-color-ink); color: var(--lm-color-cream); }
.menu__top, .menu__body { padding-inline: 32px; }
.menu__top { display: flex; flex: none; align-items: center; justify-content: space-between; height: 57px; border-bottom: 1px solid rgb(242 233 218 / .12); }
.menu__logo { width: 88px; height: auto; }
.menu.is-compact .menu__top { height: 49px; }
.menu.is-compact .menu__logo { width: 72px; }
.menu__close { width: 44px; height: 44px; color: var(--lm-color-cream); background: transparent; }
.menu__close:hover { background: rgb(242 233 218 / .08); }
.menu__body { display: flex; flex: 1; flex-direction: column; gap: 28px; padding-top: 8px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.menu__list { display: grid; }
.menu__list a { display: flex; align-items: center; gap: 12px; min-height: 64px; border-bottom: 1px solid rgb(242 233 218 / .12); font-size: 28px; font-weight: 500; letter-spacing: -0.02em; text-decoration: none; }
/* 지금 페이지: 호박 마름모 하나 */
.menu__list a[aria-current='page']::after { content: ''; width: 7px; height: 7px; background: var(--lm-color-lumen-300); transform: rotate(45deg); }
.menu__sub { display: flex; flex-wrap: wrap; gap: 0 20px; }
.menu__sub a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--lm-color-neutral-400); text-decoration: none; }
.menu__sub a:hover { color: var(--lm-color-cream); }
.menu__cta { margin-top: auto; }

/* ---------- 미디어·자리 표시 ---------- */
.pic, .pic img, .vid, .vid video { width: 100%; height: 100%; }
.pic img, .vid video { object-fit: cover; }
.vid { position: relative; background: var(--lm-color-ink); }
.vid__under { position: absolute; inset: 0; }
.vid video { position: relative; }
.vid__toggle { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgb(242 233 218 / .3); border-radius: 50%; background: rgb(18 16 14 / .45); color: var(--lm-color-cream); cursor: pointer; backdrop-filter: blur(4px); }
.vid__toggle:hover { background: rgb(18 16 14 / .7); }
.vid__toggle:focus-visible { border-radius: 50%; }
.vid__play { display: none; }
.vid.is-paused .vid__play { display: block; }
.vid.is-paused .vid__pause { display: none; }
.ph { position: relative; display: grid; place-content: center; justify-items: center; gap: 8px; width: 100%; height: 100%; min-height: 120px; overflow: hidden; color: var(--lm-color-neutral-400); text-align: center;
	background-color: var(--lm-color-night-850, #161310);
	background-image: radial-gradient(circle, rgb(242 233 218 / .09) 1px, transparent 1.4px), linear-gradient(180deg, var(--lm-color-night-800) 0%, var(--lm-color-ink) 100%);
	background-size: 8px 8px, 100% 100%; }
.ph__id { font: 500 13px/1 var(--lm-font-mono); letter-spacing: .12em; color: var(--lm-color-lumen-300); }
.ph__name { font-size: 13px; letter-spacing: .02em; color: var(--lm-color-neutral-400); }
/* 전면형 히어로의 자리 표시 라벨은 오른쪽 위 — 제목과 겹치지 않게 */
.hero-b .ph, .dhero .ph { place-content: start end; justify-items: end; padding: 32px 46px; }

/* ---------- 홈 히어로 B: 영상 전면 + 아래 그라데이션 ---------- */
.hero-b { position: relative; display: grid; align-items: end; min-height: clamp(560px, calc(100svh - 72px), 900px); overflow: hidden; background: var(--lm-color-ink); color: var(--lm-color-cream); }
.hero-b__media { position: absolute; inset: 0; }
.hero-b__media .ph { min-height: 100%; }
/* 실사 위 글자 대비: 아래 + 왼쪽 두 겹 (밝은 거리·차 불빛 위에서도 4.5:1) */
.hero-b__shade { position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgb(18 16 14 / .6) 0%, rgb(18 16 14 / .3) 38%, rgb(18 16 14 / 0) 62%),
		linear-gradient(180deg, rgb(18 16 14 / .25) 0%, rgb(18 16 14 / 0) 20%, rgb(18 16 14 / 0) 38%, rgb(18 16 14 / .62) 60%, rgb(18 16 14 / .92) 100%); }
.hero-b__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; padding-block: 64px 56px; pointer-events: none; }
.hero-b__in a, .hero-b__in button { pointer-events: auto; }
.hero-b__text { display: grid; gap: 20px; max-width: 760px; }
.hero-b__title { font-size: clamp(44px, 5.6vw, 80px); line-height: 1; letter-spacing: -0.04em; font-weight: 500; color: var(--lm-color-cream); text-wrap: balance; }
.hero-b__body { max-width: 52ch; font-size: var(--lm-text-body-lg-size); line-height: var(--lm-text-body-lg-line-height); color: var(--lm-color-neutral-300); }
.hero-b .btns { margin-top: 12px; }
.hero-b__cap { max-width: 30ch; font-size: 12px; line-height: 1.5; color: var(--lm-color-neutral-400); text-align: right; padding-bottom: 44px; }
.btn-inv { background: transparent; color: var(--lm-color-cream); border-color: rgb(242 233 218 / .45); }
.btn-inv:hover { background: rgb(242 233 218 / .08); border-color: var(--lm-color-cream); }
.hero-b .vid__toggle { bottom: 24px; right: 46px; }

/* ---------- 홈 띠 ---------- */
.statement__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 72px; align-items: end; }

.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cat__link { display: grid; gap: 0; height: 100%; padding-bottom: 24px; background: var(--lm-bg-surface); border: 1px solid var(--lm-border-subtle); border-radius: var(--lm-radius-lg); overflow: hidden; text-decoration: none; transition: border-color var(--lm-duration-fast) var(--lm-ease-standard); }
.cat__link:hover { border-color: var(--lm-border-strong); }
.cat__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--lm-color-ink); }
.cat__media .pic img { transition: transform var(--lm-duration-slower) var(--lm-ease-standard); }
.cat__link:hover .pic img, .wcard__link:hover .pic img, .feat__item:hover .pic img { transform: scale(1.03); }
.cat__title { margin: 24px 24px 0; font-size: var(--lm-text-heading-md-size); line-height: var(--lm-text-heading-md-line-height); letter-spacing: -0.02em; font-weight: 500; }
.cat__body { margin: 8px 24px 0; font-size: 16px; line-height: 1.55; color: var(--lm-fg-secondary); }
.cat__more { display: inline-flex; align-items: center; gap: 6px; margin: 20px 24px 0; font-size: 14px; font-weight: 600; }

.feat__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 32px 16px; }
.feat__item--lead { grid-row: span 2; }
/* 5개: 큰 카드 하나(2×2) + 작은 카드 넷 */
.feat__grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feat__grid--5 .feat__item--lead { grid-column: span 2; }
.feat__item { position: relative; display: grid; gap: 16px; }
.feat__link { text-decoration: none; color: inherit; }
.feat__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.feat__link:focus-visible { box-shadow: none; }
.feat__link:focus-visible::after { box-shadow: var(--lm-focus-ring); border-radius: var(--lm-radius-xs); }
.feat .vid__toggle { z-index: 2; }
.feat__item:not(.feat__item--lead) .vid__toggle { top: 8px; right: 8px; bottom: auto; width: 28px; height: 28px; background: rgb(18 16 14 / .35); border-color: rgb(242 233 218 / .25); }
.feat__item:not(.feat__item--lead) .vid__toggle .lm-icon { width: 14px; height: 14px; }
.feat__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--lm-color-night-800); }
.feat__item--lead .feat__media { aspect-ratio: auto; height: 100%; min-height: 420px; }
.feat__item--lead { grid-template-rows: 1fr auto; }
.feat__title { font-size: var(--lm-text-heading-sm-size); line-height: var(--lm-text-heading-sm-line-height); font-weight: 500; letter-spacing: -0.01em; }
.feat__item--lead .feat__title { font-size: var(--lm-text-heading-md-size); line-height: var(--lm-text-heading-md-line-height); }
.feat__cap { margin-top: 4px; font-size: 15px; color: var(--lm-color-neutral-400); }

.steps5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--lm-color-ink); }
.steps5__item { display: grid; align-content: start; gap: 10px; padding: 20px 24px 0 0; }
.steps5__item + .steps5__item { padding-left: 24px; border-left: 1px solid var(--lm-border-default); }
.steps5__n { font: 500 12px/1 var(--lm-font-mono); color: var(--lm-fg-tertiary); }
.steps5__title { margin-top: 18px; font-size: var(--lm-text-heading-sm-size); line-height: var(--lm-text-heading-sm-line-height); font-weight: 500; letter-spacing: -0.01em; }
.steps5__item p { font-size: 16px; line-height: 1.55; color: var(--lm-fg-secondary); }

.eng__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 72px; align-items: center; }
.eng__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--lm-color-ink); }
.eng__text .lead { margin-top: 20px; color: var(--lm-color-neutral-700); }
.eng__list { margin-top: 32px; border-top: 1px solid var(--lm-color-ink); }
.eng__list li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid rgb(18 16 14 / .18); }
.eng__list h3 { font-size: 16px; font-weight: 600; }
.eng__list p { font-size: 16px; color: var(--lm-color-neutral-700); }

/* ---------- CTA·바닥글 ---------- */
.cta { padding-block: 80px; box-shadow: inset 0 1px 0 var(--lm-color-lumen-300); }
.cta__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.cta__title { margin-top: 14px; max-width: 18ch; font-size: clamp(32px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 500; color: var(--lm-color-cream); }
.cta__body { margin-top: 16px; color: var(--lm-color-neutral-400); }

.ft { padding-block: 56px 32px; background: var(--lm-color-ink); color: var(--lm-color-neutral-400); font-size: 14px; border-top: 1px solid rgb(242 233 218 / .12); }
.ft__top { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.ft__brand { display: grid; gap: 16px; align-content: start; max-width: 34ch; }
.ft__brand img { width: 120px; height: auto; }
.ft__h { margin-bottom: 14px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--lm-color-neutral-500); }
.ft ul { display: grid; gap: 10px; }
.ft a { color: var(--lm-color-neutral-300); text-decoration: none; }
.ft a:hover { color: var(--lm-color-lumen-300); }
.ft__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgb(242 233 218 / .12); font-size: 12px; }

/* ---------- 페이지 머리 (C형: 크림 큰 글자 / 기본 warm white) ---------- */
.phead { padding-block: 88px 64px; background: var(--lm-bg-canvas); }
.phead--cream { background: var(--lm-color-cream); border-bottom: 1px solid var(--lm-color-ink); }
.phead__title { margin-top: 18px; max-width: 14ch; font-size: clamp(48px, 7vw, 104px); line-height: .96; letter-spacing: -0.045em; font-weight: 500; text-wrap: balance; }
.phead__body { margin-top: 28px; }
.phead--cream .lead { color: var(--lm-color-neutral-700); }

/* ---------- 작업 격자·카드 ---------- */
.filters ul { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--lm-border-default); border-radius: var(--lm-radius-full); background: var(--lm-bg-surface); font-size: 14px; font-weight: 600; text-decoration: none; }
.chip:hover { border-color: var(--lm-border-strong); }
.chip[aria-current='true'] { background: var(--lm-color-ink); border-color: var(--lm-color-ink); color: var(--lm-color-cream); }
.chip:focus-visible { border-radius: var(--lm-radius-full); }
.chip__n { font: 500 11px/1 var(--lm-font-mono); opacity: .7; }

.wgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 16px; }
.wcard__link { display: grid; gap: 0; text-decoration: none; color: inherit; border-radius: var(--lm-radius-sm); }
.wcard__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--lm-radius-sm); background: var(--lm-color-ink); }
.wcard__media .pic img { transition: transform var(--lm-duration-slower) var(--lm-ease-standard); }
.wcard__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--lm-border-default); }
.wcard__id { font: 500 11px/1 var(--lm-font-mono); color: var(--lm-fg-tertiary); }
.wcard__title { margin-top: 10px; font-size: var(--lm-text-heading-sm-size); line-height: var(--lm-text-heading-sm-line-height); font-weight: 500; letter-spacing: -0.01em; }
.wcard__cap { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--lm-fg-secondary); }
.wgrid--sm { gap: 32px 16px; }

/* ---------- 상세 ---------- */
.dhero { position: relative; display: grid; align-items: end; min-height: clamp(480px, 78svh, 860px); overflow: hidden; background: var(--lm-color-ink); color: var(--lm-color-cream); }
.dhero__media { position: absolute; inset: 0; }
/* 글자 대비 4.5:1(머리말 포함) — 컨셉 13장 실측으로 맞춘 값(10-21) */
.dhero__shade { position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgb(18 16 14 / .55) 0%, rgb(18 16 14 / .25) 40%, rgb(18 16 14 / 0) 65%),
		linear-gradient(180deg, rgb(18 16 14 / .2) 0%, rgb(18 16 14 / 0) 15%, rgb(18 16 14 / 0) 40%, rgb(18 16 14 / .62) 62%, rgb(18 16 14 / .92) 100%); }
.dhero__in { position: relative; z-index: 2; display: grid; gap: 12px; padding-block: 64px 48px; pointer-events: none; }
.dhero__in a { pointer-events: auto; }
.dhero__title { font-size: clamp(44px, 6vw, 88px); line-height: 1; letter-spacing: -0.04em; font-weight: 500; }
.dhero__cap { font-size: var(--lm-text-body-lg-size); color: var(--lm-color-neutral-300); }
.dhero .vid__toggle { right: 46px; bottom: 24px; }
.figs-band { padding-block: 48px; }
.figs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--lm-color-ink); }
.figs__item { display: grid; align-content: start; gap: 10px; padding: 18px 20px 0 0; }
.figs__item + .figs__item { padding-left: 20px; border-left: 1px solid var(--lm-border-default); }
.figs dt { font-size: var(--lm-text-overline-size); letter-spacing: var(--lm-text-overline-tracking); font-weight: 600; text-transform: uppercase; color: var(--lm-fg-secondary); }
.figs dd { font-size: 18px; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; }
.nw { white-space: nowrap; }
.figs__note { margin-top: 24px; font-size: 13px; color: var(--lm-fg-tertiary); }
.overview { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 72px; }
.overview__sum { margin-top: 14px; font-size: var(--lm-text-heading-lg-size); line-height: 1.25; letter-spacing: -0.025em; font-weight: 500; text-wrap: pretty; }
.overview__side .lead { color: var(--lm-fg-secondary); }
.overview__h { margin-top: 40px; font-size: 14px; font-weight: 600; }
.ideas { margin-top: 12px; border-top: 1px solid var(--lm-border-default); }
.ideas li { padding: 12px 0; border-bottom: 1px solid var(--lm-border-default); font-size: 16px; }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 72px; border-top: 1px solid var(--lm-color-ink); }
.pn__link { display: grid; gap: 6px; padding: 20px 0; text-decoration: none; }
.pn__link--next { text-align: right; justify-items: end; }
.pn__name { font-size: var(--lm-text-heading-sm-size); font-weight: 500; letter-spacing: -0.01em; }
.pn__link:hover .pn__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- Capabilities·Process·Studio·Contact ---------- */
.toc { position: sticky; top: 44px; z-index: var(--lm-z-sticky); background: rgb(252 249 244 / .94); border-bottom: 1px solid var(--lm-border-default); backdrop-filter: blur(6px); }
.toc ul { display: flex; gap: 4px 28px; overflow-x: auto; scrollbar-width: none; }
/* 좁은 화면: 오른쪽을 흐리게 해 가로로 더 있다는 신호(E QA v1-4) */
@media (max-width: 1023px) { .toc ul { margin-inline: -32px; padding-inline: 32px 48px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); } }
@media (max-width: 767px) { .toc ul { margin-inline: -16px; padding-inline: 16px 32px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); } } /* 필터 칩처럼 화면 끝까지 밀고 오른쪽 페이드 */
.toc a { display: block; padding: 14px 0; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--lm-fg-secondary); }
.toc a:hover { color: var(--lm-fg-primary); }
.cap__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px 72px; }
.cap__n { font: 500 13px/1 var(--lm-font-mono); color: var(--lm-fg-tertiary); }
.cap__body .lead { color: var(--lm-fg-secondary); }
.cap__work { grid-column: 1 / -1; margin-top: 40px; }
.taglist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.taglist li { padding: 7px 12px; border: 1px solid var(--lm-border-default); border-radius: var(--lm-radius-sm); background: var(--lm-bg-surface); font-size: 13px; font-weight: 500; }

.psteps { border-top: 1px solid var(--lm-color-ink); }
.pstep { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px 48px; padding: 40px 0; border-bottom: 1px solid var(--lm-border-default); }
.pstep__n { padding-top: 10px; font: 500 13px/1 var(--lm-font-mono); color: var(--lm-fg-tertiary); }
.pstep__title { font-size: var(--lm-text-heading-xl-size); line-height: 1.1; letter-spacing: -0.03em; font-weight: 500; }
.pstep__body { font-size: var(--lm-text-body-lg-size); line-height: var(--lm-text-body-lg-line-height); color: var(--lm-fg-secondary); }
.pstep__items { grid-column: 3; margin-top: 0; }

.studio-img { aspect-ratio: 21 / 9; max-height: 720px; width: 100%; overflow: hidden; }
.principles { display: grid; gap: 0; margin-top: 8px; border-top: 1px solid var(--lm-color-ink); }
.principles li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid var(--lm-border-default); }
.principles h3 { font-size: 16px; font-weight: 600; }
.principles p { color: var(--lm-fg-secondary); }
.principles--2 li { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); }
.principles--plain li { grid-template-columns: minmax(0, 1fr); }
.principles--plain p { color: var(--lm-fg-primary); }
.cap__body .principles, .statement__in .principles { margin-top: 32px; }
.cap__cta, .eng__cta { margin-top: 28px; }
.cap__head .eyebrow { display: flex; gap: 12px; align-items: baseline; }
.cap__head .cap__n { font-size: 12px; letter-spacing: 0; }
.statement__in--top { align-items: start; }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 72px; }
.contact > div > .eyebrow { margin-bottom: 20px; }
.contact__mail { display: inline-flex; align-items: center; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--lm-color-ink); font-size: clamp(24px, 3vw, 40px); font-weight: 500; letter-spacing: -0.03em; text-decoration: none; }
.contact__mail:hover { border-bottom-width: 2px; }
.contact--single { grid-template-columns: minmax(0, 760px); }
.contact__loc { margin-top: 20px; color: var(--lm-fg-secondary); }

/* ---------- 반응형 ---------- */
@media (max-width: 1279px) {
	.figs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
	.figs__item:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 1023px) {
	.wrap, .hd__in { padding-inline: 32px; }
	.band { padding-block: 72px; }
	.band--tight { padding-block: 40px 72px; }
	.band__head { margin-bottom: 40px; }
	.band__head--split { grid-template-columns: minmax(0, 1fr); }
	.hd { --hd-h: 56px; --bar: 56px; }
	.hd.is-compact { --bar: 48px; }
	.studio-img { aspect-ratio: 16 / 9; } /* 모바일·태블릿은 그림 비율 그대로 — 크레인·매달린 모듈·작업자 안 잘림 */
	.hd__logo { display: flex; align-items: center; min-height: 44px; } /* 누를 곳 44px, 보이는 로고는 그대로 */
	.hd__logo img { width: 88px; }
	.hd.is-compact .hd__logo img { width: 72px; }
	.hd.is-compact .hd__menu .lm-icon { width: 20px; height: 20px; }
	.hd__nav { display: none; }
	.hd__menu { display: inline-flex; }
	.h-display { font-size: var(--lm-text-heading-xl-size); line-height: var(--lm-text-heading-xl-line-height); }
	.h-section { font-size: 32px; line-height: 40px; }
	.hero-b { min-height: clamp(520px, calc(100svh - 56px), 820px); }
	.hero-b__in { grid-template-columns: minmax(0, 1fr); }
	.hero-b__cap { text-align: left; padding-bottom: 0; }
	.hero-b .vid__toggle, .dhero .vid__toggle { right: 32px; }
	.statement__in, .eng__in, .overview, .cap__in, .contact { grid-template-columns: minmax(0, 1fr); }
	.cats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.cats .cat:last-child { grid-column: 1 / -1; }
	.cats .cat:last-child .cat__media { aspect-ratio: 16 / 7; }
	.feat__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.feat__item--lead, .feat__grid--5 .feat__item--lead { grid-column: 1 / -1; grid-row: auto; }
	.feat__grid--5 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.feat__item--lead .feat__media { aspect-ratio: 16 / 9; min-height: 0; height: auto; }
	.steps5 { grid-template-columns: minmax(0, 1fr); }
	.steps5__item, .steps5__item + .steps5__item { grid-template-columns: 48px minmax(0, 200px) minmax(0, 1fr); align-items: baseline; gap: 8px 24px; padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--lm-border-default); }
	.steps5__title { margin-top: 0; }
	.wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pstep { grid-template-columns: 56px minmax(0, 1fr); }
	.pstep__body, .pstep__items { grid-column: 2; }
	.ft__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ft__brand { grid-column: 1 / -1; }
	.cta__in { grid-template-columns: minmax(0, 1fr); justify-items: start; }
	.toc { top: 48px; }
}
@media (max-width: 767px) {
	.wrap, .hd__in { padding-inline: 16px; }
	.band { padding-block: 56px; }
	.band--tight { padding-block: 32px 56px; }
	.band__head { margin-bottom: 32px; }
	.lead { font-size: 16px; line-height: 1.6; }
	.h-display { font-size: 32px; line-height: 40px; }
	.h-section { font-size: 28px; line-height: 34px; }
	.hero-b__in { padding-block: 48px 72px; }
	.hero-b__title { font-size: clamp(40px, 11vw, 56px); }
	.hero-b .btns .lm-btn { flex: 1 1 auto; }
	.hero-b .vid__toggle, .dhero .vid__toggle { right: 16px; bottom: 16px; }
	.hero-b .ph, .dhero .ph { padding: 20px 16px; }
	.hero-b__shade, .dhero__shade { background: linear-gradient(180deg, rgb(18 16 14 / .2) 0%, rgb(18 16 14 / 0) 15%, rgb(18 16 14 / .6) 34%, rgb(18 16 14 / .88) 52%, rgb(18 16 14 / .94) 100%); }
	.cats, .wgrid { grid-template-columns: minmax(0, 1fr); }
	.feat__grid, .feat__grid--5 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 12px; }
	.feat__title { font-size: 15px; line-height: 1.35; }
	.feat__item:not(.feat__item--lead) .feat__cap { display: none; }
	.cats .cat:last-child .cat__media { aspect-ratio: 4 / 3; }
	.wgrid { gap: 40px; }
	.steps5__item, .steps5__item + .steps5__item { grid-template-columns: 36px minmax(0, 1fr); }
	.steps5__item p { grid-column: 2; }
	.eng__list li, .principles li, .principles--2 li { grid-template-columns: minmax(0, 1fr); }
	.phead { padding-block: 56px 40px; }
	.phead__title { font-size: clamp(44px, 12vw, 56px); }
	.dhero { min-height: 70svh; }
	.dhero__in { padding-block: 48px 64px; }
	.dhero__title { font-size: clamp(40px, 11vw, 56px); }
	.figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.figs__item, .figs__item + .figs__item, .figs__item:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
	.figs__item:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--lm-border-default); }
	.pstep { grid-template-columns: minmax(0, 1fr); padding: 32px 0; }
	.pstep__body, .pstep__items { grid-column: 1; }
	.pstep__n { padding-top: 0; }
	.pstep__title { font-size: 32px; }
	.pn__name { font-size: 16px; }
	.ft__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.cta { padding-block: 56px; }
	.cta .lm-btn { width: 100%; }
}

/* ---------- 반응형 점검(리더 10-21: 320·375·414·768·1024·1280·1440) ---------- */
@media (max-width: 1023px) {
	/* 1) 데스크톱 메뉴가 숨으면 오른쪽 묶음은 오른쪽 여백선에 */
	.hd__nav + .hd__end, .hd__end { margin-left: auto; }
	/* 12) 태블릿: 세 갈래 카드는 1열 가로형(왼쪽 그림·오른쪽 글) */
	.cats { grid-template-columns: minmax(0, 1fr); }
	.cats .cat:last-child { grid-column: auto; }
	.cat__link { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto 1fr; padding-bottom: 0; }
	.cat__media, .cats .cat:last-child .cat__media { grid-row: 1 / 4; aspect-ratio: 4 / 3; height: 100%; }
	.cat__title { margin-top: 24px; }
	.cat__more { align-self: end; margin-bottom: 24px; }
	/* 7) 엔지니어링: 제목 → 사진 → 목록 */
	.eng__text { display: contents; }
	.eng__head { order: 1; }
	.eng__media { order: 2; }
	.eng__list { order: 3; margin-top: 0; }
	.eng__cta { order: 4; margin-top: 0; }
	/* 13) 바닥글 링크 터치 영역 44px */
	.ft ul { gap: 0; }
	.ft a { display: inline-flex; align-items: center; min-height: 44px; }
	/* 4) 히어로 캡션과 정지 버튼을 같은 줄(가운데 기준선)에 좌우로 */
	.hero-b__in { padding-bottom: 24px; }
	.hero-b__cap { display: flex; align-items: center; min-height: 36px; padding-right: 64px; }
	.hero-b .vid__toggle { bottom: 24px; }
}
@media (max-width: 767px) {
	.menu__top, .menu__body { padding-inline: 16px; }
	.hero-b__in { padding-bottom: 16px; }
	.hero-b .vid__toggle { bottom: 16px; }
	/* 5) 세 갈래 카드: 모바일은 그림 위 16:9 */
	.cat__link { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-bottom: 24px; }
	.cat__media, .cats .cat:last-child .cat__media { grid-row: auto; aspect-ratio: 16 / 9; height: auto; }
	.cat__more { margin-bottom: 0; }
	/* 8) 필터 칩 한 줄(좁으면 가로로 밀리고 오른쪽 페이드) */
	.filters ul { flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px 32px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
	.filters ul::-webkit-scrollbar { display: none; }
	.chip { flex: none; padding: 0 12px; gap: 6px; font-size: 14px; }
	/* 11) Overview 큰 문장 */
	.overview__sum { font-size: 26px; line-height: 1.3; }
}
@media (max-width: 599px) {
	/* 2) 헤더는 로고 + 햄버거만(Start a project는 메뉴 아래·히어로에) */
	.hd__cta { display: none; }
	/* 4) 히어로 두 버튼: 같은 폭, 세로로(주 버튼 위) */
	.hero-b .btns { flex-direction: column; align-items: stretch; gap: 12px; }
	.hero-b .btns .lm-btn { flex: none; width: 100%; }
	/* 10) 사양: 1열 목록 — 라벨 위·값 아래·1px 가로선 */
	.figs { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
	.figs__item, .figs__item + .figs__item, .figs__item:nth-child(even), .figs__item:nth-child(3n + 1) { gap: 6px; padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--lm-border-default); }
}

/* ---------- 움직임 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
	.cat__link:hover .pic img, .wcard__link:hover .pic img, .feat__item:hover .pic img { transform: none; }
}