/* 기본 스타일 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans KR', 'Pretendard', Arial, sans-serif;
}

#map {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 100vh;
  display: block;
  position: relative;
}

.basic-marker {
  width: 40px;
  height: 40px;
  background: url('./images/blue-marker.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  transform: translate(-50%, -100%);
  -webkit-transform: translate(-50%, -100%); /* iOS 호환성 */
  z-index: 100;
  pointer-events: none;
  -webkit-backface-visibility: hidden; /* 애니메이션 깜빡임 방지 */
  touch-action: manipulation; /* 터치 반응성 향상 */
}

@keyframes bounce {
  0% { transform: translate(-50%, -100%) scale(1); }
  50% { transform: translate(-50%, -120%) scale(1.2); }
  100% { transform: translate(-50%, -100%) scale(1); }
}

@-webkit-keyframes bounce {
  0% { -webkit-transform: translate(-50%, -100%) scale(1); }
  50% { -webkit-transform: translate(-50%, -120%) scale(1.2); }
  100% { -webkit-transform: translate(-50%, -100%) scale(1); }
}

.basic-marker.bounce {
  animation: bounce 0.4s ease-in-out 2;
  -webkit-animation: bounce 0.4s ease-in-out 2;
}

:root{
  --title-shift: -30px;   /* 텍스트 전체를 얼마나 왼쪽으로 당길지 (음수: 왼쪽) */
  --wave-offset: -140px;  /* 파도 기준 위치(지금 보기에 맞는 값) */
}

.title-bar {
  position: fixed; /* absolute에서 fixed로 변경 */
  top: 10px;
  left: 5px;
  right: 5px;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px 16px;   /* 기존보다 줄임 */
  border-radius: 12px;
  display: flex;
  align-items: center;
  font-size: 24px;
  height: 40px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}



.title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 텍스트 스타일 조정 */
.title-bar span {
  text-shadow: none; /* 텍스트 그림자 제거 */
  -webkit-text-stroke: 0; /* 텍스트 외곽선 제거 */
  z-index: 3;
}

.title-bar img.warning-icon {
  width: 45px;
  height: 45px;
  margin-right: 53px;
  transition: transform 0.3s ease;
}

.title-bar:hover img.warning-icon {
  transform: scale(1.1);
}

.title-bar .title-text {
  display: flex;
  align-items: center;
  margin-left: var(--title-shift); /* ← 텍스트 전체 이동 */
}

.title-bar .disaster-text {
  position: relative;
  display: inline-block;
  padding: 0 5px;
  z-index: 2;
}

.title-bar .disaster-text::after {
  content: '';
  position: absolute;
  top: -50px;
  left: 0;
  /* 파도 원위치 유지: 기존 오프셋 - (텍스트 이동값의 반대) */
  transform: translateX(calc(var(--wave-offset) - var(--title-shift))) scaleX(-1);
  width: 240px;
  height: 129px;
  background: url('./images/wave.png') no-repeat center center;
  background-size: contain;
  opacity: 0.8;
  z-index: -1;
}

.title-bar span {
  text-shadow: none; /* 텍스트 그림자 제거 */
  -webkit-text-stroke: 0; /* 텍스트 외곽선 제거 */
  z-index: 3;
}

@media (max-width: 420px) {
  #sangdang-title {
    display: none;
  }
}

/* SEO용 제목 – 화면에는 안 보이지만 검색엔 인식 */
.seo-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}


.address-popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  padding: 15px;
  max-width: 300px;
}
.address-popup.active {
  display: block;
}
.address-content h3 {
  margin: 0 0 10px;
  font-size: 16px;
}
.address-content p {
  margin: 5px 0;
  font-size: 14px;
}
.address-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.address-buttons button {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.address-buttons button:first-child {
  background: #f0f0f0;
}
.address-buttons button:last-child {
  background: #007bff;
  color: #fff;
}

.weather-info {
  position: fixed; /* absolute에서 fixed로 변경 */
  top: 14px;
  right: 120px;
  z-index: 2100;
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  color: white;
}


.weather-info .weather-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: brightness(1.1) saturate(1.2);
}

.weather-info:hover .weather-icon {
  transform: scale(1.1);
}

.weather-info .separator {
  width: 2px;
  height: 20px;
  background: #ffffff;
  margin-left: 2px;
  margin-right: 6px;
}

.weather-info .temp-value {
  font-size: 18px;
  font-weight: 500;
  color: white;
}

.weather-popup {
  display: none;
  position: fixed;
  top: 210px;
  right: 10px;
  width: 180px;
  z-index: 2100;
  background: white;
  padding: 15px;
  font-size: 13px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.weather-popup.active {
  display: block;
  opacity: 1;
  visibility: visible;
}

.weather-popup h3 {
  margin: 0 0 15px;
  font-size: 15px;
  color: #2c3e50;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.weather-popup .close-btn {
  cursor: pointer;
  font-size: 24px;
  color: #333;
  transition: color 0.3s ease, transform 0.3s ease;
}

.weather-popup .close-btn:hover {
  color: #e74c3c;
  transform: rotate(90deg);
}

.weather-popup .weather-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(200, 200, 200, 0.2);
}

.weather-popup .weather-item:last-child {
  border-bottom: none;
}

.weather-popup .weather-item .label {
  font-weight: 600;
  color: #34495e;
}

.weather-popup .weather-item .value {
  color: #2980b9;
  font-weight: 600;
}

.weather-popup .weather-item .unit {
  color: #000;
  font-weight: 400;
  margin-left: 6px;
}

.weather-popup .wind-item .wind-values {
  display: flex;
  align-items: center;
  gap: 8px;
}

.weather-popup .wind-item .separator {
  width: 1px;
  height: 16px;
  background: #5a7f9a;
}

.map-icon-container {
  position: fixed; /* absolute에서 fixed로 변경 */
  top: 28px;
  right: 50px;
  z-index: 2200;
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.map-icon-container:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.map-icon-container img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.map-icon-container i {
  font-size: 24px;
  color: white;  /* 지도 스타일과 대비 좋게 */
}


.map-dropdown {
  position: absolute;
  top: 80px;
  right: 10px;
  z-index: 2000;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 245, 250, 0.95));
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px;
  width: 120px;
  font-size: 14px;
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  border: 1px solid rgba(200, 200, 200, 0.3);
}

.map-dropdown.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  display: block;
}

.map-dropdown button {
  display: block;
  width: 100%;
  padding: 10px 15px;
  border: none;
  background: none;
  text-align: center;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.map-dropdown button:hover {
  background: rgba(52, 152, 219, 0.1);
  transform: scale(1.02);
}

.map-dropdown button.active {
  font-weight: 600;
  color: #2980b9;
  background: rgba(52, 152, 219, 0.2);
}


/* 로드뷰 닫기 버튼 스타일 */
.roadview-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background: #e0e0e0;         /* 연한 회색 배경 */
  color: #333;                 /* 진한 회색 아이콘 */
  font-size: 24px;
  border: none;
  border-radius: 50%;          /* 동그라미 */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
  z-index: 30000;
  pointer-events: auto;
}

.roadview-close-btn:hover {
  background: #bbbbbb;         /* 더 진한 회색 */
  color: #d32f2f;              /* 호버시 붉은 계열로 아이콘 강조 (원하면 #333 유지해도 됨) */
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.17);
}

/* 주소 팝업 버튼 비활성화 스타일 */
.address-buttons button:disabled {
  background: #cccccc; /* 회색 배경 */
  color: #666666; /* 어두운 회색 텍스트 */
  cursor: not-allowed; /* 클릭 불가 커서 */
  opacity: 0.7; /* 약간 투명하게 */
}


.risk-filter-toggle {
  position: fixed;
  bottom: 103px;
  left: 10px;
  z-index: 90;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  border: 6px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.risk-filter-toggle:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.risk-filter-toggle img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: saturate(1.5) brightness(1.1) contrast(1.2);
  transition: filter 0.3s ease;
}

.risk-filter-toggle:hover img {
  filter: saturate(1.8) brightness(1.15) contrast(1.2);
}

.disaster-type-toggle {
  position: fixed;
  bottom: 30px;
  left: 10px;
  z-index: 90;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  border: 6px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.disaster-type-toggle:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.disaster-type-toggle img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: saturate(1.5) brightness(1.1) contrast(1.2);
  transition: filter 0.3s ease;
}

.disaster-type-toggle:hover img {
  filter: saturate(1.8) brightness(1.15) contrast(1.2);
}

.risk-filter-popup {
  position: fixed;
  bottom: 170px;
  left: 10px;
  z-index: 90;
  background: rgba(255, 255, 255, 0.95);
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  width: 200px;
  font-size: 14px;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.risk-filter-popup.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.risk-filter-popup h3 {
  margin: 0 0 15px;
  font-size: 18px;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.risk-filter-popup .close-btn {
  cursor: pointer;
  font-size: 24px;
  color: #333;
  transition: color 0.3s ease;
}

.risk-filter-popup .close-btn:hover {
  color: #e74c3c;
}

.risk-filter-popup .traffic-light-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: linear-gradient(90deg, #4a4a4a, #2a2a2a);
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.2);
  width: 100%;
  box-sizing: border-box;
}

.risk-filter-popup .traffic-light-filter .label {
  font-size: 14px;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  white-space: nowrap;
}

.risk-filter-popup .traffic-light-filter .traffic-light {
  display: flex;
  align-items: center;
  gap: 4px;
}

.risk-filter-popup .risk-indicator {
  width: 18px;
  height: 18px;
  border: 1px solid #222;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.risk-filter-popup .risk-indicator:hover {
  transform: scale(1.2);
}

.risk-filter-popup .risk-indicator.red:not(.inactive) {
  background-color: #ff0000;
  box-shadow: 0 0 6px rgba(255,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.3);
}

.risk-filter-popup .risk-indicator.orange:not(.inactive) {
  background-color: #ffa500;
  box-shadow: 0 0 6px rgba(255,165,0,0.8), inset 0 1px 1px rgba(255,255,255,0.3);
}

.risk-filter-popup .risk-indicator.green:not(.inactive) {
  background-color: #00ff00;
  box-shadow: 0 0 6px rgba(0,255,0,0.8), inset 0 1px 1px rgba(255,255,255,0.3);
}

.risk-filter-popup .risk-indicator.inactive {
  background-color: #555;
  box-shadow: none;
}

.disaster-type-popup {
  position: fixed;
  bottom: 100px;
  left: 10px;
  z-index: 90;
  background: rgba(255, 255, 255, 0.95);
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  width: 300px;
  font-size: 15px;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.disaster-type-popup.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.disaster-type-popup h3 {
  margin: 0 0 15px;
  font-size: 20px;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.disaster-type-popup .close-btn {
  cursor: pointer;
  font-size: 24px;
  color: #333;
  transition: color 0.3s ease;
}

.disaster-type-popup .close-btn:hover {
  color: #e74c3c;
}

.disaster-type-popup .filter-toggle {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(90deg, #d0d0d0, #c0c0c0);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  margin-bottom: 8px;
  position: relative;
}

.disaster-type-popup .filter-toggle.active {
  background: linear-gradient(90deg, #4a4a4a, #3a3a3a);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.disaster-type-popup .filter-toggle:hover {
  transform: scale(1.05);
}

.disaster-type-popup .filter-toggle .content-group {
  display: flex;
  align-items: center;
  gap: 10px; /* 체크박스와 텍스트 간격 조정 */
}

 .filter-toggle img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: grayscale(100%) opacity(0.6);
}

.disaster-type-popup .filter-toggle.active img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.1);
}

.disaster-type-popup .filter-toggle .title {
  font-size: 16px;
  font-weight: 700;
  color: #555;
  transition: color 0.3s ease;
  margin-left: 10px;
}

.disaster-type-popup .filter-toggle.active .title {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.disaster-type-popup .filter-toggle .title .subtitle {
  font-size: 14px;
  font-weight: 400;
  display: block;
  margin-top: 2px;
  color: #777;
}

.disaster-type-popup .filter-toggle.active .title .subtitle {
  color: #e0e0e0;
}

.disaster-type-popup .filter-toggle::after {
  content: '☐';
  font-size: 20px;
  position: absolute;
  right: 12px;
  transition: content 0.3s ease, color 0.3s ease;
}

.disaster-type-popup .filter-toggle.active::after {
  content:☑️';
  color: #ffffff;
}


/* 커스텀 인포윈도우 스타일 */
.custom-info-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 99999;
  width: 95vw;
  max-width: 550px;
  max-height: 90vh;
  background: linear-gradient(135deg, #fafbfc 70%, #eceef1 100%);
  border-radius: 14px;
  border: 1.5px solid #d3d6de;
  box-shadow:
    0 4px 24px 0 rgba(80,90,130,0.10),
    0 1.5px 0 0 #f3f3f3 inset,
    0 0.5px 1.5px 0 #dee4ea;
  padding: 20px 15px 15px 15px;
  font-family: 'Arial', sans-serif;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #bbb #f0f0f0;
  transition: transform 0.2s ease-in-out;
  display: none; /* 초기에는 숨김 */
}

.custom-info-window::-webkit-scrollbar {
  width: 7px;
  background: transparent;
}
.custom-info-window::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
  opacity: 0.8;
}

.custom-info-window.active {
  display: block;
}

.custom-info-window:hover {
  transform: translate(-50%, -50%) scale(1);
}

.custom-info-window h3 {
  margin: 5px 0 25px 0;
  font-size: 24px;
  color: #333;
  font-weight: 600;
}

.custom-info-window .info-item {
  margin: 10px 0;
  padding-bottom: 7px;
  border-bottom: 1px solid #ebedf3;
  font-size: 16px;
  color: #444;
  display: flex;
  align-items: center;
  gap: 10px;
}

.custom-info-window .info-item:last-of-type {
  border-bottom: none;  /* 마지막 항목은 선 X */
  padding-bottom: 0;
}

.custom-info-window .info-item strong {
  color: #303642;
  font-weight: 600;
  display: inline-block;
  width: 80px;
  min-width: 110px;  /* 기존 74px → 110px로 확대 */
  white-space: nowrap; /* 항상 한 줄 */
}

.custom-info-window hr {
  border: 0;
  border-top: 1.5px solid #dee1e9;
  margin: 15px 0;
}


.custom-info-window .type-item {
  justify-content: flex-start !important;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding-left: 0 !important;
}

#info-type-text {
  margin-left: -5px;
  font-size: 15px;    /* 기존보다 1~2pt 작게 */
  font-weight: 400;   /* 보통 */
  color: #444;        /* 어둡고 덜 진함 */
}


.info-item.type-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
#info-type-icon {
  border-radius: 6px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  background: #f7faff;
}



/* 새로운 요소: 특이사항 수정 텍스트 영역 */
.custom-info-window textarea {
  width: 100%;
  height: 60px;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 16px;
  color: #555;
  resize: vertical; /* 세로 크기 조정만 가능 */
  transition: border-color 0.2s ease;
}

.custom-info-window textarea:focus {
  border-color: #007bff;
  outline: none;
}

/* 새로운 요소: 사진 업로드 미리보기 */
.custom-info-window .edit-photo-preview {
  margin: 10px 0;
  text-align: center;
  width: 100%;
}

