/* ==========================================================================
   style.css — 보이스피싱크홀
   ==========================================================================

   ┌─────────────────────────────────────────────────────────────────────────┐
   │  PAGE / STATE 목차  (Ctrl+F 로 [ ] 검색)                                 │
   │                                                                           │
   │  [전역]          Reset · Variables · App · Screen 전환 · Toast            │
   │  [공통]          page-canvas · page-img · btn-pos · btn-tap-all           │
   │  [공통-애니]     phone-wave(음파) · ticker-overlay(빨간글자슬라이드)         │
   │  [INTRO1]        #screen-intro1                                           │
   │  [INTRO2]        #screen-intro2                                           │
   │  [MAIN]          #screen-main                                             │
   │  [STEP1]         #screen-step1                                            │
   │  [STEP1-성공]    #screen-step1-suc                                        │
   │  [STEP1-실패]    #screen-step1-fail                                       │
   │  [STEP2]         #screen-step2                                            │
   │  [STEP2-성공]    #screen-step2-suc                                        │
   │  [STEP2-실패]    #screen-step2-fail                                       │
   │  [STEP3]         #screen-step3                                            │
   │  [STEP3-성공]    #screen-step3-suc                                        │
   │  [STEP3-실패]    #screen-step3-fail                                       │
   │  [RESULT]        #screen-result                                           │
   └─────────────────────────────────────────────────────────────────────────┘

   버튼 좌표 계산 공식
   ─────────────────────────────────────────────────────────────────────────
   모바일 캔버스 390 × 844px
     top  : (버튼 Y / 844) × 100%
     left : (버튼 X / 390) × 100%
     width: (버튼 W / 390) × 100%
     height 생략 가능 (aspect-ratio 또는 padding-bottom 으로 대체)

   PC 캔버스 1920 × 1080px
     top  : (버튼 Y / 1080) × 100%
     left : (버튼 X / 1920) × 100%
     width: (버튼 W / 1920) × 100%
   ─────────────────────────────────────────────────────────────────────────
   ========================================================================== */

/* ==========================================================================
   [전역] RESET
   ========================================================================== */

/* 배달의민족 연성체 */
@font-face {
  font-family: "BMYeonsung";
  src:
    url("../font/BMYEONSUNG_otf.otf") format("opentype"),
    url("../font/BMYEONSUNG_ttf.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* G마켓 산스 불러오기 */
@font-face {
  font-family: "GmarketSansBold";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
}

body {
  height: 100%;
  overflow: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

img {
  display: block;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   [전역] CSS VARIABLES
   ========================================================================== */

:root {
  --font-main: "Noto Sans KR", sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-screen: 0.45s;

  /* 캔버스 기준 */
  --canvas-mo-w: 390; /* 모바일 캔버스 너비 */
  --canvas-mo-h: 844; /* 모바일 캔버스 높이 */
  --canvas-pc-w: 1920; /* PC 캔버스 너비 */
  --canvas-pc-h: 1080; /* PC 캔버스 높이 */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-screen: 0.01ms;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   [전역] APP WRAPPER · SCREEN 전환
   display:none 금지 — opacity + pointer-events 전환만 사용
   ========================================================================== */

#app {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  font-family: var(--font-main);
  overflow: hidden;
}

/* 화면 공통 — 스크롤 허용 */
.screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-screen) var(--ease-out);
}

.screen.active {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   [공통] PAGE CANVAS · IMAGE · BUTTON
   모든 화면의 기본 구조
   ─────────────────────────────────────────────────────────────────────────
   .page-canvas  — 이미지 기준점 (position: relative)
   .page-img     — 디자인 이미지 (width: 100%, height: auto)
   .btn-pos      — 이미지 위 투명 버튼 (position: absolute, % 좌표)
   .btn-tap-all  — 화면 전체 탭 버튼 (인트로용)
   ========================================================================== */

/* 이미지 기준 컨테이너 */
.page-canvas {
  position: relative;
  width: 100%;
  /* 높이는 .page-img 가 결정 — 이미지보다 짧은 뷰포트에서 스크롤 발생 */
}

/* 디자인 이미지 */
.page-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 투명 버튼 공통 */
.btn-pos {
  position: absolute;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* 위치/크기는 각 화면 섹션에서 지정 */
}

.btn-pos:active {
  opacity: 0.75;
}

/* 전체 화면 탭 버튼 (인트로) */
.btn-tap-all {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   [공통-애니] PHONE WAVE — 음파 오버레이 (step1·2·3 공통)
   폰 화면 위에 position:absolute 로 올려서 정적 이미지를 덮고 애니메이션 표시
   ─────────────────────────────────────────────────────────────────────────
   위치 좌표: 이미지 기준 % (step1/2/3 동일 레이아웃이므로 공통 적용)
   ========================================================================== */

/* 폰 화면 오버레이 컨테이너 */
.phone-wave {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  z-index: 2;
}

/* SVG 이퀄라이저 */
.wave-svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.wave-bar {
  will-change: transform;
}

/* 재생/정지 버튼 */
.wave-play-btn {
  position: relative;
  z-index: 3;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.wave-play-btn:active {
  transform: scale(0.88);
}

/* 재생 버튼 이미지 */
.play-btn-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* 일시정지 상태: 재생 버튼 반투명 처리 */
.wave-play-btn.playing .play-btn-img {
  opacity: 0.6;
}

/* ─── MOBILE (≤ 768px) · 캔버스 390×844 ───
   폰 화면 좌표: top 205/844, left 38/390, width 314/390, height 90/844
   ※ 이미지 확인 후 수치 조정 필요 */
@media (max-width: 768px) {
  .phone-wave {
    top: 25.8%; /* 205 / 844 */
    left: 25.7%; /* 38  / 390 */
    width: 47.6%; /* 314 / 390 */
    height: 7.45%; /* 90  / 844 */
  }
  .wave-play-btn {
    width: 40px;
    height: 40px;
  }
}

/* ─── DESKTOP (≥ 769px) · 캔버스 1920×1080 ───
   폰 화면 좌표: top 195/1080, left 590/1920, width 740/1920, height 150/1080
   ※ 이미지 확인 후 수치 조정 필요 */
@media (min-width: 769px) {
  .phone-wave {
    top: 36.1%; /* 195 / 1080 */
    left: 38.7%; /* 590 / 1920 */
    width: 20.5%; /* 740 / 1920 */
    height: 13.4%; /* 150 / 1080 */
  }
  .wave-play-btn {
    width: 64px;
    height: 64px;
  }
}

/* ==========================================================================
   [공통-애니] TICKER OVERLAY — 빨간 글자 슬라이드 (step1·2·3 공통)
   이미지 안 빨간 글자 밴드 위에 덮어서 스크롤 텍스트 표시
   ========================================================================== */

.ticker-overlay {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 2;
  background: rgba(0, 0, 0, 0.87); /* 반투명 검정 배경 */
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 80s linear infinite;
}

.ticker-text {
  font-family: "BMYeonsung", sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #e02020;
  white-space: nowrap;
  font-stretch: 100%;
  letter-spacing: 0.01em;
  text-shadow: 0 0 8px rgba(200, 0, 0, 0.5);
}

/* 이미지 자막 — 티커 높이에 맞게 자동 조정 */
.ticker-img {
  height: 30px;
  width: 5000px;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ─── MOBILE ───
   티커 밴드: top 304/844 = 36.0%, height 28px */
@media (max-width: 768px) {
  .ticker-overlay {
    top: 47%; /* 304 / 844 */
    height: 36px;
  }
  .ticker-text {
    font-size: 0.93rem;
    padding-right: 60px;
  }
}

/* ─── DESKTOP ───
   티커 밴드: top 367/1080 = 34.0%, height 38px */
@media (min-width: 769px) {
  .ticker-overlay {
    top: 57%; /* 367 / 1080 */
    height: 36px;
  }
  .ticker-text {
    font-size: 24px;
    padding-right: 100px;
  }
}

/* ==========================================================================
   [공통-애니] KEYFRAMES
   ========================================================================== */

/* wave-img-anim 제거 — rAF SVG 방식으로 대체 */

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes ticker-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ─── 성공 티커: 캐릭터 안착 후 등장 (0.45s 화면전환 + 2.2s 낙하 = 2.65s) ─── */
#screen-step1-suc .ticker-overlay,
#screen-step2-suc .ticker-overlay,
#screen-step3-suc .ticker-overlay {
  opacity: 0;
  animation: ticker-fadein 0.6s ease forwards;
  animation-delay: 2.65s;
}
#screen-step1-suc .ticker-track,
#screen-step2-suc .ticker-track,
#screen-step3-suc .ticker-track {
  animation-delay: 2.65s;
}

/* ─── 실패 티커: 낙하 소실 후 등장 (0.6s delay + 4.5s×85% ≈ 4.5s) ─── */
#screen-step1-fail .ticker-overlay,
#screen-step2-fail .ticker-overlay,
#screen-step3-fail .ticker-overlay {
  opacity: 0;
  animation: ticker-fadein 0.6s ease forwards;
  animation-delay: 4.5s;
}
#screen-step1-fail .ticker-track,
#screen-step2-fail .ticker-track,
#screen-step3-fail .ticker-track {
  animation-delay: 4.5s;
}

/* ─── 성공·실패 텍스트/박스 요소: 0.5s 후 스르륵 등장 (모바일+PC 공통) ─── */

/* 성공 — 모바일 */
.suc-mo-whitebg,
.suc-mo-img1,
.suc-mo-img2,
.suc-mo-text,
.suc-mo-button {
  opacity: 0;
  animation: ticker-fadein 0.8s ease forwards;
  animation-delay: 0.5s;
}

/* 성공 — PC */
.suc-whitebg,
.suc-img1,
.suc-img2,
.suc-text,
.suc-button-img {
  opacity: 0;
  animation: ticker-fadein 0.8s ease forwards;
  animation-delay: 0.5s;
}

/* 실패 — 모바일 */
.fail-mo-back,
.fail-mo-emoji-bar1,
.fail-mo-emoji-bar2,
.fail-mo-text,
.fail-mo-button {
  opacity: 0;
  animation: ticker-fadein 0.8s ease forwards;
  animation-delay: 0.5s;
}

/* 실패 — PC: 기본 숨김 */
.fail-back,
.fail-emoji-bar,
.fail-text,
.fail-button-img {
  opacity: 0;
}

/* 실패 — PC: .active 진입 시 페이드인 */
#screen-step1-fail.active .fail-back,
#screen-step1-fail.active .fail-emoji-bar,
#screen-step1-fail.active .fail-text,
#screen-step1-fail.active .fail-button-img,
#screen-step2-fail.active .fail-back,
#screen-step2-fail.active .fail-emoji-bar,
#screen-step2-fail.active .fail-text,
#screen-step2-fail.active .fail-button-img,
#screen-step3-fail.active .fail-back,
#screen-step3-fail.active .fail-emoji-bar,
#screen-step3-fail.active .fail-text,
#screen-step3-fail.active .fail-button-img {
  animation: ticker-fadein 0.8s ease 0.5s both;
}

/* ==========================================================================
   [전역] TOAST
   ========================================================================== */

.toast {
  position: fixed;
  bottom: calc(24px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 300;
  background: rgba(20, 20, 20, 0.95);
  color: #fff;
  font-family: var(--font-main);
  font-size: 0.85rem;
  padding: 10px 20px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   [공통] SCROLL HINT — 실패 페이지 스크롤 유도 화살표
   ========================================================================== */

.scroll-hint {
  position: fixed;
  bottom: calc(28px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.4s;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 스크롤 필요한 화면이 active 일 때만 표시 */
#screen-main.active .scroll-hint,
#screen-step1-fail.active .scroll-hint,
#screen-step2-fail.active .scroll-hint,
#screen-step3-fail.active .scroll-hint,
#screen-result.active .scroll-hint {
  opacity: 1;
}

/* 화살표 — 두 개 겹쳐서 이중 쉐브론 */
.scroll-hint-arrow {
  width: 16px;
  height: 16px;
  border-right: 2.5px solid rgba(255, 255, 255, 0.85);
  border-bottom: 2.5px solid rgba(255, 255, 255, 0.85);
  transform: rotate(45deg);
  animation: scroll-bounce 1.1s ease-in-out infinite;
}
.scroll-hint-arrow:nth-child(2) {
  animation-delay: 0.18s;
  opacity: 0.5;
}

@keyframes scroll-bounce {
  0%,
  100% {
    transform: rotate(45deg) translate(0, 0);
    opacity: 1;
  }
  50% {
    transform: rotate(45deg) translate(4px, 4px);
    opacity: 0.6;
  }
}

/* ==========================================================================
   [INTRO1]  #screen-intro1
   이미지: image/intro1/pc.png / mo.png
   전환: 탭 전체 → #screen-intro2
   ========================================================================== */

/* 인트로1 — 스크롤 없이 뷰포트에 꽉 차게 */
#screen-intro1 .page-canvas,
#screen-intro2 .page-canvas {
  height: 100%;
  overflow: hidden;
}

#screen-intro1 .page-canvas .page-img,
#screen-intro2 .page-canvas .page-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

/* 글리치 오버레이 컨테이너 — page-canvas 기준 절대 배치 */
#intro1-glitch {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* 각 프레임 — 뷰포트 중앙 배치, 기본 숨김 */
.glitch-frame {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* JS가 추가하는 active 클래스로 표시 */
.glitch-frame.gf-active {
  opacity: 1;
}

/* 모바일 프레임 — PC에서 숨김 */
.glitch-mo {
  display: none;
}

/* 빨간점 공통 — glitch-frame 과 동일한 좌표계 (#intro1-glitch 기준) */
.intro1-red-dot {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 6;
  width: 100%;
}

/* 모바일 빨간점 — PC에서 숨김 */
.intro1-red-dot-mo {
  display: none;
}

/* PC 빨간점 */
.intro1-red-dot-pc {
  top: 45%; /* TODO: 조정 필요 */
  left: 22%; /* TODO: 조정 필요 */
  width: 60%;
}

@media (max-width: 768px) {
  .glitch-pc {
    display: none;
  }
  .glitch-mo {
    display: block;
    width: 130%;
    top: 62%;
  }

  /* 모바일 빨간점 */
  .intro1-red-dot-pc {
    display: none;
  }
  .intro1-red-dot-mo {
    display: block;
    top: 54%; /* TODO: 조정 필요 */
    left: 12%; /* TODO: 조정 필요 */
    width: 77%;
  }
}

/* 로고 바 — #intro1-glitch(inset:0) 기준 절대배치, 비율 무관 고정 */
.intro1-logo-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #000;
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro1-logo-bar img {
  width: auto;
  height: 100%;
  display: block;
}

/* PC 로고 바 */
.intro1-logo-bar-pc {
  bottom: auto;
  top: 87%;
  height: 6%;
}

/* 모바일 로고 바 — PC에서 숨김 */
.intro1-logo-bar-mo {
  display: none;
}

@media (max-width: 768px) {
  .intro1-logo-bar-pc {
    display: none;
  }
  .intro1-logo-bar-mo {
    display: flex;
    bottom: auto;
    top: 86%;
    height: 32px;
    left: 5%;
    width: 90%;
  }
}

/* ==========================================================================
   [INTRO2]  #screen-intro2
   이미지: image/intro2/pc.png / mo.png
   전환: 탭 전체 → #screen-main
   ========================================================================== */

/* ==========================================================================
   [MAIN]  #screen-main
   모바일: image/main/mo.png (390×844)
   PC 배경: image/main/item/인트로3배경이미지.jpg (1920×2160) → 1937px 크롭
   PC 버튼: image/main/item/이벤트입장하기버튼.png (1093×473)
   ref demo: image/main/pc1.png (1920×1937)
   ========================================================================== */

/* PC 전용 레이어 — 기본 숨김 */
.main-layer {
  display: none;
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ─── MOBILE (≤ 768px) · 캔버스 390×844 ─── */
@media (max-width: 768px) {
  #screen-main #btn-main-start {
    top: 44%; /* ~371 / 844  — 입장하기 버튼 상단 */
    left: 14.1%; /* ~55  / 390 */
    width: 71.8%; /* ~280 / 390 */
    height: 7.6%; /* ~47  / 844 */
  }
}

/* ─── DESKTOP (≥ 769px) · 캔버스 1920×2160 ─── */
@media (min-width: 769px) {
  /* PC 전용 레이어 표시 */
  .main-layer {
    display: block;
  }

  /* 입장하기 버튼 이미지 (1093×473) */
  .main-btn-layer {
    top: 29%; /* TODO: 조정 필요 */
    left: 26%; /* (1920-1093)/2/1920 */
    width: 51.9%; /* 1093/1920 */
    z-index: 10;
  }

  /* 경품 장식 (675×197) — 경품 박스 위 */
  .main-prize-deco {
    top: 41.3%; /* TODO: 조정 필요 */
    left: 32.4%; /* (1920-675)/2/1920 */
    width: 36.2%; /* 675/1920 */
    z-index: 45;
  }

  /* 경품 박스 배경 (978×827) — 중앙 배치 */
  .main-prize-box {
    top: 51%; /* TODO: 조정 필요 */
    left: 19.5%; /* (1920-978)/2/1920 */
    width: 60.9%; /* 978/1920 */
    height: 39%;
    z-index: 20;
  }

  /* 경품 1~4 (각 757×549) — 2×2 배치 */
  .main-prize {
    width: 31%; /* ~442/1920 */
    z-index: 30;
  }
  .main-prize-1 {
    top: 48%;
    left: 22%;
  } /* TODO: 조정 필요 */
  .main-prize-2 {
    width: 26%; /* ~442/1920 */
    top: 51%;
    left: 49%;
  } /* TODO: 조정 필요 */
  .main-prize-3 {
    top: 71.6%;
    left: 30%;
    width: 13%; /* ~442/1920 */
  } /* TODO: 조정 필요 */
  .main-prize-4 {
    top: 64%;
    left: 43%;
    width: 38%; /* ~442/1920 */
  } /* TODO: 조정 필요 */

  /* 텍스트 오버레이 (1920×2160) — 전체 캔버스 최상단 */
  .main-text-layer {
    top: 0;
    left: -1%;
    width: 130%;
    z-index: 40;
    pointer-events: none;
  }

  /* 투명 클릭 버튼 — 텍스트 레이어 위 */
  #screen-main #btn-main-start {
    top: 34%; /* TODO: 조정 필요 */
    left: 34%;
    width: 33%;
    height: 6.5%;
    z-index: 50;
  }
}

/* ==========================================================================
   [STEP1]  #screen-step1
   이미지: image/step1/pc.png / mo.png
   선택 A (#btn-step1-a) → #screen-step1-suc
   선택 B (#btn-step1-b) → #screen-step1-fail
   ========================================================================== */

/* ─── MOBILE (≤ 768px) · 캔버스 390×844 ───
   A: 수사관 안내에 따라 (위쪽 버튼) → FAIL
   B: 전화를 끊고 공식기관 (아래쪽 버튼) → SUCCESS  */
@media (max-width: 768px) {
  #screen-step1 #btn-step1-a {
    top: 67.4%; /* ~527 / 844 */
    left: 19.1%; /* ~55  / 390 */
    width: 57.8%; /* ~280 / 390 */
    height: 8%; /* ~59  / 844 */
  }
  #screen-step1 #btn-step1-b {
    top: 79.6%; /* ~638 / 844 */
    left: 19.1%; /* ~55  / 390 */
    width: 57.8%; /* ~280 / 390 */
    height: 8%; /* ~59  / 844 */
  }
}

/* ─── DESKTOP (≥ 769px) · 캔버스 1920×1080 ─── */
@media (min-width: 769px) {
  #screen-step1 #btn-step1-a {
    top: 76.5%; /* ~664 / 1080 */
    left: 24%; /* ~538 / 1920 */
    width: 23.5%; /* ~394 / 1920 */
    height: 11.5%; /* ~81  / 1080 */
  }
  #screen-step1 #btn-step1-b {
    top: 76.5%; /* ~664 / 1080 */
    left: 52.6%; /* ~990 / 1920 — VS 오른쪽 */
    width: 23.5%; /* ~394 / 1920 */
    height: 11.5%; /* ~81  / 1080 */
  }
}

/* ==========================================================================
   [STEP1·2·3-성공] 공통 — suc-layer 오버레이
   캔버스: pc.png 1920×1801 / mo.png 390×844
   item 구성:
     stage1 여자배경 복사.(jpg|png) — 노란 쿠션 배경   (1920×1465)
     여자.png / 성공 남자만.png / 성공노인들.png       — 캐릭터    (1920×1465 or 1080)
     폭죽.png                                        — 금색 컨페티 (1920×1465)
     폭죽2.png                                       — 쏟아지는 컨페티 (1920×1465)
     button1 복사.png                               — 네온 버튼   (1000×564)
   ========================================================================== */

/* ─── PC 레이어 숨김 (모바일에서), 모바일 레이어 숨김 (PC에서) ─── */
.suc-layer {
  display: none;
}
.suc-mo-layer {
  display: none;
}

/* 성공 페이지 — page-canvas 뷰포트 꽉 채우기 */
#screen-step1-suc .page-canvas,
#screen-step2-suc .page-canvas {
  overflow: hidden;
}

@media (min-width: 769px) {
  /* canvas 높이: 설계 기준 1080px 고정 → zoom 비례로 자연스럽게 축소 (실패 페이지와 동일 방식) */
  #screen-step1-suc .page-canvas,
  #screen-step2-suc .page-canvas,
  #screen-step3-suc .page-canvas {
    height: 1080px;
    overflow: hidden;
  }

  /* page-img: position:absolute — <picture> 인라인 간섭 없이 canvas 100% 커버 */
  #screen-step1-suc .page-img,
  #screen-step2-suc .page-img,
  #screen-step3-suc .page-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
}

/* ─── STEP1-성공 MOBILE ─── */
@media (max-width: 768px) {
  #screen-step1-suc .suc-mo-layer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  #screen-step1-suc .suc-mo-bg {
    z-index: 1;
  }
  /* m-before: 사람 낙하 전 보이는 배경, 낙하 완료 후 페이드아웃 */
  #screen-step1-suc .suc-mo-before {
    z-index: 1;
    height: 100%;
    object-fit: cover;
    opacity: 1;
  }
  #screen-step1-suc.active .suc-mo-before {
    animation: suc-before-fadeout 0.3s ease forwards;
    animation-delay: 2.65s;
  }
  #screen-step1-suc .suc-mo-char {
    z-index: 2;
    transform-origin: center bottom;
    transform: translateY(-32%);
    opacity: 0;
    top: 13%;
    left: 13%;
    width: 72%;
  }
  #screen-step1-suc.active .suc-mo-char {
    animation: suc-char-fall 2.2s ease-in 0.45s 1 forwards;
  }
  #screen-step1-suc .suc-mo-confetti1 {
    z-index: 3;
    animation: suc-confetti-drift 3.5s ease-in-out infinite;
  }
  #screen-step1-suc .suc-mo-confetti2 {
    z-index: 4;
    animation: suc-confetti-drift 4.8s ease-in-out infinite reverse;
    animation-delay: 0.7s;
  }
  #screen-step1-suc .suc-mo-whitebg {
    z-index: 5;
    top: 55.9%;
    left: 3%;
    right: 0;
    width: 94%;
    margin: 0 auto;
    height: 30%;
  }
  #screen-step1-suc .suc-mo-img1 {
    z-index: 6;
    top: 53.2%;
    left: -11%;
    right: 0;
    width: 100%;
    margin: 0 auto;
  }
  #screen-step1-suc .suc-mo-img2 {
    z-index: 7;
    top: 66%;
    left: -11%;
    right: 0;
    width: 100%;
    margin: 0 auto;
  }
  #screen-step1-suc .suc-mo-text {
    z-index: 8;
    top: 3%;
    left: 0;
    right: 0;
    width: 93.5%;
    margin: 0 auto;
  }
  #screen-step1-suc .suc-mo-button {
    z-index: 1;
    top: 78.8%;
    left: 5%;
    width: 120%;
  }
  #screen-step1-suc #btn-step1-suc-next {
    top: 78%;
    left: 6%;
    width: 88%;
    height: 19%;
    z-index: 10;
  }
}

/* ─── STEP2-성공 MOBILE ─── */
@media (max-width: 768px) {
  #screen-step2-suc .suc-mo-layer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  #screen-step2-suc .suc-mo-bg {
    z-index: 1;
  }
  #screen-step2-suc .suc-mo-before {
    z-index: 1;
    height: 100%;
    object-fit: cover;
    opacity: 1;
  }
  #screen-step2-suc.active .suc-mo-before {
    animation: suc-before-fadeout 0.3s ease forwards;
    animation-delay: 2.65s;
  }
  #screen-step2-suc .suc-mo-char {
    z-index: 2;
    transform-origin: center bottom;
    transform: translateY(-32%);
    opacity: 0;
    top: 14%;
    left: 13%;
    width: 74%;
  }
  #screen-step2-suc.active .suc-mo-char {
    animation: suc-char-fall 2.2s ease-in 0.45s 1 forwards;
  }
  #screen-step2-suc .suc-mo-confetti1 {
    z-index: 3;
    animation: suc-confetti-drift 3.5s ease-in-out infinite;
  }
  #screen-step2-suc .suc-mo-confetti2 {
    z-index: 4;
    animation: suc-confetti-drift 4.8s ease-in-out infinite reverse;
    animation-delay: 0.7s;
  }
  #screen-step2-suc .suc-mo-whitebg {
    z-index: 5;
    top: 55.9%;
    left: 3%;
    right: 0;
    width: 94%;
    margin: 0 auto;
    height: 30%;
  }
  #screen-step2-suc .suc-mo-img1 {
    z-index: 6;
    top: 53.2%;
    left: -10%;
    right: 0;
    width: 100%;
    margin: 0 auto;
  }
  #screen-step2-suc .suc-mo-img2 {
    z-index: 7;
    top: 64.1%;
    left: -10%;
    right: 0;
    width: 100%;
    margin: 0 auto;
  }
  #screen-step2-suc .suc-mo-text {
    z-index: 8;
    top: 3%;
    left: 0;
    right: 0;
    width: 93.5%;
    margin: 0 auto;
  }
  #screen-step2-suc .suc-mo-button {
    z-index: 1;
    top: 78.8%;
    left: 5%;
    width: 120%;
  }
  #screen-step2-suc #btn-step2-suc-next {
    top: 78%;
    left: 6%;
    width: 88%;
    height: 19%;
    z-index: 10;
  }
}

/* ─── DESKTOP ─── */
@media (min-width: 769px) {
  /* 공통 베이스 */
  .suc-layer {
    display: block;
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  /* 배경: 노란 쿠션 — pc.png가 커버로 채우므로 데스크탑에서 숨김 */
  .suc-bg {
    top: -25%;
  }

  /* STEP1 캐릭터 — 기본: 화면 위 대기 */
  #screen-step1-suc .suc-char {
    z-index: 2;
    top: 7%;
    transform-origin: center bottom;
    transform: translateY(-32%);
    opacity: 0;
    left: 35%;
    width: 30%;
  }
  #screen-step1-suc.active .suc-char {
    animation: suc-char-fall 2.2s ease-in 0.45s 1 forwards;
  }

  /* STEP2 캐릭터 — 기본: 화면 위 대기 */
  #screen-step2-suc .suc-char {
    z-index: 2;
    top: -54px;
    transform-origin: center bottom;
    transform: translateY(-32%);
    opacity: 0;
  }
  #screen-step2-suc.active .suc-char {
    animation: suc-char-fall 2.2s ease-in 0.45s 1 forwards;
  }

  /* 금색 컨페티 — 투명 PNG, 흔들림 */
  .suc-confetti1 {
    z-index: 3;
    animation: suc-confetti-drift 3.5s ease-in-out infinite;
    top: -14%;
  }

  /* 쏟아지는 컨페티 — 흰 배경 제거 후 느린 흔들림 */
  .suc-confetti2 {
    z-index: 3;
    mix-blend-mode: multiply;
    animation: suc-confetti-drift 4.8s ease-in-out infinite reverse;
    animation-delay: 0.7s;
  }

  /* 하얀 배경 박스 */
  .suc-whitebg {
    z-index: 4;
    top: 49%;
    width: 70%;
    height: 360px;
    left: 15%;
  }

  /* 글자 배경 1 */
  .suc-img1 {
    z-index: 5;
    top: 45.3%;
    left: 11%;
    width: 40%;
  }

  /* 글자 배경 2 */
  .suc-img2 {
    z-index: 6;
    top: 44.3%;
    left: 44%;
    width: 40%;
  }

  /* 성공 텍스트 오버레이 */
  .suc-text {
    z-index: 8;
    top: -6%;
    width: 100%;
  }

  /* 네온 버튼 이미지 */
  .suc-button-img {
    z-index: 7;
    top: 69.5%;
    left: 36%;
    width: 26.9%;
  }

  /* 투명 클릭 버튼 */
  #screen-step1-suc #btn-step1-suc-next,
  #screen-step2-suc #btn-step2-suc-next {
    top: 799px;
    left: 32.5%;
    width: 35%;
    height: 227px;
    z-index: 20;
  }

  #screen-step1-suc #btn-step1-suc-next:active,
  #screen-step2-suc #btn-step2-suc-next:active {
    opacity: 0.7;
  }
}

/* ── before 페이드아웃 ── */
@keyframes suc-before-fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}

/* ── 성공 키프레임 ── */
@keyframes suc-char-fall {
  0% {
    transform: translateY(-32%) scaleY(1);
    opacity: 0;
  }
  8% {
    transform: translateY(-28%) scaleY(1);
    opacity: 1;
  }
  /* 쿠션 도달 */
  62% {
    transform: translateY(0) scaleY(1);
    animation-timing-function: ease-out;
  }
  /* 착지 충격 */
  72% {
    transform: translateY(2%) scaleY(0.82);
  }
  /* 반동 */
  82% {
    transform: translateY(-4%) scaleY(1.08);
  }
  /* 재착지 */
  90% {
    transform: translateY(0.5%) scaleY(0.96);
  }
  /* 안착 — 이 상태로 멈춤 */
  100% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
}

@keyframes suc-confetti-drift {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  35% {
    transform: translateY(-12px) rotate(-2deg);
  }
  70% {
    transform: translateY(8px) rotate(2deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* ==========================================================================
   [STEP1-성공]  #screen-step1-suc  (개별 규칙 없음 — 공통으로 통합)
   ========================================================================== */

/* ==========================================================================
   [STEP2-성공] #screen-step2-suc (개별 규칙 없음 — 공통으로 통합)
   ========================================================================== */

/* ==========================================================================
   [STEP1-실패]  #screen-step1-fail
   이미지: image/step1/fail/pc.png (1920×1801) / mo.png (390×844)
   다음 버튼 (#btn-step1-fail-next) → #screen-step2
   ========================================================================== */

/* ─── PC 레이어 숨김 (모바일), 모바일 레이어 숨김 (PC) ─── */
.fail-layer {
  display: none;
}
.fail-mo-layer {
  display: none;
}

/* 낙하 애니메이션 translateY 튕김 방지 */
#screen-step1-fail .page-canvas {
  overflow: hidden;
}
#screen-step2-fail .page-canvas {
  overflow: hidden;
}

/* ─── MOBILE (≤768px) ─── */
@media (max-width: 768px) {
  /* 모바일 레이어 공통 베이스 */
  .fail-mo-layer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  /* 배경 — 낙하 전 표시, 낙하 완료 후 mo.png로 페이드아웃 */
  .fail-mo-bg {
    z-index: 1;
    height: 100%;
    object-fit: cover;
    opacity: 1;
  }
  #screen-step1-fail.active .fail-mo-bg,
  #screen-step2-fail.active .fail-mo-bg,
  #screen-step3-fail.active .fail-mo-bg {
    animation: fail-bg-fadeout 0.1s ease forwards;
    animation-delay: 5.1s;
  }

  /* 추락사람.png (540×515) — 캔버스보다 넓으므로 width:100% 로 자동 축소
     흰 배경 제거 + 낙하+소실 애니 재사용 */
  .fail-mo-people {
    z-index: 2;
    width: 170%;
    left: -20%;
    transform-origin: center 80%;
    animation: fall-people 4.5s ease-in 1 forwards;
    animation-delay: 0.6s;
  }

  /* 추락돌들.png (390×508) — 흰 배경 제거 + 바위 애니 재사용 */
  .fail-mo-rocks {
    z-index: 3;
    mix-blend-mode: multiply;
    transform-origin: center 35%;
    opacity: 0;
  }
  #screen-step1-fail.active .fail-mo-rocks,
  #screen-step2-fail.active .fail-mo-rocks,
  #screen-step3-fail.active .fail-mo-rocks {
    animation: fall-rocks 3.2s ease-in 1 forwards;
    animation-delay: 0.6s;
  }

  /* 예방안내배경.png (414×252) — 실버 명판, 95% 축소 중앙 정렬
     top: 하단 정보 영역 시작 ≈ 52% */
  .fail-mo-back {
    z-index: 4;
    top: 48%;
    left: 1%;
    right: 0;
    width: 100%;
    margin: 0 auto;
    height: 32%;
  }

  /* 명판 위 하얀바+이모지 — 스테이지별 */
  #screen-step1-fail .fail-mo-emoji-bar1 {
    z-index: 6;
    top: 49.2%;
    left: -4%;
    right: 0;
    width: 68%;
    margin: 0 auto;
  }
  #screen-step1-fail .fail-mo-emoji-bar2 {
    z-index: 6;
    top: 61.8%;
    left: -4%;
    right: 0;
    width: 68%;
    margin: 0 auto;
  }

  #screen-step2-fail .fail-mo-emoji-bar1 {
    z-index: 6;
    top: 49.7%;
    left: -4%;
    right: 0;
    width: 68%;
    margin: 0 auto;
  }
  #screen-step2-fail .fail-mo-emoji-bar2 {
    z-index: 6;
    top: 61.5%;
    left: -4%;
    right: 0;
    width: 68%;
    margin: 0 auto;
  }

  /* 텍스트 오버레이 — 전체 캔버스 투명 PNG */
  .fail-mo-text {
    z-index: 7;
    top: 0;
    left: 0;
    right: 0;
    width: 91%;
    margin: 0 auto;
  }

  /* 네온 버튼 (432×201 → 88% 축소)
     width: 343px, height: 159px → top: (844-159-30)/844 ≈ 78% */
  .fail-mo-button {
    z-index: 3;
    top: 72%;
    left: 4%;
    right: 0;
    width: 100%;
    margin: 0 auto;
  }

  /* 투명 클릭 버튼 — fail-mo-button 커버 (step1·2 공통) */
  #screen-step1-fail #btn-step1-fail-next,
  #screen-step2-fail #btn-step2-fail-next {
    top: 76%;
    left: 6%;
    width: 88%;
    height: 19%; /* 159/844 ≈ 19% */
    z-index: 10;
  }
}

/* ─── STEP1 DESKTOP ─── */
@media (min-width: 769px) {
  #screen-step1-fail .fail-layer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  #screen-step1-fail .fail-equalizer {
    z-index: 1;
    mix-blend-mode: multiply;
    transform-origin: center 35%;
  }

  #screen-step1-fail .fail-back {
    z-index: 2;
    top: 67.8%;
    left: 15.94%;
    width: 67.98%; /* 1286/1920 */
    height: 26%;
  }
  #screen-step1-fail .fail-emoji-bar {
    z-index: 3;
    top: 68%; /* TODO: 조정 필요 */
    left: 17.58%; /* (1920-1245)/2/1920 */
    width: 64.84%; /* 1245/1920 */
  }

  #screen-step1-fail .fail-rocks {
    z-index: 3;
    transform-origin: center 35%;
    opacity: 0;
  }
  #screen-step1-fail.active .fail-rocks,
  #screen-step1-fail.active .fail-mo-rocks {
    animation: fall-rocks 3.2s ease-in 1 forwards;
    animation-delay: 0.6s;
  }

  #screen-step1-fail .fail-people {
    z-index: 4;
    transform-origin: center 80%;
    animation: fall-people 4.5s ease-in 1 forwards;
    animation-delay: 0.6s;
    top: -15%;
  }

  #screen-step1-fail .fail-text {
    z-index: 7;
    top: -1%;
  }

  #screen-step1-fail .fail-button-img {
    z-index: 6;
    top: 81.3%;
    left: 35.5%;
    width: 28%;
  }

  #screen-step1-fail #btn-step1-fail-next {
    top: 74%;
    left: 32.5%;
    width: 35%;
    height: 21%;
    z-index: 20;
  }

  #screen-step1-fail #btn-step1-fail-next:active {
    opacity: 0.7;
  }
}

/* ─── STEP2 DESKTOP ─── */
@media (min-width: 769px) {
  #screen-step2-fail .fail-layer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  #screen-step2-fail .fail-equalizer {
    z-index: 1;
    mix-blend-mode: multiply;
    transform-origin: center 35%;
  }

  #screen-step2-fail .fail-back {
    z-index: 2;
    top: 66.8%;
    left: 15.94%;
    width: 67.98%; /* 1286/1920 */
    height: 26.7%;
  }
  #screen-step2-fail .fail-emoji-bar {
    z-index: 3;
    top: 67.3%; /* TODO: 조정 필요 */
    left: 17.58%;
    width: 64.84%; /* 1245/1920 */
  }

  #screen-step2-fail .fail-rocks {
    z-index: 3;
    transform-origin: center 35%;
    opacity: 0;
  }
  #screen-step2-fail.active .fail-rocks,
  #screen-step2-fail.active .fail-mo-rocks {
    animation: fall-rocks 3.2s ease-in 1 forwards;
    animation-delay: 0.6s;
  }

  #screen-step2-fail .fail-people {
    z-index: 4;
    transform-origin: center 80%;
    animation: fall-people 4.5s ease-in 1 forwards;
    animation-delay: 0.6s;
    top: -15%;
  }

  #screen-step2-fail .fail-text {
    z-index: 7;
    top: -1%;
  }

  #screen-step2-fail .fail-button-img {
    z-index: 6;
    top: 81.3%;
    left: 35.5%;
    width: 28%;
  }

  #screen-step2-fail #btn-step2-fail-next {
    top: 74%;
    left: 32.5%;
    width: 35%;
    height: 21%;
    z-index: 20;
  }

  #screen-step2-fail #btn-step2-fail-next:active {
    opacity: 0.7;
  }
}

/* ── 실패 배경 페이드아웃 ── */
@keyframes fail-bg-fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ── 낙하 키프레임 ── */
@keyframes fall-rocks {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(90px) scale(0.2);
    opacity: 0;
  }
}

@keyframes fall-people {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(80px) scale(0.3);
    opacity: 0;
  }
}

/* ── 이퀄라이저 맥동 키프레임 ── */
@keyframes eq-pulse {
  0% {
    transform: scaleY(0.65);
  }
  100% {
    transform: scaleY(1.35);
  }
}

/* ==========================================================================
   [STEP2]  #screen-step2
   이미지: image/step2/pc.png / mo.png
   선택 A (#btn-step2-a) → #screen-step2-suc
   선택 B (#btn-step2-b) → #screen-step2-fail
   ========================================================================== */

/* ─── MOBILE ─── */
@media (max-width: 768px) {
  #screen-step2 #btn-step2-a {
    top: 66.3%;
    left: 21%;
    width: 57%;
    height: 8%;
  }
  #screen-step2 #btn-step2-b {
    top: 80%;
    left: 21%;
    width: 57%;
    height: 8%;
  }
}

/* ─── DESKTOP ─── */
@media (min-width: 769px) {
  #screen-step2 #btn-step2-a {
    top: 77%;
    left: 25%;
    width: 22.3%;
    height: 12%;
  }
  #screen-step2 #btn-step2-b {
    top: 77%;
    left: 53%;
    width: 23%;
    height: 12%;
  }
}

/* ==========================================================================
   [STEP2-성공]  #screen-step2-suc  (btn·레이어 위치 → 공통 블록으로 통합)
   ========================================================================== */

/* ==========================================================================
   [STEP2-실패]  #screen-step2-fail
   이미지: image/step2/fail/pc.png / mo.png
   다음 버튼 (#btn-step2-fail-next) → #screen-step3
   ========================================================================== */

/* ─── MOBILE ─── */
@media (max-width: 768px) {
  #screen-step2-fail #btn-step2-fail-next {
    top: 87%;
    left: 17%;
    width: 65%;
    height: 6.7%;
  }
}

/* ─── DESKTOP ─── (btn 위치는 [STEP1-실패] 섹션 공통 규칙으로 통합) */

/* ==========================================================================
   [STEP3]  #screen-step3
   이미지: image/step3/pc.png / mo.png
   선택 A (#btn-step3-a) → #screen-step3-suc
   선택 B (#btn-step3-b) → #screen-step3-fail
   ========================================================================== */

/* ─── MOBILE ─── */
@media (max-width: 768px) {
  #screen-step3 #btn-step3-a {
    top: 66.3%;
    left: 21%;
    width: 57%;
    height: 8%;
  }
  #screen-step3 #btn-step3-b {
    top: 80%;
    left: 21%;
    width: 57%;
    height: 8%;
  }
}

/* ─── DESKTOP ─── */
@media (min-width: 769px) {
  #screen-step3 #btn-step3-a {
    top: 77%;
    left: 25%;
    width: 22.3%;
    height: 12%;
  }
  #screen-step3 #btn-step3-b {
    top: 77%;
    left: 53%;
    width: 23%;
    height: 12%;
  }
}

/* ==========================================================================
   [STEP3-성공]  #screen-step3-suc  — 공통 클래스 완전 분리, 독립 관리
   ========================================================================== */

/* page-canvas */
#screen-step3-suc .page-canvas {
  overflow: hidden;
}
/* step3 desktop page-canvas — 공통 블록에서 height:100vh 적용 */

/* ─── MOBILE ─── */
@media (max-width: 768px) {
  /* 모바일 레이어 베이스 */
  #screen-step3-suc .suc-mo-layer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  /* 배경 */
  #screen-step3-suc .suc-mo-bg {
    z-index: 1;
  }
  #screen-step3-suc .suc-mo-before {
    z-index: 1;
    height: 100%;
    object-fit: cover;
    opacity: 1;
  }
  #screen-step3-suc.active .suc-mo-before {
    animation: suc-before-fadeout 0.3s ease forwards;
    animation-delay: 2.65s;
  }

  /* 캐릭터 */
  #screen-step3-suc .suc-mo-char {
    z-index: 2;
    transform-origin: center bottom;
    transform: translateY(-32%);
    opacity: 0;
    top: 13%;
    left: 13.5%;
    width: 72.9%;
  }
  #screen-step3-suc.active .suc-mo-char {
    animation: suc-char-fall 2.2s ease-in 0.45s 1 forwards;
  }

  /* 컨페티 */
  #screen-step3-suc .suc-mo-confetti1 {
    z-index: 3;
    animation: suc-confetti-drift 3.5s ease-in-out infinite;
  }
  #screen-step3-suc .suc-mo-confetti2 {
    z-index: 4;
    animation: suc-confetti-drift 4.8s ease-in-out infinite reverse;
    animation-delay: 0.7s;
  }

  /* 네온 버튼 이미지 */
  #screen-step3-suc .suc-mo-button {
    z-index: 5;
    top: 78%;
    left: 6%;
    width: 89%;
  }

  /* 투명 클릭 버튼 */
  #screen-step3-suc #btn-step3-suc-next {
    top: 78%;
    left: 6%;
    width: 88%;
    height: 19%;
    z-index: 10;
  }

  /* 하얀 배경 박스 */
  #screen-step3-suc .suc-mo-whitebg {
    z-index: 5;
    top: 57.9%;
    left: 2%;
    right: 0;
    width: 89%;
    margin: 0 auto;
    height: 29%;
  }

  /* 글자 배경 1.png */
  #screen-step3-suc .suc-mo-img1 {
    z-index: 6;
    top: 51.5%;
    left: -7%;
    right: 0;
    width: 100%;
    margin: 0 auto;
  }

  /* 글자 배경 2.png */
  #screen-step3-suc .suc-mo-img2 {
    z-index: 7;
    top: 62.5%;
    left: -7%;
    right: 0;
    width: 100%;
    margin: 0 auto;
  }

  /* 텍스트 오버레이 */
  #screen-step3-suc .suc-mo-text {
    z-index: 8;
    top: 2.5%;
    left: 0;
    right: 0;
    width: 93.5%;
    margin: 0 auto;
  }

  /* 네온 버튼 */
  #screen-step3-suc .suc-mo-button {
    z-index: 1;
    top: 77.2%;
    left: 10%;
    width: 88%;
  }
}

/* ─── DESKTOP ─── */
@media (min-width: 769px) {
  /* 레이어 베이스 */
  #screen-step3-suc .suc-layer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  /* 배경: pc.png 커버로 대체 — 숨김 */
  #screen-step3-suc .suc-bg {
    top: -25%;
  }

  /* 캐릭터 */
  #screen-step3-suc .suc-char {
    z-index: 2;
    top: -6%;
    transform-origin: center bottom;
    transform: translateY(-32%);
    opacity: 0;
  }
  #screen-step3-suc.active .suc-char {
    animation: suc-char-fall 2.2s ease-in 0.45s 1 forwards;
  }

  /* 컨페티 */
  #screen-step3-suc .suc-confetti1 {
    z-index: 3;
    animation: suc-confetti-drift 3.5s ease-in-out infinite;
    top: -15%;
  }
  #screen-step3-suc .suc-confetti2 {
    z-index: 3;
    mix-blend-mode: multiply;
    animation: suc-confetti-drift 4.8s ease-in-out infinite reverse;
    animation-delay: 0.7s;
  }

  /* 하얀 배경 박스 */
  #screen-step3-suc .suc-whitebg {
    z-index: 4;
    top: 56%;
    width: 70%;
    height: 360px;
    left: 15%;
  }

  /* 글자 배경 1 */
  #screen-step3-suc .suc-img1 {
    z-index: 5;
    top: 52%;
    left: 10.5%;
    width: 40%;
  }

  /* 글자 배경 2 */
  #screen-step3-suc .suc-img2 {
    z-index: 6;
    top: 51%;
    left: 44.2%;
    width: 40%;
  }

  /* 텍스트 오버레이 */
  #screen-step3-suc .suc-text {
    z-index: 8;
    top: 0.7%;
  }

  /* 네온 버튼 이미지 */
  #screen-step3-suc .suc-button-img {
    z-index: 7;
    top: 74.5%;
    left: 33.5%;
    width: 31.9%;
  }

  /* 투명 클릭 버튼 */
  #screen-step3-suc #btn-step3-suc-next {
    top: 799px;
    left: 32.5%;
    width: 35%;
    height: 227px;
    z-index: 20;
  }
  #screen-step3-suc #btn-step3-suc-next:active {
    opacity: 0.7;
  }
}

/* ==========================================================================
   [STEP3-실패]  #screen-step3-fail  — 공통 클래스 완전 분리, 독립 관리
   이미지: image/step3/fail/pc.png / mo.png
   다음 버튼 (#btn-step3-fail-next) → #screen-result
   ========================================================================== */

/* page-canvas */
#screen-step3-fail .page-canvas {
  overflow: hidden;
}

/* ─── MOBILE ─── */
@media (max-width: 768px) {
  /* 레이어 베이스 */
  #screen-step3-fail .fail-mo-layer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  /* 배경 */
  #screen-step3-fail .fail-mo-bg {
    z-index: 1;
    height: 100%;
    object-fit: cover;
  }

  /* 추락 사람 */
  #screen-step3-fail .fail-mo-people {
    z-index: 2;
    transform-origin: center 80%;
    animation: fall-people 4.5s ease-in 1 forwards;
    animation-delay: 0.6s;
    width: 100%;
  }

  /* 추락 돌 */
  #screen-step3-fail .fail-mo-rocks {
    z-index: 3;
    mix-blend-mode: multiply;
    transform-origin: center 35%;
  }

  /* 명판 배경 */
  #screen-step3-fail .fail-mo-back {
    z-index: 4;
    top: 47%;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 auto;
    height: 34%;
  }

  /* 텍스트 오버레이 */
  #screen-step3-fail .fail-mo-text {
    z-index: 6;
    top: 0;
    left: 0;
    right: 0;
    width: 90%;
    margin: 0 auto;
  }

  /* 네온 버튼 */
  #screen-step3-fail .fail-mo-button {
    z-index: 5;
    top: 75%;
    left: 9%;
    right: 0;
    width: 93%;
    margin: 0 auto;
  }

  /* 명판 위 하얀바+이모지 */
  #screen-step3-fail .fail-mo-emoji-bar1 {
    z-index: 6;
    top: 47.6%;
    left: 3%;
    right: 0;
    width: 85%;
    margin: 0 auto;
  }
  #screen-step3-fail .fail-mo-emoji-bar2 {
    z-index: 6;
    top: 60.3%;
    left: 5%;
    right: 0;
    width: 85%;
    margin: 0 auto;
  }

  /* 투명 클릭 버튼 */
  #screen-step3-fail #btn-step3-fail-next {
    top: 90%;
    left: 15.7%;
    width: 71.3%;
    height: 6.7%;
    z-index: 10;
  }
}

/* ─── DESKTOP ─── */
@media (min-width: 769px) {
  /* 레이어 베이스 */
  #screen-step3-fail .fail-layer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  /* 이퀄라이저 */
  #screen-step3-fail .fail-equalizer {
    z-index: 1;
    mix-blend-mode: multiply;
    transform-origin: center 35%;
  }

  /* 명판 */
  #screen-step3-fail .fail-back {
    z-index: 2;
    top: 70.5%;
    left: 16.94%;
    width: 66%; /* 1286/1920 */
    height: 27%;
  }
  #screen-step3-fail .fail-emoji-bar {
    z-index: 3;
    top: 70.6%; /* TODO: 조정 필요 */
    left: 17.5%;
    width: 63.84%; /* 1245/1920 */
  }

  /* 돌 */
  #screen-step3-fail .fail-rocks {
    z-index: 3;
    transform-origin: center 35%;
    opacity: 0;
  }
  #screen-step3-fail.active .fail-rocks,
  #screen-step3-fail.active .fail-mo-rocks {
    animation: fall-rocks 3.2s ease-in 1 forwards;
    animation-delay: 0.6s;
  }

  /* 사람 */
  #screen-step3-fail .fail-people {
    z-index: 4;
    transform-origin: center 80%;
    animation: fall-people 4.5s ease-in 1 forwards;
    animation-delay: 0.6s;
    top: -15%;
  }

  /* 텍스트 오버레이 */
  #screen-step3-fail .fail-text {
    z-index: 7;
    top: 3.5%;
    left: 1%;
    width: 98%;
  }

  /* 네온 버튼 이미지 */
  #screen-step3-fail .fail-button-img {
    z-index: 6;
    top: 83.3%;
    left: 32.9%;
    width: 32%;
  }

  /* 투명 클릭 버튼 */
  #screen-step3-fail #btn-step3-fail-next {
    top: 74%;
    left: 32.5%;
    width: 35%;
    height: 21%;
    z-index: 20;
  }
  #screen-step3-fail #btn-step3-fail-next:active {
    opacity: 0.7;
  }
}

/* ==========================================================================
   [RESULT]  #screen-result
   모바일 캔버스: 390×1630 (mobile-item/스마트폰용 랜딩페이지 수고텍스트.png)
   PC 캔버스:    1920×3300 (pc-item/마지막 수고페이지 배경.jpg)
   ========================================================================== */

/* 공통 레이어 기본 속성 */
.result-layer {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 버튼 그룹 div와 내부 버튼은 클릭 가능 */
.result-btn-group {
  pointer-events: auto;
}
.result-btn-group .btn-pos {
  pointer-events: auto;
}

/* PC 전용 — 기본 숨김 */
.result-text-layer,
.result-yt-prize-box-pc,
.result-pc-thumbnail,
.result-prize-deco-pc,
.result-prize-pc,
.result-register-group-pc,
.result-share-group-pc,
.result-sparkle-pc {
  display: none;
}

/* 모바일 전용 — 기본 숨김 */
.result-sparkle-mo {
  display: none;
}

/* 유튜브 재생 아이콘 (제목 왼쪽) — 기본 숨김 */
.result-yt-title-icon {
  display: none;
}

/* btn-result-video 내부 아이콘 이미지 */
.btn-result-video img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ─── MOBILE (캔버스 390×1630) ─── */
@media (max-width: 768px) {
  /* 배경 이미지 — 캔버스 전체 커버 (텍스트 PNG 투명 영역 대비) */
  #screen-result .page-canvas {
    background-image: url("../image/result/mobile-item/마지막%20수고페이지%20배경.jpg");
    background-size: 100% 100%;
  }

  /* 텍스트 이미지(page-img)를 모든 레이어 위로 */
  #screen-result .page-img {
    position: relative;
    z-index: 10;
    width: 80%;
    left: 8%;
  }

  /* 피해예방 10계명 (487×554) */
  .result-commandments {
    top: 6%; /* TODO: 조정 필요 */
    left: 8%;
    width: 100%;
  }

  /* 유튜브+경품 박스 배경 (387×824) */
  .result-yt-prize-box {
    top: 35%; /* TODO: 조정 필요 */
    left: 6%;
    width: 90%;
    height: 51%;
  }

  /* 비디오 썸네일 (190×396) */
  .result-mo-thumbnail {
    top: 42%; /* TODO: 조정 필요 */
    left: 20%;
    width: 28.7%;
  }

  /* 유튜브 재생 아이콘 — 모바일: 숨김 */
  .result-yt-title-icon {
    display: none;
  }

  /* 반짝이 — 모바일 */
  .result-sparkle-mo {
    display: block;
    top: -2%; /* TODO: 조정 필요 */
    left: 0;
    width: 100%;
    z-index: 50;
    pointer-events: none;
  }

  /* 선물 장식 (404×292) */
  .result-gift-deco {
    top: 68%; /* TODO: 조정 필요 */
    left: -2%;
    width: 104%;
  }

  /* 경품 1~4 (757×549) — 2×2 배치 */
  .result-prize-mo {
    width: 46%;
  }
  .result-prize-mo-1 {
    top: 63.2%;
    left: 8%;
  } /* TODO: 조정 필요 */
  .result-prize-mo-2 {
    top: 64.7%;
    left: 46%;
    width: 40%;
  } /* TODO: 조정 필요 */
  .result-prize-mo-3 {
    top: 74.6%;
    left: 19%;
    width: 22%;
  } /* TODO: 조정 필요 */
  .result-prize-mo-4 {
    top: 70.5%;
    left: 36%;
    width: 60%;
  } /* TODO: 조정 필요 */

  /* 재도전 버튼 */
  #screen-result #btn-retry {
    /* TODO: 위치 설정 필요 */
  }

  /* 영상 재생 버튼 3개 — 썸네일 행별 배치 */
  #screen-result #btn-video-1 {
    top: 42.2%; /* TODO: 조정 필요 */
    left: 11%;
    width: 48.7%;
    height: 5.5%;
  }
  #screen-result #btn-video-2 {
    top: 48.1%; /* TODO: 조정 필요 */
    left: 11%;
    width: 48.7%;
    height: 5.5%;
  }
  #screen-result #btn-video-3 {
    top: 53.6%; /* TODO: 조정 필요 */
    left: 11%;
    width: 48.7%;
    height: 5.5%;
  }

  /* ── 모바일 전용: 등록·공유 버튼 그룹 ──
     top 하나만 바꾸면 이미지+버튼 전체가 함께 이동 */
  .result-btn-group-mo {
    top: 81.1%; /* ← 여기만 조정하면 됨 */
    left: 2%;
    width: 100%;
  }

  /* 버튼 배경 이미지 — 그룹 너비 100% 채움 */
  .result-btn-img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  /* 공유하기 버튼 — 그룹 내 상단 (422×254 기준 상단 버튼) */
  #screen-result #btn-result-share {
    top: 61%;

    left: 22%;
    width: 57%;
    height: 14%;
  }

  /* 응모하기 버튼 — 그룹 내 하단 */
  #screen-result #btn-result-register {
    top: 29%;
    left: 22%;
    width: 57%;
    height: 14%;
  }
}

/* ─── DESKTOP (캔버스 1920×3300) ─── */
@media (min-width: 769px) {
  /* 모바일 전용 요소 숨김 */
  .result-yt-prize-box,
  .result-mo-thumbnail,
  .result-gift-deco,
  .result-prize-mo,
  .result-btn-group-mo,
  .result-sparkle-mo {
    display: none;
  }

  /* PC 전용 요소 표시 */
  .result-text-layer,
  .result-yt-prize-box-pc,
  .result-pc-thumbnail,
  .result-prize-deco-pc,
  .result-prize-pc,
  .result-register-group-pc,
  .result-share-group-pc,
  .result-sparkle-pc {
    display: block;
  }

  /* 반짝이 — PC */
  .result-sparkle-pc {
    top: -3%; /* TODO: 조정 필요 */
    left: 7%;
    width: 90%;
    z-index: 50;
    pointer-events: none;
  }

  /* 전체 텍스트·장식 오버레이 (1920×3300) */
  .result-text-layer {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    pointer-events: none;
  }

  /* 피해예방 10계명 (1413×1521) */
  .result-commandments {
    top: 12%; /* TODO: 조정 필요 */
    left: 19.2%;
    width: 73.6%;
  }

  /* 유튜브+경품 박스 배경 (1440×1067) — 유튜브 영상 + 경품 섹션 통합 배경 */
  .result-yt-prize-box-pc {
    top: 53.9%; /* TODO: 조정 필요 */
    left: 11%;
    width: 75%; /* 1440/1920 */
  }

  /* 유튜브 썸네일 3개 (1115×236) */
  .result-pc-thumbnail {
    top: 59.6%; /* TODO: 조정 필요 */
    left: 22.9%;
    width: 55.3%; /* 1115/1920 */
  }

  /* 유튜브 재생 아이콘 — PC: 제목 왼쪽 */
  .result-yt-title-icon {
    display: block;
    width: 5%;
    z-index: 30;
    pointer-events: none;
    top: 54.45%; /* TODO: 조정 필요 */
    left: 37.6%; /* TODO: 조정 필요 */
  }

  /* 경품 장식 (675×197) */
  .result-prize-deco-pc {
    top: 71%; /* TODO: 조정 필요 */
    left: 32.4%;
    width: 35.2%;
  }

  /* 경품 1~4 (각 757×549) — 4등분 가로 배치 */
  .result-prize-pc {
    top: 70%; /* TODO: 조정 필요 */
    width: 22%;
    z-index: 10;
  }
  .result-prize-pc-1 {
    left: 15%;
    top: 71%;
    width: 21%;
  }
  .result-prize-pc-2 {
    top: 72.3%;
    width: 19%;
    left: 32%;
  }
  .result-prize-pc-3 {
    top: 74.3%;
    width: 9%;
    left: 53.6%;
  }
  .result-prize-pc-4 {
    top: 71%;
    width: 27%;
    left: 61.3%;
  }

  /* 재도전 버튼 */
  #screen-result #btn-retry {
    /* TODO: 위치 설정 필요 */
  }

  /* 영상 재생 버튼 3개 — 가로 배치 */
  #screen-result #btn-video-1 {
    top: 58.8%; /* TODO: 조정 필요 */
    left: 21.5%;
    width: 19%;
    height: 6.4%;
  }
  #screen-result #btn-video-2 {
    top: 58.8%; /* TODO: 조정 필요 */
    left: 40.5%;
    width: 19%;
    height: 6.4%;
  }
  #screen-result #btn-video-3 {
    top: 58.8%; /* TODO: 조정 필요 */
    left: 60.5%;
    width: 19%;
    height: 6.4%;
  }

  /* ── PC 전용: 경품 응모하기 버튼 그룹 (1133×380) ── */
  .result-register-group-pc {
    top: 80.1%; /* TODO: 조정 필요 */
    left: 20.7%; /* (1920-1133)/2/1920 */
    width: 59%; /* 1133/1920 */
  }

  #screen-result #btn-result-register-pc {
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
  }

  /* ── PC 전용: 공유하기 버튼 그룹 (1133×384) ── */
  .result-share-group-pc {
    top: 87.3%; /* TODO: 조정 필요 */
    left: 20.7%; /* (1920-1133)/2/1920 */
    width: 59%; /* 1133/1920 */
  }

  #screen-result #btn-result-share-pc {
    top: 35%;
    left: 5%;
    width: 90%;
    height: 90%;
  }
}

/* ==========================================================================
   [POPUP] 등록 팝업
   ========================================================================== */

.popup-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  padding: 20px;
}

.popup-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.popup-box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 36px 28px 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.popup-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #555;
  line-height: 1;
}

.popup-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: #111;
  margin-bottom: 8px;
  text-align: center;
}

.popup-desc {
  font-size: 0.85rem;
  color: #555;
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.6;
}

.popup-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.popup-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #333;
  margin-bottom: -4px;
}

.popup-input {
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

.popup-input:focus {
  border-color: #e02020;
}

.popup-submit {
  margin-top: 8px;
  background: #e02020;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

.popup-submit:active {
  background: #b01010;
}

.popup-privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 2px;
}

.popup-privacy-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: #333;
  cursor: pointer;
  flex: 1;
}

.popup-privacy-chk {
  width: 18px;
  height: 18px;
  accent-color: #e02020;
  cursor: pointer;
  flex-shrink: 0;
}

.popup-privacy-required {
  color: #e02020;
  font-weight: 700;
}

.popup-privacy-detail {
  background: none;
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
}

.popup-privacy-text {
  font-size: 0.78rem;
  color: #555;
  background: #f5f5f5;
  border-radius: 6px;
  padding: 10px 12px;
  line-height: 1.8;
  margin-bottom: 4px;
}