/* =============================================================
 * 香 · 书橱 —— 书架式主页 + 仿真翻页阅读样式
 * 全端适配：手机 / 平板 / 桌面；窄屏自动切单页翻阅
 * ============================================================= */

@font-face{
  font-family:"ZCOOL QingKe HuangYou";
  src:url("fonts/ZCOOLQingKeHuangYou.ttf") format("truetype");
  font-display:swap;
}

:root{
  --page-w: 460px;
  --page-h: 640px;
  --paper: #f6efe1;
  --paper-edge: #e7dcc4;
  --ink: #2b2620;
  --ink-soft: #6b6051;
  --seal: #b23a2e;
  --gold: #b08d4f;
  --font-kai: "LXGW WenKai","ZCOOL QingKe HuangYou","Noto Serif SC","Songti SC","STSong","SimSun",serif;
  /* 翻页缓动：带轻微 overshoot 的 easeOutBack，翻页末段微微回弹颤动再停住（物理阻尼感） */
  --flip-ease: cubic-bezier(0.34, 1.25, 0.64, 1);
}
*{ box-sizing: border-box; }
html,body{ margin:0; height:100%; }
/* 滚动锁死：overscroll-behavior 阻止 iOS 下拉刷新 / 边缘橡皮筋回弹，
   overflow:hidden 禁止任何滚动条出现（阅读器是全屏沉浸的）
   —— 全局（html/body）生效最稳，局部再补一层 */
html,body{
  overscroll-behavior:none;
  overscroll-behavior-y:none;
  overflow:hidden;
}
body{
  font-family: var(--font-kai);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* 全站中日韩字符统一走霞鹜文楷，杜绝回退 */
h1,h2,h3,p,span,div,button,td,em,i,b,li{ font-family: var(--font-kai); }

/* ============ 书架式主页：整座木书柜，书立层板上 ============ */
#shelf-view{
  /* 同 #reader-view：absolute 填满父容器，统一规避嵌入预览面板里
     100vh/dvh 取到外层窗口高度导致整座木柜偏下的问题 */
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#shelf-view.chalk::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(36% 26% at 22% 28%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%),
    radial-gradient(46% 34% at 78% 62%, rgba(255,255,255,.06), rgba(255,255,255,0) 70%),
    repeating-linear-gradient(118deg, rgba(255,255,255,.035) 0 2px, rgba(255,255,255,0) 2px 11px);
}
#shelf-view.chalk{ background: radial-gradient(120% 100% at 50% 0%, #3c4d42 0%, #2f3d33 58%, #26302a 100%); }
#shelf-view.chalk .case-inner{ background: linear-gradient(180deg, #36473c 0%, #2b382f 100%); }
#shelf-view.gallery{ background: radial-gradient(120% 100% at 50% 0%, #f6f0e3 0%, #eee4cf 60%, #e2d4b6 100%); }
/* transform-origin: center center —— 必须与 #shelf-view 的 flex 居中一致。
   试过 top center：缩放视觉从顶部展开，而外层是 align-items:center 居中，
   两者叠加会把木柜顶出视口被 overflow:hidden 裁掉（实测第一行只剩半截）。
   缩放不改变布局盒尺寸，故锚点须与外层居中方式匹配 ⇒ center center。 */
/* 左右各 20px 安全内边距：外层 #shelf-view 是 overflow:hidden，
   缩放后木柜贴边会被裁掉，留缓冲让四周有呼吸空间。
   ⚠ 此 padding 计入 #room 布局盒 → estimateScale 的 caseW/caseH 需同步计入（见 book.js）。 */
#room{ position: relative; transform-origin: center center; padding: 10px 20px 30px; will-change: transform; }

