/* ===== 360 화면 / 아이콘 / 뒤로가기 버튼 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Segoe UI", "Malgun Gothic", "맑은 고딕", sans-serif;
}

/* 360 화면을 꽉 채우기 */
#panorama {
  width: 100vw;
  height: 100vh;
}

/* ----- 이동 아이콘 (quest_icon.png) ----- */
/* Pannellum이 아이콘 위치를 transform으로 잡기 때문에,
   움직이는 효과는 안쪽 ::before 에 넣어야 위치가 안 틀어집니다 */
.pnlm-hotspot-base.hs-quest {
  width: 80px;           /* 아이콘 크기 */
  height: 80px;
  cursor: pointer;
  background: none;
}

.pnlm-hotspot-base.hs-quest::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/icons/quest_icon.png") center / contain no-repeat;
  animation: hs-bounce 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 230, 120, 0.9));
}

.pnlm-hotspot-base.hs-quest:hover::before {
  animation-play-state: paused;
  transform: scale(1.15);
}

@keyframes hs-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ----- 손에 쥔 칼 (iron_sword_equip.png) ----- */
/* 크기는 화면 너비(vw) 기준 → 어떤 화면에서도 손 크기에 맞음 */
.pnlm-hotspot-base.hs-sword {
  width: 7.7vw;
  height: 11.6vw;
  cursor: pointer;
  background: none;
}

/* 칼 본체 + 보라색 네온 빛 (은은하게 깜빡) */
.pnlm-hotspot-base.hs-sword::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/icons/iron_sword_equip.png") center / contain no-repeat;
  animation: sword-glow 2s ease-in-out infinite;
}

/* 칼 끝에서 반짝이는 별빛 */
.pnlm-hotspot-base.hs-sword::after {
  content: "";
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  left: 69%;
  top: 7%;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(#fff, #fff) center / 100% 7% no-repeat,
    linear-gradient(#fff, #fff) center / 7% 100% no-repeat,
    radial-gradient(circle, #fff 0 12%, rgba(200, 160, 255, 0.8) 28%, transparent 62%);
  animation: sword-sparkle 2s ease-in-out infinite;
  pointer-events: none;
}

.pnlm-hotspot-base.hs-sword:hover::before {
  filter: brightness(1.3) drop-shadow(0 0 6px #e0ccff) drop-shadow(0 0 16px #9a6bff);
}

@keyframes sword-glow {
  0%, 100% { filter: drop-shadow(0 0 2px #b48cff); }
  50%      { filter: drop-shadow(0 0 6px #d4bbff) drop-shadow(0 0 14px #8a5cff); }
}

@keyframes sword-sparkle {
  0%, 30%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0deg);  opacity: 0; }
  50%           { transform: translate(-50%, -50%) scale(1) rotate(45deg); opacity: 1; }
  70%           { transform: translate(-50%, -50%) scale(0) rotate(90deg); opacity: 0; }
}

/* ----- 자물쇠 (silver_lock.png) ----- */
.pnlm-hotspot-base.hs-lock {
  width: 6.5vw;
  height: 9.2vw;
  cursor: pointer;
  background: none;
}

/* 은빛으로 빛나다가 가끔 덜컥덜컥 흔들림 (잠겨 있다는 느낌) */
.pnlm-hotspot-base.hs-lock::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/icons/silver_lock.png") center / contain no-repeat;
  transform-origin: 50% 10%;
  animation: lock-rattle 3s ease-in-out infinite, lock-glow 3s ease-in-out infinite;
}

.pnlm-hotspot-base.hs-lock:hover::before {
  animation-play-state: paused;
  filter: brightness(1.25) drop-shadow(0 0 10px #fff) drop-shadow(0 0 18px #9fd3ff);
}

@keyframes lock-rattle {
  0%, 70%, 100% { transform: rotate(0deg); }
  74% { transform: rotate(-8deg); }
  78% { transform: rotate(7deg); }
  82% { transform: rotate(-5deg); }
  86% { transform: rotate(3deg); }
  90% { transform: rotate(0deg); }
}

@keyframes lock-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6)); }
  50%      { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 16px #9fd3ff); }
}

/* =====================================================
   컬러룸 아이콘 (허브) — .hs-art 에 그림, .hs-badge 는 방문 체크
   ===================================================== */
.pnlm-hotspot-base.hs-roller,
.pnlm-hotspot-base.hs-gun,
.pnlm-hotspot-base.hs-jetski {
  width: 92px;
  height: 92px;
  cursor: pointer;
  background: none;
}

.hs-roller .hs-art,
.hs-gun .hs-art,
.hs-jetski .hs-art {
  position: absolute;
  inset: 0;
  background: center / contain no-repeat;
  transition: transform 0.2s;
}

/* 마우스를 올리면 살짝 커짐 */
.hs-roller:hover .hs-art,
.hs-gun:hover .hs-art,
.hs-jetski:hover .hs-art {
  transform: scale(1.15);
}

/* 방문 체크 배지 (방을 다녀오면 오른쪽 위에 붙음) */
.hs-badge {
  position: absolute;
  right: -14px;
  top: -14px;
  width: 38px;
  height: auto;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
}

.visited .hs-badge {
  opacity: 1;
  transform: scale(1);
  animation: badge-pop 0.5s ease-out;
}

@keyframes badge-pop {
  0%   { transform: scale(0) rotate(-90deg); }
  70%  { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ----- 초록방: 롤러코스터 (언덕을 넘듯 오르락내리락) ----- */
.hs-roller .hs-art {
  background-image: url("../images/icons/roller_icon.png");
  background-color: #fff;
  background-size: 84%;
  border-radius: 14px;
  box-shadow: 0 0 0 3px #2bff9a, 0 0 14px #2bff9a;
  animation: coaster 2.4s ease-in-out infinite;
}

@keyframes coaster {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-4px, -9px) rotate(-7deg); }    /* 언덕 오르기 */
  45%  { transform: translate(0, -11px) rotate(0deg); }       /* 꼭대기 */
  70%  { transform: translate(6px, 4px) rotate(9deg); }       /* 슝 내려가기 */
  85%  { transform: translate(2px, 0) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* ----- 파란방: 총 (탕! 반동 + 총구 불꽃) ----- */
.hs-gun .hs-art {
  background-image: url("../images/icons/gunpick.png");
  background-color: #f6f6f6;
  background-size: cover;
  border-radius: 14px;
  box-shadow: 0 0 0 3px #4d7cff, 0 0 14px #4d7cff;
  transform-origin: 50% 100%;
  animation: recoil 1.8s ease-out infinite;
}

/* 총구 불꽃 (그림 위쪽 가운데) */
.hs-gun::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, #fff 0 18%, #ffe066 32%, rgba(255, 140, 0, 0.7) 50%, transparent 70%);
  border-radius: 50%;
  animation: muzzle 1.8s ease-out infinite;
  pointer-events: none;
}

@keyframes recoil {
  0%, 60%, 100% { transform: translateY(0) rotate(0deg); }
  64% { transform: translateY(6px) rotate(-8deg); }           /* 탕! */
  72% { transform: translateY(2px) rotate(2deg); }
}

@keyframes muzzle {
  0%, 59%, 100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  62% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
}

/* ----- 빨간방: 제트스키 (파도 위에서 출렁출렁) ----- */
.pnlm-hotspot-base.hs-jetski {
  width: 110px;
  height: 98px;
}

.hs-jetski .hs-art {
  background-image: url("../images/icons/jet_ski.png");
  background-color: #fff;
  background-size: 92%;
  border-radius: 14px;
  box-shadow: 0 0 0 3px #ff3d8b, 0 0 14px #ff3d8b;
  animation: wave 2.2s ease-in-out infinite;
}

@keyframes wave {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  25%      { transform: translateY(-8px) rotate(3deg); }
  50%      { transform: translateY(-2px) rotate(6deg); }
  75%      { transform: translateY(-10px) rotate(-2deg); }
}

/* ----- 숨겨진 VR (책상 위) : 가끔 반짝 빛이 스쳐 지나감 ----- */
.pnlm-hotspot-base.hs-vr {
  width: 6vw;
  height: 5.2vw;
  cursor: pointer;
  background: none;
}

.hs-vr .hs-art {
  position: absolute;
  inset: 0;
  background: url("../images/icons/quest3.png") center / contain no-repeat;
  animation: vr-hint 3.5s ease-in-out infinite;
}

/* 빛줄기 (그림 모양대로만 보이게 mask) */
.hs-vr .hs-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.95) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  -webkit-mask: url("../images/icons/quest3.png") center / contain no-repeat;
  mask: url("../images/icons/quest3.png") center / contain no-repeat;
  animation: vr-shine 3.5s ease-in-out infinite;
}

.hs-vr:hover .hs-art {
  animation-play-state: paused;
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #7fd4ff);
}

@keyframes vr-hint {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); }
  50%      { transform: translateY(-4px); filter: drop-shadow(0 0 7px #fff); }
}

@keyframes vr-shine {
  0%, 55%  { background-position: 150% 0; }
  85%, 100% { background-position: -60% 0; }
}

/* ===== 효과용 (effects.js) ===== */
.fx-fly {
  position: fixed;
  z-index: 50;
  object-fit: contain;
  pointer-events: none;
}

.fx-spark {
  position: fixed;
  z-index: 49;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background:
    linear-gradient(#fff, #fff) center / 100% 18% no-repeat,
    linear-gradient(#fff, #fff) center / 18% 100% no-repeat,
    radial-gradient(circle, #fff 0 20%, rgba(150, 210, 255, 0.8) 40%, transparent 70%);
}

/* 화면이 좁을 때 컬러룸 아이콘 축소 */
@media (max-width: 700px) {
  .pnlm-hotspot-base.hs-roller,
  .pnlm-hotspot-base.hs-gun { width: 64px; height: 64px; }
  .pnlm-hotspot-base.hs-jetski { width: 76px; height: 68px; }
  .hs-badge { width: 28px; right: -10px; top: -10px; }
}

/* ----- 뒤로가기 버튼 (왼쪽 위) ----- */
#back-btn {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 10;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

#back-btn img {
  width: 100%;
  height: 100%;
  display: block;
}

#back-btn:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

/* ----- 좌표 확인용 (tour.js 에서 DEBUG = true 일 때만) ----- */
#debug-coords {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 20;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.75);
  color: #0f0;
  font-family: Consolas, monospace;
  font-size: 16px;
  border-radius: 6px;
}

/* 화면이 좁을 때 */
@media (max-width: 700px) {
  #back-btn { width: 46px; height: 46px; top: 12px; left: 12px; }
  .pnlm-hotspot-base.hs-quest { width: 60px; height: 60px; }
}