/* /inocomm/js/hero_fx/fade/effect.css — 페이드 전환
   [2026-07-20] 공개 렌더 전용(에디터 캔버스 미주입). 마커 <img> 는 그대로 두고 겹쳐 놓기만 한다. */

.ssb-hero-fx.ssb-fx-fade { position: absolute; inset: 0; overflow: hidden; }

.ssb-fx-fade > .ssb-fx-track { position: absolute; inset: 0; }

.ssb-fx-fade .ssb-fx-item {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--ssb-fx-dur, 1200ms) ease-in-out;
  will-change: opacity;
}
.ssb-fx-fade .ssb-fx-item.is-on { opacity: 1; }

.ssb-fx-fade .ssb-fx-item > img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* 이미지가 1장뿐이면 그냥 보이게 (전환할 게 없음) */
.ssb-fx-fade .ssb-fx-item:only-child { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ssb-fx-fade .ssb-fx-item { transition: none; }
}