/**
 * dep2_skins/out_5 스킨 스타일
 * out_4 기반 + 바 우측 흰색 확장 (화면 끝까지)
 *
 * 구조:
 * - 좌측 데코바: 컬러 (inner 왼쪽 ~ 화면 좌측 끝)
 * - 셀렉트 영역: 컬러 배경 + 흰색 폰트
 * - 우측 확장: 셀렉트 끝 ~ 화면 우측 끝 = 흰색
 * - 모바일: 컬러 바 100%, 3뎁스 아래줄 흰색 배경
 */

/* ★ 가로스크롤 방지 */
body {
    overflow-x: hidden;
}

/* ========================================
   out5_area 컨테이너
   ======================================== */
@media only all and (min-width:768px) {
    .out5_area.sub2d_menu_out_area {
        width: 100%;
        position: relative;
        overflow: visible;
        margin-top: var(--dep2-offset-top, 0px);
        z-index: 50;
    }
    .out5_area > .contents-container {
        overflow: visible !important;
    }
}
@media only all and (max-width:767px) {
    .out5_area.sub2d_menu_out_area {
        width: 100%;
        position: relative;
        overflow: hidden;
        margin-top: var(--dep2-offset-top-mo, 0px);
        z-index: 50;
    }
    .out5_area > .contents-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ========================================
   ★ 우측 흰색 전체 레이어 (out5_area 직속)
   셀렉트 바 전체 뒤에 깔리는 흰색 배경
   ======================================== */
@media only all and (min-width:768px) {
    .out5_white_layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--dep2-height, clamp(50px, 4vw, 60px));
        background: #fff;
        z-index: 0;
        pointer-events: none;
    }
}
@media only all and (max-width:767px) {
    .out5_white_layer {
        display: none;
    }
}

/* ========================================
   sub2d_menu_area (메뉴 영역)
   ======================================== */
.out5_area .sub2d_menu_area {
    width: auto;
    display: inline-flex;
    flex-direction: column;
    position: relative;
}

/* ★ 컬러 배경 레이어: 좌측 화면 끝까지 확장 */
@media only all and (min-width:768px) {
    .out5_area .dep2_bg_layer {
        position: absolute;
        top: 0;
        right: 0;
        width: calc(100% + 100vw);
        height: 100%;
        border-radius: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 0;
    }
    .out5_area .dep2_bg_layer::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--dep2-bg-base-color, var(--dynamic-bg-color, var(--primary)));
        opacity: var(--dep2-bg-opacity, 1);
    }
}
@media only all and (max-width:767px) {
    .out5_area .dep2_bg_layer {
        position: absolute;
        top: 0;
        left: -100vw;
        width: 300vw;
        height: var(--dep2-height-mo, 44px);
        overflow: hidden;
        pointer-events: none;
        z-index: 0;
    }
    /* 3뎁스 있을 때 메인행만 컬러 */
    .out5_area .dep2_bg_layer::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--dep2-bg-base-color, var(--dynamic-bg-color, var(--primary)));
        opacity: var(--dep2-bg-opacity, 1);
    }
}

/* ========================================
   out5_row (행 레이아웃)
   ======================================== */
.out5_area .out5_row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}

.out5_area .out5_row--main {
    height: var(--dep2-height, clamp(50px, 4vw, 60px));
}

/* ★ 우측 흰색 꼬리 (셀렉트 끝 ~ 바 끝, PC전용) */
@media only all and (min-width:768px) {
    .out5_white_tail {
        flex: 1;
        height: 100%;
        position: relative;
    }
}
@media only all and (max-width:767px) {
    .out5_white_tail {
        display: none;
    }
}

/* 3뎁스 모바일줄 */
@media only all and (min-width:768px) {
    .out5_area .out5_row--d3mo {
        display: none;
    }
    .out5_area .out5_d3_pc {
        display: flex;
    }
    .out5_area .out5_d3_mo {
        display: none;
    }
}
@media only all and (max-width:767px) {
    .out5_area .out5_row--main {
        height: var(--dep2-height-mo, 44px);
        width: 100%;
    }
    .out5_area .out5_row--d3mo {
        display: flex;
        width: 100%;
        height: var(--dep2-height-mo, 44px);
        background: #fff;
    }
    .out5_area .out5_d3_pc {
        display: none !important;
    }
    .out5_area .out5_d3_mo {
        display: flex;
        flex: 1;
    }
}

/* ========================================
   Home 아이콘
   ======================================== */
