/* ==========================================================================
   MODULE: 카드 상호작용 (.wzs-card)
   같은 모양 박스가 반복돼 단조롭던 구간에 손맛을 준다.
   동작: assets/js/modules/cards.js

   - 마우스를 올리면 떠오르고, 안의 아이콘 배지가 같이 반응한다.
   - 누르면 파란 테두리로 "선택됨"이 남는다.
   - 본문은 처음부터 전부 보여준다(줄 자르기·팝업 없음). 카드 높이가 달라도
     그리드가 행 단위로 늘어나 맞춰지므로 4분할 정렬은 유지된다.

   움직임 양을 조절하려면 아래 --wzs-card-lift 하나만 고치면 된다.
   ========================================================================== */
.wzs-card {
	--wzs-card-lift: -6px;

	position: relative;
	cursor: pointer;
	transition: transform var(--wzs-duration-base) var(--wzs-ease),
		box-shadow var(--wzs-duration-base) var(--wzs-ease),
		border-color var(--wzs-duration-base) var(--wzs-ease);
}

.wzs-card:hover {
	transform: translateY(var(--wzs-card-lift));
	box-shadow: var(--wzs-shadow-lg);
	border-color: var(--wzs-blue-soft);
}

/* 누르는 순간 살짝 내려앉아 클릭이 먹었다는 감각을 준다 */
.wzs-card:active {
	transform: translateY(-1px);
	box-shadow: var(--wzs-shadow-md);
	transition-duration: var(--wzs-duration-fast);
}

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

/* 눌린 카드 — 기능이 없어도 반응이 남도록 */
.wzs-card.is-selected {
	border-color: var(--wzs-blue);
	box-shadow: 0 0 0 3px var(--wzs-blue-soft);
}

.wzs-card.is-selected:hover {
	box-shadow: 0 0 0 3px var(--wzs-blue-soft), var(--wzs-shadow-lg);
}

/* --- 카드 안 요소들의 연동 반응 ---
   카드만 떠오르고 내용물은 가만히 있으면 "판때기가 움직인다" 느낌이라
   아이콘 배지와 화살표가 같이 반응하게 묶어 둔다. */
.wzs-card .wzs-icon-badge {
	transition: background var(--wzs-duration-base) var(--wzs-ease),
		color var(--wzs-duration-base) var(--wzs-ease),
		transform var(--wzs-duration-base) var(--wzs-ease);
}

.wzs-card:hover .wzs-icon-badge {
	background: var(--wzs-blue);
	color: var(--wzs-white);
	transform: scale(1.1) rotate(-4deg);
}

.wzs-card:hover .wzs-icon-badge--dark {
	background: var(--wzs-amber);
	color: var(--wzs-ink);
}

@media (prefers-reduced-motion: reduce) {
	.wzs-card,
	.wzs-card .wzs-icon-badge {
		transition: box-shadow var(--wzs-duration-fast) linear,
			border-color var(--wzs-duration-fast) linear;
	}

	.wzs-card:hover,
	.wzs-card:active,
	.wzs-card:hover .wzs-icon-badge {
		transform: none;
	}
}