/* Shared editorial type system — serif display (Newsreader / Noto Serif KR), plain sans text (IBM Plex Sans / IBM Plex Sans KR),
   mono labels (IBM Plex Mono). Hairline rules instead of cards, generous margins, one muted accent. */
:root{
  --bg:#060b12; --bg2:#0a121c; --ink:#e8ecef; --ink2:#c4ccd4; --mute:#8b97a4; --rule:rgba(232,236,239,.16); --rule2:rgba(232,236,239,.32);
  --accent:#e2b56f; --sea:#8fc3d9;
  --serif:"Newsreader","Noto Serif KR",Georgia,serif;
  --sans:"IBM Plex Sans","IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono","IBM Plex Sans KR",ui-monospace,monospace;
  --measure:36rem; --wrap:1120px; --gut:20px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font:400 16px/1.7 var(--sans); word-break:keep-all; overflow-wrap:break-word; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
:lang(ko) body, html:lang(ko) body{line-height:1.8}
img,video{max-width:100%; display:block}
a{color:inherit; text-decoration-thickness:1px; text-underline-offset:.22em}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}

/* type */
.label{font:500 11.5px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin:0 0 14px}
html:lang(ko) .label{letter-spacing:.06em}
.label b{color:var(--accent); font-weight:500}
.display{font-family:var(--serif); font-weight:400; font-size:clamp(38px,10vw,84px); line-height:1.04; letter-spacing:-.025em; margin:0 0 22px}
html:lang(ko) .display{font-weight:500; letter-spacing:-.04em; line-height:1.18; font-size:clamp(34px,9vw,72px)}
.display em, .h2 em{font-style:italic; color:var(--accent)}
html:lang(ko) .display em, html:lang(ko) .h2 em{font-style:normal}
.h2{font-family:var(--serif); font-weight:400; font-size:clamp(30px,7vw,48px); line-height:1.1; letter-spacing:-.02em; margin:0 0 18px}
html:lang(ko) .h2{font-weight:500; letter-spacing:-.035em; line-height:1.25}
.h3{font-family:var(--serif); font-weight:500; font-size:22px; line-height:1.25; letter-spacing:-.01em; margin:0 0 8px}
html:lang(ko) .h3{letter-spacing:-.03em; font-size:20px; line-height:1.4}
.lead{font-size:clamp(17px,4.4vw,20px); line-height:1.6; color:var(--ink2); max-width:var(--measure); margin:0 0 28px}
.small{font-size:13.5px; color:var(--mute)}
.num{font:400 13px var(--mono); color:var(--accent); font-variant-numeric:tabular-nums}

/* masthead */
.mast{position:sticky; top:0; z-index:20; background:rgba(6,11,18,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--rule)}
.mast-in{display:flex; align-items:center; gap:14px; min-height:56px}
.brand{font-family:var(--serif); font-size:19px; font-weight:500; letter-spacing:-.01em; text-decoration:none; white-space:nowrap}
html:lang(ko) .brand{letter-spacing:-.03em}
.brand small{font:400 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-left:10px}
.mnav{display:flex; gap:18px; margin-left:auto; align-items:center}
.mnav a{font-size:14px; text-decoration:none; color:var(--ink2)}
.mnav a:hover{color:var(--accent)}
.mnav .wide{display:none}
.langs{display:flex; border:1px solid var(--rule2)}
.langs button{font:500 11.5px var(--mono); letter-spacing:.08em; background:none; color:var(--mute); border:0; padding:6px 8px; cursor:pointer; min-width:34px}
.langs button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}

/* sections */
.sec{padding:72px 0; border-top:1px solid var(--rule)}
.sec-head{display:grid; gap:4px; margin-bottom:34px}
.rows{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule2)}
.rows > li{padding:20px 0; border-bottom:1px solid var(--rule)}

/* buttons: rectangular, quiet */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 20px; border:1px solid var(--ink);
  background:var(--ink); color:var(--bg); font:500 15px var(--sans); text-decoration:none; cursor:pointer; border-radius:0}
.btn:hover{background:var(--accent); border-color:var(--accent); color:var(--bg)}
.btn.line{background:transparent; color:var(--ink); border-color:var(--rule2)}
.btn.line:hover{border-color:var(--accent); color:var(--accent)}
.btn.is-pending{background:transparent; color:var(--mute); border:1px dashed var(--rule2); cursor:default}
.arrow::after{content:"→"; font-family:var(--sans)}

/* footer */
.foot{border-top:1px solid var(--rule); padding:40px 0 calc(40px + env(safe-area-inset-bottom)); font-size:13.5px; color:var(--mute)}
.foot p{margin:0 0 10px; max-width:44rem}
.foot b{color:var(--ink2); font-weight:500}
.foot-links{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:16px}

@media (min-width:760px){
  :root{--gut:40px}
  .mnav .wide{display:inline}
  .sec{padding:110px 0}
  .sec-head{grid-template-columns:200px 1fr; gap:24px; align-items:baseline}
}

/* Korean: mono labels switch to the sans face (mono spaces look too wide between Hangul words) */
html:lang(ko) .label, html:lang(ko) .brand small, html:lang(ko) .step-k, html:lang(ko) .facts-strip dt, html:lang(ko) .info dt,
html:lang(ko) .principle dt, html:lang(ko) .count, html:lang(ko) .card-tags, html:lang(ko) .p-tags, html:lang(ko) .toggle,
html:lang(ko) .badge{font-family:var(--sans); letter-spacing:.02em}