/**
 * 홈 화면 모바일 보정
 *
 * 384px 에서 페이지 높이가 14,812px(약 17화면)이라 아래 수치로 줄인다.
 * 기존 미디어 블록은 그대로 두고 마지막에 덮어쓴다 - 원본을 고치면 배포 때 충돌한다.
 */

@media (max-width: 480px) {

    /* 섹션 세로 여백만 1,068px 이다 */
    .features-long,
    .home-creators-section,
    .home-works-section,
    .stats-new,
    .cta-new {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .footer {
        padding-top: 48px;
    }

    /* 크리에이터 카드 - 한 장이 644px 라 화면보다 크다. 가로 스크롤 한 줄로 */
    .home-creators-grid {
        display: flex;
        grid-template-columns: none;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .home-creators-grid::-webkit-scrollbar {
        display: none;
    }

    .home-creators-grid .creator-card {
        flex: 0 0 150px;
        scroll-snap-align: start;
    }

    .home-creators-grid .creator-card,
    .home-creators-grid .creator-card .card-link,
    .home-creators-grid .creator-card .card-image,
    .home-creators-grid .creator-card img {
        height: 190px;
    }

    .home-creators-grid .creator-card img {
        width: 100%;
        object-fit: cover;
    }

    /* 2열이 되면 오버레이 글자가 카드를 넘친다 */
    .home-creators-grid .card-overlay {
        padding: 10px;
    }

    .home-creators-grid .card-stats {
        display: none;
    }

    /* features - 텍스트 블록과 비주얼이 세로로 쌓여 한 칸이 730px 까지 간다 */
    .features-long .bento-visual {
        height: 150px;
    }

    .features-long .bento-item.bento-bg-dark,
    .features-long .bento-item.bento-bg-accent {
        height: 230px;
    }

    /* 작품 10개 - 원본이 !important 라 맞춰야 먹는다 */
    .home-works-bento .bento-work-item {
        height: 150px !important;
    }

    /* 칸을 줄여도 행이 200px 를 잡고 있어 같이 줄인다 */
    .home-works-bento {
        grid-auto-rows: 150px;
    }

    .feature-grid-container {
        grid-auto-rows: auto;
    }

    /* 푸터 4단이 1열로 쌓여 571px - 2열로 */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* 11px 글자 - 본문 최소 12px */
    .goc-creator-account,
    .category-badge {
        font-size: 12px;
    }

    /* 푸터 링크가 27px 라 누르기 어렵다 */
    .footer a {
        display: inline-block;
        padding: 9px 0;
    }

    /* 배너 - DB 에 inline style 로 저장된 내용이라 !important 가 필요하다.
       어두운 그라데이션을 쓰는 슬라이드만 골라 scrim 을 더한다. */
    .banner-html > div[style*="linear-gradient"] {
        box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.28);
    }

    .banner-html > div[style*="linear-gradient"] h1,
    .banner-html > div[style*="linear-gradient"] h2 {
        font-size: 24px !important;
        line-height: 1.35 !important;
        word-break: keep-all;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
    }

    .banner-html > div[style*="linear-gradient"] p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        word-break: keep-all;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important;
    }

    /* 벤토 - 컨테이너 16 + 그리드 20 + 카드 50 이 겹쳐 글자 폭이 210px 밖에 안 남는다 */
    .feature-grid-container {
        padding: 0;
        gap: 16px;
    }

    .features-long .bento-item {
        padding: 24px 20px;
        border-radius: 16px;
    }

    /* 제목 18.7 본문 16 이라 위계가 안 보인다 */
    .features-long .bento-title {
        font-size: 1.375rem;
        line-height: 1.3;
        margin-bottom: 8px;
        word-break: keep-all;
    }

    .features-long .bento-desc {
        font-size: 0.9375rem;
        line-height: 1.55;
        margin-bottom: 10px;
        word-break: keep-all;
    }

    .features-long .bento-text {
        font-size: 0.875rem;
        line-height: 1.6;
        color: #666;
        word-break: keep-all;
    }

    /* 수치 - 한 칸이 247px 라 네 칸에 494px 를 쓴다 */
    .stats-grid-new {
        gap: 12px;
    }

    .stat-box {
        padding: 16px 8px;
        border-radius: 12px;
    }

    .stat-num {
        font-size: 1.875rem;
    }

    /* "등록된 크리에이에/터" 로 끊긴다 */
    .stat-text {
        font-size: 0.75rem;
        word-break: keep-all;
    }

    /* CTA - padding 100/40 에 반경 60px, 본문 24px 라 글자가 270px 안에 갇힌다 */
    .cta-box {
        padding: 48px 20px;
        border-radius: 16px;
    }

    .cta-content h2 {
        font-size: 1.625rem;
        line-height: 1.35;
        word-break: keep-all;
    }

    .cta-content p {
        font-size: 0.9375rem;
        line-height: 1.6;
        word-break: keep-all;
    }

    .cta-content h3 {
        font-size: 0.9375rem;
    }
}

/* 버튼은 768 부터 세로로 쌓인다 - 두 개뿐이라 양옆으로 두는 쪽이 낫다 */
@media (max-width: 768px) {

    .hero-cta,
    .cta-buttons {
        flex-direction: row;
        width: 100%;
        gap: 8px;
    }

    .hero-cta .btn-new,
    .cta-buttons .btn-new {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 14px 10px;
        font-size: 0.9375rem;
        white-space: nowrap;
    }

    /* cta 쪽은 박스 안이라 폭이 더 좁다 - "크리에이터 전환 신청" 이 1px 잘린다 */
    .cta-buttons .btn-new {
        padding: 14px 6px;
        font-size: 0.875rem;
    }
}