/* ============================================================
   DUDRIM 두드림 / 嘟嘟林  ·  Brand Foundations
   morn.co.kr-style: white base · deep-red point · Pretendard
   Chinese hanzi fallback: Noto Sans SC (CDN)
   ============================================================ */

/* Chinese-hanzi sans fallback (Pretendard lacks Chinese ideographs) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

/* Pretendard (brand font) — dynamic-subset woff2 via CDN.
   Loads only the glyphs each page uses (tens of KB), instead of a 6.5MB local TTF. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

:root {
  /* ---- Brand point color (deep red) ---- */
  --red:        #C8102E;   /* deep food/中華 red (morn-style point) */
  --red-deep:   #A00C24;
  --red-soft:   #FBEAED;
  --gold:       #C8A45C;   /* minor accent */

  /* ---- storage-badge accents (functional only) ---- */
  --green:      #4F8A3D;
  --green-deep: #3C6B2E;
  --green-soft: #EFF4EB;

  /* ---- Neutrals ---- */
  --ink:        #242424;   /* primary text */
  --ink-2:      #4B5563;
  --ink-3:      #6B7280;   /* secondary gray */
  --line:       #E5E7EB;
  --paper:      #FFFFFF;   /* base background */
  --paper-2:    #F8F8F8;   /* section divider */
  --dark:       #1A1A1A;   /* footer / dark sections */
  --dark-2:     #111111;   /* hero */
  --white:      #FFFFFF;

  /* ---- Semantic ---- */
  --bg:         var(--paper);
  --surface:    var(--white);
  --fg:         var(--ink);
  --fg-muted:   var(--ink-3);
  --accent:     var(--red);

  /* ---- Type families (Pretendard everywhere, morn-style) ---- */
  --serif: "Pretendard Variable", "Pretendard", "Noto Sans SC", system-ui, sans-serif;  /* headings (heavy sans) */
  --sans:  "Pretendard Variable", "Pretendard", "Noto Sans SC", system-ui, sans-serif;  /* UI + body */

  /* ---- Radii / elevation ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(17,17,17,.05), 0 2px 8px rgba(17,17,17,.05);
  --shadow-md: 0 8px 24px rgba(17,17,17,.08), 0 2px 6px rgba(17,17,17,.04);
  --shadow-lg: 0 24px 60px rgba(17,17,17,.14);

  /* ---- Spacing scale ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
}

/* ---- Type roles ---- */
.t-display { font-family: var(--serif); font-weight: 900; line-height: 1.05; letter-spacing: -.01em; }
.t-h1      { font-family: var(--serif); font-weight: 800; line-height: 1.1;  }
.t-h2      { font-family: var(--sans);  font-weight: 900; line-height: 1.15; letter-spacing: -.01em; }
.t-eyebrow { font-family: var(--sans);  font-weight: 700; letter-spacing: .22em; text-transform: uppercase; font-size: 12px; }
.t-body    { font-family: var(--sans);  font-weight: 400; line-height: 1.75; }
.t-label   { font-family: var(--sans);  font-weight: 700; letter-spacing: .01em; }