/* ==========================================================================
   MODULE: components/door (.wzs-door)
   다른 섹션/페이지로 안내하는 진입 카드.
   ========================================================================== */

.wzs-door {
	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);
	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-door:hover {
	transform: translateY(-4px);
	box-shadow: var(--wzs-shadow-lg);
	border-color: transparent;
}

.wzs-door-title {
	font-size: var(--wzs-fs-xl);
	font-weight: 700;
}

.wzs-door-tagline {
	margin-top: calc(var(--wzs-space-3) * -1 + var(--wzs-space-1));
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
	color: var(--wzs-amber-ink);
}

.wzs-door-desc {
	color: var(--wzs-ink-soft);
	line-height: var(--wzs-lh-article);
}

/* 링크 어포던스는 링크 색(blue)으로 — 앰버는 CTA/진행상태 전용
   (variables.css 앰버 사용 규칙 참고) */
.wzs-door-arrow {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--wzs-space-1);
	font-weight: 700;
	color: var(--wzs-blue);
	transition: gap var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-door:hover .wzs-door-arrow {
	gap: var(--wzs-space-2);
}

/* --- 아이콘 배지: 사진/일러스트 없이도 카드가 텍스트 블록으로만 안 보이게 —
   요금 카드(.wzs-tier-icon)와 같은 톤으로, door/detail-card(밝은 배경)와
   unit-item(다크 섹션) 양쪽에서 공용으로 쓴다. */
.wzs-icon-badge {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wzs-radius-sm);
	background: var(--wzs-blue-soft);
	color: var(--wzs-blue);
	margin-bottom: var(--wzs-space-3);
}

.wzs-icon-badge svg {
	width: 22px;
	height: 22px;
}

.wzs-icon-badge--dark {
	background: rgba(255, 255, 255, 0.1);
	color: var(--wzs-amber);
}

/* .wzs-door는 flex column + gap 을 이미 쓰고 있어 배지 자체 margin-bottom 이 겹치면
   간격이 두 배가 된다 — flex gap에게 맡기고 배지 자체 여백은 0으로 */
.wzs-door .wzs-icon-badge {
	margin-bottom: 0;
}