/**
 * dep2_skins/in_1 스킨 스타일
 * 이미지 내부 셀렉트박스 스타일 (1뎁스/2뎁스 드롭다운)
 * 위치: 이미지 영역 우측 하단
 */

/* ========================================
   sub_top_select_area (셀렉트박스 영역 컨테이너)
   ======================================== */

/* PC */
@media only all and (min-width:768px) {
    .sub1d_tit_area_new .sub_top_select_area {
        position: absolute;
        bottom: 0;
        right: 0px;
        width: 100%;
        z-index: 20;
    }
}

/* PC2 (1700px 이하) */
@media all and (max-width:1700px) and (min-width:768px) {
    .sub1d_tit_area_new .sub_top_select_area {
        position: absolute;
        bottom: 0;
        right: 40px;
        width: 100%;
        z-index: 20;
    }
}

/* 모바일 */
@media only all and (max-width:767px) {
    .sub1d_tit_area_new .sub_top_select_area {
        position: relative;
        width: 100%;
        z-index: 20;
        margin-top: 15px;
    }
    .sub1d_tit_area_new .sub_top_select_area .contents-container {
        padding: 0px !important;
    }
}

/* ========================================
   sub_top_select_wrap (셀렉트박스 래퍼)
   ======================================== */

/* PC */
@media only all and (min-width:768px) {
    .sub_top_select_wrap {
        display: flex;
        flex-direction: row;
        gap: 15px;
        align-items: stretch;
        position: absolute;
        right: 0px;
        top: -95px;
        background-color: #fff;
        padding: 20px 25px;
        border-radius: 30px 0 0 0;
        width: 40%;
        box-sizing: border-box;
    }
}

/* PC2 (1700px 이하) */
@media all and (max-width:1700px) and (min-width:768px) {
    .sub_top_select_wrap {
        display: flex;
        flex-direction: row;
        gap: 15px;
        align-items: stretch;
        position: absolute;
        right: 0px;
        top: -95px;
        background-color: #fff;
        padding: 21px 0px 21px 25px;
        border-radius: 30px 0 0 0;
        width: 60%;
        box-sizing: border-box;
    }
}

/* 모바일 */
@media only all and (max-width:767px) {
    .sub_top_select_wrap {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: stretch;
        position: relative;
        background-color: #fff;
        padding: 15px 0px;
        border-radius: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ========================================
   select_corner (코너 데코)
   ======================================== */

/* PC */
@media only all and (min-width:768px) {
    .select_corner {
        position: absolute;
        width: 50px;
        height: 50px;
        z-index: 1;
        pointer-events: none;
    }
    .select_corner .corner_cutout {
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
    /* 우측 상단 코너 */
    .sub_topbg_round .corner_rt {
        right: 0;
        bottom: 95px;
    }
    .select_corner.corner_rt .corner_cutout {
        background: radial-gradient(circle at top left, transparent 50px, #fff 50px);
    }
    /* 좌측 하단 코너 */
    .select_corner.corner_lb {
        left: -50px;
        bottom: 0;
    }
    .select_corner.corner_lb .corner_cutout {
        -webkit-mask-image: radial-gradient(circle at top left, transparent 50px, black 50px);
        mask-image: radial-gradient(circle at top left, transparent 50px, black 50px);
    }
}

/* 모바일 */
@media only all and (max-width:767px) {
    .select_corner {
        display: none;
    }
}

/* ========================================
   depth_select_box (셀렉트박스 공통)
   ======================================== */
.depth_select_box {
    position: relative;
    display: inline-block;
    flex: 1;
}

/* ========================================
   depth_select_btn (셀렉트 버튼)
   ======================================== */

/* PC */
@media only all and (min-width:768px) {
    .depth_select_btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        width: 100%;
        padding: 15px 20px;
        background-color: #fff;
        border: 1px solid var(--dynamic-bg-color, var(--primary));
        border-radius: 8px;
        font-size: calc(var(--tx-sm-size) * 1);
        font-weight: 500;
        color: #333;
        cursor: pointer;
        transition: all 0.2s ease;
        box-sizing: border-box;
    }
    /* 1뎁스 글씨, 화살표 컬러 */
    .d1_select_box .depth_select_btn {
        color: var(--dynamic-bg-color, var(--primary));
    }
    .d1_select_box .depth_select_btn .depth_select_arrow svg path {
        stroke: var(--dynamic-bg-color, var(--primary));
    }
    .depth_select_btn:hover {
        border-color: var(--dynamic-bg-color, var(--primary));
    }
    .depth_select_btn.on {
        border-color: var(--dynamic-bg-color, var(--primary));
    }
    /* 2뎁스 셀렉트박스 (활성 스타일) */
    .d2_select_box .depth_select_btn.active_btn {
        background-color: var(--dynamic-bg-color, var(--primary));
        border-color: var(--dynamic-bg-color, var(--primary));
        color: #fff;
    }
    .d2_select_box .depth_select_btn.active_btn .depth_select_arrow svg path {
        stroke: #fff;
    }
}

/* 모바일 */
@media only all and (max-width:767px) {
    .depth_select_btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        padding: 12px 15px;
        background-color: #fff;
        border: 1px solid var(--dynamic-bg-color, var(--primary));
        border-radius: 8px;
        font-size: calc(var(--tx-sm-size) * 0.95);
        font-weight: 500;
        color: #333;
        cursor: pointer;
        transition: all 0.2s ease;
        box-sizing: border-box;
    }
    /* 1뎁스 글씨, 화살표 컬러 */
    .d1_select_box .depth_select_btn {
        color: var(--dynamic-bg-color, var(--primary));
    }
    .d1_select_box .depth_select_btn .depth_select_arrow svg path {
        stroke: var(--dynamic-bg-color, var(--primary));
    }
    .d2_select_box .depth_select_btn.active_btn {
        background-color: var(--dynamic-bg-color, var(--primary));
        border-color: var(--dynamic-bg-color, var(--primary));
        color: #fff;
    }
    .d2_select_box .depth_select_btn.active_btn .depth_select_arrow svg path {
        stroke: #fff;
    }
}

/* ========================================
   depth_select 공통 요소
   ======================================== */
.depth_select_label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.depth_select_arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.depth_select_btn.on .depth_select_arrow {
    transform: rotate(180deg);
}

/* ========================================
   depth_select_dropdown (드롭다운)
   ======================================== */
.depth_select_dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 9999;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.depth_select_dropdown.is-open {
    opacity: 1;
    transform: translateY(0);
}

.depth_select_list {
    list-style: none;
    margin: 0;
    padding: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.depth_select_item {
    margin: 2px 0;
}

.depth_select_link {
    display: block;
    padding: 12px 16px;
    color: #333;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s ease;
    font-size: calc(var(--tx-sm-size) * 1);
}

.depth_select_link:hover {
    background-color: #f5f5f5;
}

.depth_select_item.active .depth_select_link {
    background-color: var(--dynamic-bg-color, var(--primary));
    color: #fff;
    font-weight: 600;
}