/* =====================================================================
 * map-overlay.css
 * GANLS.component.mapOverlay 전용 스타일
 *
 * ── 포함 컴포넌트 ────────────────────────────────────────────────────
 *   #map-share-popup  지도 공유 URL 팝업 (_showSharePopup)
 *
 * ── 의존 ─────────────────────────────────────────────────────────────
 *   GANLS.component.mapOverlay.js
 * ===================================================================== */


/* ── 지도 공유 팝업 (#map-share-popup) ──────────────────────────────── */

/* 팝업 루트: 화면 전체를 덮는 고정 레이어 */
#map-share-popup {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 반투명 배경 오버레이 */
#map-share-popup .map-share-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

/* 다이얼로그 박스 */
#map-share-popup .map-share-dialog {
    position: relative;
    background: #fff;
    border-radius: 8px;
    width: 480px;
    max-width: calc(100vw - 32px);
    padding: 24px 24px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}

/* 헤더 영역: 제목 + 닫기 버튼 */
#map-share-popup .map-share-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

#map-share-popup .map-share-dialog-head strong {
    font-size: 17px;
    font-weight: 700;
    color: #111;
}

/* 닫기(X) 버튼 */
#map-share-popup .map-share-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    color: #444;
}

/* 라벨 행: 왼쪽 색상 바 + 텍스트 */
#map-share-popup .map-share-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #333;
    font-weight: 500;
    margin-bottom: 8px;
}

/* 라벨 왼쪽 컬러 바 */
#map-share-popup .map-share-label-bar {
    display: inline-block;
    width: 4px;
    height: 14px;
    background: #1a73e8;
    border-radius: 2px;
    flex-shrink: 0;
}

/* 공유 URL 표시용 읽기 전용 입력 */
#map-share-popup .map-share-url-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 9px 12px;
    font-size: 13px;
    color: #333;
    background: #f5f5f5;
    outline: none;
    margin-bottom: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 클립보드 복사 버튼 */
#map-share-popup .map-share-copy-btn {
    display: block;
    width: 100%;
    padding: 11px 0;
    border: none;
    border-radius: 4px;
    background: #1a73e8;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: .02em;
}

#map-share-popup .map-share-copy-btn:hover {
    background: #1558b0;
}

/* 복사 완료 안내 메시지 (aria-live 영역) */
#map-share-popup .map-share-copy-msg {
    min-height: 18px;
    font-size: 12px;
    color: #1a73e8;
    margin-top: 6px;
    text-align: center;
}