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

html {
  overflow-y: scroll;
}

:root {
  /* --primary: #6c5ce7;
  --primary-light: #a29bfe;
  --secondary: #00b894;
  --accent: #fd79a8;
  --warning: #fdcb6e;

  --dark-bg: #0a0e1a;
  --dark-surface: #1a1d29;
  --dark-surface-light: #2d3748;
  --dark-border: #2d3748;

  --light-bg: #f8fafc;
  --white: #ffffff;
  --light-border: #e2e8f0;

  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --text-primary-white-bg: #333;
  --text-secondary-white-bg: #4a5568; */

  --primary: #6c5ce7;
  --primary-light: #a29bfe;
  --secondary: #00b894;
  --accent: #fd79a8;
  --warning: #ffb27e;
  --text-primary: #1a1a1a;
  --text-primary-light: #333;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --light-bg: #fafafa;
  --border-light: #e5e7eb;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);

  --ios-blue: #007aff;
  --ios-gray-1: #8e8e93;
  --ios-gray-2: #c7c7cc;
  --ios-gray-3: #d1d1d6;
  --ios-gray-4: #e5e5ea;
  --ios-gray-5: #f2f2f7;
  --ios-gray-6: #ffffff;

  --gradient-primary: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
  --gradient-secondary: linear-gradient(135deg, #00b894 0%, #55a3ff 100%);
  --gradient-accent: linear-gradient(135deg, #fdb479 0%, #fdcb6e 100%);
  --gradient-warning: linear-gradient(135deg, #ff7675 0%, #fd79a8 100%);

  /* Typography Scale */
  /* --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem; */

  /* Line Heights */
  /* --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625; */
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  background: white;
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6,
div,
span,
li {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
}

.hidden {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
  transition-delay: 0.2s;
  pointer-events: none;
}

.hidden-text {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
  transition-delay: 0.2s;
  pointer-events: none;
}

.hidden-scale {
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  transition: opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0.2s;
  pointer-events: none;
}

.hidden-opacity {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  transition-delay: 0.2s;
  pointer-events: none;
}

.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: visible;
}

.visible-text {
  opacity: 1;
  transform: translateX(0);
  pointer-events: visible;
}

.visible-opacity {
  opacity: 1;
  pointer-events: visible;
}

/* 슬라이드 인 (좌측에서) */
.slide-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* 스케일 업 애니메이션 */
.scale-up {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scale-up.visible {
  opacity: 1;
  transform: scale(1);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes messageAppear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes typingDot {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }

  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes expandWidth {
  from {
    opacity: 0;
    width: 0;
  }

  to {
    opacity: 1;
    width: 80px;
  }
}

@keyframes moveCursor {
  0% {
    top: -20px;
    right: -20px;
    opacity: 0;
  }

  20% {
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    opacity: 1;
  }

  35%,
  45% {
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    opacity: 1;
  }

  60% {
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%) scale(0.95);
    opacity: 1;
  }

  80%,
  100% {
    top: 80px;
    right: -40px;
    opacity: 0;
  }
}

@keyframes clickRipple {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  35% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  45% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 1;
  }

  70% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

@keyframes buttonPress {

  0%,
  30%,
  70%,
  100% {
    transform: scale(1);
    background: #fff;
  }

  45%,
  55% {
    transform: scale(0.95);
    background: rgba(81, 81, 81, 0.15);
  }
}