@charset "utf-8";
/* ==========================================================================
   메인 페이지 (www/index.jsp)
   구성 : 메인비주얼 → 주요 진료안내 → 검진센터 안내 → 의료진 소개 → (푸터: 오시는길)
   ========================================================================== */

:root {
	/* 포인트 컬러는 /css/theme.css (로고 기반) 를 참조 — 값 직접 수정 금지 */
	--m-brand: var(--point-main, #3062C3);
	--m-brand-dark: var(--point-main-dark, #24499B);
	--m-brand-soft: var(--point-main-light, #EDF2FC);
	/* 버튼 : 페일 블루 배경 + 짙은 블루 글자 (theme.css --point-pale 계열) */
	--m-btn-bg: var(--point-pale, #E3EAF7);
	--m-btn-bg-hover: var(--point-pale-hover, #D3E0F3);
	--m-btn-line: var(--point-pale-line, #C3D4EE);
	--m-btn-fg: var(--point-on-pale, #2B5199);
	--m-ink: #23282b;
	/* 설명문 · 보조 텍스트 : 옅은 배경에서 흐려 보여 한 단계 진하게 (2026-09-02, 이전 #6b7278) */
	--m-gray: #4d555c;
	--m-line: #e6eaea;
	--m-bg-soft: #f4f8f8;
}

.main_body { background: #fff; color: var(--m-ink); }
#main_wrap { overflow: hidden; }
/* 전역 reset(basic.css)이 border-box를 보장하지 않으므로 메인 영역에 한정해 지정 */
#main_wrap *,
#main_wrap *:before,
#main_wrap *:after { box-sizing: border-box; }

/* ===== 공통 : 섹션 / 타이틀 ===== */
.main_sec { padding: 130px 0; }
.main_sec .sec_head { margin-bottom: 60px; text-align: center; }
/* ※ 섹션 타이틀 위 영문 눈썹 텍스트(sec_label)는 사용하지 않는다 */
.main_sec .sec_tit {
	margin: 0 0 18px;
	font-size: 52px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.25;
	color: var(--m-ink);
}
.main_sec .sec_desc {
	margin: 0;
	font-size: 25px;
	font-weight: 600;
	line-height: 1.75;
	letter-spacing: -0.02em;
	color: #3b444d;
}

/* ===== 스크롤 진입 모션 ===== */
.fade_up {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.fade_up.in { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   1. 메인비주얼 (히어로)
   ========================================================================== */
/* 히어로 : 헤더 아래 · 하단 여백만 두고 좌우는 화면 끝까지 채운다 (2026-09-07 좌우 여백 제거)
   ※ 여백 부분은 흰 바탕이라, 투명 헤더가 히어로를 덮지 않고 그 위에 얹힌다. */
.main_visual {
	/* 아래쪽 여백. 화면이 낮아지면 아래 미디어쿼리가 이 값만 줄인다.
	   하단 버튼(.mv_quick · .mv_pager)도 이 값을 기준으로 따라 올라간다. */
	--hero-gap: 240px;
	/* 좌 · 우 여백. 풀사이즈로 쓰므로 0 (여백을 되살리려면 이 값만 바꾼다) */
	--hero-gap-x: 0px;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100vh;
	min-height: 620px;
	padding: var(--header-height, 118px) var(--hero-gap-x) var(--hero-gap);
	background: #fff;
}
/* 좌우가 화면 끝에 닿으므로 모서리 라운드는 두지 않는다 (2026-09-07) */
.main_visual .swiper-container.swiper_slider {
	border-radius: 0;
	overflow: hidden;
}

/* 히어로 고정 스크롤은 사용하지 않는다 (2026-09-07 제거)
   전에는 히어로를 position:fixed 로 세워 두고 다음 내용(.main_scroll)이 그 위를 덮으며 올라오게 했으나,
   히어로도 다른 섹션과 똑같이 스크롤과 함께 밀려 올라가도록 되돌렸다.
   ※ 되살릴 일이 있으면 히어로 fixed + .main_scroll 의 margin-top(=히어로가 비운 자리) 이 한 쌍이라는 점에 주의. */
.main_scroll { background: #fff; }
.main_visual .swiper-container,
.main_visual .swiper-wrapper,
.main_visual .swiper-slide { height: 100%; }
.main_visual .swiper-slide { position: relative; overflow: hidden; }

.main_visual .bg_box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.main_visual .bg_box img { width: 100%; height: 100%; object-fit: cover; }
.main_visual .bg_box:after {
	content: '';
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background: linear-gradient(100deg, rgba(20,32,36,.72) 0%, rgba(20,32,36,.42) 46%, rgba(20,32,36,.12) 100%);
}
/* 메인비주얼 미등록 시 기본 화면 : 밝은 화이트 톤 배경 + 의료진 단체사진 (2026-09-02)
   ※ 관리자 > 메인비주얼에 이미지를 등록하면 그쪽이 우선한다.
   ※ 사진은 배경을 지운 투명 PNG 라 하단에 세워 두면 배경과 자연스럽게 이어진다. */
.main_visual .bg_box.default_bg {
	background:
		/* 앞 : 의료진 단체사진 (투명 PNG)
		   ※ 원본 main_bg_img_02.png 는 4096x2532 / 4.6MB 라 히어로에 그대로 쓰기엔 무겁다
		     → 1500px 로 줄인 _w 버전을 쓴다 (표시 폭 약 1050px 이라 화질 여유 있음) */
		/* ※ 세로 비율이 사진 크기를 정한다. 키우면 인물이 커지는 대신 위쪽 문구와 가까워진다.
		     74% 부터는 설명문 둘째 줄과 인물 머리가 겹친다 (2026-09-09 : 70% → 72%) */
		url('/img/main_bg_img_02_w.png') no-repeat center bottom / auto 72%,
		/* 가운데 : 아래쪽만 색면, 위쪽은 투명 → 뒤의 대리석 텍스처가 비친다
		   ※ 색은 푸른 계열 대신 웜 그레이(샌드) 톤 — 대리석 · 흰 가운과 같은 결이라
		     화면이 차분하고 고급스럽게 정리된다 (2026-09-03 변경).
		   ※ 경계선 쪽은 위쪽 흰 대리석과 이어지도록 거의 흰색(#F6F3EE)으로 시작해
		     아래로 갈수록 짙은 샌드(#CFC5B5)로 내려간다.
		   ※ 각도를 180deg 에서 살짝 틀어(177deg) 경계선을 대각선으로 만든다
		     (1920px 기준 좌우 높이차 약 100px — 더 눕히려면 각도를 174deg 쪽으로)
		   ※ 두 색을 같은 위치에 붙이면(하드 스톱) 대각선에서 계단처럼 각져 보인다.
		     0.3% 만 띄워 브라우저가 그 구간을 부드럽게 이어 그리게 한다. */
		linear-gradient(177deg,
			rgba(246,243,238,0) 0%, rgba(246,243,238,0) 56%,
			#F6F3EE 56.3%,
			#EAE4DA 68%,
			#DCD4C7 84%,
			#CFC5B5 100%),
		/* 뒤 : 흰 대리석 텍스처 (원본 main_bg_05.png 1.5MB → 1920px jpg 로 경량화) */
		url('/img/main_bg_05.jpg') no-repeat center center / cover,
		#FFFFFF;
}
/* 기본 화면 2 : 병원 내부 사진 (default_bg 와 번갈아 노출)
   ※ 흰 인테리어라 어두운 글자가 읽히지만, 문구 자리만 흰 베일로 살짝 띄운다 */
.main_visual .bg_box.hospital_bg {
	/* 사진을 아래로 내린다 (2026-09-03) : 위(천장) 를 기준으로 붙인다.
	   넓은 화면일수록 cover 가 폭에 맞춰 사진을 크게 잡아 아래로 내려갈 여유가 저절로 생긴다. */
	background: url('/img/about/hospital_01.jpg') no-repeat center top / cover;
}
/* 세로가 상대적으로 긴 화면(가로÷세로 ≤ 1.67)에서는 cover 여유가 50px 남짓이라
   위치만으로는 사진이 거의 안 내려간다 → 세로를 112% 로 키워 내린다.
   ※ 112% 면 사진 폭이 화면 높이의 1.68배라, 이 비율 구간에서는 좌우 여백이 생기지 않는다.
     (넓은 화면에까지 이 값을 쓰면 폭이 모자라 좌우에 흰 여백이 생긴다 — cover 로 두는 이유) */
@media all and (max-aspect-ratio: 5/3){
	.main_visual .bg_box.hospital_bg { background-size: auto 112%; }
}
.main_visual .bg_box.hospital_bg:before {
	content: '';
	position: absolute;
	left: 0; top: 0; right: 0;
	height: 62%;
	background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.55) 55%, rgba(255,255,255,0) 100%);
}

/* 흰 배경이므로 사진 위 어둠 그라디언트(:after) 는 쓰지 않는다 */
.main_visual.no_data .bg_box:after { display: none; }

/* 기본 화면(밝은 배경) 전용 : 문구를 위쪽 가운데로 올리고 글자색을 어둡게 */
.main_visual.no_data .txt_box { align-items: flex-start; }
.main_visual.no_data .txt {
	max-width: 900px;
	margin: 0 auto;
	/* 헤더 높이는 .main_visual 의 padding-top 이 이미 확보한다 (2026-09-04) */
	padding: 80px 20px 34px;
	text-align: center;
}
/* 병원 내부 사진 슬라이드에는 가릴 인물이 없다 → 문구를 더 내려 화면 가운데에 가깝게 (2026-09-04)
   ※ 의료진 단체사진 쪽은 사진을 키워야 해서 문구를 위에 붙여 둔다 */
.main_visual.no_data .swiper-slide:has(.bg_box.hospital_bg) .txt { padding-top: 120px; }
/* 의료진 단체사진 슬라이드 : 문구를 조금 아래로 내린다 (2026-09-08)
   ※ padding-top 을 키우면 화면 높이별 미디어쿼리 값을 전부 다시 잡아야 하므로,
     기존 여백은 그대로 두고 transform 으로 상대 이동만 준다. 낮은 화면은 아래 미디어쿼리가 이동폭을 줄인다. */
.main_visual.no_data .swiper-slide:has(.bg_box.default_bg) .txt { transform: translateY(44px); }
/* 큰 모니터(화면이 높을 때) : 병원 내부 사진 슬라이드는 위쪽이 크게 비어 보인다 → 문구를 세로 가운데로.
   ※ 낮은 화면은 위 padding 방식 그대로 둔다 (가운데로 두면 아래 버튼 · 여백과 붙는다) (2026-09-04) */
@media all and (min-width:1025px) and (min-height:1001px){
	.main_visual.no_data .swiper-slide:has(.bg_box.hospital_bg) .txt_box { align-items: center; }
	.main_visual.no_data .swiper-slide:has(.bg_box.hospital_bg) .txt { padding-top: 0; padding-bottom: 0; }
	/* 사진을 원본 그대로 보여준다 : 흰 베일을 걷어내고, 가독성은 글자 주위 흰빛으로만 잡는다 (2026-09-04) */
	.main_visual .bg_box.hospital_bg:before { display: none; }
	.main_visual.no_data .swiper-slide:has(.bg_box.hospital_bg) .txt h2,
	.main_visual.no_data .swiper-slide:has(.bg_box.hospital_bg) .txt p {
		text-shadow:
			0 0 10px rgba(255,255,255,1),
			0 0 24px rgba(255,255,255,.98),
			0 0 52px rgba(255,255,255,.9);
	}
}
.main_visual.no_data .txt h2 { color: var(--m-ink); }
.main_visual.no_data .txt .point { color: var(--m-brand); }
.main_visual.no_data .txt p { color: var(--m-gray); font-weight: 700; }
.main_visual.no_data .scroll_down { background: rgba(35,40,43,.14); }
.main_visual.no_data .scroll_down .line { background: var(--m-brand); }
/* 밝은 화면이라 페이지네이션도 어두운 톤으로 */
/* 밝은 사진(흰 가운 · 흰 벽) 위라 .22 로는 거의 안 보인다 (2026-09-04) */
.main_visual.no_data .mv_pager .swiper-pagination-bullet { background: rgba(35,40,43,.30); }
.main_visual.no_data .mv_pager .swiper-pagination-bullet:hover { background: rgba(35,40,43,.5); }
.main_visual.no_data .mv_pager .swiper-pagination-bullet-active {
	background: var(--m-brand);
	box-shadow: 0 2px 10px rgba(48,98,195,.35);
}

/* 낮은 화면(노트북 · 작은 모니터) : 인물 사진이 문구를 덮지 않도록 비율과 상단 여백을 줄인다.
   ※ 히어로가 헤더 아래 카드가 되면서 세로 공간이 더 줄어 단계를 하나 늘리고 비율도 낮췄다 (2026-09-04) */
@media all and (min-width:1025px) and (max-height:1000px){
	.main_visual { --hero-gap: 160px; }
	.main_visual .bg_box.default_bg { background-size: auto 68%, auto, cover, auto; }
	.main_visual.no_data .txt { padding-top: 40px; }
	.main_visual.no_data .swiper-slide:has(.bg_box.default_bg) .txt { transform: translateY(32px); }
}
@media all and (min-width:1025px) and (max-height:900px){
	.main_visual { --hero-gap: 120px; }
	.main_visual .bg_box.default_bg { background-size: auto 63%, auto, cover, auto; }
	.main_visual.no_data .txt { padding-top: 36px; }
	.main_visual.no_data .swiper-slide:has(.bg_box.default_bg) .txt { transform: translateY(26px); }
	/* 여백이 좁아 버튼과 겹친다 → 인디케이터를 카드 안으로 되돌린다 */
	section.main_visual .mv_pager { bottom: calc(var(--hero-gap) + 30px); }
}
@media all and (min-width:1025px) and (max-height:800px){
	/* 버튼(높이 72)이 아래 여백 안에 들어가야 인물을 가리지 않는다 → 여백을 100px 아래로 줄이지 않는다 */
	.main_visual { --hero-gap: 100px; }
	.main_visual .bg_box.default_bg { background-size: auto 59%, auto, cover, auto; }
	.main_visual.no_data .txt { padding-top: 32px; }
	.main_visual.no_data .swiper-slide:has(.bg_box.default_bg) .txt { transform: translateY(20px); }
	.main_visual.no_data .swiper-slide:has(.bg_box.hospital_bg) .txt { padding-top: 70px; }
	section.main_visual .scroll_down { display: none; }
}
@media all and (min-width:1025px) and (max-height:720px){
	.main_visual { --hero-gap: 92px; }
	.main_visual .bg_box.default_bg { background-size: auto 53%, auto, cover, auto; }
	.main_visual.no_data .txt { padding-top: 30px; }
	.main_visual.no_data .swiper-slide:has(.bg_box.default_bg) .txt { transform: translateY(14px); }
	.main_visual.no_data .swiper-slide:has(.bg_box.hospital_bg) .txt { padding-top: 56px; }
	.main_visual .txt h2 { font-size: 42px; }
}

/* 히어로가 밝을 때는 최상단(투명) 헤더도 어두운 톤으로 바꾼다 (2026-09-02)
   ※ body.mv_light 는 main_visual.jsp 가 "메인비주얼 미등록(=밝은 기본 화면)" 일 때만 붙인다.
     헤더는 #main_wrap 바깥이라 CSS 로는 히어로 상태를 알 수 없어 클래스로 전달한다. */
body.mv_light #header:not(.on):not(.mega_on) {
	--header-text: #222;
	border-bottom-color: rgba(35,40,43,.10);
}
/* 로고도 흰색 실루엣을 풀고 원본 컬러로 */
body.mv_light #header:not(.on):not(.mega_on) .logo img { filter: none; }

.main_visual .txt_box {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	height: 100%;
}
.main_visual .txt_box .inner { width: 100%; }
.main_visual .txt { max-width: 760px; padding-top: 40px; }
.main_visual .txt h2 {
	margin: 0 0 20px;
	font-size: 54px;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.045em;
	color: #fff;
	word-break: keep-all;
}
/* 강조 : 어두운 사진 위이므로 딥 블루(--point-main) 보다 밝은 라이트 블루를 쓴다 */
.main_visual .txt .point {
	color: var(--point-sub, #5F94E0);
	font-weight: 700;
}
.main_visual .txt p {
	margin: 0;
	font-size: 21px;
	line-height: 1.7;
	letter-spacing: -0.03em;
	color: rgba(255,255,255,.82);
	word-break: keep-all;
}
.main_visual .mv_btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 40px;
	padding: 21px 42px;
	border-radius: var(--radius-sm, 6px);
	background: var(--m-btn-bg);
	color: var(--m-btn-fg);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
	box-shadow: 0 10px 26px rgba(12,30,66,.28);
	transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.main_visual .mv_btn i { font-size: 13px; transition: transform .25s ease; }
.main_visual .mv_btn:hover { background: var(--m-btn-bg-hover); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(12,30,66,.34); }
.main_visual .mv_btn:hover i { transform: translateX(3px); }

/* 페이지네이션
   ※ 아래 .mv_quick(예약 · 오시는 길 버튼) 과 같은 높이에 두면 버튼에 가려진다.
     width:auto 라 max-width 로는 좌우로 비껴가지 않으므로 버튼 위쪽으로 올린다. (2026-09-04) */
.main_visual .mv_pager {
	position: absolute;
	left: 50%;
	/* 사진(특히 흰 가운 · 밝은 벽) 위에서는 막대가 묻힌다 → 카드 바로 아래 흰 여백에 놓는다 (2026-09-04)
	   ※ 여백이 좁아지는 낮은 화면에서는 아래 미디어쿼리가 카드 안으로 되돌린다 */
	bottom: calc(var(--hero-gap, 0px) - 30px);
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 10px;
	width: auto;
	transform: translateX(-50%);
}
/* 인디케이터 : 3px 막대는 눈에 잘 안 띄고 누르기도 어려웠다 → 두께 · 길이를 키우고
   보이는 막대와 별개로 위아래 클릭 영역을 넓힌다 (2026-09-04) */
.main_visual .mv_pager .swiper-pagination-bullet {
	position: relative;
	width: 34px; height: 6px;
	border-radius: var(--radius-pill, 999px);
	background: rgba(255,255,255,.45);
	opacity: 1;
	cursor: pointer;
	transition: background-color .25s ease, width .25s ease, transform .25s ease;
}
/* 실제로 눌리는 범위 : 막대 위아래로 15px 씩 (세로 36px) */
.main_visual .mv_pager .swiper-pagination-bullet:before {
	content: '';
	position: absolute;
	left: -5px;
	right: -5px;
	top: -15px;
	bottom: -15px;
}
.main_visual .mv_pager .swiper-pagination-bullet:hover { background: rgba(255,255,255,.8); transform: scaleY(1.3); }
.main_visual .mv_pager .swiper-pagination-bullet-active {
	width: 58px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* ===== 히어로 하단 가운데 : 반투명 카드 버튼 (2026-09-02) ===== */
.main_visual .mv_quick {
	position: absolute;
	left: 50%;
	/* 사진 위가 아니라 카드 아래 흰 여백 한가운데에 놓는다 (2026-09-04)
	   ※ 여백이 좁아지는 낮은 화면(max-height:800)에서는 아래 미디어쿼리가 카드 안으로 되돌린다 */
	bottom: calc((var(--hero-gap, 112px) - 72px) / 2);
	/* 히어로와 함께 스크롤되며, 우측 퀵메뉴가 나오면 .is_out 으로 사라진다 */
	transition: opacity .3s ease, visibility .3s ease;
	z-index: 4;
	display: flex;
	align-items: center;      /* stretch 로 버튼이 늘어나는 것을 막는다 */
	gap: 12px;
	transform: translateX(-50%);
}
.main_visual .mv_quick.is_out { opacity: 0; visibility: hidden; }
/* 세로로 긴 카드는 인물 얼굴을 가려서 가로형 알약 버튼으로 (2026-09-02)
   ※ height 를 고정해 두어야 부모 flex 의 stretch 로 늘어나지 않는다 */
.main_visual .mv_quick_btn {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	gap: 12px;
	height: 72px;
	padding: 0 40px;
	border-radius: var(--radius, 10px);
	/* 투명한 느낌 : 배경이 비쳐 보이되 살짝 뿌옇게
	   ※ 배경(크림 · 흰 가운)이 밝아 흰 글자는 읽히지 않는다 → 짙은 글자 + 흰 베일 */
	background: rgba(255,255,255,.55);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
	border: 1px solid rgba(255,255,255,.9);
	box-shadow: 0 10px 26px rgba(28,44,56,.14);
	color: var(--m-ink);
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.main_visual .mv_quick_btn .ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	font-size: 21px;
	line-height: 1;
	color: var(--m-brand);
}
/* ※ 클래스명이 .txt 면 히어로 문구 블록(.main_visual .txt : padding-top 200px+) 규칙에 걸려
     글자가 버튼 아래로 밀려난다 → .lb 로 분리해 쓴다 */
.main_visual .mv_quick_btn .lb {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	white-space: nowrap;
}
.main_visual .mv_quick_btn:hover {
	background: rgba(255,255,255,.78);
	border-color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(28,44,56,.2);
}

/* 메인 : 히어로를 지나야 우측 퀵메뉴가 나타난다 (히어로 안에서는 위 버튼이 대신한다)
   ※ #site_quick 은 translateY(-50%) 로 세로 가운데를 잡으므로 transform 을 덮어쓸 때 함께 유지한다 */
@media all and (min-width:769px){
	.main_body #site_quick {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-50%) translateX(24px);
		transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
	}
	.main_body #site_quick.mv_show {
		opacity: 1;
		visibility: visible;
		transform: translateY(-50%) translateX(0);
	}
}

/* 스크롤 다운 */
.main_visual .scroll_down {
	position: absolute;
	left: 50%;
	bottom: 46px;
	z-index: 3;
	display: block;
	width: 1px;
	height: 52px;
	transform: translateX(-50%);
	background: rgba(255,255,255,.25);
	overflow: hidden;
}
.main_visual .scroll_down .line {
	position: absolute;
	left: 0; top: -52px;
	width: 100%; height: 52px;
	background: #fff;
	animation: scrollLine 2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes scrollLine {
	0%   { top: -52px; }
	60%  { top: 52px; }
	100% { top: 52px; }
}

/* ==========================================================================
   2. 주요 진료안내
   ========================================================================== */
/* 배경 사진 없이 CSS 그라디언트로만 구성 (2026-09-02)
   스크롤로 이 섹션이 올라오는 동안 흰색 톤에서 하늘색 톤으로 서서히 바뀐다.
    · 바탕(background)     : 흰색 — 시작 상태
    · :after (하늘색 레이어) : opacity 를 --svc-p (0~1) 로 올려 덧입힌다
    · --svc-p 는 index.jsp 의 스크롤 스크립트가 갱신한다 (JS 없이도 기본값 1 = 하늘색) */
.main_service {
	position: relative;
	padding-top: 140px;
	overflow: hidden;
	background: #FFFFFF;
	color: var(--m-ink);
}
/* 하늘색 톤 (스크롤 진행도만큼 덧입혀진다) */
.main_service:after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: var(--svc-p, 1);
	background:
		radial-gradient(78% 54% at 14% 10%, rgba(95,148,224,.22) 0%, rgba(95,148,224,0) 62%),
		radial-gradient(68% 50% at 88% 70%, rgba(74,126,214,.18) 0%, rgba(74,126,214,0) 64%),
		linear-gradient(180deg, #E4EDFA 0%, #F1F6FC 52%, #FFFFFF 100%);
	pointer-events: none;
}
/* 부드러운 곡선 한 줄 — 검진센터 배경의 파란 곡선과 결을 맞춘다 */
.main_service:before {
	content: '';
	position: absolute;
	left: -8%;
	right: -8%;
	top: 24%;
	z-index: 1;
	height: 62%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 100%);
}
.main_service .inner { position: relative; z-index: 2; }
.main_service .service_list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	/* 카드가 과하게 커지지 않도록 목록 폭을 제한하고 가운데 정렬한다 */
	max-width: 1080px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
/* 카드 : 아이콘 + 진료과명만 (넘버링 · 설명 · 자세히보기 제거 → 가운데 정렬)
   모양 : 대각선 두 모서리(좌상 · 우하)만 크게 굴린 사각형.
          radius 를 % 로 줘서 카드가 작아져도 비율이 그대로 유지된다. */
.main_service .service_list > li > a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1.12;   /* 폭에 맞춰 높이가 정해진다 (세로로 살짝 긴 사각형) */
	height: auto;
	padding: 28px 32px;
	background: #fff;
	border: 1px solid var(--m-line);
	border-radius: 22% 0 22% 0;
	box-shadow: 0 14px 30px rgba(31,58,102,.06);
	color: var(--m-ink);
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	/* 이징을 하나로 맞춰(가속 → 감속) 여러 속성이 따로 노는 느낌을 없앤다 (2026-09-04) */
	transition: border-color .45s cubic-bezier(.22,.61,.36,1),
	            box-shadow .45s cubic-bezier(.22,.61,.36,1),
	            transform .45s cubic-bezier(.22,.61,.36,1),
	            border-radius .55s cubic-bezier(.22,.61,.36,1);
}
/* hover 배경 : 옅은 브랜드 톤이 아래에서 차오른다 (배경색을 그냥 바꾸면 딱딱하게 끊긴다) */
.main_service .service_list > li > a:before {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 100%;
	background: linear-gradient(180deg, rgba(237,242,252,0) 0%, var(--m-brand-soft) 55%, var(--m-brand-soft) 100%);
	transform: translateY(101%);
	transition: transform .55s cubic-bezier(.22,.61,.36,1);
	pointer-events: none;
}
/* 빛 스침 : 대각선 하이라이트가 카드 위를 한 번 지나간다 */
.main_service .service_list > li > a:after {
	content: '';
	position: absolute;
	left: -60%;
	top: -20%;
	width: 42%;
	height: 140%;
	background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 100%);
	transform: skewX(-18deg);
	transition: left .75s cubic-bezier(.22,.61,.36,1);
	pointer-events: none;
}
/* 카드 안 요소는 두 레이어 위로
   ※ .more 는 이미 absolute 라 position 을 덮어쓰면 절대배치가 풀려 진료과명과 겹친다 → 개별 지정 */
.main_service .service_list > li > a .ico,
.main_service .service_list > li > a .tit { position: relative; z-index: 1; }
.main_service .service_list > li > a .more { z-index: 1; }

/* hover : 대각선 라운드가 모서리 둥근 사각형으로 펴지고, 테두리가 브랜드 컬러로 짙어진다
   ※ 네 값 모두 % 로 둬야 22% 0 22% 0 → 균등 라운드 사이가 부드럽게 보간된다 */
.main_service .service_list > li > a:hover {
	border-radius: 7% 7% 7% 7%;
	border-color: var(--m-brand);
	box-shadow:
		inset 0 0 0 1px var(--m-brand),
		0 26px 52px rgba(48,98,195,.22);
	transform: translateY(-10px);
}
.main_service .service_list > li > a:hover:before { transform: translateY(0); }
.main_service .service_list > li > a:hover:after { left: 120%; }
/* 아이콘 : 배경 원 없이 선만 — 카드 모양이 단순해 아이콘도 가볍게 둔다 */
.main_service .ico {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 84px;
	margin-bottom: 24px;
	color: var(--m-brand);
	font-size: 72px;
	/* 살짝 튀어오르는 느낌 : 되돌아올 때는 부드럽게 */
	transition: color .35s ease, transform .5s cubic-bezier(.34,1.4,.5,1);
}
.main_service .service_list > li > a:hover .ico {
	color: var(--m-brand-dark);
	transform: translateY(-10px) scale(1.12);
}
/* 자세히 보기 : 평소에는 감춰 두고 hover 때만 아래에서 떠오른다
   ※ 카드 높이가 고정(aspect-ratio)이라 흐름에 두면 글자가 밀린다 → 절대배치 */
.main_service .more {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 13%;
	display: block;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--m-brand);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .4s ease .05s, transform .5s cubic-bezier(.22,.61,.36,1) .05s;
	pointer-events: none;
}
.main_service .more i { font-style: normal; }
.main_service .service_list > li > a:hover .more {
	opacity: 1;
	transform: translateY(0);
}
/* 자세히 보기가 들어올 자리를 비워 두기 위해 진료과명을 살짝 올린다 */
.main_service .service_list > li > a:hover .tit { transform: translateY(-10px); color: var(--m-brand-dark); }
.main_service .tit {
	display: block;
	margin: 0;
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -0.035em;
	color: var(--m-ink);
	transition: transform .5s cubic-bezier(.22,.61,.36,1), color .35s ease;
}

/* ==========================================================================
   3. 검진센터 안내
   - 오른쪽 유리(글래스) 카드를 고르면 배경 · 왼쪽 내용이 함께 바뀐다
   ========================================================================== */
.main_checkup {
	position: relative;
	padding: 140px 0;
	min-height: 860px;
	display: flex;
	align-items: center;
	overflow: hidden;
	/* 섹션 공통 뒷배경 패턴 (항목별 색 레이어가 이 위에 반투명하게 얹힌다) */
	background: #fbfcfe url('/img/visual/main_bg_01.webp') no-repeat center center / cover;
	color: var(--m-ink);
}

/* 위 진료안내 섹션과 맞닿는 지점 (2026-09-02)
   두 섹션의 배경색이 비슷해 곡선 패턴이 경계선에서 뚝 잘린 것처럼 보였다.
   → 섹션 상단을 흰색으로 페이드해 패턴이 서서히 나타나게 한다.
     (진료안내 섹션 배경도 아래 끝이 #fff 로 수렴하도록 맞춰 두었다) */
.main_checkup:before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 240px;
	z-index: 1;
	background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.74) 32%, rgba(255,255,255,0) 100%);
	pointer-events: none;
}

/* ----- 배경 : 카드별로 전환 ----- */
.main_checkup .ck_bg { position: absolute; inset: 0; z-index: 0; }
.main_checkup .ck_bg_item {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 1.1s ease, transform 1.6s cubic-bezier(.22,.61,.36,1);
}
.main_checkup .ck_bg_item.on { opacity: 1; transform: scale(1); }


/* 검진 항목별 배경 (아주 옅은 반투명 레이어 — 뒷배경의 파란 곡선이 살아 보이도록)
   ※ 불투명도를 올리면 곡선이 묻힌다. 항목 구분은 밝기 차이로만 준다. */
.main_checkup .ck_bg_item[data-idx="0"] { background:
	radial-gradient(52% 46% at 78% 22%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 70%),
	linear-gradient(130deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.14) 52%, rgba(255,255,255,.2) 100%); }
.main_checkup .ck_bg_item[data-idx="1"] { background:
	radial-gradient(54% 48% at 72% 74%, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 70%),
	linear-gradient(140deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.16) 54%, rgba(255,255,255,.22) 100%); }
.main_checkup .ck_bg_item[data-idx="2"] { background:
	radial-gradient(56% 50% at 82% 28%, rgba(255,255,255,.36) 0%, rgba(255,255,255,0) 70%),
	linear-gradient(125deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.12) 56%, rgba(255,255,255,.18) 100%); }
