/* _gallery — 디자인 시스템 정본. 페이지(홈·카테고리·404)가 <link> 로 실제로 읽는 파일이 이것이다.
   설계 단계의 초안(_design/tokens.css)을 여기로 옮겼다 — 값을 바꾸려면 여기를 고친다.
   이름은 Tailwind 4 @theme 이름공간 그대로다. 정적 HTML 에서는 @theme 을 브라우저가 모르는 규칙으로 버리므로
   :root 에 둔다 — Next.js 로 승급할 때 선택자만 @theme 으로 바꿔 globals.css 에 옮긴다.
   방향: A. 교정쇄 — 차가운 회백 종이 위 흰 대지, 먹 글자, 교정 마젠타 한 점. 모서리 0 · 그림자 0 · 그라데이션 0.
   대비는 _design/DESIGN.md 대비표에 실측값. gallery.css 는 여기 변수만 쓴다. */

:root {
  /* ── 색 ─────────────────────────────────────────────────────────────── */
  --color-paper: #f0f1f2;     /* 바탕 — 차가운 회백. 템플릿의 따뜻한 종이색(#f7f5f1)과 섞이지 않는다 */
  --color-plate: #ffffff;     /* 대지 — 썸네일과 카드 본문이 올라가는 흰 면 */
  --color-ink: #131519;       /* 먹 — 제목·본문·눌린 칩 채움·워드마크 */
  --color-prose: #3a3f46;     /* 본문 보조 — 목적 한 줄·태그라인 */
  --color-sub: #5f666e;       /* 작은 글자(11~12px) — 종이 위 5.14:1, 대지 위 5.81:1 */
  --color-line: #cfd3d7;      /* 장식 선 — 대지 테두리·구분선·흰 칩 테두리 (문자·컴포넌트 경계 아님) */
  --color-accent: #c40062;    /* 교정 마젠타 — 로고 한 점·포커스 링·hover 번호·승급 후보 배지. 종이 위 5.27:1 */
  --color-on-accent: #ffffff;
  --color-on-ink: #ffffff;    /* 눌린 칩·"서비스됨" 배지 글자 */
  --color-tint-60: #6b6d70;   /* 먹 60% — 로고 B 둘째 패치 (비문자) */
  --color-tint-30: #aeafb1;   /* 먹 30% — 로고 B 셋째 패치 (비문자) */
  --color-tint-12: #d5d7d8;   /* 먹 12% — 비문자 예비 */

  /* ── 서체 ───────────────────────────────────────────────────────────── */
  --font-display: "Archivo", "Pretendard Variable", Pretendard, sans-serif;            /* 워드마크·404 숫자만 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif;
  /* 모노 라벨에 한글이 섞인다(슬러그 라인·배지·필터 묶음 이름). JetBrains Mono 에는 한글이 없어
     OS 마다 다른 대체 서체가 끼어들므로, 한글은 이미 받은 Pretendard 가 받도록 둘째 자리에 둔다. */
  --font-mono: "JetBrains Mono", "Pretendard Variable", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── 글자 크기 (px 환산 · 행간) ─────────────────────────────────────── */
  --text-2xs: 0.6875rem;      --text-2xs--line-height: 1.5;    /* 11 — 모노 라벨. 12px 미만은 모노 라틴·숫자에만 */
  --text-xs: 0.75rem;         --text-xs--line-height: 1.6;     /* 12 — 꼬리·칩·한글이 든 모노 라벨 */
  --text-sm: 0.875rem;        --text-sm--line-height: 1.6;     /* 14 — 카드 태그라인·Latin 둘째 줄 */
  --text-base: 1rem;          --text-base--line-height: 1.7;   /* 16 — 본문 기본 */
  --text-lg: 1.125rem;        --text-lg--line-height: 1.6;     /* 18 — 목적 한 줄 */
  --text-xl: 1.25rem;         --text-xl--line-height: 1.3;     /* 20 — 카드 이름 */
  --text-2xl: 1.75rem;        --text-2xl--line-height: 1.2;    /* 28 — 카테고리 페이지 h1 */
  --text-wordmark: clamp(3.5rem, 9vw, 8rem);   --text-wordmark--line-height: 0.9;   /* 56~128 — "Design". 화면에서 가장 큰 것 */
  --text-404: clamp(5rem, 16vw, 12rem);        --text-404--line-height: 0.9;

  /* 자간 — display 는 조이고, 모노 대문자는 벌린다 */
  --tracking-wordmark: -0.045em;
  --tracking-title: -0.02em;
  --tracking-label: 0.06em;

  /* ── 간격 ───────────────────────────────────────────────────────────── */
  --spacing: 0.25rem;                            /* 4px 기준 척도 — 1·2·3·4·6·8·12·16·24 단위로만 */
  --spacing-page-x: clamp(20px, 5vw, 72px);      /* 페이지 좌우 */
  --spacing-gutter: clamp(16px, 2vw, 28px);      /* 격자 칸 사이 */
  --spacing-plate: 12px;                         /* 대지 안쪽 — 1100 이상 14 (아래 @media). 설계는 clamp(10,1.2vw,14) — 좁은 화면 10px 는 impeccable 기준(12~16) 밑이라 12 로 올렸다 */
  --spacing-block: clamp(40px, 6vw, 96px);       /* 블록 사이(머리→격자, 격자→꼬리) */
  --spacing-masthead-top: clamp(28px, 3.5vw, 48px); /* 설계 80 → 구현 48: 1440×900 첫 화면에 첫 행 사양표(줄5)까지 들게 (NOTES.md) */
  --spacing-mark-gap: 8px;                       /* 재단 표시가 워드마크 박스에서 떨어지는 거리 */
  --spacing-touch: 44px;                         /* 칩·정렬·필터 토글 최소 높이(모바일) — 데스크톱은 32 */
  --spacing-swatch: 16px;                        /* 팔레트 칩 한 변 */

  /* ── 모서리 · 그림자 ─────────────────────────────────────────────────── */
  --radius-none: 0;           /* 전부 직각. 교정쇄에 둥근 모서리는 없다 */
  --radius-chip: 0;
  --shadow-none: 0 0 #0000;   /* 그림자 0 — 대지는 선으로만 구분한다 */

  /* ── 모션 ───────────────────────────────────────────────────────────── */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);   /* hover 색 전환 */
  --ease-draw: cubic-bezier(0.16, 1, 0.3, 1);        /* 재단 표시 line drawing 1회 */
  --default-transition-duration: 120ms;              /* hover */
  --duration-accordion: 180ms;                       /* 모바일 필터 펼침 */
  --duration-draw: 320ms;                            /* 재단 표시 */

  /* ── 폭 · 브레이크포인트 ─────────────────────────────────────────────── */
  --container-gallery: 1360px;
  --breakpoint-md: 680px;     /* 2열 — 미디어 쿼리는 변수를 못 읽는다. gallery.css 의 @media 숫자와 같이 고친다 */
  --breakpoint-lg: 1100px;    /* 3열 · 필터 바 펼침 */

  /* ── 선 ─────────────────────────────────────────────────────────────── */
  --line-w: 1px;              /* 대지·구분선·칩 */
  --line-w-mark: 1.5px;       /* 재단 표시 */
  --line-w-current: 2px;      /* 카테고리 현재 밑선·포커스 링 */
}

/* 3열(1100 이상)에서 대지 안쪽을 넓힌다. 미디어 쿼리는 변수를 못 읽는다 — 숫자는 --breakpoint-lg 와 같다. */
@media (min-width: 1100px) {
  :root {
    --spacing-plate: 14px;
  }
}