/**
 * dep2_skins/in_7 스킨 스타일
 * 메뉴 개수만큼 우측 확장 스타일
 *
 * ★ 핵심:
 * - inner 안에서 시작
 * - 메뉴 개수만큼만 우측으로 확장 (auto width)
 * - 좌측 상단 라운드 코너
 * - 어두운 배경에 흰색 텍스트
 * - in7_bg_wrap: ::before(블러) + ::after(컬러) 분리 레이어
 * - in7_deco_r: 우측 연장 (::before + ::after)
 */

/* ========================================
   기본값
   ======================================== */
.sub2d_menu_area.in7_overlay {
    --dep2-bg-base-color: rgba(0, 0, 0, 1);
}

/* ========================================
   PC: 메뉴 개수만큼 확장 스타일
   ======================================== */
@media only all and (min-width:768px) {
    /* ★ sub_top: overflow-x만 hidden (데코 우측연장 가림) */
    .sub_top.has-in7-overlay {
        overflow-x: hidden !important;
    }

    /* 부모 컨테이너 */
    .sub1d_tit_area_new.has-in7-overlay {
        overflow: visible !important;
    }
    .sub_top_select_area.has-in7-overlay {
        overflow: visible !important;
    }

    /* 2뎁스 바 전체: 100% (inner 기준) */
    .sub2d_menu_area.in7_overlay {
        width: 100% !important;
        position: relative;
        background-color: transparent !important;
        overflow: visible !important;
    }
    .sub2d_menu_area.in7_overlay:before,
    .sub2d_menu_area.in7_overlay:after {
        display: none !important;
        content: none !important;
    }

    /* inner 컨테이너: 우측 정렬 */
    .sub2d_menu_area.in7_overlay .contents-container {
        position: relative;
        margin: 0 auto;
        padding: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    /* ★ in7_bg_wrap: 블러+컬러 분리 레이어 컨테이너 */
    .sub2d_menu_area.in7_overlay .in7_bg_wrap {
        position: relative;
        overflow: visible !important;
    }
    /* ::before = 블러 전용 레이어 (투명, backdrop-filter만) */
    .sub2d_menu_area.in7_overlay .in7_bg_wrap::before {
        content: "" !important;
        position: absolute !important;
        inset: 0;
        background-color: transparent !important;
        backdrop-filter: blur(var(--dep2-bg-blur, 0px));
        -webkit-backdrop-filter: blur(var(--dep2-bg-blur, 0px));
        z-index: 0 !important;
        pointer-events: none !important;
        border-radius: 20px 0 0 0;
    }
    /* ::after = 배경색 레이어 (블러 위에 반투명 컬러) */
    .sub2d_menu_area.in7_overlay .in7_bg_wrap::after {
        content: "" !important;
        position: absolute !important;
        inset: 0;
        background-color: var(--dep2-bg-base-color, #000) !important;
        opacity: var(--dep2-bg-opacity, 1) !important;
        z-index: 0 !important;
        pointer-events: none !important;
        border-radius: 20px 0 0 0;
    }

    /* ★ 우측 연장 데코 */
    .sub2d_menu_area.in7_overlay .in7_deco_r {
        position: absolute !important;
        top: 0 !important;
        left: 100% !important;
        width: 100vw !important;
        height: 100% !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }
    /* ::before = 블러 전용 레이어 */
    .sub2d_menu_area.in7_overlay .in7_deco_r::before {
        content: "" !important;
        position: absolute !important;
        inset: 0;
        background-color: transparent !important;
        backdrop-filter: blur(var(--dep2-bg-blur, 0px));
        -webkit-backdrop-filter: blur(var(--dep2-bg-blur, 0px));
        pointer-events: none !important;
    }
    /* ::after = 배경색 레이어 */
    .sub2d_menu_area.in7_overlay .in7_deco_r::after {
        content: "" !important;
        position: absolute !important;
        inset: 0;
        background-color: var(--dep2-bg-base-color, #000) !important;
        opacity: var(--dep2-bg-opacity, 1) !important;
        pointer-events: none !important;
    }

    /* 스크롤러 영역: auto width, 우측 정렬 (배경 위에 표시) */
    .sub2d_menu_area.in7_overlay .Sub2d_scroller {
        position: relative;
        width: auto !important;
        height: var(--dep2-height, clamp(50px, 4vw, 70px)) !important;
        display: flex !important;
        align-items: stretch !important;
        overflow: visible !important;
        background-color: transparent !important;
        z-index: 1;
    }
    .sub2d_menu_area.in7_overlay .Sub2d_scroller:before,
    .sub2d_menu_area.in7_overlay .Sub2d_scroller:after {
        display: none !important;
        content: none !important;
    }

    .sub2d_menu_area.in7_overlay .Sub2d_viewport {
        height: 100% !important;
        display: flex !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    /* 메뉴 리스트 */
    .sub2d_menu_area.in7_overlay ul.Sub2d_gnb {
        list-style: none !important;
        width: auto !important;
        display: flex !important;
        flex-direction: row !important;
        padding: 0px 40px !important;
        background-color: transparent !important;
        height: 100% !important;
        grid-gap: clamp(20px, calc(2.632vw + -0.526px), 50px) !important;
        margin: 0 !important;
        align-items: stretch !important;
    }
    .sub2d_menu_area.in7_overlay ul.Sub2d_gnb li {
        height: 100% !important;
        display: flex !important;
        justify-content: center;
        align-items: stretch !important;
        position: relative;
        padding: 0 10px !important;
        flex-shrink: 0;
    }
    .sub2d_menu_area.in7_overlay ul.Sub2d_gnb li a {
        padding: 15px 0px 5px 0px !important;
        font-weight: 600 !important;
        position: relative;
        font-size: var(--dep2-font-size, clamp(14px, 1.1vw, 16px)) !important;
        color: rgba(255,255,255,0.70) !important;
        height: 100% !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
    }
    .sub2d_menu_area.in7_overlay ul.Sub2d_gnb li a:hover {
        color: rgba(255,255,255,1) !important;
    }
}

/* ========================================
   모바일: 이미지 아래 배치
   ======================================== */
@media only all and (max-width:767px) {
    .sub2d_menu_area.in7_overlay {
        width: 100% !important;
        float: left;
        position: relative;
        left: 0 !important;
        transform: none !important;
        background-color: transparent !important;
        overflow: visible !important;
    }
    .sub2d_menu_area.in7_overlay:before,
    .sub2d_menu_area.in7_overlay:after {
        display: none !important;
        content: none !important;
    }

    .sub2d_menu_area.in7_overlay .contents-container {
        padding: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }

    /* ★ in7_bg_wrap: 모바일 블러+컬러 분리 레이어 */
    .sub2d_menu_area.in7_overlay .in7_bg_wrap {
        position: relative;
        width: 100%;
        float: left;
    }
    /* ::before = 블러 전용 레이어 */
    .sub2d_menu_area.in7_overlay .in7_bg_wrap::before {
        content: "" !important;
        position: absolute !important;
        inset: 0;
        background-color: transparent !important;
        backdrop-filter: blur(var(--dep2-bg-blur, 0px));
        -webkit-backdrop-filter: blur(var(--dep2-bg-blur, 0px));
        z-index: 0 !important;
        pointer-events: none !important;
    }
    /* ::after = 배경색 레이어 */
    .sub2d_menu_area.in7_overlay .in7_bg_wrap::after {
        content: "" !important;
        position: absolute !important;
        inset: 0;
        background-color: var(--dep2-bg-base-color, #000) !important;
        opacity: var(--dep2-bg-opacity, 1) !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    /* 모바일: 우측 연장 불필요 (전체 너비) */
    .sub2d_menu_area.in7_overlay .in7_deco_r {
        display: none !important;
    }

    /* 스크롤러 영역 - 화살표 기준점 (배경 위에 표시) */
    .sub2d_menu_area.in7_overlay .Sub2d_scroller {
        position: relative;
        width: 100% !important;
        float: left;
        background-color: transparent !important;
        border-radius: 0 !important;
        z-index: 1;
    }
    .sub2d_menu_area.in7_overlay .Sub2d_scroller:before,
    .sub2d_menu_area.in7_overlay .Sub2d_scroller:after {
        display: none !important;
        content: none !important;
    }

    /* 뷰포트: 가로 터치 스크롤 */
    .sub2d_menu_area.in7_overlay .Sub2d_viewport {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding: 0 35px !important;
        position: relative;
        scrollbar-width: none;
    }
    .sub2d_menu_area.in7_overlay .Sub2d_viewport::-webkit-scrollbar {
        display: none !important;
    }

    /* 메뉴 리스트 */
    .sub2d_menu_area.in7_overlay ul.Sub2d_gnb {
        list-style: none !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        width: max-content !important;
        min-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background-color: transparent !important;
        gap: 0 !important;
    }
    .sub2d_menu_area.in7_overlay ul.Sub2d_gnb li {
        flex: 0 0 auto !important;
        padding: 0px 10px !important;
        position: relative;
        white-space: nowrap !important;
    }
    .sub2d_menu_area.in7_overlay ul.Sub2d_gnb li a {
        padding: 18px 5px !important;
        font-weight: 400 !important;
        position: relative;
        font-size: var(--dep2-font-size-mo, 14px) !important;
        color: #fff !important;
        display: block !important;
        text-align: center;
    }

    /* 네비 화살표 버튼 */
    .sub2d_menu_area.in7_overlay .Sub2d_nav {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 32px !important;
        height: 32px !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        color: #fff !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 999 !important;
        font-size: 18px !important;
        font-weight: bold !important;
    }
    .sub2d_menu_area.in7_overlay .Sub2d_nav.prev {
        left: 5px !important;
    }
    .sub2d_menu_area.in7_overlay .Sub2d_nav.next {
        right: 5px !important;
    }
    .sub2d_menu_area.in7_overlay .Sub2d_nav[hidden] {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ========================================
   현재 선택된 메뉴 (active)
   - 상단 dot 인디케이터
   ======================================== */
.sub2d_menu_area.in7_overlay ul.Sub2d_gnb li.active a {
    color: var(--dep2-active-color, var(--dynamic-point-color, #fff)) !important;
    z-index: 99;
    position: relative;
}

/* PC: 상단 dot */
@media only all and (min-width:768px) {
    .sub2d_menu_area.in7_overlay ul.Sub2d_gnb li.active a:after {
        width: 5px !important;
        height: 5px !important;
        background-color: var(--dep2-active-color, var(--dynamic-point-color, #fff)) !important;
        position: absolute;
        top: 10px !important;
        left: 50% !important;
        content: "" !important;
        border-radius: 50% !important;
        margin-left: -2.5px;
    }
}

/* 모바일: 하단 라인 */
@media only all and (max-width:767px) {
    .sub2d_menu_area.in7_overlay ul.Sub2d_gnb li.active a:after {
        width: 100% !important;
        height: 3px !important;
        background-color: var(--dep2-active-color, var(--dynamic-point-color, #fff)) !important;
        position: absolute;
        bottom: 5px !important;
        left: 0 !important;
        content: "" !important;
        border-radius: 2px !important;
    }
}

/* ========================================
   PC: sub_top_select_area 위치 (이미지 밖, 하단)
   ======================================== */
@media only all and (min-width:768px) {
    .sub1d_tit_area_new.has-in7-overlay .sub_top_select_area {
        position: absolute;
        bottom: 0;
        right: 0px;
        width: 100%;
        z-index: 20;
        overflow: visible;
    }
}
@media only all and (max-width:767px) {
    .sub1d_tit_area_new.has-in7-overlay .sub_top_select_area {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 20;
    }
    .sub1d_tit_area_new.has-in7-overlay .sub_top_select_area .contents-container {
        padding: 0px !important;
    }
    .sub1d_tit_area_new.has-in7-overlay {
        position: relative;
        overflow: visible !important;
    }
}