/* ==========================================================================
   MODULE: components/speed (.wzs-speed)
   대각선 스트라이프 밴드. 텍스트가 있으면 좌→우 마퀴로 "빠르다"는 인상을 줌.
   ========================================================================== */

.wzs-speed {
	position: relative;
	overflow: hidden;
	padding: var(--wzs-space-3) 0;
	background: repeating-linear-gradient(
		135deg,
		var(--wzs-ink) 0px,
		var(--wzs-ink) 40px,
		var(--wzs-ink-soft) 40px,
		var(--wzs-ink-soft) 80px
	);
	color: var(--wzs-white);
}

.wzs-speed-track {
	display: flex;
	width: max-content;
	gap: var(--wzs-space-6);
	white-space: nowrap;
	animation: wzs-speed-scroll 24s linear infinite;
}

/* 디스플레이 서체는 한글 글리프가 없으므로, 이 스트라이프에는 영문/숫자 문구만 넣을 것.
   한글 문구를 넣어야 하면 font-family 줄을 지울 것 (base/typography.css 주석 참고) */
.wzs-speed-item {
	font-family: var(--wzs-font-display);
	font-weight: 700;
	font-size: var(--wzs-fs-lg);
	letter-spacing: 0.02em;
}

.wzs-speed-item::after {
	content: '·';
	margin-left: var(--wzs-space-6);
	color: var(--wzs-amber);
}

@keyframes wzs-speed-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.wzs-speed-track {
		animation: none;
	}
}