/* ==========================================================================
   MODULE: pages/reviews — 홈 이용후기 섹션 (요금표 다음)
   마크업: template-parts/hero/reviews.php
   카드 자체는 components/review-card.css, 화살표 동작은 assets/js/modules/carousel.js.

   카드를 격자가 아니라 "가로로 넘기는 줄"로 두는 이유: 후기는 개수가 늘어난다.
   격자면 홈 한 화면이 후기로만 채워지는데, 가로 줄은 카드가 몇 개든 섹션 높이가
   그대로다. 넘기는 것 자체는 CSS(overflow-x + scroll-snap)가 하고 JS 는 화살표만 맡는다.
   ========================================================================== */

.wzs-reviews-sec {
	padding: var(--wzs-space-7) var(--wzs-space-4);
	background: var(--wzs-bg);
}

.wzs-reviews-inner {
	max-width: var(--wzs-container);
	margin: 0 auto;
	text-align: center;
}

.wzs-reviews-carousel {
	margin-top: var(--wzs-space-6);
}

/* 카드 줄.
   scroll-padding 을 주는 이유: snap 으로 멈출 때 카드가 화면 왼쪽 끝에 딱 붙으면
   답답해 보인다. 한 칸 띄우고 멈추게 한다.
   padding-bottom 은 카드가 hover 로 떠오를 때 그림자가 잘리지 않게 두는 자리다
   (overflow:hidden 인 축이라 여백이 없으면 아래쪽 그림자가 싹둑 잘린다). */
.wzs-reviews-track {
	display: flex;
	gap: var(--wzs-space-4);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-left: var(--wzs-space-1);
	padding-bottom: var(--wzs-space-3);
	text-align: left;
	/* 스크롤바는 숨긴다 — 화살표와 삐져나온 카드가 이미 "더 있다"를 말한다 */
	scrollbar-width: none;
}

.wzs-reviews-track::-webkit-scrollbar {
	display: none;
}

/* 카드 폭을 고정하는 이유: flex 기본값(auto)이면 글이 긴 카드가 더 넓어져서
   줄이 들쭉날쭉해진다. min-width:0 이 없으면 flex 아이템의 자동 최소 크기 때문에
   폭이 내용에 밀려 커진다 — 이 프로젝트에서 같은 함정을 이미 겪었다.
   align-items 를 stretch 로 두어(기본값) 카드 높이는 가장 긴 카드에 맞춰진다. */
.wzs-reviews-track > .wzs-review {
	flex: 0 0 320px;
	min-width: 0;
	scroll-snap-align: start;
}

/* --- 화살표 --- */
.wzs-reviews-nav {
	margin-top: var(--wzs-space-4);
	display: flex;
	justify-content: center;
	gap: var(--wzs-space-2);
}

/* 넘길 데가 없으면(카드가 다 보이면) 화살표를 감춘다 — carousel.js 가 붙인다.
   눌러도 아무 일 없는 버튼이 남아 있으면 고장처럼 보인다. */
.wzs-reviews-carousel.is-static .wzs-reviews-nav {
	display: none;
}

.wzs-reviews-arrow {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wzs-border);
	border-radius: 999px;
	background: var(--wzs-white);
	color: var(--wzs-ink);
	font-size: var(--wzs-fs-lg);
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--wzs-duration-fast) var(--wzs-ease),
		color var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-reviews-arrow:hover:not(:disabled) {
	border-color: var(--wzs-ink);
}

.wzs-reviews-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.wzs-reviews-arrow:focus-visible {
	outline: 2px solid var(--wzs-blue);
	outline-offset: 3px;
}

/* --- 전체 보기 --- */
.wzs-reviews-all {
	margin-top: var(--wzs-space-5);
	display: inline-flex;
	align-items: center;
	gap: var(--wzs-space-1);
	font-weight: 700;
	color: var(--wzs-blue);
	text-decoration: none;
	transition: gap var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-reviews-all:hover {
	gap: var(--wzs-space-2);
}

.wzs-reviews-all:focus-visible {
	outline: 2px solid var(--wzs-blue);
	outline-offset: 3px;
}

/* 좁은 화면에서는 카드를 화면 폭에 맞춰 줄이되, 다음 장이 살짝 보이게 남긴다 —
   그 삐져나온 조각이 "옆으로 넘긴다"를 말해 준다. */
@media (max-width: 720px) {
	.wzs-reviews-track > .wzs-review {
		flex: 0 0 min(300px, 82%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wzs-reviews-arrow,
	.wzs-reviews-all {
		transition: none;
	}
}