/* ==========================================================================
   设计稿还原层（严格对齐 yulan/pc/*.png 与 yulan/mobile/*.png）
   类名前缀 sj = 设计稿

   独立成表、单独 <link>：不含 @layer / @theme / oklch。
   Tailwind 总表若被旧内核整份丢掉，版面仍靠这一份撑着。
   ========================================================================== */
:root {
  /* 本表自带字体栈，不依赖 Tailwind 那份 @theme */
  --font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --font-song: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --font-kai: "Noto Serif SC", "KaiTi", "STKaiti", serif;
  --font-zhen: "Noto Serif SC", "KaiTi", serif;
  --font-meta: "Noto Sans SC", "PingFang SC", sans-serif;
  --font-brand: "Smiley Sans", "Noto Sans SC", sans-serif;
  /* Banner 大题：说文小篆；颜色用站内朱印红 */
  --font-zhuan: "EBAS Shuowen", "Noto Serif SC", serif;
  --sj-zhi: #f4f3f0; /* 纸色 */
  --sj-zhi-shen: #eceae6; /* 深纸色（页脚） */
  --sj-bai: #ffffff;
  --sj-mo: #1c1c1c; /* 浓墨（标题） */
  --sj-mo-2: #333333; /* 正文墨 */
  --sj-hui: #8b8b88; /* 淡墨（辅助字） */
  --sj-xian: #e3e1dc; /* 界线 */
  --sj-an: #4a4a4a; /* 按钮深灰 */
  --sj-zhu: #b02418; /* 朱印红 */
}

/* —— 朱印小方章 —— */
.sj-yin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sj-zhu);
  color: #fff;
  font-family: var(--font-display);
  line-height: 1.15;
  text-align: center;
  letter-spacing: 0.06em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  vertical-align: middle;
  flex: none;
}
.sj-yin-xiao {
  width: 16px;
  min-height: 34px;
  padding: 3px 1px;
  font-size: 7px;
}
.sj-yin-da {
  width: 28px;
  min-height: 52px;
  padding: 5px 2px;
  font-size: 11px;
}

/* ============================ 电脑端 ============================ */
.sj-pc-body {
  background: var(--sj-zhi);
  color: var(--sj-mo-2);
}

