/* www/custom.css — 동적가뭄 취약지도 (8px 그리드 시스템) */

/* === 디자인 토큰 === */
:root {
  /* 간격 (8px 그리드) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* 글꼴 */
  --font-xs: 8px;
  --font-sm: 16px;
  --font-md: 16px;
  --font-lg: 24px;
  --font-xl: 24px;
  --lookup-note-font: 13px;   /* 조견표 카드 보조 글자(단위·안내·결과 설명·자료 갱신) */
  --lookup-control-h: 38px;   /* 조견표 날짜·숫자 입력란 높이 = 드롭다운(selectize) 높이 */

  /* 둥글기 */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* 테마 색상 — R(config/theme.R)에서 tags$style로 덮어쓰기 가능 */
  --brand-primary: #1A3A5C;
  --brand-accent: #427AA1;
  --brand-highlight: #7EC8F8;
  --action-primary: #1A3A5C;
  --action-slider: #427AA1;
}

/* === FHD (1920x1080 이하) === */
@media (max-width: 1920px) {
  :root {
    --sidebar-width: 320px;
    --map-height: 810px;
    --chart-height: 270px;
    --popup-width: 280px;
    --intake-search-width: 240px;
    --popup-top: var(--space-sm);
    --popup-gap: var(--space-sm);
    --popup-body-max-height: 220px;
    --header-title: 24px;
    --header-sub: 16px;
    --header-padding: var(--space-md) var(--space-md) var(--space-sm);
    --section-margin: var(--space-md);
    --section-header-padding: var(--space-sm) var(--space-md);
    --section-header-font: 16px;
    --section-body-padding: var(--space-sm) var(--space-md) var(--space-xs);
    --form-group-margin: var(--space-xs);
    --control-padding: var(--space-sm);
    --label-font: var(--font-sm);
    --select-font: var(--font-sm);
    --btn-margin-top: var(--space-md);
    --btn-font: var(--font-md);
    --btn-padding: var(--space-sm);
    --lookup-note-font: 13px;
    --lookup-control-h: 38px;
    --legend-reserve: 604px;    /* 우측 스택 하한 = 범례 카드(공식 표 588px) 높이 + 여백 */
    --field-label-col: 68px;    /* 시나리오 드롭다운 라벨 열 폭 (4글자 16px) */
    --logo-max-h: 124px;
    --section-margin: var(--space-sm);
  }
  .supply-detail-panel { display: none !important; }
  .emd-hover-trigger {
    position: static;
    cursor: pointer;
    border-bottom: 1px dashed #aaa;
  }
  .emd-hover-tooltip {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
    background: rgba(52, 56, 62, 0.97);
    border: 1px solid #757577;
    border-radius: 3px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    padding: var(--space-sm);
    font-size: 12px;
    color: #D0D1D5;
    line-height: 1.7;
    z-index: 9999;
  }
  .emd-hover-trigger:hover .emd-hover-tooltip { display: block; }
  /* 툴팁의 기준 요소를 카드(.intake-info-panel)로 올려 스크롤 본문(overflow:auto)에 잘리지 않고 카드 아래로 펼쳐지게 */
  .popup-stack > .intake-info-panel .info-table { position: static; }
}

/* === QHD (2560x1440, 1921px 이상) === */
@media (min-width: 1921px) {
  :root {
    --lookup-note-font: 14px;
    --lookup-control-h: 38px;
    --sidebar-width: 320px;
    --map-height: 1080px;
    --chart-height: 432px;
    --chart-padding: var(--space-2xl) var(--space-md) var(--space-md);
    --popup-width: 400px;
    --intake-search-width: 300px;
    --popup-top: var(--space-lg);
    --popup-gap: var(--space-lg);
    --popup-body-max-height: 320px;
    --header-title: var(--font-xl);
    --header-sub: var(--font-lg);
    --header-padding: var(--space-lg) var(--space-md) var(--space-md);
    --section-margin: var(--space-md);
    --section-header-padding: var(--space-sm) var(--space-md);
    --section-header-font: var(--font-md);
    --section-body-padding: var(--space-md) var(--space-md) var(--space-sm);
    --form-group-margin: var(--space-sm);
    --control-padding: var(--space-lg) var(--space-md) var(--space-md);
    --label-font: 20px;
    --select-font: 20px;
    --section-header-font: 20px;
    --btn-margin-top: var(--space-md);
    --btn-font: 20px;
    --btn-padding: var(--space-md);
    --sidebar-width: 380px;
    --legend-reserve: 660px;
    --field-label-col: 88px;
    --lookup-note-font: 15px;
    --lookup-control-h: 42px;
    --logo-max-h: 190px;
  }
  .emd-hover-tooltip { display: none !important; }

}

