/* paceone — 디자인 시스템 정본 (Tailwind 4 @theme 이름공간). style.css 는 여기 변수만 쓴다.
 * 방향: A "트랙 초크" — 흰 바탕 + 초크 판 + 먹 + 코발트 한 점 (다듬기 v2 에서 바탕·판 역할을 맞바꿨다 — 값은 그대로). 렌즈 minimalist-ui.
 * 대비 실측은 _design/DESIGN.md 대비표 (node build.mjs --contrast paceone). */

/* 브라우저는 @theme 를 모른다(블록째 버린다) — 여기서는 :root, 승급 때 globals.css 의 @theme 로 되돌린다. 값·이름은 설계 그대로. */
:root {
  /* ── 색: UI ─────────────────────────────────────────────────────────── */
  --color-chalk: #e6eaee;       /* 판(plate) — 상품·누끼 이미지 판 · 공지 띠 · 요약·정보 판 · 빈 상태 판 (다듬기 v2: 바탕 → 판) */
  --color-paper: #ffffff;       /* 페이지 바탕(다듬기 v2, 사용자 지시) · 유틸 띠·GNB·메가메뉴·모달·표·꼬리 · 판 위 배지 */
  --color-ink: #101317;         /* 본문·주 버튼·표 머리선 */
  --color-ink-2: #3f4750;       /* 보조 글 (chalk 7.79 · paper 9.42) */
  --color-ink-3: #5a626c;       /* 메타·날짜·원가 취소선 (chalk 5.11 · paper 6.18) — 글자로 쓰는 가장 옅은 값 */
  --color-edge: #7b858f;        /* 입력칸·체크박스·옵션 버튼 테두리 (paper 3.75 · chalk 3.10 — 비텍스트 3:1) */
  --color-line: #c5ccd3;        /* 장식 구분선만. 글자·조작 테두리에 쓰지 않는다 */
  --color-mist: #f3f5f7;        /* 표 머리 줄·요약 상자·입력칸 읽기 전용 면 (paper 위) · 상품·누끼 이미지 판(다듬기 v2 판정 — nb 의 연회색 판) */
  --color-mute: #a9b1b9;        /* 품절·비활성 글자 (대비 예외 — 비활성 표시) */
  --color-night: #101317;       /* 어두운 면 = ink — 다듬기 v2 부터 PACE CLUB 띠·등급 카드·사진 판·토스트만 (꼬리·공지 띠·서랍 머리는 밝게) */
  --color-night-2: #9aa3ad;     /* night 위 보조 글 (7.29) */
  --color-night-line: #2b3138;  /* night 위 구분선 */

  --color-pace: #1f3fd1;        /* 강조 — 할인율·선택 표시·링크 밑줄·포커스 링·런칭 D-day. 큰 면 금지 (DESIGN 금지 4) */
  --color-pace-deep: #1732a6;   /* 강조 hover·눌림 */
  --color-pace-on-dark: #9db0ff;/* 어두운 면(night·사진 덧판) 위 강조 글자 — pace 는 night 에서 2.39 라 못 쓴다 (8.95) */

  /* 등급 표장(원 88px 안) — 페이스클럽 4등급. 글자는 워밍업만 ink, 나머지 paper */
  --color-grade-warmup: #8b949e;
  --color-grade-runner: #56606b;
  --color-grade-pacer: #262c33;
  --color-grade-elite: #1f3fd1;

  --color-scrim: rgb(16 19 23 / 0.56); /* 사진 위 글자 뒤판(아래 40% 그라데이션 끝값) */
  --color-veil: rgb(16 19 23 / 0.48);  /* 모달·서랍 뒤 덮개 */

  /* ── 색: 상품 색상 견본(데이터) — 브랜드 팔레트가 아니라 상품 색 이름의 점. UI 에 쓰지 않는다 ── */
  --color-swatch-black: #16181b;
  --color-swatch-charcoal: #3b4046;
  --color-swatch-grey: #9aa0a6;
  --color-swatch-stone: #c9c2b6;
  --color-swatch-chalk: #eef0ec;
  --color-swatch-white: #fbfbfa;
  --color-swatch-navy: #1d2a44;
  --color-swatch-cobalt: #2446d8;
  --color-swatch-sage: #9aab96;
  --color-swatch-olive: #5f6446;
  --color-swatch-sand: #d4bf9a;
  --color-swatch-mud: #6b5443;
  --color-swatch-volt: #d8f24a;
  --color-swatch-ember: #e0662c;
  --color-swatch-lilac: #b7b2cf;
  --color-swatch-burgundy: #5c2230;

  /* ── 서체 ──────────────────────────────────────────────────────────── */
  --font-display: "Archivo", "Pretendard Variable", system-ui, sans-serif; /* 영문 대문자 제목·큰 숫자만. 폭은 --stretch-display */
  --font-display--font-variation-settings: "wdth" 62.5;
  --font-sans: "Pretendard Variable", "Apple SD Gothic Neo", system-ui, sans-serif; /* 본문·한글 제목·가격 */
  --font-sans--font-feature-settings: "tnum" 1;  /* 가격·수량·날짜가 줄마다 흔들리지 않게 — 모든 숫자 tabular */

  /* ── 글자 크기 (px 은 16 기준) ─────────────────────────────────────── */
  --text-2xs: 0.6875rem;          /* 11 — 배지 안 대문자(NEW·BEST)만. 한글 본문에 쓰지 않는다 */
  --text-2xs--line-height: 1;
  --text-xs: 0.75rem;             /* 12 — 유틸 띠·법적 고지·표 보조 */
  --text-xs--line-height: 1.5;
  --text-sm: 0.8125rem;           /* 13 — 카드 메타·표 칸·필터 항목 */
  --text-sm--line-height: 1.55;
  --text-base: 0.9375rem;         /* 15 — 본문·카드 상품명 */
  --text-base--line-height: 1.6;
  --text-md: 1.0625rem;           /* 17 — 리드·GNB 1단·카드 가격(상세 외) */
  --text-md--line-height: 1.5;
  --text-lg: 1.25rem;             /* 20 — 블록 소제목·상세 가격·요약 금액 */
  --text-lg--line-height: 1.4;
  --text-xl: 1.625rem;            /* 26 — 한글 페이지 제목(장바구니·회원등급)·상세 상품명 */
  --text-xl--line-height: 1.3;
  --text-2xl: 2rem;               /* 32 — 결제 예정 금액·완료 문구 */
  --text-2xl--line-height: 1.2;
  --text-display-s: clamp(2.25rem, 1.6rem + 1.8vw, 3.5rem);    /* 36→56 — 블록 제목 NEW ARRIVALS·LAUNCH CALENDAR */
  --text-display-s--line-height: 0.92;
  --text-display-m: clamp(3rem, 2.2rem + 2.6vw, 4.75rem);      /* 48→76 — 페이지 제목 MY·SUPPORT·EVENT·큰 숫자 */
  --text-display-m--line-height: 0.9;
  --text-display-l: clamp(4rem, 1.2rem + 8vw, 8.25rem);        /* 64→132 — 메인 히어로 제목 2줄 */
  --text-display-l--line-height: 0.86;
  --text-display-xl: clamp(6rem, 0.8rem + 14.5vw, 14.5rem);    /* 96→232 — 서브메인 거대 단어 SHOES·APPAREL·GOODS */
  --text-display-xl--line-height: 0.82;

  /* ── 간격 (Tailwind 4 기본 단위 4px + 이름 붙은 치수) ──────────────── */
  --spacing: 0.25rem;
  --spacing-gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3.75rem);   /* 20→60 좌우 여백 */
  --spacing-shell: 82.5rem;        /* 1320 — 목록·메인 격자 최대 폭 */
  --spacing-shell-narrow: 75rem;   /* 1200 — MY·SUPPORT·장바구니·주문 (참고 사이트와 같은 판) */
  --spacing-form: 27.5rem;         /* 440 — 로그인·찾기 1열 */
  --spacing-form-wide: 45rem;      /* 720 — 가입 2단계 */
  --spacing-rail: 13.75rem;        /* 220 — MY·SUPPORT 사이드 메뉴, 목록 필터 칸 */
  --spacing-rail-gap: 3rem;        /* 48 */
  --spacing-section: clamp(4rem, 2.6rem + 4.4vw, 7.5rem);      /* 64→120 메인 블록 사이 */
  --spacing-block: clamp(2.5rem, 2rem + 1.6vw, 4rem);          /* 40→64 블록 안 큰 덩어리 사이 */
  --spacing-grid: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);     /* 12→20 카드 가로 간격 */
  --spacing-grid-row: clamp(2rem, 1.6rem + 1.2vw, 3rem);       /* 32→48 카드 세로 간격 */
  --spacing-promo: 2.5rem;         /* 40 공지 띠 */
  --spacing-util: 2.25rem;         /* 36 유틸 띠 (≥1024 만) */
  --spacing-header: 4.5rem;        /* 72 GNB (≥1024) */
  --spacing-header-m: 3.5rem;      /* 56 GNB (<1024) */
  --spacing-tabbar: 3.5rem;        /* 56 상세 탭 붙는 줄 · 모바일 하단 구매 막대 */
  --spacing-tap: 2.75rem;          /* 44 터치 최소 */
  --spacing-swatch: 1.125rem;      /* 18 색 점 */
  --spacing-thumb: 4.5rem;         /* 72 상세 세로 썸네일 · 장바구니 행 이미지는 ×1.5 */

  /* ── 모서리 — 운동장 선처럼 각지게. 둥근 것은 점(색·등급·아바타)뿐 ── */
  --radius-none: 0;
  --radius-xs: 2px;                /* 배지·칩 */
  --radius-full: 9999px;           /* 색 점·등급 표장·장바구니 개수 점 */

  /* ── 그림자 — 떠 있는 층(메가메뉴·모달·드롭다운·서랍)에만 ────────── */
  --shadow-pop: 0 18px 40px -18px rgb(16 19 23 / 0.32), 0 2px 6px -2px rgb(16 19 23 / 0.12);
  --shadow-rule: 0 1px 0 0 var(--color-line);    /* 붙는 머리의 아랫선 */

  /* ── 이징 ──────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);      /* 들어오는 것·응답 (기본) */
  --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);     /* 화면에 이미 있는 것이 옮겨 갈 때(히어로 교차) */
  --ease-linear: linear;                           /* 히어로 진행 막대만 */
}

