/* Jikji: paper, ink, vermilion. No build step. */
:root{--paper:#f6f6f2;
--ink:#1d1a16;
--muted:#625c54;
--red:#9a2c20;
--line:#cbd0cb;
--soft:#e8ebe7}
*{box-sizing:border-box}
body{margin:0;
background:var(--paper);
color:var(--ink);
font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
line-height:1.8}
a{color:var(--red);
text-underline-offset:4px}
a:focus-visible{outline:3px solid #315665;
outline-offset:5px}
.wrap{max-width:1120px;
margin:auto;
padding:0 26px}
header{border-bottom:1px solid var(--line)}
header .wrap{display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
padding-top:22px;
padding-bottom:22px}
.brand{text-decoration:none;
display:inline-flex;
align-items:center;
gap:12px;
color:var(--ink);
font-size:22px;
letter-spacing:.03em}
.seal{background:#c0392b;
color:#fffefa;
padding:0 9px;
font-family:serif;
font-size:28px}
.edition{font-size:13px;
color:var(--muted)}
.layout{display:grid;
grid-template-columns:220px minmax(0,1fr);
gap:56px;
padding-top:38px}
nav{display:flex;
flex-direction:column;
gap:7px}
nav a{padding:6px 10px;
text-decoration:none;
font-size:14px;
color:var(--muted);
border-left:2px solid transparent}
nav a[aria-current]{border-color:var(--red);
color:var(--red);
background:var(--soft)}
main{min-width:0}
h1,h2,h3,p{word-break:keep-all;overflow-wrap:anywhere}
h1,h2,h3{line-height:1.35;
font-family:Georgia,"Noto Serif KR",serif}
h1{font-size:clamp(30px,4.5vw,50px);
letter-spacing:-.035em;
margin:22px 0}
h2{font-size:24px}
p{max-width:72ch}
section{border-top:1px solid var(--line);
padding:16px 0 22px}
.lead{font-size:19px;
color:var(--muted)}
.badge{display:inline-block;
border:1px solid var(--red);
color:var(--red);
font-size:12px;
padding:3px 10px;
letter-spacing:.02em}
.note{background:var(--soft);
padding:18px 22px;
margin:28px 0;
font-size:14px}
.flow{display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
margin:25px 0}
.flow span{border:1px solid var(--line);
padding:12px;
background:#fffefa}
footer{margin-top:64px;
padding:24px 0;
border-top:1px solid var(--line);
color:var(--muted);
font-size:13px}
table{width:100%;
border-collapse:collapse;
font-size:14px}
td,th{border-bottom:1px solid var(--line);
text-align:left;
vertical-align:top;
padding:12px 8px;
overflow-wrap:anywhere}
ul{padding-left:22px}
.landing{max-width:800px;
padding-top:12vh;
padding-bottom:8vh}
.landing h1{font-size:clamp(36px,6vw,64px)}
.eyebrow{text-transform:uppercase;
letter-spacing:.16em;
font-size:12px;
color:var(--red)}
small{color:var(--muted)}
@media(max-width:760px){.layout{grid-template-columns:1fr;
gap:26px}
nav{flex-direction:row;
flex-wrap:wrap;
gap:3px}
nav a{border-left:0;
border-bottom:2px solid transparent;
padding:5px 8px}
.edition{max-width:45%;
text-align:right}
table{font-size:12px}
.wrap{padding-left:20px;
padding-right:20px}
}