/* ==========================================================================
   components.css — UI 컴포넌트 (백서 §6)
   - 버튼 (Primary / Secondary / Tertiary / Inverse)
   - 폼 필드
   - 카드
   - 가격 표시
   ========================================================================== */

/* ===== 버튼 — 공통 ===== */
.btn,
.cheecle-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--fs-button);
	font-weight: var(--fw-medium);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: none;
	transition: all var(--transition-fast);
	min-height: 48px;
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-md);
}

@media (min-width: 1024px) {
	.btn,
	.cheecle-btn {
		min-height: 52px;
	}
}

/* 데스크톱 호버 — translateY로 살짝 떠오름 */
@media (hover: hover) {
	.btn:hover,
	.cheecle-btn:hover {
		transform: translateY(-1px);
	}
}

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

/* ===== 버튼 — Primary (메인 CTA) ===== */
.btn-primary,
.cheecle-btn-primary {
	background-color: var(--cheecle-yellow);
	color: var(--ink-blue);
}

.btn-primary:hover,
.cheecle-btn-primary:hover {
	background-color: var(--yellow-hover);
	color: var(--ink-blue);
}

.btn-primary:active,
.cheecle-btn-primary:active {
	background-color: var(--yellow-active);
	transform: translateY(0);
}

/* ===== 버튼 — Secondary (보조 액션) ===== */
.btn-secondary,
.cheecle-btn-secondary {
	background-color: transparent;
	color: var(--ink-blue);
	border: 1.5px solid var(--ink-blue);
	min-height: 48px;
	padding: calc(var(--space-4) - 1.5px) calc(var(--space-6) - 1.5px);
}

.btn-secondary:hover,
.cheecle-btn-secondary:hover {
	background-color: var(--ink-blue);
	color: var(--text-inverse);
}

/* ===== 버튼 — Tertiary (텍스트 링크 형태) ===== */
.btn-tertiary,
.cheecle-btn-tertiary {
	background-color: transparent;
	color: var(--ink-blue);
	padding: var(--space-2) var(--space-3);
	min-height: 0;
}

.btn-tertiary:hover,
.cheecle-btn-tertiary:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
	transform: none;
}

/* ===== 버튼 — Inverse (어두운 배경 위) ===== */
.bg-dark .btn-primary,
.bg-dark .cheecle-btn-primary,
.btn-inverse {
	background-color: var(--cheecle-yellow);
	color: var(--ink-blue);
}

/* ===== 폼 필드 — 공통 ===== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
	width: 100%;
	min-height: 48px;
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--text-primary);
	background-color: var(--bg-primary);
	border: 1px solid var(--border-medium);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast),
	            box-shadow var(--transition-fast);
}

textarea {
	min-height: 120px;
	line-height: var(--lh-relaxed);
}

input::placeholder,
textarea::placeholder {
	color: var(--text-tertiary);
	opacity: 1;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--ink-blue);
	border-width: 1.5px;
	box-shadow: 0 0 0 3px rgba(26, 58, 82, 0.08);
}

input:disabled,
textarea:disabled,
select:disabled {
	background-color: var(--bg-secondary);
	color: var(--text-disabled);
	cursor: not-allowed;
}

/* ===== 폼 — 라벨 ===== */
label {
	display: block;
	margin-bottom: var(--space-2);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-medium);
	color: var(--text-primary);
}

label .required {
	color: var(--error);
	margin-left: var(--space-1);
}

/* 필드 그룹 */
.field-group {
	margin-bottom: var(--space-4);
}

@media (min-width: 1024px) {
	.field-group {
		margin-bottom: var(--space-5);
	}
}

/* ===== 카드 ===== */
.card,
.cheecle-card {
	background-color: var(--bg-primary);
	border: 0.5px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	transition: transform var(--transition-base),
	            box-shadow var(--transition-base);
}

@media (min-width: 1024px) {
	.card,
	.cheecle-card {
		padding: var(--space-5);
	}
}

@media (hover: hover) {
	.card:hover,
	.cheecle-card:hover {
		transform: translateY(-2px);
		box-shadow: var(--shadow-md);
	}
}

/* ===== 가격 표시 ===== */
.price {
	font-family: var(--font-numeric);
	font-weight: var(--fw-semibold);
	color: var(--ink-blue);
}

.price-original {
	font-size: var(--fs-caption);
	color: var(--text-tertiary);
	text-decoration: line-through;
	margin-right: var(--space-2);
}

.price-discount {
	font-size: 20px;
	color: var(--ink-blue);
}

.price-free {
	color: var(--success);
	font-weight: var(--fw-medium);
}

/* "FROM ₩9,900" 시작 가격 뱃지 */
.price-badge {
	display: inline-flex;
	align-items: center;
	background-color: var(--cheecle-yellow);
	color: var(--ink-blue);
	font-size: 11px;
	font-weight: var(--fw-medium);
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	letter-spacing: 0.05em;
}

/* ===== 알림 / 메시지 ===== */
.alert {
	padding: var(--space-4);
	border-radius: var(--radius-md);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-normal);
	margin-bottom: var(--space-4);
}

.alert-success {
	background-color: #EAF5E0;
	color: var(--success);
}

.alert-warning {
	background-color: #FAF0DD;
	color: var(--warning);
}

.alert-error {
	background-color: #F8E5E2;
	color: var(--error);
}

.alert-info {
	background-color: #E8F0F6;
	color: var(--info);
}

/* ===== Kadence 기본 클래스 오버라이드 ===== */

/* Kadence 버튼이 자식 테마 버튼 톤을 따르도록 */
.button.button-primary,
.kadence-button.button-primary,
.wp-block-kadence-advancedbtn .kb-button.kb-btn-style-fill {
	background-color: var(--cheecle-yellow);
	color: var(--ink-blue);
	border-color: var(--cheecle-yellow);
}

.button.button-primary:hover,
.kadence-button.button-primary:hover {
	background-color: var(--yellow-hover);
	color: var(--ink-blue);
	border-color: var(--yellow-hover);
}