/* ============ 荒野之书 · 页头 ============ */

.book-hero {
  padding-bottom: 0.44rem;
  background-image:
    var(--ridge),
    radial-gradient(120% 76% at 8% -6%, rgba(78, 145, 116, 0.5) 0%, rgba(78, 145, 116, 0) 62%),
    radial-gradient(86% 62% at 102% 2%, rgba(201, 162, 39, 0.22) 0%, rgba(201, 162, 39, 0) 58%),
    linear-gradient(168deg, #0a1d16 0%, #14352b 46%, #23503f 100%);
  background-repeat: no-repeat;
  background-position: bottom center, center, center, center;
  background-size: 100% 58%, 100% 100%, 100% 100%, 100% 100%;
}

/* 右上熊头水印 */
.bh-bear {
  position: absolute;
  top: 0.4rem;
  right: 0.3rem;
  width: 1.48rem;
  height: 1.03rem;
  opacity: 0.32;
}

/* 数据行：10 章 · 30 课 · 7 专题 */
.bh-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.32rem;
}

.bh-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
}

.bh-num {
  font-size: 0.44rem;
  font-weight: 800;
  line-height: 1;
  color: #e8c65a;
}

.bh-cap {
  font-size: 0.2rem;
  letter-spacing: 0.02rem;
  color: rgba(238, 244, 240, 0.72);
}

.bh-sep {
  width: 0.02rem;
  height: 0.48rem;
  background: rgba(255, 255, 255, 0.18);
}

/* ============ 两大板块切换 ============ */

.book-tabs {
  display: flex;
  gap: 0.14rem;
  margin: -0.06rem 0.24rem 0.06rem;
}

.bt {
  flex: 1;
  padding: 0.22rem 0.24rem;
  border-radius: var(--wb-radius);
  background: var(--wb-card);
  border: 0.01rem solid var(--wb-hair);
}

.bt-name {
  font-size: 0.28rem;
  font-weight: 700;
  color: var(--wb-ink-2);
}

.bt-sub {
  margin-top: 0.04rem;
  font-size: 0.2rem;
  color: var(--wb-muted);
}

.bt.on {
  background: var(--wb-green);
  border-color: var(--wb-green);
  box-shadow: 0 0.1rem 0.24rem rgba(20, 53, 43, 0.24);
}

.bt.on .bt-name {
  color: #fff;
}

.bt.on .bt-sub {
  color: rgba(255, 255, 255, 0.72);
}

/* ============ 板块引言 ============ */

.book-intro {
  margin: 0.06rem 0 0.1rem;
  font-size: 0.23rem;
  line-height: 1.8;
  color: var(--wb-muted);
}

/* ============ 知识库卡（两列宫格） ============ */

.kb-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
  margin-top: 0.14rem;
}

.kb-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: calc((100% - 0.18rem) / 2);
  border-radius: var(--wb-radius);
  background: var(--wb-card);
  border: 0.01rem solid var(--wb-hair);
  overflow: hidden;
}

.kb-img {
  display: block;
  width: 100%;
  height: 2.52rem;
}

.kb-pad {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.18rem 0.2rem 0.22rem;
}

.kb-tag {
  display: inline-block;
  padding: 0.05rem 0.14rem;
  font-size: 0.19rem;
  letter-spacing: 0.01rem;
  color: var(--wb-green);
  background: var(--wb-green-mist);
  border-radius: 9.99rem;
}

.kb-tag.soon {
  color: var(--wb-clay);
  background: var(--wb-clay-soft);
}

.kb-name {
  margin-top: 0.1rem;
  font-size: 0.27rem;
  font-weight: 700;
  color: var(--wb-green);
}

.kb-desc {
  margin-top: 0.06rem;
  font-size: 0.2rem;
  line-height: 1.65;
  color: var(--wb-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ============ 30 课：分类与课程卡 ============ */

.book-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.12rem;
  margin: 0.04rem 0 0.06rem;
}

.chip {
  padding: 0.08rem 0.22rem;
  font-size: 0.21rem;
  letter-spacing: 0.01rem;
  color: var(--wb-green);
  background: var(--wb-card);
  border: 0.01rem solid var(--wb-hair);
  border-radius: 9.99rem;
}

.cat-h {
  display: flex;
  align-items: center;
  margin: 0.3rem 0 0.04rem;
  font-size: 0.27rem;
  font-weight: 700;
  color: var(--wb-green);
}

.cat-dot {
  width: 0.14rem;
  height: 0.14rem;
  margin-right: 0.12rem;
  border-radius: 50%;
  background: var(--wb-gold);
}

.cat-en {
  margin-left: 0.1rem;
  font-size: 0.19rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
  color: var(--wb-faint);
}

.cat-note {
  margin: 0.04rem 0 0.1rem;
  font-size: 0.21rem;
  line-height: 1.6;
  color: var(--wb-muted);
}

/* 课目宫格：两列图文卡（与知识库宫格同宽同距），封面走 CDN 不占主包 */
.les-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
  margin-top: 0.14rem;
}

