body:after { display:none; }
main { min-height:100vh; }
body.scroll-fixed {position: fixed;width: 100%;overflow: hidden;}

/* 헤더 - header */
.header { position:fixed; top:0; left:0; width:100%; z-index:101; }
.header nav { padding:0 80px; display:flex; align-items:center; justify-content:space-between; transition:all .3s; }
.header .logo { position:relative; max-width:100px; width:100px; height:35px; margin:0; }
.header .logo img { position:absolute; top:0; left:0; transition:all .3s; }
.header .logo img.black { opacity:0; }
.header ul { display:flex; align-items:center; gap:0 50px; }
.header ul > li.depth1 > a { display:block; color:#fff; transition:all .3s; padding:30px 0; font-weight:600; font-size:18px; }
.header ul > li.depth1 { position:relative; }
.header ul > li.depth1 .depth2 { border-top:2px solid #344767; opacity:0; pointer-events: none; transition:all .3s; position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); background-color: #fff; flex-direction: column; width: 250px; border-radius:10px; text-align: center; padding:15px 0; box-shadow:8px 8px 8px rgba(0,0,0,.1); }
.header ul > li.depth1 .depth2 > li > a { display:block; padding:8px 20px; }
.header ul > li.depth1:hover .depth2 { opacity:1; pointer-events: auto; top:100%; }
.header.active ul > li > a { color:#000; }
.header.active .logo img.white { opacity:0; }
.header.active .logo img.black { opacity:1; }
.header.active nav { background-color:#fff; box-shadow:8px 8px 8px 0px rgba(0,0,0,.1); }
.header ul > li > a .hover-text { position:relative; font-weight:500; pointer-events: none; }
.header ul > li > a .hover-text span { display:block; transition: opacity .4s, transform .7s; transition-timing-function: cubic-bezier(.16, .86, .32, 1.1); }
.header ul > li > a .hover-text .after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 10px); width: 100%; opacity:0; pointer-events:none; }
.header ul > li.depth1:hover > a .before,
.header ul > li > a:hover .before { transform: translateY(-20px); opacity: 0; pointer-events: none; }
.header ul > li.depth1:hover > a .after,
.header ul > li > a:hover .after { transform: translate(-50%, -50%); opacity:1; pointer-events: auto; color:#0A62F2; }
.header:hover ul > li > a { color:#000; }
.header:hover .logo img.white { opacity:0; }
.header:hover .logo img.black { opacity:1; }
.header:hover nav { background-color:#fff; box-shadow:8px 8px 8px 0px rgba(0,0,0,.1); }
.hamburger-btn { display:none; }

/* 상단 공통배너 */
.page-banner { position:relative; min-height: 375px; }
.page-banner .title { animation:textAnimation .3s .3s ease-in-out both; opacity: 0; position:absolute; top:55%; left:50%; transform:translate(-50%, -50%); max-width:1400px; width:100%; font-size:40px; font-weight:700; text-align:center; color:#fff; z-index:1; }
@keyframes textAnimation {
    0% { opacity:0; top:55%; }
    100% { opacity:1; top:50%; }
}

/* 데이터테이블 */
.dataTable-wrapper .dt-select-box { display:none; }

/* 탑버튼 */
#top-btn { opacity:0; visibility: hidden; pointer-events: none; position:fixed; bottom:20px; right:20px; display:flex; align-items:center; justify-content: center; width:45px; height:45px; border-radius:5px; background: #3480fe; cursor: pointer; box-shadow: 0 4px 6px rgb(71 90 230 / 20%); transition: all .3s; z-index:99; }
#top-btn:hover { background: #0A62F2; transform: translateY(-5px); }
html.scroll-down #top-btn { opacity: 1; visibility: visible; pointer-events: auto; }
html #top-btn.fixed-bottom { opacity: 1; visibility: visible; pointer-events: auto; position:absolute; bottom:auto; top:20px; }

/* 푸터 - footer */
.site-footer { position:relative; background-color:#1A1A1A; }
.site-footer * { color:#fff; font-size:13px; }
.site-footer .foot-wrap { display:flex; align-items: flex-end; justify-content: space-between; max-width:1400px; margin:0 auto; padding:57px 0 40px; }
.site-footer .foot-wrap .left .logo { max-width:68px; }
.site-footer .foot-wrap .left .info { margin:22px 0 0; }
.site-footer .foot-wrap .left .info > div + div { margin:8px 0 0; }
.site-footer .foot-wrap .left .info .company { font-weight:600; }
.site-footer .foot-wrap .right { display:flex; flex-direction:column; gap:10px 0; }
.site-footer .foot-wrap .right > a { display:flex; align-items:center; gap:0 6px; padding:8px 20px; border:1px solid #fff; border-radius:4px; }
.site-footer .foot-wrap .right > a img { max-width:16px; }
.site-footer .foot-copy { border-top:1px solid #818181; }
.site-footer .foot-copy .copy-cover { display:flex; align-items: center; justify-content: space-between; max-width:1400px; margin:0 auto; padding:18px 0 20px; }
.site-footer .foot-copy .copy-cover .menu-privacy > a.privacy { font-weight:700; }
.site-footer .foot-copy .copy-cover .menu-privacy > a + a { position:relative; padding-left:20px; }
.site-footer .foot-copy .copy-cover .menu-privacy > a + a:after { content:''; display:block; position:absolute; top:50%; left:10px; transform:translateY(-50%); width:1px; height:12px; background-color:#fff; }

/* 셀렉트박스 */
/* 커스텀 셀렉트 컨테이너 */
.custom-select-box { min-width:120px; max-width:120px; position: relative; width: 100%; cursor: pointer; background: #fff; border-radius: 8px; font-size: 16px; text-align: left; }
/* 선택된 값이 보여지는 영역 */
.selected-value { padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s; }
.selected-value:hover { border-color: #94a3b8; }
.selected-value img { width:14px; height:14px; transition:all .3s; }
.custom-select-box.active .selected-value img { transform:rotate(180deg); }
/* 옵션 리스트 (기본 숨김) */
.options-list { position: absolute; top: calc(100% + 5px); left: 0; width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 50; display: none; max-height: 300px; overflow-y: auto; }
/* 개별 옵션 */
.option-item { padding: 10px 12px; transition: background 0.2s; }
.option-item:hover { background: #f1f5f9; color: #0057E7; /* Argon 테마 포인트 컬러 */ }
.option-item.selected { color: #0057E7; /* Argon 테마 포인트 컬러 */ }

/* =========================
   Header & Footer Responsive
========================= */
@media (max-width: 1440px) {
    .site-footer .foot-wrap { max-width:100%; padding:57px 20px 40px; }
    .site-footer .foot-copy { padding:0 20px; }
}

/* 모바일/태블릿 헤더 공통 (1024px 이하) */
@media (max-width: 1024px) {
    body.scroll-fixed {position: fixed;width: 100%;overflow: hidden;}
    header:has(#hamburger.open):after { content:''; display:block; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.6); z-index:10; }

    /* 1. 헤더 기본 레이아웃 */
    .header nav { padding: 0 20px; height: 70px; display: flex; align-items: center; justify-content: space-between; }
    .header .logo { max-width: 80px; height: 24px; }
    .header:not(.active):hover ul > li > a { color:#000; }
    .header:not(.active):hover .logo img.white { opacity:1; }
    .header:not(.active):hover .logo img.black { opacity:0; }
    .header:not(.active):hover nav { background-color:transparent; box-shadow:none; }

    /* 2. 사이드바 메뉴 (상위 선택자 nav를 붙여 우선순위 확보) */
    .header nav > ul { position: fixed; top: 0; right: -300px; width: 300px; height: 100vh; background: #fff; display: block; padding: 80px 0 40px; transition: right 0.3s ease-in-out; z-index: 101; box-shadow: -5px 0 20px rgba(0,0,0,0.15); overflow-y: auto; }

    /* 사이드바 활성화 */
    .header nav > ul.open { right: 0; }

    /* 3. 메뉴 아이템 레이아웃 (데스크톱의 padding/display 덮어쓰기) */
    .header nav ul > li.depth1 { width: 100%; border-bottom: 1px solid #f1f5f9; height: auto; }
    .header nav ul > li.depth1 > a { display: flex; padding: 16px 25px; height: auto; line-height: 1.4; color: #1e293b; justify-content: space-between; align-items: center; }

    /* 화살표 아이콘 */
    .header nav ul > li.depth1 > a:has(+ .depth2):after { content: ''; display: block; width: 20px; height: 20px; background: url('/images/ico/arrow-down.png') no-repeat center/cover; transition: all .3s; }
    .header nav ul > li.depth1.active > a:has(+ .depth2):after { transform: rotate(180deg); }

    /* 데스크톱용 텍스트 애니메이션 초기화 (absolute 해제) */
    .header nav ul .hover-text { display: block; height: auto; }
    .header ul > li.depth1:hover > a .before,
    .header ul > li > a:hover .before,
    .header nav ul .hover-text .before { position: static; transform: none; opacity: 1; }
    .header nav ul .hover-text .after { display: none; }

    /* 4. 2뎁스 아코디언 스타일 (상속 차단) */
    .header nav ul > li.depth1 .depth2 { position: static; display: none; width: 100%; background: #f8fafc; transform: none; opacity: 1; padding: 5px 0; border-top: none; border-radius: 0; box-shadow: none; transition: none; }
    .header nav ul > li.depth1 .depth2 > li > a { padding: 12px 35px; font-size: 16px; color: #64748b; text-align: left; }
    .header nav ul > li.depth1 .depth2 > li > a .hover-text:hover { color:#3480fe; }

        /* 햄버거 버튼 및 기타 (기존과 동일) */
    .hamburger-btn { display: block; width: 30px; height: 22px; position: relative; background: none; border: none; cursor: pointer; z-index: 101; }
    .hamburger-btn span { display: block; position: absolute; height: 2px; width: 100%; background: #fff; border-radius: 9px; left: 0; transition: .25s ease-in-out; }
    .header.active .hamburger-btn span { background: #000; }

    .hamburger-btn span:nth-child(1) { top: 0; }
    .hamburger-btn span:nth-child(2) { top: 10px; }
    .hamburger-btn span:nth-child(3) { top: 20px; }

    .hamburger-btn.open { position:absolute; top:24px; right:20px; }
    .hamburger-btn.open span { background-color:#000; }
    .hamburger-btn.open span:nth-child(1) { top: 10px; transform: rotate(135deg); }
    .hamburger-btn.open span:nth-child(2) { opacity: 0; left: -60px; }
    .hamburger-btn.open span:nth-child(3) { top: 10px; transform: rotate(-135deg); }

    .page-banner { min-height: 250px; }
    .page-banner .title { font-size: 28px; width: 90%; }

    .site-footer .foot-wrap { flex-direction: column; align-items: flex-start; padding: 40px 20px; gap: 30px; }
    .site-footer .foot-wrap .right { flex-direction:row; width: 100%; gap:0 10px; }
    .site-footer .foot-wrap .right > a { flex:1 1 auto; justify-content: center; }
    .site-footer .foot-copy .copy-cover { flex-direction: column; gap: 15px; padding: 20px 0; text-align: center; }
    #top-btn { width:30px; height:30px; }
    #top-btn img { width:20px; height:20px; }
}