/**
 * 상단 고정 배너 스타일
 * - 메인 페이지: 스크롤 시 표시
 * - 서브 페이지: 항상 표시
 */

/* 배너 기본 스타일 - 데스크탑 */
.top-banner {
    position: fixed;
    top: 86px; /* 헤더 높이 (inner 60px + padding 26px) */
    left: 0;
    right: 0;
    z-index: 999; /* 헤더(1000)보다 낮게 - 드롭다운이 위에 표시됨 */
    height: 90px; /* 고정 높이 */
    background: #8B0000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
    overflow: hidden;
}

/* 배너 표시 상태 */
.top-banner.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 배너 링크 */
.top-banner a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* 배너 이미지 - 전체가 보이도록 contain 사용 */
.top-banner img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* ============================================
   서브페이지 전용 배너 위치 (헤더 높이가 다름)
   ============================================ */
.top-banner.sub-banner {
    top: 76px; /* 서브페이지 헤더 높이 */
}

@media (max-width: 1024px) {
    .top-banner.sub-banner {
        top: 72px;
    }
}

@media (max-width: 768px) {
    .top-banner.sub-banner {
        top: 70px;
    }
}

@media (max-width: 480px) {
    .top-banner.sub-banner {
        top: 66px;
    }
}

/* 반응형 - 태블릿 */
@media (max-width: 1024px) {
    .top-banner {
        top: 80px;
        height: 80px;
    }
}

/* 반응형 - 모바일 */
@media (max-width: 768px) {
    .top-banner {
        top: 90px; /* 모바일 헤더 높이 */
        height: 70px;
    }
}

/* 반응형 - 소형 모바일 */
@media (max-width: 480px) {
    .top-banner {
        top: 86px;
        height: 60px;
    }
}

/* ============================================
   서브페이지용 service-nav 위치 조정
   배너가 있을 때 service-nav를 아래로 밀기
   ============================================ */

/* 서브페이지에서 service-nav가 배너 아래에 위치하도록 */
body:has(.top-banner.sub-banner) .service-nav {
    top: 166px !important; /* 서브페이지 헤더(76px) + 배너(90px) */
}

@media (max-width: 1024px) {
    body:has(.top-banner.sub-banner) .service-nav {
        top: 152px !important; /* 헤더(72px) + 배너(80px) */
    }
}

@media (max-width: 768px) {
    body:has(.top-banner.sub-banner) .service-nav {
        top: 140px !important; /* 헤더(70px) + 배너(70px) */
    }
}

@media (max-width: 480px) {
    body:has(.top-banner.sub-banner) .service-nav {
        top: 126px !important; /* 헤더(66px) + 배너(60px) */
    }
}