/* ========================================================================== tokens.css — 디자인 토큰 (컬러 · 타이포 · 스페이싱 · 브레이크포인트) 변수 정의만 둔다. 셀렉터 스타일은 넣지 않는다. 값은 브랜드 시스템 v1.0 기준이다. ========================================================================== */ :root { /* ---------- Color ---------- 비율은 Orbit Navy 60% · Paper/White 30% · Electric Blue 10%. 파랑은 위성 점처럼 작고 정확하게 쓴다 — 넓은 면을 칠하지 않는다 */ --orbit-navy: #0A1222; /* 주 잉크 · 어두운 배경 · 워드마크 */ --deep-navy: #16306A; /* 그라데이션 · 보조 면 */ --electric-blue: #2F6BFF; /* 밝은 배경 위 강조: 위성 점·면·큰 글씨 (18px+ 또는 굵게) */ --electric-blue-ink: #2A60E6; /* 밝은 배경 위 **작은 글씨**용. Electric Blue 는 paper 에서 4.12:1 로 AA 미달이라(§4.3 "large-text only") 같은 계열을 한 단계 어둡게 잡았다. paper 4.92:1 · white 5.37:1 */ --electric-blue-dark:#4D82FF; /* 어두운 배경 위 강조 (navy 5.3:1) */ --signal-blue-light: #A9C1FF; /* 어두운 배경 위 보조 글자 (navy 10.5:1) */ --steel-grey: #6B7280; /* 브랜드 토큰 (white 4.83:1) — 면·아이콘용 */ --line-grey: #D9DCE2; /* 구분선·테두리 */ --paper: #F4F5F7; /* 밝은 배경 */ --white: #FFFFFF; /* 역할 별칭 — 규칙을 하나하나 고치지 않고 토큰으로 따라오게 한다 */ --ink: var(--orbit-navy); --text-muted: var(--signal-blue-light); /* 어두운 배경 보조 */ --text-subtle: #7F93C4; /* 어두운 배경 캡션 — orbit-navy 6.1:1 */ /* 어두운 배경 위 글자 (2026-09-29 — Home 에서 만든 원칙을 전 페이지로 승격). 흰색 **하나**와 투명도 **하나**만 쓴다. 위계는 색이 아니라 크기·굵기로 만든다. 파란 기가 도는 --text-muted(#A9C1FF)를 본문에 쓰면 그 섹션만 파랗게 읽힌다. 실제 적용은 layout.css 의 .section--space / .section--navy 블록이 한다 — 그 안에서 --ink · --text-muted · --text-muted-on-light · --text-subtle 을 이 값으로 덮는다. **:root 에서 --text-muted 를 바꾸지 않는다** (푸터·flow·도면 라벨까지 흔들린다) */ --ink-on-dark: rgba(244, 245, 247, 0.86); /* 본문·제목 — orbit-navy 대비 약 12:1 */ --ink-on-dark-faint: rgba(244, 245, 247, 0.45); /* 각주·보조 표기·점선 — 약 4.7:1 */ /* 밝은 배경 본문 (2026-09-29 사용자 요청 — **제목·굵은 글씨와 같은 색으로 맞췄다**). 어두운 면에서 "흰색 하나와 투명도 하나" 로 통일한 것과 같은 원칙이다: 위계는 색이 아니라 크기·굵기로 만든다. 밝은 면은 잉크 하나로 간다. 이 토큰을 계속 두는 이유는 어두운 섹션에서 흰 계열로 덮어쓰는 고리이기 때문이다 (layout.css 의 .section--navy 블록). 값만 --ink 로 맞췄다. 폐기: #646B78 (Steel Grey 를 한 단계 어둡게 잡은 값. paper 4.92:1) */ --text-muted-on-light: var(--ink); /* paper 15.3:1 */ /* 고지·각주 전용 보조색 (2026-09-29). 본문이 --ink 로 통일되면서 비워진 자리다. **--steel-grey(#6B7280)를 쓰지 않는다** — paper 위에서 4.43:1 로 AA 에 미달한다. 이 값은 4.92:1 로 통과한다 (18px 미만 글자는 4.5:1 이 필요하다) */ --text-note-on-light: #646B78; /* paper 4.92:1 · white 5.36:1 */ /* 섹션 내부 데이터 선 (섹션 사이 구분선에는 쓰지 않는다) */ --line-on-dark: rgba(255, 255, 255, 0.12); --line-on-light: var(--line-grey); /* ---------- Typography: family ---------- Saira 는 width 축이 있는 가변 폰트다. 한글 글리프가 없으므로 스택 뒤에 Noto Sans KR 을 두어 **한글만** 자동으로 떨어지게 한다 (2026-09-28 IBM Plex Sans KR 에서 교체 — 더 또렷하고 400–700 전 굵기가 있다). 로고·워드마크 같은 브랜드 요소는 영문뿐이라 100% Saira 로 간다. 2026-09-29: 한 줄에 영문(Saira)과 한글(Noto Sans KR)이 섞이면 글자 크기가 어긋난다. 실측(OS/2 테이블): Saira x-height 0.510 em · cap 0.688 em, Noto Sans KR x-height 0.543 em · cap 0.733 em — 한글이 6.1% 크게 보인다. 두 폰트의 차이가 정확히 균일한 배율이므로 x-height 를 맞추면 cap 도 같이 맞는다. base.css 의 html 규칙에서 font-size-adjust 로 바로잡는다 */ --font-kr: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic"; --font-sans: "Saira", var(--font-kr), -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-display: var(--font-sans); --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Saira 의 width 축 — font-stretch 로 준다 */ --wd-display: 125%; /* Display · 로고 */ --wd-h1: 112%; --wd-h2: 108%; --wd-h3: 115%; --wd-body: 100%; /* ---------- Typography: size ---------- 스펙 값을 clamp() 의 최댓값으로 놓아 반응형은 유지한다. rem 기준(1rem = 16px) — 사용자 브라우저 글꼴 크기 설정을 존중한다 */ /* 2026-09-29: 11px 은 라벨·출처로 쓰기에 너무 작아 13px 로 올렸다 (5단계 스케일의 Caption). eyebrow(12px)보다 크지만 eyebrow 는 캡스 + 0.2em 자간이라 시각 크기는 여전히 eyebrow 가 크다 */ --fs-caption: 0.8125rem; /* 13px Plex Mono 캡션·라벨·출처 */ --fs-eyebrow: 0.75rem; /* 12px Plex Mono eyebrow */ --fs-sm: 0.875rem; /* 14px Small */ --fs-base: 1rem; /* 16px Body */ --fs-md: 1.125rem; /* 18px */ --fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); /* 18–20px H3 */ --fs-xl: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); /* 22–30px */ --fs-2xl: clamp(1.5rem, 1.15rem + 1.5vw, 1.875rem); /* 24–30px H2 */ --fs-h1: clamp(2rem, 1.5rem + 2.2vw, 2.75rem); /* 32–44px H1 */ --fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem); /* 40–72px Display */ /* ---------- Typography: weight ---------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 650; /* Twynbit 워드마크 굵기 */ /* ---------- Typography: line-height ---------- */ --lh-display: 1.11; /* 72/80 */ --lh-tight: 1.18; /* 44/52 */ --lh-snug: 1.27; /* 30/38 · 20/28 */ --lh-body: 1.63; /* 16/26 */ /* ---------- Typography: letter-spacing ---------- */ --ls-display: 0.10em; /* 브랜드 시스템의 H3 자간 0.08em 은 **캡스 전용** 값이다. 우리 h3 는 캡스가 아니고 대부분 한글 문장이라, 자간을 벌리면 어절이 흩어져 읽힌다 (2026-09-29 실측 지적: Why 카드 제목 18px 에 자간 1.44px). h3·h4 는 --ls-tight(0) 를 쓴다. 캡스는 --ls-eyebrow 를 쓰는 eyebrow 한 곳뿐이다 */ --ls-eyebrow: 0.20em; --ls-tight: 0; /* H1·H2 는 자간 0 */ /* 폐기 (2026-09-29): --ls-caption · --ls-label — mono 라벨 전용이었는데 mono 를 전부 걷었다 */ /* ---------- Spacing (4px 단위) ---------- 접두어 --sp- 사용 */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.5rem; /* 24px */ --sp-6: 2rem; /* 32px */ --sp-7: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ --sp-9: 6rem; /* 96px */ --sp-10: 8rem; /* 128px */ --gutter: clamp(1rem, 4vw, 2.5rem); /* 좌우 여백 16–40px */ --section-y: clamp(5rem, 11vw, 9.5rem); /* 섹션 상하 여백 80–152px */ --container-max: 80rem; /* 1280px */ --header-h: 72px; /* 고정 헤더 높이 · sticky 오프셋 */ --hero-h: 100svh; /* Home Hero 높이 — 첫 화면을 꽉 채운다 */ /* ---------- Breakpoints ---------- CSS 변수는 @media 조건에서 동작하지 않는다. JS 참조·문서화 용도이며, 미디어 쿼리에는 같은 값을 직접 쓴다 (모바일 우선, min-width). @media (min-width: 640px) { ... } @media (min-width: 1024px) { ... } @media (min-width: 1280px) { ... } */ --bp-sm: 640px; --bp-md: 1024px; --bp-lg: 1280px; }