/* 언어설정 */
@charset 'utf-8';

@font-face {
    font-family: 'SUIT-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KCCHyerim-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2411-3@1.0/KCCHyerim-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* 전체설정 */
* {
    margin: 0;
    padding: 0;
    font-family: 'SUIT-Regular';
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--main-text);
}

img {
    vertical-align: bottom;
}

html,
body {
    overflow-x: hidden;
    scroll-behavior: smooth;

}

.body {
    max-width: 100%;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
    /* 스크롤 막기 */
    touch-action: none;
    /* 터치 시 흔들림 방지 (모바일 UX 향상) */
}

/* 색상설정 */
:root {
    --main-navi: #204B62;
    --main-text: #333;
    --main-white: #fff;
}

/* 상세설정 ---------------------------------------------------------------------------- */
.map-section {
    padding: 2.25rem 0;
    background-color: #f9f9f9;
    height: 100vh;
    scroll-snap-align: start;
    align-items: center;
}

.map-inner {
    max-width: 95.25rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.map-title {
    font-size: 2.5875rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 2.5rem;
    box-shadow: inset 0 -1.25rem 0 rgb(170 228 255);
    display: inline-block;
}

.map-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: flex-start;
}

.map-image {
    flex: 1;
    position: relative;
}

.map-image img {
    width: 80%;
    height: auto;
}

.map-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.map-card {
    display: flex;
    gap: 0.9375rem;
    padding: 1.25rem 1.5625rem;
    border: 0.125rem solid #204B62;
    border-radius: 0.9375rem;
    background-color: #fff;
    cursor: pointer;
}

.map-card.active {
    border: 0.125rem solid #007bff;
    background-color: #f0f8ff;
    /* 강조용 배경 */
}

.map-icon {
    font-size: 1.5rem;
    color: #204B62;
}

.map-info {}

.map-info strong {
    font-size: 1.25rem;
    color: #204B62;
    display: block;
    margin-bottom: 0.375rem;
}

.map-info p {
    margin-bottom: 0.25rem;
    color: #333;
    font-size: 1.0625rem;
}

.map-info p span {
    color: #C70000;
}



/* 인천 전용 버튼 flex */
.map-info.with-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
}

.map-info.with-button .info-text {
    flex: 1;
}

.map-btn {
    white-space: nowrap;
    padding: 0.375rem 0.875rem;
    border: 0.0938rem solid #204B62;
    border-radius: 1.5625rem;
    font-size: 0.875rem;
    color: #204B62;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
    margin-left: 3.125rem;
}

.map-btn:hover {
    background-color: #204B62;
    color: #fff;
}

/* 지도 위 반짝이는 마커 */
.map-marker {
    position: absolute;
    z-index: 10;
    width: 1.875rem;         /* 이미지 크기에 맞게 조정 (30px) */
    height: 1.875rem;
    background-image: url('/img/marker.png');  /* ✅ 실제 경로로 변경 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;            /* 항상 보이게 */
    pointer-events: none;
    transform: translate(-50%, -100%); /* 마커 꼭지점을 정확히 위치하도록 */
}

.map-marker.visible {
    display: block;
}


.map-marker.blink {
    animation: blinkMarker 1.5s ease-in-out infinite;

}

@keyframes blinkMarker {
    0%, 100% {
        transform: translate(-50%, -100%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -100%) scale(1.4); /* 위치 유지하면서 크기만 변경 */
        opacity: 0.3;
    }
}


/* 좌표 설정 */
.map-marker[data-location="seoul"] {
    top: 11.075rem;
    left: 9.8rem;
}

.map-marker[data-location="daejeon"] {
    top: 22.825rem;
    left: 13.1rem;
}
.map-marker[data-location="daejeon1"] {
    top: 22.825rem;
    left: 13.1rem;
}

.map-marker[data-location="incheon"] {
    top: 11.5rem;
    left: 7.4625rem;
}

/* 미디어 쿼리 구간------------------------------------------------------------------------------------- */


/* PC 전용 */
@media screen and (min-width: 90.0rem) {
    .map-sub-title{
        text-decoration: none;
        margin-left: 15px;
    }

}

/* 노트북 전용 */
@media screen and (min-width: 64.0625rem) and (max-width: 89.9375rem) {

    /* 오시는길 */
    .map-title {
        font-size: 1.875rem;
    }

    .map-info strong {
        font-size: 1.125rem;
    }

    .map-info p {
        font-size: 0.9375rem;
    }

    .map-btn {
        font-size: 0.8125rem;
        margin-left: 1.25rem;
    }

    /* 마커 전용 */
    .map-marker[data-location="seoul"] {
        top: 22.5%;
        left: 21.5%;
    }

    .map-marker[data-location="daejeon"],
    .map-marker[data-location="daejeon1"] {
        top: 47%;
        left: 28%;
    }

    .map-marker[data-location="incheon"] {
        top: 24%;
        left: 16%;
    }
    .map-sub-title{
        text-decoration: none;
        margin-left: 15px;
    }

}

