@charset "UTF-8";
.cs-wrapper {
    font-size: 15px;
    padding: 2px;
}

/* .cs-selected {
    padding: 6px 8px;
    border: 1px solid #aaa;
    background: #fff;
    cursor: pointer;
    border-radius: 4px;
} */

.cs-selected {
    position: relative; /* 화살표 위치 기준점 */
    padding: 6px 35px 6px 10px; /* 오른쪽에 화살표 공간 확보 */
    border: 1px solid #aaa;
    background: #fff;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

/* 화살표 모양 만들기 */
.cs-selected::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    width: 8px;  /* 화살표 너비 */
    height: 8px; /* 화살표 높이 */
    border-right: 2px solid #666; /* 오른쪽 테두리 */
    border-bottom: 2px solid #666; /* 아래쪽 테두리 */
    transform: translateY(-70%) rotate(45deg); /* 회전시켜서 V 모양으로 만듦 */
    transition: transform 0.2s ease; /* 회전 애니메이션용 */
}

/* (선택) 리스트가 열렸을 때 화살표 뒤집기 */
.cs-wrapper.is-open .cs-selected::after {
    transform: translateY(-30%) rotate(-135deg); /* 위로 향하게 회전 */
}

.cs-list {
    position: absolute;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #aaa;
    border-top: 0;
    max-height: 40vh;
    overflow-y: auto;
    display: none;
    z-index: 1000;
}

.cs-list .cs-option:last-child {
    border-bottom: 0px
}

.cs-search {
    padding: 6px;
    border: 0;
    border-bottom: 1px solid #ddd;
    width: 100%;
}

.cs-option {
    padding: 8px;
    cursor: pointer;
    border-bottom: 0.5px dashed #d7d7d7;
}

.cs-option:hover {
    background: #e6f2ff;
}

.cs-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.cs-option.cs-hover {
    background-color: #e6f2ff;
    outline: none;
}