/* ============================================================
   Towncar 차량검색 — 공용 스타일 (타운카 디자인 시스템 기반)
   ============================================================ */
/* 기존 변수 → 타운카 디자인 시스템(tds v0.2.3) 토큰 매핑
   tds.css(토큰)가 먼저 로드되어야 한다 */
:root {
  --color-white: var(--tds-static-white);
  --color-neutral-50: var(--tds-background-general-alternative);
  --color-neutral-800: var(--tds-secondary-general);
  --text-general: var(--tds-text-general);
  --text-heavy: var(--tds-text-heavy);
  --text-neutral: var(--tds-text-neutral);
  --text-alternative: var(--tds-text-alternative);
  --text-assistive: var(--tds-text-assistive);
  --bg-general: var(--tds-background-general-general);
  --bg-alternative: var(--tds-background-general-alternative);
  --line-general: var(--tds-line-general-general);
  --line-heavy: var(--tds-line-general-heavy);
  --line-alternative: var(--tds-line-general-alternative);
  --primary: var(--tds-primary-general);
  --primary-dark: color-mix(in srgb, var(--tds-primary-general) 88%, black);
  --primary-tint: color-mix(in srgb, var(--tds-primary-general) 15%, transparent);
  --point-yellow: var(--tds-point-general-yellow);
  --point-yellow-tint: var(--tds-point-soft-yellow);
  --inverse-bg: var(--tds-inverse-background);
  --inverse-text: var(--tds-inverse-text);
  --status-negative: var(--tds-status-negative);
  --radius-card: 16px;
  --radius-btn: 10px;
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 4px 24px rgba(0, 0, 0, 0.10);
  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.14);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* 모바일: 탭 하이라이트 제거 + 더블탭 확대 방지 (핀치 줌은 유지) */
