/**
 * ┌─────────────────────────────────────────────────────────────────────┐
 * │  FILE INDEX — 여수뉴스포털                                          │
 * ├──────────────┬──────────────────────────────────────────────────────┤
 * │  파일명      │  cars.css                                           │
 * │  위치        │  /deal/assets/css/cars.css                                        │
 * │  생성일      │  2026-05-16                                           │
 * │  수정일      │  2026-05-16                                           │
 * │  버전        │  v1.0                                                 │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  기능/역할   │  스타일시트 — 포털·컴포넌트별 규칙 적용               │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  레이아웃    │  기준 너비: 1200px (전역·포털 변수와 연동)            │
 * │  섹터 구조   │  .sector-wrap width:100% — 다열은 .sector-inner (원칙2) │
 * │  폰트 기준   │  최소 14px (--fs-base 등 변수 연동)                 │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  연관 파일   │  load-by  : header.php·포털 레이아웃 (상이)            │
 * │              │  변수 주입: echoLayoutVars()·포털 CSS (해당 시)       │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  참조 사항   │  /docs/PROJECT_RULES.md 원칙8·포털 CSS 접두 규칙       │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  변경 이력   │  2026-05-16 v1.0 - FILE INDEX 일괄 부여                     │
 * └──────────────┴──────────────────────────────────────────────────────┘
 */

