/* ==========================================================================
 * WORKS Overrides — Things 기존 클래스를 디자인 톤으로 패치
 * Depends on: safeu.css (토큰 포함)
 *
 * 적용 순서 (head 안에서):
 *   1) legacy.css        (layout + common + contents 통합)
 *   2) jquery-ui.css / tree.css / login.css (페이지별)
 *   3) safeu.css         (tokens + base + components + extended 통합)
 *   4) safeu-overrides.css ← 마지막에 둬야 cascade 우선
 *
 * 이 파일은 selector specificity를 Things 원본과 동일하게 맞춰
 * !important 없이 색·폰트만 덮어쓴다.
 * ========================================================================== */

/* ==========================================================================
 * 브랜드 컬러 override — safeu.css는 참고 프로젝트와 동일하게 유지하고(향후 diff 비교
 * 편의), --sut-color-primary/-hover 값만 여기서 별도로 덮어쓴다.
 * 처음엔 이 프로젝트의 기존 브랜드 블루(--main-color:#1428A0)를 그대로 썼으나, 새
 * 디자인에서는 너무 파랗게 느껴진다는 피드백에 따라 검정에 더 가까운 다크 네이비
 * (#1C2333, 은은한 블루 톤만 남김)로 톤다운했다. safeu.css 원본의 --sut-color-primary
 * (#222222 검정)를 대체.
 * --sut-color-primary-hover는 기존에 쓰던 블루(#1861A3, 원래 css/layout.css의
 * `#contents button:hover` 색)를 그대로 유지 — 버튼/링크 hover 시엔 여전히 블루 톤이
 * 보이길 원한다는 피드백 반영.
 * ========================================================================== */
:root {
  --sut-color-primary: #1C2333;
  --sut-color-primary-hover: #1861A3;
  /* 테이블 행 hover 전용 — safeu.css 기본 --sut-color-focus/-background(#F9FAFB/#F5F7FA)가
   * 흰 배경 대비 너무 옅어 hover 여부가 잘 구분되지 않는다는 피드백에 따라 별도 지정.
   * 버튼/사이드바/페이지네이션 등 다른 곳의 hover색(--sut-color-focus/-background)은
   * 그대로 두고, 테이블 행 hover에만 이 값을 쓴다. */
  --sut-color-row-hover: #E9EDF5;
}

/* ----- body / link / focus 톤 ----- */
body {
  color: var(--sut-color-primary);
  font-family: var(--sut-font-family);
}
a { color: var(--sut-color-primary); }

input[type=button]:focus,
select:focus,
textarea:focus,
button:focus { border-color: var(--sut-color-primary) !important; }
input[type=text]:focus,
input[type=password]:focus { border-color: var(--sut-color-primary); }
input[type=radio],
input[type=checkbox] { accent-color: var(--sut-color-primary); }

/* ----- 좌측 사이드바 메뉴 hover — 블루 톤 -----
 * safeu.css 기본은 hover 시 배경만 옅게 바뀌고 글자색은 그대로다. 기존 레거시 디자인은
 * hover/active 시 글자색이 브랜드 블루로 바뀌었는데(css/layout.css의
 * `#leftmenu ul.nav li a:hover{color:var(--main-color)}`), 그 느낌을 유지해달라는
 * 피드백에 따라 hover 시 글자색만 블루(--sut-color-primary-hover)로 덮어쓴다. */
.sut-sidebar__link:hover,
.sut-sidebar__sublink:hover {
  color: var(--sut-color-primary-hover);
}

/* 1depth(그룹 헤더) 크기/폰트를 한 단계 더 올림 — safeu.css 기본 13px/600 → 14px/700 →
 * 15px/700, padding 10px → 12px → 14px(대략 49px 높이). */
.sut-sidebar__link {
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
}

/* ----- Header (#header) ----- */
#header {
  background-color: var(--sut-color-white);
  border-bottom: 1px solid var(--sut-color-border);
}

/* ----- Left menu (#leftmenu) ----- */
#leftmenu {
  background-color: var(--sut-color-white);
  border-right: 1px solid var(--sut-color-border);
}
#leftmenu .menu {
  background-color: var(--sut-color-background);
  border-top: 1px solid var(--sut-color-border);
  border-bottom: 1px solid var(--sut-color-border);
  color: var(--sut-color-primary);
}
#leftmenu div.select {
  background-color: var(--sut-color-primary);
  color: var(--sut-color-white);
}
#leftmenu ul.nav li a { color: var(--sut-color-primary); }
#leftmenu ul.nav li a.active,
#leftmenu ul.nav li a:hover,
#leftmenu ul.nav li a.select,
#leftmenu ul.nav li a.sub {
  color: var(--sut-color-primary);
  background-color: var(--sut-color-light);
  font-weight: 700;
}

/* ----- Search box (#contents .search-box) ----- */
#contents .search-box {
  background-color: var(--sut-color-background);
  /* border: 1px solid var(--sut-color-border); */
  border-radius: var(--sut-radius-lg);
}
#contents .search-box .btn-search        { background: var(--sut-color-primary); color: var(--sut-color-white); border-radius: var(--sut-radius-md); }
#contents .search-box .btn-search:hover  { background: var(--sut-color-primary-hover); }

/* 부서선택 팝업(.select-coop)은 #contents 밖이라 위 SafeU 검색 스타일을 못 받는다.
 *  그룹관리 검색과 동일한 톤을 팝업 검색 영역에 별도 적용. */
.select-coop .search-box {
  padding: 16px;
  background-color: var(--sut-color-background);
  border-radius: var(--sut-radius-lg);
}
.select-coop .search-box .search-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.select-coop .search-box .search-group input[type="text"] {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  background-color: var(--sut-color-white);
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-md);
  color: var(--sut-color-primary);
  font-family: var(--sut-font-family);
  font-size: 13px;
}
.select-coop .search-box .btn-search {
  flex-shrink: 0;
  height: 32px;
  padding: 0 14px;
  border: none;
  background: var(--sut-color-primary);
  color: var(--sut-color-white);
  border-radius: var(--sut-radius-md);
  font-family: var(--sut-font-family);
  font-weight: 700;
  cursor: pointer;
}
.select-coop .search-box .btn-search:hover { background: var(--sut-color-primary-hover); }

/* ----- Inputs / Select inside #contents ----- */
#contents input,
#contents select {
  font-family: var(--sut-font-family);
  border: 1px solid var(--sut-color-border);
  background-color: var(--sut-color-white);
  color: var(--sut-color-primary);
  border-radius: var(--sut-radius-md);
}
#contents input::placeholder { color: var(--sut-color-default); }
#contents select[disabled],
#contents input[disabled] { background-color: var(--sut-color-light); color: var(--sut-color-default); }
#contents input[type=checkbox] { accent-color: var(--sut-color-primary); border: 1px solid var(--sut-color-border); }

/* ----- Buttons inside #contents ----- */
/* 버튼 높이 — 처음엔 40px(Figma 원본)를 썼으나 너무 커 보인다는 피드백으로 30px(기존
 * common.css 기본값)까지 줄였고, 이후 다른 인풋류(32px)와 통일해달라는 피드백에 따라
 * 최종 32px로 맞췄다. */
#contents button {
  height: 32px;
  font-family: var(--sut-font-family);
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-md);
  font-weight: 700;
  letter-spacing: var(--sut-letter-spacing-tight);
}
#contents button.blue,
#contents button.black {
  background-color: var(--sut-color-primary);
  color: var(--sut-color-white);
  border-color: var(--sut-color-primary);
}
#contents button.blue:hover,
#contents button.black:hover { background-color: var(--sut-color-primary-hover); }
/* 상세정보 팝업의 "삭제" 버튼 — hover 시 위험을 알리는 빨간색(login.css 등 프로젝트 전반의
 * 경고색 #ed5959 재사용). id로 한정해 같은 .black 클래스를 쓰는 다른 버튼(수정/닫기 등)에는
 * 영향 없게 한다. */
#contents button#companyDelete:hover,
#contents button#accountDelete:hover,
#contents button#equipmentDelete:hover,
#contents button#verkadaDelete:hover {
  background-color: #ed5959;
  border-color: #ed5959;
}
#contents button.grey        { background-color: var(--sut-color-secondary); color: var(--sut-color-white); border-color: var(--sut-color-secondary); }
#contents button.grey:hover  { background-color: var(--sut-color-primary); }
#contents button.white       { display: inline-flex; align-items: center; justify-content: center; background-color: var(--sut-color-white); color: var(--sut-color-primary); border: 1px solid var(--sut-color-border); }
#contents button.white:hover { background-color: var(--sut-color-background); }
/* a.white — excelTemplate 등 <a target="_hiframe"> 패턴용. button.white와 시각적으로 동일. */
#contents a.white {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  background-color: var(--sut-color-white); color: var(--sut-color-primary);
  border: 1px solid var(--sut-color-border); border-radius: var(--sut-radius-md);
  font-family: var(--sut-font-family); font-weight: 700; font-size: 12px;
  letter-spacing: var(--sut-letter-spacing-tight);
  text-decoration: none; cursor: pointer; box-sizing: border-box;
}
#contents a.white:hover { background-color: var(--sut-color-background); }

/* ----- Table (.table-basic / .table-basic1 / .table-basic2) -----
 *  Figma "세이프유 디자인 가이드" node 10631:1286 — 기본 사용법 horizontal
 *  - 헤더: bg white, secondary text, SUIT 14px, 60px 높이 (Figma DataTable 원본 흰 thead)
 *  - 본문: bg white, primary text, SUIT Regular 14px, 48px 높이
 *  - 패딩: px-12 (좌우만), 보더-bottom 1px #BCC3D1 */
#contents .table-basic,
#contents .table-basic1,
#contents .table-basic2 {
  color: var(--sut-color-primary);
  background-color: var(--sut-color-white);
  font-family: var(--sut-font-family);
  border-top: 2px solid var(--sut-color-primary);
  border-collapse: collapse;
  width: 100%;
}
/* thead — bg #F5F7FA(background 토큰, 요청), 14px, 상단선 #222
 * 높이는 실제 렌더링 값(74px — 각 화면의 <tr style="height:74px"> 인라인이 이 규칙의
 * 60px보다 우선 적용되고 있었음, height.html 등에서 재확인)의 80% 로 줄였다(59px).
 * 목록 한 화면에 10행이 다 안 보인다는 피드백에 따라 아래 tbody 행 높이도 같이 줄임.
 * 인라인 height도 각 화면에서 제거해야 이 값이 실제로 적용된다. */
#contents .table-basic thead th,
#contents .table-basic1 thead th,
#contents .table-basic2 thead th {
  background-color: var(--sut-color-background);
  color: var(--sut-color-secondary);
  font-size: 14px;
  font-weight: 500;
  border-top: none;
  border-bottom: 1px solid var(--sut-color-border);
  border-right: none;
  padding: 0 13px;
  height: 59px;
  text-align: center;
  letter-spacing: 0;
}

/* tbody — Figma: bg white, primary #222, Regular 14px, 원래 48px(tr)/54px(td)에서 80%로
 * 줄임(38px/43px) — thead와 같은 이유. */
#contents .table-basic1 tbody tr  { height: 38px; }
#contents .table-basic tbody td,
#contents .table-basic1 tbody td,
#contents .table-basic2 tbody td {
  background-color: var(--sut-color-white);
  border-bottom: 1px solid var(--sut-color-border);
  border-right: none;
  font-size: 14px;
  font-family: var(--sut-font-family);
  font-weight: 400;
  color: var(--sut-color-primary);
  padding: 0 12px;
  height: 43px;
  text-align: center;
}

/* hover 행 — td에 opaque white bg가 있어 tr 자체의 배경은 안 보이므로 td에 직접 적용
 * (아래 "선택 가능한 행 호버 효과"의 tr[onclick]/tr:has(td[onclick]) 규칙과 동일한 이유).
 * onclick이 없는 행(history/authority/signup-request 등)도 hover 시 시각적 피드백이
 *보이도록, 클릭 가능 여부와 무관하게 모든 행에 적용한다. active 행은 별도 지정시만. */
#contents .table-basic tbody tr:hover td,
#contents .table-basic1 tbody tr:hover td,
#contents .table-basic2 tbody tr:hover td {
  background-color: var(--sut-color-row-hover);
}
#contents .table-basic tbody tr.active,
#contents .table-basic1 tbody tr.active,
#contents .table-basic2 tbody tr.active {
  background-color: var(--sut-color-light);
}

/* 권한 현황 테이블(#authTable) 선택 행 — tbody td 의 흰 배경이 tr 배경을 덮으므로 td 에 직접 적용.
 *  배경 틴트 + 굵은 글씨로 선택 상태를 표시. JS(handleAuthRableRow)가 클릭 행에 .active 를 부여한다. */
#contents #authTable tr.active td {
  background-color: var(--sut-color-light);
  font-weight: 600;
}

/* 줄무늬 약화 (Works는 줄무늬 없음 — 모든 행 흰 배경) */
#contents .table-basic tbody tr:nth-child(odd) { background-color: var(--sut-color-white); }

/* 합계 행 */
#contents .table-basic tbody tr.sum td {
  background-color: var(--sut-color-light);
  border-bottom: 1px solid var(--sut-color-border);
  color: var(--sut-color-primary);
  font-weight: 700;
}

/* ----- 1:1 문의 리스트 답변완료 뱃지 (.sut-reply-done) — reply.png 이미지 대체.
 *  연한 초록 배경 + 초록 점 + "완료" 텍스트. lowrisk 토큰 사용. */
#contents .sut-reply-done {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--sut-color-lowrisk-border);
  border-radius: var(--sut-radius-sm);
  background-color: var(--sut-color-lowrisk-fill);
  font-family: var(--sut-font-family);
  font-size: 12px;
  font-weight: 500;
  color: var(--sut-color-primary);
  line-height: 1;
  white-space: nowrap;
}
#contents .sut-reply-done i {
  width: 6px;
  height: 6px;
  border-radius: var(--sut-radius-sm);
  background-color: var(--sut-color-lowrisk);
}

/* ----- Pagination — Figma 라운드 페이지 번호 패턴 -----
 *  .active = 검정 채움 원, .page_num = 평문 텍스트(hover 시 라이트 bg), .btn = 화살표
 *  HTML: <a class="btn pre1"></a> <a class="active">1</a> <a class="page_num">2</a> ... <a class="btn next1"></a> */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.pagination > div {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pagination a {
  color: var(--sut-color-secondary) !important;
  font-family: var(--sut-font-family);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: var(--sut-radius-sm);
  cursor: pointer;
  transition: background-color var(--sut-transition-fast),
              color var(--sut-transition-fast);
}
.pagination a.active {
  background: var(--sut-color-primary);
  color: var(--sut-color-white) !important;
  font-weight: 700;
}
.pagination a.page_num:hover {
  background: var(--sut-color-light);
  color: var(--sut-color-primary) !important;
}
/* 화살표 버튼(.btn .pre1/.pre10/.next1/.next10) — 기존 background-image 유지하고 크기만 통일 */
.pagination a.btn {
  min-width: 36px;
  width: 36px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
}
.pagination a.btn:hover { background-color: var(--sut-color-light); }

/* ----- Modal (.modal / .popup / .fixed-popUp*) ----- */
.modal,
.popup,
.fixed-popUp,
.fixed-popUp1,
.fixed-popUp2,
.fixed-popUp3,
.fixed-popUp4,
.fixed-popUp5 {
  background-color: var(--sut-color-white);
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-lg);
}
.modal h4, .popup h4 { color: var(--sut-color-primary); font-weight: 700; }
.modal button.yes,
.popup button.yes {
  background-color: var(--sut-color-primary);
  color: var(--sut-color-white);
  border-radius: var(--sut-radius-md);
  border: none;
}
.modal button.yes:hover,
.popup button.yes:hover { background-color: var(--sut-color-primary-hover); }
.modal button.no,
.popup button.no {
  background-color: var(--sut-color-disabled);
  color: var(--sut-color-primary);
  border-radius: var(--sut-radius-md);
  border: none;
}
.modal button.no:hover,
.popup button.no:hover { background-color: var(--sut-color-border); }


/* ----- Breadcrumb ----- */
#contents .content > div span[style*="#004D8F"] { color: var(--sut-color-primary) !important; }

/* ----- jQuery UI Datepicker (안전현황 디자인) ----- */
.ui-datepicker {
  background: var(--sut-color-white);
  border: 1px solid var(--sut-color-border-light);
  border-radius: var(--sut-radius-md);
  font-family: var(--sut-font-family);
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(34, 34, 34, 0.10);
  padding: 12px;
  width: 240px;
}
.ui-datepicker .ui-datepicker-header {
  background: var(--sut-color-white);
  color: var(--sut-color-primary);
  border: none;
  border-bottom: 1px solid var(--sut-color-border-light);
  border-radius: 0;
  font-weight: 700;
  padding-bottom: 8px;
}
.ui-datepicker .ui-datepicker-title { font-weight: 700; color: var(--sut-color-primary); font-size: 14px; }
/* 이전/다음 달 버튼 */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  cursor: pointer;
  top: 3px;
  border: none;
  background: none;
  border-radius: var(--sut-radius-sm);
  width: 22px;
  height: 22px;
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover { background: var(--sut-color-background); border: none; }
/* 기본 아이콘 숨기고 CSS 화살표로 대체 */
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
  display: none;
}
.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-left: 1.5px solid var(--sut-color-primary);
  border-bottom: 1.5px solid var(--sut-color-primary);
  position: absolute;
  top: 50%;
  left: 50%;
}
.ui-datepicker .ui-datepicker-prev::after {
  transform: translate(-30%, -50%) rotate(45deg);
}
.ui-datepicker .ui-datepicker-next::after {
  transform: translate(-70%, -50%) rotate(-135deg);
}
/* 요일 헤더 */
.ui-datepicker th { color: var(--sut-color-secondary); font-weight: 600; padding: 6px 2px; font-size: 12px; }
/* 토/일 요일 헤더 빨간색 */
.ui-datepicker th.ui-datepicker-week-end { color: #E53E3E; }
/* 날짜 셀 — ui-state-default 보더/배경 초기화 포함 */
.ui-datepicker td a,
.ui-datepicker td span,
.ui-datepicker td a.ui-state-default,
.ui-datepicker td span.ui-state-default,
.ui-widget-content .ui-datepicker td a.ui-state-default,
.ui-widget-content .ui-datepicker td span.ui-state-default {
  background: var(--sut-color-white);
  color: var(--sut-color-primary);
  border: none;
  border-radius: var(--sut-radius-sm);
  text-align: center;
  padding: 0;
  width: 28px;
  height: 28px;
  line-height: 28px;
  display: block;
  margin: 1px auto;
}
/* 토/일 날짜 빨간색 */
.ui-datepicker td.ui-datepicker-week-end a,
.ui-datepicker td.ui-datepicker-week-end span { color: #E53E3E; }
/* 이전/다음 달 날짜 */
.ui-datepicker td.ui-datepicker-other-month a,
.ui-datepicker td.ui-datepicker-other-month span { color: var(--sut-color-secondary-hover); }
/* hover */
.ui-datepicker td a:hover { background: var(--sut-color-background); color: var(--sut-color-primary); border: none; }
/* 선택된 날짜 (원형 다크) */
.ui-datepicker td a.ui-state-active {
  background: var(--sut-color-primary);
  color: var(--sut-color-white);
  border: none;
}
/* 오늘 날짜 */
.ui-datepicker td a.ui-state-highlight {
  background: var(--sut-color-primary-hover);
  color: var(--sut-color-white);
  border: none;
}
/* 년/월 셀렉트 SafeU 스타일 */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  font-family: var(--sut-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--sut-color-primary);
  background-color: var(--sut-color-white);
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-sm);
  height: 24px;
  padding: 0 4px;
  text-align: center;
  text-align-last: center;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.ui-datepicker select.ui-datepicker-month:focus,
.ui-datepicker select.ui-datepicker-year:focus {
  border-color: var(--sut-color-primary);
}
/* 버튼 패널 숨김 */
.ui-datepicker .ui-datepicker-buttonpane { display: none; }

/* ----- 선택 가능한 행 호버 효과 (전체 화면) ----- */
/* .tr-clickable: main.js 작업자별 탭 — jQuery click 바인딩, inline onclick 없음 */
#contents .table-basic tbody tr.tr-clickable:hover td,
#contents .table-basic1 tbody tr.tr-clickable:hover td,
#contents .table-basic2 tbody tr.tr-clickable:hover td {
  background-color: var(--sut-color-row-hover);
  cursor: pointer;
}
/* td에 white bg가 tr bg를 덮으므로 td에 직접 적용 (authTable 주석 참고) */
/* tr[onclick]: equipment/user/company — 행 전체 클릭 */
#contents .table-basic tbody tr[onclick]:hover td,
#contents .table-basic1 tbody tr[onclick]:hover td,
#contents .table-basic2 tbody tr[onclick]:hover td {
  background-color: var(--sut-color-row-hover);
  cursor: pointer;
}
/* tr:has(td[onclick]): safepoint/inquiry/notice/apk — 셀 단위 클릭 */
#contents .table-basic tbody tr:has(td[onclick]):hover td,
#contents .table-basic1 tbody tr:has(td[onclick]):hover td,
#contents .table-basic2 tbody tr:has(td[onclick]):hover td {
  background-color: var(--sut-color-row-hover);
  cursor: pointer;
}

