/* 상품 사진 크게 보기 — assets/js/imgzoom.js 와 한 짝 */

/* 캐러셀 위 돋보기 표시 — '눌러서 키울 수 있다'를 알리는 작은 알약.
   사진을 가리지 않게 오른쪽 아래 구석에 두고, 반투명 검정 위에 흰 아이콘을 얹는다. */
.pdt-carousel{position:relative}
.iz-hint{position:absolute;right:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:rgba(28,22,26,.42);backdrop-filter:blur(2px);pointer-events:none}
.iz-hint .fi{font-size:15px;color:#fff;line-height:1}

/* 열려 있는 동안 뒤 화면이 따라 움직이지 않게 */
body.iz-lock{overflow:hidden;touch-action:none}

.iz-ov{position:fixed;inset:0;z-index:9999;display:none;background:rgba(16,12,14,.94);
  opacity:0;transition:opacity .18s ease}
.iz-ov.on{display:block;opacity:1}

.iz-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
.iz-img{max-width:100%;max-height:100%;display:block;
  transform-origin:center center;transition:transform .16s ease;will-change:transform;
  -webkit-user-drag:none;user-select:none}
/* 손가락으로 넓히는 동안에는 따라 움직이는 느낌이 있어야 해서 전환을 끈다 */
.iz-ov.iz-zoomed .iz-img{transition:none;cursor:grab}

.iz-x{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:12px;z-index:2;
  width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  font-size:17px;line-height:1;cursor:pointer}
.iz-x:active{background:rgba(255,255,255,.24)}

.iz-cap{position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:2;
  text-align:center;font-size:13px;font-weight:700;color:rgba(255,255,255,.82);letter-spacing:.02em}

.iz-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
  font-size:24px;line-height:1;cursor:pointer}
.iz-nav:active{background:rgba(255,255,255,.22)}
.iz-prev{left:10px}
.iz-next{right:10px}
/* 사진이 한 장뿐이면 좌우 버튼도 장수 표시도 뜻이 없다 */
.iz-ov.iz-single .iz-nav,.iz-ov.iz-single .iz-cap{display:none}
/* 넓혀 놓은 상태에서는 좌우 버튼을 감춘다 — 그때의 끌기는 사진 이동이라 헷갈린다 */
.iz-ov.iz-zoomed .iz-nav{opacity:0;pointer-events:none}

@media (min-width:760px){
  .iz-img{max-width:min(92vw,1100px);max-height:92vh}
}
@media (prefers-reduced-motion:reduce){
  .iz-ov,.iz-img{transition:none}
}