/* =============================================================================
   Montage (Wanted Design System) — Colors & Type
   Source: github.com/wanteddev/montage-web → packages/wds-theme
   Hex values are pulled verbatim from the atomic palettes in source.
   ========================================================================== */

/* ---------- Webfonts ---------------------------------------------------------
   Wanted Sans is the primary brand typeface. Pretendard JP is the secondary
   reading face (handles Japanese + Korean + Latin gracefully). Both load
   via dynamic-subset CSS so only the slices you actually render are fetched.
   --------------------------------------------------------------------------- */
@import url("https://static.wanted.co.kr/fonts/wantedsans/WantedSansVariable.min.css");
@import url("../fonts/pretendard-jp.css");

:root {
  /* =========================================================================
     ATOMIC COLOR SCALES — raw palette swatches.
     Use semantic tokens below for UI; atomic for brand illustration only.
     ====================================================================== */

  /* Common */
  --atomic-common-0:    #000000;
  --atomic-common-100:  #ffffff;

  /* Blue — the brand 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; /* primary normal (light) */
  --atomic-blue-55:  #1A75FF;
  --atomic-blue-60:  #3385FF; /* primary normal (dark) */
  --atomic-blue-65:  #4F95FF;
  --atomic-blue-70:  #69A5FF;
  --atomic-blue-80:  #9EC5FF;
  --atomic-blue-90:  #C9DEFE;
  --atomic-blue-95:  #EAF2FE;
  --atomic-blue-99:  #F7FBFF;

  /* Cool Neutral — the dominant grey scale (slightly blue-tinted) */
  --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;

  /* Neutral — pure grey (used mainly for shadow tints) */
  --atomic-neutral-5:  #0F0F0F;
  --atomic-neutral-10: #171717;
  --atomic-neutral-15: #1C1C1C;
  --atomic-neutral-20: #2A2A2A;
  --atomic-neutral-30: #474747;
  --atomic-neutral-50: #737373;
  --atomic-neutral-70: #9B9B9B;
  --atomic-neutral-90: #C4C4C4;
  --atomic-neutral-99: #F7F7F7;

  /* Status scales */
  --atomic-green-40:  #009632;
  --atomic-green-50:  #00BF40; /* positive (light) */
  --atomic-green-60:  #1ED45A; /* positive (dark) */
  --atomic-green-95:  #D9FFE6;

  --atomic-orange-39: #D17600;
  --atomic-orange-50: #FF9200; /* cautionary (light) */
  --atomic-orange-60: #FFA938;
  --atomic-orange-95: #FEF4E6;

  --atomic-red-40:    #E52222;
  --atomic-red-50:    #FF4242; /* negative (light) */
  --atomic-red-60:    #FF6363;
  --atomic-red-95:    #FEECEC;

  /* Accent scales (used as semantic.accent.foreground / .background) */
  --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 TOKENS — LIGHT (default).
     These are what you should reach for in 95% of cases.
     ====================================================================== */

  /* Static — never invert between light/dark */
  --semantic-static-white: #ffffff;
  --semantic-static-black: #000000;

  /* Primary — brand blue */
  --semantic-primary-normal: var(--atomic-blue-50);
  --semantic-primary-strong: var(--atomic-blue-45);
  --semantic-primary-heavy:  var(--atomic-blue-40);

  /* Label — text on neutral backgrounds */
  --semantic-label-normal:      var(--atomic-coolNeutral-10);
  --semantic-label-strong:      var(--atomic-common-0);
  --semantic-label-neutral:     rgba(46, 47, 51, 0.88);  /* coolNeutral-22 @ 88 */
  --semantic-label-alternative: rgba(55, 56, 60, 0.61);  /* coolNeutral-25 @ 61 */
  --semantic-label-assistive:   rgba(55, 56, 60, 0.28);
  --semantic-label-disable:     rgba(55, 56, 60, 0.16);

  /* Background — surfaces */
  --semantic-background-normal-normal:        #ffffff;
  --semantic-background-normal-alternative:   var(--atomic-coolNeutral-99);
  --semantic-background-elevated-normal:      #ffffff;
  --semantic-background-elevated-alternative: var(--atomic-coolNeutral-99);
  --semantic-background-transparent-normal:      rgba(255, 255, 255, 0.08);
  --semantic-background-transparent-alternative: rgba(255, 255, 255, 0.28);

  /* Interaction — disabled / inactive */
  --semantic-interaction-inactive: var(--atomic-coolNeutral-70);
  --semantic-interaction-disable:  var(--atomic-coolNeutral-98);

  /* Line — borders & dividers */
  --semantic-line-normal-normal:      rgba(112, 115, 124, 0.22); /* coolNeutral-50 */
  --semantic-line-normal-neutral:     rgba(112, 115, 124, 0.16);
  --semantic-line-normal-alternative: rgba(112, 115, 124, 0.08);
  --semantic-line-solid-normal:       var(--atomic-coolNeutral-96);
  --semantic-line-solid-neutral:      var(--atomic-coolNeutral-97);
  --semantic-line-solid-alternative:  var(--atomic-coolNeutral-98);

  /* Status */
  --semantic-status-positive:   var(--atomic-green-50);
  --semantic-status-cautionary: var(--atomic-orange-50);
  --semantic-status-negative:   var(--atomic-red-50);

  /* Accent backgrounds (50-step) */
  --semantic-accent-bg-redOrange: var(--atomic-redOrange-50);
  --semantic-accent-bg-lime:      var(--atomic-lime-50);
  --semantic-accent-bg-cyan:      var(--atomic-cyan-50);
  --semantic-accent-bg-lightBlue: var(--atomic-lightBlue-50);
  --semantic-accent-bg-violet:    var(--atomic-violet-50);
  --semantic-accent-bg-purple:    var(--atomic-purple-50);
  --semantic-accent-bg-pink:      var(--atomic-pink-50);

  /* Accent foregrounds (used on neutral surfaces — deeper saturation) */
  --semantic-accent-fg-red:       var(--atomic-red-40);
  --semantic-accent-fg-redOrange: var(--atomic-redOrange-48);
  --semantic-accent-fg-orange:    var(--atomic-orange-39);
  --semantic-accent-fg-lime:      var(--atomic-lime-37);
  --semantic-accent-fg-green:     var(--atomic-green-40);
  --semantic-accent-fg-cyan:      var(--atomic-cyan-40);
  --semantic-accent-fg-lightBlue: var(--atomic-lightBlue-40);
  --semantic-accent-fg-blue:      var(--atomic-blue-45);
  --semantic-accent-fg-violet:    var(--atomic-violet-45);
  --semantic-accent-fg-purple:    var(--atomic-purple-40);
  --semantic-accent-fg-pink:      var(--atomic-pink-46);

  /* Inverse — for pill-on-dark, dark-mode-on-light slices, etc. */
  --semantic-inverse-primary:    var(--atomic-blue-60);
  --semantic-inverse-background: var(--atomic-coolNeutral-15);
  --semantic-inverse-label:      var(--atomic-coolNeutral-99);

  /* Fill — tinted opaque washes for chips, secondary surfaces */
  --semantic-fill-normal:      rgba(112, 115, 124, 0.08);
  --semantic-fill-strong:      rgba(112, 115, 124, 0.16);
  --semantic-fill-alternative: rgba(112, 115, 124, 0.05);

  /* Material — full-screen dim under modals */
  --semantic-material-dimmer: rgba(23, 23, 25, 0.52);

  /* Elevation — five shadow tiers + drop-filter equivalents + spread */
  --semantic-shadow-xsmall: 0px 1px 2px -1px rgba(23, 23, 23, 0.10);
  --semantic-shadow-small:  0px 2px 4px -2px rgba(23, 23, 23, 0.06),
                            0px 4px 6px -1px rgba(23, 23, 23, 0.06);
  --semantic-shadow-medium: 0px 4px 6px -2px rgba(23, 23, 23, 0.07),
                            0px 10px 15px -3px rgba(23, 23, 23, 0.07);
  --semantic-shadow-large:  0px 6px 10px -4px rgba(23, 23, 23, 0.08),
                            0px 16px 24px -6px rgba(23, 23, 23, 0.08);
  --semantic-shadow-xlarge: 0px 10px 15px -5px rgba(23, 23, 23, 0.10),
                            0px 24px 38px -10px rgba(23, 23, 23, 0.12);
  --semantic-shadow-spread-small:  0px 0px 60px 0px rgba(23, 23, 23, 0.10);
  --semantic-shadow-spread-medium: 0px 15px 75px 0px rgba(23, 23, 23, 0.16);

  /* =========================================================================
     SPACING SCALE — 4-step intervals up to 80px.
     ====================================================================== */
  --spacing-0:   0px;
  --spacing-0_5: 0.5px;
  --spacing-1:   1px;
  --spacing-2:   2px;
  --spacing-4:   4px;
  --spacing-6:   6px;
  --spacing-8:   8px;
  --spacing-10:  10px;
  --spacing-12:  12px;
  --spacing-14:  14px;
  --spacing-16:  16px;
  --spacing-20:  20px;
  --spacing-24:  24px;
  --spacing-32:  32px;
  --spacing-40:  40px;
  --spacing-48:  48px;
  --spacing-56:  56px;
  --spacing-64:  64px;
  --spacing-72:  72px;
  --spacing-80:  80px;

  /* =========================================================================
     RADIUS — directly from button/chip/card/text-field implementations.
     ====================================================================== */
  --radius-2:   2px;
  --radius-6:   6px;
  --radius-8:   8px;
  --radius-10:  10px;
  --radius-12:  12px; /* default card / text-field */
  --radius-16:  16px;
  --radius-20:  20px;
  --radius-pill: 1000px;

  /* =========================================================================
     OPACITY SCALE — used for token-level alpha mixing.
     ====================================================================== */
  --opacity-5:   0.05;
  --opacity-8:   0.08;
  --opacity-12:  0.12;
  --opacity-16:  0.16;
  --opacity-22:  0.22;
  --opacity-28:  0.28;
  --opacity-35:  0.35;
  --opacity-43:  0.43;
  --opacity-52:  0.52;
  --opacity-61:  0.61;
  --opacity-74:  0.74;
  --opacity-88:  0.88;
  --opacity-97:  0.97;

  /* =========================================================================
     BREAKPOINTS
     ====================================================================== */
  --bp-sm: 768px;
  --bp-md: 992px;
  --bp-lg: 1200px;
  --bp-xl: 1600px;

  /* =========================================================================
     TYPOGRAPHY — Families
     ====================================================================== */
  --font-family-wanted-sans: "Wanted Sans Variable", "Wanted Sans",
    "Pretendard JP Variable", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --font-family-pretendard: "Pretendard JP Variable",
    -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo",
    "Noto Sans KR", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;

  /* Variable axis weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    600; /* display/title variants step up to 700; see .h1/.display* below */
}

