/* 乌乌和玄玄的书单 · 移动端原生细腻 · 卡片流（知乎式层级） */

:root{
  --bg: #f7f7f8;
  --paper:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line: rgba(17,24,39,.10);
  --shadow: 0 6px 18px rgba(17,24,39,.06);
  --radius: 16px;
  --tap: rgba(17,24,39,.06);
  --accent:#2563eb;

  --max: 720px;
  --pad: 16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* 顶部栏：安全区友好 */
.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top);
  background: rgba(247,247,248,.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(17,24,39,.08);
}
.topbar-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.brand{
  font-weight: 700;
  letter-spacing: .2px;
}
.topnav{
  display:flex;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.topnav a{
  padding: 8px 10px;
  border-radius: 999px;
}
.topnav a:hover{ background: rgba(17,24,39,.04); }
.topnav a:active{ background: var(--tap); }

.page{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--pad) 28px;
}

/* Hero */
.hero{ padding: 8px 0 8px; }
.hero-title{
  font-size: 22px;
  line-height: 1.25;
  margin: 8px 0 6px;
  letter-spacing: .2px;
}
.hero-subtitle{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}

/* Search */
.search{
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(17,24,39,.02);
  overflow:hidden;
}
.search-input{
  width:100%;
  padding: 14px 44px 14px 14px;
  border:0;
  outline:0;
  font-size: 16px; /* iOS 不缩放 */
  background: transparent;
}
.search-clear{
  position:absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border:0;
  background: transparent;
  border-radius: 999px;
  color: rgba(17,24,39,.45);
  font-size: 18px;
  visibility: hidden;
}
.search-clear:active{ background: var(--tap); }

/* chips */
.chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.chip{
  font-size: 13px;
  color: rgba(17,24,39,.72);
  background: rgba(17,24,39,.04);
  border: 1px solid rgba(17,24,39,.06);
  padding: 8px 10px;
  border-radius: 999px;
}
.chip:active{ background: var(--tap); }

/* section head */
.section-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 10px;
}
.section-head h2{
  margin:0;
  font-size: 15px;
  color: rgba(17,24,39,.86);
}
.more{
  font-size: 13px;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
}
.more:active{ background: var(--tap); }
.count{ font-size: 13px; color: var(--muted); }

