/* ---- tokens/fonts.css ---- */
/* Pretendard — the WDS system typeface (KR + Latin).
   Loaded from the jsDelivr CDN as a variable font. */
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2") format("woff2-variations");
}

:root {
  /* Pretendard first, then platform system stacks as fallback */
  --wds-font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --wds-font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
}

/* ---- tokens/colors.css ---- */
/* WDS Color System
   Two layers:
   1. Atomic — the raw hue ramps (blue, coolNeutral, red, …). Never use directly in product UI.
   2. Semantic — role-based aliases (primary, label, background, line, …). ALWAYS use these.
   Values are resolved to hex/8-digit-hex (alpha baked in) so they work in plain CSS.
   Light theme lives on :root; dark theme on [data-theme="dark"]. */

:root {
  /* ── Atomic: common ── */
  --atomic-common-0: #000000;
  --atomic-common-100: #ffffff;

  /* ── Atomic: blue (primary) ── */
  --atomic-blue-10: #001536; --atomic-blue-20: #002966; --atomic-blue-30: #003E9C;
  --atomic-blue-40: #0054D1; --atomic-blue-45: #005EEB; --atomic-blue-50: #0066FF;
  --atomic-blue-55: #1A75FF; --atomic-blue-60: #3385FF; --atomic-blue-65: #4F95FF;
  --atomic-blue-70: #69A5FF; --atomic-blue-80: #9EC5FF; --atomic-blue-90: #C9DEFE;
  --atomic-blue-95: #EAF2FE; --atomic-blue-99: #F7FBFF;

  /* ── Atomic: coolNeutral (surfaces + text) ── */
  --atomic-coolNeutral-5: #0F0F10; --atomic-coolNeutral-7: #141415; --atomic-coolNeutral-10: #171719;
  --atomic-coolNeutral-15: #1B1C1E; --atomic-coolNeutral-17: #212225; --atomic-coolNeutral-20: #292A2D;
  --atomic-coolNeutral-22: #2E2F33; --atomic-coolNeutral-23: #333438; --atomic-coolNeutral-25: #37383C;
  --atomic-coolNeutral-30: #46474C; --atomic-coolNeutral-40: #5A5C63; --atomic-coolNeutral-50: #70737C;
  --atomic-coolNeutral-60: #878A93; --atomic-coolNeutral-70: #989BA2; --atomic-coolNeutral-80: #AEB0B6;
  --atomic-coolNeutral-90: #C2C4C8; --atomic-coolNeutral-95: #DBDCDF; --atomic-coolNeutral-96: #E1E2E4;
  --atomic-coolNeutral-97: #EAEBEC; --atomic-coolNeutral-98: #F4F4F5; --atomic-coolNeutral-99: #F7F7F8;

  /* ── Atomic: neutral (shadow tint) ── */
  --atomic-neutral-10: #171717;

  /* ── Atomic: status hues ── */
  --atomic-red-40: #E52222; --atomic-red-50: #FF4242; --atomic-red-60: #FF6363;
  --atomic-green-40: #009632; --atomic-green-50: #00BF40; --atomic-green-60: #1ED45A;
  --atomic-orange-39: #D17600; --atomic-orange-50: #FF9200; --atomic-orange-60: #FFA938;

  /* ── Atomic: accent hues ── */
  --atomic-redOrange-48: #F55A00; --atomic-redOrange-50: #FF5E00; --atomic-redOrange-60: #FF7B2E;
  --atomic-lime-37: #429E00; --atomic-lime-50: #58CF04; --atomic-lime-60: #6BE016;
  --atomic-cyan-40: #0098B2; --atomic-cyan-50: #00BDDE; --atomic-cyan-60: #28D0ED;
  --atomic-lightBlue-40: #008DCF; --atomic-lightBlue-50: #00AEFF; --atomic-lightBlue-60: #3DC2FF;
  --atomic-violet-45: #5B37ED; --atomic-violet-50: #6541F2; --atomic-violet-60: #7D5EF7; --atomic-violet-70: #9E86FC;
  --atomic-purple-40: #AD36E3; --atomic-purple-50: #CB59FF; --atomic-purple-60: #D478FF;
  --atomic-pink-46: #E846CD; --atomic-pink-50: #F553DA; --atomic-pink-60: #FA73E3;

  /* ── Semantic (light) ── */
  --semantic-static-white: #ffffff;
  --semantic-static-black: #000000;

  --semantic-primary-normal: #0066FF;   /* blue50 */
  --semantic-primary-strong: #005EEB;   /* blue45 */
  --semantic-primary-heavy: #0054D1;    /* blue40 */

  --semantic-label-normal: #171719;                 /* coolNeutral10 */
  --semantic-label-strong: #000000;                 /* common0 */
  --semantic-label-neutral: #2E2F33E0;              /* coolNeutral22 @88 */
  --semantic-label-alternative: #37383C9C;          /* coolNeutral25 @61 */
  --semantic-label-assistive: #37383C47;            /* coolNeutral25 @28 */
  --semantic-label-disable: #37383C29;              /* coolNeutral25 @16 */

  --semantic-background-normal-normal: #ffffff;
  --semantic-background-normal-alternative: #F7F7F8;      /* coolNeutral99 */
  --semantic-background-elevated-normal: #ffffff;
  --semantic-background-elevated-alternative: #F7F7F8;
  --semantic-background-transparent-normal: #FFFFFF14;    /* common100 @8 */
  --semantic-background-transparent-alternative: #FFFFFF47;
  --semantic-background-status-negative: #FF424214;       /* red50 @8 */
  --semantic-background-status-cautionary: #FF920014;     /* orange50 @8 */
  --semantic-background-status-positive: #00BF4014;       /* green50 @8 */

  --semantic-interaction-inactive: #989BA2;    /* coolNeutral70 */
  --semantic-interaction-disable: #F4F4F5;     /* coolNeutral98 */

  --semantic-line-normal-normal: #70737C38;        /* coolNeutral50 @22 */
  --semantic-line-normal-neutral: #70737C29;       /* coolNeutral50 @16 */
  --semantic-line-normal-alternative: #70737C14;   /* coolNeutral50 @8 */
  --semantic-line-solid-normal: #E1E2E4;           /* coolNeutral96 */
  --semantic-line-solid-neutral: #EAEBEC;          /* coolNeutral97 */
  --semantic-line-solid-alternative: #F4F4F5;      /* coolNeutral98 */
  --semantic-line-primary-normal: #0066FF47;       /* blue50 @28 */
  --semantic-line-primary-strong: #0066FF6E;       /* blue50 @43 */

  --semantic-status-positive: #00BF40;    /* green50 */
  --semantic-status-cautionary: #FF9200;  /* orange50 */
  --semantic-status-negative: #FF4242;    /* red50 */

  --semantic-fill-normal: #70737C14;       /* coolNeutral50 @8 */
  --semantic-fill-strong: #70737C29;       /* coolNeutral50 @16 */
  --semantic-fill-alternative: #70737C0D;  /* coolNeutral50 @5 */

  --semantic-inverse-primary: #3385FF;      /* blue60 */
  --semantic-inverse-background: #1B1C1E;   /* coolNeutral15 */
  --semantic-inverse-label: #F7F7F8;        /* coolNeutral99 */

  --semantic-material-dimmer: #17171985;    /* coolNeutral10 @52 */

  /* Accent — foreground (text/icon) */
  --semantic-accent-fg-red: #E52222;      --semantic-accent-fg-redOrange: #F55A00;
  --semantic-accent-fg-orange: #D17600;   --semantic-accent-fg-lime: #429E00;
  --semantic-accent-fg-green: #009632;    --semantic-accent-fg-cyan: #0098B2;
  --semantic-accent-fg-lightBlue: #008DCF;--semantic-accent-fg-blue: #005EEB;
  --semantic-accent-fg-violet: #5B37ED;   --semantic-accent-fg-purple: #AD36E3;
  --semantic-accent-fg-pink: #E846CD;
  /* Accent — background (chips/fills) */
  --semantic-accent-bg-redOrange: #FF5E00; --semantic-accent-bg-lime: #58CF04;
  --semantic-accent-bg-cyan: #00BDDE;      --semantic-accent-bg-lightBlue: #00AEFF;
  --semantic-accent-bg-violet: #6541F2;    --semantic-accent-bg-purple: #CB59FF;
  --semantic-accent-bg-pink: #F553DA;
}

