@charset "UTF-8";

/* 공통 .modal-footer 표준: 좌측(닫기/취소) + 우측 .modal-footer__actions(액션) 분리 */
.modal .modal-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #fafbfc;
    border-top: 1px solid #e5e7eb;
}
.modal .modal-footer__actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}
.modal .modal-footer .btn.round--btn {
    min-width: 100px;
    height: 40px;
}

/* 첨부파일 다운로드 버튼 공통 (QnA·앱버전관리 등 통일) — 흰 바탕/파란 글자 + 앞에 다운로드 아이콘,
   hover 시 파란 채움. 아이콘은 currentColor 마스크라 글자색을 따라 색이 반전된다. */
#content .btn-download,
#content .btn-download-file {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: auto;
    padding: 6px 14px;
    font-size: 12px;
    line-height: 1.2;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #047bb6;
    cursor: pointer;
    flex: none;
    white-space: nowrap;
}
#content .btn-download:hover,
#content .btn-download-file:hover {
    background: #047bb6;
    border-color: #047bb6;
    color: #fff;
}
#content .btn-download::before,
#content .btn-download-file::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 공통 .form--tbl__header / .search-box 보강 (BMS 페이지 패턴) */
.form--tbl__header {
    align-items: center;
}
.form--tbl__header .search-box {
    height: 48px;
}
.form--tbl__header .search-box input {
    height: 100%;
    border: none;
    padding: 0 15px;
    font-size: 15px;
}

/* ========== 로딩 바 ========== */
@keyframes rotate-loading {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.loading-container {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 99999;
}

.loading {
	position: absolute;
	top: calc(100% / 2 - 50px);
	left: calc(100% / 2 - 50px);
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 2px solid transparent;
	border-color: transparent #FF9800 transparent #FF9800;
	animation: rotate-loading 1.5s linear infinite;
	transition: all 0.5s ease-in-out;
}

#loading-text {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	color: #fff !important;
	margin-top: -8px;
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
	transform: translateX(-50%);
}

/* 달력 css 수정 */
.daterangepicker .drp-buttons .btn.btn-primary {
    background: #047bb6;
    color: #fff;
}
.daterangepicker .drp-buttons .btn {
	width: 50px;
    height: 28px;
}

.daterangepicker select.yearselect {
    width: 48%;
}

.daterangepicker select.monthselect {
    width: 50%;
}

/* 테두리만 제거(나머지는 원래대로) */
.daterangepicker select {
    border-radius: 5px;
    padding: 10px;
    border: none;
    color: #1d1d1d;
    font-size: 15px;
    background-color: #fff;
	background: url("../../design/assets/images/select-arrow.png") no-repeat right 10px center;
}

/* 연 → 월 순서: th(테이블 셀)는 그대로 두고 inline 순서만 rtl로 뒤집어
   (<> 화살표 위치·셀렉트 폭은 유지) 셀렉트 내부 글자는 ltr로 복원 */
.daterangepicker th.month {
    direction: rtl;
}
.daterangepicker th.month select,
.daterangepicker th.month .cmm-dd {
    direction: ltr;
}

/* 월/년 커스텀 드롭다운(네이티브 select 대체: 스타일·스크롤 가능) */
.cmm-dd {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.cmm-dd select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.cmm-dd__btn {
    position: relative;
    min-width: 64px;
    border: none;
    background: transparent;
    padding: 2px 18px 2px 12px;
    font-size: 15px;
    font-weight: 700;
    color: #1d1d1d;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
}
/* 작은 삼각형(▼) 화살표 */
.cmm-dd__btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #555;
}
.cmm-dd.is-open .cmm-dd__btn::after {
    border-top-color: #047bb6;
}
.cmm-dd__list {
    display: none;
    position: absolute;
    z-index: 3100;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 100%;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 0 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
    text-align: center;
}
/* 메인 테이블 SimpleBar 룩 — WebKit(회색 둥근 thumb, hover 진해짐)
   주의: scrollbar-width/scrollbar-color(표준 속성)를 함께 쓰면 Chrome 121+에서
   ::-webkit-scrollbar* 규칙이 통째로 무시되어 화살표가 안 사라짐 → 표준 속성 미사용 */
.cmm-dd__list::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}
.cmm-dd__list::-webkit-scrollbar-button,
.cmm-dd__list::-webkit-scrollbar-button:start:decrement,
.cmm-dd__list::-webkit-scrollbar-button:end:increment {
    display: none;
    width: 0;
    height: 0;
}
.cmm-dd__list::-webkit-scrollbar-track {
    background: transparent;
}
.cmm-dd__list::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.4);
    transition: background-color 0.2s linear;
}
.cmm-dd__list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.6);
}
.cmm-dd.is-open .cmm-dd__list {
    display: block;
}
.cmm-dd__opt {
    padding: 3px 14px;
    border-radius: 6px;
    font-size: 14px;
    color: #1d1d1d;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
}
.cmm-dd__opt:hover {
    background: #eef6ff;
    color: #03699c;
}
.cmm-dd__opt.is-active {
    background: #047bb6;
    color: #fff;
}
.cmm-dd__opt.is-disabled {
    color: #cbd5e1;
    cursor: default;
}

