/* =========================================================
   다쏜다 (Dasonda) Design System — Foundations
   Korean internet/TV/water-purifier rental consultation brand
   ========================================================= */

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

/* ---------- Paperlogy (brand display, user-provided) ---------- */
@font-face { font-family: 'Paperlogy'; src: url('fonts/Paperlogy-1Thin.ttf')       format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('fonts/Paperlogy-2ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('fonts/Paperlogy-3Light.ttf')      format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('fonts/Paperlogy-4Regular.ttf')    format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('fonts/Paperlogy-5Medium.ttf')     format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('fonts/Paperlogy-6SemiBold.ttf')   format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('fonts/Paperlogy-7Bold.ttf')       format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('fonts/Paperlogy-8ExtraBold.ttf')  format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('fonts/Paperlogy-9Black.ttf')      format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ---------- CORE PALETTE ---------- */
  /* Dark navy anchors the brand — authoritative, trustworthy, telco-adjacent */
  --navy-950: #050a1f;   /* deepest — hero bg */
  --navy-900: #0a1330;   /* primary dark bg */
  --navy-800: #111c45;   /* elevated surface on dark */
  --navy-700: #1a2a63;   /* cards on dark */
  --navy-600: #25397f;

  /* Electric blue — the "action" color, trustworthy + energetic */
  --blue-700: #1747d6;
  --blue-600: #2563ff;   /* primary brand blue */
  --blue-500: #3b82ff;
  --blue-400: #5ea0ff;
  --blue-300: #9bc2ff;
  --blue-100: #e4eeff;   /* tinted bg blocks on light */
  --blue-50:  #f2f6ff;

  /* Gold — benefit/urgency accent. Warm, "jackpot" feel */
  --gold-700: #b8860b;
  --gold-600: #d99a1c;
  --gold-500: #f2b233;   /* primary gold */
  --gold-400: #ffc857;
  --gold-300: #ffdb8a;
  --gold-100: #fff3d6;

  /* Urgency red — limited-time, countdown */
  --red-600:  #e1263b;
  --red-500:  #ff3b4c;
  --red-100:  #ffe0e3;

  /* Trust green — checkmarks, confirmations, "O" vs "X" in compare tables */
  --green-600: #10a35a;
  --green-500: #1dbf6c;
  --green-100: #dff7e8;

  /* Neutrals */
  --white:     #ffffff;
  --gray-50:   #f7f8fb;
  --gray-100:  #eef1f6;
  --gray-200:  #dde2ec;
  --gray-300:  #c3cad8;
  --gray-400:  #959fb3;
  --gray-500:  #6b7487;
  --gray-600:  #4a5162;
  --gray-700:  #2f3544;
  --gray-800:  #1b1f2a;
  --gray-900:  #0f121a;

  /* ---------- SEMANTIC TOKENS ---------- */

  /* Backgrounds */
  --bg-page:        var(--white);
  --bg-subtle:      var(--gray-50);
  --bg-tint:        var(--blue-50);
  --bg-dark:        var(--navy-900);
  --bg-dark-deeper: var(--navy-950);
  --bg-card:        var(--white);
  --bg-card-dark:   var(--navy-800);

  /* Foregrounds */
  --fg-1:           var(--gray-900);  /* primary text on light */
  --fg-2:           var(--gray-600);  /* secondary */
  --fg-3:           var(--gray-400);  /* muted / captions */
  --fg-on-dark-1:   var(--white);
  --fg-on-dark-2:   #c9d1e3;
  --fg-on-dark-3:   #8b94ad;

  /* Brand */
  --brand:          var(--blue-600);
  --brand-hover:    var(--blue-700);
  --brand-press:    #1338b0;
  --accent:         var(--gold-500);  /* benefit highlighter */
  --accent-hover:   var(--gold-600);
  --urgent:         var(--red-500);

  /* Borders */
  --border-1:       var(--gray-200);
  --border-2:       var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-on-dark: rgba(255, 255, 255, 0.12);

  /* Status */
  --success:        var(--green-500);
  --danger:         var(--red-500);
  --warning:        var(--gold-500);

  /* ---------- TYPE ---------- */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic',
               'Segoe UI', Roboto, sans-serif;
  --font-display: 'Paperlogy', 'Pretendard Variable', Pretendard, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale — mobile-first but scales up on desktop */
  --fs-caption:   12px;
  --fs-small:     13px;
  --fs-body:      15px;
  --fs-body-lg:   17px;
  --fs-lead:      19px;
  --fs-h5:        18px;
  --fs-h4:        22px;
  --fs-h3:        clamp(24px, 3.4vw, 30px);
  --fs-h2:        clamp(28px, 4.6vw, 40px);
  --fs-h1:        clamp(34px, 6.8vw, 56px);
  --fs-display:   clamp(40px, 9vw, 76px);

  --lh-tight:     1.15;
  --lh-snug:      1.3;
  --lh-normal:    1.5;
  --lh-loose:     1.7;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* ---------- SPACING ---------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   32px;
  --sp-8:   40px;
  --sp-9:   48px;
  --sp-10:  64px;
  --sp-11:  80px;
  --sp-12:  96px;
  --sp-13:  120px;

  /* Section vertical padding — generous on mobile landing pages */
  --section-py-sm: 56px;
  --section-py-md: 80px;
  --section-py-lg: 112px;

  /* ---------- RADII ---------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs:  0 1px 2px rgba(10, 19, 48, 0.06);
  --shadow-sm:  0 2px 6px rgba(10, 19, 48, 0.08);
  --shadow-md:  0 6px 18px rgba(10, 19, 48, 0.10);
  --shadow-lg:  0 14px 36px rgba(10, 19, 48, 0.14);
  --shadow-xl:  0 28px 64px rgba(10, 19, 48, 0.20);
  --shadow-cta: 0 10px 28px rgba(37, 99, 255, 0.38);
  --shadow-gold: 0 10px 28px rgba(242, 178, 51, 0.42);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms;
  --dur-med:     220ms;
  --dur-slow:    400ms;

  /* ---------- LAYOUT ---------- */
  --container-sm: 720px;   /* landing content width */
  --container-md: 880px;
  --container-lg: 1080px;
  --header-h:     60px;
  --sticky-cta-h: 72px;
}

/* =========================================================
   BASE
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;   /* Korean word-breaking */
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* =========================================================
   TYPOGRAPHY PRIMITIVES
   ========================================================= */

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
}