[data-theme="dark"] {
  --semantic-primary-normal: #3385FF;   /* blue60 */
  --semantic-primary-strong: #1A75FF;   /* blue55 */
  --semantic-primary-heavy: #0066FF;    /* blue50 */

  --semantic-label-normal: #F7F7F8;                 /* coolNeutral99 */
  --semantic-label-strong: #ffffff;
  --semantic-label-neutral: #C2C4C8E0;              /* coolNeutral90 @88 */
  --semantic-label-alternative: #AEB0B69C;          /* coolNeutral80 @61 */
  --semantic-label-assistive: #AEB0B647;            /* coolNeutral80 @28 */
  --semantic-label-disable: #989BA229;              /* coolNeutral70 @16 */

  --semantic-background-normal-normal: #1B1C1E;         /* coolNeutral15 */
  --semantic-background-normal-alternative: #0F0F10;    /* coolNeutral5 */
  --semantic-background-elevated-normal: #212225;       /* coolNeutral17 */
  --semantic-background-elevated-alternative: #141415;  /* coolNeutral7 */

  --semantic-interaction-inactive: #5A5C63;    /* coolNeutral40 */
  --semantic-interaction-disable: #2E2F33;     /* coolNeutral22 */

  --semantic-line-solid-normal: #37383C;   /* coolNeutral25 */
  --semantic-line-solid-neutral: #333438;  /* coolNeutral23 */
  --semantic-line-solid-alternative: #2E2F33;

  --semantic-status-positive: #1ED45A;    /* green60 */
  --semantic-status-cautionary: #FFA938;  /* orange60 */
  --semantic-status-negative: #FF6363;    /* red60 */

  --semantic-fill-normal: #70737C38;       /* coolNeutral50 @22 */
  --semantic-fill-strong: #70737C47;       /* coolNeutral50 @28 */
  --semantic-fill-alternative: #70737C1F;  /* coolNeutral50 @12 */

  --semantic-inverse-primary: #0066FF;      /* blue50 */
  --semantic-inverse-background: #ffffff;
  --semantic-inverse-label: #171719;        /* coolNeutral10 */

  --semantic-material-dimmer: #171719BD;    /* coolNeutral10 @74 */
}

