.chw-sermon {
	position: relative;
}
.chw-sermon__inner {
	position: relative;
	z-index: 1;
	max-width: var(--content-max, 1200px);
	margin: 0 auto;
	padding: 32px 0 48px;
}
.chw-sermon__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
}
.chw-sermon__pink,
.chw-sermon__dark {
	border-radius: var(--r-card, 18px);
	padding: 40px;
	color: #fff;
}
.chw-sermon__dark:only-child {
	grid-column: 1 / -1;
}
.chw-sermon__pink {
	/* 불투명 딥로즈 — 카드는 이제 자체 배경 없이 공유 .ch-band(밝은 톤) 위에 얹히므로,
	   밴드 톤과 무관하게 흰 텍스트 AA를 보장하려면 카드 자체가 충분히 어두워야 한다.
	   __eyebrow/__meta/__summary는 opacity 0.85~0.92라 실제 렌더 색은 순백이 아니라 카드색
	   쪽으로 블렌딩된 밝은 회백색(최악 0.85 → 약 rgb(236,228,230))이다. #7d4c56(상대휘도≈0.103)
	   위에서 그 블렌딩색 대비≈5.5:1로 AA 통과(순백 텍스트는 대비 여유가 더 크다). */
	background: #7d4c56;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.chw-sermon__eyebrow {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 600;
	opacity: 0.85;
}
/* Tile Heading 역할(디자인 시스템): 산세리프 28/400/32, +0.196px. 세리프 폐기. */
.chw-sermon__title {
	margin: 0 0 16px;
	font-size: var(--fs-tile, 28px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--ls-tile, 0.196px);
}
.chw-sermon__title a {
	color: inherit;
	text-decoration: none;
}
.chw-sermon__title a:hover,
.chw-sermon__title a:focus-visible {
	text-decoration: underline;
}
.chw-sermon__summary {
	margin: 0 0 28px;
	font-size: 14px;
	line-height: 1.6;
	opacity: 0.85;
}
.chw-sermon__pill {
	/* 흰 워시(background) 알파를 낮춰(원래 .18 → .08) 카드 배경 위에 흰 글자 대비를 보전한다.
	   배경 밴드가 admin 교체 사진(밝은 사진 포함) 위에서도 실측 AA(4.5:1)를 넘도록 낮춘 값 —
	   .18은 밝은 admin 사진에서 흰 글자 대비가 3.85:1까지 떨어짐(codex 리뷰 지적,
	   task-4-report.md 참고). */
	/* 컴팩트 pill(디자인 시스템): 36px, 8/15 패딩, 14px/400 — 카드(타일) CTA 규격. */
	display: inline-flex;
	align-items: center;
	min-height: var(--btn-h-compact, 36px);
	padding: var(--btn-pad-compact, 8px 15px);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--r-pill, 980px);
	color: #fff;
	font-size: var(--fs-small, 14px);
	/* body의 line-height 25px 상속 차단 — 컴팩트 pill 높이 36px 스펙 유지(codex 리뷰). */
	line-height: var(--lh-small, 18px);
	font-weight: 400;
	text-decoration: none;
}
.chw-sermon__pill:hover,
.chw-sermon__pill:focus-visible {
	background: rgba(255, 255, 255, 0.2);
}

.chw-sermon__dark {
	/* 불투명 --primary — 공유 밴드 톤과 무관하게 흰 텍스트 AA를 보장(대비 여유 충분). */
	background: var(--primary, #615557);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.chw-sermon__sub {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 86px;
	height: 31px;
	padding: 0 18px;
	margin-bottom: 16px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 15.5px;
	font-size: 13px;
	font-weight: 600;
}
.chw-sermon__rows {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 24px;
	row-gap: 10px;
	margin-bottom: 24px;
}
.chw-sermon__rows:last-child {
	margin-bottom: 0;
}
.chw-sermon__row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 14px;
	overflow-wrap: break-word;
}
.chw-sermon__row b {
	min-width: 70px;
	font-weight: 700;
}
.chw-sermon__row span {
	/* AA 4.5:1 텍스트 전용 토큰(어두운 카드 위, admin 교체사진 최악값 기준) — 배경(pill)에
	   쓰이는 --pill-bg(3.99:1, sub-AA)는 그대로 두고 이 텍스트에만 별도 토큰 적용. */
	color: var(--pill-text, #d9cccf);
}

@media (max-width: 839px) {
	.chw-sermon__inner {
		padding: 24px 0 40px;
	}
	.chw-sermon__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.chw-sermon__pink,
	.chw-sermon__dark {
		padding: 32px;
	}
	.chw-sermon__title {
		font-size: 24px;
	}
}

@media (max-width: 599px) {
	.chw-sermon__inner {
		padding: 16px 0 32px;
	}
	.chw-sermon__pink,
	.chw-sermon__dark {
		padding: 24px;
	}
	.chw-sermon__title {
		font-size: 22px;
	}
	.chw-sermon__rows {
		grid-template-columns: 1fr;
		row-gap: 8px;
	}
}