/* Mobile Responsive Styles for HADA 예술공작소 */

/* ===================================
   모바일 기본 설정
   =================================== */
@media (max-width: 767px) {
    /* 컨테이너 패딩 최적화 */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* 섹션 패딩 축소 */
    section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* ===================================
   네비게이션 모바일 최적화
   =================================== */
@media (max-width: 767px) {
    /* 로고 크기 조정 */
    nav img {
        height: 3.5rem;
    }
    
    /* 브랜드 타이틀 모바일 최적화 */
    .brand-title-main-vertical {
        font-size: 4.2rem;
        font-weight: 900;
        line-height: 1;
    }
    
    .brand-title-sub-vertical {
        font-size: 1.44rem;
        font-weight: 600;
        letter-spacing: 0.08em;
    }
}

/* ===================================
   히어로 섹션 모바일 최적화
   =================================== */
@media (max-width: 767px) {
    .hero-title-main {
        font-size: 3rem;
        line-height: 1.2;
    }
    
    .hero-title-sub {
        font-size: 1.5rem;
        margin-top: 0.5rem;
    }
}

/* ===================================
   카드 그리드 모바일 최적화
   =================================== */
@media (max-width: 767px) {
    /* 모든 그리드를 1열로 */
    .grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ===================================
   모달 모바일 최적화
   =================================== */
@media (max-width: 767px) {
    /* YouTube 비디오 모달 */
    #youtube-video-modal,
    #podcast-video-modal {
        padding: 0.5rem;
    }
    
    #youtube-video-modal > div,
    #podcast-video-modal > div {
        max-width: 95vw;
    }
}

/* ===================================
   버튼 모바일 최적화
   =================================== */
@media (max-width: 767px) {
    .btn-modern {
        width: 100%;
        padding: 0.875rem 1.5rem;
    }
}

/* ===================================
   테이블 모바일 최적화
   =================================== */
@media (max-width: 767px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ===================================
   태블릿 (768px ~ 1023px) 최적화
   =================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* 그리드를 2열로 */
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}