/* ============================================================
   微观要闻（南京）网络科技有限公司 — DedeCMS 站点样式
   视觉基准：动漫中心参考站（墨蓝 / 青灰蓝 / 米金）
   包含：公共头部、主视觉、动漫中心、关于我们、页脚
        内页（面包屑 / 列表 / 政策 / 漫画阅读 / 分页）
        旧版组件兼容层
   ============================================================ */

/* ---------- 设计变量 ---------- */
:root {
  /* 新视觉变量 */
  --navy:        #2f5670;   /* 导航选中、主色 */
  --navy-deep:   #274a61;
  --steel:       #55718a;   /* 大标题的青灰蓝 */
  --steel-soft:  #7c96ab;
  --gold:        #c09a45;   /* 登录 / 注册 */
  --gold-deep:   #a8802c;
  --text:        #3f3f3f;
  --muted:       #6f6f6f;
  --bg-soft:     #f1f1f1;   /* 动漫中心背景 */
  --bg-softer:   #f7f8f9;
  --line:        #e8e8e8;
  --container:   1240px;
  --serif:       "Times New Roman", Georgia, "Songti SC", "Noto Serif SC", serif;
  --sans:        "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;

  /* 旧模板兼容变量 */
  --c-bg-1: #eef2f5;
  --c-bg-2: #f4f6f7;
  --c-surface: #ffffff;
  --c-surface-solid: #ffffff;
  --c-ink: #33434f;
  --c-ink-soft: #6f818f;
  --c-ink-faint: #9fb0bd;
  --c-accent: #55718a;
  --c-accent-deep: #2f5670;
  --c-blue: #7c96ab;
  --c-line: #e8e8e8;
  --c-tag: #eef3f7;
  --radius-lg: 4px;
  --radius: 3px;
  --radius-sm: 2px;
  --shadow: 0 10px 30px rgba(38, 60, 80, .10);
  --shadow-hover: 0 20px 38px rgba(38, 60, 80, .14);
}

/* ---------- 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; border: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color .25s ease, background-color .25s ease, opacity .25s ease;
}

::selection { background: #33556d; color: #fff; }
:focus-visible { outline: 2px solid var(--steel-soft); outline-offset: 3px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   顶部导航
   ============================================================ */
.site-header {
  background: #fff;
  border-bottom: 1px solid #ececec;
  position: relative;
  z-index: 60;
}

.header-inner {
  display: flex;
  align-items: center;
  height: 78px;
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.brand-mark {
  width: 40px;
  height: 38px;
  flex: 0 0 auto;
  transition: transform .4s ease;
}
.brand:hover .brand-mark { transform: translateY(-2px); }

.brand-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .5px;
  color: #1e3c53;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-self: stretch;
  margin-left: 46px;
}

.main-nav a {
  display: flex;
  align-items: center;
  padding: 0 15px;
  font-size: 15px;
  color: #454545;
  letter-spacing: .5px;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--navy); background: #f5f8fa; }
.main-nav a.active { background: var(--navy); color: #fff; }
.main-nav a.active:hover { background: var(--navy-deep); color: #fff; }

/* 登录 / 注册 */
.account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--gold);
  letter-spacing: 1px;
  white-space: nowrap;
}
.account a { color: var(--gold); }
.account a:hover { color: var(--gold-deep); }
.account i { font-style: normal; color: #e2d6bb; }

/* 移动端汉堡（纯 CSS） */
.nav-btn { display: none; }
.nav-toggle { display: none; }

/* ============================================================
   主视觉横幅
   ============================================================ */
.hero {
  overflow: hidden;
  background: #dfe6ea;
}

.hero img {
  display: block;
  width: 100%;
  height: clamp(190px, 31.25vw, 460px);
  object-fit: cover;
  object-position: center 58%;
  animation: heroIn 2.4s cubic-bezier(.22,.61,.36,1) both;
  will-change: transform;
}

@keyframes heroIn {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* ============================================================
   大标题 DONG MAN / ABOUT US
   ============================================================ */
.display {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--steel);
  letter-spacing: .06em;
  line-height: 1;
}

.display--lg {
  font-size: clamp(46px, 8.4vw, 106px);
  text-align: center;
}

.display--md {
  font-size: clamp(36px, 5.2vw, 72px);
  letter-spacing: .04em;
}

/* ============================================================
   动漫中心
   ============================================================ */
.comics {
  background: var(--bg-soft);
  padding: 62px 0 104px;
}

.section-bar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
  min-height: 34px;
}

