/* ============================================================================
macabiz.com v2 — 팔레트 (theme.css)
단계 0: 이 파일의 역할
- v2 의 색상 토큰 '단 하나의 출처'다. core.css 와 각 페이지는 색상 HEX 를
직접 쓰지 않고 여기 정의된 시맨틱 토큰만 참조한다.
- 현재 적용 팔레트: 구글독스 기획안 "The Architecture of Speech"
Deep Blue #0F172A + Alert Red #EF4444 + Slate Grey #94A3B8
단계 0-1: 팔레트를 바꾸려면
- 각 페이지 의 아래 한 줄만 교체하면 전체 디자인이 바뀐다.
현재 :
v3 로 :
(v3 = DESIGN.md "Tinted Grid" 라이트 단일 표면)
- 두 파일이 같은 토큰 이름을 쓰므로 core.css 는 수정할 필요가 없다.
============================================================================ */
:root {
/* ------------------------------------------------------------------
단계 1: 브랜드 원색 (Raw Palette) — 기획서 지정 3색
------------------------------------------------------------------ */
--maca-navy-950: #0B1120; /* 1-1. 최심층 — 히어로·푸터 바탕 */
--maca-navy-900: #0F172A; /* 1-2. Primary Deep Blue — 이성·신뢰·민주적 제도 */
--maca-navy-800: #1E293B; /* 1-3. 카드·셀 배경 */
--maca-navy-700: #334155; /* 1-4. 보조 배경 */
--maca-red: #EF4444; /* 1-5. Alert Red — 선동·오류·독재적 징후 (데이터 전용) */
--maca-red-soft: #F87171; /* 1-6. 밝은 적색 — 텍스트 대비 확보용 */
--maca-slate: #94A3B8; /* 1-7. Neutral Slate Grey — 분석 텍스트·그리드 라인 */
--maca-slate-lt: #CBD5E1; /* 1-8. 밝은 본문 */
--maca-slate-dk: #64748B; /* 1-9. 캡션·메타 */
--maca-white: #F8FAFC; /* 1-10. 헤드라인 */
/* ------------------------------------------------------------------
단계 2: 데이터 의미색 — 지표 등급 전용 (UI 장식에 쓰지 않는다)
------------------------------------------------------------------ */
--maca-health: #10B981; /* 2-1. High Health — 건강한 DRHI */
--maca-moderate: #CBD5E1; /* 2-2. Moderate — 중립 */
--maca-corrosive: #EF4444; /* 2-3. Corrosive — 부식·괴사 */
--maca-gray: var(--maca-slate-dk); /* 2-4. 메타 텍스트 별칭 */
/* ------------------------------------------------------------------
단계 3: 시맨틱 토큰 — 페이지·컴포넌트는 반드시 이것만 참조
------------------------------------------------------------------ */
--bg: var(--maca-navy-900); /* 3-1. 페이지 바탕 */
--bg-deep: var(--maca-navy-950); /* 3-2. 더 어두운 면 (히어로·푸터) */
--bg-section: var(--maca-navy-800); /* 3-3. 카드·셀 배경 */
--bg-hover: #22304A; /* 3-4. 셀 호버 */
--text: var(--maca-white); /* 3-5. 제목 텍스트 */
--text-muted: var(--maca-slate-lt); /* 3-6. 본문 텍스트 */
--accent: var(--maca-red); /* 3-7. 킥커·강조 (기획서: 적색이 시선 유도) */
--accent-hover: var(--maca-red-soft); /* 3-8. 호버 */
--on-accent: #FFFFFF; /* 3-9. 액센트 위에 얹는 글자색 */
--on-invert: var(--maca-navy-900); /* 3-10. 밝은 면 위에 얹는 글자색 */
/* ------------------------------------------------------------------
단계 4: 격자 문법 — '언어의 건축학' 컨셉의 골격
------------------------------------------------------------------ */
--rule: 1px solid rgba(148, 163, 184, 0.20); /* 4-1. 구획선 */
--hair: 1px solid rgba(148, 163, 184, 0.10); /* 4-2. 셀 내부 구분선 */
--rule-hot: 1px solid rgba(239, 68, 68, 0.35); /* 4-3. 위험 요소 테두리 */
--grid-line: rgba(148, 163, 184, 0.06); /* 4-4. 배경 격자 */
/* ------------------------------------------------------------------
단계 5: 타이포그래피 — 기획서 지정 4종
------------------------------------------------------------------ */
--font-display: 'Playfair Display', serif; /* 5-1. 디스플레이·인용구 */
--font-serif: 'Noto Serif KR', Georgia, serif; /* 5-2. 국문 헤드라인의 권위 */
--font-body: 'Inter', 'Noto Sans KR', sans-serif; /* 5-3. 본문·UI·데이터 수치 */
--fs-hero: clamp(2.6rem, 6.4vw, 4.8rem);
--fs-h2: clamp(1.6rem, 3.2vw, 2.3rem);
--fs-h3: 1.1rem;
--fs-body: 1rem;
--fs-small: 0.85rem;
/* ------------------------------------------------------------------
단계 6: 기하학 · 모션
------------------------------------------------------------------ */
--radius-sm: 3px; /* 6-1. 최소한의 라운드 — 건축적 인상 유지 */
--radius-md: 4px;
--motion: 0.2s ease;
}