/* 메인 히어로 슬라이더 및 모션 */
.wonk-hero {
	position: relative;
	isolation: isolate;
}

/* 좌측 카피 + 우측 일러스트 2열 (Tailwind arbitrary grid에 의존하지 않음) */
.wonk-hero__layout {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: 2.5rem;
}
@media (min-width: 1024px) {
	.wonk-hero__layout {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		align-items: center;
		gap: 2rem;
	}
	.wonk-hero__copy {
		min-width: 0;
	}
	.wonk-hero__visual {
		justify-self: end;
		width: min(100%, 540px);
	}
}

/* 배경 슬라이드 */
.wonk-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.wonk-hero__bg-base {
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, #fffdf8 0%, #f6fbf7 55%, #fff9ee 100%);
}
.wonk-hero__bg-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.12);
	transition: opacity 1.4s ease, transform 9s ease-out;
	will-change: opacity, transform;
}
.wonk-hero__bg-slide.is-active {
	opacity: 1;
	transform: scale(1);
}
.wonk-hero__bg-slide--art {
	background-image:
		radial-gradient(60% 55% at 78% 30%, #d9f5e4 0%, rgba(217, 245, 228, 0) 70%),
		radial-gradient(55% 50% at 18% 70%, #fff3bd 0%, rgba(255, 243, 189, 0) 72%),
		linear-gradient(120deg, #fffdf8 0%, #f2fbf6 55%, #fff7e6 100%);
}
/* 수채화 일러스트 톤에 맞춘 소프트 파스텔 배경 */
.wonk-hero__bg-slide--soft {
	background-size: cover;
	background-position: center;
	filter: none;
}
.wonk-hero__bg-slide--soft.is-active {
	opacity: 1;
	transform: scale(1.02);
}
.wonk-hero__bg-slide--soft1 {
	background-image:
		radial-gradient(58% 52% at 82% 28%, rgba(168, 214, 176, .55) 0%, rgba(168, 214, 176, 0) 70%),
		radial-gradient(48% 46% at 14% 72%, rgba(255, 228, 170, .5) 0%, rgba(255, 228, 170, 0) 72%),
		linear-gradient(125deg, #fffdf8 0%, #eef8f1 48%, #fff6e4 100%);
}
.wonk-hero__bg-slide--soft2 {
	background-image:
		radial-gradient(56% 50% at 78% 34%, rgba(186, 220, 232, .5) 0%, rgba(186, 220, 232, 0) 70%),
		radial-gradient(50% 48% at 16% 68%, rgba(255, 214, 198, .48) 0%, rgba(255, 214, 198, 0) 72%),
		linear-gradient(125deg, #fffcf7 0%, #f3f7f4 50%, #fff0e8 100%);
}
.wonk-hero__bg-slide--soft3 {
	background-image:
		radial-gradient(54% 50% at 80% 30%, rgba(196, 214, 168, .48) 0%, rgba(196, 214, 168, 0) 70%),
		radial-gradient(46% 44% at 18% 74%, rgba(255, 236, 186, .52) 0%, rgba(255, 236, 186, 0) 72%),
		linear-gradient(125deg, #fffcf6 0%, #f0f7f2 46%, #fff8e8 100%);
}
/* 기존 배너 이미지는 문구가 새겨져 있어 흐림 처리해 분위기 레이어로만 사용 */
.wonk-hero__bg-slide--photo {
	filter: blur(6px) saturate(1.06);
}
.wonk-hero__bg-slide--photo.is-active {
	opacity: .62;
	/* 흐림 처리로 생기는 가장자리 비침을 막기 위해 1보다 크게 유지 */
	transform: scale(1.05);
}

/* 가독성 확보용 베일 */
.wonk-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			100deg,
			rgba(255, 253, 248, .97) 0%,
			rgba(255, 253, 248, .93) 34%,
			rgba(255, 253, 248, .62) 58%,
			rgba(255, 253, 248, .32) 100%
		);
}
@media (max-width: 1023px) {
	.wonk-hero__veil {
		background: linear-gradient(
			180deg,
			rgba(255, 253, 248, .95) 0%,
			rgba(255, 253, 248, .88) 45%,
			rgba(255, 253, 248, .82) 100%
		);
	}
}

/* 은은한 배경 블롭 */
.wonk-hero__blob {
	position: absolute;
	border-radius: 9999px;
	filter: blur(64px);
	animation: wonkBlob 14s ease-in-out infinite;
}
.wonk-hero__blob--2 { animation-duration: 18s; animation-delay: -4s; }
.wonk-hero__blob--3 { animation-duration: 21s; animation-delay: -8s; }
@keyframes wonkBlob {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(18px, -22px, 0) scale(1.08); }
}

/* 우측 비주얼 컬럼: 800×696 비율 고정 + 장식 프레임 여유 */
.wonk-hero__visual {
	--wonk-art-ratio: 800 / 696;
	position: relative;
	width: min(100%, 540px);
	aspect-ratio: var(--wonk-art-ratio);
	height: auto;
	max-height: none;
	margin-inline: auto;
	flex-shrink: 0;
	padding: 14px;
	box-sizing: border-box;
	overflow: visible;
}

/* 뒤로 살짝 기운 소프트 패널 */
.wonk-hero__visual::before {
	content: "";
	position: absolute;
	inset: 10px 6px 2px 18px;
	z-index: 0;
	border-radius: 2.4rem 3.4rem 2rem 3rem;
	background:
		linear-gradient(148deg, #c9ebda 0%, #e7f6ef 42%, #ffe8b5 100%);
	transform: rotate(-2.8deg);
	box-shadow: 0 18px 40px rgba(61, 90, 73, .1);
	pointer-events: none;
}

/* 앞쪽 포인트 링(모서리 accent) */
.wonk-hero__visual::after {
	content: "";
	position: absolute;
	inset: 6px 14px 14px 6px;
	z-index: 0;
	border-radius: 3rem 2.2rem 3.2rem 2rem;
	border: 1.5px dashed rgba(52, 168, 113, .28);
	transform: rotate(1.6deg);
	pointer-events: none;
}

/* 우측 비주얼 스테이지 */
.wonk-hero__stage {
	position: relative;
	overflow: hidden;
	border-radius: 48% 52% 45% 55% / 45% 43% 57% 55%;
	box-shadow:
		inset 0 0 70px rgba(255, 255, 255, .55),
		0 24px 55px rgba(61, 90, 73, .14);
	animation: wonkMorph 16s ease-in-out infinite;
}

/* 메인 아트 프레임: 비대칭 스쿼클 + 이중 보더 */
.wonk-hero__stage--art {
	position: absolute !important;
	inset: 14px;
	z-index: 1;
	width: auto !important;
	height: auto !important;
	max-height: none !important;
	overflow: hidden !important;
	border-radius: 1.7rem 2.6rem 1.5rem 2.3rem;
	background:
		radial-gradient(90% 70% at 18% 12%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 55%),
		radial-gradient(70% 60% at 88% 82%, rgba(255, 241, 196, .55) 0%, rgba(255, 241, 196, 0) 60%),
		linear-gradient(165deg, #effaf3 0%, #f7fcf8 48%, #fff6df 100%);
	border: 1px solid rgba(255, 255, 255, .92);
	box-shadow:
		0 0 0 1px rgba(52, 168, 113, .08),
		0 0 0 6px rgba(255, 255, 255, .55),
		0 0 0 7px rgba(52, 168, 113, .12),
		0 22px 48px rgba(61, 90, 73, .14),
		inset 0 1px 0 rgba(255, 255, 255, .85);
	animation: none !important;
}

/* 프레임 안쪽 상단 하이라이트 라인 */
.wonk-hero__stage--art::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 14%;
	right: 22%;
	height: 2px;
	z-index: 4;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
	pointer-events: none;
}

/* 우측 하단 코너 악센트 */
.wonk-hero__stage--art::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 42px;
	height: 42px;
	z-index: 4;
	border-right: 2.5px solid rgba(52, 168, 113, .35);
	border-bottom: 2.5px solid rgba(52, 168, 113, .35);
	border-radius: 0 0 14px 0;
	pointer-events: none;
}

@keyframes wonkMorph {
	0%, 100% { border-radius: 48% 52% 45% 55% / 45% 43% 57% 55%; }
	33%      { border-radius: 56% 44% 58% 42% / 52% 56% 44% 48%; }
	66%      { border-radius: 42% 58% 48% 52% / 58% 46% 54% 42%; }
}
.wonk-hero__slide {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateX(18px) scale(.985);
	transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
	will-change: opacity, transform;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.wonk-hero__slide.is-active {
	opacity: 1;
	transform: none;
	z-index: 2;
	pointer-events: auto;
}
.wonk-hero__slide--img1 {
	background-image: url("/images/wonkmain_01.png");
}
.wonk-hero__slide--img2 {
	background-image: url("/images/wonkmain_02.png");
}
.wonk-hero__slide--img3 {
	background-image: url("/images/wonkmain_03.png");
}
.wonk-hero__slide img {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	max-width: 0 !important;
	max-height: 0 !important;
	position: absolute !important;
	overflow: hidden !important;
}
/* 블롭 형태로 잘려나가지 않도록 안쪽 여백 확보 */
.wonk-hero__slide svg {
	display: block;
	width: 100%;
	height: 100%;
	padding: 7%;
	box-sizing: border-box;
}
/* 캡션: 프레임 하단 플로팅 칩 */
.wonk-hero__slide-caption {
	position: absolute;
	left: 50%;
	bottom: 14px;
	z-index: 5;
	transform: translateX(-50%);
	max-width: 78%;
	padding: 8px 16px;
	border-radius: 9999px;
	background: rgba(32, 72, 52, .88);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: -.01em;
	text-align: center;
	word-break: keep-all;
	backdrop-filter: blur(8px);
	box-shadow: 0 8px 20px rgba(24, 51, 38, .18);
	border: 1px solid rgba(255, 255, 255, .18);
}
.wonk-hero__stage--art .wonk-hero__slide-caption {
	bottom: 16px;
	background: rgba(32, 72, 52, .88);
}

/* 히어로 배경 장식 레이어 */
.wonk-hero__decor {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

/* 신뢰 지표 */
.wonk-hero__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 26px;
	row-gap: 12px;
	margin-top: 30px;
}
.wonk-hero__stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wonk-hero__stat-label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
	color: #8a9a91;
}
.wonk-hero__stat-value {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #20583f;
}
.wonk-hero__stat-line {
	width: 1px;
	height: 34px;
	background: #d6ece0;
}

/* 히어로 브랜드·카피 */
.wonk-hero__brand {
	margin: 0 0 1.35rem;
	line-height: 1.15;
}
.wonk-hero__brand-mark {
	display: inline;
	position: relative;
	font-size: clamp(2.15rem, 4.2vw, 3.35rem);
	font-weight: 800;
	letter-spacing: -.035em;
	color: #263c32;
	word-break: keep-all;
	background-image: linear-gradient(180deg, transparent 62%, rgba(255, 226, 138, .55) 62%, rgba(255, 226, 138, .55) 92%, transparent 92%);
}
.wonk-hero__promise {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 32rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.wonk-hero__promise li {
	position: relative;
	padding-left: 1.05rem;
	font-size: clamp(0.98rem, 1.35vw, 1.125rem);
	font-weight: 500;
	line-height: 1.72;
	color: #4a5f55;
	word-break: keep-all;
}
.wonk-hero__promise li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(135deg, #57b888, #3d9a6d);
	box-shadow: 0 0 0 3px rgba(87, 184, 136, .18);
}
.wonk-hero__closing {
	margin: 1.35rem 0 0;
	max-width: 32rem;
	font-size: clamp(0.98rem, 1.3vw, 1.1rem);
	font-weight: 500;
	line-height: 1.75;
	color: #617067;
	word-break: keep-all;
}
.wonk-hero__closing strong {
	display: inline;
	color: #20583f;
	font-weight: 800;
}
@media (max-width: 640px) {
	.wonk-hero__stat-line { display: none; }
	.wonk-hero__stats { column-gap: 20px; }
}

/* 슬라이드 인디케이터 */
.wonk-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 2px;
	z-index: 12;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, .94);
	border: 1px solid #dff0e6;
	box-shadow: 0 6px 18px rgba(61, 90, 73, .12);
}
.wonk-hero__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: #c9ded2;
	cursor: pointer;
	transition: width .35s ease, background-color .35s ease;
}
.wonk-hero__dot.is-active {
	width: 28px;
	background: #26895c;
}

/* 등장 애니메이션 */
@keyframes wonkFadeUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}
.wonk-reveal {
	opacity: 0;
	animation: wonkFadeUp .9s cubic-bezier(.22, 1, .36, 1) forwards;
}
.wonk-reveal[data-delay="1"] { animation-delay: .1s; }
.wonk-reveal[data-delay="2"] { animation-delay: .2s; }
.wonk-reveal[data-delay="3"] { animation-delay: .32s; }
.wonk-reveal[data-delay="4"] { animation-delay: .44s; }
.wonk-reveal[data-delay="5"] { animation-delay: .56s; }

/* 강조 밑줄 드로잉 */
@keyframes wonkUnderline {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}
.wonk-underline {
	transform-origin: left center;
	animation: wonkUnderline .9s .55s cubic-bezier(.22, 1, .36, 1) both;
}

/* 떠 있는 배지 */
@keyframes wonkFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-11px); }
}
.wonk-float { animation: wonkFloat 5.5s ease-in-out infinite; }
.wonk-float--slow { animation-duration: 7.5s; animation-delay: -2s; }

@media (prefers-reduced-motion: reduce) {
	.wonk-hero__bg-slide,
	.wonk-hero__slide {
		transition-duration: .01ms;
		transform: none;
	}
	.wonk-hero__blob,
	.wonk-hero__stage,
	.wonk-float,
	.wonk-underline,
	.wonk-reveal {
		animation: none;
	}
	.wonk-reveal { opacity: 1; }
}