@charset "utf-8";

/* ==========================================================================
   오시는길 페이지 전용 스타일 (roadmap.html)
   --------------------------------------------------------------------------
   구성
     1. 지도            .map_frame
     2. 지도 바로가기   .map-site
     3. 연락처 목록     .map_info (dl)
     4. 대중교통 안내   .bus_guide
     5. 반응형
   --------------------------------------------------------------------------
   색상 원칙
     주의: --point-color3 은 좌측메뉴 '글자색'으로 쓰여 이 사이트에서는 진한 값이다.
     배경으로 쓰면 글자가 묻히므로(기존 '전화' 줄 사례) 배경에는 --point-color4 를 쓴다.
     지도 서비스 버튼(카카오·네이버·구글)은 각 브랜드 색이므로 하드코딩을 유지한다.
   ========================================================================== */


/* ==========================================================================
   1. 지도
   ========================================================================== */

.map_frame{
	display:block;
	width:100%;
	margin:0;
	border-radius:12px;
	overflow:hidden;
}
.map_frame iframe{
	display:block;
	width:100%;
	height:450px;
	border:0;
}


/* ==========================================================================
   2. 지도 바로가기 버튼
   ========================================================================== */

.map-site{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	gap:8px;
	padding:16px 0 0;
	margin:0;
}
.map-site a{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:11px 20px;
	border-radius:8px;
	font-size:clamp(14px, 2vw, 16px);
	font-weight:600;
	color:#fff;
	text-decoration:none;
	transition:filter .2s ease;
}
.map-site a:hover,
.map-site a:focus{ filter:brightness(0.92); color:#fff; text-decoration:none; }

.map-site a:nth-child(1){ background:#fae100; color:#3b1e1e; }  /* 카카오 */
.map-site a:nth-child(2){ background:#03c75a; }                  /* 네이버 */
.map-site a:nth-child(3){ background:#4285f4; }                  /* 구글 */


/* ==========================================================================
   3. 연락처 목록 (dl : 항목-값 구조)
   ========================================================================== */

.map_info{
	display:grid;
	grid-template-columns:auto 1fr;
	align-items:center;
	gap:0;
	padding:0;
	margin:28px 0 0;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
}
.map_info dt,
.map_info dd{
	margin:0;
	padding:20px 20px;
	box-sizing:border-box;
}
.map_info dt{
	min-width:150px;
	font-weight:700;
	color:#222;
	white-space:nowrap;
}
.map_info dt i{
	width:22px;
	margin-right:6px;
	text-align:center;
	color:var(--point-color, #669900);
}
.map_info dd{ color:#454545; word-break:keep-all; }
.map_info dd a{ color:inherit; text-decoration:none; }
.map_info dd a:hover{ color:var(--point-color, #669900); text-decoration:underline; }

/* 가운데 줄(전화) 강조 — 연한 배경. 기존 --point-color3 은 진한 값이라 글자가 묻혔다 */
.map_info dt:nth-of-type(2),
.map_info dt:nth-of-type(2) + dd{
	background:var(--point-color4, #eef5dc);
}
/* 줄 사이 구분선 */
.map_info dt:nth-of-type(n+2),
.map_info dt:nth-of-type(n+2) + dd{
	border-top:1px solid #ededed;
}


/* ==========================================================================
   4. 대중교통 안내
   기존 PNG 이미지(train2.png / bus2.png) 대신 Font Awesome 아이콘 사용.
   벡터라 어떤 배율에서도 또렷하고, 색을 포인트 컬러로 제어할 수 있다.
   ========================================================================== */

.bus_guide{
	display:flex;
	flex-wrap:wrap;
	gap:25px;
	padding:0;
	margin:0;
	list-style:none;
}
.bus_guide > li{
	flex:1 1 300px;
	padding:34px 25px 30px;
	margin:0;
	text-align:center;
	border:1px solid #d6d6d6;
	border-radius:15px;
	background:#fff;
	box-sizing:border-box;
	transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.bus_guide > li:hover,
.bus_guide > li:focus-within{
	transform:translateY(-4px);
	border-color:var(--point-color, #669900);
	box-shadow:0 7px 16px rgba(0,0,0,0.08),
	           0 0 0 2px inset var(--point-color, #669900);
}

/* 아이콘 — 연한 원형 배경 위에 포인트색 */
.bus_icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:78px;
	height:78px;
	margin:0 auto 18px;
	border-radius:50%;
	background:var(--point-color4, #eef5dc);
}
.bus_icon i{
	font-size:34px;
	line-height:1;
	color:var(--point-color, #669900);
}

.bus_guide > li b{
	display:block;
	font-size:clamp(17px, 2.4vw, 20px);
	font-weight:700;
	color:#000;
	margin:0 0 10px;
	word-break:keep-all;
}
.bus_guide > li p{
	margin:0;
	color:#555;
	line-height:1.6;
	word-break:keep-all;
}
.bus_guide > li p + p{ margin-top:4px; }
.bus_sub{ font-size:clamp(13px, 1.9vw, 15px); color:#888; }


/* ==========================================================================
   5. 반응형
   ========================================================================== */

@media (max-width:900px){
	.map_frame iframe{ height:320px; }
	.map-site{ justify-content:center; }

	.map_info{ grid-template-columns:1fr; }
	.map_info dt{ padding:16px 16px 0; min-width:0; }
	.map_info dd{ padding:6px 16px 16px; }
	/* 1열이 되면 dt 와 dd 사이에 선이 생기지 않도록 재지정 */
	.map_info dt:nth-of-type(n+2){ border-top:1px solid #ededed; }
	.map_info dt:nth-of-type(n+2) + dd{ border-top:0; }

	.bus_guide{ gap:15px; }
	.bus_guide > li{ flex:1 1 100%; padding:26px 20px; }
	.bus_icon{ width:66px; height:66px; margin-bottom:14px; }
	.bus_icon i{ font-size:29px; }
}

@media (max-width:500px){
	.map_frame iframe{ height:250px; }
	.map-site a{ flex:1 1 auto; justify-content:center; padding:11px 12px; }
}