/* ============================================================
   星云 · 富文本正文公共样式（v1.12.0）
   ------------------------------------------------------------
   为什么单独抽一份，而不是塞进 10 套主题的 style.css：
     1. 改 10 遍 = 10 份重复代码，用户自建主题还会再缺一次；
     2. v1.11.4 已把「主题只放皮肤」定为架构底线，往主题塞公共
        排版规则是倒退。
   作用域只写 .content（经典详情页）和 .post-body（三种版式模板）。
   配色全走 CSS 变量，10 套主题与深色主题自动适配，无需特判。
   ============================================================ */

/* ---------- 段落与标题 ---------- */
.content p,
.post-body p { margin: 0 0 16px; }

.content h2,
.post-body h2 {
  font-size: 22px; margin: 30px 0 14px; font-family: var(--serif);
  letter-spacing: .5px; line-height: 1.5; color: var(--ink);
}
.content h3,
.post-body h3 {
  font-size: 18px; margin: 24px 0 12px; font-family: var(--serif);
  line-height: 1.55; color: var(--ink);
}
.content h4,
.post-body h4 {
  font-size: 16px; margin: 20px 0 10px; font-weight: 700;
  line-height: 1.6; color: var(--ink);
}

/* ---------- 行内元素 ---------- */
.content strong, .post-body strong,
.content b, .post-body b { font-weight: 700; color: var(--ink); }

.content em, .post-body em,
.content i, .post-body i { font-style: italic; }

.content u, .post-body u { text-decoration: underline; text-underline-offset: 3px; }

.content s, .post-body s,
.content strike, .post-body strike,
.content del, .post-body del { text-decoration: line-through; opacity: .72; }

/* 高亮：主题强调色打底，不用黄色刺眼 */
.content mark,
.post-body mark {
  background: var(--gold-soft); color: inherit;
  padding: 1px 4px; border-radius: 2px;
}

.content small, .post-body small { font-size: .86em; opacity: .8; }

/* ---------- 链接（编辑器产出的正文里，正文链接用强调色下划线） ---------- */
.content a:not(.sc-btn),
.post-body a:not(.sc-btn) {
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid var(--gold-line); transition: .18s;
}
.content a:not(.sc-btn):hover,
.post-body a:not(.sc-btn):hover { border-bottom-color: var(--gold); }

/* ---------- 列表：10 套主题原本一条都没有 ---------- */
.content ul,
.content ol,
.post-body ul,
.post-body ol { margin: 0 0 16px; padding-left: 26px; }

.content ul, .post-body ul { list-style: disc; }
.content ol, .post-body ol { list-style: decimal; }
.content li,
.post-body li { margin: 6px 0; line-height: 1.85; }
.content ul ul,
.content ol ol,
.content ul ol,
.content ol ul,
.post-body ul ul,
.post-body ol ol,
.post-body ul ol,
.post-body ol ul { margin: 6px 0 4px; }
/* 列表标记跟着主题色走，暗色主题也看得清 */
.content li::marker,
.post-body li::marker { color: var(--gold); }
/* 紧凑列表：编辑器里用 <ul> 直接接段落的场景不留多余上边距 */
.content p + ul, .content p + ol,
.post-body p + ul, .post-body p + ol { margin-top: -6px; }

/* ---------- 引用（非短代码的普通 blockquote） ---------- */
.content blockquote:not(.sc-quote),
.post-body blockquote:not(.sc-quote) {
  margin: 20px 0; padding: 4px 0 4px 18px;
  border-left: 3px solid var(--gold-line);
  color: var(--ink2); font-style: italic;
  font-family: var(--serif); line-height: 1.9;
}
.content blockquote:not(.sc-quote) p:last-child,
.post-body blockquote:not(.sc-quote) p:last-child { margin-bottom: 0; }

/* ---------- 代码 ---------- */
.content code,
.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em; background: var(--line2); color: var(--ink);
  padding: 2px 6px; border-radius: 3px; word-break: break-word;
}
.content pre,
.post-body pre {
  margin: 20px 0; padding: 16px 18px; overflow-x: auto;
  background: var(--card-hi); border: 1px solid var(--line);
  border-radius: 6px; line-height: 1.7;
  font-size: 13.5px; -webkit-overflow-scrolling: touch;
}
.content pre code,
.post-body pre code {
  background: none; padding: 0; border-radius: 0;
  font-size: inherit; color: var(--ink); white-space: pre;
}