.h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}

.h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  font-weight: var(--fw-medium);
}

.body    { font-size: var(--fs-body);    line-height: var(--lh-normal); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-normal); }
.small   { font-size: var(--fs-small);   line-height: var(--lh-normal); color: var(--fg-2); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-3); letter-spacing: var(--tracking-wide); text-transform: none; }
.eyebrow {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--brand);
  text-transform: uppercase;
}
.highlight { color: var(--accent); font-weight: var(--fw-extrabold); }
.highlight-blue { color: var(--brand); font-weight: var(--fw-extrabold); }

/* =========================================================
   COMPONENT TOKENS (baseline)
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  border-radius: var(--r-md);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary {
  background: var(--brand);
  color: var(--white);
  box-shadow: var(--shadow-cta), var(--shadow-inset-top);
}
.btn--primary:hover { background: var(--brand-hover); }
.btn--primary:active { background: var(--brand-press); }

.btn--gold {
  background: linear-gradient(180deg, var(--gold-400) 0%, var(--gold-500) 100%);
  color: var(--navy-900);
  box-shadow: var(--shadow-gold), var(--shadow-inset-top);
}
.btn--gold:hover { filter: brightness(1.05); }

.btn--ghost {
  background: transparent;
  color: var(--fg-1);
  border: 1.5px solid var(--border-2);
}
.btn--ghost:hover { border-color: var(--fg-1); }

.btn--lg { padding: 18px 28px; font-size: 18px; border-radius: var(--r-lg); }
.btn--block { width: 100%; }