/* ----- Things 인라인 색상 강제 덮어쓰기 (가능한 범위) ----- */
/* main.html 상단 안전현황 텍스트 — 인라인 #004D8F */
[style*="color: #004D8F"], [style*="color:#004D8F"] { color: var(--sut-color-primary) !important; }
[style*="color: #0029D2"], [style*="color:#0029D2"] { color: var(--sut-color-primary) !important; }

/* main.html 모달 버튼 인라인 #0029D2 */
button[style*="background: #0029D2"],
button[style*="background:#0029D2"] {
  background: var(--sut-color-primary) !important;
  color: var(--sut-color-white) !important;
}


/* ==========================================================================
 * App Shell — main.html SafeU Works 톤 마이그레이션 오버라이드
 *
 * 레거시 layout.css 의 #header/#leftmenu/#contents/.content 규칙이
 * 새 .sut-app-shell 그리드와 충돌하므로 셸 컨텍스트에서만 무력화한다.
 * 다른 페이지(company.html 등)는 .sut-app-shell 가 없어 영향 없음.
 * ========================================================================== */

.sut-app-shell#container {
  width: auto;
  height: 100vh;
  min-width: 0;
  transition: none;
}
.sut-app-shell #header {
  position: relative;     /* ::after 구분선 위치 기준 (레거시 fixed 해제 — 그리드 영역에 머무름) */
  width: auto;
  min-width: 0;
  height: 60px;
  display: flex;           /* 신규 topbar: user-info 를 세로 중앙 정렬 */
  align-items: center;
  background-color: var(--sut-color-white);
  border-bottom: none;     /* .sut-topbar 기본 클래스의 전체 폭 구분선을 끄고 아래 ::after로만 그린다 */
  z-index: auto;
  /* 로그아웃 영역(.user-info, margin-left:auto로 우측 정렬)이 항상 헤더의 실제 우측
   * 끝까지 붙어서, 아래 .content(max-width:1340px, 좌측 정렬)의 우측 끝과 안 맞았다.
   * 배경은 전체 폭 그대로 두고(안 그러면 옆에 이상한 음영이 생김), 우측 padding만
   * calc()로 동적 계산해서 .user-info 우측 끝이 .content 우측 끝(padding-left 60px +
   * max-width 1340px = 1400px)과 항상 같은 위치에 오도록 맞춘다.
   * (콘텐츠를 가운데 정렬하는 방안도 시도했으나, 넓은 화면에서 사이드바 때문에 콘텐츠가
   * 화면 전체 중앙보다 오른쪽으로 보인다는 피드백에 따라 좌측 정렬로 되돌림 — 사이드바에
   * 콘텐츠 시작 위치를 붙이는 것이 의도된 레이아웃.) */
  padding-left: 60px;
  padding-right: calc(100% - 1400px);
}
/* 헤더 구분선(border-bottom)도 전체 폭이 아니라 로그아웃 버튼 끝(=.content 우측 끝)까지만
 * 오도록, #header 자체 border 대신 그 너비만큼만 그리는 ::after 로 대체. */
.sut-app-shell #header::after {
  content: '';
  position: absolute;
  left: 60px;
  right: calc(100% - 1400px);
  bottom: 0;
  height: 1px;
  background-color: var(--sut-color-border);
}
/* layout.css 의 #header .user-info{float:right;padding:30px 0 0 0} 은
 * 기존 80px 고정 헤더 기준 수치라, 60px 높이의 신규 topbar(flex)에서는
 * float 무시(항목 하나뿐이라 영향 없음) + 과도한 padding-top 만 남아 아래로 치우친다.
 * 새 topbar 컨텍스트에서만 무력화.
 * 추가로 .user-info 자체는 block이라 안의 p.name(인사말)/a.btn-logout(버튼)이 각자
 * inline-block 기본 baseline으로 정렬돼 줄이 안 맞아 보인다는 피드백에 따라, .user-info를
 * flex로 바꿔 인사말/로그아웃 버튼을 한 줄 가운데로 정렬한다. */
.sut-app-shell #header .user-info {
  float: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sut-app-shell #header .user-info p.name {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.sut-app-shell #header .user-info a.btn-logout {
  display: inline-flex;
  align-items: center;
  height: 32px;
  line-height: normal;
}
.sut-app-shell #leftmenu {
  float: none;            /* 레거시 float 해제 */
  width: auto;            /* 그리드 셀에 맞춤 */
  min-height: 0;
  height: auto;
  top: auto;
  left: auto;
  border-right: 1px solid var(--sut-color-border);
}
/* safeu.css 의 .sut-app-shell__main{padding:80px 100px}(Figma 원본)이 화면을 너무 넓게/
 * 헐렁하게 쓴다는 피드백에 따라 40px 60px로 줄이고, 안쪽 .content 도 레거시처럼 다시
 * max-width 캡을 둬서 초광폭 모니터에서 내용이 끝없이 늘어나지 않게 한다.
 * 상단 패딩은 topbar와 content 사이 간격이 너무 벌어진다는 피드백에 따라 40px→20px로
 * 추가 조정(좌우/하단은 40px/60px 유지). */
.sut-app-shell #contents {
  padding: 20px 60px 40px;
  height: auto;
}
.sut-app-shell #contents .content {
  max-width: 1340px;      /* 1580px도 넓다는 피드백에 따라 재조정 */
  /* 가운데 정렬(margin:0 auto)도 시도했으나, 넓은 화면에서 사이드바 때문에 콘텐츠가 화면
   * 전체 중앙보다 오른쪽으로 치우쳐 보인다는 피드백에 따라 좌측 정렬(사이드바에 붙임)로
   * 되돌림 — 의도된 레이아웃. 넓은 모니터에서 우측에 여백이 남는 것은 정상 동작이다. */
  padding: 0;
  min-height: 0;
  overflow: visible;
}

/* ----- 페이지 상단 타이틀 박스 -----
 *  main/history/company/equipment/user/notice/inquiry/apk/authority/authority-detail/
 *  group/safepoint 의 "안전현황 | 그룹관리/현장/작업자별 ..." 헤더 영역에서 공통 사용.
 *  기존 인라인 style="width: 100%;height: 54px;margin-top: 65px;" 의 대체. */
.sut-page-header {
  width: 100%;
  height: 54px;
  margin-top: 65px;
  margin-bottom: 30px;
}

/* 사이드바 로고 — Figma는 left-align이지만 Things 브랜드는 가운데 정렬 유지(사용자 요청) */
.sut-app-shell__brand { justify-content: center; }
.sut-app-shell__brand img,
.sut-app-shell__brand svg {
  height: 24px;
  width: auto;
  max-width: 200px;
}

/* ==========================================================================
 * 폰트 전역 통일 — 레거시 layout.css/style.css의 Noto Sans/HDharmonyB 덮어쓰기
 * (테이블 셀은 별도 처리: SUIT + tabular-nums)
 * ========================================================================== */
body,
input,
select,
textarea,
button,
#login .login-wrap .input-wrap > input {
  font-family: var(--sut-font-family);
}

/* 테이블 셀: SUIT + 등폭 숫자(tabular-nums)로 숫자 컬럼 정렬감 유지 */
#contents .table-basic1 tbody td,
#contents .table-form tbody td {
  font-family: var(--sut-font-family);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ==========================================================================
 * 팝업 폼 테이블(.table-form) — DefinitionTable 톤으로 통일
 *  company 업체정보 팝업의 .sut-deftable 디자인을 모든 화면 팝업에 동일 적용.
 *  - 그리드 보더 제거, 컨테이너만 상단 2px / 하단 1px
 *  - 라벨 셀 연한 배경, 값 셀 흰 배경
 *  - 입력 필드는 검색 영역 인풋과 동일한 SafeU 톤(44px / radius-lg)
 * ========================================================================== */
#contents .table-form {
  border-top: 2px solid var(--sut-color-border);
  border-bottom: 1px solid var(--sut-color-border);
  border-collapse: collapse;
}
#contents .table-form tbody tr { height: auto; }
#contents .table-form tbody td {
  border: none;
  border-bottom: 1px solid var(--sut-color-border);
  padding: 14px 16px;
  height: 56px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sut-color-primary);
  background-color: var(--sut-color-white);
  vertical-align: middle;
}
/* common.css 의 td:first-child/td:last-child 좌우 보더(높은 specificity) 제거 */
#contents .table-form tbody td:first-child { border-left: none; }
#contents .table-form tbody td:last-child { border-right: none; }
#contents .table-form tbody td.label {
  background-color: var(--sut-color-background);
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sut-color-primary);
  text-align: left !important;   /* common.css .ta-c !important 덮어쓰기 */
}
#contents .table-form input[type="text"],
#contents .table-form input[type="number"],
#contents .table-form input[type="password"],
#contents .table-form select {
  height: 32px;
  padding: 0 12px;
  background-color: var(--sut-color-white);
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-md);
  color: var(--sut-color-primary);
  font-family: var(--sut-font-family);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--sut-ls-body-xs);
  box-sizing: border-box;
  vertical-align: middle;
}
/* 내용 textarea (공지사항 등록/수정 등) — 입력 인풋과 동일한 SafeU 톤.
 *  상세보기의 읽기전용 textarea 는 인라인 border:none 으로 테두리 없이 유지된다. */
#contents .table-form textarea {
  width: 100%;
  padding: 14px 16px;
  background-color: var(--sut-color-white);
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-lg);
  color: var(--sut-color-primary);
  font-family: var(--sut-font-family);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--sut-ls-body-xs);
  box-sizing: border-box;
}
#contents .table-form textarea:focus { border-color: var(--sut-color-primary); }

/* 입력 필드: 수정/입력 가능하면 보더 표시, 비활성(disabled)·읽기전용(readonly)이면 보더 숨김.
 * border-color 만 transparent 로 둬서 레이아웃(1px) 은 유지하고 정렬이 틀어지지 않게 한다.
 * 팝업뿐 아니라 페이지 폼(group.html 등)의 .table-form 에도 동일 적용. */
