@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Black+Han+Sans&display=swap');

:root {
    /* 다크 테마 2025 (Charcoal + Neon Green) */
    --lin-bg-dark: #0A0A0A;           /* 순수 검정에 가까운 차콜 */
    --lin-panel-bg: #141414;          /* 카드 배경 */
    --lin-text-main: #F1F5F9;         /* 밝은 슬레이트 (near-white) */
    --lin-text-gold: #22C55E;         /* 네온 그린 (기존 골드 대체) */
    --lin-text-red: #EF4444;          /* 밝은 레드 */
    --lin-border-gold: #22C55E;       /* 액센트 테두리 */
    --lin-border-dark: #27272A;       /* 다크 테두리 */
    --lin-input-bg: #1A1A1A;          /* 입력 필드 배경 */
    --lin-hover-gold: #4ADE80;        /* 호버 시 밝은 그린 */
    
    /* 폰트 */
    --lin-font-heading: 'Noto Sans KR', sans-serif;
    --lin-font-body: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* 간격 (20-30% 증가) */
    --lin-spacing-sm: 10px;           /* 기존 8px → 10px */
    --lin-spacing-md: 20px;           /* 기존 16px → 20px */
    --lin-spacing-lg: 30px;           /* 기존 24px → 30px */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--lin-bg-dark);
    color: var(--lin-text-main);
    font-family: var(--lin-font-body);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Typography */
h1, h2, h3 {
    font-family: var(--lin-font-heading);
    color: var(--lin-text-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--lin-spacing-lg);
    text-align: center;
    border-bottom: 2px solid var(--lin-border-gold);
    padding-bottom: var(--lin-spacing-sm);
}

/* Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--lin-spacing-md);
    width: 100%;
    flex: 1;
}

/* Tab Navigation */
.tab-navigation {
    display: flex;
    gap: var(--lin-spacing-sm);
    margin-bottom: var(--lin-spacing-lg);
    flex-wrap: wrap;
    justify-content: center;
}

.tab-button {
    background-color: var(--lin-panel-bg);
    color: var(--lin-text-main);
    border: 1px solid var(--lin-border-dark);
    padding: 10px 20px;
    font-size: 0.95rem;
    font-family: var(--lin-font-body);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-button:hover {
    background-color: #1E1E1E;
    border-color: var(--lin-hover-gold);
    color: var(--lin-hover-gold);
}

.tab-button.active {
    background-color: var(--lin-text-gold);
    color: var(--lin-bg-dark);
    border-color: var(--lin-text-gold);
    font-weight: bold;
}

.tab-button i {
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    .tab-navigation {
        gap: 6px;
    }
    
    .tab-button {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
    
    .tab-button i {
        width: 16px;
        height: 16px;
    }
}

/* Search & Filter Section */
.filter-section {
    background-color: var(--lin-panel-bg);
    border: 1px solid var(--lin-border-gold);
    padding: var(--lin-spacing-md);
    margin-bottom: var(--lin-spacing-lg);
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

.search-row {
    display: flex;
    gap: var(--lin-spacing-md);
    margin-bottom: var(--lin-spacing-md);
    flex-wrap: wrap;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 200px;
}

.input-group label {
    font-size: 0.9rem;
    color: var(--lin-text-gold);
    font-weight: bold;
}

input[type="text"],
input[type="number"] {
    background-color: var(--lin-input-bg);
    border: 1px solid var(--lin-border-dark);
    color: var(--lin-text-main);
    padding: 10px;
    font-size: 1rem;
    border-radius: 2px;
    transition: border-color 0.3s;
}

input[type="text"]:focus,
input[type="number"]:focus {
    outline: none;
    border-color: var(--lin-text-gold);
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
}

/* Search Type Radios */
.search-type-radios {
    display: flex;
    gap: var(--lin-spacing-md);
    flex-wrap: wrap;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.95rem;
}

.radio-label input[type="radio"] {
    accent-color: var(--lin-text-gold);
    width: 16px;
    height: 16px;
}

/* Region Checkboxes */
.region-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lin-spacing-md);
    padding-top: var(--lin-spacing-sm);
    border-top: 1px solid var(--lin-border-dark);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.95rem;
}

.checkbox-label input[type="checkbox"] {
    accent-color: var(--lin-text-gold);
    width: 16px;
    height: 16px;
}

/* Search Button */
.search-button {
    background-color: var(--lin-border-gold);
    color: #fff;
    border: 1px solid var(--lin-text-gold);
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    margin-top: var(--lin-spacing-md);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    width: 100%;
}

.search-button:hover {
    background-color: var(--lin-text-gold);
    border-color: var(--lin-hover-gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
}

.search-button:active {
    transform: translateY(0);
}

/* Results Grid (Card Layout) */
.results-container {
    background-color: transparent;
    border: none;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--lin-spacing-md);
}

.monster-card {
    background-color: var(--lin-panel-bg);
    border: 1px solid var(--lin-border-gold);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
}

.monster-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6), 0 0 10px rgba(212, 175, 55, 0.2);
    border-color: var(--lin-hover-gold);
}

.card-header {
    background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
    padding: var(--lin-spacing-md);
    display: flex;
    align-items: center;
    gap: var(--lin-spacing-md);
    border-bottom: 1px solid var(--lin-border-dark);
}

.monster-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
}

.monster-info {
    flex: 1;
}

.monster-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--lin-text-gold);
    margin-bottom: 4px;
}

.monster-meta {
    font-size: 0.85rem;
    color: #888;
    display: flex;
    gap: 8px;
}

.level-badge {
    background-color: #333;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #fff;
}

.card-body {
    padding: var(--lin-spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--lin-spacing-sm);
}

.location-info {
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.location-info i {
    color: var(--lin-border-gold);
    margin-top: 3px;
}

.drop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}

.drop-item:hover {
    border-color: var(--lin-border-gold);
    background-color: rgba(212, 175, 55, 0.05);
}

.item-image {
    width: 32px;
    height: 32px;
    object-fit: contain;
    /* 검정 배경 제거: 밝은 색만 보이도록 blend + filter 조합 */
    mix-blend-mode: screen;
    filter: brightness(1.1) contrast(1.05);
}

.item-image-placeholder {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333;
    border-radius: 4px;
}

.item-name {
    font-size: 0.95rem;
    color: var(--lin-text-main);
}

/* Item Specs */
.item-specs {
    background-color: rgba(0, 0, 0, 0.2);
    padding: var(--lin-spacing-sm);
    border-radius: 4px;
    border: 1px solid var(--lin-border-dark);
}

.spec-item {
    margin-bottom: 6px;
    font-size: 0.9rem;
    display: flex;
    gap: 8px;
}

.spec-item:last-child {
    margin-bottom: 0;
}

.spec-label {
    color: var(--lin-text-gold);
    font-weight: bold;
    min-width: 60px;
}

.spec-value {
    color: var(--lin-text-main);
    flex: 1;
}

/* Blessed Item Glow Effect */
.blessed-item-glow {
    box-shadow: 
        0 0 15px 5px rgba(255, 215, 0, 0.6),
        0 0 30px 10px rgba(255, 215, 0, 0.3);
    border-radius: 4px;
    animation: blessedPulse 2s ease-in-out infinite;
}

@keyframes blessedPulse {
    0%, 100% {
        box-shadow: 
            0 0 15px 5px rgba(255, 215, 0, 0.6),
            0 0 30px 10px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 
            0 0 20px 8px rgba(255, 215, 0, 0.8),
            0 0 40px 15px rgba(255, 215, 0, 0.4);
    }
}

/* Cursed Item Glow Effect */
.cursed-item-glow {
    box-shadow: 
        0 0 15px 5px rgba(139, 0, 0, 0.8),
        0 0 30px 10px rgba(80, 0, 0, 0.4);
    border-radius: 4px;
    animation: cursedPulse 2s ease-in-out infinite;
}

@keyframes cursedPulse {
    0%, 100% {
        box-shadow: 
            0 0 15px 5px rgba(139, 0, 0, 0.8),
            0 0 30px 10px rgba(80, 0, 0, 0.4);
    }
    50% {
        box-shadow: 
            0 0 20px 8px rgba(139, 0, 0, 0.9),
            0 0 40px 15px rgba(80, 0, 0, 0.5);
    }
}

/* Loading & Error */
.loading-spinner {
    display: none; /* Hidden by default */
    text-align: center;
    padding: var(--lin-spacing-lg);
    color: var(--lin-text-gold);
    font-style: italic;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

[data-lucide="loader-2"] {
  animation: spin 1s linear infinite;
}

.error-message {
    display: none; /* Hidden by default */
    background-color: rgba(201, 48, 44, 0.1);
    border: 1px solid var(--lin-text-red);
    color: var(--lin-text-red);
    padding: var(--lin-spacing-md);
    margin-bottom: var(--lin-spacing-md);
    border-radius: 4px;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 600px) {
    h1 {
        font-size: 1.5rem;
    }

    .search-row {
        flex-direction: column;
        gap: var(--lin-spacing-sm);
    }

    .input-group {
        width: 100%;
    }
    
    .level-range {
        justify-content: space-between;
    }
    
    .level-range input {
        width: 45%;
    }

    .region-checkboxes {
        flex-direction: column;
        gap: 8px;
    }
    
    .results-table th, 
    .results-table td {
        padding: 8px;
        font-size: 0.9rem;
    }
}

/* Modal Dialog */
#detail-modal {
    background-color: var(--lin-panel-bg);
    border: 1px solid var(--lin-border-gold);
    border-radius: 8px;
    color: var(--lin-text-main);
    padding: 0;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    margin: auto;
}

/* 맵 모달 확장 모드 */
#detail-modal.map-mode {
    max-width: 950px;
    width: 96%;
    max-height: 92vh;
}

#detail-modal.map-mode .modal-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--lin-spacing-md);
}

#detail-modal.map-mode .map-modal-content {
    flex: 1;
    min-height: 0;
    max-height: none;
}

/* 단일 맵 뷰 (renderSingleMap) - 층 구분 없는 필드 맵 스크롤 */
#detail-modal.map-mode .map-detail {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* 스크롤바 테마 스타일 */
.modal-body::-webkit-scrollbar,
.map-main-content::-webkit-scrollbar,
.floor-sidebar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.modal-body::-webkit-scrollbar-track,
.map-main-content::-webkit-scrollbar-track,
.floor-sidebar::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb,
.map-main-content::-webkit-scrollbar-thumb,
.floor-sidebar::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover,
.map-main-content::-webkit-scrollbar-thumb:hover,
.floor-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--lin-border-gold);
}

/* Firefox */
.modal-body {
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a #1a1a1a;
}

.map-main-content,
.floor-sidebar {
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a #1a1a1a;
}

#detail-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(2px);
}

#detail-modal[open] {
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease-out;
}

.modal-header {
    background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
    padding: var(--lin-spacing-md);
    border-bottom: 1px solid var(--lin-border-gold);
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    border: none;
    padding: 0;
    padding-right: 40px;
    text-align: left;
    flex: 1;
}

.modal-close {
    position: absolute;
    top: 50%;
    right: var(--lin-spacing-md);
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--lin-border-gold);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.3s;
    line-height: 1;
}

.modal-close:hover {
    color: var(--lin-hover-gold);
}

/* 뒤로가기 버튼 */
.modal-back {
    background: none;
    border: 1px solid #444;
    color: var(--lin-border-gold);
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.modal-back:hover {
    color: var(--lin-hover-gold);
    border-color: var(--lin-hover-gold);
    background: rgba(74, 222, 128, 0.08);
}

.modal-back i {
    width: 16px;
    height: 16px;
}

.modal-body {
    padding: var(--lin-spacing-md);
    overflow-y: auto;
    flex: 1;
    position: relative; /* 오버레이 패널 절대 위치 기준 */
}

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

@media (max-width: 600px) {
    #detail-modal {
        width: 95%;
        max-height: 95vh;
    }
    .modal-header h2 {
        font-size: 1.2rem;
    }
}

/* ============================================================================
   맵 모달 - 층 선택 UI (린클인포 스타일)
   ============================================================================ */

.map-modal-content {
    display: flex;
    gap: 1rem;
    min-height: 500px;
    max-height: 70vh;
}