/* —— 顶栏 —— */
.sj-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--sj-bai);
  border-bottom: 1px solid var(--sj-xian);
}
.sj-nav-nei {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 72px;
  height: auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.sj-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: none;
  max-width: 340px;
}
.sj-brand-zhu {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sj-brand-hang {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.sj-brand b {
  font-family: var(--font-brand);
  font-size: 28px;
  font-weight: 700;
  color: #111;
  line-height: 1;
  letter-spacing: 0.04em;
}
.sj-brand em {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #5c5b56;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.2;
}
.sj-brand i {
  font-style: normal;
  font-family: var(--font-meta);
  font-size: 14px;
  color: #9d9d9a;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.02em;
}
.sj-nav-cai {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.sj-nav-cai a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-meta);
  font-size: 18px;
  color: #3a3a3a;
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.sj-nav-tu {
  opacity: 0.72;
  flex: none;
}
.sj-nav-cai a:hover {
  color: #111;
}
.sj-nav-cai a.on {
  color: #111;
  font-weight: 700;
  border-bottom-color: #222;
}
.sj-nav-you {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.sj-fang {
  width: 36px;
  height: 36px;
  border: 1px solid #d9d7d3;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4a4a4a;
  background: #fff;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.sj-fang:hover {
  border-color: #b5b3af;
}
.sj-deng {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 24px;
  background: var(--sj-an);
  color: #fff;
  font-size: 17px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.sj-deng:hover {
  background: #3a3a3a;
}

/* —— 主视觉 —— */
.sj-hero {
  position: relative;
  overflow: hidden;
  background: #f0efec;
  border-bottom: 1px solid var(--sj-xian);
}
/* 右侧题字区浅纱，避免水墨底纹抢字 */
.sj-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 28%,
    rgba(245, 242, 235, 0.42) 58%,
    rgba(245, 242, 235, 0.68) 100%
  );
}
/*
 * 不要用 display:contents：部分手机浏览器会因此忽略 source，只剩裂图。
 * height:100% 在父级高度为 auto 时会按规范变成 auto，横幅仍由 img 撑开。
 */
picture.sj-tu-he {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
}
.sj-feng > picture.sj-tu-he {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.sj-m-kuai-man > picture.sj-tu-he,
.sj-hero > picture.sj-tu-he {
  position: absolute;
  inset: 0;
}
.sj-hero-tu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.sj-hero-nei {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: clamp(420px, 44vw, 600px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
/* 文案靠右（设计稿：山水在左，题字在右） */
.sj-hero-wen {
  margin-left: auto;
  width: min(720px, 68%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sj-hero-ti {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-zhuan);
  font-weight: 400;
  font-size: clamp(66px, 8.4vw, 122px);
  line-height: 1;
  color: var(--sj-zhu);
  letter-spacing: 0.12em;
  font-synthesis: none;
  -webkit-text-stroke: 0;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85),
    0 0 18px rgba(245, 242, 235, 0.9),
    0 2px 12px rgba(245, 242, 235, 0.75);
}
.sj-hero-ti-song {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.sj-hero-ti-tu {
  color: var(--sj-zhu);
  opacity: 0.92;
  flex: none;
  width: 0.42em;
  height: 0.42em;
}
.sj-hero-ti-chang {
  font-size: clamp(40px, 5.2vw, 76px);
  letter-spacing: 0.04em;
}
.sj-hero-fu {
  margin: 18px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.45vw, 20px);
  font-weight: 700;
  color: #1f1e1c;
  letter-spacing: 0.04em;
  white-space: normal;
  max-width: 100%;
  padding: 8px 16px;
  box-sizing: border-box;
  background: rgba(252, 251, 248, 0.82);
  border: 1px solid rgba(173, 171, 167, 0.45);
  border-radius: 2px;
  box-shadow: 0 1px 8px rgba(245, 242, 235, 0.55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}
.sj-hero-fu .sj-yin {
  flex: none;
}
.sj-hero-xian {
  width: 62%;
  height: 1px;
  background: #adaba7;
  margin: 16px auto 26px;
}
.sj-hero-an {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
/* 墨块按钮（设计稿的不规则墨迹形） */
.sj-mo-an {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 172px;
  padding: 15px 26px;
  font-size: 16px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  background: #4a4a4a;
  color: #fff;
  clip-path: polygon(
    2% 8%,
    8% 0,
    24% 5%,
    46% 1%,
    68% 6%,
    88% 0,
    98% 9%,
    100% 46%,
    97% 92%,
    86% 100%,
    62% 95%,
    38% 100%,
    14% 96%,
    3% 100%,
    0 54%
  );
}
.sj-mo-an:hover {
  background: #3a3a3a;
}
.sj-mo-an.on:hover {
  background: #1c1b1a;
  color: #f6f5f2;
}
.sj-mo-an-bai {
  background: #fdfdfc;
  color: #222;
}
.sj-mo-an-bai:hover {
  background: #fff;
}

/* —— 内容容器 —— */
.sj-zhu-ti {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 24px 56px;
}

/* —— 分节标题 —— */
.sj-jie {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.sj-jie-ti {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: #141414;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.sj-jie-tu {
  color: #8c2f26;
  opacity: 0.9;
  flex: none;
}
/* 标题：图标在上、文字在下，避免挤在一行 */
.sj-jie-zhu {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  line-height: 1.25;
}
.sj-jie-wen {
  display: block;
}
.sj-jie-ti-nei {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
}
.sj-jie-xian {
  flex: 1;
  height: 1px;
  background: #cfcdc9;
}
.sj-jie-fu {
  font-size: 16px;
  color: #6f6f6c;
  white-space: nowrap;
}

/* —— 三栏卡片 —— */
.sj-san {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.sj-ka {
  display: flex;
  flex-direction: column;
  background: #fbfaf8;
  border: 1px solid #e6e4e0;
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.sj-ka:hover {
  border-color: #cbc9c5;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07);
}
.sj-ka-tu {
  aspect-ratio: 4 / 3;
  background: #f0efec;
  overflow: hidden;
}
.sj-ka-tu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sj-ka-nei {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.sj-ka-h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.sj-ka-ming {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  color: #141414;
  letter-spacing: 0.02em;
}
.sj-ka-fu {
  font-size: 15px;
  color: #6f6f6c;
}
.sj-ka-ping {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #4a4a48;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sj-ka-jia {
  margin-top: auto;
  font-size: 16px;
  color: #2b2b2b;
}

/* —— 书目横条列表（专题页） —— */
.sj-tiao {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 6px;
  border-bottom: 1px solid #e0ded9;
  text-decoration: none;
  color: inherit;
}
.sj-tiao:last-child {
  border-bottom: 0;
}
.sj-tiao-tu {
  width: 92px;
  height: 76px;
  flex: none;
  overflow: hidden;
  background: #f0efec;
}
.sj-tiao-tu img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sj-tiao-wen {
  flex: 1;
  min-width: 0;
}
.sj-tiao-ming {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: #141414;
}
.sj-tiao-shuo {
  margin: 6px 0 0;
  font-size: 15px;
  color: #777673;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sj-tiao-jia {
  flex: none;
  font-size: 16px;
  color: #2b2b2b;
}

/* —— 搜索页 —— */
.sj-sou-hero {
  position: relative;
  overflow: hidden;
  background: #eeedea;
  border-bottom: 1px solid var(--sj-xian);
}
.sj-sou-hero .sj-hero-tu {
  object-position: center 60%;
}
.sj-sou-nei {
  position: relative;
  z-index: 1;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.sj-sou-kuang {
  width: min(660px, 100%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 6px;
  padding: 16px 22px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
.sj-sou-kuang input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 17px;
  color: #222;
}
.sj-sou-kuang input::placeholder {
  color: #a3a3a0;
}
/* 检书：历史 / 热门 */
.sj-sou-fu {
  margin: 0 0 22px;
}
.sj-sou-fu-hang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.sj-sou-fu-ti {
  margin: 0;
  font-size: 14px;
  color: #6f6f6c;
  letter-spacing: 0.04em;
}
.sj-sou-fu-qing {
  border: 0;
  background: transparent;
  color: #9a9690;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.sj-sou-fu-qing:hover {
  color: var(--sj-zhu);
}
.sj-sou-fu-biao {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  min-height: 0;
}
.sj-sou-fu-biao:empty {
  display: none;
}
.sj-sou-fu-biao + .sj-sou-fu-hang {
  margin-top: 4px;
}
button.sj-sou-pian,
a.sj-sou-pian {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid #e2e0dc;
  background: #f7f4ef;
  color: #3a3834;
  border-radius: 4px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
}
button.sj-sou-pian:hover,
a.sj-sou-pian:hover {
  border-color: #c9b8a8;
  color: var(--sj-zhu);
  background: #faf6f1;
}
.sj-m-sou-fu {
  margin: 4px 16px 12px;
}
.sj-m-sou-fu .sj-sou-fu-hang {
  margin-bottom: 8px;
}
.sj-m-sou-fu .sj-sou-fu-biao {
  margin-bottom: 12px;
}
/* 搜索结果：宽横条卡 */
.sj-kuan {
  display: flex;
  align-items: stretch;
  gap: 26px;
  background: #fbfaf8;
  border: 1px solid #e6e4e0;
  border-radius: 3px;
  padding: 14px;
  margin-bottom: 18px;
  text-decoration: none;
  color: inherit;
}
.sj-kuan:hover {
  border-color: #cbc9c5;
}
.sj-kuan-tu {
  width: 230px;
  flex: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f0efec;
}
.sj-kuan-tu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sj-kuan-wen {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 8px 0;
}
.sj-kuan-ming {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: #141414;
}
.sj-kuan-shuo {
  margin: 0;
  font-size: 15.5px;
  color: #55554f;
}

/* —— 详情页 —— */
.sj-xq {
  position: relative;
  background: var(--sj-zhi);
}
.sj-xq-di {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  pointer-events: none;
}
.sj-xq-ge {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.sj-xq-ge > aside {
  position: sticky;
  top: 88px;
}
.sj-xq-feng {
  aspect-ratio: 3 / 4;
  background: #f0efec;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}
.sj-xq-feng img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sj-xq-jia {
  margin: 18px 0 0;
  font-size: 30px;
  color: #222;
}
.sj-xq-an {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  align-items: stretch;
  margin-top: 22px;
}
.sj-xq-an > * {
  flex: 1 1 0;
  min-width: 0;
}
.sj-an-hei,
.sj-an-bai {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  font-size: 15px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1.2;
}
.sj-an-hei {
  background: #3d3d3d;
  color: #fff;
  border: 1px solid #3d3d3d;
}
.sj-an-hei:hover {
  background: #2b2b2b;
}
.sj-an-bai {
  background: #fff;
  color: #222;
  border: 1px solid #d2d0cc;
}
.sj-an-bai.on,
.sj-an-hei.on,
.sj-m-wan-an.on,
.sj-mo-an.on {
  background: #262523;
  border-color: #262523;
  color: #f6f5f2;
}
.sj-an-hei.on[disabled],
.sj-m-wan-an.on[disabled] {
  opacity: 1;
  cursor: default;
}
.sj-xq-ti-shi:empty,
.sj-xq-ti-shi[hidden] {
  display: none;
}
.sj-xq-ti-shi {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  box-sizing: border-box;
  margin: 10px 16px 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f3efe8;
  color: #5c5b56;
  font-size: 15px;
  line-height: 1.55;
}
.sj-xq-ti-shi-tu {
  flex: none;
  display: inline-flex;
  margin-top: 1px;
  color: #8c2f26;
}
.sj-xq-ti-shi-wen {
  flex: 1;
  min-width: 0;
}
.sj-xq-ti-shi a {
  color: #8c2f26;
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-terminal='desktop'] .sj-xq-ti-shi {
  margin: 14px 0 6px;
  max-width: 720px;
}
.sj-xq-ti {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(48px, 5.4vw, 76px);
  font-weight: 700;
  color: #111;
  line-height: 1.05;
  letter-spacing: 0.03em;
}
.sj-xq-zuo {
  margin: 20px 0 0;
  font-size: 16px;
  color: #6f6f6c;
}
.sj-xq-kuai {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid #d8d6d1;
}
.sj-xq-kuai:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.sj-xq-xiao {
  margin: 0 0 14px;
  display: flex;
  width: 100%;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
}
.sj-xq-xiao .sj-jie-zhu {
  align-items: flex-start;
  text-align: left;
}
.sj-xq-wen {
  margin: 0;
  font-size: 16px;
  line-height: 2;
  color: #3f3f3d;
  white-space: pre-wrap;
}
.sj-xq-shou {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 15.5px;
  color: #4a4a48;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.sj-xq-yu {
  background: #eceae6;
  padding: 20px 22px;
  font-size: 16px;
  color: #3a3a38;
}
.sj-xq-mu a,
.sj-xq-mu div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  font-size: 16px;
  color: #3a3a38;
  text-decoration: none;
}
.sj-xq-mu a:hover {
  color: #111;
}
.sj-ka-jia:empty,
.sj-m-ka-jia:empty,
.sj-xq-jia:empty,
.sj-m-xq-jia:empty,
.sj-tiao-jia:empty {
  display: none;
}
/* 详情/播放页底部推荐 */
.sj-tui {
  margin-top: 40px;
  padding-top: 8px;
}
.sj-tui-m {
  margin-top: 18px;
  padding: 0 16px 8px;
}
.sj-tui-kuai {
  margin-bottom: 36px;
}
.sj-tui-fen {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: #fbfaf8;
  border: 1px solid #e3e1dc;
  text-decoration: none;
  color: inherit;
}
.sj-tui-fen b {
  font-family: var(--font-display);
  font-size: 20px;
}
.sj-tui-fen span {
  font-size: 15px;
  color: #8c8b85;
}

/* —— 播放页 —— */
.sj-bo-ge {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}
/* 宽屏：播放器左、篇目右，吃满横向空白 */
@media (min-width: 1100px) {
  .sj-bo-ge {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    gap: 22px;
  }
  .sj-bo-ce {
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 88px);
    overflow: auto;
    align-self: start;
  }
}
.sj-bo-zhu {
  background: #fbfaf8;
  border: 1px solid #e6e4e0;
  overflow: hidden;
}
.sj-bo-ping {
  position: relative;
  /* 默认可被 --sj-bo-bi-li / 宽高变量覆盖；手机上不再锁死 16:9 显得过宽 */
  aspect-ratio: var(--sj-bo-bi-li, 16 / 9);
  width: var(--sj-bo-kuan, 100%);
  height: var(--sj-bo-gao, auto);
  max-width: 100%;
  background: #ddd;
  overflow: hidden;
}
/* 竖屏成片：按片源比例立框，高度不超过视口，宽度随比例收，居中不拉满横栏 */
.sj-bo-qi.sj-bo-shu-ping {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sj-bo-qi.sj-bo-shu-ping .sj-bo-ping {
  --sj-bo-shu-zui-gao: min(78vh, 720px);
  width: min(100%, calc(var(--sj-bo-shu-zui-gao) * var(--sj-bo-w, 9) / var(--sj-bo-h, 16)));
  max-height: var(--sj-bo-shu-zui-gao);
  aspect-ratio: var(--sj-bo-bi-li, 9 / 16);
  height: auto;
  margin-inline: auto;
}
.sj-bo-qi.sj-bo-shu-ping .sj-bo-kong {
  width: 100%;
  max-width: min(100%, calc(var(--sj-bo-shu-zui-gao, 78vh) * var(--sj-bo-w, 9) / var(--sj-bo-h, 16)));
}
.sj-bo-ping img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sj-bo-fang {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(80, 80, 80, 0.62);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sj-bo-ming,
.sj-m-bo-ming {
  /* 篇名已在面包屑与浏览器标题中，播放控件下不再重复展示；保留节点供切集脚本与无障碍 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sj-bo-qi {
  background: #111;
  position: relative;
}
/* 真全屏 / 假全屏：画面铺满，控制条叠在底部 */
.sj-bo-qi:fullscreen,
.sj-bo-qi:-webkit-full-screen,
.sj-bo-qi.sj-bo-qi-man {
  width: 100%;
  height: 100%;
  max-width: none;
  background: #000;
  display: flex;
  flex-direction: column;
}
.sj-bo-qi.sj-bo-qi-man {
  position: fixed;
  inset: 0;
  z-index: 2000;
}
.sj-bo-qi:fullscreen .sj-bo-ping,
.sj-bo-qi:-webkit-full-screen .sj-bo-ping,
.sj-bo-qi.sj-bo-qi-man .sj-bo-ping {
  flex: 1;
  aspect-ratio: auto;
  min-height: 0;
  width: 100%;
  height: auto;
}
/* 全屏时竖片也铺满，不再用页面内的立框限宽 */
.sj-bo-qi:fullscreen.sj-bo-shu-ping .sj-bo-ping,
.sj-bo-qi:-webkit-full-screen.sj-bo-shu-ping .sj-bo-ping,
.sj-bo-qi.sj-bo-qi-man.sj-bo-shu-ping .sj-bo-ping {
  width: 100%;
  max-width: none;
  max-height: none;
  margin-inline: 0;
}
.sj-bo-qi:fullscreen.sj-bo-shu-ping .sj-bo-kong,
.sj-bo-qi:-webkit-full-screen.sj-bo-shu-ping .sj-bo-kong,
.sj-bo-qi.sj-bo-qi-man.sj-bo-shu-ping .sj-bo-kong {
  max-width: none;
}
.sj-bo-qi:fullscreen .sj-bo-kong,
.sj-bo-qi:-webkit-full-screen .sj-bo-kong,
.sj-bo-qi.sj-bo-qi-man .sj-bo-kong {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
  border-top: 0;
  color: #f4f2ee;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sj-bo-qi:fullscreen.sj-bo-kong-xian .sj-bo-kong,
.sj-bo-qi:-webkit-full-screen.sj-bo-kong-xian .sj-bo-kong,
.sj-bo-qi.sj-bo-qi-man.sj-bo-kong-xian .sj-bo-kong,
.sj-bo-qi:fullscreen.sj-bo-zan-ting .sj-bo-kong,
.sj-bo-qi:-webkit-full-screen.sj-bo-zan-ting .sj-bo-kong,
.sj-bo-qi.sj-bo-qi-man.sj-bo-zan-ting .sj-bo-kong {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sj-bo-qi:fullscreen .sj-bo-an,
.sj-bo-qi:-webkit-full-screen .sj-bo-an,
.sj-bo-qi.sj-bo-qi-man .sj-bo-an {
  color: #f6f5f2;
  background: rgba(28, 28, 28, 0.72);
  border-color: rgba(255, 255, 255, 0.38);
}
.sj-bo-qi:fullscreen .sj-bo-an:hover,
.sj-bo-qi:-webkit-full-screen .sj-bo-an:hover,
.sj-bo-qi.sj-bo-qi-man .sj-bo-an:hover,
.sj-bo-qi:fullscreen .sj-bo-an.on,
.sj-bo-qi:-webkit-full-screen .sj-bo-an.on,
.sj-bo-qi.sj-bo-qi-man .sj-bo-an.on {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.sj-bo-qi:fullscreen .sj-bo-bei,
.sj-bo-qi:-webkit-full-screen .sj-bo-bei,
.sj-bo-qi.sj-bo-qi-man .sj-bo-bei,
.sj-bo-qi:fullscreen .sj-bo-shi-jian,
.sj-bo-qi:-webkit-full-screen .sj-bo-shi-jian,
.sj-bo-qi.sj-bo-qi-man .sj-bo-shi-jian {
  color: #f4f2ee;
}
.sj-bo-qi:fullscreen .sj-bo-bei-xuan,
.sj-bo-qi:-webkit-full-screen .sj-bo-bei-xuan,
.sj-bo-qi.sj-bo-qi-man .sj-bo-bei-xuan {
  color: #f6f5f2;
  background: rgba(28, 28, 28, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23f4f2ee' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 10px center;
  border-color: rgba(255, 255, 255, 0.38);
}
.sj-bo-qi:fullscreen .sj-bo-tiao,
.sj-bo-qi:-webkit-full-screen .sj-bo-tiao,
.sj-bo-qi.sj-bo-qi-man .sj-bo-tiao {
  background: linear-gradient(
    to right,
    #f4f2ee 0%,
    #f4f2ee var(--jin-du, 0%),
    rgba(255, 255, 255, 0.28) var(--jin-du, 0%),
    rgba(255, 255, 255, 0.28) 100%
  );
}
.sj-bo-qi:fullscreen .sj-bo-tiao::-webkit-slider-thumb,
.sj-bo-qi:-webkit-full-screen .sj-bo-tiao::-webkit-slider-thumb,
.sj-bo-qi.sj-bo-qi-man .sj-bo-tiao::-webkit-slider-thumb {
  background: #f4f2ee;
}
.sj-bo-qi:fullscreen .sj-bo-da-bo,
.sj-bo-qi:-webkit-full-screen .sj-bo-da-bo,
.sj-bo-qi.sj-bo-qi-man .sj-bo-da-bo {
  z-index: 5;
}
.sj-bo-shi-pin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 默认等比；需要单独拉宽拉高时在外层设 --sj-bo-shi-pin-fit: fill */
  object-fit: var(--sj-bo-shi-pin-fit, contain);
  background: #111;
  border: 0;
}
.sj-bo-wu {
  position: absolute;
  inset: 0;
}
.sj-bo-wu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sj-bo-wu-wen {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
  color: #f4f2ee;
  font-size: 15px;
}
.sj-bo-da-bo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: rgba(80, 80, 80, 0.62);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sj-bo-kong {
  padding: 10px 14px 12px;
  background: #fbfaf8;
  border-top: 1px solid #eceae6;
}
.sj-bo-jin-du-hang {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  min-width: 0;
}
.sj-bo-tiao {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 4px;
  margin: 0;
  padding: 0;
  appearance: none;
  border-radius: 2px;
  cursor: pointer;
  /* --jin-du 由 JS 写入，WebM 无 duration 时也能看见进度 */
  background: linear-gradient(
    to right,
    #262523 0%,
    #262523 var(--jin-du, 0%),
    #e4e2de var(--jin-du, 0%),
    #e4e2de 100%
  );
}
.sj-bo-tiao::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #262523;
}
.sj-bo-kong-hang {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sj-bo-kong-hang::-webkit-scrollbar {
  display: none;
}
.sj-bo-zuo,
.sj-bo-you-kong {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.sj-bo-you-kong {
  margin-left: auto;
}
.sj-bo-an {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid #d4d2cd;
  border-radius: 999px;
  background: #fff;
  color: #2a2a28;
  font-family: inherit;
  font-size: 15.5px;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}
.sj-bo-an-zhu {
  min-width: 92px;
  padding: 9px 18px;
}
.sj-bo-an.on,
.sj-bo-an:hover {
  background: #262523;
  border-color: #262523;
  color: #f6f5f2;
}
.sj-bo-bei {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15.5px;
  color: #8b8b88;
  flex: none;
}
.sj-bo-bei-xuan {
  appearance: none;
  padding: 8px 26px 8px 12px;
  border: 1px solid #d4d2cd;
  border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: #2a2a28;
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.2;
  cursor: pointer;
}
.sj-bo-shi-jian {
  flex: none;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: #8b8b88;
  white-space: nowrap;
}

/* 窄屏：进度一行；控件图标单行均分，禁止折行 */
@media (max-width: 900px) {
  .sj-bo-kong {
    padding: 8px 8px 10px;
  }
  .sj-bo-jin-du-hang {
    gap: 6px;
    margin: 0 0 8px;
  }
  .sj-bo-kong-hang {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    align-items: center;
    overflow: visible;
  }
  .sj-bo-zuo,
  .sj-bo-you-kong {
    display: contents;
  }
  .sj-bo-an {
    padding: 8px 0;
    min-width: 0;
    width: 100%;
    justify-content: center;
    flex: none;
    border-radius: 8px;
    font-size: 14px;
  }
  .sj-bo-an-zhu {
    min-width: 0;
    padding: 8px 0;
  }
  .sj-bo-an-wen {
    display: none;
  }
  /* 全屏必须露出来：只藏画中画，全屏保留「全屏」二字 */
  .sj-bo-an[data-action='pip'],
  .sj-bo-an-pip {
    display: none !important;
  }
  .sj-bo-quan-ping,
  .sj-bo-an[data-action='fullscreen'] {
    display: inline-flex !important;
  }
  .sj-bo-quan-ping .sj-bo-an-wen,
  .sj-bo-an[data-action='fullscreen'] .sj-bo-an-wen {
    display: inline;
    font-size: 13px;
  }
  .sj-bo-bei {
    display: flex;
    width: 100%;
    min-width: 0;
    justify-content: center;
    margin: 0;
  }
  .sj-bo-bei > .sj-bo-an-wen {
    display: none;
  }
  .sj-bo-bei-xuan {
    width: 100%;
    max-width: none;
    padding: 8px 16px 8px 4px;
    font-size: 14px;
    text-align: center;
    background-position: right 4px center;
    border-radius: 8px;
  }
  .sj-bo-shi-jian {
    font-size: 13px;
    letter-spacing: -0.03em;
    max-width: 6.2em;
    overflow: hidden;
    text-overflow: clip;
  }
}

/* 手机站播放条：无论视口宽度，都保证全屏在、画中画让位 */
[data-terminal='mobile'] .sj-bo-kong-hang {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  overflow: visible;
}
[data-terminal='mobile'] .sj-bo-zuo,
[data-terminal='mobile'] .sj-bo-you-kong {
  display: contents;
}
[data-terminal='mobile'] .sj-bo-an-zhu {
  min-width: 0;
  padding: 8px 0;
}
[data-terminal='mobile'] .sj-bo-an-pip,
[data-terminal='mobile'] .sj-bo-an[data-action='pip'] {
  display: none !important;
}
[data-terminal='mobile'] .sj-bo-quan-ping,
[data-terminal='mobile'] .sj-bo-an[data-action='fullscreen'] {
  display: inline-flex !important;
}
[data-terminal='mobile'] .sj-bo-quan-ping .sj-bo-an-wen {
  display: inline;
  font-size: 12.5px;
}
.sj-bo-fan {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px 14px;
  align-items: stretch;
}
/* 前篇 / 讲义 / 后篇：图标与文字同一行，降低按钮高度 */
.sj-bo-fan .sj-an-bai,
.sj-bo-fan .sj-an-hei {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: row;
  gap: 6px;
  padding: 10px 12px;
  justify-content: center;
  align-items: center;
}
.sj-bo-fan .sj-bo-fan-jiang[hidden] {
  display: none !important;
}
.sj-bo-fan button:disabled,
.sj-bo-fan [aria-disabled="true"] {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}
.sj-m-bo-bao {
  margin: 8px 12px 4px;
  background: #fbfaf8;
  border: 1px solid #e6e4e0;
  overflow: hidden;
}
.sj-bo-ce {
  background: #fbfaf8;
  border: 1px solid #e6e4e0;
  padding: 18px 20px;
}
.sj-bo-ce h3 {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e0dc;
}
.sj-bo-hang {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid #eceae6;
  text-decoration: none;
  color: inherit;
}
.sj-bo-hang.on {
  background: #f0efec;
}
.sj-bo-hao {
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  flex: none;
  border-radius: 17px;
  border: 1px solid #d4d2cd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
  box-sizing: border-box;
}
.sj-bo-hang.on .sj-bo-hao {
  background: #262523;
  border-color: #262523;
  color: #f6f5f2;
}
.sj-bo-hang-w {
  flex: 1;
  min-width: 0;
}
.sj-bo-hang-t {
  font-size: 16px;
  color: #222;
}
.sj-bo-hang-s {
  margin: 4px 0 0;
  font-size: 13px;
  color: #9a9a97;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.sj-bo-you {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  text-align: right;
  min-width: 3.2em;
}
.sj-bo-shi {
  font-size: 15px;
  color: #6f6f6c;
  flex: none;
}
.sj-bo-yuan {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #cfcdc9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #555;
  flex: none;
}

/* —— 登录页 —— */
.sj-dl-mu {
  position: relative;
  overflow: hidden;
  background: #efeeea;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}
.sj-dl-ka {
  position: relative;
  z-index: 1;
  width: min(530px, 100%);
  background: #fff;
  padding: 52px 46px 48px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.sj-dl-ti {
  margin: 0 0 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.06em;
}
.sj-dl-qie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-bottom: 28px;
}
.sj-dl-qie button {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 19px;
  color: #9b9b98;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sj-dl-qie button.on {
  color: #111;
  font-weight: 700;
}
.sj-dl-qie span {
  color: #cfcdc9;
}
.sj-shu {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid #dcdad6;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  color: #222;
}
.sj-shu::placeholder {
  color: #a8a8a5;
}
.sj-dl-jin {
  width: 100%;
  margin-top: 18px;
  padding: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--sj-an);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 18px;
  cursor: pointer;
}
.sj-dl-jin:hover {
  background: #3a3a3a;
}
/* 成语点选格 */
.sj-zi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.sj-zi button {
  padding: 14px 0;
  border: 1px solid #dcdad6;
  border-radius: 4px;
  background: #fff;
  font-family: var(--font-display);
  font-size: 22px;
  color: #222;
  cursor: pointer;
}
.sj-zi button:hover {
  border-color: #a9a7a3;
}
.sj-zi button.on {
  background: #4a4a4a;
  color: #fff;
  border-color: #4a4a4a;
}

/* —— 用户中心 —— */
.sj-yh-tou {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.sj-yh-shu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #f0efec;
  border: 1px solid #e3e1dc;
  padding: 20px 26px;
  margin-bottom: 22px;
}
.sj-yh-shu div span {
  display: block;
  font-size: 15px;
  color: #77766f;
}
.sj-yh-shu div b {
  display: block;
  margin-top: 6px;
  font-size: 34px;
  font-weight: 700;
  color: #1c1c1c;
}
.sj-yh-jin {
  height: 6px;
  background: #dcdad6;
  border-radius: 3px;
  overflow: hidden;
}
.sj-yh-jin i {
  display: block;
  height: 100%;
  background: #3d3d3d;
}

/* —— 页脚 —— */
.sj-jiao {
  background: var(--sj-zhi-shen);
  border-top: 1px solid #e0ded9;
  text-align: center;
  padding: 30px 24px 34px;
}
.sj-jiao b {
  display: block;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  color: #1c1c1c;
  letter-spacing: 0.04em;
}
.sj-jiao-kou {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  color: #5c5b56;
  letter-spacing: 0.04em;
}
.sj-jiao i {
  display: block;
  font-style: normal;
  margin-top: 4px;
  font-size: 14px;
  color: #98978f;
}
.sj-jiao p {
  margin: 12px 0 0;
  font-size: 15px;
  color: #85847d;
  line-height: 1.9;
}
.sj-jiao a {
  color: inherit;
  text-decoration: none;
}
.sj-jiao .sj-ban-quan a {
  text-decoration: underline;
}
.sj-jiao-lian {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 16px auto 0;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.8;
}
.sj-jiao-lian a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #5c5b56;
}
.sj-jiao-tu {
  opacity: 0.7;
  flex: none;
}
.sj-jiao-lian a:hover {
  color: #1c1c1c;
}
.sj-jiao-lian-m {
  padding: 8px 16px 12px;
  justify-content: flex-start;
  font-size: 14px;
}
.sj-ban-quan-m {
  padding: 0 16px 88px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: #85847d;
  line-height: 1.85;
}
.sj-ban-quan-m a {
  color: inherit;
  text-decoration: underline;
}
.sj-mian-bao {
  max-width: 1120px;
  margin: 12px auto 0;
  padding: 0 24px;
  font-size: 15px;
  color: #8a8984;
}
/* 书籍详情：面包屑落在水墨底纹区内 */
.sj-xq .sj-mian-bao {
  margin: 0 0 14px;
  padding: 0;
  max-width: none;
}
.sj-mian-bao a {
  color: #6a6964;
  text-decoration: none;
}
.sj-mian-bao-ge {
  margin: 0 8px;
  color: #c5c3bd;
}
.sj-mian-bao-m {
  padding: 8px 16px 0;
  font-size: 14px;
}
/* banner 正下方时略收紧与内容的间距 */
.sj-hero + .sj-mian-bao,
.sj-sou-hero + .sj-mian-bao {
  margin-top: 10px;
}
.sj-m-fu-he + .sj-mian-bao {
  margin-top: 0;
}
/* SEO 导读 / FAQ / 相关专题：与书卡同一套纸色 */
.sj-seo-kuai {
  margin-top: 28px;
  padding: 22px 24px 20px;
  background: #fbfaf8;
  border: 1px solid #e3e1dc;
  border-radius: 3px;
  font-size: 16px;
  line-height: 1.95;
  color: #3a3936;
}
.sj-seo-kuai > p:last-child,
.sj-seo-kuai p:last-child {
  margin-bottom: 0;
}
.sj-seo-kuai p {
  margin: 0 0 12px;
}
.sj-seo-kuai a {
  color: #8c2f26;
  text-decoration: none;
}
.sj-seo-kuai a:hover {
  text-decoration: underline;
}
.sj-seo-ti {
  margin: 0 0 16px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #141414;
  letter-spacing: 0.04em;
}
.sj-seo-ti::before {
  content: '';
  width: 4px;
  height: 16px;
  background: #8c2f26;
  border-radius: 1px;
  flex: none;
  margin-top: 18px;
}
.sj-seo-kuai-m {
  margin: 8px 12px 16px;
  padding: 16px 16px 14px;
  font-size: 15.5px;
  line-height: 1.9;
  border-radius: 8px;
}
.sj-seo-kuai-m .sj-seo-ti {
  font-size: 17px;
  margin-bottom: 12px;
}
.sj-wen-da {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.sj-wen-tiao {
  padding: 12px 14px 13px;
  background: #f6f5f1;
  border: 1px solid #ebe8e2;
  border-radius: 2px;
}
.sj-seo-kuai-m .sj-wen-tiao {
  border-radius: 6px;
  padding: 11px 12px 12px;
}
.sj-wen-da dt {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.55;
}
.sj-wen-da dt::before {
  content: '问';
  display: inline-block;
  margin-right: 8px;
  padding: 0 5px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #f7f4ef;
  background: #8c2f26;
  border-radius: 1px;
  letter-spacing: 0.08em;
  vertical-align: 1px;
}
.sj-wen-da dd {
  margin: 8px 0 0;
  padding-left: 2px;
  color: #5a5955;
  font-size: 15.5px;
  line-height: 1.85;
}
.sj-seo-kuai-m .sj-wen-da dt {
  font-size: 16px;
}
.sj-seo-kuai-m .sj-wen-da dd {
  font-size: 15px;
}
.sj-guan-lian {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sj-guan-lian a {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid #e3e1dc;
  border-radius: 999px;
  background: #f7f6f3;
  color: #2a2a28;
  font-family: var(--font-display);
  font-size: 15.5px;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.sj-guan-lian a:hover {
  border-color: #8c2f26;
  color: #8c2f26;
  background: #fbf6f4;
  text-decoration: none;
}
.sj-seo-kuai-m .sj-guan-lian a {
  padding: 6px 12px;
  font-size: 15px;
}
.sj-lu-jing-ka {
  display: block;
  border: 1px solid #d8d6d1;
  background: rgba(252, 251, 249, 0.8);
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
}
.sj-lu-jing-ka + .sj-lu-jing-ka {
  margin-top: 12px;
}
.sj-lu-jing-ka b {
  display: block;
  font-size: 18px;
}
.sj-lu-jing-ka span {
  display: block;
  margin-top: 6px;
  font-size: 15.5px;
  color: #6f6f6c;
}
.sj-di-tu {
  font-size: 16px;
  line-height: 1.9;
}
.sj-di-tu a {
  color: #33332f;
}
.sj-di-tu ul {
  margin: 8px 0 18px;
  padding-left: 1.2em;
}


@media (max-width: 900px) {
  .sj-nav-cai {
    display: none;
  }
  /* 书卡网格：再窄也至少两列，禁止一排一张撑满屏 */
  .sj-san {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .sj-xq-ge,
  .sj-bo-ge {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .sj-kuan-tu {
    width: 140px;
  }
}
@media (max-width: 520px) {
  .sj-san {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .sj-ka-wen {
    padding: 12px 12px 14px;
  }
}

/* ============================ 手机端 ============================ */
.sj-m-body {
  background: var(--sj-zhi);
  color: var(--sj-mo-2);
  padding-bottom: 74px;
}
.sj-m-shell {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--sj-zhi);
}
/* 顶部品牌 */
.sj-m-tou {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px 10px;
  position: relative;
}
.sj-m-tou-an {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sj-m-tou-an .sj-fang {
  width: 34px;
  height: 34px;
}
.sj-m-tou b {
  font-family: var(--font-brand);
  font-size: 34px;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.08em;
  line-height: 1;
}
.sj-m-tou a {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* 顶部水墨横幅（可叠收藏按钮与大题） */
.sj-m-fu-he {
  position: relative;
  overflow: hidden;
  background: #f3efe6;
}
/* 右侧题字浅纱，压住水墨底纹 */
.sj-m-fu-he::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 22%,
    rgba(245, 242, 235, 0.45) 52%,
    rgba(245, 242, 235, 0.72) 100%
  );
}
.sj-m-fu {
  width: 100%;
  height: 200px;
  object-fit: cover;
  /* 偏左取景，右侧留白给题字（与电脑端英雄区一致） */
  object-position: left center;
  display: block;
}
.sj-m-fu-wen {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 16px 18px 38%;
  text-align: center;
  pointer-events: none;
  box-sizing: border-box;
}
.sj-m-fu-ti {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-zhuan);
  font-weight: 400;
  font-size: clamp(30px, 9.2vw, 44px);
  line-height: 1.12;
  color: var(--sj-zhu);
  letter-spacing: 0.14em;
  font-synthesis: none;
  -webkit-text-stroke: 0;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85),
    0 0 14px rgba(245, 242, 235, 0.95),
    0 2px 10px rgba(245, 242, 235, 0.8);
}
.sj-m-fu-ti-song {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.sj-m-fu-ti-chang {
  font-size: clamp(22px, 6.8vw, 32px);
  letter-spacing: 0.04em;
}
.sj-m-fu-fu {
  margin: 10px 0 0;
  max-width: 100%;
  padding: 6px 12px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.45;
  color: #1f1e1c;
  letter-spacing: 0.04em;
  background: rgba(252, 251, 248, 0.84);
  border: 1px solid rgba(173, 171, 167, 0.42);
  border-radius: 2px;
  box-shadow: 0 1px 6px rgba(245, 242, 235, 0.5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.sj-m-fu-cang {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: rgba(252, 251, 248, 0.92);
  color: #1c1c1c;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.sj-m-fu-cang.on {
  background: #262523;
  border-color: #262523;
  color: #f6f5f2;
}
/* 分节标题（前置墨笔触） */
.sj-m-jie {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 12px;
}
.sj-m-jie::before {
  content: "";
  width: 7px;
  height: 24px;
  flex: none;
  background: linear-gradient(180deg, #1f1f1f 0%, #3d3d3d 55%, rgba(60, 60, 60, 0.25) 100%);
  border-radius: 40% 40% 45% 45% / 12% 12% 60% 60%;
  transform: rotate(-3deg);
}
.sj-m-jie h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: #141414;
  letter-spacing: 0.04em;
}
.sj-m-jie h1 .sj-jie-zhu,
.sj-m-jie h2 .sj-jie-zhu {
  align-items: flex-start;
  text-align: left;
}
/* 个人中心九宫格（避免横滑胶囊没人发现） */
.sj-m-jiu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px 8px;
}
.sj-m-jiu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 88px;
  padding: 12px 6px;
  background: #faf9f7;
  border: 1px solid #e6e4e0;
  border-radius: 10px;
  text-decoration: none;
  color: #33332f;
  font-size: 14px;
  text-align: center;
}
.sj-m-jiu a.on {
  background: #262523;
  border-color: #262523;
  color: #f6f5f2;
}
/* 横向卡片滑轨（设计稿：第三张被屏幕边缘裁切） */
.sj-m-hua {
  display: flex;
  gap: 12px;
  padding: 0 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sj-m-hua::-webkit-scrollbar {
  display: none;
}
.sj-m-ka {
  flex: none;
  width: 158px;
  background: #faf9f7;
  border: 1px solid #e6e4e0;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.sj-m-ka-tu {
  aspect-ratio: 1 / 1;
  background: #f0efec;
  overflow: hidden;
}
.sj-m-ka-tu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sj-m-ka-nei {
  padding: 10px 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.sj-m-ka-ming {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #141414;
  line-height: 1.25;
}
.sj-m-ka-zuo {
  font-size: 14px;
  color: #7d7d7a;
}
.sj-m-ka-ping {
  display: flex;
  gap: 5px;
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #55554f;
}
.sj-m-ka-ping span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sj-m-ka-jia {
  margin-top: auto;
  padding-top: 6px;
  font-size: 14.5px;
  color: #2b2b2b;
}
/* 双列网格（搜索结果） */
.sj-m-shuang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 16px;
}
.sj-m-shuang .sj-m-ka {
  width: auto;
}
.sj-m-shuang .sj-m-ka-tu {
  aspect-ratio: 4 / 5;
}
.sj-m-shuang .sj-m-ka-ming {
  font-size: 19px;
}
/* 分类胶囊 */
.sj-m-wan {
  display: flex;
  gap: 12px;
  padding: 16px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sj-m-wan::-webkit-scrollbar {
  display: none;
}
.sj-m-wan a {
  flex: none;
  min-width: 74px;
  padding: 9px 20px;
  border: 1.5px solid #4a4a48;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-display);
  font-size: 18px;
  color: #1c1c1c;
  text-align: center;
  text-decoration: none;
}
.sj-m-wan a.on {
  background: #3d3d3d;
  color: #fff;
  border-color: #3d3d3d;
}
/* 底部题句 */
.sj-m-ju {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 18px 22px;
  font-family: var(--font-display);
  font-size: 15px;
  color: #3a3a38;
}
.sj-m-ju::before {
  content: "";
  width: 22px;
  height: 9px;
  flex: none;
  background: linear-gradient(105deg, #1f1f1f 20%, rgba(40, 40, 40, 0.25) 100%);
  border-radius: 60% 40% 55% 45% / 70% 60% 40% 30%;
}
/* 手机搜索框（墨迹外框） */
.sj-m-sou {
  position: relative;
  margin: 18px 16px 6px;
}
.sj-m-sou-nei {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fdfdfc;
  border: 1.5px solid #5f6b7a;
  border-radius: 999px;
  padding: 13px 20px;
}
.sj-m-sou-nei input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 17px;
  color: #222;
}
/* 手机详情：上头封面+简介，目录通栏，避免目录左侧大片空白 */
.sj-m-xq {
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: 18px;
  padding: 18px 16px 6px;
  align-items: start;
}
.sj-m-xq-xia {
  padding: 0 16px 8px;
}
.sj-m-xq-feng {
  aspect-ratio: 3 / 4;
  background: #f0efec;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.sj-m-xq-feng img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sj-m-xq-jia {
  margin: 14px 0 0;
  font-size: 21px;
  color: #222;
}
.sj-m-ban,
.sj-xq-ban {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e4e2dd;
  font-size: 13.5px;
  line-height: 1.75;
}
.sj-xq-ce-ping,
.sj-xq-ce-dao,
.sj-m-ce-ping,
.sj-m-ce-dao {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e4e2dd;
}
.sj-xq-ce-ti,
.sj-m-ce-ti {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}
.sj-xq-ce-wen {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #4a4a46;
}
.sj-m-bu-fu {
  margin: 6px 0 0;
  font-size: 14px;
  color: #8c2f26;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sj-m-ban-ti,
.sj-xq-ban-ti {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}
.sj-m-ban dl,
.sj-xq-ban dl {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 8px;
  margin: 0;
}
.sj-m-ban dt,
.sj-xq-ban dt {
  color: #8b8b88;
}
.sj-m-ban dd,
.sj-xq-ban dd {
  margin: 0;
  color: #33332f;
}
.sj-xq-ban {
  font-size: 14px;
}
.sj-xq-ban-ti {
  font-size: 16px;
}
.sj-xq-ban dl {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 6px 10px;
}
.sj-ban-lian {
  margin: 10px 0 0;
  font-size: 14px;
}
.sj-ban-lian a {
  color: #8c2f26;
  text-decoration: none;
}
.sj-m-xq-an {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: stretch;
  margin-top: 20px;
}
.sj-m-wan-an {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 6px 10px;
  border: 1px solid #4a4a48;
  border-radius: 12px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: #1c1c1c;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
.sj-m-xq-ti {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: #141414;
  line-height: 1.2;
}
.sj-m-xq-zuo {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 19px;
  color: #33332f;
}
.sj-m-xq-fen {
  height: 1px;
  background: #d8d6d1;
  margin: 14px 0;
}
.sj-m-xq-wen {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: #46453f;
}
.sj-m-xq-jie {
  margin: 0 0 8px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
}
.sj-m-xq-jie .sj-m-xq-jie-tu {
  color: #8c2f26;
  opacity: 0.88;
}
.sj-m-xq-jie-fu {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 400;
  color: #8b8b88;
  align-self: center;
}
.sj-m-xq-jie-mu {
  scroll-margin-top: 12px;
}
/* 篇目区保证短横屏也能看到列表，不被底栏「吃掉」 */
.sj-ml.sj-ml-xiangqing {
  min-height: min(46vh, 360px);
  padding-bottom: 20px;
  scroll-margin-top: 8px;
}
.sj-xq-xiao .sj-xq-xiao-tu {
  color: #8c2f26;
  opacity: 0.88;
  flex: none;
}
/* 手机播放 */
.sj-m-bo {
  position: relative;
  margin: 10px 12px;
  border-radius: 4px;
  overflow: hidden;
  background: #ddd;
  aspect-ratio: 16 / 11;
}
.sj-m-bo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sj-m-bo-tiao {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 14px 12px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.45));
  color: #fff;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sj-m-hang {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  text-decoration: none;
  color: inherit;
}
.sj-m-hang.on {
  background: #efeeea;
}
.sj-m-hang-hao {
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  flex: none;
  border-radius: 21px;
  border: 1px solid #d4d2cd;
  background: #faf9f7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #33332f;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-sizing: border-box;
}
.sj-m-hang.on .sj-m-hang-hao {
  background: #262523;
  border-color: #262523;
  color: #f6f5f2;
}
.sj-m-hang-t {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  color: #222;
}
.sj-m-hang-you {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.sj-m-hang-s {
  flex: none;
  font-size: 13.5px;
}
.sj-mu-shi {
  font-size: 13.5px;
  color: #9a9a97;
  font-variant-numeric: tabular-nums;
}
.sj-mu-shi:empty {
  display: none;
}
/* 手机通用块卡 */
.sj-m-kuai {
  margin: 0 16px 14px;
  background: #faf9f7;
  border: 1px solid #e6e4e0;
  border-radius: 10px;
  padding: 16px 18px;
}
/* 个人中心统计双卡 */
.sj-m-shuang-kuai {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 16px;
  margin-bottom: 4px;
}
.sj-m-shuang-kuai .sj-m-kuai {
  margin: 0;
}
/* 水墨图铺满整张卡，文字叠在半透明纸色上 */
.sj-m-kuai-man {
  position: relative;
  overflow: hidden;
  min-height: 132px;
}
.sj-m-kuai-bei {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.sj-m-kuai-man::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    rgba(250, 249, 247, 0.86) 0%,
    rgba(250, 249, 247, 0.38) 52%,
    rgba(250, 249, 247, 0.72) 100%
  );
  pointer-events: none;
}
.sj-m-kuai-wen {
  position: relative;
  z-index: 1;
}
.sj-m-kuai-ti {
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: #1c1c1c;
}
.sj-m-kuai-shu {
  margin-top: 14px;
  text-align: center;
}
.sj-m-kuai-shu b {
  font-size: 33px;
  font-weight: 700;
  color: #111;
}
.sj-m-kuai-shu span {
  font-size: 15px;
  color: #33332f;
  margin-left: 4px;
}
.sj-m-da-an {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 32px);
  margin: 0 16px 12px;
  padding: 15px;
  background: #efeeea;
  border: 1px solid #dcdad6;
  border-radius: 8px;
  font-family: inherit;
  font-size: 18px;
  color: #1c1c1c;
  text-decoration: none;
  cursor: pointer;
}
/* 底部 Tab */
.sj-m-dock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  background: #f7f6f3;
  border-top: 1px solid #e0ded9;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 8px 0 calc(9px + env(safe-area-inset-bottom));
  z-index: 60;
}
.sj-m-dock a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--font-meta);
  font-size: 13.5px;
  color: #5c5c59;
  text-decoration: none;
}
.sj-m-dock a.on {
  color: #111;
}

/* 平板 / 宽屏：手机站壳层随屏加宽，网格多列 */
@media (min-width: 600px) {
  .sj-m-shell,
  .sj-m-dock {
    max-width: 720px;
  }
  .sj-m-ge,
  .sj-m-shuang {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sj-m-fen-pai {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  .sj-m-fu {
    height: 220px;
  }
  .sj-m-jie,
  .sj-m-jiu,
  .sj-seo-kuai-m {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* 平板：书籍详情封面加宽，避免中间一条挤、两侧空 */
  .sj-m-xq {
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: 24px;
    padding: 22px 20px 10px;
    max-width: 680px;
    margin: 0 auto;
  }
  .sj-m-xq-xia {
    padding: 0 20px 12px;
    max-width: 680px;
    margin: 0 auto;
  }
  .sj-m-xq-wen {
    font-size: 15.5px;
  }
  .sj-ml.sj-ml-xiangqing {
    min-height: min(52vh, 420px);
  }
}
@media (min-width: 900px) {
  .sj-m-shell,
  .sj-m-dock {
    max-width: 980px;
  }
  .sj-m-ge,
  .sj-m-shuang {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sj-m-fu {
    height: 260px;
  }
  .sj-m-jie h2 {
    font-size: 24px;
  }
  .sj-m-xq,
  .sj-m-xq-xia {
    max-width: 860px;
  }
  .sj-m-xq {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 32px;
  }
}
@media (min-width: 1200px) {
  .sj-m-shell,
  .sj-m-dock {
    max-width: 1100px;
  }
  .sj-m-ge,
  .sj-m-shuang {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }
}
/* 超窄屏：避免横向撑破 */
@media (max-width: 360px) {
  .sj-m-tou b {
    font-size: 28px;
  }
  .sj-m-jie,
  .sj-m-jiu {
    padding-left: 12px;
    padding-right: 12px;
  }
  .sj-m-dock a {
    font-size: 12px;
  }
}
/* 横屏手机：壳层仍满宽，横幅略矮 */
@media (orientation: landscape) and (max-height: 500px) {
  .sj-m-fu {
    height: 120px;
  }
  .sj-m-fu-ti {
    font-size: clamp(20px, 5vw, 28px);
  }
  .sj-m-fu-fu {
    display: none;
  }
  .sj-m-shell,
  .sj-m-dock {
    max-width: min(920px, 100%);
  }
}

.sj-m-body {
  overflow-x: hidden;
}
.sj-m-shell {
  box-sizing: border-box;
  overflow-x: clip;
}


/* ======================================================================
   书封铺满卡片：封面统一 3:4，框也用 3:4，cover 铺满无留白
   ====================================================================== */
.sj-feng {
  display: block;
  background: #f3f2ee;
  position: relative;
  overflow: hidden;
}
.sj-feng > picture.sj-tu-he {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.sj-feng img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top;
  display: block;
}
/* 书封是 3:4 竖版，卡片图框也用 3:4，正好铺满 */
.sj-ka-tu.sj-feng,
.sj-m-ka-tu.sj-feng,
.sj-kuan-tu.sj-feng,
.sj-xq-feng.sj-feng,
.sj-m-xq-feng.sj-feng {
  aspect-ratio: 3 / 4;
}
.sj-m-shuang .sj-m-ka-tu.sj-feng {
  aspect-ratio: 3 / 4;
}

/* ======================================================================
   书库页：经史子集一排 + 全部书籍懒加载网格
   ====================================================================== */
/* 分类横排（PC）：全部 + 经史子集共 5 格，必须一排放下 */
.sj-fen-pai {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
/* 书库总目锚点：避开吸顶导航 */
#zongMu {
  scroll-margin-top: 110px;
}
#shuGe {
  scroll-margin-top: 110px;
}
.sj-fen-kuai {
  display: flex;
  flex-direction: column;
  background: #fbfaf8;
  border: 1px solid #e3e1dc;
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  cursor: pointer;
}
.sj-fen-kuai:hover {
  transform: translateY(-3px);
  border-color: #cbc9c5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.sj-fen-kuai.on {
  border-color: #8c2f26;
  box-shadow: 0 6px 20px rgba(140, 47, 38, 0.14);
}
.sj-fen-tu {
  aspect-ratio: 16 / 9;
  background: #f0efec;
  overflow: hidden;
}
.sj-fen-tu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sj-fen-wen {
  padding: 12px 14px 14px;
}
.sj-fen-ming {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: #141414;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sj-fen-shu {
  margin-left: auto;
  font-size: 15px;
  font-weight: 400;
  color: #8c8b85;
}
.sj-fen-ping {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: #62625d;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 全部书籍网格 */
.sj-shu-ge {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.sj-shu-ge > .sj-ka[hidden] {
  display: none;
}
.sj-lan-shao {
  height: 1px;
}
.sj-lan-zi {
  margin: 26px 0 0;
  text-align: center;
  font-size: 15.5px;
  color: #8c8b85;
}

/* ======================================================================
   目录：有卷则分层（卷签），篇目多则分页
   ====================================================================== */
.sj-ml-zu [hidden] {
  display: none !important;
}
.sj-ml-juan-pai {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.sj-ml-juan-an {
  appearance: none;
  border: 1px solid #e0ded9;
  background: #faf9f6;
  color: #4a4a46;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  font-family: inherit;
}
.sj-ml-juan-an i {
  font-style: normal;
  margin-left: 4px;
  color: #9a9993;
  font-size: 14px;
}
.sj-ml-juan-an.on {
  background: #2c2b28;
  border-color: #2c2b28;
  color: #f6f5f2;
}
.sj-ml-juan-an.on i {
  color: #c8c5bc;
}
.sj-ml-ye {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 16px 0 4px;
  flex-wrap: nowrap;
}
.sj-ml-ye-shi {
  font-size: 13px;
  color: #8c8b85;
  min-width: 0;
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sj-ml-ye-an {
  appearance: none;
  border: 1px solid #d8d6d1;
  background: #fff;
  color: #33332f;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  white-space: nowrap;
}
.sj-ml-ye-an:disabled {
  opacity: 0.4;
  cursor: default;
}
.sj-ml-ye-an:not(:disabled):hover {
  background: #f6f5f2;
}
/* 播放侧栏篇目：单列铺满，避免两列挤左边、右边空 */
.sj-bo-ce .sj-ml-zu {
  display: flex;
  flex-direction: column;
}
/* 播放页叠在下方且较宽时：篇目可两列铺满整宽 */
@media (min-width: 901px) and (max-width: 1099px) {
  .sj-bo-ce .sj-ml-zu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
  .sj-bo-ce .sj-ml-ye {
    grid-column: 1 / -1;
  }
}
.sj-ml-mbo .sj-ml-juan-pai {
  padding: 4px 16px 8px;
}
.sj-ml-mbo .sj-ml-ye {
  padding: 4px 16px 16px;
}
.sj-mu-juan {
  margin-top: 18px;
}
.sj-mu-juan:first-child {
  margin-top: 0;
}
.sj-mu-juan-t {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #8c2f26;
  letter-spacing: 0.06em;
}
.sj-mu-juan-t::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e0ded9;
}
.sj-mu-hang {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px dashed #e8e6e2;
  font-size: 16px;
  color: #33332f;
  text-decoration: none;
}
.sj-mu-hang:hover {
  background: #f6f5f2;
}
.sj-mu-xu {
  flex: none;
  min-width: 3.2em;
  width: auto;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 15px;
  color: #a5a49e;
}
.sj-mu-ming {
  flex: 1;
  min-width: 0;
}
.sj-mu-biao {
  flex: none;
  font-size: 14px;
  color: #9a9a97;
}
.sj-mu-biao.shi {
  color: #8c2f26;
}
.sj-mu-biao.xian {
  color: #3f7d4e;
}
.sj-mu-biao.suo {
  color: #8b8b88;
}
.sj-mu-biao.lu {
  color: #9a9a97;
}

/* ======================================================================
   个人中心：子页导航与列表
   ====================================================================== */
.sj-yh-dao {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
}
.sj-yh-dao a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 1px solid #d8d6d1;
  border-radius: 999px;
  background: #fbfaf8;
  font-size: 15.5px;
  color: #4a4a48;
  text-decoration: none;
}
.sj-yh-dao a:hover {
  border-color: #b9b7b2;
}
.sj-yh-dao a.on {
  background: #262523;
  border-color: #262523;
  color: #f6f5f2;
}
.sj-kong {
  padding: 46px 0;
  text-align: center;
  font-size: 16px;
  color: #8c8b85;
}
.sj-kong a {
  color: #8c2f26;
}
/* 记录行（PC） */
.sj-ji-hang {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 4px;
  border-bottom: 1px solid #e8e6e2;
  text-decoration: none;
  color: inherit;
}
.sj-ji-tu {
  width: 70px;
  height: 94px;
  flex: none;
  background: #f3f2ee;
  border: 1px solid #e6e4e0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sj-ji-tu img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
/* 专题封面是横图，单独铺满 */
.sj-ji-tu.heng {
  width: 118px;
  height: 70px;
}
.sj-ji-tu.heng img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sj-ji-wen {
  flex: 1;
  min-width: 0;
}
.sj-ji-ming {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: #1a1a1a;
}
.sj-ji-fu {
  margin: 4px 0 0;
  font-size: 15px;
  color: #7c7b76;
}
.sj-ji-tiao {
  margin-top: 8px;
  height: 5px;
  background: #eae8e4;
  border-radius: 3px;
  overflow: hidden;
}
.sj-ji-tiao i {
  display: block;
  height: 100%;
  background: #8c2f26;
}
.sj-ji-you {
  flex: none;
  text-align: right;
  font-size: 15px;
  color: #8c8b85;
}
/* 收藏列表「取消」：真按钮 + 心形图标 */
.sj-qu-cang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 12px;
  border: 1px solid #4a4a48;
  border-radius: 999px;
  background: #fff;
  color: #1c1c1c;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}
.sj-qu-cang:hover {
  background: #262523;
  border-color: #262523;
  color: #f6f5f2;
}
/* 收藏页：书籍 / 专题分栏标题 */
.sj-sc-fen {
  display: flex;
  align-items: baseline;
  margin: 4px 16px 0;
  padding: 8px 0 8px;
  border-bottom: 1px solid #d8d6d1;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.06em;
}
.sj-sc-fen span {
  margin-left: auto;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: #8b8b88;
  letter-spacing: 0;
}
/* 手机端记录行 */
.sj-m-ji {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px;
  padding: 12px 0;
  border-bottom: 1px solid #e8e6e2;
  text-decoration: none;
  color: inherit;
}
.sj-m-ji-tu {
  width: 52px;
  height: 70px;
  flex: none;
  background: #f3f2ee;
  border: 1px solid #e6e4e0;
  border-radius: 5px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sj-m-ji-tu img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.sj-m-ji-tu.heng {
  width: 86px;
  height: 52px;
}
.sj-m-ji-tu.heng img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sj-m-ji-wen {
  flex: 1;
  min-width: 0;
}
.sj-m-ji-ming {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 700;
  color: #1a1a1a;
}
.sj-m-ji-fu {
  margin: 3px 0 0;
  font-size: 14px;
  color: #8b8b88;
}
/* 手机端子页导航（横滑胶囊） */
.sj-m-dao {
  display: flex;
  gap: 10px;
  padding: 14px 16px 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sj-m-dao::-webkit-scrollbar {
  display: none;
}
.sj-m-dao a {
  flex: none;
  padding: 7px 15px;
  border: 1px solid #ddd9d3;
  border-radius: 999px;
  background: #faf9f7;
  font-size: 15.5px;
  color: #4a4a48;
  text-decoration: none;
}
.sj-m-dao a.on {
  background: #262523;
  border-color: #262523;
  color: #f6f5f2;
}
/* 手机端书库网格 */
.sj-m-ge {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 16px;
  box-sizing: border-box;
}
.sj-m-ge > * {
  min-width: 0;
}
.sj-m-ge .sj-m-ka {
  width: 100%;
  max-width: none;
  height: 100%;
}
.sj-m-ge .sj-m-ka-tu {
  aspect-ratio: 3 / 4;
}
.sj-m-ge > [hidden] {
  display: none;
}
/* 宽屏下书海/双列网格必须写在基础 2 列规则之后，否则会被覆盖 */
@media (min-width: 600px) {
  .sj-m-ge,
  .sj-m-shuang {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (min-width: 900px) {
  .sj-m-ge,
  .sj-m-shuang {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (min-width: 1200px) {
  .sj-m-ge,
  .sj-m-shuang {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }
}
/* 手机端分类横排（一排四个） */
.sj-m-fen-pai {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 16px 4px;
}
.sj-m-fen-kuai {
  display: block;
  border: 1px solid #e0ded9;
  border-radius: 8px;
  overflow: hidden;
  background: #faf9f7;
  text-decoration: none;
  color: inherit;
}
.sj-m-fen-kuai.on {
  border-color: #8c2f26;
}
.sj-m-fen-kuai .t {
  aspect-ratio: 1 / 1;
  background: #f0efec;
  overflow: hidden;
}
.sj-m-fen-kuai .t img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sj-m-fen-kuai .w {
  padding: 6px 4px 8px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: #1a1a1a;
}
/* ======================================================================
   经典专题：按经史子集分组的紧凑卡（首页全量展示）
   ====================================================================== */
.sj-zt-zu {
  margin-top: 34px;
}
.sj-zt-bu {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.08em;
}
.sj-zt-bu::before {
  content: '';
  width: 4px;
  height: 17px;
  background: #8c2f26;
  border-radius: 1px;
}
.sj-zt-bu span {
  margin-left: auto;
  font-family: var(--font-body, inherit);
  font-size: 15px;
  font-weight: 400;
  color: #8c8b85;
  letter-spacing: 0;
}
.sj-zt-ge {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.sj-zt-ge > [hidden] {
  display: none;
}
.sj-zt-ka {
  display: block;
  padding: 0 0 16px;
  background: #fbfaf8;
  border: 1px solid #e3e1dc;
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.sj-zt-feng {
  aspect-ratio: 4 / 3;
  background: #f0efec;
  overflow: hidden;
}
.sj-zt-feng img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sj-zt-ka .sj-zt-t,
.sj-zt-ka .sj-zt-fu,
.sj-zt-ka .sj-zt-shuo {
  padding-left: 17px;
  padding-right: 17px;
}
.sj-zt-ka .sj-zt-t {
  margin-top: 12px;
}
.sj-zt-ka:hover {
  transform: translateY(-2px);
  border-color: #cbc9c5;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}
.sj-zt-t {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sj-zt-ming {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: #141414;
}
.sj-zt-shu {
  margin-left: auto;
  font-size: 14px;
  color: #8c8b85;
}
.sj-zt-fu {
  margin: 7px 0 0;
  font-size: 15px;
  color: #8c2f26;
  letter-spacing: 0.04em;
}
.sj-zt-shuo {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #7c7b76;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1080px) {
  .sj-zt-ge {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .sj-zt-ge {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .sj-zt-bu {
    font-size: 17px;
    margin-bottom: 10px;
  }
  .sj-zt-ka {
    padding: 0 0 13px;
    border-radius: 8px;
  }
  .sj-zt-ka .sj-zt-t,
  .sj-zt-ka .sj-zt-fu,
  .sj-zt-ka .sj-zt-shuo {
    padding-left: 14px;
    padding-right: 14px;
  }
  .sj-zt-ming {
    font-size: 17px;
  }
}

/**
 * 手机站经典专题固定三列紧凑卡（与电脑打开 /m/ 时一致）。
 * 覆盖上方 600px 单列大卡，真机 / HBuilder / App 都走这一套。
 */
[data-terminal='mobile'] .sj-zt-ge {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
[data-terminal='mobile'] .sj-zt-bu {
  font-size: 17px;
  margin-bottom: 12px;
}
[data-terminal='mobile'] .sj-zt-ka {
  padding: 0 0 12px;
  border-radius: 3px;
}
[data-terminal='mobile'] .sj-zt-ka .sj-zt-t,
[data-terminal='mobile'] .sj-zt-ka .sj-zt-fu,
[data-terminal='mobile'] .sj-zt-ka .sj-zt-shuo {
  padding-left: 10px;
  padding-right: 10px;
}
[data-terminal='mobile'] .sj-zt-t {
  margin-top: 8px;
}
[data-terminal='mobile'] .sj-zt-ming {
  font-size: 17px;
}
[data-terminal='mobile'] .sj-zt-shu {
  font-size: 12.5px;
}
[data-terminal='mobile'] .sj-zt-fu {
  margin-top: 5px;
  font-size: 13.5px;
  letter-spacing: 0;
}
[data-terminal='mobile'] .sj-zt-shuo {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
}

/* 验证码按钮禁用态 */
.sj-an-bai[disabled],
.sj-m-wan-an[disabled],
button[disabled].sj-an-hei {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 1080px) {
  .sj-fen-pai {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sj-shu-ge {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .sj-shu-ge {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* —— 学习路径：阶段节点 —— */
.sj-lj {
  margin-bottom: 48px;
}
.sj-lj-zhou-wai {
  position: relative;
  margin: 0 0 8px;
}
.sj-lj-zhou {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  padding: 4px 36px 14px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.sj-lj-zhou::-webkit-scrollbar {
  display: none;
}
.sj-lj-zhou-wai::before,
.sj-lj-zhou-wai::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 10px;
  width: 36px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.sj-lj-zhou-wai::before {
  left: 0;
  background: linear-gradient(90deg, var(--sj-zhi) 18%, transparent);
}
.sj-lj-zhou-wai::after {
  right: 0;
  background: linear-gradient(270deg, var(--sj-zhi) 18%, transparent);
}
.sj-lj-zhou-wai[data-zuo='1']::before,
.sj-lj-zhou-wai[data-you='1']::after {
  opacity: 1;
}
.sj-lj-jian {
  position: absolute;
  top: 6px;
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #d8d5ce;
  border-radius: 50%;
  background: var(--sj-bai);
  color: #3a3a36;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(40, 36, 28, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.sj-lj-jian-zuo {
  left: 0;
}
.sj-lj-jian-you {
  right: 0;
}
.sj-lj-zhou-wai[data-zuo='1'] .sj-lj-jian-zuo,
.sj-lj-zhou-wai[data-you='1'] .sj-lj-jian-you {
  opacity: 1;
  pointer-events: auto;
}
.sj-lj-jie {
  flex: 1 0 auto;
  min-width: 76px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  color: #6f6f6c;
  font: inherit;
}
.sj-lj-jie:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 17px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 1px;
  background: #cfcbc4;
  pointer-events: none;
}
.sj-lj-yuan {
  width: 34px;
  height: 34px;
  border: 1px solid #2c2c2a;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 15px;
  background: #fbfaf8;
  position: relative;
  z-index: 1;
}
.sj-lj-jie b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.sj-lj-jie.on {
  color: #111;
}
.sj-lj-jie.on .sj-lj-yuan {
  background: #2a2a28;
  color: #f4f1ea;
  font-weight: 700;
}
.sj-lj-ti {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}
.sj-lj-ti span {
  margin-left: 10px;
  font-size: 15.5px;
  font-weight: 400;
  color: #6f6f6c;
}
[data-terminal='mobile'] .sj-lj {
  margin-bottom: 8px;
}
[data-terminal='mobile'] .sj-lj-zhou {
  padding: 4px 36px 14px;
}
[data-terminal='mobile'] .sj-lj-ban {
  padding: 0 0 8px;
}
[data-terminal='mobile'] .sj-lj-ti {
  margin: 0 16px 10px;
  font-size: 16px;
}

/* 微信解锁弹层（书籍页暂时替代在线购买） */
.sj-wx-tan {
  border: 0;
  padding: 0;
  border-radius: 14px;
  width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  background: transparent;
  color: #1c1c1c;
  /* 固定居中，避免部分浏览器 dialog 落在左上角 */
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
}
.sj-wx-tan::backdrop {
  background: rgba(28, 28, 28, 0.45);
}
.sj-wx-tan-nei {
  margin: 0;
  padding: 22px 22px 18px;
  background: #f7f6f3;
  border: 1px solid #e0ded9;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}
.sj-wx-tan-biao {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #1c1c1c;
}
.sj-wx-tan-hao {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #efeae2;
  font-size: 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sj-wx-tan-hao b {
  color: #8c2f26;
  letter-spacing: 0.04em;
  user-select: all;
}
.sj-wx-tan-zhu {
  margin: 8px 0 0;
  font-size: 14px;
  color: #8b8b88;
  text-align: center;
}
.sj-wx-tan-an {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
  flex-wrap: wrap;
}
.sj-wx-tan-an .sj-an-bai,
.sj-wx-tan-an .sj-an-hei,
.sj-wx-tan-an .sj-m-wan-an {
  min-width: 120px;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sj-wx-tan .sj-xq-ti-shi {
  margin: 10px 0 0;
  text-align: center;
  color: #3f7d4e;
  font-size: 15px;
}

/* 站长开通权益 */
.sj-kt-ru {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 10px 16px;
  border: 1px solid #d8d4cc;
  border-radius: 999px;
  color: #2c2c28;
  text-decoration: none;
  font-size: 15.5px;
  background: #f3efe8;
}
.sj-kt-ru:hover {
  border-color: #8c2f26;
  color: #8c2f26;
}
.sj-kt {
  margin: 8px 0 40px;
  padding: 22px 24px;
  border: 1px solid #e0ded9;
  border-radius: 14px;
  background: #faf9f6;
}
.sj-kt-shuo {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.65;
  color: #5c5b56;
}
.sj-kt-hang {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: flex-end;
  margin-bottom: 14px;
}
.sj-kt-hang label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  color: #6f6f6c;
  min-width: 180px;
  flex: 1;
}
.sj-kt-hang input,
.sj-kt-hang select {
  padding: 10px 12px;
  border: 1px solid #d8d4cc;
  border-radius: 8px;
  background: #fff;
  font-size: 16px;
  color: #1c1c1c;
}
.sj-kt-jie {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #efeae2;
  font-size: 15.5px;
  line-height: 1.6;
}
.sj-kt-quan {
  margin: 6px 0 0;
  color: #5c5b56;
  font-size: 15px;
}
.sj-kt-an {
  margin-top: 8px;
}
.sj-kt-m {
  margin: 0 16px 24px;
  padding: 16px;
}
.sj-kt-m .sj-kt-hang label {
  min-width: 100%;
}

/* 学而缘起正文 */
.sj-yq-wen {
  max-width: 720px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 2.2;
  color: #33332f;
}
.sj-yq-wen p {
  margin: 0 0 12px;
}
/* 正文内链：朱红 + 下划线，标明可点 */
.sj-yq-wen a.sj-yq-nei-lian,
.sj-yq-nei-lian {
  color: #8c2f26;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  font-weight: 600;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.sj-yq-wen a.sj-yq-nei-lian:hover,
.sj-yq-nei-lian:hover {
  color: #6b221c;
  text-decoration-thickness: 2px;
}
/* 联系信息卡片列表 */
.sj-yq-lian-lie {
  list-style: none;
  margin: 28px 0 0;
  padding: 6px 0 0;
  border-top: 1px solid #e6e4e0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
.sj-yq-lian-hang {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  background: #f7f5f1;
  border: 1px solid #e8e5df;
  border-radius: 8px;
  min-width: 0;
}
.sj-yq-lian-tu {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #efe8df;
  color: #8c2f26;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sj-yq-lian-wen {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.45;
}
.sj-yq-lian-biao {
  font-size: 12.5px;
  color: #8a8680;
  letter-spacing: 0.04em;
}
.sj-yq-lian-zhi {
  font-size: 15.5px;
  color: #2a2825;
  word-break: break-all;
  text-decoration: none;
}
a.sj-yq-lian-zhi {
  color: #8c2f26;
  font-weight: 600;
}
a.sj-yq-lian-zhi:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sj-yq-fu {
  margin: 0 16px 12px;
  font-size: 15.5px;
  color: #8b8b88;
}
.sj-yq-ka {
  margin: 0 16px 24px;
  background: #faf9f7;
  border: 1px solid #e6e4e0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}
.sj-yq-wen-m {
  padding: 18px 20px 22px;
  font-size: 16px;
  line-height: 1.95;
  max-width: none;
}
.sj-yq-wen-m .sj-yq-lian-lie {
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (max-width: 640px) {
  .sj-yq-lian-lie {
    grid-template-columns: 1fr;
  }
}

/* Banner 下 App / 小程序入口（电脑首页） */
.sj-xz {
  border-bottom: 1px solid var(--sj-xian);
  background: linear-gradient(180deg, #faf9f6 0%, #f4f3f0 100%);
}
.sj-xz-nei {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  align-items: center;
  justify-content: space-between;
}
.sj-xz-zu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  min-width: 0;
}
.sj-xz-biao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #6f6f6c;
  white-space: nowrap;
}
.sj-xz-an-lie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sj-xz-an {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #cfcac2;
  border-radius: 10px;
  background: #fff;
  color: #1c1c1c;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sj-xz-tu {
  display: inline-flex;
  color: #2a2a28;
  flex: none;
}
.sj-xz-an:hover {
  border-color: #8c2f26;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.sj-xz-an b {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  color: #1c1c1c;
}
.sj-xz-an i {
  display: block;
  font-style: normal;
  font-size: 14.5px;
  color: #6f6f6c;
  line-height: 1.2;
  margin-top: 2px;
}
.sj-xz-an-mp {
  background: #f7f6f3;
}
.sj-xz-tan {
  border: 0;
  padding: 0;
  border-radius: 14px;
  width: min(360px, calc(100vw - 32px));
  background: transparent;
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
}
.sj-xz-tan::backdrop {
  background: rgba(28, 28, 28, 0.45);
}
.sj-xz-tan-nei {
  margin: 0;
  padding: 22px;
  background: #f7f6f3;
  border: 1px solid #e0ded9;
  border-radius: 14px;
  text-align: center;
}
.sj-xz-tan-biao {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 20px;
}
.sj-xz-tan-shuo {
  margin: 10px 0 0;
  font-size: 15px;
  color: #6f6f6c;
}
.sj-xz-tan-tu {
  margin: 16px auto 0;
  width: 220px;
  height: 220px;
  background: #fff;
  border: 1px solid #e0ded9;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sj-xz-tan-tu img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.sj-xz-tan-an {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
.sj-xz-tan-lian {
  margin: 12px 0 0;
  font-size: 15px;
}
.sj-xz-tan-lian a {
  color: #8c2f26;
  text-decoration: underline;
}