* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: "Apple SD Gothic Neo", Pretendard, sans-serif; }
body { display: flex; flex-direction: column; }

.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 14px; background: #1d2733; color: #fff; z-index: 1100;
}
.topbar h1 { font-size: 17px; font-weight: 700; }
.badge { font-size: 12px; font-weight: 500; color: #ffd166; margin-left: 6px; }
.controls { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.ctl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; padding: 10px 12px; min-height: 44px;
  background: rgba(255,255,255,.08); border-radius: 8px; cursor: pointer;
}
.ctl input { width: 18px; height: 18px; }

#map { flex: 1; min-height: 0; }

.timebar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 14px; background: #f7f9fb; border-bottom: 1px solid #e3e7ec; z-index: 1090;
}
.timebar-label { font-size: 13px; font-weight: 700; color: #444; }
.metric-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%;
  padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px dashed #dde2e8; }
.metric-chip {
  min-height: 40px; padding: 0 14px; border: 1px solid #c7ccd3; background: #fff;
  border-radius: 20px; font-size: 14px; font-weight: 600; color: #555; cursor: pointer;
}
.metric-chip.on { background: #e65100; color: #fff; border-color: #e65100; }
.metric-hint { font-size: 12px; color: #999; }

.wd-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wd-chip {
  min-width: 44px; min-height: 40px; padding: 0 10px;
  border: 1px solid #d6dbe1; background: #fff; border-radius: 8px;
  font-size: 15px; cursor: pointer;
}
.wd-chip.on { background: #1d6ef5; color: #fff; border-color: #1d6ef5; font-weight: 700; }
.wd-chip.sat { color: #1d6ef5; } .wd-chip.sun { color: #e0245e; }
.wd-chip.on.sat, .wd-chip.on.sun { color: #fff; }
.hour-row { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; }
.hour-row input[type="range"] { flex: 1; min-height: 40px; accent-color: #1d6ef5; }
.hour-label { font-size: 15px; font-weight: 700; color: #1d6ef5; min-width: 64px; }
.timebar-note { font-size: 12px; color: #888; width: 100%; }

.popup { word-break: keep-all; overflow-wrap: anywhere; line-height: 1.6; }
.popup h3 { font-size: 18px; margin-bottom: 6px; line-height: 1.35; }
.popup p { font-size: 14.5px; margin: 5px 0; color: #333; }
.pop-rank { color: #e65100; }
.pop-metrics { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 14px; }
.pop-metrics th { font-weight: 600; color: #888; text-align: right; padding: 4px 8px; font-size: 12.5px; }
.pop-metrics th:first-child { text-align: left; }
.pop-metrics td { padding: 6px 8px; text-align: right; border-top: 1px solid #eee; }
.pop-metrics td:first-child { text-align: left; color: #555; }
.pop-metrics tr.hl td { background: #fff3e0; font-weight: 700; color: #e65100; }
.pop-mini { font-size: 12.5px; color: #999; margin-top: 3px; }
.pop-sub { font-weight: 700; color: #555; margin-top: 12px !important; font-size: 13.5px; }
.popup .pop-link { font-size: 14.5px; padding: 8px 0; }
.pop-sub { font-weight: 700; margin-top: 8px !important; color: #555; }
.pop-link { color: #1d6ef5; font-weight: 700; text-decoration: none; display: inline-block; padding: 6px 0; }

.ctl-btn { border: none; background: rgba(255,255,255,.16); color: #fff; font-weight: 700; }
.ctl-btn:hover { background: rgba(255,255,255,.28); }

.rank-panel {
  position: absolute; left: 12px; top: 132px; bottom: 48px; width: 320px;
  max-width: calc(100vw - 24px); background: #fff; border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); z-index: 1150;
  display: none; flex-direction: column; overflow: hidden;
}
.rank-panel.open { display: flex; }
.rank-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px; border-bottom: 1px solid #eee; }
.rank-head h2 { font-size: 15px; }
.rank-sub { font-size: 12px; color: #0e7490; font-weight: 600; padding: 0 14px 6px; }
.stn-rank { top: 132px; }
.rank-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; }
.rank-row {
  display: grid; grid-template-columns: 30px 1fr 70px auto; align-items: center;
  gap: 8px; padding: 8px 12px; min-height: 44px; cursor: pointer; font-size: 14px;
  border-bottom: 1px solid #f3f5f7;
}
.rank-row:hover { background: #f6f8fa; }
.rank-row.on { background: #fff3e0; }
.rank-no { font-weight: 700; color: #888; text-align: center; }
.rank-name { color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name b { color: #222; }
.rank-bar { height: 8px; background: #eef1f4; border-radius: 4px; overflow: hidden; }
.rank-bar span { display: block; height: 100%; background: #fd8d3c; }
.rank-bar.stn span { background: #0e7490; }
.rank-val { font-size: 12px; font-weight: 700; color: #e65100; text-align: right; }

.legend-steps { display: inline-flex; align-items: center; }
.legend-steps .step { width: 22px; height: 12px; display: inline-block; }
.legend-steps .step:first-child { border-radius: 6px 0 0 6px; }
.legend-steps .step-cap { font-size: 12px; color: #666; margin-left: 6px; }
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; margin-right: 3px; }
.dot.stop { background: #9aa4b2; border: 1px solid #fff; } .dot.stn { background: #facc15; border: 1px solid #fff;
  box-shadow: 0 0 0 1px #e0b400; }
.stn-marker { filter: drop-shadow(0 1px 2px rgba(8, 51, 68, .5)); }

/* 카카오 CustomOverlay 마커 */
.kk-stop { background: #9aa4b2; border: 1px solid rgba(255, 255, 255, .9); border-radius: 50%;
  cursor: pointer; opacity: .82; transform: translate(-50%, -50%); }
.kk-stop:hover { background: #7c8696; }
.kk-stn { background: #facc15; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 50%;
  cursor: pointer; transform: translate(-50%, -50%); opacity: .6; }
.kk-stn:hover { opacity: .95; border-color: #fff; }

/* 카카오 팝업(CustomOverlay) */
.kk-popup { position: relative; transform: translateY(-12px);
  background: #fff; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.28);
  padding: 16px 18px; width: 340px; max-width: 86vw;
  max-height: 70vh; overflow-y: auto;
  font-family: "Apple SD Gothic Neo", Pretendard, sans-serif; }
.kk-popup .kk-popup-tail { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 10px solid #fff; filter: drop-shadow(0 2px 1px rgba(0,0,0,.08)); }
.kk-popup-close { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;
  border: none; background: none; font-size: 15px; cursor: pointer; color: #999; }
.kk-popup .popup h3 { margin-right: 22px; }

.panel {
  position: absolute; right: 12px; top: 70px; width: 340px; max-width: calc(100vw - 24px);
  background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.25);
  padding: 16px; z-index: 1200;
}
.panel.hidden { display: none; }
.panel h2 { font-size: 18px; }
.panel-sub { font-size: 14px; color: #555; margin: 4px 0 10px; }
.panel-close {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  border: none; background: none; font-size: 18px; cursor: pointer; color: #888;
}
.wd-btns { display: flex; gap: 4px; margin-bottom: 10px; }
.wd-btns button {
  flex: 1; min-height: 44px; border: 1px solid #d6dbe1; background: #f6f8fa;
  border-radius: 8px; font-size: 15px; cursor: pointer;
}
.wd-btns button.on { background: #1d6ef5; color: #fff; border-color: #1d6ef5; font-weight: 700; }
.wd-btns button.sat { color: #1d6ef5; } .wd-btns button.sun { color: #e0245e; }
.wd-btns button.on.sat, .wd-btns button.on.sun { color: #fff; }
.hint { font-size: 12px; color: #777; margin-top: 8px; }

.sbiz-panel {
  position: absolute; right: 12px; top: 132px; bottom: 48px; width: 360px;
  max-width: calc(100vw - 24px); background: #fff; border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.28); z-index: 1300;
  display: flex; flex-direction: column; overflow: hidden;
}
.sbiz-panel.hidden { display: none; }
.sbiz-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 4px; }
.sbiz-head h2 { font-size: 16px; }
.sbiz-panel .panel-sub { padding: 0 14px; }
.sbiz-body { overflow-y: auto; padding: 6px 14px 14px; flex: 1; }
.chart-block { margin-bottom: 14px; }
.chart-block h3 { font-size: 13px; color: #444; margin-bottom: 2px; display: flex;
  justify-content: space-between; align-items: baseline; }
.chart-note { font-size: 11px; font-weight: 400; color: #e65100; }
.chart-block canvas { width: 100%; display: block; }

@media (max-width: 600px) {
  .sbiz-panel { right: 0; left: 0; top: auto; bottom: 0; width: 100%; max-width: 100%;
                height: 75vh; border-radius: 12px 12px 0 0; }
}

.legend {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px; font-size: 13px; background: #f2f4f7; color: #444;
}
.legend .grad {
  width: 110px; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #fff5eb, #fd8d3c, #a63603);
}
.legend .sep { color: #bbb; }

.dong-label { font-size: 11px; font-weight: 700; color: #333; text-shadow: 0 0 3px #fff; }
.stop-tip { font-size: 13px; }

@media (max-width: 600px) {
  .topbar h1 { font-size: 15px; }
  .panel { right: 0; left: 0; top: auto; bottom: 0; width: 100%; max-width: 100%;
           border-radius: 12px 12px 0 0; }
  .rank-panel { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-width: 100%;
                height: 60vh; border-radius: 12px 12px 0 0; }
}