* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
body { display: flex; }

#sidebar {
  width: 340px; min-width: 340px; height: 100%; overflow-y: auto;
  padding: 16px; background: #1e2530; color: #e8ecf1;
  display: flex; flex-direction: column; gap: 14px;
}
#sidebar h1 { font-size: 18px; margin: 0 0 4px; color: #ffd83d; }
#sidebar section { display: flex; flex-direction: column; gap: 6px; }
#sidebar label { font-size: 13px; font-weight: 700; color: #aeb9c7; }
#sidebar input, #sidebar select {
  width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #3a4555;
  background: #121822; color: #e8ecf1; font-size: 13px;
}
.hint { font-size: 11px; color: #7f8b9b; margin: 2px 0 0; line-height: 1.5; }
.bbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

button { padding: 10px; border: 0; border-radius: 6px; font-size: 14px;
  font-weight: 700; cursor: pointer; }
button.primary { background: #ffd83d; color: #1e2530; }
button.primary:disabled { background: #6b6b50; cursor: not-allowed; }
button.secondary { background: #2e3a4c; color: #e8ecf1; font-size: 13px; }
button.secondary:hover { background: #3a4a61; }
button.danger { background: #d9534f; color: #fff; }
.btn-row { display: flex; gap: 6px; }
.btn-row button { flex: 1; }

#progress { background: #121822; border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; }
.prog-row { display: flex; justify-content: space-between; font-size: 13px; }
.prog-row b { color: #ffd83d; }

#summary { background: #15351f; border: 1px solid #2c7a44; border-radius: 8px;
  padding: 10px 12px; font-size: 13px; line-height: 1.7; }
#summary.error { background: #3a1d1d; border-color: #a94442; }
#warnings { background: #3a311d; border: 1px solid #a98b42; border-radius: 8px;
  padding: 10px 12px; font-size: 12px; line-height: 1.6; max-height: 160px;
  overflow-y: auto; }

#map { flex: 1; height: 100%; }

/* POI 카드 팝업 */
.poi-card { font-size: 13px; min-width: 230px; max-width: 280px; }
.poi-card h3 { margin: 0 0 6px; font-size: 15px; color: #1e2530; }
.poi-card .cat { display: inline-block; background: #ffd83d; color: #1e2530;
  border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 700;
  margin-bottom: 8px; }
.poi-card table { width: 100%; border-collapse: collapse; }
.poi-card td { padding: 3px 0; vertical-align: top; }
.poi-card td:first-child { color: #7f8b9b; width: 64px; white-space: nowrap; }
.poi-card a { color: #2466c4; }

/* 행정경계 지명 툴팁 스타일 */
.boundary-tooltip {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  pointer-events: none;
  white-space: nowrap;
}
.boundary-tooltip::before {
  display: none !important;
}
.sido-tooltip {
  color: #0055ff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-shadow: -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff, 0 0 4px #fff;
}
.sigungu-tooltip {
  color: #333333 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 3px #fff;
}

/* 선택된 행정구역 정보 상자 */
.admin-info-box {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  background: #121822;
  border: 1px solid #3a4555;
  color: #ffd83d;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  word-break: keep-all;
}

/* 지도 스타일 선택기 */
.map-style-control {
  background: #1e2530;
  border: 1px solid #3a4555;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.45);
  color: #e8ecf1;
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* 접혀 있을 때 */
.map-style-control.collapsed {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-style-control.collapsed:hover {
  background: #2e3a4c;
  border-color: #ffd83d;
  transform: scale(1.05);
}
.map-style-control.collapsed .style-toggle-icon {
  font-size: 20px;
  line-height: 1;
}
.map-style-control.collapsed .style-content {
  display: none;
}

/* 펼쳐졌을 때 */
.map-style-control:not(.collapsed) {
  width: 270px;
  padding: 12px;
}
.map-style-control:not(.collapsed) .style-toggle-icon {
  display: none;
}
.map-style-control:not(.collapsed) .style-content {
  display: block;
}

.style-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid #2e3a4c;
  padding-bottom: 6px;
}
.style-header span {
  font-size: 12px;
  font-weight: 700;
  color: #ffd83d;
}
.style-close-btn {
  font-size: 14px;
  cursor: pointer;
  color: #aeb9c7;
  transition: color 0.15s;
}
.style-close-btn:hover {
  color: #ffffff;
}

.style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.style-item {
  background: #121822;
  border: 1px solid #3a4555;
  border-radius: 6px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.style-item:hover {
  background: #1a2332;
  border-color: #ffd83d;
}
.style-item.active {
  background: #2e3a4c;
  border-color: #ffd83d;
  box-shadow: 0 0 8px rgba(255, 216, 61, 0.2);
}

.style-name {
  font-size: 11px;
  font-weight: 700;
  color: #e8ecf1;
}
.style-item.active .style-name {
  color: #ffd83d;
}
.style-desc {
  font-size: 9px;
  color: #7f8b9b;
  margin-top: 2px;
}
.style-item.active .style-desc {
  color: #aeb9c7;
}