/* ─────────────────────────────────────────────────────────────
   DANOVI — Colors & Type foundations
   Source: reference/project/danovi-home-logo.html (:root + base styles)
   Logo colors sampled from the embedded logo PNG.
   ───────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap");

:root{
  /* ── Base palette (lifted verbatim from site :root) ── */
  --bg:#ffffff;          /* page background */
  --ink:#16181a;         /* primary text, solid buttons, underlines */
  --ink-2:#5b6166;       /* secondary text, nav, captions */
  --line:#e7e6e3;        /* hairlines, header border on scroll, footer rule */
  --paper:#f6f5f2;       /* warm off-white: thumb bg, ghost hover */
  --accent:#8a6a4b;      /* warm bronze — media tone / legacy accent */
  --black:#000000;       /* solid button hover */

  /* ── Brand mark (sampled from logo) ── */
  --brand-black:#0d0c0c;
  --brand-red:#ee4028;   /* offset "shadow" sheet behind the D */
  --red:var(--brand-red);
  --red-deep:#cf341f;    /* pressed / on-light text use */
  --red-wash:rgba(238,64,40,.10);

  /* ── DANOVI 전자책《개발자 없이 홈페이지를 만든다고?》 — 상품 고유 팔레트. PDF에서 추출 ── */
  --ebook-cream:#fdf5e6;   /* 표지·내지 배경 */
  --ebook-green:#2f5140;   /* 액센트 (딥 포레스트) */
  --ebook-green-deep:#244133;
  --ebook-paper:#e1dace;   /* 표·구분선 */
  --ebook-warmgray:#5a544c;
  --ebook-ink:#111111;

  /* ── Media / placeholder tones (thumb gradients t1–t4, hero fallback) ── */
  --tone-umber-1:#2f2b26; --tone-umber-2:#6b5a46; --tone-umber-3:#a08a6d;
  --tone-sand-1:#e8e4dd;  --tone-sand-2:#cfc6b8;  --tone-sand-3:#9d9282;
  --tone-slate-1:#1d2023; --tone-slate-2:#3b4247; --tone-slate-3:#707a80;
  --tone-linen-1:#f1ece4; --tone-linen-2:#ded2c0; --tone-linen-3:#b9a68c;
  --tone-stage-1:#1b1a18; --tone-stage-2:#2a2724; --tone-stage-3:#161513;
  --tone-stage-glow-a:#3c3733; --tone-stage-glow-b:#6d5b49;

  /* ── Semantic aliases ── */
  --accent-point:var(--red);
  --fg1:var(--ink);
  --fg2:var(--ink-2);
  --fg-inverse:#ffffff;
  --surface:var(--bg);
  --surface-2:var(--paper);
  --surface-dark:#111111;   /* .stage */
  --border:var(--line);
  --border-strong:var(--ink);
  --header-glass:rgba(255,255,255,.82);

  /* ── Type ── */
  --font-sans:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-bold:700;
  --lh-body:1.7;

  --fs-display:clamp(30px,5.4vw,60px);   /* h1 */
  --fs-h2:clamp(20px,2.4vw,27px);
  --fs-h3:15.5px;                        /* card title */
  --fs-lead:clamp(15px,1.5vw,17.5px);    /* hero sub */
  --fs-stage:clamp(14px,1.6vw,18px);     /* copy over media */
  --fs-nav:14.5px;
  --fs-btn:14.5px;
  --fs-body:14px;
  --fs-caption:13.5px;
  --fs-small:13px;
  --fs-eyebrow:12px;

  --ls-display:-.02em;
  --ls-h2:-.01em;
  --ls-eyebrow:.34em;
  --ls-logo:.22em;

  /* ── Layout / spacing ── */
  --max:1240px;
  --gutter:32px; --gutter-m:20px;
  --header-h:72px;
  --sec-pad:104px; --sec-pad-m:72px;
  --hero-pad-top:170px; --hero-pad-bottom:96px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:26px;
  --sp-7:34px; --sp-8:44px; --sp-9:64px; --sp-10:96px;

  /* ── Radii ── */
  --r-thumb:4px;
  --r-stage:6px;
  --r-pill:999px;

  /* ── Motion ── */
  --ease-out-expo:cubic-bezier(.22,1,.36,1);   /* rise, reveal, thumb zoom */
  --ease-std:cubic-bezier(.4,0,.2,1);          /* nav underline */
  --dur-fast:.2s; --dur-btn:.24s; --dur-line:.32s; --dur-reveal:.75s; --dur-rise:.9s;
}

/* ── Semantic element styles ── */
.dn-body, body.dn{font-family:var(--font-sans);font-weight:400;line-height:var(--lh-body);color:var(--fg1);background:var(--bg);-webkit-font-smoothing:antialiased}
.dn-eyebrow{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);color:var(--fg2);text-transform:uppercase}
.dn-h1{font-size:var(--fs-display);font-weight:700;line-height:1.28;letter-spacing:var(--ls-display)}
.dn-h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:var(--ls-h2);line-height:1.4}
.dn-h3{font-size:var(--fs-h3);font-weight:500;letter-spacing:.01em}
.dn-lead{font-size:var(--fs-lead);color:var(--fg2);line-height:1.7}
.dn-p{font-size:var(--fs-body);color:var(--fg2)}
.dn-caption{font-size:var(--fs-caption);color:var(--fg2)}
.dn-small{font-size:var(--fs-small);color:var(--fg2)}
.dn-stage-copy{font-size:var(--fs-stage);font-weight:300;letter-spacing:.01em;line-height:1.6;color:#fff}
.dn-logo-word{font-size:19px;font-weight:700;letter-spacing:var(--ls-logo)}