:root{--bg:#0d1117;--panel:#111823;--line:#21262d;--line2:#30363d;--text:#c9d1d9;
  --dim:#8b949e;--blue:#58a6ff;--up:#3fb950;--down:#f85149;--accent:#1f6feb}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);
  font-family:Segoe UI,system-ui,-apple-system,"Malgun Gothic","PingFang SC","Microsoft JhengHei",sans-serif;
  line-height:1.55}
a{color:var(--blue)}
.dim{color:var(--dim)}
.small{font-size:13px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  max-width:1040px;margin:0 auto;padding:14px 16px;border-bottom:1px solid var(--line)}
.logo{font-size:22px;font-weight:700;color:var(--text);text-decoration:none;letter-spacing:.3px}
.logo span{color:var(--blue)}
.langs{display:flex;flex-wrap:wrap;gap:4px}
.langs a{font-size:13px;color:var(--dim);text-decoration:none;padding:3px 8px;border-radius:5px;
  border:1px solid transparent}
.langs a:hover{border-color:var(--line2);color:var(--text)}
.langs a.cur{color:#fff;background:var(--accent)}
.langs.big{justify-content:center;padding:24px 16px 40px}
.root-h{text-align:center;font-size:26px;color:#e6edf3;margin:48px 0 0}
.langs.big a{font-size:16px;padding:8px 14px;border-color:var(--line2)}
main{max-width:1040px;margin:0 auto;padding:0 16px}
.intro{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:center;padding:28px 0 18px}
.intro h1{margin:0 0 10px;font-size:30px;color:#e6edf3}
.lead{margin:0;color:var(--text);font-size:16px}
.hero{width:100%;height:auto;display:block}
.board{margin:8px 0 28px}
.board-h{font-size:20px;margin:0 0 6px;color:#e6edf3}
.board-desc{margin:0 0 14px;font-size:14px;color:var(--dim);max-width:820px}
/* 표 칸은 늘 10줄 높이. 종목이 10개를 넘으면 표 안에서 스크롤한다 */
.board{--row-h:46px;--head-h:36px}
.tablewrap{height:calc(var(--head-h) + 10 * var(--row-h) + 2px);overflow-y:auto;
  border:1px solid var(--line2);border-radius:8px;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:16px;table-layout:fixed}
/* 앞쪽 세 칸(종목·현재가·오늘)은 왼쪽 맞춤으로 고르게, 청산맵 칸과 버튼은 오른쪽 맞춤 */
.c-sym{width:22%}.c-price{width:20%}.c-chg{width:18%}.c-act{width:40%}
.board .num{text-align:left}
td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
th{font-weight:600;color:var(--dim);font-size:13px;text-align:left;padding:0 10px;
  height:var(--head-h);border-bottom:1px solid var(--line2);
  position:sticky;top:0;background:#161d29;z-index:1}
td{padding:0 10px;height:var(--row-h);border-bottom:1px solid var(--line)}
tbody tr:hover{background:#18202c}
.num{text-align:right;font-family:Consolas,"SF Mono",monospace}
.act{text-align:right}
.sym{font-weight:600;color:#e6edf3}
.up{color:var(--up)}.down{color:var(--down)}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  padding:5px 14px;border-radius:6px;font-size:14px}
.btn:hover{background:#388bfd}
.note{margin:12px 0 0;padding:10px 12px;border:1px solid #9e6a03;background:#2b2111;color:#e3b341;border-radius:6px}
.about{border-top:1px solid var(--line);padding:22px 0 8px}
.about h2{font-size:20px;margin:0 0 12px;color:#e6edf3}
.about dt{font-weight:600;color:#e6edf3;margin-top:12px}
.about dd{margin:4px 0 0}
footer{max-width:1040px;margin:24px auto 0;padding:18px 16px 30px;border-top:1px solid var(--line);
  font-size:13px;color:var(--dim)}
footer p{margin:4px 0}
.foot-meta{font-size:12px;color:var(--dim)}
.foot-meta a{color:var(--dim)}
.foot-meta b{font-weight:600;color:var(--text)}
@media (max-width:720px){
  .intro{grid-template-columns:1fr;gap:16px;padding-top:20px}
  .intro h1{font-size:24px}
  .hero{max-width:420px}
  .board{--row-h:44px}
  th,td{padding:0 6px}
  .btn{padding:5px 10px}
  .c-sym{width:36%}.c-price{width:26%}.c-chg{width:20%}.c-act{width:18%}
  table{font-size:14px}
}