/* =================================
   GEO MAP CONTAINER (지도 박스)
   ================================= */

.geo-map-wrap {
    margin: 30px 10px !important; /* 상하 여백 확보 및 부모 패딩 대응 */
    clear: both;
}

.geo-map-header {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px; /* 제목과 박스 사이 간격 */
    color: #1e293b;
}

.geo-map-box {
    border: 1px solid #e2e8f0 !important; /* 테두리 색상을 조금 더 명확하게 변경 */
    border-radius: 12px;
    background: #ffffff;
    padding: 12px !important; /* 🔥 음수 패딩 제거 및 정상 패딩 설정 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 그림자 부드럽게 */
    overflow: hidden; /* 내부 요소가 테두리를 넘지 않도록 */
}

.geo-map-box iframe {
    width: 100% !important;
    height: 360px !important;
    border: none !important; /* iframe 자체 테두리는 제거 */
    border-radius: 8px;      /* 박스 곡률에 맞춰 내부도 둥글게 */
    display: block;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .geo-map-box iframe {
        height: 280px !important; /* 모바일에서는 높이를 줄임 */
    }
}




/* =================================
   GEO MAP CONTAINER (기본 설정)
   ================================= */
.geo-map-wrap {
    margin: 30px 10px !important;
    clear: both;
}

.geo-map-header {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px;
    color: #1e293b;
}

.geo-map-box {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px;
    background: #ffffff;
    padding: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.geo-map-box iframe {
    width: 100% !important;
    height: 360px !important;
    border: none !important;
    border-radius: 8px;
    display: block;
}










/* =================================
   MOBILE OPTIMIZATION (모바일 최적화)
   ================================= */
@media (max-width: 768px) {
    /* 1. 전체 컨테이너 여백 축소 (화면을 더 넓게 쓰기 위해) */
    .geo-map-wrap {
        margin: 0 0 !important; /* 상하 여백 줄이고 좌우 여백 제거 */
        padding: 0 1px !important;  /* 아주 미세한 여백만 부여 */
    }

    /* 2. 제목 크기 조절 */
    .geo-map-header {
        font-size: 16px !important;
        margin-bottom: 10px !important;
        padding: 0 10px !important;
    }

    /* 3. 지도 박스 모바일 대응 */
    .geo-map-box {
        padding: 3px !important; /* 내부 여백 줄여서 지도 영역 확보 */
        border-radius: 8px !important; /* 모바일은 곡률을 살짝 줄임 */
        border: 1px solid #edf2f7 !important; /* 더 연한 선으로 처리 */
    }

    /* 4. 지도 높이 최적화 */
    .geo-map-box iframe {
        height: 250px !important; /* 너무 길지 않게 높이 재조정 */
        border-radius: 4px !important;
    }

    /* 가로 스크롤 방지 */
    .geo-map-wrap, .geo-map-box {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}