@charset "utf-8";
/* ==========================================================================
   서브 페이지 공통 (병원소개 · 내과 · 소아청소년과 · 검진센터)
   구성 : 히어로(/include/sub_visual.jsp) → 경로 → 2뎁스 탭 → 본문(#sub_wrap) → 하단 예약 CTA
   - 포인트 컬러 · 라운드는 /css/theme.css 토큰만 참조한다 (값 직접 지정 금지)
   - 섹션 타이틀 위 영문 눈썹 텍스트는 사용하지 않는다
   ========================================================================== */

:root {
	--s-brand: var(--point-main, #4A7ED6);
	--s-brand-dark: var(--point-main-dark, #3767BE);
	--s-brand-soft: var(--point-main-light, #F0F5FD);
	--s-btn-bg: var(--point-pale, #E3EAF7);
	--s-btn-bg-hover: var(--point-pale-hover, #D3E0F3);
	--s-btn-line: var(--point-pale-line, #C3D4EE);
	--s-btn-fg: var(--point-on-pale, #2B5199);
	--s-ink: #23282b;
	/* 설명문 · 보조 텍스트 : 옅은 배경에서 흐려 보여 한 단계 진하게 (2026-09-02, 이전 #6b7278) */
	--s-gray: #4d555c;
	--s-line: #e6eaea;
	/* 옅은 박스 배경(인트로 · 표 머리 · 안내 박스) : 회백색(#f4f8f8) → 시그니처 블루의 가장 옅은 톤
	   (2026-09-02. theme.css --point-main-light 참조 — 값 직접 지정 금지) */
	--s-bg-soft: var(--point-main-light, #F0F5FD);
}

.sub_body { background: #fff; color: var(--s-ink); }

/* 2뎁스 탭의 position:sticky 는 조상에 overflow:hidden 이 있으면 동작하지 않는다.
   basic.css 의 `html, body { overflow-x:hidden }`(모바일 가로 잘림 방지) 을
   같은 효과의 clip 으로 바꿔 sticky 를 살린다. (clip 미지원 브라우저는 hidden 유지) */
html, body {
	overflow-x: hidden;
	overflow-x: clip;
}

/* 화면에서는 감추고 스크린리더에만 읽히는 텍스트 (표 caption 등) */
.sub_body .blind {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
.sub_body .sub_visual *,
.sub_body .sub_path *,
.sub_body .sub_tab *,
#sub_wrap *,
#sub_wrap *:before,
#sub_wrap *:after { box-sizing: border-box; }

/* ==========================================================================
   1. 히어로 (배경 이미지 + 메뉴명)
   ========================================================================== */
.sub_visual {
	position: relative;
	height: 580px;
	background-color: #1d2a3a;
	background-size: cover;
	/* 상단이 헤더에 가려져 인물 머리 쪽이 잘려 보이므로 사진을 아래로 내려 위쪽을 살린다.
	   사진별로 조정이 필요하면 페이지에서 request 속성 subVisualPos 로 덮어쓴다. */
	background-position: var(--sv-pos, center 12%);
	background-repeat: no-repeat;
}
/* 배경 사진은 원본 그대로 선명하게 둔다.
   전체 오버레이는 쓰지 않고, 흰색 로고 · GNB 가 놓이는 최상단만 아주 옅게 깔아 헤더 가독성만 확보한다. */
.sub_visual:before {
	content: '';
	position: absolute;
	left: 0; top: 0; right: 0;
	height: var(--header-height, 118px);
	background: linear-gradient(180deg, rgba(10,18,30,.34) 0%, rgba(10,18,30,.12) 62%, rgba(10,18,30,0) 100%);
	z-index: 1;
}
/* 사진 위 흰 글씨가 읽히는 최소한의 톤만 균일하게 얹는다.
   (부분 음영을 쓰면 밝은 사진에서 얼룩처럼 보여 전체 균일 · 저농도로 처리) */
.sub_visual:after {
	content: '';
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	background: rgba(12,20,32,.22);
	pointer-events: none;
}
/* 밝은 사진을 원본 그대로 보여주는 배너 (2026-09-07 검진센터 · 소아청소년과)
   원본이 화이트 톤이라 위의 오버레이를 얹으면 사진 전체가 파랗게 탁해진다.
   → 오버레이를 걷어내고, 대신 흰 글씨를 어두운 색으로 바꿔 가독성을 지킨다.
   ※ sub_visual.jsp 가 URL(/checkup · /pediatrics) 을 보고 .sv_light 를 붙인다. */
.sub_visual.sv_light:after { display: none; }
/* 상단 띠는 없애지 않고 밝은 쪽으로 뒤집는다 — 어두워진 로고 · GNB 가 사진 위에서 묻히지 않게 */
.sub_visual.sv_light:before {
	height: calc(var(--header-height, 118px) + 20px);
	background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.28) 60%, rgba(255,255,255,0) 100%);
}
/* 사진에 인물이 걸치는 배너(학생검진 등)에서는 글자가 인물 위에 겹친다.
   전체를 덮는 대신 글자 자리만 옅게 밝혀 읽히게 한다 (사진 색은 그대로) */
.sub_visual.sv_light .sv_text:before {
	content: '';
	position: absolute;
	left: -60px; right: -60px; top: -30px; bottom: -30px;
	background: radial-gradient(ellipse at center, rgba(255,255,255,.78) 0%, rgba(255,255,255,.5) 45%, rgba(255,255,255,0) 75%);
	pointer-events: none;
}
.sub_visual.sv_light .sv_text h2 {
	z-index: 1;
	color: var(--s-ink);
	text-shadow: 0 1px 3px rgba(255,255,255,.9);
}
.sub_visual.sv_light .sv_text p {
	z-index: 1;
	color: #3b444d;
	text-shadow: 0 1px 3px rgba(255,255,255,.9);
}
/* 최상단 투명 헤더도 어두운 톤으로 (메인의 body.mv_light 와 같은 처리) */
body.sv_light #header:not(.on):not(.mega_on) {
	--header-text: #222;
	border-bottom-color: rgba(35,40,43,.10);
}
body.sv_light #header:not(.on):not(.mega_on) .logo img { filter: none; }

.sub_visual .inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding-top: var(--header-height, 118px);
}
.sub_visual .sv_text {
	position: relative;
	z-index: 1;
	padding: 24px 40px;
	text-align: center;
}
.sub_visual .sv_text h2 {
	position: relative;
	margin: 0;
	font-size: 55px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.04em;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 0 40px rgba(0,0,0,.45);
}
.sub_visual .sv_text p {
	position: relative;
	margin: 18px 0 0;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0,0,0,.7), 0 0 26px rgba(0,0,0,.4);
}

/* ==========================================================================
   2. 현재 경로
   ========================================================================== */
.sub_path { border-bottom: 1px solid var(--s-line); background: #fff; }
.sub_path ol {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 16px 0;
	list-style: none;
}
.sub_path li {
	position: relative;
	padding-left: 20px;
	font-size: 16px;
	color: var(--s-gray);
	letter-spacing: -0.02em;
}
.sub_path li:before {
	content: '';
	position: absolute;
	left: 4px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	border-right: 1px solid #c3c9cd;
	border-bottom: 1px solid #c3c9cd;
	transform: rotate(-45deg);
}
.sub_path li.home { padding-left: 0; }
.sub_path li.home:before { display: none; }
.sub_path li.home a { display: inline-flex; align-items: center; gap: 6px; color: var(--s-gray); text-decoration: none; }
.sub_path li.home a:hover { color: var(--s-brand); }
.sub_path li.home span { font-size: 16px; }
.sub_path li.cur { color: var(--s-ink); font-weight: 600; }

/* ==========================================================================
   3. 2뎁스 탭
   ========================================================================== */
/* 스크롤해도 헤더 바로 아래 붙어 따라온다 (2026-09-02)
   ※ top 은 스크롤 상태 헤더 높이(--header-height-fixed : PC 90px / 1024px 이하 72px)
   ※ z-index 는 헤더(100) 아래 · 본문 위 */
.sub_tab {
	position: sticky;
	top: var(--header-height-fixed, 90px);
	z-index: 90;
	padding: 22px 0 16px;
	background: #fff;
	box-shadow: 0 6px 16px rgba(28,44,56,.07);
}
/* 2뎁스는 개수와 상관없이 한 줄로 늘어놓는다 (--tab-count 는 sub_visual.jsp 가 넘긴다) */
.sub_tab ul {
	display: grid;
	grid-template-columns: repeat(var(--tab-count, 4), minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sub_tab li a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	padding: 12px 10px;
	border: 1px solid var(--s-line);
	border-radius: var(--radius, 10px);
	background: #fff;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.35;
	/* 8개를 한 줄에 담아야 해서 자간을 살짝 조인다 (너무 조이면 오히려 읽기 나쁘다) */
	letter-spacing: -0.035em;
	color: #4a5257;
	word-break: keep-all;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.sub_tab li a:hover { border-color: var(--s-btn-line); background: var(--s-brand-soft); color: var(--s-btn-fg); }
.sub_tab li.on a {
	border-color: var(--s-brand);
	background: var(--s-brand);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 8px 20px rgba(48,98,195,.22);
}

/* ==========================================================================
   4. 본문 래퍼 · 섹션 공통
   ========================================================================== */
#sub_wrap { padding: 90px 0 110px; overflow: hidden; }
#sub_wrap .sub_sec + .sub_sec { margin-top: 90px; }

#sub_wrap .sec_head { margin-bottom: 40px; }
/* 타이틀 왼쪽 세로 포인트선은 사용하지 않는다 (2026-09-02 제거) */
#sub_wrap .sec_tit {
	position: relative;
	margin: 0;
	font-size: 35px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.04em;
	color: var(--s-ink);
}
#sub_wrap .sec_tit .point { color: var(--s-brand); }
#sub_wrap .sec_desc {
	margin: 14px 0 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.75;
	letter-spacing: -0.02em;
	color: #3b444d;
}

/* 인트로 : 페이지 첫 문단 */
.intro_box {
	margin-bottom: 70px;
	padding: 48px 50px;
	border: 1px solid var(--s-line);
	border-radius: var(--radius-lg, 16px);
	background: var(--s-bg-soft);
}
.intro_box .intro_tit {
	margin: 0 0 22px;
	font-size: 31px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.04em;
	color: var(--s-ink);
}
.intro_box .intro_tit .point { color: var(--s-brand); }
.intro_box p {
	margin: 0;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: -0.02em;
	color: #4a5257;
}
.intro_box p + p { margin-top: 18px; }
/* 리드 문단 : 본문보다 크고 진하게 (왼쪽 세로 포인트선은 2026-09-02 제거) */
.intro_box .lead {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.75;
	letter-spacing: -0.03em;
	color: var(--s-ink);
}
.intro_box .sign {
	margin-top: 28px;
	font-size: 18px;
	color: var(--s-ink);
	text-align: right;
}
.intro_box .sign strong { font-size: 22px; font-weight: 700; margin-left: 8px; }
/* 이름 대신 들어가는 자필 서명 이미지 : 글줄에 맞춰 높이만 잡는다 */
.intro_box .sign .sign_img {
	display: inline-block;
	width: auto;
	height: 58px;
	margin-left: 14px;
	vertical-align: middle;
}

/* 인트로 : 왼쪽 사진(가로형) + 오른쪽 글 — 사진이 카드 모서리까지 꽉 찬다 (2026-09-02)
   ※ .with_photo 는 카드 없이 사진 · 글만 놓는 형태, 이쪽은 카드 안에 사진을 물린 형태 */
.intro_box.with_img {
	display: grid;
	grid-template-columns: 50% 1fr;
	align-items: stretch;
	min-height: 520px;
	padding: 0;              /* 사진이 카드에 붙도록 카드 패딩을 없앤다 */
	overflow: hidden;        /* 둥근 모서리에 맞춰 사진이 잘리도록 */
}
.intro_box.with_img .intro_img { position: relative; line-height: 0; }
.intro_box.with_img .intro_img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* 세로로 긴 사진에서 아래쪽(인물의 발 · 바닥)이 잘리면 안 될 때 : 아래를 기준으로 맞춘다 */
.intro_box.with_img .intro_img.pos_bottom img { object-position: center bottom; }
/* 글 쪽에만 여백을 준다 */
.intro_box.with_img .intro_txt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 54px 56px;
}

/* 인트로 : 왼쪽 인물 사진(세로형) + 오른쪽 글
   ※ 카드(배경 · 테두리) 없이 사진과 글만 놓는다 */
.intro_box.with_photo {
	display: grid;
	grid-template-columns: 460px 1fr;
	gap: 70px;
	align-items: stretch;
	margin-bottom: 90px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}
.intro_box.with_photo .intro_txt { display: flex; flex-direction: column; justify-content: center; }
.intro_photo {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius, 10px);
	background: #e7eef3;
	line-height: 0;
}
.intro_photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 620px;
	object-fit: cover;
	object-position: center top;
}
/* 사진 등록 전 자리표시 (/img/about/director.* 파일을 올리면 자동으로 사진으로 바뀐다) */
.intro_photo .ph_empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	min-height: 620px;
	color: #94a2ad;
	font-size: 15px;
	line-height: 1.6;
	letter-spacing: -0.02em;
	text-align: center;
}
.intro_photo .ph_empty i { font-size: 37px; opacity: .6; }
.intro_photo .ph_empty span { display: block; }
.intro_photo .ph_empty .ph_path { font-size: 13px; color: #a9b4bd; }

/* 진료시간 + 병원 내부 사진 : 왼쪽 표 · 오른쪽 사진 2단 (병원소개) */
.hours_wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
	gap: 40px;
	align-items: start;
}
.hours_tbl { min-width: 0; }
/* 사진은 왼쪽 진료시간 표보다 조금 내려 시작한다 (표 윗줄과 나란히 붙으면 답답해 보인다) */
.hospital_view {
	position: relative;
	margin: 40px 0 0;
	line-height: 0;
}
.hospital_view img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius, 10px);
}
/* 사진 윗부분(천장) 을 페이지 흰 배경으로 흘려보내 경계선을 지운다 (2026-09-03)
   ※ 여러 단계로 나눈 stop : 2단(흰색→투명) 으로 하면 중간이 뿌옇게 뜬다 */
