/* ==========================================================================
   「原著原文页」—— 一对一直播里把《西游记》原文放大摊在 1:1 舞台上
   （老师 2026-10-16 要求：新建一种页面模板，「原著原文」页，
     把原文放大放在 1:1 的窗口中；背景用祥云纹样**平铺**，不要拉伸；
     整体要"古香古色，有原著书籍的感觉"。）

   ⚠️ 这个文件**课堂页（xiyou_live）和编辑器预览共用一份**，
      所以：① 不许用主题变量（编辑器和课堂的主题不一样，会一个好看一个瞎）
            ② 所有尺寸按 `--s`（舞台边长 px，JS 量的）算百分比，
               小预览和全屏投影的比例才会一致。
   ========================================================================== */

/* 整块舞台：这一页没有"上半画面 / 下半字幕"之分（和音标回忆页一样） */
.xorig{
  position:absolute; inset:0; width:100%; height:100%;
  /* ⛔⛔ 底纹**原尺寸平铺**，不要拉伸（老师 2026-10-09 就明确说过
     「我是说平铺，不要拉伸」，2026-10-16 又强调一次）。
     ⛔ 别再改成 cover / contain / 100% 100% / background-size:100%。 */
  background:url("/static/xiyou/orig_bg.jpg") left top repeat;
  overflow:hidden;
  /* 【2026-10-16 老师要求】字样要"稍微古风一点" → 换**楷体**打头
     （原来第一顺位是宋体）。楷体是手写/抄本的味道，最贴"古书"；
     宋体是刻本字，更像印刷品。列表里按 平台名 → 中文名 排，
     Windows 命中 KaiTi/楷体，macOS 命中 Kaiti SC/STKaiti，
     都落空时退回仿宋/宋体，最后 serif 兜底。 */
  font-family:"Kaiti SC","STKaiti","KaiTi","楷体","Kaiti TC",
              "FangSong","STFangsong","仿宋",
              "Songti SC","STSong","SimSun","Noto Serif CJK SC",serif;
  color:#2b2620;
  /* 底下垫一层"旧纸味"：中心略亮、四周略沉，像被灯打着的一页书 */
  box-shadow:inset 0 0 calc(var(--s,900px) * .12) calc(var(--s,900px) * .04)
             rgba(96,74,42,.18);
}
/* 纸色罩层：让花哨的底纹退到后面去，字才立得住 */
.xorig::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 78% 72% at 50% 46%,
      rgba(255,253,246,.78) 0%, rgba(252,247,236,.72) 58%,
      rgba(243,232,212,.80) 100%);
}

/* ---- 书框：双线（外粗内细），古籍包角的味道 ---- */
.xorig-frame{
  position:absolute;
  left:calc(var(--s,900px) * .042); right:calc(var(--s,900px) * .042);
  top:calc(var(--s,900px) * .042);  bottom:calc(var(--s,900px) * .042);
  border:calc(var(--s,900px) * .0055) solid rgba(122,90,48,.62);
  border-radius:calc(var(--s,900px) * .004);
  box-shadow:
    0 0 0 calc(var(--s,900px) * .004) rgba(255,252,244,.55),  /* 内外线之间留白 */
    0 0 0 calc(var(--s,900px) * .0095) rgba(122,90,48,.30),   /* 内侧细线 */
    0 calc(var(--s,900px) * .012) calc(var(--s,900px) * .03) rgba(74,54,26,.16);
  /* 【2026-10-16 老师要求】字号恒定以后，字多的页会**宽出去** ——
     这时候不缩字号，改成可以**左右拖**着看完。
     所以这里横向可滚、纵向不滚；滚动条外观藏起来（老师不要那根条）。
     ⛔ 别改回 overflow:hidden：那样字多的页会被直接裁掉看不全。 */
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
}
.xorig-frame::-webkit-scrollbar{width:0;height:0}
/* 能拖的时候给个"抓手"光标（JS 会在可滚时挂上 xorig-grabbable） */
.xorig-grabbable .xorig-frame{cursor:grab}
.xorig-grabbing .xorig-frame{cursor:grabbing}
/* 四角小回纹（只用两条伪元素做上下两组，够用了；多了反而乱） */
.xorig-frame::before,.xorig-frame::after{
  content:""; position:absolute; width:calc(var(--s,900px) * .052);
  height:calc(var(--s,900px) * .052);
  border:calc(var(--s,900px) * .006) solid rgba(122,90,48,.42);
  pointer-events:none;
}
.xorig-frame::before{
  left:calc(var(--s,900px) * .016); top:calc(var(--s,900px) * .016);
  border-right:0; border-bottom:0; border-top-left-radius:calc(var(--s,900px) * .012);
}
.xorig-frame::after{
  right:calc(var(--s,900px) * .016); bottom:calc(var(--s,900px) * .016);
  border-left:0; border-top:0; border-bottom-right-radius:calc(var(--s,900px) * .012);
}

/* ---- 正文 ----
   ⛔ 正文**不能用 flex 居中**：竖排元素（writing-mode:vertical-rl）放进 flex
   容器会被当成主轴上的可伸缩项，高度被压扁 → 文字折成一堆短列，
   整段读起来是乱的（2026-10-16 实测踩过这个坑）。
   绝对定位 + translate 居中不参与伸缩计算，尺寸完全由内容决定。 */
.xorig-text{
  /* 竖向从右往左（古籍）；横排靠 .horiz 覆盖 */
  writing-mode:vertical-rl; text-orientation:upright;
  /* 【2026-10-16 老师要求】正文跟右上角的印章（出处）离得太近，要留白。
     改法：**靠右定位**（不再左右居中）——
     竖排的列是**从块的右边往左**排的，固定右边缘就等于把"第一列"
     钉在固定位置；用居中时字一多就往印章那边挤（实测只差 13px）。
     .165s ≈ 让开印章本身（.054+.064）之后再留 3%~4% 的白。
     ⛔ 这个数和 xiyou_orig.js 里 fit() 的 W 是一对，改一个要改另一个。 */
  /* ⛔ position:absolute 不能丢！丢了 right/left 全部失效，
     正文退回正常流，位置全靠运气（transform 还会照样生效，
     看起来"差不多"，其实是错的）。 */
  position:absolute;
  right:calc(var(--s,900px) * .165);
  left:auto; top:50%; transform:translateY(-50%);
  /* ⛔⛔ 竖排里 text-align 管的是"**一列之内**上下怎么对齐"，不是左右。
     这里继承到了直播页 .xy-bot 的 text-align:center，于是**末列**（不满的
     那一列）被垂直居中了 —— 看着就是"最后一行没跟上面齐"。
     古籍一律**顶对齐**（老师 2026-10-16 明确："竖排就上对齐"）。 */
  text-align:start;
  /* 【2026-10-16 老师要求】字号**恒定**：不再"字少就放大、字多就缩小"。
     全站原著页共用这一个系数 `--orig-fs`（由 xiyou_orig.js 读本地设置写入），
     .048 只是没设置时兜底。老师用右栏的"原著页字号"按钮 ± 调整，
     一次调整**所有原著页**一起变。 */
  font-size:calc(var(--s,900px) * var(--orig-fs, .048));
  /* ⛔⛔ 竖排里 line-height / letter-spacing 的分工，跟横排是**反过来的**
     （2026-10-16 在 vertical-rl + text-orientation:upright 下逐字量坐标确认，
     别再凭直觉猜；单位都是"字号 × 系数"）：
       · line-height    → **列宽**，也就是列与列的间距（水平方向）= 1.42em
       · letter-spacing → **列内**上下两字的间距（垂直方向）      = 1.02em
     踩过的坑：把这两个当横排写反了（line-height:.02 当字距、
     letter-spacing:.22em 当列距）→ 列贴死、字撑开，整段看着像横排乱码。
     这两个值必须和 xiyou_orig.js 里的 LH / LS 常量、
     以及下面界行的 1.42em 周期一起改，改一个就要改全部。 */
  line-height:1.42;                           /* 列宽（列与列的间距）= 1.42em */
  letter-spacing:.02em;                       /* 列内字距（同列上下两字） */
  /* ⛔ 尺寸完全交给 JS（见 xiyou_orig.js 的 fit）：竖排时宽度是
     `max-content`、高度固定，横排反过来。这里**不能**再压 max-width/
     max-height —— 会把 JS 量好的尺寸截断，导致文字溢出被裁。 */
  max-width:none; max-height:none;
  font-weight:500;
  /* 界行：每列右边一条淡褐细线（古籍的"界栏"）。
     重复周期必须 = 列宽 = 「字号 × line-height」= 1.42em；右对齐，
     文字从右边缘起排，线才不会跟字错开。
     ⛔ 周期**不写死**：由 xiyou_orig.js 量出真实列宽写进 --cw
     （不同字号/不同文本量出来的列宽并不一样，写死必然错位）。
     1.42em 只是没量到时的兜底值。 */
  background-image:repeating-linear-gradient(to left,
    rgba(140,106,62,.26) 0, rgba(140,106,62,.26) 1px,
    transparent 1px, transparent var(--cw, 1.42em));
  background-position:100% 0; background-repeat:repeat-y;
  text-shadow:0 calc(var(--s,900px) * .0012) 0 rgba(43,38,32,.20);
}
.xorig-text.horiz{
  writing-mode:horizontal-tb; text-orientation:mixed;
  /* 横排退回**居中**：横排是从左往右读的，靠右会让整段看着"悬"在右边。
     （横排也不用让印章 —— 印章在右上角，横排第一行从左上开始。） */
  left:50%; right:auto; transform:translate(-50%,-50%);
  line-height:1.72; letter-spacing:.02em; text-align:justify;
  max-width:none; max-height:none;
  background-image:none;
}
/* 空页提示（编辑器里还没填的时候） */
.xorig-empty{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  color:rgba(122,100,66,.72); letter-spacing:.14em;
  font-size:calc(var(--s,900px) * .026);
}