.section-cn {
  font-size: 15px;
  color: #5c5c5c;
  letter-spacing: 3px;
}

.more {
  position: absolute;
  right: 0;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #3a3a3a;
}
.more:hover { color: var(--navy); letter-spacing: 2.5px; }

.comic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 26px;
}

.comic-card {
  list-style: none;
}
.comic-card > a,
.comic-card a.comic-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  padding: 6px 6px 0;
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease, border-color .4s ease;
}

.comic-card .cover {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #ededed;
}

.comic-card .cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .7s cubic-bezier(.2,.7,.3,1), filter .5s ease;
}

.comic-card .caption {
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-size: 13.5px;
  color: #3d3d3d;
  letter-spacing: .5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .3s ease;
}

.comic-card a:hover {
  transform: translateY(-7px);
  border-color: #dcdcdc;
  box-shadow: 0 20px 38px rgba(38,60,80,.14);
}
.comic-card a:hover .cover img { transform: scale(1.05); }
.comic-card a:hover .caption { color: var(--navy); }

/* ============================================================
   关于我们
   ============================================================ */
.about {
  background: #fff;
  padding: 78px 0 88px;
}

.about-inner {
  display: grid;
  grid-template-columns: 43% minmax(0, 1fr);
  gap: 58px;
  align-items: start;
}

.about-media img {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  box-shadow: 0 14px 36px rgba(20,40,60,.18);
}

.about-text { padding-top: 2px; }

.slash {
  font-size: 22px;
  color: #9b9b9b;
  margin: 6px 0 10px 5px;
  line-height: 1;
  font-family: var(--serif);
}

.about-cn {
  font-size: 21px;
  font-weight: 400;
  color: #333;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.desc {
  font-size: 13px;
  line-height: 2.15;
  color: #555;
  letter-spacing: .3px;
  text-align: justify;
  text-justify: inter-ideograph;
  margin-bottom: 8px;
}

.detail {
  text-align: right;
  margin-top: 20px;
  font-size: 12.5px;
  letter-spacing: .5px;
}
.detail a { color: #444; }
.detail a:hover { color: var(--navy); }

/* ============================================================
   页脚
   ============================================================ */
.site-footer {
  position: relative;
  padding: 40px 0 46px;
  color: #c2ccd4;
  background: #1b262f url("../img/footer.jpg") center / cover no-repeat;
  margin-top: 0;
}

.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(23, 33, 42, .76);
}

.site-footer .container { position: relative; z-index: 1; }

