/***********************************************************************************
 * monitorUI.css — 현황판 지도 오버레이 전용 스타일
 * DESCRIPTION : 퍼블(wm-status.css / wm-status-mo.css)이 **제공하지 않는** 것만 담는다.
 *               셸·헤더·탭·테이블·툴바·컨트롤바 등 화면 골격은 전부 퍼블 소관이고,
 *               여기 남은 것은 지도 위에 얹히는 요소들이다:
 *                 · #map2D, WFS 로딩 인디케이터
 *                 · 지점/홍수특보 클릭 팝업(ol.Overlay), 헥사빈 셀 요약 팝업
 *                 · '내 위치' 마커, 강수 레이더 투명도 슬라이더
 *               이들은 JS가 만들거나(ol.Overlay·monitorUI.js) 퍼블 마크업에 대응
 *               항목이 없어서 퍼블 CSS로 대체되지 않는다.
 ***********************************************************************************/

:root {
    --fdb-panel: #1a2030;
    --fdb-border: rgba(255,255,255,.12);
    --fdb-txt: #e6e6e6;
    --fdb-txt-dim: #9aa3b2;
    --fdb-accent: #4f8ff7;
    --fdb-bg: #10141c;
}

/* 퍼블은 `body .wm-status_wrap{height:100%}` 만 정의하고 html/body 높이는 잡지 않아
   래퍼의 100%가 무너진다. 폰트도 common.css가 `.wm-civdsb-wrap *` 에만 걸어서
   현황판에는 적용되지 않으므로 body에서 상속시킨다. */
html, body { height: 100%; margin: 0; }
body {
    background: var(--fdb-bg);
    color: var(--fdb-txt);
    font-family: 'Pretendard', sans-serif;
}

/* 아이콘 스프라이트 경로 보정 — common.css는 `--c-iconmap`을
   `url("../images/…")` 상대경로로 정의하지만, 이 변수를 쓰는 background-image
   선언이 `monitor/wm-status.css`(= css/monitor/)에 있어 브라우저가 상대경로를
   그 시트 기준으로 풀면 `css/images/…`(404)가 된다. 현황판은 dark 스프라이트
   고정이므로(common.css 103행에서 .wm-status_wrap을 .dark-mode와 함께 묶음)
   래퍼 스코프에서 절대경로로 재정의해 시트 위치와 무관하게 해석되게 한다.
   common.css는 대시보드와 공유하는 파일이라 건드리지 않는다. */
.wm-status_wrap {
    --c-iconmap: url("/swd/resources/images/wm-civ-basicicon-spritemap-dk.svg");
}

/* ── 지도 캔버스 ───────────────────────────────────────────────── */
/* position:absolute 필수 — static이면 map2D가 문서 흐름에서
   캔버스 전체 높이를 차지해, 그 뒤의 발령현황 팝업(.wm-status-flood-alert)이
   접힐 때(top이 auto로 풀림) 자연 위치가 지도 하단 밖으로 밀려 사라진다. */
#map2D { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 발령현황 팝업 접힘 위치 고정 — 퍼블은 top/left를 `:not(.wm-pop-fold)`에만 걸어
   접으면 위치가 auto로 풀려 제자리를 벗어난다. 접어도 좌상단(펼침과 동일)을 유지. */
.wm-status_wrap .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold {
    top: 1rem;
    left: 1rem;
}

/* ── 내 위치 (monitorUI.js) ─────────────────────────────────────── */
/* 활성(토글 ON) — 퍼블 툴바 버튼의 .on 배경은 wm-status.css가 담당하고,
   여기서는 조회 중 점멸만 얹는다. */
.wm-status-map-toolbar button[data-fdb-tool="locate"].is-locating {
    animation: wm-fdb-locate-blink .8s ease-in-out infinite;
}
@keyframes wm-fdb-locate-blink { 50% { opacity: .3; } }

/* '내 위치' 지도 마커 — 파란 점 + 확산 링(펄스) */
.wm-fdb-mylocation {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1568ee;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(21,104,238,.35);
    pointer-events: none;
}
.wm-fdb-mylocation::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(21,104,238,.35);
    transform: translate(-50%, -50%);
    animation: wm-fdb-mylocation-pulse 2s ease-out infinite;
}
@keyframes wm-fdb-mylocation-pulse {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: .6; }
    100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0;  }
}

