/* ================================================================
 * 헤더 - AutoScout24 + Autowini 스타일
 * - 상단 띠: 다국어/통화/계정
 * - 메인: 로고 + 검색바 + CTA
 * - 카테고리 메뉴
 * ================================================================ */

.gab-site-header {
    background: white;
    border-bottom: 1px solid var(--gab-gray-200);
    position: sticky;
    top: 0;
    z-index: var(--gab-z-sticky);
}

/* === 상단 띠 === */
.gab-top-bar {
    background: var(--gab-gray-900);
    color: white;
    font-size: var(--gab-text-xs);
}

.gab-top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
}

.gab-top-bar-left,
.gab-top-bar-right {
    display: flex;
    align-items: center;
    gap: var(--gab-space-4);
}

.gab-top-bar a {
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--gab-transition-fast);
}

.gab-top-bar a:hover {
    color: white;
}

.gab-top-bar-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.2);
}

/* 다국어 드롭다운 */
.gab-lang-switcher {
    position: relative;
}

.gab-lang-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--gab-text-xs);
    font-weight: 500;
}

.gab-lang-trigger:hover {
    color: white;
}

.gab-lang-flag {
    display: inline-flex;
    align-items: center;
}

.gab-lang-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: white;
    border: 1px solid var(--gab-gray-200);
    border-radius: var(--gab-radius);
    box-shadow: var(--gab-shadow-lg);
    min-width: 160px;
    padding: var(--gab-space-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--gab-transition-fast);
    z-index: var(--gab-z-dropdown);
}

.gab-lang-switcher.is-open .gab-lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gab-lang-dropdown .gab-lang-option {
    display: flex;
    align-items: center;
    gap: var(--gab-space-2);
    padding: 9px 11px;
    color: var(--gab-gray-800);
    border-radius: var(--gab-radius-sm);
    font-size: var(--gab-text-sm);
    font-weight: 600;
    transition: background var(--gab-transition-fast), color var(--gab-transition-fast);
}

.gab-lang-dropdown .gab-lang-option:hover {
    background: var(--gab-primary-50);
    color: var(--gab-primary-700);
}

.gab-lang-dropdown .gab-lang-option.is-active {
    background: var(--gab-primary-50);
    color: var(--gab-primary-700);
    font-weight: 700;
}

/* === 메인 헤더 === */
.gab-main-header {
    height: 76px;
    display: flex;
    align-items: center;
}

.gab-main-header-inner {
    display: flex;
    align-items: center;
    gap: var(--gab-space-8);
    width: 100%;
}

/* 로고 */
.gab-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.gab-logo-icon {
    width: 44px;
    height: 44px;
    background: var(--gab-grad-brand);
    border-radius: var(--gab-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    box-shadow: var(--gab-glow-brand);
}

.gab-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.gab-logo-name {
    font-size: var(--gab-text-lg);
    font-weight: 800;
    color: var(--gab-gray-900);
    letter-spacing: -0.5px;
}

.gab-logo-name .accent {
    color: var(--gab-accent-500);
}

.gab-logo-tagline {
    font-size: 10px;
    color: var(--gab-gray-500);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 메인 검색바 (헤더용) */
.gab-header-search {
    flex: 1;
    max-width: 640px;
    position: relative;
}

.gab-header-search-form {
    display: flex;
    align-items: center;
    background: var(--gab-gray-100);
    border: 2px solid transparent;
    border-radius: var(--gab-radius-full);
    transition: all var(--gab-transition-fast);
}

.gab-header-search-form:focus-within {
    background: white;
    border-color: var(--gab-primary-500);
    box-shadow: 0 0 0 4px var(--gab-primary-100);
}

.gab-header-search-input {
    flex: 1;
    height: 46px;
    padding: 0 var(--gab-space-5);
    border: none;
    background: transparent;
    font-size: var(--gab-text-md);
    color: var(--gab-gray-800);
    outline: none;
}

.gab-header-search-input::placeholder {
    color: var(--gab-gray-400);
}

.gab-header-search-btn {
    width: 46px;
    height: 46px;
    background: var(--gab-primary-600);
    color: white;
    border-radius: var(--gab-radius-full);
    margin: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background var(--gab-transition-fast);
}

.gab-header-search-btn:hover {
    background: var(--gab-primary-700);
}

/* CTA 버튼 */
.gab-header-cta {
    display: flex;
    align-items: center;
    gap: var(--gab-space-3);
    flex-shrink: 0;
}

.gab-btn-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--gab-radius);
    color: var(--gab-gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all var(--gab-transition-fast);
    position: relative;
}

.gab-btn-icon:hover {
    background: var(--gab-gray-100);
    color: var(--gab-primary-600);
}

.gab-btn-icon-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--gab-danger);
    color: white;
    border-radius: var(--gab-radius-full);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gab-btn-primary {
    height: 44px;
    padding: 0 var(--gab-space-5);
    background: var(--gab-grad-brand);
    color: white;
    border-radius: var(--gab-radius);
    font-size: var(--gab-text-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--gab-glow-brand);
    transition: all var(--gab-transition-fast);
}

