*{box-sizing:border-box}
:root{color-scheme:dark;--bg:#0d1117;--panel:#161b22;--panel2:#111820;--line:#30363d;--text:#e6edf3;--muted:#8b949e;--blue:#58a6ff;--amber:#d29922;--gray:#8b949e}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;overflow-x:hidden}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
.page-head{border-bottom:1px solid var(--line);background:#111820;padding:24px 18px}
.head-inner{max-width:1440px;margin:auto;display:flex;justify-content:space-between;gap:20px;align-items:center}
.eyebrow,.stage-kicker{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--blue);text-transform:uppercase}
h1{font-size:27px;line-height:1.2;margin:6px 0 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pilot-badge,.source-state{font-size:11px;padding:4px 9px;border:1px solid #66500f;background:#2c2413;color:#f0c674;border-radius:999px;font-weight:700;letter-spacing:0}
.lead{margin:0;color:#c9d1d9;font-size:14px}.refresh-box{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:170px}.api-time{font-size:11px;color:var(--muted);text-align:right}
button{border:1px solid #3b4b5b;color:#dbeafe;background:#172536;border-radius:7px;padding:8px 12px;font-weight:650;cursor:pointer}button:hover{background:#20364d}button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.page-wrap{max-width:1440px;margin:0 auto;padding:18px}
.notice{border-radius:9px;padding:13px 15px;margin-bottom:16px;background:#1b1e22;border:1px solid #624b17;border-left:4px solid var(--amber)}.notice strong{color:#f0c674}.notice p{margin:5px 0 0;color:#c9d1d9}
.flow-strip{display:flex;align-items:center;justify-content:center;gap:13px;padding:12px 10px;margin:0 0 24px;background:var(--panel);border:1px solid var(--line);border-radius:9px;color:#dbe3eb;flex-wrap:wrap}.flow-strip span:not(.flow-arrow){display:flex;align-items:center;gap:8px}.flow-strip b{display:inline-flex;width:23px;height:23px;border-radius:50%;align-items:center;justify-content:center;background:#26384b;color:#bcd9fb;font-size:12px}.flow-strip small{font-size:11px;color:var(--muted)}.flow-arrow{color:#586574;font-size:16px}
.stage{margin:0 0 25px}.stage-heading{display:flex;gap:13px;align-items:flex-start;margin:0 0 10px}.stage-kicker{flex:0 0 67px;padding-top:5px}.stage-heading h2,.source-panel h2{font-size:19px;margin:0 0 3px}.stage-heading p,.source-panel>p{margin:0;color:var(--muted);font-size:12.5px}
.indicator-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.single-grid{grid-template-columns:minmax(0,1fr)}.indicator-card,.source-panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:15px;min-width:0}.indicator-card{border-top:2px solid #515a63}.indicator-topline{display:flex;align-items:center;gap:8px}.indicator-number{font-size:14px;font-weight:800;color:#c8d7e7}.indicator-type{font-size:10px;color:#9fb0c1;background:#202a35;border:1px solid #303d4b;border-radius:999px;padding:2px 7px}.status-badge{margin-left:auto;font-size:11px;font-weight:700;border-radius:999px;padding:4px 9px;white-space:nowrap}.status-unknown{background:#262b31;border:1px solid #454d56;color:#b3bbc4}
.indicator-card h3{font-size:17px;margin:11px 0 5px}.summary{min-height:41px;color:#c9d1d9;font-size:12.5px;margin:0 0 12px}.component-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:10px 0}.component-grid-four{grid-template-columns:repeat(4,minmax(0,1fr))}.component{min-width:0;display:flex;flex-direction:column;gap:2px;padding:9px;background:var(--panel2);border:1px solid #252d36;border-radius:7px}.component-label{font-size:11px;color:var(--muted)}.component strong{font-size:19px;color:#aeb7c0;font-variant-numeric:tabular-nums}.component-unit{font-size:10px;color:#7f8994}.component-direction{font-size:10px;color:#99a3ad;line-height:1.35}
.details{border-top:1px solid #252d36;margin:12px 0 0;padding-top:9px;display:grid;gap:7px}.details div{display:grid;grid-template-columns:82px minmax(0,1fr);gap:8px}.details dt{color:#aab4bf;font-size:11px;font-weight:700}.details dd{margin:0;color:#aeb7c0;font-size:11px}.liquidity-count{display:flex;align-items:center;gap:9px;padding:9px 10px;background:#121922;border:1px solid #293642;border-radius:7px;color:#aeb7c0;font-size:11px}.liquidity-count strong{font-size:15px;color:#c1c9d1}.liquidity-count small{margin-left:auto;color:var(--muted)}.observation-meta{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #252d36;padding-top:8px;margin-top:10px;font-size:10px;color:var(--muted)}.observation-meta strong{font-weight:500;color:#aeb7c0}
.source-panel{margin-top:25px;padding:16px}.source-heading-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.source-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 24px;margin:13px 0;padding-left:18px;color:#aeb7c0;font-size:11.5px}.source-footnote{font-size:11px!important;margin-top:12px!important}.source-footnote code{color:#c9d1d9}.page-footer{padding:16px 2px 8px;color:var(--muted);font-size:11px}.page-footer p{margin:0 0 6px}.page-footer span{font-size:10px}
@media(max-width:850px){.component-grid-four{grid-template-columns:repeat(2,minmax(0,1fr))}.source-links{grid-template-columns:1fr}}
@media(max-width:680px){.head-inner{align-items:flex-start;flex-direction:column}.refresh-box{align-items:flex-start;flex-direction:row;justify-content:space-between;width:100%}.api-time{text-align:left}.page-wrap{padding:12px}.indicator-grid{grid-template-columns:1fr}.stage-heading h2,.source-panel h2{font-size:17px}.flow-strip{justify-content:flex-start;gap:8px}.flow-arrow{padding:0 2px}.component-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.details div{grid-template-columns:72px minmax(0,1fr)}.liquidity-count{flex-wrap:wrap}.liquidity-count small{width:100%;margin-left:0}.summary{min-height:0}}
@media(max-width:390px){h1{font-size:23px}.component-grid{grid-template-columns:1fr 1fr}.flow-strip{font-size:12px}.flow-strip small{font-size:10px}}
.history-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.history-chart{min-width:0;background:#10161d;border:1px solid #28323c;border-radius:8px;padding:10px}
.history-chart h4{font-size:12px;margin:0 0 5px;color:#dbe4ed}
/* Chart.js must measure a bounded plot, not the auto-height metadata card. */
.history-plot{position:relative;height:220px;min-height:220px;max-height:220px;min-width:0;overflow:hidden}
.history-plot canvas{display:block;width:100%!important;height:100%!important}
.chart-meta,.chart-note{margin:4px 0;color:#9ca7b2;font-size:10px;line-height:1.45;overflow-wrap:anywhere}
.chart-note{color:#b5bdc7}
.chart-source-link{display:inline-block;font-size:10px;margin:2px 0 5px;color:#79c0ff}
.chart-empty{font-size:11px;color:#8b949e}
@media(max-width:850px){.history-charts{grid-template-columns:1fr}.history-plot{height:200px;min-height:200px;max-height:200px}}

.component-grid-six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:850px){.component-grid-six{grid-template-columns:repeat(2,minmax(0,1fr))}}

.fallback-chart{display:block;width:100%;height:185px}
/* SVG fallback uses one plot per unit; never overlay percent and percent-points. */
.history-plot.svg-plots{height:auto;min-height:0;max-height:none}
.history-controls{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.history-controls select{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px}

/* PDF 신호등: 색과 라벨을 함께 제공해 색각 차이를 보완합니다. */
.status-badge::before{content:"●";margin-right:5px}
.status-normal{background:#102d22;border:1px solid #2f865c;color:#7ee2a8}
.status-caution{background:#332b12;border:1px solid #a78b26;color:#f4d56f}
.status-warning{background:#381c20;border:1px solid #bd4c57;color:#ff9ea7}
.indicator-card[data-status="normal"]{border-top-color:#3fb950}
.indicator-card[data-status="caution"]{border-top-color:#d29922}
.indicator-card[data-status="warning"]{border-top-color:#f85149}
.signal-reason{font-size:12px;color:#b9c5d0;margin:5px 0 10px;overflow-wrap:anywhere}
.signal-legend{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-bottom:16px;padding:12px;background:#161b22;border:1px solid #30363d;border-radius:9px;font-size:12px}
.legend-normal{color:#7ee2a8}.legend-caution{color:#f4d56f}.legend-warning{color:#ff9ea7}.legend-unknown{color:#aeb7c0}
.signal-legend>.info-details{flex-basis:100%}
.info-details>summary{cursor:pointer;color:#79c0ff;font-size:12px;padding:6px 0;overflow-wrap:anywhere}
.info-details>summary:focus-visible{outline:2px solid #58a6ff;outline-offset:3px;border-radius:3px}
.info-details p{color:#aeb7c0;font-size:12px;margin:6px 0}
.indicator-info{border-top:1px solid #30363d;margin-top:10px}
.indicator-info .summary{min-height:0;margin-top:8px}
.chart-info{margin-bottom:7px}.chart-info>summary{font-size:10px}
.stage-info>summary{font-size:11px}
@media(max-width:680px){.status-badge{white-space:normal;text-align:right}.refresh-box{flex-wrap:wrap}.source-links{overflow-wrap:anywhere}}

/* ── [UI 수정 2026-10-23] ─────────────────────────────────────────
   1) 같은 줄 카드가 옆 카드 높이에 맞춰 늘어나 생기던 큰 빈칸 제거 (align-items:start)
   2) 마우스 값 칸: 평소 1줄, 올리면 차트 위에 반투명으로 겹침 → 차트마다 140px 공백 제거
   3) 차트가 1개뿐인 카드는 한 줄을 다 쓰게 (반쪽 빈칸 제거) */
.indicator-grid{align-items:start}
.history-chart.has-sync{position:relative}
/* [떨림 수정] 자리(26px)는 slot이 항상 차지합니다. 값 칸은 slot 안에서 absolute → 레이아웃 불변 */
.sync-slot{position:relative;height:26px;min-height:26px;max-height:26px}
.chart-sync-values.sync-overlay{position:absolute;left:0;right:0;top:0;height:26px;overflow:hidden;padding:4px 0;color:#8b949e;font-size:11px;white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box}
.chart-sync-values.sync-overlay[data-target]:not([data-target=""]){position:absolute;z-index:4;left:0;right:0;top:0;height:auto;max-height:180px;overflow:auto;white-space:normal;
  background:rgba(13,17,23,.92);border:1px solid #30363d;border-radius:6px;padding:6px 8px;color:#f0c674;pointer-events:none}
.history-charts>.history-chart:only-child{grid-column:1/-1}
.history-charts>.history-chart:last-child:nth-child(odd){grid-column:1/-1}
/* 4) 차트가 많은 카드(③ 레버리지 5개 · ② 수요 5개)는 한 줄 전체 사용.
      옆 카드(차트 1~2개)가 짧아서 생기던 화면 절반 크기의 빈칸 제거.
      dense: ①·⑤ 두 짧은 카드가 같은 줄을 채우도록 자동 배치 */
.indicator-grid{grid-auto-flow:row dense}
.indicator-card[data-indicator="leverage"],.indicator-card[data-indicator="sofr_iorb"],
.indicator-card[data-indicator="apparent_demand"]{grid-column:1/-1}