@charset "utf-8";

/* ============================================================
   모바일 메인 전용 반응형 — max-width: 768px
   Figma: Main_01 (360px 기준)
   헤더/GNB 드로어 공통 스타일은 header.css 참고
   ============================================================ */

@media (max-width: 768px) {

    /* ===== 컨테이너 — 헤더 오버랩 ===== */
    #container {
        min-width: 0;
        padding-top: 0;
    }

    /* ===== 히어로 — 817px ===== */
    .main-hero {
        height: 817px;
    }

    .hero-title {
        font-size: 24px;
    }

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

    /* ===== WHAT WE DO ===== */
    .section-whatwedo {
        padding: 80px 20px;
        gap: 20px;
    }

    .section-whatwedo .icon-logo {
        width: 60px;
        height: 38px;
    }

    .section-whatwedo .text-wrap {
        gap: 8px;
    }

    .section-whatwedo .section-label {
        font-size: 14px;
        letter-spacing: -0.28px;
    }

    .section-whatwedo .section-title {
        font-size: 24px;
        letter-spacing: -0.48px;
    }

    /* ===== OUR WORKS ===== */
    .section-works {
        padding: 80px 20px;
        gap: 40px;
    }

    .section-works .section-header h2 {
        font-size: 24px;
        letter-spacing: -0.48px;
    }

    .section-works .works-slider-wrap {
        max-width: 100%;
    }

    .section-works .swiper-slide {
        max-width: 100%;
        aspect-ratio: 320 / 453;
    }

    .section-works .works-swiper {
        padding: 0;
    }

    .swiper .swiper-button-next,
    .swiper .swiper-button-prev {
        width: 52px;
        height: 52px;
    }

    /* ===== CLIENTS ===== */
    .section-clients {
        padding: 80px 20px;
    }

    .section-clients .clients-inner {
        gap: 40px;
        align-items: flex-start;
    }

    .section-clients .section-header h2 {
        font-size: 24px;
        letter-spacing: -0.48px;
    }

    .section-clients .clients-grid {
        gap: 40px;
        justify-content: center;
    }

    .section-clients .client-logo-box {
        width: 140px;
        height: 60px;
        padding: 8px 12px;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }

    .section-clients .client-logo-box:hover {
        transform: none;
        box-shadow: none;
    }

    .section-clients .client-logo-box img {
        max-height: 46px;
    }

    /* ===== CONTACT ===== */
    .section-contact {
        padding: 80px 20px;
    }

    .section-contact .contact-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    /* contact-text: flex:1 해제 → 전폭 */
    .section-contact .contact-text {
        flex: none;
        width: 100%;
        gap: 8px;
    }

    .section-contact .contact-text h2 {
        font-size: 24px;
        letter-spacing: -0.48px;
    }

    .section-contact .contact-text p {
        font-size: 16px;
        font-weight: 500;
        color: #666;
        letter-spacing: -0.32px;
        line-height: 1.6;
        margin: 0;
    }

    /* span을 각각 한 줄로 */
    .section-contact .contact-text p span {
        display: block;
    }

    .section-contact .contact-btn {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: -0.24px;
        padding: 12px 28px;
    }

    /* ===== 히어로 오버레이 모바일 숨김 */
    .hero-overlay {
        display: none;
    }
}