/* ================================================
   반응형 디자인 — 지구스카이 리뉴얼
   ================================================ */

/* ── 태블릿 (≤ 1024px) ── */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .features-visual {
        max-width: 500px;
        margin: 0 auto;
    }

    .contact-cta-inner {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 48px 36px;
    }

    .cta-phone {
        text-align: center;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

/* ── 모바일 (≤ 768px) ── */
@media (max-width: 768px) {
    /* 헤더 */
    .header .container {
        position: relative;
        flex-wrap: wrap;
    }

    .logo { flex: 1; }

    .contact-bar {
        order: 3;
        width: 100%;
        padding: 10px 0 4px;
        border-top: 1px solid rgba(255,255,255,0.08);
    }

    .contact-bar .phone-cta {
        width: 100%;
        text-align: center;
        padding: 10px;
    }

    /* 모바일 메뉴 */
    .menu-toggle {
        display: flex;
        order: 2;
    }

    .nav {
        order: 4;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }

    .nav.open {
        max-height: 400px;
    }

    .nav ul {
        flex-direction: column;
        gap: 0;
        padding: 12px 0;
    }

    .nav a {
        display: block;
        padding: 12px 4px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        font-size: 14px;
    }

    .nav a::after { display: none; }

    /* 히어로 */
    .hero { min-height: 520px; }

    .hero-title { font-size: clamp(32px, 8vw, 52px); }

    .hero-subtitle { font-size: 14px; }

    .hero-actions { flex-direction: column; gap: 12px; }

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

    .slider-arrows { display: none; }

    /* 통계 */
    .stats-bar .container {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-item {
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }

    .stat-item:nth-child(2) { border-right: none; }
    .stat-item:nth-child(3), .stat-item:nth-child(4) { border-bottom: none; }

    /* 서비스 */
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* 갤러리 */
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    /* CTA */
    .contact-cta-inner { padding: 36px 24px; }

    .cta-phone-number { font-size: 28px; }

    .contact-methods {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* 지역 서비스 */
    .areas-wrapper { padding: 28px 20px; }

    /* 푸터 */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-brand { grid-column: auto; }

    .footer-bottom {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
}

/* ── 소형 모바일 (≤ 480px) ── */
@media (max-width: 480px) {
    .container { padding: 0 16px; }

    section { padding: 56px 0; }

    .service-grid { grid-template-columns: 1fr; }

    .gallery-grid { grid-template-columns: 1fr; }

    .contact-methods { grid-template-columns: 1fr; }

    .stat-number { font-size: 28px; }

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

    .hero { min-height: 480px; }

    .areas-list a { font-size: 12px; padding: 6px 12px; }

    input, textarea, select {
        font-size: 16px; /* iOS 자동 줌 방지 */
    }
}

/* ── 동작 감소 모드 ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── 고해상도 DPI ── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ── 터치 기기 ── */
@media (hover: none) and (pointer: coarse) {
    .service-card:hover,
    .feature-item:hover,
    .contact-method:hover,
    .areas-list a:hover {
        transform: none;
    }
}

/* ── 인쇄 ── */
@media print {
    .header, .footer, .contact-cta, .hero,
    .nav, .btn, .slider-arrows, .slider-dots { display: none !important; }
    body { font-size: 11pt; color: #000; background: #fff; }
    section { padding: 20px 0; page-break-inside: avoid; }
}