/* 층 선택 사이드바 */
.floor-sidebar {
    width: 90px;
    flex-shrink: 0;
    border-right: 1px solid #333;
    padding-right: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
}

.floor-sidebar-title {
    font-size: 0.75rem;
    color: #888;
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #333;
    margin-bottom: 0.25rem;
}

.floor-button {
    background: #222;
    color: #ccc;
    border: 1px solid #444;
    padding: 0.6rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.floor-button:hover {
    background: #2a2a2a;
    border-color: #555;
}

.floor-button.active {
    background: #d4af37;
    color: #1a1a1a;
    border-color: #d4af37;
    font-weight: 600;
}

/* 메인 콘텐츠 영역 */
.map-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}

.map-image-section {
    width: 100%;
    min-height: 220px;
    background: #1a1a1a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0; /* 이미지 영역 축소 방지 */
    position: relative; /* 줌 힌트 절대 위치용 */
    user-select: none;
}

/* 줌 힌트 레이블 */
.map-zoom-hint {
    position: absolute;
    bottom: 8px;
    right: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #999;
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0.8;
    transition: opacity 0.4s;
    z-index: 2;
}

/* 맵 모드에서 맵 이미지 높이 고정 (주인공은 맵) */
#detail-modal.map-mode .map-image-section {
    height: 480px;
    min-height: 480px;
}

.map-image {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* 비율 유지하면서 전체 맵 표시 */
    object-position: center;
    border-radius: 8px;
}

.map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    padding: 2rem;
}

.map-placeholder i {
    width: 48px;
    height: 48px;
}

.map-monsters-section {
    flex: 1;
}

.section-title {
    font-size: 0.9rem;
    color: #888;
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title i {
    width: 16px;
    height: 16px;
}

.no-monsters {
    text-align: center;
    padding: 2rem;
    color: #888;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* 반응형: 모바일 */
@media (max-width: 768px) {
    .map-modal-content {
        flex-direction: column;
        max-height: none;
    }

    .floor-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #333;
        padding-right: 0;
        padding-bottom: 0.75rem;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: visible;
    }

    .floor-sidebar-title {
        display: none;
    }

    .floor-button {
        min-width: 60px;
        flex-shrink: 0;
    }

    .map-image-section {
        min-height: 200px;
    }
}

/* ============================================================================
   몬스터 상세 오버레이 패널 (맵 모달 위에 오른쪽에서 슬라이드 인)
   ============================================================================ */

.monster-detail-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: clamp(300px, 44%, 420px);
    background: #111;
    border-left: 2px solid var(--lin-border-gold);
    display: flex;
    flex-direction: column;
    z-index: 20;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.8);
    animation: overlaySlideIn 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.monster-detail-overlay.slide-out {
    animation: overlaySlideOut 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

@keyframes overlaySlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes overlaySlideOut {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}

/* 오버레이 헤더 */
.monster-detail-overlay-header {
    background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
    padding: 12px var(--lin-spacing-md);
    border-bottom: 1px solid var(--lin-border-gold);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.monster-overlay-title {
    flex: 1;
    margin: 0;
    font-size: 1.05rem;
    color: var(--lin-text-gold);
    font-family: var(--lin-font-heading);
    text-transform: none;
    letter-spacing: 0;
    padding: 0;
    border: none;
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 오버레이 본문 */
.monster-detail-overlay-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--lin-spacing-md);
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a #111;
}

.monster-detail-overlay-body::-webkit-scrollbar { width: 6px; }
.monster-detail-overlay-body::-webkit-scrollbar-track { background: #111; border-radius: 3px; }
.monster-detail-overlay-body::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
.monster-detail-overlay-body::-webkit-scrollbar-thumb:hover { background: var(--lin-border-gold); }

/* 오버레이 내 드랍 아이템 */
.monster-detail-overlay-body .drop-item {
    padding: 6px 8px;
}

/* 모바일: 오버레이 전체 너비 */
@media (max-width: 768px) {
    .monster-detail-overlay {
        width: 100%;
        border-left: none;
        border-top: 2px solid var(--lin-border-gold);
        height: 60%;
        top: auto;
        animation: overlaySlideInBottom 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .monster-detail-overlay.slide-out {
        animation: overlaySlideOutBottom 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
    }

    @keyframes overlaySlideInBottom {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    @keyframes overlaySlideOutBottom {
        from { transform: translateY(0);    opacity: 1; }
        to   { transform: translateY(100%); opacity: 0; }
    }
}

/* =============================================
   아덴 월드맵 iframe Overlay
   ============================================= */

/* fullscreen overlay 컨테이너 */
#world-map-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #0d0d0d;
    flex-direction: column;
    display: none; /* JS에서 flex로 변경 */
}

/* 오버레이 상단 헤더 바 */
.world-map-overlay-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: #161b22;
    border-bottom: 1px solid #30363d;
    flex-shrink: 0;
    min-height: 48px;
}

.world-map-overlay-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #e6edf3;
}

.world-map-overlay-title svg {
    width: 16px;
    height: 16px;
    color: #58a6ff;
}

.world-map-overlay-source,
.world-map-overlay-info {
    font-size: 0.75rem;
    color: #8b949e;
    margin-left: 0.25rem;
}

.world-map-overlay-close {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: #21262d;
    border: 1px solid #30363d;
    color: #e6edf3;
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.world-map-overlay-close:hover {
    background: #30363d;
    border-color: #58a6ff;
}

.world-map-overlay-close svg {
    width: 14px;
    height: 14px;
}

/* iframe 자체 */
#world-map-iframe {
    flex: 1;
    width: 100%;
    border: none;
    display: block;
}

/* =============================================
   아덴 월드맵 배너 버튼 (맵 탭 상단)
   ============================================= */

.world-map-banner {
    margin-bottom: 0.5rem;
}

.world-map-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #1e3a5f 0%, #0d1f3c 100%);
    border: 1px solid #58a6ff44;
    border-radius: 10px;
    color: #e6edf3;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
}

