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

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

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

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

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

.medisync01-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);
}

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

.medisync01-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%);
}

.medisync01-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);
}

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

.medisync01-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);
}

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

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

.medisync01-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);
}

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

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

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

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

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

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

.medisync01-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);
}

.medisync01-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);
}

.medisync01-case__note,
.medisync01-case__quote,
.medisync01-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);
}

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

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

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

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

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

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

.medisync01-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;
}

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

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

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

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

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

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

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

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

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

.medisync01-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);
}

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

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

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

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

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

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

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

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

.medisync01-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;
}

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

.medisync01-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);
}

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

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

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

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

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

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

/*
 * 목록은 제목 바로 아래에 태그 칩이 붙는다.
 * 사이에 있던 설명문·'사례 보기 ↓'·'전체 사례' 머리글을 걷어냈으므로(2026-08-22),
 * 히어로 아래여백과 섹션 윗여백도 그 블록들을 전제로 한 값에서 줄인다.
 * 뼈대는 medisync01-symptom.css 소유라 여기서 이 지면에만 덮어쓴다.
 */
.medisync01-case-archive .sg-hero__in {
	padding-bottom: 52px;
}

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

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

/* ---- 카드 그리드 리테마 (토큰만) ---- */
.medisync01-case-archive .medisync01-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 에서 그림자로 자연스럽게 바뀐다. */
	/* 쉬는 링은 지면 공통 구분선, hover 링은 브랜드 하늘 — 세란 초록기 도는
	   회색(#e3e7e4/#cfd9d4)이 알파돔 지면에서 유일하게 초록으로 남던 자리다. */
	--srl-shadow: 0 0 0 1px var(--sg-line);
	--srl-shadow-lift: 0 0 0 1px var(--medisync01-olive-dark, #8fc9e8), var(--sg-shadow, 0 18px 50px rgba(22, 45, 37, .07));
	letter-spacing: -.025em;
}

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

/* 카드 제목 — 지면의 표제와 같은 글꼴. 두 줄 클램프는 컴포넌트 규칙 그대로 둔다.
   알파돔은 표제도 본문과 같은 Noto Sans KR 계열이라 세리프 스택을 표제 토큰으로 바꾼다. */
.medisync01-case-archive .medisync01-rel__card-title {
	font-family: var(--sg-serif, var(--medisync01-font-display));
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -.035em;
}

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

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

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

.medisync01-case-archive .medisync01-rel__chip {
	height: 32px;
	padding: 0 13px;
	border-color: transparent;
	background: var(--sg-soft, #f5f7f5);
	/* 세란 초록기 도는 회색 → 지면 공통 보조 텍스트 토큰(선택 안 된 칩). */
	color: var(--sg-muted);
	font-size: 13px;
	font-weight: 500;
}

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

.medisync01-case-archive .medisync01-rel__chip[aria-current="true"] {
	background: var(--sg-green-deep, #183f35);
	color: var(--medisync01-on-brand, #fff);   /* 주색(인디고) 위 전경 */
	font-weight: 600;
}

@media (max-width: 820px) {
	.medisync01-case-archive .sg-hero__in {
		padding-bottom: 38px;
	}

	.medisync01-case-archive .sg-section {
		padding: 32px 0 72px;
	}
}

@media (max-width: 540px) {
	.medisync01-case-archive .sg-hero__in {
		padding-bottom: 30px;
	}

	.medisync01-case-archive .sg-section {
		padding: 26px 0 60px;
	}
}

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

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

.medisync01-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);
}

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

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

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

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

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

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

.medisync01-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;
}

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 메타 칩 — 예전 어두운 히어로용이라 흰 글씨·검은 배경이었다.
   sg 히어로는 밝은 지면이라 그대로 두면 읽히지 않는다. */
.sg .medisync01-case__meta {
	justify-content: flex-start;
	margin-top: 26px;
}
.sg .medisync01-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 .medisync01-case__chip b {
	font-weight: 700;
	opacity: 1;
	color: var(--sg-green);
}

/* 증상 태그 */
.sg .medisync01-case__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}
.sg .medisync01-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 .medisync01-case__note { margin: 0; }
.sg .medisync01-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 .medisync01-case__quote {
	margin: 30px 0 0;
	padding: 28px 30px;
	background: var(--sg-paper);
	border: 1px solid var(--sg-line);
	/* 지면에서 가장 강한 한 문장이므로 주색으로 세운다 —
	   --sg-orange 는 이제 브랜드색이 아니라 주의 신호라 여기에 쓰면 뜻이 어긋난다. */
	border-left: 3px solid var(--sg-green);
	border-radius: 16px;
	font-family: var(--sg-serif);
	font-size: 19px;
	line-height: 1.7;
	color: var(--sg-ink);
	word-break: keep-all;
}
.sg .medisync01-case__quote p { margin: 0; }
.sg .medisync01-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-green);   /* 인용 왼쪽 선과 같은 주색 (주의 오렌지 아님) */
}

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

/* 고지 — 지면 맨 아래, 조용하게 */
.sg .medisync01-case__disclaimer {
	margin: 0 0 90px;
	padding-top: 26px;
	border-top: 1px solid var(--sg-soft-line);
	color: var(--sg-muted);   /* 세란 초록기 회색 → 지면 공통 보조 텍스트 */
	font-size: 13px;
	line-height: 1.75;
	word-break: keep-all;
}


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

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

/* ============================================================
   진료 타임라인 (.cstl)

   사례 상세의 뼈대. 왼쪽에 단계 레일, 오른쪽에 본문.
   레일은 sticky 로 스크롤을 따라 머물고, 진행선과 커서가 읽는 자리를 따라온다.
   모바일에서는 레일이 지면 폭의 8% 만 쓰고(8 : 92), 라벨은 세로쓰기로 남긴다 —
   폭이 좁다고 라벨을 지우면 점만 남아 어디로 가는 버튼인지 알 수 없다.

   값은 전부 --sg-* / --medisync01-* 토큰에서 온다(새 hex 를 만들지 않는다).
============================================================ */

.sg .medisync01-case__sum { padding: 46px 0 0; }
.sg .medisync01-case__sum-box {
	padding: 26px 30px;
	background: var(--sg-soft-green);
	border: 1px solid var(--medisync01-line-warm, #dceaf6);
	border-radius: 16px;
}
.sg .medisync01-case__sum-box .medisync01-case__note { margin-top: 4px; }

.sg .cstl {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 0 40px;
	align-items: start;
	padding: 34px 0 0;
}

/* ---- 레일 ---- */
.sg .cstl__rail {
	position: sticky;
	/* 상단 고정 헤더(56px) 아래로 한 숨 띄운다. */
	top: 84px;
	padding: 18px 0 24px;
}
.sg .cstl__rail-h {
	margin: 0 0 16px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sg-muted);
}
.sg .cstl__body { position: relative; }
.sg .cstl__list { margin: 0; padding: 0; list-style: none; }
.sg .cstl__track {
	position: absolute;
	left: var(--cstl-dot-x, 6.5px);
	top: 14px;
	bottom: 14px;
	width: 1px;
	margin-left: -.5px;
	background: var(--sg-line);
}
.sg .cstl__fill {
	position: absolute;
	inset: 0 auto auto 0;
	width: 1px;
	height: 0;
	background: var(--sg-green);
	transition: height .16s linear;
}
.sg .cstl__cursor {
	position: absolute;
	left: var(--cstl-dot-x, 6.5px);
	top: 0;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: var(--sg-green);
	transition: transform .16s linear;
}
/* 버튼은 레일 선·진행선·커서보다 위에 있어야 한다. */
.sg .cstl__link {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 13px 1fr;
	gap: 0 14px;
	align-items: center;
	padding: 6px 0;
	text-decoration: none;
}
.sg .cstl__dot {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--sg-paper);
	border: 1px solid var(--sg-line);
	position: relative;
	z-index: 1;
	transition: border-color .2s, transform .2s;
}
.sg .cstl__dot::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: transparent;
	transition: background .2s;
}
.sg .cstl__label {
	display: flex;
	align-items: baseline;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--sg-paper);
	transition: background .2s;
}
.sg .cstl__no { font-size: 10px; font-weight: 700; color: var(--sg-muted); transition: color .2s; }
.sg .cstl__title { font-size: 13px; line-height: 1.4; color: var(--sg-muted); white-space: nowrap; transition: color .2s; }
.sg .cstl__link:hover .cstl__label { background: var(--sg-soft-green); }
.sg .cstl__link:hover .cstl__title,
.sg .cstl__link:hover .cstl__no { color: var(--sg-green-deep); }
.sg .cstl__link[data-done] .cstl__dot { border-color: var(--brand-accent, #c2e8fc); }
.sg .cstl__link[data-done] .cstl__dot::after { background: var(--brand-accent, #c2e8fc); }
.sg .cstl__link[aria-current] .cstl__dot { border-color: var(--sg-green); transform: scale(1.15); }
.sg .cstl__link[aria-current] .cstl__dot::after { background: var(--sg-green); }
.sg .cstl__link[aria-current] .cstl__label { background: var(--sg-green-deep); }
.sg .cstl__link[aria-current] .cstl__no { color: var(--brand-accent, #c2e8fc); }
.sg .cstl__link[aria-current] .cstl__title { color: #fff; font-weight: 600; }

/* ---- 단계 ---- */
.sg .cstl__steps {
	padding: 18px 0 0;
	border-left: 1px solid var(--sg-soft-line);
	padding-left: 44px;
}
.sg .cstl-step {
	padding: 30px 0 52px;
	border-bottom: 1px solid var(--sg-soft-line);
	/* 레일 링크로 이동했을 때 제목이 헤더에 가리지 않도록. */
	scroll-margin-top: 84px;
}
.sg .cstl-step:last-child { border-bottom: 0; padding-bottom: 26px; }
.sg .cstl-step > h2 {
	margin: 11px 0 0;
	font-family: var(--sg-serif);
	font-weight: 600;
	font-size: clamp(22px, 2.7vw, 36px);
	line-height: 1.28;
	letter-spacing: -.055em;
}
.sg .cstl-step .sg-body { margin-top: 22px; }
.sg .cstl-step .sx-steps { margin-top: 22px; }
.sg .cstl-step .medisync01-case__symwrap { margin-top: 22px; }

/* 담당의 코멘트 — 타임라인 안에서는 인용 블록으로 세운다. */
.sg .medisync01-case__note--boxed {
	margin-top: 26px;
	padding: 22px 26px;
	background: var(--sg-soft-green);
	border-left: 3px solid var(--sg-green);
	border-radius: 0 14px 14px 0;
}
.sg .medisync01-case__note--boxed p:last-child { margin-bottom: 0; }

/* 증상 태그 — 누르면 사이트 내부 검색 */
.sg .medisync01-case__tag a {
	display: block;
	color: inherit;
	text-decoration: none;
}
.sg .medisync01-case__tag { padding: 0; transition: background .2s, color .2s; }
.sg .medisync01-case__tag a { padding: 7px 13px; border-radius: 999px; }
.sg .medisync01-case__tag:hover { background: var(--brand-accent, #c2e8fc); color: var(--medisync01-on-accent, #12224a); }
.sg .medisync01-case__tags-hint {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--sg-muted);
}

/* 증상 이미지 — 원본 비율을 지킨다(정사각으로 자르지 않는다). */
.sg .medisync01-case__symfig img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 520px;
	border-radius: 20px;
	border: 1px solid var(--sg-line);
	background: var(--sg-paper);
}
.sg .medisync01-case__symcap {
	margin-top: 11px;
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--sg-muted);
}

/* 한마디 — 단계 안에서는 라벨 없이 인용만 (제목이 이미 '한마디'다). */
.sg .cstl-step .medisync01-case__quote { margin-top: 22px; }
.sg .medisync01-case__cite {
	display: block;
	margin-top: 14px;
	font-style: normal;
	font-family: var(--sg-sans);
	font-size: 13px;
	color: var(--sg-muted);
}

@media (max-width: 860px) {
	.sg .cstl {
		/* 왼쪽 타임라인 8 : 본문 92 */
		grid-template-columns: 8fr 92fr;
		gap: 0 12px;
		--cstl-dot-x: 50%;
	}
	.sg .cstl__rail { top: 68px; padding-top: 24px; }
	.sg .cstl__rail-h { display: none; }
	.sg .cstl__link {
		grid-template-columns: 1fr;
		gap: 7px 0;
		justify-items: center;
		padding: 9px 0;
	}
	.sg .cstl__dot { width: 11px; height: 11px; }
	.sg .cstl__no { font-size: 9px; }
	/* 8% 폭에서도 라벨을 남긴다 — 세로쓰기. */
	.sg .cstl__label {
		flex-direction: column;
		align-items: center;
		gap: 5px;
		padding: 9px 4px;
	}
	.sg .cstl__title {
		writing-mode: vertical-rl;
		text-orientation: upright;
		font-size: 12px;
		letter-spacing: .04em;
		line-height: 1.1;
	}
	.sg .cstl__steps { border-left: 0; padding-left: 0; }
	.sg .cstl-step { padding: 24px 0 42px; scroll-margin-top: 68px; }
	.sg .medisync01-case__sum-box { padding: 22px; }
	.sg .medisync01-case__note--boxed { padding: 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.sg .cstl__fill,
	.sg .cstl__cursor,
	.sg .cstl__dot { transition: none; }
}