/* ============================================================ tokens.css — 색 · 타이포 · 간격 · 반경 · 모션 ------------------------------------------------------------ 테마는 3단이다. 1) :root 라이트 (기본값) 2) prefers-color-scheme: dark 시스템이 다크이고 사용자가 라이트를 고르지 않았을 때 3) :root[data-theme="dark"] 버튼으로 다크를 직접 골랐을 때 (시스템보다 우선) 값은 --d-* 에 한 번만 적는다. 2단과 3단은 "어떤 값을 쓸지"만 고르는 매핑 블록이고 색을 새로 적지 않는다. 지금 style.css는 다크 팔레트를 통째로 두 번 적어 두었고, 그래서 6122e47에서 들어온 var(--rule) 오타가 양쪽에 똑같이 복제됐다(--rule은 정의된 적이 없다 → 선언 자체가 무효가 되어 다크에서 카드 테두리가 사라진다). var()는 대상이 없으면 조용히 선언 전체를 버린다. 그래서 이 파일에 없는 토큰을 쓰면 에러가 아니라 "그 스타일만 안 먹는" 형태로 나타난다. 토큰을 추가할 때는 반드시 --d-* 와 매핑 두 곳을 같이 손볼 것. ============================================================ */ :root { color-scheme: light; /* ---- 팔레트: 다크 값 원본 (여기 한 곳에만 적는다) ------------- */ --d-bg: #111215; --d-surface: #111215; --d-surface-2: #1a1c20; --d-surface-sunk: #16181c; --d-text: #ececec; /* 구 --text-primary */ --d-text-muted: #a3a3a3; /* 구 --text-secondary */ --d-text-faint: #8f8f96; --d-border: #2c2e33; /* 구 --border-color */ --d-border-strong: #3a3d44; /* 구 --rule-card */ --d-rule-category: #ececec; /* 구 --rule-category */ --d-hover-tint: rgba(255, 255, 255, 0.06); --d-accent: #ececec; /* 구 사이트는 포커스 링에 --text-primary 를 썼다 */ --d-accent-weak: #1a1c20; /* 다크에서도 종이처럼 밝게 두는 도면 바닥. filter 반전을 대신한다. */ --d-paper: #f2f2f4; --d-paper-edge: #3a3e47; --d-shadow-card: none; --d-shadow-lift: none; /* ---- 라이트 값 = 실제 사용 토큰의 기본값 --------------------- */ --bg: #ffffff; /* 구 --bg-color */ --surface: #ffffff; --surface-2: #fafafa; --surface-sunk: #fcfcfc; --text: #111111; /* 구 --text-primary */ --text-muted: #555555; /* 구 --text-secondary */ --text-faint: #666666; --border: #e6e6e6; /* 구 --border-color */ --border-strong: #d0d0d0; /* 구 --rule-card */ --rule-category: #111111; /* 구 --rule-category — 분야 제목 밑줄 */ --hover-tint: rgba(17, 17, 17, 0.05); --accent: #111111; /* 포커스 링. 구 사이트도 --text-primary 였다 */ --accent-weak: #fafafa; --paper: #ffffff; --paper-edge: #dcdce0; --shadow-card: none; --shadow-lift: none; /* 분야를 색으로 구분하지 않는다. 분야는 섹션 제목과 순서로 이미 구분되고, 색까지 쓰면 "텍스트 중심"이 아니라 색으로 분류한 대시보드가 된다. --cat 은 이름만 남기고 값은 중립 선 색이다. 카드 상단 바, 섹션 밑줄, 수치 카드 왼쪽 선이 전부 이 하나를 쓴다. */ --cat: var(--rule-category); --cat-tint: transparent; /* ---- 타이포 ------------------------------------------------- */ /* 서브셋을 맨 앞에 둔다. 서브셋에 없는 글자는 브라우저가 글자 단위로 다음 패밀리로 넘어가므로, 뒤에 남겨 둔 Pretendard(설치돼 있으면 사용)와 시스템 폰트가 그대로 받아 준다. */ --font-sans: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* 크기는 구 사이트(style.css)를 실측해 맞췄다. 구: 본문 0.95rem · 요약 0.9rem · 캡션 0.8rem · 프로젝트명 1.1rem 이름 clamp(1.8,…,2.6)rem · 섹션제목 clamp(1.35,…,1.6)rem · 수치 1.3rem 재설계 1차가 이보다 본문 +14%, 리드 +37%, 수치 +77% 커져 있었다. */ --fs-display: clamp(1.8rem, 1.35rem + 2.2vw, 2.6rem); /* 구 .name */ --fs-h1: clamp(1.8rem, 1.35rem + 2.2vw, 2.6rem); /* 상세 제목 = 구 .name 과 같은 단계 */ --fs-h2: clamp(1.35rem, 1.1rem + 1.1vw, 1.6rem); /* 구 h2 */ --fs-h3: 1.1rem; /* 구 .project h4 */ --fs-body: 0.95rem; /* 구 .about p */ --fs-sm: 0.9rem; /* 구 .summary */ --fs-xs: 0.8rem; /* 구 캡션·태그 */ --fs-num: 1.3rem; /* 구 .stat-value */ --lh-tight: 1.25; --lh-snug: 1.55; /* 작은 글·캡션·알약 — 1.4 / 1.5 / 1.55 로 갈려 있던 것을 하나로 */ --lh-body: 1.65; /* 구 body */ --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* 구 사이트가 대문자에 준 자간은 0.1em(.category-title) 하나였다. 표 캡션만 0.02em 으로 따로 좁았고, 그 둘은 각자 자리에 적어 둔다. */ --tracking-caps: 0.1em; /* ---- 간격 (4px 배수) ---------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 2rem; --sp-8: 2.5rem; --sp-9: 3rem; --sp-10: 4rem; --sp-11: 5rem; --sp-12: 6rem; --section-gap: clamp(72px, 10vw, 120px); /* 구 section margin-bottom */ /* 36~56px */ --card-pad: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem); /* ---- 레이아웃 ----------------------------------------------- */ --container: 920px; /* 구 .container */ --container-text: 760px; /* 구 .projects · .about · .skills max-width */ /* 읽는 문단만 더 좁게. 760px에서는 한글 52자/줄이라 눈이 다음 줄을 찾기 어렵다(실측). 700px이면 약 48자로 40~50자 범위에 든다. */ --measure-prose: 700px; --gutter: clamp(20px, 5vw, 24px); /* 구 .container 좌우 */ --header-h: 56px; /* ---- 반경 · 선 ---------------------------------------------- */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; --hairline: 1px; /* 도판 세로 상한 — 한 화면에 도판 하나가 들어오고 아래 글이 조금 보이는 높이. 스크롤을 줄인 주역은 이 상한이 아니라 .figure img 의 inline-size: auto 다 (522px짜리 사진이 컨테이너 폭까지 늘어나 942px로 그려지고 있었다). 상한을 더 조이면 글자가 든 도면까지 같이 줄어 못 읽게 되므로 뷰포트 기준으로만 걸고 절대값은 느슨하게 둔다. */ --figure-max-h: 560px; /* 구 .project-media img max-height */ --cat-bar: 2px; /* ---- 포커스 ------------------------------------------------- */ /* 링은 어떤 표면 위에서도 5.4:1 이상이다(측정값: 라이트 5.41~5.85, 다크 7.44~8.58). 안쪽 흰 링을 한 겹 더 둬서 분야색 카드 위에서도 뜬다. */ --focus-ring: var(--accent); --focus-halo: var(--surface); --focus-w: 2px; --focus-offset: 2px; /* ---- 터치 타깃 ---------------------------------------------- */ --tap: 44px; /* ---- 모션 --------------------------------------------------- */ --dur-fast: 120ms; --dur: 200ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); } /* 2단 — 시스템 다크, 사용자가 라이트를 명시하지 않음 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: var(--d-bg); --surface: var(--d-surface); --surface-2: var(--d-surface-2); --surface-sunk: var(--d-surface-sunk); --text: var(--d-text); --text-muted: var(--d-text-muted); --text-faint: var(--d-text-faint); --border: var(--d-border); --border-strong: var(--d-border-strong); --accent: var(--d-accent); --accent-weak: var(--d-accent-weak); --rule-category: var(--d-rule-category); --hover-tint: var(--d-hover-tint); --rule-category: var(--d-rule-category); --hover-tint: var(--d-hover-tint); --paper: var(--d-paper); --paper-edge: var(--d-paper-edge); --shadow-card: var(--d-shadow-card); --shadow-lift: var(--d-shadow-lift); } } /* 3단 — 버튼으로 다크를 직접 고름. 시스템 설정을 이긴다. */ :root[data-theme="dark"] { color-scheme: dark; --bg: var(--d-bg); --surface: var(--d-surface); --surface-2: var(--d-surface-2); --surface-sunk: var(--d-surface-sunk); --text: var(--d-text); --text-muted: var(--d-text-muted); --text-faint: var(--d-text-faint); --border: var(--d-border); --border-strong: var(--d-border-strong); --accent: var(--d-accent); --accent-weak: var(--d-accent-weak); --rule-category: var(--d-rule-category); --hover-tint: var(--d-hover-tint); --paper: var(--d-paper); --paper-edge: var(--d-paper-edge); --shadow-card: var(--d-shadow-card); --shadow-lift: var(--d-shadow-lift); } /* 라이트를 직접 고름 — :root 기본값을 그대로 쓰되 색 스킴만 고정한다. (스크롤바·폼 컨트롤이 시스템 다크를 따라가지 않게) */ :root[data-theme="light"] { color-scheme: light; } /* ------------------------------------------------------------ 분야 스코프 마크업의 data-category 는 그대로 두지만 색을 입히지 않는다. 분야별 색으로 되돌리려면 여기에 네 줄을 다시 넣고 --cat / --cat-tint 를 분야색으로 매핑하면 된다. ------------------------------------------------------------ */ /* 모션을 줄여 달라고 한 사람에게는 duration을 0으로 준다. 각 컴포넌트가 var(--dur)만 쓰면 여기 한 줄로 전부 꺼진다. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur: 0.01ms; } }