@charset "utf-8";
/* ==========================================================================
    layout.css — 헤더/GNB/사이트맵·모바일 드로어/서브비주얼/푸터/플로팅/팝업
    브레이크포인트: 1280 / 1024 / 768 / 560 (common.css 표준 — 다른 값 사용 금지)
    1280 전환값은 common.js(사이트맵 강제닫힘)와 반드시 일치해야 한다.
   ========================================================================== */

/* 스킵 네비게이션 */
#skip-nav {
    position: absolute; left: 0; right: 0; top: 0;
    z-index: 9999;
    a{display: block; width: 1px; height: 1px; overflow: hidden; color: #fff; white-space: nowrap; text-align: center;}
    a:focus,
    a:active{width: 100%; height: auto; padding: .5rem; background: var(--ink);}
}

/* 공통 컨테이너 — 186개 뷰에서 사용, 클래스명 변경 금지 */
.wrap {
    position: relative;
    width: 100%;
    max-width: var(--wrap-max);
    margin: 0 auto;
    padding-inline: var(--wrap-pad);
}

.inner {position: relative; width: 100%; max-width: 1280px; margin: 0 auto;
    @media (width <= 1280px) {width: 100%; max-width: calc(100% - 48px);}
    @media (width <= 560px) {width: 100%; max-width: calc(100% - 32px);}
}

/* ==========================================================================
    Header
   ========================================================================== */
