/* =========================================================
   디자인 토큰 (CSS custom properties)

   ★자사몰 `fam4store/public/css/tokens.css` 를 그대로 이식했다(계획 §E-1 · §E-4).
     색·타이포·반지름이 두 사이트에서 같아야 손님이 같은 곳으로 인지한다.

   ★★이 사이트는 **라이트 전용**이다(계획 §E-4 · 정본 §1-13).
     전역 표준 `~/.claude/design.md` §1 은 「다크 기본」이지만, 이 사이트는
     *"자사몰을 참고한다"* 가 우선한다고 계획이 명시했다. ⛔`.dark` 토큰을
     덧붙이지 말 것 — 반쪽만 있는 다크는 없는 것보다 나쁘다.
   ========================================================= */
:root {
    --brand: #4F46E5;
    --brand-dark: #3B30C7;
    --brand-soft: #EEF2FF;
    --accent: #F59E0B;
    --accent-soft: #FEF3C7;
    --urgent: #EF4444;
    --urgent-soft: #FEE2E2;
    --safe: #10B981;
    --safe-soft: #D1FAE5;
    --new: #06B6D4;
    --new-soft: #CFFAFE;
    --bg: #F8FAFC;
    --card: #FFFFFF;
    --text: #0F172A;
    --muted: #64748B;
    --border: #E2E8F0;
    --radius: 14px;
    --radius-sm: 10px;
    --footer-bg: #1E293B;
    --footer-text: #94A3B8;
    --footer-heading: #F1F5F9;
    --footer-border: #334155;

    /* sticky 헤더(.topbar) 높이. position:sticky 요소의 top offset 계산에 쓴다.
       기본값(폴백)이고, 실제 높이는 header.js 가 헤더를 실측해
       documentElement 인라인 스타일로 덮어쓴다.
       → 화면폭·모바일 햄버거 펼침으로 헤더가 높아져도 sticky 위치가 안 어긋난다. */
    --topbar-h: 4.5rem;

    /* ★★폼 라벨 ↔ 입력칸 세로 간격 — 전역 표준 `~/.claude/design.md` §6-1.
       하한이 **10px** 이다. `html{font-size:17.5px}` 이므로 0.6rem = 10.5px.

       왜 이 값인가: 입력칸 포커스 링이 `box-shadow: 0 0 0 3px` = 3px 라,
       10.5 − 3 = **7.5px** 이 라벨과 링 사이에 남는다(요건 ≈6px 이상).
       ⛔0.45rem(7.9px)·0.5rem(8.75px)으로 줄이지 말 것 — 링이 라벨에 닿는다.
       ⛔링을 줄여서 회피하지 말 것. 간격으로 푼다.
       ★자사몰 원본이 0.45rem 이었다 — 옮겨오는 코드를 그대로 믿지 말 것. */
    --label-gap: 0.6rem;
}

html { font-size: 17.5px; }
* { letter-spacing: -0.012em; }
body {
    font-family: 'Pretendard', -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}