.hospital_view:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 130px;
	border-radius: var(--radius, 10px) var(--radius, 10px) 0 0;
	background: linear-gradient(180deg,
		#fff 0%,
		rgba(255,255,255,.92) 20%,
		rgba(255,255,255,.66) 45%,
		rgba(255,255,255,.30) 72%,
		rgba(255,255,255,0) 100%);
	pointer-events: none;
}
.hospital_view figcaption {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--s-gray);
	text-align: center;
}

/* 인트로 : 이미지 + 글 2단 */
.intro_flex { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.intro_flex .img_box {
	overflow: hidden;
	border-radius: var(--radius-lg, 16px);
	line-height: 0;
}
.intro_flex .img_box img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   5. 번호 목록 (01 · 02 …)
   ========================================================================== */
.num_list { margin: 0; padding: 0; list-style: none; counter-reset: numlist; }
.num_list > li { position: relative; padding-left: 74px; counter-increment: numlist; }
.num_list > li + li { margin-top: 46px; }
.num_list > li:before {
	content: counter(numlist, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius, 10px);
	background: var(--s-btn-bg);
	color: var(--s-btn-fg);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
}
.num_list .num_tit {
	display: block;
	margin: 10px 0 16px;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.03em;
	color: var(--s-ink);
}
.num_list .num_desc {
	margin: 0 0 18px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.85;
	letter-spacing: -0.02em;
	color: var(--s-gray);
}
/* 라벨(접종 대상 등)만 있고 내용은 아래 목록으로 빠지는 경우 : 라벨과 목록을 붙여 둔다
   (2026-09-07 소아청소년과 자궁경부암 예방백신 — 대상이 네 갈래라 목록으로 나눴다) */
.num_list .num_desc.label_only { margin-bottom: 10px; }
.num_list .num_desc + .dot_list { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   5-0. 번호 목록 : 절차 흐름형 (.step_line)
   - 번호 배지를 세로선으로 이어 "1 → 2 → 3" 순서가 한눈에 보이게 한다.
     단계가 끊어져 보이던 사각 배지 목록을 대체. (2026-09-03 성장 진료 절차)
   - 마지막 배지는 채워서 흐름의 끝을 표시한다.
   - 순서가 없는 나열(선택 예방접종 등)에는 쓰지 않는다.
   -------------------------------------------------------------------------- */
.num_list.step_line > li { padding-left: 88px; }
.num_list.step_line > li + li { margin-top: 38px; }
/* 배지 : 선 위에 얹히도록 흰 배경 + z-index */
.num_list.step_line > li:before {
	z-index: 1;
	width: 54px;
	height: 54px;
	border: 2px solid var(--s-btn-line);
	border-radius: 50%;
	background: #fff;
	color: var(--s-btn-fg);
	font-size: 17px;
}
.num_list.step_line > li:last-child:before {
	border-color: var(--s-brand);
	background: var(--s-brand);
	color: #fff;
}
/* 배지와 배지를 잇는 세로선 : 다음 항목 배지 위까지 내려간다 */
.num_list.step_line > li:after {
	content: '';
	position: absolute;
	left: 27px;
	top: 54px;
	bottom: -38px;
	width: 2px;
	margin-left: -1px;
	background: var(--s-btn-line);
}
.num_list.step_line > li:last-child:after { display: none; }
/* 제목 세로 중심을 배지 중심에 맞춘다 (배지 27px - 제목 반높이 17px) */
.num_list.step_line .num_tit { margin-top: 10px; }
/* 한 줄이 너무 길면 다음 줄 첫 글자를 놓친다 : 읽기 좋은 폭에서 끊는다 */
.num_list.step_line .num_desc { max-width: 940px; margin-bottom: 0; }

/* ==========================================================================
   5-1. 진료 분야 목록 (한 항목 = 한 줄)
   - 카드 그리드보다 가로 폭을 넓게 써서 긴 질환명이 잘 읽힌다.
   - 왼쪽 : 넘버링 + 아이콘 + 분야명 / 오른쪽 : 세부 질환
   ========================================================================== */
.dept_list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--s-ink);
}
.dept_list > li {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 40px;
	align-items: start;
	padding: 34px 20px 34px 8px;
	border-bottom: 1px solid var(--s-line);
	transition: background-color .2s ease;
}
.dept_list > li:hover { background: var(--s-bg-soft); }

