@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+KR:wght@400;500;600;700&display=swap');

:root {
  --paper: #eef1ee;
  --paper-line: #d7ddd8;
  --ink: #1c2420;
  --ink-soft: #5b6660;
  --ink-faint: #8a938c;
  --card: #fbfcfa;
  --card-sunk: #e9ede9;
  --ball-yellow: #f0b429;
  --ball-blue: #2e5ea8;
  --ball-red: #c0392b;
  --ball-green: #2f7a4f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14171a; --paper-line: #262b2f; --ink: #e7ebe6; --ink-soft: #a3ada5;
    --ink-faint: #6c766e; --card: #1c2023; --card-sunk: #171b1e;
    --ball-yellow: #f2bd4c; --ball-blue: #6f9adf; --ball-red: #dd6f60; --ball-green: #57a878;
  }
}
:root[data-theme="dark"] {
  --paper: #14171a; --paper-line: #262b2f; --ink: #e7ebe6; --ink-soft: #a3ada5;
  --ink-faint: #6c766e; --card: #1c2023; --card-sunk: #171b1e;
  --ball-yellow: #f2bd4c; --ball-blue: #6f9adf; --ball-red: #dd6f60; --ball-green: #57a878;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'IBM Plex Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}
a { color: var(--ball-blue); }
:focus-visible { outline: 2px solid var(--ball-blue); outline-offset: 3px; }

.labstrip {
  border-bottom: 1px solid var(--ink);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-soft);
}
.labstrip .wrap { display: flex; justify-content: space-between; gap: 12px; padding: 14px 24px; }
.labstrip a { color: var(--ink-soft); text-decoration: none; }
.labstrip a:hover { color: var(--ball-blue); }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.page { padding: 48px 0 88px; }

.titleblock { background: var(--card); border: 1px solid var(--ink); border-radius: 3px; overflow: hidden; margin-bottom: 32px; }
.titleblock-head { padding: 26px 26px 18px; border-bottom: 1px solid var(--paper-line); }
.eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px;
}
h1 { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
.titleblock-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--paper-line); }
.tb-cell { background: var(--card-sunk); padding: 13px 18px; }
.tb-cell dt { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 4px; }
.tb-cell dd { margin: 0; font-size: 0.88rem; font-weight: 500; font-variant-numeric: tabular-nums; }

.lede { font-size: 1rem; color: var(--ink-soft); max-width: 62ch; margin: 0 0 40px; }

section { margin-bottom: 34px; }
.clause-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 2px solid var(--ball-blue); padding-bottom: 9px; margin-bottom: 14px; }
.clause-num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; font-size: 0.82rem; color: var(--ball-blue); flex: none; }
h2 { font-family: 'IBM Plex Sans KR', sans-serif; font-weight: 700; font-size: 1.08rem; margin: 0; text-wrap: balance; }
section p { max-width: 64ch; margin: 0 0 13px; }
section ul, section ol { max-width: 64ch; margin: 0 0 13px; padding-left: 20px; }
section li { margin-bottom: 7px; }
section li::marker { color: var(--ball-blue); }
strong { font-weight: 700; }

.callout { background: var(--card-sunk); border-left: 3px solid var(--ball-yellow); padding: 13px 17px; border-radius: 0 3px 3px 0; font-size: 0.88rem; max-width: 64ch; margin: 0 0 13px; color: var(--ink-soft); }

.tablewrap { overflow-x: auto; border: 1px solid var(--paper-line); border-radius: 3px; background: var(--card); max-width: 64ch; margin: 0 0 13px; }
table.datamap { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.datamap th, table.datamap td { text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
table.datamap tr:last-child td { border-bottom: none; }
table.datamap th { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }

footer { border-top: 1px solid var(--ink); padding-top: 22px; margin-top: 44px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.76rem; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
footer a { color: var(--ink-faint); }
footer a:hover { color: var(--ball-blue); }