/* 태블릿 전용 */
@media screen and (min-width: 48.0rem) and (max-width: 64.0rem) {

 /* 오시는길 */
    .map-title {
        font-size: 1.875rem;
    }

    .map-content {
        flex-direction: row;
        /* 노트북과 동일하게 유지 */
        gap: 1.875rem;
    }

    .map-image {
        flex: 1;
    }

    .map-image img {
        width: 80%;
        /* 지도 축소 */
    }

    .map-cards {
        flex: 1;
    }

    .map-card {
        padding: 1.125rem 1.25rem;
        gap: 0.75rem;
    }

    .map-info strong {
        font-size: 1.125rem;
    }

    .map-info p {
        font-size: 0.9375rem;
    }

    .map-btn {
        font-size: 0.8125rem;
        margin-left: 1.25rem;
    }

    .map-info.with-button {
        gap: 0.9375rem;
    }

    /* 마커 전용 */

    .map-marker[data-location="seoul"] {
        top: 23%;
        left: 21%;
    }

    .map-marker[data-location="daejeon"],
    .map-marker[data-location="daejeon1"] {
        top: 47%;
        left: 28%;
    }

    .map-marker[data-location="incheon"] {
        top: 24%;
        left: 16%;
    }
    .map-sub-title{
        text-decoration: none;
        margin-left: 15px;
    }

}

/* 모바일 전용 */
@media screen and (min-width: 30.0625rem) and (max-width: 47.9375rem) {


    /* 오시는길 */

    .map-section {
        padding: 3.75rem 0;
        height: auto;
    }

    .map-title {
        font-size: 2.5875rem;
        margin-bottom: 1.875rem;
        box-shadow: inset 0 -0.625rem 0 rgba(225, 238, 244, 1);
    }

    .map-content {
        flex-direction: column;
        gap: 1.25rem;
    }

    .map-image {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .map-img-wrapper {
        width: 100%;
        max-width: 21.875rem;
        position: relative;
    }

    .map-img-wrapper img {
        width: 100%;
        display: block;
        margin: 0 auto;
        margin-left: 1.25rem;
    }


    .map-cards {
        width: 100%;
        gap: 0.9375rem;
    }

    .map-card {
        padding: 0.9375rem 1.25rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .map-info strong {
        font-size: 1.125rem;
    }

    .map-info p {
        font-size: 0.875rem;
    }

    /* 오시는길 - 인천 버튼 아래로 정렬 */
    .map-info.with-button {
        display: flex;
        flex-direction: column;
        /* ✅ 세로 정렬로 변경 */
        align-items: flex-start;
        gap: 0.625rem;
    }

    .map-btn {
        margin-left: 0;
        /* ✅ 기존 왼쪽 여백 제거 */
        margin-top: 0.625rem;
        /* ✅ 위쪽 여백 추가 */
    }

    /* 마커 전용 */

    .map-marker[data-location="seoul"] {
        top: 23%;
        left: 32%;
    }

    .map-marker[data-location="daejeon"] {
        top: 47%;
        left: 41%;
    }
    .map-marker[data-location="daejeon1"] {
        top: 47%;
        left: 41%;
    }

    .map-marker[data-location="incheon"] {
        top: 23%;
        left: 26%;
    }

    .map-sub-title{
        text-decoration: none;
        margin-left: 15px;
    }

}

@media screen and (max-width: 30.0rem) and (orientation: portrait) {
    .map-section {
        padding: 2.5rem 0;
        height: auto !important;
    }
    .map-content {
        overflow: visible;
        flex-direction: column;
    }

    .map-title {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    .map-sub-title{
        font-size: 13px;
        text-decoration: none;
    }

    .map-card {
        padding: 0.75rem 1rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .map-info strong {
        font-size: 1rem;
    }

    .map-info p {
        font-size: 0.8125rem;
        line-height: 1.2;
    }

    .map-cards {
        gap: 0.625rem;
    }

    .map-info.with-button {
        gap: 0.5rem;
    }

    .map-btn {
        font-size: 0.75rem;
        margin-top: 0.5rem;
    }
    .map-image {
        width: 100%;
        display: flex;
        justify-content: center;
        overflow: visible;
    }

    .map-img-wrapper {
        width: 100%;
        max-width: 100%;
        position: relative;
    }

    .map-img-wrapper img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .map-marker[data-location="seoul"] {
        top: 23%;
        left: 26%;
    }
    .map-marker[data-location="daejeon"] {
        top: 47%;
        left: 35%;
    }
    .map-marker[data-location="daejeon1"] {
        top: 47%;
        left: 35%;
    }
    .map-marker[data-location="incheon"] {
        top: 24%;
        left: 20%;
    }
}