#contents .table-form input[disabled],
#contents .table-form input[readonly],
#contents .table-form select[disabled] {
  border-color: transparent;
}
/* 값 셀의 액션 버튼(중복검사/소속찾기 등) — 인풋 높이에 맞춰 정렬 */
#contents .table-form tbody td button {
  height: 30px;
  vertical-align: middle;
}
/* 입력 필드는 셀 가로를 채운다(인라인 width 가 없는 인풋 대상).
 * 단, 바로 뒤에 버튼이 붙는 인풋(중복검사 등, .sut-input-cell 로 감싸지 않은 마크업)은
 * 100% 로 채우면 버튼이 옆 칸을 침범한다 — 이런 경우는 자연스러운 너비로 둔다. */
#contents .table-form tbody td input[type="text"]:not(:has(+ button)),
#contents .table-form tbody td input[type="number"]:not(:has(+ button)),
#contents .table-form tbody td input[type="password"]:not(:has(+ button)) {
  width: 100%;
}
/* 인풋 + 액션 버튼이 한 셀: flex 로 인풋이 남는 폭을 채우고 버튼은 고정 */
#contents .table-form tbody td .sut-input-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
#contents .table-form tbody td .sut-input-cell input { flex: 1 1 0; min-width: 0; }
#contents .table-form tbody td .sut-input-cell button { flex-shrink: 0; margin: 0; }
/* 선택 버튼과 짝인 readonly 값 표시 필드(그룹명 등)는 입력 필드처럼 보더를 유지한다. */
#contents .table-form tbody td .sut-input-cell input[readonly] {
  border-color: var(--sut-color-border);
}

/* ==========================================================================
 * Search bar — SafeU 톤 디테일 (main.html 검색 바)
 *
 *  레거시 마크업/JS는 그대로 유지하고 CSS로만 톤 매칭.
 *  - .calendarType  : 오늘/1주일/1개월/기간 세그먼트 버튼
 *  - .label_radio   : 그룹별/작업자별 라디오 (orange image → CSS 검정 톤)
 *  - #start_dt/#end_dt : 날짜 인풋 사이즈/보더
 *  - .serach-cooperator-list button#cooperatorSelectBtn : 셀렉트 트리거
 *  - .btn-search    : 검색 버튼 사이즈/폰트
 *  - input[name=device] + label : 안전모턱끈/안전고리/안전벨트
 * ========================================================================== */

/* ----- search-box / search-group 컨테이너 ----- */
#contents .search-box .search-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--sut-font-family);
  font-size: 14px;
  font-weight: 500;
  color: var(--sut-color-primary);
  letter-spacing: var(--sut-ls-body-xs);
}
/* 조회영역이 좁은 화면에서 줄바꿈될 때, 라벨과 그 값(입력/셀렉트)이 서로 다른 줄로
 * 쪼개지지 않도록 "라벨+값" 한 쌍을 하나의 줄바꿈 단위로 묶는다(user.html/verkada.html
 * 조회영역 레이아웃 깨짐 수정). */
#contents .search-box .field-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
/* 검색바 라벨 spans(무엇을 입력해야 하는지 알려주는 텍스트, 예: 그룹/경고유형/이름)은
 * placeholder만으로 대체하지 않고 그대로 보여준다 — 라벨 없이는 뭘 입력해야 하는지
 * 알기 어렵다는 피드백에 따라 숨김 처리를 되돌림. */
/* 레거시 1×1 spacer 이미지는 gap 으로 대체 */
#contents .search-box .search-group > img.spacer { display: none; }
/* 날짜 영역과 라디오/체크 영역을 두 줄로 분리 — end_dt 다음의 class/id 없는 빈 <div> 를 flex line break 로 활용
 * (그 div 안에 공백 텍스트 노드가 있어 :empty 로는 매칭 불가 → 구조 기반 셀렉터 사용) */
#contents .search-box .search-group > div:not([id]):not([class]) {
  flex-basis: 100%;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 적립기간/차감일시 탭으로 분리한 날짜 영역 — search-group 내부에서 인라인 정렬 유지 */
#contents .search-box .sut-period-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#contents .search-box .sut-period-row > img.spacer { display: none; }

/* ----- 세그먼트 버튼 (오늘/1주일/1개월/기간) + 사용자정보 팝업 마스킹 라디오(.sut-masking-radio)
 *  Figma "세이프유 디자인 가이드" node 5:3570 — 둥근 라디오 패턴
 *  pill(1px border) + 원형 라디오 아이콘(::before).
 *  처음엔 44px 높이(Figma 원본)를 그대로 썼으나, 다른 검색창 요소(28px)에 비해 너무 커
 *  보인다는 피드백에 따라 기존 `.calendarType label`(contents.css, 28px/padding 0 10px)
 *  크기로 되돌리고 톤만 SafeU로 남겼다. */
#contents .search-box .calendarType,
#contents .sut-masking-radio { gap: 8px; margin-right: 4px; }
#contents .search-box .calendarType span ~ span,
#contents .sut-masking-radio span ~ span { margin-left: 0; }   /* gap 으로 통일 */
#contents .search-box .calendarType label,
#contents .sut-masking-radio label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background-color: var(--sut-color-white);
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-sm);
  color: var(--sut-color-primary);
  font-family: var(--sut-font-family);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--sut-ls-body-xs);
  cursor: pointer;
  transition: background-color var(--sut-transition-fast),
              border-color var(--sut-transition-fast);
}
/* 둥근 라디오 아이콘 */
#contents .search-box .calendarType label::before,
#contents .sut-masking-radio label::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 1.5px solid var(--sut-color-border);
  border-radius: 50%;
  background: var(--sut-color-white);
  transition: border-color var(--sut-transition-fast),
              background var(--sut-transition-fast);
}
#contents .search-box .calendarType label:hover,
#contents .sut-masking-radio label:hover {
  background-color: var(--sut-color-light);
}
#contents .search-box .calendarType input[type="radio"]:checked + label,
#contents .sut-masking-radio input[type="radio"]:checked + label {
  border-color: var(--sut-color-primary);
  font-weight: 700;
}
#contents .search-box .calendarType input[type="radio"]:checked + label::before,
#contents .sut-masking-radio input[type="radio"]:checked + label::before {
  border-color: var(--sut-color-primary);
  background: radial-gradient(
    circle,
    var(--sut-color-primary) 0 4px,
    var(--sut-color-white) 4.5px 100%
  );
}

/* ----- 세그먼트 토글 (정보변경 이력 탭 라디오, .sut-segment)
 *  선택 = primary(dark) fill + 흰 텍스트, 미선택 = light gray fill + secondary 텍스트.
 *  .calendarType 베이스가 native radio 숨김을 처리하고, 여기서 색/형태만 토글 톤으로 덮는다. */
#contents .sut-segment { gap: 8px; }
#contents .sut-segment span ~ span { margin-left: 0; }
#contents .sut-segment label {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  background-color: var(--sut-color-light);
  border: 0;
  border-radius: var(--sut-radius-md);
  color: var(--sut-color-secondary);
  font-family: var(--sut-font-family);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--sut-ls-body-xs);
  cursor: pointer;
  transition: background-color var(--sut-transition-fast),
              color var(--sut-transition-fast);
}
#contents .sut-segment label:hover { background-color: var(--sut-color-secondary-hover); }
#contents .sut-segment input[type="radio"]:checked + label {
  background-color: var(--sut-color-primary);
  color: var(--sut-color-white);
  font-weight: 700;
}

/* ----- 날짜 인풋 (main: #start_dt/#end_dt, 다른 페이지: #s_bgndt/#s_enddt, safepoint 차감: #s_bgndt_deduction/#s_enddt_deduction) ----- */
#contents .search-box #start_dt,
#contents .search-box #end_dt,
#contents .search-box #s_bgndt,
#contents .search-box #s_enddt,
#contents .search-box #s_bgndt_deduction,
#contents .search-box #s_enddt_deduction {
  height: 32px;
  padding: 0 26px 0 8px;
  width: 140px;
  font-family: var(--sut-font-family);
  font-size: 13px;
  font-weight: 500;
  color: var(--sut-color-primary);
  letter-spacing: var(--sut-ls-body-xs);
  background-color: var(--sut-color-white);
  background-image: url(../images/cal.png);
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 16px 16px;
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-sm);
}

/* ----- 그룹별/작업자별 라디오 (.label_radio + .r_on) -----
 *  레거시는 radio-off.png(흰)/radio-on.png(주황) 사용. 이미지 제거 후 CSS로 검정 도트. */
.label_radio {
  background-image: none;
  position: relative;
  padding-left: 24px;
  height: auto;
  min-height: 18px;
  line-height: 18px;
  font-family: var(--sut-font-family);
  font-size: 14px;
  font-weight: 500;
  color: var(--sut-color-primary);
  letter-spacing: var(--sut-ls-body-xs);
}
.label_radio::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: var(--sut-radius-sm);
  border: 1.5px solid var(--sut-color-border);
  background: var(--sut-color-white);
  transition: border-color var(--sut-transition-fast);
}
label.label_radio.r_on {
  background-image: none;          /* common.css 의 .r_on radio-on.png 제거 */
}
.label_radio.r_on::before { border-color: var(--sut-color-primary); }
.label_radio.r_on::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: var(--sut-radius-sm);
  background: var(--sut-color-primary);
}

/* ----- 협력업체 선택 버튼 (#cooperatorSelectBtn / #cooperatorSelectWorkerBtn)
 *  Figma "세이프유 디자인 가이드" node 5:3037 — text-input 드롭박스 패턴
 *  - border 1px #BCC3D1, radius 12px, p-24
 *  - SUIT Medium 18px / #222
 *  - 우측 24x24 chevron caret (닫힘 ▼ / 열림 ▲)
 *  contents.css 의 `.serach-cooperator-list button { height/border/border-radius !important }`
 *  를 풀어내기 위해 동일 selector + !important 사용.
 *  (history/user 의 #s_groupBtn 처럼 data 속성 없는 트리거도 포함하도록 자식 button 전체를 대상으로 한다.) */
#contents .search-box .serach-cooperator-list {
  width: auto;
  height: auto;
  border: 0;
}
#contents .search-box .serach-cooperator-list > button {
  height: 32px !important;      /* 다른 조회 인풋/셀렉트(32px)와 통일 — 원래 44px는 참고
                                  * 프로젝트(Figma) 기본값이 그대로 남아있던 것 */
  padding: 0 32px 0 12px;
  text-align: left;
  background-color: var(--sut-color-white);
  border: 1px solid var(--sut-color-border) !important;
  border-radius: var(--sut-radius-md) !important;
  color: var(--sut-color-primary);
  font-family: var(--sut-font-family);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--sut-ls-body-xs);
  line-height: 1.4;
  position: relative;
  cursor: pointer;
  transition: border-color var(--sut-transition-fast);
}
#contents .search-box #cooperatorSelectBtn        { width: 220px; }
#contents .search-box #cooperatorSelectWorkerBtn  { width: 220px; }
#contents .search-box #workerSelectBtn            { width: 220px; }
#contents .search-box .serach-cooperator-list > button:hover {
  border-color: var(--sut-color-primary);
}
/* caret: 24×24 영역에 12px chevron, 닫힘 ▼ → 열림(.active) ▲ */
#contents .search-box .serach-cooperator-list > button::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--sut-color-primary);
  border-bottom: 2px solid var(--sut-color-primary);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--sut-transition-fast);
}
#contents .search-box .serach-cooperator-list.active > button[data-button="selected"]::after {
  transform: translateY(-30%) rotate(-135deg);
}