.gab-btn-primary:hover {
    filter: brightness(1.07);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 12px 30px -6px rgba(26, 26, 26,.55);
}

/* === 카테고리 네비게이션 === */
.gab-nav-bar {
    background: white;
    border-top: 1px solid var(--gab-gray-100);
}

.gab-nav-list {
    display: flex;
    align-items: center;
    gap: var(--gab-space-1);
    overflow-x: auto;
    scrollbar-width: none;
}

.gab-nav-list::-webkit-scrollbar { display: none; }

.gab-nav-item {
    height: 48px;
    padding: 0 var(--gab-space-4);
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gab-gray-700);
    font-size: var(--gab-text-sm);
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    transition: color var(--gab-transition-fast);
}

.gab-nav-item:hover {
    color: var(--gab-primary-600);
}

.gab-nav-item.is-active {
    color: var(--gab-primary-600);
    font-weight: 600;
}

.gab-nav-item.is-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: var(--gab-space-4);
    right: var(--gab-space-4);
    height: 3px;
    background: var(--gab-primary-600);
    border-radius: 2px 2px 0 0;
}

.gab-nav-badge {
    background: var(--gab-accent-500);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--gab-radius-sm);
}

/* === 반응형 === */
@media (max-width: 1024px) {
    .gab-header-search { display: none; }
}

@media (max-width: 768px) {
    .gab-top-bar-left .gab-top-bar-divider:nth-child(2),
    .gab-top-bar-left > *:nth-child(3) { display: none; }
    .gab-main-header { height: 64px; }
    .gab-logo-tagline { display: none; }
    .gab-btn-primary { padding: 0 var(--gab-space-3); font-size: var(--gab-text-xs); }
}

/* ================================================================
 * 시안 다크 네이비 헤더 전환 (Image 1·2·4 스타일)
 * 기존 구조 유지, 색상만 다크로 오버라이드
 * ================================================================ */

/* 메인 헤더: 화이트 (Autowini/AutoScout24 깔끔) */
.gab-main-header {
    background: #fff;
    border-bottom: 1px solid var(--gab-gray-200);
}

/* 로고: 다크 */
.gab-main-header .gab-logo-name { color: var(--gab-gray-900); }
.gab-main-header .gab-logo-tagline { color: var(--gab-gray-400); }

/* 헤더 검색바: 라이트그레이 + 보더 (AutoScout24 스타일) */
.gab-header-search-form {
    background: var(--gab-gray-50);
    border: 1.5px solid var(--gab-gray-200);
}
.gab-header-search-form:focus-within {
    background: #fff;
    border-color: var(--gab-primary-500);
    box-shadow: 0 0 0 3px var(--gab-primary-50);
}
.gab-header-search-input { color: var(--gab-gray-900); }
.gab-header-search-input::placeholder { color: var(--gab-gray-400); }

