@charset "utf-8";
/* CSS Document */
/* input과 select가 셀 크기에 맞게 채워지도록 설정 */
td input, td select { width: 100%; box-sizing: border-box; }

 /* 초기에는 멀티셀렉트 래퍼를 숨깁니다. */
.multiselect-wrapper {
	display: none;
    flex: 1 1 auto; 
}
        
/* input은 기본적으로 보이도록 설정 */
.input-wrapper {
	display: block;
    flex: 1 1 auto;
}

/* label을 클릭 가능하도록 스타일 설정 */
.label-toggle-btn {
	cursor: pointer;
	/* 배경 이미지 추가 */
   	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23343a40'%3e%3cpath d='M10.5 5.5L16 12L10.5 18.5L9 17L13 12L9 7L10.5 5.5Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat; /* 반복 방지 */
    background-position: right 0.75rem center; /* 오른쪽 끝에서 0.75rem 안쪽 중앙에 배치 */
    background-size: 1rem 1rem; /* 이미지 크기 조정 */
    padding-right: 2rem; /* 이미지 공간 확보를 위해 오른쪽 패딩 추가 */
	/* ⭐[핵심 추가] 텍스트 드래그(선택) 방지 */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+ */
    user-select: none;         /* Standard */
}

/* input-group 내 input/select의 왼쪽 모서리를 둥글지 않게 설정 */
.input-toggle, 
.select-toggle + .btn-group button.multiselect {
	border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* multiselect 버튼에 form-control 스타일 적용하여 input과 동일하게 보이도록 함 */
.select-toggle + .btn-group { width: 100%; }
.select-toggle + .btn-group button.multiselect.dropdown-toggle {
	display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem;
    line-height: 1.5; color: #495057; background-color: #fff;
    border: 1px solid #ced4da; border-radius: .25rem;
    border-top-left-radius: 0; border-bottom-left-radius: 0;
}

/* ⭐[수정] 이 JS에서 사용하는 라벨에만 너비 고정 적용 */
.db-selector-group .input-group-text {
    width: 100px; 
    min-width: 100px;
    display: flex; /* 내부 정렬용 */
    align-items: center; 
    justify-content: center;
}

/* 래퍼들이 남은 공간을 확보하도록 설정 */
.db-selector-group .multiselect-wrapper,
.db-selector-group .input-wrapper {
    flex: 1 1 auto; /* 남은 공간을 채움 */
    min-width: 0;  /* 너비 계산 오류 방지 */
}

/* 멀티셀렉트 버튼 너비를 확보된 공간에 꽉 차도록 강제 */
.db-selector-group .multiselect-wrapper .btn {
    width: 100% !important;
    min-width: 0 !important; /* 콘텐츠 길이에 영향 받지 않도록 */
    max-width: 100% !important; 
}


/* --- input-group 시각적 스타일 모방 --- */

/* ⭐[수정] 이 JS에서 사용하는 요소에만 테두리 스타일 적용 */
.db-selector-group .input-group-text,
.db-selector-group .multiselect-wrapper .btn,
.db-selector-group .input-wrapper .form-control {
    border: 1px solid #ced4da; /* 기본 테두리 */
    /* 높이를 부트스트랩 폼 컨트롤과 맞춤 (필요시 사용) */
    /* height: calc(1.5em + .75rem + 2px); */ 
}

/* ⭐[수정] 이 JS에서 사용하는 라벨에만 연결 스타일 적용 */
.db-selector-group .input-group-text {
    border-right: none;
    border-radius: .25rem 0 0 .25rem; /* 왼쪽만 둥글게 */
    background-color: #e9ecef;
}

.db-selector-group .multiselect-wrapper .btn,
.db-selector-group .input-wrapper .form-control {
    border-radius: 0 .25rem .25rem 0; /* 오른쪽만 둥글게 */
    margin-left: -1px; /* 테두리 겹침 방지 */
}