@import url('https://cdn.jsdelivr.net/gh/fonts-archive/S-CoreDream/S-CoreDream.css');

:root {
  --app-font: 'S-Core Dream', '맑은 고딕', sans-serif;
  --bg: #0c0e12;
  --panel: #15181f;
  --panel2: #1c2028;
  --border: #2b303b;
  --text: #edeff2;
  --text-dim: #929aa6;
  --accent: #5b96ff;
  --accent2: #2fd47a;
  --stop: #808893;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(0,0,0,.25);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%; height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--app-font, 'S-Core Dream'), "맑은 고딕", sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

#topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 8px 10px;
  border-bottom: 1px solid transparent;
  position: relative;
  z-index: 5;
  height: 44px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#topbar::-webkit-scrollbar { display: none; }
#topbar h1 { font-size: 17px; margin: 0; font-weight: 700; white-space: nowrap; flex: none; cursor: pointer; }
#topbar h1 a { color: inherit; text-decoration: none; cursor: pointer; }
#topbar h1 a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
#highwayRouteSelect {
  position: static;
  transform: none;
  width: max-content;
  min-width: 112px;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  flex: 0 0 auto;
  margin-left: auto;
}
#highwayRouteSelect:focus,
#highwayRouteSelect:focus-visible { outline: none; }
.highwayRoutePanel { position: fixed; z-index: 2300; display: flex; flex-direction: column; width: max-content; min-width: 180px; max-width: min(360px, calc(100vw - 16px)); height: 80dvh; max-height: 80dvh; padding: 8px; overflow: hidden; }
.highwayRouteTools { display: flex; gap: 6px; align-items: center; flex: 0 0 36px; min-width: 0; }
.highwayRouteToggle { flex: 0 0 auto; width: auto; min-width: 54px; height: 24px; margin: 0 2px 0 0; padding: 2px 6px; border: 1px solid #cfd4df; border-radius: 5px; background: #fff; color: #17191f; font-size: 11px; line-height: 1; white-space: nowrap; cursor: pointer; }
.highwayRouteToggle:disabled { opacity: .5; cursor: default; }
.highwayRoutePanel input[type="text"], .highwayRoutePanel input[type="search"] { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; padding: 0 10px; }
.highwayRouteList { flex: 1 1 auto; min-height: 0; margin-top: 8px; padding-right: 3px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: auto; scrollbar-color: #aeb7ca #2d313d; scrollbar-gutter: stable; cursor: grab; }
.highwayRouteList.dragging { cursor: grabbing; user-select: none; }
.highwayRouteList::-webkit-scrollbar { display: block; width: 7px; height: 7px; }
.highwayRouteList::-webkit-scrollbar-track { background: #2d313d; border-radius: 8px; }
.highwayRouteList::-webkit-scrollbar-thumb { background: #aeb7ca; border: 2px solid #2d313d; border-radius: 8px; }
.highwayRouteList::-webkit-scrollbar-thumb:hover { background: #c7cfdf; }
.highwayRouteItem { display: flex; align-items: center; gap: 7px; width: 100%; box-sizing: border-box; text-align: left; white-space: nowrap; cursor: pointer; appearance: none; }
.highwayRouteName { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.highwayRouteItem.recent::before { content: "최근  "; color: #bfcaff; font-size: 11px; }
.highwayRouteEmpty { padding: 16px 9px; color: #aab1c0; text-align: center; }
#topbar button { appearance: none; border: 1px solid transparent; border-radius: 6px; padding: 6px 10px; font-size: 14px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
#locStatus { font-size: 12px; color: #9aa0ad; white-space: nowrap; margin-left: auto; flex-shrink: 0; }
#facilityChips { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; overflow: hidden; white-space: nowrap; }
#facilityChips button { border-radius: 6px; padding: 4px 9px; font-size: 12px; }
#equipmentChips button { border-radius: 999px; }

/* 선택 여부는 색상만 바꾸고 칩의 외곽선·글꼴 굵기는 고정해 폭/높이가 변하지 않게 한다. */
#facilityChips button,
#equipmentChips button {
  box-sizing: border-box;
  border-width: 1.5px;
  font-weight: 800;
}
#facilityChips button:disabled,
#facilityChips button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
#equipmentChips button.equipmentMapChip { font-weight: 800; }
#facilityBtn { display: none; }
#facilityChips:empty + #facilityBtn { display: inline-block; }
/* 이정지도는 ITS 설비를 제외하므로 PC도 시설 선택 드롭박스를 사용한다. */
#topbar > #facilityChips { display: none; }
#topbar > #facilityBtn { display: inline-block; margin-left: 0; }

.facilityPanel {
  position: fixed;
  top: 0;
  left: 0;
  /* 모든 지도·로드뷰 레이어보다 앞에 표시하는 최상위 드롭박스다. */
  z-index: 2147483647;
  display: block;
  width: max-content;
  min-width: 160px;
  max-width: min(340px, calc(100vw - 16px));
  max-height: min(60vh, 420px);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 8px 10px;
}
.facilityPanel label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 3px 2px;
  border: 0;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.facilityPanel .facilityBulkTools { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 5px; margin: 2px 0 5px; }
.facilityPanel .facilityBulkTools button { border: 1px solid transparent; border-radius: 5px; padding: 4px 7px; font-size: 11px; cursor: pointer; }
.facilityPanel .facilityBulkTools .bulkToggleButton { display: inline-flex; align-items: center; gap: 5px; }
.facilityPanel .facilityBulkTools .bulkToggleButton > input { width: 13px; height: 13px; margin: 0; accent-color: #5b96ff; }
.facilityPanel input { accent-color: #5b96ff; margin: 0; }
.facilitySearchPanel {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 45;
  width: min(360px, calc(100vw - 20px));
  max-height: min(65vh, 480px);
  overflow: hidden;
  padding: 9px;
}
.facilitySearchBtn { position: absolute; left: 10px; top: 10px; z-index: 44; }
.facilitySearchBtn { appearance: none; border: 1px solid #4a4d58; background: rgba(34,36,43,.92); color: #e8e8ec; border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.searchLocationPin {
  width: 22px; height: 22px; box-sizing: border-box; border: 3px solid #fff;
  border-radius: 50%; background: #e23d55; box-shadow: 0 2px 8px rgba(0,0,0,.6);
  pointer-events: none; position: relative;
}
.searchLocationPin::after {
  content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fff;
}
.facilityCloseAllBtn { position: absolute; left: 10px; top: 10px; z-index: 2000; appearance: none; border: 1px solid #ff4d6d; background: #fff; color: #ff4d6d; border-radius: 8px; min-width: 112px; height: 32px; padding: 0 12px; font-size: 13px; line-height: normal; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.facilitySearchHead { display: flex; gap: 6px; }
.facilitySearchHead input { flex: 1; min-width: 0; padding: 7px 8px; }
.facilitySearchHead button { border: 1px solid transparent; border-radius: 6px; padding: 0 8px; }
#facilitySearchCount { color: var(--text-dim); font-size: 11px; padding: 7px 2px 4px; }
#facilitySearchResults, #searchResults {
  max-height: 390px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  scrollbar-width: auto; scrollbar-color: #aeb7ca #2d313d; scrollbar-gutter: stable;
}
#facilitySearchResults::-webkit-scrollbar, #searchResults::-webkit-scrollbar { display: block; width: 7px; height: 7px; }
#facilitySearchResults::-webkit-scrollbar-track, #searchResults::-webkit-scrollbar-track { background: #2d313d; border-radius: 8px; }
#facilitySearchResults::-webkit-scrollbar-thumb, #searchResults::-webkit-scrollbar-thumb { background: #aeb7ca; border: 2px solid #2d313d; border-radius: 8px; }
#facilitySearchResults::-webkit-scrollbar-thumb:hover, #searchResults::-webkit-scrollbar-thumb:hover { background: #c7cfdf; }
.facilitySearchResult { display: block; width: 100%; padding: 7px 4px; border: 0; border-top: 1px solid transparent; text-align: left; cursor: pointer; }
.facilitySearchResult strong { display: block; }
.facilitySearchResult span { display: block; color: var(--text-dim); margin-top: 2px; }

select {
  background: var(--panel);
  color: var(--text);
  border: none;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  box-shadow: var(--shadow);
}

/* 카카오맵 상단 컨트롤(둥근 캡슐 버튼 + 그림자) 스타일을 참고한 디자인 */
.secondaryBtn {
  background: var(--panel);
  color: var(--text);
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .12s, color .12s, box-shadow .12s;
}
.secondaryBtn:hover { background: var(--panel2); }
.secondaryBtn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(91,150,255,.45);
}

#app {
  display: flex;
  height: calc(100% - 44px);
  min-height: 0;
}
/* 직선도(webapp)의 "지도" 패널에 내장된 경우, 이 페이지 자체의 상단바를 숨기고 지도가 그 자리까지
   채운다(제목이 두 줄로 겹치지 않게, 2026-08-19). */
body.embedded #topbar { display: none; }
body.embedded #app { height: 100%; }
#mapWrap { position: relative; flex: 1; min-width: 0; }
#map { width: 100%; height: 100%; }

.mapStatus {
  position: absolute;
  left: 10px; bottom: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-dim);
  box-shadow: var(--shadow);
  z-index: 20; /* #map(position:relative) 내부 카카오 레이어 중 z-index:1짜리가 있어 그 위로 올림 */
}
.mapStatus:empty { display: none; }

.roadviewHint,
.roadviewKeyboardHint {
  background: var(--accent);
  color: #fff;
  animation: roadviewKeyboardHintBlink 2s ease-in-out 1;
}
.roadviewHint {
  position: absolute;
  left: 50%; top: 12px;
  transform: translateX(-50%);
  font-size: 20.25px;
  font-weight: 600;
  padding: 9px 17px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  z-index: 3;
  white-space: nowrap;
}

.rulerCursorDistance {
  position: absolute;
  left: 0; top: 0;
  transform: translate(12px, 12px);
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  padding: 5px 7px;
  border-radius: 6px;
  box-shadow: var(--shadow);
  z-index: 8;
  min-width: 0;
  pointer-events: auto;
  cursor: pointer;
  display: block;
}
.rulerCursorDistance:hover { border-color: var(--accent); }
.rulerTotal { display: flex; align-items: center; justify-content: space-between; gap: 18px; line-height: 1.3; }
.rulerTotal span { color: var(--text-dim); font-weight: 500; }
.rulerTotal strong { color: #ff4e4e; font-variant-numeric: tabular-nums; }
.rulerNote { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 7px; color: var(--text-dim); font-size: 11px; font-weight: 500; }

/* 이정 점에 마우스를 올리면 뜨는 관할 본부/지사 풍선(클릭 불필요, hover로만 여닫힘) */
.mgmtInfoBox {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  box-shadow: var(--shadow);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  pointer-events: none;
}

/* 로드뷰 창이 지금 보고 있는 위치를 지도 위에 표시(로드뷰 안에서 이동하면 같이 따라 움직임).
   드래그해서 놓으면 그 위치의 로드뷰로 창이 바로 이동한다. 핀 끝(뾰족한 아래쪽)이 실제
   위치를 가리키므로 오버레이 anchor도 아래쪽에 맞춘다(xAnchor 0.5 / yAnchor 1). */
.roadviewPosMarker {
  position: relative;
  isolation: isolate;
  width: 46px;
  height: 60px;
  cursor: move;
  touch-action: none;
  user-select: text;
  -webkit-user-select: text;
}
.roadviewPosMarker::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--roadview-accent, #ef3340);
  -webkit-mask: url('icons/roadview_pin.png') no-repeat center / contain;
  mask: url('icons/roadview_pin.png') no-repeat center / contain;
  filter:
    drop-shadow(0 0 1px #fff)
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 3px 5px rgba(0,0,0,.9));
}
.roadviewPosMarker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  z-index: 1;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  border: 3px solid var(--roadview-accent, #ef3340);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 2px 8px rgba(0,0,0,.75);
  pointer-events: none;
  animation: roadviewMarkerPulse 1.45s ease-out infinite;
}
@keyframes roadviewMarkerPulse {
  0% { opacity: .95; transform: translateX(-50%) scale(.68); }
  72%, 100% { opacity: 0; transform: translateX(-50%) scale(1.42); }
}
@media (prefers-reduced-motion: reduce) {
  .roadviewPosMarker::after { animation: none; opacity: .75; transform: translateX(-50%) scale(1); }
}
/* 직선도(PART A)에서 선택한 설비를 시설물명 배지로 표시(?facs= 딥링크). 애니메이션 없이 전체
   이름을 항상 그대로 보여준다(예: "CCTV", 2026-08-19 - 이전엔 첫 글자만 보이다가 hover/클릭 시
   펼쳐지는 방식이었음). */
.facDeviceBadge {
  display: inline-block;
  box-sizing: content-box;
  height: 20px;
  padding: 0 6px;
  background: #fff;
  color: #111; /* 종류별 색은 JS가 인라인 style.color로 지정(facColorFor) */
  border: 1.5px solid #111;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: top;
}
/* 배경색은 설비 종류별로 다르게 지정(JS가 인라인 style로, FAC_CAT_COLOR 참고) - active 상태는
   배경을 덮어쓰지 않고 테두리 링으로만 표시해 종류 색을 계속 알아볼 수 있게 한다. */
.facDeviceBadge.active { box-shadow: 0 0 0 3px rgba(255,149,0,.55), 0 1px 4px rgba(0,0,0,.4); }
/* IC·JC·TG는 상세 정보창 대신 노선명·이정을 바로 보여준다. hover는 즉시, 클릭·터치는 JS가
   routeHintVisible을 5초간 유지해 마우스와 모바일에서 같은 안내를 볼 수 있다. */
.facRouteHintBadge::before,
.facRouteHintBadge::after {
  position: absolute;
  left: 50%;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .08s ease;
  z-index: 20;
}
.facRouteHintBadge { position: relative; }
.facRouteHintBadge::before {
  content: attr(data-route-hint);
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  box-sizing: border-box;
  width: max-content;
  max-width: min(520px, 92vw);
  padding: 6px 9px;
  border: 1px solid rgba(17, 24, 39, .2);
  border-radius: 6px;
  background: #fff;
  color: #111827;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow: hidden;
  text-overflow: ellipsis;
}
.facRouteHintBadge::after {
  content: '';
  bottom: calc(100% + 3px);
  transform: translateX(-50%);
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: #fff transparent transparent;
}
.facRouteHintBadge:hover::before,
.facRouteHintBadge:hover::after,
.facRouteHintBadge.routeHintVisible::before,
.facRouteHintBadge.routeHintVisible::after {
  opacity: 1;
  visibility: visible;
}
.facAggregateRouteHintBadge::before {
  width: max-content;
  max-width: min(520px, 92vw);
  max-height: min(45vh, 280px);
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
  white-space: pre-line;
  text-overflow: clip;
  line-height: 1.4;
}
/* 배지를 클릭하면 정보창이 지도 좌표가 아니라 화면 우측 상단부터 아래로 순서대로 쌓인다(JS가
   top을 계산해 지정, restackPanels 참고) - 여러 개를 동시에 열어도 서로 겹치지 않게 하기 위함.
   배지와 마찬가지로 열릴 때는 기기번호(제목줄)만 먼저 보이다가 전체 정보(.facInfoPanelBody)가
   부드럽게 펼쳐지고, 닫을 때도 같은 방식으로 접히고 나서 사라진다(2026-08-19, 배지와 연동). */
.facInfoPanel {
  /* 직선도(구 상세정보) 카드와 같은 바탕색·모서리 반경·그림자(2026-08-19, 정보 패널이 없어지며
     그 카드 형식을 이정지도 정보창으로 옮겨왔다) - 위치/펼침 애니메이션은 그대로 유지한다. */
  position: absolute;
  left: 10px;
  right: auto;
  /* 너비는 고정값(260px) 대신 그 정보창에서 가장 긴 줄에 맞춰 늘어난다(2026-08-20 요청).
     max-content라 접혀 있는 본문(.facInfoPanelBody)의 내용도 폭 계산에 포함되므로, 펼쳐질 때
     폭이 흔들리지 않는다. 상한(PC 420px / 모바일 화면 절반)을 넘으면 줄바꿈된다.
     같은 열(줄)에 놓인 창들은 그중 가장 넓은 값으로 JS(facRestackPanels)가 통일해 준다. */
  width: max-content;
  min-width: 150px;
  max-width: 420px;
  box-sizing: border-box;
  background: var(--panel2);
  border: 4px solid var(--roadview-accent, var(--border));
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow);
  font-size: 12px;
  white-space: normal;
  z-index: 5;
  /* 정보창을 위아래로 끌어 가려진 창을 볼 수 있게 한다(2026-08-20) - 터치에서 브라우저 기본
     스크롤 제스처가 이 드래그와 경합하지 않도록 touch-action을 끈다. */
  touch-action: none;
  /* 다른 정보창이 열리고 닫힐 때의 자리다툼(재배치)·열 이동도 부드럽게 */
  transition: top .25s ease, right .25s ease;
}
/* 끄는 동안에는 트랜지션을 꺼야 손끝을 바로 따라온다(facAttachStackDrag) */
.facStackDragging .facInfoPanel { transition: none; }
.facInfoPanelTitle {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  font-weight: 700;
  color: var(--text);
  padding-right: 0;
  white-space: normal;
  overflow: hidden;
}
.facDeviceBadge-ic,
.facDeviceBadge-jc,
.facDeviceBadge-manhole-splice,
.facDeviceBadge-manhole-through,
.facDeviceBadge-암거,
.facDeviceBadge-bridge,
.facDeviceBadge-터널,
.facDeviceBadge-휴게소,
.facDeviceBadge-비상연결로,
.facDeviceBadge-EX,
.facDeviceBadge-TG {
  border-radius: 3px;
  border-width: 2px;
}
.facDeviceBadge-ic { border-color: #2f73d9; }
.facDeviceBadge-jc { border-color: #d9822b; }
.facDeviceBadge-manhole-splice { border-color: #2fa66a; }
.facDeviceBadge-manhole-through { border-color: #73808f; }
.facDeviceBadge-암거 { border-color: #c97b5f; }
.facDeviceBadge-bridge { border-color: #4f8cff; }
.facDeviceBadge-터널 { border-color: #8a7fc9; }
.facDeviceBadge-휴게소 { border-color: #4ca86b; }
.facDeviceBadge-비상연결로 { border-color: #e08b2d; }
.facDeviceBadge-EX { border-color: #16834b; }
.facDeviceBadge-TG { border-color: #b06a24; }
.facInfoPanelTitleText {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 290px;
  max-height: 2.75em;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.facInfoPanelCopyBtn {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel2);
  color: var(--text-dim);
  padding: 1px 5px;
  font: inherit;
  font-size: 10px;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
}
.facInfoPanelCopyBtn:hover { color: var(--text); border-color: var(--text-dim); }
.facInfoPanelTitle.statusNextLine { flex-wrap: wrap; }
.facInfoPanelTitle.statusNextLine .facInfoPanelTitleText { flex: 1 1 100%; width: 100%; }
.facInfoPanelTitle.statusNextLine .facInfoPanelStatus { margin-left: 0; }
/* 직선도 상세정보 카드의 상태 배지(.badge)와 같은 알약 모양·색으로 표시한다. */
.facInfoPanelStatus { flex: 0 0 auto; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: #fff; }
.facInfoPanelStatus.stop { background: transparent; color: #ff5252; padding: 0; border-radius: 0; }
.facInfoPanelStatus.manhole-splice { background: var(--accent2); color: #06231a; }
.facInfoPanelStatus.manhole-through { background: var(--text-dim); color: #06231a; }
/* 요약행("(대전지사) 호남지선 논산방향 41.8Km")은 종류별 제목색과 구분되게 파란색으로 통일
   (2026-08-20 요청) - 설비 종류에 상관없이 항상 같은 색이다. */
.facInfoPanelSub { color: var(--accent); font-size: 11px; margin: 4px 0; word-break: keep-all; overflow-wrap: break-word; }
/* 직선도 상세정보 카드와 같은 부가 항목(제조사/설치년도/규격 등)을 라벨:값 두 칸으로 표시. */
.facInfoPanelRows { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; }
.facInfoPanelRows dt { color: var(--text-dim); white-space: nowrap; }
/* 값이 아주 긴 항목(예: 설치 "2018년, (사)장애인인권센터 ICT사업단")까지 한 줄에 담으려고
   창을 넓히면 정보창이 지도를 너무 가린다. 값 칸에 상한을 둬서 그런 항목만 다음 줄로 넘어가게
   한다 - 창 자체의 너비(max-content)도 이 상한 안에서 정해진다(2026-08-20 요청). */
/* keep-all: 한글은 기본값이면 글자 단위로 아무 데서나 끊겨("(사)장애 / 인인권센터") 읽기 나빠서
   띄어쓰기 단위로만 줄을 바꾼다. 한 낱말이 칸보다 길 때만 break-word로 강제로 끊는다. */
.facInfoPanelRows dd { margin: 0; color: var(--text); word-break: keep-all; overflow-wrap: break-word; max-width: 190px; }
.facInfoPanelRows dd.facInfoPanelLine { grid-column: 1 / -1; max-width: 240px; }
.facInfoPanelTitle.managementAgencyTitle .facInfoPanelTitleText,
.facInfoPanelRows dd.facInfoPanelLine .facInfoPanelRouteName { color: var(--management-color, var(--text)); font-weight: 700; }
.facInfoPanelRows dd.management-route { margin-top: 5px; }
.facInfoPanelRows dd.management-detail { margin-bottom: 3px; }
.facGroupedCctvEntry { margin: 0; padding: 0; }
.facGroupedCctvEntry.separated { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); }
.facGroupedCctvLine { margin-top: 3px; color: var(--text); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.facGroupedDirectionalSpecLine { margin-top: 15px; }
/* '설치'의 업체명처럼 한 덩어리로 다뤄야 하는 값 - 칸에 들어가면 앞 내용과 같은 줄에, 안 들어가면
   낱말 중간이 아니라 통째로 다음 줄로 넘어간다(inline-block이라 줄바꿈 단위가 이 상자 전체다). */
.facRowChunk { display: inline-block; }
.facInfoPanelBody {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}
.facInfoPanelBody.open {
  opacity: 1;
  margin-top: 4px;
  /* max-height는 JS가 실제 내용 높이(scrollHeight)를 재서 인라인 style로 지정(글씨 잘림 방지) */
}
.facInfoPanelCloseBtn {
  position: absolute;
  top: 4px;
  width: 18px; height: 18px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 18px;
  padding: 0;
  cursor: pointer;
}
.facInfoPanelCloseBtn { right: 4px; }
.facInfoPanelCloseBtn:hover { background: var(--panel2); color: var(--text); }

.rulerDot {
  width: 10px; height: 10px;
  background: #ff3b30;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.myLocationMarker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}
.myLocationMarker::before {
  content: '';
  position: absolute;
  top: -9px;
  width: 38px;
  height: 38px;
  border: 3px solid rgba(38, 120, 255, .95);
  box-shadow: 0 0 0 3px rgba(255,255,255,.75), 0 0 18px rgba(38,120,255,.85);
  border-radius: 50%;
  animation: myLocationPulse 1.35s ease-out infinite;
}
.myLocationDot {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  background: #2678ff;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #1769e8, 0 0 12px rgba(38,120,255,.9), 0 2px 6px rgba(0,0,0,.55);
  animation: myLocationBeacon 1.35s ease-in-out infinite;
}
.myLocationDot::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: #fff;
  border-radius: 50%;
}
@keyframes myLocationPulse {
  0% { transform: scale(.45); opacity: 1; }
  70%, 100% { transform: scale(1.15); opacity: 0; }
}
@keyframes myLocationBeacon {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

.roadviewPanel {
  position: absolute;
  width: 360px;
  height: 280px;
  min-width: 220px;
  min-height: 160px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  container-type: size;
}
.roadviewKeyboardHint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1400;
  max-width: min(420px, calc(100% - 24px));
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid rgba(17, 24, 39, .28);
  border-radius: 7px;
  box-shadow: 0 2px 9px rgba(0, 0, 0, .3);
  font-size: 20.25px;
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-line;
  pointer-events: none;
}
@keyframes roadviewKeyboardHintBlink {
  0%, 24%, 48%, 100% { opacity: 1; }
  12%, 36% { opacity: .18; }
}
@media (max-width: 700px) {
  .roadviewKeyboardHint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .roadviewHint,
  .roadviewKeyboardHint { animation: none; }
}
.roadviewHeader {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--roadview-accent, var(--border));
  font-size: 12.5px;
  font-weight: 700;
  flex: none;
  cursor: default;
  touch-action: none;
  user-select: none;
  position: relative;
  z-index: 10;
}
.roadviewHeader.dragging { cursor: move; }
.roadviewTitleWrap {
  display: grid;
  grid-template-columns: fit-content(65%) minmax(0, 1fr);
  grid-template-areas:
    "title date"
    "address address";
  align-items: baseline;
  column-gap: 7px;
  row-gap: 3px;
  flex: 1 1 auto;
  width: 0;
  overflow: hidden;
  min-width: 0;
}
.roadviewTitle {
  grid-area: title;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
}
.roadviewShotDate {
  grid-area: date;
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}
.roadviewInfo {
  grid-area: address;
  display: block;
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
  margin-top: 1px;
}
.roadviewInfo:empty { display: none; }
.roadviewHeaderBtns { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; position: relative; z-index: 20; pointer-events: auto; }
.roadviewHeaderBtns .iconBtn:not(.roadviewNaverBtn) { color: var(--roadview-accent, var(--text-dim)); }
.roadviewRecentList { position: absolute; z-index: 2000; width: 220px; max-height: 240px; overflow-y: auto; padding: 5px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); }
.roadviewRecentItem { display: block; width: 100%; padding: 7px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--text); text-align: left; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.roadviewRecentItem:hover { background: var(--panel2); color: var(--accent); }
.roadviewRecentEmpty { padding: 8px; color: var(--text-dim); font-size: 12px; }
.roadviewCloseBtn {
  position: relative;
  z-index: 21;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  pointer-events: auto;
  touch-action: manipulation;
}

/* 제목창 폭이 충분할 때는 주소도 제목·촬영일자와 같은 줄에 배치한다. */
@container (min-width: 620px) {
  .roadviewTitleWrap {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "title date address";
    column-gap: 8px;
    row-gap: 0;
  }
  .roadviewInfo {
    flex: 1 1 auto;
    margin-top: 0;
  }
}

@media (min-width: 561px) {
  .roadviewPanel.fullscreenMode .roadviewTitleWrap {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "title date address";
    column-gap: 8px;
    row-gap: 0;
  }
  .roadviewPanel.fullscreenMode .roadviewInfo {
    flex: 1 1 auto;
    margin-top: 0;
  }
}

.roadviewBody {
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 0;
  /* Kakao 내부 레이어의 큰 z-index를 이 영역 안에 가둬 조작 패널 클릭을 막지 않게 한다. */
  isolation: isolate;
}
.roadviewCompass {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 5;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,0,0,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  /* 모바일 탭이 아래 카카오 로드뷰 링크로 통과하지 않게 나침반이 직접 받는다. */
  pointer-events: auto;
  touch-action: none;
  cursor: default;
}
.roadviewCompassDial {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  transition: transform .08s linear;
}
.roadviewCompassDial b {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: #111;
  font: 700 11px/1 "S-Core Dream", sans-serif;
}
.roadviewCompassDial i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 14px solid #d82323;
}
.roadviewNav {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: stretch;
  z-index: 4;
  width: clamp(44px, 14cqw, 72px);
  pointer-events: none;
  user-select: none;
  transition: transform .28s ease;
}
.roadviewNav.collapsed {
  transform: translateX(calc(100% - 28px));
  pointer-events: auto;
}
.roadviewNavPeekBtn {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 54px;
  border: 1px solid rgba(255,255,255,.38);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: rgba(12,14,18,.78);
  color: #fff;
  font: 700 22px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  pointer-events: auto;
}
.roadviewNav.collapsed .roadviewDirectionZone,
.roadviewNav.collapsed .roadviewNavBtn { visibility: hidden; }
.roadviewNav.collapsed .roadviewNavPeekBtn { display: block; }
.roadviewDirectionZone {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: rgba(12,14,18,.28);
  color: #fff;
  font: 700 clamp(15px, min(5cqw, 4cqh), 24px)/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}
.roadviewDirectionZone:hover { background: rgba(12,14,18,.48); }
.roadviewStep {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: clamp(15px, min(5cqw, 4cqh), 24px);
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.roadviewStep:hover { background: rgba(255,255,255,.16); }
.roadviewStep em {
  font-style: normal;
  font-size: clamp(8px, min(2.5cqw, 2.2cqh), 12px);
  line-height: 1;
}
.roadviewStep small {
  font-size: clamp(7px, min(2.2cqw, 2cqh), 11px);
  line-height: 1.1;
  white-space: nowrap;
}
.roadviewNavBtn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  width: clamp(38px, min(12cqw, 18cqh), 60px); height: clamp(38px, min(12cqw, 18cqh), 60px);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  padding: 5px 7px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font: 700 clamp(9px, min(3cqw, 3cqh), 14px)/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  white-space: nowrap;
  pointer-events: auto;
}
.roadviewNavBtn:hover { background: rgba(255,255,255,.25); }
.roadviewNavBtn:disabled { opacity: .45; cursor: wait; }
.roadviewNavBtn span {
  display: block;
  width: 1em;
  font-size: clamp(8px, min(2.6cqw, 2.6cqh), 12px);
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  word-break: break-all;
}
/* 작은 로드뷰창에서는 세로 공간을 확보하기 위해 방향 도시명은 숨기고 화살표만 남긴다. */
@container (max-height: 220px) {
  .roadviewStep small { display: none; }
}

.roadviewPanel.fullscreenMode {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  border-radius: 0;
  z-index: 9999;
}
.roadviewPanel.fullscreenMode .roadviewHeader { cursor: default; }
.roadviewPanel.fullscreenMode .roadviewResizeHandle { display: none; }
@media (max-width: 560px) {
  .roadviewHeader { gap: 2px; padding: 4px 5px; }
  .roadviewHeaderBtns { gap: 0; }
  .roadviewHeaderBtns .iconBtn { width: 34px; height: 34px; font-size: 16px; }
  .roadviewTitle, .roadviewInfo { line-height: 1.05; }
  .roadviewInfo { margin-top: 0; }
  .roadviewDirectionZone { font-size: clamp(15px, min(5cqw, 4cqh), 21px); }
  .roadviewNavBtn { padding: clamp(3px, 1cqw, 5px); }
}

.roadviewResizeHandle {
  position: absolute;
  right: 0; top: 0;
  width: 18px; height: 18px;
  cursor: nesw-resize;
  z-index: 10;
  pointer-events: auto;
  touch-action: none;
  background:
    linear-gradient(45deg, transparent 0 45%, var(--border) 45% 55%, transparent 55% 100%),
    linear-gradient(45deg, transparent 0 65%, var(--border) 65% 75%, transparent 75% 100%);
}

.ctxMenu {
  position: fixed;
  z-index: 60;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  min-width: 230px;
  display: flex;
  flex-direction: column;
}
.ctxMenuItem {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  min-height: 36px;
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 6px;
  cursor: pointer;
}
.ctxMenuItem:hover { background: var(--panel2); }
.ctxMenuItem.active { color: var(--accent); }

.ctxMenuCoord {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 6px 10px;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.ctxMenuCopyValue { flex: 1 1 auto; min-width: 0; }
.ctxMenuCopyBtn {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  cursor: pointer;
  flex: none;
}
.ctxMenuCopyBtn:hover { border-color: var(--accent); color: var(--accent); }

.ctxMenuAddr {
  display: none;
  align-items: flex-start;
  gap: 10px;
  min-height: 36px;
  padding: 7px 10px;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim);
}
.ctxMenuAddr.is-ready { display: flex; }
.ctxMenuAddressValue { flex: 1 1 auto; padding-top: 2px; }
.ctxMenuRegion {
  padding: 0 10px 8px;
  margin-top: -6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
}
.ctxMenuRegion:empty { display: none; }
.ctxMenuMgmt {
  display: flex;
  flex-direction: column;
  padding: 4px 10px;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim);
}
.ctxMenuMgmtRoute,
.ctxMenuOrgName {
  display: flex;
  align-items: center;
  min-height: 28px;
}
.ctxMenuMgmtRoute { color: var(--text); font-size: 13px; font-weight: 700; }
.ctxMenuMgmt .ctxMenuPhoneRow {
  min-height: 28px;
  padding: 2px 0;
  margin: 0;
  border-bottom: 0;
}
.ctxMenuSeparator {
  height: 1px;
  margin: 5px 6px;
  background: var(--border);
}
.ctxMenuInfoIcon,
.ctxMenuExIcon,
.ctxMenuKakaoIcon,
.ctxMenuRoadviewIcon,
.ctxMenuEmojiIcon,
.ctxMenuMapIcon,
.ctxMenuNavigationIcon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:22px;
  height:22px;
  border-radius:6px;
  font-size:10px;
  font-weight:700;
  line-height:1;
}
.ctxMenuInfoIcon { position:relative; color:var(--text-dim); background:var(--panel2); border:1px solid var(--border); }
.ctxMenuPhoneIcon::before { content:'☎'; font-size:12px; transform:rotate(-12deg); }
.ctxMenuCoordinateIcon::before { content:'＋'; font-size:15px; font-weight:500; }
.ctxMenuCoordinateIcon::after { content:''; position:absolute; inset:5px; border:1px solid currentColor; border-radius:50%; }
.ctxMenuAddressIcon::before { content:''; width:8px; height:8px; border:2px solid currentColor; border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
.ctxMenuOpinionIcon::before { content:'✎'; font-size:14px; }
.ctxMenuExIcon { background:#16834b; color:#fff; }
.ctxMenuKakaoIcon { background:#fee500; color:#191919; }
.ctxMenuNavigationIcon { background:#16834b; }
.ctxMenuMapIcon { background:#3b82f6; }
.navigationChooser { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2000; width:min(320px,calc(100vw - 32px)); padding:18px; border:1px solid var(--border); border-radius:14px; background:var(--panel); box-shadow:0 14px 40px #0008; color:var(--text); }
.navigationChooserTitle { font-weight:800; font-size:16px; }
.navigationChooserText { margin:7px 0 14px; color:var(--text-dim); font-size:13px; }
.navigationChooserBtn,.navigationChooserCancel { width:100%; margin-top:8px; padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:var(--panel2); color:var(--text); cursor:pointer; }
.navigationChooserBtn:hover { border-color:var(--accent); color:var(--accent); }
.ctxMenuRoadviewIcon { background:#ef3340; }
.ctxMenuMapIcon { background:#3b82f6; }
.ctxMenuNavigationIcon { background:#16834b; }
.ctxMenuRoadviewIcon::before,
.ctxMenuMapIcon::before,
.ctxMenuNavigationIcon::before {
    content:'';
    width:14px;
    height:14px;
    background:#fff;
}
.ctxMenuRoadviewIcon::before {
    width:12px;
    height:14px;
    -webkit-mask:url('icons/roadview_pin.png') no-repeat center / contain;
    mask:url('icons/roadview_pin.png') no-repeat center / contain;
}
.ctxMenuMapIcon::before {
    -webkit-mask:url('icons/context_map.svg') no-repeat center / contain;
    mask:url('icons/context_map.svg') no-repeat center / contain;
}
.ctxMenuNavigationIcon::before {
    -webkit-mask:url('icons/context_navigation.svg') no-repeat center / contain;
    mask:url('icons/context_navigation.svg') no-repeat center / contain;
}

.iconBtn {
  background: none; border: none; color: var(--text-dim);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 17px;
  user-select: none;
}
.iconBtn:hover { background: var(--panel2); color: var(--text); }
.roadviewNaverBtn { color: #03c75a; font-weight: 800; }

.roadviewTextBtn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.roadviewTextBtn:hover { border-color: var(--accent); color: var(--accent); }

.mpPoint {
  position: relative;
  width: 9px;
  height: 9px;
  pointer-events: none;
}
.mpDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.mpText {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 2px;
  transform: translateX(-50%);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 4px #fff;
}

/* 거리재기 버튼은 PC·모바일 모두 텍스트로 표시하고 아이콘 요소는 항상 숨긴다. */
#rulerBtn { display: inline-flex; align-items: center; }
.btnLabelIcon { display: none; width: 16px; height: 16px; }

@media (min-width: 701px) and (max-width: 1000px) {
  #facilityChips { display: none; }
  #facilityBtn { display: inline-block; margin-left: auto; }
}
@media (max-width: 700px) {
  #highwayRouteSelect { width: max-content; min-width: 96px; max-width: none; padding: 6px 8px; font-size: 12px; margin-left: auto; }
  .highwayRoutePanel { width: min(280px, calc(100vw - 16px)); min-width: 0; max-width: calc(100vw - 16px); height: 80dvh; max-height: 80dvh; box-sizing: border-box; }
  /* 모바일에서는 정보창이 화면 너비의 절반을 넘지 않게 하고, 넘치는 줄은 줄바꿈한다(2026-08-20 요청) */
  .facInfoPanel { max-width: 50vw; }
  #topbar { padding: 8px; }
  #topbar h1 { font-size: 14px; }
  #topbar button { padding: 6px 8px; font-size: 13px; }
  #facilityChips { display: none; }
  #facilityBtn { display: inline-block; }
  #mapTypeTopBtn, #myLocationBtn, #roadviewBtn, #rulerBtn { right: 10px; width: 92px; justify-content: center; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
  #mapTypeTopBtn { position: fixed; bottom: 112px; z-index: 1300; }
  #myLocationBtn { position: fixed; bottom: 76px; z-index: 1300; }
  #roadviewBtn { position: fixed; bottom: 40px; z-index: 1300; }
  #rulerBtn { position: fixed; bottom: 2px; z-index: 1300; padding: 6px 8px; }
  .btnLabelFull { display: inline; }
  .btnLabelIcon { display: none; }
  .facilityPanel { grid-template-columns: repeat(2, minmax(100px, 1fr)); width: min(280px, calc(100vw - 16px)); min-width: 0; }
  .facilitySearchBtn { left: 8px; top: 8px; }
  .facilitySearchPanel { left: 8px; top: 48px; width: calc(100vw - 16px); }
}

/* 제목줄 공통 반응형 축소: 화면 폭에 맞춰 항목을 줄이고 서로 겹치지 않게 한다. */
#topbar {
  padding: 3px clamp(4px, .7vw, 8px);
  /* 버튼(32px)보다 내용 영역이 작아지지 않도록 화면 폭 기준으로만 조정한다. */
  box-sizing: border-box;
  height: clamp(40px, min(4vw, 6dvh), 48px);
}
#topbar > h1, #topbar > #locStatus, #topbar > button {
  min-width: 0;
}
#topbar > h1 {
  max-width: clamp(68px, 13vw, 150px);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(11px, .95vw, 15px);
}
#topbar > #locStatus { max-width: clamp(24px, 4vw, 48px); font-size: clamp(9px, .7vw, 11px); }
#topbar > button:not(#facilityBtn) {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: clamp(2px, .35vw, 4px) clamp(3px, .45vw, 7px);
  font-size: clamp(12px, .82vw, 15px);
}
@media (max-width: 700px) {
  #topbar { height: clamp(40px, min(10vw, 6dvh), 48px); padding: 4px 5px; }
  #topbar > h1 { max-width: 92px; font-size: 12px; }
  #topbar > #facilityBtn { flex: 0 0 auto; font-size: 10px; padding: 3px 5px; }
}
@media (min-width: 1001px) {
  #topbar { height: clamp(38px, 2.8vw, 44px); padding: 5px clamp(7px, .8vw, 12px); }
  #topbar > h1 { max-width: clamp(92px, 13vw, 170px); font-size: clamp(14px, 1.05vw, 18px); }
  #topbar > #locStatus { max-width: clamp(34px, 4vw, 58px); font-size: clamp(9px, .7vw, 11px); }
  #topbar > button:not(#facilityBtn) { font-size: clamp(12px, .82vw, 15px); padding: 4px clamp(5px, .55vw, 9px); }
}

/* 제목과 우측 지도 버튼 사이에 노선·시설 제어를 중앙 배치한다. */
#headerCenterControls {
  display: flex; align-items: center; justify-content: center; gap: clamp(3px, .45vw, 7px);
  flex: 1 1 auto; min-width: 0; overflow: hidden;
}
#headerCenterControls > #facilityBtn {
  flex: 0 1 auto; min-width: 0; margin-left: 0; margin-right: 0; overflow: hidden;
  text-overflow: ellipsis;
}
#headerCenterControls > #milepostToggleBtn {
  flex: 0 0 auto; min-width: 0; margin-left: 0; margin-right: 0; white-space: nowrap;
}
#headerCenterControls > #facilityChips { flex: 0 1 auto; min-width: 0; max-width: 100%; justify-content: center; }
@media (max-width: 700px) {
  #topbar > h1 { flex: 0 0 auto; max-width: clamp(72px, 22vw, 92px); }
  #headerCenterControls { flex: 1 1 auto; justify-content: flex-start; gap: 3px; overflow: hidden; }
  #headerCenterControls > #facilityBtn { flex: 0 0 auto; }
}
/* 로그인 통합 모드는 ITS 설비 선택을 추가하고 남은 공간에서 컨트롤을 정렬한다. */
body.its2Mode #headerCenterControls { margin-left: 0; justify-content: center; overflow-x: auto; scrollbar-width: none; }
body.its2Mode #headerCenterControls::-webkit-scrollbar { display: none; }
body.its2Mode #equipmentBtn { display: inline-block; }
body:not(.its2Mode):not(.publicMapMode) #equipmentBtn,
body:not(.its2Mode):not(.publicMapMode) #equipmentPanel { display: none; }
body.its2Mode #equipmentPanel { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
/* 로그인 통합 모드 반응형 표시: 글자를 줄임표로 숨기지 않고 자연 폭을 기준으로
   시설·ITS 칩을 드롭박스로 전환한다. */
body.its2Mode #pageTitle {
  flex: 0 0 auto; max-width: none; overflow: visible; text-overflow: clip;
  white-space: nowrap; font-size: clamp(15px, 1.25vw, 20px);
}
body.its2Mode #headerCenterControls { overflow: visible; }
body.its2Mode #headerCenterControls > #facilityBtn {
  width: max-content; min-width: 78px; max-width: none; overflow: visible;
  text-overflow: clip; white-space: nowrap; font-size: clamp(13px, .95vw, 16px);
}
body.its2Mode #headerCenterControls > #facilityChips {
  flex: 0 0 auto; max-width: none; overflow: visible;
}
body.its2Mode #headerCenterControls > #facilityChips button {
  flex: 0 0 auto; max-width: none; overflow: visible; text-overflow: clip;
  white-space: nowrap; font-size: clamp(13px, .95vw, 16px);
}

/* 좌측 상단 검색 버튼을 공통 기준으로 사용해 우측 하단 버튼도 같은 크기로 맞춘다. */
.facilitySearchBtn,
#mapTypeTopBtn,
#myLocationBtn,
#roadviewBtn,
#rulerBtn {
  box-sizing: border-box;
  height: 32px;
  padding: 7px 12px;
  font-size: 13px;
  line-height: normal;
  border-radius: 8px;
}

/* 시설물 정보창(CustomOverlay/InfoWindow)보다 조작 버튼을 항상 위에 둔다.
   정보창이 열린 상태에서도 우측 하단 지도 조작 버튼은 가려지지 않는다. */
#mapTypeTopBtn,
#myLocationBtn,
#roadviewBtn,
#rulerBtn,
#highwayRouteSelect.mapRouteBtn {
  z-index: 2000;
  pointer-events: auto;
}

body.publicMapMode #equipmentPanel { grid-template-columns: 1fr; }
body.its2Mode > .facilityPanel,
body.publicMapMode > .facilityPanel {
  width: max-content; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px);
}

.managementAgencyLabel {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: max-content;
  padding: 5px 12px 6px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 6px;
  background: var(--management-color, #455a64);
  color: #ffffff;
  font-family: var(--app-font, 'S-Core Dream'), '맑은 고딕', sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 7px rgba(0,0,0,.38);
}
.managementAgencyHq, .managementAgencyBranch { display: block; }

/* 노선은 제목줄이 아니라 검색 바로 아래의 지도 버튼으로 연다. */
#highwayRouteSelect.mapRouteBtn {
  position: fixed; left: auto; right: clamp(8px, 2vw, 16px); top: auto;
  bottom: clamp(140px, 24dvh, 172px); z-index: 1300;
  appearance: none; border: 1px solid #4a4d58; background: rgba(34,36,43,.92);
  color: #e8e8ec; border-radius: 8px; width: max-content; min-width: 92px;
  height: 32px; padding: 7px 12px;
  font-size: 13px; line-height: normal; cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
/* 선택 버튼과 목록의 실제 명칭은 축약하거나 말줄임표로 숨기지 않는다. */
body.its2Mode #headerCenterControls button,
body.publicMapMode #headerCenterControls button,
.mapRouteBtn,
.highwayRouteName {
  max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap;
}
.highwayRouteItem { min-height: 32px; height: auto; }
.highwayRoutePanel { width: max-content; max-width: min(360px, calc(100vw - 16px)); }
.highwayRouteName { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  #highwayRouteSelect.mapRouteBtn { left: auto; right: clamp(8px, 2vw, 16px); top: auto; bottom: clamp(108px, 22dvh, 172px); }
  .highwayRouteItem { min-height: 40px; padding-top: 8px; padding-bottom: 8px; touch-action: manipulation; }
  body.publicMapMode #pageTitle { font-size: 14px; }
  body.publicMapMode #headerCenterControls { column-gap: 3px; }
  body.publicMapMode #headerCenterControls > #facilityBtn,
  body.publicMapMode #headerCenterControls > #equipmentBtn { min-width: 0; padding: 3px 6px; font-size: 11px; }
}

/* 좌측 하단 위치·노선 조작은 Kakao 축척 위에 고정한다. */
#myLocationBtn.mapLeftControl, #highwayRouteSelect.mapRouteBtn { position: fixed; left: 10px; right: auto; z-index: 2000; width: max-content; min-width: 92px; height: 32px; padding: 7px 12px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
#myLocationBtn.mapLeftControl { appearance: none; bottom: clamp(30px, 6dvh, 40px); border: 1px solid #4a4d58; background: rgba(34,36,43,.92); color: #e8e8ec; font-size: 13px; line-height: normal; cursor: pointer; white-space: nowrap; }
#highwayRouteSelect.mapRouteBtn { bottom: calc(clamp(30px, 6dvh, 40px) + 36px); }

/* 지도 조작부 최종 배치: 화면 폭에 따른 별도 레이아웃을 없애고 모든 기기에서
   제목 우측(시설·ITS·로드뷰·현재위치)과 지도 좌측(일반지도·시설검색 / 노선·거리·축척)을
   같은 순서로 사용한다. */
#topbar > h1 { flex: 0 0 auto; margin-right: auto; }
#topbar > #locStatus { display: none; }
#headerCenterControls {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  justify-content: flex-end;
  overflow: visible;
}
#topbar > #roadviewBtn,
#topbar > #myLocationBtn.mapLeftControl {
  position: static;
  inset: auto;
  display: inline-flex;
  flex: 0 0 auto;
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  height: 32px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 6px 10px;
  font-size: 13px;
  box-shadow: none;
  box-sizing: border-box;
}
#topbar > #roadviewBtn { border-left: 1px solid rgba(190,198,214,.55); }

/* 지도 좌측 상단: 일반지도(현재 지도 종류에 따라 스카이뷰로 바뀜) 다음 시설검색. */
#mapWrap > #mapTypeTopBtn,
#mapWrap > #skyToggleBtn {
  position: absolute;
  left: 10px;
  right: auto;
  top: 10px;
  bottom: auto;
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  height: 32px;
  z-index: 2000;
}
#mapWrap > #facilitySearchBtn {
  position: absolute;
  left: 10px;
  right: auto;
  top: 48px;
  bottom: auto;
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  height: 32px;
  z-index: 2000;
}

/* 지도 좌측 하단: 노선선택 → 거리재기 → 카카오 축척 순. 축척은 Kakao가 하단에
   그리는 기본 스케일 영역을 가리지 않도록 두 버튼을 그 위에만 배치한다. */
#mapWrap > #highwayRouteSelect.mapRouteBtn,
#mapWrap > #rulerBtn {
  position: absolute;
  left: 10px;
  right: auto;
  top: auto;
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  height: 32px;
  z-index: 2000;
  box-sizing: border-box;
}
#mapWrap > #rulerBtn { bottom: 42px; }
#mapWrap > #highwayRouteSelect.mapRouteBtn { bottom: 78px; }

/* 제목줄 항목 간격 */
body #topbar { column-gap: 6px; }

/* 지도 우측 상단 공통 텍스트 조작부. 버튼은 같은 폭·높이·정렬을 사용한다. */
body #mapWrap > .mapTopControls {
  position: absolute;
  top: 10px;
  left: auto;
  right: 10px;
  bottom: auto;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 4px;
  width: 76px;
  height: auto;
  transition: transform .25s ease;
  will-change: transform;
}
/* 좁은 화면에서는 우측 버튼 묶음 본체를 완전히 화면 밖으로 접고,
   별도 메뉴 펼치기 손잡이만 화면 안에 남긴다. */
@media (max-width: 700px) {
  body #mapWrap > .mapTopControls.controlsHidden {
    transform: translateX(calc(100% + 10px));
    pointer-events: none;
  }
body #mapWrap > .mapTopControls.controlsShown {
    transform: translateX(0);
    pointer-events: auto;
  }
  body #mapWrap > .mapTopControls.controlsShown.controlsOpening {
    pointer-events: none;
  }
  body #mapWrap > .mapTopControls.roadviewCompactSuppressed {
    display: none;
  }
}

/* 모바일 정보창 스택은 지도 안에서 끝까지 스크롤하되 지도 위 제목줄 영역으로는
   그려지지 않도록 지도 컨테이너 경계에서 잘라낸다. */
body #mapWrap { overflow: hidden; }
body #mapWrap > .mapTopControls > button {
  position: static;
  inset: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  min-width: 76px;
  max-width: 76px;
  height: 32px;
  margin: 0;
  padding: 0 4px;
  box-sizing: border-box;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
body #mapWrap > .mapTopControls > button[hidden] { display: none; }
body #mapWrap > .mapTopControls > .mapControlsPeekBtn {
  display: none;
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 54px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.38);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: rgba(12,14,18,.78);
  color: #fff;
  font: 700 22px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-indent: 0;
  letter-spacing: 0;
  cursor: pointer;
  pointer-events: auto;
}
@media (max-width: 700px) {
  body #mapWrap > .mapTopControls.controlsHidden > .mapControlsPeekBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body #mapWrap > .mapTopControls.controlsShown > .mapControlsPeekBtn,
  body #mapWrap > .mapTopControls.roadviewCompactSuppressed > .mapControlsPeekBtn { display: none; }
}
/* 3글자 버튼도 4글자 버튼과 같은 시각적 글자 폭을 갖도록 자간을 맞춘다. */
body #mapWrap > .mapTopControls > #myLocationBtn {
  letter-spacing: .33em;
  text-indent: .33em;
}
/* 영문 E·X가 한글보다 좁으므로 EX뷰는 3글자 한글 버튼과 같은 전체 글자 폭으로 보정한다. */
body #mapWrap > .mapTopControls > #roadviewBtn {
  letter-spacing: .6em;
  text-indent: .6em;
}
/* 시설검색과 노선선택은 같은 고정 드롭박스 디자인으로 버튼 바로 아래에 연다. */
body #searchPanel,
body #mapWrap > .facilitySearchPanel {
  position: fixed;
  z-index: 2200;
  box-sizing: border-box;
  overflow: hidden;
  padding: 8px;
  transform: none;
}
body #searchPanel {
  right: auto;
  bottom: auto;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body #searchPanel.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 시설검색 패널의 위치·크기만 담당한다. 외형은 ui_controls.css에서 관리한다. */
body #searchPanel .searchHead,
body #mapWrap > .facilitySearchPanel .facilitySearchHead { gap: 6px; min-height: 36px; }
body #searchPanel #searchInput,
body #mapWrap > .facilitySearchPanel .facilitySearchHead input {
  font-size: 15px;
}
body #searchPanel #searchInput::placeholder,
body #mapWrap > .facilitySearchPanel .facilitySearchHead input::placeholder {
  opacity: 1;
}
body #searchPanel #searchResults,
body #mapWrap > .facilitySearchPanel #facilitySearchResults { margin-top: 8px; padding-right: 3px; }
body #searchPanel .searchItem,
body #mapWrap > .facilitySearchPanel .facilitySearchResult { line-height: 1.2; }

@media (max-width: 700px) {
  body #mapWrap > .mapTopControls { gap: 3px; width: 68px; }
  body #mapWrap > .mapTopControls > button {
    width: 68px;
    min-width: 68px;
    max-width: 68px;
  }
}
@media (min-width: 701px) and (max-width: 1100px) {
  body #mapWrap > .mapTopControls { width: 72px; }
  body #mapWrap > .mapTopControls > button {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
  }
}

/* 제목과 조작 항목 자체는 축소·말줄임하지 않는다. 가용 폭이 부족하면 위 JS가
   시설 → ITS 순으로 칩을 드롭박스로 바꿔 한 줄 안에서 서로 겹치지 않게 한다. */
