/* 승인된 시안 en-read.html 의 CSS 그대로 */
:root{--fs:19px}
[data-theme=dark]{--bg:#0e1015;--card:#171b24;--card2:#1e2330;--ink:#eceef3;--body:#d3d6de;--sub:#9aa0af;--faint:#6d7384;--line:#262b38;--acc:#ff8a3d;--acc2:#5ad1c8}
[data-theme=light]{--bg:#fbfaf7;--card:#fff;--card2:#f3f1ec;--ink:#1a1c22;--body:#2b2e36;--sub:#646978;--faint:#9096a3;--line:#e7e4dc;--acc:#d9620f;--acc2:#0f8c83}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
button,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
.hd{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);transition:background .25s}
.hd .in{display:flex;align-items:center;gap:8px;height:56px}
.logo{font-family:'Fraunces',serif;font-weight:800;font-size:19px;flex:0 0 auto}
.logo span{color:var(--acc)}
.hd .t{flex:1;min-width:0;font-size:13px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:6px;border-left:1px solid var(--line)}
.tb{height:36px;min-width:36px;padding:0 9px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--sub);flex:0 0 auto}
.tb svg{width:18px;height:18px}
.tb:hover{color:var(--ink)}
.set{display:none;border-bottom:1px solid var(--line);background:var(--card)}
.set.open{display:block}
.set .in{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:12px 16px;max-width:760px;margin:0 auto;font-size:13px;color:var(--sub)}
.grp{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.grp button,.grp span{height:34px;min-width:40px;padding:0 10px;display:grid;place-items:center;font-size:13px;font-weight:600}
.grp>*+*{border-left:1px solid var(--line)}
.grp button.on{background:var(--acc);color:#1a0f06}
.lang{display:flex;gap:10px;margin-left:auto}
.lang a[aria-current]{color:var(--ink);font-weight:700}

.head{text-align:center;padding:36px 0 26px}
.head .w{font-size:13px;font-weight:600;color:var(--acc2)}
.head h1{font-family:'Fraunces',serif;font-weight:800;font-size:28px;line-height:1.2;margin:10px 0 8px}
.head .m{font-size:13px;color:var(--faint)}
#episode-body{font-family:'Literata',Georgia,serif;font-size:var(--fs);line-height:1.8;color:var(--body);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overflow-wrap:break-word}
#episode-body p{margin:0 0 1.1em}
#episode-body hr{border:0;text-align:center;margin:2em 0;color:var(--faint)}
#episode-body hr::after{content:"✦ ✦ ✦";letter-spacing:.6em;font-size:13px}

.an{margin:40px 0 28px;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:16px 18px}
.an b{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--acc)}
.an p{font-size:14.5px;line-height:1.7;color:var(--body);margin-top:6px}
.pager{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin-bottom:34px}
.pager a{height:50px;border-radius:12px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:14px;padding:0 12px;white-space:nowrap}
.pager a svg{width:18px;height:18px}
.pager a.toc{color:var(--sub);padding:0 14px}
.pager a.next{background:var(--acc);border-color:var(--acc);color:#1a0f06}

.cm{border-top:1px solid var(--line);padding-top:26px;margin-bottom:50px}
.cm h2{font-family:'Fraunces',serif;font-size:22px;font-weight:800;display:flex;align-items:center;gap:10px}
.cm h2 span{font-family:'Inter';font-size:13px;font-weight:700;background:var(--card2);color:var(--sub);padding:2px 9px;border-radius:99px}
.sort{display:flex;gap:6px;margin:12px 0 16px}
.sort button{font-size:13px;font-weight:600;color:var(--sub);padding:6px 12px;border-radius:8px;border:1px solid var(--line)}
.sort button.on{color:var(--ink);background:var(--card2)}
.form{display:flex;gap:10px;margin-bottom:10px}
.form textarea{flex:1;min-width:0;min-height:84px;resize:vertical;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;font-size:14px;outline:0}
.form textarea:focus{border-color:var(--acc)}
.form-row{display:flex;justify-content:flex-end;margin-bottom:10px}
.post{background:var(--acc);color:#1a0f06;font-weight:700;font-size:14px;padding:9px 18px;border-radius:10px}
.c{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.c .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;color:#10131a}
.c .who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px}
.c .who b{font-size:14px}
.c .who .badge{font-size:10.5px;font-weight:800;padding:2px 6px;border-radius:5px;background:rgba(255,138,61,.15);color:var(--acc)}
.c .who .badge.auth{background:rgba(90,209,200,.16);color:var(--acc2)}
.c .who time{color:var(--faint)}
.c p.x{font-size:14.5px;line-height:1.65;color:var(--body);margin-top:5px}
.c .act{display:flex;gap:16px;margin-top:8px;font-size:12.5px;color:var(--sub);font-weight:600}
.c .act button{display:inline-flex;align-items:center;gap:5px;color:inherit}
.c .act button.on{color:var(--acc)}
.c .act svg{width:15px;height:15px}
.reply{grid-column:2;border-left:2px solid var(--line);padding-left:14px;margin-top:4px}
.reply .c{border-top:0;padding:10px 0 0}
.spoil{background:var(--card2);color:transparent;border-radius:4px;padding:0 3px;cursor:pointer;transition:color .2s}
.spoil.show{color:var(--body)}
.loadmore{display:block;width:100%;text-align:center;font-size:14px;font-weight:700;padding:12px;border:1px solid var(--line);border-radius:12px;color:var(--sub);margin-top:10px}
@media (min-width:720px){.head h1{font-size:36px}}