@charset "utf-8";
/*
 * article-prose.css — CMS 正文（UEditorPlus 输出）的 reset 作用域边界。
 *
 * 背景
 * ----
 * 每个站点的 style.css 顶部是一套面向"站点 UI"的全局 reset：
 *   * { margin: 0; padding: 0; box-sizing: border-box }
 *   h1-h6 { font-size: inherit; font-weight: normal }
 *   li { list-style: none }
 *   a, a:hover, a:focus { text-decoration: none }
 *   img { max-width: 100%; border: 0; vertical-align: top }
 *   table { border-collapse: collapse }
 * 这些都是裸元素选择器，没有任何作用域，因此同样会命中 {$a.cont|raw} 输出的
 * 新闻正文，把 UEditor 写出的语义化 HTML 压平成无层级的纯文本流。
 *
 * 架构
 * ----
 * 本文件用三段式建立边界，而不是逐条和全局 reset 对抗：
 *
 *   1. 边界层（Boundary）：`.article-prose` 内的原生语义元素用一条
 *      `all: revert` 退出作者层，回落到浏览器 UA 样式。这等价于"正文不在
 *      UI reset 的作用域内"，一条声明覆盖全部被 reset 破坏的属性，
 *      而不是为每个属性写一条覆盖规则。
 *   2. 排版层（Typography）：在 UA 默认值之上给出确定的、跨浏览器一致的
 *      正文排版（标题层级、段落间距、列表、链接、引用、表格外观）。
 *   3. 保护层（Guards）：响应式保护（媒体不溢出、宽表格横向滚动）。
 *      这一层与 reset 完全解耦，删掉它也不会让 reset 重新破坏语义。
 *
 * 为什么用 `all: revert` 而不是 @layer / @scope
 * --------------------------------------------
 * - @layer 只改变优先级，reset 仍然会命中正文元素，正文依旧要逐条覆盖。
 * - @scope ... to (.article-prose) 才是真正的作用域裁剪，但需要 Firefox 128+
 *   （2024-07）以上，对本站的浏览器基线偏激进。
 * - `all: revert` 自 Chrome 84 / Firefox 67 / Safari 9.1 起可用，语义正是
 *   "丢弃作者样式，回到 UA 默认"，即正文退出 reset 作用域。
 *
 * 优先级说明
 * ----------
 * 边界规则用 `:where()` 把元素部分的权重归零，整条规则权重固定为 (0,1,0)：
 * 高于全局 reset 的 (0,0,1) / (0,0,0)，低于本文件后面的排版与保护规则
 * (0,1,1)，也低于 x-style.css 里 `.x-news-info2 .container .article-prose`
 * 这类容器级规则 (0,3,0)，容器的外框与配色因此保持不变。
 * 元素上的 UEditor 内联 style 属性权重更高，历史正文的内联样式不受影响。
 *
 * 加载顺序：extend.css → style.css → x-style.css → 本文件。
 * 三站（cms / cms_en / cms_jp）共用本文件，避免三份实现漂移。
 */

/* ------------------------------------------------------------------ *
 * 1. 边界层：正文语义元素退出站点 UI reset 的作用域
 * ------------------------------------------------------------------ */
