/*
 * 웹 화면 전용 스타일 — 도메인별 절로 나눈 한 파일. web/head.jsp 가 공통 CSS 맨 끝에 싣는다(모든 웹 화면).
 * 예전 css/web/page/{도메인}.css 를 2026-10-21 에 합쳤다. 절 제목의 (원래 파일) 로 찾는다.
 *
 * 규칙(WEB-INF/CLAUDE.md §8 「CSS 작성」)
 *  - 모든 규칙은 화면 루트 클래스(page-{도메인}-{업무})로 범위를 건다. 이 파일은 모든 화면에 실리므로 범위 없는 선택자를 두지 않는다
 *  - 모달·팝업처럼 본문 밖에 그려지는 요소까지 걸어야 하면 :where(body:has(.page-…)) 를 쓴다(우선순위가 늘지 않는다)
 *  - 두 도메인 이상이 같이 쓰는 규칙은 여기 두지 않고 css/common.css(웹 공통)·css/shared/components.css(웹·모바일)로 옮긴다
 *  - 대시보드는 css/web/dashboard.css, GPS 지도는 css/web/gps.css, 조회조건 패널은 css/web/condition-panel.css 에 따로 있다
 */

/* ################################################################
 * accident-news (원래 css/web/page/accident-news.css)
 * ################################################################ */
/* ===== 중대재해속보 (web/accident-news/accident-news.jsp) ===== */
.page-accident-news #grid_wrapper,
.page-accident-news #grid {
    width: 100%;
}
/* 제목: 다른 열(JSP 의 열 width)을 뺀 남는 폭을 쓰고 넘치면 ... 으로 줄인다.
   max-width: 0 이 없으면 nowrap 제목 길이만큼 표가 넓어져 DataTables Responsive 가 제목 열을 숨기고 행마다 + 버튼을 붙인다 */
.page-accident-news tr td:nth-child(5) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
}
.page-accident-news .dropzone.dz-clickable {
    height: 100%;
}
.page-accident-news .btn-img-delete {
    top: 30px;
    right: 20px;
}

/* ################################################################
 * bbs (원래 css/web/page/bbs.css)
 * ################################################################ */
/* ===== 게시판 관리 (web/bbs/bbsAdmin.jsp) ===== */
/* 게시판 구역 카드 — 웹 공통 카드(card)에 높이만 맞춘다 */
.page-bbs-admin .manage_board .card { min-height: 300px; }
/* 기존 전역 규칙이 여기까지 적용되고 있었다 — 유지 (게시판 추가/수정 모달 제목)
   이 CSS 는 게시판의 다른 화면도 로드할 수 있으므로 게시판 관리 화면에서만 걸리게 한다. */
body:has(.page-bbs-admin) #popModal .card-title { width: 100% }
.page-bbs-admin .card-header a:not(.btn) { color: var(--color-text-default) !important; opacity: 1 }
.page-bbs-admin .manage_board { width: 33.3% }
.page-bbs-admin .container-fluid { padding-left: 10px; padding-right: 10px; }
.page-bbs-admin .dataTables_wrapper .row { width: auto; }
.page-bbs-admin .table.dataTable tbody th,
.page-bbs-admin table.dataTable tbody td {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* ################################################################
 * bcn (원래 css/web/page/bcn.css)
 * ################################################################ */
/*
 * 비콘
 * 아래 화면의 JSP <style> 에 똑같이 복사돼 있던 규칙을 모았다(git show 4d736e036:docs/CLEAN_CSS.md Phase 3).
 * pages.css 로 합치면서 실던 화면의 루트 클래스로 :where(body:has(...)) 범위를 걸었다(우선순위·적용 범위는 그대로).
 * web/bcn/list.jsp, web/gps/bcn-alert-list.jsp
 */

:where(body:has(.page-bcn-list, .page-gps-bcn-alert-list)) th,
:where(body:has(.page-bcn-list, .page-gps-bcn-alert-list)) td {
    white-space: nowrap;
}
:where(body:has(.page-bcn-list, .page-gps-bcn-alert-list)) .input-group .input-group-prepend>.input-group-text {
    width: 120px;
}

/* ################################################################
 * const-equip (원래 css/web/page/const-equip.css)
 * ################################################################ */
/*
 * 건설장비 (회사·마스터 설정)
 * 아래 화면의 JSP \3c style> 에 똑같이 복사돼 있던 규칙을 모았다(git show 4d736e036:docs/CLEAN_CSS.md Phase 3).
 * pages.css 로 합치면서 실던 화면의 루트 클래스로 :where(body:has(...)) 범위를 걸었다(우선순위·적용 범위는 그대로).
 * web/const-equip/company.jsp, web/const-equip/master.jsp
 */

:where(body:has(.page-const-equip-company, .page-const-equip-master)) #check-image-wrap.empty {
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}
:where(body:has(.page-const-equip-company, .page-const-equip-master)) .use-toggle {
    font-size: 20px;
    cursor: pointer;
    vertical-align: middle;
}
:where(body:has(.page-const-equip-company, .page-const-equip-master)) .use-toggle.on {
    color: #28a745;
}
:where(body:has(.page-const-equip-company, .page-const-equip-master)) .use-toggle.off {
    color: #adb5bd;
}

/* ################################################################
 * daily (원래 css/web/page/daily.css)
 * ################################################################ */
/* ===== 상시 위험성평가 목록 (web/cont-eval/list.jsp) — 전용 스타일 없음. 루트 클래스 page-cont-eval-list ===== */

/* ===== 상시 위험성평가 작성·상세 (web/cont-eval/form.jsp) · 위험성평가표 작성 (web/cont-eval/item.jsp) ===== */
.page-cont-eval-form .card-body h6,
.page-cont-eval-item .card-body h6 { margin: 12px 0 6px 0; }
/* 주간 상세(web/cont-eval-weekly/form.jsp)·위험성평가표(item.jsp) — 표 안 최종등급 의견·조치예정일·조치담당자 칸 */
.page-cont-eval-form input.final-opnn,
.page-cont-eval-item input.final-opnn { min-width: 140px; }
.page-cont-eval-form .meas-period,
.page-cont-eval-item .meas-period { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; white-space: nowrap; }
.page-cont-eval-form .meas-period .form-control,
.page-cont-eval-item .meas-period .form-control { flex: 0 0 130px; width: 130px; }
.page-cont-eval-form input.meas-user-nm,
.page-cont-eval-item input.meas-user-nm { min-width: 110px; }
/* 평가 화면(web/cont-eval/item-aprv.jsp) — 표 안 최종등급·의견 칸 */
.page-cont-eval-item-aprv #table-eval td { vertical-align: middle; }
.page-cont-eval-item-aprv #table-eval textarea.final-opnn { height: 60px; resize: vertical; }
/* 칸이 많아 좁은 화면에서 글자 칸이 찌그러지지 않게 최소 폭을 둔다 — 모자라면 표가 가로로 스크롤된다.
   theme.css 의 `.dataTables_wrapper .row > div { display: flex }` 안에서는 넘친 표가 왼쪽으로 밀려 앞 칸이 잘리고 스크롤도 안 되어 그 칸만 block 으로 둔다 */
.page-cont-eval-item-aprv #table-eval_wrapper .row > div:has(> #table-eval) { display: block; }
.page-cont-eval-item-aprv #table-eval .col-clas { min-width: 70px; }
.page-cont-eval-item-aprv #table-eval .col-risk { min-width: 150px; }
.page-cont-eval-item-aprv #table-eval textarea.final-opnn { min-width: 140px; }
/* 조치예정일 시작 ~ 종료 — 한 줄에 둔다(칸이 좁아도 줄바꿈하지 않는다) */
.page-cont-eval-item-aprv #table-eval .meas-period { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; white-space: nowrap; }
.page-cont-eval-item-aprv #table-eval .meas-period .form-control { flex: 0 0 115px; width: 115px; }
/* 머리글의 「일괄적용」 — 칸이 좁으면 버튼을 글자 아래로 내린다 */
.page-cont-eval-item-aprv #table-eval th { vertical-align: middle; }
.page-cont-eval-item-aprv .th-apply { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; }
.page-cont-eval-item-aprv .th-apply .btn { margin: 0; padding: 2px 8px; font-size: 13px; white-space: nowrap; }
.page-cont-eval-form textarea.form-control { height: auto; resize: vertical; }
.page-cont-eval-form .period-sep,
.page-cont-eval-check-target .period-sep { margin: 5px; }
/* 결재선 — 월간(cont-eval)은 공통 결재선 부품(common.css .approval-line)으로 옮겼다(사용자 요청 2026-11-03).
   아래는 화면 안에서 고치는 주간 상세(cont-eval-weekly/form — 루트 클래스가 같다)의 세 칸 상자(.div_approval)에만 걸린다 */