.footer-nav {
  text-align: center;
  font-size: 13px;
  color: #dde5eb;
  letter-spacing: .5px;
}
.footer-nav span { color: #dde5eb; }
.footer-nav a { color: #dde5eb; margin: 0 13px; }
.footer-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.footer-info {
  margin-top: 30px;
  text-align: center;
  font-size: 14px;
  line-height: 2.3;
  color: #a7b4be;
  letter-spacing: .3px;
}

.footer-info p { margin: 0; }
.footer-info a:hover { color: #fff; }

/* ============================================================
   内页通用：页头条 / 面包屑
   ============================================================ */
.page-banner {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: #22323d url("../img/hero.jpg") center / cover no-repeat;
}
.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31,48,60,.62), rgba(31,48,60,.78));
}
.page-banner .container {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-banner .p-en {
  font-family: var(--serif);
  font-size: clamp(30px, 4.4vw, 54px);
  color: #dfe8ee;
  letter-spacing: .06em;
  line-height: 1.1;
}
.page-banner .p-cn {
  margin-top: 8px;
  font-size: 15px;
  letter-spacing: 4px;
  color: #cbd8e1;
}

.crumbs {
  background: #fff;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: #8a8a8a;
  letter-spacing: .5px;
}
.crumbs .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.crumbs a { color: #8a8a8a; }
.crumbs a:hover { color: var(--navy); }
.crumbs em { font-style: normal; color: #c9c9c9; }

/* 通用区块 */
.main-wrap-page {
  background: var(--bg-softer);
  padding: 44px 0 90px;
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  padding: 40px 46px;
}

.panel-title {
  font-size: 20px;
  color: #2c3f4e;
  letter-spacing: 2px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

/* ============================================================
   政策 / 协议页（list_article.htm）
   ============================================================ */
.policies-container {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.policies-sidebar {
  background: #fff;
  border: 1px solid var(--line);
  position: sticky;
  top: 24px;
}

.policy-nav-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  letter-spacing: 2px;
  padding: 16px 22px;
}

.policy-nav-item { border-bottom: 1px solid #f2f2f2; }
.policy-nav-item:last-child { border-bottom: 0; }

.policy-nav-link {
  display: block;
  padding: 14px 22px;
  font-size: 13.5px;
  color: #5b5b5b;
  border-left: 3px solid transparent;
  transition: all .25s ease;
}
.policy-nav-link:hover { background: #f5f8fa; color: var(--navy); }
.policy-nav-link.active {
  color: var(--navy);
  font-weight: 600;
  border-left-color: var(--navy);
  background: #f5f8fa;
}

.policies-content {
  background: #fff;
  border: 1px solid var(--line);
  padding: 40px 46px;
  min-height: 420px;
}

.policy-content { display: none; }
.policy-content.active { display: block; animation: fadeUp .35s ease both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.policy-title {
  font-size: 19px;
  font-weight: 600;
  color: #2c3f4e;
  letter-spacing: 1px;
  padding-left: 12px;
  border-left: 3px solid var(--navy);
  margin-bottom: 22px;
}

.policy-section { padding-top: 6px; }
.policy-section p {
  font-size: 13.5px;
  line-height: 2.1;
  color: #555;
  text-align: justify;
  text-justify: inter-ideograph;
  margin-bottom: 14px;
}
.policy-section img { max-width: 100%; height: auto; margin: 10px 0; }

/* ============================================================
   漫画阅读页（article_article.htm）
   ============================================================ */
.reader-head {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 34px 0 30px;
  text-align: center;
}
.reader-title {
  font-size: 26px;
  font-weight: 600;
  color: #2c3f4e;
  letter-spacing: 2px;
}
.reader-meta {
  margin-top: 10px;
  font-size: 12.5px;
  color: #909090;
  letter-spacing: 1px;
}
.reader-meta span { margin: 0 8px; }

.comic-reader {
  background: var(--bg-soft);
  padding: 40px 0 90px;
}
.comic-reader .reader-box {
  max-width: 900px;
  margin: 0 auto;
  padding: 26px 0;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(38,60,80,.08);
}
/* 原始正文：仅作为图片数据源，由翻页脚本接管后隐藏 */
.reader-box .about-content { display: none; }
.reader-box .about-content p { margin: 0; }
.reader-box .about-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 14px;
}

.comic-page-item {
  width: 100%;
  text-align: center;
  position: relative;
  margin-bottom: 12px;
}

/* 封印式遮罩（付费解锁） */
.comic-seal-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(47,86,112,.30) 0%, rgba(47,86,112,.72) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 10;
}
.comic-seal-mask::before {
  content: "待解锁";
  font-size: 42px;
  font-weight: 900;
  color: rgba(255,255,255,.85);
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
  margin-bottom: 12px;
  letter-spacing: 8px;
}
.comic-seal-mask .mask-desc { font-size: 14px; margin-bottom: 20px; opacity: .9; }
.comic-seal-mask .unlock-btn {
  padding: 10px 36px;
  background: #fff;
  color: var(--navy);
  border: none;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 6px 16px rgba(30,50,70,.25);
}
.comic-seal-mask .unlock-btn:hover { background: #eef3f6; transform: translateY(-1px); }

/* 支付弹窗 */
.comic-pay-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9999;
  padding: 20px;
}
.modal-card {
  width: 360px;
  margin: 10% auto 0;
  background: #fff;
  border-radius: 6px;
  padding: 28px 24px;
  text-align: center;
  position: relative;
  border-top: 4px solid var(--navy);
  animation: modalFadeIn .25s ease;
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.modal-close {
  position: absolute;
  top: 12px; right: 14px;
  font-size: 22px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  width: 24px; height: 24px;
  text-align: center;
  border-radius: 4px;
  transition: background .2s;
}
.modal-close:hover { background: #f5f5f5; color: #666; }
.modal-title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px; }
.modal-price { font-size: 15px; color: #666; margin-bottom: 16px; line-height: 1.7; }
.modal-price strong { color: var(--navy); font-size: 20px; }
.coins-info {
  background: #f2f6f9;
  border: 1px solid #e2ebf1;
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #555;
}
.coins-info b { color: var(--navy); font-weight: 600; }
.coins-info.warn { background: #fff8e6; border-color: #ffe58f; color: #874d00; }
.coins-info.warn b { color: #fa8c16; }
.modal-btn-group { display: flex; gap: 10px; margin-bottom: 12px; }
.modal-btn {
  flex: 1;
  height: 42px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
}
.btn-confirm { background: var(--navy); color: #fff; font-weight: 600; }
.btn-confirm:hover { background: var(--navy-deep); }
.btn-cancel { background: #fff; color: #666; border: 1px solid #eee; }
.btn-cancel:hover { background: #fafafa; color: #333; }
.btn-recharge { background: #fa8c16; color: #fff; }
.btn-recharge:hover { background: #d46b08; }
.loading-text { display: none; color: var(--navy); font-size: 13px; margin-top: 8px; }

/* ============================================================
   漫画翻页阅读器
   ============================================================ */
.reader-box { padding: 0; }
.comic-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  background: #16232e;
  overflow: hidden;
}
.comic-stage > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.comic-lock {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 76px 24px;
  text-align: center;
  color: #fff;
  background: var(--navy);
}
.comic-lock.is-open { display: flex; }
.comic-lock .lock-badge {
  padding: 4px 16px;
  border: 1px solid rgba(255,255,255,.45);
  font-size: 12px;
  letter-spacing: 6px;
  text-indent: 6px;
  margin-bottom: 20px;
}
.comic-lock .lock-title { font-size: 21px; font-weight: 600; margin: 0 0 10px; }
.comic-lock .lock-desc { font-size: 13px; opacity: .72; margin: 0 0 26px; }
.comic-lock .lock-btn {
  padding: 11px 42px;
  background: var(--gold);
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.comic-lock .lock-btn:hover { background: var(--gold-deep); transform: translateY(-1px); }

.comic-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 18px 24px 6px;
}
.comic-control .ctrl-btn {
  min-width: 104px;
  height: 38px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
}
.comic-control .ctrl-btn:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); }
.comic-control .ctrl-btn:disabled { opacity: .4; cursor: not-allowed; }
.page-indicator { min-width: 92px; text-align: center; font-size: 13px; color: var(--muted); }
.page-indicator b { color: var(--navy); font-size: 17px; }
.free-tip {
  margin: 10px 24px 22px;
  padding: 11px 16px;
  background: #fdf6e7;
  border-left: 3px solid var(--gold);
  font-size: 13px;
  color: #8a6a1f;
}
.free-tip b { color: var(--gold-deep); }
.reader-box .pages { margin: 0 0 24px; }

/* ============================================================
   支付弹窗（新版布局，id 与逻辑保持不变）
   ============================================================ */
.modal-card { width: 380px; margin: 8% auto 0; padding: 0; text-align: left; }
.modal-head { padding: 26px 26px 18px; border-bottom: 1px solid var(--line); text-align: center; }
.modal-title { font-size: 19px; color: var(--text); margin-bottom: 6px; }
.modal-sub { font-size: 13px; color: var(--muted); margin: 0; }
.pay-summary { border: 1px solid var(--line); margin: 20px 26px 0; }
.pay-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--muted);
  border-bottom: 1px dashed var(--line);
}
.pay-summary-row:last-child { border-bottom: none; }
.pay-summary-row strong { color: var(--text); font-weight: 600; }
.pay-summary-row strong.hl { color: var(--gold); }
#normalPayBox, #noCoinBox { padding: 18px 26px 26px; }


/* ============================================================
   分页
   ============================================================ */
.pages {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 40px 0 0;
  font-size: 13px;
}
.pages li { list-style: none; }
.pages li a,
.pages li span {
  display: inline-block;
  min-width: 34px;
  height: 34px;
  line-height: 32px;
  padding: 0 10px;
  text-align: center;
  border: 1px solid var(--line);
  background: #fff;
  color: #6b6b6b;
  transition: all .25s ease;
}
.pages li a:hover { border-color: var(--navy); color: var(--navy); }
.pages li.thisclass span,
.pages li.thisclass a {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ============================================================
   旧版组件兼容层（未被重写的模板仍可正常显示）
   ============================================================ */
.bg-decor { display: none; }

.top-nav { padding: 0; }
.top-nav > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 78px;
  padding-top: 0;
  padding-bottom: 0;
  max-width: var(--container);
}
.top-nav .nav-brand-text .cn {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #1e3c53;
  -webkit-text-fill-color: initial;
  background: none;
}
.top-nav .main-nav {
  position: static;
  margin: 0;
  padding: 0;
  max-width: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  flex: 1;
  justify-content: flex-start;
}
.top-nav .main-nav::before,
.top-nav .main-nav::after { display: none; }
.top-nav .nav-deco-bar { display: none; }
.top-nav .nav-menu li a {
  padding: 0 24px;
  font-size: 15px;
  height: 78px;
  line-height: 78px;
  display: block;
  color: #454545;
  letter-spacing: .5px;
  border-radius: 0;
  font-weight: 400;
  transform: none;
}
.top-nav .nav-menu li a:hover { background: #f5f8fa; color: var(--navy); }
.top-nav .nav-menu li.active a {
  background: var(--navy);
  color: #fff;
  box-shadow: none;
  padding: 0 24px;
  transform: none;
}
.top-nav .nav-right {
  margin-left: auto;
  padding-left: 0;
  border-left: 0;
  gap: 10px;
}
.top-nav .login-btn,
.top-nav .reg-btn {
  padding: 0;
  border-radius: 0;
  font-size: 15px;
  color: var(--gold);
  background: none;
}
.top-nav .login-btn:hover,
.top-nav .reg-btn:hover { color: var(--gold-deep); background: none; }
.top-nav .account-sep { color: #e2d6bb; font-style: normal; }

/* 旧 Hero 轮播 */
.about-hero { padding: 0; }
.hero-slider {
  height: clamp(190px, 31.25vw, 460px);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.hero-slide img { object-fit: cover; object-position: center 58%; }
.slider-dots .dot.active { background: #fff; width: 26px; border-radius: 3px; }

/* 旧 about-card */
.about-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 40px 44px;
  backdrop-filter: none;
}
.about-card::before, .about-card::after { display: none; }
.about-label {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 6px;
  margin-bottom: 12px;
}
.about-title {
  font-size: clamp(30px, 4.4vw, 54px);
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--steel);
  background: none;
  -webkit-text-fill-color: initial;
  margin-bottom: 14px;
}
.about-subtitle {
  color: #6f6f6f;
  font-size: 13px;
  line-height: 2.1;
  border-left: 0;
  padding-left: 0;
  max-width: none;
}
.about-body p { font-size: 13px; line-height: 2.1; color: #555; }
.about-body p:first-of-type::first-letter {
  font-size: 36px;
  color: var(--navy);
  margin-top: 2px;
}
.about-keywords { border-top: 1px solid var(--line); }
.keyword { border-radius: 2px; transform: none; background: #f5f8fa; }
.keyword:nth-child(even) { transform: none; }
.keyword::before { color: var(--navy); }
.keyword:hover { background: var(--navy); color: #fff; }
.keyword:hover::before { color: #fff; }

/* 旧作品卡片网格 */
.main-container { padding: 0; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.comic-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.comic-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.comic-card::before { display: none; }
.card-cover { height: 300px; background: #ededed; }
.card-cover::after { display: none; }
.card-badge {
  border-radius: 0;
  background: var(--navy);
  box-shadow: none;
  letter-spacing: 1px;
}
.card-views { border-radius: 0; }
.card-info { padding: 14px 16px 16px; }
.card-title { font-size: 15px; letter-spacing: .5px; }
.card-footer { border-top: 1px solid #f0f0f0; }
.card-author .author-avatar { background: var(--navy); }
.like-btn svg { color: var(--navy); }

.section-header {
  border-bottom: 0;
  padding-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
}
.section-title {
  font-size: 21px;
  font-weight: 400;
  font-family: var(--serif);
  color: var(--steel);
  letter-spacing: .05em;
}
.title-mark { color: var(--navy); }
.more-link:hover { color: var(--navy); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1180px) {
  .brand-name  { font-size: 19px; }
  .main-nav    { margin-left: 26px; }
  .main-nav a  { padding: 0 21px; font-size: 14px; }
  .about-inner { gap: 40px; }
  .top-nav .nav-menu li a { padding: 0 16px; }
}

/* 多栏目站点（本站点顶级栏目较多）窄屏收紧导航 */
@media (max-width: 1440px) {
  .brand-name  { font-size: 18px; }
  .brand-mark  { width: 34px; height: 33px; }
  .main-nav    { margin-left: 18px; }
  .main-nav a  { padding: 0 14px; font-size: 14px; }
  .account     { font-size: 14px; gap: 8px; }
}

@media (max-width: 1279px) {
  .brand-name  { font-size: 16px; }
  .main-nav    { margin-left: 10px; }
  .main-nav a  { padding: 0 10px; }
  .top-nav .nav-menu li a { padding: 0 12px; }
}

@media (max-width: 980px) {
  .comics           { padding: 66px 0 78px; }
  .comic-grid       { gap: 20px; }
  .about            { padding: 60px 0 68px; }
  .about-inner      { grid-template-columns: 1fr; gap: 34px; }
  .about-media      { max-width: 620px; }
  .policies-container { grid-template-columns: 1fr; }
  .policies-sidebar { position: static; }
  .policies-content { padding: 28px 22px; }
  .panel            { padding: 28px 22px; }
  .card-grid        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .header-inner { height: 64px; flex-wrap: wrap; }
  .brand-name   { font-size: 17px; }
  .brand-mark   { width: 32px; height: 31px; }

  .nav-btn {
    order: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    margin-left: 16px;
    cursor: pointer;
  }
  .nav-btn span {
    display: block;
    height: 2px;
    background: var(--navy);
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
  }
  .nav-toggle:checked + .nav-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle:checked + .nav-btn span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked + .nav-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .account { order: 2; margin-left: auto; font-size: 14px; }

  .main-nav {
    display: none;
    order: 10;
    width: 100%;
    margin: 0;
    flex-direction: column;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 16px 24px rgba(20,40,60,.10);
  }
  .nav-toggle:checked ~ .main-nav { display: flex; }
  .main-nav a { height: 50px; padding: 0 8px; font-size: 15px; }
  .main-nav a.active { background: #eef3f6; color: var(--navy); }

  .hero img { height: clamp(170px, 40vw, 300px); }
  .comic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-cn { font-size: 14px; letter-spacing: 2px; }
  .page-banner { height: 160px; }

  /* 旧版头部移动端 */
  .top-nav > .container { height: 64px; flex-wrap: wrap; }
  .top-nav .nav-brand-text .cn { font-size: 17px; }
  .top-nav .main-nav { display: none; order: 10; width: 100%; flex-direction: column; background: #fff; border-top: 1px solid #eee; }
  .top-nav .main-nav.is-open { display: flex; }
  .top-nav .nav-menu li a { height: 50px; line-height: 50px; padding: 0 12px; }
  .top-nav .nav-menu li.active a { padding: 0 12px; }
}

@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .brand-name { font-size: 15px; letter-spacing: 0; }
  .comics { padding: 52px 0 60px; }
  .comic-grid { grid-template-columns: 1fr; gap: 16px; }
  .display--lg { font-size: clamp(38px, 11vw, 58px); }
  .section-bar { margin-top: 10px; }
  .more { font-size: 11px; }
  .about { padding: 46px 0 52px; }
  .desc { font-size: 12.5px; line-height: 1.95; }
  .footer-nav { line-height: 2.2; }
  .footer-nav a { margin: 0 7px; }
  .footer-info { font-size: 11px; line-height: 2.1; }
  .card-grid { grid-template-columns: 1fr; }
  .policies-content { padding: 22px 16px; }
}