.dept_list .d_head { display: flex; align-items: center; gap: 14px; }
/* 넘버링 : 크고 옅게 — 읽는 순서를 잡아주는 정도로만 */
.dept_list .d_num {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--s-btn-line);
}
.dept_list .d_tit {
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--s-ink);
	word-break: keep-all;
}

.dept_list .d_body { padding-top: 6px; }
.dept_list .d_desc {
	margin: 0;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: -0.02em;
	color: #4a5257;
	word-break: keep-all;
}
.dept_list .d_desc + .d_desc { margin-top: 6px; }
/* 보조 안내(내시경 · 예방접종 등) : 브랜드 컬러 점을 앞에 찍어 구분 */
.dept_list .d_more {
	position: relative;
	margin: 12px 0 0;
	padding-left: 16px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: -0.02em;
	color: var(--s-gray);
	word-break: keep-all;
}
.dept_list .d_more:before {
	content: '';
	position: absolute;
	left: 0;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--s-brand);
}

/* ==========================================================================
   5-2. 영양수액 목록 (표 → 카드 2열)
   - 주사제명 · 안내 배지 · 효능 태그로 나눠 한눈에 비교되게 한다.
   ========================================================================== */
.iv_list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.iv_list > li {
	display: flex;
	flex-direction: column;
	padding: 30px 32px 32px;
	border: 1px solid var(--s-line);
	border-radius: var(--radius-lg, 16px);
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.iv_list > li:hover {
	border-color: var(--s-btn-line);
	box-shadow: 0 12px 30px rgba(35,40,43,.08);
	transform: translateY(-3px);
}

/* 머리 : 주사제명 + 안내 배지 (배지는 있는 항목에만) */
/* 머리 : 배지를 카드 끝이 아니라 제목 바로 옆에 붙인다 (2026-09-02) */
.iv_list .iv_head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--s-line);
}
.iv_list .iv_tit {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.03em;
	color: var(--s-ink);
	word-break: keep-all;
}
/* 부제(성분 · 제품명) : 이름 아래 한 줄 */
.iv_list .iv_tit .sm {
	display: block;
	margin-top: 6px;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--s-gray);
}
/* 안내 배지 : 알약형 대신 브랜드 컬러로 채운 사각 라벨 (2026-09-02) */
.iv_list .iv_tag {
	flex: 0 0 auto;
	padding: 7px 13px;
	border-radius: var(--radius-sm, 6px);
	background: var(--s-brand);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.4;
	white-space: nowrap;
}

