/* เว็บหนังสือ — สไตล์กลางของทั้งเว็บ (หน้าแรก · หน้าหนังสือ · หน้าอ่านบท)
 * โครงหน้าอ่าน: คอลัมน์เดียวใต้แถบตราประทับ · แผ่น "ดวงที่ใช้อ่าน" เปิดบท และช่องดวงในเนื้อหาอ่านจากแผ่นนี้
 * ไฟล์นี้คือต้นฉบับ แก้ที่ Digital Products/เว็บ/assets/ ได้เลย · หน้า .html ใน books/ สร้างจากต้นฉบับบท ห้ามแก้ตรงๆ
 * สีห้าธาตุมาจาก assets/vendor/elements.js (สำเนาจาก Bazi/src/js/elements.js ให้ตรงกับแอป) → ตั้งเป็น --el-0..4 ตอนโหลดหน้า
 */
@font-face{font-family:"Plex Thai";font-weight:400;font-display:swap;src:url(fonts/IBMPlexSansThai-Regular.woff2) format("woff2")}
@font-face{font-family:"Plex Thai";font-weight:500;font-display:swap;src:url(fonts/IBMPlexSansThai-Medium.woff2) format("woff2")}
@font-face{font-family:"Plex Thai";font-weight:600;font-display:swap;src:url(fonts/IBMPlexSansThai-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Plex Thai";font-weight:700;font-display:swap;src:url(fonts/IBMPlexSansThai-Bold.woff2) format("woff2")}
@font-face{font-family:"Book Han";font-weight:500;font-display:swap;src:url(fonts/NotoSerifTC-book-500.woff2) format("woff2")}
@font-face{font-family:"Book Han";font-weight:700;font-display:swap;src:url(fonts/NotoSerifTC-book-700.woff2) format("woff2")}

:root{
  /* สีเรียบ (มติบอส 6 พ.ย.): พื้นเบจถนอมสายตา · อักษรดำ · ไม่มีโหมดมืด · สีอื่นมีแค่สีห้าธาตุในเนื้อหา */
  --paper:#F3EAD8; --plate:#EAE0CB; --ink:#1A1A1A; --muted:#5A5249; --rule:#D6CAB2; --seal:#1A1A1A; --on-seal:#F3EAD8; --bar:#F3EAD8; --on-bar:#1A1A1A;
  color-scheme:light;
  --f-body:"Plex Thai","Sukhumvit Set","Thonburi","Noto Sans Thai",system-ui,sans-serif;
  --f-han:"Book Han","Songti TC","PMingLiU","Noto Serif CJK TC",serif;
  --col:40rem; --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.75;
  padding:env(safe-area-inset-top,0px) var(--gr) calc(4rem + env(safe-area-inset-bottom,0px)) var(--gl)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
[hidden]{display:none!important}
img{max-width:100%}
.han{font-family:var(--f-han);font-weight:500}
a{color:var(--seal)}
:focus-visible{outline:2px solid var(--seal);outline-offset:2px;border-radius:4px}
.e0{--e:var(--el-0);--ei:color-mix(in srgb,var(--el-0) 50%,var(--ink))}
.e1{--e:var(--el-1);--ei:color-mix(in srgb,var(--el-1) 50%,var(--ink))}
.e2{--e:var(--el-2);--ei:color-mix(in srgb,var(--el-2) 50%,var(--ink))}
.e3{--e:var(--el-3);--ei:color-mix(in srgb,var(--el-3) 50%,var(--ink))}
.e4{--e:var(--el-4);--ei:color-mix(in srgb,var(--el-4) 50%,var(--ink))}

/* แถบบน */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);border-bottom:1px solid var(--rule);
  margin-inline:calc(-1 * var(--gl)) calc(-1 * var(--gr));padding:.55rem var(--gr) .55rem var(--gl)}
.bar-in{max-width:var(--col);margin:0 auto;display:flex;align-items:center;gap:.75rem}
.mark{background:var(--seal);color:var(--on-seal);font-weight:700;font-size:.95rem;padding:.1rem .55rem;border-radius:3px;white-space:nowrap;text-decoration:none}
.bar-sub{color:var(--muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.bar-app{font-size:.85rem;white-space:nowrap}
.mini{display:flex;gap:3px;font-family:var(--f-han);font-size:.95rem;line-height:1.05}
.mini span{display:flex;flex-direction:column;align-items:center}
.mini b{font-weight:700;color:var(--ei)}
.mini .unk{color:var(--muted)}

/* แผ่นดวง */
.plate{max-width:var(--col);margin:1.5rem auto 0;background:var(--plate);border:1px solid var(--rule);border-radius:6px;padding:1.1rem 1.1rem 1.2rem}
.plate-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem .75rem}
.eyebrow{font-size:.8rem;letter-spacing:.06em;color:var(--muted);font-weight:600}
.pill{font-size:.8rem;font-weight:700;padding:.05rem .6rem;border-radius:999px;border:1px solid var(--seal);color:var(--seal)}
.pill.mine{background:var(--seal);color:var(--on-seal)}
.who{margin:.2rem 0 .9rem;font-weight:600;font-size:1.02rem}
.who small{display:block;font-weight:400;color:var(--muted);font-size:.85rem}
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.pcol{display:grid;gap:.4rem;min-width:0}
.plabel{text-align:center;font-size:.8rem;color:var(--muted)}
.plabel .han{color:var(--ink);font-size:.95rem;margin-right:.2rem}
.tile{border:1px solid var(--e,var(--rule));background:color-mix(in srgb,var(--e,var(--plate)) 16%,var(--plate));border-radius:5px;text-align:center;padding:.35rem .2rem .4rem;min-width:0}
.tile .c{display:block;font-family:var(--f-han);font-weight:700;font-size:clamp(2rem,9vw,2.75rem);line-height:1.15;color:var(--ei,var(--ink))}
.tile .n{display:block;font-size:.78rem;line-height:1.35}
.tile .n em{font-style:normal;color:var(--muted)}
.tile.unk{border-style:dashed;border-color:var(--rule);background:transparent}
.tile.unk .c{color:var(--muted)}
.tally{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;margin-top:.9rem}
.tc{text-align:center;font-size:.85rem;min-width:0}
.tc .bars{display:flex;justify-content:center;gap:2px;height:.55rem;margin-top:.2rem}
.tc .bars i{width:.55rem;border-radius:1px;background:var(--e)}
.tc .bars .zero{width:1.6rem;height:0;border-top:1px dashed var(--muted);align-self:center;background:none}
.tc strong{font-variant-numeric:tabular-nums}
.warn{margin:.8rem 0 0;padding:0;list-style:none;font-size:.85rem;color:var(--muted)}
.warn li::before{content:"หมายเหตุ · ";color:var(--seal);font-weight:600}

form.birth{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--rule);display:grid;gap:.7rem}
.row{display:flex;flex-wrap:wrap;gap:.6rem}
.f{display:grid;gap:.15rem;min-width:0;border:0;padding:0;margin:0}
.f label,.f legend{font-size:.8rem;color:var(--muted);font-weight:600;padding:0}
input,select,button{font:inherit;font-size:1rem;color:var(--ink)}
input[type=number],input[type=time],select{background:var(--paper);border:1px solid var(--rule);border-radius:5px;padding:.35rem .5rem;min-height:2.6rem}
#bd{width:4.5rem} #bm{width:8.5rem} #by{width:6.5rem} #bt{width:7.5rem} #bp{width:15rem;max-width:100%}
.radios{display:flex;gap:.9rem;min-height:2.6rem;align-items:center}
.check,.radios label{display:flex;align-items:center;gap:.4rem;font-size:.95rem;color:var(--ink);font-weight:400}
.check{min-height:2.6rem;align-self:end}
.check input,.radios input{width:1.1rem;height:1.1rem;accent-color:var(--seal)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.btn{background:var(--seal);color:var(--on-seal);border:0;border-radius:5px;padding:.5rem 1.1rem;font-weight:700;cursor:pointer;min-height:2.6rem}
.link{background:none;border:0;color:var(--seal);text-decoration:underline;cursor:pointer;padding:.3rem 0}
.err{color:var(--seal);font-weight:600;font-size:.9rem;margin:0}
.privacy{font-size:.8rem;color:var(--muted);margin:0}

/* เนื้อหา */
article,.pager,footer,.home{max-width:var(--col);margin-inline:auto}
article{overflow-wrap:anywhere}
article h1{font-size:1.75rem;line-height:1.35;margin:2.2rem 0 .3rem;text-wrap:balance}
article h2{font-size:1.3rem;line-height:1.4;margin:2.6rem 0 .6rem;text-wrap:balance;scroll-margin-top:4.5rem}
article h3{font-size:1.12rem;margin:1.8rem 0 .4rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem}
article p,article li{max-width:65ch}
article ul,article ol{padding-left:1.4rem}
article figure{margin:.8rem 0}
article img{width:100%;max-width:22rem;height:auto;border-radius:5px;display:block}
article img[src*="cycle"]{max-width:28rem}
article figcaption{font-size:.82rem;color:var(--muted);margin-top:.3rem}
.table-wrap{overflow-x:auto;margin:.8rem 0}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-weight:700;border-bottom:2px solid var(--ink)}
blockquote{margin:1.1rem 0;padding:0}
blockquote.summary{background:var(--plate);border-radius:5px;padding:.6rem .9rem}
blockquote.summary p{margin:0}
blockquote.canon{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:.9rem 0 .7rem}
blockquote.canon p{margin:.35rem 0}
blockquote.canon p:first-child{font-size:1.2rem;line-height:1.8}
blockquote.canon p:first-child .han{letter-spacing:.04em}
blockquote.canon p:last-child{font-size:.85rem;color:var(--muted)}
.count-badge{font-size:.8rem;font-weight:600;color:var(--ei);border:1px solid var(--e);border-radius:999px;padding:0 .55rem;background:color-mix(in srgb,var(--e) 14%,var(--paper))}
.count-badge.none{color:var(--muted);border-style:dashed;border-color:var(--muted);background:transparent}

/* ช่องดวงของผู้อ่าน */
.yourchart{border:1px solid var(--rule);border-radius:6px;padding:.8rem 1rem;margin:1.2rem 0}
.yourchart.is-live{border:1.5px solid var(--seal);background:var(--plate)}
.slot-tag{display:inline-block;font-size:.75rem;font-weight:700;color:var(--on-seal);background:var(--seal);border-radius:3px;padding:0 .45rem;margin-bottom:.4rem}
.live p{margin:.4rem 0}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 .2rem}
.chip{border:1px solid var(--e);background:transparent;color:var(--ei);border-radius:999px;padding:.15rem .7rem;font-weight:600;cursor:pointer;min-height:2.2rem}
.chip[aria-pressed="true"]{background:var(--e);color:var(--paper)}
.chip small{font-weight:400;opacity:.85}
.cyc{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:1rem;align-items:center}
.cyc svg{width:100%;height:auto;display:block}
.rel{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.rel li{display:grid;grid-template-columns:7.2rem minmax(0,1fr);gap:.5rem;align-items:baseline;max-width:none}
.rel .k{font-size:.85rem;color:var(--muted)}
.rel .v b{color:var(--ei)}
.counts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;margin:.5rem 0}
.cnt{border:1px solid var(--e);border-radius:5px;text-align:center;padding:.3rem .2rem;min-width:0}
.cnt .num{display:block;font-size:1.5rem;font-weight:700;color:var(--ei);font-variant-numeric:tabular-nums;line-height:1.2}
.cnt.zero{border-style:dashed;border-color:var(--muted)} .cnt.zero .num{color:var(--muted)}
.cnt small{font-size:.8rem}
.hl{color:var(--ei)}
.trace{font-size:.85rem;color:var(--muted)}
.trace .han{color:var(--ink)}
svg .lbl{font-family:var(--f-body);font-size:13px;font-weight:600;fill:var(--ink)}
svg .num{font-family:var(--f-body);font-size:12px;fill:var(--muted)}
svg .gen{stroke:var(--muted);fill:none;stroke-width:1.4;opacity:.35}
svg .ctl{stroke:var(--muted);fill:none;stroke-width:1.2;stroke-dasharray:4 4;opacity:.3}
svg .hg{stroke:var(--ink);opacity:1;stroke-width:2.2}
svg .hc{stroke:var(--seal);opacity:1;stroke-width:2.2}
svg .ah{fill:var(--muted);opacity:.35} svg .ah.hg{fill:var(--ink);stroke:none;opacity:1} svg .ah.hc{fill:var(--seal);stroke:none;opacity:1}

