/* ============================================================
 * 18-interactive.css — "리액트 느낌" 인터랙티브 레이어
 * 토스트 · 바텀시트 · 스켈레톤 · ripple · 스크롤 등장
 * ============================================================ */

/* ============================================================
 * 1. 토스트 (react-hot-toast 스타일) — 08-utilities 토스트 강화/override
 *    데스크탑: 상단 중앙 / 모바일: 하단 중앙(탭바 위)
 * ============================================================ */
.gab-toast-container {
  position: fixed;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  right: auto; bottom: auto;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.gab-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 92vw;
  padding: 13px 16px;
  background: #fff;
  color: var(--gab-gray-900);
  border: 1px solid var(--gab-gray-200);
  border-radius: 12px;
  box-shadow: var(--gab-shadow-lg);
  font-size: 14px;
  font-weight: 600;
  border-left: none;
  animation: gab-toast-pop .32s cubic-bezier(.21,1.02,.73,1);
}
.gab-toast.gab-toast-out { animation: gab-toast-off .25s ease forwards; }
.gab-toast i { font-size: 18px; flex-shrink: 0; }
.gab-toast-success { border-color: #bbf7d0; }
.gab-toast-success i { color: #16a34a; }
.gab-toast-error { border-color: #fecaca; }
.gab-toast-error i { color: #dc2626; }
.gab-toast-info i { color: var(--gab-primary-600); }
.gab-toast-icon-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
}
.gab-toast-success .gab-toast-icon-wrap { background: #dcfce7; }
.gab-toast-error .gab-toast-icon-wrap { background: #fee2e2; }
.gab-toast-info .gab-toast-icon-wrap { background: var(--gab-primary-50); }

@keyframes gab-toast-pop {
  0%   { opacity: 0; transform: translateY(-14px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gab-toast-off {
  to { opacity: 0; transform: translateY(-10px) scale(.97); }
}

@media (max-width: 768px) {
  .gab-toast-container {
    top: auto;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    flex-direction: column-reverse;
  }
  .gab-toast { animation: gab-toast-pop-up .32s cubic-bezier(.21,1.02,.73,1); }
  @keyframes gab-toast-pop-up {
    0%   { opacity: 0; transform: translateY(14px) scale(.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* ============================================================
 * 2. 바텀시트 — 모바일 네이티브 느낌 (아래에서 슬라이드업)
 * ============================================================ */
.gab-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(2, 8, 23, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
  z-index: 1100;
}
.gab-sheet-backdrop.is-open { opacity: 1; visibility: visible; }

.gab-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1101;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(2, 8, 23, 0.18);
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.32,.72,0,1);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.gab-sheet.is-open { transform: translateY(0); }
.gab-sheet-handle {
  flex-shrink: 0;
  display: flex; justify-content: center;
  padding: 10px 0 6px;
  cursor: grab;
}
.gab-sheet-handle::before {
  content: ''; width: 40px; height: 5px;
  border-radius: 999px; background: var(--gab-gray-300);
}
.gab-sheet-head {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 20px 12px;
  border-bottom: 1px solid var(--gab-gray-100);
}
.gab-sheet-title { font-size: 17px; font-weight: 800; }
.gab-sheet-close {
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--gab-gray-100); color: var(--gab-gray-600);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  cursor: pointer;
}
.gab-sheet-close:hover { background: var(--gab-gray-200); }
.gab-sheet-body { overflow-y: auto; padding: 16px 20px 20px; -webkit-overflow-scrolling: touch; }
.gab-sheet-foot {
  flex-shrink: 0;
  padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--gab-gray-100);
  display: flex; gap: 10px;
}

/* 데스크탑: 바텀시트 대신 중앙 모달처럼 (선택) */
@media (min-width: 769px) {
  .gab-sheet.gab-sheet--responsive {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -46%) scale(.98);
    width: 460px; max-width: 92vw;
    border-radius: 16px;
    max-height: 84vh;
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
  }
  .gab-sheet.gab-sheet--responsive.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .gab-sheet.gab-sheet--responsive .gab-sheet-handle { display: none; }
}

/* ============================================================
 * 3. 스켈레톤 로딩 (shimmer)
 * ============================================================ */
.gab-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--gab-gray-100);
  border-radius: var(--gab-radius);
}
.gab-skeleton::after {
  content: '';
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.65) 50%,
    rgba(255,255,255,0) 100%);
  animation: gab-shimmer 1.3s infinite;
}
@keyframes gab-shimmer { 100% { transform: translateX(100%); } }

.gab-skel-card {
  border: 1px solid var(--gab-gray-200);
  border-radius: var(--gab-radius-lg);
  overflow: hidden;
  background: #fff;
}
.gab-skel-card .gab-skel-img { aspect-ratio: 4/3; }
.gab-skel-card .gab-skel-lines { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.gab-skel-line { height: 12px; border-radius: 6px; }
.gab-skel-line.w-70 { width: 70%; }
.gab-skel-line.w-50 { width: 50%; }
.gab-skel-line.w-40 { width: 40%; }

/* ============================================================
 * 4. Ripple (버튼 클릭 물결) — Material/모던 앱 느낌
 * ============================================================ */
.gab-btn, .gab-btn-primary, .gab-btn--primary, .gab-fm-type, .gab-chip {
  position: relative;
  overflow: hidden;
}
.gab-ripple-dot {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: 0.28;
  pointer-events: none;
  animation: gab-ripple .55s ease-out;
}
@keyframes gab-ripple { to { transform: scale(2.6); opacity: 0; } }

/* 눌림 피드백 (active scale) */
.gab-btn:active, .gab-btn-primary:active, .gab-btn--primary:active,
.gab-car-card:active, .gab-tab:active, .gab-fm-type:active {
  transform: scale(0.97);
}
.gab-car-card:active { transform: scale(0.985); }

/* ============================================================
 * 5. 스크롤 등장 애니메이션 (fade + slide up)
 *    .gab-reveal 붙은 요소가 뷰포트 진입 시 부드럽게 등장
 * ============================================================ */
.gab-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.gab-reveal.is-in { opacity: 1; transform: none; }
/* 그리드 자식 순차 등장 */
.gab-reveal-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
}
.gab-reveal-stagger.is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .gab-reveal, .gab-reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .gab-ripple-dot { display: none; }
}

/* 스태거 등장 딜레이 (카드 순차 cascade) */
.gab-reveal-stagger.is-in > *:nth-child(1) { transition-delay: .02s; }
.gab-reveal-stagger.is-in > *:nth-child(2) { transition-delay: .06s; }
.gab-reveal-stagger.is-in > *:nth-child(3) { transition-delay: .10s; }
.gab-reveal-stagger.is-in > *:nth-child(4) { transition-delay: .14s; }
.gab-reveal-stagger.is-in > *:nth-child(5) { transition-delay: .18s; }
.gab-reveal-stagger.is-in > *:nth-child(6) { transition-delay: .22s; }
.gab-reveal-stagger.is-in > *:nth-child(7) { transition-delay: .26s; }
.gab-reveal-stagger.is-in > *:nth-child(8) { transition-delay: .30s; }

/* ============================================================
 * 6. 모바일 필터 → 바텀시트 (데스크탑 사이드바는 유지)
 * ============================================================ */
.gab-filter-sheet-close { display: none; }
@media (max-width: 768px) {
  #gab-filter-sidebar {
    position: fixed !important;
    left: 0; right: 0; bottom: 0; top: auto !important;
    width: 100% !important; max-width: 100% !important;
    z-index: 1101;
    margin: 0 !important;
    max-height: 84vh !important;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(2, 8, 23, 0.18);
    transform: translateY(110%);
    transition: transform .34s cubic-bezier(.32, .72, 0, 1);
    display: block !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #gab-filter-sidebar.is-open { transform: translateY(0); }
  #gab-filter-sidebar::before {
    content: ''; display: block;
    width: 40px; height: 5px; border-radius: 999px;
    background: var(--gab-gray-300);
    margin: 10px auto 6px;
    position: sticky; top: 0;
  }
  .gab-filter-sheet-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--gab-gray-100); border: none; color: var(--gab-gray-600);
    font-size: 14px; z-index: 3; cursor: pointer;
  }
  .gab-filter-header {
    position: sticky; top: 15px;
    background: #fff; padding-top: 2px;
    z-index: 2;
  }
}

