@charset "utf-8";
/* ==========================================================================
   스마일라인소개 > 의료진 소개 (/about/doctor/index)
   - 히어로 밴드(.sl-subhero)·토큰·헤더/푸터는 site_layout.css
   - 이 파일의 선택자는 모두 .sl-dt- 접두사로 스코프 한정 (publish.md 3.4)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 대표원장 프로필 (좌 사진 / 우 인사말 + 약력)
   -------------------------------------------------------------------------- */
.sl-dt-doctor {
	background: var(--sl-cream);
	padding: 90px 140px 0;
	box-sizing: border-box;
}
.sl-dt-doctor__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 0 96px;
	max-width: var(--sl-container);
	margin: 0 auto;
}

/* 1-1. 프로필 사진 ------------------------------------------------------- */
.sl-dt-doctor__photo {
	flex: 0 0 auto;
	width: 520px;
	max-width: 100%;
	aspect-ratio: 520 / 693.33;
	border-radius: 4px;
	overflow: hidden;
}
/* 사진이 메인 히어로용 가로 컷(1672x941)이라 세로 프로필 자리에서는 좌우가 잘린다.
   높이 기준으로 채워지므로 세로(머리~팔짱)는 원본 전체가 남고, 가로만 잘린다.
   원장님은 원본 가로의 53~92% 구간에 있어 object-position 을 88% 로 밀어
   인물이 잘리지 않고 화면 가운데 오게 맞춘다 (50% 면 왼쪽 빈 진료실만 보인다) */
.sl-dt-doctor__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 88% center;
	display: block;
}

/* 1-2. 인사말 ------------------------------------------------------------ */
.sl-dt-doctor__body {
	flex: 1 1 520px;
	min-width: 320px;
}
.sl-dt-doctor__name {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 20px;
	font-family: 'Noto Serif KR', 'Batang', serif;
	font-size: 36px;   /* 섹션 제목 공통 (.sl-title 과 동일) */
	font-weight: 400;
	color: var(--sl-dark);
	letter-spacing: -.34px;
}
.sl-dt-doctor__role {
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--sl-orange-dark);
	letter-spacing: 0;
}
.sl-dt-doctor__quotemark {
	font-family: 'Noto Serif KR', 'Batang', serif;
	font-size: 44px;
	font-weight: 400;
	line-height: .7;
	color: rgba(232, 98, 44, .5);
	margin: 13px 0 20px;
}
.sl-dt-doctor__greeting {
	font-size: var(--sl-text);
	font-weight: 400;
	color: rgba(43, 43, 40, .78);
	line-height: 1.95;
	letter-spacing: -.16px;
	margin: 0 0 20px;
	text-wrap: pretty;
}
.sl-dt-doctor__sign {
	font-size: var(--sl-text);
	font-weight: 700;
	color: var(--sl-dark);
	margin: 0 0 52px;   /* 인사말 끝 ↔ 약력 사이를 벌린다 */
}

/* 1-3. 약력 표 ----------------------------------------------------------- */
.sl-dt-hist__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--sl-dark);
	letter-spacing: -.44px;
	margin: 0 0 20px;
}
.sl-dt-hist {
	border-top: 2px solid var(--sl-dark);
	padding-top: 8px;
}
.sl-dt-hist__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 36px;
	padding: 24px 4px 25px;
	border-bottom: 1px solid rgba(43, 43, 40, .12);
}
.sl-dt-hist__label {
	flex: 0 0 118px;
	font-size: var(--sl-text);
	font-weight: 700;
	color: var(--sl-orange-dark);
	line-height: 1.7;
	margin: 0;
}
.sl-dt-hist__list {
	flex: 1 1 260px;
	min-width: 260px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sl-dt-hist__list li {
	position: relative;
	padding-left: 14px;
	font-size: var(--sl-text);
	font-weight: 400;
	color: rgba(43, 43, 40, .78);
	line-height: 1.7;
	margin-bottom: 10px;
}
.sl-dt-hist__list li:last-child { margin-bottom: 0; }
.sl-dt-hist__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 12px;   /* 본문 16px × line-height 1.7 의 세로 중앙 */
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(43, 43, 40, .4);
}

