/* ============================================================
 * 17-polish.css — shadcn/ui 스타일 정제 레이어 (마지막 로드)
 * 미묘한 그림자 · 포커스 링 · 컴포넌트 정제 · 모바일 하단 탭바
 * 기존 토큰을 재정의(override)하여 전역 적용
 * ============================================================ */

:root {
  /* ── shadcn식 미묘하고 층진 그림자로 재정의 ── */
  --gab-shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --gab-shadow-sm:  0 1px 2px 0 rgba(15, 23, 42, 0.06), 0 1px 1px 0 rgba(15, 23, 42, 0.04);
  --gab-shadow:     0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
  --gab-shadow-md:  0 4px 10px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --gab-shadow-lg:  0 12px 26px -6px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
  --gab-shadow-xl:  0 24px 48px -12px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.08);

  /* 포커스 링 */
  --gab-ring: var(--gab-primary-500);
  --gab-ring-offset: #ffffff;
}

/* ============================================================
 * 1. 포커스 링 — shadcn 시그니처 (키보드 접근성 + 세련됨)
 *    마우스 클릭엔 안 뜨고, 키보드 탐색(:focus-visible)에만
 * ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.gab-btn:focus-visible,
.gab-btn-primary:focus-visible,
.gab-btn--primary:focus-visible,
.gab-car-card:focus-visible,
.gab-nav-item:focus-visible,
.gab-tab:focus-visible {
  outline: 2px solid var(--gab-ring);
  outline-offset: 2px;
  border-radius: var(--gab-radius-sm);
}
/* 마우스 포커스 잔상 제거 */
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
 * 2. 인터랙티브 트랜지션 (부드럽게 통일)
 * ============================================================ */
.gab-btn, .gab-btn-primary, .gab-btn--primary, .gab-btn-icon,
.gab-car-card, .gab-nav-item, .gab-fm-make, .gab-fm-type, .gab-fm-fuel,
.gab-chip, .gab-badge, .gab-tab, input, textarea, select, .gab-input {
  transition: background-color .15s ease, border-color .15s ease,
              box-shadow .15s ease, color .15s ease, transform .15s ease;
}

/* ============================================================
 * 3. 폼 컨트롤 정제 (shadcn input)
 * ============================================================ */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
input[type="url"], textarea, select, .gab-input {
  border: 1px solid var(--gab-gray-300);
  border-radius: var(--gab-radius);
  background: #fff;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="tel"]:focus, input[type="number"]:focus, input[type="search"]:focus,
input[type="url"]:focus, textarea:focus, select:focus, .gab-input:focus {
  border-color: var(--gab-primary-500);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.12);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--gab-gray-400); }

/* ============================================================
 * 4. 카드 정제 — 깔끔한 보더 + 미묘한 그림자 + 부드러운 hover lift
 * ============================================================ */
.gab-car-card {
  border: 1px solid var(--gab-gray-200);
  border-radius: var(--gab-radius-lg);
  box-shadow: var(--gab-shadow-xs);
  overflow: hidden;
}
.gab-car-card:hover {
  border-color: var(--gab-gray-300);
  box-shadow: var(--gab-shadow-lg);
  transform: translateY(-3px);
}

/* ============================================================
 * 5. 버튼 미세 정제 (그라데이션 버튼은 기존 유지, 보조 버튼만)
 * ============================================================ */
.gab-btn--secondary, .gab-btn-outline, .gab-btn--outline {
  border: 1px solid var(--gab-gray-300);
  background: #fff;
  box-shadow: var(--gab-shadow-xs);
}
.gab-btn--secondary:hover, .gab-btn-outline:hover, .gab-btn--outline:hover {
  background: var(--gab-gray-50);
  border-color: var(--gab-gray-400);
}

/* ============================================================
 * 6. 모바일 하단 탭바 — 네이티브 앱 느낌 (≤768px 전용)
 * ============================================================ */
.gab-tabbar { display: none; }

@media (max-width: 768px) {
  .gab-tabbar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 950;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--gab-gray-200);
    box-shadow: 0 -2px 16px rgba(2, 8, 23, 0.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .gab-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 8px 0 6px;
    color: var(--gab-gray-500);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    position: relative;
  }
  .gab-tab i { font-size: 21px; line-height: 1; }
  .gab-tab.is-active { color: var(--gab-primary-600); }
  .gab-tab.is-active i { transform: translateY(-1px); }
  .gab-tab-badge {
    position: absolute;
    top: 5px;
    right: calc(50% - 20px);
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--gab-accent-500);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
  }

  /* 가운데 CTA 탭 (판매하기) — 떠 있는 그라데이션 버튼 */
  .gab-tab--cta { color: var(--gab-primary-700); }
  .gab-tab--cta .gab-tab-cta-ic {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px;
    margin-top: -20px;
    border-radius: 16px;
    background: var(--gab-grad-brand);
    color: #fff;
    font-size: 22px;
    box-shadow: var(--gab-glow-brand);
    border: 3px solid #fff;
  }

  /* 탭바에 가려지지 않게 본문 하단 여백 */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

  /* 모바일에서 푸터 위에 약간 숨 쉴 공간 */
  .gab-footer { margin-bottom: 0; }
}

/* ============================================================
 * 7. 모바일 터치 타깃 & 가독성 최적화
 * ============================================================ */
@media (max-width: 768px) {
  /* 터치 타깃 최소 크기 보장 */
  .gab-btn, .gab-btn-primary, .gab-btn--primary,
  .gab-nav-item, .gab-top-bar a, .gab-btn-icon {
    min-height: 44px;
  }
  .gab-btn, .gab-btn-primary, .gab-btn--primary {
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* 본문 폰트 약간 키워 가독성 */
  body { -webkit-text-size-adjust: 100%; }

  /* 가로 스크롤 방지 */
  html, body { overflow-x: hidden; }

  /* 매물 카드 그리드: 모바일 2열 → 좁으면 1열 */
  .gab-cars-grid { gap: 12px; }
}
@media (max-width: 420px) {
  .gab-cars-grid:not(.is-list) { grid-template-columns: 1fr; }
}

/* ============================================================
 * 8. 접근성 — 모션 줄이기 선호 존중
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 부드러운 스크롤 (모션 허용 시) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}