.chw-hero {
	position: relative;
	/* .ch-band가 margin-top:-90px로 히어로 밑에 겹치므로(코너 이음) 히어로가 위에 페인트되게.
	   헤더(z 20+)보다 낮게 유지. */
	z-index: 1;
	color: #fff;
	/* 전폭(full-bleed) 브레이크아웃 — 부모 .ch-main(max-width:1200px)을 벗어나 뷰포트 전체 폭으로
	   확장한다. width:100vw 대신 margin만 지정해 width:auto로 두면(레퍼런스 라이브 사이트와 동일
	   기법), 세로 스크롤바가 있어도 100vw 스크롤바-오버플로 함정을 피한다. 내부 컨텐츠는
	   .chw-hero__inner가 별도로 max-width:1200px;margin:0 auto로 다시 중앙 정렬한다. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* 하단 곡선(레퍼런스 기하): 사진이 가운데서 아래로 볼록, 코너는 mask로 잘라 "투명"하게 —
   플랫색 페인트(구 ::after radial-gradient)는 뒤 .ch-band의 SVG 배경(우상단 핑크 원 등,
   가로로 색이 변함)과 절대 못 맞아 우측에 흰 쐐기 단차가 남았다. 투명 코너 + 밴드를
   margin-top:-90px로 겹쳐 실제 밴드 픽셀이 비치게 하면 이음새가 구조적으로 사라진다.
   mask 2레이어: [상단 직사각형] ∪ [하단 타원 rx=75%폭·ry≈90px] (mask-composite 초기값 add=합집합).
   타원 ry를 91px로 1px 키워 바닥 행이 100% 스톱에 걸리는 헤어라인 방지(구 bottom:-1px과 동일 목적).
   mask 미지원 브라우저는 직선 하단으로 우아하게 강등. */
.chw-hero__slides {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-color: var(--hero, #372f2c);
	mask-image: linear-gradient(#000, #000),
		radial-gradient(75% 91px at 50% calc(100% - 90px), #000 99.5%, rgba(0, 0, 0, 0) 100%);
	mask-size: 100% calc(100% - 89px), 100% 100%;
	mask-position: top, 0 0;
	mask-repeat: no-repeat;
}
.chw-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1000ms ease;
}
.chw-hero__slide.is-active {
	opacity: 1;
}
.chw-hero__slides::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(55, 47, 44, 0.72), rgba(55, 47, 44, 0.55));
}
.chw-hero__dots {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	display: flex;
	gap: 12px;
}
/* 도트 위치(하단 중앙)는 사진이 아래로 볼록한 구간 — 흰 도트가 사진 위에서 보임. */
.chw-hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
}
.chw-hero__dot.is-active {
	background: #fff;
}
.chw-hero__inner {
	position: relative;
	z-index: 1;
	max-width: calc(var(--content-max, 1200px) + 2 * var(--gutter, 24px));
	margin: 0 auto;
	padding: 96px var(--gutter, 24px) 112px;
}
/* Display Hero 역할(디자인 시스템): 산세리프 600, 56/60, -0.28px. 세리프 디스플레이 폐기.
   행간은 스펙(60px) 기준 — 한글 2행이 촘촘하면 스크린샷 검증에서 재조정. */
.chw-hero__title {
	margin: 0;
	font-weight: 600;
	font-size: var(--fs-hero, 56px);
	line-height: 1.14;
	letter-spacing: var(--ls-hero, -0.28px);
	overflow-wrap: break-word;
}
.chw-hero__title span {
	display: block;
}
/* 레퍼런스: 2행 앞에 가로 대시(—) 장식 + 들여쓰기. padding 대신 ::before 라인으로 재현. */
.chw-hero__title span:last-child::before {
	content: '';
	display: inline-block;
	width: 90px;
	height: 1px;
	background: rgba(255, 255, 255, 0.75);
	margin-right: 20px;
	vertical-align: middle;
}
/* 레퍼런스: 표어는 박스 없이 텍스트만(보더/배경 제거). */
.chw-hero__motto {
	margin-top: 56px;
	display: inline-flex;
	flex-direction: column;
	gap: 6px;
	max-width: 100%;
}
.chw-hero__year {
	font-size: 12px;
	color: var(--accent, #c18590);
	font-weight: 600;
	letter-spacing: 0.05em;
}
.chw-hero__motto-title {
	display: flex;
	align-items: baseline;
	gap: 14px;
}
.chw-hero__motto-title strong {
	font-size: 22px;
	color: #fff;
	font-weight: 600;
}
.chw-hero__motto-title em {
	font-size: 12px;
	font-style: normal;
	color: #cdbdbf;
}
.chw-hero__verse {
	margin: 4px 0 0;
	font-size: 14px;
	color: #dcd2d3;
}

@media (max-width: 839px) {
	.chw-hero__slides {
		mask-image: linear-gradient(#000, #000),
			radial-gradient(75% 61px at 50% calc(100% - 60px), #000 99.5%, rgba(0, 0, 0, 0) 100%);
		mask-size: 100% calc(100% - 59px), 100% 100%;
	}
	.chw-hero__inner {
		padding: 72px var(--gutter, 24px) 80px;
	}
	.chw-hero__title {
		font-size: 40px;
	}
	.chw-hero__title span:last-child::before {
		width: 48px;
		margin-right: 14px;
	}
	.chw-hero__motto {
		margin-top: 40px;
	}
}

@media (max-width: 599px) {
	.chw-hero__slides {
		mask-image: linear-gradient(#000, #000),
			radial-gradient(75% 41px at 50% calc(100% - 40px), #000 99.5%, rgba(0, 0, 0, 0) 100%);
		mask-size: 100% calc(100% - 39px), 100% 100%;
	}
	.chw-hero__dots {
		bottom: 14px;
	}
	.chw-hero__inner {
		padding: 56px var(--gutter, 24px) 64px;
	}
	.chw-hero__title {
		font-size: 30px;
	}
	.chw-hero__title span:last-child::before {
		width: 28px;
		margin-right: 10px;
	}
	.chw-hero__motto {
		margin-top: 32px;
	}
	.chw-hero__motto-title {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.chw-hero__slide {
		transition-duration: 1ms;
	}
}