/* scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f1117; }
::-webkit-scrollbar-thumb { background: #2a2d35; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3d45; }

/* 필터 탭 pill */
.src-tab {
    display: inline-block;
    border: 1px solid transparent;
    color: #6b7280;
    background: transparent;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
}
.src-tab:hover { color: #fff; background: rgba(31,41,55,0.8); }
.src-tab.active { border-color: #3498db; color: #3498db; background: rgba(52,152,219,0.1); }

/* ── 반응형 그리드 ── */
.g-kpi   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.g-two   { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

@media (max-width: 1023px) {
    .g-kpi { grid-template-columns: repeat(2, 1fr); }
    .g-two { grid-template-columns: 1fr; }

    /* 최근자료·키워드 고정 높이 해제 → 컨텐츠 맞춤 */
    #recentPanel  { height: auto !important; min-height: 300px; }
    #keywordPanel { height: auto !important; min-height: 200px; }

    /* 차트 높이 축소 */
    #chartMention,
    #chartSentiment { height: 320px !important; }
}

@media (max-width: 639px) {
    .g-kpi { grid-template-columns: 1fr; }
    header { flex-wrap: wrap; }

    /* 모바일: 차트 더 축소 */
    #chartMention,
    #chartSentiment { height: 260px !important; }

    /* 최근자료·키워드 패딩 줄이기 */
    #recentPanel  { padding: 12px !important; }
    #keywordPanel { padding: 12px !important; }
}

/* ── SOV 반응형 ── */
@media (max-width: 700px) {
    .sov-bar { display: none !important; }
    .sov-row { flex-wrap: wrap; gap: 0.5rem; }

    .sov-stats {
        flex: none !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 2px !important;
    }
    .sov-stats > div,
    .sov-stats > span {
        width: auto !important;
        text-align: right !important;
    }
}