/* 머리 메뉴 (A~E 공용 구조, 느낌: 묵직한 머리 영역 + N 표시 + 둥근 큰 검색창 + 내 차 규격 찾기)
   시안별 색: --hd-bg --hd-ink --hd-ink-2 --hd-line --hd-util-bg --hd-search-bg --hd-search-ink --hd-accent --hd-accent-ink */
.hd { background: var(--hd-bg); color: var(--hd-ink); }
.hd a { color: inherit; }

/* 1) 얇은 안내 띠 (PC) */
.hd-util { display: none; background: var(--hd-util-bg, transparent); border-bottom: 1px solid var(--hd-line); font-size: 13px; }
.hd-util .wrap { display: flex; justify-content: space-between; align-items: center; height: 34px; }
.hd-slogan { font-weight: 700; color: var(--hd-ink-2); }
.hd-links { display: flex; align-items: center; gap: 0; color: var(--hd-ink-2); }
.hd-links > * + *::before { content: ''; display: inline-block; width: 1px; height: 11px; background: var(--hd-line); margin: 0 12px; vertical-align: -1px; }
.hd-links .open { font-size: 13px; }
.hd-links a:hover { color: var(--hd-ink); }
.hd-links .login { letter-spacing: .02em; }

/* 2) 로고 + 메뉴 + 아이콘 */
.hd-main { position: sticky; top: 0; z-index: 45; background: var(--hd-bg); }
.hd-main .wrap { display: flex; align-items: center; gap: 12px; height: 58px; }
.hd .logo { --logo-color: var(--hd-ink); --logo-sub: var(--hd-ink-2); flex: none; }
.hd-icons { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.hd-ic { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: var(--hd-ink); }
.hd-ic:hover { background: var(--hd-line); }
.hd-ic .ic { width: 24px; height: 24px; }
.hd-ic input { display: none; }
.hd-tel { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 20px; background: var(--hd-accent); color: var(--hd-accent-ink) !important; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-tel .ic { width: 20px; height: 20px; }
.hd-tel { flex-direction: row; gap: 5px; height: 36px; padding: 0 12px; font-size: 13.5px; }
.hd-tel .lbl { display: none; font-weight: 600; }
.hd-tel b { font-weight: 600; }

/* 메뉴: 모바일 = 가로로 넘기는 줄, PC = 로고 옆 */
.hd-nav { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; padding: 2px var(--gutter) 12px; font-weight: 600; font-size: 16px; white-space: nowrap; }
.hd-nav::-webkit-scrollbar { display: none; }
.hd-nav a { position: relative; padding: 6px 0; color: var(--hd-ink); }
.hd-nav a.on { box-shadow: inset 0 -3px 0 var(--hd-accent); }
.hd-nav .n { position: absolute; top: 0; right: -9px; width: 7px; height: 7px; border-radius: 50%; background: var(--hd-dot, #FF4D2E); font-size: 0; }
.hd-nav-m { display: flex; }
.hd-nav-pc { display: none; }

/* 3) 내 차 규격 찾기 + 둥근 검색창 */
.hd-sub .wrap { display: flex; flex-direction: column-reverse; gap: 10px; padding-block: 2px 14px; }
.hd-search { display: flex; align-items: center; height: 48px; border-radius: 24px; background: var(--hd-search-bg); color: var(--hd-search-ink); padding: 0 6px 0 18px; border: var(--hd-search-border, 0); }
.hd-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: inherit; font-size: 15.5px; font-weight: 600; }
.hd-search input::placeholder { color: var(--hd-search-ph, #8A929C); font-weight: 500; }
.hd-search button { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; }
.hd-search button .ic { width: 22px; height: 22px; }
.hd-car { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--hd-ink); }
.hd-car-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--hd-car-bg, var(--hd-line)); }
.hd-car-ic .ic { width: 20px; height: 20px; }
.hd-car b { font-size: 18px; line-height: 1; color: var(--hd-accent-txt, var(--hd-accent)); }

@media (min-width: 900px) {
  .hd-util { display: block; }
  .hd-main { position: sticky; }
  .hd-main .wrap { height: 72px; gap: 36px; }
  .hd-nav-m { display: none; }
  .hd-nav-pc { display: flex; padding: 0; gap: 34px; font-size: 17px; overflow: visible; }
  .hd-nav-pc a { padding: 24px 0; }
  .hd-nav-pc .n { top: 20px; }
  .hd-tel .lbl { display: inline; }
  .hd-tel { height: 42px; font-size: 15.5px; }
  .hd-tel { padding: 0 16px; }
  .hd-sub .wrap { flex-direction: row; justify-content: space-between; align-items: center; padding-block: 4px 18px; }
  .hd-car { justify-content: flex-start; }
  .hd-car-ic { width: 44px; height: 44px; }
  .hd-search { width: 420px; height: 50px; }
}

/* */
.vbar { display: flex; align-items: center; gap: 4px; padding: 6px var(--gutter); background: #0B0D10; font: 700 12.5px/1 Pretendard, 'Malgun Gothic', sans-serif; overflow-x: auto; scrollbar-width: none; }
.vbar span { color: #8A929C; margin-right: 6px; white-space: nowrap; }
.vbar a { flex: none; color: #C9CED6; padding: 6px 11px; border-radius: 14px; white-space: nowrap; }
.vbar a.on { background: #F5B700; color: #111; }
.vbar a[data-ver="m"] { margin-left: auto; color: #8A929C; }
.proto-bar { display: none !important; }
/* */
.banner { background: var(--bg-2); line-height: 0; }
.banner img { width: 100%; height: auto; aspect-ratio: 1080 / 450; object-fit: cover; display: block; }
@media (min-width: 900px) { .banner img { aspect-ratio: 1920 / 400; } }