.page-cont-eval-form .div_approval .aprv-sign { font-size: 16px; padding-left: 10px; }
.page-cont-eval-form .approval-roles:has(.div_approval) .input-group-prepend > .input-group-text { width: 60px; }
.page-cont-eval-form .approval-roles .div_approval { flex-wrap: nowrap; gap: 8px; padding: 10px; min-height: 98px; } /* 빈 칸(읽기 전용)도 상자 높이에 맞춘다 */
.page-cont-eval-form .approval-roles .div_approval .div-apprline { position: relative; flex: 1 1 0; min-width: 0; width: auto; max-width: 180px; margin-right: 0; word-break: break-all; }
.page-cont-eval-form .approval-roles .div_approval .add-apprline { flex: 0 0 72px; width: 72px; margin-right: 0; }
.page-cont-eval-form .approval-roles .div_approval .del-aprv { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0; line-height: 18px; font-size: 10px; }
.page-cont-eval-form .approval-roles .div_approval .div-apprline:has(.del-aprv) { padding-right: 22px; }
.page-cont-eval-form .editor-table th { text-align: center; }
.page-cont-eval-form .editor-table td { vertical-align: middle; }
/* 예정공정현황·전회차 Feedback 두 칸은 반반 */
.page-cont-eval-form .editor-table:not(.hazard-table) td { width: 50%; }
.page-cont-eval-form .hazard-table tbody th { font-size: 12px; font-weight: 500; color: var(--color-text-default); }
/* 구분·담당자·처리기간은 좁게 두고 위험요인·안전대책 에디터를 넓힌다(사용자 요청 2026-11-05) */
.page-cont-eval-form .hazard-table .col-div { width: 90px; text-align: center; vertical-align: middle; }
.page-cont-eval-form .hazard-table .col-charge { width: 110px; }
.page-cont-eval-form .hazard-table .col-period { width: 130px; }

/* ===== 상시 위험성평가 평가항목 추가·수정 모달 (web/cont-eval/item-form-modal.jsp — 호스트: cont-eval/form) — 최초/정기 평가항목 모달(init-eval/item-modal)과 같은 1000px·라벨 120px =====
   위험요인·안전대책 칸 높이도 최초/정기와 같은 80px(form-control 의 고정 높이를 덮는다) */
.page-cont-eval-item-form-modal textarea.form-control { height: 80px; resize: vertical; }

/* ===== 상시 위험성평가 평가항목 상세 입력 모달 (web/cont-eval/multi-item-detail-modal.jsp — 호스트: cont-eval/item) — 수시 「위험성평가 항목 상세 입력」과 같은 표 ===== */
.page-cont-eval-multi-item-modal .cmi-scroll { max-height: 60vh; overflow-y: auto; }
.page-cont-eval-multi-item-modal td { vertical-align: middle; }
.page-cont-eval-multi-item-modal textarea.form-control { height: 64px; resize: vertical; }
.page-cont-eval-multi-item-modal th { vertical-align: middle; }


/* ===== 일일 위험성평가 작성 (web/daily/dailyEvalForm.jsp) ===== */
/* 항목 번호 — 상세 입력(input-group v2) 라벨과 같은 칸 모양 */
.page-daily-eval-form .num {
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    border: 1px solid var(--color-border-field-input);
    border-radius: 5px 0 0 0;
    background: var(--color-bg-field-input-label);
    color: var(--color-text-field-label);
    align-content: center;
    height: 45px;
}
.page-daily-eval-form .itemGradeResult {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(-50%);
    z-index: 10;
}
/* 빈도·강도·등급 라벨: 이름 아래 줄에 점수 범위·계산식을 보인다.
   input-group-text 는 flex 라 <br> 이 먹지 않으므로 세로로 쌓는다 */
.page-daily-eval-form .opt-freq-method .input-group-text {
    flex-direction: column;
    justify-content: center;
}

/* ===== 일일 위험성평가 목록 — 달력 (web/daily-eval/list.jsp, FullCalendar 5) =====
   웹 표 공통 디자인(흰 머리글·기본 테두리색 선·회색 hover)을 달력에 맞춘다.
   바깥 선·요일 머리줄 아래 선은 표 기본색, 날짜 칸 사이 선은 한 단계 옅게 둔다(칸이 넓어 기본색으로 다 그으면 격자가 무겁다).
   일정 막대 색은 상태색이다 — 서버가 상태 클래스(eval-stts-*, DailyEvalResponse.ForCalendar#getClassNames)만 준다.
   웹 상태 뱃지(badge-grey · badge-yellow · badge-blue)와 같은 진한 바탕. 모바일은 css/mobile/page/daily-eval.css(연한 바탕) */
.page-daily-eval-list .fc {
    --fc-border-color: var(--color-border-softer);
    --fc-today-bg-color: var(--color-bg-calendar-today);
    --fc-page-bg-color: var(--color-bg-white);
    --fc-button-text-color: var(--color-text-softer);
    --fc-button-bg-color: var(--color-bg-white);
    --fc-button-border-color: var(--color-border-default);
    --fc-button-hover-bg-color: var(--color-bg-field-input-label);
    --fc-button-hover-border-color: var(--color-border-default);
    --fc-button-active-bg-color: var(--color-bg-field-input-label);
    --fc-button-active-border-color: var(--color-border-default);
    font-size: 13px;
}
/* 바깥 선 */
.page-daily-eval-list .fc .fc-scrollgrid { border-color: var(--color-border-default); }
/* 머리줄 — 표 머리글과 같은 글꼴, 아래 선은 표 기본색 */
.page-daily-eval-list .fc .fc-toolbar-title { font-size: 16px; font-weight: 700; color: var(--color-text-strong); }
.page-daily-eval-list .fc .fc-button { padding: 5px 10px; font-size: 13px; }
.page-daily-eval-list .fc .fc-button .fc-icon { font-size: 1.2em; }
.page-daily-eval-list .fc .fc-col-header-cell { background-color: var(--color-bg-white); border-bottom-color: var(--color-border-default); }
.page-daily-eval-list .fc .fc-col-header-cell-cushion {
    padding: 7px 4px;
    color: var(--color-text-default);
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 500;
}
/* 날짜 칸 — 누르면 그날 작성 화면으로 간다(dateClick). 표 행처럼 hover 를 준다 */
.page-daily-eval-list .fc .fc-daygrid-day { cursor: pointer; transition: background-color 0.1s; }
.page-daily-eval-list .fc .fc-daygrid-day:hover { background-color: var(--color-bg-row-hover); }
.page-daily-eval-list .fc .fc-daygrid-day-number { padding: 4px 6px; color: var(--color-text-default); }
/* 일요일·토요일 */
.page-daily-eval-list .fc .fc-day-sun .fc-col-header-cell-cushion,
.page-daily-eval-list .fc .fc-day-sun .fc-daygrid-day-number { color: var(--color-text-calendar-sunday); }
.page-daily-eval-list .fc .fc-day-sat .fc-col-header-cell-cushion,
.page-daily-eval-list .fc .fc-day-sat .fc-daygrid-day-number { color: var(--color-text-calendar-saturday); }
/* 오늘 — 날짜 숫자를 굵게 */
.page-daily-eval-list .fc .fc-day-today .fc-daygrid-day-number { font-weight: 700; }
/* 일정 막대 */
.page-daily-eval-list .fc .fc-daygrid-event { margin: 1px 4px; padding: 1px 4px; border-radius: 3px; font-size: 13px; }
/* 상태색 — 작성중·초기 회색, 결재중 노랑, 결재완료·마감 파랑(마감이 결재가 모두 끝난 상태다. 결재완료는 옛 데이터) */
.page-daily-eval-list .fc .fc-daygrid-event { border: 0; background-color: var(--color-status-na); color: var(--color-text-inverse); }
.page-daily-eval-list .fc .fc-daygrid-event.eval-stts-on_approve { background-color: var(--color-status-pending); color: var(--color-text-default); }
.page-daily-eval-list .fc .fc-daygrid-event:is(.eval-stts-approval_complete, .eval-stts-closed) { background-color: var(--color-status-complete); }
.page-daily-eval-list .fc .fc-daygrid-event .fc-event-main { color: inherit; }
/* 범례 — 달력 아래 오른쪽 */
.page-daily-eval-list .cal-legend { display: flex; justify-content: flex-end; gap: 14px; margin-top: 8px; font-size: 13px; color: var(--color-text-softer); }
.page-daily-eval-list .cal-legend-dot { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; background: var(--color-status-na); }
.page-daily-eval-list .cal-legend-dot.is-pending { background: var(--color-status-pending); }
.page-daily-eval-list .cal-legend-dot.is-complete { background: var(--color-status-complete); }

/* ===== 일일 위험성평가 결재선 (web/daily/dailyEvalLine.jsp) ===== */
.page-daily-eval-line .pointer:hover { text-decoration: underline !important; }
.page-daily-eval-line .div-apprline,
.page-daily-eval-line .add-apprline { margin: 6px; }

/* ===== 표준위험공종 선택 모달 (web/daily/work-class-search-multi-modal.jsp) ===== */
.wcsm .card .card-body { padding: 5px; }
.wcsm .card { margin-bottom: 0; }
.wcsm .dataTables_wrapper div { margin: 0; padding: 0; }

/* ################################################################
 * edu (원래 css/web/page/edu.css)
 * ################################################################ */