/* 찜 아이콘 버튼: 라이트 */
.gab-main-header .gab-btn-icon {
    background: var(--gab-gray-50);
    color: var(--gab-gray-600);
    border: 1px solid var(--gab-gray-200);
}
.gab-main-header .gab-btn-icon:hover { background: var(--gab-gray-100); color: var(--gab-primary-600); }

/* 카테고리 네비: 화이트 + 다크 텍스트 */
.gab-nav-bar {
    background: #fff;
    border-bottom: 1px solid var(--gab-gray-200);
}
.gab-nav-item { color: var(--gab-gray-600); font-weight: 600; }
.gab-nav-item:hover { color: var(--gab-primary-600); background: var(--gab-primary-50); }
.gab-nav-item.is-active { color: var(--gab-primary-600); }
.gab-nav-item.is-active::after { background: var(--gab-primary-600); }

/* 상단 띠: 네이비 유지 (화이트 헤더와 대비) */
.gab-top-bar { background: var(--gab-navy-900); }

/* 언어 스위처 */
.gab-lang-trigger { color: rgba(255, 255, 255, 0.85); }
.gab-lang-trigger:hover { color: #fff; }

/* ===== 검색 자동완성 (STEP 7) ===== */
.gab-header-search { position: relative; }
.gab-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 7px; box-shadow: 0 24px 56px rgba(15,23,42,0.16); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s; z-index: 200; }
.gab-suggest.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.gab-suggest-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; transition: background .12s; }
.gab-suggest-item:hover { background: var(--gab-gray-50); }
.gab-suggest-thumb { width: 48px; height: 36px; border-radius: 4px; object-fit: cover; background: var(--gab-gray-100); flex-shrink: 0; }
.gab-suggest-thumb--ph { display: flex; align-items: center; justify-content: center; color: var(--gab-gray-400); }
.gab-suggest-title { flex: 1; font-size: 14px; color: var(--gab-gray-800); }
.gab-suggest-title b { color: var(--gab-primary-600); }
.gab-suggest-price { font-size: 13px; font-weight: 800; color: var(--gab-gray-900); font-feature-settings: 'tnum' 1; }
.gab-suggest-all { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--gab-gray-50); color: var(--gab-primary-700); font-size: 13px; font-weight: 700; border-top: 1px solid var(--gab-gray-100); }
.gab-suggest-all:hover { background: var(--gab-primary-50); }

/* STEP 10: 자동완성 모델 행 */
.gab-suggest-item--model .gab-suggest-thumb--ph { background: var(--gab-primary-50); color: var(--gab-primary-600); }
.gab-suggest-kind { font-size: 11px; font-weight: 700; color: var(--gab-primary-600); background: var(--gab-primary-50); padding: 3px 9px; border-radius: 999px; flex-shrink: 0; }

