.main-title {
    font-size: var(--ft60);
}
.main-title > span {
    display: block;
}
.page_con-header {
    display: grid;
    grid-template-columns: 37% 1fr;
}
.info-title {
    font-size: var(--ft24);
    font-weight: var(--semi-bold);
    color: var(--ft-main);
    margin-bottom: 20px;
}
.info-sub_title {
    font-size: var(--ft18);
    color: var(--ft-sub);
}
.location-info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(var(--con-gap) / 2) var(--con-gap);
    flex-wrap: wrap;
}
.location_region-title {
    margin-bottom: 40px;
}
.route-group {
    width: 100%;
}
.location-info .route {
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateX(10px);
    flex-wrap: wrap;
}
.location-info .route.vertical {
    flex-direction: column;
    align-items: start;
}
.location-info .route.vertical .route_wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}



.location-info .route li {
    flex-shrink: 0;
    font-size: var(--ft16);
}
.location-info .route li:not(:last-child) {
    position: relative;
    padding-right: 30px;
}
.location-info .route li:not(:last-child)::after {
    content: '';
    display: block;
    width: 16px;
    height: auto;
    aspect-ratio: 1;
    background: var(--gray-400);
    mask: url('/images/icon/chevron-right.svg') no-repeat center / cover;
    -webkit-mask: url('/images/icon/chevron-right.svg') no-repeat center / cover;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    
}
.navi_btn-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}
.navi_btn {
    width: var(--icon-btn);
    height: var(--icon-btn);
    border-radius: 50%;
    overflow: hidden;
    background: var(--img);
}
.navi_btn.naver {
    border: 1px solid var(--primary-200);
}

/* 커스텀 select */
#regionForm {
    display: flex;
    align-items: center;
    gap: 16px;
}
#regionForm span {
    color: var(--ft-main);
    font-size: var(--ft24);
}
.select-box {
    position: relative;
    width: 120px;
    cursor: pointer;
    user-select: none;
}

.select-value {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid var(--gray-500);
    padding: 6px 24px 6px 12px;
    font-family: var(--ft-serif);
    font-size: var(--ft32);
    color: var(--ft-main);
}
.select-value::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: var(--gray-500);
    mask: url('/images/icon/drop_arrow.svg') no-repeat center / cover;
    -webkit-mask: url('/images/icon/drop_arrow.svg') no-repeat center / cover;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.drop_option-group {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    background: #fff;
    display: none; /* 기본은 숨김 */
    z-index: 10;
    overflow: hidden;
}

.drop_option {
    display: block;
    padding: 10px;
    cursor: pointer;
    font-size: var(--ft24);
}

.drop_option:hover {
    background: #f1f1f1;
}

.drop_option input {
    display: none;
}


/* map */
.map {
    width: 100%;
    aspect-ratio: 1 / .6;
    background: var(--img);
    margin-top: var(--con-gap);
}
.page_con-bottom {
    padding-bottom: var(--sec-gap);
}

@media screen and (max-width:1200px) {
    .main-title {
        font-size: clamp(var(--ft46), 5vw, var(--ft56));
    }
}
@media screen and (max-width:960px) {
    .location_region-title {
        margin-bottom: 20px;
    }
   
}
@media screen and (max-width:700px) {
    .page_con-header {
        grid-template-columns: 1fr;
        gap: var(--con-gap);
    }
    .main-title {
        font-size: clamp(var(--ft36), 5vw, var(--ft46));
    }
   
}
@media screen and (max-width:500px) {
    .info-title {
        margin-bottom: 10px;
    }
   
}