/* =========================================================================
   Gearwa Design System v2 — semantic token snapshot
   AUTO-VENDORED — 직접 수정 금지. gearwa-ui 산출물에서 다시 떠라.

   @gw-vendored-from: gearwa-ui@5f9eb00 (tokens/colors_and_type.css)
   @gw-omit:     @font-face  — Pretendard variable dynamic subset을 index.html이 자체 로드
   @gw-override: --font-sans — 위 subset 로딩 전략에 맞춰 'Pretendard Variable' 우선

   위 두 항목 외의 차이는 드리프트다. 선언 형식은 gearwa-ui#13에서 확정된다.

   단위 정책: fontSize/spacing = rem (사용자 글꼴 설정 존중, WCAG 1.4.4)
             border/radius/shadow/breakpoint/size = px (시각 정밀도)
   전제: html { font-size: 100% }  ← 루트에 px 고정 금지
   ========================================================================= */

html { font-size: 100%; } /* 1rem = 사용자 기본(보통 16px) */

:root {
  /* ---------- Primitive palette (직접 소비 금지 — semantic 층 사용) ---------- */
  --gw-navy: #1E3A8A;
  --gw-green: #CCFF00;
  --gw-ice: #F1F5F9;
  --gw-white: #FFFFFF;
  --gw-slate: #334155;
  --gw-muted: #64748B;
  --gw-border: rgba(30,58,138,0.08);
  --gw-navyWash: rgba(30,58,138,0.04);
  --gw-navyDim: rgba(30,58,138,0.12);
  --gw-greenDim: rgba(204,255,0,0.15);
  --gw-red: #E53E3E;
  --gw-redDim: rgba(229,62,62,0.10);
  --gw-teal: #0D9488;
  --gw-blue: #3B82F6;
  --gw-whiteDim: rgba(255,255,255,0.72);
  --gw-whiteMuted: rgba(255,255,255,0.60);
  --gw-whiteHair: rgba(255,255,255,0.18);
  --gw-scrim: rgba(0,0,0,0.40);
  --gw-scrimSheet: rgba(0,0,0,0.30);

  /* ---------- Semantic (컴포넌트가 소비하는 유일한 색 계층) ---------- */
  --fg1: #1E3A8A;
  --fg2: #334155;
  --fg3: #64748B;
  --fg-on-accent: #1E3A8A;
  --fg-on-dark: #FFFFFF;
  --fg-on-dark2: rgba(255,255,255,0.72);
  --fg-on-dark3: rgba(255,255,255,0.60);
  --bg-page: #F1F5F9;
  --bg-card: #FFFFFF;
  --bg-input: #F1F5F9;
  --bg-accent: #CCFF00;
  --bg-dark: #1E3A8A;
  --border-hair: rgba(30,58,138,0.08);
  --border-hair-on-dark: rgba(255,255,255,0.18);
  --border-active: #CCFF00;
  --wash-subtle: rgba(30,58,138,0.04);
  --wash-hover: rgba(30,58,138,0.12);
  --wash-selected: rgba(204,255,0,0.15);
  --danger: #E53E3E;
  --danger-wash: rgba(229,62,62,0.10);
  --success: #0D9488;
  --map-my-location: #3B82F6;
  --scrim: rgba(0,0,0,0.40);
  --scrim-sheet: rgba(0,0,0,0.30);

  /* ---------- Typography (rem + px 주석) ---------- */
  --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, 'Segoe UI', sans-serif; /* @gw-override */
  --fs-micro: 0.625rem; /* 10px — DEPRECATED: v2.0 폐기 예정 — caption(11px) 사용. 가독성 최저선 미달. */
  --fs-caption: 0.6875rem; /* 11px */
  --fs-caption-lg: 0.75rem; /* 12px */
  --fs-body-sm: 0.8125rem; /* 13px */
  --fs-body: 0.875rem; /* 14px */
  --fs-h3: 1rem; /* 16px */
  --fs-input: 1rem; /* 16px */
  --fs-h2: 1.125rem; /* 18px */
  --fs-h1: clamp(1.25rem, 1.1571rem + 0.381vw, 1.5rem); /* 20px → 24px */
  --fs-display: clamp(1.625rem, 1.3929rem + 0.9524vw, 2.25rem); /* 26px → 36px */
  --lh-display: 1.25;
  --lh-heading: 1.35;
  --lh-body: 1.5;
  --lh-relaxed: 1.65;
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-eyebrow: 0.08em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---------- Radii (px 유지) ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---------- Spacing (rem + px 주석) ---------- */
  --sp-2xs: 0.125rem; /* 2px */
  --sp-xs: 0.25rem; /* 4px */
  --sp-sm: 0.5rem; /* 8px */
  --sp-md: 0.75rem; /* 12px */
  --sp-lg: 1rem; /* 16px */
  --sp-xl: 1.5rem; /* 24px */
  --sp-2xl: 2rem; /* 32px */
  --sp-gutter: clamp(16px, 5vw, 24px);

  /* ---------- Breakpoints (참조용 — media query에는 var() 불가) ---------- */
  --bp-sm: 430px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;

  /* ---------- Z-index ---------- */
  --z-header: 50;
  --z-voc: 90;
  --z-voc-panel: 91;
  --z-floating-bar: 100;
  --z-overlay: 200;
  --z-overlay-content: 210;
  --z-bundle-sheet: 300;
  --z-tooltip: 350;
  --z-chat: 400;
  --z-consent: 450;
  --z-toast: 500;

  /* ---------- Sizes (물리 기준 — px 유지) ---------- */
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-touch-target: 44px;
  --size-touch-target-min: 32px;
  --size-container-mobile: 640px;

  /* ---------- Shadows ---------- */
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-dropdown: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-brand: 0 2px 8px rgba(30,58,138,0.15);
  --shadow-brand-strong: 0 4px 16px rgba(30,58,138,0.25);
  --shadow-drawer: -12px 0 36px rgba(30,58,138,0.16);

  /* ---------- Motion ---------- */
  --t-press: 0.15s ease;
  --t-hover: 0.2s ease;
  --t-slide: 0.25s ease;
  --t-bounce: 0.4s ease;
  --t-state: 0.3s ease;

}

