/* 블로그 헤더 반응형 */
@media (max-width: 768px) {
    .blog-header-container {
        padding: 40px 16px 0;
    }
    
    .blog-title a {
        font-size: 36px;
        line-height: 54px;
    }
    
    .blog-search-container {
        margin: 12px 0 24px 0;
    }
    
    .blog-search-input-wrapper {
        max-width: 100%;
    }
}

/* 카테고리 네비게이션 반응형 */
@media (max-width: 768px) {
    .tablist {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }
    
    .tab {
        min-width: 70px;
        padding: 6px 8px;
        font-size: 12px;
        margin: 1px;
    }
}

@media (max-width: 480px) {
    .tab {
        min-width: 60px;
        padding: 4px 6px;
        font-size: 11px;
        margin: 1px;
    }
}

/* 최신 아티클 섹션 반응형 */
@media (max-width: 768px) {
    .recent-article-section {
        margin-top: 32px;
        /* Bootstrap Container가 반응형 패딩 처리하므로 padding 제거 */
    }

    .recent-article-container {
        padding: 24px;
    }

    .title-area {
        /* Bootstrap clearfix는 모바일에서 자연스럽게 세로 배치됨 */
    }

    .section-title {
        font-size: 32px;
    }

    .section-description {
        font-size: 14px;
    }

    .layout-container {
        flex-direction: column;
        gap: 24px;
    }

    .main-card {
        width: 100%;
    }

    .main-card .card-image {
        height: 200px;
    }

    .main-card .title h3 {
        font-size: 24px;
    }

    .side-card {
        flex-direction: column;
        gap: 12px;
    }

    .side-card .card-image {
        width: 100%;
        height: 220px;
    }

    .side-card .title h3 {
        font-size: 16px;
    }
}

