@charset "utf-8";
/* ==========================================================================
   의료진 소개 (www/about/doctor.jsp)
   - 투명배경 인물 사진을 하나의 무대(바닥선)에 세우고 좌우 슬라이드로 이동
   - 하단 패널에 이름 / 진료과 / 약력 노출
   - 각진(라운드 0) 스타일 기준
   ========================================================================== */

:root {
	/* 인물 사진은 800x1100 (세로 1.375배) 투명 PNG 기준.
	   활성 인물이 무대 높이를 꽉 채우면 폭은 약 (무대높이 x 0.73) 이므로,
	   --doc-item-w 를 그보다 크게 잡은 만큼이 인물 사이 간격이 된다. */
	--doc-stage-h: 560px;          /* 인물 무대 높이 (활성 인물 폭 ≒ 375px) */
	--doc-item-w: 440px;           /* 인물 1명이 차지하는 가로 자리 → 간격 ≒ 65px */
	--doc-ink: #1b1f23;
	--doc-gray: #8b9298;
	--doc-line: #e6e9eb;
	--doc-stage-bg: #f7f9fa;
}

/* 이 페이지는 상단이 밝으므로 헤더를 항상 흰 배경(어두운 글자)으로 고정 */
.doctor_body #header {
	background-color: var(--header-bg-on, #fff);
	border-bottom-color: rgba(0,0,0,.06);
}
.doctor_body #header .logo img { filter: none; }
.doctor_body #header .gnb > li > a { color: var(--header-text-on, #222); }
.doctor_body #header .m_btn i { background: var(--header-text-on, #222); }

#doctor_wrap {
	padding-top: var(--header-height, 90px);
	padding-bottom: 110px;
	background: #fff;
	color: var(--doc-ink);
	overflow: hidden;
}
#doctor_wrap *,
#doctor_wrap *:before,
#doctor_wrap *:after { box-sizing: border-box; }

/* ===== 페이지 타이틀 ===== */
.doctor_head {
	padding: 62px 20px 44px;
	text-align: center;
}
/* ※ 섹션 타이틀 위 영문 눈썹 텍스트(sec_label)는 사용하지 않는다 */
.doctor_head .sec_tit {
	margin: 0 0 18px;
	font-size: 52px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.25;
}
.doctor_head .sec_desc {
	margin: 0;
	font-size: 21px;
	line-height: 1.7;
	color: var(--doc-gray);
}

/* ==========================================================================
   인물 무대 (좌우 풀사이즈)
   ========================================================================== */
/* overflow-anchor : 트랙이 복제 구간을 점프할 때 브라우저가 스크롤을 보정해
   페이지가 위아래로 튀는 것을 막는다 */
.doctor_slider { position: relative; overflow-anchor: none; }
.doctor_slider * { overflow-anchor: none; }

.stage {
	position: relative;
	width: 100%;
	height: var(--doc-stage-h);
	overflow: hidden;
	background: linear-gradient(180deg, #fff 0%, #fafbfc 55%, var(--doc-stage-bg) 100%);
	border-bottom: 1px solid var(--doc-line);
}
/* 좌우 끝에서 인물이 자연스럽게 사라지도록 페이드 */
.stage:before,
.stage:after {
	content: '';
	position: absolute;
	top: 0;
	z-index: 3;
	width: 9%;
	height: 100%;
	pointer-events: none;
}
.stage:before { left: 0;  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%); }
.stage:after  { right: 0; background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%); }

.stage_track {
	display: flex;
	align-items: flex-end;      /* 바닥선 정렬 → 같은 공간에 서 있는 느낌 */
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform .7s cubic-bezier(.22,.61,.36,1);
	will-change: transform;
	backface-visibility: hidden;
}
.doctor_slider:not(.ready) .stage_track { visibility: hidden; }

