/* 인터랙티브 맵 (mp- prefix) — 린클인포 스타일 팝업 */

.mp-wrapper {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background-color: #0a0a0b;
    overflow: hidden;
}
#map-container { width: 100%; height: 100%; background: #0a0a0b; z-index: 1; }

/* Leaflet Overrides */
.leaflet-container { background: #0a0a0b !important; font-family: var(--font-ui), sans-serif; }
.leaflet-control-attribution { display: none; }
.leaflet-control-zoom a {
    background: rgba(18, 18, 20, 0.85) !important;
    color: #ccc !important;
    border-color: rgba(255,255,255,0.1) !important;
}
.leaflet-control-zoom a:hover { background: rgba(30, 30, 35, 0.95) !important; color: #fff !important; }

/* 툴팁 */
.mp-tooltip {
    background: rgba(10, 10, 12, 0.92) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #e0e0e0 !important;
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6) !important;
}

/* ─── HUD ─────────────────────────── */
.mp-hud {
    position: absolute;
    top: 16px; left: 16px;
    width: 300px;
    background: rgba(14, 14, 16, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    color: var(--text-primary);
}
.mp-hud-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.mp-hud-header h3 {
    margin: 0; font-size: 14px; font-weight: 500;
    display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.85);
}
.mp-hud-toggle {
    background: none; border: none; color: rgba(255,255,255,0.4);
    cursor: pointer; font-size: 14px; padding: 2px 6px; transition: color 0.2s;
}
.mp-hud-toggle:hover { color: #fff; }
.mp-hud-body.collapsed { display: none; }

.mp-select {
    width: 100%; background: rgba(0, 0, 0, 0.4); color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
    padding: 7px 10px; font-size: 12px; outline: none; cursor: pointer; margin-bottom: 10px;
}
.mp-select optgroup { color: var(--color-accent); font-weight: 600; font-size: 11px; }
.mp-select option { background: #1a1a1e; color: #ddd; font-size: 12px; }
.mp-map-selector { margin-bottom: 10px; }

/* 검색 */
.mp-hud-search { margin-bottom: 10px; }
.mp-search-wrapper { position: relative; width: 100%; }
.mp-search-wrapper i {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,0.3); font-size: 14px;
}
.mp-search-wrapper input {
    width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff; padding: 7px 10px 7px 32px; border-radius: 6px; font-size: 12px; transition: border-color 0.2s;
}
.mp-search-wrapper input:focus { outline: none; border-color: var(--color-accent); }
.mp-search-wrapper input::placeholder { color: rgba(255,255,255,0.25); }

/* 검색 결과 */
.mp-search-results {
    max-height: 200px; overflow-y: auto; margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; background: rgba(0,0,0,0.4);
}
.mp-search-results::-webkit-scrollbar { width: 4px; }
.mp-search-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.mp-search-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    cursor: pointer; font-size: 12px; color: rgba(255,255,255,0.7); transition: background 0.15s;
}
.mp-search-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.mp-search-item .name { flex: 1; }
.mp-search-item .level { color: rgba(255,255,255,0.35); font-size: 11px; }
.mp-search-empty { padding: 12px; text-align: center; color: rgba(255,255,255,0.3); font-size: 12px; }

/* 필터 토글 */
.mp-hud-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.mp-toggle {
    display: flex; align-items: center; gap: 5px; cursor: pointer;
    font-size: 11px; color: rgba(255,255,255,0.4); user-select: none;
}
.mp-toggle input { display: none; }
.mp-toggle .slider {
    position: relative; width: 26px; height: 14px;
    background-color: rgba(255, 255, 255, 0.12); border-radius: 14px; transition: .25s;
}
.mp-toggle .slider:before {
    position: absolute; content: ""; height: 10px; width: 10px;
    left: 2px; bottom: 2px; background-color: rgba(255,255,255,0.5);
    transition: .25s; border-radius: 50%;
}
.mp-toggle input:checked + .slider { background-color: var(--color-accent); }
.mp-toggle input:checked + .slider:before { transform: translateX(12px); background-color: #000; }
.mp-toggle input:checked ~ .label-text { color: rgba(255,255,255,0.85); }
.mp-toggle .label-text i { font-size: 12px; vertical-align: -1px; }

/* ─── 마커 ─────────────────────────── */
.mp-marker-icon {
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: transform 0.15s;
}
.mp-marker-icon:hover { transform: scale(1.6); z-index: 999 !important; }
.mp-marker-monster {
    background-color: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
    border: 1.5px solid rgba(255,255,255,0.6);
}
.mp-marker-boss {
    background-color: #a855f7; box-shadow: 0 0 10px rgba(168, 85, 247, 0.7);
    border: 2px solid #fbbf24;
}
.mp-marker-portal {
    background-color: #22d3ee; box-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
    border: 1.5px solid rgba(255,255,255,0.5); border-radius: 3px;
}

/* 영역 라벨 */
.mp-region-label { background: none !important; border: none !important; box-shadow: none !important; }
.mp-region-label span {
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85);
    text-shadow:
        0 0 4px rgba(0,0,0,1),
        0 0 8px rgba(0,0,0,0.9),
        1px 1px 2px rgba(0,0,0,0.9),
        -1px -1px 2px rgba(0,0,0,0.9);
    white-space: nowrap; pointer-events: none;
    letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════
   린클인포 스타일 Leaflet Popup (핵심)
   ═══════════════════════════════════════════ */
.mp-leaflet-popup .leaflet-popup-content-wrapper {
    background: rgba(20, 20, 22, 0.96) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7) !important;
    color: #e0e0e0 !important;
    padding: 0 !important;
}
.mp-leaflet-popup .leaflet-popup-content {
    margin: 0 !important;
    font-family: var(--font-ui), sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.mp-leaflet-popup .leaflet-popup-tip {
    background: rgba(20, 20, 22, 0.96) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: none !important;
}
.mp-leaflet-popup .leaflet-popup-close-button {
    color: rgba(255,255,255,0.4) !important;
    font-size: 20px !important;
    top: 8px !important;
    right: 8px !important;
}
.mp-leaflet-popup .leaflet-popup-close-button:hover { color: #fff !important; }

/* 팝업 내부 구조 */
.mp-popup { padding: 16px; min-width: 260px; }

/* 헤더: 이미지 + 이름 */
.mp-popup-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mp-popup-icon {
    width: 48px; height: 48px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.3); border-radius: 6px;
    overflow: hidden;
}
.mp-popup-icon img { max-width: 44px; max-height: 44px; object-fit: contain; image-rendering: pixelated; }
.mp-popup-icon.portal { font-size: 24px; color: #22d3ee; }
.mp-popup-title strong {
    display: block; font-size: 15px; font-weight: 600; color: #fff;
}
.mp-popup-title .sub {
    font-size: 11px; color: rgba(255,255,255,0.4);
}

/* 스탯 테이블 (린클인포 동일 레이아웃) */
.mp-popup-stats {
    width: 100%; border-collapse: collapse;
    margin-bottom: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
}
.mp-popup-stats td {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mp-popup-stats .sl {
    font-size: 12px; color: rgba(255,255,255,0.4); width: 55px;
}
.mp-popup-stats .sv {
    font-size: 14px; font-weight: 700; color: #fff;
    font-family: var(--font-mono); text-align: right; width: 65px;
}
.mp-popup-stats .sv.hp { color: #ef4444; }
.mp-popup-stats .sv.mp { color: #3b82f6; }

/* 섹션 (특징/출현장소/드랍) */
.mp-popup-section {
    padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.05);
}
.mp-popup-label {
    font-size: 11px; color: rgba(255,255,255,0.35);
    margin-bottom: 4px;
}

/* 특징 태그 */
.mp-popup-features {
    font-size: 12px; line-height: 1.7;
}
.mp-popup-ftag {
    color: rgba(255,255,255,0.6);
}
.mp-popup-ftag.weakness {
    color: #ef4444;
    cursor: default;
}

/* 출현 장소 */
.mp-popup-locs {
    font-size: 12px; color: rgba(255,255,255,0.7);
}

/* 드랍 아이템 */
.mp-popup-drops {
    font-size: 12px; line-height: 1.8;
}
.mp-popup-drop-link {
    color: #ef4444; text-decoration: none;
}
.mp-popup-drop-link:hover { color: #fca5a5; text-decoration: underline; }

/* 포탈 팝업 액션 */
.mp-popup-action { margin-top: 10px; }
.mp-popup-btn {
    display: flex; width: 100%; padding: 8px;
    align-items: center; justify-content: center; gap: 6px;
    background: var(--color-accent); color: #000;
    border: none; border-radius: 6px; font-size: 12px;
    font-weight: 500; cursor: pointer; transition: opacity 0.2s;
}
.mp-popup-btn:hover { opacity: 0.85; }

/* ─── 맵 정보 오버레이 ─────────────────────────── */
.mp-info-overlay {
    position: absolute; bottom: 12px; left: 12px; z-index: 1000;
    display: flex; align-items: center; gap: 12px;
    padding: 8px 14px;
    background: rgba(14, 14, 16, 0.8); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 6px;
    font-size: 12px; color: rgba(255,255,255,0.6);
}
.mp-info-overlay .map-name { color: #fff; font-weight: 500; }
.mp-info-overlay .map-stats { display: flex; gap: 10px; }
.mp-info-overlay .map-stats span { display: flex; align-items: center; gap: 3px; }
.mp-info-overlay .map-stats i { font-size: 12px; }

/* ─── 반응형 ─────────────────────────── */
@media (max-width: 768px) {
    .mp-hud { width: calc(100% - 24px); left: 12px; top: 12px; }
    .mp-info-overlay { bottom: 8px; left: 8px; font-size: 11px; padding: 6px 10px; }
    .mp-popup { min-width: 220px; }
}