﻿/* -----------------------------------
   LOCATION PAGE
----------------------------------- */


/* HERO */
.location-hero {
    height: 70vh;
    justify-content: center;
    background: linear-gradient( 135deg, #1f2021 0%, #232323 40%, #1f2021 100% );
    /* 살짝 고급스러운 광택 + 라이트 효과 */
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

    /* 은은한 라인/그라데이션 움직임 */
    .location-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient( circle at 60% 40%, rgba(0, 200, 210, 0.18), transparent 60% );
        opacity: 0.6;
        pointer-events: none;
    }

    .location-hero::after {
        content: '';
        position: absolute;
        top: 0;
        left: -20%;
        width: 140%;
        height: 100%;
        background: linear-gradient( 120deg, transparent 40%, rgba(0, 200, 210, 0.12), transparent 60% );
        animation: heroLight 9s ease-in-out infinite;
        pointer-events: none;
    }

@keyframes heroLight {
    0% {
        transform: translateX(-20%);
    }

    50% {
        transform: translateX(20%);
    }

    100% {
        transform: translateX(-20%);
    }
}



/* MAP SECTION */
.map-section {
    gap: 2rem;
    padding: 4rem 5%;
    justify-content:center;
    align-items: stretch;
}
.map-box {
    flex: 2 1;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

.map-info {
    flex: 1 1;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--color-deepDark);
    box-shadow: 0 10px 24px rgba(0,0,0,0.07);
}

    .map-info h3 {
        margin-bottom: 0.5rem;
    }

    .map-info .addr {
        margin-bottom: 1.5rem;
    }

.info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.map-info h4 {
    margin-top: 1.5rem;

}

.map-info .desc {
    line-height: 1.6;

}

@media(max-width:992px){
    .map-box {
        position: relative;
        min-height: 25rem;
    }

        .map-box iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }
}