.main_checkup .ck_bg_item[data-idx="3"] { background:
	radial-gradient(52% 46% at 84% 24%, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 70%),
	linear-gradient(135deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.15) 55%, rgba(255,255,255,.21) 100%); }
.main_checkup .ck_bg_item[data-idx="4"] { background:
	radial-gradient(56% 50% at 76% 70%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 70%),
	linear-gradient(120deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.13) 54%, rgba(255,255,255,.19) 100%); }
.main_checkup .ck_bg_item[data-idx="5"] { background:
	radial-gradient(52% 46% at 70% 78%, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 70%),
	linear-gradient(145deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.16) 54%, rgba(255,255,255,.22) 100%); }
.main_checkup .ck_bg_item[data-idx="6"] { background:
	radial-gradient(56% 50% at 80% 26%, rgba(255,255,255,.36) 0%, rgba(255,255,255,0) 70%),
	linear-gradient(130deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.12) 56%, rgba(255,255,255,.18) 100%); }
.main_checkup .ck_bg_item[data-idx="7"] { background:
	radial-gradient(52% 46% at 74% 72%, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 70%),
	linear-gradient(150deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.16) 55%, rgba(255,255,255,.22) 100%); }
/* ----- 사진이 등록된 항목의 배경 -----
   ※ [data-idx] 규칙보다 반드시 뒤에 와야 덮이지 않는다.

   화질 대책 : 섹션이 세로로 길어(≈1400px) cover 로 채우면 원본(1920x840)이 1.6배까지 늘어난다.
   그래서 사진을 섹션 전체가 아니라 "위쪽 우측"에 원본 크기(≈1.08배)로 얹고,
   아래·왼쪽은 마스크와 오버레이로 브랜드 컬러 배경에 녹여 이어붙인다. → 확대가 거의 없어 선명하다. */
.main_checkup .ck_bg_item.has_img {
	/* 반투명이어야 섹션 뒷배경 패턴(main_bg_01)이 비쳐 보인다 */
	background:
		radial-gradient(60% 50% at 18% 62%, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 72%),
		linear-gradient(150deg, rgba(255,255,255,.48) 0%, rgba(248,248,249,.32) 52%, rgba(240,240,242,.38) 100%);
}
/* 배경 인물 레이어 — 왼쪽 텍스트 쪽에 세운다 (2026-09-02)
   ※ 여기 쓰는 이미지는 카드 썸네일과 다른 파일이다.
     ckList[5] 의 `_02` = 배경을 지운 투명 이미지이고, 투명 여백까지 잘라내
     피사체로 꽉 채워 두었다(/img/visual/origin 에 원본 보관).
     그래서 마스크로 가장자리를 지울 필요가 없고, 사진마다 위치를 따로 잡을 필요도 없다.
   ※ 배경 있는 사진을 여기 쓰면 사각형 경계가 그대로 드러난다 — 반드시 `_02` 를 쓸 것. */
.main_checkup .ck_bg_item.has_img::before {
	content: '';
	position: absolute;
	/* 섹션 오른쪽(설명 블록 옆 · 카드 줄 위) 에 세운다 (2026-09-02 왼쪽에서 이동)
	   ※ 오른쪽 끝은 .inner 와 같은 라인에 맞춘다 (max-width:1400px 가운데 정렬)
	   ※ 아래쪽은 카드 줄 위에서 끝나도록 bottom 을 띄운다
	   --ck-bg-x : 사진마다 피사체 위치가 달라 개별 보정이 필요할 때 쓰는 오프셋 */
	right: calc(max(2%, (100% - 1400px) / 2) + var(--ck-bg-x, 0px));
	/* 위 : 섹션 상단 여백 아래부터 / 아래 : 카드 줄 위에서 끝난다
	   (카드 한 변 ≈166px + 자세히보기 영역 ≈150px + 섹션 아래 여백 140px) */
	top: 40px;
	bottom: 456px;
	width: min(46%, 660px);   /* .inner(1400px) 의 오른쪽 절반 */
	/* --ck-bg-size : 기본은 contain(영역 안에 다 들어옴).
	   가로로 긴 사진은 contain 이면 세로가 남아 작아 보이므로 아래에서 높이 기준으로 키운다 */
	background: var(--ck-img) no-repeat center bottom / var(--ck-bg-size, contain);
	/* 가장자리는 페이드해 배경에 녹인다.
	   ※ 위쪽은 길게 — 사진을 키워 영역 밖으로 넘칠 때 수평으로 뚝 잘린 선이 보이기 때문
	   ※ 좌우 · 가운데는 얕게 둬서 사진이 흐려지지 않게 한다 */
	-webkit-mask-image:
		linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 12%, rgba(0,0,0,.62) 26%, #000 40%, #000 100%),
		linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 7%, #000 16%, #000 84%, rgba(0,0,0,.6) 93%, transparent 100%);
	        mask-image:
		linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 12%, rgba(0,0,0,.62) 26%, #000 40%, #000 100%),
		linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 7%, #000 16%, #000 84%, rgba(0,0,0,.6) 93%, transparent 100%);
	-webkit-mask-composite: source-in;      /* 두 마스크가 겹치는 부분만 남김 */
	        mask-composite: intersect;
}
/* 가로로 긴 사진(신혼부부 1194x657 · 기업체 1400x670)은 contain 이면 세로가 남아 작아 보인다
   → 높이 기준으로 채워 키우고, 좌우로 넘치는 부분은 위 마스크가 부드럽게 지운다 */
