@charset "utf-8";

/*
 * 의료진 소개 — 프리미엄 톤
 * 차콜 #4D4A45 + 포인트 블루 #5A7FA8
 */

.doctor_page{
	--doc-ink: #2A2826;
	--doc-brand: #4D4A45;
	--doc-muted: #7A7670;
	--doc-point: #5A7FA8;
	--doc-point-soft: #E8EEF4;
	--doc-line: #E6E4E0;
	--doc-bg-soft: #F7F8FA;
	padding: 72px 0 0;
	background: #fff;
	font-family: 'Pretendard', sans-serif;
}

.doctor_page .heading{
	margin-bottom: 56px;
	text-align: center;
}
.doctor_page .heading h3{
	margin: 0;
	font-size: clamp(28px, 3.2vw, 36px);
	line-height: 1.3;
	color: var(--doc-brand);
	text-align: center;
	letter-spacing: -0.03em;
	font-weight: 700;
}
.doctor_page .heading h3::before{
	content: '';
	display: block;
	width: 40px;
	height: 3px;
	margin: 0 auto 20px;
	background: var(--doc-point);
}
.doctor_page .heading h3 .blue{
	display: block;
	margin-top: 10px;
	font-size: clamp(15px, 1.6vw, 18px);
	color: var(--doc-point);
	letter-spacing: 0.16em;
	font-weight: 600;
}
.doctor_page .heading .text{
	max-width: 480px;
	margin: 20px auto 0;
	font-size: 17px;
	line-height: 1.75;
	color: var(--doc-muted);
	word-break: keep-all;
}

.doctor_profiles{width: 100%;}
.doctor_profile{
	padding: 72px 0 88px;
	background: #fff;
}
.doctor_profile.is-tint{
	background: var(--doc-bg-soft);
	border-top: 1px solid var(--doc-line);
}

.doctor_profile_inner{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 72px;
	margin-bottom: 48px;
}
.doctor_profile_inner.is-reverse{flex-direction: row-reverse;}

.doctor_photo{
	flex: 0 0 480px;
	width: 480px;
	max-width: 46%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 0;
	background: #EAEAEA;
}
.doctor_photo img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.doctor_body{
	flex: 0 1 520px;
	width: 100%;
	max-width: 520px;
	min-width: 0;
	padding-top: 0;
}
.doctor_name{
	margin: 0 0 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 14px;
	font-size: 34px;
	line-height: 1.3;
	color: var(--doc-brand);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.doctor_name .role{
	font-size: 18px;
	font-weight: 600;
	color: var(--doc-point);
	letter-spacing: 0.04em;
}
.doctor_philosophy{
	margin: 0 0 32px;
	padding: 16px 0 16px 18px;
	border-left: 3px solid var(--doc-point);
	font-size: 18px;
	line-height: 1.85;
	color: #5C5955;
	word-break: keep-all;
	letter-spacing: -0.01em;
	background: linear-gradient(90deg, var(--doc-point-soft) 0%, transparent 72%);
}

.doctor_career{margin-top: 4px;}
.doctor_career .career_title{
	margin: 0 0 18px;
	padding-bottom: 12px;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--doc-point);
	letter-spacing: 0.12em;
	border-bottom: 2px solid var(--doc-point);
	display: inline-block;
}
.doctor_career .career_list{
	margin: 0;
	padding: 0;
	list-style: none;
}
.doctor_career .career_list li{
	position: relative;
	padding: 12px 0 12px 18px;
	font-size: 16px;
	line-height: 1.65;
	color: #5C5955;
	word-break: keep-all;
	border-bottom: 1px solid var(--doc-line);
}
.doctor_career .career_list li:last-child{border-bottom: none;}
.doctor_career .career_list li::before{
	content: '';
	position: absolute;
	left: 0;
	top: 20px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--doc-point);
}

.doctor_schedule{width: 100%;}
.doctor_schedule .schedule_title{
	margin: 0 0 16px;
	padding-bottom: 12px;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--doc-point);
	letter-spacing: 0.12em;
	border-bottom: 2px solid var(--doc-point);
	display: inline-block;
}
.schedule_table_wrap{
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 0;
	border: 1px solid var(--doc-line);
	border-top: 3px solid var(--doc-point);
	background: #fff;
}
.schedule_table{
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	table-layout: fixed;
	color: var(--doc-ink);
	font-size: 16px;
	line-height: 1.45;
	text-align: center;
	background: #fff;
}
.schedule_table th,
.schedule_table td{
	padding: 16px 8px;
	border: 1px solid var(--doc-line);
	vertical-align: middle;
}
.schedule_table thead th{
	background: var(--doc-point);
	font-weight: 600;
	font-size: 15px;
	color: #fff;
	border-color: rgba(255,255,255,0.18);
	border-bottom: 0;
}
.schedule_table thead th:nth-child(n+2),
.schedule_table tbody td{
	width: 11.5%;
}
.schedule_table .col_period{
	width: 18%;
	font-weight: 500;
	background: var(--doc-point-soft);
	color: var(--doc-brand);
	font-size: 15px;
}
.schedule_table tbody th.col_period{
	padding: 14px 12px;
}
.schedule_table .period_label{
	display: block;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--doc-brand);
}
.schedule_table .period_time{
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 400;
	color: var(--doc-muted);
	white-space: nowrap;
}
.schedule_table .sch_on{
	display: inline-block;
	color: var(--doc-point);
	font-size: 16px;
	line-height: 1;
	font-weight: 400;
}
.schedule_table .sch_off{
	display: inline-block;
	color: #D8D8D8;
	font-size: 16px;
	line-height: 1;
}
.schedule_table .sch_note{
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--doc-point);
	word-break: keep-all;
	font-weight: 600;
}

@media all and (max-width: 1400px){
	.doctor_photo{flex-basis: 440px; width: 440px;}
	.doctor_body{flex-basis: 480px; max-width: 480px;}
}

@media all and (max-width: 1000px){
	/* 모바일 고정 헤더(~191px) 아래로 타이틀이 들어가지 않도록 */
	.fullpage:has(.doctor_page){padding-top: 210px !important;}
	.doctor_page{padding: 24px 0 0;}
	.doctor_page .heading{margin-bottom: 40px;}
	.doctor_profile{padding: 48px 0 56px;}
	.doctor_profile_inner{gap: 40px; margin-bottom: 32px;}
	.doctor_photo{flex-basis: 360px; width: 360px;}
	.doctor_body{flex-basis: 420px; max-width: 420px;}
	.doctor_name{font-size: 28px;}
	.doctor_name .role{font-size: 16px;}
	.doctor_philosophy{font-size: 17px; margin-bottom: 24px;}
	.doctor_career .career_list li{font-size: 15px;}
}

@media all and (max-width: 768px){
	.doctor_profile_inner,
	.doctor_profile_inner.is-reverse{
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}
	.doctor_photo{
		flex: none;
		width: 100%;
		max-width: 420px;
		margin: 0 auto;
	}
	.doctor_body{flex: none; max-width: none;}
	.doctor_name{font-size: 26px;}
	.doctor_philosophy{font-size: 16px; line-height: 1.8;}
}

@media all and (max-width: 640px){
	.doctor_profile{padding: 40px 0 48px;}
	.doctor_photo{max-width: 100%;}
	.doctor_name{font-size: 24px;}
	.doctor_name .role{font-size: 15px;}
	.doctor_philosophy{font-size: 15px;}
	.doctor_career .career_list li{font-size: 14px;}
	.schedule_table{font-size: 14px;}
	.schedule_table th,
	.schedule_table td{padding: 12px 6px;}
}