/* ── timePicker: 달력 오른쪽에 오전/오후·시·분 배치 + 위아래 스핀버튼 (BMS 이식) ── */
.daterangepicker.single .drp-calendar.left {
    display: flex;
    align-items: stretch;
    max-width: none;
}
.daterangepicker.single .drp-calendar.left .calendar-table {
    flex: 0 0 auto;
}
.daterangepicker.single .drp-calendar.left .calendar-time {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    margin: 0;
    border-left: 1px solid #e8e8e8;
    background: #fff;
}
.daterangepicker.single .calendar-time .daterangepicker_input {
    display: none;
}
/* 시간 드롭다운 목록은 버튼 오른쪽에 뜬다 */
.cmm-dd--time .cmm-dd__list {
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    min-width: 62px;
}
/* 시/분 스피너 (위/아래 버튼) */
.cmm-dd--time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.cmm-dd--time .cmm-dd__spin--up   { margin-bottom: -17px; }
.cmm-dd--time .cmm-dd__spin--down { margin-top: -17px; }
.cmm-dd__spin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 56px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    user-select: none;
    border-radius: 4px;
    transition: background .15s, color .15s;
}
.cmm-dd__spin--up   { transform: rotate(90deg); }
.cmm-dd__spin--down { transform: rotate(-90deg); }
.cmm-dd__spin:hover  { background: #e3f2fd; color: #333; }
.cmm-dd__spin:active { background: #bbdefb; color: #222; }
.cmm-dd--time .cmm-dd__btn {
    border-radius: 0;
    min-width: 52px;
    border-top: none;
    border-bottom: none;
    font-size: 15px;
    padding: 6px 10px;
}
.cmm-dd--time .cmm-dd__btn::after { display: none; }
.cmm-dd--ampm .cmm-dd__btn { min-width: 44px; font-size: 13px; }
.cmm-dd--ampm { margin-right: 6px; }
/* 시:분 콜론 등 텍스트 */
.daterangepicker.single .calendar-time > :not(.daterangepicker_input):not(.cmm-dd):not(select) {
    font-weight: 600;
    font-size: 16px;
    color: #666;
}

/* 비활성 날짜: 취소선 제거, 회색으로만 표시 */
.daterangepicker td.disabled,
.daterangepicker option.disabled {
    text-decoration: none;
}

/* 추가형 달력(cmm-drp-noselect): 선택 강조 제거 → 아무것도 선택 안 된 상태로 표시
   (자동적용+자동닫힘이라 선택 강조가 보일 일이 없어 무방) */
.daterangepicker.cmm-drp-noselect td.active:not(:hover),
.daterangepicker.cmm-drp-noselect td.active.start-date:not(:hover),
.daterangepicker.cmm-drp-noselect td.active.end-date:not(:hover) {
    background-color: transparent;
    color: inherit;
}

/* 시간 전용 픽커(.js-timepicker → .cmm-drp-timeonly): daterangepicker 의 달력 표를 감추고
   시간 선택(시/분/오전오후)만 보이게 한다. */
.daterangepicker.cmm-drp-timeonly { width: auto; min-width: 0; }
.daterangepicker.cmm-drp-timeonly .drp-calendar { max-width: none; width: auto; padding: 6px 8px; float: none; }
.daterangepicker.cmm-drp-timeonly .calendar-table { display: none; }
/* 달력 표를 감췄으니 시간 영역의 좌측 구분선(daterangepicker 기본 .single .drp-calendar.left
   .calendar-time 의 border-left)·여백을 없애고 내용만 가운데로 모은다. 기본 규칙 특이도가 높아
   !important 로 덮는다. */
.daterangepicker.cmm-drp-timeonly .drp-calendar.left .calendar-time,
.daterangepicker.cmm-drp-timeonly .calendar-time { margin: 0; padding: 2px 2px; border-left: 0 !important; justify-content: center; }

/* 범위 달력: 초기화 버튼 — 좌측 하단 끝, 취소 버튼과 동일한 기본(.btn) 룩 */
.daterangepicker .drp-buttons .btn.cmm-drp-reset {
    float: left;
    width: auto;
    min-width: 50px;
    margin-left: 0;
}


.tippy-box[data-theme~='tomato'] {
    color: yellow !important;
    background-color: tomato;
}
.tippy-box[data-placement^=top]>.tippy-arrow:before{
    border-top-color: tomato;
}
	
/* 하단 버튼 · 페이징 배치는 이 파일 아래쪽 '4) 하단 버튼 · 페이징 한 줄' 에서 정의한다 */

/* 페이징: design/assets/css/index.css 의 .pagination 사용, js/util/page.js 의 PAGING.setPage() 로 렌더 */

/* BMS 폼 모달 공통 (adm, device type, oper assign 등) */
.modal .modal-body-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background: #f5f6f8;
    min-height: 0;
}
.modal .modal-section {
    background: #fff;
    border-radius: 6px;
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
/* 여백·구분선만. 크기·굵기·색은 modal_skin.css 공통 */
.modal .section-title {
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}
.modal .section-content {
    display: block;
}

/* 상태 타입 */
.chip.warning, .incident-list .incident-item__type.warning {
  background: #fff2cf !important;
}
.chip.warning i, .incident-list .incident-item__type.warning i {
  background: #f3c950 !important;
}
.chip.alert, .incident-list .incident-item__type.alert {
  background: #fef1f8 !important;
}
.chip.alert i, .incident-list .incident-item__type.alert i {
  background: #e252a7 !important;
}
.chip.info, .incident-list .incident-item__type.info {
  background: #fef1f8 !important;
}
.chip.info i, .incident-list .incident-item__type.info i {
  background: #8180e0 !important;
}
.chip.danger, .incident-list .incident-item__type.danger {
  background: #fff1f1 !important;
}
.chip.danger i, .incident-list .incident-item__type.danger i {
  background: #e54e57 !important;
}
.chip.success, .incident-list .incident-item__type.success {
  background: #eafff0 !important;
}
.chip.success i, .incident-list .incident-item__type.success i {
  background: #56946e !important;
}
.chip.wait, .incident-list .incident-item__type.wait {
  background: #eef5ff !important;
}
.chip.wait i, .incident-list .incident-item__type.wait i {
  background: #4a7de8 !important;
}
.chip.check, .incident-list .incident-item__type.check {
  background: #E7F6F5 !important;
}
.chip.check i, .incident-list .incident-item__type.check i {
  background: #0F8B8D !important;
}



/* 버튼 색 */
.btn.info {
    background: #555555;
    color: #fff;
}
.btn.primary {
    background: #047bb6;
    color: #fff;
}
.btn.danger {
    background: #e54e57;
    color: #fff;
}


/* 폼 */
.form-control[readonly] {
    background-color: #f8f9fa;
    cursor: default;
}

/* 모달 안 읽기전용 값은 박스(회색배경·테두리) 없이 '글자만' 보이게 한다.
   박스 높이를 없애 값 사이 간격도 촘촘해진다. */
#content .modal input[type="text"][readonly]:not(.js-datepicker):not(.js-datetimepicker):not(.js-timepicker),
#content .modal .form-control[readonly]:not(textarea):not(.js-datepicker):not(.js-datetimepicker):not(.js-timepicker),
#content .modal .system-code-readonly {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 2px 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* 날짜·시간 픽커는 readonly 라도 '클릭해서 고르는 입력'이므로 박스(위 예외로 유지)에 더해
   손가락 커서로 클릭 가능함을 알린다. */
.js-datepicker[readonly],
.js-datetimepicker[readonly],
.js-timepicker[readonly] {
    cursor: pointer;
}

/* 상세 모달의 값 표시(스팬)도 동일하게 글자만. 여러 줄 값은 높이만 자동으로 둔다. */
#content .modal .form-value,
#content .modal .form-value-textarea {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}
/* 박스가 사라졌으니 값 행 간격도 촘촘하게 */
#content .modal .form-group-view { margin-bottom: 8px !important; }
.form-group {
    margin-bottom: 15px;
}

/* datepicker(xdsoft) 를 좀 더 동글동글하게. 달력은 body 에 붙으므로 전역 셀렉터 + !important. */
.xdsoft_datetimepicker {
    border-radius: 20px !important;
    padding: 14px !important;
    overflow: hidden !important; /* 내부 달력의 각진 배경이 둥근 모서리를 덮지 않도록 클립 */
}
.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar td > div {
    border-radius: 13px !important;
}
.xdsoft_datetimepicker .xdsoft_label,
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select,
.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_today_button {
    border-radius: 12px !important;
}
.xdsoft_datetimepicker .xdsoft_time_box .xdsoft_time {
    border-radius: 12px !important;
}

/* 필수 input */
.essential_text {
    content: "*";
    display: inline-block;
    color: #B3262C;
    margin-left: 4px;
    vertical-align: middle;
    transform: translateY(1px);
}

/* 맵 목록 데이터 없음 */
.no-data {
	overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    color: #8e8e8e;
}

/* 테이블 조회 결과 없음 공통 (customer/site 의 .cs-empty 회색 톤에 맞춤) */
.tbl-no-data {
    text-align: center;
    padding: 40px 14px;
    color: #9aa5b2;
    font-size: 13px;
    font-weight: 400;
}

/* 전체 레이아웃 스크롤 방지 (좌측 패널 하단 흰여백 해결) */
.app {
    height: 100vh;
    overflow: hidden;
}

/* 본체 영역 스크롤 허용 */
.content {
    overflow-y: auto;
}

/* 왼쪽 메뉴 높이 — 로고 아래부터 sidenav 바닥까지 채우고, 내부를 flex 컬럼으로 나눈다.
   (스크롤 메뉴 #leftMenu 가 남은 높이를 채우고 nav-foot 는 항상 그 아래 고정) */
.sidenav__nav {
    height: calc(100vh - 165px);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* 스크롤 메뉴는 nav-foot 위 남은 공간을 그대로 채운다.
   JSP 인라인의 height:calc(100%-220px)·max-height:550px(매직넘버) 대신 flex 로 잡아,
   화면이 작아지면 nav-foot 바로 위까지 줄고 커지면 늘어난다(겹침 방지). */
.sidenav__nav #leftMenu {
    flex: 1 1 auto;
    /* 화면이 아주 작아져도 메뉴가 지나치게 납작해지지 않도록 최소 높이를 준다.
       이 아래로 내려가면 메뉴는 더 줄지 않고 내부에서 스크롤(SimpleBar)된다. */
    min-height: 180px;
    height: auto !important;      /* JSP 인라인 height:calc(100%-220px) 무력화 */
    max-height: none !important;  /* JSP 인라인 max-height:550px 무력화 */
}

/* nav-foot 는 자기 높이만 차지하고 flex 컬럼 맨 아래에 온다.
   index.css 는 position:absolute(sidenav 하단 고정)라 flow 밖이라 #leftMenu 가 그 위를 덮었다.
   static 으로 되돌려 flex 가 공간을 잡게 하면, 화면 크기와 무관하게 항상 메뉴 아래에 놓인다.
   가로 여백: 왼쪽은 nav 의 padding-left(20), 오른쪽·위·아래는 여기 margin 으로 원래(20)와 맞춘다. */
.sidenav .nav-foot {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 0 0 auto;
    /* 아래 간격은 nav 의 padding-bottom(20)이 이미 만든다 → margin-bottom 0.
       왼쪽은 nav padding-left(20). 위 20(메뉴와 간격) · 오른쪽 20 만 준다. */
    margin: 20px 20px 0 0;
}

/* alert창 */
.swal2-shown.swal2-height-auto {
    padding-right: 0px !important;
}



/* 로그인 옵션 영역 (아이디 저장 체크박스) */
.login-options {
	margin-bottom: 20px;
	display: flex;
	align-items: center;
}

/* 체크박스 스타일 */
.form-checkbox {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
	gap: 8px;
}

.form-checkbox input[type="checkbox"] {
	display: none;
}

.form-checkbox i {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid #d1d5db;
	border-radius: 4px;
	background: #fff;
	position: relative;
	transition: all 0.2s ease;
}

.form-checkbox input[type="checkbox"]:checked + i {
	background: #0758ac;
	border-color: #0758ac;
}

.form-checkbox input[type="checkbox"]:checked + i::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 2px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.form-checkbox span {
	font-size: 14px;
	color: #6b7280;
	font-weight: 400;
}

.form-checkbox:hover i {
	border-color: #0758ac;
}


.panel--list .panel--item--body dl dd{
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.listbody li{
	list-style: none !important;
	display: flex !important;
}

.listbody ul li > span{
	width:30%;
}

.btn.border2{
	border: 3px solid #047bb6;
}

.btn.active{
	background: #047bb6;
}

/* ========== 알림 드롭다운 ========== */
.notice-menu {
	position: relative;
}

.notice-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	width: 320px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	z-index: 1000;
	margin-top: 10px;
	overflow: hidden;
}

.notice-dropdown__header {
	padding: 12px 16px;
	background: #047bb6;
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
}

.notice-dropdown__header span {
	color: #fff !important;
}

.notice-dropdown__list {
	max-height: 280px;
	overflow-y: auto;
}

.notice-dropdown__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f0;
	text-decoration: none;
	color: #333;
	transition: background 0.2s;
}

.notice-dropdown__item:hover {
	background: #f8f9fa;
}

.notice-dropdown__item:last-child {
	border-bottom: none;
}

.notice-dropdown__item .notice-title {
	flex: 1;
	font-size: 13px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-right: 10px;
}

.notice-dropdown__item .notice-time {
	font-size: 12px;
	color: #9ca3af;
	flex-shrink: 0;
}

.notice-dropdown__empty {
	padding: 30px 16px;
	text-align: center;
	color: #9ca3af;
	font-size: 13px;
}

.notice-dropdown__footer {
	padding: 10px 16px;
	border-top: 1px solid #e5e7eb;
	text-align: center;
	background: #fafbfc;
}

.notice-dropdown__footer a {
	font-size: 13px;
	color: #047bb6;
	text-decoration: none;
	font-weight: 500;
}

.notice-dropdown__footer a:hover {
	text-decoration: underline;
}


.simplebar-mask { z-index: auto; }



/* 섹션 아이콘(sec01~07)은 index.css 의 nav-m0X.svg / nav-m0X-on.svg 매핑을 사용한다.
   (과거 sec01~04 를 옛 ico-nav-secNN.png 로 덮어쓰던 규칙 제거 — 새 SVG가 적용되도록) */
   
.btn-width {
	width: fit-content;
	padding: 0px 15px;
}


/* ============================================================
   LGBUS(BMS) 와 동일한 화면 공통 레이아웃 이식
   1) 사이드바 높이 · 간격 축소
   2) 화면 상단 패널형 헤더 (제목 · 설명 · 카드)
   3) 목록 테이블 크기 축소
   4) 하단 버튼 · 페이징을 같은 줄에 (버튼 우측 / 페이징 가운데)
   ============================================================ */

/* ---------- 1) 사이드바 ---------- */

/* 상위메뉴 한 줄 높이 축소 (index.css 50px -> 42px) */
.sidenav .nav-sec > summary span {
    height: 42px;
    font-size: 16px;
}

/* 소메뉴 링크 높이 확보
   index.css 의 .nav-list a 는 상하 패딩이 없어 배경이 글자 높이만큼만 잡힌다.
   패딩으로 높이를 주고 늘어난 만큼 항목 간격을 줄여 전체 길이는 유지한다. */
.sidenav .nav-sec .nav-list a {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 14px;
}

.sidenav .nav-sec .nav-list li + li {
    margin-top: 1px;
}

/* 펼친 상위메뉴 아래 여백 축소 (index.css 30px) */
.sidenav .nav-sec[open] {
    padding-bottom: 14px;
}

/* 상위메뉴와 소메뉴 목록 사이 여백 축소 (index.css 20px) */
.sidenav .nav-sec > summary + .nav-sub,
.sidenav .nav-sec > summary + .nav-list {
    margin-top: 8px;
}

.sidenav .nav-sec .nav-list {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* 현재 선택한 소메뉴 강조 (hover 와 구분되도록 배경 · 굵기 추가) */
.sidenav .nav-sec .nav-list li.is-active > a {
    background: rgba(255, 255, 255, 0.15);
    font-weight: 700;
}

/* ---------- 2) 화면 상단 패널형 헤더 ---------- */
/* ========== 패널형 페이지 헤더 (.page-header--panel) ==========
   기존 흰 배경 .page-header 위에 덧입히는 opt-in 스타일.
   배경색은 좌측 사이드메뉴(#0a529d) 계열을 따른다.
   구성 : breadcrumb / 메뉴명 + 상태배지 / 설명 + 코드칩 / 우측 통계카드
   설명(.ph--desc)과 배지, 통계카드는 모두 없어도 레이아웃이 유지된다. */
.page-header--panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 24px;
	padding: 22px 28px;
	border-radius: 18px;
	background: #0a529d; /* 좌측 사이드메뉴와 동일한 단색 */
	color: #ffffff;
}

.page-header--panel .ph--main {
	min-width: 0;
}

/* breadcrumb : 흰색으로 반전 (현재 위치는 굵게 + 밑줄로 구분) */
.page-header--panel .breadcrumb {
	font-size: 14px;
	color: #ffffff;
	margin-bottom: 8px;
}

.page-header--panel .breadcrumb a,
.page-header--panel .breadcrumb span,
.page-header--panel .breadcrumb .divider {
	color: #ffffff;
}

.page-header--panel .breadcrumb .current {
	color: #ffffff;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 패널 안의 텍스트는 항상 부모 색(흰색)을 따른다.
   외부 css 가 span·small·b 등 하위 요소에 어두운 색을 지정해도 상속을 강제해 흰색을 유지한다. */
.page-header--panel .breadcrumb *,
.page-header--panel .ph--headline *,
.page-header--panel .ph--desc *,
.page-header--panel .ph--stats *,
.page-header--panel .ph--stat__label *,
.page-header--panel .ph--stat__value * {
	color: inherit;
}

/* 상태배지는 예외 (연녹색 배경 + 진한 녹색 글자 유지) */
.page-header--panel .ph--headline .ph--badge,
.page-header--panel .ph--headline .ph--badge * {
	color: #0f7a43;
}

.page-header--panel .breadcrumb .home {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.page-header--panel .breadcrumb .home::before {
	content: "";
	width: 13px;
	height: 13px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M8 1.4 1 7.1v.8h2v6.7h4V10h2v4.6h4V7.9h2v-.8z'/%3E%3C/svg%3E");
	opacity: 0.8;
}

/* 메뉴명 + 상태배지 */
.page-header--panel .ph--headline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.page-header--panel .page-title {
	font-size: 30px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
}

.page-header--panel .ph--badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 14px;
	border-radius: 999px;
	background: #e6f7ee;
	color: #0f7a43;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.page-header--panel .ph--badge i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #16a34a;
}

.page-header--panel .ph--badge.is-off {
	background: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.8);
}

.page-header--panel .ph--badge.is-off i {
	background: #9ca3af;
}

/* 메뉴명 하단 설명 (+ 코드칩) : 내용이 없으면 숨김 */
.page-header--panel .ph--desc {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	font-size: 14px;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.75);
}