/* ===== 안전교육 목록 (web/edu/eduList.jsp) ===== */
/* 기존 전역 규칙이 본문 밖(내비게이션·모달·알림창)까지 적용되고 있었다 — 유지 */
body:has(.page-edu-list) .btn {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.page-edu-list #eduCntsDetail {
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    max-height: 250px;
    overflow-y: auto;
}
.page-edu-list .edu-attach-img {
    width: 250px;
    height: 170px;
    object-fit: cover;
    padding: 7px;
    cursor: pointer;
}

/* ===== 안전교육 작성 (web/edu/eduForm.jsp) ===== */
.page-edu-form .table tbody.info_attach tr td {
    padding: 4px;
    background-color: transparent;
}
.page-edu-form .table tbody.info_attach tr td a {
    color: var(--color-text-strongest);
    opacity: 1;
}
/* 기존 전역 규칙이 모달(참석자·첨부·하위구분)까지 적용되고 있었다 — 유지. :where() 는 원래 우선순위를 지키려는 것이다.
   첨부·하위구분 모달은 열릴 때 dropzone.css 를 한 번 더 로드해서, 모달이 떠 있는 동안에는 dropzone.css 와 겹치는 속성
   (padding, 미리보기 크기, 삭제 버튼 크기·위치·색)이 뒤 화면까지 dropzone.css 값으로 돌아갔다.
   모달의 중복 <link> 를 지우면서 그 동작을 :not(:has(모달 루트)) 로 유지한다. */
:where(body:has(.page-edu-form)) .dropzone {
    height: 100%;
}
:where(body:has(.page-edu-form):not(:has(.page-edu-attach-modal, .page-edu-info-sub-modal))) .dropzone {
    padding: 0;
}
:where(body:has(.page-edu-form):not(:has(.page-edu-attach-modal, .page-edu-info-sub-modal))) .dropzone .dz-preview .dz-image {
    width: 90px;
    height: 90px;
}
:where(body:has(.page-edu-form)) .dropzone .dz-preview .dz-remove {
    text-shadow: -1px 0 var(--color-shadow-light), 0 1px var(--color-shadow-light), 1px 0 var(--color-shadow-light), 0 -1px var(--color-shadow-light) !important;
}
:where(body:has(.page-edu-form):not(:has(.page-edu-attach-modal, .page-edu-info-sub-modal))) .dropzone .dz-preview .dz-remove {
    font-size: 21px;
    right: 10px;
    top: 2px;
    color: #e51616;
}
:where(body:has(.page-edu-form)) .dz-image i {
    display: inline-block;
    font-size: 70px !important;
    vertical-align: middle;
    width: 92px;
    margin: 20px 20px 8px -5px;
    text-align: right;
}
.page-edu-form #divCnts {
    width: 100%; /* 또는 고정 px */
    overflow-wrap: break-word;  /* 단어 단위로 줄바꿈 허용 */
    word-break: break-word;     /* 너무 긴 단어도 강제로 줄바꿈 */
    white-space: normal;        /* 줄바꿈 허용 */
}

/* ===== 교육참석자 모달 (web/edu/popEduAttend.jsp — 호스트: eduForm) ===== */
.page-edu-attend-modal .select-btn {
    position: fixed;
}

/* ===== 하위구분 선택 모달 (web/edu/popEduInfoSub.jsp — 호스트: eduForm) ===== */
.page-edu-info-sub-modal #preview table {
    font-size: 13px;
}
/* 기존 전역 규칙이 모달 뒤 화면(eduForm)의 DataTables 검색창까지 숨기고 있었다 — 유지 */
body:has(.page-edu-info-sub-modal) .dataTables_filter {
    display: none;
}

/* ===== 안전교육설정 (web/edu/eduInfoList.jsp) ===== */
/* 기존 전역 규칙이 모달(#popModal)까지 적용되고 있었다 — 유지 */
body:has(.page-edu-info-list) .dataTables_filter {
    display: none;
}

/* ===== 안전교육 양식관리(마스터) (web/edu/eduInfoMst.jsp) ===== */
/* 기존 전역 규칙이 모달(#popModal)까지 적용되고 있었다 — 유지 */
body:has(.page-edu-info-mst) .dataTables_filter {
    display: none;
}

/* ################################################################
 * error (원래 css/web/page/error.css)
 * ################################################################ */
/* ===== 오류 안내 (web/error/not-found.jsp) ===== */
.page-error-not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 0 24px;
    text-align: center;
}
.page-error-not-found .error-code {
    font-size: 96px;
    font-weight: 700;
    color: var(--color-text-brand);
    line-height: 1;
}
.page-error-not-found .error-message {
    margin-top: 20px;
    font-size: 20px;
    color: var(--color-text-default);
    word-break: keep-all;
}
.page-error-not-found .error-desc {
    margin-top: 10px;
    font-size: 14px;
    color: var(--color-text-muted);
    word-break: keep-all;
}
.page-error-not-found .error-actions {
    margin-top: 36px;
}

/* ################################################################
 * eval (원래 css/web/page/eval.css)
 * ################################################################ */
/* ===== 수시 위험성평가 목록 (web/eval/evalList.jsp) — 전용 스타일 없음. 루트 클래스 page-eval-list ===== */

/* ===== 기타사항입력 모달 (web/eval/popEvalCnts.jsp) — 호스트: evalList ===== */
.page-eval-cnts-modal .textarea-form-control { height: auto; }