/* =========================================================================
   DARK THEME — opt-in by adding `data-theme="dark"` on <html> or <body>.
   ====================================================================== */
[data-theme="dark"] {
  --semantic-primary-normal: var(--atomic-blue-60);
  --semantic-primary-strong: var(--atomic-blue-55);
  --semantic-primary-heavy:  var(--atomic-blue-50);

  --semantic-label-normal:      var(--atomic-coolNeutral-99);
  --semantic-label-strong:      var(--atomic-common-100);
  --semantic-label-neutral:     rgba(194, 196, 200, 0.88);
  --semantic-label-alternative: rgba(174, 176, 182, 0.61);
  --semantic-label-assistive:   rgba(174, 176, 182, 0.28);
  --semantic-label-disable:     rgba(152, 155, 162, 0.16);

  --semantic-background-normal-normal:        var(--atomic-coolNeutral-15);
  --semantic-background-normal-alternative:   var(--atomic-coolNeutral-5);
  --semantic-background-elevated-normal:      var(--atomic-coolNeutral-17);
  --semantic-background-elevated-alternative: var(--atomic-coolNeutral-7);
  --semantic-background-transparent-normal:      rgba(33, 34, 37, 0.61);
  --semantic-background-transparent-alternative: rgba(33, 34, 37, 0.61);

  --semantic-interaction-inactive: var(--atomic-coolNeutral-40);
  --semantic-interaction-disable:  var(--atomic-coolNeutral-22);

  --semantic-line-normal-normal:      rgba(112, 115, 124, 0.32);
  --semantic-line-normal-neutral:     rgba(112, 115, 124, 0.28);
  --semantic-line-normal-alternative: rgba(112, 115, 124, 0.22);
  --semantic-line-solid-normal:       var(--atomic-coolNeutral-25);
  --semantic-line-solid-neutral:      var(--atomic-coolNeutral-23);
  --semantic-line-solid-alternative:  var(--atomic-coolNeutral-22);

  --semantic-status-positive:   var(--atomic-green-60);
  --semantic-status-cautionary: var(--atomic-orange-60);
  --semantic-status-negative:   var(--atomic-red-60);

  --semantic-inverse-primary:    var(--atomic-blue-50);
  --semantic-inverse-background: var(--atomic-common-100);
  --semantic-inverse-label:      var(--atomic-coolNeutral-10);

  --semantic-fill-normal:      rgba(112, 115, 124, 0.22);
  --semantic-fill-strong:      rgba(112, 115, 124, 0.28);
  --semantic-fill-alternative: rgba(112, 115, 124, 0.12);

  --semantic-material-dimmer: rgba(23, 23, 25, 0.74);
}