.main_checkup .ck_bg_item[data-idx="3"],
.main_checkup .ck_bg_item[data-idx="4"],
.main_checkup .ck_bg_item[data-idx="5"],
.main_checkup .ck_bg_item[data-idx="7"] { --ck-bg-size: auto 108%; }

/* 레이아웃 (2026-09-02 개편)
   위 : 왼쪽 설명 + 오른쪽 배경 인물 사진 자리 / 가운데 : 정사각형 카드 한 줄 / 아래 : 자세히 보기 */
.main_checkup .inner {
	position: relative;
	z-index: 2;
	display: block;
}
.main_checkup .ck_top {
	display: grid;
	/* 오른쪽 절반은 비워 두고 배경 인물 사진(.ck_bg_item.has_img::before)이 자리한다 */
	grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
	align-items: center;
	min-height: 400px;
	margin-bottom: 54px;
}
.main_checkup .ck_foot { margin-top: 44px; text-align: center; }

/* ----- 왼쪽 : 선택된 검진 내용 ----- */
.main_checkup .sec_tit { margin-bottom: 40px; font-size: 52px; color: var(--m-ink); }
.main_checkup .sec_tit .point { color: var(--m-brand); }

.main_checkup .ck_panels { position: relative; min-height: 380px; }
.main_checkup .ck_panel {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transform: translateY(18px);
	transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1), visibility .55s;
}
.main_checkup .ck_panel.on {
	position: relative;
	opacity: 1;
	visibility: visible;
	transform: none;
}
.main_checkup .ck_tit {
	display: block;
	font-size: 46px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.25;
}
.main_checkup .ck_lead {
	margin: 14px 0 0;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.035em;
	color: #2f3a48;
	word-break: keep-all;
}
.main_checkup .ck_desc {
	margin: 20px 0 0;
	max-width: 620px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: -0.02em;
	color: #414b57;
	word-break: keep-all;
}
.main_checkup .ck_btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.main_checkup .ck_btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 20px 42px;
	border-radius: var(--radius-sm, 6px);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* 브랜드 블루로 채운 버튼 (2026-09-02, 이전 페일 블루 배경 + 짙은 블루 글자) */
