/* 서남 맵 섹션 스타일 */
.seonam-map-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.seonam-map-section.active {
    display: block;
}

.seonam-map-section.show {
    opacity: 1;
}

/* 배경 레이어 (블러 처리된 어두운 배경) */
.seonam-map-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.seonam-map-bg::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    background-image: url('../../assets/images/map/sn-map/sn_wide_map.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(10px) brightness(0.4);
    -webkit-filter: blur(10px) brightness(0.4);
}

/* 메인 맵 컨테이너 */
.seonam-map-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* 맵 이미지 래퍼 */
.seonam-map-wrapper {
    position: relative;
    height: 100%;
    width: 300vh; /* 3:1 비율로 화면 높이의 3배 너비 */
    display: inline-block;
}

/* 메인 맵 이미지 */
.seonam-map-image {
    height: 100%;
    width: auto;
    max-width: none;
    display: block;
    position: relative;
    z-index: 1;
}

/* 버튼 컨테이너 - 이미지와 같은 크기 */
.seonam-map-buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.seonam-map-buttons > * {
    pointer-events: auto;
}

/* 돌아가기 버튼 */
.seonam-map-section .back-button {
    position: fixed;
    top: 32px;
    left: 32px;
    width: 156px;
    height: 59px;
    background-color: #007DC3;
    color: #ffffff;
    font-family: 'NanumSquareNeo', sans-serif;
    font-size: 24px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    z-index: 1600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 125, 195, 0.3);
}

.seonam-map-section .back-button:hover {
    background-color: #006bb0;
    box-shadow: 0 4px 12px rgba(0, 125, 195, 0.4);
    transform: translateY(-2px);
}

.seonam-map-section .back-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 125, 195, 0.3);
}

/* 예약하기 버튼 */
.seonam-map-section .reservation-button {
    position: fixed;
    top: 32px;
    right: 32px;
    width: 156px;
    height: 59px;
    background-color: #007DC3;
    color: #ffffff;
    font-family: 'NanumSquareNeo', sans-serif;
    font-size: 24px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    z-index: 1600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 125, 195, 0.3);
}

.seonam-map-section .reservation-button:hover {
    background-color: #006bb0;
    box-shadow: 0 4px 12px rgba(0, 125, 195, 0.4);
    transform: translateY(-2px);
}

.seonam-map-section .reservation-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 125, 195, 0.3);
}

/* 클릭 가능한 영역들 (버튼 위치) */
.seonam-map-click-area {
    position: absolute;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 10;
}

.seonam-map-click-area:hover {
    transform: scale(1.05);
}

.seonam-map-click-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.seonam-map-click-area .hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.seonam-map-click-area:hover .hover {
    opacity: 1;
}

/* 각 시설별 위치 - 3:1 비율에 맞게 재계산 */
/* 변환 공식: 새로운 X% = (기존 X% × 2/3) + 16.67% */
/* 핀 크기는 40% 축소 (×0.6) */
#seonamMapArea1 { /* 축구장 */
    top: 8.9%;
    left: 51.6%;
    width: 4.2%;
}

#seonamMapArea2 { /* 물재생체험관 */
    top: 45%;
    left: 32.4%;
    width: 6.6%;
}

#seonamMapArea3 { /* 테니스장 */
    top: 69%;
    left: 44%;
    width: 4.8%;
}

#seonamMapArea4 { /* 탁구장 */
    top: 79%;
    left: 47.5%;
    width: 4.2%;
}

#seonamMapArea5 { /* 파크골프장 */
    top: 71%;
    left: 55%;
    width: 5.7%;
}

/* 둥실둥실 떠다니는 이미지 스타일 */
.seonam-float-image {
    position: absolute;
    z-index: 5;
    pointer-events: none; /* 클릭 방지 */
}

/* 좌상단 이미지 - 3:1 비율에 맞게 재계산, 40% 축소 */
.float-top-left {
    top: 10%;
    left: 27.3%;
    width: 8.9%;
    animation: floatAnimation 3s ease-in-out infinite;
}

/* 우하단 이미지 - 3:1 비율에 맞게 재계산, 40% 축소 */
.float-bottom-right {
    bottom: 10%;
    right: 24.5%;
    width: 11.6%;
    animation: floatAnimationSlow 4s ease-in-out infinite;
}

/* 둥실둥실 애니메이션 */
@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* 느린 둥실둥실 애니메이션 (핑크용) */
@keyframes floatAnimationSlow {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    /* 모바일에서 컨테이너가 스크롤 가능하도록 설정 */
    .seonam-map-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
        scroll-behavior: smooth;
        display: block; 
        white-space: nowrap; 
    }
    
    /* 맵 래퍼 너비를 이미지에 맞춤 */
    .seonam-map-wrapper {
        width: auto;
        height: 100%;
        position: relative;
        display: inline-block;
        vertical-align: middle; 
    }
    
    /* 이미지를 세로에 맞춤 */
    .seonam-map-image {
        height: 100%;
        width: auto;
        max-width: none;
/*         min-width: 100vw; 최소 너비를 화면 너비로 설정 */
    }
    
    /* 배경 이미지도 모바일에 맞게 조정 */
    .seonam-map-bg::before {
        width: 200%;
        height: 110%;
        filter: blur(20px) brightness(0.3);
        -webkit-filter: blur(20px) brightness(0.3);
    }
    
    /* 돌아가기 버튼 고정 위치 */
    .seonam-map-section .back-button {
        position: fixed;
        width: 120px;
        height: 48px;
        font-size: 18px;
        top: 20px;
        left: 20px;
        z-index: 20;
    }
    
    /* 예약하기 버튼 모바일 */
    .seonam-map-section .reservation-button {
        position: fixed;
        width: 120px;
        height: 48px;
        font-size: 18px;
        top: 20px;
        right: 20px;
        z-index: 20;
    }
    
    /* 버튼 크기 조정 */
    .seonam-map-click-area {
        transform: scale(0.8);
    }
    
    .seonam-map-click-area:hover {
        transform: scale(0.85);
    }
    
    /* 스크롤 힌트 추가 */
    .seonam-map-section::after {
        content: '← 좌우로 스와이프 →';
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        padding: 8px 20px;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        border-radius: 20px;
        font-size: 14px;
        font-family: 'NanumSquareNeo', sans-serif;
        z-index: 15;
        pointer-events: none;
        animation: fadeInOut 3s ease-in-out;
    }
    
    @keyframes fadeInOut {
        0% { opacity: 0; }
        20% { opacity: 1; }
        80% { opacity: 1; }
        100% { opacity: 0; }
    }

    .seonam-float-image {
        position: absolute; /* fixed에서 absolute로 유지 */
    }
    
    /* 모바일에서 크기 약간 조정 */
    .float-top-left {
		width: 11%;
        top: 13%;
        left: 22%;
    }
    
    .float-bottom-right {
        width: 15%;
        bottom: 10%;
        right: 24%;
    }
}