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

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

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

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

.tancheon-map-bg::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    background-image: url('../../assets/images/map/tc-map/tc_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);
}

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

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

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

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

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

/* 돌아가기 버튼 */
.tancheon-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);
}

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

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

/* 예약하기 버튼 */
.tancheon-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);
}

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

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

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

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

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

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

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

/* 회색 영역들 (클릭 불가) */
.tancheon-map-gray-area {
    position: absolute;
    opacity: 0.8;  /* 투명도를 0.6에서 0.8로 변경 (덜 투명하게) */
    pointer-events: none;
    z-index: 9;
}

.tancheon-map-gray-area img {
    width: 100%;
    height: auto;
    display: block;
}

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

#tancheonMapArea2 { /* 탄천센터 테니스장 */
    top: 26.3%;
    left: 23.5%;
    width: 7.2%;
}

#tancheonMapArea3 { /* 마루공원 족구장 */
    top: 17.9%;
    left: 30.7%;
    width: 5.7%;
}

#tancheonMapArea4 { /* 마루공원 테니스장 */
    top: 26.3%;
    left: 33.35%;
    width: 7.2%;
}

#tancheonMapArea5 { /* 마루공원 농구장 */
    top: 51.5%;
    left: 26.1%;
    width: 6.9%;
}

#tancheonMapArea6 { /* 마루공원 풋살장 */
    top: 48%;
    left: 32.55%;
    width: 6.9%;
}

#tancheonMapArea7 { /* 에코파크 축구장 */
    top: 72.5%;
    left: 48.1%;
    width: 6.9%;
}

#tancheonMapArea8 { /* 에코파크 풋살장 */
    top: 72.5%;
    left: 55.9%;
    width: 6.6%;
}

#tancheonMapArea9 { /* 1단계 배드민턴장 */
    top: 84%;
    left: 56.6%;
    width: 7.2%;
}

#tancheonMapArea10 { /* 1단계 게이트볼장 */
    top: 88.5%;
    left: 52.9%;
    width: 6%;
}

/* 회색 영역 위치 - 3:1 비율에 맞게 재계산, 40% 축소 */
#tancheonMapGray1 { /* 교통체험장 */
    top: 35%;
    left: 29.3%;
    width: 5.2%;
}

#tancheonMapGray2 { /* 놀이터 */
    top: 38%;
    left: 34.1%;
    width: 4.4%;
}

#tancheonMapGray3 { /* 에코센터 */
    top: 64.5%;
    left: 46.2%;
    width: 4.8%;
}

#tancheonMapGray4 { /* 식물원 */
    top: 61%;
    left: 52%;
    width: 3.2%;
}

.tancheon-float-image {
    position: absolute;
    z-index: 5;
    pointer-events: none; /* 클릭 방지 */
}

/* 좌하단 이미지 - 3:1 비율에 맞게 재계산, 40% 축소 */
.float-bottom-left {
    bottom: 7%;
    left: 19.3%;
    width: 12.2%;
    animation: floatAnimation 3s ease-in-out infinite;
}

/* 우상단 이미지 - 3:1 비율에 맞게 재계산, 40% 축소 */
.float-top-right {
    top: 10%;
    right: 26.7%;
    width: 12.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) {
    /* 모바일에서 컨테이너가 스크롤 가능하도록 설정 */
    .tancheon-map-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
        scroll-behavior: smooth;
        display: block;
        white-space: nowrap;
    }
    
    /* 맵 래퍼 너비를 이미지에 맞춤 */
    .tancheon-map-wrapper {
        width: auto;
        height: 100%;
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }
    
    /* 이미지를 세로에 맞춤 */
    .tancheon-map-image {
        height: 100%;
        width: auto;
        max-width: none;
/*         min-width: 100vw; 최소 너비를 화면 너비로 설정 */
        display: inline-block;
    }
    
    /* 배경 이미지도 모바일에 맞게 조정 */
    .tancheon-map-bg::before {
        width: 200%;
        height: 110%;
        filter: blur(20px) brightness(0.3);
        -webkit-filter: blur(20px) brightness(0.3);
    }
    
    /* 돌아가기 버튼 고정 위치 */
    .tancheon-map-section .back-button {
        position: fixed;
        width: 120px;
        height: 48px;
        font-size: 18px;
        top: 20px;
        left: 20px;
        z-index: 20;
    }
    
    /* 예약하기 버튼 모바일 */
    .tancheon-map-section .reservation-button {
        position: fixed;
        width: 120px;
        height: 48px;
        font-size: 18px;
        top: 20px;
        right: 20px;
        z-index: 20;
    }
    
    /* 버튼 크기 조정 */
    .tancheon-map-click-area,
    .tancheon-map-gray-area {
        transform: scale(0.8);
    }
    
    .tancheon-map-click-area:hover {
        transform: scale(0.85);
    }
    
    /* 스크롤 힌트 추가 */
    .tancheon-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; }
    }
    .tancheon-float-image {
        position: absolute; /* fixed에서 absolute로 유지 */
    }
    
    /* 모바일에서 크기 약간 조정 */
    .float-bottom-left {
        width: 16%;
        bottom: 16%;
        left: 12%;
    }
    
    .float-top-right {
        width: 14%;
        top: 13%;
        right: 24%;
    }

}