/* ==========================================================================
   MODULE: components/review-card (.wzs-review)
   이용후기 카드. 마크업: template-parts/components/review-card.php
   홈(가로 캐러셀, pages/reviews.css)과 자료실(격자, pages/resources.css)이 함께 쓴다.

   카드의 떠오름·그림자·포커스 링은 components/card.css 가 공통으로 처리한다
   (.wzs-review 에 .wzs-card 가 같이 붙어 있음). 여기서 겹쳐 쓰지 말 것 —
   겹치면 어느 쪽이 이길지가 파일 로드 순서에 달린다.
   ========================================================================== */

.wzs-review {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-3);
	padding: var(--wzs-space-5);
	background: var(--wzs-white);
	border: 1px solid var(--wzs-border);
	border-radius: var(--wzs-radius-lg);
}

/* 별은 이미지가 아니라 글자(★)라 자간이 좁게 붙는다 — 조금 벌려야 개수가 세어진다.
   색은 앰버 계열이되 본문보다 먼저 읽히지 않도록 크기는 작게 둔다. */
.wzs-review-stars {
	color: var(--wzs-amber);
	font-size: var(--wzs-fs-base);
	letter-spacing: 0.12em;
	line-height: 1;
}

/* blockquote 기본 여백·들여쓰기를 지운다. 따옴표 장식은 넣지 않는다 —
   카드가 이미 인용이라는 걸 말하고 있고, 큰 따옴표가 붙으면 글자가 밀린다. */
.wzs-review-body {
	margin: 0;
	padding: 0;
	border: 0;
	flex: 1;
	min-height: 0;
}

.wzs-review-body p {
	margin: 0;
	font-size: var(--wzs-fs-base);
	line-height: var(--wzs-lh-article);
	color: var(--wzs-ink-soft);
	word-break: keep-all;
}

/* --- 누가 썼는가 ---
   이름과 업종을 두 줄로 나눈다. 한 줄에 붙이면 "임○○ 자영업 · 베트남 인형뽑기 사업"이
   한 덩어리로 읽혀 이름이 안 보인다. 위에 가는 선을 둬 본문과 갈라 준다. */
.wzs-review-who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: var(--wzs-space-3);
	border-top: 1px solid var(--wzs-border);
}

.wzs-review-name {
	font-weight: 700;
	color: var(--wzs-ink);
}

.wzs-review-meta {
	font-size: var(--wzs-fs-sm);
	color: var(--wzs-ink-muted);
	word-break: keep-all;
}

/* --- 자세히 보기 ---
   홈에서 글이 잘린 카드에만 붙는다(자료실은 전문이라 안 붙는다).
   화살표 사이 간격이 벌어지는 것만으로 반응을 준다 — 카드 자체가 이미 떠오르므로
   여기서 색까지 바꾸면 반응이 두 개가 되어 산만하다. */
.wzs-review-more {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--wzs-space-1);
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
	color: var(--wzs-blue);
	text-decoration: none;
	transition: gap var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-review-more:hover {
	gap: var(--wzs-space-2);
}

.wzs-review-more:focus-visible {
	outline: 2px solid var(--wzs-blue);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.wzs-review-more {
		transition: none;
	}
}

/* --- 눌러서 크게 볼 수 있는 카드 (자료실) ---
   카드 전체가 버튼이라 커서를 손가락으로 바꾼다. 떠오름·그림자는 components/card.css 가
   이미 주므로 여기서는 커서와 "크게 보기" 표시만 맡는다. */
.wzs-review--openable {
	cursor: pointer;
}

/* 평소엔 흐리게 두고 카드에 마우스를 올리거나 초점이 오면 또렷해진다.
   상시로 진하면 카드마다 링크가 하나씩 붙은 것처럼 보여 후기 자체보다 먼저 읽힌다. */
.wzs-review-zoom {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--wzs-space-1);
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
	color: var(--wzs-ink-muted);
	opacity: 0.7;
	transition: color var(--wzs-duration-fast) var(--wzs-ease),
		opacity var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-review--openable:hover .wzs-review-zoom,
.wzs-review--openable:focus-visible .wzs-review-zoom {
	color: var(--wzs-blue);
	opacity: 1;
}

/* 손가락에는 호버가 없다 — 좁은 화면에서는 처음부터 또렷하게 둔다. */
@media (hover: none) {
	.wzs-review-zoom {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wzs-review-zoom {
		transition: none;
	}
}