/*
  @author parkyk
  @since 2026-05-22
  @description 캐러셀 공통 스타일 (pcommon3-carousel.js와 함께 사용)

  높이 조정: style="--x-carousel-h: 24rem" 또는 외부 CSS에서 override
*/

.x-carousel {
	position: relative;
	user-select: none;
	--x-carousel-h: 18rem;
	min-height: var(--x-carousel-h);  /* JS 로 슬라이드 채워지기 전 높이 확보 (CLS 방지) */
	background-color: #f3f4f6;        /* 로드 전 회색 플레이스홀더 (flash 방지) */
}
.x-carousel .x-track {
	display: flex;
	transition: transform 0.5s ease;
	will-change: transform;
	touch-action: pan-y;
	cursor: grab;
}
.x-carousel .x-track:active { cursor: grabbing; }
.x-carousel .x-slide {
	flex: 0 0 100%;
	min-width: 0;
	display: block;
	position: relative;
	-webkit-user-drag: none;
}
.x-carousel .x-slide img {
	width: 100%;
	height: var(--x-carousel-h);
	object-fit: cover;
	display: block;
	pointer-events: none;
}
.x-carousel .x-caption {
	position: absolute; bottom: 0; left: 0; right: 0;
	padding: 0.75rem 1rem; color: #fff; line-height: 1.5;
	background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
.x-carousel .x-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 2.5rem; height: 2.5rem; border-radius: 50%;
	background: rgba(0,0,0,0.4); color: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; border: none; padding: 0;
	transition: background 0.2s;
}
.x-carousel .x-nav:hover { background: rgba(0,0,0,0.7); }
.x-carousel .x-nav:focus-visible { outline: 0.125rem solid #fff; outline-offset: 0.125rem; }
.x-carousel .x-prev { left: 0.5rem; }
.x-carousel .x-next { right: 0.5rem; }
.x-carousel .x-dots {
	position: absolute; bottom: 0.5rem; left: 0; right: 0;
	display: flex; justify-content: center; gap: 0.4rem;
}
.x-carousel .x-dot {
	width: 0.5rem; height: 0.5rem; border-radius: 50%;
	background: rgba(255,255,255,0.5); cursor: pointer; border: none; padding: 0;
	transition: background 0.2s;
}
.x-carousel .x-dot.active { background: #fff; }
.x-carousel:focus { outline: none; }
.x-carousel:focus-visible { outline: 0.125rem solid #2563eb; outline-offset: 0.125rem; }