/* ════════════════════════════════
   LAYOUT — 가로 2-월드 스위처
   Left: 추억(memories) | Right: 미래(future)
   ════════════════════════════════ */

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

/* ── 두 월드를 가로로 배치 ── */
#worlds {
  display: flex;
  width: 200vw;
  height: 100dvh;
  transition: transform 0.55s cubic-bezier(.77, 0, .175, 1);
  will-change: transform;
}

#worlds.show-future {
  transform: translateX(-100vw);
}

/* ── 각 월드는 독립적으로 세로 스크롤 ── */
.world {
  flex-shrink: 0;
  width: 100vw;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ── World Indicator (하단 중앙 2개 닷) ── */
#worldIndicator {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 500;
  pointer-events: all;
}

.world-dot {
  height: 6px;
  width: 24px;
  border-radius: 3px;
  background: var(--rose-dk);
  opacity: 0.3;
  cursor: pointer;
  transition: width 0.35s ease, opacity 0.35s ease;
}

.world-dot.active {
  width: 40px;
  opacity: 1;
}

/* ── 스와이프 힌트 ── */
.swipe-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 0 80px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.swipe-hint-arrow {
  font-size: 22px;
  animation: swipeAnim 1.8s ease-in-out infinite;
}

@keyframes swipeAnim {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50%       { transform: translateX(-10px); opacity: 1; }
}

/* future world back hint: arrow goes right */
#world-future .swipe-hint .swipe-hint-arrow {
  animation-name: swipeAnimBack;
}

@keyframes swipeAnimBack {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50%       { transform: translateX(10px); opacity: 1; }
}