.world-map-btn:hover {
    background: linear-gradient(135deg, #254e84 0%, #132b56 100%);
    border-color: #58a6ff99;
    transform: translateY(-1px);
}

.world-map-btn:active {
    transform: translateY(0);
}

.world-map-btn > i[data-lucide="globe"] {
    width: 28px;
    height: 28px;
    color: #58a6ff;
    flex-shrink: 0;
}

.world-map-btn > span {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.world-map-btn strong {
    font-size: 1rem;
    font-weight: 600;
    color: #e6edf3;
}

.world-map-btn small {
    font-size: 0.78rem;
    color: #8b949e;
}

.world-map-btn > i[data-lucide="chevron-right"] {
    width: 18px;
    height: 18px;
    color: #58a6ff;
    flex-shrink: 0;
}

/* =============================================
   Leaflet 월드맵 컨테이너
   ============================================= */

/* Leaflet 맵 div */
#world-map-leaflet {
    flex: 1;
    width: 100%;
    min-height: 0;
    background: #111;
}

/* 오버레이 info 텍스트 (몬스터 수) */
.world-map-overlay-info {
    font-size: 0.75rem;
    color: #8b949e;
    margin-left: 0.25rem;
}

/* 로딩 스피너 (맵 초기화 전) */
.world-map-loading {
    position: absolute;
    inset: 48px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #8b949e;
    font-size: 0.95rem;
    background: #0d0d0d;
    z-index: 1;
}

.world-map-loading svg {
    animation: spin 1.2s linear infinite;
    width: 22px;
    height: 22px;
}

/* =============================================
   Leaflet 몬스터 마커
   ============================================= */

/* 기본 마커 래퍼 */
/* =============================================
   Leaflet 월드맵 마커
   ============================================= */

/* CSS 변수: 줌 레벨에 따라 JS에서 동적으로 업데이트 */
#world-map-leaflet {
    --wm-size: 36px;
    --wm-img-size: 28px;
    --wm-anchor: -18px;   /* 초기값: -(36/2)px, zoom 변경 시 JS에서 업데이트 */
    --wm-font-size: 12px;
}

/* ── Leaflet .leaflet-marker-icon 기본 overflow 무력화
     배지(.wm-count-badge)가 마커 경계 밖으로 나오려면 반드시 필요 ── */
