/*
 * seran-home.css — 홈 셸(front-page.php) + 전역 신뢰 스트립
 *
 *   S1 .seran-hero            풀폭 배경 배너 (PC/모바일 이미지 분기)
 *   S2 .seran-home__bodymap   [symptom_body_map] 섹션 셸 + 하단 웨이브
 *   S3 .seran-home__sliders   [case_banner_slider] · 헤드라인 · [exam_slider] 셸 + 상단 웨이브
 *   S4 .seran-home__checkup   검진 카드 3장 + [scrolling_text]
 *   S5 .seran-trust           신뢰 스트립 (검사·사례 상세도 공유하는 전역 파셜)
 *
 * 위젯 내부(.sbm/.exam-slider/.cbs/.stx)는 seran-widgets.css 소관 — 여기서 건드리지 않는다.
 * 색은 전부 seran-tokens.css 토큰. 하드코딩 hex 금지(CONTRACT-FRONT §0-4).
 * 히어로 배경 URL 2개만 PHP 가 --seran-hero-pc / --seran-hero-mobile 로 주입한다.
 *
 * 계측 출처: _audit/rendered/home.html (Brizy 컴파일 CSS 파싱)
 *   분기점 991px / 768px — 구 사이트와 동일.
 *
 * 소유: home-page (CONTRACT-FRONT §3)
 */

/* ============================================================
   0. 셸 · 유틸
============================================================ */

.seran-home {
	/* 위젯의 100vw 풀블리드(.cbs/.stx)가 가로 스크롤을 만들지 않도록 잘라낸다.
	   overflow:hidden 과 달리 clip 은 sticky/스크롤 컨테이너를 만들지 않는다. */
	overflow-x: clip;
	font-family: var(--seran-font);
	color: var(--seran-ink);
}

/* 홈 셸의 박스 모델 — 위젯들이 border-box 를 전제로 padding 을 잡는다.
   (25ec271 에서 신뢰 스트립을 떼어내며 이 선언이 아래 규칙에 붙어버렸고,
    그 바람에 .seran-home 의 모든 자손이 width:100% 를 뒤집어써 알약 버튼이
    한 줄짜리 막대로 늘어났다. 셀렉터를 다시 분리한다.) */
.seran-home *,
.seran-home *::before,
.seran-home *::after {
	box-sizing: border-box;
}

.seran-home__section {
	position: relative;
	width: 100%;
}

/* 위젯이 스스로 max-width 를 갖는 구간(S2·S3)은 셸이 폭을 강제하지 않는다. */
.seran-home__stack {
	position: relative;
	z-index: 1;
}

/* 정적 콘텐츠 구간(S4·S5)의 컨테이너 — 구 사이트 1170px. */
.seran-home__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 15px;
}

.seran-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

/* ============================================================
   1. S1 — 히어로
   계측: PC(≥991px) min-height 700px · background-position 49% 87%
        모바일(≤767px) min-height 80vh · margin-top 5px · background-size cover
============================================================ */

.seran-hero {
	position: relative;
	width: 100%;
	min-height: 700px;
	margin: 0;
	background-color: var(--seran-bg-soft);
	background-image: var(--seran-hero-pc);
	background-repeat: no-repeat;
	background-position: 49% 87%;
	background-size: cover;
}

@media (max-width: 991px) {
	.seran-hero {
		min-height: 60vh;
		background-position: 50% 50%;
	}
}

@media (max-width: 767px) {
	.seran-hero {
		min-height: 80vh;
		margin-top: 5px;
		background-image: var(--seran-hero-mobile);
		background-position: 50% 50%;
		background-size: cover;
	}
}

/* ============================================================
   2. S2 — 바디맵 셸 (+ 하단 웨이브 디바이더)
   계측: 섹션 패딩 0 (모바일 0 15px), 하단 셰이프 1920×240 웨이브 100px
============================================================ */

.seran-home__bodymap {
	padding: 0;
}

@media (max-width: 991px) {
	.seran-home__bodymap {
		padding: 0 15px;
	}
}

/* ============================================================
   3. S3 — 사례 슬라이더 · 헤드라인 · 검사 슬라이더 (+ 상단 웨이브)
   계측: 섹션 패딩 15px 0 (태블릿 50px 15px · 모바일 25px 15px)
============================================================ */

.seran-home__sliders {
	padding: 15px 0;
}

@media (max-width: 991px) {
	.seran-home__sliders {
		padding: 50px 15px;
	}
}

@media (max-width: 767px) {
	.seran-home__sliders {
		padding: 25px 15px;
	}
}

/* 웨이브 디바이더 — S2 하단 / S3 상단이 맞물려 한 벌의 물결을 만든다.
   원본은 base64 SVG(1920×240, rgba(243,156,15,.23))였고 값만 옮겼다. */
.seran-home__bodymap::after,
.seran-home__sliders::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 0;
	right: 0;
	height: 100px;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1920 240' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cg fill='rgba(243,156,15,0.23)' fill-rule='nonzero'%3E%3Cpath d='M1920 129.751C1760 191.917 1600 223 1440 223c-152.892 0-399.532-31.384-620.475-53.784C687 191 557.108 205.465 470 206c-162-2-318.667-21.333-470-58V0h1920v129.751z' opacity='.203'/%3E%3Cpath d='M230 190c160 33.333 320 50 480 50 240 0 776-105 923-115 98-6.667 193.667 1 287 23V0H0v148c45.073 10.416 81.073 18.083 108 23 26.927 4.917 67.594 11.25 122 19z' opacity='.3'/%3E%3Cpath d='M0 148c160 38.476 320 57.714 480 57.714 240 0 720-118.71 960-117.235 160 .983 320 20.824 480 59.521V0H0v148z'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100px;
	pointer-events: none;
}

.seran-home__bodymap::after {
	bottom: 0;
	transform: scale(1.02) rotate(180deg);
}

.seran-home__sliders::before {
	top: 0;
	transform: scale(1.02);
}

@media (max-width: 767px) {
	.seran-home__bodymap::after,
	.seran-home__sliders::before {
		height: 48px;
		background-size: 100% 48px;
	}
}

/* 헤드라인 — 지면의 h2 규격을 그대로 쓴다.
   예전엔 55px/42px/35px/29px 을 이 파일에 직접 박아 두고 중단점까지 따로 갖고 있었다
   (구 사이트 계측값). 그래서 콘솔에서 제목 글꼴·크기 체계를 바꿔도 이 한 줄만
   따로 놀았다. 크기·행간을 토큰 시트(seran-tokens.css)의 h2 값에 연결한다 —
   --seran-fs-h2 는 782px 아래에서 자기 중단점을 이미 갖고 있어 여기서 다시 나눌 필요가 없다. */
.seran-home__headline {
	margin: 10px 0;
	padding: 50px 15px 0;
	font-family: var(--seran-font-display);
	font-size: var(--seran-fs-h2);
	font-weight: 400;
	line-height: var(--seran-lh-tight);
	letter-spacing: 0;
	text-align: center;
	color: var(--seran-ink);
}

/* PC 는 한 줄, 모바일에서만 줄바꿈 (구 사이트는 블록 2벌로 분기했다). */
.seran-home__headline-br {
	display: none;
}

@media (max-width: 767px) {
	.seran-home__headline-br {
		display: inline;
	}
}

/* ============================================================
   4. S4 — 검진 카드 3장 + 배경 마퀴
   계측: 섹션 패딩 134px 0 41px · 배경 #F6F8F2 · 컬럼 33.3%(패딩 5px 15px)
============================================================ */

.seran-home__checkup {
	padding: 134px 0 41px;
	background-color: var(--seran-bg-mega);
}

@media (max-width: 991px) {
	.seran-home__checkup {
		padding: 50px 15px;
	}
}

@media (max-width: 767px) {
	.seran-home__checkup {
		padding: 25px 15px;
	}
}

.seran-checkup-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 30px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
}

.seran-checkup-cards__item {
	margin: 0;
}

.seran-checkup-cards__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.seran-checkup-cards__link {
	display: block;
	border-radius: var(--seran-radius);
	transition: transform 0.25s ease, filter 0.25s ease;
}

.seran-checkup-cards__link:hover,
.seran-checkup-cards__link:focus-visible {
	transform: translateY(-4px);
	filter: brightness(1.03);
}

.seran-checkup-cards__link:focus-visible {
	outline: 2px solid var(--seran-orange);
	outline-offset: 3px;
}

/* 마퀴는 자체적으로 100vw 풀블리드다 — 셸은 위치만 잡는다. */
.seran-home__marquee {
	position: relative;
	z-index: 0;
}

/*
 * 검진 카드 3장은 모바일에서도 한 줄에 셋을 유지한다.
 * 세로로 쌓으면 화면 하나를 통째로 먹어 아래 마퀴·신뢰 스트립까지 밀린다.
 * 좁아지는 만큼 간격만 줄여 카드 폭을 확보한다(390px 기준 카드 약 111px).
 */
@media (max-width: 640px) {
	.seran-checkup-cards {
		gap: 10px;
	}
}

@media (max-width: 400px) {
	.seran-checkup-cards {
		gap: 7px;
	}
}

/* ============================================================
   5. S5 — 신뢰 스트립 (전역 파셜)
   계측: 섹션 패딩 75px 0 76px · h3 32/27/20px · p 16/15px · h6 20/16/17px
============================================================ */


@media (max-width: 991px) {
}

@media (max-width: 767px) {
}







@media (max-width: 767px) {
}









@media (max-width: 991px) {


}

@media (max-width: 767px) {


	/* 모바일에서는 두 행 모두 이미지 → 글 순서로 통일 (원본 DOM 순서와 동일한 인상). */



}

/* ============================================================
   6. 모션 저감
============================================================ */

@media (prefers-reduced-motion: reduce) {
	.seran-checkup-cards__link {
		transition: none;
	}

	.seran-checkup-cards__link:hover,
	.seran-checkup-cards__link:focus-visible {
		transform: none;
	}
}


/* 히어로 제목 — 마크업은 있으나 정의가 빠져 있었다(커버리지 감사). */
.seran-hero__title {
	margin: 0;
	font-family: var(--seran-font-display, 'Noto Sans KR', sans-serif);
	font-size: clamp(28px, 4.6vw, 55px);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--seran-ink, #333);
	text-wrap: balance;
}

/* ============================================================
   S5 신뢰 스트립 — 시안(CraftStudio 1223 .expertise) 톤
   푸터가 전 지면에 렌더하므로 이 블록 하나가 사이트 전체를 바꾼다
   (templates/parts/seran-trust-strip.php · footer-seran.php 에서 호출).
============================================================ */
.seran-trust {
	--st-ink: #202825;
	--st-serif: "Noto Serif KR", "Nanum Myeongjo", Georgia, serif;
	background: var(--st-ink);
	color: #fff;
	padding: clamp(64px, 8vw, 106px) 0 clamp(72px, 9vw, 118px);
}
.seran-trust *,
.seran-trust *::before,
.seran-trust *::after { box-sizing: border-box; }

.seran-trust__inner {
	width: min(calc(100% - 48px), 1240px);
	margin-inline: auto;
}

.seran-trust__head { text-align: center; margin-bottom: 42px; }
.seran-trust__eyebrow {
	margin: 0 0 8px;
	font-size: 11px;
	letter-spacing: .18em;
	color: #aab4af;
}
.seran-trust__heading {
	margin: 0;
	font-family: var(--st-serif);
	font-size: clamp(26px, 3.4vw, 42px);
	font-weight: 500;
	letter-spacing: -.04em;
	line-height: 1.3;
	color: #fff;
	word-break: keep-all;
}

.seran-trust__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.seran-trust__card {
	position: relative;
	height: 610px;
	border-radius: 26px;
	overflow: hidden;
}
.seran-trust__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
.seran-trust__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(13, 20, 18, .88) 0%, rgba(13, 20, 18, .24) 60%, rgba(13, 20, 18, .06) 100%);
}
.seran-trust__card--warm .seran-trust__overlay {
	background: linear-gradient(to top, rgba(39, 26, 19, .88) 0%, rgba(38, 24, 15, .2) 60%, rgba(20, 10, 5, .04) 100%);
}

.seran-trust__copy {
	position: absolute;
	left: 42px;
	right: 42px;
	bottom: 42px;
}
.seran-trust__kicker {
	font-size: 10px;
	letter-spacing: .17em;
	color: #d8dedb;
}
.seran-trust__title {
	margin: 11px 0 12px;
	font-family: var(--st-serif);
	font-size: clamp(21px, 2.2vw, 30px);
	font-weight: 500;
	line-height: 1.42;
	letter-spacing: -.03em;
	color: #fff;
	word-break: keep-all;
}
.seran-trust__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: #e0e5e2;
	word-break: keep-all;
}
.seran-trust__line {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .25);
	margin: 24px 0 18px;
}
.seran-trust__note {
	display: block;
	font-size: 12px;
	line-height: 1.7;
	color: #c7cfcb;
	word-break: keep-all;
}

@media (max-width: 1100px) {
	.seran-trust__card { height: 540px; }
	.seran-trust__copy { left: 30px; right: 30px; bottom: 30px; }
}
@media (max-width: 820px) {
	.seran-trust__inner { width: min(calc(100% - 36px), 1240px); }
	.seran-trust__grid { grid-template-columns: 1fr; }
	.seran-trust__card { height: 540px; }
}
@media (max-width: 540px) {
	.seran-trust__inner { width: min(calc(100% - 28px), 1240px); }
	.seran-trust { padding: 74px 0; }
	.seran-trust__card { height: 500px; border-radius: 20px; }
	.seran-trust__copy { left: 24px; right: 24px; bottom: 25px; }
}