* { box-sizing: border-box; }
body {
    margin: 0;
    padding: 12px;
    background: #0f172a;
    color: #e2e8f0;
    font-family: -apple-system, sans-serif;
    font-size: 13px;
}

.wrap {
    height: calc(100vh - 24px);
    overflow: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #0f172a;
    text-align: right;
    padding: 7px 10px;
    border-bottom: 1px solid #2a3458;
    color: #64748b;
    font-weight: normal;
    white-space: nowrap;
}

thead th.left { text-align: left; }

tbody tr {
    border-bottom: 1px solid #1a2240;
    cursor: pointer;
}

tbody tr:hover { background: #1a1f3a; }

tbody td {
    padding: 7px 10px;
    white-space: nowrap;
    text-align: right;
}

td.left  { text-align: left; }
td.rank  { color: #475569; width: 32px; }
.sym     { font-weight: bold; color: #fff; font-size: 13px; }
.kname   { color: #64748b; font-size: 11px; margin-top: 1px; }
.up      { color: #f43f5e; }
.down    { color: #3b82f6; }
.flat    { color: #94a3b8; }
.muted   { color: #64748b; }

/* ===== 값 변경 플래시 ===== */
@keyframes flash-up {
    0%   { background-color: rgba(244, 63, 94, 0.35); }
    100% { background-color: transparent; }
}
@keyframes flash-down {
    0%   { background-color: rgba(59, 130, 246, 0.35); }
    100% { background-color: transparent; }
}
.flash-up   { animation: flash-up   0.8s ease-out; }
.flash-down { animation: flash-down 0.8s ease-out; }

/* 전체 스크롤바 너비 설정 */
::-webkit-scrollbar {
    width: 8px; /* 세로 스크롤바 너비 */
    height: 8px; /* 가로 스크롤바 높이 */
}

/* 스크롤바 트랙 (배경 영역) */
::-webkit-scrollbar-track {
    background: #101426; /* #1a1f3a보다 살짝 더 어두운 톤으로 깊이감 부여 */
}

/* 스크롤바 썸 (움직이는 바 영역) */
::-webkit-scrollbar-thumb {
    background: #222b61; /* 요청하신 메인 색상 */
    border-radius: 4px;  /* 둥근 모서리 */
}

/* 스크롤바 썸에 마우스 올렸을 때 */
::-webkit-scrollbar-thumb:hover {
    background: #30409b; /* 조금 더 밝은 톤으로 강조 */
}