/* ===== 평가항목 수정(관리자) 모달 (web/eval/item-meas-form-modal.jsp) — 호스트: evalList ===== */
.page-eval-item-meas-form-modal .im-score-card { border: 1px solid #e3e6ea; border-radius: 8px; background: #f8f9fb; padding: 14px 16px; }
.page-eval-item-meas-form-modal .im-score-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.page-eval-item-meas-form-modal .im-score-heading { font-weight: 700; color: #343a40; }
.page-eval-item-meas-form-modal .im-grade-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: #6c757d; }
.page-eval-item-meas-form-modal .im-score-body { display: flex; align-items: stretch; gap: 8px; }
.page-eval-item-meas-form-modal .im-score-box { flex: 1; min-width: 0; background: var(--color-bg-white); border: 1px solid #e3e6ea; border-radius: 8px; padding: 10px 8px; text-align: center; }
.page-eval-item-meas-form-modal .im-score-title { font-size: 13px; font-weight: 600; color: #495057; }
.page-eval-item-meas-form-modal .im-score-range { font-size: 13px; color: #8a939c; margin-bottom: 6px; }
.page-eval-item-meas-form-modal .im-score-input { height: 44px; font-size: 20px; font-weight: 600; text-align: center; }
.page-eval-item-meas-form-modal .im-score-value { height: 44px; line-height: 44px; font-size: 24px; font-weight: 700; color: #212529; }
.page-eval-item-meas-form-modal .im-score-value .badge { font-size: 14px; vertical-align: middle; }
.page-eval-item-meas-form-modal .im-score-result { background: #eef3fb; border-color: #d6e2f3; }
.page-eval-item-meas-form-modal .im-score-op { display: flex; align-items: center; font-size: 22px; font-weight: 700; color: #8a939c; }

/* ===== 공종별 위험요인 선택 모달 (web/eval/multi-work-class-item-modal.jsp + multi-work-class-item/*-panel.jsp) — 호스트: eval/item, tbm/form(load-eval-modal) =====
   표준 모달(머리 · 본문 · 아래 버튼 줄). 왼쪽 공종 트리, 오른쪽 항목 표.
   표 높이는 화면 높이로 잡는다(표준 30vh · 사고사례·추가 14vh · 사전 정의 56vh, 스크립트의 scrollY). 그래도 넘치면 본문이 스크롤한다 */
.page-eval-multi-work-class-item > .card-body { max-height: calc(100vh - 190px); overflow-y: auto; padding-top: 4px; }
.page-eval-multi-work-class-item .wci-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; margin-bottom: 6px; }
.page-eval-multi-work-class-item .wci-section-head h6 { margin: 0; font-size: 14px; font-weight: 700; color: var(--color-text-strong); }
.page-eval-multi-work-class-item .wci-section-head .btn { margin: 0; }
.page-eval-multi-work-class-item .wci-section-head .search-box > .form-control { width: 240px; }
.page-eval-multi-work-class-item .wci-section { margin-top: 16px; }
/* 표준 / 추가 위험요인 표 높이 바꾸기 화살표 — 두 표 사이 가운데 */
.page-eval-multi-work-class-item .wci-area-toggle { display: flex; justify-content: center; margin-top: 6px; }
.page-eval-multi-work-class-item .wci-area-toggle .btn { margin: 0; padding: 2px 28px; line-height: 1; }
/* 공종 트리 — 검색칸은 칸 폭을 채우고, 트리는 오른쪽 표 영역과 비슷한 높이에서 스크롤한다 */
.page-eval-multi-work-class-item .wci-tree-col .search-box { flex: 1 1 auto; min-width: 0; }
.page-eval-multi-work-class-item .wci-tree-col .search-box > .form-control { width: 100%; }
.page-eval-multi-work-class-item .wci-tree-box { height: calc(100vh - 300px); min-height: 320px; overflow-y: auto; }

/* ===== 표준공종 상세 입력 모달 (web/eval/multi-work-class-item-detail-modal.jsp) — 호스트: eval/item ===== */
/* 항목 표는 이 높이 안에서 스크롤하고 머리글은 위에 붙는다(table-sticky-head) */
.page-eval-multi-work-class-item .wci-detail-scroll { max-height: calc(100vh - 220px); overflow-y: auto; }
/* 머리글 칸: 제목은 왼쪽, 일괄적용 버튼은 칸 오른쪽 끝에 붙인다. 칸이 좁으면 버튼이 아래 줄로 내려간다 */
.page-eval-multi-work-class-item .wci-detail-table th { vertical-align: middle; }
.page-eval-multi-work-class-item .wci-detail-table th:has(.wci-th-action) { min-width: 155px; }
.page-eval-multi-work-class-item .wci-th-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
/* margin: theme.css 의 `.table thead tr th .btn { margin: -20px 0 }` 를 지운다(머리글에 큰 버튼을 맞추려던 규칙) */
.page-eval-multi-work-class-item .wci-th-action .btn { margin: 0; padding: 2px 8px; font-size: 13px; white-space: nowrap; }

/* ===== 결재라인지정 (web/eval/evalApprovalLine.jsp) ===== */
.page-eval-approval-line .pointer:hover { text-decoration: underline !important; }
.page-eval-approval-line .div-apprline,
.page-eval-approval-line .add-apprline { margin: 6px; }

/* ===== 수시 위험성평가 작성/상세 (web/eval/evalDetailForm.jsp) ===== */
.page-eval-detail-form table.dataTable {
    margin-top: 0px !important;     /* datatables.css 의 !important 와 맞서야 한다 */
    margin-bottom: 0px !important;
    border-top: 0px !important;
}
.page-eval-detail-form .table {
    margin-top: 0px;
    margin-bottom: 0px;
}
.page-eval-detail-form .textarea-form-control { height: auto; }
.page-eval-detail-form #evalOpnn:focus { background-color: var(--color-bg-white) !important; }
.page-eval-detail-form .tb-worker-opnn td { vertical-align: middle; }

/* ===== 수시 위험성평가 항목 작성 (web/eval/evalItem.jsp) ===== */
/* 평가항목 표 위 줄 — 왼쪽 안내문구, 오른쪽 항목 추가 버튼들 */
.page-eval-item .eval-item-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 8px; }
.page-eval-item .eval-item-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.page-eval-item .eval-item-actions .btn { margin: 0; }

/* ===== 평가 승인 (web/eval/evalItemAprv.jsp, evalItemAprvFreqImprtSingle.jsp 공통) ===== */
/* 결재자 줄은 공통 결재선 부품(common.css 「결재선 공통 부품」). 내 상자만 빨간 테두리 */
.page-eval-item-aprv .border-red-aprv,
.page-eval-item-aprv-freq .border-red-aprv {
    border: 1.5px red solid;
    background-color: #daeffd;
}

.page-eval-item-aprv .td-middle,
.page-eval-item-aprv-freq .td-middle {
    vertical-align: middle;
}

.page-eval-item-aprv td > hr,
.page-eval-item-aprv-freq td > hr {
    margin: 15px 0;
}

/* ===== 안전책임자 지정 (web/eval/chkUserList.jsp) ===== */
/* :where() — 범위를 걸면 우선순위가 올라가 margin 이 기존 값(1px)과 달라져서, 원래 우선순위를 유지한다 */
:where(.page-eval-chk-user-list) .form-check-input {
    height: 25px;
    width: 20px;
    position: inherit;
    margin: 0;
}

.page-eval-chk-user-list .table tbody tr td {
    padding: 5px;
}

.page-eval-chk-user-list .table thead th {
    max-width: 40px;
}
/* 오늘·이후 일자 머리 — 누르면 점검항목별 안전책임자 지정 모달이 열린다. 아이콘은 세이프디 파랑 */
.page-eval-chk-user-list .table thead th:has(.fa-calendar-check) { cursor: pointer; }
.page-eval-chk-user-list .table thead th .fa-calendar-check {
    margin-top: 4px;
    font-size: 15px;
    color: var(--color-text-field-active);
}

.page-eval-chk-user-list .highlighted {
    background-color: #daeffd !important;
}

.page-eval-chk-user-list .td-disabled {
    background-color: var(--color-bg-subtle) !important;
}

.page-eval-chk-user-list .float-btn {
    position: absolute;
    left: 550px;
    top: 500px;
    z-index: -9999;
}

.page-eval-chk-user-list .flaot-show {
    z-index: 999;
}

/* ===== 책임자 지정 항목 모달 (web/eval/popCheckUserMap.jsp) — 호스트: chkUserList ===== */
/* 모달 크기 조절 핸들 (.resizer 요소는 .div-item 밖에 있어서 루트 클래스를 같이 붙였다) */
.page-eval-chk-user-map-modal.resizer {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    z-index: 9999;
}

.page-eval-chk-user-map-modal.resizer.nw { top: -1px; left: -1px; cursor: nw-resize; }
.page-eval-chk-user-map-modal.resizer.ne { top: -1px; right: -1px; cursor: ne-resize; }
.page-eval-chk-user-map-modal.resizer.sw { bottom: -1px; left: -1px; cursor: sw-resize; }
.page-eval-chk-user-map-modal.resizer.se { bottom: -1px; right: -1px; cursor: se-resize; }

.page-eval-chk-user-map-modal #chkGrid {
    max-height: 80vh;
    overflow: auto;
    table-layout: fixed;
    width: 1125px;
}

.page-eval-chk-user-map-modal .sticky-col {
    position: sticky;
    background: var(--color-bg-white);     /* 배경색 지정 (없으면 뒤 컬럼이 비칠 수 있음) */
    z-index: 2;           /* 헤더와 겹칠 때 우선 표시 */
}

/* 기존 전역 규칙이 여기까지 적용되고 있었다 — 유지 (chkUserList 의 `.table tbody tr td`, `.table thead th` 규칙이 모달 표에도 걸렸다) */
.page-eval-chk-user-map-modal .table tbody tr td {
    padding: 5px;
}

.page-eval-chk-user-map-modal .table thead th {
    max-width: 40px;
}

/* ################################################################
 * fault (원래 css/web/page/fault.css)
 * ################################################################ */
/* ===== 부적합보고서 목록 (web/fault/mainFaultList.jsp) ===== */
/* 기존 전역 규칙이 여기까지 적용되고 있었다 — 유지 (본문 밖 모달·내비게이션의 tr td:nth-child(6) 포함) */
body:has(.page-fault-main-fault-list) tr td:nth-child(6) {
    white-space: normal !important;
    word-wrap: break-word;
    width: 20%;
}
/* 메인 그리드가 카드 영역 전체 폭을 채우도록 강제(이 페이지 한정) */
.page-fault-main-fault-list #grid {
    width: 100% !important;
}

/* ===== 부적합보고서 모달 (web/fault/popMainFaultActForm.jsp, popMainFaultToSubRisk.jsp) ===== */
/* 기존 전역 규칙이 모달이 열린 동안 뒤 화면의 .input-group-text(예: #modal-verify)까지 적용되고 있었다 — 유지 */
body:has(.page-fault-main-fault-act-form) .input-group-text,
body:has(.page-fault-sub-risk-form) .input-group-text {
    min-width: 120px;
}

/* ################################################################
 * heatwave (원래 css/web/page/heatwave.css)
 * ################################################################ */
/* ===== 폭염/한파주의 목록 (web/heatwave/heatwave-alert-list.jsp) ===== */
.page-heatwave-alert-list .badge { padding: 3px; font-size: 11px; border: 0 none; cursor: default; }
.page-heatwave-alert-list .badge-yellow { color: var(--color-text-default) !important; background-color: var(--color-status-pending) !important; }
.page-heatwave-alert-list .badge-red    { color: var(--color-text-inverse) !important; background-color: var(--color-status-danger) !important; }
.page-heatwave-alert-list .badge-green  { color: var(--color-text-inverse); background-color: var(--color-status-good); }
.page-heatwave-alert-list .badge-orange { color: var(--color-text-inverse) !important; background-color: var(--color-status-insufficient) !important; }
.page-heatwave-alert-list table.table-bordered.dataTable thead tr th,
.page-heatwave-alert-list table.table-bordered.dataTable th,
.page-heatwave-alert-list table.table-bordered.dataTable td { border: 1px solid var(--color-border-default); vertical-align: middle; }
.page-heatwave-alert-list #detail-area .info-list dt { font-weight: 600; }

/* ===== 폭염/한파주의 작성 · 템플릿 공통 (heatwave-alert-form.jsp, heatwave-alert-template.jsp) ===== */
.page-heatwave-alert-form .table td,
.page-heatwave-alert-form .table tr,
.page-heatwave-alert-form .table th,
.page-heatwave-alert-form .table thead tr th[class*=sorting_],
.page-heatwave-alert-form .table tbody tr td,
.page-heatwave-alert-template .table td,
.page-heatwave-alert-template .table tr,
.page-heatwave-alert-template .table th,
.page-heatwave-alert-template .table thead tr th[class*=sorting_],
.page-heatwave-alert-template .table tbody tr td {
    border-bottom: 1px solid var(--color-border-default) !important;
    border-top: 1px solid var(--color-border-default) !important;
    border-left: 1px solid var(--color-border-default) !important;
    border-right: 1px solid var(--color-border-default) !important;
}
.page-heatwave-alert-form .card_body h6,
.page-heatwave-alert-template .card_body h6 {
    align-content: center !important;
    margin: 0 !important;
}

/* ===== 폭염/한파주의 작성 (web/heatwave/heatwave-alert-form.jsp) — 기상이력 표는 등록 모달과 공용 ===== */
/* 협력업체 목록 테이블이 카드 폭(100%)을 채우도록 강제 */
.page-heatwave-alert-form #table-partner,
.page-heatwave-alert-form #table-partner_wrapper {
    width: 100%;
}
.page-heatwave-alert-form .weather-history-wrapper,
.page-heatwave-alert-form-modal .weather-history-wrapper {
    height: 100%;
    width: 100%;
    overflow-x: auto;   /* 가로 스크롤 */
    overflow-y: hidden; /* 세로 스크롤 안 생기게 */
}
.page-heatwave-alert-form #weatherHistory,
.page-heatwave-alert-form-modal #f_weatherHistory {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 칸 너비 균등 분배 */
    font-size: 13px;
    min-width: max-content;
}
.page-heatwave-alert-form #weatherHistory th,
.page-heatwave-alert-form #weatherHistory td,
.page-heatwave-alert-form-modal #f_weatherHistory th,
.page-heatwave-alert-form-modal #f_weatherHistory td {
    border: 1px solid var(--color-border-default);
    padding: 6px 4px;
    text-align: center;
}
.page-heatwave-alert-form #weatherHistory th,
.page-heatwave-alert-form-modal #f_weatherHistory th {
    background-color: var(--color-bg-subtle); /* 연한 회색 */
    font-weight: bold;
}
.page-heatwave-alert-form #weatherHistory th:first-child,
.page-heatwave-alert-form-modal #f_weatherHistory th:first-child {
    width: 80px; /* 왼쪽 지표명 칸 고정 */
}

