:root {
  --ink: #f4f2eb;
  --muted: rgba(244, 242, 235, 0.62);
  --accent: #d8ff42;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* 이동 모션용 — --ease-out은 시작 속도가 선형의 6배라 정지 상태에서 출발하는 슬라이드가 튀어 보인다 */
  --ease-slide: cubic-bezier(0.4, 0, 0.2, 1);

  /* SCENE_SPEC §3 — app.js의 SCENE 값이 부팅 시 덮어쓴다. 여기 값은 no-JS 폴백. */
  --canvas-w: 1920;
  --canvas-h: 1217;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --responsive-popup-margin-x: 3.125rem; /* 좌우 50px @ 16px root */
  --responsive-popup-margin-y: 0.625rem; /* 상하 10px @ 16px root */
}

/* 현대 산스 헤드 KR — 기본 폰트는 Regular(400) */

@font-face {
  font-family: "Hyundai Sans Head KR";
  src: url("./assets/fonts/HYUNDAISANSHEADKROTFLIGHT.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hyundai Sans Head KR";
  src: url("./assets/fonts/HYUNDAISANSHEADKROTFREGULAR.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hyundai Sans Head KR";
  src: url("./assets/fonts/HYUNDAISANSHEADKROTFMEDIUM.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050605;
}

body {
  color: var(--ink);
  font-family: "Hyundai Sans Head KR", Pretendard, "SUIT", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  padding: 0 !important;
  margin: -0.0625rem !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*
 * 앱 셸 — 뷰포트 전체를 채우고, 씬 내부 이미지 폭은 JS에서 1:1.9로 제한한다.
 * 100vh 다음 100dvh 순서 유지(구형 폴백, SCENE_SPEC §8).
 */
.app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  isolation: isolate;
  overflow: hidden;
  background: #050605;
}

main,
.view {
  position: absolute;
  inset: 0;
}

/* 뷰 전환 — 페이지 이동은 디졸브(크로스페이드) */
.view {
  visibility: hidden;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--ease-out), visibility 600ms;
}

.view.is-active {
  visibility: visible;
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
}

/* 로딩 스크린 — 전 에셋 프리로드 동안 블랙 화면, 완료 시 디졸브로 씬 등장 */

/*
 * 인트로 랜딩(v0.48) — 프리로드 완료 후 로더가 걷히면 보인다. 라이트가 숨쉬듯 펄스(디밍)하다
 * 3초 뒤 ENTER가 디졸브 등장하며 펄스가 멈추고 라이트 완전 ON. 어디를 터치해도 홈으로.
 * 반응형: 높이를 항상 채우는 cover — 화면이 좁으면 좌우 크롭, 스테이지는 1912×880 좌표계(%).
 */
.landing {
  position: fixed;
  inset: 0;
  /* iOS의 fixed 박스는 주소창과 무관한 큰 뷰포트로 잡힐 수 있어 .app과 같은 dvh 패턴을 명시한다
     (100vh 먼저 → 100dvh 순서 유지, SCENE_SPEC §8) */
  height: 100vh;
  height: 100dvh;
  z-index: 40; /* 홈 위, 로더(50) 아래 */
  overflow: hidden;
  background: #000;
  opacity: 1;
  transition: opacity 600ms var(--ease-out);
}

.landing.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.landing[hidden] {
  display: none;
}

.landing__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 폴백: 높이 100% 고정(2442/1124). vh는 모바일에서 주소창이 보일 때도 큰 뷰포트 기준이라
     실제 보이는 높이보다 커져 상하가 잘린다 → dvh 병기 후, 아래에서 부모 높이 기준으로 덮는다. */
  width: 217.2598vh;
  width: 217.2598dvh;
  aspect-ratio: 2442 / 1124;
  transform: translate(-50%, -50%);
}

/* 부모(.landing, fixed inset:0)의 실제 높이에 맞추는 게 가장 정확 — 비율에 따라 좌우만 크롭된다 */
@supports (aspect-ratio: 2442 / 1124) {
  .landing__stage {
    width: auto;
    height: 100%;
  }
}

.landing__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
}

.landing__enter {
  position: absolute;
  top: 87.0107%; /* 실측 (1095, 978) 258×44 */
  left: 44.8403%;
  width: 10.5651%;
  opacity: 0;
  transition: opacity 800ms var(--ease-out);
  user-select: none;
}

.landing.is-enter .landing__enter {
  opacity: 1; /* 배경 등장 0.5초 뒤 디졸브 */
}

/* 팝업 리소스 게이트 — 진입 시 리소스가 덜 로드됐을 때만 잠깐 표시(딤 + LOADING) */
/* 딤·블러는 팝업 백드롭과 같은 값 — 로딩 단계에서 이미 배경이 완성돼 팝업이 그 위로 떠오른다 */
.resource-loading {
  position: fixed;
  inset: 0;
  z-index: 70; /* 콘텐츠 팝업 위, 준비중(80) 아래 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  opacity: 0;
  transition: opacity 200ms linear, background-color 200ms linear, backdrop-filter 200ms linear,
    -webkit-backdrop-filter 200ms linear;
}

.resource-loading.is-open {
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(0.425625rem);
  backdrop-filter: blur(0.425625rem);
  opacity: 1;
}

.resource-loading[hidden] {
  display: none;
}

.resource-loading__text {
  margin: 0;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  animation: loader-blink 1.6s ease-in-out infinite;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  background: #050605;
  opacity: 1;
  transition: opacity 800ms var(--ease-out);
}

.loader.is-done {
  opacity: 0;
  pointer-events: none;
}

.loader__text {
  margin: 0;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  animation: loader-blink 1.6s ease-in-out infinite;
}

.loader__progress {
  margin: 0;
  color: var(--muted);
  font-family: Consolas, "SF Mono", monospace;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}

@keyframes loader-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* 해상도 표시 — 개발/QA용, 좌상단 고정 */

.res-indicator {
  position: fixed;
  top: 0.25rem;
  left: 0.375rem;
  z-index: 90; /* 콘텐츠 팝업(70)·준비중(80) 위 — 카메라 화면에서도 진단이 보여야 한다 */
  margin: 0;
  color: #2eff6e;
  font-family: Consolas, "SF Mono", monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* 컷아웃 상태는 해상도 표시 바로 아래 줄에 — 실패 사유가 길어 줄바꿈을 허용한다 */
.res-indicator--cutout {
  top: 1.25rem;
  max-width: min(80vw, 22rem);
  color: #7fd4ff;
  font-size: 0.625rem;
  word-break: break-all;
}

/* 우상단 개발 도구 — 배포 QR 확인용 */

.debug-tools {
  position: fixed;
  top: max(0.5rem, var(--safe-top));
  right: max(0.5rem, var(--safe-right));
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3125rem;
  font-family: Consolas, "SFMono-Regular", "Courier New", monospace;
}

.debug-tools__toggle {
  min-width: 3.625rem;
  min-height: 1.875rem;
  padding: 0 0.5625rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 0.125rem;
  background: rgba(0, 0, 0, 0.78);
  color: #d5d5d5;
  font-size: 0.625rem;
  letter-spacing: 0.07em;
}

.debug-tools__panel {
  width: 9.25rem;
  padding: 0.5625rem;
  border: 1px solid #454545;
  border-radius: 0.125rem;
  background: #111;
}

.debug-tools__panel[hidden] {
  display: none;
}

.debug-tools__panel p {
  margin: 0 0 0.5rem;
  color: #777;
  font-size: 0.5625rem;
}

/* 컷아웃 진단 줄 — 실패 사유가 길 수 있어 줄바꿈을 허용한다 */
.debug-tools__status {
  margin: 0.375rem 0 0 !important;
  max-width: 11rem;
  color: #9ad !important;
  word-break: break-all;
}

.debug-tools__panel button {
  width: 100%;
  min-height: 2.25rem;
  border: 1px solid #555;
  border-radius: 0.125rem;
  background: #1b1b1b;
  color: #ddd;
  font-family: inherit;
  font-size: 0.6875rem;
}

/* USP 스테이지 점프 버튼 줄 — 5개를 한 줄에 압축 */
.debug-tools__row {
  display: flex;
  gap: 0.1875rem;
  margin-top: 0.375rem;
}

.debug-tools__row button {
  min-width: 0;
  min-height: 1.75rem;
  padding: 0;
  font-size: 0.5625rem;
}

.qr-dialog {
  position: fixed;
  inset: 0;
  z-index: 38;
  display: grid;
  place-items: center;
  padding: max(0.875rem, var(--safe-top)) max(0.875rem, var(--safe-right)) max(0.875rem, var(--safe-bottom)) max(0.875rem, var(--safe-left));
}

.qr-dialog[hidden] {
  display: none;
}

.qr-dialog__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.78);
}

.qr-dialog__panel {
  position: relative;
  width: min(88vw, 19.375rem);
  max-height: calc(100dvh - 1.75rem);
  padding: 0.875rem;
  overflow: auto;
  border: 1px solid #4d4d4d;
  border-radius: 0.125rem;
  background: #111;
  font-family: Consolas, "SFMono-Regular", "Courier New", monospace;
}

.qr-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid #303030;
}

.qr-dialog__header p {
  margin: 0;
  color: #ddd;
  font-size: 0.75rem;
}

