/*
 * 중고차 페이지 스타일 — v5
 * 모바일 반응형 전면 재작성 + DB 연동 수정
 */

/* ========================================
   Main Layout
======================================== */
.main-layout {
  background-color: var(--color-gray-50);
  padding: var(--spacing-10) 0;
  min-height: calc(100vh - var(--header-height));
}
.layout-container {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-12);
  display: flex;
  gap: var(--spacing-8);
}

/* ========================================
   Ad Banners
======================================== */
.left-ad, .right-ad { width: var(--layout-side-ad); flex-shrink: 0; }
.ad-sticky { position: sticky; top: calc(var(--header-height) + var(--spacing-8)); display: flex; flex-direction: column; gap: var(--spacing-5); }
.ad-card { width: 100%; height: 280px; border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-4); color: var(--color-white); cursor: pointer; transition: opacity .2s; }
.ad-card:hover { opacity: 0.9; }
.ad-blue   { background: linear-gradient(135deg, var(--color-ad-blue-from)   0%, var(--color-ad-blue-to)   100%); }
.ad-orange { background: linear-gradient(135deg, var(--color-ad-orange-from) 0%, var(--color-ad-orange-to) 100%); }
.ad-cyan   { background: linear-gradient(135deg, var(--color-ad-cyan-from)   0%, var(--color-ad-cyan-to)   100%); }
.ad-purple { background: linear-gradient(135deg, #9D4EDD 0%, #7209B7 100%); }
.ad-icon { margin-bottom: var(--spacing-3); }
.ad-title { font-size: var(--font-size-18); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-1); }
.ad-subtitle { font-size: var(--font-size-14); font-weight: var(--font-weight-medium); opacity: .9; margin-bottom: var(--spacing-3); }
.ad-desc { font-size: var(--font-size-12); opacity: .8; text-align: center; line-height: 1.6; }
.ad-cta { margin-top: var(--spacing-4); padding: 6px var(--spacing-4); background-color: rgba(255,255,255,.2); border-radius: var(--radius-full); font-size: var(--font-size-11); font-weight: var(--font-weight-semibold); }
.ad-icon-wrap { margin-bottom: 12px; }
.ad-icon-wrap svg { display: block; }

/* ========================================
   Main Content
======================================== */
.main-content {
  flex: 1;
  min-width: 0;
  max-width: var(--layout-main-content);
}

/* ========================================
   Page Header
======================================== */
.page-header { margin-bottom: var(--spacing-8); display: flex; align-items: center; justify-content: space-between; }
.page-title    { font-size: var(--font-size-32); font-weight: var(--font-weight-bold);    color: #212121; margin-bottom: var(--spacing-2); }
.page-subtitle { font-size: var(--font-size-16); font-weight: var(--font-weight-regular); color: var(--color-gray-500); }

/* ========================================
   Slider
======================================== */
.ad-slider-section { margin-bottom: var(--spacing-8); }
.slider-wrapper { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.slider-track { display: flex; transition: transform .5s ease; }
.slider-card { min-width: 100%; height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-white); padding: var(--spacing-8); }
.slider-title { font-size: var(--font-size-24); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-2); }
.slider-subtitle { font-size: var(--font-size-20); font-weight: var(--font-weight-semibold); opacity: .95; margin-bottom: var(--spacing-3); }
.slider-desc { font-size: var(--font-size-14); opacity: .85; text-align: center; line-height: 1.6; }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background-color: rgba(255,255,255,.3); border: none; border-radius: 50%; color: var(--color-white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .2s; backdrop-filter: blur(4px); z-index: 10; }
.slider-btn:hover { background-color: rgba(255,255,255,.5); }
.slider-btn-prev { left: var(--spacing-4); }
.slider-btn-next { right: var(--spacing-4); }

/* ========================================
   Filter Section
======================================== */
.filter-section {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-5);
  margin-bottom: var(--spacing-8);
  box-shadow: var(--shadow-sm);
  border: 1px solid #F0F0F0;
}
.filter-group { margin-bottom: var(--spacing-4); }
.filter-group:last-child { margin-bottom: 0; }
.filter-title { font-size: var(--font-size-16); font-weight: var(--font-weight-bold); color: var(--color-primary); margin-bottom: var(--spacing-3); }