.article-prose :where(
    h1, h2, h3, h4, h5, h6,
    p, blockquote, pre, address,
    ul, ol, li, dl, dt, dd,
    a, strong, b, em, i, u, s, del, ins, mark, small, sub, sup,
    abbr, cite, q, code, kbd, samp, var,
    figure, figcaption, hr,
    table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td,
    img, picture, video, audio, source
  ) {
  all: revert;
  /* 以下两项不属于排版语义，是站点级的交互/盒模型约定，revert 之后重新写回。 */
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ------------------------------------------------------------------ *
 * 2. 排版层：在 UA 默认值之上给出确定的正文排版
 * ------------------------------------------------------------------ */
.article-prose {
  line-height: 1.8;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* 标题层级：字号与字重不再继承正文值 */
.article-prose h1,
.article-prose h2,
.article-prose h3,
.article-prose h4,
.article-prose h5,
.article-prose h6 {
  margin: 1.6em 0 0.6em;
  font-weight: 700;
  line-height: 1.35;
}
.article-prose h1 {
  font-size: 1.75em;
}
.article-prose h2 {
  font-size: 1.5em;
}
.article-prose h3 {
  font-size: 1.28em;
}
.article-prose h4 {
  font-size: 1.12em;
}
.article-prose h5 {
  font-size: 1em;
}
.article-prose h6 {
  font-size: 0.92em;
}

/* 段落 */
.article-prose p {
  margin: 0 0 1em;
}

/* 列表：ul 与 ol 的 marker 必须区分 */
.article-prose ul,
.article-prose ol {
  margin: 0 0 1em;
  padding-left: 1.6em;
}
.article-prose ul {
  list-style: disc outside;
}
.article-prose ol {
  list-style: decimal outside;
}
.article-prose ul ul {
  list-style-type: circle;
}
.article-prose ul ul ul {
  list-style-type: square;
}
.article-prose ol ol {
  list-style-type: lower-alpha;
}
.article-prose ol ol ol {
  list-style-type: lower-roman;
}
.article-prose li {
  margin: 0.25em 0;
}
.article-prose ul ul,
.article-prose ul ol,
.article-prose ol ul,
.article-prose ol ol {
  margin-bottom: 0;
}
/* UEditor 常把列表项内容再包一层 <p>，避免叠加段落间距 */
.article-prose li > p {
  margin: 0;
}
.article-prose li > p + p {
  margin-top: 0.5em;
}

/* 定义列表 */
.article-prose dl {
  margin: 0 0 1em;
}
.article-prose dt {
  font-weight: 700;
}
.article-prose dd {
  margin: 0 0 0.5em 1.6em;
}

/* 链接：可识别的交互样式 */
.article-prose a {
  color: #154693;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.2s ease;
}
.article-prose a:hover,
.article-prose a:focus {
  color: #0f3268;
  text-decoration: underline;
}

/* 强调 */
.article-prose strong,
.article-prose b {
  font-weight: 700;
}
.article-prose em,
.article-prose i,
.article-prose cite {
  font-style: italic;
}

/* 引用 */
.article-prose blockquote {
  margin: 1.2em 0;
  padding: 0.6em 1em;
  border-left: 4px solid #154693;
  background: #f5f8fc;
  color: #444;
}
.article-prose blockquote > :last-child {
  margin-bottom: 0;
}

/* 代码 */
.article-prose code,
.article-prose kbd,
.article-prose samp {
  padding: 0.15em 0.35em;
  border-radius: 3px;
  background: #f2f4f7;
  font-size: 0.9em;
}
.article-prose pre {
  margin: 1.2em 0;
  padding: 1em;
  border-radius: 4px;
  background: #f2f4f7;
  overflow-x: auto;
}
.article-prose pre code {
  padding: 0;
  background: none;
  font-size: 1em;
}

/* 分隔线 */
.article-prose hr {
  margin: 1.6em 0;
  border: 0;
  border-top: 1px solid #e6e6e6;
}

/* 表格外观 */
.article-prose th,
.article-prose td {
  padding: 10px 15px;
  border: 1px solid #dbf1ed;
  text-align: left;
  vertical-align: top;
}
.article-prose th {
  background: #f5f8fc;
  font-weight: 700;
}
.article-prose caption {
  padding: 0.4em 0;
  color: #666;
  text-align: left;
}

/* 图注 */
.article-prose figure {
  margin: 1.2em 0;
}
.article-prose figcaption {
  margin-top: 0.5em;
  color: #666;
  font-size: 0.875em;
  text-align: center;
}

/* 首尾元素不额外撑开容器 */
.article-prose > :first-child {
  margin-top: 0;
}
.article-prose > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * 3. 保护层：响应式约束，与 reset 解耦
 * ------------------------------------------------------------------ */

/* 媒体不溢出容器。height 用 !important 是为了压过 UEditor 写在元素上的
 * 内联像素高度（内联样式权重高于任何选择器），否则限宽后图片会被拉变形。
 * 这是仅有的两处 !important，且只作用于正文媒体。 */
.article-prose img,
.article-prose video,
.article-prose audio,
.article-prose iframe,
.article-prose embed,
.article-prose object {
  max-width: 100%;
}
.article-prose img,
.article-prose video {
  height: auto !important;
}
.article-prose img {
  vertical-align: middle;
}

/* 宽表格在容器内横向滚动，而不是把页面撑出横向滚动条。 */
.article-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1.2em 0;
  border-collapse: collapse;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 超长不可断字符串（长 URL、型号串）不撑破容器。 */
.article-prose pre,
.article-prose code {
  overflow-wrap: break-word;
}