/* 설명 옆 부가 문구 (기준시각 · 최근 업데이트 등) */
.page-header--panel .ph--desc__sub {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.6);
}

.page-header--panel .ph--desc:empty {
	display: none;
}

.page-header--panel .ph--chip {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
}

/* 우측 통계 카드 */
.page-header--panel .ph--stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.page-header--panel .ph--stats > li {
	min-width: 132px;
	padding: 14px 18px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.16);
	text-align: center;
}

.page-header--panel .ph--stat__label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.7);
	white-space: nowrap;
}

.page-header--panel .ph--stat__value {
	display: block;
	font-size: 20px;
	font-weight: 400; /* 단위(건·종·곳 등) 텍스트는 얇게 — 숫자만 강조 */
	color: #ffffff;
	white-space: nowrap;
}
/* 숫자만 굵게 : 값 안의 숫자를 span(또는 b)으로 감싸면 그 부분만 강조된다.
   단위 글자가 숫자보다 두꺼워 보이던 문제 해결. */
.page-header--panel .ph--stat__value > span,
.page-header--panel .ph--stat__value > b {
	font-weight: 700;
}

/* 좁은 화면 : 통계 카드가 아래로 내려가며 가로로 채운다 */
@media (max-width: 1439px) {
	.page-header--panel {
		align-items: flex-start;
	}
	.page-header--panel .ph--stats {
		width: 100%;
	}
	.page-header--panel .ph--stats > li {
		/* 크기를 화면마다 다르게 만들지 않는다 (flex 로 늘리지 않음) */
		flex: 0 0 auto;
	}
}