/* ============================================================
 * 7. 확장 필터 (Autowini식) — 아코디언 · 칩 · 색상 · 셀렉트
 * ============================================================ */
.gab-filter-group-title {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
}
.gab-filter-group-title i { font-size: 12px; color: var(--gab-gray-400); transition: transform .25s ease; }
.gab-filter-group.is-collapsed .gab-filter-group-title i { transform: rotate(180deg); }

.gab-filter-gbody, .gab-filter-group .gab-filter-options {
  overflow: hidden;
  max-height: 760px;
  transition: max-height .3s ease, opacity .2s ease, margin .2s ease;
}
.gab-filter-group.is-collapsed .gab-filter-gbody,
.gab-filter-group.is-collapsed .gab-filter-options {
  max-height: 0; opacity: 0; margin-top: 0;
}

/* 칩 */
.gab-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.gab-fchip {
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--gab-gray-300); background: #fff;
  font-size: 13px; font-weight: 600; color: var(--gab-gray-700); cursor: pointer;
  transition: all .15s ease;
}
.gab-fchip:hover { border-color: var(--gab-primary-400); color: var(--gab-primary-600); }
.gab-fchip.is-on { background: var(--gab-primary-50); border-color: var(--gab-primary-500); color: var(--gab-primary-700); }

/* 색상 스와치 */
.gab-filter-colors { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.gab-fcolor {
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: none; padding: 3px; cursor: pointer;
  transition: transform .15s ease;
}
.gab-fcolor span {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
.gab-fcolor:hover { transform: scale(1.08); }
.gab-fcolor.is-on { box-shadow: 0 0 0 2px var(--gab-primary-600); }

/* 셀렉트 */
.gab-filter-select {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--gab-gray-300); border-radius: var(--gab-radius);
  font-size: 14px; background: #fff; color: var(--gab-gray-800);
  cursor: pointer;
}
.gab-filter-select:focus { outline: none; border-color: var(--gab-primary-500); box-shadow: 0 0 0 3px rgba(26, 26, 26,.12); }

/* 체크박스 체크 표시 (is-checked 시만) */
.gab-filter-option .gab-filter-checkbox i { font-size: 14px; opacity: 0; transition: opacity .12s; }
.gab-filter-option.is-checked .gab-filter-checkbox i { opacity: 1; }

/* ============================================================
 * 8. 매물 카드 3-이미지 갤러리 (메인 + 썸네일 2 + INSPECTED 리본)
 * ============================================================ */
.gab-car-card-gallery {
  display: grid;
  grid-template-columns: 1fr 72px;
  gap: 4px;
  background: var(--gab-gray-100);
}
.gab-ccg-main {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--gab-gray-100);
}
.gab-ccg-main-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: opacity .2s ease, transform .4s ease;
}
.gab-car-card:hover .gab-ccg-main-img { transform: scale(1.03); }