header {position: fixed; top: 0; left: 0; width: 100%; z-index: 9;
    & .header-wrap {position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height: var(--header-height); padding: 0 200px; transition: var(--basic-trans);
        & .logo {
            & a {display: block; width: 140px; transition: var(--basic-trans);}
            & a img {width: 100%; filter: brightness(0) invert(1); transition: var(--basic-trans);}
        }
        & .gnb {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 768px;
            & .gnb-list {width: 100%;
                > ul {display: flex;}
                > ul > li {flex: 1;}
                > ul > li > a {display: block; font-size: 18px; font-weight: 500; line-height: var(--header-height); color: var(--white); text-align: center; transition: var(--basic-trans);}
            }
            & .gnb-depth {position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; width: 100vw; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--white); opacity: 0; pointer-events: none; transition: var(--basic-trans);
                > ul {display: flex; width: 100%; max-width: 768px;}
                > ul > li {position: relative; display: flex; flex-direction: column; flex: 1; padding: 12px; text-align: center; border-right: 1px solid var(--line-soft);
                    &::before {content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: var(--point); z-index: 2; transition: var(--basic-trans);}
                    &:hover::before {width: calc(100% - 1px);}
                    &:first-child {border-left: 1px solid var(--line-soft);}
                }
                > ul > li > a {font-size: 15px; font-weight: 500; color: var(--ink-2); padding: 8px 14px; text-align: center; border-radius: var(--radius-sm); transition: var(--basic-trans);
                    &:hover {color: var(--point); background: var(--point-faint);}
                }
            }
        }
        & .menu {
            & .menu-btn {position: relative; display: block; width: 24px; height: 17px; font-size: 0;
                & span {position: absolute; left: 50%; transform: translateX(-50%); display: block; width: 100%; height: 2px; background-color: var(--white); transition: var(--basic-trans);}
                & span:nth-child(1) {top: 0;}
                & span:nth-child(2) {top: 7px;}
                & span:nth-child(3) {top: 7px;}
                & span:nth-child(4) {top: 14px;}
            }
            & .menu-wrap {position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: calc(var(--vh, 1vh) * 85); background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: all 0.3s ease;
                & ul {display: flex; gap: 36px;}
                & ul > li {display: flex; flex-direction: column; gap: 12px; flex: 1; transform: translateY(24px); opacity: 0;
                    &:hover a {color: rgba(255, 255, 255, 0.5);}
                    &:hover a:first-child {color: var(--white);}
                }
                & ul > li > a {font-size: 17px; font-weight: 500; color: var(--white); transition: all 0.3s ease;
                    &:hover {color: var(--white);}
                    &:first-child {font-size: 30px; font-weight: 600; margin: 0 0 24px;}
                }
            }
        }
    }
    /* 스크롤 내릴시 (header-scroll 클래스 추가)*/
    &.header-scroll {border-bottom: 1px solid var(--line-soft);
        & .header-wrap {height: calc(var(--header-height) - 12px); background: var(--white);
            & .logo {
                & a {width: 130px;}
                & a img {filter: none;}
            }
            & .gnb {
                & .gnb-list {
                    > ul > li > a {color: var(--ink); line-height: calc(var(--header-height) - 12px);}
                }
            }
            & .menu {
                & .menu-btn span {background: var(--ink);}
            }
        }
    }
    /* gnb 마우스 오버시 (header-active 클래스 추가) */
    &.header-active {
        & .header-wrap {background: var(--white);
            & .logo {
                & a img {filter: none;}
            }
            & .gnb {
                & .gnb-list {
                    > ul > li > a {color: var(--ink);}
                }
                & .gnb-depth {opacity: 1; pointer-events: visible;}
            }
            & .menu {
                & .menu-btn span {background: var(--ink);}
            }
        }
    }
    /* hm 메뉴 클릭시 (header-on 클래스 추가) */
    &.header-on {
        & .header-wrap {
            & .menu {
                & .menu-btn {z-index: 9;
                    & span {background: var(--white);}
                    & span:nth-child(1) {top: 7px; opacity: 0;}
                    & span:nth-child(2) {transform: translateX(-50%) rotate(45deg);}
                    & span:nth-child(3) {transform: translateX(-50%) rotate(-45deg);}
                    & span:nth-child(4) {top: 7px; opacity: 0;}
                }
                & .menu-wrap {height: var(--view-height); opacity: 1; pointer-events: visible;
                    & ul > li {transform: translateY(0); opacity: 1;
                        &:nth-child(1) {transition: all 0.8s ease;}
                        &:nth-child(2) {transition: all 0.8s 0.2s ease;}
                        &:nth-child(3) {transition: all 0.8s 0.4s ease;}
                        &:nth-child(4) {transition: all 0.8s 0.6s ease;}
                        &:nth-child(5) {transition: all 0.8s 0.8s ease;}
                    }
                }
            }
        }
    }
    @media (width <= 1440px) {
        & .header-wrap {padding: 0 80px;}
    }
    @media (width <= 1280px) {
        & .header-wrap {padding: 0 24px;
            & .logo a {width: 120px;}
            & .gnb {display: none;}
        }
        &.header-scroll {
            & .header-wrap {
                & .logo a {width: 110px;}
            }
        }
    }
    @media (width <= 1024px) {
        & .header-wrap {
            & .menu {
                & .menu-wrap {
                    & ul {flex-direction: column;}
                    & ul > li {flex-direction: row; flex-wrap: wrap;}
                    & ul > li > a:first-child {font-size: 20px; width: 100%; margin: 0;}
                    & ul > li > a {font-size: 16px;}
                }
            }
        }
    }
    @media (width <= 560px) {
        & .header-wrap {
            & .logo a {width: 110px;}
        }
        &.header-scroll {
            & .header-wrap {
                & .logo a {width: 100px;}
            }
        }
    }
}

/* ==========================================================================
    Footer — 라이트 미니멀
   ========================================================================== */