.main_checkup .ck_btn.primary {
	border: 1px solid var(--m-brand);
	background: var(--m-brand);
	color: #fff;
	box-shadow: 0 10px 24px rgba(48,98,195,.22);
}
.main_checkup .ck_btn.primary:hover {
	border-color: var(--m-brand-dark);
	background: var(--m-brand-dark);
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(48,98,195,.3);
}
.main_checkup .ck_btn .arrow {
	display: block;
	width: 7px;
	height: 7px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}

/* ----- 오른쪽 : 유리(글래스) 카드 ----- */
/* 8개 항목을 정사각형 카드로 한 줄에 나열한다 (2026-09-02) */
.main_checkup .ck_cards {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* 유리 카드 : 배경이 비쳐 보이되 뒤가 살짝 뿌옇게 흐려지는 질감 */
.main_checkup .ck_card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	aspect-ratio: 1 / 1;             /* 정사각형 */
	padding: 0 8px 16px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.85);
	border-radius: var(--radius, 10px);
	background: rgba(255,255,255,.42);
	backdrop-filter: blur(20px) saturate(135%);
	-webkit-backdrop-filter: blur(20px) saturate(135%);
	box-shadow: 0 8px 24px rgba(28,52,92,.09), inset 0 1px 0 rgba(255,255,255,.9);
	color: var(--m-ink);
	text-align: center;
	cursor: pointer;
	transition: background-color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, color .35s ease;
}
.main_checkup .ck_card:hover {
	background: rgba(255,255,255,.66);
	border-color: #fff;
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(28,52,92,.14), inset 0 1px 0 rgba(255,255,255,.9);
}
/* 선택 : 배경을 채우지 않고 테두리로 표시한다 (2026-09-02)
   ※ border 를 굵히면 1px 만큼 레이아웃이 흔들리므로 inset 그림자로 두께를 더한다 */
.main_checkup .ck_card.on {
	background: rgba(255,255,255,.78);
	border-color: var(--m-brand);
	color: var(--m-brand);
	box-shadow:
		inset 0 0 0 1px var(--m-brand),
		0 12px 28px rgba(48,98,195,.18);
}
.main_checkup .ck_card strong {
	display: block;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 1.3;
	word-break: keep-all;
}

/* ----- 이미지가 있는 카드 : 위쪽 사진 + 아래쪽 타이틀 ----- */
.main_checkup .ck_card .ck_txt {
	display: block;
	position: relative;
	z-index: 1;                      /* 사진 위로 올린다 */
	width: 100%;
	transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

.main_checkup .ck_thumb {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 76%;
	background-image: var(--ck-img);
	/* 카드가 작아 피사체를 크게 잡아야 무엇인지 읽힌다.
	   ※ 사진마다 피사체 위치가 달라 가로위치는 index.jsp 의 ckList 에서 카드별로 넘긴다
	     (--ck-pos, 기본 96% / 여성정밀 · 기업체는 62%) */
	background-size: auto 150%;
	background-position: var(--ck-pos, 96%) 20%;
	/* 아래(글자 쪽)로 갈수록 사라지게 → 유리 카드 배경과 경계 없이 이어진다 */
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.45) 78%, transparent 100%);
	        mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.45) 78%, transparent 100%);
	opacity: .92;
	transform: scale(1);
	transition: opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1);
	pointer-events: none;
}
/* 선택돼도 카드 사진은 그대로 두고 테두리로만 표시한다 (2026-09-02)
   ※ 예전에는 사진을 지워 "카드 속 이미지가 배경으로 옮겨가는" 연출을 했으나,
     카드가 비어 보여 선택 상태가 오히려 약해졌다. 사진은 살짝 또렷해지기만 한다. */
