/* 상품 대표 사진 — 은빛이 스쳐 지나가는 효과 (신규)
 *
 * 사진 위로 빛 한 줄기가 사선으로 천천히 지나간다. 유리 진열장에 조명이 스치는 느낌이라
 * 같은 사진이라도 '잘 놓인 물건'처럼 보인다.
 *
 * 지키는 선
 *   · 사진을 가리지 않는다 — 아주 잠깐(0.9초) 지나가고 4초 가까이 쉰다. 계속 번쩍이면 피곤하다.
 *   · 누르는 것을 막지 않는다(pointer-events:none). 사진을 눌러 크게 보기는 그대로 열린다.
 *   · 캐러셀이 이미 ::before 로 발바닥 장식을 쓰고 있어 빛은 ::after 에 얹는다.
 *   · 움직임을 줄여 달라고 한 기기에서는 아예 켜지 않는다.
 */

.pdt-carousel{position:relative;overflow:hidden}

.pdt-carousel::after{
  content:"";
  position:absolute;
  top:-30%;
  left:0;
  width:55%;
  height:160%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(105deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,.10) 34%,
    rgba(255,255,255,.55) 47%,
    rgba(255,255,255,.82) 50%,
    rgba(255,255,255,.55) 53%,
    rgba(255,255,255,.10) 66%,
    rgba(255,255,255,0)  100%);
  transform:translateX(-160%) skewX(-14deg);
  animation:pdtShine 4.6s cubic-bezier(.32,.06,.28,1) 1.1s infinite;
}

@keyframes pdtShine{
  0%   { transform:translateX(-160%) skewX(-14deg); }
  20%  { transform:translateX(320%)  skewX(-14deg); }   /* 여기까지 0.9초 — 나머지는 쉰다 */
  100% { transform:translateX(320%)  skewX(-14deg); }
}

/* 크게 보기가 열려 있는 동안에는 멈춘다 — 확대한 사진 위로 빛이 지나갈 이유가 없다 */
body.iz-lock .pdt-carousel::after{animation-play-state:paused;opacity:0}

@media (prefers-reduced-motion:reduce){
  .pdt-carousel::after{display:none}
}