/* ============================================================
 * 20-mobile.css — 9단계 모바일 반응형 정밀화 (마지막 로드)
 * 매물목록 툴바 · 정렬/필터 · 추천 · 리뷰 · 페이지네이션 · 터치타깃
 * ============================================================ */

@media (max-width: 768px) {

  /* ── 매물목록 툴바: 카운트는 위, 컨트롤은 아래 줄 ── */
  .gab-list-toolbar { padding: 12px 14px; gap: 10px; row-gap: 10px; }
  .gab-list-controls { width: 100%; gap: 8px; flex-wrap: wrap; align-items: center; }

  /* 정렬 탭: 넘치면 가로 스크롤 (스크롤바 숨김) */
  .gab-sort-tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex: 1 1 auto; max-width: 100%;
    scrollbar-width: none;
  }
  .gab-sort-tabs::-webkit-scrollbar { display: none; }
  .gab-sort-tab { white-space: nowrap; flex-shrink: 0; min-height: 38px; }
  .gab-list-view-toggle, .gab-perpage-select { flex-shrink: 0; }
  .gab-list-view-btn { min-width: 40px; min-height: 38px; }
  .gab-perpage-select { min-height: 38px; }

  /* ── 빠른필터: 가로 스크롤 + 우측 페이드 힌트 ── */
  .gab-quickfilters {
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }

  /* ── 적용 필터 칩 바 ── */
  .gab-active-filters { padding: 10px 12px; }
  .gab-active-filters-clear { margin-left: 0; }

  /* ── 추천 섹션 ── */
  .gab-reco-section { padding: 16px 14px 18px; margin-bottom: 16px; }
  .gab-reco-title { font-size: 16px; }
  .gab-reco-head { gap: 8px; margin-bottom: 12px; }

  /* ── 페이지 히어로(서브페이지 공통) 여백 축소 ── */
  .gab-page-hero { padding: 28px 16px; }

  /* ── 페이지네이션 ── */
  .gab-pagination { flex-wrap: wrap; gap: 4px; }

  /* ── 바이어 리뷰: 탭 가로 스크롤 ── */
  .gab-rv-tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap; scrollbar-width: none;
  }
  .gab-rv-tabs::-webkit-scrollbar { display: none; }
  .gab-rv-tab { white-space: nowrap; flex-shrink: 0; }
  .gab-rv-tab-count { white-space: nowrap; }
}

@media (max-width: 480px) {
  /* 아주 좁은 화면: '오늘 등록' 숨겨 공간 확보 */
  .gab-list-today { display: none; }
  .gab-list-toolbar { padding: 10px 12px; }

  /* 리뷰 탭 카운트는 줄바꿈 */
  .gab-rv-tab-count { margin-left: auto; }
}

/* ============================================================
 * 플로팅 요소가 모바일 하단 탭바를 가리지 않게
 * ============================================================ */
