/* ==========================================================================
   News Detail Page — PC (web202606)
   ========================================================================== */

.news-detail-page {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 80px;
  background: #d6cfc4 url('/web/assets/images/newsList/bg.png') center top / cover no-repeat;
  overflow-y: auto;
}

/* Left Decorate */
.news-detail-decorate-left {
  position: absolute;
  left: 0;
  top: 6.5rem;
  width: 2.26rem;
  height: auto;
  pointer-events: none;
  z-index: 1;
}

/* KV Banner */
.news-detail-kv {
  position: relative;
  width: calc(100% + 160px);
  margin: 0 -80px;
}

.news-detail-kv__img {
  display: block;
  width: 100%;
  height: auto;
}

/* KV Heading: News Center 标题 + 面包屑（设计稿 2560 宽，1rem = 100px） */
.news-detail-kv__heading {
  position: absolute;
  left: 3.46rem;
  top: 2.82rem;
  z-index: 2;
}

.news-detail-kv__title {
  font-family: "HYYouYuan 105J", Arial, Helvetica, sans-serif;
  font-size: .44rem;
  line-height: 1.2;
  letter-spacing: -.01rem;
  color: #625d57;
  text-align: center;
  white-space: nowrap;
}

.news-detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin-top: .24rem;
  font-family: 'en1zc', Arial, Helvetica, sans-serif;
  font-size: .22rem;
  line-height: 1.2;
  letter-spacing: -.01rem;
  color: #625d57;
}

/* [gap-fallback:iOS13] .news-detail-breadcrumb */
.news-detail-breadcrumb > * + * { margin-left: .1rem; }
@supports (inset-inline: 0) {
  .news-detail-breadcrumb { gap: .1rem; }
  .news-detail-breadcrumb > * + * { margin-left: 0; }
}

.news-detail-breadcrumb__link {
  color: #625d57;
  text-decoration: none;
  transition: opacity .2s;
}

.news-detail-breadcrumb__link:hover {
  opacity: .8;
  text-decoration: underline;
}

.news-detail-breadcrumb__sep {
  pointer-events: none;
}

[data-lang="ja"] .news-detail-kv__title {
  font-family: "ja2", "HYYouYuan 105J", sans-serif;
}

[data-lang="ja"] .news-detail-breadcrumb {
  font-family: "ja1", sans-serif;
}

/* Header */
.news-detail-header {
  padding-top: .9rem;
  margin-bottom: .4rem;
}

.news-detail-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}

.news-detail-back {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.news-detail-back:hover {
  color: #fff;
}

.news-detail-header__title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .2rem;
}

/* [gap-fallback:iOS13] .news-detail-header__title-wrap */
.news-detail-header__title-wrap > * + * { margin-left: .2rem; }
@supports (inset-inline: 0) {
  .news-detail-header__title-wrap { gap: .2rem; }
  .news-detail-header__title-wrap > * + * { margin-left: 0; }
}

.news-detail-header__title-icon {
  width: .41rem;
  height: .44rem;
  flex-shrink: 0;
  pointer-events: none;
}

.news-detail-header__title {
  font-size: .5rem;
  font-weight: 700;
  color: #d56c1f;
  letter-spacing: -.01rem;
  text-align: center;
  white-space: nowrap;
}

[data-lang="ja"] .news-detail-header__title {
  font-family: "ja2";
}

.news-detail-header__date {
  display: block;
  text-align: center;
  font-size: .24rem;
  color: #625d57;
  font-family: "en1zc";
  margin-top: .44rem;
  letter-spacing: 0;
}

[data-lang="ja"] .news-detail-header__date {
  font-family: "ja1";
}

/* Split Line */
.news-detail-split {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: .2rem auto;
  padding: 0 4rem;
}

.news-detail-split__img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* Article body */
.news-detail-body {
  margin: 0 auto;
  padding: 40px 4rem 100px;
  color: #3d3d3d;
  font-size: .28rem;
  line-height: 1.8;
  font-family: "en1zc";
}

