:root {
  color-scheme: dark;
  --kin-bg: #0B1220;
  --kin-panel: #0E1728;
  --kin-text: #F2F6FD;
  --kin-muted: #A7B8D6;
  --kin-highlight: #9CC3FF;
  --kin-line: rgba(130,160,210,.22);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--kin-text);
  background: radial-gradient(800px 480px at 50% 10%, rgba(79,142,247,.12), transparent 64%), var(--kin-bg);
  font-family: Pretendard, "Noto Sans KR", -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.page { width: min(1080px, calc(100% - 32px)); margin: 32px auto; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--kin-muted); letter-spacing: .16em; font-size: .8rem; }
.brand img { width: 34px; height: 34px; }
nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 20px 0; }
a { color: var(--kin-highlight); text-underline-offset: .25em; }
a:hover { color: var(--kin-text); }
a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--kin-highlight); outline-offset: 4px; }
.skip { position: absolute; top: -100px; left: 16px; padding: 8px 16px; background: var(--kin-panel); z-index: 1; }
.skip:focus { top: 8px; }
main { border: 1px solid var(--kin-line); border-top: 3px solid #4F8EF7; border-radius: 10px; padding: clamp(16px, 4vw, 40px); background: var(--kin-panel); box-shadow: 0 30px 80px rgba(0,2,8,.4); }
h1 { margin-top: 0; font-size: clamp(1.5rem, 4vw, 2rem); }
h2 { margin-top: 2.5rem; font-size: 1.35rem; }
h3 { margin-top: 2rem; font-size: 1.1rem; }
[id] { scroll-margin-top: 20px; }
.draft-note { padding: 14px 18px; border-left: 3px solid var(--kin-highlight); background: #111C31; }
.pending { color: #FFE0A3; font-weight: 600; }
.table-scroll { overflow-x: auto; margin: 18px 0; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: 10px 12px; border: 1px solid var(--kin-line); text-align: left; vertical-align: top; }
th { background: #111C31; }
caption { text-align: left; color: var(--kin-muted); margin-bottom: 8px; }
footer { margin: 24px 0; color: var(--kin-muted); font-size: .9rem; }
@media print {
  :root { color-scheme: light; }
  body, main { color: #111; background: white; box-shadow: none; }
  caption, .brand, footer { color: #444; }
  a { color: #154279; }
  .pending { color: #754500; }
  th, .draft-note { background: #eee; }
  .table-scroll { overflow: visible; }
  .page { width: 100%; margin: 0; }
  nav, .skip { display: none; }
}