.custom-info-window .edit-photo-preview img {
  width: 100%;
  height: auto;
  max-height: 400px; /* 크기 증가 */
  max-width: 100%; /* 반응형 유지 */
  object-fit: contain;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.custom-info-window .edit-photo-preview img:hover {
  transform: scale(1.05);
}

/* 기존 .info-photo와 통합 (중복 방지) */
.custom-info-window .info-photo {
  margin: 10px 0;
  text-align: center;
  width: 100%;
}

.custom-info-window .info-photo img {
  width: 100%;
  height: auto;
  max-height: 400px; /* 크기 증가 */
  max-width: 100%; /* 반응형 유지 */
  object-fit: contain;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.custom-info-window .info-photo img:hover {
  transform: scale(1.05);
}

/* 버튼 스타일 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  background: linear-gradient(135deg, #f8f9fa 60%, #e9ecef 100%);
  color: #444;
  box-shadow: 0 2px 7px rgba(70,80,90,0.09), 0 1px 2px rgba(120,120,120,0.08);
  transition: box-shadow 0.18s, background 0.18s, transform 0.12s;
  margin: 2px 5px 2px 0;
  cursor: pointer;
  gap: 4px;
}
.btn:active {
  transform: scale(0.97);
}
.btn .fa {
  font-size: 16px;
  margin-right: 3px;
  vertical-align: middle;
}
.btn:hover, .btn:focus {
  background: linear-gradient(135deg, #e2e6ea, #f1f3f5);
  color: #222;
  box-shadow: 0 2px 12px rgba(70,70,70,0.16);
  transform: translateY(-1px) scale(1.05);
}
/* call-btn만 살짝 블루그레이톤 강조 */
.call-btn {
  background: linear-gradient(120deg, #e9f3fc 60%, #dde6ee 100%);
  color: #3471c6;
  border: 1px solid #c3d1e9;
}
.call-btn:hover, .call-btn:focus {
  background: linear-gradient(120deg, #d1e4fa 60%, #cfe0f3 100%);
  color: #1e355e;
  border: 1.5px solid #b2c9e4;
}
/* edit-btn: 중립회색 */
.edit-btn {
  background: linear-gradient(120deg, #f2f2f4 60%, #e8e9eb 100%);
  color: #4d4d4d;
  border: 1px solid #cccccc;
}
.edit-btn:hover, .edit-btn:focus {
  background: linear-gradient(120deg, #e5e7ea 60%, #d4d6d9 100%);
  color: #1e355e;
  border: 1.5px solid #aaaaaa;
}

/* 아이콘 */
.btn .fa, .btn .fa-phone, .btn .fa-mobile-alt {
  margin-right: 4px;
  font-size: 18px;
  vertical-align: middle;
}
#office-call {
  background: linear-gradient(120deg, #e3ebf3 70%, #c5d0dd 100%);
  color: #4172a3;
  border: 1px solid #b4c4d9;
  box-shadow: 0 2px 7px rgba(80,110,180,0.12), 0 1px 2px rgba(120,120,120,0.08);
}
#office-call:hover, #office-call:focus {
  background: linear-gradient(120deg, #cde1f4 60%, #b2c5dc 100%);
  color: #265080;
  border: 1.5px solid #90b0d3;
}

/* 휴대전화(담당/순찰대장): 연초록 계열 */
#contact-call, #vm-call {
  background: linear-gradient(120deg, #e6f4ec 60%, #c3e2d5 100%);
  color: #1e8357;
  border: 1px solid #abd8c3;
  box-shadow: 0 2px 8px rgba(80,190,120,0.10), 0 1px 2px rgba(100,180,140,0.07);
}
#contact-call:hover, #contact-call:focus, #vm-call:hover, #vm-call:focus {
  background: linear-gradient(120deg, #c2ead2 60%, #a1d9be 100%);
  color: #14663e;
  border: 1.5px solid #80c4a2;
}

/* 버튼 크기·정렬 개선 및 아이콘 전용 스타일 */
.btn.edit-btn, .btn.close-btn, .btn.update-btn, .btn.delete-btn {
  padding: 0 10px;
  min-width: 30px;
  min-height: 30px;
  font-size: 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f3f5f8, #e0e2e5 100%);
  color: #576579;
  border: 1px solid #dbe0e6;
  margin-right: 6px;
  box-shadow: 0 2px 7px rgba(90,90,100,0.07);
  transition: background 0.18s, color 0.18s, box-shadow 0.16s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn.edit-btn:hover, .btn.update-btn:hover {
  background: linear-gradient(135deg, #e2f7f0, #bedad1 100%);
  color: #179070;
  border: 1.5px solid #80c4a2;
}

.btn.close-btn {
  background: linear-gradient(135deg, #faeeee 60%, #e7d6d6 100%);
  color: #9c3434;
  border: 1px solid #efb3b3;
}
.btn.close-btn:hover {
  background: linear-gradient(135deg, #ffebeb 60%, #f6cccc 100%);
  color: #b92e2e;
  border: 1.5px solid #dc7e7e;
}

.btn.delete-btn {
  background: linear-gradient(135deg, #fce7e7, #f6cccc 100%);
  color: #d66757;
  border: 1px solid #e6b1b1;
}
.btn.delete-btn:hover {
  background: linear-gradient(135deg, #ffdede, #ffb1b1 100%);
  color: #c23737;
  border: 1.5px solid #c88b8b;
}

.btn i.fa {
  font-size: 18px;
  margin: 0; /* 아이콘만 쓸 때 여백 제거 */
  vertical-align: middle;
}




/* 기존 요소 유지 */
.custom-info-window hr {
  border: 0;
  border-top: 1px solid #e0e0e0;
  margin: 10px 0;
}

.custom-info-window .risk-level {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.custom-info-window .traffic-light {
  background: linear-gradient(90deg, #4a4a4a, #2a2a2a);
  border: 2px solid #333;
  border-radius: 12px;
  padding: 6px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: -10px !important;
  gap: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

.custom-info-window .risk-level:hover .traffic-light {
  transform: scale(1.05);
}


.custom-info-window .risk-text {
  font-size: 12px;
  font-weight: 600;
}

.custom-info-window .risk-text.red {
  color: #ff0000;
}

.custom-info-window .risk-text.orange {
  color: #ffa500;
}

.custom-info-window .risk-text.green {
  color: #00ff00;
}

/* 추가: 라벨 스타일 (새로운 입력 필드용) */
.custom-info-window label {
  display: block;
  margin: 8px 0 4px;
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

/* 추가: 파일 입력 스타일 */
.custom-info-window input[type="file"] {
  width: 100%;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
  color: #555;
}


/* ====== [수정 비밀번호 입력 팝업 스타일 개선] ====== */
.edit-password-popup,
#editPasswordPopup {
  max-width: 340px;
  padding: 22px 18px 16px 18px;
  border-radius: 12px;
  background: #232435 !important;
  color: #fff;
  box-shadow: 0 6px 32px rgba(30,40,60,0.16), 0 1.5px 0 #1e2230 inset;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2200;
  transform: translate(-50%, -50%);
  display: none;
}

.edit-password-popup h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 13px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.password-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

#edit-password-input,
.edit-password-popup input[type="password"],
#editPasswordPopup textarea,
.edit-password-popup textarea {
  font-size: 16px;
  height: 40px;
  min-width: 0;
  padding: 0 14px;
  border-radius: 6px;
  border: 1.5px solid #b5bed2;
  background: #f4f6fa !important;
  box-sizing: border-box;
  box-shadow: 0 2px 7px rgba(70,80,90,0.04);
  color: #222 !important;
  transition: border 0.18s, background 0.18s;
  flex: 1 1 auto;
  margin: 0;
}

#editPasswordPopup input:focus,
.edit-password-popup input:focus,
#editPasswordPopup textarea:focus,
.edit-password-popup textarea:focus {
  border-color: #5b83d9;
  background: #fff !important;
  color: #1a1a1a;
  outline: none;
}

.confirm-edit-password-btn {
  font-size: 15px;
  height: 40px;
  min-width: 70px;
  padding: 0 18px;
  border-radius: 6px;
  margin: 0;
  background: linear-gradient(90deg, #1685e7 70%, #2176ed 100%);
  color: #fff;
  font-weight: 600;
  border: none;
  margin-left: 5px;
  box-shadow: 0 1px 5px rgba(50,80,120,0.08);
  cursor: pointer;
  transition: background 0.18s;
  display: inline-block;
}

.confirm-edit-password-btn:hover {
  background: linear-gradient(90deg, #1559b3 70%, #2176ed 100%);
}

.edit-password-popup .close-btn {
  cursor: pointer;
  font-size: 24px;
  color: #bbb;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 5px;
  transition: background 0.2s, color 0.2s;
}

.edit-password-popup .close-btn:hover {
  background: #f2eaea;
  color: #d71b1b;
}



.traffic-light-marker {
  background: linear-gradient(90deg, #4a4a4a, #2a2a2a);
  border: 1px solid #333;
  border-radius: 8px;
  padding: 5px 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.2);
  cursor: pointer;
  z-index: 5; /* 마커보다 낮은 값으로 설정 */
}

.risk-indicator {
  width: 14px;
  height: 14px;
  margin: 0 3px;
  border-radius: 50%;
  border: 1px solid #222;
  background-color: #555;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.traffic-light-marker .risk-indicator {
  width: 10px;
  height: 10px;
  border: 1px solid #222;
  cursor: default;
}

.risk-indicator.red.active {
  background-color: #ff0000;
  box-shadow: 0 0 8px rgba(255,0,0,0.8), inset 0 1px 2px rgba(255,255,255,0.3);
}

.risk-indicator.orange.active {
  background-color: #ffa500;
  box-shadow: 0 0 8px rgba(255,165,0,0.8), inset 0 1px 2px rgba(255,255,255,0.3);
}

.risk-indicator.green.active {
  background-color: #00ff00;
  box-shadow: 0 0 8px rgba(0,255,0,0.8), inset 0 1px 2px rgba(255,255,255,0.3);
}

.traffic-light-marker .risk-indicator.red.active {
  box-shadow: 0 0 6px rgba(255,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.3);
}

.traffic-light-marker .risk-indicator.orange.active {
  box-shadow: 0 0 6px rgba(255,165,0,0.8), inset 0 1px 1px rgba(255,255,255,0.3);
}

.traffic-light-marker .risk-indicator.green.active {
  box-shadow: 0 0 6px rgba(0,255,0,0.8), inset 0 1px 1px rgba(255,255,255,0.3);
}

.risk-overlay {
  display: none;
}


.risk-label {
  margin-left: 15px;
  font-weight: bold;
  font-size: 16px;
  vertical-align: middle;
}
.risk-label.red { color: #ff0000; }
.risk-label.orange { color: #ffa500; }
.risk-label.green { color: #00cc00; }
.traffic-light-inner {
  display: flex;
  align-items: center;
  gap: 3px;
}



.search-popup, .bulk-sms-popup, .add-location-form {
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  border: 1px solid rgba(200, 200, 200, 0.3);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
}

.search-popup {
  padding: 15px;
  bottom: 220px;
  right: 10px;
  width: 400px;
  max-width: 90%;
}

.bulk-sms-popup {
  padding: 15px;
  bottom: 150px;
  right: 10px;
  width: 400px;
  max-width: 90%;
}

.add-location-form {
  padding: 25px;
  bottom: 80px;
  right: 10px;
  width: 500px;
  min-width: 400px;
  max-width: 70vw;
  max-height: 700px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3498db #e0e0e0;
  font-size: 18px;
  box-sizing: border-box;
}

.search-popup.active, .bulk-sms-popup.active, .add-location-form.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}


.add-location-form input.error,
.add-location-form select.error {
  border-color: #e74c3c;
  box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}
.add-location-form .error-message {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 5px;
  display: block;
}



.add-location-form::-webkit-scrollbar {
  width: 8px;
}

.add-location-form::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-radius: 4px;
}

.add-location-form::-webkit-scrollbar-thumb {
  background: #3498db;
  border-radius: 4px;
}

.search-popup h3, .bulk-sms-popup h3, .add-location-form h3 {
  margin: 0 0 15px;
  font-size: 20px;
  color: #fff;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-popup .close-btn, .bulk-sms-popup .close-btn, .add-location-form .close-btn {
  cursor: pointer;
  font-size: 24px;
  color: #fff;
  transition: color 0.3s ease, transform 0.3s ease;
}

.search-popup .close-btn:hover, .bulk-sms-popup .close-btn:hover, .add-location-form .close-btn:hover {
  color: #e74c3c;
  transform: rotate(90deg);
}

.search-item, .sms-item {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}

.search-item input, .sms-item input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  flex: 1;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-item input:focus, .sms-item input:focus {
  border-color: #3498db;
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
  outline: none;
}

.search-item button, .sms-item button {
  padding: 8px 16px;
  background: linear-gradient(90deg, #3498db, #2980b9);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.2s ease;
}

.search-item button:hover, .sms-item button:hover {
  background: linear-gradient(90deg, #2980b9, #1f6391);
  transform: scale(1.05);
}

.add-location-form label {
  display: block;
  margin: 10px 0 5px;
  font-weight: 600;
  font-size: 18px;
  color: #fff;
}

.add-location-form input,
.add-location-form select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
}

.add-location-form button {
  width: 100%;
  padding: 10px;
  background: #3498db;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
  font-size: 18px;
  transition: background 0.3s ease;
}

.add-location-form button:hover {
  background: #2980b9;
}

.add-location-form .error-message {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 5px;
  display: none;
}

.add-location-form .photo-preview {
  margin-top: 10px;
  width: 100%;
  max-width: 500px; /* 미리보기 최대 너비 */
  max-height: 200px; /* 미리보기 최대 높이 */
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  text-align: center;
}

.add-location-form .photo-preview img {
  width: 100%;
  height: auto;
  max-height: 200px; /* 이미지 높이 제한 */
  object-fit: contain; /* 비율 유지 */
  border-radius: 4px;
}

.search-toggle, .bulk-sms-toggle, .add-location-toggle {
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
  border: 3px solid #ffffff;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.search-toggle:hover, .bulk-sms-toggle:hover, .add-location-toggle:hover {
  background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
  border-color: #ffd700;
  box-shadow: 0 6px 16px rgba(255, 255, 255, 0.5), inset 0 2px 6px rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.search-toggle {
  bottom: 170px;
  right: 10px;
}

.bulk-sms-toggle {
  bottom: 100px;
  right: 10px;
}

.add-location-toggle {
  bottom: 30px;
  right: 10px;
  font-size: 38px;
  color: #ffffff;
}

.search-toggle img, .bulk-sms-toggle img {
  filter: brightness(1.5);
  transition: transform 0.3s ease;
}

.search-toggle:hover img, .bulk-sms-toggle:hover img {
  transform: scale(1.2);
}

.search-toggle img {
  width: 60px;
  height: 60px;
}

.bulk-sms-toggle img {
  width: 30px;
  height: 30px;
}

.add-location-toggle:hover {
  background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
}

.search-popup h3, .bulk-sms-popup h3 {
  margin: 0 0 15px;
  font-size: 20px;
  color: #ffffff;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.search-item, .sms-item {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  align-items: center;
}
.search-item input, .sms-item input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  flex: 1;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-item input:focus, .sms-item input:focus {
  border-color: #3498db;
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
  outline: none;
}

.search-item button, .sms-item button {
  padding: 10px 20px;
  background: linear-gradient(90deg, #3498db, #2980b9);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.2s ease;
}

.search-item button:hover, .sms-item button:hover {
  background: linear-gradient(90deg, #2980b9, #1f6391);
  transform: scale(1.05);
}

.close-btn {
  cursor: pointer;
  float: right;
  font-size: 20px;
}



.stats-toggle {
  position: fixed;
  bottom: 175px;
  left: 10px;
  z-index: 90;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  border: 6px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.stats-toggle:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.stats-toggle img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: saturate(1.5) brightness(1.1) contrast(1.2);
  transition: filter 0.3s ease;
}

.stats-toggle:hover img {
  filter: saturate(1.8) brightness(1.15) contrast(1.2);
}

.stats-popup {
  position: fixed;
  bottom: 250px; /* add-location-toggle 바로 위로 조정 */
  left: 10px;
  z-index: 1000;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 245, 250, 0.95));
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 540px;
  min-width: 450px;
  max-width: 80vw;
  max-height: 580px; /* 높이 증가로 스크롤바 최소화 */
  overflow-x: hidden;
  overflow-y: auto;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
  border: 1px solid rgba(200, 200, 200, 0.3);
  box-sizing: border-box;
}

.stats-popup.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.stats-popup h3 {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  color: #2c3e50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.5px;
}

.stats-popup .close-btn {
  cursor: pointer;
  font-size: 26px;
  color: #34495e;
  transition: color 0.3s ease, transform 0.3s ease;
}

.stats-popup .close-btn:hover {
  color: #e74c3c;
  transform: rotate(90deg);
}

.stats-popup .stats-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 20px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stats-popup .stats-table th,
.stats-popup .stats-table td {
  padding: 14px;
  text-align: center;
  border-bottom: 1px solid rgba(200, 200, 200, 0.3);
  transition: background 0.3s ease;
}

.stats-popup .stats-table th {
  background: #3f4a56;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stats-popup .stats-table td {
  color: #34495e;
  font-size: 15px;
}

.stats-popup .stats-table tr:hover td {
  background: rgba(52, 152, 219, 0.1);
}

.stats-table .type-cell,
.stats-table .risk-cell,
.stats-table .total-cell,
.stats-table .total-type-cell,
.stats-table .grand-total-cell {
  cursor: pointer;
  transition: background 0.3s ease;
}

.stats-table .type-cell:hover,
.stats-table .risk-cell:hover,
.stats-table .total-cell:hover,
.stats-table .total-type-cell:hover,
.stats-table .grand-total-cell:hover {
  background: rgba(52, 152, 219, 0.2);
}

.stats-table td:nth-child(2) {
  color: #e74c3c;
}

.stats-table th:first-child,
.stats-table td:first-child {
  font-weight: 700;
  color: #2c3e50;
}

.stats-table td:first-child {
  color: #2c3e50 !important;
}

.stats-table td:last-child {
  font-weight: 700;
  color: #2980b9;
}

.stats-table tr.total-row {
  background: linear-gradient(90deg, #ecf0f1, #f5f6fa);
  font-weight: 700;
}

.stats-table tr.total-row td {
  border-top: 2px solid #3f4a56;
  color: #2c3e50;
}

.stats-table tr.total-row td:first-child {
  text-align: center;
}

.stats-popup canvas {
  max-width: 100%;
  height: 220px;
  background: #ffffff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}


/* 기존 styles.css 끝에 추가 */
.custom-info-window textarea {
  width: 100%;
  height: 60px;
  resize: vertical;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  font-size: 14px;
  margin-top: 5px;
}

.custom-info-window input[type="file"] {
  margin-top: 10px;
  font-size: 14px;
}

.custom-info-window button {
  margin-top: 10px;
  padding: 8px 12px;
  background: #3498db;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.custom-info-window button:hover {
  background: #2980b9;
}

.custom-info-window .info-photo img {
  max-width: 100px;
  margin-top: 10px;
  border-radius: 4px;
}


.edit-info-popup {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  max-width: 90vw;
  background: rgba(20, 20, 22, 0.8); /* 더 어두운 글로시 */
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15);
  backdrop-filter: blur(8px) saturate(180%);
  z-index: 20002;
  padding: 26px 20px 22px 20px;
  color: #fff;
  border: 1px solid rgba(200, 200, 200, 0.08);
  overflow-y: auto;
  max-height: 82vh;
  transition: box-shadow 0.2s;
}
.edit-info-popup h3, .edit-info-popup label {
  color: #fff !important;
  font-weight: 600;
  margin-bottom: 6px;
}
.edit-info-popup input,
.edit-info-popup textarea,
.edit-info-popup select {
  width: 100%;
  margin-bottom: 12px;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  background: rgba(255,255,255,0.13);
  color: #f6f7f9;
  outline: none;
  box-shadow: 0 1.5px 3px rgba(0,0,0,0.03);
  transition: background 0.15s;
}
.edit-info-popup input:focus,
.edit-info-popup textarea:focus,
.edit-info-popup select:focus {
  background: rgba(255,255,255,0.20);
}

.edit-info-popup .error-message {
  color: #ffd9d9;
  font-weight: 600;
  margin: 10px 0 0 0;
  text-align: left;
}
.edit-info-popup::-webkit-scrollbar {
  width: 8px;
}
.edit-info-popup::-webkit-scrollbar-thumb {
  background: rgba(80,80,90,0.3);
  border-radius: 6px;
}

.edit-popup-btns {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}

/* 버튼 예시 스타일 (필요시) */
.edit-popup-btns .btn {
  min-width: 100px;
  padding: 10px 18px;
  font-size: 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.update-btn {
  background: linear-gradient(90deg, #37e2d5, #4a90e2);
  color: #fff;
  font-weight: bold;
  border: none;
}

.delete-btn {
  background: linear-gradient(90deg, #e96b6b, #ad2323);
  color: #fff;
  font-weight: bold;
  border: none;
}

/* 클러스터 원 기본 크기/입체감 변경 */
div.cluster, div[class^="cluster"] {
  width: 56px !important;
  height: 56px !important;
  line-height: 56px !important;
  font-size: 24px !important;
  font-weight: bold !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #287aff 60%, #00d2ff 100%) !important;
  color: #fff !important;
  border: 3px solid #225699 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22), 0 2px 4px rgba(255,255,255,0.12) inset !important;
  text-shadow: 0 4px 8px rgba(0,0,0,0.22), 0 1px 2px #0073c9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.96 !important;
  transition: transform 0.22s, box-shadow 0.22s !important;
  z-index: 2000 !important;
}
div.cluster:hover {
  transform: scale(1.12);
  box-shadow: 0 16px 28px rgba(0,0,0,0.30), 0 4px 8px rgba(255,255,255,0.18) inset;
  background: linear-gradient(120deg, #00d2ff 60%, #287aff 100%) !important;
}

/* 모바일 반응형 스타일 */
@media screen and (max-width: 768px) {

  .edit-info-popup {
    width: 72vw;
    max-width: 72vw;
    padding: 14px 7vw;
  }

.basic-marker {
    width: 24px;
    height: 24px;
  }

  .title-bar {
    position: fixed;
    left: 4px;
    right: 4px;
    font-size: 16px;
    padding: 5px 7px;
    height: 35px;
    z-index: 2000;
  }

  .title-bar .warning-icon {
    width: 15px;
    height: 15px;
    margin-right: 1px;
  }

  .title-text {
    flex-wrap: wrap;
  }

.title-icons {
  display: flex;
  gap: 16px;
  font-size: 20px;
}

.title-icons i {
  cursor: pointer;
  transition: color 0.3s;
}

.title-icons i:hover {
  color: #ffd700;
}

.disaster-text {
  color: #ff0000;
}


  .title-bar img.warning-icon {
    width: 28px;
    height: 28px;
    margin-right: 2px;
  }

.title-bar .disaster-text::after {
  content: '';
  position: absolute;
  top: -50px;
  left: -160px;
  width: 0.1px;
  height: 0.1px;
  background: url('./images/wave.png') no-repeat center center;
  background-size: contain;
  transform: scaleX(-1);
  opacity: 0.8;
  z-index: -1;
}


  .title-bar span {
    -webkit-text-stroke: 0.2px #fff;
  }
  .title-bar:hover,
  .title-bar:hover img.warning-icon {
    transform: none;
  }
  .title-bar:active {
    transform: scale(0.95);
  }

  .weather-info {
    position: fixed;
    top: 10px;
    right: 40px;
    padding: 4px 8px;
    font-size: 13px;
    height: 36px;
    min-width: 80px;
    touch-action: manipulation;
    color: white;
    z-index: 2100;
  }

  .weather-info .weather-icon {
    width: 30px;
    height: 30px;
  }

  .weather-info .temp-value {
    font-size: 13px;
    margin-right: -3px;
  }

.weather-info .separator {
  width: 2px;
  height: 15px;
  background: #ffffff;
  margin-left: -1px;
  margin-right: 2px;
}

  .weather-info:hover {
    transform: none;
  }
  .weather-info:active {
    transform: scale(0.95);
  }

.weather-popup {
  display: none; /* 추가 */
  position: fixed;
  top: 65px;
  right: 50px; /* or 20px 등 가시적인 위치로 */
  z-index: 1500;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  }

.weather-popup.active {
  display: block !important;
  opacity: 1;
  transform: translateY(0);
}

  .weather-popup h3 {
    font-size: 16px;
    margin: 0 0 8px;
  }
  .weather-popup .weather-item {
    padding: 4px 0;
  }
  .weather-popup::-webkit-scrollbar {
    width: 5px;
  }
  .weather-popup::-webkit-scrollbar-thumb {
    background: #2980b9;
    border-radius: 3px;
  }

  .map-icon-container {
    position: fixed;
    width: 32px;
    height: 32px;
    top: 16px;
    right: 0px;
    padding: 6px;
    z-index: 2200;
  }

  .map-icon-container i {
    font-size: 18px;
  }

  .map-icon-container:hover {
    transform: none;
  }
  .map-icon-container:active {
    transform: scale(0.95);
  }

  .map-dropdown {
    width: 90px;
    top: 60px;
    right: 5px;
    padding: 6px;
    z-index: 2300;
  }

  .map-dropdown button {
    font-size: 13px;
    padding: 5px;
  }

  .roadview-close-btn {
    width: 32px; /* 모바일에서 버튼 크기 축소 */
    height: 32px;
    font-size: 24px;
    top: 5px; /* 상단 여백 축소 */
    right: 5px;
  }

  .risk-filter-toggle,
  .disaster-type-toggle,
  .stats-toggle {
    width: 36px;
    height: 36px;
    border: 3px solid white;
  }

  .risk-filter-toggle img {
    width: 40px;
    height: 40px;
  }

  .disaster-type-toggle img,
  .stats-toggle img {
    width: 32px;
    height: 32px;
  }

  .risk-filter-toggle {
    bottom: 65px;
    left: 8px;
  }
  .disaster-type-toggle {
    bottom: 20px;
    left: 8px;
  }
  .stats-toggle {
    bottom: 110px;
    left: 8px;
  }
  .risk-filter-toggle:hover,
  .disaster-type-toggle:hover,
  .stats-toggle:hover {
    transform: none;
  }
  .risk-filter-toggle:active,
  .disaster-type-toggle:active,
  .stats-toggle:active {
    transform: scale(0.95);
  }

  .risk-filter-popup {
    top: auto;
    bottom: 100px;
    left: 8px;
    width: 90%;
    max-width: 240px;
    max-height: 50vh;
    overflow-y: auto;
    font-size: 11px;
    padding: 10px;
  }
  .risk-filter-popup h3 {
    font-size: 15px;
    font-weight: bold;
  }
  .risk-filter-popup .traffic-light-filter {
    padding: 5px;
  }
  .risk-filter-popup::-webkit-scrollbar {
    width: 5px;
  }
  .risk-filter-popup::-webkit-scrollbar-thumb {
    background: #2980b9;
    border-radius: 3px;
  }

  .disaster-type-popup {
    top: auto;
    bottom: 55px;
    left: 8px;
    width: 90%;
    max-width: 240px;
    max-height: 50vh;
    overflow-y: auto;
    font-size: 11px;
    padding: 10px;
  }
  .disaster-type-popup h3 {
    font-size: 15px;
    font-weight: bold;
  }

  .disaster-type-popup .filter-toggle {
    padding: 6px 8px;
    justify-content: flex-start; /* 왼쪽 정렬로 수정 */
    gap: 8px; /* 간격 유지 */
  }

  .disaster-type-popup .filter-toggle img {
    width: 16px;
    height: 16px;
  }
  .disaster-type-popup .filter-toggle .title {
    font-size: 12px;
  }
  .disaster-type-popup .filter-toggle .title .subtitle {
    font-size: 10px;
  }
  .disaster-type-popup .filter-toggle .content-group {
    gap: 6px; /* 모바일에서 간격 조정 */
  }
  .disaster-type-popup::-webkit-scrollbar {
    width: 5px;
  }
  .disaster-type-popup::-webkit-scrollbar-thumb {
    background: #2980b9;
    border-radius: 3px;
  }

  .search-toggle, .bulk-sms-toggle, .add-location-toggle {
    width: 38px;
    height: 38px;
    border: 2px solid #ffffff;
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.2);
  }

  .search-toggle:hover, .bulk-sms-toggle:hover, .add-location-toggle:hover {
    background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
    border-color: #ffd700;
    box-shadow: 0 3px 10px rgba(255, 255, 255, 0.3), inset 0 1px 3px rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
  }

  .search-toggle {
    bottom: 110px;
    right: 5px;
  }

  .bulk-sms-toggle {
    bottom: 65px;
    right: 5px;
  }

  .add-location-toggle {
    bottom: 20px;
    right: 5px;
    font-size: 28px;
  }

  .search-toggle img {
    width: 32px;
    height: 32px;
  }

  .bulk-sms-toggle img {
    width: 20px;
    height: 20px;
  }

  .search-toggle img, .bulk-sms-toggle img {
    filter: brightness(1.5);
  }

  .search-toggle:hover img, .bulk-sms-toggle:hover img {
    transform: scale(1.2);
  }

  .search-popup, .bulk-sms-popup {
    padding: 8px;
  }

  .add-location-form {
    padding: 15px;
  }

  .search-popup {
    bottom: 143px;
    right: 5px;
    width: 90%;
    max-width: 280px;
  }

  .bulk-sms-popup {
    bottom: 98px;
    right: 5px;
    width: 90%;
    max-width: 280px;
  }

  .add-location-form {
    bottom: 55px;
    right: 5px;
    width: 90%;
    max-width: 320px;
    min-width: 260px;
    max-height: 70vh;
  }

  .search-popup h3, .bulk-sms-popup h3 {
    font-size: 14px;
  }

  .add-location-form h3 {
    font-size: 16px;
  }

  .search-popup .close-btn, .bulk-sms-popup .close-btn, .add-location-form .close-btn {
    font-size: 18px;
  }

  .search-item input, .sms-item input {
    font-size: 12px;
    padding: 6px;
  }

  .search-item button, .sms-item button {
    font-size: 12px;
    padding: 6px 12px;
  }

  .add-location-form label {
    font-size: 13px;
  }

  .add-location-form input,
  .add-location-form select {
    font-size: 13px;
    padding: 6px;
  }

  .add-location-form button {
    font-size: 13px;
    padding: 8px;
  }


/* 기본 스타일 */
  .custom-info-window {
    width: 80vw;
    max-width: 90vw;
    max-height: 85vh;
    top: 54%; /* 살짝 내림 */
    left: 50%;
    padding: 7px 3vw 13px 3vw;
    transform: translate(-50%, -50%);
  }

  .custom-info-window h3 {
    font-size: 16px;
  }

  /* info-item 전체 사이 여백, gap 조절 */
  .custom-info-window .info-item {
    gap: 7px !important;
    margin: 6px 0 !important;
    font-size: 12px !important;
    padding-bottom: 4px !important;
  }

  /* 필드명(담당자, 마을순찰대장 등) 더 좁게 */
  .custom-info-window .info-item strong {
    width: 45px !important;
    min-width: 38px !important;
    font-size: 12px !important;
    white-space: nowrap;
    letter-spacing: -0.4px;
  }

  .custom-info-window .phone-icon,
  .custom-info-window .office-phone-icon {
    width: 18px;
    height: 18px;
  }

  .custom-info-window hr {
    margin: 8px 0;
  }

  .custom-info-window .info-photo img {
    max-height: 150px;
  }

  .custom-info-window .traffic-light {
    padding: 4px 7px !important;
    gap: 3px !important;
  }

  .custom-info-window .risk-indicator {
    width: 11px !important;
    height: 11px !important;
    margin: 0 2px !important;

  .custom-info-window .risk-text {
    font-size: 9.5px !important;
  }

  /* 유형명(붕괴위험 등) 더 작고, 보통 굵기 */
  #info-type-text {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #555 !important;
    letter-spacing: -0.4px;
  }
  /* 유형 아이콘 더 작게 */
  .custom-info-window .type-item img {
    width: 15px !important;
    height: 15px !important;
    margin: 0 3px 0 0 !important;
  }

  #office-call, #contact-call, #vm-call {
    min-width: 18px !important;
    min-height: 18px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    padding: 0 !important;
    border-radius: 5px !important;
  }
  #office-call i, #contact-call i, #vm-call i {
    font-size: 10px !important;
  }


  .custom-info-window .edit-btn,
  .custom-info-window .close-btn {
    font-size: 12px !important;
    padding: 4px 8px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 5px !important;
  }
  .custom-info-window .type-item img {
    width: 18px !important;
    height: 18px !important;
  }
  #info-type-text {
    font-size: 12px !important;
  }
}


  .stats-popup {
    bottom: 145px;
    width: 90%;
    max-width: 320px; /* 모바일에서 작게 */
    min-width: 280px;
    max-height: 60vh;
    padding: 15px;
    font-size: 12px;
  }
  .stats-popup h3 {
    font-size: 16px;
    font-weight: bold;
  }
  .stats-popup .stats-table th,
  .stats-popup .stats-table td {
    padding: 6px;
    font-size: 12px;
  }




  .stats-popup canvas {
    height: 140px;
  }
  .stats-popup::-webkit-scrollbar {
    width: 5px;
  }
  .stats-popup::-webkit-scrollbar-thumb {
    background: #2980b9;
    border-radius: 3px;
  }

  .add-location-form {
    bottom: 55px; /* .add-location-toggle (bottom: 10px) 위로 */
    right: 5px;
    width: 90%;
    max-width: 320px;
    min-width: 260px;
    max-height: 70vh;
    padding: 15px;
    font-size: 14px;
  }
  .add-location-form h3 {
    font-size: 16px;
  }
  .add-location-form label {
    font-size: 13px; /* 라벨 크기 조정 */
  }
  .add-location-form input,
  .add-location-form select {
    font-size: 13px;
    padding: 6px;
  }
  .add-location-form button {
    font-size: 13px;
    padding: 8px;
  }
  .add-location-form .photo-preview {
    height: 80px;
  }
  .add-location-form::-webkit-scrollbar {
    width: 5px;
  }
  .add-location-form::-webkit-scrollbar-thumb {
    background: #2980b9;
    border-radius: 3px;
  }

}


/* 데스크탑 환경을 명시적으로 정의 */
@media screen and (min-width: 769px) {
  .stats-popup {
    top: 60px !important;
    width: 540px;
    min-width: 450px;
    max-width: 80vw;
    bottom: 250px; /* add-location-toggle 바로 위 */
    max-height: 580px; /* 높이 증가 */
    font-size: 16px;
  }
  .stats-popup h3 {
    font-size: 22px;
  }
  .stats-popup .stats-table th,
  .stats-popup .stats-table td {
    font-size: 15px;
  }

  .search-toggle,
  .bulk-sms-toggle,
  .add-location-toggle {
    width: 60px;
    height: 60px;
    right: 10px;
    z-index: 1000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .search-toggle {
    bottom: 170px;
  }
  .bulk-sms-toggle {
    bottom: 100px;
  }
  .add-location-toggle {
    bottom: 30px;
  }

  .search-toggle:hover,
  .bulk-sms-toggle:hover,
  .add-location-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }
  .search-toggle:active,
  .bulk-sms-toggle:active,
  .add-location-toggle:active {
    transform: scale(0.95);
  }

  .search-popup {
    padding: 15px;
    bottom: 220px;
    right: 10px;
    width: 400px;
  }

  .bulk-sms-popup {
    padding: 15px;
    bottom: 150px;
    right: 10px;
    width: 400px;
  }

  .add-location-form {
    padding: 25px;
    bottom: 80px;
    right: 10px;
    width: 500px;
    min-width: 400px;
    max-width: 70vw;
    max-height: 700px;
  }

  .search-popup h3, .bulk-sms-popup h3 {
    font-size: 20px;
  }

  .add-location-form h3 {
    font-size: 22px;
  }

  .search-popup .close-btn, .bulk-sms-popup .close-btn, .add-location-form .close-btn {
    font-size: 24px;
  }
}



/* 태블릿 전용 스타일 (화면 폭 768~1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* 타이틀바 줄이기 */
  .title-bar {
    height: 38px;
    font-size: 18px;
    padding: 6px 10px;
  }

  .title-bar img.warning-icon {
    width: 32px;
    height: 32px;
  }

  /* 재난통계 팝업 크기 조정 */
  .stats-popup {
    bottom: 140px;
    right: 10px;
    width: 90%;
    max-width: 400px;
    max-height: calc(100vh - 60px); /* 타이틀바 및 여백 고려 */
    overflow-y: auto;
    padding: 15px;
    font-size: 14px;
  }

  /* 새 지점 추가 폼 크기 조정 */
  .add-location-form {
    bottom: 60px;
    right: 10px;
    width: 90%;
    max-width: 420px;
    max-height: calc(100vh - 60px); /* 타이틀바 및 여백 고려 */
    overflow-y: auto;
    padding: 20px;
    font-size: 15px;
  }

  /* 스크롤바 개선 */
  .stats-popup::-webkit-scrollbar,
  .add-location-form::-webkit-scrollbar {
    width: 6px;
  }

  .stats-popup::-webkit-scrollbar-thumb,
  .add-location-form::-webkit-scrollbar-thumb {
    background: #3498db;
    border-radius: 3px;
  }
}

/* ======== 데스크탑(공통) ======== */
.custom-info-window .risk-text {
  font-size: 13px !important;  /* 위험도 텍스트 크기 조절 */
  font-weight: 600;
  letter-spacing: -0.5px;
}

.custom-info-window .traffic-light {
  padding: 4px 8px !important;
  gap: 7px !important;
  border-radius: 10px !important;
  min-width: 95px;
  max-width: 150px;
  min-height: 28px;
}

.custom-info-window .risk-indicator {
  width: 12px !important;
  height: 12px !important;
  margin: 0 2.5px !important;
}

#info-type-text {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #444 !important;
  margin-left: 2px !important;
  margin-right: 0 !important;
}

.custom-info-window .info-item strong {
  min-width: 100px !important; /* 데스크탑에서 넓힘 */
  font-size: 15px !important;
}

/* ======== 모바일(덮어쓰기) ======== */
@media screen and (max-width: 840px) {

  #office-call, #contact-call, #vm-call {
    min-width: 22px !important;
    min-height: 22px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
    padding: 0 !important;
    border-radius: 5px !important;
  }
  #office-call i, #contact-call i, #vm-call i {
    font-size: 11px !important;
  }

  .custom-info-window .risk-text {
    font-size: 10px !important;
    font-weight: 500;
  }
  .custom-info-window .traffic-light {
    padding: 3px 5px !important;
    gap: 4px !important;
    min-width: 64px;
    max-width: 120px;
    min-height: 19px;
    border-radius: 7px !important;
  }

  .custom-info-window .risk-indicator {
    width: 11px !important;
    height: 11px !important;
    margin: 0 1.5px !important;
  }
  .custom-info-window .type-item {
    gap: 4px !important;
    margin-bottom: 8px !important;
    padding-left: 0 !important;
  }
  #info-type-icon {
    margin-left: 0 !important;
    margin-right: 3px !important;
    width: 15px !important;
    height: 15px !important;
  }
  #info-type-text {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #444 !important;
    margin-left: 0px !important;
    letter-spacing: -0.5px;
  }
  .custom-info-window .info-item strong {
    margin-right: 3px !important;
    width: 60px !important;
    min-width: 60px !important;
    font-size: 12px !important;
  }
}

/* ----- 지점정보 수정 팝업 닫기버튼 커스텀 ----- */
#editInfoPopup .close-btn,
.edit-info-popup .close-btn {
  background: none !important;   /* 배경 제거 */
  border: none !important;       /* 테두리 제거 */
  color: #fff !important;        /* 기본 흰색 */
  font-size: 28px;
  font-weight: bold;
  padding: 0;
  margin: 0;
  box-shadow: none !important;
  outline: none;
  cursor: pointer;
  transition: color 0.3s, transform 0.3s;
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 10;
  width: auto;
  height: auto;
  line-height: 1;
  display: inline;
}

/* 마우스 올리면 빨간색 & 90도 회전 */
#editInfoPopup .close-btn:hover,
.edit-info-popup .close-btn:hover {
  color: #e74c3c !important;
  transform: rotate(90deg);
}

div[style*="cluster.png"] {
  width: 54px !important;
  height: 54px !important;
  line-height: 54px !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 60% 38%, #f2f8ff 68%, #e3f1fd 100%) !important;
  color: #1850a7 !important;
  border: 3.5px solid #1651a3 !important;
  box-shadow:
    0 3px 16px 0 rgba(32, 68, 140, 0.11),
    0 2px 12px 0 rgba(35,81,167,0.15),
    0 1px 2px 0 rgba(255,255,255,0.09) inset;
  text-shadow:
    0 1px 7px #f2faffcc,
    0 2px 6px #1761b733,
    0 1.5px 2px #e2f1ff;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.99 !important;
  cursor: pointer !important;
  z-index: 2200 !important;
  letter-spacing: -1px;
  transition: transform 0.17s, box-shadow 0.17s !important;
  background-blend-mode: lighten;
}

div[style*="cluster.png"]:hover {
  transform: scale(1.11);
  background: radial-gradient(circle at 60% 40%, #f8fbff 70%, #d3eaff 100%) !important;
  border-color: #2592e2 !important;
  box-shadow: 0 8px 28px 0 rgba(35,81,167,0.20), 0 2px 8px 0 rgba(0,0,0,0.11);
}

.multi-marker {
  position: relative; display: inline-block;
}
.marker-badge {
  position: absolute; top: -7px; right: -7px;
  background: #D00; color: #fff;
  border-radius: 50%; padding: 2px 7px;
  font-size: 14px; font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.grouped-info-window {
  background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.14);
  padding: 8px 2px; min-width: 220px; max-width: 300px;
}
.grouped-info-item:hover {
  background: #e6f0ff;
}

.password-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #242a31;
  border-radius: 16px;
  box-shadow: 0 4px 28px rgba(0,0,0,0.17);
  z-index: 200000;
  min-width: 280px !important;
  max-width: 94vw !important;
  padding: 10px 14px 20px 20px !important; /* 상우하좌 */
  display: none;
}
.password-popup.active {
  display: block;
}
.password-popup h3 {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 10px;  /* ↓ 상단 여백 줄이기 */
  text-align: left;
  letter-spacing: -1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.password-popup .close-btn {
  cursor: pointer;
  font-size: 22px;
  color: #bbb;
  margin-left: 6px;
  transition: color 0.22s, transform 0.15s;
}
.password-popup .close-btn:hover {
  color: #e74c3c;
  transform: rotate(90deg) scale(1.13);
}
.password-item {
  display: flex;
  gap: 7px;
  margin-bottom: 0px;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
}
.password-item input[type="password"] {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: none;
  border-radius: 7px;
  font-size: 14px;
  background: #f4f7fa;
  color: #21262b;
  box-shadow: 0 0.5px 2px rgba(0,0,0,0.09);
  transition: border 0.18s, box-shadow 0.14s;
  height: 39px;
  outline: none;
}
.password-item input[type="password"]:focus {
  box-shadow: 0 0 0 1.5px #77aaffcc;
  background: #fff;
}
.password-item button {
  padding: 0 19px;
  height: 39px;
  background: linear-gradient(90deg, #1e90ff, #0059b3);
  color: white;
  border: none;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 7px rgba(30,144,255,0.07);
  transition: background 0.15s, transform 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.password-item button:hover {
  background: linear-gradient(90deg, #0059b3, #1e90ff);
  transform: scale(1.045);
}
.password-popup .error-message {
  color: #ff5959;
  font-size: 13px;
  margin-top: 5px;
  text-align: center;
  background: #fff4f4;
  border-radius: 6px;
  padding: 6px 0 3px 0;
  display: none;
}
.password-item {
  display: flex;
  gap: 7px;
  margin-bottom: 4px;
  align-items: center;
}
#password-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  background: #f4f7fa !important;
  color: #222 !important;
  box-shadow: 0 0.5px 2px rgba(0,0,0,0.09) !important;
  height: 28px !important;         /* 버튼과 완전히 맞추기 */
  outline: none !important;
  margin-right: 0 !important;
  display: inline-block !important;
}
#password-input:focus {
  box-shadow: 0 0 0 1px #77aaff44 !important;
  background: #fff !important;
}
.confirm-password-btn {
  padding: 0 14px !important;
  height: 33px !important;         /* 입력창과 높이 일치 */
  min-width: 52px !important;
  background: linear-gradient(90deg, #2684ff, #0059b3) !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  letter-spacing: 0.01em;
  box-shadow: 0 1.5px 6px rgba(30,144,255,0.07);
  transition: background 0.13s, transform 0.11s;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.confirm-password-btn:hover {
  background: linear-gradient(90deg, #0059b3, #1e90ff) !important;
  transform: scale(1.04) !important;
}
/* 모바일 (화면 너비 520px 이하)에서 팝업 더 얇게, 입력창/버튼 더 작게 */
@media (max-width: 520px) {
  .password-popup {
    min-width: 0 !important;
    width: 60vw !important;
    max-width: 60vw !important;
    padding: 10px 5vw 14px 5vw !important;
  }
  .password-item input[type="password"],
  #password-input {
    font-size: 13px !important;
    height: 22px !important;
    padding: 5px 8px !important;
  }
  .confirm-password-btn {
    min-width: 40px !important;
    font-size: 13px !important;
    height: 24px !important;
    padding: 0 8px !important;
  }
  .password-popup h3 {
    font-size: 15.5px !important;
    margin-bottom: 8px !important;
  }
}

/* 극소형(400px 이하)에서는 더 타이트하게 */
@media (max-width: 400px) {
  .password-popup {
    padding: 8px 2vw 12px 2vw !important;
  }
  .password-popup h3 {
    font-size: 14px !important;
  }
}

/* 두 팝업 입력/버튼 라인 스타일 일치화 */
.password-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.password-item input[type="password"],
#password-input,
#edit-password-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 14px;
  font-size: 16px;
  height: 40px;
  border-radius: 6px;
  border: 1.5px solid #b5bed2;
  background: #f4f6fa !important;
  color: #222 !important;
  box-sizing: border-box;
  box-shadow: 0 2px 7px rgba(70,80,90,0.04);
  margin: 0;
  outline: none;
  display: block;
}

.password-item input[type="password"]:focus,
#password-input:focus,
#edit-password-input:focus {
  border-color: #5b83d9;
  background: #fff !important;
  color: #1a1a1a;
}

/* 버튼 스타일도 통일 */
.password-item button,
.confirm-edit-password-btn,
.confirm-password-btn {
  font-size: 15px !important;
  height: 40px !important;
  min-width: 70px !important;
  padding: 0 18px !important;
  border-radius: 6px !important;
  margin: 0 0 0 8px !important;
  background: linear-gradient(90deg, #1685e7 70%, #2176ed 100%) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: 0 1px 5px rgba(50,80,120,0.08) !important;
  cursor: pointer !important;
  transition: background 0.18s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0.01em !important;
}

.password-item button:hover,
.confirm-edit-password-btn:hover,
.confirm-password-btn:hover {
  background: linear-gradient(90deg, #1559b3 70%, #2176ed 100%) !important;
}

/* 모바일 대응 */
@media (max-width: 520px) {
  .password-item input[type="password"],
  #password-input,
  #edit-password-input {
    font-size: 13px !important;
    height: 28px !important;
    padding: 0 8px !important;
  }
  .password-item button,
  .confirm-edit-password-btn,
  .confirm-password-btn {
    min-width: 44px !important;
    font-size: 13px !important;
    height: 28px !important;
    padding: 0 10px !important;
  }
}

/* password-popup의 비밀번호 입력창만 두껍게 (수정비밀번호와 맞춤) */
.password-popup input[type="password"],
#password-input {
  height: 40px !important;
  font-size: 16px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  border: 1.5px solid #b5bed2 !important;
  background: #f4f6fa !important;
  color: #222 !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 7px rgba(70,80,90,0.04) !important;
  margin: 0 !important;
  outline: none !important;
  display: block !important;
}
/* 비밀번호 입력/수정 모든 팝업에서 한 줄에 입력창과 버튼이 맞게 */
.password-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  flex-wrap: nowrap;
  width: 100%;
}
.password-item input[type="password"],
#edit-password-input,
#password-input {
  flex: 1 1 auto;
  font-size: 16px;
  height: 40px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1.5px solid #b5bed2;
  background: #f4f6fa !important;
  color: #222 !important;
  box-sizing: border-box;
  box-shadow: 0 2px 7px rgba(70,80,90,0.04);
  margin: 0;
  outline: none;
  min-width: 0;
  display: block;
}
.password-item input[type="password"]:focus,
#edit-password-input:focus,
#password-input:focus {
  border-color: #5b83d9;
  background: #fff !important;
  color: #1a1a1a;
}
.password-item button,
.confirm-edit-password-btn,
.confirm-password-btn {
  font-size: 15px;
  height: 40px;
  min-width: 70px;
  padding: 0 18px;
  border-radius: 6px;
  background: linear-gradient(90deg, #1685e7 70%, #2176ed 100%);
  color: #fff;
  font-weight: 600;
  border: none;
  margin: 0;
  box-shadow: 0 1px 5px rgba(50,80,120,0.08);
  cursor: pointer;
  transition: background 0.18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.01em;
}
.password-item button:hover,
.confirm-edit-password-btn:hover,
.confirm-password-btn:hover {
  background: linear-gradient(90deg, #1559b3 70%, #2176ed 100%);
}

/* 모바일 대응 (입력창/버튼 모두 약간씩 더 작게) */
@media (max-width: 520px) {
  .password-item input[type="password"],
  #edit-password-input,
  #password-input {
    font-size: 13px !important;
    height: 32px !important;
    padding: 0 8px !important;
  }
  .password-item button,
  .confirm-edit-password-btn,
  .confirm-password-btn {
    min-width: 44px !important;
    font-size: 13px !important;
    height: 32px !important;
    padding: 0 10px !important;
  }
}
.password-popup {
  min-width: 320px !important;
  max-width: 95vw !important;
  width: auto !important;
}

.password-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap !important;
  width: 100%;
}

.password-item input[type="password"], #password-input {
  flex: 1 1 0%;
  min-width: 0;
  width: 0;
  font-size: 16px;
  height: 40px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1.5px solid #b5bed2;
  background: #f4f6fa !important;
  color: #222 !important;
  box-sizing: border-box;
  box-shadow: 0 2px 7px rgba(70,80,90,0.04);
  margin: 0;
  outline: none;
}

.password-item button, .confirm-password-btn {
  flex: 0 0 auto;
  font-size: 15px;
  height: 40px;
  min-width: 70px;
  padding: 0 18px;
  border-radius: 6px;
  background: linear-gradient(90deg, #1685e7 70%, #2176ed 100%);
  color: #fff;
  font-weight: 600;
  border: none;
  margin: 0;
  box-shadow: 0 1px 5px rgba(50,80,120,0.08);
  cursor: pointer;
  transition: background 0.18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* 공통: 팝업 컨테이너 기본 너비 */
.password-popup,
#password-popup,
.edit-password-popup,
#editPasswordPopup {
  min-width: 260px !important;
  max-width: 96vw !important;
  width: auto !important;
  box-sizing: border-box;
}

/* 수정비밀번호 팝업: 데스크탑에서 너무 좁지 않게 */
.edit-password-popup,
#editPasswordPopup {
  min-width: 300px !important;
  max-width: 380px !important;
  width: auto !important;
  padding: 22px 18px 16px 18px !important;
}

/* 비밀번호 팝업: 데스크탑에서 너무 넓지 않게 */
.password-popup,
#password-popup {
  min-width: 300px !important;
  max-width: 380px !important;
  width: auto !important;
  padding: 20px 18px 18px 18px !important;
}

/* 모바일: 팝업 양쪽 여백 주고, 줄이기 */
@media (max-width: 520px) {
  .password-popup,
  #password-popup,
  .edit-password-popup,
  #editPasswordPopup {
    min-width: 0 !important;
    max-width: 94vw !important;
    width: 92vw !important;
    padding: 12px 5vw 14px 5vw !important;
  }
  .password-item input[type="password"],
  #password-input,
  #edit-password-input {
    font-size: 13px !important;
    height: 32px !important;
    padding: 0 8px !important;
  }
  .password-item button,
  .confirm-edit-password-btn,
  .confirm-password-btn {
    min-width: 44px !important;
    font-size: 13px !important;
    height: 32px !important;
    padding: 0 10px !important;
  }
}
/* 데스크탑(520px 초과): 팝업 너비 350px로 고정 */
.password-popup,
#password-popup,
.edit-password-popup,
#editPasswordPopup {
  width: 350px !important;
  min-width: 0 !important;
  max-width: 95vw !important;
  box-sizing: border-box;
  padding: 22px 20px 18px 20px !important;
}

/* 모바일(520px 이하): 팝업은 화면 90%만 차지 */
@media (max-width: 520px) {
  .password-popup,
  #password-popup,
  .edit-password-popup,
  #editPasswordPopup {
    width: 90vw !important;
    min-width: 0 !important;
    max-width: 95vw !important;
    padding: 14px 4vw 12px 4vw !important;
  }
}

/* 입력줄 한 줄, 줄바꿈 방지, 버튼/입력창 동일한 높이 */
.password-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap !important;
  width: 100%;
}
.password-item input[type="password"],
#password-input,
#edit-password-input {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  font-size: 16px;
  height: 40px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1.5px solid #b5bed2;
  background: #f4f6fa !important;
  color: #222 !important;
  box-sizing: border-box;
  box-shadow: 0 2px 7px rgba(70,80,90,0.04);
  margin: 0;
  outline: none;
}
.password-item button,
.confirm-edit-password-btn,
.confirm-password-btn {
  flex: 0 0 auto;
  font-size: 15px;
  height: 40px;
  min-width: 70px;
  padding: 0 18px;
  border-radius: 6px;
  background: linear-gradient(90deg, #1685e7 70%, #2176ed 100%);
  color: #fff;
  font-weight: 600;
  border: none;
  margin: 0;
  box-shadow: 0 1px 5px rgba(50,80,120,0.08);
  cursor: pointer;
  transition: background 0.18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* 모바일 입력창과 버튼 더 수정 */
@media (max-width: 520px) {
  .password-item input[type="password"],
  #password-input,
  #edit-password-input {
    font-size: 13px !important;
    height: 32px !important;
    padding: 0 8px !important;
  }
  .password-item button,
  .confirm-edit-password-btn,
  .confirm-password-btn {
    min-width: 44px !important;
    font-size: 13px !important;
    height: 32px !important;
    padding: 0 10px !important;
  }
}

@media (max-width: 520px) {
  .password-popup,
  #password-popup,
  .edit-password-popup,
  #editPasswordPopup {
    width: 60vw !important;
    max-width: 62vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 14px 4vw 12px 4vw !important;
  }
}

/* 로드뷰 닫기 버튼 스타일 */
.roadview-close-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 40px !important;
  height: 40px !important;
  background: #555 !important;             /* 진한 회색(더 어둡게!) */
  color: #fff !important;                  /* 흰색 X 아이콘 */
  font-size: 22px !important;
  border: 2.2px solid #f7f7f7 !important;  /* 밝은 테두리 */
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.13) !important;
  cursor: pointer !important;
  transition: background 0.22s, color 0.22s, border-color 0.22s, box-shadow 0.22s, transform 0.22s !important;
  z-index: 30000 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

.roadview-close-btn:hover {
  background: #222 !important;        /* 호버 시 더 진해짐 */
  color: #e74c3c !important;          /* 빨간 계열 X (강조, 원하면 흰색 유지해도 ok) */
  border-color: #bbb !important;      /* 테두리도 약간 진하게 */
  transform: scale(1.10) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.20) !important;
}

@media (max-width: 600px) {
  .roadview-close-btn {
    top: 2px !important;
    right: 2px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border-width: 1px !important;
  }
}

/* 지도이동 버튼 (파스텔 블루) */
#move-to-location-btn {
  background: #e6f2ff !important;
  color: #1976d2 !important;
  border: 1.7px solid #b6c6db !important;         /* 진한 파스텔 테두리 */
  border-radius: 12px !important;
  box-shadow:
    0 3px 14px 0 rgba(80,110,180,0.10),           /* 외부 그림자 */
    0 1.5px 0 0 #fff inset,                       /* 내부 밝기(음영) */
    0 0.5px 1.5px 0 #c0d2eb;                      /* 연한 외곽 */
  width: 38px !important;
  height: 38px !important;
  font-size: 17px !important;
  margin-left: 5px;
  margin-right: 2px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.18s, color 0.18s, box-shadow 0.2s, border-color 0.2s, transform 0.18s;
}
#move-to-location-btn i {
  color: #1976d2 !important;
  font-size: 19px !important;
  pointer-events: none;
}
#move-to-location-btn:hover, #move-to-location-btn:active {
  background: #d0e6fc !important;
  color: #0d47a1 !important;
  border-color: #6ca0e4 !important;
  box-shadow:
    0 4px 18px 0 rgba(40,60,100,0.13),
    0 1.5px 0 0 #f9fbff inset,
    0 0.5px 2.5px 0 #6ca0e4;
  transform: scale(1.09);
}

