:root {
	--swiper-navigation-color: #fff;
	--swiper-pagination-color: #fff;
	--swiper-pagination-bullet-inactive-color: #fff;
}

.swiper-slide-content {
	position: absolute;
	left: 100px;
	bottom: calc(50% - 92px);
	max-width: calc(100% - 200px);
	z-index:100;
}

.swiper-slicer .swiper-slide,
.swiper-slicer swiper-slide {
  overflow: hidden;
}
.swiper-slicer-image, .swiper-slicer-image-clones, .swiper-slicer-image-clone {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.swiper-slicer-image {
  display: none;
  object-fit: cover;
  object-position: center;
  max-width: none;
}
.swiper-slicer-image-clone {
  overflow: hidden;
  transition-timing-function: cubic-bezier(1, 0, 0.5, 1);
}
.swiper-slicer-image-clone .swiper-slicer-image {
  display: block;
}

/* ============================================================================
   히어로 슬라이더 (.hhs) — js/swiperjs/swiper-main.js 의 happyHeroSliderInit() 용
   WebGL 미사용 시 Swiper 대신 쓰는 경량 슬라이더. 스킨 공용이므로 여기서는
   구조와 모션만 담당하고, 크기·비율·라운딩 등은 각 스킨 CSS 가 결정한다.
   (기존 .swiper-* 규칙과 클래스가 겹치지 않아 다른 스킨에 영향 없음)
   ============================================================================ */
.hhs {
	position: absolute; inset: 0; overflow: hidden;
	touch-action: pan-y;                       /* 세로 스크롤은 브라우저에, 가로 제스처는 JS 가 처리 */
	user-select: none; -webkit-user-select: none;
}
.hhs-track {
	display: flex; height: 100%; will-change: transform;
	transition: transform var(--hhs-ms, 400ms) cubic-bezier(.22, .61, .36, 1);
}
/* 드래그 중 / 위치 재설정 시엔 애니메이션 없이 손가락을 그대로 따라간다 */
.hhs.is-drag .hhs-track,
.hhs.is-noanim .hhs-track { transition: none !important; }
.hhs.is-drag { cursor: grabbing; }
.hhs-item { flex: 0 0 100%; width: 100%; height: 100%; position: relative; cursor: pointer; }
/* 이미지 자체가 드래그 고스트/포인터 타깃이 되지 않게 — 제스처는 트랙이 받는다 */
.hhs-item img { pointer-events: none; -webkit-user-drag: none; }
.hhs-thumb { position: absolute; inset: 0; }
.hhs-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 텍스트: 이미지가 절반쯤 들어온 시점에 out → 교체 → in.
   .hhs-txt 는 JS 가 대상 요소에 직접 붙이므로 스킨 클래스 이름에 의존하지 않는다. */
.hhs-txt { transition: opacity var(--hhs-txt-ms, 180ms) ease; }
.hhs-swap .hhs-txt { opacity: 0; }
/* 모션 최소화 선호 사용자: 전환 없이 즉시 교체 */
@media (prefers-reduced-motion: reduce) {
	.hhs-track, .hhs-txt { transition: none !important; }
}