/**
 * 富文本正文：TinyMCE 编辑区与前台文章详情共用排版规则。
 * 宽度与后台 CMS 正文编辑框（.cms-main 内容区）一致。
 * 编辑器为白底；前台详情为透明底，沿用站点深蓝卡片背景。
 */
:root {
    --cms-shell-max: 1400px;
    --cms-sidebar-w: 14rem;
    --cms-main-pad-x: 1.4rem;
    --rich-text-canvas-width: calc(min(96vw, var(--cms-shell-max)) - var(--cms-sidebar-w) - (2 * var(--cms-main-pad-x)));
}

@media (max-width: 900px) {
    :root {
        --rich-text-canvas-width: calc(min(96vw, var(--cms-shell-max)) - (2 * var(--cms-main-pad-x)));
    }
}

/* 共用：基础排版（宽度由各自容器约束，避免前台被撑得过宽） */
body.mce-content-body,
.rich-text-canvas {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 12px 15px;
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 仅编辑器 iframe：与 CMS 正文框同宽 */
body.mce-content-body {
    width: 100%;
    max-width: var(--rich-text-canvas-width);
}

/* 仅前台详情：填满卡片内层，不再单独放大 */
.rich-text-canvas {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* 编辑器：白底深字 */
body.mce-content-body {
    min-height: 360px;
    color: #1a2a3a;
    background: #ffffff;
}

/* 前台详情：透明底，由外层 .news-detail-wrap 提供深蓝渐变背景 */
.rich-text-canvas {
    color: #f0f6fc;
    background: transparent;
}

body.mce-content-body p,
.rich-text-canvas p,
body.mce-content-body h1,
.rich-text-canvas h1,
body.mce-content-body h2,
.rich-text-canvas h2,
body.mce-content-body h3,
.rich-text-canvas h3,
body.mce-content-body h4,
.rich-text-canvas h4,
body.mce-content-body h5,
.rich-text-canvas h5,
body.mce-content-body h6,
.rich-text-canvas h6,
body.mce-content-body ul,
.rich-text-canvas ul,
body.mce-content-body ol,
.rich-text-canvas ol,
body.mce-content-body blockquote,
.rich-text-canvas blockquote,
body.mce-content-body figure,
.rich-text-canvas figure,
body.mce-content-body table,
.rich-text-canvas table {
    margin: 0.75em 0;
}

body.mce-content-body ul,
.rich-text-canvas ul,
body.mce-content-body ol,
.rich-text-canvas ol {
    padding-left: 1.6em;
}

body.mce-content-body a {
    color: #0066cc;
    text-decoration: underline;
}

.rich-text-canvas a {
    color: #7ee8ff;
    text-decoration: underline;
}

body.mce-content-body p,
body.mce-content-body li,
body.mce-content-body h1,
body.mce-content-body h2,
body.mce-content-body h3,
body.mce-content-body h4,
body.mce-content-body h5,
body.mce-content-body h6,
body.mce-content-body td,
body.mce-content-body th {
    color: #1a2a3a;
}

.rich-text-canvas p,
.rich-text-canvas li,
.rich-text-canvas h1,
.rich-text-canvas h2,
.rich-text-canvas h3,
.rich-text-canvas h4,
.rich-text-canvas h5,
.rich-text-canvas h6,
.rich-text-canvas td,
.rich-text-canvas th {
    color: #e8f2fc;
}

body.mce-content-body img,
.rich-text-canvas img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-radius: 8px;
    float: none !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 含插图的块：默认居中（覆盖微信粘贴的 text-align:left） */
body.mce-content-body p:has(img),
body.mce-content-body section:has(img),
body.mce-content-body div:has(> img),
.rich-text-canvas p:has(img),
.rich-text-canvas section:has(img),
.rich-text-canvas div:has(> img) {
    text-align: center !important;
}

/* 图注：紧跟插图段落的下一段 */
body.mce-content-body p:has(img) + p,
.rich-text-canvas p:has(img) + p {
    text-align: center !important;
}

body.mce-content-body figure,
.rich-text-canvas figure {
    text-align: center;
}

body.mce-content-body figcaption,
.rich-text-canvas figcaption {
    text-align: center !important;
}

/* 用户/编辑器明确设为左、右对齐的块，仍尊重 */
body.mce-content-body [style*="text-align: left"] img,
body.mce-content-body [style*="text-align:left"] img,
.rich-text-canvas [style*="text-align: left"] img,
.rich-text-canvas [style*="text-align:left"] img {
    margin-left: 0 !important;
    margin-right: auto !important;
}

body.mce-content-body [style*="text-align: right"] img,
body.mce-content-body [style*="text-align:right"] img,
.rich-text-canvas [style*="text-align: right"] img,
.rich-text-canvas [style*="text-align:right"] img {
    margin-left: auto !important;
    margin-right: 0 !important;
}

body.mce-content-body table,
.rich-text-canvas table {
    width: 100%;
    border-collapse: collapse;
}

body.mce-content-body table td,
body.mce-content-body table th {
    border: 1px solid #d0d7de;
    padding: 0.45em 0.6em;
    vertical-align: top;
}

.rich-text-canvas table td,
.rich-text-canvas table th {
    border: 1px solid rgba(0, 210, 255, 0.28);
    padding: 0.45em 0.6em;
    vertical-align: top;
}

body.mce-content-body blockquote {
    border-left: 3px solid #c5d0db;
    padding: 0.35em 0 0.35em 1em;
    color: #4a5568;
}

.rich-text-canvas blockquote {
    border-left: 3px solid rgba(0, 210, 255, 0.45);
    padding: 0.35em 0 0.35em 1em;
    color: #b8d4ec;
}

body.mce-content-body figure,
.rich-text-canvas figure {
    margin: 1em auto;
    max-width: 100%;
}

body.mce-content-body figcaption {
    font-size: 0.9em;
    color: #5a6a7a;
    margin-top: 0.35em;
}

.rich-text-canvas figcaption {
    font-size: 0.9em;
    color: #9ecae8;
    margin-top: 0.35em;
}

/* 编辑器内：保留内联对齐 */
body.mce-content-body [style*="text-align: center"],
body.mce-content-body [style*="text-align:center"] {
    text-align: center;
}
body.mce-content-body [style*="text-align: right"],
body.mce-content-body [style*="text-align:right"] {
    text-align: right;
}
body.mce-content-body [style*="text-align: left"],
body.mce-content-body [style*="text-align:left"] {
    text-align: left;
}
body.mce-content-body [style*="text-align: justify"],
body.mce-content-body [style*="text-align:justify"] {
    text-align: justify;
}

/* 前台：由 JS 打标 + 下列规则统一对齐（勿再用 style 属性选择器覆盖图注） */
.rich-text-canvas .rich-align-center {
    text-align: center !important;
    text-indent: 0 !important;
}
.rich-text-canvas .rich-caption {
    text-align: center !important;
    text-indent: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.rich-text-canvas .rich-img-block {
    text-align: center !important;
    text-indent: 0 !important;
}

/* 微信等转载 HTML 常带 width:100% 的 section/div，限制在正文区内 */
.rich-text-canvas section,
.rich-text-canvas div,
.rich-text-canvas p {
    max-width: 100%;
    box-sizing: border-box;
}
.rich-text-canvas table {
    max-width: 100%;
}