/* ============================================================================ portal-tokens.css — My SSANCAR 수출 포털 디자인 토큰 ---------------------------------------------------------------------------- 출처 : design/01_dashboard/My SSANCAR Dashboard.dc.html (읽기 전용, 미수정) 범위 : :root 변수 정의만. 컴포넌트 스타일 없음. 원칙 : 목업에 실재하는 값만 기록. 추측값 없음. 없는 값은 "미측정"으로 명시. 실측 : 컴포넌트별 적용 수치는 design/01_dashboard/SPEC.md 참조. ============================================================================ */ /* 목업의 와 동일한 family/weight 조합 (Archivo 500 포함 — 목업 선언 그대로, 실제 사용 weight 는 600/700 뿐이나 목업과의 동일성을 우선함) */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* 한글 본문용. Archivo/Inter/IBM Plex Mono 에 한글 글리프가 없어 반드시 필요하다. dynamic-subset 이므로 실제 쓰인 글자만 내려받는다. */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css'); :root { /* ========================================================================== 1. 브랜드 ========================================================================== */ --nv-900: #0B1B34; /* 헤더 배경, 주 버튼, 배지 배경, 링크 호버 L* 9.82 · 20회 */ --nv-700: #16294A; /* 링크(기본), 주 버튼 호버, 탤리 채움 L* 16.75 · 17회 */ --nv-600: #24395F; /* 헤더 검색창 테두리 L* 24.09 · 1회 */ --gd-800: #8B6A2E; /* 골드 계열 본문 텍스트 L* 46.97 · 3회 */ --gd-600: #C08A2E; /* 액센트, 포커스링, 아바타 배경 L* 61.29 · 15회 */ --gd-400: #E0B65C; /* Silver partner 배지 마름모/글자 L* 76.12 · 4회 */ /* 개명 이력: --gd-300 → --gd-800 (2026-08-08). L*46.97 로 --gd-600(61.29)보다 어두우므로 "숫자가 클수록 어둡다"는 --ink-* 스케일 규칙에 맞춰 재명명·재배치했다. 이제 gd 3색은 --nv-* / --ink-* 와 동일하게 어두운 순으로 나열된다. */ --bz-500: #9A6A3F; /* Bronze partner 배지 배경 L* 48.93 · 목업 미렌더 → 디자인 확정값(2026-08-08). 흰 글자와의 대비비 4.66:1 로 WCAG AA(4.5:1) 를 통과하나 여유가 크지 않다. 배지 글자를 더 작게 쓸 경우 재검토할 것. */ /* ========================================================================== 2. 중립 -------------------------------------------------------------------------- ink 스케일은 목업에서 color 속성에 쓰인 중립 6색을 CIE L* 명도 오름차순으로 정렬해 배정했다(임의 배정 아님). L*800 구간은 #0E1420(6.30)과 #5B6572(42.38) 사이 간극이 커 비워 두었다. ========================================================================== */ --ink-900: #0E1420; /* L* 6.30 · 본문 기본 텍스트, 날짜 7회 */ --ink-700: #5B6572; /* L* 42.38 · 보조 텍스트, 부제, 항구명 36회 */ --ink-600: #7C8BA5; /* L* 57.53 · 네이비 위 검색 플레이스홀더 2회 */ --ink-500: #8B95A3; /* L* 61.33 · 약한 텍스트, 라벨, VIN, 셰브런 44회 */ --ink-400: #9DA9BC; /* L* 68.88 · 헤더 네비 비활성 텍스트 6회 */ --ink-300: #C7CED8; /* L* 82.51 · 보조 버튼 테두리, 구분점 8회 */ --line: #E2E5EA; /* L* 90.85 · 카드/섹션 기본 테두리 + 빈 마크 67회 */ --surface: #FFFFFF; /* L*100.00 · 카드 표면 32회 */ --page-bg: #F4F5F7; /* L* 96.51 · 아트보드(앱 뷰포트) 배경 2회 */ /* --- 지시서 목록 외 추가분: 목업에 실재하며 SPEC 재현에 필요 --------------- */ --line-subtle: #EEF0F3; /* L* 94.72 · 차량 행 사이 연한 구분선 8회 */ --line-strong: #D3D8E0; /* L* 86.18 · 아트보드 외곽 테두리 2회 */ --surface-alt: #FAFBFC; /* L* 98.57 · 파이프라인 범례 띠 배경 1회 */ --canvas-bg: #E4E7EC; /* L* 91.55 · 시안 캔버스 배경 — 디자인 툴 전용이며 제품 화면 색이 아님. 이식 시 사용 금지 */ /* ========================================================================== 3. 파이프라인 단계 (11단계를 4그룹으로 묶음) ========================================================================== */ --stage-purchase: #B45309; /* 1–3 구매 · 12회 */ --stage-purchase-bg: #FAEEDC; /* 배지 배경 · 2회 */ --stage-prep: #1D4ED8; /* 4–6 준비 · 14회 */ --stage-prep-bg: #E7EDFB; /* 배지 배경 · 4회 */ --stage-ship: #0E7490; /* 7–9 선적 · 21회 */ --stage-ship-bg: #E4F1F4; /* 배지 배경 · 4회 */ /* ⚠ 지시서는 --stage-ship-bg 를 #E1F4F4 로 적었으나 목업 실측값은 #E4F1F4 다. "목업과 다르면 목업 값을 따를 것" 지시에 따라 #E4F1F4 를 채택했다. */ --stage-done: #15803D; /* 10–11 완료 · 3회 (점 2회 + 텍스트 1회) */ --stage-done-bg: #E3F1E7; /* 완료/지급 배지 배경 — SSP 목업 실측값 */ /* 정정 이력(2026-08-09): 구 값 #E4F1EA 는 01_dashboard 목업에 완료 배지가 렌더되지 않던 시절의 추정값이었다. 02_success_partner 목업에 "Paid — Jul 22" 배지가 실재하며 배경이 #E3F1E7(글자 #15803D)로 실측되어 교체했다. 두 값의 RGB 거리는 3.2 로 사실상 같은 색이지만 **실측 > 추정** 원칙을 따른다. 다른 단계 배경(#FAEEDC·#E7EDFB·#E4F1F4)은 처음부터 목업 실측값이다. */ --stage-alert: #B91C1C; /* 차단 경고 텍스트 · 1회 */ /* --- 지시서 목록 외 추가분: Action required 배너에 필요 ------------------- */ --alert-banner-bg: #FDF6EA; /* 배너 배경 · 2회 */ --alert-banner-line: #EFE2CB; /* 배너 하단 테두리 · 2회 */ --alert-pill-bg: #F7E9D2; /* 건수 알약 배경 · 2회 */ /* ========================================================================== 4. 플레이스홀더 (사진 자리 표시 45deg 사선 패턴) ========================================================================== */ --ph-a: #EDEFF3; /* 짙은 줄 · 12회 */ --ph-b: #F6F7F9; /* 옅은 줄 · 12회 */ /* ========================================================================== 5. 폰트 스택 -------------------------------------------------------------------------- Archivo·Inter·IBM Plex Mono 에는 한글 글리프가 없으므로 한글은 자동으로 다음 순위(Pretendard)로 폴백된다. 내부 CRM 한국어 UI 대응. Pretendard 는 위 jsDelivr @import 로 로드되므로 로컬 설치가 없어도 적용된다. 'Pretendard Variable' 을 먼저 둔 이유: variable 폰트가 로드된 환경에서는 정적 'Pretendard' 보다 우선 적용되어 굵기 4단계를 파일 하나로 커버한다. mono 는 D2Coding(한글 고정폭)을 먼저 두어 VIN·수치 정렬을 지킨다. ========================================================================== */ --ff-display: 'Archivo', 'Pretendard Variable', 'Pretendard', system-ui, 'Malgun Gothic', sans-serif; --ff-body: 'Inter', 'Pretendard Variable', 'Pretendard', system-ui, 'Malgun Gothic', sans-serif; --ff-mono: 'IBM Plex Mono', 'D2Coding', 'Pretendard Variable', 'Pretendard', 'Malgun Gothic', monospace; /* ========================================================================== 6. 타입 스케일 — 목업에서 실제 사용된 19개 px 값 그대로 -------------------------------------------------------------------------- 0.5px 단위가 다수 존재한다(9.5 / 10.5 / 11.5 / 12.5 / 13.5). 시안 원본을 따른 것이며 반올림하지 않았다. 이름의 하이픈은 소수점을 뜻한다(-5 = .5). ========================================================================== */ --fs-8: 8px; /* 모바일 헤더 "PORTAL" 라벨 · 1회 */ --fs-9: 9px; /* 데스크톱 "EXPORT PORTAL", 모바일 배지 · 3회 */ --fs-9-5: 9.5px; /* 모바일 metric 라벨, 표 헤더 · 5회 */ --fs-10: 10px; /* 대문자 섹션 라벨, 탤리 눈금 · 16회 */ --fs-10-5: 10.5px; /* 파이프라인 범례, 모바일 stage 배지 · 7회 */ --fs-11: 11px; /* stage 배지, 순번, 모바일 VIN · 20회 */ --fs-11-5: 11.5px; /* VIN(mono), 카드 링크 · 11회 */ --fs-12: 12px; /* 보조 본문, 링크, 메타 · 25회 */ --fs-12-5: 12.5px; /* 부제, 항구명, 날짜, 버튼 라벨 · 19회 */ --fs-13: 13px; /* 네비, 카드 제목, 주 버튼 · 18회 */ --fs-13-5: 13.5px; /* 차량명, action 항목 제목 · 13회 */ --fs-14: 14px; /* action 제목, 큰 숫자 단위 · 5회 */ --fs-15: 15px; /* 셰브런(›), 모바일 매니저명/금액 · 8회 */ --fs-16: 16px; /* 데스크톱 로고, 모바일 회사명 · 2회 */ --fs-17: 17px; /* 매니저명, action 금액 · 2회 */ --fs-19: 19px; /* SSP 모바일 h1 · 1회 (02 목업) */ --fs-22: 22px; /* 데스크톱 회사명 h1 · 1회 */ --fs-26: 26px; /* SSP 데스크톱 h1 · 2회 (02 목업) */ --fs-24: 24px; /* 모바일 metric 수치 · 3회 */ --fs-28: 28px; /* 데스크톱 metric 수치 · 3회 */ --fs-30: 30px; /* 아이덴티티 헤더 대형 수치 · 2회 */ /* --- 행간 (지시서 목록 외 추가분 — 타입 재현에 필수) ---------------------- */ --lh-1: 1; /* 108회 · 단일 행 라벨/수치 */ --lh-11: 1.1; /* 1회 · h1 */ --lh-12: 1.2; /* 13회 · 차량명, 매니저명 */ --lh-13: 1.3; /* 23회 · 부제, 본문 */ --lh-135: 1.35; /* 2회 · 모바일 본문 */ --lh-14: 1.4; /* 9회 · 범례, 상태 목록 */ --lh-15: 1.5; /* 5회 · 데스크톱 stage 배지 */ /* --- 굵기 (지시서 목록 외 추가분) ----------------------------------------- */ --fw-regular: 400; /* 50회 */ --fw-medium: 500; /* 40회 */ --fw-semibold: 600; /* 62회 */ --fw-bold: 700; /* 20회 */ /* --- 자간 (지시서 목록 외 추가분 — 대문자 mono 라벨의 시각 특징) ---------- */ --ls-tight-2: -.02em; /* 5회 · 대형 수치 */ --ls-tight-15: -.015em; /* 1회 · SSP 데스크톱 h1 (02 목업) */ --ls-tight-1: -.01em; /* 2회 · 로고, h1 */ --ls-04: .04em; /* 1회 · 아바타 이니셜 */ --ls-08: .08em; /* 1회 · 매니저 사진 자리표시 */ --ls-10: .1em; /* 9회 · 대문자 섹션 라벨 */ --ls-12: .12em; /* 2회 · 표 헤더, 모바일 배지 */ --ls-13: .13em; /* 1회 · 모바일 탤리 라벨 */ --ls-14: .14em; /* 4회 · 탤리 라벨, 배지 */ --ls-18: .18em; /* 2회 · EXPORT PORTAL */ /* ========================================================================== 7. 간격 — 목업 실측 padding/gap/margin 을 4px 배수로 정규화(반올림) -------------------------------------------------------------------------- 목업 원본은 2·3·4·5·6·7·8·9·10·11·12·14·16·18·20·24·28px 를 혼용한다. 아래는 그 정규화 결과이며, 원본↔토큰 대응표와 오차는 SPEC.md 부록 A 에 있다. ⚠ 정규화 시 최대 ±2px 이동이 발생한다. 원본 그대로가 필요한 지점은 SPEC.md 의 실측값을 사용할 것. ========================================================================== */ --sp-1: 4px; /* ← 원본 2·3·4·5px */ --sp-2: 8px; /* ← 원본 6·7·8·9px */ --sp-3: 12px; /* ← 원본 10·11·12px */ --sp-4: 16px; /* ← 원본 14·16px */ --sp-5: 20px; /* ← 원본 18·20px */ --sp-6: 24px; /* ← 원본 24px */ --sp-7: 28px; /* ← 원본 28px */ --sp-8: 32px; /* 목업 미사용 — 상위 여백 예비 슬롯 */ /* 목업의 40px(캔버스 padding)·48px(아트보드 간 gap)은 시안 배치용이며 제품 간격이 아니므로 토큰화하지 않았다. */ /* ========================================================================== 8. 모서리 반경 — 목업 실측 7종 ========================================================================== */ --radius-hairline: 1px; /* 55회 · stage-rail 세그먼트 */ --radius-xs: 2px; /* 6회 · 상태 사각 점, 범례 점 */ --radius-sm: 3px; /* 5회 · 모바일 하단 네비 아이콘 */ --radius-md: 4px; /* 10회 · 차량 썸네일 */ --radius: 6px; /* 32회 · 카드/버튼/배지 기본값 */ --radius-pill: 999px; /* 12회 · stage 배지, 건수 알약 */ --radius-circle: 50%; /* 4회 · 상태 원형 점 */ /* ========================================================================== 9. 테두리 굵기 — 목업 실측 2종 ========================================================================== */ --bw-1: 1px; /* 기본 테두리 */ --bw-1-5: 1.5px; /* 5회 · 검색 아이콘 원, 모바일 비활성 네비 아이콘 */ }