:root {
  --bg:#fff; --fg:#111418; --dim:#6b727d; --faint:#99a0aa;
  --line:#e2e5ea; --accent:#0b5fff; --warn:#8a6100; --warn-bg:#fff8e6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0e1013; --fg:#e8ebf0; --dim:#99a1ac; --faint:#6d747f;
    --line:#22262d; --accent:#6aa5ff; --warn:#e5be6a; --warn-bg:#241d0c;
  }
}
* { box-sizing:border-box; }
body { margin:0; padding:3rem 1.5rem 5rem; background:var(--bg); color:var(--fg);
       font:15px/1.75 var(--font-ui, -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif);
       -webkit-font-smoothing:antialiased; }
main { margin:0 auto; max-width:40rem; }
.wordmark { margin:0 0 2.25rem; }   
h1 { margin:0 0 .4rem; font-size:1.5rem; letter-spacing:-.02em; font-weight:600; }
.meta { margin:0 0 1.75rem; color:var(--faint); font-size:.84rem; }
h2 { margin:2.5rem 0 .6rem; font-size:1rem; font-weight:600; letter-spacing:-.01em; }
h2:first-of-type { margin-top:2rem; }
p, li { margin:0 0 .8rem; }
ul { margin:0 0 .8rem; padding-left:1.15rem; }
li { margin:0 0 .35rem; }
b { font-weight:600; }
code { font-family:var(--font-mono, ui-monospace,SFMono-Regular,Menlo,monospace); font-size:.9em; }
table { width:100%; border-collapse:collapse; margin:0 0 1rem; font-size:.92rem; }
th, td { text-align:left; padding:.5rem .4rem; border-bottom:1px solid var(--line);
         vertical-align:top; }
th { color:var(--dim); font-weight:500; font-size:.85rem; }

.draft { margin:0 0 2rem; padding:.85rem 1rem; border-left:3px solid var(--warn);
         background:var(--warn-bg); color:var(--warn); font-size:.88rem; line-height:1.6; }
.draft b { color:inherit; }
.todo { color:var(--faint); }

.back { margin:3rem 0 0; padding-top:1.5rem; border-top:1px solid var(--line);
        font-size:.88rem; }
a { color:var(--accent); }