/* ============================================================
   categories.css — 급등중 / 급등가능성 / 반등기대 3분류 스타일
   ============================================================ */

:root {
    --cat-running-c:   #ef4444;
    --cat-running-bg:  rgba(239,68,68,0.06);
    --cat-running-bdr: rgba(239,68,68,0.25);
    --cat-pending-c:   #f97316;
    --cat-pending-bg:  rgba(249,115,22,0.06);
    --cat-pending-bdr: rgba(249,115,22,0.25);
    --cat-bounce-c:    #3b82f6;
    --cat-bounce-bg:   rgba(59,130,246,0.06);
    --cat-bounce-bdr:  rgba(59,130,246,0.25);
}

/* ── 통계 카드 강조 ── */
.stat-card.highlight-running { border-top: 2px solid var(--cat-running-c); }
.stat-card.highlight-pending { border-top: 2px solid var(--cat-pending-c); }
.stat-card.highlight-bounce  { border-top: 2px solid var(--cat-bounce-c); }
.stat-icon.orange { background: rgba(249,115,22,0.12); color: #f97316; }
.stat-icon.purple { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.running-color { color: var(--cat-running-c) !important; }
.pending-color { color: var(--cat-pending-c) !important; }
.bounce-color  { color: var(--cat-bounce-c)  !important; }

/* ── 사이드바 카테고리 요약 ── */
.nav-cat-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px 8px;
}
.nav-cat-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: all 0.18s;
    width: 100%;
    text-align: left;
}
.nav-cat-btn:hover { background: var(--bg-hover); }
.nav-cat-btn.cat-running.active { background: var(--cat-running-bg); border-color: var(--cat-running-bdr); }
.nav-cat-btn.cat-pending.active { background: var(--cat-pending-bg); border-color: var(--cat-pending-bdr); }
.nav-cat-btn.cat-bounce.active  { background: var(--cat-bounce-bg);  border-color: var(--cat-bounce-bdr); }
.nav-cat-icon { font-size: 16px; width: 20px; text-align: center; }
.nav-cat-info { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 6px; }
.nav-cat-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.nav-cat-count { font-size: 13px; font-weight: 800; }
.cat-running .nav-cat-count { color: var(--cat-running-c); }
.cat-pending .nav-cat-count { color: var(--cat-pending-c); }
.cat-bounce  .nav-cat-count { color: var(--cat-bounce-c); }
.sidebar.collapsed .nav-cat-summary { display: none; }

/* ── 알고리즘 설명 바 ── */
.algo-info-bar {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    margin: 0 0 12px;
    overflow: hidden;
}
.algo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    flex: 1;
    border-right: 1px solid var(--border);
}
.algo-item:last-of-type { border-right: none; }
.algo-icon { font-size: 18px; }
.algo-item strong { display: block; font-size: 12px; font-weight: 700; }
.algo-item small  { display: block; font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.algo-item.algo-running strong { color: var(--cat-running-c); }
.algo-item.algo-pending strong { color: var(--cat-pending-c); }
.algo-item.algo-bounce  strong { color: var(--cat-bounce-c); }
.algo-divider { display: none; }
.algo-note { font-size: 10px; color: var(--text-muted); padding: 10px 14px; white-space: nowrap; border-left: 1px solid var(--border); }

/* ── 3분류 대시보드 레이아웃 ── */
.category-dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    flex: 1;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
}

/* ── 카테고리 섹션 카드 ── */
.cat-section {
    background: var(--bg-card2);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* 섹션 헤더 */
.cat-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.18s;
}
.cat-section-header.running { border-top: 3px solid var(--cat-running-c); }
.cat-section-header.pending { border-top: 3px solid var(--cat-pending-c); }
.cat-section-header.bounce  { border-top: 3px solid var(--cat-bounce-c); }
.cat-section-header:hover { background: var(--bg-hover); }