.les-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: calc((100% - 0.18rem) / 2);
  border-radius: var(--wb-radius);
  background: var(--wb-card);
  border: 0.01rem solid var(--wb-hair);
  overflow: hidden;
}

.les-imgwrap {
  position: relative;
}

.les-img {
  display: block;
  width: 100%;
  height: 2.28rem; /* 3:2，与 900×600 封面原图同比例 */
}

/* 左上：第 N 课 */
.les-no {
  position: absolute;
  top: 0.14rem;
  left: 0.14rem;
  padding: 0.04rem 0.14rem;
  font-size: 0.19rem;
  font-weight: 700;
  letter-spacing: 0.01rem;
  color: #fff;
  background: rgba(20, 53, 43, 0.8);
  border-radius: 9.99rem;
}

/* 右上：连载中 / 收藏款 */
.les-corner {
  position: absolute;
  top: 0.14rem;
  right: 0.14rem;
  padding: 0.04rem 0.12rem;
  font-size: 0.18rem;
  letter-spacing: 0.01rem;
  border-radius: 9.99rem;
}

.les-corner.lock {
  color: #fff;
  background: rgba(16, 26, 22, 0.55);
}

.les-corner.hot {
  color: #4a3a10;
  background: rgba(232, 198, 90, 0.94);
}

.les-pad {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.16rem 0.18rem 0.2rem;
}

.les-name {
  font-size: 0.25rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--wb-ink-900);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.les-hook {
  margin-top: 0.08rem;
  font-size: 0.2rem;
  line-height: 1.6;
  color: var(--wb-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 连载中的课：整体降一点存在感，点卡片走公众号引导 */
.les-card.locked .les-img {
  opacity: 0.82;
}

.les-card.locked .les-name {
  color: var(--wb-muted);
}

/* ============ 30 课全目录 · 公众号 ============ */

.follow-card {
  display: flex;
  align-items: center;
  gap: 0.24rem;
  margin-top: 0.26rem;
  padding: 0.26rem;
  border-radius: var(--wb-radius);
  background: var(--wb-green);
  box-shadow: 0 0.12rem 0.28rem rgba(20, 53, 43, 0.22);
}

.follow-qr {
  flex-shrink: 0;
  width: 1.68rem;
  height: 1.68rem;
  border-radius: 0.12rem;
  background: #fff;
  padding: 0.08rem;
  box-sizing: border-box;
}

.follow-body {
  flex: 1;
  min-width: 0;
}

.follow-t {
  font-size: 0.28rem;
  font-weight: 700;
  color: #fff;
}

.follow-d {
  margin-top: 0.08rem;
  font-size: 0.22rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

.follow-hint {
  margin-top: 0.1rem;
  font-size: 0.19rem;
  color: rgba(255, 255, 255, 0.55);
}

/* 未开放篇目的标签（第二篇起 · 公众号连载） */
.chip-lock {
  color: var(--wb-muted);
  border-style: dashed;
}

/* ============ 第 7 课起 · 公众号连载弹窗 ============ */

.ms-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  background: rgba(16, 26, 22, 0.55);
}

.ms-sheet {
  position: relative;
  width: 100%;
  padding: 0.48rem 0.4rem calc(0.48rem + env(safe-area-inset-bottom));
  border-radius: 0.32rem 0.32rem 0 0;
  background: var(--wb-paper);
  box-sizing: border-box;
  animation: ms-up 0.22s ease-out;
}

@keyframes ms-up {
  from {
    transform: translateY(0.4rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.ms-close {
  position: absolute;
  top: 0.14rem;
  right: 0.24rem;
  width: 0.64rem;
  height: 0.64rem;
  font-size: 0.46rem;
  line-height: 0.6rem;
  text-align: center;
  color: var(--wb-faint);
}

.ms-eyebrow {
  font-size: 0.19rem;
  letter-spacing: 0.03rem;
  color: var(--wb-gold);
}

.ms-t {
  margin-top: 0.1rem;
  font-size: 0.38rem;
  font-weight: 700;
  color: var(--wb-ink-900);
}

.ms-d {
  margin-top: 0.12rem;
  font-size: 0.23rem;
  line-height: 1.75;
  color: var(--wb-muted);
}

.ms-qr-wrap {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}

.ms-qr {
  width: 4rem;
  height: 4rem;
  padding: 0.14rem;
  border-radius: 0.16rem;
  background: #fff;
  box-shadow: var(--sh-2);
  box-sizing: border-box;
}

.ms-hint {
  margin-top: 0.2rem;
  text-align: center;
  font-size: 0.21rem;
  color: var(--wb-faint);
}