/*!
 * seran-exam.css — 검사(clinic_equipment) 상세 지면 (모듈: equipment-template)
 *
 * 소유: single-clinic_equipment.php / inc/class-seran-exam-view.php 전용.
 * 재현 기준: _audit/rendered/equipment_coagulation-test-pt-aptt.html + 구 스니펫 048 의 룩.
 *
 * 규칙 (CONTRACT-FRONT §0):
 *   - Brizy 산 클래스(brz-*)·인라인 style 없음. 인스턴스별 동적 값은 히어로 배경 두 개
 *     (--exam-hero-wide / --exam-hero-mobile) 뿐이며 PHP 가 wp_add_inline_style 로 주입한다.
 *   - 색·간격은 전부 seran 디자인 토큰(assets/css/seran-tokens.css · static-pages 소유)에서 온다.
 *     아래 --sx-* 는 그 토큰의 별칭 레이어이며, 토큰 시트가 아직 실리지 않은 환경에서만
 *     계약서 §1 값(및 구 048 의 값)이 폴백으로 쓰인다. 컴포넌트 규칙은 --sx-* 만 참조한다.
 *   - 신규 토큰 요청 2건: --seran-line-warm(#ffe0b9) · --seran-bg-cream(#fffdf7)
 *     → _wiring/equipment-template.md ⑤ 참조.
 *
 * 선택자 스코프 주의:
 *   seran-widgets.css 가 .exam-title / .exam-subtitle / .exam-line 을 전역 1클래스 규칙으로
 *   쓰고 있다. 충돌을 피하려고 이 시트의 지면 규칙은 전부 .seran-exam 하위로 스코프한다
 *   (모달만 지면 밖에 출력되므로 .exam-image-modal 단독).
 */

/* ============================================================
   0. 스코프 · 토큰 별칭
============================================================ */

.seran-exam,
.exam-image-modal {
	--sx-accent: var(--seran-orange, #f68b1a);
	--sx-accent-soft: var(--seran-orange-soft, #f6a04d);
	--sx-accent-strong: var(--seran-cta, #d76e0f);
	--sx-olive: var(--seran-olive, #a9bc0d);
	--sx-ink: var(--seran-ink, #333);
	--sx-ink-2: var(--seran-ink-2, #555);
	--sx-ink-3: var(--seran-ink-3, #888);
	--sx-line: var(--seran-line, #ddd);
	--sx-warm: var(--seran-bg-warm, #fff7ef);
	--sx-mega: var(--seran-bg-mega, #f6f8f2);
	--sx-soft: var(--seran-bg-soft, #fafafa);

	/* 흰색은 브랜드 토큰이 아니다 — style.css 가 --brand-secondary 를 크림(#f0e9d5)으로
	   재정의해 두고 있어 카드/히어로 텍스트가 크림빛으로 물드는 사고를 막는다.
	   (peer 모듈 seran-case.css 도 동일하게 #fff 리터럴을 쓴다.) */
	--sx-surface: #fff;

	/* 신규 토큰 요청분 — 폴백은 구 048 의 값 그대로. */
	--sx-border-soft: var(--seran-line-warm, #ffe0b9);
	--sx-step-bg: var(--seran-bg-cream, #fffdf7);

	--sx-radius: var(--seran-radius, 12px);
	--sx-radius-lg: var(--seran-radius-lg, 20px);
	--sx-radius-card: 16px;
	--sx-font: var(--seran-font, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif);
	--sx-font-display: var(--seran-font-display, var(--sx-font));

	--sx-wrap: 1040px;
	--sx-hero-wrap: 1170px;
	--sx-shadow-card: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.seran-exam {
	font-family: var(--sx-font);
	color: var(--sx-ink);
	line-height: 1.7;
}

.seran-exam *,
.seran-exam *::before,
.seran-exam *::after {
	box-sizing: border-box;
}

.seran-exam .exam-wrap {
	max-width: var(--sx-wrap);
	margin: 0 auto;
	padding: 0 18px;
}

/* ============================================================
   1. 히어로 — 배경(와이드/모바일) + 검사명 + 영문명 + 예약 CTA
============================================================ */

.seran-exam .exam-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--sx-ink);
	background-image: var(--exam-hero-mobile, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.seran-exam .exam-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0.08) 100%);
}

.seran-exam .exam-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	max-width: var(--sx-hero-wrap);
	min-height: 200px;
	margin: 0 auto;
	padding: 75px 18px;
}

.seran-exam .exam-hero__title {
	margin: 0;
	font-family: var(--sx-font-display);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -1.5px;
	color: var(--sx-surface);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.seran-exam .exam-hero__en {
	margin: 0;
	font-family: var(--sx-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.seran-exam .exam-hero__cta {
	margin-top: 10px;
}

/* 히어로 CTA 를 끈 구성에서만 나오는 폴백 — 제목 아래 독립 버튼 (CONTRACT-FRONT §5). */
.seran-exam .exam-hero__cta--standalone {
	margin-top: 0;
	padding-top: 28px;
}

/* 예약 버튼 자체의 룩은 booking-front.css 소유 — 여기서는 배치만 손댄다. */
.seran-exam .exam-hero__cta .seran-bk-launch {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   2. 본문 셸 · 섹션 머리
============================================================ */

.seran-exam .exam-body {
	padding: 40px 0 80px;
}

.seran-exam .exam-section {
	margin-bottom: 32px;
}

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

.seran-exam .exam-section__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	font-family: var(--sx-font-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.36px;
	color: var(--sx-ink);
}

.seran-exam .exam-section__title::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	height: 30px;
	border-radius: 999px;
	background: var(--sx-accent);
}

.seran-exam .exam-section__title.is-green::before {
	background: var(--sx-olive);
}

.seran-exam .exam-section__subtitle {
	margin: 0;
	padding-left: 16px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.31px;
	color: var(--sx-ink-3);
}

.seran-exam .exam-section-line {
	height: 1px;
	margin: 30px 0;
	border: 0;
	background: var(--sx-line);
}

/* ============================================================
   3. 카드 (본문 서식 공통)
============================================================ */

.seran-exam .exam-card {
	padding: 30px;
	border-radius: var(--sx-radius-card);
	background: var(--sx-surface);
}

.seran-exam .exam-card--soft {
	background: var(--sx-warm);
}

.seran-exam .exam-card--soft-green {
	background: var(--sx-mega);
}

.seran-exam .exam-card > :first-child {
	margin-top: 0;
}

.seran-exam .exam-card > :last-child,
.seran-exam .exam-card p:last-child {
	margin-bottom: 0;
}

.seran-exam .exam-card p {
	margin: 0 0 14px;
}

.seran-exam .exam-card h3,
.seran-exam .exam-card h4,
.seran-exam .exam-card h5,
.seran-exam .exam-card h6 {
	margin: 22px 0 10px;
	font-family: var(--sx-font-display);
	color: var(--sx-ink);
	line-height: 1.4;
}

.seran-exam .exam-card ul,
.seran-exam .exam-card ol {
	margin: 10px 0 14px;
	padding-left: 20px;
}

.seran-exam .exam-card li {
	margin-bottom: 12px;
}

.seran-exam .exam-card li:last-child {
	margin-bottom: 0;
}

.seran-exam .exam-card strong,
.seran-exam .exam-card b {
	font-weight: 700;
	color: var(--sx-ink);
}

.seran-exam .exam-card a {
	color: var(--sx-accent-strong);
	text-underline-offset: 3px;
}

/* 카드 안 소제목 (검사 전 주의사항 · 진행 과정) — 위젯 시트의 .exam-subtitle 과 이름이 겹쳐
   반드시 .seran-exam 스코프로 이긴다. */
.seran-exam .exam-subtitle {
	margin: 0 0 10px;
	padding-left: 0;
	font-family: var(--sx-font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.2px;
	color: var(--sx-ink);
}

.seran-exam .exam-precaution-text {
	margin: 4px 0 0;
	font-size: 16px;
	color: var(--sx-ink);
}

.seran-exam .exam-precaution-text p {
	margin: 6px 0;
}

.seran-exam .exam-precaution-text > :last-child {
	margin-bottom: 0;
}

/* ============================================================
   4. 섹션 레이아웃 (적응증 · 검사 결과 · 검사 과정)
============================================================ */

.seran-exam .exam-indications-layout,
.seran-exam .exam-results-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(260px, 1.4fr);
	gap: 20px;
	align-items: start;
}

.seran-exam .exam-indications-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	min-height: 100%;
}

.seran-exam .exam-results-layout .exam-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
}

.seran-exam .exam-results-images {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100%;
}

.seran-exam .exam-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
}

.seran-exam .exam-card--precaution {
	margin-bottom: 18px;
}

/* ============================================================
   5. 설명 이미지 (클릭 → 확대 모달). 마크업은 <button> 이므로 버튼 리셋이 필요하다.
============================================================ */

.seran-exam .exam-illustration {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.seran-exam .exam-illustration__inner {
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--sx-border-soft);
	border-radius: 18px;
	background: var(--sx-surface);
	box-shadow: var(--sx-shadow-card);
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

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

.seran-exam .exam-illustration__inner:hover {
	opacity: 0.88;
}

.seran-exam .exam-illustration__inner:focus-visible {
	outline: 2px solid var(--sx-accent);
	outline-offset: 3px;
}

/* ============================================================
   6. 검사 과정 아코디언
   no-JS 폴백: html.js 가 붙기 전(=스크립트 없음)에는 모든 단계가 펼쳐진 상태로 읽힌다.
   header.php 가 첫 페인트 전에 documentElement 에 .js 를 붙인다.
============================================================ */

.seran-exam .exam-card--steps {
	padding-top: 16px;
}

.seran-exam .exam-step-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.seran-exam .exam-step {
	overflow: hidden;
	border: 1px solid var(--sx-border-soft);
	border-radius: var(--sx-radius);
	background: var(--sx-step-bg);
}

.seran-exam .step-header {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) 24px;
	gap: 10px;
	align-items: center;
	width: 100%;
	padding: 12px;
	border: 0;
	border-radius: var(--sx-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.seran-exam .step-header:hover {
	background: rgba(246, 139, 26, 0.06);
}

.seran-exam .step-header:focus-visible {
	outline: 2px solid var(--sx-accent);
	outline-offset: -2px;
}

.seran-exam .step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--sx-accent);
	color: var(--sx-surface);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
}

.seran-exam .step-title-group {
	display: block;
	min-width: 0;
}

.seran-exam .step-title-group strong {
	display: block;
	font-size: 0.97rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sx-ink);
}

.seran-exam .step-brief {
	display: block;
	margin: 2px 0 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--sx-ink-2);
}

.seran-exam .step-toggle {
	justify-self: center;
	width: 0;
	height: 0;
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
	border-top: 8px solid var(--sx-accent);
	transition: transform 0.18s ease-out;
}

.seran-exam .exam-step.is-open .step-toggle {
	transform: rotate(180deg);
}

.seran-exam .step-body {
	display: grid;
	grid-template-rows: 1fr;
	padding: 0 12px 12px;
}

.seran-exam .step-body__inner {
	min-height: 0;
	overflow: hidden;
}

.seran-exam .step-body p {
	margin: 0 0 10px;
	font-size: 0.9rem;
	color: var(--sx-ink);
}

.seran-exam .step-body p:last-child {
	margin-bottom: 0;
}

.seran-exam .step-body ul,
.seran-exam .step-body ol {
	margin: 0 0 10px;
	padding-left: 18px;
	font-size: 0.9rem;
}

/* JS 사용 가능한 환경에서만 접기 동작을 켠다. */
.js .seran-exam .step-body {
	grid-template-rows: 0fr;
	padding-top: 0;
	padding-bottom: 0;
	transition: grid-template-rows 0.22s ease-out, padding-bottom 0.22s ease-out;
}

.js .seran-exam .exam-step.is-open .step-body {
	grid-template-rows: 1fr;
	padding-bottom: 12px;
}

/* ============================================================
   7. 관련 진단사례 — 전폭 warm 배경 띠
   카드 자체의 룩은 related-content 모듈(seran-related.css) 소유. 여기서는 배경·머리글과
   그리드 정렬(중앙)만 담당한다.
============================================================ */

.seran-exam .exam-section--cases {
	margin: 60px 0;
	padding: 90px 0;
	background: var(--sx-warm);
}

.seran-exam .exam-cases-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 30px;
	text-align: center;
}

.seran-exam .exam-cases-title {
	margin: 0;
	font-family: var(--sx-font-display);
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -1px;
	color: var(--sx-ink);
}

.seran-exam .exam-cases-subtitle {
	margin: 0;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--sx-ink-3);
}

.seran-exam .exam-section--cases .case-cards-grid {
	justify-content: center;
}

/* ============================================================
   8. 구 본문 폴백 (구조화 메타가 하나도 없을 때만 노출)
============================================================ */

.seran-exam .exam-legacy {
	padding: 40px 0 0;
}

.seran-exam .exam-legacy img {
	max-width: 100%;
	height: auto;
}

/* ============================================================
   9. 이미지 확대 모달 (지면당 1개 · 지면 컨테이너 바깥에 출력)
============================================================ */

.exam-image-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.exam-image-modal.is-open {
	display: flex;
}

.exam-image-modal[hidden] {
	display: none;
}

.exam-image-modal .exam-modal-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.85);
}

.exam-image-modal .exam-modal-content {
	position: relative;
	z-index: 1;
	max-width: 90%;
	max-height: 90%;
}

.exam-image-modal .exam-modal-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 90vh;
	border-radius: var(--sx-radius);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.exam-image-modal .exam-modal-close {
	position: absolute;
	top: -45px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sx-surface);
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.exam-image-modal .exam-modal-close:hover {
	opacity: 0.7;
	transform: scale(1.15);
}

.exam-image-modal .exam-modal-close:focus-visible {
	outline: 2px solid var(--sx-accent);
	outline-offset: 3px;
}

.exam-image-modal .exam-modal-close svg {
	width: 28px;
	height: 28px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* 모달이 열려 있는 동안 배경 스크롤 잠금 (JS 가 <body> 에 부여). */
body.exam-modal-open {
	overflow: hidden;
}

/* ============================================================
   10. 반응형
============================================================ */

@media (min-width: 768px) {
	.seran-exam .exam-hero {
		background-image: var(--exam-hero-wide, none);
	}
}

@media (max-width: 991px) and (min-width: 768px) {
	.seran-exam .exam-hero__title {
		font-size: 38px;
		line-height: 1.2;
		letter-spacing: -1px;
	}

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

@media (max-width: 991px) {
	.seran-exam .exam-hero__inner {
		min-height: 160px;
		padding: 56px 18px;
	}

	.seran-exam .exam-body {
		padding: 38px 0 0;
	}

	.seran-exam .exam-section__title {
		font-size: 24px;
	}

	.seran-exam .exam-section__title::before {
		height: 24px;
	}

	.seran-exam .exam-section__subtitle {
		font-size: 18px;
	}

	.seran-exam .exam-section-line {
		margin: 20px 0;
	}

	.seran-exam .exam-card {
		padding: 30px 20px;
	}

	/* 적응증: 이미지 → 텍스트 카드 순서 */
	.seran-exam .exam-indications-layout {
		display: flex;
		flex-direction: column;
	}

	.seran-exam .exam-indications-layout .exam-illustration--indications {
		order: 1;
	}

	.seran-exam .exam-indications-content {
		order: 2;
	}

	/* 검사 결과: 이미지들 → 텍스트 카드 순서 */
	.seran-exam .exam-results-layout {
		display: flex;
		flex-direction: column;
	}

	.seran-exam .exam-results-images {
		order: 1;
	}

	.seran-exam .exam-results-layout .exam-card {
		order: 2;
	}

	/* 검사 과정: 요약 이미지 → 단계 카드 순서 */
	.seran-exam .exam-section--procedure .exam-two-col {
		display: flex;
		flex-direction: column;
	}

	.seran-exam .exam-section--procedure .exam-illustration--procedure {
		order: 1;
	}

	.seran-exam .exam-section--procedure .exam-card--steps {
		order: 2;
	}

	.seran-exam .exam-section--cases {
		margin: 40px 0;
		padding: 60px 0;
	}

	.seran-exam .exam-cases-title {
		font-size: 32px;
	}

	.seran-exam .exam-cases-subtitle {
		font-size: 20px;
	}

	.exam-image-modal .exam-modal-content {
		max-width: 95%;
		max-height: 95%;
	}

	.exam-image-modal .exam-modal-close {
		width: 36px;
		height: 36px;
	}

	.exam-image-modal .exam-modal-close svg {
		width: 32px;
		height: 32px;
	}

	.exam-image-modal .exam-modal-image {
		border-radius: 8px;
	}
}

@media (max-width: 767px) {
	.seran-exam .exam-hero__title {
		font-size: 28px;
		line-height: 1.3;
		letter-spacing: -1px;
	}

	.seran-exam .exam-hero__en {
		font-size: 17px;
		line-height: 1.6;
	}
}

/* ============================================================
   11. 접근성 — 모션 최소화
============================================================ */

@media (prefers-reduced-motion: reduce) {
	.seran-exam .exam-illustration__inner,
	.seran-exam .step-toggle,
	.js .seran-exam .step-body,
	.exam-image-modal .exam-modal-close {
		transition: none;
	}
}