﻿/* =========================================================
   /css/news_latest_tabs_fix.css
   실시간 뉴스 카테고리 탭 줄바꿈 보정
   latest.asp 전용
   반드시 news_list_readable.css 뒤에 로드
   ========================================================= */

.news-latest-page .news-category-tabs {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap !important;
    gap: 8px !important;
    overflow: visible !important;
    margin: 0 0 26px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid #e4e8ef;
    scrollbar-width: auto !important;
}

.news-latest-page .news-category-tabs::-webkit-scrollbar {
    display: initial !important;
}

.news-latest-page .news-category-tabs a {
    flex: 0 0 auto !important;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #d9e1ec !important;
    border-radius: 999px !important;
    border-bottom: 1px solid #d9e1ec !important;
    background: #ffffff;
    color: #4b5563;
    font-size: 14px;
    font-weight: 550 !important;
    letter-spacing: -0.035em;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.news-latest-page .news-category-tabs a:hover {
    border-color: #1f5fae !important;
    background: #f4f8ff !important;
    color: #1f5fae !important;
}

.news-latest-page .news-category-tabs a.active {
    border-color: #1f5fae !important;
    background: #1f5fae !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* 실시간 뉴스 / 많이 본 뉴스 메뉴 강조 */
.news-latest-page .news-category-tabs a[href="/news/latest.asp"],
.news-latest-page .news-category-tabs a[href="/news/ranking.asp"] {
    border-color: #202632 !important;
    color: #202632;
    font-weight: 700 !important;
}

.news-latest-page .news-category-tabs a[href="/news/latest.asp"].active {
    border-color: #1f5fae !important;
    background: #1f5fae !important;
    color: #ffffff !important;
}

/* 모바일에서도 잘리지 않고 여러 줄 표시 */
@media (max-width: 640px) {
    .news-latest-page .news-category-tabs {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 7px !important;
    }

    .news-latest-page .news-category-tabs a {
        min-height: 34px;
        padding: 0 11px;
        font-size: 13px;
    }
}