/* 효능 : 흐릿한 알약 태그 대신 체크 목록 2열 — 글자를 진하게 세워 바로 읽히게 한다 */
.iv_list .iv_eff {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.iv_list .iv_eff > li {
	position: relative;
	padding-left: 26px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--s-ink);
	word-break: keep-all;
}
/* 체크 표시 : 아이콘 폰트 없이 테두리 두 변으로 그린다 */
.iv_list .iv_eff > li:before {
	content: '';
	position: absolute;
	left: 3px;
	top: 6px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--s-brand);
	border-bottom: 2px solid var(--s-brand);
	transform: rotate(-45deg);
}
/* 태그로 쪼갤 수 없는 설명문(비만주사 등) */
.iv_list .iv_lead {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--s-brand);
}
.iv_list .iv_desc {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: -0.02em;
	color: #3b444d;
	word-break: keep-all;
}

/* ==========================================================================
   6. 항목 카드 그리드
   ========================================================================== */
.card_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.card_grid.col2 { grid-template-columns: repeat(2, 1fr); }
.card_grid.col4 { grid-template-columns: repeat(4, 1fr); }
.card_grid > li {
	padding: 32px 30px;
	border: 1px solid var(--s-line);
	border-radius: var(--radius, 10px);
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card_grid > li:hover {
	border-color: var(--s-btn-line);
	box-shadow: 0 10px 26px rgba(35,40,43,.07);
	transform: translateY(-3px);
}
.card_grid .c_ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	border-radius: var(--radius, 10px);
	background: var(--s-brand-soft);
	color: var(--s-brand);
	font-size: 20px;
}
.card_grid .c_tit {
	display: block;
	margin-bottom: 12px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.03em;
	color: var(--s-ink);
}
.card_grid .c_tit a { color: inherit; text-decoration: none; transition: color .2s ease; }
.card_grid > li:hover .c_tit a { color: var(--s-brand); }
.card_grid .c_desc {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: -0.02em;
	color: var(--s-gray);
	word-break: keep-all;
}

/* ==========================================================================
   6-1. 진료 항목 카드 (아이콘 + 항목명 한 줄)
   - 설명문 없이 항목명만 나열할 때 쓴다. dot_list 보다 항목 경계가 뚜렷해
     개수가 많아도 눈에 잘 들어온다. (2026-09-03 소아청소년과 진료 안내)
   - 다른 페이지로 이어지는 항목은 <a> 로 감싸고 li 에 .is_link 를 준다.
   ========================================================================== */
.svc_cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.svc_cards.col3 { grid-template-columns: repeat(3, 1fr); }
.svc_cards > li {
	border: 1px solid var(--s-line);
	border-radius: var(--radius, 10px);
	background: #fff;
}
/* li 안쪽을 통째로 채운다 : 링크 카드는 이 자리가 <a> 가 되어 카드 전체가 눌린다 */
.svc_cards .s_in {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 24px 26px;
	color: inherit;
	text-decoration: none;
}
.svc_cards .s_ico {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: var(--radius, 10px);
	background: var(--s-brand-soft);
	color: var(--s-brand);
	font-size: 19px;
}
.svc_cards .s_tit {
	flex: 1 1 auto;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.03em;
	color: var(--s-ink);
	word-break: keep-all;
}
/* 이동하는 항목임을 알리는 화살표 (밑줄 대신) */
.svc_cards .s_arw {
	flex: 0 0 auto;
	font-size: 14px;
	color: var(--s-btn-line);
	transition: color .2s ease, transform .2s ease;
}
.svc_cards > li.is_link {
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.svc_cards > li.is_link:hover {
	border-color: var(--s-btn-line);
	box-shadow: 0 10px 26px rgba(35,40,43,.07);
	transform: translateY(-3px);
}
.svc_cards > li.is_link:hover .s_tit { color: var(--s-brand); }
.svc_cards > li.is_link:hover .s_arw { color: var(--s-brand); transform: translateX(3px); }

/* ==========================================================================
   7. 표
   ========================================================================== */
.tbl_wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl_wrap + .tbl_wrap { margin-top: 24px; }
table.tbl {
	width: 100%;
	min-width: 700px;
	border-collapse: collapse;
	border-top: 2px solid var(--s-ink);
}
table.tbl th,
table.tbl td {
	padding: 20px 22px;
	border-bottom: 1px solid var(--s-line);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: -0.02em;
	text-align: left;
	vertical-align: top;
	word-break: keep-all;
}
table.tbl thead th {
	background: var(--s-bg-soft);
	color: var(--s-ink);
	font-weight: 700;
	text-align: center;
	vertical-align: middle;
}
table.tbl tbody th {
	width: 210px;
	background: #fbfcfc;
	color: var(--s-ink);
	font-weight: 600;
	vertical-align: middle;
}
table.tbl td { color: #4a5257; }
table.tbl td.center,
table.tbl th.center { text-align: center; vertical-align: middle; }
table.tbl .sm { display: block; margin-top: 6px; font-size: 17px; font-weight: 500; color: var(--s-gray); }

/* ==========================================================================
   8. 목록 · 안내 박스
   ========================================================================== */
.dot_list { margin: 0; padding: 0; list-style: none; }
.dot_list > li {
	position: relative;
	padding-left: 18px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.85;
	letter-spacing: -0.02em;
	color: #4a5257;
	word-break: keep-all;
}
.dot_list > li + li { margin-top: 10px; }
.dot_list > li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 15px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--s-brand);
}
.dot_list strong { color: var(--s-ink); font-weight: 600; }
.dot_list a { color: var(--s-brand); text-decoration: underline; text-underline-offset: 3px; }
.dot_list a:hover { color: var(--s-brand-dark); }
.dot_list.two_col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 40px; }
.dot_list.two_col > li + li { margin-top: 0; }
/* 강조 목록 : 한 항목 한 항목을 읽혀야 하는 자가진단 · 체크리스트용
   (2026-09-03 성장클리닉 "이런 경우 성장 상담을 권합니다") */