/* --------------------------------------------------------------------------
   2. 주요 학술활동
   -------------------------------------------------------------------------- */
.sl-dt-paper {
	/* 아래 여백 80 → 40. 줄인 40px 을 .sl-dt-paper__more 의 margin-top 으로 옮겨
	   맺음 문구만 아래로 내려가고 섹션 전체 높이는 그대로 유지된다 */
	background: var(--sl-cream);
	padding: 60px 140px 40px;
	box-sizing: border-box;
}
.sl-dt-paper__inner {
	max-width: 1240px;
	margin: 0 auto;
}
.sl-dt-paper__title {
	font-size: 36px;   /* 섹션 제목 공통 (.sl-title 과 동일) */
	font-weight: 700;
	color: var(--sl-dark);
	letter-spacing: -.44px;
	text-align: center;
	margin: 0 0 48px;
}
/* 좌우 2단. 연도 묶음이 단 경계에서 잘리지 않도록 break-inside 로 묶어 둔다 */
.sl-dt-paper__cols {
	columns: 2;
	column-gap: 72px;
}
.sl-dt-paper__group {
	break-inside: avoid;
	page-break-inside: avoid;   /* 구형 브라우저 대응 */
	margin: 0 0 34px;
}
/* 2단일 때 이 그룹부터 오른쪽 단을 시작한다 (연도 묶음이 의도한 단에 남도록) */
.sl-dt-paper__group--colbreak {
	break-before: column;
}
.sl-dt-paper__year {
	font-size: 20px;
	font-weight: 700;
	color: var(--sl-orange-dark);
	letter-spacing: -.2px;
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(43, 43, 40, .12);
}
.sl-dt-paper__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sl-dt-paper__list li {
	position: relative;
	padding-left: 14px;
	font-size: 15px;   /* 본문 16px 보다 한 단계 아래 : 논문 목록은 정보량이 많다 */
	font-weight: 400;
	color: rgba(43, 43, 40, .78);
	line-height: 1.7;
	letter-spacing: -.15px;
	margin-bottom: 14px;
	word-break: keep-all;
	text-wrap: pretty;
}
.sl-dt-paper__list li:last-child { margin-bottom: 0; }
.sl-dt-paper__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 11px;   /* 15px × line-height 1.7 의 세로 중앙 */
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(43, 43, 40, .4);
}
/* 게재지·학술대회 정보는 제목보다 한 톤 죽여 제목이 먼저 읽히게 한다 */
.sl-dt-paper__src {
	display: block;
	color: rgba(43, 43, 40, .5);
	font-size: 14px;
	letter-spacing: -.14px;
}
.sl-dt-paper__more {
	margin: 50px 0 0;   /* 목록에서 충분히 떨어뜨려 맺음말로 읽히게 한다 (섹션 하단 padding 에서 가져온 값) */
	font-size: var(--sl-text);
	color: rgba(43, 43, 40, .55);
	text-align: center;
}

/* --------------------------------------------------------------------------
   3. 스마일라인 팀
   -------------------------------------------------------------------------- */