/* ---------- 表格 ---------- */
.content table,
.post-body table {
  width: 100%; margin: 22px 0; border-collapse: collapse;
  font-size: 14.5px; line-height: 1.7;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.content th, .content td,
.post-body th, .post-body td {
  padding: 10px 14px; border: 1px solid var(--line2);
  text-align: left; vertical-align: top;
}
.content th,
.post-body th {
  background: var(--line2); font-weight: 700;
  color: var(--ink); white-space: nowrap;
}
.content tbody tr:nth-child(even),
.post-body tbody tr:nth-child(even) { background: var(--card-hi); }

/* ---------- 分割线 ---------- */
.content hr,
.post-body hr {
  border: 0; border-top: 1px solid var(--line);
  margin: 34px 0;
}

/* ---------- 图片 / 图注 ---------- */
.content img,
.post-body img { max-width: 100%; height: auto; border-radius: 8px; }

.content figure:not(.sc-g-item),
.post-body figure:not(.sc-g-item) { margin: 24px 0; text-align: center; }

.content figure:not(.sc-g-item) img,
.post-body figure:not(.sc-g-item) img {
  border-radius: 10px; box-shadow: var(--shadow-sm);
}
.content figcaption,
.post-body figcaption {
  font-size: .85em; color: var(--muted);
  margin-top: 8px; line-height: 1.7;
}

/* ---------- 视频 ---------- */
.content video,
.post-body video {
  max-width: 100%; border-radius: 8px; margin: 20px 0;
  background: #000;
}

/* ---------- details（非短代码的裸折叠块） ---------- */
.content details:not(.sc-collapse),
.post-body details:not(.sc-collapse) {
  margin: 18px 0; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--card-hi);
}
.content details:not(.sc-collapse) summary,
.post-body details:not(.sc-collapse) summary {
  cursor: pointer; font-weight: 600; color: var(--ink);
}
.content details:not(.sc-collapse) > *:not(summary),
.post-body details:not(.sc-collapse) > *:not(summary) { margin-top: 10px; }

/* ---------- 组件内部段落别再套大间距 ---------- */
.content .sc p:last-child,
.post-body .sc p:last-child { margin-bottom: 0; }
.content .sc > :first-child,
.post-body .sc > :first-child { margin-top: 0; }

/* ---------- 排版官产物：导语 / 宽表容器（v1.12.28） ----------
   这两个类由 layout.py 在入库前打上，前台/编辑器共用同一份样式。
   颜色一律走主题变量，深色主题下自动适配，不写死任何色值。 */
