/* ============================================================
   QQ Market Board — Dashboard (섹션 칩 + 코인 테이블 + 신호 배지)
   ============================================================ */

/* ---------- 연결 끊김 배너 ---------- */
.conn-banner {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: var(--sp-4); padding: 10px var(--sp-4);
  background: var(--up-soft); border: 1px solid var(--up); border-radius: var(--r-md);
  color: var(--up); font-size: var(--fs-sm); font-weight: 700; line-height: 1.5;
}
.conn-banner[hidden] { display: none; }

/* ---------- 치명 에러 + 다시 시도 ---------- */
.fatal-msg { margin-bottom: var(--sp-4); color: var(--text-2); font-weight: 600; }
.retry-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--r-sm);
  background: var(--qq-gold); border: 1px solid var(--qq-gold-dim);
  color: #1a1300; font-weight: 800; font-size: var(--fs-sm);
}
.retry-btn:hover { filter: brightness(1.06); }
.retry-btn:active { transform: translateY(1px); }

/* ---------- 동적 섹션 요약 카드 (상단) ---------- */
.hero-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.hero-card {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); min-width: 0;
}
.hero-card h3 { margin: 0 0 8px; font-size: var(--fs-xs); color: var(--text-3); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.hero-card ol { display: flex; flex-direction: column; gap: 6px; }
.hero-card li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); min-width: 0; }
.hero-card li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.hero-card li .pc { font-weight: 700; font-size: var(--fs-xs); }

/* ---------- 섹션 칩 (필터바) ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: var(--sp-4); }
.chip {
  flex: none; padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--text-3); }
.chip.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- 코인 테이블 ---------- */
.table-wrap { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.section-title { display: flex; align-items: center; gap: 10px; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.section-title h2 { margin: 0; font-size: var(--fs-lg); font-weight: 800; }
.section-title .badge-count { font-size: var(--fs-xs); color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 2px 9px; font-weight: 700; }

.coin-table { width: 100%; border-collapse: collapse; }
.coin-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--bg-elev);
  font-size: var(--fs-xs); color: var(--text-3); font-weight: 700; text-align: right;
  padding: 10px var(--sp-4); border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none;
}
.coin-table thead th.l { text-align: left; }
.coin-table thead th.sortable { cursor: pointer; }
.coin-table thead th.sortable:hover { color: var(--text); }
.coin-table thead th.sortable:focus-visible { outline: 2px solid var(--qq-gold); outline-offset: -2px; color: var(--text); }
.coin-table thead th .arrow { font-size: 9px; color: var(--qq-gold); margin-left: 3px; }

.coin-table tbody td { padding: 11px var(--sp-4); border-bottom: 1px solid var(--border-soft); text-align: right; font-size: var(--fs-sm); white-space: nowrap; }
.coin-table tbody tr:hover { background: var(--row-hover); }
.coin-table tbody tr:last-child td { border-bottom: none; }

.coin-name { display: flex; align-items: center; gap: 10px; text-align: left; }
.coin-name .star { color: var(--text-3); font-size: 14px; cursor: pointer; }
.coin-name .star.on { color: var(--qq-gold); }
.coin-ident { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.coin-ident .ko { font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.coin-ident .sym { font-size: var(--fs-2xs); color: var(--text-3); }

.price { font-weight: 700; }
.chg { font-weight: 700; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--flat); }

/* 실시간 색상 플래시 */
@keyframes flashUp { from { background: var(--up-soft); } to { background: transparent; } }
@keyframes flashDown { from { background: var(--down-soft); } to { background: transparent; } }
td.fx-up { animation: flashUp .6s ease-out; }
td.fx-down { animation: flashDown .6s ease-out; }

/* 거래대금 */
.vol { color: var(--text-2); }

/* 범위(기대폭) 게이지: 52주 저~고 중 현재 위치 */
.range-gauge { display: inline-flex; flex-direction: column; gap: 3px; width: 120px; vertical-align: middle; }
.range-bar { position: relative; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--down-soft), var(--surface-2), var(--up-soft)); border: 1px solid var(--border-soft); }
.range-bar .mark { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--text); transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--bg-elev); }
.range-meta { display: flex; justify-content: space-between; font-size: 9px; color: var(--text-3); }

/* ---------- 신호 배지 (MSI = 업비트 공식 신호) ---------- */
.sig-badges { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.sig {
  display: inline-flex; align-items: center; gap: 3px; height: 17px; padding: 0 6px;
  border-radius: 4px; font-size: 10px; font-weight: 800; line-height: 1; cursor: help;
}
.sig--warning { background: var(--up-soft); color: var(--up); border: 1px solid var(--up); }
.sig--caution { background: rgba(232,185,35,.14); color: var(--qq-gold); border: 1px solid var(--qq-gold-dim); }

/* 전체 보기 / 접기 토글 */
.cap-row td { text-align: center !important; padding: 0 !important; border-bottom: none !important; }
.cap-toggle { width: 100%; padding: 12px; background: var(--surface); border: none; border-top: 1px solid var(--border); color: var(--text-2); font-weight: 700; font-size: var(--fs-sm); }
.cap-toggle:hover { background: var(--surface-2); color: var(--text); }
.cap-toggle:active { transform: translateY(1px); }

.empty-row { text-align: center !important; color: var(--text-3); padding: var(--sp-10) !important; }
.skeleton { display: inline-block; height: 12px; width: 60px; border-radius: 4px; background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }