#PARK_DETAIL_PANEL {display:none;position:fixed;width:320px;height:500px;background:#fff;z-index:200;box-shadow:0 14px 34px rgba(0,20,45,0.24);border-radius:6px;flex-direction:column;}
#PARK_DETAIL_PANEL.open {display:flex;}
.detail-header {display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:#fff;color:#1a1a2e;flex-shrink:0;border-radius:6px 6px 0 0;}
.detail-header .detail-title {font-size:15.5px;font-weight:800;word-break:keep-all;line-height:1.3;flex:1;padding-right:8px;color:#1a1a2e;}
.detail-close {background:none;border:none;color:#999;font-size:16px;cursor:pointer;flex-shrink:0;line-height:1;padding:0;transition:color .15s;}
.detail-close:hover {color:#333;}
.detail-arrow {position:absolute;bottom:-14px;left:calc(50% - 12px);width:24px;height:14px;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,32,96,0.18));}
.detail-arrow svg {display:block;width:100%;height:100%;}
.detail-body {padding:14px 16px;font-size:13px;overflow-y:auto;flex:1;}
.detail-footer {padding:10px 14px;border-top:1px solid var(--c-primary-soft-2);flex-shrink:0;display:flex;justify-content:flex-end;gap:8px;background:#fff;border-radius:0;}
.detail-section {margin-bottom:12px;}
.detail-section:last-child {margin-bottom:0;}
.detail-section-title {font-size:13px;font-weight:700;color:var(--c-primary);padding:0;margin-bottom:7px;}
.detail-row {display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;font-size:13px;line-height:1.5;}
.detail-row .label {color:#999;font-size:12px;flex-shrink:0;margin-right:12px;min-width:50px;}
.detail-row .value {color:#333;text-align:right;word-break:keep-all;}
/* 면수 통계 박스(총면수/주차가능/일반/장애인/전기차/기타 + 결제하기) */
.detail-stats {display:flex;flex-wrap:wrap;gap:1px;margin-bottom:14px;background:var(--c-primary-soft-2);border:1px solid var(--c-primary-soft-2);border-radius:0;overflow:hidden;}
.stat-col {flex:1 0 62px;min-width:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 6px;background:#fff;text-align:center;}
.stat-label {font-size:11px;color:#888;margin-bottom:4px;white-space:nowrap;}
.stat-cnt {font-size:20px;font-weight:700;color:var(--c-primary);line-height:1.2;white-space:nowrap;}
.stat-pay-icon {width:28px;height:28px;object-fit:contain;cursor:pointer;opacity:.8;transition:opacity .15s;}
.stat-pay-icon:hover {opacity:1;}
.btn-route {display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--c-primary);color:#fff;border:none;padding:9px 16px;border-radius:4px;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s;}
.btn-route:hover {background:var(--c-primary-hover);}
.btn-route svg {flex-shrink:0;}
.btn-bookmark {display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:8px 14px;background:#fff;color:#e53935;border:1px solid #e53935;cursor:pointer;font-size:13px;font-weight:700;}
.btn-bookmark.active {background:#e53935;color:#fff;}
.btn-bookmark.active #BOOKMARK_ICON path {fill:#fff;stroke:#fff;}
/* 상세 패널 세그먼트 탭 — 기본(데스크톱)은 숨김, 전체 섹션 노출 */
.detail-tabs {display:none;}
.detail-tab {flex:1;text-align:center;padding:9px 0;font-size:13px;font-weight:700;color:#7a828f;background:#fff;cursor:pointer;border:none;border-right:1px solid var(--c-primary-soft-2);}
.detail-tab:last-child {border-right:none;}
.detail-tab.active {background:var(--c-primary);color:#fff;}
#MAP_CONTROLS {position:absolute;top:12px;right:22px;z-index:100;display:flex;gap:6px;}
.map-ctrl-btn {padding:8px 12px;background:var(--c-primary);color:#fff;border:none;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 6px 16px rgba(0,20,45,0.22);white-space:nowrap;text-decoration:none;transition:background 0.15s;}
.map-ctrl-btn:hover {background:var(--c-primary-hover);}
.map-ctrl-btn.active {background:var(--c-primary);color:#fff;border-color:var(--c-primary);}
#MAP_LEGEND {position:absolute;bottom:24px;left:58%;transform:translateX(-50%);z-index:100;display:flex;gap:20px;background:rgba(255,255,255,0.95);border:1px solid #c8cdd6;padding:8px 24px;box-shadow:0 1px 4px rgba(0,0,0,0.1);}
.legend-item {display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:#333;}
.legend-dot {width:29px;height:29px;border-radius:0;border:2px solid #ccc;}
.legend-dot.basic {background:#fff;border-color:#999;}
.legend-dot.good {background:#2ecc71;border-color:#27ae60;}
.legend-dot.normal {background:#f1c40f;border-color:#f39c12;}
.legend-dot.busy {background:#e67e22;border-color:#d35400;}
.legend-dot.full {background:#e74c3c;border-color:#c0392b;}
.parking-icon.park_knd_1 {background:#2e7d32;}
.parking-icon.park_knd_2 {background:var(--c-primary);}
.parking-icon.park_knd_4 {background:#e65100;}
#ROADVIEW_CONTAINER {position:absolute;top:0;left:0;right:0;bottom:0;z-index:50;background:#000;}
#BTN_CLOSE_ROADVIEW {position:absolute;top:12px;right:12px;z-index:51;padding:6px 14px;background:rgba(0,0,0,0.6);color:#fff;border:none;border-radius:0;font-size:13px;cursor:pointer;}
#BTN_CLOSE_ROADVIEW:hover {background:rgba(0,0,0,0.85);}
#BTN_SEARCH {display:none;}
[id^="POPUP_MODAL_"] img {max-width:100% !important;height:auto !important;}
@media (min-width:769px) and (max-width:1100px) {
#CONTENT_AREA {height:calc(100vh - 60px);min-height:0;}
#MAP {height:100%;min-height:0;}
#PARK_DETAIL_PANEL {width:300px;height:470px;}
#MAP_CONTROLS {top:10px;right:10px;}
#MAP_LEGEND {gap:14px;padding:7px 16px;}
.legend-dot {width:24px;height:24px;}
}
@media (max-width:768px) {
#BTN_SEARCH {display:block;}
#CONTENT_AREA {height:calc(100vh - 54px);min-height:0;}
#MAP {height:100%;min-height:0;}
#PARK_DETAIL_PANEL {width:calc(100vw - 80px);max-width:300px;height:auto;max-height:calc(100vh - 200px);}
/* C안: 모바일은 세그먼트 탭으로 한 번에 한 종류만 표시 — 패널 높이 최소화, 마커 비가림 */
.detail-tabs {display:flex;margin-bottom:12px;border:1px solid var(--c-primary-soft-2);}
.detail-body .detail-section {display:none;}
.detail-body.show-info .pane-info,
.detail-body.show-time .pane-time,
.detail-body.show-fee .pane-fee {display:block;}
/* 모바일: 활성 버튼들이 폭을 등분해 가로로 꽉 차게(개수 바뀌어도 자동 등분) */
#MAP_CONTROLS {top:8px;left:8px;right:8px;z-index:80;flex-wrap:nowrap;gap:4px;}
#MAP_CONTROLS .map-ctrl-btn {flex:1 1 0;min-width:0;padding:9px 2px;font-size:11px;text-align:center;overflow:hidden;text-overflow:ellipsis;}
#MAP_LEGEND {display:none;}
/* 터치 타깃 44px(모바일) — 상세패널 버튼만(지도 컨트롤은 조밀 유지) */
.detail-close {min-width:44px;min-height:44px;}
.btn-bookmark {min-height:44px;}
.btn-route {min-height:44px;}
.detail-tab {min-height:44px;}
}