@charset "UTF-8";
/* ============================================================================
   ChannelBase — 반응형(태블릿/모바일) 오버라이드
   site.css 뒤에 로드. 데스크톱 기준 스타일을 화면 폭에 따라 재정의만 한다.
   브레이크포인트: 1024px(태블릿) / 768px(모바일) / 480px(소형)
   ========================================================================== */

/* ─── ~1024px: 태블릿 ─── */
@media (max-width: 1024px) {
    .section { padding: 64px 0; }

    .hero-copy h1 { font-size: 2.4rem; }
    .hero-inner { padding: 72px 24px 140px; }

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

    .why-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }

    .footer-top { flex-direction: column; gap: 40px; }
    .footer-cols { gap: 48px; flex-wrap: wrap; }
}

/* ─── ~768px: 모바일 ─── */
@media (max-width: 768px) {
    :root {
        --topbar-h: 60px;
        --gnb-h: 44px;
    }

    html { font-size: 15px; }
    .container { padding: 0 18px; }
    .section { padding: 52px 0; }
    .section-title { font-size: 1.6rem; }
    .section-head { margin-bottom: 32px; }

    .brand-mark { width: 40px; height: 40px; }
    .brand-name { font-size: 0.98rem; }
    .brand-slogan { display: none; }

    /* GNB — 가로 스크롤 탭 유지, 좌우 여백만 축소 */
    .gnb-link { padding: 0 12px; font-size: 0.84rem; }

    /* 히어로 — 세로 스택, 재생 버튼은 카피 아래로 */
    .hero { min-height: 480px; }
    .hero::before {
        background: linear-gradient(180deg,
            rgba(10, 16, 38, 0.85) 0%,
            rgba(10, 16, 38, 0.6) 100%);
    }
    .hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding: 56px 18px 200px;
    }
    .hero-copy h1 { font-size: 1.9rem; }
    .hero-sub { font-size: 0.9rem; }
    .hero-play { width: 74px; height: 54px; border-radius: 14px; }
    .hero-play::after { border-width: 10px 0 10px 17px; }

    /* 연락 스트립 — 세로 스택 */
    .hero-contact-strip { flex-direction: column; gap: 0; padding: 0; }
    .contact-card { max-width: none; padding: 13px 18px; border-top-width: 0; }
    .contact-card:first-child { border-top-width: 3px; }
    .hero-dots { bottom: auto; top: 20px; left: auto; right: 18px; transform: none; }

    .product-grid { grid-template-columns: 1fr; gap: 16px; }

    .why-section { padding: 64px 0; }
    .why-title { font-size: 1.7rem; }
    .why-grid { grid-template-columns: 1fr; gap: 36px; margin-top: 44px; }
    .why-num::after { width: 100%; }

    .review-grid { grid-template-columns: 1fr; gap: 18px; }
    .chat-card { padding: 20px; }
    .chat-bubble { max-width: 88%; }

    /* 타임라인 — 중앙선 → 좌측선, 카드 전부 우측 단일 컬럼 */
    .process-cols {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding-left: 34px;
    }
    .timeline::before { left: 10px; transform: none; }
    .timeline-item,
    .timeline-item.right {
        width: 100%;
        margin-left: 0;
        padding: 10px 0 10px 34px;
    }
    .timeline-item::after,
    .timeline-item.right::after {
        left: 3px;
        right: auto;
        top: 28px;
    }

    .footer-top { padding: 44px 0 32px; }
    .footer-cols { flex-direction: column; gap: 28px; }
    .footer-headline { font-size: 1.1rem; }
    .footer-bottom .container { flex-direction: column; align-items: flex-start; gap: 6px; }

    .faq-wrap { padding: 28px 14px 64px; }
    .faq-card { padding: 32px 22px 24px; border-radius: var(--radius-md); }
    .faq-title { font-size: 1.6rem; margin-bottom: 22px; }
    .faq-q { padding: 16px 4px; font-size: 0.92rem; }
    .faq-a-inner > div { padding-left: 32px; }

    .floating-kakao { right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 0.7rem; }
}

/* ─── ~480px: 소형 모바일 ─── */
@media (max-width: 480px) {
    .hero-copy h1 { font-size: 1.62rem; }
    .section-title { font-size: 1.4rem; }
    .product-price { font-size: 1.6rem; }
    .btn { padding: 11px 20px; font-size: 0.88rem; }
    .why-item-title { font-size: 1rem; }
}

/* 인증 폼 — 모바일에서는 2열 입력을 1열로 */
@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr; }
    .auth-card { padding: 32px 22px; }
}

/* 페이지 설정 — 섹션 카드/탭 축소 */
@media (max-width: 768px) {
    .setting-intro { padding: 22px 18px 4px; }
    .setting-nav { top: 8px; border-radius: 14px; }
    .setting-nav a { padding: 6px 10px 6px 6px; font-size: 0.8rem; }
    .setting-head { padding: 14px 18px; gap: 12px; }
    .setting-head h2 { font-size: 1.02rem; }
    .setting-body { padding: 18px 16px 24px; }
    .setting-section { scroll-margin-top: 110px; }
}