/* ── 강수 레이더 투명도 슬라이더 (monitorUI.js가 마크업 생성) ─────────
 *    퍼블 레이어 팝업에는 '레이더영상' 체크박스만 있고 슬라이더 자리가 없어 전용 스타일을 둔다. */
.wm-fdb-opacity {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0 4px 20px;   /* 체크박스 + swatch 만큼 들여쓰기 */
    font-size: 11px;
    color: var(--fdb-txt-dim);
}
.wm-fdb-opacity__label { flex: 0 0 auto; }
.wm-fdb-opacity__value { flex: 0 0 auto; width: 24px; text-align: right; color: var(--fdb-txt); }

.wm-fdb-opacity__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 3px;
    margin: 0;
    padding: 0;
    border-radius: 2px;
    background: rgba(255,255,255,.18);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.wm-fdb-opacity__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 11px;
    height: 11px;
    border: none;
    border-radius: 50%;
    background: var(--fdb-accent);
    cursor: pointer;
}
.wm-fdb-opacity__input::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border: none;
    border-radius: 50%;
    background: var(--fdb-accent);
    cursor: pointer;
}

/* 레이더 프레임 시각 라벨 */
.wm-fdb-radar-time {
    margin: 2px 0 0 20px;
    font-size: 11px;
    color: var(--fdb-txt-dim);
}

/* ── 지점 클릭 팝업 (지도 오버레이) — floodStation.js/floodAlert.js가 참조하는
 *    기존 클래스/ID를 그대로 사용. 퍼블에 대응 마크업이 없어 전용 정의 유지. ── */
/* 오버레이 배경은 퍼블 지도팝업(.wm-status-map-popup)과 동일한 파란 그라디언트
   — 현황판은 global.css를 로드하지 않아 여기서 직접 맞춘다. */
#board-station-popup, #flood-alert-popup {
    position: relative;
    width: 260px;
    background: linear-gradient(#12234A, #27558E);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 0.4rem;
    box-shadow: 2px 5px 8px rgba(0,0,0,.35);
    font-size: 12px;
    color: var(--fdb-txt);
}
/* 지점을 가리키는 하단 꼬리(캐럿) — 오버레이가 지점 위 30px에 뜨므로 아래로 향한다. */
#board-station-popup::after, #flood-alert-popup::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-bottom: 0;
    border-top-color: #27558E;
}
.wm-mapInfo_pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,.25);
    font-weight: 700;
}
/* CCTV 보기 배지 버튼 — 홍수특보 팝업 제목줄. 퍼블 공통뱃지(.wm-sts-badge.btit)를
   버튼으로 재사용하되 클릭 인터랙션(커서/호버)과 아이콘+라벨 정렬만 얹는다.
   클릭 동작은 floodAlert.js(.cctv-show-btn)가 담당 → flood.go.kr CCTV 영상 팝업. */