.cat-header-left  { display: flex; align-items: center; gap: 8px; }
.cat-header-icon  { font-size: 20px; }
.cat-header-title { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.cat-header-sub   { font-size: 10px; color: var(--text-muted); margin-top: 1px; }

.cat-header-right { display: flex; align-items: center; gap: 7px; }
.cat-count-badge {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
}
.cat-count-badge .cat-count {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}
.cat-count-badge.running .cat-count { color: var(--cat-running-c); }
.cat-count-badge.pending .cat-count { color: var(--cat-pending-c); }
.cat-count-badge.bounce  .cat-count { color: var(--cat-bounce-c); }

/* ── 접기/펼치기 버튼 ── */
.cat-expand-btn {
    min-width: 60px; height: 26px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    gap: 4px;
    font-size: 10px;
    padding: 0 8px;
    transition: all 0.18s;
    white-space: nowrap;
}
.cat-expand-btn .expand-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.cat-expand-btn i {
    transition: transform 0.22s ease;
    font-size: 9px;
}
.cat-expand-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent-blue);
}

/* 접힌 상태 */
.cat-section.collapsed .cat-coin-list { display: none; }
.cat-section.collapsed .cat-expand-btn i { transform: rotate(-90deg); }

/* style-section 접기/펼치기 */
.style-section.collapsed .style-coin-list { display: none; }
.style-section.collapsed .cat-expand-btn i { transform: rotate(-90deg); }

/* ── 코인 목록 (행형) ── */
.cat-coin-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* 뷰포트 기준 최대 높이: topbar + footer + stats(62) + algo(44) + cat-header(52) + padding(28) */
    max-height: calc(100vh - var(--topbar-h) - var(--footer-h) - 200px);
}
.cat-coin-list::-webkit-scrollbar { width: 4px; }
.cat-coin-list::-webkit-scrollbar-track { background: transparent; }
.cat-coin-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
.cat-coin-list::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

.cat-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    color: var(--text-muted);
    font-size: 12px;
}
.cat-empty i { font-size: 18px; }

/* ── 개별 코인 행 ── */
.cat-coin-card {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border-bottom: 1px solid rgba(28,38,64,.4);
    transition: background 0.15s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.cat-coin-card:last-child { border-bottom: none; }
.cat-coin-card:hover { background: var(--bg-hover); }

.cat-rank {
    font-size: 12px;
    font-weight: 800;
    min-width: 22px;
    text-align: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.cat-coin-icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; color: var(--accent-blue);
    flex-shrink: 0;
}
.cat-coin-icon img { width: 100%; height: 100%; object-fit: contain; }

.cat-coin-info { flex: 1; min-width: 0; }
.cat-coin-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 5px;
}
.cat-sector-tag {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg-base);
    white-space: nowrap;
    overflow: hidden;
    max-width: 70px;
    text-overflow: ellipsis;
}
.cat-coin-price {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.cat-signals {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 3px;
}

/* ── 스코어 컬럼 ── */
.cat-score-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 56px;
    flex-shrink: 0;
}
.cat-score-num {
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}
.cat-score-bar {
    width: 50px; height: 3px;
    background: var(--bg-base);
    border-radius: 2px; overflow: hidden;
}
.cat-score-bar div { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
.cat-vol { font-size: 9px; color: var(--text-muted); white-space: nowrap; }

/* ── 차트 버튼 ── */
.cat-chart-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 7px;
    background: rgba(59,130,246,0.1);
    color: #60a5fa;
    text-decoration: none;
    font-size: 11px;
    transition: all 0.18s;
    flex-shrink: 0;
    border: 1px solid rgba(59,130,246,0.2);
}
.cat-chart-btn:hover { background: rgba(59,130,246,0.22); transform: scale(1.08); }

