/* ==========================================================================
   耀阳电子作品集 · 展示端主题层
   --------------------------------------------------------------------------
   两层结构：
     1) wos-ui.css 提供设计令牌与组件（class 驱动，零依赖）
     2) 本文件只做两件事：① 适老化字号三档  ② 阅读器风格排版覆盖
   字号实现：根元素 --fs-scale 全局缩放。wos-ui 的字号是硬编码 px，
   因此这里把我们用到的组件字号显式重写为 calc(px * var(--fs-scale))。
   ========================================================================== */

/* ---------------- ① 适老化字号三档 ---------------- */

:root {
  --fs-scale: 1;
  /* 正文基准：中档 17px（比常规 Web 大两号） */
  --fs-base: calc(17px * var(--fs-scale));
  --fs-sm: calc(14px * var(--fs-scale));
  --fs-xs: calc(13.5px * var(--fs-scale));
  --fs-lg: calc(19px * var(--fs-scale));
  --fs-h3: calc(22px * var(--fs-scale));
  --fs-h2: calc(26px * var(--fs-scale));
  --fs-h1: calc(32px * var(--fs-scale));
  --tap: 44px; /* 最小点击区 */
  --tap-lg: 52px; /* 主按钮高度 */
}

html[data-fs='medium'] {
  --fs-scale: 1;
}
html[data-fs='large'] {
  --fs-scale: 1.12;
}
html[data-fs='xlarge'] {
  --fs-scale: 1.3;
}

body {
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* 覆盖 wos-ui 的固定字号（只覆盖展示端用到的组件） */
.btn,
.input,
.select,
.textarea,
.field > .label,
.tabs .tab,
.panel-head,
.table th,
.table td,
.badge,
.tag,
.notice,
.empty p,
.pager,
.muted,
.hint {
  font-size: var(--fs-base);
}
.badge,
.tag,
.hint,
.muted,
.m-foot,
.pager {
  font-size: var(--fs-sm);
}

/* 控件尺寸：适老化大点击区 */
.btn {
  min-height: var(--tap);
  padding: 0 calc(18px * var(--fs-scale));
  border-radius: calc(10px * var(--fs-scale));
}
.btn-lg {
  min-height: var(--tap-lg);
  font-size: var(--fs-lg);
  padding: 0 calc(26px * var(--fs-scale));
}
.input,
.select,
.textarea {
  min-height: var(--tap-lg);
  padding: 0 calc(14px * var(--fs-scale));
  border-radius: calc(10px * var(--fs-scale));
}
.textarea {
  padding: calc(12px * var(--fs-scale));
  line-height: 1.7;
}
.btn-icon {
  min-width: var(--tap);
  min-height: var(--tap);
}

/* ---------------- ② 版面骨架 ---------------- */

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 calc(16px * var(--fs-scale));
}
.stack {
  display: flex;
  flex-direction: column;
  gap: calc(18px * var(--fs-scale));
}

/* ---------------- 顶部导航 ---------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head-in {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--fs-scale));
  min-height: 64px;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.site-brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 9px;
}
.site-brand .mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 19px;
}
/* 品牌文字块：品牌名一行、副标题小字一行（副标题取自后台「副标题」字段，留空则不渲染） */
.site-brand-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}
.site-brand-txt .bn {
  font-size: var(--fs-lg);
  font-weight: 600;
}
.site-brand-txt .bs {
  margin-top: calc(2px * var(--fs-scale));
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-3, var(--text));
  letter-spacing: 0.06em;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--fs-scale));
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar {
  display: none;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 calc(12px * var(--fs-scale));
  border-radius: calc(10px * var(--fs-scale));
  color: var(--text-2, var(--text));
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--fs-base);
}
.site-nav a:hover {
  background: var(--brand-soft);
  color: oklch(0.44 calc(0.16 * var(--sat, 1)) var(--hue));
}
.site-nav a.on {
  background: var(--brand);
  color: #fff;
}
/* ≤1200px：品牌名 + 字号三档 + 6 项导航同排会挤，收紧导航项留白（触控高度 --tap 不变），
   让「首页 / 期刊 / 我的作品 / 公开作品集 / 消息 / 我的」在 1024 宽的特大字号下也完整可见 */
@media (max-width: 1200px) {
  .site-nav {
    gap: calc(2px * var(--fs-scale));
  }
  .site-nav a {
    padding: 0 calc(9px * var(--fs-scale));
  }
}

/* 字号三档切换 */
.fs-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  flex: none;
}
.fs-switch button {
  min-width: 40px;
  min-height: 38px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-2, var(--text));
  font-size: var(--fs-sm);
  font-weight: 600;
}
.fs-switch button.on {
  background: var(--brand);
  color: #fff;
}

/* ---------------- 移动端侧拉导航（H5：三道横唤起） ---------------- */

/* 三道横按钮：桌面端不显示，断点里再打开 */
.nav-burger {
  display: none;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--fs-scale));
  background: transparent;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}

.drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: oklch(0.24 calc(0.02 * var(--sat, 1)) var(--hue) / 0.46);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.26s ease, visibility 0.26s;
}
.drawer-mask.on {
  opacity: 1;
  visibility: visible;
}

/* 侧拉面板：从右侧滑入；关闭态用 visibility 而非 display，
   这样过渡动画能保留，且隐藏时不会被 Tab 键聚焦到 */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: min(84vw, calc(330px * var(--fs-scale)));
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  border-left: 1px solid var(--line);
  box-shadow: -14px 0 36px oklch(0.3 calc(0.02 * var(--sat, 1)) var(--hue) / 0.18);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.28s;
}
.drawer.on {
  transform: none;
  visibility: visible;
}

.drawer-hd {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: calc(64px * var(--fs-scale));
  padding: calc(10px * var(--fs-scale)) calc(16px * var(--fs-scale));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.drawer-hd .ttl {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 关闭按钮：两根细杠交叉成 ✕，不依赖字体里的符号字形 */
.drawer-close {
  position: relative;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.drawer-close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}
.drawer-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}
.drawer-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 条目：点击区按 --tap 放大 1.3 倍（适老化），字号取 --fs-lg 并随三档缩放 */
.drawer-nav {
  display: flex;
  flex-direction: column;
}
.drawer-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: calc(var(--tap) * 1.3);
  padding: 0 calc(18px * var(--fs-scale));
  font-size: var(--fs-lg);
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.drawer-nav a:last-child {
  border-bottom: 0;
}
.drawer-nav a.on {
  color: oklch(0.44 calc(0.16 * var(--sat, 1)) var(--hue));
  font-weight: 600;
  background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* ≤768px：横排导航让位给三道横 + 侧拉 */
@media (max-width: 768px) {
  .site-nav {
    display: none;
  }
  .nav-burger {
    display: inline-flex;
  }
}
/* 桌面端整套侧拉 DOM 不参与渲染 */
@media (min-width: 769px) {
  .drawer,
  .drawer-mask {
    display: none;
  }
}

/* ---------------- 征稿横幅（永远置顶） ---------------- */

.cfw-banner {
  margin-top: calc(20px * var(--fs-scale));
  border-radius: calc(16px * var(--fs-scale));
  padding: calc(22px * var(--fs-scale)) calc(24px * var(--fs-scale));
  background: linear-gradient(135deg, oklch(0.585 calc(0.19 * var(--sat, 1)) var(--hue)), oklch(0.665 calc(0.155 * var(--sat, 1)) calc(var(--hue) + 18)));
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(20px * var(--fs-scale));
  flex-wrap: wrap;
}
.cfw-banner .t {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cfw-banner .d {
  opacity: 0.92;
  font-size: var(--fs-base);
  margin-top: 6px;
  max-width: 56ch;
}
.cfw-banner .meta {
  display: flex;
  gap: calc(16px * var(--fs-scale));
  margin-top: calc(10px * var(--fs-scale));
  font-size: var(--fs-sm);
  flex-wrap: wrap;
}
.cfw-banner .btn {
  background: #fff;
  color: oklch(0.42 calc(0.16 * var(--sat, 1)) var(--hue));
  border: 0;
}
.cfw-banner .grow {
  flex: 1;
  min-width: 240px;
}

/* ---------------- 刊头 ---------------- */

.masthead {
  text-align: center;
  padding: calc(34px * var(--fs-scale)) 0 calc(22px * var(--fs-scale));
  border-bottom: 2px solid var(--text);
  margin-bottom: calc(24px * var(--fs-scale));
}
.masthead .cn {
  font-family: 'Songti SC', 'STSong', 'Noto Serif SC', serif;
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
}
.masthead .sub {
  margin-top: calc(10px * var(--fs-scale));
  font-size: var(--fs-sm);
  color: var(--text-3, var(--text));
  letter-spacing: 0.08em;
}

/* ---------------- 章节 ---------------- */

.sec {
  margin-top: calc(34px * var(--fs-scale));
}
/* 页面首个区块（首页已去掉刊头，介绍卡片直接跟在顶部导航后）：
   用 padding 而非 margin 留白，避免外边距合并到 .wrap 之外后间距忽大忽小 */
.sec--first {
  margin-top: 0;
  padding-top: calc(26px * var(--fs-scale));
}
.sec-h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: calc(16px * var(--fs-scale));
}
.sec-h h2 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sec-h .more {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--brand);
  text-decoration: none;
}
.rule-diamond {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3, var(--text));
  font-size: var(--fs-sm);
}
.rule-diamond::before,
.rule-diamond::after {
  content: '';
  flex: 1;
  border-top: 1px dashed var(--line);
}
.rule-diamond span {
  color: var(--brand);
}

/* ---------------- 介绍卡：H5 收成 2 行 ---------------- */

.intro__lead {
  line-height: 2;
}
.intro__text {
  margin-top: calc(14px * var(--fs-scale));
  line-height: 2;
  color: var(--text-2, var(--text));
}
.intro__rule {
  margin-top: calc(18px * var(--fs-scale));
}
.intro__host {
  margin-top: calc(16px * var(--fs-scale));
}
.intro__body {
  position: relative;
}
/* 桌面端永远全展开，按钮整块不出现 */
.intro__toggle,
.intro__collapse {
  display: none;
}

/* 桌面端：右上角收起/展开按钮；点后介绍缩成 2 行（与 H5 同款裁剪），H5 端不渲染此按钮 */
@media (min-width: 769px) {
  .intro {
    position: relative;
  }
  .intro__collapse {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: calc(6px * var(--fs-scale)) calc(14px * var(--fs-scale));
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--text-2, var(--text));
    font-family: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
  }
  .intro__collapse:hover {
    color: var(--brand);
    border-color: var(--brand);
  }
  .intro__collapse .intro__chev {
    display: inline-block;
    transition: transform 0.2s ease;
  }
  /* 展开态箭头朝上提示「收起」，折叠态朝下提示「展开」 */
  .intro:not(.intro--desk-closed) .intro__collapse .intro__chev {
    transform: rotate(180deg);
  }
  .intro--desk-closed .intro__body {
    max-height: calc(var(--fs-base) * 4);
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  .intro__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: var(--tap);
    margin-top: calc(10px * var(--fs-scale));
    padding: 0 calc(14px * var(--fs-scale));
    border: 0;
    border-radius: calc(10px * var(--fs-scale));
    background: var(--brand-soft);
    color: var(--brand);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
  }
  .intro__chev {
    display: inline-block;
    font-size: var(--fs-sm);
    transition: transform 0.2s ease;
  }
  .intro--open .intro__chev {
    transform: rotate(180deg);
  }
  /* 折叠态：正文行高 2 → 2 行高度 = 2 × 2 × 基准字号，恰好整行不多不少。
     这里不再叠渐隐——高度只有两行，任何渐变都会吃掉第二行的字，
     适老化优先保证文字完整，展开提示交给下面的大按钮。 */
  .intro:not(.intro--open) .intro__body {
    max-height: calc(var(--fs-base) * 4);
    overflow: hidden;
  }
}

/* ---------------- 卡片与网格 ---------------- */

