/* Custom styles for 1분 질문 루틴 스터디 가이드 */

/* Custom animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* Custom button styles */
.btn-primary {
    @apply bg-blue-500 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 transition-colors duration-200;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-800 px-6 py-3 rounded-lg font-semibold hover:bg-gray-300 transition-colors duration-200;
}

/* Card hover effects */
.card-hover {
    @apply transition-transform duration-200 hover:scale-105 hover:shadow-lg;
}

/* Progress bar styles */
.progress-bar {
    @apply bg-gray-200 rounded-full h-2 overflow-hidden;
}

.progress-fill {
    @apply bg-blue-500 h-full transition-all duration-300 ease-out;
}

/* Badge styles */
.badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-info {
    @apply bg-blue-100 text-blue-800;
}

/* Form styles */
.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-vertical;
}

/* Alert styles */
.alert {
    @apply px-4 py-3 rounded-md mb-4;
}

.alert-success {
    @apply bg-green-100 border border-green-400 text-green-700;
}

.alert-error {
    @apply bg-red-100 border border-red-400 text-red-700;
}

.alert-warning {
    @apply bg-yellow-100 border border-yellow-400 text-yellow-700;
}

.alert-info {
    @apply bg-blue-100 border border-blue-400 text-blue-700;
}

/* Tablet responsive adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet optimizations */
    .layout-content-container {
        @apply px-6;
    }
}

/* Footer adjustments */
.footer-spacing {
    padding-bottom: 6rem; /* 24 in Tailwind */
}

.footer-spacing-safe {
    padding-bottom: 8rem; /* 32 in Tailwind */
}

/* Mobile bottom navigation improvements */
.mobile-nav-safe {
    padding-bottom: env(safe-area-inset-bottom, 1rem);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .mobile-menu {
        @apply block;
    }
    
    .desktop-menu {
        @apply hidden;
    }
    
    /* Improve touch targets for mobile */
    .mobile-menu a {
        @apply min-h-12 flex items-center;
    }
    
    /* Better spacing for mobile forms */
    .form-input, .form-textarea {
        @apply text-base; /* Prevents zoom on iOS */
    }
    
    /* Mobile-friendly buttons */
    button, .btn-primary, .btn-secondary {
        @apply min-h-12 touch-manipulation;
    }
    
    /* Mobile content padding */
    .layout-content-container {
        @apply px-4;
    }
    
    /* Mobile header padding */
    header {
        @apply px-4;
    }
    
    /* Mobile grid adjustments */
    .grid {
        @apply grid-cols-1 gap-3;
    }
    
    /* Mobile card spacing */
    .card-hover {
        @apply mb-4;
    }
    
    /* Mobile text scaling */
    h1, .text-\[32px\] {
        @apply text-2xl;
    }
    
    h2, .text-\[22px\] {
        @apply text-xl;
    }
    
    /* Mobile notification positioning */
    .mobile-menu {
        @apply top-16;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .card-hover:hover {
        @apply transform-none shadow-none;
    }
    
    /* Larger touch targets */
    button, a, input, select, textarea {
        @apply min-h-12;
    }
}

/* Focus styles for accessibility */
*:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Skip to content link for accessibility */
.skip-to-content {
    @apply absolute -top-10 left-4 bg-blue-600 text-white px-4 py-2 rounded-md z-50 focus:top-4;
}

/* Dark mode support (for future implementation) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles will be added in future tasks */
}