/* contact.css — contact.html 전용 스타일. 공통 히어로(.sub_hero 등)는 sub_common.css에 있다 */

/* contact section */
.contact_section{width:100%;padding:0 0 160px;}
.contact_inner{/*max-width:1920px;*/margin:0 auto;padding:0 30px;}
.contact_content{display:flex;width:100%;padding:30px 0;flex-direction:column;gap:30px;}
.contact_info_row.contact_tel{width:100%;}
/* contact top — 주소 타이틀 + 연락처 목록을 한 줄에 늘어놓는 상단 바. 아래 지도/사진 영역과는 구분선으로 나눈다 */
.contact_top{display:flex;width:100%;padding-bottom:30px;border-bottom:1px solid #d9d5d2;flex-direction:column;gap:20px;}
.contact_addr_tit{font-family:'Pretendard',sans-serif;font-weight:800;font-size:36px;letter-spacing:-0.04em;color:var(--color-text-dark);}

/* contact info list — 연락처/담당자 이메일을 한 줄로 나열 */
.contact_info_list{display:flex;flex-wrap:wrap;align-items:center;gap:30px;}
.contact_info_row{display:flex;align-items:center;gap:8px;}
.contact_info_label{display:flex;padding:4px 10px;border:1px solid var(--color-text-dark);border-radius:2px;font-family:'Pretendard',sans-serif;font-weight:600;font-size:16px;line-height:114%;letter-spacing:-0.04em;color:var(--color-text-dark);}
.contact_info_value{font-family:'Inter',sans-serif;font-weight:500;font-size:18px;letter-spacing:-0.04em;color:var(--color-text-dark);transition:opacity var(--transition-base);}
.contact_info_value:hover{opacity:0.7;}

/* contact media — 지도와 사진 스와이퍼를 나란히 배치 */
.contact_media{display:grid;grid-template-columns: 1fr 1fr;position:relative;width:100%;align-items:stretch;gap:61px;}

/* contact map — 카카오맵 지도퍼가기. mapWidth/mapHeight를 999x570으로 맞춰 이 박스에 꽉 차게 렌더링한다.
   지도 스크립트 로드 전에는 배경색(#d9d9d9)이 자리를 잡아준다 */
.contact_map{overflow:hidden;position:relative;height:570px;flex-shrink:0;border-radius:2px;background:#d9d9d9;}
.contact_map .root_daum_roughmap{width:100%!important;}

/* contact divider — 지도/사진 사이 세로선. 상하단에는 process_list와 동일한 코너 마커(9x9 사각) 패턴을 재사용한다 */
.contact_divider{position:absolute;top:-30px;bottom:0;left:50%;width:1px;background:#d9d5d2;}
.contact_divider_dot{display:block;position:absolute;left:50%;width:9px;height:9px;border:1px solid #67635f;background:var(--color-bg);transform:translate(-50%,-50%);text-indent: -99999px; color: transparent; font-size: 0;}
.contact_divider_dot.is_top{top:0;}
.contact_divider_dot.is_bottom{top:100%;}

/* contact photo swiper — 준공 사진 3장을 스와이퍼로 넘겨보는 영역. 지도와 높이를 맞추고 남은 폭을 채운다 */
.contact_photo_swiper_wrap{overflow:hidden;position:relative;width:100%;height:570px;flex:1;border-radius:2px;background:#d9d9d9;}
.contact_photo_swiper.swiper{width:100%;height:100%;}
.contact_photo_slide{width:100%;height:100%;}
.contact_photo_slide img{width:100%;height:100%;object-fit:cover;}
.contact_photo_swiper_pagination.swiper-pagination{bottom: 20px;left: 50%;width: auto;transform: translateX(-50%);}
.contact_photo_swiper_pagination .swiper-pagination-bullet{width:6px;height:6px;background:#fff;opacity: 1;}
.contact_photo_swiper_pagination .swiper-pagination-bullet-active{background: var(--color-accent-red);}

/*contact_direction - 대중교통으로 오시는 방법 */
.contact_direct_sec{display:flex;align-items:center;gap:69px;padding:22px 0;border-bottom:1px solid #D9D9D9;}
.contact_direct_sec:first-child{padding-top:0;}
.contact_direct_sec h4{color: #111;font-size: 20px;font-weight: 700;line-height: 1.5;letter-spacing: -0.8px;}
.direct_ico{display:flex;align-items:center;flex-direction:column;gap:10px;width:50px;}
.direct_ico::before{content:'';display:block;width:38px;aspect-ratio:1/1;background-position:50%;background-repeat:no-repeat;}
.direct_ico.subway::before{background-image:url(./images/sub/contact/subway_ic.svg);}
.direct_ico.bus::before{background-image:url(./images/sub/contact/bus_ic.svg);}
.direct_ico span{color: #000;font-size: 16px;font-weight: 700;line-height: 1.4;letter-spacing: -0.16px;text-align:center;}
.direct_cont_tit{padding-bottom:20px;color: #000;font-size: 16px;font-weight: 700;line-height: 1.4;letter-spacing: -0.16px;}
.direct_cont ul+.direct_cont_tit{margin-top:20px;}
.direct_cont ul{display:flex;flex-direction:column;gap:7px;}
.direct_cont ul li{display:flex;align-items:center;gap:15px;color: #000;font-size: 16px;font-weight: 500;line-height: 1.4;letter-spacing: -0.48px;}
.direct_cont ul li .lb{display:inline-flex;align-items:center;justify-content:center;padding:0 5px;height:20px;border-radius:5px;font-size:14px;color:#fff;flex-shrink:0;}
.direct_cont ul li .lb.col01 {background:#F06E00;}
.direct_cont ul li .lb.col02 {background:#A71E31;}
.direct_cont ul li .lb.col03 {background:#1F84EB;}
.direct_cont ul li .lb.col04 {background:#1AC866;}
.direct_cont ul li .lb.col05 {background:#FE4023;}

.sub_hero_mascot {top: 60px; right: 150px;}


@media only screen and (max-width:1280px){
    .contact_map{height:clamp(455.98px,44.53vw,570px)}
	.contact_addr_tit {font-size: clamp(26px,3vw,36px);}
    .contact_direct_sec{gap:clamp(55.19px,5.39vw,69px);padding:clamp(17.51px,1.71vw,22px) 0;}
    .direct_cont_tit{padding-bottom:clamp(15.97px,1.56vw,20px);font-size:clamp(12.8px,1.25vw,16px)}
    .direct_ico{width:clamp(39.93px,3.9vw,50px);gap:clamp(7.98px,0.78vw,10px)}
    .direct_ico::before{width:clamp(30.31px,2.96vw,38px)}
    .direct_ico span{font-size:clamp(12.8px,1.25vw,16px)}
    .direct_cont ul{gap:clamp(7.98px,0.78vw,10px)}
    .direct_cont ul li .lb{height:clamp(15.97px,1.56vw,20px);font-size:clamp(11.16px,1.09vw,14px)}
    .direct_cont ul li{gap:clamp(11.9808px,1.17vw,15px);font-size:clamp(12.8px,1.25vw,16px)}
}

@media only screen and (max-width:1024px){
    .contact_content {padding-top: clamp(60px,10vw,100px);gap:0;}
    .contact_top {border-bottom:none;padding-bottom: clamp(30px, 5vw, 50px);}
    .contact_section {padding: 0 0 clamp(80px, 16vw, 160px);}
    .contact_inner {padding: 0 15px;}
    .contact_addr_tit {font-size: clamp(20px, 2.8vw, 26px);}
    .contact_info_list {gap: clamp(12px, 3vw, 30px);}
    .contact_media {grid-template-columns:1fr;gap:clamp(30px,4vw,60px);}
    .contact_divider {display:none;}
    .contact_map {height:clamp(300px,56vw,570px);}
    .contact_map .cms-widget {height:100%;}
    .contact_map .kakao-sdk-map {height:100% !important;}
    .contact_photo_swiper_wrap {height:clamp(246px,56vw,570px);}
}

@media only screen and (max-width:768px){
    .contact_info_label {font-size:clamp(12px,2.5vw,16px);padding: clamp(2px,0.625vw,4px) clamp(8px,2vw,11.5px);}
    .contact_info_value {font-size:clamp(15px,3vw,18px);}
    .contact_info_list{flex-direction:column;align-items: flex-start;}
    .contact_direct_sec{flex-direction: column;align-items: flex-start;gap:20px;}
    .direct_ico{width:100%;}
    .daum-map-info {width:clamp(250px,53.5vw,400px);padding: clamp(10px, 2.8vw, 20px);}
    .daum-map-info .dm-info-name {font-size:clamp(15px, 2.8vw, 20px);}
    .daum-map-info .dm-info-row {font-size:clamp(12px,2.2vw,15px);line-height: 1.2;}
    .daum-map-info .dm-info-body {margin-bottom:clamp(10px,2.3vw,14px);}
    .daum-map-info .dm-info-actions {padding-top:clamp(10px,2.3vw,14px);}
    .daum-map-info .dm-info-btn {font-size:clamp(12px,2.2vw,14px);padding:clamp(5px,1.4vw,9px) clamp(10px,2.4vw,15px);}
}