/* 지얼세라믹 디자인 토큰 v1 (2026-10-15)
   기준: iginusa.com (awwwards 2026-10 후보) 실제 화면에서 잰 값 → 한글·타일 회사에 맞춰 옮김
   규칙은 같은 폴더 DESIGN.md. 색·글꼴·간격은 여기 값만 쓰고 화면 코드에 숫자를 새로 적지 않음
   글꼴(Pretendard · 구글 글꼴)은 여기서 @import 하지 않음 — 각 페이지 머리 <!-- fonts --> 구역 (import/seo/font_links.mjs, 2026-10-25 화면 멈춤 방지) */

: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;   /* 빨강 버튼 누를 때 */
  --z-sand: #efe6dc;       /* 브랜드관 소개 면 (아가페 베이지 계열, 2026-10-23) */
  --z-sand-2: #f6f1ea;     /* 브랜드관 제품 사진 바탕 */
  --z-umber: #17130f;      /* 브랜드관 표지 (제시 · 안토니오루피의 짙은 갈색 검정) */

  /* 글꼴 — 영문·숫자는 igin 그대로(우리 주소의 웹 글꼴 4종), 한글은 기기 기본 글꼴
     2026-10-29 속도: 한글 웹 글꼴(Pretendard 42개 · Black Han Sans 11개, 첫 화면 무게의 절반)을 빼고 쿠팡 · 11번가처럼 기기 글꼴 → 휴대폰 48 → 92점
     한글 큰 제목은 Black Han Sans를 우리 제목 글자만 담은 파일 1개로('Zeal Head', import/seo/font_head.mjs) — 없는 글자는 기기 글꼴 가장 굵게(900) */
  --z-ko: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', 'Malgun Gothic', 'Noto Sans KR', Roboto, sans-serif;   /* 기기 기본 (아이폰 · 갤럭시 · 윈도) */
  --z-display: 'Anton', 'Zeal Head', 'Arial Narrow', Impact, var(--z-ko);           /* 영문 큰 제목·숫자 */
  --z-display-ko: 'Zeal Head', var(--z-ko);                                         /* 한글 큰 제목 (font 900 — Zeal Head는 굵기 범위로 선언해 가짜 굵게 안 됨) */
  --z-ui: 'Archivo', var(--z-ko);                                                   /* 메뉴·라벨·버튼 */
  --z-body: var(--z-ko);                                                            /* 본문 */
  --z-serif: 'Instrument Serif', Georgia, serif;                                    /* 기울인 한 줄 (영문만) */
  --z-mono: 'JetBrains Mono', ui-monospace, Menlo, var(--z-ko);                     /* 사진 설명·쪽 번호 */

  /* 글자 크기 */
  --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) — 휴대폰은 화면에서 다시 정함 */
}
/* 넓은 화면(큰 모니터)에서는 내용 폭도 넓게 — 양옆이 비어 작아 보이지 않게 (대표님 2026-10-20) */
@media (min-width: 1760px) { :root { --z-max: 1720px; --z-gutter: 64px; } }
@media (min-width: 2200px) { :root { --z-max: 2000px; } }

/* ---- 공용 부품 ---- */
.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); }