/**
 * dep2_skins/out_11 — 중앙정렬 + 아래로 휘는 라운드 라인 (1026)
 * - 메뉴 가운데 정렬, 간격 --o11-gap(-mo)
 * - 액티브/호버: 글자보다 양옆 --o11-line-ext 만큼 긴 둥근 곡선이 왼쪽→오른쪽으로 그려짐 (SVG stroke-dashoffset)
 *
 * CSS 변수 (skin.php 주입)
 * --o11-gap(-mo), --o11-text, --o11-line-h, --o11-line-ext, --o11-line-gap, --o11-curve
 * --dep2-height(-mo), --dep2-font-size(-mo), --dep2-font-weight, --dep2-letter-spacing
 * --dep2-active-color(기본 --primary), --dep2-active-bar-color(기본 = 액티브 글자 컬러)
 * --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;
}

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

.sub2d_menu_area.out11_bar {
    width: 100% !important;
    float: left;
    position: relative;
    background-color: transparent !important;
    overflow: visible !important;
}
.sub2d_menu_area.out11_bar:before,
.sub2d_menu_area.out11_bar:after { display: none !important; content: none !important; }
.sub2d_menu_area.out11_bar .home,
.sub2d_menu_area.out11_bar .Sub2d_nav { display: none !important; }
.sub2d_menu_area.out11_bar .out11_inner { background-color: transparent !important; }

.sub2d_menu_area.out11_bar .Sub2d_viewport {
    height: var(--dep2-height, clamp(56px, 4.6vw, 80px));
    display: flex;
    align-items: stretch;
    padding: 0;
}
.sub2d_menu_area.out11_bar ul.Sub2d_gnb {
    list-style: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--o11-gap, clamp(40px, calc(3.9vw + 15px), 90px)) !important;
    width: max-content;
    max-width: none;
    height: 100%;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}
.sub2d_menu_area.out11_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.out11_bar ul.Sub2d_gnb li.Sub2d_item::before,
.sub2d_menu_area.out11_bar ul.Sub2d_gnb li.Sub2d_item::after { display: none !important; content: none !important; }
.sub2d_menu_area.out11_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(15px, 1.15vw, 19px)) !important;
    font-weight: var(--dep2-font-weight, 500) !important;
    letter-spacing: var(--dep2-letter-spacing, normal) !important;
    color: var(--o11-text, #555) !important;
    white-space: nowrap;
    text-decoration: none;
    background: transparent !important;
    border-radius: 0 !important;
    transition: color 0.25s ease;
}
.sub2d_menu_area.out11_bar ul.Sub2d_gnb li.Sub2d_item a::before,
.sub2d_menu_area.out11_bar ul.Sub2d_gnb li.Sub2d_item a::after { display: none !important; content: none !important; }
.sub2d_menu_area.out11_bar ul.Sub2d_gnb li.Sub2d_item a:hover,
.sub2d_menu_area.out11_bar ul.Sub2d_gnb li.Sub2d_item a:focus-visible,
.sub2d_menu_area.out11_bar ul.Sub2d_gnb li.Sub2d_item.active a {
    color: var(--dep2-active-color, var(--primary, #2e7d32)) !important;
}

/* 글자 + 라인 */
.sub2d_menu_area.out11_bar .o11_txt {
    position: relative;
    display: inline-block;
    line-height: 1.3;
}
.sub2d_menu_area.out11_bar .o11_line {
    position: absolute;
    left: calc(-1 * var(--o11-line-ext, 8px));
    width: calc(100% + 2 * var(--o11-line-ext, 8px));
    top: calc(100% + var(--o11-line-gap, 4px));
    height: calc(var(--o11-curve, 6px) * 2.5 + var(--o11-line-h, 3px));
    overflow: visible;
    pointer-events: none;
    /* 숨김: 오른쪽에서 전부 잘라냄 (선 끝 둥근 캡까지 -12px 여유) → 보일 때 왼쪽→오른쪽으로 열림
       ※ stroke-dasharray + pathLength + non-scaling-stroke 조합은 크롬에서 일부가 남아 보이는 버그 → clip-path 로 대체 */
    -webkit-clip-path: inset(-12px calc(100% + 12px) -12px -12px);
    clip-path: inset(-12px calc(100% + 12px) -12px -12px);
    transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1), -webkit-clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.sub2d_menu_area.out11_bar.out11_flat .o11_line { height: calc(var(--o11-line-h, 3px) + 4px); }
.sub2d_menu_area.out11_bar .o11_line path {
    fill: none;
    stroke: var(--dep2-active-bar-color, var(--dep2-active-color, var(--primary, #2e7d32)));
    stroke-width: var(--o11-line-h, 3px);
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
/* 왼쪽→오른쪽으로 그려짐: 액티브(처음 보일 때) + 호버 */
.sub2d_menu_area.out11_bar.o11_ready li.Sub2d_item.active .o11_line,
.sub2d_menu_area.out11_bar li.Sub2d_item a:hover .o11_line,
.sub2d_menu_area.out11_bar li.Sub2d_item a:focus-visible .o11_line {
    -webkit-clip-path: inset(-12px -12px -12px -12px);
    clip-path: inset(-12px -12px -12px -12px);
}
@media (prefers-reduced-motion: reduce) {
    .sub2d_menu_area.out11_bar .o11_line { transition: none; }
}

/* 모바일 (~767px): 가로 스크롤, 넘치지 않으면 가운데 */
@media only all and (max-width:767px) {
    .out11_area.sub2d_menu_out_area {
        margin-top: var(--dep2-offset-top-mo, 0px);
        margin-bottom: var(--dep2-margin-bottom-mo, 0px);
    }
    .sub2d_menu_area.out11_bar .Sub2d_viewport {
        height: var(--dep2-height-mo, 50px);
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .sub2d_menu_area.out11_bar .Sub2d_viewport::-webkit-scrollbar { display: none; }
    .sub2d_menu_area.out11_bar ul.Sub2d_gnb {
        gap: var(--o11-gap-mo, 28px) !important;
        padding: 0 calc(var(--o11-line-ext, 8px) + 6px) !important;
    }
    .sub2d_menu_area.out11_bar ul.Sub2d_gnb li.Sub2d_item a { font-size: var(--dep2-font-size-mo, 14px) !important; }
}