/* ═══════════ ⑤ 教材翻页阅读 ═══════════
   深底 + 书页居中，和首页/科目页/AI 页同一套皮肤。

   版式要点（踩过坑，别改回去）：
   图片放在**有确定高度的 flex 容器**里，靠 max-height:100% 约束。
   早先直接放进 grid 单元格，那一行是自动高度 → 百分比约束失效 →
   图片按原始尺寸渲染被裁掉下半部分，就是用户报的「显示不全」。 */

#view-book{
  padding:var(--sb-h) 0 .9rem;
}

/* ── 顶栏 ── */
.bk-head{
  position:relative;z-index:3;flex:none;display:flex;align-items:center;gap:.8rem;
  padding:.55rem var(--page-pad) .35rem;
}
.bk-back,.bk-mode{
  flex:none;display:grid;place-items:center;height:2.35rem;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;
  font-size:.85rem;font-weight:700;transition:background .18s,transform .18s;
}
.bk-back{width:2.35rem;}
.bk-mode{padding:0 1rem;}
.bk-back:active,.bk-mode:active{transform:scale(.94);background:rgba(255,255,255,.18);}
.bk-back .ic{width:1.2rem;height:1.2rem;}
.bk-title-wrap{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.bk-title-wrap b{font-size:1.1rem;font-weight:800;letter-spacing:.02em;}
.bk-title-wrap span{font-size:.74rem;color:rgba(255,255,255,.5);}
.bk-page{
  margin-left:auto;font-family:var(--font-num);font-weight:800;font-size:.95rem;
  color:rgba(255,255,255,.9);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.4rem .9rem;white-space:nowrap;
}
.bk-jump-btn{
  flex:none;height:2.35rem;padding:0 1rem;border-radius:999px;color:#fff;
  font-size:.85rem;font-weight:700;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
.bk-jump-btn:active{background:rgba(255,255,255,.18);}

/* ── 书页舞台 ── */
.bk-stage{
  position:relative;z-index:2;flex:1;min-height:0;
  margin:0 var(--page-pad);
  overflow:hidden;border-radius:1.1rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 0 3rem rgba(0,0,0,.35);
}
/* 一屏 = 一个 flex 容器，高度确定，图片才能靠 max-height 正确缩放 */
.bk-spread{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.55rem;
}
.bk-spread .bk-img{
  display:block;min-width:0;max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:.4rem;
  box-shadow:0 .9rem 2.2rem rgba(0,0,0,.55);
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  will-change:transform;
}
/* 双页：每页最多占一半 */
.bk-spread.two .bk-img{max-width:calc(50% - .35rem);}
.bk-inc{opacity:0;}

/* 左右点击热区 */
.bk-tap{
  position:absolute;top:0;bottom:0;width:15%;z-index:3;
  display:grid;place-items:center;color:#fff;background:none;border:0;cursor:pointer;
  transition:background .18s,opacity .18s;
}
.bk-tap.prev{left:0;border-radius:1.1rem 0 0 1.1rem;}
.bk-tap.next{right:0;border-radius:0 1.1rem 1.1rem 0;}
.bk-tap:hover{background:rgba(255,255,255,.05);}
.bk-tap .ic{width:1.6rem;height:1.6rem;opacity:0;transition:opacity .18s;}
.bk-tap:hover .ic{opacity:.7;}
.bk-tap[disabled]{opacity:.2;cursor:default;}
.bk-tap[disabled] .ic{opacity:0;}
.bk-corner{
  position:absolute;left:50%;bottom:.5rem;transform:translateX(-50%);z-index:4;
  font-family:var(--font-num);font-size:.78rem;font-weight:700;color:rgba(255,255,255,.55);
  background:rgba(0,0,0,.4);border-radius:999px;padding:.25rem .75rem;pointer-events:none;
}

/* ── 底部 ── */
.bk-foot{
  position:relative;z-index:3;flex:none;display:flex;align-items:center;gap:.8rem;
  padding:.6rem var(--page-pad) 0;
}
.bk-nav{
  flex:none;padding:.42rem .95rem;border-radius:999px;font-size:.82rem;font-weight:700;
  color:rgba(255,255,255,.86);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);transition:background .18s;
}
.bk-nav:active{background:rgba(255,255,255,.18);}
.bk-range{
  flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:1.4rem;background:none;
}
.bk-range::-webkit-slider-runnable-track{
  height:.34rem;border-radius:1rem;background:rgba(255,255,255,.16);
}
.bk-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:1.05rem;height:1.05rem;border-radius:50%;
  margin-top:-.36rem;background:linear-gradient(160deg,#5ef0c0,#22b07a);
  box-shadow:0 .2rem .5rem rgba(34,176,122,.5);border:2px solid rgba(255,255,255,.85);
}