/* ===== 폭염/한파주의 템플릿 (web/heatwave/heatwave-alert-template.jsp) ===== */
.page-heatwave-alert-template #grid,
.page-heatwave-alert-template #grid_wrapper {
    width: 100%;
}

/* ===== 폭염/한파주의 예방조치 등록 모달 (web/heatwave/heatwave-alert-form-modal.jsp) ===== */
/* 호스트(heatwave-alert-list.jsp, heatwave-alert-form.jsp)가 모두 이 CSS 를 로드한다 */
/* 온도단계별 조치사항 표 — 모양은 웹 표 표준(table-bordered), 칸 세로 가운데만 */
.page-heatwave-alert-form-modal #f_level_table td {
    vertical-align: middle;
}
/* 사진 칸 모양은 공통 .photo-slot-group 이 맡는다. dropzone 이 사진 상자 높이를 채우는 것만 둔다 */
.page-heatwave-alert-form-modal .dropzone.dz-clickable {
    height: 100%;
}
.page-heatwave-alert-form-modal .act-content {
    padding: 0.30rem 0.65rem;
    min-height: 30px;
    height: 30px;
}

/* 기존 전역 규칙이 여기까지 적용되고 있었다 — 유지 */
/* 조치 사진 삭제 버튼은 사진 위 제목 줄(.attach-group-text, 25px) 아래에 둔다.
   예전에는 작성 화면에서 열 때만 이 값이었고 목록 화면에서 열면 theme 기본값(10px/10px)이라 제목 줄에 걸렸다(2026-10-17 통일) */
.page-heatwave-alert-form-modal .btn-img-delete {
    top: 30px;
    right: 20px;
}

/* ################################################################
 * initeval (원래 css/web/page/initeval.css)
 * ################################################################ */
/* ===== 최초/정기 위험성평가 작성 (web/initeval/initEvalForm.jsp) ===== */
.page-initeval-form .card-body h6 {
    margin: 12px 0 6px 0
}
.page-initeval-form .textarea-form-control {
    height: 80px;
}

/* ===== 평가항목 팝업 (web/initeval/popInitEvalItem.jsp, initEvalForm 의 Modal 로 로드) ===== */
/* 팝업 안의 i.required 는 css/common.css 의 i.required 와 값이 같아 규칙을 지웠다.
   기존 전역 규칙이 여기까지 적용되고 있었다 — 유지: 항목 팝업을 연 뒤에는 본문의 엑셀파일 input.required 에도 적용됐다 */
body:has(.page-initeval-item) .page-initeval-form input.required {
    color: red;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 6px;
}

/* ===== 표준위험공종 선택 모달 (web/initeval/work-class-search-multi-modal.jsp) ===== */
.wcsm .card .card-body { padding: 5px; }
.wcsm .card { margin-bottom: 0; }
.wcsm .dataTables_wrapper div { margin: 0; padding: 0; }

/* ===== 최초/정기 위험성평가 작성·목록 — 표 아래 페이지 버튼을 가운데에 (web/init-eval/form.jsp · list.jsp) =====
   DataTables Bootstrap 배치는 아래 줄을 건수 안내(col-md-5)·페이지 버튼(col-md-7, 오른쪽 정렬)으로 나눈다.
   건수 안내를 쓰지 않아 왼쪽 칸이 비므로, 빈 칸을 숨기고 페이지 칸을 한 줄 전체로 펴서 가운데 둔다 */
:is(.page-initeval-form, .page-initeval-list) .dataTables_wrapper .row > .col-md-5:empty { display: none; }
:is(.page-initeval-form, .page-initeval-list) .dataTables_wrapper .row > div:has(> .dataTables_paginate) { flex: 0 0 100%; max-width: 100%; justify-content: center; } /* 칸이 flex(space-between)라 안쪽도 가운데로 */
:is(.page-initeval-form, .page-initeval-list) .dataTables_wrapper .dataTables_paginate .pagination { justify-content: center; }

/* ################################################################
 * mainmanage (원래 css/web/page/mainmanage.css)
 * ################################################################ */
/* ===== 중점점검활동 (web/main-manage/check-list.jsp) ===== */
/* 안전대책(5번째) 컬럼 말줄임 - 기존 td.text_ellipsis 대체 */
.page-mainmanage-check-list #grid tbody td:nth-child(5) {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 기존 table.transition 대체 */
.page-mainmanage-check-list #grid tbody tr td { transition: background .2s ease-out 0s; }

/* 상세 패널의 자유 입력값은 text() 로 넣는다. 입력값의 줄바꿈이 보이도록 한다 */
.page-mainmanage-check-list .info-list dd#itemCause,
.page-mainmanage-check-list .info-list dd#itemMeas,
.page-mainmanage-check-list .info-list dd#chkOpnn,
.page-mainmanage-check-list .info-list dd#measReqOpnn { white-space: pre-line; }

/* 회차별 출력 드롭다운 위치 — 본문(화면 루트) 안의 드롭다운에만 건다.
   예전에는 원본의 전역 규칙 범위를 지키느라 body:has(...) 로 걸어 헤더의 현장선택 드롭다운까지 밀려 엉뚱한 곳에 떴다(중점점검활동 화면에서만) */
.page-mainmanage-check-list .dropdown-menu.show {
    transform: translate3d(50%, 50%, 0px) !important;
}

/* ===== 중점점검 이력조회 모달 (web/main-manage/check-history-modal.jsp) ===== */
/* 호스트는 check-list.jsp 뿐이다 */
/* 기존 columnDefs 의 va_middle / d-flex flex-wrap 대체 */
.page-mainmanage-check-history-pop #gridH tbody td { vertical-align: middle; }
/* 점검 이력 표 스크롤 높이 */
.page-mainmanage-check-history-pop .table-scroll { max-height: 480px; }
/* 기존 table.transition 대체 */
.page-mainmanage-check-history-pop #gridH tbody tr td { transition: background .2s ease-out 0s; }

/* ################################################################
 * meet (원래 css/web/page/meet.css)
 * ################################################################ */
/* ===== 조회 목록 (web/meet/list.jsp) ===== */
.page-meet-list table {
    table-layout: fixed;
}

.page-meet-list .overFlow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ################################################################
 * menu (원래 css/web/page/menu.css)
 * ################################################################ */
/*
 * 메뉴 설정
 * 아래 화면의 JSP \3c style> 에 똑같이 복사돼 있던 규칙을 모았다(git show 4d736e036:docs/CLEAN_CSS.md Phase 3).
 * 범위는 화면 루트 클래스 .page-menu 로 건다.
 * web/menu/company-menu-setting.jsp, web/menu/menu-master.jsp, web/menu/company-widget-setting.jsp
 */

/* ===== 메뉴관리 화면 공통 (page-content-wrapper.page-menu) =====
   카드 제목·탭·체크박스 묶음·검색창·표 스크롤은 common.css 공통 규칙(.card-header h6, .check-group, .search-box, .table-scroll)을 쓴다 */
