body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Plus Jakarta Sans', 'Noto Sans', sans-serif;
    overflow: hidden;
    background-color: white;
}

#wrapper { width: 100%; min-height: 0; }

#logo {
    grid-area: logo;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background-color: #ffffff;
    color: #121416;
}

#map {
  width: 100%;
  min-height: 70vh;     /* 모바일 강제 높이 */
  height: auto;
}

#left, #right, #footer {
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;
}

#left {
    grid-area: left;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 20px;
}

#right { grid-area: right; }
#footer { grid-area: footer; }

#top-controls {
    position: absolute;
    top: 16px;
    left: 220px;
    right: 220px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    z-index: 1000;
}

.top-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 12px;
    background-color: #ffffff;
    color: #121416;
    font-weight: bold;
    font-size: 14px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: background-color 0.2s;
}

.top-button:hover {
    background-color: #f1f2f4;
}

/* 4. 버튼 공통 스타일 */
.btn-primary{
    background-color: #1976d2;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    width: 100%;
    margin-bottom: 20px;
}
.btn-primary:hover{
    background-color: #1565c0;
}

/* 5. 위치 버튼 */
.btn_location {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
}
.btn_location .icon-path,
#currentLocationBtn .icon-path {
    fill: #444;
    transition: fill 0.3s ease;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
}
.btn_location:hover .icon-path,
#currentLocationBtn:hover .icon-path {
    fill: #1976d2;
}

/* 6. 클러스터 버튼 */
.clusterBtn {
    cursor: pointer;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 27px;
    color: white;
    text-align: center;
    font-weight: bold;
    background: url(/img/cluster_01.png) 0% 0% / contain;
}

/* 7. 마커 공통 스타일 */
.circle-marker {
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    text-align: center;
    cursor: pointer;
    border: 2px solid;
    transition: background-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    opacity 0.3s ease;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.circle-marker:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.circle-marker:active {
    transform: scale(0.97);
}

/* 8. 마커 색상별 스타일 */
.marker-blue {
    background-color: #1976d2;
    opacity: 0.8;
    border-color: #1565c0;
}
.marker-blue:hover {
    background-color: #1565c0;
    border-color: #0d47a1;
}

.marker-midblue {
    background-color: #2196f3;
    opacity: 0.75;
    border-color: #1565c0;
}
.marker-midblue:hover {
    background-color: #1e88e5;
    border-color: #0d47a1;
}

.marker-lightblue {
    background-color: #42a5f5;
    opacity: 0.75;
    border-color: #1565c0;
}
.marker-lightblue:hover {
    background-color: #2196f3;
    border-color: #0d47a1;
}

.marker_nm, .marker_cnt {
    margin: 0;
}

/* 9. 광고영역 공통 */
.ad-section {
    text-align: center;
    font-size: 14px;
    color: #666;
}

/* 10. 팝업 통일 스타일 */
.popup-box {
    display: none;
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    width: 510px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    font-family: 'Segoe UI', sans-serif;
}

/* 닫기 버튼 */
.popup-box .popup-close-btn {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 10;
}
.popup-box .popup-close-btn:hover {
    color: #000;
}

/* 팝업 내부 콘텐츠 */
.popup-inner-content {
    padding: 20px 24px 30px;
    font-size: 14px;
    color: #333;
}
.popup-inner-content h2 {
    font-size: 18px;
    margin-bottom: 14px;
}
.popup-inner-content h3 {
    font-size: 16px;
    margin: 24px 0 10px;
}
.popup-inner-content table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}
.popup-inner-content th, .popup-inner-content td {
    padding: 8px;
    border: 1px solid #ddd;
    vertical-align: top;
}
.popup-inner-content th {
    background-color: #f5f5f5;
    font-weight: 600;
    text-align: left;
}
.popup-inner-content p {
    margin-top: 16px;
    color: #555;
    font-size: 13px;
    line-height: 1.5;
}

/* 검색 레이어 전용 */
#searchLayer {
    width: 510px;
    height: 530px;
}
#daumPostcodeInner {
    width: 100%;
    height: 8%;
}

:root{
    --bg:#0b1020; --card:#11162a; --text:#e9edf5; --muted:#b8c1d9; --accent:#8ab4ff;
    --danger:#ff6b6b; --warn:#ffb84d; --ok:#66d9a8; --shadow:0 20px 40px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
    :root{ --bg:#f6f8ff; --card:#ffffff; --text:#0f172a; --muted:#475569; --accent:#2563eb; --shadow:0 12px 28px rgba(2,6,23,.12) }
}

*{box-sizing:border-box}
html,body{height:100%}
.error-body{
    margin:0; background:radial-gradient(1200px 600px at 10% -10%, rgba(138,180,255,.18), transparent 60%),
linear-gradient(180deg, var(--bg), var(--bg));
    color:var(--text); font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    display:grid; place-items:center; padding:24px;
}
.error-wrap{
    width:min(840px, 96%); background:var(--card); border-radius:20px; box-shadow:var(--shadow);
    padding:32px 28px 24px; position:relative; overflow:hidden;
}
.badge{
    position:absolute; inset:auto 16px 16px auto; background:rgba(138,180,255,.12);
    border:1px solid rgba(138,180,255,.35); color:var(--accent); padding:6px 10px; border-radius:999px; font-weight:600; font-size:12px;
}
.header{display:flex; gap:18px; align-items:center; margin-bottom:12px}
.code{font-size:40px; font-weight:800; letter-spacing:.5px}
.title{font-size:22px; font-weight:700}
.desc{color:var(--muted); margin:6px 0 14px}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0}
.btn{
    appearance:none; border:1px solid rgba(148,163,184,.3); background:transparent; color:var(--text);
    padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
}
.btn.primary{ background:var(--accent); color:white; border:0 }
.meta{
    display:grid; grid-template-columns: 140px 1fr; gap:6px 16px; padding:14px; border-radius:14px;
    background:rgba(148,163,184,.08); font-size:14px;
}
.k{color:var(--muted)}
.v{word-break:break-all}
details{margin-top:14px; background:rgba(148,163,184,.06); padding:14px; border-radius:14px}
summary{cursor:pointer; font-weight:700}
pre{
    margin:12px 0 0; max-height:320px; overflow:auto; background:#060913; color:#e5e7eb; padding:12px;
    border-radius:10px; font:12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.search{display:flex; gap:8px; margin-top:10px}
.search input{
    flex:1; border:1px solid rgba(148,163,184,.3); border-radius:12px; padding:10px 12px; background:transparent; color:var(--text)
}
.small{font-size:12px; color:var(--muted)}
.brand{
    position:absolute; inset: -120px auto auto -120px; width:280px; height:280px; border-radius:50%;
    background:radial-gradient(closest-side, rgba(138,180,255,.18), transparent 65%);
    filter:blur(6px)
}