/* ---- tokens/typography.css ---- */
/* WDS Typography — the 19-step scale.
   Each variant sets font-size / line-height / letter-spacing (values lifted verbatim from WDS).
   Weights: regular 400, medium 500, bold 600 (700 for display & title).
   Use the .wds-<variant> classes, or the --wds-font-* tokens directly. */

:root {
  --wds-font-sans: var(--wds-font-sans);

  /* Display */
  --wds-display1-size: 3.5rem;   --wds-display1-line: 4.5rem;    --wds-display1-tracking: -0.0319em;
  --wds-display2-size: 2.5rem;   --wds-display2-line: 3.25rem;   --wds-display2-tracking: -0.0282em;
  --wds-display3-size: 2.25rem;  --wds-display3-line: 3rem;      --wds-display3-tracking: -0.027em;
  /* Title */
  --wds-title1-size: 2rem;       --wds-title1-line: 2.75rem;     --wds-title1-tracking: -0.0253em;
  --wds-title2-size: 1.75rem;    --wds-title2-line: 2.375rem;    --wds-title2-tracking: -0.0236em;
  --wds-title3-size: 1.5rem;     --wds-title3-line: 2rem;        --wds-title3-tracking: -0.023em;
  /* Heading */
  --wds-heading1-size: 1.375rem; --wds-heading1-line: 1.875rem;  --wds-heading1-tracking: -0.0194em;
  --wds-heading2-size: 1.25rem;  --wds-heading2-line: 1.75rem;   --wds-heading2-tracking: -0.012em;
  /* Headline */
  --wds-headline1-size: 1.125rem;  --wds-headline1-line: 1.625rem; --wds-headline1-tracking: -0.002em;
  --wds-headline2-size: 1.0625rem; --wds-headline2-line: 1.5rem;   --wds-headline2-tracking: 0em;
  /* Body */
  --wds-body1-size: 1rem;         --wds-body1-line: 1.5rem;       --wds-body1-tracking: 0.0057em;
  --wds-body1r-line: 1.625rem;
  --wds-body2-size: 0.9375rem;    --wds-body2-line: 1.375rem;     --wds-body2-tracking: 0.0096em;
  --wds-body2r-line: 1.5rem;
  /* Label */
  --wds-label1-size: 0.875rem;    --wds-label1-line: 1.25rem;     --wds-label1-tracking: 0.0145em;
  --wds-label1r-line: 1.375rem;
  --wds-label2-size: 0.8125rem;   --wds-label2-line: 1.125rem;    --wds-label2-tracking: 0.0194em;
  /* Caption */
  --wds-caption1-size: 0.75rem;   --wds-caption1-line: 1rem;      --wds-caption1-tracking: 0.0252em;
  --wds-caption2-size: 0.6875rem; --wds-caption2-line: 0.875rem;  --wds-caption2-tracking: 0.0311em;
}

