/*
  陇教云媒 · 正文里的「公式」与「拼音注音」渲染样式
  ----------------------------------------------------------------------
  【本文件是前台（门户 PC / 门户移动端）的版本】

  ⚠ 与后台编辑器里的那一段**必须逐字对应**：
     后台：chaorong-frontend/src/components/CmsEditor/config.ts → CMS_MEDIA_CONTENT_CSS
     前台：本文件（复制到 chaorong-portal/public/vendor/katex/ 与 chaorong-news-h5/static/vendor/katex/）
     草稿预览：public/tinymce/plugins/mathformula|pinyin/plugin.js 里的 .mf-preview / .py-prev 段
  三处任意一处改了，另外两处必须跟着改 —— 否则"后台所编"与"前台所见"就不一样了，
  那正是先生最不满意的"完全没有所见即所得的样子"。

  背景：
   ① 数学 / 化学公式
      <span class="math-tex" data-size="m" data-tex="\frac{3}{4}">
        …… KaTeX 渲染出来的静态 HTML ……
      </span>
      · 公式存的是**渲染好的静态 HTML**，前台**不需要加载 KaTeX 的 JS**，
        只引 katex.min.css（字体与度量）就能正确显示。
      · data-size 决定字号（s 小 / m 标准 / l 大 / xl 特大），编辑在后台可选、可改。
      · data-tex 保留 LaTeX 原式，便于再次编辑。
   ② 拼音注音
      <ruby class="rt-pinyin" data-size="m">甘<rt>gān</rt>肃<rt>sù</rt></ruby>
      浏览器原生支持 ruby；这里只补字号、行高与"整块不拆行"。
*/

/* ===================== 数学 / 化学公式 ===================== */
.math-tex {
  /*
    ⚠ 这里**不要**加 display:inline-block / vertical-align。
      一旦 .math-tex 自己变成 inline-block，浏览器就按"盒子的基线"去对齐，
      而 KaTeX 内容是多层嵌套 span，算出来的基线跟正文文字对不上 ——
      实测表现就是「公式整块飘在文字上方一行」。
      正确做法：保持默认的 inline，让 KaTeX 自己的行内盒参与基线对齐。
  */
  padding: 0 3px;
  /* 行内公式不参与断词，免得分数/根号被拆到两行 */
  white-space: nowrap;
  /* 默认「标准」档：比正文大 30%，一眼能看出是公式，又不至于顶破行距 */
  font-size: 1.3em;
}

/*
  ⚠ 关键一条：让 .katex 继承 .math-tex 的字号。
  KaTeX 自身的 `.katex{font-size:1.21em}` 会再乘一层，
  如果这里是 1.3em，实际就变成 1.3×1.21 ≈ 1.57em —— 尺寸失控、还会把行距顶开。
  覆盖成 1em 之后，公式大小**完全由 .math-tex 的 data-size 说了算**，
  KaTeX 内部符号之间的大小比例仍由它自己的 em 体系保证。
*/
.math-tex .katex {
  font-size: 1em;
}

.math-tex[data-size='s'] {
  font-size: 1.05em;
}

.math-tex[data-size='m'] {
  font-size: 1.3em;
}

.math-tex[data-size='l'] {
  font-size: 1.75em;
}

.math-tex[data-size='xl'] {
  font-size: 2.3em;
}

/* 块级公式（独占一行、居中） */
.math-tex.is-block {
  display: block;
  text-align: center;
  margin: 14px 0;
  white-space: normal;
}

.math-tex .katex-error {
  color: #c0392b;
  background: #fdecea;
  border-radius: 3px;
  padding: 0 3px;
}

/* ===================== 拼音注音 ===================== */
/*
  ⚠ 整块 ruby 必须 `white-space: nowrap`：
    这是「一行里放不下时拼音和汉字对不上」的唯一解法 ——
    ruby 内部整体不拆行，rt 才会逐字对齐到它上面的汉字（小学课本的注音排法）。
*/
ruby.rt-pinyin {
  white-space: nowrap;
  ruby-align: center;
  font-size: 1.05em;
  /* 给上面的拼音留出空间，不然会和上一行贴住 */
  line-height: 2.3;
}

/*
  【2026-09-28 第4条】汉字格子按拼音宽度适配。

  · rb（ruby base）就是每个汉字自己那个格子。它的宽度在**插入注音时**由插件
    按该字拼音的实际渲染宽度算好，写成行内的 min-width（单位 em，跟着字号走）。
  · 这里只需要把汉字在格子里**居中** —— 少了这一条，汉字会靠左，
    看上去就像汉字和拼音错位，而不是格子变宽了。
  · rt 必须 nowrap：拼音一旦折成两行，ruby 的行高会把它压进汉字里。
*/
ruby.rt-pinyin rb {
  text-align: center;
}

ruby.rt-pinyin rt {
  white-space: nowrap;
}

ruby.rt-pinyin rt {
  font-size: 0.6em;
  line-height: 1.55;
  color: #57606a;
  font-weight: 400;
  /* 拼音不继承正文的加粗/倾斜 */
  font-style: normal;
  letter-spacing: 0.02em;
}

ruby.rt-pinyin[data-size='s'] {
  font-size: 0.92em;
}

ruby.rt-pinyin[data-size='m'] {
  font-size: 1.05em;
}

ruby.rt-pinyin[data-size='l'] {
  font-size: 1.35em;
}

ruby.rt-pinyin[data-size='xl'] {
  font-size: 1.7em;
}

/* 有的浏览器把 rt 默认显示成 ruby-text，加一层保险 */
ruby.rt-pinyin rt,
ruby.rt-pinyin rp {
  ruby-align: center;
}

/* ===================== 移动端 ===================== */
@media (max-width: 736px) {
  ruby.rt-pinyin {
    line-height: 2.1;
  }

  ruby.rt-pinyin rt {
    font-size: 0.56em;
  }

  /* 手机上「大 / 特大」会撑出横向滚动条，统一收敛一档 */
  .math-tex[data-size='l'] {
    font-size: 1.5em;
  }

  .math-tex[data-size='xl'] {
    font-size: 1.8em;
  }
}