/* ==========================================================================
   1. ZERONE 헤더 기본 스타일 (투명 & 고정)
   ========================================================================== */
.zerone-header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 999; 
    background: transparent; 
    transition: all 0.3s ease, top 0.3s ease !important; /* 상하 이동 애니메이션 추가 */
    border-bottom: 1px solid rgba(255,255,255,0.1); 
}
.zerone-header .header-inner { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; padding: 0 40px; height: 80px; }

/* 로고 이미지 기본 설정 및 다크 로고 숨김 */
.zerone-header .logo img { max-height: 35px; transition: opacity 0.3s ease; }
.zerone-header .logo .logo-sticky { display: none; } 

/* 메뉴 및 유틸리티 아이콘 텍스트 (초기: 흰색) */
.zerone-header .gnb-list { display: flex; gap: 40px; margin: 0; padding: 0; list-style: none; }
.zerone-header .gnb-list a { color: #fff; font-size: 16px; font-weight: 500; text-decoration: none; transition: color 0.3s; }
.zerone-header .util-menu { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; align-items: center; }
.zerone-header .util-menu a { color: #fff; font-size: 16px; text-decoration: none; transition: color 0.3s; }

/* 스크롤 시 고정 스타일 (배경: 흰색, 텍스트: 검정) */
.zerone-header.is-sticky { background: #fff; box-shadow: 0 2px 15px rgba(0,0,0,0.08); border-bottom: none; }
.zerone-header.is-sticky .gnb-list a, 
.zerone-header.is-sticky .util-menu a { color: #111; }

/* 스크롤 시 로고 교체 */
.zerone-header.is-sticky .logo .logo-default { display: none; } 
.zerone-header.is-sticky .logo .logo-sticky { display: inline-block; } 

/* 서브페이지 본문 여백 */
#wrapper { padding-top: 0; }

/* ==========================================================================
   2. 상단 고정 띠 배너 CSS
   ========================================================================== */
#topNoticeBanner {
    display: none; 
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    background: #111; 
    color: #fff;
    z-index: 10000; 
    box-sizing: border-box;
}
#topNoticeBanner .banner-container {
    max-width: 1400px;
    min-height: 50px; /* PC 기본 높이 */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}
#topNoticeBanner .banner-space {
    flex: 1;
}
#topNoticeBanner .banner-content {
    flex: 2;
    text-align: center;
    letter-spacing: 0.5px;
}
#topNoticeBanner .banner-ctrl {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
    color: #aaa;
    justify-content: flex-end;
}
#topNoticeBanner .chk-label { cursor: pointer; display: flex; align-items: center; gap: 5px; margin: 0; }
#topNoticeBanner #chkDayClose { cursor: pointer; margin: 0; width: 14px; height: 14px; }
#topNoticeBanner #btnBannerClose {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-top: -2px;
}
#topNoticeBanner .content-link {
    color: #ffcc00;
    text-decoration: underline;
    margin-left: 8px;
    font-weight: bold;
}

/* ==========================================================================
   3. 모바일 반응형 완벽 대응 (헤더 + 띠 배너 완전 결합)
   ========================================================================== */
@media (max-width: 768px) {
    /* 헤더 모바일 최적화 */
    .zerone-header .header-inner { padding: 0 20px; height: 60px; }
    .zerone-header .gnb { display: none; } 
    .zerone-header .util-menu { gap: 15px; } 
    
    /* 띠 배너 모바일 최적화 (공간 제약 완벽 돌파형 가로 배열) */
    #topNoticeBanner .banner-container {
        padding: 8px 10px;
        min-height: 45px;
        gap: 5px;
    }
    #topNoticeBanner .banner-space {
        display: none !important; /* 모바일에서는 여백 제거하여 글자 가로 공간 대폭 확보 */
    }
    #topNoticeBanner .banner-content {
        flex: 1;
        text-align: left; /* 모바일 가독성을 위해 좌측 정렬 */
        font-size: 0.8rem;
        line-height: 1.3;
        word-break: keep-all;
    }
    #topNoticeBanner .banner-ctrl {
        flex: none; /* 너비 보존 */
        gap: 8px;
        font-size: 0.75rem;
    }
    #topNoticeBanner #btnBannerClose {
        font-size: 1.4rem;
    }
}