/* tokens.css — 부스트로더 디자인 토큰 (색·형태·간격의 유일한 값 보관소) 근거 문서: C:\Project\luca\specs\50-design-tokens.md (시안 6장 실측 판독) 원장 결정: D20(브랜드 = 파랑) · D21(CSS 글로벌 단일 체계) · D22(폰트 로컬 번들) ───────────────────────────────────────────────────────────────────── ⛔ 이 파일은 부스트소싱 `src/styles/tokens.css`와 **같은 값**을 쓴다. 두 제품이 "하나의 상품처럼" 보여야 한다는 사용자 지시(D21) 때문이다. 한쪽 값을 바꾸면 반대쪽도 같이 바꾼다. 값이 갈라지는 순간 D21이 깨진다. (부스트소싱은 React/Tailwind, 부스트로더는 Jinja2/Alpine이라 코드는 다르지만 값은 동일하다 — 코드를 복사하지 않고 값만 공유한다.) ───────────────────────────────────────────────────────────────────── ⛔ 색은 "값"이 아니라 "역할"로 부른다 (50번 §5-4) primary(브랜드 파랑) / danger(의미 빨강) / market-*(마켓 식별색)은 각각 뜻이 다르다. 값이 우연히 같아 보여도 var()로 묶지 마라. 일괄 치환하면 마진 음수·실패 배지가 파래진다. → 아래 1·2·3번 블록은 절대 서로를 참조하지 않는다. ───────────────────────────────────────────────────────────────────── */ :root { /* ══════════════════════════════════════════════════════════════ 1. 브랜드 (primary) — 파랑. 원장 D20 ══════════════════════════════════════════════════════════════ 쓰임: 주 액션 버튼, 사이드바 활성 표시, 포커스 링, 로고. "이 제품의 색"이라는 뜻. 상태나 마켓을 뜻하지 않는다. #2563EB(Tailwind blue-600) 근거는 50번 §1-1: 시안 6장의 파랑이 서로 다르다(#0E5CF4 ~ #3058FC) — 시안 자체에 단일 primary 값이 없다. 판독 중앙값 ≈ #1C64F2, 최신뢰 실측 (05 페이지네이션 활성칩) = #2166E1, 팔레트 전체가 Tailwind 기본값에 스냅된다는 세 근거가 겹치는 지점이 blue-600이다. */ --brand-primary-rgb: 37 99 235; /* #2563EB — blue-600 */ --brand-primary-hover-rgb: 29 78 216; /* #1D4ED8 — blue-700 (정적 시안에서 판독 불가한 파생값) */ --brand-primary-light-rgb: 239 246 255;/* #EFF6FF — blue-50, 선택 칩/행 배경 */ --color-primary: rgb(var(--brand-primary-rgb)); --color-primary-hover: rgb(var(--brand-primary-hover-rgb)); --color-primary-light: rgb(var(--brand-primary-light-rgb)); --color-on-primary: #ffffff; /* ══════════════════════════════════════════════════════════════ 2. 의미색 (semantic) — ⛔ 브랜드가 바뀌어도 절대 따라오지 않는다 ══════════════════════════════════════════════════════════════ */ /* danger — 실패·삭제·취소·오류·차단. 빨강이어야 위험으로 읽힌다. */ --color-danger-rgb: 220 38 38; /* #DC2626 — red-600 */ --color-danger-hover-rgb: 185 28 28; /* #B91C1C — red-700 */ --color-danger-light-rgb: 254 226 226; /* #FEE2E2 — red-100, 배지 배경 */ --color-danger: rgb(var(--color-danger-rgb)); --color-danger-hover: rgb(var(--color-danger-hover-rgb)); --color-danger-light: rgb(var(--color-danger-light-rgb)); --color-danger-surface: #fef2f2; /* red-50 — 경고 행 배경 */ /* 마진 부호 — ⛔ 음수가 파래지면 손익을 눈으로 못 가린다 (50번 §5-4) */ --color-margin-positive-rgb: 34 197 94; /* #22C55E */ --color-margin-negative-rgb: 239 68 68; /* #EF4444 */ /* 판매가 강조 — 한국 커머스 관행(가격은 빨강)이지 브랜드색이 아니다. */ --color-price-emphasis: rgb(var(--color-danger-rgb)); /* 나머지 상태색 — 50번 §1-4 실측(전부 Tailwind 기본값에 스냅됨) */ --color-success-rgb: 5 150 105; /* #059669 — emerald-600, 완료/정상 */ --color-warning-rgb: 249 115 22; /* #F97316 — orange-500, 대기/주의 */ /* ⚠️ info는 primary와 값이 같지만 뜻이 다르다. 브랜드가 바뀌어도 info(안내/진행중)는 파랑으로 남아야 한다. */ --color-info-rgb: 37 99 235; /* #2563EB — blue-600 */ --color-accent-violet-rgb: 124 58 237; /* #7C3AED — violet-600, AI/보조 기능 */ --color-success: rgb(var(--color-success-rgb)); --color-warning: rgb(var(--color-warning-rgb)); --color-info: rgb(var(--color-info-rgb)); --color-accent-violet: rgb(var(--color-accent-violet-rgb)); /* ══════════════════════════════════════════════════════════════ 3. 마켓 식별색 (market) — ⛔ 브랜드·의미와 무관한 제3의 축 ══════════════════════════════════════════════════════════════ 50번 §1-5 실측. 마켓 배지는 **글자(N/C/11/G/A) + 색의 쌍**으로만 의미가 성립한다. 쿠팡 빨강이 danger와, G마켓 파랑이 primary와 값이 겹쳐도 문제없다 — 단, 서로를 대체하면 안 된다(마켓 리브랜딩 시 그 마켓 한 줄만 바뀌어야 하므로). ⚠️ 부스트로더는 SS 전용(원장 C7)이라 실제로는 smartstore만 쓴다. 나머지는 상류 화면이 남아 있는 동안의 호환용이다. */ --color-market-smartstore: #03c75a; /* 네이버 브랜드 그린 */ --color-market-coupang: #dc2626; /* danger와 값이 같을 뿐 무관 */ --color-market-11st: #8b2ff5; /* 시안 실측 보라 */ --color-market-gmarket: #2563eb; /* primary와 값이 같을 뿐 무관 */ --color-market-auction: #f87004; /* 시안 01/04 불일치 — 주황 쪽 채택 */ /* ══════════════════════════════════════════════════════════════ 4. 기반색 (surface / border / text) — 50번 §1-2, §1-3 ══════════════════════════════════════════════════════════════ ⚠️ 카드 보더와 배경의 명도차가 매우 작다. 시안의 카드는 "선"이 아니라 "흰 면"으로 떠 보이는 구조라, 보더를 진하게 하면 인상이 달라진다. */ --color-bg-rgb: 248 250 252; /* #F8FAFC — 페이지 배경 */ --color-surface-rgb: 255 255 255; /* #FFFFFF — 카드·사이드바·테이블 본문 */ --color-surface-muted-rgb: 245 246 248;/* #F5F6F8 — 테이블 헤더 밴드 */ --color-border-rgb: 238 241 246; /* #EEF1F6 — 카드 외곽 1px */ --color-border-strong-rgb: 236 239 244;/* #ECEFF4 — 사이드바·탑바 구분선 */ --color-divider-rgb: 242 244 246; /* #F2F4F6 — 테이블 행 구분선 */ --color-bg: rgb(var(--color-bg-rgb)); --color-surface: rgb(var(--color-surface-rgb)); --color-surface-muted: rgb(var(--color-surface-muted-rgb)); --color-border: rgb(var(--color-border-rgb)); --color-border-strong: rgb(var(--color-border-strong-rgb)); --color-divider: rgb(var(--color-divider-rgb)); /* 텍스트 — 시안 실측은 안티에일리어싱 탓에 실제보다 밝게 나온다. 보정 추정값. */ --text-primary-rgb: 15 23 42; /* #0F172A — 제목·KPI 숫자 */ --text-body-rgb: 51 65 85; /* #334155 — 표 본문·라벨 */ --text-secondary-rgb: 100 116 139; /* #64748B — 사이드바 메뉴·보조 설명 */ --text-muted-rgb: 148 163 184; /* #94A3B8 — 캡션·placeholder */ --text-primary: rgb(var(--text-primary-rgb)); --text-body: rgb(var(--text-body-rgb)); --text-secondary: rgb(var(--text-secondary-rgb)); --text-muted: rgb(var(--text-muted-rgb)); /* ══════════════════════════════════════════════════════════════ 5. 형태 (radius / shadow) — 50번 §2-1, §2-2 ══════════════════════════════════════════════════════════════ ⚠️ 시안은 그림자로 띄우는 디자인이 아니라 보더+흰 면으로 구획하는 디자인이다. 카드에 shadow-md 이상을 넣으면 시안과 인상이 달라진다. */ --radius-card: 10px; --radius-button: 8px; --radius-input: 8px; --radius-badge: 6px; --radius-pill: 9999px; --shadow-card: 0 1px 2px rgb(15 23 42 / 0.04); /* ══════════════════════════════════════════════════════════════ 6. 간격 · 레이아웃 골격 — 50번 §2-4, §3 ══════════════════════════════════════════════════════════════ ⚠️ 값 정의만 한다. 이 파일은 .app-layout / .app-sidebar / .app-content의 overflow·height·position을 **선언하지 않는다** — 그 규칙들은 base.html 인라인