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

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

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

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

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

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

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

.medisync01-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
============================================================ */

/* 히어로는 최대폭 1200px 규칙의 예외다 — 화면을 꽉 채워야 인상이 산다.
   높이를 고정하지 않고 **이미지 비율**로 잡는다: 알파돔 배너는 하단 인디고 밴드에
   "대학병원의 경험과 노하우를 갖춘 / 분과별 전문의가…" 문구가 들어 있어서,
   cover 로 잘라내면 그 문구가 사라진다. 비율을 맞추면 cover 여도 잘리지 않는다.
   (PC 2560×1067 = 2.4 / 모바일 800×1000 = 0.8) */
.medisync01-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 2560 / 1067;
	min-height: 360px;
	max-height: 760px;   /* 초광폭 화면에서 히어로만 지나치게 커지는 것을 막는다 */
	margin: 0;
	background-color: var(--medisync01-bg-soft);
	background-image: var(--medisync01-hero-pc);
	background-repeat: no-repeat;
	background-position: 50% 100%;   /* 잘려야 한다면 위쪽 여백부터 — 하단 문구를 지킨다 */
	background-size: cover;
}

@media (max-width: 991px) {
	.medisync01-hero {
		background-position: 50% 100%;
	}
}

@media (max-width: 767px) {
	.medisync01-hero {
		aspect-ratio: 800 / 1000;
		max-height: none;
		margin-top: 5px;
		background-image: var(--medisync01-hero-mobile);
		background-position: 50% 50%;
		background-size: cover;
	}
}

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

.medisync01-home__bodymap {
	padding: 0;
}

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

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

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

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

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

/* 웨이브 디바이더 — S2 하단 / S3 상단이 맞물려 한 벌의 물결을 만든다.
   원본은 base64 SVG(1920×240, 세란 주황 rgba(243,156,15,.23))였다.
   data URI 안이라 var() 를 못 쓰므로 --brand-accent(#C2E8FC) 를 rgba 로 풀어 적는다.
   하늘색이 주황보다 훨씬 밝아 .23 이면 흰 지면에서 사라지므로 알파를 .6 으로 올렸다. */
.medisync01-home__bodymap::after,
.medisync01-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(194,232,252,0.6)' 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 400px) {
	.medisync01-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) {
	.medisync01-checkup-cards__link {
		transition: none;
	}

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


/* 히어로 제목 — 마크업은 있으나 정의가 빠져 있었다(커버리지 감사). */
.medisync01-hero__title {
	margin: 0;
	font-family: var(--medisync01-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(--medisync01-ink, #333);
	text-wrap: balance;
}

/* ============================================================
   S5 신뢰 스트립 — 시안 Concept B(비대칭 분할)

   두 장을 같은 크기로 나란히 놓던 구조에서, 왼쪽 주 카드(사진 위 흰 글씨)와
   오른쪽 부 카드(흰 바탕 · 사진은 위쪽)로 무게를 나눈 판으로 바꿨다.
   머리말도 좌(표제) · 우(리드 문단) 비대칭이고, 맨 아래에 각주 줄이 붙는다.
   푸터가 전 지면에 렌더하므로 이 블록 하나가 사이트 전체를 바꾼다
   (templates/parts/medisync01-trust-strip.php · footer-seran.php 에서 호출).
============================================================ */
.medisync01-trust {
	/* 시안 Concept B(비대칭 분할)의 팔레트를 토큰으로 받는다.
	   폴백 hex 는 시안 원본값이라 토큰 시트가 없는 문맥에서도 인상이 유지된다.
	   (--medisync01-on-brand 는 이름은 "주색 위 전경색"이지만 값이 #FFFFFF 다.
	   흰색 토큰이 따로 없어 밴드 바닥색을 그것으로 잡는다.) */
	--st-band: var(--medisync01-on-brand, #fff);
	--st-navy: var(--brand-primary, #0d246f);          /* 표제 · 눈썹 · 각주 라벨 */
	--st-ink: var(--medisync01-ink-2, #171b24);        /* 흰 카드 안 본문 */
	--st-muted: var(--medisync01-ink-3, #697383);      /* 리드 · 설명 · 각주 */
	--st-line: var(--medisync01-line-warm, #e5eaf0);   /* 카드 테두리 · 구분선 */
	/* 알파돔은 세리프 표제를 쓰지 않는다 */
	--st-serif: var(--medisync01-font-display, "Noto Sans KR", sans-serif);
	background: var(--st-band);
	color: var(--st-ink);
	border-top: 1px solid var(--st-line);
	padding: clamp(64px, 8vw, 108px) 0 clamp(72px, 9vw, 112px);
}
.medisync01-trust *,
.medisync01-trust *::before,
.medisync01-trust *::after { box-sizing: border-box; }

.medisync01-trust__inner {
	/* 지면 최대폭은 토큰 하나로 모은다 */
	width: min(calc(100% - 48px), var(--medisync01-content-width, 1240px));
	margin-inline: auto;
}

/* 머리말도 비대칭 — 왼쪽에 표제, 오른쪽에 리드 문단을 밑선 맞춰 붙인다. */
.medisync01-trust__head {
	display: grid;
	grid-template-columns: 1fr minmax(300px, 430px);
	gap: 64px;
	align-items: end;
	margin-bottom: 54px;
	text-align: left;
}
.medisync01-trust__eyebrow {
	margin: 0;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--st-navy);
}
.medisync01-trust__heading {
	margin: 10px 0 0;
	font-family: var(--st-serif);
	font-size: clamp(32px, 4.2vw, 56px);
	font-weight: 760;
	letter-spacing: -.055em;
	line-height: 1.08;
	color: var(--st-navy);   /* 흰 면 위 표제 — 딥 인디고. 대비 약 13:1 */
	word-break: keep-all;
}
.medisync01-trust__lead {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--st-muted);
	word-break: keep-all;
}

/* 두 카드는 같은 무게가 아니다 — 왼쪽이 주(사진 위 글), 오른쪽이 부(흰 카드). */
.medisync01-trust__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr);
	gap: 18px;
	align-items: stretch;
}

.medisync01-trust__card { position: relative; }

/* ── 01 주 카드 — 사진 전면, 아래로 갈수록 인디고 베일, 흰 글씨 ── */
.medisync01-trust__card--primary {
	min-height: 600px;
	overflow: hidden;
	/* 오른쪽 아래만 크게 깎는 비대칭 모서리가 이 시안의 서명이다. */
	border-radius: 26px 26px 70px 26px;
	background: var(--medisync01-bg-warm, #eaf0f6);
}
/*
 * 사진은 절대배치로 카드를 채운다. min-height 만 있는 부모에 height:100% 를
 * 주면 백분율이 auto 로 풀려 사진이 무너진다.
 */
.medisync01-trust__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
.medisync01-trust__card--primary .medisync01-trust__img { object-position: center 35%; }
.medisync01-trust__overlay {
	position: absolute;
	inset: 0;
}
/*
 * 시안 원본은 58% 까지 거의 투명하다가 바닥에서만 짙어진다(.08 → .84).
 * 실제 사진에서는 그 구간에 흰 가운·CT 장비가 걸려 「01 · RADIOLOGY」 줄이
 * 통째로 묻혔다. 글이 시작되는 높이(약 60%)부터 확실히 깔리도록 당긴다.
 */
.medisync01-trust__card--primary .medisync01-trust__overlay {
	background: linear-gradient(180deg, rgba(9, 10, 115, .02) 16%, rgba(9, 10, 115, .26) 44%, rgba(6, 7, 80, .78) 64%, rgba(6, 7, 80, .94) 100%);
}

/* ── 02 부 카드 — 흰 바탕, 사진은 위쪽 절반, 글은 아래 ── */
.medisync01-trust__card--secondary {
	min-height: 600px;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	border: 1px solid var(--st-line);
	border-radius: 26px;
	overflow: hidden;
	background: var(--st-band);
}
.medisync01-trust__visual {
	position: relative;
	min-height: 310px;
	overflow: hidden;
	background: var(--medisync01-bg-mega, #f0f4f7);
}
.medisync01-trust__card--secondary .medisync01-trust__overlay {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(9, 10, 115, .08));
}

/* ── 카드 안 글 ── */
.medisync01-trust__card--primary .medisync01-trust__copy {
	position: absolute;
	z-index: 2;
	left: 34px;
	right: 34px;
	bottom: 30px;
	color: #fff;
	/*
	 * 글 8 · 엠블럼 2 로 나눈 두 칸. 글 칸에 minmax(0, 8fr) 을 쓰는 이유는
	 * fr 의 기본 최소폭이 auto(=내용 폭)라, 안 쪼개지는 긴 제목 한 줄이
	 * 칸을 밀어내 8:2 가 깨지기 때문이다.
	 */
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 2fr);
	gap: 26px;
	align-items: end;
}
.medisync01-trust__copy-main { min-width: 0; }

/* 오른쪽 2 할 — 흰 엠블럼을 글 바닥에 맞춰 세운다. */
.medisync01-trust__seal {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}
.medisync01-trust__seal-img {
	display: block;
	width: 100%;
	max-width: 132px;
	height: auto;
	opacity: .92;
}
.medisync01-trust__card--secondary .medisync01-trust__copy { padding: 30px 30px 32px; }

/* 번호 + 분류. 앞에 붙는 짧은 선이 위계를 만든다. */
.medisync01-trust__index {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .16em;
}
.medisync01-trust__index::before {
	content: "";
	flex: 0 0 auto;
	width: 34px;
	height: 1px;
}
.medisync01-trust__card--primary .medisync01-trust__index { color: #dbe4fb; }
.medisync01-trust__card--primary .medisync01-trust__index::before { background: rgba(255, 255, 255, .5); }
.medisync01-trust__card--secondary .medisync01-trust__index { color: var(--st-muted); }
.medisync01-trust__card--secondary .medisync01-trust__index::before { background: var(--st-line); }

.medisync01-trust__title {
	margin: 0;
	font-family: var(--st-serif);
	font-weight: 740;
	word-break: keep-all;
	/* 좁은 폭에서 제목 <br> 뒤 줄이 "협진," 한 마디만 남는 고아 줄이 생긴다.
	   줄 길이를 고르게 나눠 마지막 줄이 한 단어로 떨어지는 것을 막는다. */
	text-wrap: balance;
}
/*
 * 엠블럼이 오른쪽 2 할을 가져가면서 글 칸이 좁아졌다. 크기를 그대로 두면
 * <br> 로 나눈 두 줄 중 첫 줄("…영상의학과 전문의,")이 한 줄 더 내려간다.
 * 줄어든 폭만큼(약 0.8배) 글자를 줄여 두 줄 구성을 지킨다.
 */
.medisync01-trust__card--primary .medisync01-trust__title {
	font-size: clamp(22px, 2.05vw, 30px);
	line-height: 1.35;
	letter-spacing: -.045em;
	/* 두 줄은 <br> 로 이미 정해져 있다 — balance 가 그 줄을 다시 쪼갠다. */
	text-wrap: initial;
}
.medisync01-trust__card--secondary .medisync01-trust__title {
	font-size: 24px;
	line-height: 1.42;
	letter-spacing: -.04em;
	color: var(--st-ink);
}

/* 설명은 제목과 가는 선으로 끊는다(시안의 border-top). */
.medisync01-trust__desc {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid;
	font-size: 13px;
	line-height: 1.7;
	word-break: keep-all;
}
.medisync01-trust__card--primary .medisync01-trust__desc {
	max-width: 600px;
	border-top-color: rgba(255, 255, 255, .28);
	color: #e4eaf7;
}
.medisync01-trust__card--secondary .medisync01-trust__desc {
	border-top-color: var(--st-line);
	color: var(--st-muted);
}

/* 이력 근거 한 줄 — 주 카드에만 있다(시안에는 없는 자리, 내용 보존용). */
.medisync01-trust__note {
	display: block;
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .82);
	word-break: keep-all;
}


@media (max-width: 1100px) {
	.medisync01-trust__head { gap: 40px; }
	.medisync01-trust__card--primary,
	.medisync01-trust__card--secondary { min-height: 540px; }
}
@media (max-width: 900px) {
	.medisync01-trust__inner { width: min(calc(100% - 36px), var(--medisync01-content-width, 1240px)); }
	.medisync01-trust__head { grid-template-columns: 1fr; gap: 18px; }
	.medisync01-trust__grid { grid-template-columns: 1fr; }
	/*
	 * 주 카드는 높이를 고정하지 않고 비율로 — 좁은 폭에서 사진이 띠가 된다.
	 *
	 * 다만 **바닥(min-height)을 0 으로 지우면 안 된다.** 이 카드는 사진(.trust__img)도
	 * 글(.trust__copy)도 전부 absolute 라 흐름 안에 든 내용이 하나도 없다. 그래서 높이가
	 * 오로지 aspect-ratio 하나에 걸려 있고, 그걸 모르는 브라우저(iOS 14 이하 ·
	 * 구형 안드로이드 WebView · 구버전 삼성인터넷)에서는 **높이 0 으로 접혀 통째로 사라진다.**
	 * 바로 위 .medisync01-hero 가 aspect-ratio 와 min-height 를 함께 쓰는 것과 같은 이유다.
	 *
	 * 그래서 바닥을 남겨 두고, aspect-ratio 를 아는 브라우저에서만 아래 @supports 가 0 으로 내린다.
	 */
	.medisync01-trust__card--primary { min-height: 420px; aspect-ratio: 4 / 3; }
	.medisync01-trust__card--primary .medisync01-trust__copy { gap: 18px; }
	.medisync01-trust__seal-img { max-width: 104px; }
	.medisync01-trust__card--secondary {
		min-height: 0;
		grid-template-columns: .9fr 1.1fr;
		grid-template-rows: auto;
	}
	.medisync01-trust__visual { min-height: 330px; }
}

/*
 * aspect-ratio 를 아는 브라우저에서만 바닥을 걷는다.
 * 모르는 브라우저는 위의 min-height 로 카드가 보이는 채로 남는다(비율만 포기).
 */
@supports (aspect-ratio: 4 / 3) {
	@media (max-width: 900px) {
		.medisync01-trust__card--primary { min-height: 0; }
	}
}
@media (max-width: 620px) {
	.medisync01-trust__inner { width: min(calc(100% - 28px), var(--medisync01-content-width, 1240px)); }
	.medisync01-trust { padding: 76px 0 82px; }
	.medisync01-trust__head { margin-bottom: 32px; }
	.medisync01-trust__heading { font-size: 34px; }
	.medisync01-trust__card--primary { aspect-ratio: 3 / 4; border-radius: 18px 18px 46px 18px; }
	.medisync01-trust__card--primary .medisync01-trust__copy { left: 22px; right: 22px; bottom: 22px; gap: 14px; }
	/* 좁은 폭에서도 엠블럼이 뭉개지지 않을 만큼은 남긴다(2 할이 60px 밑으로 내려간다). */
	.medisync01-trust__card--primary .medisync01-trust__copy { grid-template-columns: minmax(0, 1fr) 62px; }
	.medisync01-trust__seal-img { max-width: 62px; }
	.medisync01-trust__card--primary .medisync01-trust__title { font-size: 22px; }
	.medisync01-trust__card--secondary { display: block; border-radius: 18px; }
	.medisync01-trust__visual { min-height: 260px; }
	.medisync01-trust__card--secondary .medisync01-trust__copy { padding: 24px 22px 26px; }
	.medisync01-trust__card--secondary .medisync01-trust__title { font-size: 21px; }
	}

/* ============================================================
   S4 검진 안내 — 텍스트 버튼 변형

   알파돔은 세란처럼 검진 카드 이미지를 갖고 있지 않다(새로 만들지도 않는다).
   구 사이트가 실제로 쓰던 링크 버튼(.lb-item — 하늘 배경·짙은 글씨)의 결을
   그대로 가져와 텍스트 버튼으로 낸다.
============================================================ */

.medisync01-checkup-cards__item--text .medisync01-checkup-cards__link {
	display: grid;
	place-items: center;
	min-height: 108px;
	padding: 26px 22px;
	border: 1px solid var(--medisync01-olive-dark);
	border-radius: var(--medisync01-radius);
	background: var(--medisync01-olive);
	color: var(--medisync01-on-accent);
	text-align: center;
}

.medisync01-checkup-cards__label {
	font-family: var(--medisync01-font-display);
	font-size: clamp(16px, 1.6vw, 20px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -.02em;
	word-break: keep-all;
}

/* 호버는 주색(인디고)으로 반전 — 밝은 칩에서 어두운 칩으로 상태가 분명해진다. */
.medisync01-checkup-cards__item--text .medisync01-checkup-cards__link:hover,
.medisync01-checkup-cards__item--text .medisync01-checkup-cards__link:focus-visible {
	background: var(--brand-primary);
	border-color: var(--brand-primary);
	color: var(--medisync01-on-brand);
	transform: translateY(-2px);
}

@media (max-width: 640px) {
	.medisync01-checkup-cards { grid-template-columns: 1fr; }
	.medisync01-checkup-cards__item--text .medisync01-checkup-cards__link { min-height: 76px; padding: 20px 18px; }
}