/* ==========================================================================
   COMPONENT: cbm-calculator
   wazuso/cbm-calculator 블록 — 매거진/자료실 본문 어디서나 삽입 가능
   ========================================================================== */

.wzs-cbm-calc {
	padding: var(--wzs-space-5);
	background: var(--wzs-bg-alt);
	border: 1px solid var(--wzs-border);
	border-radius: var(--wzs-radius-lg);
}

.wzs-cbm-calc h4 {
	font-size: var(--wzs-fs-lg);
	font-weight: 700;
	margin-bottom: var(--wzs-space-3);
}

.wzs-cbm-calc-fields {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wzs-space-3);
}

.wzs-cbm-calc-fields .wzs-field {
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-1);
	min-width: 0;
	font-size: var(--wzs-fs-sm);
	font-weight: 600;
	color: var(--wzs-ink-soft);
}

.wzs-cbm-calc-fields .wzs-field input[type="number"] {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--wzs-border);
	border-radius: var(--wzs-radius-sm);
	background: var(--wzs-white);
	font-size: var(--wzs-fs-base);
	font-weight: 400;
	color: var(--wzs-ink);
	transition: border-color var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-cbm-calc-fields .wzs-field input[type="number"]:focus {
	outline: none;
	border-color: var(--wzs-blue);
}

.wzs-cbm-calc-result {
	margin-top: var(--wzs-space-4);
	display: flex;
	align-items: baseline;
	gap: var(--wzs-space-2);
	padding: var(--wzs-space-3) var(--wzs-space-4);
	background: var(--wzs-white);
	border-radius: var(--wzs-radius-md);
}

.wzs-cbm-calc-result span:first-child {
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
	color: var(--wzs-ink-soft);
}

.wzs-cbm-calc-result strong {
	font-size: var(--wzs-fs-xl);
	font-weight: 700;
	color: var(--wzs-ink);
}

.wzs-cbm-calc-result span:last-child {
	font-size: var(--wzs-fs-sm);
	color: var(--wzs-ink-muted);
}

@media (max-width: 640px) {
	.wzs-cbm-calc-fields {
		grid-template-columns: repeat(2, 1fr);
	}
}