@charset "UTF-8";
/***********************************************************************************
* 생활 속 물모아 - 화면 스타일 (퍼블)
* DATE : 2026.06.16
* ※ 지도 위 검색/물의여정 패널은 본 화면 퍼블 제외
***********************************************************************************/

/* ═══════════════════════════════════════════════════════════════════
   ■ 레이어 상태(등급) 팔레트 — 색 변경은 "여기만" 수정하면 됨
   기준 문서 : doc/생활속물모아_범례_상태값_정의.md (설계서 v1.5 추출)
   변수 규칙 : --lw-{레이어}{단계} = 진한색(동그라미·범례 바)
              --lw-{레이어}{단계}-bg = 연한색(상태박스·범례 칩 배경)
   ※ 설계서 원색이 형광이라 가독성 보정한 곳은 주석에 (보정) 표기
   ═══════════════════════════════════════════════════════════════════ */
:root {
    /* 등급 표시용 물방울 도형 — 색은 각 등급의 진한색(--c)이 마스크를 채운다.
       퍼블 제공 원본(물방울.svg) 그대로 사용. 도형을 바꾸려면 drop.svg 파일만 덮어쓰면 된다.
       상태박스·범례가 모두 이 하나를 공유한다 (녹조만 패턴이라 별도 파일 — 아래 lw_g_alg*) */
    --lw-drop: url("../images/svgicon/legend/drop.svg");

    /* ── 브랜드/UI 공통색 — JS 는 _LifeWater.cssColor('--lw-…') 로 읽는다 (하드코딩 금지) ──
       ※ 파랑 4종은 도입 시기가 달라 값이 미세하게 다름(같은 계열). 통일 시 여기 값만 바꾸면 됨 */
    --lw-primary:    #256EF4;   /* 주 파랑 (PSD) — 수치 강조·선택 동 강조·물의여정 선택 배지 */
    --lw-blue:       #2F6BFF;   /* UI 파랑 — 위치 핀·팝업 뱃지·입력 포커스 */
    --lw-blue-focus: #256BF3;   /* 선택/포커스 강조 — 토글 포커스·분야선택·카드 more */
    --lw-blue-deep:  #2563EB;   /* 진한 파랑 — 토글 ON·항목 건수 */
    --lw-green:      #25bd69;   /* 그린 — 수돗물도감 UI·물의여정 포인트 */
    --lw-green-brd:  #01aa4c;   /* 물의여정 기본 핀 테두리(생활속물정보) — 본체보다 진한 그린. 활성 핀(_on)은 #fff 유지 */

    /* ── 카테고리색 (좌측 그룹·마커·리스트팝업 칩) — PSD point 실측 ── */
    --lw-cat-conv:   #4DB4FF;   /* 생활편의 */
    --lw-cat-conv-txt: #1D8EE0; /* 생활편의 글씨(툴팁 분류명·리스트팝업 분류명) — 마커보다 진한 파랑 */
    --lw-cat-safety: #F77373;   /* 생활안심 */
    --lw-cat-safety-txt: #E65A5A; /* 생활안심 글씨(툴팁 분류명·리스트팝업 분류명) — 마커보다 진한 레드(가독성·명도대비) */
    --lw-cat-info:   #22B07D;   /* 생활속물정보 */

    /* ── 우리집수돗물 (tap) : 매우좋음 / 좋음 / 측정자료없음 — R_정보창.psd 기준 ── */
    --lw-tap1:    #1EB57A;  --lw-tap1-bg: #E8FCE9;   /* 매우좋음 (PSD) */
    --lw-tap2:    #F0BA4A;  --lw-tap2-bg: #FBF7DF;   /* 좋음 (R_정보창.psd 02-좋음 : color_좋음 #F0BA4A / 박스 #FBF7DF) */
    --lw-tap3:    #939393;  --lw-tap3-bg: #F4F5F6;   /* 측정자료없음 (PSD 배경, 물방울은 PSD 누락분 → 부적합과 동일 회색) */

    /* ── 가뭄단계 (drt) : 정상 / 관심 / 주의 / 경계 / 심각 — 물모아 가뭄 공식 팔레트 ── */
    --lw-drt1:    #72B66B;  --lw-drt1-bg: #E8FCE9;   /* 정상 (PSD) */
    --lw-drt2:    #1A4CFB;  --lw-drt2-bg: #ECF2FE;   /* 관심 (PSD) */
    --lw-drt3:    #FEFF3A;  --lw-drt3-bg: #FBF7DF;   /* 주의 (PSD) */
    --lw-drt4:    #FDAB25;  --lw-drt4-bg: #fff0e4;   /* 경계 (PSD) */
    --lw-drt5:    #E6171F;  --lw-drt5-bg: #ffecec;   /* 심각 (PSD) */

    /* ── 미세먼지 (air) : 좋음 / 보통 / 나쁨 / 매우나쁨 / 데이터없음 ── */
    --lw-air1:    #0040D3;  --lw-air1-bg: #EEF4FF;   /* 좋음 (배경 PSD) */
    --lw-air2:    #35B847;  --lw-air2-bg: #E8FCE9;   /* 보통 (배경 PSD) */
    --lw-air3:    #E8BE1E;  --lw-air3-bg: #FBF7DF;   /* 나쁨 (배경 PSD) */
    --lw-air4:    #C60F14;  --lw-air4-bg: #ffecec;   /* 매우나쁨 (배경 PSD) */
    --lw-air5:    #A9B0B7;  --lw-air5-bg: #F4F5F6;   /* 데이터없음 (설계서 #ADADAD → 보정) */

    /* ── 동파위험정보 (frz) : 관심 / 주의 / 경계 / 심각 ── */
    --lw-frz1:    #7DBE3B;  --lw-frz1-bg: #F1F8E9;   /* 관심 (설계서 #92D050 → 보정) */
    --lw-frz2:    #E4B700;  --lw-frz2-bg: #FDF6DC;   /* 주의 (설계서 #FFFF00 → 보정) */
    --lw-frz3:    #FF9F50;  --lw-frz3-bg: #FFF2E7;   /* 경계 */
    --lw-frz4:    #E10000;  --lw-frz4-bg: #FCEAEA;   /* 심각 */

    /* ── 녹조정보 (alg) : 미발령 / 관심 / 경계 / 대발령 ── */
    --lw-alg1:    #939393;  --lw-alg1-bg: #F4F5F6;   /* 미발령 (PSD) — 물방울은 패턴 SVG(legend/alg_none.svg) */
    --lw-alg2:    #FFFF3C;  --lw-alg2-bg: #FBF7DF;   /* 관심 (PSD) — 패턴 SVG(alg_watch.svg) */
    --lw-alg3:    #E7A05A;  --lw-alg3-bg: #fff0e4;   /* 경계 (PSD) — 패턴 SVG(alg_alert.svg) */
    --lw-alg4:    #C00000;  --lw-alg4-bg: #ffecec;   /* 대발령 (PSD) — 패턴 SVG(alg_bloom.svg) */

    /* ── 홍수정보 (fld) : 주의보 / 경보 ── */
    --lw-fld1:    #FF925C;  --lw-fld1-bg: #fff0e4;   /* 주의보 (PSD) */
    --lw-fld2:    #FF5C5C;  --lw-fld2-bg: #ffecec;   /* 경보 (PSD) */
    --lw-fld3:    #939393;  --lw-fld3-bg: #F4F5F6;   /* 없음 (PSD 03-없음 — 물방울은 다른 '없음' 계열과 동일 회색) */

    /* ── 적합/부적합 계열 (fit) : 물놀이시설 · 약수터 공용 — R_정보창.psd 기준 ── */
    --lw-fit1:    #5C96FF;  --lw-fit1-bg: #EEF4FF;   /* 적합 (PSD) */
    --lw-fit2:    #FF925C;  --lw-fit2-bg: #FAEBDE;   /* 부적합 (R_정보창(2).psd 20260730 : 회색 → 주황 계열. 물놀이·약수터 동일) */
    --lw-fit3:    #939393;  --lw-fit3-bg: #F4F5F6;   /* 미검사 (PSD 없음 — 회색 유지) */

    /* ── 단수정보 (wst) : 진행중 / 예정 / 최근종료 / 안내 ──
       PSD 에 없는 신규 세트 — 다른 레이어의 등급색을 재사용해 화면 전체 색감을 유지한다.
       (진행중=경보 빨강 / 예정=주의보 주황 / 종료=없음 회색 / 안내=UI 파랑) */
    --lw-wst-now:  #FF5C5C;  --lw-wst-now-bg:  #ffecec;   /* 진행중 — fld2(경보)와 동일 */
    --lw-wst-soon: #f75100;  --lw-wst-soon-bg: #fff0e4;   /* 예정 — fld1(주의보)과 동일 */
    --lw-wst-done: #939393;  --lw-wst-done-bg: #F4F5F6;   /* 최근 종료 — '없음' 계열 회색 */
    --lw-wst-info: #0b50d0;  --lw-wst-info-bg: #ECF2FE;   /* 안내(제주) — UI 파랑 계열 */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%;
    font-family: 'PretendardGOV', 'Pretendard GOV', 'Pretendard', 'Malgun Gothic', -apple-system, sans-serif;
    color: #1f2937; -webkit-font-smoothing: antialiased; }

/* 모바일 : 100vh 는 브라우저 툴바가 숨은 상태 기준(large viewport)이라 하단 바텀시트가 툴바에 가려짐
   → 실제 표시 높이인 100dvh 로 잡는다. dvh 미지원 구형 브라우저는 앞 선언(100vh)으로 폴백. */
.lw_wrap { display: flex; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: #f4f6f9; }

/* ===================== 좌측 패널 ===================== */
.lw_left { flex: 0 0 420px; padding: 20px 18px; background: #fff; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column;   /* 남는 세로여백을 섹션 간격에 균등 분배 + 푸터 하단 고정 */
    box-shadow: 2px 0 16px rgba(17, 24, 39, 0.06); z-index: 5; }
/* 여러 auto-margin = 남는 공간을 균등하게 나눔 → 섹션 간격이 고르게 벌어지고 푸터는 맨 아래 (스크롤 시엔 auto가 0이 되어 최소간격만) */
.lw_left > .lw_group, .lw_left > .lw_foot { margin-top: auto; }
/* ── 스크롤바 (좌측 패널 + 팝업 스크롤 영역 공통) — 여기만 수정하면 전 영역이 함께 바뀐다 ──
      대상 : 좌측 메뉴 / 정보팝업 본문(물의여정·모바일 시트 등) / 리스트팝업 목록 / 수돗물도감 본문 / 분야선택 목록 */
.lw_left::-webkit-scrollbar,
.lw_infopop_body::-webkit-scrollbar,
.lw_lp_list::-webkit-scrollbar,
.lw_twb_body::-webkit-scrollbar,
.lw_fieldpop_list::-webkit-scrollbar { width: 8px; }
.lw_left::-webkit-scrollbar-thumb,
.lw_infopop_body::-webkit-scrollbar-thumb,
.lw_lp_list::-webkit-scrollbar-thumb,
.lw_twb_body::-webkit-scrollbar-thumb,
.lw_fieldpop_list::-webkit-scrollbar-thumb { background: #d6dbe2; border-radius: 8px; border: 2px solid #fff; }
.lw_left::-webkit-scrollbar-thumb:hover,
.lw_infopop_body::-webkit-scrollbar-thumb:hover,
.lw_lp_list::-webkit-scrollbar-thumb:hover,
.lw_twb_body::-webkit-scrollbar-thumb:hover,
.lw_fieldpop_list::-webkit-scrollbar-thumb:hover { background: #c0c7d1; }
/* 데이터 로딩 중 메뉴 잠금 (재클릭 방지) */
.lw_left.is_locked, .lw_sheet.is_locked { pointer-events: none; opacity: .6; }   /* 로딩 중 재클릭 방지(모바일은 레이어 시트) */

/* 로고 (글자 포함 이미지 — 좌패널 상단 왼쪽 정렬, 시안 기준) */
.lw_brand { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 14px; }   /* PSD 로고 70→내위치 89 */
.lw_logo_img { width: 200px; height: 42px; max-width: 100%; display: block; margin: 0 0 0 8px; }   /* 실제 이미지 크기 200x42, 좌측 8px 여백 (디자이너 전달 2026-08-25) */
/* 로고 아래 안내 멘트 (시안 색상 #f4f8ff) */
.lw_brand_desc { position: relative; margin: 0 0 14px; padding: 11px 44px 11px 20px; background: #eaf0ff; border-radius: 22px;   /* 좌우 여백 20px (디자이너 전달 2026-08-25). 우측은 ⓘ 자리만큼 넓힌다 */
    font-size: 13px; font-weight: 400; color: #314760; line-height: 1.45; }

/* 기준 시점 안내 ⓘ + 말풍선 (기획 2026-09-21, 아이콘 전달 0921_생활속물모아tooltip/icon_info.svg)
   ⓘ 는 안내 박스 안 우측에 절대배치한다 — 박스를 flex 로 바꾸면 기존 텍스트 흐름·줄바꿈이 달라진다.
   말풍선은 박스 「아래」로 편다(위쪽은 로고라 자리가 없다). */
.lw_guide_btn { position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.lw_guide_btn img { width: 18px; height: 18px; display: block; max-width: none; }   /* 공통 img{max-width:100%} 가 flex 안에서 눌러버린다 */
.lw_guide_btn:focus-visible { outline: 2px solid var(--lw-blue); outline-offset: 2px; border-radius: 50%; }

.lw_guide_tip { position: absolute; left: 0; right: 0; top: calc(100% + 9px); z-index: 20;
    padding: 12px 16px 12px 30px; background: #fff; border: 1px solid #d3deff;
    border-radius: 8px;   /* 디자이너 기준 : 라운드 8px 고정 (전달 2026-09-21) */
    box-shadow: 0 8px 20px rgba(17,24,39,0.12);
    font-size: 13px; line-height: 1.55; text-align: left; word-break: keep-all;
    color: #374151;   /* 상단 「오늘의 물모아」 날짜(.lw_ch_date)와 같은 색 (기획 2026-09-21) */
    text-indent: -14px;   /* ※ 다음 줄이 ※ 아래가 아니라 글자 아래로 들어가게 (내어쓰기) */
    /* pointer-events:none 필수 — opacity:0 요소는 그대로 클릭을 먹는다(안내 전용이라 받을 이유도 없다).
       WARNING: visibility 전환은 timing-function 을 빼면 「0s .16s」가 duration 으로 잘못 파싱돼
                hidden 으로 안 돌아온다(실측 2026-09-21). linear 를 반드시 적는다. */
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
/* 말풍선 꼬리 — 위를 향한다. ⓘ 중심 = 우측에서 14 + 10 = 24px.
   평평한 면에 앉으려면 「모서리 반지름 8 + 꼬리 반대각선 7.8 = 15.8px」 이상 필요하므로 24px 는 안전하다. */
.lw_guide_tip::before { content: ''; position: absolute; right: 24px; top: -6px;
    width: 11px; height: 11px; margin-right: -5.5px; background: #fff;
    border-left: 1px solid #d3deff; border-top: 1px solid #d3deff;
    transform: rotate(45deg); }
/* 여는 방법 3가지
   · 데스크톱 : 마우스 호버 (CSS 만으로)
   · 키보드   : Tab 포커스 — :focus 가 아니라 :focus-visible 이어야 한다.
                :focus 로 두면 마우스 클릭에도 포커스가 남아 아래 토글과 상태가 엇갈린다
   · 터치     : 탭 → JS 가 .is_tip_open 을 붙인다 (한 번 더 탭하거나 바깥을 누르면 닫힘).
                모바일은 hover 가 없고, 포커스만으로는 「닫기」 수단이 없어 토글이 필요하다 */
.lw_guide_btn:focus-visible ~ .lw_guide_tip,
.lw_brand_desc.is_tip_open .lw_guide_tip {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* 호버는 「진짜 마우스」에만 건다.
   WARNING: 미디어 질의 없이 :hover 를 두면 터치 기기에서 탭 뒤 hover 가 들러붙어,
            토글로 닫아도(.is_tip_open 제거) 말풍선이 그대로 떠 있다(실측 2026-09-21). */
@media (hover: hover) and (pointer: fine) {
    .lw_guide_btn:hover ~ .lw_guide_tip {
        opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}

/* 내 위치 버튼 — 「위치 선택」 제목 우측. 누르면 내 위치로 위치선택 세팅 + 조회
   (제목줄 안에 들어가므로 예전 위치바(46x45)보다 작게. lw_sec_tit 가 flex/space-between 이라 자동 우측 정렬) */
.lw_myloc { flex: 0 0 auto; width: 31px; height: 31px; padding: 0; border: none; border-radius: 50%;
    background: #ecf2fe; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform .12s; }
.lw_myloc:hover { transform: scale(1.08); }
.lw_myloc:active { transform: scale(0.94); }
.lw_myloc:focus-visible { outline: 2px solid var(--lw-blue-focus); outline-offset: 1px; }   /* 키보드 포커스 */
.lw_myloc_ico { display: block; width: 15px; height: 15px; }   /* 위치 십자선 SVG (원형 배경은 .lw_myloc) */

/* 섹션 (PSD: 그룹 간 26, 라벨→항목 13) */
.lw_sec { margin-bottom: 18px; }   /* 전체화면 세로 스크롤 방지용 간격 축소 (원 26) */
.lw_sec_tit { display: flex; align-items: center; justify-content: space-between;
    font-size: 16px; font-weight: 800; color: #111827; margin: 0 0 10px; line-height: 1; }
/* 섹션 타이틀 좌측 색막대 제거 (시안 기준) */
.lw_sec_more { display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    background: none; border: none; padding: 2px; border-radius: 6px; }   /* 목록 팝업 열기 버튼 */
.lw_sec_more img { display: block; width: 24px; height: 24px; }   /* 기본=회색 / 열림=파랑(lw_sec_more_on) */
.lw_sec_more:focus-visible { outline: 2px solid var(--lw-blue-focus); outline-offset: 1px; }   /* 키보드 포커스 */

/* 위치선택↔생활편의 구분선 (PSD B_line — 8px 옅은 회색 밴드, 좌패널 full-bleed) */
.lw_divider { height: 8px; background: #f4f5f6; margin: -5px -18px 13px; }   /* 간격 축소 (원 -9/18) */

/* 하단 로고 (PSD 하단 물모아 로고: top_line 1px 선(좌우 inset) + 정부 엠블럼 + 물모아 + 플랫폼명) */
.lw_foot { margin: 16px 0 2px; padding: 14px 0 2px; border-top: 1px solid #cdd1d5; }   /* 물의여정 바로 뒤 자연스러운 간격 (레퍼런스) */
.lw_foot_logo { display: block; height: 16px; width: auto; }   /* 디자이너 원본 205x16 */

/* 위치 선택 */
.sel_m { height: 43px; padding: 0 36px 0 13px; font-size: 15px; font-weight: 400; color: #1f2937;
    border: 1px solid #dce0e6; border-radius: 8px; background: #fff;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237b8595' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sel_m:focus { outline: none; border-color: var(--lw-blue); box-shadow: 0 0 0 3px rgba(47,107,255,.15); }
.sel_m:disabled { background-color: #f3f4f6; color: #9ca3af; cursor: default; }
.sel_full { width: 100%; margin-bottom: 8px; }
.lw_loc_row { display: flex; gap: 5px; }
.lw_loc_row .sel_m { flex: 1 1 0; min-width: 0; }
/* 검색 버튼 — 시안 기준 select(.sel_m) 와 같은 흰 배경 + 테두리 (예전 연파랑 #e8efff 에서 변경) */
.btn_areasel_view { flex: 0 0 42px; width: 42px; height: 43px; border: 1px solid #dce0e6; border-radius: 8px;
    background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .12s, border-color .15s; }
.btn_areasel_view:hover { background: #f4f8ff; border-color: #c3ccd8; }
.btn_areasel_view svg { display: block; }
.lw_search_ico { display: block; width: 18px; height: 18px; }

/* ----- 토글 항목 (2열 그리드) — PSD box 189x47 gap5, 아이콘 원형 31 ----- */
.lw_items { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }   /* 기본 2열 (원본) — 스크롤 시작 폭에서만 1열로 축소 */
.lw_item { display: flex; align-items: center; gap: 7px; padding: 7px 10px 7px 9px; height: 47px;
    border: 1px solid #cdd1d5; border-radius: 8px; background: #ffffff; min-width: 0;
    transition: transform .12s, box-shadow .12s, border-color .12s, background .12s; }
.lw_item:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(17,24,39,.07); }
.lw_item_ico { flex: 0 0 28px; width: 28px; height: 28px;   /* 색·모양은 타일 SVG 파일에 내장 (배경 없음) */
    display: flex; align-items: center; justify-content: center; }
.lw_item_ico img { width: 100%; height: 100%; display: block; }
/* 이름: 한 줄 우선(어절 단위 유지), 넘치면 줄바꿈(잘림 방지) */
.lw_item_nm { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 400; line-height: 1.3; color: #1e2124;
    white-space: normal; word-break: keep-all; }
.lw_item_cnt { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--lw-primary);
    background: #ffffff; border: 1px solid var(--lw-primary); padding: 1px 6px; border-radius: 11px; }
.lw_item_cnt:empty { display: none; }
.lw_item_badge { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; color: #b45309; background: #fef3c7;
    padding: 2px 7px; border-radius: 10px; }

/* 그룹별 아이콘 색상은 타일 SVG 파일에 내장되어 CSS 배경 불필요 (마커·툴팁·팝업과 통일) */

/* 활성(토글 on) 상태 강조 */
.lw_group_convenience .lw_item.is_on { border-color: #4db4ff; background: #eef8ff; }
.lw_group_safety      .lw_item.is_on { border-color: #f77373; background: #fff5f5; }
.lw_group_waterInfo   .lw_item.is_on { border-color: #25bd69; background: #f4fff9; }
.lw_group_safety      .lw_item.is_on .lw_item_cnt { color: var(--lw-primary); background: #ffffff; }

/* iOS 스타일 토글 스위치 */
.lw_switch { position: relative; flex: 0 0 30px; width: 30px; height: 20px; }   /* PSD 토글 30x20 */
.lw_switch input { opacity: 0; width: 0; height: 0; }
.lw_switch i { position: absolute; inset: 0; cursor: pointer; background: #cdd1d5; border-radius: 20px; transition: .2s; }
.lw_switch i::before { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px;
    background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.lw_switch input:checked + i { background: var(--lw-primary); }
.lw_switch input:checked + i::before { transform: translateX(10px); }
.lw_switch input:disabled + i { opacity: .45; cursor: default; }
/* 키보드 포커스 시에만 스위치에 포커스 링 표시(마우스 클릭 시엔 안 뜸) — 접근성 */
.lw_switch input:focus-visible + i { outline: 2px solid var(--lw-blue-focus); outline-offset: 2px; }

/* ===================== 지도 영역 ===================== */
.lw_map_area { position: relative; flex: 1 1 auto; min-width: 0; }
#mapDiv { width: 100%; height: 100%; background: #e9eef3; }

/* 선택 동 중앙 핀(point.svg) — 위로 살짝 튀었다 제자리로 돌아오는 hop 반복 */
.lw-emd-pin-wrap { pointer-events: none; }
.lw-emd-pin { display: block; width: 51.7px; height: 59.9px; pointer-events: none;
    transform-origin: center bottom; will-change: transform;
    animation: lwPinHop 1.6s infinite; }
@keyframes lwPinHop {
    0%   { transform: translateY(0);    animation-timing-function: cubic-bezier(.34,.7,.4,1); }   /* 튀어 오름(감속) */
    28%  { transform: translateY(-9px); animation-timing-function: cubic-bezier(.6,0,.75,.25); }   /* 낙하(중력 가속) */
    52%  { transform: translateY(0); }
    100% { transform: translateY(0); }   /* 잠깐 정지 후 반복 */
}

/* ajax 로딩 (지도 영역 오버레이 — .viewerLoading 은 BJH.Util.ajax 훅)
   z-index 는 항상 최상단 : 모바일 드로어(80)·백드롭(75)·정보팝업(70)보다 위여야 로딩이 가려지지 않는다 */
.lw_loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    background: rgba(51,54,61,0.5); }
.lw_loading_box { display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; }   /* 흰 박스 제거 — 물방울·흰 글씨만 */
/* 차오르는 물방울 스피너 — 꼭지가 위로 향한 물방울 (0 50% 50% 50% + 45° 회전 = 꼭지 정위)
   물(i)은 컨테이너가 45° 돌아가 있으므로 -45° 역회전한 큰 블록을 세로로 움직여 "수평 수면"을 만든다 */
.lw_loading_drop { width: 22px; height: 22px; position: relative; overflow: hidden;
    transform: rotate(45deg) scale(1.2); background: transparent;   /* 차오르기 전 바탕 투명 → 뒤 배경 비침 / 크기 120% */
    border: 1px solid #fff; border-radius: 0 50% 50% 50%; }   /* 물방울 기본색(테두리) 흰색 */
.lw_loading_drop i { position: absolute; left: 50%; top: 50%; width: 200%; height: 200%;
    background: linear-gradient(180deg, #4d86ff 0%, var(--lw-blue) 55%);
    animation: lw-fill 1.9s ease-in-out infinite; }
/* 유리 광택 — 화면 기준 우상단 곡면 자리(회전 좌표계라 local 상단이 screen 우상단) */
.lw_loading_drop::after { content: ''; position: absolute; top: 3px; left: 56%;
    width: 3.5px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.8); }
.lw_loading_txt { margin: 0; font-size: 15px; font-weight: 600; color: #ffffff; letter-spacing: .2px; }
@keyframes lw-fill {
    0%, 100% { transform: translate(-50%, -50%) rotate(-45deg) translateY(56%); }
    50%      { transform: translate(-50%, -50%) rotate(-45deg) translateY(10%); }
}

/* 정보 레이어 팝업 (우측 상단 고정, 모든 정보 레이어 공통) — 시안 소팝업 322px */
/* PSD 기준 : 팝업 폭 326 / 콘텐츠 좌우 인셋 22 / 구분선 좌우 22 인셋 · #cdd1d5 · 1px */
.lw_infopop { position: absolute; top: 92px; right: 14px; z-index: 30; width: 324px;
    background: #fff; border: 1px solid #e1e6ec; border-radius: 8px;
    box-shadow: 0 10px 30px rgba(17,24,39,.18); overflow: hidden;
    /* 좁은 폭(≤1280)에서 열었다 창을 넓히면 jQuery show/hide 가 기록해 둔 인라인 display:flex 가 남아
       가로 배치(row)로 눌리는 문제 방어 — display 가 block 일 때는 무해하다 */
    flex-direction: column;
    transition: top 0.5s ease; }   /* 카드 펼침/접힘 시 밴드 하단 기준 top(220↔113)이 밴드와 동기(0.5s)로 부드럽게 이동. 열림은 숨김 상태에서 top 선설정이라 미끄러짐 없음 */
/* 우측 상세 팝업 등장(열림·카드전환) 효과 — JS(_openInfoPop)가 호출마다 is_popin 재부여로 재생. 데스크톱 전용 */
@keyframes lwPopIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.lw_infopop.is_popin { animation: lwPopIn 0.5s ease; }
.lw_infopop_head { display: flex; align-items: center; gap: 8px; padding: 13px 20px; border-bottom: 1px solid #eef1f5; }
.lw_infopop_tit { font-size: 17px; font-weight: 600; color: #1e2124; }
/* 시안 소팝업 헤더: 카테고리행(아이콘+항목명+X) / 지점명 / 구분선 */
.lw_infopop_cat { display: flex; align-items: center; gap: 8px; padding: 15px 20px 0; }
.lw_infopop_catico { width: 23px; height: 23px; flex: 0 0 auto;   /* 색·모양(둥근사각+흰 글리프)은 타일 SVG 파일 내장 */
    display: flex; align-items: center; justify-content: center; }
.lw_infopop_catico img { width: 100%; height: 100%; display: block; }
.lw_infopop_catnm { font-size: 15px; font-weight: 600; color: #1e2124; }   /* PSD : 15px Bold #1E2124 */
.lw_dwq_hback { border: 0; background: none; padding: 0; margin: 0 -2px 0 0; color: #55666f; font-size: 18px; line-height: 1; cursor: pointer; font-family: inherit; }   /* 상세화면 좌상단 뒤로가기(요약보기로) */
.lw_infopop_cat .lw_infopop_x { margin-left: auto; }
.lw_infopop_tit_bar { display: block; position: relative; padding: 13px 20px 12px; font-size: 19px; }
.lw_infopop_tit_bar:empty { display: none; }   /* 지점명이 비어 제목이 없는 경우 구분선까지 숨김 */
.lw_tit_sub { margin-left: 7px; font-size: 15px; font-weight: 400; color: #1e2124; }   /* PSD : 제목 옆 보조문구(가뭄 용수구분) 15px Regular */
.lw_infopop_cat_only { position: relative; padding-bottom: 13px; }   /* 제목행 없는 팝업(강우레이더/물의여정) */
/* 헤더 구분선 — PSD tit_line : 좌우 22px 인셋, #cdd1d5, 1px (border-bottom 은 좌우 끝까지 이어져 미사용) */
.lw_infopop_tit_bar::after, .lw_infopop_cat_only::after, .lw_twb_titwrap::after {
    content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: #cdd1d5; }
#lwDwqTit::after { display: none; }   /* 먹는샘물(요약·상세) 시도명 타이틀 — 하단 라인 제거 */
.lw_infopop_badge { margin-left: auto; font-size: 12px; font-weight: 700; color: #fff; padding: 4px 12px; border-radius: 20px; white-space: nowrap; }
.lw_infopop_badge.is_conv   { background: var(--lw-blue); }
.lw_infopop_badge.is_safety { background: #ef5350; }
.lw_infopop_badge.is_info   { background: var(--lw-cat-info); }
/* 닫기 X — 아이콘은 svgicon/ui/close.svg (R_정보창.psd : 십자 14px · 선 1.5 · #3A4046)
   색 변경이 필요없는 아이콘이라 SVG 파일로 관리. hover 는 색 대신 opacity.
   아이콘 14 + padding 7 → 터치영역 28 (WCAG 2.5.8 최소 24 충족) */
.lw_infopop_x { border: 0; background: none; cursor: pointer; padding: 7px; display: flex; }
.lw_infopop_x img { display: block; width: 14px; height: 14px; pointer-events: none; }
.lw_infopop_x:hover { opacity: .65; }
.lw_infopop_body { padding: 20px; }
#lwDwqPop .lw_infopop_body { padding-top: 0; }   /* 먹는샘물 정보 팝업만 상단 패딩 제거 */

/* 강우레이더 컨트롤/범례 (PSD 생활속물모아_수정2 정밀) */
/* 재생 카드 : 제목줄(시각 + 「3시간 자료」) / 원형 버튼 (기획 2026-10-14 확정 시안 2-1)
   [폐기] 시각 상태박스(19px 가운데·높이 63) 아래에 「3시간 자료」 테두리 박스 + 붙은 버튼 3개
          → 박스가 셀렉트·입력칸처럼 보여 「바꿀 수 있어 보인다」는 기획 피드백(2026-10-14)으로 교체.
   [폐기] 제목줄 아래 진행바(끌어서 이동) + 양끝 시각 → 기획 요청으로 제외(2026-10-14). */
/* 대시보드 .btn_time_ctrl 를 쓰지 않는다 — gis.css 가 이 화면에도 로드돼 남색 배경·png 아이콘으로 덮어쓴다. */
/* 카드 전체 바탕 = 기존 시각 상태박스의 연파랑(#EEF4FF) — 표출 시각을 강조하던 자리라는 흔적을 남긴다.
   [폐기] 제목줄만 연파랑, 버튼 영역은 흰색 → 버튼 영역도 같은 색으로(기획 요청 2026-10-14) */
.lw_radar_card { border: 1px solid #dfe6f3; border-radius: 10px; overflow: hidden; margin-bottom: 14px; background: var(--lw-air1-bg); }
.lw_radar_head { display: flex; align-items: center; gap: 7px; padding: 11px 14px; }
.lw_radar_cal { width: 14px; height: 14px; display: block; flex: 0 0 auto; }   /* 상단 「오늘의 물모아」 날짜(.lw_ch_cal)와 같은 규격 */
.lw_radar_time { font-size: 16px; font-weight: 400; color: #1e2124; white-space: nowrap; }   /* 날짜 Regular + 시각 Bold (기존 PSD 규칙 유지) */
.lw_radar_time strong { font-weight: 700; margin-left: 4px; }
/* 「3시간 자료」 : 설명 글씨일 뿐이라 배경·테두리를 두지 않는다 — 알약·박스 모양이면 눌러 바꾸는 칩처럼 보인다 */
.lw_radar_span { margin-left: auto; font-size: 12px; color: #6d7882; white-space: nowrap; }
/* 시각과 버튼 사이 구분선 — 좌우를 제목줄 여백(14px)만큼 들여 카드 끝까지 닿지 않게 한다(기획 요청 2026-10-14).
   선 색 #cdd1d5 : 연파랑 박스 안 구분선에 이미 쓰는 색(.lw_wp_state .rsn)과 맞춘다 */
.lw_radar_cbody { margin: 0 14px; padding: 12px 0; border-top: 1px solid #cdd1d5; }
.lw_radar_btns { display: flex; justify-content: center; align-items: center; gap: 14px; }
/* 이전/다음 = 흰 원 — 회색(#f1f3f5)은 연파랑 바탕에서 탁해 보였다 */
.lw_radar_btn { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #fff; color: #464c53; cursor: pointer; }
.lw_radar_btn svg { width: 14px; height: 14px; fill: currentColor; pointer-events: none; }
/* 재생 버튼만 크게(44 = WCAG 2.5.5 권장 터치 크기) — 흰 아이콘 대비 4.6:1 (WCAG AA) */
.lw_radar_btn.is_main { width: 44px; height: 44px; background: var(--lw-primary); color: #fff; }
.lw_radar_btn.is_main svg { width: 16px; height: 16px; }
/* 재생 상태는 aria-pressed 하나로만 표현한다 — 화면과 스크린리더가 같은 값을 본다 */
.lw_radar_btn .ico_pause,
.lw_radar_btn[aria-pressed="true"] .ico_play { display: none; }
.lw_radar_btn[aria-pressed="true"] .ico_pause { display: block; }
.lw_radar_btn:focus-visible { outline: 2px solid #1e2124; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .lw_radar_btn:hover { filter: brightness(.94); } }   /* 터치 기기에서 hover 가 눌린 채 남지 않게 */
/* 투명도 : 라벨(• 회색점) + 슬라이더 + % 박스 (PSD 간격 6px) */
.lw_radar_ctrl { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.lw_radar_lbl { position: relative; padding-left: 13px; font-size: 15px; font-weight: 600; color: #1e2124; flex: 0 0 auto; }
/* 불릿 — 다른 팝업 목록(.lw_dp_meta li::before)과 동일 규격 유지 : 4px 원 / 좌 2 / 텍스트 좌 13 */
.lw_radar_lbl::before { content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: #8a949e; }
.lw_radar_range { flex: 1 1 auto; min-width: 0; accent-color: var(--lw-primary); }
.lw_radar_pct { flex: 0 0 auto; min-width: 50px; text-align: center; font-size: 13px; color: #1e2124; background: #fff; border: 1px solid #d6dbe2; border-radius: 8px; padding: 6px 8px; }   /* PSD %박스 높이 34 */
/* 강우레이더 범례 — .lw_lg 와 동일한 흰 박스 + 상단 테두리에 걸친 타이틀 */
.lw_radar_leg { position: relative; margin: 20px 0 0; padding: 18px 16px 12px;
    background: #fff; border: 1px solid #e6e8ea; border-radius: 8px; }
.lw_radar_leg_tit { position: absolute; top: -9px; left: 12px; margin: 0; padding: 0 7px; background: #fff;
    font-size: 13px; font-weight: 600; color: #1e2124; }
/* 24개 색 조각 바(첫/끝 13px·중간 10px) + 눈금 라벨 + mm/h(바 아래 우측) */
/* 유동 — 바가 박스 폭을 채우고 조각은 13:10 비율(flex), 눈금은 %. PC·모바일 동일 비율 */
.lw_radar_scalewrap { display: block; }
.lw_radar_scale { position: relative; display: block; }
.lw_radar_ticks { position: relative; height: 18px; }
.lw_radar_ticks span { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; color: #1e2124; white-space: nowrap; }
.lw_radar_ticks span:first-child { transform: none; }   /* 0 은 왼쪽 정렬 */
.lw_radar_bar { display: flex; width: 100%; }
.lw_radar_bar em { flex: 10 1 0; height: 14px; }
.lw_radar_bar em:first-child, .lw_radar_bar em:last-child { flex: 13 1 0; }   /* 첫·마지막 조각 = 13:10 비율 */
.lw_radar_bar em:first-child { border-radius: 4px 0 0 4px; }   /* 좌측 상·하단 라운드 */
.lw_radar_bar em:last-child { border-radius: 0 4px 4px 0; }    /* 우측 상·하단 라운드 */
.lw_radar_unit { display: block; text-align: right; margin-top: 4px; font-size: 10px; color: #464c53; white-space: nowrap; }

/* 물놀이시설 점검결과 박스 (시안: 적합 연파랑 / 부적합 연회색+사유) */
/* R_정보창.psd 실측 : 박스 좌우 인셋 20 / 상하 17(박스 높이 63) — 라벨·값은 박스 기준 33 이므로 .row 에서 13 더 들여씀 */
.lw_wp_state { background: #ecf2fe; border-radius: 8px; padding: 17px 20px; margin-bottom: 12px; }
.lw_wp_state.is_bad { background: #f4f5f6; }
.lw_wp_state .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; }
.lw_wp_state .k { font-size: 13px; font-weight: 400; color: #464c53; }
/* R_정보창.psd : 우리집수돗물은 값이 있을 때 라벨이 진한 검정(#1E2124), 측정자료없음일 때만 #464C53 */
.lw_wp_state.is_val .k { color: #1e2124; }
.lw_wp_state .v { font-size: 19px; font-weight: 600; color: #1e2124; }
/* 사유(부적합 등) : 구분선 #cdd1d5(흰색 아님) / 13px 줄간 19 / 좌우 인셋 22 = 박스패딩20 + 2 */
.lw_wp_state .rsn { margin: 13px 0 0; padding: 14px 2px 0; border-top: 1px solid #cdd1d5;
    font-size: 13px; color: #464c53; line-height: 19px; word-break: keep-all; }
.lw_wp_src { margin: 12px 0 0; font-size: 13px; color: #6d7882; }
/* 단계별 박스 (등급 팔레트 lw_g_* 이전의 개별 클래스 — 사용 중인 2종만 유지, 나머지는 정리됨) */
.lw_wp_state.ag_none  { background: #eef8ff; }   /* 녹조 미발령 폴백 (시안 — 글자 검정) */
.lw_wp_state.st_mint  { background: #e8f8ee; }   /* 수돗물도감 보급률 박스 (시안) */
/* 박스 안 다중 행 (미세먼지 3항목 등) */
.lw_wp_state .row + .row { margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════════
   ■ 등급 상태박스 + 범례 (팔레트 변수 기반 공통 컴포넌트)
   · 등급 클래스(lw_g_*) 하나만 붙이면 배경(연한색)·동그라미/바(진한색)가 함께 결정됨
   · 상태박스 : <div class="lw_wp_state lw_st lw_g_tap1"> … <b class="v">매우 좋음</b>
   · 범례     : <div class="lw_lg"><p class="lw_lg_tit">범례</p>
                  <ul class="lw_lg_list"><li class="lw_lg_item lw_g_tap1"><i></i><b>매우좋음</b></li>…</ul></div>
   ═══════════════════════════════════════════════════════════════════ */

/* ── 등급 클래스 → 팔레트 바인딩 (레이어/단계 추가 시 여기에 한 줄씩) ── */
/* 우리집수돗물 */
.lw_g_tap1 { --c: var(--lw-tap1); --c-bg: var(--lw-tap1-bg); }   /* 매우좋음 */
.lw_g_tap2 { --c: var(--lw-tap2); --c-bg: var(--lw-tap2-bg); }   /* 좋음 */
.lw_g_tap3 { --c: var(--lw-tap3); --c-bg: var(--lw-tap3-bg); }   /* 측정자료없음 */
/* 가뭄단계 */
.lw_g_drt1 { --c: var(--lw-drt1); --c-bg: var(--lw-drt1-bg); }   /* 정상 */
.lw_g_drt2 { --c: var(--lw-drt2); --c-bg: var(--lw-drt2-bg); }   /* 관심 */
.lw_g_drt3 { --c: var(--lw-drt3); --c-bg: var(--lw-drt3-bg); }   /* 주의 */
.lw_g_drt4 { --c: var(--lw-drt4); --c-bg: var(--lw-drt4-bg); }   /* 경계 */
.lw_g_drt5 { --c: var(--lw-drt5); --c-bg: var(--lw-drt5-bg); }   /* 심각 */
/* 미세먼지 */
.lw_g_air1 { --c: var(--lw-air1); --c-bg: var(--lw-air1-bg); }   /* 좋음 */
.lw_g_air2 { --c: var(--lw-air2); --c-bg: var(--lw-air2-bg); }   /* 보통 */
.lw_g_air3 { --c: var(--lw-air3); --c-bg: var(--lw-air3-bg); }   /* 나쁨 */
.lw_g_air4 { --c: var(--lw-air4); --c-bg: var(--lw-air4-bg); }   /* 매우나쁨 */
.lw_g_air5 { --c: var(--lw-air5); --c-bg: var(--lw-air5-bg); }   /* 데이터없음 */
/* 동파위험정보 */
.lw_g_frz1 { --c: var(--lw-frz1); --c-bg: var(--lw-frz1-bg); }   /* 관심 */
.lw_g_frz2 { --c: var(--lw-frz2); --c-bg: var(--lw-frz2-bg); }   /* 주의 */
.lw_g_frz3 { --c: var(--lw-frz3); --c-bg: var(--lw-frz3-bg); }   /* 경계 */
.lw_g_frz4 { --c: var(--lw-frz4); --c-bg: var(--lw-frz4-bg); }   /* 심각 */
/* 녹조정보 */
.lw_g_alg1 { --c: var(--lw-alg1); --c-bg: var(--lw-alg1-bg); }   /* 미발령 */
.lw_g_alg2 { --c: var(--lw-alg2); --c-bg: var(--lw-alg2-bg); }   /* 관심 */
.lw_g_alg3 { --c: var(--lw-alg3); --c-bg: var(--lw-alg3-bg); }   /* 경계 */
.lw_g_alg4 { --c: var(--lw-alg4); --c-bg: var(--lw-alg4-bg); }   /* 대발령 */
/* 홍수정보 */
.lw_g_fld1 { --c: var(--lw-fld1); --c-bg: var(--lw-fld1-bg); }   /* 주의보 */
.lw_g_fld2 { --c: var(--lw-fld2); --c-bg: var(--lw-fld2-bg); }   /* 경보 */
.lw_g_fld3 { --c: var(--lw-fld3); --c-bg: var(--lw-fld3-bg); }   /* 없음 */
/* 적합/부적합 (물놀이시설·약수터 공용) */
.lw_g_fit1 { --c: var(--lw-fit1); --c-bg: var(--lw-fit1-bg); }   /* 적합 */
.lw_g_fit2 { --c: var(--lw-fit2); --c-bg: var(--lw-fit2-bg); }   /* 부적합 */
.lw_g_fit3 { --c: var(--lw-fit3); --c-bg: var(--lw-fit3-bg); }   /* 미검사 */

/* ── 물방울 아이콘 (R_정보창(2).psd 20260730 : 12×16 — 이전 10×14 에서 확대) — 마스크 도형에 팔레트 진한색(--c)을 채운다 ── */
.lw_wp_state.lw_st .v::before,
.lw_wp_state .v.lw_dot::before,
.lw_lg_item i {
    content: ''; flex: 0 0 auto; width: 12px; height: 16px; background: var(--c, #939393);
    -webkit-mask: var(--lw-drop) no-repeat center / 100% 100%;
            mask: var(--lw-drop) no-repeat center / 100% 100%;
}

/* ── 녹조는 단계별 "패턴" 물방울(퍼블 제공 녹조_물방울.svg 분리본) — 단색 마스크로 표현 불가하므로 이미지로 교체.
      색·패턴이 파일에 고정이라 CSS 로 색을 바꾸지 않는다(파일 교체로 관리). 경로는 각 등급 클래스에서 지정 ── */
.lw_g_alg1 { --lw-drop-src: url("../images/svgicon/legend/alg_none.svg"); }
.lw_g_alg2 { --lw-drop-src: url("../images/svgicon/legend/alg_watch.svg"); }
.lw_g_alg3 { --lw-drop-src: url("../images/svgicon/legend/alg_alert.svg"); }
.lw_g_alg4 { --lw-drop-src: url("../images/svgicon/legend/alg_bloom.svg"); }
.lw_wp_state.lw_st.lw_g_alg1 .v::before, .lw_wp_state.lw_st.lw_g_alg2 .v::before,
.lw_wp_state.lw_st.lw_g_alg3 .v::before, .lw_wp_state.lw_st.lw_g_alg4 .v::before,
.lw_lg_item.lw_g_alg1 > i, .lw_lg_item.lw_g_alg2 > i,
.lw_lg_item.lw_g_alg3 > i, .lw_lg_item.lw_g_alg4 > i {
    background: var(--lw-drop-src) no-repeat center / contain;
    -webkit-mask: none; mask: none;
}

/* ── 상태박스 : 배경=연한색, 값 왼쪽 물방울=진한색 (등급 클래스가 없을 때는 기본색 폴백) ── */
.lw_wp_state.lw_st { background: var(--c-bg, #ecf2fe); }
.lw_wp_state.lw_st .v { display: inline-flex; align-items: center; gap: 9px; color: #1e2124; }
/* 등급 배경만 쓰고 물방울은 없는 항목 (PSD 미세먼지) */
.lw_wp_state.lw_st .v.lw_nodrop::before { content: none; display: none; }
/* 상태박스가 연속으로 올 때 간격 축소 (PSD 박스 간 4px = margin-bottom 12 − 8).
   등급형(lw_st, 미세먼지 3연속)과 수치형(수돗물도감 요약 급수인구·보급률) 간격을 같게 맞추려고
   lw_st 조건을 뺐다 — 전에는 lw_st 끼리만 적용돼 수돗물도감만 12px 로 벌어져 있었다. */
.lw_wp_state + .lw_wp_state { margin-top: -8px; }

/* ── 행별 등급 표시 (미세먼지처럼 한 박스에 여러 항목이 각기 다른 등급일 때)
      박스 배경은 기본값 유지하고, 값에만 물방울 + 등급색을 준다. <b class="v lw_dot lw_g_air3"> ── */
.lw_wp_state .v.lw_dot { display: inline-flex; align-items: center; gap: 9px; color: var(--c); }

/* ── 범례 : 흰 패널 + 테두리에 걸친 "범례" 라벨 + 칩 grid (디자이너 범례 확정안 형태 — 시안 파일은 2026-10 정리됨)
      · 라벨은 fieldset legend 처럼 테두리 위에 걸침 → 패널 상단 여백(padding-top) 확보 필요
      · 색은 우리 팔레트 유지(--c / --c-bg), 칩 배경은 상태박스 배경과 동일 ── */
.lw_lg { position: relative; margin: 20px 0 0; padding: 18px 10px 12px;
    background: #fff; border: 1px solid #e6e8ea; border-radius: 8px; }            /* PSD : 패널 테두리 #E6E8EA, 높이 64 (테두리1 + 상18 + 칩32 + 하12 + 테두리1) */
.lw_lg_tit { position: absolute; top: -9px; left: 12px; margin: 0; padding: 0 7px; background: #fff;   /* PSD 잉크 실측 : 선 위 40% / 아래 60% 관통 */
    font-size: 13px; font-weight: 600; color: #1e2124; }                           /* PSD : 검정 13px, 테두리에 걸침 */
.lw_lg_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; }
.lw_lg_item { display: flex; align-items: center; justify-content: center; min-height: 32px;
    padding: 6px 4px; background: var(--c-bg); border-radius: 8px; }               /* PSD : 칩 높이 32, gap 4 */
.lw_lg_item i { display: none; }                                                   /* PSD : 범례 안 진한 막대 없음 (모바일에서만 물방울로 표시) */
.lw_lg_item b { font-size: 13px; font-weight: 500; color: #1e2124;
    line-height: 1.2; white-space: nowrap; }                                       /* PSD : 라벨 검정 13px */
/* 단계 수만큼 1줄 균등분할 (R_정보창(2).psd : 녹조4·가뭄5·미세먼지·홍수3 모두 한 줄) */
.lw_lg_list.is_2 { grid-template-columns: repeat(2, 1fr); }
.lw_lg_list.is_4 { grid-template-columns: repeat(4, 1fr); }
.lw_lg_list.is_5 { grid-template-columns: repeat(5, 1fr); }
/* 칩이 좁아지는 4단계 이상은 좌우 패딩만 줄인다 (라벨은 PSD 13px 유지) */
.lw_lg_list.is_4 .lw_lg_item, .lw_lg_list.is_5 .lw_lg_item { padding: 6px 2px; }
.lw_lg_more { display: none; }   /* 더보기(+N) 는 모바일에서만 사용 */

.lw_dp_meta { margin: 0; padding: 0; list-style: none; }
/* R_정보창.psd 실측 : 텍스트 15px Regular #1E2124(라벨도 굵지 않음) / 텍스트 좌 13 · 불릿 6px #8A949E 좌 0 / 행 피치 24 (뱃지 행만 28) */
.lw_dp_meta li { position: relative; padding-left: 13px; font-size: 15px; color: #1e2124; line-height: 24px; word-break: break-all; }
.lw_dp_meta li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: #8a949e; }
.lw_dp_meta li + li { margin-top: 0; }
.lw_dp_meta li.has_badge + li.has_badge { margin-top: 4px; }   /* 뱃지 행(음수대 지번/도로명) 피치 28 */
.lw_dp_meta li b { font-weight: 400; color: inherit; }   /* PSD : 항목 라벨도 Regular — 굵기/색 강조 없음 */
.lw_dp_meta .dp_num { font-style: normal; font-weight: 600; color: #0b50d0; }   /* 수치 강조 — R_정보창.psd : Bold #256EF4 (단위는 제외) */
/* 항목 라벨 뱃지 (R_정보창.psd 음수대 — 지번/도로명) : 흰 배경 + 회색 테두리, 높이 22 */
.lw_dp_meta .lw_badge { display: inline-block; margin-right: 6px; padding: 0 6px; height: 22px; line-height: 20px;
    border: 1px solid #cdd1d5; border-radius: 6px; background: #fff;
    font-style: normal; font-size: 13px; font-weight: 400; color: #464c53; vertical-align: middle; }

/* 리스트 레이어 팝업 (PSD #L_list팝업 326x620 — 생활편의/생활안심 지점 목록) */
.lw_listpop { position: absolute; left: 18px; top: 220px; z-index: 32; width: 326px;
    display: flex; flex-direction: column; max-height: calc(100% - 250px);
    background: #fff; border: 1px solid #e1e6ec; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(17,24,39,.18); }
.lw_lp_head { display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 8px; cursor: move; }
.lw_lp_tit { font-size: 15px; font-weight: 600; color: #1e2124; }
.lw_lp_search { position: relative; margin: 2px 20px 0; }
.lw_lp_search input { width: 100%; height: 42px; padding: 0 40px 0 14px; border: 1px solid #cdd1d5;
    border-radius: 8px; font-size: 15px; color: #1e2124; }
.lw_lp_search input:focus { outline: none; border-color: #8a93a3; }
.lw_lp_search input::placeholder { color: #a2a2a3; }
.lw_lp_mag { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 8px;   /* hover 배경박스 겸 오버영역(32x32) */
    display: flex; align-items: center; justify-content: center;
    background-color: transparent; transition: background-color 0.5s ease; }   /* 0.5초 페이드 */
.lw_lp_mag::before { content: ''; width: 18px; height: 18px;   /* 돋보기 아이콘(마스크) — 위치 기존 유지 */
    background-color: #c6c6c6;   /* 기본 색 */
    -webkit-mask: url("/com/web/lifeWater/images/lw_search.svg") no-repeat center / 18px 18px;
            mask: url("/com/web/lifeWater/images/lw_search.svg") no-repeat center / 18px 18px;
    transition: background-color 0.5s ease; }   /* 아이콘 색도 0.5초 전환 */
.lw_lp_mag:hover { background-color: #ecf2fe; }          /* 오버 시 배경박스 표출 */
.lw_lp_mag:hover::before { background-color: #256ef4; }  /* 오버 시 돋보기 파랑 */
.lw_lp_chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 20px 14px; border-bottom: 1px solid #cdd1d5; }
.lw_lp_chip { padding: 0 16px; height: 34px; border: 1px solid #e6e8ea; border-radius: 19px;
    background: #fff; font-size: 13px; font-weight: 400; color: #1e2124; cursor: pointer; }
.lw_listpop.is_conv .lw_lp_chip.on { background: #2e9bea; border-color: #e6e8ea; color: #fff; font-weight: 600; }
.lw_listpop.is_safety .lw_lp_chip.on { background: #ef5f5f; border-color: #e6e8ea; color: #fff; }
.lw_lp_list { margin: 0; padding: 2px 0 10px; list-style: none; overflow-y: auto; }
.lw_lp_item { position: relative; padding: 12px 20px 10px; cursor: pointer; }   /* 좌우 20px 을 항목으로 이동 → hover 배경이 양쪽 끝까지 채워짐 */
.lw_lp_item::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; border-bottom: 1px dashed #cdd1d5; }   /* 점선 구분선은 기존처럼 20px 안쪽 유지(디자인 보존) */
.lw_lp_item:hover { background: #f8fafc; }
.lw_lp_item:hover .lw_lp_nm {   /* 오버 시 지점명에만 밑줄(핀은 배경 pseudo라 미적용) */
    text-decoration: underline; text-decoration-color: #464c53;
    text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* li(role=button) 라 키보드 포커스 링을 명시한다 — 폭이 넓어 outline 을 안쪽으로 넣는다 (§0.13) */
.lw_lp_item:focus-visible { outline: 2px solid var(--lw-blue-focus); outline-offset: -2px; }
.lw_lp_cat { display: block; font-size: 13px; font-weight: 400; margin-bottom: 6px; }
.lw_listpop.is_conv .lw_lp_cat { color: var(--lw-cat-conv-txt); }
.lw_listpop.is_safety .lw_lp_cat { color: var(--lw-cat-safety-txt); }
/* 전체 목록(생활편의+생활안심 합본) — 그룹 구분이 사라지지 않게 칩·분류명 색을 항목별로 준다 */
.lw_listpop.is_all .lw_lp_chip.on[data-g="conv"] { background: var(--lw-cat-conv); border-color: var(--lw-cat-conv); color: #fff; }
.lw_listpop.is_all .lw_lp_chip.on[data-g="safety"] { background: var(--lw-cat-safety); border-color: var(--lw-cat-safety); color: #fff; }
.lw_listpop.is_all .lw_lp_cat[data-g="conv"] { color: var(--lw-cat-conv-txt); }
.lw_listpop.is_all .lw_lp_cat[data-g="safety"] { color: var(--lw-cat-safety-txt); }
.lw_lp_nm { display: flex; align-items: flex-start; gap: 7px; font-size: 15px; font-weight: 400; color: #1e2124; line-height: 1.4; }
.lw_lp_nm::before { content: ''; flex: none; width: 11px; height: 15px; margin-top: 2px;
    background: url("/com/web/lifeWater/images/lw_loc_pin.png") no-repeat center / 11px 15px; }
.lw_lp_empty { padding: 24px 0; text-align: center; color: #8a93a3; font-size: 13px; }

/* 수돗물도감 콘텐츠 팝업 (2단계, 탭3 — 시안 콘텐츠팝업03_1, 초록 테마) */
.lw_twbpop { width: 460px; display: flex; flex-direction: column; max-height: calc(100% - 240px); }   /* top(카드 아래 ~220) + 하단여백 고려 */
.lw_twb_titwrap { position: relative; padding: 12px 20px 12px; }   /* 구분선은 공통 ::after 규칙(인셋 22 · #cdd1d5) */
.lw_twb_tit { display: block; font-size: 19px; font-weight: 600; color: #1e2124; }
.lw_twb_sub { display: block; font-style: normal; font-size: 15px; color: #6d7882; margin-top: 2px; }
.lw_twb_body { overflow-y: auto; }
.lw_twb_h { margin: 20px 0 8px; font-size: 17px; font-weight: 600; color: #1e2124; }
.lw_twb_panel > .lw_twb_h:first-child { margin-top: 4px; }
/* 기본현황 카드 */
.lw_twb_cards { display: flex; gap: 10px; }
.lw_twb_card { flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: 15px 8px; border: 1px solid var(--lw-green); border-radius: 10px; background: #f4fff9; }   /* 시안 실측 */
.lw_twb_card b { font-size: 19px; font-weight: 600; color: #009b24; }
.lw_twb_card em { font-style: normal; font-size: 15px; color: #1e2124; }
/* 아코디언 (지도보기 / Q&A) */
.lw_twb_acc { border: 1px solid #cdd1d5; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.lw_twb_acc_btn { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 34px 12px 16px;
    border: 0; background: #fff; font-size: 13.5px; font-weight: 700; color: #1e2124; text-align: left; cursor: pointer; }
.lw_twb_acc_btn::after { content: ''; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px;
    border-right: 1px solid #2d2d2d; border-bottom: 1px solid #2d2d2d; transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.lw_twb_acc.is_open .lw_twb_acc_btn::after { transform: translateY(-30%) rotate(225deg); }
.lw_twb_acc_body { display: none; padding: 12px 16px; background: #f7f8fa; font-size: 15px; color: #1e2124; line-height: 1.2; }
.lw_twb_acc.is_open .lw_twb_acc_body { display: block; }
.lw_twb_q { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: 50%; background: var(--lw-green); color: #fff; font-size: 15px; font-weight: 600; font-style: normal; }
/* 민원 연락처 */
.lw_twb_contact { margin: 0; padding: 0; list-style: none; }
.lw_twb_contact li { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 16px; background: #f7f8fa; border-radius: 8px; margin-bottom: 7px; font-size: 15px; color: #464c53; }
.lw_twb_contact b { font-weight: 600; color: #1e2124; }
.lw_twb_down { padding: 6px 16px; border: 0; border-radius: 8px; background: #009b24; color: #fff; font-size: 13px; font-weight: 400; cursor: pointer; }
/* 생산과정 단계 */
.lw_twb_steps { margin: 0; padding: 0; list-style: none; }
.lw_twb_steps li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
/* 화살표: 번호원(top 0~23)과 다음 번호원(li bottom) 사이 정중앙 = (23+liH)/2 - 8 = 50%+3.5px */
.lw_twb_steps li:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: calc(50% + 6.5px);
    width: 8px; height: 10px; transform: translateX(-50%);
    background: url("/com/web/lifeWater/images/wj/wj_arrow.png") no-repeat center / 8px 10px; }
.lw_twb_steps i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border: 1.5px solid var(--lw-green); border-radius: 50%; color: #009b24; background-color: #f4fff9; font-size: 15px; font-weight: 600; font-style: normal; }
.lw_twb_steps b { display: block; font-size: 15px; font-weight: 600; color: #1e2124; padding-top: 2px; }
.lw_twb_steps p { margin: 4px 0 0; font-size: 13px; color: #464c53; line-height: 1.55; }
/* 안내/설명 박스 */
.lw_twb_note { border: 1px solid #e1e6ec; border-radius: 8px; padding: 12px 20px; margin-bottom: 10px; background: #fff; }
.lw_twb_note.is_soft { background: #f7f8fa; border: none; }
.lw_twb_note.is_blue { background: #eef2fe; border: none; }
.lw_twb_note b { display: block; font-size: 15px; font-weight: 600; color: #1e2124; margin-bottom: 6px; }
.lw_twb_note p { margin: 0; font-size: 13px; color: #464c53; line-height: 1.5; }
.lw_twb_note .t_green { color: #009b24; }
.lw_twb_note .t_blue { color: var(--lw-primary); }
.lw_twb_note .t_big { font-size: 20px; margin-bottom: 2px; }
/* 수질검사 카드 */
.lw_twb_wq_cards { display: flex; gap: 10px; margin-bottom: 6px; }
.lw_twb_wq_card { position: relative; flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 13px 14px; border-radius: 8px; }
.lw_twb_wq_card.is_green { background: #f4fff9; border: 1px solid var(--lw-green); }
.lw_twb_wq_card.is_blue  { background: #eef8ff; border: 1px solid var(--lw-cat-conv); }
/* 카드 좌상단 아이콘 (시안 — 원래 물의여정 step_icon 을 mask 로 색 입힘) */
.lw_twb_wq_card::before { content: ''; position: absolute; left: 14px; top: 13px; width: 25px; height: 25px;
    -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; }
.lw_twb_wq_card.is_green::before { background: var(--lw-green);
    -webkit-mask-image: url("/com/waterJourney/images/step_icon02.svg"); mask-image: url("/com/waterJourney/images/step_icon02.svg"); }
.lw_twb_wq_card.is_blue::before { background: var(--lw-cat-conv);
    -webkit-mask-image: url("/com/waterJourney/images/step_icon04.svg"); mask-image: url("/com/waterJourney/images/step_icon04.svg"); }
.lw_twb_wq_card .badge_ok { align-self: flex-end; font-style: normal; font-size: 13px; font-weight: 400;
    padding: 1px 7px 0px; border-radius: 999px; background: #fff; }
.lw_twb_wq_card.is_green .badge_ok { color: #009b24; border: 1px solid #009b24; }
.lw_twb_wq_card.is_blue  .badge_ok { color: var(--lw-primary); border: 1px solid var(--lw-primary); }
.lw_twb_wq_card span { font-size: 13px; color: #1e2124; padding-top: 8px; }
.lw_twb_wq_card b { font-size: 15px; font-weight: 600; color: #1e2124; }

/* 미니 호버 툴팁 (1줄: 아이콘+항목명 / 2줄: 지점명) — 내용 폭에 맞춤 */
.lw_tooltip_mini { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px;
    width: max-content; background: #fff; border: 1px solid #cdd1d5; border-radius: 8px;
    padding: 9px 12px 11px 11px; box-shadow: 0 4px 14px rgba(17,24,39,.16); white-space: nowrap; }   /* 상하좌우 여백 — 아이콘이 둥근 모서리에 붙지 않게 */
.lw_tooltip_mini .lw_tt_row { display: inline-flex; align-items: center; gap: 7px; }
.lw_tooltip_mini .lw_tt_ico { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.lw_tooltip_mini .lw_tt_ico img { width: 100%; height: 100%; display: block; }
.lw_tooltip_mini .lw_tt_mini_cat { font-size: 13px; font-weight: 400; }
.lw_tooltip_mini .lw_tt_mini_nm { font-size: 15px; font-weight: 400; color: #111827; padding-left: 0; }
.lw_tooltip_mini::after { content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
    border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fff; }

/* 먹는샘물 정보 팝업 (요약 ↔ 상세) — 시안 콘텐츠팝업03 (초록 #25bd69 테마, 팝업 460) */
.lw_dwqpop { width: 460px; }                 /* 상세(자세히보기 후) — 기존 유지 */
.lw_dwqpop.is_summary { width: 360px; }      /* 요약(자세히보기 전) — 좁게 */
.lw_dwq_sblk { background: #f4f7fb; border-radius: 8px; padding: 20px; margin-bottom: 12px; }
.lw_dwq_sblk + .lw_dwq_sblk { margin-bottom: 0; }   /* 마지막(두번째) 요약 박스 — 뒤에 버튼(.lw_wj_morewrap)이 와서 :last-child가 안 걸림 */
/* 색은 「위 박스가 파랑」 기준이다 (기획 2026-09-08). 표출 순서가 유통제품 수거 → 제조업체 원수 로
   바뀌면서 두 배경색을 서로 맞바꿨다. 순서를 또 바꾸려면 이 두 줄도 같이 바꿔야 한다. */
.lw_dwq_sblk--collect { background: #ecf2fe; }    /* 유통제품 수거 — 위 */
.lw_dwq_sblk--src { background: #ebfaec; }        /* 제조업체 원수 — 아래 */
.lw_dwq_sblk_tit { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 17px; font-weight: 600; color: #1e2124; padding-left: 4px;
    padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px dotted #cdd1d5; }   /* 타이틀 하단 점선 — 타이틀과 8px·리스트와 12px, 좌 4px */
.lw_dwq_sblk_cnt { margin-left: auto; text-align: right; font-size: 15px; font-weight: 400; color: #3b4452; white-space: nowrap;
    padding: 4px 16px; background: #ffffff; border-radius: 99px; }   /* N개소 — 타이틀 라인 우측 끝 흰 알약 배경 */
.lw_dwq_sblk_cnt b { color: #111827; font-weight: 700; }
.lw_dwq_sblk_list { margin: 0; padding: 0; list-style: none; }
.lw_dwq_sblk_list li { position: relative; padding-left: 12px; font-size: 15px; color: #464c53; line-height: 1.6; }
.lw_dwq_sblk_list li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 3px; height: 3px; border-radius: 50%; background: #b4bcc7; }
.lw_dwq_sblk_list li b { color: #464c53; font-weight: 600; }
.lw_dwq_back { width: 100%; padding: 11px; border: 0; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; }
.lw_dwq_back { background: #eef1f6; color: #3b4452; margin-top: 10px; }
/* 탭 (시안: 세그먼트 컨트롤 — 바깥 모서리만 둥글게, 탭 사이는 직선 구분선, 활성=초록 채움) */
/* 탭 공용 스타일 — 먹는샘물(.lw_dwq_tab) + 수돗물도감(#lwDogamPop .tab) 통합. 기준=수돗물도감.
   ※ 이 한 벌이 두 곳을 모두 담당한다. 컨테이너 여백만 문맥별로 따로 지정. */
.lw_dwq_tabs, #lwDogamPop .tabs { display: flex; gap: 0; padding: 0; border: 1px solid #c4c4c4; border-radius: 8px; background: #fff; }
.lw_dwq_tabs { margin-bottom: 16px; }                       /* 먹는샘물 문맥 여백 */
#lwDogamPop .tabs { margin: 14px 18px; flex-shrink: 0; }    /* 수돗물도감 문맥 여백 */
.lw_dwq_tab, #lwDogamPop .tab { flex: 1; padding: 9px 0; border: 0; border-left: 1px solid #dcdfe4; border-radius: 0; background: transparent; font-family: var(--f); font-size: 15px; font-weight: 400; color: #1e2124; cursor: pointer; }
.lw_dwq_tab:first-child, #lwDogamPop .tab:first-child { border-left: 0; border-radius: 7px 0 0 7px; }
.lw_dwq_tab:last-child,  #lwDogamPop .tab:last-child  { border-radius: 0 7px 7px 0; }
.lw_dwq_tab.on, #lwDogamPop .tab.on { background: #1d5ede; color: #fff; }
/* 요약 한 줄 (시안: 박스 없이 좌=업체 수 / 우=적합여부) — 이전 카드 2개(배경·테두리) 형식에서 변경 */
.lw_dwq_sum { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 4px 12px; }
.lw_dwq_sum span { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #1e2124; }
.lw_dwq_sum b { font-weight: 600; color: #1e2124; font-size: 19px; }
.lw_dwq_sum_cnt b { color: #052b57; }   /* 업체 수 색 — 기획 요청값 */
.lw_dwq_sum_st.st_ok b { color: #009b24; }
.lw_dwq_sum_st.st_bad b { color: #e0362c; }
/* 테이블 (시안: 헤더 연회색, 열 구분선, 적합=흰바탕+초록 테두리 pill) */
.lw_dwq_twrap { max-height: 440px; overflow: auto; border: 1px solid #cdd1d5; border-radius: 8px; }
/* 좁은 폭(태블릿·모바일)에서는 팝업 본문 자체가 스크롤 컨테이너가 된다 → 표의 세로 스크롤을 풀어
   "겉스크롤 안의 스크롤"(같은 축 중첩)을 없앤다. 세로 스크롤은 시트 하나만 갖는다.
   max-height 만 해제하면 박스 높이가 내용 높이가 되어 세로로는 넘칠 것이 없어지고,
   overflow:auto 는 그대로 둬서 표가 좁은 폭에서 가로로 넘칠 때의 가로 스크롤은 유지된다.
   (overflow-y 만 visible 로 두는 건 불가 — 한 축이 visible 이 아니면 CSS 가 visible 을 auto 로 계산한다) */
@media (max-width: 1280px) {
    .lw_dwq_twrap { max-height: none; }
}
.lw_dwq_table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.lw_dwq_table th { position: sticky; top: 0; background: #eef2f7; color: #1e2124; font-weight: 500; padding: 8px 6px; border-bottom: 1px solid #cdd1d5; white-space: nowrap; font-size: 13px; text-align: center; }
.lw_dwq_table td { padding: 4px 6px; border-bottom: 1px solid #cdd1d5; color: #1e2124; text-align: center; word-break: break-word; }
.lw_dwq_table th + th, .lw_dwq_table td + td { border-left: 1px solid #cdd1d5; }
.lw_dwq_table th:first-child { padding-left: 12px; }
.lw_dwq_table td:first-child { text-align: left; padding-left: 12px; }
/* 열 너비 비율 (table-layout:fixed 기준) — 업체명30·제품명30·수거일자20·적합여부20 */
.lw_dwq_table th:nth-child(1) { width: 30%; }
.lw_dwq_table th:nth-child(2) { width: 30%; }
.lw_dwq_table th:nth-child(3) { width: 22%; }
.lw_dwq_table th:nth-child(4) { width: 18%; }
.lw_dwq_badge { display: inline-block; min-width: 42px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 400; line-height: 1.1; background: #fff; }
.lw_dwq_badge.ok { border: 1px solid var(--lw-green); color: #009b24; background-color: #f4fff9; }
.lw_dwq_badge.bad { border: 1px solid #e0362c; color: #e0362c; background-color: #fff7f6; }
.lw_dwq_badge.none { border: 1px solid #c4c4c4; color: #8a93a3; background-color: #f8f8f8; }
.lw_dwq_empty { text-align: center; color: #8a93a3; padding: 16px; }
.lw_dwq_warn { margin: 10px 0 0; padding: 10px 12px 10px 12px; list-style: none; background: #fff7f6; border-radius: 8px; }
.lw_dwq_warn li { position: relative; padding-left: 18px; font-size: 13px; color: #e0362c; line-height: 1.7; }
.lw_dwq_warn li::before { content: "\26A0"; position: absolute; left: 0; top: 0; }

/* ── 물의 여정 패널 ─────────────────────────────────────── */
/* 물의여정 팝업 — 생활속물모아_수정2.psd 실측 : 팝업 326 / 콘텐츠가 헤더 구분선(좌우 인셋 23) 안쪽으로 들어옴
   본문 좌우 18 + 항목 좌우 4 = 아이콘 좌 22 · 상단 16 → 구분선과 붙어 보이지 않게 (이전 좌 8 / 상 4) */
.lw_wjpop { width: 326px; }
.lw_wjpop .lw_infopop_body { max-height: 62vh; overflow-y: auto; padding: 16px 18px 8px; }
.lw_wj_list { list-style: none; margin: 0; padding: 2px; }
.lw_wj_step { position: relative; }
.lw_wj_step { height: 83px; }                            /* 행 높이 = 아이콘 박스 고정 → 화살표가 항상 아이콘 사이 중앙 */
.lw_wj_step:not(:last-child) { margin-bottom: 28px; }   /* PSD 행 간격(그룹 83 + 28) */
.lw_wj_item { display: flex; align-items: flex-start; gap: 20px; width: 100%; padding: 0 4px; border: 0; background: transparent; text-align: left; cursor: pointer; border-radius: 10px; }
.lw_wj_item.disabled { opacity: .45; cursor: default; }
/* 아이콘 박스 (PSD 72x83, 시안: 비선택 연회색 + 초록 글리프 / 선택 초록 + 흰 글리프) */
.lw_wj_ico { position: relative; flex: none; width: 72px; height: 83px; border-radius: 14px;
    background-color: #f4f5f6; background-repeat: no-repeat; background-position: center; background-size: auto; }
.lw_wj_step.is_passed .lw_wj_ico { background-color: #c9f4c9; }   /* 시안: 선택 이전 단계 연초록 */
.lw_wj_step.is_sel .lw_wj_ico { box-sizing: border-box; border: 2px solid #25bd69;
    background: linear-gradient(135deg, #2ed673 0%, #12b95a 100%); }   /* 활성: 초록 그라데이션 + 2px 테두리 #25bd69 (첨부 시안) */
/* 단계 연결선 */
/* 단계 연결: 이중 화살표 (PSD >> 12x16) — 행(li) 기준으로 간격(28px) 세로 중앙, 선택 단계 다음은 초록 */
.lw_wj_step:not(:last-child)::after { content: ""; position: absolute; left: 40px; bottom: -22px;
    width: 12px; height: 16px; transform: translateX(-50%);
    background: url("/com/web/lifeWater/images/wj/wj_arrow.png") no-repeat center / 12px 16px; }
.lw_wj_step.is_sel:not(:last-child)::after {
    background-image: url("/com/web/lifeWater/images/wj/wj_arrow_on.png"); }
.lw_wj_info { display: flex; flex-direction: column; gap: 0; min-width: 0; padding-top: 4px; }
    /* PSD 실측(팝업기준) : 아이콘박스 72~155 / 단계명행 76~92 / 설명 101~114 / pill 121~153
       → 상단 4 + 단계명 16 + 9 + 설명 13 + 7 + pill 32 = 81 ≤ 83 (아이콘 박스 안에 딱 들어감) */
.lw_wj_tit { font-size: 15px; line-height: 16px; font-weight: 600; color: #1e2124; display: flex; align-items: center; gap: 8px; }   /* PSD : 15px Bold #1E2124, 행 16(번호 원과 동일) */
.lw_wj_no { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #6d7882; color: #fff; font-size: 10.5px; font-weight: 800; }   /* 시안 실측: 회청 원 16px */
.lw_wj_step.is_sel .lw_wj_no { background: var(--lw-primary); }   /* 선택 단계: 숫자 동그라미 = 지도 활성 마커 배지와 동일 primary */
.lw_wj_desc { font-size: 13px; line-height: 13px; margin: 9px 0 7px; color: #464c53; font-style: normal; }   /* PSD : 13px Regular #464C53, 위 9 / 아래 7 */
.lw_wj_loc { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; padding: 7px 12px 7px 12px; border-radius: 8px; background: #fff; border: 1px solid #cdd1d5; color: #1e2124; font-size: 13px; line-height: 16px; font-weight: 600; }   /* 시안: 라운드 8 / PSD 글자 13px Bold, 박스 높이 32 = 7+16+7+테두리2 */
.lw_wj_num { color: #0b50d0; }   /* 하수관로(5번) 위치의 숫자만 강조 */
.lw_wj_loc::before { content: ""; flex: none; width: 11px; height: 15px;
    background: url("/com/web/lifeWater/images/lw_loc_pin.png") no-repeat center / 11px 15px; }   /* 시안 핀 (디자이너 icon_위치) */
.lw_wj_loc p { margin: 0; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 공통 CSS 의 p{line-height:1.5} 를 덮어써 pill 높이 32 유지 */
.lw_wj_item.disabled .lw_wj_loc { background: #f0f2f5; color: #9aa4b2; border-color: #d5dbe4; }
/* 하단 자세히보기 (시안: 파란 pill 중앙) */
/* 자세히보기 버튼 — 생활속물모아_수정2.psd : 117×36, #256EF4, 13px Bold, 마지막 단계와 충분히 띄움 */
.lw_wj_morewrap { text-align: center; padding-top: 20px; }
/* 데이터 성격 안내 (기획 2026-09-22). 색은 정보팝업 출처 줄(.lw_wp_src)과 같은 결.
   NOTE: 시안은 2줄이지만 실제는 3줄이다. 폰트 하한(디자이너 기준 : 12px 이하 금지)과
         문구 유지(기획 : 줄일 수 없음)가 겹쳐 이 폭에서는 2줄이 불가능하다 — 3줄로 확정(2026-09-22).
     실측(문단 가용폭 280px / 팝업 .lw_wjpop 326px 고정, 시안 분절 「…정보로,」 기준) —
       13px  : 1행 288px → 8px 넘쳐 3줄  ← 현재
       12.5px: 1행 277px → 2줄
       12px  : 1행 266px → 2줄
     ※ 2줄이 꼭 필요해지면 .lw_wjpop 폭을 326 → 340px 로 넓히면 13px 로도 2줄이 된다(+8px 이면 충분).
     내어쓰기(padding-left + 음수 text-indent)는 넣지 않는다 — 가용폭이 줄어 줄 수가 더 늘고,
     시안도 이어지는 줄이 왼쪽 끝에서 시작한다. */
.lw_wj_note { margin: 16px 0 0; padding-bottom: 20px;
    font-size: 13px; line-height: 1.5; color: #6d7882; }   /* 줄간격 1.5 · 아래여백 20px (디자이너 2026-09-22) */
.lw_wj_more { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 50%; padding: 10px 4px; border: 0; border-radius: 26px;
    background: var(--lw-primary); color: #fff; font-size: 15px; font-weight: 400; cursor: pointer; }
.lw_wj_more:hover { background: #1d5ede; }
.lw_wj_more_arw { display: block; height: 11px; width: auto; }   /* 자세히보기 우측 화살표(SVG) — 기존 › 대체 */
/* 단계별 아이콘 색 + 글리프 (지도 마커 색과 동일) */
/* 단계별 아이콘 — 원래 물의여정 step_icon SVG(흰 글리프)를 mask 로 색 제어 (비선택 초록 / 선택 흰) */
.lw_wj_ico::before { content: ''; position: absolute; inset: 0; margin: auto; width: 32px; height: 32px;
    background: #13c561; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; }
.lw_wj_step.is_sel .lw_wj_ico::before { background: #fff; }
.lw_wjpop .wj01 .lw_wj_ico::before { -webkit-mask-image: url("/com/waterJourney/images/step_icon01.svg"); mask-image: url("/com/waterJourney/images/step_icon01.svg"); }
.lw_wjpop .wj02 .lw_wj_ico::before { -webkit-mask-image: url("/com/waterJourney/images/step_icon02.svg"); mask-image: url("/com/waterJourney/images/step_icon02.svg"); }
.lw_wjpop .wj03 .lw_wj_ico::before { -webkit-mask-image: url("/com/waterJourney/images/step_icon03.svg"); mask-image: url("/com/waterJourney/images/step_icon03.svg"); }
.lw_wjpop .wj04 .lw_wj_ico::before { -webkit-mask-image: url("/com/waterJourney/images/step_icon04.svg"); mask-image: url("/com/waterJourney/images/step_icon04.svg"); }
.lw_wjpop .wj05 .lw_wj_ico::before { -webkit-mask-image: url("/com/waterJourney/images/step_icon05.svg"); mask-image: url("/com/waterJourney/images/step_icon05.svg"); }
.lw_wjpop .wj06 .lw_wj_ico::before { -webkit-mask-image: url("/com/waterJourney/images/step_icon06.svg"); mask-image: url("/com/waterJourney/images/step_icon06.svg"); }
.lw_wjpop .wj07 .lw_wj_ico::before { -webkit-mask-image: url("/com/waterJourney/images/step_icon07.svg"); mask-image: url("/com/waterJourney/images/step_icon07.svg"); }

/* 상단 정보 카드 */
/* 상단 흰색 패널 (헤더+카드 배경 — 좌우/상단 플러시) */
.lw_top_band { position: absolute; top: 0; left: 0; right: 0; height: 200px; z-index: 8;
    background: rgba(255,255,255,0.86); transition: height 0.5s ease; }   /* mini 전환 0.5초 */
.lw_map_area.is_cards_hidden .lw_top_band { height: 93px; }   /* PSD #TOP_mini ㅁ 1482x93 */

/* 상단 헤더 (오늘의 물모아 + 날짜 + 스마트 대시보드) — 시안 실측 y13 h38 */
.lw_cards_head { position: absolute; top: 13px; left: 20px; right: 20px; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; height: 38px;
    transition: opacity 0.75s ease 0.25s; }   /* 펼침(복귀) = 느리게 + 시작 0.25s 지연 */
.lw_map_area.is_cards_hidden .lw_cards_head { opacity: 0; pointer-events: none; transition: opacity 0.175s ease; }   /* 접힘 = 빠르게 */
.lw_ch_left { display: flex; align-items: center; gap: 14px; }
.lw_ch_tit_img { display: block; height: 16px; width: auto; }   /* 높이 16px (원본 108x18) */
.lw_ch_date { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px;
    background: #fff; border: none; border-radius: 18px; box-shadow: 0 2px 8px rgba(17,24,39,0);
    font-size: 15px; font-weight: 400; color: #374151; }
.lw_ch_cal { width: 14px; height: 14px; display: block; }
.lw_ch_dash { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 18px;
    background: #fff; border: 1px solid #e2e6ec; border-radius: 19px; font-size: 14px; font-weight: 400; color: #1e2124; cursor: pointer; }
.lw_ch_dash:hover { background: #f3f6fb; }
.lw_ch_ext { width: 13px; height: 13px; display: block; }

.lw_cards { position: absolute; top: 60px; left: 20px; right: 20px; z-index: 10;
    display: flex; gap: 12px; padding: 0;
    background: none; border: none; box-shadow: none; overflow-x: auto; overflow-y: hidden;
    transition: opacity 0.75s ease 0.25s; }   /* 펼침(복귀) = 느리게 + 시작 0.25s 지연 */
.lw_card { display: flex; flex-direction: column; }
.lw_map_area.is_cards_hidden .lw_cards { opacity: 0; pointer-events: none; transition: opacity 0.175s ease; }   /* 접힘 = 빠르게 */

/* 카드 상세 요소 (수자원/수질/홍수/가뭄) */
.lw_card .c_more { margin-left: auto; font-style: normal; font-size: 18px; font-weight: 800; color: #b4bcc7; }
.lw_card .c_illust { display: flex; align-items: center; justify-content: center; padding: 4px 0; flex: 1; }
.lw_card .c_illust_img { display: block; height: 40px; width: auto; }   /* PSD/시안 카드 일러스트 */
/* 홍수/가뭄 카드 본문 — 아이콘 좌 + 텍스트 우 (시안 배치) */
.lw_card .c_brow { display: flex; align-items: center; justify-content: center; gap: 29px; flex: 1; padding-top: 8px; }   /* PSD: 아이콘↔텍스트 31px */
.lw_card .c_brow .c_illust_img { height: 36px; }
.lw_card .c_btxt { font-size: 15px; color: #1d1f20; line-height: 1.5; }   /* 시안 실측 */
.lw_card .c_btxt .v_blue { color: #003ed1; font-weight: 600; font-size: 17px; }   /* 시안 없음/정상 진파랑 */
/* 상태값(없음·정상 / 주의보·경보 / 심각 …)은 상태에 따라 크기가 달라지면 안 된다.
   JS(_setChipState)가 경보 상태에서 v_blue 를 떼고 인라인 색만 넣으므로, 위 .v_blue 규칙만으로는
   경보일 때 크기가 .c_btxt(15px)로 떨어진다 → b 자체에 크기를 주어 상태와 무관하게 17px 로 고정한다. */
.lw_card .c_btxt b { font-size: 17px; font-weight: 600; }
.lw_card .c_place { font-size: 12px; color: #6b7280; margin-top: 2px; }
.lw_card .c_metric { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.lw_card .c_label { font-size: 11px; color: #6b7280; line-height: 1.25; }
.lw_card .c_val { font-size: 26px; font-weight: 800; color: #1d6fe0; letter-spacing: -.5px; }
.lw_card.is_eco .c_val { color: #16a34a; }
.lw_card .c_val small { font-size: 12px; font-weight: 700; }
.lw_card .c_date { font-size: 10.5px; color: #9aa3b0; margin-top: 6px; }

/* 수자원/수질 카드 (PSD 실측: 제목(22,16)/기준일(22,34)/핀(22,51)/수위(23,84)/게이지 83x39/next 19x67) */
.lw_card .c_gear { position: absolute; right: 13px; top: 12px; width: 15px; height: 16px; display: block; opacity: .85; }   /* PSD 톱니(카드 우측 15, 상단 14) */
/* 톱니를 버튼으로 감싼 경우 (항목 변경 — LW_cards.js) */
.lw_card .c_gear_btn { position: absolute; right: 6px; top: 5px; padding: 7px; border: 0; background: none; cursor: pointer; z-index: 6; }
.lw_card .c_gear_btn .c_gear { position: static; }
/* 항목 변경 드롭다운 (메인 card_more_list 패턴)
   position:fixed — 카드 행(.lw_cards)의 가로 스크롤 클립에 잘리지 않게, 위치는 LW_cards.js 가 카드 기준으로 지정 */
.lw_card .c_more_list { display: none; position: fixed; z-index: 90;
    margin: 0; padding: 5px; list-style: none; background: #fff; border: 1px solid #e1e6ec;
    border-radius: 10px; box-shadow: 0 8px 20px rgba(17,24,39,.15); }
.lw_card .c_more_list button { display: block; width: 100%; padding: 6px 18px; border: 0; background: none;
    font-size: 12.5px; color: #374151; cursor: pointer; border-radius: 7px; white-space: nowrap; }
.lw_card .c_more_list button:hover { background: #f4f7fb; }
.lw_card .c_more_list li.on button { color: var(--lw-blue-focus); font-weight: 800; background: #f0f5ff; }
/* SVG 물게이지 (83x39) — 물 차오름(정착 시 살짝 가라앉음) + 물결 흐름 */
.lw_card .c_gauge_svg { position: relative; margin-left: auto; flex: 0 0 83px; width: 83px; height: 39px; }
.lw_card .c_gauge_svg svg { display: block; width: 100%; height: 100%; }
.lw_card .c_gauge_svg .wg_txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 19px; font-weight: 800; color: #1f2937; }
.lw_card .c_gauge_svg .wg_txt small { font-size: 12px; font-weight: 700; }
/* 물 차오름은 LW_cards.js 가 SVG transform 속성을 rAF 로 제어 (파형 흐름은 SVG 내부 SMIL) */
.lw_card .c_date_top { font-size: 12px; color: #8a93a3; line-height: 1.2; min-height: 1.2em; }   /* 데이터 없어 비어도 한 줄 높이 유지 → 아래 요소 밀림 방지 */
.lw_card .c_loc { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: #4b5563; line-height: 1.2; }
.lw_card .c_loc_pin { display: block; width: 11px; height: 15px; }   /* 디자이너 icon_위치 */
.lw_card .c_mlabel { font-size: 15px; font-weight: 700; color: #1e2124; line-height: 1.15; }   /* PSD 65x32(2줄) */
.lw_card .c_metric { margin-right: 30px; }   /* next 세로버튼 자리 확보 */
.lw_card .c_gauge { margin-left: auto; flex: 0 0 83px; width: 83px; height: 39px; padding: 0;
    background: url("/com/web/lifeWater/images/lw_card_gauge.png") no-repeat center / 100% 100%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 19px; font-weight: 800; color: #1f2937; }   /* PSD img(83x39) 물 게이지 */
.lw_card .c_gauge small { font-size: 12px; font-weight: 700; }
.lw_card .c_grade { margin-left: auto; font-size: 19px; font-weight: 600; color: #0c9899; white-space: nowrap; }   /* 시안 18px (색은 JS 가 등급색으로) */
/* 수자원: 수위(PSD 14px) + 게이지 */
.lw_card .c_metric_w { margin-top: 7px; }
.lw_card .c_metric_w .c_mlabel { font-size: 15px; }
/* 수질: 좌 라벨(2줄) / 우측 열 = 약간좋음 위 + 물방울 아래 (PSD: 약간좋음 y71, 라벨 y76~108, 물방울 y99) */
.lw_card .c_metric_q { align-items: flex-start; margin-top: 4px; gap: 6px; }
.lw_card .c_metric_q .c_mlabel { padding-top: 4px; flex: 0 0 auto; width: 68px; }   /* 긴 항목명 고정폭 2줄 래핑 — 등급/방울 밀림 방지 */
.lw_card .c_gcol { margin-left: auto; display: inline-flex; flex-direction: column; align-items: center; gap: 9px; flex: 0 0 auto; }
.lw_card .c_gcol .c_grade { margin-left: 0; line-height: 1; }
.lw_card .c_dots { display: flex; align-items: flex-end; justify-content: center; margin: 0; }
.lw_card .c_dots svg { display: block; width: auto; height: 10px; overflow: visible; }   /* 높이 고정·폭 auto → 등급 개수(수질7·가뭄5·약수터2) 달라도 물방울 크기 일정 (활성 확대가 위로 삐져도 보이게) */
/* 분야선택형 카드(슬롯) : 게이지/다음버튼이 카드 밖으로 살짝 나와도 보이게 */
.lw_gcard { overflow: visible; }
.lw_gcard .c_gbody { flex: 1 1 auto; min-height: 0; padding-left: 8px; }   /* 그룹별 본문 컨테이너 (JS 주입) */
/* next(>) 클릭 시 다음 항목 본문이 우측 50px 에서 슬라이드+페이드로 즉시 나타남 (0.3s). 슬라이드 중에만 카드 클리핑 */
.lw_gcard.is_sliding { overflow: hidden; }
@keyframes lwCardSlideIn { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.lw_gcard .c_gbody.is_slide_in { animation: lwCardSlideIn 0.3s ease; }
/* 준비중(자리표시) 카드 */
.lw_gcard.is_ph .c_gbody { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.lw_gcard .c_gph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; }
.lw_gcard .c_gph_tit { font-size: 13px; font-weight: 800; color: #7f8a99; }
.lw_gcard .c_gph_msg { font-size: 12px; color: #a4adbb; }
/* 값(value) 표출 — 하천관리/하수도/상수도요금/지하수수위 */
.lw_card .c_metric_v { align-items: center; margin-top: 7px; position: relative; }
.lw_card .c_metric_v .c_mlabel { font-size: 15px; white-space: nowrap; line-height: 1.15; }   /* '수돗물 요금'+'(가정용)' 각 줄 nowrap → 좁아져도 항상 2줄(이미지1) */
.lw_card .c_val2 { margin-left: auto; font-size: 21px; font-weight: 600; color: #1e2124; letter-spacing: -.5px; white-space: nowrap; }   /* 시안: 값 숫자=진한 검정 (수자원 게이지값만 파랑) */
.lw_card .c_val2 small { font-size: 15px; font-weight: 400; color: #1e2124; }
.lw_card .c_vtag { position: absolute; top: -15px; right: 2px; font-size: 11px; color: #8a93a3; }
.lw_gcard .c_gbody { position: relative; }                 /* 하천 배경 기준 */
.lw_card .c_metric_v { position: relative; z-index: 1; }   /* 값/라벨을 강줄기 위로 */
/* 하천 : 우측 배경 강줄기(하천.svg) + 2행 레이아웃(수계·하천명 좌 / 하천길이·값 우) + 강물 차오름 애니(메인처럼) */
.lw_card .c_river_bg { position: absolute; right: 2px; top: 4px; height: 80px; width: auto; pointer-events: none; z-index: 0;
    animation: lw_river_rise 1.7s ease-out both; }   /* 위→아래 clip 리빌 = 강물 흐름(메인과 동일 방향) */
@keyframes lw_river_rise { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .lw_card .c_river_bg { animation: none; clip-path: none; } }
/* 수자원 게이지: 물 아래→위 차오름 (하천처럼 CSS clip 리빌 — 분야 재선택마다 스무쓰 재생) */
.lw_card .c_gauge_svg .lw_wg_rise { animation: lw_wg_rise 2.2s cubic-bezier(.45, 0, .55, 1) both; }
@keyframes lw_wg_rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .lw_card .c_gauge_svg .lw_wg_rise { animation: none; clip-path: none; } }
.lw_gcard .c_river_top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; position: relative; z-index: 1; }   /* PSD: 제목→수계 ~22px */
.lw_gcard .c_river_bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 4px; position: relative; z-index: 1; }   /* PSD: 수계→갈산천 ~17px */
.lw_card .c_river_lbl { flex: 0 0 auto; font-size: 12px; color: #8a93a3; }
.lw_card .c_river_nm  { font-size: 15px; font-weight: 600; color: #1e2124; }   /* PSD 갈산천=14px(제목과 동일) */
.lw_card .c_val2 small { margin-left: 2px; }   /* 단위가 수치에 너무 붙지 않게 */
/* 하수도 : 메인(.card_05) 물결+물방울 일러스트 — 우하단 배경 */
.lw_card .c_drop_bg { position: absolute; right: 0; bottom: 0; width: 150px; z-index: 0; pointer-events: none; overflow: hidden; border-radius: 0 0 14px 0; filter: saturate(1.3); }   /* 하수도 배경 물결 채도 +30% */
.lw_card .c_drop_bg .c_dropill { display: block; width: 100%; height: auto; }
.lw_card .c_dropill .lw_wwave { transform-box: fill-box; transform-origin: center; animation: lw_wwave 1.6s ease-out both; }
.lw_card .c_dropill .lw_wdrop { transform-box: fill-box; transform-origin: center; animation: lw_wdrop 1s cubic-bezier(.34,1.56,.64,1) .15s both; }
.lw_card .c_dropill .lw_wbub  { transform-box: fill-box; transform-origin: center; animation: lw_wbub 1.1s ease-out both; }
@keyframes lw_wwave { 0% { opacity: 0; transform: translateX(14px); } 35% { opacity: 1; } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes lw_wdrop { 0% { opacity: 0; transform: translateY(-14px) scale(.7); } 70% { opacity: 1; transform: translateY(0) scale(1.06); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes lw_wbub  { 0% { opacity: 0; transform: translateY(9px) scale(.6); } 60% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .lw_card .c_dropill .lw_wwave, .lw_card .c_dropill .lw_wdrop, .lw_card .c_dropill .lw_wbub { animation: none; opacity: 1; transform: none; } }

/* 물 데이터 분야 선택 대화상자 (gear) */
/* 분야 선택 드롭다운 — 헤더 없는 컴팩트본(톱니 아래) */
.lw_fieldpop { position: fixed; z-index: 95; width: 158px; max-width: calc(100vw - 16px); background: #fff; border-radius: 12px;
    box-shadow: 0 10px 26px rgba(17, 24, 39, .18); padding: 6px; }
.lw_fieldpop_list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px;
    max-height: 58vh; overflow-y: auto; }
.lw_fp_item { display: flex; align-items: center; gap: 7px; padding: 8px 10px;
    border: 1px solid #e5e9ef; border-radius: 8px; cursor: pointer; }
.lw_fp_item:hover { background: #f6f9ff; }
/* li(role=option) 키보드 포커스 링 (§0.13) */
.lw_fp_item:focus-visible { outline: 2px solid var(--lw-blue-focus); outline-offset: -2px; }
.lw_fp_nm { flex: 1; font-size: 13px; font-weight: 700; color: #374151; }
.lw_fp_soon { flex: 0 0 auto; font-size: 10px; font-style: normal; color: #9aa3b0; }
.lw_fp_radio { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #cfd6df; background: #fff; }
.lw_fp_item.is_on { border-color: var(--lw-blue-focus); }
.lw_fp_item.is_on .lw_fp_nm { color: var(--lw-blue-focus); }
.lw_fp_item.is_on .lw_fp_radio { border-color: var(--lw-blue-focus); box-shadow: inset 0 0 0 3px var(--lw-blue-focus); }
.lw_fp_item.is_soon .lw_fp_nm { color: #8a93a3; }
.lw_fp_item.is_dup { opacity: .45; cursor: not-allowed; }
.lw_fp_item.is_dup:hover { background: none; }
/* 세로 next 버튼 (PSD btn_Next 19x67 — 카드 우측) */
.lw_card .c_next { position: absolute; right: 12px; top: 43px; width: 14px; height: 63px;
    padding: 0; border: none; background: none; cursor: pointer; }
.lw_card .c_next img { display: block; width: 100%; height: 100%; }

/* 상단 정보 요약 바 (접힘 상태 — PSD #TOP_mini: 칩 234x53 top19 gap9)
   폭이 부족하면 min-width 에서 멈추고 자동으로 가로 스크롤 전환 (칩 찌그러짐/넘침 방지) */
.lw_cards_summary { position: absolute; top: 19px; left: 20px; right: 20px; z-index: 10;
    display: flex; opacity: 0; pointer-events: none;   /* 상시 렌더(크로스페이드용) — 기본은 투명 */
    align-items: stretch; gap: 9px; overflow-x: auto; transition: opacity 0.75s ease 0.25s; }   /* 펼침(복귀) = 느리게 + 시작 0.25s 지연 */
.lw_map_area.is_cards_hidden .lw_cards_summary { opacity: 1; pointer-events: auto; transition: opacity 0.175s ease; }   /* 접힘 = 빠르게 */
.lw_chip { flex: 1 1 0; min-width: 172px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 22px; min-height: 53px; background: #fff; border: 1px solid #4cb4ff; border-radius: 8px;
    box-shadow: 0 4px 10px rgba(17,24,39,0.05); }
.lw_chip.is_red { border-color: #f67273; }
.lw_chip.is_water { border-color: #266ef3; }
.lw_chip.is_water .chip_tit { color: #464c53; }
.lw_chip .chip_tit { font-size: 15px; font-weight: 500; color: #464c53; line-height: 1.15; white-space: nowrap; }
.lw_chip.is_red .chip_tit { color: #464c53; }
.lw_chip .chip_r { display: inline-flex; align-items: center; gap: 12px; }   /* PSD 캐릭터↔값 13px */
.lw_chip .chip_val { font-size: 15px; font-weight: 600; color: #1e2124; white-space: nowrap; }
.lw_chip .chip_val.v_blue { color: #003ed1; }
.lw_chip .chip_val.v_green { color: #0c9899; }
.lw_chip .chip_ico { display: block; }
.lw_chip .chip_char { display: block; width: 24px; height: 21px; }   /* PSD 하랑이 24x21 */
/* 수자원/수질 칩 — 탭하여 항목 전환 + 항목 개수 점 (모바일은 펼치기가 없어 이 칩이 유일한 표출/전환 수단) */
.lw_chip.lw_chip_multi { cursor: pointer; outline: none; }   /* 기본/마우스 포커스 테두리 없음 */
/* 키보드 포커스만 안쪽 링(밖으로 안 삐져 상단 잘림 없음) */
.lw_chip.lw_chip_multi:focus-visible { box-shadow: inset 0 0 0 2px var(--lw-blue-focus), 0 4px 10px rgba(17,24,39,0.05); }
.lw_chip.is_water .chip_tit { white-space: normal; line-height: 1.12; max-width: 86px; }   /* 긴 수질 항목명(생물화학적산소요구량) 2줄 허용 */
.lw_chip .lw_chip_rt { display: inline-flex; align-items: center; gap: 7px; }
.lw_chip_dots { display: inline-flex; align-items: center; gap: 3px; }
.lw_chip_dots i { display: block; width: 4px; height: 4px; border-radius: 50%; background: #cbd5e1; }
.lw_chip_dots i.on { width: 5px; height: 5px; background: var(--lw-blue-focus); }

/* 상단 카드 접기/펴기 탭 */
.lw_cards_toggle { position: absolute; top: 200px; left: 50%; transform: translateX(-50%); z-index: 12;
    width: 44px; height: 20px; border: none; border-radius: 0 0 8px 8px;
    background: rgba(255,255,255,0.86); box-shadow: 0 5px 10px rgba(17,24,39,0.10); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: top 0.5s ease; }
.lw_cards_toggle svg { transition: transform 0.5s ease; }
.lw_cards_toggle:hover { background: #fff; }
.lw_map_area.is_cards_hidden .lw_cards_toggle { top: 93px; }
.lw_map_area.is_cards_hidden .lw_cards_toggle svg { transform: rotate(180deg); }

/* ── 모바일 상단 전용 요소 (데스크톱·태블릿에서는 완전 비표시 / 실제 스타일은 §모바일 블록) ──
   위치 바 · 「외 N」 칩 · 위치 시트 — 전체창/태블릿 레이아웃에 영향 주지 않도록 여기서 숨긴다. */
.lw_mo_locbar { display: none; }
.lw_chip_more { display: none; }
.lw_sheet { display: none; }        /* 위치 시트 / 레이어 시트 (모바일 전용) */
.lw_mo_actbar { display: none; }
.lw_mo_menu { display: none; }      /* 드로어의 설정·안내 (모바일 전용) */
.lw_card { flex: 1 1 0; min-width: 220px; height: 122px; background: #fff;   /* 시안: 전 카드 균등폭 — 부족 시 행 가로 스크롤 */
    border: 1px solid #4cb4ff;   /* 파랑 테두리 (PSD 카드 — top 컬러바 없음) */
    border-radius: 8px; padding: 11px 12px; box-shadow: 0 4px 12px rgba(17,24,39,0.06);
    pointer-events: auto; position: relative; overflow: hidden; }
/* 앞 4장(날씨/대기정보/홍수특보/가뭄단계)은 내부 여백이 있어 더 줄 수 있음 → min-width 낮춰 가로 스크롤을 늦춤.
   5·6번(.lw_gcard)은 콘텐츠가 많아 220 유지. 넓은 화면은 flex-grow 로 균등 → 변화 없음(좁을 때만 앞 4장이 더 줄어듦). */
.lw_card:not(.lw_gcard) { min-width: 165px; }
.lw_card.is_alert { border-color: #f67273; }   /* 빨강 테두리 */
.lw_card.is_water { border-color: #266ef3; }   /* 수자원/수질 — 진파랑 (시안 실측) */
.lw_card .c_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1px; }
.lw_card .c_tit { font-size: 15px; font-weight: 500; color: #1e2124; padding-left: 8px; line-height: 1.1; }   /* 카드 제목 색 통일 #1e2124 (파랑/빨강/진파랑 override 제거) */
#lwWeatherTit { color: #0081de; }   /* 날씨 카드 제목(동명)만 파랑 */
.lw_card .c_main { font-size: 21px; font-weight: 700; letter-spacing: -.5px; }
.lw_card .c_main small { font-size: 15px; font-weight: 600; color: #1e2124; }
.lw_card .c_sub { font-size: 13px; color: #1e2124; margin-top: 4px; }
.lw_card .c_sub b { color: #374151; }
.lw_card .c_row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; margin-top: 6px; color: #4b5563; }
/* 카드 제목 색은 위 .c_tit 에서 #1e2124 로 통일 — is_alert/is_water/is_eco 별 색상 override 제거 */

/* 날씨 카드 (PSD: 해 38px x38 들여쓰기 / 온도 x99 → 갭 23) */
.lw_card .c_weather { display: flex; align-items: center; gap: 22px; padding-left: 16px; margin-top: 12px; }
.lw_card .c_weather .c_ico { flex: 0 0 38px; width: 38px; height: 38px; }
.lw_card .c_status { margin-top: 2px; }

/* 대기정보 카드 — 2박스 나란히 (시안) */
.lw_card .c_airboxes { display: flex; gap: 8px; margin-top: 12px; }
.lw_card .c_airbox { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; padding: 10px 4px; background: #edf8fe; border-radius: 8px; }   /* 기본(등급 부여 전) */
/* 등급별 배경 = 상세 팝업 -bg 팔레트와 동일 (JS _setAir 가 .c_airbox 에 등급 클래스 부여) */
.lw_card .c_airbox.air_good   { background: var(--lw-air1-bg); }   /* 좋음 */
.lw_card .c_airbox.air_normal { background: var(--lw-air2-bg); }   /* 보통 */
.lw_card .c_airbox.air_bad    { background: var(--lw-air3-bg); }   /* 나쁨 */
.lw_card .c_airbox.air_vbad   { background: var(--lw-air4-bg); }   /* 매우나쁨 */
.lw_card .c_airbox.air_none   { background: var(--lw-air5-bg); }   /* 데이터없음 */
.lw_card .c_airbox span { font-size: 13px; color: #1e2124; font-weight: 400; }
.lw_card .c_airbox b { font-size: 15px; font-weight: 600; }
.lw_card .air_vbad,  .lw_chip .chip_val.air_vbad  { color: #c50c13; }   /* 매우나쁨 (카드+요약칩 공통) */
.lw_card .air_bad,   .lw_chip .chip_val.air_bad   { color: #f97316; }   /* 나쁨 */
.lw_card .air_normal,.lw_chip .chip_val.air_normal{ color: #009923; }   /* 보통 */
.lw_card .air_good,  .lw_chip .chip_val.air_good  { color: #003ed1; }   /* 좋음 */
.lw_card .air_none,  .lw_chip .chip_val.air_none  { color: #8a93a3; }   /* 데이터없음 */

/* 상태 뱃지 (대기/홍수/가뭄 등급) */
.badge { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 2px 9px; border-radius: 11px; }
.lv_good   { color: #1d4ed8; background: #e6efff; }
.lv_normal { color: #16a34a; background: #e6f6ec; }
.lv_bad    { color: #c2410c; background: #fdeede; }
.lv_vbad   { color: #dc2626; background: #fde4e4; }
.lv_safe   { color: #16a34a; background: #e6f6ec; }

/* 하단 범례 (토글 레이어 아이콘+이름) — 현재 숨김 (필요 시 display:flex 로 복구) */
.lw_legend { display: none; position: absolute; left: 16px; bottom: 14px; z-index: 10;
    flex-wrap: wrap; width: auto; max-width: calc(100% - 190px); gap: 7px 14px; padding: 9px 14px;
    background: rgba(255,255,255,0.96); border: 1px solid #eceef2; border-radius: 12px;
    box-shadow: 0 6px 18px rgba(17,24,39,.10); font-size: 11.5px; font-weight: 600; color: #4b5563; }
.lw_legend .lw_lg { display: inline-flex; align-items: center; gap: 5px; }
.lw_legend .lw_lg_ico { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center; }
.lw_legend .lw_lg_ico svg { width: 12px; height: 12px; }

/* 우리 동네 물길 : 좌측 패널 → 지도 좌측 하단 플로팅 토글 (JS 가 init 이후 .lw_map_area 로 이동) */
.lw_item.lw_flow_fab {
    position: absolute; left: 16px; bottom: 14px; z-index: 11;
    width: auto; height: auto; min-width: 0;
    gap: 8px; padding: 8px 12px;   /* 아이콘 ↔ 물길 = 8px */
    background: #ffffff; border: 1px solid #e5eaf1; border-radius: 8px;
    box-shadow: 0 6px 18px rgba(17,24,39,.14); cursor: default; }
.lw_item.lw_flow_fab:hover { transform: none; box-shadow: 0 6px 18px rgba(17,24,39,.14); }
.lw_item.lw_flow_fab .lw_item_ico { flex: 0 0 23px; width: 23px; height: 13px; }
.lw_item.lw_flow_fab .lw_item_nm { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: #1e2124; }
.lw_item.lw_flow_fab .lw_item_cnt { display: none; }
.lw_item.lw_flow_fab .lw_switch { margin-left: 10px; }   /* 물길 ↔ 토글 = gap 8 + 10 = 18px */

/* 지도 스케일 (우측 하단) — 배경 투명. gis_core moveend 가 #scale 텍스트 / .scale_bar 너비 갱신 */
.wf_map_scale { position: absolute; right: 16px; bottom: 14px; z-index: 11;
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; border: none; box-shadow: none;
    font-size: 12px; font-weight: 700; color: #374151; text-shadow: 0 1px 2px rgba(255,255,255,0.9); }
.wf_map_scale .scale_bar { height: 6px; min-width: 20px; border: 1px solid #4b5563; border-top: none;
    display: inline-block; }
.wf_map_scale strong { white-space: nowrap; }
/* OL 기본 스케일선: 숨기되 치수는 계산되도록 화면 밖으로(gis.css 의 display:none 덮어씀) */
.ol-scale-line { display: block !important; position: absolute; left: -10000px; bottom: 0; }

/* 우측 툴바 (확대/축소/거리/면적/배경맵) */
.lw_tools { position: absolute; right: 16px; bottom: 56px; z-index: 11;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.lw_tools button { cursor: pointer; }

/* 확대/축소 (폭 50 — 다른 툴 버튼과 동일) */
.lw_zoom { display: flex; flex-direction: column; width: 47px; background: #fff;
    border: 1px solid #e5e7eb; border-radius: 4px; overflow: hidden; box-shadow: 0 6px 16px rgba(17,24,39,.12); }
.lw_zoom_btn { width: 100%; height: 44px; border: none; background: #fff;
    display: flex; align-items: center; justify-content: center; }
.lw_zoom_btn + .lw_zoom_btn { border-top: 1px solid #eceef2; }
.lw_zoom_btn:hover { background: #f3f6fb; }

/* 거리/면적 (한 박스로 묶음 — 줌과 동일 형태) */
/* 버튼들은 각자 radius 로 모서리 처리 (측정 안내는 지도 중앙 상단 배너 .lw_measure_noti 로 표시) */
.lw_toolgrp { position: relative; width: 47px; background: #fff; border: 1px solid #e5e7eb; border-radius: 4px;
    overflow: visible; box-shadow: 0 6px 16px rgba(17,24,39,.12); }
.lw_tool:first-of-type { border-radius: 4px 4px 0 0; }
.lw_tool:nth-of-type(2) { border-radius: 0 0 4px 4px; }
.lw_tool { width: 100%; height: 44px; border: none; background: #fff; color: #4b5563;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding-top: 8px;
    font-size: 11px; font-weight: 600; transition: background .12s, color .12s; }
.lw_tool + .lw_tool { border-top: 1px solid #eceef2; }
.lw_tool:hover { background: #f3f6fb; }
.lw_tool.on { background: #eaf1ff; color: var(--lw-blue); }
.lw_tool_ico { display: block; height: 12px; width: auto; }   /* PSD 면적 아이콘 원본 15x12 */
#lwDist .lw_tool_ico { height: 9px; }                         /* PSD 거리(자) 아이콘 원본 16x9 */
/* 거리/면적 측정 안내 배너 — 지도영역 중앙 상단(카드 밴드 아래). 측정 모드(.is_on)일 때만 표시.
   닫기(✕) = 측정 종료(그려진 측정 내용 전부 삭제). 문구는 JS(_bindMeasure)가 세팅
   top 은 "밴드하단 + 40px" — 카드 접기/펼치기 버튼(.lw_cards_toggle)이 같은 가로 중앙에
   밴드하단부터 24px 를 차지하므로, 그 아래로 16px 띄워 겹치지 않게 한다 */
.lw_measure_noti { display: none; position: absolute; top: 234px; left: 50%; transform: translateX(-50%);
    z-index: 13; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 16px; white-space: nowrap;
    background: #fff; border: 1px solid var(--lw-blue); border-radius: 10px;
    box-shadow: 0 6px 16px rgba(17,24,39,.12); font-size: 14px; font-weight: 600; color: #374151; }
.lw_measure_noti.is_on { display: inline-flex; }
/* 카드 접힘 시 밴드가 194px→93px 로 줄어드므로 배너도 함께 올라간다 (동일하게 밴드하단 + 40px) */
.lw_map_area.is_cards_hidden .lw_measure_noti { top: 133px; }
.lw_mn_ico { flex: 0 0 auto; width: 18px; height: 18px;
    background: url('/com/gis/images/icon_noti_info.png') no-repeat center / contain; }
.lw_mn_x { flex: 0 0 auto; width: 26px; height: 26px; border: 0; background: none; cursor: pointer;
    font-size: 15px; font-weight: 700; color: #9aa4b2; line-height: 1; border-radius: 6px;
    transition: background .12s, color .12s; }
.lw_mn_x:hover { background: #fff5f5; color: #d8210d; }

/* 배경맵 전환 버튼 (툴바 내) — 좌측에 펼침 표시(<) */
.lw_basemap_btn { position: relative; width: 47px; height: 47px; border: none; border-radius: 4px;
    background: var(--lw-primary); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; 
    font-size: 11px; font-weight: 700; box-shadow: 0 6px 16px rgba(29,99,216,.35); transition: transform .12s, box-shadow .12s; }
.lw_basemap_btn::before { content: ''; position: absolute; left: 6px; top: 40%; width: 6px; height: 6px;
    border-top: 2px solid rgba(255,255,255,0.95); border-left: 2px solid rgba(255,255,255,0.95);
    transform: translateY(-50%) rotate(-45deg); transition: transform .2s; }
.lw_basemap_btn.is_open::before { transform: translateY(-50%) rotate(135deg); } /* 열리면 > 방향 */
.lw_basemap_btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(29,99,216,.45); }
.lw_basemap_btn svg { display: block; }
.lw_bm_ico { display: block; height: 12px; width: auto; }      /* PSD 배경맵(지도선택) 아이콘 원본 16x12 — 흰색 */

/* 배경맵 전환 팝업 */
.lw_basemap_pop { position: absolute; right: 72px; bottom: 56px; z-index: 12; display: none;
     padding: 4px; background: rgba(255,255,255,0.5); border: 1px solid #e5e7eb; border-radius: 4px;
    box-shadow: 0 10px 26px rgba(17,24,39,0.18); }
.lw_basemap_pop.is_open { display: flex; }
.lw_bm_opt { width: 70px; padding: 4px 4px 0 4px; border: 2px solid transparent; border-radius: 4px;
    background: none; cursor: pointer; text-align: center; }
.lw_bm_opt .bm_img { display: block; }
.lw_bm_opt img { width: 60px; height: 44px; object-fit: cover; border-radius: 4px; display: block;
    border: 1px solid #e5e7eb; }
.lw_bm_opt em { display: block; font-style: normal; font-size: 12px; font-weight: 400; color: #1e2124; }
.lw_bm_opt:hover { border-color: #c9dbff; }
.lw_bm_opt.is_on { border-color: var(--lw-primary); }
.lw_bm_opt.is_on em { color: var(--lw-primary); font-weight: 600; }

/* ===================== 마커 툴팁 (마우스 오버) ===================== */
/* position:absolute 지정 금지 — OpenLayers 오버레이 컨테이너의 위치(transform) 계산을 무력화함 */
#lwTooltip { pointer-events: none; }   /* 호버 통과 — 단, 닫기(X)만 클릭 허용 */
.lw_tooltip { position: relative; display: block; min-width: 250px; max-width: 320px; padding: 13px 15px;
    background: #fff; border: 1px solid #eceef2; border-radius: 16px;
    box-shadow: 0 14px 32px rgba(17,24,39,0.22); text-align: left; white-space: normal; }
/* 헤더: 아이콘 + 카테고리 + 닫기 */
.lw_tt_head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lw_tt_ico { flex: 0 0 24px; width: 24px; height: 24px;   /* 색·모양은 타일 SVG 파일 내장 */
    display: inline-flex; align-items: center; justify-content: center; }
.lw_tt_ico img { width: 100%; height: 100%; display: block; }
.lw_tt_cat { flex: 1 1 auto; font-size: 12.5px; font-weight: 700; color: var(--lw-blue); }
.lw_tt_close { flex: 0 0 24px; width: 24px; height: 24px; border: none; background: transparent;
    font-size: 20px; line-height: 1; color: #9aa7bd; cursor: pointer; pointer-events: auto; }
.lw_tt_close:hover { color: #4b5563; }
/* 시설명 */
.lw_tt_nm { display: block; font-size: 16px; font-weight: 800; color: #111827; margin-bottom: 9px; }
/* 주소 */
.lw_tt_addr { display: flex; align-items: flex-start; gap: 5px; font-size: 13px; color: #3b4452;
    font-weight: 500; line-height: 1.45; margin-bottom: 11px; }
.lw_tt_addr svg { flex: 0 0 14px; margin-top: 2px; }
.lw_tt_addr svg path { fill: #5b6676; }
/* 점검일자/점검결과 박스 */
.lw_tt_boxes { display: flex; gap: 8px; }
.lw_tt_box { flex: 1 1 0; background: #eef1f6; border-radius: 10px; padding: 8px 10px; text-align: center; }
.lw_tt_box .k { display: block; font-size: 11.5px; font-weight: 600; color: #586273; margin-bottom: 3px; }
.lw_tt_box .v { display: block; font-size: 14px; font-weight: 800; color: #111827; }
/* 말풍선 꼬리 */
.lw_tooltip::after { content: ''; position: absolute; left: 50%; bottom: -6px;
    width: 12px; height: 12px; background: #fff; border-right: 1px solid #eceef2; border-bottom: 1px solid #eceef2;
    transform: translateX(-50%) rotate(45deg); }

/* ===================== 측정도구(거리/면적) 툴팁 — com/gis/css/gis.css 이식(rem→px) ===================== */
.dis_tip_sm { position: absolute; background: var(--lw-blue); border-radius: 8px; padding: 6px 10px; color: #fff;
    font-size: 14px; font-weight: 600; text-align: center; white-space: nowrap; }
.dis_tip_sm em { font-size: 12px; font-weight: 400; margin-left: 3px; }
.dis_tip_lg { position: absolute; padding: 6px 14px; background: #fff; border: 1px solid var(--lw-blue);
    border-radius: 8px; box-shadow: 0 3px 6px rgba(0,0,0,.2); white-space: nowrap; }
.dis_tip_lg span { font-size: 14px; margin-right: 6px; }
.dis_tip_lg b { font-size: 14px; font-weight: 600; color: #111827; }
.dis_tip_lg em { font-size: 13px; margin-left: 2px; }
.dis_tip_lg p { font-size: 13px; border-top: 1px solid #e5e7eb; padding-top: 4px; margin-top: 4px; }
.dis_tip_md { position: absolute; padding: 6px 38px 6px 14px; background: #fff; border: 1px solid var(--lw-blue);
    border-radius: 8px; box-shadow: 0 3px 6px rgba(0,0,0,.2); white-space: nowrap; }
.dis_tip_md span { font-size: 14px; margin-right: 6px; }
.dis_tip_md b { font-size: 14px; font-weight: 600; color: #111827; }
.dis_tip_md em { font-size: 14px; margin-left: 2px; }
.dis_tip_md.t_end { background: #ec4651; border: none; color: #fff; }
.dis_tip_md.t_end b { color: inherit; font-weight: 600; }
.btn_distipm_close { position: absolute; top: 10px; right: 12px; width: 13px; height: 13px; border: none;
    background: url("/com/gis/images/btn_noti_pop_close.svg") no-repeat center; cursor: pointer; }
/* 측정 도움 툴팁 */
.tooltip { position: absolute; background: rgba(17,24,39,.85); color: #fff; padding: 4px 9px; border-radius: 6px;
    font-size: 12px; white-space: nowrap; pointer-events: none; }
.tooltip.hidden { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   ■ 중앙 안내 알림 (정보 레이어 공통 — 미제공 지역 / 정보 없음 / 조회 실패)
   토글을 켰는데 보여줄 데이터가 없을 때 사유를 알리고 토글을 닫는다.
   빈 화면으로 두면 「우리 지역은 해당 정보가 없다」는 오해를 만들기 때문이다.
   ※ 문구·아이콘은 JS(_NOTICE)가 text() 로만 주입한다 (§0.14 XSS)
   ═══════════════════════════════════════════════════════════════════ */
.lw_notice { position: fixed; inset: 0; z-index: 1100; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(17, 24, 39, .45); }
.lw_notice.is_open { display: flex; }
.lw_notice_box { width: 100%; max-width: 380px; padding: 28px 24px 22px;
    background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(17, 24, 39, .22);
    text-align: center; }
.lw_notice_ico { display: block; line-height: 1; margin-bottom: 12px; }
.lw_notice_ico img { display: inline-block; height: 42px; width: auto; }   /* SVG 아이콘(핀/원/삼각) */
.lw_notice_tit { display: block; font-size: 17px; font-weight: 600; color: #1e2124;
    line-height: 24px; word-break: keep-all; }
.lw_notice_desc { margin: 8px 0 0; font-size: 15px; color: #6d7882; line-height: 21px;
    word-break: keep-all; }
.lw_notice_ok { margin-top: 20px; min-width: 96px; padding: 8px 20px; border: 0;
    border-radius: 999px; background: var(--lw-blue-deep); color: #fff;
    font-size: 14px; font-weight: 600; cursor: pointer; }
.lw_notice_ok:hover { background: var(--lw-blue-focus); }
.lw_notice_ok:focus-visible { outline: 2px solid var(--lw-blue-focus); outline-offset: 2px; }

/* 모바일 — 데스크톱 치수(380px·30px 아이콘)를 그대로 쓰면 화면 폭의 90% 를 덮어 과하게 크다.
   폭을 320 으로 줄이고(375 기준 85%) 아이콘·글자·버튼도 한 단계씩 낮춘다.
   낮은 화면(가로모드 등)에서 문구가 길어져 넘칠 때를 대비해 시트가 스크롤되게 둔다. */
@media (max-width: 768px) {
    .lw_notice { padding: 16px; overflow-y: auto; }
    .lw_notice_box { max-width: 320px; padding: 22px 16px 16px; max-height: calc(100dvh - 32px); }
    .lw_notice_ico { margin-bottom: 10px; }
    .lw_notice_ico img { height: 34px; }
    .lw_notice_tit { font-size: 15px; line-height: 22px; }
    .lw_notice_desc { margin-top: 6px; font-size: 12.5px; line-height: 19px; }
    .lw_notice_ok { margin-top: 16px; min-width: 88px; padding: 9px 20px; font-size: 13.5px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ■ 단수정보 정보레이어 (A′안 — 섹션형 목록)
   확정안 : doc/공공데이터/단수정보_정보레이어_UI제시안_20260804.html
   구조 : [안내배너] → [섹션(진행중/예정/최근종료 · 제주는 안내)] → [항목 카드] → [출처]
   ※ 다른 팝업(.lw_wp_state / .lw_dp_meta)과 어울리도록 배경·라운딩·글자크기를 맞췄다.
   ═══════════════════════════════════════════════════════════════════ */

/* 폭 : 기본 소팝업(324)으로는 제주 본문이 3줄씩 흐르고 문의 전화번호까지 중간에서 끊긴다
   → 먹는샘물 팝업(.lw_dwqpop)과 같은 460 으로 넓힌다. 같은 화면에서 이미 쓰는 폭이라 튀지 않는다.
   (태블릿·모바일은 미디어쿼리가 width:auto !important 로 덮으므로 여기 값은 데스크톱에만 적용된다) */
.lw_infopop.is_ws { width: 460px; }

/* 제주는 본문(contents)을 전량 노출해 패널이 길어진다 → 헤더는 두고 본문만 스크롤한다.
   (물의여정 .lw_wjpop 과 같은 방식. #lwDataPop 은 다른 레이어와 공유하는 팝업이라
    단수정보일 때만 JS 가 붙이는 .is_ws 로 한정한다.)
   ※ 특이도를 '.lw_infopop .lw_infopop_body' 와 같은 0,2,0 으로 맞춰 두었다 —
     태블릿·모바일 미디어쿼리의 플렉스 채움 규칙(max-height:none)이 뒤에 와서 이기게 하려는 것.
     바텀시트에서는 시트 높이에 맞춰 채워야 하므로 여기 62vh 가 적용되면 안 된다. */
.is_ws .lw_infopop_body { max-height: 62vh; overflow-y: auto; }

/* 안내 배너 — 진행중 0건 / 최근종료 대체 / 미제공 / 조회실패 / 오래된 안내 공통 */
.lw_ws_hint { display: flex; gap: 10px; align-items: flex-start;
    background: #ecf2fe; border-radius: 8px; padding: 14px 16px; margin-bottom: 13px; }
.lw_ws_hint .ico { flex: 0 0 auto; font-size: 17px; line-height: 22px; }
.lw_ws_hint .tx { flex: 1 1 auto; min-width: 0; }
/* 안내 문장은 어절 단위로만 끊는다 — 한글은 기본값(word-break:normal)에서도 음절이 갈려
   「…표시합니 / 다」 처럼 한 글자가 다음 줄로 떨어진다 */
.lw_ws_hint b { display: block; font-size: 15px; font-weight: 600; color: #1e2124; line-height: 22px;
    word-break: keep-all; }
.lw_ws_hint span { display: block; margin-top: 3px; font-size: 13px; color: #6d7882; line-height: 20px;
    word-break: keep-all; }
/* 미제공·조회실패는 중앙 알림(.lw_notice)이 담당한다 → 여기 남는 변형은 '오래된 안내' 하나뿐 */
.lw_ws_hint.is_none { background: #f4f5f6; }    /* 제주 · 등록 14일 이내 새 안내 없음 */

/* 섹션 헤더 — 「진행중 4」 (색 막대 + 건수 배지) */
.lw_ws_sec + .lw_ws_sec { margin-top: 16px; }
.lw_ws_sec_h { display: flex; align-items: center; gap: 7px; margin: 0 0 8px;
    font-size: 15px; font-weight: 600; color: #1e2124; }
.lw_ws_sec_h::before { content: ""; flex: 0 0 auto; width: 3px; height: 14px; border-radius: 2px;
    background: var(--c, #939393); }
.lw_ws_sec_h .sc { flex: 0 0 auto; min-width: 18px; padding: 0 6px; border-radius: 999px;
    background: var(--c-bg, #f4f5f6); font-size: 12px; font-weight: 600; color: var(--c, #6d7882);
    text-align: center; line-height: 18px; }
.lw_ws_sec.s_now  { --c: var(--lw-wst-now);  --c-bg: var(--lw-wst-now-bg); }
.lw_ws_sec.s_soon { --c: var(--lw-wst-soon); --c-bg: var(--lw-wst-soon-bg); }
.lw_ws_sec.s_done { --c: var(--lw-wst-done); --c-bg: var(--lw-wst-done-bg); }
.lw_ws_sec.s_info { --c: var(--lw-wst-info); --c-bg: var(--lw-wst-info-bg); }

/* 항목 카드 */
.lw_ws_itm { background: #fff; border: 1px solid #e6eaef; border-radius: 8px; padding: 14px 14px; }
.lw_ws_itm + .lw_ws_itm { margin-top: 8px; }
.lw_ws_top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 10px; }
.lw_ws_tm { font-size: 17px; font-weight: 600; color: #1e2124; }
.lw_ws_nx { font-size: 13px; font-weight: 600; color: #6d7882; }   /* (익일) */
/* D-day 알약 — 오늘/진행중은 채운 색, 그 외는 연한 배경 */
.lw_ws_dday { padding: 2px 9px; border-radius: 999px; background: var(--c-bg, #f4f5f6);
    font-size: 12px; font-weight: 600; color: #1e2124; }
.lw_ws_dday.is_now { background: var(--lw-wst-now); color: #fff; }
/* 상태 알약 (제주 — 「안내」) */
.lw_ws_st { padding: 2px 9px; border-radius: 999px; background: var(--c-bg, #f4f5f6);
    font-size: 13px; font-weight: 600; color: var(--c, #6d7882); }
/* 단수지역(또는 제목)
   keep-all + overflow-wrap:anywhere : 한글 단어 중간을 끊지 않되, 제주 제목의
   '일원_노후상수관망' 처럼 공백 없이 긴 토큰은 넘칠 때만 끊는다 (break-all 은 단어를 아무데서나 끊는다) */
.lw_ws_area { font-size: 15px; font-weight: 600; color: #0b50d0; line-height: 26px;
    word-break: keep-all; overflow-wrap: anywhere; }
.lw_ws_meta { font-size: 13px; color: #464c53; line-height: 20px;
    word-break: keep-all; overflow-wrap: anywhere; }
.lw_ws_meta .dot { margin: 0 5px; color: #c3c9d0; }
.lw_ws_noarea { color: #464c53; }   /* 「단수지역 미제공」 */
/* 물받기 안내 (공지문 원문 표현 범위) */
.lw_ws_tip { position: relative; margin-top: 8px; padding-bottom: 8px; padding-left: 14px;
    border-bottom: 1px dashed #e6eaef; font-size: 13px; color: #1e2124; line-height: 1.5; word-break: keep-all; }
.lw_ws_tip::before { content: ""; position: absolute; left: 2px; top: 9px;
    width: 5px; height: 5px; border-radius: 50%; background: #256ef4; }
.lw_ws_tip > span[aria-hidden="true"] { display: none; }   /* 💧 아이콘 숨김 → 파란 불릿(::before)로 대체 */

/* 제주 본문 (contents 전량 노출) — 개행 구조를 줄 단위로 살린다 */
.lw_ws_body { margin-top: 9px; padding-top: 9px; border-top: 1px solid #eef1f5; }
.lw_ws_body p { margin: 0; font-size: 13.5px; color: #1e2124; line-height: 21px;
    word-break: keep-all; overflow-wrap: anywhere; }
.lw_ws_body p + p { margin-top: 3px; }
.lw_ws_body p.h { margin-top: 8px; font-weight: 700; }          /* ○ 로 시작하는 소제목 */
.lw_ws_body p.h:first-child { margin-top: 0; }
.lw_ws_body p.li { padding-left: 9px; color: #464c53; }          /* - 로 시작하는 항목 */
.lw_ws_body p.rf { color: #464c53; font-size: 13px; }            /* ※ 참고 */
/* 라벨만 강조한 줄 — 줄 전체 굵기를 해제하고 라벨(.k)만 굵게 (서술문까지 강조되지 않게) */
.lw_ws_body p.has_k { font-weight: 400; }
.lw_ws_body p .k { font-weight: 700; color: #1e2124; }
/* 전화번호는 절대 줄바꿈하지 않는다 — '064-750-7' / '917' 로 끊기면 번호를 잘못 읽는다 */
.lw_ws_body a[href^="tel:"] { color: #0b50d0; font-weight: 400; text-decoration: none;
    white-space: nowrap; }
.lw_ws_body a[href^="tel:"]:hover { text-decoration: underline; }

/* 첨부(단수 안내문) — 화면에는 버튼만, 클릭 시 전체화면 뷰어 */
.lw_ws_acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.lw_ws_act { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border: 1px solid #dfe4ea; border-radius: 999px; background: #fff;
    font-size: 13px; font-weight: 600; color: #1e2124; cursor: pointer; }
.lw_ws_act:hover { background: #f2f5fb; border-color: #c9d3e0; }
.lw_ws_act:focus-visible { outline: 2px solid var(--lw-blue-focus); outline-offset: 2px; }
.lw_ws_act .fs { font-size: 11px; font-weight: 400; color: #8a949e; line-height: 13px; }

/* 안내문 전체화면 뷰어 (라이트박스) — 지도 위 최상단 */
.lw_lbx { position: fixed; inset: 0; z-index: 1200; display: none;
    align-items: center; justify-content: center; padding: 24px;
    background: rgba(17, 24, 39, .82); }
.lw_lbx.is_open { display: flex; }
.lw_lbx_inner { position: relative; max-width: 100%; max-height: 100%; display: flex;
    flex-direction: column; align-items: center; gap: 10px; }
.lw_lbx_img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 6px; background: #fff; }
.lw_lbx_cap { max-width: 100%; font-size: 13px; color: #e7ebf0; text-align: center; word-break: break-all; }
.lw_lbx_x { position: absolute; top: -40px; right: -6px; width: 32px; height: 32px;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16);
    font-size: 18px; color: #fff; cursor: pointer; }
.lw_lbx_x:hover { background: rgba(255, 255, 255, .28); }
.lw_lbx_x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* 이미지 로드 실패 안내 (제공기관 첨부 URL 이 바뀌면 여기로 떨어진다) */
.lw_lbx_err { padding: 20px 24px; border-radius: 10px; background: #fff;
    font-size: 14px; color: #1e2124; text-align: center; }

/* 출처·조회시각 두 줄은 한 덩어리로 보이게 붙인다 (.lw_wp_src 기본 margin-top 12 이 두 번 들어감) */
.is_ws .lw_wp_src + .lw_wp_src { margin-top: 2px; }

/* 단수정보 — 모바일 (바텀시트 안이라 여백을 줄이고, 뷰어 닫기 버튼을 화면 안으로 넣는다) */
@media (max-width: 768px) {
    .lw_ws_itm { padding: 11px 12px; }
    .lw_ws_area { font-size: 14.5px; }
    .lw_lbx { padding: 14px; }
    .lw_lbx_img { max-height: calc(100dvh - 110px); }
    .lw_lbx_x { top: auto; bottom: -44px; right: 50%; transform: translateX(50%); }
}

/* ===================== 반응형 ===================== */
/* 모바일 패널 토글/백드롭/드로어 닫기 (기본 숨김) */
.lw_panel_toggle { display: none; }
.lw_backdrop { display: none; }
.lw_drawer_head { display: none; }
.lw_mo_brand { display: none; }
.lw_myloc_float { display: none; }


/* 데스크톱 중간폭: 좌측 메뉴를 1열 + 축소(420→300)해 상단 카드 가로 스크롤을 최대한 늦춤.
   (그 위 넓은 화면은 2열 유지 / 이 구간은 1열이라 항목이 길어 좌측 세로 스크롤이 생길 수 있음 — 사용자 선택) */
@media (min-width: 1281px) and (max-width: 1884px) {
    .lw_left { flex-basis: 300px; }
    .lw_items { grid-template-columns: 1fr; }
}

/* 태블릿(769~1280): 전체 페이지 스크롤 — 지도(70vh 블록) + 그 아래 메뉴가 이어져 body 가 스크롤.
   정보팝업은 지도 상단(카드 위, z-index 30>10)에 카드처럼 오버레이. (시안 기준) */
@media (min-width: 769px) and (max-width: 1280px) {
    html, body { height: auto; }   /* 뷰포트 고정(height:100%) 해제 → 문서(페이지) 스크롤 허용 */
    .lw_wrap { flex-direction: column; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }  /* 뷰포트 고정 해제 → 페이지 스크롤 */
    .lw_map_area { order: 0; flex: none; width: 100%; height: 70vh; height: 70dvh; }   /* 지도 = 고정 70% 블록 (OL 렌더 위해 명시 높이) */
    .lw_left { order: 1; flex: none; height: auto; width: 100%; max-width: none;
        overflow: visible;                                                 /* 내부 스크롤 해제 → 페이지 전체 스크롤 */
        padding: 14px 16px; border-top: 1px solid #eef1f5; box-shadow: 0 -2px 14px rgba(17,24,39,.06); }
    .lw_left > .lw_group, .lw_left > .lw_foot { margin-top: 0; }           /* 페이지 흐름 — slack 균등분배 불필요 */

    .lw_items { grid-template-columns: 1fr 1fr; }   /* 하단 넓은 폭 → 항목 2열 복귀 */
    /* 로고는 디자이너 원본 크기(197x42) 유지 — 확대하면 흐려진다 */
    .lw_divider { margin-left: -16px; margin-right: -16px; }

    /* 정보팝업: 지도영역(70vh) 상단에 오버레이 (바텀시트 아님). !important 는 JS 인라인 top / 리스트팝업 드래그 left 방어 */
    .lw_infopop, .lw_listpop {
        top: 18px !important; left: 12px !important; right: 12px !important; bottom: auto !important;
        width: auto !important; max-width: none; max-height: calc(70vh - 36px); max-height: calc(70dvh - 36px);
        border-radius: 18px; box-shadow: 0 12px 30px rgba(17,24,39,.20);
        display: flex; flex-direction: column; }
    .lw_infopop .lw_infopop_body { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: none;
        -webkit-overflow-scrolling: touch; }
    .lw_listpop .lw_lp_list { flex: 1 1 auto; }

    /* 거리/면적 측정 — 태블릿도 모바일처럼 숨김(줌/배경맵은 유지). 안내 배너도 같이 숨긴다 */
    .lw_toolgrp { display: none; }
    .lw_measure_noti { display: none !important; }
}

/* 모바일: 좌패널 = 오프캔버스 드로어 */
@media (max-width: 768px) {
    .lw_wrap { position: relative; }
    .lw_left { position: absolute; top: 0; right: 0; left: auto; bottom: 0; flex: none;
        width: 86vw; max-width: 340px; transform: translateX(100%);
        transition: transform .28s ease; z-index: 80; box-shadow: -4px 0 24px rgba(17,24,39,.2); }   /* 바텀시트(70) 위 — 메뉴가 항상 최상위 */
    .lw_left.open { transform: translateX(0); }
    .lw_map_area { flex: 1 1 auto; width: 100%; }

    /* 드로어 헤더: 미니 브랜드(좌) + 닫기 X(우) — 로고/내위치·브레드크럼 블록 대체 */
    .lw_drawer_head { display: flex; align-items: center; justify-content: space-between;
        margin: -16px -14px 14px; padding: 0 8px 0 16px; height: 50px;
        border-bottom: 1px solid #eef1f5; background: #fff; }
    .lw_drawer_head img { height: 24px; width: auto; }
    /* 드로어 닫기 X — 회색 원 배경 제거, 팝업 X 와 같은 아이콘 파일 사용 (터치영역 40x40 은 유지) */
    .lw_drawer_close { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center;
        border: none; background: none; padding: 0; cursor: pointer; }
    .lw_drawer_close img { display: block; width: 14px; height: 14px; }
    .lw_drawer_close:hover { opacity: .65; }
    .lw_left .lw_brand { display: none; }   /* 모바일: 큰 로고 숨김 (모바일 브랜드행 lw_mo_brand 가 대체) */
    .lw_items { grid-template-columns: 1fr; }   /* 항목 1열 — 좁은 드로어에서 이름 세로 꺾임 방지 */

    /* 내 위치: 지도 우측 하단 플로팅 — 아이콘(원형 이미지)만, 배경 없이 */
    .lw_myloc_float { display: flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; padding: 0; border: none; background: none; cursor: pointer; }
    .lw_myloc_float img { width: 40px; height: 40px; filter: drop-shadow(0 3px 8px rgba(17,24,39,.3)); }

    /* 모바일 툴 컴팩트: 줌/배경맵 축소 + 배경맵은 아이콘만 */
    .lw_zoom { width: 40px; }
    .lw_zoom_btn { height: 38px; }
    .lw_basemap_btn { width: 40px; height: 40px; gap: 0; }
    .lw_basemap_btn span { display: none; }        /* '배경맵' 글자 숨김 */
    .lw_basemap_btn::before { display: none; }     /* < 화살표 숨김 */
    .lw_bm_ico { height: 15px; }

    /* 설정(톱니) 버튼 + 백드롭
       흰 상단 밴드 안에 있으므로 테두리·배경·그림자를 두면 떠 있는 칩처럼 겉돈다 → 아이콘 버튼으로.
       (지도 위에 떠 있던 햄버거 시절의 카드 스타일을 걷어냄 / 터치 타깃 44px 는 유지) */
    .lw_panel_toggle { display: flex; position: absolute; top: 4px; right: 8px; left: auto; z-index: 55;
        width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none;
        box-shadow: none; cursor: pointer; align-items: center; justify-content: center; }
    .lw_panel_toggle svg { stroke: #464c53; }
    .lw_panel_toggle:active { background: rgba(37,110,244,.10); }
    .lw_backdrop { position: absolute; inset: 0; background: rgba(17,24,39,.35); z-index: 75; }   /* 시트(70)까지 디밍, 드로어(80) 아래 */
    .lw_backdrop.show { display: block; }

    /* 모바일 브랜드 행: 로고(좌) + 햄버거(우) — 네이버지도 패턴 */
    .lw_mo_brand { display: flex; align-items: center; position: absolute; top: 0; left: 14px; right: 60px;
        height: 52px; z-index: 11; pointer-events: none; }
    .lw_mo_brand img { height: 30px; width: auto; }

    /* 상단 정보: 모바일은 항상 요약 칩만 (펼침 카드/헤더행/접기 토글 없음) */
    .lw_cards { display: none; }
    .lw_cards_head { display: none; }   /* 오늘의 물모아 타이틀/날짜/스마트 대시보드 — 브랜드 행과 겹침 방지 */
    .lw_cards_toggle { display: none; }
    /* 세로 리듬 : 브랜드 0~52 / 위치바 52~96(버튼 54~94) / 칩 100~144 / 밴드 끝 154 → 칩 아래 여백 10px */
    .lw_cards_summary { display: flex; top: 100px; left: 8px; right: 8px; height: 36px; padding: 0; overflow: hidden;
        opacity: 1; pointer-events: auto; transition: none; }   /* 모바일은 항상 mini — 크로스페이드/로드 페이드 없음 */

    /* 범례는 모바일에서 숨김 (공간 협소) */
    .lw_legend { display: none; }

    /* 물길 플로팅 토글: 모바일은 좌측 하단이 메뉴 버튼과 겹쳐 → 좌측 상단(헤더 밴드 아래)으로 이동.
       (상단 밴드: 로고 0~52 / 위치바 52~96 / 요약칩 100~144 / 끝 154 — 그 아래라 겹치지 않음) */
    .lw_item.lw_flow_fab { top: 150px; left: 8px; right: auto; bottom: auto; }

    /* 툴바/스케일 위치 */
    .lw_tools { right: 8px; bottom: 40px; gap: 6px; }
    .lw_basemap_pop { right: 60px; bottom: 8px; }
    .wf_map_scale { right: 8px; bottom: 8px; }

    /* 거리/면적 측정 — 폰에서 불필요, 숨김 (줌/배경맵은 유지) */
    .lw_toolgrp { display: none; }
    .lw_measure_noti { display: none !important; }   /* 측정 버튼 자체가 없으므로 안내 배너도 숨김 */

    /* 요약 칩 : 데스크톱 균등분할(172px) → 모바일은 내용폭. 칩 3개 + 「외 N」 이 한 줄에 들어간다. */
    .lw_cards_summary { gap: 6px; align-items: center; overflow: hidden; }
    /* 칩은 내용 크기를 유지한다(축소 금지) — 축소를 허용하면 칩보다 내용이 커져 padding 을 침범하고
       아이콘·수치가 테두리 밖으로 삐져나온다. 한 줄에 안 들어가면 lifeWater.js 가 칩 개수를 줄인다. */
    /* min-width:0 은 데스크톱 기본값(min-width:172px 균등폭)을 해제하기 위한 것 — 빼면 칩이 전부 172px 이 된다 */
    /* 칩 높이 36px — 상단 밴드를 줄이기 위해 44 에서 축소.
       하한은 34px : 2줄 제목(가뭄단계/(생활공업)) 이 27.6px + 세로패딩 6px = 33.6px 를 요구한다.
       (32 로 내려도 내용이 33.6 을 밀어올려 의미가 없고, 36 은 2.4px 여유가 있어 안전) */
    .lw_chip { flex: 0 0 auto; min-width: 0; min-height: 36px; padding: 3px 11px; gap: 6px; }
    /* 항목명은 말줄임 대신 최대 2줄로 접는다 (긴 항목명: 생물화학적산소요구량 등).
       ※ -webkit-box(line-clamp)는 flex 안에서 기본 폭이 max-content 로 안 잡혀 짧은 제목도 2줄이 되므로
         일반 block + max-height(2줄) 로 처리한다 → 짧은 제목은 1줄 유지, 긴 제목만 접힘. */
    .lw_chip .chip_tit { flex: 0 0 auto; max-width: 88px; font-size: 12px; line-height: 1.15;
        white-space: normal; word-break: break-all; max-height: 28px; overflow: hidden; }
    .lw_chip .chip_val { flex: none; font-size: 14px; }
    .lw_chip .chip_r, .lw_chip .lw_chip_rt { flex: none; min-width: 0; gap: 6px; }
    .lw_chip .chip_char { width: 20px; height: 18px; }
    .lw_chip .chip_ico { width: 20px; height: 20px; }
    /* 분야 칩 항목명은 데스크톱 규칙(white-space:normal / max-width:86px / 2줄)을 그대로 쓴다.
       모바일에서 max-width 를 해제하면 긴 이름(생물화학적산소요구량)이 1줄로 늘어나 칩이 195px 까지 커진다. */
    /* 날씨 칩의 지역명(강남구)은 바로 위 위치 바와 중복 → 시각적으로만 숨김(스크린리더는 읽음) */
    .lw_chip[data-chip="weather"] .chip_tit { position: absolute; width: 1px; height: 1px;
        margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    /* 칩에 못 올린 항목은 숨김 — 「외 N」 을 누르면 아래 줄로 펼쳐진다 */
    .lw_chip.is_mo_hide { display: none; }
    .lw_cards { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .lw_cards::-webkit-scrollbar { display: none; }

    /* 상단 밴드 높이 (브랜드 52 + 위치바 44 + 칩 44 + 칩 아래 여백 10 = 154 — 모바일은 항상 접힘) */
    /* 밴드 = 로고행 52 + 위치바 44 + 여백 4 + 칩바 36 + 하단여백 6 = 142px (칩 44→36 축소분 −8, 하단여백 10→6 −4) */
    .lw_top_band { height: 142px; box-shadow: 0 2px 8px rgba(17,24,39,.07); }
    .lw_map_area.is_cards_hidden .lw_top_band { height: 142px; }

    /* 지도는 상단 밴드 아래부터 — 겹침 없이 분리 (네이버지도 모바일 구조) */
    /* top 은 .lw_top_band 높이(142px)와 반드시 같아야 한다.
       어긋나면 그 사이가 빈 띠로 남아 #mapDiv 의 테두리·배경이 두꺼운 선처럼 보인다 */
    #mapDiv { position: absolute; top: 142px; left: 0; right: 0; bottom: 0; width: auto; height: auto; }

    /* ══════════════ 모바일 상단 : 위치 바 / 「외 N」 / 카드 패널 / 위치 시트 ══════════════ */

    /* 위치 바 (브랜드행 아래) : 조회된 위치 표시 + 탭 → 위치 시트 / 우측 GPS */
    .lw_mo_locbar { display: flex; align-items: center; gap: 6px; position: absolute;
        top: 52px; left: 8px; right: 8px; height: 44px; z-index: 11; }
    .lw_mo_locbtn { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px;
        height: 40px; padding: 0 12px; border: 1px solid #cdd1d5; border-radius: 10px;
        background: #fff; box-shadow: 0 2px 6px rgba(17,24,39,.05); cursor: pointer; }
    .lw_mo_locbtn .lw_mo_loc_pin { flex: none; width: 11px; height: 15px; display: block; }
    .lw_mo_locbtn b { flex: 1 1 auto; min-width: 0; text-align: left; font-size: 13.5px; font-weight: 700;
        color: #1e2124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .lw_mo_locbtn .lw_mo_loc_arw { flex: none; width: 12px; height: 12px; color: #8a949e; transition: transform .22s ease; }
    .lw_mo_locbtn[aria-expanded="true"] { border-color: var(--lw-primary); }
    .lw_mo_locbtn[aria-expanded="true"] .lw_mo_loc_arw { transform: rotate(180deg); color: var(--lw-primary); }
    /* 내 위치 = '내 위치로 위치선택 조회' 액션 → 드로어의 조회 버튼(.btn_areasel_view #e8efff) 과 같은 계열로.
       데스크톱의 위치선택 제목 우측 버튼(#lwMyLoc)과 동작은 같고, 모바일 위치바 톤에 맞춰 모양만 다르다. */
    .lw_mo_gps { flex: none; display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
        background: #e8efff; cursor: pointer; transition: background .12s; }
    .lw_mo_gps:hover { background: #dbe6ff; }
    .lw_mo_gps:active { background: #cfdeff; }
    .lw_mo_gps:disabled { opacity: .5; }
    .lw_mo_gps_ico { display: block; width: 21px; height: 21px;
        fill: none; stroke: var(--lw-primary); stroke-width: 1.9; stroke-linecap: round; }
    .lw_mo_gps_ico .dot { fill: var(--lw-primary); stroke: none; }

    /* 「외 N」 칩 — 스와이프해도 우측에 고정(sticky)되어 항상 누를 수 있다.
       정보 칩(36px)과 달리 "누르는 요소"라 터치 여유를 두어 36px 로 두고 세로 패딩을 더 준다 */
    .lw_chip_more { display: flex; align-items: center; justify-content: center; gap: 5px;
        flex: 0 0 auto; min-width: 0; min-height: 36px; padding: 4px 11px;
        border: 1px solid var(--lw-primary); border-radius: 12px; background: #fff; cursor: pointer;
        box-shadow: 0 4px 10px rgba(17,24,39,.05); }
    .lw_chip_more .chip_tit { flex: none; font-size: 12.5px; font-weight: 800; color: var(--lw-primary); white-space: nowrap; }
    .lw_chip_more .chip_more_arw { width: 12px; height: 12px; color: var(--lw-primary); transition: transform .22s ease; }
    .lw_chip_more[aria-expanded="true"] { background: var(--lw-primary); border-color: var(--lw-primary); }
    .lw_chip_more[aria-expanded="true"] .chip_tit,
    .lw_chip_more[aria-expanded="true"] .chip_more_arw { color: #fff; }
    .lw_chip_more[aria-expanded="true"] .chip_more_arw { transform: rotate(180deg); }

    /* 「외 N」 펼침 = 요약 바가 줄바꿈되어 나머지 칩까지 그대로 보인다.
       위(접힘)와 아래(펼침) 모양을 '요약 칩' 하나로 통일 — 카드(.lw_cards)는 모바일에서 계속 숨김. */
    .lw_map_area.is_more_open .lw_cards_summary { height: auto; max-height: calc(100dvh - 200px);
        left: 0; right: 0; padding: 0 8px 10px; z-index: 12;
        flex-wrap: wrap; align-content: flex-start; overflow-x: hidden; overflow-y: auto;
        background: #fff; border-radius: 0 0 14px 14px; box-shadow: 0 10px 22px rgba(17,24,39,.14); }
    /* 펼치면 감춰둔 칩도 모두 표시 (줄바꿈되어 아래 줄로) */
    .lw_map_area.is_more_open .lw_cards_summary .lw_chip.is_mo_hide { display: flex; }
    /* 「외 N」(= 접기) 은 마지막 줄 오른쪽 끝 */
    .lw_map_area.is_more_open .lw_chip_more { margin-left: auto; }

    /* ── 하단 액션 바 ──────────────────────────────────────────────────────
       지도 위에 '떠 있는' pill 이라 레이아웃 높이를 차지하지 않는다(지도 면적 손실 0).
       우하단 줌·배경맵 버튼과 겹치지 않게 가운데 정렬. 시트(z 70~78)가 뜨면 자연히 덮인다. */
    /* 알약이 바 안에서 4px 여백을 갖도록 바 높이를 52 로 (버튼 44 는 터치 타깃 최소치 유지) */
    .lw_mo_actbar { display: flex; align-items: center; position: absolute; z-index: 12;
        left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom));
        height: 52px; padding: 0 4px; background: #fff; border: 1px solid #eceef1;
        border-radius: 26px; box-shadow: 0 8px 24px rgba(17,24,39,.16); }
    .lw_mo_act { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 15px;
        border: 0; border-radius: 22px; background: none; cursor: pointer;
        font-size: 14px; font-weight: 700; color: #464c53; white-space: nowrap;
        transition: background .15s, color .15s; }
    .lw_mo_act svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor;
        stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    /* 숫자 = 원형 배지. 인라인 숫자는 라벨과 같은 문장으로 읽혀 단위를 오해하기 쉬우므로
       "카운터"로 보이게 배지화한다. 켜진 게 있으면(is_on) 파랑 채움, 0 이면 회색. */
    /* 라벨+배지 묶음을 flex 로 — 기본(inline) 이면 배지가 텍스트 베이스라인에 붙어 1px 내려간다 */
    .lw_mo_act > span { display: inline-flex; align-items: center; color:#1e2124; }
    /* line-height:1 필수 — 상속된 18px 이면 배지 안 숫자가 아래로 내려가 중앙이 어긋난다 */
    .lw_mo_act b { display: inline-flex; align-items: center; justify-content: center;
        min-width: 20px; height: 20px; padding: 0 5px; margin-left: 6px; border-radius: 10px;
        min-width: 20px; height: 20px; padding: 0 5px; margin-left: 6px; border-radius: 10px;
        background: #eceef1; color: #98a1aa; font-size: 12px; font-weight: 800; line-height: 1;
        font-variant-numeric: tabular-nums; transition: background .15s, color .15s; }
    /* 켜진 정보가 있으면 글자·배지만 파랑. 0 이면 위 기본 규칙대로 회색 (알약 전체를 채우지 않는다) */
    .lw_mo_act.is_on { color: var(--lw-primary); }
    .lw_mo_act.is_on b { background: var(--lw-primary); color: #fff; }
    .lw_mo_act:active { background: rgba(37,110,244,.14); }
    .lw_mo_act[disabled] { opacity: .45; cursor: default; }
    .lw_mo_act[disabled] b { background: #eceef1; color: #98a1aa; }
    .lw_mo_act_sep { flex: none; width: 1px; height: 18px; background: #eceef1; }

    /* ── 드로어(햄버거) = 설정·안내 전용 ────────────────────────────────
       모바일은 위치선택·레이어가 각각 바텀시트로 빠지므로, 드로어에는 이 내용만 남는다. */
    /* 위치선택↔생활편의 구분선(8px 회색 띠)은 두 블록이 모두 시트로 빠져 의미가 없다 → 숨김
       (요소는 남겨둔다 — 데스크톱 복귀 시 위치선택 블록을 되돌리는 앵커) */
    .lw_left .lw_divider { display: none; }
    .lw_drawer_tit { margin: 0; font-size: 16px; font-weight: 700; color: #1e2124; }
    .lw_mo_menu { display: block; padding: 4px 0 8px; }
    .lw_mo_menu_sec { margin-bottom: 20px; }
    .lw_mo_menu_sec h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: #8a949e; }
    .lw_mo_links { border: 1px solid #dce0e6; border-radius: 10px; overflow: hidden; }
    .lw_mo_links a { display: flex; align-items: center; gap: 10px; padding: 13px 12px;
        font-size: 13.5px; color: #1e2124; text-decoration: none; border-bottom: 1px solid #eef0f3; }
    .lw_mo_links a:last-child { border-bottom: 0; }
    .lw_mo_links a:active { background: #f3f6fb; }
    .lw_mo_links a > svg { flex: none; width: 17px; height: 17px; fill: none; stroke: #6d7882; stroke-width: 1.7;
        stroke-linecap: round; stroke-linejoin: round; }
    .lw_mo_links a .go { width: 14px; height: 14px; margin-left: auto; stroke: #b4bcc7; stroke-width: 2; }
    /* 기관 정보 (사이트 공통 푸터와 동일 내용) */
    .lw_mo_org { padding-top: 16px; border-top: 1px solid #eef0f3; }
    .lw_mo_org_item { margin-bottom: 14px; }
    .lw_mo_org_item > a { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700;
        color: #1e2124; text-decoration: none; }
    .lw_mo_org_item p { margin: 0 0 2px; font-size: 11.5px; line-height: 1.6; color: #6d7882; }
    .lw_mo_org_item p.tel { color: #1e2124; font-weight: 600; }
    .lw_mo_org_item p.tel a { color: inherit; text-decoration: none; }
    .lw_mo_copy { margin: 0; padding-top: 12px; border-top: 1px solid #eef0f3;
        font-size: 11.5px; line-height: 1.6; color: #8a949e; }

    /* 바텀시트 공용 껍데기 (위치 시트 / 레이어 시트) — 아래에서 올라옴 (백드롭 75 위 · 드로어 80 아래) */
    .lw_sheet { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0;
        z-index: 78; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 22px rgba(17,24,39,.16);
        max-height: 72dvh; transform: translateY(101%); visibility: hidden;
        transition: transform .26s cubic-bezier(.32,.72,0,1), visibility .26s; }
    .lw_sheet.is_open { transform: none; visibility: visible; }
    .lw_sheet_grab { flex: none; display: flex; justify-content: center; padding: 9px 0 2px; }
    .lw_sheet_grab i { display: block; width: 38px; height: 4px; border-radius: 2px; background: #d5dbe2; }
    .lw_sheet_head { flex: none; display: flex; align-items: center; justify-content: space-between;
        padding: 2px 12px 10px 16px; }
    .lw_sheet_head h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1e2124; }
    .lw_sheet_x { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
        padding: 0; border: 0; background: none; cursor: pointer; }
    .lw_sheet_body { flex: 1 1 auto; overflow-y: auto;
        padding: 0 16px calc(18px + env(safe-area-inset-bottom)); }
    /* 위치 시트 : 시트 제목과 겹치는 섹션 제목만 숨기고, 콤보는 터치 높이 확보 */
    .lw_locsheet .lw_sheet_body .lw_sec { margin: 0; }
    .lw_locsheet .lw_sheet_body .lw_sec_tit { display: none; }
    .lw_locsheet .lw_sheet_body .sel_m,
    .lw_locsheet .lw_sheet_body .btn_areasel_view { height: 44px; }
    /* 레이어 시트 : 좌측 패널의 3그룹이 그대로 들어온다(그룹 제목 유지) */
    .lw_layersheet { max-height: 76dvh; }
    .lw_layersheet .lw_sheet_body .lw_group { margin: 0 0 16px; }
    .lw_layersheet .lw_sheet_body .lw_group:last-child { margin-bottom: 0; }
    .lw_layersheet .lw_sheet_body .lw_divider { display: none; }

    /* 정보팝업 전부 바텀시트 (지도가 위에 계속 보임 — 지도앱 관례, !important 는 JS 인라인 top/드래그 left 방어) */
    .lw_infopop, .lw_listpop {
        position: absolute;
        top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: auto !important; max-width: none; max-height: 68%;
        border: none; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(17,24,39,.25);
        display: flex; flex-direction: column;
        padding-top: 12px;   /* 상단 핸들 바 자리 */
        z-index: 70;   /* 드로어(60)/햄버거·백드롭(55) 위 */
    }
    /* 시트 상단 핸들 바 + 쓸어내려 닫기 (드래그 복귀 애니메이션 / 헤더에선 브라우저 기본 제스처 차단) */
    .lw_infopop::before, .lw_listpop::before { content: ''; position: absolute; top: 8px; left: 50%;
        transform: translateX(-50%); width: 40px; height: 4px; border-radius: 2px; background: #d5dbe2; }
    /* 팝업 자체는 세로 팬 허용(본문 스크롤). 단 상단 핸들 바(padding-top 12px)는 팝업 자신이 이벤트 대상이라
       pan-y 로 두면 브라우저가 터치를 가져가 touchcancel 이 나고 스와이프 닫기가 어긋난다 → 아래 ::before 영역 대응 */
    .lw_infopop, .lw_listpop { transition: transform .18s ease; touch-action: pan-y; }
    .lw_infopop_cat, .lw_lp_head, .lw_infopop_tit_bar { touch-action: none; }
    /* 상단 핸들 바 히트 영역 — 실제 요소가 없어 부모가 대상이므로, 헤더 위쪽 여백을 헤더가 덮게 해서
       손잡이를 잡아도 touch-action:none 영역에서 시작되도록 한다 */
    .lw_infopop_cat, .lw_lp_head { margin-top: -12px; padding-top: 12px; }

    /* 바텀시트(위치·레이어)도 쓸어내려 닫기 대상 — 손잡이/헤더에서는 브라우저 기본 제스처를 차단해야
       우리 스와이프 핸들러(_bindSheetSwipe)가 터치를 받는다. 이게 없으면 당겨서 새로고침이 발동한다. */
    .lw_sheet { touch-action: pan-y; }
    .lw_sheet_grab, .lw_sheet_head { touch-action: none; }
    /* 시트·팝업 본문 스크롤이 끝에 닿아도 페이지로 전파하지 않는다 (스크롤 체이닝 방지) */
    .lw_sheet_body, .lw_infopop_body, .lw_lp_list { overscroll-behavior: contain; }
    /* 당겨서 새로고침(pull-to-refresh) 차단 — 시트를 내리려다 페이지가 새로고침되는 것을 막는다 */
    html, body { overscroll-behavior-y: none; }
    /* 헤더는 flex 로 상단 고정, body 만 스크롤 (.lw_wjpop body 62vh 규칙과 동률 특이도 — 후순위 승) */
    .lw_infopop .lw_infopop_body { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: none;
        -webkit-overflow-scrolling: touch; }
    .lw_listpop .lw_lp_list { flex: 1 1 auto; }

    /* 물의여정은 단계(7개)가 많아 시트가 지도를 과하게 덮음 → 3단계까지만 보이고 나머지는 스크롤
       실측: 3단계 바닥 321 / 4단계 시작 349 → 360 이면 4번째 아이콘이 11px 걸려 스크롤 힌트가 된다 */
    .lw_wjpop .lw_infopop_body { flex: 0 1 auto; max-height: 360px; }
    /* 본문이 스크롤되므로 '자세히보기' 는 하단에 고정 (끝까지 내리지 않아도 보이게) */
    .lw_wjpop .lw_wj_morewrap { position: sticky; bottom: 0; background: #fff; }

    /* ── 범례(모바일 B안 : 현재등급 + 더보기) ─────────────────────────────
       세로공간 절약 — 테두리 박스/그리드 대신 "범례 [● 현재등급] [● …] (+N)" 한 줄 알약.
       3번째 이상 항목(is_ext)은 접고, +N 누르면 펼침(.is_open). 색은 데스크톱과 같은 팔레트 변수 사용. */
    .lw_lg { margin: 12px 0 0; padding: 0; background: none; border: 0; border-radius: 0;
        display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
    .lw_lg_tit { position: static; padding: 0; background: none; order: -2;   /* 항상 맨 앞 (현재등급 order:-1 보다 앞) */
        font-size: 11.5px; font-weight: 700; color: #8a92a0; }
    .lw_lg_list { display: contents; }                       /* 알약들을 .lw_lg 의 flex 자식으로 승격 */
    .lw_lg_item { display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px;
        min-height: 0; padding: 4px 10px;
        background: var(--c-bg); border: 1px solid transparent; border-radius: 999px; text-align: left; }
    /* 데스크톱 grid 전용 규칙(is_4/is_5 의 좁은 패딩·축소 글자)이 특이도로 위 알약 규칙을 누르지 않게 통일 */
    .lw_lg_list.is_2 .lw_lg_item, .lw_lg_list.is_4 .lw_lg_item, .lw_lg_list.is_5 .lw_lg_item { padding: 4px 10px; }
    .lw_lg_item i { display: inline-block; width: 10px; height: 13px; }   /* 물방울(축소 — 데스크톱 12×16 비율) */
    .lw_lg_item b { font-size: 11.5px; font-weight: 600; color: #1e2124; }
    .lw_lg_list.is_4 .lw_lg_item b, .lw_lg_list.is_5 .lw_lg_item b { font-size: 11.5px; }   /* 알약은 폭 여유 있어 축소 안 함 */
    /* 현재 등급 강조 + 맨 앞으로 (DOM 순서는 등급순 유지) */
    .lw_lg_item.is_on { border-color: var(--c); order: -1; }
    .lw_lg_item.is_on b { font-weight: 700; }
    /* 접힘 대상 */
    .lw_lg_item.is_ext { display: none; }
    .lw_lg.is_open .lw_lg_item.is_ext { display: inline-flex; }
    /* 더보기(+N) / 접기 버튼 — 한 줄에 다 들어가면 _fitLegend 가 .no_more 를 붙여 숨긴다 */
    .lw_lg_more { display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid #dfe4ea;
        background: #fff; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #4a5160; cursor: pointer; }
    .lw_lg_more:hover { background: #f2f5fb; }
    .lw_lg.no_more .lw_lg_more { display: none; }
}

/* 마우스 환경(PC): 칩/카드가 넘칠 때 얇은 스크롤바 표시 (네이버지도 패턴 — 터치는 스와이프라 숨김 유지)
   ※ scrollbar-width 를 함께 쓰면 크로미움이 ::-webkit-scrollbar 커스텀을 무시하므로 webkit 방식만 사용 */
@media (hover: hover) and (pointer: fine) {
    .lw_cards, .lw_cards_summary { padding-bottom: 12px; }   /* 칩↔바 간격 */
    .lw_cards::-webkit-scrollbar, .lw_cards_summary::-webkit-scrollbar { display: block; height: 5px; }
    .lw_cards::-webkit-scrollbar-thumb, .lw_cards_summary::-webkit-scrollbar-thumb { background: #c8cfd8; border-radius: 5px; }
    .lw_cards::-webkit-scrollbar-track, .lw_cards_summary::-webkit-scrollbar-track { background: transparent; }
}
/* 모바일 폭에서는 요약 바가 가로 스크롤하지 않고 줄바꿈으로 펼쳐지므로, 위 스크롤바용 하단 여백을 되돌린다.
   (남겨두면 44px 바 안에서 칩이 위로 3px 삐져나와 위쪽 간격이 붙어 보임 — 펼침 상태의 10px 여백은 유지) */
@media (hover: hover) and (pointer: fine) and (max-width: 768px) {
    .lw_cards_summary { padding-bottom: 0; }
}