/* ── 시그널 뱃지 추가 색상 ── */
.signal-badge.pending  { background: rgba(249,115,22,.13);  color: #fb923c; border-color: rgba(249,115,22,.3); }
.signal-badge.bounce   { background: rgba(59,130,246,.13);  color: #60a5fa; border-color: rgba(59,130,246,.3); }
.signal-badge.oi       { background: rgba(139,92,246,.13);  color: #a78bfa; border-color: rgba(139,92,246,.3); }
.signal-badge.breakout { background: rgba(16,185,129,.13);  color: #34d399; border-color: rgba(16,185,129,.3); }
.signal-badge.squeeze  { background: rgba(245,158,11,.13);  color: #fbbf24; border-color: rgba(245,158,11,.3); }
.signal-badge.funding  { background: rgba(236,72,153,.13);  color: #f472b6; border-color: rgba(236,72,153,.3); }
.signal-badge.oversold { background: rgba(239,68,68,.13);   color: #fca5a5; border-color: rgba(239,68,68,.3); }
.signal-badge.whale    { background: rgba(6,182,212,.13);   color: #22d3ee; border-color: rgba(6,182,212,.3); }

/* ── 카테고리 미니뱃지 (테이블 코인명 옆) ── */
.cat-mini-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 4px; font-size: 9px; flex-shrink: 0;
}
.cat-mini-badge.running { background: rgba(239,68,68,.18); }
.cat-mini-badge.pending { background: rgba(249,115,22,.18); }
.cat-mini-badge.bounce  { background: rgba(59,130,246,.18); }

/* ── 사이드바 필터 색상 ── */
.sf-btn[data-filter="momentum"].active  { color: #f87171; }
.sf-btn[data-filter="breakout"].active  { color: #34d399; }
.sf-btn[data-filter="squeeze"].active   { color: #fbbf24; }
.sf-btn[data-filter="funding"].active   { color: #f472b6; }
.sf-btn[data-filter="oversold"].active  { color: #fca5a5; }
.sf-btn[data-filter="whale"].active     { color: #22d3ee; }

/* ── 펀딩비 셀 ── */
.funding-cell {
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
    min-width: 62px;
}
.funding-rate  { font-size: 12px; font-weight: 700; letter-spacing: -.3px; }
.funding-label { font-size: 9px; font-weight: 600; opacity: .8; }
.th-funding { min-width: 70px; text-align: right; padding-right: 12px !important; }

/* ── 펀딩비 패널 ── */
.funding-panel {
    margin-bottom: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid #f472b6;
    border-radius: var(--radius);
    padding: 10px 16px;
    display: none;
}
.funding-panel.visible { display: block; }
.funding-panel-title {
    font-size: 11px; font-weight: 700; color: var(--text-secondary);
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
.funding-panel-title i { color: #f472b6; }
.funding-extremes { display: flex; gap: 6px; flex-wrap: wrap; }
.funding-extreme-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px; border-radius: 8px;
    background: var(--bg-card2); border: 1px solid var(--border);
    cursor: default; transition: border-color 0.18s;
    min-width: 130px;
}
.funding-extreme-item:hover { border-color: var(--border2); }
.fe-symbol { font-size: 12px; font-weight: 800; color: var(--text-primary); }
.fe-rate   { font-size: 12px; font-weight: 700; margin-left: auto; }
.fe-label  { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.fe-long  .fe-rate  { color: var(--cat-running-c); }
.fe-long  .fe-label { background: rgba(239,68,68,.15); color: var(--cat-running-c); }
.fe-short .fe-rate  { color: var(--cat-bounce-c); }
.fe-short .fe-label { background: rgba(59,130,246,.15); color: var(--cat-bounce-c); }

/* ── 반응형 ── */
@media (max-width: 1300px) {
    .category-dashboard { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    /* 모바일: 카드 세로 배치 + 고정 높이로 전환 */
    .category-dashboard {
        grid-template-columns: 1fr;
        flex: none;           /* flex 해제 */
        overflow-y: visible;  /* 자연 흐름으로 */
    }
    .cat-section {
        min-height: 0;
    }
    .cat-coin-list {
        max-height: 320px;   /* 모바일은 max-height 제한 */
        min-height: 100px;
    }
    .algo-info-bar { flex-wrap: wrap; }
    .algo-item { min-width: 140px; }
    .algo-note { border-left: none; border-top: 1px solid var(--border); width: 100%; }
}
@media (max-width: 640px) {
    .th-funding, .funding-cell { display: none; }
    .cat-sector-tag { display: none; }
    .cat-coin-list { max-height: 260px; }
}

/* ============================================================
   트레이딩 스타일 (스캘핑 / 단타 / 스윙) 섹션 스타일
   ============================================================ */

/* ── 색상 변수 ── */
:root {
    --scalping-c:     #f59e0b;
    --scalping-bg:    rgba(245,158,11,0.06);
    --scalping-bdr:   rgba(245,158,11,0.28);
    --daytrading-c:   #10b981;
    --daytrading-bg:  rgba(16,185,129,0.06);
    --daytrading-bdr: rgba(16,185,129,0.28);
    --swing-c:        #8b5cf6;
    --swing-bg:       rgba(139,92,246,0.06);
    --swing-bdr:      rgba(139,92,246,0.28);
}

/* ── 구분선 ── */
.style-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 2px 10px;
    flex-shrink: 0;
}
.style-divider-label {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
}
.style-divider-sub {
    font-size: 11px;
    color: var(--text-muted);
}

/* ── 대시보드 컨테이너 ── */
.style-dashboard {
    /* pageDashboard flex 내에서 flex-shrink:0 → 고정 높이 */
}

/* ── 필터 활성 배지 ── */
.filter-active-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12px;
    color: var(--accent-blue);
    margin-bottom: 10px;
    flex-shrink: 0;
}
.filter-active-badge i {
    font-size: 11px;
    opacity: 0.8;
}
.filter-active-badge b {
    color: #93c5fd;
}

/* ── 3열 그리드 ── */
.style-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* ── 섹션 카드 ── */
.style-section {
    background: var(--bg-card2);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* ── 섹션 헤더 ── */
.style-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.18s;
}
.style-section-header:hover { background: var(--bg-hover); }
.style-section-header.scalping   { border-top: 3px solid var(--scalping-c); }
.style-section-header.daytrading { border-top: 3px solid var(--daytrading-c); }
.style-section-header.swing      { border-top: 3px solid var(--swing-c); }

.style-header-left  { display: flex; align-items: center; gap: 8px; }
.style-header-icon  { font-size: 20px; }
.style-header-title { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.style-header-sub   { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.style-header-right { display: flex; align-items: center; gap: 7px; }

/* ── 카운트 배지 ── */
.style-count-badge {
    display: flex; align-items: baseline; gap: 2px;
    font-size: 10px; font-weight: 600; color: var(--text-secondary);
}
.style-count-badge .style-count {
    font-size: 18px; font-weight: 900; line-height: 1;
}
.style-count-badge.scalping   .style-count { color: var(--scalping-c); }
.style-count-badge.daytrading .style-count { color: var(--daytrading-c); }
.style-count-badge.swing      .style-count { color: var(--swing-c); }

/* ── 알고리즘 태그 바 ── */
.style-algo-tag {
    display: flex;
    gap: 0;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.style-algo-tag span {
    flex: 1;
    text-align: center;
    padding: 5px 4px;
    border-right: 1px solid var(--border);
}
.style-algo-tag span:last-child { border-right: none; }
.style-algo-tag.scalping   { background: var(--scalping-bg); }
.style-algo-tag.daytrading { background: var(--daytrading-bg); }
.style-algo-tag.swing      { background: var(--swing-bg); }

/* ── 코인 목록 ── */
.style-coin-list {
    display: flex;
    flex-direction: column;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
}
.style-coin-list::-webkit-scrollbar { width: 4px; }
.style-coin-list::-webkit-scrollbar-track { background: transparent; }
.style-coin-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
.style-coin-list::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

/* ── 서브 인포 태그 ── */
.style-sub-info {
    display: flex;
    gap: 5px;
    margin-top: 2px;
    flex-wrap: wrap;
}
.style-sub-tag {
    font-size: 10px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}
.style-sub-tag b { color: var(--text-secondary); }

/* ── 포지션 유지 시간 ── */
.style-hold-time {
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 2px;
    letter-spacing: -0.2px;
}

/* ── 사이드바 스타일 버튼 ── */
.nav-style-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px 10px;
}
.nav-style-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: all 0.18s;
    width: 100%;
    text-align: left;
}
.nav-style-btn:hover { background: var(--bg-hover); }
.nav-style-btn.style-scalping:hover,
.nav-style-btn.style-scalping:focus  { border-color: var(--scalping-bdr); background: var(--scalping-bg); }
.nav-style-btn.style-daytrading:hover,
.nav-style-btn.style-daytrading:focus{ border-color: var(--daytrading-bdr); background: var(--daytrading-bg); }
.nav-style-btn.style-swing:hover,
.nav-style-btn.style-swing:focus     { border-color: var(--swing-bdr); background: var(--swing-bg); }

.nav-style-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.nav-style-info { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 6px; }
.nav-style-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.nav-style-count {
    font-size: 13px; font-weight: 800;
}
.nav-style-count.scalping   { color: var(--scalping-c); }
.nav-style-count.daytrading { color: var(--daytrading-c); }
.nav-style-count.swing      { color: var(--swing-c); }
.sidebar.collapsed .nav-style-summary { display: none; }

/* ── 반응형 ── */
@media (max-width: 1300px) {
    .style-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .style-grid { grid-template-columns: 1fr; }
    .style-coin-list { max-height: 280px; }
}
@media (max-width: 640px) {
    .style-coin-list { max-height: 220px; }
}