/* ========================================================================== 01-tokens.css — 디자인 토큰 (Global Design Tokens) -------------------------------------------------------------------------- 모든 토큰은 WordPress 전역 스타일 변수( --wp--preset--* )에 연결되어 있다. - [외모 > 편집기 > 스타일] 패널에서 색상/폰트/크기를 바꾸면 커스텀 컴포넌트까지 전파된다. - var() 의 두 번째 값은 KDR 디폴트(폴백)이다 — 전역 스타일을 건드리지 않는 한 항상 KDR 스타일이 유지된다. - 폰트 크기 프리셋 slug: micro/caption/small/meta/body/medium/large/x-large/ xx-large/title/display (theme.json 참고) ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. 컬러 (Colors) — theme.json 팔레트와 1:1 연결 ------------------------------------------------------------------ */ /* 브랜드 */ --color-primary: var(--wp--preset--color--primary, #3182f6); --color-primary-hover: var(--wp--preset--color--primary-hover, #2272eb); --color-primary-active: #1b64da; /* 버튼 active (고정) */ --color-primary-bg: var(--wp--preset--color--primary-bg, #e8f3ff); --color-primary-bg-hover: #90c2ff; /* 텍스트 (TDS grey 스케일) */ --text-heading: var(--wp--preset--color--heading, #191f28); --text-strong: var(--wp--preset--color--body, #333d4b); --text-body: var(--wp--preset--color--secondary, #4e5968); --text-secondary: var(--wp--preset--color--muted, #6b7684); --text-tertiary: var(--wp--preset--color--meta, #8b95a1); --text-disabled: var(--wp--preset--color--disabled, #b0b8c1); /* 배경 */ --bg-default: var(--wp--preset--color--base, #ffffff); --bg-subtle: var(--wp--preset--color--surface-subtle, #f9fafb); --bg-muted: var(--wp--preset--color--surface, #f2f4f6); /* 보더 */ --border-light: var(--wp--preset--color--border, #e5e8eb); --border-medium: var(--wp--preset--color--border-dark, #d1d6db); /* 상태/강조 (디자인 전용 고정값 — 팔레트와 무관) */ --color-danger: #f04452; --color-danger-text: #e42939; --color-header-text: rgba(3, 18, 40, 0.7); --color-header-hover-bg: rgba(0, 23, 51, 0.02); --color-header-muted-bg: rgba(2, 32, 71, 0.05); --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) — theme.json 프리셋과 1:1 연결 [스타일 > 타이포그래피] 에서 본문/헤딩 폰트·크기·굵기를 바꾸면 이 토큰을 참조하는 모든 컴포넌트에 반영된다. ------------------------------------------------------------------ */ --font-family: var(--wp--preset--font-family--pretendard, 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Helvetica Neue', Arial, sans-serif); /* 타입 스케일 (slug = theme.json fontSizes) */ --fs-hero-title: var(--wp--preset--font-size--title, 36px); /* 히어로 제목 */ --fs-page-title: var(--wp--preset--font-size--display, 48px); /* 아티클 상단 제목 */ --fs-archive-title: var(--wp--preset--font-size--title, 36px); /* 카테고리 페이지 제목 */ --fs-section-title: var(--wp--preset--font-size--xx-large, 32px); /* 섹션 제목 */ --fs-card-title: var(--wp--preset--font-size--large, 20px); /* 목록 카드 제목 */ --fs-body-lg: var(--wp--preset--font-size--medium, 17px); /* 본문(상세)/설명 */ --fs-body: var(--wp--preset--font-size--body, 16px); /* 기본 본문 */ --fs-meta: var(--wp--preset--font-size--meta, 15px); /* GNB/메타/작성자 */ --fs-meta-sm: var(--wp--preset--font-size--small, 14px); /* 날짜/댓글 */ --fs-caption: var(--wp--preset--font-size--caption, 13px); /* 배지/약관 */ --fs-micro: var(--wp--preset--font-size--micro, 12px); /* 최소 텍스트 */ /* 굵기: 본문/헤딩/버튼은 theme.json elements 굵기를 따라가고, 아래 토큰은 컴포넌트 세부 디테일에만 사용된다. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.25; --lh-snug: 1.35; --lh-normal:1.45; --lh-loose: 1.6; /* ------------------------------------------------------------------ 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; }