.card {
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--fs-scale));
  background: var(--surface, #fff);
  overflow: hidden;
}
.card-pad {
  padding: calc(18px * var(--fs-scale));
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: calc(18px * var(--fs-scale));
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--fs-scale));
  overflow: hidden;
  background: var(--surface, #fff);
}
.stat-row > div,
.stat-row > a.stat-link {
  padding: calc(18px * var(--fs-scale));
  border-left: 1px solid var(--line);
  text-align: center;
}
.stat-row > div:first-child,
.stat-row > a.stat-link:first-child {
  border-left: 0;
}
.stat-row .k {
  font-size: var(--fs-sm);
  color: var(--text-3, var(--text));
}
.stat-row .v {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* 广告位：与内容明确区分 */
.ad-slot {
  position: relative;
  display: block;
  border-radius: calc(14px * var(--fs-scale));
  overflow: hidden;
  border: 1px solid var(--line);
  margin-top: calc(28px * var(--fs-scale));
}
.ad-slot img {
  width: 100%;
  display: block;
}
.ad-slot .tag-ad {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: var(--fs-xs);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 2px 9px;
  border-radius: 999px;
}

/* ---------------- 页脚 ---------------- */

.site-foot {
  margin-top: calc(56px * var(--fs-scale));
  border-top: 1px solid var(--line);
  padding: calc(26px * var(--fs-scale)) 0 calc(34px * var(--fs-scale));
  font-size: var(--fs-sm);
  color: var(--text-3, var(--text));
  line-height: 2;
}
.site-foot a {
  color: inherit;
}
/* 版本号：版权行末尾的小字（服务端 package.json 随部署下发，空则不渲染） */
.site-foot .ver {
  margin-left: 10px;
  font-size: calc(var(--fs-sm) * 0.86);
  opacity: 0.72;
  letter-spacing: 0.04em;
}

/**
 * 备案号链接：法规要求点开直达工信部备案查询，所以它必须「一眼看出能点」。
 * 页脚 / 封底默认 a { color: inherit } 是纯文本观感，这里显式补下划线 + hover 强调色。
 * 选择器带上 .site-foot / .j-back .tech 前缀，否则被上面那条 color:inherit 盖掉。
 */
.site-foot a.icp-link {
  margin-left: 6px;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.site-foot a.icp-link:hover {
  color: var(--brand);
}

/* ---------------- 表单页（登录 / 注册） ---------------- */

.form-page {
  max-width: 560px;
  margin: calc(28px * var(--fs-scale)) auto calc(56px * var(--fs-scale));
}
.form-page .panel {
  padding: calc(28px * var(--fs-scale));
}
.form-page h1 {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-bottom: 6px;
}
.field-err {
  color: var(--danger);
  font-size: var(--fs-sm);
  margin-top: 4px;
}
.required {
  color: var(--danger);
}
/* 字段标签后的次要说明（如「最多 50 字」）：必须显式 400，否则继承 .label 的 600 */
.label-note {
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: 400;
  margin-left: 4px;
}

/* ---------------- 个人中心 ---------------- */

.me-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: calc(20px * var(--fs-scale));
  align-items: start;
}
@media (max-width: 760px) {
  .me-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 作品集数据 / 作者数据：手机端同样横排三格
     （不折成竖排，只把留白收窄、分隔线改回竖线） */
  .stat-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .stat-row > div,
  .stat-row > a.stat-link {
    padding: calc(14px * var(--fs-scale)) calc(5px * var(--fs-scale));
    border-left: 1px solid var(--line);
    border-top: 0;
  }
  .stat-row > div:first-child,
  .stat-row > a.stat-link:first-child {
    border-left: 0;
  }
}

/* 窄屏（≤360px）再收一点留白，保证三格不折行 */
@media (max-width: 360px) {
  .stat-row > div,
  .stat-row > a.stat-link {
    padding: calc(12px * var(--fs-scale)) calc(2px * var(--fs-scale));
  }
}

/* ---------------- 通用工具 ---------------- */

.dim {
  color: var(--text-3, var(--text));
}
.center {
  text-align: center;
}
.mono {
  font-family: var(--font-num, ui-monospace, Menlo, monospace);
}
a.link {
  color: var(--brand);
}

/* ==========================================================================
   ③ 阅读器：期刊页（目录 / 内容 / 封底）
   ========================================================================== */

/* 目录：卡片式列表（去虚线/点线，浅底圆角行，长者看得清、点得准） */
.toc {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--fs-scale));
}
.toc a {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--fs-scale));
  padding: calc(11px * var(--fs-scale)) calc(14px * var(--fs-scale));
  background: var(--bg);
  border-radius: calc(12px * var(--fs-scale));
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.toc a:hover {
  background: var(--brand-soft);
}
.toc b {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  transition: color var(--dur-fast) var(--ease);
}
.toc a:hover b {
  color: var(--brand);
}
.toc .who {
  font-size: var(--fs-sm);
  color: var(--text-3);
  white-space: nowrap;
}
/* 序号：品牌色圆角小方块，顺序一眼可见 */
.toc .no {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: var(--fs-sm);
  flex: none;
  min-width: calc(34px * var(--fs-scale));
  height: calc(34px * var(--fs-scale));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(9px * var(--fs-scale));
}
/* 目录分节标题：胶囊标题 + 篇数徽标，组与组之间层次清晰 */
.toc-sec-h {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--fs-scale));
  font-size: calc(16px * var(--fs-scale));
  font-weight: 700;
  color: var(--text);
  margin: calc(18px * var(--fs-scale)) 0 calc(10px * var(--fs-scale));
  line-height: 1.3;
}
.toc-sec-h:first-child {
  margin-top: calc(2px * var(--fs-scale));
}
.toc-sec-n {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-soft);
  padding: calc(2px * var(--fs-scale)) calc(10px * var(--fs-scale));
  border-radius: 999px;
}
/* 目录「展开全部 / 收起」：默认只列 5 篇，整块可点、高度随字号档放大（触摸友好）；
   浅底圆角与目录行同款，视觉上是目录的自然收尾 */