/* 로드뷰 버튼 (파스텔 민트) */
#roadview-at-location-btn {
  background: #e1f8f2 !important;
  color: #23a078 !important;
  border: 1.7px solid #84dac6 !important;
  border-radius: 12px !important;
  box-shadow:
    0 3px 14px 0 rgba(80,180,140,0.10),
    0 1.5px 0 0 #fff inset,
    0 0.5px 1.5px 0 #b4e9df;
  width: 38px !important;
  height: 38px !important;
  font-size: 17px !important;
  margin-left: 4px;
  margin-right: 2px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.18s, color 0.18s, box-shadow 0.2s, border-color 0.2s, transform 0.18s;
}
#roadview-at-location-btn i {
  color: #23a078 !important;
  font-size: 19px !important;
  pointer-events: none;
}
#roadview-at-location-btn:hover, #roadview-at-location-btn:active {
  background: #b0efdf !important;
  color: #19765a !important;
  border-color: #13c086 !important;
  box-shadow:
    0 4px 18px 0 rgba(30,100,80,0.15),
    0 1.5px 0 0 #f8fffb inset,
    0 0.5px 2.5px 0 #13c086;
  transform: scale(1.09);
}

/* 모바일에서는 크기 축소 */
@media (max-width: 600px) {
  #move-to-location-btn,
  #roadview-at-location-btn {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
  }
  #move-to-location-btn i,
  #roadview-at-location-btn i {
    font-size: 12px !important;
  }
}

