:root { --ink:#20202a; --muted:#555363; --accent:#1D2C9C; --mint:#CDF3EB; --line:#CDF3EB; --wash:rgba(205,243,235,.35); --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:48px; --space-6:64px; }
* { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body { margin:0; background:#fff; color:var(--ink); font:16px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",sans-serif; word-break:keep-all; overflow-wrap:anywhere; }
a { color:var(--accent); text-underline-offset:4px; }
a:hover { color:rgba(29,44,156,.8); }
a:focus-visible, summary:focus-visible { outline:3px solid var(--accent); outline-offset:5px; border-radius:2px; }
::selection { color:var(--accent); background:var(--mint); }
.skip { position:fixed; top:-100px; left:16px; background:#fff; padding:8px 16px; z-index:1; }
.skip:focus { top:8px; }
header,footer { max-width:1120px; margin:auto; padding:var(--space-3) var(--space-4); }
header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); border-bottom:1px solid var(--line); }
.brand { display:block; line-height:0; }
.brand img { display:block; height:28px; width:auto; }
footer > img { display:block; height:20px; width:auto; }
header nav { display:flex; flex-wrap:wrap; gap:var(--space-3); font-size:14px; }
header nav a { color:var(--muted); }
header nav a[aria-current="page"] { color:var(--accent); font-weight:700; }
main { max-width:1120px; margin:auto; padding:var(--space-6) var(--space-4) var(--space-6); }
.hero { max-width:740px; margin-bottom:var(--space-5); }
h1 { margin:0 0 var(--space-3); font-size:44px; line-height:1.25; letter-spacing:-.035em; text-wrap:balance; }
h2 { margin:0 0 var(--space-2); font-size:24px; line-height:1.45; letter-spacing:-.02em; text-wrap:balance; }
h3 { margin:var(--space-3) 0 var(--space-1); font-size:18px; }
p { margin:0 0 var(--space-2); }
.lead { color:var(--muted); font-size:18px; max-width:62ch; }
.meta { color:var(--muted); font-size:14px; margin-top:var(--space-3); }
.layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--space-6); align-items:start; }
.toc { position:sticky; top:24px; font-size:14px; }
.toc strong { display:block; margin-bottom:var(--space-2); }
.toc a { display:block; margin:var(--space-1) 0; color:var(--muted); }
article { min-width:0; max-width:74ch; }
section { margin-bottom:var(--space-5); scroll-margin-top:var(--space-3); }
section + section { border-top:1px solid var(--line); padding-top:var(--space-4); }
ul,ol { padding-left:var(--space-3); margin:0 0 var(--space-2); }
li + li { margin-top:var(--space-1); }
.note { background:var(--wash); border:1px solid var(--line); border-radius:16px; padding:var(--space-3); margin:var(--space-3) 0; }
.note p:last-child { margin:0; }
.contact { display:inline-flex; justify-content:center; padding:12px var(--space-3); background:var(--accent); color:#fff; border-radius:12px; font-weight:650; text-decoration:none; }
.contact:hover { background:rgba(29,44,156,.9); color:#fff; }
.table-wrap { overflow-x:auto; margin:var(--space-3) 0; }
table { width:100%; border-collapse:collapse; font-size:14px; line-height:1.7; }
caption { text-align:left; font-weight:700; margin-bottom:var(--space-1); }
th,td { padding:var(--space-2); text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
th { background:var(--wash); font-weight:650; }
td:first-child { min-width:100px; font-weight:600; }
details { border-bottom:1px solid var(--line); padding:var(--space-2) 0; }
summary { font-weight:650; cursor:pointer; }
details p { margin:var(--space-2) 0 0; color:var(--muted); }
footer { border-top:1px solid var(--line); color:var(--muted); font-size:14px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2); }
footer p { margin:0; }
@media(max-width:760px) { header,footer { padding:20px; } header { align-items:flex-start; } header nav { gap:12px; justify-content:flex-end; max-width:190px; } main { padding:40px 20px; } h1 { font-size:34px; } .layout { display:block; } .toc { position:static; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line); } .toc a { display:inline-block; margin:4px 16px 4px 0; } th,td { padding:12px 8px; } .note { padding:20px; } }
@media print { header,.toc,.skip { display:none; } main { padding:0; } .layout { display:block; } a { color:inherit; } section { break-inside:avoid; } }