.toc-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: calc(46px * var(--fs-scale));
  margin-top: calc(12px * var(--fs-scale));
  padding: calc(8px * var(--fs-scale)) 12px;
  border: 0;
  border-radius: calc(12px * var(--fs-scale));
  background: var(--bg);
  color: var(--brand);
  font-family: inherit;
  font-size: calc(15px * var(--fs-scale));
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.toc-more:hover {
  background: var(--brand-soft, #f3ede1);
}
.toc-more:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
.toc-more-caret {
  display: inline-block;
  transition: transform 0.18s ease;
}
.toc-more-caret.is-up {
  transform: rotate(180deg);
}

/* 内容区：三种版式组件 */
.j-flow {
  display: flex;
  flex-direction: column;
  gap: calc(34px * var(--fs-scale));
}
/* 正文里的「章节标题」块：单独一行显示，作为后续作品的归属标题 */
/* 章节标题组：标题 + 备注（选填）包成一组，间距自控，不吃 .j-flow 的块间距 */
.j-sec {
  min-width: 0;
}
.j-sec-title {
  font-size: calc(22px * var(--fs-scale));
  font-weight: 700;
  color: var(--text);
  margin: 0;
  padding: calc(6px * var(--fs-scale)) 0 calc(2px * var(--fs-scale));
  line-height: 1.35;
}
.j-sec-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  margin-top: calc(8px * var(--fs-scale));
  border-radius: 3px;
  background: var(--brand);
}
/* 章节标题下的小字备注：选填（后台留空则整行不渲染）；小一号字 + 内边距与标题区隔 */
.j-sec-note {
  font-size: calc(14px * var(--fs-scale));
  color: var(--text-3);
  line-height: 1.6;
  margin: 0;
  padding: 0 calc(4px * var(--fs-scale)) calc(2px * var(--fs-scale));
}
/* 两列 / 三列网格（版式类型 HERO / GRID2 / GRID3 由服务端下发）；统一高度：等宽列 + 图片统一比例裁切 */
.j-waterfall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(16px * var(--fs-scale));
}
.j-waterfall--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: calc(14px * var(--fs-scale));
}
/* 手机端同样按「一排 N 个」展示（不折成单列），只收窄留白与字号 */
@media (max-width: 640px) {
  .j-waterfall {
    gap: calc(10px * var(--fs-scale));
  }
  .j-waterfall--3 {
    gap: calc(8px * var(--fs-scale));
  }
  .j-fig figcaption {
    padding: calc(8px * var(--fs-scale)) calc(8px * var(--fs-scale));
  }
  .j-fig .t {
    font-size: var(--fs-sm);
  }
  .j-fig .a,
  .j-metrics {
    font-size: var(--fs-xs);
  }
  .j-fig .a {
    gap: 3px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .j-metrics {
    gap: calc(8px * var(--fs-scale));
    margin-top: 4px;
    flex-wrap: wrap;
  }
  .j-fig-go {
    font-size: var(--fs-xs);
  }
  /* 小卡片上「进入阅读」角标会盖住画面，点图片本身即可进入 */
  .j-waterfall .j-fig-zoom {
    display: none;
  }
  /* 卷首语：窄屏收字距，避免 0.4em 字距把标题撑出屏宽 */
  .j-preface-label {
    letter-spacing: 0.28em;
    text-indent: 0.28em;
  }
  .j-preface-body {
    max-width: 100%;
  }
  /* 长卷首语折叠：默认只留约 4 行（整行截断，不吃半行），底部淡出提示还有下文。
     高度按「行高 2.05 × 4 行」算，适老化字号放大时同步变高。 */
  .j-preface-clamp.is-collapsed {
    max-height: calc(var(--fs-base) * 2.05 * 4);
    overflow: hidden;
  }
  .j-preface-clamp.is-collapsed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(52px * var(--fs-scale));
    pointer-events: none;
    /* 直接用 transparent 起头，部分旧内核会在渐变中段插值出灰色，故优先写 color-mix 取同色透明 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 88%);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 88%);
  }
}
.j-fig {
  margin: 0;
  border-radius: calc(10px * var(--fs-scale));
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.j-fig:hover {
  border-color: var(--brand-line);
  box-shadow: var(--shadow-sm);
}
.j-fig img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
/* 图片是「放大查看」按钮，正文（标题/作者/互动）才是跳作品页的链接 */
.j-fig-img {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.j-fig-zoom {
  position: absolute;
  right: calc(10px * var(--fs-scale));
  bottom: calc(10px * var(--fs-scale));
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: calc(5px * var(--fs-scale)) calc(10px * var(--fs-scale));
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.52);
  color: #fff;
  font-size: var(--fs-xs);
  line-height: 1;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  pointer-events: none;
}
.j-fig:hover .j-fig-zoom,
.j-fig-img:focus-visible .j-fig-zoom {
  opacity: 1;
}
/* 触屏没有 hover：常驻显示，中老年用户也要一眼看到能点 */
@media (hover: none) {
  .j-fig-zoom {
    opacity: 0.92;
  }
}
.j-fig-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.j-fig-link:hover .t {
  color: var(--brand);
}
.j-fig-go {
  display: inline-block;
  margin-top: auto;
  padding-top: calc(6px * var(--fs-scale));
  font-size: var(--fs-sm);
  color: var(--brand);
}
.j-fig figcaption {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(10px * var(--fs-scale)) calc(12px * var(--fs-scale));
}
/* 标题单行省略：不同字数不再把卡片撑出不同高度（悬停看全名，页面模板带 title 属性） */
.j-fig .t {
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.j-fig .a {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.j-fig--hero img {
  aspect-ratio: auto; /* 单行大图保持原始比例，不参与统一裁切 */
  max-height: 70vh;
  object-fit: contain;
  background: var(--surface-sunken);
}
.j-fig--hero .t {
  white-space: normal;
}
.j-fig--hero figcaption {
  padding: calc(14px * var(--fs-scale)) calc(16px * var(--fs-scale));
}
.j-fig--hero .t {
  font-size: var(--fs-h3);
  font-weight: 600;
}
.j-metrics {
  display: flex;
  gap: calc(14px * var(--fs-scale));
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 6px;
}

/* 内容锁：未登录 / 非登录用户的遮罩 */
.j-lock {
  border: 1px dashed var(--brand-line);
  background: var(--brand-soft);
  border-radius: calc(14px * var(--fs-scale));
  padding: calc(30px * var(--fs-scale)) calc(22px * var(--fs-scale));
  text-align: center;
}
.j-lock .t {
  font-size: var(--fs-h3);
  font-weight: 600;
}
.j-lock p {
  color: var(--text-2);
  margin-top: 8px;
  font-size: var(--fs-base);
}
.j-lock .row {
  justify-content: center;
  gap: calc(12px * var(--fs-scale));
  margin-top: calc(18px * var(--fs-scale));
  flex-wrap: wrap;
}

/* 封底 */
.j-back {
  margin-top: calc(44px * var(--fs-scale));
  border-top: 2px solid var(--text);
  padding-top: calc(26px * var(--fs-scale));
  text-align: center;
  color: var(--text-2);
}
.j-back .ending {
  font-family: 'Songti SC', 'STSong', 'Noto Serif SC', serif;
  font-size: var(--fs-lg);
  line-height: 2;
  max-width: 34em;
  margin: 0 auto calc(20px * var(--fs-scale));
  text-align: left;
}
/* 单位名 / 版权行原在此渲染（.org / .copy），与全站页脚重复，2026-09-30 起移除 */
/* 期刊头部条（返回 + 期号 + 工具栏） */
.j-bar {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--fs-scale));
  padding: calc(14px * var(--fs-scale)) 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.j-bar .grow {
  flex: 1;
}
.j-bar .issue-no {
  font-family: var(--font-num);
  color: var(--text-3);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   卷首语：主题标题之后的「开卷引言」，落在目录之前
   排版要点：衬线字（与封底结束语文脉一致）+ 居中大字距标签 + 2em 首行缩进 +
   定宽居中，长文不做满宽，保持舒适的阅读行长
   -------------------------------------------------------------------------- */
.j-preface {
  margin-top: calc(34px * var(--fs-scale));
  padding-top: calc(30px * var(--fs-scale));
  border-top: 2px solid var(--text);
  font-family: 'Songti SC', 'STSong', 'Noto Serif SC', serif;
}
/* 标签「卷 首 语」：0.4em 拉开字距；text-indent 抵消末字右侧字距，保证视觉居中 */
.j-preface-label {
  margin-bottom: calc(20px * var(--fs-scale));
  color: var(--text);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-align: center;
}
/* 标签下短横：与正文章节标题的下划线同规格（40×3），维持站内装饰语言统一 */
.j-preface-label::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  margin: calc(10px * var(--fs-scale)) auto 0;
  border-radius: 3px;
  background: var(--brand);
}
/* 正文定宽居中 */
.j-preface-body {
  max-width: calc(620px * var(--fs-scale));
  margin: 0 auto;
}
/* 卷首语文案容器：折叠时的定位上下文（底部淡出层靠它定位） */
.j-preface-clamp {
  position: relative;
}
.j-preface p {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 2.05;
  text-align: justify;
  text-indent: 2em;
}
.j-preface p + p {
  margin-top: calc(10px * var(--fs-scale));
}
/* 「展开全文」按钮：沿用目录展开按钮的规格，比正文区略窄留白，避免抢视线 */
.j-preface-more {
  margin-top: calc(14px * var(--fs-scale));
  background: transparent;
  border: 1px solid var(--brand-line, var(--line));
}
.j-preface-more:hover {
  background: var(--brand-soft, #f3ede1);
}

/* ==========================================================================
   ④ 作品卡片 / 网格
   ========================================================================== */

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: calc(18px * var(--fs-scale));
}
.work-card {
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--fs-scale));
  overflow: hidden;
  background: var(--surface);
  transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.work-card:hover {
  border-color: var(--brand-line);
  box-shadow: var(--shadow-sm);
}
.work-card .ph {
  aspect-ratio: 4 / 3;
  background: var(--surface-sunken);
  overflow: hidden;
}
.work-card .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.work-card .ph .lock {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: var(--fs-sm);
}
/* 期刊封面卡片（首页「往期刊物」与 /issues 列表）：封面是 4:6 竖版，
   图片区必须跟着封面比例走 —— 沿用卡片默认的 4:3 会把竖版封面裁成一条横带，
   只剩中间一截，看不出封面长什么样。 */
.issue-card .ph {
  aspect-ratio: 4 / 6;
}
.work-card .bd {
  padding: calc(12px * var(--fs-scale)) calc(14px * var(--fs-scale));
}
.work-card .t {
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.5;
  /* 默认一行，超长加 …；完整标题靠卡片 title 属性悬停展示 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.work-card .m {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: calc(8px * var(--fs-scale));
  font-size: var(--fs-sm);
  color: var(--text-3);
  flex-wrap: wrap;
}
.work-card .m .grow {
  flex: 1;
}
.work-card .counts {
  display: flex;
  gap: calc(12px * var(--fs-scale));
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* 作者行（头像 + 昵称，点击进作品集） */
.author-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  min-height: var(--tap);
}
.author-row:hover .nm {
  color: var(--brand);
}
.author-row .nm {
  font-size: var(--fs-sm);
  transition: color var(--dur-fast) var(--ease);
}

/* 推荐作品集卡片（首页「推荐作品集」板块） */
.fp-card .fp-bd {
  display: grid;
  gap: calc(2px * var(--fs-scale));
}
.fp-card .fp-author {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.fp-card .fp-author .t {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fp-avatar {
  width: calc(34px * var(--fs-scale));
  height: calc(34px * var(--fs-scale));
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 2px solid var(--brand-soft, #f3ede1);
}
.fp-avatar--ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft, #f3ede1);
  color: var(--brand);
  font-weight: 600;
}
/* 推荐作品集卡片的元信息行固定两行：第一行届别·班级，第二行「N 件作品」。
   不沿用 .m 的「横排 + 弹簧空隙」：班级名长短不一，件数有时挤到第二行、
   有时留在行尾，四张卡看起来忽有忽无、位置乱跳（被当成「数量不对」反馈过）。
   竖排后每张卡通版式一致；弹簧空隙在纵向会撑出空白，一并撤掉。 */
.fp-card .m {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(3px * var(--fs-scale));
}
.fp-card .m .grow {
  display: none;
}

/* ---------------- 手机端首页两个板块的排布（H5） ----------------
   桌面端两者都是 .work-grid 自适应列数（240px 起），这里只改窄屏：
   ① 推荐作品集：固定「一行 2 个」。minmax(0, 1fr) 而非 minmax(120px, 1fr)，
      否则特大字号档下两列的最小宽度之和会顶破容器。
   ② 作品精选：全部挤进「一行」，超出部分靠横向滚动。
      关键不是滚动条，而是「第二张卡被切掉一角」—— 每张卡占可见宽度的 54%，
      屏幕右侧自然露出半张，中老年用户不会主动试「能不能滑」，必须先让他们看见；
      横向滚动条只是锦上添花（iOS 上是悬浮式，不常驻）。
      宽度按百分比而不是 calc(100% / N)：换机型、换字号档都不用重算。
      内边距与互动数间距同步收一点，保证「阅读 / 赞 / 评论」三档字号都排得下一行。 */
@media (max-width: 640px) {
  .fp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 卡片变窄后，头像与内边距同步收一点，把宽度让给昵称与班级文字 */
  .fp-grid .fp-card .bd {
    padding: calc(9px * var(--fs-scale)) calc(10px * var(--fs-scale));
  }
  .fp-grid .fp-card .fp-author {
    gap: 7px;
  }
  .fp-grid .fp-avatar {
    width: calc(26px * var(--fs-scale));
    height: calc(26px * var(--fs-scale));
  }
  .fp-grid .fp-card .m {
    /* 卡片只有半屏宽：届别·班级 与「N 件作品」竖排两行，
       始终左对齐、两张卡通版式一致；不省略号截断，给长辈看全。
       原 .m 是横排 + 弹簧空格把件数顶到右侧，竖排后弹簧要撤掉，
       否则那枚空 span 会在纵向撑出一段空白。 */
    flex-direction: column;
    align-items: flex-start;
    gap: calc(3px * var(--fs-scale));
    margin-top: calc(5px * var(--fs-scale));
  }
  .fp-grid .fp-card .m .grow {
    display: none;
  }

  .pick-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: calc(12px * var(--fs-scale));
    overflow-x: auto;
    /* 纵向不能留 visible：只要一轴是 auto，另一轴的 visible 会被算成 auto，
       卡片悬停投影会顶出滚动条，所以改成给上下留出投影空间 */
    overflow-y: hidden;
    padding: 4px 0 calc(10px * var(--fs-scale));
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .pick-grid > * {
    flex: 0 0 54%;
    scroll-snap-align: start;
  }
  .pick-grid .work-card .bd {
    padding: calc(11px * var(--fs-scale)) calc(9px * var(--fs-scale));
  }
  .pick-grid .work-card .counts {
    gap: calc(8px * var(--fs-scale));
  }
  /* 桌面浏览器 / 安卓微信里把滚动条画出来 */
  .pick-grid::-webkit-scrollbar {
    height: 6px;
  }
  .pick-grid::-webkit-scrollbar-track {
    background: transparent;
  }
  .pick-grid::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 3px;
  }
}

/* 图片多图宫格（详情页） */
.shots {
  display: flex;
  flex-direction: column;
  gap: calc(14px * var(--fs-scale));
}
.shots .shot {
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--fs-scale));
  overflow: hidden;
  background: var(--surface-sunken);
  cursor: zoom-in;
  padding: 0;
  display: block;
  width: 100%;
}
.shots .shot img {
  width: 100%;
  display: block;
}

/* 作品详情正文 */
.work-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: calc(16px * var(--fs-scale));
  margin-bottom: calc(20px * var(--fs-scale));
}
.work-head h1 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.45;
}
.work-meta {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--fs-scale));
  flex-wrap: wrap;
  margin-top: calc(12px * var(--fs-scale));
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.feeling {
  margin-top: calc(22px * var(--fs-scale));
  border-left: 3px solid var(--brand-line);
  padding: calc(4px * var(--fs-scale)) 0 calc(4px * var(--fs-scale)) calc(16px * var(--fs-scale));
}
.feeling .k {
  font-size: var(--fs-sm);
  color: var(--text-3);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.feeling p {
  line-height: 2;
  white-space: pre-wrap;
  font-size: var(--fs-base);
}

/* 互动条 */
.interact {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--fs-scale));
  flex-wrap: wrap;
  padding: calc(16px * var(--fs-scale)) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: calc(26px * var(--fs-scale));
}
.ibtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--tap);
  padding: 0 calc(14px * var(--fs-scale));
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-base);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: all var(--dur-fast) var(--ease);
}
.ibtn:hover {
  border-color: var(--brand-line);
  color: var(--brand);
}
.ibtn.on {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: oklch(0.44 calc(0.16 * var(--sat, 1)) var(--hue));
  font-weight: 600;
}
.ibtn.on-heart {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  color: var(--danger);
  font-weight: 600;
}
.ibtn .ic {
  font-size: 1.05em;
  line-height: 1;
}