body.its2Mode #topbar > h1,
body.publicMapMode #topbar > h1 {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 도공지도 최종 표시 기준(2026-08-28): 정상 동작하던 제목줄 구조를 유지한다.
   제목·시설·활성 ITS 설비 칩은 간격을 두고 좌측에, 인증/활성 토글 ITS 버튼만
   우측 끝에 둔다. 기기명이 아니라 실제 가용 폭을 계산해 칩을 접는다. */
body.its2Mode #topbar,
body.publicMapMode #topbar {
  justify-content: flex-start;
  column-gap: clamp(12px, 1.5vw, 22px);
}
body.its2Mode #topbar > h1,
body.publicMapMode #topbar > h1 {
  margin-right: 0;
  flex: 0 0 auto;
}
body.its2Mode #headerCenterControls,
body.publicMapMode #headerCenterControls {
  flex: 0 1 auto;
  margin-left: 0;
  justify-content: flex-end;
  gap: clamp(10px, 1.2vw, 16px);
}
body.its2Mode #headerCenterControls > #facilityChips,
body.publicMapMode #headerCenterControls > #facilityChips,
body.its2Mode #topbar > #equipmentChips {
  justify-content: flex-end;
  column-gap: clamp(3px, .45vw, 7px);
}
body.its2Mode #headerCenterControls > #facilityChips,
body.publicMapMode #headerCenterControls > #facilityChips {
  max-width: none;
  overflow: visible;
}
/* 지사 표시 중 비활성화된 EX 칩에 비활성화 사유를 안내한다. */
#topbar #facilityChips > button[data-disabled-hint],
.facilityPanel label[data-disabled-hint] {
  position: relative;
  cursor: not-allowed;
}
#topbar #facilityChips > button[data-disabled-hint]:hover::after,
#topbar #facilityChips > button[data-disabled-hint].disabledHintVisible::after,
.facilityPanel label[data-disabled-hint]:hover::after,
.facilityPanel label[data-disabled-hint].disabledHintVisible::after {
  content: attr(data-disabled-hint);
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  z-index: 3100;
  transform: translateX(-50%);
  width: max-content;
  max-width: 180px;
  padding: 5px 8px;
  border: 1px solid #4b5563;
  border-radius: 5px;
  background: rgba(31, 41, 55, .96);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
}
body.its2Mode #topbar .facilityChip,
body.publicMapMode #topbar .facilityChip {
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  max-width: none;
  padding: 4px 6px;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-size: clamp(12px, .82vw, 14px);
}
body.its2Mode #headerCenterControls > #facilityBtn,
body.publicMapMode #headerCenterControls > #facilityBtn,
body.its2Mode #headerCenterControls > #milepostToggleBtn,
body.its2Mode #headerCenterControls > #managementToggleBtn,
body.publicMapMode #headerCenterControls > #milepostToggleBtn,
body.publicMapMode #headerCenterControls > #managementToggleBtn {
  width: max-content;
  min-width: 0;
  max-width: none;
  height: 28px;
  padding: 4px 7px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 14px;
}
body.its2Mode #topbar > #equipmentChips {
  order: 80;
  margin-left: clamp(12px, 1.5vw, 22px);
}
body.its2Mode #topbar > #equipmentSelectBtn {
  order: 81;
  flex: 0 0 auto;
  width: max-content;
  min-width: 56px;
  max-width: none;
  padding: 4px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