/* 조건 선택: 차종/가격대/지역/초기화 — 3fr + auto */
.filter-row-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--spacing-2);
  align-items: center;
}

/* 상세 조건: 연식/연료/등급 — 3열, 가격은 전체 폭 */
.filter-row-detail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-3);
}
.filter-price-full { grid-column: 1 / -1; }

/* 공통 */
.filter-select-wrapper { position: relative; min-width: 0; }
.filter-select {
  width: 100%;
  min-width: 0;
  padding: 9px 28px 9px 12px;
  background-color: #F8F9FA;
  border: 1px solid #E8E8E8;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-medium);
  color: #424242;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: var(--font-family);
  box-sizing: border-box;
  text-overflow: ellipsis;
}
.filter-select:focus { outline: none; box-shadow: 0 0 0 2px rgba(0,39,166,.2); border-color: var(--color-primary); }
.select-chevron { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #999; pointer-events: none; }
.filter-reset {
  padding: 9px 12px;
  background-color: #F8F9FA;
  border: 1px solid #E8E8E8;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  cursor: pointer;
  transition: background-color .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  font-family: var(--font-family);
}
.filter-reset:hover { background-color: #E8E8E8; }

.filter-input-group { display: flex; flex-direction: column; min-width: 0; }
.input-label { font-size: var(--font-size-13); font-weight: var(--font-weight-medium); color: var(--color-gray-500); margin-bottom: 4px; }
.input-range { display: flex; align-items: center; gap: 8px; min-width: 0; }
.filter-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  background-color: #F8F9FA;
  border: 1px solid #E8E8E8;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-medium);
  color: #424242;
  font-family: var(--font-family);
  box-sizing: border-box;
}
.filter-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(0,39,166,.2); border-color: var(--color-primary); }
.filter-input[type=number]::-webkit-inner-spin-button,
.filter-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.filter-input[type=number] { -moz-appearance: textfield; }
.range-divider { font-size: var(--font-size-13); color: #999; flex-shrink: 0; }

/* ========================================
   Car Sections
======================================== */
.car-section { margin-bottom: var(--spacing-8); }
.car-section:last-child { margin-bottom: 0; }
.section-title { font-size: var(--font-size-24); font-weight: var(--font-weight-bold); color: #212121; margin-bottom: var(--spacing-5); }
.cars-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); margin-bottom: var(--spacing-5); }
.cars-grid-2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); }

