@charset "utf-8";
/*
    Multi-Select 드롭다운 메뉴 스타일 통합 및 최종 조정
*/
.multi-select-wrapper > .js-multi-select-menu {
    /* 높이/스크롤 */
    max-height: 200px;
    overflow-y: auto;
    
    /* 너비/정렬 */
    width: max-content !important; 
    /* ⭐️ 최소 너비 설정 (150px 미만으로 좁아지지 않음) */
    min-width: 150px !important;
	/* min-width: 0 !important; */
    left: 0 !important;
    right: auto !important;
    
    /* 동적 너비만큼 오른쪽으로 이동 (JavaScript 변수 --label-width 사용) */
    transform: translateX(var(--label-width, 0)); 
    
    z-index: 1050; 
    white-space: nowrap; 

    /* UL 요소의 상하단 여백 제거 (맨 처음과 맨 끝 여백 없음) */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    
    /* ⭐️ 추가: 마우스 드래그를 통한 텍스트 선택 방지 */
    user-select: none;
    -webkit-user-select: none; 
    -moz-user-select: none;    
    -ms-user-select: none;     
}

/* 라벨 선택 영역 크기 조정 및 체크박스 가림 방지 */
.multi-select-wrapper .dropdown-item.form-check {
    /* 수평 패딩 (사용자 설정 값 0.6rem 유지) */
    padding-left: 0.6rem; 
    padding-right: 0.6rem; 
    
    /* 수직 패딩 (클릭 영역 크기 확대) */
    padding-top: 0.5rem;   
    padding-bottom: 0.5rem; 

    position: relative; 
    /* 항목 자체에 Bootstrap이 준 수직 마진이 있다면 제거 */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 체크박스 위치 미세 조정 */
.multi-select-wrapper .form-check-input {
    margin-left: 0; 
}

/* 라벨 텍스트와 체크박스 사이의 간격 조정 */
.multi-select-wrapper .form-check-label {
    margin-left: 0.5rem; 
}