.wds-display1{font:400 var(--wds-display1-size)/var(--wds-display1-line) var(--wds-font-sans);letter-spacing:var(--wds-display1-tracking)}
.wds-display2{font:400 var(--wds-display2-size)/var(--wds-display2-line) var(--wds-font-sans);letter-spacing:var(--wds-display2-tracking)}
.wds-display3{font:400 var(--wds-display3-size)/var(--wds-display3-line) var(--wds-font-sans);letter-spacing:var(--wds-display3-tracking)}
.wds-title1{font:400 var(--wds-title1-size)/var(--wds-title1-line) var(--wds-font-sans);letter-spacing:var(--wds-title1-tracking)}
.wds-title2{font:400 var(--wds-title2-size)/var(--wds-title2-line) var(--wds-font-sans);letter-spacing:var(--wds-title2-tracking)}
.wds-title3{font:400 var(--wds-title3-size)/var(--wds-title3-line) var(--wds-font-sans);letter-spacing:var(--wds-title3-tracking)}
.wds-heading1{font:400 var(--wds-heading1-size)/var(--wds-heading1-line) var(--wds-font-sans);letter-spacing:var(--wds-heading1-tracking)}
.wds-heading2{font:400 var(--wds-heading2-size)/var(--wds-heading2-line) var(--wds-font-sans);letter-spacing:var(--wds-heading2-tracking)}
.wds-headline1{font:400 var(--wds-headline1-size)/var(--wds-headline1-line) var(--wds-font-sans);letter-spacing:var(--wds-headline1-tracking)}
.wds-headline2{font:400 var(--wds-headline2-size)/var(--wds-headline2-line) var(--wds-font-sans);letter-spacing:var(--wds-headline2-tracking)}
.wds-body1{font:400 var(--wds-body1-size)/var(--wds-body1-line) var(--wds-font-sans);letter-spacing:var(--wds-body1-tracking)}
.wds-body1-reading{font:400 var(--wds-body1-size)/var(--wds-body1r-line) var(--wds-font-sans);letter-spacing:var(--wds-body1-tracking)}
.wds-body2{font:400 var(--wds-body2-size)/var(--wds-body2-line) var(--wds-font-sans);letter-spacing:var(--wds-body2-tracking)}
.wds-body2-reading{font:400 var(--wds-body2-size)/var(--wds-body2r-line) var(--wds-font-sans);letter-spacing:var(--wds-body2-tracking)}
.wds-label1{font:400 var(--wds-label1-size)/var(--wds-label1-line) var(--wds-font-sans);letter-spacing:var(--wds-label1-tracking)}
.wds-label1-reading{font:400 var(--wds-label1-size)/var(--wds-label1r-line) var(--wds-font-sans);letter-spacing:var(--wds-label1-tracking)}
.wds-label2{font:400 var(--wds-label2-size)/var(--wds-label2-line) var(--wds-font-sans);letter-spacing:var(--wds-label2-tracking)}
.wds-caption1{font:400 var(--wds-caption1-size)/var(--wds-caption1-line) var(--wds-font-sans);letter-spacing:var(--wds-caption1-tracking)}
.wds-caption2{font:400 var(--wds-caption2-size)/var(--wds-caption2-line) var(--wds-font-sans);letter-spacing:var(--wds-caption2-tracking)}