/* cards */
.cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.card{
  background: var(--paper);
  border: 1px solid rgba(17,24,39,.10);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.card-link{ display:flex; gap: 12px; padding: 12px; }
.card:active{ transform: scale(.992); }
.card-cover{
  width: 92px;
  height: 92px;
  border-radius: 12px;
  overflow:hidden;
  background: rgba(17,24,39,.04);
  flex: 0 0 auto;
}
.card-cover.small{ width: 76px; height: 76px; }
.card-cover img{ width:100%; height:100%; object-fit: cover; }
.ph{ width:100%; height:100%; background: linear-gradient(90deg, rgba(17,24,39,.05), rgba(17,24,39,.08), rgba(17,24,39,.05)); }
.ph.tall{ height: 140px; border-radius: 14px; }

.card-body{ min-width:0; }
.card-title{
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: .1px;
}
.card-summary{
  margin: 0 0 8px;
  color: rgba(17,24,39,.70);
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.meta{
  display:flex;
  align-items:center;
  gap: 8px;
  color: rgba(17,24,39,.50);
  font-size: 12px;
}
.meta-sep{ opacity: .6; }

/* pagehead */
.pagehead{ padding: 8px 0 10px; }
.pagehead-title{ margin: 6px 0 4px; font-size: 20px; }
.pagehead-desc{ margin:0; color: var(--muted); font-size: 13px; }

/* article */
.article{
  background: var(--paper);
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.article-head{ padding: 14px 14px 10px; }
.article-title{ margin: 6px 0 8px; font-size: 20px; line-height: 1.25; }
.article-lead{ margin: 0 0 10px; color: rgba(17,24,39,.72); font-size: 14px; }
.article-body{ padding: 0 14px 14px; }
.prose p{ margin: 10px 0; }
.prose a{ color: var(--accent); }

/* cover hero */
.cover-hero{
  border-radius: 14px;
  overflow:hidden;
  background: rgba(17,24,39,.04);
}
.cover-hero img{ width:100%; height: 180px; object-fit: cover; }

/* list rows (books inside list) */
.subsection{ padding: 0 0 8px; }
.list{
  border-top: 1px solid rgba(17,24,39,.08);
}
.row{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(17,24,39,.08);
}
.row:active{ background: rgba(17,24,39,.03); }
.row-cover{
  width: 56px;
  height: 74px;
  border-radius: 10px;
  overflow:hidden;
  background: rgba(17,24,39,.04);
  flex: 0 0 auto;
}
.row-cover img{ width:100%; height:100%; object-fit: cover; }
.row-main{ min-width:0; flex: 1; }
.row-title{ font-size: 15px; line-height: 1.25; margin: 0 0 4px; }
.row-sub{ font-size: 12px; color: rgba(17,24,39,.55); margin-bottom: 6px; }
.row-desc{
  font-size: 13px;
  color: rgba(17,24,39,.72);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.row-meta{ margin-top: 8px; }
.pill{
  display:inline-block;
  font-size: 12px;
  color: rgba(17,24,39,.70);
  background: rgba(17,24,39,.04);
  border: 1px solid rgba(17,24,39,.06);
  padding: 5px 8px;
  border-radius: 999px;
}
.row-arrow{
  color: rgba(17,24,39,.35);
  font-size: 22px;
  line-height: 1;
  padding-top: 18px;
}

/* book head layout */
.book-hero{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.book-cover{
  width: 112px;
  height: 152px;
  border-radius: 14px;
  overflow:hidden;
  background: rgba(17,24,39,.04);
  flex: 0 0 auto;
}
.book-cover img{ width:100%; height:100%; object-fit: cover; }
.book-info{ min-width:0; }
.book-sub{ color: rgba(17,24,39,.55); font-size: 12px; margin-bottom: 8px; }
.dot{ margin: 0 6px; }

.buy{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 10px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(17,24,39,.02);
  font-size: 13px;
  min-height: 40px;
}
.btn:active{ background: var(--tap); }
.btn.primary{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.25);
  color: #1d4ed8;
}

/* pager */
.pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 0 0;
}
.pager-mid{ font-size: 12px; color: rgba(17,24,39,.55); }

/* empty */
.empty{
  text-align:center;
  color: var(--muted);
  font-size: 13px;
  padding: 18px 0 6px;
}

/* footer */
.footer{
  padding-bottom: env(safe-area-inset-bottom);
}
.footer-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--pad) 22px;
  color: rgba(17,24,39,.50);
  font-size: 12px;
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:center;
}
.footer-inner a{ color: rgba(17,24,39,.65); }
.footer-inner a:active{ color: rgba(17,24,39,.85); }

/* desktop enhancement */
@media (min-width: 820px){
  .cards{ grid-template-columns: 1fr 1fr; }
  .card-cover{ width: 104px; height: 104px; }
  .hero-title{ font-size: 26px; }
}
/* =========================
   书籍详情页 · 精排覆盖版
   不改结构，仅调整节奏
   ========================= */

/* 整体卡片呼吸 */
.article {
  padding: 0;
}

/* 头部整体 */
.article-head.bookhead {
  padding: 22px 26px 22px;
}

/* 书籍头部布局更克制 */
.book-hero {
  gap: 16px;
  align-items: flex-start;
}

/* 封面：降权但保留 */
.book-cover {
  width: 96px;
  height: 132px;
  border-radius: 12px;
  flex-shrink: 0;
  margin-right: 12px; /* ← 加这个，封面和标题就拉开 */
}

/* 书籍信息区 */
.book-info {
  padding-top: 2px;
}

/* 书名 */
.book-info .article-title {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 6px;
}

/* 作者 / ISBN */
.book-sub {
  font-size: 13px;
  color: rgba(17,24,39,.55);
  margin-bottom: 10px;
}

/* 一句话推荐 */
.book-info .article-lead {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(17,24,39,.75);
  margin-bottom: 12px;
}

/* 购买按钮区域：去商品感 */
.buy {
  gap: 10px;
  margin: 8px 0 6px;
}

.buy .btn {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(17,24,39,.04);
  border: none;
  color: rgba(17,24,39,.7);
}

.buy .btn.primary {
  background: rgba(37,99,235,.08);
  color: #1d4ed8;
}

/* 标签整体降权 */
.book-info .chips {
  margin-top: 6px;
}

.book-info .chip {
  font-size: 12px;
  padding: 4px 8px;
  border: none;
  background: rgba(17,24,39,.04);
  color: rgba(17,24,39,.6);
}

/* 正文区域 */
.article-body {
  padding: 0 24px 18px;
}

.article-body.prose {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(17,24,39,.85);
}

/* 段落节奏 */
.prose p {
  margin: 10px 0;
}

/* 「收录于书单」区域 */
.subsection {
  padding: 6px 0 10px;
}

.subsection .section-head {
  padding: 12px 26px 6px;
}

.subsection .section-head h2 {
  font-size: 15px;
  font-weight: 600;
}

/* 关联书单卡片，向首页卡片靠拢 */
.subsection .card {
  box-shadow: none;
  border: 1px solid rgba(17,24,39,.08);
}

.subsection .card-title {
  font-size: 15px;
  line-height: 1.4;
}

.subsection .card-summary {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(17,24,39,.7);
}
/* =========================
   Markdown 横线 · 轻量虚线版
   ========================= */

/* 默认 hr 全部弱化 */
.article-body hr,
.prose hr {
  border: none;
  margin: 18px 0;
  height: 1px;
  position: relative;
}

/* 用伪元素画“短虚线” */
.article-body hr::after,
.prose hr::after {
  content: "";
  display: block;
  width: 686px;                 /* 横线长度（可调：48 / 64 / 72） */
  margin: 0 auto;              /* 居中 */
  border-top: 1px dashed rgba(17,24,39,.25);
}
/* =========================
   书单详情页 · 轻量精修
   保留结构，仅优化节奏
   ========================= */

/* 1️⃣ 整体卡片：边缘更柔 */
.article {
  border-radius: 18px;
}

/* 2️⃣ 标题区：略微收紧 */
.article-title {
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.article-lead {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(17,24,39,.72);
}

/* 3️⃣ “这份书单包含”那一行：降权 */
.section-head {
  padding-top: 14px;
}

.section-head h2 {
  font-size: 15px;
  font-weight: 600;
}

.section-head .count {
  font-size: 13px;
  color: rgba(17,24,39,.45);
}

/* 4️⃣ 单本书条目：节奏微调 */
.row {
  padding: 18px 22px;
  gap: 14px;
}

/* 分隔线变轻 */
.row + .row {
  border-top: 1px solid rgba(17,24,39,.06);
}

/* 5️⃣ 封面：存在但更安静 */
.row-cover {
  width: 48px;
  height: 68px;
  border-radius: 8px;
  box-shadow: none;
}

/* 6️⃣ 文字层级再稳一点 */
.row-title {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
}

.row-sub {
  font-size: 13px;
  color: rgba(17,24,39,.55);
  margin-top: 2px;
}

.row-desc {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(17,24,39,.75);
  margin-top: 6px;
}

/* 7️⃣ 标签：不抢戏（你前面已经想弱化它） */
.pill {
  margin-top: 8px;
  font-size: 12px;
  padding: 4px 8px;
  background: rgba(17,24,39,.04);
  border: none;
  color: rgba(17,24,39,.6);
}

/* 8️⃣ 右侧箭头：存在即可 */
.row-arrow {
  font-size: 18px;
  color: rgba(17,24,39,.35);
}
/* ===== 文章页正文 H2（内容简介 / 推荐理由 等）===== */
.article-body.prose h2{
  font-size: 18px;        /* 建议 14–15，移动端很舒服 */
  line-height: 1.35;
  font-weight: 600;
  margin: 18px 0 8px;     /* 上下留白一起收紧 */
  letter-spacing: .2px;
}
.cover-hero{
  width:100%;
  max-width: 980px;     /* 你正文容器如果是 980/960/900，改成一致 */
  margin: 0 auto 18px;
  border-radius: 18px;
  overflow: hidden;
  background:#f2f3f5;
  aspect-ratio: 16/9;
}

.cover-hero img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center 65%;
  display:block;
}
.card-link{
  display: flex;
  align-items: flex-start;
}

/* 核心：给封面右侧留空间 */
.card-link .card-cover{
  margin-right: 14px;
}

/* ===== 404 ===== */
.notfound{
  max-width:980px;
  margin:0 auto;
  padding:28px 20px 80px;
}
.nf-card{
  background:#fff;
  border:1px solid rgba(31,41,55,.12);
  border-radius:18px;
  padding:22px;
}
.nf-kicker{
  font-size:12px;
  letter-spacing:.12em;
  color:rgba(31,41,55,.55);
  margin-bottom:10px;
}
.nf-title{
  margin:0 0 10px;
  font-size:30px;
  line-height:1.2;
  color:#111827;
}
.nf-desc{
  margin:0 0 16px;
  line-height:1.85;
  color:rgba(31,41,55,.75);
}
.nf-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(31,41,55,.18);
  background:#fff;
  color:#111827;
  text-decoration:none;
}
.btn-primary{
  background:#111827;
  color:#fff;
}
.nf-note{
  margin-top:18px;
  padding-top:14px;
  border-top:1px dashed rgba(31,41,55,.15);
  color:rgba(31,41,55,.55);
  font-size:13px;
  line-height:1.7;
}
.article-author{
  margin-top: 6px;
  font-size: 16px;
  color: rgba(31,41,55,.65);
}
@media (max-width: 640px){
  .prose ul,
  .article-body ul{
    padding-inline-start: 1.25em; /* 比 1.1em 更靠右一点 */
    margin-left: 0;
  }
}
.buy-box{
  margin-top: 18px;
  padding: 14px 14px;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.65);
}
.buy-title{
  margin: 0 0 8px 0;
  font-size: 16px;
}
.buy-hint{
  margin: 0 0 10px 0;
  color: rgba(17,24,39,.72);
  font-size: 14px;
  line-height: 1.7;
}
.buy-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 6px;
}
.buy-link{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  text-decoration: none;
}
.buy-link:hover{
  border-color: rgba(17,24,39,.22);
}
.buy-note{
  margin: 8px 0 0 0;
  font-size: 12px;
  color: rgba(17,24,39,.55);
}
/* ===== Buy box (subtle, not shouting) ===== */
.buy-box{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}

