/* ============================================================
   PipeCity 360° Viewer  v1.1  (메인 컬러 #df3224)
   v1.1: 오버레이 방향탭, 하단 어두운 띠, 드래그 힌트,
         자동회전 버튼 호버 아이콘 사라짐 수정
   ============================================================ */
.pc360-viewer {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border: none;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .10);
  -webkit-user-select: none;
  user-select: none;
}
/* JS 적용 전 원본 <img> 36장 숨김 */
.pc360-viewer:not(.pc360-ready) img { display: none; }

.pc360-stage {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: pan-y;          /* 세로 스크롤은 살리고 가로 드래그만 회전 */
}
.pc360-stage:active { cursor: grabbing; }
.pc360-img {
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
  display: block !important;
}

/* 상단 좌측 배지 */
.pc360-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 4;
  background: rgba(20, 20, 20, .78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: 20px;
  pointer-events: none;
}

/* 상단 우측 버튼 */
.pc360-controls {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 4;
  display: flex;
  gap: 6px;
}
.pc360-controls button {
  width: 38px; height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #333;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  transition: transform .15s, background .15s;
}
.pc360-controls button:hover {
  background: #fff;
  color: #333;                       /* 호버 시에도 아이콘 유지 */
  transform: scale(1.08);
}
.pc360-controls .pc360-on {
  background: #df3224;
  color: #fff;
}
.pc360-controls .pc360-on:hover {    /* 켜진 상태 호버: 흰 배경 금지(아이콘 사라짐 버그 수정) */
  background: #c4271b;
  color: #fff;
}

/* 좌우 화살표 */
.pc360-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 42px; height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: #222;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  transition: transform .15s;
}
.pc360-prev { left: 10px; }
.pc360-next { right: 10px; }
.pc360-arrow:hover { transform: translateY(-50%) scale(1.1); }

/* 하단 가독성용 어두운 띠 (탭 뒤) */
.pc360-shade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 84px;
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* 방향 탭 — 이미지 위 오버레이 알약 */
.pc360-tabs {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
  max-width: calc(100% - 24px);
}
.pc360-tab {
  border: none;
  border-radius: 999px;
  padding: 9px 20px;
  background: rgba(255, 255, 255, .85);   /* 실제 색은 JS가 회전 위치에 따라 갱신 */
  color: #555;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
@media (max-width: 420px) {
  .pc360-tab { padding: 8px 13px; font-size: 12px; }
}

/* 드래그 힌트 */
.pc360-hint {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  background: rgba(20, 20, 20, .65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 1;
  transition: opacity .6s;
}
.pc360-hint.pc360-hide { opacity: 0; }

/* 전체화면 (Fullscreen API 미지원 기기용 대체) */
.pc360-fs-fallback {
  position: fixed !important;
  inset: 0;
  z-index: 99999;
  max-width: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.pc360-fs-fallback .pc360-stage { flex: 1; aspect-ratio: auto; }

/* 브라우저 전체화면 상태 */
.pc360-viewer:fullscreen {
  max-width: none;
  display: flex;
  flex-direction: column;
}
.pc360-viewer:fullscreen .pc360-stage { flex: 1; aspect-ratio: auto; }