/* ========================================================================= 보숲 디자인 토큰 (design_v2.md v2.1 · 2026-04-22) 단일 진실 소스: 모든 색/간격/라운드/이징/섀도우/폰트 스택 값은 여기서만 정의. 각 페이지/컴포넌트는 반드시 변수 참조로만 사용. ========================================================================= */ /* ------------------------------------------------------------------------- 1) 라이트 모드 기본 토큰 (§2, §3, §5, §6) !! SYNC: 블록 3-a(html[data-theme="light"])와 값 동기 유지 !! ------------------------------------------------------------------------- */ :root { color-scheme: light dark; /* --- Brand — Navy --- */ --navy: #3D8A6B; --navy-hover: #2D6850; --navy-tint: #EEF1EC; --navy-underline: rgba(61, 138, 107, 0.3); --navy-gradient-end: #4FA383; /* --- Secondary — Forest --- 2026-04-23 톤 재보정: 라이트 모드 forest를 다크(#77B99A)와 톤 매칭. · #2E7D5B(잔디 그린) → #3D8A6B(sage) — 채도 약간 낮춰 navy 옆에서 안 튀게. · forest-tint #EAF3EE(청록) → #EEF1EC(웜그린) — paper-warm과 색온도 매칭. · WCAG 대비: #3D8A6B on #FFFFFF ≈ 4.9:1 (AA 14px+ ✓) */ --forest: #3D8A6B; --forest-deep: #2D6850; --forest-tint: #EEF1EC; /* --- Neutral — Warm Scale (한국어 본문 기준) --- */ --ink-900: rgba(17, 17, 17, 0.92); /* 본문·제목 (순검정 금지) */ --ink-700: #3F3D3A; /* 부제·강조 서브 */ --ink-500: #6B6762; /* 메타·설명 */ --ink-300: #A8A49E; /* placeholder·비활성 */ --paper: #FFFFFF; /* 기본 캔버스 */ --paper-warm: #F7F6F3; /* 섹션 교차 배경 (정적 surface) */ --paper-hover: #EFEEE9; /* surface hover/active (웜톤 동일·명도만 변화) 2026-04-23 신규: 색상 점프 없는 hover. feed/list/card hover에 사용. 의미 있는 active(sidebar/tab)는 navy-tint 유지. */ --hairline: rgba(17, 17, 17, 0.08); /* 기본 구분선/카드 보더 */ --hairline-soft: rgba(17, 17, 17, 0.06); /* 표/리스트 행 구분 */ --border-strong: rgba(17, 17, 17, 0.12); /* 입력 필드·secondary btn */ /* --- Semantic (콜아웃 4종 기반) --- */ --positive: #3D8A6B; /* forest 동기 (2026-04-23 톤 재보정) */ --negative: #C2410C; --warning: #B45309; --info: #3D8A6B; /* 콜아웃 배경 tint 4종 (§4.9, 좌측 룰 없음) */ --bg-note: #EEF1EC; /* forest-tint 동기 (2026-04-23 웜톤 매칭) */ --bg-insight: #F2F1ED; --bg-warn: #FDF3E0; --bg-risk: #FCEAEA; /* Chart 관례색 (한국 증시: 빨강=상승, 파랑=하락) */ --chart-up: #E11D48; --chart-down: #2563EB; /* --- Typography Stack (§3) --- */ --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', Roboto, Arial, sans-serif; --font-serif: 'Nanum Myeongjo', 'Noto Serif KR', ui-serif, Georgia, serif; --font-mono: 'JetBrains Mono', 'D2Coding', ui-monospace, SFMono-Regular, Menlo, monospace; --font-numeric: 'Pretendard Variable', 'Inter', ui-sans-serif; /* --- Fluid Type Scale (§3, §7) — 2026-04-29 도입 디스플레이 3종만 fluid (320px → 1280px viewport에서 부드럽게 스케일). 본문(.body-read 17px / .body 16px)·meta·mono는 의도적으로 고정 유지(§7 비타협). 공식: clamp(min, base + slope·vw, max) — slope는 (max-min)/(1280-320)px 환산. ----------------------------------------------------------------------- */ --fs-hero: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); /* 32px → 56px */ --fs-page: clamp(1.625rem, 1.45rem + 1vw, 2.25rem); /* 26px → 36px */ --fs-section: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); /* 20px → 24px */ /* --- Layout widths (§5) --- */ --w-site: 1280px; /* 최대 콘텐츠 폭 */ --w-read: 720px; /* 리포트 본문 리더 폭 (한 줄 42–48자 한글) */ --w-landing: 1080px; /* 랜딩 단일 컬럼 */ --w-sidebar: 240px; /* 업종 사이드바 */ --w-widget: 320px; /* 우측 위젯 영역 */ --w-toc: 220px; /* Sticky 목차 */ --w-form: 560px; /* 폼 최대폭 */ /* --- Spacing scale (8px base) --- */ --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-20: 20px; --s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-64: 64px; --s-80: 80px; --s-96: 96px; --s-120: 120px; /* --- Radius scale (§5) --- */ --r-4: 4px; /* 인라인 코드·수치 pill */ --r-6: 6px; /* 뱃지 */ --r-8: 8px; /* 버튼·입력·사이드바 행 */ --r-10: 10px; /* 검색 입력 */ --r-12: 12px; /* 카드·프로모·콜아웃·Numeric Card */ --r-16: 16px; /* 대형 피처 카드 */ --r-pill: 9999px; /* --- Link accent (테마별 링크 강조색) --- 2026-04-23 정책 개정: 사용자 결정 (B 방향 — Navy 기본 + Forest 정적 액센트) · 다크 = navy (이전과 동일, editorial violet-blue) · 라이트 = navy (이전: forest-deep에서 복귀) · Forest는 kicker/NEW 뱃지/TOC active/positive/pull quote serif 등 정적 액센트 전용 용도: nav/link/tab의 hover·active color + soft 배경 */ --link-accent: var(--navy); --link-accent-soft: var(--navy-tint); /* --- Elevation & focus (§6) --- */ --sh-soft: 0 1px 2px rgba(17, 17, 17, 0.04), 0 4px 12px rgba(17, 17, 17, 0.04); --sh-elevated: 0 2px 4px rgba(17, 17, 17, 0.04), 0 12px 32px rgba(17, 17, 17, 0.06); --sh-focus: 0 0 0 3px rgba(61, 138, 107, 0.18); /* --- Motion (§8) --- */ --ease: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* §8 card lift 전용 (220ms) */ /* --- Z-index scale --- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ------------------------------------------------------------------------- 2) 다크 모드 — OS 자동 감지 (§9) !! SYNC: 블록 3-b(html[data-theme="dark"])와 값 동기 유지 !! ------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { /* 다크 팔레트 — design_v2.md §0 "절제된 컬러" 철학 + editorial violet-blue OKLCH 기준 chroma ≈ 0.11, hue 280° (blue-violet/periwinkle) 라이트 Bosoop Navy(#3D8A6B)는 그대로 유지, 다크만 editorial 변주 WCAG 대비 4.98:1 (AA body ✓) (2026-04-22 최종 — 사용자 선택 #77B99A) */ --navy: #77B99A; --navy-hover: #8CC5A8; /* base +9% L */ --navy-tint: rgba(119, 185, 154, 0.16); --navy-underline: rgba(119, 185, 154, 0.4); --navy-gradient-end: #3D8A6B; --forest: #77B99A; /* oklch(72% 0.085 155) kicker 차분 */ --forest-deep: #8CC5A8; --forest-tint: rgba(119, 185, 154, 0.14); --ink-900: rgba(255, 255, 255, 0.92); --ink-700: rgba(255, 255, 255, 0.75); --ink-500: rgba(255, 255, 255, 0.6); --ink-300: rgba(255, 255, 255, 0.4); --paper: #0F1115; --paper-warm: #1A1D23; --paper-hover: #232730; /* SYNC: surface hover (paper-warm보다 한 단계 밝음) */ --hairline: rgba(255, 255, 255, 0.08); --hairline-soft: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.14); --positive: #77B99A; /* forest 동기 */ --negative: #E08888; /* red-400 → red-300 톤 */ --warning: #E8B070; /* amber 살짝 차분 */ --info: #77B99A; --bg-note: rgba(119, 185, 154, 0.10); --bg-insight: rgba(255, 255, 255, 0.04); --bg-warn: rgba(232, 176, 112, 0.10); --bg-risk: rgba(224, 136, 136, 0.12); --chart-up: #F87171; --chart-down: #60A5FA; /* 다크: 링크 강조색은 navy 계통 (에디토리얼 violet-blue) */ --link-accent: var(--navy); --link-accent-soft: var(--navy-tint); --sh-soft: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.35); --sh-elevated: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.45); --sh-focus: 0 0 0 3px rgba(119, 185, 154, 0.32); } } /* ------------------------------------------------------------------------- 3) 수동 테마 오버라이드 — html[data-theme] (§9.1) 사용자가 헤더 토글로 선택한 값이 OS 감지를 이긴다. 선택자 특이도: html[data-theme] (0,0,1,1) > @media→:root (0,0,1,0) ------------------------------------------------------------------------- */ /* 3-a) 수동 라이트 — OS가 다크여도 라이트 유지 !! SYNC: 블록 1(:root)과 값 동기 유지 !! */ html[data-theme="light"] { color-scheme: light; --navy: #3D8A6B; --navy-hover: #2D6850; --navy-tint: #EEF1EC; --navy-underline: rgba(61, 138, 107, 0.3); --navy-gradient-end: #4FA383; /* SYNC: 블록 1과 값 동기 — 2026-04-23 forest 톤 재보정 */ --forest: #3D8A6B; --forest-deep: #2D6850; --forest-tint: #EEF1EC; --ink-900: rgba(17, 17, 17, 0.92); --ink-700: #3F3D3A; --ink-500: #6B6762; --ink-300: #A8A49E; --paper: #FFFFFF; --paper-warm: #F7F6F3; --paper-hover: #EFEEE9; /* SYNC: surface hover */ --hairline: rgba(17, 17, 17, 0.08); --hairline-soft: rgba(17, 17, 17, 0.06); --border-strong: rgba(17, 17, 17, 0.12); --positive: #3D8A6B; --negative: #C2410C; --warning: #B45309; --info: #3D8A6B; --bg-note: #EEF1EC; --bg-insight: #F2F1ED; --bg-warn: #FDF3E0; --bg-risk: #FCEAEA; --chart-up: #E11D48; --chart-down: #2563EB; /* 라이트: 링크 강조색은 navy 계통 (2026-04-23 B 방향 · Navy 기본 + Forest 정적 액센트) */ --link-accent: var(--navy); --link-accent-soft: var(--navy-tint); --sh-soft: 0 1px 2px rgba(17, 17, 17, 0.04), 0 4px 12px rgba(17, 17, 17, 0.04); --sh-elevated: 0 2px 4px rgba(17, 17, 17, 0.04), 0 12px 32px rgba(17, 17, 17, 0.06); --sh-focus: 0 0 0 3px rgba(61, 138, 107, 0.18); } /* 3-b) 수동 다크 — OS가 라이트여도 다크 유지 !! SYNC: 블록 2(@media dark)와 값 동기 유지 !! */ html[data-theme="dark"] { color-scheme: dark; /* !! SYNC: 블록 2(@media dark)와 값 동기 !! */ --navy: #77B99A; --navy-hover: #8CC5A8; --navy-tint: rgba(119, 185, 154, 0.16); --navy-underline: rgba(119, 185, 154, 0.4); --navy-gradient-end: #3D8A6B; --forest: #77B99A; --forest-deep: #8CC5A8; --forest-tint: rgba(119, 185, 154, 0.14); --ink-900: rgba(255, 255, 255, 0.92); --ink-700: rgba(255, 255, 255, 0.75); --ink-500: rgba(255, 255, 255, 0.6); --ink-300: rgba(255, 255, 255, 0.4); --paper: #0F1115; --paper-warm: #1A1D23; --paper-hover: #232730; /* SYNC: surface hover */ --hairline: rgba(255, 255, 255, 0.08); --hairline-soft: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.14); --positive: #77B99A; --negative: #E08888; --warning: #E8B070; --info: #77B99A; --bg-note: rgba(119, 185, 154, 0.10); --bg-insight: rgba(255, 255, 255, 0.04); --bg-warn: rgba(232, 176, 112, 0.10); --bg-risk: rgba(224, 136, 136, 0.12); --chart-up: #F87171; --chart-down: #60A5FA; /* 다크: 링크 강조색은 navy 계통 (에디토리얼 violet-blue) */ --link-accent: var(--navy); --link-accent-soft: var(--navy-tint); --sh-soft: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.35); --sh-elevated: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.45); --sh-focus: 0 0 0 3px rgba(119, 185, 154, 0.32); } /* ------------------------------------------------------------------------- 4) 레거시 alias — 마이그레이션 전환 기간 한정 기존 17개 템플릿의 `--brand-*`, `--gray-*` 참조(599회)를 v2.1 토큰으로 자동 승격. 각 페이지를 v2.1 마크업으로 전환할 때 해당 페이지의 alias 참조를 직접 치환하고, 전체 전환이 끝나면 이 블록을 통째로 삭제한다. ------------------------------------------------------------------------- */ :root { /* brand → navy (기존 템플릿 정의 + 자체 참조 모두 커버) */ --brand-900: var(--navy); --brand-800: var(--navy-hover); --brand-700: var(--navy-hover); /* 이전엔 어디서도 정의 안 됨 (undefined) → navy-hover로 수렴 */ --brand-600: var(--navy); --brand-500: var(--navy); /* undefined → navy */ --brand-400: var(--navy); /* undefined → navy (밝은 accent 없음, 단일 톤으로 통일) */ --brand-200: var(--navy-tint); /* undefined → navy-tint */ --brand-100: var(--navy-tint); /* undefined → navy-tint */ --brand-50: var(--navy-tint); /* gray → ink·paper·hairline 웜 스케일 */ --gray-900: var(--ink-900); --gray-800: var(--ink-900); /* undefined → ink-900 */ --gray-700: var(--ink-700); /* undefined → ink-700 */ --gray-600: var(--ink-500); --gray-500: var(--ink-500); /* undefined → ink-500 */ --gray-400: var(--ink-300); --gray-300: var(--hairline); /* undefined → hairline (border 용도 다수) */ --gray-200: var(--hairline); --gray-100: var(--hairline-soft); --gray-50: var(--paper-warm); /* 기존 base.html에서 쓰이던 레이아웃 상수 */ --max-width-wide: 1400px; /* v2.1 소스 없음 — Phase 8에서 alias 블록과 함께 삭제 검토 */ --max-width: var(--w-site); --max-width-content: 900px; /* report_detail의 현재 값. Phase 6에서 720px로 전환 */ --max-width-narrow: 800px; --max-width-form: var(--w-form); }