[data-lang="ja"] .news-detail-body {
  font-family: "ja1";
}

.news-detail-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 20px 0;
}

.news-detail-body p {
  margin-bottom: 16px;
}

.news-detail-body strong {
  font-family: "en2", Arial, Helvetica, sans-serif;
}

[data-lang="ja"] .news-detail-body strong {
  font-family: "ja2", sans-serif;
}

/* ==========================================================================
   Rich Text Table (Quill) — 主题化
   说明：Quill 输出的 td / .ql-table-cell-inner 带内联 border-color、
   background-color、color，必须以 !important 覆盖才能统一为主题色。
   ========================================================================== */

/* 容器：复用 Quill 自带的 .ql-table-wrapper，提供横向滚动兜底 */
.news-detail-body .ql-table-wrapper {
  width: 100%;
  margin: 20px 0;
  overflow-x: auto;
}

/* 表格本体：修正 UA 默认 separate + 2px 缝隙 */
.news-detail-body table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: .24rem;
  line-height: 1.6;
  color: #3d3d3d;
}

/* 单元格：品牌色边框 + 米白底（覆盖内联黑色边框与蓝色背景） */
.news-detail-body th,
.news-detail-body td {
  padding: 12px 16px;
  border: 1px solid rgba(61, 54, 47, .25) !important;
  background: rgba(255, 255, 255, .35) !important;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

/* 单元格内层：强制透明背景、继承文字色，防止内联样式遮住 td 底色 */
.news-detail-body td .ql-table-cell-inner,
.news-detail-body th .ql-table-cell-inner {
  background: transparent !important;
  color: inherit !important;
}

/* 格内段落：消除 .news-detail-body p 的 16px 下间距污染，统一文字色 */
.news-detail-body td p,
.news-detail-body th p {
  margin: 0;
  color: inherit !important;
}

/* 表头行：主题深棕底 + 浅色字（Quill 无 thead，表头为 tbody 首行） */
.news-detail-body thead th,
.news-detail-body tbody tr:first-child td {
  background: #625d57 !important;
  color: #f5f0e8;
}

/* ==========================================================================
   Rich Text Elements (Quill) — 标题 / 列表 / 媒体 / 语义元素
   ========================================================================== */

/* 标题：统一字体与分级字号 */
.news-detail-body h1,
.news-detail-body h2,
.news-detail-body h3,
.news-detail-body h4,
.news-detail-body h5,
.news-detail-body h6 {
  margin: 32px 0 16px;
  font-family: "HYYouYuan 105J", Arial, Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1.35;
  color: #2f2923;
}

.news-detail-body h1 { font-size: 32px; }
.news-detail-body h2 { font-size: 24px; }
.news-detail-body h3 { font-size: 22px; }
.news-detail-body h4 { font-size: 20px; }
.news-detail-body h5 { font-size: 18px; }
.news-detail-body h6 { font-size: 16px; }

[data-lang="ja"] .news-detail-body h1,
[data-lang="ja"] .news-detail-body h2,
[data-lang="ja"] .news-detail-body h3,
[data-lang="ja"] .news-detail-body h4,
[data-lang="ja"] .news-detail-body h5,
[data-lang="ja"] .news-detail-body h6 {
  font-family: "ja2", sans-serif;
}

/* 列表：Quill 的 bullet / checkbox 列表同样输出在 <ol> 内，
   符号完全依赖 li[data-list] + .ql-ui:before，必须显式重建 */
.news-detail-body ol,
.news-detail-body ul {
  margin: 0 0 16px;
  padding-left: 1.5em;
}

.news-detail-body li {
  margin-bottom: 8px;
}

.news-detail-body li[data-list] {
  list-style: none;
  position: relative;
  padding-left: 1.5em;
}

.news-detail-body li > .ql-ui::before {
  display: inline-block;
  width: 1.2em;
  margin-left: -1.5em;
  margin-right: .3em;
  text-align: right;
  white-space: nowrap;
}

/* 有序列表：每个 ol 独立计数 */
.news-detail-body ol {
  counter-reset: ql-list;
}

.news-detail-body li[data-list="ordered"] {
  counter-increment: ql-list;
}

.news-detail-body li[data-list="ordered"] > .ql-ui::before {
  content: counter(ql-list, decimal) ". ";
}

/* 无序列表：圆点 */
.news-detail-body li[data-list="bullet"] > .ql-ui::before {
  content: "\2022";
  font-weight: 700;
}

/* 任务列表：勾选 / 未勾选 */
.news-detail-body li[data-list="checked"] > .ql-ui::before {
  content: "\2611";
}

.news-detail-body li[data-list="unchecked"] > .ql-ui::before {
  content: "\2610";
}

/* 嵌套缩进（Quill 共 9 级，按级 +1.5em） */
.news-detail-body li.ql-indent-1 { padding-left: 3em; }
.news-detail-body li.ql-indent-2 { padding-left: 4.5em; }
.news-detail-body li.ql-indent-3 { padding-left: 6em; }
.news-detail-body li.ql-indent-4 { padding-left: 7.5em; }
.news-detail-body li.ql-indent-5 { padding-left: 9em; }
.news-detail-body li.ql-indent-6 { padding-left: 10.5em; }
.news-detail-body li.ql-indent-7 { padding-left: 12em; }
.news-detail-body li.ql-indent-8 { padding-left: 13.5em; }
.news-detail-body li.ql-indent-9 { padding-left: 15em; }

/* 对齐 class 兜底（部分 Quill 配置输出 class 而非内联样式） */
.news-detail-body .ql-align-center { text-align: center; }
.news-detail-body .ql-align-right { text-align: right; }
.news-detail-body .ql-align-justify { text-align: justify; }

/* 媒体：视频 / iframe 16:9 响应式（圆角与 img 一致） */
.news-detail-body video,
.news-detail-body iframe,
.news-detail-body .ql-video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  margin: 20px 0;
  border: 0;
  border-radius: 8px;
  background: #111;
}

