:root{
  --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --bg:#f7f7f8; --card:#fff;
  --head:#172033; --nav:#263247; --accent:#2563eb; --accent-soft:#9cc0ff;
  --concept:#2563eb; --paper:#64748b; --reference:#059669; --overview:#d97706;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",
              "Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.65;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ---- shell ---- */
header.site{background:var(--head); color:#fff; padding:12px 24px}
header.site h1{margin:0; font-size:19px; letter-spacing:-.01em}
header.site p{margin:2px 0 0; font-size:12.5px; color:#cbd5e1}
/* Mirrors the lab homepage footer (ekvm80.github.io/cmlab): brand block left,
   section links right, wrapping to two rows when narrow. */
footer.site{
  background:var(--head); color:rgba(255,255,255,.7); padding:36px 24px;
  margin-top:60px; font-size:12.8px;
}
.footer-inner{
  max-width:1280px; margin:0 auto; display:flex; gap:20px;
  justify-content:space-between; align-items:flex-start; flex-wrap:wrap;
}
.footer-brand strong{display:block; color:#fff; margin-bottom:4px; font-size:14.2px}
.footer-links{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.footer-links a{color:rgba(255,255,255,.6); font-size:12.3px}
.footer-links a:hover{color:#fff; text-decoration:none}
nav.site{
  background:var(--nav); padding:0 24px; position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
}
nav.site a{
  color:#fff; font-weight:650; font-size:13.5px; padding:10px 12px;
  border-bottom:2px solid transparent;
}
nav.site a:hover{color:var(--accent-soft); text-decoration:none}
nav.site a.on{border-bottom-color:var(--accent-soft)}
nav.site .spacer{flex:1}
nav.site .count{color:#8fa0bd; font-size:12px; padding:10px 4px}
/* Sits with the page links, set off by a divider so it reads as a mode switch
   rather than a fifth section. */
nav.site a.langsw{
  display:inline-flex; align-items:center; gap:6px;
  margin-left:10px; padding-left:18px;
  border-left:1px solid #46536b; color:#cbd5e1;
}
nav.site a.langsw span{font-size:12.5px; line-height:1}
nav.site a.langsw:hover{color:#fff; text-decoration:none}

main{max-width:1280px; margin:22px auto; padding:0 24px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; margin-bottom:16px;
}
.card h2{margin:0 0 10px; font-size:16px}
.muted{color:var(--muted)}
.small{font-size:13px}

/* ---- controls ---- */
input[type=search],input[type=text],select{
  font:inherit; font-size:13.5px; padding:7px 10px;
  border:1px solid #cbd5e1; border-radius:7px; background:#fff; color:inherit;
}
input[type=search]:focus,select:focus{outline:2px solid var(--accent-soft); outline-offset:-1px}
.chip{
  font:inherit; font-size:12.5px; padding:5px 12px; cursor:pointer;
  border:1px solid #cbd5e1; border-radius:14px; background:#fff; color:var(--muted);
  display:inline-flex; align-items:center; gap:6px;
}
.chip:hover{border-color:#94a3b8}
.chip.on{background:var(--head); border-color:var(--head); color:#fff}
.chip .dot{width:9px; height:9px; border-radius:50%; display:inline-block}
button.btn{
  font:inherit; font-size:13px; padding:6px 12px; cursor:pointer;
  border:1px solid #cbd5e1; border-radius:7px; background:#fff;
}
button.btn:hover{border-color:#94a3b8}

/* ---- badges ---- */
.badge{
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px;
  text-transform:uppercase; letter-spacing:.03em; color:#fff; white-space:nowrap;
}
.badge.concept{background:var(--concept)}
.badge.source_note{background:var(--paper)}
.badge.reference_book{background:var(--reference)}
.badge.overview{background:var(--overview)}
.tag{
  font-size:12px; color:#475569; background:#f1f5f9; border:1px solid var(--line);
  border-radius:11px; padding:2px 9px; display:inline-block; margin:2px 3px 2px 0;
}
a.tag:hover{background:#e2e8f0; text-decoration:none}

/* ---- tables ---- */
.tbl-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:9px; margin:14px 0; background:#fff;
}
.tbl-wrap table{border-collapse:collapse; width:100%; font-size:13.5px}
.tbl-wrap th,.tbl-wrap td{border:1px solid var(--line); padding:7px 11px; text-align:left; vertical-align:top}
.tbl-wrap thead th{background:#f1f5f9; font-weight:700; position:sticky; top:0; z-index:1}
.tbl-wrap tbody tr:hover{background:#f8fafc}
/* KaTeX defaults to 1.21em, which makes every math-bearing row taller than its neighbours */
.tbl-wrap td .katex{font-size:1em}

.spinner{color:var(--muted); font-size:13.5px; padding:26px 0; text-align:center}

@media (max-width:640px){
  main{padding:0 14px}
  header.site h1{font-size:17px}
  nav.site{padding:0 12px}
  nav.site a{padding:9px 8px; font-size:13px}
}