/* INSPECTED 대각 리본 (좌상단) */
.gab-ccg-ribbon {
  position: absolute; top: 13px; left: -33px;
  width: 132px; transform: rotate(-45deg);
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .5px;
  text-align: center; padding: 4px 0; z-index: 4;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  pointer-events: none;
}

/* 갤러리에선 배지를 리본 아래로 */
.gab-ccg-main .gab-car-card-badges { top: 42px; left: 8px; }

/* 사진수 + 비디오 (좌하단) */
.gab-ccg-meta {
  position: absolute; left: 8px; bottom: 8px;
  display: flex; gap: 6px; z-index: 3;
}
.gab-ccg-count {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(2, 8, 23, .68); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 7px; border-radius: 5px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.gab-ccg-video {
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 21px;
  background: rgba(220, 38, 38, .92); color: #fff;
  border-radius: 5px; font-size: 13px;
}

/* 썸네일 칼럼 (세로 2개) */
.gab-ccg-thumbs { display: grid; grid-template-rows: 1fr 1fr; gap: 4px; }
.gab-ccg-thumb {
  position: relative; overflow: hidden;
  border: none; padding: 0; cursor: pointer;
  background: var(--gab-gray-100);
}
.gab-ccg-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .2s ease;
}
.gab-ccg-thumb::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 0 var(--gab-primary-500);
  transition: box-shadow .15s ease;
}
.gab-ccg-thumb:hover img { transform: scale(1.08); }
.gab-ccg-thumb:hover::after,
.gab-ccg-thumb.is-active::after { box-shadow: inset 0 0 0 2px var(--gab-primary-500); }

