/* etf-trends.css — 증권사별 ETF 조정 동향 (prefix: tr-) */

/* ========================================
   2단 레이아웃: 메인 + 사이드바
   ======================================== */
.tr-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 0 var(--space-8);
    align-items: start;
}
.tr-main {
    min-width: 0;
}
.tr-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    position: sticky;
    top: 72px;
}
.tr-sidebar-section {
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

/* ========================================
   페이지 헤더
   ======================================== */
.tr-title-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.tr-page-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.tr-page-meta {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    white-space: nowrap;
}
.tr-page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.tr-period-chips {
    display: flex;
    gap: var(--space-2);
}
.tr-section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.tr-section-header-row .etf-section-title {
    margin: 0;
}
.tr-sort-chips {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}
.tr-sort-chips .etf-filter-chip,
.tr-period-chips .etf-filter-chip {
    flex-shrink: 0;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
}
.tr-section-desc {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin: var(--space-1) 0 var(--space-3);
}

/* ========================================
   모바일 탭 (데스크탑 숨김)
   ======================================== */
.tr-content-tabs {
    display: none;
}

/* ========================================
   ① 운용사 카드 그리드
   ======================================== */
.tr-company-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
.tr-company-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tr-company-card:hover {
    box-shadow: var(--shadow-md);
}
.tr-company-card.expanded {
    border-color: var(--color-accent);
}
.tr-company-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.tr-company-rank {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-text-tertiary);
    min-width: 1.5em;
    text-align: center;
}
.tr-company-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tr-company-name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14em;
}
.tr-company-meta {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}
.tr-company-total {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* 스택 바 */
.tr-company-bar {
    display: flex;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    margin: var(--space-3) 0 var(--space-2);
    overflow: hidden;
}
.tr-bar-new {
    background: var(--color-bull);
    border-radius: var(--radius-full) 0 0 var(--radius-full);
}
.tr-bar-removed {
    background: var(--color-bear);
}
.tr-company-stats {
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

/* ========================================
   사이드바: 요약 카드
   ======================================== */
.tr-summary-card {
    display: none; /* 모바일에서만 표시 */
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}
.tr-summary-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    text-align: center;
    margin-bottom: var(--space-3);
}
.tr-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tr-summary-value {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.tr-summary-label {
    font-size: 11px;
    color: var(--color-text-tertiary);
    letter-spacing: 0.02em;
}
.tr-summary-breakdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.tr-summary-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-text-tertiary);
    flex-shrink: 0;
}

/* ========================================
   사이드바: 요약 카드 (데스크탑)
   ======================================== */
.tr-sidebar-summary-card {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

/* ========================================
   사이드바: 섹션 타이틀
   ======================================== */
.tr-sidebar-title {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1);
    letter-spacing: -0.01em;
    padding-left: calc(4px + var(--space-2));
    position: relative;
}
.tr-sidebar-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 4px;
    height: 1em;
    border-radius: 2px;
    background: var(--color-accent);
}

/* ========================================
   사이드바: 컨센서스 (compact)
   ======================================== */
.tr-consensus-tabs {
    margin-bottom: var(--space-2);
}
.tr-sidebar .tr-consensus-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
}
.tr-sidebar .tr-consensus-tabs::-webkit-scrollbar {
    display: none;
}
.tr-sidebar .tr-consensus-tabs button {
    flex-shrink: 0;
    font-size: 11px;
    padding: var(--space-1) var(--space-2);
}

