/**
 * dep2_skins/out_10 — 강남종합사회복지관 separate_01v3 스타일 (1026)
 * - 반투명 배경판(.out10_bg) + 메뉴 사이 동그란 점 + 미끄러지는 액티브 하단 라인(.out10_ind)
 * - 배경판 폭/위치는 skin.php JS 가 inner 기준으로 left/right 지정 (글자는 inner 안 그대로)
 *
 * CSS 변수 (skin.php 주입)
 * --o10-bg, --o10-text, --o10-dot, --o10-line-h, --o10-r-tl/tr/br/bl
 * --dep2-height(-mo), --dep2-font-size(-mo), --dep2-font-weight, --dep2-letter-spacing
 * --dep2-active-color(기본 글자색), --dep2-active-bar-color(기본 --secondary)
 * --dep2-offset-top(-mo), --dep2-margin-bottom(-mo)
 */

/* 높이 0 래퍼 (top_1.php 가 out 스킨을 이 안에 넣음) */
.dep2_out_float_wrap {
    width: 100%;
    float: left;
    height: 0;
    overflow: visible;
    position: relative;
    z-index: 50;
}

.out10_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);
}

/* 바: 자체 배경 없음 (배경은 .out10_bg 판) */
.sub2d_menu_area.out10_bar {
    width: 100% !important;
    float: left;
    position: relative;
    background-color: transparent !important;
    overflow: visible !important;
}
.sub2d_menu_area.out10_bar:before,
.sub2d_menu_area.out10_bar:after,
.sub2d_menu_area.out10_bar .Sub2d_scroller:before,
.sub2d_menu_area.out10_bar .Sub2d_scroller:after {
    display: none !important;
    content: none !important;
}
.sub2d_menu_area.out10_bar .home { display: none !important; }

/* 반투명 배경판 — 모서리 4개 각각 */
.sub2d_menu_area.out10_bar .out10_bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background: var(--o10-bg, rgba(0,0,0,0.6));
    border-top-left-radius: var(--o10-r-tl, 0px);
    border-top-right-radius: var(--o10-r-tr, 0px);
    border-bottom-right-radius: var(--o10-r-br, 0px);
    border-bottom-left-radius: var(--o10-r-bl, 0px);
    pointer-events: none;
}
.sub2d_menu_area.out10_bar .out10_inner {
    position: relative;
    z-index: 1;
    background-color: transparent !important;
}
.sub2d_menu_area.out10_bar .out10_probe {
    width: 100%;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.sub2d_menu_area.out10_bar .Sub2d_scroller {
    position: relative;
    display: flex;
    align-items: stretch;
    height: var(--dep2-height, clamp(50px, 4.5vw, 78px));
}
.sub2d_menu_area.out10_bar .Sub2d_viewport {
    height: 100%;
    display: flex;
    align-items: stretch;
    padding: 0;
}
.sub2d_menu_area.out10_bar ul.Sub2d_gnb {
    list-style: none !important;
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(36px, calc(3vw + 20px), 74px) !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    width: auto;
    background: transparent !important;
}
.sub2d_menu_area.out10_bar ul.Sub2d_gnb li.Sub2d_item {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 100%;
    padding: 0 !important;
    flex-shrink: 0;
}
/* 메뉴 사이 동그란 점 (두 번째 메뉴부터 왼쪽 간격 가운데) */
.sub2d_menu_area.out10_bar ul.Sub2d_gnb li.Sub2d_item + li.Sub2d_item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-0.5 * clamp(36px, calc(3vw + 20px), 74px));
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--o10-dot, rgba(255,255,255,0.6));
    display: block !important;
}
.sub2d_menu_area.out10_bar ul.Sub2d_gnb li.Sub2d_item a {
    position: relative;
    display: flex !important;
    align-items: center;
    height: 100%;
    padding: 0 !important;
    font-size: var(--dep2-font-size, clamp(14px, 1.1vw, 17px)) !important;
    font-weight: var(--dep2-font-weight, 600) !important;
    letter-spacing: var(--dep2-letter-spacing, normal) !important;
    color: var(--o10-text, #fff) !important;
    white-space: nowrap;
    text-decoration: none;
    background: transparent !important;
    border-radius: 0 !important;
    opacity: 0.85;
    transition: opacity 0.25s ease, color 0.25s ease;
}
.sub2d_menu_area.out10_bar ul.Sub2d_gnb li.Sub2d_item a::after { display: none !important; content: none !important; }
.sub2d_menu_area.out10_bar ul.Sub2d_gnb li.Sub2d_item a:hover,
.sub2d_menu_area.out10_bar ul.Sub2d_gnb li.Sub2d_item.active a {
    opacity: 1;
    color: var(--dep2-active-color, var(--o10-text, #fff)) !important;
}

/* 미끄러지는 액티브 하단 라인 */
.sub2d_menu_area.out10_bar ul.Sub2d_gnb li.out10_ind {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: var(--o10-line-h, 3px);
    padding: 0 !important;
    background: var(--dep2-active-bar-color, var(--secondary, #f39800));
    opacity: 0;
    pointer-events: none;
    transition: left 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
    list-style: none;
}
.sub2d_menu_area.out10_bar ul.Sub2d_gnb li.out10_ind::before { display: none !important; content: none !important; }
.sub2d_menu_area.out10_bar.out10_noline ul.Sub2d_gnb li.out10_ind { display: none !important; }
.sub2d_menu_area.out10_bar .Sub2d_nav { display: none !important; }

/* 모바일 (~767px): 가로 스크롤 */
@media only all and (max-width:767px) {
    .out10_area.sub2d_menu_out_area {
        margin-top: var(--dep2-offset-top-mo, 0px);
        margin-bottom: var(--dep2-margin-bottom-mo, 0px);
    }
    .sub2d_menu_area.out10_bar .Sub2d_scroller { height: var(--dep2-height-mo, 48px); }
    .sub2d_menu_area.out10_bar .Sub2d_viewport {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .sub2d_menu_area.out10_bar .Sub2d_viewport::-webkit-scrollbar { display: none; }
    .sub2d_menu_area.out10_bar ul.Sub2d_gnb { gap: 28px !important; width: max-content; }
    .sub2d_menu_area.out10_bar ul.Sub2d_gnb li.Sub2d_item + li.Sub2d_item::before { left: -14px; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
    .sub2d_menu_area.out10_bar ul.Sub2d_gnb li.Sub2d_item a { font-size: var(--dep2-font-size-mo, 14px) !important; }
    .sub2d_menu_area.out10_bar .Sub2d_nav {
        display: flex !important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        color: #333;
        font-size: 20px;
        background: rgba(255,255,255,0.9);
        border: 1px solid #ddd;
        border-radius: 50%;
        z-index: 10;
        cursor: pointer;
    }
    .sub2d_menu_area.out10_bar .Sub2d_nav.prev { left: 2px; }
    .sub2d_menu_area.out10_bar .Sub2d_nav.next { right: 2px; }
    .sub2d_menu_area.out10_bar .Sub2d_nav[hidden] { display: none !important; }
}