/* @theme 밖 — Tailwind 이름공간에 없는 값 */
:root {
  --stretch-display: 62.5%;        /* Archivo ExtraCondensed. font-stretch 로 쓴다 (variation-settings 와 같은 값) */
  --tracking-display: -0.01em;
  --tracking-caps: 0.06em;         /* 작은 대문자 라벨(NEW·SOLD OUT·Z3) */
  --duration-fast: 120ms;          /* hover·누름 */
  --duration-base: 200ms;          /* 메가메뉴·드롭다운·아코디언 */
  --duration-slow: 420ms;          /* 모달·서랍 */
  --duration-hero: 700ms;          /* 히어로 교차 */
  --hero-dwell: 6s;                /* 히어로 한 장 머무는 시간 (진행 막대 길이) */
  --z-sticky: 20;                  /* 붙는 GNB·상세 탭 */
  --z-menu: 30;                    /* 메가메뉴·검색 층 */
  --z-modal: 40;                   /* 담김 모달·서랍·필터 시트 */
  --ratio-hero: 16 / 9;            /* 데스크톱 히어로 상한 — 다듬기 v2 (높이 = min(100svh − 머리 띠, 폭 × 9/16)) */
  --ratio-hero-m: 4 / 5;           /* 모바일 히어로 */
  --ratio-tile: 1 / 1;             /* 상품 타일 */
  --ratio-look: 4 / 5;             /* 캠페인·컬렉션 룩 */
}