/**
 * responsive.css - 반응형 스타일
 * 마산집수리 교육 (행집사)
 * Mobile First Approach
 */

/* ========================================
   BREAKPOINTS
   - Mobile: < 640px
   - Tablet: 640px - 1023px
   - Desktop: 1024px+
======================================== */

/* ========================================
   SMALL MOBILE (< 375px)
======================================== */
@media (max-width: 374px) {
    :root {
        --font-size-5xl: 32px;
        --font-size-4xl: 28px;
        --font-size-3xl: 24px;
        --font-size-2xl: 20px;
    }

    .container {
        padding: 0 var(--spacing-md);
    }

    .logo-text {
        display: none;
    }

    .btn-cta {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-xs);
    }

    .section {
        padding: var(--spacing-2xl) 0;
    }

    .section-title {
        font-size: var(--font-size-2xl);
    }

    .pricing-card {
        padding: var(--spacing-md);
    }

    .pricing-price {
        font-size: var(--font-size-2xl);
    }
}

/* ========================================
   MOBILE (375px - 639px)
======================================== */
@media (max-width: 639px) {
    /* Typography */
    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
    h3 { font-size: var(--font-size-xl); }
    h4 { font-size: var(--font-size-lg); }

    /* Header */
    .site-header {
        --header-height: 64px;
    }

    .logo-sub {
        display: none;
    }

    .btn-phone {
        display: none;
    }

    .btn-cta {
        display: none;
    }

    /* Mobile Nav */
    .main-nav {
        display: none;
    }

    /* Section */
    .section {
        padding: var(--spacing-3xl) 0;
    }

    .section-header {
        margin-bottom: var(--spacing-xl);
    }

    .section-title {
        font-size: var(--font-size-2xl);
    }

    .section-subtitle {
        font-size: var(--font-size-base);
    }

    /* Buttons */
    .btn {
        width: 100%;
        justify-content: center;
    }

    .btn-lg {
        padding: var(--spacing-md) var(--spacing-xl);
        font-size: var(--font-size-base);
    }

    /* Cards */
    .feature-card {
        padding: var(--spacing-lg);
    }

    .pricing-card {
        padding: var(--spacing-lg);
    }

    /* Footer */
    .footer-top {
        padding: var(--spacing-xl) 0;
    }

    .footer-nav-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .footer-brand {
        max-width: 100%;
        text-align: center;
    }

    .footer-slogan {
        text-align: center;
    }

    .footer-contact-info {
        display: flex;
        justify-content: center;
    }

    .footer-bottom {
        padding: var(--spacing-lg) 0;
    }

    /* Floating Elements */
    .floating-cta {
        bottom: var(--spacing-md);
        right: var(--spacing-md);
        left: var(--spacing-md);
    }

    .floating-btn {
        width: 100%;
        justify-content: center;
    }

    .back-to-top {
        bottom: var(--spacing-md);
        left: var(--spacing-md);
        width: 40px;
        height: 40px;
    }

    /* Hero Slider */
    .slide-content {
        padding: var(--spacing-2xl) var(--spacing-md);
    }

    .slide-title {
        font-size: var(--font-size-2xl);
    }

    .slide-subtitle {
        font-size: var(--font-size-base);
    }

    .slide-cta {
        flex-direction: column;
        width: 100%;
    }

    .slide-cta .btn {
        width: 100%;
    }

    /* Course Grid */
    .course-grid {
        grid-template-columns: 1fr;
    }

    /* Form */
    .form-grid {
        grid-template-columns: 1fr;
    }

    /* Contact Form */
    .contact-form-wrapper {
        padding: var(--spacing-lg);
    }
}

/* ========================================
   TABLET (640px - 1023px)
======================================== */
@media (min-width: 640px) and (max-width: 1023px) {
    /* Header */
    .site-header {
        --header-height: 68px;
    }

    .main-nav {
        display: none;
    }

    .btn-phone {
        display: flex;
    }

    .btn-phone .phone-text {
        display: none;
    }

    .btn-cta {
        display: inline-flex;
    }

    /* Section */
    .section {
        padding: var(--spacing-3xl) 0;
    }

    .section-title {
        font-size: var(--font-size-3xl);
    }

    /* Grid Layouts */
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .course-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .footer-top {
        grid-template-columns: 1fr 2fr;
    }

    .footer-nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Contact Section */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* Hero */
    .slide-title {
        font-size: var(--font-size-4xl);
    }

    .slide-cta {
        flex-direction: row;
    }

    .slide-cta .btn {
        width: auto;
    }
}

/* ========================================
   DESKTOP (1024px+)
======================================== */
@media (min-width: 1024px) {
    /* Header */
    .site-header {
        --header-height: 72px;
    }

    .main-nav {
        display: block;
    }

    .mobile-menu-toggle {
        display: none;
    }

    .btn-phone {
        display: flex;
    }

    .btn-phone .phone-text {
        display: inline;
    }

    .btn-cta {
        display: inline-flex;
    }

    /* Section */
    .section {
        padding: var(--spacing-4xl) 0;
    }

    .section-title {
        font-size: var(--font-size-4xl);
    }

    /* Grid Layouts */
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .course-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pricing-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .team-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .testimonial-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Footer */
    .footer-top {
        grid-template-columns: 1fr 3fr;
        gap: var(--spacing-3xl);
    }

    .footer-nav-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Contact Section */
    .contact-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Hero */
    .slide-title {
        font-size: var(--font-size-5xl);
    }

    .slide-content .container {
        text-align: left;
        align-items: flex-start;
    }

    /* Floating CTA Hidden on Desktop */
    .floating-cta {
        display: none;
    }
}

