:root {
  --ink: #1a1c1e; --dim: #5b6166; --line: #e3e6e8; --bg: #ffffff;
  --mark: #fff3cd; --markline: #e0b400;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #e8eaec; --dim: #a2a9af; --line: #2c3033; --bg: #17191b;
          --mark: #3a3111; --markline: #8a6d00; }
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 24px 20px 72px; background: var(--bg); color: var(--ink);
  font: 16px/1.75 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
        "Malgun Gothic", "Noto Sans KR", sans-serif;
  max-width: 44rem; margin-inline: auto; word-break: keep-all;
  overflow-wrap: anywhere;
}
h1 { font-size: 1.5rem; line-height: 1.4; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 40px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); }
h3 { font-size: 1rem; margin: 24px 0 8px; }
p, li { margin: 0 0 12px; }
ul, ol { padding-left: 1.3em; }
.meta { color: var(--dim); font-size: .9rem; margin-bottom: 32px; }
.todo {
  background: var(--mark); border-left: 3px solid var(--markline);
  padding: 2px 6px; border-radius: 3px; font-weight: 600;
}
table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: .95rem; }
th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: color-mix(in srgb, var(--line) 40%, transparent); font-weight: 600; }
.wrap { overflow-x: auto; }
footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line);
         color: var(--dim); font-size: .875rem; }
a { color: inherit; }