footer {border-top: 1px solid var(--line-soft);
    & .footer-wrap {padding: 48px 0;
        & .footer-con {display: flex; justify-content: space-between;
            & .left {
                > ul {display: flex; flex-direction: column; gap: 24px;}
                > ul > li {
                    & img {width: 130px;}
                    & p {font-size: 17px; font-weight: 600; margin: 0 0 4px;}
                    & span {display: flex; gap: 8px; font-size: 15px; color: var(--ink-2);}
                    & span strong {font-weight: 600;}
                }
            }
            & .right {
                > ul {display: flex; gap: 36px;}
                > ul > li {display: flex; flex-direction: column; gap: 8px;
                    & p {font-size: 17px; font-weight: 700;}
                    & a {font-size: 15px; color: var(--ink-3);}
                }
            }
        }
    }
    & .footer-copy {background: var(--ink); padding: 12px 0;
        & .copy-con {display: flex; align-items: center; gap: 24px; color: rgba(255, 255, 255, 0.4);
            & p {font-size: 13px; flex: 1;}
            & a {font-size: 13px;}
            & strong {font-weight: 500; color: rgba(255, 255, 255, 0.6);}
        }
    }
    @media (width <= 768px) {
        & .footer-wrap {padding: 24px 0;
            & .footer-con {
                & .left {flex: 1;
                    > ul {display: grid; grid-template-columns: repeat(1, 1fr); gap: 16px;}
                    > ul > li img {width: 110px;}
                    > ul > li p {font-size: 15px;}
                    > ul > li span {font-size: 13px;}
                }
                & .right {display: none;}
            }
        }
        & .footer-copy {gap: 16px; padding: 24px 0;
            & .copy-con {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px;}
            & .copy-con p {font-size: 12px; grid-column: 1 / -1; text-align: center;}
            & .copy-con a {font-size: 12px; text-align: center;}
        }
    }
}

/* ==========================================================================
    서브 비주얼 + 서브 네비게이션
   ========================================================================== */
/* 이미지는 head_sub.php 의 --sub-visual-img 로 주입. 이미지가 없으면 --point 그라디언트만 노출 */
.sub-visual {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: calc(var(--vh, 1vh) * 60); overflow: hidden;
    &::before {content: ''; position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); z-index: 2;}
    &.sv321::after {content: ''; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: url("/public/assets/site/img/sub/company-bg.jpg") no-repeat center; background-size: cover; animation: imgZoom 3s ease-in-out; z-index: 1;}
    &.sv325::after {content: ''; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: url("/public/assets/site/img/sub/product-bg.jpg") no-repeat center; background-size: cover; animation: imgZoom 3s ease-in-out; z-index: 1;}
    &.sv329::after {content: ''; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: url("/public/assets/site/img/sub/contact-bg.jpg") no-repeat center; background-size: cover; animation: imgZoom 3s ease-in-out; z-index: 1;}
    &.sv2::after {content: ''; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: url("/public/assets/site/img/sub/community-bg.jpg") no-repeat center; background-size: cover; animation: imgZoom 3s ease-in-out; z-index: 1;}
    &.sv3::after {content: ''; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: url("/public/assets/site/img/sub/guide-bg.jpg") no-repeat center; background-size: cover; animation: imgZoom 3s ease-in-out; z-index: 1;}
    & .sub-txt {position: relative; text-align: center; width: 100%; text-shadow: 0px 0px 8px rgb(0 0 0 / 20%); z-index: 3;
        & span {display: block; font-size: 14px; letter-spacing: 0.5rem; color: rgba(255, 255, 255, 0.5); animation: textFadeDown 0.6s both;}
        & h2 {font-size: 3rem; font-weight: 700; color: var(--white); animation: textFadeDown 0.6s both 0.3s;}
    }
    @media (width <= 1280px) {height: calc(var(--vh, 1vh) * 35);
        & .sub-txt {
            & span {font-size: 13px;}
            & h2 {font-size: 2.6rem;}
        }
    }
    @media (width <= 560px) {
        & .sub-txt {
            & span {letter-spacing: 0.2rem;}
            & h2 {font-size: 2.2rem;}
        }
    }
}

.sub-depth {border-bottom: 1px solid var(--line-soft);
    & ul {display: flex; justify-content: center; gap: 24px;}
    & ul > li {padding: 0 12px;}
    & ul > li a {position: relative; display: block; font-size: 15px; line-height: 54px;
        &.on {font-weight: 600; color: var(--point);}
        &.on::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--point);}
    }
    @media (width <= 1280px) {display: none;}
}

