/* ── 색 토큰 ──
   원래 index.php 인라인 <style> 에만 있었다. 저수율 랭킹 페이지(/contents/water/rank.php)가
   아래 .wl-* 목록 스타일을 그대로 쓰는데 토큰이 없으면 색이 전부 무너지므로 여기로 옮겼다.
   index.php 의 인라인 정의는 이 파일 뒤에 와서 그대로 이기지만 값이 같아 화면 변화는 없다. */
#m2-scope{--m2-navy:#0f172a;--m2-blue:#2563eb;--m2-violet:#7c3aed;--m2-orange:#f59e0b;
  --m2-text:#334155;--m2-meta:#94a3b8;--m2-bg:#f8fafc;--m2-card:#fff;--m2-border:#e2e8f0}

/* ============================================================
 * main_brief.css — 메인 브리핑 섹션 (2026-08-30)
 *   대상: 이번 주말 추천 / 물 들어오는 저수지 / 5짜터 컨디션 / 6일 캘린더
 *   index.php 의 --m2-* 토큰을 그대로 쓴다. 새 색을 만들지 않는다.
 * ============================================================ */

/* ── 공통 ── */
/* 한글 제목이 '좋습니/다' 처럼 글자 단위로 끊기던 문제 — 단어 단위로 넘긴다.
   balance 는 줄 길이를 고르게 맞춰 준다(미지원 브라우저는 무시하고 keep-all 만 적용) */
#m2-scope .m2-shead-title{word-break:keep-all;text-wrap:balance}
/* 부제 여백 — index.php 의 margin-top:4px 는 '순수 텍스트' 기준이라,
   hl-day(9/5 토요일) 같은 테두리 알약이 들어가면 제목에 달라붙어 보인다.
   ①③⑤ 가 그 경우다. 알약 높이만큼 띄우고 줄간격도 넓힌다.
   index.php 인라인 <style> 이 이 파일보다 뒤에 로드되므로 (1,1,0) 으로는 못 이긴다
   → div.m2-shead-sub (1,1,1) 로 한 단계 올린다(기존에 겪은 특이도 함정). */
#m2-scope div.m2-shead-sub{word-break:keep-all;margin-top:10px;line-height:1.65}

/* ── 저수지명 + 액션 한 줄 ──
   버튼을 행 끝에 두면 어느 저수지 것인지 한눈에 안 들어와 이름 옆으로 옮겼다.
   이름이 길어도 버튼을 밀어내지 않게 이름만 줄인다(flex:0 1 auto + min-width:0). */
#m2-scope .hp-nm,#m2-scope .rec-name,
#m2-scope .fav-i .n,#m2-scope .rec-near-c .n{
  display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:nowrap}
#m2-scope .nm-t{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#m2-scope .hp-nm .b-mini,#m2-scope .rec-name .b-mini,
#m2-scope .fav-i .n .b-mini,#m2-scope .rec-near-c .n .b-mini{flex:0 0 auto}
#m2-scope .wl-warn{flex:0 0 auto}

/* ── 기준 요일 강조 ── */
#m2-scope .hl-day{display:inline-block;font-weight:900;color:#c2410c;background:#fff7ed;
  border:1.5px solid #fdba74;border-radius:7px;padding:1px 9px;margin:0 1px}

/* ── ① 이번 주말 추천 ── */
#m2-scope .rec{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:14px}
#m2-scope .rec-card{background:var(--m2-card);border:1px solid var(--m2-border);border-radius:16px;
  padding:18px;display:flex;flex-direction:column;gap:11px}
#m2-scope .rec-card.lead{background:linear-gradient(180deg,#f0f9ff,#fff);border-color:#bae6fd}
#m2-scope .rec-rank{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:11.5px;font-weight:800;color:#0369a1;background:#e0f2fe;padding:5px 10px;border-radius:999px}
#m2-scope .rec-card.lead .rec-rank{background:#0284c7;color:#fff}
#m2-scope .rec-name{font-size:19px;font-weight:900;color:var(--m2-navy);line-height:1.2}
#m2-scope .rec-card.lead .rec-name{font-size:24px}
#m2-scope .rec-card.lead .rec-name .b-mini{font-size:12px;padding:6px 13px}
#m2-scope .rec-addr{font-size:12.5px;color:var(--m2-meta);font-weight:500;margin-top:-6px}
#m2-scope .rec-rows{display:flex;flex-direction:column;gap:7px;margin-top:2px}
#m2-scope .rec-row{display:flex;align-items:center;gap:4px 8px;font-size:13px;font-weight:700;
  color:#334155;flex-wrap:wrap}   /* 최저·최고까지 들어가 좁은 카드에서는 줄바꿈 */