/* ---- 出处朱印（右上角）---- */
.xorig-seal{
  position:absolute;
  /* 【2026-10-16】整体收小一号、更贴右上角：原来的印章偏大，
     而且占掉了正文最右侧那条"给印章让白"的空间（正文会因此被压小）。
     现在 .054+.064 = 只占右侧 12%，正文还有余量。 */
  right:calc(var(--s,900px) * .054); top:calc(var(--s,900px) * .054);
  min-width:calc(var(--s,900px) * .064);
  padding:calc(var(--s,900px) * .009) calc(var(--s,900px) * .007);
  border-radius:calc(var(--s,900px) * .008);
  background:#a8342a; color:#fff6ef;
  font-size:calc(var(--s,900px) * .023); line-height:1.18;
  font-weight:600;
  box-shadow:0 calc(var(--s,900px) * .003) calc(var(--s,900px) * .008)
             rgba(120,40,30,.35);
  opacity:.94;
  /* 【2026-10-16 老师要求】色块里的字要**上下左右居中**（原来有点歪）。
     歪的根因有两个，都必须治：
       ① 竖排是**从右往左**排的，色块比字宽时整列会贴右边 → 水平不居中；
       ② letter-spacing 会在**最后一个字后面也留一份字距**，
          那份看不见的间隙让整列看起来往上跑了 → 垂直不居中。
     所以：外层用 flex 居中（治①），内层用负 margin 抵掉尾随字距（治②）。 */
  display:flex; align-items:center; justify-content:center;
}
.xorig-seal .seal-tx{
  writing-mode:vertical-rl; text-orientation:upright;
  letter-spacing:.06em; text-align:center;
  /* ⛔ 竖排里 margin-bottom 就是"字的下方" —— 抵掉末字后面那份字距 */
  margin-bottom:-.06em;
}
/* 仿写的那种（文档里标记"仿原著笔法"）用描边印，跟真原著区分开 */
.xorig-seal.rw{
  background:transparent; color:#a8342a;
  border:calc(var(--s,900px) * .004) solid rgba(168,52,42,.72);
  box-shadow:none;
}

/* ---- 编辑端预览用的外层（课堂页不用） ---- */
.xorig-host{position:relative; width:100%; aspect-ratio:1/1; border-radius:10px;
  overflow:hidden; border:1px solid var(--line,#e2d9cb); background:#f7f3ea}