body.its2Mode #topbar > #equipmentBtn:not([hidden]),
body.publicMapMode #topbar > #equipmentBtn:not([hidden]) {
  display: inline-flex;
  order: 99;
  margin-left: auto;
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  padding: 4px 6px;
  box-sizing: border-box;
  border-radius: 999px;
  line-height: normal;
  align-items: center;
  justify-content: center;
}
body.its2Mode:not(.its2EquipmentDropdown) #topbar > #equipmentBtn:not([hidden]),
body.its2Mode.its2EquipmentDropdown #topbar > #equipmentBtn:not([hidden]),
body.its2Mode.itsEquipmentVisible:not(.its2EquipmentDropdown) #topbar > #equipmentBtn:not([hidden]),
body.its2Mode.itsEquipmentVisible.its2EquipmentDropdown #topbar > #equipmentBtn:not([hidden]) {
  display: inline-flex;
}
/* 제목줄 우측 ITS 토글도 설비 칩과 같은 캡슐형 모서리를 사용한다. */
body #topbar > #equipmentBtn:not([hidden]) {
  border-radius: 999px;
}

/* 시설은 칩과 드롭박스를 동시에 표시하지 않는다. */
body.its2Mode:not(.its2FacilityDropdown) #headerCenterControls > #facilityChips,
body.publicMapMode:not(.publicFacilityDropdown) #headerCenterControls > #facilityChips { display: flex; }
body.its2Mode:not(.its2FacilityDropdown) #headerCenterControls > #facilityBtn,
body.publicMapMode:not(.publicFacilityDropdown) #headerCenterControls > #facilityBtn { display: none; }
body.its2Mode.its2FacilityDropdown #headerCenterControls > #facilityChips,
body.publicMapMode.publicFacilityDropdown #headerCenterControls > #facilityChips { display: none; }
body.its2Mode.its2FacilityDropdown #headerCenterControls > #facilityBtn,
body.publicMapMode.publicFacilityDropdown #headerCenterControls > #facilityBtn { display: inline-flex; }