.wm-status_wrap .cctv-show-btn.wm-sts-badge {
    flex: 0 0 auto;
    align-items: center;
    gap: 0.15rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    line-height: 1;
    white-space: nowrap;
    transition: filter .15s ease, transform .1s ease;
}
.wm-status_wrap .cctv-show-btn.wm-sts-badge:hover  { filter: brightness(1.12); }
.wm-status_wrap .cctv-show-btn.wm-sts-badge:active { transform: translateY(1px); }
.wm-mapInfo_pop-body { padding: 8px 10px; }
.wm-mapInfo_pop-body-tit { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.wm-mapInfo_pop-body-tit h4 { margin: 0; font-size: 13px; }
.wm-mapInfo_pop-body-txt { color: var(--fdb-txt-dim); margin-bottom: 6px; }
.wm-mapInfo_pop-body-info { list-style: none; margin: 0; padding: 0; }
.wm-mapInfo_pop-body-info li { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; }
.wm-mapInfo_pop-body-info li p { margin: 0; color: var(--fdb-txt-dim); }
.wm-mapInfo_pop-body-info li mark { background: none; color: var(--fdb-txt); font-weight: 700; }
.wm-stt-usage { margin: 0; }
.wm-stt-usage mark { padding: 1px 6px; border-radius: 4px; background: var(--fdb-border); }

/* ── 헥사빈 셀 클릭 요약 팝업 (hexbin/controller.js — .hexbin-popup) ──
 *    controller.js는 퍼블 디자인시스템 클래스(wm-civdsb-mapInfo_pop)와 대시보드 CSS
 *    변수(--c-gr5/--c-bluem5/--c-wt 등)를 참조하지만 이 페이지는 global.css를 로드하지
 *    않으므로 값이 비어 배지·목록이 안 보였다 — .hexbin-popup 스코프로 독립 재정의. ── */
.hexbin-popup {
    position: relative;
    width: 260px;
    background: linear-gradient(#12234A, #27558E);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 0.4rem;
    box-shadow: 2px 5px 8px rgba(0,0,0,.35);
    font-size: 12px;
    color: var(--fdb-txt);
}
.hexbin-popup .wm-mapInfo_pop-body-txt p { color: var(--fdb-txt-dim) !important; }
.hexbin-popup .swd-ab-idx,
.hexbin-popup .swd-ab-more p { color: var(--fdb-txt-dim); }
.hexbin-popup .swd-ab-item:hover { background: rgba(255,255,255,.08); }
.hexbin-popup .swd-ab-badge { background: var(--fdb-accent); color: #fff; }

/* 수위 변화 배지 — 지도 팝업(floodAlert.js)이 사용. global.css 미로드 상태이므로
   색상 + 괄호를 여기서 직접 정의한다. 좌측 테이블의 변화량은 퍼블
   .wm-value-change 로 전환되므로(P3) 이 규칙과 무관하다. */
.water-level-status.is-rising::before  { content: '(+'; }
.water-level-status.is-falling::before { content: '(-'; }
.water-level-status.is-steady::before  { content: '('; }
.water-level-status::after { content: ')'; }
.water-level-status.is-rising  { color: #ff5c5c; }
.water-level-status.is-falling { color: #4fa3ff; }
.water-level-status.is-steady  { color: var(--fdb-txt-dim); }

/* ── WFS 로딩 인디케이터 (loader.js가 .on 클래스만 토글) ─────────── */
/* 우측 상단 — 좌상단은 발령현황/조류경보 팝업(top:1rem; left:1rem 대) 자리와 겹친다 */
.wm-map-loader {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 22;
    display: none;
}
.wm-map-loader.on { display: block; animation: wm-fdb-fade-in .15s .3s both; }
.wm-map-loader .loader {
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--fdb-border);
    border-top-color: var(--fdb-accent);
    border-radius: 50%;
    animation: wm-fdb-spin .7s linear infinite;
}
@keyframes wm-fdb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wm-fdb-spin { to { transform: rotate(360deg); } }

/* ── 전체 발령현황 카운트 링크 (alertStatus.js) ──────────────────
 *   퍼블(wm-status.css)은 발령현황 표의 모든 a에 underline을 주므로, 링크가 없는
 *   (값 0/-) 셀까지 클릭 가능한 링크처럼 보인다. 값>0 셀만 홍수특보발령현황
 *   팝업으로 연결하고(alertStatus.js가 .is-linked 부여), 나머지는 밑줄/포인터를 끈다.
 *   퍼블 원본 셀렉터 체인 + :not()/.is-linked 로 특이도를 높여 무수정 오버라이드. */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table a:not(.is-linked) {
    text-decoration: none;
    cursor: default;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table a.is-linked {
    cursor: pointer;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table a.is-linked:hover {
    filter: brightness(1.3);
    text-decoration: underline;
}

/* ── 선택 관측소 행 하이라이트 (지도 지점/오버레이 멤버 클릭 → 테이블) ──────────
 * 퍼블 미제공. zebra(nth-child) 배경을 이기도록 specificity를 높이고(main .wm-status_wrap …),
 * monitorUI.css가 wm-status.css보다 뒤에 로드되어 동순위에서도 우선한다. */
main .wm-sts-table-wrap table tbody tr.is-selected,
main .wm-sts-table-wrap table tbody tr.is-selected td,
main .wm-sts-table-wrap table tbody tr.is-selected th {
    background-color: rgba(74, 163, 255, 0.38) !important;
}
main .wm-sts-table-wrap table tbody tr.is-selected td:first-child,
main .wm-sts-table-wrap table tbody tr.is-selected th:first-child {
    box-shadow: inset 3px 0 0 #4aa3ff;
}

/* ══════════════════════════════════════════════════════════════════
 * 녹조현황판 — 퍼블 미제공분.
 *
 * ⚠️ 핵심 전제: 퍼블(wm-status.css / wm-status-mo.css)은 좌측 패널의 **레이아웃과 표
 *    스타일을 전부 `.wm-status-flood-container` + 탭별 클래스(.wm-sts-cont-waterlevel,
 *    -dam, -weir, -cumulativerainfall)에 묶어** 선언한다. 마크업만 같게 만들어도
 *    녹조 패널에는 그 규칙이 하나도 걸리지 않는다 —
 *      · 결과리스트 높이가 없어서 → 표가 넘쳐도 **스크롤이 안 생긴다**
 *      · 표 폰트·헤더배경·nowrap·가운데정렬·테두리 제거가 전부 빠진다
 *    그래서 아래 §2·§3에서 그 규칙들을 녹조 셀렉터로 그대로 재현한다.
 *    (퍼블 파일은 재납품 시 통째로 교체되므로 직접 수정하지 않는다 — 여기에 둔다.
 *     값은 퍼블과 동일하며, 퍼블은 브레이크포인트마다 같은 값을 반복 선언하지만
 *     실제 값이 전부 같아 여기서는 미디어쿼리 없이 한 번만 선언한다.)
 * ══════════════════════════════════════════════════════════════════ */

/* ── §1 상단 현황 탭(홍수 ↔ 녹조) 전환 ──────────────────────────────
 * 지도를 공유하려고 전환 대상을 <main>이 아니라 좌측 콘텐츠 컨테이너로 내렸다
 * (sMonitor.jsp 주석 참조). 퍼블의 main.on 규칙과 같은 역할. `.on` 소유는 monitorPubUI.js. */
body .wm-status_wrap main .wm-status-content > [data-wm-group="물재해"][data-wm-detail] {
    display: none;
}
body .wm-status_wrap main .wm-status-content > [data-wm-group="물재해"][data-wm-detail].on {
    display: block;
}

/* ── §2 패널 레이아웃 — 스크롤이 생기는 지점 ────────────────────────
 * 퍼블 홍수 규칙과 같은 3단 구성:
 *   detail(overflow:hidden) > resultlist(고정 높이) > table-wrap(overflow:auto)
 * 높이 상수도 퍼블과 동일하다 — 요약카드 1행 + 검색줄 = 9.125rem,
 * 값카드(wm-item-left-cont)가 있는 탭은 카드가 더 높아 10.875rem(퍼블 강수량 탭과 동일).
 * 관찰지점·저수지 탭에만 값카드가 있으므로 그 두 탭만 10.875rem을 쓴다. */
body .wm-status_wrap .wm-status-content .wm-status-algae-container .wm-status-comm-tab-detail {
    overflow: hidden;
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-algae .wm-status-search-resultlist {
    height: calc(100% - 9.125rem);
    background: linear-gradient(rgba(37, 79, 135, 0.5), rgba(0, 0, 0, 0.8));
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-algae.wm-sts-algae-nomeasure .wm-status-search-resultlist {
    height: calc(100% - 10.875rem);
}
/* 홍수 수위탭은 정렬 라디오(.wm-status-sort-cont) 한 줄이 있어 calc(100% - 2rem)이지만
 * 녹조에는 그 줄이 없으므로 표가 결과리스트를 꽉 채운다. 여기서 실제 스크롤이 발생한다. */
body .wm-status_wrap .wm-status-content .wm-sts-cont-algae .wm-status-search-resultlist .wm-sts-table-wrap {
    height: 100%;
    overflow: auto;
}

/* ── §3 표 스타일 — 퍼블 '탭 공통 결과리스트' 규칙의 녹조 사본 ────────
 * (wm-status-mo.css의 .wm-status-flood-container … 블록과 선언 내용이 동일) */
body .wm-status_wrap .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table *:not(.wm-thead-unit) {
    font-size: 0.8125rem;
}
body .wm-status_wrap .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table thead {
    background: linear-gradient(45deg, #255087, #173153);
}
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table .wm-thead-unit { font-size: 0.6875rem; }
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table tr { cursor: pointer; }
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr:hover { background-color: rgba(255, 255, 255, 0.1); }
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table tr,
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table tr th,
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table tr td { vertical-align: middle; }
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table { border-style: solid none solid none; }
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table tbody th:hover,
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table tbody td:hover { background-color: transparent; }
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table th,
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table td { border: none; }
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table tr th span,
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table tr td span { white-space: nowrap; }
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table tr td:not(:first-of-type) span { justify-content: center; }
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table thead tr th span { justify-content: center; }
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td .wm-poi-tit { align-items: center; }

/* 발령기준 배지 묶음(홍수 '지점별 기준수위' 셀의 녹조판)은 값이 길어 폭이 좁으면 줄바꿈된다
 * — 이 칸만 폰트를 줄이고 배지 간격을 좁혀 한 줄을 유지한다. */
body .wm-status_wrap main .wm-status-content .wm-status-algae-container .wm-sts-table-wrap table td .justify-center .wm-sts-badge {
    font-size: 0.6875rem;
    padding: 0 0.25rem;
    white-space: nowrap;
}

/* ── §4 녹조 전용 색 토큰 ────────────────────────────────────────
 * 요약카드 숫자색 = 조류경보 4단계. 홍수판이 --c-statusp-lv1~4를 쓰는 것과 같은 방식으로
 * 퍼블 상태 토큰을 재사용한다(관심=lv1, 경계=lv3, 대발생=lv4 — 녹조에는 '주의'가 없어 lv2 생략).
 * 지도 심볼·수계 폴리곤(monitor-algae-stations.js ALERT_BANDS)과 같은 의미 계열. */
.wm-sts-cont-algae .wm-alert-list ol li:nth-child(1) strong { color: var(--c-wt); }
.wm-sts-cont-algae .wm-alert-list ol li:nth-child(2) strong { color: var(--c-wt); opacity: 0.75; }
.wm-sts-cont-algae .wm-alert-list ol li:nth-child(3) strong { color: var(--c-statusp-lv1); }
.wm-sts-cont-algae .wm-alert-list ol li:nth-child(4) strong { color: var(--c-statusp-lv3); }
.wm-sts-cont-algae .wm-alert-list ol li:nth-child(5) strong { color: var(--c-statusp-lv4); }
/* 관찰지점·저수지 탭은 카드 구성이 [전체/측정있음/측정없음/최고값]이라 단계색을 되돌린다. */
.wm-sts-cont-algae.wm-sts-algae-nomeasure .wm-alert-list ol li strong { color: var(--c-wt); }

/* 활성 카드(필터 ON) — 홍수판 data-fd-card와 동일한 시각 규칙 */
.wm-sts-cont-algae .wm-alert-list ol > li:has(> button.on) {
    background-color: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
}

/* ── §5 수계별 조류경보 현황 팝업 ────────────────────────────────
 * 전용 CSS 없음. 마크업이 .wm-status-flood-alert 를 함께 달고 있어 크기·위치·표
 * 테두리·색상(span.gr/.or/.rd)·fold 좌표까지 퍼블 규칙을 그대로 상속받는다.
 * "0건은 색칠하지 않는다"만 프로젝트 고유 동작이고, 클래스를 붙일지 말지로
 * monitorAlgaeContent.js `_cntCell()` 에서 처리한다. */

/* ── §6 범례 — 녹조 지점 심볼은 wmciv 스프라이트가 아니라 퍼블 PNG(dp_02_08_*)라
 * 아이콘 칸(퍼블 .sz32) 대신 이미지 칸을 따로 둔다. 크기는 sz32와 같은 2rem. */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li .wm-legend-img {
    width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li .wm-legend-img img {
    max-width: 100%; max-height: 100%;
}
/* 스코프 밖 범례(홍수 전용 ↔ 녹조 전용)는 감춘다 — 토글은 monitorUI.js */
[data-wm-legend-scope].wm-scope-off { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
 * 홍수현황판 댐·보·강수량 탭 표 스크롤
 *
 * 퍼블은 결과리스트 높이(calc(100% - 9.125rem))를 네 탭 모두에 주지만,
 * 그 안의 .wm-sts-table-wrap 높이는 **수위 탭에만** 준다
 * (`.wm-sts-cont-waterlevel … .wm-sts-table-wrap{height: calc(100% - 2rem)}`).
 * 나머지 세 탭은 table-wrap 높이가 auto라 표가 부모보다 길어져도
 * overflow:auto가 발동하지 않고, 대신 상위 .wm-status-comm-tab-detail{overflow:hidden}에
 * **잘려서** 보인다 — 스크롤도 안 되고 뒤쪽 행은 볼 수 없다.
 * 수위 탭이 2rem을 빼는 건 그 탭에만 있는 정렬 라디오(.wm-status-sort-cont) 높이
 * 때문이고 나머지 탭에는 그 줄이 없으므로 100%가 맞다.
 * (퍼블 파일은 재납품 시 교체되므로 수정하지 않고 여기서 덮는다.)
 * ══════════════════════════════════════════════════════════════════ */
body .wm-status_wrap .wm-status-content .wm-sts-cont-dam .wm-status-search-resultlist .wm-sts-table-wrap,
body .wm-status_wrap .wm-status-content .wm-sts-cont-weir .wm-status-search-resultlist .wm-sts-table-wrap,
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-status-search-resultlist .wm-sts-table-wrap {
    height: 100%;
    overflow: auto;
}

/* ══════════════════════════════════════════════════════════════════
 * 컬럼 폭 고정 표(.wm-sts-fixed-table) — 홍수 보 탭, 녹조 4탭
 *
 * 폭은 sMonitor.jsp 의 <col style="width:%"> 가 정한다. 자동 레이아웃이면 행을 클릭해
 * 지점명 뒤에 '그래프'·추천/대기 칩(monitorChart.css)이 붙을 때 첫 컬럼이 넓어지고
 * 나머지 컬럼이 밀린다. 고정 레이아웃에서는 폭이 모자라면 칩·긴 지점명·헤더 단위가
 * 다음 줄로 내려간다(퍼블 표 규칙의 nowrap 을 이 표에서만 푼다).
 * ══════════════════════════════════════════════════════════════════ */
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table.wm-sts-fixed-table {
    table-layout: fixed;
}
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table.wm-sts-fixed-table thead tr th span,
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table.wm-sts-fixed-table tbody tr td:first-child .wm-poi-tit {
    flex-wrap: wrap;
    white-space: normal;
    overflow-wrap: anywhere;
    row-gap: 0.125rem;
}

/* 정지 아이콘 대체 글리프 — 스프라이트에 wmciv190 그림이 없다.
 * 퍼블이 채워주면 이 블록만 지우면 된다. */
body .wm-status_wrap .wm-sts-pause-btn .wm-civdsb-icon.wmciv190 {
    background-image: none;
    position: relative;
}
/* 치수는 스프라이트 글리프(24px 버튼에서 약 11.5px)에 맞춘 값이다 */
body .wm-status_wrap .wm-sts-pause-btn .wm-civdsb-icon.wmciv190::before,
body .wm-status_wrap .wm-sts-pause-btn .wm-civdsb-icon.wmciv190::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 0.25rem;
    height: 0.75rem;
    transform: translateY(-50%);
    background: currentColor;
    border-radius: 0.0625rem;
}
body .wm-status_wrap .wm-sts-pause-btn .wm-civdsb-icon.wmciv190::before { left: 25%; }
body .wm-status_wrap .wm-sts-pause-btn .wm-civdsb-icon.wmciv190::after  { right: 25%; }

body .wm-status_wrap .wm-sts-pause-btn { color: var(--c-wt-gr06, rgba(255,255,255,0.6)); }
body .wm-status_wrap .wm-sts-pause-btn.on { color: var(--c-wt, #fff); }

/* 시트 닫힘 시 헤더 탭 비활성 표시 — `.on`은 monitorPubUI 소유라
 * 두고 표시만 죽인다. `.wm-sheet-closed`는 monitorUI.js가 붙인다. */
@media (max-width: 767.98px) {
    body .wm-status_wrap .wm-status-header-tab.wm-sheet-closed button.on {
        background: transparent;
        color: var(--c-wt-gr06, rgba(255, 255, 255, 0.6));
        font-weight: normal;
    }
    body .wm-status_wrap .wm-status-header-tab.wm-sheet-closed button.on::after {
        display: none;
    }
}

/* OL 축척(ol.control.ScaleLine) — 모바일에선 하단 컨트롤바(4rem) 바로 위에 고정한다.
 * OL 기본값(bottom:8px)은 그 바에 가린다. */
@media (max-width: 767.98px) {
    body .wm-status_wrap .ol-scale-line {
        left: 0.5rem;
        bottom: 4.5rem;
        top: auto;
        right: auto;
    }
}