/* JariLab 디자인 토큰 — CI 정본. * * css/ 의 모듈(기본·틀·컴포넌트·지면)과 나눠 둔 이유: 이 파일은 **company-web 만의 것이 아니다.** * 서비스 웹·앱·문서가 같은 값을 써야 브랜드가 하나로 보인다. 다른 리포로 복사할 때 * 이 파일만 가져가면 되도록 여기에는 색·치수만 두고 컴포넌트 규칙은 두지 않는다. * * 두 층으로 나눈다: * 1. 원시 팔레트 (--jl-*) 브랜드가 정한 색 그 자체. 여기 값은 함부로 안 바꾼다 * 2. 역할 (--ink 등) 화면에서 무엇에 쓰는지 * 컴포넌트는 **역할만** 참조한다. 원시 팔레트를 직접 쓰면 나중에 면을 갈 때 어긋난다. * * 2026-10-05 「Night & Ocher」 로 교체 (이전 Civic Blue · master-plan ADR-0066). * 브랜드색 = 데이터 범례색이다. 3D 장면에서 「대장 높이」 를 칠하는 황토가 로고 교집합· * 버튼·강조까지 그대로 이어진다. 바탕은 밝은 종이 한 벌이고, **밤(--jl-night)은 무대**다 — * 홈 히어로·3D 장면 창·푸터처럼 장면을 담는 자리에만 깐다. 본문을 밤 위에 올리지 않는다. * 대비는 WCAG 2.1 상대휘도로 계산해서 골랐다. 값은 CI.md 의 표와 같다. */ :root { color-scheme: light; /* ── 1. 원시 팔레트 (Night & Ocher) ─────────────────────────────────── */ --jl-night: #0B1220; /* 무대 바탕. 히어로·장면 창·푸터. 종이 위 잉크로도 쓴다 (paper 16.6:1) */ --jl-night-2: #121C2E; /* 밤 위 한 단 밝은 면 (카드·HUD) */ --jl-night-line: #26344D; /* 밤 위 괘선 */ --jl-on-night: #EEF2F7; /* 밤 위 본문 (night 위 16.7:1) */ --jl-on-night-soft: #A9B6C9;/* 밤 위 보조 글자 (night 위 9.1:1) */ --jl-ocher: #E8A33D; /* 브랜드 = 범례 「대장 높이」. paper 1.9:1 · night 위 8.7:1 — ⛔ 종이 위 글자색이 아니다. 로고 교집합·버튼·뱃지·범례 같은 면(≥ 8px)과 밤 위 글자에만 쓴다 */ --jl-ocher-ink: #855000; /* 종이 위에서 황토를 글자·가는 선으로 쓸 때 (paper 5.9:1 · card 6.4:1) */ --jl-ocher-wash: rgba(232, 163, 61, .18); /* 종이 위 황토의 옅은 판 — 차트 면·뱃지 바탕 */ --jl-slate: #6F8FA3; /* 범례 「층수 × 3.3m 추정」 회청. 데이터 도형 전용 — 글자 ⛔ (paper 3.0:1) */ --jl-paper: #EEF2F6; /* 화면 바탕. 순백(#FFF)은 큰 면적에서 눈이 아프다 */ --jl-paper-2: #E1E7EE; /* 종이 교대 면 (목록·대안 섹션) */ --jl-card: #F8FAFC; /* 종이 위로 띄우는 카드·입력칸 */ --jl-line: #C9D2DD; /* 종이 위 괘선 */ --jl-ink-soft: #46546B; /* 종이 위 보조 글자 (paper 6.8:1) */ --jl-tint: #F3EADB; /* 로고 판·도감 표지 바탕 — 황토의 아주 옅은 종이. 화면 바탕으로는 쓰지 않는다 */ --jl-white: #FFFFFF; /* 데이터 보조색 (2026-10-06, ADR-0071) — 범주가 황토·회청 둘로 모자랄 때만. 벽돌은 3D 장면의 「넣은 주소 건물」 색과 같다 */ --jl-brick: #B24925; /* paper 4.8:1 — 도형·면 */ --jl-brick-ink: #8F3417; /* 종이 위 글자 (paper 7.0:1) */ --jl-brick-wash: #F6E1DA; /* 뱃지 바탕 (위 글자 6.3:1) */ --jl-slate-ink: #3F5B6E; /* 회청 계열 글자 (paper 6.4:1) */ --jl-slate-wash: #E3EAF0; /* 뱃지 바탕 (위 글자 5.9:1) */ /* ── 2. 역할 ─────────────────────────────────────────────────────────── */ /* 종이 위 (기본) */ --bg: var(--jl-paper); --bg-alt: var(--jl-paper-2); --surface: var(--jl-card); /* 카드·인용처럼 바탕 위로 띄우는 면 */ --ink: var(--jl-night); --ink-soft: var(--jl-ink-soft); --line: var(--jl-line); --link: var(--jl-ocher-ink); /* 종이 위 링크·UI 글자. 황토 원색이 아니다 */ --brand: var(--jl-ocher); /* 마크·버튼·강조 도형 전용 */ --brand-wash: var(--jl-ocher-wash); --data-slate: var(--jl-slate); --tint: var(--jl-tint); /* 로고 판·도감 표지·장면 스탬프의 옅은 황토 종이. 화면 바탕 ⛔ */ --on-data: var(--jl-white); /* 데이터 색 면(장소 점·칩 원) 위 글자 */ --surface-raised: var(--jl-white); /* 무대 위 조작 버튼처럼 종이·카드보다 한 단 밝은 면 */ /* 밤 위 (무대) — .on-night 같은 스코프 안에서만 쓴다 */ --night: var(--jl-night); --night-2: var(--jl-night-2); --night-line: var(--jl-night-line); --on-night: var(--jl-on-night); --on-night-soft: var(--jl-on-night-soft); --night-glass: rgba(11, 18, 32, .72); --night-glass-line: rgba(238, 242, 247, .16); /* ── 3. 데이터 색 (2026-10-06, ADR-0071) ───────────────────────────────── 지도·차트·범례의 범주를 칠한다. 의미는 지면마다 범례가 정한다 — 단 3D 장면의 「황토 = 대장 높이 · 회청 = 층수 추정」은 그대로다. 글자로 쓸 때는 반드시 -ink 쪽(종이 위 4.5:1 이상). */ /* 범주 5단: 지금·가까움 → 다음 → 그다음 → 먼 → 지난·없음 */ --data-hot: var(--jl-brick); --data-hot-ink: var(--jl-brick-ink); --data-hot-wash: var(--jl-brick-wash); --data-warm: var(--jl-ocher); --data-warm-ink: var(--jl-ocher-ink); --data-warm-wash: var(--jl-ocher-wash); --data-cool: var(--jl-slate); --data-cool-ink: var(--jl-slate-ink); --data-cool-wash: var(--jl-slate-wash); --data-deep: var(--jl-ink-soft); --data-deep-ink: var(--jl-night); --data-off: var(--jl-line); --data-off-ink: var(--jl-ink-soft); --data-missing: var(--jl-line); /* 증감: 오름 벽돌 · 내림 회청 (국내 시세 관례 — 오름 붉은 계열) */ --data-up: var(--data-hot); --data-up-ink: var(--data-hot-ink); --data-up-wash: var(--data-hot-wash); --data-down: var(--data-cool); --data-down-ink: var(--data-cool-ink); --data-down-wash: var(--data-cool-wash); /* 순서 7단 (옅은 황토 → 황토 → 황토 잉크 → 밤 갈색). OKLab 보간. 정본 값은 market.js PRICE_BANDS 와 같다 */ --data-seq-1: #F6EAD3; --data-seq-2: #F0C78F; --data-seq-3: #E8A33D; --data-seq-4: #B57821; --data-seq-5: #855000; --data-seq-6: #563815; --data-seq-7: #2B2116; /* ── 치수 ────────────────────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; /* 로고 타일의 곡률과 같은 계열 */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2.5rem; --measure: 34rem; /* 본문 한 줄 길이. 한국어는 이보다 길면 눈이 흐른다 */ /* 홈(2026-10-05 리디자인)에서 온 치수. 홈이 .home 안에만 두던 값을 전 지면이 쓰도록 올렸다 */ --wrap: 1200px; /* 내용 폭. 헤더·본문·푸터가 같은 선에 선다 */ --gutter: clamp(20px, 4vw, 48px); --section-y: clamp(64px, 9vw, 120px); /* 큰 구획 사이 */ --radius-card: 14px; /* 카드·패널·입력 줄 */ --radius-media: 18px; /* 그림·차트·장면 카드 */ --radius-btn: 10px; --shadow-float: 0 18px 44px rgba(11, 18, 32, .22); /* 두 면에 걸치는 카드만 */ /* 띄움 단계 — 밤색 그림자 셋. 값은 단계로만 고른다(지면마다 흐림·농도를 새로 짓지 않는다) */ --shadow-1: 0 2px 8px rgba(11, 18, 32, .10); /* 칩·이름표처럼 면 위에 살짝 뜬 것 */ --shadow-2: 0 8px 24px rgba(11, 18, 32, .10); /* 무대·지도 위 떠 있는 판(범례·목록·안내) */ --shadow-3: 0 24px 64px rgba(11, 18, 32, .19), 0 3px 12px rgba(11, 18, 32, .08); /* 대화상자·상세 카드 */ --glass: rgba(248, 250, 252, .94); /* 무대·지도 위 반투명 카드 판 (= --surface 94%) */ /* 로고 워드마크는 Geist 를 아웃라인으로 구워 뒀다. 본문까지 Geist 로 맞추려면 폰트를 벤더링해야 하는데, 한글이 없어 어차피 두 벌이 된다. 지금은 시스템 스택을 쓴다 — 라틴 글자꼴이 로고와 다르다는 점은 알고 받아들인 것이다. */ --font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif; } /* 다크 모드는 두지 않는다. 밤 바탕은 「테마」가 아니라 「무대」다. * * 색을 두 벌 유지하면 화면에 도는 색이 배로 늘고, 그만큼 어긋날 자리도 늘어난다. * 실제로 /brand 의 자산 미리보기가 다크에서 통째로 사라지는 사고가 났다 — * 로고 판마다 전제하는 배경이 다른데 페이지 배경을 따라가게 뒀기 때문이다. * 그래서 밤 바탕은 prefers-color-scheme 을 따라가지 않고, 쓰는 자리를 컴포넌트가 * 명시한다(.on-night). 그 안에서는 로고 반전판을 **같이** 명시한다. * * 경계 규칙 — 어느 색이 어느 바탕 위에서만 쓰이는가: * 본문 글자 종이: --ink 밤: --on-night * 보조 글자 종이: --ink-soft 밤: --on-night-soft * 라벨·가는 선 종이: --link(ocher-ink) 밤: --brand(ocher 원색 허용) * 면·도형 ≥ 8px 양쪽 모두 --brand 원색. 황토 면 위 글자는 항상 --night (8.7:1) * 회청 --data-slate 양쪽 모두 도형만 */