/**
 * dep2_skins/in_8 스킨 스타일
 * ★ 특징:
 * - inner(contents-container) 안에만 배경 (전체 100% 아님)
 * - 양쪽 라운드 (--in8-border-radius로 설정)
 * - 액티브 메뉴: 흰색 라운드 박스 + 그림자 (슬라이딩 이동)
 * - hover 시 배경이 해당 메뉴로 슬라이드 + 글씨 반전
 */

/* ========================================
   PC 스타일
   ======================================== */
@media only all and (min-width:768px) {
    .sub1d_tit_area_new.has-in8-overlay {
        overflow: visible !important;
    }
    .sub_top_select_area.has-in8-overlay {
        overflow: visible !important;
    }

    /* ★ 메뉴 영역: 전체 100% (배경은 투명) */
    .sub2d_menu_area.in8_overlay {
        width: 100% !important;
        float: left;
        position: relative;
        background-color: transparent !important;
    }
    /* ★ in_8은 전체 너비 ::before 배경 사용 안 함 (inner 안에만) */
    .sub2d_menu_area.in8_overlay:before {
        display: none !important;
        content: none !important;
    }

    /* ★ contents-container에 배경 + 라운드 적용 */
    .sub2d_menu_area.in8_overlay .contents-container {
        position: relative;
        z-index: 1;
        border-radius: var(--in8-border-radius, 50px);
        overflow: hidden;
    }
    /* ★ inner 배경색 (::before로 투명도 지원) */
    .sub2d_menu_area.in8_overlay .contents-container::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--dep2-bg-base-color, var(--dynamic-bg-color, var(--primary)));
        opacity: var(--dep2-bg-opacity, 1);
        z-index: 0;
        pointer-events: none;
        border-radius: inherit;
    }
    .sub2d_menu_area.in8_overlay .contents-container > * {
        position: relative;
        z-index: 1;
    }

    /* titgrid */
    .sub2d_menu_area.in8_overlay .titgrid {
        width: 100% !important;
        height: var(--dep2-height, clamp(60px, 5vw, 80px)) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: stretch !important;
        position: relative;
        background-color: transparent !important;
    }
    .sub2d_menu_area.in8_overlay .titgrid:before,
    .sub2d_menu_area.in8_overlay .titgrid:after {
        display: none !important;
        content: none !important;
    }

    /* HOME 숨김 */
    .sub2d_menu_area.in8_overlay .home {
        display: none !important;
    }

    /* 셀렉트 토글: PC 숨김 */
    .sub2d_menu_area.in8_overlay .in8_select_toggle {
        display: none !important;
    }

    /* 스크롤러 영역 */
    .sub2d_menu_area.in8_overlay .Sub2d_scroller {
        position: relative;
        background-color: transparent !important;
        height: 100% !important;
        display: flex !important;
        align-items: stretch !important;
    }
    .sub2d_menu_area.in8_overlay .Sub2d_scroller:before,
    .sub2d_menu_area.in8_overlay .Sub2d_scroller:after {
        display: none !important;
        content: none !important;
    }
    .sub2d_menu_area.in8_overlay .Sub2d_viewport {
        height: 100% !important;
        display: flex !important;
        align-items: stretch !important;
        position: relative;
    }

    /* ★ 슬라이딩 배경 (in8_slider) */
    .sub2d_menu_area.in8_overlay .in8_slider {
        position: absolute;
        top: 5px;
        left: 0;
        height: calc(100% - 10px);
        background-color: var(--in8-active-bg, #ffffff);
        border-radius: var(--in8-active-radius, 50px);
        box-shadow: var(--in8-active-shadow, 0 2px 8px rgba(0,0,0,0.15));
        z-index: 1;
        pointer-events: none;
        opacity: 0;
        will-change: transform, width;
    }

    /* ★ 메뉴 리스트: 가운데 정렬 */
    .sub2d_menu_area.in8_overlay ul.Sub2d_gnb {
        list-style: none !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: stretch !important;
        padding: 0 !important;
        background-color: transparent !important;
        height: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
        position: relative;
        z-index: 2;
    }
    .sub2d_menu_area.in8_overlay ul.Sub2d_gnb li {
        height: 100% !important;
        display: flex !important;
        justify-content: center;
        align-items: stretch !important;
        position: relative;
        padding: 0 !important;
    }
    .sub2d_menu_area.in8_overlay ul.Sub2d_gnb li a {
        padding: 0 clamp(18px, 2vw, 30px) !important;
        position: relative;
        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: rgba(255,255,255,0.75) !important;
        height: 100% !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        text-decoration: none;
        transition: color 0.3s ease;
    }
    /* ★ a::after 제거 (언더라인 없음, 슬라이더가 대체) */
    .sub2d_menu_area.in8_overlay ul.Sub2d_gnb li a::after {
        display: none !important;
    }

    /* ★ 액티브 메뉴: 글씨 색상 반전 */
    .sub2d_menu_area.in8_overlay ul.Sub2d_gnb li.active a {
        color: var(--in8-active-font-color, var(--dep2-active-color, #333)) !important;
        font-weight: 600 !important;
        z-index: 3;
        position: relative;
    }

    /* ★ hover 시 글씨 반전 (JS가 .in8_hover_active 토글) */
    .sub2d_menu_area.in8_overlay ul.Sub2d_gnb li.in8_hover_active a {
        color: var(--in8-active-font-color, var(--dep2-active-color, #333)) !important;
        font-weight: 600 !important;
    }
    /* hover 중 원래 active의 글씨를 기본으로 되돌림 */
    .sub2d_menu_area.in8_overlay ul.Sub2d_gnb li.active:not(.in8_hover_active) a {
        color: rgba(255,255,255,0.75) !important;
        font-weight: var(--dep2-font-weight, 500) !important;
    }
    /* hover 중이 아닐 때 (mouseleave 후) active 복원 - JS가 in8_hover_active 제거 시 */
    .sub2d_menu_area.in8_overlay ul.Sub2d_gnb:not(:hover) li.active a {
        color: var(--in8-active-font-color, var(--dep2-active-color, #333)) !important;
        font-weight: 600 !important;
    }
}

/* ========================================
   PC: sub_top_select_area 위치
   ======================================== */
@media only all and (min-width:768px) {
    .sub1d_tit_area_new.has-in8-overlay .sub_top_select_area {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 20;
    }
}

/* ========================================
   모바일: 셀렉트 드롭다운
   ======================================== */
@media only all and (max-width:767px) {
    .sub2d_menu_area.in8_overlay {
        width: 100% !important;
        float: left;
        position: relative;
        background-color: transparent !important;
        overflow: visible !important;
    }
    /* ★ 모바일은 전체 너비 배경 */
    .sub2d_menu_area.in8_overlay:before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background-color: var(--dep2-bg-base-color, var(--dynamic-bg-color, var(--primary))) !important;
        opacity: var(--dep2-bg-opacity, 1) !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    .sub2d_menu_area.in8_overlay .contents-container {
        padding: 0 !important;
        max-width: none !important;
        width: 100% !important;
        position: relative;
        z-index: 1;
        border-radius: 0 !important;
    }
    .sub2d_menu_area.in8_overlay .contents-container::before {
        display: none !important;
    }

    /* 슬라이더 숨김 */
    .sub2d_menu_area.in8_overlay .in8_slider {
        display: none !important;
    }

    /* titgrid */
    .sub2d_menu_area.in8_overlay .titgrid {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        position: relative;
        min-height: var(--dep2-height-mo, 50px);
    }
    .sub2d_menu_area.in8_overlay .titgrid:before,
    .sub2d_menu_area.in8_overlay .titgrid:after {
        display: none !important;
        content: none !important;
    }

    /* HOME 숨김 */
    .sub2d_menu_area.in8_overlay .home {
        display: none !important;
    }

    /* ★ 셀렉트박스 토글: 숨김 (in_7처럼 가로 스크롤 사용) */
    .sub2d_menu_area.in8_overlay .in8_select_toggle {
        display: none !important;
    }

    /* ★ 스크롤러: 가로 스크롤 (in_7 방식) */
    .sub2d_menu_area.in8_overlay .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.in8_overlay .Sub2d_scroller:before,
    .sub2d_menu_area.in8_overlay .Sub2d_scroller:after {
        display: none !important;
        content: none !important;
    }

    /* 뷰포트: 가로 스크롤 */
    .sub2d_menu_area.in8_overlay .Sub2d_viewport {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 !important;
        position: relative;
        z-index: 1;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .sub2d_menu_area.in8_overlay .Sub2d_viewport::-webkit-scrollbar {
        display: none;
    }

    /* 메뉴 리스트: 가로 배치 */
    .sub2d_menu_area.in8_overlay ul.Sub2d_gnb {
        list-style: none !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        padding: 0 !important;
        margin: 0 !important;
        background-color: transparent !important;
        gap: 0 !important;
    }
    .sub2d_menu_area.in8_overlay ul.Sub2d_gnb li {
        width: auto !important;
        padding: 0 !important;
        flex-shrink: 0;
    }
    .sub2d_menu_area.in8_overlay ul.Sub2d_gnb li a {
        padding: 0 14px !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: rgba(255, 255, 255, 0.7) !important;
        display: flex !important;
        align-items: center;
        height: var(--dep2-height-mo, 50px);
        white-space: nowrap;
        border-top: none;
        text-align: center;
    }
    .sub2d_menu_area.in8_overlay ul.Sub2d_gnb li a::after {
        display: none !important;
    }
    /* 전체 바 상하 패딩 */
    .sub2d_menu_area.in8_overlay ul.Sub2d_gnb {
        padding: 5px 0 !important;
    }

    /* ★ 모바일 active: PC와 동일 */
    .sub2d_menu_area.in8_overlay ul.Sub2d_gnb li.active a {
        color: var(--in8-active-font-color, #333) !important;
        font-weight: 600 !important;
        background-color: var(--in8-active-bg, #fff) !important;
        border-radius: var(--in8-active-radius, 50px);
        box-shadow: var(--in8-active-shadow, 0 2px 8px rgba(0,0,0,0.15));
    }

    /* 슬라이더 숨김 */
    .sub2d_menu_area.in8_overlay .in8_slider {
        display: none !important;
    }

    /* 네비 화살표 표시 */
    .sub2d_menu_area.in8_overlay .Sub2d_nav {
        display: flex !important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        color: rgba(255,255,255,0.8);
        font-size: 22px;
        cursor: pointer;
        background: rgba(0,0,0,0.2);
        border: none;
        border-radius: 50%;
        z-index: 10;
    }
    .sub2d_menu_area.in8_overlay .Sub2d_nav.prev {
        left: 2px;
    }
    .sub2d_menu_area.in8_overlay .Sub2d_nav.next {
        right: 2px;
    }
    .sub2d_menu_area.in8_overlay .Sub2d_nav[hidden] {
        display: none !important;
    }

    /* sub_top_select_area 위치 */
    .sub1d_tit_area_new.has-in8-overlay .sub_top_select_area {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 20;
    }
    .sub1d_tit_area_new.has-in8-overlay .sub_top_select_area .contents-container {
        padding: 0 !important;
    }
    .sub1d_tit_area_new.has-in8-overlay {
        position: relative;
        overflow: visible !important;
    }
}