/* 부서 선택 select2 스타일.

   테두리·여백·글자는 화면마다 다르다. 값을 여기에 박아두면 select2 박스만
   주변 입력칸과 따로 놀게 되므로, agency-select.js 가 원본 select 의 계산된
   스타일을 읽어 --agency-* 커스텀 속성으로 넘겨준다.
   아래 fallback 값은 원본을 읽지 못했을 때만 쓰인다. */

/* 라벨이 float:left 인 화면이 있다. 원래 select 는 replaced element 라 float 옆으로
   밀리지 않고 아래로 내려갔지만, select2 가 만드는 컨테이너는 평범한 block 이라
   그대로 라벨 위에 겹친다. clear 로 라벨 아래에 놓는다. */
.agency-select.select2-container{display: block;clear: both;margin-left: var(--agency-margin-left, 0);}

/* 닫힌 상자 */
.select2-container--default.agency-select .select2-selection--single{height: auto;background: #fff;border-width: var(--agency-border-width, 2px);border-style: var(--agency-border-style, solid);border-color: var(--agency-border-color, #F1F2F7);border-radius: var(--agency-radius, 5px);padding: var(--agency-padding, 10px);}
.select2-container--default.agency-select .select2-selection--single .select2-selection__rendered{padding: 0 24px 0 0;line-height: 1.2;font-size: var(--agency-font-size, 14px);font-weight: var(--agency-font-weight, 500);color: var(--agency-color, #333);}
.select2-container--default.agency-select .select2-selection--single .select2-selection__arrow{top: 0;right: 8px;height: 100%;}
.select2-container--default.agency-select.select2-container--open .select2-selection--single{border-color: #8F93AA;}

/* 드롭다운 목록.
   행의 위아래 여백을 없애고 높이로 대신한다. 여백이 있으면 그만큼 트리 세로선이
   끊겨 칸마다 토막난 선으로 보인다. */
.agency-select-dropdown .select2-results__option{padding: 0 8px;font-size: 14px;color: #333;}
.agency-select-dropdown .select2-search--dropdown .select2-search__field{padding: 8px;border: 1px solid #BABDCE;border-radius: 4px;font-size: 14px;}

.agency_row{display: flex;align-items: center;min-width: 0;}
.agency-select-dropdown .agency_row{min-height: 32px;}
.agency_name{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

/* 트리 선. 문자(├, └)로 그리면 폰트에 따라 세로가 어긋나므로 테두리로 그린다.
   agency_guide 한 칸이 계층 한 단계다. */
.agency_guide{position: relative;flex: 0 0 auto;width: 16px;align-self: stretch;}
.agency_guide--line::before,
.agency_guide--elbow::before{content: '';position: absolute;left: 7px;top: 0;bottom: 0;border-left: 1px solid #DDE0EA;}
/* 막내는 아래로 이어질 형제가 없으므로 세로선이 중간에서 끝난다. */
.agency_guide--elbow.agency_guide--last::before{bottom: 50%;}
.agency_guide--elbow::after{content: '';position: absolute;left: 7px;top: 50%;width: 7px;border-top: 1px solid #DDE0EA;}

/* 접기/펴기 화살표. 하위가 없는 부서에는 같은 너비의 빈 칸(--empty)이 들어가
   이름 시작 위치가 어긋나지 않는다. */
.agency_toggle{flex: 0 0 auto;width: 14px;margin-right: 4px;font-size: 10px;line-height: 1;color: #8F93AA;text-align: center;cursor: pointer;}
.agency_toggle--empty{cursor: default;}
.agency_toggle:not(.agency_toggle--empty):hover{color: #3F4254;}

/* 단계별 아이콘 */
.agency_icon{flex: 0 0 auto;width: 14px;margin-right: 6px;font-size: 11px;text-align: center;}
.agency_icon--l0{color: #F46256;}
.agency_icon--l1{color: #F5A623;}
.agency_icon--l2{color: #3CB371;}

/* 단계별 글자 구분. 닫힌 상자에는 적용하지 않는다 —
   선택한 부서가 회색 작은 글씨로 나오면 비활성처럼 보인다. */
.agency-select-dropdown .agency_row--l0 .agency_name{font-size: 12px;color: #888;}
.agency-select-dropdown .agency_row--l1 .agency_name{font-weight: 700;}

/* 검색 결과에 붙는 소속(상위 부서) 표기 */
.agency_parent{flex: 0 0 auto;margin-left: 6px;font-size: 12px;color: #888;font-weight: 400;}