/* ----- 검색 박스 안의 native <select> / 텍스트 인풋 통일 (32px 높이, 톤만 SafeU) -----
 *  inquiry/history/user 등의 select와 placeholder-only 인풋 통일.
 *  처음엔 44px/큰 min-width로 참고 프로젝트 크기를 그대로 가져왔으나, 전체적으로 가로/세로가
 *  너무 커 보인다는 피드백에 따라 기존 크기(28px)로 줄였다가, 다른 인풋류와 통일해달라는
 *  후속 피드백에 따라 32px로 맞췄다. select 너비는 contents.css 의 140px 유지, 색/보더/폰트
 *  톤만 SafeU로 남겼다. */
#contents .search-box .search-group select,
#contents .search-box .search-group input[type="text"]:not(#start_dt):not(#end_dt):not(#s_bgndt):not(#s_enddt):not(#s_bgndt_deduction):not(#s_enddt_deduction):not([name="autoComplete"]),
#contents .search-box .search-group input[type="number"] {
  height: 32px;
  padding: 0 8px;
  background-color: var(--sut-color-white);
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-md);
  color: var(--sut-color-primary);
  font-family: var(--sut-font-family);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--sut-ls-body-xs);
  box-sizing: border-box;
}
#contents .search-box .search-group select {
  padding-right: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23222222' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  width: 140px;
}
#contents .search-box .search-group input[type="number"] { width: 80px; }

/* alert2 모달 내 텍스트 인풋 — 검색박스 인풋과 동일한 SafeU 스타일 */
#alert2 .sut-modal__body input[type="text"] {
  height: 44px;
  padding: 0 16px;
  background-color: var(--sut-color-white);
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-lg);
  color: var(--sut-color-primary);
  font-family: var(--sut-font-family);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: var(--sut-ls-body-xs);
  box-sizing: border-box;
}

/* 업체정보 팝업(.fixed-popUp) DefinitionTable 입력 필드 — 검색박스 인풋과 동일한 SafeU 톤.
 *  value 셀을 flex 컨테이너로 두어 input + 중복검사 버튼을 간격 정렬한다. */
#contents [class*="fixed-popUp"] .sut-deftable {
  border: none;
  border-top: 2px solid var(--sut-color-border);
  border-radius: 0;
}
#contents [class*="fixed-popUp"] .sut-deftable__row { border: none; border-bottom: 1px solid var(--sut-color-border); }
#contents [class*="fixed-popUp"] .sut-deftable__label { border-right: none; }
#contents [class*="fixed-popUp"] .sut-deftable__value { gap: 8px; }
#contents [class*="fixed-popUp"] .sut-deftable input[type="text"],
#contents [class*="fixed-popUp"] .sut-deftable input[type="number"] {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  background-color: var(--sut-color-white);
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-lg);
  color: var(--sut-color-primary);
  font-family: var(--sut-font-family);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--sut-ls-body-xs);
  box-sizing: border-box;
}
#contents .fixed-popUp .sut-deftable .r_img {
  flex-shrink: 0;
  height: 44px;
  white-space: nowrap;
}

/* 권한 생성/수정 팝업(#authPopup): 권한레벨 커스텀 셀렉트(.sut-select-box) 드롭다운이
 *  모달 내부 overflow(패널/바디/deftable hidden·auto)에 잘리는 문제 해제.
 *  필드 2개짜리 작은 팝업이라 내부 스크롤이 불필요하므로 #authPopup 한정으로 overflow 를 풀어
 *  드롭다운이 패널 밖으로 자연스럽게 펼쳐지게 한다. */
#authPopup,
#authPopup .sut-modal__body,
#authPopup .sut-deftable {
  overflow: visible;
}

/* 차감하기 팝업(.fixed-popUp4) DefinitionTable 의 select / 수량 스테퍼 — SafeU 인풋 톤 통일 */
#contents .fixed-popUp4 .sut-deftable select {
  height: 44px;
  padding: 0 36px 0 16px;
  background: var(--sut-color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2370747F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-lg);
  color: var(--sut-color-primary);
  font-family: var(--sut-font-family);
  font-size: 14px;
  font-weight: 500;
  box-sizing: border-box;
}
#contents .fixed-popUp4 .sut-deftable select:focus { border-color: var(--sut-color-primary); }
/* 수량 인풋은 좌우 +/- 버튼 사이 60px 고정 폭 유지 */
#contents .fixed-popUp4 .sut-deftable #v_coupon_count {
  flex: 0 0 60px;
  width: 60px;
  padding: 0 8px;
  text-align: center;
}
/* +/- 버튼: common.css 미로드(이미지 없음) → SafeU 테두리 박스 + FontAwesome 글리프로 직접 구성 */
#contents .fixed-popUp4 .sut-deftable .btn-minus,
#contents .fixed-popUp4 .sut-deftable .btn-plus {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 4px;
  background: var(--sut-color-white);
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-lg);
  color: var(--sut-color-primary);
  font-size: 16px;
  cursor: pointer;
}
#contents .fixed-popUp4 .sut-deftable .btn-minus:hover,
#contents .fixed-popUp4 .sut-deftable .btn-plus:hover { border-color: var(--sut-color-primary); }
#contents .fixed-popUp4 .sut-deftable .btn-minus::before,
#contents .fixed-popUp4 .sut-deftable .btn-plus::before {
  font-family: FontAwesome;
  line-height: 1;
}
#contents .fixed-popUp4 .sut-deftable .btn-minus::before { content: "\f068"; }
#contents .fixed-popUp4 .sut-deftable .btn-plus::before { content: "\f067"; }

/* 드롭다운 항목(<li>) — 그룹/작업자 리스트 (main.js renderCooperatorSelect / renderWorkerListSelect 생성).
 *  .sut-select-box__option 과 동일한 40px 높이 + hover 라이트 배경으로 통일 (모든 화면 공통) */
#contents .search-box .serach-cooperator-list .list-wrapper ul li {
  height: 40px;
  padding: 0 16px;
  cursor: pointer;
  transition: background-color var(--sut-transition-fast);
}
#contents .search-box .serach-cooperator-list .list-wrapper ul li:hover {
  background-color: var(--sut-color-light);
}
/* 단일선택(.cooperator-option) 항목은 체크박스가 없으므로 label 좌측 여백 제거 →
 *  .sut-select-box__option 과 동일하게 padding(16px) 위치에서 텍스트 시작 */
#contents .search-box .serach-cooperator-list .list-wrapper ul li.cooperator-option label {
  margin-left: 0;
}

/* ----- 검색 타입 탭 (그룹별 / 작업자별) -----
 *  #contents button (line 98) 가 1px #BCC3D1 보더 + 8px radius 를 강제하므로
 *  탭 룰은 #contents prefix 로 specificity 를 올려 그 보더를 무력화한다. */
#contents .sut-search-tabs {
  display: flex;
  align-items: stretch;
  border-bottom: 2px solid var(--sut-color-border);
  margin: 0 0 20px;
  padding: 0;
}
#contents .sut-search-tab {
  position: relative;
  height: 48px;                /* common.css #contents button {height:30px} 무력화 */
  line-height: 1.5;
  padding: 0 24px;
  font-family: var(--sut-font-family);
  font-size: 16px;
  font-weight: 600;
  color: var(--sut-color-secondary);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
#contents .sut-search-tab:hover { color: var(--sut-color-primary); }
#contents .sut-search-tab.is-active {
  color: var(--sut-color-primary);
  font-weight: 700;
}
#contents .sut-search-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--sut-color-primary);
}

/* ----- 상태 보관용 라디오는 화면에서 숨김 (JS는 checked 상태만 사용) ----- */
.label_radio.sut-hidden-radio { display: none !important; }

/* ----- 작업자별 그룹 셀렉트 컨테이너 (#cooperatorSelectWorkerGroup) -----
 *  Row 2 안에서 inline-flex 로 동작. JS show/hide 가 display 를 inline-block→none 으로 토글 */
.sut-worker-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 8px;
}

/* ----- 디바이스 체크박스 그룹 (#deviceCheckGroup) -----
 *  Figma 칩 패턴 — 각 input+label 쌍을 알약형 칩처럼 표시.
 *  native checkbox는 시각적으로 숨기고, label 을 pill 컨테이너로 + ::before 로 커스텀 체크박스 그리기.
 *  HTML 구조: <input type="checkbox" ...><label for=...>...</label> (sibling) */
.sut-device-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}

/* native checkbox 숨김 (label 클릭으로 토글, 폼 값은 input이 그대로 보유) */
#contents .search-box input[name="device"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

/* label = pill 칩 컨테이너 */
#contents .search-box input[name="device"] + label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px 0 12px;
  margin: 0;
  background: var(--sut-color-white);
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-lg);
  font-family: var(--sut-font-family);
  font-size: 14px;
  font-weight: 500;
  color: var(--sut-color-primary);
  letter-spacing: var(--sut-ls-body-xs);
  cursor: pointer;
  transition: background-color var(--sut-transition-fast),
              border-color var(--sut-transition-fast);
}

/* 커스텀 체크박스 박스 (라벨 좌측 ::before) */
#contents .search-box input[name="device"] + label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--sut-color-border);
  border-radius: 3px;
  background: var(--sut-color-white);
  box-sizing: border-box;
  transition: background var(--sut-transition-fast),
              border-color var(--sut-transition-fast);
}

#contents .search-box input[name="device"] + label:hover {
  background: var(--sut-color-light);
}

/* checked 상태: 검정 채움 + 흰 체크마크 */
#contents .search-box input[name="device"]:checked + label {
  border-color: var(--sut-color-primary);
  font-weight: 700;
}
#contents .search-box input[name="device"]:checked + label::before {
  background-color: var(--sut-color-primary);
  border-color: var(--sut-color-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5l3 3 6-6'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

/* disabled 상태 — JS가 검색 전 비활성으로 두는 케이스 (handleAuth/handleChangeSearchType) */
#contents .search-box input[name="device"]:disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ----- 검색 버튼 (#searchBtn / .btn-search) ----- */
/* margin-left:auto로 검색그룹 맨 우측까지 밀어붙였더니 마지막 필터와 간격이 너무 벌어진다는
 * 피드백에 따라, 원래 레거시 값(contents.css `.btn-search{margin-left:5px}`)처럼 바로 옆에
 * 붙도록 되돌림. */
#contents .search-box .btn-search {
  height: 32px;
  padding: 0 14px;
  margin-left: 8px;
  width: 75px;             /* 기존 실측 폭(약 50px)의 150% — 더 눌러보기 쉽게 넓힘 */
  font-family: var(--sut-font-family);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--sut-ls-body-xs);
  border-radius: var(--sut-radius-md);
}