.case{
  position: relative;
  background:
    repeating-linear-gradient(90deg, rgba(90,55,20,.10) 0 3px, rgba(255,255,255,.03) 3px 8px, rgba(0,0,0,0) 8px 17px),
    linear-gradient(180deg, #cfa468 0%, #a97840 42%, #8a5c2c 100%);
  padding: 18px 20px 0; border-radius: 8px;
  box-shadow:
    0 34px 54px -18px rgba(70,45,15,.55),
    0 10px 20px rgba(70,45,15,.28),
    inset 0 2px 0 rgba(255,255,255,.28);
}
.case-inner{
  background: linear-gradient(180deg, #503d28 0%, #3a2b1a 100%);
  box-shadow: inset 0 8px 20px rgba(0,0,0,.5);
  padding: 0 30px;
}
.shelf-row{ display:flex; align-items:flex-end; justify-content:center; gap: 42px; padding-top: 32px; }

.board{
  height: 16px;
  background: linear-gradient(to bottom, #d3a86b 0%, #b5834a 40%, #8f6130 85%, #6f4a1f 100%);
  box-shadow: 0 4px 7px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
.board:last-of-type{ height: 24px; }

.book-card{
  position: relative; width: 188px; flex: 0 0 auto; cursor: pointer;
  border-radius: 2px 4px 4px 2px; overflow: hidden;
  background: var(--c, #6b4a2c);
  box-shadow: 0 10px 14px -4px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, filter .35s ease;
  transform-origin: bottom center;
}
.shelf-row .book-card{ height: 272px; }
/* PC 端轻量悬停反馈（2026-10-28 用户定稿）：只做「上浮 6px + 柔光阴影」，
   绝不做大图浮层 —— 浮层会把「古籍感」拉低成「淘宝商品图」；
   移动端无 hover（触屏会粘滞误触发），故限定真指针设备才启用。
   transform-origin 已是 bottom center：卡片自底边离架，像书从架上浮起。 */
@media (hover:hover) and (pointer:fine){
  .shelf-row .book-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 16px 22px -10px rgba(0,0,0,.52), 0 2px 6px -2px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.12);
    z-index: 5;
  }
}
.book-card .photo{ position:absolute; inset:0; }
.book-card .photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 整盒入画（contain）：竖版产品图整幅可见，四周留呼吸位
   注意：含上下留白。竖版产品建议改用「重制满幅封面图」以获得与横版一致的满框观感 */
.book-card.fit-contain .photo{ inset:0; background:#14120f; }
.book-card.fit-contain .photo img{
  object-fit:contain;
  padding: 14px 20px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
.book-card .motif{
  position:absolute; inset:0;
  background: radial-gradient(72% 50% at 50% 14%, rgba(255,255,255,.18), rgba(255,255,255,0) 62%);
}
.book-card .frame{ position:absolute; inset:9px; border:1px solid rgba(247,238,216,.42); border-radius:1px; pointer-events:none; }
.book-card.pending .frame{ border-style:dashed; border-color:rgba(247,238,216,.26); }
.book-card.pending .ph-mark{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  display:inline-block; padding:2px 10px;
  color:rgba(247,238,216,.66); font-size:10px; letter-spacing:3px; text-indent:3px;
  border:1px solid rgba(247,238,216,.34); border-radius:999px;
  background:rgba(0,0,0,.18);
}
.book-card .cap{
  position:absolute; left:0; right:0; bottom:0; padding: 42px 14px 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.46) 58%, rgba(0,0,0,.62) 100%);
  text-align:center; color:#f4ecd6;
}
.book-card .cap .nm{ font-family: var(--font-kai); font-size: 30px; letter-spacing: 6px; text-indent:6px; font-weight:400; }
.book-card .cap .rule{ width: 40px; height:1px; background: rgba(214,180,116,.6); margin: 13px auto 12px; }
.book-card .cap .en{ font-family:"Cinzel","Times New Roman",serif; font-size:9px; letter-spacing:3px; color: rgba(244,236,214,.78); text-transform: uppercase; }

.case::before{
  content:""; position:absolute; left:-10px; right:-10px; top:-18px; height:20px;
  background: linear-gradient(to bottom, #e0bb7e 0%, #c2904f 55%, #9c6a35 100%);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 4px 6px rgba(70,45,15,.3), inset 0 1px 0 rgba(255,255,255,.4);
}
.case::after{
  content:""; position:absolute; left:-10px; right:-10px; bottom:-16px; height:18px;
  background: linear-gradient(to bottom, #946231 0%, #74491e 55%, #4f3112 100%);
  border-radius: 0 0 5px 5px;
  box-shadow: 0 16px 20px -4px rgba(70,45,15,.5), inset 0 1px 0 rgba(255,255,255,.16);
}
#room::before{
  content:""; position:absolute; left:50%; top:-40px; transform:translateX(-50%);
  width: 60%; height: 120px; pointer-events:none;
  background: radial-gradient(60% 100% at 50% 0, rgba(255,244,214,.35), rgba(255,244,214,0) 70%);
}
.book-card::before{
  content:""; position:absolute; top:4px; bottom:4px; right:-5px; width:5px;
  background: linear-gradient(to right, rgba(255,255,255,.35), rgba(0,0,0,.22));
  border-radius: 0 3px 3px 0;
}

/* 面包屑：紧凑「主页·线香」 */
#crumb{
  position:absolute; top:15px; left:0; right:0; z-index:60;
  display:flex; justify-content:center; align-items:center; gap:0;
  font-size:13px; letter-spacing:1px;
  font-family: var(--font-kai);
  -webkit-tap-highlight-color:transparent;
}
#crumb .ck{
  color:#6f5f47; cursor:pointer; padding:6px 15px; border-radius:999px;
  transition:color .25s ease, background .25s ease, transform .15s ease;
}
#crumb .ck:hover{ color:#9c3a2c; background:rgba(176,141,79,.14); }
#crumb .ck:active{ transform:scale(.93); background:rgba(176,141,79,.2); }
#crumb .ck:last-child{ color:#3a322a; font-weight:600; background:rgba(176,141,79,.18); cursor:default; }
#crumb .sep{ margin:0; color:#bda882; align-self:center; }

/* ============ chalk 主题 ============ */
#shelf-view.chalk .case{
  background: linear-gradient(180deg, #7c5a36 0%, #5f4326 100%);
  border-radius: 3px; padding: 16px;
  box-shadow: 0 26px 46px -20px rgba(15,25,15,.62), inset 0 1px 0 rgba(255,255,255,.16);
}
#shelf-view.chalk .case::before,
#shelf-view.chalk .case::after{ content:none; }
#shelf-view.chalk #room::before{ background: radial-gradient(60% 100% at 50% 0, rgba(255,244,214,.10), rgba(255,244,214,0) 70%); }
#shelf-view.chalk .book-card{
  background: linear-gradient(160deg, #3a5142 0%, #2c3d33 100%);
  border-radius: 2px;
}
#shelf-view.chalk .book-card .frame{ border-color: rgba(255,255,255,.28); box-shadow: inset 0 0 0 3px rgba(255,255,255,.07); }
#shelf-view.chalk .book-card .motif{ background: radial-gradient(72% 50% at 50% 14%, rgba(255,255,255,.10), rgba(255,255,255,0) 62%); }
#shelf-view.chalk .book-card .cap{ background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,.46) 100%); }
#shelf-view.chalk .book-card .cap .nm{
  color:#f5f2e6; letter-spacing: 5px; text-indent:5px;
  font-family: var(--font-kai);
  text-shadow: 0 0 1px rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.25);
}
#shelf-view.chalk .book-card .cap .en{
  color:#ece8db; letter-spacing: 2px; text-transform: none;
  font-family:"Patrick Hand","Cinzel",serif;
  text-shadow: 0 0 1px rgba(255,255,255,.45);
}
#shelf-view.chalk .book-card .cap .rule{ background: rgba(255,255,255,.5); }

/* ============ 阅读视图 ============ */
/* ============ 阅读视图：沉浸式 + 隐形交互 ============
   设计原则（用户 2026-10-27 定）：
   ① 默认无任何导航栏，只有深色背景 + 木框 + 书本；
   ② 手势优先：左右滑动翻页（触屏本能）；
   ③ 三区热区：左 1/3 上一页 / 右 1/3 下一页 / 中间唤出控制条；
   ④ 返回目录：左上角隐形「〈 目 录」+ 控制条内「归卷」；
   ⑤ 移动端只留极淡页码圆点，桌面端底部极简页码（悬停变亮）；
   ⑥ 桌面端鼠标移到左右边缘浮现透明渐变箭头。 */
#reader-view{
  /* ⚠ 2026-10-29 修正：原先 position:fixed + height:100dvh，
     在 WPS/网盘/微信等内嵌预览面板（iframe）里，100dvh 取到的是
     外层客户端窗口高度而非 iframe 自身高度，导致阅读层被撑高、溢出 iframe：
     书本偏下、底部「〈 返 回」导航被裁到 iframe 之外不可见。
     改用 absolute; inset:0 —— 填满父容器（iframe 视口 / 全屏视口通用），
     不再依赖视口单位取外层高度，彻底规避该问题。 */
  position: absolute; inset:0;
  display:flex; flex-direction:column;
  background: radial-gradient(circle at 50% 30%, #3a342d 0%, #2a2622 70%);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  /* 整个阅读层禁用原生触摸手势：防止 iOS Safari 侧滑返回 / 下拉刷新
     抢走翻页手势（none 会让浏览器把 touchmove 交给我们自己处理） */
  touch-action: none;
  overscroll-behavior: none;      /* 阻断橡皮筋回弹 */
  overscroll-behavior-y: none;
  overflow: hidden;               /* 锁死滚动，杜绝上下抖动 */
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* —— 左上角：隐形目录 —— */
/* 注意：.top-nav 与 .bottom-nav 必须挂在 #reader-view 内部（position:fixed 已为其
   建立绝对定位包含块），否则会在书架页也显示出来。
   字体名 = 本地 @font-face 声明的 'Noto Serif SC'（fonts/notoserifsc.css，OFL 可商用）
   加 #reader-view 前缀：项目有一条全局规则强制 div 走霞鹜文楷
   （h1,h2,h3,p,span,div,button,td,em,i,b,li{font-family:var(--font-kai)}），
   用 ID 前缀可确保这两个元素永远拿到思源宋体，不受其影响。 */
#reader-view .top-nav{
  position:relative; flex:0 0 auto; align-self:flex-start;
  padding:16px 24px 12px;
  z-index:6000;                     /* 同上：须高于 3D 书页层，否则被书页盖住 */
  font-family:'Noto Serif SC',"Songti SC",serif;
  font-size:13px; color:rgba(232,228,217,.4);
  letter-spacing:4px; cursor:pointer;
  transition:color .3s ease; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#reader-view .top-nav:hover{ color:rgba(232,228,217,1); }
#reader-view .top-nav:active{ opacity:.6; }

/* —— 底部居中（常驻·极淡宋体）：返回 + 当前进度 ——
   纯文字，无背景 / 无描边 / 无药丸；一行浮在深空灰背景上。
   整行 pointer-events:none —— 避免挡住底部翻页热区；只有「返回」文字可点。 */
#reader-view .bottom-nav{
  position:relative; flex:0 0 auto;
  padding:12px 24px 18px;
  /* 导航改为上下两行 flex（进入文档流），舞台被夹在中间、书本在其中对称居中，
     上下边距天然相等且与设备无关；z-index 保留以防与 3D 书页层叠时遮挡。 */
  z-index:6000; display:flex; align-items:center; justify-content:center; gap:24px;
  font-family:'Noto Serif SC',"Songti SC",serif;
  font-size:12px; letter-spacing:2px; color:rgba(232,228,217,.3);
  user-select:none; white-space:nowrap;
  pointer-events:none;              /* 整行不拦截，仅文字可点 */
  transition:color .3s ease;
}
#reader-view .bottom-nav:hover{ color:rgba(232,228,217,.62); }
#reader-view .bn-back{
  pointer-events:auto;              /* 仅「返回」可点 */
  cursor:pointer; transition:color .3s ease, opacity .3s ease;
}
#reader-view .bn-back:hover{ color:rgba(232,228,217,.85); }
#reader-view .bn-back:active{ opacity:.5; }

/* —— 右上角（常驻·极淡）：翻页音效开关（SVG 喇叭，开=声波 / 关=斜杠） —— */
#reader-view .sound-toggle{
  position:absolute; top:24px; right:24px; z-index:6000;   /* 同上：须高于 3D 书页层 */
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color:rgba(232,228,217,.4); cursor:pointer; pointer-events:auto; opacity:0;
  transition:color .3s ease, opacity .3s ease;
  -webkit-tap-highlight-color:transparent;
}
#reader-view .sound-toggle:hover{ color:rgba(232,228,217,1); }
#reader-view .sound-toggle:active{ opacity:.6; }
html.fonts-loaded #reader-view .sound-toggle{ opacity:1; }
#reader-view .sound-toggle svg{ width:20px; height:20px; }
#reader-view .sound-toggle .slash{ display:none; }
#reader-view .sound-toggle.muted .wave,
#reader-view .sound-toggle.muted .wave2{ display:none; }
#reader-view .sound-toggle.muted .slash{ display:block; }
@media (max-width: 560px){
  #reader-view .sound-toggle{ top:calc(env(safe-area-inset-top) + 16px); right:16px; }
}

/* —— 大跨度跳转（封面/封底/远距离跳页）的淡出淡入过渡 ——
   作用在 #bookScale（外层缩放层）而非 #book（3D 容器），
   避免干扰翻页的 rotateY 3D 效果。
   缩放值由 fit() 写入 --book-scale，这里只叠加位移，互不覆盖。 */
#bookScale{
  transform:scale(var(--book-scale,1));
  transition:opacity .25s ease, transform .25s ease;
}
#bookScale.jump-fade{
  opacity:0; transform:scale(var(--book-scale,1)) translateY(10px);
}
@media (prefers-reduced-motion: reduce){
  #bookScale{ transition:none; }
}