.qr-dialog__close {
  min-width: 44px;
  min-height: 2rem;
  color: #aaa;
  font-family: inherit;
  font-size: 0.6875rem;
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

.qr-dialog__panel img {
  display: block;
  width: min(100%, 13.75rem);
  height: auto;
  margin: 0.875rem auto 0.625rem;
  background: #fff;
}

.qr-dialog__panel a {
  display: block;
  overflow: hidden;
  color: #aaa;
  font-size: 0.625rem;
  text-align: center;
  text-decoration: underline;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) {
  .debug-tools button:hover,
  .qr-dialog__close:hover,
  .qr-dialog__panel a:hover {
    color: #fff;
  }

  .debug-tools__panel button:hover {
    border-color: #888;
    background: #252525;
  }
}

@media (max-height: 420px) {
  .debug-tools {
    top: 0.3125rem;
    right: 0.4375rem;
  }

  .debug-tools__toggle {
    min-height: 1.75rem;
  }

  .qr-dialog__panel {
    width: min(70vw, 24.375rem);
    padding: 0.625rem 0.75rem;
  }

  .qr-dialog__panel img {
    width: min(100%, 11.25rem);
    margin: 0.5rem auto 0.3125rem;
  }

  .qr-dialog__header {
    padding-bottom: 0.3125rem;
  }
}

/* 회전 안내 — 가로 전용 경험이므로 세로 화면을 차단. 정사각(폴더블)은 허용 */

.orientation-gate {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  background: #050605;
  text-align: center;
}

@media (max-aspect-ratio: 99/100) {
  .orientation-gate {
    display: flex;
  }
}

.orientation-gate__content h2 {
  margin: 0.875rem 0 0.375rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.orientation-gate__content > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* 미연결 홈 오브젝트 공통 안내 — 개발 상태 패널 */

.coming-soon {
  position: fixed;
  inset: 0;
  z-index: 80; /* 콘텐츠 팝업(z-70) 안에서도 호출되므로 그 위에 뜬다 */
  display: grid;
  place-items: center;
  padding: max(1rem, var(--safe-top)) max(1rem, var(--safe-right)) max(1rem, var(--safe-bottom)) max(1rem, var(--safe-left));
  opacity: 0;
  transition: opacity 140ms linear;
}

.coming-soon[hidden] {
  display: none !important;
}

.coming-soon.is-open {
  opacity: 1;
}

.coming-soon__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.coming-soon__card {
  position: relative;
  display: flex;
  width: min(88vw, 26.25rem);
  flex-direction: column;
  padding: 1.25rem;
  border: 1px solid #454545;
  border-radius: 0.125rem;
  background: #111;
  color: #e8e8e8;
  font-family: Consolas, "SFMono-Regular", "Courier New", monospace;
  text-align: left;
}

.coming-soon__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.8125rem;
  border-bottom: 1px solid #303030;
}

.coming-soon__status {
  margin: 0;
  color: #8c8c8c;
  font-size: 0.625rem;
  letter-spacing: 0.02em;
}

.coming-soon__close {
  min-width: 44px;
  min-height: 2rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #9b9b9b;
  font-family: inherit;
  font-size: 0.6875rem;
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

.coming-soon__card h2 {
  margin: 1.4375rem 0 0;
  color: #f1f1f1;
  font-family: "Hyundai Sans Head KR", Pretendard, sans-serif;
  font-size: clamp(1.4375rem, 3.2vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.coming-soon__description {
  margin: 0.5rem 0 0;
  color: #999;
  font-family: "Hyundai Sans Head KR", Pretendard, sans-serif;
  font-size: 0.75rem;
  line-height: 1.6;
  word-break: keep-all;
}

.coming-soon__description strong {
  color: #cfcfcf;
  font-weight: 500;
}

.coming-soon__confirm {
  align-self: flex-end;
  min-width: 6.5rem;
  min-height: 44px;
  margin-top: 1.5rem;
  padding: 0 1.125rem;
  border: 1px solid #555;
  border-radius: 0.125rem;
  background: #1b1b1b;
  color: #ddd;
  font-family: inherit;
  font-size: 0.6875rem;
}

.coming-soon button:focus-visible {
  outline: 1px solid #888;
  outline-offset: 2px;
}

@media (hover: hover) {
  .coming-soon__close:hover {
    color: #fff;
  }

  .coming-soon__confirm:hover {
    border-color: #888;
    background: #252525;
    color: #fff;
  }
}

@media (max-height: 420px) {
  .coming-soon__card {
    width: min(78vw, 27.5rem);
    padding: 1rem 1.125rem;
  }

  .coming-soon__card h2 {
    margin-top: 0.9375rem;
    font-size: 1.4375rem;
  }

  .coming-soon__description {
    margin-top: 0.3125rem;
    font-size: 0.6875rem;
  }

  .coming-soon__confirm {
    margin-top: 0.9375rem;
  }
}

/*
 * 콘텐츠별 공통 팝업 영역
 * 콘텐츠 구성은 각 팝업이 소유하고, 이 셸은 800×460 좌표계와 반응형 스케일만 공유한다.
 * JS가 좌우 3.125rem(50px), 상하 0.625rem(10px)을 기준으로 스케일을 계산한다.
 */

/*
 * 등장은 배경(백드롭) → 콘텐츠 순서로 나눠 진행한다. 컨테이너에 opacity 전환을 걸면
 * 백드롭까지 함께 서서히 진해져 배경이 팝업보다 늦게 완성된다(v0.77) — 컨테이너는 표시만 담당하고
 * 페이드는 백드롭(250ms)과 콘텐츠(.responsive-popup__motion, 250ms 뒤 500ms)가 각자 처리한다.
 */
.responsive-popup {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow: hidden;
}

.responsive-popup[hidden] {
  display: none !important;
}

/* iOS 길게 누르기 저장 콜아웃 차단 (Android 컨텍스트 메뉴는 JS contextmenu 차단) */
.responsive-popup img {
  -webkit-touch-callout: none;
}

/*
 * 딤·블러는 콘텐츠보다 먼저 250ms에 완성된다(사용자 확정) — backdrop-filter는 부모 opacity를
 * 따라가지 않으므로 값 자체를 전환해야 한다.
 */
.responsive-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background-color 220ms linear, backdrop-filter 220ms linear, -webkit-backdrop-filter 220ms linear;
}

.responsive-popup.is-open .responsive-popup__backdrop {
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(0.425625rem);
  backdrop-filter: blur(0.425625rem);
  transition: background-color 250ms var(--ease-out), backdrop-filter 250ms var(--ease-out), -webkit-backdrop-filter 250ms var(--ease-out);
}

/*
 * 리소스 로딩 오버레이를 거쳐 열린 경우 — 그 오버레이가 이미 같은 딤·블러를 깔아 놨으므로
 * 백드롭은 전환 없이 최종값으로 이어받는다(다시 0부터 올리면 한 번 풀렸다 걸리는 것처럼 보인다).
 */
.responsive-popup.is-backdrop-instant .responsive-popup__backdrop {
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(0.425625rem);
  backdrop-filter: blur(0.425625rem);
  transition: none;
}

.responsive-popup__scale {
  --responsive-popup-scale: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50rem;
  height: 28.75rem;
  transform: translate(-50%, -50%) scale(var(--responsive-popup-scale));
  transform-origin: center;
  will-change: transform;
}

.responsive-popup__motion {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.96);
  transform-origin: center;
  transition:
    opacity 220ms linear,
    transform 220ms var(--ease-out);
  will-change: opacity, transform;
}

.responsive-popup.is-open .responsive-popup__motion {
  opacity: 1;
  transform: scale(1);
  /* 배경(250ms)이 깔린 뒤에 콘텐츠가 떠오른다 — 팝업이 보이는 시점엔 블러가 이미 완성돼 있다 */
  transition:
    opacity 500ms var(--ease-out) 250ms,
    transform 500ms var(--ease-out) 250ms;
}

/* 로딩 오버레이를 거친 경우 배경은 이미 완성 상태라 콘텐츠가 기다릴 필요가 없다 */
.responsive-popup.is-backdrop-instant.is-open .responsive-popup__motion {
  transition:
    opacity 500ms var(--ease-out),
    transform 500ms var(--ease-out);
}

.responsive-popup__content {
  display: block;
  width: 50rem;
  height: 28.75rem;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.responsive-popup__close {
  position: absolute;
  top: -0.375rem;
  left: calc(100% + 0.375rem);
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  touch-action: manipulation;
}

.responsive-popup__close img {
  display: block;
  width: 2rem;
  height: 2rem;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.responsive-popup__close:focus-visible {
  outline-color: #fff;
  outline-offset: -0.25rem;
}

@media (hover: hover) {
  .responsive-popup__close:hover img {
    filter: brightness(1.25);
  }
}

/*
 * 이벤트 팝업(표지판 진입) — 전용 1000×562(62.5×35.125rem) 캔버스(v0.39).
 * 콘텐츠(800:460)는 캔버스 안에서 상하 1.5625rem(25px) 여백을 확보한 32rem 높이 박스로 배치.
 * 여백이 캔버스와 함께 비례 스케일되므로 어떤 화면에서도 창에 꽉 차지 않는 팝업 느낌이 유지된다.
 * 콘텐츠 폭 = 32rem × 800/460 = 55.652rem, 좌우는 비율이 결정(사용자 확정).
 */
.catalog-popup .responsive-popup__scale {
  width: 62.5rem;
  height: 35.125rem;
}

.catalog-popup .responsive-popup__content {
  position: absolute;
  top: 1.5625rem;
  left: 3.424rem; /* (62.5 - 55.652) / 2 */
  width: 55.652rem;
  height: 32rem;
}

.catalog-popup .responsive-popup__close {
  top: 1.1875rem; /* 비주얼 상단을 콘텐츠 상단(1.5625rem)에 정렬 — 터치 박스가 0.375rem 위로 넓음 */
  left: 59.451rem; /* 콘텐츠 우측(59.076rem) + 0.375rem — 비주얼 간격 0.75rem 유지 */
}

/*
 * 원작 소개(모선, v0.78) — 팝업 프레임을 버리고 화면을 꽉 채우는 세로 스크롤(사용자 확정).
 * 콘텐츠는 폭 100%로 늘어나고, 닫기 X만 우상단에 떠 있다.
 */
.intro-view {
  position: fixed;
  inset: 0;
  /* 스크롤 영역을 "지금 보이는 화면"으로 못박는다(v0.79) — inset:0만 두면 fixed 박스가 주소창과
     무관한 큰 뷰포트로 잡혀 콘텐츠가 화면 밖으로 나가고, 안드로이드가 이를 문서 스크롤로 처리해
     스크롤할 때마다 주소창이 나타났다 사라진다(랜딩 #77과 같은 함정). */
  height: 100vh;
  height: 100dvh;
  z-index: 70;
  background: #050605;
  opacity: 0;
  transition: opacity 220ms linear;
}

.intro-view[hidden] {
  display: none !important;
}

.intro-view.is-open {
  opacity: 1;
  transition: opacity 500ms var(--ease-out);
}

/*
 * 네이티브 스크롤을 완전히 끈다(v0.80) — 화면 전체를 덮는 스크롤 컨테이너는 안드로이드 Chrome이
 * "주 스크롤러"로 승격시켜, 문서 스크롤이 없어도 주소창을 토글한다(CSS로는 막을 수 없음).
 * 대신 터치·휠 입력을 JS가 받아 콘텐츠를 transform으로 직접 움직인다.
 */
.intro-view__scroll {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow: hidden;
  touch-action: none; /* 브라우저가 스크롤 제스처로 해석하지 못하게 한다 */
  cursor: grab;
}

.intro-view__scroll.is-dragging {
  cursor: grabbing;
}

.intro-view__content {
  display: block;
  width: 100%; /* 화면 폭을 꽉 채운다 */
  height: auto;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

/* 시안 실측(2000×1124 2x) — X 획 중심 (964,34), 원 지름 31.5px, 우측 20.25·상단 18.25px */
.intro-view__close {
  position: absolute;
  top: 1.1406rem;
  right: 1.2656rem;
  width: 1.9688rem;
  height: 1.9688rem;
  padding: 0;
  border: 0;
  background: none;
}

/* 물리 터치 최소 크기(SCENE_SPEC §6) — 비주얼 위치를 밀지 않도록 히트만 중앙에서 넓힌다 */
.intro-view__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.intro-view__close img {
  display: block;
  width: 100%;
  height: 100%;
}

@media (hover: hover) {
  .intro-view__close:hover img {
    filter: brightness(1.15);
  }
}

/*
 * 브랜드 필름 팝업(우측 사이드미러, v0.41) — 전용 1000×562 캔버스, 1.png 실측 배치.
 * 플레이어 840×486은 실측 중심 (504.75, 274.75) 기준, X는 실측 중심 (923, 69).
 */
.film-popup .responsive-popup__scale {
  width: 62.5rem;
  height: 35.125rem;
}

.film-popup__frame {
  position: absolute;
  top: 2.40625rem; /* 실측 중심 y 274.75 − 236.25 = 38.5px */
  left: 5.297rem; /* 504.75 − 420 ≈ 84.75px */
  width: 52.5rem; /* 840px */
  height: 29.53125rem; /* 472.5px — 정확한 16:9. 486px(1.728:1)이면 유튜브가 상하 블랙바를 넣는다 */
  border: 0;
  border-radius: 0.75rem;
  background: #000;
}

.film-popup .responsive-popup__close {
  /* 시안 규칙: X 원 상단 = 플레이어 상단 라인. 플레이어 top 38.5px에 비주얼 상단 정렬(터치 박스 0.375rem 바깥) */
  top: 2.03125rem; /* 38.5 − 6 = 32.5px */
  left: 57.734375rem; /* 가로는 실측 중심 945.75 유지 */
}

/*
 * 이벤트 팝업 스크롤 영역(v0.40) — 배경(bg) 안쪽 6px(0.375rem) 인셋 = 마스크 에셋(788×448@1x) 범위.
 * 콘텐츠(550px 폭)는 5.png 실측 좌측 65px(콘텐츠 박스 기준) 오프셋, 세로는 맨 위에서 시작해
 * 아래로 스크롤. 마스크는 알파 비네트 오버레이(상하 가장자리 페이드) — 시안 에셋 그대로 사용.
 */
.event-popup__viewport {
  /* 클립 영역 = 프레임 보더 라인 안쪽 경계(실측 1x: L10.5 T12.5 R789 B446.25)에서 다시 5px 안쪽.
   * 디자인 px → rem 환산 계수 s = 55.652/800 = 0.069565 (콘텐츠 박스 기준). */
  position: absolute;
  top: 2.7799rem; /* 1.5625 + (12.5+5)×s */
  left: 4.5023rem; /* 3.424 + (10.5+5)×s */
  width: 53.4608rem; /* (789−10.5−10)×s */
  height: 29.4782rem; /* (446.25−12.5−10)×s */
  overflow: hidden;
  border-radius: 0.5rem;
}

.event-popup__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* 스크롤바 숨김(사용자 확정) */
  -ms-overflow-style: none;
  overscroll-behavior: none; /* iOS 러버밴드(끝에서 띠용 바운스) 제거 */
  touch-action: pan-y;
  cursor: grab;
}

.event-popup__scroll::-webkit-scrollbar {
  display: none;
}

.event-popup__scroll.is-dragging {
  cursor: grabbing;
}

.event-popup__content-img {
  display: block;
  width: 34.375rem; /* 550px — 원본 2배수 1100 */
  height: auto;
  margin: 0 0 1.25rem 3.4435rem; /* 텍스트 좌측 실측 65px 유지(65×s − 뷰포트 좌 인셋) + 하단 여유 */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.event-popup__mask {
  /* 비네트 마스크는 시안 설계 박스(배경 안쪽 6px, 788×448@1x)에 고정 — 클립 뷰포트와 분리 */
  position: absolute;
  top: 1.9375rem;
  left: 3.799rem;
  width: 54.902rem;
  height: 31.25rem;
  pointer-events: none; /* 마스크는 연출 전용 — 아래 스크롤 조작을 막지 않는다 */
  user-select: none;
  -webkit-user-drag: none;
}

/*
 * 포스터 촬영 팝업(룸미러) — 전용 1000×562(62.5×35.125rem) 캔버스(v0.32).
 * 좌표는 1.png 시안 픽셀 매칭: 프리뷰 (150,31) 700×440(에셋 2배수 1400×880), 화살표 좌우
 * 가장자리 y236 90×90, 메뉴 중앙 y467, X (862,31) 캔버스 안쪽.
 * 프레임 전환은 슬라이드 캐러셀(400ms ease-out) — 모션 최소화 환경에선 크로스페이드 대체.
 */
.photo-popup .responsive-popup__scale {
  width: 62.5rem;
  height: 35.125rem;
}

.photo-popup .responsive-popup__close {
  top: 1.5625rem;
  left: 53.5rem; /* 시안 X (862,31) — 전용 캔버스 안쪽 배치 */
}

.photo-popup__preview {
  position: absolute;
  top: 1.9375rem;
  left: 9.375rem;
  width: 43.75rem;
  height: 27.5rem;
  padding: 0;
  overflow: hidden; /* 슬라이드가 프리뷰 박스 밖으로 나가지 않게 클립 */
}

.photo-popup__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateX(103%);
  transition: transform 400ms var(--ease-slide);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.photo-popup__select.is-current {
  transform: translateX(0);
}

.photo-popup__select.is-left {
  transform: translateX(-103%);
}

.photo-popup__select.is-snap {
  transition: none;
}

.photo-popup__arrow {
  position: absolute;
  top: 14.75rem;
  width: 5.625rem;
  height: 5.625rem;
  padding: 0;
  transition: filter 150ms var(--ease-out);
}

.photo-popup__arrow--prev { left: 0; }
.photo-popup__arrow--next { left: 56.875rem; }

.photo-popup__arrow img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

@media (hover: hover) {
  .photo-popup__arrow:hover,
  .photo-popup__menu-hits button:hover {
    filter: brightness(1.35);
  }
}

.photo-popup__menu {
  position: absolute;
  top: 29.1875rem;
  left: 19.1875rem;
  width: 24.125rem;
  height: 6.25rem;
}

.photo-popup__menu-img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 6.25rem;
  width: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.photo-popup__menu-img.is-current {
  opacity: 1;
}

.photo-popup__menu-hits {
  position: absolute;
  inset: 0;
  display: flex;
}

.photo-popup__menu-hits button {
  flex: 1 1 0;
  height: 100%;
}

/* 팝업 내 3모드(선택→카메라→결과) — opacity+visibility 전환 */
.photo-mode {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--ease-out), visibility 300ms;
}

.photo-mode.is-active {
  opacity: 1;
  visibility: visible;
}

/* 카메라 스테이지 — 프리뷰와 동일한 박스(1400:880 통일 비율), 비디오는 cover + 미러 */
.photo-camera-stage {
  position: absolute;
  top: 1.9375rem;
  left: 9.375rem;
  width: 43.75rem;
  height: 27.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #101010;
}

.photo-camera__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* 셀카 미러 — 저장도 동일하게 미러(합성 시 반전 유지) */
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}

.photo-camera__video.is-live {
  opacity: 1;
}

/*
 * 인물 컷아웃(v0.81) — 비디오와 같은 자리에 겹치고, 세그멘테이션이 준비되면 비디오를 대신한다.
 * 미러는 비디오와 동일하게 CSS에서 처리하므로 캔버스에는 원본 방향으로 그린다.
 */
.photo-camera__cutout {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}

.photo-camera__cutout.is-live {
  opacity: 1;
}

.photo-camera__cutout[hidden] {
  display: none;
}

/*
 * 컷아웃이 살아 있는 동안 원본 비디오는 캔버스 뒤로 보낸다.
 * ⚠ opacity:0으로 숨기면 iOS Safari가 비디오 렌더링을 멈춰 캔버스로 옮겨 그린 프레임이 비는 일이 있다 —
 * 화면에서 안 보이게 하는 건 위에 덮인 캔버스가 담당한다.
 */
.photo-camera-stage.has-cutout .photo-camera__video {
  z-index: 0;
}

.photo-camera-stage.has-cutout .photo-camera__cutout {
  z-index: 1;
}

/* 프레임·카운트다운·플래시·안내는 컷아웃 캔버스(z1) 위에 얹혀야 한다 — z-index가 없으면 캔버스에 가려진다 */
.photo-camera__frame,
.photo-camera__count,
.photo-camera__flash,
.photo-camera__fallback {
  z-index: 2;
}

.photo-camera__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.photo-camera__frame.is-current {
  opacity: 1;
}

.photo-camera__count {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  color: #fff;
  font-size: 6rem;
  font-weight: 700;
  text-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
}

.photo-camera__count[hidden] {
  display: none;
}

.photo-camera__flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease-out;
}

.photo-camera__flash.is-flash {
  opacity: 1;
  transition: none;
}

.photo-camera__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: rgba(10, 10, 12, 0.9);
  text-align: center;
}

.photo-camera__fallback[hidden] {
  display: none;
}

.photo-camera__fallback p {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.6;
}

.photo-camera__retry {
  min-width: 9rem;
  min-height: 2.75rem;
  border: 1px solid rgba(244, 242, 235, 0.55);
  border-radius: 0.375rem;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.photo-camera__back {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.45);
}

.photo-camera__back svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 셔터 — 하단 중앙 원형(에셋 확보 전 CSS 임시) */
.photo-camera__shutter {
  position: absolute;
  bottom: 0.9rem;
  left: 50%;
  width: 3.9rem;
  height: 3.9rem;
  border: 0.25rem solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
  transition: transform 120ms var(--ease-out), background 120ms linear, opacity 300ms var(--ease-out);
}

.photo-camera__shutter:active {
  background: rgba(255, 255, 255, 0.55);
  transform: translateX(-50%) scale(0.92);
}

.photo-camera__shutter:disabled {
  opacity: 0.5;
}

/* 누르는 즉시 디졸브로 숨김 — :disabled(0.5)보다 뒤에 두어 우선 적용 */
.photo-camera__shutter.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* 결과 — 합성 미리보기 + 다시 찍기/공유 */
.photo-result__image {
  position: absolute;
  top: 1.9375rem;
  left: 9.375rem;
  width: 43.75rem;
  height: 27.5rem;
  border-radius: 0.5rem;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
}

.photo-result__actions {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  display: flex;
  gap: 0.9rem;
  transform: translateX(-50%);
}

.photo-result__button {
  min-width: 9.5rem;
  min-height: 2.9rem;
  border: 1px solid rgba(244, 242, 235, 0.55);
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.6);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
}

