:root {
  --bg:#faf7f2; --surface:#f2ede3; --ink:#1f2937; --sub:#6f6a60;
  --line:#e7e0d4; --accent:#b45309; --accent-soft:#ead9c2;
  --badge:#8a6d4e; --card:#faf7f2; --card-line:#e7e0d4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#211d17; --surface:#2a251d; --ink:#eae4d8; --sub:#a89e8e;
    --line:#3a332a; --accent:#e09147; --accent-soft:#4a3d2c;
    --badge:#c2a37e; --card:#faf7f2; --card-line:#4a4234;
  }
}
:root[data-theme="dark"] {
  --bg:#211d17; --surface:#2a251d; --ink:#eae4d8; --sub:#a89e8e;
  --line:#3a332a; --accent:#e09147; --accent-soft:#4a3d2c;
  --badge:#c2a37e; --card:#faf7f2; --card-line:#4a4234;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:17px; line-height:1.85; -webkit-text-size-adjust:100%; }
header.site { max-width:680px; margin:0 auto; padding:26px 20px 0;
  display:flex; align-items:baseline; justify-content:space-between; gap:1em; }
.wordmark { font-weight:800; font-size:1.25em; letter-spacing:-0.01em; color:var(--ink); text-decoration:none; }
.wordmark span { color:var(--accent); }
nav.site a { color:var(--sub); text-decoration:none; font-size:0.85em; margin-left:1.1em; }
nav.site a:hover { color:var(--accent); }
.wrap { max-width:680px; margin:0 auto; padding:34px 20px 90px; }
.eyebrow { font-size:0.8em; color:var(--badge); letter-spacing:0.14em; font-weight:600; }
.eyebrow a { color:var(--badge); text-decoration:none; }
h1 { font-family:"Gowun Batang",serif; font-weight:700; font-size:1.95em;
  line-height:1.4; margin:0.35em 0 0.4em; text-wrap:balance; letter-spacing:-0.01em; }
.dateline { font-size:0.85em; color:var(--sub); margin:0 0 2.2em;
  padding-bottom:1.4em; border-bottom:1px solid var(--line); }
h2 { font-family:"Gowun Batang",serif; font-weight:700; font-size:1.32em;
  line-height:1.5; margin:2.4em 0 0.7em; text-wrap:balance; }
h2::before { content:""; display:block; width:34px; border-top:3px solid var(--accent-soft); margin-bottom:0.85em; }
p { margin:1em 0; }
a { color:var(--accent); }
blockquote { margin:1.4em 0; padding:0.85em 1.15em; border-left:3px solid var(--accent-soft);
  background:var(--surface); border-radius:0 10px 10px 0; font-size:0.94em; color:var(--sub); }
blockquote p { margin:0.3em 0; }
ul,ol { padding-left:1.4em; }
li { margin:0.45em 0; }
hr { border:none; border-top:1px solid var(--line); margin:3em 0 2em; }
figure.vis { margin:2em auto; text-align:center; background:var(--card);
  border:1px solid var(--card-line); border-radius:14px; padding:10px 8px; max-width:440px; }
figure.vis svg, figure.vis img { width:416px; max-width:100%; height:auto; display:block; margin:0 auto; }
.talk { margin:2.6em 0 0; padding:1em 1.2em; border:1px solid var(--line); border-radius:14px;
  background:var(--surface); font-size:0.92em; color:var(--sub); }
nav.epnav { display:flex; justify-content:space-between; gap:1em;
  margin-top:2em; padding-top:1.3em; border-top:1px solid var(--line); font-size:0.92em; }
nav.epnav a { text-decoration:none; }
footer.site { max-width:680px; margin:0 auto; padding:0 20px 60px; font-size:0.82em; color:var(--sub);
  border-top:1px solid var(--line); padding-top:1.4em; }
.flinks { margin-bottom:0.5em; }
.flinks a { color:var(--sub); text-decoration:none; margin-right:1.2em; }
.flinks a:hover { color:var(--accent); }
h2 a.plain { color:inherit; text-decoration:none; }
h2 a.plain:hover { color:var(--accent); }
.cardlist { list-style:none; padding:0; }
.cardlist li { margin:0.9em 0; padding:1em 1.2em; border:1px solid var(--line); border-radius:14px; }
.cardlist a.t { color:var(--ink); text-decoration:none; font-weight:700; }
.cardlist a.t:hover { color:var(--accent); }
.cardlist .d { font-size:0.88em; color:var(--sub); margin-top:0.25em; }
.hero { padding:1.5em 0 0.5em; }
.hero p { color:var(--sub); }
@media (max-width:520px) { body { font-size:16.5px; } h1 { font-size:1.62em; } }