/* 최저 16° / 최고 24° — 라벨과 값을 한 덩어리로 묶어 짝이 눈에 보이게 */
#m2-scope .rec-t{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
#m2-scope .rec-t .v.x{color:#b91c1c}
#m2-scope .rec-row i{font-size:16px;width:18px;text-align:center;flex:none}
#m2-scope .rec-row .v{font-weight:800;color:var(--m2-navy)}
#m2-scope .rec-row .up{color:#0369a1;font-weight:800}
#m2-scope .rec-row .muted{color:var(--m2-meta);font-weight:600}
#m2-scope .rec-foot{display:flex;gap:7px;margin-top:auto;padding-top:10px}
/* 두 버튼을 같은 폭으로 — flex:1 1 0 + min-width:0 이어야 글자 길이와 무관하게 균등 */
#m2-scope .rec-foot a{flex:1 1 0;min-width:0;text-align:center;font-size:12.5px;font-weight:800;
  padding:9px 0;border-radius:10px}
#m2-scope .rec-foot .b-3d{background:linear-gradient(135deg,#0ea5e9,#1d4ed8);color:#fff;
  box-shadow:0 1px 3px rgba(29,78,216,.28)}
#m2-scope .b-3d{background:linear-gradient(135deg,#0ea5e9,#1d4ed8);color:#fff;text-decoration:none}
/* eb_act 기본값 대비용 — 실제로는 아래 b-3d/b-map 중 하나를 항상 지정한다 */
#m2-scope .b-w{background:linear-gradient(135deg,#0ea5e9,#1d4ed8);color:#fff;text-decoration:none;
  box-shadow:0 1px 3px rgba(29,78,216,.28)}
#m2-scope .b-w:hover{filter:brightness(1.08);color:#fff}
/* 작은 액션 — 랭킹·카드 안에서 자리를 많이 뺏지 않게 */
/* 3D 버튼 색은 map4 팝업의 기존 규칙을 그대로 따른다(.esp-btn.esp-3).
   같은 기능이 화면마다 다른 색이면 사용자가 매번 다시 배워야 한다. */
#m2-scope .b-mini{display:inline-block;font-size:11px;font-weight:800;padding:5px 11px;
  border-radius:8px;white-space:nowrap;color:#fff;border:none;text-decoration:none;
  background:linear-gradient(135deg,#0ea5e9,#1d4ed8);
  box-shadow:0 1px 3px rgba(29,78,216,.28)}
#m2-scope .b-mini:hover{filter:brightness(1.08);color:#fff}
/* ── 액션 색 규칙 ──
   파랑 = 3D보기(지형) / 주황 = 지도보기(위치).
   같은 색이면 나란히 붙었을 때 한 덩어리로 보여 구분이 안 된다.
   b-mini 와 특이도가 같으므로 반드시 b-mini 뒤에 와야 배경이 덮인다. */
#m2-scope .b-map{background:linear-gradient(135deg,#d97706,#b45309);color:#fff;text-decoration:none;
  box-shadow:0 1px 3px rgba(180,83,9,.32)}
#m2-scope .b-map:hover{filter:brightness(1.06);color:#fff}
#m2-scope .rec-foot .b-map{background:linear-gradient(135deg,#d97706,#b45309);
  box-shadow:0 1px 3px rgba(180,83,9,.32)}


/* 추천 0곳 — 장마·태풍철엔 며칠씩 이어진다. 섹션을 비우지 않는다 */
#m2-scope .rec-none{background:#fffbeb;border:1.5px solid #fde68a;border-radius:16px;padding:20px 22px}
#m2-scope .rec-none-h{font-size:16px;font-weight:800;color:#92400e;margin:0 0 6px;
  display:flex;align-items:center;gap:8px}
#m2-scope .rec-none-s{font-size:13.5px;color:#a16207;font-weight:500;margin:0 0 16px;line-height:1.6}
#m2-scope .rec-none-lb{font-size:11.5px;font-weight:800;color:#a16207;margin:0 0 8px;letter-spacing:.3px}
#m2-scope .rec-near{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#m2-scope .rec-near-c{background:#fff;border:1px solid #fde68a;border-radius:11px;padding:12px 13px}
#m2-scope .rec-near-c .n{font-size:13.5px;font-weight:800;color:var(--m2-navy)}
#m2-scope .rec-near-c .m{font-size:11.5px;color:var(--m2-meta);margin-top:3px}
#m2-scope .rec-near-c .v{font-size:12.5px;font-weight:700;color:#92400e;margin-top:7px}

/* ── ② 물 들어오는 저수지 ── */
#m2-scope .wl{background:var(--m2-card);border:1px solid var(--m2-border);border-radius:16px;overflow:hidden}
#m2-scope .wl-r{display:grid;grid-template-columns:34px 1fr 150px 148px;align-items:center;gap:12px;
  padding:13px 16px;border-bottom:1px solid #f1f5f9}
/* 이름 · 버튼 · 주소를 한 컨테이너에 담고 순서만 바꾼다.
   PC = [이름][버튼] 한 줄 + 주소 아래(flex-basis:100% 로 강제 줄바꿈) */
