:root{--paper:#f5efe6;--paper-2:#ede5d8;--ink:#1d1a16;--ink-2:#4a443c;--mute:#8b8378;--line:#d9d0c1;--acc:#8c4433;--acc-2:#b4705f;
--serif:"Noto Serif KR","Apple SD Gothic Neo","Nanum Myeongjo",serif;--latin:"EB Garamond","Noto Serif KR",Georgia,serif;--measure:42rem}
@media (prefers-color-scheme:dark){:root{--paper:#171511;--paper-2:#1f1c17;--ink:#ebe4d8;--ink-2:#c9c0b2;--mute:#8f877b;--line:#2f2b25;--acc:#d7927f;--acc-2:#b4705f}}
*{box-sizing:border-box}html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1rem;line-height:1.85;word-break:keep-all;overflow-wrap:anywhere;
font-feature-settings:"palt"}
a{color:inherit;text-decoration:none}a:hover{color:var(--acc)}::selection{background:var(--acc-2);color:#fff}
main{max-width:var(--measure);margin:0 auto;padding:0 1.25rem 6rem}
time,.num,.latin{font-family:var(--latin);font-variant-numeric:oldstyle-nums}

/* 머리: 이름이 왼쪽, 안내가 오른쪽. 한 줄이 넘어가면 아래로 */
.mast{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:2.2rem 0 1.4rem;border-bottom:1px solid var(--line)}
.mast .mark{font-family:var(--latin);font-style:italic;font-weight:400;font-size:1.65rem;letter-spacing:.02em;line-height:1}
.mast .mark span{font-style:normal;font-family:var(--serif);font-size:.95rem;color:var(--mute);margin-left:.6rem;letter-spacing:.06em}
.mast nav{display:flex;gap:1.2rem;font-size:.9rem;color:var(--mute)}.mast nav a:hover{color:var(--acc)}

/* 첫 화면 소개 */
.intro{padding:3.6rem 0 2.4rem}
.intro h1{font-weight:500;font-size:clamp(1.7rem,4.2vw,2.3rem);line-height:1.35;margin:0 0 .9rem;letter-spacing:-.005em}
.intro h1.latin{font-weight:400;font-style:italic;font-size:clamp(2.1rem,5.2vw,3rem);letter-spacing:.01em;line-height:1.2}
.intro p{margin:0 0 .8rem;color:var(--ink-2);font-size:1.05rem;max-width:34rem}.intro p:last-of-type{margin-bottom:0}
.about p{margin:0 0 .7rem}.about p:last-child{margin-bottom:0}
.topics{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;margin:1.8rem 0 0;padding:0;list-style:none;font-size:.9rem;color:var(--mute)}
.topics a .n{font-family:var(--latin);margin-left:.3rem;color:var(--mute)}

/* 묶음(주제) 머리와 달 머리 */
section.topic{margin-top:3.2rem}
section.topic>h2{display:flex;align-items:baseline;gap:.8rem;font-weight:500;font-size:1.25rem;margin:0 0 .3rem}
section.topic>h2 .num{font-size:.95rem;color:var(--mute);letter-spacing:.08em}
section.topic .blurb{margin:0 0 .9rem;color:var(--mute);font-size:.92rem}
.month{font-weight:500;font-size:.85rem;color:var(--mute);margin:2.4rem 0 .4rem;letter-spacing:.04em}

/* 글 한 줄: 날짜 | 첫 문장·발췌. 넓은 화면에서는 날짜가 왼쪽 여백으로 나간다 */
.entry{display:grid;grid-template-columns:5.2rem 1fr;gap:0 1rem;padding:1.05rem 0;border-top:1px solid var(--line)}
.entry:last-child{border-bottom:1px solid var(--line)}
.entry time{color:var(--mute);font-size:.95rem;padding-top:.2rem;white-space:nowrap}
.entry .meta{font-size:.8rem;color:var(--mute);margin-bottom:.2rem}
.entry .title{font-size:1.12rem;font-weight:500;margin:0 0 .25rem;line-height:1.55;transition:color .15s}
.entry:hover .title{color:var(--acc)}
.entry .excerpt{margin:0;color:var(--ink-2);font-size:.95rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.entry.plain{grid-template-columns:1fr}
.tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:0 .55rem;font-size:.78rem;color:var(--mute);margin-left:.45rem;vertical-align:.1em;line-height:1.5}
.tag.fin{border-color:var(--acc-2);color:var(--acc)}
@media (min-width:60rem){main{max-width:calc(var(--measure) + 7rem);padding-left:8.25rem;position:relative}
.entry{grid-template-columns:1fr}.entry time{position:absolute;left:0;width:6.5rem;text-align:right;padding-top:.3rem}
.intro,.mast,section.topic>h2,section.topic .blurb,.about,.foot,.month,.topics{margin-left:0}}

/* 본문 */
.meta{color:var(--mute);font-size:.85rem}
article.piece{padding-top:2.6rem}
article.piece .kicker,article.piece .meta{margin:0 0 1.6rem;font-size:.85rem;color:var(--mute)}
article.piece .kicker a:hover{color:var(--acc)}
article.piece .text{white-space:pre-wrap;font-size:1.12rem;line-height:2.05;margin:0 0 2.4rem;max-width:36rem}
.versions{display:flex;gap:.2rem 1.2rem;flex-wrap:wrap;margin:0 0 2.4rem;padding:.7rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.versions button{font:inherit;font-size:.85rem;padding:.15rem 0;border:0;background:none;color:var(--mute);cursor:pointer;border-bottom:1px solid transparent}
.versions button:hover{color:var(--acc)}.versions button.on{color:var(--ink);border-bottom-color:var(--acc)}
.seedline{color:var(--mute);font-size:.88rem;border-left:2px solid var(--line);padding:.1rem 0 .1rem .9rem;margin:0 0 2.4rem;white-space:pre-wrap}
.seedline b{font-weight:500;color:var(--mute);letter-spacing:.06em;font-size:.78rem}
.pn{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.92rem}
.pn a{max-width:48%;color:var(--ink-2)}.pn a:hover{color:var(--acc)}.pn .lab{display:block;font-size:.78rem;color:var(--mute);margin-bottom:.15rem}
.pn a.next{text-align:right;margin-left:auto}

/* 소개와 꼬리 */
.about{margin-top:4rem;padding-top:1.6rem;border-top:1px solid var(--line);color:var(--ink-2);font-size:.98rem;max-width:34rem}
.about h2{font-weight:500;font-size:1rem;margin:0 0 .5rem;color:var(--mute)}
.foot{margin-top:4rem;padding-top:1.2rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--mute)}
.foot .mark{font-family:var(--latin);font-style:italic;font-size:1rem;color:var(--ink)}
.empty{color:var(--mute);padding:2rem 0}