/* 链接 */
.news-detail-body a {
  color: #b9651c;
  text-decoration: underline;
  text-underline-offset: .04em;
}

/* 引用块 */
.news-detail-body blockquote {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 3px solid #b9651c;
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, .35);
  color: #625d57;
}

.news-detail-body blockquote p {
  margin-bottom: 8px;
}

.news-detail-body blockquote p:last-child {
  margin-bottom: 0;
}

/* 代码块 */
.news-detail-body pre,
.news-detail-body .ql-code-block-container {
  margin: 0 0 16px;
  padding: 16px;
  border-radius: 8px;
  background: #2f2923;
  color: #f5f0e8;
  font-family: Monaco, "Courier New", monospace;
  font-size: .22rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.news-detail-body code {
  font-family: Monaco, "Courier New", monospace;
}

/* 收尾元素去掉多余下边距 */
.news-detail-body > :last-child {
  margin-bottom: 0;
}

/* Cover */
.news-detail-cover {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0 0 32px;
}

/* Title */
.news-detail-title {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.4;
}

/* Meta */
.news-detail-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* [gap-fallback:iOS13] .news-detail-meta */
.news-detail-meta > * + * { margin-left: 16px; }
@supports (inset-inline: 0) {
  .news-detail-meta { gap: 16px; }
  .news-detail-meta > * + * { margin-left: 0; }
}

.news-detail-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  color: #ffc832;
  border: 1px solid rgba(255, 200, 50, 0.4);
  border-radius: 4px;
}

.news-detail-date {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

/* Content */
.news-detail-content {
  color: rgba(255, 255, 255, 0.85);
}

.news-detail-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 20px 0;
}

.news-detail-content h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 32px 0 16px;
}

.news-detail-content p {
  margin-bottom: 16px;
}

/* Loading & Error */
.news-detail-loading,
.news-detail-error {
  text-align: center;
  padding: 80px 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
}

.news-detail-error[hidden] {
  display: none;
}

.news-detail-error a {
  display: inline-block;
  margin-top: 20px;
  color: #ffc832;
  text-decoration: underline;
}