/***********************************************************************************
 * SYSTEM      : 현황판 그래프 영역 전용 스타일 (신설)
 * DESCRIPTION : monitorChart.js가 그리는 복합차트의 **컨테이너 크기**만 담당한다.
 *               차트 내부(축·시리즈·툴팁) 스타일은 Highcharts 옵션이 갖고 있고,
 *               여기서는 "얼마나 큰 상자에 그릴 것인가"만 정한다.
 *
 * 분리 이유   : 퍼블 원본(wm-status.css / wm-status-mo.css)은 재납품 시 통째로 교체되므로
 *               **절대 수정하지 않는다**. 그렇다고 monitorUI.css(지도 오버레이 전용)에
 *               섞으면 성격이 다른 규칙이 뒤엉키므로 차트 전용 파일을 신설했다.
 *               로드 순서상 퍼블 CSS 뒤에 오므로 동순위에서 우선한다.
 *
 * 배경        : 퍼블 `.wm-status-graph-box`(wm-status-mo.css:144~148)는
 *                 display:flex; justify-content:center; align-items:flex-start;
 *               만 주고 **높이를 주지 않는다**. Highcharts는 렌더 대상의 부모 크기를 재서
 *               캔버스를 만들기 때문에, 높이가 auto이고 flex 아이템이 늘어나지 않으면
 *               차트가 보이지 않는다.
 *
 * 레이아웃    : 카테고리 간 누적은 세로 분할이 아니라 **한 영역 겹침**으로
 *               구현했다. 축만 여러 개 겹칠 뿐 구획이 늘지 않으므로
 *               컨테이너 높이는 퍼블 기본값(28rem) 고정이다.
 ***********************************************************************************/

/* ── 그래프 상자 크기 확정 ─────────────────────────────────────
 * 퍼블 셀렉터 체인을 그대로 따라가 특이도를 맞춘 뒤 필요한 것만 덮는다. */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left .wm-status-graph-box {
    height: 100%;
    min-height: 10rem;      /* 컨테이너 높이가 확정되므로 바닥값만. 크면 컨테이너를 되레 밀어낸다 */
    align-items: stretch;   /* flex-start면 차트 div 높이가 0이 된다 */
}
/* Highcharts가 만드는 차트 div — flex 아이템 폭 붕괴 방지 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left .wm-status-graph-box > * {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

/* ── 좌측 패널을 flex 컬럼으로 (핵심) ──────────────────────────
 * 퍼블은 표 영역 높이를 `calc(100% - 30.75rem)`로 **고정 계산**한다
 * (= 탭줄 2.75rem + 그래프 28rem). 그래프 높이가 pane 수에 따라 변하는 순간
 * 이 식이 깨져 합이 100%를 넘고, 패널이 화면 밖으로 밀려난다.
 * → 높이를 손으로 빼는 대신 flex가 나눠 갖게 한다. 표 영역이 남은 공간을
 *   흡수하므로 그래프가 커져도 패널 총높이는 100%를 넘지 않는다.
 * 적용 범위는 홍수 컨테이너로 한정한다 — 녹조 패널은 그래프가 28rem 고정이라
 * 퍼블 계산이 그대로 맞고, 건드리면 오히려 회귀가 된다. */
/* ⚠️ 특이도 주의 — monitorUI.css §1의 상단 탭 전환 규칙
 *      `... .wm-status-content > [data-wm-group="물재해"][data-wm-detail].on { display: block; }`
 *    가 (0,5,2)로, 단순한 `.wm-status-flood-container`(0,3,2)를 **이긴다**.
 *    그래서 flex 선언이 무시되고 display:block이 남아 flex 레이아웃이 아예 적용되지 않았다
 *.
 *    같은 속성 선택자를 붙여 (0,6,2)로 올려 확실히 이기게 한다.
 *    녹조 컨테이너는 건드리지 않는다 — 그쪽은 display:block 그대로가 맞다. */
