/**
 * dep2_skins/in_6 스킨 스타일
 * 이미지 바닥 오버레이 스타일 - 전체 너비 100% BG
 * 위치: 이미지 영역 하단에 absolute로 붙음
 *
 * ★ 특징:
 * - 전체 100% 배경색 (우측 연장 아님)
 * - HOME 영역: 아이콘 + "/" + 1뎁스 타이틀 + 구분선
 * - active 라인: 상단 (top: 0)
 * - 모바일: 좌50% HOME + 우50% 셀렉트, 드롭다운 하단 펼침
 */

/* ========================================
   PC: 전체 너비 100% BG
   ======================================== */
@media only all and (min-width:768px) {
    .sub1d_tit_area_new.has-in6-overlay {
        overflow: hidden !important;
    }
    .sub_top_select_area.has-in6-overlay {
        overflow: hidden !important;
    }

    /* 메뉴 영역: 전체 100% */
    .sub2d_menu_area.in6_overlay {
        width: 100% !important;
        float: left;
        position: relative;
        background-color: transparent !important;
    }
    /* ★ 전체 너비 배경색+투명도 (::before) */
    .sub2d_menu_area.in6_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, #000) !important;
        opacity: var(--dep2-bg-opacity, 1) !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    .sub2d_menu_area.in6_overlay .contents-container {
        position: relative;
        z-index: 1;
    }

    /* titgrid: 그리드 레이아웃 (HOME + 셀렉트토글(숨김) + 스크롤러) */
    .sub2d_menu_area.in6_overlay .titgrid {
        width: 100% !important;
        height: var(--dep2-height, clamp(60px, 5vw, 80px)) !important;
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        position: relative;
        background-color: transparent !important;
    }
    .sub2d_menu_area.in6_overlay .titgrid:before,
    .sub2d_menu_area.in6_overlay .titgrid:after {
        display: none !important;
        content: none !important;
    }

    /* ★ HOME 영역: 아이콘 + "/" + 1뎁스 타이틀 */
    .sub2d_menu_area.in6_overlay .home {
        height: 100% !important;
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 0 25px 0 5px !important;
        position: relative;
        white-space: nowrap;
        min-width: 0;
    }
    /* HOME 우측 구분선 */
    .sub2d_menu_area.in6_overlay .home:after {
        content: "" !important;
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 1px !important;
        height: 50% !important;
        background-color: rgba(255, 255, 255, 0.2) !important;
    }
    .sub2d_menu_area.in6_overlay .home .home_icon {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
    .sub2d_menu_area.in6_overlay .home .home_icon img {
        width: 20px;
        opacity: 0.7;
    }
    .sub2d_menu_area.in6_overlay .home .home_sep {
        color: rgba(255, 255, 255, 0.35);
        font-size: 14px;
    }
    .sub2d_menu_area.in6_overlay .home .home_d1 {
        color: rgba(255, 255, 255, 0.85);
        font-size: clamp(14px, 1.1vw, 16px);
        font-weight: 600;
        letter-spacing: -0.02em;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

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

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

    /* 메뉴 리스트 */
    .sub2d_menu_area.in6_overlay ul.Sub2d_gnb {
        list-style: none !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        padding: 0px 0px 0px 25px !important;
        background-color: transparent !important;
        height: 100% !important;
        grid-gap: clamp(10px, calc(2.632vw + -0.526px), 50px) !important;
        margin: 0 !important;
        align-items: stretch !important;
    }
    .sub2d_menu_area.in6_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.in6_overlay ul.Sub2d_gnb li a {
        padding: 0 5px !important;
        font-weight: 500 !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.in6_overlay ul.Sub2d_gnb li a:hover {
        color: rgba(255,255,255,1) !important;
    }
}

/* ========================================
   현재 선택된 메뉴 (active) - ★ 상단 라인
   ======================================== */
.sub2d_menu_area.in6_overlay ul.Sub2d_gnb li.active a {
    color: var(--dep2-active-color, var(--dynamic-point-color, #fff)) !important;
    z-index: 99;
    position: relative;
}
.sub2d_menu_area.in6_overlay ul.Sub2d_gnb li.active a:after {
    width: 100% !important;
    height: 4px !important;
    background-color: var(--dep2-active-color, var(--dynamic-point-color, #fff)) !important;
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    content: "" !important;
    border-radius: 0 0 2px 2px !important;
}

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

/* ========================================
   모바일: 좌50% HOME + 우50% 셀렉트 + 하단 드롭다운
   ======================================== */
@media only all and (max-width:767px) {
    .sub2d_menu_area.in6_overlay {
        width: 100% !important;
        float: left;
        position: relative;
        background-color: transparent !important;
        overflow: visible !important;
    }
    /* ★ 전체 너비 배경색+투명도 */
    .sub2d_menu_area.in6_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, #000) !important;
        opacity: var(--dep2-bg-opacity, 1) !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    .sub2d_menu_area.in6_overlay .contents-container {
        padding: 0 !important;
        max-width: none !important;
        width: 100% !important;
        position: relative;
        z-index: 1;
    }

    /* titgrid: 2열 그리드 (좌 HOME 50% / 우 셀렉트 50%) */
    .sub2d_menu_area.in6_overlay .titgrid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        position: relative;
        min-height: var(--dep2-height-mo, 50px);
    }
    .sub2d_menu_area.in6_overlay .titgrid:before,
    .sub2d_menu_area.in6_overlay .titgrid:after {
        display: none !important;
        content: none !important;
    }

    /* ★ HOME: 모바일에서도 표시 (좌 50%) */
    .sub2d_menu_area.in6_overlay .home {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 0 15px !important;
        white-space: nowrap;
        overflow: hidden;
        min-width: 0;
        position: relative;
    }
    /* ★ HOME 우측 구분선 (셀렉트박스 앞) */
    .sub2d_menu_area.in6_overlay .home:after {
        content: "" !important;
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 1px !important;
        height: 50% !important;
        background-color: rgba(255, 255, 255, 0.2) !important;
    }
    .sub2d_menu_area.in6_overlay .home .home_icon {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
    .sub2d_menu_area.in6_overlay .home .home_icon img {
        width: 16px;
        opacity: 0.7;
    }
    .sub2d_menu_area.in6_overlay .home .home_sep {
        color: rgba(255, 255, 255, 0.35);
        font-size: 12px;
    }
    .sub2d_menu_area.in6_overlay .home .home_d1 {
        color: rgba(255, 255, 255, 0.75);
        font-size: 13px;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ★ 셀렉트박스 토글 (우 50%) */
    .sub2d_menu_area.in6_overlay .in6_select_toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        width: 100% !important;
        padding: 0 18px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer;
        position: relative;
        z-index: 2;
    }
    .sub2d_menu_area.in6_overlay .in6_select_toggle .in6_select_label {
        color: #fff;
        font-size: var(--dep2-font-size-mo, 14px);
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sub2d_menu_area.in6_overlay .in6_select_toggle .in6_select_arrow {
        color: rgba(255, 255, 255, 0.6);
        font-size: 16px;
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }
    .sub2d_menu_area.in6_overlay .in6_select_toggle.is-open .in6_select_arrow {
        transform: rotate(180deg);
    }

    /* ★ 드롭다운: 우측 50% + 바와 동일 블러 */
    .sub2d_menu_area.in6_overlay .Sub2d_scroller {
        position: absolute !important;
        top: 100% !important;
        left: auto !important;
        right: 0 !important;
        width: 50% !important;
        z-index: 100;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease;
        background: transparent !important;
        backdrop-filter: blur(var(--dep2-bg-blur, 0px)) !important;
        -webkit-backdrop-filter: blur(var(--dep2-bg-blur, 0px)) !important;
    }
    /* 드롭다운 배경색 (바보다 진하게, dep2_base.css 패턴 동일) */
    .sub2d_menu_area.in6_overlay .Sub2d_scroller: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, #000) !important;
        opacity: min(calc(var(--dep2-bg-opacity, 1) + 0.15), 1) !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }
    .sub2d_menu_area.in6_overlay .Sub2d_scroller:after {
        display: none !important;
        content: none !important;
    }
    /* 열린 상태 */
    .sub2d_menu_area.in6_overlay .Sub2d_scroller.is-open {
        max-height: 400px !important;
        overflow-y: auto !important;
    }

    /* 뷰포트 */
    .sub2d_menu_area.in6_overlay .Sub2d_viewport {
        overflow: visible !important;
        padding: 0 !important;
        position: relative;
        z-index: 1;
    }

    /* 메뉴 리스트: 세로 배치 */
    .sub2d_menu_area.in6_overlay ul.Sub2d_gnb {
        list-style: none !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        padding: 0 0 8px 0 !important;
        margin: 0 !important;
        background-color: transparent !important;
        gap: 0 !important;
    }
    .sub2d_menu_area.in6_overlay ul.Sub2d_gnb li {
        width: 100% !important;
        padding: 0 !important;
        position: relative;
    }
    .sub2d_menu_area.in6_overlay ul.Sub2d_gnb li a {
        padding: 12px 18px !important;
        font-weight: 400 !important;
        position: relative;
        font-size: var(--dep2-font-size-mo, 14px) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        display: block !important;
        text-align: left;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    /* active 항목: 액티브 컬러 BG + 왼쪽 라인 */
    .sub2d_menu_area.in6_overlay ul.Sub2d_gnb li.active a {
        color: #fff !important;
        font-weight: 600 !important;
        background-color: var(--dep2-active-color, var(--dynamic-point-color, rgba(255,255,255,0.15))) !important;
        border-radius: 0 !important;
    }
    /* ★ 모바일 active: 왼쪽 라인 제거 */
    .sub2d_menu_area.in6_overlay ul.Sub2d_gnb li.active a:after {
        display: none !important;
    }

    /* 네비 화살표: 드롭다운에서 숨김 */
    .sub2d_menu_area.in6_overlay .Sub2d_nav {
        display: none !important;
    }

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

/* ========================================
   다크 오버레이 배경색 기본값
   ======================================== */
.sub2d_menu_area.in6_overlay {
    --dep2-bg-base-color: rgba(0, 0, 0, 1);
}