/* ==========================================================================
   tokens.css — 디자인 토큰만 모아둔 파일 (§4)
   값의 근거는 주석으로 남긴다. 하드코딩 색상은 style.css에서 쓰지 않는다.
   ========================================================================== */

:root {
  /* --- Typeface -----------------------------------------------------------
     이 세 줄만 바꾸면 사이트 전체 서체가 바뀐다 (§3). */
  --font-logo:    "Bodoni Moda", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-display: "Jost", "Poppins", "Pretendard Variable", "Segoe UI", Roboto, "Malgun Gothic", sans-serif;
  --font-body:    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

  /* --- Color --------------------------------------------------------------
     흑 / 백 / 회색 3색만 쓴다. 포인트 컬러 없음 (§14). */
  --c-bg:      #FFFFFF;
  --c-ink:     #000000;
  --c-band:    #F1F1F1;   /* 회색 밴드 */
  --c-meta:    #767676;   /* 날짜 · 부가 정보 — #FFF 대비 4.54:1 */
  --c-muted:   #888888;   /* 오버레이 메뉴 비활성 — #000 대비 5.93:1 */
  --c-line:    #E5E5E5;
  --c-invert:  #FFFFFF;
  --c-code-bg: #F8F8F8;

  /* --- Layout ------------------------------------------------------------- */
  --container:    1030px;  /* 콘텐츠 컬럼 폭 */
  --container-rd: 720px;   /* 상세 페이지 본문 폭 — 읽기 편한 길이 */
  --gutter:       clamp(20px, 4vw, 48px);
  --gap:          30px;    /* 카드 간격 */
  --header-h:     219px;   /* 데스크톱 헤더 높이 */
  --header-h-sm:  120px;   /* 모바일 헤더 높이 */

  /* --- Section rhythm ----------------------------------------------------- */
  --sec-pt: clamp(64px, 9vw, 120px);
  --sec-pb: clamp(64px, 9vw, 120px);

  /* --- Type scale (§4 스케일 표) ------------------------------------------- */
  --t-logo-1:    clamp(28px, 4.2vw, 58px);
  --t-logo-2:    clamp(13px, 1.4vw, 22px);
  --t-nav:       16px;
  --t-sec-title: clamp(32px, 4.2vw, 48px);
  --t-hero:      clamp(26px, 3.8vw, 48px);
  --t-card-lg:   clamp(22px, 2.4vw, 32px);
  --t-card-sm:   20px;
  --t-label:     14px;
  --t-meta:      14px;
  --t-gnb:       clamp(38px, 6vw, 60px);

  /* 섹션 헤더 행의 고정 높이. LAB 회색 밴드 위치 계산에 쓰이므로 고정값이 필요하다. */
  --sec-title-h: clamp(40px, 4.2vw, 48px);

  /* --- LAB 캐러셀 (밴드 오프셋 계산용) -------------------------------------- */
  --lab-card-w: 235px;
  --lab-img-h:  calc(var(--lab-card-w) * 10 / 16);  /* 16:10 → 146.875px */

  /* --- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .3s;
}

@media (max-width: 1023px) {
  :root { --header-h: var(--header-h-sm); }
}