/* ===== STEP 12: 메가메뉴 (전체 서비스 허브) ===== */
.gab-nav-bar { position: relative; }
.gab-nav-bar > .gab-container, .gab-nav-bar .gab-nav-list { position: relative; }
.gab-mega-trigger { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 5px; font-size: 13.5px; font-weight: 700; color: var(--gab-gray-700); background: var(--gab-gray-50); border: 1px solid var(--gab-gray-200); transition: all .18s; }
.gab-mega-trigger:hover, .gab-mega-trigger.is-on { background: var(--gab-primary-600); color: #fff; border-color: var(--gab-primary-600); }
.gab-mega-caret { font-size: 11px; transition: transform .2s; }
.gab-mega-trigger.is-on .gab-mega-caret { transform: rotate(180deg); }

.gab-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--gab-gray-200); box-shadow: 0 30px 60px rgba(15,23,42,0.14); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all .22s; z-index: 150; }
.gab-mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.gab-mega-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 22px 0 26px; }
.gab-mega-item { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 6px; transition: all .15s; }
.gab-mega-item:hover { background: var(--gab-primary-50); }
.gab-mega-ic { width: 36px; height: 36px; border-radius: 5px; background: var(--gab-gray-50); border: 1px solid var(--gab-gray-100); display: flex; align-items: center; justify-content: center; color: var(--gab-primary-600); font-size: 15px; flex-shrink: 0; transition: all .15s; }
.gab-mega-item:hover .gab-mega-ic { background: var(--gab-primary-600); color: #fff; border-color: var(--gab-primary-600); }
.gab-mega-name { font-size: 13.5px; font-weight: 600; color: var(--gab-gray-700); }
.gab-mega-item:hover .gab-mega-name { color: var(--gab-primary-700); }
@media (max-width: 1100px) { .gab-mega-trigger { display: none; } .gab-mega { display: none; } }

/* ===== Autowini식 Find Items 메가 드롭다운 ===== */
.gab-nav-has-mega { position: static; }
.gab-findmega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--gab-gray-200); box-shadow: 0 30px 60px rgba(15,23,42,0.16); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all .22s; z-index: 160; }
.gab-nav-has-mega:hover .gab-findmega { opacity: 1; visibility: visible; transform: translateY(0); }
.gab-fm-grid { display: grid; grid-template-columns: 1.4fr 1fr 0.9fr; gap: 36px; padding: 28px 0 32px; }
.gab-fm-col--cta { border-left: 1px solid var(--gab-gray-100); padding-left: 32px; }
.gab-fm-title { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gab-primary-600); margin-bottom: 14px; }
.gab-fm-makes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; }
.gab-fm-make { font-size: 13.5px; color: var(--gab-gray-700); padding: 6px 8px; border-radius: 4px; transition: all .12s; }
.gab-fm-make:hover { background: var(--gab-primary-50); color: var(--gab-primary-700); }
.gab-fm-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.gab-fm-type { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 6px; border: 1px solid var(--gab-gray-100); transition: all .15s; }
.gab-fm-type i { font-size: 22px; color: var(--gab-gray-600); transition: color .15s; }
.gab-fm-type span { font-size: 11.5px; font-weight: 600; color: var(--gab-gray-600); }
.gab-fm-type:hover { border-color: var(--gab-primary-400, #4E72A2); background: var(--gab-primary-50); }
.gab-fm-type:hover i, .gab-fm-type:hover span { color: var(--gab-primary-700); }
.gab-fm-fuels { display: flex; flex-wrap: wrap; gap: 8px; }
.gab-fm-fuel { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--gab-gray-200); font-size: 12.5px; font-weight: 600; color: var(--gab-gray-600); transition: all .15s; }
.gab-fm-fuel:hover { border-color: var(--gab-primary-400, #4E72A2); color: var(--gab-primary-700); background: var(--gab-primary-50); }
.gab-fm-cta-card { background: linear-gradient(150deg, var(--gab-navy-800), var(--gab-navy-900)); border-radius: 7px; padding: 24px; color: #fff; height: 100%; }
.gab-fm-cta-card > i { font-size: 26px; color: var(--gab-accent-400, #DC4A3E); }
.gab-fm-cta-t { font-size: 17px; font-weight: 800; margin-top: 12px; }
.gab-fm-cta-d { font-size: 12.5px; color: rgba(255,255,255,0.6); margin-top: 6px; line-height: 1.5; }
.gab-fm-cta-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 10px 18px; border-radius: 5px; background: linear-gradient(135deg, #234A7C, #21201D); color: #fff; font-size: 13px; font-weight: 800; transition: all .18s; }
.gab-fm-cta-btn:hover { transform: translateX(3px); }
@media (max-width: 1100px) { .gab-findmega { display: none; } }

/* Find Items 메가 위치 보정 (nav-bar 기준 full width) */
.gab-nav-bar { position: relative; }
.gab-nav-has-mega { position: static !important; }
.gab-nav-bar .gab-findmega { left: 0; right: 0; top: 100%; }
/* hover 끊김 방지: 트리거~패널 사이 브릿지 */
.gab-nav-has-mega::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; display: none; }
.gab-nav-has-mega:hover::after { display: block; }

/* ============================================================
   Step3·4: 모바일 햄버거 + 드로어 + 반응형 보강
   ============================================================ */
.gab-burger { display:none; width:42px; height:42px; align-items:center; justify-content:center; background:var(--gab-gray-50); border:1px solid var(--gab-gray-200); border-radius: 5px; color:var(--gab-gray-700); font-size:22px; cursor:pointer; flex-shrink:0; margin-right:4px; }
.gab-burger:hover { background:var(--gab-gray-100); color:var(--gab-primary-600); }

.gab-drawer-overlay { position:fixed; inset:0; background:rgba(10,22,40,.5); opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; z-index:1450; }
.gab-drawer-overlay.is-open { opacity:1; visibility:visible; }
.gab-drawer { position:fixed; top:0; left:0; bottom:0; width:300px; max-width:84vw; background:#fff; z-index:1451; transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; box-shadow:4px 0 30px rgba(0,0,0,.18); }
.gab-drawer.is-open { transform:translateX(0); }
.gab-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--gab-gray-100); }
.gab-drawer-logo { font-weight:900; font-size:15.5px; color:var(--gab-gray-900); }
.gab-drawer-logo .accent { color:var(--gab-primary-600); }
.gab-drawer-head button { background:none; border:0; font-size:21px; color:var(--gab-gray-500); cursor:pointer; line-height:1; }
.gab-drawer-search { display:flex; align-items:center; gap:10px; margin:14px 20px 6px; padding:11px 14px; background:var(--gab-gray-50); border:1px solid var(--gab-gray-200); border-radius: 5px; }
.gab-drawer-search i { color:var(--gab-gray-400); }
.gab-drawer-search input { border:0; background:none; outline:none; flex:1; font-size:14px; color:var(--gab-gray-800); min-width:0; }
.gab-drawer-nav { flex:1; padding:8px 0; overflow-y:auto; }
.gab-drawer-nav a { display:flex; align-items:center; gap:14px; padding:14px 22px; color:var(--gab-gray-800); text-decoration:none; font-weight:600; font-size:15px; transition:background .12s; }
.gab-drawer-nav a:hover { background:var(--gab-primary-50); color:var(--gab-primary-700); }
.gab-drawer-nav a i { font-size:19px; color:var(--gab-primary-500); width:22px; text-align:center; }
.gab-drawer-nav .gab-nav-badge { margin-left:auto; }
.gab-drawer-foot { padding:16px 22px; border-top:1px solid var(--gab-gray-100); display:flex; flex-direction:column; gap:10px; }
.gab-drawer-login { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; background:var(--gab-primary-600); color:#fff; border-radius: 5px; font-weight:700; text-decoration:none; }
.gab-drawer-login:hover { background:var(--gab-primary-700); }
.gab-drawer-join { text-align:center; color:var(--gab-gray-600); text-decoration:none; font-size:14px; font-weight:600; padding:8px; }
.gab-drawer-join:hover { color:var(--gab-primary-600); }

/* RTL: 드로어 오른쪽에서 */
[dir="rtl"] .gab-drawer { left:auto; right:0; transform:translateX(100%); box-shadow:-4px 0 30px rgba(0,0,0,.18); }
[dir="rtl"] .gab-drawer.is-open { transform:translateX(0); }
[dir="rtl"] .gab-burger { margin-right:0; margin-left:4px; }

/* 표시 전환: 1024px 이하 = 햄버거, 네비바 숨김 */
@media (max-width:1024px){
  .gab-burger { display:flex; }
  .gab-nav-bar { display:none; }
}
/* 좁은 모바일: 헤더 검색은 드로어로 일원화 */
@media (max-width:560px){
  .gab-header-search { display:none; }
  .gab-main-header-inner { gap:10px; }
}
@media (prefers-reduced-motion: reduce){
  .gab-drawer, .gab-drawer-overlay { transition:none; }
}