/* —— 桌面端边缘渐变箭头 —— */
.edge-zone{
  position:absolute; top:0; bottom:0; width:15%; max-width:160px; min-width:64px;
  z-index:55; display:flex; align-items:center;
  opacity:0; transition:opacity .28s ease; pointer-events:none;
}
.edge-zone.left{ left:0; justify-content:flex-start; padding-left:10px;
  background:linear-gradient(to right, rgba(0,0,0,.34), rgba(0,0,0,0)); }
.edge-zone.right{ right:0; justify-content:flex-end; padding-right:10px;
  background:linear-gradient(to left, rgba(0,0,0,.34), rgba(0,0,0,0)); }
.edge-zone.on{ opacity:1; }
.edge-zone.left.on{ pointer-events:auto; }
.edge-zone.right.on{ pointer-events:auto; }
.edge-arrow{
  background:none; border:none; cursor:pointer; color:rgba(240,232,214,.62);
  font-family:var(--font-kai); font-size:34px; line-height:1; padding:6px 10px;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
  transition:color .2s ease, transform .2s ease;
}
.edge-arrow:hover{ color:#e8c98c; }
.edge-zone.left .edge-arrow:hover{ transform:translateX(-3px); }
.edge-zone.right .edge-arrow:hover{ transform:translateX(3px); }

/* —— 字体 FOUT 优化：字体就绪前先隐去依赖字体的元素，就绪后淡入 —— */
#reader-view .top-nav, #reader-view .bottom-nav{
  opacity:0; transition:opacity .5s ease, color .3s ease;
}
html.fonts-loaded #reader-view .top-nav,
html.fonts-loaded #reader-view .bottom-nav{ opacity:1; }

.stage{
  flex:1 1 auto; width:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#bookScale{ transform-origin:center center; }

/* 触屏：隐藏桌面专属元素（边缘箭头 / 底部页码文字，改用极淡圆点） */
@media (hover: none), (pointer: coarse){
  .edge-zone{ display:none; }
}
/* 窄屏：控制条只保留「归卷 + 页码」，其余隐藏——翻页靠手势与热区（用户方案）
   归卷按钮始终可见，是移动端唯一的显式出口 */
@media (max-width: 560px){
  #reader-view .top-nav{ top:calc(env(safe-area-inset-top) + 16px); left:16px; font-size:12px; letter-spacing:3px; }
}

/* ============ 移动端手势与长按防护 ============
   touch-action:none —— 让浏览器把 touchmove 交给我们做翻页。
   否则 iOS Safari / Android Chrome 会抢去滚动手势并抛 pointercancel，
   表现为「拖不动 / 拖到一半卡住」。
   user-select:none + -webkit-touch-callout:none —— 禁止长按选中文字、
   弹出「复制/查找」浮层（iOS 尤其明显）。 */
#book, #book *{
  touch-action: none;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* 控制条 / 目录 / 页码 / 边缘箭头仍需正常点按（manipulation 去掉 300ms 延迟），
   但同样禁长按选中；不设 touch-action:none，避免影响按钮的正常响应 */
.top-nav, .bottom-nav, .bottom-nav *, .edge-zone, .edge-zone *, .sound-toggle, .sound-toggle *{
  touch-action: manipulation;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* 书架卡片：禁长按选中与 iOS 放大镜 */
.book-card, .book-card *{
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* 禁止图片原生拖拽：按住实拍图拖动时，浏览器会触发 dragstart 接管手势，
   导致翻页拖拽失效（尤其「上一页」方向，pointerdown 常落在 <img> 上）。 */
#book img, .book-card img, #shelf-view img{
  -webkit-user-drag: none; -khtml-user-drag: none;
  user-select: none; -webkit-user-select: none;
  pointer-events: none;
}

/* —— 双页摊开（宽屏） —— */
#book{
  position:relative; width: calc(var(--page-w) * 2); height: var(--page-h);
  perspective: 2400px;
}
.book-spine{
  position:absolute; top:0; left: calc(var(--page-w) - 14px);
  width:28px; height:100%;
  background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.34) 50%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%);
  z-index:5000; pointer-events:none;
}
.sheet{
  position:absolute; top:0; left: var(--page-w);
  width: var(--page-w); height: var(--page-h);
  transform-origin: left center; transform-style: preserve-3d;
  transform: rotateY(0deg);
}

