@charset "utf-8";

/* ============================================
   찾아오시는 길 (map) 전용 스타일
   샘플 지도 + 위치/연락처/교통 정보
   Material Icons Outlined(레이아웃 default.css)와 공통 컬러(--color) 사용
   ============================================ */

/* --- 소제목 헬퍼 --- */
h4 {font-size:1.625rem; margin-bottom:10px;}
.con_tit {display:flex; align-items:flex-start; margin-bottom:1.25rem;}
.con_tit::before {content:''; background:url(images/icon_con_tit.png) 0 0 no-repeat; background-size:contain; flex:0 0 1.25rem; width:1.25rem; height:1.25rem; margin:0.5rem 8px 0 0;}

.map_wrap .con_tit {margin-top:3.125rem;}

/* --- 지도 영역 --- */
.map_area {position:relative; border-radius:18px; overflow:hidden; border:1px solid #e2e7f0; box-shadow:0 8px 22px rgba(30,50,90,0.08);}
.map_area iframe {display:block; width:100%; height:460px; border:0;}
.map_area .map_badge {position:absolute; top:14px; left:14px; z-index:1; background:rgba(51,87,161,0.92); color:#fff; font-size:0.8125rem; font-weight:600; border-radius:50rem; padding:5px 14px; box-shadow:0 3px 10px rgba(0,0,0,0.15);}

/* --- 기본 정보 카드 그리드 --- */
.loc_grid {display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1.25rem;}
.loc_item {display:flex; align-items:flex-start; gap:0.875rem; background:#fff; border:1px solid #e5e9f0; border-radius:14px; padding:1.25rem 1.375rem; box-shadow:0 4px 14px rgba(30,50,90,0.05);}
.loc_item .ico {flex:0 0 46px; width:46px; height:46px; display:inline-flex; justify-content:center; align-items:center; background:#eef3fb; color:var(--color); border-radius:50rem;}
.loc_item .ico .material-icons-outlined {font-size:1.5rem;}
.loc_item .txt {flex:1; line-height:1.5;}
.loc_item .txt .label {display:block; font-size:0.875rem; font-weight:700; color:var(--color); margin-bottom:2px;}
.loc_item .txt .value {font-size:1.0625rem; color:#333; word-break:break-all;}
.loc_item .txt .value .sub {display:block; font-size:0.9375rem; color:#777; margin-top:2px;}

/* --- 오시는 방법 --- */
.direction {display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1.25rem;}
.direction > li {background:#f7f9fc; border:1px solid #e2e7f0; border-radius:16px; padding:1.5rem;}
.direction > li .head {display:flex; align-items:center; gap:10px; margin-bottom:0.875rem;}
.direction > li .head .material-icons-outlined {display:inline-flex; justify-content:center; align-items:center; width:40px; height:40px; background:var(--color); color:#fff; border-radius:12px; font-size:1.375rem;}
.direction > li .head strong {font-size:1.1875rem; color:#1e2a44;}
.direction .dot_list > li {position:relative; padding-left:12px; text-align:left; color:#555; line-height:1.6;}
.direction .dot_list > li::before {content:''; display:block; background:#aaa; border-radius:50px; width:4px; height:4px; position:absolute; top:11px; left:0;}
.direction .dot_list > li + li {margin-top:5px;}

.map_note {margin-top:2rem; background:#f7f9fc; border:1px dashed #d3dbe8; border-radius:12px; padding:1rem 1.25rem; color:#667; font-size:0.9375rem; line-height:1.6;}

@media screen and (min-width:769px) {
	.loc_grid {grid-template-columns:repeat(2, 1fr);}
	.direction {grid-template-columns:repeat(3, 1fr);}
}

@media screen and (max-width:480px) {
	.map_area iframe {height:340px;}
}