/* Main CSS - Import All Styles */

/* Pretendard Font */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* CSS Modules */
@import url('./reset.css');
@import url('./variables.css');
@import url('./layout.css');
@import url('./components.css');

/* ========== Page-Specific Styles ========== */

/* Search Screen */
.screen-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--spacing-xl) 0;
}

.search-wrapper {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

/* Result Screen */
.screen-result {
  padding: var(--spacing-lg) 0;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes countUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.4s ease-out;
}

/* Progress Bar Animation */
.progress-fill {
  width: 0;
}

.progress-fill.animate {
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== Responsive Design ========== */

/* Mobile First - Base styles are for mobile */

/* Tablet and up */
@media (min-width: 768px) {
  .title {
    font-size: var(--font-size-2xl);
  }

  .result-percent {
    font-size: 80px;
  }

  .result-card {
    padding: var(--spacing-2xl);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    padding: 0 var(--spacing-xl);
  }
}

/* Safe Area for Mobile Notch */
@supports (padding: env(safe-area-inset-bottom)) {
  .footer {
    padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom));
  }
}