/* 자동 생성 — shared/tokens/build-tokens.mjs (원천: shared/tokens/tokens.json). 직접 고치지 마세요. */
:root {
  --gray-0: #ffffff;
  --gray-25: #fafbfc;
  --gray-50: #f4f5f8;
  --gray-100: #eceef2;
  --gray-200: #dde0e7;
  --gray-300: #c4c9d3;
  --gray-400: #7d8597;
  --gray-500: #6c7486;
  --gray-600: #566072;
  --gray-700: #434b5a;
  --gray-800: #2e3440;
  --gray-900: #1d222b;
  --gray-950: #13161c;
  --indigo-50: #eef0fd;
  --indigo-100: #dfe3fb;
  --indigo-200: #c0c9f6;
  --indigo-300: #9aa8ef;
  --indigo-400: #7488e6;
  --indigo-500: #5268dc;
  --indigo-600: #3d50c8;
  --indigo-700: #3241a6;
  --indigo-800: #29368a;
  --indigo-900: #212b6b;
  --green-50: #ebf6ee;
  --green-100: #d4ecdb;
  --green-200: #a9d8b6;
  --green-400: #5fbf7c;
  --green-600: #1f7a3a;
  --green-700: #17632e;
  --green-900: #123d21;
  --amber-50: #fff6df;
  --amber-100: #ffe9b0;
  --amber-200: #f2cf7c;
  --amber-400: #e6a823;
  --amber-600: #8a5a00;
  --amber-700: #6e4700;
  --amber-900: #3a2a08;
  --red-50: #fdeded;
  --red-100: #f9d3d3;
  --red-200: #f0aeae;
  --red-400: #f07f7f;
  --red-600: #c42b2b;
  --red-700: #a32222;
  --red-900: #3f1a1c;
  --cyan-50: #e6f4fa;
  --cyan-100: #c8e8f5;
  --cyan-200: #94cfe6;
  --cyan-400: #58b6dc;
  --cyan-600: #0b6a8e;
  --cyan-700: #085673;
  --cyan-900: #0e2c38;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-0: 0; --radius-1: 4px; --radius-2: 4px; --radius-3: 8px; --radius-4: 12px; --radius-full: 9999px;
  --font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-md: 0.875rem; --font-size-lg: 1rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem;
  --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700;
  --line-body: 1.5; --line-heading: 1.25;
  --border-1: 1px; --border-2: 2px;
  --control-h-sm: 32px; --control-h-md: 36px; --control-h-lg: 48px; --control-h-scan: 56px;
  --row-h-compact: 32px; --row-h-comfortable: 40px;
  --header-h: 56px; --sidebar-w: 248px; --sidebar-w-collapsed: 64px; --panel-w: 440px; --panel-w-wide: 720px;
  --motion-duration-fast: 120ms;
  --motion-duration-normal: 200ms;
  --motion-duration-slow: 280ms;
  --motion-duration-exit: 160ms;
  --motion-ease-enter: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}