/* 打赏档位 */
.tier-row {
  display: flex;
  gap: calc(12px * var(--fs-scale));
  flex-wrap: wrap;
}
.tier {
  min-width: calc(96px * var(--fs-scale));
  min-height: var(--tap-lg);
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--fs-scale));
  background: var(--surface);
  cursor: pointer;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
  transition: all var(--dur-fast) var(--ease);
}
.tier:hover {
  border-color: var(--brand-line);
}
.tier.on {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: oklch(0.44 calc(0.16 * var(--sat, 1)) var(--hue));
}
.pay-note {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: calc(12px * var(--fs-scale));
  line-height: 1.8;
}

/* 评论 */
.cm {
  padding: calc(16px * var(--fs-scale)) 0;
  border-bottom: 1px solid var(--line);
}
.cm:last-child {
  border-bottom: 0;
}
.cm-h {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cm-h .nm {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.cm-h .tm {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.cm-h .grow {
  flex: 1;
}
.cm-h .who {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.cm-b {
  margin-top: 8px;
  line-height: 1.9;
  white-space: pre-wrap;
  font-size: var(--fs-base);
}
.cm-a {
  display: flex;
  gap: calc(14px * var(--fs-scale));
  margin-top: 8px;
}
.cm-a button {
  border: 0;
  background: none;
  color: var(--text-3);
  font-size: var(--fs-sm);
  cursor: pointer;
  padding: 6px 0;
  min-height: 32px;
}
.cm-a button:hover {
  color: var(--brand);
}
.cm-a button.on {
  color: var(--brand);
  font-weight: 600;
}
/* 就地回复框：点击「回复」后在该条评论下方展开 */
.cm-replybox {
  margin-top: calc(10px * var(--fs-scale));
  padding: calc(14px * var(--fs-scale));
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--fs-scale));
}
.cm-replybox-label {
  display: block;
  margin-bottom: calc(8px * var(--fs-scale));
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand);
}
.cm-replybox .textarea {
  background: var(--surface);
  min-height: calc(88px * var(--fs-scale));
}
.cm-replybox-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(12px * var(--fs-scale));
  margin-top: calc(12px * var(--fs-scale));
}
.cm-replybox-foot .btn {
  padding: 0 calc(20px * var(--fs-scale));
}
.cm-replies {
  margin-top: calc(12px * var(--fs-scale));
  padding-left: calc(14px * var(--fs-scale));
  border-left: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--fs-scale));
}
.cm-reply .cm-b {
  margin-top: 6px;
}

