/* 전체 컨테이너 */
.spin360-B {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

/* 360 뷰 영역 (이미지 비율에 맞춤) */
.spin360-B__stage{
  position: relative;
  width: 100%;
  aspect-ratio: 1234 / 823; /* ✅ 이미지 비율 */
  background: #f6f6f6;
  border-radius: 0px;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y; /* iOS 스크롤 충돌 방지 */
  cursor: grab;
}

.spin360-B__stage:active {
  cursor: grabbing;
}

/* 이미지 */
.spin360-B__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;

  /* 드래그/선택 완전 차단 (iOS 포함) */
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* 안내 힌트 */
/* 안내 힌트: 내용만큼만 보이게 + 가운데 고정 */
.spin360-B__hint{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: inline-flex;     /* ✅ 내용만큼만 */
  align-items: center;
  justify-content: center;
  width: max-content;       /* ✅ 100% 먹는 경우 방지 */
  max-width: calc(100% - 24px); /* 양쪽 여백 확보 */
  padding: 8px 14px;        /* ✅ 바(배경) 높이 줄이기 */
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  color: #333;
  background: rgba(255,255,255,.90);
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  pointer-events: none;
}

/* 모바일에서만 더 작게 */
@media (max-width: 480px){
  .spin360-B__hint{
    bottom: 10px;
    padding: 6px 10px;  /* ✅ 하얀 바 더 얇게 */
    font-size: 12px;
  }
}
/* 로딩 바 완전 제거 */
.spin360-B__bar{
  display: none;
}

/* 모바일 라운드 조정 */
@media (max-width: 130px){
  .spin360-B__stage{
    border-radius: 0px;
  }
}