/* === 글꼴 === */
@font-face {
  font-family: 'KoPubDotum';
  src: url('KoPubWorldDotumMedium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html, body, button, input, select, textarea, .form-control, .selectize-input,
.shiny-input-container, .leaflet-container,
.main-header, .main-sidebar, .sidebar, .content-wrapper,
.detail-card, .detail-card-header, .detail-card-body,
.sidebar-section, .sidebar-section-header, .sidebar-section-body,
.btn, .btn-analyze, .chart-radio-bar,
.plotly text, .plotly .gtitle, .plotly .legendtext,
table, td, th, label, h1, h2, h3, h4, h5, h6, p, span, div {
  font-family: 'KoPubDotum', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif !important;
}

/* === 헤더 비활성화 === */
.main-header { display: none !important; }

/* === 사이드바 === */
.main-sidebar,
.left-side {
  background-color: #FFFFFF !important;
  border-right: 1px solid #E0E0E0;
  padding-top: 0 !important;
  top: 0 !important;
  height: 100vh !important;
  overflow: hidden !important;
}

.main-sidebar > .sidebar,
.left-side > .sidebar {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.sidebar-menu > li > a,
.sidebar a,
.sidebar label,
.sidebar h4 {
  color: #333 !important;
}

.sidebar-header-box { flex-shrink: 0; }

.sidebar-controls {
  flex: 1;
  overflow-y: auto;
  padding: var(--control-padding, var(--space-lg) var(--space-md));
  min-height: 0;
}

.sidebar-footer { flex-shrink: 0; }

/* 헤더 박스 */
.sidebar-header-box {
  background: var(--brand-primary);
  padding: var(--header-padding, var(--space-lg) var(--space-md) var(--space-md));
  text-align: center;
}
.sidebar-header-box .title-main {
  font-size: var(--header-title) !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.35;
  letter-spacing: 0.5px;
}
.sidebar-header-box .title-sub {
  font-size: var(--header-sub) !important;
  color: #B3DBFF !important;
  margin-top: var(--space-sm);
  font-weight: 500 !important;
}

/* 섹션 카드 */
.sidebar-section {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: var(--radius-md);
  margin-bottom: var(--section-margin, var(--space-lg));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.sidebar .selectize-dropdown { z-index: 9999 !important; }

.sidebar-section-header {
  background-color: var(--brand-accent) !important;
  color: #FFFFFF !important;
  padding: var(--section-header-padding, var(--space-sm) var(--space-md));
  margin: 0 !important;
  border-left: none;
  font-weight: bold;
  font-size: var(--section-header-font, var(--font-md)) !important;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  text-align: center;
}
.sidebar-section-header i {
  color: #FFFFFF !important;
  margin-right: var(--space-xs);
}

.sidebar-section-body {
  padding: var(--section-body-padding, var(--space-md) var(--space-md) var(--space-sm));
  background-color: #FAFAFA;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.sidebar-section-body .form-group {
  margin-bottom: var(--form-group-margin, var(--space-sm));
}
.map-toggles .form-group {
  margin-bottom: 2px !important;
}
.map-toggles .checkbox {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}
.map-toggles {
  margin-top: var(--section-margin, var(--space-md));
  margin-bottom: var(--space-xs);
}

.sidebar label {
  font-size: var(--label-font, var(--font-md)) !important;
  font-weight: 600 !important;
  margin-top: var(--space-xs);
}

/* Shiny 기본 300px 고정폭 대신 섹션 너비에 맞춤 — 버튼·정보 행과 좌우 가장자리가 같아짐 */
.sidebar .shiny-input-container:not(.shiny-input-container-inline) { width: 100%; }

.sidebar .selectize-input,
.sidebar .form-control {
  font-size: var(--select-font, var(--font-md)) !important;
}
/* Bootstrap .form-control의 line-height 20px 고정이 큰 글자(QHD 20px·UHD 24px)에서 글자 위아래를 잘라내므로 글자 크기 비례로 */
.sidebar .selectize-input,
.sidebar .selectize-input .item,
.sidebar .selectize-input > input,
.sidebar .form-control,
.sidebar .selectize-dropdown .option,
.sidebar .selectize-dropdown .optgroup-header {
  line-height: 1.35 !important;
}
.sidebar .selectize-dropdown, .sidebar .selectize-dropdown .option {
  font-size: var(--select-font, var(--font-md)) !important;
}
.sidebar .selectize-input { min-height: var(--lookup-control-h, 38px); height: auto; }
.sidebar .form-control,
.sidebar .selectize-input {
  background-color: #FFFFFF;
  color: #333;
  border: 1px solid #BDBDBD;
}

/* 슬라이더 */
.sidebar .irs-bar { background: var(--action-slider) !important; border-color: var(--action-slider) !important; }
.sidebar .irs-bar-edge { background: var(--action-slider) !important; border-color: var(--action-slider) !important; }
.sidebar .irs-handle { background: #FFFFFF !important; border-color: var(--action-slider) !important; }
.sidebar .irs-from,
.sidebar .irs-to,
.sidebar .irs-single { background: var(--action-slider) !important; }

/* 분석 버튼 */
.btn-analyze {
  background-color: var(--action-primary) !important;
  color: #FFFFFF !important;
  font-weight: bold;
  font-size: var(--btn-font, 17px) !important;
  width: 100% !important;
  padding: var(--btn-padding, var(--space-md)) !important;
  border: none;
  margin: var(--btn-margin-top, var(--space-xl)) 0 0 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  border-radius: var(--radius-sm);
}
.btn-analyze:hover { background-color: var(--brand-primary) !important; }

.disabled-section { opacity: 0.5; pointer-events: none; }

/* 조견표 섹션 (접이식, 기본 접힘): 색은 분석 버튼(--action-primary)과 맞춤, 접히면 네 모서리 모두 둥글게 */
.sidebar-section-header.collapsible {
  cursor: pointer; position: relative; user-select: none;
  background-color: var(--action-primary) !important;
}
.sidebar-section-header.collapsible:focus-visible,
.precip-update-header:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--action-primary);
}
.sidebar-section-header.collapsible.collapsed { border-radius: var(--radius-md); }
.sidebar-section-header.collapsible::after {
  content: "\25BE";
  position: absolute; right: var(--space-md); top: 50%; transform: translateY(-50%);
  font-size: 0.9em; opacity: 0.85;
}
.sidebar-section-header.collapsible.collapsed::after { content: "\25B8"; }
.sidebar-section-body.collapsed { display: none; }

/* 수원별 저수율 — 조견표와 같은 접이식 카드 */
.override-section .sidebar-section-header { position: relative; }
.override-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: var(--space-xs);
  padding: 0 6px;
  border-radius: 11px;
  background: #B94700;   /* 흰 글자 5.3:1 (#ff6d00은 2.8:1) */
  color: #FFFFFF;
  font-size: 12px;
  line-height: 1;
}
.override-section .form-group { margin-bottom: var(--space-xs); }
.btn-preset-load,
.btn-override-add,
.btn-override-clear {
  /* 사이드바 입력(shiny-input-container 15px 안쪽 여백)과 좌우 가장자리 정렬 */
  width: calc(100% - 30px);
  margin-left: 15px;
  margin-right: 15px;
  min-height: var(--lookup-control-h);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--lookup-note-font);
  padding: 6px 8px;
}
.btn-preset-load,
.btn-override-add {
  border: 1px solid var(--action-primary);
  background: var(--action-primary);
  color: #FFFFFF;
}
.btn-preset-load:hover,
.btn-preset-load:focus-visible,
.btn-override-add:hover,
.btn-override-add:focus-visible {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #FFFFFF;
}
.btn-override-clear {
  margin-top: var(--space-xs);
  border: 1px solid var(--action-primary);
  background: transparent;
  color: var(--action-primary);
}
.btn-override-clear:hover,
.btn-override-clear:focus-visible {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #FFFFFF;
}
.preset-block {
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid #E0E0E0;
}
.preset-block-title {
  padding: 0 15px;   /* 입력 상자와 들여쓰기 맞춤 */
  margin-bottom: var(--space-xs);
  color: #333;
  font-size: var(--label-font);
  font-weight: 700;
}
.preset-block .form-group { margin-bottom: var(--space-xs); }
.preset-unavailable,
.preset-info {
  margin-top: var(--space-xs);
  color: #777;
  font-size: var(--lookup-note-font);
  line-height: 1.4;
}
.preset-info {
  display: grid;
  gap: 2px;
  padding: 0 15px;   /* 입력 상자와 들여쓰기 맞춤 */
}
.preset-info-row {
  display: grid;
  grid-template-columns: minmax(68px, auto) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
}
.preset-info-label { color: #555; font-weight: 700; }
.preset-info-value {
  min-width: 0;
  color: #333;
  text-align: right;
  overflow-wrap: anywhere;
}

/* 조견표 입력: 라벨 왼쪽 + 입력 오른쪽 한 줄 (사이드바 세로 높이 절약) */
.lookup-row { display: block; }
.lookup-row .form-group,
.lookup-row .shiny-input-container {
  width: 100% !important;
  min-width: 0;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.lookup-row .form-group > label {
  margin: 0 !important;
  line-height: 1.2;
  white-space: nowrap;
}
.lookup-row .selectize-control, .lookup-row .form-control { width: 100%; min-width: 0; }
.lookup-row .form-control { padding-left: 8px; padding-right: 6px; font-size: var(--select-font, var(--font-md)) !important; }
.lookup-row .selectize-input { padding-left: 8px; padding-right: 22px; font-size: var(--select-font, var(--font-md)) !important; }
.lookup-row .shiny-date-input input { width: 100% !important; }
.lookup-row input.form-control { height: var(--lookup-control-h) !important; }
/* 유역(대권역) 경계 라벨 */
/* 라벨 칩·배지: 설정판 저장값(2026-09-15 16:09) — 차콜 칩, 흰 글자·테두리 */
.basin-label-icon span,
.preset-label-icon span {
  font-size: 15px; font-weight: 700; color: #ffffff; letter-spacing: 1.5px; white-space: nowrap;
  background: rgba(28,32,40,0.86); padding: 3px 15px; border-radius: 13px; border: 1.5px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  transform: translate(-50%, -50%); display: inline-block;
}
/* 영향권 원 라벨은 시연 가독성을 위해 크게 */
.preset-label-icon span {
  font-size: 24px; padding: 6px 24px; border-radius: 22px; border-width: 2px;
}
.leaflet-tooltip.intake-selected-label {
  padding: 4px 12px;
  border: 1.5px solid #ffffff;
  border-radius: 13px;
  background: rgba(28, 32, 40, 0.86);
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.35;
  white-space: nowrap;
}
.leaflet-tooltip.intake-selected-label::before {
  display: none;
}
.basin-badge {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 700;
  background: rgba(28,32,40,0.88); color: #fff; border-left: 3px solid #ffa200; border-radius: 6px;
  padding: 8px 14px; font-size: 13px; box-shadow: 0 2px 10px rgba(0,0,0,0.35); pointer-events: none; display: none; white-space: nowrap;
}
.basin-badge b { font-size: 15px; letter-spacing: 0.5px; }
.basin-badge small { color: #9fb0c3; display: block; margin-top: 2px; }
/* 과거 가뭄 사례 배지: 시연용으로 약 2.5배 크기, 유역 배지가 같이 뜨면 그 아래에 놓임 */
.preset-badge {
  position: absolute; top: 25px; left: 50%; transform: translateX(-50%); z-index: 700;
  background: rgba(28,32,40,0.88); color: #fff; border-left: 6px solid #FFD600; border-radius: 10px;
  padding: 12px 26px; font-size: 26px; font-weight: 700; letter-spacing: 0.5px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35); pointer-events: none; display: none; white-space: nowrap;
}
.basin-badge[style*="display: block"] ~ .preset-badge { top: 90px; }
/* 입력창 안 오른쪽에 단위(mm) 고정: 입력 요소만 감싼 래퍼 기준 */
.input-unit { position: relative; display: block; min-width: 0; }
.input-unit .input-unit-label {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: var(--lookup-note-font); color: #777; pointer-events: none; line-height: 1;
}
.input-unit input.form-control { padding-right: 34px !important; text-align: right; }   /* 숫자 우측 정렬, 단위 앞까지 */
.lookup-row .selectize-input { padding-right: 20px; }
.lookup-period {
  text-align: right; padding-right: 15px;   /* 입력 박스 오른쪽 끝에 맞춰 우측 정렬 (두 줄 동일) */
  font-size: var(--lookup-note-font);
  color: var(--brand-accent);
  margin: 0 0 var(--space-sm);
  line-height: 1.4;
}
/* 조견표 자료 갱신 (접이식 하위 블록) */
.precip-update { margin-top: var(--space-sm); border-top: 1px dashed #D0D0D0; padding-top: var(--space-xs); }
.precip-update-header {
  cursor: pointer; user-select: none; position: relative;
  font-size: var(--select-font, var(--font-md)); font-weight: 600; color: #555; padding: 2px 0;
}
.precip-update-header::after { content: "\25BE"; position: absolute; right: 4px; opacity: 0.7; }
.precip-update-header.collapsed::after { content: "\25B8"; }
.precip-update-body.collapsed { display: none; }
.precip-update-body .form-group { margin-bottom: var(--space-xs); }
.precip-update-body .form-group > label { font-size: var(--lookup-note-font) !important; font-weight: 500 !important; }
.precip-update-body .btn-file, .precip-update-body .form-control { font-size: var(--lookup-note-font) !important; }
.precip-status, .precip-summary { font-size: var(--lookup-note-font); color: #555; line-height: 1.45; margin-bottom: var(--space-xs); }
.precip-note { font-size: var(--lookup-note-font); color: #b26a00; margin-top: 2px; }
.precip-note.ok { color: #2e7d32; font-weight: 600; }
.precip-note.error { color: #c62828; }
.precip-update-actions { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); }
.btn-precip {
  flex: 1; background: var(--brand-accent); color: #FFFFFF; border: none; border-radius: var(--radius-sm);
  padding: 6px 6px; font-size: var(--lookup-note-font); font-weight: 600;
}
.btn-precip.secondary { background: #6c757d; }
.btn-precip:hover, .btn-precip:focus { background: var(--brand-primary); color: #FFFFFF; }
.lookup-period .lookup-suffix { display: inline-block; color: #888; }
.lookup-total { text-align: right; padding-right: 15px; font-size: var(--select-font, var(--font-md)); font-weight: 700; color: var(--brand-primary); margin: 0 0 var(--space-sm); }

/* 컨트롤 영역이 넘칠 때 스크롤바가 카드 폭을 잡아먹지 않도록 얇게 */
.sidebar-controls { scrollbar-width: thin; }
.sidebar-controls::-webkit-scrollbar { width: 6px; }
.sidebar-controls::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 3px; }
.sidebar-controls::-webkit-scrollbar-track { background: transparent; }
.btn-lookup {
  margin-top: var(--space-xs) !important;
  font-size: var(--select-font, var(--font-md)) !important;
  padding: var(--space-sm) !important;
}
.lookup-result {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-left: 3px solid var(--brand-accent);
  border-radius: var(--radius-sm);
  font-size: var(--lookup-note-font);
  line-height: 1.5;
}
.lookup-result .lookup-main { font-weight: 600; color: var(--brand-primary); }
.lookup-result .lookup-sub  { color: #777; }
.lookup-result .lookup-note { color: #b26a00; margin-top: 2px; }
.lookup-result .lookup-error { color: #c62828; }
.lookup-actions {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.btn-lookup-apply {
  flex: 1;
  background: var(--brand-accent); color: #FFFFFF;
  border: none; border-radius: var(--radius-sm);
  padding: 6px 8px; font-size: var(--select-font, var(--font-md)); font-weight: 600;
}
.btn-lookup-apply:hover, .btn-lookup-apply:focus { background: var(--brand-primary); color: #FFFFFF; }
.btn-lookup-apply.applied { background: #2e7d32; }
.lookup-actions a { font-size: var(--lookup-note-font); white-space: nowrap; }
.sidebar .datepicker { z-index: 9999 !important; }

/* 로고 */
.sidebar-footer {
  padding: var(--space-md) var(--space-sm);
  border-top: 1px solid #E0E0E0;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.sidebar-footer .logo-row {
  margin-top: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-footer .logo-row img {
  max-width: 80%;
  height: auto;
  opacity: 1;
}
.sidebar-footer .logo-row:hover img { opacity: 0.85; }

/* === 원페이지 락 === */
html, body {
  height: 100vh !important;
  overflow: hidden !important;
  background-color: #FFFFFF !important;
}
.wrapper,
.skin-blue .wrapper {
  height: 100vh !important;
  overflow: hidden !important;
  background-color: #FFFFFF !important;
}

.content-wrapper {
  background-color: #FAFAFA;
  margin-left: var(--sidebar-width) !important;
  height: 100vh !important;
  overflow: hidden !important;
}
.content { height: 100% !important; padding: 0 !important; }

/* === 메인 레이아웃 === */
.main-flex {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}
.main-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 지도 + 차트 */
.map-area {
  min-height: 0;
  position: relative;
  flex: 1;
}
.map-area .leaflet-container { height: 100% !important; width: 100% !important; }

.chart-area {
  height: var(--chart-height);
  min-height: 0;
  flex: none;
  background: #FAFAFA;
  display: flex;
  flex-direction: row;
  gap: var(--space-md);
  padding: var(--chart-padding, var(--space-sm) var(--space-md) var(--space-md));
  overflow: hidden;
  /* 차트 숨김 — 기능 유지 */
  display: none;
}

.chart-card {
  flex: 1;
  min-height: 0;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chart-label {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid #EEEEEE;
  background: #FAFAFA;
  font-size: var(--font-sm) !important;
  font-weight: 600;
  color: #555;
  text-align: center;
}

.chart-canvas {
  flex: 1;
  min-height: 0;
  padding: var(--space-xs);
  background: #FFFFFF;
}
.chart-canvas .plotly,
.chart-canvas .js-plotly-plot { height: 100% !important; width: 100% !important; }

/* === 팝업 스택 === */
.popup-stack {
  position: absolute;
  top: var(--popup-top);
  right: var(--space-md);
  /* 아래쪽 범례 카드와 겹치지 않도록 범례 높이만큼 비워 두고, 넘치면 카드 본문이 스크롤 */
  bottom: var(--legend-reserve, 470px);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: var(--popup-gap);
  width: var(--popup-width);
  pointer-events: none;
}
.popup-stack > .map-popup-panel {
  position: relative;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 0 1 auto;
}
/* 급수구역 읍면동 hover 툴팁(FHD)이 카드 아래로 펼쳐질 때 다음 카드 위에 오도록 */
.popup-stack > .intake-info-panel:hover { z-index: 501 !important; }
.popup-stack > .map-popup-panel > .popup-panel-body.scrollable {
  flex: 1 1 auto;
  min-height: 0;
  max-height: var(--popup-body-max-height, 300px);
  overflow-y: auto;
}
.popup-stack > .intake-info-panel > .popup-panel-body.scrollable {
  max-height: none;
}
.popup-stack > .override-list-panel {
  flex-shrink: 0;
}

/* === 지도 위 패널 — 차콜 반투명 (물환경 대시보드 참고) === */
:root {
  --panel-bg: rgba(52, 56, 62, 0.92);
  --panel-line: #757577;
  --panel-text: #D0D1D5;
  --panel-text-strong: #F2F3F5;
  --panel-text-dim: #C6C9CF;   /* 패널 배경(#4D5156) 위 4.9:1 — 이전 #9A9CA3은 2.9:1로 미달 (UI 점검 2026-09-16) */
  --panel-title: #FFFFFF;
  --panel-band: rgba(255, 255, 255, 0.05);
  --panel-accent: #F0A04B;
}

.map-popup-panel {
  background: var(--panel-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible;
  z-index: 500 !important;
  width: var(--popup-width);
  color: var(--panel-text);
}

/* 지도 좌상단 검색창: Leaflet 컨트롤 오른쪽(x=100px)에 두어 줌·기본지도·홈·리셋과 겹치지 않음 */
.intake-search-panel {
  width: var(--intake-search-width) !important;
  padding: var(--space-sm) !important;
  box-sizing: border-box;
}
.intake-search-content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.intake-search-icon {
  flex: 0 0 auto;
  color: var(--panel-title);
  font-size: var(--select-font, var(--font-md));
  line-height: 1;
}
.intake-search-panel .form-group,
.intake-search-panel .shiny-input-container {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
}
.intake-search-panel .selectize-input,
.intake-search-panel .selectize-input .item,
.intake-search-panel .selectize-input > input,
.intake-search-panel .selectize-dropdown,
.intake-search-panel .selectize-dropdown .option {
  font-size: var(--select-font, var(--font-md)) !important;
  line-height: 1.35 !important;
}
.intake-search-panel .selectize-input,
.intake-search-panel .selectize-dropdown {
  background: #FFFFFF;
  color: #333333;
  border-color: #BDBDBD;
}
.intake-search-panel .selectize-input {
  min-height: var(--lookup-control-h, 38px);
  height: auto;
}
.intake-search-panel .selectize-dropdown {
  z-index: 9999;
}

.legend-popup-panel {
  right: var(--space-md);
  bottom: var(--space-md);
}

.legend-popup-panel.popup-position-moved {
  right: auto;
  bottom: auto;
}

.status-popup-panel {
  left: 16px;
  bottom: 16px;
  width: 260px;
}

.status-popup-panel.popup-position-moved {
  bottom: auto;
}

.map-popup-panel.popup-panel-dragging {
  z-index: 700 !important;
}

/* 헤더: 오른쪽에 크고 흐린 제목 + 아이콘 (워터마크식) */
.popup-panel-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 6px 12px;
  margin: 0;
  background: transparent;
  border-bottom: 1px solid var(--panel-line);
  font-weight: 400;
  font-size: 20px !important;
  letter-spacing: 0.04em;
  color: var(--panel-title);
  text-align: center;
  cursor: move;
  user-select: none;
}
.popup-panel-header::after {
  content: attr(data-icon);
  font-size: 18px;
  line-height: 1;
  color: var(--panel-title);
}
.popup-panel-header.collapsible {
  cursor: move;
}
.popup-panel-header.collapsible:focus-visible {
  outline: 2px solid var(--panel-accent);
  outline-offset: -2px;
}
.popup-panel-caret {
  min-width: 1em;
  color: var(--panel-text-dim);
  font-size: 0.8em;
  line-height: 1;
  text-align: center;
}
.popup-panel-body.collapsed { display: none; }

.popup-panel-body {
  padding: var(--space-sm) 12px 12px;
  font-size: 13px;
  color: var(--panel-text);
  line-height: 1.5;
}

.popup-panel-body.scrollable {
  max-height: var(--popup-body-max-height, 300px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--panel-line) transparent;
}

.override-list-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #B94700;   /* 흰 글자 5.3:1 (#ff6d00은 2.8:1) */
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.override-list-count.inactive {
  background: #71757B;
  color: #FFFFFF;
}
.override-list-affected-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--override-color);
  color: #1E1E1E;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.override-list-summary {
  margin-bottom: var(--space-xs);
  padding: 5px 7px;
  border-left: 3px solid var(--panel-accent);
  background: var(--panel-band);
  color: var(--panel-text-strong);
  font-size: 12px;
}
.override-list-rows { display: grid; gap: 2px; }
.override-list-rows.inactive { opacity: 0.62; }
.override-list-row {
  display: grid;
  /* 2줄 행: 1줄 이름(+영향권 칩), 2줄 저수율 → 공급가능일수 · 등급. 한 줄에 다 넣으면 FHD(280px)에서 이름이 3~4자에서 잘림 */
  grid-template-columns: minmax(0, 1fr) 36px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px var(--space-xs);
  min-height: 32px;
  padding: 4px 4px 4px 8px;
  border-left: 3px solid transparent;
  background: var(--panel-band);
  color: var(--panel-text);
  cursor: pointer;
}
.override-list-row:hover,
.override-list-row:focus-visible {
  background: rgba(255, 255, 255, 0.11);
  color: var(--panel-text-strong);
  outline: none;
}
.override-list-row.active {
  border-left-color: var(--panel-accent);
  background: rgba(240, 160, 75, 0.16);
  color: var(--panel-text-strong);
}
.override-list-row.affected,
.override-list-row.affected:focus-visible {
  border-left-color: var(--override-color);
}
.override-list-name {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.override-list-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.override-affected-chip {
  display: inline-block;
  flex: 0 0 auto;
  padding: 0 5px;
  border-radius: 7px;
  background: var(--override-color);
  color: #1E1E1E;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  vertical-align: 1px;
}
.override-list-result {
  grid-column: 1;
  grid-row: 2;
  color: var(--panel-text-strong);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}
.override-list-name { grid-column: 1; grid-row: 1; }
.override-list-remove { grid-column: 2; grid-row: 1 / span 2; }
/* FHD: 헤더 배지 "영향권 N"은 제목을 두 줄로 밀어내므로 숨기고 목록 요약줄에서 보여준다 */
@media (max-width: 1920px) {
  .override-list-affected-badge { display: none; }
}
.popup-panel-title { white-space: nowrap; }
.override-list-remove {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--panel-text-dim);
  font-size: 18px;
  line-height: 22px;
}
.override-list-remove:hover,
.override-list-remove:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  outline: 1px solid var(--panel-line);
}
.override-list-empty {
  padding: var(--space-sm);
  color: var(--panel-text-dim);
  text-align: center;
}

.status-item-list {
  display: grid;
  gap: 6px;
}
.status-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin: 0;
  color: var(--panel-text-strong);
  font-weight: 400;
  cursor: pointer;
}
.status-item-row.inactive { color: var(--panel-text-dim); }
.status-item-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--panel-accent);
}
.status-item-label {
  min-width: 0;
  flex: 1 1 auto;
}
.status-release-link {
  flex: 0 0 auto;
  color: #FFD0AD;
  text-decoration: underline;
}
.btn-status-reset {
  width: 100%;
  margin-top: 10px;
  padding: 5px 8px;
  border: 1px solid var(--panel-line);
  border-radius: 3px;
  background: transparent;
  color: var(--panel-text-strong);
  font-size: inherit;
}
.btn-status-reset:hover,
.btn-status-reset:focus-visible {
  border-color: var(--panel-accent);
  background: rgba(240, 160, 75, 0.14);
  color: #FFFFFF;
}

/* 취수장 핵심 지표 사슬 */
.intake-key-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr);
  align-items: stretch;
  gap: 2px;
  margin-bottom: 5px;
}
.intake-metric-tile {
  display: flex;
  min-width: 0;
  min-height: 66px;
  padding: 6px 4px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 5px;
  background: rgba(255,255,255,0.09);
  color: var(--panel-text-strong);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.intake-metric-label {
  color: var(--panel-text-dim);
  font-size: 11px;
  line-height: 1.15;
}
.intake-metric-value {
  margin-top: 2px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.intake-metric-sub {
  margin-top: 1px;
  color: var(--panel-text-dim);
  font-size: 10px;
  line-height: 1;
}
.intake-metric-tile.is-dark { color: #FFFFFF; }
.intake-metric-tile.is-dark .intake-metric-label,
.intake-metric-tile.is-dark .intake-metric-sub { color: rgba(255,255,255,0.78); }
.intake-metric-tile.is-unsupplied {
  background-color: #71757B;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.13) 0,
    rgba(255,255,255,0.13) 5px,
    rgba(0,0,0,0.08) 5px,
    rgba(0,0,0,0.08) 10px
  );
}
.intake-metric-arrow {
  align-self: center;
  color: var(--panel-text-dim);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.intake-empty-state {
  padding: 12px 8px;
  color: var(--panel-text-dim);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

/* 정보 테이블 */
.info-table {
  position: relative;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 3px;
  font-size: 13px;
}
.info-table tr { background: var(--panel-band); }
.info-table td {
  padding: 4px 8px;
  border-bottom: none;
  vertical-align: middle;
}
.info-table td:first-child {
  color: var(--panel-text-dim);
  width: 64px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  padding-right: var(--space-sm);
}
.info-table td:last-child { color: var(--panel-text-dim); font-weight: 500; }

/* 공급가능일수 강조 배지 */
.days-badge {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 3px;
  background: var(--panel-accent);
  color: #1E1E1E;
  font-weight: 600;
  font-size: 13px;
}

.intake-info-actions { text-align: center; padding-top: var(--space-sm) !important; }
.btn-reservoir-modal {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--panel-accent);
  border-radius: 3px;
  background: transparent;
  color: var(--panel-text-strong);
  font-size: 12px;
}
.btn-reservoir-modal:hover,
.btn-reservoir-modal:focus-visible {
  background: var(--panel-accent);
  color: #1E1E1E;
}

.intake-override-block {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--panel-line);
}
.intake-override-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.override-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--override-color, #ff6d00);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
}
.override-badge.inactive {
  background: #71757B;
  color: #FFFFFF;
}
.intake-override-status a { color: #ffd0ad; font-size: 12px; }
.intake-override-block .form-group { margin-bottom: 4px; }
.intake-override-block label {
  color: var(--panel-text-dim) !important;
  font-size: 12px !important;
  margin: 0 !important;
}
.intake-override-block .irs-bar,
.intake-override-block .irs-bar-edge {
  background: var(--override-color, #ff6d00) !important;
  border-color: var(--override-color, #ff6d00) !important;
}
.intake-override-block .irs-handle { border-color: var(--override-color, #ff6d00) !important; }
.btn-override-panel {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--override-color, #ff6d00);
  border-radius: 3px;
  background: transparent;
  color: var(--panel-text-strong);
  font-size: 12px;
}
.btn-override-panel:hover,
.btn-override-panel:focus-visible {
  background: var(--override-color, #ff6d00);
  color: #FFFFFF;
}
.modal-footer .btn-override-latest {
  margin-right: auto;
  border: 1px solid var(--action-primary);
  background: var(--action-primary);
  color: #FFFFFF;
  border-radius: var(--radius-sm);
}
.modal-footer .btn-override-latest:hover, .modal-footer .btn-override-latest:focus-visible { background: var(--brand-primary); border-color: var(--brand-primary); color: #FFFFFF; }
.modal-footer .btn-default:not(.btn-override-latest) {
  border: 1px solid var(--action-primary);
  background: transparent;
  color: var(--action-primary);
  border-radius: var(--radius-sm);
}
.modal-footer .btn-default:not(.btn-override-latest):hover, .modal-footer .btn-default:not(.btn-override-latest):focus-visible { background: var(--action-primary); color: #FFFFFF; }
.override-river-note {
  margin-right: auto;
  color: #777;
  font-size: 13px;
  text-align: left;
}

.popup-panel-empty {
  color: var(--panel-text-dim);
  text-align: center;
  padding: var(--space-md) var(--space-sm);
  font-size: 12px;
}

/* 범례 항목 */
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  margin-bottom: 3px;
  background: var(--panel-band);
  font-size: 12px;
  color: var(--panel-text);
}
.legend-swatch {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}
.legend-swatch.hatched {
  background: repeating-linear-gradient(45deg, #ddd, #ddd 2px, rgba(120,120,120,0.6) 2px, rgba(120,120,120,0.6) 3.5px);
}
.legend-label { flex: 1; }
.legend-count {
  padding: 0 7px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--panel-text);
  font-size: 11px;
  line-height: 17px;
}
.legend-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 3px;
  color: var(--panel-text);
  font-size: 12px;
}
.legend-table .legend-item { display: table-row; }
.legend-table .legend-item > td {
  padding: 3px 8px;
  background: var(--panel-band);
  vertical-align: middle;
}
.legend-table .legend-item > td:first-child { width: 34px; }
.legend-table .legend-label { width: auto; }
.legend-table .legend-count {
  width: 32px;
  text-align: center;
}
.legend-group {
  padding-left: 10px !important;
  border-left: 1px solid var(--panel-line);
  color: var(--panel-text-strong);
  font-weight: 700;
  vertical-align: middle !important;
  white-space: nowrap;
}

/* 범례 토글 */
.legend-toggle {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-xs);
  margin-left: auto;
}

/* 취약등급 — 범례 요약 줄 + 상세 패널 배지 */
.legend-grade-delta {
  margin: 4px 8px 2px;
  font-size: 11px;
  color: var(--panel-text-strong);
}
.legend-grade-delta .legend-grade-base { color: var(--panel-text-dim); font-size: 10px; margin-top: 2px; }
.grade-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  color: #1E1E1E;
}
.grade-delta { font-size: 11px; color: var(--panel-text-dim); margin-left: 4px; }
.legend-toggle .toggle-btn { cursor: pointer; margin: 0; }
.legend-toggle .toggle-btn input { display: none; }
.legend-toggle .toggle-btn span {
  display: inline-block;
  white-space: nowrap;
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 11px !important;
  font-weight: 500;
  color: #B0B2B8;
  background: transparent;
  border: 1px solid #8B8D93;
  transition: all 0.15s;
}
.legend-toggle .toggle-btn:hover span { color: var(--panel-text-strong); border-color: var(--panel-text); }
.legend-toggle .toggle-btn input:checked + span {
  background: var(--panel-accent);
  color: #1E1E1E;
  border-color: var(--panel-accent);
}

/* 범례 섹션 */
.legend-section-title {
  flex-wrap: wrap;
  row-gap: 4px;
  font-size: 13px !important;
  font-weight: 500;
  color: var(--panel-text);
  margin-bottom: var(--space-xs);
}
.legend-divider {
  border-top: 1px solid var(--panel-line);
  margin: var(--space-sm) 0;
}

/* 급수구역 링크 — 칩 */
.emd-chip-wrap { display: flex; flex-wrap: wrap; gap: 4px; }
.emd-link {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--panel-text-strong) !important;
  font-size: 12px;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.15s;
}
.emd-link:hover {
  background: var(--panel-accent);
  border-color: var(--panel-accent);
  color: #1E1E1E !important;
  text-decoration: none !important;
}

/* 취수장 아이콘 */
.intake-dim { opacity: 0.2 !important; }

/* Leaflet addControl 래퍼 */
.leaflet-bottom.leaflet-right .leaflet-control {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-right: var(--space-md) !important;
  margin-bottom: var(--space-md) !important;
}

/* === 저수율 모달 === */
.rsv-modal-title { font-size: 24px; font-weight: 600; color: var(--action-primary); text-align: center; }
.rsv-modal-sub   { font-size: 13px; color: #888; font-weight: 400; }

.rsv-badge-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 0 12px;
  flex-wrap: wrap;
}
.rsv-badge {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  padding: 8px 18px;
  border-radius: 6px;
  min-width: 110px;
}
.rsv-badge.today { background: #E8EEF5; border: 1px solid #B7C6D9; }
.rsv-badge.avg   { background: #f5f5f5; border: 1px solid #bdbdbd; }
.rsv-badge.diff.up   { background: #e8f5e9; border: 1px solid #a5d6a7; }
.rsv-badge.diff.down { background: #fce4ec; border: 1px solid #f48fb1; }

.rsv-badge .badge-label { font-size: 16px; color: #666; margin-bottom: 4px; }
.rsv-badge .badge-value { font-size: 16px; font-weight: 700; color: var(--action-primary); }
.rsv-badge.avg   .badge-value { color: #555; font-size: 16px; }
.rsv-badge.diff  .badge-value { font-size: 16px; }
.rsv-badge.diff.up   .badge-value { color: #2e7d32; }
.rsv-badge.diff.down .badge-value { color: #c62828; }

.rsv-modal-footer {
  font-size: 16px;
  color: #999;
  margin-top: 6px;
  border-top: 1px solid #eee;
  padding-top: 6px;
}

.rsv-legend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.rsv-legend-label {
  font-size: 16px;
  color: #999;
  white-space: nowrap;
  margin-right: 2px;
}

.rsv-legend-item {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 16px;
  color: #fff;
  font-weight: 500;
  opacity: 0.85;
}

/* === 취수장 마커 펄스 애니메이션 === */
@keyframes intake-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.2; }
}

.intake-pulse {
  animation: intake-pulse 0.8s ease-in-out infinite !important;
}

/* === 모달 화면 중앙 고정 + 스타일 === */
.modal-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

.modal-content {
  border: none !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.16) !important;
}

.modal-header {
  /* 앱 주색(navy)으로 통일 — 본문은 그래프 가독성을 위해 밝게 유지 */
  background: var(--action-primary) !important;
  border-bottom: none !important;
  padding: 20px 24px 16px !important;
}

.modal-header .modal-title,
.modal-header .rsv-modal-title {
  color: #fff !important;
}

.modal-header .rsv-modal-sub {
  color: rgba(255, 255, 255, 0.75) !important;
}

.modal-header .close,
.modal-header button.close {
  color: #fff !important;
  opacity: 0.8;
  text-shadow: none !important;
}

.modal-header .close:hover {
  opacity: 1;
}

.modal-footer {
  border-top: 1px solid #f0f0f0 !important;
  border-radius: 0 0 16px 16px !important;
}

/* === 4K (3840x2160, 3000px 이상) — 사이드바·범례·글자만 키움 (FHD·QHD 영향 없음) === */
@media (min-width: 3000px) {
  :root {
    --sidebar-width: 540px;
    --legend-reserve: 820px;
    --field-label-col: 104px;
    --logo-max-h: 240px;
    --font-sm: 24px;
    --font-md: 24px;
    --font-lg: 32px;
    --font-xl: 36px;
    --header-title: 36px;
    --header-sub: 26px;
    --section-header-font: 24px;
    --label-font: 24px;
    --select-font: 24px;
    --btn-font: 24px;
    --lookup-note-font: 19px;
    --lookup-control-h: 52px;
    --popup-width: 620px;
    --intake-search-width: 400px;
    --popup-body-max-height: 560px;
    /* 글자가 커진 만큼 세로 여백은 줄여 2160px 높이에 맞춤 (넘치면 분석 버튼이 잘림) */
    --section-margin: var(--space-md);
    --btn-margin-top: var(--space-md);
    --control-padding: var(--space-md) var(--space-md) var(--space-sm);
  }
  /* shinydashboard가 주입하는 인라인 폭(320px)보다 우선 */
  .main-sidebar, .left-side { width: var(--sidebar-width) !important; }

  .basin-label-icon span { font-size: 20px; }
  .preset-label-icon span { font-size: 30px; }
  .basin-badge { font-size: 17px; }
  .preset-badge { font-size: 36px; }
  .basin-badge b { font-size: 18px; }
  /* 조견표 블록 */
  .lookup-row .form-group,
  .lookup-row .shiny-input-container { grid-template-columns: 100px minmax(0, 1fr); }
  .btn-lookup-apply { padding: 8px 10px; }
  .override-count-badge { min-width: 28px; height: 28px; border-radius: 14px; font-size: 16px; }
  .btn-preset-load, .btn-override-add, .btn-override-clear { font-size: 20px; }

  /* 지도 팝업 패널 (취수장 정보·급수구역 상세·범례) */
  .popup-panel-header { font-size: 32px !important; }
  .popup-panel-header::after { font-size: 28px; }
  .popup-panel-body { font-size: 22px; }
  .status-popup-panel { width: 420px; }
  .status-item-row { min-height: 42px; }
  .status-item-row input[type="checkbox"] { width: 24px; height: 24px; }
  .popup-panel-empty { font-size: 20px; }
  .override-list-count { min-width: 32px; height: 32px; border-radius: 16px; font-size: 18px; }
  .override-list-summary { font-size: 18px; }
  .override-list-row { min-height: 50px; grid-template-columns: minmax(0, 1fr) 36px; font-size: 20px; }
  .override-list-remove { width: 36px; height: 36px; font-size: 26px; line-height: 34px; }
  .info-table { font-size: 22px; }
  .info-table td { padding: 8px 12px; }
  .info-table td:first-child { font-size: 20px; width: 116px; }
  .days-badge { font-size: 20px; }
  .grade-badge { font-size: 19px; }
  .grade-delta { font-size: 14px; }
  .emd-link { font-size: 16px; }
  .override-badge, .intake-override-status a,
  .intake-override-block label, .btn-override-panel { font-size: 16px !important; }

  /* 범례 */
  .legend-section-title { font-size: 22px !important; }
  .legend-item { font-size: 22px; padding: 6px 12px; gap: 12px; }
  .legend-swatch { width: 32px; height: 20px; }
  .legend-count { font-size: 14px; line-height: 22px; padding: 0 9px; }
  .legend-table { font-size: 22px; }
  .legend-table .legend-item > td { padding: 4px 10px; }
  .legend-group { font-size: 20px; }
  .legend-toggle .toggle-btn span { font-size: 20px !important; padding: 3px 12px; }
  .legend-grade-delta { font-size: 18px; }
  .legend-grade-delta .legend-grade-base { font-size: 16px; }
}

/* ===== UI 점검(ui-ux-pro-max, 2026-09-16) 시연 전 보정: 대비·조작 크기·포커스·전환 ===== */
.legend-count { color: var(--panel-text-strong); font-size: 12px; }              /* 3.6:1 → 5.0:1 */
.legend-toggle .toggle-btn {                                                     /* 21px → 28px (WCAG 2.2 24px) */
  display: inline-flex; align-items: center; min-height: 28px; padding: 4px 8px;
}
.legend-toggle .toggle-btn:has(input:focus-visible) { outline: 2px solid var(--panel-accent); outline-offset: 1px; }
.irs--shiny .irs-min, .irs--shiny .irs-max { color: #5A5A5A; font-size: 11px; } /* 1.8:1 → 5.3:1 */
.irs--shiny .irs-single, .irs--shiny .irs-from, .irs--shiny .irs-to {            /* 3.5:1 → 11.6:1 */
  background: var(--action-primary); color: #FFFFFF; font-size: 11px;
}
.irs--shiny .irs-grid-text { font-size: 10px; }
.override-list-rows { gap: 6px; }                                                /* 행 안 × 버튼 오터치 완화 */
.override-list-row:focus-visible { border-left-color: var(--panel-accent); outline: 2px solid var(--panel-accent); outline-offset: -2px; }
.btn, .toggle-btn, .override-list-row, .override-list-remove,
.sidebar-section-header.collapsible, .popup-panel-header.collapsible {
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ===== 해상도 대응 (2026-09-16, ui-ux-pro-max 밀도 8 기준) ===== */
/* shinydashboard가 주입하는 인라인 폭(320px)보다 토큰 우선 — QHD 360 / UHD 460 */
.main-sidebar, .left-side { width: var(--sidebar-width) !important; }

/* 시나리오 드롭다운: 라벨 왼쪽 + 드롭다운 오른쪽 한 줄 (조견표 카드와 같은 패턴, FHD 세로 넘침 해소) */
.sidebar-section:not(.override-section) .sidebar-section-body > .form-group:has(.selectize-control) {
  display: grid;
  grid-template-columns: var(--field-label-col, 84px) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.sidebar-section:not(.override-section) .sidebar-section-body > .form-group:has(.selectize-control) > label {
  margin: 0 !important;
  line-height: 1.2;
  white-space: nowrap;
}
/* 선택값이 길어도 한 줄 유지 (넘치면 말줄임) */
.sidebar-section:not(.override-section) .sidebar-section-body > .form-group:has(.selectize-control) .selectize-input {
  white-space: nowrap; overflow: hidden;
}
.sidebar-section:not(.override-section) .sidebar-section-body > .form-group:has(.selectize-control) .selectize-input .item {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 20px); display: inline-block; vertical-align: middle;
}

/* 지도 표시 체크박스 3개를 가로로 */
.map-toggles { display: flex; flex-wrap: wrap; gap: 0 var(--space-md); }
.map-toggles .form-group { margin: 0 !important; width: auto !important; }

/* 분석 버튼: 사이드바를 스크롤해도 항상 보이게 스크롤 영역 하단에 고정 */
.btn-analyze { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -6px 12px -6px rgba(0,0,0,0.25); }

/* 기관 로고: 해상도별 높이 상한 */
.sidebar-footer { padding: var(--space-sm) var(--space-sm); }
.sidebar-footer .logo-row { margin-top: 0; }
.sidebar-footer .logo-row img { max-height: var(--logo-max-h, 150px); width: auto; max-width: 90%; }

/* QHD(1921~2999px) 팝업·범례 — 기본 규칙보다 뒤에 있어야 적용됨 */
@media (min-width: 1921px) and (max-width: 2999px) {
  /* QHD: FHD 대비 약 1.12배 — 팝업·범례 글자를 모듈러 스케일(14/18/22)로 */
  .popup-panel-header { font-size: 24px !important; }
  .popup-panel-body { font-size: 16px; }
  .status-popup-panel { width: 320px; }
  .status-item-row { min-height: 34px; }
  .status-item-row input[type="checkbox"] { width: 19px; height: 19px; }
  .popup-panel-empty { font-size: 15px; }
  .info-table { font-size: 16px; }
  .info-table td { padding: 4px 10px; }
  .info-table td:first-child { font-size: 15px; width: 84px; }
  .intake-metric-label { font-size: 15px; }
  .intake-metric-value { font-size: 24px; }
  .intake-metric-sub { font-size: 14px; }
  .intake-metric-arrow { font-size: 22px; }
  .days-badge, .grade-badge { font-size: 15px; }
  .override-list-row { min-height: 38px; font-size: 16px; }
  .override-list-summary { font-size: 15px; }
  .override-list-count { min-width: 26px; height: 26px; border-radius: 13px; font-size: 14px; }
  .legend-section-title { font-size: 16px !important; }
  .legend-item { font-size: 16px; padding: 4px 10px; }
  .legend-swatch { width: 22px; height: 15px; }
  .legend-table { font-size: 16px; }
  .legend-group { font-size: 15px; }
  .legend-count { font-size: 14px; }
  .legend-toggle .toggle-btn span { font-size: 14px !important; }
  .legend-grade-delta { font-size: 14px; }
  .irs--shiny .irs-min, .irs--shiny .irs-max, .irs--shiny .irs-single { font-size: 12px; }
  .btn-preset-load, .btn-override-add, .btn-override-clear { font-size: 15px; }
  .preset-badge { font-size: 30px; }
  .leaflet-tooltip.intake-selected-label { font-size: 17px !important; }
}
/* UHD 범례 개수 배지 — 위 점검 블록(12px)이 UHD 블록보다 뒤에 있어 여기서 다시 지정 */
@media (min-width: 3000px) {
  .intake-metric-label { font-size: 19px; }
  .intake-metric-value { font-size: 28px; }
  .intake-metric-sub { font-size: 18px; }
  .intake-metric-arrow { font-size: 26px; }
  .legend-count { font-size: 18px; }
  .irs--shiny .irs-min, .irs--shiny .irs-max, .irs--shiny .irs-single { font-size: 14px; }
  .modal-lg { width: 1400px; }
  .rsv-modal-title { font-size: 32px; }
  .rsv-modal-sub { font-size: 16px; }
  .rsv-badge .badge-label, .rsv-badge .badge-value, .rsv-badge.avg .badge-value, .rsv-badge.diff .badge-value { font-size: 20px; }
  .rsv-modal-footer { font-size: 18px; }
  .modal-footer .btn { font-size: 18px; padding: 8px 18px; }
  .leaflet-tooltip.intake-selected-label { font-size: 20px !important; }
}

/* ===== bundle13 모바일 보기 전용 화면 (2026-09-28) ===== */
@media (max-width: 768px) {
  html,
  body,
  .wrapper,
  .skin-blue .wrapper {
    width: 100%;
    max-width: 100%;
    height: 100vh !important;
    height: 100dvh !important;
    overflow-x: hidden !important;
  }

  .content-wrapper,
  .right-side,
  .main-footer,
  body.sidebar-open .content-wrapper,
  body.sidebar-open .right-side,
  body.sidebar-open .main-footer,
  body.sidebar-collapse .content-wrapper,
  body.sidebar-collapse .right-side,
  body.sidebar-collapse .main-footer {
    width: 100vw !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  .content-wrapper,
  .content,
  .main-flex,
  .main-left,
  .map-area {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
  }

  .main-sidebar,
  .left-side,
  body.sidebar-open .main-sidebar,
  body.sidebar-open .left-side,
  body.sidebar-collapse .main-sidebar,
  body.sidebar-collapse .left-side {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1300 !important;
    width: min(86vw, 340px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    transform: translateX(-100%) !important;
    transition: transform 180ms ease !important;
  }

  body.mobile-drawer-open .main-sidebar,
  body.mobile-drawer-open .left-side {
    transform: translateX(0) !important;
  }

  .main-sidebar > .sidebar,
  .left-side > .sidebar {
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  .sidebar-controls {
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #mobile_menu_btn {
    display: flex !important;
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1100;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(28, 32, 40, 0.94);
    color: #FFFFFF;
    font-size: 26px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  }

  #mobile_menu_btn:focus-visible,
  .mobile-sheet-close:focus-visible {
    outline: 3px solid #FFD600;
    outline-offset: 2px;
  }

  #mobile_backdrop {
    display: none !important;
    position: fixed;
    inset: 0;
    z-index: 1200;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    border: 0;
    background: rgba(13, 18, 24, 0.48);
  }

  body.mobile-drawer-open #mobile_backdrop {
    display: block !important;
  }

  .leaflet-top.leaflet-left {
    top: 60px;
  }

  .leaflet-control-layers label {
    white-space: nowrap;
  }

  .leaflet-control-zoom a {
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
    line-height: 40px !important;
  }

  #intake_search_panel {
    top: 8px !important;
    left: 60px !important;
    right: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 3px 8px !important;
  }

  #intake_search_panel .selectize-input {
    height: 44px !important;
    min-height: 44px !important;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #intake_search_panel .selectize-input,
  #intake_search_panel .selectize-input .item,
  #intake_search_panel .selectize-input > input,
  #intake_search_panel .selectize-dropdown,
  #intake_search_panel .selectize-dropdown .option {
    font-size: 16px !important;
  }

  .preset-badge,
  .basin-badge {
    top: 64px;
    left: 12px;
    right: auto;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    padding: 6px 10px;
    transform: none;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .preset-badge {
    border-left-width: 4px;
    border-radius: 6px;
    font-size: 15px;
  }

  .basin-badge,
  .basin-badge b,
  .basin-badge small {
    font-size: 12px;
  }

  .basin-badge[style*="display: block"] ~ .preset-badge {
    top: 112px;
  }

  .leaflet-tooltip.intake-selected-label {
    max-width: calc(100vw - 24px);
    font-size: 13px !important;
    white-space: normal;
  }

  body:not(.has-intake-selection) .popup-stack {
    display: none !important;
  }

  body.has-intake-selection .popup-stack {
    display: flex !important;
  }

  .popup-stack {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1050;
    width: 100% !important;
    max-height: 58vh;
    max-height: 58dvh;
    gap: 0;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    background: var(--panel-bg);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.32);
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
  }

  .popup-stack > .map-popup-panel {
    width: 100% !important;
    flex: 0 0 auto;
  }

  .popup-stack > .intake-info-panel {
    border-radius: 16px 16px 0 0 !important;
  }

  .popup-stack > .intake-info-panel > .popup-panel-header {
    padding-right: 56px;
  }

  .popup-stack > .intake-info-panel > .popup-panel-body.scrollable {
    max-height: none;
    overflow: visible;
  }

  .mobile-sheet-close {
    display: flex !important;
    position: sticky;
    top: 8px;
    z-index: 3;
    float: right;
    width: 44px;
    height: 44px;
    margin: 8px 8px -52px auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 22px;
    background: rgba(28, 32, 40, 0.9);
    color: #FFFFFF;
    font-size: 28px;
    line-height: 1;
  }

  .supply-detail-panel {
    display: none !important;
  }

  .intake-metric-value {
    font-size: 20px;
  }

  .legend-popup-panel {
    position: fixed !important;
    top: 64px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    width: min(280px, 80vw) !important;
    max-height: 60vh;
    max-height: 60dvh;
    overflow-y: auto;
  }

  .legend-popup-panel .popup-panel-body {
    max-height: calc(60dvh - 48px);
    overflow-y: auto;
  }

  body.has-intake-selection .leaflet-control-attribution,
  .status-popup-panel {
    display: none !important;
  }

  .modal-dialog {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px);
    margin: 8px auto !important;
    transform: none !important;
  }

  .modal-content {
    display: flex;
    max-height: calc(100dvh - 16px);
    flex-direction: column;
  }

  .modal-body {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #reservoir_chart_plot,
  #lookup_chart_plot {
    height: 50vh !important;
    height: 50dvh !important;
    min-height: 280px;
  }

  .rsv-badge-row {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .rsv-badge {
    min-width: 0;
    padding: 6px 4px;
  }

  .rsv-badge .badge-label,
  .rsv-badge .badge-value,
  .rsv-badge.avg .badge-value,
  .rsv-badge.diff .badge-value {
    font-size: 12px;
    text-align: center;
  }
}

/* ===== bundle13 태블릿 검색창 겹침 방지 (2026-09-28) ===== */
@media (min-width: 769px) and (max-width: 1279px) {
  #intake_search_panel {
    top: 260px !important;
    left: 10px !important;
  }
}

/* ===== bundle13 코디네이터 보정 (2026-09-28, 390·430·820 실측) ===== */
@media (max-width: 768px) {
  /* 선택 라벨이 폭 부족으로 글자 단위로 세로로 접히던 문제 → 한 줄 우선, 62vw 넘을 때만 줄바꿈 */
  .leaflet-tooltip.intake-selected-label {
    width: max-content;
    max-width: 62vw;
    white-space: normal;
  }
  /* 접힌 범례는 칩 크기로 (상단 전체를 가로막지 않게) */
  .legend-popup-panel:has(#legend_popup_body.collapsed) {
    width: auto !important;
    min-width: 132px;
  }
  /* 하단 시트가 열린 상태에서 범례를 펼치면 시트 위까지만 (시트 최대 58dvh + 상단 여백) */
  body.has-intake-selection .legend-popup-panel {
    max-height: calc(100dvh - 58dvh - 72px);
  }
  body.has-intake-selection .legend-popup-panel .popup-panel-body {
    max-height: calc(100dvh - 58dvh - 120px);
  }
  /* 시트 닫기 버튼 대비 */
  .mobile-sheet-close {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.55);
  }
}
@media (min-width: 769px) and (max-width: 1279px) {
  /* 검색창 폭 = 지도 폭 - 우측 카드 폭 - 여백 (820px에서 약 180px) → 우측 스택과 겹치지 않음 */
  #intake_search_panel {
    width: min(240px, calc(100vw - var(--sidebar-width, 320px) - var(--popup-width, 280px) - 40px)) !important;
  }
}

/* ===== 지표 타일 글자 대비 (2026-09-28) — 밝은 배경(6단계 30~365일, 등급 Ⅱ~Ⅳ)에 흰 글자라 읽히지 않던 문제 =====
   is-dark(짙은 배경)만 흰 글자, 나머지 색 타일은 짙은 글자 */
.intake-metric-tile.metric-days:not(.is-dark):not(.is-unsupplied),
.intake-metric-tile.metric-grade:not(.is-dark):not(.is-missing) {
  color: #1E1E1E;
  border-color: rgba(0, 0, 0, 0.14);
}
.intake-metric-tile.metric-days:not(.is-dark):not(.is-unsupplied) .intake-metric-label,
.intake-metric-tile.metric-days:not(.is-dark):not(.is-unsupplied) .intake-metric-sub,
.intake-metric-tile.metric-grade:not(.is-dark):not(.is-missing) .intake-metric-label,
.intake-metric-tile.metric-grade:not(.is-dark):not(.is-missing) .intake-metric-sub {
  color: rgba(30, 30, 30, 0.72);
}