/* 화면에서 옮겨온 상태 카드도 색 · 크기를 구분하지 않는다.
   화면마다 카드 수가 3~7개로 다른데 크기나 색이 달라지면 메뉴를 옮길 때마다
   헤더 모양이 바뀌어 보이므로, 모든 카드를 같은 모양으로 통일한다.
   (JSP 에 남아 있는 is-good / is-warn / is-danger 클래스는 그대로 두고 무시한다) */
.page-header--panel .ph--stats > li,
.page-header--panel .ph--stats > li.is-good,
.page-header--panel .ph--stats > li.is-warn,
.page-header--panel .ph--stats > li.is-danger {
    min-width: 92px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.page-header--panel .ph--stats > li.is-good .ph--stat__value,
.page-header--panel .ph--stats > li.is-warn .ph--stat__value,
.page-header--panel .ph--stats > li.is-danger .ph--stat__value {
    color: #ffffff;
}

.page-header--panel .ph--stat__label {
    margin-bottom: 6px;
    font-size: 12px;
}

.page-header--panel .ph--stat__value {
    font-size: 19px;
}

/* 헤더 내용이 비면(대시보드 등 breadcrumb.jsp 를 쓰지 않는 화면) 흔적이 남지 않게 한다 */
.page-header--panel .page-title:empty {
    display: none;
}

.page-header--panel .ph--stats:empty {
    display: none;
}

/* 제목만 있고 설명 · 카드가 없어도 높이가 어색하지 않게 */
.page-header--panel .ph--headline:only-child .page-title {
    margin-bottom: 0;
}


/* ---------- 3) 목록 테이블 ---------- */

/* 목록 테이블은 모든 화면을 같은 규격으로 통일한다 (라우터 관리 기준).
     머리글  38px · 15px · weight 500 · 옅은 배경 + 남색 2px 밑줄
     본문 행 40px · 14.5px · 홀짝 배경
   index.css 기본값은 패딩 20px · th 17px 이라 한 행이 65px 가까이 됐고,
   화면별 css 에서 tr 높이를 47px 로 따로 잡은 곳도 있어 화면마다 달랐다.
   화면별 css 의 `#app_adm .tbody-scroll table tbody tr` 같은 규칙(id 1 + class 1)을
   이기려면 여기서 클래스가 하나 더 필요하다. */

/* ── 머리글 ──
   thead 를 sticky 로 둔다.
   머리글·본문을 표 두 개로 나눈 화면은 머리글이 스크롤 영역 밖이라 원래도 고정이고,
   표 하나로 된 화면(라우터 관리)은 이 규칙으로 고정된다. 양쪽 다 안전하다. */
#content .form-tbl thead tr {
    height: 38px;
}

