:root {
  --paper: #ffffff;
  --ink: #232634;
  --muted: #5b5f6e;
  --line: rgba(137, 173, 212, 0.33);
  --margin: rgba(207, 154, 162, 0.4);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15161c;
    --ink: #eceef4;
    --muted: #a7abb8;
    --line: rgba(137, 173, 212, 0.12);
    --margin: rgba(207, 154, 162, 0.2);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.75 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Noto Sans KR", "Malgun Gothic", sans-serif;
  background-image:
    linear-gradient(to right, transparent 19px, var(--margin) 19px, var(--margin) 20px, transparent 20px),
    repeating-linear-gradient(to bottom, transparent 0 29px, var(--line) 29px 30px);
}
main { max-width: 720px; margin: 0 auto; padding: 40px 16px 80px 36px; }
h1 { font-size: 30px; line-height: 1.3; margin: 0 0 4px; }
h2 { font-size: 20px; margin: 36px 0 8px; }
p, li { margin: 6px 0; }
.meta { color: var(--muted); margin-bottom: 28px; }
table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 15px; }
th, td { border: 1px solid var(--muted); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: var(--line); }
.table-wrap { overflow-x: auto; }
a { color: inherit; }
.box { border: 1.5px solid var(--ink); border-radius: 16px 11px 17px 10px; padding: 16px 18px; margin: 16px 0; }