@media (max-width: 480px) {
  .gab-car-card-gallery { grid-template-columns: 1fr 56px; }
}

/* ============================================================
 * 9. 추천 매물 섹션 (프리미엄, 매물목록 상단)
 * ============================================================ */
.gab-reco-section {
  margin-bottom: 22px;
  padding: 20px 20px 22px;
  background: linear-gradient(180deg, var(--gab-primary-50), #fff 88%);
  border: 1px solid var(--gab-primary-100);
  border-radius: var(--gab-radius-xl);
}
.gab-reco-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.gab-reco-title { font-size: 18px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.gab-reco-title i { color: var(--gab-accent-500); }
.gab-reco-sub { font-size: 13px; color: var(--gab-gray-500); font-weight: 500; }
.gab-reco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gab-reco-grid .gab-car-card { border-color: var(--gab-primary-200); }
.gab-reco-grid .gab-car-card:hover { box-shadow: var(--gab-glow-brand); border-color: var(--gab-primary-400); }
@media (max-width: 900px) { .gab-reco-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gab-reco-grid { grid-template-columns: 1fr; } }

/* ============================================================
 * 10. 빠른 필터 바 + N개씩 보기 (Autowini식)
 * ============================================================ */
.gab-quickfilters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
}
.gab-qf {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--gab-gray-300);
  border-radius: var(--gab-radius-full);
  background: #fff; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--gab-gray-600);
  transition: all .15s ease;
}
.gab-qf:hover { border-color: var(--gab-gray-400); background: var(--gab-gray-50); }
.gab-qf-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--gab-gray-300);
  color: #fff; font-size: 11px; transition: all .15s;
}
.gab-qf-check i { opacity: 0; }
.gab-qf-ic { font-size: 14px; }
.gab-qf.is-on { border-color: var(--gab-primary-500); background: var(--gab-primary-50); color: var(--gab-primary-700); }
.gab-qf.is-on .gab-qf-check { background: var(--gab-primary-600); border-color: var(--gab-primary-600); }
.gab-qf.is-on .gab-qf-check i { opacity: 1; }

.gab-perpage-select {
  padding: 8px 10px;
  border: 1px solid var(--gab-gray-300);
  border-radius: var(--gab-radius);
  background: #fff; color: var(--gab-gray-700);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.gab-perpage-select:focus { outline: none; border-color: var(--gab-primary-500); box-shadow: 0 0 0 3px rgba(26, 26, 26,.12); }

@media (max-width: 768px) {
  .gab-quickfilters { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .gab-qf { flex-shrink: 0; }
}