@charset "UTF-8";

/*
     @ 수정일         수정자      수정내용
     @ -------------  ----------  -----------------------------
     @ 2026. 11. 10.  김설웅      설치 관리, 유지보수 메뉴 CSS수정
 */

/* ===== 설치 관리 (설치 요청 · 설치 일정 · 설치 검수) =====
   패널 · 목록 · 상세 머리 · 모달 2단 배치는 supply_type.css 의 .st-* 규격을 그대로 쓴다.
   상태 색 : 대기 회색 / 일정 확정 파랑 / 설치 중 주황 / 제출 보라 / 승인 초록 / 반려 빨강 / 제외 연회색 */
.in-cols {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 460px;
}
@media (max-width: 1200px) {
    .in-cols { grid-template-columns: 1fr; grid-template-rows: auto; }
    .in-cols .st-list-scroll { max-height: 300px; }
}

/* 검색줄 : 상태 select + 검색창 */
.in-search { align-items: center; }
.in-search .in-search__sel { flex: 0 0 86px; height: 32px; padding: 0 6px; font-size: 14.5px; }
.in-search .search-box { flex: 1 1 auto; width: auto; min-width: 0; height: 32px; }
.in-search .search-box input { width: 100%; height: 100%; border: none; padding: 0 10px; font-size: 15px; }
.in-search .search-box .search-btn { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 100%; padding: 0; }

