/*!
 * seran-case.css — 진단 사례(clinic_case) 상세 · 목록 (모듈: case-template)
 *
 * 소유: single-clinic_case.php / archive-clinic_case.php 전용.
 * 색·간격은 전부 seran 디자인 토큰(assets/css/seran-tokens.css · static-pages 소유)에서 온다.
 * 아래 --sc-* 는 그 토큰의 별칭(alias) 레이어일 뿐이며, 토큰 시트가 아직 실리지 않은
 * 환경에서만 계약서 §1 에 명시된 값이 폴백으로 쓰인다. 컴포넌트 규칙은 --sc-* 만 참조한다.
 * (Brizy 산 클래스·인라인 스타일 없음 — CONTRACT-FRONT §0-1·0-3)
 */

.seran-case,
.seran-case-archive,
.seran-case-related {
	--sc-accent: var(--seran-orange, #f68b1a);
	--sc-accent-soft: var(--seran-orange-soft, #f6a04d);
	--sc-accent-strong: var(--seran-cta, #d76e0f);
	--sc-olive: var(--seran-olive, #a9bc0d);
	--sc-ink: var(--seran-ink, #333);
	--sc-ink-2: var(--seran-ink-2, #555);
	--sc-ink-3: var(--seran-ink-3, #888);
	--sc-line: var(--seran-line, #ddd);
	--sc-soft: var(--seran-bg-soft, #fafafa);
	--sc-warm: var(--seran-bg-warm, #fff7ef);
	/* 흰 표면 — seran-tokens 의 --seran-bg(= --brand-secondary #FFFFFF).
	   토큰 시트가 실리지 않으면 style.css 의 크림(#f0e9d5)이 아니라 흰색으로 떨어지도록
	   폴백을 #fff 로 고정한다 (peer: seran-exam.css --sx-surface 와 같은 의도). */
	--sc-paper: var(--seran-bg, #fff);
	/* 라이트박스 이미지 레터박스 배경(딥 네이비). 토큰 요청 대기 중 —
	   static-pages 가 --seran-scrim-deep 을 추가하면 그 값이 이긴다. */
	--sc-scrim-deep: var(--seran-scrim-deep, #0b1022);
	--sc-radius: var(--seran-radius, 12px);
	--sc-radius-lg: var(--seran-radius-lg, 20px);
	--sc-font: var(--seran-font, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif);
	--sc-font-display: var(--seran-font-display, var(--sc-font));
	--sc-wrap: 1200px;
	--sc-card-pad: 30px;

	color: var(--sc-ink);
	font-family: var(--sc-font);
	line-height: 1.65;
}

.seran-case__wrap,
.seran-case-archive__wrap {
	max-width: var(--sc-wrap);
	margin: 0 auto;
	padding: 0 18px;
}

/* ============================================================
   상세 — 히어로
============================================================ */

.seran-case__hero {
	position: relative;
	display: grid;
	place-items: center;
	isolation: isolate;
	overflow: hidden;
	min-height: 240px;
	aspect-ratio: 16 / 4;
	background: linear-gradient(135deg, var(--sc-accent) 0%, var(--sc-accent-strong) 100%);
	border-bottom: 1px solid var(--sc-line);
}

.seran-case__hero-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.seran-case__hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.seran-case__hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--sc-wrap);
	margin: 0 auto;
	padding: 28px 18px;
	text-align: center;
	color: var(--sc-paper);
}

.seran-case__eyebrow {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	opacity: 0.92;
}

.seran-case__title {
	margin: 6px 0 0;
	font-family: var(--sc-font-display);
	font-size: clamp(22px, 3.2vw, 36px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--sc-paper);
}

.seran-case__lede {
	margin: 12px auto 0;
	max-width: 46em;
	font-size: 16px;
	opacity: 0.92;
}

.seran-case__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 22px;
}

.seran-case__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.35);
	color: var(--sc-paper);
	font-size: 15px;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.seran-case__chip b {
	font-weight: 700;
	opacity: 0.85;
}

/* ============================================================
   상세 — 경로 / 카드
============================================================ */

.seran-case__crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 18px 0 0;
	font-size: 14px;
	color: var(--sc-ink-3);
}

.seran-case__crumb a {
	color: var(--sc-ink-2);
	text-decoration: none;
}

.seran-case__crumb a:hover,
.seran-case__crumb a:focus-visible {
	color: var(--sc-accent);
	text-decoration: underline;
}

.seran-case__crumb .is-current {
	color: var(--sc-ink-3);
}

.seran-case__card {
	margin-top: 30px;
	padding: var(--sc-card-pad);
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-lg);
	background: var(--sc-paper);
}

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

.seran-case__note,
.seran-case__quote,
.seran-case__callout {
	padding: var(--sc-card-pad);
	border-left: 4px solid var(--sc-accent);
	border-radius: 0 var(--sc-radius) var(--sc-radius) 0;
	background: var(--sc-soft);
}

.seran-case__quote > :first-child,
.seran-case__note > :first-child,
.seran-case__callout > :first-child {
	margin-top: 0;
}

.seran-case__quote > :last-child,
.seran-case__note > :last-child,
.seran-case__callout > :last-child,
.seran-case__followup > :last-child,
.seran-case__results > :last-child {
	margin-bottom: 0;
}

.seran-case__note-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
	color: var(--sc-ink);
}

.seran-case__callout {
	margin-top: 16px;
	background: var(--sc-warm);
}

.seran-case__callout-label {
	font-weight: 700;
	color: var(--sc-accent-strong);
}

/* 태그 — 구 사이트와 동일하게 링크가 아닌 표식(익명 사례 색인용) */
.seran-case__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.seran-case__tag {
	display: inline-block;
	padding: 4px 14px;
	border: 1px solid var(--sc-accent);
	border-radius: 999px;
	background: var(--sc-paper);
	color: var(--sc-accent);
	font-size: 14px;
	font-weight: 600;
}

.seran-case__note {
	margin-top: 16px;
}

/* 진료 과정 */
.seran-case__steps {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 4px 0 0;
	padding-left: 1.25rem;
	list-style: decimal;
}

.seran-case__steps li::marker {
	color: var(--sc-accent);
	font-weight: 700;
}

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

.seran-case__steps a:hover,
.seran-case__steps a:focus-visible {
	color: var(--sc-accent);
}

.seran-case__results p {
	margin: 0.35rem 0;
}

/* ============================================================
   상세 — 이미지 그리드 + 라이트박스(:target · JS 없음)
============================================================ */

.seran-case__figs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.seran-case__fig {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.seran-case__fig-link {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius);
	background: var(--sc-soft);
}

.seran-case__fig-link img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

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

.seran-case__fig-link:focus-visible {
	outline: 3px solid var(--sc-accent-soft);
	outline-offset: 2px;
}

.seran-case__fig-cap {
	text-align: center;
	font-size: 14px;
	color: var(--sc-ink-3);
}

.seran-case__lightbox {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: none;
	place-items: center;
	padding: 20px;
	background: rgba(15, 23, 42, 0.85);
}

.seran-case__lightbox:target {
	display: grid;
}

.seran-case__lightbox-bg {
	position: absolute;
	inset: 0;
	display: block;
}

.seran-case__lightbox-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	margin: 0;
	max-width: min(90vw, 1100px);
}

.seran-case__lightbox-close {
	padding: 4px 12px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--sc-paper);
	font-size: 24px;
	line-height: 1.2;
	text-decoration: none;
}

.seran-case__lightbox-close:hover,
.seran-case__lightbox-close:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	color: var(--sc-paper);
}

.seran-case__lightbox-inner img {
	display: block;
	width: min(90vw, 1100px);
	max-height: 78vh;
	object-fit: contain;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--sc-radius);
	background: var(--sc-scrim-deep);
}

.seran-case__lightbox-cap {
	align-self: center;
	color: var(--sc-paper);
	font-size: 14px;
	opacity: 0.9;
}

.seran-case__disclaimer {
	margin: 24px 0 0;
	font-size: 13px;
	color: var(--sc-ink-3);
}

/* ============================================================
   상세 — 관련 콘텐츠 (마크업은 related-content 모듈 쇼트코드 소유)
============================================================ */

.seran-case-related {
	margin-top: 48px;
	padding: 44px 0 8px;
	background: var(--sc-warm);
}

.seran-case-related__block + .seran-case-related__block {
	margin-top: 36px;
}

.seran-case-related__h {
	margin: 0 0 16px;
	font-family: var(--sc-font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--sc-ink);
}

/* ============================================================
   목록(아카이브)
============================================================ */

/* ============================================================
   /case/ 목록 — 사례 단일·증상가이드와 같은 sg 언어
   ------------------------------------------------------------
   뼈대(.sg-hero / .sg-section / .sg-head)는 seran-symptom.css 가 그대로 그린다.
   여기서는 목록에만 필요한 두 가지를 한다.
     1) 히어로 아래 첫 섹션의 여백 — 116px 은 본문이 긴 단일 지면 기준이라 목록엔 과하다.
     2) 카드·칩 리테마 — 마크업은 related-content 모듈 소유이므로 **규칙을 덮지 않고
        그 모듈이 열어 둔 --srl-* 토큰만 바꾼다**. 컴포넌트가 바뀌어도 따라온다.
============================================================ */

.seran-case-archive .sg-section {
	padding: 72px 0 96px;
	border-bottom: 0;
}

.seran-case-archive__empty {
	margin: 40px 0;
	text-align: center;
	color: var(--sg-muted, #6f7773);
}

/* ---- 카드 그리드 리테마 (토큰만) ---- */
.seran-case-archive .seran-rel {
	--srl-accent: var(--sg-green, #315f52);
	--srl-accent-strong: var(--sg-green-deep, #183f35);
	--srl-ink: var(--sg-ink, #1e2523);
	--srl-ink-2: var(--sg-muted, #6f7773);
	--srl-line: var(--sg-line, #dde2df);
	--srl-radius-lg: 18px;
	--srl-gap: 18px;
	--srl-thumb-ratio: 1 / 1;
	/* 그림자 대신 실선 테두리 — sg 카드(.sg-card)와 같은 무게. 링으로 주면
	   레이아웃을 밀지 않으면서 hover 에서 그림자로 자연스럽게 바뀐다. */
	--srl-shadow: 0 0 0 1px #e3e7e4;
	--srl-shadow-lift: 0 0 0 1px #cfd9d4, var(--sg-shadow, 0 18px 50px rgba(22, 45, 37, .07));
	letter-spacing: -.025em;
}

.seran-case-archive .seran-rel__card:hover {
	transform: translateY(-5px);
}

/* 카드 제목 — 지면의 표제와 같은 세리프. 두 줄 클램프는 컴포넌트 규칙 그대로 둔다. */
.seran-case-archive .seran-rel__card-title {
	font-family: var(--sg-serif, "Noto Serif KR", "Nanum Myeongjo", Georgia, serif);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -.035em;
}

/* "자세히 보기" — sg 행 목록의 화살표 어휘를 가져온다. */
.seran-case-archive .seran-rel__more {
	color: var(--sg-green, #315f52);
	font-size: 13px;
	font-weight: 700;
}

.seran-case-archive .seran-rel__more::after {
	content: " ↗";
}

/* ---- 태그 칩 — 섹션 내비(.sg-nav)와 같은 알약 ---- */
.seran-case-archive .seran-rel__chips {
	gap: 6px;
	margin-bottom: 30px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--sg-soft-line, #eaeeeb);
}

.seran-case-archive .seran-rel__chip {
	height: 32px;
	padding: 0 13px;
	border-color: transparent;
	background: var(--sg-soft, #f5f7f5);
	color: #717a76;
	font-size: 13px;
	font-weight: 500;
}

.seran-case-archive .seran-rel__chip:hover,
.seran-case-archive .seran-rel__chip:focus-visible {
	background: var(--sg-soft-green, #edf3ef);
	color: var(--sg-green-deep, #183f35);
	transform: none;
}

.seran-case-archive .seran-rel__chip[aria-current="true"] {
	background: var(--sg-green-deep, #183f35);
	color: #fff;
	font-weight: 600;
}

@media (max-width: 820px) {
	.seran-case-archive .sg-section {
		padding: 52px 0 72px;
	}
}

/* 폴백 그리드 — [case_cards](related-content 소유)가 아직 등록되지 않은 환경에서만 쓰인다. */
.seran-case-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.seran-case-grid__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}

.seran-case-grid__thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius);
	background: var(--sc-soft);
}

.seran-case-grid__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.seran-case-grid__card:hover .seran-case-grid__thumb img,
.seran-case-grid__card:focus-visible .seran-case-grid__thumb img {
	transform: scale(1.04);
}

.seran-case-grid__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--sc-ink);
}

.seran-case-grid__cta {
	font-size: 14px;
	font-weight: 600;
	color: var(--sc-accent);
}

.seran-case-archive .nav-links,
.seran-case-archive .page-numbers {
	color: var(--sc-ink-2);
}

.seran-case-archive .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

.seran-case-archive .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--sc-line);
	border-radius: 999px;
	text-decoration: none;
}

.seran-case-archive .page-numbers.current,
.seran-case-archive .page-numbers:hover {
	border-color: var(--sc-accent);
	background: var(--sc-accent);
	color: var(--sc-paper);
}

/* ============================================================
   반응형
============================================================ */

@media (max-width: 992px) {
	.seran-case,
	.seran-case-archive,
	.seran-case-related {
		--sc-card-pad: 24px 20px;
	}

	.seran-case__wrap {
		padding: 0 16px;
	}

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

@media (max-width: 640px) {
	.seran-case__hero {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}

	.seran-case__meta {
		margin-top: 16px;
	}

	.seran-case__chip {
		padding: 6px 10px;
		font-size: 14px;
	}

	.seran-case__card {
		margin-top: 20px;
		border-radius: var(--sc-radius);
	}

	.seran-case-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

}

@media (max-width: 520px) {
	.seran-case__figs {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seran-case__fig-link img,
	.seran-case-grid__thumb img {
		transition: none;
	}
}

/* ============================================================
   템플릿 결합분 (single-clinic_case.php · archive-clinic_case.php)
   — 위 규칙만으로 부족했던 요소 보강. 새 색·간격은 전부 --sc-* 별칭에서 온다.
============================================================ */

/* 한마디 인용은 <blockquote> 로 낸다 — UA 기본 좌우 여백(40px)이 카드 안에서 어긋난다.
   margin-top 은 .seran-case__callout 의 16px 를 그대로 살린다. */
blockquote.seran-case__quote {
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}

.seran-case__callout-label {
	display: block;
	margin-bottom: 6px;
}

/* 서사 메타가 없는 사례의 본문 폴백(post_content). */
.seran-case__body > :first-child {
	margin-top: 0;
}

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

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

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

/* 이미지가 하나뿐이면 2열 그리드에서 반쪽만 차지해 균형이 깨진다. */
.seran-case__figs--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 520px;
}

/* 하위호환 [onecol_case_hero] — 페이지 본문 안에 얹힐 때의 경계. */
.seran-case--shortcode {
	display: block;
}

.seran-case--shortcode .seran-case__hero {
	border-top: 1px solid var(--sc-line);
}

/* 폴백 그리드는 <ul><li> 골격 — 카드(<a>)가 칸 높이를 채우게 한다. */
.seran-case-grid > li {
	display: flex;
}

.seran-case-grid__card {
	flex: 1 1 auto;
}

.seran-case-grid__card:focus-visible {
	outline: 3px solid var(--sc-accent-soft);
	outline-offset: 3px;
}

/* 목록 상단 제목과 위임 그리드([case_cards]) 사이 간격 — 쇼트코드 쪽 여백에 기대지 않는다. */
.seran-case-archive__wrap > .seran-rel:first-child {
	margin-top: 0;
}

/* ============================================================
   sg- 뼈대 위에서의 사례 전용 위젯
   지면 뼈대는 증상가이드와 같은 sg- 언어(seran-symptom.css)가 그린다.
   여기 있는 구 .seran-case__hero / __card / __wrap 규칙은 하위호환
   쇼트코드([onecol_case_hero])가 아직 쓰므로 남겨 두고, 아래에서
   상세 지면 쪽만 sg 톤으로 덮는다.
============================================================ */

/* 메타 칩 — 예전 어두운 히어로용이라 흰 글씨·검은 배경이었다.
   sg 히어로는 밝은 지면이라 그대로 두면 읽히지 않는다. */
.sg .seran-case__meta {
	justify-content: flex-start;
	margin-top: 26px;
}
.sg .seran-case__chip {
	padding: 9px 15px;
	border: 1px solid var(--sg-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	color: var(--sg-ink);
	font-size: 14px;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.sg .seran-case__chip b {
	font-weight: 700;
	opacity: 1;
	color: var(--sg-green);
}

/* 증상 태그 */
.sg .seran-case__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}
.sg .seran-case__tag {
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--sg-soft-green);
	color: var(--sg-green-deep);
	font-size: 13px;
	font-weight: 600;
}

/* 담당의 코멘트 — 본문과 같은 폭 안에서 한 단 낮춘 인용 */
.sg .seran-case__note { margin: 0; }
.sg .seran-case__note-label {
	display: block;
	margin-bottom: 9px;
	color: var(--sg-green);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* 한마디 — 지면에서 가장 강한 한 문장 */
.sg .seran-case__quote {
	margin: 30px 0 0;
	padding: 28px 30px;
	background: #fff;
	border: 1px solid var(--sg-line);
	border-left: 3px solid var(--sg-orange);
	border-radius: 16px;
	font-family: var(--sg-serif);
	font-size: 19px;
	line-height: 1.7;
	color: var(--sg-ink);
	word-break: keep-all;
}
.sg .seran-case__quote p { margin: 0; }
.sg .seran-case__callout-label {
	display: block;
	margin-bottom: 10px;
	font-family: var(--sg-sans);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--sg-orange);
}

/* 결과 이미지 — 정사각 타일 + 캡션 */
/* 결과 이미지 묶음 — '검사 결과' 절 안에 들어간다. */
.sg .seran-case__figs-block { margin-top: 38px; }
.sg .seran-case__figs-hint {
	margin: 0 0 18px;
	color: #7d8581;
	font-size: 13px;
}
.sg .seran-case__figs {
	display: grid;
	/* 2열 — 내시경 사진은 병변 위치를 봐야 해서 크게 보여야 한다.
	   4열이면 한 장이 250px 남짓이라 표시가 안 보였다. */
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sg .seran-case__figs--single { grid-template-columns: minmax(0, 520px); }
.sg .seran-case__fig { margin: 0; }
.sg .seran-case__fig-link {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--sg-line);
	border-radius: 16px;
	background: #fff;
}
.sg .seran-case__fig-link img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* 고지 — 지면 맨 아래, 조용하게 */
.sg .seran-case__disclaimer {
	margin: 0 0 90px;
	padding-top: 26px;
	border-top: 1px solid var(--sg-soft-line);
	color: #8a918d;
	font-size: 13px;
	line-height: 1.75;
	word-break: keep-all;
}


@media (max-width: 540px) {
	.sg .seran-case__figs { grid-template-columns: 1fr; }
	.sg .seran-case__quote { padding: 24px 22px; font-size: 17px; }
	.sg .seran-case__chip { font-size: 13px; }
}

/* 관련 증상 — 데스크톱 2열(글 | 증상 이미지). 이미지가 없으면 한 열. */
.sg .seran-case__symwrap.has-image {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 56px;
	align-items: start;
}
.sg .seran-case__symfig { margin: 0; }
.sg .seran-case__symfig img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 20px;
	border: 1px solid var(--sg-line);
	background: #fff;
}
@media (max-width: 900px) {
	.sg .seran-case__symwrap.has-image { grid-template-columns: 1fr; gap: 30px; }
	/* 좁은 화면에서도 정사각을 유지한다 — 폭마다 비율이 달라지면 같은 그림이
	   다른 크기로 잘려, 어떤 지면에서는 피사체가 사라진다. */
}