@charset "UTF-8";

/* ============================================================
   여러 페이지가 같이 쓰는 블록 (templates/fragment/blocks.html)
   - 제품 상세 머리
   - 문의 배너
   ============================================================ */

/* ---------- 문의 배너 ----------
   흰 섹션 안의 큰 둥근 회색 배너. 레드는 강조 글자와 버튼에만. */

.cta {
	padding: clamp(48px, 6vw, 96px) 0 clamp(96px, 10vw, 160px);
	background: var(--c-white);
}

.cta-inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
	padding: clamp(56px, 7vw, 104px) clamp(32px, 6vw, 96px);
	background: var(--c-fill);
	border-radius: var(--r-lg);
}

.cta-title {
	max-width: 13em;
	font-size: clamp(1.875rem, 4vw, 4.125rem);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.cta-btn {
	flex-shrink: 0;
	height: 64px;
	padding: 0 36px;
	font-size: 1.125rem;
}

/* ---------- 반응형 ---------- */

@media (max-width: 768px) {
	.cta-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
	}

	.cta-btn {
		height: 64px;
		padding: 0 32px;
		font-size: 1.0625rem;
	}
}