/* —— 单页翻阅（窄屏，手机舒适阅读） —— */
#book.single{
  width: var(--page-w); height: var(--page-h);
  perspective: 2200px;
}
#book.single .s-under{
  position:absolute; inset:0;
}
#book.single .s-over{
  position:absolute; inset:0;
  transform-origin: left center; transform-style: preserve-3d;
  transform: rotateY(0deg);
  z-index:10;
}
#book.single .s-face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  overflow:hidden;
}
#book.single .s-b{ transform: rotateY(180deg); }
#book.single .s-under .page,
#book.single .s-face .page{ width:100%; height:100%; }
#book.single .s-over.flipping{ z-index:9999; }
#book.single .s-over.flipping .s-face{
  box-shadow: inset 0 0 30px rgba(120,90,40,.10), -14px 0 34px rgba(0,0,0,.32);
}

.page{
  position:absolute; inset:0; width:100%; height:100%; backface-visibility:hidden;
  background: var(--paper);
  background-image:
     linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,0) 8%),
     linear-gradient(0deg, rgba(0,0,0,.04), rgba(0,0,0,0) 6%);
  box-shadow: inset 0 0 30px rgba(120,90,40,.10);
  overflow:hidden; padding:30px 28px;
}
/* 装订线阴影（立体感魔法）：书页靠书脊的内侧边缘加极细 inset 渐变，
   模拟书页向内弯曲的厚度。右页(.front)的装订线在左缘、左页(.back)在右缘 ——
   双页摊开时两页共同在书脊处「咬合」，形成被翻开到中间的厚书错觉。
   inset 内阴影不受 .page 的 overflow:hidden 裁切，比伪元素外阴影更稳。 */
.page.front{ transform: rotateY(0deg);
  box-shadow: inset 0 0 30px rgba(120,90,40,.10), inset 16px 0 22px -18px rgba(20,12,4,.55); }
.page.back{ transform: rotateY(180deg);
  box-shadow: inset 0 0 30px rgba(120,90,40,.10), inset -16px 0 22px -18px rgba(20,12,4,.55); }
.sheet.flipping{ z-index:9999 !important; will-change: transform; }
/* 翻页期间关掉阴影：旋转平面上外阴影每帧重绘是卡顿头号元凶。
   静态装订线阴影（.page.front/.back 的 inset）不受影响，动画结束自动恢复。 */
.sheet.flipping .page{ box-shadow: none; }
.sheet.flipping .shot{ box-shadow: none; }

/* ⚠ 2026-10-29 修正（上下边距不对称·真因）：
   页面是 460×640 的**固定画布**，整本书只做整体缩放 ⇒ 版心尺寸恒定。
   原先 .shot-wrap 用 flex:1 1 auto 且**没有 min-height:0**：
     ① flex 项的自动最小尺寸 = 内容高度（照片按宽撑开后的高度），
        竖构图照片（848×1280 → 宽 404 撑出高 610）压不下去 → 溢出 .page；
     ② .shot 的 max-height:100% 面对"内容撑出来的高度"属**不确定百分比**，
        规范按 none 处理 ⇒ 高度约束完全失效；
     ③ .page{overflow:hidden} 把溢出裁掉 ⇒ 只剩「上方有留白、下方被切」，
        竖构图照片越竖越明显，线香照片偏横/方所以看不出问题。
   改法：让 .shot-wrap 高度**确定且可压缩**（flex-basis:0 + min-height:0），
   .shot 的 max-height:100% 才能解析成真实高度，照片完整显示、不再裁切。 */
.page-inner{ width:100%; height:100%; display:flex; flex-direction:column; min-height:0; }
.kicker{ font-size:13px; letter-spacing:6px; color:var(--gold); border-bottom:1px solid var(--paper-edge); padding-bottom:8px; margin-bottom:14px; }
.page-inner .kicker.title-kick{ font-family:var(--font-kai); font-size:22px; letter-spacing:3px; padding-bottom:10px; }
h1.title{ font-size:30px; letter-spacing:4px; margin:6px 0 10px; font-weight:600; font-family: var(--font-kai); }
h2.pname{ font-size:24px; letter-spacing:2px; margin:0 0 6px; font-family: var(--font-kai); }
.slogan{ color:var(--seal); font-size:15px; letter-spacing:2px; margin-bottom:14px; }
.body-text{ font-size:14.5px; line-height:2; color:var(--ink-soft); }
.label{ color:var(--gold); font-size:13px; letter-spacing:3px; margin:18px 0 8px; }
/* —— 正文排版：嘉德图录内页气质（2026-10-28 用户定稿）——
   ①首行缩进 2 字 ②行距宽松 ③多段一气读下去 ④段间靠缩进起头不起空行
   ⑤淡墨色非纯黑 ⑥两端对齐字距匀开 */