/* =========================================================================
   BASE & SEMANTIC TYPE SCALE
   The Typography component exposes 19 named variants. All sizes use rem
   (1rem = 16px). Letter-spacing is computed in em so it scales with size.
   ====================================================================== */
html {
  font-family: var(--font-family-wanted-sans);
  font-size: 16px;
  color: var(--semantic-label-normal);
  background: var(--semantic-background-normal-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { margin: 0; }
* { box-sizing: border-box; }

/* --- Display (giant marketing) --- */
.t-display1 { font-size: 3.5rem;   line-height: 4.5rem;   letter-spacing: -0.0319em; font-weight: var(--weight-regular); }
.t-display2 { font-size: 2.5rem;   line-height: 3.25rem;  letter-spacing: -0.0282em; font-weight: var(--weight-regular); }
.t-display3 { font-size: 2.25rem;  line-height: 3rem;     letter-spacing: -0.027em;  font-weight: var(--weight-regular); }

/* --- Title (page H1–H3) --- */
.t-title1   { font-size: 2rem;     line-height: 2.75rem;  letter-spacing: -0.0253em; font-weight: var(--weight-regular); }
.t-title2   { font-size: 1.75rem;  line-height: 2.375rem; letter-spacing: -0.0236em; font-weight: var(--weight-regular); }
.t-title3   { font-size: 1.5rem;   line-height: 2rem;     letter-spacing: -0.023em;  font-weight: var(--weight-regular); }

/* --- Heading (section) --- */
.t-heading1 { font-size: 1.375rem; line-height: 1.875rem; letter-spacing: -0.0194em; font-weight: var(--weight-regular); }
.t-heading2 { font-size: 1.25rem;  line-height: 1.75rem;  letter-spacing: -0.012em;  font-weight: var(--weight-regular); }

/* --- Headline (card titles, modals) --- */
.t-headline1 { font-size: 1.125rem;  line-height: 1.625rem; letter-spacing: -0.002em; font-weight: var(--weight-regular); }
.t-headline2 { font-size: 1.0625rem; line-height: 1.5rem;   letter-spacing: 0em;      font-weight: var(--weight-regular); }

/* --- Body --- */
.t-body1         { font-size: 1rem;     line-height: 1.5rem;   letter-spacing: 0.0057em; font-weight: var(--weight-regular); }
.t-body1-reading { font-size: 1rem;     line-height: 1.625rem; letter-spacing: 0.0057em; font-weight: var(--weight-regular); }
.t-body2         { font-size: 0.9375rem; line-height: 1.375rem;letter-spacing: 0.0096em; font-weight: var(--weight-regular); }
.t-body2-reading { font-size: 0.9375rem; line-height: 1.5rem;  letter-spacing: 0.0096em; font-weight: var(--weight-regular); }

/* --- Label (UI controls) --- */
.t-label1         { font-size: 0.875rem; line-height: 1.25rem;  letter-spacing: 0.0145em; font-weight: var(--weight-regular); }
.t-label1-reading { font-size: 0.875rem; line-height: 1.375rem; letter-spacing: 0.0145em; font-weight: var(--weight-regular); }
.t-label2         { font-size: 0.8125rem; line-height: 1.125rem; letter-spacing: 0.0194em; font-weight: var(--weight-regular); }

/* --- Caption (timestamps, micro copy) --- */
.t-caption1 { font-size: 0.75rem;   line-height: 1rem;     letter-spacing: 0.0252em; font-weight: var(--weight-regular); }
.t-caption2 { font-size: 0.6875rem; line-height: 0.875rem; letter-spacing: 0.0311em; font-weight: var(--weight-regular); }

/* --- Weight modifiers ---
   NOTE: display1-3 and title1-3 use 700 for "bold" (heavier impact). All
   other variants use 600. Mirror the source's getWeightMap exactly. */
.w-regular { font-weight: var(--weight-regular); }
.w-medium  { font-weight: var(--weight-medium); }
.w-bold    { font-weight: var(--weight-bold); }
.t-display1.w-bold,
.t-display2.w-bold,
.t-display3.w-bold,
.t-title1.w-bold,
.t-title2.w-bold,
.t-title3.w-bold { font-weight: 700; }

/* --- Semantic HTML defaults (so unstyled markup looks correct) --- */
h1 { @extend .t-title1; }
h2 { @extend .t-title3; }
h3 { @extend .t-heading1; }

/* utility */
.ellipsis-1 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.ellipsis-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }