/* ========================================================================== 삼우물산 — 1단계: 디자인 토큰 + 폰트 (2026-08-14, UI-SPEC 기준으로 재작성) 기준: design-reference/삼우물산 대시보드 프로토타입/design-reference/ UI-SPEC.md §1(색)·§2(타이포) + screens/*.png 36장. ※ 같은 폴더의 css/tokens.css 는 옛 값(그라파이트+앰버)을 담고 있어 UI-SPEC 과 어긋난다. UI-SPEC 이 "이 문서 + 스크린샷이 정답지"라고 명시하므로 여기의 값이 우선한다 — 스크린샷 실측과도 일치(파랑 #5B8BF7). [이 파일이 하는 일] ① Pretendard 로컬 9종 @font-face — PROMPTS 1단계 지시. 기존 CDN(woff2)과 같은 'Pretendard' 이름으로 뒤에 선언 → 로컬이 이긴다. ② UI-SPEC §1 토큰값으로 덮기 — 마지막 로드라 아래 선언이 전부 이긴다. · 시안 토큰(--surface·--text-N·--accent…) → .ds 규칙 80화면이 그대로 따라옴 · 앱 옛 변수(--bg·--panel·--card·--blue…) → .ds 밖 화면·사이드바도 따라옴 기능 코드 0줄 수정. 되돌리려면 이 파일만 이전 커밋으로 복구하면 된다. ========================================================================== */ /* ── ① Pretendard 로컬 9종 (public/fonts/pretendard/) ───────────────────── */ @font-face{font-family:'Pretendard';src:url('../fonts/pretendard/Pretendard-Thin.otf') format('opentype');font-weight:100;font-style:normal;font-display:swap} @font-face{font-family:'Pretendard';src:url('../fonts/pretendard/Pretendard-ExtraLight.otf') format('opentype');font-weight:200;font-style:normal;font-display:swap} @font-face{font-family:'Pretendard';src:url('../fonts/pretendard/Pretendard-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Pretendard';src:url('../fonts/pretendard/Pretendard-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Pretendard';src:url('../fonts/pretendard/Pretendard-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Pretendard';src:url('../fonts/pretendard/Pretendard-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Pretendard';src:url('../fonts/pretendard/Pretendard-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Pretendard';src:url('../fonts/pretendard/Pretendard-ExtraBold.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:'Pretendard';src:url('../fonts/pretendard/Pretendard-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap} /* ── ② UI-SPEC §1 토큰 ────────────────────────────────────────────────── :root 와 body.dark.theme-amber(앱의 실제 body 클래스) 둘 다에 걸어 tokens.css 의 어느 선언보다도 뒤에서 확실히 이긴다. */ :root, body.dark, body.dark.theme-amber{ /* 면 (UI-SPEC: 배경색은 2가지 이하) */ --surface: #0B0D10; /* 앱 배경 */ --surface-card: #141719; /* 카드/패널 */ --surface-sunk: #0F1113; /* 표 헤더·입력·트랙 */ --hairline: rgba(255,255,255,0.10); /* 강한 경계 */ --hairline-soft: rgba(255,255,255,0.07); /* 기본 경계 */ /* 글자 */ --text-1: #F2F4F5; --text-2: #B7BEC4; --text-3: #7C868E; --text-4: #4C555C; --text-inverse: #0B0D10; /* 강조 — 앰버 단일 (R103 디자인 레퍼런스 원칙 1: 액센트 1색. 파랑 #5B8BF7은 상태색 진행 전용) */ --accent: #F59E0B; --accent-fg: #000000; --accent-soft: rgba(245,158,11,0.16); --accent-deep: #D97706; /* 상태색 4개 (이 외에는 쓰지 않는다) */ --st-urgent: #EF4458; /* 심각/긴급/미수 */ --st-urgent-bg: rgba(239,68,88,0.14); --st-todo: #F97316; /* 높음/주의 */ --st-todo-bg: rgba(249,115,22,0.14); --st-progress: #5B8BF7; /* 보통/진행 */ --st-progress-bg: rgba(91,139,247,0.14); --st-done: #4ADE80; /* 정상/완료 */ --st-done-bg: rgba(74,222,128,0.14); --st-info: #B7BEC4; --st-info-bg: rgba(255,255,255,0.06); /* 라운드 — 디자인 레퍼런스 원칙 6: 카드 8px (구 14px, R103) */ --r-4: 8px; /* 경계 조합 (기존 규칙들이 var(--bd)·var(--bd-soft) 로 씀) */ --bd: 1px solid var(--hairline); --bd-soft: 1px solid var(--hairline-soft); } /* ── ②-b 앱 옛 변수를 같은 값으로 정렬 ────────────────────────────────── index.html 자체 :root(L299·L1006)가 정의하는 이름들. .ds 밖에서도 쓰여서 여기서 같이 맞춰야 사이드바·옛 화면·마진계산기류가 함께 방향을 튼다. */ :root, body.dark, body.dark.theme-amber{ --bg: var(--surface); --panel: var(--surface-card); --card: var(--surface-card); --cardUp: var(--surface-sunk); --border: var(--hairline-soft); --blue: var(--accent); --blueDim: var(--accent-soft); --red: var(--st-urgent); --redDim: var(--st-urgent-bg); --green: var(--st-done); --greenDim:var(--st-done-bg); --amber: var(--st-todo); --amberDim:var(--st-todo-bg); --purple: var(--accent); --purpleDim:var(--accent-soft); } /* ── ②-c 폰트 스택 (UI-SPEC §2) ───────────────────────────────────────── */ :root{ --font-ui: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif; --font-display: 'Pretendard', -apple-system, sans-serif; --font-numeric: 'Rajdhani', 'Pretendard', sans-serif; --font-mono: 'JetBrains Mono', Consolas, monospace; }