/* 도공지도 공통 UI 최종 규칙. 기본 스타일보다 뒤에서 한 곳에서 관리한다. */
:root {
  --map-control-bg:#2c2f38;
  --map-control-fg:#ffffff;
  --map-control-border:#4a4d58;
  --map-control-pressed-bg:#3a3d46;
  --map-control-active-bg:#f4f6fa;
  --map-control-active-fg:#11141a;
  --map-control-active-border:#d7dce5;
  --header-control-bg:#2c2f38;
  --header-control-fg:#ffffff;
  --header-control-border:#4a4d58;
  --header-control-active-bg:#ffffff;
  --header-control-active-fg:#11141a;
  --header-control-active-border:#d7dce5;
  --floating-panel-fg:#ffffff;
  --control-panel-bg:#242731;
  --control-panel-border:#4b5160;
  --control-input-bg:#17191f;
  --control-item-bg:#343946;
  --control-item-hover:#4c5362;
  --control-item-fg:#ffffff;
  --control-selected-bg:#f4f6fa;
  --control-selected-fg:#11141a;
  --control-muted:#c1c8d7;
}
body, button, input, select, textarea, #topbar, .roadviewPanel { font-family:var(--app-font, 'S-Core Dream'), '맑은 고딕', sans-serif; }
.mpDot { background:var(--route-color); }
.mpText { color:var(--route-color); }
.facDeviceBadge,
.facInfoPanelTitle { color:var(--fac-color,var(--floating-panel-fg)); }
.facDeviceBadge.scaleHidden,
.facDeviceBadge.aggregateHidden { display:none; }
.facInfoPanelTitle { cursor:pointer; }
.facInfoPanelLine.multiline { white-space:pre-line; }
.facilityPanel .facilityBulkTools .bulkToggleButton > input { pointer-events:none; }
.facilitySearchPanel { position:fixed; }
.facilitySearchPanel:not(.hidden) { display:flex; flex-direction:column; }
.facilitySearchPanel > :not(#facilitySearchResults) { flex-shrink:0; }
.facilitySearchPanel #facilitySearchResults { max-height:80vh; max-height:80dvh; min-height:0; flex-shrink:1; }
#rulerHint {
  left:auto;
  right:10px;
  top:auto;
  bottom:10px;
  transform:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  text-align:left;
  line-height:1.25;
  background:#ffffff;
  color:#2468d8;
  border:1px solid #2468d8;
  border-radius:3px;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
#rulerHint.hidden { display:none; }
#rulerHint > span { display:block; white-space:nowrap; }
#topbar { background:#22242b; border-bottom-color:#33353d; }
#topbar h1 { color:#e8e8ec; }
#topbar button { border-color:var(--header-control-border); background:var(--header-control-bg); color:var(--header-control-fg); }
#mapWrap > .mapTopControls > button, #mapTopControls > button {
  border:1px solid var(--map-control-border);
  border-radius:6px;
  background:var(--map-control-bg);
  color:var(--map-control-fg);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  font-size:15px;
  font-weight:400;
  letter-spacing:normal;
  font-stretch:condensed;
  line-height:1.15;
}
@media (min-width:701px) and (max-width:1100px) {
  #mapWrap > .mapTopControls > button, #mapTopControls > button { font-size:14px; }
}
@media (max-width:700px) {
  #mapWrap > .mapTopControls > button, #mapTopControls > button { font-size:13px; }
}
#mapWrap > .mapTopControls > button:active, #mapTopControls > button:active { background:var(--map-control-pressed-bg); }
#topbar > #equipmentBtn:not([hidden]) {
  border-radius:999px;
  border-color:var(--header-control-border);
  background:var(--header-control-bg);
  color:var(--header-control-fg);
  font-weight:400;
}
#topbar > #equipmentBtn.active { background:var(--header-control-active-bg); color:var(--header-control-active-fg); }
#mapWrap > .mapTopControls > button, #mapTopControls > button { font-weight:400; box-sizing:border-box; }
#mapWrap > .mapTopControls > #highwayRouteSelect.active, #mapWrap > .mapTopControls > #rulerBtn.active, #mapWrap > #highwayRouteSelect.mapRouteBtn.active, #mapWrap > #rulerBtn.active { background:var(--map-control-active-bg); color:var(--map-control-active-fg); }
#mapWrap > #facilityCloseAllBtn.active { background:#3568d4; border-color:#5d8df0; color:#ffffff; }
#topbar #facilityChips > button, #topbar #equipmentChips > button, #topbar > #facilityBtn, #topbar > #equipmentSelectBtn { font-weight:400; }
#topbar #facilityChips > button,
#topbar #equipmentChips > button,
#topbar #milepostToggleBtn,
#topbar #managementToggleBtn,
#topbar > #facilityBtn,
#topbar > #equipmentSelectBtn {
  border-color:var(--header-control-border);
  background:var(--header-control-bg);
  color:var(--header-control-fg);
  font-size:clamp(15px,1vw,18px);
}
#topbar #milepostToggleBtn {
  border-color:var(--header-control-border);
  background:var(--header-control-bg);
  color:var(--header-control-fg);
  font-size:clamp(15px,1vw,18px);
}
#topbar #managementToggleBtn {
  border-color:var(--header-control-border);
  background:var(--header-control-bg);
  color:var(--header-control-fg);
  font-size:clamp(15px,1vw,18px);
}
#topbar #milepostToggleBtn.active {
  background:var(--header-control-active-bg);
  border-color:var(--header-control-active-border);
  color:var(--header-control-active-fg);
}
#topbar #managementToggleBtn.active {
  background:var(--header-control-active-bg);
  border-color:var(--header-control-active-border);
  color:var(--header-control-active-fg);
}
#topbar #facilityChips > button.on,
#topbar #equipmentChips > button.on {
  background:#f4f6fa;
  border-color:var(--chip-color,#3568d4);
  color:var(--chip-color,#3568d4);
  box-shadow:none;
}
#topbar #equipmentChips > button.equipmentMapChip.on { border-color:#11141a; }
#topbar #equipmentChips > button.bulkControlChip,
#topbar #facilityChips > button.bulkControlChip { background:#ffffff; border-color:#ff4d6d; color:#ff4d6d; }
.highwayRouteName.long, .highwayRouteName.xlong { font-size:inherit; letter-spacing:normal; }
.highwayRoutePanel { width:max-content; max-width:min(360px,calc(100vw - 16px)); box-sizing:border-box; }
.highwayRoutePanel,
.facilityPanel,
#searchPanel,
#mapWrap > .facilitySearchPanel {
  background:var(--control-panel-bg);
  border:1px solid var(--control-panel-border);
  border-radius:9px;
  color:var(--floating-panel-fg);
  box-shadow:0 12px 32px rgba(0,0,0,.42);
  color-scheme:dark;
}
.highwayRoutePanel input[type="text"],
.highwayRoutePanel input[type="search"],
#searchPanel input,
.facilitySearchPanel input {
  background:var(--control-input-bg);
  border:1px solid var(--control-panel-border);
  border-radius:6px;
  color:var(--floating-panel-fg);
}
.highwayRoutePanel input::placeholder,
#searchPanel input::placeholder,
.facilitySearchPanel input::placeholder { color:var(--control-muted); }
.highwayRouteItem,
.facilityPanel label,
.facilityPanel button { color:var(--control-item-fg); }
.facilityPanel label { background:transparent; }
.facilityPanel label:hover { background:var(--control-item-hover); }
.facilityPanel label:has(input:checked) { background:var(--control-item-bg); color:var(--control-item-fg); }
.highwayRouteItem {
  min-height:32px;
  margin-bottom:3px;
  padding:5px 4px;
  border:1px solid var(--control-panel-border);
  border-radius:5px;
  background:var(--control-item-bg);
  color:var(--floating-panel-fg);
  font-family:inherit;
  font-size:15px;
  font-weight:400;
  line-height:1.2;
}
.highwayRouteItem:hover,
.highwayRouteItem.active { background:var(--control-item-hover); }
.highwayRouteGroupLabel {
  margin:7px 0 2px;
  padding:4px 7px;
  border-left:3px solid var(--accent);
  background:var(--control-item-bg);
  color:var(--control-item-fg);
  font-family:inherit;
  font-size:15px;
  font-weight:600;
}
.facilityPanel .facilityBulkTools button { background:var(--header-control-bg); border-color:var(--header-control-border); }
.facilitySearchResult,
#searchPanel .searchItem { background:var(--control-item-bg); border-color:var(--control-panel-border); color:var(--floating-panel-fg); }
.facilitySearchResult,
#searchPanel .searchItem { border:1px solid var(--control-panel-border); border-radius:5px; }
.facilitySearchResult span,
#searchPanel .searchItem .searchItemHint,
#searchPanel .searchEmpty { color:var(--control-muted); }
#searchPanel .searchItem .searchItemSub { color:var(--accent); }
#searchPanel #searchCount,
.facilitySearchPanel #facilitySearchCount { color:var(--control-muted); }
.facilitySearchResult { padding:5px 4px; }
.facilitySearchLocationResult { border-left:3px solid #56b4e9 !important; }
.facilitySearchResult:disabled { cursor:default; opacity:.76; }
.facilitySearchPanel,
.facilitySearchPanel input,
.facilitySearchPanel button,
.facilitySearchPanel strong,
.facilitySearchPanel span,
.facilitySearchGroupTitle,
.facilitySearchMatch {
  font-family:inherit;
  font-size:15px;
}
body #mapWrap > .facilitySearchPanel .facilitySearchResult strong { font-weight:400; }
body #mapWrap > .facilitySearchPanel .facilitySearchResult span { font-size:13px; }
.facilitySearchGroupTitle { margin:7px 0 2px; padding:4px 7px; border-left:3px solid var(--group-color, #5b96ff); color:var(--control-item-fg); font-weight:600; background:var(--control-item-bg); }
.facilitySearchGroupToggle { display:block; width:100%; border-top:0; border-right:0; border-bottom:0; text-align:left; cursor:pointer; font:inherit; font-weight:600; }
.facilitySearchGroupToggle::before { content:'▾'; display:inline-block; width:16px; }
.facilitySearchGroupToggle[aria-expanded="false"]::before { content:'▸'; }
.facilitySearchGroupToggle:focus-visible { outline:2px solid var(--group-color, #5b96ff); outline-offset:2px; }
.facilitySearchGroupContent[hidden] { display:none; }
.facilitySearchMatch { display:block; margin-top:3px; color:#c8ceda; font-style:normal; line-height:1.35; }
.facilitySearchMatch mark { padding:0 1px; border-radius:2px; background:#ffe66d; color:#111; }
.facilitySearchActiveHint { margin-top:7px; color:var(--control-muted); font-size:12px; line-height:1.25; text-align:right; }

/* 관리자 설정의 공공지도형. 기능·배치 기준은 공유하고 표면과 대비만 전환한다. */
.uiThemeCivic {
  --bg:#e7ece8;
  --panel:#ffffff;
  --panel2:#f1f5f2;
  --border:#d5dfd9;
  --text:#1c342e;
  --text-dim:#667b74;
  --accent:#195f52;
  --shadow:0 10px 28px rgba(37,70,61,.14);
  --map-control-bg:#ffffff;
  --map-control-fg:#243d36;
  --map-control-border:#b9c9c1;
  --map-control-pressed-bg:#dfeae5;
  --map-control-active-bg:#195f52;
  --map-control-active-fg:#ffffff;
  --map-control-active-border:#195f52;
  --header-control-bg:#ffffff;
  --header-control-fg:#29443d;
  --header-control-border:#b9c9c1;
  --header-control-active-bg:#195f52;
  --header-control-active-fg:#ffffff;
  --header-control-active-border:#195f52;
  --floating-panel-fg:#29443d;
  --control-panel-bg:#ffffff;
  --control-panel-border:#d1dcd6;
  --control-input-bg:#f1f5f2;
  --control-item-bg:#ffffff;
  --control-item-hover:#e5efeb;
  --control-item-fg:#243d36;
  --control-selected-bg:#195f52;
  --control-selected-fg:#ffffff;
  --control-muted:#687c75;
}
.uiThemeCivic #topbar {
  background:rgba(255,255,255,.96);
  border-bottom-color:#d8e1dc;
  box-shadow:0 6px 22px rgba(37,70,61,.12);
}
.uiThemeCivic #topbar h1 { color:#173b33; }
.uiThemeCivic #topbar h1 a:focus-visible { outline-color:#195f52; }
.uiThemeCivic #topbar button,
.uiThemeCivic #mapWrap > .mapTopControls > button,
.uiThemeCivic #mapTopControls > button {
  background:#ffffff;
  border-color:#ccd8d2;
  color:#2e4841;
  box-shadow:0 4px 14px rgba(37,70,61,.11);
}
.uiThemeCivic #topbar button:active,
.uiThemeCivic #mapWrap > .mapTopControls > button:active,
.uiThemeCivic #mapTopControls > button:active { background:#e8f1ed; }
.uiThemeCivic #topbar > #equipmentBtn:not([hidden]) { border-color:#195f52; color:#195f52; }
.uiThemeCivic #topbar > #equipmentBtn.active,
.uiThemeCivic #mapWrap > .mapTopControls > #highwayRouteSelect.active,
.uiThemeCivic #mapWrap > .mapTopControls > #rulerBtn.active {
  background:#195f52;
  color:#ffffff;
}
.uiThemeCivic .facilityPanel,
.uiThemeCivic .highwayRoutePanel,
.uiThemeCivic .facilitySearchPanel,
.uiThemeCivic .roadviewRecentList {
  background:#ffffff;
  border-color:#d1dcd6;
  color:#1c342e;
  box-shadow:0 16px 38px rgba(37,70,61,.17);
  color-scheme:light;
}
.uiThemeCivic .facilityPanel label,
.uiThemeCivic .highwayRouteItem,
.uiThemeCivic .facilityPanel .facilityBulkTools button { color:#29443d; }
.uiThemeCivic .facilityPanel .facilityBulkTools button { background:#eef4f1; border-color:#cfdbd5; }
.uiThemeCivic .highwayRoutePanel input[type="text"],
.uiThemeCivic .highwayRoutePanel input[type="search"],
.uiThemeCivic .facilitySearchHead input { background:#f1f5f2; border-color:#d1dcd6; color:#1c342e; }
.uiThemeCivic .highwayRoutePanel input::placeholder,
.uiThemeCivic .facilitySearchHead input::placeholder { color:#80918b; }
.uiThemeCivic .highwayRouteItem:hover,
.uiThemeCivic .highwayRouteItem.active { background:#e5efeb; }
.uiThemeCivic .highwayRouteGroupLabel { color:#4d6b63; }
.uiThemeCivic .facilitySearchResult { color:#243d36; border-top-color:#e2e9e5; }
.uiThemeCivic .facilitySearchResult span,
.uiThemeCivic .facilitySearchMatch { color:#687c75; }
.uiThemeCivic .facilitySearchGroupTitle { background:#f1f5f2; color:#243d36; }
.uiThemeCivic .facInfoPanel {
  background:#ffffff;
  border-color:#d1dcd6;
  color:#1c342e;
  box-shadow:0 15px 38px rgba(37,70,61,.18);
}
.uiThemeCivic .facInfoPanelRows dd { color:#1c342e; }
.uiThemeCivic .facInfoPanelRows dt { color:#6d817a; }
.uiThemeCivic .facInfoPanelCloseBtn { color:#5e746d; }
.uiThemeCivic #locStatus { color:#657a73; }
.searchBoundaryClose { display:flex; align-items:center; justify-content:center; width:21px; height:21px; padding:0; border:1px solid var(--control-panel-border); border-radius:50%; background:var(--control-panel-bg); color:var(--control-item-fg); font:16.8px/1 sans-serif; cursor:pointer; box-shadow:0 1px 4px #0005; }
.searchBoundaryClose:focus-visible { outline:2px solid #2474dc; outline-offset:2px; }