/* 목록 스크롤 상자 높이(여백은 common.css 의 .card > .card-body.table-scroll) */
.page-menu .menu-scroll-box,
.page-menu .widget-scroll-box {
    flex: 0 1 auto;
}
.page-menu .menu-scroll-box {
    max-height: 70vh;
}
.page-menu .widget-scroll-box {
    max-height: 350px;
}
/* 회사 목록: 좁은 칸이라 회사명이 줄바꿈되게 한다(nowrap 이면 표가 칸보다 넓어져 오른쪽이 잘린다) */
.page-menu #table-company td {
    white-space: normal;
    word-break: keep-all;
}

/* 메뉴 트리 표는 common.css 의 트리 표(tree-table) 공통 규칙을 쓴다 */

/* ################################################################
 * patrol (원래 css/web/page/patrol.css)
 * ################################################################ */
/*
 * 순찰
 * 아래 화면의 JSP <style> 에 똑같이 복사돼 있던 규칙을 모았다(git show 4d736e036:docs/CLEAN_CSS.md Phase 3).
 * pages.css 로 합치면서 실던 화면의 루트 클래스로 :where(body:has(...)) 범위를 걸었다(우선순위·적용 범위는 그대로).
 * web/patrol/patrolList.jsp, web/patrol/patrolTpList.jsp
 */

:where(body:has(.page-patrol-list, .page-patrol-item-types)) .dataTables_scrollHead {
    width: auto !important;
}
:where(body:has(.page-patrol-list, .page-patrol-item-types)) .dataTables_wrapper .row {
    width: inherit;
}

/* ===== 순회점검일지 (web/patrol/list.jsp) — JSP <style> 에서 옮겼다 ===== */
/* 점검항목 상세의 사진·첨부 — 상자 없이 상세 값 칸(dd) 안에 바로 늘어놓는다 */
.page-patrol-list #r_pic,
.page-patrol-list #r_file {
    overflow: hidden !important;
    display: contents !important;
}
.page-patrol-list #r_pic img {
    width: 60% !important;
}
.page-patrol-list #r_file div {
    font-size: 13px !important;
}
.page-patrol-list #grid td {
    vertical-align: middle;
}
/* 점검결과 등록 모달(web/patrol/detail-form-modal.jsp)의 등록된 첨부(이미지가 아닌 파일) — 모달 <style> 에서 옮겼다.
   같이 있던 .form-control[readonly] 회색(!important)은 지웠다 — 읽기 전용도 흰 바탕이 표준이고, 모달이 떠 있는 동안 뒤 화면 칸까지 회색이 됐다 */
.div-patrolform .attach-file {
    display: table-cell !important;
    overflow: hidden;
    word-wrap: break-word;
    border: none !important;
    font-size: 10px;
    margin: 0 !important;
}

/* ################################################################
 * patrol-inspct (원래 css/web/page/patrol-inspct.css)
 * ################################################################ */
/* ===== 순회점검자등록(월별지정) (web/patrol-inspct/charge-update.jsp) ===== */
/* 기존 전역 규칙이 여기까지 적용되고 있었다 — 유지: 헤더 영역의 .input-group-prepend 2곳(width 120px)에도 적용됐다.
   본문 밖까지 같은 범위를 유지하려고 body:has() 로 이 화면에서만 걸리게 한다 */
body:has(.page-patrol-inspct-charge-update) .input-group-prepend,
body:has(.page-patrol-inspct-charge-update) .input-group-text {
    width: 120px;
}

/* ################################################################
 * permit-manage (원래 css/web/page/permit-manage.css)
 * ################################################################ */
/*
 * 작업허가서 관리
 * 아래 화면의 JSP <style> 에 똑같이 복사돼 있던 규칙을 모았다(git show 4d736e036:docs/CLEAN_CSS.md Phase 3).
 * pages.css 로 합치면서 실던 화면의 루트 클래스로 :where(body:has(...)) 범위를 걸었다(우선순위·적용 범위는 그대로).
 * web/permit-manage/risk-list.jsp, web/permit-manage/work-list.jsp
 */

:where(body:has(.page-permit-manage-work-list, .page-permit-manage-risk-list)) .dataTables_filter {
    display: none;
}

/* ################################################################
 * qna (원래 css/web/page/qna.css)
 * ################################################################ */
/* ===== 문의게시판 목록 (web/qna/list.jsp) ===== */
/* 담당자 연락처 — 공통 안내문구(guide-text) 안의 목록 */
.page-qna-list .contact-box-container { margin-top: 10px; }
.page-qna-list .contact-list { display: flex; flex-direction: column; gap: 3px; }
.page-qna-list .contact-title { font-weight: 600; color: var(--color-text-default); }
.page-qna-list .contact-box { display: flex; align-items: center; gap: 10px; }
.page-qna-list .contact-name { flex: 0 0 72px; font-weight: 600; color: var(--color-text-default); }
.page-qna-list .contact-num { color: var(--color-text-default); }
.page-qna-list .kakao-btn {
    background: #fae100;
    padding: 4px 10px 4px 8px;
    border-radius: 6px;
    width: fit-content;
    cursor: pointer;
    color: var(--color-text-default);
    margin-left: 0px;
    display: flex;
    align-items: center;
}
.page-qna-list .kakao-btn:hover,
.page-qna-list .kakao-btn:focus {
    background: #fae100;
}
.page-qna-list .kakao-btn img {
    width: 30px;
}
.page-qna-list .kakao-btn span {
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    vertical-align: middle;
}
.page-qna-list table tbody tr {
    cursor: pointer;
}
.page-qna-list .table thead tr th {
    border: 1px solid var(--color-border-default) !important;
}

/* ===== 문의게시판 등록·상세 (web/qna/form.jsp) ===== */
.page-qna-form .dropzone {
    flex-grow: 1;
}

/* ################################################################
 * risk (원래 css/web/page/risk.css)
 * ################################################################ */
/* ===== 추가위험발굴 목록 (web/risk/mainRiskList.jsp) ===== */
/* 기존 전역 규칙이 여기까지 적용되고 있었다 — 유지 (본문 밖 모달·내비게이션의 tr td:nth-child(8) 포함) */
body:has(.page-risk-main-risk-list) tr td:nth-child(8) {
    white-space: normal !important;
    word-wrap: break-word;
    width:20%;
}
/* 메인 그리드가 카드 영역 전체 폭을 채우도록 강제(이 페이지 한정) */
.page-risk-main-risk-list #grid {
    width: 100% !important;
}

/* ===== 추가위험발굴 모달 (web/risk/popMainRiskActForm.jsp, popMainRiskToMainFault.jsp) ===== */
/* 기존 전역 규칙이 모달이 열린 동안 뒤 화면의 .input-group-text(예: #modal-verify)까지 적용되고 있었다 — 유지 */
body:has(.page-risk-main-risk-act-form) .input-group-text,
body:has(.page-risk-main-fault-form) .input-group-text {
    min-width: 120px;
}

/* ################################################################
 * safety-health-report (원래 css/web/page/safety-health-report.css)
 * ################################################################ */
/* 표 머리줄처럼 쓰는 라벨(안전교육 활동·건설기계 등) — 상세 입력(input-group) 라벨과 같은 색·선 */
.page-safety-health-report-form .table-title {
    display: inline-block;
    width: 100%;
    height: 30px;
    background-color: var(--color-bg-field-input-label);
    color: var(--color-text-field-label);
    font-size: 13px;
    font-weight: bold;
    border: 1px solid var(--color-border-field-input);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    border-radius: 0;
}

/* ################################################################
 * safety-suggestion (원래 css/web/page/safety-suggestion.css)
 * ################################################################ */
/* ===== 안전건의함 목록 (web/safety-suggestion/safety-suggestion-list.jsp) ===== */
/* 기존 전역 규칙이 여기까지 적용되고 있었다 — 유지
   원본이 전역 .btn 규칙이라 본문 밖(내비게이션 토글, 2차인증 모달, 사용자 설정 패널, 알림창) 버튼까지 적용되고 있었다.
   안전건의함 목록 화면에서만 걸리게 한다. */
body:has(.page-safety-suggestion-list) .btn {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.page-safety-suggestion-list .dataTables_scroll {
    width: 100%;
}
.page-safety-suggestion-list .reply-textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    cursor: default;
    height: auto !important;
}

/* ===== 조치 등록 모달 (web/safety-suggestion/safety-suggestion-act.jsp) ===== */
/* 호스트: safety-suggestion-list.jsp 만 */
.page-safety-suggestion-act .input-group-text {
    min-width: 120px;
}
/* 기존 전역 규칙이 여기까지 적용되고 있었다 — 유지 (조치 모달이 DOM 에 있는 동안 navigation.jsp 의 2차인증 모달에도 적용됐다) */
body:has(.page-safety-suggestion-act) #modal-verify .input-group-text {
    min-width: 120px;
}

/* ===== 댓글 첨부 모달 (web/safety-suggestion/safety-suggestion-reply-attach.jsp) ===== */
/* 호스트: safety-suggestion-list.jsp 만 */
.page-safety-suggestion-reply-attach .attach-file {
    overflow: hidden;
    border: none !important;
    margin: 0 !important;
    padding: 5px 10px;
    box-sizing: border-box;
    position: relative; /* 부모 컨텍스트 설정 */
    font-size: 10px;
}
.page-safety-suggestion-reply-attach .attach-delete {
    position: absolute; /* 부모에 상대적 위치 설정 */
    top: 5px; /* 위쪽 간격 */
    right: 5px; /* 오른쪽 간격 */
    height: 20px; /* 버튼 높이 */
    width: 20px; /* 버튼 너비 */
    z-index: 10; /* 다른 요소 위에 표시 */
}

