/** * ================================================================ * FILE INDEX * ---------------------------------------------------------------- * 파일명 : tokens.css * 경로 : /assets/css/tokens.css * 역할 : 여수포털뉴스 전역 디자인 토큰 (Single Source of Truth) * ※ 모든 CSS 파일은 이 파일의 변수만 참조한다. * ※ 이 파일 외에서 font-size 수치를 하드코딩 금지. * ※ pt 단위 사용 절대 금지 — px 단위만 허용. * 생성일 : 2026-05-02 * 버전 : v1.0 * Load-by : header.php (최우선 로드 — 다른 CSS보다 먼저) * ================================================================ * * [폰트 스케일 규정] * --fs-badge : 12px 배지, 태그, 라벨 전용 * --fs-meta : 13px 날짜, 메타정보, 보조텍스트 최솟값 * --fs-body : 14px 본문 기본 (body 기본값) * --fs-body-em : 15px 강조 본문, 버튼, 폼 입력 * --fs-card : 16px 카드 제목, 섹션명 * --fs-sub-h : 18px 서브 헤더 * --fs-page : 20px 페이지 제목 * --fs-section : 22px 섹션 대제목 * --fs-hero : 24px 히어로 제목 * * [레이아웃 규정] * --site-width : 1200px 콘텐츠 최대 너비 (항상 준수) * --gap-base : 20px 기본 그리드 간격 * --gap-sm : 12px 좁은 간격 * --gap-lg : 32px 넓은 간격 * * [색상 토큰] * 모든 색상은 이 파일에서 정의 — 개별 CSS 하드코딩 금지 * * ================================================================ */ :root { /* ══════════════════════════════════════════ 타이포그래피 스케일 (px 단위 고정) pt 단위 절대 금지 ══════════════════════════════════════════ */ --fs-badge: 12px; /* 배지, 태그, 라벨 */ --fs-meta: 13px; /* 날짜, 메타, 보조텍스트 최솟값 */ --fs-body: 14px; /* 본문 기본 = body 기본값 */ --fs-body-em: 15px; /* 강조 본문, 버튼, 폼 */ --fs-card: 16px; /* 카드 제목, 섹션명 */ --fs-sub-h: 18px; /* 서브 헤더 */ --fs-page: 20px; /* 페이지 제목 */ --fs-section: 22px; /* 섹션 대제목 */ --fs-hero: 24px; /* 히어로 제목 */ /* ══════════════════════════════════════════ 폰트 패밀리 ══════════════════════════════════════════ */ --font-base: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif; --font-mono: 'D2Coding', 'Courier New', monospace; /* ══════════════════════════════════════════ 행간 (Line Height) ══════════════════════════════════════════ */ --lh-tight: 1.3; --lh-base: 1.6; --lh-loose: 1.8; /* ══════════════════════════════════════════ 레이아웃 ══════════════════════════════════════════ */ --site-width: 1200px; /* 콘텐츠 최대 너비 — 항상 준수 */ --gap-xs: 8px; --gap-sm: 12px; --gap-base: 20px; --gap-lg: 32px; --gap-xl: 48px; /* ══════════════════════════════════════════ Border Radius ══════════════════════════════════════════ */ --radius-sm: 4px; --radius-base: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* ══════════════════════════════════════════ 색상 토큰 — Primary ══════════════════════════════════════════ */ --color-primary: #c0392b; --color-primary-dark: #96281b; --color-primary-light: #e74c3c; --color-primary-bg: #fdf2f2; /* 연한 주색 배경 */ /* ══════════════════════════════════════════ 색상 토큰 — 텍스트 ══════════════════════════════════════════ */ --color-text: #1a1a1a; /* 기본 본문 */ --color-text-mid: #444444; /* 중간 텍스트 */ --color-text-muted: #888888; /* 보조/메타 */ --color-text-disabled: #bbbbbb; /* 비활성 */ --color-text-inverse: #ffffff; /* 어두운 배경 위 */ /* ══════════════════════════════════════════ 색상 토큰 — 배경 ══════════════════════════════════════════ */ --color-bg: #ffffff; --color-bg-soft: #f8f9fa; --color-bg-muted: #f1f3f5; --color-bg-dark: #1a1a2e; /* ══════════════════════════════════════════ 색상 토큰 — 보더/구분선 ══════════════════════════════════════════ */ --color-border: #e0e0e0; --color-border-light: #f0f0f0; --color-border-dark: #cccccc; /* ══════════════════════════════════════════ 색상 토큰 — 상태 ══════════════════════════════════════════ */ --color-success: #2ecc71; --color-warning: #f39c12; --color-danger: #e74c3c; --color-info: #3498db; /* ══════════════════════════════════════════ 색상 토큰 — 카테고리별 (뉴스 섹션) ══════════════════════════════════════════ */ --color-news: #c0392b; --color-biz: #2980b9; --color-tour: #27ae60; --color-deal: #8e44ad; --color-work: #e67e22; --color-shop: #16a085; --color-wellbeing: #e91e8c; /* ══════════════════════════════════════════ 그림자 ══════════════════════════════════════════ */ --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-base: 0 2px 8px rgba(0,0,0,.10); --shadow-md: 0 4px 16px rgba(0,0,0,.12); --shadow-lg: 0 8px 32px rgba(0,0,0,.15); --shadow-xl: 0 16px 48px rgba(0,0,0,.18); /* ══════════════════════════════════════════ 트랜지션 ══════════════════════════════════════════ */ --trans-fast: all .15s ease; --trans-base: all .2s ease; --trans-slow: all .3s ease; /* ══════════════════════════════════════════ Z-index 계층 ══════════════════════════════════════════ */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; } /* ══════════════════════════════════════════════════ body 기본값 — 전역 토큰 적용 (layout_core.php의 font-size 강제와 충돌 시 DB 설정값이 우선 — layout_core가 !important로 덮음) ══════════════════════════════════════════════════ */ body { font-family: var(--font-base); font-size: var(--fs-body); /* 14px 기본 */ line-height: var(--lh-base); /* 1.6 */ color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ══════════════════════════════════════════════════ 공통 유틸리티 클래스 (토큰 기반) ══════════════════════════════════════════════════ */ /* 폰트 크기 유틸 */ .fs-badge { font-size: var(--fs-badge) !important; } .fs-meta { font-size: var(--fs-meta) !important; } .fs-body { font-size: var(--fs-body) !important; } .fs-body-em { font-size: var(--fs-body-em) !important; } .fs-card { font-size: var(--fs-card) !important; } .fs-sub-h { font-size: var(--fs-sub-h) !important; } .fs-page { font-size: var(--fs-page) !important; } .fs-section { font-size: var(--fs-section) !important; } .fs-hero { font-size: var(--fs-hero) !important; } /* 색상 유틸 */ .text-primary { color: var(--color-primary) !important; } .text-muted { color: var(--color-text-muted) !important; } .text-dark { color: var(--color-text) !important; } .text-inverse { color: var(--color-text-inverse) !important; } /* 배경 유틸 */ .bg-soft { background: var(--color-bg-soft) !important; } .bg-muted { background: var(--color-bg-muted) !important; } .bg-primary { background: var(--color-primary) !important; } /* 간격 유틸 */ .gap-xs { gap: var(--gap-xs) !important; } .gap-sm { gap: var(--gap-sm) !important; } .gap-base { gap: var(--gap-base) !important; } .gap-lg { gap: var(--gap-lg) !important; }