:root{
  --paper:#dde1e3; --paper-dark:#c3c9cd; --ink:#1c2024; --ink-soft:#4b545b;
  --red:#8b1e16; --wood:#2a1a0e; --shadow:rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); font-family:"Sarabun",system-ui,sans-serif;
  background:
    radial-gradient(ellipse at top, #4a3320 0%, var(--wood) 70%) fixed;
  min-height:100vh; padding:0 12px 32px;
}
.top{text-align:center; padding:28px 8px 10px; color:#f0e2bd}
.kicker{margin:0; letter-spacing:.35em; font-size:.8rem; opacity:.8}
.top h1{margin:.2em 0 0; font-family:"Rye",serif; font-weight:400; font-size:clamp(1.8rem,6vw,3rem); color:#f6e7bd; text-shadow:0 2px 0 #000}
.sub{margin:.3em 0 0; opacity:.8}

.toolbar{max-width:1100px; margin:14px auto 10px}
#search{
  width:100%; padding:12px 14px; font:inherit; border-radius:6px; border:2px solid #7a5a35;
  background:#f3e8c8; color:var(--ink);
}
.toc{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.toc button{
  font:inherit; font-size:.9rem; cursor:pointer; padding:6px 10px; border-radius:4px;
  background:#3b2816; color:#f0e2bd; border:1px solid #7a5a35;
}
.toc button:hover,.toc button.active{background:var(--red); border-color:#c9a45a; color:#fff}

.results{max-width:1100px; margin:0 auto 14px; background:var(--paper); border-radius:6px; padding:10px 14px; box-shadow:0 6px 18px var(--shadow)}
.results h2{margin:.2em 0 .5em; font-family:"Special Elite",monospace; font-size:1.05rem}
.results ul{list-style:none; margin:0; padding:0}
.results li button{
  width:100%; display:flex; justify-content:space-between; gap:12px; text-align:left;
  font:inherit; padding:8px 4px; background:none; border:0; border-bottom:1px dotted var(--ink-soft); cursor:pointer; color:var(--ink);
}
.results li button:hover{background:rgba(139,30,22,.1)}
.results .where{color:var(--ink-soft); font-size:.85rem}

.book{
  max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; position:relative;
  background:var(--paper); border-radius:6px; box-shadow:0 14px 40px var(--shadow), inset 0 0 0 3px #aab2b8;
  min-height:520px;
}
.book::after{ /* สันหนังสือ */
  content:""; position:absolute; top:0; bottom:0; left:50%; width:36px; transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.22) 50%,transparent); pointer-events:none;
}
.book.single{grid-template-columns:1fr}
.book.single::after{display:none}

.page{
  padding:26px 30px 36px; position:relative;
  background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(60,70,80,.07) 31px 32px);
}
.page.empty{opacity:.35; display:flex; align-items:center; justify-content:center; font-family:"Special Elite",monospace}
.page .sec{margin:0; font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; color:var(--red)}
.page h2{margin:.15em 0 0; font-family:"Oswald",sans-serif; font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:1.5rem; line-height:1.25}
.page .th{margin:.2em 0 .8em; color:var(--ink-soft)}
.page .note{margin:0 0 .8em; padding:6px 10px; font-size:.88rem; background:rgba(139,30,22,.08); border-left:3px solid var(--red)}

.items{list-style:none; margin:0; padding:0}
.items li{display:flex; align-items:baseline; gap:6px; padding:5px 0; font-family:"Special Elite",monospace; font-size:1rem}
.items .name{flex:0 1 auto}
.items .dots{flex:1 1 auto; border-bottom:2px dotted var(--ink-soft); transform:translateY(-4px); min-width:16px}
.items .price{flex:0 0 auto; font-weight:700; text-align:right}
.items .extra{display:block; font-family:"Sarabun",sans-serif; font-size:.8rem; color:var(--ink-soft)}
.items .thumb{width:44px; height:44px; object-fit:cover; border-radius:4px; border:1px solid var(--ink-soft); align-self:center; flex:0 0 auto}
.flag{color:var(--red)}
.pnum{position:absolute; bottom:10px; left:0; right:0; text-align:center; font-family:"Special Elite",monospace; font-size:.85rem; color:var(--ink-soft)}
.highlight{background:rgba(255,214,102,.55); outline:2px solid #c78a00}

.pager{display:flex; justify-content:center; align-items:center; gap:14px; margin:16px 0}
.pager button{
  font:inherit; cursor:pointer; padding:10px 18px; border-radius:6px; background:var(--red); color:#fff; border:2px solid #c9a45a;
}
.pager button:disabled{opacity:.35; cursor:not-allowed}
.pageinfo{color:#f0e2bd; font-family:"Special Elite",monospace}

.foot{max-width:1100px; margin:18px auto 0; color:#d9c79b; font-size:.85rem; text-align:center}

@media (max-width:760px){
  .book{grid-template-columns:1fr}
  .book::after{display:none}
  .page{padding:20px 18px 40px}
  .items li{font-size:.95rem}
}

.booktabs{display:flex; gap:8px; margin-bottom:10px}
.booktabs button{font:inherit; cursor:pointer; padding:8px 16px; border-radius:4px; background:#2a2f34; color:#dde1e3; border:1px solid #7b868e}
.booktabs button.active{background:var(--red); color:#fff; border-color:#e0b0a8}

.page.intro .blurb{font-size:.95rem; line-height:1.7; margin:.8em 0}
.page.intro h2{font-size:1.9rem}

.page.contents{display:flex; flex-direction:column; align-items:center}
.chead{width:100%; text-align:center; padding:10px 0; font-family:"Playfair Display",serif; font-weight:700; font-size:1.3rem;
  border-top:3px double var(--ink); border-bottom:3px double var(--ink); margin-bottom:34px}
.clist{list-style:none; margin:0; padding:0; width:78%}
.clist li{border-bottom:2px solid var(--ink-soft); position:relative}
.clist li:last-child{border-bottom:0}
.clist li::after{content:"◆"; position:absolute; bottom:-.62em; left:50%; transform:translateX(-50%); font-size:.6rem; background:var(--paper); padding:0 4px}
.clist li:last-child::after{display:none}
.clist button{width:100%; background:none; border:0; cursor:pointer; padding:14px 6px; color:var(--ink); text-align:center}
.clist .ctitle{display:block; font-family:"Playfair District","Playfair Display","Sarabun",serif; font-size:1.55rem}
.clist .cen{display:block; font-family:"Oswald",sans-serif; letter-spacing:.2em; font-size:.72rem; text-transform:uppercase; color:var(--ink-soft)}
.clist button:hover .ctitle{color:var(--red)}
.clist button:hover .ctitle::before{content:"☞ "}
.clist button:hover .ctitle::after{content:" ☜"}