/*!
 * seran-guide.css — 증상가이드 상세 · 건강검진 상세/목록 (모듈: guide-checkup)
 *
 * 소유 계약 (CONTRACT-FRONT.md §3 — guide-checkup):
 *   single-clinic_symptomguide.php · single-clinic_healthcheck.php ·
 *   inc/class-seran-checkup.php · assets/css/seran-guide.css · _wiring/guide-checkup.md
 *
 * 원칙
 *   - Brizy 산 클래스(brz-*)·인라인 <style> 없음 (CONTRACT-FRONT §0-1·0-3).
 *   - 색·반경·글꼴은 전부 seran 디자인 토큰(assets/css/seran-tokens.css · static-pages 소유).
 *     아래 --sg-* 는 그 토큰의 별칭(alias) 레이어일 뿐이고, 토큰 시트가 아직 실리지 않은
 *     환경에서만 계약서 §1 에 명시된 값이 폴백으로 쓰인다. 컴포넌트 규칙은 --sg-* 만 참조한다.
 *   - 타이포 스케일은 구 사이트 전역 설정을 그대로 옮겼다 (_audit/rendered/symptomguide_*.html):
 *       h1 40/38/28px  h2 36/30/28  h3 32/27/20  h4 22/22/20  h5 20/17/17  h6 20(600)/16/17
 *       p 16/1.9 → 15/1.6(태블릿·모바일),  letter-spacing -1.5px(데스크탑 헤딩)
 *     브레이크포인트: 991px(태블릿) · 767px(모바일). 컨테이너 1170px.
 *
 * 목차
 *   1. 토큰 별칭 · 공통 골격
 *   2. 증상가이드 — 히어로
 *   3. 증상가이드 — 본문 산문(정적화된 post_content)
 *   4. 증상가이드 — 하단 자동 섹션(관련 검사/사례) · 예약 CTA
 *   5. 콘텐츠 결합 CSS 이관 (구 wp-custom-css: .liver-steps)
 *   6. 건강검진 상세 (.seran-hc — inc/class-seran-checkup.php::render_detail)
 *   7. 건강검진 목록 그리드 (.seran-hc-list — ::render_grid)
 *   8. 인쇄 · 접근성
 */

/* ============================================================
   1. 토큰 별칭 · 공통 골격
============================================================ */

.seran-guide,
.seran-hc,
.seran-hc-list {
	--sg-accent: var(--seran-orange, #f68b1a);
	--sg-accent-soft: var(--seran-orange-soft, #f6a04d);
	--sg-accent-strong: var(--seran-cta, #d76e0f);
	--sg-olive: var(--seran-olive, #a9bc0d);
	--sg-olive-dark: var(--seran-olive-dark, #87970a);
	--sg-leaf: var(--seran-leaf, #b7d68a);
	--sg-ink: var(--seran-ink, #333);
	--sg-ink-2: var(--seran-ink-2, #555);
	--sg-ink-3: var(--seran-ink-3, #888);
	--sg-line: var(--seran-line, #ddd);
	--sg-line-soft: var(--seran-bg-soft, #fafafa);
	--sg-warm: var(--seran-bg-warm, #fff7ef);
	--sg-mega: var(--seran-bg-mega, #f6f8f2);
	--sg-paper: var(--brand-secondary, #fff);
	--sg-radius: var(--seran-radius, 12px);
	--sg-radius-lg: var(--seran-radius-lg, 20px);
	--sg-font: var(--seran-font, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif);
	--sg-font-display: var(--seran-font-display, var(--sg-font));

	/* 지면 폭 — 구 사이트 Brizy 컨테이너(1170px)와 좌우 여백(15px) 그대로. */
	--sg-wrap: 1170px;
	--sg-pad: 15px;
	--sg-gap: 30px;

	box-sizing: border-box;
	color: var(--sg-ink);
	font-family: var(--sg-font);
	line-height: 1.9;
	-webkit-text-size-adjust: 100%;
}

.seran-guide *,
.seran-guide *::before,
.seran-guide *::after,
.seran-hc *,
.seran-hc *::before,
.seran-hc *::after,
.seran-hc-list *,
.seran-hc-list *::before,
.seran-hc-list *::after {
	box-sizing: border-box;
}

/* 편집자에게만 보이는 진단 문구 — 일반 방문자에게는 출력 자체가 없다. */
.seran-hc-note {
	max-width: var(--sg-wrap);
	margin: 24px auto;
	padding: 14px 18px;
	border: 1px dashed var(--seran-orange, #f68b1a);
	border-radius: var(--seran-radius, 12px);
	background: var(--seran-bg-warm, #fff7ef);
	color: var(--seran-cta, #d76e0f);
	font-size: 14px;
	line-height: 1.6;
}

/* ============================================================
   2. 증상가이드 — 히어로
   구 사이트: 대표이미지를 배경으로 깔고 왼쪽에서 흰색 그라데이션 스크림을
   덮어 제목 가독성을 확보한다(min-height 60vh, 제목 좌측 정렬).
   배경은 인스턴스마다 달라지므로 인라인 CSS 대신 <img> + object-fit 으로 만든다
   (CONTRACT-FRONT §0-3 인라인 스타일 금지 · srcset 도 함께 살아난다).
============================================================ */

.seran-guide__hero {
	position: relative;
	display: flex;
	align-items: center;
	isolation: isolate;
	overflow: hidden;
	/* 구 사이트 히어로는 화면 높이의 60%가 아니라 배너 비율(폭의 약 28%)이었다.
	   60vh 는 큰 화면에서 첫 화면을 통째로 잡아먹어 본문이 보이지 않는다. */
	min-height: clamp(220px, 28vw, 400px);
	background: var(--sg-warm);
}

.seran-guide__hero-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center 45%;
}

/* 왼쪽 → 오른쪽 흰색 스크림. 사진이 있을 때만 덮는다. */
.seran-guide__hero--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.88) 34%, rgba(255, 255, 255, 0.06) 100%);
	pointer-events: none;
}

.seran-guide__hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--sg-wrap);
	margin: 0 auto;
	padding: 56px var(--sg-pad);
}

.seran-guide__title {
	max-width: 20em;
	margin: 0;
	color: var(--sg-ink);
	font-family: var(--sg-font-display);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -1.5px;
	line-height: 1.3;
	overflow-wrap: break-word;
	word-break: keep-all;
}

.seran-guide__lede {
	max-width: 38em;
	margin: 18px 0 0;
	color: var(--sg-ink-2);
	font-size: 17px;
	line-height: 1.8;
	word-break: keep-all;
}

.seran-guide__hero-cta {
	margin: 28px 0 0;
}

/* 히어로 예약 버튼 — 실제 예약 보드는 본문 하단 CTA 에 1회만 렌더한다
   (CONTRACT-FRONT §5 "증상가이드 = 본문 하단"). 여기서는 그 지점으로 보내는 앵커. */
.seran-guide__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 32px;
	border: 0;
	border-radius: 999px;
	background: var(--sg-accent);
	color: var(--sg-paper);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(246, 139, 26, 0.28);
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.seran-guide__btn:hover,
.seran-guide__btn:focus-visible {
	background: var(--sg-accent-strong);
	color: var(--sg-paper);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(215, 110, 15, 0.3);
}

.seran-guide__btn .seran-guide__btn-arrow {
	font-size: 14px;
	line-height: 1;
}

/* ============================================================
   3. 증상가이드 — 본문 산문
   post_content 는 정적화된 완성 HTML(문단·목록·표·도판)이라 마크업을 만들지 않고
   요소 선택자로 조판만 입힌다. 콘텐츠가 자체 클래스를 들고 오면 그쪽이 이기도록
   선택자 특이도를 (0,1,1) 이하로 유지한다.
============================================================ */

.seran-guide__body {
	max-width: var(--sg-wrap);
	margin: 0 auto;
	padding: 48px var(--sg-pad) 24px;
	color: var(--sg-ink-2);
	font-size: 16px;
	line-height: 1.9;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.seran-guide__body > *:first-child {
	margin-top: 0;
}

.seran-guide__body > *:last-child {
	margin-bottom: 0;
}

.seran-guide__body h2,
.seran-guide__body h3,
.seran-guide__body h4,
.seran-guide__body h5,
.seran-guide__body h6,
.seran-hc__body h3,
.seran-hc__body h4,
.seran-hc__content h2,
.seran-hc__content h3,
.seran-hc__content h4 {
	color: var(--sg-ink);
	font-family: var(--sg-font-display);
	font-weight: 700;
	word-break: keep-all;
}

.seran-guide__body h2 {
	margin: 56px 0 20px;
	font-size: 36px;
	letter-spacing: -1.5px;
	line-height: 1.3;
}

.seran-guide__body h3 {
	margin: 48px 0 18px;
	font-size: 32px;
	letter-spacing: -1.5px;
	line-height: 1.6;
}

.seran-guide__body h4 {
	margin: 34px 0 14px;
	font-size: 22px;
	letter-spacing: -0.5px;
	line-height: 1.5;
}

.seran-guide__body h5 {
	margin: 28px 0 12px;
	font-size: 20px;
	line-height: 1.6;
}

.seran-guide__body h6 {
	margin: 24px 0 10px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.8;
}

.seran-guide__body p {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.9;
}

.seran-guide__body ul,
.seran-guide__body ol {
	margin: 0 0 20px;
	padding-left: 1.25em;
}

.seran-guide__body li {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.85;
}

.seran-guide__body li::marker {
	color: var(--sg-accent);
}

.seran-guide__body li > ul,
.seran-guide__body li > ol {
	margin-top: 10px;
}

.seran-guide__body strong,
.seran-guide__body b {
	color: var(--sg-ink);
	font-weight: 700;
}

.seran-guide__body em {
	font-style: normal;
	font-weight: 600;
	color: var(--sg-accent-strong);
}

.seran-guide__body a {
	color: var(--sg-accent-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.seran-guide__body a:hover {
	color: var(--sg-accent);
}

.seran-guide__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sg-radius);
}

.seran-guide__body figure {
	margin: 28px 0;
}

.seran-guide__body figcaption {
	margin-top: 10px;
	color: var(--sg-ink-3);
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
}

.seran-guide__body hr {
	height: 1px;
	margin: 40px 0;
	border: 0;
	background: var(--sg-line);
}

.seran-guide__body blockquote {
	margin: 28px 0;
	padding: 22px 26px;
	border-left: 4px solid var(--sg-accent);
	border-radius: 0 var(--sg-radius) var(--sg-radius) 0;
	background: var(--sg-warm);
	color: var(--sg-ink);
}

.seran-guide__body blockquote > *:last-child {
	margin-bottom: 0;
}

/* 표 — 좁은 화면에서 가로 스크롤 (지면이 넘치지 않게) */
.seran-guide__body table,
.seran-hc__table-wrap table {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.7;
}

.seran-guide__body th,
.seran-guide__body td,
.seran-hc__table-wrap th,
.seran-hc__table-wrap td {
	padding: 12px 14px;
	border: 1px solid var(--sg-line);
	text-align: left;
	vertical-align: top;
	word-break: keep-all;
}

.seran-guide__body th,
.seran-hc__table-wrap th {
	background: var(--sg-warm);
	color: var(--sg-ink);
	font-weight: 700;
}

.seran-guide__body caption,
.seran-hc__table-wrap caption {
	margin-bottom: 10px;
	color: var(--sg-ink-3);
	font-size: 14px;
	text-align: left;
}

/* ============================================================
   4. 하단 자동 섹션 · 예약 CTA
   관련 검사([exam_cards]) → 관련 사례([case_cards]) 순서는 실렌더 스냅샷과 동일.
   카드 내부 조판은 related-content 모듈(seran-related.css) 소유이므로
   여기서는 섹션 여백만 준다.
============================================================ */

/* 본문(.seran-guide__body)과 같은 폭·같은 좌우 여백을 써야 제목·카드가 본문 글줄에
   맞춰 선다. 이것이 없으면 .seran-rel 이 max-width:100% 로 화면 끝까지 퍼져
   "관련 검사 방법 / 관련 진단 사례" 가 페이지 왼쪽에 붙는다. */
.seran-guide__section {
	max-width: var(--sg-wrap);
	margin: 0 auto;
	padding: 56px var(--sg-pad);
}

/* 구 사이트 섹션 여백 그대로: 검사 111/85 · 사례 55/75 (px, 데스크탑). */
.seran-guide__section--exams {
	padding: 88px var(--sg-pad) 32px;
}

.seran-guide__section--cases {
	padding: 48px var(--sg-pad) 60px;
}

/* 예약 CTA 밴드 — 스냅샷에 없는 홍보 문구를 만들지 않으므로 보드(launch 버튼)만 담는다.
   보드의 외형은 booking-front.css 소유이고 여기서는 배치만 준다. */
.seran-guide__cta {
	margin-top: 8px;
	padding: 48px 0 56px;
	background: var(--sg-warm);
	text-align: center;
}

.seran-guide__cta-inner {
	max-width: var(--sg-wrap);
	margin: 0 auto;
	padding: 0 var(--sg-pad);
}

.seran-guide__cta-board {
	display: flex;
	justify-content: center;
}

/* ============================================================
   5. 콘텐츠 결합 CSS 이관
   구 사이트가 wp-custom-css(전역)에 두었던 .liver-steps 블록.
   본문(post_content)이 이 마크업을 들고 오므로 함께 이관하되,
   전역 오염을 막기 위해 지면 컨테이너 안으로 스코프하고 색은 토큰으로 바꾼다.
============================================================ */

.seran-guide .liver-steps,
.seran-hc .liver-steps {
	max-width: 960px;
	margin: 32px auto;
	padding: 24px 20px 32px;
	border: 1px solid var(--sg-accent-soft);
	border-radius: 16px;
	background: var(--sg-warm);
	font-family: var(--sg-font);
}

.seran-guide .liver-steps-title,
.seran-hc .liver-steps-title {
	margin: 0 0 20px;
	color: var(--sg-accent-strong);
	font-size: 22px;
	font-weight: 700;
}

.seran-guide .liver-step,
.seran-hc .liver-step {
	display: flex;
	gap: 16px;
	padding: 16px 18px;
	border: 1px solid var(--sg-accent-soft);
	border-radius: 12px;
	background: var(--sg-paper);
	box-shadow: 0 2px 6px rgba(246, 139, 26, 0.08);
}

.seran-guide .liver-step + .liver-step,
.seran-hc .liver-step + .liver-step {
	margin-top: 12px;
}

.seran-guide .liver-step-badge,
.seran-hc .liver-step-badge {
	display: flex;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	height: 32px;
	border-radius: 50%;
	background: var(--sg-accent);
	color: var(--sg-paper);
	font-size: 16px;
	font-weight: 700;
}

.seran-guide .liver-step-content,
.seran-hc .liver-step-content {
	flex: 1;
}

.seran-guide .liver-step-heading,
.seran-hc .liver-step-heading {
	margin: 0 0 6px;
	color: var(--sg-accent-strong);
	font-size: 17px;
	font-weight: 700;
}

.seran-guide .liver-step-text,
.seran-hc .liver-step-text {
	margin: 0;
	color: var(--sg-ink-2);
	font-size: 14px;
	line-height: 1.6;
}

.seran-guide .liver-step-text strong,
.seran-hc .liver-step-text strong {
	color: var(--sg-accent);
}

/* ============================================================
   6. 건강검진 상세 (.seran-hc)
   구조는 inc/class-seran-checkup.php::render_detail() 이 그린다:
     배너 → 상단 2열(썸네일 | 프로그램명·소개·가격·예약) → 하단 1열(추천대상 → 검사항목 → 본문)
   치수는 구 스니펫 063 을 그대로 승계(상단 420fr/580fr, 카드 padding 30px, radius 16px).
============================================================ */

.seran-hc {
	max-width: var(--sg-wrap);
	margin: 0 auto;
	padding: 40px var(--sg-pad) 72px;
}

.seran-hc__banner {
	margin: 0 0 var(--sg-gap);
	overflow: hidden;
	border-radius: 16px;
}

.seran-hc__banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* 상단 2열 — 좌측 이미지가 우측 높이에 끌려 늘어나지 않도록 start 정렬. */
.seran-hc__top {
	display: grid;
	grid-template-columns: 420fr 580fr;
	gap: 16px;
	align-items: start;
}

.seran-hc__thumb {
	position: relative;
	align-self: start;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--sg-line);
	border-radius: 16px;
	background: var(--sg-line-soft);
}

.seran-hc__thumb::before {
	content: "";
	display: block;
	aspect-ratio: 1 / 1;
}

.seran-hc__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.seran-hc__head {
	padding: var(--sg-gap);
	border: 1px solid var(--sg-line);
	border-radius: 16px;
	background: var(--sg-paper);
}

/* 썸네일이 없으면 헤더 카드가 지면 전체를 쓴다. */
.seran-hc__head.is-wide {
	grid-column: 1 / -1;
}

.seran-hc__eyebrow {
	margin: 0 0 6px;
	color: var(--sg-ink-3);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.seran-hc__title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.seran-hc__title {
	margin: 0;
	color: var(--sg-ink);
	font-family: var(--sg-font-display);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	word-break: keep-all;
}

.seran-hc__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.seran-hc__badge {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid var(--sg-accent-soft);
	border-radius: 999px;
	background: var(--sg-warm);
	color: var(--sg-accent-strong);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.6;
	white-space: nowrap;
}

.seran-hc__intro {
	margin: 18px 0 var(--sg-gap);
	padding: var(--sg-gap);
	border-radius: 12px;
	background: var(--sg-warm);
	color: var(--sg-ink-2);
	font-size: 16px;
	line-height: 1.8;
	word-break: keep-all;
}

.seran-hc__intro p {
	margin: 0 0 12px;
}

.seran-hc__intro p:last-child {
	margin-bottom: 0;
	color: var(--sg-ink);
}

.seran-hc__h3 {
	margin: 0 0 10px;
	color: var(--sg-ink);
	font-family: var(--sg-font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
}

/* --- 가격 옵션 --- */

.seran-hc__price-block {
	margin-top: 14px;
}

.seran-hc__price-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 12px;
}

.seran-hc__price {
	padding: 15px var(--sg-gap);
	border: 1px solid var(--sg-line);
	border-radius: 12px;
	background: var(--sg-paper);
}

.seran-hc__price-name {
	margin: 0 0 6px;
	color: var(--sg-ink-2);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.seran-hc__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.seran-hc__price-regular {
	color: var(--sg-ink-3);
	text-decoration: line-through;
}

.seran-hc__price-sale {
	color: var(--sg-ink);
	font-size: 18px;
	font-weight: 800;
}

/* 절약 뱃지 — 올리브 계열(토큰)로 "할인" 의미를 준다. */
.seran-hc__price-save {
	margin-left: auto;
	padding: 2px 10px;
	border: 1px solid var(--sg-leaf);
	border-radius: 999px;
	background: var(--sg-mega);
	color: var(--sg-olive-dark);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.seran-hc__reserve {
	margin: 18px 0 0;
}

/* --- 하단 1열 --- */

.seran-hc__bottom {
	margin-top: var(--sg-gap);
}

.seran-hc__card {
	margin-bottom: var(--sg-gap);
	padding: var(--sg-gap);
	border: 1px solid var(--sg-line);
	border-radius: 16px;
	background: var(--sg-paper);
}

.seran-hc__card:last-child {
	margin-bottom: 0;
}

.seran-hc__body,
.seran-hc__content {
	color: var(--sg-ink-2);
	font-size: 16px;
	line-height: 1.8;
	word-break: keep-all;
}

.seran-hc__body p,
.seran-hc__content p {
	margin: 0 0 12px;
}

.seran-hc__body p:last-child,
.seran-hc__content p:last-child {
	margin-bottom: 0;
}

.seran-hc__body ul,
.seran-hc__body ol,
.seran-hc__content ul,
.seran-hc__content ol {
	margin: 0 0 12px;
	padding-left: 1.25em;
}

.seran-hc__body li,
.seran-hc__content li {
	margin-bottom: 8px;
}

.seran-hc__body li::marker,
.seran-hc__content li::marker {
	color: var(--sg-accent);
}

.seran-hc__content h2 {
	margin: 28px 0 12px;
	font-size: 24px;
}

.seran-hc__content h3 {
	margin: 24px 0 10px;
	font-size: 20px;
}

.seran-hc__content h4 {
	margin: 20px 0 8px;
	font-size: 18px;
}

.seran-hc__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sg-radius);
}

.seran-hc__content a {
	color: var(--sg-accent-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* items_html 은 운영자가 붙여 넣은 표 마크업이라 폭이 넘칠 수 있다. */
.seran-hc__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.seran-hc__table-wrap img {
	max-width: 100%;
	height: auto;
}

/* ============================================================
   7. 건강검진 목록 그리드 (.seran-hc-list)
============================================================ */

.seran-hc-list {
	max-width: var(--sg-wrap);
	margin: 0 auto;
	padding: 40px var(--sg-pad);
}

.seran-hc-list__h {
	margin: 0 0 26px;
	color: var(--sg-ink);
	font-family: var(--sg-font-display);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -1.5px;
	line-height: 1.4;
	text-align: center;
	word-break: keep-all;
}

.seran-hc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.seran-hc-grid[data-columns="1"] {
	grid-template-columns: minmax(0, 1fr);
}

.seran-hc-grid[data-columns="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.seran-hc-grid[data-columns="4"] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.seran-hc-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--sg-line);
	border-radius: 16px;
	background: var(--sg-paper);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.seran-hc-card:hover {
	transform: translateY(-3px);
	border-color: var(--sg-accent-soft);
	box-shadow: 0 12px 26px rgba(246, 139, 26, 0.14);
}

.seran-hc-card__thumb {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--sg-line-soft);
}

.seran-hc-card__thumb::before {
	content: "";
	display: block;
	aspect-ratio: 4 / 3;
}

.seran-hc-card__thumb img,
.seran-hc-card__noimg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.seran-hc-card__noimg {
	background: linear-gradient(135deg, var(--sg-warm) 0%, var(--sg-mega) 100%);
}

.seran-hc-card__body {
	flex: 1 1 auto;
	padding: 20px 20px 8px;
}

.seran-hc-card__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
}

.seran-hc-card__title {
	margin: 0;
	font-family: var(--sg-font-display);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.45;
	word-break: keep-all;
}

.seran-hc-card__title a {
	color: var(--sg-ink);
	text-decoration: none;
}

.seran-hc-card__title a:hover {
	color: var(--sg-accent-strong);
}

.seran-hc-card__desc {
	margin: 10px 0 0;
	color: var(--sg-ink-2);
	font-size: 15px;
	line-height: 1.7;
	word-break: keep-all;
}

.seran-hc-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 20px 20px;
}

.seran-hc-card__price {
	color: var(--sg-accent-strong);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
}

.seran-hc-card__price small {
	margin-left: 2px;
	color: var(--sg-ink-3);
	font-size: 13px;
	font-weight: 500;
}

.seran-hc-card__more {
	color: var(--sg-ink-2);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.seran-hc-card__more::after {
	content: " →";
	color: var(--sg-accent);
}

.seran-hc-card__more:hover {
	color: var(--sg-accent-strong);
}

/* ============================================================
   반응형 — 구 사이트 브레이크포인트(991 / 767) + 검진 카드 전용(1100 / 960 / 640)
============================================================ */

@media (max-width: 1100px) {
	.seran-hc__top {
		grid-template-columns: 1fr 1.2fr;
	}
}

@media (max-width: 991px) {
	.seran-guide__hero {
		min-height: 46vh;
	}

	.seran-guide__hero-inner {
		padding: 44px var(--sg-pad);
	}

	.seran-guide__title {
		font-size: 38px;
		letter-spacing: -1px;
		line-height: 1.2;
	}

	.seran-guide__body {
		padding-top: 40px;
		font-size: 15px;
		line-height: 1.6;
	}

	.seran-guide__body h2 {
		margin-top: 44px;
		font-size: 30px;
		letter-spacing: -1px;
		line-height: 1.2;
	}

	.seran-guide__body h3 {
		margin-top: 38px;
		font-size: 27px;
		letter-spacing: -1px;
		line-height: 1.3;
	}

	.seran-guide__body h4 {
		font-size: 22px;
		line-height: 1.4;
	}

	.seran-guide__body h5 {
		font-size: 17px;
		line-height: 1.7;
	}

	.seran-guide__body h6 {
		font-size: 16px;
		font-weight: 700;
		line-height: 1.5;
	}

	.seran-guide__body p,
	.seran-guide__body li {
		font-size: 15px;
		line-height: 1.6;
	}

	.seran-guide__section,
	.seran-guide__section--exams,
	.seran-guide__section--cases {
		padding: 48px var(--sg-pad);
	}

	.seran-guide__cta {
		padding: 40px 0 46px;
	}

	.seran-hc-grid,
	.seran-hc-grid[data-columns="4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 960px) {
	/* 상단 1열: 썸네일 → 헤더 */
	.seran-hc__top {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.seran-guide__hero {
		min-height: 0;
	}

	.seran-guide__hero-inner {
		padding: 36px var(--sg-pad);
	}

	.seran-guide__title {
		font-size: 28px;
		line-height: 1.3;
	}

	.seran-guide__lede {
		font-size: 16px;
		line-height: 1.5;
	}

	.seran-guide__btn {
		width: 100%;
		justify-content: center;
	}

	.seran-guide__body {
		padding-top: 32px;
	}

	.seran-guide__body h2,
	.seran-guide__body h3 {
		font-size: 20px;
		letter-spacing: -0.5px;
		line-height: 1.5;
	}

	.seran-guide__body h4,
	.seran-guide__body h5,
	.seran-guide__body h6 {
		font-size: 17px;
		line-height: 1.6;
	}

	.seran-guide__section,
	.seran-guide__section--exams,
	.seran-guide__section--cases {
		padding: 36px var(--sg-pad);
	}

	.seran-hc-grid,
	.seran-hc-grid[data-columns="2"],
	.seran-hc-grid[data-columns="4"] {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	/* 구 스니펫 063: 모바일은 바깥 여백 15px + 카드 패딩 축소 */
	.seran-hc {
		--sg-gap: 15px;

		padding: 20px var(--sg-pad) 48px;
	}

	.seran-hc__top {
		gap: 0;
	}

	.seran-hc__head,
	.seran-hc__card {
		margin-bottom: 15px;
		padding: 30px 20px;
	}

	.seran-hc__intro {
		margin-bottom: 20px;
		padding: 30px 20px;
	}

	.seran-hc__price {
		padding: 15px 20px;
	}

	.seran-hc__title {
		font-size: 24px;
	}

	.seran-hc__reserve {
		text-align: center;
	}

	.seran-hc__price-save {
		margin-left: 0;
	}
}

/* ============================================================
   8. 인쇄 · 접근성
============================================================ */

@media (prefers-reduced-motion: reduce) {
	.seran-guide__btn,
	.seran-hc-card {
		transition: none;
	}

	.seran-guide__btn:hover,
	.seran-hc-card:hover {
		transform: none;
	}
}

@media print {
	.seran-guide__hero {
		min-height: 0;
	}

	.seran-guide__hero-img,
	.seran-guide__hero-cta,
	.seran-guide__cta,
	.seran-guide__section {
		display: none !important;
	}

	.seran-guide__body,
	.seran-hc {
		padding: 0;
	}
}


/* ============================================================
   건강검진 단일 지면 — sg 언어 (seran-symptom.css 뼈대 위)
   /healthcheck/{slug}/ 전용. [checkup_card] 카드(.seran-hc)는 그대로 둔다.
============================================================ */

.seran-hcsg .seran-hcsg__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 22px 0 0;
}

.seran-hcsg__badge {
	padding: 6px 13px;
	border: 1px solid rgba(49, 95, 82, .28);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	color: #315f52;
	background: rgba(255, 255, 255, .65);
}

/* 히어로 가격 — 검진은 '얼마인가'가 첫 질문이라 제목 바로 아래에서 끝낸다.
   별도의 가격 절을 두지 않으므로 구성이 여럿이면 여기에 전부 적는다. */
.seran-hcsg__prices {
	margin: 22px 0 0;
	max-width: 460px;
}

.seran-hcsg__price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 9px 0;
}

/* 구성이 둘 이상일 때만 줄을 나눈다 — 한 줄짜리에 선을 그으면 표처럼 보인다. */
.seran-hcsg__prices.is-multi .seran-hcsg__price-row + .seran-hcsg__price-row {
	border-top: 1px dotted rgba(30, 37, 35, .18);
}

.seran-hcsg__price-name {
	color: #6a716e;
	font-size: 14px;
	word-break: keep-all;
}

.seran-hcsg__price-amount {
	display: flex;
	align-items: baseline;
	gap: 9px;
	white-space: nowrap;
}

.seran-hcsg__price-amount del {
	color: #9aa39d;
	font-size: 13.5px;
}

.seran-hcsg__price-amount strong {
	font-family: var(--sg-serif);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 600;
	letter-spacing: -.04em;
	color: var(--sg-ink);
}

/* 구성이 여럿이면 금액을 조금 줄여 제목이 계속 주인공이게 둔다. */
.seran-hcsg__prices.is-multi .seran-hcsg__price-amount strong {
	font-size: clamp(19px, 1.9vw, 23px);
}

.seran-hcsg__price-amount em {
	font-style: normal;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--sg-orange);
}

/* 소개 — 글 + 정사각 사진 2단(증상가이드 도입부와 같은 판형). */
.seran-hcsg__intro-wrap.has-image {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}

.seran-hcsg__fig {
	margin: 0;
	border-radius: var(--sg-radius);
	overflow: hidden;
	background: var(--sg-soft);
}

.seran-hcsg__fig img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 권장 대상 — 사진이 있으면 글 옆에 정사각으로 세운다(소개 절과 같은 판형). */
.seran-hcsg__target-wrap.has-image {
	display: grid;
	grid-template-columns: 1fr minmax(0, 420px);
	gap: 60px;
	align-items: start;
}

.seran-hcsg__fig--square {
	aspect-ratio: 1 / 1;
}

.seran-hcsg__fig--square img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 860px) {
	.seran-hcsg__target-wrap.has-image {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}

/* 권장 대상 — 목록을 초록 체크로. */
.seran-hcsg__target ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.seran-hcsg__target li {
	position: relative;
	padding-left: 30px;
	font-size: 16px;
	line-height: 1.75;
}

.seran-hcsg__target li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: .5em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--sg-green);
}

/* 검사 항목 표 — sg 톤(상단 굵은 선 + 점선 행). */
.seran-hcsg__items table {
	width: 100%;
	border-collapse: collapse;
	border-top: 1.5px solid var(--sg-ink);
	font-size: 14.5px;
}

.seran-hcsg__items th,
.seran-hcsg__items td {
	padding: 15px 12px;
	border-bottom: 1px dotted var(--sg-line);
	text-align: left;
	vertical-align: top;
	word-break: keep-all;
}

.seran-hcsg__items thead th {
	border-bottom: 1px solid var(--sg-line);
	color: #7d8581;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: none;
}

.seran-hcsg__items tbody th {
	font-weight: 700;
	color: var(--sg-ink);
	white-space: nowrap;
}

/*
 * 영양수액 차림표 — 금액 칸은 오른쪽으로 몰아 세로줄을 맞춘다(값 비교가 이 표의 목적이다).
 * 수액 이름 뒤의 부제(글루타민·VIP A 같은 구성 이름)는 한 급 작게 흐리게 두어
 * 이름과 구성이 한눈에 갈리게 한다.
 */
.seran-hcsg__items td.is-price {
	text-align: right;
	white-space: nowrap;
	font-weight: 700;
	color: var(--sg-green-deep, var(--sg-green));
}

.seran-hcsg__items tbody th .is-sub {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sg-green);
}

@media (max-width: 560px) {
	.seran-hcsg__items tbody th { white-space: normal; }
}

@media (max-width: 860px) {
	.seran-hcsg__intro-wrap.has-image {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}