/* ========================================
   Villalab — Design Tokens
   ----------------------------------------
   [DEV] 색·간격·폰트 단일 소스. 컴포넌트에서 hex 직접 쓰지 말 것
   [DEV] ThemeProvider / CSS variables 로 이관 시 이 파일 매핑
   ----------------------------------------
   Breakpoints (PC-first) = 진행제안 08 · base.css rem 과 동일
   - 1280px+              : PC (LNB + 맵 스플릿)
   - max-width: 1279px    : 와이드↓ (여백)
   - max-width: 1023px    : 태블릿 (LNB 축소·햄버거)
   - max-width: 767px     : 모바일 (맵 풀·바텀시트)
   ※ @media 숫자는 프로젝트 전역에서 위 값만 사용
======================================== */

:root {
  /* color — 시안 메인 팔레트 → FE design tokens */
  --color-primary: #006af4;   /* CTA · 강조 · 활성 */
  --color-secondary: #133a63; /* 네이비 · 헤더/타이틀 */
  --color-ink: #222222;       /* 본문 */
  --color-muted: #757575;     /* 보조 텍스트 */
  --color-hint: #888888;      /* placeholder · 힌트 */
  --color-white: #ffffff;
  --color-bg: var(--color-white);
  --color-bg-page: #f4f6f8;
  --color-primary-subtle: #e8f1fe;

  /* layout.css 등 KRDS 변수명 → 빌라랩 팔레트 */
  --krds-color-surface: var(--color-white);
  --krds-color-text-basic: var(--color-ink);
  --krds-color-text-primary: var(--color-primary);
  --krds-color-text-subtle: var(--color-muted);
  --krds-color-action-primary: var(--color-primary);
  --krds-color-border: var(--color-line);
  --krds-color-border-subtle: #d0d0d0;
  --krds-color-surface-gray-subtler: var(--color-breadcrumb-bg);
  --krds-color-surface-primary-subtler: var(--color-primary-subtle);

  /* UI 크롬 (팔레트 외 보더 — 필요 시 시안 값으로 교체) */
  --color-line: #e5e5e5;
  --layout-border: var(--color-line);
  --color-breadcrumb-bg: #EDEFF3; /* 브레드크럼 바 */

  /* 킷 button.css .ccolor 호환 (kit-skin 에서도 재지정) */
  --ccolor: var(--color-primary);
  --scolor: #0056c9; /* .ccolor:hover — primary보다 한 톤 어둡게 */

  /* layout — PC 기본. 맵 메인은 풀폭(max-width 없음). LNB·헤더는 시안 확정 시 조정 */
  --layout-pad-x: 4rem;
  --layout-aside-w: 22rem;    /* LNB 폭 후보 */
  --layout-gap: 3.2rem;
  --header-h: 6.8rem;         /* GNB 높이 — 맵 셸 calc용 */
  --toolbar-h: 9.6rem;        /* 맵 툴바(브레드+필터 행) 대략 높이 */

  /* typography */
  --font-ui: "Pretendard", "Malgun Gothic", "맑은 고딕", AppleGothic, Dotum, "돋움", sans-serif;
}

/* ~1279px — 와이드↓ */
@media (max-width: 1279px) {
  :root {
    --layout-pad-x: 2.4rem;
  }
}

/* ~1023px — 태블릿 */
@media (max-width: 1023px) {
  :root {
    --layout-pad-x: 2rem;
    --layout-gap: 2.4rem;
    --header-h: 6.4rem;
  }
}

/* ~767px — 모바일 */
@media (max-width: 767px) {
  :root {
    --layout-pad-x: 2rem;
    --header-h: 6.4rem;
    /* 퀵메뉴: 상단 0.6 + 항목 5.6 + 하단 0.4 + 구분선 */
    --mobile-quick-h: calc(6.6rem + 1px + env(safe-area-inset-bottom, 0px));
  }
}