/**
 * dep2_skins/out_9 스킨 스타일 (아주 심플 - 텍스트 + 액티브 언더라인)
 * - 배경/홈아이콘 없음 (투명)
 * - inner(contents-container) 안에서 우측 정렬
 * - 액티브: 메인컬러 글씨 + 얇은 언더라인
 * - 모바일: 가로 스크롤 (좌측 정렬)
 *
 * CSS 변수 (skin.php에서 주입)
 * --dep2-height / --dep2-height-mo, --dep2-font-size / --dep2-font-size-mo
 * --dep2-font-weight, --dep2-letter-spacing
 * --dep2-active-color (기본 --primary), --dep2-active-bar-color (기본 active 컬러)
 * --dep2-offset-top / -mo, --dep2-margin-bottom / -mo
 */

/* ========================================
   dep2_out_float_wrap (높이 0 래퍼 - flow 차지 안함)
   ★ top_1.php가 out 스킨을 이 래퍼 안에 넣음 → 배치 기준점 필수
   ======================================== */
.dep2_out_float_wrap {
    width: 100%;
    float: left;
    height: 0;
    overflow: visible;
    position: relative;
    z-index: 50;
}

/* ★ out9_area 컨테이너 (absolute - flow 영향 없음, 오프셋으로 위치조절) */
.out9_area.sub2d_menu_out_area {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    margin-top: var(--dep2-offset-top, 0px);
    margin-bottom: var(--dep2-margin-bottom, 0px);
}

/* ★ 바: 배경 완전 투명 (공통 ::before 배경 무력화) */
.sub2d_menu_area.out9_bar {
    width: 100% !important;
    float: left;
    position: relative;
    background-color: transparent !important;
    overflow: visible !important;
}
.sub2d_menu_area.out9_bar:before,
.sub2d_menu_area.out9_bar:after,
.sub2d_menu_area.out9_bar .titgrid:before,
.sub2d_menu_area.out9_bar .titgrid:after,
.sub2d_menu_area.out9_bar .Sub2d_scroller:before,
.sub2d_menu_area.out9_bar .Sub2d_scroller:after {
    display: none !important;
    content: none !important;
}
.sub2d_menu_area.out9_bar .contents-container {
    position: relative;
    background-color: transparent !important;
}
.sub2d_menu_area.out9_bar .home {
    display: none !important;
}

/* ========================================
   PC (768px~)
   ======================================== */
@media only all and (min-width:768px) {
    .sub2d_menu_area.out9_bar .titgrid {
        width: 100% !important;
        height: var(--dep2-height, clamp(50px, 4vw, 64px)) !important;
        display: flex !important;
        justify-content: flex-end !important;   /* ★ inner 안 우측 정렬 */
        align-items: stretch !important;
        position: relative;
        background-color: transparent !important;
        padding: 0 !important;
    }
    .sub2d_menu_area.out9_bar .Sub2d_scroller {
        position: relative;
        height: 100% !important;
        display: flex !important;
        align-items: stretch !important;
        background-color: transparent !important;
    }
    .sub2d_menu_area.out9_bar .Sub2d_viewport {
        height: 100% !important;
        display: flex !important;
        align-items: stretch !important;
        overflow: visible !important;
        padding: 0 !important;
    }
    .sub2d_menu_area.out9_bar .Sub2d_nav {
        display: none !important;
    }

    /* 메뉴 리스트: 우측 정렬 */
    .sub2d_menu_area.out9_bar ul.Sub2d_gnb {
        list-style: none !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: stretch !important;
        gap: clamp(18px, calc(1.5vw + 8px), 36px) !important;
        padding: 0 !important;
        margin: 0 !important;
        height: 100% !important;
        width: auto !important;
        background-color: transparent !important;
    }
    .sub2d_menu_area.out9_bar ul.Sub2d_gnb li {
        height: 100% !important;
        display: flex !important;
        align-items: stretch !important;
        position: relative;
        padding: 0 !important;
    }
    .sub2d_menu_area.out9_bar ul.Sub2d_gnb li a {
        position: relative;
        display: flex !important;
        align-items: center;
        height: 100% !important;
        padding: 0 2px !important;
        font-size: var(--dep2-font-size, clamp(14px, 1.1vw, 16px)) !important;
        font-weight: var(--dep2-font-weight, 500) !important;
        letter-spacing: var(--dep2-letter-spacing, normal) !important;
        color: #444 !important;
        white-space: nowrap;
        text-decoration: none;
        background: transparent !important;
        border-radius: 0 !important;
        transition: color 0.25s ease;
    }
    /* 언더라인 (기본 숨김 → active 시 표시) */
    .sub2d_menu_area.out9_bar ul.Sub2d_gnb li a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(50% - 0.9em);
        height: 2px;
        background-color: var(--dep2-active-bar-color, var(--dep2-active-color, var(--primary)));
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.25s ease;
        display: block !important;
        border-radius: 0;
    }
    .sub2d_menu_area.out9_bar ul.Sub2d_gnb li a:hover {
        color: var(--dep2-active-color, var(--primary)) !important;
    }

    /* ★ 액티브: 메인컬러 글씨 + 언더라인 */
    .sub2d_menu_area.out9_bar ul.Sub2d_gnb li.active a {
        color: var(--dep2-active-color, var(--primary)) !important;
        font-weight: 600 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .sub2d_menu_area.out9_bar ul.Sub2d_gnb li.active a::after {
        transform: scaleX(1);
    }
}