#world-map-leaflet .leaflet-marker-icon {
    overflow: visible !important;
}

/* ── 외부 래퍼: 크기/앵커를 CSS 변수로 제어 + 배지 overflow 허용
     - width/height !important : Leaflet 인라인 스타일 override (줌 연동 크기 적용)
     - margin !important        : Leaflet iconAnchor 고정값(-18px) override → 항상 -size/2로 유지
     - overflow: visible        : 배지(.wm-count-badge)가 원 밖으로 나오도록 허용 ── */
#world-map-leaflet .wm-marker-outer {
    /* position: relative 제거 — Leaflet이 인라인으로 position:absolute 설정하므로
       여기서 override하면 마커들이 normal flow로 쌓여 맵 아래로 이탈함 */
    overflow: visible;
    width: var(--wm-size) !important;
    height: var(--wm-size) !important;
    margin-left: var(--wm-anchor) !important;
    margin-top: var(--wm-anchor) !important;
}

/* ── 내부 원형: 이미지를 원형으로 clip ── */
#world-map-leaflet .wm-marker {
    background: rgba(22, 27, 34, 0.82);
    border: 2px solid rgba(255,255,255,0.28);
    border-radius: 50%;
    overflow: hidden;           /* 이미지를 원형으로 clip */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* hover: 외부 래퍼가 z-index 올리고, 내부 원형이 시각 피드백 */
.wm-marker-outer:hover {
    z-index: 1000 !important;
}
.wm-marker-outer:hover .wm-marker {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.35);
}

/* 같은 몬스터 hover 시 다른 위치들 하이라이트 */
.wm-marker-same {
    z-index: 900 !important;
}
.wm-marker-same .wm-marker {
    border-color: #f0e040 !important;
    box-shadow: 0 0 0 3px rgba(240, 224, 64, 0.45) !important;
    background: rgba(60, 50, 10, 0.88) !important;
}

/* 현재 hover 중인 마커 */
.wm-marker-hovered {
    z-index: 1001 !important;
}
.wm-marker-hovered .wm-marker {
    border-color: #58a6ff !important;
    box-shadow: 0 0 0 4px rgba(88, 166, 255, 0.55), 0 0 12px rgba(88, 166, 255, 0.3) !important;
    background: rgba(30, 50, 80, 0.9) !important;
}

/* 이미지 마커 */
.wm-marker-img {
    background: rgba(30, 30, 30, 0.72);
    border-color: rgba(200,200,200,0.35);
    padding: 2px;
}

#world-map-leaflet .wm-marker-img img {
    width: var(--wm-img-size) !important;
    height: var(--wm-img-size) !important;
    object-fit: contain;
    border-radius: 50%;
    display: block;
    pointer-events: none; /* 마커 클릭 이벤트 통과 */
}

/* 텍스트 폴백 마커 (이미지 없는 경우) */
.wm-marker-text {
    background: linear-gradient(135deg, #1e3a5f 0%, #1a4d2e 100%);
    border-color: #58a6ff55;
}

/* 마커 내부 모든 자식 요소의 포인터 이벤트 차단 (마커 클릭 통과) */
.wm-marker * {
    pointer-events: none;
}

#world-map-leaflet .wm-marker-abbr,
#world-map-leaflet .wm-marker-abbr-fallback {
    color: #e6edf3;
    font-size: var(--wm-font-size) !important;
    font-weight: 700;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}

/* 위치 수 배지 (마커 우상단) */
.wm-count-badge {
    position: absolute;
    top: -4px;
    right: -5px;
    background: #d29922;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 8px;
    padding: 1px 4px;
    min-width: 14px;
    text-align: center;
    line-height: 13px;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* =============================================
   Leaflet 툴팁
   ============================================= */

.wm-tooltip {
    background: rgba(13, 17, 23, 0.94) !important;
    border: 1px solid #30363d !important;
    color: #e6edf3 !important;
    font-size: 0.8rem !important;
    padding: 4px 9px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.45) !important;
    white-space: nowrap;
    font-weight: 500;
}