.photo-result__button--primary {
  border-color: rgba(111, 232, 255, 0.8);
  color: #6fe8ff;
}

@media (hover: hover) {
  .photo-camera__back:hover,
  .photo-camera__shutter:hover,
  .photo-result__button:hover {
    filter: brightness(1.25);
  }
}

/*
 * 히든 챌린지 랜딩 — 좌측 사이드미러 진입 풀페이지 (SCENE_SPEC v0.20).
 * USP 팝업과 동일한 방식: 배경 포함 1000×562(62.5rem×35.125rem) 고정 비율 캔버스를
 * 화면에 맞춰 균일 스케일(contain)만 한다. 반응형 재배치·크롭 없음, 남는 영역은 블랙.
 * EXIT는 디자인 스테이지 우상단 기준. 좌표는 1.webp 합성 시안 실측값.
 */
/*
 * 히든 챌린지 팝업(좌미러, v0.46) — 공통 셸(800×460)로 전환(사용자 확정: 전부 팝업 안).
 * 1000×562 스테이지를 0.8 고정 스케일로 담아 비율 유지(50rem 폭 정확히 일치, 상하 0.325rem 여백).
 * 스크린·퀴즈·QR 좌표계는 기존 그대로 재사용한다.
 */
/*
 * 히든 챌린지도 USP와 같은 태블릿 프레임(v0.92): 전용 1000×562 캔버스 + 800×460 좌표계를 창 안에서
 * 같은 배율(1.052609)로. 800:460은 창(720:420)보다 살짝 납작해 세로 3.5px 여유를 위아래로 나눈다.
 */
.easter-popup .responsive-popup__scale {
  width: 62.5rem;
  height: 35.125rem;
}

/* v0.93 — USP 창과 같은 박스(720:420)·같은 라운드. 800×460 콘텐츠는 스테이지 스케일을 올려 cover(좌우 크롭). */
.easter-popup__window {
  position: absolute;
  top: 2.212rem;
  left: 4.9348rem;
  width: 50rem;
  height: 29.166667rem;
  overflow: hidden;
  border-radius: 1rem;
  transform: scale(1.052609);
  transform-origin: 0 0;
}

.easter-popup .responsive-popup__close {
  top: 0.837rem;
  left: 59.3334rem;
}

.easter-popup {
  /* 1000×562 스테이지가 창(800×466.67)을 cover — 466.67/562. 좌우 15.2px(창 좌표)씩 잘린다(v0.93, 사용자 확정) */
  --easter-landing-scale: 0.830368;
}

/* 스크린(step0·퀴즈1~4·step5) — 600ms 디졸브로 겹쳐 전환 */
.easter-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms var(--ease-out), visibility 600ms;
}

.easter-screen.is-active {
  opacity: 1;
  visibility: visible;
}

/*
 * 배경도 1000×562 스테이지 안에 두어 UI와 한 덩어리로 스케일한다 — USP 팝업과 동일한
 * "고정 비율 캔버스 + 균일 스케일" 방식. 크롭·반응형 재배치 없음, 남는 영역은 블랙 레터박스.
 * 배경 속 문구와 버튼 좌표가 어떤 화면 비율에서도 어긋나지 않는다.
 */
.easter-screen .easter-landing__stage {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.easter-screen--step0 .easter-landing__stage { background-image: url("./assets/easteregg/popup-bg.webp"); }
.easter-screen--game .easter-landing__stage { background: #2f2d39; overflow: hidden; } /* 1.png 하단 밴드 실측 rgb(47,45,57) — bg(484px) 아래 영역이 팝업 몸체로 이어져 보이게 */
.easter-screen--step5 .easter-landing__stage { background-image: url("./assets/easteregg/step5bg.webp"); }

.easter-landing__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62.5rem;
  height: 35.125rem;
  transform: translate(-50%, -50%) scale(var(--easter-landing-scale));
  transform-origin: center;
}

/* 공통 크롬(EXIT) — 스크린 위에 항상 떠 있는 스테이지 레이어 */
.easter-landing__chrome {
  pointer-events: none;
  z-index: 5;
}

.easter-landing__chrome .easter-landing__exit {
  pointer-events: auto;
}

/*
 * 액셀 타이밍 게임(v0.47) — 1000×562 스테이지 시안 실측 배치.
 * 마커는 JS(rAF 삼각파, 편도 1.6초)가 left를 직접 구동. 중앙 ±7.5% 구간이 PERFECT.
 */
.easter-game__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 62.5rem; /* 1000×484 — 하단 잔여 영역은 스테이지 배경색 */
  height: auto;
  user-select: none;
}

/* 닫히는 문 — 성공 오버레이와 같은 풀사이즈 문짝(123×347)이 우측 문(865) 뒤에 숨어 있다가
 * 왼쪽으로 슬라이드해 옆 문에 딱 붙은 닫힘 위치(742, 4)로 온다. 차량 위 오버레이(사용자 확정). */
.easter-game__door-close {
  position: absolute;
  top: 0.25rem;
  left: 50.9375rem; /* 닫힘 위치 x 815 — 44↔66 시안 diff 실측(빛 틈 시작점), 우측은 문 뒤로 겹침 */
  width: 7.6875rem;
  transform: translateX(3.125rem); /* 시작: 우측 문(865) 아래에 겹쳐 은닉 → 왼쪽 50px 슬라이드 */
  transition: transform 600ms var(--ease-slide);
  user-select: none;
  pointer-events: none;
}

.easter-screen--game .easter-landing__stage.is-gate-closed .easter-game__door-close {
  transform: translateX(0);
}

/* 차량 클립 — 문 라인(시안 실측 절단선 x 860, 빛 틈 끝 864) 이후는 하단 포함 전부 마스킹.
 * PERFECT 퇴장 시 차가 문 사이 틈에서 잘려 나가며 사라진다(사용자 확정). */
.easter-game__car-clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 53.875rem; /* 862px */
  height: 35.125rem;
  overflow: hidden;
  pointer-events: none;
}

.easter-game__car {
  position: absolute;
  top: 15.75rem; /* 실측: 시작 (80, 252) 181×118 */
  left: 5rem;
  width: 11.3125rem;
  transition: transform 1500ms var(--ease-slide);
  user-select: none;
}

.easter-game__car.is-perfect {
  transform: translateX(58.125rem); /* 열린 게이트 틈을 지나 화면 밖까지 — 930px */
  transition: transform 5000ms linear; /* 끝까지 등속, 훨씬 천천히(사용자 확정) — 0.186px/ms */
}

/* 우측 문짝 오버레이 — 배경에 그려진 문짝과 같은 자리(템플릿 매칭 865, 4)에 차량 위 레이어로
 * 덮어, PERFECT 때 차가 그 뒤로 사라지며 문 사이 틈으로 들어가는 연출을 만든다(사용자 확정) */
.easter-game__gate-cover {
  position: absolute;
  top: 0.25rem;
  left: 54.0625rem;
  width: 7.6875rem;
  user-select: none;
  pointer-events: none;
}

.easter-game__car.is-fail {
  transform: translateX(33.75rem); /* 닫힌 문 앞(실측 x 620)에서 정지 — 540px */
  transition: transform 2900ms linear; /* PERFECT와 같은 등속 0.186px/ms(사용자 확정) */
}

/* 드론 2기 — 차 출발과 동시에 왼쪽 밖에서 차 속도(0.186px/ms)와 같은 등속으로 바짝 뒤따라오다
 * 시안 실측 위치에 정지(사용자 확정). 시작 오프셋이 차와의 간격을 만든다(같은 속도라 간격 유지).
 * 진행 방향을 보도록 좌우 미러(원본 화염이 오른쪽에 그려져 있음). */
.easter-game__drone {
  position: absolute;
  opacity: 0;
  user-select: none;
}

.easter-game__drone--a {
  top: 7.8125rem; /* 실측 중심 (326, 163) — 뒤쪽 드론(차 좌측 326px 뒤에서 유지) */
  left: 14.96875rem;
  width: 10.8125rem;
  transform: translateX(-30.34375rem) scaleX(-1); /* 시작 x −246 */
  transition: transform 2610ms linear, opacity 300ms linear; /* 485.5px ÷ 0.186 */
}

.easter-game__drone--b {
  top: 5.09375rem; /* 실측 중심 (628, 154) — 앞쪽 드론(차 좌측 166px 뒤에서 유지) */
  left: 34.6875rem;
  width: 9.125rem;
  transform: translateX(-40.0625rem) scaleX(-1); /* 시작 x −86 */
  transition: transform 3446ms linear, opacity 300ms linear; /* 641px ÷ 0.186 */
}

.easter-screen--game .easter-landing__stage.is-finished .easter-game__drone {
  opacity: 1;
  transform: translateX(0) scaleX(-1);
}

.easter-game__title {
  position: absolute;
  top: 9.125rem;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  user-select: none;
}

.easter-game__title.is-visible {
  opacity: 1;
}

.easter-game__title[hidden] {
  display: none;
}

/* 시작 가이드 — 2초 노출 후 디졸브(사용자 확정), 실측 (182, 394) 642×52 */
.easter-game__guide {
  position: absolute;
  top: 24.025rem; /* 텍스트 이미지가 1.png 실측 (182, 394)에 정확히 오도록 패딩 보정 */
  left: 10.875rem;
  padding: 0.6rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(8, 8, 8, 0.55);
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
  pointer-events: none;
}

.easter-game__guide.is-visible {
  opacity: 1;
}

.easter-game__guide img {
  display: block;
  width: 40.125rem;
  height: auto;
}

/* 하단 HUD — 게이지(실측 200.5, 477.25 599×83) + 마커 + EXCEL */
.easter-game__hud {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 400ms var(--ease-out);
  pointer-events: none;
}

.easter-game__hud.is-hidden {
  opacity: 0;
}

.easter-game__gauge {
  position: absolute;
  top: 29.828125rem;
  left: 12.53125rem;
  width: 37.4375rem;
}

.easter-game__marker {
  position: absolute;
  top: 30rem; /* 시안 실측 — 다이아몬드 중심 y 506.5(에셋 내 오프셋 26.5 보정) */
  left: 27.515625rem; /* 시작은 육각형 중심(x 451.75) — JS가 구동 */
  width: 1.4375rem;
}

.easter-game__excel {
  position: absolute;
  top: 30.40625rem; /* 버튼 비주얼 (661, 494.5) — 크롭 실측 492에서 사용자 피드백으로 +2.5 */
  left: 40.8125rem;
  padding: 0.5rem;
  pointer-events: auto;
  transition: filter 120ms linear, transform 120ms var(--ease-out);
}

.easter-game__excel:active {
  transform: scale(0.94);
}

.easter-game__excel img {
  display: block;
  width: 4.9375rem;
  pointer-events: none;
}

/* 결과 버튼(REWARD/RETRY) — 게이지 자리의 라이트 프레임 바(CSS, 시안 근사) */
.easter-game__result-btn {
  position: absolute;
  top: 29.8125rem;
  left: 13rem;
  width: 36.5rem;
  height: 2.625rem;
  border: 0.28rem solid #d9dede;
  border-radius: 0.7rem;
  background: #23282a;
  color: #7ee8b8;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  transition: filter 120ms linear;
}

.easter-game__result-btn.is-retry {
  color: #ff9d8f;
}

.easter-game__result-btn:disabled {
  color: #9fd8bd;
  opacity: 0.9;
}

@media (hover: hover) {
  .easter-game__excel:hover,
  .easter-game__result-btn:hover:not(:disabled) {
    filter: brightness(1.2);
  }
}

/* step5 카메라 — 시안 실측 영역 (249,120) 511×322, 프레임(615×418)은 중심 정렬 오버레이 */
.easter-camera {
  position: absolute;
  top: 7.5rem;
  left: 15.5625rem;
  width: 31.9375rem;
  height: 20.125rem;
}

.easter-camera__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.9rem;
  object-fit: cover;
  background: #101010;
}

.easter-camera__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38.4375rem; /* 615px 1:1 */
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.easter-camera__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  border-radius: 0.9rem;
  background: rgba(10, 10, 12, 0.88);
  text-align: center;
}

.easter-camera__fallback[hidden] {
  display: none;
}

.easter-camera__fallback p {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.6;
}

.easter-camera__retry {
  min-width: 9rem;
  min-height: 2.75rem;
  border: 1px solid rgba(244, 242, 235, 0.55);
  border-radius: 0.375rem;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.easter-camera__notice {
  position: absolute;
  bottom: 3.4rem;
  left: 50%;
  margin: 0;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.82);
  color: #ffb4a8;
  font-size: 0.9rem;
  font-weight: 700;
  transform: translateX(-50%);
}

.easter-camera__notice[hidden] {
  display: none;
}

/* 오답/성공 피드백 — 중앙 오버레이 카드(에셋 확보 전 CSS 임시) */
.easter-feedback {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10;
  min-width: 17rem;
  padding: 1.6rem 2.2rem;
  border: 1px solid rgba(244, 242, 235, 0.4);
  border-radius: 0.75rem;
  background: rgba(10, 10, 12, 0.92);
  text-align: center;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 250ms var(--ease-out), visibility 250ms;
}

.easter-feedback.is-open {
  opacity: 1;
  visibility: visible;
}

.easter-feedback__title {
  margin: 0;
  color: #ffb4a8;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.easter-feedback--success .easter-feedback__title {
  color: #8af0c2;
}

.easter-feedback__sub {
  margin: 0.5rem 0 0;
  color: var(--ink);
  font-size: 0.9rem;
}

/* 신규 시안 실측(1000×562 기준): START (401.5, 438) 193.5×34.5 / EXIT (850, 20) 120×40 */
.easter-landing__start {
  position: absolute;
  top: 27.375rem;
  left: 25.09375rem;
  width: 12.09375rem;
  padding: 0;
  transition: filter 150ms var(--ease-out);
}

.easter-landing__exit {
  position: absolute;
  top: 1.25rem;
  left: 53.125rem;
  padding: 0;
  transition: filter 150ms var(--ease-out);
}

.easter-landing__start img,
.easter-landing__exit img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.easter-landing__exit img {
  width: 7.5rem;
}

@media (hover: hover) {
  .easter-landing__start:hover,
  .easter-landing__exit:hover {
    filter: brightness(1.25);
  }
}

.rotate-device {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.625rem;
  height: 4.625rem;
  margin-bottom: 0.625rem;
}

.rotate-device__phone {
  width: 1.375rem;
  height: 2.5rem;
  border: 2px solid var(--ink);
  border-radius: 0.3125rem;
  transform: rotate(0deg);
  animation: rotate-hint 2.4s var(--ease-out) infinite;
}

.rotate-device svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes rotate-hint {
  0%,
  20% {
    transform: rotate(0deg);
  }
  55%,
  100% {
    transform: rotate(90deg);
  }
}

/*
 * 씬 / 스테이지 — SCENE_SPEC §2·§4
 * .scene은 뷰포트 크기 + overflow hidden.
 * 홈 .stage는 화면 폭을 항상 100% 채운다. USP 자동차 씬만 1:1.9 폭 제한을 유지한다.
 * 스테이지는 항상 top: 0에 고정된다.
 * 화면이 짧아지면 아래쪽만 잘리고, 길면 하단 블랙 레터박스를 허용한다.
 */

.scene {
  position: absolute;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #000;
}

.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* aspect-ratio 폴백 — padding-top 트릭(SCENE_SPEC §8) */
  padding-top: calc(var(--canvas-h) / var(--canvas-w) * 100%);
}

@supports (aspect-ratio: 1 / 1) {
  .stage {
    padding-top: 0;
    aspect-ratio: calc(var(--canvas-w) / var(--canvas-h));
  }
}

/* 레터박스(탑 정렬) 시 이미지 하단 끝을 배경 블랙으로 페이드 — 경계선이 도드라지지 않게 */
.scene.is-letterboxed .stage {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
}

.layer-bg {
  z-index: 1;
  background: #1a120d; /* 창밖 배경(main2)이 덮지 않는 하단 영역의 폴백 색 */
}

/* main2는 main1의 (0,0)에 맞춰 깔린다 — 두 이미지 모두 폭 1920 기준 */
.layer-bg__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.layer-interior {
  z-index: 3;
}

.layer-objects {
  z-index: 4;
}

/*
 * 공통 .layer-objects보다 구체적으로 선언해야 z4에 덮이지 않는다.
 * 05_WaySign Default/Selected와 모선은 main2 위, main1 아래에서만 렌더링한다.
 */
.layer-objects.layer-objects--far {
  z-index: 2;
}

.layer-hit {
  z-index: 5;
}

/*
 * 인테리어 레이어 — 캔버스와 동일 크기의 main1이 inset 0으로 겹친다(SCENE_SPEC §5).
 * 창문 영역은 투명이라 배경(main2)과 far 오브젝트가 비친다.
 */
.layer-interior__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
}

/*
 * 오브젝트 — 기본/선택 이미지를 같은 박스에 겹치고 opacity 크로스페이드(SCENE_SPEC §5·§6).
 * 박스 좌표(캔버스 %)는 app.js의 OBJECTS가 지정한다(템플릿 매칭 산출값).
 */
.obj {
  position: absolute;
  display: block;
  pointer-events: none;
  transition: transform 120ms var(--ease-out);
}

.obj__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
}

.obj__img--selected {
  opacity: 0;
  transition: opacity 0.25s ease; /* 크로스페이드 — src 스왑 금지(SCENE_SPEC §5·§6) */
}

/* 모선(01) 기본 상태 2프레임 블링크 — 피그마 키프레임(kf_627_52795_opacity_0) 이식.
   위 프레임이 디밍될 때 아래의 라이트 켜진 프레임이 비친다. */
.obj__img--blink {
  animation: obj-blink 2s linear infinite;
}

@keyframes obj-blink {
  0% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 1;
  }
  40.2% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0.1;
  }
  80.1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* 표지판(05) 블링크 — 피그마 키프레임(kf_627_52777_opacity_0) 이식: ≈2s, 중간에 완전 소등 */
.obj__img--blink-sign {
  animation: obj-blink-sign 1.998801s linear infinite;
}

@keyframes obj-blink-sign {
  0% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 1;
  }
  49.93% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 좌측 미러(04) 블링크 — 피그마 키프레임(kf_628_66957_opacity_0) 이식: 1.799s, 33.29%에서 완전 소등 */
.obj__img--blink-mirror {
  animation: obj-blink-mirror 1.79914s linear infinite;
}

@keyframes obj-blink-mirror {
  0% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 1;
  }
  33.294% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0;
  }
  66.754% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* 시동 버튼(11) 블링크 — 피그마 키프레임(kf_627_52786_opacity_0) 이식.
   글로우 프레임(off-2)이 베이스 위에서 0→1→0으로 맥동한다(2.000115s). */
.obj__img--blink-engine {
  opacity: 0;
  animation: obj-blink-engine 2.000115s linear infinite;
}

@keyframes obj-blink-engine {
  0% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0;
  }
  49.917% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 카탈로그(06) 3프레임 플립 — 원본 모션 영상(0.83s) 기준 핑퐁: 1→2→3→2→1.
   스택 base<2<3에서 2는 먼저 들어와 홀드 후 마지막에 나가고(obj-flip-mid),
   3은 중앙에서만 나타난다(피그마 kf_627_52815 그대로). 베이스가 중간에 새지 않는다. */
.obj__img--flip {
  opacity: 0;
  animation: obj-flip-mid 0.798999s linear infinite;
}

.obj__img--flip-b {
  opacity: 0;
  animation: obj-flip 0.798999s linear infinite;
}

/* 중간 프레임(off-2): 0→24.86% 페이드 인, 홀드, 75.72→100% 페이드 아웃 */
@keyframes obj-flip-mid {
  0% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0;
  }
  24.859% {
    opacity: 1;
  }
  75.72% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 상단 프레임(off-3): 피그마 원본 키프레임 — 중앙(50.06%)에서만 피크 */
@keyframes obj-flip {
  0% {
    opacity: 0;
  }
  24.859% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0;
  }
  50.063% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 1;
  }
  75.72% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.obj.is-selected .obj__img--selected {
  opacity: 1;
}

/* 탭 눌림 표시 — 선택 상태와 함께 살짝 눌리는 스케일 */
.obj.is-pressed {
  transform: scale(0.985);
}

/*
 * 히트 영역 — 시각 오브젝트와 분리된 투명 버튼. 오브젝트 바운딩 박스를 덮되
 * 물리 44×44px 최소 크기 보장(SCENE_SPEC §6). 스테이지는 scale()을 쓰지 않으므로
 * px 지정이 곧 물리 크기다.
 */
.hit {
  position: absolute;
  min-width: 44px;
  min-height: 44px;
  border-radius: 0.625rem;
  background: transparent;
}

@media (hover: hover) {
  .hit:hover {
    cursor: pointer;
  }
}

/*
 * USP 팝업 — 06 카탈로그와 동일한 .responsive-popup 공통 셸(800:460 스케일 영역, 백드롭,
 * 바깥 X) 안에서 인트로(스토리 타이핑) → 자동차(시동 온/오프) 2단계로 진행한다.
 * 콘텐츠는 모두 rem 기준이라 팝업 스케일과 함께 균일하게 확대·축소된다(SCENE_SPEC §6).
 */

.usp-popup__screen {
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  overflow: hidden;
}

.usp-popup__screen[hidden] {
  display: none;
}

/*
 * 인트로 — 팝업 좌표계(50rem×28.75rem)가 고정이므로 내부도 flex 흐름 없이
 * rem 절대 좌표로 배치한다. 버튼이 나타나도 텍스트 박스가 변하지 않는다.
 */
/* USP 팝업(v0.50) — 화면 기준 720×420. 폭 50rem 좌표계는 유지하고 높이만 29.1667rem으로
 * 바꿔 비율을 720:420으로 맞춘다(스텝 이미지 무왜곡 균일 스케일·기존 rem 좌표 정렬 유지).
 * 신규 시안(720×420 px)은 ×800/720 환산해 rem으로 적는다. */
/*
 * USP 태블릿 프레임(v0.90) — 포토·이벤트와 같은 전용 1000×562(62.5×35.125rem) 캔버스.
 * 시안(2.png, 2000×1124) 실측: 프레임 에셋(1512×920)이 2x 1:1로 (244,102)에 놓여 1x (122,51) 756×460,
 * 콘텐츠 창은 정확히 (140,71) 720×420(프레임 안쪽 L18·T20·R18·B20). 기존 50rem 좌표계(800×466.67)를
 * 창 안에서 0.9배로 통째로 넣으므로 스테이지 0~4 내부 좌표는 재측정하지 않는다.
 */
.usp-popup .responsive-popup__scale {
  width: 62.5rem;
  height: 35.125rem;
}

/*
 * v0.91 — 캔버스에 거의 꽉 차게(상하 12px 여백, 사용자 확정): 시안 배치 전체를 538/460 = 1.169565배.
 * 프레임 (57.904,12) 884.19×538 · 창 (78.956,35.391) 842.09×491.22 · X 중심 (971.33,35.39).
 */
.tablet-frame {
  position: absolute;
  top: 0.75rem;
  left: 3.619rem;
  width: 55.262rem;
  height: 33.625rem;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.usp-popup__window {
  position: absolute;
  top: 2.212rem;
  left: 4.9348rem;
  width: 50rem;
  height: 29.166667rem;
  overflow: hidden;
  border-radius: 1rem; /* 창 라운드(v0.93) — 히든 챌린지와 동일 */
  transform: scale(1.052609); /* 0.9 × 1.169565 */
  transform-origin: 0 0;
}

/* X는 프레임 우상단 바깥 — 시안 오프셋(프레임 우측 +25, 상단 +20)을 같은 배율로, 44px 박스를 중심에 맞춘다 */
.usp-popup .responsive-popup__close {
  top: 0.837rem;
  left: 59.3334rem;
}

.usp-popup__screen--intro {
  /* 외딴 행성 배경(2배수 1440×840) — 시안에 스크림 없음(4.png 픽셀 실측) */
  background: url("./assets/usp/0/intro-bg.webp") center / cover no-repeat, #0a0806;
}

/* 좌표·타이포는 디자이너 시안(720×420 → 팝업 % 환산) 측정값 기준 */
.usp-popup__text {
  position: absolute;
  top: 3rem; /* 시안 10.7% */
  right: 2.75rem;
  bottom: 7rem; /* 하단 버튼 영역 고정 예약 */
  left: 2.75rem;
  margin: 0;
  overflow-y: auto;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.47;
  text-align: center;
  white-space: pre-line;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 242, 235, 0.25) transparent;
}

/* 완성 문장의 중앙 배치를 먼저 확보한 뒤 글자만 각 줄의 왼쪽부터 공개한다. */
.usp-popup__typing-line {
  display: block;
  min-height: 1.47em; /* 빈 줄도 시안 행간과 같은 한 슬롯을 차지 */
}

.usp-popup__typing-char {
  visibility: hidden;
}

.usp-popup__typing-char.is-visible {
  visibility: visible;
}

.usp-popup__start {
  position: absolute;
  bottom: 2.78rem; /* 4.png 실측 (190, 325) 340×55 → ×800/720 환산 */
  left: 50%;
  width: 23.6rem;
  transform: translate(-50%, 0.5rem);
  opacity: 0;
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

.usp-popup__start.is-ready {
  opacity: 1;
  transform: translate(-50%, 0);
}

.usp-popup__start img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * 프롤로그 스텝 화면(step1~4) 공통 — 600ms 디졸브로 위에 겹쳐 등장한다.
 * display 토글 없이 opacity+visibility만 쓰므로 전환이 항상 재생된다.
 * 좌표·크기는 720×420 시안 실측값을 팝업 rem 좌표계로 환산한 값. 닫기는 X·배경·ESC 공통.
 */
.usp-popup__screen--step {
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms var(--ease-out), visibility 600ms;
}

.usp-popup__screen--step.is-active {
  opacity: 1;
  visibility: visible;
}

.usp-step-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-select: none;
}

/* step2 HOLD — 시안 (462.5, 112.5) 147×143 @720×420, 2초 유지로 통과·중도 해제 시 리셋 */
.usp-hold-button,
.usp-forward-button {
  position: absolute;
  width: 10.21rem;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 150ms var(--ease-out), filter 150ms var(--ease-out);
}

.usp-hold-button {
  left: 32.1528rem; /* 신규 시안 실측 (463, 112) 147×143 → ×800/720 환산 */
  top: 7.7778rem;
  width: 10.2083rem;
}

/* step2/3 안내 텍스트(글로우 포함 캔버스) — 실측 (221, 237) 278×173 → ×800/720 환산 */
.usp-step2__text,
.usp-step3__text {
  position: absolute;
  top: 16.4583rem;
  left: 15.3472rem;
  width: 19.3056rem;
  pointer-events: none;
  user-select: none;
}

/* step3 전진(P) — 신규 시안 실측 (463, 112) 147×143, step2 HOLD와 동일 좌표 */
.usp-forward-button {
  left: 32.1528rem;
  top: 7.7778rem;
  width: 10.2083rem;
}

.usp-hold-button img,
.usp-forward-button img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.usp-hold-button.is-holding {
  transform: scale(0.94);
  filter: brightness(1.4);
}

@media (hover: hover) {
  .usp-hold-button:hover,
  .usp-forward-button:hover {
    filter: brightness(1.2);
  }
}

/* step4 — 4-1 배경 위로 4-2·4-3이 1초 간격 디졸브(600ms 포함), 4-3 완료 0.5초 뒤 다이얼로그 */
.usp-step4-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  user-select: none;
  -webkit-user-select: none;
}

.usp-step4-frame.is-visible {
  opacity: 1;
}

/* START ENGINE 다이얼로그(500×210) — 시안 기준 중앙, 폭 460/720 환산 32rem */
.usp-step4-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19.3056rem; /* 신규 팝업(556×300 2배수) — 시안 실측 정중앙 (221, 135) */
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease-out);
}

.usp-step4-dialog.is-ready {
  opacity: 1;
  pointer-events: auto;
}

.usp-step4-dialog img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
}

/* OK 히트 영역 — 신규 팝업(278×150)의 OK 필 주변을 넉넉히 잡는다 */
.usp-step4-ok {
  position: absolute;
  top: 55%;
  left: 18%;
  width: 64%;
  height: 38%;
}

/* step5 글레오 말풍선(구 step7에서 이관, v0.55) — 실측 (63, 168) 124×61.5 → ×800/720 환산.
 * 화면 활성화 시 피그마 키프레임(kf_627_53242)대로 등장: opacity 0.04→1 + 아래 51.5px 스냅 업 */
.usp-step5__gleo {
  position: absolute;
  top: 11.6667rem;
  left: 4.375rem;
  width: 8.6111rem;
  user-select: none;
  pointer-events: none;
}

#uspStep5Screen.is-active .usp-step5__gleo {
  animation:
    kf-usp-gleo-opacity 1.001416s linear both,
    kf-usp-gleo-translate 1.001416s linear both;
}

@keyframes kf-usp-gleo-opacity {
  0% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0.04;
  }
  100% {
    opacity: 1;
  }
}

@keyframes kf-usp-gleo-translate {
  0% {
    animation-timing-function: cubic-bezier(0.009, 0.998, 1, 1);
    translate: 0 3.5764rem; /* 51.5px(720 기준) × 800/720 */
  }
  100% {
    translate: 0 0;
  }
}

/* 글레오 대화 자막 바(step7~9) — 실측 (25, 324) 670×86 → ×800/720 환산.
 * 배경 디졸브 후 짧은 디졸브로 별도 등장, 자막 바를 눌러 다음으로 진행(v0.57) */
.usp-caption {
  position: absolute;
  top: 22.5rem;
  left: 1.7361rem;
  width: 46.5278rem;
  padding: 0;
  opacity: 0;
  transition: opacity 500ms var(--ease-out), filter 150ms linear;
  pointer-events: none;
  user-select: none;
  touch-action: manipulation;
}

.usp-popup__screen.is-active .usp-caption {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 100ms, 0ms; /* 배경 등장 100ms 뒤 함께 떠오른다(v0.73) */
}

.usp-caption img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* 스테이지 2 step3 — 그라디언트 포함 풀폭 하단 자막(실측 (0,240) 720×180) */
.usp-caption--wide {
  top: 16.6667rem;
  left: 0;
  width: 50rem;
}

/* 스테이지 2 step5 — 기억 후진 보조 Start 팝업(실측 (136,68) 449×295, 전체가 버튼) */
.usp-s1-dialog--s2start {
  top: 4.7222rem;
  left: 9.4444rem;
  width: 31.1806rem;
}

/* 스테이지 3 자막 — 표준 자막보다 10px 위(실측 (25,314)) */
.usp-caption--raised {
  top: 21.8056rem;
}

/* 스테이지 3 step1 — Stage 03 안내 팝업(실측 (209,115) 303×190, 수평 중앙) */
.usp-s1-dialog--s3intro {
  left: 14.5139rem;
  width: 21.0417rem;
}

/* 스테이지 3 step3 — 스테이 모드 활성화 팝업(실측 (279,122) 381×204, 연출 전용) */
.usp-s3-stay {
  position: absolute;
  top: 8.4722rem;
  left: 19.375rem;
  width: 26.4583rem;
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
  pointer-events: none;
  user-select: none;
}

.usp-popup__screen.is-active .usp-s3-stay {
  opacity: 1;
  transition-delay: 100ms; /* 배경 등장 100ms 뒤(v0.73) */
}

/* Start 버튼 히트존(실측 (301,256.5) 162.5×49) — Cancel은 무반응(사용자 확정) */
.usp-s3-stay-start {
  position: absolute;
  top: 17.8125rem;
  left: 20.9028rem;
  width: 11.2847rem;
  height: 3.4028rem;
  padding: 0;
  touch-action: manipulation;
}

/* s3step11 점검 메뉴 — 실측 (410,184)/(410,266) 234×62. 완료 시 -done 오버레이로 교체·탭 불가.
   지연 등장 없이 화면 디졸브와 함께 처음부터 표시(사용자 확정). */
.usp-s3-menu {
  position: absolute;
  left: 28.4722rem;
  width: 16.25rem;
  padding: 0;
  transition: filter 150ms linear;
  pointer-events: none;
  touch-action: manipulation;
}

.usp-popup__screen.is-active .usp-s3-menu {
  pointer-events: auto;
}

.usp-popup__screen.is-active .usp-s3-menu:disabled {
  pointer-events: none;
}

.usp-s3-menu.is-picked img {
  opacity: 0; /* 선택/완료 시 기본 비주얼은 -done 오버레이로 대체 */
}

.usp-s3-menu--1 { top: 12.7778rem; }
.usp-s3-menu--2 { top: 18.4722rem; }

.usp-s3-menu img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

@media (hover: hover) {
  .usp-s3-menu:hover:not(:disabled) {
    filter: brightness(1.1);
  }
}

/* 선택/완료 오버레이 — 글로우 포함 588×244 2배수, 버튼 중심 정렬 실측 (380,154)/(380,236) */
.usp-s3-menu-done {
  position: absolute;
  left: 26.3889rem;
  width: 20.4167rem;
  pointer-events: none;
  user-select: none;
}

.usp-s3-menu-done--1 { top: 10.6944rem; }
.usp-s3-menu-done--2 { top: 16.3889rem; }

/* s3step12a·b 요청 자막 — 실측 (130,340) 460×60 */
.usp-caption--s3request {
  top: 23.6111rem;
  left: 9.0278rem;
  width: 31.9444rem;
}

/* s3step13a 질문 팝업 — 실측 (63,168) 365×80, 피그마 kf_627_57938 그대로(연출 전용) */
/* opacity 0 베이스를 두지 않는다 — both 필 애니메이션이 초기값을 만들고,
   모션 최소화 환경(애니메이션 전역 제거)에서는 화면 디졸브와 함께 그냥 보인다 */
.usp-s3-ask {
  position: absolute;
  top: 11.6667rem;
  left: 4.375rem;
  width: 25.3472rem;
  pointer-events: none;
  user-select: none;
}

#uspS3Step13aScreen.is-active .usp-s3-ask {
  animation: kf-usp-s3ask-opacity 1.001s linear both, kf-usp-s3ask-translate 1.001s linear both;
}

@keyframes kf-usp-s3ask-opacity {
  0% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0;
  }
  100% { opacity: 1; }
}

@keyframes kf-usp-s3ask-translate {
  0% { translate: 0 3.5764rem; } /* 51.5px */
  100% { translate: 0 0; }
}

/* s3step16 클리어 — Perfect 실측 (278,184) 165×66 · CLEAR (264.5,319.5) 194×35 */
.usp-s3-perfect {
  position: absolute;
  top: 12.7778rem;
  left: 19.3056rem;
  width: 11.4583rem;
  pointer-events: none;
  user-select: none;
}

.usp-s3-clear {
  position: absolute;
  top: 22.1875rem;
  left: 18.3681rem;
  width: 13.4722rem;
  pointer-events: none;
  user-select: none;
}

#uspS3Step16Screen.is-active .usp-s3-perfect {
  animation: kf-usp-s3perfect-opacity 1.396s linear both; /* 피그마 kf_635_88222 */
}

#uspS3Step16Screen.is-active .usp-s3-clear {
  animation: kf-usp-s3clear-opacity 1.396s linear both, kf-usp-s3clear-translate 1.396s linear both; /* 피그마 kf_644_91267 */
}

@keyframes kf-usp-s3perfect-opacity {
  0% { opacity: 0; }
  57.235% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0;
  }
  100% { opacity: 1; }
}

@keyframes kf-usp-s3clear-opacity {
  0% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0;
  }
  35.888% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes kf-usp-s3clear-translate {
  0% {
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    translate: 0 3.5764rem; /* 51.5px — 시안 붙여넣기 누락, 타 키프레임과 동일 값으로 통일 */
  }
  100% { translate: 0 0; }
}

/*
 * 스테이지 4(assets/usp/4, v0.65) — s3step16 CLEAR 모션 완료 후 자동 진입.
 * 팝업·배너는 화면 디졸브가 끝나고 2초 뒤 JS가 is-shown을 붙여 500ms 디졸브로 등장한다
 * (스테이지 1~3의 transition-delay 방식과 달리 지연이 길어 타이머로 관리).
 */
.usp-s4-dialog,
.usp-s4-banner {
  position: absolute;
  padding: 0;
  opacity: 0;
  transition: opacity 500ms var(--ease-out), filter 150ms linear;
  pointer-events: none;
  touch-action: manipulation;
  user-select: none;
}

.usp-s4-dialog.is-shown,
.usp-s4-banner.is-shown {
  opacity: 1;
  pointer-events: auto;
}

.usp-s4-dialog img,
.usp-s4-banner img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* s4step2 Stage 04 안내 팝업(실측 (173,115) 374×190, 수평 중앙) */
.usp-s4-dialog {
  top: 7.9861rem;
  left: 12.0139rem;
  width: 25.9722rem;
}

/* s4step4 게임 안내 배너(실측 (158,149) 404×80, 수평 중앙) */
.usp-s4-banner {
  top: 10.3472rem;
  left: 10.9722rem;
  width: 28.0556rem;
}

@media (hover: hover) {
  .usp-s4-dialog:hover,
  .usp-s4-banner:hover {
    filter: brightness(1.1);
  }
}

/*
 * 스테이지 4 보스전 게임(v0.66) — 배경(game/bg)에 요소를 시안 좌표 그대로 겹친다.
 * 좌표는 전부 1440×840(2배수) 시안 실측을 ÷2÷14.4로 rem 환산한 값.
 */
.usp-s4-gauge-frame {
  position: absolute;
  top: 4.0972rem; /* 실측 (494,118) 452×92 */
  left: 17.1528rem;
  width: 15.6944rem;
  pointer-events: none;
  user-select: none;
}

/* 게이지 바 — 빨간 구간은 이미지 안에서 420/460, 좌우 20px씩은 글로우 여백 */
.usp-s4-gauge-track {
  position: absolute;
  top: 5.8333rem; /* 실측 (490,168) 460×46 */
  left: 17.0139rem;
  width: 15.9722rem;
  height: 1.5972rem;
  pointer-events: none;
}

/* 바 자신에 --s4-gauge를 세팅해야 전환이 보간된다(상속값 변경은 보간되지 않음) */
@property --s4-gauge {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}

.usp-s4-gauge-bar {
  display: block;
  width: 100%;
  height: 100%;
  /* --s4-gauge 1 → 0. 잘린 뒤에도 오른쪽 글로우 20px이 남도록 420/460만 줄인다 */
  clip-path: inset(0 calc((1 - var(--s4-gauge, 1)) * 91.3043%) 0 0);
  transition: --s4-gauge 250ms var(--ease-out);
}

/* TV 화면 슬롯 — 소녀·몬스터를 겹쳐두고 교대(src 스왑 금지, 실측 (644,350) 151×121) */
.usp-s4-face {
  position: absolute;
  top: 12.1528rem;
  left: 22.3611rem;
  width: 5.2431rem;
  aspect-ratio: 151 / 121;
  pointer-events: none;
  user-select: none;
}

.usp-s4-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 100ms linear; /* 반응 게임이라 판정이 흐려지지 않게 짧게 */
}

.usp-s4-face[data-face="girl"] .usp-s4-face__girl,
.usp-s4-face[data-face="monster"] .usp-s4-face__monster {
  opacity: 1;
}

/* 타격 이펙트 — 원본이 검정 배경이라 스크린 블렌드로 올린다(실측 스파크 정렬 (650,264)) */
.usp-s4-effect {
  position: absolute;
  top: 9.1667rem;
  left: 22.5694rem;
  width: 11.8056rem;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 120ms linear;
  pointer-events: none;
  user-select: none;
}

.usp-s4-crash {
  position: absolute;
  top: 8.4028rem; /* 실측 (525,242) 395×70 */
  left: 18.2292rem;
  width: 13.7153rem;
  opacity: 0;
  transition: opacity 120ms linear;
  pointer-events: none;
  user-select: none;
}

.usp-s4-effect.is-shown,
.usp-s4-crash.is-shown {
  opacity: 1;
}

.usp-s4-heart {
  position: absolute;
  top: 18.0556rem; /* 실측 y 520, x 150/230/308 */
  width: 1.8056rem;
  aspect-ratio: 52 / 44;
  pointer-events: none;
  user-select: none;
}

.usp-s4-heart img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.usp-s4-heart__off {
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}

.usp-s4-heart.is-lost .usp-s4-heart__off {
  opacity: 1;
}

.usp-s4-heart--1 { left: 5.2083rem; }
.usp-s4-heart--2 { left: 7.9861rem; }
.usp-s4-heart--3 { left: 10.6944rem; }

/*
 * 스틱 — 이미지 자체에 시안과 같은 0.1527rad 기울기가 이미 들어 있어 대기 상태는 회전 0.
 * 피그마 kf_635_90026을 그대로 옮기되 전 구간에서 0.2rad을 빼 대기값을 0으로 맞춘다.
 */
.usp-s4-stick {
  position: absolute;
  top: 7.6736rem; /* 실측 (998,221) 200×619 */
  left: 34.6528rem;
  width: 6.9444rem;
  height: 21.4931rem;
  transform-origin: 50% 100%;
  transform: rotate(var(--s4-stick-rotate, 0rad));
  pointer-events: none;
  user-select: none;
}

@property --s4-stick-rotate {
  syntax: "<angle>";
  initial-value: 0rad;
  inherits: false;
}

.usp-s4-stick.is-swinging {
  animation: kf-usp-s4-stick 600ms linear;
}

@keyframes kf-usp-s4-stick {
  0% {
    animation-timing-function: cubic-bezier(0.837, 0.004, 0.975, 0.307);
    --s4-stick-rotate: 0rad;
  }
  30.315% {
    animation-timing-function: cubic-bezier(0.873, -0.004, 0.5, 1);
    --s4-stick-rotate: -0.768rad;
  }
  60.378% { --s4-stick-rotate: 0rad; }
  100% { --s4-stick-rotate: 0rad; }
}

/* 때리는 대상 — 모니터 본체 전체(실측 (615,317)~(830,575)) */
.usp-s4-tv-hit {
  position: absolute;
  top: 11.0069rem;
  left: 21.3542rem;
  width: 7.4653rem;
  height: 8.9583rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

/* FAIL 화면의 Retry/End — 디자이너 에셋 전까지 CSS 임시 비주얼 */
.usp-s4-result-actions {
  position: absolute;
  top: 21.6rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 3rem;
}

.usp-s4-result-button {
  padding: 0.35rem 1.6rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.55);
  border-radius: 0.25rem;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  touch-action: manipulation;
}

/* 엔딩 Home 버튼 — 통이미지 위 히트존(실측 (562,540) 336×78) */
.usp-s4-home {
  position: absolute;
  top: 18.75rem;
  left: 19.5139rem;
  width: 11.6667rem;
  height: 2.7083rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) {
  .usp-s4-result-button:hover,
  .usp-s4-home:hover {
    filter: brightness(1.15);
  }
}

/* 스테이지 2 step6 — 후진 보조 안내 배너(실측 (120,310) 480×108, 연출 전용) */
.usp-s2-banner {
  position: absolute;
  top: 21.5278rem;
  left: 8.3333rem;
  width: 33.3333rem;
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
  pointer-events: none;
  user-select: none;
}

.usp-popup__screen.is-active .usp-s2-banner {
  opacity: 1;
  transition-delay: 100ms; /* 배경 등장 100ms 뒤(v0.73) */
}

@media (hover: hover) {
  .usp-caption:hover {
    filter: brightness(1.15);
  }
}

/*
 * 시나리오 1(assets/usp/1, v0.58) — step9 자막 탭으로 진입.
 * s1step1: Stage 01 안내 팝업(실측 (221,115) 278×190, 전체가 버튼) → s1step2: 경로 요청 버튼
 * (실측 (193,340) 334×60) → s1step3: 명령 텍스트(실측 (63,168) 353×80, 피그마 kf_627_53458 등장).
 */
.usp-s1-dialog {
  position: absolute;
  top: 7.9861rem;
  left: 15.3472rem;
  width: 19.3056rem;
  padding: 0;
  opacity: 0;
  transition: opacity 500ms var(--ease-out), filter 150ms linear;
  pointer-events: none;
  touch-action: manipulation;
}

.usp-popup__screen.is-active .usp-s1-dialog {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 100ms, 0ms; /* 배경 등장 100ms 뒤(v0.73) */
}

.usp-s1-request {
  position: absolute;
  top: 23.6111rem;
  left: 13.4028rem;
  width: 23.1944rem;
  padding: 0;
  opacity: 0;
  transition: opacity 500ms var(--ease-out), filter 150ms linear;
  pointer-events: none;
  touch-action: manipulation;
}

.usp-popup__screen.is-active .usp-s1-request {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 100ms, 0ms;
}

.usp-s1-dialog img,
.usp-s1-request img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

@media (hover: hover) {
  .usp-s1-dialog:hover,
  .usp-s1-request:hover {
    filter: brightness(1.1);
  }
}

.usp-s1-text {
  position: absolute;
  top: 11.6667rem;
  left: 4.375rem;
  width: 24.5139rem;
  user-select: none;
  pointer-events: none;
}

#uspS1Step3Screen.is-active .usp-s1-text {
  animation:
    kf-usp-s1text-opacity 0.999s linear both,
    kf-usp-s1text-translate 0.999s linear both;
}

@keyframes kf-usp-s1text-opacity {
  0% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes kf-usp-s1text-translate {
  0% {
    animation-timing-function: cubic-bezier(0.01, 1, 1, 1);
    translate: 0 3.5764rem; /* 51.5px(720 기준) × 800/720 */
  }
  100% {
    translate: 0 0;
  }
}

/*
 * s1step5 경로 선택(v0.59) — 배경 0.5초 뒤 글로우·자막·패널이 함께 500ms 디졸브(사용자 확정).
 * 실측: 글로우 (195.5,29) 460×89 / 자막 (25,314) / 패널 (257,74.5) 206.5×226 /
 * 선택 오버레이 (282.5,127.5)·(282.5,191) 154×41.5 / 안내 시작 (277,248) 171×26.
 * 카드 탭 = 단일 선택 교체, 선택 전 안내 시작 비활성.
 */
.usp-s1-route {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
  pointer-events: none;
}

.usp-s1-route.is-shown {
  opacity: 1;
  pointer-events: auto;
}

.usp-s1-route__glow {
  position: absolute;
  top: 4.4444rem; /* 재실측 (133.75, 64) — IVI 스크린 상단(5↔5-1 diff, 이전 매칭은 투명 에셋 오검출) */
  left: 9.2882rem;
  width: 31.9444rem;
  pointer-events: none;
  user-select: none;
}

.usp-s1-route__caption {
  position: absolute;
  top: 21.8056rem;
  left: 1.7361rem;
  width: 46.5278rem;
  pointer-events: none;
  user-select: none;
}

.usp-s1-route__panel {
  position: absolute;
  top: 5.1736rem;
  left: 17.8472rem;
  width: 14.3403rem;
  pointer-events: none;
  user-select: none;
}

.usp-s1-route__selected {
  position: absolute;
  width: 11.8056rem; /* 신규 풀카드 선택 상태(340×112 2배수) — 카드 중심 정렬 */
  pointer-events: none;
  user-select: none;
}

.usp-s1-route__selected--1 { top: 8.3507rem; left: 19.1146rem; }
.usp-s1-route__selected--2 { top: 12.7604rem; left: 19.1146rem; }

/* 카드 히트 — 패널 속 카드 박스 전체(투명 버튼) */
.usp-s1-route__card {
  position: absolute;
  left: 18.4722rem;
  width: 13.0556rem;
  padding: 0;
  touch-action: manipulation;
}

.usp-s1-route__card--1 { top: 8.0903rem; height: 4.3056rem; }
.usp-s1-route__card--2 { top: 12.6736rem; height: 4.5139rem; }

/* 체험 완료 카드 — 패널 흰 바탕 위 50% 워시로 반투명, 탭 불가(v0.60). */
.usp-s1-route__card.is-done {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0.5rem;
  pointer-events: none;
  cursor: default;
}

.usp-s1-route__start {
  position: absolute;
  top: 17.2222rem;
  left: 19.2361rem;
  width: 11.875rem;
  padding: 0;
  transition: opacity 200ms linear, filter 150ms linear;
  touch-action: manipulation;
}

.usp-s1-route__start:disabled {
  opacity: 0.4; /* 경로 선택 전 비활성(사용자 확정) */
}

.usp-s1-route__start img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

@media (hover: hover) {
  .usp-s1-route__start:hover:not(:disabled) {
    filter: brightness(1.1);
  }
}

/* 푸시 배너("글레오 하고 부르기") — LANDING_INTRO 시안 하단 중앙, 400×111 1:1 배치. 순수 연출(탭 불가) */
.usp-push {
  position: absolute;
  bottom: 1.15rem; /* 신규 메시지(680×122 2배수) — 시안 실측 (191.5, 342.5) */
  left: 50%;
  width: 23.6rem;
  transform: translate(-50%, 0.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
  user-select: none;
  -webkit-user-select: none;
}

.usp-push.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/*
 * step11 트렁크 짐 싸기 게임 — 배치는 11.webp 합성 시안 실측(720×420, 에셋 1:1)의 rem 환산.
 * 드래그 전용: 가방 밖 드롭은 원위치 복귀, 흡수는 살짝 커졌다 가방으로 빨려들며 디졸브.
 */
.usp-bag {
  position: absolute;
  top: 7.26rem;
  left: 8.61rem;
  width: 13.26rem;
  user-select: none;
  -webkit-user-select: none;
}

.usp-bag-count {
  position: absolute;
  top: 5.4rem;
  left: 15.24rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid rgba(86, 228, 255, 0.5);
  border-radius: 999px;
  background: rgba(8, 12, 14, 0.78);
  color: #6fe8ff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transform: translateX(-50%);
  pointer-events: none;
}

.usp-item {
  position: absolute;
  padding: 0;
  cursor: grab;
  touch-action: none; /* 포인터 드래그 중 스크롤/제스처 개입 차단 */
  user-select: none;
  -webkit-user-select: none;
}

.usp-item img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.usp-item--2 { top: 13.28rem; left: 24.72rem; width: 12.99rem; }
.usp-item--3 { top: 12.05rem; left: 21.81rem; width: 5.97rem; }
.usp-item--4 { top: 20.81rem; left: 18.33rem; width: 8.26rem; }
.usp-item--5 { top: 18.48rem; left: 13.19rem; width: 9.38rem; }
.usp-item--6 { top: 2.05rem; left: 31.94rem; width: 16.04rem; }

.usp-item.is-dragging {
  z-index: 5;
  cursor: grabbing;
  filter: drop-shadow(0 0.5rem 0.9rem rgba(0, 0, 0, 0.45));
  transition: none;
}

.usp-item.is-returning {
  transition: transform 300ms var(--ease-out);
}

/* 흡수 1단계: 제자리에서 살짝 커짐 → 2단계: 가방 중심으로 축소·디졸브 */
.usp-item.is-absorbing {
  z-index: 4;
  pointer-events: none;
  transition: transform 150ms var(--ease-out);
}

.usp-item.is-absorbing-in {
  opacity: 0;
  transition: transform 450ms cubic-bezier(0.55, 0, 0.8, 0.4), opacity 450ms linear;
}

.usp-step11-locked .usp-item {
  pointer-events: none;
}

/* 결과 오버레이 카드 — PERFECT/CLEAR·NOT BAD (에셋 확보 전 CSS 구현) */
.usp-game-result {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24rem;
  padding: 1.9rem 1.5rem 1.7rem;
  border: 1px solid rgba(86, 228, 255, 0.55);
  border-radius: 0.75rem;
  background: rgba(8, 12, 15, 0.9);
  box-shadow: 0 0 2.75rem rgba(86, 228, 255, 0.18);
  text-align: center;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 400ms var(--ease-out), visibility 400ms;
}

.usp-game-result.is-open {
  opacity: 1;
  visibility: visible;
}

.usp-game-result__title {
  margin: 0;
  color: #6fe8ff;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.usp-game-result__sub {
  margin: 0.6rem 0 0;
  color: var(--ink);
  font-size: 0.95rem;
}

.usp-game-result__badge {
  display: inline-block;
  margin: 1rem 0 0;
  padding: 0.3rem 1.2rem;
  border: 1px solid rgba(111, 232, 255, 0.7);
  border-radius: 999px;
  color: #6fe8ff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.usp-game-result__badge[hidden] {
  display: none;
}

/* 모션 감소 설정 */

/*
 * 모션 최소화 환경 — 움직임(이동·확대·회전) 전환은 제거하되, 위치 변화가 없는
 * 순수 디졸브(불투명도 페이드)는 화면 전환 인지에 필요해 유지한다.
 * (transform이 transition 목록에서 빠지므로 스케일·이동은 즉시 스냅된다.)
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }

  .view { transition: opacity 600ms var(--ease-out), visibility 600ms !important; }
  .obj__img--blink { animation: obj-blink 2s linear infinite !important; } /* 순수 opacity 블링크는 유지 */
  .obj__img--blink-sign { animation: obj-blink-sign 1.998801s linear infinite !important; }
  .obj__img--blink-mirror { animation: obj-blink-mirror 1.79914s linear infinite !important; }
  .obj__img--blink-engine { animation: obj-blink-engine 2.000115s linear infinite !important; }
  .obj__img--flip { animation: obj-flip-mid 0.798999s linear infinite !important; }
  .obj__img--flip-b { animation: obj-flip 0.798999s linear infinite !important; }
  .loader { transition: opacity 800ms var(--ease-out) !important; }
  .landing { transition: opacity 600ms var(--ease-out) !important; }
  .landing__enter { transition: opacity 800ms var(--ease-out) !important; }
  .coming-soon { transition: opacity 140ms linear !important; }
  .obj__img--selected { transition: opacity 0.25s ease !important; }
  .responsive-popup__motion { transition: opacity 220ms linear !important; }
  .responsive-popup.is-open .responsive-popup__motion { transition: opacity 500ms var(--ease-out) 250ms !important; }
  .responsive-popup.is-backdrop-instant.is-open .responsive-popup__motion { transition: opacity 500ms var(--ease-out) !important; }
  /* 딤·블러는 움직임이 아니라 순수 시각 효과라 모션 최소화에서도 유지한다 */
  .resource-loading {
    transition: opacity 200ms linear, background-color 200ms linear, backdrop-filter 200ms linear,
      -webkit-backdrop-filter 200ms linear !important;
  }
  .responsive-popup__backdrop {
    transition: background-color 220ms linear, backdrop-filter 220ms linear, -webkit-backdrop-filter 220ms linear !important;
  }
  .responsive-popup.is-open .responsive-popup__backdrop {
    transition: background-color 250ms var(--ease-out), backdrop-filter 250ms var(--ease-out), -webkit-backdrop-filter 250ms var(--ease-out) !important;
  }
  .usp-popup__start { transition: opacity 500ms var(--ease-out) !important; }
  .usp-popup__screen--step { transition: opacity 600ms var(--ease-out), visibility 600ms !important; }
  .usp-step4-frame { transition: opacity 600ms var(--ease-out) !important; }
  .usp-step4-dialog { transition: opacity 500ms var(--ease-out) !important; }
  .usp-push { transition: opacity 400ms var(--ease-out) !important; }
  .usp-caption { transition: opacity 500ms var(--ease-out) !important; }
  .usp-game-result { transition: opacity 400ms var(--ease-out), visibility 400ms !important; }
  .easter-screen { transition: opacity 600ms var(--ease-out), visibility 600ms !important; }
  .easter-feedback { transition: opacity 250ms var(--ease-out), visibility 250ms !important; }
  .easter-game__title { transition: opacity 400ms var(--ease-out) !important; }
  .easter-game__guide { transition: opacity 500ms var(--ease-out) !important; }
  .easter-game__hud { transition: opacity 400ms var(--ease-out) !important; }
  .photo-popup__menu-img,
  .photo-camera__frame { transition: opacity 0.25s ease !important; }
  .photo-camera__video { transition: opacity 400ms var(--ease-out) !important; }
  .photo-camera__shutter { transition: opacity 300ms var(--ease-out) !important; }
  /* 슬라이드는 이동 모션 — 모션 최소화 환경에선 제자리 크로스페이드로 대체(사용자 확정) */
  .photo-popup__select {
    transform: none !important;
    opacity: 0;
    transition: opacity 250ms linear !important;
  }
  .photo-popup__select.is-current { opacity: 1; }
  .photo-mode { transition: opacity 300ms var(--ease-out), visibility 300ms !important; }
}