:root { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body { margin: 0; background: #0b0d10; color: #e9eef5; }
.header { display: flex; align-items: flex-end; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #202634; background: #0f131a; position: sticky; top: 0; 
  z-index: 20;
}
.header h1 { margin: 0; font-size: 18px; font-weight: 700; }
.meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.meta #lastUpdated { opacity: 0.85; font-size: 12px; }
.refresh { font-size: 12px; opacity: 0.9; display: flex; gap: 6px; align-items: center; }
.refresh input { width: 64px; padding: 6px 8px; border-radius: 8px; border: 1px solid #263044; background: #0b0d10; color: #e9eef5; }
button { padding: 8px 12px; border-radius: 10px; border: 1px solid #2a3550; background: #111a2a; color: #e9eef5; cursor: pointer; }
button:hover { background: #14213a; }

.container { padding: 16px 20px 40px; max-width: 1100px; margin: 0 auto; }
.table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 14px; }
.table th, .table td { padding: 10px 10px; border-bottom: 1px solid #1c2331; font-size: 13px; }
.table thead th { /* position: sticky; top: calc(var(--header-h, 0px) + 8px); background: #0f131a; z-index: 10; */}
.table tr:hover td { background: rgba(255,255,255,0.03); }
.right { text-align: right; font-variant-numeric: tabular-nums; }
.muted { opacity: 0.75; font-size: 12px; }
.bad  { color: #007aff; }   /* 하락(-) 파랑 */
.good { color: #ff3b30; }   /* 상승(+) 빨강 */
.neutral { color: #ced4da; }

.debug { margin-top: 16px; opacity: 0.9; }
pre { background: #0f131a; border: 1px solid #202634; padding: 12px; border-radius: 12px; overflow: auto; max-height: 340px; }