#custom-roadview-box {
  border-radius: 16px !important;   /* 원하는 둥글기 */
  overflow: hidden !important;      /* 내부도 모서리 깎임 */
  background: #fff;
}

/* 편집 버튼: 닫기 버튼과 거의 같은 크기 & 진한 테두리 */
.custom-info-window .edit-btn {
  padding: 0 10px;
  min-width: 28px !important;      /* 닫기 버튼(min-width: 30px)과 동일 */
  min-height: 28px !important;     /* 닫기 버튼(min-height: 30px)과 동일 */
  font-size: 15px !important;      /* 크기 동일 */
  border-radius: 8px;
  background: linear-gradient(135deg, #f3f5f8 60%, #e0e2e5 100%);
  color: #45484f;
  border: 1.5px solid #b2c9e4 !important; /* 닫기 버튼 계열로 더 진하게 */
  margin-right: 6px;
  box-shadow: 0 2px 7px rgba(90,90,100,0.07);
  transition: background 0.18s, color 0.18s, box-shadow 0.16s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.custom-info-window .edit-btn:hover,
.custom-info-window .edit-btn:focus {
  background: linear-gradient(135deg, #eaebef 60%, #d8dae0 100%);
  color: #2e3439;
  border: 1.5px solid #9299a6 !important; /* hover 시 테두리 더 진하게 */
  box-shadow: 0 2px 14px rgba(70,80,90,0.12);
  transform: scale(1.04);
}

.edit-info-popup {
  padding: 24px 26px 22px 26px !important;
  border-radius: 12px !important;
  background: rgba(22, 30, 46, 0.97) !important;
  color: #fff !important;
  box-shadow: 0 8px 28px rgba(30,40,60,0.14), 0 1.5px 0 #1e2230 inset !important;
  max-width: 540px !important;
  min-width: 320px !important;
  font-size: 18px !important;
  font-family: 'Pretendard', Arial, sans-serif !important;
  z-index: 200001 !important;
}

/* 입력/선택/텍스트 필드 스타일 */
.edit-info-popup input[type="text"],
.edit-info-popup input[type="number"],
.edit-info-popup input[type="password"],
.edit-info-popup select,
.edit-info-popup textarea {
  width: 100% !important;
  padding: 8px 12px !important;
  border: 1.5px solid #b5bed2 !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  color: #222 !important;
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
  transition: border 0.18s, background 0.18s !important;
}

.edit-info-popup input[type="text"]:focus,
.edit-info-popup input[type="number"]:focus,
.edit-info-popup input[type="password"]:focus,
.edit-info-popup select:focus,
.edit-info-popup textarea:focus {
  border-color: #5b83d9 !important;
  color: #1a1a1a !important;
  outline: none !important;
}

/* 라벨 스타일 */
.edit-info-popup label {
  display: block !important;
  margin: 10px 0 5px 2px !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  color: #fff !important;
  letter-spacing: -0.5px;
}

/* 버튼 스타일 (수정/삭제 등) */
.edit-info-popup .btn,
.edit-info-popup .update-btn,
.edit-info-popup .delete-btn {
  min-width: 32px !important;
  min-height: 32px !important;
  font-size: 15px !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  margin: 0 6px 0 0 !important;
  border: 1.5px solid #cfd7e7 !important;
  background: linear-gradient(135deg, #f3f5f8, #e0e2e5 100%) !important;
  color: #364463 !important;
  box-shadow: 0 2px 7px rgba(90,90,100,0.07) !important;
  transition: background 0.18s, color 0.18s, box-shadow 0.16s !important;
  font-weight: 600 !important;
}

.edit-info-popup .btn.update-btn {
  background: linear-gradient(135deg, #e2f7f0, #bedad1 100%) !important;
  color: #179070 !important;
  border: 1.5px solid #80c4a2 !important;
}

.edit-info-popup .btn.delete-btn {
  background: linear-gradient(135deg, #fce7e7, #f6cccc 100%) !important;
  color: #d66757 !important;
  border: 1px solid #e6b1b1 !important;
}

.edit-info-popup .btn:hover,
.edit-info-popup .btn.update-btn:hover {
  background: linear-gradient(135deg, #e2f7f0, #a8cbc4 100%) !important;
  color: #127c5e !important;
  border: 1.5px solid #65b3a2 !important;
}
.edit-info-popup .btn.delete-btn:hover {
  background: linear-gradient(135deg, #ffdede, #ffb1b1 100%) !important;
  color: #c23737 !important;
  border: 1.5px solid #c88b8b !important;
}

.edit-info-popup .edit-photo-preview img {
  max-width: 96%;
  max-height: 240px;
  display: block;
  border-radius: 8px;
  margin: 0 auto 12px auto;
  background: #222;
}

/* 에러 메시지 */
.edit-info-popup .error-message {
  color: #ffd2d2 !important;
  font-size: 15px !important;
  margin: 8px 0 0 2px !important;
}

.edit-info-popup input,
.edit-info-popup select,
.edit-info-popup textarea {
  background: linear-gradient(135deg, #f5fafd 60%, #e8eef3 100%) !important;
  box-shadow: 0 1.5px 7px rgba(85,110,140,0.09), 0 1px 2px rgba(120,120,120,0.06) !important;
  border: 1.5px solid #dbe5ee !important;
}

.add-location-form input,
.add-location-form select,
.add-location-form textarea {
  width: 100%;      /* 혹은 98% 등 원하는 값 */
  padding: 7px 12px; /* 좌우여백 12px, 높이만 살짝 줄일 수도 있음 */
}
/* 1. edit-info-popup의 입력창 광택/색감 개선 + 길이 최대폭 통일 (가로 스크롤 방지) */
.edit-info-popup input[type="text"],
.edit-info-popup input[type="number"],
.edit-info-popup input[type="password"],
.edit-info-popup select,
.edit-info-popup textarea,
.edit-info-popup input[type="file"] {
  max-width: 98%; /* 폼보다 살짝 작게(가로 스크롤 방지) */
  min-width: 0;
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid #3b4b61; /* 어두운 블루+그레이 */
  border-radius: 7px;
  background: linear-gradient(135deg, #222c38 50%, #222933 100%);
  color: #f8fcff;
  font-size: 16px;
  margin-bottom: 11px;
  box-sizing: border-box;
  box-shadow: 0 2px 9px rgba(35,42,58,0.11), 0 1px 2px rgba(70,80,90,0.08);
  transition: border 0.18s, background 0.18s;
}

.edit-info-popup input[type="text"]:focus,
.edit-info-popup input[type="number"]:focus,
.edit-info-popup input[type="password"]:focus,
.edit-info-popup select:focus,
.edit-info-popup textarea:focus,
.edit-info-popup input[type="file"]:focus {
  border-color: #72b8fa;
  background: linear-gradient(135deg, #273c53 40%, #2d3d48 100%);
  color: #e7f4ff;
  outline: none;
}

/* 파일 input도 가로 폭 제한, 배경 통일 */
.edit-info-popup input[type="file"] {
  background: linear-gradient(135deg, #222c38 50%, #222933 100%);
  color: #f8fcff;
  font-size: 15px;
  border: 1.5px solid #3b4b61;
  border-radius: 7px;
  max-width: 98%;
  min-width: 0;
  box-shadow: 0 2px 9px rgba(35,42,58,0.11);
}

/* 2. 새 지점 추가 폼 입력창 길이/스케일 조정 (가로 스크롤 방지) */
.add-location-form input,
.add-location-form select,
.add-location-form textarea {
  max-width: 98%;  /* 폼 가로폭보다 살짝 작게 */
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* 3. 버튼과 텍스트 라벨의 가로폭도 맞춤 */
.edit-info-popup .edit-popup-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  gap: 18px;
}

.edit-info-popup .btn,
.edit-info-popup .update-btn,
.edit-info-popup .delete-btn {
  min-width: 105px;
  min-height: 40px;
  font-size: 16px;
  border-radius: 8px;
  padding: 0 16px;
  font-weight: 600;
  box-shadow: 0 1.5px 7px rgba(40,90,120,0.07);
  border: none;
  margin: 0 6px 0 0;
  transition: background 0.18s, color 0.18s, box-shadow 0.16s;
}
.edit-info-popup .btn.update-btn {
  background: #b8e7ce;
  color: #009765;
}
.edit-info-popup .btn.delete-btn {
  background: #ffd9d9;
  color: #cf5555;
}
.edit-info-popup .btn.update-btn:hover {
  background: #6fe4ad;
  color: #065742;
}
.edit-info-popup .btn.delete-btn:hover {
  background: #ffb9b9;
  color: #bb2222;
}

.edit-info-popup input,
.edit-info-popup select,
.edit-info-popup textarea,
.edit-info-popup input[type="file"] {
  /* 살짝 더 밝은 광택/그라데이션으로! */
  background: linear-gradient(135deg, #f5fafd 67%, #e3e7f1 100%);
  /* 위의 그라데이션은 실제 '새 지점 추가' 폼에서 광택감 나게 하는 효과! */
  color: #253049;
  border: 1.5px solid #cfd7e7;
  box-shadow: 0 1.5px 7px rgba(85,110,140,0.09), 0 1px 2px rgba(120,120,120,0.06);
  width: 100%;
  max-width: 98%;
  min-width: 0;
  margin-bottom: 11px;
  padding: 8px 12px;
  font-size: 16px;
  box-sizing: border-box;
  transition: border 0.18s, background 0.18s;
}

.edit-info-popup input:focus,
.edit-info-popup select:focus,
.edit-info-popup textarea:focus,
.edit-info-popup input[type="file"]:focus {
  background: linear-gradient(135deg, #f3f9fe 60%, #b5cff6 100%);
  color: #1a1a1a;
  border-color: #5b83d9;
  outline: none;
}

.edit-info-popup {
  background: linear-gradient(120deg, #222c38 60%, #273042 100%);
}

/* 크롬, 엣지, 사파리용 심플 스크롤바 */
.edit-info-popup,
.add-location-form {
  scrollbar-width: thin;
  scrollbar-color: #e2e6ed #161b23;
  /* 위: 스크롤바 색(손잡이), 아래: 트랙 */
}

/* Webkit(크롬/사파리 등) */
.edit-info-popup::-webkit-scrollbar,
.add-location-form::-webkit-scrollbar {
  width: 8px;
  background: transparent;
  opacity: 0;
  transition: opacity 0.2s;
}
.edit-info-popup:hover::-webkit-scrollbar,
.edit-info-popup:focus-within::-webkit-scrollbar,
.edit-info-popup:active::-webkit-scrollbar,
.edit-info-popup:focus::-webkit-scrollbar,
.add-location-form:hover::-webkit-scrollbar,
.add-location-form:focus-within::-webkit-scrollbar,
.add-location-form:active::-webkit-scrollbar,
.add-location-form:focus::-webkit-scrollbar {
  opacity: 1;
}
.edit-info-popup::-webkit-scrollbar-thumb,
.add-location-form::-webkit-scrollbar-thumb {
  background: #e2e6ed;
  border-radius: 6px;
  min-height: 24px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s;
}
.edit-info-popup::-webkit-scrollbar-thumb:hover,
.add-location-form::-webkit-scrollbar-thumb:hover {
  background: #cdd2da;
}
.edit-info-popup::-webkit-scrollbar-track,
.add-location-form::-webkit-scrollbar-track {
  background: transparent;
}

/* 스크롤 할 때만(hover/focus/scroll중)에만 보이게 - 크롬/엣지 최신 지원 */
.edit-info-popup,
.add-location-form {
  scrollbar-gutter: stable both-edges;
  /* 스크롤 중일 때만 나타나게(자동 모드) */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e2e6ed #161b23;
  overscroll-behavior: contain;
}
.edit-info-popup input,
.edit-info-popup select,
.edit-info-popup textarea,
.edit-info-popup input[type="file"] {
  background: linear-gradient(135deg, #f5fafd 67%, #e3e7f1 100%) !important;
  color: #222 !important;
  border: 1.5px solid #dbe5ee !important;
  box-shadow: 0 1.5px 7px rgba(85,110,140,0.09), 0 1px 2px rgba(120,120,120,0.06) !important;
  width: 100% !important;
  max-width: 98% !important;
  min-width: 0 !important;
  margin-bottom: 11px !important;
  padding: 8px 12px !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
  transition: border 0.18s, background 0.18s !important;
}
.edit-info-popup input:focus,
.edit-info-popup select:focus,
.edit-info-popup textarea:focus,
.edit-info-popup input[type="file"]:focus {
  background: linear-gradient(135deg, #e7f2fb 67%, #d6e1ee 100%) !important;
  color: #1a1a1a !important;
  border-color: #5b83d9 !important;
  outline: none !important;
}
.edit-info-popup,
.add-location-form {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e2e6ed #161b23;
}
.edit-info-popup::-webkit-scrollbar,
.add-location-form::-webkit-scrollbar {
  width: 7px;
  background: transparent;
}
.edit-info-popup::-webkit-scrollbar-thumb,
.add-location-form::-webkit-scrollbar-thumb {
  background: #e2e6ed;
  border-radius: 5px;
  min-height: 24px;
}
.edit-info-popup::-webkit-scrollbar-thumb:hover,
.add-location-form::-webkit-scrollbar-thumb:hover {
  background: #d1d6e0;
}
.edit-info-popup::-webkit-scrollbar-track,
.add-location-form::-webkit-scrollbar-track {
  background: transparent;
}
#editInfoPopup input,
#editInfoPopup select,
#editInfoPopup textarea,
#editInfoPopup input[type="file"] {
  background: linear-gradient(135deg, #f5fafd 67%, #e3e7f1 100%) !important;
  color: #222 !important;
  border: 1.5px solid #dbe5ee !important;
  box-shadow: 0 1.5px 7px rgba(85,110,140,0.09), 0 1px 2px rgba(120,120,120,0.06) !important;
  width: 100% !important;
  max-width: 98% !important;
  min-width: 0 !important;
  margin-bottom: 11px !important;
  padding: 8px 12px !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
  transition: border 0.18s, background 0.18s !important;
}
#editInfoPopup input:focus,
#editInfoPopup select:focus,
#editInfoPopup textarea:focus,
#editInfoPopup input[type="file"]:focus {
  background: linear-gradient(135deg, #e7f2fb 67%, #d6e1ee 100%) !important;
  color: #1a1a1a !important;
  border-color: #5b83d9 !important;
  outline: none !important;
}
#editInfoPopup input,
#editInfoPopup select,
#editInfoPopup textarea,
#editInfoPopup input[type="file"] {
  /* 아래 줄 단 한 번만 남기세요! */
  background: linear-gradient(135deg, #f5fafd 67%, #e3e7f1 100%) !important;
  /* 기타 스타일은 유지, 중복 배경은 반드시 삭제 */
}
#editInfoPopup input,
#editInfoPopup select,
#editInfoPopup textarea,
#editInfoPopup input[type="file"] {
  background-image: linear-gradient(135deg, #f5fafd 67%, #e3e7f1 100%) !important;
  background-color: #f5fafd !important;
  /* background: ... 은 쓰지 마세요! */
  color: #222 !important;
  border: 1.5px solid #dbe5ee !important;
  box-shadow: 0 1.5px 7px rgba(85,110,140,0.09), 0 1px 2px rgba(120,120,120,0.06) !important;
  width: 100% !important;
  max-width: 98% !important;
  min-width: 0 !important;
  margin-bottom: 11px !important;
  padding: 8px 12px !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
  transition: border 0.18s, background 0.18s !important;
}
#editInfoPopup input:focus,
#editInfoPopup select:focus,
#editInfoPopup textarea:focus,
#editInfoPopup input[type="file"]:focus {
  background-image: linear-gradient(135deg, #e7f2fb 67%, #d6e1ee 100%) !important;
  background-color: #e7f2fb !important;
  color: #1a1a1a !important;
  border-color: #5b83d9 !important;
  outline: none !important;
}

/* 각 info-item(행) 1.2배 두께로 */
.custom-info-window .info-item {
  display: flex;
  align-items: flex-start;
  min-height: 46px;
  border-bottom: 1px solid #ebedf3;
  font-size: 17px;
  box-sizing: border-box;
  padding: 5px 0;
  margin: 0;
  gap: 0;
}
.custom-info-window .info-item:last-of-type {
  border-bottom: none;
}
.custom-info-window .info-item > * {
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  height: 100%;
  min-height: 0;
  white-space: nowrap;
}

/* 필드명 넉넉하게 */
.custom-info-window .info-item strong {
  width: 100px;
  flex-shrink: 0;
  font-weight: 600;
  color: #222;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 3px;
}

/* info-text-group: 내용 부분(길어질 수 있음) */
.custom-info-window .info-text-group {
  width: 100%;
  font-size: 16px;
  color: #3a3a3a;
  word-break: break-all;
  white-space: normal;
  padding: 2px 0;
  display: block;
}

/* 한 줄에 내용이 2줄 이상이면 info-text-group은 위, 버튼은 아래 */
.custom-info-window .info-item .info-text-group {
  margin-bottom: 2px;
}

/* 위험도 행 */
.custom-info-window .info-item.risk-level {
  min-height: 54px !important;
  height: 54px !important;
  align-items: center;
}

/* 신호등(traffic-light) 적당히만 크게 + padding 적게 */
.custom-info-window .traffic-light {
  padding: 3px 10px !important;
  height: 25px !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  background: linear-gradient(90deg, #393939, #232323) !important;
  border-radius: 11px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.16), inset 0 1px 2px rgba(255,255,255,0.13);
}

/* 신호등 내부 */
.custom-info-window .traffic-light-inner {
  height: 22px !important;
  align-items: center !important;
  gap: 5px !important;
}

/* 신호등 불 크기 "중간" (원래의 75% 정도) */
.custom-info-window .traffic-light .risk-indicator {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  margin: 0 2px !important;
  box-shadow: 0 0 6px rgba(0,0,0,0.10);
}

/* 위험도 텍스트 */
.custom-info-window .risk-text {
  font-size: 15px !important;
  font-weight: 700;
  height: 20px;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 0;
}

/* 유형명 텍스트(예: 침수위험, 붕괴위험 등)는 더 크게! */
#info-type-text {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #22355a !important;
  margin-left: 5px !important;
}
.custom-info-window .info-main {
  display: flex;
  flex: 1 1 0;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}

.custom-info-window .info-text {
  font-size: 16px;
  color: #333;
  word-break: break-all;
  white-space: normal;
  line-height: 1.4;
  padding-right: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

/또수정/
.custom-info-window .info-item {
  display: flex;
  align-items: center;
  min-height: 54px;        /* 주소 영역 기준, 모두 동일! */
  border-bottom: 1px solid #ebedf3;
  font-size: 17px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.custom-info-window .info-item:last-of-type {
  border-bottom: none;
}
.custom-info-window .info-item strong {
  width: 100px;
  min-width: 100px;
  flex-shrink: 0;
  font-weight: 600;
  color: #222;
  font-size: 17px;
  display: flex;
  align-items: center;     /* 항상 세로 중앙 */
  justify-content: flex-start;
  padding-top: 0;
  height: 100%;
  line-height: normal;
}

/* info-main: 내용+버튼 묶음 */
.custom-info-window .info-main {
  display: flex;
  flex: 1 1 0;
  align-items: center;         /* 한 줄일 때 모두 세로 중앙 */
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  min-height: 54px;
}

.custom-info-window .info-text {
  font-size: 16px;
  color: #333;
  word-break: break-all;
  white-space: normal;
  line-height: 1.4;
  padding-right: 6px;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;         /* 한 줄일 땐 세로 중앙 */
}

/* 유형명, 신호등 왼쪽정렬 - strong(필드명)과 맞춤 */
#info-type-text {
  margin-left: 0 !important;
}
.custom-info-window .type-item img,
.custom-info-window .type-item #info-type-text {
  margin-left: 0 !important;
}

/* 위험도 신호등 박스도 왼쪽정렬 */
.custom-info-window .risk-level .traffic-light {
  margin-left: -8px !important;
}

.custom-info-window .risk-level .info-main {
  align-items: center !important;
}
/* 신호등 버튼 한 줄 맞춤 */
  margin-left: 0 !important;     /* 왼쪽정렬 */
  padding: 3px 12px !important;  /* 세로폭도 넉넉하게 */
  height: 32px !important;       /* 높이 크게 */
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  border-radius: 11px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.16), inset 0 1px 2px rgba(255,255,255,0.13);
}

/* 위험도(신호등) 자체도 세로중앙 */
.custom-info-window .risk-level .info-main {
  align-items: center;
}

.custom-info-window .info-item .info-main {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 54px;
  width: 100%;
}
.custom-info-window .info-item .info-text {
  font-size: 16px;
  color: #333;
  word-break: break-all;
  white-space: normal;
  line-height: 1.4;
  padding-right: 6px;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 100%;
}
.custom-info-window .info-item .info-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 10px;
}
.custom-info-window .info-item strong {
  width: 100px;
  min-width: 100px;
  flex-shrink: 0;
  font-weight: 600;
  color: #222;
  font-size: 17px;
  display: flex;
  align-items: center;        /* 세로 중앙 */
  justify-content: flex-start;
  padding: 0;
  height: 100%;               /* info-item 높이 채움! */
  line-height: normal;        /* inherit or unset으로 해도 OK */
}

.custom-info-window #info-notes {
  white-space: pre-line !important;   /* 엔터 입력 시 줄바꿈 */
  word-break: break-all !important;   /* 길면 자동 줄바꿈 */
  overflow-wrap: break-word !important;
  display: block;
  max-width: 100%;
  padding-right: 0;
}
.custom-info-window .info-item {
  display: flex;
  align-items: center !important;   /* 무조건 세로 중앙 정렬 */
  min-height: 54px;
  font-size: 17px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #ebedf3;
}
.custom-info-window .info-item strong {
  width: 100px;
  min-width: 100px;
  flex-shrink: 0;
  font-weight: 600;
  color: #222;
  font-size: 17px;
  display: flex;
  align-items: center;       /* 중앙정렬 */
  height: 100%;              /* info-item 높이와 맞춤 */
  line-height: normal;       /* 기본값 */
  padding: 0;
}
.custom-info-window .info-main,
.custom-info-window .info-text {
  display: flex;
  align-items: center;       /* 한 줄일 때도 항상 세로 중앙 */
  height: 100%;
  line-height: normal;
}

@media (max-width: 600px) {
  .custom-info-window .info-item {
    min-height: 38px !important;
    font-size: 15px !important;
  }
  .custom-info-window .info-item strong {
    font-size: 15px !important;
    min-width: 78px !important;
    width: 78px !important;
  }
  .custom-info-window .info-main, .custom-info-window .info-text {
    font-size: 15px !important;
  }
  /* 유형명 더 작게 */
  #info-type-text {
    font-size: 15px !important;
  }
  /* 특이사항 폰트도 줄이기 */
  #info-notes {
    font-size: 14px !important;
  }
}
.custom-info-window .info-main {
  display: flex;
  align-items: flex-start !important;  /* 버튼이 항상 위(시작) */
  justify-content: space-between;
  width: 100%;
}
.custom-info-window .info-text {
  flex: 1 1 0 !important;
  min-width: 0;
}

@media (max-width: 600px) {
  .custom-info-window .info-main {
    align-items: flex-start !important;
  }
  #info-type-text {
    font-size: 14px !important;
    font-weight: 600 !important;
  }
}
/* ---------------- PC/모바일 공통 ---------------- */
.custom-info-window .info-item {
  display: flex;
  align-items: center !important;    /* 항상 세로 중앙 */
  min-height: 48px;
  font-size: 16px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #ebedf3;
}
.custom-info-window .info-item strong {
  width: 95px;
  min-width: 90px;
  flex-shrink: 0;
  font-weight: 600;
  color: #222;
  font-size: 16px;
  display: flex;
  align-items: center;    /* 항상 세로 중앙 */
  height: 100%;
  padding: 0;
}
.custom-info-window .info-main,
.custom-info-window .info-text {
  display: flex;
  align-items: center !important;    /* 한 줄일 때도 중앙 */
  height: 100%;
}
.custom-info-window .info-text {
  font-size: 15px;
  color: #333;
  word-break: break-all;
  white-space: normal;
  line-height: 1.4;
  padding-right: 6px;
  flex: 1 1 0;
  min-width: 0;
}

/* ---------------- 모바일만 적용 (반응형) ---------------- */
@media (max-width: 600px) {
  .custom-info-window .info-item {
    min-height: 35px !important;
    font-size: 13.5px !important;
  }
  .custom-info-window .info-item strong {
    font-size: 13.5px !important;
    min-width: 68px !important;
    width: 68px !important;
  }
  .custom-info-window .info-text,
  .custom-info-window .info-main {
    font-size: 12.7px !important;
  }
  /* 유형명 */
  #info-type-text {
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  /* 특이사항 영역 폰트 */
  #info-notes {
    font-size: 12.7px !important;
  }
  .custom-info-window .info-item.risk-level .traffic-light {
    margin-left: -17px !important;   /* 모바일은 더 강하게 밀기 */
  }
}
@media (max-width: 600px) {
  /* 1. 필드명(볼드), 필드내용 모두 같은 폰트크기(볼드만 차이) */
  .custom-info-window .info-item strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    min-width: 64px !important;
    width: 64px !important;
    letter-spacing: -0.5px;
  }
  .custom-info-window .info-text,
  .custom-info-window .info-main,
  .custom-info-window .info-item {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* 3. 버튼 "세로 중앙 정렬" (버튼/내용 높이 같게) */
  .custom-info-window .info-item,
  .custom-info-window .info-main {
    align-items: center !important; /* 한 줄일 때 무조건 중앙! */
    min-height: 25px !important;    /* 4번: 세로 기본 높이 */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* 필드명만 한 줄이면 높이도 맞게 */
  .custom-info-window .info-item strong {
    height: 100% !important;
    display: flex;
    align-items: center !important;
    padding: 0 !important;
  }
  /* 4. 각 info-item 세로 높이(두 줄이면 늘어남) */
  .custom-info-window .info-item {
    min-height: 25px !important;
    height: auto !important;
  }
  /* 특이사항 영역 세로폭/폰트 */
  #info-notes {
    font-size: 13px !important;
    min-height: 25px !important;
  }
  /* 신호등 왼쪽으로 더 밀기 */
  .custom-info-window .info-item.risk-level .traffic-light {
    margin-left: -17px !important;
  }
}


/* --------- 모바일(600px 이하)만 작게 --------- */
@media (max-width: 600px) {

  /* 위험도 신호등/이미지 등 추가 모바일 튜닝 계속 유지 */
  .custom-info-window .traffic-light {
    height: 20px !important;
    padding: 2px 7px !important;
    border-radius: 7px !important;
  }
  .custom-info-window .traffic-light .risk-indicator {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    margin: 0 1px !important;
  }
  .custom-info-window .info-photo img {
    max-width: 98vw !important;
    width: 100% !important;
    height: auto !important;
    max-height: 40vh !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

.custom-info-window .info-item strong {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
}
@media (max-width: 600px) {
  .custom-info-window .info-item {
    min-height: 30px !important; /* 너무 줄지 않도록 살짝만 확보 */
    height: auto !important;
  }
}


/* ================== 버튼 스타일 공통 ================== */
/* 지도이동, 사무실전화(파랑계열) */
#move-to-location-btn,
#office-call {
    background: #f4faff;
    color: #288fff;
    border: 1.7px solid #b6e0fa;
    border-radius: 12px;
    box-shadow: 0 3px 14px 0 rgba(80, 180, 230, 0.10), 0 1.5px 0 0 #fff inset, 0 0.5px 1.5px 0 #b4d8fa;
    transition: box-shadow 0.13s, border 0.13s, background 0.13s;
}
#move-to-location-btn:hover,
#office-call:hover {
    background: #e0f2fe;
    border-color: #7ec6f8;
    box-shadow: 0 6px 20px 0 rgba(80, 180, 230, 0.13);
}
/* 로드뷰, 모바일전화(초록계열) */
#roadview-at-location-btn,
#contact-call,
#vm-call {
    background: #e1f8f2;
    color: #23a078;
    border: 1.7px solid #84dac6;
    border-radius: 12px;
    box-shadow: 0 3px 14px 0 rgba(80, 180, 140, 0.10), 0 1.5px 0 0 #fff inset, 0 0.5px 1.5px 0 #b4e9df;
    transition: box-shadow 0.13s, border 0.13s, background 0.13s;
}
#roadview-at-location-btn:hover,
#contact-call:hover,
#vm-call:hover {
    background: #c9f4e6;
    border-color: #6fc3ad;
    box-shadow: 0 6px 20px 0 rgba(80, 180, 140, 0.13);
}

/* ================== 최신 크기/정렬 (공통) ================== */
.custom-info-window .info-btns button,
.custom-info-window .info-btns a,
.custom-info-window .call-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
    border-radius: 7px;
    font-size: 15px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0 2px;
    border: none; /* ← 위 개별 버튼에 border 따로 선언되어 있으니 여기선 제거 */
    background: none; /* 위에서 개별 선언 */
    color: inherit;
    transition: none;
}

/* 아이콘(i)도 정렬 */
.custom-info-window .info-btns i,
.custom-info-window .call-btn i {
    font-size: 15px;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* ========== 모바일(600px 이하) ========== */
@media (max-width: 600px) {
    .custom-info-window .info-btns button,
    .custom-info-window .info-btns a,
    .custom-info-window .call-btn {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        font-size: 10.5px !important;
        border-radius: 5px !important;
        padding: 0 !important;
        margin: 0 1.5px !important;
    }
    .custom-info-window .info-btns i,
    .custom-info-window .call-btn i {
        font-size: 9px !important;
        width: 9px !important;
        height: 9px !important;
    }
    .custom-info-window .info-item {
        min-height: 39px !important;   /* 36~42px 정도 */
        font-size: 12.5px !important;
        display: flex !important;
        align-items: center !important;
    }
  /* 위험도 줄(신호등) 위 여백 확 줄이기 */
  .custom-info-window .info-item.risk-level {
    margin-top: -9px !important;    /* -7px~ -12px로 ! */
  }
  /* 유형(아이콘) 줄 위 여백 줄이기 */
  .custom-info-window .type-item {
    margin-top: -8px !important;    /* 마찬가지로 -5 ~ -10px 튜닝 가능 */
  }
}

/* 1. 인포윈도우: 상단 60px, 하단 60px */
.custom-info-window {
  top: 60px !important;
  left: 50% !important;
  transform: translate(-50%, 0) scale(0.95) !important;
  max-height: calc(100vh - 100px) !important;
  min-height: 100px;
  /* 나머지는 기존 유지 */
}

/* 2. 통계팝업: 하단 위치는 기존을 그대로 유지 */
.stats-popup {
  top: 70px !important;
}

/* 3. 새 지점 추가 폼: 하단 위치는 기존(bottom) 유지 */
.add-location-form {
  top: 70px !important;
}

/* --- 반응형: 모바일은 더 좁게(600px 이하) --- */
@media (max-width: 600px) {
  #customInfoWindow,
  .custom-info-window,
  .custom-info-window.active {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 60px) !important;
    left: 10vw !important;
    right: 10vw !important;
    width: 82vw !important;
    max-width: 82vw !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 570px !important;
    transform: none !important;
    border-radius: 14px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    z-index: 1500 !important;
  }
  .stats-popup,
  .add-location-form {
    left: 2vw !important;
    width: 96vw !important;
    min-width: unset !important;
    max-width: 98vw !important;
  }
  .stats-popup,
  .add-location-form {
    top: 60px !important;
    max-height: calc(100vh - 120px) !important;
  }
}

#myLocationBtn {
  position: fixed;
  bottom: 156px;      /* 검색 위로 딱 맞춤 */
  right: 5px;
  width: 41px;        /* search-toggle과 동일하게! */
  height: 41px;
  border-radius: 50%;
  border: 2px solid #ffffff;
    background: linear-gradient(135deg,
    #43c6ff 0%,    /* 밝은 하늘색 */
    #2897ff 50%,   /* 기본 파란색 */
    #1169bb 80%,   /* 진한 파랑 */
    #00397c 100%   /* 거의 남색 */
  );
  box-shadow: 0 2px 8px rgba(255,255,255,0.2), inset 0 1px 2px rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 0;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

#myLocationBtn i {
  font-size: 20px;    /* 아이콘 크기 ↑ */
  color: #fff;
  line-height: 1;
  margin: 0;
  padding: 0;
  display: block;
}

#myLocationBtn:hover {
  background: linear-gradient(135deg,
    #7ddaff 0%,
    #43c6ff 40%,
    #1169bb 80%,
    #0053a3 100%
  );
  border-color: #ffd700;
  background: linear-gradient(145deg, #1c6ed6 70%, #0053a3 100%);
  transform: scale(1.1);
}
#myLocationBtn:active {
  transform: scale(0.95);
}

/* 아버지 핸드폰 용.... 모바일에서만 보이게 */
@media (max-width: 700px) {
  #myLocationBtn { display: flex !important; }
}

@media screen and (max-height: 520px) {
  .custom-info-window {
    max-height: calc(70vh - 50px) !important;  /* 토글버튼 공간만큼 더 줄임 */
    bottom: 60px !important;  /* 실제로는 top 조정 + max-height로 충분 */
    padding-bottom: 10px !important;
  }
}

@media screen and (max-height: 440px) {
  .custom-info-window {
    max-height: calc(58vh - 44px) !important;
    font-size: 11px !important;
    padding: 2vw 2vw 4vw 2vw !important;
    /* 필요하다면 버튼/이미지도 더 작게! */
  }
}

@media screen and (max-width: 370px) {
  .title-bar {
    padding-right: 55px !important; /* 날씨정보 공간을 강제 확보 */
  }
  .weather-info {
    position: absolute !important;
    top: 8px !important;
    right: 40px !important;
    z-index: 2100;
    transform: scale(0.9);      /* 더 작게 */
    min-width: 36px !important;
    min-height: 24px !important;
  }
  .title-bar .title-text {
    /* 한 줄 유지하고, 말줄임도 없게 하고, flex shrink 허용 (날씨정보 침범 방지) */
    min-width: 0;
    max-width: 62vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;      /* 말줄임도 없이 잘라냄 */
  }
}

/* 📱 모바일 전용 보정 */
@media screen and (max-width: 600px) {
  .title-bar .title-text {
    margin-left: -2px !important; /* ← 모바일에서 오른쪽으로 살짝 이동 */
  }

  /* 혹시 아이콘과 텍스트가 너무 붙었다면 아이콘 오른쪽 여백도 약간 줄이기 */
  .title-bar img.warning-icon {
    margin-right: 1px !important; /* 기존 53px → 40px 정도로 조정 */
  }
}

/* PWA 환경 추가 모바일과 데스크탑 등 분리 설정 */
body.pwa-standalone .custom-info-window {
  top: 62px !important; /* 데스크탑, 태블릿 */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 80vw !important;
  max-width: 80vw !important;
  height: auto !important;
  max-height: 75vh !important;  /* 이 범위 안에서만 확장 */
  min-height: 120px !important; /* 최소 보장 */
  border-radius: 18px !important;
  overflow-y: auto !important;
}
@media (max-width: 768px) {
  body.pwa-standalone .custom-info-window {
    top: 65px !important;
    width: 90vw !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;  /* 모바일에서 조금 더 빡빡하게... 어르신 폰 감안해서 */
    min-height: 0 !important;
    padding-left: 3vw !important;
    padding-right: 3vw !important;
  }
}

/* 태블릿 짤림 방지 */
@media (min-width: 768px) and (max-width: 1024px) {
  .custom-info-window {
    width: 70vw !important;
    max-width: 680px !important;
    height: 63vh !important;
    max-height: 63vh !important;
    top: 60px !important;    /* 타이틀바 아래 여백, 실제 레이아웃에 맞게 조정 */
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }
}

@media screen and (max-width: 768px) {
  .weather-info { right: 45px; }
  .map-icon-container { right: 0px; }
}


.toast-message {
  animation: toast-fade-in 0.3s;
}
@keyframes toast-fade-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97);}
  to { opacity: 0.98; transform: translateY(0) scale(1);}
}