html, body { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body {
  font-family: 'Pretendard', 'Noto Sans KR', -apple-system, sans-serif;
  color: var(--text-general);
  background: var(--bg-general);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
main.container { overflow-x: clip; } /* 어떤 요소도 페이지 가로폭을 넘지 못하게 (clip은 sticky 유지) */
@media (max-width: 640px) { .container { padding: 0 16px; } }
/* 웹플로우 전역 .container 가 display:flex 라서 임베드 안 요소들이 쪼그라드는 것 방어
   (main.container 로 특이도를 높여 우리 페이지 요소에만 적용) */
main.container, .filter-bar .container { display: block; }

/* ───── 호스트(웹플로우) 전역 CSS 침범 방어 ─────
   본사이트의 전역 규칙: h1~h3 중앙정렬·대형 폰트, p{line-height:200%}, .price{민트·24px},
   .info{카드형 박스} 등이 임베드 요소에 새어 들어오는 것을 차단.
   :where()로 특이도를 0에 가깝게 유지 → 사이트 규칙(같은 특이도)보다 늦게 로드돼 이기고,
   이후 로드되는 우리 컴포넌트 세부 규칙은 그대로 우선 적용됨 */
:where(main.container, #hero-slot, .book-card, .filter-panel, .mobile-cta, #site-header) h1,
:where(main.container, #hero-slot, .book-card, .filter-panel, .mobile-cta, #site-header) h2,
:where(main.container, #hero-slot, .book-card, .filter-panel, .mobile-cta, #site-header) h3,
:where(main.container, #hero-slot, .book-card, .filter-panel, .mobile-cta, #site-header) h4 {
  margin: 0; text-align: left; color: var(--text-general);
  font-family: inherit; letter-spacing: normal; line-height: 1.45;
}
:where(main.container, #hero-slot, .book-card, .filter-panel, .mobile-cta) p {
  margin: 0; font-size: 15px; line-height: 1.6;
  color: var(--text-general); font-family: inherit;
}
:where(main.container, .book-card, .mobile-cta) .price {
  height: auto; max-width: none; color: inherit;
  font-family: inherit; line-height: 1.35;
}
:where(main.container, .book-card) .info {
  padding: 0; max-width: none; height: auto;
  flex-direction: row; background: transparent;
}

/* 호스트의 p/span line-height:200% 가 칩·필터바 높이를 부풀리는 문제 방어 */
:where(main.container, #hero-slot, .book-card, .filter-panel, .mobile-cta, #site-header, .tc-dtp)
  :is(span, a, li, label, strong, em, small, button, input, select, textarea) {
  line-height: 1.45; font-family: inherit; letter-spacing: normal;
}
/* 호스트의 input 굵기(볼드) 침범 방어 */
:where(main.container, #hero-slot, .book-card, .filter-panel, .mobile-cta, .tc-dtp)
  :is(input, textarea, select) {
  font-weight: 400;
}

/* ---------- 헤더 — towncar.co.kr /search-car 원본 100% 이식 (앱 다운로드 버튼만 제외) ----------
   원본: .navbar-logo-left-container > .brix---container-default-10-copy > .navbar-wrapper-2 */
.site-header {
  position: relative; z-index: 90;            /* 원본과 동일: 고정하지 않고 스크롤과 함께 올라감 */
  background: #fff;
  padding: 12px 0;
  border-bottom: 1px solid #f6f6f6;
}
/* 양 끝은 본문 컨테이너(.container)와 동일 정렬: 1200px / 24px (모바일 16px) */
.tc-nav-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.tc-nav-wrapper {                              /* .navbar-wrapper-2 */
  display: flex; justify-content: space-between; align-items: center;
  padding: 0;
}
.tc-nav-group { display: flex; justify-content: center; align-items: center; } /* .div-block-1972 */
.tc-brand { display: flex; align-items: center; }
.tc-brand img { object-fit: contain; width: 120px; height: auto; margin-right: 20px; } /* .image-373 */
.tc-nav-link {                                 /* .nav-link-copy.wh */
  display: block; color: #354044;              /* var(--light-grey9) */
  font-size: 15px; font-weight: 500; line-height: 100%; letter-spacing: 0;
  padding: 14px 12px; border-radius: 8px; margin: 0 20px;
  transition: background-color 0.2s;
}
.tc-nav-link:hover { background-color: #f6f6f6; } /* var(--f6) */
/* 현재 보고 있는 메뉴 (차량 이용하기 = 이 페이지) */
.tc-nav-link.is-current { color: #00c4b1; font-weight: 600; cursor: default; pointer-events: none; }
.tc-nav-link--2nd { margin-left: 8px; }           /* ._2nd */
/* 햄버거 드롭다운 (.nav-dropdown) */
.tc-dd { position: relative; display: flex; justify-content: center; align-items: center; margin-right: -10px; } /* 토글 패딩 보정 → 아이콘이 본문 오른쪽 끝과 정렬 */
.tc-dd-toggle {                                /* .nav-dropdown-toggle */
  display: flex; justify-content: center; align-items: center;
  padding: 10px; border-radius: 8px; border: none; background: transparent;
  transition: background-color 0.2s; cursor: pointer;
}
.tc-dd-toggle:hover { background-color: #f6f6f6; }
.tc-dd-toggle img { width: 20px; max-width: none; display: block; } /* .image-423 */
.tc-dd-list {                                  /* .nav-dropdown-list.shadow-three */
  position: absolute; top: calc(100% + 10px); right: 10px; z-index: 900;
  background: #fff; border-radius: 12px;
  box-shadow: rgba(20, 20, 43, 0.06) 0 0 10px 5px;
  min-width: 200px; padding: 10px 10px 5px;
  /* 아래로 내려오는 애니메이션 */
  visibility: hidden; opacity: 0; transform: translateY(-14px); pointer-events: none;
  transition: opacity 0.22s ease, transform 0.26s ease, visibility 0s linear 0.26s;
}
.site-header.menu-open .tc-dd-list {
  visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto;
  transition: opacity 0.22s ease, transform 0.26s ease;
}
.tc-dd-list a, .tc-dd-list .tc-dd-m {          /* .nav-link.noborder */
  display: flex; justify-content: center; align-items: center;
  color: #354044; font-size: 15px; font-weight: 500; line-height: 100%;
  white-space: nowrap; padding: 14px 30px; border-radius: 8px; margin-bottom: 5px;
  transition: 0.2s;
}
.tc-dd-list a:hover { background-color: #f1f2f2; } /* var(--light-grey1) */
/* 현재 보고 있는 메뉴 표시 (모바일 드로어) */
.tc-dd-list .is-current { color: #00c4b1; font-weight: 600; cursor: default; pointer-events: none; }
/* 데스크탑: 헤더에 링크가 이미 있으므로 드롭다운엔 블로그·고객센터·회사소개만 */
@media (min-width: 768px) { .tc-dd-list .tc-dd-m { display: none; } }
@media (max-width: 767px) { .tc-dd-list .tc-dd-m { display: flex; } }
/* 브레이크포인트 (좌우 여백은 본문 컨테이너를 따름) */
@media (max-width: 767px) {
  .tc-nav-link { display: none; }
  /* 햄버거 메뉴: 헤더 아래 전체폭으로 내려오는 시트 */
  .tc-dd { position: static; }
  .tc-dd-list {
    top: 100%; left: 0; right: 0; width: auto; min-width: 0;
    border-radius: 0;
    box-shadow: 0 24px 32px rgba(15, 15, 16, 0.12);
    padding: 10px 16px 18px;
  }
  /* 실사이트 모바일 메뉴와 동일: 15px/500, padding 14px 10px, 항목 간격 5px */
  .tc-dd-list a, .tc-dd-list .tc-dd-m { justify-content: flex-start; text-align: left; padding: 14px 10px; }
}
/* ---------- 모바일 앱 유도 배너 (헤더 아래) ---------- */
.tc-appbar { display: none; }
@media (max-width: 767px) {
  .tc-appbar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; background: #fff; border-bottom: 1px solid #f1f2f2;
  }
  .tc-appbar[hidden] { display: none; }
  .tc-appbar__icon {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px;
    background: #f6f6f6; display: flex; align-items: center; justify-content: center;
  }
  .tc-appbar__icon svg { display: block; width: 34px; height: 34px; }
  .tc-appbar__text {
    flex: 1; min-width: 0; margin: 0;
    font-size: 14px; font-weight: 500; line-height: 1.4; color: #171719;
  }
  .tc-appbar__cta {
    flex: 0 0 auto; padding: 8px 12px; border: 1px solid #e1e2e4; border-radius: 8px;
    background: #fff; color: #00c4b1; font-size: 13px; font-weight: 600; white-space: nowrap;
  }
  .tc-appbar__x {
    flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 0;
    background: transparent; color: #a1a1a5; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
}
@media (max-width: 640px) { .tc-nav-container { padding: 0 16px; } }
@media (max-width: 479px) { .tc-brand img { width: 110px; } }
/* 상세 페이지 모바일: 앱처럼 헤더 없이 히어로가 맨 위 (뒤로가기 버튼 사용) */
@media (max-width: 720px) { .page-detail .site-header { display: none; } }

/* ---------- 버튼 ---------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius-btn);
  padding: 13px 24px; font-size: 16px; font-weight: 700;
  transition: background .2s;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary.sm { padding: 9px 16px; font-size: 14px; }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: var(--text-general);
  border: 1px solid var(--line-heavy); border-radius: var(--radius-btn);
  padding: 12px 23px; font-size: 15px; font-weight: 600;
  transition: border-color .2s, background .2s;
}
.btn-outline:hover { border-color: var(--text-general); }
.btn-ghost {
  background: transparent; border: none; color: var(--text-neutral);
  padding: 10px 14px; font-size: 14px; font-weight: 500; border-radius: 8px;
}
.btn-ghost:hover { background: var(--bg-alternative); }

/* ---------- 뱃지 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--primary-tint); color: var(--primary);
  border-radius: 999px; padding: 4px 12px;
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.badge-neutral { background: var(--bg-alternative); color: var(--text-neutral); }
.badge-yellow { background: var(--point-yellow-tint); color: #8B6A00; }
.badge-outline { background: #fff; color: var(--text-neutral); border: 1px solid var(--line-general); }

/* ---------- 푸터 (towncar.co.kr 동일: 라이트 그레이) ---------- */
.site-footer {
  background: #F6F6F6;
  padding: 80px 0 100px; margin-top: 96px;
  line-height: 1.7;
}
.footer-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
  padding-bottom: 48px; border-bottom: 1px solid rgba(23, 23, 25, 0.08);
}
@media (max-width: 960px) { .footer-grid { grid-template-columns: repeat(3, 1fr); row-gap: 36px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col .col-title { font-size: 14px; font-weight: 600; color: #354044; margin-bottom: 4px; }
.footer-col a { font-size: 12px; font-weight: 500; color: #616F72; }
.footer-col a:hover { color: #354044; }
.footer-info { padding-top: 40px; }
.footer-logo { height: 36px; margin-bottom: 20px; }
.footer-info .company { font-size: 12px; color: #616F72; margin-bottom: 16px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.legal-links a { font-size: 12px; font-weight: 500; color: #616F72; text-decoration: underline; text-underline-offset: 2px; }
.legal-links a:hover { color: #354044; }

/* ---------- 스켈레톤 ---------- */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
  background: linear-gradient(90deg, #f0f0f1 25%, #f8f8f9 50%, #f0f0f1 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}

/* ---------- 유틸 ---------- */
.text-alt { color: var(--text-alternative); }
.divider { border: none; border-top: 1px solid var(--line-general); }

/* ---------- 페이지 간 서랍 전환 (View Transitions API, 크로스 도큐먼트) ----------
   목록 → 상세: 오른쪽에서 서랍처럼 들어옴 / 뒤로가기: 오른쪽으로 나감 */
@media (max-width: 720px) {
  @view-transition { navigation: auto; }
}
@media (max-width: 720px) {
  ::view-transition-old(root) { animation: 260ms ease both vt-dim-out; }
  ::view-transition-new(root) { animation: 300ms cubic-bezier(0.22, 0.9, 0.35, 1) both vt-slide-in; z-index: 1; }
  html[data-vt-back]::view-transition-old(root) { animation: 300ms cubic-bezier(0.22, 0.9, 0.35, 1) both vt-slide-out; z-index: 1; }
  html[data-vt-back]::view-transition-new(root) { animation: 260ms ease both vt-dim-in; }
}
@keyframes vt-slide-in  { from { transform: translateX(100%); } }
@keyframes vt-slide-out { to   { transform: translateX(100%); } }
@keyframes vt-dim-out   { to   { transform: translateX(-24%); opacity: 0.75; } }
@keyframes vt-dim-in    { from { transform: translateX(-24%); opacity: 0.75; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- 이미지 페이드인 (점진 로딩 감춤) ---------- */
img.img-fade { opacity: 0; transition: opacity 0.25s ease; }
img.img-fade.loaded { opacity: 1; }

/* ---------- 차량 카드 (검색·상세 공용) ---------- */
.car-card { display: block; min-width: 0; border-radius: var(--radius-card); } /* 그리드 자동 최소폭 해제 */
.car-card .thumb {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-card);
  overflow: hidden;
  background: linear-gradient(90deg, #f0f0f1 25%, #f8f8f9 50%, #f0f0f1 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}
.car-card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.car-card:hover .thumb img { transform: scale(1.04); }
.car-card .meta { padding: 12px 4px 0; }
/* 주소 (차량명 아래, 상세모델명 자리) */
.car-card .region {
  font-size: 12.5px; color: var(--text-alternative); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.car-card .region .dist { color: var(--primary); font-weight: 500; }
.car-card .region .dist-dot { color: var(--text-assistive); }
.car-card .yr { font-weight: 500; color: var(--text-alternative); } /* 연식 흐리게 */
.car-card .meta { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.car-card .age-chip {
  align-self: flex-start; margin-top: 7px;
  background: var(--bg-alternative); color: var(--text-neutral);
  font-size: 12px; font-weight: 500; line-height: 1.4;
  padding: 4px 9px; border-radius: 7px;
}
/* 연령 칩: 모바일 전용 */
.car-card .age-chip { margin-top: 7px; }
.car-card .name { font-size: 16.5px; font-weight: 700; letter-spacing: -0.3px; margin-top: 2px; }
.car-card .trim {
  font-size: 12.5px; color: var(--text-alternative); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.car-card .price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 8px; flex-wrap: nowrap; min-width: 0; }
.car-card .price { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car-card .perkm { white-space: nowrap; flex-shrink: 0; }
.car-card .price { font-size: 17px; font-weight: 700; }
.car-card .price small { font-size: 13px; font-weight: 500; color: var(--text-alternative); }
.car-card .perkm { font-size: 13px; font-weight: 500; color: var(--text-alternative); } /* '/일' 표기와 동일 */