html, body{ overflow-x:hidden }
:root { --panel-border:#e2e2e2; --soft:#edf6f8; --muted:#e3ecef; --selw:145px }
* { box-sizing: border-box; }
body{ margin:0; font-family: Pretendard, "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; min-height:100vh; background:linear-gradient(180deg,#f2fbf7 0%, #ecf6f8 100%); }
.bar{ display:grid; grid-template-columns: minmax(0,2fr) minmax(0,3fr); gap:12px; align-items:center; padding:10px 14px; background:transparent; border-bottom:1px solid var(--muted); }
.bar-left{ display:flex; align-items:center; gap:8px; width:100%; min-width:0; margin-left:12px }
.bar-left select, .bar-right select{ flex:0 0 var(--selw); width:var(--selw); min-width:0 }
.bar-right{ display:flex; align-items:center; gap:12px; min-width:0 }
.bar-right .hstack > button{ margin-left:12px }
/* 라벨이 flex 수축으로 줄바꿈되는 현상 방지 */
.bar-left b, .bar-right b{ white-space:nowrap; flex-shrink:0 }
.wrap{ display:grid; grid-template-columns: 2fr 3fr; gap:12px; padding:12px }
/* Grid 자식이 콘텐츠 폭에 끌려 전체가 늘어나는 것 방지 */
.wrap > *{ min-width:0 }
.right-col > *{ min-width:0 }
#map{ height:calc(100vh - 180px); border:1px solid var(--panel-border); border-radius:8px }
/* 지도 좌상단 툴바(날짜 선택) */
.map-tools{ position:absolute; left:16px; top:16px; z-index:1200; display:flex; gap:10px; align-items:center }
.map-tools input[type="date"]{ padding:8px 14px; border:1px solid #d5e2ea; border-radius:9999px; background:#fff; font-size:14px; font-family: Pretendard, "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Arial, sans-serif }
.panel{ border:1px solid var(--panel-border); border-radius:8px; padding:10px; background:#fff; max-width:100% }
  table{ width:100%; border-collapse:collapse; font-size:13px }
  /* 컬럼 폭은 colgroup으로 고정하여 가로 스크롤을 표 컨테이너에서 처리 */
  col.name{ width:140px }
  col.code{ width:100px }
  col.dcol{ width:60px }
  th,td{ border:1px solid #eee; padding:6px 8px; white-space:nowrap; text-align:center }
.panel table thead th{ position:sticky; top:0; background:#f6fbf9; z-index:2; font-weight:500 }
/* 선택유역표 헤더 sticky 누락 보완: 두 번째 표 영역에 동일 규칙이 적용되도록 범위 넓힘 */
#tbl-sel thead th{ position:sticky; top:0; background:#f6fbf9; z-index:2; font-weight:500 }
  /* Sticky 첫 두 컬럼 + 일자 컬럼 폭 */
  th.name, td.name{ position:sticky; left:0; background:#fff; z-index:3; width:140px; min-width:140px; text-align:left; padding-left:20px }
  th.code, td.code{ position:sticky; left:140px; background:#fff; z-index:4; width:100px; min-width:100px; border-left:none }
  /* thead의 좌측 고정 헤더도 스크롤에 함께 고정되도록 명시 */
  #tbl thead th.name, #tbl-sel thead th.name{ left:0; z-index:5 }
  #tbl thead th.code, #tbl-sel thead th.code{ left:140px; z-index:6; border-left:none }
  th.dcol, td.dcol{ width:60px; min-width:60px; text-align:center }
th{ background:#fafafa; position:sticky; top:0; z-index:1; }
/* 행 선택 하이라이트 */
#tbl tbody tr.row-selected td{ background:#eaf2ff !important }
#tbl tbody tr.row-selected td.name{ box-shadow: inset 3px 0 0 #0ea5a0 }
.legend{ position:absolute; right:10px; bottom:12px; background:#fff; border:1px solid #ddd; padding:6px 8px; border-radius:6px; z-index:1200; pointer-events:none }
.table-wrap{ overflow:auto; width:100%; max-width:100%; border:1px solid #eef3f5; border-radius:6px; position:relative }
/* 고정열 경계선(유역명 140px | 유역코드) - 스크롤 시 사라짐 방지용 가상선 */
/* 중앙 가상 경계선: 컨테이너 기준이므로 스크롤해도 고정 */
.table-wrap::before{ content:""; position:absolute; top:0; bottom:0; left:140px; width:0; border-left:1px solid #e5e9ef; z-index:7; pointer-events:none }
.table-wrap table{ width:max-content }
/* 차트가 컨테이너 폭을 넘지 않도록 */
#chart{ display:block; max-width:100% }
/* 우측 패널(표 2 + 그래프) 스택 구분선 */
.panel-stacked .sec + .sec{ margin-top:20px; padding-top:16px; border-top:1px solid #eaf1f3 }
/* 표 타이틀 왼쪽 여백 + 볼드 */
.title-pad{ padding-left:15px; font-weight:700 }
.hstack{ display:flex; align-items:center; gap:6px }
.btn { padding:8px 14px; border:1px solid #cfd8dc; background:#fff; border-radius:9999px; cursor:pointer; }
.btn:hover { background:#f4f6f8; }
.btn--primary{ background:#16a34a; border-color:#16a34a; color:#fff; }
.btn--primary:hover{ background:#148a40; border-color:#148a40; }
.btn--outline-green{ border-color:#16a34a; color:inherit }
.btn--outline-green:hover{ background:#f0faf4 }
.btn--sm{ padding:6px 10px; font-size:12px }
input[type="number"]{ padding:8px 12px; border:1px solid #d5e2ea; border-radius:9999px; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.02) }
select{ padding:8px 28px 8px 12px; border:1px solid #d5e2ea; border-radius:9999px; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.02); appearance:none; -moz-appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 20 12'%3E%3Cpath fill='%2390a4ae' d='M2 2l8 8 8-8'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:10px 6px }
/* 필터 select 좌측 여백 확대 */
.bar-left select, .bar-right select{ padding-left:16px }
.bar .hstack + .hstack:not(.actions)::before{ content:'\2022'; color:#93a3ad; margin:0 2px }
/* Loading overlay */
#loading{ display:none; position:fixed; inset:0; background:rgba(255,255,255,.55); z-index:9999; align-items:center; justify-content:center; backdrop-filter: blur(2px) }
#loading .box{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; background:#fff; border:1px solid #e5e9ef; box-shadow:0 10px 24px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.06); color:#0ea5a0; font-weight:600 }
#loading .spinner{ width:16px; height:16px; border:2px solid #d7f0ed; border-top-color:#0ea5a0; border-right-color:#0ea5a0; border-radius:50%; animation:loading-spin .8s linear infinite }
@keyframes loading-spin{ to{ transform:rotate(360deg) } }
/* Leaflet hover tooltip styling (no big white box) */
.leaflet-tooltip.wx-tip{ background:rgba(17,24,39,.72); color:#fff; border:none; border-radius:8px; padding:4px 8px; box-shadow:none; backdrop-filter:saturate(1.2); font-size:12px }
.leaflet-tooltip.wx-tip:before{ border:0 !important }
/* 클릭 시 SVG 경계 사각 포커스 제거 */
.leaflet-container .leaflet-interactive:focus{ outline:none }
.app-header{ display:flex; justify-content:center; align-items:center; padding:8px 14px; }
.app-header .title{ margin:0; font-size:22px; color:#0ea5a0; font-weight:700; letter-spacing:.2px; font-family:"Noto Sans KR", Pretendard, system-ui, -apple-system, "Segoe UI", Arial, sans-serif }
.app-header .title .title-muted{ color: #a1a1a1; font-weight:inherit }
.app-footer{ text-align:center; padding:12px; font-size:12px; color:#6b7280 }

/* === [Merged Patch] Fixed boundary between sticky col-1 and col-2 === */
/* Remove the old container-based virtual line (which scrolls independently) */
.table-wrap::before { content: none !important; }

/* Avoid double line: let column 2 draw the vertical boundary */
#tbl th.name, #tbl td.name,
#tbl-sel th.name, #tbl-sel td.name {
  border-right: none;
}

/* Draw the vertical boundary as part of the sticky 2nd column itself */
#tbl th.code::before, #tbl td.code::before,
#tbl-sel th.code::before, #tbl-sel td.code::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  border-left: 1px solid #e5e9ef; /* match theme */
  pointer-events: none;
}
/* === [End Patch] === */


/* ===== Responsive right column (keep vertical ratio with map) ===== */
/* 우측 열 전체를 지도와 동일한 뷰포트 기반 높이로 고정 */
.right-col{ height:calc(100vh - 180px); display:flex; flex-direction:column; }

/* 우측 패널 내부는 기존 .sec 구조를 유지하되, 섹션이 가용 높이를 비율로 채우도록 */
.panel.panel-stacked{ height:100%; display:flex; flex-direction:column; }
.panel.panel-stacked .sec{ min-height:0; display:flex; flex-direction:column; }
/* 상단 표는 가변(남는 높이 활용) */
.panel.panel-stacked > .sec:first-child{ flex:1 1 auto; }
/* 선택유역 표는 콘텐츠만큼만(항상 1행) */
.panel.panel-stacked > #sel-panel{ flex:0 0 auto; }
/* 그래프는 나머지 전체를 차지 */
.panel.panel-stacked > .sec:last-child{ flex:1 1 auto; }

/* 표 래퍼: 섹션별로 다르게 동작 */
.panel.panel-stacked > .sec:first-child .table-wrap{ flex:1 1 auto; max-height:none !important; height:auto; }
.panel.panel-stacked > #sel-panel .table-wrap{ flex:0 0 auto; max-height:none !important; height:auto; }

/* 차트: 섹션 높이를 100% 채우도록 (Chart.js responsive와 함께 동작) */
.panel.panel-stacked .sec:last-child canvas#chart{ width:100% !important; height:100% !important; display:block; }
/* 너무 작아지지 않도록 최소 높이 가드 */
.panel.panel-stacked .sec:last-child{ min-height:260px; }