/**
 * dep2_skins/in_10 스킨 스타일 (경로형 + 하단 흰색 반투명 라인 / in_9 기반)
 * 앞부분: 1뎁스명 → 흰색 동그라미(uil-angle-right) → 가로 흰선 → 2뎁스 메뉴
 *
 * ★ in_9 대비 추가:
 * - .in10_baseline : inner(컨테이너) 폭에 맞춰 하단에 연한 반투명 흰색 라인
 * - .in10-hide-d1  : 1뎁스(경로) 영역 숨김 토글
 * - --in10-offset-y : 이미지 하단에서 위로 끌어올리는 오프셋 (sub_top_select_area bottom)
 */

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

    /* 메뉴 영역: 전체 100% */
    .sub2d_menu_area.in10_overlay {
        width: 100% !important;
        float: left;
        position: relative;
        background-color: transparent !important;
    }
    /* ★ 전체 너비 배경색+투명도 (::before) */
    .sub2d_menu_area.in10_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;
    }

    /* ★ 컨테이너(메뉴 + active 바)를 baseline(z:1) 위로 → active 바가 흰 라인 위로 옴 */
    .sub2d_menu_area.in10_overlay .contents-container {
        position: relative;
        z-index: 2;
    }

    /* titgrid: 그리드 레이아웃 (HOME + 스크롤러) */
    .sub2d_menu_area.in10_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.in10_overlay .titgrid:before,
    .sub2d_menu_area.in10_overlay .titgrid:after {
        display: none !important;
        content: none !important;
    }

    /* ★★ 1뎁스(경로) 숨김 토글 → 2뎁스만 1열로 */
    .sub2d_menu_area.in10_overlay.in10-hide-d1 .titgrid {
        grid-template-columns: 1fr !important;
    }
    .sub2d_menu_area.in10_overlay.in10-hide-d1 .home {
        display: none !important;
    }
    /* 1뎁스 숨김 시 2뎁스 메뉴 좌측 패딩 제거(앞 흰선 갭 불필요) */
    .sub2d_menu_area.in10_overlay.in10-hide-d1 ul.Sub2d_gnb {
        padding-left: 0 !important;
    }

    /* ★ HOME(경로) 영역: 1뎁스명 + 동그라미 화살표 + 흰선 */
    .sub2d_menu_area.in10_overlay .home {
        height: 100% !important;
        display: flex !important;
        align-items: center;
        gap: 14px;
        padding: 0 0 0 5px !important;
        position: relative;
        white-space: nowrap;
        min-width: 0;
    }
    /* in_6의 우측 구분선은 사용 안 함 */
    .sub2d_menu_area.in10_overlay .home:after {
        display: none !important;
        content: none !important;
    }
    .sub2d_menu_area.in10_overlay .home .home_d1 {
        color: rgba(255, 255, 255, 0.95);
        font-size: var(--in10-d1-font-size, clamp(14px, 1.1vw, 16px));
        font-weight: 600;
        letter-spacing: -0.02em;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 220px;
    }

    /* ★ 동그라미 화살표 */
    .sub2d_menu_area.in10_overlay .home .in10_arrow {
        flex-shrink: 0;
        width: clamp(22px, 1.8vw, 28px);
        height: clamp(22px, 1.8vw, 28px);
        border-radius: 50%;
        background-color: var(--in10-circle-color, #ffffff);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
    }
    .sub2d_menu_area.in10_overlay .home .in10_arrow i {
        color: var(--in10-icon-color, var(--dynamic-point-color, #3498db));
        font-size: clamp(16px, 1.4vw, 20px);
        line-height: 1;
        margin: 0;
        display: block;
    }

    /* ★ 가로 흰선 (세로 중앙) */
    .sub2d_menu_area.in10_overlay .home .in10_line {
        flex-shrink: 0;
        width: var(--in10-line-width, clamp(40px, calc(4.69vw + 25px), 100px));
        height: 1px;
        background-color: rgba(255, 255, 255, 0.55);
    }

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

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

    /* 메뉴 리스트 */
    .sub2d_menu_area.in10_overlay ul.Sub2d_gnb {
        list-style: none !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        padding: 0px 0px 0px var(--in10-line-gap, 30px) !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;
        position: relative;  /* 슬라이드 언더라인 기준 */
    }
    /* ★ 하단 슬라이드 언더라인 (JS 제어)
       두께 6px, 둥근 pill. bottom:0 에 두고, baseline을 바 중앙(3px)에 맞춤
       (clip 방지: 음수 bottom 대신 baseline을 위로 올림) */
    .sub2d_menu_area.in10_overlay ul.Sub2d_gnb .in10_underline {
        position: absolute;
        bottom: var(--in10-active-offset, 0px);
        left: 0;
        height: var(--in10-bar-height, 6px);
        width: 0;
        opacity: 0;
        background-color: var(--dep2-active-bar-color, var(--dep2-active-color, var(--dynamic-point-color, #fff)));
        border-radius: var(--in10-bar-radius, 999px);
        pointer-events: none;
        z-index: 4;
        will-change: transform, width;
    }
    .sub2d_menu_area.in10_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.in10_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;
        font-weight: var(--dep2-font-weight, 500) !important;
        letter-spacing: var(--dep2-letter-spacing, normal) !important;
        /* ★ 비활성(off) 메뉴 글자 투명도 설정값 (--in10-inactive-opacity, 기본 0.70) */
        color: rgba(255, 255, 255, var(--in10-inactive-opacity, 0.70)) !important;
        height: 100% !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
    }
    .sub2d_menu_area.in10_overlay ul.Sub2d_gnb li a:hover {
        color: rgba(255,255,255,1) !important;
    }
}

/* ========================================
   ★★ 2뎁스 전체폭(100%) 하단 흰색 반투명 라인 (PC/모바일 공통)
   - .in10_overlay(width:100%) 직속 → 화면 끝~끝 전체폭에 깔림 (메뉴는 inner 안 유지)
   - overlay 하단 = titgrid 하단 = active 바(gnb bottom:0) 기준선과 동일 높이라 정확히 정렬됨
   - opacity 0 이면 사실상 숨김
   ======================================== */
.sub2d_menu_area.in10_overlay > .in10_baseline {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    /* ★ active 바(bottom:0, 높이 6px)의 세로 중앙에 라인을 정렬
       → 6px 바가 라인 위로 3px / 아래로 3px 균등하게 걸침 */
    bottom: calc(var(--in10-bar-height, 6px) / 2 - var(--in10-baseline-height, 1px) / 2 + var(--in10-active-offset, 0px));
    height: var(--in10-baseline-height, 1px);
    background-color: var(--in10-baseline-color, #ffffff);
    opacity: var(--in10-baseline-opacity, 0.25);
    pointer-events: none;
    /* ★ 배경(::before z:0) 위, 컨테이너(z:2) 아래 → active 바가 흰 라인 위로 올라옴 */
    z-index: 1;
}

/* ========================================
   현재 선택된 메뉴 (active) - ★ 하단 라인
   ======================================== */
.sub2d_menu_area.in10_overlay ul.Sub2d_gnb li.active a {
    color: var(--dep2-active-color, var(--dynamic-point-color, #fff)) !important;
    z-index: 99;
    position: relative;
}
/* 정적 하단 라인 (JS 슬라이더 비활성/no-JS 폴백). 두께 6px pill, baseline 중앙 걸침 */
.sub2d_menu_area.in10_overlay ul.Sub2d_gnb li.active a:after {
    width: 100% !important;
    height: var(--in10-bar-height, 6px) !important;
    background-color: var(--dep2-active-bar-color, var(--dep2-active-color, var(--dynamic-point-color, #fff))) !important;
    position: absolute;
    bottom: var(--in10-active-offset, 0px) !important;
    left: 0 !important;
    content: "" !important;
    border-radius: var(--in10-bar-radius, 999px) !important;
    z-index: 4 !important;
}
/* ★ JS 슬라이더 켜지면 정적 라인 숨김 (이중 표시 방지) */
.sub2d_menu_area.in10_overlay.in10-slider-on ul.Sub2d_gnb li.active a:after {
    display: none !important;
}

/* ========================================
   PC: sub_top_select_area 위치 (★ 위로 끌어올리는 오프셋)
   ======================================== */
@media only all and (min-width:768px) {
    .sub1d_tit_area_new.has-in10-overlay .sub_top_select_area {
        position: absolute;
        /* 기본 0 (이미지 하단 붙음). 위로 오프셋은 skin.php JS가 부모에 직접 적용
           (--in10-offset-y 변수는 자식 overlay 선언이라 부모가 상속 못 받음) */
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 20;
    }
}

/* ========================================
   모바일: 좌50% HOME(1뎁스명) + 우50% 셀렉트 + 하단 드롭다운
   ======================================== */
@media only all and (max-width:767px) {
    .sub2d_menu_area.in10_overlay {
        width: 100% !important;
        float: left;
        position: relative;
        background-color: transparent !important;
        overflow: visible !important;
        /* ★ 모바일 드롭다운이 본문 콘텐츠(z-index) 위로 오도록 stacking context 격상 */
        z-index: 1000 !important;
    }
    /* ★ 전체 너비 배경색+투명도 */
    .sub2d_menu_area.in10_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.in10_overlay .contents-container {
        padding: 0 !important;
        max-width: none !important;
        width: 100% !important;
        position: relative;
        /* baseline(z:1) 위로 → 흰 라인이 메뉴 글자를 덮지 않음 */
        z-index: 2;
    }

    /* titgrid: 2열 그리드 (좌 HOME 50% / 우 셀렉트 50%) */
    .sub2d_menu_area.in10_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.in10_overlay .titgrid:before,
    .sub2d_menu_area.in10_overlay .titgrid:after {
        display: none !important;
        content: none !important;
    }

    /* ★★ 1뎁스 숨김 시 모바일: 셀렉트박스 1열 전체 */
    .sub2d_menu_area.in10_overlay.in10-hide-d1 .titgrid {
        grid-template-columns: 1fr !important;
    }
    .sub2d_menu_area.in10_overlay.in10-hide-d1 .home {
        display: none !important;
    }
    /* 1뎁스 숨김 시 드롭다운 전체 폭 */
    .sub2d_menu_area.in10_overlay.in10-hide-d1 .Sub2d_scroller {
        width: 100% !important;
    }

    /* ★ HOME: 모바일에서 1뎁스명 + 동그라미화살표 (흰선은 숨김) */
    .sub2d_menu_area.in10_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.in10_overlay .home:after {
        content: "" !important;
        display: block !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.in10_overlay .home .home_d1 {
        color: rgba(255, 255, 255, 0.85);
        font-size: var(--in10-d1-font-size-mo, 13px);
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* 동그라미 화살표: 모바일 축소 */
    .sub2d_menu_area.in10_overlay .home .in10_arrow {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: var(--in10-circle-color, #ffffff);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
    }
    .sub2d_menu_area.in10_overlay .home .in10_arrow i {
        color: var(--in10-icon-color, var(--dynamic-point-color, #3498db));
        font-size: 15px;
        line-height: 1;
        margin: 0;
        display: block;
    }
    /* ★ 흰선: 모바일 숨김 */
    .sub2d_menu_area.in10_overlay .home .in10_line {
        display: none !important;
    }

    /* ★ 셀렉트박스 토글 (우 50%) */
    .sub2d_menu_area.in10_overlay .in10_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.in10_overlay .in10_select_toggle .in10_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.in10_overlay .in10_select_toggle .in10_select_arrow {
        color: rgba(255, 255, 255, 0.6);
        font-size: 16px;
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }
    .sub2d_menu_area.in10_overlay .in10_select_toggle.is-open .in10_select_arrow {
        transform: rotate(180deg);
    }

    /* ★ 드롭다운: 우측 50% + 바와 동일 블러 */
    .sub2d_menu_area.in10_overlay .Sub2d_scroller {
        position: absolute !important;
        top: 100% !important;
        left: auto !important;
        right: 0 !important;
        width: 50% !important;
        /* ★ 어떤 화살표/슬라이더보다도 위로 (최고치) */
        z-index: 2147483646 !important;
        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;
    }
    /* 드롭다운 배경색 (바보다 진하게) */
    .sub2d_menu_area.in10_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.in10_overlay .Sub2d_scroller:after {
        display: none !important;
        content: none !important;
    }
    /* 열린 상태 */
    .sub2d_menu_area.in10_overlay .Sub2d_scroller.is-open {
        max-height: 400px !important;
        overflow-y: auto !important;
    }

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

    /* 메뉴 리스트: 세로 배치 */
    .sub2d_menu_area.in10_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.in10_overlay ul.Sub2d_gnb li {
        width: 100% !important;
        padding: 0 !important;
        position: relative;
    }
    .sub2d_menu_area.in10_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;
        font-weight: var(--dep2-font-weight, 400) !important;
        letter-spacing: var(--dep2-letter-spacing, normal) !important;
        /* ★ 비활성(off) 메뉴 글자 투명도 설정값 (PC와 공통) */
        color: rgba(255, 255, 255, var(--in10-inactive-opacity, 0.7)) !important;
        display: block !important;
        text-align: left;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    /* active 항목: 액티브 컬러 BG */
    /* ★ 모바일 전용 active 배경/글자색 (--in10-mo-active-bg / --in10-mo-active-text).
       비우면 PC와 동일한 --dep2-active-color 폴백 → 흰색 active 컬러 문제 시 여기서 따로 지정 */
    .sub2d_menu_area.in10_overlay ul.Sub2d_gnb li.active a {
        color: var(--in10-mo-active-text, #fff) !important;
        font-weight: 600 !important;
        background-color: var(--in10-mo-active-bg, var(--dep2-active-color, var(--dynamic-point-color, rgba(255,255,255,0.15)))) !important;
        border-radius: 0 !important;
    }
    /* ★ 모바일 active: 하단 라인 제거 (BG로 표시) */
    .sub2d_menu_area.in10_overlay ul.Sub2d_gnb li.active a:after {
        display: none !important;
    }
    /* ★ 모바일: 슬라이드 언더라인 숨김 (세로 드롭다운) */
    .sub2d_menu_area.in10_overlay ul.Sub2d_gnb .in10_underline {
        display: none !important;
    }

    /* 네비 화살표: 드롭다운에서 숨김 (in_10 모바일은 세로 드롭다운이라 가로순회 불필요) */
    .sub2d_menu_area.in10_overlay .Sub2d_nav,
    .sub2d_menu_area.in10_overlay .dh-nav-arrows {
        display: none !important;
    }

    /* sub_top_select_area 위치 (★ 위 오프셋은 skin.php JS가 직접 적용, 모바일도 동일) */
    .sub1d_tit_area_new.has-in10-overlay .sub_top_select_area {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        /* ★ 본문 콘텐츠보다 위로 (드롭다운 펼침 영역 포함) */
        z-index: 1000 !important;
    }
    .sub1d_tit_area_new.has-in10-overlay .sub_top_select_area .contents-container {
        padding: 0 !important;
    }
    .sub1d_tit_area_new.has-in10-overlay {
        position: relative;
        overflow: visible !important;
        /* ★ 서브 상단 전체를 본문 위로 격상 (모바일 드롭다운 가려짐 방지) */
        z-index: 1000 !important;
    }
}

/* ========================================
   ★ 드롭다운 열림 시 부모 stacking 격상 (z-index만! position은 건드리지 않음)
   ======================================== */
.sub2d_menu_area.in10_overlay,
.sub_top_select_area.has-in10-overlay,
.sub1d_tit_area_new.has-in10-overlay {
    transition-property: z-index;
    transition-duration: 0s;
    transition-delay: 0.3s;
}
.sub2d_menu_area.in10_overlay.in10-drop-open,
.sub_top_select_area.in10-drop-open,
.sub1d_tit_area_new.in10-drop-open {
    z-index: 2147483646 !important;
    transition-delay: 0s !important; /* 열릴 땐 즉시 격상 */
}

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