/* ==========================================================================
   ⑤ 全屏图片查看器（适老化：双指缩放 / 双击放大 / 大关闭键）
   ========================================================================== */

.iv {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  overflow: hidden;
}
.iv-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 给顶部关闭键、两侧翻页键、底部计数/提示让位，图片不压在按钮下面 */
  padding: calc(56px + max(16px, env(safe-area-inset-top))) 88px
    calc(88px + max(24px, env(safe-area-inset-bottom)));
  will-change: transform;
}
.iv-stage img {
  max-width: 100%;
  max-height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
}
.iv-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  z-index: 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.iv-close:hover {
  background: rgba(255, 255, 255, 0.28);
}
.iv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.iv-nav:hover {
  background: rgba(255, 255, 255, 0.28);
}
.iv-prev {
  left: 16px;
}
.iv-next {
  right: 16px;
}
.iv-count {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.iv-hint {
  position: absolute;
  bottom: max(72px, calc(env(safe-area-inset-bottom) + 52px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-xs);
  white-space: nowrap;
  /* 放大后图片会铺到提示语底下，靠投影保证仍看得清 */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 1px rgba(0, 0, 0, 0.9);
}
/* 窄屏：翻页键从两侧挪到底部与计数同排，把中间的整块宽度让给图片 */
@media (max-width: 768px) {
  .iv-stage {
    padding: 76px 14px 128px;
  }
  .iv-prev,
  .iv-next {
    top: auto;
    bottom: max(22px, env(safe-area-inset-bottom));
    transform: none;
  }
  .iv-prev {
    left: 14px;
  }
  .iv-next {
    right: 14px;
  }
  .iv-hint {
    bottom: max(88px, calc(env(safe-area-inset-bottom) + 66px));
    white-space: normal;
    max-width: calc(100vw - 32px);
    text-align: center;
  }
}

/* ==========================================================================
   ⑥ 上传 / 投稿
   ========================================================================== */

.drop {
  border: 2px dashed var(--line-strong);
  border-radius: calc(14px * var(--fs-scale));
  padding: calc(30px * var(--fs-scale)) calc(20px * var(--fs-scale));
  text-align: center;
  cursor: pointer;
  background: var(--surface-sunken);
  transition: all var(--dur-fast) var(--ease);
}
.drop:not(.is-busy):hover,
.drop.is-over {
  border-color: var(--brand);
  background: var(--brand-soft);
}
/* 上传中：上传区变成不可点击的进度面板（cursor / 实线边框提示状态已变） */
.drop.is-busy {
  cursor: progress;
  border-style: solid;
  border-color: var(--brand);
  background: var(--brand-soft);
}
.drop .t {
  font-size: var(--fs-lg);
  font-weight: 600;
}
.drop .d {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 6px;
}

/* 上传进度条（宽度由 JS 驱动，transition 让慢网下也能看到平滑推进） */
.up-bar {
  height: 10px;
  margin: calc(16px * var(--fs-scale)) auto 0;
  max-width: 340px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  overflow: hidden;
}
.up-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  transition: width var(--dur-fast) linear;
}

/* 上传失败提示：常驻在出错位置（不用一闪而过的 toast），并带重传入口 */
.up-err {
  margin-top: calc(14px * var(--fs-scale));
  padding: calc(14px * var(--fs-scale));
  border: 1px solid var(--danger-line);
  border-radius: calc(12px * var(--fs-scale));
  background: var(--danger-soft);
}
.up-err > b {
  color: var(--danger);
}
.up-err > p {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.6;
}

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: calc(14px * var(--fs-scale));
}
.thumb {
  position: relative;
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--fs-scale));
  overflow: hidden;
  background: var(--surface-sunken);
  aspect-ratio: 1;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb .tag {
  position: absolute;
  top: 8px;
  left: 8px;
}
.thumb .del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.thumb .del:hover {
  background: var(--danger);
}
.thumb .fill {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.thumb .bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--brand);
}