.dot_list.emph > li {
	padding-left: 24px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.7;
	color: var(--s-ink);
}
.dot_list.emph > li + li { margin-top: 16px; }
.dot_list.emph > li:before { top: 17px; width: 7px; height: 7px; }
.dot_list.emph.two_col { gap: 20px 44px; }
.dot_list.emph.two_col > li + li { margin-top: 0; }

.note_box {
	margin-top: 24px;
	padding: 24px 28px;
	border-radius: var(--radius, 10px);
	background: var(--s-bg-soft);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.85;
	letter-spacing: -0.02em;
	color: var(--s-gray);
	word-break: keep-all;
}
.note_box strong { color: var(--s-ink); }
/* 안내문 안에서 한 단어만 눈에 띄게 (2026-09-07 "국가예방접종") */
.note_box .point { color: var(--s-brand); font-weight: 700; }
.note_box a { color: var(--s-brand); text-decoration: underline; text-underline-offset: 3px; }
.note_box a:hover { color: var(--s-brand-dark); }
.note_box p { margin: 0; }
.note_box p + p { margin-top: 8px; }

/* 소제목 (섹션 내부) */
#sub_wrap .sub_tit {
	margin: 42px 0 16px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.03em;
	color: var(--s-ink);
}
#sub_wrap .sub_tit:first-child { margin-top: 0; }

/* ==========================================================================
   9. 강조 배너 (최우수 등급)
   ========================================================================== */
.point_banner {
	margin-top: 90px;
	padding: 60px 40px;
	border-radius: var(--radius-lg, 16px);
	background: var(--s-brand-soft);
	text-align: center;
}
.point_banner p {
	margin: 0;
	font-size: 27px;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: -0.03em;
	color: var(--s-ink);
	word-break: keep-all;
}
.point_banner .point { color: var(--s-brand); font-weight: 700; }

/* ==========================================================================
   10. 하단 예약 CTA
   ========================================================================== */