:root, :root[data-theme="light"] {
  color-scheme: light;
  --color-bg: var(--gray-50);
  --color-surface: var(--gray-0);
  --color-surface-2: var(--gray-25);
  --color-surface-3: var(--gray-100);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-400);
  --color-text: var(--gray-900);
  --color-text-2: var(--gray-700);
  --color-text-3: var(--gray-600);
  --color-text-inverse: var(--gray-0);
  --color-primary: var(--indigo-600);
  --color-primary-hover: var(--indigo-700);
  --color-primary-pressed: var(--indigo-800);
  --color-primary-subtle: var(--indigo-50);
  --color-on-primary: var(--gray-0);
  --color-link: var(--indigo-700);
  --color-focus: var(--indigo-600);
  --color-selected-bg: var(--indigo-50);
  --color-exception-bg: var(--red-50);
  --color-danger: var(--red-600);
  --color-danger-hover: var(--red-700);
  --color-scrim: rgba(19, 22, 28, 0.45);
  --st-success-fg: var(--green-700);
  --st-success-bg: var(--green-50);
  --st-success-bd: var(--green-200);
  --st-warning-fg: var(--amber-700);
  --st-warning-bg: var(--amber-50);
  --st-warning-bd: var(--amber-200);
  --st-danger-fg: var(--red-700);
  --st-danger-bg: var(--red-50);
  --st-danger-bd: var(--red-200);
  --st-info-fg: var(--cyan-700);
  --st-info-bg: var(--cyan-50);
  --st-info-bd: var(--cyan-200);
  --st-neutral-fg: var(--gray-700);
  --st-neutral-bg: var(--gray-100);
  --st-neutral-bd: var(--gray-200);
  --shadow-1: 0 1px 2px rgba(19, 22, 28, 0.06);
  --shadow-2: 0 4px 12px rgba(19, 22, 28, 0.10);
  --shadow-3: 0 16px 40px rgba(19, 22, 28, 0.20);
  --chart-1: #2a78d6;
  --chart-2: #eb6834;
  --chart-3: #1baf7a;
  --chart-4: #eda100;
  --chart-5: #e87ba4;
  --chart-6: #008300;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="wireframe"]) {
    color-scheme: dark;
    --color-bg: #111419;
    --color-surface: #191d24;
    --color-surface-2: #1f242c;
    --color-surface-3: #29303a;
    --color-border: #333a46;
    --color-border-strong: #6b7486;
    --color-text: #eef0f4;
    --color-text-2: #c7ccd5;
    --color-text-3: #a6adba;
    --color-text-inverse: #13161c;
    --color-primary: var(--indigo-400);
    --color-primary-hover: var(--indigo-300);
    --color-primary-pressed: var(--indigo-200);
    --color-primary-subtle: #232a4a;
    --color-on-primary: #0c1029;
    --color-link: var(--indigo-300);
    --color-focus: var(--indigo-300);
    --color-selected-bg: #232a4a;
    --color-exception-bg: #2c1a1d;
    --color-danger: var(--red-400);
    --color-danger-hover: var(--red-200);
    --color-scrim: rgba(0, 0, 0, 0.6);
    --st-success-fg: var(--green-400);
    --st-success-bg: #15291c;
    --st-success-bd: #2d5a3b;
    --st-warning-fg: var(--amber-400);
    --st-warning-bg: #2e230c;
    --st-warning-bd: #6b5216;
    --st-danger-fg: var(--red-400);
    --st-danger-bg: #341a1d;
    --st-danger-bd: #73363b;
    --st-info-fg: var(--cyan-400);
    --st-info-bg: #10262f;
    --st-info-bd: #245a6c;
    --st-neutral-fg: #c7ccd5;
    --st-neutral-bg: #262c36;
    --st-neutral-bd: #3a414e;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.6);
    --chart-1: #3987e5;
    --chart-2: #d95926;
    --chart-3: #199e70;
    --chart-4: #c98500;
    --chart-5: #d55181;
    --chart-6: #008300;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #111419;
  --color-surface: #191d24;
  --color-surface-2: #1f242c;
  --color-surface-3: #29303a;
  --color-border: #333a46;
  --color-border-strong: #6b7486;
  --color-text: #eef0f4;
  --color-text-2: #c7ccd5;
  --color-text-3: #a6adba;
  --color-text-inverse: #13161c;
  --color-primary: var(--indigo-400);
  --color-primary-hover: var(--indigo-300);
  --color-primary-pressed: var(--indigo-200);
  --color-primary-subtle: #232a4a;
  --color-on-primary: #0c1029;
  --color-link: var(--indigo-300);
  --color-focus: var(--indigo-300);
  --color-selected-bg: #232a4a;
  --color-exception-bg: #2c1a1d;
  --color-danger: var(--red-400);
  --color-danger-hover: var(--red-200);
  --color-scrim: rgba(0, 0, 0, 0.6);
  --st-success-fg: var(--green-400);
  --st-success-bg: #15291c;
  --st-success-bd: #2d5a3b;
  --st-warning-fg: var(--amber-400);
  --st-warning-bg: #2e230c;
  --st-warning-bd: #6b5216;
  --st-danger-fg: var(--red-400);
  --st-danger-bg: #341a1d;
  --st-danger-bd: #73363b;
  --st-info-fg: var(--cyan-400);
  --st-info-bg: #10262f;
  --st-info-bd: #245a6c;
  --st-neutral-fg: #c7ccd5;
  --st-neutral-bg: #262c36;
  --st-neutral-bd: #3a414e;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.6);
  --chart-1: #3987e5;
  --chart-2: #d95926;
  --chart-3: #199e70;
  --chart-4: #c98500;
  --chart-5: #d55181;
  --chart-6: #008300;
}
:root {
  --button-radius: var(--radius-2);
  --button-height-sm: var(--control-h-sm);
  --button-height-md: var(--control-h-md);
  --button-height-lg: var(--control-h-lg);
  --button-height-scan: var(--control-h-scan);
  --button-primary-bg: var(--color-primary);
  --button-primary-bg-hover: var(--color-primary-hover);
  --button-primary-bg-pressed: var(--color-primary-pressed);
  --button-primary-fg: var(--color-on-primary);
  --button-secondary-bg: var(--color-surface);
  --button-secondary-bg-hover: var(--color-surface-3);
  --button-secondary-border: var(--color-border-strong);
  --button-secondary-fg: var(--color-text);
  --button-danger-bg: var(--color-danger);
  --button-danger-bg-hover: var(--color-danger-hover);
  --button-danger-fg: var(--color-text-inverse);
  --button-disabled-bg: var(--color-surface-3);
  --button-disabled-fg: var(--color-text-3);
  --input-height: var(--control-h-md);
  --input-radius: var(--radius-2);
  --input-bg: var(--color-surface);
  --input-border: var(--color-border-strong);
  --input-border-invalid: var(--st-danger-fg);
  --input-readonly-bg: var(--color-surface-2);
  --badge-height: 24px;
  --badge-height-sm: 20px;
  --badge-radius: var(--radius-full);
  --table-header-bg: var(--color-surface-2);
  --table-row-hover-bg: var(--color-surface-2);
  --table-row-selected-bg: var(--color-selected-bg);
  --table-row-open-bg: var(--color-primary-subtle);
  --table-row-open-marker: var(--color-primary);
  --table-exception-marker: var(--st-danger-fg);
  --table-row-height-compact: var(--row-h-compact);
  --table-row-height-comfortable: var(--row-h-comfortable);
  --panel-width: var(--panel-w);
  --panel-width-wide: var(--panel-w-wide);
  --panel-radius: var(--radius-3);
  --panel-shadow: var(--shadow-2);
  --dialog-radius: var(--radius-4);
  --dialog-shadow: var(--shadow-3);
  --toast-bg: var(--color-text);
  --toast-fg: var(--color-text-inverse);
  --focus-ring-width: 2px;
  --focus-ring-color: var(--color-focus);
  --focus-ring-offset: 2px;
  --nav-item-current-bg: var(--color-primary-subtle);
  --nav-item-current-marker: var(--color-primary);
  --card-radius: var(--radius-3);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
}
:root[data-theme="wireframe"] {
  /* 09단계 와이어프레임(회색조) — 위계를 명도 차이만으로 확인하기 위한 비교용 테마 */
  color-scheme: light;
  /* 의미 토큰 — 와이어프레임: 위계는 명도 차이만으로 */
  --color-bg: #f2f2f2;
  --color-surface: #ffffff;
  --color-surface-2: #f7f7f7;
  --color-surface-3: #ececec;
  --color-border: #d4d4d4;
  --color-border-strong: #9e9e9e;
  --color-text: #1a1a1a;
  --color-text-2: #474747;
  --color-text-3: #5e5e5e;
  --color-text-inverse: #ffffff;
  --color-primary: #333333;
  --color-primary-hover: #1f1f1f;
  --color-primary-pressed: #000000;
  --color-primary-subtle: #e8e8e8;
  --color-on-primary: #ffffff;
  --color-link: #1a1a1a;
  --color-focus: #000000;
  --color-selected-bg: #e6e6e6;
  --color-exception-bg: #f4f4f4;
  --color-danger: #3d3d3d;
  --color-danger-hover: #1f1f1f;
  --color-scrim: rgba(0, 0, 0, 0.4);

  --st-success-fg: #2e2e2e; --st-success-bg: #ededed; --st-success-bd: #bdbdbd;
  --st-warning-fg: #2e2e2e; --st-warning-bg: #ededed; --st-warning-bd: #bdbdbd;
  --st-danger-fg: #1a1a1a;  --st-danger-bg: #e0e0e0;  --st-danger-bd: #8a8a8a;
  --st-info-fg: #2e2e2e;    --st-info-bg: #ededed;    --st-info-bd: #bdbdbd;
  --st-neutral-fg: #474747; --st-neutral-bg: #f5f5f5; --st-neutral-bd: #d4d4d4;

  --chart-1: #4d4d4d; --chart-2: #7a7a7a; --chart-3: #a3a3a3; --chart-4: #2b2b2b; --chart-5: #c2c2c2; --chart-6: #5f5f5f;

  --shadow-1: none; --shadow-2: 0 0 0 1px var(--color-border-strong); --shadow-3: 0 0 0 1px var(--color-border-strong);
  --radius-1: 4px; --radius-2: 4px; --radius-3: 4px; --radius-4: 4px;
}