.chw-youtube {
	position: relative;
	/* 하단 실루엣 장식(자체 벡터: 언덕·양·십자가) — 레퍼런스의 하단 실루엣 무드 재현. */
	background: url('../img/silhouette-band.svg') bottom center / 100% auto no-repeat, var(--primary, #615557);
	color: #fff;
	/* 전폭(full-bleed) 브레이크아웃 — ch_hero(위)와 동일 기법. width:auto + 대칭 margin만으로
	   부모 .ch-main(max-width:1200px)을 벗어나 뷰포트 전체 폭까지 확장, 100vw 스크롤바-오버플로
	   함정 회피. 내부는 .chw-youtube__inner가 max-width:1200px;margin:0 auto로 재중앙정렬. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* 돔 캡(::before, 위로 60px 솟음)이 앞 섹션 콘텐츠를 덮지 않도록 캡 높이만큼 여백 확보. */
	margin-top: 60px;
}
/* 상단 돔(레퍼런스 기하): 다크 타원 캡이 섹션 위로 솟아 가운데가 가장 높고 양끝까지
   밴드가 이어진다. 이전 border-radius 모서리 컷은 양옆에 흰 기둥을 만들어 레퍼런스와
   반대 기하였음(사용자 지적, 히어로 하단 돔과 동일 수정). radial-gradient 타원을 요소
   내부에 그려 잉크 오버플로 없이 얕은 곡률 — 캡은 top:-60px에서 위로 솟는다
   (콘텐츠는 padding-top 166px라 무간섭). */
.chw-youtube::before {
	content: '';
	position: absolute;
	top: -60px;
	left: 0;
	right: 0;
	height: 120px;
	background: radial-gradient(ellipse 75% 100% at 50% 100%, var(--primary, #615557) 99.5%, rgba(97, 85, 87, 0) 100%);
	pointer-events: none;
}
.chw-youtube__inner {
	max-width: calc(var(--content-max, 1200px) + 2 * var(--gutter, 24px));
	margin: 0 auto;
	padding: 166px var(--gutter, 24px) 112px;
	text-align: center;
}
.chw-youtube__subheading {
	margin: 0 0 16px;
	font-size: 17px;
	color: #e8d9dc;
}
/* Section 역할(디자인 시스템): 40/600/44, tracking normal. */
.chw-youtube__heading {
	margin: 0 0 48px;
	font-size: var(--fs-section, 40px);
	font-weight: 600;
	line-height: var(--lh-section, 44px);
	letter-spacing: normal;
}
.chw-youtube__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	text-align: left;
}
.chw-youtube__card {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--r-card, 18px);
	overflow: hidden;
	background: var(--pink-card, #c58a95);
	text-decoration: none;
	color: #fff;
}
.chw-youtube__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.chw-youtube__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20px;
	background: linear-gradient(180deg, rgba(23, 15, 14, 0) 0%, rgba(23, 15, 14, 0.15) 45%, rgba(23, 15, 14, 0.88) 100%);
}
.chw-youtube__pill {
	align-self: flex-start;
	background: #fff;
	color: var(--accent, #c18590);
	padding: 6px 15px;
	border-radius: var(--r-pill, 980px);
	font-size: var(--fs-caption, 12px);
	line-height: var(--lh-caption, 16px);
	font-weight: 600;
}
.chw-youtube__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* 배지(키워드 매칭) 유무와 무관하게 항상 하단 고정 — 배지가 없으면 space-between이
	   meta를 상단으로 끌어올리는 문제 방지. */
	margin-top: auto;
}
/* 세리프 폐기 — 오버레이 위 가독을 위해 산세리프 600. */
.chw-youtube__title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.chw-youtube__date {
	font-size: var(--fs-small, 14px);
	font-style: normal;
	color: #fff;
	opacity: 0.85;
}
.chw-youtube__empty {
	margin: 0;
	padding: 40px 28px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--r-card, 18px);
	color: #e8d9dc;
	font-size: 14px;
	text-align: center;
}
.chw-youtube__more {
	/* 대형 pill(디자인 시스템): 44px, 11/21 패딩, 17px/400 — 섹션 대표 CTA. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 48px;
	min-height: var(--btn-h, 44px);
	/* 세로 10px = 스펙 11px에서 보더 1px 차감 — 렌더 높이 정확히 44px(box-sizing 합산 실측). */
	padding: 10px 21px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--r-pill, 980px);
	color: #fff;
	/* 컨트롤 폰트 17px 스펙 고정(본문 18px 상향과 분리). */
	font-size: 17px;
	/* 17px×1.3≈22px — 패딩 11px×2와 합쳐 44px 스펙 높이(codex 리뷰: body lh 상속 차단). */
	line-height: 1.3;
	font-weight: 400;
	text-decoration: none;
}
.chw-youtube__more:hover,
.chw-youtube__more:focus-visible {
	background: #fff;
	color: var(--primary, #615557);
}

@media (max-width: 839px) {
	.chw-youtube {
		margin-top: 40px;
	}
	.chw-youtube::before {
		top: -40px;
		height: 80px;
	}
	.chw-youtube__inner {
		padding: 120px var(--gutter, 24px) 80px;
	}
	.chw-youtube__heading {
		font-size: 32px;
		line-height: 1.15;
		margin-bottom: 40px;
	}
	.chw-youtube__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.chw-youtube__card {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 599px) {
	.chw-youtube {
		margin-top: 28px;
	}
	.chw-youtube::before {
		top: -28px;
		height: 56px;
	}
	.chw-youtube__inner {
		padding: 88px var(--gutter, 24px) 64px;
	}
	.chw-youtube__heading {
		font-size: 26px;
		line-height: 1.15;
		margin-bottom: 32px;
	}
	.chw-youtube__title {
		font-size: 18px;
	}
	.chw-youtube__more {
		width: 100%;
		text-align: center;
	}
}