/* Copied from the live shelf page (look & feel) */
:root{--bg:#f4efe6;--ink:#2b2420;--muted:#6f655c;--wood:#8a5a34;--wood2:#6e4426;--card:#fffdf8;--line:#e2d8c8}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#1d1a17;--ink:#ece4d8;--muted:#a99d90;--wood:#5a3a22;--wood2:#3e2816;--card:#26221e;--line:#3a332c}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
header{padding:28px 16px 8px;max-width:1200px;margin:auto}h1{margin:0;font-size:28px}header p{color:var(--muted);margin:6px 0 0}
.tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.tools input{flex:1;min-width:200px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-size:15px}
nav{display:flex;gap:6px;flex-wrap:wrap;max-width:1200px;margin:10px auto 0;padding:0 16px}nav a{font-size:13px;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:4px 10px;background:var(--card)}
nav button.ordb{font-size:13px;color:#fff;background:var(--wood);border:0;border-radius:999px;padding:4px 10px;cursor:pointer}
#od ol{list-style:none;padding:0;margin:10px 0}#od li{display:flex;align-items:center;gap:6px;padding:6px 4px;border-bottom:1px solid var(--line)}#od li span{flex:1}#od li button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:6px;padding:4px 10px;font-size:15px;cursor:pointer}#od .row{display:flex;gap:8px;justify-content:flex-end}#od .row button{border:0;border-radius:8px;padding:8px 14px;cursor:pointer}
main{max-width:1200px;margin:auto;padding:8px 16px 60px}
section.shelf{margin-top:30px}section.shelf h2{font-size:19px;margin:0 0 4px}section.shelf .sub{color:var(--muted);font-size:13px;margin-bottom:8px}
.rack{display:grid;grid-template-columns:repeat(auto-fill,38px);align-items:end;gap:0 3px;padding:14px 12px 0;background:linear-gradient(#0000 calc(100% - 14px),var(--wood) calc(100% - 14px),var(--wood2));border-radius:6px;position:relative;
 background-size:100% 232px;background-repeat:repeat-y;background-image:linear-gradient(to bottom,#00000008 0,#00000008 218px,var(--wood) 218px,var(--wood2) 232px)}
.spine{width:38px;height:200px;margin-bottom:32px;border-radius:3px 3px 1px 1px;color:#fff;border:0;cursor:pointer;padding:10px 0;position:relative;
 writing-mode:vertical-rl;text-orientation:upright;font-size:13px;line-height:1.1;letter-spacing:-.5px;overflow:hidden;white-space:nowrap;box-shadow:inset -4px 0 0 #0003,inset 3px 0 0 #fff2,0 1px 2px #0004;font-family:inherit}
.spine.t{text-orientation:mixed}.spine:hover,.spine:focus-visible{transform:translateY(-8px);outline:2px solid #f3c56b;outline-offset:1px}.spine{transition:transform .15s}
.spine::after{content:"";position:absolute;left:0;right:0;top:14px;height:2px;background:#ffffff40}.spine .s{opacity:.8;font-size:10px}
.spine.nosum{filter:saturate(.85)}
@media (max-width:640px){.rack{grid-template-columns:repeat(8,minmax(0,1fr));padding:14px 6px 0}.spine{width:100%;font-size:13px}main,header{padding-left:16px;padding-right:16px}}
html{-webkit-text-size-adjust:100%}
.modes{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.modes button{border:0;background:none;color:var(--ink);padding:10px 14px;font-size:15px;cursor:pointer;font-family:inherit}
.modes button[aria-pressed=true]{background:#8a5a34;color:#fff}
.modes.sm{margin:18px 0 0}.modes.sm button{padding:7px 14px;font-size:14px}.cv em.cx{display:block;font-style:normal;font-size:12px;color:var(--muted)}h3.yr{font-size:16px;margin:22px 0 6px;border-bottom:1px solid var(--line);padding-bottom:4px}
details.shf>summary h2{margin:0}details.shf>summary{padding:4px 0 8px}
.covers{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:18px 14px;padding:6px 2px 4px}
.cv{border:0;background:none;padding:0;cursor:pointer;color:var(--ink);font-family:inherit;text-align:center}
.cv img{width:100%;aspect-ratio:3/4.2;object-fit:cover;border-radius:3px 6px 6px 3px;box-shadow:0 3px 10px #0004,inset 0 0 0 1px #0002;background:var(--line);display:block;transition:transform .15s}
.cv:hover img,.cv:focus-visible img{transform:translateY(-4px)}.cv:focus-visible{outline:2px solid #f3c56b;outline-offset:3px}
.cv span{display:block;font-size:13px;line-height:1.3;margin-top:6px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rack{display:none}.mode-title .rack{display:grid}
ul.toc{list-style:none;padding:0;margin:8px 0}ul.toc li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dotted var(--line)}
ul.toc li em{font-style:normal;color:var(--muted);flex:none}ul.toc li.l1{font-weight:600;margin-top:6px}ul.toc li.l2{padding-left:18px}ul.toc li.l3{padding-left:36px;font-size:.95em}
.small{font-size:12px}a.pv{color:inherit;text-decoration:none;border-bottom:1px dashed #8a5a34}a.pv:hover{color:#8a5a34}
.rec{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 14px 8px}.rec h2{font-size:17px;margin:0 0 8px}
.ri{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}.ri:first-child{border-top:0}
.ri img{width:54px;height:76px;object-fit:cover;border-radius:3px;box-shadow:0 2px 6px #0003;flex:none}.ri b{font-size:15px}.ri .h{font-size:13px;color:#8a5a34;margin:2px 0}
.ri .x{font-size:13px;color:var(--muted);line-height:1.5}.rec h3.rh{font-size:15px;margin:14px 0 2px;color:#8a5a34}.ri a.fp{color:#8a5a34;font-weight:600;text-decoration:none;margin-right:4px}div.ri{}.ri mark{background:#f3e3a6;color:#2b2420;border-radius:2px;padding:0 1px}
.star{margin-top:12px;padding:8px 14px;border-radius:8px;border:1px solid #c9a227;background:none;color:var(--ink);font-size:14px;cursor:pointer;font-family:inherit}
.star[aria-pressed=true]{background:#f3e3a6;color:#3b2f10}.dlg .small{font-size:12px;margin-top:6px}.dlg .small a{color:#8a5a34}
#fav.empty .covers,#fav.empty .rack,#reading.empty .covers{display:none!important}.mysm{margin:0 0 0 6px!important;padding:2px 8px!important;font-size:12px!important;vertical-align:middle;text-decoration:none;display:inline-block}nav a.ordb{font-size:13px;color:#fff;background:var(--wood);border:0;border-radius:999px;padding:4px 10px}#fav .sub.cnt,#reading .sub.cnt{font-size:13px}
#ntd{border:0;border-radius:14px;padding:0;width:min(94vw,640px);max-height:88vh;background:var(--card,#fffdf8);color:inherit}#ntd::backdrop{background:#0008}
#ntd .in{padding:16px;position:relative}#ntd input{width:100%;box-sizing:border-box;padding:9px;font-size:15px;border:1px solid #ddd;border-radius:9px;margin:6px 0 4px}
#ntd .bkg{margin-top:14px}#ntd .bkg h4{margin:0 0 4px;font-size:15px}#ntd .nt{border-top:1px solid #0001;padding:7px 0}#ntd .nt a{color:#8a5a34;font-weight:600;text-decoration:none}
#ntd .nt .tx{white-space:pre-wrap;line-height:1.5;margin:3px 0}#ntd .nt button{background:none;border:0;color:#888;font-size:12px;cursor:pointer;padding:0}
.cv.isfav::after{content:"★";position:absolute;top:4px;right:6px;color:#f3c56b;font-size:18px;text-shadow:0 1px 3px #000a}.cv{position:relative}
.spine.isfav::before{content:"★";position:absolute;bottom:4px;left:0;right:0;text-align:center;color:#f3c56b;font-size:12px;writing-mode:horizontal-tb}.mode-title .covers{display:none}
@media (max-width:640px){.covers{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px}}.hidden{display:none!important}
details.grp{border-bottom:1px solid var(--line)}details.grp>summary{cursor:pointer;list-style:none;padding:11px 4px;font-size:16px;display:flex;align-items:center;gap:6px}
details.grp>summary::-webkit-details-marker{display:none}details.grp>summary::before{content:"▸";color:var(--wood);transition:transform .15s}details.grp[open]>summary::before{transform:rotate(90deg)}
details.grp>summary .sub{margin:0!important}details.grp[open]{padding-bottom:12px}
dialog{border:0;border-radius:12px;padding:0;background:var(--card);color:var(--ink);max-width:min(92vw,440px);box-shadow:0 20px 60px #0007}
dialog::backdrop{background:#000a}.dlg{padding:18px;text-align:center}.dlg img{max-width:100%;max-height:60vh;border-radius:4px;box-shadow:0 6px 18px #0005;cursor:pointer}
.dlg h3{margin:12px 0 4px;font-size:17px}.dlg p{margin:2px 0;color:var(--muted);font-size:13px}.dlg .go{display:inline-block;margin-top:10px;padding:9px 16px;border-radius:8px;background:#8a5a34;color:#fff;text-decoration:none;font-size:14px}
.dlg .x{position:absolute;right:8px;top:6px;background:none;border:0;font-size:22px;color:var(--muted);cursor:pointer}
.badge{display:inline-block;font-size:11px;border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-top:6px}
i.st{position:absolute;font-style:normal;z-index:1;pointer-events:none;color:#fff;background:#000b;border-radius:6px;font-size:11px;line-height:1.3;padding:2px 6px;writing-mode:horizontal-tb;white-space:nowrap}
.cv i.st{left:4px;top:4px}.spine i.st{left:50%;transform:translateX(-50%);bottom:20px;padding:1px 2px;font-size:10px;background:#0009}
.cv.st-done img{filter:saturate(.75)}#hylg{color:var(--muted);margin-top:4px}.dlg .go.read{background:#3d6e8a}
footer{color:var(--muted);font-size:12px;text-align:center;padding:20px}
/* summary page */
.doc{max-width:820px;margin:auto;padding:24px 16px 80px;line-height:1.75}.doc a{color:#8a5a34}.doc h1{font-size:24px}.doc h2{font-size:18px;margin-top:34px;border-top:1px solid var(--line);padding-top:18px}
.doc .meta{color:var(--muted);font-size:14px}.doc .top{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}.doc .top img{width:140px;border-radius:4px;box-shadow:0 4px 12px #0004}
.pending{background:var(--card);border:1px dashed var(--line);padding:16px;border-radius:8px;color:var(--muted)}
@media print{.noprint{display:none}.doc h2{page-break-before:always;border:0}body{background:#fff;color:#000}}