/* =========================================================
   DS Seoul Design System
   Color + Type tokens
   Apple product-page DNA × Champagne Gold accent
   ========================================================= */

/* --- Pretendard (Korean) via CDN --- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

/* --- Inter as SF Pro fallback (SF Pro is not webfont-distributable) --- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---------- CORE PALETTE ---------- */
  --ds-black:        #000000;  /* immersive sections, Aqua FINE chapter */
  --ds-near-black:   #1d1d1f;  /* body text on light */
  --ds-gray-bg:      #f5f5f7;  /* informational sections, WELTEM chapter */
  --ds-white:        #ffffff;

  /* Champagne Gold — the ONLY accent */
  --ds-gold:         #C9A961;  /* base interactive */
  --ds-gold-dark:    #A88838;  /* links on light bg, hover */
  --ds-gold-bright:  #E0C176;  /* links on dark bg, hover */

  /* Kakao yellow — single exception, only for Kakao floating button */
  --ds-kakao:        #FEE500;

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND ---------- */
  --ds-fg-dark:      var(--ds-white);         /* text on black field */
  --ds-fg-light:     var(--ds-near-black);    /* text on light field */
  --ds-fg-muted-dark:  rgba(255,255,255,0.72);
  --ds-fg-muted-light: rgba(0,0,0,0.56);
  --ds-fg-label-dark:  rgba(255,255,255,0.48);
  --ds-fg-label-light: rgba(0,0,0,0.48);      /* 공급가 labels */

  --ds-hairline-dark:  rgba(255,255,255,0.12);
  --ds-hairline-light: rgba(0,0,0,0.1);

  /* ---------- SHADOW (one, max) ---------- */
  --ds-shadow: 3px 5px 30px 0px rgba(0,0,0,0.22);

  /* ---------- RADII ---------- */
  --ds-r-card:   12px;   /* cards, imagery containers */
  --ds-r-btn:    8px;    /* primary buttons */
  --ds-r-pill:   980px;  /* pills ONLY */
  --ds-r-xs:     5px;    /* tight chips */

  /* ---------- SPACING (Apple-ish rhythm) ---------- */
  --ds-s-1:  4px;
  --ds-s-2:  8px;
  --ds-s-3:  12px;
  --ds-s-4:  16px;
  --ds-s-5:  24px;
  --ds-s-6:  32px;
  --ds-s-7:  48px;
  --ds-s-8:  64px;
  --ds-s-9:  96px;   /* section top/bottom */
  --ds-s-10: 128px;  /* hero breathing */

  /* ---------- LAYOUT ---------- */
  --ds-container: 980px;         /* Apple content width */
  --ds-container-wide: 1440px;   /* outer bounds */
  --ds-nav-h: 48px;

  /* ---------- GLASS NAV ---------- */
  --ds-glass-bg: rgba(0,0,0,0.8);
  --ds-glass-blur: saturate(180%) blur(20px);

  /* ---------- TYPE FAMILIES ---------- */
  --ds-font-display: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --ds-font-text:    "SF Pro Text",    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --ds-font-kr:      "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ds-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE (display, english/numbers ≥20px) ---------- */
  /* All negative letter-spacing; max weight 700; no 800/900 */
  --ds-h1-size: 56px;  --ds-h1-lh: 1.07;  --ds-h1-tracking: -0.28px;  --ds-h1-weight: 600;
  --ds-h2-size: 40px;  --ds-h2-lh: 1.1;   --ds-h2-tracking: -0.22px;  --ds-h2-weight: 600;
  --ds-h3-size: 32px;  --ds-h3-lh: 1.12;  --ds-h3-tracking: -0.2px;   --ds-h3-weight: 600;
  --ds-h4-size: 24px;  --ds-h4-lh: 1.16;  --ds-h4-tracking: -0.15px;  --ds-h4-weight: 600;
  --ds-h5-size: 20px;  --ds-h5-lh: 1.2;   --ds-h5-tracking: -0.1px;   --ds-h5-weight: 600;

  /* price / spec numbers (SF Pro Display weight 600) */
  --ds-price-size: 40px; --ds-price-lh: 1.05; --ds-price-tracking: -0.2px; --ds-price-weight: 600;
  --ds-spec-size: 28px;  --ds-spec-lh: 1.1;   --ds-spec-tracking: -0.12px; --ds-spec-weight: 600;

  /* body (<20px → SF Pro Text / Pretendard body) */
  --ds-body-size: 17px;  --ds-body-lh: 1.47;  --ds-body-tracking: -0.374px; --ds-body-weight: 400;
  --ds-small-size: 14px; --ds-small-lh: 1.42; --ds-small-tracking: -0.2px;  --ds-small-weight: 400;
  --ds-label-size: 12px; --ds-label-lh: 1.33; --ds-label-tracking: -0.1px;  --ds-label-weight: 500;

  /* Korean body rhythm: loosen line-height, -0.02em tracking */
  --ds-kr-heading-lh: 1.15;  --ds-kr-heading-tracking: -0.02em;
  --ds-kr-body-lh:    1.7;   --ds-kr-body-tracking:    -0.02em;
}