@media (max-width: 768px) {
  /* 맨 위로/플로팅 버튼류는 탭바 위로 띄움 */
  .gab-scroll-top, .gab-fab, .gab-floating-cta, .gab-to-top {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* 토스트도 탭바 위 (이미 18-interactive에서 처리, 안전망) */
  .gab-toast-container { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
 * Phase M1: 앱형 하단 탭바 (768px 이하 노출)
 * ============================================================ */
.gab-tabbar { display: none; }

@media (max-width: 768px) {
  .gab-tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    background: #fff;
    border-top: 1px solid var(--gab-gray-200, #E2E8F0);
    box-shadow: 0 -2px 16px rgba(15, 23, 42, 0.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  .gab-tabbar-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; text-decoration: none; position: relative;
    color: var(--gab-gray-400, #94A3B8); font-size: 10.5px; font-weight: 600;
    -webkit-tap-highlight-color: transparent; padding-top: 8px; min-height: 60px;
  }
  .gab-tabbar-ic { font-size: 21px; line-height: 1; height: 22px; display: flex; align-items: center; }
  .gab-tabbar-ic-on { display: none; }
  .gab-tabbar-ic-off { display: inline-flex; }
  .gab-tabbar-label { letter-spacing: -0.01em; }
  /* 활성 */
  .gab-tabbar-item.is-active { color: var(--gab-primary-600, #14315B); }
  .gab-tabbar-item.is-active .gab-tabbar-ic-on { display: inline-flex; }
  .gab-tabbar-item.is-active .gab-tabbar-ic-off { display: none; }
  /* 중앙 CTA(판매) */
  .gab-tabbar-item--cta { color: var(--gab-primary-600, #14315B); }
  .gab-tabbar-cta-btn {
    width: 46px; height: 46px; border-radius: 16px; margin-top: -18px;
    background: var(--gab-grad-brand, linear-gradient(135deg, #21201D, #21201D));
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px;
    box-shadow: 0 8px 18px -4px rgba(26, 26, 26, 0.45); border: 3px solid #fff;
  }
  .gab-tabbar-item--cta .gab-tabbar-label { margin-top: 1px; }
  /* 배지 */
  .gab-tabbar-badge {
    position: absolute; top: 4px; left: 50%; margin-left: 6px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: #EF4444; color: #fff; font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; line-height: 1;
  }

  /* 본문이 탭바에 가리지 않게 */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  /* 데스크탑 푸터는 모바일에서 숨김(탭바가 대체) — 단 매물목록 등 본문 하단 정보는 유지 */
  .gab-footer { display: none; }

  /* RTL */
  [dir="rtl"] .gab-tabbar-badge { left: auto; right: 50%; margin-left: 0; margin-right: 6px; }
}

/* 데스크탑: 탭바 확실히 숨김 */
@media (min-width: 769px) {
  .gab-tabbar { display: none !important; }
}

/* ============================================================
 * Phase M2: 컴팩트 모바일 헤더 (56px + 인라인 검색바)
 * ============================================================ */
@media (max-width: 768px) {
  /* 상단 바(전화/언어/로그인) 숨김 → 드로어로 이동 */
  .gab-top-bar { display: none !important; }

  /* 헤더 56px 컴팩트 */
  .gab-main-header { height: 56px; box-shadow: 0 1px 0 rgba(15,23,42,0.06); }
  .gab-main-header-inner { height: 56px; gap: 9px; display: flex; align-items: center; }

  /* 버거: 확실히 표시, 40px 터치 */
  .gab-burger { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: var(--gab-gray-100); border-radius: 11px; color: var(--gab-gray-800); font-size: 19px; flex-shrink: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

  /* 로고: 아이콘만 (텍스트/태그라인 숨김) */
  .gab-main-header .gab-logo-text { display: none; }
  .gab-main-header .gab-logo { flex-shrink: 0; }
  .gab-main-header .gab-logo-icon { width: 38px; height: 38px; font-size: 18px; border-radius: 11px; }

  /* 인라인 검색바: 기존 display:none 오버라이드 → flex-1 */
  .gab-header-search { display: block !important; flex: 1 1 auto; min-width: 0; margin: 0; }
  .gab-header-search-form { height: 40px; border-radius: 12px; background: var(--gab-gray-100); border: 1px solid transparent; box-shadow: none; padding: 0 6px 0 12px; }
  .gab-header-search-form:focus-within { background: #fff; border-color: var(--gab-primary-400); }
  .gab-header-search-input { font-size: 14px; padding: 0 6px; }
  .gab-header-search-btn { width: 30px; height: 30px; flex-shrink: 0; }

  /* CTA: 판매 버튼 숨김(탭바에 있음) / 찜 아이콘만 유지 */
  .gab-header-cta { gap: 4px; flex-shrink: 0; }
  .gab-header-cta .gab-btn-primary, .gab-main-header .gab-btn-primary { display: none !important; }
  .gab-main-header .gab-btn-icon { width: 40px; height: 40px; background: transparent; }

  /* 카테고리 네비바 숨김 → 드로어로 이동 */
  .gab-nav-bar { display: none !important; }

  /* 검색 추천 드롭다운: 화면 폭 가득 */
  .gab-main-header .gab-suggest { position: fixed; left: 0; right: 0; top: 56px; width: 100%; border-radius: 0; max-height: calc(100vh - 56px); box-shadow: 0 8px 20px rgba(15,23,42,0.12); }

  /* RTL */
  [dir="rtl"] .gab-header-search-form { padding: 0 12px 0 6px; }
}

/* 헤더 스크롤 시 숨김 (아래로 스크롤하면 헤더 접힘) */
@media (max-width: 768px) {
  .gab-site-header { transition: transform .28s ease; }
  .gab-site-header.gab-hdr-hidden { transform: translateY(-100%); }
}

/* Phase M2: 드로어 언어 전환 */
.gab-drawer-lang { display: flex; gap: 8px; padding: 14px 18px 4px; }
.gab-drawer-lang-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 6px; border: 1px solid var(--gab-gray-200, #E2E8F0); border-radius: 10px; background: #fff; font-size: 12.5px; font-weight: 700; color: var(--gab-gray-600, #475569); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gab-drawer-lang-btn span { font-size: 14px; }
.gab-drawer-lang-btn.is-active { border-color: var(--gab-primary-500, #21201D); background: var(--gab-primary-50, #EDF1F7); color: var(--gab-primary-700, #1E3AAE); }
.gab-drawer-lang-btn span svg, .gab-drawer-lang-btn span img { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; vertical-align: middle; }

/* ============================================================
 * Phase M3: 모바일 매물 리스트 앱화 (1열 카드 + 스티키 툴바 + 필터 바텀시트)
 * ============================================================ */
@media (max-width: 768px) {
  /* ── 리스트 1열 ── */
  .gab-cars-grid, .gab-cars-grid-3 { grid-template-columns: 1fr !important; gap: 14px; }
  .gab-list-layout { display: block; }
  .gab-list-results { padding: 0 12px 8px; }

  /* ── 앱형 카드 ── */
  .gab-car-card { border-radius: 16px !important; border: 1px solid var(--gab-gray-100); box-shadow: 0 1px 3px rgba(15,23,42,0.07); overflow: hidden; }
  .gab-car-card:active { transform: scale(0.985); }
  /* 갤러리: 메인 이미지만 풀폭, 측면 썸네일 숨김 */
  .gab-car-card-gallery { display: block !important; }
  .gab-ccg-thumbs { display: none !important; }
  .gab-ccg-main { width: 100% !important; min-width: 0 !important; aspect-ratio: 16 / 10; min-height: 0 !important; border-radius: 0 !important; }
  .gab-ccg-main-img, .gab-car-card-image-placeholder { width: 100%; height: 100%; object-fit: cover; }
  /* 찜 버튼 44px 터치 */
  .gab-car-card-fav { width: 42px !important; height: 42px !important; top: 10px; right: 10px; background: rgba(255,255,255,0.92) !important; border-radius: 50%; font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; }
  [dir="rtl"] .gab-car-card-fav { right: auto; left: 10px; }
  .gab-ccg-ribbon { font-size: 9.5px; padding: 3px 9px; }
  .gab-ccg-meta { bottom: 10px; right: 10px; }
  /* 바디 */
  .gab-car-card-body { padding: 13px 15px !important; display: block !important; }
  .gab-car-card-brand { font-size: 11px; letter-spacing: 0.04em; }
  .gab-car-card-title { font-size: 16px !important; font-weight: 800; line-height: 1.3; margin: 3px 0 9px; }
  .gab-car-card-specs { font-size: 12px; gap: 7px; flex-wrap: wrap; }
  .gab-car-card-location { font-size: 12px; margin-top: 7px; }
  /* 가격 행: 하단 강조 (모바일 항상 가로 정렬) */
  .gab-car-card-price-row { position: static !important; transform: none !important; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--gab-gray-100); border-left: 0 !important; display: flex !important; flex-direction: row !important; align-items: flex-end; justify-content: space-between; }
  .gab-car-card-price-value { font-size: 19px !important; font-weight: 800; }
  .gab-car-card-price-tag { font-size: 12px; }

  /* ── 스티키 툴바 ── */
  .gab-list-toolbar { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--gab-gray-200); margin: 0 -0px; }
  /* 필터 버튼 + 정렬 한 줄 */
  .gab-filter-mtoggle { display: inline-flex !important; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--gab-gray-300); border-radius: 10px; background: #fff; font-size: 13px; font-weight: 700; color: var(--gab-gray-800); flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
  .gab-sort-tab { padding: 8px 13px; min-height: 38px; border-radius: 9px; font-size: 13px; }

  /* ── 필터: 바텀시트로 통일 (좌측드로어/인라인 오버라이드) ── */
  .gab-filter-sidebar {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; max-width: 100% !important; max-height: 86vh; height: auto !important;
    border-radius: 20px 20px 0 0 !important; box-shadow: 0 -8px 30px rgba(15,23,42,0.18);
    transform: translateY(100%); transition: transform .32s cubic-bezier(0.4,0,0.2,1);
    z-index: 1300; overflow-y: auto; display: block !important; margin: 0 !important;
    padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }
  .gab-filter-sidebar.is-open { transform: translateY(0) !important; left: 0 !important; }
  /* 시트 상단 핸들 + 헤더 스티키 */
  .gab-filter-sidebar::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--gab-gray-300); margin: 10px auto 6px; }
  .gab-filter-header { position: sticky; top: 0; background: #fff; padding: 8px 0 12px; z-index: 2; }
  .gab-filter-sheet-close { display: inline-flex !important; position: absolute; top: 14px; right: 8px; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 9px; background: var(--gab-gray-100); border: 0; color: var(--gab-gray-600); }
  [dir="rtl"] .gab-filter-sheet-close { right: auto; left: 8px; }
  /* 시트 하단 고정 '결과 보기' 버튼 영역 확보용 */
  .gab-filter-apply, .gab-filter-reset { min-height: 40px; }
}

/* Phase M3: 필터 바텀시트 하단 '결과 보기' 버튼 (모바일 전용) */
.gab-filter-sheet-foot { display: none; }
@media (max-width: 768px) {
  .gab-filter-sheet-foot {
    display: block; position: sticky; bottom: 0; left: 0; right: 0;
    background: #fff; padding: 12px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    margin: 8px -16px 0; padding-left: 16px; padding-right: 16px;
    border-top: 1px solid var(--gab-gray-200); z-index: 3;
  }
  .gab-filter-sheet-apply {
    width: 100%; padding: 14px; border: 0; border-radius: 12px;
    background: var(--gab-grad-brand, linear-gradient(135deg, #21201D, #21201D));
    color: #fff; font-size: 15px; font-weight: 800; -webkit-tap-highlight-color: transparent;
  }
  .gab-filter-sheet-apply:active { opacity: 0.9; }
}

/* ============================================================
 * Phase M4: 모바일 상세·폼·대시보드·테이블·모달
 * ============================================================ */
@media (max-width: 768px) {
  /* ── 핵심: 상세 페이지 CTA바(gab-mbar) vs 전역 탭바 충돌 해결 ── */
  /* 상세 페이지(gab-has-mbar)에선 하단 탭바 숨김 → 문의/구매 CTA바 노출 */
  body.gab-has-mbar .gab-tabbar { display: none !important; }
  body.gab-has-mbar { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .gab-mbar { z-index: 1250 !important; }
  .gab-mbar-btn { border-radius: 12px !important; }
  .gab-mbar-btn--inq { background: var(--gab-grad-brand, linear-gradient(135deg, #21201D, #21201D)) !important; }

  /* ── 입력 필드 16px (iOS 자동 줌 방지) ── */
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
  input[type="number"], input[type="search"], select, textarea,
  .gab-field__input, .gab-modal-in, .gab-modal-input, .gab-header-search-input { font-size: 16px !important; }

  /* ── 매물 상세: 2열 → 1열 스택 ── */
  .gab-detail-layout { display: block !important; }
  .gab-detail-sidebar { position: static !important; width: 100% !important; margin-top: 18px; }
  .gab-detail-main { width: 100% !important; }
  /* 상세 탭: 가로 스크롤 */
  .gab-detail-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .gab-detail-tab { white-space: nowrap; flex-shrink: 0; }
  /* 갤러리 메인 이미지 비율 */
  .gab-detail-gallery-main, .gab-detail-main-image { aspect-ratio: 4 / 3; width: 100%; }

  /* ── 모달: 하단 바텀시트화 ── */
  .gab-modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
  .gab-modal-backdrop .gab-modal, .gab-modal-box, .gab-modal-card {
    max-width: 100% !important; width: 100% !important; border-radius: 20px 20px 0 0 !important;
    max-height: 92vh; overflow-y: auto; animation: gabSheetUp .28s cubic-bezier(0.4,0,0.2,1);
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  @keyframes gabSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  /* 모달 상단 핸들 */
  .gab-modal-backdrop .gab-modal::before, .gab-modal-box::before {
    content: ''; display: block; width: 40px; height: 4px; border-radius: 999px;
    background: var(--gab-gray-300); margin: 10px auto 4px;
  }

  /* ── 관리/딜러 테이블: 가로 스크롤 ── */
  .gab-atable-wrap, .gab-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gab-atable { min-width: 640px; }
  .gab-atable-wrap::after {
    content: '→'; display: none;
  }

  /* ── 대시보드: 통계 카드 2열, 사이드바 트리거 ── */
  .gab-dash-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .gab-astat-row, .gab-kpi-row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .gab-dms-grid2 { grid-template-columns: 1fr !important; }
  /* 대시보드 사이드바 토글 트리거(모바일 햄버거) */
  .gab-dash-mtoggle { display: inline-flex !important; }
}

/* 데스크탑: 대시보드 토글 숨김 */
.gab-dash-mtoggle { display: none; }

/* ============================================================
 * Phase M5: 터치·마감·성능 (전역 모바일 폴리시)
 * ============================================================ */
/* 가로 스크롤 전수 차단 (전 디바이스) */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg, table, pre { max-width: 100%; }

@media (max-width: 768px) {
  * { min-width: 0; }
  /* 탭 하이라이트 제거 (iOS/안드로이드 파란 박스) */
  a, button, .gab-tabbar-item, .gab-btn, .gab-car-card, [onclick], [role="button"],
  input, select, textarea, label { -webkit-tap-highlight-color: transparent; }

  /* 터치 타깃 44px 보장 (아이콘 버튼/내비/칩) */
  .gab-btn-icon, .gab-burger, .gab-tabbar-item, .gab-mbar-btn,
  .gab-filter-mtoggle, .gab-sort-tab, .gab-modal-x, .gab-modal-close,
  .gab-dash-burger, .gab-drawer-close, .gab-pagination a, .gab-pagination button { min-height: 44px; min-width: 44px; }
  .gab-sort-tab { min-width: auto; } /* 정렬 칩은 가로만 충분히 */

  /* 본문 가독성: 최소 14px */
  body { font-size: 15px; -webkit-text-size-adjust: 100%; }
  p, li, td, .gab-text, .gab-prose { font-size: 14.5px; line-height: 1.6; }

  /* 컨테이너 좌우 패딩 일관 */
  .gab-container { padding-left: 16px; padding-right: 16px; }

  /* 이미지 렌더링 부드럽게 + 로딩 중 배경 */
  img { background-color: var(--gab-gray-100, #F1F5F9); }

  /* 가로 스크롤 영역은 스냅/모멘텀 */
  .gab-sort-tabs, .gab-detail-tabs, .gab-atable-wrap, .gab-dtabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .gab-sort-tabs::-webkit-scrollbar, .gab-detail-tabs::-webkit-scrollbar, .gab-dtabs::-webkit-scrollbar { display: none; }

  /* 긴 단어/URL 줄바꿈 (가로 넘침 방지) */
  .gab-car-card-title, .gab-detail-title, h1, h2, h3 { overflow-wrap: break-word; word-break: keep-all; }
}

/* 성능: 모션 줄이기 선호 시 애니 최소화 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
 * Phase F1: 전체화면 검색 오버레이
 * ============================================================ */
.gab-msearch { display: none; }
@media (max-width: 768px) {
  .gab-msearch {
    display: block; position: fixed; inset: 0; z-index: 2000; background: #fff;
    transform: translateY(8px); opacity: 0; pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .gab-msearch.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  /* 검색 바 */
  .gab-msearch-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--gab-gray-100); height: 60px; }
  .gab-msearch-back { width: 40px; height: 40px; flex-shrink: 0; border: 0; background: none; color: var(--gab-gray-800); font-size: 20px; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
  .gab-msearch-input-wrap { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--gab-gray-100); border-radius: 12px; padding: 0 12px; height: 44px; }
  .gab-msearch-input-wrap > .bi-search { color: var(--gab-gray-400); font-size: 16px; }
  .gab-msearch-input { flex: 1; border: 0; background: none; outline: none; font-size: 16px; color: var(--gab-gray-900); min-width: 0; }
  .gab-msearch-clear { border: 0; background: none; color: var(--gab-gray-400); font-size: 17px; padding: 0; display: flex; -webkit-tap-highlight-color: transparent; }
  /* 바디 */
  .gab-msearch-body { height: calc(100% - 60px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .gab-msearch-sec { padding: 18px 16px 6px; }
  .gab-msearch-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
  .gab-msearch-sec-title { font-size: 14px; font-weight: 800; color: var(--gab-gray-900); display: flex; align-items: center; gap: 7px; }
  .gab-msearch-sec-title i { color: var(--gab-primary-600); }
  .gab-msearch-clear-all { border: 0; background: none; color: var(--gab-gray-400); font-size: 12.5px; font-weight: 600; -webkit-tap-highlight-color: transparent; }
  /* 최근 검색 칩 */
  .gab-msearch-recent { display: flex; flex-wrap: wrap; gap: 8px; }
  .gab-msearch-rchip { display: inline-flex; align-items: center; background: var(--gab-gray-100); border-radius: 999px; overflow: hidden; }
  .gab-msearch-rchip-kw { border: 0; background: none; padding: 8px 4px 8px 14px; font-size: 13px; font-weight: 600; color: var(--gab-gray-700); -webkit-tap-highlight-color: transparent; }
  .gab-msearch-rchip-x { border: 0; background: none; padding: 8px 11px 8px 6px; color: var(--gab-gray-400); font-size: 13px; display: flex; -webkit-tap-highlight-color: transparent; }
  /* 인기 검색 (2열 랭킹) */
  .gab-msearch-popular { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
  .gab-msearch-pop { display: flex; align-items: center; gap: 11px; padding: 11px 4px; border: 0; background: none; text-align: left; -webkit-tap-highlight-color: transparent; }
  .gab-msearch-pop-rank { width: 20px; font-size: 14px; font-weight: 800; color: var(--gab-gray-400); text-align: center; flex-shrink: 0; }
  .gab-msearch-pop-rank.is-top { color: var(--gab-primary-600); }
  .gab-msearch-pop-kw { font-size: 14px; color: var(--gab-gray-800); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 자동완성 */
  .gab-msearch-suggest { padding: 6px 0; }
  .gab-msearch-sgrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: 0; background: none; text-align: left; font-size: 14.5px; color: var(--gab-gray-800); -webkit-tap-highlight-color: transparent; }
  .gab-msearch-sgrow:active { background: var(--gab-gray-50); }
  .gab-msearch-sgrow > .bi-search { color: var(--gab-gray-300); font-size: 15px; flex-shrink: 0; }
  .gab-msearch-sgrow span { flex: 1; min-width: 0; }
  .gab-msearch-sgrow b { color: var(--gab-primary-600); font-weight: 800; }
  .gab-msearch-sgrow-go { color: var(--gab-gray-300); font-size: 14px; }
  .gab-msearch-sgrow--direct { color: var(--gab-primary-700); font-weight: 700; border-top: 1px solid var(--gab-gray-100); }
  .gab-msearch-sgrow--direct .bi-arrow-right-circle { color: var(--gab-primary-600); }
  .gab-msearch-empty { padding: 30px 16px; text-align: center; color: var(--gab-gray-400); font-size: 13.5px; }
  /* RTL */
  [dir="rtl"] .gab-msearch-back .bi-arrow-left::before { content: "\f138"; }
  [dir="rtl"] .gab-msearch-sgrow, [dir="rtl"] .gab-msearch-pop { text-align: right; }
}

/* ---------- Phase F2: 분류 자동완성·트렌드·연관추천 ---------- */
@media (max-width: 768px) {
  /* 인기 트렌드 배지 */
  .gab-msearch-pop { gap: 9px; }
  .gab-msearch-pop-trend { font-size: 10px; font-weight: 800; flex-shrink: 0; display: inline-flex; align-items: center; }
  .gab-msearch-pop-trend.is-up { color: #DC2626; }
  .gab-msearch-pop-trend.is-up i { font-size: 9px; }
  .gab-msearch-pop-trend.is-new { color: #fff; background: var(--gab-primary-600); border-radius: 4px; padding: 1px 4px; font-size: 9px; line-height: 1.3; }
  /* 연관 추천 */
  .gab-msearch-related { display: flex; flex-wrap: wrap; gap: 8px; }
  .gab-msearch-rel { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--gab-primary-100, #DCE4FD); border-radius: 999px; background: var(--gab-primary-50, #EDF1F7); color: var(--gab-primary-700, #1E3AAE); font-size: 13px; font-weight: 700; -webkit-tap-highlight-color: transparent; }
  .gab-msearch-rel i { font-size: 12px; opacity: 0.7; }
  /* 자동완성 분류 헤더 */
  .gab-msearch-sgcat { padding: 12px 16px 5px; font-size: 11.5px; font-weight: 800; color: var(--gab-gray-400); letter-spacing: 0.03em; text-transform: uppercase; }
  .gab-msearch-sgcnt { font-size: 11.5px; font-weight: 700; color: var(--gab-gray-400); flex-shrink: 0; }
  /* RTL */
  [dir="rtl"] .gab-msearch-sgcat, [dir="rtl"] .gab-msearch-related { text-align: right; }
}

/* ============================================================
 * Phase F3: 퀵 필터 바 (모바일 결과 상단 스티키 칩)
 * ============================================================ */
.gab-qbar { display: none; }
@media (max-width: 768px) {
  /* M3에서 툴바를 sticky로 했는데, 퀵바를 sticky 주체로 → 툴바는 일반 흐름 */
  .gab-list-toolbar { position: static !important; }
  .gab-qbar {
    display: flex; align-items: center; gap: 8px;
    position: sticky; top: 0; z-index: 49;
    background: #fff; padding: 10px 12px; margin: 0 -12px;
    border-bottom: 1px solid var(--gab-gray-200);
  }
  .gab-qbar-filter {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px; border: 1.5px solid var(--gab-gray-300); border-radius: 10px;
    background: #fff; font-size: 13px; font-weight: 700; color: var(--gab-gray-800);
    -webkit-tap-highlight-color: transparent;
  }
  .gab-qbar-filter i { font-size: 14px; }
  .gab-qbar-badge {
    background: var(--gab-primary-600); color: #fff; font-size: 10px; font-weight: 800;
    min-width: 16px; height: 16px; border-radius: 999px; display: inline-flex;
    align-items: center; justify-content: center; padding: 0 4px; margin-left: 1px;
  }
  .gab-qbar-reset {
    flex-shrink: 0; width: 36px; height: 36px; border: 1px solid var(--gab-gray-200);
    border-radius: 9px; background: #fff; color: var(--gab-gray-500); font-size: 14px;
    display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent;
  }
  .gab-qbar-divider { width: 1px; height: 22px; background: var(--gab-gray-200); flex-shrink: 0; }
  .gab-qbar-chips {
    display: flex; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; scroll-snap-type: x proximity; flex: 1; padding-right: 4px;
  }
  .gab-qbar-chips::-webkit-scrollbar { display: none; }
  .gab-qchip {
    flex-shrink: 0; padding: 8px 14px; border: 1px solid var(--gab-gray-200);
    border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600;
    color: var(--gab-gray-700); white-space: nowrap; scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent; transition: all .15s;
  }
  .gab-qchip:active { transform: scale(0.96); }
  .gab-qchip.is-on { background: var(--gab-primary-600); border-color: var(--gab-primary-600); color: #fff; }
  /* RTL */
  [dir="rtl"] .gab-qbar-badge { margin-left: 0; margin-right: 1px; }
}

/* ---------- Phase F4: 필터 시트 프레임워크 (카운트·모션) ---------- */
@media (max-width: 768px) {
  /* 결과 카운트 강조 (버튼 내) */
  .gab-sheet-count { font-weight: 900; }
  .gab-filter-sheet-apply { transition: opacity .15s, transform .1s; }
  .gab-filter-sheet-apply:active { transform: scale(0.985); }
  /* 시트 스프링 모션 (드래그 외 열림/닫힘) */
  .gab-filter-sidebar { transition: transform .4s cubic-bezier(0.32, 0.72, 0, 1) !important; touch-action: pan-y; }
  /* 드래그 핸들 강조(잡기 쉽게) */
  .gab-filter-sidebar::before { width: 44px; height: 5px; background: var(--gab-gray-300); cursor: grab; }
  /* 시트 헤더 드래그 영역 표시 */
  .gab-filter-header { touch-action: none; }
}

/* ============================================================
 * Phase F6: 정렬 바텀시트 + 뷰 전환 (퀵바)
 * ============================================================ */
@media (max-width: 768px) {
  /* 정렬 버튼 */
  .gab-qbar-sort {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 12px; border: 1.5px solid var(--gab-gray-300); border-radius: 10px;
    background: #fff; font-size: 13px; font-weight: 700; color: var(--gab-gray-800);
    white-space: nowrap; -webkit-tap-highlight-color: transparent;
  }
  .gab-qbar-sort > .bi-arrow-down-up { font-size: 13px; }
  .gab-qbar-sort-caret { font-size: 10px; color: var(--gab-gray-400); }
  /* 뷰 토글 */
  .gab-qbar-view { flex-shrink: 0; display: inline-flex; border: 1px solid var(--gab-gray-200); border-radius: 9px; overflow: hidden; margin-left: 2px; }
  .gab-qbar-view-btn { width: 34px; height: 36px; border: 0; background: #fff; color: var(--gab-gray-400); display: flex; align-items: center; justify-content: center; font-size: 15px; -webkit-tap-highlight-color: transparent; }
  .gab-qbar-view-btn.is-active { background: var(--gab-primary-50); color: var(--gab-primary-600); }
}
/* 정렬 바텀시트 */
.gab-sort-sheet { display: none; }
@media (max-width: 768px) {
  .gab-sort-sheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300;
    background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.18);
    transform: translateY(100%); transition: transform .34s cubic-bezier(0.32, 0.72, 0, 1);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .gab-sort-sheet.is-open { transform: translateY(0); }
  .gab-sort-sheet::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 999px; background: var(--gab-gray-300); margin: 10px auto 4px; }
  .gab-sort-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 12px; }
  .gab-sort-sheet-title { font-size: 16px; font-weight: 800; color: var(--gab-gray-900); display: flex; align-items: center; gap: 8px; }
  .gab-sort-sheet-title i { color: var(--gab-primary-600); }
  .gab-sort-sheet-x { width: 32px; height: 32px; border: 0; border-radius: 9px; background: var(--gab-gray-100); color: var(--gab-gray-600); display: flex; align-items: center; justify-content: center; }
  .gab-sort-sheet-list { padding: 4px 10px; }
  .gab-sort-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 0; background: none; text-align: left; font-size: 15px; font-weight: 600; color: var(--gab-gray-700); border-radius: 12px; -webkit-tap-highlight-color: transparent; }
  .gab-sort-opt:active { background: var(--gab-gray-50); }
  .gab-sort-opt-ic { font-size: 17px; color: var(--gab-gray-400); width: 22px; flex-shrink: 0; }
  .gab-sort-opt span { flex: 1; }
  .gab-sort-opt-check { font-size: 17px; color: var(--gab-primary-600); opacity: 0; flex-shrink: 0; }
  .gab-sort-opt.is-on { color: var(--gab-primary-700); background: var(--gab-primary-50); }
  .gab-sort-opt.is-on .gab-sort-opt-ic { color: var(--gab-primary-600); }
  .gab-sort-opt.is-on .gab-sort-opt-check { opacity: 1; }
  [dir="rtl"] .gab-sort-opt { text-align: right; }
}

/* ============================================================
 * Phase F7: 무한 스크롤 + 스켈레톤 로딩 (모바일)
 * ============================================================ */
@media (max-width: 768px) {
  /* 무한 스크롤이 페이지네이션 대체 */
  #gab-results-col .gab-pagination { display: none; }
  .gab-infinite { padding: 2px 0 10px; min-height: 4px; }
  /* 스켈레톤 카드 */
  .gab-skel-card { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--gab-gray-100); margin-bottom: 14px; }
  .gab-skel-img { width: 100%; aspect-ratio: 16 / 10; background: var(--gab-gray-100); }
  .gab-skel-body { padding: 14px 15px; }
  .gab-skel-line { height: 12px; border-radius: 6px; background: var(--gab-gray-100); margin-bottom: 9px; }
  .gab-skel-line:last-child { margin-bottom: 0; }
  .gab-skel-w30 { width: 30%; } .gab-skel-w40 { width: 40%; } .gab-skel-w60 { width: 60%; } .gab-skel-w90 { width: 90%; }
  .gab-skel-img, .gab-skel-line { animation: gabSkelPulse 1.4s ease-in-out infinite; }
  @keyframes gabSkelPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
  .gab-infinite-retry { display: block; margin: 12px auto; padding: 10px 22px; border: 1px solid var(--gab-gray-300); border-radius: 10px; background: #fff; font-weight: 700; color: var(--gab-gray-700); font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .gab-skel-img, .gab-skel-line { animation: none; opacity: 0.7; }
}

/* ============================================================
 * Phase F8: 검색 저장·공유 + 저장된 검색 + 프리셋
 * ============================================================ */
/* 활성 필터 바 저장/공유 버튼 */
.gab-af-actions { display: inline-flex; gap: 7px; align-items: center; }
.gab-af-save { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid var(--gab-primary-200, #C7D6FC); border-radius: 999px; background: #fff; color: var(--gab-primary-700, #1E3AAE); font-size: 12.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gab-af-save.is-saved { background: var(--gab-primary-600); border-color: var(--gab-primary-600); color: #fff; }
.gab-af-save.is-saved .bi-bookmark::before { content: "\f415"; }
.gab-af-share { width: 32px; height: 32px; border: 1px solid var(--gab-gray-200); border-radius: 999px; background: #fff; color: var(--gab-gray-600); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; -webkit-tap-highlight-color: transparent; }

@media (max-width: 768px) {
  /* 저장된 검색 (오버레이) */
  .gab-msearch-saved { display: flex; flex-direction: column; gap: 4px; }
  .gab-msearch-srow { display: flex; align-items: center; background: var(--gab-gray-50); border-radius: 11px; overflow: hidden; }
  .gab-msearch-srow-go { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; text-decoration: none; color: var(--gab-gray-800); font-size: 13.5px; font-weight: 600; min-width: 0; }
  .gab-msearch-srow-go i { color: var(--gab-primary-600); font-size: 14px; flex-shrink: 0; }
  .gab-msearch-srow-go span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gab-msearch-srow-x { border: 0; background: none; padding: 12px 13px; color: var(--gab-gray-400); font-size: 15px; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
  /* 필터 프리셋 */
  .gab-msearch-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .gab-msearch-preset { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--gab-gray-200); border-radius: 12px; text-decoration: none; color: var(--gab-gray-800); font-size: 13px; font-weight: 700; background: #fff; }
  .gab-msearch-preset i { color: var(--gab-primary-600); font-size: 15px; flex-shrink: 0; }
  .gab-msearch-preset span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  [dir="rtl"] .gab-msearch-srow-go, [dir="rtl"] .gab-msearch-presets { text-align: right; }
}

/* ============================================================
 * 모바일 카드 풀폭 (썸네일 양옆 끝까지 — 여백 제거)
 * ============================================================ */
@media (max-width: 768px) {
  /* 카드 그리드만 풀폭 (리스트 좌우 패딩 12px 상쇄) — 카운트/퀵바/필터는 패딩 유지 */
  .gab-list-results .gab-cars-grid,
  .gab-list-results .gab-cars-grid-3 { margin-left: -12px; margin-right: -12px; gap: 10px; }
  /* 카드 엣지-투-엣지: 모서리/좌우 보더/그림자 제거 → 썸네일이 화면 끝까지 */
  .gab-car-card { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; }
  /* 썸네일은 풀폭으로 더 시원하게(16:9) */
  .gab-ccg-main { aspect-ratio: 16 / 9 !important; }
  /* 본문 텍스트는 좌우 패딩 유지(가독성) */
  .gab-car-card-body { padding-left: 16px !important; padding-right: 16px !important; }
  /* 추천 매물 그리드도 동일 풀폭 */
  .gab-reco-grid { margin-left: -12px; margin-right: -12px; }
}

/* ---------- Phase F9: 음성 검색 버튼 + 접근성 ---------- */
@media (max-width: 768px) {
  .gab-msearch-voice { border: 0; background: none; color: var(--gab-primary-600); font-size: 17px; padding: 0 2px; display: flex; align-items: center; -webkit-tap-highlight-color: transparent; }
  .gab-msearch-voice.is-listening { color: #DC2626; animation: gabVoicePulse 1s ease-in-out infinite; }
  @keyframes gabVoicePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: 0.6; } }
  /* 포커스 가시성(접근성) */
  .gab-msearch-sgrow:focus-visible, .gab-msearch-pop:focus-visible, .gab-sort-opt:focus-visible, .gab-qchip:focus-visible { outline: 2px solid var(--gab-primary-500); outline-offset: -2px; border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) { .gab-msearch-voice.is-listening { animation: none; } }