#m2-scope .wl-c{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;min-width:0}
#m2-scope .wl-nm{order:1;flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:6px}
#m2-scope .wl-act{order:2;flex:0 0 auto;display:flex;align-items:center;gap:6px}
#m2-scope .wl-ad{order:3;flex:0 0 100%}
#m2-scope .wl-r:last-child{border-bottom:none}
/* ── 순위별 배경 ──
   흰 행이 5줄 이어지면 어디까지가 한 저수지인지 눈이 끊어 읽어야 한다.
   순위가 내려갈수록 옅어지는 파랑 사다리를 깔아 '위쪽일수록 많이 올랐다'를
   숫자를 읽기 전에 색으로 먼저 전달한다(장식이 아니라 순위 정보).
   .wl 의 첫 자식은 머리글 행이라 nth-child 는 2부터가 1위 — 머리글이
   숨는 모바일에서도 자식 순서는 그대로라 값이 어긋나지 않는다. */
#m2-scope .wl-r:nth-child(2){background:#e2f2fd}
#m2-scope .wl-r:nth-child(3){background:#eaf6fe}
#m2-scope .wl-r:nth-child(4){background:#f1f9fe}
#m2-scope .wl-r:nth-child(5){background:#f6fbff}
#m2-scope .wl-r:nth-child(6){background:#fbfdff}
#m2-scope .wl-r:not(.head){border-bottom-color:rgba(15,23,42,.06)}
@media (hover:hover){ #m2-scope .wl-r:not(.head):hover{background:#dbeefc} }
#m2-scope .wl-r.head{background:#f8fafc;font-size:11px;font-weight:800;color:var(--m2-meta);
  letter-spacing:.4px;padding:9px 16px}
/* 증감 열은 머리글·뱃지 모두 '중앙' 축으로 맞춘다.
   오른쪽 끝 정렬은 좌표상 맞아도 알약 뱃지의 시각적 중심이 왼쪽에 있어
   2글자 머리글이 구석에 밀려 보였다(실측: 머리글 중앙 1181 vs 뱃지 중앙 1205).
   중앙 축은 뱃지 폭이 값에 따라 변해도 계속 일치한다. */
#m2-scope .wl-r.head span:last-child{text-align:center}
#m2-scope .wl-n{font-size:14px;font-weight:900;color:#cbd5e1;text-align:center}
#m2-scope .wl-r.top .wl-n{color:var(--m2-orange)}
#m2-scope .wl-nm{font-size:14.5px;font-weight:800;color:var(--m2-navy)}
/* 배경에 색이 깔리면 --m2-meta(#94a3b8)는 대비가 2.2까지 떨어져 읽히지 않는다.
   이 섹션에 한해 한 단계 진한 슬레이트를 쓴다. */
#m2-scope .wl-ad{font-size:12px;color:#5c6b7f;font-weight:500;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#m2-scope .wl-warn{display:inline-block;font-size:10.5px;font-weight:800;color:#b91c1c;background:#fee2e2;
  border:1px solid #fecaca;padding:2px 6px;border-radius:6px;vertical-align:1px}
#m2-scope .wl-rate{font-size:13px;font-weight:700;color:#334155;
  font-variant-numeric:tabular-nums;white-space:nowrap}
#m2-scope .wl-rate b{font-size:16px;font-weight:900;color:#0c4a6e}
#m2-scope .wl-rate .was{color:#475569;font-weight:600}
#m2-scope .wl-rate .arw{color:#cbd5e1;margin:0 3px}
/* 기간을 뱃지 바로 앞에 붙여, 머리글이 사라지는 모바일에서도 뱃지가 스스로 설명되게 */
#m2-scope .wl-dc{display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
#m2-scope .wl-per{font-size:11.5px;font-weight:700;color:#5c6b7f}
#m2-scope .wl-up{display:inline-flex;align-items:center;gap:3px;
  font-size:12.5px;font-weight:900;padding:6px 12px;border-radius:999px;
  font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:0 1px 2px rgba(15,23,42,.08)}
#m2-scope .wl-up i{font-size:13px}
#m2-scope .wl-up.lv4{background:#0c4a6e;color:#fff}
#m2-scope .wl-up.lv3{background:#0369a1;color:#fff}
#m2-scope .wl-up.lv2{background:#38bdf8;color:#04364f}
#m2-scope .wl-up.lv1{background:#bae6fd;color:#075985}
#m2-scope .wl-up.down{background:#fed7aa;color:#9a3412}

/* ── ③ 5짜터 컨디션 ── */
#m2-scope .hp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#m2-scope .hp-c{background:var(--m2-card);border:1px solid var(--m2-border);border-radius:14px;
  padding:14px 16px;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px}
#m2-scope .hp-c.top{border-color:#fde68a;background:linear-gradient(180deg,#fffbeb,#fff)}
#m2-scope .hp-n{font-size:15px;font-weight:900;color:#cbd5e1;text-align:center}
#m2-scope .hp-c.top .hp-n{color:var(--m2-orange)}
#m2-scope .hp-nm{font-size:14.5px;font-weight:800;color:var(--m2-navy)}
#m2-scope .hp-ad{font-size:11.5px;color:var(--m2-meta);margin-top:2px}
/* 칩을 flex-wrap 으로 두니 글자 길이에 따라 카드마다 3+1, 4+0, 2+1+1 로 제각각 접혔다.
   2열 격자로 고정해 어느 카드든 같은 자리에 같은 정보가 오게 한다.
   (모바일은 폭이 좁아 '바람 N m/s 돌풍 N m/s' 칩이 반칸에 안 들어가므로 1열) */