/* ========================================
   Car Card
======================================== */
.car-card { background-color: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid #E0E0E0; cursor: pointer; transition: box-shadow .2s; display: block; text-decoration: none; }
.car-card:hover { box-shadow: var(--shadow-lg); }
.car-img-wrapper { width: 100%; height: 180px; overflow: hidden; }
.car-img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.car-card:hover .car-img { transform: scale(1.05); }
.car-content { padding: var(--spacing-4); }
.car-badges { display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-2); }
.car-badge { padding: 2px 10px; border-radius: var(--radius-sm); font-size: var(--font-size-12); font-weight: var(--font-weight-semibold); }
.badge-year    { background-color: rgba(0,39,166,.1); color: var(--color-primary); }
.badge-premium { background: linear-gradient(to right, #FFD700, #FFA500); color: var(--color-white); }
.badge-special { background: linear-gradient(to right, var(--color-primary), #0039D9); color: var(--color-white); }
.badge-new-car  { background: #EAF3DE; color: #3B6D11; }
.badge-used-car { background: #E6F1FB; color: #0C447C; }
.badge-cat      { background: #F1EFE8; color: #5F5E5A; }
.car-title { font-size: var(--font-size-16); font-weight: var(--font-weight-semibold); color: #212121; margin-bottom: var(--spacing-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-price { font-size: var(--font-size-18); font-weight: var(--font-weight-bold); color: var(--color-primary); margin-bottom: var(--spacing-3); }
.car-info { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-3); font-size: var(--font-size-13); color: var(--color-gray-500); margin-bottom: var(--spacing-2); }
.car-info-item { display: flex; align-items: center; gap: 4px; }
.car-info-text { font-weight: var(--font-weight-medium); }
.car-description { font-size: var(--font-size-13); color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-list-item { background-color: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid #E0E0E0; cursor: pointer; transition: box-shadow .2s; display: block; text-decoration: none; }
.car-list-item:hover { box-shadow: var(--shadow-md); }

/* ========================================
   Bottom Spacing
======================================== */
.bottom-spacing { height: 48px; background-color: var(--color-gray-50); }

/* ========================================
   Responsive
======================================== */

/* 1280px↓: 사이드 광고 숨김 */
@media (max-width: 1279px) {
  .left-ad, .right-ad { display: none; }
  .layout-container { justify-content: center; }
}

/* 1024px↓: 카드 2열, 상세조건 2열 */
@media (max-width: 1024px) {
  .cars-grid-3, .cars-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .filter-row-detail { grid-template-columns: repeat(2, 1fr); }
  .filter-price-full { grid-column: 1 / -1; }
}

/* 767px↓: 모바일 */
@media (max-width: 767px) {
  .main-layout { padding: var(--spacing-4) 0; }
  .layout-container { padding: 0 16px; }
  .main-content { width: 100%; }
  .page-header { margin-bottom: 16px; }
  .page-title { font-size: 22px; }
  .page-subtitle { font-size: 13px; }
  .filter-section { padding: 14px 12px; margin-bottom: 20px; }
  .filter-title { font-size: 14px; margin-bottom: 10px; }
  .filter-group { margin-bottom: 14px; }

  /* 조건 선택: 2×2 */
  .filter-row-top { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* 상세 조건: 1열 */
  .filter-row-detail { grid-template-columns: 1fr; gap: 10px; }
  .filter-price-full { grid-column: 1; }

  /* 카드: 2열 */
  .cars-grid-3, .cars-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .car-img-wrapper { height: 130px; }
  .car-content { padding: 10px; }
  .car-title { font-size: 13px; }
  .car-price { font-size: 15px; margin-bottom: 6px; }
  .car-info { gap: 6px; font-size:13px; }
  .car-description { display: none; }
}

/* 479px↓: 소형 폰 */
@media (max-width: 479px) {
  .layout-container { padding: 0 10px; }
  .filter-row-top { grid-template-columns: 1fr; }
  .filter-reset { width: 100%; }
  .cars-grid-3, .cars-grid-2 { grid-template-columns: 1fr; }
}

.tc__maker{font-size:13px;color:#64748b;font-weight:600;margin:2px 0 4px;}

/* ══════════════════════════════════════════════════════════
   검색 필터 패널 — 고도화 v2
   폰트 확대 + 여백 개선 + 시각적 완성도 향상
══════════════════════════════════════════════════════════ */

/* ── 필터 카드 ── */
.it-filter-card {
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
}

/* ── 섹션 제목 ("판매 구분", "차종", "세부 조건") ── */
.it-sec-title {
  color: #334155 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

/* ── 칩 버튼 (전체·신차·중고·국산차·SUV 등) — 기본 ── */
.it-chip {
  font-size: 14px !important;
  padding: 8px 18px !important;
  border-radius: 22px !important;
  color: #334155 !important;
  border: 1.5px solid #CBD5E1 !important;
  background: #fff !important;
  font-weight: 500 !important;
  transition: all .15s !important;
  letter-spacing: -.01em !important;
}
.it-chip:hover {
  color: #0C447C !important;
  border-color: #93C5FD !important;
  background: #F0F7FF !important;
}

/* ── 칩 버튼 — 활성 ── */
.it-chip.on {
  background: #1a3a6b !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(26,58,107,.20) !important;
}
.it-chip.on-sale {
  background: #185FA5 !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(24,95,165,.20) !important;
}
.it-chip.on:hover  { background: #163266 !important; color: #fff !important; }

/* ── 브랜드 그리드 구분선 ── */
.brand-grid-wrap {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid #F1F5F9 !important;
}

/* ── 브랜드 버튼 — 기본 ── */
.brand-btn {
  font-size: 13px !important;
  padding: 8px 4px !important;
  border-radius: 9px !important;
  color: #334155 !important;
  border: 1.5px solid #CBD5E1 !important;
  background: #F8FAFC !important;
  font-weight: 500 !important;
  transition: all .12s !important;
}
.brand-btn:hover {
  color: #0C447C !important;
  border-color: #93C5FD !important;
  background: #fff !important;
}

/* ── 브랜드 버튼 — 활성 ── */
.brand-btn.on {
  background: #E6F1FB !important;
  border-color: #185FA5 !important;
  color: #0C447C !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(24,95,165,.12) !important;
}
.brand-btn.on:hover {
  background: #D0E8F8 !important;
  border-color: #0C447C !important;
  color: #0C447C !important;
}

/* ── 필드 라벨 (연식·연료·가격·지역) ── */
.it-field-label {
  color: #334155 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  margin-bottom: 7px !important;
  letter-spacing: .02em !important;
}

/* ── Range 입력 ── */
.it-range-row input {
  padding: 10px 11px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  color: #1E293B !important;
  background: #F8FAFC !important;
  transition: border-color .15s !important;
}
.it-range-row input:focus {
  border-color: #185FA5 !important;
  background: #fff !important;
  outline: none !important;
}
.it-range-row input::placeholder { color: #94A3B8 !important; font-size: 13px !important; }

/* ── Select 드롭다운 ── */
.it-select-wrap select {
  padding: 10px 30px 10px 12px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  color: #1E293B !important;
  background: #F8FAFC !important;
  font-weight: 500 !important;
  transition: border-color .15s !important;
}
.it-select-wrap select:focus {
  border-color: #185FA5 !important;
  background: #fff !important;
  outline: none !important;
}

/* ── 검색/초기화 버튼 ── */
.it-search-btn {
  padding: 13px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 11px !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 2px 8px rgba(26,58,107,.18) !important;
  transition: background .15s, box-shadow .15s !important;
}
.it-search-btn:hover {
  background: #185FA5 !important;
  box-shadow: 0 4px 12px rgba(26,58,107,.26) !important;
}
.it-reset-link {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748B !important;
}

/* ── 검색 패널 토글 버튼 ── */
.car-search-toggle-btn {
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 13px 16px !important;
  border-radius: 14px !important;
  border: 1.5px solid #E2E8F0 !important;
  color: #1a3a6b !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
  margin-bottom: 12px !important;
  letter-spacing: -.01em !important;
}
.car-search-toggle-btn:hover { background: #F1F5F9 !important; }

/* ── 활성 태그 바 ── */
.it-tag {
  font-size: 13px !important;
  padding: 4px 10px 4px 12px !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  background: #E6F1FB !important;
  color: #0C447C !important;
}

/* ── 모바일 세부조건 반응형 ── */
@media (max-width: 768px) {
  .it-filter-card {
    padding: 16px 14px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }
  .it-filter-2col {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .it-range-row {
    display: flex !important;
    gap: 6px !important;
  }
  .it-range-row input {
    flex: 1 !important;
    min-width: 0 !important;
    width: 0 !important;
    font-size: 13px !important;
    padding: 9px 9px !important;
  }
  .it-select-wrap select {
    font-size: 13px !important;
    padding: 9px 28px 9px 10px !important;
  }
  .brand-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 5px !important;
  }
  .brand-btn {
    font-size:13px !important;
    padding: 7px 4px !important;
  }
  .it-chip {
    font-size: 13px !important;
    padding: 7px 14px !important;
  }
  .it-search-btn {
    font-size: 14px !important;
    padding: 12px !important;
  }
  .car-search-toggle-btn {
    font-size: 14px !important;
    padding: 12px 14px !important;
  }
}