.cta_area {
	margin-top: 90px;
	padding: 56px 40px;
	border: 1px solid var(--s-line);
	border-radius: var(--radius-lg, 16px);
	text-align: center;
}
.cta_area .cta_tit {
	margin: 0 0 12px;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--s-ink);
}
.cta_area .cta_desc {
	margin: 0 0 28px;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: -0.02em;
	color: var(--s-gray);
	word-break: keep-all;
}
.cta_area .cta_btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.cta_area .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 210px;
	height: 62px;
	padding: 0 32px;
	border: 1px solid var(--s-btn-line);
	border-radius: var(--radius-sm, 6px);
	background: var(--s-btn-bg);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--s-btn-fg);
	text-decoration: none;
	justify-content: center;
	transition: background-color .2s ease, border-color .2s ease;
}
.cta_area .btn:hover { background: var(--s-btn-bg-hover); }
.cta_area .btn.line { background: #fff; border-color: var(--s-line); color: var(--s-ink); }
.cta_area .btn.line:hover { border-color: var(--s-btn-line); background: var(--s-brand-soft); color: var(--s-btn-fg); }

/* ==========================================================================
   반응형
   ========================================================================== */
@media all and (max-width:1200px){
	.sub_visual { height: 500px; }
	.sub_visual .sv_text h2 { font-size: 46px; }
	.intro_flex { grid-template-columns: 1fr; gap: 30px; }
	.card_grid.col4 { grid-template-columns: repeat(2, 1fr); }
	/* 폭이 좁아지면 한 줄에 다 담을 수 없다 → 가로 스크롤 대신 4개씩 끊어 여러 줄로 (2026-09-03)
	   ※ 이전에는 한 줄 가로 스크롤이라 화면 밖 탭을 못 보고 지나쳤다.
	     검진센터(8개) 기준 정확히 두 줄이 된다. */
	.sub_tab ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
	.sub_tab li a { min-height: 62px; padding: 10px 8px; font-size: 17px; }
}

@media all and (max-width:1024px){
	.sub_visual { height: 400px; }
	.sub_visual .inner { padding-top: var(--header-height, 84px); }
	.sub_visual .sv_text h2 { font-size: 37px; }
	.sub_visual .sv_text p { font-size: 17px; }
	.sub_tab li a { min-height: 58px; font-size: 16px; }
	#sub_wrap { padding: 60px 0 80px; }
	#sub_wrap .sub_sec + .sub_sec { margin-top: 70px; }
	#sub_wrap .sec_tit { font-size: 29px; }
	#sub_wrap .sec_desc { font-size: 18px; }
	.intro_box { padding: 36px 30px; }
	.intro_box .intro_tit { font-size: 26px; }
	.intro_box p { font-size: 18px; }
	.intro_box .lead { font-size: 18px; }
	.intro_box .sign .sign_img { height: 50px; }
	.hours_wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: 28px; }
	.intro_box.with_img { min-height: 440px; grid-template-columns: 46% 1fr; }
	.intro_box.with_img .intro_txt { padding: 40px 38px; }
	.intro_box.with_photo { grid-template-columns: 340px 1fr; gap: 44px; padding: 0; margin-bottom: 70px; }
	.intro_photo img,
	.intro_photo .ph_empty { min-height: 480px; }
	.iv_list > li { padding: 26px 26px 28px; }
	.iv_list .iv_tit { font-size: 19px; }
	.iv_list .iv_eff { gap: 10px 16px; }
	.iv_list .iv_eff > li { font-size: 17px; }
	.dot_list.emph > li { font-size: 20px; }
	.dot_list.emph > li:before { top: 15px; }
	.dept_list > li { grid-template-columns: 260px 1fr; gap: 28px; padding: 28px 12px 28px 4px; }
	.dept_list .d_tit { font-size: 21px; }
	.dept_list .d_desc { font-size: 18px; }
	.card_grid { grid-template-columns: repeat(2, 1fr); }
	.svc_cards.col3 { grid-template-columns: repeat(2, 1fr); }
	.svc_cards .s_in { gap: 15px; padding: 20px 22px; }
	.svc_cards .s_tit { font-size: 18px; }
	.point_banner { margin-top: 70px; padding: 46px 26px; }
	.point_banner p { font-size: 22px; }
	.cta_area { margin-top: 70px; padding: 44px 26px; }
	.cta_area .cta_tit { font-size: 26px; }
}

