/* ==========================================================================
   Celebration Modal
   프로젝트 완료 축하 오버레이
   ========================================================================== */

.celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 10);
  background: var(--color-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

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

.celebration-content {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-section-gap) var(--spacing-section-gap);
  text-align: center;
  max-width: 280px;
  width: 100%;
  animation: celebration-bounce 0.5s ease;
}

.celebration-emoji {
  font-size: var(--font-size-7xl);
  margin-bottom: var(--spacing-section);
}

.celebration-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-list-sm) 0;
}

.celebration-subtitle {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-section-gap) 0;
}

.celebration-btn {
  background: var(--color-fill-dark);
  color: var(--color-bg-white);
  border: none;
  border-radius: var(--radius-full);
  padding: var(--spacing-list-md) var(--spacing-section-gap);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  width: 100%;
}

.celebration-btn:active {
  opacity: var(--opacity-pressed);
}

@keyframes celebration-bounce {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}