/* ════════════════════════════════════════════════════════════
   home.css v1 — 손님 메인 페이지 (2026-07-05 재건축, 시안 이식)
   ────────────────────────────────────────────────────────────
   · 스코프: body.home-body 에만 적용 (관리자/상세 페이지 영향 없음)
   · 디자인 토큰: 레드 #D93A32 / 다크 #111318 / 회백 계열은 시안 그대로
   ════════════════════════════════════════════════════════════ */

body.home-body {
  background: #fff;
  color: #111318;
  font-size: 14px;
  min-height: 100vh;
}
.home-body .hm-flex1 { flex: 1; }
.home-body .hm-accent { color: #D93A32; }

/* ─── NAV ─────────────────────────────────────────────── */
.home-body .hm-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid #EEEFF2;
}
.home-body .hm-nav__inner {
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
  height: 60px; display: flex; align-items: center; gap: 28px;
}
.home-body .hm-nav__logo { display: flex; align-items: center; gap: 9px; }
.home-body .hm-nav__logomark {
  width: 28px; height: 28px; border-radius: 8px; background: #D93A32;
  display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff;
}
.home-body .hm-nav__logotext { font-weight: 800; font-size: 15px; letter-spacing: -0.2px; }
.home-body .hm-nav__logotext-sub { font-weight: 700; font-size: 12px; color: #AAB0BC; letter-spacing: 0.2px; }
.home-body .hm-nav__menu { display: flex; gap: 22px; font-size: 13.5px; font-weight: 600; color: #6E7382; }
.home-body .hm-nav__menu-item { cursor: pointer; }
.home-body .hm-nav__menu-item:hover { color: #111318; }
.home-body .hm-nav__menu-item--active { color: #111318; font-weight: 800; }
.home-body .hm-nav__cta {
  padding: 9px 18px; border: none; border-radius: 99px;
  background: #111318; color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.home-body .hm-nav__cta:hover { background: #2A2E38; }

/* ─── HERO ────────────────────────────────────────────── */
.home-body .hm-hero { max-width: 1240px; margin: 0 auto; padding: 64px 24px 30px; }
.home-body .hm-hero__copy { max-width: 760px; }
.home-body .hm-hero__eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.home-body .hm-hero__dot { width: 7px; height: 7px; border-radius: 99px; background: #D93A32; }
.home-body .hm-hero__eyebrow span:last-child {
  font-size: 12.5px; font-weight: 700; color: #6E7382; letter-spacing: 0.5px;
}
.home-body .hm-hero__title {
  margin: 0 0 14px; font-size: 48px; font-weight: 800; letter-spacing: -2px; line-height: 1.12;
}
.home-body .hm-hero__sub { margin: 0; font-size: 15.5px; color: #8A8F9C; line-height: 1.6; }

.home-body .hm-hero__search-row { margin-top: 30px; display: flex; gap: 10px; max-width: 760px; flex-wrap: wrap; }
.home-body .hm-hero__search {
  flex: 1; min-width: 260px; display: flex; align-items: center; gap: 13px;
  border: 1.5px solid #E3E5EA; border-radius: 99px; padding: 15px 22px;
  background: #fff; box-shadow: 0 6px 20px rgba(17,19,24,0.06);
}
.home-body .hm-hero__search:focus-within { border-color: #D93A32; }
.home-body .hm-hero__search input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 15px; color: #111318; min-width: 0; font-family: inherit;
}
.home-body .hm-hero__search input::-webkit-search-cancel-button { display: none; }
.home-body .hm-hero__search-clear {
  border: none; background: #F1F2F5; color: #6E7382; width: 22px; height: 22px;
  border-radius: 99px; font-size: 11px; line-height: 1; flex-shrink: 0;
}
.home-body .hm-hero__search-btn {
  padding: 15px 30px; border: none; border-radius: 99px; background: #D93A32; color: #fff;
  font-size: 14.5px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(217,58,50,0.24);
}
.home-body .hm-hero__search-btn:hover { filter: brightness(1.08); }

.home-body .hm-hero__picks { margin-top: 16px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.home-body .hm-hero__picks-label { font-size: 12px; color: #AAB0BC; font-weight: 600; white-space: nowrap; margin-right: 2px; }
.home-body .hm-pick {
  padding: 6px 13px; border-radius: 99px; background: #F4F5F7; color: #4A4F5C;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.home-body .hm-pick:hover { background: #E8EAEF; }

/* ─── STICKY FILTER BAR ───────────────────────────────── */
.home-body .hm-fbar {
  position: sticky; top: 60px; z-index: 40;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid #EEEFF2; border-bottom: 1px solid #EEEFF2;
}
.home-body .hm-fbar__row1 {
  max-width: 1240px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 10px; overflow-x: auto;
}
.home-body .hm-fbar__row2 {
  max-width: 1240px; margin: 0 auto; padding: 0 24px 12px;
  display: flex; align-items: center; gap: 7px; overflow-x: auto;
}
.home-body .hm-fbar__divider { width: 1px; height: 22px; background: #E8EAEF; flex-shrink: 0; }
.home-body .hm-fbar__filters { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.home-body .hm-fbar__label { font-size: 12px; font-weight: 800; color: #AAB0BC; white-space: nowrap; flex-shrink: 0; }
.home-body .hm-fbar__notice {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  color: #8A8F9C; white-space: nowrap; flex-shrink: 0;
}

/* 상품 탭 (인수형/반납형/보험포함) */
.home-body .hm-tabs { display: flex; gap: 3px; background: #F1F2F5; padding: 3px; border-radius: 99px; flex-shrink: 0; }
.home-body .hm-tab {
  border: none; padding: 8px 16px; border-radius: 99px; background: transparent; color: #6E7382;
  font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; font-family: inherit;
}
.home-body .hm-tab--active { background: #111318; color: #fff; box-shadow: 0 2px 6px rgba(17,19,24,0.25); }

/* 필터 칩 (브랜드/기간/차급 드롭다운) */
.home-body .hm-chipwrap { position: relative; flex-shrink: 0; }
.home-body .hm-fchip {
  display: flex; align-items: center; gap: 6px; padding: 8px 15px;
  border: 1.5px solid #E3E5EA; border-radius: 99px; background: #fff; color: #4A4F5C;
  font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit;
}
.home-body .hm-fchip:hover { border-color: #C9CDD6; }
.home-body .hm-fchip--active { border-color: #111318; background: #111318; color: #fff; }

/* 드롭다운 메뉴 */
.home-body .hm-fmenu {
  position: fixed; z-index: 60;
  background: #fff; border: 1px solid #E8EAEF; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(17,19,24,0.12); padding: 6px;
  min-width: 150px; max-height: 320px; overflow-y: auto;
}
.home-body .hm-fmenu--right { left: auto; right: 0; }
.home-body .hm-fmenu__item {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #4A4F5C;
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.home-body .hm-fmenu__item:hover { background: #F4F5F7; color: #111318; }
.home-body .hm-fmenu__item--active { background: #111318; color: #fff; font-weight: 800; }
.home-body .hm-fmenu__item--active:hover { background: #111318; color: #fff; }

/* 정렬 */
.home-body .hm-sort {
  border: none; background: transparent; font-size: 12.5px; font-weight: 700; color: #8A8F9C;
  white-space: nowrap; cursor: pointer; padding: 8px 4px; font-family: inherit;
}
.home-body .hm-sort:hover { color: #111318; }

/* 초기화 */
.home-body .hm-reset {
  border: none; background: transparent; font-size: 12px; font-weight: 700; color: #D93A32;
  white-space: nowrap; cursor: pointer; padding: 8px 6px; flex-shrink: 0; font-family: inherit;
}

/* 가격 칩 */
.home-body .hm-prices { display: flex; gap: 7px; }
.home-body .hm-pchip {
  padding: 7px 14px; border-radius: 99px; border: 1.5px solid #E3E5EA; background: #fff;
  color: #6E7382; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  flex-shrink: 0; font-family: inherit;
}
.home-body .hm-pchip:hover { border-color: #C9CDD6; }
.home-body .hm-pchip--active { border-color: #111318; background: #111318; color: #fff; }

/* ─── THEME SHORTCUTS ─────────────────────────────────── */
.home-body .hm-themes { max-width: 1240px; margin: 0 auto; padding: 26px 24px 0; }
.home-body .hm-themes__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.home-body .hm-theme {
  display: flex; align-items: center; gap: 13px; background: #F7F8FA;
  border: 1.5px solid transparent; border-radius: 14px; padding: 15px 17px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.home-body .hm-theme:hover { border-color: #111318; background: #fff; }
.home-body .hm-theme--active { border-color: #D93A32; background: #fff; }
.home-body .hm-theme__icon {
  width: 38px; height: 38px; border-radius: 11px; background: #fff;
  border: 1px solid #E8EAEF; display: grid; place-items: center; flex-shrink: 0;
}
.home-body .hm-theme__txt { min-width: 0; }
.home-body .hm-theme__name { font-size: 13.5px; font-weight: 800; letter-spacing: -0.2px; }
.home-body .hm-theme__desc {
  font-size: 11.5px; color: #8A8F9C; font-weight: 600; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-body .hm-theme__arrow { flex-shrink: 0; }

/* Trust strip */
.home-body .hm-trust {
  display: flex; align-items: center; gap: 32px; margin-top: 18px; padding: 13px 20px;
  background: #fff; border: 1px solid #EEEFF2; border-radius: 12px; flex-wrap: wrap;
}
.home-body .hm-trust__item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #4A4F5C; }

/* ─── GRID ────────────────────────────────────────────── */
.home-body .hm-main { max-width: 1240px; margin: 0 auto; padding: 28px 24px 56px; }
.home-body .hm-main__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.home-body .hm-main__title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.home-body .hm-main__count { font-size: 13px; color: #AAB0BC; font-weight: 600; }

.home-body .hm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 18px; }

/* 차량 카드 */
.home-body .hm-card { display: flex; flex-direction: column; gap: 12px; }
.home-body .hm-card__media {
  position: relative; aspect-ratio: 16/11; border-radius: 16px;
  background: linear-gradient(150deg, #F1F2F5, #E2E5EB);
  display: grid; place-items: center; overflow: hidden; transition: transform 0.2s;
}
.home-body .hm-card__media:hover { transform: scale(1.015); }
.home-body .hm-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.home-body .hm-card__media img.failed { display: none; }
.home-body .hm-card__badge {
  position: absolute; top: 11px; left: 11px; z-index: 2;
  background: rgba(17,19,24,0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff; font-size: 10.5px; font-weight: 800; padding: 4px 11px; border-radius: 99px;
}
.home-body .hm-card__acc {
  position: absolute; top: 11px; right: 11px; z-index: 2;
  background: rgba(255,255,255,0.92); font-size: 10.5px; font-weight: 800;
  padding: 4px 10px; border-radius: 99px;
}
.home-body .hm-card__acc--clean { color: #1A7F4B; }
.home-body .hm-card__acc--minor { color: #B87400; }

.home-body .hm-card__body { display: flex; flex-direction: column; gap: 5px; padding: 0 3px; }
.home-body .hm-card__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #8A8F9C; }
.home-body .hm-card__plate {
  font-weight: 800; color: #6E7382; background: #F1F2F5; padding: 2px 8px;
  border-radius: 6px; font-variant-numeric: tabular-nums; font-size: 11px; white-space: nowrap;
}
.home-body .hm-card__name {
  font-size: 15.5px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.home-body .hm-card__priceline { display: flex; align-items: baseline; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.home-body .hm-card__price {
  font-size: 21px; font-weight: 800; color: #111318; letter-spacing: -0.8px; font-variant-numeric: tabular-nums;
}
.home-body .hm-card__cond { font-size: 12px; color: #AAB0BC; font-weight: 600; }
.home-body .hm-card__actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.home-body .hm-card__detail {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 6px; border: none; border-radius: 10px; background: #111318; color: #fff;
  font-size: 13px; font-weight: 800; cursor: pointer;
}
.home-body .hm-card__detail:hover { background: #2A2E38; }
.home-body .hm-card__consult {
  flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: #8A8F9C; cursor: pointer; padding: 6px 2px;
}
.home-body .hm-card__consult:hover { color: #D93A32; }

/* 더 보기 */
.home-body .hm-more { display: grid; place-items: center; margin-top: 36px; }
.home-body .hm-more__btn {
  padding: 14px 40px; border: 1.5px solid #E3E5EA; border-radius: 99px; background: #fff;
  color: #4A4F5C; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.home-body .hm-more__btn:hover { border-color: #111318; color: #111318; }

/* 빈 결과 */
.home-body .hm-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; }
.home-body .hm-empty__title { font-size: 16px; font-weight: 800; margin: 0 0 6px; }
.home-body .hm-empty__text { font-size: 13px; color: #8A8F9C; margin: 0 0 18px; }
.home-body .hm-empty__btn {
  padding: 11px 26px; border: 1.5px solid #E3E5EA; border-radius: 99px; background: #fff;
  color: #4A4F5C; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.home-body .hm-empty__btn:hover { border-color: #111318; color: #111318; }

/* ─── CTA BAND + FOOTER ───────────────────────────────── */
.home-body .hm-cta { background: #111318; color: #fff; }
.home-body .hm-cta__inner {
  max-width: 1240px; margin: 0 auto; padding: 52px 24px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.home-body .hm-cta__copy { flex: 1; min-width: 260px; }
.home-body .hm-cta__title { font-size: 24px; font-weight: 800; letter-spacing: -1px; line-height: 1.3; margin-bottom: 8px; }
.home-body .hm-cta__sub { font-size: 13.5px; color: #8B90A0; }
.home-body .hm-cta__btn {
  padding: 16px 36px; border: none; border-radius: 14px; background: #D93A32; color: #fff;
  font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 24px rgba(217,58,50,0.24);
  display: inline-block;
}
.home-body .hm-cta__btn:hover { filter: brightness(1.1); }

.home-body .hm-footer { border-top: 1px solid rgba(255,255,255,0.08); }
.home-body .hm-footer__main {
  max-width: 1240px; margin: 0 auto; padding: 32px 24px 28px;
  display: flex; gap: 32px; flex-wrap: wrap; justify-content: space-between;
}
.home-body .hm-footer__company { min-width: 280px; }
.home-body .hm-footer__tagline { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: #565B6B; margin-bottom: 6px; }
.home-body .hm-footer__brand { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 14px; }
.home-body .hm-footer__brand span { font-weight: 500; color: #8B90A0; }
.home-body .hm-footer__info { font-size: 12px; color: #8B90A0; line-height: 1.9; }
.home-body .hm-footer__info b { color: #A6ABBA; }
.home-body .hm-footer__cs { text-align: right; min-width: 200px; }
.home-body .hm-footer__cs-links {
  display: flex; justify-content: flex-end; gap: 16px;
  font-size: 12.5px; font-weight: 700; color: #A6ABBA; margin-bottom: 14px;
}
.home-body .hm-footer__cs-links a { cursor: pointer; }
.home-body .hm-footer__cs-links a:hover { color: #fff; }
.home-body .hm-footer__cs-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: #565B6B; margin-bottom: 4px; }
.home-body .hm-footer__cs-tel { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.home-body .hm-footer__cs-hours { font-size: 11.5px; color: #8B90A0; margin-top: 5px; line-height: 1.7; }
.home-body .hm-footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); }
.home-body .hm-footer__bottom-inner {
  padding: 16px 24px;
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: #565B6B;
}
.home-body .hm-footer__legal { display: flex; gap: 16px; font-weight: 700; color: #8B90A0; }
.home-body .hm-footer__legal a { cursor: pointer; }
.home-body .hm-footer__legal a:hover { color: #fff; }
.home-body .hm-footer__legal--bold { color: #A6ABBA; }
.home-body .hm-footer__legal--muted { color: #4A4F5C; font-weight: 600; opacity: 0.6; }
.home-body .hm-footer__legal--muted:hover { color: #8B90A0; opacity: 1; }

/* ─── 반응형 ──────────────────────────────────────────── */
@media (max-width: 1280px) {
  .home-body .hm-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .home-body .hm-grid { grid-template-columns: repeat(2, 1fr); }
  .home-body .hm-themes__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .home-body .hm-hero { padding: 40px 24px 30px; }
  .home-body .hm-hero__title { font-size: 32px; letter-spacing: -1.2px; }
  .home-body .hm-grid { grid-template-columns: 1fr; }
  .home-body .hm-themes__grid { grid-template-columns: 1fr; }
  .home-body .hm-trust { gap: 10px 18px; }
  .home-body .hm-cta__title { font-size: 20px; }
  .home-body .hm-nav__menu { gap: 14px; }
  .home-body .hm-footer__cs { text-align: left; }
  .home-body .hm-footer__cs-links { justify-content: flex-start; }

  /* 필터바: 상품 탭+정렬(윗줄) / 브랜드·기간·차급 묶음(아랫줄) */
  .home-body .hm-fbar__row1 {
    flex-wrap: wrap; overflow-x: visible; row-gap: 10px; padding: 12px 16px;
  }
  .home-body .hm-fbar__divider { display: none; }
  .home-body .hm-fbar__row1 .hm-flex1 { display: none; }
  .home-body .hm-tabs { order: 0; }
  .home-body .hm-chipwrap--sort { order: 1; margin-left: auto; }
  .home-body .hm-reset { order: 1; }
  /* 필터 묶음 통째로 다음 줄, 안에서 3개가 1/3씩 나란히 */
  .home-body .hm-fbar__filters {
    order: 2; flex-basis: 100%; width: 100%; gap: 8px;
  }
  .home-body .hm-fbar__filters .hm-chipwrap { flex: 1 1 0; min-width: 0; }
  .home-body .hm-fbar__filters .hm-fchip {
    width: 100%; justify-content: space-between; font-size: 12px; padding: 8px 10px;
  }
  .home-body .hm-fbar__row2 { padding: 0 16px 12px; }
}