/* 디자인 토큰 — 이 파일이 색·타입·간격의 단일 원천이다. * * ── 어떻게 여기까지 왔나 (설계 결정 이력) ───────────────────────────────────── * 처음 네 판은 밝은 지면 + 세리프 + 브랜드 그린이었고, 한 판은 야간 무드로 어두웠다. * 지금 형태를 만든 결정은 넷이다: * ① 완전 무채색 (2026-08-16 사용자 결정). 브랜드 그린 oklch(43.4% 0.076 150)을 폐기했다 — * 그 전까지 "한 번도 안 바뀐 유일한 상수"였다. 강조는 색이 아니라 명도·굵기·면 반전으로 만든다. * 부작용으로 색이 신호이던 3곳을 다시 짰다: 신착 수(면 반전) · 워드마크 hover(밑줄) · * 카드 hover(그림자를 껐으니 들어올림). * ② 검색을 sticky 마스트헤드 안으로, 상자가 아니라 밑줄로. 두 화면이 같은 크롬을 쓴다. * ③ 사진이 위계를 만든다. 썸네일 4:5 세로 · 카드 260px · 라벨과 가격은 14px 이하. * 공개 레퍼런스 두 곳(음악 레이블 · 럭셔리 여성복)을 읽어보니 업종이 전혀 다른데도 * 셋이 같았다 — 디스플레이 타입 없음(최대 24~25px) · 유채색 0 · 이미지가 전부. * 그 중 "폭 변조(100%→61%→92%)"는 가져오지 않았다: 룩북은 큐레이션된 시퀀스지만 * 우리는 검색 결과라, 폭을 흔들면 존재하지 않는 순위를 있다고 말하게 된다. * ④ 타입 상한은 두지 않는다. 레퍼런스의 25px 상한을 한 판 따랐다가 폐기했다 — * 그건 이미 인지도가 있는 브랜드의 선택이고, 우리 시작면에는 시선을 붙잡을 것이 문장 하나뿐이라 * 크기가 유일한 위계 수단이다. * 선은 쓰지 않는다. 남은 테두리는 검색 밑줄(설계)과 아코디언 화살표(아이콘)뿐이다. * ──────────────────────────────────────────────────────────────────────────── * * index.html은 값을 직접 쓰지 않고 var()로만 참조한다. * 서빙: server.mjs의 /tokens.css·/fonts/* 라우트 (외부 CDN 없음 — allowlist 정책상 폰트·CSS 모두 * 자체 오리진만. 웹폰트=외부 CDN 요청이 아니라 자체 서빙이면 정책과 충돌하지 않는다) */ /* Interop 1.8 R/B — 사용자가 직접 제공한 배포본(Interop-1.8_web.zip, 2026-08-16). subset 판본을 쓴다(239KB+231KB). original은 굵기당 1MB이고, 콜드스타트가 부채로 등기돼 있어 (PRODUCT §3) 폰트 용량이 그대로 첫 화면 비용이다. **라이선스 파일이 배포 zip에 들어 있지 않다** — 이 저장소는 폰트 라이선스를 여기 기록해 왔으므로 (이전 학교안심 OFL·Wanted Sans OFL) 근거를 확인해 이 주석에 채울 것. 자체 오리진에서 서빙(render-proxy/fonts/). */ @font-face { font-family: "Interop"; src: url("/fonts/interop-r.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Interop"; src: url("/fonts/interop-b.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ── 색 · 완전 무채색 (2026-08-16 사용자 결정) ──────────────────────── 브랜드 그린(oklch 43.4% 0.076 150)을 폐기했다. 이전 판들이 "v1부터 한 번도 안 바뀐 유일한 상수"로 지켜온 값이지만, 지면 전체를 흑백으로 가라앉히는 게 이번 판의 지시다. 강조는 색이 아니라 **명도 대비와 굵기**로만 만든다 — 액센트 면은 잉크색 그대로다. 대비 검증(WCAG 2.1, OKLCH(C=0)→sRGB 직접 계산·재현 가능): ink on paper = 19.41:1 ink-2 on paper = 7.77:1 ink-2 on paper-2 = 7.02:1 ink on paper-2 = 17.54:1 accent-ink on accent = 19.41:1 focus on paper = 19.41:1 rule-2 on paper = 3.36:1 본문 기준(4.5:1)·비텍스트 기준(3:1) 전부 통과. rule-2는 컨트롤 테두리라 1.4.11 대상이며 L=78%였던 초안이 2.00:1로 미달해 L=64%로 내렸다. */ --color-paper: oklch(100% 0 0); /* 순백 — 틴트 없음 */ --color-paper-2: oklch(96.5% 0 0); /* 카드·썸네일 바탕 */ --color-paper-3: oklch(92.5% 0 0); /* hover/pressed 면 */ --color-rule: oklch(88.5% 0 0); /* 헤어라인 — 장식, 대비 기준 없음 */ --color-rule-2: oklch(64% 0 0); /* 컨트롤 테두리 — 3:1 대상 */ --color-ink-2: oklch(44% 0 0); /* 보조 텍스트·placeholder */ --color-ink: oklch(16% 0 0); /* 본문 — 순검정은 아니다 */ --color-accent: oklch(16% 0 0); /* 액센트 = 잉크. 색이 아니라 면으로 강조한다 */ --color-accent-2: oklch(30% 0 0); /* accent 면의 hover — 밝기로만 반응 */ --color-accent-ink: oklch(100% 0 0); /* accent 면 위의 글자 */ --color-focus: oklch(16% 0 0); /* 포커스 링 — 무채색 유지(사용자 결정) */ --color-error: oklch(35% 0 0); /* 실패 상태 — 무채색이라 색 단독 전달이 애초에 불가능하다 */ /* 네이티브 컨트롤(검색 입력·체크박스·스크롤바)이 테마를 따라가게 한다. 이 한 줄이 없으면 아래 다크 팔레트를 다 잡아도 입력창만 흰 채로 남는다 — 우리가 못 칠하는 부분은 브라우저가 칠한다. */ color-scheme: light dark; /* ── 타입 ──────────────────────────────────────────────────────────── 단일 그로테스크 계열, 굵기 대비로만 위계를 나눈다. 자체 호스팅 Wanted Sans Std R/B 두 굵기만 로드했다 — 그 두 값 밖으로 font-weight를 쓰지 않는다(합성 볼드 금지). 실패 시 시스템 한글 스택 폴백. 숫자(가격·통계)만 시스템 모노스페이스 아웃라이어로 뺀다 — 표에서 자릿수가 흔들리면 안 되니까. */ --font-body: "Interop", system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", Roboto, sans-serif; --font-display: var(--font-body); /* 단일 계열 — 굵기(400/700)로만 대비 (2+1 규칙의 의도적 예외) */ --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Noto Sans Mono", monospace; /* 전 구간을 한 단씩 내렸다(2026-08-16 지시: 글자 크기 최대한 축소). 내리지 못하는 두 값이 있다 — 둘 다 기능 하한이라 미학보다 앞선다: --text-xs 12px : 한글 캡션 하한. 라틴은 11px에서도 읽히지만 한글은 자소가 뭉갠다. --text-base 16px: iOS가 이보다 작은 입력에 포커스하면 화면을 확대한다. 검색창이 그걸 쓴다. */ --text-xs: 0.75rem; /* 12px — 한글 캡션 하한 (내릴 수 없음) */ --text-sm: 0.8125rem; /* 13px — 본문 기본 (was 14) */ --text-base: 1rem; /* 16px — 검색 입력 전용. iOS 입력 확대 방지선 (내릴 수 없음) */ --text-md: 1.0625rem; /* 17px (was 20) */ --text-lg: 1.25rem; /* 20px (was 25) */ --text-xl: 1.5rem; /* 24px (was 31) — 현재 미사용 */ --lh-tight: 1.15; --lh-body: 1.6; /* 한글은 라틴보다 행간이 넉넉해야 읽힌다 */ /* ── 간격 · 4pt 스케일 ─────────────────────────────────────────────── */ --space-3xs: 0.125rem; /* 2px */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2.5rem; /* 40px */ --space-2xl: 4rem; /* 64px */ /* ── 형태 — 반경 없음 (2026-08-16 지시) ─────────────────────────────── 이 지면에는 둥근 모서리가 하나도 없다. 사진을 자르는 건 사각형이 정직하고, 컨트롤은 면과 여백으로 구분되지 형태로 구분되지 않는다. 토큰 이름은 남겨 둔다 — 호출부를 전부 고치지 않고 한 곳에서 되돌릴 수 있게. 되돌리려면 이 세 값만 바꾸면 된다(pill 999px · card 12px · input 8px). */ --radius-pill: 0; --radius-card: 0; --radius-input: 0; --rule: 1px; --rule-thick: 2px; /* ── 그림자 ────────────────────────────────────────────────────────── 무채색 지면에서 색 없는 그림자는 회색 얼룩으로 보인다. 깊이는 헤어라인으로만 만든다. 토큰은 남기되 값은 none — 호출부를 고치지 않고 깊이 신호를 끈다. */ --shadow-whisper: none; --shadow-lift: none; /* ── 모션 · modern-minimal 기본값 ───────────────────────────────────── 이전 판의 스태거를 폐기한다(--stagger: 0). 결과가 순차로 흘러들어오는 화면에서 스태거는 체감 지연만 늘린다. 도착은 페이드 하나로 끝낸다. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --stagger: 0ms; /* 컨트롤 높이 — 터치 타깃 하한 44px, 검색 행만 48px */ --control-h: 44px; --control-h-search: 48px; /* ── z-index · 여섯 단계, 이름으로만 ─────────────────────────────────── */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500; } /* ── 다크 테마 (2026-08-19) ────────────────────────────────────────────────── **색 토큰만 다시 잡는다.** 간격·타입·굵기는 그대로다 — 다크는 다른 디자인이 아니라 같은 디자인의 다른 지면이다. 컴포넌트 CSS는 한 줄도 안 고쳤다(전부 토큰을 통해 칠하고 있었다). 유일한 예외는 index.html의 하트 아이콘 그림자 하나이고 거기서 따로 뒤집는다. 순검정 지면과 순백 글자를 쓰지 않는다. 순검정은 OLED에서 스크롤 잔상이 생기고, 순백 글자는 어두운 지면에서 번져 보인다(halation) — 라이트에서 --color-ink를 순검정으로 두지 않은 것과 같은 이유다. 대비 검증 (무채색 oklch는 선형 sRGB = L³, 상대휘도 Y = L³ — 라이트 팔레트의 문서값 19.41·7.77·17.54·3.36을 이 식으로 재현해 맞춘 뒤 계산했다): ink on paper = 14.73:1 ink-2 on paper = 7.85:1 ink-2 on paper-2 = 6.74:1 ink on paper-2 = 12.64:1 accent-ink on accent = 14.73:1 focus on paper = 14.73:1 rule-2 on paper = 3.73:1 error on paper = 12.61:1 본문 기준(4.5:1)·비텍스트 기준(3:1) 전부 통과. rule-2는 라이트(3.36)보다 오히려 여유가 크다. 액센트의 관계가 뒤집힌다: 라이트에서는 어두운 면에 흰 글자였고, 다크에서는 밝은 면에 어두운 글자다. 「색이 아니라 면으로 강조한다」는 규칙은 그대로고 지면만 반대가 된다. */ @media (prefers-color-scheme: dark) { :root { --color-paper: oklch(20% 0 0); /* 지면 — 순검정 아님 */ --color-paper-2: oklch(26% 0 0); /* 카드·썸네일 바탕 */ --color-paper-3: oklch(32% 0 0); /* hover/pressed 면 */ --color-rule: oklch(32% 0 0); /* 헤어라인 — 지면 대비 1.43 (라이트의 1.41과 같은 세기) */ --color-rule-2: oklch(55% 0 0); /* 컨트롤 테두리 — 3:1 대상 */ --color-ink-2: oklch(74% 0 0); /* 보조 텍스트·placeholder */ --color-ink: oklch(93% 0 0); /* 본문 — 순백은 아니다 */ --color-accent: oklch(93% 0 0); /* 액센트 = 잉크. 라이트와 반대로 밝은 면이 된다 */ --color-accent-2: oklch(80% 0 0); /* accent 면의 hover — 밝기로만 반응(이번엔 어두워진다) */ --color-accent-ink: oklch(20% 0 0); /* accent 면 위의 글자 = 지면색 */ --color-focus: oklch(93% 0 0); --color-error: oklch(88% 0 0); /* ink-2보다 밝다 — 라이트에서 ink-2보다 어두웠던 것과 같은 위계 */ } }