.buy-title{
  margin:0 0 8px 0;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  color: var(--muted);
}

.buy-hint{
  margin:0 0 10px 0;
  font-size:13px;
  line-height:1.7;
  color: var(--muted);
}

.buy-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 10px 0;
}

.buy-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  color: var(--ink);
  background: transparent;
}

.buy-link:hover{
  background: rgba(0,0,0,.04);
}

.buy-link:focus-visible{
  outline:2px solid rgba(0,0,0,.18);
  outline-offset:2px;
}

.buy-note{
  margin:0;
  font-size:12px;
  line-height:1.7;
  color: var(--muted);
}
.buybar{
  margin-top:14px;
  padding:14px 14px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  background:rgba(255,255,255,.65);
}
.buybar-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.buybar-title{
  font-size:13px;
  font-weight:600;
  color:rgba(0,0,0,.72);
}
.buybar-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.buybar-link{
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.9);
  font-size:13px;
  color:rgba(0,0,0,.78);
  text-decoration:none;
}
.buybar-link:hover{
  border-color:rgba(0,0,0,.18);
}
.buybar-hint{
  margin:10px 0 0;
  font-size:13px;
  line-height:1.7;
  color:rgba(0,0,0,.55);
}
/* ===== JD Buy Pill (minimal) ===== */
.buy-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(31,41,55,.12);
  background:rgba(255,255,255,.70);
  color:#1f2937;
  text-decoration:none;
  font-size:14px;
  line-height:1;
  white-space:nowrap;
  -webkit-tap-highlight-color: transparent;
}
.buy-pill:active{ transform: translateY(1px); }

