/* 공통 폰트 및 아이콘 로드 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* 공통 변수 */
:root {
    --primary-color: #00c3ff;
    --primary-dark: #0056b3;
    --badge-blue: #00c3ff;
    --badge-orange: #ff9f43;
    --badge-grey: #f1f3f5;
    --text-dark: #111;
    --text-gray: #666;
    --text-light: #999;
    --border-color: #eef0f2;
    --bg-light: #f8f9fa;
    --red-price: #e30000;
}

/* 기본 리셋 */
* { margin: 0; padding: 0; box-sizing: border-box; letter-spacing: -0.03em; }
body, button, input, select, textarea { font-family: 'Noto Sans KR', sans-serif; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------------- 공통 헤더 ---------------- */
header { background-color: #fff; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 999; }
.header-inner { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; }
.logo img { height: 84px; display: block; }
.header-right { display: flex; align-items: center; gap: 40px; }
.nav-menu { display: flex; gap: 32px; }
.nav-menu a { font-size: 16px; font-weight: 500; color: var(--text-dark); }
.nav-menu a:hover { color: var(--primary-color); }
.util-menu { display: flex; align-items: center; gap: 12px; }
.util-menu a { font-size: 14px; color: #666; font-weight: 400; }
.util-menu .divider { font-size: 12px; color: #ddd; user-select: none; }

/* ---------------- 공통 하단 상담 배너 ---------------- */
.consult-banner { background-color: #f4f4f4; padding: 50px 0; margin-top: 40px; }
.consult-inner { display: flex; justify-content: center; align-items: center; gap: 80px; }
.consult-text h2 { font-size: 24px; font-weight: 400; color: #333; line-height: 1.4; }
.consult-text h2 strong { font-weight: 700; color: #111; }
.consult-buttons { display: flex; flex-direction: column; gap: 12px; }
.btn-row { display: flex; gap: 12px; justify-content: flex-start; }
.btn-row a { background-color: #4a4a4a; color: #fff; padding: 12px 22px; border-radius: 30px; font-size: 13px; font-weight: 500; transition: background 0.2s; display: inline-flex; align-items: center; }
.btn-row a:hover { background-color: #222; }

/* ---------------- 공통 공지사항 띠배너 ---------------- */
.notice-ticker { border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; background-color: #fff; padding: 22px 0; }
.ticker-inner { display: flex; justify-content: space-between; align-items: center; padding: 0 40px; }
.ticker-left { display: flex; align-items: center; gap: 30px; flex: 1; }
.ticker-label { font-size: 15px; font-weight: 700; color: #111; display: flex; align-items: center; gap: 8px; }
.ticker-title { font-size: 14px; color: #666; text-decoration: none; transition: color 0.2s; }
.ticker-title:hover { color: #111; text-decoration: underline; }
.ticker-date { font-size: 14px; color: #999; }

/* ---------------- 공통 푸터 카피라이트 ---------------- */
footer { background-color: #fff; padding: 30px 0; }
.footer-bottom { font-size: 12px; color: #888; line-height: 1.7; }
.footer-links { margin-bottom: 12px; }
.footer-links a { margin-right: 20px; font-weight: 500; color: #555; }

/* =========================================
   새롭게 개선된 뱃지 (Badges) 스타일
========================================= */
.badges { display: flex; justify-content: center; gap: 6px; margin-bottom: 15px; flex-wrap: wrap; }
.badge {
    color: #fff; font-size: 12px; padding: 5px 12px;
    border-radius: 20px; font-weight: 700;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* 단어별 자동 매칭 컬러 클래스 */
.badge-cyan   { background: #00c3ff; }
.badge-red    { background: #ff4757; }
.badge-green  { background: #2ed573; }
.badge-orange { background: #ffa502; }
.badge-purple { background: #9b59b6; }
.badge-dark   { background: #34495e; }
.badge-immediate { background: #ff6b00; color: #fff; border-color: #e75f00; }
.badge-soldout { background: #606873; color: #fff; border-color: #505761; }

/* 구분 및 최근본 차량 뱃지 (시안 20260708_134502.png 완벽 반영) */
.card-meta { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 12px; padding-left: 5px; }
.label-recent {
    background: var(--badge-orange); color: #fff; font-size: 13px;
    padding: 6px 14px; border-radius: 20px; font-weight: 700;
    box-shadow: 0 2px 6px rgba(255,159,67,0.3);
}
.type-badge {
    background: var(--badge-grey); color: #333; font-size: 13px;
    padding: 6px 14px; border-radius: 20px; font-weight: 700;
}
.wish-icon { font-family: 'Font Awesome 6 Free' !important; font-weight: 900 !important; font-size: 18px; color: #e0e0e0; cursor: pointer; }
.wish-icon.active { color: #ff3b3b; }

/* 반응형 */
@media (max-width: 1024px) {
    .consult-inner { flex-direction: column; text-align: center; gap: 30px; }
    .btn-row { justify-content: center; flex-wrap: wrap; }
}
/* --- 데스크톱에서는 햄버거 버튼 숨김 --- */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    color: #333;
}

/* --- 모바일(768px 이하) 반응형 처리 --- */
@media (max-width: 768px) {
    /* ... 앞서 변경한 헤더 및 1차 메뉴 스타일 유지 ... */

    .header-inner {
        position: relative;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-right: 10px;
    }

    .hamburger-btn {
        display: block;
        padding: 10px;
        margin-right: 5px;
    }

    .header-right {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        padding: 0;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        border-top: 1px solid var(--border-color);
        z-index: 999;
    }

    .header-right.active {
        display: flex;
    }

    .nav-menu {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .nav-menu > li {
        width: 100%;
        border-bottom: 1px solid #f1f3f5;
    }

    .nav-menu > li > a {
        display: block;
        padding: 15px 20px; /* 대메뉴의 왼쪽 여백은 20px */
        width: 100%;
    }

    /* ===================================================
       ★ 서브메뉴 좌측 정렬 / 들여쓰기 / 대시(-) 기호 추가
       =================================================== */
    .nav-menu .sub-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
        border: none !important;
        box-shadow: none !important;
        background-color: #f8f9fa !important; /* 서브메뉴 구분을 위한 배경색 (흰색을 원하시면 #fff로 변경 가능) */
        margin: 0 !important;

        text-align: left !important;         /* 1. 확실하게 좌측 정렬 */
        padding: 10px 0 10px 40px !important; /* 2. 대메뉴(20px)보다 안으로 들어가도록 좌측 여백을 40px로 조정 */
    }

    .nav-menu .sub-menu li {
        text-align: left !important;
        list-style: none !important;
    }

    .nav-menu .sub-menu li a {
        display: block !important;
        text-align: left !important;
        padding: 8px 0 !important; /* 불필요한 좌우 여백을 없애고 위아래 간격만 유지 */
        color: #555 !important;
        font-size: 14px !important;
    }

    /* 3. CSS 가상 요소를 이용해 메뉴 명 앞에 기호 삽입 */
    .nav-menu .sub-menu li a::before {
        content: "- "; /* 만약 도트를 원하시면 "• " 코드로 변경하시면 됩니다 */
        margin-right: 6px; /* 기호와 글자 사이의 간격 */
        color: #888; /* 기호 색상 */
        font-weight: 500;
    }

    /* ... util-menu 및 하단 반응형 스타일 유지 ... */
    .util-menu {
        padding: 20px;
        width: 100%;
        justify-content: flex-start;
        background-color: #fff;
    }
    .logo img { height: 50px; }
    .ticker-inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 10px;}
}

.site-footer {
    margin-top: 60px;
}

.site-footer .container {
    border-top: 1px solid #000000;
    padding-top: 35px;
}

/* 1차 메뉴 기준점 설정 */
.nav-menu > li.has-sub {
    position: relative;
}

/* 2차 메뉴 기본 숨김 및 디자인 설정 */
.nav-menu .sub-menu {
    display: none; /* 기본적으로 숨김 */
    position: absolute;
    top: 100%; /* 1차 메뉴 바로 아래 위치 */
    left: 50%;
    transform: translateX(-50%); /* 가운데 정렬 */
    background-color: #ffffff;
    border: 1px solid #dddddd;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    min-width: 120px;
    padding: 10px 0;
    z-index: 1000;
    text-align: center;
}

.nav-menu .sub-menu li {
    list-style: none;
}

.nav-menu .sub-menu li a {
    display: block;
    padding: 8px 15px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
}

.nav-menu .sub-menu li a:hover {
    background-color: #f5f5f5; /* 마우스 오버 시 배경색 */
}

/* active 클래스가 붙으면 보이게 처리 */
.nav-menu .sub-menu.active {
    display: block;
}