:root{
  --paper:#faf6ee; --paper-deep:#f3ecdd; --card:#fffdf8; --ink:#3e362a;
  --ink-soft:#6f6350; --line:#e6dbc4; --accent:#a15c3b; --accent-soft:#c98a5e;
  --quote-bg:#f6efe0; --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  font-size:17px;line-height:1.85;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.layout{max-width:1180px;margin:0 auto;padding:28px 20px 64px;display:flex;gap:28px;align-items:flex-start}
/* sidebar */
.sidebar{flex:0 0 288px;position:sticky;top:28px;background:var(--paper-deep);
  border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;max-height:calc(100vh - 56px);overflow:auto}
.sidebar .site-name{font-weight:700;font-size:15px;line-height:1.5;color:var(--ink);margin:0 0 4px}
.sidebar .site-sub{font-size:12.5px;color:var(--ink-soft);margin:0 0 14px;line-height:1.5}
.sidebar nav a{display:block;padding:7px 10px;border-radius:10px;color:var(--ink);
  font-size:14px;line-height:1.45;margin:1px 0}
.sidebar nav a:hover{background:#eee2c9;text-decoration:none}
.sidebar nav a.active{background:#e9dcc0;font-weight:700;color:#7c4322}
/* content */
.content{flex:1 1 auto;min-width:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:44px 48px 40px;box-shadow:0 2px 14px rgba(120,96,52,.06)}
.content h1.page-title{font-family:"Noto Serif KR",Georgia,"Times New Roman",serif;
  font-size:30px;line-height:1.45;margin:0 0 10px;color:#43331f;word-break:keep-all}
.cover{width:100%;border-radius:12px;margin:14px 0 26px;display:block}
article{word-break:break-word}
article img{max-width:100%;height:auto;border-radius:10px}
article p{margin:.55em 0}
article h1,article h2,article h3{font-family:"Noto Serif KR",Georgia,serif;color:#43331f;line-height:1.5;margin:1.3em 0 .5em}
article h1{font-size:25px} article h2{font-size:22px} article h3{font-size:19px}
article blockquote{background:var(--quote-bg);border-left:4px solid var(--accent-soft);
  border-radius:0 12px 12px 0;margin:1em 0;padding:14px 18px;color:#57492f}
article ul,article ol{padding-left:1.4em;margin:.5em 0}
article li{margin:.25em 0}
article hr{border:none;border-top:1px solid var(--line);margin:1.8em 0}
article .notion-callout{background:var(--quote-bg);border:1px solid var(--line);
  border-radius:12px;padding:14px 18px;margin:1em 0;display:flex;gap:10px}
article .notion-divider{border-top:1px solid var(--line);margin:1.8em 0}
article .notion-page{background:#fbf7ec;border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;margin:.6em 0}
article .color-red{color:#b3372c} article .color-blue{color:#33608f}
article .highlighted-color{border-radius:4px;padding:0 2px}
/* prev / next */
.pager{display:flex;justify-content:space-between;gap:14px;margin-top:44px}
.pager a{flex:1;background:var(--paper-deep);border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;color:var(--ink);font-size:14.5px;line-height:1.5}
.pager a:hover{background:#eee2c9;text-decoration:none}
.pager a.next{text-align:right}
.pager .dir{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:3px}
.pager .spacer{flex:1}
footer{max-width:1180px;margin:0 auto;padding:0 20px 40px;color:var(--ink-soft);font-size:13px}
/* mobile */
.toc-mobile{display:none}
@media (max-width:860px){
  .layout{flex-direction:column;padding:16px 12px 48px}
  .sidebar{display:none}
  .toc-mobile{display:block;background:var(--paper-deep);border:1px solid var(--line);
    border-radius:var(--radius);padding:14px 18px;margin-bottom:16px}
  .toc-mobile summary{font-weight:700;cursor:pointer}
  .toc-mobile nav a{display:block;padding:6px 4px;color:var(--ink);font-size:14.5px}
  .toc-mobile nav a.active{font-weight:700;color:#7c4322}
  .content{padding:28px 20px 32px}
  .content h1.page-title{font-size:24px}
  body{font-size:16px}
}