/* 让胶囊和摘要更贴合，减少“块状感” */
.book-info .buy-pill{ margin:10px 0 2px; }

/* ===== Mobile tighten ===== */
@media (max-width: 640px){
  /* 关键：收紧头图区域的留白（不破坏你整体布局） */
  .article-head.bookhead{ padding:14px 14px 8px; }
  .book-hero{ gap:12px; }
  .article-title{ margin-bottom:6px; }
  .article-lead{ margin:8px 0 10px; }

  /* 胶囊不要显得“飘在中间” */
  .buy-pill{ padding:8px 12px; font-size:14px; }

  /* 标签区也收一点 */
  .chips{ margin-top:10px; gap:8px; }
  .chip{ padding:6px 10px; }
}
/* 标签胶囊整体变小：PC/通用 */
.chips{ gap: 8px; }                 /* 胶囊之间的间距 */
.chip{
  font-size: 12px;
  line-height: 1;                   /* 让高度更可控 */
  padding: 6px 10px;                /* 胶囊更小 */
  border-radius: 999px;             /* 保持胶囊形状 */
  border-width: 1px;                /* 细一点更干净 */
}

/* 移动端再缩一档 */
@media (max-width: 520px){
  .chips{ gap: 6px; }
  .chip{
    font-size: 11px;
    padding: 5px 9px;
  }
}
/* === 标签更小一号（无 #）=== */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 8px;
  font-size:12px;
  line-height:1;
}

