/* Mobile-First Full-Screen Layout */
/* Based on Figma Design: Mobile App Screen Design */

:root {
  /* Colors */
  --bg-primary: #1a1a1a;
  --bg-primary-rgb: 26, 26, 26;
  --bg-secondary: #1C1C1E;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.5);
  --accent-primary: #ffffff;
  --accent-destructive: #ef4444;
  --accent-active: #10b981;

  /* Chat Bubble Colors (Dark Mode) */
  --bubble-user-bg: #0a84ff;
  --bubble-user-text: #ffffff;
  --bubble-ai-bg: #3a3a3c;
  --bubble-ai-text: #ffffff;
  --bubble-shadow: rgba(0, 0, 0, 0.3);
  --scroll-btn-bg: #0a84ff;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* Button Sizes */
  --button-sm: 3rem;
  --button-md: 3.5rem;
  --button-lg: 4rem;

  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-full: 50%;

  /* Z-index Layers */
  --z-background: 1;
  --z-video: 2;
  --z-character: 10;
  --z-gradient: 15;
  --z-ui: 20;
  --z-overlay: 30;
}

/* Light Mode Support */
@media (prefers-color-scheme: light) {
  :root {
    --bg-primary: #ffffff;
    --bg-primary-rgb: 255, 255, 255;
    --bg-secondary: #f2f2f7;
    --text-primary: #000000;
    --text-secondary: #6e6e73;
    --text-tertiary: #98989d;
    --accent-primary: #007aff;
    --accent-destructive: #ff3b30;
    --accent-active: #34c759;

    /* Chat Bubble Colors (Light Mode) */
    --bubble-user-bg: #007aff;
    --bubble-user-text: #ffffff;
    --bubble-ai-bg: #e9e9eb;
    --bubble-ai-text: #000000;
    --bubble-shadow: rgba(0, 0, 0, 0.1);
    --scroll-btn-bg: #007aff;
  }
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Full-Screen Container */
#app-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-primary);
}

/* Layer System */
.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Background Video Layer */
.layer-0 {
  z-index: var(--z-background);
  object-fit: cover;
}

#background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Middle Ground Layer (Counter) */
.layer-1 {
  z-index: 5;
  background: transparent;
}

/* Character Canvas Layer */
.layer-2 {
  z-index: var(--z-character);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.layer-2.avatar-mode {
  opacity: 0;
}

#character-animation {
  width: 100%;
  height: 100%;
}

#character-animation canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Layer 3: Counter/Foreground */
.layer-3 {
  z-index: 12;
  background-image: url('/assets/background/layer_3.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Gradient Overlay for Text Readability */
.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-gradient);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    transparent 20%,
    transparent 80%,
    rgba(0, 0, 0, 0.6) 100%
  );
  pointer-events: none;
}

/* UI Layer - Interactive Elements */
.ui-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-ui);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.ui-layer > * {
  pointer-events: auto;
}

/* Top Bar */
.top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.5rem;
  padding: var(--spacing-xl) var(--spacing-md);
  pointer-events: none;
  position: relative;
  z-index: calc(var(--z-ui) + 5);
}

.top-bar > * {
  pointer-events: auto;
}

/* CC Toggle Button */
.cc-button {
  width: var(--button-sm);
  height: var(--button-sm);
  border-radius: var(--radius-full);
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cc-button:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

.cc-button.active {
  background-color: var(--accent-primary);
  color: var(--bg-primary);
  border-color: var(--accent-primary);
}

.cc-button svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Conversation Area - Concept Design-2 Style */
.conversation-area {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  z-index: var(--z-ui);
  overflow: hidden;
  pointer-events: auto;
}

.conversation-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem 1.5rem 8rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100%;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* 스크롤바 스타일 (WebKit 브라우저) */
.conversation-content::-webkit-scrollbar {
  width: 6px;
}

.conversation-content::-webkit-scrollbar-track {
  background: transparent;
}

.conversation-content::-webkit-scrollbar-thumb {
  background: var(--text-secondary);
  border-radius: 3px;
  opacity: 0.5;
}

.conversation-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-primary);
  opacity: 0.8;
}

/* Hide scrollbar completely */
#conversation-content {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

#conversation-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Message Container - Concept Design-2 Full Style */
.message-bubble {
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 4rem;
  animation: messageSlideIn 0.5s ease-out;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.message-bubble:last-child {
  opacity: 1;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 0.3;
    transform: translateY(0);
  }
}

.message-bubble:last-child {
  animation: messageSlideInLast 0.5s ease-out;
}

@keyframes messageSlideInLast {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* AI Message - Left aligned with turtle avatar */
.message-bubble.ai {
  flex-direction: row;
  align-self: flex-start;
}

/* User Message - Right aligned, no avatar */
.message-bubble.user {
  flex-direction: row;
  align-self: flex-end;
  text-align: right;
}

/* Avatar (Turtle for AI) */
.message-avatar {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.5);
}

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.5);
}

/* User placeholder - same width as avatar for symmetry */
.message-avatar-placeholder {
  flex-shrink: 0;
  width: 3rem;
}

@media (min-width: 768px) {
  .message-avatar-placeholder {
    width: 3.5rem;
  }
}

/* Message Text Container */
.message-text-container {
  flex: 1;
  max-width: 100%;
}

.message-bubble.ai .message-text-container {
  text-align: left;
}

.message-bubble.user .message-text-container {
  text-align: right;
}

/* Message Text - Concept Design-2 Typography */
.message-text {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-primary);
}

/* User message - lighter/softer appearance */
.message-bubble.user .message-text {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

/* AI message - brighter, bolder */
.message-bubble.ai .message-text {
  color: #ffffff;
  font-weight: 700;
}

@media (min-width: 768px) {
  .message-text {
    font-size: 2.5rem;
  }

  .message-avatar {
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* 스트리밍 중 커서 애니메이션 */
.message-bubble.streaming .message-text::after {
  content: '▊';
  animation: cursorBlink 1s infinite;
  margin-left: 2px;
  opacity: 0.7;
}

@keyframes cursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 스크롤 하단 버튼 */
.scroll-to-bottom-btn {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--scroll-btn-bg);
  color: #ffffff;
  border: none;
  border-radius: 24px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  z-index: calc(var(--z-ui) + 1);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  pointer-events: auto;
}

.scroll-to-bottom-btn:active {
  transform: translateX(-50%) scale(0.95);
}

.scroll-to-bottom-btn.hidden {
  display: none;
}

.new-message-badge {
  font-size: 13px;
}

/* 접근성: 터치 타겟 최소 크기 보장 */
@media (pointer: coarse) {
  .scroll-to-bottom-btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Bottom Controls */
.bottom-controls {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--spacing-lg) var(--spacing-xl);
  max-width: 32rem;
  width: 90%;
  pointer-events: none;
}

.bottom-controls > * {
  pointer-events: auto;
}

/* Control Buttons */
.control-button {
  position: relative;
  width: var(--button-md);
  height: var(--button-md);
  border-radius: var(--radius-full);
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  outline: none;
}

/* Button Badge (for Gallery count) */
.button-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  background-color: #ef4444;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  border: 2px solid rgba(0, 0, 0, 0.8);
}

.button-badge.hidden {
  display: none;
}

@media (min-width: 768px) {
  .control-button {
    width: var(--button-lg);
    height: var(--button-lg);
  }
}

.control-button:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.control-button.active {
  background-color: var(--accent-primary);
  color: var(--bg-primary);
  border-color: var(--accent-primary);
}

.control-button svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 2.5;
}

/* Mic Button - Special Active State */
.mic-button.listening {
  background-color: var(--accent-primary);
  color: var(--bg-primary);
  border-color: var(--accent-primary);
}

.mic-button.muted {
  background-color: rgba(239, 68, 68, 0.2);
  color: var(--accent-destructive);
  border-color: rgba(239, 68, 68, 0.3);
}

.mic-button.muted:hover {
  background-color: rgba(239, 68, 68, 0.3);
}

/* Close Button - Destructive Style on Hover */
.close-button:hover {
  background-color: rgba(239, 68, 68, 0.2);
  color: var(--accent-destructive);
  border-color: rgba(239, 68, 68, 0.3);
}

/* Menu Button with Popup */
.menu-container {
  position: relative;
}

.menu-popup {
  position: absolute;
  bottom: calc(100% + var(--spacing-md));
  left: 50%;
  transform: translateX(-50%);
  width: 14rem;
  background-color: rgba(28, 28, 30, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  opacity: 0;
  transform: translateX(-50%) translateY(0.5rem) scale(0.95);
  transition: all 0.2s ease;
  pointer-events: none;
}

.menu-popup.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) 1.25rem;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.menu-item svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Gallery Overlay - Vertical Stack Design */
.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 150; /* 최상위 (스토리 오버레이보다 위) */
  background-color: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.gallery-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Gallery Content - Scrollable Container */
.gallery-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 5rem 1.5rem 2rem 1.5rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.gallery-content::-webkit-scrollbar {
  width: 6px;
}

.gallery-content::-webkit-scrollbar-track {
  background: transparent;
}

.gallery-content::-webkit-scrollbar-thumb {
  background: var(--text-secondary);
  border-radius: 3px;
}

/* Gallery Images List - Vertical Stack */
.gallery-images-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

/* Individual Gallery Image Item */
.gallery-image-item {
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: var(--bg-secondary);
  animation: galleryItemSlideIn 0.4s ease-out;
}

@keyframes galleryItemSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gallery-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Empty State */
.gallery-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 20rem;
  color: var(--text-secondary);
  text-align: center;
  padding: 2rem;
}

.gallery-empty svg {
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  opacity: 0.3;
}

.gallery-empty p {
  font-size: 1.125rem;
  line-height: 1.5;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Overlay Close Button (재활용 스타일) */
.overlay-close-button {
  position: absolute;
  top: var(--spacing-xl);
  right: var(--spacing-md);
  width: var(--button-sm);
  height: var(--button-sm);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.overlay-close-button:hover {
  background-color: rgba(239, 68, 68, 0.2);
  color: var(--accent-destructive);
}

.overlay-close-button:active {
  transform: scale(0.9);
}

.overlay-close-button svg,
.overlay-close-button .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Hidden State */
.hidden {
  display: none !important;
}

/* Bobbing Animation */
@keyframes bobbing {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.character-bobbing {
  animation: bobbing 4s ease-in-out infinite;
}

/* CC Avatar Container - PERMANENTLY HIDDEN (not used in this design) */
.cc-avatar-container {
  display: none !important;
}

#cc-avatar-canvas {
  width: 100%;
  height: 100%;
  position: relative;
}

#cc-avatar-canvas canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* Utilities */
.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

/* Touch Optimization */
@media (hover: none) and (pointer: coarse) {
  .control-button:hover,
  .cc-button:hover,
  .menu-item:hover,
  .close-button:hover {
    background-color: inherit;
  }

  .control-button:active,
  .cc-button:active,
  .menu-item:active {
    transform: scale(0.9);
  }
}

/* ========== Audio Reactive Background ========== */

/* Background Container */
#audio-reactive-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #000000;
  z-index: var(--z-gradient);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  filter: blur(100px);
  pointer-events: none;
}

#audio-reactive-background.active {
  opacity: 1;
  visibility: visible;
}

/* Audio Reactive Orbs */
.audio-reactive-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform, width, height;
  transition: transform 0.1s ease-out;
}

/* ===================================================================
   스토리텔링 모드 스타일
   =================================================================== */

/* 스토리 이미지 오버레이 (전체화면) */
.story-image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  z-index: 100;
  display: flex;
  align-items: flex-start; /* Top-align instead of center */
  justify-content: center;
  padding-top: calc(3.5rem + 1rem); /* CC button Y-axis alignment */
  padding-left: 10vw; /* 10% left margin */
  padding-right: 10vw; /* 10% right margin */
  animation: fadeIn 0.3s ease-out;
  pointer-events: none;
}

.story-image-container {
  position: relative;
  width: 100%; /* Fill 80vw (after 20% padding) */
  max-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.story-image {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  object-fit: contain;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* 페이지 인디케이터 (이미지 아래 중앙) */
.story-page-indicator {
  position: absolute;
  bottom: -3rem; /* 액자 컨테이너 아래로 */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md, 8px);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  pointer-events: auto;
  z-index: 3;
}

/* 이전/다음 탐색 버튼 (액자 컨테이너 양쪽 끝) */
.story-nav-prev,
.story-nav-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  pointer-events: auto;
  z-index: 3;
}

.story-nav-prev {
  left: -1rem; /* 액자 컨테이너 왼쪽 끝 */
}

.story-nav-next {
  right: -1rem; /* 액자 컨테이너 오른쪽 끝 */
}

.story-nav-prev:hover:not(:disabled),
.story-nav-next:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-50%) scale(1.1);
}

.story-nav-prev:disabled,
.story-nav-next:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.story-nav-prev:disabled:hover,
.story-nav-next:disabled:hover {
  background: rgba(0, 0, 0, 0.5);
  transform: translateY(-50%);
}

/* ===================================================================
   화면 효과 애니메이션
   =================================================================== */

/* Flash 효과 (번개) */
.effect-flash-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  z-index: 200;
  animation: flash 0.2s ease-out;
  pointer-events: none;
}

@keyframes flash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Shake 효과 (지진) */
.effect-shake {
  animation: shake 0.5s ease-in-out;
  will-change: transform;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

/* Fade 효과 (장면 전환) */
.effect-fade-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  z-index: 200;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
}

.effect-fade-overlay.active {
  opacity: 1;
}

/* Sparkle 효과 (마법) */
.effect-sparkle {
  position: fixed;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, yellow, transparent);
  border-radius: 50%;
  z-index: 200;
  animation: sparkle 1s ease-out;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes sparkle {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* 스토리 로딩 인디케이터 */
.story-loading-indicator {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.7);
  padding: 16px 24px;
  border-radius: 12px;
  z-index: 202;
}

.story-loading-indicator .spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.story-loading-indicator span {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Fade In 애니메이션 (공통) */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==================== Loading Overlay ==================== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(10px);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-content {
  text-align: center;
  color: white;
  max-width: 300px;
  padding: 30px;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #fff;
}

.loading-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.loading-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  border-radius: 4px;
  transition: width 0.3s ease;
  width: 0%;
}

.loading-percentage {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}