/*!
 * SHBook3D v1.0.0 — 3Dブックの見た目
 * @author SHIROHATO IGUCHI
 * 色・影は .shb に CSS 変数で上書きできる(--shb-bg / --shb-paper / --shb-ui / --shb-ui-line / --shb-shadow)
 */
.shb{
  --shb-bg:#141012; --shb-paper:#f6f1ea; --shb-ui:#efe6dd; --shb-ui-line:rgba(176,146,90,.7);
  --shb-shadow:0 14px 28px rgba(0,0,0,.45);
  position:relative; width:100%; height:100%; overflow:hidden; background:var(--shb-bg);
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
.shb-viewport{position:absolute; inset:0; bottom:64px; touch-action:none; cursor:grab;}
.shb-notoolbar .shb-viewport{bottom:0;}
.shb-viewport:active{cursor:grabbing;}
.shb-scaler{position:absolute; left:0; top:0; transform-origin:0 0;}
/* 影は本全体に1つ(紙ごとに付けると重なって濃くなる) */
.shb-zoomer{transform-origin:0 0; transition:transform .35s ease; filter:drop-shadow(var(--shb-shadow));}
.shb-zoomed .shb-zoomer{transition:none;}
.shb-zoomed .shb-viewport{cursor:move; overflow:hidden;}   /* 拡大中だけ表示範囲で切る(めくり中は紙の立体感を残すため切らない) */
/* 遠近は本に付ける。本自体は preserve-3d にしない(紙の重なり順を z-index で決めるため) */
.shb-book{position:relative; perspective:3200px; transition:transform .7s cubic-bezier(.65,0,.35,1);}

/* 紙: 背(ノド)を軸に回る。見開きは右半分、1ページ表示は全体に置く */
.shb-sheet{position:absolute; top:0; height:100%; transform-style:preserve-3d; transform-origin:0 50%;}
.shb-double .shb-sheet{left:50%; width:50%;}
.shb-single .shb-sheet{left:0; width:100%;}
.shb-sheet.shb-moving{will-change:transform;}
/* 止まっている左ページ: 回転なしの平面に置き直す(見た目は回転時と同じ) */
.shb-double .shb-sheet.shb-left{left:0; transform:none !important;}
.shb-sheet.shb-left .shb-front{visibility:hidden;}
.shb-sheet.shb-left .shb-back{transform:none;}
.shb-face{position:absolute; inset:0; overflow:hidden; background:var(--shb-paper);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;}
.shb-back{transform:rotateY(180deg);}
.shb-page img{-webkit-user-drag:none;}
.shb-page{position:relative; display:block; overflow:hidden; background:var(--shb-paper); box-sizing:border-box; margin:0;}
.shb-blank{background:var(--shb-paper);}

/* 背(ノド)の陰影: 右ページは左端、左ページは右端が暗い */
.shb-double .shb-front::after, .shb-double .shb-back::after{content:""; position:absolute; top:0; bottom:0; width:9%; pointer-events:none;}
.shb-double .shb-front::after{left:0; background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,.06) 40%,transparent);}
.shb-double .shb-back::after{right:0; background:linear-gradient(270deg,rgba(0,0,0,.22),rgba(0,0,0,.06) 40%,transparent);}

/* めくり途中の陰影(角度に応じて JS が opacity を変える) */
.shb-shade{position:absolute; inset:0; pointer-events:none; opacity:0;}
.shb-front .shb-shade{background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 55%,rgba(255,255,255,.08));}
.shb-back .shb-shade{background:linear-gradient(270deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 55%,rgba(255,255,255,.08));}

/* めくっている紙が下のページに落とす影 */
.shb-cast{position:absolute; top:0; bottom:0; width:50%; pointer-events:none; opacity:0; z-index:9999;}
.shb-cast-r{left:50%; background:linear-gradient(90deg,rgba(0,0,0,.45),transparent 60%);}
.shb-cast-l{left:0; background:linear-gradient(270deg,rgba(0,0,0,.45),transparent 60%);}
.shb-single .shb-cast{display:none;}

/* 操作バー */
.shb-toolbar{position:absolute; left:0; right:0; bottom:0; height:64px; display:flex; align-items:center; justify-content:center;
  gap:6px; padding:0 8px calc(env(safe-area-inset-bottom)); color:var(--shb-ui); z-index:2;
  background:linear-gradient(to top, rgba(10,6,8,.72), rgba(10,6,8,.35));}
.shb-btn{appearance:none; background:none; border:1px solid transparent; color:inherit; width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0;}
.shb-btn:hover:not(:disabled){border-color:var(--shb-ui-line);}
.shb-btn:focus-visible{outline:2px solid var(--shb-ui-line); outline-offset:2px;}
.shb-btn:disabled{opacity:.3; cursor:default;}
.shb-zoomed .shb-zoom{border-color:var(--shb-ui-line);}
.shb-counter{min-width:84px; text-align:center; font:14px/1 Georgia,'Times New Roman',serif; letter-spacing:.12em;}
.shb-close{margin-left:10px;}
@media (max-width:420px){ .shb-first,.shb-last{display:none;} .shb-btn{width:38px;height:38px;} }
.shb-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
@media (prefers-reduced-motion:reduce){ .shb-book,.shb-zoomer{transition:none;} }