.main_checkup .ck_card.has_img.on .ck_thumb {
	opacity: 1;
}

/* ==========================================================================
   3-1. 최우수 등급 배너 (검진센터 ↔ 의료진 사이)
   ========================================================================== */
/* 배경 사진 없이 로고 블루 단색으로 채운다 (2026-09-02)
   — 위아래 흰 섹션 사이에서 색면 하나로 끊어 주는 역할 */
.main_banner {
	position: relative;
	padding: 116px 0;
	background: var(--m-brand);
	color: #fff;
	text-align: center;
	overflow: hidden;
}
/* 배경 워터마크 : 로고 심볼을 좌우에 크게 깐다 (2026-09-02)
   ※ 로고 원본이 파란색이라 파란 배경에서는 묻힌다 → 흰색 실루엣으로 바꿔 아주 옅게 얹는다 */
.main_banner:before,
.main_banner:after {
	content: '';
	position: absolute;
	top: 50%;
	width: 380px;
	height: 380px;
	background: url('/img/logo_02.png') no-repeat center center / contain;
	filter: brightness(0) invert(1);
	opacity: .1;
	pointer-events: none;
}
.main_banner:before { left: -70px; transform: translateY(-50%) rotate(-8deg); }
.main_banner:after { right: -70px; transform: translateY(-50%) rotate(8deg) scaleX(-1); }
.main_banner .inner { position: relative; z-index: 1; }
.main_banner .bn_txt { margin: 0; }
.main_banner .bn_tit {
	display: block;
	margin-bottom: 26px;
	font-size: 58px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.25;
}
.main_banner .bn_line {
	display: block;
	font-size: 29px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: -0.02em;
	word-break: keep-all;
	color: rgba(255,255,255,.88);
}
/* 강조 : 블루 단색 배경 위에서는 본문을 살짝 낮추고 강조만 순백 · 굵게 올린다
   (배경이 이미 브랜드 컬러라 다른 색을 얹으면 오히려 탁해진다) */
.main_banner .bn_line .point {
	font-style: normal;
	font-weight: 700;
	color: #fff;
}

/* ==========================================================================
   4. 의료진 소개 (2026-09-03 전면 개편 — 슬라이더 → 프레임 카드 지그재그)
   - 마크업 : /include/doctor_main.jsp
   - 세로 프레임(도형) 안에 인물을 세우고, 사진이 프레임 아래로 넘쳐 입체감을 준다
   - 짝수 번째 카드를 내려 지그재그 리듬을 만든다
   ※ 상세 페이지(/about/doctor)의 슬라이더는 doctor_page.css 를 그대로 쓴다
   ========================================================================== */
.main_doctor { padding-bottom: 110px; }
.main_doctor .inner { position: relative; z-index: 2; }

/* PC : 화면 좌우를 꽉 채워 한 줄에 전원 노출 (슬라이드는 1024px 이하에서만)
   ※ .inner(1400px) 안에 있지만 음수 마진으로 화면 전체 폭을 쓴다 */
.doc_main {
	position: relative;
	width: 100vw;
	margin: 10px calc(-50vw + 50%) 0;
}
/* ※ 인물이 상자 아래로 삐져나오므로 뷰포트 아래쪽에 여유를 준다.
     overflow 는 padding box 를 기준으로 자르므로 padding 안쪽은 잘리지 않는다. */
.doc_viewport {
	overflow: hidden;
	padding: 0 10px 20px;
}
.doc_list {
	display: flex;
	/* 인물 사이 간격 (2026-09-09 : 12 → 4). 사진 자체에 여백이 있어 더 붙여도 답답하지 않다 */
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform .55s cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}
/* 카드 폭은 8장 기준으로 고정한다 (2026-09-14)
   ※ 예전에는 flex:1 로 전원을 한 줄에 균등 배치해서, 의료진이 늘어날수록 카드 · 사진이 계속 작아졌다.
     (9명 → 11명이 되면서 사진이 눈에 띄게 줄었고, 앞으로도 계속 추가될 예정)
     이제 8장이 넘으면 좌우 화살표로 넘겨 본다 — 컨트롤은 JS 가 넘길 게 없으면 버튼을 비활성화한다. */
.doc_list > li { flex: 0 0 calc((100% - 28px) / 8); min-width: 0; }
.doc_ctrl { display: flex; }

/* ----- 슬라이드 컨트롤 : 진행바 + 좌우 버튼 (1024px 이하에서 노출) ----- */
.doc_ctrl {
	align-items: center;
	gap: 28px;
	margin-top: 30px;
	padding: 0 24px;
}
.doc_bar {
	position: relative;
	flex: 1 1 auto;
	height: 2px;
	background: var(--m-line);
	overflow: hidden;
}
.doc_bar_fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 30%;
	background: var(--m-brand);
	transition: left .55s cubic-bezier(.22,.61,.36,1), width .3s ease;
}
.doc_btns { display: flex; flex: 0 0 auto; gap: 10px; }
.doc_nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 1px solid var(--m-line);
	border-radius: 50%;
	background: #fff;
	color: var(--m-ink);
	font-size: 15px;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}