/* 컨센서스 리스트: 1행 = rank + name + badges */
.tr-consensus-list {
    display: flex;
    flex-direction: column;
}
.tr-consensus-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    transition: background 0.1s;
}
.tr-consensus-item:last-child {
    border-bottom: none;
}
.tr-consensus-item:hover {
    background: var(--color-bg-secondary);
    margin: 0 calc(-1 * var(--space-2));
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    border-radius: var(--radius-md);
}
.tr-consensus-item--static {
    cursor: default;
}
.tr-consensus-item--static:hover {
    background: transparent;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
}
.tr-consensus-rank {
    font-size: 11px;
    font-weight: var(--font-bold);
    color: var(--color-text-tertiary);
    min-width: 1.5em;
    text-align: center;
    flex-shrink: 0;
}
.tr-consensus-name {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tr-consensus-badge {
    font-size: 10px;
    font-weight: var(--font-semibold);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}
.tr-consensus-badge.etf-badge-bull {
    background: color-mix(in srgb, var(--color-bull) 15%, transparent);
    color: var(--color-bull);
}
.tr-consensus-badge.etf-badge-bear {
    background: color-mix(in srgb, var(--color-bear) 15%, transparent);
    color: var(--color-bear);
}

/* 사이드바: 컨센서스 아이템 제한 (8개) */
.tr-sidebar .tr-consensus-item:nth-child(n+9) {
    display: none;
}

/* ========================================
   사이드바: 타임라인 (dense)
   ======================================== */
.tr-timeline-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tr-timeline-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 0;
}
.tr-timeline-date {
    font-size: 11px;
    color: var(--color-text-tertiary);
    min-width: 3em;
    font-variant-numeric: tabular-nums;
}
.tr-timeline-bar-wrap {
    flex: 1;
}
.tr-timeline-bar {
    display: flex;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    overflow: hidden;
}
.tr-timeline-count {
    font-size: 11px;
    color: var(--color-text-tertiary);
    min-width: 3.5em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 사이드바: 타임라인 제한 (12행) */
.tr-sidebar .tr-timeline-row:nth-child(n+13) {
    display: none;
}

/* ========================================
   운용사 상세 (드릴다운)
   ======================================== */
.tr-detail-expand {
    grid-column: 1 / -1;
    background: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.tr-detail-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.tr-detail-header .etf-section-title {
    margin: 0;
    font-size: var(--text-base);
}
.tr-detail-meta {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}
.tr-detail-section {
    margin-bottom: var(--space-4);
}
.tr-detail-section:last-child {
    margin-bottom: 0;
}
.tr-detail-subtitle {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-tertiary);
    margin: 0 0 var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* drill-down 내 리스트 compact */
.tr-detail-expand .etf-top-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--space-4);
}
.tr-detail-expand .etf-top-item {
    padding: var(--space-2) 0;
}
.tr-detail-expand .etf-top-name {
    font-size: var(--text-sm);
}
.tr-detail-expand .etf-top-company {
    font-size: var(--text-xs);
}
.tr-detail-expand .etf-top-badge {
    font-size: 11px;
    padding: 2px var(--space-2);
}
.tr-detail-expand .etf-top-rank {
    width: 22px;
    height: 22px;
    font-size: 11px;
}
@media (max-width: 639px) {
    .tr-detail-expand .etf-top-list {
        grid-template-columns: 1fr;
    }
}

.etf-container {
    transition: opacity 0.15s ease;
}

/* ========================================
   반응형: 메인 2열 (≥640px)
   ======================================== */
@media (min-width: 640px) {
    .tr-company-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   반응형: ≤960px → 1단 + 모바일 탭
   ======================================== */
@media (max-width: 960px) {
    .tr-layout {
        grid-template-columns: 1fr;
        gap: var(--space-5) 0;
    }

    /* 모바일 탭 표시 */
    .tr-content-tabs {
        display: flex;
        gap: 0;
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: var(--space-1);
        margin-bottom: var(--space-5);
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
    }
    .tr-content-tab {
        flex: 1;
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--color-text-tertiary);
        background: none;
        border: none;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: var(--transition-fast);
        white-space: nowrap;
    }
    .tr-content-tab.active {
        color: var(--color-text-primary);
        background: var(--color-bg-secondary);
        font-weight: var(--font-semibold);
    }

    /* 탭 제어 */
    .tr-tab-content {
        display: none;
    }
    .tr-tab-content.active {
        display: block;
    }

    /* 사이드바 unstick */
    .tr-sidebar {
        position: static;
    }
    /* 사이드바 요약 카드: 모바일에서 숨김 (큰 카드가 대체) */
    .tr-sidebar-summary-card {
        display: none;
    }

    /* 요약 카드: 모바일에서 표시 */
    .tr-summary-card {
        display: block;
    }

    /* 사이드바 섹션 → 모바일 전체폭 */
    .tr-sidebar .tr-sidebar-section {
        border-top: none;
        padding-top: 0;
    }
    .tr-sidebar-title {
        font-size: var(--text-lg);
        padding-left: 0;
    }
    .tr-sidebar-title::before {
        display: none;
    }

    /* 모바일: 리스트 확대 */
    .tr-consensus-name {
        font-size: var(--text-base);
    }
    .tr-consensus-badge {
        font-size: var(--text-xs);
    }
    .tr-consensus-rank {
        font-size: var(--text-xs);
    }

    /* 모바일: 컨센서스/타임라인 제한 해제 */
    .tr-sidebar .tr-consensus-item:nth-child(n+9) {
        display: flex;
    }
    .tr-sidebar .tr-timeline-row:nth-child(n+13) {
        display: flex;
    }
}

/* ========================================
   반응형: ≤768px
   ======================================== */
@media (max-width: 768px) {
    .tr-page-header-row {
        flex-wrap: wrap;
    }
}

/* ========================================
   반응형: ≤480px
   ======================================== */
@media (max-width: 480px) {
    .tr-period-chips {
        width: 100%;
    }
    .tr-page-title {
        font-size: var(--text-xl);
    }
    .tr-company-card {
        padding: var(--space-3) var(--space-4);
    }
    .tr-company-name {
        max-width: none;
    }
    .tr-company-total {
        font-size: var(--text-base);
    }
    .tr-section-header-row {
        gap: var(--space-2);
    }
    .tr-detail-expand {
        padding: var(--space-4);
    }
    .tr-content-tab {
        font-size: var(--text-xs);
        padding: var(--space-2);
    }
}