/* ============================================================
 * treatment-guide.css — 진료안내 템플릿 (templates/template-services.php)
 *   ① 진료과목  ② 진료시간  ③ 오시는 길
 * ============================================================ */

.site-main--treatment{
	--tg-text: #4a4845;
	--tg-muted: #8b857c;
	--tg-accent: #6b4a15;
	--tg-beige: #f7efe5;
}

.tg-sec{
	width: 100%;
	padding: 96px 0 104px;
	background-color: #ffffff;
}

.tg-inner{
	box-sizing: border-box;
	width: 100%;
	max-width: 1332px;
	margin: 0 auto;
	padding: 0 24px;
}

.tg-title{
	margin: 0 0 56px;
	text-align: center;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--tg-text);
	word-break: keep-all;
}

/* ── ① 진료과목 ────────────────────────────────── */

.tg-subjects__grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 64px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tg-subjects__item{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
}

/* 아이콘 — 이미지 자체에 원형 디자인이 포함되어 있으므로 별도 테두리·배경 없이 100% 로 출력 */
.tg-subjects__icon{
	display: block;
	width: 100%;
	max-width: 169px;
	transition: transform .25s ease;
}

.tg-subjects__item:hover .tg-subjects__icon{
	transform: translateY(-4px);
}

.tg-subjects__icon img{
	display: block;
	width: 100%;
	height: auto;
}

/* 이미지 파일이 없을 때의 대체 아이콘만 원형 배경을 쓴다 */
.tg-subjects__icon i{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: #ffffff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
	font-size: 54px;
	line-height: 1;
	color: #8a7a62;
}

.tg-subjects__label{
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--tg-text);
	word-break: keep-all;
}

/* ── ② 진료시간 ────────────────────────────────── */

.tg-hours{
	background-color: var(--tg-beige);
}

.tg-hours__list{
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin: 0;
	font-size: 21px;
	line-height: 1.4;
	color: #6f6b66;
}

/* 요일·시간 묶음을 가운데에 두고, 요일은 양쪽 정렬 · 시간은 왼쪽 정렬 */
.tg-hours__row{
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	align-items: center;
	gap: 0 44px;
}

/* 요일 — 시안처럼 글자를 좌우 끝까지 벌리는 양쪽 정렬 */
.tg-hours__row dt{
	display: block;
	width: 9.2em;
	margin: 0;
	font-weight: 500;
	letter-spacing: normal;
	white-space: nowrap;
	text-align: justify;
	text-align-last: justify;
	text-justify: inter-character;
}

.tg-hours__row dt .tg-hours__icon{
	display: inline-block;
	vertical-align: -3px;
}

.tg-hours__row dd{
	justify-self: start;
	margin: 0;
	font-weight: 500;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

/* 야간 진료 — 강조 */
.tg-hours__row.is-night dt,
.tg-hours__row.is-night dd{
	font-weight: 700;
	color: var(--tg-accent);
}

.tg-hours__icon{
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

.tg-hours__notes{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 18px;
	margin: 30px 0 0;
	font-size: 15px;
	color: var(--tg-muted);
}

/* ── ③ 오시는 길 ───────────────────────────────── */

.tg-map__image img{
	display: block;
	width: 100%;
	height: auto;
}

/* ── 반응형 ─────────────────────────────────────── */

@media (max-width: 1279px){
	.tg-sec{ padding: 80px 0 88px; }
	.tg-title{ margin-bottom: 46px; font-size: 32px; }
	.tg-subjects__grid{ gap: 48px 20px; }
	.tg-subjects__icon{ max-width: 140px; }
	.tg-subjects__icon i{ font-size: 44px; }
	.tg-subjects__label{ font-size: 17px; }
	.tg-hours__list{ font-size: 19px; }
}

@media (max-width: 767px){
	.tg-sec{ padding: 56px 0 62px; }
	.tg-inner{ padding: 0 16px; }
	.tg-title{ margin-bottom: 32px; font-size: 25px; }

	.tg-subjects__grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 34px 14px;
	}

	.tg-subjects__item{ gap: 14px; }
	.tg-subjects__icon{ max-width: 110px; }
	.tg-subjects__icon i{ font-size: 34px; box-shadow: 0 6px 16px rgba(0, 0, 0, .10); }
	.tg-subjects__label{ font-size: 15px; }

	.tg-hours__list{ gap: 14px; font-size: 15px; }

	.tg-hours__row{ gap: 0 16px; }
	.tg-hours__row dt{ width: 8.4em; }
	.tg-hours__row dd{ letter-spacing: 0.04em; }
	.tg-hours__notes{ margin-top: 20px; font-size: 13px; gap: 2px 10px; }
}

@media (max-width: 380px){
	.tg-hours__list{ font-size: 13.5px; }
	.tg-hours__row{ gap: 0 10px; }
	.tg-hours__row dt{ width: 7.8em; }
}