#m2-scope .hp-m{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:7px}
#m2-scope .hp-m span{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;
  padding:4px 8px;border-radius:7px;background:#f1f5f9;color:#475569;white-space:nowrap;min-width:0}
/* 칩 안의 보조 라벨(N일간) — 값과 구분되되 같은 색 계열을 유지 */
#m2-scope .hp-m em{font-style:normal;font-weight:700;opacity:.72;margin:0 3px 0 5px}
#m2-scope .hp-m .w{background:#e0f2fe;color:#0369a1}
#m2-scope .hp-m .g{background:#ecfdf5;color:#047857}
#m2-scope .hp-m .r{background:#fff7ed;color:#c2410c}
#m2-scope .hp-m .x{background:#fee2e2;color:#b91c1c}
#m2-scope .hp-m b.hi{color:#c2410c;font-weight:800}
/* '컨디션'(3자) 과 '출조 불가'(5자) 의 폭 차이만큼 옆 칩 열이 밀려
   카드끼리 칩 시작점이 어긋났다(실측 301 vs 295). 점수 열을 고정폭으로 둔다. */
#m2-scope .hp-score{text-align:center;flex:none;min-width:56px}
#m2-scope .hp-score b{display:block;font-size:21px;font-weight:900;color:#0c4a6e;line-height:1}
#m2-scope .hp-score span{font-size:10.5px;color:var(--m2-meta);font-weight:700}
#m2-scope .hp-score.bad b{color:#b91c1c}

/* ── ④ 6일 캘린더 ── */
#m2-scope .cal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
#m2-scope .cal-d{background:var(--m2-card);border:1px solid var(--m2-border);border-radius:13px;
  padding:13px 8px;text-align:center}
#m2-scope .cal-d.we{border-color:var(--m2-orange);background:linear-gradient(180deg,#fffbeb,#fff)}
#m2-scope .cal-d.today{border-color:#94a3b8}
#m2-scope .cal-w{font-size:11.5px;font-weight:800;color:var(--m2-meta)}
#m2-scope .cal-d.we .cal-w{color:var(--m2-orange)}
#m2-scope .cal-dt{font-size:12px;color:#cbd5e1;font-weight:700;margin-top:1px}
#m2-scope .cal-i{font-size:27px;margin:8px 0 5px;line-height:1}
#m2-scope .cal-t{display:flex;align-items:baseline;justify-content:center;gap:7px;
  font-size:14px;font-weight:900;color:var(--m2-navy)}
#m2-scope .cal-t .tp{display:inline-flex;align-items:baseline;gap:2px;white-space:nowrap}
#m2-scope .cal-t .tp em{font-style:normal;font-size:10px;font-weight:700;color:#5c6b7f}
#m2-scope .cal-p{font-size:11px;color:#0369a1;font-weight:700;margin-top:3px}
#m2-scope .cal-p.heavy{color:#b91c1c}
#m2-scope .cal-wind{display:flex;align-items:center;justify-content:center;gap:2px 5px;flex-wrap:wrap;
  font-size:11px;font-weight:700;color:#475569;margin-top:5px;line-height:1.35}
#m2-scope .cal-wind span{white-space:nowrap}
#m2-scope .cal-wind span.hi{color:#c2410c;font-weight:800}
#m2-scope .cal-wind i{font-size:12.5px;color:var(--m2-meta)}
/* 돌풍이 세다고 '바람' 수치까지 빨갛게 칠하면 잔잔한 바람을 강풍으로 오독한다.
   아이콘만 그날의 경고로 두고, 색은 실제로 임계를 넘은 값(.hi)에만 준다. */
#m2-scope .cal-wind.strong i{color:#c2410c}
#m2-scope .cal-tag{display:block;margin-top:8px;font-size:10.5px;font-weight:800;color:#3a2c00;
  background:var(--m2-orange);border-radius:6px;padding:3px 0}

/* ── ⑤ 내 관심 저수지 ── */
#m2-scope .fav{background:var(--m2-card);border:1px solid var(--m2-border);border-radius:16px;padding:20px}
#m2-scope .fav-lock{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between}
#m2-scope .fav-lock .tx b{display:block;font-size:16px;font-weight:800;color:var(--m2-navy);margin-bottom:4px}
#m2-scope .fav-lock .tx span{font-size:13px;color:var(--m2-meta);font-weight:500}
#m2-scope .fav-btn{background:var(--m2-navy);color:#fff;font-size:13.5px;font-weight:800;
  padding:11px 22px;border-radius:11px;white-space:nowrap}