/* thead 를 하나의 스택 컨텍스트로 올린다.
   border-collapse: collapse 인 표에서 sticky th 는 hit-test 상 위에 있어도,
   본문 첫 칸의 상태 색바(position:absolute ::before)가 스크롤 중 머리글 위로 그려지는
   크롬 페인트 버그가 있다. thead 에 z-index 를 줘 머리글 전체를 본문 위 층으로 확정한다.
   (thead 에 position:relative 를 줘도 th 의 sticky 고정은 그대로 유지된다.) */
#content .form-tbl thead {
    position: relative;
    z-index: 10;
}

/* 머리글 위 모서리 라운드 제거 — 표를 둥근(8px) 카드로 감싼 화면들.
   퍼블 index.css 의 12px 머리글 라운드가 카드(8px)보다 커서, 옅은 회색 머리글이 코너에서
   물러나며 테두리와 채움 사이에 빈틈이 생긴다(카드가 없는 경우엔 흰 노치). 각지게 두면
   카드의 overflow(hidden/auto)가 카드 라운드로 정확히 깎아 채운다.
   전역이 아니라 이 카드형 목록들만 — 카드가 없는 화면은 12px 가 맞아 그대로 둔다. */
#content #supply_router_table_wrap thead tr th:first-child,
#content #supply_usim_table_wrap thead tr th:first-child,
#content .supply-type-modal__attr-table thead tr th:first-child,
#content #auUserTableWrap thead tr th:first-child {
    border-top-left-radius: 0;
}
#content #supply_router_table_wrap thead tr th:last-child,
#content #supply_usim_table_wrap thead tr th:last-child,
#content .supply-type-modal__attr-table thead tr th:last-child,
#content #auUserTableWrap thead tr th:last-child {
    border-top-right-radius: 0;
}

#content .form-tbl thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 38px;
    padding: 0 10px;
    background: #f4f7fa;
    /* border-collapse: collapse 에서는 sticky 요소의 테두리가 따라오지 않아
       스크롤하면 밑줄이 사라진다. 안쪽 그림자로 그린다. */
    border-bottom: 0;
    box-shadow: inset 0 -2px 0 #0a529d;
    font-size: 15px;
    font-weight: 500;
    color: #1d1d1d;
    box-sizing: border-box;
}

/* 머리글의 .tbl-th 는 index.css 에서 flex 다. 아이콘·화살표가 들어가도 한 줄로 둔다 */
#content .form-tbl thead th .tbl-th {
    flex-wrap: nowrap;
    min-width: 0;
    white-space: nowrap;
}

/* ── 본문 ── */
#content .form-tbl tbody td {
    padding: 0 10px;
    font-size: 14.5px;
    height: 40px;
    border-bottom: 1px solid #eaeff5;
    box-sizing: border-box;
    /* 내용이 칸보다 길면 줄바꿈 대신 말줄임.
       줄바꿈을 허용하면 그 행만 두 줄(80px)이 되어 행 높이가 화면마다 달라진다. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 여러 줄이 필요한 칸은 화면 css 에서 이 클래스를 붙여 예외로 둔다 */
