body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; color:#fff; background:#000; }

/* Viewport lock to prevent scroll and address bar jumps */
html, body { height:100%; width:100%; overflow:hidden; position:fixed; inset:0; overscroll-behavior:none; touch-action:none; }

/* 배경 비디오 전체화면 */
/* 전체 배경 이미지 */
.bgImage { position: fixed; inset:0; width:100%; height:calc(var(--vh, 1vh) * 100); object-fit:cover; object-position:center; z-index:-2; background:#000; }

/* QR 배경 비디오 (이중 레이어 교차 페이드) */
.bgVideo { position: fixed; inset:0; width:100%; height:calc(var(--vh, 1vh) * 100); object-fit:cover; object-position:center; z-index:-2; background:#000; opacity:0; transition: opacity 420ms ease-in-out; }
.bgVideo.hidden { display:none; }
.bgVideo.show { opacity:1; }
/* 공용 숨김 유틸 */
.hidden { display:none !important; }

/* 개별 제어는 JS에서 .show 클래스로 처리 */

/* 상단 바 */
/* 상단바는 제거 (이미지 기반 UI) */
.topBar, .topTitle { display:none; }

/* 페이지 컨테이너 */
.pages { position: relative; min-height:calc(var(--vh, 1vh) * 100); height:calc(var(--vh, 1vh) * 100); display:block; overflow:hidden; }
.page { position: relative; min-height:calc(var(--vh, 1vh) * 100); height:calc(var(--vh, 1vh) * 100); display:none; }
.page.current { display:block; }

/* 가운데 영역 */
.center { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:calc((var(--vh, 1vh) * 100) - 160px); gap:16px; padding:0 20px; text-align:center; }
.topBox { display:none; }
.headline { display:none; }

/* 하단 버튼 영역 */
.bottomRow, .navBtn { display:none; }

/* CTA */
.cta { display:none; }

/* 상태/배너 */
.status { display:none; }

/* 아이템 박스 */
.itemBox, .itemsHeader, .items, .successMsg { display:none; }
.centerMsg { position: fixed; left:0; right:0; bottom:clamp(60px, 10vh, 120px); text-align:center; font-size:clamp(16px, 4vw, 28px); text-shadow:0 2px 8px rgba(0,0,0,.6); padding:0 clamp(20px, 5vw, 40px); }

/* 기존 숨김 미리보기 비디오(카메라) */
/* 이미지 기반 UI 요소 */
.overlayGroup { position: fixed; inset:0; display:flex; align-items:center; justify-content:center; }
.overlayImage { max-width:90%; max-height:80%; object-fit:contain; pointer-events:none; }
.indicator { position: fixed; top:28%; left:50%; transform:translateX(-50%); height:24px; pointer-events:none; }

/* Slides layout: pin content from the top consistently across devices */
#slidesArea { position:relative; overflow:hidden; display:flex; align-items:flex-start; justify-content:center; padding-top:clamp(60px, 8vh, 140px); }
/* Base slide image below temps */
#slideImg { position: relative; transform:none; z-index:1; }

/* Sliding images (used for animated transitions) - size/pos set via JS to match base image */
.slideImage { position: absolute; transition: transform 280ms ease; pointer-events:none; z-index:2; }

/* 이미지 버튼: 기본/눌림 상태는 JS로 background-image 교체 */
.imgBtn { position: fixed; left:50%; bottom:clamp(30px, 9vh, 120px); transform:translateX(-50%); width:clamp(160px, 50vw, 200px); height:clamp(48px, 8vh, 60px); background-size:contain; background-repeat:no-repeat; background-position:center; border:none; cursor:pointer; z-index:5; background-color:transparent; appearance:none; -webkit-appearance:none; -webkit-tap-highlight-color: rgba(0,0,0,0); outline:none; box-shadow:none; }
.imgBtn:focus { outline:none; }
.imgBtn:focus-visible { outline:none; }
.imgBtn:active { background-color:transparent; box-shadow:none; }
.imgBtn.small { width:clamp(200px, 60vw, 240px); height:clamp(20px, 8vh, 140px); }
.imgBtn.bottom { width:clamp(20px, 18vw, 100px); height:clamp(30px, 9vh, 140px); bottom: clamp(20px, 4vh, 60px); }
.imgBtn.hidden { display:none; }

/* 스와이프 영역 (슬라이드): 수평 제스처만 허용하여 세로 드래그로 인한 레이아웃 이동 방지 */
.swipeArea { position: fixed; inset:0; touch-action: pan-x; }

/* 아이템 박스(이미지) */
.itemBoxImg { position: fixed; left:50%; height:clamp(60px, 13vh, 150px); transform:translateX(-50%); top:clamp(70px, 11vh, 120px); width:100%; max-width:680px; }
.itemBoxBackground { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; }
.topButtons { position: fixed; top:clamp(20px, 4vh, 40px); left:0; right:0; display:flex; justify-content:center; gap:clamp(4px, 1vw, 8px); z-index:6; }
.topButtons .imgBtn { position: static; left:auto; transform:none; bottom:auto; }
.itemsImg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; padding:20px; }
.itemsImg .icon { width:56px; height:56px; background-size:contain; background-repeat:no-repeat; }

/* 중앙 정사각형 카메라 */
.cameraWrap { position: fixed; left:50%; top:57%; transform:translate(-50%, -57%); width:min(75vw, 420px); aspect-ratio:1/1; border-radius:clamp(8px, 2vw, 12px); overflow:hidden; background:#000; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.camSquare { width:100%; height:100%; object-fit:cover; }

/* 카메라 로딩 오버레이 */
.loading { position: fixed; left:50%; top:53%; transform:translate(-50%, -50%); padding:clamp(8px, 2vh, 12px) clamp(12px, 4vw, 16px); border-radius:clamp(8px, 2vw, 12px); background:rgba(0,0,0,.6); color:#fff; font-weight:600; font-size:clamp(14px, 4vw, 16px); z-index:6; }

/* 아이템 발견 팝업 */
.itemFoundPopup { position: fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.3); z-index:10; opacity:1; transition: opacity 240ms ease; }
.itemFoundPopup.fadeOut { opacity:0; }
.itemFoundImage { max-width:80%; max-height:80%; object-fit:contain; }

/* Item-found popup pop-in animation */
@keyframes popup-pop-in {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.itemFoundImage.popIn {
  animation: popup-pop-in 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* Subtle glow pulse around image (2 pulses) */
@keyframes popup-glow-pulse {
  0%   { filter: drop-shadow(0 0 0px rgba(255,255,255,0)); }
  50%  { filter: drop-shadow(0 0 24px rgba(255,255,255,0.7)); }
  100% { filter: drop-shadow(0 0 0px rgba(255,255,255,0)); }
}
.itemFoundImage.glowPulse {
  animation: popup-glow-pulse 700ms ease-out 2;
}

/* Sparkle particles */
@keyframes sparkle-pop {
  0%   { transform: translate(0, 0) scale(0.2); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -24px)) scale(1); opacity: 0; }
}
.sparkle {
  position:absolute;
  left: 50%;
  top: 50%;
  width: var(--sz, 8px);
  height: var(--sz, 8px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 70%);
  border-radius:50%;
  pointer-events:none;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.7));
  animation: sparkle-pop var(--dur, 700ms) ease-out forwards;
}

@media (min-width: 768px){
  .topBar { height:72px; }
  .topTitle { font-size:24px; }
}