/* ⚠️ 992px 이상 한정 — 아래는 '패널 높이가 확정된 PC' 전제다. 시트 구간에 걸면 표 영역이
 * min-height까지 눌려 퍼블 calc()가 음수가 되고 표가 사라진다. */
@media (min-width: 992px) {
body .wm-status_wrap main .wm-status-content > .wm-status-flood-container[data-wm-group="물재해"][data-wm-detail].on {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body .wm-status_wrap main .wm-status-content .wm-status-flood-container > .wm-status-comm-tab-title {
    flex: 0 0 auto;
}
body .wm-status_wrap main .wm-status-content .wm-status-flood-container > .wm-status-comm-tab-detail.on {
    height: auto;          /* 퍼블 calc(100% - 30.75rem) 무력화 */
    /* ⚠️ flex-basis는 반드시 0 — `auto`로 두면 basis가 **콘텐츠 높이**가 되어
     * 관측소 표(1,000행 이상)만큼 늘어나고 그 아래 그래프가 화면 밖으로 밀려난다
     *.
     * basis 0 + grow 1 이어야 "남는 공간만 차지"가 된다. */
    flex: 1 1 0;
    min-height: 8rem;      /* 표가 완전히 눌리지 않도록 최소치 확보 */
    overflow: hidden;      /* 스크롤은 내부 .wm-sts-table-wrap이 담당 */
}
body .wm-status_wrap main .wm-status-content .wm-status-flood-container > .wm-status-graph-container {
    flex: 0 0 auto;        /* 지정 높이를 지킨다 — 표에 밀려 사라지지 않게 */
}
}

/* ── 그래프 높이 ──────────────────────────────────────────────
 * 강수·수위·댐·보를 **한 영역에 겹쳐** 그리므로 세로 분할이 없다.
 * 따라서 높이는 퍼블 기본값(28rem) 그대로 두고, 낮은 화면에서만 낮춘다.
 * (pane 수에 따라 높이를 키우던 규칙은 겹침 렌더로 전환되며 죽어 제거했다.) */
@media (max-width: 991px) {
    body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left .wm-status-graph-box {
        min-height: 12rem;
    }
}
@media (max-width: 576px) {
    body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left .wm-status-graph-box {
        min-height: 11rem;
        padding: 0.5rem 0.25rem;
    }
}
@media (orientation: landscape) and (max-height: 500px) {
    body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container {
        height: 22rem;
    }
    body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left .wm-status-graph-box {
        min-height: 9rem;
    }
}

/* ── 누적 제어 UI ──────────────────────────────────────────────
 * '전체 지우기' 버튼은 monitorChart.js가 제목 옆에 주입한다(퍼블 마크업 무수정).
 * JS의 인라인 style 대신 여기 클래스로 두면 테마 변경 시 한 곳만 고치면 된다. */
.wm-status-graph-container [data-fd-graph-clear] {
    margin-left: 0.5rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.6875rem;
    line-height: 1.4;
    cursor: pointer;
    color: var(--c-wt, #fff);
    opacity: 0.75;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.25rem;
    transition: var(--wm-transition-normal, 0.2s);
}
.wm-status-graph-container [data-fd-graph-clear]:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

/* ── 그래프에 올라간 지점 표시 ─────────────────────
 * 탭을 옮겨 다니며 카테고리별로 지점을 고르는 구조라, 다른 탭을 다녀오면
 * 현재 그래프에 올라간 행을 상시 표시해 "이 탭에서 뭘 골랐는지"를 드러낸다.
 * 배선: monitorChart.js가 'monitor:graph-stack' 발행 → monitorContent.js가 .is-graphed 부여.
 * `.is-selected`(지도 클릭 시 일시 하이라이트)와는 다른 축이라 스타일도 구분한다 —
 * 선택은 '방금 본 것', 그래프 표시는 '지금 올라가 있는 것'. */
main .wm-sts-table-wrap table tbody tr.is-graphed > td:first-child,
main .wm-sts-table-wrap table tbody tr.is-graphed > th:first-child {
    box-shadow: inset 3px 0 0 var(--c-statusp-lv1, #75c868);
}
main .wm-sts-table-wrap table tbody tr.is-graphed {
    background-color: rgba(117, 200, 104, 0.12);
}
/* 그래프에 올라가 있다는 뜻의 작은 표식 — 지점명 뒤에 붙인다 */
main .wm-sts-table-wrap table tbody tr.is-graphed > td:first-child .wm-poi-tit::after,
main .wm-sts-table-wrap table tbody tr.is-graphed > td:first-child > span::after {
    content: '그래프';
    margin-left: 0.375rem;
    padding: 0 0.25rem;
    font-size: 0.625rem;
    line-height: 1.5;
    border-radius: 0.1875rem;
    color: var(--c-statusp-lv1, #75c868);
    border: 1px solid var(--c-statusp-lv1, #75c868);
    opacity: 0.9;
    flex: 0 0 auto;
}
/* 녹조 수위 탭 보조 칩(추천·대기) — '그래프' 칩과 같은 모양으로 그 뒤에 붙인다.
 * `.wm-poi-tit` 가 flex 라 order 로 ::after('그래프')보다 뒤에 세운다. */
main .wm-sts-table-wrap table tbody tr td .wm-poi-tit .wm-agwl-tag {
    order: 1;
    margin-left: 0.25rem;
    padding: 0 0.25rem;
    font-size: 0.625rem;
    line-height: 1.5;
    border-radius: 0.1875rem;
    border: 1px solid currentColor;
    background: transparent;
    color: var(--c-blue-txt, #6ab0ff);
    opacity: 0.9;
    flex: 0 0 auto;
}
main .wm-sts-table-wrap table tbody tr td .wm-poi-tit .wm-agwl-tag.is-pending {
    color: var(--c-gr4, #c9ced6);
}
/* 선택 하이라이트가 함께 걸리면 선택 쪽이 우선(더 강한 신호) */
main .wm-sts-table-wrap table tbody tr.is-graphed.is-selected {
    background-color: rgba(74, 163, 255, 0.38) !important;
}

/* ── 선택 지점 칩 ─────────────────────────────────
 * 그래프 제목 슬롯([data-fd-graph-title])에 monitorChart.js가 렌더한다.
 * 기존 "○○ 외 N개" 표기를 대체 — 카테고리 라벨·색을 함께 보여 "수위=어디, 댐=어디"가
 * 한눈에 읽히고, ×로 개별 제거가 된다. 색은 --chip-color로 카테고리마다 주입된다. */
/* 퍼블은 이 슬롯에 파란 배경(--c-bluem6) + 좌우 1rem 패딩을 준다(단일 지점명 배지용).
 * 이제 안에 칩이 여러 개 들어가므로 파란 덩어리가 칩을 가려 어색하다 → 배경/패딩 해제.
 * 퍼블 셀렉터와 같은 체인을 써서 특이도를 맞춘다(wm-status-mo.css:125). */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    vertical-align: middle;
    padding: 0;
    background: transparent;
    height: auto;
}
.wm-fd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 14rem;
    padding: 0.05rem 0.15rem 0.05rem 0.4rem;
    font-size: 0.6875rem;
    line-height: 1.6;
    border-radius: 0.75rem;
    color: var(--c-wt, #fff);
    background: color-mix(in srgb, var(--chip-color, #4db8ff) 22%, transparent);
    border: 1px solid var(--chip-color, #4db8ff);
}
.wm-fd-chip > b {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--chip-color, #4db8ff);
}
.wm-fd-chip .wm-fd-chip-nm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wm-fd-chip > button {
    flex: 0 0 auto;
    width: 1rem; height: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin-left: 0.125rem;
    font-size: 0.8125rem; line-height: 1;
    cursor: pointer;
    color: var(--c-wt, #fff);
    opacity: 0.65;
    background: transparent;
    border: none;
    border-radius: 50%;
}
.wm-fd-chip > button:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.22);
}

/* color-mix 미지원 브라우저 폴백 — 반투명 흰 배경으로 대체 */
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
    .wm-fd-chip { background: rgba(255, 255, 255, 0.12); }
}

/* 전체 지우기 버튼 기본 간격 (인라인에서 옮겨옴) */
[data-fd-graph-clear] { margin-left: 0.5rem; }

/* 좁은 화면 그래프 헤더 — 퍼블은 height:1.5rem 한 줄 고정이라 칩이
 * 여러 개면 넘친다. 두 줄로 나눈다: [제목 … 전체지우기] / [칩 전체폭] */
@media (max-width: 767.98px) {
    body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit {
        height: auto;
        align-items: flex-start;
    }
    body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit > p {
        flex: 1 1 auto;
        flex-wrap: wrap;
        min-width: 0;
        height: auto;
        row-gap: 0.35rem;
    }
    body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform {
        order: 3;
        flex: 1 0 100%;
    }
    body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit [data-fd-graph-clear] {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
        white-space: nowrap;
    }
    .wm-fd-chip { max-width: 100%; }
}

/* 툴팁이 버텀시트에 가리는 문제 — tooltip.outside:true라 body 직속에 그려지는데
 * Highcharts가 주는 z-index는 3이고 시트는 5~105(mobilePopupZIndex)라 뒤로 숨는다. */
.highcharts-tooltip-container { z-index: 10000 !important; }

/* 칩이 늘어나면 그래프 제목이 눌려 잘렸다(녹조판 '조류 측정 추이' → '조류 측정 추(').
 * 퍼블 규칙이 .wm-sts-inform 에 width:100% 를 줘서 제목(strong, flex:0 1 auto)이 먼저 줄어든다.
 * 제목은 짧고 고정이므로 줄이지 않고, 남는 폭을 칩(줄바꿈 가능)이 갖게 한다.
 * 퍼블 셀렉터와 같은 체인을 써서 특이도를 맞춘다(wm-status-mo.css:176). 홍수·녹조 공통 적용. */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit > p > strong {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 그래프 조회 간격·구간 선택 버튼 (monitorChart.js가 헤더에 주입)
 * 1단 = 간격(10분/1시간/일별), 2단 = 그 간격의 구간. 간격을 누르면 2단이 다시 그려진다.
 *
 * 디자인 근거 — 이 보드의 "선택된 버튼" 관용구는 **파란 단색 채움**이다:
 *   지도 툴바(wm-status.css:780) 기본 var(--c-bluem8) / 활성 var(--c-bluem6)
 *   헤더 탭(wm-status-mo.css:18)  비활성 opacity .5 → 활성 1
 * 두 관용구를 합쳐 세그먼트 컨트롤로 만든다 — 그룹은 --c-bluem8 트랙,
 * 활성 버튼만 --c-bluem6 채움, 비활성은 투명 + opacity로 물러난다.
 * 트랙이 있어 어디까지가 한 묶음인지도 자연히 드러난다. */
/* ⚠️ 특이도 주의 — 아래 규칙은 전부 `.wm-status_wrap` 접두어가 필요하다.
 *   reset.css   `.wm-status_wrap button { padding: 0 }`            → (0,1,1)
 *   wm-status-mo `body .wm-status_wrap button { font-size: 15px }` → (0,1,2) @max-576px
 * 접두어 없는 `.wm-fd-spanbtn`(0,1,0)은 둘 다에게 져서 **패딩이 0, 모바일 글자가 15px**이 됐다
 *.
 * `.wm-status_wrap .wm-fd-spanbtn`(0,2,0)이면 클래스 수가 많아 우선한다. */
.wm-status_wrap .wm-fd-ctrls {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-left: 0.625rem;
}
.wm-status_wrap .wm-fd-spanbar {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
}
.wm-status_wrap .wm-fd-spangroup {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    padding: 0.1875rem;
    border-radius: 0.5rem;
    /* 트랙은 그래프 박스(.wm-status-graph-box = rgba(255,255,255,.1))와 같은 계열의
     * 흰색 반투명. 처음엔 지도 툴바의 진한 남색(--c-bluem8 #243ea0)을 썼는데,
     * 주변이 전부 밝은 반투명 톤이라 진한 단색을 쓰면 버튼 묶음만 덩어리로 튄다. */
    background: rgba(255, 255, 255, 0.08);
}
.wm-status_wrap .wm-fd-spangroup:empty { display: none; }
.wm-status_wrap .wm-fd-spanbtn {
    /* 글자를 10px로 낮추고 여백을 키워 상자 안에 숨 쉴 자리를 준다.
     * 글자가 상자를 꽉 채우면 "텍스트만 크다"는 인상을 준다. */
    padding: 0.25rem 0.625rem;
    font-size: 0.625rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: pointer;
    color: #9fb0c3;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    transition: var(--wm-transition-normal, all 0.15s ease);
}
.wm-status_wrap .wm-fd-spanbtn:hover {
    color: #e6edf5;
    background: rgba(255, 255, 255, 0.1);
}
.wm-status_wrap .wm-fd-spanbtn.on {
    /* 활성은 색이 아니라 **밝기**로 구분한다 — 헤더에 이미 칩(파랑·보라·초록)이 있어
     * 버튼까지 채도를 쓰면 색이 서로 싸운다. 흰색 반투명이 주변과 같은 계열이면서 또렷하다. */
    color: #ffffff;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.22);
}
/* '전체 지우기' — 칩 **오른쪽**에 놓인다(퍼블 원본 위치).
 * 간격/구간 버튼 옆에 붙이면 "조회 조건"과 "선택 해제"가 한 덩어리로 보여 성격이 다른 둘이 섞인다.
 * 톤은 버튼군과 맞추되 테두리만 있는 약한 형태로 둔다. 인라인 스타일은 JS가 주므로 여기서 덮어쓴다. */
.wm-status_wrap .wm-sts-inform [data-fd-graph-clear] { flex: 0 0 auto; }
.wm-status_wrap [data-fd-graph-clear] {
    padding: 0.25rem 0.625rem !important;
    font-size: 0.625rem !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    color: #9fb0c3 !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 0.375rem !important;
}
.wm-status_wrap [data-fd-graph-clear]:hover {
    color: #e6edf5 !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 헤더 반응형 — **어떤 폭에서도 한 줄**을 유지한다
 *
 * 문제: 헤더 한 줄에 [제목][버튼][칩 N개]를 넣는데 칩은 개수도 이름 길이도 가변이라
 *       좁아지면 줄바꿈되며 레이아웃이 무너진다(1280px에서 헤더가 24px → 46px).
 *
 * 해법: 칩 영역에 **남는 공간만** 주고(flex:1 1 auto + min-width:0) 그 안에서
 *       가로 스크롤시킨다. 칩이 몇 개든 **헤더 높이는 한 줄로 고정**된다.
 *       좁은 화면에서는 칩의 **지점명을 감추고** 카테고리 배지(수위/댐/보)와 ×만 남긴다 —
 *       제목을 숨기는 것보다 낫다. 제목은 이 영역이 무엇인지 말해주는 고정 정보인 반면,
 *       지점명은 칩을 눌러 확인하거나 차트 범례에서 그대로 읽을 수 있기 때문이다.
 * 적용 범위: 홍수판·녹조판 공통.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ 한 줄 유지의 전제 — 퍼블 CSS가 좁은 폭에서 헤더 `p`를 **flex-direction:column** 으로
 * 바꾼다. 그래서 자식이 무조건 세로로 쌓이며, flex-wrap으로는 제어할 수 없다.
 * (제목 y1168 / 컨트롤 y1206 / 칩 y1236 — 줄바꿈이 아니라 세로 배치였다)
 * 가로 배치로 되돌려야 한 줄이 된다. 넘치는 몫은 아래 칩 영역의 가로 스크롤이 흡수한다. */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit > p {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 0.4rem;
}

/* 칩 영역 — 남는 폭만 차지하고 넘치면 가로 스크롤(줄바꿈 금지) */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;               /* flex 항목의 기본 min-width:auto가 축소를 막는다 */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;      /* 헤더에 막대가 뜨면 지저분하다 */
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform::-webkit-scrollbar { height: 0; }
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform .wm-fd-chip {
    flex: 0 0 auto;
    max-width: 12rem;
}
/* 헤더 첫 줄이 흐트러지지 않게 — 퍼블 규칙의 flex:1을 무력화 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit > p > button {
    flex: 0 0 auto;
}

@media (max-width: 1279.98px) {
    /* 태블릿·좁은 PC — 지점명 폭을 줄여 칩 개수를 더 담는다 */
    body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform .wm-fd-chip {
        max-width: 8rem;
    }
}

@media (max-width: 767.98px) {
    /* 모바일 — 지점명을 감추고 카테고리 배지 + ×만 남긴다(제목은 유지).
     * 칩 하나가 약 34px로 줄어 3개를 넣어도 한 줄에 들어간다. */
    body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-fd-chip .wm-fd-chip-nm {
        display: none;
    }
    body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform .wm-fd-chip {
        max-width: none;
        gap: 0.125rem;
        padding: 0.05rem 0.1rem 0.05rem 0.25rem;
        font-size: 0.625rem;
    }
    body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-fd-chip > button {
        width: 0.875rem; height: 0.875rem; font-size: 0.75rem; margin-left: 0;
    }
    /* 컨트롤은 한 단계 축소하고 **오른쪽**으로 붙인다 — 아래 칩 줄과 우측 라인을 맞추기 위해서다.
     * (제목은 왼쪽, 컨트롤·칩은 오른쪽 — 두 줄의 오른쪽 끝이 같은 세로선에 선다) */
    .wm-status_wrap .wm-fd-ctrls { margin-left: auto; gap: 0.3125rem; }
    .wm-status_wrap .wm-fd-spanbar { gap: 0.25rem; }
    .wm-status_wrap .wm-fd-spangroup { padding: 0.125rem; gap: 0.125rem; }
    .wm-status_wrap .wm-fd-spanbtn { padding: 0.2rem 0.5rem; font-size: 0.625rem; }
    /* '전체 지우기'는 칩 컨테이너 **안**(칩들 뒤)에 들어가므로 별도 배치가 필요 없다.
     * 이 파일 위쪽에 형제 배치를 전제한 order/margin-left:auto 규칙이 있어 여기서 무력화한다. */
    body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit [data-fd-graph-clear] {
        order: 0;
        margin-left: 0.25rem;
    }
    .wm-status_wrap .wm-sts-inform [data-fd-graph-clear] { flex: 0 0 auto; }
    .wm-status_wrap [data-fd-graph-clear] { padding: 0.2rem 0.5rem !important; font-size: 0.625rem !important; }
    /* 제목은 한 단계 줄여 자리를 만든다 */
    body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit > p > strong {
        min-width: 0;
        font-size: 0.75rem;
    }

    /* 390px에서는 제목과 컨트롤만으로 헤더 폭이 차서 칩을 같은 줄에 넣을 수 없다.
     * → 모바일만 칩을 **전용 한 줄**로 내린다. 헤더도 한 줄, 칩 줄도 한 줄이라
     *   어느 쪽도 개행되지 않는다(총 2줄). 지점명은 위에서 이미 감췄으므로 줄이 짧다. */
    body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit > p {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }
    body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform {
        /* 칩 영역이 통째로 둘째 줄을 차지한다. '전체 지우기'는 이 안의 마지막 항목이라 함께 온다.
         * 정렬은 flex-end — 다른 화면과 같이 칩을 **오른쪽**에 붙인다. */
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        justify-content: flex-end;
    }
}