/*
 * 저절로 넘어가는 카로셀(x-ui.auto-carousel · public/js/auto-carousel.js) — 슬라이드 아래 네비게이션 바(이전 · 슬라이드 탭 · 다음).
 * 지금 탭의 줄이 넘김 간격(--auto-carousel-interval, JS 가 data-interval 로 넣는다)동안 차고, 멈추면(.is-paused) 줄도 멈춘다. 색은 토큰만.
 */
.auto-carousel { display: grid; gap: var(--wa-space-m); min-inline-size: 0; }
.auto-carousel-stage { --aspect-ratio: auto; --slide-gap: var(--wa-space-l); display: block; min-inline-size: 0; }
.auto-carousel-stage::part(base) { display: block; }
.auto-carousel-stage::part(scroll-container) { aspect-ratio: auto; block-size: auto; grid-auto-rows: auto; align-items: stretch; border-radius: 0; }
.auto-carousel-stage > wa-carousel-item { max-block-size: none; aspect-ratio: auto; }

.auto-carousel-bar {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wa-space-s);
	padding: var(--wa-space-2xs);
	border: 1px solid var(--sonub-border);
	border-radius: var(--wa-border-radius-pill);
	background: var(--sonub-surface);
}
.auto-carousel-arrow {
	display: inline-grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 0;
	border-radius: var(--wa-border-radius-pill);
	background: transparent;
	color: var(--sonub-accent-ink);
	cursor: pointer;
}
.auto-carousel-arrow:hover { background: var(--wa-color-brand-fill-quiet); }
.auto-carousel-tabs { display: flex; justify-content: center; gap: var(--wa-space-2xs); min-inline-size: 0; margin: 0; padding: 0; list-style: none; }
.auto-carousel-tabs > li { flex: 1 1 auto; min-inline-size: 0; }
.auto-carousel-tab {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wa-space-xs);
	inline-size: 100%;
	min-block-size: 2.75rem;
	padding: var(--wa-space-2xs) var(--wa-space-s);
	overflow: hidden;
	border: 0;
	border-radius: var(--wa-border-radius-pill);
	background: transparent;
	color: var(--wa-color-text-quiet);
	font: inherit;
	font-weight: var(--wa-font-weight-semibold);
	cursor: pointer;
}
.auto-carousel-tab:hover { color: var(--wa-color-text-normal); background: var(--wa-color-neutral-fill-quiet); }
.auto-carousel-tab.is-current { color: var(--wa-color-brand-on-quiet); background: var(--wa-color-brand-fill-quiet); }
.auto-carousel-tab-n {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-neutral-fill-quiet);
	font-size: var(--wa-font-size-xs);
}
.auto-carousel-tab.is-current .auto-carousel-tab-n { background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); }
.auto-carousel-tab-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 다음 넘김까지 차는 줄 — 지금 탭 아래 가장자리 */
.auto-carousel-progress { position: absolute; inset-inline: var(--wa-space-m); inset-block-end: 3px; block-size: 3px; border-radius: var(--wa-border-radius-pill); pointer-events: none; }
.auto-carousel-tab.is-current .auto-carousel-progress { background: color-mix(in oklab, var(--wa-color-brand-fill-loud) 20%, transparent); }
.auto-carousel-progress::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--wa-color-brand-fill-loud);
	transform: scaleX(0);
	transform-origin: left;
}
[dir='rtl'] .auto-carousel-progress::after { transform-origin: right; }
.auto-carousel.is-ready .auto-carousel-tab.is-current .auto-carousel-progress::after { animation: auto-carousel-fill var(--auto-carousel-interval, 8s) linear forwards; }
.auto-carousel.is-paused .auto-carousel-tab.is-current .auto-carousel-progress::after { animation-play-state: paused; }
@keyframes auto-carousel-fill { to { transform: scaleX(1); } }

/* 좁은 화면 — 탭은 번호·아이콘만 */
@media (max-width: 40rem) {
	.auto-carousel-tab-label { display: none; }
}
/* 움직임 줄이기 — 저절로 넘기지 않으므로 차는 줄도 없다 */
@media (prefers-reduced-motion: reduce) {
	.auto-carousel-progress { display: none; }
}