/**
 * dep2_skins/out_6 스킨 스타일
 * hayan_total 게시판 line 탭 디자인 동일
 *
 * 특징:
 * - 흰색 배경 + 하단 보더라인
 * - 슬라이딩 인디케이터 (마우스 오버 시 이동, 리브 시 active 복귀)
 * - 메인컬러(--primary) 기본, 관리자 설정으로 변경 가능
 */

/* ========================================
   dep2_out_float_wrap (높이 0 래퍼 - flow 차지 안함)
   ======================================== */
.dep2_out_float_wrap {
    width: 100%;
    float: left;
    height: 0;
    overflow: visible;
    position: relative;
    z-index: 50;
}

/* ========================================
   out6_area 컨테이너 (absolute - flow 영향 없음)
   ======================================== */

/* PC */
@media only all and (min-width:768px) {
    .out6_area.sub2d_menu_out_area {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        background: #fff;
        margin-top: var(--dep2-offset-top, 0px);
        margin-bottom: var(--dep2-margin-bottom, 0px);
    }
}

/* 모바일 */
@media only all and (max-width:767px) {
    .out6_area.sub2d_menu_out_area {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        margin-top: var(--dep2-offset-top-mo, 0px);
        margin-bottom: var(--dep2-margin-bottom-mo, 0px);
    }
    .out6_area > .contents-container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ========================================
   out6_tabs (탭 래퍼)
   ======================================== */
.out6_area .out6_tabs {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    position: relative;
    border-bottom: 2px solid #e8e8e8;
    height: var(--dep2-height, clamp(50px, 4vw, 60px));
    align-items: stretch;
}

/* ========================================
   out6_btn (탭 버튼)
   ======================================== */
.out6_area .out6_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(16px, 1.5vw, 28px);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--dep2-font-size, clamp(14px, 1.1vw, 16px));
    font-weight: var(--dep2-font-weight, 500);
    letter-spacing: var(--dep2-letter-spacing, normal);
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
}
.out6_area .out6_btn:hover:not(.active) {
    color: var(--out6-active-color, var(--primary));
}
.out6_area .out6_btn.active {
    color: var(--out6-active-color, var(--primary));
    font-weight: 700;
}

.out6_area .out6_label {
    font-weight: inherit;
}

/* ========================================
   out6_indicator (슬라이딩 인디케이터)
   ======================================== */
.out6_area .out6_indicator {
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 3px;
    background: var(--out6-bar-color, var(--out6-active-color, var(--primary)));
    border-radius: 3px 3px 0 0;
    transition: left 0.3s ease, width 0.3s ease;
    pointer-events: none;
}

/* ========================================
   모바일 반응형
   ======================================== */
@media only all and (max-width:767px) {
    .out6_area .out6_tabs {
        height: var(--dep2-height-mo, 50px);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .out6_area .out6_tabs::-webkit-scrollbar {
        display: none;
    }
    .out6_area .out6_btn {
        font-size: var(--dep2-font-size-mo, 14px);
        padding: 0 16px;
    }
}

/* ========================================
   고정(sticky) 상태
   ======================================== */
.out6_area.dep2_fixed {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}