/* 디자인 토큰: 자동 생성물. tools/tokens/emit.py(역할)·tokens.py(램프·치수)를 고치고 다시 돌린다. */

:root {
  /* 강조색 */
  --accent-50: #EEF4FF;
  --accent-100: #DAE6FF;
  --accent-200: #B5CDFF;
  --accent-300: #87AEFF;
  --accent-400: #5989FF;
  --accent-500: #2D5AFF;
  --accent-600: #182DF5;
  --accent-700: #1322DA;
  --accent-800: #0F20B4;
  --accent-900: #0A1E82;
  --accent-950: #081857;

  /* 중립색 */
  --neutral-0: #FFFFFF;
  --neutral-50: #F9FAFC;
  --neutral-100: #F2F4F7;
  --neutral-200: #E5E7ED;
  --neutral-300: #D3D6DE;
  --neutral-400: #B5BAC5;
  --neutral-500: #8B919D;
  --neutral-600: #676D7C;
  --neutral-700: #545B6C;
  --neutral-800: #3C4355;
  --neutral-900: #22293D;
  --neutral-950: #0F1629;
  --neutral-1000: #070C1D;

  /* 보조색 */
  /* 완료·성공 */
  --green-50: #E9F5EC;
  --green-100: #CAE8D3;
  --green-200: #8FD0A5;
  --green-300: #5BBE82;
  --green-400: #26AF69;
  --green-500: #00A256;
  --green-600: #009547;
  --green-700: #00873C;
  --green-800: #007733;
  --green-900: #005E2D;
  --green-950: #004523;
  /* 주의·대기 */
  --amber-50: #F9F0E5;
  --amber-100: #F0DCC1;
  --amber-200: #E1B67C;
  --amber-300: #D5993D;
  --amber-400: #CA8300;
  --amber-500: #BF7200;
  --amber-600: #B26300;
  --amber-700: #A35700;
  --amber-800: #914C00;
  --amber-900: #713F00;
  --amber-950: #522F00;
  /* 오류·위험 */
  --red-50: #FDEDEB;
  --red-100: #FAD5D0;
  --red-200: #F3A89F;
  --red-300: #EB857A;
  --red-400: #E2695F;
  --red-500: #D9544B;
  --red-600: #CB433C;
  --red-700: #BB3631;
  --red-800: #A62E29;
  --red-900: #812C26;
  --red-950: #5D221E;
  /* 보조 강조 */
  --violet-50: #F7EEF9;
  --violet-100: #EBD7F2;
  --violet-200: #D7ACE4;
  --violet-300: #C78CDA;
  --violet-400: #BA73D0;
  --violet-500: #AF60C7;
  --violet-600: #A250BA;
  --violet-700: #9444AB;
  --violet-800: #833B98;
  --violet-900: #663375;
  --violet-950: #4A2755;

  /* ── 역할 ── */
  --canvas: #FFFFFF;
  --canvas-alt: #F9FAFC;
  --canvas-sunken: #F2F4F7;
  --surface: #FFFFFF;
  --surface-alt: #F9FAFC;
  --surface-invert: #0F1629;
  --surface-raised: #FFFFFF;
  --line: #E5E7ED;
  --line-strong: #D3D6DE;
  --line-invert: rgba(255,255,255,.12);
  --ink: #0F1629;
  --ink-body: #3C4355;
  --ink-muted: #545B6C;
  --ink-subtle: #676D7C;
  --ink-disabled: #B5BAC5;
  --ink-invert: #FFFFFF;
  --ink-muted-alt: #545B6C;
  --good-text: #007733;
  --good-soft: #E9F5EC;
  --warn-text: #713F00;
  --warn-soft: #F9F0E5;
  --bad-text: #BB3631;
  --bad-soft: #FDEDEB;
  --note-text: #833B98;
  --note-soft: #F7EEF9;
  --accent: #182DF5;
  --accent-hover: #1322DA;
  --accent-active: #0F20B4;
  --accent-ink: #FFFFFF;
  --accent-soft: #EEF4FF;
  --accent-soft-hover: #DAE6FF;
  --accent-line: #B5CDFF;
  --accent-text: #1322DA;
  --tint: rgba(12,16,48,.05);
  --tint-hover: rgba(12,16,48,.08);
  --tint-active: rgba(12,16,48,.12);
  --scrim: rgba(7,12,29,.52);
  --focus: #2D5AFF;
  --media-ink: #FFFFFF;
  --media-shade: rgba(11,17,24,.76);
  --logo-plate: #FFFFFF;
  --shadow-color: 12,16,48;
  --danger: #CB433C;
  --danger-hover: #BB3631;
  --danger-active: #A62E29;
  --danger-ink: #FFFFFF;
  --good: #00A256;
  --warn: #BF7200;
  --bad: #D9544B;
  --knob: #FFFFFF;
  --toast: #22293D;
  --toast-ink: #FFFFFF;
  --toast-action: #87AEFF;
  --toast-line: transparent;
  --toast-good: #007733;
  --toast-bad: #A62E29;
  --device: #0F1629;
  --media-base: #3C4355;
  --panel-sky: linear-gradient(135deg,#E6EBFF 0%,#EEF1FF 45%,#F6F7FF 100%);
  --panel-sun: linear-gradient(135deg,#FFF6DA 0%,#FFF9E6 50%,#FFFDF4 100%);
  --panel-mint: linear-gradient(135deg,#DFF5EC 0%,#EDFAF5 55%,#F6FCFA 100%);
  --panel-lilac: linear-gradient(135deg,#EFE8FF 0%,#F5F0FF 55%,#FAF7FF 100%);
  --glow-accent: #B5CDFF;
  --glow-violet: #D7ACE4;
  --glow-mint: #CAE8D3;
  --halo-accent: #DAE6FF;
  --halo-violet: #EBD7F2;
  --brand-word-1: #0C1024;
  --brand-word-2: #0C1024;
  --brand-ink: #0C1024;
  --brand-accent: #1A1AE6;
  --deep: #060B1D;
  --deep-alt: #0D1428;
  --deep-raised: #171F35;
  --deep-line: rgba(255,255,255,.10);
  --deep-line-strong: rgba(255,255,255,.18);
  --deep-ink: #FFFFFF;
  --deep-ink-body: #D3D7E2;
  --deep-ink-muted: #A2A9BA;
  --deep-accent: #5989FF;
  --deep-accent-soft: rgba(89,137,255,.16);
  --deep-tint: rgba(255,255,255,.06);
  --deep-tint-hover: rgba(255,255,255,.10);
  --deep-glow: #2D5AFF;
  --seal: #28356B;
  --seal-soft: #ECEEF6;
  --seal-text: #28356B;
  --seal-print: #28356B;

  /* 타이포 */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", sans-serif;
  --font-mono: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", sans-serif;
  --font-serif: "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, "Batang", serif;
  --t-display-2xl: 88px; --t-display-2xl-lh: 104px; --t-display-2xl-ls: -1.76px; --t-display-2xl-w: 700;
  --t-display-xl: 72px; --t-display-xl-lh: 85px; --t-display-xl-ls: -1.44px; --t-display-xl-w: 700;
  --t-display-lg: 56px; --t-display-lg-lh: 66px; --t-display-lg-ls: -1.12px; --t-display-lg-w: 700;
  --t-display-md: 48px; --t-display-md-lh: 60px; --t-display-md-ls: -0.96px; --t-display-md-w: 700;
  --t-display-sm: 40px; --t-display-sm-lh: 50px; --t-display-sm-ls: -0.8px; --t-display-sm-w: 700;
  --t-heading-xl: 34px; --t-heading-xl-lh: 44px; --t-heading-xl-ls: -0.68px; --t-heading-xl-w: 700;
  --t-heading-lg: 28px; --t-heading-lg-lh: 38px; --t-heading-lg-ls: -0.56px; --t-heading-lg-w: 700;
  --t-heading-md: 24px; --t-heading-md-lh: 33px; --t-heading-md-ls: -0.48px; --t-heading-md-w: 700;
  --t-heading-sm: 20px; --t-heading-sm-lh: 29px; --t-heading-sm-ls: -0.4px; --t-heading-sm-w: 600;
  --t-body-lg: 18px; --t-body-lg-lh: 29px; --t-body-lg-ls: 0px; --t-body-lg-w: 400;
  --t-body-md: 16px; --t-body-md-lh: 26px; --t-body-md-ls: 0px; --t-body-md-w: 400;
  --t-body-sm: 15px; --t-body-sm-lh: 24px; --t-body-sm-ls: 0px; --t-body-sm-w: 400;
  --t-body-xs: 14px; --t-body-xs-lh: 22px; --t-body-xs-ls: 0px; --t-body-xs-w: 400;
  --t-caption: 13px; --t-caption-lh: 21px; --t-caption-ls: 0px; --t-caption-w: 400;
  --t-micro: 12px; --t-micro-lh: 19px; --t-micro-ls: 0px; --t-micro-w: 400;
  --t-nano: 11px; --t-nano-lh: 18px; --t-nano-ls: 0px; --t-nano-w: 400;

  /* 간격 */
  --s-0: 0px;
  --s-2: 2px;
  --s-4: 4px;
  --s-6: 6px;
  --s-8: 8px;
  --s-10: 10px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-28: 28px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-56: 56px;
  --s-64: 64px;
  --s-80: 80px;
  --s-96: 96px;
  --s-120: 120px;
  --s-160: 160px;
  --s-200: 200px;
  --s-240: 240px;

  /* 반경 */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-3xl: 24px;
  --r-4xl: 32px;
  --r-full: 999px;

  /* 컨트롤 (높이·반경·글자·패딩이 한 세트) */
  --c-xs-h: 28px; --c-xs-r: 6px; --c-xs-fs: 13px; --c-xs-px: 10px; --c-xs-gap: 4px;
  --c-sm-h: 36px; --c-sm-r: 8px; --c-sm-fs: 14px; --c-sm-px: 14px; --c-sm-gap: 6px;
  --c-md-h: 44px; --c-md-r: 10px; --c-md-fs: 15px; --c-md-px: 18px; --c-md-gap: 6px;
  --c-lg-h: 52px; --c-lg-r: 10px; --c-lg-fs: 16px; --c-lg-px: 22px; --c-lg-gap: 8px;
  --c-xl-h: 60px; --c-xl-r: 12px; --c-xl-fs: 17px; --c-xl-px: 28px; --c-xl-gap: 10px;

  /* 그림자 */
  --sh-xs: 0 1px 2px rgba(12,16,48,.04);
  --sh-sm: 0 2px 6px rgba(12,16,48,.05);
  --sh-md: 0 8px 24px rgba(12,16,48,.06);
  --sh-lg: 0 16px 40px rgba(12,16,48,.08);
  --sh-xl: 0 28px 72px rgba(12,16,48,.12);
  --sh-pop: 0 0 0 1px rgba(12,16,48,.04), 0 10px 32px rgba(12,16,48,.10), 0 2px 6px rgba(12,16,48,.05);

  /* 모션 */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in: cubic-bezier(.55,.06,.68,.19);
  --ease-inout: cubic-bezier(.4,0,.2,1);
  --ease-emph: cubic-bezier(.64,0,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-sheet: cubic-bezier(.32,.72,0,1);
  --d-1: 120ms;
  --d-2: 180ms;
  --d-3: 240ms;
  --d-4: 320ms;
  --d-5: 420ms;
  --d-6: 640ms;
  --d-7: 900ms;

  /* 레이아웃 */
  --sec-sm: 64px;
  --sec-md: 96px;
  --sec-lg: 128px;
  --sec-xl: 160px;
  --sec-hero: 200px;
  --w-sm: 640px;
  --w-md: 768px;
  --w-narrow: 880px;
  --w-base: 1140px;
  --w-wide: 1280px;
  --w-max: 1440px;
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-pop: 300;
  --z-scrim: 400;
  --z-sheet: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-tip: 800;

  /* 안전영역 */
  --safe-t: env(safe-area-inset-top,0px);  --safe-b: env(safe-area-inset-bottom,0px);
  --safe-l: env(safe-area-inset-left,0px); --safe-r: env(safe-area-inset-right,0px);
  --nav-h: 60px; --tabbar-h: 58px; --dock-h: 64px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #070C1D;
    --canvas-alt: #0C1223;
    --canvas-sunken: #040715;
    --surface: #0F1526;
    --surface-alt: #161D2E;
    --surface-invert: #F9FAFC;
    --surface-raised: #262D3F;
    --line: rgba(255,255,255,.09);
    --line-strong: rgba(255,255,255,.16);
    --line-invert: rgba(0,0,0,.12);
    --ink: #F3F5F9;
    --ink-body: #D5D9E3;
    --ink-muted: #A2A8B6;
    --ink-subtle: #8A91A0;
    --ink-disabled: #555B69;
    --ink-invert: #070C1D;
    --ink-muted-alt: #B5BAC7;
    --good-text: #7FD9A8;
    --good-soft: rgba(46,160,102,.16);
    --warn-text: #E8C45F;
    --warn-soft: rgba(180,140,20,.16);
    --bad-text: #F09A92;
    --bad-soft: rgba(200,70,60,.16);
    --note-text: #CBA6F0;
    --note-soft: rgba(150,90,210,.16);
    --accent: #5989FF;
    --accent-hover: #87AEFF;
    --accent-active: #2D5AFF;
    --accent-ink: #070C1D;
    --accent-soft: rgba(89,137,255,.14);
    --accent-soft-hover: rgba(89,137,255,.22);
    --accent-line: rgba(89,137,255,.30);
    --accent-text: #87AEFF;
    --tint: rgba(255,255,255,.06);
    --tint-hover: rgba(255,255,255,.10);
    --tint-active: rgba(255,255,255,.14);
    --scrim: rgba(0,0,0,.62);
    --focus: #5989FF;
    --media-ink: #FFFFFF;
    --media-shade: rgba(11,17,24,.76);
    --logo-plate: #FFFFFF;
    --shadow-color: 0,0,0;
    --danger: #CB433C;
    --danger-hover: #BB3631;
    --danger-active: #A62E29;
    --danger-ink: #FFFFFF;
    --good: #26AF69;
    --warn: #CA8300;
    --bad: #E2695F;
    --knob: #FFFFFF;
    --toast: #22293D;
    --toast-ink: #F3F5F9;
    --toast-action: #87AEFF;
    --toast-line: rgba(255,255,255,.08);
    --toast-good: #007733;
    --toast-bad: #A62E29;
    --device: #1A2133;
    --media-base: #3C4355;
    --panel-sky: linear-gradient(135deg,#17204A 0%,#121838 60%,#0E1329 100%);
    --panel-sun: linear-gradient(135deg,#2E2716 0%,#231E13 60%,#1A1710 100%);
    --panel-mint: linear-gradient(135deg,#132B24 0%,#10211C 60%,#0E1A16 100%);
    --panel-lilac: linear-gradient(135deg,#251E38 0%,#1C1829 60%,#16131F 100%);
    --brand-word-1: #FFFFFF;
    --brand-word-2: #FFFFFF;
    --brand-ink: #FFFFFF;
    --brand-accent: #4B4BFF;
    --deep: #030616;
    --deep-alt: #080E21;
    --deep-raised: #131B2F;
    --deep-line: rgba(255,255,255,.09);
    --deep-line-strong: rgba(255,255,255,.16);
    --deep-ink: #FFFFFF;
    --deep-ink-body: #D3D7E2;
    --deep-ink-muted: #A2A9BA;
    --deep-accent: #5989FF;
    --deep-accent-soft: rgba(89,137,255,.16);
    --deep-tint: rgba(255,255,255,.06);
    --deep-tint-hover: rgba(255,255,255,.10);
    --deep-glow: #2D5AFF;
    --seal: #AEBBEA;
    --seal-soft: rgba(94,112,190,.22);
    --seal-text: #C2CCF0;
    --seal-print: #28356B;
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --canvas: #070C1D;
  --canvas-alt: #0C1223;
  --canvas-sunken: #040715;
  --surface: #0F1526;
  --surface-alt: #161D2E;
  --surface-invert: #F9FAFC;
  --surface-raised: #262D3F;
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);
  --line-invert: rgba(0,0,0,.12);
  --ink: #F3F5F9;
  --ink-body: #D5D9E3;
  --ink-muted: #A2A8B6;
  --ink-subtle: #8A91A0;
  --ink-disabled: #555B69;
  --ink-invert: #070C1D;
  --ink-muted-alt: #B5BAC7;
  --good-text: #7FD9A8;
  --good-soft: rgba(46,160,102,.16);
  --warn-text: #E8C45F;
  --warn-soft: rgba(180,140,20,.16);
  --bad-text: #F09A92;
  --bad-soft: rgba(200,70,60,.16);
  --note-text: #CBA6F0;
  --note-soft: rgba(150,90,210,.16);
  --accent: #5989FF;
  --accent-hover: #87AEFF;
  --accent-active: #2D5AFF;
  --accent-ink: #070C1D;
  --accent-soft: rgba(89,137,255,.14);
  --accent-soft-hover: rgba(89,137,255,.22);
  --accent-line: rgba(89,137,255,.30);
  --accent-text: #87AEFF;
  --tint: rgba(255,255,255,.06);
  --tint-hover: rgba(255,255,255,.10);
  --tint-active: rgba(255,255,255,.14);
  --scrim: rgba(0,0,0,.62);
  --focus: #5989FF;
  --media-ink: #FFFFFF;
  --media-shade: rgba(11,17,24,.76);
  --logo-plate: #FFFFFF;
  --shadow-color: 0,0,0;
  --danger: #CB433C;
  --danger-hover: #BB3631;
  --danger-active: #A62E29;
  --danger-ink: #FFFFFF;
  --good: #26AF69;
  --warn: #CA8300;
  --bad: #E2695F;
  --knob: #FFFFFF;
  --toast: #22293D;
  --toast-ink: #F3F5F9;
  --toast-action: #87AEFF;
  --toast-line: rgba(255,255,255,.08);
  --toast-good: #007733;
  --toast-bad: #A62E29;
  --device: #1A2133;
  --media-base: #3C4355;
  --panel-sky: linear-gradient(135deg,#17204A 0%,#121838 60%,#0E1329 100%);
  --panel-sun: linear-gradient(135deg,#2E2716 0%,#231E13 60%,#1A1710 100%);
  --panel-mint: linear-gradient(135deg,#132B24 0%,#10211C 60%,#0E1A16 100%);
  --panel-lilac: linear-gradient(135deg,#251E38 0%,#1C1829 60%,#16131F 100%);
  --brand-word-1: #FFFFFF;
  --brand-word-2: #FFFFFF;
  --brand-ink: #FFFFFF;
  --brand-accent: #4B4BFF;
  --deep: #030616;
  --deep-alt: #080E21;
  --deep-raised: #131B2F;
  --deep-line: rgba(255,255,255,.09);
  --deep-line-strong: rgba(255,255,255,.16);
  --deep-ink: #FFFFFF;
  --deep-ink-body: #D3D7E2;
  --deep-ink-muted: #A2A9BA;
  --deep-accent: #5989FF;
  --deep-accent-soft: rgba(89,137,255,.16);
  --deep-tint: rgba(255,255,255,.06);
  --deep-tint-hover: rgba(255,255,255,.10);
  --deep-glow: #2D5AFF;
  --seal: #AEBBEA;
  --seal-soft: rgba(94,112,190,.22);
  --seal-text: #C2CCF0;
  --seal-print: #28356B;
  color-scheme: dark;
}

/* 브레이크포인트 참고 (CSS 변수는 미디어쿼리에 못 쓴다)
   sm: 640px
   md: 768px
   lg: 1024px
   xl: 1280px
   2xl: 1536px
*/