/* 인증 토글인 우측 ITS 버튼은 항상 남기고, 설비 칩만 공간이 부족할 때 접는다. */
body.its2Mode:not(.its2EquipmentDropdown) #topbar > #equipmentChips { display: flex; }
body.its2Mode.its2EquipmentDropdown #topbar > #equipmentChips,
body.publicMapMode #topbar > #equipmentChips { display: none; }
body.its2Mode.itsEquipmentVisible.its2EquipmentDropdown #topbar > #equipmentChips { display: none; }
body.its2Mode:not(.itsEquipmentVisible) #topbar > #equipmentChips,
body.its2Mode:not(.itsEquipmentVisible) #topbar > #equipmentSelectBtn,
body.publicMapMode #topbar > #equipmentSelectBtn { display: none; }
body.its2Mode.itsEquipmentVisible:not(.its2EquipmentDropdown) #topbar > #equipmentSelectBtn { display: none; }
body.its2Mode.itsEquipmentVisible.its2EquipmentDropdown #topbar > #equipmentSelectBtn { display: inline-flex; align-items: center; justify-content: center; }

body #mapWrap > .facilitySearchPanel { width: min(300px, 78vw); }
/* 760px 미만은 시설 드롭박스를 안전하게 유지한다. 760px 이상 구간은
   app.js의 인증 상태별 기준(1200px/760px)을 따른다. */
@media (max-width: 759px) {
  body.its2Mode #headerCenterControls > #facilityChips,
  body.publicMapMode #headerCenterControls > #facilityChips { display: none; }
  body.its2Mode #headerCenterControls > #facilityBtn,
  body.publicMapMode #headerCenterControls > #facilityBtn { display: inline-flex; }
  body #mapWrap > .facilitySearchPanel {
    width: min(360px, calc(100vw - 16px));
    right: auto;
  }
}

/* 열림 상태 규칙보다 뒤에서 닫힘 상태를 확정한다. */
.hidden { display:none; }