#m2-scope .fav-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#m2-scope .fav-i{border:1px solid var(--m2-border);border-radius:11px;padding:11px 13px}
#m2-scope .fav-i .n{font-size:13.5px;font-weight:800;color:var(--m2-navy)}
#m2-scope .fav-i .m{font-size:11.5px;color:var(--m2-meta);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#m2-scope .fav-i .v{font-size:12.5px;font-weight:800;color:#0c4a6e;margin-top:6px}
#m2-scope .fav-i .v em{font-style:normal;font-weight:800}
#m2-scope .fav-i .v em.up{color:#0369a1}
#m2-scope .fav-i .v em.down{color:#c2410c}
/* 저수율이 없는 곳 — 숫자가 있는 것처럼 보이면 안 되므로 톤을 낮춘다 */
#m2-scope .fav-i .v .na{color:var(--m2-meta);font-weight:600;font-size:12px}
/* 날씨는 저수율과 줄을 나눈다 — 한 줄에 몰면 숫자가 뭘 뜻하는지 안 보인다 */
#m2-scope .fav-i .wx{display:flex;align-items:center;flex-wrap:wrap;gap:2px 7px;
  margin-top:5px;font-size:11.5px;font-weight:600;color:var(--m2-meta)}
#m2-scope .fav-i .wx i{font-size:13px;color:#94a3b8}
#m2-scope .fav-i .wx b{font-weight:700;color:#475569;white-space:nowrap}
#m2-scope .fav-i .wx b.hv{color:#b91c1c}
/* 비회원 예시 — 라벨 없이 목록만 보이면 '내 저수지'로 오해한다 */
#m2-scope .fav-ex{position:relative;margin-top:20px}
#m2-scope .fav-ex .exlb{position:absolute;top:-9px;left:12px;font-size:10.5px;font-weight:800;
  color:#64748b;background:#fff;border:1px solid var(--m2-border);border-radius:5px;padding:1px 7px}
#m2-scope .fav-ex .fav-list{opacity:.55}
/* 담은 곳 0 — '없습니다'로 끝내면 다음 행동을 모른다 */
#m2-scope .emp-h{font-size:16px;font-weight:800;color:var(--m2-navy);margin:0 0 4px}
#m2-scope .emp-s{font-size:13px;color:var(--m2-meta);font-weight:500;margin:0 0 15px}
#m2-scope .emp-search{display:flex;gap:8px;margin-bottom:14px}
#m2-scope .emp-search .i{flex:1;min-width:0;border:1.5px solid var(--m2-border);border-radius:11px;
  padding:11px 14px;font-size:13.5px;color:var(--m2-meta);background:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#m2-scope .emp-search .b{background:var(--m2-navy);color:#fff;font-size:13px;font-weight:800;
  padding:11px 20px;border-radius:11px;white-space:nowrap}
#m2-scope .emp-lb{font-size:11.5px;font-weight:800;color:#64748b;margin:0 0 8px;letter-spacing:.3px}
#m2-scope .emp-sug{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#m2-scope .emp-c{border:1px solid var(--m2-border);border-radius:11px;padding:12px 13px;background:#fff}
#m2-scope .emp-c .n{font-size:13.5px;font-weight:800;color:var(--m2-navy)}
#m2-scope .emp-c .m{font-size:11.5px;color:var(--m2-meta);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#m2-scope .emp-c .v{font-size:12.5px;font-weight:800;color:#0c4a6e;margin-top:6px}
#m2-scope .emp-c .add{display:block;text-align:center;margin-top:10px;font-size:12px;font-weight:800;
  color:#3a2c00;background:var(--m2-orange);border-radius:8px;padding:7px 0}

/* ── 갱신 시각 ── */
#m2-scope .bf-upd{font-size:11.5px;color:var(--m2-meta);font-weight:600;margin-top:10px;text-align:right}