/* 목록 항목 */
.in-item { height: auto; min-height: 0; padding: 11px 12px; flex-direction: column; align-items: stretch; gap: 5px; }
.in-item__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.in-item__name { flex: 1 1 auto; min-width: 0; font-size: 15.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-item.is-active .in-item__name { color: #0a529d; font-weight: 700; }
.in-item__sub { font-size: 13px; color: #8e97a4; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.in-item__chk { flex: none; }

/* 상태 칩 */
.in-chip {
    flex: none; display: inline-block; padding: 1px 8px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.in-chip--req     { background: #eef1f5; color: #5b6472; }
.in-chip--sched   { background: #e3effb; color: #0a529d; }
.in-chip--work    { background: #fff4dd; color: #9a5b00; }
.in-chip--submit  { background: #efeafd; color: #5b3fb5; }
.in-chip--approve { background: #e7f6ec; color: #1f7a3a; }
.in-chip--reject  { background: #fdecee; color: #c4320a; }
.in-chip--exclude { background: #f3f4f6; color: #9aa5b2; text-decoration: line-through; }

/* 진행 막대 */
.in-progress { display: flex; align-items: center; gap: 8px; }
.in-progress__bar { flex: 1 1 auto; display: flex; height: 7px; overflow: hidden; border-radius: 999px; background: #eef2f7; }
.in-progress__seg { display: block; height: 100%; }
.in-progress__seg--approve { background: #1f9d57; }
.in-progress__seg--submit  { background: #7a5ad6; }
.in-progress__seg--work    { background: #e0a020; }
.in-progress__seg--sched   { background: #3d8ad8; }
.in-progress__seg--req     { background: #c9d1db; }
.in-progress__text { flex: none; font-size: 12.5px; color: #5b6472; font-variant-numeric: tabular-nums; }
.in-progress__text b { color: #1f7a3a; }
.in-counts { margin: 6px 0 0; font-size: 13px; color: #8e97a4; }

/* 작은 태그 */
.in-tag {
    display: inline-block; padding: 0 6px; border-radius: 4px; background: #eef1f5; color: #5b6472;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.in-tag--ok   { background: #e7f6ec; color: #1f7a3a; }
.in-tag--warn { background: #fff1e3; color: #b25600; }

.in-dim { color: #9aa5b2; font-size: 13px; }
.in-empty { margin: 0; padding: 24px 12px; text-align: center; color: #9aa5b2; font-size: 14px; }
.in-hint { margin: 8px 0 0; font-size: 13px; color: #8e97a4; }
.in-link { color: #0a529d; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.in-mono { font-family: Consolas, monospace; }
.in-act-btn--ok { border-color: #1f9d57; background: #1f9d57; color: #fff; }
.st-act-btn[hidden] { display: none; }
#install_review .st-bar__right[hidden],
#install_req .st-bar__right[hidden] { display: none; }

/* 상세 정보 줄 */
.in-info {
    display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 10px; padding: 10px 12px;
    border: 1px solid #e5e9ef; border-radius: 8px; background: #fafbfd;
}
.in-info > div { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.in-info span { color: #8e97a4; }
.in-info b { font-weight: 600; color: #1d1d1d; }
.in-memo { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: #f4f7fa; font-size: 14px; color: #475467; white-space: pre-wrap; }
.in-memo[hidden] { display: none; }

/* 표 */
#content .in-tbl { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: 10px; }
#content .in-tbl .tbody-scroll { flex: 1 1 auto; max-height: none; min-height: 160px; }
.in-tbl table { table-layout: fixed; width: 100%; }
.in-tbl tbody tr { height: 46px; }
.in-tbl tbody tr[data-target-seq] { cursor: pointer; }
.in-tbl tbody tr[data-target-seq]:hover { background: #f8f9fa; }
.in-tbl td { overflow: hidden; text-overflow: ellipsis; }
/* 일정 화면 체크박스 열 : 패딩 없이 가운데 정렬.
   tbody 쪽은 bit.css '#content .form-tbl tbody tr > td:first-child'(패딩 16px)보다 우선해야 해서 #content · tbody tr > 를 붙인다 */
#install_sched .in-tbl th:first-child,
#maint_sched .in-tbl th:first-child,
#content #install_sched .in-tbl tbody tr > td:first-child,
#content #maint_sched .in-tbl tbody tr > td:first-child { padding-left: 0; padding-right: 0; text-overflow: clip; }

/* 일정 일괄 지정 줄 */
.in-bulk {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px;
    border: 1px dashed #b9cbe0; border-radius: 8px; background: #f6f9fd;
}
.in-bulk label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #475467; }
.in-bulk .form-control { width: 140px; height: 32px; font-size: 14px; }
.in-bulk__memo .form-control { width: 220px; }
.in-bulk__count { font-size: 14px; color: #5b6472; }
.in-bulk__count b { color: #0a529d; }

/* ── 모달 ── */
.in-reason-dialog { width: min(520px, calc(100vw - 32px)); }
.in-field__label { display: block; margin-bottom: 6px; font-weight: 600; color: #344054; }
.in-field__label i { margin-left: 3px; color: #d92d20; font-style: normal; }
.in-reason-text { width: 100%; min-height: 110px; padding: 10px 12px; line-height: 1.6; resize: vertical; }

.in-target-dialog { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 60px); display: flex; flex-direction: column; }
/* 위치 상세 : 스크롤은 안쪽 .in-target-scroll(SimpleBar) 하나로 통일 — 본문(.modal-content)은 스크롤하지 않는다 */
#inTargetModal .modal-content { flex: 1 1 auto; min-height: 0; overflow: visible; padding: 16px 18px; background: #fff; }
/* 168px = 헤더(약 66) + 푸터(약 69) + 본문 상하 패딩(16 × 2) */
#inTargetModal .in-target-scroll { max-height: calc(85vh - 168px); }
.in-form-dialog { width: 1240px; height: 85vh; }
#irFormModal .modal-content,
#moFormModal .modal-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; background: #fff; }
/* 등록 모달 메모 : 높이 고정 */
#irFormModal .st-field__area,
#moFormModal .st-field__area { height: 90px; min-height: 0; resize: none; }

/* 위치 상세 (모달 · 검수 공용) */
.in-tinfo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; margin-bottom: 10px; }
.in-tinfo > div { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.in-tinfo span { color: #8e97a4; flex: none; }
.in-tinfo b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-warn { margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; background: #fff4e5; color: #8a4b00; font-size: 14px; }
.in-warn--reject { background: #fdecee; color: #a8290a; }
.in-sect { margin: 16px 0 8px; font-size: 15px; font-weight: 700; color: #047bb6; }
.in-ttable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.in-ttable th { text-align: left; padding: 7px 10px; background: #f4f7fa; border-bottom: 1px solid #e3e8ef; color: #475467; font-size: 13.5px; }
.in-ttable td { padding: 8px 10px; border-bottom: 1px solid #eef2f7; vertical-align: middle; }
.in-tree { display: inline-flex; align-items: center; gap: 6px; }
.in-tree__line { color: #b4bdc8; font-style: normal; }
.in-label { font-family: Consolas, monospace; font-size: 15px; color: #0a529d; letter-spacing: .02em; }
.in-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.in-photo { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: #475467; font-size: 13px; }
.in-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid #e3e8ef; background: #f4f7fa; }

.in-review-body { padding: 12px 16px; }
.in-review-body .in-target-scroll { flex: 1 1 auto; min-height: 0; }

/* ── 요청 등록 : 대상 위치 고르기 ── */
.in-pick { gap: 10px; }
.in-pick__head { display: flex; align-items: center; gap: 12px; }
.in-pick__ttl { margin: 0; padding: 0; border: 0; flex: 1 1 auto; }
.in-pick__default { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #475467; }
.in-pick__default .form-control { width: 260px; height: 32px; font-size: 14px; }
.in-pick__cols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.in-pick__cand, .in-pick__sel { display: flex; flex-direction: column; min-height: 0; border: 1px solid #e3e8ef; border-radius: 8px; overflow: hidden; }
.in-pick__filter { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid #eef2f7; background: #fafbfd; }
.in-pick__filter .form-control { height: 32px; font-size: 14px; min-width: 0; }
.in-pick__filter select.form-control { flex: 0 0 150px; }
.in-pick__filter select.form-control[hidden] { display: none; }
.in-pick__filter input.form-control { flex: 1 1 auto; }
/* 대상 위치 후보 검색 버튼 높이를 옆 입력·셀렉트(36px)에 맞춘다 */
.in-pick__filter .st-row-btn { height: 36px; }
/* 후보·추가 목록 스크롤은 바깥 래퍼(.in-pick__list-scroll[data-simplebar])가 맡는다.
   JS 가 #irCandList/#irSelList 의 innerHTML 을 통째로 갈아끼우므로 호스트에 직접 data-simplebar 를
   붙이면 조회할 때마다 SimpleBar DOM 이 사라진다 → 갈아끼우지 않는 바깥 래퍼에 붙인다.
   (같은 모달 좌측 .st-form-scroll 과 동일 패턴) */
/* overflow:hidden 필수 — SimpleBar .simplebar-wrapper 는 height:inherit 라 호스트가 flex 로
   짧아져도 내용 전체 높이로 늘어난다. 호스트에서 잘라주지 않으면 넘친 wrapper 가 아래 형제
   (.in-pick__foot '선택 추가' 버튼)를 투명하게 덮어 클릭을 가로챈다. 스크롤은 내부
   .simplebar-content-wrapper 가 맡으므로 호스트 overflow:hidden 이어도 정상 동작한다. */
.in-pick__list-scroll { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.in-pick__list { min-height: 220px; }
.in-pick__list-sb { height: 100%; }
/* 버튼 영역을 목록 위로 올려 혹시 남는 오버레이에도 클릭이 먹히게 한다 */
.in-pick__foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 8px; border-top: 1px solid #eef2f7; }
.in-pick__foot .checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.in-pick__count { margin: 0; padding: 10px 12px; border-bottom: 1px solid #eef2f7; background: #fafbfd; font-size: 14px; color: #475467; }
.in-pick__count b { color: #0a529d; }
.in-cand { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #f1f4f8; font-size: 14.5px; cursor: pointer; }
.in-cand:hover { background: #f6f9fd; }
.in-cand.is-picked { color: #9aa5b2; cursor: default; }
.in-cand__name { font-weight: 600; }
.in-cand__sub { flex: 1 1 auto; color: #8e97a4; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-sel { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #f1f4f8; }
.in-sel__name { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-sel .in-sel-pkg { flex: 0 0 220px; height: 30px; font-size: 13.5px; }
.in-sel-del { flex: none; width: 26px; height: 26px; border: 1px solid #d0d5dd; border-radius: 5px; background: #fff; color: #667085; cursor: pointer; }
.in-sel-del:hover:not(:disabled) { border-color: #e54e57; color: #e54e57; }
.in-sel-del:disabled { opacity: .4; cursor: not-allowed; }

/* ── 높이를 정한 입력칸 · 셀렉트 : 공통 .form-control 의 위아래 여백(10px)이 높이 안에 들어가
      글자가 아래로 밀려 잘렸다. 설치 관리 화면에서는 위아래 여백을 없애고 높이로 가운데를 맞춘다 ── */
#install_req select.form-control, #install_req input.form-control,
#install_sched select.form-control, #install_sched input.form-control,
#install_review select.form-control, #install_review input.form-control,
.in-modal select.form-control, .in-modal input.form-control {
    padding-top: 0;
    padding-bottom: 0;
    line-height: normal;
}
#install_req select.form-control, #install_sched select.form-control, #install_review select.form-control,
.in-modal select.form-control {
    padding-left: 10px;
    padding-right: 28px;
    text-overflow: ellipsis;
}
.in-pick__filter .form-control,
.in-pick__default .form-control,
.in-bulk .form-control { height: 36px; font-size: 14.5px; }
/* 설치 일정 : '선택 위치에 예정일 지정' 버튼 높이를 옆 예정일 날짜입력(36px)에 맞춘다 */
.in-bulk .st-act-btn { height: 36px; }
.in-sel .in-sel-pkg { height: 34px; }
#irFormModal .st-field__control:not(textarea) { height: 40px; }

/* ── 요청 등록 : 대상 위치 / 운수사 정보 탭 ── */
.in-pick__tabs { flex: 1 1 auto; display: inline-flex; gap: 4px; }
.in-pick__tab {
    height: 34px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none;
    color: #8e97a4; font-size: 15px; font-weight: 700; cursor: pointer;
}
.in-pick__tab.is-active { color: #047bb6; border-bottom-color: #047bb6; }
.in-pick__tab[hidden] { display: none; }
.in-pick__tabcnt { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #dbe6f4; color: #0a529d; font-size: 12.5px; }
.in-pick__default[hidden], .in-pick__cols[hidden], .in-comp[hidden] { display: none; }

.in-comp { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.in-comp__desc { margin: 0; font-size: 13.5px; color: #8e97a4; }
/* 운수사 정보 · 장비 수량 목록 : 높이 제한 · 스크롤은 바깥 SimpleBar 래퍼가 맡는다 */
.in-comp__scroll { flex: 1 1 auto; min-height: 220px; max-height: 56vh; }
.in-comp__list { display: flex; flex-direction: column; gap: 8px; }
.in-comp__row {
    display: grid; grid-template-columns: 170px minmax(0, 1fr) 120px 150px; gap: 6px 8px; align-items: center;
    padding: 10px 12px; border: 1px solid #e3e8ef; border-radius: 8px; background: #fafbfd;
}
.in-comp__row .form-control { height: 36px; font-size: 14px; }
.in-comp__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.in-comp__name b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-comp__memo { grid-column: 2 / -1; }

/* 상세 : 운수사 위치 · 담당자 */
.in-comps { margin-bottom: 10px; padding: 8px 12px; border: 1px solid #e5e9ef; border-radius: 8px; }
.in-comps[hidden] { display: none; }
.in-comps__ttl { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: #047bb6; }
.in-comps__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 4px 0; font-size: 14px; border-top: 1px dashed #eef2f7; }
.in-comps__row:first-of-type { border-top: 0; }

/* ── 정류장 요청 : 아래에 지도를 둔다 ──
   목록 높이를 .in-pick__list 나 스크롤 호스트(.in-pick__list-scroll)에 max-height 로 캡하면 안 된다.
   SimpleBar 가 붙은 호스트의 높이가 auto 로 풀리면, .simplebar-wrapper(height:inherit)가 내용 전체
   높이로 늘어나 아래 '선택 추가' 버튼(.in-pick__foot)을 투명하게 덮어 클릭이 막힌다.
   → 목록(스크롤 호스트)은 차량 모드와 동일하게 flex 로 공간을 채워 스크롤하게 두고(기본 규칙 유지),
     지도에 고정 높이를 줘서 목록/지도 영역을 나눈다. 모달이 짧으면 cols 가 줄며 목록만 스크롤되고
     버튼은 항상 목록 아래에 고정돼 노출된다. */
.in-pick.is-station .in-pick__map { flex: 0 0 auto; }
.in-pick__map { display: flex; flex-direction: column; gap: 6px; }
.in-pick__map[hidden] { display: none; }
.in-pick__mapbox { height: 30vh; min-height: 230px; border: 1px solid #e3e8ef; border-radius: 8px; overflow: hidden; background: #eef2f7; }
.in-pick__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; color: #5b6472; }
.in-pick__legend span { display: inline-flex; align-items: center; gap: 5px; }
.in-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #d0d5dd; }
.in-dot--cand  { background: #9aa5b2; }
.in-dot--check { background: #e0820b; }
.in-dot--added { background: #0a62b0; }

/* 운수사 정보 : 운수사에 이미 있는 값은 입력 칸 대신 보여주기만 */
.in-comp__fixed {
    display: flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 5px;
    background: #eef2f7; color: #344054; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 장비 수량 : 요청 등록 탭 · 상세 표 ── */
.in-qty__bar { display: flex; align-items: center; gap: 8px; }
.in-qty__add { width: 220px; height: 34px; font-size: 14px; }
/* '구성 기준으로 다시 채우기' 버튼 높이를 옆 셀렉트박스(34px)에 맞춘다 */
.in-qty__bar .st-row-btn { height: 34px; }
.in-qty__row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 140px; gap: 8px; align-items: center;
    padding: 8px 12px; border: 1px solid #e3e8ef; border-radius: 8px; background: #fafbfd; }
.in-qty__name { font-size: 14.5px; }
.in-qty__val { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #475467; }
.in-qty__val .form-control { width: 90px; height: 34px; text-align: right; }
.in-qtytbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.in-qtytbl th { text-align: left; padding: 4px 8px; color: #8e97a4; font-weight: 600; font-size: 13px; }
.in-qtytbl td { padding: 4px 8px; border-top: 1px dashed #eef2f7; }
#irQtyPanel[hidden] { display: none; }

/* ── 설치 검수 : 요청 → 위치 → 상세 3단 ── */
.in-cols--review3 { grid-template-columns: 300px 320px minmax(0, 1fr); }
@media (max-width: 1400px) { .in-cols--review3 { grid-template-columns: 260px 280px minmax(0, 1fr); } }
@media (max-width: 1200px) { .in-cols--review3 { grid-template-columns: 1fr; } }
.in-seg { display: flex; gap: 4px; margin: 0 12px 8px; padding: 3px; border-radius: 8px; background: #eef2f7; }
.in-seg__btn { flex: 1 1 0; height: 30px; border: 0; border-radius: 6px; background: transparent; color: #64748b; font-size: 13.5px; font-weight: 700; }
.in-seg__btn i { font-style: normal; margin-left: 2px; }
.in-seg__btn.is-on { background: #fff; color: #047bb6; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
/* 설치 검수 · 작업 검수 : 위치 패널의 상태 세그먼트(제출·반려·승인·전체)만 st-bar 와 띄운다 */
#install_review #ivTgtSeg,
#maint_review #mvTgtSeg { margin-top: 8px; }

/* 설치 확인 서명 (요청 상세 · 검수) */
.in-signs { display: flex; flex-direction: column; gap: 8px; }
.in-sign { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.in-sign img { width: 120px; height: 60px; object-fit: contain; border: 1px solid #e3e8ef; border-radius: 6px; background: #fff; }
.in-sign details { margin-top: 2px; color: #5b6472; }
.in-signbox { margin: 0 12px 8px; }

/* 설치 요청 : 후보 위치에 지금 달린 장비 · 고른 위치의 경고 (단말 먼저 · 전광판 나중 설치) */
.in-cand { flex-wrap: wrap; }
.in-cand__equip { flex: 1 0 100%; padding-left: 26px; font-size: 12.5px; color: #5b6672; line-height: 1.4; white-space: normal; word-break: break-all; }
.in-cand__equip.is-none { color: #9aa3ad; }
.in-sel.is-warn { background: #fff8eb; }
.in-sel__warn { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: #b25600; white-space: normal; }