.wds-w-regular{font-weight:400}
.wds-w-medium{font-weight:500}
.wds-w-bold{font-weight:600}
.wds-display1.wds-w-bold,.wds-display2.wds-w-bold,.wds-display3.wds-w-bold,
.wds-title1.wds-w-bold,.wds-title2.wds-w-bold,.wds-title3.wds-w-bold{font-weight:700}

/* ---- tokens/spacing.css ---- */
/* WDS Spacing — a fine-grained px scale (values are literal px, lifted from WDS). */
:root {
  --wds-space-0: 0px;
  --wds-space-0-5: 0.5px;
  --wds-space-1: 1px;
  --wds-space-2: 2px;
  --wds-space-4: 4px;
  --wds-space-6: 6px;
  --wds-space-8: 8px;
  --wds-space-10: 10px;
  --wds-space-12: 12px;
  --wds-space-14: 14px;
  --wds-space-16: 16px;
  --wds-space-20: 20px;
  --wds-space-24: 24px;
  --wds-space-32: 32px;
  --wds-space-40: 40px;
  --wds-space-48: 48px;
  --wds-space-56: 56px;
  --wds-space-64: 64px;
  --wds-space-72: 72px;
  --wds-space-80: 80px;

  /* Layout breakpoints */
  --wds-bp-xs: 0px;
  --wds-bp-sm: 768px;
  --wds-bp-md: 992px;
  --wds-bp-lg: 1200px;
  --wds-bp-xl: 1600px;

  /* Opacity scale */
  --wds-opacity-5: 0.05; /* @kind other */
  --wds-opacity-8: 0.08; /* @kind other */
  --wds-opacity-12: 0.12; /* @kind other */
  --wds-opacity-16: 0.16; /* @kind other */
  --wds-opacity-22: 0.22; /* @kind other */
  --wds-opacity-28: 0.28; /* @kind other */
  --wds-opacity-35: 0.35; /* @kind other */
  --wds-opacity-43: 0.43; /* @kind other */
  --wds-opacity-52: 0.52; /* @kind other */
  --wds-opacity-61: 0.61; /* @kind other */
  --wds-opacity-74: 0.74; /* @kind other */
  --wds-opacity-88: 0.88; /* @kind other */
  --wds-opacity-97: 0.97; /* @kind other */

  --wds-z-modal: 1300; /* @kind other */
}

/* ---- tokens/radius.css ---- */
/* WDS Corner Radius — the concrete radii used across components.
   WDS has no global radius token file; these are the literal values each
   component uses, collected here for reference and reuse. */
:root {
  --wds-radius-6: 6px;    /* chip xsmall */
  --wds-radius-8: 8px;    /* button small, chip small/medium, content-badge */
  --wds-radius-10: 10px;  /* button medium, chip large, content-badge medium */
  --wds-radius-12: 12px;  /* button large, text-field, card, section-message */
  --wds-radius-full: 9999px; /* switch thumb, round-checkbox, avatar */
}

/* ---- tokens/shadows.css ---- */
/* WDS Elevation — box-shadow tokens (values lifted verbatim; neutral10 = #171717).
   Five normal steps plus two "spread" glows. Drop-shadow variants exist in WDS
   for filter contexts; the box-shadow set below covers card/menu/modal elevation. */
:root {
  --wds-shadow-xsmall: 0px 1px 2px -1px #1717171A;
  --wds-shadow-small: 0px 2px 4px -2px #1717170F, 0px 4px 6px -1px #1717170F;
  --wds-shadow-medium: 0px 4px 6px -2px #17171712, 0px 10px 15px -3px #17171712;
  --wds-shadow-large: 0px 6px 10px -4px #17171714, 0px 16px 24px -6px #17171714;
  --wds-shadow-xlarge: 0px 10px 15px -5px #1717171A, 0px 24px 38px -10px #1717171F;
  --wds-shadow-spread-small: 0px 0px 60px 0px #1717171A;
  --wds-shadow-spread-medium: 0px 15px 75px 0px #17171729;
}

/* ---- styles.css (without @import) ---- */
/* Montage — Wanted Design System (WDS) for Web
   Global entry point. Consumers link this one file.
   Only @import lines belong here. */