/* ── 모바일 ── */
@media (max-width:767.98px){
  /* 부제가 4줄(68px)까지 길어졌다 — 계산식 상세는 모바일에서 접는다 */
  #m2-scope .bf-sub-long{display:none}
  /* ⚠ 특이도 충돌 — index.php 인라인 <style> 의 `#m2-scope .m2-shead{align-items:flex-end}`
     와 특이도가 같은데(1,1,0) 그쪽이 나중에 로드돼 이긴다.
     column 방향에서 flex-end 면 자식이 오른쪽에 붙어, 제목이 짧을수록 더 밀린다
     (실측: '내 관심 저수지' 폭 118px 이 334px 컨테이너에서 216px 밀림).
     div 를 붙여 (1,1,1) 로 올려 이긴다. !important 는 쓰지 않는다. */
  #m2-scope div.m2-shead{flex-direction:column;align-items:flex-start;gap:10px}
  #m2-scope div.m2-shead > *{max-width:100%}
  #m2-scope .m2-shead-link{align-self:flex-start}
  #m2-scope .rec{grid-template-columns:1fr;gap:11px}
  /* ── ① 카드: 모바일에선 가로 3열이 세로 3장이 되면서 화면을 크게 먹는다.
     글자 크기는 그대로 두고 여백만 조인다(정보 밀도는 유지, 스크롤만 줄임) */
  #m2-scope .rec-card{padding:14px;gap:8px}
  #m2-scope .rec-card.lead .rec-name{font-size:21px}
  #m2-scope .rec-rows{gap:6px}
  #m2-scope .rec-foot{padding-top:6px}
  #m2-scope .rec-foot a{padding:8px 0}
  #m2-scope .rec-near{grid-template-columns:1fr}
  /* ── ② 목록: 한 줄에 다 밀어넣지 않고 3단으로 편다 ──
     이름 / 주소 / 버튼 을 세로로 쌓고, 저수율과 변화는 그 아래 한 줄에서 좌우로 나눈다.
     행 높이는 늘지만 각 정보가 자기 줄을 갖게 되어 훨씬 읽힌다. */
  #m2-scope .wl-r{grid-template-columns:24px 1fr auto;gap:0 10px;
    align-items:start;padding:11px 13px}
  #m2-scope .wl-r.head{display:none}
  #m2-scope .wl-n{grid-column:1;grid-row:1;font-size:13px;line-height:1.45}
  #m2-scope .wl-c{grid-column:2/-1;grid-row:1}
  #m2-scope .wl-nm{order:1;font-size:14px;flex:0 0 100%}
  #m2-scope .wl-ad{order:2;margin-top:1px;white-space:normal;word-break:keep-all;line-height:1.35}
  #m2-scope .wl-act{order:3;flex:0 0 100%;margin-top:7px;gap:7px}
  #m2-scope .wl-act .b-mini{flex:0 0 auto;font-size:11.5px;padding:7px 14px}
  /* 저수율(좌) · 변화(우) — 두 칸으로 나눠 겹칠 여지를 없앤다 */
  #m2-scope .wl-rate{grid-column:2;grid-row:2;margin-top:6px;align-self:center;font-size:12.5px}
  #m2-scope .wl-dc{grid-column:3;grid-row:2;margin-top:6px;align-self:center}
  #m2-scope .wl-per{font-size:11px}
  #m2-scope .wl-up{font-size:11.5px;padding:4px 10px}
  #m2-scope .hp-nm .b-mini{font-size:10.5px;padding:4px 9px}
  #m2-scope .hp{grid-template-columns:1fr}
  #m2-scope .hp-m{grid-template-columns:1fr}   /* 모바일은 1열 — 칩 배치가 카드마다 동일해진다 */
  #m2-scope .cal{grid-template-columns:repeat(3,minmax(0,1fr))}
  #m2-scope .fav-list,#m2-scope .emp-sug{grid-template-columns:1fr}
}

/* ============================================================
   저수율 증감 랭킹 페이지 (/contents/water/rank.php)
   목록(.wl-*)은 메인 ② 것을 그대로 재사용하고, 페이지 머리·탭만 여기 둔다.
   ============================================================ */
#water-rank-wrap .wr-wrap{max-width:1200px;margin:0 auto;padding:26px 16px 60px}
#m2-scope .wr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:18px}
#m2-scope .wr-tag{font-size:12px;font-weight:800;color:var(--m2-violet);letter-spacing:1px;text-transform:uppercase}
#m2-scope .wr-title{font-size:27px;font-weight:900;color:var(--m2-navy);margin:5px 0 6px;line-height:1.25;
  word-break:keep-all}
#m2-scope .wr-title em{font-style:normal;color:var(--m2-blue)}
#m2-scope .wr-sub{font-size:13px;color:#5c6b7f;font-weight:500;word-break:keep-all}
#m2-scope .wr-map{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--m2-navy);text-decoration:none;
  padding:9px 16px;border:1.5px solid var(--m2-border);border-radius:999px;background:#fff;white-space:nowrap}
#m2-scope .wr-map:hover{background:var(--m2-navy);color:#fff;border-color:var(--m2-navy)}

/* 상승 / 하락 — 둘 중 하나라는 걸 한눈에 보이게 붙여 놓은 세그먼트 */
#m2-scope .wr-seg{display:inline-flex;background:#eef2f7;border-radius:12px;padding:4px;gap:4px;margin-bottom:14px}
#m2-scope .wr-seg a{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:800;
  color:#5c6b7f;text-decoration:none;padding:9px 20px;border-radius:9px;white-space:nowrap}
#m2-scope .wr-seg a:hover{color:var(--m2-navy)}
#m2-scope .wr-seg a.on{background:#fff;color:var(--m2-navy);box-shadow:0 1px 3px rgba(15,23,42,.14)}
#m2-scope .wr-seg a.on i{color:#0369a1}

/* 지역 탭 — 건수를 함께 보여 빈 탭을 눌러 보지 않게 한다 */
#m2-scope .wr-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
#m2-scope .wr-tabs a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
  color:#475569;text-decoration:none;background:#fff;border:1.5px solid var(--m2-border);
  padding:8px 14px;border-radius:999px;white-space:nowrap}
#m2-scope .wr-tabs a b{font-size:11.5px;font-weight:800;color:#5c6b7f;background:#f1f5f9;
  padding:1px 7px;border-radius:999px;font-variant-numeric:tabular-nums}
