/* ==========================================================================
   Before/After Case Detail Page
   ── 홈페이지 전체 상세 페이지 타이포 스케일과 통일 ──
   (글로벌 style.css: body 16px/15px(m) · .cont_sub_title 22.4px · .cont_text_title 20.8px · .cont_text 16px)

     Hero label     ─ 22px / 17px(m)  · 700 (Playfair, tracking)
     Hero title(H1) ─ 26px / 20px(m)  · 700
     Section(H2)    ─ 22px / 17px(m)  · 700  ← 글로벌 .cont_sub_title 과 동일
     Section sub    ─ 14px / 13px(m)  · 500
     Body L(강조)   ─ 16px / 14.5px(m)· 400-500  ← 글로벌 .cont_text 와 동일
     Body M(일반)   ─ 15px / 14px(m)  · 500
     Body S(보조)   ─ 14px / 13px(m)  · 400-500
     Body XS(메타)  ─ 12.5px/11.5px(m)· 400-500
   ========================================================================== */

:root {
	--bac-cream: #faf7f2;
	--bac-warm-white: #fdfcfa;
	--bac-border: #e8e2d8;
	--bac-border-light: #f0ece3;
	--bac-dark: var(--wds-text);
	--bac-sub: #6b5240;
	--bac-sub-soft: #8a7260;
	--bac-accent: #5E1A25;
	--bac-accent-light: #c89b6e;
	--bac-bg-card: #ffffff;
	--bac-sans: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
	--bac-display: 'Playfair Display', Georgia, serif;
}

.bac-page {
	background: var(--bac-cream);
	padding: 90px 0 0;
	min-height: 100vh;
	font-family: var(--bac-sans) !important;
	color: var(--bac-dark);
	line-height: 1.7;
	font-size: 16px;
}
.bac-page *,
.bac-page *::before,
.bac-page *::after {
	font-family: inherit !important;
}
.bac-page .bac-hero__label {
	font-family: 'Pretendard', Inter, 'Noto Sans KR', -apple-system, sans-serif !important;
}
.bac-page .bac-doctor__mark,
.bac-page .bac-qa__mark {
	font-family: var(--bac-display) !important;
}
.bac-page .bac-photo__label {
	font-family: 'Pretendard', Inter, 'Noto Sans KR', -apple-system, sans-serif !important;
}

.bac-wrap {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 24px;
}
.bac-body { padding-bottom: 80px; }

/* ── HERO ── */
.bac-hero {
	padding: 60px 0 48px;
	border-bottom: 1px solid var(--bac-border);
	margin-bottom: 48px;
}
.bac-crumb {
	font-size: 13px;
	color: var(--bac-sub);
	margin-bottom: 22px;
	letter-spacing: -0.01em;
	font-weight: 500;
}
.bac-crumb a { color: var(--bac-sub); text-decoration: none; transition: color 0.2s; }
.bac-crumb a:hover { color: var(--bac-accent); }
.bac-crumb span { margin: 0 8px; color: var(--bac-border); }
.bac-crumb span:last-child { color: var(--bac-sub); margin: 0; }

/* ── HERO (상단) ──
   - Real Case 라벨: 22px 강조
   - 타이틀:        28px (기존 32px → 축소)
   - 서브:          15px */
.bac-hero__label {
	display: inline-block;
	font-family: 'Pretendard', Inter, 'Noto Sans KR', -apple-system, sans-serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bac-accent);
	margin-bottom: 14px;
}
/* CASE # 번호 + 카테고리 — 리스트 카드와 동일 디자인 */
.bac-hero__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.bac-hero__case-no {
	font-size: 16px;
	letter-spacing: 0.08em;
	color: var(--bac-accent);
	font-weight: 700;
	text-transform: uppercase;
}
.bac-hero__case-cat {
	font-size: 12px;
	color: var(--bac-sub);
	padding: 4px 11px;
	background: var(--bac-cream);
	border: 1px solid var(--bac-border);
	border-radius: 20px;
	letter-spacing: -0.01em;
	font-weight: 500;
}
.bac-hero__title {
	font-size: 26px !important;
	font-weight: 700 !important;
	color: var(--bac-dark);
	line-height: 1.35;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
	word-break: keep-all;
}
.bac-hero__sub {
	font-size: 16px;
	color: var(--bac-sub);
	line-height: 1.75;
	margin: 0;
	word-break: keep-all;
	font-weight: 400;
}
.bac-hero__subtitle {
	font-size: 16px;
	color: var(--bac-sub);
	line-height: 1.6;
	margin: -10px 0 18px;
	word-break: keep-all;
	font-weight: 400;
	letter-spacing: -0.01em;
}
@media (max-width: 768px) {
	.bac-hero__subtitle { font-size: 14px; line-height: 1.55; margin: -8px 0 14px; }
}

/* ── SECTIONS (본문 소제목 체계) ──
   - 섹션 제목: 22px (글로벌 .cont_sub_title 과 통일)
   - 섹션 서브: 14px */
.bac-section { margin-bottom: 56px; }

.bac-section__title {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--bac-dark);
	margin: 0 0 10px;
	position: relative;
	padding-left: 14px;
	letter-spacing: -0.02em;
	line-height: 1.3;
}
.bac-section__title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 18px;
	background: var(--bac-accent);
	border-radius: 2px;
}
.bac-section__sub {
	font-size: 14px;
	color: var(--bac-sub);
	margin: 0 0 22px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* ── PHOTOS ── */
.bac-section--photos {
	background: var(--wds-surface);
	padding: 0;
	margin-bottom: 48px;
	border: 0;
}
.bac-photos {
	max-width: 528px;
	margin-left: auto;
	margin-right: auto;
}

/* ════════════════════════════════════════════════════════════════════
   PC 전후사진 상세 페이지 전체 폭 통일 — 2026-05-13 사용자 사양 v2
   /community/beforeafter/*/ 모든 섹션이 동일 wide container 사용
   .bac-wrap 자체를 PC에서 확장 (이미지·요약·관련·CTA 모두 동일 좌우 라인)
   모바일/태블릿(≤1023px)은 기존 960px 폭 유지
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
	/* Wide PC 표준 — 모든 .bac-wrap 섹션을 1180px로 확장 */
	.bac-page .bac-wrap {
		max-width: 1180px !important;
	}
	.bac-page .bac-photos {
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
		gap: 16px;
	}
	.bac-page .bac-angle-tabs {
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
	}
	/* 독서 가독성: 본문 단락은 760px 내로 제한 */
	.bac-page .bac-section__sub {
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}
	.bac-page .bac-detail,
	.bac-page .bac-doctor__body {
		max-width: 860px;
		margin-left: auto;
		margin-right: auto;
	}
	/* 상담 CTA 영역 강조 */
	.bac-page .bac-section--cta .bac-cta {
		max-width: 880px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 32px;
		padding-right: 32px;
	}
}
@media (min-width: 1280px) {
	/* Ultra-wide PC — 1280px 정렬 */
	.bac-page .bac-wrap {
		max-width: 1280px !important;
	}
	.bac-page .bac-photos {
		max-width: 1200px;
		gap: 18px;
	}
	.bac-page .bac-angle-tabs {
		max-width: 1200px;
	}
}

/* ────────────────────────────────────────────────────────
   PC 폭 확장 시 가독성 보정 — 2026-05-13 v2
   요약·Q&A·관련 케이스 등은 wide container 안에서 적절히 정렬
   ──────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
	/* 요약 박스: 가독성 위해 적정 폭 유지 (label-value table layout) */
	.bac-page .bac-summary {
		max-width: 1080px;
		margin-left: auto;
		margin-right: auto;
	}
	/* Q&A: 적정 가독성 폭 */
	.bac-page .bac-qa {
		max-width: 980px;
		margin-left: auto;
		margin-right: auto;
	}
	/* 비슷한 케이스: 4열 그리드 — wide container 활용 */
	.bac-page .bac-similar {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 18px !important;
	}
	/* 관련 의학 정보 / 블로그 카드 */
	.bac-page .bac-related__list {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
.bac-angle-tabs {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 14px;
	margin-bottom: 20px;
	padding: 0 18px;
	flex-wrap: wrap;
}
.bac-angle-tab {
	padding: 6px 16px;
	border: 1px solid var(--bac-border);
	background: var(--bac-warm-white);
	color: var(--bac-sub);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.25s;
	letter-spacing: -0.01em;
	border-radius: 3px;
}
.bac-angle-tab:hover { border-color: var(--bac-accent); color: var(--bac-accent); }
.bac-angle-tab.is-active { background: var(--bac-accent); color: #fff; border-color: var(--bac-accent); font-weight: 600; }

.bac-photos { display: none; grid-template-columns: 1fr 1fr; gap: 2px; }
.bac-photos.is-active { display: grid; }

.bac-photo {
	position: relative;
	background: var(--wds-border);
	overflow: hidden;
	aspect-ratio: 4/5;
}
.bac-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bac-photo__label {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(26, 26, 26, .78);
	color: #fff;
	padding: 4px 10px;
	font-size: 11px;
	letter-spacing: 0.2em;
	font-weight: 600;
	z-index: 3;
	border-radius: 2px;
	font-family: 'Pretendard', Inter, 'Noto Sans KR', -apple-system, sans-serif;
}
.bac-photo__label--after { background: rgba(94, 26, 37, .9); }

/* 잠금 영역 — 리스트 카드(.casebook-card .txt_wrap)와 동일한 디자인 */
.bac-photo__locked {
	position: relative;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--wds-text) 0%, var(--wds-text) 100%) !important;
}
.bac-photo__locked img {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	opacity: 0.12 !important;
	filter: blur(12px) !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
a.bac-photo__locked-inner,
.bac-photo__locked-inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #fff;
	z-index: 4;
	padding: 16px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.bac-photo__locked-icon { display: none; }
.bac-photo__locked-title { font-size: 13px; font-weight: 600; line-height: 1.6; color: #fff; }
.bac-photo__locked-sub { font-size: 12px; color: rgba(255,255,255,0.75); margin-bottom: 8px; font-weight: 400; letter-spacing: 0.02em; }

/* ── SUMMARY ── */
.bac-summary {
	background: var(--bac-bg-card);
	border: 1px solid var(--bac-border-light);
	padding: 8px 28px;
}
.bac-summary__item {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 24px;
	padding: 16px 0;
	border-bottom: 1px solid var(--bac-border-light);
	font-size: 15px;
	align-items: center;
}
.bac-summary__item:last-child { border-bottom: none; }
.bac-summary__label {
	font-size: 15px;
	color: var(--bac-accent);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	line-height: 1.65;
}
.bac-summary__val {
	font-size: 15px;
	color: var(--bac-dark);
	word-break: keep-all;
	font-weight: 500;
	line-height: 1.65;
}
/* ── 수술 난이도 : 5개 별 등급 ──
   비어있는 별 = 테두리만, 채워진 별 = 안 색 꽉 참 */
.bac-diff {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.bac-diff__stars {
	display: inline-flex;
	gap: 3px;
	color: var(--bac-accent);
	line-height: 0;
}
.bac-diff__star { display: block; }
.bac-diff__label {
	display: none;
}
@media (max-width: 768px) {
	.bac-diff__stars { gap: 2px; }
	.bac-diff__star { width: 16px; height: 16px; }
}
/* ── 볼륨 변화 : 에디토리얼 타이포 디자인 ──
   Playfair 세리프 컵 사이즈 + After 액센트 언더라인 */
.bac-volume {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;
	white-space: nowrap;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	line-height: 1;
	letter-spacing: 0;
}
.bac-volume__before,
.bac-volume__after {
	display: inline-block;
	font-family: var(--bac-display) !important;
	font-size: 17px;
	line-height: 1.2;
	padding: 0;
	background: transparent;
	border: 0;
	min-width: 0;
	box-shadow: none;
	font-style: normal;
}
.bac-volume__before {
	color: var(--bac-sub-soft);
	font-weight: 400;
}
.bac-volume__arrow {
	font-family: var(--bac-display) !important;
	font-style: italic;
	color: var(--bac-accent-light);
	font-weight: 400;
	font-size: 15px;
	line-height: 1;
	margin: 0 2px;
}
.bac-volume__after {
	color: var(--bac-accent);
	font-weight: 700;
	position: relative;
	padding-bottom: 2px;
}
.bac-volume__after::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: var(--bac-accent);
}
.bac-chest-tag {
	display: inline-block;
	padding: 3px 10px;
	margin: 2px 4px 2px 0;
	background: var(--wds-primary-soft);
	color: var(--bac-accent, var(--wds-primary));
	border: 1px solid rgba(94, 26, 37, .25);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}

/* 좌/우 보형물 표시 */
.bac-implant-lr {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bac-implant-lr__row {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	line-height: 1.4;
}
.bac-implant-lr__side {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bac-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
	border-radius: 50%;
}
.bac-implant-lr__val {
	color: var(--bac-dark);
	font-weight: 500;
}

/* ── DETAIL ── */
.bac-detail {
	background: var(--bac-warm-white);
	border-left: 3px solid var(--bac-accent);
	padding: 24px 28px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--bac-dark);
	word-break: keep-all;
	font-weight: 400;
}

/* ── TIMELINE ── */
.bac-timeline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	position: relative;
}
.bac-timeline::before {
	content: '';
	position: absolute;
	top: 18px;
	left: 5%;
	right: 5%;
	height: 2px;
	background: linear-gradient(to right, var(--bac-border) 0%, var(--bac-accent-light) 50%, var(--bac-accent) 100%);
	z-index: 0;
}
.bac-timeline__item {
	position: relative;
	text-align: center;
	background: var(--bac-cream);
	padding: 0 4px;
}
.bac-timeline__dot {
	width: 14px;
	height: 14px;
	background: var(--bac-accent);
	border-radius: 50%;
	margin: 0 auto 14px;
	position: relative;
	z-index: 1;
	box-shadow: 0 0 0 5px var(--bac-cream);
}
.bac-timeline__phase {
	font-size: 15px;
	font-weight: 700;
	color: var(--bac-dark);
	margin-bottom: 6px;
	letter-spacing: -0.01em;
}
.bac-timeline__desc {
	font-size: 13px;
	color: var(--bac-sub);
	line-height: 1.6;
	word-break: keep-all;
	font-weight: 400;
}

/* ── DOCTOR COMMENT ── */
.bac-doctor {
	background: var(--bac-bg-card);
	border: 1px solid var(--bac-border-light);
	padding: 36px 36px 32px;
	margin: 0;
	position: relative;
}
.bac-doctor__mark {
	font-family: var(--bac-display);
	font-size: 52px;
	color: var(--bac-accent-light);
	line-height: 0.5;
	margin-bottom: 10px;
	font-weight: 700;
}
.bac-doctor__body {
	font-size: 16px;
	line-height: 1.85;
	color: var(--bac-dark);
	margin-bottom: 20px;
	word-break: keep-all;
	font-weight: 500;
	letter-spacing: -0.01em;
}
.bac-doctor__sig {
	font-size: 14px;
	color: var(--bac-sub);
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* ── RISK ── */
.bac-risk {
	background: var(--wds-bg);
	border: 1px solid var(--wds-border);
	padding: 20px 24px;
}
.bac-risk__item {
	font-size: 15px;
	color: var(--bac-dark);
	padding: 12px 0 12px 26px;
	border-bottom: 1px dashed var(--bac-border-light);
	position: relative;
	line-height: 1.7;
	word-break: keep-all;
	font-weight: 500;
}
.bac-risk__item:last-child { border-bottom: none; }
.bac-risk__item::before {
	content: '!';
	position: absolute;
	left: 0;
	top: 14px;
	width: 18px;
	height: 18px;
	background: var(--bac-accent);
	color: #fff;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── Q&A ── */
.bac-qa { border-top: 1px solid var(--bac-border-light); }
.bac-qa__item {
	border-bottom: 1px solid var(--bac-border-light);
	background: var(--bac-bg-card);
}
.bac-qa__q {
	list-style: none;
	padding: 20px 52px 20px 24px;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 16px;
	font-weight: 600;
	color: var(--bac-dark);
	transition: background 0.2s;
	position: relative;
	letter-spacing: -0.01em;
	line-height: 1.55;
}
.bac-qa__q::-webkit-details-marker { display: none; }
.bac-qa__q:hover { background: var(--bac-warm-white); }
.bac-qa__q::after {
	content: '+';
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	color: var(--bac-accent);
	font-weight: 300;
	transition: transform 0.2s;
	line-height: 1;
}
.bac-qa__item[open] .bac-qa__q::after { transform: translateY(-50%) rotate(45deg); }
.bac-qa__mark {
	font-family: var(--bac-display);
	color: var(--bac-accent);
	font-weight: 700;
	font-size: 16px;
	flex-shrink: 0;
	line-height: 1.5;
}
.bac-qa__mark--a { color: var(--bac-accent-light); }
.bac-qa__a {
	padding: 0 24px 22px 54px;
	font-size: 15px;
	color: var(--bac-sub);
	line-height: 1.8;
	display: flex;
	gap: 14px;
	word-break: keep-all;
	font-weight: 400;
}

/* ── SIMILAR CASES ── */
.bac-similar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.bac-similar__card {
	text-decoration: none;
	background: var(--bac-bg-card);
	border: 1px solid var(--bac-border-light);
	transition: all 0.25s;
	display: block;
	color: inherit;
	overflow: hidden;
}
.bac-similar__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(26, 26, 26, .08);
	border-color: var(--bac-accent-light);
}
.bac-similar__img { aspect-ratio: 1/1; overflow: hidden; background: var(--bac-border-light); }
.bac-similar__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.bac-similar__card:hover .bac-similar__img img { transform: scale(1.06); }
.bac-similar__body { padding: 14px 14px 16px; }
.bac-similar__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--bac-dark);
	line-height: 1.45;
	margin-bottom: 10px;
	word-break: keep-all;
	letter-spacing: -0.02em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bac-similar__tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.bac-similar__tags span {
	font-size: 12.5px;
	padding: 3px 9px;
	background: var(--bac-border-light);
	color: var(--bac-sub);
	border-radius: 2px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* ── CTA ── */
.bac-section--cta { margin-top: 80px; }
.bac-cta {
	background: var(--bac-dark);
	padding: 48px 32px;
	text-align: center;
	color: #fff;
}
.bac-cta__text {
	font-size: 16px;
	line-height: 1.85;
	margin: 0 0 28px;
	opacity: 0.92;
	font-weight: 400;
	word-break: keep-all;
}
.bac-cta__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bac-cta__btn {
	display: inline-block;
	padding: 14px 36px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	transition: all 0.25s;
	min-width: 180px;
}
.bac-cta__btn--primary { background: var(--bac-accent); color: #fff; }
.bac-cta__btn--primary:hover { background: var(--wds-primary); transform: translateY(-2px); }
.bac-cta__btn--line {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255,255,255,0.4);
}
.bac-cta__btn--line:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* ── BACK LINK ── */
.bac-back { text-align: center; margin-top: 48px; }
.bac-back__link {
	display: inline-block;
	padding: 10px 24px;
	color: var(--bac-sub);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	border-bottom: 1px solid transparent;
	transition: all 0.2s;
}
.bac-back__link:hover { color: var(--bac-accent); border-color: var(--bac-accent); }

/* ── RESPONSIVE (mobile) ──
   글로벌 style.css 의 모바일 base font-size: 15px 와 통일
   본문 스케일 (모바일):
     Body L (강조 박스): 14.5px → detail, doctor__body, qa__q
     Body M (일반):      14px   → summary item, risk item, timeline phase, qa answer
     Body S (보조):      13px   → section sub, timeline desc 후보
     Body XS (메타):     11.5~12px → crumb, similar tags */
@media (max-width: 768px) {
	.bac-page { font-size: 15px; padding: 70px 0 0; line-height: 1.65; }
	.bac-wrap { padding: 0 16px; }
	.bac-body { padding-bottom: 48px; }

	.bac-hero { padding: 24px 0 20px; margin-bottom: 22px; }
	.bac-crumb { font-size: 12px; margin-bottom: 12px; }
	.bac-hero__label { font-size: 17px; letter-spacing: 0.14em; margin-bottom: 8px; }
	.bac-hero__title { font-size: 20px !important; margin: 0 0 10px; line-height: 1.38; }
	.bac-hero__sub   { font-size: 13.5px; line-height: 1.65; }

	.bac-section { margin-bottom: 26px; }
	.bac-section__title { font-size: 17px !important; padding-left: 12px; margin: 0 0 7px; }
	.bac-section__title::before { height: 14px; width: 3px; }
	.bac-section__sub { font-size: 13px; margin-bottom: 12px; }

	.bac-section--photos { padding: 0; margin-bottom: 26px; margin-left: 0; margin-right: 0; }
	.bac-photos { max-width: 100%; gap: 2px; }
	.bac-angle-tabs { gap: 6px; margin-top: 10px; margin-bottom: 16px; padding: 0 14px; }
	.bac-angle-tab { padding: 6px 16px; font-size: 13px; }
	.bac-photo { aspect-ratio: 4/5 !important; background: var(--wds-border); }
	.bac-photo img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
	}
	.bac-photo__locked { height: 100% !important; }
	.bac-photo__locked img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
	.bac-photo__label { font-size: 11px; padding: 4px 10px; letter-spacing: 0.2em; top: 12px; left: 12px; }

	.bac-summary { padding: 2px 14px; }
	.bac-summary__item { grid-template-columns: 92px 1fr; gap: 12px; font-size: 14px; padding: 10px 0; }
	.bac-summary__label { font-size: 14px; letter-spacing: -0.01em; line-height: 1.6; }
	.bac-summary__val { font-size: 14px; line-height: 1.6; }

	.bac-volume { gap: 8px; }
	.bac-volume__before,
	.bac-volume__after { font-size: 16px; }
	.bac-volume__arrow { font-size: 14px; }
	.bac-volume__after { padding-bottom: 2px; }

	.bac-detail { font-size: 14.5px; padding: 14px 16px; line-height: 1.78; border-left-width: 2px; }

	.bac-timeline { grid-template-columns: 1fr 1fr; gap: 10px; }
	.bac-timeline::before { display: none; }
	.bac-timeline__item { background: var(--bac-bg-card); padding: 12px 8px; border: 1px solid var(--bac-border-light); }
	.bac-timeline__dot { width: 10px; height: 10px; margin: 0 auto 8px; box-shadow: 0 0 0 2px var(--bac-bg-card); }
	.bac-timeline__phase { font-size: 14px; margin-bottom: 3px; }
	.bac-timeline__desc { font-size: 12px; line-height: 1.6; }

	.bac-doctor { padding: 18px 16px 16px; }
	.bac-doctor__mark { font-size: 32px; margin-bottom: 4px; }
	.bac-doctor__body { font-size: 14.5px; line-height: 1.8; margin-bottom: 12px; }
	.bac-doctor__sig { font-size: 12.5px; }

	.bac-risk { padding: 12px 14px; }
	.bac-risk__item { font-size: 14px; padding: 10px 0 10px 22px; line-height: 1.65; }
	.bac-risk__item::before { width: 16px; height: 16px; font-size: 10px; top: 12px; }

	.bac-qa__q { font-size: 14.5px; padding: 14px 40px 14px 14px; gap: 10px; line-height: 1.55; }
	.bac-qa__q::after { font-size: 18px; right: 16px; }
	.bac-qa__mark { font-size: 14px; }
	.bac-qa__a { font-size: 13.5px; padding: 0 14px 14px 38px; gap: 10px; line-height: 1.75; }

	.bac-similar { grid-template-columns: 1fr 1fr; gap: 8px; }
	.bac-similar__body { padding: 10px 10px 12px; }
	.bac-similar__title { font-size: 13px; margin-bottom: 6px; }
	.bac-similar__tags { gap: 4px; }
	.bac-similar__tags span { font-size: 11px; padding: 2px 6px; }

	.bac-section--cta { margin-top: 36px; }
	.bac-cta { padding: 22px 14px; }
	.bac-cta__text { font-size: 14px; line-height: 1.7; margin: 0 0 16px; }
	.bac-cta__btns { gap: 6px; }
	.bac-cta__btn { width: 100%; min-width: 0; font-size: 13.5px; padding: 11px 20px; }

	.bac-back { margin-top: 24px; }
	.bac-back__link { font-size: 13px; padding: 7px 16px; }
}

/* ==========================================================================
   ⑧ 관련 의학 정보 (2026-05-01) — 카테고리·키워드 매칭 deep link 박스
   ========================================================================== */
.bac-related { margin-top: 32px; }
.bac-related__group { margin-top: 16px; }
.bac-related__group + .bac-related__group { margin-top: 24px; }
.bac-related__label {
	font-size: 13px; font-weight: 700; color: var(--wds-text-sub);
	margin-bottom: 10px; letter-spacing: 0.02em;
}
.bac-related__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 720px) { .bac-related__list { grid-template-columns: 1fr; } }
.bac-related__list li { margin: 0; }
.bac-related__link {
	display: block;
	padding: 12px 16px;
	border: 1px solid var(--wds-border);
	border-radius: 10px;
	background: var(--wds-surface);
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}
.bac-related__link:hover {
	border-color: var(--wds-text-sub); background: var(--wds-surface);
}
.bac-related__title {
	display: block; font-size: 14.5px; font-weight: 600; color: var(--wds-text);
	line-height: 1.4;
}
.bac-related__desc {
	display: block; font-size: 12.5px; color: var(--wds-primary-dark); margin-top: 4px; line-height: 1.5;
}
.bac-summary__item--keychange .bac-summary__val {
	font-weight: 600; color: var(--wds-text-sub);
}