/* =====================================================================
   그지넷 v3b 디자인 토큰 (tokens.css) — 자동 생성: docs/design/tools/build_tokens.js
   - 계약 문서: docs/v3-team/DESIGN_SYSTEM.md. 컴포넌트에서 HEX 직접 사용 금지(토큰만).
   - 라이트 기본 / 다크: (1) 시스템 자동 (2) data-theme="dark" 강제 (3) data-theme="light" 강제.
   - 명도 대비: node docs/design/tools/contrast.js
   ===================================================================== */

@font-face {
  font-family: "Pretendard Variable";
  font-style: normal; font-weight: 45 920; font-display: swap;
  src: local("Pretendard Variable"), url("../fonts/PretendardVariable-subset.woff2") format("woff2-variations"), url("../fonts/PretendardVariable-subset.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* ---------- 타이포 (모바일 가독성 우선: 본문 17px, 보조 15px 미만 금지) ---------- */
  --gj-font-sans: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gj-font-num: var(--gj-font-sans);
  --gj-fs-xs: 0.9375rem;    /* 15 : 최소(라벨/메타) */
  --gj-fs-sm: 0.9375rem;    /* 15 : 보조 */
  --gj-fs-md: 1.0625rem;    /* 17 : 본문/버튼 */
  --gj-fs-base: 1.0625rem;  /* 17 */
  --gj-fs-lg: 1.25rem;      /* 20 : 매장명 */
  --gj-fs-xl: 1.4375rem;    /* 23 : 섹션 제목 */
  --gj-fs-2xl: 1.75rem;     /* 28 : 화면 제목 */
  --gj-fs-3xl: 2.125rem;    /* 34 : 큰 가격 */
  --gj-fs-price: 2rem;      /* 32 : 가격표 숫자 */
  --gj-fs-tab: 0.875rem;    /* 14 : 하단 탭 라벨 */
  --gj-lh-tight: 1.3;
  --gj-lh-snug: 1.45;
  --gj-lh-body: 1.6;
  --gj-fw-regular: 400; --gj-fw-medium: 500; --gj-fw-semibold: 600; --gj-fw-bold: 700; --gj-fw-heavy: 800;

  /* ---------- 간격 (4px 스케일) ---------- */
  --gj-space-0: 0; --gj-space-1: 0.25rem; --gj-space-2: 0.5rem; --gj-space-3: 0.75rem; --gj-space-4: 1rem;
  --gj-space-5: 1.25rem; --gj-space-6: 1.5rem; --gj-space-8: 2rem; --gj-space-10: 2.5rem; --gj-space-12: 3rem;

  /* ---------- 라운드 (크고 부드럽게) ---------- */
  --gj-radius-xs: 0.375rem; --gj-radius-sm: 0.75rem; --gj-radius-md: 1rem; --gj-radius-lg: 1.375rem;
  --gj-radius-xl: 1.875rem; --gj-radius-pill: 999px;

  /* ---------- 터치/레이아웃 ---------- */
  --gj-tap: 3rem;             /* 48px (최소 44px 보장) */
  --gj-tap-px: 44px;
  --gj-maxw-app: 30rem;
  --gj-gutter: 1.25rem;
  --gj-topbar-h: 3.75rem;
  --gj-tabbar-h: 4.25rem;
  --gj-icon: 1.5rem; --gj-icon-lg: 1.75rem; --gj-icon-xl: 2.75rem; --gj-icon-stroke: 1.8;

  /* ---------- 모션 ---------- */
  --gj-dur-fast: 120ms; --gj-dur-base: 200ms; --gj-dur-slow: 320ms; --gj-ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- 레이어 ---------- */
  --gj-z-sticky: 20; --gj-z-tabbar: 30; --gj-z-scrim: 40; --gj-z-sheet: 45; --gj-z-modal: 50; --gj-z-toast: 60;

  /* =================== 색: 라이트 =================== */
  --gj-bg: #fff8f0;
  --gj-surface: #ffffff;
  --gj-surface-2: #f6ece0;
  --gj-border: #e9dac8;
  --gj-border-strong: #85766a;
  --gj-text: #1f1a2e;
  --gj-text-2: #4a4358;
  --gj-text-3: #655d72;
  --gj-text-inverse: #ffffff;
  --gj-primary: #3b4fe0;
  --gj-primary-strong: #2a3bb5;
  --gj-primary-soft: #e9ebff;
  --gj-on-primary: #ffffff;
  --gj-accent: #964700;
  --gj-accent-soft: #ffecc4;
  --gj-sun: #ffc53d;
  --gj-coral: #ff6b57;
  --gj-mint: #14b88a;
  --gj-violet: #7c4dff;
  --gj-hero-from: #3b4fe0;
  --gj-hero-via: #6a3de8;
  --gj-hero-to: #a52fae;
  --gj-on-hero: #ffffff;
  --gj-tag-bg: #ffefc2;
  --gj-tag-fg: #1f1a2e;
  --gj-trust-verified: #0b7a4b;
  --gj-trust-verified-bg: #ddf6e8;
  --gj-trust-reviewing: #5b3fc4;
  --gj-trust-reviewing-bg: #ece6ff;
  --gj-trust-expiring: #8a4b00;
  --gj-trust-expiring-bg: #ffebc7;
  --gj-trust-expired: #b0243a;
  --gj-trust-expired-bg: #ffe3e6;
  --gj-trust-rejected: #504a5e;
  --gj-trust-rejected-bg: #ece8f0;
  --gj-danger: #c0262d;
  --gj-danger-soft: #ffe3e3;
  --gj-on-danger: #ffffff;
  --gj-info: #2459c8;
  --gj-info-soft: #e3ecff;
  --gj-focus: #0b57d0;
  --gj-scrim: rgba(31, 26, 46, 0.55);
  --gj-skeleton-a: #efe3d4;
  --gj-skeleton-b: #faf2e8;
  --gj-cat-korean-bg: #ffe3dc;
  --gj-cat-korean-fg: #b4361f;
  --gj-cat-snack-bg: #ffefc2;
  --gj-cat-snack-fg: #8f5200;
  --gj-cat-chinese-bg: #ffd9e4;
  --gj-cat-chinese-fg: #a8174a;
  --gj-cat-cafe-bg: #eaddfb;
  --gj-cat-cafe-fg: #5b2eb0;
  --gj-cat-mart-bg: #d5f5e6;
  --gj-cat-mart-fg: #0b6b45;
  --gj-cat-western-bg: #dce8ff;
  --gj-cat-western-fg: #1d4fb8;
  --gj-cat-chicken-bg: #ffe0c7;
  --gj-cat-chicken-fg: #a24200;
  --gj-cat-bento-bg: #e3f4c9;
  --gj-cat-bento-fg: #4c6d0a;
  --gj-shadow-1: 0 1px 2px rgba(74, 52, 30, 0.06), 0 2px 8px rgba(74, 52, 30, 0.05);
  --gj-shadow-2: 0 8px 24px rgba(59, 79, 224, 0.14);
  --gj-shadow-sheet: 0 -10px 40px rgba(31, 26, 46, 0.22);
  --gj-map-land: #f0e6d8;
  --gj-map-road: #ffffff;
  --gj-map-park: #cdecd9;
  --gj-map-water: #cfe0f4;
  --gj-hero-gradient: linear-gradient(135deg, var(--gj-hero-from) 0%, var(--gj-hero-via) 55%, var(--gj-hero-to) 100%);
}

/* =================== 색: 다크 (시스템 설정 자동) =================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gj-bg: #14111c;
    --gj-surface: #1e1a2b;
    --gj-surface-2: #2a2540;
    --gj-border: #3a3452;
    --gj-border-strong: #8e86a6;
    --gj-text: #f4f1fa;
    --gj-text-2: #cbc5da;
    --gj-text-3: #aca5bf;
    --gj-text-inverse: #14111c;
    --gj-primary: #8c9bff;
    --gj-primary-strong: #b4beff;
    --gj-primary-soft: #2a2f6b;
    --gj-on-primary: #0e1240;
    --gj-accent: #ffc76b;
    --gj-accent-soft: #47300a;
    --gj-sun: #ffc53d;
    --gj-coral: #ff8a78;
    --gj-mint: #3fd9ac;
    --gj-violet: #a98bff;
    --gj-hero-from: #4457e8;
    --gj-hero-via: #6f45e8;
    --gj-hero-to: #a52fae;
    --gj-on-hero: #ffffff;
    --gj-tag-bg: #3d3114;
    --gj-tag-fg: #ffe6a3;
    --gj-trust-verified: #5ddb9f;
    --gj-trust-verified-bg: #123d2b;
    --gj-trust-reviewing: #c0b0ff;
    --gj-trust-reviewing-bg: #32286b;
    --gj-trust-expiring: #ffc76b;
    --gj-trust-expiring-bg: #47300a;
    --gj-trust-expired: #ff9aa8;
    --gj-trust-expired-bg: #4d1a24;
    --gj-trust-rejected: #cbc5da;
    --gj-trust-rejected-bg: #2e2a3d;
    --gj-danger: #ff8a8f;
    --gj-danger-soft: #4d1a1e;
    --gj-on-danger: #3d0a0d;
    --gj-info: #8fb4ff;
    --gj-info-soft: #1b2d5e;
    --gj-focus: #9dc1ff;
    --gj-scrim: rgba(0, 0, 0, 0.66);
    --gj-skeleton-a: #2a2540;
    --gj-skeleton-b: #383152;
    --gj-cat-korean-bg: #4a2219;
    --gj-cat-korean-fg: #ffb4a3;
    --gj-cat-snack-bg: #47340a;
    --gj-cat-snack-fg: #ffd47a;
    --gj-cat-chinese-bg: #4d1a2c;
    --gj-cat-chinese-fg: #ffa3c2;
    --gj-cat-cafe-bg: #33265c;
    --gj-cat-cafe-fg: #cbb4ff;
    --gj-cat-mart-bg: #123d2b;
    --gj-cat-mart-fg: #7be8bd;
    --gj-cat-western-bg: #1b2d5e;
    --gj-cat-western-fg: #a8c4ff;
    --gj-cat-chicken-bg: #4a2a12;
    --gj-cat-chicken-fg: #ffbf8a;
    --gj-cat-bento-bg: #2c3a10;
    --gj-cat-bento-fg: #c8e68a;
    --gj-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --gj-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
    --gj-shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.6);
    --gj-map-land: #1d1a2b;
    --gj-map-road: #2e2942;
    --gj-map-park: #17302a;
    --gj-map-water: #16283f;
  }
}

/* =================== 색: 다크 (수동 강제) =================== */
[data-theme="dark"] {
  color-scheme: dark;
  --gj-bg: #14111c;
  --gj-surface: #1e1a2b;
  --gj-surface-2: #2a2540;
  --gj-border: #3a3452;
  --gj-border-strong: #8e86a6;
  --gj-text: #f4f1fa;
  --gj-text-2: #cbc5da;
  --gj-text-3: #aca5bf;
  --gj-text-inverse: #14111c;
  --gj-primary: #8c9bff;
  --gj-primary-strong: #b4beff;
  --gj-primary-soft: #2a2f6b;
  --gj-on-primary: #0e1240;
  --gj-accent: #ffc76b;
  --gj-accent-soft: #47300a;
  --gj-sun: #ffc53d;
  --gj-coral: #ff8a78;
  --gj-mint: #3fd9ac;
  --gj-violet: #a98bff;
  --gj-hero-from: #4457e8;
  --gj-hero-via: #6f45e8;
  --gj-hero-to: #a52fae;
  --gj-on-hero: #ffffff;
  --gj-tag-bg: #3d3114;
  --gj-tag-fg: #ffe6a3;
  --gj-trust-verified: #5ddb9f;
  --gj-trust-verified-bg: #123d2b;
  --gj-trust-reviewing: #c0b0ff;
  --gj-trust-reviewing-bg: #32286b;
  --gj-trust-expiring: #ffc76b;
  --gj-trust-expiring-bg: #47300a;
  --gj-trust-expired: #ff9aa8;
  --gj-trust-expired-bg: #4d1a24;
  --gj-trust-rejected: #cbc5da;
  --gj-trust-rejected-bg: #2e2a3d;
  --gj-danger: #ff8a8f;
  --gj-danger-soft: #4d1a1e;
  --gj-on-danger: #3d0a0d;
  --gj-info: #8fb4ff;
  --gj-info-soft: #1b2d5e;
  --gj-focus: #9dc1ff;
  --gj-scrim: rgba(0, 0, 0, 0.66);
  --gj-skeleton-a: #2a2540;
  --gj-skeleton-b: #383152;
  --gj-cat-korean-bg: #4a2219;
  --gj-cat-korean-fg: #ffb4a3;
  --gj-cat-snack-bg: #47340a;
  --gj-cat-snack-fg: #ffd47a;
  --gj-cat-chinese-bg: #4d1a2c;
  --gj-cat-chinese-fg: #ffa3c2;
  --gj-cat-cafe-bg: #33265c;
  --gj-cat-cafe-fg: #cbb4ff;
  --gj-cat-mart-bg: #123d2b;
  --gj-cat-mart-fg: #7be8bd;
  --gj-cat-western-bg: #1b2d5e;
  --gj-cat-western-fg: #a8c4ff;
  --gj-cat-chicken-bg: #4a2a12;
  --gj-cat-chicken-fg: #ffbf8a;
  --gj-cat-bento-bg: #2c3a10;
  --gj-cat-bento-fg: #c8e68a;
  --gj-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --gj-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
  --gj-shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.6);
  --gj-map-land: #1d1a2b;
  --gj-map-road: #2e2942;
  --gj-map-park: #17302a;
  --gj-map-water: #16283f;
}