#content .form-tbl tbody td.td-wrap {
    white-space: normal;
    height: auto;
    padding: 8px 10px;
}

#content .form-tbl .tbody-scroll table tbody tr,
#content .form-tbl table tbody tr {
    height: 40px;
}

/* 홀짝 배경 — 행이 촘촘해지면 눈이 옆줄로 미끄러진다.
   tr 이 아니라 td 에 칠해야 화면별 css 의 tr 배경보다 위에 온다.

   홀수 행(흰색)도 함께 지정한다.
   짝수 행만 칠하면, 표 전체를 옅게 칠하는 규칙이 어디 한 곳에라도 있으면
   두 색이 같아져 줄이 안 갈린 것처럼 보인다 (유심관리에서 그랬다). */
#content .form-tbl tbody tr:nth-child(odd) td {
    background: #ffffff;
}

#content .form-tbl tbody tr:nth-child(even) td {
    background: #f2f6fb;
}

/* hover 는 홀짝보다 뒤에 둬야 이긴다 (우선순위가 같다) */
#content .form-tbl tbody tr:hover td {
    background: #e6effb;
}

/* 데이터 없음 행 — 전 페이지 공통 회색 톤(customer/site 기준).
   클래스(.tbl-no-data)·맵용 클래스(.no-data)뿐 아니라, 클래스 없이 colspan 만 있는
   빈 메시지 행(항상 '단일 행·단일 셀' 패턴)까지 한 규칙으로 포착해 문구/스타일을 통일한다.
   홀짝·hover 색바에서도 뺀다. */
#content .form-tbl tbody tr td.tbl-no-data,
#content .form-tbl tbody tr:hover td.tbl-no-data,
#content .form-tbl tbody tr td.no-data,
#content .form-tbl tbody tr:hover td.no-data,
#content .form-tbl tbody tr:only-child > td[colspan]:only-child,
#content .form-tbl tbody tr:only-child:hover > td[colspan]:only-child {
    display: table-cell;   /* .no-data 의 display:flex 를 셀에서 되돌린다 */
    height: auto;
    padding: 40px 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    color: #9aa5b2;
    background: #fff;
}

/* ── 행 앞머리 바 ──
   모든 목록 행에 붙인다. 기본은 회색이고, 상태를 색으로 나눈 화면만 덮어쓴다
   (라우터 관리의 .sr-row--ok 등). 상태 컬럼이 없는 화면도 같은 모양이 된다. */
#content .form-tbl tbody tr > td:first-child {
    position: relative;
    padding-left: 16px;
    padding-right: 16px;
}

#content .form-tbl tbody tr > td:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #c8d2de;
}

/* '조회된 데이터가 없습니다' 한 줄에는 붙이지 않는다 */
#content .form-tbl tbody tr > td.tbl-no-data::before,
#content .form-tbl tbody tr > td[colspan]::before {
    display: none;
}

/* 체크박스가 첫 칸인 화면은 바가 체크박스와 겹치므로 두지 않는다 */
#content .form-tbl tbody tr > td:first-child:has(.checkbox)::before,
#content .form-tbl tbody tr > td:first-child:has(input[type="checkbox"])::before {
    display: none;
}

/* ── 바 색 = 그 행의 상태 배지 색 (화면별 JS 불필요) ──
   아는 배지 : .al-badge--*  ·  .oper-status--*(작업지시·배차)
   그 외 배지는 span 에 .m-tone--ok|warn|bad|hold|off 를 덧붙인다. */
/* 초록 — 정상 · 완료 */
#content .form-tbl tbody tr:has(> td .al-badge--success)   > td:first-child::before,
#content .form-tbl tbody tr:has(> td .al-badge--safe)      > td:first-child::before,
#content .form-tbl tbody tr:has(> td .oper-status--complete) > td:first-child::before,
#content .form-tbl tbody tr:has(> td .m-tone--ok)          > td:first-child::before { background: #15803d; }
/* 주황 — 진행 중 · 주의 */
#content .form-tbl tbody tr:has(> td .al-badge--warn)       > td:first-child::before,
#content .form-tbl tbody tr:has(> td .al-badge--degraded)   > td:first-child::before,
#content .form-tbl tbody tr:has(> td .al-badge--wait)       > td:first-child::before,
#content .form-tbl tbody tr:has(> td .oper-status--assigned) > td:first-child::before,
#content .form-tbl tbody tr:has(> td .oper-status--ing)      > td:first-child::before,
#content .form-tbl tbody tr:has(> td .oper-status--done)     > td:first-child::before,
#content .form-tbl tbody tr:has(> td .m-tone--warn)         > td:first-child::before { background: #b45309; }
/* 빨강 — 오류 · 이슈 */
#content .form-tbl tbody tr:has(> td .al-badge--danger)   > td:first-child::before,
#content .form-tbl tbody tr:has(> td .al-badge--new)      > td:first-child::before,
#content .form-tbl tbody tr:has(> td .oper-status--error) > td:first-child::before,
#content .form-tbl tbody tr:has(> td .m-tone--bad)        > td:first-child::before { background: #b42318; }
/* 파랑 — 대기 · 확인 단계 */
#content .form-tbl tbody tr:has(> td .al-badge--info)          > td:first-child::before,
#content .form-tbl tbody tr:has(> td .oper-status--customer)   > td:first-child::before,
#content .form-tbl tbody tr:has(> td .oper-status--oper-final) > td:first-child::before,
#content .form-tbl tbody tr:has(> td .m-tone--hold)            > td:first-child::before { background: #1d69c9; }
/* 회색 — 꺼짐 (접수·조치 전은 매핑 없이 기본 회색) */
#content .form-tbl tbody tr:has(> td .al-badge--offline) > td:first-child::before,
#content .form-tbl tbody tr:has(> td .m-tone--off)       > td:first-child::before { background: #8e97a4; }

/* 배지보다 잘게 나눌 때만 JS 로 덮는다 (listUi.js statusBar).
   예: 앱 이력 — 배지는 '이상' 하나, 바는 저하/위험 구분 */
#content .form-tbl tbody tr.lu-bar--ok   > td:first-child::before { background: #15803d; }
#content .form-tbl tbody tr.lu-bar--hold > td:first-child::before { background: #1d69c9; }
#content .form-tbl tbody tr.lu-bar--warn > td:first-child::before { background: #b45309; }
#content .form-tbl tbody tr.lu-bar--bad  > td:first-child::before { background: #b42318; }
#content .form-tbl tbody tr.lu-bar--off  > td:first-child::before { background: #8e97a4; }

