/* ==========================================================================
   01-tokens.css — 디자인 토큰 (Global Design Tokens)
   --------------------------------------------------------------------------
   toss.tech 레이아웃/컬러/타이포 측정값을 기반으로 한 전역 토큰.
   모든 컴포넌트 CSS는 이 변수만 참조하므로, 여기값만 바꿔도 사이트 전체가 변경됨.

   ▶ WordPress 이관 완료 (2026-09-23)
     - --color-*         → GeneratePress [외모 > 사용자 정의 > 색상 > 글로벌 컬러]
                           (아래 :root 에 정의하지 않는다. GP 가 동일 슬러그로 출력)
     - 폰트 패밀리       → GP [외모 > 폰트 라이브러리] + [타이포그래피]
                           (--font-family 는 GP 폰트 변수를 참조)
     - --fs-* / 간격 등  → 이 파일이 소스 (컴포넌트 전용 스케일)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     1. 컬러 (Colors)
     ------------------------------------------------------------------
     색상 토큰은 GeneratePress 글로벌 컬러(사용자 정의 > 색상)에서 관리한다.
     GP 가 :root { --color-primary: #3182f6; ... } 를 동일 슬러그로 출력하므로
     여기서는 정의하지 않는다. (커스터마이저에서 색을 바꾸면 전체 반영됨)
     GP 표준 슬러그 매핑: accent=color-primary, contrast=text-heading,
     contrast-2=text-strong, base=bg-muted, base-2=bg-subtle, base-3=bg-default
  ------------------------------------------------------------------ */

  /* 그림자(시맨틱 단일 값) — 컬러 팔레트 대상 아님, 여기서 관리 */
  --shadow-card-hover: 0 16px 22.4px 4.8px rgba(0, 0, 33, 0.07),
                       0 3.2px 16px 0 rgba(0, 0, 33, 0.05),
                       0 0 1px 0 rgba(0, 0, 33, 0.07);
  --shadow-popup: 0 2px 30px 0 rgba(0, 27, 55, 0.1);

  /* ------------------------------------------------------------------
     2. 타이포그래피 (Typography)
     ------------------------------------------------------------------
     폰트 패밀리는 GP 폰트 라이브러리 'Pretendard Variable' 변수를 참조한다.
     (외모 > 폰트 라이브러리 / 외모 > 사용자 정의 > 타이포그래피)
     타입 스케일은 rem 단위 — GP 타이포그래피의 'HTML' 요소 폰트 크기가
     전체 스케일을 비례 조절한다. (16px 기준 환산값)
  ------------------------------------------------------------------ */
  /* 폰트 패밀리/크기/굵기/행간은 GP 타이포그래피가 담당한다 */

/* ------------------------------------------------------------------
     3. 레이아웃 (Layout)
     ------------------------------------------------------------------ */
  --header-height: 60px;

  --container-main:   1024px;  /* 헤더/본문 목록/히어로 공통 컨테이너 */
  --container-article:740px;   /* 아티클 상세 본문 컬럼 (내부 700px) */
  --container-footer: 1064px;  /* 푸터 컨테이너 */
  --sidebar-width:    300px;   /* 우측 사이드바 폭 */

  --gutter-page: 60px;         /* 페이지 좌우 패딩 (태블릿 40 / 모바일 24) */
  --gutter-section: 76px;      /* 섹션 간 세로 간격 */

  /* ------------------------------------------------------------------
     4. 모서리/간격/모션 (Radius · Spacing · Motion)
     ------------------------------------------------------------------ */
  --radius-xs:   6px;
  --radius-sm:   8px;          /* 버튼/배지 */
  --radius-md:   12px;         /* 썸네일 */
  --radius-lg:   16px;         /* 히어로 이미지 */
  --radius-xl:   20px;         /* 뉴스레터/댓글 박스 */
  --radius-2xl:  24px;         /* 시리즈/사이드바 카드 */
  --radius-full: 999px;        /* 필/원형 */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  54px;            /* 목록 아이템 간격(태블릿 32) */
  --space-9:  64px;            /* 아이템 텍스트-썸네일 간격 */
  --space-10: 76px;

  --ease-out: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.2s ease;
  --transition-media: 0.3s ease;

  /* 반응형 브레이크포인트 (미디어쿼리에서 사용) */
  --bp-tablet: 1024px;
  --bp-mobile: 768px;
}