/* Design Ref: §2 — BaliPick 공통 이미지 뷰어
   풀스크린 fixed 레이어 + 좌우 nav + dot indicator + 핀치 zoom 지원 stage.
   v1.4: 캐러셀 트랙 구조 (prev/curr/next 3장이 함께 이동). */

.bp-viewer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.bp-viewer[hidden] { display: none !important; }
.bp-viewer.is-open { opacity: 1; }

.bp-viewer__close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top, 0));
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.bp-viewer__close:hover { background: rgba(255, 255, 255, 0.28); }

.bp-viewer__counter {
  position: absolute;
  top: max(20px, env(safe-area-inset-top, 0));
  left: 16px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  z-index: 3;
  font-variant-numeric: tabular-nums;
}

.bp-viewer__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: opacity 0.15s, background 0.15s;
}
.bp-viewer__nav:hover { background: rgba(255, 255, 255, 0.26); }
.bp-viewer__nav--prev { left: 10px; }
.bp-viewer__nav--next { right: 10px; }
.bp-viewer__nav[disabled] { opacity: 0.25; cursor: default; }

@media (max-width: 480px) {
  .bp-viewer__nav { width: 38px; height: 38px; }
  .bp-viewer__nav--prev { left: 6px; }
  .bp-viewer__nav--next { right: 6px; }
}

.bp-viewer__stage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  position: relative;
}

/* 트랙: prev/curr/next 3장을 가로로 배치하고 translate3d 로 함께 이동 */
.bp-viewer__track {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 0.22s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.bp-viewer__track.is-dragging { transition: none; }

.bp-viewer__slide {
  position: absolute;
  top: 0; bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-viewer__slide--prev { left: -100%; }
.bp-viewer__slide--curr { left: 0; }
.bp-viewer__slide--next { left: 100%; }

.bp-viewer__img {
  max-width: 96vw;
  max-height: 88vh;
  object-fit: contain;
  display: block;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  /* pointer-events: none 제거 (Gap I-2). 우클릭/long-press 메뉴 = 브라우저 기본 동작 유지.
     touch swipe 는 부모 stage 가 bubble 받으므로 img 의 PE 영향 없음.
     long-press 시 iOS 의 share/save 메뉴를 명시 허용. */
  -webkit-touch-callout: default;
}
/* 현재 슬라이드의 이미지만 zoom/translateY 적용 대상 — transition 으로 부드럽게 */
.bp-viewer__img--curr {
  transition: transform 0.18s cubic-bezier(.25,.46,.45,.94);
}
.bp-viewer__img--curr.is-dragging { transition: none; }

.bp-viewer__spinner {
  position: absolute;
  top: 50%; left: 50%;
  margin: -16px 0 0 -16px;
  width: 32px; height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bp-spin 0.7s linear infinite;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.bp-viewer__spinner.is-loading { opacity: 1; }
@keyframes bp-spin { to { transform: rotate(360deg); } }

.bp-viewer__dots {
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom, 0));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
  max-width: 80vw;
  flex-wrap: wrap;
  justify-content: center;
}
.bp-viewer__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.15s;
}
.bp-viewer__dot:hover { background: rgba(255, 255, 255, 0.7); }
.bp-viewer__dot.is-active { background: #fff; transform: scale(1.25); }

body.bp-viewer-open { overflow: hidden; }