/* =================== 색: 라이트 (수동 강제, 시스템이 다크여도) =================== */
[data-theme="light"] {
  color-scheme: light;
  --gj-bg: #fff8f0;
  --gj-surface: #ffffff;
  --gj-surface-2: #f6ece0;
  --gj-border: #e9dac8;
  --gj-border-strong: #85766a;
  --gj-text: #1f1a2e;
  --gj-text-2: #4a4358;
  --gj-text-3: #655d72;
  --gj-text-inverse: #ffffff;
  --gj-primary: #3b4fe0;
  --gj-primary-strong: #2a3bb5;
  --gj-primary-soft: #e9ebff;
  --gj-on-primary: #ffffff;
  --gj-accent: #964700;
  --gj-accent-soft: #ffecc4;
  --gj-sun: #ffc53d;
  --gj-coral: #ff6b57;
  --gj-mint: #14b88a;
  --gj-violet: #7c4dff;
  --gj-hero-from: #3b4fe0;
  --gj-hero-via: #6a3de8;
  --gj-hero-to: #a52fae;
  --gj-on-hero: #ffffff;
  --gj-tag-bg: #ffefc2;
  --gj-tag-fg: #1f1a2e;
  --gj-trust-verified: #0b7a4b;
  --gj-trust-verified-bg: #ddf6e8;
  --gj-trust-reviewing: #5b3fc4;
  --gj-trust-reviewing-bg: #ece6ff;
  --gj-trust-expiring: #8a4b00;
  --gj-trust-expiring-bg: #ffebc7;
  --gj-trust-expired: #b0243a;
  --gj-trust-expired-bg: #ffe3e6;
  --gj-trust-rejected: #504a5e;
  --gj-trust-rejected-bg: #ece8f0;
  --gj-danger: #c0262d;
  --gj-danger-soft: #ffe3e3;
  --gj-on-danger: #ffffff;
  --gj-info: #2459c8;
  --gj-info-soft: #e3ecff;
  --gj-focus: #0b57d0;
  --gj-scrim: rgba(31, 26, 46, 0.55);
  --gj-skeleton-a: #efe3d4;
  --gj-skeleton-b: #faf2e8;
  --gj-cat-korean-bg: #ffe3dc;
  --gj-cat-korean-fg: #b4361f;
  --gj-cat-snack-bg: #ffefc2;
  --gj-cat-snack-fg: #8f5200;
  --gj-cat-chinese-bg: #ffd9e4;
  --gj-cat-chinese-fg: #a8174a;
  --gj-cat-cafe-bg: #eaddfb;
  --gj-cat-cafe-fg: #5b2eb0;
  --gj-cat-mart-bg: #d5f5e6;
  --gj-cat-mart-fg: #0b6b45;
  --gj-cat-western-bg: #dce8ff;
  --gj-cat-western-fg: #1d4fb8;
  --gj-cat-chicken-bg: #ffe0c7;
  --gj-cat-chicken-fg: #a24200;
  --gj-cat-bento-bg: #e3f4c9;
  --gj-cat-bento-fg: #4c6d0a;
  --gj-shadow-1: 0 1px 2px rgba(74, 52, 30, 0.06), 0 2px 8px rgba(74, 52, 30, 0.05);
  --gj-shadow-2: 0 8px 24px rgba(59, 79, 224, 0.14);
  --gj-shadow-sheet: 0 -10px 40px rgba(31, 26, 46, 0.22);
  --gj-map-land: #f0e6d8;
  --gj-map-road: #ffffff;
  --gj-map-park: #cdecd9;
  --gj-map-water: #cfe0f4;
}

/* =================== 모션 감소 =================== */
@media (prefers-reduced-motion: reduce) {
  :root { --gj-dur-fast: 0.01ms; --gj-dur-base: 0.01ms; --gj-dur-slow: 0.01ms; }
}