/* ----- 작업자 상세 테이블 헤더 — sort 아이콘과 텍스트 겹침 방지 ----- */
/* sort.png(24x24) + 짧은 텍스트("배터리"·"체결률")가 좁은 th에서 겹치는 현상 보정 */
#detailTable thead th[data-sort-item] {
  min-width: 80px;
}

/* ==========================================================================
 * SafeU Modal 공통 컴포넌트 (.sut-modal__*)
 * design-system.md §5.8 (Figma 10568:1246 + 10568:1247)
 *
 * 사용법 — 기존 .modal/.popup 패널의 외곽에 클래스만 추가하면 적용.
 *   <div class="modal app-receiver sut-modal__panel">
 *     <div class="sut-modal__header">
 *       <span class="sut-modal__title">제목</span>
 *       <button class="sut-modal__close" data-button="layerClose">✕</button>
 *     </div>
 *     <div class="sut-modal__body"> ...본문(팝업마다 다름)... </div>
 *     <div class="sut-modal__footer">
 *       <button class="sut-btn sut-btn--md sut-btn--secondary">취소</button>
 *       <button class="sut-btn sut-btn--md sut-btn--primary">확인</button>
 *     </div>
 *   </div>
 * 푸터 버튼이 1개면 우측 정렬, 2개면 좌(보조)/우(주요) 양 끝 정렬.
 * ========================================================================== */

/* 딤 배경 — common.css 의 .darkBg(position/inset/display) 정의를 베이스로,
 * SafeU 셸 컨텍스트에서 z-index 와 dim 색을 덮어쓴다.
 *   - z-index: 1000 → 사이드바(.sut-app-shell__sidebar z-index:1) 위로 덮음
 *   - background-color: SafeU 토큰
 *
 * 주의 — 이 규칙은 이제 **전 페이지에 적용된다**. 처음 작성될 때는 main.html 만
 * SafeU 셸이었지만 지금은 모든 화면이 sut-app-shell 을 쓴다. 따라서 딤과 함께
 * 뜨는 팝업은 z-index 가 1000 보다 커야 한다.
 *   - .fixed-popUp* (legacy.css z-index:3) → sut-modal__panel(1001) 을 함께 부여
 *   - 페이지 자체 모달(.sr-modal / .ga-modal 등) → 1001~1003 으로 직접 지정
 * 알림/확인 오버레이(#alert.overlay)는 1100 이므로 항상 그 위에 남는다.
 *
 * 셀렉터 주의 — 참고 프로젝트는 .sut-app-shell(#container)이 body 바로 아래에 있어
 * `.sut-app-shell ~ .darkBg` 형제 셀렉터가 성립했지만, 이 프로젝트는 기존 id(#wrapper)를
 * 유지해야 해서 #container 가 #wrapper 안에 한 단계 더 들어가 있다(.darkBg 는 body 바로
 * 아래). 그래서 형제 셀렉터 대신 `:has()` 로 "안에 .sut-app-shell 이 있는 body"를 찾는다. */
body:has(.sut-app-shell) .darkBg {
  background-color: var(--sut-color-dim);
  z-index: 1000;
}

/* .fixed-popUp / .fixed-popUp1,3,4,5 — legacy z-index:3(common.css) 그대로 두면 위 .darkBg(1000)
 * 뒤로 깔려 팝업이 안 보이거나 배경처럼 눌려 보인다(company.html 업체정보 팝업에서 실제 확인된
 * 회귀). sut-modal__panel 클래스가 마크업에 없는 팝업까지 포함해서 딤 위로 뜨도록 최소
 * z-index만 올려준다. (.fixed-popUp2는 아래에서 별도로 처리) */
body:has(.sut-app-shell) .fixed-popUp,
body:has(.sut-app-shell) .fixed-popUp1,
body:has(.sut-app-shell) .fixed-popUp3,
body:has(.sut-app-shell) .fixed-popUp4,
body:has(.sut-app-shell) .fixed-popUp5,
body:has(.sut-app-shell) .select-coop,
body:has(.sut-app-shell) .select-coop-search,
body:has(.sut-app-shell) .app-receiver {
  z-index: 1001;
}

/* 1:1 문의 상세팝업의 이미지 확대 팝업(.fixed-popUp2) — SafeU 셸 컨텍스트 보정.
 *  - z-index: common.css(3) 대신 .darkBg(1000) 위로 올려 딤이 이미지를 덮지 않게 한다.
 *    (.fixed-popUp1 은 sut-modal__panel(1001) 로 이미 처리됨)
 *  - position:fixed + transform 으로 화면 정중앙 배치 (common.css 의 left/margin 정렬 대체)
 *  - 배경은 메인 컬러(검은색)로 — object-fit:contain 레터박스 영역이 검게 보이도록 */
.sut-app-shell .fixed-popUp2 {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 1001;
  background: #000;
}
/* 좌우 화살표 — 반투명 라운드 사각 + 흰 chevron SVG 로 교체.
 * common.css 의 PNG(off/on) 배경을 덮는다. (background-image 만 교체, 위치/repeat 유지)
 * 호버 시 사각 투명도가 올라간 _on SVG 로 살짝 밝아진다. */
.sut-app-shell .fixed-popUp2 .btn-left-image {
  background-image: url(../images/image_arrow_left.svg);
}
.sut-app-shell .fixed-popUp2 .btn-left-image:hover {
  background-image: url(../images/image_arrow_left_on.svg);
}
.sut-app-shell .fixed-popUp2 .btn-right-image {
  background-image: url(../images/image_arrow_right.svg);
}
.sut-app-shell .fixed-popUp2 .btn-right-image:hover {
  background-image: url(../images/image_arrow_right_on.svg);
}

/* #alert1.overlay 도 사이드바(#leftmenu z-index:999, layout.css:73) 위로 덮이도록 강화.
 * SafeU 셸을 쓰는 모든 페이지(company/equipment/...)에 적용. background 도 SafeU 톤.
 * position/inset/display 도 함께 정의해 common.css 미로드 페이지(main.html)에서도
 * :target 토글이 동작하도록 함.
 * z-index 1100: 알림/확인(showModalMessage 의 #alert) 오버레이는 항상 최상단이어야 한다.
 *   .overlay 는 position:fixed + z-index 로 자체 스태킹 컨텍스트를 만들어 내부 패널을 가두므로,
 *   내부 .sut-modal__panel(1001) 이 상세 팝업(.fixed-popUp1.sut-modal__panel 1001) 뒤로 깔리는 것을
 *   막으려면 오버레이 자체가 1001 위에 있어야 한다. */
/* #wrapper 중첩 때문에 형제 셀렉터가 안 맞는 이유는 위 .darkBg 규칙 주석 참고. */
body:has(.sut-app-shell) .overlay {
  position: fixed;
  inset: 0;
  display: none;
  background-color: var(--sut-color-dim);
  z-index: 1100;
}
body:has(.sut-app-shell) .overlay:target { display: block; }

/* :target 메커니즘으로 표시되는 모달(company/equipment/.. 의 #alert1.overlay 내부)에서
 * .sut-modal__panel 의 display:none 이 풀리도록 specificity 올려 덮어쓴다. */
.overlay:target .sut-modal__panel {
  display: flex;
  flex-direction: column;
}

/* panel: 패널 자체가 position/visibility까지 책임짐
 * (main.html은 contents.css를 로드하지 않으므로 .modal 기본 스타일에 의존 불가) */
.sut-modal__panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;                  /* JS fadeIn() 으로 표시 */
  z-index: 1001;                  /* .darkBg(1000) 위 */
  background-color: var(--sut-color-white);
  border-radius: var(--sut-radius-lg);
  box-shadow: var(--sut-shadow-modal);
  border: 0;
  overflow: hidden;
  padding: 0;
}

/* header: padding 16 24 17 / 보더 라인은 좌우 24px 인덴트 (패널 가로를 다 채우지 않음) */
/* safeu-components.css의 .sut-modal__header { border-bottom: 1px ... }을 제거해
 * ::after 인덴트 라인과 이중으로 그려지는 것을 방지 */
.sut-modal__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 17px;
  border-bottom: 0;
}
.sut-modal__header::after {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 1px;
  background-color: var(--sut-color-border-50);
  z-index: 1;
}

.sut-modal__title {
  font-family: var(--sut-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--sut-ls-body-sm);
  color: var(--sut-color-primary);
}

.sut-modal__close {
  background: transparent;
  border: 0;
  padding: 0;
  width: 24px;
  height: 24px;
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  color: var(--sut-color-secondary);
  cursor: pointer;
}
.sut-modal__close:hover { color: var(--sut-color-primary); }

/* body: padding 20 24 — 본문 콘텐츠 톤은 각 모달이 결정 */
.sut-modal__body {
  padding: 20px 24px;
  font-family: var(--sut-font-family);
  font-size: 14px;
  line-height: 1.5;
  color: var(--sut-color-primary);
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

/* footer: 좌(보조)/우(주요) 양 끝 정렬, 버튼 1개면 우측 정렬 */
/* 보더 라인은 좌우 24px 인덴트 (패널 가로를 다 채우지 않음) */
.sut-modal__footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 24px;
}
.sut-modal__footer::before {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 1px;
  background-color: var(--sut-color-border-50);
}
/* 푸터 버튼 배치 규칙
 *  - 좌측에는 1개만, 나머지는 우측
 *  - 좌측 버튼 우선순위(마크업 작성 순서): 삭제 > 닫기 > 수정 > 저장 > 적용 > 확인
 *  - 버튼 1개면 우측 정렬 */
.sut-modal__footer > :first-child { margin-right: auto; }
.sut-modal__footer > :only-child   { margin-right: 0; margin-left: auto; }

/* 단순 confirm/알림 모달(showModalMessage → #alert 주입) — WORKS식 경량 중앙형:
 * × 제거 · 타이틀/본문/버튼 중앙 · 헤더/푸터 구분선 제거 (P2#5).
 * 입력 폼 모달(.modal/.fixed-popUp, #alert1+)은 현행 헤더 유지 (P2#6). */
#alert .sut-modal__close { display: none; }
#alert .sut-modal__header { justify-content: center; }
#alert .sut-modal__header::after { display: none; }
#alert .sut-modal__body { text-align: center; }
#alert .sut-modal__footer { justify-content: center; }
#alert .sut-modal__footer::before { display: none; }
#alert .sut-modal__footer > * { margin-left: 0; margin-right: 0; }

/* App 수신주기 설정 모달 — 분(minutes) 입력 SafeU 테마 적용 (요청) */
.app-receiver #period {
  width: 90px;
  height: 44px;
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-md);
  padding: 0 12px;
  font-family: var(--sut-font-family);
  font-size: 14px;
  color: var(--sut-color-primary);
  text-align: center;
}
.app-receiver #period:focus { border-color: var(--sut-color-primary); outline: none; }

/* 모달 푸터 내 sut-btn (글로벌 .sut-btn 미정의 환경 대비)
 * #contents button 셀렉터(specificity 0,1,0,1) 영향을 끊기 위해 #contents 컨텍스트 셀렉터 동봉 */
#contents .sut-modal__footer .sut-btn,
.sut-modal__footer .sut-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 100px;                /* 모든 푸터 버튼 가로 동일 */
  padding: 0 20px;
  border-radius: var(--sut-radius-lg);
  font-family: var(--sut-font-family);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: var(--sut-ls-body-xs);
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
}
#contents .sut-modal__footer .sut-btn--primary,
.sut-modal__footer .sut-btn--primary {
  background-color: var(--sut-color-primary);
  color: var(--sut-color-white);
  border-color: var(--sut-color-primary);
}
#contents .sut-modal__footer .sut-btn--primary:hover,
.sut-modal__footer .sut-btn--primary:hover {
  background-color: var(--sut-color-primary-hover);
  border-color: var(--sut-color-primary-hover);
}
#contents .sut-modal__footer .sut-btn--secondary,
.sut-modal__footer .sut-btn--secondary {
  background-color: var(--sut-color-white);
  color: var(--sut-color-primary);
  border-color: var(--sut-color-border);
}
#contents .sut-modal__footer .sut-btn--secondary:hover,
.sut-modal__footer .sut-btn--secondary:hover {
  background-color: var(--sut-color-light);
}

/* ----- common.css/contents.css 의 #contents button (height:30, border, radius) 영향 차단 -----
 * .sut-modal__close 가 #contents 안에 있을 때(company/equipment/...) 차단 */
#contents .sut-modal__close,
.sut-modal__close {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--sut-font-family);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: var(--sut-color-secondary);
  cursor: pointer;
}
#contents .sut-modal__close:hover,
.sut-modal__close:hover { color: var(--sut-color-primary); }

/* ----- 모달 패널 내부 영역의 패딩/마진 표준화 -----
 * common.css 의 .fixed-popUp>div { width:90%; margin:0 auto; padding-bottom:25px; }
 * 등이 헤더/바디/푸터에 적용되어 패딩이 비대해지는 현상 보정 */
.sut-modal__panel > .sut-modal__header,
.sut-modal__panel > .sut-modal__body,
.sut-modal__panel > .sut-modal__footer {
  width: auto;
  margin: 0;
}
.sut-modal__panel > .sut-modal__header { padding: 16px 24px 17px; }
.sut-modal__panel > .sut-modal__body   { padding: 30px 24px; }
.sut-modal__panel > .sut-modal__footer { padding: 16px 24px; }

/* .fixed-popUp{margin-top:-188.5px} 등 페이지별 base CSS 잔존 마진 무력화
 * (가로/세로 정확히 화면 중앙에 위치하도록) */
.sut-modal__panel {
  margin: 0;
}

/* ----- 포인트 지급/차감 상세현황 팝업 탭 (지급현황 / 차감현황) -----
 *  안전현황(main.html) 의 .sut-search-tab 언더라인 탭 디자인과 통일.
 *  마크업이 <li> 라 #contents button 보더 룰의 영향은 없고, JS 의 .active 토글은 그대로 유지한다.
 *  common.css 의 .tab1 / .tab1_item (회색 박스 + 주황 채움) 룰을 무력화. */
.tab_menu { text-align: left; }
.tab1 {
  display: flex;
  align-items: stretch;
  border-bottom: 2px solid var(--sut-color-border);
  margin: 0 0 20px;
  padding: 0;
  gap: 0;
}
.tab1_item {
  position: relative;
  height: 48px;
  line-height: 48px;
  padding: 0 24px;
  font-family: var(--sut-font-family);
  font-size: 16px;
  font-weight: 600;
  color: var(--sut-color-secondary);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.tab1_item:hover { color: var(--sut-color-primary); }
.tab1_item.active {
  color: var(--sut-color-primary);
  font-weight: 700;
  background: transparent;
  border: 0;
}
.tab1_item.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--sut-color-primary);
}

/* ----- APK 파일 첨부 영역 (apk.html 등록하기 폼 #apkUploadForm 의 .filebox) -----
 *  같은 행의 select·첨부 인풋은 #contents .table-form 룰로 이미 44px·토큰 보더를 받지만,
 *  '선택' 버튼은 <button> 이 아닌 <label> 이라 #contents button / .black 토큰 룰을 못 받아
 *  common.css .filebox label 의 레거시(높이 30px · #3D3D3D · radius 5px · 12px)가 남아 어긋난다.
 *  filebox 를 flex 한 줄로 정렬하고, '선택' 버튼을 같은 행 인풋(44px) + SafeU 버튼 톤에 맞춘다.
 *  (.filebox 는 다른 화면에서도 쓰이므로 apk 등록 폼 #apkUploadForm 으로만 한정) */
#apkUploadForm .filebox {
  display: flex;
  align-items: center;
  gap: 8px;
}
#apkUploadForm .filebox .upload-name { flex: 1 1 0; min-width: 0;}
#apkUploadForm .filebox label {
  flex-shrink: 0;
  width: 118px;
  height: 44px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sut-font-family);
  font-size: 14px;
  font-weight: 700;
  color: var(--sut-color-white);
  background-color: var(--sut-color-primary);
  border-radius: var(--sut-radius-md);
}
#apkUploadForm .filebox label:hover { background-color: var(--sut-color-primary-hover); }

/* ----- 일괄 등록 박스 (equipment.html division2 .bulk-reg) -----
 *  레거시 #ccc 테두리 + #f8f8f8 박스 → SafeU 카드 톤.
 *  파일 첨부행(.filebox)은 apk 패턴과 동일하게 한 줄 flex: [파일명 인풋][찾기(outline)][업로드(primary)].
 *  raw file input 은 숨기고 '찾기' label(for=file) 로 트리거. (company 등 동일 박스에는 영향 없게 .bulk-reg 한정) */
#contents .bulk-reg {
  border: 1px solid var(--sut-color-border);
  background-color: var(--sut-color-background);
  border-radius: var(--sut-radius-lg);
  padding: 30px;
  font-size: 14px;
}
#contents .bulk-reg .filebox {
  display: flex;
  align-items: center;
  gap: 8px;
}
#contents .bulk-reg .filebox .upload-name {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
}
#contents .bulk-reg .filebox input[type="file"] { display: none; }
#contents .bulk-reg .filebox label {
  flex-shrink: 0;
  width: 100px;
  height: 44px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sut-font-family);
  font-size: 14px;
  font-weight: 700;
  color: var(--sut-color-primary);
  background-color: var(--sut-color-white);
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-md);
  cursor: pointer;
}
#contents .bulk-reg .filebox label:hover { background-color: var(--sut-color-light); }
#contents .bulk-reg .filebox button { flex-shrink: 0; height: 44px; }

/* ----- 그룹관리(group.html) Menu Tree 레이아웃 -----
 *  group.html 은 contents.css 를 로드하지 않아 .group-admin 의 flex 배치가 빠져 있다.
 *  트리(좌 400px) + 입력 폼(우)을 좌우로 배치하고, 폼(.input-area)을 sticky 로 분리해
 *  메뉴 트리가 길어 페이지가 스크롤돼도 폼이 화면에 계속 보이게 한다. */
#contents .group-admin {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
#contents .group-admin .menu-tree { flex: 0 0 400px;}
#contents .group-admin .input-area {
  flex: 1;
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

/* ----- jsTree 트리 — SafeU 미니멀 필 디자인 (그룹관리 #menuTree / 사용자관리 부서선택 팝업 #treeMenu 공통) -----
 *  jsTree default 테마(스프라이트 토글/아이콘)를 덮어쓴다.
 *  safeu-overrides.css 는 tree.css 보다 늦게 로드되어 우선 적용된다.
 *  둥근 필 호버/선택 · 셰브론 토글 · 점선 연결선은 CSS(::before/::after)로 직접 그림.
 *  .jstree-default 로 스코프해 프로젝트의 모든 jsTree(현재 #menuTree·#treeMenu)에 동일 적용. */
.jstree-default .jstree-node,
.jstree-default .jstree-icon { background-image: none; }   /* 스프라이트 제거(점선은 CSS로 대체) */
.jstree-default .jstree-node { margin-left: 20px; }
.jstree-default > .jstree-container-ul > .jstree-node { margin-left: 0; }
.jstree-default .jstree-themeicon { display: none; }       /* 폴더/파일 아이콘 숨김 */

.jstree-default .jstree-anchor {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  height: 40px;
  line-height: 40px;
  min-width: 200px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--sut-color-primary);
  transition: background-color .15s, box-shadow .15s;
}
.jstree-default .jstree-hovered {
  background: var(--sut-color-focus);
  box-shadow: none;
  border-radius: 10px;
}
.jstree-default .jstree-clicked {
  background: var(--sut-color-nav-active);
  border-radius: 10px;
  font-weight: 600;
  border: 1px dotted var(--sut-color-primary);
}

/* 토글: 스프라이트 → SafeU 셰브론. 닫힘이면 -90° 회전 */
.jstree-default .jstree-ocl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  vertical-align: middle;
}
.jstree-default .jstree-node:not(.jstree-leaf) > .jstree-ocl::before {
  content: '';
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%2370747F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center/12px no-repeat;
  transition: transform .15s;
}
.jstree-default .jstree-closed > .jstree-ocl::before { transform: rotate(-90deg); }

/* 점선 연결선: 중첩 children(루트 container-ul 제외)의 각 노드에 세로선 + 수평 tick.
 *  margin-left:20px 거터(-10px 지점)에 점선을 그리고, 마지막 자식은 세로선을 tick 까지만 남겨 끊는다. */
