body {
  background: #fff;
}

.news-detail-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.news-detail-container .container-main {
  flex: 1;
}

.news-detail-container .container-main .main-nav {
  padding: 1.125rem 0;
  background: #F8F8F8;
}

.news-detail-container .container-main .main-nav span,
.news-detail-container .container-main .main-nav a {
  color: #666;
  font-size: .875rem;
  line-height: 1.25rem;
  margin-left: .25rem;
}

.news-detail-container .container-main .main-nav a {
  cursor: pointer;
  transition: color .3s;
}

.news-detail-container .container-main .main-nav a:hover {
  color: var(--main-color);
}

.news-detail-container .container-main .main-content {
  padding: 2.5rem 0;
}

.news-detail-container .container-main .main-content .title {
  color: #333;
  font-size: 1.5rem;
  line-height: 2.125rem;
  text-align: center;
}

.news-detail-container .container-main .main-content .info {
  margin-top: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.news-detail-container .container-main .main-content .info .info-tag {
  color: #909090;
  font-size: 1.125rem;
  line-height: 1.5rem;
  margin: 0 .75rem;
}

.news-detail-container .container-main .main-content .content {
  color: #909090;
  font-size: 1rem;
  line-height: 1.875rem;
  padding: 1.5rem 0;
}

.news-detail-container .container-main .main-content .navigation {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.news-detail-container .container-main .main-content .navigation a {
  display: flex;
  text-decoration: none;
  max-width: 49%;
}

.news-detail-container .container-main .main-content .navigation a .title {
  color: #909090;
  font-size: .875rem;
  line-height: 1.25rem;
}

.news-detail-container .container-main .main-content .navigation a span {
  color: #333;
  font-size: .875rem;
  line-height: 1.25rem;
  margin-left: .5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  transition: color .3s;
}

.news-detail-container .container-main .main-content .navigation a:hover span {
  color: var(--main-color);
}

.news-detail-container .container-main .main-content .navigation a.empty {
  cursor: no-drop;
}

.news-detail-container .container-main .main-content .navigation a.empty span {
  color: #909090;
}

@media screen and (max-width: 767px) {
  .news-detail-container .container-main .main-nav {
    padding: 1rem 0;
  }
  .news-detail-container .container-main .main-content {
    padding: 1.25rem 0;
  }
  .news-detail-container .container-main .main-content .title {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .news-detail-container .container-main .main-content .info {
    margin-top: .5rem;
    padding-bottom: .875rem;
  }
  .news-detail-container .container-main .main-content .info .info-tag {
    font-size: .875rem;
    line-height: 1.25rem;
  }
  .news-detail-container .container-main .main-content .content {
    padding: .875rem 0;
  }
  .news-detail-container .container-main .main-content .navigation {
    padding-top: 1.25rem;
  }
}

/* 核心：隔离前台全局样式，重置为浏览器默认值 */
.ueditor-body {
  all: revert; /* 重置容器自身样式，摆脱全局继承 */
  box-sizing: border-box;
  padding: 15px; /* 可根据需求调整内边距，与编辑时一致 */
  margin: 0 auto; /* 居中显示，不继承前台布局样式 */
}

/* 重置容器内所有元素样式，彻底切断全局影响 */
.ueditor-body * {
  all: revert;
  box-sizing: inherit;
}

/* 复现UEditor编辑时的基础样式，保持一致性 */
.ueditor-body {
  font-family: "微软雅黑", "宋体", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  background-color: #fff; /* 避免继承前台页面背景 */
}

/* 正文内段落样式 */
.ueditor-body p {
  margin: 0 0 1em 0;
  text-indent: 0; /* 清除前台可能设置的首行缩进 */
}

/* 标题样式（与UEditor编辑时一致） */
.ueditor-body h1 { font-size: 24px; margin: 1.5em 0 0.8em; font-weight: bold; }
.ueditor-body h2 { font-size: 20px; margin: 1.2em 0 0.6em; font-weight: bold; }
.ueditor-body h3 { font-size: 18px; margin: 1em 0 0.5em; font-weight: bold; }
.ueditor-body h4, .ueditor-body h5, .ueditor-body h6 { font-size: 16px; margin: 0.8em 0 0.4em; font-weight: bold; }

/* 图片样式（防止前台全局图片样式干扰） */
.ueditor-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em auto; /* 居中显示，与编辑时一致 */
  border: none; /* 清除前台可能的图片边框 */
}

/* 列表、表格、引用等样式复现 */
.ueditor-body ul, .ueditor-body ol {
  margin: 1em 0;
  padding-left: 2em;
  list-style: inherit; /* 恢复默认列表样式，不继承前台自定义样式 */
}

.ueditor-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  border: none;
}

.ueditor-body th, .ueditor-body td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  background: none; /* 清除前台表格背景样式 */
}

.ueditor-body blockquote {
  border-left: 4px solid #ddd;
  padding: 0 1em;
  color: #666;
  font-style: italic;
  margin: 1em 0;
}

/* 代码块样式（与UEditor编辑时一致） */
.ueditor-body pre {
  background: #f5f5f5;
  padding: 1em;
  border-radius: 4px;
  overflow-x: auto;
  margin: 1em 0;
}

.ueditor-body code {
  background: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
}