: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;
}

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

* {
  box-sizing: border-box;
  /* 사용자 요청: 한 손가락 스크롤만 허용하고 핀치·더블탭 확대는 차단한다. */
  touch-action: pan-x pan-y;
}

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

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;
}

/*
 * 앱 셸 — 모바일·태블릿은 전체 폭, PC는 최대 1440 CSS px.
 * 100vh 다음 100dvh 순서 유지(구형 폴백, SCENE_SPEC §8).
 */
.app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  isolation: isolate;
  overflow: hidden;
  background: #050605;
}

/* transform은 fixed 팝업·랜딩·개발 UI의 기준도 앱 경계로 묶는다. */
.app.is-desktop {
  left: 50%;
  max-width: 1440px;
  height: var(--app-height, 100dvh);
  transform: translateX(-50%);
}

/* 홈/랜딩은 기존 표시 높이. 작품소개·이벤트는 독립적인 전체 뷰포트 높이. */
.app.is-desktop .landing,
.app.is-desktop .scene {
  height: 100%;
}

/* Only these two reading views may extend below the home shell's height.
   Width still comes from the shell: desktop <=1440px, mobile full width. */
.app.has-reading-view { overflow: visible; }

.app.is-desktop .qr-dialog__panel {
  max-height: calc(var(--app-height) - 1.75rem);
}

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.106) — 배경 등장 0.5초 뒤 ENTER 디졸브, 화면 탭으로 홈 진입.
 * 배경은 앱 너비 100%에 원본 비율로 맞춘다. 낮은 화면은 차량 중심 크롭, 하단이 닿으면 하단 고정(v0.200).
 */
.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;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

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

.landing__enter {
  position: absolute;
  top: 85.5871886121%; /* WEB 0929 LANDING _ INTRO: The Empowered TUCSON, x310 y481 w380 h41. */
  left: 31%;
  width: 38%;
  height: auto;
  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;
}

/* 우상단 개발 도구 — 배포 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;
}

body:has(#uspPopup:not([hidden]), #easterLanding:not([hidden])) .debug-tools { z-index: 75; }

.debug-tools__panel {
  width: 9.25rem;
  max-height: calc(100dvh - 3.25rem);
  overflow-y: auto;
  padding: 0.5625rem;
  border: 1px solid #454545;
  border-radius: 0.125rem;
  background: #111;
}

#debugResetUspProgress { margin-top: 0.375rem; }

.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: pan-x pan-y;
}

.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);
  }
}

/*
 * 원작 소개(모선, 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;
}

.intro-view__content > img {
  display: block;
  width: 100%;
  height: auto;
  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 유지 */
}

/* Full-screen home sign: source text proportions, no fitted popup canvas. */
.catalog-view__canvas { position: absolute; inset: 0; }
.catalog-view__background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.catalog-view__content { width: 100%; box-sizing: border-box; padding: 6.2% 21% 3.2% 11.7%; will-change: transform; }
.event-popup__content-img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
#eventPopupScroll:focus-visible { outline: .125rem solid #fff; outline-offset: -.125rem; }

/*
 * 포스터 촬영 팝업(룸미러) — 전용 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 {
  transition-property: none !important; /* Instant hide; WAAPI owns the later dissolve. */
  top: 1.5625rem;
  left: 53.5rem; /* Frame 2085672603: icon (862,31), fixed across all photo frames. */
}

.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;
}

/* Section 2: four live poster cards, with the original carousel transition. */
.photo-popup__select { pointer-events: auto; }
.photo-frame-slot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 43.75rem;
  height: 27.5rem;
  transform: translateX(-50%);
  overflow: hidden;
}
.photo-frame-slot--portrait { width: 22.125rem; }
.photo-frame-backdrop,
.photo-frame-poster,
.photo-camera-snapshot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.photo-frame-backdrop { z-index: 0; }
.photo-frame-slot .photo-camera-stage,
.photo-camera-snapshot { z-index: 1; }
/* Keep camera compositor edges inside the artwork at fractional popup scales.
   Clip without resizing, so the camera crop and outgoing slide stay aligned. */
.photo-frame-slot .photo-camera-stage,
.photo-camera-snapshot { clip-path: inset(0.1875rem); }
.photo-frame-slot .photo-camera-stage {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent;
}
.photo-frame-slot .photo-camera__frame { opacity: 1; z-index: 2; }
.photo-frame-poster { z-index: 3; opacity: 0; transition: opacity 250ms ease; }
.is-person-hidden .photo-frame-poster { opacity: 1; }
.photo-popup.is-person-hidden .photo-camera__fallback { display: none; }
.photo-popup .photo-camera__fallback {
  inset: 1.9375rem auto auto 9.375rem;
  width: 43.75rem;
  height: 27.5rem;
}
.photo-popup.is-portrait-frame .photo-camera__fallback,
.photo-popup.is-portrait-frame .photo-result__image { left: 20.1875rem; width: 22.125rem; }
.photo-popup .photo-camera__flash {
  inset: 1.9375rem auto auto 9.375rem;
  width: 43.75rem;
  height: 27.5rem;
  z-index: 4;
}
.photo-popup.is-portrait-frame .photo-camera__flash { left: 20.1875rem; width: 22.125rem; }
.photo-popup .photo-camera__count { top: 15.6875rem; z-index: 5; }
.photo-person-toggle {
  position: absolute;
  left: 34.1875rem;
  top: 30.625rem;
  width: 3.25rem;
  height: 2.3125rem;
}
.photo-person-toggle img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 250ms ease; }
.photo-person-toggle__off { opacity: 0; }
.is-person-hidden .photo-person-toggle__on { opacity: 0; }
.is-person-hidden .photo-person-toggle__off { opacity: 1; }
.photo-popup .photo-camera__shutter {
  top: 30.125rem;
  left: 29.5625rem;
  bottom: auto;
  width: 3.625rem;
  height: 3.625rem;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}
.photo-popup .photo-camera__shutter:active { transform: scale(0.92); }
.photo-camera__shutter img,
.photo-result__button img { display: block; width: 100%; height: 100%; pointer-events: none; }
.photo-popup .photo-result__actions { left: 25.0625rem; top: 30.75rem; bottom: auto; gap: 0.75rem; transform: none; }
.photo-popup .photo-result__button { width: 5.9375rem; height: 2.3125rem; min-width: 0; min-height: 0; border: 0; border-radius: 0; background: none; }
.photo-popup .photo-popup__menu { left: 18.357605rem; top: 30.957rem; width: 26.013125rem; height: 1.866rem; pointer-events: none; }
.photo-popup .photo-popup__menu-img { width: 100%; height: 100%; }
.photo-popup .photo-popup__menu-hits button { position: absolute; top: -0.3rem; width: 2.5rem; height: 2.5rem; pointer-events: auto; }
.photo-popup__menu-hits button:nth-child(1) { left: 0; }
.photo-popup__menu-hits button:nth-child(2) { left: 2.6rem; }
.photo-popup__menu-hits button:nth-child(3) { left: 21.25rem; }
.photo-popup__menu-hits button:nth-child(4) { left: 23.8rem; }

.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;
}

/* Portrait art surrounds a transparent person layer; never reveal raw room pixels. */
.photo-camera-stage.has-cutout .photo-camera__video { visibility: hidden; }
.photo-camera__cutout {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
  pointer-events: none;
}
.photo-camera__cutout[hidden] { display: none; }

/* Keep artwork and camera controls above the camera layer. */
.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 {
  /* 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;
}

/* WEB 0914 Easter prototype: all artwork shares the 1000 x 562 coordinate system. */
.easter-screen { pointer-events: none; }
.easter-screen.is-active { pointer-events: auto; }
.easter-screen .easter-landing__stage { overflow: hidden; background-color: #2f2d39; }
.easter-art { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; }
.easter-exhibition-scroll { position: absolute; left: 7.3125rem; top: 3.875rem; width: 42.0625rem; height: 31.25rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; padding-bottom: 2rem; }
.easter-exhibition-scroll::-webkit-scrollbar { display: none; }
.easter-exhibition-scroll img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.easter-exhibition-scroll:focus-visible { outline: .125rem solid #47ee9d; outline-offset: .25rem; }
#easterExhibitionScreen.is-active ~ .easter-landing__chrome { visibility: hidden; }
.easter-plane { position: absolute; inset: 0; pointer-events: none; }
.easter-hit { position: absolute; padding: 0; border: 0; background: transparent; pointer-events: auto; }
.easter-hit img { width: 100%; height: 100%; display: block; pointer-events: none; }
.easter-hit:focus-visible { outline: .125rem solid #47ee9d; outline-offset: .25rem; border-radius: .2rem; }
.easter-car { position: absolute; left: 5.0625rem; top: 16rem; width: 11.3125rem; height: 7.375rem; pointer-events: none; }
.easter-car img { transform-origin: center; }
.easter-gate-mask { position: absolute; left: 38.63061525rem; top: 1.304931625rem; width: 18.642704rem; height: 21.8079395rem; overflow: hidden; pointer-events: none; }
#easterGameMarker { will-change: transform; }
.easter-home { position: absolute; left: 53.125rem; top: 1.25rem; width: 7.5rem; height: 2.5rem; pointer-events: auto; padding: 0; }
.easter-home img { display: block; width: 100%; height: 100%; }
.easter-game-actions { position: absolute; inset: 0; pointer-events: none; }
.easter-game-actions button { position: absolute; top: 30rem; width: 9rem; height: 3.4375rem; font-family: inherit; font-size: 1.125rem; font-weight: 600; color: #fff; border: .0625rem solid #aab5b5; border-radius: .5rem; background: #293033; pointer-events: auto; }
#easterFailRetry { left: 2rem; }
.easter-game-actions button:focus-visible { outline: .125rem solid #47ee9d; }
.easter-reward-received { position: absolute; margin: 0; left: 14.375rem; top: 30.25rem; width: 34rem; height: 2.25rem; background: #596464; color: #171717; text-align: center; font-size: 1.8rem; font-weight: 700; line-height: 2.25rem; }
.easter-landing__chrome { pointer-events: none; }
#easterLanding [hidden] { display: none !important; }

/* step5 카메라 — 시안 실측 영역 (249,120) 511×322, 프레임(615×418)은 중심 정렬 오버레이 */
.easter-camera {
  position: absolute;
  top: 8.25rem;
  left: 14.25rem;
  width: 25rem;
  height: 18.75rem;
  border-radius: .8125rem;
  overflow: hidden;
}
.easter-camera__scan-border {
  position: absolute;
  top: 1.9375rem;
  left: 4.75rem;
  width: 15.4375rem;
  height: 15.5rem;
  border: .0625rem solid rgba(255,255,255,.8);
  border-radius: .9375rem;
  pointer-events: none;
}

.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는 이미지 내부 타이틀과 상단 버튼이 보이도록 짧은 화면에서 폭을 줄인다. 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_1006_38748_opacity_0: 50% 투명, 92.7% 복귀 후 유지. 주기는 기존 ≈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;
  }
  50% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0;
  }
  92.7% {
    opacity: 1;
  }
  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_1006_38677_opacity_0. 영상처럼 밝게 시작하도록 49.92% 지점부터 재생.
   Mask group(1210×1213)은 버튼 캔버스(1222×1212) 중심에 원본 비율 그대로 배치한다. */
.obj__img--engine-mask {
  inset: auto;
  left: 0.490998%;
  top: -0.041254%;
  width: 99.018003%;
  height: 100.082508%;
}

.obj__img--blink-engine {
  opacity: 0;
  animation: obj-blink-engine 2.000115s linear -0.998457408s infinite;
}

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

/* 우측 미러 — 갈색 얼굴 전환은 Side R.mp4에서 측정, 글리치는 사용자 제공 키프레임 그대로. */
.obj[data-object-id="sidemirror-right"] {
  isolation: isolate; /* Screen 합성은 미러 이미지 안에서만 처리한다. */
}

.obj__img--blink-mirror-right {
  animation: obj-mirror-right-face 3.59667s linear infinite;
}

.obj__img--glitch-mirror-right {
  mix-blend-mode: screen;
  animation: kf_1005_38576_opacity_0 3.59667s linear infinite;
}

@keyframes obj-mirror-right-face {
  0%, 61.216% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0;
  }
  66.738% { opacity: 1; }
  94.5% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 1;
  }
  100% { opacity: 0; }
}

@keyframes kf_1005_38576_opacity_0 {
  0% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0;
  }
  38.85% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0.04;
  }
  44.633% { opacity: 1; }
  47.247% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 1;
  }
  49.944% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0.5;
  }
  52.78% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 1;
  }
  53.781% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0.4;
  }
  54.67% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 1;
  }
  55.699% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0.65;
  }
  57.201% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0.9;
  }
  59.286% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 1;
  }
  61.216% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    opacity: 0.7;
  }
  66.738% { opacity: 0; }
  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;
}

.home-state { transition: opacity .25s ease; }
.obj[data-object-id="roommirror"] .home-state,
.obj[data-object-id="pleos-connect"] .home-state { transition: none !important; }
.obj--home-motion.is-selected .home-default { opacity: 0; }
.home-motion-layer, .home-motion-mask { position: absolute; display: block; pointer-events: none; }
.home-motion-mask { mask: var(--home-mask) 0 0 / 100% 100% no-repeat; -webkit-mask: var(--home-mask) 0 0 / 100% 100% no-repeat; }
.home-motion-layer { user-select: none; -webkit-user-select: none; }

/* 탭 눌림 표시 — 선택 상태와 함께 살짝 눌리는 스케일 */
.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;
}

.usp-sound-retry { position: absolute; right: 2rem; bottom: 1.2rem; z-index: 10001; min-width: calc(44px / var(--responsive-popup-scale)); min-height: max(3rem, calc(44px / var(--responsive-popup-scale))); padding: .5rem 1rem; border: 1px solid #c4e7eb; border-radius: .5rem; background: #182226; color: #fff; font-size: max(1rem, calc(14px / var(--responsive-popup-scale))); cursor: pointer; }
.usp-sound-retry[hidden] { display: none; }
.usp-sound-retry:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

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

/* WEB 0929 + PROTOTYPE: P_001, 720×420 design coordinates / 14.4. */
.usp-popup__screen--intro {
  background: url("./assets/usp/0/intro-bg-0929.webp") center / cover no-repeat, #0a0806;
}

/* The Figma export contains exact Light/Medium glyphs, gradient and baselines.
   Text spans remain for accessibility and the existing typing timing. */
.usp-popup__text {
  --usp-story-image: url("./assets/usp/0/story-art-0929-detail.webp");
  position: absolute;
  top: 2.083333333rem;
  left: 4.652777778rem;
  width: 40.555555556rem;
  height: 15.277777778rem;
  margin: 0;
  overflow: hidden;
  color: transparent;
  font-size: 1.25rem;
  line-height: 1.2;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.usp-popup__text.is-complete { background-image: var(--usp-story-image); }
.usp-popup__story-source { display: none; }

.usp-popup__story-note {
  position: absolute;
  left: 7.708333333rem;
  top: 24.722222222rem;
  width: 34.444444444rem;
  height: 2.361111111rem;
  pointer-events: none;
}

/* 완성 문장의 중앙 배치를 먼저 확보한 뒤 글자만 각 줄의 왼쪽부터 공개한다. */
.usp-popup__typing-line {
  position: absolute;
  left: 0;
  width: 100%;
}
.usp-popup__typing-line--brand { font-weight: 500; }
.usp-popup__typing-char {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  color: transparent;
  visibility: hidden;
  background-image: var(--usp-story-image);
  background-repeat: no-repeat;
  background-size: 40.555555556rem 15.277777778rem;
}
.usp-popup__typing-char.is-visible { visibility: visible; }
.usp-popup__text.is-complete .usp-popup__typing-char { background-image: none; }

.usp-popup__start {
  position: absolute;
  top: 19.861111111rem; /* Figma y286, 340×50 */
  left: 50%;
  width: 23.611111111rem;
  height: 3.472222222rem;
  transform: translate(-50%, 0);
  opacity: 0;
  transition: opacity 600ms ease-in-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-popup__screen[inert] {
  pointer-events: none !important;
}

.usp-popup__screen--prologue {
  transition: opacity 600ms ease-in-out, visibility 600ms;
}

.usp-popup__screen--prologue .usp-step4-frame,
.usp-popup__screen--prologue .usp-step4-dialog,
.usp-popup__screen--prologue .usp-caption,
.usp-popup__screen--prologue .usp-push {
  transition: opacity 600ms ease-in-out;
}

.usp-popup__screen--prologue .usp-caption {
  top: 21.806641rem; /* Figma render bounds: y 314.015625, glow included */
}

.usp-popup__screen--prologue .usp-push { transform: translate(-50%, 0); }

/* WEB 0914, 720×420: 카드 (95/375,170) 250×170. */
.usp-vehicle-card {
  position: absolute;
  top: 11.805556rem;
  width: 17.361111rem;
  height: 11.805556rem;
}

.usp-vehicle-card--scooter { left: 6.597222rem; }
.usp-vehicle-card--tucson { left: 26.041667rem; }
.usp-vehicle-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  transition: opacity 600ms ease-in-out;
}
.usp-vehicle-card__disabled { opacity: 0; }
.usp-vehicle-card:disabled { cursor: default; }
.usp-vehicle-card:disabled .usp-vehicle-card__available { opacity: 0; }
.usp-vehicle-card:disabled .usp-vehicle-card__disabled { opacity: 1; }

.usp-scooter-retry {
  position: absolute;
  left: 16.041667rem;
  top: 22.013889rem;
  width: 17.916667rem;
  height: 4.166667rem;
}

.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 {
  position: absolute;
  width: 10.21rem;
  touch-action: pan-x pan-y;
  -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: 6.944444rem; /* Figma: (100, 132) 147×143 @720×420 */
  top: 9.166667rem;
  width: 10.2083rem;
}

/* step2 안내 텍스트는 Figma의 글로우 포함 렌더 영역을 사용한다. */
.usp-step2__text {
  position: absolute;
  top: 16.4583rem;
  left: 15.3472rem;
  width: 19.3056rem;
  pointer-events: none;
  user-select: none;
}

.usp-hold-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 {
    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 2s linear both,
    kf-usp-gleo-translate 2s linear both;
}

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

@keyframes kf-usp-gleo-translate {
  0% {
    animation-timing-function: cubic-bezier(0.009, 0.998, 1, 1);
    translate: 0 3.576388889rem; /* 51.5 design px / 14.4 */
  }
  50.071%, 100% {
    translate: 0 0;
  }
}

/* WEB 0914 P012: exported render bounds; original Motion CSS in prologue-motion.json. */
.usp-ai-intro__band,
.usp-ai-intro__text {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.usp-ai-intro__band {
  left: -3.958333333rem;
  top: 12.847222222rem;
  width: 58.194444444rem;
}
.usp-ai-intro__text {
  left: 11.077033149rem;
  top: 14.167751736rem;
  width: 28.125rem; /* 810 export px / 2 / 14.4 */
}
#uspAiIntroScreen.is-active .usp-ai-intro__band {
  animation: kf-usp-ai-band-opacity 2.461384s linear both;
}
#uspAiIntroScreen.is-active .usp-ai-intro__text {
  animation: kf-usp-ai-text-opacity 2.461384s linear both,
    kf-usp-ai-text-translate 2.461384s linear both;
}
@keyframes kf-usp-ai-band-opacity {
  0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; }
  14.87% { opacity: 1; }
  85.305% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; }
  100% { opacity: 0; }
}
@keyframes kf-usp-ai-text-opacity {
  0% { opacity: 0; }
  5.356% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; }
  12.055% { opacity: 1; }
  79.861% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; }
  97.189%, 100% { opacity: 0; }
}
@keyframes kf-usp-ai-text-translate {
  0% { translate: 46.319444444rem 0; }
  5.356% { animation-timing-function: cubic-bezier(0.998, 0.001, 1, 1); translate: 46.319444444rem 0; }
  24.561%, 79.861% { translate: 0 0; }
  97.189%, 100% { translate: -40.486111111rem 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: pan-x pan-y;
}

.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;
}

/* Stage 02: source composition keeps its proportions inside the existing 720:420 window. */
.usp-s2-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.s2-video, .s4-video, .s2-video-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.s2-video, .s4-video { opacity: 0; transition: none !important; }
.usp-s2-motion.is-ready :is(.s2-video, .s4-video), .usp-s2-motion.is-playing :is(.s2-video, .s4-video) { opacity: 1; }
.s4-rescue-indicator { position: absolute; z-index: 2; left: 3.472222rem; top: 0; width: 43.055556rem; height: 2.291667rem; pointer-events: none; }
.s2-video-retry { position: absolute; z-index: 4; left: 50%; top: 60%; transform: translateX(-50%); min-height: max(3.5rem, 44px); padding: .7rem 1.2rem; border: 1px solid white; border-radius: .4rem; color: white; background: #002c5f; font: inherit; cursor: pointer; pointer-events: auto; }
.s2-video-retry[hidden] { display: 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: pan-x pan-y;
}

/* 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: pan-x pan-y;
}

.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; }
}

/* 스테이지 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: pan-x pan-y;
}

.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: pan-x pan-y;
}

.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: pan-x pan-y;
}

.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: pan-x pan-y;
}

.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);
  }
}

/* WEB 0914: 탑승 안내를 닫은 뒤 직접 탭하는 글레오 호출 버튼. */
.usp-push {
  position: absolute;
  bottom: 1.388889rem; /* Figma: (190, 339) 340×61 @720×420 */
  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;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

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

/*
 * 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-mirror-right { animation: obj-mirror-right-face 3.59667s linear infinite !important; }
  .obj__img--glitch-mirror-right { animation: kf_1005_38576_opacity_0 3.59667s linear infinite !important; }
  .obj__img--blink-engine { animation: obj-blink-engine 2.000115s linear -0.998457408s 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 600ms ease-in-out !important; }
  .usp-popup__screen--step { transition: opacity 600ms var(--ease-out), visibility 600ms !important; }
  .usp-popup__screen--prologue { transition: opacity 600ms ease-in-out, visibility 600ms !important; }
  .usp-popup__screen--prologue .usp-step4-frame,
  .usp-popup__screen--prologue .usp-step4-dialog,
  .usp-popup__screen--prologue .usp-caption,
  .usp-popup__screen--prologue .usp-push,
  .usp-vehicle-card img { transition: opacity 600ms ease-in-out !important; }
  /* 프롤로그는 사용자 요청에 따라 Figma 원본 모션을 유지한다. */
  #uspStep5Screen.is-active .usp-step5__gleo {
    animation: kf-usp-gleo-opacity 2s linear both, kf-usp-gleo-translate 2s linear both !important;
  }
  #uspAiIntroScreen.is-active .usp-ai-intro__band {
    animation: kf-usp-ai-band-opacity 2.461384s linear both !important;
  }
  #uspAiIntroScreen.is-active .usp-ai-intro__text {
    animation: kf-usp-ai-text-opacity 2.461384s linear both, kf-usp-ai-text-translate 2.461384s linear both !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-frame-poster,
  .photo-person-toggle 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; }
}





/* Stage 01 — generated Figma Motion, WEB 0914 + PROTOTYPE. Design px / 14.4 = rem. */
@property --s1-rotation { syntax: '<angle>'; initial-value: 0rad; inherits: false; }
.usp-popup__screen--stage1.is-active .s1-motion-1158-122326 { animation: kf_1158_122326_opacity_0 2s linear, kf_1158_122326_translate_0 2s linear !important; animation-fill-mode: both !important; }
@keyframes kf_1158_122326_opacity_0 { 0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 49.95% { opacity: 1; } 100% { opacity: 1; } } @keyframes kf_1158_122326_translate_0 { 0% { animation-timing-function: cubic-bezier(0.01, 1, 1, 1); translate: 0rem 3.576389rem; } 49.95% { translate: 0rem 0rem; } 100% { translate: 0rem 0rem; } }
.usp-popup__screen--stage1.is-active .s1-motion-1158-124540 { animation: kf_1158_124540_opacity_0 2.401s linear !important; animation-fill-mode: both !important; }
@keyframes kf_1158_124540_opacity_0 { 0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 12.411% { opacity: 1; } 87.255% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 100% { opacity: 0; } }
.usp-popup__screen--stage1.is-active .s1-motion-1158-124552 { animation: kf_1158_124552_opacity_0 2.401s linear, kf_1158_124552_translate_0 2.401s linear !important; animation-fill-mode: both !important; }
@keyframes kf_1158_124552_opacity_0 { 0% { opacity: 0; } 12.411% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 33.278% { opacity: 1; } 75.26% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 95.752% { opacity: 0; } 100% { opacity: 0; } } @keyframes kf_1158_124552_translate_0 { 0% { translate: 27.847222rem 0rem; } 12.411% { animation-timing-function: cubic-bezier(1, 0, 0, 1); translate: 27.847222rem 0rem; } 54.019% { translate: 0rem 0rem; } 75.26% { animation-timing-function: cubic-bezier(0.843, -0.003, 1, 1); translate: 0rem 0rem; } 95.752% { translate: -39.930556rem 0rem; } 100% { translate: -39.930556rem 0rem; } }
.usp-popup__screen--stage1.is-active .s1-motion-1158-124645 {  transform: rotate(calc(var(--s1-rotation) - 0rad)); animation: kf_1158_124645_rotate_0 1.801699s linear, kf_1158_124645_translate_0 1.801699s linear, kf_1158_124645_scale_0 1.801699s linear !important; animation-fill-mode: both !important; }
@keyframes kf_1158_124645_rotate_0 { 0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); --s1-rotation: 0rad; } 44.322% { --s1-rotation: -0.227rad; } 100% { --s1-rotation: -0.227rad; } } @keyframes kf_1158_124645_translate_0 { 0% { animation-timing-function: cubic-bezier(0.604, 0.001, 0.54, 1.414); translate: 0rem 15.504931rem; } 44.322% { translate: 0rem 0rem; } 90.907% { translate: 0.405556rem 1.756667rem; } 100% { translate: 0.405556rem 1.756667rem; } } @keyframes kf_1158_124645_scale_0 { 0% { scale: 1 1; } 44.322% { animation-timing-function: cubic-bezier(0.741, -0.004, 1, 1.002); scale: 1 1; } 100% { scale: 1.35 1.35; } }
.usp-popup__screen--stage1.is-active .s1-motion-1158-124673 {  transform: rotate(calc(var(--s1-rotation) - -0.22689280747935023rad)); animation: kf_1158_124673_rotate_0 2s linear, kf_1158_124673_scale_0 2s linear !important; animation-iteration-count: infinite !important; animation-fill-mode: both !important; }
@keyframes kf_1158_124673_rotate_0 { 0% { --s1-rotation: -0.454rad; } 100% { --s1-rotation: -0.454rad; } } @keyframes kf_1158_124673_scale_0 { 0% { scale: 1.35 1.35; } 100% { scale: 1.35 1.35; } }
.usp-s1-actor.is-flying.s1-motion-1178-144531 {  transform: rotate(calc(var(--s1-rotation) - -0.38587427052097745rad)); animation: kf_1178_144531_rotate_0 4.20389s linear, kf_1178_144531_translate_0 4.20389s linear !important;  animation-iteration-count: 1 !important;animation-fill-mode: both !important; }
@keyframes kf_1178_144531_rotate_0 { 0% { --s1-rotation: 0.073rad; } 78.209% { animation-timing-function: cubic-bezier(0, 0, 0, 0); --s1-rotation: 0.073rad; } 89.132% { animation-timing-function: cubic-bezier(0, 0, 0, 0); --s1-rotation: -0.386rad; } 100% { --s1-rotation: -0.881rad; } } @keyframes kf_1178_144531_translate_0 { 0% { translate: -11.947917rem 8.544861rem; } 78.209% { animation-timing-function: cubic-bezier(0, 0.918, 1, 1); translate: -11.947917rem 8.544861rem; } 89.132% { animation-timing-function: cubic-bezier(1, 0.001, 1, 1); translate: 1.59375rem -3.81625rem; } 100% { translate: 3.881042rem 11.313333rem; } }
.usp-s1-actor.is-flying.s1-motion-1178-144536 {  transform: rotate(calc(var(--s1-rotation) - 0.009598090657233438rad)); animation: kf_1178_144536_rotate_0 4.20389s linear, kf_1178_144536_translate_0 4.20389s linear !important;  animation-iteration-count: 1 !important;animation-fill-mode: both !important; }
@keyframes kf_1178_144536_rotate_0 { 0% { --s1-rotation: 0.556rad; } 48.305% { animation-timing-function: cubic-bezier(0.001, 0.928, 1, 1.004); --s1-rotation: 0.556rad; } 58.746% { animation-timing-function: cubic-bezier(0.984, 0.013, 1, 1.011); --s1-rotation: -0.403rad; } 69.135% { --s1-rotation: 1.65rad; } 100% { --s1-rotation: 1.65rad; } } @keyframes kf_1178_144536_translate_0 { 0% { translate: -0.069444rem 12.638889rem; } 48.305% { animation-timing-function: cubic-bezier(0.02, 0.833, 1, 1); translate: -0.069444rem 12.638889rem; } 58.746% { animation-timing-function: cubic-bezier(0.65, 0.002, 1, 0.731); translate: -0.902778rem -4.861111rem; } 69.135% { translate: 5.854722rem -20.390556rem; } 100% { translate: 5.854722rem -20.390556rem; } }
.usp-s1-actor.is-flying.s1-motion-1178-144541 {  transform: rotate(calc(var(--s1-rotation) - 0rad)); animation: kf_1178_144541_rotate_0 4.20389s linear, kf_1178_144541_translate_0 4.20389s linear !important;  animation-iteration-count: 1 !important;animation-fill-mode: both !important; }
@keyframes kf_1178_144541_rotate_0 { 0% { --s1-rotation: -0.293rad; } 34.574% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); --s1-rotation: -0.293rad; } 43.875% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); --s1-rotation: -0.244rad; } 53.129% { --s1-rotation: -0.385rad; } 100% { --s1-rotation: -0.385rad; } } @keyframes kf_1178_144541_translate_0 { 0% { translate: -0.38625rem 6.642292rem; } 34.574% { animation-timing-function: cubic-bezier(0.003, 1.001, 1, 1); translate: -0.38625rem 6.642292rem; } 43.875% { animation-timing-function: cubic-bezier(1, -0.002, 1, 1); translate: 0rem -4.722222rem; } 53.129% { translate: -4.444444rem -17.430556rem; } 100% { translate: -4.444444rem -17.430556rem; } }
.usp-s1-actor.is-flying.s1-motion-1178-144543 {  transform: rotate(calc(var(--s1-rotation) - 0rad)); animation: kf_1178_144543_rotate_0 4.20389s linear, kf_1178_144543_translate_0 4.20389s linear !important;  animation-iteration-count: 1 !important;animation-fill-mode: both !important; }
@keyframes kf_1178_144543_rotate_0 { 0% { --s1-rotation: 0.387rad; } 60.703% { animation-timing-function: cubic-bezier(0.02, 0.942, 0.998, 1.006); --s1-rotation: 0.387rad; } 71.064% { animation-timing-function: cubic-bezier(1, 0.007, 1, 1.005); --s1-rotation: -0.38rad; } 81.372% { --s1-rotation: -1.771rad; } 100% { --s1-rotation: -1.771rad; } } @keyframes kf_1178_144543_translate_0 { 0% { translate: -4.366806rem 7.338889rem; } 60.703% { animation-timing-function: cubic-bezier(0.003, 1.001, 1, 1); translate: -4.366806rem 7.338889rem; } 71.064% { animation-timing-function: cubic-bezier(1, -0.002, 1, 1); translate: -1.42rem -7.600556rem; } 81.372% { translate: -11.808472rem 9.637222rem; } 100% { translate: -11.808472rem 9.637222rem; } }
.usp-s1-actor.is-flying.s1-motion-1178-144545 {  transform: rotate(calc(var(--s1-rotation) - 0rad)); animation: kf_1178_144545_rotate_0 4.20389s linear, kf_1178_144545_translate_0 4.20389s linear !important;  animation-iteration-count: 1 !important;animation-fill-mode: both !important; }
@keyframes kf_1178_144545_rotate_0 { 0% { --s1-rotation: 0rad; } 16.359% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); --s1-rotation: 0rad; } 24.47% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); --s1-rotation: -0.273rad; } 32.267% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); --s1-rotation: -0.039rad; } 40.425% { --s1-rotation: 0rad; } 100% { --s1-rotation: 0rad; } } @keyframes kf_1178_144545_translate_0 { 0% { translate: -2.013958rem 18.402778rem; } 16.359% { animation-timing-function: cubic-bezier(0.853, 0.004, 0.028, 1.003); translate: -2.013958rem 18.402778rem; } 28.422% { animation-timing-function: cubic-bezier(0.987, 0, 1, 1); translate: 0rem 0rem; } 40.425% { translate: 12.638889rem 7.430556rem; } 100% { translate: 12.638889rem 7.430556rem; } }
.usp-s1-actor.is-flying.s1-motion-1178-144550 {  transform: rotate(calc(var(--s1-rotation) - 0rad)); animation: kf_1178_144550_rotate_0 4.20389s linear, kf_1178_144550_translate_0 4.20389s linear !important;  animation-iteration-count: 1 !important;animation-fill-mode: both !important; }
@keyframes kf_1178_144550_rotate_0 { 0% { --s1-rotation: 0rad; } 7.364% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); --s1-rotation: 0rad; } 14.551% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); --s1-rotation: -0.273rad; } 21.459% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); --s1-rotation: -0.039rad; } 28.688% { --s1-rotation: 0rad; } 100% { --s1-rotation: 0rad; } } @keyframes kf_1178_144550_translate_0 { 0% { translate: -2.013958rem 18.402778rem; } 7.364% { animation-timing-function: cubic-bezier(0, 1.002, 1, 1); translate: -2.013958rem 18.402778rem; } 18.053% { animation-timing-function: cubic-bezier(0.987, 0, 1, 1); translate: 0rem 0rem; } 28.688% { translate: 7.847153rem -9.861111rem; } 42.993% { translate: 8.749931rem -10.069375rem; } 100% { translate: 8.749931rem -10.069375rem; } }
.usp-s1-fall {  transform: rotate(calc(var(--s1-rotation) + 0.386rad)); animation: kf_1145_17390_rotate_0 0.699632s linear, kf_1145_17390_translate_0 0.699632s linear !important; animation-fill-mode: both !important; }
@keyframes kf_1145_17390_rotate_0 { 0% { --s1-rotation: -0.386rad; } 16.866% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); --s1-rotation: -0.386rad; } 100% { --s1-rotation: -1.895rad; } } @keyframes kf_1145_17390_translate_0 { 0% { translate: 0rem 0rem; } 16.866% { translate: 0rem 0rem; } 100% { translate: 0.23625rem 24.610278rem; } }
.usp-s1-hit { animation: kf_1145_17400_opacity_0 0.699632s linear !important; animation-fill-mode: both !important; }
@keyframes kf_1145_17400_opacity_0 { 0% { opacity: 0; } 13.721% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 16.866% { opacity: 1; } 24.643% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 57.66% { opacity: 0; } 100% { opacity: 0; } }
.usp-popup__screen--stage1 { transition: opacity 600ms ease-in-out, visibility 600ms !important; isolation: isolate; }
.usp-popup__screen--stage1[inert] { pointer-events: none !important; }
:is(.usp-popup__screen--stage1, .usp-s1-route-panel) .s1-layer, :is(.usp-popup__screen--stage1, .usp-s1-route-panel) .s1-control { position: absolute; margin: 0; padding: 0; user-select: none; }
:is(.usp-popup__screen--stage1, .usp-s1-route-panel) .s1-layer { pointer-events: none; object-fit: fill; }
:is(.usp-popup__screen--stage1, .usp-s1-route-panel) .s1-control { border: 0; background: transparent; touch-action: none; }
.s1-control img { display: block; width: 100%; height: 100%; pointer-events: none; }
.s1-control:focus-visible { outline: 0.15rem solid #00aad2; outline-offset: 0.1rem; }
.usp-popup__screen--stage1 .usp-s1-route { transition: opacity 600ms ease-in-out !important; }
.s1-selection { opacity: 0; transition: opacity 250ms ease-in-out; }
.s1-selection.is-selected { opacity: 1; }
.usp-s1-route-panel .s1-route-card.is-done { background: rgb(255 255 255 / 70%); border-radius: 0.35rem; cursor: default; }
.s1-route-card.is-done::after { content: '체험 완료'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.65rem; font-weight: 700; color: #595959; text-shadow: 0 0 0.2rem #fff; }
.s1-route-start { transition: filter 200ms, opacity 200ms; }
.s1-route-start:disabled { opacity: 0.45; }
.usp-s1-route-panel .s1-route-start:disabled { opacity: 1; background: rgb(255 255 255 / 45%); }
.usp-s1-actor { opacity: 0; pointer-events: none; transform-origin: center; will-change: transform, translate; }
.usp-s1-actor.is-flying { opacity: 1; pointer-events: auto; }
.usp-s1-actor.is-hit { opacity: 0; pointer-events: none; }
.usp-s1-actor:disabled { pointer-events: none; }
.usp-s1-effects { position: absolute; inset: 0; pointer-events: none; }
.usp-s1-fall { position: absolute; inset: 0; pointer-events: none; }
.usp-s1-frozen { pointer-events: none !important; }
.usp-s1-frozen .usp-s1-hit { position: absolute; left: var(--s1-core-x, 50%); top: var(--s1-core-y, 50%); width: 10.347222rem; height: 10.416667rem; transform: translate(-50%, -50%); pointer-events: none; }
.usp-s1-front { pointer-events: none; }
/* S01_009/010 share one scene. Figma design pixels are divided by 14.4. */
.usp-s1-game-toast { left:3.333333333rem; top:-0.277777778rem; width:43.333333333rem; height:2.708333333rem; z-index:10; translate:0 -2.465277778rem; }
.usp-s1-game-toast.is-entering { animation:kf_s1_toast_enter 0.798958s linear both !important; }
.usp-s1-game-toast.is-exiting { animation:kf_s1_toast_exit 0.798958s linear reverse both !important; }
@keyframes kf_s1_toast_enter {
  0% { translate:0 -2.465277778rem; }
  24.928% { animation-timing-function:cubic-bezier(0.01, 1.002, 1, 1); translate:0 -2.465277778rem; }
  100% { translate:0 0; }
}
/* A separate animation name restarts the same keyframes in reverse on game end. */
@keyframes kf_s1_toast_exit {
  0% { translate:0 -2.465277778rem; }
  24.928% { animation-timing-function:cubic-bezier(0.01, 1.002, 1, 1); translate:0 -2.465277778rem; }
  100% { translate:0 0; }
}
.usp-s1-target { opacity: 0; transition: opacity 250ms ease-in-out; border-radius: 2.083333rem; backdrop-filter: blur(0.694444rem); -webkit-backdrop-filter: blur(0.694444rem); }
.usp-s1-target.is-visible { opacity: 1; }
.usp-s1-feedback { opacity: 0; transition: opacity 100ms ease-in-out; }
.usp-s1-feedback.is-visible { opacity: 1; }
#uspS1Score { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* User-requested Figma timelines remain active when the OS requests reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .usp-popup__screen--stage1 { transition: opacity 600ms ease-in-out, visibility 600ms !important; }
}

/* Stage 03 — original Figma Motion; design pixels / 14.4 = rem. */
.usp-popup__screen--stage3.is-active .s3-motion-1178-148757 { animation: kf_1178_148757_opacity_0 2.401s linear !important; animation-fill-mode: both !important; }
@keyframes kf_1178_148757_opacity_0 { 0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 12.411% { opacity: 1; } 87.255% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 100% { opacity: 0; } }
.usp-popup__screen--stage3.is-active .s3-motion-1178-148769 { animation: kf_1178_148769_opacity_0 2.401s linear, kf_1178_148769_translate_0 2.401s linear !important; animation-fill-mode: both !important; }
@keyframes kf_1178_148769_opacity_0 { 0% { opacity: 0; } 12.411% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 33.278% { opacity: 1; } 75.26% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 95.752% { opacity: 0; } 100% { opacity: 0; } } @keyframes kf_1178_148769_translate_0 { 0% { translate: 27.847222rem 0rem; } 12.411% { animation-timing-function: cubic-bezier(1, 0, 0, 1); translate: 27.847222rem 0rem; } 54.019% { translate: 0rem 0rem; } 75.26% { animation-timing-function: cubic-bezier(0.843, -0.003, 1, 1); translate: 0rem 0rem; } 95.752% { translate: -39.930556rem 0rem; } 100% { translate: -39.930556rem 0rem; } }

.usp-popup__screen--stage3 { transition: opacity 600ms ease-out, visibility 600ms !important; isolation: isolate; overflow: hidden; }
.usp-popup__screen--stage3[inert] { pointer-events: none !important; }
.usp-popup__screen--stage3 .s3-layer, .usp-popup__screen--stage3 .s3-control { position: absolute; margin: 0; padding: 0; user-select: none; }
.usp-popup__screen--stage3 .s3-layer { pointer-events: none; object-fit: fill; }
.usp-popup__screen--stage3 .s3-control { border: 0; background: transparent; touch-action: none; }
.s3-control img { display: block; width: 100%; height: 100%; pointer-events: none; }
.s3-control:focus-visible { outline: 0.15rem solid #00aad2; outline-offset: 0.1rem; }
.s3-item { cursor: grab; transform-origin: center; will-change: transform, opacity; }
.s3-item.is-dragging { cursor: grabbing; }
.s3-item .s3-item-selected { position: absolute; inset: 0; opacity: 0; }
.s3-item.is-dragging > img:first-child { opacity: 0; }
.s3-item.is-dragging .s3-item-selected { opacity: 1; }
.usp-popup__screen--stage3 [id$="Toast"] { z-index: 21; }
#uspS3GameScreen img[src$="/game-indicator.webp"] { z-index: 20; }
#uspS3GameScreen { touch-action: none; }
.s3-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Stage 04 — original Figma Motion; design pixels / 14.4 = rem. */
.usp-popup__screen--stage4.is-active .s4-motion-1158-126435 { animation: kf_1158_126435_opacity_0 3.599302s linear both !important; }
@keyframes kf_1158_126435_opacity_0 { 0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 8.279% { opacity: 1; } 100% { opacity: 1; } }
.usp-popup__screen--stage4.is-active .s4-motion-1158-126443 { animation: kf_1158_126443_opacity_0 3.599302s linear both, kf_1158_126443_translate_0 3.599302s linear both !important; }
@keyframes kf_1158_126443_opacity_0 { 0% { opacity: 0; } 8.279% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 22.199% { opacity: 1; } 100% { opacity: 1; } } @keyframes kf_1158_126443_translate_0 { 0% { translate: 27.847222rem 0rem; } 8.279% { animation-timing-function: cubic-bezier(1, 0, 0, 1); translate: 27.847222rem 0rem; } 36.035% { translate: 0rem 0rem; } 100% { translate: 0rem 0rem; } }
.usp-popup__screen--stage4.is-active #uspS4BossCycle.is-cycling { animation: kf_1158_126486_opacity_0 0.801s linear !important; animation-iteration-count: infinite !important; animation-fill-mode: both !important; }
@keyframes kf_1158_126486_opacity_0 { 0% { opacity: 0; } 48.689% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 49.813% { opacity: 1; } 99.001% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 100% { opacity: 0; } }
.usp-popup__screen--stage4.is-active .s4-motion-1158-126967 { animation: kf_1158_126967_opacity_0 2.401s linear !important; animation-fill-mode: both !important; }
@keyframes kf_1158_126967_opacity_0 { 0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 12.411% { opacity: 1; } 87.255% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 100% { opacity: 0; } }
.usp-popup__screen--stage4.is-active .s4-motion-1158-126979 { animation: kf_1158_126979_opacity_0 2.401s linear, kf_1158_126979_translate_0 2.401s linear !important; animation-fill-mode: both !important; }
@keyframes kf_1158_126979_opacity_0 { 0% { opacity: 0; } 12.411% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 33.278% { opacity: 1; } 75.26% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 95.752% { opacity: 0; } 100% { opacity: 0; } } @keyframes kf_1158_126979_translate_0 { 0% { translate: 27.847222rem 0rem; } 12.411% { animation-timing-function: cubic-bezier(1, 0, 0, 1); translate: 27.847222rem 0rem; } 54.019% { translate: 0rem 0rem; } 75.26% { animation-timing-function: cubic-bezier(0.843, -0.003, 1, 1); translate: 0rem 0rem; } 95.752% { translate: -39.930556rem 0rem; } 100% { translate: -39.930556rem 0rem; } }
.usp-popup__screen--stage4.is-active #uspS4Stick.is-swinging { animation: kf_1158_126545_rotate_0 1.198s linear both !important; }
@keyframes kf_1158_126545_rotate_0 { 0% { animation-timing-function: cubic-bezier(0.802, 0.007, 1, 1); transform: rotate(0rad); } 50% { animation-timing-function: cubic-bezier(0, 0.597, 1, 0.998); transform: rotate(-0.5922259523423889rad); } 100% { transform: rotate(0rad); } }

.usp-popup__screen--stage4 { transition: opacity 600ms ease-in-out, visibility 600ms !important; isolation: isolate; }
.usp-popup__screen--stage4[inert] { pointer-events: none !important; }
.usp-popup__screen--stage4 .s4-layer, .usp-popup__screen--stage4 .s4-control { position: absolute; margin: 0; padding: 0; user-select: none; }
.usp-popup__screen--stage4 .s4-layer { pointer-events: none; object-fit: fill; }
.usp-popup__screen--stage4 .s4-control { border: 0; background: transparent; touch-action: none; cursor: pointer; }
.s4-control img { display: block; width: 100%; height: 100%; pointer-events: none; }
.s4-control:focus-visible { outline: .15rem solid #00aad2; outline-offset: .1rem; }
.s4-state, .s4-feedback, .s4-heart img:last-child { opacity: 0; }
.s4-state.is-visible, .s4-feedback.is-shown, .s4-heart.is-lost img:last-child { opacity: 1; }
.s4-heart.is-lost img:first-child { opacity: 0; }
#uspS4BossCycle { opacity: 0; }
#uspS4Stick { transform: rotate(0rad); transform-origin: 0% 98.72164835063113%; transition: none !important; will-change: transform; }
#uspS4GameScreen { touch-action: none; }
.s4-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.s4-guide-toast { position:absolute; left:1.9444444444rem; top:-1.3194444444rem; width:46.1111111111rem; height:5.4861111111rem; z-index:10; pointer-events:none; transition:none !important; }

#uspS4Effect { mix-blend-mode: screen; }

.usp-s1-route-panel { position: absolute; inset: 0; pointer-events: none; }
.usp-s1-route-panel .s1-control { pointer-events: auto; }
.usp-s1-route-panel[inert] .s1-control { pointer-events: none; }

/* CLEAR enters with the source timing, then holds until the next scene covers it. */
:is(#uspS1ClearScreen, #uspS2ClearScreen, #uspS3ClearScreen, #uspS4ClearScreen).is-active img[src$="/clear-band.webp"] {
  animation: usp-clear-band-hold 2.401s linear both !important;
}
:is(#uspS1ClearScreen, #uspS2ClearScreen, #uspS3ClearScreen, #uspS4ClearScreen).is-active img[src$="/clear-text.webp"] {
  animation: usp-clear-text-hold 2.401s linear both, usp-clear-position-hold 2.401s linear both !important;
}
@keyframes usp-clear-band-hold {
  0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; }
  12.411%, 100% { opacity: 1; }
}
@keyframes usp-clear-text-hold {
  0% { opacity: 0; }
  12.411% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; }
  33.278%, 100% { opacity: 1; }
}
@keyframes usp-clear-position-hold {
  0% { translate: 27.847222rem 0; }
  12.411% { animation-timing-function: cubic-bezier(1, 0, 0, 1); translate: 27.847222rem 0; }
  54.019%, 100% { translate: 0 0; }
}

/* Stage 02 source scenes own every overlay, including the shared 007/008 toast. */
.usp-popup__screen--stage2 { isolation: isolate; transition: opacity 600ms ease-out, visibility 600ms !important; }
.usp-popup__screen--stage2[inert] { pointer-events: none !important; }
.s2-layer, .s2-control { position: absolute; margin: 0; padding: 0; }
.s2-layer { pointer-events: none; object-fit: fill; }
.s2-control { border: 0; background: transparent; cursor: pointer; touch-action: none; }
.s2-control:disabled { cursor: default; }
.s2-control img { display: block; width: 100%; height: 100%; pointer-events: none; }
.s2-control:focus-visible { outline: .15rem solid #00aad2; outline-offset: .1rem; }
.s2-reverse-view { position: absolute; inset: 0; transition: none !important; pointer-events: none; }
.s2-indicator { z-index: 2; }
#uspS2Toast { z-index: 3; translate: 0 -2.465278rem; }
.s2-motion-ready #uspS2Toast { animation: s2-toast-enter 9.986999s linear both !important; }
.s2-motion-ready.is-reversing #uspS2Toast { animation: s2-toast-exit 0.79895992s linear reverse both !important; }
@keyframes s2-toast-enter {
  0% { translate: 0 -2.465278rem; }
  1.994% { animation-timing-function: cubic-bezier(.01,1.002,1,1); translate: 0 -2.465278rem; }
  8%, 100% { translate: 0 0; }
}
@keyframes s2-toast-exit {
  0% { translate: 0 -2.465278rem; }
  24.925% { animation-timing-function: cubic-bezier(.01,1.002,1,1); translate: 0 -2.465278rem; }
  100% { translate: 0 0; }
}

/* WEB 0914 prototype, 2026-09-18. Design pixels / 14.4 = internal rem. */
.p0-art { position:absolute; display:block; pointer-events:none; }
.p0-speaking-glow { position:absolute; left:10.763888889rem; top:5.208333333rem; width:28.541666667rem; height:5.555555556rem; overflow:hidden; pointer-events:none; background:url('./assets/usp/0/speaking/dark-poster.webp') center / 100% 100% no-repeat; }
.p0-speaking-glow.is-loaded { background-image:none; }
.p0-speaking-bubble { left:21.076388889rem; top:6.597222222rem; width:7.916666667rem; height:1.875rem; }
.p0-speaking-bubble--response { left:18.472222222rem; width:13.125rem; }
.p0-speaking-bubble--stage1 { left:14.652777778rem; width:20.763888889rem; }
.p0-hit { position:absolute; border:0; padding:0; background:transparent; cursor:pointer; }
.p0-hit:disabled { cursor:default; }
.p0-hit:focus-visible { outline:2px solid #fff; outline-offset:-2px; border-radius:0.7rem; }
.p0-toast { position:absolute; inset:0; z-index:10000; pointer-events:none; overflow:hidden; }
.p0-toast[hidden] { display:none; }
.p0-scene:not(.p0-0918-playing) .p0-0918-motion-1158-121634 { opacity:0.04; translate:0 3.576388889rem; }
.p0-0918-playing .p0-0918-motion-1158-121634{animation: p0_0918_kf_1158_121634_opacity_0 2s linear, p0_0918_kf_1158_121634_translate_0 2s linear !important; }
@keyframes p0_0918_kf_1158_121634_opacity_0 { 0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0.04; } 50.071% { opacity: 1; } 100% { opacity: 1; } } @keyframes p0_0918_kf_1158_121634_translate_0 { 0% { animation-timing-function: cubic-bezier(0.009, 0.998, 1, 1); translate: 0rem 3.576388889rem; } 50.071% { translate: 0rem 0rem; } 100% { translate: 0rem 0rem; } }
.p0-0918-playing .p0-0918-motion-1347-253145{animation: p0_0918_kf_1347_253145_translate_0 0.798958s linear !important; }
@keyframes p0_0918_kf_1347_253145_translate_0 { 0% { translate: 0rem -2.465277778rem; } 24.928% { animation-timing-function: cubic-bezier(0.01, 1.002, 1, 1); translate: 0rem -2.465277778rem; } 100% { translate: 0rem 0rem; } }
.p0-0918-playing .p0-0918-motion-1347-255401{animation: p0_0918_kf_1347_255401_translate_0 0.798958s linear reverse !important; }
@keyframes p0_0918_kf_1347_255401_translate_0 { 0% { translate: 0rem -2.465277778rem; } 24.928% { animation-timing-function: cubic-bezier(0.01, 1.002, 1, 1); translate: 0rem -2.465277778rem; } 100% { translate: 0rem 0rem; } }
.p0-0918-playing .p0-0918-motion-1290-105874{animation: p0_0918_kf_1290_105874_opacity_0 3.599302s linear !important; animation-iteration-count: infinite !important; }
@keyframes p0_0918_kf_1290_105874_opacity_0 { 0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 27.728% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 55.57% { opacity: 1; } 100% { opacity: 1; } }
.p0-0918-playing .p0-0918-motion-1290-105880{animation: p0_0918_kf_1290_105880_opacity_0 3.599302s linear !important; animation-iteration-count: infinite !important; }
@keyframes p0_0918_kf_1290_105880_opacity_0 { 0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 27.728% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 55.57% { opacity: 1; } 100% { opacity: 1; } }
.p0-0918-playing .p0-0918-motion-1290-105948{animation: p0_0918_kf_1290_105948_opacity_0 3.599302s linear !important; animation-iteration-count: infinite !important; }
@keyframes p0_0918_kf_1290_105948_opacity_0 { 0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 27.728% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 55.57% { opacity: 1; } 100% { opacity: 1; } }
.p0-0918-playing .p0-0918-motion-1290-105953{animation: p0_0918_kf_1290_105953_opacity_0 3.599302s linear !important; animation-iteration-count: infinite !important; }
@keyframes p0_0918_kf_1290_105953_opacity_0 { 0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 27.728% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 55.57% { opacity: 1; } 100% { opacity: 1; } }

.p0-0918-playing .p0-art { animation-fill-mode:both !important; }

/* Figma CLEAR light: first screen; Stage 04 continues through S04_003. */
.usp-stage-clear-glow { position:absolute; pointer-events:none; opacity:0; }
.usp-popup__screen.is-active[aria-hidden="false"] > .usp-stage-clear-glow { animation:usp-stage-clear-glow 4.803542s linear both !important; }
.usp-popup__screen.usp-popup__screen--stage4.is-active > .usp-stage-clear-glow { animation:usp-stage-clear-glow 4.803542s linear both !important; }
@keyframes usp-stage-clear-glow { 0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 16.634% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 33.267% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 50.046% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 66.597% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 83.314% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 100% { opacity: 1; } }

/* BEGIN GENERATED HOME MOTION */

/* END GENERATED HOME MOTION */



/* v0.201: footer ends at the visible home-image boundary, outside the stage fade mask. */
.home-title-footer {
  position: absolute;
  z-index: 4;
  left: var(--home-footer-left, 0px);
  bottom: var(--home-footer-bottom, 0px);
  width: var(--home-footer-width, 100%);
  height: auto;
  pointer-events: none;
  user-select: none;
}
.home-guide {
  position: absolute;
  inset: 0;
  z-index: 39;
  opacity: 1;
  transition: none;
}
.home-guide[hidden] { display: none; }
.home-guide__dismiss {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.5));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.home-guide__art {
  display: block;
  /* Figma 539:196 card, constrained by 25 CSS px above and below. */
  width: min(53.9%, calc((var(--app-height, 100dvh) - 50px) * 2.75));
  height: auto;
  max-height: calc(100% - 50px);
  object-fit: contain;
  pointer-events: none;
}
.home-guide__dismiss:focus-visible { outline: none; }
body.has-home-guide .scene { pointer-events: none; }

/* Nonmodal share feedback; never opens a second native dialog. */
.photo-share-status { position: absolute; left: 6.25rem; top: 33.25rem; width: 50rem; margin: 0; text-align: center; font-size: .8125rem; line-height: 1.1; color: #fff; }
.photo-share-status:empty { display: none; }
#photoShare[aria-busy="true"] { opacity: .6; cursor: wait; }

/* High-resolution local film cover; native YouTube controls take over on play. */
.film-popup__poster { padding: 0; overflow: hidden; z-index: 1; }
.film-popup__poster[hidden] { display: none; }
.film-popup__poster > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.film-popup__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 4.25rem; height: 3rem; border-radius: .75rem; color: white; background: #f00; font-size: 1.5rem; padding-left: .15rem; }

/* WEB0929: continuous S03_002→003 feature toast, outside scene dissolves. */
.s3-stay-overlay { position: absolute; inset: 0; overflow: hidden; border-radius: 1rem; pointer-events: none; }
.s3-stay-overlay[hidden] { display: none; }
.s3-stay-toast { position: absolute; object-fit: fill; pointer-events: none; user-select: none; }