/* OKX 데이터 페이지 전용 추가 스타일 (공통 데이터 부품은 /style.css 에 있음, 이 파일은 /data/ 페이지에서만 불러옴) */

/* 차트 툴팁 줄 · 색 점 */
.tth { margin-bottom: 4px; color: var(--muted); font-size: 11.5px; }
.ttr { display: flex; align-items: center; gap: 6px; min-width: 150px; line-height: 1.7; }
.ttr .ttn { flex: 1; color: var(--fg); }
.ttr b { color: var(--fg-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.lsk__label .dot { margin-right: 6px; }

.dkpi--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .dkpi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dnote { margin: 8px 2px 24px; color: var(--faint); font-size: 12.5px; line-height: 1.6; }
.dnote b { color: var(--muted); }

/* 작은 꼬리표: 분류(주식·원자재), 롱/숏, 청산 구분 */
.dtag { display: inline-block; padding: 1px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: 1px; }
.dtag--long { border-color: rgba(14, 138, 95, .3); background: #effaf5; color: #0b6e4b; }
.dtag--short { border-color: rgba(223, 27, 65, .28); background: #fff1f3; color: #b3112f; }

/* 데이터 목록 카드의 실데이터/추정 표시 */
.dbadge { display: inline-block; margin-bottom: 8px; padding: 1px 7px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-ink); font-size: 11.5px; font-weight: 600; }
.dbadge--model { background: var(--tint); color: var(--muted); }

/* 실시간 청산 */
.dlive { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.dlive::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px rgba(14, 138, 95, .15); animation: dlive 1.6s ease-in-out infinite; }
@keyframes dlive { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dlive::before { animation: none; } }
/* 롱 청산(빨강, 왼쪽) : 숏 청산(초록, 오른쪽) — 색과 함께 글자로도 표시 */
.liqbar { height: 6px; margin: 8px 0 6px; border-radius: 3px; background: var(--up); overflow: hidden; }
.liqbar span { display: block; height: 100%; background: var(--down); border-right: 2px solid #fff; }
.liqmini { display: inline-block; width: 56px; height: 6px; margin-right: 8px; border-radius: 3px; background: var(--up); overflow: hidden; vertical-align: middle; }
.liqmini span { display: block; height: 100%; background: var(--down); border-right: 2px solid #fff; }
.dsplit { display: grid; gap: 0 24px; }
@media (min-width: 1000px) { .dsplit { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.dfeed-card { max-height: 640px; overflow-y: auto; }
.dfeed tr.is-new td, .dfeed tr.is-new th { animation: dnew 2.4s ease-out; }
@keyframes dnew { from { background: rgba(83, 58, 253, .1); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .dfeed tr.is-new td, .dfeed tr.is-new th { animation: none; background: var(--accent-soft); } }

/* 리더보드: OKX 리드 트레이더 9칸 (순위·이름·수익금·수익률·추이·승률·카피 인원·운용 규모·펼침) */
@media (min-width: 761px) {
  .lb-row { grid-template-columns: 40px minmax(0, 2.2fr) 1fr 0.9fr 100px 0.65fr 0.8fr 0.9fr 18px; gap: 10px; }
}
.lb-name__w { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 0; }
.lb-name__w .lb-name__t, .lb-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-sub { color: var(--faint); font-size: 12px; font-weight: 400; }
.lb-full { flex: none; padding: 1px 6px; border-radius: var(--r-sm); background: var(--tint); color: var(--muted); font-size: 11px; font-style: normal; font-weight: 600; }
.lb-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 16px 0 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--line-soft); overflow: hidden; }
@media (min-width: 761px) { .lb-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lb-stats div { padding: 10px 14px; background: #fff; }
.lb-stats dt { color: var(--faint); font-size: 12px; }
.lb-stats dd { margin: 2px 0 0; color: var(--fg-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-pref { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lb-hist { padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; overflow-x: auto; }
.lb-hist .dtag { margin-left: 4px; }