/* 반응형 디자인 최적화 */

/* Mobile First Approach */
@media (max-width: 640px) {
    /* Hero Section Mobile */
    #home {
        padding: 120px 0 60px;
    }
    
    #home h1 {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    #home p {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }
    
    #home .float-animation img {
        width: 250px;
        height: 250px;
    }
    
    /* Navigation Mobile */
    nav {
        padding: 1rem 0;
    }
    
    nav .text-2xl {
        font-size: 1.5rem;
    }
    
    /* Sections Mobile Spacing */
    section {
        padding: 60px 0;
    }
    
    .container {
        padding: 0 1rem;
    }
    
    /* Typography Mobile */
    h2 {
        font-size: 2.5rem !important;
        margin-bottom: 1.5rem;
    }
    
    h3 {
        font-size: 1.8rem;
    }
    
    /* Cards Mobile */
    .card-hover {
        margin-bottom: 1.5rem;
    }
    
    /* Timeline Mobile */
    #timeline .absolute[class*="left-6"] {
        left: 1rem !important;
    }
    
    #timeline .ml-16 {
        margin-left: 3rem !important;
    }
    
    /* Timeline content visibility */
    #timeline .relative {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Contact Form Mobile */
    #contact-form {
        padding: 1.5rem;
    }
    
    #contact-form .grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Button layout mobile optimization */
    .flex.flex-col.sm\\:flex-row {
        flex-direction: column;
        align-items: center;
    }
    
    .flex.flex-col.sm\\:flex-row > a {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
    
    /* Statistics Mobile */
    .grid.grid-cols-2 {
        gap: 1rem;
    }
    
    .grid.grid-cols-2 > div {
        padding: 1.5rem;
    }
    
    /* Footer Mobile */
    footer {
        padding: 2rem 0;
    }
    
    footer .flex {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Tablet Styles */
@media (min-width: 641px) and (max-width: 1024px) {
    /* Hero Section Tablet */
    #home h1 {
        font-size: 3.5rem;
    }
    
    #home .float-animation img {
        width: 320px;
        height: 320px;
    }
    
    /* Grid adjustments for tablet */
    .md\\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .md\\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* Timeline Tablet */
    #timeline .md\\:left-1\\/2 {
        left: 2rem;
    }
    
    #timeline .md\\:w-1\\/2 {
        width: calc(100% - 4rem);
        margin-left: 4rem;
    }
}

/* Desktop Enhancements */
@media (min-width: 1025px) {
    /* Larger screens get more spacing */
    .container {
        max-width: 1200px;
    }
    
    /* Hero enhanced for desktop */
    #home {
        min-height: 100vh;
    }
    
    #home h1 {
        font-size: 4rem;
    }
    
    /* Cards get more sophisticated hover effects */
    .card-hover:hover {
        transform: scale(1.03) translateY(-8px);
        box-shadow: 0 25px 50px rgba(0, 71, 171, 0.15);
    }
    
    /* Timeline gets better positioning */
    #timeline .absolute {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* High Resolution Displays */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
    
    /* Typography scales up */
    h1 {
        font-size: 4.5rem;
    }
    
    h2 {
        font-size: 3.5rem;
    }
    
    /* More generous spacing */
    section {
        padding: 120px 0;
    }
}

/* Print Styles */
@media print {
    nav, #back-to-top, .btn-hover {
        display: none !important;
    }
    
    section {
        page-break-inside: avoid;
        padding: 1rem 0;
    }
    
    .gradient-bg {
        background: white !important;
        color: black !important;
    }
    
    .text-white {
        color: black !important;
    }
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .float-animation {
        animation: none;
    }
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-light: #1a1a1a;
    }
    
    .bg-white {
        background-color: #2a2a2a !important;
    }
    
    .text-gray-800 {
        color: #e5e5e5 !important;
    }
    
    .text-gray-600 {
        color: #b3b3b3 !important;
    }
    
    .bg-bg-light {
        background-color: #1a1a1a !important;
    }
}

/* Focus Styles for Accessibility */
*:focus {
    outline: 2px solid #00A3FF;
    outline-offset: 2px;
}

/* Improve touch targets for mobile */
@media (max-width: 640px) {
    button, a, input, select, textarea {
        min-height: 44px;
        min-width: 44px;
    }
    
    nav a {
        padding: 0.75rem 0;
        display: block;
    }
}

/* Animation performance optimization */
.card-hover, .btn-hover, .float-animation {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Smooth scrolling improvements */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* Loading states */
.loading {
    pointer-events: none;
    opacity: 0.6;
}

/* Error states */
.error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Success states */
.success {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}