#blur-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.2);
  z-index: 1400; /* .custom-info-window(1500) 바로 아래 */
  pointer-events: none !important;
}
#blur-overlay.active {
  display: block;
  pointer-events: auto !important;
}


.weather-popup .weather-links {
  margin-top: 18px; /* 원하는 만큼 조절 가능 */
}

.weather-popup .weather-links a {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: #0d47a1;
  text-decoration: underline;
}
.custom-attribution {
  position: fixed;
  bottom: 7px;
  right: 12px;
  font-size: 11px;
  color: #555;
  background: rgba(255, 255, 255, 0.4);
  padding: 3px 6px;
  border-radius: 4px;
  z-index: 9999;
  pointer-events: auto;  /* 클릭 허용 */
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.custom-attribution.active {
  background: #f44336;
  color: white;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .custom-attribution {
    right: 6px;
    font-size: 9.5px;
    padding: 2px 4px;
  }
}

@media screen and (max-width: 430px) {
  .custom-attribution {
    right: 6px;
    font-size: 7.5px;
    padding: 1px 3px;
  }
}

/* 업데이트 시간 텍스트 */
.traffic-light-inner {
  display: flex;
  align-items: center;
  gap: 6px;
}

.risk-label {
  font-weight: bold;
  margin-left: 6px;
  font-size: 13px;
}

.risk-updated {
  text-align: right;
  font-size: 11px;
  color: #666;
  font-style: italic;
  white-space: nowrap;
  margin-top: 4px;
}

@media screen and (max-width: 768px) {
  .risk-updated {
    font-size: 10px;
  }
}

/* 클러스터 클릭은 가능하게, 주변 영역은 클릭 통과 */
.cluster {
  pointer-events: auto !important;
  z-index: 999;
  position: relative;
}

.cluster::after {
  content: "";
  position: absolute;
  top: -24px;
  left: -24px;
  right: -24px;
  bottom: -24px;
  pointer-events: none; /* 주변은 클릭 무시 */
}

.info-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

#risk-tooltip-btn {
  font-size: 14px;
  color: #333;
  background: #fff9db; /* 더 연한 노랑 */
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 2px 6px;
  cursor: pointer;
  font-style: italic;
}
#risk-tooltip-btn:hover {
  background: #fff5c2;
}

#info-traffic-light {
  margin-left: -16px !important;
}

.tooltip-toast {
  position: absolute;
  bottom: 150%;
  right: 0;
  background: rgba(15, 15, 15, 0.8); /* 더 어두운 유리 배경 */
  color: #fff;
  padding: 6px 12px;
  border-radius: 10px;
  font-style: italic;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
  font-size: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.2);
  text-shadow: 0 0 2px rgba(0,0,0,0.6); /* ✅ 가독성 향상용 */
}


/* 나타날 때 */
.tooltip-toast.visible {
  opacity: 1;
}


/* 모바일에서 글자 크기 더 작게 */
@media (max-width: 480px) {
  .tooltip-toast {
    bottom: 170%;
    font-size: 9px;
    padding: 3px 6px;
  }
  #info-traffic-light {
    margin-left: -18px !important;
  }
}

.info-btns {
  position: relative;
}


#heatwave-lottie {
  position: fixed;
  top: 70px;             /* 모바일에서 타이틀바 아래 */
  left: 15px;
  width: 84px;
  height: 84px;
  z-index: 999;
  cursor: pointer;
  pointer-events: auto;
  display: none;
}

@media (max-width: 768px) {
  #heatwave-lottie {
    top: 50px;
    left: 0px;
    width: 60px;
    height: 60px;
  }
}


.heatwave-popup {
  position: fixed;
  top: 80px;
  left: 300px;
  transform: translateX(-50%);
  background: #fff8f0;
  border: 2px solid #ff9800;
  border-radius: 12px;
  padding: 18px 20px;
  z-index: 999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  width: 90%;
  max-width: 320px;
  font-family: 'Segoe UI', sans-serif;
  animation: fadeInPopup 0.3s ease-in-out;
  display: none;
}

.heatwave-popup.active {
  display: block;
}

@media (max-width: 480px) {
  .heatwave-popup {
    top: 140px;
    left: 50%;
    width: 92%;
    padding: 16px;
    font-size: 0.95em;
  }
}

.heatwave-popup h3 {
  margin-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #d84315;
  font-size: 1.2em;
}
.heatwave-close {
  font-size: 1.4em;
  color: #888;
  cursor: pointer;
}
.heatwave-popup p {
  margin: 4px 0;
}
.heatwave-links {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.heatwave-links a {
  background: #fff3e0;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: #d84315;
  font-weight: bold;
  transition: background 0.2s;
}
.heatwave-links a:hover {
  background: #ffe0b2;
}
@keyframes fadeInPopup {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.custom-popup.heatwave-shelter-popup {
  position: absolute;
  background: white;
  border: 2px solid #f57c00;
  border-radius: 12px;
  padding: 12px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  max-width: 300px;
}

.heatwave-shelter-popup .popup-inner {
  display: flex;
  flex-direction: column;
}

.heatwave-shelter-popup .popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 15px;
  color: #d84315;
}

.heatwave-shelter-popup .popup-header button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.heatwave-shelter-popup .popup-content {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  background-color: #ccc;
  border-radius: 22px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.3s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-switch input:checked + .slider {
  background-color: #f57c00;
}

.toggle-switch input:checked + .slider:before {
  transform: translateX(18px);
}

/* ON/OFF 텍스트 */
.heatwave-label {
  font-weight: bold;
  color: #999;
  font-size: 13px;
  min-width: 24px;
  text-align: center;
}

.heatwave-label.active {
  color: #f57c00;
}

#disclaimer {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  max-width: 90%;
  text-align: center;
  box-sizing: border-box;
}

/* ✅ 모바일에서는 더 작게 */
@media (max-width: 480px) {
  #disclaimer {
    font-size: 9px;
    padding: 5px 10px;
  }
}


/* 🟦 민방위 대피소 토글 버튼 */
.shelter-toggle-btn {
  position: absolute;
  top: 80px;
  right: 12px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 900;
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 14px;   /* 네 귀퉁이 둥글게 */
  overflow: hidden;      /* 이미지 모서리도 같이 잘리게 */
}

@media (max-width: 600px) {
  .shelter-toggle-btn {
    top: 63px;
    right: 6.5px;
    width: 32px;
    height: 32px;
    border-radius: 12px;
  }
}

/* 🟨 팝업 외부 래퍼 - 드래그 방지 해제용 */
.custom-overlay-wrapper {
  pointer-events: none;
  max-width: 300px;
  animation: popupFadeIn 0.2s ease-out;
}

/* 🟥 팝업 본체 */
.shelter-popup {
  position: relative;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  padding: 14px 18px 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  pointer-events: auto; /* 내부 요소 클릭 허용 */
  min-width: 240px;
  max-width: 280px;
  word-break: break-word;
  font-family: 'Pretendard', sans-serif;
  word-break: keep-all;
  white-space: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
  z-index: 99999;
}

/* 🧷 닫기 버튼 */
.shelter-popup-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #666;
  font-weight: bold;
  line-height: 1;
  z-index: 10;
}

.shelter-popup-close:hover {
  color: #f44336;
}

/* 🧾 제목 스타일 */
.shelter-popup strong {
  display: inline-block;
  margin-bottom: 6px;
  color: #1651a3;
  font-size: 14px;
  font-weight: bold;
}

/* 🎞️ 애니메이션 효과 */
@keyframes popupFadeIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}



.roadblock-popup {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 10px;
  padding: 14px 16px 10px;
  font-size: 13px;
  color: #333;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  max-width: min(90vw, 450px);
  width: fit-content;         /* 내부 내용에 맞게 자동 너비 */
  min-width: 360px;           /* 너무 좁아지지 않도록 최소 너비 */
  display: inline-block;      /* 너비를 제대로 계산하기 위해 필요 */
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: anywhere;  /* 추가 */
  white-space: normal;
}

.roadblock-popup .popup-title {
  font-weight: bold;
  font-size: 15px;
  color: #b00000;
  margin-bottom: 6px;
}

.roadblock-popup .popup-date {
  font-size: 13px;
  margin: 6px 0;
}

.roadblock-popup .popup-section {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.roadblock-popup .address-line {
  font-weight: bold;
  margin-bottom: 4px;
}

.roadblock-popup .description {
  margin-top: 4px;
}

.roadblock-popup .divider {
  border: none;
  border-top: 1px solid #ccc;
  margin: 8px 0;
}

.roadblock-popup .popup-buttons-fixed {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  width: 100%; /* 중요: 버튼 박스를 전체 너비로 확장 */
}

.roadblock-popup .left-buttons,
.roadblock-popup .right-buttons {
  display: flex;
  gap: 6px;
}

.roadblock-popup .right-buttons {
  margin-left: auto; /* 핵심: 닫기 버튼을 오른쪽 끝으로 밀어냄 */
}

.roadblock-popup .btn-neutral {
  background: #e0e0e0;
  color: #222;
  border: none;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.roadblock-popup .btn-close {
  background: #888;
  color: white;
  border: none;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.roadblock-popup .popup-buttons button {
  float: none !important;
  display: inline-flex !important;
  margin: 0 !important;
}

#roadblockEditorBox {
  position: fixed;
  bottom: 70px;
  right: 20px;
  background: rgba(255,255,255,0.95);
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  padding: 12px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 140px;
}

#roadblockEditorBox select {
  padding: 6px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #aaa;
}

#roadblockEditorBox button {
  padding: 6px;
  font-size: 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
#roadblockEditorBox button:first-of-type {
  background-color: #d32f2f;
  color: white;
}
#roadblockEditorBox button:last-of-type {
  background-color: #aaa;
  color: white;
}
#roadblockEditorBox select:focus,
#roadblockEditorBox button:focus {
  outline: 2px solid #222;
}
/* 전체 화면 블러 처리 */
body.blurred *:not(#roadblockGuide):not(#roadblockGuide *) {
  filter: blur(4px);
  pointer-events: none;
}

/* 팝업은 블러에서 제외 */
#roadblockGuide {
  filter: none !important;
  pointer-events: auto !important;
  z-index: 10001 !important;
}

@keyframes blinkText {
  0%   { opacity: 1; }
  100% { opacity: 0.35; }
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.6); opacity: 0.4; }
  100% { transform: scale(1); opacity: 0.9; }
}

#adminLoginPopup {
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  background: #fdfdfd;
  padding: 24px 28px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  z-index: 10000;
  border: 1px solid #ccc;
  font-family: 'Noto Sans KR', sans-serif;
  width: 320px;
  max-width: 90vw;
}

#adminLoginPopup h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 20px;
  text-align: left;
  color: #333;
}

#adminLoginPopup input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

#adminLoginPopup button {
  padding: 10px 16px;
  font-size: 14px;
  margin-right: 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#adminLoginPopup button:first-of-type {
  background-color: #2a70ff;
  color: white;
}

#adminLoginPopup button:last-of-type {
  background-color: #eee;
  color: #333;
}

#adminLoginPopup #loginError {
  color: #d30000;
  margin-top: 8px;
  font-size: 13px;
  text-align: center;
}


/* 🔓 관리자 로그아웃 팝업 - 로그인 팝업과 동일 스타일 */
#adminLogoutPopup {
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  background: #fdfdfd;
  padding: 24px 28px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  z-index: 10000;
  border: 1px solid #ccc;
  font-family: 'Noto Sans KR', sans-serif;

  /* 🔽 여기부터 변경/추가 */
  width: 400px;        /* → 너비 넉넉하게 (필요하면 380~420px 사이로 조절 가능) */
  max-width: 95vw;
  text-align: center;
}

#adminLogoutPopup h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 20px;
  text-align: left;
  color: #333;
}

/* 로그아웃 / 로그인연장 팝업 공통 버튼 기본 스타일 */
#adminLogoutPopup button,
#adminExtendPopup button {
  padding: 10px 18px;
  font-size: 14px;
  margin: 0 4px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;

  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}

/* 첫 번째 버튼(주 버튼: 지금 로그아웃 / 연장하기) */
#adminLogoutPopup button:first-of-type,
#adminExtendPopup button:first-of-type {
  background-color: #2a70ff;
  color: #fff;
  border-color: #1f5ae0;
}

/* 보조 버튼들(로그인 연장하기 / 취소 / 나중에) */
#adminLogoutPopup button:not(:first-of-type),
#adminExtendPopup button:not(:first-of-type) {
  background: #f3f4f6;
  color: #374151;
}


/* ⏰ 관리자 로그인 연장 팝업 - 로그인/로그아웃 팝업과 동일 스타일 */
#adminExtendPopup {
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  background: #fdfdfd;
  padding: 24px 28px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  z-index: 10000;
  border: 1px solid #ccc;
  font-family: 'Noto Sans KR', sans-serif;

  width: 400px;       /* 팝업 너비 – 필요하면 380~420px 사이로 조절 가능 */
  max-width: 95vw;
  text-align: center;
}

#adminExtendPopup h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 20px;
  text-align: left;
  color: #333;
}

#adminExtendPopup button {
  padding: 10px 16px;
  font-size: 14px;
  margin-right: 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;   /* 버튼 글자 줄바꿈 방지 */
}


/* 로그인/로그아웃/연장 팝업 버튼 공통 hover 효과 */
#adminLoginPopup button,
#adminLogoutPopup button,
#adminExtendPopup button {
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

#adminLoginPopup button:hover,
#adminLogoutPopup button:hover,
#adminExtendPopup button:hover {
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.25);
  transform: translateY(-1px);
}

/* 파란색(확인) 버튼은 살짝 더 진하게 – 첫 번째 버튼 기준 */
#adminLoginPopup button:first-of-type:hover,
#adminLogoutPopup button:first-of-type:hover,
#adminExtendPopup button:first-of-type:hover {
  background-color: #1f5ae0;
  border-color: #1d4ed8;
  color: #fff;
}

/* 회색(취소/나중에) 버튼 hover – 마지막 버튼 기준 */
#adminLoginPopup button:last-of-type:hover,
#adminLogoutPopup button:last-of-type:hover,
#adminExtendPopup button:last-of-type:hover {
  background-color: #e5e7eb;
}



#adminToolbar {
  position: fixed;
  top: 140px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10000;
}

/* 관리자 툴바 하단 방문 통계 */
#adminToolbar .admin-toolbar-footer {
  font-size: 11px;
  color: #64748b;
  border-top: 1px dashed #e5e7eb;
  padding: 8px 10px 10px;
  margin-top: 4px;
  text-align: right;
  white-space: nowrap;
}

/* 방문 통계 – 시작일 문구 */
#adminToolbar .admin-toolbar-footer .visit-since {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 2px;
}

/* (옵션) 작은 달력 아이콘 느낌 */
#adminToolbar .admin-toolbar-footer .visit-since::before {
  content: "📅";
  margin-right: 4px;
  font-size: 10px;
}

/* 접힘(아이콘) 상태에서는 숨김 */
#adminToolbar.admin-panel.collapsed .admin-toolbar-footer {
  display: none;
}

#adminToolbar.admin-toolbar-hidden {
  display: none !important;
}

.admin-toolbar-btn {
  font-size: 14px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(to bottom, #1976d2, #1565c0);
  color: white;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease-in-out;
  letter-spacing: 0.5px;
}

.admin-toolbar-btn:hover {
  background: linear-gradient(to bottom, #1565c0, #0d47a1);
  transform: translateY(-1px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
}

.admin-toolbar-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 600px) {
  #adminToolbar {
    display: flex !important;
    right: 5px !important;
    top: 100px !important;
    transform: scale(0.95) !important;
    transform-origin: top right !important;
  }

  .admin-toolbar-btn {
    font-size: 12px;
    padding: 5px 8px;
  }
}

.admin-toolbar-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: -9999px;
  left: -9999px;
}


/* 📊 방문 통계 팝업 전체 배경(반투명) */
.visit-stats-popup {
  position: fixed;
  inset: 0;
  z-index: 2300;
  background: rgba(0, 0, 0, 0.45);
  display: none;              /* JS에서 flex로 변경 */
  align-items: center;        /* 🔹 세로 중앙 정렬 */
  justify-content: center;    /* 가로 중앙 */
  padding: 16px;              /* 가장자리 여유 */
  overflow-y: auto;           /* 화면보다 커지면 전체적으로 스크롤 */
}

/* 팝업 박스 */
.visit-stats-inner {
  width: 92vw;
  max-width: 520px;
  max-height: 80vh;
  background: #ffffff;
  border-radius: 14px;
  padding: 18px 16px 16px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;   /* ▶ 여기서는 스크롤 안 함 */
}

/* 📜 방문 통계 팝업 스크롤바 : 기본 숨김, hover 시 표시 */

/* 크롬/엣지/사파리 (WebKit 계열) */
.visit-stats-inner::-webkit-scrollbar {
  width: 0;         /* 기본: 안 보이게 */
  height: 0;
}
.visit-stats-inner:hover::-webkit-scrollbar {
  width: 8px;       /* hover 시 세로 스크롤바 표시 */
}
.visit-stats-inner::-webkit-scrollbar-track {
  background: transparent;
}
.visit-stats-inner::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.7); /* slate-ish */
  border-radius: 9999px;
}

/* 파이어폭스 */
.visit-stats-inner {
  scrollbar-width: none;      /* 기본: 숨김 */
}
.visit-stats-inner:hover {
  scrollbar-width: thin;      /* hover 시 얇게 보이게 */
}


/* 평균 아래부터 내용 스크롤 영역 */
.visit-stats-scroll {
  margin-top: 6px;
  flex: 1 1 auto;        /* 남은 높이를 채움 */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;    /* 내용 오른쪽 살짝 여유 */
}

/* 스크롤바 완전 숨기기 (WebKit) */
.visit-stats-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 스크롤바 숨기기 (Firefox) */
.visit-stats-scroll {
  scrollbar-width: none;
}



/* 헤더 */
.visit-stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.visit-stats-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #222;
}

.visit-stats-close {
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: #666;
  padding: 0 4px;
}
.visit-stats-close:hover {
  color: #e53935;
}

/* 요약 영역 */
.visit-stats-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.visit-stats-summary .summary-item {
  flex: 1 1 30%;
  background: #f5f7fb;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.visit-stats-summary .label {
  font-size: 12px;
  color: #666;
}
.visit-stats-summary .value {
  font-size: 16px;
  font-weight: 700;
  color: #1e3a8a;
}

/* 표 영역 */
.visit-stats-table-wrapper {
  flex: 0 0 auto;
  max-height: 200px;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid #e0e3eb;
  background: #fafbff;
}

.visit-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.visit-stats-table thead {
  background: #e5ebf7;
}
.visit-stats-table th,
.visit-stats-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #dde2ef;
  text-align: right;
}
.visit-stats-table th:first-child,
.visit-stats-table td:first-child {
  text-align: left;
}
.visit-stats-table tbody tr:nth-child(even) {
  background: #f7f9ff;
}

/* 그래프 영역 */
.visit-stats-chart-wrapper {
  flex: 0 0 auto;
  margin-top: 6px;
  border-radius: 8px;
  border: 1px solid #e0e3eb;
  padding: 8px 10px 8px 10px;
  background: linear-gradient(135deg, #f9fbff, #f2f5fc);
  display: block;
  overflow-x: auto;    /* 🔹 가로 스크롤 */
  overflow-y: hidden;
}

/* 막대 그래프 컨테이너 (실제 넓어지는 부분) */
.visit-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 140px;
  padding-bottom: 4px;
  min-width: 100%;
}

/* 개별 막대 + 라벨 묶음 */
.visit-bar-wrap {
  flex: 0 0 26px;               /* 🔹 고정 폭 -> 개수만큼 가로 길이 늘어남 */
  width: 26px;         /* 🔹 가로폭도 18px로 강제 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* 막대 자체 */
.visit-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #4f46e5, #2563eb);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
  transition: height 0.2s ease-out;
}

/* 🔹 이상치(축 상한 넘어서 잘린 막대) 표시 */
.visit-bar.outlier {
  position: relative;
}

/* 막대 중간에 물결(지그재그) 띠 */
.visit-bar.outlier::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 40%;                     /* 막대 중간쯤에 */
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.9) 0px,
    rgba(255,255,255,0.9) 3px,
    rgba(255,255,255,0)   3px,
    rgba(255,255,255,0)   6px
  );
  opacity: 0.9;
}

/* x축 라벨 (MM-DD 또는 MM) */
.visit-bar-label {
  margin-top: 4px;
  font-size: 10px;
  color: #374151;
  white-space: nowrap;
}


/* 모바일에서도 보기 좋게 */
@media (max-width: 480px) {
  .visit-stats-inner {
    width: 96vw;
    padding: 16px 12px 12px 12px;
  }
  .visit-stats-summary .value {
    font-size: 14px;
  }
  .visit-stats-table {
    font-size: 12px;
  }
}


/* 📊 방문 통계 평균 표시줄 */
.visit-stats-avg {
  margin-top: -2px;
  margin-bottom: 6px;
  font-size: 14px;
  color: #4b5563;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.visit-stats-avg span {
  white-space: nowrap;
}

.visit-stats-avg strong {
  font-weight: 700;
  color: #1e3a8a;
}

@media (max-width: 480px) {
  .visit-stats-avg {
    font-size: 11px;
  }
}

/* 섹션 제목 (일별 / 월별) */
.visit-section-title {
  margin-top: 6px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
}

/* 월별 막대 그래프 색상 */
.visit-month-bars .visit-bar {
  background: linear-gradient(180deg, #059669, #047857);
  box-shadow: 0 2px 6px rgba(4, 120, 87, 0.35);
}

.visit-month-bar {
  flex: 0 0 26px !important;
}

#recurringControlPopup {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  display: none;
  z-index: 10000;
}

#recurringControlPopup .popup-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 24px 20px;
  border-radius: 16px;
  width: 95%;
  max-width: 920px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  font-family: 'Pretendard', sans-serif;
}

#recurringControlPopup.readonly .popup-inner {
  max-width: 580px;
}

@media (max-width: 600px) {
  #recurringControlPopup .popup-inner {
    top: 45%;
    width: 90%;
    max-height: 70vh;
    max-width: 100%;
  }
}

/* ✅ 전체 일괄 제어 행 및 개별 항목 동일 적용 */
.recurring-row {
  display: grid;
  grid-template-columns: 1fr 100px 180px 80px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.recurring-row strong {
  width: 160px;
  flex-shrink: 0;
}

.recurring-row input[type="datetime-local"] {
  flex: 1;
  min-width: 180px;
}

.recurring-row label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.recurring-row button {
  padding: 6px 12px;
  font-size: 14px;
  background: #1565c0;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.recurring-row.no-border {
  border-bottom: none !important;
}

.recurring-row > div:first-child {
  position: sticky;
  left: 0;
  background: white;  /* ✅ 겹침 방지용 배경 */
  z-index: 2;
  padding-left: 4px;
  padding-right: 4px;
  box-shadow: 2px 0 2px -1px rgba(0,0,0,0.1);  /* ✅ 경계 구분 */
  white-space: nowrap;  /* ✅ 줄바꿈 방지 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.popup-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  color: #333;
  cursor: pointer;
  z-index: 10001;
}

.popup-close-btn:hover {
  color: #000;
}

#openPublicControlBtn {
  position: fixed;
  top: 140px;
  left: 16px;
  z-index: 1100;

  background: linear-gradient(to bottom, #d32f2f, #c62828); /* 빨간 계열 그라데이션 */
  color: white;
  font-weight: bold;
  font-size: 14px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease-in-out;
  letter-spacing: 0.4px;
}

#openPublicControlBtn:hover {
  background: linear-gradient(to bottom, #c62828, #b71c1c);
  transform: translateY(-1px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
}

#openPublicControlBtn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 600px) {
  #openPublicControlBtn {
    top: 100px !important;
    left: 8px !important;
    font-size: 12.2px !important;
    padding: 5px 10px !important;
    border-radius: 6px;
    letter-spacing: 0.2px;
  }
}

.risk-popup {
  position: fixed; /* absolute → fixed */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
  animation: fadeIn 0.2s ease;
  font-family: 'Noto Sans KR', sans-serif;
  z-index: 9999; /* 지도보다 위에 표시 */
  font-size: 15px;
  min-width: 260px;
}
.risk-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  border-bottom: 1px solid #eee;
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.risk-popup-close {
  cursor: pointer;
  font-size: 20px;
  color: #666;
}
.risk-popup-close:hover {
  color: #000;
}
.risk-popup select,
.risk-popup input[type="text"] {
  font-size: 15px;
  padding: 6px 8px;
  height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.risk-popup button {
  background: #1976d2;
  color: #fff;
  border: none;
  padding: 6px 14px;
  font-size: 15px;
  border-radius: 4px;
  cursor: pointer;
  height: 32px;
}
.risk-popup button:hover {
  background: #0f5ca8;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* 관리자 패널 컨테이너 */
#adminToolbar.admin-panel{
  position: fixed;
  top: 140px;
  right: 12px;
  z-index: 990;
  width: 200px;
  background: rgba(255,255,255,0.96);
  border: 1px solid #e3e6ee;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 상단 제목줄 */
.admin-panel-header{
  display:flex; align-items:center; gap:10px;
  font-weight:800;
  padding:12px 16px;
  font-size: 18px;
  color:#fff;
  background: linear-gradient(180deg,#1f2937 0,#0f172a 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.admin-panel-header i{ font-size:18px; }

/* 그룹 버튼(아코디언 헤더) */
.admin-group-btn{
  font-size:14.5px;
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:#fff; border:none; cursor:pointer;
  font-weight:700; color:#253046;
  border-bottom:1px dashed #e9ecf2;
}
.admin-group-btn .leading{ font-size:18px; width:22px; text-align:center; }
.admin-group-btn .caret{ font-size:14px; }
.admin-group-btn i.caret{ transition:transform .15s ease; }
.admin-group[open] .admin-group-btn i.caret{ transform:rotate(180deg); }

.admin-group-btn:hover{
  background: #f6f7fb;
}

/* 그룹 바디 */
.admin-group-body{
  display:none;
  padding:10px 10px 12px 10px;
  background:#fafbfd;
}
.admin-group[open] .admin-group-body{ display:block; }

/* 아이템 버튼 */
.admin-item{
  width:100%;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin:6px 0;
  background: #1565c0; color:#fff; border:none; border-radius:10px;
  font-weight:700; cursor:pointer;
  box-shadow: 0 6px 14px rgba(21,101,192,.25);
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.admin-item:hover{ transform: translateY(-1px); box-shadow:0 10px 20px rgba(21,101,192,.28); }
.admin-item i{ width:18px; text-align:center; }

/* 모바일: 패널 폭/폰트 축소 */
@media (max-width:600px){
  #adminToolbar.admin-panel{ width: 220px; right: 10px; top: 76px; }
  .admin-item{ padding:9px 10px; font-size:13px; }
  .admin-group-btn{ padding:9px 10px; font-size:13px; }
}
/* ↔️ 접힘/펼침 공통 전환 */
#adminToolbar.admin-panel{
  transition: width .16s ease, height .16s ease, border-radius .16s ease, box-shadow .16s ease;
}

/* ✅ 접힘 상태: 아이콘만 보이는 작은 버튼 */
#adminToolbar.admin-panel.collapsed{
  width: 52px;      /* 민방위 버튼과 비슷한 크기 */
  height: 52px;
  right: 12px;
  padding: 0;
  border-radius: 14px;
  overflow: hidden; /* 내용 잘라냄 */
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
}

/* 접힘 상태에선 헤더가 곧 버튼 */
#adminToolbar.admin-panel.collapsed .admin-panel-header{
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 0;
  background: linear-gradient(180deg,#1f2937 0,#0f172a 100%);
  cursor: pointer;
}
#adminToolbar.admin-panel.collapsed .admin-panel-header span{ display:none; } /* 텍스트 숨김 */
#adminToolbar.admin-panel.collapsed .admin-panel-header i{ font-size:22px; }

/* 접힘 상태에선 본문 숨김 */
#adminToolbar.admin-panel.collapsed .admin-group{ display:none; }

/* 펼침 상태에서 헤더는 제목줄(클릭 시 다시 접힘) */
#adminPanelHeader{ cursor: pointer; }

#adminToolbar.collapsed {
  width: 50px;
  height: 50px;
  padding: 0;
  justify-content: center;
  align-items: center;
}

#adminToolbar.collapsed .admin-panel-header {
  justify-content: center;
}

#adminToolbar.collapsed .admin-group,
#adminToolbar.collapsed .admin-group-body {
  display: none;
}

/* 📱 모바일 최적화 */
@media (max-width:600px){
  /* 패널 위치/크기 축소 */
  #adminToolbar.admin-panel{ top: 105px !important; right: 5px !important; width: 190px; }
  #adminToolbar.admin-panel.collapsed{
    width: 38px;
    height: 38px;
    top: 105px !important;
    right: 5px !important;
    border-radius: 12px;
  }
  .admin-panel-header{ font-size:15px; padding:10px 12px; }
  .admin-group-btn{ font-size:13.5px; padding:9px 10px; }
  .admin-group-btn .leading{ font-size:17px; width:20px; }
  .admin-item{ padding:8px 10px; font-size:13px; border-radius: 9px; }

  /* 위험도 팝업 */
  .risk-popup{
    width: 90vw; max-width: 420px; min-width: unset;
    padding: 16px; font-size:14px; max-height: 80vh; overflow-y:auto;
  }
  .risk-popup select, .risk-popup input[type="text"]{
    font-size:14px; height: 34px;
  }
  .risk-popup button{
    padding: 6px 12px; height: 34px; font-size:14px;
  }

  /* 통제구간 제어 팝업 */
  #recurringControlPopup .popup-inner{
    width: 92vw; max-width: 560px; max-height: 78vh; padding: 18px 14px;
  }
  .recurring-row{
    grid-template-columns: 1fr 88px 150px 64px; /* 칼럼 폭 축소 */
    gap: 8px; padding: 5px 0;
  }
  .recurring-row > div:first-child{
    max-width: 55vw;            /* 고정 제목 열 줄바꿈 방지 */
  }
}

/* === Weather Popup: 최종 통일 규칙 === */
.weather-popup {
  position: fixed;
  top: 80px;          /* 타이틀바 바로 아래 */
  right: 110px;        /* 우측 여백 */
  z-index: 2300;
  width: clamp(180px, 28vw, 240px);

  /* 박스 스타일 */
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);

  /* 상태/애니메이션 */
  display: none;          /* 기본은 감춤 */
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity .2s ease, transform .2s ease;
  transform-origin: top right;        /* 우상단 기준으로 펼쳐지는 느낌 */
  will-change: transform, opacity;

  /* 텍스트 기본 */
  font-size: 14px;
  line-height: 1.5;
}

.weather-popup.active {
  display: block !important;
  opacity: 1;
  transform: translateY(0);
  animation: weatherPopupIn .22s cubic-bezier(.16, 1, .3, 1) both;
}

/* 헤더/내용 살짝 정리 */
.weather-popup h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #2c3e50;
}

.weather-popup .weather-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.weather-popup .weather-item:last-child { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .weather-popup, .weather-popup.active {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
@keyframes weatherPopupIn {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
.weather-popup .close-btn,
.weather-popup .weather-close,
.weather-popup .btn-close,
.weather-popup .close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;           /* ← 크게 느껴진 부분 축소 */
  height: 24px;
  border: none;
  border-radius: 9999px;
  background: rgba(0,0,0,0.04);
  display: inline-grid;
  place-items: center;
  font-size: 14px;       /* X 아이콘/문자 크기 */
  line-height: 1;
  cursor: pointer;
  opacity: .75;
  transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}
.weather-popup .close-btn:hover,
.weather-popup .weather-close:hover,
.weather-popup .btn-close:hover,
.weather-popup .close:hover {
  opacity: 1;
  transform: scale(1.06);
  background: rgba(0,0,0,0.06);
}

/* 모바일 폰트 & 폭 미세 조정 */
@media (max-width: 600px) {
  .weather-popup {
    top: 60px;
    right: 10px;
    width: clamp(160px, 64vw, 200px);
    padding: 12px;
    font-size: 12px;           /* 모바일에서 과하게 커지는 것 완화 */
  }
  .weather-popup h3 { font-size: 14px; }
  .weather-popup .close-btn,
  .weather-popup .weather-close,
  .weather-popup .btn-close,
  .weather-popup .close {
    width: 22px;
    height: 22px;
    font-size: 13px;
    top: 5px;
    right: 5px;
  }
}

/* === 신고(촬영) 버튼: 기존 토글 스타일과 완전 동일한 톤 === */
.ctl-btn.ctl-camera{
  position: fixed;
  right: 10px;
  bottom: calc(170px + 60px + 10px); /* 데스크탑: search(170) 바로 위(60 + 간격10) → 240px */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(145deg, #FFE26A, #F5B915);
  border: 3px solid #FFF3BF;
  box-shadow: 0 4px 12px rgba(255, 193, 7, .35), inset 0 2px 4px rgba(255, 255, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.ctl-btn.ctl-camera:hover{
  background: linear-gradient(145deg, #FFF176, #FFCA28);
  border-color: #FFE082;
  box-shadow: 0 6px 16px rgba(255, 193, 7, .5), inset 0 2px 6px rgba(255, 255, 255, .3);
  transform: scale(1.1);
}

/* 아이콘(내부 비워둔 <a>에 아이콘을 만들어줌) */
.ctl-btn.ctl-camera::before{
  content:"";
  display:block;
  width:40px; height:40px;
  background-repeat:no-repeat; background-position:center; background-size:30px 30px;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\
    <path d='M9.5 6h5l1.2 1.6H20a2 2 0 0 1 2 2v7.9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9.6a2 2 0 0 1 2-2h4.3L9.5 6z' stroke='%23333333' stroke-width='1.8'/>\
    <circle cx='12' cy='13' r='4' stroke='%23333333' stroke-width='1.8'/>\
  </svg>");
}

/* —— 모바일: myLocationBtn(156px) 바로 위에 붙이기 ——
   myLocationBtn bottom=156px, height=41px, 간격 8px → 205px */
@media screen and (max-width: 768px){
  .ctl-btn.ctl-camera{
    right: 5px;
    bottom: calc(156px + 41px + 25px);  /* = 205px */
    width: 38px; height: 38px;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(255,255,255,0.2), inset 0 1px 2px rgba(255,255,255,0.2);
  }
  .ctl-btn.ctl-camera::before{
    width:22px; height:22px; background-size:22px 22px;
  }
}

/* admin-item은 a든 button이든 동일 스타일 적용 */
#adminToolbar .admin-group-body .admin-item{
  font-size:14px;           /* 버튼들과 동일 */
  text-decoration:none;     /* 밑줄 제거 */
}
/* 관리자 툴바: 내용 영역 패딩은 좌우 대칭 */
#adminToolbar .admin-group-body{
  padding: 8px;
  overflow: visible; /* 내부 버튼 둥근 모서리 잘림 방지 */
}

/* 버튼/링크를 동일한 블록(플렉스) 버튼으로 강제 */
#adminToolbar .admin-group-body .admin-item{
  display: flex;                 /* ← a, button 모두 동일하게 */
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;        /* 내부 패딩 포함하여 100% */
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;         /* 링크 밑줄 방지(안전 차원) */
}

/* (아이콘/텍스트 정렬 안정화) */
#adminToolbar .admin-group-body .admin-item i{ flex:0 0 auto; }
#adminToolbar .admin-group-body .admin-item span{ flex:1 1 auto; min-width:0; }


.hidden {
  display: none !important;
}

/* 겨울모드(바디 클래스)에서 강제 숨김 */
body.winter-mode #myLocationBtn,
body.winter-mode #btnReport,
body.winter-mode .search-toggle,
body.winter-mode .bulk-sms-toggle,
body.winter-mode .add-location-toggle {
  display: none !important;
}


/* 섹션 구분 */
.snow-section + .snow-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.snow-section-header {
  font-size: 14px;
  font-weight: 700;
  color: #e6f2ff;
  margin-bottom: 6px;
}

/* 스위치 스타일 */
.switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  user-select: none;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  width: 38px; height: 20px;
  background-color: #7a8699;
  border-radius: 34px;
  position: relative;
  transition: .3s;
}
.switch .slider::before {
  content: "";
  position: absolute;
  height: 16px; width: 16px;
  left: 2px; bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: .3s;
}
.switch input:checked + .slider { background-color: #4dabf7; }
.switch input:checked + .slider::before { transform: translateX(18px); }
.label-text { font-size: 13px; }

/* 라디오 그룹 */
.snow-route-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.snow-route-group label {
  font-size: 13px;
  color: #f1f5f9;
  cursor: pointer;
}
.snow-route-group input {
  accent-color: #4dabf7;
}

/* 라디오/스위치 톤 통일 */
#snowToolbar .snow-route-group label { color:#253046; font-weight:600; }
#snowToolbar .snow-route-group input { accent-color:#1565c0; }
#snowToolbar .switch .slider{ background:#7a8699; }
#snowToolbar .switch input:checked + .slider{ background:#4dabf7; }

/* ❄️ 제설 패널도 관리자 패널과 동일 톤 적용 */
#snowToolbar.admin-panel{
  position: fixed;
  top: 80px;
  bottom: 30px;
  left: 12px;
  z-index: 990;
  width: 230px;
  background: rgba(255,255,255,0.96);
  border: 1px solid #e3e6ee;
  border-radius: 14px;                 /* ← 라운딩 복구 */
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);

  height: auto;                   /* ✅ 높이 자동(Top/Bottom로 결정) */
  max-height: none;               /* ✅ 이전 제한 해제 */
  overflow-x: hidden;             /* ✅ 가로 스크롤 방지 */
  overflow-y: hidden;   /* ✅ 패널 전체 스크롤 금지 */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;         /* ✅ 섹션 간 간격은 gap으로 */
  min-height: 0;    /* ✅ 내부 flex 아이템 수축 허용 */
}

/* ✅ 그룹 카드가 내부 스크롤을 자르지 않도록 */
#snowToolbar .admin-group{
  overflow: visible !important;
  flex: 0 0 auto;
}

/* 헤더/아코디언/아이템 톤을 snowToolbar에도 복제 */
#snowToolbar .admin-panel-header{
  display:flex; align-items:center; gap:8px;
  font-weight:800; padding:12px 16px;
  font-size:16px; color:#fff;
  background: linear-gradient(180deg,#1f2937 0,#0f172a 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
#snowToolbar .admin-group-btn{
  font-size:14.5px; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px;
  background:#fff; border:none; cursor:pointer;
  font-weight:700; color:#253046;
  border-bottom:1px dashed #e9ecf2;
}
#snowToolbar .admin-group-btn .caret{ transition:transform .15s ease; }
#snowToolbar .admin-group[open] .admin-group-btn .caret{ transform:rotate(180deg); }

#snowToolbar .admin-group-body{
  display:none; padding:10px 10px 12px 10px; background:#fafbfd;

  overflow-y: visible;  /* ✅ ‘노선 표시’ 외 섹션은 스크롤 없음 */
  overflow-x: hidden;     /* ✅ 가로 스크롤 차단 */
  overscroll-behavior: contain;
}
#snowToolbar .admin-group[open] .admin-group-body{ display:block; }

#snowToolbar .switch .slider{ background:#7a8699; }
#snowToolbar .switch input:checked + .slider{ background:#4dabf7; }
#snowToolbar .snow-route-group label{ color:#253046; font-weight:600; }
#snowToolbar .snow-route-group input{ accent-color:#1565c0; }



/* ===== 제설 패널 밸런스 튜닝 ===== */
#snowToolbar .admin-group-btn{
  font-size: 15px;            /* 부타이틀 글자 키움 */
  font-weight: 800;
  color: #0f172a;
  padding: 10px 12px;
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin: 8px 8px 0;
}
#snowToolbar .admin-group[open] .admin-group-btn{
  box-shadow: inset 0 -1px 0 #e5e7eb;
}
#snowToolbar .admin-group .admin-group-body{
  padding: 10px 12px 12px;
}

/* 토글 스위치 크기와 레이블 폰트 조정 */
#snowToolbar .switch .label-text{
  font-size: 14px;            /* 토글 옆 텍스트 키움 */
  font-weight: 700;
  margin-left: 8px;
}

/* 토글 스위치 자체 키우기(기본 .slider 구조 가정) */
#snowToolbar .switch .slider{
  width: 48px !important;     /* 기존보다 넓게 */
  height: 28px !important;
}
#snowToolbar .switch .slider:before{
  width: 22px !important;
  height: 22px !important;
  left: 3px !important;
  bottom: 3px !important;
}

/* 체크박스 글씨는 살짝 작게 + 줄간격 정돈 */
#snowToolbar .snow-filter-wrap{        /* 래퍼에 클래스 부여(아래 3번 참고) */
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  font-size: 13px;
  line-height: 1.25;
  touch-action: pan-y;
  /* ✅ 스크롤바 숨김 */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge 레거시 */
}
#snowToolbar .snow-filter-wrap::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;               /* Chrome/Safari */
}
#snowToolbar .snow-filter-wrap label{
  gap: 6px;
}
#snowToolbar .snow-filter-wrap .sec-title{  /* “읍면동”, “상당구청”, “타 기관” 소제목 */
  font-size: 12px;
  color: #64748b;
  margin-top: 8px;
}

/* ✅ '노선 표시' 섹션(안에 .snow-route-group이 있는 섹션)만 남은 높이 모두 차지 */
#snowToolbar .admin-group:has(.snow-route-group){
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;      /* 남은 공간 가져감 */
  min-height: 0;       /* 내부 스크롤 허용 */
}

/* 섹션 본문도 flex 컬럼 + 남은 공간 채우기 */
#snowToolbar .admin-group:has(.snow-route-group) .admin-group-body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}

/* 실제 스크롤 주체: 체크리스트 래퍼 */
#snowToolbar .admin-group:has(.snow-route-group) .snow-filter-wrap{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;     /* 스크롤은 여기서만 */
  overflow-x: hidden;
  max-height: none !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#snowToolbar .admin-group:has(.snow-route-group) .snow-filter-wrap::-webkit-scrollbar{
  width: 0; height: 0; display: none;
}

/* 제설 패널 카드/버튼 영역을 컨테이너 안쪽으로 들이기 */
#snowToolbar .admin-group { 
  margin: 0;                 /* ✅ gap으로 대체 */
  border-radius: 10px;
  overflow: visible;         /* ✅ 내부 스크롤 영역이 잘리지 않게 */
}

/* 부타이틀 버튼(‘읍면동 경계’, ‘노선 표시’) */
#snowToolbar .admin-group-btn{
  padding: 10px 12px;
  margin: 0;                 /* 버튼 자체는 margin 0 */
  max-width: 100%;
  box-sizing: border-box;    /* 패딩 포함해서 100% 계산 */
}

/* 섹션 내용 */
#snowToolbar .admin-group-body{
  padding: 10px 12px 12px;
  box-sizing: border-box;
  min-height: 0;   /* ✅ 안전망 */
}

/* 이 블록만 제설 패널에 한정해서 줄임 */
#snowToolbar .switch{
  transform: scale(.92);               /* 이전보다 작게 */
  transform-origin: left center;
}

#snowToolbar .switch .slider{
  width: 38px;                         /* 42 → 38 */
  height: 20px;                        /* 22 → 20 */
}

#snowToolbar .switch .slider:before{
  width: 16px; height: 16px;           /* 손잡이 크기 */
  left: 2px; bottom: 2px;
}

#snowToolbar .switch input:checked + .slider:before{
  transform: translateX(18px);         /* 트랙 폭에 맞춰 이동값 조정 */
}

/* installSnowFilterSelect에서 추가한 래퍼 클래스에 맞춰 타이포만 살짝 업 */
#snowToolbar .snow-filter-wrap label span{
  font-size: 13.2px;   /* 12~13에서 살짝 키움 */
  line-height: 1.35;
}

/* 이미 쓰고 있는 .sec-title에 덮어쓰기 */
#snowToolbar .sec-title{
  margin: 6px 0 2px;
  padding: 0;                  /* 카드 밖으로 안 나가게 */
  font-size: 12.5px;           /* 과하지 않게 */
  font-weight: 700;
  color: #475569;              /* 살짝 진한 톤 */
  opacity: .95;
}

/* === ❄️ 제설 패널 미세 조정 최종 === */

/* 토글 스위치 더 작게 */
#snowToolbar .switch {
  transform: scale(0.86);        /* 🔹 이전보다 20% 더 작게 */
  transform-origin: left center;
}

#snowToolbar .switch .slider {
  width: 36px !important;        /* 폭 더 줄임 */
  height: 20px !important;
  position: relative !important;
  border-radius: 34px !important;
}

#snowToolbar .switch .slider:before {
  position: absolute !important;
  top: 3px !important;                 /* ← 세로 중앙(20px 높이에서 14px 손잡이) */
  left: 3px !important;
  bottom: auto !important;             /* ← 아래로 붙던 것 해제 */
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
}

#snowToolbar .switch input:checked + .slider:before {
  transform: translateX(14px) !important;   /* 손잡이 이동값도 조정 */
}

/* ‘경계 표시’ 토글 옆 글씨 */
#snowToolbar .switch .label-text {
  font-size: 16.5px !important;    /* 🔹 기존보다 조금 더 큼 */
  font-weight: 700;
  margin-left: 8px;
  color: #1e293b;
}

/* 체크박스 영역 폰트 살짝 확대 */
#snowToolbar .snow-filter-wrap label span {
  font-size: 14px !important;    /* 🔹 13.2 → 14 */
  line-height: 1.45;
  color: #253046;
}

/* 섹션 소제목(읍면동 / 구청 / 타 기관) 살짝 키움 */
#snowToolbar .sec-title {
  font-size: 13px !important;
  font-weight: 800;
  color: #334155;
  margin: 6px 0 3px;
}


/* ❄ 겨울모드 전용: 검색/내 위치 버튼을 오른쪽 하단 세로 스택으로 */
body.winter-mode .search-toggle,
body.winter-mode #myLocationBtn{
  position: fixed !important;
  right: 14px !important;
  z-index: 980 !important;
  display: inline-flex !important;   /* 숨김/레이아웃 강제 복원 */
  pointer-events: auto;
}

/* 스택 간격: 검색 위, 내 위치 아래 */
body.winter-mode .search-toggle { bottom: 88px !important; }
body.winter-mode #myLocationBtn { bottom: 28px !important; }

/* 만약 버튼이 너무 크거나 작으면 여기서만 살짝 보정(선택) */
body.winter-mode .search-toggle button,
body.winter-mode #myLocationBtn{
  /* padding, border-radius 등 필요 시만 조절 */
}

/* ❄ 겨울모드: 검색/내 위치 버튼 위치 덮어쓰기 */
body.winter-mode .search-toggle,
body.winter-mode #myLocationBtn{
  position: fixed !important;
  right: 14px !important;
  z-index: 980 !important;
  display: inline-flex !important;
  pointer-events: auto;
}

/* 스택: 검색 위, 내 위치 아래 */
body.winter-mode .search-toggle { bottom: 88px !important; }

/* 내 위치는 '모바일에서만' 보이기 + 위치 지정 */
@media (max-width: 600px) {
  body.winter-mode #myLocationBtn { bottom: 28px !important; }
}
@media (min-width: 601px) {
  body.winter-mode #myLocationBtn { display: none !important; }
}



/* === 📱 모바일 튜닝: snowToolbar === */
@media (max-width: 600px){
  #snowToolbar.admin-panel{
    top: 59px !important;                 /* 살짝 위로 */
    left: 8px;
    width: 220px;              /* ✅ 넓혀서 줄바꿈 방지 */
    max-height: calc(100vh - 200px); /* ✅ 화면 초과 방지 */
    overflow: hidden;          /* 컨테이너 자체는 숨김 */
  }
  /* 섹션 버튼 글자 줄바꿈 방지 */
  #snowToolbar .admin-group-btn span{ white-space: nowrap; }
  #snowToolbar .switch .label-text{ white-space: nowrap; }
  /* 체크리스트만 내부 스크롤 */
  #snowToolbar .snow-filter-wrap{
    max-height: min(420px, calc(100vh - 220px));  /* ✅ 길면 스크롤 */
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* 바디 박스 스크롤 – 길어져도 화면 안 짤리게 */
  #snowToolbar .admin-group-body{
    max-height: 44vh;          /* 상황에 맞게 40~50vh 사이 조절 가능 */
    overflow-y: auto;
  }
}

/* 겨울모드: 버튼 스택 간격 조정 */
body.winter-mode .search-toggle { bottom: 75px !important; }
@media (max-width: 600px){
  body.winter-mode #myLocationBtn { bottom: 28px !important; }
}

/* 🧩 데스크탑에서 snowToolbar 전체가 잘리지 않도록 수정 */
@media (min-width: 601px) {
  #snowToolbar.admin-panel {
    top: 80px;
    bottom: 35px;          /* ⬅ 더 길게 내리고 싶으면 8~16px로 조정 */
    max-height: none;      /* ⬅ 높이 제한 해제 (top/bottom으로 결정) */
    height: auto;          /* ⬅ 고정 */
    overflow-y: hidden;    /* ⬅ 컨테이너 스크롤 금지 (노선 섹션만 스크롤) */
    overflow-x: hidden;

    display: flex;
    flex-direction: column;
    min-height: 0;
  }
}

/* === ❄ snowToolbar 버튼화(접힘) 스타일 === */
#snowToolbar.collapsed{
  width: 52px !important;          /* 데스크탑 크기 */
  height: 52px !important;
  border-radius: 14px !important;   /* ⬅ 둥근 사각형 */
  padding: 0 !important;
  overflow: visible !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

/* 접힘일 땐 헤더의 아이콘만 보이게 */
#snowToolbar.collapsed .admin-group,
#snowToolbar.collapsed .admin-panel-header span { display: none !important; }

#snowToolbar.collapsed .admin-panel-header{
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  width: 52px;                      /* 컨테이너와 동일 크기 */
  height: 52px;
  min-width:52px !important;
  min-height:52px !important;
  border-radius: 14px;              /* ⬅ 둥근 사각형 */
  background: linear-gradient(180deg,#1f2937 0,#0f172a 100%);
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  cursor: pointer;
}

/* 헤더의 ❄ 아이콘 크기 */
#snowToolbar.collapsed .admin-panel-header i,
#snowToolbar.collapsed .admin-panel-header .fa-snowflake{
  font-size: 26px !important;
  margin: 0 !important;
}

/* 📱 모바일에선 더 작게 */
@media (max-width:600px){
  #snowToolbar.collapsed{
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }
  #snowToolbar.collapsed .admin-panel-header{
    width: 38px;
    height: 38px;
    min-width:38px !important;
    min-height:38px !important;
    border-radius: 12px;
  }
  #snowToolbar.collapsed .admin-panel-header i,
  #snowToolbar.collapsed .admin-panel-header .fa-snowflake{
    font-size: 22px !important;
  }
}





/* === legend 길이/두께/여백 최종 통일 === */
#snowToolbar{ --padR:0px; }

#snowToolbar .sec-title,
#snowToolbar label.legend-row--full{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:left !important;
  gap:8px !important;
  width:100% !important;
  padding-right: var(--padR) !important;
  box-sizing: border-box !important;
  min-width:0 !important;
}

/* 체크박스 자리만큼 스페이서 (소제목 줄과 '전체 노선' 줄의 기준 통일) */
#snowToolbar .legend-spacer{
  flex:0 0 22px !important;   /* 체크박스 폭(대략) */
  height:0 !important;
}

/* 실선 공통 규격 – 3색/단일 모두 동일 (점선 스타일) */
#snowToolbar .legend-line,
#snowToolbar .legend-mixed-line{
  flex:1 1 auto !important;
  min-width:0 !important;
  height:2px !important;                /* 두께는 그대로 2px */
  margin-left:8px !important;
  margin-right:0 !important;
  border-radius:999px !important;
  box-shadow:none !important;
  background-color: transparent !important;
}

/* 색상은 요소에 변수로만 지정 (background로 덮어쓰지 않기!) */
#snowToolbar .sec-title.legend-eupmyeondong{ --legend-color:#1e73ff; }
#snowToolbar .sec-title.legend-sangdang   { --legend-color:#ff4d4f; }
#snowToolbar .sec-title.legend-others     { --legend-color:#8b5cf6; }

/* 단색 줄 → 흰 바탕 위에 색깔 점선 */
#snowToolbar .sec-title .legend-line{
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 2px,
    var(--legend-color, #1e73ff) 2px,
    var(--legend-color, #1e73ff) 4px
  );
}

/* 3색 혼합선 → 각 1/3 구간마다 색깔 점선 */
#snowToolbar .legend-mixed-line{
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 2px,
      #1e73ff 2px,
      #1e73ff 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 2px,
      #ff4d4f 2px,
      #ff4d4f 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 2px,
      #8b5cf6 2px,
      #8b5cf6 4px
    );
  background-size: 33.333% 100%, 33.333% 100%, 33.333% 100%;
  background-position: 0 0, 50% 0, 100% 0;
  background-repeat: no-repeat;
}

/* 🎨 소타이틀(제설주체 / 우선순위) 음영 강조 */
#snowToolbar .snow-filter-wrap .subgroup-title{
  display:block !important;
  margin:10px 0 6px 0 !important;
  padding:10px 8px 8px 8px !important;
  font-weight:800 !important;
  font-size:14px !important;
  color:#1f2937 !important;
  border-top:1px solid rgba(0,0,0,0.15) !important;
  border-bottom:1px solid rgba(0,0,0,0.1) !important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.9) 0%,
    rgba(240,248,255,0.9) 100%
  ) !important; /* ⬅ 은은한 파스텔 블루톤 */
  border-radius:6px !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.4),
              inset 0 -1px 1px rgba(0,0,0,0.05);
}


/* 🔹 타 기관 박스 아래 간격 확대 */
#snowToolbar .agency-box{
  margin-bottom: 18px !important; /* 기존보다 여유 있게 */
}


/* === 읍면동 접기/펴기: 충돌 제거 + 전환 정의 === */

/* 과거 규칙 무력화 */
#snowToolbar .emd-list.collapsed{ display:block !important; }

/* 새 전환 규칙 */
#snowToolbar .emd-list{
  display:block !important;         /* flex 옛 규칙 덮어쓰기 */
  overflow:hidden !important;
  max-height:0 !important;          /* 기본 접힘 */
  padding-left:8px !important;
  transition:max-height .24s ease !important;
}
#snowToolbar .emd-list.open{
  max-height: 900px !important;     /* 충분히 크게 – 내용 길이 커버 */
}

/* 버튼 줄 레이아웃 고정 */
#snowToolbar .emd-all-row{
  display:flex !important; align-items:center !important; gap:8px !important;
  width:100% !important; padding-right: var(--padR) !important; box-sizing:border-box !important;
}
#snowToolbar .emd-all-row label{ flex:1 1 auto !important; min-width:0 !important; }
#snowToolbar .emd-all-row label span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 📘 읍면동 접기/펴기 버튼 스타일 개선 */
#snowToolbar .emd-collapse-btn{
  flex: 0 0 26px !important;
  width: 26px !important;
  height: 26px !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #f9fafb 0%, #e5e7eb 100%) !important;
  color: #374151 !important;
  font-size: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.05);
}
#snowToolbar .emd-collapse-btn:hover{
  background: linear-gradient(180deg,#f3f4f6 0%,#d1d5db 100%) !important;
  color: #111827 !important;
  box-shadow: 0 0 6px rgba(0,0,0,0.12);
}
#snowToolbar .emd-collapse-btn:active{
  transform: scale(0.96);
}

/* 노선표시 그룹이 남은 높이를 모두 차지하게 */
#snowToolbar .admin-group:has(#snowFilterChecklist){
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-height:0 !important;
}

/* 그룹 본문도 유연하게 */
#snowToolbar .admin-group:has(#snowFilterChecklist) .admin-group-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;   /* 스크롤은 아래 래퍼에서 */
}

/* 스크롤 주체는 래퍼(#snowFilterChecklist) */
#snowToolbar #snowFilterChecklist{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;   /* 그룹이 정한 높이에 맞춰 커짐 */
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
}

/* 접힘/펼침: display 전환 금지, max-height로만 제어 */
#snowToolbar .emd-list{
  display:block !important;
  overflow:hidden !important;
  max-height:0 !important;                 /* 접힘 */
  padding-left:8px !important;
  transition:max-height .24s ease !important;
}
#snowToolbar .emd-list.open{
  max-height:none !important;              /* 펼침 – 제한 해제 */
}


/* 0) 혹시 예전 스크롤바 숨김 규칙이 있다면 비활성화 */
#snowToolbar .snow-filter-wrap::-webkit-scrollbar { /* 주석처리 효과 */
  /* width: 0; height: 0; display: none; */
}

/* 1) “노선 표시” 그룹 자체가 남는 높이를 모두 가져가게 */
#snowToolbar .snowlist-group{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;           /* ★ 스크롤 생기게 하는 핵심 */
}

/* 2) 그룹 본문이 ‘스크롤 래퍼’를 담을 수 있게 공간 열어주기 */
#snowToolbar .snowlist-group .admin-group-body{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;           /* ★ 핵심 */
  overflow: hidden !important;         /* 스크롤은 자식이 담당 */
}

/* 3) 실제 스크롤 주체: 설치한 래퍼(#snowFilterChecklist) */
#snowToolbar #snowFilterChecklist{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;         /* 인라인 max-height(340px) 무효화 */
  overflow-y: auto !important;         /* ★ 실제 스크롤러 */
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 4) 읍면동 펼침: display 전환 금지, 높이 제한 해제 */
#snowToolbar .emd-list{
  display: block !important;
  overflow: visible !important;        /* 안 잘리게 */
  max-height: none !important;         /* ★ 펼치면 전체 보이게 */
  padding-left: 8px !important;
  transition: none !important;         /* (원하면 애니메이션 다시 넣어도 됨) */
}
/* 접힘 상태만 높이 0으로 */
#snowToolbar .emd-list:not(.open){
  overflow: hidden !important;
  max-height: 0 !important;
}

/* 5) 다른 섹션이 높이를 먹어버리지 않게 – 기본은 고정 높이(콘텐츠만) */
#snowToolbar .admin-group { flex: 0 0 auto !important; }
#snowToolbar .snowlist-group { flex: 1 1 auto !important; } /* 노선표시만 유연 */

/* (참고) 툴바 최상위는 화면 상하로 고정하고 스크롤은 자식에게 위임 */
#snowToolbar.admin-panel{
  display: flex !important;
  flex-direction: column !important;
  top: 80px; bottom: 35px;             /* 이미 쓰는 값 유지 */
  overflow: hidden !important;         /* 상위는 숨기고, 내부에서 스크롤 */
  min-height: 0 !important;
}



/* === 제설노선 팝업 버튼 hover 효과 === */
button.btn-del:hover {
  background:#fca5a5 !important;
  color:#fff !important;
}
button.btn-edit:hover {
  background:#38bdf8 !important;
  color:#fff !important;
}
button.btn-close:hover {
  background:#e5e7eb !important;
}


/* iOS PWA(홈화면) 전용 보정 */
@supports (-webkit-touch-callout:none) {
  @media (display-mode: standalone) and (max-width: 600px) {

    /* 툴바 자체: 상단/하단 safe-area 반영, vh 사용 제거 */
    #snowToolbar.admin-panel{
      top: calc(72px + env(safe-area-inset-top)) !important;
      bottom: calc(24px + env(safe-area-inset-bottom)) !important;
      height: auto !important;
      max-height: none !important;
      overflow: hidden !important;     /* 스크롤은 자식에게 */
      display: flex !important;
      flex-direction: column !important;
      min-height: 0 !important;
    }

    /* Safari용 모바일 규칙에서 걸어둔 max-height를 PWA에선 해제 */
    #snowToolbar .admin-group-body{
      max-height: none !important;
      overflow: visible !important;    /* 스크롤은 래퍼가 담당 */
    }

    /* ‘노선 표시’ 그룹이 남은 높이를 모두 차지 */
    #snowToolbar .snowlist-group{
      flex: 1 1 auto !important;
      min-height: 0 !important;
      display: flex !important;
      flex-direction: column !important;
    }
    #snowToolbar .snowlist-group .admin-group-body{
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow: hidden !important;     /* 스크롤은 아래 래퍼 */
    }

    /* 실제 스크롤 주체: 체크리스트 래퍼 */
    #snowToolbar #snowFilterChecklist{
      flex: 1 1 auto !important;
      min-height: 0 !important;
      height: auto !important;
      max-height: none !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important;
    }

    /* 혹시 남아있는 vh 기반 한도치 제거(안전망) */
    #snowToolbar.admin-panel,
    #snowToolbar .snow-filter-wrap{
      max-height: none !important;
    }
  }
}

/* ⬇️ 접힘(버튼화)일 때는 상하 고정·flex 레이아웃을 완전히 해제해 높이를 진짜로 줄인다 */
#snowToolbar.collapsed.admin-panel{
  /* 상하 늘어남의 진짜 원인 제거 */
  bottom: auto !important;
  top: var(--snow-toolbar-top, 86px) !important; /* 필요시 값 조정 */
  /* flex → block 로 바꿔 부모높이 강제 확장 방지 */
  display: block !important;

  /* 버튼 박스 고정 크기 */
  width: 52px !important;
  height: 52px !important;
  max-height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  overflow: hidden !important;  /* 내부 내용이 높이를 밀어올리는 것 차단 */
  border-radius: 14px !important;
}

/* 헤더가 컨테이너를 꽉 채우도록(여백으로 높이 흔들리는 것 방지) */
#snowToolbar.collapsed .admin-panel-header{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 혹시 남아있는 group/바디가 높이를 먹지 못하도록 더 강하게 차단 */
#snowToolbar.collapsed .admin-group,
#snowToolbar.collapsed .admin-group-body{
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* 📱 iOS PWA에서도 동일 동작 (standalone에서 상하 제약 해제) */
@supports (-webkit-touch-callout:none) {
  @media (display-mode: standalone) and (max-width: 600px) {
    #snowToolbar.collapsed.admin-panel{
      top: calc(72px + env(safe-area-inset-top)) !important;
      bottom: auto !important;         /* 다시 한 번 보증 */
      width: 38px !important;
      height: 38px !important;
      max-height: 38px !important;
      min-height: 38px !important;
      border-radius: 12px !important;
    }
    #snowToolbar.collapsed .admin-panel-header{
      width: 100% !important;
      height: 100% !important;
    }
  }
}

/* =========================
   0) 공통 위치 변수
   ========================= */
:root{
  /* 데스크탑에서 패널/버튼 공통 위치 */
  --snow-top-desktop: 80px;

  /* 모바일 Safari(브라우저)에서 패널/버튼 공통 위치 */
  --snow-top-mobile: 64px;

  /* iOS PWA(standalone) – safe area 고려 + 살짝 위로 */
  --snow-top-pwa: calc(66px + env(safe-area-inset-top));
}

/* 버튼 헤더가 크기를 밀어올리지 못하게(사파리 확대 방지 포함) */
#snowToolbar .admin-panel-header{
  box-sizing: border-box !important;
  line-height: 1 !important;
}

/* =========================
   1) 데스크탑(사파리 포함)
   - 접힘/펼침 모두 같은 top/left
   - 접힘 버튼 크기 고정
   ========================= */
@media (min-width: 601px){
  #snowToolbar.admin-panel{
    top: var(--snow-top-desktop) !important;
    left: 12px !important;
  }
  #snowToolbar.collapsed.admin-panel{
    /* 위치 정확히 동일 */
    top: var(--snow-top-desktop) !important;
    left: 12px !important;
    bottom: auto !important;
    display: block !important;

    /* 크기 고정 (사파리에서 커지는 증상 방지) */
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    overflow: hidden !important;
  }
  /* 접힘일 때 헤더가 박스를 정확히 채우도록 */
  #snowToolbar.collapsed .admin-panel-header{
    width: 100% !important; height: 100% !important;
    margin: 0 !important; padding: 0 !important;
  }
}

/* =========================
   2) 모바일 Safari(브라우저)
   - 접힘/펼침 동일 위치
   - 접힘 크기 38x38
   ========================= */
@media (max-width: 600px){
  /* 펼쳐진 패널 위치 */
  #snowToolbar.admin-panel{
    top: var(--snow-top-mobile) !important;
    left: 8px !important;
  }
  /* 접힘 버튼 위치/크기 통일 */
  #snowToolbar.collapsed.admin-panel{
    top: var(--snow-top-mobile) !important;
    left: 8px !important;
    bottom: auto !important;
    display: block !important;

    width: 38px !important;  height: 38px !important;
    min-width: 38px !important; min-height: 38px !important;
    max-width: 38px !important; max-height: 38px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }
  #snowToolbar.collapsed .admin-panel-header{
    width: 100% !important; height: 100% !important;
    margin: 0 !important; padding: 0 !important;
  }
}

/* =========================
   3) iOS PWA(홈 화면 – standalone)
   - 둘 다 약간 ‘위로’ 위치 고정
   - 접힘도 같은 좌표/크기
   ========================= */
@supports (-webkit-touch-callout:none) {
  @media (display-mode: standalone) and (max-width: 600px){
    #snowToolbar.admin-panel{
      top: var(--snow-top-pwa) !important;
      left: 8px !important;
      bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    }
    #snowToolbar.collapsed.admin-panel{
      top: var(--snow-top-pwa) !important;
      left: 8px !important;
      bottom: auto !important;
      display: block !important;

      width: 38px !important;  height: 38px !important;
      min-width: 38px !important; min-height: 38px !important;
      max-width: 38px !important; max-height: 38px !important;
      overflow: hidden !important;
      border-radius: 12px !important;
    }
    #snowToolbar.collapsed .admin-panel-header{
      width: 100% !important; height: 100% !important;
      margin: 0 !important; padding: 0 !important;
    }
  }
}

/* =========================
   4) 잔여 콘텐츠가 버튼 높이를 밀어올리는 것 방지
   ========================= */
#snowToolbar.collapsed .admin-group,
#snowToolbar.collapsed .admin-group-body{
  display: none !important;
  height: 0 !important; max-height: 0 !important;
  overflow: hidden !important;
}

/* 첫 렌더링 1프레임 동안 전환/애니메이션 비활성화 */
#snowToolbar.preload {
  transition: none !important;
  animation: none !important;
}

/* ──────────────────────────────
   ❄️ 초기 로딩 시 제설패널 깜빡임 제거
   ────────────────────────────── */
#snowToolbar {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

#snowToolbar.ready {
  opacity: 1;
  visibility: visible;
}

/* ✅ 여름모드(= body에 .winter-mode 없을 때)는 제설 패널 강제 숨김 */
body:not(.winter-mode) #snowToolbar {
  display: none !important;
}

/* 🎮 숨겨진 트리거 버튼 */
#secretGameTrigger {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 60px;   /* 2km 스케일바 왼쪽 크기 정도 */
  height: 40px;
  z-index: 99999;
  background: transparent;
  cursor: pointer;
}

/* 🎮 미니게임 선택 모달 */
.game-select-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 11000;
}

.game-select-modal.show {
  display: flex;
}

.game-select-panel {
  background: #ffffff;
  border-radius: 18px;
  padding: 20px 22px 18px;
  width: 260px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
  font-family: 'Noto Sans KR', sans-serif;
}

.game-select-panel h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}

.game-select-panel p {
  margin: 0 0 14px;
  font-size: 13px;
  color: #4b5563;
}

.game-select-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.game-select-btn {
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  background: #e5e7eb;
  color: #111827;
  font-weight: 600;
}

.game-select-btn.primary {
  background: #2563eb;
  color: #ffffff;
}

.game-select-btn:hover {
  filter: brightness(1.03);
}

.game-select-close {
  border: none;
  background: transparent;
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
}


/* 🎮 게임 모달 */
#miniGameModal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 300000;
  background: rgba(0,0,0,0.55);
  align-items: center;
  justify-content: center;
}

#miniGameModal.active {
  display: flex;
}

#miniGameModal .game-window {
  background: #ffffff;
  padding: 14px;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

.game-layout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.game-scoreboard {
  font-size: 12px;
  max-height: 480px;
  overflow-y: auto;
  min-width: 130px;
  padding: 4px 0;
}

.game-scoreboard h4 {
  margin: 0 0 4px;
  font-size: 13px;
}

.game-scoreboard ol {
  margin: 0;
  padding-left: 18px;
}

.game-scoreboard li {
  margin-bottom: 2px;
}

/* 모바일에서는 위아래로 쌓기 + 모달 높이 제한 */
@media (max-width: 480px) {
  #miniGameModal .game-window {
    width: 92vw;
    max-height: 90vh;      /* 화면 안에 들어오도록 */
    display: flex;
    flex-direction: column;
  }

  .game-layout {
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;      /* 내부에서 스크롤 */
  }

  .game-scoreboard {
    max-height: none;      /* 전체 레이아웃 높이에 맞게 */
  }
}


.game-canvas-wrap {
  position: relative;
}

/* 게임오버 시 캔버스 위에 덮이는 레이어 */
#gameOverOverlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;               /* 기본: 숨김 */
  align-items: center;
  justify-content: center;
}

#gameOverOverlay.show {
  display: flex;               /* show 클래스가 붙을 때만 보이게 */
}


/* 🎆 미니게임 불꽃놀이 (1~3위) */
#gameFireworks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

#gameFireworks .fw-burst {
  position: absolute;
  width: 4px;
  height: 4px;
  transform: translate(-50%, -50%);
}

/* 선 모양 스파크 */
#gameFireworks .fw-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;         /* 선 길이 기본값 */
  height: 2px;
  border-radius: 999px;
  /* 중심에서 바깥으로 번지는 그라디언트 */
  background: linear-gradient(
    90deg,
    rgba(254,249,195,0) 0%,
    rgba(254,240,138,1) 35%,
    rgba(252,165,165,1) 70%,
    rgba(248,113,113,0) 100%
  );
  box-shadow:
    0 0 6px rgba(252,211,77,0.9),
    0 0 14px rgba(248,113,113,0.7);

  transform-origin: 0% 50%;         /* 왼쪽 끝에서 밖으로 뻗어나가게 */
  opacity: 0;
  animation: fw-line 3.0s ease-out forwards;
  animation-delay: var(--spark-delay, 0s);
}

/* 각 선이 다른 방향/길이로 뻗어나가기 */
@keyframes fw-line {
  0% {
    transform:
      translate(-50%, -50%)
      rotate(var(--spark-rot, 0deg))
      scaleX(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  100% {
    transform:
      translate(-50%, -50%)
      rotate(var(--spark-rot, 0deg))
      scaleX(calc(1.4 * var(--spark-scale, 1)));
    opacity: 0;
  }
}


.game-over-inner {
  background: rgba(15, 23, 42, 0.95);
  padding: 14px 20px;
  border-radius: 10px;
  text-align: center;
  color: #f9fafb;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

#gameRestartBtn {
  margin-top: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  background: #3b82f6;
  color: #f9fafb;
}
#gameRestartBtn:hover {
  background: #2563eb;
}

/* 🎉 게임오버 축하 연출 */
.game-over-rank {
  margin-top: 6px;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 700;
  color: #facc15;
}

/* 혹시라도 어디선가 display:none 걸려 있으면 강제 표시 */
#gameOverRankMsg {
  display: block !important;
}

#gameFireworks .game-fw-item {
  opacity: 1 !important;
}

.game-close-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #333;
  color: white;
  font-size: 20px;
  cursor: pointer;
}


/* =========================
   ✅ 관리 빗물받이 CSV 빌더 팝업
   ========================= */
/* 기본: 모달 열면 블러 ON (돋보이게) */
.gmb-overlay{
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px;
  pointer-events: none;
}

/* ✅ 수집 중 상태: 배경 블러 OFF + 지도 선명 */
.gmb-overlay.gmb-collecting{
  background: rgba(0,0,0,.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.gmb-modal{
  width: min(560px, 100%);
  margin-top: 64px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  overflow: hidden;

  pointer-events: auto; /* ✅ 여기만 클릭 가능 */
}

.gmb-head{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 14px 16px;
  background: linear-gradient(180deg, #f7fbff, #ffffff);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.gmb-title{
  font-size: 16px;
  font-weight: 900;
}

.gmb-x{
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}

.gmb-desc{
  padding: 12px 16px 2px 16px;
  font-size: 13px;
  color: #334155;
}
.gmb-desc ul{ margin: 0; padding-left: 18px; }
.gmb-desc li{ margin: 6px 0; }

.gmb-actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
}

.gmb-btn{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .12s ease;
}
.gmb-btn:hover{ box-shadow: 0 8px 18px rgba(0,0,0,.10); }
.gmb-btn:active{ transform: translateY(1px); }

.gmb-btn.primary{
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}
.gmb-btn.danger{
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.gmb-meta{
  padding: 0 16px 12px 16px;
  font-size: 13px;
  color: #111827;
}

.gmb-last{
  padding: 12px 16px 16px 16px;
  font-size: 12px;
  color: #64748b;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* ✅ 빗물받이 CSV 수집 시 지도에 찍히는 표시(번호 핀) */
.gmb-pin{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #2563eb;
  border: 2px solid #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =========================
   ✅ GMB 축소(미니바) 모드
   ========================= */

/* 축소 모드일 때 모달 크기/레이아웃 */
.gmb-overlay.gmb-compact{
  /* 수집 중 지도 잘 보이게 유지(원하면 값 조절) */
  background: rgba(0,0,0,.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 축소(미니바) 모드: 위치는 그대로, 크기만 축소 */
.gmb-overlay.gmb-compact .gmb-modal{
  width: 320px;
  max-width: calc(100% - 24px);
  border-radius: 16px;

  /* ✅ 위치 고정/이동 금지 */
  position: static;
  top: auto;
  left: auto;
}

/* 헤더를 바처럼 보이게 */
.gmb-overlay.gmb-compact .gmb-head{
  cursor: pointer;
}

/* 축소 모드에서는 본문 영역 숨김 */
.gmb-overlay.gmb-compact .gmb-desc,
.gmb-overlay.gmb-compact .gmb-actions,
.gmb-overlay.gmb-compact .gmb-meta{
  display: none !important;
}

/* 마지막 로그는 한 줄로만 살짝 보여주기(선택) */
.gmb-overlay.gmb-compact .gmb-last{
  padding: 10px 14px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 제목 옆에 “펼치기/접기” 느낌 아이콘(가짜) */
#gmbToggle::after{
  content: " ▾";
  font-weight: 900;
  opacity: .55;
  margin-left: 6px;
}

.gmb-overlay.gmb-compact #gmbToggle::after{
  content: " ▸";
}