.content p.art-lead,
.post-body p.art-lead,
.ed-body p.art-lead {
  margin: 4px 0 22px; padding-left: 16px;
  border-left: 3px solid var(--gold-line, var(--gold));
  font-size: 17.5px; line-height: 1.85; color: var(--ink2);
  font-family: var(--serif);
}
.art-table-wrap { margin: 22px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.art-table-wrap > table { margin: 0; min-width: 420px; }
.ed-body .art-table-wrap > table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ed-body .art-table-wrap th,
.ed-body .art-table-wrap td { border: 1px solid var(--line2); padding: 9px 12px; text-align: left; }
.ed-body .art-table-wrap th { background: var(--line2); font-weight: 700; }
/* 编辑器里的表格不横向滚：contenteditable 里滚动容器会吃掉光标定位，
   点进第二列就滚动漂移、删字看不到。宁可让表格压缩自适应，也不要那张滚不动的皮。
   真正的窄屏横向滚动留给前台（.content / .post-body）。 */
.ed-body .art-table-wrap { overflow: visible; margin: 20px 0; }
.ed-body .art-table-wrap > table { min-width: 0; table-layout: auto; }
/* 表格格子必须自己把四条边画全。
   后台全局样式 admin.css 里有 `th,td{border-bottom:1px ...}`，它会把
   编辑区里的格子变成「只有下边框」——预览时看着就是一张没有格子的裸文字表。
   这里用 (0,2,1) 的权重显式补回完整边框，并把 nowrap 松开（长单元格要能折行）。 */
.ed-body table { min-width: 0; }
.ed-body th, .ed-body td,
.ed-body .art-table-wrap th, .ed-body .art-table-wrap td {
  border: 1px solid var(--line2, var(--line, #d8d3e0));
  padding: 9px 12px;
  text-align: left;
  white-space: normal;
  vertical-align: top;
}
.ed-body th, .ed-body .art-table-wrap th {
  background: var(--line2, var(--line, #efedf5));
  font-weight: 700;
  color: var(--ink);
}

/* ---------- 窄屏适配 ---------- */
@media (max-width: 620px) {
  .content h2, .post-body h2 { font-size: 20px; margin: 24px 0 12px; }
  .content h3, .post-body h3 { font-size: 17px; margin: 20px 0 10px; }
  .content table, .post-body table {
    display: block; overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .content pre, .post-body pre { font-size: 12.5px; padding: 13px 14px; }
}


/* ============================================================
   编辑器预览区（.ed-body）
   ------------------------------------------------------------
   只给 /admin/write 的 contenteditable 用。同一份文件里追加，
   好处是「编辑器里看到的 = 前台的」，配色也共用同一套变量。
   这里额外补 .sc-* 组件的皮肤——后台不引主题 style.css，
   不补的话提示框/按钮/折叠块在编辑器里是一堆无样式方块。
   ============================================================ */
.ed-body { font-size: 16.5px; line-height: 1.9; color: var(--ink); }
.ed-body:focus { outline: none; }
.ed-body:empty::before {
  content: attr(data-ph); color: var(--muted); pointer-events: none;
}
.ed-body p { margin: 0 0 16px; }
.ed-body h2 {
  font-size: 22px; margin: 30px 0 14px;
  font-family: var(--serif); letter-spacing: .5px; line-height: 1.5;
}
.ed-body h3 { font-size: 18px; margin: 24px 0 12px; font-family: var(--serif); }
.ed-body h4 { font-size: 16px; margin: 20px 0 10px; font-weight: 700; }
.ed-body ul, .ed-body ol { margin: 0 0 16px; padding-left: 26px; }
.ed-body ul { list-style: disc; }
.ed-body ol { list-style: decimal; }
.ed-body li { margin: 6px 0; line-height: 1.85; }
.ed-body li::marker { color: var(--gold); }
.ed-body blockquote:not(.sc-quote) {
  margin: 20px 0; padding: 4px 0 4px 18px;
  border-left: 3px solid var(--gold-line);
  color: var(--ink2); font-style: italic; font-family: var(--serif);
}
.ed-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em; background: var(--line2); padding: 2px 6px; border-radius: 3px;
}
.ed-body pre {
  margin: 20px 0; padding: 16px 18px; overflow-x: auto;
  background: var(--card-hi); border: 1px solid var(--line);
  border-radius: 6px; font-size: 13.5px; line-height: 1.7;
}
.ed-body pre code { background: none; padding: 0; white-space: pre; }
.ed-body table { width: 100%; margin: 22px 0; border-collapse: collapse; font-size: 14.5px; }
.ed-body th, .ed-body td { padding: 10px 14px; border: 1px solid var(--line2); text-align: left; }
.ed-body th { background: var(--line2); font-weight: 700; }
.ed-body hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }
.ed-body img { max-width: 100%; height: auto; border-radius: 8px; }
.ed-body figure:not(.sc-g-item) { margin: 24px 0; text-align: center; }
.ed-body figure:not(.sc-g-item) img { border-radius: 10px; box-shadow: var(--shadow-sm); }
.ed-body figcaption { font-size: .85em; color: var(--muted); margin-top: 8px; }
.ed-body a:not(.sc-btn) {
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid var(--gold-line);
}
.ed-body mark { background: var(--gold-soft); padding: 1px 4px; border-radius: 2px; }
.ed-body details:not(.sc-collapse) {
  margin: 18px 0; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card-hi);
}
.ed-body details:not(.sc-collapse) summary { cursor: pointer; font-weight: 600; }

/* ---- 组件皮肤（与主题 style.css 视觉对齐，但只作用于 .ed-body 内） ---- */
.ed-body .sc { margin: 24px 0; }
.ed-body .sc > :first-child { margin-top: 0; }
.ed-body .sc p:last-child { margin-bottom: 0; }

.ed-body .sc-quote {
  border-left: 2px solid var(--gold); background: var(--gold-soft);
  padding: 20px 24px; font-size: 15px; color: var(--ink2);
  position: relative; border-radius: 0;
}
.ed-body .sc-quote::before {
  content: "❝"; position: absolute; top: -16px; left: 14px;
  font-size: 44px; color: var(--gold); opacity: .32; font-family: var(--serif);
}
.ed-body .sc-quote-body {
  font-style: italic; line-height: 1.9; font-family: var(--serif);
  letter-spacing: .5px;
}
.ed-body .sc-quote-author {
  display: block; margin-top: 12px; font-style: normal;
  font-size: 12.5px; color: var(--gold); font-weight: 600;
  text-align: right; letter-spacing: 1.5px;
}

.ed-body .sc-alert {
  display: flex; gap: 13px; align-items: flex-start;
  border-radius: 2px; padding: 16px 18px;
  border: 1px solid; border-left-width: 3px;
  font-size: 14px; line-height: 1.8;
}
.ed-body .sc-alert-ic { font-size: 17px; font-weight: 700; flex: none; margin-top: 2px; }
.ed-body .sc-alert-c { flex: 1; min-width: 0; }
.ed-body .sc-alert-title { font-weight: 700; margin-bottom: 5px; letter-spacing: 1px; }
/* 编辑器背景深浅不定，四色用低饱和底色 + 主题色描边，两套主题都能读 */
.ed-body .sc-alert-info {
  background: rgba(90,130,220,.10); border-color: rgba(120,160,240,.40);
  color: var(--ink);
}
.ed-body .sc-alert-success {
  background: rgba(79,191,159,.10); border-color: rgba(79,191,159,.40);
  color: var(--ink);
}
.ed-body .sc-alert-warning {
  background: var(--gold-soft); border-color: var(--gold-line); color: var(--ink);
}
.ed-body .sc-alert-danger {
  background: rgba(217,86,79,.10); border-color: rgba(217,86,79,.40);
  color: var(--ink);
}

.ed-body .sc-btn {
  display: inline-block; padding: 11px 26px; border-radius: 2px;
  font-size: 13px; font-weight: 600; letter-spacing: 2.5px;
  transition: .22s; text-decoration: none;
}
.ed-body .sc-btn-primary { background: var(--gold); color: #12161d; }
.ed-body .sc-btn-ghost { background: var(--gold-soft); color: var(--gold); }
.ed-body .sc-btn-outline { border: 1px solid var(--gold); color: var(--gold); }

.ed-body .sc-collapse {
  border: 1px solid var(--line); border-radius: 2px; overflow: hidden;
  background: none; padding: 0;
}
.ed-body .sc-collapse summary {
  cursor: pointer; padding: 14px 18px; font-weight: 600; font-size: 14px;
  background: var(--card-hi); list-style: none; position: relative;
  letter-spacing: 1.2px;
}
.ed-body .sc-collapse summary::-webkit-details-marker { display: none; }
.ed-body .sc-collapse summary::after {
  content: "＋"; position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%); color: var(--gold); font-size: 15px;
}
.ed-body .sc-collapse[open] summary::after { content: "－"; }
.ed-body .sc-collapse-body { padding: 18px; font-size: 14.5px; line-height: 1.9; }

.ed-body .sc-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px; margin: 24px 0;
}
.ed-body .sc-g-item {
  margin: 0; overflow: hidden; border-radius: 2px; border: 1px solid var(--line);
}
.ed-body .sc-g-item img {
  width: 100%; height: 150px; object-fit: cover; border-radius: 0;
  display: block;
}

.ed-body .sc-divider { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }

/* 上传占位符：等图片传完再换成真图 */
.ed-body .ed-ph {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; margin: 4px 0;
  border: 1px dashed var(--gold-line); border-radius: 6px;
  background: var(--gold-soft); color: var(--ink2);
  font-size: 13px; line-height: 1.4;
}
.ed-body .ed-ph::before {
  content: ""; width: 12px; height: 12px; flex: none;
  border: 2px solid var(--gold-line); border-top-color: var(--gold);
  border-radius: 50%; animation: ed-spin .8s linear infinite;
}
@keyframes ed-spin { to { transform: rotate(360deg); } }

/* 选中的图片给个明确边框，方便点图换图/删图 */
.ed-body img.ed-sel {
  outline: 2px solid var(--gold); outline-offset: 2px;
}