@charset "utf-8";
/* CSS Document */

:root {
        /* colors */
        --brand:#389a80;          /* primary */
        --ink:#333333;            /* headings */
        --text:#787878;           /* body */
        --muted:#999999;
        --line:rgba(0,0,0,.15);
        --panel:#f4f4f4;
        --dark:#2e3a59;           /* deep blue */
        --accent:#e67e25;         /* orange */
        --accent-2:#e8dcc8;       /* sand */
        --plum:#514263;           /* purple */
        --radius:1rem;
        --shadow:0 8px 24px rgba(0,0,0,.06);
        --ff:"Pretendard-Regular","Malgun Gothic","맑은 고딕",Dotum,"돋움",system-ui,sans-serif;
        --ff-b:"Pretendard-Bold","Malgun Gothic","맑은 고딕",Dotum,"돋움",system-ui,sans-serif;
        --ff-sb:"Pretendard-SemiBold","Malgun Gothic","맑은 고딕",Dotum,"돋움",system-ui,sans-serif;
        --w-1:170rem;
        --w-2:150rem;
        --w-3:120rem;
    }

    /* header */
    #hdTop .top .inner2 {
        height: 11rem;
        position: relative;
    }
    #hdTop .top .inner2 {
        height: 11rem;
        position: relative;
    }
    #hdTop .top {
        position: relative;
        background-color: #fff;
        border-bottom: .1rem solid var(--line);
        z-index: 10;
    }
    #menuBar {
        position: relative;
        background-color: #fff;
        border-bottom: .5rem solid var(--dark);
        position: relative;
        z-index: 10; /* base above overlay */
    }

    /* join menu */
    .joinMenu {
        position: absolute;
        text-align: right;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        z-index: 12;
    }
    .joinMenu .icon,
    .menu_btn {
        display: inline-block;
        width: 3rem;
        height: 4rem;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
    }
    .menu_btn {
        background-image: url(../../main/images/mobile-icon.png);
    }

    /* menu structure */
    #menuBar .inner2 {
        position: relative;
        overflow: visible;
        text-align: center !important;
    }

    nav {
        position: relative;
        display: inline-block;
        margin: 0 auto;
        z-index: 11;
        transition: right 220ms ease; /* inline style right 변경 시 부드럽게 */
    }
    nav .gnb > li {
        float: left;
        position: relative;
        text-align: center;
        padding: 0 6.5rem;
    }
    nav .gnb.seven > li {
        padding: 0 6rem;
    }
    nav .gnb.eight > li {
        padding: 0 5.5rem;
    }
    nav .gnb > li > a {
        font-family: var(--ff-b);
        font-size: 2rem;
        color: #333;
        position: relative;
        height: 9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }
    nav .gnb > li > a::after {
        content: "";
        width: 0;
        height: .5rem;
        background: var(--accent);
        position: absolute;
        left: 0;
        bottom: -.5rem;
        transition: width .6s;
    }
    nav .gnb > li:hover > a::after {
        width: 100%;
    }
    nav .gnb > li > .depth2 {
        position: absolute;
        width: 100%;
        height: auto;
        padding: 3rem 0;
        display: none;
        cursor: pointer;
        left: 0;
        top: 9.5rem;
        background: transparent;
        border-right: 1px solid rgba(0,0,0,.05);
        z-index: 9; /* above gnbBg & blackBg */
    }
    nav .gnb > li:hover > .depth2,
    nav .gnb > li > .depth2:hover {
        border-top: .1rem solid var(--line);
        background: #f4f4f4;
        transition: background-color .6s ease;
    }
    nav .gnb > li:first-child > .depth2::before {
        content: "";
        position: absolute;
        inset: 0 0 0 0;
        width: .1rem;
        background: rgba(0,0,0,.05);
    }
    nav .gnb > li > .depth2 > li {
        text-align: left;
        padding: 1rem 2.5rem;
    }
    nav .gnb > li > .depth2 > li > a {
        font-size: 1.8rem;
        line-height: 1.4;
        color: #333;
        display: inline-block;
        border-bottom: 1px solid transparent;
    }
    nav .gnb > li > .depth2 > li .depth3 > li {
        position: relative;
        padding-left: 1.5rem;
    }
    nav .gnb > li > .depth2 > li .depth3 > li::before {
        content: "";
        position: absolute;
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
        top: 1.2rem;
        left: .5rem;
        background: #666;
    }
    nav .gnb > li > .depth2 > li .depth3 > li > a {
        color: #666;
        padding: .4rem 0;
        font-size: 1.5rem;
        font-weight: 400;
        display: inline-block;
    }

    /* ===== desktop backdrops ===== */
    .gnbBg {
        position: absolute;
        top: 0;                 /* ✅ 요청사항: 상단부터 시작 */
        left: 0;
        right: 0;
        height: 0;              /* 기본 0 */
        background: #fff;
        z-index: 8;             /* under depth2, above blackBg */
        transition: height .6s; /* height:auto 일 때는 트랜지션 효과가 제한적일 수 있음 */
        border-top: 0 solid transparent;
        border-bottom: 0 solid transparent;
        display: block;
    }
    .gnbBg.on {
        height: auto;           /* ✅ 요청사항: 자동 높이 */
        border-top: .1rem solid var(--line);
        border-bottom: .1rem solid var(--line);
    }

    /* global black overlay (desktop) */
    .blackBg {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 7;             /* below gnbBg & depth2 */
        display: none;
    }
    .blackBg.on {
        display: block;
    }

    header:hover {
        background: #fff;
        transition: background-color .6s ease;
    }

    /* mobile menu hidden by default on desktop */
    header nav .top,
    #menuBar .joinMenu {
        display: none;
    }

    @media (max-width:1299px) {
        /* mobile menu shell */
        #menuBar {
            z-index: auto !important;
        }
        #menuBar .joinMenu {
            display: block;
        }
        header nav {
            position: fixed;
            width: 80%;
            max-width: 38rem;
            right: -38rem;
            top: 0;
            z-index: 1000;
            background: #fff;
            overflow-y: auto;
            height: 100%;
            padding: 0;
            text-align: left;
        }

        header nav { transition: right 220ms ease; }
        /* 아코디언 애니메이션을 JS에서 max-height로 제어하므로 초기값 보장 */
        header nav .gnb > li > .depth2 {  overflow: hidden; transition: max-height 260ms cubic-bezier(.22,.61,.36,1); }

        header nav .top {
            display: block;
            padding: 2rem;
            position: relative;
            background: #fff;
            border-bottom: .1rem solid var(--line);
        }
        header nav .top .img {
            display: block;
            width: 26rem;
        }
        header nav .top .img img {
            width: 100%;
        }
        header nav .menu_close {
            position: absolute;
            right: 2rem;
            top: 50%;
            transform: translateY(-50%);
        }
        header nav .menu_close button {
            width: 1.9rem;
            height: 1.9rem;
            background: url("../main/images/menu_close.png") no-repeat center;
            border: none;
        }
        header nav .gnb > li {
            float: none;
            border-bottom: 1px solid var(--line);
            margin: 0;
            padding: 0 !important;
        }
        header nav .gnb > li > a {
            display: block;
            font-size: 1.8rem;
            font-weight: 400;
            height: auto;
            line-height: 1.3;
            padding: 1.6rem 2rem;
            color: #333;
            text-align: left;
        }
        header nav .gnb > li > a:focus,
        header nav .gnb > li:hover > a {
            background: var(--dark);
            color: #fff;
        }
        header nav .gnb > li > .depth2 {
            display: none;
            position: static;
            background: #f5f5f5;
            padding: 2rem 1rem 2rem 0;
            width: 100%;
            height: auto;
            z-index: auto;
        }
        header nav .gnb > li > .depth2 > li > a {
            position: relative;
            color: #666;
            padding: 0 0 0 1.4rem;
            font-size: 1.6rem;
            line-height: 1.5;
        }
        header nav .gnb > li > .depth2 > li > a:before {
            content: "";
            width: .6rem;
            height: .3rem;
            background: #999;
            display: block;
            position: absolute;
            left: 0;
            top: 1.2rem;
        }

        /* desktop-only cues off on mobile */
        .gnbBg,
        nav .gnb > li > a::after {
            display: none;
        }

        /* mobile backdrop */
        .gnbBg_m {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.7);
            display: none;
            z-index: 10;
        }

        nav .gnb > li > .depth2 > li {
            text-align: left;
            padding: .3rem 2.5rem;
        }
        nav .gnb > li > .depth2 > li .depth3 > li:before {
            display: none;
        }
        header nav .gnb > li > .depth2 > li .depth3 > li > a {
            position: relative;
            color: #666;
            padding: 0 0 0 1rem;
        }
        header nav .gnb > li > .depth2 > li .depth3 > li a:before {
            content: "";
            width: .4rem;
            height: .4rem;
            background: #999;
            display: block;
            position: absolute;
            border-radius: 50%;
            left: 0;
            top: 1.2rem;
        }
    }