.doc_nav:hover { background: var(--m-brand); border-color: var(--m-brand); color: #fff; }
.doc_nav:disabled { opacity: .28; cursor: default; }
.doc_nav:disabled:hover { background: #fff; border-color: var(--m-line); color: var(--m-ink); }

.doc_item > .doc_open {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

/* ----- 카드 : 인물이 카드 안에 온전히 담기고, 이름은 아래쪽 그라디언트 위에 얹힌다 -----
   ※ 예전처럼 사진을 상자 밖으로 빼지 않는다 — 정돈된 화면이 더 차분하고 고급스럽다. */
.doc_frame {
	position: relative;
	display: block;
	/* 높이는 사진 틀(.doc_photo, 폭 기준 630:1000) + 라벨(110px) 이 정한다 (2026-09-14)
	   ※ 예전 고정 높이(620px)는 사진 위에 빈 공간만 남기고 있었다. */
	height: auto;
	overflow: hidden;
	/* 인물 뒤 카드 배경(그라디언트 · 모서리)은 쓰지 않는다 — 사진만 놓인 것처럼 보이게 (2026-09-09) */
	background: none;
	transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
/* 카드 아래쪽 흰 그라디언트는 쓰지 않는다 (2026-09-09)
   사진을 잘라내지 않고(contain) 아래에 이름 자리를 비워 두므로, 사진을 덮어 흐리게 만들 이유가 없다. */
.doc_frame:after { display: none; }
.doc_item > .doc_open:hover .doc_frame { transform: translateY(-10px); }

/* 카드 아래 : 진료과 + 이름 */
.doc_label {
	position: relative;
	/* 사진 틀 바로 아래에 고정 높이로 이어 붙인다 → 직책 줄 수가 달라도 카드마다 진료과 · 이름 높이가 같다 */
	height: 110px;
	z-index: 3;
	display: block;
	padding: 10px 10px 0;
	text-align: center;
}
.doc_label .d_part {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: -0.05em;
	line-height: 1.3;
	color: var(--doc-tone, var(--m-brand));
	word-break: keep-all;
}
.doc_label .d_name {
	display: block;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--m-ink);
}
/* 직책 · 직책2 : 모달을 열지 않아도 카드에서 바로 보이게 (2026-09-09)
   ※ 카드가 좁아 둘을 이어 붙이면 가운뎃점에서 어중간하게 끊긴다 → 한 줄에 하나씩,
     그래도 넘치면 말줄임(…)으로 처리해 줄 수가 늘어나지 않게 한다. */
.doc_label .d_pos { display: block; margin-top: 4px; }
.doc_label .d_pos em {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.05em;
	color: var(--m-gray);
}

/* ----- 인물 사진 : 카드 안 바닥에 세운다 ----- */
.doc_photo {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	/* 사진 틀은 630:1000 (촬영 원본 규격) 으로 고정한다 (2026-09-14)
	   ※ 예전(contain)에는 원본 비율이 다른 사진이 올라오면 그 카드만 작게 그려졌다.
	     (장석원 원장 사진을 관리자에서 다시 올리자 가로가 넓은 원본이라 혼자 작아진 사례)
	     이제 어떤 비율의 사진을 올려도 틀 크기는 같고, 넓은 사진은 좌우가 · 긴 사진은 발 쪽이 잘린다.
	   ※ 사진 아래 라벨(진료과 · 이름 · 직책)은 .doc_label 이 흐름으로 이어진다. */
	aspect-ratio: 630 / 1000;
	overflow: hidden;
	transform-origin: bottom center;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.doc_photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;   /* 머리가 잘리지 않도록 위를 기준으로 */
}
/* hover : 인물만 살짝 확대 */
.doc_item > .doc_open:hover .doc_photo { transform: scale(1.05); }
/* 사진 미등록 */
.doc_photo.no_photo {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 20px;
	color: var(--m-line);
	font-size: 60px;
}

/* ----- 프레임 색 : 브랜드 블루 계열 4가지를 순환 ----- */
.doc_item[data-tone="0"] { --doc-tone: var(--point-main, #4A7ED6);      --doc-tone-soft: #EDF3FD; }
.doc_item[data-tone="1"] { --doc-tone: var(--point-sub, #5F94E0);       --doc-tone-soft: #F0F5FD; }
.doc_item[data-tone="2"] { --doc-tone: var(--point-main-dark, #3767BE); --doc-tone-soft: #EBF1FC; }
.doc_item[data-tone="3"] { --doc-tone: #6FB2C9;                         --doc-tone-soft: #EDF6F9; }

/* ----- 약력 모달 ----- */
body.dm_open { overflow: hidden; }
/* 모달(.dm_modal, z-index:200)이 .main_scroll 안에 있어, 바깥에서 더 높은 z-index 를 가진
   푸터·헤더에 덮이던 문제가 있었다 ("의료진을 누르면 오시는 길 밑으로 들어감").
   모달이 열린 동안에만 섹션 전체를 그 위로 올린다. (2026-09-04)
   ※ position 을 함께 지정한다 — .main_scroll 은 평소 static 이라 z-index 만으로는 먹지 않고
     헤더(z-index:100)가 모달을 덮는다. (2026-09-07) */
body.dm_open .main_scroll { position: relative; z-index: 300; }
.dm_modal { position: fixed; inset: 0; z-index: 200; }
.dm_dim { position: absolute; inset: 0; background: rgba(16,26,38,.55); }
.dm_box {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	gap: 36px;
	width: min(920px, calc(100% - 40px));
	max-height: min(720px, calc(100% - 60px));
	padding: 44px 48px;
	border-radius: var(--radius-sm, 6px);
	background: #fff;
	box-shadow: 0 30px 70px rgba(16,26,38,.3);
	transform: translate(-50%, -50%);
	overflow-y: auto;
}
.dm_close {
	position: absolute;
	right: 18px;
	top: 18px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--m-bg-soft);
	color: var(--m-ink);
	font-size: 17px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.dm_close:hover { background: var(--m-ink); color: #fff; }
/* 왼쪽 컬럼 : 사진 + 진료일정 (colon 의료진 팝업과 같은 구성, 2026-09-07) */
.dm_left {
	flex: 0 0 320px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}
.dm_photo {
	border-radius: var(--radius, 10px);
	background: linear-gradient(180deg, #FFFFFF 0%, var(--m-brand-soft) 100%);
	line-height: 0;
	overflow: hidden;
}
.dm_photo img { display: block; width: 100%; height: auto; }

/* ----- 진료일정 표 ----- */
.dm_sched .ds_tit {
	display: block;
	margin-bottom: 10px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--m-ink);
}
.dm_sched .ds_table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.dm_sched .ds_table th,
.dm_sched .ds_table td {
	padding: 5px 1px;
	border: 1px solid var(--m-line);
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: -0.05em;
	word-break: keep-all;
}
.dm_sched .ds_table thead th {
	background: var(--m-brand);
	border-color: var(--m-brand);
	color: #fff;
	font-weight: 600;
}
/* 오전 · 오후 */
.dm_sched .ds_table tbody th {
	width: 17.5%;
	background: var(--m-brand-soft);
	color: var(--m-brand);
	font-weight: 600;
}
.dm_sched .ds_table td span {
	display: block;
	padding: 4px 1px;
	border-radius: 12px;
	/* 가독성 : S-Core Dream 은 400~500 이 얇아 작은 글자가 흐려 보인다 → 600 (2026-09-14)
	   ※ 크기는 11px 유지 — 12px 이면 '5시까지' 가 칸 안에서 어색하게 꺾인다 */
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	/* '교대진료' · '예약 후 진료' 처럼 긴 값은 칸 안에서 두 줄로 접는다 (colon 과 동일) */
	word-break: break-all;
}
/* 진료 · 예약 후 진료만 강조 (colon 과 동일), 휴진은 흐리게, 나머지는 연한 배지 */
.dm_sched .ds_table td span.on  { background: var(--m-brand); color: #fff; }
.dm_sched .ds_table td span.etc { background: var(--m-brand-soft); color: var(--m-brand); }
.dm_sched .ds_table td span.off { color: #6b737a; }
.dm_sched .ds_note {
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.03em;
	color: #555c63;
}
.dm_body { flex: 1 1 auto; min-width: 0; padding-top: 6px; }
.dm_body .dm_part {
	display: block;
	margin-bottom: 8px;
	font-size: 17px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: -0.03em;
	color: var(--m-brand);
}
/* 직책 · 직책2 (관리자 > 의료진관리) : 진료과와 이름 사이 (2026-09-09) */
.dm_body .dm_pos {
	display: block;
	margin-bottom: 6px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.03em;
	color: var(--m-gray);
	word-break: keep-all;
}
.dm_body .dm_name {
	display: block;
	margin-bottom: 24px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--m-line);
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--m-ink);
}
/* 가독성 : 얇은 400 + 회색은 흐려 보여 500 + 진한 잉크색으로 (2026-09-14) */
.dm_career { font-size: 17px; font-weight: 500; line-height: 1.85; letter-spacing: -0.02em; color: #2a2f34; }
.dm_career p { margin: 0 0 6px; }
/* 약력은 관리자가 다른 사이트 · 문서에서 복사해 붙이는 경우가 많아
   본문에 인라인 스타일(font-size · font-family · line-height · color)이 섞여 들어온다.
   그대로 두면 의료진마다 글자 크기 · 줄간격이 달라 보이므로 여기서 본문 서식으로 통일한다.
   ※ 굵게(b · strong)는 그대로 살린다. (2026-09-09) */
.dm_career * {
	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	color: inherit !important;
	background: none !important;
}
.dm_career ul,
.dm_career ol { margin: 0; padding: 0; list-style: none; }
.dm_career li { margin: 0 0 6px; }

/* 좁은 화면 : 사진 · 진료일정을 위로, 약력을 아래로 (2026-09-07) */
@media all and (max-width:900px){
	.dm_box {
		flex-direction: column;
		gap: 24px;
		padding: 40px 24px 30px;
		max-height: calc(100% - 40px);
	}
	.dm_left { flex: 0 0 auto; align-items: stretch; }
	.dm_photo { max-width: 220px; margin: 0 auto; }
	.dm_body { padding-top: 0; }
	.dm_body .dm_name { margin-bottom: 18px; padding-bottom: 16px; font-size: 26px; }
	.dm_career { font-size: 15px; line-height: 1.75; }
}

/* ==========================================================================
   반응형
   ========================================================================== */
@media all and (max-width:1400px){
	.main_visual .mv_pager { left: 2%; width: auto; transform: none; }
}

@media all and (max-width:1200px){
	.main_sec { padding: 100px 0; }
	.main_sec .sec_tit { font-size: 35px; }
	.main_visual .txt h2 { font-size: 42px; }
	/* 퀵메뉴가 하단 바로 바뀌는 구간부터는 우측 여백 불필요 */
	.main_checkup { padding: 110px 0; min-height: 0; }
	/* 설명 블록이 전체 폭을 쓰므로 배경 인물 사진은 감춘다 (글자와 겹친다) */
	.main_checkup .ck_top { grid-template-columns: 1fr; min-height: 0; margin-bottom: 40px; }
	.main_checkup .ck_bg_item.has_img::before { display: none; }
	.main_checkup .ck_cards { grid-template-columns: repeat(4, 1fr); }
	.main_checkup .sec_tit { margin-bottom: 28px; font-size: 35px; }
	.main_checkup .ck_panels { min-height: 0; }
	.main_checkup .ck_tit { font-size: 29px; }
	.doc_frame { height: 470px; }
	.doc_label .d_name { font-size: 17px; }
	.main_banner { padding: 92px 0; }
	.main_banner .bn_tit { font-size: 44px; margin-bottom: 20px; }
	.main_banner .bn_line { font-size: 23px; }
}

@media all and (max-width:1024px){
	/* 원형은 3열을 유지한다 — 1열로 떨어뜨리면 원 하나가 화면을 꽉 채워 버린다 */
	.main_service .service_list { gap: 18px; }
	.main_service .service_list > li > a { padding: 24px; }
	.main_service .tit { font-size: 20px; }

	/* 의료진 : 한 줄에 다 넣기엔 좁아지는 구간 → 슬라이드로 전환 (4장씩) */
	.doc_list > li { flex: 0 0 calc((100% - 36px) / 4); }
	.doc_ctrl { display: flex; }
}

/* ==========================================================================
   모바일 (768px 이하)
   - 세로로 한없이 길어지지 않도록 카드는 가로형 · 2열로 눕히고 섹션 여백을 줄인다
   - 글자는 작게 줄이기보다 위계(크기 차이)를 좁혀 읽기 쉽게 둔다
   ========================================================================== */
@media all and (max-width:768px){
	.main_sec { padding: 62px 0; }
	.main_sec .sec_head { margin-bottom: 30px; }
	.main_sec .sec_tit { font-size: 27px; margin-bottom: 12px; }
	.main_sec .sec_desc { font-size: 16px; line-height: 1.6; }

	/* 히어로가 화면을 거의 다 차지하지 않도록 높이를 줄인다 */
	/* 좌우는 PC 와 동일하게 화면 끝까지 (2026-09-07) */
	.main_visual { --hero-gap: 14px; height: 72vh; min-height: 440px; padding: var(--header-height, 84px) var(--hero-gap-x) var(--hero-gap); }
	.main_visual .swiper-container.swiper_slider { border-radius: 0; }
	/* ※ 높이 기준(auto N%)으로 두면 사진 폭이 화면보다 넓어져 좌우가 잘린다
	     → 폭 기준(100% auto)으로 바꿔 단체사진이 온전히 들어오게 한다 */
	.main_visual .bg_box.default_bg { background-size: 100% auto, auto, cover, auto; }
	/* 모바일 : 문구를 위쪽이 아니라 화면 세로 가운데에 둔다 (2026-09-03)
	   ※ PC 는 사진 속 인물 · 데스크를 피해 문구를 위로 올리지만,
	     좁은 화면에서는 문구 아래가 크게 비어 보여 가운데가 자연스럽다 */
	.main_visual.no_data .txt_box { align-items: center; }
	.main_visual.no_data .txt { padding-top: var(--header-height, 118px); padding-bottom: var(--header-height, 118px); }
	/* 이미 세로 가운데라 PC 에서 준 아래 이동은 되돌린다 (2026-09-08) */
	.main_visual.no_data .swiper-slide:has(.bg_box.default_bg) .txt { transform: none; }
	/* 문구가 가운데로 내려오면 사진 속 벽면 로고와 겹친다 → 흰 베일을 화면 전체로 깔아 문구를 띄운다
	   (PC 는 문구가 위쪽이라 상단 62% 베일로 충분하다) */
	.main_visual .bg_box.hospital_bg:before {
		height: 100%;
		background: linear-gradient(180deg,
			rgba(255,255,255,.88) 0%,
			rgba(255,255,255,.76) 50%,
			rgba(255,255,255,.45) 100%);
	}
	.main_visual .txt h2 { font-size: 28px; margin-bottom: 16px; }
	.main_visual .txt p { font-size: 15px; }
	.main_visual .mv_btn { margin-top: 30px; padding: 15px 28px; font-size: 15px; }
	.main_visual .mv_pager { bottom: 100px; }
	.main_visual .scroll_down { bottom: 40px; height: 40px; }
	/* 모바일은 하단 고정 퀵바가 항상 떠 있으므로 히어로 버튼은 감춘다 */
	.main_visual .mv_quick { display: none; }

	/* 진료안내 : 정사각형 3장을 세로로 쌓으면 화면 두 개 분량이 된다
	   → 아이콘 왼쪽 · 진료과명 오른쪽의 가로형 줄로 눕힌다 (3줄 ≈ 300px) */
	.main_service { padding-top: 62px; }
	.main_service .service_list { grid-template-columns: 1fr; gap: 12px; }
	.main_service .service_list > li > a {
		flex-direction: row;
		justify-content: flex-start;
		aspect-ratio: auto;
		height: 92px;
		max-width: none;
		padding: 0 22px;
		border-radius: 16px 0 16px 0;
	}
	.main_service .service_list > li > a:hover { border-radius: 12px; transform: none; }
	.main_service .ico { height: auto; margin: 0 16px 0 0; font-size: 30px; }
	.main_service .tit { font-size: 19px; }
	/* 터치 기기에는 hover 가 없어 "자세히 보기" 가 뜰 일이 없다 → 자리만 차지하므로 감춘다 */
	.main_service .more { display: none; }
	.main_service .service_list > li > a:hover .tit { transform: none; }

	/* 검진센터 : 카드 2열(4줄) + 살짝 납작한 비율로 세로 길이를 줄인다 */
	.main_checkup { padding: 62px 0; }
	.main_checkup .ck_top { margin-bottom: 26px; }
	.main_checkup .sec_tit { font-size: 27px; margin-bottom: 18px; }
	.main_checkup .ck_tit { font-size: 23px; }
	.main_checkup .ck_lead { font-size: 16px; margin-top: 10px; }
	.main_checkup .ck_desc { font-size: 15px; margin-top: 12px; line-height: 1.7; }
	.main_checkup .ck_btn { padding: 14px 24px; font-size: 15px; }
	.main_checkup .ck_cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.main_checkup .ck_card { aspect-ratio: 1 / 0.84; padding: 0 8px 12px; }
	.main_checkup .ck_card strong { font-size: 16px; }
	.main_checkup .inner { display: flex; flex-direction: column; }
	.main_checkup .ck_top { order: 1; }
	.main_checkup .ck_right { order: 2; }
	/* 좁은 화면 : "자세히 보기" 버튼 대신 카드를 누르면 바로 해당 검진 페이지로 간다 (2026-09-03)
	   ※ 이동은 index.jsp 의 카드 클릭 핸들러가 처리한다 (같은 768px 기준) */
	.main_checkup .ck_foot { display: none; }

	.main_doctor { padding-bottom: 56px; }
	.doc_list { gap: 14px; }
	.doc_list > li { flex-basis: calc((100% - 14px) / 2); }
	.doc_viewport { padding-bottom: 20px; }
	.doc_ctrl { gap: 16px; margin-top: 24px; padding: 0; }
	.doc_nav { width: 42px; height: 42px; }
	/* 카드가 작아 이름이 사진 위에 겹치면 읽기 어렵다 → 사진 아래로 내린다 */
	.doc_frame {
		height: auto;
		overflow: visible;
		background: none;
	}
	.doc_frame:after { display: none; }   /* 사진 위 흰 그라디언트 띠 불필요 */
	.doc_photo {
		aspect-ratio: 630 / 1000;   /* PC 와 같은 틀 (2026-09-14) */
		border-radius: var(--radius, 10px);
		overflow: hidden;
		background: linear-gradient(180deg, #FFFFFF 0%, var(--doc-tone-soft, #EDF2FC) 100%);
	}
	.doc_label {
		position: static;
		margin-top: 12px;
		padding: 0;
	}
	.doc_label .d_part { font-size: 12px; margin-bottom: 3px; }
	.doc_label .d_name { font-size: 17px; }

	.main_banner { padding: 56px 0; }
	.main_banner:before,
	.main_banner:after { width: 200px; height: 200px; opacity: .08; }
	.main_banner:before { left: -60px; }
	.main_banner:after { right: -60px; }
	.main_banner .bn_tit { font-size: 29px; margin-bottom: 14px; letter-spacing: .04em; }
	.main_banner .bn_line { font-size: 17px; line-height: 1.75; }
}