:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #1d1d1f;
  --muted: #6e6e73;
  --rule: #e3e3e6;
  --code-bg: #f5f5f7;
  --link: #0b63c5;
  --chip: #f0f0f3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141416;
    --fg: #ececee;
    --muted: #9a9aa0;
    --rule: #2c2c30;
    --code-bg: #1e1e21;
    --link: #6fb3ff;
    --chip: #232327;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 40px 16px 96px;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
        "Noto Sans KR", Roboto, sans-serif;
  word-break: keep-all;
}
main { max-width: 42rem; margin: 0 auto; }
h1 { font-size: 2rem; margin: 0 0 .25rem; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 2.5rem 0 .75rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
p { margin: 0 0 1rem; }
.lede { color: var(--muted); margin-bottom: 2rem; }
a { color: var(--link); }
pre {
  background: var(--code-bg);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 1rem;
}
code { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
p code, li code, td code { background: var(--code-bg); padding: .1em .35em; border-radius: 4px; }
table { border-collapse: collapse; width: 100%; margin: 0 0 1rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--rule); font-size: .95rem; }
th { color: var(--muted); font-weight: 600; }
ul { margin: 0 0 1rem; padding-left: 1.3rem; }
li { margin-bottom: .3rem; }
footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .9rem; }

/* Top bar: site navigation on the left, the language switch on the right. */
.bar {
  max-width: 42rem;
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .9rem;
}
.bar nav a { margin-right: .9rem; text-decoration: none; }
.bar nav a[aria-current="page"] { color: var(--fg); font-weight: 600; }
.langs { display: flex; gap: 2px; background: var(--chip); border-radius: 7px; padding: 2px; }
.langs button {
  font: inherit;
  font-size: .85rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: .25rem .6rem;
  border-radius: 5px;
  cursor: pointer;
}
.langs button[aria-pressed="true"] { background: var(--bg); color: var(--fg); font-weight: 600; }

/* One language is shown at a time. Without JavaScript the document's own
   lang attribute decides, so the page is never blank. */
html[data-lang="en"] [data-lang="ko"] { display: none; }
html[data-lang="ko"] [data-lang="en"] { display: none; }

/* The notice that sits above everything else. Deliberately the first thing
   read on the page, so it uses a tinted panel rather than running text. */
.notice {
  background: var(--notice-bg);
  border: 1px solid var(--notice-rule);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 2rem;
  font-size: .92rem;
  line-height: 1.55;
}
.notice h2 {
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--notice-fg);
  margin: 0 0 .6rem;
  padding: 0;
  border: 0;
}
.notice ul { margin: 0; padding-left: 1.2rem; }
.notice li { margin-bottom: .35rem; }
.notice li:last-child { margin-bottom: 0; }
:root {
  --notice-bg: #fff8e6;
  --notice-rule: #e8d9a8;
  --notice-fg: #8a6a16;
}
@media (prefers-color-scheme: dark) {
  :root {
    --notice-bg: #2a2314;
    --notice-rule: #4a3f23;
    --notice-fg: #d8b663;
  }
}