.jstree-default .jstree-children:not(.jstree-container-ul) > .jstree-node {
  position: relative;
}
.jstree-default .jstree-children:not(.jstree-container-ul) > .jstree-node::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 0;
  height: 100%;
  border-left: 2px dotted var(--sut-color-secondary);
}
.jstree-default .jstree-children:not(.jstree-container-ul) > .jstree-node.jstree-last::before {
  height: 15px;   /* 마지막 자식: 행 중앙(tick)까지만 */
}
/* #menuTree .jstree-children:not(.jstree-container-ul) > .jstree-node::after {
  content: '';
  position: absolute;
  left: -10px;
  top: 15px;
  width: 10px;
  border-top: 1px dotted var(--sut-color-secondary);
} */

/* ----- 카드/패널 (헤더 바 + 본문) -----
 *  상단 연한 회색 헤더(타이틀) + 둥근 테두리 흰색 본문. 표·콘텐츠를 감싸는 섹션 래퍼. */
.sut-card {
  border: 1px solid var(--sut-color-border);
  border-radius: 16px;
  background: var(--sut-color-white);
  margin-top: 30px;
  /* overflow:hidden 은 자식 .input-area 의 position:sticky 를 깨므로 사용하지 않는다.
   *  둥근 모서리는 헤더 상단 corner 를 직접 라운딩해 유지. */
}
.sut-card__header {
  padding: 20px 28px;
  background: var(--sut-color-background);
  border-bottom: 1px solid var(--sut-color-border);
  border-radius: 16px 16px 0 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--sut-color-primary);
}
.sut-card__body {
  padding: 20px 30px;
}

/* ==========================================================================
 * 권한 설정 상세(authority-detail.html) — 동적 생성 콘텐츠 SafeU 톤
 *
 *  이 페이지는 common.css/contents.css 를 로드하지 않으므로 authority-detail.js 가
 *  생성하는 레거시 클래스(.sub_title/.sub_auth_list/.auth-container/.admin_title/
 *  .mid_title/.auth_input_list/.chk/.hidden)가 스타일을 못 받는다.
 *  content 래퍼의 .authority-detail 스코프로만 적용해 다른 화면에 영향 없게 한다.
 * ========================================================================== */

/* 권한 선택 검색 영역 — 라벨 + 커스텀 셀렉트 한 줄 정렬 */
.authority-detail .search-box { padding: 16px; margin-bottom: 24px; }

/* 섹션 제목 (.sub_title — 상세 뷰 그룹 헤딩 + 상단 "권한 설정하기") */
.authority-detail .sub_title {
  font-family: var(--sut-font-family);
  font-size: 18px;
  font-weight: 700;
  color: var(--sut-color-primary);
  margin: 24px 0 12px;
}

/* 상세 뷰 권한 항목 행 */
.authority-detail .sub_auth_list {
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-md);
  padding: 14px 16px;
  font-family: var(--sut-font-family);
  font-size: 14px;
  color: var(--sut-color-primary);
}
.authority-detail .sub_auth_list + .sub_auth_list { margin-top: 8px; }

/* 수정 뷰 그룹 컨테이너 / 타이틀 (레거시 주황 #FF5000 → primary)
 *  분류(top group)마다 상단 구분선 + 여백으로 시각 분리. */
.authority-detail .auth-container {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--sut-color-border);
}
.authority-detail .auth-container:first-child {
  margin-top: 12px;
  padding-top: 0;
  border-top: none;
}
.authority-detail .admin_title {
  font-family: var(--sut-font-family);
  font-size: 18px;
  font-weight: 700;
  color: var(--sut-color-primary);
  margin: 0 0 16px;
}
.authority-detail .mid_title {
  font-family: var(--sut-font-family);
  font-size: 15px;
  font-weight: 700;
  color: var(--sut-color-secondary);
  margin: 24px 0 12px;
}

/* 소분류 체크박스 — 칩(pill) 행. 각 항목을 알약형 칩으로, 가로 flex-wrap 배치 */
.authority-detail .auth_input_list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}
.authority-detail .auth_input_list li {
  display: flex;
  flex: 1 1 160px;   /* 가로 폭을 균등 분배해 한 줄을 가득 채움(좁으면 줄바꿈) */
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

/* 커스텀 체크박스 (.chk 라벨 + .hidden native) — SafeU 박스 + 흰 체크마크 */
.authority-detail input[type="checkbox"].hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.authority-detail .chk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--sut-font-family);
  color: var(--sut-color-primary);
}
.authority-detail .chk::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1.5px solid var(--sut-color-border);
  border-radius: 4px;
  background: var(--sut-color-white);
  transition: background var(--sut-transition-fast),
              border-color var(--sut-transition-fast);
}
.authority-detail input[type="checkbox"]:checked + .chk::before {
  background-color: var(--sut-color-primary);
  border-color: var(--sut-color-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5l3 3 6-6'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

/* 소분류 항목(.auth_input_list li)의 .chk 만 칩(pill)으로 — 첨부 디자인.
 *  상위 그룹/중분류 타이틀(.admin_title/.mid_title)의 체크박스는 위 기본 박스 스타일 유지. */
.authority-detail .auth_input_list li .chk {
  flex: 1;            /* li 폭을 가득 채움 */
  width: 100%;
  height: 44px;
  padding: 0 16px;
  background: var(--sut-color-white);
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-lg);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--sut-transition-fast),
              border-color var(--sut-transition-fast);
}
.authority-detail .auth_input_list li .chk:hover {
  background: var(--sut-color-focus);
  border-color: var(--sut-color-primary);
}
.authority-detail .auth_input_list li input[type="checkbox"]:checked + .chk {
  border-color: var(--sut-color-primary);
  /* background: var(--sut-color-light); */
  font-weight: 700;
}

/* 안내 문구 가운데 정렬 / 액션 버튼 우측 정렬 */
.authority-detail .ta-c { text-align: center; }
.authority-detail .ta-r {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ==========================================================================
 * 로그인 비밀번호 변경안내 팝업 (index.html .modal.initialLogin-info) — SafeU 톤
 *  login.css 의 레거시 색(#FF5000 핑크 / #ed5959 빨강 / #3D3D3D 회색)·32px 인풋·38px
 *  버튼을 토큰으로 덮어쓴다. login.css 보다 늦게 로드돼 동일/상위 specificity 로 우선.
 *  .initialLogin-info 스코프라 다른 로그인 모달(.find-id-pw)에는 영향 없음.
 * ========================================================================== */
.modal.initialLogin-info {
  border: 0;
  border-radius: var(--sut-radius-lg);
  box-shadow: var(--sut-shadow-modal);
  overflow: hidden;
}
.initialLogin-info .title {
  border-bottom: 1px solid var(--sut-color-border-50);
  color: var(--sut-color-primary);
  font-size: 20px;
  font-weight: 700;
}
.initialLogin-info .password-notice { color: var(--sut-color-primary); }
.initialLogin-info .password-notice .point { color: var(--sut-color-alert); }
.initialLogin-info .password-info {
  background-color: var(--sut-color-background);
  color: var(--sut-color-secondary);
  border-radius: var(--sut-radius-md);
}
.initialLogin-info .password-info .point { color: var(--sut-color-alert); }
.initialLogin-info .input-for-change .input-item label {
  height: 44px;
  color: var(--sut-color-primary);
}
.initialLogin-info .input-for-change input[type="password"],
.initialLogin-info .input-for-change input[type="text"] {
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--sut-color-border);
  border-radius: var(--sut-radius-md);
  color: var(--sut-color-primary);
  font-family: var(--sut-font-family);
  font-size: 14px;
  box-sizing: border-box;
}
.initialLogin-info .input-for-change input[type="password"]:focus,
.initialLogin-info .input-for-change input[type="text"]:focus {
  border-color: var(--sut-color-primary);
}
.initialLogin-info .input-for-change .input-wrap .point { color: var(--sut-color-alert); }
.initialLogin-info .modal-button-area button {
  height: 44px;
  border-radius: var(--sut-radius-md);
  font-family: var(--sut-font-family);
  font-weight: 700;
}
.initialLogin-info .modal-button-area button.black {
  background-color: var(--sut-color-disabled);
  color: var(--sut-color-primary);
}
.initialLogin-info .modal-button-area button.black:hover { background-color: var(--sut-color-border); }
.initialLogin-info .modal-button-area button.pink {
  background-color: var(--sut-color-primary);
  color: var(--sut-color-white);
}
.initialLogin-info .modal-button-area button.pink:hover { background-color: var(--sut-color-primary-hover); }

/* ==========================================================================
 * 회원가입 / 그룹 선택 / 가입 상태 확인 팝업 (index.html) — SafeU 톤
 *  login.css 의 레거시 주황(#FF5000) 버튼을 토큰으로 덮어쓴다.
 *  .black(#3D3D3D) 도 함께 바꾼다. primary 가 어두워 나란히 두면 구분이 안 된다.
 * ========================================================================== */
.modal.signup .input-with-etc button,
.modal.signup-status .input-with-etc button {
  background: var(--sut-color-primary);
  color: var(--sut-color-white);
}
.modal.signup .input-with-etc button:hover,
.modal.signup-status .input-with-etc button:hover {
  background: var(--sut-color-primary-hover);
}
.modal.signup .input-with-etc button:disabled,
.modal.signup-status .input-with-etc button:disabled {
  background: var(--sut-color-disabled);
  color: var(--sut-color-secondary);
}
.modal.signup .modal-button-area button.pink,
.modal.signup-group .modal-button-area button.pink,
.modal.signup-status .modal-button-area button.pink {
  background-color: var(--sut-color-primary);
  color: var(--sut-color-white);
}
.modal.signup .modal-button-area button.pink:hover,
.modal.signup-group .modal-button-area button.pink:hover,
.modal.signup-status .modal-button-area button.pink:hover {
  background-color: var(--sut-color-primary-hover);
}
.modal.signup .modal-button-area button.black,
.modal.signup-group .modal-button-area button.black,
.modal.signup-status .modal-button-area button.black {
  background-color: var(--sut-color-disabled);
  color: var(--sut-color-primary);
}
.modal.signup .modal-button-area button.black:hover,
.modal.signup-group .modal-button-area button.black:hover,
.modal.signup-status .modal-button-area button.black:hover {
  background-color: var(--sut-color-border);
}

/* 인라인 반복 디자인 패턴 추출 클래스 */
.stat-num {
  font-size: 32px;
  color: var(--sut-color-primary);
  font-weight: 700;
  padding-right: 5px;
}
.label-sub {
  font-size: 16px;
  color: var(--sut-color-secondary);
  font-weight: 500;
}
.label-bold {
  font-size: 16px;
  font-weight: 700;
  text-align: start;
}
.flex-row-gap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sort-icon {
  cursor: pointer;
  margin-left: 2px;
}