/* ========================================================================== tokens.css — 도산 안창호 일대기 사이트 디자인 토큰 (v2) -------------------------------------------------------------------------- 컨셉 v2: "맑은 한지, 살아 움직이는 먹" — 밝은 한지 바탕의 절제는 유지하되 먹이 종이에 스며들 듯 부드럽게 움직이는 모던한 생동감을 더한다. 화려함이 아니라 깊이(depth)·반응(response)·흐름(flow)으로 세련됨을 만든다. 단일 진실 공급원: 이 파일이 사이트 전체 색·글꼴·간격·모션의 유일한 정의처다. tokens.css 외부에서 하드코딩 hex/px/rgba 사용 금지 — 반드시 var()로 참조. ⚠ v1 불변 계약: §1~§9의 v1 토큰 값은 절대 변경 금지. main.css·timeline.css·map.css가 이 값들을 상속한다(radius-sm/md, dur-*, ease, shadow-sm/pop 등 실사용 중). v2는 §10 이후에 새 이름의 확장 토큰을 "추가"만 한다. 작성: ui-designer (Phase 4a) / 기준: dosan-design-system 스킬 v2 문서: _workspace/04_build/design-system.md (토큰표·대비표·애니메이션·인터랙션·컴포넌트 스펙) ========================================================================== */ :root { /* ------------------------------------------------------------------ */ /* 1. 원시 색 (Primitive) — 재료의 은유. 컴포넌트는 시맨틱 별칭만 참조 */ /* ------------------------------------------------------------------ */ /* 한지 — 배경 */ --paper: #F7F3EB; /* 기본 배경 */ --paper-dim: #EFE8DB; /* 카드·인용 블록 배경 (한 단계 가라앉음) */ --paper-edge: #E2D9C7; /* 경계선·구분선 (여백 우선, 선은 최후 수단) */ /* 먹 — 텍스트 */ --ink: #1A1815; /* 본문 텍스트 */ --ink-soft: #4A453E; /* 보조 텍스트(캡션·메타) */ --ink-faint: #6B655B; /* 비활성·플레이스홀더 (큰/UI 텍스트 전용 — §대비표 참조) */ /* 단청 — 강조 (인장처럼 아껴 쓸 것: 한 화면 1~2회) */ --dancheong: #B5342B; /* 링크·핵심 강조·현재 위치 */ --dancheong-dim: #9A2C24; /* hover/active 시 한 단계 짙게 */ /* 청자 — 보조 (비텍스트 UI·큰 제목 보조·테두리) */ --celadon: #6E8B74; /* 큰 제목 보조·테두리·아이콘 (본문 크기 텍스트 금지) */ --celadon-deep: #4E6854; /* 청자색을 본문 텍스트로 써야 할 때만 (AA 통과용) */ /* 중립 흰색 — 강조 배경 위 텍스트 */ --on-accent: #FFFFFF; /* ------------------------------------------------------------------ */ /* 2. 시맨틱 별칭 — 컴포넌트는 여기서부터만 참조한다 */ /* ------------------------------------------------------------------ */ --bg: var(--paper); --bg-raised: var(--paper-dim); --border: var(--paper-edge); --text: var(--ink); --text-muted: var(--ink-soft); --text-faint: var(--ink-faint); --accent: var(--dancheong); --accent-hover: var(--dancheong-dim); --rule: var(--celadon); /* 비텍스트 장식선·아이콘 */ --rule-text: var(--celadon-deep); /* 청자색 본문 텍스트가 불가피할 때 */ /* ------------------------------------------------------------------ */ /* 3. 신뢰도 등급 시맨틱 — 색 단독 의존 금지(항상 라벨 텍스트 병기) */ /* 배지 배경은 paper-dim 계열, 테두리/글자로 등급 구분 */ /* ------------------------------------------------------------------ */ --grade-a-text: #2F5D3A; /* A등급 — 짙은 청자 계열 (AA 통과: vs paper-dim 5.0:1) */ --grade-b-text: var(--ink-soft); /* B등급 — 먹 보조 (중립) */ --grade-c-text: #8A5A00; /* C등급(한정) — 황토 계열 (AA 통과: vs paper-dim 4.6:1) */ --grade-badge-bg: var(--paper); /* 배지 칩 배경(카드 위에서 한 단계 밝게) */ --grade-badge-border: var(--paper-edge); --disputed: var(--dancheong); /* disputed = 단청 점선 테두리 + "기록 상충" 라벨 */ /* 사료 소재 상태 배지 (archives) — 색은 보조, 라벨이 본체 */ --loc-confirmed: var(--celadon-deep); /* 소재 확인 */ --loc-cited: #8A5A00; /* 인용만 확인(cited_only) — 황토 */ --loc-unlocated: var(--ink-faint); /* 소재 미확인 — 흐린 먹 */ /* ------------------------------------------------------------------ */ /* 4. 타이포그래피 */ /* ------------------------------------------------------------------ */ --font-serif: "Noto Serif KR", "Nanum Myeongjo", serif; /* 제목·본문 */ --font-sans: "Pretendard", "Apple SD Gothic Neo", system-ui, -apple-system, sans-serif; /* UI·메타·캡션 */ --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace; /* id·좌표·날짜 raw */ /* 크기 스케일 (1.25배 모듈러) — 임의 px 금지, 스케일에서만 선택 */ --fs-xs: 0.694rem; /* 배지·미세 메타 (≈12.5px @18) */ --fs-sm: 0.8rem; /* 캡션·크레딧·UI 라벨 */ --fs-base: 1rem; /* 본문 (root 18px) */ --fs-md: 1.25rem; /* 소제목 h4 */ --fs-lg: 1.563rem; /* h3 */ --fs-xl: 1.953rem; /* h2 */ --fs-2xl: 2.441rem; /* h1 */ --fs-3xl: 3.052rem; /* 홈 히어로 사이트명(데스크톱) — 단일 사용 */ --lh-body: 1.8; /* 한글 장문 가독 행간 */ --lh-tight: 1.3; /* 제목 */ --lh-snug: 1.5; /* 카드 요약·메타 다줄 */ --ls-tight: -0.01em; /* 큰 제목 자간 조임 */ --measure: 42rem; /* 본문 최대 폭 — 한 줄 35~45자 */ --measure-wide: 60rem; /* 카드 그리드·표 컨테이너 폭 */ --measure-full: 75rem; /* 페이지 최대 폭(내비·푸터·시각화) */ /* ------------------------------------------------------------------ */ /* 5. 간격 스케일 (8px 기반, root 18px 환산) — "적당한 여백" 금지 */ /* ------------------------------------------------------------------ */ --sp-1: 0.25rem; /* 4.5px — 배지 내부 */ --sp-2: 0.5rem; /* 9px — 인접 인라인 요소 */ --sp-3: 0.75rem; /* 13.5px — 카드 내부 행 간격 */ --sp-4: 1rem; /* 18px — 기본 단위 */ --sp-5: 1.5rem; /* 27px — 카드 패딩·문단 간격 */ --sp-6: 2rem; /* 36px — 섹션 내부 블록 간격 */ --sp-7: 3rem; /* 54px — 섹션 간격(모바일) */ --sp-8: 4.5rem; /* 81px — 섹션 간격(데스크톱)·페이지 상하 여백 */ --sp-9: 6rem; /* 108px — 큰 구역 분리 */ /* ------------------------------------------------------------------ */ /* 6. 형태 — 반경·선 두께. 절제: 큰 라운드·강한 그림자 금지 */ /* ------------------------------------------------------------------ */ --radius-sm: 3px; /* 배지·칩 */ --radius-md: 4px; /* 카드·이미지 프레임 */ --radius-lg: 6px; /* 큰 컨테이너 (최대) */ --bw-hair: 1px; /* 기본 구분선 */ --bw-accent: 3px; /* 인용 블록 좌측 청자 보더·강조 좌선 */ --bw-focus: 2px; /* 포커스 링 */ /* 그림자 — 장식 최소. 부양은 거의 안 쓰고, 종이 결 정도만 */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(26, 24, 21, 0.06); /* 떠 있는 패널(드물게) */ --shadow-pop: 0 4px 14px rgba(26, 24, 21, 0.12); /* 팝업·드롭다운만 */ /* 포커스 링 — 접근성 필수, 단청색 */ --focus-ring: 0 0 0 var(--bw-focus) var(--paper), 0 0 0 calc(var(--bw-focus) + 2px) var(--dancheong); /* ------------------------------------------------------------------ */ /* 7. 모션 — 의미(시간 흐름·경로) 전달 시에만. prefers-reduced 존중 */ /* ------------------------------------------------------------------ */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; /* 지도 경로·연표 스크롤 등 의미 있는 이동 */ --ease: cubic-bezier(0.2, 0, 0.2, 1); /* ------------------------------------------------------------------ */ /* 8. z-index 층위 — 임의 z-index 금지, 이 척도에서만 선택 */ /* ------------------------------------------------------------------ */ --z-base: 0; --z-raised: 10; --z-sticky: 100; /* 사이드 내비·시기 슬라이더 */ --z-header: 200; /* 전역 헤더 */ --z-popup: 300; /* 지도 팝업·드롭다운·툴팁 */ --z-overlay: 400; /* 모바일 내비 오버레이·사료 뷰어 확대 */ /* ------------------------------------------------------------------ */ /* 9. 사진 처리 — CSS filter로 통일 톤(원본 비변형) */ /* grayscale 통일 + 한지 위 따뜻함을 위한 미세 sepia 혼합 */ /* ------------------------------------------------------------------ */ --img-filter: grayscale(1) contrast(1.02); --img-filter-warm: grayscale(0.92) sepia(0.08) contrast(1.02); /* 한지와 조화(대안) */ --img-placeholder-bg: var(--paper-dim); /* 이미지 결손 시 플레이스홀더 바탕 */ --img-filter-hover: grayscale(0.65) contrast(1.02); /* v2: hover 시 원톤 일부 복원(§4-1) */ /* ================================================================== */ /* === v2 확장 (추가만 — 위 v1 토큰 값 불변) ======================== */ /* "맑은 한지, 살아 움직이는 먹": 표면·깊이·유리·그라디언트· */ /* 라운딩·모션. 기존 이름 재정의 금지 → 전부 새 이름으로 추가. */ /* ================================================================== */ /* -- 10. 표면·깊이 (Surface & Elevation) ------------------------- */ --paper-bright: #FDFBF7; /* 카드 hover 표면·유리 베이스 (vs ink 17.14:1) */ --bg-bright: var(--paper-bright); /* 시맨틱 별칭 — hover로 떠오른 표면 */ /* 유리 표면 — 반드시 backdrop-filter:blur(12px+)와 함께. 어두운 오버레이 금지 */ --glass: rgba(253, 251, 247, 0.72); --glass-strong: rgba(253, 251, 247, 0.86); /* 모바일 내비 오버레이 등 가독 우선 */ --glass-border: rgba(26, 24, 21, 0.08); --glass-blur: blur(12px); /* 다층 소프트 그림자 — 깊이는 빛으로. 색은 먹(ink) 저채도 */ --shadow-soft: 0 1px 2px rgba(26, 24, 21, 0.04), 0 4px 16px rgba(26, 24, 21, 0.06); /* 카드 기본 부양 */ --shadow-lift: 0 2px 4px rgba(26, 24, 21, 0.05), 0 12px 32px rgba(26, 24, 21, 0.10); /* 카드 hover 부양 */ --shadow-glass: 0 8px 28px rgba(26, 24, 21, 0.08); /* 유리 패널 부유 */ /* -- 11. 그라디언트 (대형 표면·장식 전용 — 텍스트 배경 금지) ------ */ --grad-accent: linear-gradient(135deg, #B5342B, #D4663A); /* 단청→노을: 히어로 획·진행바 */ --grad-wash: radial-gradient(closest-side, rgba(110, 139, 116, 0.10), transparent); /* 청자 먹번짐(배경 블롭) */ --grad-wash-2: radial-gradient(closest-side, rgba(181, 52, 43, 0.06), transparent); /* 단청 먹번짐(배경 블롭) */ --grad-edge: linear-gradient(180deg, rgba(26, 24, 21, 0.06), transparent); /* 스티키 헤더 하단 페이드 */ /* -- 12. 라운딩 v2 (기존 radius-sm/md/lg 불변 → 새 이름) ---------- */ /* 모던 라운딩은 더 큰 곡률. v1 카드를 깨지 않도록 v2 컴포넌트만 채택 */ --radius-soft: 8px; /* v2 카드·입력 (skill §2 radius-sm 후보를 신규 이름으로) */ --radius-card: 14px; /* v2 유리 패널·대형 카드 (skill §2 radius-md 후보) */ --radius-xl: 22px; /* v2 히어로 프레임·대형 표면 (skill §2 radius-lg 후보) */ --radius-pill: 999px; /* 칩·필터·배지 알약형 */ /* -- 13. 모션 v2 (기존 dur-fast/base/slow·ease 불변 → 새 이름) --- */ /* skill §2가 제안한 180/280/600ms·신규 ease를 v1 충돌 없이 신규 이름으로 채택 */ --dur-micro: 180ms; /* 마이크로 인터랙션(hover/focus) */ --dur-enter: 280ms; /* 표면 전이·헤더 축소·사진 톤 복원 */ --dur-reveal: 320ms; /* 스크롤 리빌 — v2.4: 600→320ms(스크롤 방해 피드백) */ --dur-count: 800ms; /* 통계 카운트업 */ --dur-ambient: 110s; /* 배경 블롭 표류 1주기(80~140s 범위 중앙값) */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* 리빌·등장(감속) */ --ease-soft: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* 배경·루프(부드러운 인아웃) */ --reveal-shift: 10px; /* 리빌 오프셋 — v2.4: 16→10px */ --reveal-stagger: 40ms; /* 리빌 스태거 — v2.4: 75→40ms */ --lift-y: -3px; /* 카드 hover 리프트 거리 */ /* -- 14. 타이포 v2 (기존 fs 스케일·measure 불변 → 추가만) -------- */ --fs-hero: 3.052rem; /* 홈 히어로 전용(데스크톱) — 모바일은 --fs-2xl로 강등 */ --ls-hero: -0.02em; /* 히어로·섹션 제목 자간 보정(한글 대형) */ /* -- 15. z-index v2 보강 (기존 척도 불변 → 배경 레이어만 추가) ---- */ --z-bg: -1; /* 애니메이션 배경(position:fixed; pointer-events:none) */ } /* ============================================================ */ /* 모션 감소 선호 — 전역 안전망. 컴포넌트 전환은 토큰으로 0 처리 */ /* v2: 마이크로·리빌·카운트업 지속시간도 0으로. 배경 블롭 애니메이션은 */ /* 여기서 토큰이 아니라 컴포넌트 CSS의 animation 자체를 정지(정적 워시 */ /* 유지·제거 아님)해야 한다 — main.css가 이 미디어쿼리에서 처리(§3 스펙). */ /* ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { /* v1 */ --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; /* v2 — 전환 즉시화(리빌은 즉시 최종 상태, 카운트업 즉시 최종값) */ --dur-micro: 0ms; --dur-enter: 0ms; --dur-reveal: 0ms; --dur-count: 0ms; --reveal-shift: 0px; /* translateY 시작 오프셋 제거 → 이동 없음 */ --reveal-stagger: 0ms; --lift-y: 0px; /* hover 리프트 이동 제거(그림자 전이는 무방) */ /* --dur-ambient는 토큰으로 끄지 않는다 — 배경 animation을 main.css에서 'animation: none'으로 정지(정적 워시 톤 유지). §3 접근성 규칙. */ } }