.wm-tooltip::before {
    border-top-color: #30363d !important;
}

/* =============================================
   Leaflet 팝업 컨테이너
   ============================================= */

.wm-popup-container .leaflet-popup-content-wrapper {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    color: #e6edf3 !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.6) !important;
    padding: 0 !important;
}

.wm-popup-container .leaflet-popup-tip {
    background: #30363d !important;
}

.wm-popup-container .leaflet-popup-content {
    margin: 0 !important;
    min-width: 300px;
    max-width: 340px;
}

/* =============================================
   팝업 내부 레이아웃
   ============================================= */

.wm-popup {
    padding: 14px;
}

/* 헤더: 몬스터 이미지 + 이름 + 레벨/속성 */
.wm-popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #30363d;
}

.wm-popup-img-wrap {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 30, 30, 0.6);
    border-radius: 8px;
    border: 1px solid #30363d;
    overflow: hidden;
}

.wm-popup-monster-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* 이미지 없을 때 텍스트 플레이스홀더 */
.wm-popup-img-placeholder {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #1e3a5f, #1a4d2e);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e6edf3;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid #30363d;
    flex-shrink: 0;
}

.wm-popup-title-block {
    flex: 1;
    min-width: 0;
}

.wm-popup-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #e6edf3;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 메타: 레벨 · 속성 */
.wm-popup-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.78rem;
}

.wm-meta-level {
    color: #3fb950;
    font-weight: 600;
    background: rgba(63, 185, 80, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid rgba(63, 185, 80, 0.25);
}

.wm-meta-attr {
    color: #d29922;
    font-weight: 500;
    background: rgba(210, 153, 34, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid rgba(210, 153, 34, 0.25);
}

.wm-meta-sep {
    color: #484f58;
}

.wm-meta-loading {
    color: #484f58;
    font-size: 0.75rem;
    font-style: italic;
}

/* =============================================
   출현 장소 섹션
   ============================================= */

.wm-popup-locations {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #30363d;
}

.wm-popup-locs-label {
    font-size: 0.7rem;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    margin-bottom: 5px;
}

.wm-popup-locs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.wm-loc-tag {
    font-size: 0.72rem;
    color: #c9d1d9;
    background: #21262d;
    border: 1px solid #30363d;
    border-radius: 4px;
    padding: 1px 6px;
}

/* =============================================
   드롭 아이템 섹션 (2열 그리드)
   ============================================= */

.wm-popup-drops-section {
    /* 최대 높이 + 스크롤 (아이템이 많을 경우) */
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #30363d transparent;
}

.wm-popup-drops-section::-webkit-scrollbar {
    width: 4px;
}

.wm-popup-drops-section::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 2px;
}

.wm-popup-drops-loading {
    font-size: 0.8rem;
    color: #484f58;
    padding: 4px 0;
    font-style: italic;
}

.wm-drops-label {
    font-size: 0.7rem;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    margin-bottom: 6px;
}

.wm-drops-count {
    background: #21262d;
    border: 1px solid #30363d;
    border-radius: 3px;
    padding: 0 4px;
    font-size: 0.65rem;
    color: #c9d1d9;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* 2열 그리드 */
.wm-drops-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.wm-drop-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 5px;
    background: #0d1117;
    border: 1px solid #21262d;
    border-radius: 5px;
    min-width: 0;
    transition: border-color 0.1s;
}

.wm-drop-item:hover {
    border-color: #30363d;
    background: #161b22;
}

.wm-drop-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 3px;
}

.wm-drop-img-none {
    background: #21262d;
    border-radius: 3px;
}

.wm-drop-name {
    font-size: 0.75rem;
    color: #c9d1d9;
    line-height: 1.3;
    word-break: keep-all;
    overflow-wrap: break-word;
    /* 최대 2줄 표시: 길면 말줄임 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wm-popup-no-drops {
    font-size: 0.8rem;
    color: #484f58;
    font-style: italic;
    padding: 4px 0;
}

/* Leaflet 줌 컨트롤 다크 테마 */
.leaflet-control-zoom a {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #e6edf3 !important;
}

.leaflet-control-zoom a:hover {
    background: #30363d !important;
}