:root {
    /* 차트 높이 한곳에서 관리 */
    --chart-h: 420px;
    --divider: var(--bs-border-color-translucent, rgba(0, 0, 0, .08));
}


/* ───── 공통/타이포 ───── */
.date-asset-selector-compact .nav-link {
    font-size: .85rem;
}

/* ───── 오른쪽 패널 ───── */
#right-pane {
    display: flex;
    flex-direction: column;
    min-width: 280px;
}

#right-pane .card {
    display: flex;
    flex-direction: column;
    border: 0 !important;
    min-height: 0;
}

#right-pane .card>.list-group {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

#right-pane .card-header {
    border-bottom: 1px solid var(--divider) !important;
}

/* 리스트(랭커) */
#ranker-list .list-group-item {
    cursor: pointer;
}

#ranker-list .list-group-item:hover {
    background: rgba(0, 0, 0, .03);
}

#ranker-list.list-group.list-group-flush>.list-group-item {
    border-bottom-color: transparent !important;
}

#ranker-list.list-group.list-group-flush>.list-group-item:nth-child(5n) {
    border-bottom: 1px solid var(--divider) !important;
}

/* 우측 상단 셀렉터 스크롤 */
.selector-scroll {
    max-height: clamp(120px, 28vh, 280px);
    overflow: auto;
}

/* 랭커 리스트 영역(래퍼가 스크롤 담당) */
#ranker-list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    max-height: clamp(240px, 60vh, 560px);
}

#ranker-list {
    max-height: none !important;
    overflow: visible !important;
}

/* ───── 왼쪽 패널 ───── */
#left-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#left-pane .chart-slot {
    flex: 0 0 var(--chart-h);
    min-height: 0;
}

#left-pane .tabs-slot {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#left-pane .tabs-slot .tab-content {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
}

/* 모바일(1열)에서는 부모 높이 앵커가 없어서 0으로 눌리는 이슈 → auto로 전환
   대신 max-height 캡을 걸어 넘치면 내부 스크롤로 */
@media (max-width: 991.98px) {
    #detailTabs {
        flex: 0 0 auto;
        min-height: 44px;
        overflow-x: auto;
        white-space: nowrap;
        /* sticky 원하면 아래 두 줄도 켜도 됨
    position: sticky; top: 0; z-index: 3; background: #fff; */
    }

    #left-pane .tabs-slot .tab-content {
        flex: 1 1 auto;
        /* ← 모바일에선 auto로 */
        min-height: 0;
        max-height: 60vh;
        /* ← 화면의 60%까지만 커지고 */
        overflow: auto;
        /*    넘치면 내부 스크롤 */
    }
}

/* ───── 탭/내비 오버플로우 ───── */

#detailTabs {
    flex: 0 0 auto;
    overflow-x: auto;
    white-space: nowrap;
}

#detailTabs .nav-link {
    white-space: nowrap;
}

/* (선택) 스크롤바 미세 스타일 */
.selector-scroll::-webkit-scrollbar,
#ranker-list-wrap::-webkit-scrollbar,
#detailTabs::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.selector-scroll::-webkit-scrollbar-thumb,
#ranker-list-wrap::-webkit-scrollbar-thumb,
#detailTabs::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .25);
    border-radius: 8px;
}

/* ───── 유틸 ───── */
/* container-fluid 쓰고 있어서 full-bleed의 100vw 트릭은 제거.
     필요 시 섹션 하단 패딩만 정리 */
.full-bleed .container-fluid {
    padding-bottom: 0;
}

/* 페이지 전용 풀블리드: 부모 container를 탈출해서 뷰포트 폭으로 */
section.full-bleed {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* 양 끝 여백은 여기서만 관리 */
section.full-bleed>.container-fluid {
    padding-left: clamp(8px, 2vw, 24px);
    padding-right: clamp(8px, 2vw, 24px);
}

#trade-title {
    color: #000 !important;
    /* 글씨색 검은색 */
    background-color: #fff;
    /* 배경 흰색 */
    font-size: 1.1rem;
    /* 글씨 크기 조금 작게 (기본 h2는 2rem 정도) */
    font-weight: 600;
    /* 두께는 적당히 */
    margin: 0 0 0.5rem 0;
    /* 차트랑 살짝 간격 */
    padding: 0.25rem 0.5rem;
    /* 안쪽 여백 약간 */
    border-radius: 4px;
    /* 살짝 둥글게 (선택사항) */
}

#ranker-title { 
    font-size:1.1rem; 
    font-weight:600;   
     margin: 0 0 0.5rem 0;
    /* 차트랑 살짝 간격 */
    padding: 0.25rem 0.5rem;
    /* 안쪽 여백 약간 */
    border-radius: 4px;
    /* 살짝 둥글게 (선택사항) */
}


/* 모바일: 기존처럼 clamp */
@media (max-width: 991.98px) {
    #ranker-list-wrap {
        height: auto;
        max-height: clamp(240px, 60vh, 560px);
        flex: 1 1 auto;
    }
}

/* 데스크탑: 고정 높이 */
@media (min-width: 992px) {
    #ranker-list-wrap {
        height: 560px;
        max-height: 560px;
        flex: 0 0 auto;
    }
}