/* 書庫（読みもの一覧 site/read/index.html と、トップの「禁書庫」）。背表紙を選ぶと library.js が本を開く */
.rd.lib{max-width:1120px}
.lib-hint{margin:22px 0 0;font-size:13px;color:var(--muted,#8E9592)}
.shelves{display:flex;flex-wrap:wrap;gap:36px 24px;margin:32px 0 0}
.shelf{flex:1 1 auto;min-width:0;max-width:100%}
.shelf h2{display:flex;align-items:baseline;gap:12px;margin:0 0 10px;font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:19px;letter-spacing:.06em;color:#D9C58A}
.shelf h2 .no{font-family:var(--f-mono,'JetBrains Mono',monospace);font-size:11px;letter-spacing:.14em;color:var(--lime,#C6FF2E);border:1px solid rgba(198,255,46,.45);padding:0 6px}
.shelf h2 small{margin-left:auto;font-family:var(--f-body,'Zen Kaku Gothic New',sans-serif);font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted,#8E9592)}
.case{position:relative;overflow-x:auto;overflow-y:hidden;padding:34px 20px 18px;border:1px solid #2B2118;
  background:linear-gradient(#3E2C1C,#24180E) bottom/100% 18px no-repeat,radial-gradient(70% 55% at 50% -8%,rgba(var(--glow),.13),transparent 70%),
    radial-gradient(120% 90% at 50% 0,#17110D,#070505 72%);
  box-shadow:inset 0 26px 30px -18px #000,inset 12px 0 18px -10px #000,inset -12px 0 18px -10px #000;scrollbar-width:thin;scrollbar-color:#4a3828 transparent}
.books{display:flex;align-items:flex-end;gap:3px;list-style:none;margin:0;padding:0 4px;min-width:max-content}
.books li{margin:0}
.book{position:relative;display:flex;flex-direction:column;align-items:center;width:var(--w);height:var(--h);padding:12px 0 9px;border-radius:3px 3px 1px 1px;
  background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(255,255,255,.08) 16%,rgba(255,255,255,.02) 42%,rgba(0,0,0,.3) 84%,rgba(0,0,0,.7)),
    radial-gradient(60% 18% at 30% 72%,rgba(0,0,0,.35),transparent),radial-gradient(50% 12% at 70% 30%,rgba(0,0,0,.3),transparent),
    linear-gradient(180deg,rgba(0,0,0,.45),transparent 12%,transparent 86%,rgba(0,0,0,.55)),
    repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),var(--c);
  color:#C9B577;text-decoration:none;font-family:'Shippori Mincho B1',serif;box-shadow:2px 0 0 rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,color .2s}
.book:hover,.book:focus-visible,.book.out{transform:translateY(-16px);color:#F3E6B8;box-shadow:2px 0 0 rgba(0,0,0,.55),0 18px 22px -8px rgba(0,0,0,.9),0 0 0 1px rgba(var(--glow),.45),0 0 26px rgba(var(--glow),.35)}
.book:hover .st,.book:focus-visible .st,.book.out .st{text-shadow:0 1px 0 rgba(0,0,0,.7),0 0 10px rgba(var(--glow),.75)}
.book>*{order:2}.book .band{order:0}.book .band.b2{order:3}
.book::before{content:'';order:1;flex:none;width:17px;height:14px;margin-top:9px;background:currentColor;opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40' fill='none' stroke='%23000' stroke-width='3.4'%3E%3Cellipse cx='24' cy='22' rx='21' ry='9'/%3E%3Cpath d='M12 19c1-8 6-13 12-13s11 5 12 13'/%3E%3Ccircle cx='24' cy='21' r='5' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40' fill='none' stroke='%23000' stroke-width='3.4'%3E%3Cellipse cx='24' cy='22' rx='21' ry='9'/%3E%3Cpath d='M12 19c1-8 6-13 12-13s11 5 12 13'/%3E%3Ccircle cx='24' cy='21' r='5' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat}
.s-uma{--glow:150,255,90}.s-sci{--glow:198,255,46}.s-jpn{--glow:255,40,50}.s-ufo{--glow:185,95,255}.s-kdn{--glow:255,63,210}
.book .band{flex:none;position:static;display:block;min-height:0;overflow:visible;border-inline:0;width:100%;height:6px;border-top:1px solid rgba(217,197,138,.6);border-bottom:1px solid rgba(217,197,138,.6)}
.book .band.b2{margin-top:8px}
.book .vol{flex:none;margin-top:10px;writing-mode:vertical-rl;font-size:11px;letter-spacing:.06em;color:var(--lime,#C6FF2E)}
.book .st{flex:1;min-height:0;margin-top:10px;writing-mode:vertical-rl;font-size:var(--fs,15px);font-weight:800;line-height:1.05;letter-spacing:.07em;overflow:hidden;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.7)}
.book .tcy{text-combine-upright:all}
.book .call{flex:none;margin-top:8px;padding:1px 2px;background:#A99B76;color:#1A140C;border-radius:1px;font-family:var(--f-mono,'JetBrains Mono',monospace);font-size:8px;line-height:1.3;letter-spacing:-.02em;white-space:nowrap}
.s-sci .book{color:#C4DC86}

/* 開いた本 */
.tome-dlg{padding:0;margin:0;border:0;background:transparent;width:100vw;height:100dvh;max-width:none;max-height:none;overflow:hidden;color:#2A2118}
.tome-dlg::backdrop{background:rgba(6,5,4,.86);backdrop-filter:blur(3px)}
.tome-wrap{position:absolute;inset:0;display:grid;place-items:center;perspective:2400px}
.tome{position:relative;width:min(900px,94vw);height:min(560px,84dvh);transform:translateX(-25%) scale(.9);opacity:0;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .35s}
.tome-dlg.open .tome{transform:none;opacity:1}
.tome .pg{position:absolute;top:0;bottom:0;width:50%;padding:34px 34px 28px;overflow:auto;background:linear-gradient(90deg,rgba(80,55,20,.18),transparent 9%),repeating-linear-gradient(0deg,transparent 0 3px,rgba(120,90,40,.025) 3px 4px),#EEE4CB;box-shadow:0 30px 60px -20px #000}
.tome .pg.r{right:0;border-radius:0 4px 4px 0}
.tome .cover{position:absolute;top:0;bottom:0;left:50%;width:50%;transform-origin:left center;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,.6,.2,1) .15s;z-index:2}
.tome-dlg.open .cover{transform:rotateY(-180deg)}
.cover .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cover .front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px 34px;text-align:center;border-radius:0 5px 5px 0;color:#D6C283;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,255,255,.07) 6%,transparent 14%),radial-gradient(130% 100% at 30% 20%,rgba(255,255,255,.07),rgba(0,0,0,.4)),var(--c);
  box-shadow:inset 0 0 0 10px transparent,inset 0 0 0 11px rgba(217,197,138,.55),inset 0 0 0 15px transparent,inset 0 0 0 16px rgba(217,197,138,.35),0 30px 60px -20px #000}
.cover .front b{text-shadow:0 0 14px rgba(var(--glow,198,255,46),.55);font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:clamp(20px,2.6vw,28px);line-height:1.5;letter-spacing:.06em}
.cover .front small{font-family:var(--f-mono,'JetBrains Mono',monospace);font-size:11px;letter-spacing:.2em;opacity:.8}
.cover .front svg{width:56px;height:46px;opacity:.85}
.cover .back{transform:rotateY(180deg);border-radius:4px 0 0 4px;background:linear-gradient(270deg,rgba(80,55,20,.22),transparent 9%),#EEE4CB;padding:34px 30px 26px;display:flex;flex-direction:column}
.cover .back .ph{flex:1;min-height:0;border:1px solid rgba(60,40,20,.35);padding:6px;background:#E4D8BB}
.cover .back img{width:100%;height:100%;object-fit:cover;filter:sepia(.55) contrast(1.05) brightness(.95)}
.cover .back .noimg{display:grid;place-items:center;height:100%;font-family:'Shippori Mincho B1',serif;color:#8a7650;font-size:14px;letter-spacing:.3em}
.cover .back p{margin:12px 0 0;font-family:var(--f-mono,'JetBrains Mono',monospace);font-size:11px;line-height:1.6;color:#6A5A40;letter-spacing:.06em}
.tome .mini{display:none}
.tome .mini img{width:100%;height:100%;object-fit:cover;filter:sepia(.55) contrast(1.05) brightness(.95)}
.tome .shelfname{margin:0;font-size:12px;letter-spacing:.12em;color:#7A6545}
.tome h3{margin:10px 0 0;font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:clamp(19px,2.3vw,25px);line-height:1.55;color:#221A10}
.tome .m{margin:14px 0 0;padding:8px 0;border-top:1px solid rgba(60,40,20,.25);border-bottom:1px solid rgba(60,40,20,.25);font-size:12.5px;line-height:1.7;color:#5E4E36}
.tome .d{margin:14px 0 0;font-size:15px;line-height:1.95;color:#2A2118}
.tome .act{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.tome .go{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:#221A10;color:#F2E6C4;text-decoration:none;font-weight:700;font-size:15px;border-radius:2px}
.tome .go:hover{background:#000;color:var(--lime,#C6FF2E)}
.tome .shut{padding:10px 14px;background:none;border:1px solid rgba(60,40,20,.45);color:#5E4E36;font:inherit;font-size:14px;cursor:pointer;border-radius:2px}
.tome .shut:hover{border-color:#221A10;color:#221A10}
.tome-x{position:absolute;top:14px;right:16px;z-index:3;width:44px;height:44px;border:1px solid rgba(217,197,138,.4);background:rgba(0,0,0,.4);color:#E2CF8E;font-size:22px;line-height:1;cursor:pointer;border-radius:50%}
@media (max-width:700px){
  .case{padding:30px 14px 18px}
  .tome{width:min(440px,92vw);height:min(680px,84dvh);transform:scale(.92)}
  .tome .pg{left:0;right:0;width:auto;padding:20px 20px 18px;border-radius:4px;background:#EEE4CB}
  .tome .cover{left:0;width:100%;transition:transform .8s cubic-bezier(.3,.6,.2,1) .1s,opacity .3s linear .6s}
  .tome-dlg.open .cover{transform:rotateY(-110deg);opacity:0;pointer-events:none}
  .cover .front{border-radius:5px}
  .cover .back{display:none}
  .tome .mini{display:block;height:min(28dvh,200px);margin:0 0 14px;border:1px solid rgba(60,40,20,.35);padding:4px;background:#E4D8BB}
  .tome .d{font-size:14px;line-height:1.85}
  .tome .act{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){.book,.tome,.tome .cover{transition:none}}

/* トップの「禁書庫」（最新記事の上）。棚は混在、ろうそくの明かりがゆらぐ */
.attic{padding-top:52px}
.attic-lead{margin:-6px 0 18px;font-size:14px;color:var(--muted,#8E9592)}
.bookcase{position:relative;padding:14px;background:linear-gradient(90deg,#140d08,#22170e 8%,#1a120b 50%,#22170e 92%,#140d08);border:1px solid #2e2116;
  box-shadow:0 30px 60px -30px #000,inset 0 0 0 4px #0c0805,inset 0 0 40px rgba(0,0,0,.8);overflow:hidden}
.bookcase .case{display:flex;align-items:flex-end;gap:28px;border-color:#0c0805;--glow:255,150,60}
.bookcase .case+.case{border-top:0}
.bookcase .props{display:flex;align-items:flex-end;gap:22px;flex:none;padding-right:8px}
.bookcase .glow{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(38% 46% at 86% 78%,rgba(255,150,60,.16),transparent 70%),radial-gradient(30% 40% at 78% 28%,rgba(120,255,90,.08),transparent 70%);animation:atGlow 4.2s ease-in-out infinite}
.bookcase .web{position:absolute;top:0;left:0;width:120px;height:120px;z-index:2;pointer-events:none}
.prop{display:block;flex:none}
.prop.pile{display:flex;flex-direction:column;align-items:flex-start}
.prop.pile i{display:block;height:22px;border-radius:2px;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 40%,rgba(0,0,0,.45)),var(--c);
  box-shadow:inset 6px 0 0 rgba(0,0,0,.35),inset -2px 0 0 rgba(217,197,138,.25),0 1px 0 #000}
.prop.pile i:nth-child(2){margin-left:-8px}.prop.pile i:nth-child(3){margin-left:10px}
.prop.jar{width:70px;height:96px;filter:drop-shadow(0 0 14px rgba(120,255,90,.25))}
.prop.jar .eye{animation:atBob 6s ease-in-out infinite;transform-origin:35px 58px}
.prop.skull{width:64px;height:62px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.7))}
.prop.skull .ember{fill:#ff2a1a;animation:atEmber 3.4s ease-in-out infinite}
.prop.candle{width:44px;height:130px}
.prop.candle .flame{transform-origin:22px 34px;animation:atFlick 1.6s ease-in-out infinite alternate;filter:drop-shadow(0 0 10px rgba(255,170,60,.9))}
.attic-more{display:inline-block;margin-top:16px;font-size:14px;font-weight:700;color:var(--lime,#C6FF2E);text-decoration:none;letter-spacing:.04em}
.attic-more:hover{text-decoration:underline}
@keyframes atFlick{0%{transform:scale(1,1) skewX(0)}35%{transform:scale(.94,1.06) skewX(-3deg)}70%{transform:scale(1.04,.95) skewX(2deg)}100%{transform:scale(.97,1.03) skewX(-1deg)}}
@keyframes atGlow{0%,100%{opacity:1}30%{opacity:.82}55%{opacity:.95}80%{opacity:.78}}
@keyframes atEmber{0%,100%{opacity:.15}50%{opacity:.9}}
@keyframes atBob{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(1px,-4px) rotate(14deg)}}
@media (max-width:700px){
  .attic{padding-top:40px}
  .bookcase{padding:8px}
  .bookcase .props{gap:14px}
  .bookcase .web{width:80px;height:80px}
}
@media (prefers-reduced-motion:reduce){.bookcase .glow,.prop.jar .eye,.prop.skull .ember,.prop.candle .flame{animation:none}}
.attic .book .call{display:none}