@charset "utf-8";
/* ==========================================================================
   진료안내·오시는길 (/location/index)
   - 히어로 밴드(.sl-subhero)·섹션 라벨(.sl-eyebrow)·버튼(.sl-btn)·토큰은 site_layout.css
   - 이 파일의 선택자는 모두 .sl-lc- 접두사로 스코프 한정 (publish.md 3.4)
   ========================================================================== */

.sl-lc {
	background: var(--sl-cream);
	padding: 100px 140px;
	box-sizing: border-box;
}
.sl-lc__inner {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 80px;
	max-width: var(--sl-container);
	margin: 0 auto;
}
.sl-lc__col {
	flex: 1 1 0;
	min-width: 0;
}
.sl-lc__title {
	font-size: 36px;   /* 섹션 제목 공통 (.sl-title 과 동일) */
	font-weight: 700;
	color: var(--sl-dark);
	letter-spacing: -.56px;
	margin: 14px 0 14px;
}

/* --------------------------------------------------------------------------
   1. 진료안내 표
   -------------------------------------------------------------------------- */
.sl-lc-hours {
	border-top: none;
	padding-top: 0;
}
.sl-lc-hours__row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 13px 0 14px;
	border-bottom: 1px solid rgba(43, 43, 40, .1);
}
.sl-lc-hours__row:first-child {
	border-top: 1px solid rgba(43, 43, 40, .1);
}
.sl-lc-hours__day {
	flex: 0 0 134px;
	font-size: var(--sl-text);
	font-weight: 700;
	color: var(--sl-dark);
	line-height: 1.5;
	margin: 0;
}
.sl-lc-hours__time {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--sl-text);
	font-weight: 700;
	color: var(--sl-dark);
	line-height: 1.5;
	margin: 0;
}
/* 부가 설명 (방학 중 오전 정상진료 등) — 본문보다 한 단계 작게 */
.sl-lc-hours__note {
	margin-left: 10px;
	font-size: 14px;
	font-weight: 400;
	color: rgba(43, 43, 40, .55);
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   2. 예약안내 카드
   -------------------------------------------------------------------------- */
.sl-lc-book {
	background: #fff;
	border: 1px solid rgba(43, 43, 40, .08);
	border-radius: 10px;
	padding: 33px 27px 23px;
	margin-top: 14px;
	box-sizing: border-box;
}
.sl-lc-book__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--sl-dark);
	margin: 0 0 9px;
}
.sl-lc-book__desc {
	font-size: var(--sl-text);
	font-weight: 400;
	color: rgba(43, 43, 40, .68);
	line-height: 1.75;
	margin: 0 0 18px;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   3. 오시는 길 - 주소 + 지도 앱 버튼
   -------------------------------------------------------------------------- */
.sl-lc-place {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 40px;
	margin-bottom: 14px;
}
.sl-lc-place__addr {
	font-size: var(--sl-text);
	font-weight: 400;
	color: rgba(43, 43, 40, .65);
	line-height: 1.6;
	margin: 8px 0 0;
}
.sl-lc-place__apps {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sl-lc-app,
.sl-lc-app:link,
.sl-lc-app:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 37px;
	padding: 0 16px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	box-sizing: border-box;
}
.sl-lc-app i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
}
.sl-lc-app--naver,
.sl-lc-app--naver:link,
.sl-lc-app--naver:visited { background: #03c75a; color: #fff; }
.sl-lc-app--naver i { background: #fff; color: #03c75a; }
.sl-lc-app--kakao,
.sl-lc-app--kakao:link,
.sl-lc-app--kakao:visited { background: #fee500; color: #3c1e1e; }
.sl-lc-app--kakao i { background: #3c1e1e; color: #fee500; font-size: 10px; }
.sl-lc-app:hover { opacity: .88; text-decoration: none; }

/* --------------------------------------------------------------------------
   4. 지도 + 이용 안내 3열
   -------------------------------------------------------------------------- */
.sl-lc-map {
	width: 100%;
	aspect-ratio: 780 / 438.75;
	border-radius: 10px;
	overflow: hidden;
}
.sl-lc-map img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sl-lc-guide {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin: 0;
	padding: 24px 0 0;
	list-style: none;
}
.sl-lc-guide li {
	flex: 1 1 200px;
}
.sl-lc-guide__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--sl-dark);
	margin: 0 0 7px;
}
.sl-lc-guide__desc {
	font-size: var(--sl-text);
	font-weight: 400;
	color: rgba(43, 43, 40, .65);
	line-height: 1.75;
	margin: 0;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   5. 반응형
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
	.sl-lc { padding: 70px 40px; }
	.sl-lc__inner { gap: 48px; }
}

@media (max-width: 1024px) {
	.sl-lc { padding: 48px 20px; }
	.sl-lc__inner { flex-direction: column; gap: 56px; }
	.sl-lc__col { width: 100%; }
	.sl-lc__title { font-size: 26px; }

	.sl-lc-hours__day { flex-basis: 112px; }
	.sl-lc-place { align-items: flex-start; }
	.sl-lc-guide li { flex: 1 1 100%; max-width: none; }
}

@media (max-width: 640px) {
	.sl-lc__title { font-size: 22px; }   /* 섹션 제목 공통 (.sl-title 과 동일) */
	.sl-lc-hours__row { flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 16px; }
	.sl-lc-hours__day { flex: 0 0 125px; font-weight: 700; white-space: nowrap; }
	.sl-lc-hours__time { flex: 1 1 auto; text-align: left; font-weight: 700; }
	.sl-lc-hours__note { display: block; margin: 2px 0 0; font-size: 12px; font-weight: 400; }
}