:root {
  --edu-ink: #11468c;
  --edu-ink-dark: #07254e;
  --edu-paper: #ffffff;
  --edu-bg: #f5f7fa;
  --edu-text: #20242b;
  --edu-muted: #626b78;
  --edu-rule: #dce2ea;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  color: var(--edu-text);
  background-color: var(--edu-bg);
  font-family: "Noto Sans KR", Pretendard, system-ui, sans-serif;
}
body::before,
body::after { opacity: .08; }
h1, h2, h3, h4 { color: var(--edu-text); letter-spacing: -.025em; }
a { color: var(--edu-ink); }
button, input, select, textarea { font: inherit; }
button, [role="button"], .btn, .button {
  border-radius: 8px;
}
input, select, textarea {
  border-color: var(--edu-rule);
  border-radius: 8px;
  background: var(--edu-paper);
}
.card, .panel, .container, .content-card, section {
  border-color: var(--edu-rule);
}
table { border-collapse: collapse; background: var(--edu-paper); }
th, td { border-color: var(--edu-rule); }
@media (max-width: 720px) {
  img, canvas, svg, video { max-width: 100%; }
  table { display: block; max-width: 100%; overflow-x: auto; }
}