.page-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  /*
  width: 30rem;
  max-width: 30rem;
  */
  width: 30rem;
  max-width: 22.5rem;
  background-color: #ffffff;
  border-left: 1px solid rgba(34, 34, 48, 0.1);
  box-shadow: none;
  overflow: auto;
  z-index: 1029;
  transform: translate3d(100%, 0, 0);
  transition: transform 200ms ease-in-out;
}

/*
@media (min-width: 768px) {
.has-sidebar-fluid .page-sidebar {
width: calc(100vw - 30rem);
max-width: calc(100vw - 30rem);
}
}
*/

/*
@media (min-width: 1200px) {
.has-sidebar-fluid .page-sidebar {
width: calc(100vw - 37.5rem);
max-width: calc(100vw - 37.5rem);
}
}
*/

@media (min-width: 576px) {
  .has-sidebar-expand-sm .app-main > .app-footer,
  .has-sidebar-expand-sm .page-inner {
    margin-right: 30rem;
  }
  .has-sidebar-expand-sm .page-sidebar {
    transform: translate3d(0, 0, 0);
  }
  .has-sidebar-open .has-sidebar-expand-sm .page-sidebar {
    position: absolute;
    top: 0;
    transform: translate3d(100%, 0, 0);
  }
  .has-sidebar-expand-sm.has-sidebar-fluid .page-inner {
    margin-right: calc(100vw - 37.5rem);
  }
  .has-sidebar-expand-sm.has-sidebar-fluid .page-sidebar {
    width: calc(100vw - 37.5rem);
    max-width: calc(100vw - 37.5rem);
  }
}

@media (min-width: 768px) {
  .has-sidebar-expand-md .app-main > .app-footer,
  .has-sidebar-expand-md .page-inner {
    margin-right: 30rem;
  }
  .has-sidebar-expand-md .page-sidebar {
    transform: translate3d(0, 0, 0);
  }
  .has-sidebar-open .has-sidebar-expand-md .page-sidebar {
    position: absolute;
    top: 0;
    transform: translate3d(100%, 0, 0);
  }
  .has-sidebar-expand-md.has-sidebar-fluid .page-inner {
    margin-right: calc(100vw - 37.5rem);
  }
  .has-sidebar-expand-md.has-sidebar-fluid .page-sidebar {
    width: calc(100vw - 37.5rem);
    max-width: calc(100vw - 37.5rem);
  }
}

@media (min-width: 992px) {
  .has-sidebar-expand-lg .app-main > .app-footer,
  .has-sidebar-expand-lg .page-inner {
    margin-right: 30rem;
  }
  .has-sidebar-expand-lg .page-sidebar {
    transform: translate3d(0, 0, 0);
    max-width: 30rem;
  }
  .has-sidebar-open .has-sidebar-expand-lg .page-sidebar {
    position: absolute;
    top: 0;
    transform: translate3d(100%, 0, 0);
  }
  .has-sidebar-expand-lg.has-sidebar-fluid .page-inner {
    margin-right: calc(100vw - 37.5rem);
  }
  .has-sidebar-expand-lg.has-sidebar-fluid .page-sidebar {
    width: calc(100vw - 37.5rem);
    max-width: calc(100vw - 37.5rem);
  }
}

@media (min-width: 1200px) {
  .has-sidebar-expand-xl .app-main > .app-footer,
  .has-sidebar-expand-xl .page-inner {
    margin-right: 30rem;
  }
  .has-sidebar-expand-xl .page-sidebar {
    transform: translate3d(0, 0, 0);
  }
  .has-sidebar-open .has-sidebar-expand-xl .page-sidebar {
    position: absolute;
    top: 0;
    transform: translate3d(100%, 0, 0);
  }
  .has-sidebar-expand-xl.has-sidebar-fluid .page-inner {
    margin-right: calc(100vw - 37.5rem);
  }
  .has-sidebar-expand-xl.has-sidebar-fluid .page-sidebar {
    width: calc(100vw - 37.5rem);
    max-width: calc(100vw - 37.5rem);
  }
}

.has-sidebar-expand .app-main > .app-footer,
.has-sidebar-expand .page-inner {
  margin-right: 30rem;
}

.th_necessary {
  color: #6593ff;
}

.input_max_width {
  max-width:500px;
}

/* DataTable 정렬 화살표 없애기 ------------------------ */
.dataTable > thead > tr > th[class*="sort"]:after{
  content: "" !important;
}
.dataTable > thead > tr > th[class*="sort"]:before{
  content: "" !important;
}

table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting {
  padding-right: 5px;
  vertical-align: middle;
}
/* ------------------------ DataTable 정렬 화살표 없애기*/

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.popover{
  max-width: 100%; /* Max Width of the popover (depending on the container!) */
}


#my-spinner {
  width: 100%; height: 100%;
  top: 0; left: 0;
  display: none;
  opacity: .6;
  background: silver;
  position: fixed;
  z-index: 9999;

}

#my-spinner div {
  width: 100%; height: 100%;
  display: table;
}

#my-spinner span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#my-spinner img {
  background: white;
  padding: 1em;
  border-radius: .7em;
}

@media print {
  body {
    -webkit-print-color-adjust: exact !important;
  }
  .workOrderTable_1 > th {
    background-color: #cecece;
  }
}

.endline{
  page-break-before:always
}

/* gap */
.gap-0-25 { gap: 0.25rem; }
.gap-0-5  { gap: 0.5rem; }
.gap-0-75 { gap: 0.75rem; }
.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }
.gap-3 { gap: 3rem; }
.gap-4 { gap: 4rem; }
.gap-5 { gap: 5rem; }
.gap-6 { gap: 6rem; }
.gap-7 { gap: 7rem; }
.gap-8 { gap: 8rem; }
.gap-9 { gap: 9rem; }
.gap-10 { gap: 10rem; }
.gap-11 { gap: 11rem; }
.gap-12 { gap: 12rem; }

/* gap-x (column-gap) */
.gap-x-0-25 { column-gap: 0.25rem; }
.gap-x-0-5  { column-gap: 0.5rem; }
.gap-x-0-75 { column-gap: 0.75rem; }
.gap-x-1 { column-gap: 1rem; }
.gap-x-2 { column-gap: 2rem; }
.gap-x-3 { column-gap: 3rem; }
.gap-x-4 { column-gap: 4rem; }
.gap-x-5 { column-gap: 5rem; }
.gap-x-6 { column-gap: 6rem; }
.gap-x-7 { column-gap: 7rem; }
.gap-x-8 { column-gap: 8rem; }
.gap-x-9 { column-gap: 9rem; }
.gap-x-10 { column-gap: 10rem; }
.gap-x-11 { column-gap: 11rem; }
.gap-x-12 { column-gap: 12rem; }

/* gap-y (row-gap) */
.gap-y-0-25 { row-gap: 0.25rem; }
.gap-y-0-5  { row-gap: 0.5rem; }
.gap-y-0-75 { row-gap: 0.75rem; }
.gap-y-1 { row-gap: 1rem; }
.gap-y-2 { row-gap: 2rem; }
.gap-y-3 { row-gap: 3rem; }
.gap-y-4 { row-gap: 4rem; }
.gap-y-5 { row-gap: 5rem; }
.gap-y-6 { row-gap: 6rem; }
.gap-y-7 { row-gap: 7rem; }
.gap-y-8 { row-gap: 8rem; }
.gap-y-9 { row-gap: 9rem; }
.gap-y-10 { row-gap: 10rem; }
.gap-y-11 { row-gap: 11rem; }
.gap-y-12 { row-gap: 12rem; }

/* ============================================================
   날짜 입력 최소 폭 (2026-08-13)

   브라우저는 type=date 에 'YYYY. MM. DD' + 달력 아이콘을 그린다.
   저장소 곳곳이 style="width:97px" 로 잡아 두어 연도나 아이콘이 잘렸다
   (통계보고서(품질) mmsc0230 등). 인라인 width 보다 min-width 가 우선하므로
   화면을 하나씩 고치지 않고 여기서 하한만 보장한다.
   ============================================================ */