/* =========================================================
   BASE
   ========================================================= */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  font-family: var(--ds-font-kr), var(--ds-font-text);
  font-size: var(--ds-body-size);
  line-height: var(--ds-kr-body-lh);
  letter-spacing: var(--ds-kr-body-tracking);
  color: var(--ds-fg-light);
  background: var(--ds-white);
}

/* =========================================================
   TYPE CLASSES (semantic)
   ========================================================= */

/* English/number display — SF Pro Display */
.ds-display,
.ds-h1, .ds-h2, .ds-h3, .ds-h4, .ds-h5,
.ds-price, .ds-spec-num, .ds-model {
  font-family: var(--ds-font-display);
  font-feature-settings: "ss01", "cv11";
}

.ds-h1 { font-size: var(--ds-h1-size); line-height: var(--ds-h1-lh); letter-spacing: var(--ds-h1-tracking); font-weight: var(--ds-h1-weight); }
.ds-h2 { font-size: var(--ds-h2-size); line-height: var(--ds-h2-lh); letter-spacing: var(--ds-h2-tracking); font-weight: var(--ds-h2-weight); }
.ds-h3 { font-size: var(--ds-h3-size); line-height: var(--ds-h3-lh); letter-spacing: var(--ds-h3-tracking); font-weight: var(--ds-h3-weight); }
.ds-h4 { font-size: var(--ds-h4-size); line-height: var(--ds-h4-lh); letter-spacing: var(--ds-h4-tracking); font-weight: var(--ds-h4-weight); }
.ds-h5 { font-size: var(--ds-h5-size); line-height: var(--ds-h5-lh); letter-spacing: var(--ds-h5-tracking); font-weight: var(--ds-h5-weight); }

.ds-price    { font-size: var(--ds-price-size); line-height: var(--ds-price-lh); letter-spacing: var(--ds-price-tracking); font-weight: var(--ds-price-weight); color: var(--ds-gold); }
.ds-spec-num { font-size: var(--ds-spec-size); line-height: var(--ds-spec-lh); letter-spacing: var(--ds-spec-tracking); font-weight: var(--ds-spec-weight); }
.ds-model    { font-family: var(--ds-font-display); font-weight: 600; letter-spacing: -0.02em; }

/* Korean heading — Pretendard, tighter line-height */
.ds-h1-kr, .ds-h2-kr, .ds-h3-kr, .ds-h4-kr {
  font-family: var(--ds-font-kr);
  font-weight: 600;
  line-height: var(--ds-kr-heading-lh);
  letter-spacing: var(--ds-kr-heading-tracking);
}
.ds-h1-kr { font-size: var(--ds-h1-size); }
.ds-h2-kr { font-size: var(--ds-h2-size); }
.ds-h3-kr { font-size: var(--ds-h3-size); }
.ds-h4-kr { font-size: var(--ds-h4-size); }

/* Body */
.ds-body {
  font-family: var(--ds-font-kr), var(--ds-font-text);
  font-size: var(--ds-body-size); line-height: var(--ds-body-lh); letter-spacing: var(--ds-body-tracking);
  font-weight: var(--ds-body-weight);
}
.ds-body-kr {
  font-family: var(--ds-font-kr);
  font-size: var(--ds-body-size);
  line-height: var(--ds-kr-body-lh);
  letter-spacing: var(--ds-kr-body-tracking);
  font-weight: 400;
}
.ds-small  { font-size: var(--ds-small-size); line-height: var(--ds-small-lh); letter-spacing: var(--ds-small-tracking); }
.ds-label  { font-size: var(--ds-label-size); line-height: var(--ds-label-lh); letter-spacing: var(--ds-label-tracking); font-weight: 500; text-transform: none; }

/* Price label (14px gray, NO strikethrough) */
.ds-price-label {
  font-family: var(--ds-font-kr);
  font-size: 14px;
  color: var(--ds-fg-label-light);
  text-decoration: none;
  letter-spacing: -0.02em;
}

/* Link styles per surface */
.ds-link-dark  { color: var(--ds-gold-bright); text-decoration: none; }
.ds-link-dark:hover  { text-decoration: underline; }
.ds-link-light { color: var(--ds-gold-dark);  text-decoration: none; }
.ds-link-light:hover { text-decoration: underline; }

/* Section fields */
.ds-field-black { background: var(--ds-black); color: var(--ds-fg-dark); }
.ds-field-light { background: var(--ds-gray-bg); color: var(--ds-fg-light); }

/* Responsive scale-down */
@media (max-width: 1024px) {
  :root {
    --ds-h1-size: 40px; --ds-h2-size: 32px; --ds-h3-size: 26px; --ds-h4-size: 22px;
    --ds-price-size: 34px;
  }
}
@media (max-width: 480px) {
  :root {
    --ds-h1-size: 28px; --ds-h2-size: 24px; --ds-h3-size: 22px; --ds-h4-size: 20px;
    --ds-price-size: 28px; --ds-body-size: 16px;
    --ds-s-9: 64px; --ds-s-10: 80px;
  }
}