/* 디자인 토큰 — 이 파일이 색·타입·간격의 단일 원천이다.
 *
 * ── 어떻게 여기까지 왔나 (설계 결정 이력) ─────────────────────────────────────
 * 처음 네 판은 밝은 지면 + 세리프 + 브랜드 그린이었고, 한 판은 야간 무드로 어두웠다.
 * 지금 형태를 만든 결정은 넷이다:
 *   ① 완전 무채색 (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);   /* 실패 상태 — 무채색이라 색 단독 전달이 애초에 불가능하다 */

  /* ── 타입 ────────────────────────────────────────────────────────────
     단일 그로테스크 계열, 굵기 대비로만 위계를 나눈다. 자체 호스팅 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;
}