/* 상태 칸 글자색 */
#content .form-tbl tbody td.lu-st { font-weight: 600; }
#content .form-tbl tbody td.lu-st--ok   { color: #15803d; }
#content .form-tbl tbody td.lu-st--hold { color: #1d69c9; }
#content .form-tbl tbody td.lu-st--warn { color: #b45309; }
#content .form-tbl tbody td.lu-st--bad  { color: #b42318; }
#content .form-tbl tbody td.lu-st--off  { color: #8e97a4; }
#content .form-tbl tbody td.lu-st--none { color: inherit; font-weight: inherit; }

/* ── 머리글 정렬 (js/util/listUi.js) ──
   머리글·본문을 표 두 개로 나눈 화면은 머리글 표에만 붙는다.
   .tbl-th 가 index.css 에서 flex 가운데 정렬이라 화살표가 글자 옆에 온다. */
#content .form-tbl thead th.lu-sort {
    cursor: pointer;
    user-select: none;
}

#content .form-tbl thead th.lu-sort:hover { color: #047bb6; }
#content .form-tbl thead th.lu-sort.is-sorted { color: #0a529d; font-weight: 700; }
#content .form-tbl thead th.lu-sort .tbl-th { gap: 4px; }

/* 화살표 — 삼각형 두 개를 겹쳐 두고 정렬 방향만 진하게 */
#content .lu-sort__ico {
    /* .tbl-th 로 감싸지 않은 표(공통 코드 등)에서도 크기를 갖게 한다 */
    display: inline-block;
    vertical-align: middle;
    position: relative;
    flex: 0 0 auto;
    width: 8px;
    height: 12px;
}

#content .lu-sort__ico::before,
#content .lu-sort__ico::after {
    content: "";
    position: absolute;
    left: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

#content .lu-sort__ico::before { top: 1px;    border-bottom: 4px solid #b8c4d2; }
#content .lu-sort__ico::after  { bottom: 1px; border-top: 4px solid #b8c4d2; }

#content .lu-sort__ico.is-asc::before { border-bottom-color: #0a529d; }
#content .lu-sort__ico.is-desc::after { border-top-color: #0a529d; }

/* 목록은 자기 영역 안에서만 스크롤 (스크롤은 simplebar 가 담당, 높이만 잡아준다)
   화면별 css(#app_hist .tbody-scroll 등)와 우선순위가 같은데 bit.css 가 먼저 로드되어
   밀리므로, 클래스를 하나 더 얹어 우선순위를 올린다.

   빼는 값(450px)은 표 위·아래에 실제로 쌓이는 것들의 합이다.
     상단바 50 + 본문 위아래 여백 32 + 페이지 헤더 패널 98 + 그 아래 여백 16
     + 검색줄 40 + 12 + 총건수줄 30 + 10 + 페이징·버튼줄 46 + 14 ≈ 448
   표 위에 줄이 하나 더 있는 화면(탭 등)은 그만큼 더 빼야 한다.
   그럴 때는 그 화면 css 에 `#content #화면id .tbody-scroll` 로 다시 지정한다
   (`#화면id .tbody-scroll` 만으로는 이 규칙을 못 이긴다). */
#content .form-tbl .tbody-scroll {
    max-height: calc(100vh - 450px);
    /* 화면별 css 의 min-height:120px 때문에 한 건만 있어도 빈 칸이 크게 남았다.
       내용 높이만큼만 쓰게 한다 ('조회된 데이터가 없습니다' 행이 자기 높이를 갖는다) */
    min-height: 0;
}

/* 총 건수 줄 · 검색 줄 간격과 같은 줄 요소 높이 통일 */
#content .form--tbl__util {
    margin-bottom: 12px;
}

#content .form--tbl__header {
    align-items: center;
    flex-wrap: wrap;
    row-gap: 10px;
    margin-bottom: 20px;
}

/* 검색 조건은 왼쪽에 그대로 두고 버튼 묶음만 오른쪽으로 밀어낸다.
   (LGBIT 은 조건들이 .form--tbl__header 직속이라 space-between 을 쓰면 다 흩어진다) */
#content .form--tbl__header .util-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* 검색줄 요소 높이 — 목록 행(40px)과 같게 맞춘다.
   48px 이던 때는 표가 촘촘해지면서 위쪽 컨트롤만 커 보였다. */
#content .form--tbl__header select,
#content .form--tbl__header .search-box,
#content .form--tbl__header .btn,
#content .form--tbl__header .btn-refresh,
#content .form--tbl__header input.form-control,
#content .form--tbl__header input.form-control-sm {
    height: 40px;
    box-sizing: border-box;
}

#content .form--tbl__header select,
#content .form--tbl__header input.form-control,
#content .form--tbl__header input.form-control-sm {
    font-size: 14.5px;
}

/* 새로고침 · 엑셀 묶음(.util-btn)은 MAIN.normalizeListToolbar 가 검색 줄로 옮긴다.
   화면마다 버튼 클래스 이름이 달라(#supply_router_btn-refresh 등) 이름 일부로 잡는다. */
#content .form--tbl__header .util-btn button[class*="btn-refresh"],
#content .form--tbl__util .util-btn button[class*="btn-refresh"] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
}

#content .form--tbl__header .util-btn .btn,
#content .form--tbl__util .util-btn .btn {
    height: 40px;
}

#content .form--tbl__header .search-box input {
    height: 100%;
    padding: 0 14px;
}

#content .form--tbl__header .search-box .search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 100%;
    padding: 0;
}


/* 위 규칙은 목록 화면용이다.
   모달도 #content 안에 들어 있어 같이 걸리므로 모달 안에서는 원래 값으로 되돌린다.
   (모달 표 19개 · tbody-scroll 16개가 여기에 해당한다) */
#content .modal .form-tbl th,
#content .modal .form-tbl td {
    padding: 20px 10px;
    height: auto;
}

#content .modal .form-tbl thead tr,
#content .modal .form-tbl table tbody tr,
#content .modal .form-tbl .tbody-scroll table tbody tr {
    height: auto;
}

#content .modal .form-tbl th {
    font-size: 17px;
}

#content .modal .form-tbl td {
    font-size: 15px;
}