/* ################################################################
 * safetycheck (원래 css/web/page/safetycheck.css)
 * ################################################################ */
/* ===== 안전점검표 작성 (web/safetycheck/safety-check-form.jsp) ===== */
.page-safetycheck-form .info-section .d-images img { height:120px; margin:0 6px 6px 0; cursor:pointer; border:1px solid #e2e2e2; }

/* ===== 안전점검표 양식 선택 모달 (web/safetycheck/popSafetyCheckTemplatePicker.jsp) =====
   호스트는 safety-check-form.jsp 하나뿐이다(모바일은 m/ 쪽 별도 프래그먼트). */
/* 기존 전역 규칙이 여기까지 적용되고 있었다 — 유지 (모달 템플릿 등 페이지의 다른 .modal-content 에도 적용됐다) */
body:has(.page-safetycheck-template-picker-modal) .modal-content {
    max-height: calc(100vh - 60px);
    overflow: hidden;
}

.page-safetycheck-template-picker-modal {
    max-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.page-safetycheck-template-picker-modal > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ===== 안전점검표 양식 관리 / 양식 관리(마스터)
   (web/safetycheck/safety-check-template-management.jsp, safety-check-template-management-mst.jsp) =====
   두 화면의 \3c style> 이 동일해 한 번만 정의한다. */
/* 표 모양은 공통(트리 = common.css tree-table, 항목 = table table-bordered). 여기에는 항목 표 입력칸 여백·삭제 아이콘·트리 상자 높이만 둔다 */
:is(.page-safetycheck-template-management, .page-safetycheck-template-management-mst) #itemsTable {
    margin-bottom: 0;
}
:is(.page-safetycheck-template-management, .page-safetycheck-template-management-mst) #treeContainer {
    max-height: 800px;
    padding: 0;
    margin-bottom: 20px;
}
:is(.page-safetycheck-template-management, .page-safetycheck-template-management-mst) #itemsTable tbody td {
    padding: 4px;
    vertical-align: middle;
}
:is(.page-safetycheck-template-management, .page-safetycheck-template-management-mst) #itemsTable .item-delete {
    font-size: 16px;
}
/* 기존 전역 규칙이 여기까지 적용되고 있었다 — 유지 (페이지 본문 밖 .card-header/.card-body 까지 적용됐다) */
body:has(:is(.page-safetycheck-template-management, .page-safetycheck-template-management-mst)) .card-header,
body:has(:is(.page-safetycheck-template-management, .page-safetycheck-template-management-mst)) .card-body {
    margin-inline: 15px !important;
}
:is(.page-safetycheck-template-management, .page-safetycheck-template-management-mst) #itemsArea textarea {
    height: 50px;
}

/* ################################################################
 * stat (원래 css/web/page/stat.css)
 * ################################################################ */
/*
 * 통계 화면 공통 — web/stat/ 의 9개 화면(day-prfrmnc-list, fault-risk-prfrmnc, main-manage-monitor, main-risk-monitor,
 * prsnl-prfrmnc-list, prsnl-prfrmnc-year, site-prfrmnc-list, sub-manage-monitor, sub-mng-prfrmnc-stat).
 * 원래 각 JSP <style> 에 복사돼 있던 규칙이다(git show 4d736e036:docs/CLEAN_CSS.md Phase 3). 범위가 없던 규칙이라
 * 루트 클래스 page-stat-{업무} 로 :where(body:has(...)) 범위를 걸었다(우선순위·적용 범위는 그대로).
 * 표 머리 칸 왼쪽·오른쪽 선을 지우던 규칙(table.table-bordered.dataTable th … border-left/right-width:0)은 뺐다.
 * stat.css 를 head.jsp 보다 앞에서 싣고 있어 뒤의 DataTables 규칙에 늘 졌다 — 화면에 적용된 적이 없다.
 */
:where(body:has([class*="page-stat-"])) td {
    vertical-align: middle !important;
}
/* 점검 모니터 (main-manage-monitor, sub-manage-monitor) */
:where(body:has([class*="page-stat-"])) .txt-red {
    color: red !important;
}
:where(body:has([class*="page-stat-"])) .txt-blue {
    color: blue !important;
}
:where(body:has([class*="page-stat-"])) .line1 {
    background: url('/img/slash.png') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
}

/* ################################################################
 * sub-fault (원래 css/web/page/sub-fault.css)
 * ################################################################ */
/* ===== (구)일상점검불량 목록 (web/sub-fault/subFaultList.jsp) ===== */
.page-sub-fault-list tr td:nth-child(5) {
    white-space: normal;
    word-wrap: break-word;
    width: 20%;
}
/* 메인 그리드가 카드 영역 전체 폭을 채우도록 강제(이 페이지 한정) */
.page-sub-fault-list #grid {
    width: 100% !important;
}

/* ===== 조치 등록 모달 (web/sub-fault/popSubFaultActForm.jsp) / 조치 반려 모달 (web/sub-fault/popSubFaultRejectForm.jsp) ===== */
/* 기존 전역 규칙이 여기까지 적용되고 있었다 — 유지
   원본이 전역 .input-group-text 규칙이라 모달이 로드된 뒤에는 본문 밖(본인인증 모달 #modal-verify 등)의 라벨까지 min-width 가 적용됐다 */
body:has(.page-sub-fault-act-modal) .input-group-text,
body:has(.page-sub-fault-reject-modal) .input-group-text {
    min-width: 120px;
}

/* ################################################################
 * sub-risk (원래 css/web/page/sub-risk.css)
 * ################################################################ */
/* ===== 시정조치요구 목록 (web/sub-risk/subRiskList.jsp) ===== */
.page-sub-risk-list tr td:nth-child(7) {
    white-space: normal;
    word-wrap: break-word;
    width: 20%;
}
/* 메인 그리드가 카드 영역 전체 폭을 채우도록 강제(이 페이지 한정) */
.page-sub-risk-list #grid {
    width: 100% !important;
}

/* ===== 조치 등록 모달 (web/sub-risk/popSubRiskActForm.jsp) / 조치 반려 모달 (web/sub-risk/popSubRiskActRejectForm.jsp) ===== */
/* 기존 전역 규칙이 여기까지 적용되고 있었다 — 유지
   원본이 전역 .input-group-text 규칙이라 모달이 로드된 뒤에는 본문 밖(본인인증 모달 #modal-verify 등)의 라벨까지 min-width 가 적용됐다 */
body:has(.page-sub-risk-act-modal) .input-group-text,
body:has(.page-sub-risk-reject-modal) .input-group-text {
    min-width: 120px;
}

/* ################################################################
 * submanage (원래 css/web/page/submanage.css)
 * ################################################################ */
/* ===== 일상점검활동 (web/sub-manage/check-list.jsp) ===== */
/* 점검활동 등록 모달 안의 안전보건일지 폼 검증 메시지 위치.
   원본이 전역 .pop_form 규칙이라 일상점검활동 화면에서 열리는 모달 전체에 적용되고 있었다 — 유지
   (모달은 .page-content-wrapper 밖 body 에 붙으므로 화면 루트를 body:has 로 건다) */
body:has(.page-submanage-check-list) .pop_form label.error {
    left: 236px;
}
/* 회차별 출력 드롭다운 위치 — 본문(화면 루트) 안의 드롭다운에만 건다.
   예전에는 원본의 전역 규칙 범위를 지키느라 body:has(...) 로 걸어 헤더의 현장선택 드롭다운까지 밀려 엉뚱한 곳에 떴다(일상점검활동 화면에서만) */
.page-submanage-check-list .dropdown-menu.show {
    transform: translate3d(50%, 50%, 0px) !important;
}
/* 안전대책 컬럼 말줄임 (기존 td.text_ellipsis 대체) */
.page-submanage-check-list #grid tbody td:nth-child(5) {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 상세 패널의 자유 입력 값(위치·위험요인·안전대책·점검의견·조치의견)은 .text() 로 넣으므로 입력한 줄바꿈이 그대로 보이게 한다 */
.page-submanage-check-list #itemLocate,
.page-submanage-check-list #itemCause,
.page-submanage-check-list #itemMeas,
.page-submanage-check-list #chkOpnn,
.page-submanage-check-list #measReqOpnn {
    white-space: pre-line;
}

/* ===== 일상점검 이력조회 모달 (web/sub-manage/check-history-modal.jsp) ===== */
/* 호스트는 check-list.jsp 뿐이다 */
/* 기존 columnDefs 의 va_middle 대체 */
.page-submanage-check-history-pop #gridH tbody td { vertical-align: middle; }
/* 점검 이력 표 스크롤 높이 */
.page-submanage-check-history-pop .table-scroll { max-height: 480px; }