/* ========================================
   LARGE DESKTOP (1280px+)
======================================== */
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }

    .section-title {
        font-size: var(--font-size-5xl);
    }

    /* Hero */
    .slide-title {
        font-size: var(--font-size-6xl);
    }

    .slide-subtitle {
        font-size: var(--font-size-xl);
        max-width: 700px;
    }
}

/* ========================================
   EXTRA LARGE DESKTOP (1536px+)
======================================== */
@media (min-width: 1536px) {
    .container {
        max-width: 1400px;
    }
}

/* ========================================
   HEIGHT BASED ADJUSTMENTS
======================================== */
/* Short screens */
@media (max-height: 700px) {
    .hero-slider-inner {
        min-height: auto;
        padding: var(--spacing-4xl) 0;
    }

    .slide-content {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
}

/* ========================================
   LANDSCAPE MOBILE
======================================== */
@media (max-width: 896px) and (orientation: landscape) {
    .hero-slider-inner {
        min-height: auto;
        padding: var(--spacing-2xl) 0;
    }

    .slide-title {
        font-size: var(--font-size-2xl);
    }

    .slide-subtitle {
        display: none;
    }

    .scroll-indicator {
        display: none;
    }
}

/* ========================================
   PRINT STYLES
======================================== */
@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .site-header,
    .mobile-nav,
    .floating-cta,
    .back-to-top,
    .slider-nav,
    .slider-pagination {
        display: none !important;
    }

    .site-main {
        padding-top: 0;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    a {
        text-decoration: underline;
    }

    .btn {
        border: 1px solid #000;
    }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .card:hover,
    .feature-card:hover,
    .pricing-card:hover,
    .course-card:hover {
        transform: none;
    }

    /* Larger touch targets */
    .nav-link,
    .btn,
    .mobile-nav-toggle,
    .mobile-nav-link {
        min-height: 44px;
    }

    /* Disable hover dropdown on touch */
    .dropdown-menu {
        display: none;
    }

    .nav-item.open .dropdown-menu {
        display: block;
    }
}

/* ========================================
   DARK MODE SUPPORT (Optional)
======================================== */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles here if needed */
}

/* ========================================
   HIGH CONTRAST MODE
======================================== */
@media (prefers-contrast: high) {
    :root {
        --border-light: #000;
        --text-muted: var(--text-primary);
    }

    .btn-outline {
        border-width: 3px;
    }
}

/* ========================================
   PAGE SPECIFIC RESPONSIVE STYLES
======================================== */

/* Home Page */
.page-home .hero-section {
    min-height: 100vh;
}

@media (max-width: 639px) {
    .page-home .hero-section {
        min-height: calc(100vh - 64px);
    }

    .page-home .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-home .why-us-grid {
        grid-template-columns: 1fr;
    }
}

/* Services Page */
@media (max-width: 639px) {
    .page-services .course-detail-grid {
        grid-template-columns: 1fr;
    }

    .page-services .curriculum-list {
        padding-left: var(--spacing-md);
    }
}

/* About Page */
@media (max-width: 639px) {
    .page-about .timeline {
        padding-left: var(--spacing-lg);
    }

    .page-about .timeline::before {
        left: 0;
    }
}

/* Contact Page */
@media (max-width: 1023px) {
    .page-contact .contact-wrapper {
        flex-direction: column;
    }

    .page-contact .contact-info {
        order: 2;
    }

    .page-contact .contact-form {
        order: 1;
    }
}

/* Portfolio Page */
@media (max-width: 639px) {
    .page-portfolio .portfolio-filter {
        flex-wrap: wrap;
    }

    .page-portfolio .filter-btn {
        flex: 1 1 calc(50% - var(--spacing-sm));
    }
}

/* Reviews Page */
@media (max-width: 639px) {
    .page-reviews .review-card {
        padding: var(--spacing-md);
    }

    .page-reviews .review-stats {
        flex-direction: column;
        text-align: center;
    }
}

/* FAQ Page */
@media (max-width: 639px) {
    .page-faq .faq-item {
        padding: var(--spacing-md);
    }

    .page-faq .faq-question {
        font-size: var(--font-size-base);
    }
}

/* Team Page */
@media (max-width: 639px) {
    .page-team .team-member-card {
        flex-direction: column;
        text-align: center;
    }

    .page-team .team-member-image {
        margin: 0 auto var(--spacing-md);
    }
}

/* Location Page */
@media (max-width: 639px) {
    .page-location .map-container {
        height: 300px;
    }

    .page-location .location-info-grid {
        grid-template-columns: 1fr;
    }
}

/* News Page */
@media (max-width: 639px) {
    .page-news .news-grid {
        grid-template-columns: 1fr;
    }

    .page-news .news-card-featured {
        grid-column: 1;
    }
}

/* Sitemap Page */
@media (max-width: 639px) {
    .page-sitemap .sitemap-grid {
        grid-template-columns: 1fr;
    }
}