/* ========================================
   모바일 (~767px): 가로 스크롤
   ======================================== */
@media only all and (max-width:767px) {
    .out9_area.sub2d_menu_out_area {
        margin-top: var(--dep2-offset-top-mo, 0px);
        margin-bottom: var(--dep2-margin-bottom-mo, 0px);
    }
    .sub2d_menu_area.out9_bar .contents-container {
        padding: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
    .sub2d_menu_area.out9_bar .titgrid {
        width: 100% !important;
        display: flex !important;
        position: relative;
        min-height: var(--dep2-height-mo, 46px);
        padding: 0 !important;
        background-color: transparent !important;
    }
    .sub2d_menu_area.out9_bar .Sub2d_scroller {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center;
        background: transparent !important;
    }
    .sub2d_menu_area.out9_bar .Sub2d_viewport {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 16px !important;
        position: relative;
        z-index: 1;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .sub2d_menu_area.out9_bar .Sub2d_viewport::-webkit-scrollbar {
        display: none;
    }
    .sub2d_menu_area.out9_bar ul.Sub2d_gnb {
        list-style: none !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        gap: 18px !important;
        padding: 0 !important;
        margin: 0 !important;
        background-color: transparent !important;
    }
    .sub2d_menu_area.out9_bar ul.Sub2d_gnb li {
        width: auto !important;
        padding: 0 !important;
        flex-shrink: 0;
        position: relative;
    }
    .sub2d_menu_area.out9_bar ul.Sub2d_gnb li a {
        position: relative;
        display: flex !important;
        align-items: center;
        height: var(--dep2-height-mo, 46px);
        padding: 0 2px !important;
        font-size: var(--dep2-font-size-mo, 14px) !important;
        font-weight: var(--dep2-font-weight, 400) !important;
        letter-spacing: var(--dep2-letter-spacing, normal) !important;
        color: #444 !important;
        white-space: nowrap;
        background: transparent !important;
        border-radius: 0 !important;
        border-top: none;
    }
    .sub2d_menu_area.out9_bar ul.Sub2d_gnb li a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(50% - 0.9em);
        height: 2px;
        background-color: var(--dep2-active-bar-color, var(--dep2-active-color, var(--primary)));
        display: none;
        border-radius: 0;
    }
    /* ★ 모바일 액티브: 메인컬러 + 언더라인 */
    .sub2d_menu_area.out9_bar ul.Sub2d_gnb li.active a {
        color: var(--dep2-active-color, var(--primary)) !important;
        font-weight: 600 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .sub2d_menu_area.out9_bar ul.Sub2d_gnb li.active a::after {
        display: block;
    }

    /* 좌/우 화살표 (넘칠 때만 JS가 표시) */
    .sub2d_menu_area.out9_bar .Sub2d_nav {
        display: flex !important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        flex-shrink: 0;
        color: #333;
        font-size: 20px;
        cursor: pointer;
        background: rgba(255,255,255,0.9);
        border: 1px solid #ddd;
        border-radius: 50%;
        z-index: 10;
    }
    .sub2d_menu_area.out9_bar .Sub2d_nav.prev {
        left: 2px;
    }
    .sub2d_menu_area.out9_bar .Sub2d_nav.next {
        right: 2px;
    }
    .sub2d_menu_area.out9_bar .Sub2d_nav[hidden] {
        display: none !important;
    }
}