/**
 * design-tokens.css - 오토백(AUTO100) 공용 디자인 토큰
 * 기준 문서: b2c/design_handoff_auto100/DESIGN_SPEC.md §2
 *
 * index.php / list.php / about.php / guide.php / register.php / apply.php
 * 에서 공통으로 <head>에 링크. 컴포넌트 클래스는 담지 않고 토큰 + 리셋만 담당.
 *
 * ⚠ 반드시 각 페이지의 기존 인라인 <style> 블록보다 "먼저" 로드할 것 —
 *   기존 페이지들이 이미 자체 body{font-family:...} 규칙을 갖고 있어
 *   나중에 로드되는 규칙이 우선순위상 이긴다(동일 특이도, 로드 순서 승).
 */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  /* 브랜드 */
  --primary:        #3AAA3A;  /* 주 행동 채움 — 상담 버튼 전용 */
  --primary-deep:   #2E8A2E;  /* hover / pressed / 초록 텍스트 */
  --primary-tint:   #EDF8ED;  /* 초록 연한 배경 (문의 밴드, 공지 배지) */
  --primary-line:   #CDE9CD;  /* 초록 테두리 */

  --navy:           #0F172A;  /* 본문 텍스트, 재고 블록 배경 */
  --navy-mid:       #1E3A5F;  /* 보조 강조, 아이콘 스트로크, 전화 텍스트 */
  --navy-tint:      #F0F6FA;  /* 하늘빛 — 전화 버튼 등 */

  /* 텍스트 */
  --text:           #0F172A;
  --text-sub:       #5A6675;
  --text-mute:      #7A8694;
  --text-faint:     #98A2AE;

  /* 면 */
  --bg:             #F4F6F8;  /* 페이지 배경 */
  --surface:        #FFFFFF;  /* 카드 */
  --footer-bg:      #EEF2F6;
  --line:           #E4EBF2;  /* 카드 테두리 */
  --line-soft:      #F0F3F6;  /* 리스트 내부 구분선 */
  --line-header:    #EDF2F6;  /* 헤더 하단선 */

  /* 라운드 */
  --r-hero:   20px;
  --r-card:   18px;
  --r-tile:   16px;
  --r-btn:    13px;
  --r-chip:   9px;
  --r-thumb:  8px;

  /* 그림자 */
  --sh-raised: 0 1px 2px rgba(15,23,42,.05), 0 4px 10px rgba(15,23,42,.05);
  --sh-lifted: 0 2px 4px rgba(15,23,42,.06), 0 12px 24px rgba(15,23,42,.08);
  --sh-green:  0 2px 4px rgba(46,138,46,.20), 0 10px 20px rgba(46,138,46,.22);

  /* 여백 */
  --gutter: 16px;
  --bottombar-h: 79px; /* 하단 고정 버튼바 전체 높이 — 콘텐츠 padding-bottom 기준값 */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}
img { max-width: 100%; }

a {
  color: var(--primary-deep);
  text-decoration: none;
}
a:hover {
  color: var(--primary);
}

/* 카드·타일 공통 상태 */
.card,
.cat-tile,
.car-card {
  transition: transform .18s ease-out, border-color .18s, box-shadow .18s;
}
.card:hover,
.cat-tile:hover,
.car-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--sh-lifted);
}

/* 주 버튼(초록 채움) 공통 상태 */
.btn-primary {
  transition: background .15s, transform .1s, box-shadow .15s;
}
.btn-primary:hover  { background: var(--primary-deep); }
.btn-primary:active { transform: scale(.985); box-shadow: 0 1px 2px rgba(46,138,46,.3); }

/* 숫자는 표 정렬 폭 고정 */
.num-tabular {
  font-variant-numeric: tabular-nums;
}