#m2-scope .wr-tabs a:hover{border-color:#94a3b8;color:var(--m2-navy)}
#m2-scope .wr-tabs a.on{background:var(--m2-navy);color:#fff;border-color:var(--m2-navy)}
#m2-scope .wr-tabs a.on b{background:rgba(255,255,255,.22);color:#fff}
#m2-scope .wr-tabs a.zero{opacity:.5}          /* 0곳이어도 숨기지 않는다 — 없다는 것도 정보다 */

/* 페이징 */
#m2-scope .wr-page{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:18px;flex-wrap:wrap}
#m2-scope .wr-page a{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#475569;text-decoration:none;background:#fff;
  border:1.5px solid var(--m2-border);border-radius:9px;padding:0 9px}
#m2-scope .wr-page a:hover{border-color:#94a3b8;color:var(--m2-navy)}
#m2-scope .wr-page a.on{background:var(--m2-navy);color:#fff;border-color:var(--m2-navy)}
#m2-scope .wr-page a.off{opacity:.35;pointer-events:none}
#m2-scope .wr-page .dots{color:var(--m2-meta);font-weight:800;padding:0 2px}
#m2-scope .wr-upd{text-align:center;font-size:12px;color:#5c6b7f;font-weight:600;margin-top:12px}

/* ② 의 배경은 '5줄짜리 순위 사다리'라 40줄 목록에 그대로 쓰면
   위 4줄만 파랗고 나머지가 허옇게 떠 목록이 잘린 것처럼 보인다.
   랭킹 페이지는 줄 구분이 목적이므로 지브라로 바꾸고 1위만 강조한다. */
#water-rank-wrap #m2-scope .wl-r:not(.head){background:#fff}
#water-rank-wrap #m2-scope .wl-r:not(.head):nth-child(even){background:#f7fbfe}
#water-rank-wrap #m2-scope .wl-r.top{background:#e2f2fd}

/* 빈 상태 — 데이터 준비 중 / 해당 지역 0곳 */
#m2-scope .wr-empty{background:#fff;border:1px solid var(--m2-border);border-radius:16px;
  padding:52px 20px;text-align:center}
#m2-scope .wr-empty i{font-size:34px;color:#cbd5e1}
#m2-scope .wr-empty p{margin:12px 0 4px;font-size:15px;font-weight:800;color:var(--m2-navy)}
#m2-scope .wr-empty span{font-size:13px;color:#5c6b7f}

@media (max-width:767.98px){
  /* 모바일 상단 헤더(4rem)에 콘텐츠가 묻히지 않게 — 트랩 #1 */
  #water-rank-wrap{padding-top:64px !important;padding-block-start:64px !important}
  #water-rank-wrap .wr-wrap{padding:14px 13px 48px}

  /* [2026-09-02] 지역 탭이 생기면서 컨트롤이 3덩어리(지도버튼·세그먼트·탭)로 쌓여
     목록이 화면 밖으로 밀렸다. 지도 버튼을 제목 줄로 올려 한 줄을 줄인다.
     (세로로 쌓지 않으려고 모바일에서도 row 유지 — 제목 22px + 버튼이 358px 에 들어간다) */
  #m2-scope .wr-head{flex-direction:row;align-items:flex-start;gap:10px;margin-bottom:14px}
  #m2-scope .wr-title{font-size:21px;margin:4px 0 5px}
  #m2-scope .wr-sub{font-size:12px;line-height:1.5}
  #m2-scope .wr-map{font-size:12px;padding:8px 12px;margin-top:2px}

  #m2-scope .wr-seg{display:flex;width:100%;margin-bottom:10px;padding:3px;box-sizing:border-box}
  #m2-scope .wr-seg a{flex:1 1 0;min-width:0;justify-content:center;padding:9px 0;font-size:13px}

  /* 탭은 줄바꿈으로 쌓지 않고 가로 스크롤 한 줄.
     양 끝을 페이드 처리해 '옆으로 더 있다' 를 알린다 — 없으면 그냥 잘린 것처럼 보인다.
     활성 탭은 JS 가 가운데로 당겨 두므로 페이드에 가리지 않는다. */
  #m2-scope .wr-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 -13px 12px;padding:0 13px 2px;gap:6px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
  #m2-scope .wr-tabs::-webkit-scrollbar{display:none}
  #m2-scope .wr-tabs a{flex:0 0 auto;font-size:12.5px;padding:7px 11px;gap:5px}
  #m2-scope .wr-tabs a b{font-size:11px;padding:1px 6px}
}

/* ② 헤더 액션 2개(상승/하락) — 한 개짜리 m2-shead-link 자리를 대신한다 */
#m2-scope .m2-shead-acts{display:flex;gap:8px;flex-wrap:wrap}
#m2-scope .m2-shead-acts .sl-up i{color:#0369a1}
#m2-scope .m2-shead-acts .sl-down i{color:#c2410c}
@media (max-width:767.98px){
  #m2-scope .m2-shead-acts{width:100%}
  #m2-scope .m2-shead-acts .m2-shead-link{flex:1 1 0;justify-content:center}
}