/* 인기 컨텐츠 섹션 반응형 */
@media (max-width: 768px) {
    .popular-content-section {
        margin-top: 32px;
        /* Bootstrap Container가 반응형 패딩 처리하므로 padding 제거 */
    }

    .popular-content-container {
        padding: 0;
    }

    .popular-content-section .title-area {
        /* Bootstrap clearfix는 모바일에서 자연스럽게 세로 배치됨 */
    }

    .popular-content-section .section-title {
        font-size: 24px;
    }

    .popular-content-section .section-description {
        font-size: 14px;
    }

    .popular-content-section .category-tabs {
        padding: 0 16px;
    }

    .popular-content-section .tabs-container {
        padding: 8px 0;
        gap: 15px;
    }

    .popular-content-section .tab-button,
    .popular-content-section .popular-tab-button {
        padding: 6px 12px;
        font-size: 13px;
    }

    .popular-carousel-wrapper {
        padding: 0 50px;
    }
    
    .popular-carousel-items {
        gap: 16px;
    }
    
    .popular-carousel-item {
        flex: 0 0 260px;
    }
    
    .popular-item-image {
        height: 160px;
    }
    
    .popular-item-content {
        padding: 0 16px;
    }
    
    .popular-item-title h5 {
        font-size: 15px;
    }
    
    .popular-item-excerpt {
        font-size: 12px;
    }
    
    .carousel-nav-btn {
        width: 36px;
        height: 36px;
    }
    
    .carousel-nav-btn i {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .popular-content-section {
        margin-top: 20px;
        /* Bootstrap Container가 반응형 패딩 처리하므로 padding 제거 */
    }

    .popular-content-container {
        padding: 0;
    }

    .popular-content-section .section-title {
        font-size: 20px;
    }

    .popular-content-section .section-description {
        font-size: 13px;
    }

    .popular-content-section .tabs-container {
        gap: 10px;
    }

    .popular-content-section .tab-button,
    .popular-content-section .popular-tab-button {
        padding: 5px 10px;
        font-size: 12px;
    }

    .popular-carousel-wrapper {
        padding: 0 40px;
    }
    
    .popular-carousel-items {
        gap: 12px;
    }
    
    .popular-carousel-item {
        flex: 0 0 240px;
    }
    
    .popular-item-image {
        height: 160px;
    }
    
    .popular-item-content {
        padding: 0 12px;
    }
    
    .popular-item-title h5 {
        font-size: 14px;
    }
    
    .popular-item-excerpt {
        font-size: 11px;
    }
    
    .popular-item-tags {
        gap: 4px;
    }
    
    .popular-tag {
        padding: 3px 6px;
        font-size: 10px;
    }
    
    .carousel-nav-btn {
        width: 32px;
        height: 32px;
    }
    
    .carousel-nav-btn i {
        font-size: 12px;
    }
}

/* 트렌드 키워드 섹션 반응형 - 인기 컨텐츠와 동일 */
@media (max-width: 768px) {
    .trend-keywords-section {
        margin-top: 32px;
        padding: 0 16px;
    }

    .trend-keywords-container {
        padding: 0;
    }

    .trend-keywords-section .title-area {
        /* Bootstrap clearfix는 모바일에서 자연스럽게 세로 배치됨 */
    }

    .trend-keywords-section .section-title {
        font-size: 24px;
    }

    .trend-keywords-section .section-description {
        font-size: 14px;
    }

    .trend-keywords-section .category-tabs {
        padding: 0 16px;
    }

    .trend-keywords-section .tabs-container {
        padding: 8px 0;
        gap: 15px;
    }

    .trend-keywords-section .tab-button,
    .trend-keywords-section .trend-tab-button {
        padding: 6px 12px;
        font-size: 13px;
    }

    .trend-keywords-carousel-wrapper {
        padding: 0 50px;
    }
    
    .trend-keywords-carousel-items {
        gap: 16px;
    }
    
    .trend-keyword-item {
        flex: 0 0 260px;
        padding: 16px;
    }
    
    .trend-keyword-title h5 {
        font-size: 15px;
    }
    
    .trend-keyword-stats {
        font-size: 11px;
    }
    
    .trend-carousel-nav-btn {
        width: 36px;
        height: 36px;
    }
    
    .trend-carousel-nav-btn i {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .trend-keywords-section {
        margin-top: 20px;
        padding: 0 12px;
    }

    .trend-keywords-container {
        padding: 0;
    }

    .trend-keywords-section .section-title {
        font-size: 20px;
    }

    .trend-keywords-section .section-description {
        font-size: 13px;
    }

    .trend-keywords-section .category-tabs {
        padding: 0 12px;
    }

    .trend-keywords-section .tabs-container {
        gap: 10px;
    }

    .trend-keywords-section .tab-button,
    .trend-keywords-section .trend-tab-button {
        padding: 5px 10px;
        font-size: 12px;
    }

    .trend-keywords-carousel-wrapper {
        padding: 0 40px;
    }
    
    .trend-keywords-carousel-items {
        gap: 12px;
    }
    
    .trend-keyword-item {
        flex: 0 0 240px;
        padding: 14px;
    }
    
    .trend-keyword-title h5 {
        font-size: 14px;
    }
    
    .trend-keyword-stats {
        font-size: 10px;
    }
    
    .trend-carousel-nav-btn {
        width: 32px;
        height: 32px;
    }
    
    .trend-carousel-nav-btn i {
        font-size: 12px;
    }
}

/* 밸런스 UP 섹션 반응형 - 다른 섹션과 동일 */
@media (max-width: 768px) {
    .balance-up-section {
        margin-top: 32px;
        padding: 0 16px;
    }

    .balance-up-container {
        padding: 0;
    }

    .balance-up-section .title-area {
        /* Bootstrap clearfix는 모바일에서 자연스럽게 세로 배치됨 */
    }

    .balance-up-section .section-title {
        font-size: 24px;
    }

    .balance-up-section .section-description {
        font-size: 14px;
    }

    .balance-up-section .category-navigation {
        padding: 0 12px;
    }

    .balance-up-section .tablist {
        gap: 10px;
    }

    .balance-up-section .tab {
        min-width: 70px;
        padding: 5px 8px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .balance-up-section {
        margin-top: 20px;
        padding: 0 12px;
    }

    .balance-up-container {
        padding: 0;
    }

    .balance-up-section .section-title {
        font-size: 20px;
    }

    .balance-up-section .section-description {
        font-size: 13px;
    }

    .balance-up-section .category-tabs {
        padding: 0 12px;
    }

    .balance-up-section .tabs-container {
        gap: 10px;
    }

    .balance-up-section .tab-button {
        padding: 5px 10px;
        font-size: 12px;
    }

    .balance-up-carousel-wrapper {
        padding: 0 40px;
    }
    
    .balance-up-carousel-items {
        gap: 12px;
    }
    
    .balance-up-item {
        flex: 0 0 240px;
        padding: 14px;
    }
    
    .balance-up-title h5 {
        font-size: 14px;
    }
    
    .balance-up-stats {
        font-size: 10px;
    }
    
    .balance-carousel-nav-btn {
        width: 32px;
        height: 32px;
    }
    
    .balance-carousel-nav-btn i {
        font-size: 12px;
    }
}

/* ===================================
   ALL 카테고리 레이아웃 스타일 (스크린샷 기준)
   =================================== */