@charset "utf-8";
/* Introduction > Location */

/* ======================================================
   지도 + 센터정보 스플릿
   ====================================================== */
.loc-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px; align-items: stretch; margin-top: 10px; }

/* ---------------- 카카오맵 (지도 퍼가기 / roughmap) ---------------- */
.loc-map { position: relative; min-height: 560px; border: 1px solid var(--border1); border-radius: 20px; background: var(--bg1); overflow: hidden; }

/* 퍼가기 지도를 영역에 꽉 채움 (render() 가 넣는 인라인 크기를 덮어씀) */
.loc-map .root_daum_roughmap {
	position: absolute !important; left: 0 !important; top: 0 !important;
	width: 100% !important; height: 100% !important;
	min-width: 0 !important; margin: 0 !important; border: 0 !important;
}
.loc-map .root_daum_roughmap .wrap_map { width: 100% !important; height: 100% !important; }

/* 지도 외 요소 숨김 — 하단 kakaomap 바(로드뷰·길찾기·지도 크게 보기), 주소 / 전화 표
   ※ 하단 바를 다시 노출하려면 아래 한 줄을 주석 처리하세요. */
.loc-map .root_daum_roughmap > *:not(.wrap_map) { display: none !important; }
.loc-map .root_daum_roughmap .border1, .loc-map .root_daum_roughmap .border2, .loc-map .root_daum_roughmap .border3, .loc-map .root_daum_roughmap .border4 {display:none;}

/* ---------------- 센터 정보 패널 ---------------- */
.loc-info {
	display: flex; flex-direction: column; padding: 38px 34px 34px; border-radius: 20px; color: #fff;
	background: linear-gradient(160deg, var(--c_base1), var(--c_base3));
	box-shadow: 0 20px 46px rgba(11,73,156,.26);
}

.li-head .eng { display: block; font-size: var(--fs13); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--c_base5); }
.li-head strong { display: block; margin-top: 12px; font-size: var(--fs26); font-weight: 800; line-height: 1.4; letter-spacing: -0.05em; }

.li-addr { margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.2); }
.li-addr em { display: inline-flex; align-items: center; height: 26px; padding: 0 13px; border-radius: 100px; background: rgba(255,255,255,.16); font-size: var(--fs13); font-weight: 800; letter-spacing: .06em; }
.li-addr p { margin-top: 13px; font-size: var(--fs16); line-height: 1.7; color: rgba(255,255,255,.78); letter-spacing: -0.03em; }
.li-addr p b { display: block; margin-top: 3px; font-weight: 800; color: #fff; }

.li-mgr { margin-top: 22px; padding: 22px 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.09); }
.li-mgr .tag { display: inline-flex; align-items: center; height: 26px; padding: 0 13px; border-radius: 100px; background: var(--c_base2); font-size: var(--fs13); font-weight: 800; letter-spacing: -0.02em; line-height:1;}
.li-mgr strong { display: block; margin-top: 12px; font-size: var(--fs20); font-weight: 800; letter-spacing: -0.04em; }
.li-mgr ul { margin-top: 15px; padding-top: 15px; border-top: 1px dashed rgba(255,255,255,.26); }
.li-mgr li { display: flex; align-items: center; gap: 12px; }
.li-mgr li + li { margin-top: 9px; }
.li-mgr li em { flex: none; width: 62px; font-size: var(--fs12); font-weight: 800; letter-spacing: .08em; color: var(--c_base5); }
.li-mgr li a { font-size: var(--fs16); font-weight: 600; color: #fff; }
.li-mgr li a:hover { text-decoration: underline !important; }

/* ---------------- 버튼 ---------------- */
.li-btns { display: flex; gap: 10px; margin-top: auto; padding-top: 28px; }
.li-btns .btn { flex: 1; justify-content: center; height: 50px; padding: 0 14px; font-size: var(--fs15); max-width:500px; margin: 0 auto;}
.btn-white { background: #fff; color: var(--c_base1) !important; }
.btn-white:hover { background: var(--c_base5); color: var(--c_base3) !important; transform: translateY(-2px); }

/* ======================================================
   반응형
   ====================================================== */
@media (max-width: 1249px) {
	.loc-top { grid-template-columns: 1fr; gap: 20px; }
	.loc-map { min-height: 420px; }
	.loc-info { padding: 32px 28px 30px; }
	.li-head strong br { display: none; }
	.li-btns { padding-top: 26px; }
}

@media (max-width: 767px) {
	.loc-map { min-height: 300px; border-radius: 14px; }
	.loc-info { padding: 26px 20px 24px; border-radius: 14px; }
	.li-addr { margin-top: 22px; padding-top: 22px; }
	.li-mgr { padding: 20px 18px; }
	.li-mgr li { gap: 10px; }
	.li-mgr li em { width: 56px; }
	/* 세로 배치에서는 .btn 의 flex:1(=flex-basis:0) 이 주축(높이)에 걸려
	   height 가 무시되고 버튼이 눌리므로 해제하고 가로폭을 채운다 */
	.li-btns { flex-direction: column; align-items: stretch; padding-top: 22px; }
	.li-btns .btn { flex: none; width: 100%; height: 50px; margin: 0 auto; }
}