.stage_item {
	position: relative;
	z-index: 1;
	flex: 0 0 var(--doc-item-w);
	width: var(--doc-item-w);
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.stage_item.near   { z-index: 2; }
.stage_item.active { z-index: 3; }   /* 겹칠 때 활성 인물이 앞으로 */
/* 크기 변화는 height 가 아니라 transform: scale 로 준다.
   height 를 애니메이션하면 매 프레임 레이아웃이 다시 계산되면서
   슬라이드가 끊기고 트랙 위치까지 흔들린다(통통 튀는 원인). */
.stage_item .ph {
	display: block;
	/* 사진 틀은 630:1000 (촬영 원본 규격) 으로 고정한다 (2026-09-14)
	   ※ 예전(width:auto + contain)에는 원본 비율이 다른 사진이 올라오면 그 인물만 폭이 달라졌다.
	     (장석원 원장 사진을 관리자에서 다시 올리자 가로가 넓은 원본이라 혼자 다르게 보인 사례)
	     이제 어떤 비율의 사진을 올려도 틀은 같고, 넓은 사진은 좌우가 · 긴 사진은 발 쪽이 잘린다. */
	width: auto;
	aspect-ratio: 630 / 1000;
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm, 6px);
	background: none;
	cursor: pointer;
	transform: scale(.87);       /* 비활성 : 조금 작게 */
	transform-origin: bottom center;
	opacity: .55;
	/* ※ filter(grayscale) 는 전환하지 않는다 — 사진 여러 장의 필터를 동시에 애니메이션하면
	     매 프레임 다시 그려야 해서 슬라이드가 뚝뚝 끊긴다. 밝기 · 크기 변화만으로 충분하다. */
	transition: transform .7s cubic-bezier(.22,.61,.36,1),
	            opacity .55s ease;
	backface-visibility: hidden;
}
.stage_item.near .ph { transform: scale(.92); opacity: .75; }
.stage_item.active .ph {
	transform: scale(1);
	opacity: 1;
	cursor: default;
}
.stage_item .ph img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center top;   /* 머리가 잘리지 않도록 위를 기준으로 */
}
/* 사진 아래 이름 캡션 (기본은 숨김 → .simple 슬라이더에서만 노출) */
.stage_cap { display: none; }

.stage_item .no_photo {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding-bottom: 40px;
	font-size: 83px;
	color: #d3d9dd;
}

/* ==========================================================================
   간략형 슬라이더(.simple) — 메인용
   : 사진만 크게 세우고, 이름·약력은 사진을 누를 때 모달로 보여준다.
     (하단 이름 띠 · 캡션은 2026-09-02 제거 — 그만큼 인물 사진을 키웠다)
   ========================================================================== */
.doctor_slider.simple .stage_band,
.doctor_slider.simple .stage_cap { display: none; }
.doctor_slider:not(.simple) .stage_band { display: none; }

/* ==========================================================================
   상세 슬라이더 : 인물마다 이름 · 직책을 사진 아래에 표시 (2026-09-09)
   - 가운데 활성 인물만 아래 큰 패널에 나오고 양옆 인물은 사진뿐이라 누가 누구인지 알 수 없었다.
   - .stage_item 에 아래 여백을 주어 사진(.ph height:100%) 아래로 캡션 자리를 만든다.
   ========================================================================== */
