/* ==========================================================================
   MODULE: components/cta (.wzs-cta-row + .wzs-cta-group + .wzs-btn + .wzs-btn-outline + .wzs-cta-mascot)
   .wzs-cta-mascot: 기존 마스코트 캐릭터 자리 — 라인아이콘 슬롯으로 대체 (클래스명은 마크업 재사용을 위해 유지)
   ========================================================================== */

/* 버튼 묶음. 위 여백을 기본으로 갖는 이유: 앞 문단과 버튼이 20px 남짓으로 붙어
   "글에 딸린 줄"처럼 보인다는 지적이 반복됐다. 여백은 여기 한 곳에서만 잡고,
   호출부에서 인라인 style 로 다시 주지 말 것(값이 갈라진다).
   부모가 flex(gap)면 gap 과 더해지므로, 그런 곳은 아래에서 따로 0 으로 되돌린다. */
.wzs-cta-row {
	margin-top: var(--wzs-space-6);
	display: flex;
	align-items: center;
	gap: var(--wzs-space-4);
	flex-wrap: wrap;
}

/* 정렬 변형 — template-parts/components/cta-pair.php 의 align 인자와 짝 */
.wzs-cta-row--center {
	justify-content: center;
}

.wzs-cta-row--start {
	justify-content: flex-start;
}

.wzs-cta-group {
	display: flex;
	gap: var(--wzs-space-2);
	flex-wrap: wrap;
}

/* .wzs-btn/.wzs-btn-outline은 <a>로도 쓰이는데, 이게 .wzs-article(글 본문) 조상 안에
   있으면 typography.css의 .wzs-article a { color: blue; text-decoration: underline } 쪽이
   명시도상 더 강해(class+element) 파란 밑줄이 새어 들어온다 — a 태그로 한정해 명시도를
   맞추고 확실히 끈다. 색은 버튼 종류별로 원래 있어야 할 색을 다시 명시한다
   (기본 어두운 배경 버튼은 흰 글씨, 앰버 버튼은 히어로와 동일하게 검정 계열 글씨). */
a.wzs-btn,
a.wzs-btn-outline {
	text-decoration: none;
}

a.wzs-btn {
	color: var(--wzs-white);
}

a.wzs-btn-outline {
	color: var(--wzs-ink);
}

a.wzs-btn--amber {
	color: var(--wzs-ink);
}

.wzs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wzs-space-1);
	padding: 14px 28px;
	border-radius: var(--wzs-radius-sm);
	background: var(--wzs-ink);
	color: var(--wzs-white);
	font-weight: 700;
	font-size: var(--wzs-fs-base);
	transition: transform var(--wzs-duration-fast) var(--wzs-ease),
		background var(--wzs-duration-fast) var(--wzs-ease),
		box-shadow var(--wzs-duration-fast) var(--wzs-ease);
}

/* --- 버튼 반응 ---
   마우스를 올리면 살짝 떠오르면서 커지고, 누르면 눌린 만큼 작아진다.
   translateY 만 있을 때는 움직임이 거의 안 보인다는 지적이 있어 scale 을 더했다.
   scale 값은 1.04 이상 올리면 글자 렌더링이 흐려 보이므로 이 선에서 멈출 것.

   주의: 여기서 transform 을 쓰기 때문에, transform 으로 위치를 잡는 버튼
   (예: components/report-teaser.css 의 가운데 정렬 버튼)은 그쪽에서
   transform:none 으로 되돌려 두었다. 정렬에 transform 을 새로 쓰지 말 것. */
.wzs-btn:hover {
	background: var(--wzs-ink-soft);
	transform: translateY(-2px) scale(1.04);
	box-shadow: var(--wzs-shadow-md);
}

.wzs-btn:active {
	transform: translateY(0) scale(0.98);
	box-shadow: var(--wzs-shadow-sm);
}

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

.wzs-btn--amber {
	background: var(--wzs-amber);
	color: var(--wzs-ink);
}

/* 앰버 버튼은 그림자도 앰버 계열이라야 떠오른 느낌이 산다 */
.wzs-btn--amber:hover {
	background: #c47c17;
	box-shadow: 0 12px 28px rgba(217, 140, 31, 0.38);
}

.wzs-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wzs-space-1);
	padding: 13px 27px;
	border-radius: var(--wzs-radius-sm);
	border: 1px solid var(--wzs-ink);
	color: var(--wzs-ink);
	font-weight: 700;
	font-size: var(--wzs-fs-base);
	transition: border-color var(--wzs-duration-fast) var(--wzs-ease),
		background var(--wzs-duration-fast) var(--wzs-ease),
		transform var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-btn-outline:hover {
	background: var(--wzs-bg-alt);
	transform: translateY(-2px) scale(1.03);
}

.wzs-btn-outline:active {
	transform: translateY(0) scale(0.98);
}

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

/* 어두운 배경 섹션 위에서는 아웃라인 버튼이 흰색 계열이어야 한다.
   목록에서 .wzs-home-contact 가 빠져 있어, 홈 맨 아래 문의 섹션의 "서비스 알아보기"가
   검은 글씨·검은 테두리로 나와 야간 사진 위에서 거의 보이지 않았다.
   다크 배경 섹션을 새로 만들면 이 목록에 반드시 추가할 것. */
.wzs-sec .wzs-btn-outline,
.wzs-hero-hook .wzs-btn-outline,
.wzs-home-contact .wzs-btn-outline,
.wzs-sell .wzs-btn-outline,
.wzs-checklist .wzs-btn-outline,
.wzs-article-cta .wzs-btn-outline,
.wzs-onsite .wzs-btn-outline,
.wzs-intl-contact .wzs-btn-outline {
	border-color: var(--wzs-white);
	color: var(--wzs-white);
}
.wzs-sec .wzs-btn-outline:hover,
.wzs-hero-hook .wzs-btn-outline:hover,
.wzs-home-contact .wzs-btn-outline:hover,
.wzs-sell .wzs-btn-outline:hover,
.wzs-checklist .wzs-btn-outline:hover,
.wzs-article-cta .wzs-btn-outline:hover,
.wzs-onsite .wzs-btn-outline:hover,
.wzs-intl-contact .wzs-btn-outline:hover {
	background: rgba(255, 255, 255, 0.12);
}

.wzs-cta-mascot {
	flex: none;
	width: 28px;
	height: 28px;
	color: var(--wzs-amber);
}

/* 모션을 줄이도록 설정한 사용자에게는 크기 변화를 빼고 색만 바뀌게 한다 */
@media (prefers-reduced-motion: reduce) {
	.wzs-btn,
	.wzs-btn-outline {
		transition: background var(--wzs-duration-fast) linear;
	}

	.wzs-btn:hover,
	.wzs-btn:active,
	.wzs-btn-outline:hover,
	.wzs-btn-outline:active {
		transform: none;
	}
}