/* 지얼세라믹 디자인 토큰 v1 (2026-10-15)
   기준: iginusa.com (awwwards 2026-10 후보) 실제 화면에서 잰 값 → 한글·타일 회사에 맞춰 옮김
   규칙은 같은 폴더 DESIGN.md. 색·글꼴·간격은 여기 값만 쓰고 화면 코드에 숫자를 새로 적지 않음 */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@500;700&family=Black+Han+Sans&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root {
  /* 색 — 흑백 대비가 기본, 빨강은 라벨·주 버튼·선 하나에만 */
  --z-ink: #111111;        /* 글자·검정 버튼 (igin --black) */
  --z-black: #000000;      /* 맨 위 띠·발바닥 */
  --z-paper: #ffffff;      /* 바탕 */
  --z-soft: #f4f4f4;       /* 사진 자리·옅은 면 */
  --z-mute: #8e8e8e;       /* 보조 글자·숫자 (igin 회색) */
  --z-line: #e6e6e6;       /* 가는 선 */
  --z-red: #ed302a;        /* 포인트 (igin --red) */
  --z-red-deep: #c81f1c;   /* 빨강 버튼 누를 때 */

  /* 글꼴 — 영문·숫자는 igin 그대로, 한글은 짝 글꼴 */
  --z-display: 'Anton', 'Black Han Sans', 'Arial Narrow', Impact, sans-serif;       /* 영문 큰 제목·숫자 */
  --z-display-ko: 'Black Han Sans', 'Anton', 'Pretendard', sans-serif;              /* 한글 큰 제목 */
  --z-ui: 'Archivo', 'Pretendard', 'Helvetica Neue', Arial, sans-serif;             /* 메뉴·라벨·버튼 */
  --z-body: 'Pretendard', 'Archivo', system-ui, sans-serif;                         /* 본문 */
  --z-serif: 'Instrument Serif', Georgia, serif;                                    /* 기울인 한 줄 (영문만) */
  --z-mono: 'JetBrains Mono', ui-monospace, Menlo, 'Pretendard', monospace;         /* 사진 설명·쪽 번호 */

  /* 글자 크기 */
  --z-fs-label: 11px;      /* 영문 라벨 (대문자, 굵게) */
  --z-fs-label-ko: 13px;   /* 한글 라벨·메뉴 */
  --z-fs-body: 15px;
  --z-fs-lead: 32px;       /* 기울인 한 줄 */
  --z-fs-h2: clamp(40px, 5.2vw, 76px);
  --z-fs-hero: clamp(64px, 9.4vw, 148px);
  --z-fs-stat: 30px;

  /* 글자 간격 */
  --z-ls-label: .24em;     /* igin 2.64px / 11px */
  --z-ls-nav: .2em;        /* igin 2.2px / 11px */
  --z-ls-mono: .12em;      /* igin 1.32px / 11px */

  /* 간격 (8 단위) */
  --z-s1: 8px; --z-s2: 16px; --z-s3: 24px; --z-s4: 32px; --z-s5: 48px; --z-s6: 64px; --z-s7: 96px; --z-s8: 128px;
  --z-gutter: 48px;        /* 휴대폰 16px */
  --z-max: 1440px;

  /* 모양 */
  --z-r-pill: 999px;       /* 버튼은 모두 알약 */
  --z-r-card: 18px;        /* 사진 카드 */
  --z-r-arc: 50% 0 0 50% / 62% 0 0 62%;  /* 표지 사진: 왼쪽이 크게 둥근 반달 */

  /* 움직임 */
  --z-ease: cubic-bezier(.2, .7, .3, 1);
  --z-dur: .5s;

  --z-header: 104px;       /* 머리 높이 (띠 40 + 메뉴 64) — 휴대폰은 화면에서 다시 정함 */
}

/* ---- 공용 부품 ---- */
.z-label { font: 700 var(--z-fs-label)/1.65 var(--z-ui); letter-spacing: var(--z-ls-label); text-transform: uppercase; color: var(--z-red); }
.z-mono { font: 400 var(--z-fs-label)/1.6 var(--z-mono); letter-spacing: var(--z-ls-mono); text-transform: uppercase; color: var(--z-mute); }
.z-lead { font: italic 400 var(--z-fs-lead)/1.2 var(--z-serif); letter-spacing: -.01em; }
.z-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 22px; border-radius: var(--z-r-pill); border: 1.5px solid var(--z-ink);
         font: 700 12px/1 var(--z-ui); letter-spacing: .16em; text-transform: uppercase; background: var(--z-ink); color: var(--z-paper);
         transition: transform var(--z-dur) var(--z-ease), background .2s; cursor: pointer; }
.z-btn:hover { transform: translateY(-2px); }
.z-btn.red { background: var(--z-red); border-color: var(--z-red); }
.z-btn.red:hover { background: var(--z-red-deep); border-color: var(--z-red-deep); }
.z-btn.line { background: transparent; color: var(--z-ink); }