/* =============================================================
   고늘스토어 디자인 토큰 (Design Tokens)
   -------------------------------------------------------------
   테마/디자인 변경의 "단일 진입점".
   색·타이포·간격·라운드·그림자를 여기서만 정의하고,
   style.css 의 컴포넌트들은 이 토큰만 참조한다.
   → 테마 교체 = 이 파일 수정. (style.css 는 거의 손대지 않음)

   현재 테마: Naver Light (네이버 스마트스토어 톤 — 화이트 + 네이버 그린)
   ============================================================= */

:root {
  /* ---- 색: 라이트 베이스 (네이버 스마트스토어 톤) -------------- */
  --bg:            #ffffff;   /* 페이지 배경(화이트) */
  --surface:       #ffffff;   /* 카드/패널 */
  --surface-2:     #f5f6f7;   /* 썸네일/플레이스홀더(라이트 그레이) */
  --surface-3:     #eceef1;   /* 호버/입력 */
  --line:          #ebedf0;   /* 경계선 */
  --line-strong:   #d5d8dd;

  /* 라이트 위 텍스트 (토큰명은 style.css 호환 위해 유지) */
  --on-dark:       #1f2024;   /* 본문/제목(잉크) */
  --on-dark-soft:  #5b5f66;   /* 보조 */
  --on-dark-mute:  #8a8f98;   /* 캡션/희미 */

  /* ---- 색: 라이트 패널 (상세/404 등 본문 영역) -------------- */
  --surface-light: #ffffff;
  --ink:           #1f2024;
  --ink-soft:      #5b5f66;
  --line-light:    #ebedf0;

  /* ---- 색: 포인트 = 네이버 그린 ------------------------------ */
  --accent:        #03c75a;   /* 네이버 그린 — 라벨/링크/포인트 */
  --accent-strong: #02a94d;   /* 진한 그린 — 호버 */

  /* ---- 색: 주의/경고(앰버) — 제한·불가 안내 ------------------ */
  --warn-bg:       #fff7ed;
  --warn-line:     #fed7aa;
  --warn-ink:      #c2410c;

  /* ---- 버튼: 1차 CTA = 네이버 그린 -------------------------- */
  --btn-bg:        #03c75a;
  --btn-ink:       #ffffff;
  --btn-bg-hover:  #02b350;

  /* ---- 타이포 ----------------------------------------------- */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-hero:    clamp(2.4rem, 6.5vw, 4.4rem);
  --fs-display: clamp(1.8rem, 4vw, 2.6rem);
  --fs-h2:      clamp(1.5rem, 2.6vw, 2rem);
  --fs-lead:    clamp(1.02rem, 1.4vw, 1.18rem);
  --lh-tight:   1.12;
  --ls-tight:   -0.03em;

  /* ---- 간격 ------------------------------------------------- */
  --space-section: clamp(2.5rem, 5vw, 4.5rem);  /* 섹션 세로 패딩 */
  --gap:           clamp(1rem, 2vw, 1.75rem);
  --container:     1200px;
  --gutter:        1.25rem;

  /* ---- 라운드 / 그림자 -------------------------------------- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow:    0 16px 40px -24px rgba(15, 23, 42, 0.22);
  --shadow-sm: 0 8px 20px -14px rgba(15, 23, 42, 0.18);

  /* ---- 모션 ------------------------------------------------- */
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:   0.28s;
}