/* 勾选行（投稿选作品 / 选编辑） */
.pick {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--fs-scale));
  padding: calc(12px * var(--fs-scale));
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--fs-scale));
  background: var(--surface);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.pick:hover {
  border-color: var(--brand-line);
}
.pick.on {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.pick img {
  width: 62px;
  height: 62px;
  border-radius: calc(9px * var(--fs-scale));
  object-fit: cover;
  flex: none;
  background: var(--surface-sunken);
}
.pick .t {
  font-size: var(--fs-base);
  font-weight: 500;
}
.pick .d {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 3px;
}
.pick .grow {
  flex: 1;
  min-width: 0;
}
.pick .box {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 2px solid var(--line-strong);
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  font-size: 15px;
}
.pick.on .box {
  background: var(--brand);
  border-color: var(--brand);
}

/* ==========================================================================
   ⑦ 消息中心 / 收藏 / 个人中心
   ========================================================================== */

.msg {
  display: flex;
  gap: calc(14px * var(--fs-scale));
  padding: calc(16px * var(--fs-scale)) 0;
  border-bottom: 1px solid var(--line);
}
.msg:last-child {
  border-bottom: 0;
}
.msg.unread .msg-t::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  margin-right: 8px;
  vertical-align: middle;
}
.msg .grow {
  flex: 1;
  min-width: 0;
}
.msg-t {
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.5;
}
.msg-c {
  margin-top: 6px;
  color: var(--text-2);
  line-height: 1.85;
  white-space: pre-wrap;
  font-size: var(--fs-base);
}
.msg-f {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--fs-scale));
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  flex-wrap: wrap;
}
.msg-f a {
  color: var(--brand);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.nav-dot {
  font-style: normal;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

.dl {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: calc(10px * var(--fs-scale)) calc(14px * var(--fs-scale));
  font-size: var(--fs-base);
}
.dl dt {
  color: var(--text-3);
}
.dl dd {
  margin: 0;
  word-break: break-all;
}

.money {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.money-lg {
  font-size: var(--fs-h2);
  font-weight: 700;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* 我的收益数字块（可提现余额 / 累计收到 / 提现处理中）：
   用 grid 自动列 + 1fr —— 容器宽度由内容撑开时，各 fr 列会被拉齐到最宽的那一块，
   因此三块永远等宽；字号统一走 .money-lg，三块高度也一致，标签自然同一水平线。
   min-width 保证「提现处理中」这类 5 字标签不被挤到换行。 */
.gains {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: calc(26px * var(--fs-scale));
}
.gains .gain {
  min-width: calc(96px * var(--fs-scale));
}
/* 窄屏：三块横排会顶破卡片（3×125 + 间隙 > 卡片内宽），改为定宽两列自动换行 ——
   列宽均等，第三块（提现处理中）落到第二行且与上面两块等宽；min-width 归零以免撑破。 */
@media (max-width: 640px) {
  .gains {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .gains .gain {
    min-width: 0;
  }
}

/* 底部固定操作条（适老化：拇指可达） */
.sticky-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: color-mix(in oklab, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: calc(12px * var(--fs-scale)) 0;
  margin-top: calc(20px * var(--fs-scale));
}
.sticky-bar .wrap {
  display: flex;
  gap: calc(12px * var(--fs-scale));
  align-items: center;
  flex-wrap: wrap;
}
.sticky-bar .grow {
  flex: 1;
}
/* 窄屏：说明文字必须独占一行。若只写 flex:1，中文可在任意字间断行，
   文字的最小内容宽度只有 1 个字，于是它不换行、被挤成 1 字宽的竖列。
   换行后主按钮补满剩余宽度，别让底部条左边挤、右边空。 */
@media (max-width: 560px) {
  .sticky-bar .wrap > .grow {
    flex: 1 0 100%;
  }
  .sticky-bar .wrap > .btn-primary {
    flex: 1;
  }
}

.filters {
  display: flex;
  gap: calc(8px * var(--fs-scale));
  flex-wrap: wrap;
  align-items: center;
}
.filters .fbtn {
  min-height: var(--tap);
  padding: 0 calc(16px * var(--fs-scale));
  border: 1px solid var(--line);
  /* 胶囊半径＝高度的一半（原 999px → 44/2 = 22px）；取 --tap/4 = 11px，视觉圆角小一半，
     并随点击区高度自适应（--tap 变动时仍保持「高度的一半再折半」） */
  border-radius: calc(var(--tap) / 4);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-base);
  cursor: pointer;
}
.filters .fbtn.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.filters .fbtn .n {
  font-family: var(--font-num);
  margin-left: 5px;
  opacity: 0.75;
}

/* ---------------- 投稿须知弹窗（创刊号 / 投稿要求） ----------------
   wos-ui 的 .modal 固定 400px、字号硬编码 px —— 中老年读者要成段读长文，
   这里加宽到 560px、正文用 --fs-base 随字号三档缩放；头/脚常驻，中间独立滚动。 */

/* 征稿卡片里的两个入口按钮（按钮文案可能很长，省略号收尾） */
.notice-btns {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12px * var(--fs-scale));
}
.notice-btns .btn {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 注意：类名不能叫 .notice —— wos-ui 里那是「提示条」组件
   （display:flex; align-items:flex-start），撞名会把弹窗的头/身/脚
   全部收缩到内容宽度，表现是标题右的 ✕ 没被推到最右、底栏按钮不满宽 */
.notice-box {
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0; /* 内边距交给头/身/脚三段，底栏才能通栏贴边 */
  overflow: hidden; /* 滚动只发生在 .notice-box__bd，头脚不动 */
}
.notice-box__hd {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(12px * var(--fs-scale));
  padding: calc(14px * var(--fs-scale)) calc(20px * var(--fs-scale));
  border-bottom: 1px solid var(--line);
}
.notice-box__hd h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
}
/* 关闭按钮：与侧拉导航同一套「两根细杠交叉」，不依赖字体里的符号字形 */
.notice-box__x {
  position: relative;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.notice-box__x span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}
.notice-box__x span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}
.notice-box__x span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.notice-box__bd {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: calc(22px * var(--fs-scale));
  padding: calc(20px * var(--fs-scale));
}
.notice-box__sec h3 {
  margin: 0 0 calc(8px * var(--fs-scale));
  font-size: var(--fs-h3);
  font-weight: 600;
}
.notice-box__p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--text);
  /* 后台是 textarea 填的，换行要原样显示（插值必须与标签同一行，否则模板缩进会变成真实空格） */
  white-space: pre-wrap;
  word-break: break-word;
}
.notice-box__ft {
  flex: none;
  padding: calc(14px * var(--fs-scale)) calc(20px * var(--fs-scale));
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.notice-box__ft .btn {
  width: 100%;
}