/* halide — 디자인 시스템 정본(설계 3단계). 이름은 Tailwind 4 @theme 이름공간, 선언은 :root(#73 — @theme 블록은 브라우저가 읽지 않는다).
   흰 벽 갤러리: 채도 거의 0 의 중성 흰 바탕 + 먹색 글자 + 라벨 청 한 색(OKLCH h 233.4 — 라벨·포커스·현재 위치만, 큰 면 0). */
:root {
  /* 색 — 벽과 먹 */
  --color-bg: #f6f7f7;            /* 전시실 벽(중성 흰, oklch L 0.974 C 0.001) */
  --color-wall: #ffffff;          /* 조명 받은 벽 — 라이트박스·서랍·메뉴 시트·자리표시자 라벨 판 */
  --color-bg-deep: #eceeee;       /* 눌림·선택 줄 바탕(면적 작게) */
  --color-ink: #1b1d1f;           /* 먹색 — 본문·제목 */
  --color-ink-2: #55595d;         /* 메타·비활성 링크·매체 줄 */
  --color-ink-3: #64686c;         /* 라벨 번호·열 머리·중심선 눈금 */
  --color-line: #dfe1e2;          /* 벽 이음매·머리 아래·꼬리 위(장식 구분) */
  --color-line-strong: #80858a;   /* 테두리 단추·사진 호버 테(비글자 3:1) */
  --color-accent: #14668a;        /* 라벨 청 — oklch(0.482 0.093 233.4) */
  --color-veil: rgb(27 29 31 / 0.24); /* 서랍·메뉴 뒤 덮개 */

  /* 서체 */
  --font-display: "Epilogue", "Pretendard Variable", system-ui, sans-serif;
  --font-sans: "Pretendard Variable", "Pretendard", system-ui, -apple-system, sans-serif;
  --font-num: "Epilogue", "Pretendard Variable", sans-serif; /* 숫자·작품 번호·크기 — tabular-nums */

  /* 글자 크기 */
  --text-2xs: 11px;   /* 라벨 4줄째(작품 번호)·열 머리·중심선 눈금 */
  --text-xs: 12px;    /* 라벨 매체·크기 줄·통계 이름칸 */
  --text-sm: 13px;    /* 라벨 1·2줄·메타·전시 머리 줄 */
  --text-base: 14px;  /* UI 링크·벽 글 서문 */
  --text-md: 15px;    /* 소개 문장·작가 ko 이름 */
  --text-lg: 22px;    /* 벽 글 제목(ko 600 / 라틴 Epilogue 300)·홈 컬렉션 띠 이름 */
  --text-xl: 28px;    /* 컬렉션 목록 라틴 이름 */
  --text-2xl: 36px;   /* 작가 목록 라틴 이름 */
  --text-page: 32px;  /* 쪽 머리(한글 Pretendard 600) */
  --text-display: clamp(40px, 24px + 3.2vw, 72px); /* 라틴 이름 한 줄만(작가 쪽·컬렉션 머리), 14자 이하 */
  --text-wordmark: 18px;
  --text-wordmark-sm: 15px;
  --leading-body: 1.6;
  --leading-label: 1.45;
  --leading-display: 1.02;
  --tracking-display: -0.02em;
  --tracking-wordmark: 0.32em;
  --tracking-caps: 0.06em;

  /* 간격 — 4의 배수 척도 */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 48px;
  --spacing-8: 64px;
  --spacing-9: 96px;
  --spacing-page: clamp(20px, 8px + 2.78vw, 48px);  /* 좌우 여백 */
  --spacing-gutter: 24px;        /* 12열 틈(≥1024) */
  --spacing-gutter-md: 20px;     /* 6열 틈(720–1023) */
  --spacing-gutter-pair: 12px;   /* 모바일 쌍 틈 */
  --spacing-wall: clamp(56px, 32px + 4.4vw, 96px);  /* 벽과 벽 사이 */
  --spacing-label: 24px;         /* 라벨 선 = 가장 높은 사진 아래 끝 + 이것 */
  --spacing-hang-max: clamp(320px, 62svh, 600px);   /* 벽 사진 높이 상한 */
  --spacing-header: 72px;
  --spacing-header-sm: 56px;
  --spacing-label-max: 240px;    /* 라벨 최대 폭 */
  --spacing-drawer: 400px;
  --spacing-content-max: 1344px;
  --spacing-tick: 12px;          /* 중심선 눈금 길이 */
  --spacing-focus-offset: 6px;
  --spacing-hover-offset: 8px;

  /* 모서리 — 사진은 직각(인화지), 조작 요소만 2 */
  --radius-photo: 0px;
  --radius-control: 2px;
  --radius-dot: 50%;

  /* 그림자 — 0. 겹침은 바탕 단계(bg → wall)와 1px 선으로 */
  --shadow-none: none;
  --shadow-hairline: 0 0 0 1px var(--color-line);

  /* 움직임 */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --duration-fast: 140ms;
  --duration-base: 200ms;
  --duration-slow: 240ms;
  --duration-image: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-image: 0ms;
  }
}