/* ============================================================
   [2026-09-02] 내 지역 / 전국 (① 주말추천 · ④ 캘린더)
   · 토글은 섹션 머리글 우측 — 본문과 머리글 사이에 따로 띄우면
     어느 쪽에 걸린 컨트롤인지 읽히지 않는다(전면 재배치, 2026-09-02).
   · 제목 앞 지역 칩과 카드 묶음이 같은 data-*-show 를 써서 함께 전환된다.
   ============================================================ */

/* [hidden] 은 UA 스타일시트의 display:none 일 뿐이라 author 의 display 규칙에 진다.
   .ttl-rg 가 inline-flex 라 토글해도 안 사라졌다(실측). 스코프 안에서 확실히 이기게 한다. */
#m2-scope [hidden]{display:none !important}

/* 머리글 우측 묶음 — 토글 + 기존 링크 */
#m2-scope .m2-shead-act{display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* 세그먼트 토글 — 활성은 네이비 알약. m2-shead-link:hover 와 같은 색 계열이라
   머리글 안에서 따로 놀지 않는다 */
#m2-scope .eb-scope{display:inline-flex;gap:2px;padding:3px;box-sizing:border-box;
  background:#eef2f7;border:1px solid var(--m2-border);border-radius:999px}
#m2-scope .eb-scope button{border:0;background:transparent;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:800;color:#64748b;padding:7px 15px;border-radius:999px;
  white-space:nowrap;transition:background .15s,color .15s}
#m2-scope .eb-scope button:hover{color:var(--m2-navy)}
#m2-scope .eb-scope button.on{background:var(--m2-navy);color:#fff}

/* 비회원 잠금 — 토글과 같은 자리, 같은 높이 */
#m2-scope .eb-lock{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;box-sizing:border-box;
  font-size:12.5px;font-weight:800;color:#0369a1;background:#e0f2fe;
  border:1px solid #bae6fd;border-radius:999px;padding:8px 15px;white-space:nowrap}
#m2-scope .eb-lock:hover{background:#bae6fd}
#m2-scope .eb-lock i{font-size:14px}

/* 제목 앞 지역 칩 — 제목의 em(파랑)과 겹치지 않게 옅은 하늘색 칩으로 */
#m2-scope .m2-shead-title .ttl-rg{display:inline-flex;align-items:center;gap:4px;
  font-size:.56em;font-weight:800;color:#0369a1;background:#e0f2fe;border:1px solid #bae6fd;
  border-radius:999px;padding:4px 11px;margin-right:9px;vertical-align:3px;letter-spacing:0}
#m2-scope .m2-shead-title .ttl-rg i{font-size:1.05em}

/* 내 지역에 조건 맞는 곳이 0 — 섹션을 비우지 않고 전국으로 넘긴다 */
#m2-scope .rec-none-rg{background:#f8fafc;border-color:#e2e8f0}
#m2-scope .rec-goall{margin-top:12px;border:0;cursor:pointer;font-family:inherit;
  background:linear-gradient(135deg,#0ea5e9,#1d4ed8);color:#fff;
  font-size:13px;font-weight:800;padding:10px 18px;border-radius:10px;
  box-shadow:0 1px 3px rgba(29,78,216,.28)}
#m2-scope .rec-goall:hover{filter:brightness(1.08)}

@media (max-width:767.98px){
  /* 머리글이 세로로 쌓인다. 토글과 [전체 저수지] 를 같은 높이(40px)·같은 폭(반반)으로 —
     크기가 다르면 둘 중 무엇이 주 동작인지 헷갈린다. */
  /* flex 로 반반 나누면 정확히 같아지지 않는다 — border-box 에서 flex-basis:0 은
     '테두리+패딩' 만큼을 최소값으로 갖기 때문에, 토글(border1+padding3=8px)과
     링크(border1.5=3px)의 차이 5px 이 그대로 폭 차이로 남는다(실측 178 vs 173).
     grid 트랙은 아이템의 박스 장식과 무관하게 균등해서 이 문제가 없다. */
  #m2-scope .m2-shead-act{width:100%;display:grid;grid-auto-flow:column;
    grid-auto-columns:1fr;gap:8px;align-items:stretch}
  #m2-scope .eb-scope{min-width:0;height:40px;align-items:center;padding:3px;box-sizing:border-box}
  #m2-scope .eb-scope button{flex:1 1 0;min-width:0;text-align:center;padding:0;height:100%}
  #m2-scope .eb-lock{min-width:0;height:40px;padding:0;justify-content:center;box-sizing:border-box}
  /* index.php 의 .m2-shead-link(padding:8px 14px)를 (1,2,0) 으로 덮는다 */
  #m2-scope .m2-shead-act .m2-shead-link{min-width:0;height:40px;padding:0;
    display:inline-flex;align-items:center;justify-content:center;gap:5px;box-sizing:border-box}
  #m2-scope .m2-shead-title .ttl-rg{font-size:.62em;padding:3px 9px;margin-right:7px;vertical-align:2px}
}