/* 기본 초기화 */
.contact-section {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: 'Pretendard', -apple-system, sans-serif;
    color: #333;
}

/* 제목 영역 */
.contact-title {
    text-align: center;
	padding-top:100px;
    margin-bottom: 50px;
}
.logo-box {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.title-logo { height: 28px; width: auto; }
.contact-title h2 { font-size: 28px; font-weight: 700; margin: 0; }

/* 레이아웃 컨테이너 */
.contact-container {
    display: flex;
    flex-direction: row; /* PC에서는 가로 배치 */
    gap: 40px;
    align-items: stretch;
}

/* 왼쪽 정보 영역 */
.info-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 35px;
    min-width: 300px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.info-icon { font-size: 22px; margin-top: 3px; }
.icon-red { color: #ff6b6b; }
.icon-purple { color: #845ef7; }
.icon-blue { color: #339af0; }

.info-text h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px 0; color: #222; }
.info-text p { font-size: 16px; line-height: 1.5; margin: 0; color: #666; }
.info-text a { color: inherit; text-decoration: none; }
.zip-code { color: #999 !important; margin-bottom: 2px !important; }

/* 오른쪽 지도 영역 */
.map-side {
    flex: 1.5;
    min-height: 400px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.map-wrapper { width: 100%; height: 100%; min-height: 400px; }

.responsive-logo {
    display: block;
    margin: 0 auto;           /* 이미지 중앙 정렬 */
    width: 100%;             /* 부모 너비에 맞춤 */
    max-width: 400px;        /* PC 최대 높이가 400px이었으므로 너비도 그에 맞춰 제한 */
    height: auto;            /* 비율 유지하며 자동 조절 */
    object-fit: contain;     /* 이미지가 잘리지 않게 함 */
    transition: all 0.3s ease; /* 부드러운 크기 변화 */
}


/* [반응형 핵심: 태블릿 & 모바일] */
@media (max-width: 992px) {
    .contact-container {
        flex-direction: column; /* 세로 배치로 변경 */
        gap: 50px;
    }

    .info-side {
        order: 2; /* 지도를 먼저 보여주고 싶다면 2, 정보를 먼저라면 1 */
    }

    .map-side {
        order: 1;
        min-height: 300px; /* 모바일에서 지도 높이 조절 */
    }

    .contact-title h2 { font-size: 24px; }

    .contact-container {
        flex-direction: column; /* 세로 배치 */
        gap: 40px;
    }

    .info-side {
        order: 2; /* 정보가 아래로 */
    }

    .map-side {
        order: 1; /* 지도가 위로 */
        width: 100%;    /* 가로를 꽉 채움 */
        min-height: 450px; /* ★ 기존 300px에서 450px 이상으로 키우세요 */
    }

    .map-wrapper {
        height: 450px; /* 부모 높이에 맞게 설정 */
    }
}

/* 모바일 전용 미세 조정  */
@media (max-width: 768px) {
    .responsive-logo {
        max-width: 250px;    /* 모바일에서는 조금 더 작게 배치 */
    }
}

@media (max-width: 480px) {
    .contact-section { margin: 40px auto; }
    .info-item { gap: 12px; }
    .info-text h3 { font-size: 17px; }
    .info-text p { font-size: 15px; }
    .map-side { min-height: 250px; }
}


/* 아주 작은 스마트폰 대응 */
@media (max-width: 480px) {
    .map-side {
        min-height: 400px; /* ★ 모바일에서도 지도가 화면의 절반 이상을 차지하게 설정 */
    }

    /* 좌우 여백을 없애서 지도를 더 넓게 보고 싶다면 */
    .contact-section {
        padding: 0 10px;
    }
}