/* ท้ายบท */
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1rem;border-top:1px solid var(--rule);font-weight:600}
footer{margin-top:2rem;font-size:.82rem;color:var(--muted)}

/* หน้าหลักของเล่ม */
.home h1{font-size:clamp(2.4rem,9vw,3.4rem);line-height:1.15;margin:2.4rem 0 .2rem;letter-spacing:.01em}
.home .tagline{font-size:1.15rem;color:var(--muted);margin:0 0 1.4rem}
.promise{display:grid;gap:.6rem;margin:0 0 2rem;padding:0;list-style:none}
.promise li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.6rem;border-top:1px solid var(--rule);padding-top:.6rem}
.promise b{color:var(--muted);font-size:.9rem}
.part{margin:1.6rem 0 0}
.part h2,.part h3{font-size:1.05rem;margin:0 0 .4rem;display:flex;gap:.6rem;align-items:baseline}
.part h2 small,.part h3 small{color:var(--muted);font-weight:500;font-size:.85rem}
.toc{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.toc li{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;gap:.5rem;align-items:baseline;padding:.35rem 0;border-bottom:1px solid var(--rule)}
.toc .no{color:var(--muted);font-variant-numeric:tabular-nums}
.toc .st{font-size:.8rem;color:var(--muted);white-space:nowrap}
.toc a{font-weight:600}
.toc .ready .st{color:var(--seal);font-weight:700}

@media (max-width:560px){.cyc{grid-template-columns:minmax(0,1fr)}.cyc svg{max-width:17rem;margin:0 auto}.promise li{grid-template-columns:minmax(0,1fr);gap:0}}
@media (max-width:420px){body{font-size:16px}.tile .n{font-size:.72rem}.rel li{grid-template-columns:minmax(0,1fr);gap:0}.bar-app{display:none}}
@media (prefers-reduced-motion:no-preference){.tile,.cnt{transition:background-color .3s,border-color .3s}}


/* ══ ร้าน (โครงตามแนวทาง MinnieBook: หน้าแรก → หน้าสินค้า → ชั้นหนังสือ) ══ */
.site-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bar);color:var(--on-bar);
  margin-inline:calc(-1 * var(--gl)) calc(-1 * var(--gr));padding:.6rem var(--gr) .6rem var(--gl)}
.site-bar .in{max-width:60rem;margin:0 auto;display:flex;align-items:center;gap:1rem}
.site-bar .brand{color:var(--on-bar);font-weight:700;font-size:1.05rem;text-decoration:none;margin-right:auto;white-space:nowrap}
.site-bar a.nav{color:var(--on-bar);opacity:.85;font-size:.9rem;white-space:nowrap}
.site-bar .login{background:transparent;color:var(--on-bar);border:1px solid color-mix(in srgb,var(--on-bar) 55%,transparent);border-radius:6px;padding:.3rem .8rem;font-size:.9rem;cursor:not-allowed;min-height:2.3rem}
.wrap{max-width:60rem;margin-inline:auto}
.band{margin-inline:calc(-1 * var(--gl)) calc(-1 * var(--gr));padding:3.2rem var(--gr) 3rem var(--gl)}
.band.hero{background:var(--plate);border-bottom:1px solid var(--rule);text-align:center}
.hero .eyebrow{display:block;letter-spacing:.3em;color:var(--seal);margin-bottom:.6rem}
.hero h1{font-size:clamp(1.8rem,6vw,2.7rem);line-height:1.3;margin:0 auto .8rem;max-width:22ch;text-wrap:balance}
.hero p{max-width:46ch;margin:0 auto 1.4rem;color:var(--muted)}
.btn-main{display:inline-block;background:var(--seal);color:var(--on-seal);font-weight:700;text-decoration:none;border-radius:6px;padding:.65rem 1.4rem;border:0;font-size:1rem}
.btn-main[aria-disabled="true"],.btn-main:disabled{opacity:.55;cursor:not-allowed}
.sec{padding:3rem 0 1rem}
.sec>h2{text-align:center;font-size:1.5rem;margin:0 0 .4rem;text-wrap:balance}
.sec>.lead{text-align:center;color:var(--muted);margin:0 auto 1.6rem;max-width:50ch}
.promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1rem}
.promises article{background:var(--plate);border:1px solid var(--rule);border-radius:10px;padding:1.1rem 1.2rem}
.promises h3{margin:0 0 .3rem;font-size:1.05rem}
.promises p{margin:0;color:var(--muted);font-size:.95rem}
.chipbar{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0 0 1.4rem}
.fchip{border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:999px;padding:.35rem 1rem;cursor:pointer;font-weight:600;min-height:2.3rem}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:1.2rem}
.pcard{background:var(--paper);border:1px solid var(--rule);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.pcard .cv{position:relative;background:var(--plate);padding:1rem;display:grid;place-items:center}
.pcard .cv .cover{width:62%}
.pcard .badge{position:absolute;top:.7rem;left:.7rem;background:var(--seal);color:var(--on-seal);font-size:.75rem;font-weight:700;border-radius:999px;padding:.1rem .6rem}
.pcard .body{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:.35rem}
.tag{font-size:.75rem;font-weight:600;border-radius:999px;padding:.05rem .6rem;background:var(--plate);color:var(--muted);border:1px solid var(--rule)}
.pcard h3{margin:0;font-size:1.15rem;line-height:1.4}
.pcard .sub{margin:0;color:var(--muted);font-size:.92rem}
.pcard ul{margin:.2rem 0 0;padding-left:1.1rem;font-size:.9rem}
.pcard ul li::marker{color:var(--seal)}
.pcard .foot{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.price{font-weight:700;font-size:1.3rem;font-variant-numeric:tabular-nums}
.price.tbd{font-size:.95rem;color:var(--muted)}
.btn-sm{background:var(--ink);color:var(--paper);text-decoration:none;font-weight:600;font-size:.9rem;border-radius:6px;padding:.4rem .9rem;white-space:nowrap}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1rem;counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;font-weight:600}
.steps li::before{counter-increment:s;content:counter(s);width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;background:var(--seal);color:var(--on-seal);font-weight:700}
.note{text-align:center;color:var(--muted);font-size:.85rem;margin:1.2rem 0 0}
.site-foot{max-width:none;margin:3rem calc(-1 * var(--gr)) 0 calc(-1 * var(--gl));padding:2rem var(--gr) calc(2rem + env(safe-area-inset-bottom,0px)) var(--gl);background:var(--bar);color:var(--on-bar);font-size:.88rem}
.site-foot .in{max-width:60rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem}
.site-foot b{display:block;margin-bottom:.2rem}
.site-foot .fine{grid-column:1/-1;opacity:.75;font-size:.8rem;margin:0}
body.store-page{padding-bottom:0}

/* ปกตัวอักษร (ยังไม่มีปกจริง) */
.cover{aspect-ratio:3/4;max-width:100%;background:var(--seal);color:var(--on-seal);border-radius:4px;padding:1.1rem 1rem;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 6px 18px color-mix(in srgb,var(--ink) 18%,transparent)}
.cover .ct{font-size:clamp(1.5rem,4vw,2rem);font-weight:700;line-height:1.15}
.cover .cs{font-size:.8rem;opacity:.9}
.cover .five{display:flex;gap:.3rem;font-family:var(--f-han);font-weight:700;font-size:1.1rem}
.cover .five span{width:1.8rem;height:1.8rem;display:grid;place-items:center;border-radius:2px;background:#FFF8EE;color:color-mix(in srgb,var(--e) 62%,#2B221C);border-bottom:3px solid var(--e)}

/* หน้าสินค้า */
.pp{max-width:44rem;margin-inline:auto;padding-top:1.6rem}
.back{font-size:.9rem;text-decoration:none}
.pp h1{font-size:clamp(1.9rem,6vw,2.5rem);line-height:1.25;margin:.6rem 0 .3rem}
.pp .sub{color:var(--muted);margin:0 0 1.6rem;font-size:1.05rem}
.pp h2{font-size:1.25rem;margin:2rem 0 .8rem}
.gets{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.gets li{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.5rem;align-items:start}
.gets li::before{content:"✓";width:1.3rem;height:1.3rem;border-radius:50%;background:var(--seal);color:var(--on-seal);display:grid;place-items:center;font-size:.75rem;font-weight:700;margin-top:.3rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,9rem),1fr));gap:.6rem}
.gallery button{padding:0;border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--plate);cursor:zoom-in}
.gallery img{display:block;width:100%;height:auto;aspect-ratio:1}
dialog.lb{border:0;padding:0;background:transparent;max-width:min(92vw,46rem)}
dialog.lb::backdrop{background:color-mix(in srgb,#000 78%,transparent)}
dialog.lb img{display:block;width:100%;height:auto;border-radius:6px}
dialog.lb p{color:#fff;text-align:center;margin:.5rem 0 0;font-size:.9rem}
dialog.lb button{position:absolute;top:.4rem;right:.4rem;background:#000a;color:#fff;border:0;border-radius:50%;width:2.4rem;height:2.4rem;font-size:1.2rem;cursor:pointer}
.buybox{margin:2rem 0 0;background:var(--bar);color:var(--on-bar);border-radius:14px;padding:1.6rem 1.4rem}
.buybox .price{font-size:2rem;color:var(--on-bar)}
.buybox .price.tbd{font-size:1.2rem;color:var(--on-bar)}
.buybox p{margin:.3rem 0;opacity:.85}
.buybox .btn-main{display:block;width:100%;text-align:center;margin:1rem 0 .8rem;background:var(--on-bar);color:var(--bar)}
.buybox small{display:block;opacity:.7;font-size:.82rem;margin-top:.5rem}

/* ชั้นหนังสือ */
.lib{max-width:44rem;margin-inline:auto;padding-top:1.8rem}
.lib h1{font-size:1.7rem;margin:0}
.lib .acct{color:var(--muted);margin:.2rem 0 1.4rem}
.empty{border:1px solid var(--rule);border-radius:12px;padding:2rem 1.2rem;text-align:center;background:var(--plate)}
.empty h2{font-size:1.1rem;margin:0 0 .3rem}
.empty p{color:var(--muted);margin:0 0 1rem}
.owned{margin-top:2rem;border:1px dashed var(--seal);border-radius:12px;padding:1rem 1.1rem}
.owned .lab{font-size:.78rem;font-weight:700;color:var(--seal)}
.oitem{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:1rem;align-items:center;margin-top:.6rem}
.oitem .cover{padding:.5rem;font-size:.6rem} .oitem .cover .ct{font-size:.95rem} .oitem .cover .five,.oitem .cover .cs{display:none}
.oitem h3{margin:0 0 .4rem;font-size:1.05rem}
.oitem .acts{display:flex;flex-wrap:wrap;gap:.5rem}
.oitem .muted{color:var(--muted);font-size:.85rem;align-self:center}
@media (max-width:560px){.site-foot .in{grid-template-columns:minmax(0,1fr)}.site-bar .in{gap:.7rem}.site-bar a.nav{font-size:.82rem}.site-bar .login{font-size:.82rem;padding:.25rem .6rem}}

/* สัญญาของเล่ม (หน้าสินค้า) */
.fit{background:var(--plate);border:1px solid var(--rule);border-radius:12px;padding:1.2rem 1.3rem;margin:0 0 .5rem}
.fit-who{margin:0 0 .8rem;font-size:1.1rem;font-weight:600}
.fit-who span{display:block;font-size:.78rem;letter-spacing:.06em;color:var(--seal);font-weight:700}
.fit-lead{margin:0 0 .4rem;color:var(--muted);font-size:.92rem}
.qs{margin:0;padding:0;list-style:none;counter-reset:q;display:grid;gap:.6rem}
.qs li{display:grid;grid-template-columns:1.8rem minmax(0,1fr);gap:.5rem;align-items:baseline;font-size:1.02rem}
.qs li::before{counter-increment:q;content:counter(q);font-weight:700;color:var(--seal);font-variant-numeric:tabular-nums;font-size:1.1rem}
.bigq{margin:0 0 1.4rem;padding:0}
.bigq .q{font-size:clamp(1.2rem,4vw,1.45rem);font-weight:700;line-height:1.5;margin:0 0 .4rem;text-wrap:balance}
.bigq blockquote.canon{margin:.6rem 0}
.bigq .invite{margin:.6rem 0 0;font-weight:600;color:var(--seal)}
.fit-row{margin:1rem 0 0;padding-top:.8rem;border-top:1px solid var(--rule)}
.fit-row span{display:block;font-size:.78rem;letter-spacing:.06em;color:var(--seal);font-weight:700}
.fit-row.not span{color:var(--muted)}

/* แถบบน · ท้ายเว็บ · กล่องราคา: พื้นเบจเดียวกับหน้า แบ่งด้วยเส้น */
.site-bar{border-bottom:1px solid var(--rule)}
.site-foot{border-top:1px solid var(--rule)}
.site-foot .fine{color:var(--muted);opacity:1}
.buybox{border:1px solid var(--ink)}
.buybox p,.buybox small{opacity:1;color:var(--muted)}
.cover{background:var(--ink);color:var(--paper)}
a{color:var(--ink)}

/* ช่องดวงบท 2 */
table.letters td small{color:var(--muted)}
table.letters th{white-space:nowrap}
.hidlist{margin:.3rem 0 0;padding-left:1.1rem;font-size:.92rem}
.hidlist li{margin:.15rem 0}

/* แจ้งบทที่ล็อก (หน้าสินค้า ?locked=N) */
.locked-note{margin:0 0 1rem;padding:.7rem .9rem;border:1px solid var(--ink);border-radius:8px;background:var(--plate);font-size:.95rem;line-height:1.6}