/* albumen — 디자인 시스템 정본 (설계 3단계)
 * 이름은 Tailwind 4 @theme 이름공간, 선언은 :root 에 둔다(@theme 블록은 브라우저가 읽지 않는다 — lessons #73).
 * style.css 는 var() 만 쓴다. 이 파일과 DESIGN.md 가 어긋나면 이 파일이 이긴다. */

:root {
  /* ── 색 — 판지 · 먹 · 올리브 하나 (사진이 색을 낸다) ── */
  --color-bg: #bb9670;              /* 액자 판지 — OKLCH L 0.698 · C 0.068 · h 67.1 (중간 명도 황토) */
  --color-surface: #d3b994;         /* 밝은 판지 — 메모 카드·전시 판·아래 띠·붙임쇠·자리표시자 */
  --color-bg-deep: #241a12;         /* 라이트박스 무대 — 짙은 갈색 */
  --color-ink: #211710;             /* 먹 — 제목·본문 */
  --color-ink-2: #3b2b1e;           /* 보조 먹 — 캡션·메타·순번 */
  --color-ink-on-deep: #ead9c0;     /* 무대 위 글자 */
  --color-ink-on-deep-2: #bfae95;   /* 무대 위 메타 */
  --color-accent: #414a0e;          /* 올리브 — OKLCH L 0.388 · C 0.081 · h 117.9. 선·점·붙임쇠·포커스만, 면 금지 */
  --color-accent-on-deep: #c2c77a;  /* 무대 위 올리브 — h 111.6. 진행 눈금 한 칸·포커스만 */
  --color-line: #a17e5b;            /* 장식 구분선(레일 오른쪽·꼬리 칸 사이) — 경계 역할 없음 */
  --color-line-strong: #4e3a29;     /* 단추·더미 단추 테 — 비글자 3:1 */
  --color-line-on-deep: #4a3a2c;    /* 무대 정보 칸 경계(장식) */

  /* ── 그림자 — 판지 위 인화지의 들림 한 종(+ 호버) ── */
  --shadow-print: 0 1px 1px rgb(33 23 16 / 0.18), 0 10px 22px -12px rgb(33 23 16 / 0.45);
  --shadow-print-lift: 0 2px 2px rgb(33 23 16 / 0.16), 0 18px 32px -14px rgb(33 23 16 / 0.5);
  --shadow-none: none;

  /* ── 서체 — 서가 가족만 ── */
  --font-display: "DM Serif Display", "Newsreader", Georgia, serif;
  --font-serif: "Newsreader", Georgia, serif;
  --font-sans: "Newsreader", Georgia, serif; /* 본문·UI 도 Newsreader — 산세리프를 쓰지 않는다 */

  /* ── 글자 크기 ── */
  --text-xs: 13px;      /* 순번·자리표시자 라벨·판권면 작은 줄 — 최소 */
  --text-sm: 14px;      /* 레일 내비(고정 — 폭 표), 위 줄 메타 */
  --text-caption: 15px; /* 사진 캡션(이탤릭) */
  --text-base: 17px;    /* UI·메모 카드 본문 */
  --text-md: 19px;      /* 소개·작가 소개 문단 */
  --text-lg: 22px;      /* 로마 숫자 I–IV · h3 */
  --text-xl: 32px;      /* 라이트박스 사진 제목 · 판권면 워드마크(<720) · 레일 세로 워드마크 */
  --text-h2: clamp(32px, 20px + 2.2vw, 52px);           /* 연재·앨범·전시 제목 */
  --text-display: clamp(44px, 6.667vw - 12px, 84px);    /* 홈 제목·작가 이름·쪽 제목 — 폭 표(wireframe 7절) */
  --leading-display: 1.02;
  --leading-h2: 1.08;
  --leading-body: 1.55;
  --leading-caption: 1.35;
  --tracking-display: -0.01em; /* 넓히지 않는다 — 1200 에서 여유 15px */
  --tracking-meta: 0.02em;

  /* ── 간격 — 4의 배수 ── */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;
  --spacing-32: 128px;
  --spacing-page: clamp(20px, 12.6px + 1.9vw, 40px);
  --spacing-section: clamp(64px, 40px + 4vw, 128px);
  --spacing-gutter: 24px;
  --spacing-gutter-sm: 16px;
  --spacing-rail: 88px;          /* 책등 레일(≥1024) */
  --spacing-rail-pad: 12px;      /* 레일 안쪽 — 내비 글자 칸 64 */
  --spacing-strip: 56px;         /* 아래 띠(<1024) · 위 글자 줄 */
  --spacing-corner: 16px;        /* 사진 모서리 붙임쇠 변 */
  --spacing-corner-sm: 12px;     /* <720 */
  --spacing-panel: 360px;        /* 라이트박스 정보 칸 */
  --spacing-content-max: 1272px; /* 12열 격자 최대 폭(1440 의 W) */
  --spacing-overlap: 24px;       /* 콜라주 겹침 상한(≥1200) */
  --spacing-hit: 44px;           /* 터치 최소 */

  /* ── 모서리 — 알약 없음 ── */
  --radius-none: 0;
  --radius-card: 2px;
  --radius-control: 2px;

  /* ── 움직임 ── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-settle: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --duration-fast: 160ms;   /* 호버 들림·붙임쇠 색 */
  --duration-base: 240ms;   /* 라이트박스 열기·사진 넘기기 */
  --duration-exit: 160ms;   /* 닫기 */
  --duration-settle: 480ms; /* 첫 화면 인화지 내려앉기 */
  --stagger-settle: 30ms;   /* 5장 → 480 + 4×30 = 600ms 상한 */

  /* ── 기울기 상한(사진마다 데이터 값을 이 상한으로 깎는다) ── */
  --tilt-max: 1.2deg;
}

@media (max-width: 1023.98px) {
  :root { --tilt-max: 0.6deg; }
}

@media (max-width: 719.98px) {
  :root {
    --tilt-max: 0deg;
    --spacing-gutter: 16px;
    --spacing-corner: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-exit: 0ms;
    --duration-settle: 0ms;
    --stagger-settle: 0ms;
  }
}