.sub-select {display: none; border-bottom: 1px solid var(--line-soft);
    & .home {border-right: 1px solid var(--line-soft);
        & a {display: flex; justify-content: center; align-items: center; width: 40px; height: 40px;}
        & a i {font-size: 17px;}
    }
    & .navi {position: relative; flex: 1; border-right: 1px solid var(--line-soft);
        & .view {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 40px; padding: 0 12px;
            & p {font-size: 15px;}
            & i {font-size: 14px;}
        }
        & .list {position: absolute; top: 100%; left: 0; display: flex; flex-direction: column; width: 100%; padding: 8px; background: var(--white); border: 1px solid var(--line-soft); box-shadow: var(--shadow-1); border-radius: 0 0 4px 4px; z-index: 9;
            & a {display: block; font-size: 15px; line-height: 1; color: var(--ink-3); padding: 8px; border-radius: 4px;}
            & a:hover {color: var(--ink-2); background: var(--bg-soft);}
        }
    }
    @media (width <= 1280px) {display: flex;}
    @media (width <= 560px) {
        & .home a i {font-size: 15px;}
        & .navi .view p {font-size: 14px;}
        & .navi .list a {font-size: 14px;}
    }
}

/* ==========================================================================
    서브 페이지 골격
   ========================================================================== */
/* 서브비주얼이 없는 페이지(검색·회원 등)는 컨테이너가 고정 헤더 높이를 직접 보정 */
.sub-container {position: relative; min-height: 300px; padding: var(--sub-gap) 0;}
.sub-title {text-align: center; margin: 0 0 36px;
    & p {font-size: 2rem; font-weight: 700;}
    & span {display: block; color: var(--ink-3); margin: 12px 0 0;}
    @media (width <= 1280px) {
            & p {font-size: 1.8rem;}
            & span {font-size: 15px;}
    }
    @media (width <= 768px) {margin: 0 0 24px;
            & p {font-size: 1.6rem;}
            & span {font-size: 14px; margin: 6px 0 0;}
    }
}

/* ==========================================================================
    레이어 팝업
   ========================================================================== */
.div_popup {
    z-index: 99 !important; /* jQuery UI draggable 인라인 z-index 대응 */
    min-width: 320px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-2);
    border: 1px solid var(--line);
}
.div_popup table { width: 100%; }
.div_popup .divpop-img img { width: 100%; }
.div_popup .divpop-bottom { background: var(--bg); }
.div_popup .divpop-bottom a {
    display: inline-block;
    margin: 0 16px; line-height: 42px;
    font-size: 14px; color: var(--ink-2);
    transition: color .15s;
}
.div_popup .divpop-bottom a:hover { color: var(--point, #4F46E5); }
.div_popup .divpop-bottom a.today { float: left; }
.div_popup .divpop-bottom a.close {
    float: right;
    position: relative;
    padding: 0 22px 0 0;
}
.div_popup .divpop-bottom a.close::before,
.div_popup .divpop-bottom a.close::after {
    content: '';
    position: absolute; right: 0; top: 50%;
    width: 15px; height: 1.5px;
    background: var(--ink-2);
    transition: background .15s;
}
.div_popup .divpop-bottom a.close::before { transform: translateY(-50%) rotate(45deg); }
.div_popup .divpop-bottom a.close::after { transform: translateY(-50%) rotate(-45deg); }
.div_popup .divpop-bottom a.close:hover::before,
.div_popup .divpop-bottom a.close:hover::after { background: var(--point, #4F46E5); }

@media (width <= 768px) {
    .div_popup {
        z-index: 999999 !important;
        width: 90% !important;
        top: 50% !important; left: 50% !important;
        transform: translate(-50%, -50%);
    }
}