input[type="date"].form-control {
    /* ko-KR 크롬 기준 '2026. 08. 07.' + 달력 아이콘이 들어가는 최소 폭.
       148px 로 잡았더니 값 뒤 여백이 남아 필드가 길어 보였다. */
    min-width: 132px;
}

input[type="month"].form-control {
    min-width: 124px;
}

/* 날짜 사이의 '~' 라벨이 붙어 보이지 않게 */
.input-label-sm + .input-sub,
.input-sub + .input-label-sm {
    margin-left: .25rem;
}

/* ============================================================
   부분완료 이력 펼침 패널 (cmmCompletionExpand.js) — 2026-08-13

   이 패널은 부모 목록의 <td colspan> 안에 그려진다. 그 td 에
   text-align:center 를 주는 화면이 많아 제목 줄만 가운데로 밀리고
   아래 표는 왼쪽에 남아 축이 어긋나 보였다. 여기서 왼쪽 정렬을 못 박는다.
   ============================================================ */
.completion-expand {
    text-align: left;
    background-color: #f8f9fa;
    border-left: 3px solid #007bff;
    padding: .5rem .75rem;
}

.completion-expand-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    font-size: .85rem;
    margin-bottom: .5rem;
}

.completion-expand-title {
    font-weight: 700;
}

.completion-expand-meta {
    color: #6c757d;
}

/* 부모 표가 아무리 넓어도 이 표는 내용 폭만 쓴다. 왼쪽 끝을 패널에 맞춘다. */
.completion-expand-table {
    width: auto;
    min-width: 680px;
    margin-left: 0;
}

.completion-expand-table th,
.completion-expand-table td {
    padding: .25rem .5rem;
    vertical-align: middle;
}


/* ============================================================
   조회 조건 바 (.search-bar) — 2026-08-13

   구 화면들은 조회 조건을 `.row` + `&nbsp;` 로 붙여 놓아
   간격이 제각각이고(붙거나 과하게 벌어짐) 자식이 float 이면
   부모 높이가 0 이 되어 아래 요소와 겹쳤다.
   flex + gap 으로 한 곳에서 관리한다.
   ============================================================ */
.search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
}

/* 라벨은 바로 뒤 입력과 한 덩어리로 보이게 간격을 좁힌다 */
.search-bar > label {
    margin-bottom: 0;
    margin-right: -.25rem;
    white-space: nowrap;
}

.search-bar > select.custom-select {
    width: auto;
}

/* 오른쪽 끝으로 밀어내는 자리 (구 float-right 대체) */
.search-bar-spacer {
    margin-left: auto;
}

.search-bar .closebtn {
    line-height: 1;
    color: #6c757d;
}

.search-bar .closebtn:hover {
    color: #343a40;
}

/* ============================================================
   공지사항 (cmsc0010) — 2026-08-14

   구 화면 문제
     · 닫기(X)가 자기 줄을 차지하고, 액션 버튼은 전부 float 이라
       부모가 높이를 갖지 못해 헤더가 어긋났다.
     · 댓글 입력이 .input-group 이라 테마 CSS 와 부딪혀 입력창이 좁아지고
       버튼 뒤로 빈 상자가 남았다.
   ============================================================ */
.notice-list-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .25rem .5rem;
}

.notice-detail-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .5rem .25rem;
    border-bottom: 1px solid #e9ecef;
}

.notice-detail-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
}

/* 닫기는 항상 오른쪽 끝 */
.notice-close {
    margin-left: auto;
    line-height: 1;
    font-size: 20px;
    color: #adb5bd;
    padding: 0 .25rem;
}

.notice-close:hover {
    color: #495057;
    text-decoration: none;
}

.notice-comment-form {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}

.notice-comment-form .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.notice-comment-form .btn {
    flex: 0 0 auto;
}

/* 목록 행은 클릭 대상이다 */
#bbsListTable tbody tr {
    cursor: pointer;
}

/* 선택 전 안내가 세로로 과하게 컸다 */
#emptyView {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}