/* ===== 안전보건일지 모달 (web/sub-manage/work-modal.jsp) ===== */
/* 호스트는 check-list.jsp 뿐이다 */
.page-submanage-work-pop .top_area .input-group-text { width: 227px !important; }
.page-submanage-work-pop .txt_area { padding: 0 !important; }
.page-submanage-work-pop .txt_area .input-group-text { width: 100% !important; }
.page-submanage-work-pop .txt_area .input-group-prepend { padding: 0 !important; }
.page-submanage-work-pop .icon i { font-size: 24px; margin-top: 8px; }

/* ################################################################
 * tbm (원래 css/web/page/tbm.css)
 * ################################################################ */
/* ===== TBM 공통 — 출석 서명 이미지 (web/tbm/tbmList.jsp, web/tbm/tbmForm.jsp 의 참석자 표) ===== */
.page-tbm-list .attend-content,
.page-tbm-form .attend-content {
    max-height: 30px;
}
.page-tbm-list .has-attend-content,
.page-tbm-form .has-attend-content {
    padding: 0 !important;
    vertical-align: middle !important;
}

/* ===== TBM 목록 (web/tbm/tbmList.jsp) ===== */
/* 기존 전역 규칙이 여기까지 적용되고 있었다 — 유지: .btn 규칙은 본문 밖(내비게이션·헤더·팝업)의 버튼에도 적용됐다.
   :where() 는 body:has() 로 범위를 걸면서도 원래 선택자 우선순위(.btn = 0,1,0)를 그대로 유지하기 위한 것이다.
   표 선 규칙은 웹 표 공통 디자인(common.css 「표」 절)으로 옮겼다 */
:where(body:has(.page-tbm-list)) .btn {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
/* 폭염/한파주의(기상이력) 표 - heatwave-alert-form 의 #weatherHistory 스타일 차용 */
.page-tbm-list .heatwave-history-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
.page-tbm-list #table-heatwave th,
.page-tbm-list #table-heatwave td {
    border: 1px solid lightgray !important;
    padding: 6px 4px;
    text-align: center;
    font-size: 13px;
}
.page-tbm-list #table-heatwave th {
    background-color: var(--color-bg-subtle);
    font-weight: bold;
}
.page-tbm-list #table-heatwave th:first-child {
    width: 80px;
}

/* ===== TBM 작성/상세 (web/tbm/tbmForm.jsp) ===== */
/* 사진 칸(TBM·안전사진 1·2·기타사진) 규칙은 공통 컴포넌트 PhotoSlotGroup 으로 옮겼다 — css/common.css 의 .photo-slot-group 절 */
/* 기존 전역 규칙이 여기까지 적용되고 있었다 — 유지: :where(body:has(...)) 로 쓴 규칙(.dropzone 계열, .dz-message, .form-control[disabled], i.required)은
   본문 밖에 열리는 팝업(첨부파일 popTbmAttach, 위험요인 등록 popTbmEvalForm 등)에도 적용됐다.
   :where() 는 body:has() 로 범위를 걸면서도 원래 선택자 우선순위를 그대로 유지하기 위한 것이다.
   첨부파일 모달은 열릴 때 dropzone.css 를 한 번 더 로드해서, 모달이 떠 있는 동안에는 dropzone.css 와 겹치는 속성
   (padding, 미리보기 크기, 삭제 버튼 크기·위치·색)이 뒤 화면까지 dropzone.css 값으로 돌아갔다.
   모달의 중복 <link> 를 지우면서 그 동작을 :not(:has(.page-tbm-attach-modal)) 로 유지한다. */
:where(body:has(.page-tbm-form)) .dropzone {
    height: 100%;
}

:where(body:has(.page-tbm-form):not(:has(.page-tbm-attach-modal))) .dropzone {
    padding: 0;
}

:where(body:has(.page-tbm-form):not(:has(.page-tbm-attach-modal))) .dropzone .dz-preview .dz-image {
    width: 90px;
    height: 90px;
}

:where(body:has(.page-tbm-form)) .form-control[disabled] {
    background-color: var(--color-bg-subtle) !important;
}
:where(body:has(.page-tbm-form)) .dropzone .dz-preview .dz-remove {
    text-shadow: -1px 0 var(--color-shadow-light), 0 1px var(--color-shadow-light), 1px 0 var(--color-shadow-light), 0 -1px var(--color-shadow-light) !important;
}
:where(body:has(.page-tbm-form):not(:has(.page-tbm-attach-modal))) .dropzone .dz-preview .dz-remove {
    font-size: 21px;
    right: 10px;
    top: 2px;
    color: #e51616;
}
:where(body:has(.page-tbm-form)) .dz-image i {
    display: inline-block;
    font-size: 70px !important;
    vertical-align: middle;
    width: 92px;
    margin: 20px 20px 8px -5px;
    text-align: right;
}

/* ===== TBM 참석자 팝업 (web/tbm/popTbmAttend.jsp, tbmForm 의 Modal 로 로드) ===== */
.page-tbm-attend-modal .table-responsive {
    height: 270px;
}

/* 오른쪽 화살표 */
.page-tbm-attend-modal .fa-arrow-circle-right {
    margin-top: 100px;
    font-size: 40px;
}

.page-tbm-attend-modal .select-btn {
    position: fixed;
}

/* ################################################################
 * user (원래 css/web/page/user.css)
 * ################################################################ */
/* ===== 알림 & SMS 발송 (web/user/send-push-sms.jsp) ===== */
/* 발송폼 입력행 라벨 폭 통일 */
.page-user-send-push-sms #send-form .input-group-text {
    min-width: 90px;
    justify-content: center;
}
.page-user-send-push-sms #manager-table,
.page-user-send-push-sms #worker-table,
.page-user-send-push-sms #target-user-table,
.page-user-send-push-sms #history-table {
    width: 100% !important;
}
/* 정렬 여부(sorting_asc/sorting)와 무관하게 헤더 border 색상을 #999 로 통일
   (정렬 안 된 th 는 .tableStyleCustom th 의 #555 가 남아 다른 테이블과 색이 달라 보임) */
.page-user-send-push-sms #manager-table thead th,
.page-user-send-push-sms #worker-table thead th,
.page-user-send-push-sms #target-user-table thead th,
.page-user-send-push-sms #history-table thead th {
    border-color: var(--color-border-default);
}
/* mainRiskList 의 .my-2 .btn 규칙과 동일하게 발송 버튼 스타일 통일 */
.page-user-send-push-sms #btn-send {
    padding: 2px 5px;
    letter-spacing: -1px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Spoqa Han Sans Neo";
    font-weight: 400;
}
/* 90바이트 초과(알림 & SMS)로 발송 불가 상태 */
.page-user-send-push-sms #btn-send.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ################################################################
 * worker (원래 css/web/page/worker.css)
 * ################################################################ */
/* ===== 작업중지권 (web/work-stop/list.jsp) ===== */
/* Datatable 공용 클래스는 scrollY 를 지원하지 않아 래퍼 기준 스크롤로 대체한다 */
.page-worker-work-stop-list .grid-scroll-wrap { max-height: 450px; overflow-y: auto; }
/* 기존 전역 규칙이 여기까지 적용되고 있었다 — 유지
   원본이 전역 .btn 규칙이라 본문 밖(내비게이션 토글, 인증번호·사용자 설정 모달, 알림창) 버튼까지 적용되고 있었다.
   이 CSS 는 같은 폴더의 다른 화면도 로드할 수 있으므로 작업중지권 화면에서만 걸리게 한다. */
body:has(.page-worker-work-stop-list) .btn {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.page-worker-work-stop-list .reply-textarea {
    width:100%;
    border: none;
    outline: none;
    resize: none;
    cursor: default;
    height: auto !important;
}

/* ===== 옵션변경(관리자) 모달 (web/opt/page-option-modal.jsp) ===== */
/* 옵션이 많은 화면(수시 위험성평가 등)에서 머리글·저장 버튼은 두고 본문만 스크롤한다 */
.page-opt-page-option .pop_form {
    max-height: 68vh;
    overflow-y: auto;
}
/* 옵션 라벨이 길어(「참석 알림 — 협력업체 근로자」 등) 라벨 칸을 모달 기본(120px)보다 넓히고 줄바꿈을 허용한다 */
.page-opt-page-option #frm-page-option .input-group-prepend > .input-group-text { width: 190px; white-space: normal; text-align: left; }

/* ===== 활동 로그 모달 (web/site-activity/domain-modal.jsp) — 제목 옆·목록의 활동로그(관리자) 버튼이 연다 ===== */
/* 조회조건 두 줄을 같은 4칸으로 나눠 칸이 위아래로 맞게 한다. 라벨 폭을 같게 해 입력칸 시작선도 맞춘다(공통 search-bar 는 내용 폭만큼 흐른다) */
.page-site-activity-domain-modal .search-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 24px; }
.page-site-activity-domain-modal .search-field { gap: 8px; min-width: 0; }
.page-site-activity-domain-modal .search-field > .condition-label { flex: 0 0 60px; margin: 0; }
.page-site-activity-domain-modal .search-field > .form-control,
.page-site-activity-domain-modal .search-field > .input-group { flex: 1 1 0; min-width: 0; }
/* 메모는 한 줄로 줄이고 전문은 상세 모달에서 본다 */
.page-site-activity-domain-modal .sa-memo-cell { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }