/* 우리떠기 — 스크롤 연출 (적당히 강도)
 *
 * 안전 규칙 세 가지. 이걸 어기면 손님 화면에서 내용이 통째로 안 보인다.
 *   1) 숨기는 규칙은 전부 html.wt-mo 안에만 쓴다. .wt-mo 는 JS 가 붙인다.
 *      → JS 가 막히거나 오류가 나면 아무것도 숨겨지지 않고 그냥 다 보인다.
 *   2) 동작 줄이기를 켠 분에게는 숨기지도, 움직이지도 않는다.
 *   3) 나타난 뒤에는 transform 을 없앤다. 남겨 두면 그 안의 고정 요소가 어긋난다.
 *
 * 스와이퍼(슬라이드) 안에는 절대 적용하지 않는다 — 슬라이드가 transform 으로 움직이므로
 * 겹치면 화면이 깨진다. 대상 고르기는 wt_motion.js 가 한다.
 */

/* U-1021-05: a decorative reading indicator, independent of slide transforms. */
.wt-scroll-progress{position:fixed;inset:0 0 auto;height:3px;background:#BC2F52;transform:scaleX(0);transform-origin:left center;pointer-events:none;z-index:10000}
.wt-play-card:focus-visible,.prdList > li:focus-within{outline:2px solid #BC2F52;outline-offset:3px}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .wt-play-card,.prdList > li:not(.swiper-slide),#tsl .tsl-card{transition:box-shadow .2s ease,border-color .2s ease}
  .wt-play-card:hover,.prdList > li:not(.swiper-slide):hover,#tsl .tsl-card:hover{box-shadow:0 8px 22px rgba(70,40,30,.12);border-color:#BC2F52}
}

html.wt-mo [data-wt-rv] {
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}

html.wt-mo [data-wt-rv].wt-in {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--wt-d, 0s);
  will-change: auto;
}

/* 상세 통이미지 조각은 위로 뜨지 않고 번지듯이만 (길어서 들썩이면 어지럽다) */
html.wt-mo .wt-detail img[data-wt-rv] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.wt-mo [data-wt-rv],
  html.wt-mo [data-wt-rv].wt-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}