@media all and (max-width:640px){
	.sub_visual { height: 320px; }
	.sub_visual .sv_text { padding: 20px 24px; }
	.sub_visual .sv_text h2 { font-size: 28px; }
	.sub_visual .sv_text p { margin-top: 10px; font-size: 15px; }
	.sub_path ol { padding: 12px 0; gap: 6px; }
	.sub_path li,
	.sub_path li.home span { font-size: 14px; }
	.sub_tab { padding: 14px 0 12px; }
	/* 좁은 화면 : 4열을 유지하되 글자 · 여백을 줄여 두 줄 안에 들어오게 한다 */
	.sub_tab ul { gap: 6px; }
	.sub_tab li a { min-height: 50px; padding: 8px 4px; font-size: 13px; letter-spacing: -0.06em; }
	#sub_wrap { padding: 46px 0 60px; }
	#sub_wrap .sub_sec + .sub_sec { margin-top: 54px; }
	#sub_wrap .sec_head { margin-bottom: 28px; }
	#sub_wrap .sec_tit { font-size: 24px; }
	#sub_wrap .sec_desc { font-size: 18px; }
	#sub_wrap .sub_tit { margin: 30px 0 12px; font-size: 19px; }
	.intro_box { margin-bottom: 50px; padding: 28px 22px; border-radius: var(--radius, 10px); }
	/* 좁은 화면 : 진료시간 아래로 사진을 내린다 */
	.hours_wrap { grid-template-columns: 1fr; gap: 24px; }
	/* 사진이 표 아래로 내려오므로 위쪽 여백 · 흰색 페이드를 줄인다 */
	.hospital_view { margin-top: 0; }
	.hospital_view:after { height: 90px; }
	.hospital_view figcaption { font-size: 15px; }
	/* 좁은 화면 : 사진을 위로 올리고 글을 아래에 둔다 */
	.intro_box.with_img { grid-template-columns: 1fr; min-height: 0; }
	.intro_box.with_img .intro_img { height: 280px; }
	.intro_box.with_img .intro_txt { padding: 28px 22px; }
	.intro_box.with_photo { grid-template-columns: 1fr; gap: 26px; padding: 0; margin-bottom: 50px; }
	.intro_photo img,
	.intro_photo .ph_empty { min-height: 420px; }
	.intro_box .intro_tit { font-size: 21px; }
	.intro_box p { font-size: 18px; line-height: 1.85; }
	.intro_box .lead { font-size: 17px; }
	.intro_box .sign { font-size: 17px; }
	.intro_box .sign strong { font-size: 19px; }
	.intro_box .sign .sign_img { height: 42px; margin-left: 10px; }
	.iv_list { grid-template-columns: 1fr; gap: 14px; }
	.iv_list > li { padding: 22px 20px 24px; }
	.iv_list .iv_head { gap: 8px 10px; padding-bottom: 14px; margin-bottom: 14px; }
	.iv_list .iv_tit { font-size: 18px; }
	.iv_list .iv_eff { grid-template-columns: 1fr; gap: 9px; }
	.iv_list .iv_eff > li { font-size: 16px; }
	.iv_list .iv_desc { font-size: 16px; }
	/* 좁은 화면 : 분야명 아래로 세부 질환을 내린다 */
	.dept_list > li { grid-template-columns: 1fr; gap: 14px; padding: 24px 4px; }
	.dept_list .d_num { font-size: 18px; }
	.dept_list .d_tit { font-size: 19px; }
	.dept_list .d_body { padding-top: 0; }
	.dept_list .d_desc { font-size: 17px; }
	.dept_list .d_more { font-size: 16px; }
	.num_list > li { padding-left: 0; }
	.num_list > li + li { margin-top: 36px; }
	.num_list > li:before { position: static; width: 44px; height: 44px; margin-bottom: 12px; font-size: 17px; }
	.num_list .num_tit { margin-top: 0; font-size: 20px; }
	.num_list .num_desc { font-size: 18px; }
	/* 절차 흐름형은 좁은 화면에서도 세로선을 유지한다 (배지를 왼쪽에 고정) */
	.num_list.step_line > li { padding-left: 60px; }
	.num_list.step_line > li + li { margin-top: 26px; }
	.num_list.step_line > li:before { position: absolute; width: 44px; height: 44px; margin-bottom: 0; font-size: 15px; }
	.num_list.step_line > li:after { left: 22px; top: 44px; bottom: -26px; }
	.num_list.step_line .num_tit { margin-top: 8px; }
	.card_grid,
	.card_grid.col2,
	.card_grid.col4 { grid-template-columns: 1fr; }
	.card_grid > li { padding: 24px 22px; }
	.svc_cards,
	.svc_cards.col3 { grid-template-columns: 1fr; gap: 12px; }
	.svc_cards .s_in { gap: 14px; padding: 18px 20px; }
	.svc_cards .s_ico { width: 44px; height: 44px; font-size: 17px; }
	.svc_cards .s_tit { font-size: 17px; }
	.card_grid .c_tit { font-size: 19px; }
	.card_grid .c_desc { font-size: 18px; }
	.dot_list > li { font-size: 18px; }
	.dot_list.emph > li { font-size: 19px; }
	.dot_list.emph > li:before { top: 14px; }
	.dot_list.two_col { grid-template-columns: 1fr; gap: 10px; }
	/* 표 : 가로 스크롤 없이 화면 폭 안에서 읽히게 한다 (2026-09-03)
	   ※ 기본값 min-width:700px 과 colgroup 의 고정 폭(px) 을 풀고, 여백 · 글자를 줄인다.
	     좁은 화면에서 스크롤은 표가 잘린 줄 모르고 지나치게 만든다. */
	table.tbl { min-width: 0; }
	table.tbl col { width: auto !important; }
	table.tbl th,
	table.tbl td {
		padding: 12px 8px;
		font-size: 16px;
		/* keep-all 만 두면 "자궁경부세포진검사 + HPV(인유두종 바이러스) 검사" 처럼
		   띄어쓰기 없는 긴 덩어리가 셀을 밀어내 표가 화면 밖으로 나간다 → 필요할 때만 끊는다 */
		overflow-wrap: anywhere;
	}
	/* 왼쪽 항목명은 "초음파검사" 정도가 한 줄에 들어갈 만큼은 확보한다 */
	table.tbl tbody th { width: auto; min-width: 92px; font-size: 15px; }
	table.tbl .sm { font-size: 16px; }
	.note_box { padding: 20px 22px; font-size: 17px; }
	.point_banner { margin-top: 54px; padding: 36px 22px; }
	.point_banner p { font-size: 18px; }
	.cta_area { margin-top: 54px; padding: 34px 22px; }
	.cta_area .cta_tit { font-size: 21px; }
	.cta_area .cta_desc { font-size: 18px; }
	.cta_area .cta_btns { flex-direction: column; }
	.cta_area .btn { width: 100%; min-width: 0; height: 56px; font-size: 17px; }
}