/* 모달 표 머리글도 목록과 동일한 룩(옅은 배경 + 남색 밑줄)으로 통일한다.
   단, 모달 표는 내용에 따라 늘어나고 스크롤 기준이 달라 sticky 는 쓰지 않는다(static). */
#content .modal .form-tbl thead th {
    position: static;
    height: 38px;
    padding: 0 10px;
    background: #f4f7fa;
    border-bottom: 0;
    box-shadow: inset 0 -2px 0 #0a529d;
    font-size: 15px;
    font-weight: 500;
    color: #1d1d1d;
}

/* 본문(tbody)도 목록 디자인을 따른다: 옅은 구분선(#eaeff5).
   단, 행 높이(패딩)는 모달의 현 상태를 유지한다. */
#content .modal .form-tbl tbody td {
    padding: 20px 10px;
    border-bottom: 1px solid #eaeff5;
}

/* 모달 안 .tbl(그리드형) 표 머리글도 목록과 동일한 룩(옅은 배경 + 남색 밑줄)으로.
   격자 테두리는 유지하고 배경/밑줄 색만 맞춘다. */
#content .modal .tbl thead th {
    background: #f4f7fa;
    border-bottom: 2px solid #0a529d;
    font-weight: 500;
    color: #1d1d1d;
}

/* 홀짝(zebra) 배경은 적용하지 않는다 — 흰 배경 유지 */
#content .modal .form-tbl tbody tr:nth-child(even) td,
#content .modal .form-tbl tbody tr:nth-child(odd) td {
    background: transparent;
}

/* hover 만 목록과 동일하게 */
#content .modal .form-tbl tbody tr:hover td {
    background: #e6effb;
}

#content .modal .form-tbl tbody tr td.tbl-no-data,
#content .modal .form-tbl tbody tr:hover td.tbl-no-data {
    height: auto;
}

#content .modal .tbody-scroll {
    max-height: none;
}

#content .modal .form--tbl__header {
    margin-bottom: 30px;
}

#content .modal .form--tbl__util {
    margin-bottom: 20px;
}


/* ---------- 4) 하단 버튼 · 페이징 한 줄 ---------- */

/* 원래는 버튼 줄 아래에 페이징이 따로 놓여 두 줄을 먹었다.
   같은 줄에 놓고 페이징은 가운데, 버튼은 오른쪽에 붙인다.
   DOM 순서(버튼 → 페이징)와 무관하게 grid-column 으로 자리를 지정한다. */
.btn-pagination-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    min-height: 48px;
    margin: 20px 0 0;
}

/* grid-row 를 지정하지 않으면 DOM 순서(버튼 → 페이징) 때문에
   버튼이 3열에 놓인 뒤 커서가 지나가 버려 페이징이 2행으로 밀린다.
   두 요소 모두 1행으로 못 박아 같은 줄에 놓는다. */
.btn-pagination-group .pagination-wrap {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
    min-height: 40px;
}

.btn-pagination-group .btn-group.between {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    margin: 0;
    white-space: nowrap;
}

/* .btn-group.between 안의 자리맞춤용 빈 div 는 자리를 먹지 않게 한다 */
.btn-pagination-group .btn-group.between > div:empty {
    display: none;
}

/* 화면이 좁으면 버튼을 아래로 내린다 (겹침 방지) */
@media (max-width: 1100px) {
    .btn-pagination-group {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
    .btn-pagination-group .pagination-wrap,
    .btn-pagination-group .btn-group.between {
        grid-row: auto;
        grid-column: 1;
    }
    .btn-pagination-group .btn-group.between {
        justify-self: end;
    }
}


/* ===== BIS 테마 공통 버튼 =====
   customer/site·charge, account/user·role, system/menu·skin 6개 화면에서
   반복되던 버튼 스타일(hover 제거 · "+" 추가 · 액션 · 삭제)을 한곳에 모았다.
   (supply 두 화면은 .btn 이 아닌 전용 클래스라 각자 파일에서 유지) */

/* hover 제거 : 버튼 상태 고정 */
.cs-page .btn:hover,
.cc-page .btn:hover,
.au-page .btn:hover, .au-types .btn:hover,
.ar-page .btn:hover,
.sm-page .btn:hover,
.sk-page .btn:hover { box-shadow: none; }

/* "+" 추가 버튼 : 흰 배경 아웃라인(파랑) */
#csAdd, #auGroupAdd, #auSubAdd, #auUserAdd, #arRoleAdd, #smAdd, #skAdd {
    background: #fff; color: #047bb6; border: 1px solid #047bb6; gap: 5px;
}
/* "+" 글자 : 버튼색 상속 + 굵게(자산 관리 + 버튼과 동일) */
#csAdd span, #auGroupAdd span, #auSubAdd span, #auUserAdd span,
#arRoleAdd span, #smAdd span, #skAdd span {
    color: inherit; font-size: 15px; font-weight: 700; line-height: 1;
}

/* 수정·배정·전환 등 액션 : 채움(파랑) */
#csEdit, #arRoleEdit, #auMemberAdd {
    background: #047bb6; color: #fff; border: 1px solid #047bb6;
}

/* 삭제 : 채움(빨강) */
#csDel, #skDel, #arRoleDel {
    background: #e54e57; color: #fff; border: 1px solid #e54e57;
}

/* 검색 버튼 아이콘 크기 통일 — 인라인 width/height 가 없어도 항상 16px 로 보이게.
   (.search-box 안/밖, 목록/모달, 헤더 여부와 무관하게 .search-btn 안의 이미지 모두) */
.search-btn img,
#content .search-btn img {
    width: 16px;
    height: 16px;
    display: block;
    object-fit: contain;
    flex: 0 0 auto;
}

/* ── 최초 로그인 비밀번호 변경 (login.jsp) ───────────────── */

.pw-guide{
    margin:0 0 18px; padding:12px 14px; border-radius:8px;
    background:#f4f8ff; border:1px solid #dfeaf9;
    font-size:13px; color:#41506a; line-height:1.6;
}
.pw-guide b{ color:#0a529d; }

.pw-rule{
    margin:0 0 16px; padding:0 0 0 16px;
    font-size:12px; color:#8a94a6; line-height:1.8;
}

.login-btn--ghost{
    margin-top:8px; background:#fff; color:#41506a; border:1px solid #d8dee8;
}
.login-btn--ghost:hover{ background:#f4f7fb; }