.prose{ font-family: var(--font-kai); }
.prose p{
  font-size:14.5px; line-height:2.05; color:var(--ink-soft);
  text-indent:2em;            /* ① 首行缩进 2 字 */
  text-align:justify;         /* ⑥ 两端对齐，字距匀开 */
  margin:0;                   /* ④ 段间靠缩进起头，不起空行 */
  letter-spacing:0.5px;
}
.prose p + p{ margin-top:0; }

.seal{ display:inline-block; margin-top:auto; align-self:flex-end; color:#fff; background:var(--seal); font-size:13px; letter-spacing:2px; padding:8px; writing-mode:vertical-rl; border-radius:3px; }

/* —— 封底二维码页「结缘印」（2026-10-28 用户定稿）——
   原本封底为「品名 + 金线 + 免责声明」，现替换为引导进店的微信小程序码。
   设计取向：像一枚落在宣纸上的印记，压住小程序码自带的"现代感"。
   ⚠ 素材本身已去白底转透明（images/qr-weidian.png），故不用 mix-blend-mode。 */
.back-cover-qr{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; background:var(--paper); padding:0 !important; text-align:center;
}
.qr-avatar{
  width:54px; height:54px; border-radius:50%; display:block; margin-bottom:14px;
  /* 极细边框当印章圈，与画册的印章语汇一致 */
  border:1px solid rgba(43,38,32,.14);
}
.qr-title{
  font-family:var(--font-kai); font-size:17px; letter-spacing:5px;
  color:var(--ink); font-weight:normal; margin-bottom:22px;
}
/* 二维码容器：控制尺寸 + 留静区（Quiet Zone）——
   静区不可省：径向小程序码的外圈短线贴边会影响识别。
   ⚠ 底色处理：用 #fdfaf4（比纸略浅的暖白）而非纯白，避免在奶白纸上出现突兀的白色方块；
     同时保证扫码器的对比度（比纸张亮、有边界感）。
   ⚠ mix-blend-mode: multiply —— 素材已去白底转透明，正片叠底可让
     红/黑/绿的边缘与纸色做一次乘法过渡，得到"印泥盖在宣纸上"的质感，
     且不依赖浏览器对 PNG 透明度的处理，兼容性更稳。 */
.qr-wrapper{
  width:250px; height:254px; padding:10px;
  background:#fdfaf4;
  border-radius:3px;
  box-shadow:0 3px 14px rgba(43,38,32,.07);
  margin-bottom:4px;
}
.qr-wrapper img{
  width:100%; height:100%; object-fit:contain; display:block;
  mix-blend-mode:multiply;
}
/* —— 2026-10-29 用户拍板「方案 B」：双码并置 ——
   左 = 微信小程序码（进店）｜右 = 画册永久链接码（扫码直接打开线上画册）。
   方案 A（备选，随时可回退）：只保留单个 .qr-wrapper（250×254，微店码居中），
   金线下方改为两行 —— 第一行「扫描进店 · 选购更多香品」，第二行金色域名。
   回退方式：把 .qr-duo 整块换成 .qr-wrapper 单码，并把 .qr-hint 内容改回 A 版文案即可。
   ⚠ 尺寸取舍：并置后单码 172×176，微信径向小程序码缩到这个尺寸仍可辨认
     （径向码靠外圈短线识别，容错低于普通 QR，勿再缩）。 */
.qr-duo{ display:flex; align-items:flex-start; gap:30px; }
.qr-col{ display:flex; flex-direction:column; align-items:center; }
.qr-duo .qr-wrapper{ width:172px; height:176px; margin-bottom:0; }
.qr-tag{
  margin-top:12px;
  font-family:var(--font-kai); font-size:12px; letter-spacing:2px;
  color:var(--ink-soft); opacity:.9;
}
/* 细金线：与封面的 .line 同色，呼应全书的分隔语汇 */
.qrback-line{ width:104px; height:1px; background:var(--gold); opacity:.55; margin:22px 0 13px; }
.qr-hint{
  font-family:var(--font-kai); font-size:12.5px; letter-spacing:3px;
  color:var(--ink-soft); opacity:.85;
}

.cover{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; height:100%; background:var(--paper); }
.cover .sub{ color:var(--gold); letter-spacing:8px; font-size:15px; margin-bottom:18px; }
.cover .big{ font-size:52px; letter-spacing:14px; margin:6px 0; font-family: var(--font-kai); }
/* 长品名降级档位（量化依据：内容区 404px = 460 − 28×2）
   只降字号与字距，属缩放层适配，不改版式结构 */
.cover .big.nm-mid { font-size:38px; letter-spacing:8px; }
.cover .big.nm-long{ font-size:30px; letter-spacing:5px; }
.cover .big.nm-xl  { font-size:24px; letter-spacing:3px; }
.cover .line{ width:120px; height:1px; background:var(--gold); margin:18px auto; }
.cover .brand{ margin-top:26px; color:var(--ink-soft); letter-spacing:3px; font-size:14px; }

/* flex-basis:0 + min-height:0 ⇒ 容器高度=剩余空间（确定值），图片 max-height:100% 可正确解析 */
.shot-wrap{ flex:1 1 0; min-height:0; display:flex; align-items:center; justify-content:center; margin:6px 0; }
.shot{ max-width:100%; max-height:100%; object-fit:contain; border:1px solid var(--paper-edge); background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.cap{ text-align:center; color:var(--ink-soft); font-size:12.5px; letter-spacing:1px; margin-top:6px; }

.params{ width:100%; border-collapse:collapse; margin-top:8px; }
.params td{ border-bottom:1px dashed var(--paper-edge); padding:9px 4px; font-size:14px; }
.params td.k{ color:var(--gold); width:34%; letter-spacing:2px; }
.params td.v{ color:var(--ink); text-align:right; }
/* 参数页：限制图片高度，确保参数表不被压裁（之前图片 flex:1 吃满整页，表被 flex-shrink 压成 0） */
.params-page{ justify-content:flex-start; }
/* 参数页：限制图片高度，确保参数表不被压裁（之前图片 flex:1 吃满整页，表被 flex-shrink 压成 0）
   basis 用 56% 百分比（容器高确定）⇒ 图片 max-height:100% 同样能正确解析，不会溢出裁切 */
.params-page .shot-wrap{ flex:0 1 56%; min-height:0; max-height:56%; }
.params-page .params{ flex:0 0 auto; }

.toc-item{ display:flex; align-items:baseline; gap:10px; padding:14px 4px; border-bottom:1px solid var(--paper-edge); cursor:pointer; transition:.15s; }
.toc-item:hover{ color:var(--seal); }
.toc-item .no{ color:var(--gold); font-size:15px; }
.toc-item .nm{ font-size:20px; letter-spacing:3px; flex:0 0 auto; }
.toc-item .dots{ flex:1 1 auto; border-bottom:1px dotted var(--paper-edge); transform:translateY(-4px); }
.toc-item .ct{ color:var(--ink-soft); font-size:13px; }

.section{ display:flex; flex-direction:column; justify-content:center; height:100%; }
.section .big2{ font-size:46px; letter-spacing:18px; margin:0 0 16px; font-family: var(--font-kai); }
.section .intro{ font-size:15px; line-height:2.1; color:var(--ink-soft); }

.shot.ph{ width:100%; height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px dashed var(--paper-edge); color:var(--gold); background:#efe7d6; }
.shot.ph .t1{ font-size:18px; letter-spacing:2px; }
.shot.ph .t2{ font-size:12px; color:var(--ink-soft); margin-top:6px; }

/* ============ iOS 丝滑转场 ============ */
#shelf-view, #reader-view{
  transition: opacity .38s ease, transform .42s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
#shelf-view.enter, #reader-view.enter{ opacity:0; transform:scale(.97); }
.book-card{ -webkit-tap-highlight-color:transparent; transition: transform .38s cubic-bezier(.22,1,.36,1), box-shadow .38s ease, filter .2s ease; }
.book-card:active{ filter: brightness(.94); }
@media (hover:none){
  .book-card:active{ transform: scale(.96); filter: brightness(.94); }
}

/* ============ 书柜多端排布 ============ */
@media (max-width: 640px){
  .shelf-row{ gap: 22px; padding-top: 22px; }
  .case-inner{ padding: 0 16px; }
  .case{ padding: 12px 12px 0; }
  .book-card .cap .nm{ font-size:24px; letter-spacing:4px; text-indent:4px; }
  .book-card .cap{ padding: 30px 10px 14px; }
  #crumb{ top:10px; font-size:12px; }
  #crumb .ck{ padding:5px 11px; }
}
@media (max-width: 380px){
  .shelf-row{ gap: 14px; }
  .book-card .cap .nm{ font-size:20px; letter-spacing:3px; text-indent:3px; }
}