.sl-dt-team {
	background: #fff;
	padding: 60px 140px 160px;
	box-sizing: border-box;
}
.sl-dt-team__inner {
	max-width: 1240px;
	margin: 0 auto;
	text-align: center;
}
.sl-dt-team__label {
	font-size: 13px;   /* 섹션 라벨 공통 (.sl-eyebrow 와 동일) */
	font-weight: 400;
	color: rgba(43, 43, 40, .55);
	margin: 0 0 17px;
}
.sl-dt-team__title {
	font-family: 'Noto Serif KR', 'Batang', serif;
	font-size: 36px;   /* 섹션 제목 공통 (.sl-title 과 동일) */
	font-weight: 400;
	color: var(--sl-dark);
	line-height: 1.64;
	letter-spacing: -.64px;
	margin: 0 0 28px;
	text-wrap: pretty;
}
.sl-dt-team__desc {
	/* 900px 에서는 4줄로 흘러 마지막 줄에 "니다." 만 남는다.
	   PC 는 JSP 의 <br class="sl-br-pc"> 로 세 줄을 직접 끊으므로,
	   가장 긴 첫 줄("…함께합니다. 특히 진료실은 모두")이 한 줄에 들어갈 폭을 준다 */
	max-width: 1160px;
	margin: 0 auto;
	font-size: var(--sl-text);
	font-weight: 400;
	color: rgba(43, 43, 40, .72);
	line-height: 1.95;
	letter-spacing: -.16px;
	text-wrap: pretty;
}
.sl-dt-team__photo {
	width: 788px;
	max-width: 100%;
	margin: 64px auto 0;
	aspect-ratio: 788 / 492.5;
	border-radius: 4px;
	overflow: hidden;
}
.sl-dt-team__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------------------
   4. 반응형 (본문은 var(--sl-text) : PC 16px / 640 이하 14px — site_layout.css 타이포 기준)
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
	.sl-dt-doctor { padding: 60px 40px 0; }
	.sl-dt-doctor__inner { gap: 0 56px; }
	.sl-dt-doctor__photo { width: 440px; }
	.sl-dt-paper { padding: 56px 40px 32px; }   /* 72 - 40 : 위와 같은 이유로 아래 여백을 more 쪽으로 넘김 */
	.sl-dt-paper__cols { column-gap: 48px; }
	.sl-dt-team { padding: 60px 40px 110px; }
}

@media (max-width: 1024px) {
	.sl-dt-doctor { padding: 48px 20px 0; }
	.sl-dt-doctor__inner { gap: 32px 0; }
	.sl-dt-doctor__photo { flex: 1 1 100%; width: 100%; max-width: 420px; margin: 0 auto; }
	.sl-dt-doctor__body { flex: 1 1 100%; min-width: 0; }
	.sl-dt-doctor__name { font-size: 26px; }
	.sl-dt-doctor__sign { margin-bottom: 36px; }

	.sl-dt-hist__row { gap: 12px 0; padding: 20px 0; }
	.sl-dt-hist__label { flex: 1 1 100%; }
	.sl-dt-hist__list { flex: 1 1 100%; min-width: 0; }

	/* 폭이 좁아지면 2단은 한 줄에 서너 단어밖에 못 담아 오히려 읽기 어렵다 → 1단으로 되돌린다 */
	.sl-dt-paper { padding: 44px 20px 16px; }   /* 56 - 40 : 위와 같은 이유로 아래 여백을 more 쪽으로 넘김 */
	.sl-dt-paper__title { font-size: 26px; margin-bottom: 32px; }
	.sl-dt-paper__cols { columns: 1; }
	.sl-dt-paper__group { margin-bottom: 28px; }
	.sl-dt-paper__group--colbreak { break-before: auto; }   /* 1단에서는 단 끊기 불필요 */
	.sl-dt-paper__year { font-size: 18px; }

	.sl-dt-team { padding: 48px 20px 80px; }
	.sl-dt-team__label { font-size: 12px; }
	.sl-dt-team__title { font-size: 26px; line-height: 1.55; }
	.sl-dt-team__photo { margin-top: 36px; }
}

@media (max-width: 640px) {
	.sl-dt-doctor__name { font-size: 22px; }
	.sl-dt-team__title { font-size: 22px; }
	.sl-dt-paper__title { font-size: 22px; }
	/* 본문이 14px 로 줄어드는 구간 : 목록·출처도 한 단계씩 함께 내린다 */
	.sl-dt-paper__year { font-size: 17px; }
	.sl-dt-paper__list li { font-size: 14px; }
	.sl-dt-paper__list li::before { top: 10px; }
	.sl-dt-paper__src { font-size: 13px; }
}