/* === 京东购买胶囊：更小、京东红、位置更靠上 === */
.buy-inline{ margin-top:8px; }
.jd-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  background:#E1251B;
  color:#fff;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.jd-pill:active{ transform:translateY(1px); }

/* === 移动端进一步收紧 === */
@media (max-width: 520px){
  .chips{ gap:6px; margin-top:8px; }
  .chip{ font-size:11px; padding:3px 7px; }
  .buy-inline{ margin-top:6px; }
  .jd-pill{ height:28px; padding:0 10px; font-size:12px; }
}
/* 标签 + 购买胶囊（标签下方右下角） */
.chips-buy{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* 标签更小 */
.chips-buy .chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.chips-buy .chip{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:3px 8px;
  font-size:11px;
  line-height:1;
  text-decoration:none;
}

/* 购买按钮：右下方，小胶囊，京东红 */
.chips-buy .buy-inline{
  display:flex;
  justify-content:flex-end; /* 右下 */
}
.chips-buy .jd-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  background:#E1251B;
  color:#fff;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.chips-buy .jd-pill:active{ transform:translateY(1px); }
/* 标签 + 购买：一组（标签上，购买右下） */
.meta-actions{
  margin-top: 8px;
}

/* 标签更小、更紧凑 */
.chips-compact{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 0;
}

.chip-compact{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 9px;
  border-radius:999px;
  font-size:11px;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}

/* 购买按钮：在标签下面的右下方（并“往上提”一点） */
.buy-inline-right{
  display:flex;
  justify-content:flex-end;
  margin-top: 6px;
}

/* 京东红小胶囊 */
.jd-pill-small{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  background:#E1251B;
  color:#fff;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}

.jd-pill-small:active{ transform:translateY(1px); }

/* 移动端再收一档 */
@media (max-width: 480px){
  .chip-compact{ height:22px; padding:0 8px; font-size:10.5px; }
  .jd-pill-small{ height:22px; padding:0 9px; font-size:10.5px; }
  .buy-inline-right{ margin-top: 5px; }
}
/* iPhone 上：标签与购买胶囊之间不要贴太近 */
.meta-actions .chips-compact{
  margin-bottom: 10px;   /* 标签块下方留白 */
}

/* 保险：即使 chips 没渲染，也给按钮自己留出上边距 */
.meta-actions .buy-inline-right{
  margin-top: 10px;
}

/* 移动端再稍微拉开一点点（可选） */
@media (max-width: 480px){
  .meta-actions .chips-compact{ margin-bottom: 12px; }
  .meta-actions .buy-inline-right{ margin-top: 12px; }
}
/* 京东胶囊：整体大一号 */
.chips-buy .jd-pill{
  height:34px;      /* 原 28px */
  padding:0 12px;   /* 原 0 10px */
  font-size:16px;   /* 原 12px */
  font-weight:600;
}

/* 标签字体也大一号（你现在是 chip-compact 体系的话） */
.chips-compact .chip-compact{
  font-size:12px;   /* 原先一般是 12px 或更小 */
  line-height:1.2;
}
/* 标签 + 购买：同容器，位置稳定（右下） */
.chips-buy{
  margin-top: 10px;
}

/* 标签更小、更紧凑（不带#，模板已去掉） */
.chips-compact{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
}
.chip-compact{
  font-size:12px;           /* 比你之前再小一号 */
  padding:6px 10px;
  border-radius:999px;
  line-height:1;
}

/* 购买胶囊：在标签下面右下方；与标签留出空间（iPhone 也不贴） */
.chips-buy .buy-inline{
  display:flex;
  justify-content:flex-end;
  margin-top: 12px;         /* 关键：别贴太近 */
}

/* 京东红胶囊：比现在大一号 */
.chips-buy .jd-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;              /* 比 28px 大一号 */
  padding:0 12px;
  border-radius:999px;
  background:#E1251B;
  color:#fff;
  font-size:12px;           /* 比 12px 大一号 */
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}

.chips-buy .jd-pill:active{ transform:translateY(1px); }

/* iPhone 上再稍微放开一点（可选但建议） */
@media (max-width: 420px){
  .chips-buy{ margin-top: 12px; }
  .chips-buy .buy-inline{ margin-top: 14px; }
}
/* ===== 书籍页：标签 + 购买（购买在标签下面右下角） ===== */
.bookhead .book-info .chips-buy{
  margin-top:10px;           /* 与摘要/上方内容拉开 */
}

/* 标签：更小、更紧凑（不带 #） */
.bookhead .book-info .chips-compact{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
}
.bookhead .book-info .chip-compact{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;            /* 标签再小一号 */
  line-height:1;
  text-decoration:none;
}

/* 购买：永远在标签下面右下方 */
.bookhead .book-info .chips-buy .buy-inline{
  width:100%;
  display:flex;
  justify-content:flex-end;
  margin-top:12px;           /* iPhone 不贴标签 */
}

/* 京东胶囊：京东红，整体与字体再大一号 */
.bookhead .book-info .chips-buy .jd-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;               /* 胶囊变大 */
  padding:0 16px;
  border-radius:999px;
  background:#E1251B;
  color:#fff;
  font-size:14px;            /* 字体变大 */
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.bookhead .book-info .chips-buy .jd-pill:active{
  transform:translateY(1px);
}

/* 移动端：更紧凑一点，减少留白感 */
@media (max-width: 520px){
  .bookhead .book-info .chips-buy{ margin-top:8px; }
  .bookhead .book-info .chips-buy .buy-inline{ margin-top:10px; }
  .bookhead .book-info .chip-compact{ height:24px; padding:0 9px; font-size:11px; }
  .bookhead .book-info .chips-buy .jd-pill{ height:32px; padding:0 14px; font-size:13px; }
}
/* ===== 关键修复：让右侧信息区撑满剩余空间，右对齐才有参照系 ===== */
.book-hero{ align-items:flex-start; }
.book-hero .book-info{
  flex: 1 1 auto;   /* 核心：撑满剩余宽度 */
  min-width: 0;
}

/* 标签+购买：这一组本身也占满宽度 */
.bookhead .book-info .chips-buy{
  width: 100%;
  margin-top: 10px;
}

/* 标签：小一号 */
.bookhead .book-info .chips-compact{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
}
.bookhead .book-info .chip-compact{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  text-decoration:none;
}

/* 购买：永远在标签下面右下方 */
.bookhead .book-info .chips-buy .buy-inline{
  width:100%;
  display:flex;
  justify-content:flex-end;
  margin-top:12px;   /* iPhone 不贴标签 */
}

/* 京东胶囊：京东红，大一号 */
.bookhead .book-info .chips-buy .jd-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 16px;
  border-radius:999px;
  background:#E1251B;
  color:#fff;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.bookhead .book-info .chips-buy .jd-pill:active{ transform:translateY(1px); }

@media (max-width: 520px){
  .bookhead .book-info .chips-buy{ margin-top:8px; }
  .bookhead .book-info .chips-buy .buy-inline{ margin-top:10px; }
  .bookhead .book-info .chip-compact{ height:24px; padding:0 9px; font-size:11px; }
  .bookhead .book-info .chips-buy .jd-pill{ height:32px; padding:0 14px; font-size:13px; }
}