* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: #f0f0f0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* 뷰포트: 화면 고정, 내부에서 스크롤 입력으로 씬 제어 */
.viewport {
  position: fixed;
  inset: 0;
  height: 100%;
  height: 100dvh; /* 모바일 주소창 대응 */
  background: #f0f0f0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* 스테이지: Figma 프레임 실제 크기(1728 x 1117), JS가 --scale 로 축소 */
.stage {
  position: absolute;
  width: 1728px;
  height: 1117px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;
}

/* 스테이지 내부 요소 공통 (트랜지션 없음: 스크롤에 즉시 반응) */
.stage > div {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: center center;
  will-change: transform, width, height;
}

/* ── 타이틀 ───────────────────────────── */
.title {
  --title-fill: #000; /* 최종 상태에서 #fff 로 전환 */
  z-index: 5;
}
.title svg {
  width: 100%;
  height: 100%;
  display: block;
}
.title path {
  fill: var(--title-fill);
}

/* ── 카메라 ───────────────────────────── */
.cam-bottom {
  z-index: 8;
  overflow: hidden;
}
/* camera-bottom 은 큰 이미지의 얇은 슬롯 립 부분만 노출 (Figma 크롭 재현) */
.cam-bottom img {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  pointer-events: none;
}

.cam-top {
  z-index: 30;
}
.cam-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* ── 폴라로이드 사진 ───────────────────── */
.photo {
  background: #fff;
  border-radius: 6px;
  /* 폴라로이드 여백: 상 24 / 좌우 20 / 하 88 (Figma 값) */
  padding: 24px 20px 88px 20px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  pointer-events: none;
}

#img1 {
  z-index: 10;
}
#img2 {
  z-index: 11;
}
#img3 {
  z-index: 12;
}
#img4 {
  z-index: 13;
}