/* ══════════════════════════════════════════════════════════════════════════ tokens.css — 디자인 토큰. 이 프로젝트의 유일한 «값» 출처. 색·서체·크기·간격을 여기서만 정한다. 화면 CSS 는 값을 직접 쓰지 않고 이 이름을 쓴다. 셸 CSS 는 책임별로 나뉘어 있다(`static/css/shell/`). 한 파일이 토큰·바탕·머리·Footer를 모두 갖고 있으면 «머리 간격 하나» 를 고치러 700줄을 뒤져야 하고, 무엇이 시스템이고 무엇이 한 컴포넌트인지 구분이 사라진다. tokens.css 색·서체·크기·간격 — **다른 모든 CSS 가 의존한다** base.css 리셋·바탕·초점·건너뛰기 — tokens 에만 의존 nav.css 머리 한 컴포넌트 — tokens 에만 의존 footer.css Footer 한 컴포넌트 — tokens 에만 의존 의존은 한 방향뿐이다(tokens ← 나머지). 컴포넌트끼리는 서로를 모른다. ══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════ 1. 토큰 ═══════════════════════════ */ :root { color-scheme: light dark; /* ── 색 ── 무채색 한 벌 + 액센트 하나 + 상태 넷. 액센트는 «누를 수 있는 것/지금 여기» 에만 쓰고, 상태색은 데이터에만 쓴다. 둘을 섞으면 표에서 «고른 것» 과 «상태» 가 구분되지 않는다. */ --bg: #ffffff; --bg-2: #f6f7f9; /* 한 단 낮은 면(표 머리·고정 영역) */ --surface: rgba(255, 255, 255, 0.72); /* 흐림 위에 올리는 반투명 면 */ --line: #e6e8ec; --line-strong: #d3d7de; --fg: #0d1117; --fg-2: #57606a; /* 12px 법적 고지가 이 색을 쓴다 — 8b949e 는 --bg-2 위에서 2.9:1 로 AA(4.5:1) 미달이었다 (실측). 작은 글씨일수록 색이 곧 «읽을 수 있는가» 다. */ --fg-3: #616a75; --accent: #0b62d6; --accent-hover: #0a55b8; --accent-soft: rgba(11, 98, 214, 0.1); --on-accent: #ffffff; --ok: #1a7f52; --warn: #9a6b12; --bad: #c22a2f; --idle: #6b7280; /* 계약 축의 PoC — 상태 색(초록·황·빨강)과 **다른 계열**이어야 한다. 같은 계열을 쓰면 한 줄에 색 언어가 두 벌이 되어 「이 빨강이 장애인가 계약인가」가 된다. */ --poc: #6d28d9; /* ── 서체 ── 웹폰트를 쓰지 않는다(받을 것이 없으면 첫 페인트가 기다리지 않는다). 한글은 시스템 고딕이 받는다. 숫자·라벨은 고정폭으로 두어 값이 바뀔 때 폭이 흔들리지 않게 한다. */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, 'Liberation Mono', monospace; --t-micro: 0.6875rem; /* 11px — 대문자 미세 라벨 */ /* 12px — Footer 의 법적 고지(저작권·권리 문구)에 쓰는 크기. «표준» 이라 부르는 것은 규격이 아니라 관행이다: Apple·GitHub·Amazon·Microsoft 의 저작권 줄이 12px 이고, 링크가 적은 Footer 는 14px 을 쓰기도 한다. 역할 이름을 붙여 두면 나중에 «여기가 왜 12인가» 를 다시 묻지 않는다. */ --t-legal: 0.75rem; --t-sm: 0.8125rem; /* 13px */ --t-base: 0.875rem; /* 14px */ --t-lg: 1rem; /* ── 치수 ── 4px 격자 */ --nav-h: 3.5rem; /* 56px — 얇지만 손가락이 닿는다 */ /* **누를 수 있는 것의 최소 표적**(WCAG SC 2.5.8). 규격에서 온 값이라 «디자인 취향» 이 아니고, 회귀 검사가 이 값으로 화면 전체를 훑는다 (`test_site.py::test_touch_targets_meet_the_minimum`, 실측 위반 69건에서 나온 규칙). 전에는 아홉 군데에 `24px` 로 박혀 있었고 같은 주석이 그만큼 반복됐다 — 규격이 바뀌거나 한 곳만 고치면 갈린다. */ --tap-min: 24px; /* **컨트롤 한 줄의 높이.** 단추·입력칸·셀렉트가 같은 높이여야 한 줄에 섞여도 밑선이 맞는다(상세의 「다른 서비스로」 줄이 그 줄이다). 표의 줄(`--tap-min` 이 아니라 이 값)도 여기에 맞춰 컨트롤과 같은 리듬을 갖는다. 표적 최소(24px)를 넉넉히 넘긴다. */ --control-h: 2.5rem; /* 40px */ /* 작은 컨트롤(결과 줄의 보기 단추·표의 도구 단추). 하드코딩 `2rem` 이던 것을 토큰으로 옮겼다 — 그 값이 CSS 에 박혀 있으면 «손가락으로 누르는 기기» 에 반응할 수 없다. */ --control-h-sm: 2rem; /* 32px */ --gutter: clamp(1rem, 3vw, 2.5rem); /* 세로 여백은 주인이 둘뿐이다. --gap-shell — 셸(머리·띠·꼬리)과 본문 사이. **지면(`#main`)이 낸다.** --gap-act — 구획과 구획 사이. 구획이 낸다. 전에는 주인이 없어서 «첫·마지막 구획이 우연히 내는 값» 이 셸과의 간격을 대신했고, 그래서 화면마다 달랐다(실측: 위 16·22·40px / 아래 43·88·95px). 구획 하나를 고치면 셸과의 간격이 따라 움직이는 것도 같은 원인이다. */ --gap-shell: clamp(1.5rem, 4vh, 2.5rem); --gap-act: clamp(1.5rem, 4vh, 2.5rem); /* **도구 구획과 그 결과 사이는 좁다.** «조건을 바꾸고 결과를 본다»·«고르고 그 서비스를 본다» 는 한 동작의 두 부분이라, 표준 여백을 주면 도구를 쓴 뒤 결과를 보려고 눈이 멀리 움직인다(실측: 목록에서 걸러내기 끝부터 표 머리까지 205px). 아래 구획이 자기 라벨 막을 가질 때만 쓴다 — 막이 «여기부터 새 구획» 을 말하므로 여백까지 넓힐 필요가 없다. 쓰는 쪽은 `.act.is-tool`(`shell/base.css`)이고 값은 여기 한 곳에만 있다. */ --gap-act-tight: 1.1rem; /* ── 폭 ── Tailwind 의 표준 컨테이너를 그대로 옮긴다. **웹페이지 폭에 국제 표준은 없다.** ISO·W3C 어디에도 콘텐츠 폭 규정이 없고, 규격이라 부를 수 있는 것은 WCAG 2.2 SC 1.4.8(AAA) 하나인데 그건 폭이 아니라 «한 줄 80자» 다. 나머지는 전부 프레임워크 관행이고, 그중 하나를 골라 일관되게 쓰는 것이 최선이다. Tailwind 의 `container` 는 **고정값이 아니라 단계형**이다 — 브레이크포인트에 닿을 때마다 max-width 가 그 지점 값으로 점프한다. 그래서 «Tailwind 관행» 과 «반응형» 은 충돌하지 않는다: 단계 자체가 반응 장치다. ~639 100% (여백만 남기고 다 쓴다) ≥640 640px sm ≥768 768px md ≥1024 1024px lg ≥1280 1280px xl ≥1536 1536px 2xl 값은 `:root` 의 `--page-max` 한 곳에서만 바뀌고, 쓰는 쪽(머리·Footer·본문)은 미디어쿼리를 몰라도 된다. 단계를 바꾸려면 여기만 고친다. ※ Tailwind 가 px 를 쓰므로 여기서도 px 다. 대가가 하나 있다: 브라우저 **기본 글꼴만** 키운 사용자에게는 폭이 그대로다(확대/축소는 CSS px 가 함께 커지므로 반응한다). rem 으로 바꾸면 그 사용자에게도 비례하지만 더는 Tailwind 표준이 아니게 된다. `--measure` 는 별개다. 읽는 글은 폭이 아니라 **글자 수**로 가둔다(위 WCAG 기준) — `ch` 는 글꼴 크기에 비례하므로 그 자체로 반응형이고, 68 은 권장 구간(45~75) 안이다. */ /* 지면 폭의 상한. **한 줄이고 연속이다.** 전에는 Tailwind 식 사다리였다(`@media` 다섯 개로 640·768·1024·1280·1536px). 그 방식은 폭을 **계단으로** 떨어뜨린다 — 뷰포트 1280px 에서 지면 1203px 이던 것이 1276px 에서 1024px 로 **179px** 준다(상세는 963→768px 로 195px). 그래서 「접을 때」와 「넘칠 때」가 어긋나고, 그 사이 구간이 결함이 됐다(이슈로 두 번 나왔다: 상세 961~1020px, 목록). `min(1536px, 100%)` 은 같은 상한(1536px)을 지키면서 그 아래로는 화면을 그대로 따라간다. 계단이 없으므로 화면 CSS 의 컨테이너 질의가 «내용이 실제로 넘치는 폭» 과 일치한다. */ --page-max: min(1536px, 100%); --measure: 68ch; --radius: 6px; /* 0 은 터미널, 999px 은 소비자 앱. 제품 도구는 그 사이 */ --radius-sm: 4px; --ease: cubic-bezier(0.2, 0, 0, 1); --dur: 0.16s; /* ── 유리 ── HUD 한 곳이 쓰는 값들. **색을 CSS 파일에 박지 않는다** — 여기 두 벌만 두면 테마 전환에서 갈리지 않는다. `--glass` 는 반투명 판, `--glass-line` 은 그 테두리, `--glass-shine` 은 윗변에 얹는 1px 광택(유리의 두께를 만드는 것이 이 선이다). */ --glass: rgba(255, 255, 255, 0.58); --glass-line: rgba(15, 23, 42, 0.14); --glass-shine: rgba(255, 255, 255, 0.9); --shadow: rgba(15, 23, 42, 0.16); /* ── 배너 바탕 ── 사진 위에 얹는 **막**. 글자가 사진 위에 바로 앉으면 대비가 «움직이는 값» 이 된다(실측 1.0:1) — 이 두 값이 그 아래를 고정한다. 글자 쪽(`near`)은 거의 불투명하고, 반대쪽(`far`)으로 갈수록 옅어져 사진이 드러난다. 두께를 화면이 조절한다: 홈은 오른쪽에 터미널이 앉으므로 far 쪽을 더 덮고, 목록은 그쪽이 비어 있어 그대로 쓴다(각 화면 CSS 참조). far 는 0.55 → 0.25 → 0.15 → **0.22 로 자리잡았다**(사용자 요청 «너무 뿌옇다»). 0.55→0.45→0.35→0.25 로 한 단씩 내리며 봤고, 각 단계에서 최악 사진(순검정) 기준 대비를 함께 쟀다 — 글자가 전부 near 구간에 있어 5.12:1 로 변하지 않았다. 즉 이 값은 «사진이 얼마나 보이나» 만 정한다. */ --banner-veil-near: rgba(255, 255, 255, 0.97); --banner-veil-far: rgba(255, 255, 255, 0.22); --z-nav: 50; } /* 어두운 계열 — 저장된 선택(`data-theme`)이 먼저, 없으면 OS 설정을 따른다. 값은 **한 벌만** 둔다: 같은 값을 두 곳에 쓰면 한쪽만 고치는 실수가 난다. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #0d1117; --bg-2: #131922; --surface: rgba(13, 17, 23, 0.72); --line: #212934; --line-strong: #303a48; --fg: #e6edf3; --fg-2: #9198a1; --fg-3: #858e9b; --poc: #c4b5fd; --accent: #4a9eff; --accent-hover: #6fb2ff; --accent-soft: rgba(74, 158, 255, 0.14); --on-accent: #06121f; --ok: #3fb27f; --warn: #d9a441; --bad: #e5484d; --idle: #6b7481; --glass: rgba(22, 29, 40, 0.55); --glass-line: rgba(160, 190, 230, 0.16); --glass-shine: rgba(190, 215, 245, 0.16); --shadow: rgba(0, 0, 0, 0.55); --banner-veil-near: rgba(13, 17, 23, 0.97); --banner-veil-far: rgba(13, 17, 23, 0.28); } } :root[data-theme='dark'] { --bg: #0d1117; --bg-2: #131922; --surface: rgba(13, 17, 23, 0.72); --line: #212934; --line-strong: #303a48; --fg: #e6edf3; --fg-2: #9198a1; --fg-3: #858e9b; --poc: #c4b5fd; --accent: #4a9eff; --accent-hover: #6fb2ff; --accent-soft: rgba(74, 158, 255, 0.14); --on-accent: #06121f; --ok: #3fb27f; --warn: #d9a441; --bad: #e5484d; --idle: #6b7481; --glass: rgba(22, 29, 40, 0.55); --glass-line: rgba(160, 190, 230, 0.16); --glass-shine: rgba(190, 215, 245, 0.16); --shadow: rgba(0, 0, 0, 0.55); --banner-veil-near: rgba(13, 17, 23, 0.97); --banner-veil-far: rgba(13, 17, 23, 0.28); } /* ── 손가락으로 누르는 기기 ── **표적을 44px 로 올린다.** `--tap-min: 24px` 는 SC 2.5.8(최소)에서 온 값이고, 마우스 커서가 있는 화면에서는 그것으로 충분하다. 손가락은 접촉면이 넓어 24px 표적을 정확히 누르지 못한다 — SC 2.5.5(AAA)와 두 플랫폼 지침(Apple HIG 44pt · Material 48dp)이 44~48px 을 말하는 이유다. **폭이 아니라 «가리키는 장치» 로 판단한다**(`pointer: coarse`). 폭으로 하면 두 가지가 틀린다: 좁은 창을 띄운 데스크톱이 44px 을 받고, 손가락으로 쓰는 큰 태블릿이 24px 을 받는다. `hover: none` 을 함께 보는 이유는 터치 겸용 노트북(트랙패드+터치)에서 마우스가 주 장치일 때 커지지 않게 하기 위해서다. **이 규칙은 값 하나만 바꾼다** — 표적을 쓰는 열다섯 곳이 모두 이 토큰을 읽으므로 화면 CSS 는 손대지 않는다. */ @media (pointer: coarse) and (hover: none) { :root { --tap-min: 44px; /* 작은 단추도 같이 올린다 — 표의 도구 단추(점검·편집·삭제)가 이 값을 쓴다. 32px 이면 손가락으로 옆 단추를 누른다(세 개가 붙어 있다). */ --control-h-sm: 44px; /* 컨트롤 한 줄도 같이 올린다. 40px 로 남겨 두면 그 줄 안에 놓인 표적(44px)이 칸보다 커져 위아래로 삐져나온다 — 검색칸의 지우기 단추에서 실측(2px). */ --control-h: 44px; } }