/* embed.css
 * nplogic-map 이 WebView2 등 외부 호스트에 임베드될 때 적용되는 스타일.
 * body.embed-mode 클래스가 붙은 경우에만 활성.
 * body.embed-case-compare / body.embed-transaction-select 는 모드별 분기용.
 */

/* ─── case-compare: 모든 UI 패널 숨김 (순수 마커 비교 지도) ──────── */
body.embed-case-compare .search-panel,
body.embed-case-compare #resultPanel,
body.embed-case-compare #tradeHistoryPanel,
body.embed-case-compare #filterPanel,
body.embed-case-compare #buildingInfoPanel,
body.embed-case-compare #streetViewPanel,
body.embed-case-compare #mapControlPanel,
body.embed-case-compare #landSummaryPanel,
body.embed-case-compare #addressSummaryPanel,
body.embed-case-compare #landSummaryBackdrop,
body.embed-case-compare #addressSummaryBackdrop,
body.embed-case-compare #summaryTablePanel,
body.embed-case-compare #globalLoadingOverlay {
    display: none !important;
}

/* transaction-select 은 일반 UI 를 그대로 사용하되(검색/필터/실거래가 토글 등)
 * 컨테이너만 풀스크린으로 맞춘다. 패널 숨김 없음. */

/* ─── 지도 컨테이너 풀스크린 (두 모드 공통) ────────────────── */
body.embed-mode,
body.embed-mode html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
}

body.embed-case-compare #mapContainer,
body.embed-case-compare .map-container,
body.embed-case-compare .map-wrapper,
body.embed-case-compare #kakaoMap,
body.embed-case-compare #naverMap,
body.embed-case-compare #googleMap {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
}

/* ─── 임베드 마커 공통 ──────────────────────────────────────── */
.np-embed-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 14px;
    white-space: nowrap;
    user-select: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transform: translate(-50%, -50%);
}

/* case-compare: 번호 라벨 (원형, 파란색) */
.np-embed-marker--compare {
    background: #2563EB;
    color: #ffffff;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

/* transaction-select: 가격 라벨 (pill, 화이트 배경) */
.np-embed-marker--transaction {
    background: #ffffff;
    color: #0F172A;
    border: 2px solid #CBD5E1;
    cursor: pointer;
    transition: all 0.15s ease-out;
}

.np-embed-marker--transaction:hover {
    border-color: #2563EB;
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* 선택된 상태 — 초록 배경 */
.np-embed-marker--transaction.np-embed-marker--selected {
    background: #16A34A;
    color: #ffffff;
    border-color: #15803D;
    box-shadow: 0 3px 10px rgba(22, 163, 74, 0.45);
}

.np-embed-marker--transaction.np-embed-marker--selected:hover {
    background: #15803D;
}