:root {
  --car-primary: var(--pls-accent, var(--pub-accent, #1d4ed8));
  --car-dark:    #1e3a8a;
  --car-light:   #dbeafe;
  --car-bg:      #eff6ff;
}

/* ── sector-inner grid 탈출 ── */
.car-subnav,
.car-page-header,
.car-type-tabs,
.car-filter-panel,
.car-list-section,
.car-wrap { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }

/* ── 서브네비 ── */
.car-subnav {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  position: sticky; top: 0; z-index: 50;
}
.car-subnav-inner {
  width:100%;
  display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 16px; align-items: center;
}
.car-snav-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 20px;
  background: #f1f5f9; color: #475569;
  font-size: 15px; font-weight: 500; text-decoration: none; transition: all .15s;
}
.car-snav-item:hover, .car-snav-item.active { background: var(--car-primary); color: #fff; }
.car-snav-write {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 20px;
  background: var(--car-primary); color: #fff;
  font-size: 15px; font-weight: 600; text-decoration: none; transition: all .15s;
}
.car-snav-write:hover { background: var(--car-dark); }

/* ── 페이지 헤더 ── */
.car-page-header {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  color: #fff; padding: 28px 24px;
}
.car-page-header-inner {
  width:100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.car-page-header h1 { margin: 0 0 6px; font-size: 24px; font-weight: 800; }
.car-page-header p  { margin: 0; opacity: .88; font-size: 15px; }

/* ── 거래유형 탭 ── */
.car-type-tabs {
  background: #fff; border-bottom: 1px solid #e2e8f0;
}
.car-type-tabs-inner {
  width:100%;
  display: flex; gap: 0; overflow-x: auto;
}
.car-ttab {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 20px; font-size: 15px; font-weight: 600;
  color: #64748b; text-decoration: none; border-bottom: 2px solid transparent;
  white-space: nowrap; transition: all .15s;
}
.car-ttab:hover  { color: var(--car-primary); }
.car-ttab.active { color: var(--car-primary); border-bottom-color: var(--car-primary); }
.car-ttab-cnt    { font-size: 14px; background: #f1f5f9; border-radius: 10px; padding: 1px 7px; }
.car-ttab.active .car-ttab-cnt { background: var(--car-light); color: var(--car-dark); }

/* ── 필터 패널 ── */
.car-filter-panel {
  background: #fff; border-bottom: 1px solid #e2e8f0;
  padding: 14px 0;
}
.car-filter-inner {
  width:100%; padding-left:0; padding-right:0;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.car-frow { display: flex; align-items: center; gap: 8px; }
.car-fselect, .car-finput {
  padding: 6px 10px; border: 1.5px solid #e2e8f0; border-radius: 8px;
  font-size: 15px; color: #374151; background: #fff;
}
.car-fselect:focus, .car-finput:focus { outline: none; border-color: var(--car-primary); }
.car-finput { width: 80px; }
.car-fsep { color: #94a3b8; font-size: 14px; }
.car-fbtn-search {
  padding: 6px 16px; border-radius: 8px;
  background: var(--car-primary); color: #fff;
  border: none; font-size: 15px; font-weight: 600; cursor: pointer;
}
.car-fbtn-reset {
  padding: 6px 12px; border-radius: 8px;
  background: #f1f5f9; color: #64748b;
  border: 1.5px solid #e2e8f0; font-size: 15px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.car-filter-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.car-ftag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 12px; background: var(--car-light);
  color: var(--car-dark); border-radius: 20px; font-size: 14px; font-weight: 600;
  text-decoration: none;
}
.car-ftag:hover { background: #bfdbfe; }

/* ── 콘텐츠 (목록 — 우측 .pub-sidebar 는 shell SSOT) ── */
.car-list-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.car-list-total { font-size: 15px; color: #64748b; }
.car-sort-sel {
  padding: 5px 10px; border: 1.5px solid #e2e8f0; border-radius: 8px;
  font-size: 15px; background: #fff;
}

/* ── 매물 카드 목록 ── */
.car-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.car-card {
  display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; border: 1.5px solid #f1f5f9;
  overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06);
  text-decoration: none; color: #1e293b; transition: all .18s;
}
.car-card:hover {
  border-color: #fcd34d; box-shadow: 0 6px 20px rgba(217,119,6,.15);
  transform: translateY(-2px);
}
.car-card-thumb {
  position: relative; width: 100%; padding-top: 58%; background: #f8fafc; overflow: hidden;
}
.car-card-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .3s;
}
.car-card:hover .car-card-thumb img { transform: scale(1.04); }
.car-thumb-blank {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: #cbd5e1;
}
.car-sold-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 700; z-index: 2;
}
.car-fuel-badge {
  position: absolute; top: 8px; right: 8px;
  padding: 3px 9px; border-radius: 6px; font-size: 14px; font-weight: 700;
  background: rgba(0,0,0,.55); color: #fff; z-index: 3;
}
.car-cond-badge {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 9px; border-radius: 6px; font-size: 14px; font-weight: 700; z-index: 3;
}
.car-cond-excellent { background: #059669; color: #fff; }
.car-cond-good      { background: #2563eb; color: #fff; }
.car-cond-fair      { background: #1d4ed8; color: #fff; }
.car-cond-poor      { background: #dc2626; color: #fff; }

.car-card-body { padding: 14px 14px 16px; }
.car-card-brand { font-size: 14px; color: #94a3b8; margin-bottom: 3px; font-weight: 600; }
.car-card-title {
  font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.car-card-price { font-size: 18px; font-weight: 800; color: #1e293b; margin-bottom: 8px; }
.car-card-nego  { font-size: 14px; color: var(--car-primary); font-weight: 600; margin-left: 4px; }
.car-card-info  { display: flex; flex-wrap: wrap; gap: 6px; }
.car-info-chip  {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; background: #f8fafc; border-radius: 20px;
  font-size: 14px; color: #475569; font-weight: 500;
}
.car-accident-chip { background: #fef2f2; color: #dc2626; }
.car-card-meta  { margin-top: 8px; font-size: 14px; color: #94a3b8; }
.car-card-acc-warn { color: #f59e0b; font-size: 14px; font-weight: 600; }

/* ── 사이드바 ── */
.car-sidebar {}
.car-sb-box {
  background: #fff; border: 1.5px solid #f1f5f9;
  border-radius: 14px; padding: 18px; margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.car-sb-title { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 14px; }
.car-sb-stat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.car-sb-stat {
  text-align: center; padding: 12px 8px;
  background: var(--car-bg); border-radius: 10px;
}
.car-sb-stat-num { font-size: 18px; font-weight: 800; color: var(--car-primary); }
.car-sb-stat-lbl { font-size: 14px; color: #64748b; margin-top: 2px; }
.car-sb-link-list { list-style: none; margin: 0; padding: 0; }
.car-sb-link-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 15px;
}
.car-sb-link-list li:last-child { border-bottom: none; }
.car-sb-link-list a { text-decoration: none; color: #334155; }
.car-sb-link-list a:hover { color: var(--car-primary); }
.car-sb-link-cnt { font-size: 14px; background: #f1f5f9; border-radius: 10px; padding: 1px 8px; color: #64748b; }

/* ── 빈 상태 ── */
.pl-empty.car-empty,
.car-empty {
  grid-column: 1/-1; text-align: center;
  padding: 60px 24px; background: #f8fafc; border-radius: 14px; color: #94a3b8;
}
.pl-empty.car-empty i,
.car-empty i { font-size: 32px; display: block; margin-bottom: 10px; }

/* ── 페이지네이션 ── */
.car-pagination {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: 28px; grid-column: 1/-1;
}
.car-pag-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  font-size: 15px; text-decoration: none; font-weight: 500;
  background: #fff; color: #475569; border: 1.5px solid #e2e8f0; transition: all .15s;
}
.car-pag-btn:hover     { border-color: var(--car-primary); color: var(--car-primary); }
.car-pag-btn.active    { background: var(--car-primary); color: #fff; border-color: var(--car-primary); }
.car-pag-btn.disabled  { opacity: .4; pointer-events: none; }

/* ── 반응형 ── */
@media (max-width: 860px) {
  .car-sidebar { display: none; }
}
@media (max-width: 600px) {
  .car-grid { grid-template-columns: 1fr; }
  .car-filter-inner { flex-direction: column; align-items: stretch; }
}

/* ═══ 상세 페이지 (레이아웃 — shell .pub-content-wrap SSOT) ═══ */
.car-detail-gallery { position: relative; border-radius: 16px; overflow: hidden; background: #1e293b; }
.car-gallery-main { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; cursor: zoom-in; }
.car-gallery-blank { width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #4b5563; }
.car-detail-h1 { font-size: 24px; font-weight: 800; color: #1e293b; margin: 18px 0 8px; }
.car-detail-sub {
  margin: -4px 0 10px;
  font-size: var(--fs-sm, 15px);
  font-weight: 600;
  color: #64748b;
}
.car-detail-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.car-dm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 20px; font-size: 14px; font-weight: 600; background: #f1f5f9; color: #475569; }
.car-dm-chip.accident-chip { background: #fef2f2; color: #dc2626; }
.car-dm-chip--sold { background: #fef2f2; color: #dc2626; font-weight: 700; }
.car-reg-ok {
  margin-top: 16px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: var(--fs-sm, 15px);
  color: #166534;
}
.car-price-box { background: var(--car-bg); border: 1.5px solid #93c5fd; border-radius: 14px; padding: 16px 20px; margin-bottom: 18px; }
.car-price-main { font-size: 28px; font-weight: 800; color: #1e293b; }
.car-price-nego { font-size: 15px; color: var(--car-primary); font-weight: 600; margin-top: 4px; }
.car-info-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.car-info-table th, .car-info-table td { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; font-size: 15px; text-align: left; }
.car-info-table th { color: #64748b; font-weight: 600; width: 110px; background: #f8fafc; }
.car-info-table td { color: #1e293b; }
.car-desc-box { background: #fff; border: 1.5px solid #f1f5f9; border-radius: 12px; padding: 18px; margin-bottom: 20px; }
.car-desc-box h3 { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.car-desc-box p  { font-size: 14px; line-height: 1.8; color: #374151; white-space: pre-wrap; margin: 0; }
.car-feat-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.car-feat-tag { padding: 4px 12px; background: var(--car-light); color: var(--car-dark); border-radius: 20px; font-size: 14px; font-weight: 600; }
.car-nav-row { display: flex; gap: 8px; margin-top: 24px; }
.car-nav-btn { flex: 1; padding: 11px 16px; border-radius: 10px; font-size: 15px; font-weight: 600; border: 1.5px solid #e2e8f0; background: #fff; color: #475569; cursor: pointer; text-decoration: none; text-align: center; transition: all .15s; }
.car-nav-btn:hover { border-color: var(--car-primary); color: var(--car-primary); }
.car-nav-btn.primary { background: var(--car-primary); color: #fff; border-color: var(--car-primary); }
.car-nav-btn.primary:hover { background: var(--car-dark); }
.car-nav-btn.danger { border-color: #dc2626; color: #dc2626; }
.car-nav-btn.danger:hover { background: #dc2626; color: #fff; }

/* 사이드 판매자 카드 */
.car-seller-card { background: #fff; border: 1.5px solid #f1f5f9; border-radius: 14px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.car-seller-card h3 { font-size: 14px; font-weight: 700; margin: 0 0 14px; }
.car-seller-type { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.car-seller-type.private { background: #dbeafe; color: #1d4ed8; }
.car-seller-type.dealer  { background: #dbeafe; color: #1e3a8a; }
.car-seller-name { font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
.car-seller-phone { font-size: 18px; font-weight: 800; color: var(--car-primary); margin-bottom: 14px; }
.car-call-btn { display: block; width: 100%; padding: 11px; border-radius: 10px; background: var(--car-primary); color: #fff; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; transition: all .15s; }
.car-call-btn:hover { background: var(--car-dark); }
.car-seller-mail {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: var(--fs-sm, 15px);
  color: #64748b;
}
.car-related-card { background: #fff; border: 1.5px solid #f1f5f9; border-radius: 14px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.05); margin-top: 12px; }
.car-sb-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.car-related-list a { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f8fafc; text-decoration: none; color: #334155; font-size: 15px; }
.car-related-list a:last-child { border-bottom: none; }
.car-related-list a:hover { color: var(--car-primary); }
.car-related-thumb {
  width: 54px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.car-related-thumb--blank { background: #f1f5f9; }
.car-related-meta { min-width: 0; }
.car-related-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.car-related-price {
  font-size: 14px;
  color: var(--car-primary, var(--pub-accent));
  font-weight: 700;
}
.car-pw-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 9999);
  background: rgba(0, 0, 0, 0.55);
}
.car-pw-modal[hidden] { display: none !important; }
.car-pw-modal__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  width: 340px;
  max-width: 92vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.car-pw-modal__head { text-align: center; margin-bottom: 16px; }
.car-pw-modal__head h3 {
  margin: 8px 0 4px;
  font-size: var(--fs-md, 17px);
}
.car-pw-modal__head p {
  font-size: var(--fs-sm, 15px);
  color: #64748b;
  margin: 0;
}
.car-pw-modal__input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 9px;
  font-size: 14px;
  box-sizing: border-box;
  margin-bottom: 12px;
}
.car-pw-modal__err {
  color: #dc2626;
  font-size: 14px;
  margin-bottom: 8px;
}
.car-pw-modal__ok {
  width: 100%;
  padding: 11px;
  background: var(--car-primary, var(--pub-accent));
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
}
.car-pw-modal__cancel {
  width: 100%;
  padding: 10px;
  background: #f1f5f9;
  color: #475569;
  border: 1.5px solid #e2e8f0;
  border-radius: 9px;
  font-size: var(--fs-sm, 15px);
  cursor: pointer;
}

/* ═══ 등록 폼 — deal-write-ssot (1200 전폭 · 패딩 최소 · 모바일 우선) ═══ */
.cars-write-wrap,
.car-write-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 0 16px;
  box-sizing: border-box;
}
.cars-write-wrap.deal-write-ssot,
.car-write-wrap.deal-write-ssot {
  padding: 0 0 12px;
}
@media (min-width: 769px) {
  .cars-write-wrap,
  .car-write-wrap { padding: 0 0 24px; }
  .cars-write-wrap.deal-write-ssot,
  .car-write-wrap.deal-write-ssot { padding: 0 0 20px; }
}
.car-form-box { background: #fff; border: 1.5px solid #f1f5f9; border-radius: 14px; padding: 24px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.car-form-box h2 { font-size: 15px; font-weight: 700; color: #1e293b; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1.5px solid #f1f5f9; }
.cw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.cw-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.cw-row-full { grid-template-columns: 1fr; }
.cw-field { display: flex; flex-direction: column; gap: 5px; }
.cw-label { font-size: 15px; font-weight: 600; color: #374151; }
.cw-label .req { color: #dc2626; margin-left: 2px; }
.cw-input, .cw-select, .cw-textarea {
  padding: 9px 12px; border: 1.5px solid #e2e8f0; border-radius: 9px;
  font-size: 15px; color: #1e293b; background: #fff; transition: border-color .15s;
}
.cw-input:focus, .cw-select:focus, .cw-textarea:focus { outline: none; border-color: var(--car-primary); }
.cw-textarea { min-height: 100px; resize: vertical; }
.cw-hint { font-size: 14px; color: #94a3b8; }
.cw-input-wrap { display: flex; align-items: center; gap: 6px; }
.cw-unit { font-size: 15px; color: #64748b; white-space: nowrap; }
.cw-radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-radio-item { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; cursor: pointer; }
.cw-alert { background: #fef2f2; border: 1.5px solid #fca5a5; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }
.cw-alert ul { margin: 0; padding-left: 18px; }
.cw-alert li { font-size: 15px; color: #dc2626; line-height: 1.7; }
.cw-submit-row { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.cw-btn-submit { padding: 12px 40px; border-radius: 10px; background: var(--car-primary); color: #fff; font-size: 15px; font-weight: 700; border: none; cursor: pointer; transition: all .15s; }
.cw-btn-submit:hover { background: var(--car-dark); }
.cw-btn-cancel { padding: 12px 28px; border-radius: 10px; background: #f1f5f9; color: #475569; font-size: 15px; font-weight: 600; border: 1.5px solid #e2e8f0; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.cw-btn-cancel:hover { background: #e2e8f0; }
.cw-thumb-preview { width: 100%; max-width: 280px; border-radius: 10px; margin-top: 8px; display: none; }
@media (max-width: 640px) {
  .cw-row { grid-template-columns: 1fr; }
  .cw-row-3 { grid-template-columns: 1fr; }
}

/* ── Mobile-First 보정 (원칙: 14px·모바일우선·터치44px) ── */
/* 샘플 셸(.car-ssot-* · .car-grid--ssot)은 1열 강제를 제외 — 네비3·폼2·카드2/3열 유지 */
@media (max-width: 768px) {
  [class*="-page-header"],[class*="-hd"],[class*="-header-inner"] { flex-wrap: wrap !important; }
  /* .ct-tree--sidebar 는 우측 LNB — 숨기지 않음 (배너만 보이던 버그 수정) */
  [class*="-sidebar"]:not(.pub-sidebar):not(.ct-tree--sidebar),[class*="-side-col"] { display: none !important; }
  [class*="-content-wrap"]:not(.pub-content-wrap),[class*="-detail-wrap"],[class*="-body-wrap"] { grid-template-columns: 1fr !important; }
  [class*="-grid"]:not([class*="-1"]):not(.car-ssot-nav-grid):not(.pls-nav-grid):not(.car-ssot-grid2):not(.car-ssot-grid4):not(.car-ssot-chips--type):not(.pls-chips--type):not(.car-grid):not(.car-grid--ssot) {
    grid-template-columns: repeat(auto-fill, minmax(280px,1fr)) !important;
  }
  [class*="-search"] input, [class*="-filter"] input, [class*="-filter"] select { font-size: 16px !important; min-height: 44px !important; }
  [class*="-btn"]:not([class*="-icon"]):not([class*="-sm-icon"]) { min-height: 44px; }
  [class*="-list-item"],[class*="-card"] { flex-wrap: wrap !important; }
  [class*="-list-thumb"],[class*="-card-img"] { width: 100% !important; max-height: 200px !important; object-fit: cover; }
  [class*="-meta"],[class*="-tags"] { flex-wrap: wrap !important; }
}
@media (max-width: 480px) {
  [class*="-grid"]:not(.car-ssot-nav-grid):not(.pls-nav-grid):not(.car-ssot-grid2):not(.car-ssot-grid4):not(.car-ssot-chips--type):not(.pls-chips--type):not(.car-grid):not(.car-grid--ssot) {
    grid-template-columns: 1fr !important;
  }
  [class*="-card-grid"],[class*="-view-card"] { grid-template-columns: 1fr !important; }
}

/* ═══ 좌측 본문(pub-main-col) 최대폭 — 검색·카드 그리드 ═══ */
.car-list-page--sample,
.car-list-page--sample.cars-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.pub-main-col:has(.car-sample-shell) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.car-sample-shell {
  /* pub-main-col 안 — 본문 열 100% (grid-column 불필요 · 구 720px 중앙 폐기) */
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  background: #fff;
  padding: 0 0 24px;
}
.car-ssot-nav,
.car-ssot-form { width: 100%; box-sizing: border-box; }

/* 우측 사이드 — 본문 헤더와 상단 맞춤
   DOM SSOT 유지: S7목록사이드 상단(s7_aside) → ct-tree → s7_aside_bottom
   (order로 배너를 내리면 안 됨) */
.pub-list-page:has(.car-list-page--sample) .pub-content-wrap {
  align-items: start;
}
.pub-list-page:has(.car-list-page--sample) .pub-content-wrap > .pub-sidebar {
  align-self: start;
  position: sticky;
  top: 12px;
  margin-top: 0;
  padding-top: 0;
}
/* 사이드 배너 — 앞·뒤 20px (portal-list-shell SSOT). slot 내부 중첩 margin만 제거 */
.pub-list-page:has(.car-list-page--sample) .pub-sidebar > .l14-banner-zone--s7_aside .ai-slot,
.pub-list-page:has(.car-list-page--sample) .pub-sidebar > .l14-banner-zone--s7_aside .bnr-slot,
.pub-list-page:has(.car-list-page--sample) .pub-sidebar > .l14-banner-zone--s7_aside .l14-inner {
  margin-top: 0;
  margin-bottom: 0;
}

/* 페이지 헤더 아래 분류·테마 — 슬림 · 4각 테두리 */
.car-ssot-nav {
  background: #fff;
  border-bottom: none;
  margin: 0 0 10px;
  padding: 0;
}
.car-ssot-nav-grid {
  display: grid;
  grid-template-columns: repeat(var(--pls-nav-cols, 3), minmax(0, 1fr)) !important;
  gap: 6px;
}
.car-ssot-nav-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 4px;
  min-height: 24px;
  padding: 2px 6px;
  text-align: center;
  text-decoration: none;
  font-size: var(--fs-sm, 15px);
  font-weight: 700;
  color: #111827;
  border: 1px solid #cbd5e1;
  border-radius: 0;
  background: #fff;
  box-sizing: border-box;
  white-space: normal;
}
.car-ssot-nav-item:hover {
  border-color: var(--car-primary, var(--pub-accent, var(--ct-accent)));
  color: var(--car-primary, var(--pub-accent, var(--ct-accent)));
}
.car-ssot-nav-item.is-active {
  color: var(--car-primary, var(--pub-accent, var(--ct-accent)));
  border-color: var(--car-primary, var(--pub-accent, var(--ct-accent)));
  background: var(--ct-accent-bg, color-mix(in srgb, var(--car-primary, var(--pub-accent, var(--ct-accent))) 10%, #fff));
}
.car-ssot-nav-item .car-ssot-cnt,
.car-ssot-nav-item .deal-ssot-cnt {
  font-size: var(--fs-xs, 14px);
  font-weight: 600;
  color: #6b7280;
  margin-left: 4px;
}
.car-ssot-nav-item.is-active .car-ssot-cnt,
.car-ssot-nav-item.is-active .deal-ssot-cnt {
  color: inherit;
}
.car-ssot-form {
  background: #fff;
  padding: 4px 12px 16px;
}
.car-ssot-section { margin: 0 0 14px; }
.car-ssot-title {
  margin: 10px 0 12px;
  text-align: left;
  font-size: var(--fs-lg, 18px);
  font-weight: 900;
  color: #111827;
}
/* 검색 캐스케이드·상세필터 — 좁은 폭 2열, 본문 최대폭에선 3열 */
.car-ssot-cascade,
.car-ssot-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px;
}
/* 주행거리~주행거리 · 연식~연식 — 같은 행 4개 */
.car-ssot-grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px;
  margin-top: 12px;
}
.car-ssot-grid4 .car-ssot-select {
  min-width: 0;
  padding-left: 8px;
  padding-right: 22px;
  font-size: var(--fs-sm, 15px);
}
.car-ssot-select--half { grid-column: 1 / 2; }
@media (min-width: 900px) {
  .car-sample-shell .car-ssot-cascade,
  .car-sample-shell .car-ssot-grid2 {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .car-sample-shell .car-ssot-select--half { grid-column: auto; }
  .car-sample-shell .car-ssot-grid4 {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px;
  }
}
.car-ssot-select,
.car-ssot-kw input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: var(--fs-base, 16px);
  color: #111827;
  background: #fff;
  box-sizing: border-box;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #9ca3af 50%),
    linear-gradient(135deg, #9ca3af 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 10px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.car-ssot-kw input {
  background-image: none;
  appearance: auto;
}
.car-ssot-select:disabled {
  background-color: #f9fafb;
  color: #9ca3af;
}
.car-ssot-kw {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
.car-ssot-kw i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: var(--fs-sm, 15px);
  pointer-events: none;
}
.car-ssot-kw input { padding-left: 36px; }
.car-ssot-detail {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 2px 12px 12px;
  background: #fff;
}
.car-ssot-detail-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 8px 2px;
  border: 0;
  background: transparent;
  font-size: var(--fs-md, 17px);
  font-weight: 800;
  color: #111827;
  cursor: pointer;
}
.car-ssot-detail-body[hidden] { display: none !important; }
.car-ssot-detail-body .region-cascade-ssot { margin-top: 12px; }
.car-ssot-detail-body .car-ssot-grid4 { margin-top: 12px; }
.car-ssot-detail-body .car-ssot-grid2 { margin-top: 10px; }
.car-ssot-search-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 0 0 14px;
}
.car-ssot-search-row .car-ssot-submit {
  width: auto;
  flex: 0 0 32%;
  max-width: 160px;
  min-width: 108px;
}
.car-ssot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
/* 차급·유형 — 가능하면 1행(--pls-chip-cols) · 모바일 --pls-chip-cols-m */
.car-ssot-chips--type {
  display: grid;
  grid-template-columns: repeat(var(--pls-chip-cols, 4), minmax(0, 1fr)) !important;
  gap: 6px;
  margin: 0 0 12px;
}
.car-ssot-chips--type .car-ssot-chip {
  width: 100%;
  min-width: 0;
  justify-content: center;
  text-align: center;
  padding: 0 4px;
}
@media (max-width: 480px) {
  .car-ssot-chips--type {
    grid-template-columns: repeat(var(--pls-chip-cols-m, var(--pls-chip-cols, 2)), minmax(0, 1fr)) !important;
  }
}
.car-ssot-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-size: var(--fs-sm, 15px);
  font-weight: 700;
  color: #111827;
  cursor: pointer;
  user-select: none;
}
.car-ssot-chip input { position: absolute; opacity: 0; pointer-events: none; }
.car-ssot-chip.is-on {
  background: var(--pls-accent, var(--car-search-accent, var(--pub-accent)));
  border-color: var(--pls-accent, var(--car-search-accent, var(--pub-accent)));
  color: #fff;
}
.car-ssot-submit {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: var(--pls-accent, var(--car-search-accent, var(--pub-accent)));
  color: #fff;
  font-size: var(--fs-base, 16px);
  font-weight: 800;
  cursor: pointer;
}
.car-ssot-submit:hover { filter: brightness(0.96); }

.car-sample-shell .car-list-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 12px 12px;
}
.car-ssot-write-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--pls-accent, var(--car-search-accent, var(--pub-accent)));
  color: #fff;
  font-size: var(--fs-sm, 15px);
  font-weight: 700;
  text-decoration: none;
}
.car-sample-shell .car-fbtn-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
  color: #374151;
  font-size: var(--fs-sm, 15px);
  font-weight: 600;
  text-decoration: none;
  background: #fff;
}

/* 카드: 모바일 2열 · 중폭 3열 · 좌측 본문 최대폭 4열 */
.car-sample-shell .car-grid.car-grid--ssot {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px;
  padding: 0 12px;
}
@media (min-width: 640px) {
  .car-sample-shell .car-grid.car-grid--ssot {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 1100px) {
  .car-sample-shell .car-grid.car-grid--ssot {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
/* 구형 반응형(.car-grid → 1열 @600px)도 샘플 셸에서는 무시 */
@media (max-width: 600px) {
  .car-sample-shell .car-grid,
  .car-sample-shell .car-grid.car-grid--ssot {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
.car-card--ssot {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  box-shadow: none;
}
.car-card--ssot:hover {
  border-color: var(--pls-accent, var(--car-sample-gold, var(--pub-accent)));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pls-accent, var(--pub-accent)) 22%, transparent);
  transform: none;
}
.car-card--ssot .car-card-body { padding: 10px 10px 12px; }
.car-card--ssot .car-card-title {
  text-align: center;
  font-size: var(--fs-base, 16px);
  font-weight: 900;
  margin: 0 0 6px;
  -webkit-line-clamp: 2;
}
.car-card-specs {
  margin: 0 0 8px;
  padding: 0;
}
.car-card-specs > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: var(--fs-sm, 15px);
}
.car-card-specs dt { margin: 0; color: #6b7280; font-weight: 600; }
.car-card-specs dd { margin: 0; color: #111827; font-weight: 800; text-align: right; }
.car-card-price--ssot {
  text-align: center;
  padding-top: 6px;
  color: var(--pls-accent, var(--car-search-accent, var(--pub-accent)));
}
.car-card-price--ssot .car-price-prefix {
  display: block;
  font-size: var(--fs-xs, 14px);
  font-weight: 700;
  color: #6b7280;
  margin-bottom: 2px;
}
.car-card-price--ssot .car-price-num {
  font-size: var(--fs-xl, 20px);
  font-weight: 900;
}
.car-card-price--ssot .car-price-unit {
  font-size: var(--fs-sm, 15px);
  font-weight: 700;
  margin-left: 2px;
}
.car-type-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--pls-accent, var(--car-sample-gold, var(--pub-accent)));
  color: #fff;
  font-size: var(--fs-xs, 14px);
  font-weight: 800;
}
.car-sample-shell .car-pag-btn.active {
  background: var(--pls-accent, var(--car-search-accent, var(--pub-accent)));
  border-color: var(--pls-accent, var(--car-search-accent, var(--pub-accent)));
  color: #fff;
}
.car-sample-shell .car-pagination { padding: 0 12px; }

/* 지역 부자손 캐스케이드 — assets/css/region-cascade.css (region_cascade_search.inc.php 로드) */