.out5_area .out5_home {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 100%;
    padding: 0 clamp(12px, 1vw, 18px);
    border-right: 1px solid rgba(255,255,255,0.2);
}
.out5_area .out5_home img {
    width: clamp(18px, 1.5vw, 24px);
    height: clamp(18px, 1.5vw, 24px);
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.out5_area .out5_home:hover img {
    opacity: 1;
}
@media only all and (max-width:767px) {
    .out5_area .out5_home {
        flex: 0 0 50px;
        padding: 0;
    }
    .out5_area .out5_home img {
        width: 18px;
        height: 18px;
    }
}

/* ========================================
   셀렉트 드롭다운 공통 (컬러 배경 버전)
   ======================================== */
.out5_area .out5_select {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}
@media only all and (min-width:768px) {
    .out5_area .out5_select {
        min-width: var(--dep2-select-min-w, clamp(120px, 10vw, 180px));
    }
}
@media only all and (max-width:767px) {
    .out5_area .out5_row--main .out5_select {
        flex: 1;
        min-width: 0;
    }
}

/* ★ 셀렉트 버튼 (기본: 컬러 배경 + 흰색 폰트) */
.out5_area .out5_select__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 clamp(10px, 1vw, 16px);
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    color: #fff;
    font-size: var(--dep2-font-size, clamp(13px, 1vw, 15px));
    font-weight: var(--dep2-font-weight, 500);
    letter-spacing: var(--dep2-letter-spacing, normal);
    white-space: nowrap;
    gap: 6px;
    transition: background 0.2s;
}
.out5_area .out5_select__btn:hover {
    background: rgba(255,255,255,0.08);
}
.out5_area .out5_select__btn.on {
    background: rgba(0,0,0,0.12);
}

/* ★ 셀렉트 버튼 - 흰색 배경 버전 (3뎁스 모바일) */
.out5_area .out5_select__btn--white {
    background: transparent;
    color: #333;
    border-right: none;
    border-bottom: none;
}
.out5_area .out5_select__btn--white:hover {
    background: rgba(0,0,0,0.04);
}
.out5_area .out5_select__btn--white.on {
    background: rgba(0,0,0,0.06);
}
.out5_area .out5_select__btn--white i {
    color: #666;
}

/* 화살표 */
.out5_area .out5_select__btn i {
    font-size: 1.2em;
    opacity: 0.7;
    transition: transform 0.25s ease, opacity 0.2s;
    flex-shrink: 0;
}
.out5_area .out5_select__btn.on i {
    transform: rotate(180deg);
    opacity: 1;
}

@media only all and (max-width:767px) {
    .out5_area .out5_select__btn {
        font-size: var(--dep2-font-size-mo, 13px);
        padding: 0 10px;
        justify-content: center;
        gap: 4px;
    }
    .out5_area .out5_row--main .out5_select:last-child .out5_select__btn {
        border-right: none;
    }
}

/* ★ 드롭다운 패널 (기본: 컬러 배경) */
.out5_area .out5_select__panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: var(--dep2-bg-base-color, var(--dynamic-bg-color, var(--primary)));
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    z-index: 999;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.out5_area .out5_select__panel.is-show {
    opacity: 1;
    transform: translateY(0);
}
.out5_area .out5_select__panel::-webkit-scrollbar { width: 4px; }
.out5_area .out5_select__panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }

/* ★ 드롭다운 패널 - 흰색 배경 버전 (3뎁스 모바일) */
.out5_area .out5_select__panel--white {
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.out5_area .out5_select__panel--white::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
.out5_area .out5_select__panel--white .out5_select__a {
    color: #555;
}
.out5_area .out5_select__panel--white .out5_select__a:hover {
    background: rgba(0,0,0,0.05);
    color: #222;
}
.out5_area .out5_select__panel--white .out5_select__a.is-current {
    color: var(--dynamic-bg-color, var(--primary));
    font-weight: 600;
    background: rgba(0,0,0,0.03);
}

/* 드롭다운 목록 */
.out5_area .out5_select__list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}
.out5_area .out5_select__item {
    margin: 0;
}
.out5_area .out5_select__a {
    display: block;
    padding: 10px 16px;
    color: rgba(255,255,255,0.8);
    font-size: var(--dep2-font-size, clamp(13px, 1vw, 15px));
    font-weight: 400;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.out5_area .out5_select__a:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.out5_area .out5_select__a.is-current {
    color: #fff;
    font-weight: 600;
    background: rgba(0,0,0,0.15);
}

@media only all and (max-width:767px) {
    .out5_area .out5_select__panel {
        left: 0;
        right: 0;
        min-width: auto;
        border-radius: 0 0 6px 6px;
    }
    .out5_area .out5_select__a {
        font-size: var(--dep2-font-size-mo, 13px);
        padding: 10px 14px;
    }
}

/* ========================================
   마진 처리
   ======================================== */
@media only all and (min-width:768px) {
    .out5_area.sub2d_menu_out_area {
        margin-bottom: var(--dep2-margin-bottom, 0px);
    }
}
@media only all and (max-width:767px) {
    .out5_area.sub2d_menu_out_area {
        margin-bottom: var(--dep2-margin-bottom-mo, 0px);
    }
}

/* ========================================
   고정(sticky) 상태
   ======================================== */
.out5_area.dep2_fixed {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.out5_area.dep2_fixed .out5_white_layer {
    border-bottom-color: transparent;
}