/* =============================================================
   seran-doc — 정적화 본문(10-repages / 12-about)이 내보내는 마크업 스킨

   재정적화 스크립트와 산문 시트를 각각 만들면서 클래스 이름이 어긋나,
   본문이 쓰는 23개 클래스에 정의가 없어 지면이 통째로 무너져 있었다.
   이 파일이 그 계약을 메운다. seran-prose.css 뒤에 실린다.

   담당 클래스
     .seran-doc / .seran-section(--sub) / .seran-doc__title
     .seran-section__title / .seran-section__num / .seran-lead / .seran-rule
     .seran-figure__caption / .seran-img / .seran-media-link
     .seran-gallery(--2) / .seran-table-scroll
     .seran-cards__title / __subtitle / __text / .seran-cards--icon
     .seran-deflist__term / __desc / .seran-tags / .seran-tags__item
     .seran-indent-1 / .seran-indent-2
   ============================================================= */

/* ── 문서 골격 ───────────────────────────────────────────── */
.seran-doc {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 4vw, 48px);
}

.seran-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* 하위 절 — 상위 절과 리듬을 구분한다 */
.seran-section--sub {
	gap: 12px;
	padding-left: 16px;
	border-left: 2px solid var(--seran-line);
}

@media (max-width: 640px) {
	.seran-section--sub {
		padding-left: 12px;
	}
}

/* 문서 제목 — 페이지 히어로가 따로 있는 지면에서는 본문 첫 제목 역할 */
.seran-doc__title {
	margin: 0;
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 800;
	line-height: 1.32;
	letter-spacing: -0.02em;
	color: var(--seran-ink);
	text-wrap: balance;
}

.seran-section__title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	font-size: clamp(19px, 2.2vw, 23px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--seran-ink);
}

/* 번호가 붙는 절 — 순서가 의미를 가질 때만 스크립트가 붙인다 */
.seran-section__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.9em;
	height: 1.9em;
	padding: 0 0.5em;
	border-radius: 999px;
	background: var(--seran-orange);
	color: var(--brand-secondary);
	font-size: 0.62em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

/* 리드 문단 — 절의 첫 문장을 크게 */
.seran-lead {
	margin: 0;
	font-size: clamp(16px, 1.9vw, 18px);
	line-height: 1.78;
	color: var(--seran-ink-2);
	font-weight: 500;
}

.seran-rule {
	height: 1px;
	margin: 4px 0;
	border: 0;
	background: var(--seran-line);
}

/* ── 이미지 ─────────────────────────────────────────────── */
.seran-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: var(--seran-radius, 12px);
}

/* 아이콘성 이미지는 확대 금지 (진단서 아이콘 등).

   특정도 메모 (CSS 정합 감사):
     seran-prose.css §7 이 `.seran-prose :is(img.seran-icon, …)`(0,2,1) 로 아이콘을
     `--prose-icon`(56/60px)에 가둔다. 아래 한 클래스 규칙(0,1,0)은 그 안에서 죽는다.
     `.seran-doc img.seran-icon` 을 (0,2,1) 로 함께 걸어 **뒤에 실리는 이 시트가**
     동률로 이기게 한다(로드 순서: tokens → prose → doc, functions.php 의 deps 체인).
     한 클래스 규칙은 `.seran-prose` 밖(위젯 호스트 지면 등)에서의 폴백으로 남긴다. */
.seran-icon {
	width: auto;
	max-width: 64px;
	height: auto;
	border-radius: 0;
}

.seran-doc img.seran-icon {
	width: auto;
	height: auto;
	max-width: 64px;
	max-height: 64px;
	border-radius: 0;
}

.seran-figure__caption,
.seran-doc figcaption {
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--seran-ink-3);
	text-align: center;
}

/* 원본 이미지로 여는 링크 — 커서와 미세한 확대로 클릭 가능함을 알린다 */
.seran-media-link {
	display: block;
	overflow: hidden;
	border-radius: var(--seran-radius, 12px);
}

.seran-media-link .seran-img {
	transition: transform 0.35s ease;
}

.seran-media-link:hover .seran-img,
.seran-media-link:focus-visible .seran-img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.seran-media-link .seran-img {
		transition: none;
	}
	.seran-media-link:hover .seran-img,
	.seran-media-link:focus-visible .seran-img {
		transform: none;
	}
}

/* ── 갤러리 ─────────────────────────────────────────────── */
.seran-gallery {
	display: grid;
	gap: 14px;
	/* `min(100%, …)` 가 없으면 트랙 최소치 240px 가 좁은 화면에서 컨테이너보다 커져
	   가로 스크롤을 만든다(360px − 본문 패딩 − 들여쓰기). prose·about 과 같은 관용구. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	margin: 0;
}

.seran-gallery--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.seran-gallery--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.seran-gallery figure {
	margin: 0;
}

@media (max-width: 560px) {
	.seran-gallery--2,
	.seran-gallery--3 {
		grid-template-columns: 1fr;
	}
}

/* ── 표 ─────────────────────────────────────────────────── */
.seran-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--seran-line);
	border-radius: var(--seran-radius, 12px);
	background: var(--brand-secondary);
}

/* `display:table` 을 명시하는 이유 (CSS 정합 감사):
   seran-tokens.css §4 의 `@media(max-width:782px){ .seran-prose table{display:block;
   overflow-x:auto} }`(0,1,1) 가 좁은 화면에서 이 표의 표 레이아웃(열 폭 계산·colspan)을
   통째로 버린다. 아래 셀렉터도 (0,1,1) 이지만 이 시트가 뒤에 실리므로 동률로 이긴다.
   가로 스크롤은 표가 아니라 래퍼(.seran-table-scroll)가 담당한다 — seran-prose.css §10
   과 같은 방침이고, seran-about.css 의 진료일정표도 같은 이유로 되돌려 두었다. */
.seran-table-scroll > table {
	display: table;
	width: 100%;
	min-width: 480px;
	margin: 0;
	border-collapse: collapse;
	border: 0;
	font-size: 14.5px;
}

.seran-table-scroll th,
.seran-table-scroll td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--seran-line);
	text-align: left;
	vertical-align: top;
	line-height: 1.6;
}

.seran-table-scroll thead th {
	background: var(--seran-bg-mega);
	font-weight: 700;
	color: var(--seran-ink);
	white-space: nowrap;
}

.seran-table-scroll tbody tr:last-child th,
.seran-table-scroll tbody tr:last-child td {
	border-bottom: 0;
}

.seran-table-scroll tbody tr:nth-child(even) td {
	background: color-mix(in srgb, var(--seran-bg-warm) 55%, transparent);
}

/* ── 카드 ───────────────────────────────────────────────── */
.seran-cards__title {
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--seran-ink);
	text-wrap: balance;
}

.seran-cards__subtitle {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--seran-orange);
}

.seran-cards__text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--seran-ink-2);
}

/* 아이콘 카드 — 구 사이트의 아이콘+라벨 조합(진단서 페이지).

   `flex-direction`/`align-items` 를 명시하는 이유 (CSS 정합 감사):
     seran-prose.css §8 의 `.seran-prose .seran-cards__item`(0,2,0) 은 **가로형**
     (`display:flex; align-items:center; text-align:left`)이 기본이다. 아래 규칙도
     (0,2,0) 이라 뒤에 실리는 이 시트가 동률로 이기지만, 방향을 적지 않으면
     `text-align:center` 만 이기고 배치는 가로로 남아 아이콘이 라벨 왼쪽에 붙는다.
     구 지면은 아이콘이 라벨 **위**에 있으므로 세로형을 여기서 확정한다. */
.seran-cards--icon .seran-cards__item {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.seran-cards--icon .seran-cards__media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 68px;
	margin-bottom: 10px;
}

/* (0,2,1) — prose §7 의 아이콘 상한(`.seran-prose :is(img.seran-icon,…)`)과 동률.
   위 `.seran-doc img.seran-icon` 보다 뒤에 있으므로 카드 안에서는 52px 가 이긴다. */
.seran-cards--icon img.seran-icon {
	max-width: 52px;
	max-height: 52px;
}

/* ── 정의 목록 ──────────────────────────────────────────── */
.seran-deflist__term {
	font-weight: 700;
	color: var(--seran-ink);
}

.seran-deflist__desc {
	margin: 0 0 12px;
	color: var(--seran-ink-2);
	line-height: 1.7;
}

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

/* ── 태그 ───────────────────────────────────────────────── */
.seran-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.seran-tags__item {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--seran-bg-warm);
	color: var(--seran-cta);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.6;
}

/* ── 들여쓰기 ───────────────────────────────────────────── */
.seran-indent-1 {
	padding-left: 16px;
}

.seran-indent-2 {
	padding-left: 32px;
}

@media (max-width: 560px) {
	.seran-indent-1 {
		padding-left: 10px;
	}
	.seran-indent-2 {
		padding-left: 20px;
	}
}

/* ── 이미지-텍스트 2단 (14-media-pairs.php 가 만드는 구조) ──────
   구 사이트 증상가이드는 Brizy 2열 행(이미지 | 글)이 지그재그로 반복되는
   지면이었다. 정적화가 열을 버려 이미지가 전체 폭으로 세로 나열됐던 것을
   여기서 되살린다. 720px 아래에서는 아래 미디어쿼리가 1열로 쌓는다.

   `:not(img)` 인 이유 (CSS 정합 감사 — 클래스 이름 충돌):
     `.seran-media` 는 이 시트에서 "이미지 | 글" 2단 **래퍼**를 뜻하지만,
     seran-prose.css §7 과 10-repages.php(1110·2598 행)에서는 `<img class="seran-media">`
     즉 "아이콘이 아니라 원래 크기로 보여도 되는 **도판**" 탈출구를 뜻한다.
     한 클래스가 두 뜻으로 쓰이고 있어, 태그로 갈라 도판 이미지에는 격자 규칙이
     닿지 않게 한다(replaced element 라 지금은 무해하지만 `> *` 규칙이 하나만
     더 생겨도 도판이 깨진다). 이름 통일은 restaticize 모듈에 요청분으로 남긴다. */
.seran-media:not(img) {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(16px, 3vw, 32px);
	align-items: center;
}

.seran-media--rev .seran-figure {
	order: 2;
}

.seran-media__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.seran-media__body > * {
	margin: 0;
}

.seran-media .seran-figure {
	margin: 0;
	min-width: 0;
}

@media (max-width: 720px) {
	.seran-media:not(img) {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.seran-media--rev .seran-figure {
		order: 0;
	}
}

/* 본문 사진은 원본보다 커지지 않게 — 저해상 이미지가 늘어나 뭉개지는 것을 막는다. */
.seran-doc .seran-figure > .seran-img,
.seran-doc .seran-figure > .seran-media-link > .seran-img {
	width: auto;
	max-width: 100%;
	margin-inline: auto;
}

/* 2단 블록의 이미지 — 로고·워드마크가 사진처럼 열을 가득 채우며 거대해지는 것을 막는다.
   구 사이트에서 'HEALTH FOCUS' 같은 워드마크는 본문 옆 작은 표식이었다. */
.seran-media .seran-figure > .seran-img,
.seran-media .seran-figure > .seran-media-link > .seran-img {
	max-height: 340px;
	object-fit: contain;
	object-position: center;
}

/* 워드마크 — 'HEALTH FOCUS' 같은 표식은 사진이 아니라 작은 상표다.
   2단 이미지 열을 가득 채우면 지면이 로고에 잡아먹힌다(구 사이트는 본문 옆 소형). */
.seran-doc .seran-wordmark,
.seran-media .seran-figure > .seran-wordmark {
	width: auto;
	max-width: 220px;
	max-height: 120px;
	object-fit: contain;
	object-position: left center;
	margin-inline: 0;
	border-radius: 0;
}

/* 워드마크가 든 2단은 이미지 열을 좁힌다 — 사진 짝과 같은 비율이면 허전하다. */
.seran-media:has(.seran-wordmark) {
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	align-items: start;
}

/* 아이콘 SVG 크기 확정 — 이 SVG 들은 viewBox 만 있고 width/height 속성이 없다.
   `width:auto` 로 두면 브라우저가 고유 크기를 못 구해 0 으로 접혀 아무것도 안 보인다
   (진단서 카드 아이콘 8종이 통째로 사라져 있었다). 명시 치수를 준다. */
.seran-cards--icon .seran-cards__media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	margin-bottom: 10px;
}

.seran-cards--icon img.seran-icon,
.seran-doc img.seran-icon {
	width: 48px;
	height: 48px;
	max-width: 48px;
	max-height: 48px;
	object-fit: contain;
}

/* 카드 라벨 — 긴 이름이 어색하게 접히지 않게 */
.seran-cards__title {
	word-break: keep-all;
}