.doctor_slider:not(.simple) .stage_item { padding-bottom: 84px; }
.doctor_slider:not(.simple) .stage_cap {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 10px;
	text-align: center;
	opacity: .5;
	transition: opacity .45s ease;
}
.doctor_slider:not(.simple) .stage_item.near   .stage_cap { opacity: .72; }
.doctor_slider:not(.simple) .stage_item.active .stage_cap { opacity: 1; }
.doctor_slider:not(.simple) .stage_cap .cap_name {
	display: block;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.3;
	color: var(--doc-ink);
}
.doctor_slider:not(.simple) .stage_cap .cap_badge {
	display: inline-block;
	margin-left: 5px;
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	color: var(--point-main, #3062C3);
}
.doctor_slider:not(.simple) .stage_cap .cap_part {
	display: block;
	margin-top: 5px;
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.4;
	color: var(--doc-gray);
	word-break: keep-all;
}

/* 무대 배경 : 인물 뒤는 밝게, 바닥으로 갈수록 아주 옅게 */
.doctor_slider.simple .stage {
	background: linear-gradient(180deg, #fff 0%, #fbfbfc 45%, #f4f5f6 100%);
	border-bottom: 0;
}

/* 메인은 중앙 정보 패널을 화면에 쓰지 않는다.
   ※ 삭제하지 말 것 — 모달이 이 패널의 이름·진료과·약력을 읽어 간다. */
.doctor_slider.simple .info_view { display: none; }
.doctor_slider.simple .stage_info {
	position: static;
	max-width: none;
	padding: 0;
}

/* ==========================================================================
   인물 정보
   ========================================================================== */
.stage_info {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: 62px 120px 20px;
	text-align: center;
}

/* 좌우 이동 버튼 : 인디케이터 양옆 (.stage_dots 안) */
.nav_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--doc-line);
	border-radius: var(--radius-sm, 6px);
	background: #fff;
	cursor: pointer;
	transition: border-color .25s ease, background-color .25s ease;
}
.nav_btn i {
	display: block;
	width: 10px;
	height: 10px;
	border-top: 1px solid #6d757b;
	border-right: 1px solid #6d757b;
	transition: border-color .25s ease;
}
.nav_btn.prev i { transform: rotate(-135deg); margin-left: 4px; }
.nav_btn.next i { transform: rotate(45deg);   margin-right: 4px; }
.nav_btn:hover { border-color: var(--point-main, #3062C3); background: var(--point-main, #3062C3); }
.nav_btn:hover i { border-color: #fff; }

/* 정보 패널 (활성 1개만 노출) */
.info_view { position: relative; }
.info_panel {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .45s ease, transform .45s ease, visibility .45s ease;
}
.info_panel.active {
	position: relative;
	opacity: 1;
	visibility: visible;
	transform: none;
}
.info_panel .name {
	display: block;
	font-size: 53px;
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 1.2;
}
.info_panel .part {
	display: block;
	margin-top: 6px;
	font-size: 35px;
	font-weight: 400;
	letter-spacing: -0.03em;
	color: var(--doc-gray);
}
/* 직책2 (관리자 > 의료진관리) : 직책 아래 한 단계 작은 보조 문구 */
.info_panel .part2 {
	display: block;
	margin-top: 4px;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--doc-gray);
}

/* 약력 */
.info_panel .career {
	margin-top: 34px;
	padding-top: 30px;
	border-top: 1px solid var(--doc-line);
}
.info_panel .career_tit {
	display: inline-block;
	margin-bottom: 16px;
	padding: 8px 18px;
	border: 1px solid var(--point-main, #3062C3);
	border-radius: var(--radius-sm, 6px);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--point-main, #3062C3);
}
.info_panel .career_body {
	font-size: 21px;
	/* 가독성 : 얇은 400 + 회색은 흐려 보여 500 + 진한 잉크색으로 (2026-09-14) */
	font-weight: 500;
	line-height: 1.85;
	color: #2a2f34;
	word-break: keep-all;
}
.info_panel .career_body p { margin: 0 0 6px; }
.info_panel .career_body ul,
.info_panel .career_body ol { margin: 0; padding: 0; list-style: none; }
.info_panel .career_body li { margin-bottom: 6px; }
.info_panel .career_body img { max-width: 100%; height: auto; border-radius: var(--radius-sm, 6px); }
/* 약력은 관리자가 다른 사이트 · 문서에서 복사해 붙이는 경우가 많아
   본문에 인라인 스타일(font-size · font-family · line-height · color)이 섞여 들어온다.
   그대로 두면 의료진마다 글자 크기 · 줄간격이 달라 보이므로 여기서 본문 서식으로 통일한다.
   ※ 굵게(b · strong)는 그대로 살린다. (2026-09-09) */
.info_panel .career_body * {
	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	color: inherit !important;
	background: none !important;
}

/* 부가 정보 */
.info_panel .meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 34px;
	margin: 30px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--doc-line);
	list-style: none;
	font-size: 20px;
	color: #5a6167;
}
.info_panel .meta .lb {
	display: inline-block;
	margin-right: 10px;
	font-weight: 600;
	color: var(--doc-ink);
}
.info_panel .meta a { color: inherit; text-decoration: none; }
.info_panel .meta a:hover { color: var(--point-main, #3062C3); text-decoration: underline; }

/* 현재 위치 (01 / 05) */
.stage_paging {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 40px;
	font-family: 'S-Core Dream', sans-serif;
	font-size: 14px;
	letter-spacing: .08em;
	color: var(--doc-gray);
}
.stage_paging .cur { color: var(--point-main, #3062C3); font-weight: 600; }
.stage_paging .bar { width: 34px; height: 1px; background: var(--doc-line); }

/* 인디케이터 + 좌우 이동 버튼 */
.stage_dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 26px;
	padding: 30px 20px 0;
}
.stage_dots .dots {
	display: flex;
	align-items: center;
	gap: 11px;
}
.stage_dots .dot {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #dfe4e7;
	cursor: pointer;
	transition: background-color .3s ease, transform .3s ease;
}
.stage_dots .dot span { display: none; }
.stage_dots .dot:hover { background: #c2cace; }
.stage_dots .dot.active { background: var(--point-main, #4A7ED6); transform: scale(1.25); }

/* ===== 플레이스홀더 안내 (등록 데이터가 없을 때만 노출) ===== */
.ph_notice {
	max-width: 760px;
	margin: 42px auto 0;
	padding: 15px 20px;
	background: var(--point-main-light, #EDF2FC);
	border: 1px solid rgba(48,98,195,.18);
	text-align: center;
	font-size: 18px;
	line-height: 1.6;
	color: var(--point-main-dark, #24499B);
}

/* ==========================================================================
   진료일정 표 (요일 가로 · 오전/오후)
   - .info_panel 안에 출력되어 상세 페이지에서는 그대로 보이고,
     메인에서는 감춰진 채 모달이 이 내용을 옮겨 담는다.
   ========================================================================== */
/* 스크린리더 전용 텍스트 (화면에서는 보이지 않음) */
.doc_sched .blind {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.doc_sched { margin-top: 26px; }
.doc_sched .sched_tit {
	display: block;
	margin-bottom: 12px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--doc-ink);
}
.doc_sched table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	border-radius: var(--radius-sm, 6px);
	overflow: hidden;
	background: #fff;
}
.doc_sched th,
.doc_sched td {
	padding: 9px 2px;
	border: 1px solid var(--doc-line);
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.doc_sched thead th {
	background: var(--point-pale, #E3EAF7);
	color: var(--point-on-pale, #2B5199);
	font-weight: 600;
}
.doc_sched thead th.sat { color: #3b6fd4; }
.doc_sched thead th.sun { color: #d1495b; }
.doc_sched tbody th {
	width: 52px;
	background: #f7f9fb;
	color: #3a4046;
	font-size: 13px;
	font-weight: 600;
}
/* 진료 : 점 / 휴진 : 대시 */
.doc_sched td:before {
	content: '–';
	color: #9aa1a7;
	font-size: 14px;
	line-height: 1;
}
.doc_sched td.on:before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--point-main, #4A7ED6);
	vertical-align: middle;
}
/* 관리자 진료일정의 세부 상태(5시까지 · 6시까지 · 교대진료 · 격주휴진 · 예약 후 진료)는 글자로 노출 */
.doc_sched td.txt:before { content: none; }
.doc_sched td.txt {
	padding-left: 0;
	padding-right: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--point-on-pale, #2B5199);
	white-space: nowrap;
}
.doc_sched .sched_note {
	margin: 10px 0 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #555c63;
}

/* ==========================================================================
   의료진 상세 모달 (메인 : 사진 클릭 시)
   ========================================================================== */
/* 메인에서는 가운데 인물도 누를 수 있다 (상세 페이지는 기존대로 커서 없음) */
.doctor_slider.simple .stage_item.active .ph { cursor: pointer; }

/* 「눌러서 자세히」 표시 : 가운데 인물 사진 아래쪽에만 떠오른다 */
.stage_item .ph { position: relative; }
.ph_more { display: none; }
.doctor_slider.simple .ph_more {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	/* 인물을 가리지 않도록 사진 오른쪽 아래 여백에 둔다 */
	right: 4%;
	bottom: 6%;
	z-index: 2;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 1px solid var(--point-pale-line, #C3D4EE);
	background: rgba(227,234,247,.92);
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	box-shadow: 0 6px 18px rgba(12,30,66,.16);
	color: var(--point-on-pale, #2B5199);
	font-size: 17px;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;             /* 클릭은 사진 버튼이 받는다 */
	transition: opacity .45s ease, transform .45s ease, background-color .25s ease;
}
.doctor_slider.simple .stage_item.active .ph_more {
	opacity: 1;
	transform: none;
}
.doctor_slider.simple .stage_item.active .ph:hover .ph_more {
	background: #fff;
	transform: translateY(-4px);
}

body.doc_modal_open { overflow: hidden; }

.doc_modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 20px;
}
.doc_modal[hidden] { display: none; }

.doc_modal_dim {
	position: absolute;
	inset: 0;
	background: rgba(16,26,44,.55);
	-webkit-backdrop-filter: blur(3px);
	        backdrop-filter: blur(3px);
}

.doc_modal_box {
	position: relative;
	z-index: 1;
	display: flex;
	width: 100%;
	max-width: 980px;
	max-height: 86vh;
	overflow: hidden;
	border-radius: var(--radius-lg, 16px);
	background: #fff;
	box-shadow: 0 30px 70px rgba(12,30,66,.32);
	animation: docModalIn .3s cubic-bezier(.22,.61,.36,1);
}
@keyframes docModalIn {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* 왼쪽 : 인물 사진(투명 PNG 를 바닥에 세운다) + 그 아래 진료일정 */
.doc_modal_left {
	flex: 0 0 42%;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: linear-gradient(180deg, #fff 0%, var(--point-pale, #E3EAF7) 100%);
}
.doc_modal_photo {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.doc_modal_photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
}
.doc_modal_photo img[hidden] { display: none; }

.doc_modal_sched {
	flex: 0 0 auto;
	padding: 0 22px 24px;
}
.doc_modal_sched[hidden] { display: none; }
.doc_modal_sched .doc_sched { margin-top: 0; }
.doc_modal_sched .sched_tit { font-size: 15px; margin-bottom: 9px; }

/* 오른쪽 : 이름 · 진료과 · 약력 */
.doc_modal_body {
	flex: 1 1 auto;
	min-width: 0;
	overflow-y: auto;
	padding: 54px 50px 46px;
}
.doc_modal_name {
	display: block;
	font-size: 37px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.2;
	color: var(--doc-ink);
}
.doc_modal_part {
	display: block;
	margin-top: 8px;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--point-main, #4A7ED6);
}
.doc_modal_part[hidden] { display: none; }
.doc_modal_career {
	margin-top: 28px;
	padding-top: 26px;
	border-top: 1px solid var(--doc-line);
	font-size: 17px;
	line-height: 1.8;
	color: #4a5157;
	word-break: keep-all;
}
.doc_modal_career[hidden] { display: none; }
.doc_modal_career p { margin: 0 0 6px; }
.doc_modal_career ul,
.doc_modal_career ol { margin: 0; padding: 0; list-style: none; }
.doc_modal_career li { margin-bottom: 6px; }
.doc_modal_career img { max-width: 100%; height: auto; border-radius: var(--radius-sm, 6px); }

/* 닫기 (우측 상단 X) */
.doc_modal_close {
	position: absolute;
	right: 14px;
	top: 14px;
	z-index: 2;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--point-pale-line, #C3D4EE);
	border-radius: var(--radius-sm, 6px);
	background: var(--point-pale, #E3EAF7);
	cursor: pointer;
	transition: background-color .25s ease;
}
.doc_modal_close:hover { background: var(--point-pale-hover, #D3E0F3); }
.doc_modal_close i {
	position: relative;
	display: block;
	width: 16px;
	height: 16px;
	margin: 0 auto;
}
.doc_modal_close i:before,
.doc_modal_close i:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1.5px;
	background: var(--point-on-pale, #2B5199);
}
.doc_modal_close i:before { transform: rotate(45deg); }
.doc_modal_close i:after  { transform: rotate(-45deg); }

/* ==========================================================================
   반응형
   ========================================================================== */
@media all and (max-width:1400px){
	:root { --doc-stage-h: 480px; --doc-item-w: 400px; }
	.doctor_head .sec_tit { font-size: 37px; }
	.info_panel .name { font-size: 39px; }
	.info_panel .part { font-size: 25px; }
	.info_panel .part2 { font-size: 15px; }
}

@media all and (max-width:1024px){
	:root { --doc-stage-h: 420px; --doc-item-w: 350px; }
	#doctor_wrap { padding-top: var(--header-height, 70px); }
	.doctor_head { padding: 64px 20px 44px; }
	.doctor_head .sec_tit { font-size: 31px; }
	.doctor_head .sec_desc { font-size: 16px; }
	.stage_info { padding: 50px 20px 20px; }
	.stage_info .nav_btn { top: auto; bottom: -14px; width: 46px; height: 46px; }
	.stage_info .nav_btn.prev i { margin-left: 18px; }
	.stage_info .nav_btn.next i { margin-right: 18px; }
	.info_panel .name { font-size: 31px; }
	.info_panel .part { font-size: 20px; }
	.info_panel .part2 { font-size: 14px; }
	.info_panel .career_body { font-size: 16px; }
	.stage_dots { padding: 60px 20px 0; }
}

@media all and (max-width:768px){
	:root { --doc-stage-h: 340px; --doc-item-w: 275px; }
	.stage:before, .stage:after { width: 18%; }
	.doctor_head { padding: 50px 20px 36px; }
	.doctor_head .sec_tit { font-size: 26px; }
	.info_panel .name { font-size: 26px; }
	.info_panel .part { font-size: 17px; }
	.info_panel .part2 { font-size: 13px; }
	.info_panel .career { margin-top: 26px; padding-top: 24px; }
	.info_panel .career_body { font-size: 15px; line-height: 1.8; }
	.info_panel .meta { gap: 8px 20px; font-size: 14px; }
	.stage_dots { padding: 54px 20px 0; }

	/* 모달 : 사진 → 진료일정 → 약력 순으로 세로로 쌓는다 */
	.doc_modal { padding: 16px; }
	.doc_modal_box { flex-direction: column; max-height: 90vh; overflow-y: auto; }
	.doc_modal_left { flex: 0 0 auto; }
	.doc_modal_photo { height: 200px; }
	.doc_modal_sched { padding: 0 18px 20px; }
	.doc_modal_body { padding: 26px 22px 30px; overflow: visible; }
	.doc_modal_name { font-size: 25px; }
	.doc_modal_part { font-size: 17px; }
	.doc_modal_career { margin-top: 20px; padding-top: 18px; font-size: 15px; line-height: 1.75; }
	.doc_modal_close { right: 10px; top: 10px; width: 38px; height: 38px; }
}

/* ==========================================================================
   의료진이 5명으로 줄어, 넓은 화면에서는 한 화면에 다섯 명이 모두 들어오게 한다 (2026-09-09)
   - 인물 한 명이 차지하는 자리(--doc-item-w)를 화면 폭의 1/5 로 잡으면 좌우 잘림이 없다.
   - 무대 높이도 같이 줄여야 인물 사이 간격이 남는다 (인물 폭 ≒ 무대높이 × 0.67).
   ※ 의료진 수가 바뀌면 20vw(=100vw/5) 를 인원수에 맞춰 고칠 것.
   ※ 1400px 이하는 위 반응형 규칙(480px / 400px)을 그대로 두어 사진이 지나치게 작아지지 않게 한다.
   ========================================================================== */
@media all and (min-width:1401px){
	:root {
		--doc-item-w: 20vw;
		--doc-stage-h: min(560px, 23.5vw);
	}
}