/* ---------- Dark theme (beta — client 미출고, <html data-theme="dark">로 활성화) ---------- */
[data-theme="dark"] {
  --fg1: #E2E8F0;
  --fg2: #CBD5E1;
  --fg3: #94A3B8;
  --fg-on-accent: #1E3A8A;
  --fg-on-dark: #FFFFFF;
  --fg-on-dark2: rgba(255,255,255,0.72);
  --fg-on-dark3: rgba(255,255,255,0.60);
  --bg-page: #0B1226;
  --bg-card: #131E42;
  --bg-input: #1B2854;
  --bg-accent: #CCFF00;
  --bg-dark: #1E3A8A;
  --border-hair: rgba(226,232,240,0.10);
  --border-hair-on-dark: rgba(255,255,255,0.18);
  --border-active: #CCFF00;
  --wash-subtle: rgba(226,232,240,0.04);
  --wash-hover: rgba(226,232,240,0.10);
  --wash-selected: rgba(204,255,0,0.12);
  --danger: #F87171;
  --danger-wash: rgba(248,113,113,0.12);
  --success: #2DD4BF;
  --map-my-location: #60A5FA;
  --scrim: rgba(0,0,0,0.60);
  --scrim-sheet: rgba(0,0,0,0.50);
}

/* ---------- Semantic type helpers ---------- */
.gw-display   { font-family: var(--font-sans); font-size: var(--fs-display);    font-weight: 800; color: var(--fg1); line-height: var(--lh-display); letter-spacing: var(--ls-tight); }
.gw-h1        { font-family: var(--font-sans); font-size: var(--fs-h1);         font-weight: 800; color: var(--fg1); line-height: var(--lh-heading); }
.gw-h2        { font-family: var(--font-sans); font-size: var(--fs-h2);         font-weight: 700; color: var(--fg1); line-height: var(--lh-heading); }
.gw-h3        { font-family: var(--font-sans); font-size: var(--fs-h3);         font-weight: 600; color: var(--fg1); line-height: var(--lh-heading); }
.gw-body      { font-family: var(--font-sans); font-size: var(--fs-body);       font-weight: 400; color: var(--fg2); line-height: var(--lh-body); }
.gw-body-bold { font-family: var(--font-sans); font-size: var(--fs-body);       font-weight: 600; color: var(--fg1); line-height: var(--lh-body); }
.gw-body-sm   { font-family: var(--font-sans); font-size: var(--fs-body-sm);    font-weight: 400; color: var(--fg2); line-height: var(--lh-body); }
.gw-caption   { font-family: var(--font-sans); font-size: var(--fs-caption-lg); font-weight: 400; color: var(--fg3); line-height: var(--lh-body); }
.gw-micro     { font-family: var(--font-sans); font-size: var(--fs-micro);      font-weight: 400; color: var(--fg3); } /* DEPRECATED — .gw-caption 사용 */
.gw-price     { font-family: var(--font-sans); font-size: var(--fs-body);       font-weight: 700; color: var(--fg1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gw-price-unit { font-family: var(--font-sans); font-size: var(--fs-caption);   font-weight: 400; color: var(--fg3); }
.gw-eyebrow   { font-family: var(--font-sans); font-size: var(--fs-caption-lg); font-weight: 600; color: var(--fg3); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }