/* ============================================================
   고민 섹션 — hldni #js-scroll (.trendplx) 모션 구조
   · skew(-48.6deg) 대각선 마스크
   · 좌↑(-56px) · 우↓(+50px) 어긋남
   · 마우스 위치 → GSAP 타임라인 progress (JS)
   ============================================================ */

.worry {
	/* 우측이 아래로 삐져나오는 만큼 세로 여유 */
	/* 제목과 사진이 한 화면에 같이 들어오게 위아래를 한 치수 줄였다 */
	padding: clamp(56px, 5vw, 96px) 0 clamp(32px, 3vw, 64px);
	overflow-x: hidden;
	overflow-y: visible;
}

.worry__stage {
	--blocwidth: 1920px;
	--triangle-x: 970px;
	--skew-deg: -48.6deg;
	--unskew-deg: 48.6deg;
	--side-gap: clamp(48px, 4vw, 80px); /* 좌 bottom · 우 top 어긋남 양 */
	position: relative;
	width: 100vw;
	max-width: 100%;
	margin-left: calc(50% - 50vw);
	/* 폭으로만 잡으면(50.52vw) 1600 에서 808 이 되어, 제목까지 합치면 900 짜리 화면에
	   한 번에 안 들어왔다. 화면 높이에서 머리글·제목·여백 몫(260)을 뺀 값과
	   견주어 **작은 쪽**을 쓴다. 너무 납작해지지 않게 360 을 바닥으로 둔다. */
	height: max(360px, min(clamp(420px, 50.52vw, 870px), calc(100vh - 250px)));
	margin-bottom: var(--side-gap);
	overflow: visible;
}

.worry__slider,
.worry__track {
	position: relative;
	height: 100%;
}

/* 제목 줄 — 사진 밖이다. 제목은 가운데, 눈금만 오른쪽 끝(시안 1820/1920). */
.worry__head {
	position: relative;
	width: 100%;
	margin: 0 auto clamp(20px, 1.9vw, 36px);
	padding: 0 var(--gutter);
}

.worry__title {
	margin: 0;
	padding: 0;
	font-size: clamp(24px, 2.5vw, 48px); /* 시안 48 */
	font-weight: 800;
	line-height: 1.6;
	text-align: center;
	color: #000;
	transition: opacity .22s ease;
}

/* ---------- 슬라이드 ---------- */
.worry__stage .worry-slide {
	position: absolute;
	inset: 0;
	display: block !important;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .55s ease, visibility .55s ease;
	animation: none;
	overflow: visible;
}

.worry__stage .worry-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.worry-split {
	position: absolute;
	inset: 0;
	/* 가로만 자르고, 세로 어긋남(좌↑·우↓)은 보이게 */
	overflow: visible;
}

/* ---------- hldni trendplx 레이어 ---------- */
.worry-side,
.worry-side__rvl,
.worry-side__rvlin,
.worry-side__skew,
.worry-side__transmask,
.worry-side__midmask,
.worry-side__midimg,
.worry-side__unskew,
.worry-side__transimg,
.worry-side__paraimg {
	position: absolute;
	inset: 0;
	margin: auto;
}

.worry-side {
	overflow: hidden;
	pointer-events: none;
}

.worry-side__rvl {
	overflow: hidden;
}

.worry-side__midmask {
	overflow: hidden;
}

.worry-side__paraimg {
	overflow: hidden;
}

/* 좌 — bottom 에서 띄움 / 우 — top 에서 띄우고 아래로 삐져나와 맞물림 */
.worry-side--left {
	z-index: 2;
	top: 0;
	bottom: var(--side-gap);
	height: auto;
	transform: translateX(clamp(-40px, -2.9vw, -56px));
}

.worry-side--right {
	z-index: 1;
	top: var(--side-gap);

	height: auto;
	transform: translateX(clamp(28px, 2.6vw, 50px));
}

/* skew 대각선 — hldni: left -100% + inset right 0 → 200% 폭 */
.worry-side--left .worry-side__skew {
	left: -100%;
	transform: skew(var(--skew-deg));
	transform-origin: 0 0;
}

.worry-side--right .worry-side__skew {
	transform: skew(var(--skew-deg)) translateX(clamp(-40px, -2.9vw, -56px));
	transform-origin: 0 100%;
}

.worry-side--left .worry-side__unskew {
	transform: skew(var(--unskew-deg));
	transform-origin: 0 0;
}

.worry-side--right .worry-side__unskew {
	transform: skew(var(--unskew-deg));
	transform-origin: 0 100%;
}

.worry-side--left .worry-side__midmask {
	transform: translateX(calc(var(--blocwidth) * -.5 + var(--triangle-x) * .5 + 56px));
}

.worry-side--left .worry-side__midimg {
	left: 50%;
	transform: translateX(calc(var(--blocwidth) * .5 + var(--triangle-x) * -.5));
}

.worry-side--right .worry-side__midmask {
	transform: translateX(calc(var(--blocwidth) * .5 + var(--triangle-x) * -.5));
}

.worry-side--right .worry-side__midimg {
	right: 0;
	transform: translateX(calc(var(--blocwidth) * -.5 + var(--triangle-x) * .5));
}

.worry-side__unskew,
.worry-side__transimg,
.worry-side__paraimg {
	min-height: 100%;
}

/* JS가 translateX를 추가하는 레이어 */
.worry-side [data-worry-layer] {
	will-change: transform;
}

/* ---------- 이미지 ---------- */
.worry-side__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

.worry-side__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* 글씨가 읽히도록 사진 위에 검은 막을 덮는다.
   시안(Vector 173 · 179)은 검정 100% → 50% 가로 그라데이션에 전체 불투명도 .85 이고,
   글씨가 놓이는 바깥쪽이 진하다 — 왼쪽 사진은 왼쪽이, 오른쪽 사진은 오른쪽이 진하다. */
.worry-side__shade--left {
	background: linear-gradient(90deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .42) 100%);
}

.worry-side__shade--right {
	background: linear-gradient(270deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .42) 100%);
}

/* 오른쪽 사진만 아주 살짝 흐리다(시안 blur 2.5) — 글씨가 더 또렷해진다 */
.worry-side--right .worry-side__img {
	filter: blur(2.5px);
}

/* ---------- 패널 텍스트 (Figma) ---------- */
.worry__stage .worry-panel {
	position: absolute;
	z-index: 3;
	flex: none;
	display: block;
	width: auto;
	max-width:max-content;
	padding: 0;
	background: none;
	text-align: left;
	/* 가장자리에서 최대 93px, 화면이 줄면 같은 비율로 좁혀진다 */
	left: clamp(20px, 4.844vw, 93px); /* 93 / 1920 */
	pointer-events: none;
	will-change: transform;
}

/* 왼쪽은 사진 왼쪽 위, 오른쪽은 사진 오른쪽 아래.
   좌우 사진이 서로 어긋나게 밀려 있고(.worry-side--left/--right 의 translateX)
   그 안에 글 판이 들어 있으므로, 밀린 만큼 되돌려야 가장자리 여백이 값대로 나온다. */
.worry__stage .worry-panel--bad {
	top: 14.25%;  /* 110 / 772 */
	right: auto;
	/* .worry-side--left 가 밀린 만큼 그대로 되돌린다(식이 바뀌어도 따라가도록 부호만 뒤집는다) */
	margin-left: calc(-1 * clamp(-40px, -2.9vw, -56px));
	color: #fff;
	text-align: left;
}

/* 오른쪽은 아래에서 띄운다 — 글줄 수가 달라져도 아래 간격이 그대로다 */
.worry__stage .worry-panel--good {
	top: auto;
	bottom:16%; /* 39 / 772 */
	left: auto;
	right: clamp(20px, 4.844vw, 93px); /* 93 / 1920 */
	margin-right: clamp(28px, 2.6vw, 50px); /* .worry-side--right 가 밀린 만큼 */
	color: #fff;
	text-align: right;
}

/* 아이콘은 제목 위에 한 줄로 선다(시안 90×90) */
.worry__stage .worry-panel__head {
	display: block;
	margin: 0 0 clamp(6px, 0.78vw, 15px);
}

.worry__stage .worry-panel__head img {
	display: block;
	width: clamp(32px, 4.69vw, 90px); /* 시안 90 */
	height: auto;
}

.worry__stage .worry-panel--good .worry-panel__head img {
	margin-left: auto;
}

.worry__stage .worry-panel__title {
	display: block;
	font-size: clamp(22px, 2.19vw, 42px);
	font-weight: 800;
	line-height: 1.6;
	background-image: linear-gradient(to right, #fe9e33, #fe0082);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.worry__stage .worry-panel--good .worry-panel__title {
	background-image: linear-gradient(to right, #5a5df5, #8fc1fa);
}

.worry__stage .worry-panel__list {
	margin: clamp(10px, 1.03vw, 20px) 0 0 30px;
	padding: 0;
	list-style: disc;
}

/* 오른쪽은 줄 끝을 오른쪽에 맞춘다. 글머리표를 안쪽으로 넣어야 글자와 같이 딸려 간다. */
.worry__stage .worry-panel--good .worry-panel__list {
	margin-left: 0;
	list-style-position: inside;
}

.worry__stage .worry-panel__list li {
	font-size: clamp(14px, 1.04vw, 20px);
	font-weight: 700;
	line-height: 1.6;
	color: #fff;
}

.worry__stage .worry-panel__list li::before {
	display: none;
}

/* ---------- dots ---------- */
.worry__head .worry__dots {
	position: absolute;
	top: 150%;
	right: var(--gutter);
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 17px;
	margin: 0;
}

.worry__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(36, 44, 50, .25);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease, width .2s ease, height .2s ease;
}

.worry__dot:hover {
	transform: scale(1.12);
}

.worry__dot.is-active {
	background: #574cc4;
	position: relative;
}
.worry__dot.is-active::before {
	content: '';
	display: block;
	width:28px;
	aspect-ratio: 1;
	border:1px solid #574CC4;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
}
/* ---------- 가운데 손잡이 ---------- */
/* 좌우 사진의 경계에 놓인다. 제자리 잡는 translate 까지 JS 가 통째로 다시 쓰므로
   (transform 은 하나뿐이다) 여기서는 기본값만 둔다. */
.worry__hub {
	position: absolute;
	z-index: 6;
	left: 50%;
	top: 50%;
	width: clamp(10px, 20vw, 406px); /* 시안 80 */
	aspect-ratio: 1;

	transform: translate(-50%, -50%);
	pointer-events: none;
	will-change: transform;
}

.worry__hub img {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------- Swiper (슬라이드 전환) ---------- */
/* 사진이 아래로 삐져나오는 구조라 컨테이너를 자르면 안 된다. 페이드라 옆 슬라이드는
   어차피 투명하므로 넘쳐도 보이지 않는다. */
.worry__slider.swiper-container {
	overflow: visible;
}

.worry__slider.swiper-container .worry__track {
	display: flex;
	height: 100%;
}

/* 겹쳐 두고 직접 페이드하던 것을 Swiper 에 넘긴다.
   어느 장을 보여줄지는 Swiper 가 정하므로 좁은 화면에서도 슬라이드를 숨기면 안 된다 —
   display:none 인 슬라이드는 Swiper 가 크기 계산에서 건너뛰어 끌어 넘기기가 죽는다. */
.worry__stage .worry__slider.swiper-container .worry-slide {
	display: block !important;
	position: relative;
	inset: auto;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	visibility: visible;
	transition: none;
}

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
	.worry__stage {
		--side-gap: 0px;
		width: auto;
		margin-left: 0;
		margin-bottom: 0;
		height: auto;
		padding: 0 var(--gutter, 24px);
	}

	/* 좌우로 갈라지는 구도가 아니라 위아래로 쌓이므로 손잡이는 뺀다 */
	.worry__hub {
		display: none;
	}

	/* 좁은 화면에서는 눈금을 제목 오른쪽이 아니라 아래 가운데로 내린다 */
	.worry__head .worry__dots {
		position: static;
		transform: none;
		justify-content: center;
		margin-top: 16px;
	}

	.worry__slider,
	.worry__track {
		height: auto;
	}
 
	.worry__stage .worry-slide {
		position: relative;
		inset: auto;
		display: none !important;
		opacity: 1;
		visibility: visible;
		overflow: hidden;
	}

	.worry__stage .worry-slide.is-active {
		display: block !important;
	}

	.worry-split {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 16px;
		height: auto;
		overflow: visible;
	}

	.worry-side {
		position: relative;
		inset: auto;
		width: 100%;
		min-height: clamp(240px, 23.44vw, 320px);
		height: clamp(240px, 23.44vw, 320px);
		transform: none !important;
		top: auto !important;
		bottom: auto !important;
		border-radius: 24px;
		overflow: hidden;
	}

	/* 중첩 absolute 레이어가 부모 높이를 채우도록 — 모바일 이미지 노출 */
	.worry-side__rvl,
	.worry-side__rvlin,
	.worry-side__skew,
	.worry-side__transmask,
	.worry-side__midmask,
	.worry-side__midimg,
	.worry-side__unskew,
	.worry-side__transimg,
	.worry-side__paraimg {
		position: absolute !important;
		inset: 0 !important;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		transform: none !important;
	}

	.worry-side [data-worry-layer] {
		transform: none !important;
	}

	.worry-side__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.worry__stage .worry-panel {
		position: absolute;
		inset: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0 !important;
		max-width: none;
		padding: 36px 28px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		transform: none !important;
	}

	/* 어두운 막은 글 판이 아니라 사진(.worry-side) 을 기준으로 덮는다.
	   글 판은 글자 폭만큼만 차지해서, 거기에 막을 깔면 글씨 뒤만 어두워진다. */
	.worry__stage .worry-panel::before {
		display: none;
	}

	.worry__stage .worry-panel__head,
	.worry__stage .worry-panel__list {
		position: relative;
		z-index: 1;
	}
	.worry-panel__head {display: flex; gap: 0.3em; align-items: center;}

	/* 폭이 좁으면 좌우 배치가 무너지므로 둘 다 왼쪽에 맞춘다 */
	.worry__stage .worry-panel--bad,
	.worry__stage .worry-panel--good {
		top: 0;
		bottom: 0;
		left: 0 !important;
		right: auto;
		text-align: left;
		margin:0px;
	}

	.worry__stage .worry-panel--good .worry-panel__list {
		margin-left: 30px;
		list-style-position: outside;
	}

	.worry__stage .worry-panel--good .worry-panel__head img {
		margin-left: 0;
	}

	/* 사진 한 장을 통째로 덮는다 — 글씨가 아래쪽에 놓이므로 아래로 갈수록 짙어진다 */
	.worry-side__shade--left,
	.worry-side__shade--right {
		background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, .38) 0%,
			rgba(0, 0, 0, .52) 40%,
			rgba(0, 0, 0, .74) 72%,
			rgba(0, 0, 0, .88) 100%
		);
	}

	.worry-side--right .worry-side__img {
		filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.worry-slide {
		transition: none;
	}

	.worry-side [data-worry-layer] {
		transform: none !important;
	}
}

/* ============================================================
   넘어갈 때 — 좌우 글판이 「떠오른다」
   ------------------------------------------------------------
   블라인드도 스치는 빛도 너무 셌다(사용자 지적). 효과는 이것 하나만 둔다.
   글판 자체(.worry-panel)의 자리는 마우스 모션이 계속 만지고 있어서
   건드리면 서로 부딪힌다. 그래서 **글판 안의 것들**만 떠오르게 한다.
   ============================================================ */
.worry-slide.is-active .worry-panel > * {
	animation: worryRise .62s cubic-bezier(.2, .8, .25, 1) both;
}
/* 왼쪽 먼저, 오른쪽은 조금 늦게. 안에서도 제목 → 목록 차례로 */
.worry-slide.is-active .worry-panel--bad  > *:nth-child(1) { animation-delay: .10s; }
.worry-slide.is-active .worry-panel--bad  > *:nth-child(2) { animation-delay: .19s; }
.worry-slide.is-active .worry-panel--good > *:nth-child(1) { animation-delay: .22s; }
.worry-slide.is-active .worry-panel--good > *:nth-child(2) { animation-delay: .31s; }

@keyframes worryRise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.worry-slide.is-active .worry-panel > * { animation: none; }
}

/* ---------- 한 화면 안에 넣기 ----------
   제목을 20px 남짓 내리고, 아래에 남던 여백을 그림 쪽으로 돌린다. */
@media (min-width: 1025px) {
	.worry__head  { margin-top: 24px; margin-bottom: 20px; }
	.worry__stage { margin-bottom: 4px; }
}

/* ---------- 손잡이 화살표 — 제목이 바뀔 때 한 번만 그린다 ----------
   유리원(worry-hub-disc.png)과 보라 화살표(worry-hub-line.png)를 갈라 두었다.
   쉬지 않고 돌면 눈이 어지러워, 슬라이드가 바뀔 때마다 **딱 한 번** 왼쪽에서
   오른쪽으로 그려 넣고 그대로 멈춘다(worry-scroll.js 의 drawArrow).
   기본값은 「다 그려진 상태」라 스크립트가 못 돌아도 화살표는 그대로 보인다. */
.worry__hub-disc,
.worry__hub-line {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.worry__hub.is-draw .worry__hub-line {
	animation: worryHubDraw 1.25s cubic-bezier(.22, .8, .24, 1) both;
}
@keyframes worryHubDraw {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
	.worry__hub.is-draw .worry__hub-line { animation: none; }
}


/* ---------- 눈금(dots) — 두 배로 키우고, 지금 자리는 숨쉬게 ----------
   10 → 20px, 활성 테두리 28 → 56px. 사이 간격도 그만큼 벌린다.
   지금 자리에서는 알이 한 번씩 부풀고, 테두리 밖으로 물결이 퍼져 나간다. */
.worry__head .worry__dots { gap: 36px; }

.worry__dot {
	width: 20px;
	height: 20px;
}

.worry__dot.is-active::before {
	width: 56px;
}

/* 물결 — 알에서 퍼져 나가며 사라진다 */
.worry__dot.is-active::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	aspect-ratio: 1;
	border: 1px solid #574cc4;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1);
	opacity: .7;
	pointer-events: none;
	animation: worryDotPing 1.9s cubic-bezier(.16, .84, .44, 1) infinite;
}
@keyframes worryDotPing {
	0%   { transform: translate(-50%, -50%) scale(1);   opacity: .7; }
	70%  { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
	100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
}

/* 알 — 커졌다 작아졌다 */
.worry__dot.is-active {
	animation: worryDotBeat 1.9s ease-in-out infinite;
}
@keyframes worryDotBeat {
	0%, 100% { transform: scale(1);    opacity: 1; }
	50%      { transform: scale(1.28); opacity: .72; }
}

@media (prefers-reduced-motion: reduce) {
	.worry__dot.is-active,
	.worry__dot.is-active::after { animation: none; }
	.worry__dot.is-active::after { display: none; }
}