/* ============================================================
   chapter.css —— 书籍正文组件的暗色映射（只允许引用 token）
   排版规范：正文 18px / 行高 1.8（relaxed）/ 容器 var(--cx-container-768) 居中（断点表 token）/ 手机 16px
   来源组件（浅色源文件）→ 暗色设计系统：
   .pull 金句 → 深色底 + 品牌红左边条
   .case/.data-card/.framework/.persona → bg-elevated 卡片
   数据数字 .num → 品牌红
   ============================================================ */

.chapter-body {
  max-width: var(--cx-container-768);  /* v2.3 第 16 条：正文容器按断点表 token（736px），原 680 硬编码废除 */
  margin: 0 auto;
  font-size: var(--cx-fs-body-lg);   /* 18px */
  line-height: var(--cx-lh-relaxed); /* 1.8 */
  color: var(--cx-fg-soft);
}
.chapter-body p { margin-bottom: var(--cx-space-md); }
.chapter-body strong { color: var(--cx-fg); font-weight: var(--cx-weight-medium); }
.chapter-body em { color: var(--cx-accent-warm); font-style: normal; }

/* ---------- 标题层级 ---------- */
.chapter-body h2 {
  font-size: var(--cx-fs-h5);
  line-height: var(--cx-lh-heading);
  font-weight: var(--cx-weight-medium);
  color: var(--cx-fg);
  margin: var(--cx-space-xl) 0 var(--cx-space-sm);
  padding-bottom: var(--cx-space-xs);
  border-bottom: 1px solid var(--cx-line);
}
.chapter-body h3 {
  font-size: var(--cx-fs-body-lg);
  color: var(--cx-accent);
  font-weight: var(--cx-weight-medium);
  margin: var(--cx-space-md) 0 var(--cx-space-xs);
}
.chapter-body h4 {
  font-size: var(--cx-fs-body);
  color: var(--cx-fg);
  font-weight: var(--cx-weight-medium);
  margin-bottom: var(--cx-space-xs);
}

/* ---------- 引言 ---------- */
.chapter-body .lead {
  color: var(--cx-muted);
  font-size: var(--cx-fs-body-lg);
  border-left: 2px solid var(--cx-line-strong);
  padding-left: var(--cx-space-md);
}

/* ---------- 金句 .pull / blockquote → 深色底 + 红左边条 ---------- */
.chapter-body .pull,
.chapter-body blockquote {
  margin: var(--cx-space-md) 0;
  padding: var(--cx-space-md);
  background: var(--cx-bg-elevated);
  border-left: 4px solid var(--cx-accent);
  border-radius: 0 var(--cx-radius-sm) var(--cx-radius-sm) 0;
  color: var(--cx-fg);
  font-weight: var(--cx-weight-medium);
  font-size: var(--cx-fs-body-lg);
  line-height: var(--cx-lh-relaxed);
}
.chapter-body blockquote p { margin-bottom: var(--cx-space-xs); }
.chapter-body blockquote p:last-child { margin-bottom: 0; }

/* ---------- 案例卡 .case / 框架卡 .framework / 原则卡 .principle ---------- */
.chapter-body .case,
.chapter-body .framework,
.chapter-body .principle {
  margin: var(--cx-space-md) 0;
  padding: var(--cx-space-md);
  background: var(--cx-bg-elevated);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius-md);
}
.chapter-body .case .tag {
  display: block;
  font-size: var(--cx-fs-small);
  letter-spacing: 0.12em;
  color: var(--cx-accent);
  font-weight: var(--cx-weight-medium);
  margin-bottom: var(--cx-space-xs);
}
.chapter-body .framework h4,
.chapter-body .principle h4 { color: var(--cx-accent); }
.chapter-body .case p:last-child,
.chapter-body .framework p:last-child,
.chapter-body .principle p:last-child { margin-bottom: 0; }

/* ---------- 数据卡 .data-row > .data-card ---------- */
.chapter-body .data-row {
  display: flex;
  gap: var(--cx-space-lg);
  margin: var(--cx-space-md) 0;
}
.chapter-body .data-card {
  flex: 1;
  background: var(--cx-bg-elevated);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius-md);
  padding: var(--cx-space-md);
  text-align: center;
}
.chapter-body .data-card .num {
  display: block;
  color: var(--cx-accent);          /* 数据数字用品牌红 */
  font-size: var(--cx-fs-h4);
  font-weight: var(--cx-weight-medium);
  line-height: var(--cx-lh-heading);
}
.chapter-body .data-card .label {
  display: block;
  color: var(--cx-muted);
  font-size: var(--cx-fs-small);
  margin-top: var(--cx-space-xs);
}

/* ---------- 步骤 ol.steps ---------- */
.chapter-body ol.steps {
  list-style: none;
  counter-reset: cx-step;
  margin: var(--cx-space-md) 0;
}
.chapter-body ol.steps li,
.chapter-body li.step {
  counter-increment: cx-step;
  position: relative;
  padding-left: calc(var(--cx-space-md) + var(--cx-space-sm));
  margin-bottom: var(--cx-space-sm);
}
.chapter-body ol.steps li::before,
.chapter-body li.step::before {
  content: counter(cx-step);
  position: absolute;
  left: 0; top: 0.35em;
  width: var(--cx-space-md); height: var(--cx-space-md);
  background: var(--cx-accent);
  color: var(--cx-fg);
  border-radius: var(--cx-radius-pill);
  font-size: var(--cx-fs-small);
  line-height: var(--cx-space-md);
  text-align: center;
}

/* ---------- 性格色彩 .persona-row > .persona ---------- */
.chapter-body .persona-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cx-space-lg);
  margin: var(--cx-space-md) 0;
}
.chapter-body .persona {
  background: var(--cx-bg-elevated);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius-md);
  padding: var(--cx-space-md);
}
.chapter-body .persona .name {
  color: var(--cx-fg);
  font-weight: var(--cx-weight-medium);
  margin-left: var(--cx-space-xs);
}
.chapter-body .persona .traits {
  color: var(--cx-muted);
  font-size: var(--cx-fs-small);
  line-height: var(--cx-lh-relaxed);
  margin-top: var(--cx-space-xs);
}
.chapter-body .dot {
  display: inline-block;
  width: var(--cx-space-xs); height: var(--cx-space-xs);
  border-radius: var(--cx-radius-pill);
  vertical-align: middle;
}
.chapter-body .dot-r { background: var(--cx-accent); }
.chapter-body .dot-b { background: var(--cx-tag-blue); }
.chapter-body .dot-y { background: var(--cx-accent-warm); }
.chapter-body .dot-g { background: var(--cx-tag-cyan); }

/* ---------- 场景 .scene ---------- */
.chapter-body .scene {
  margin: var(--cx-space-md) 0;
  padding: var(--cx-space-md);
  background: var(--cx-bg-elevated);
  border-radius: var(--cx-radius-md);
}
.chapter-body .scene p { margin-bottom: var(--cx-space-xs); }
.chapter-body .scene p:last-child { margin-bottom: 0; }
.chapter-body .scene .who { color: var(--cx-accent-warm); font-weight: var(--cx-weight-medium); }

/* ---------- 比例条 .spec / .slabels ---------- */
.chapter-body .spec {
  display: flex;
  border-radius: var(--cx-radius-sm);
  overflow: hidden;
  height: 28px;
  margin: var(--cx-space-sm) 0;
}
.chapter-body .spec div {
  display: flex; align-items: center; justify-content: center;
  font-size: var(--cx-fs-small);
  color: var(--cx-fg);
}
.chapter-body .spec .s1 { flex: 3; background: var(--cx-accent); }
.chapter-body .spec .s2 { flex: 2; background: var(--cx-accent-warm); }
.chapter-body .spec .s3 { flex: 2; background: var(--cx-line-strong); }
.chapter-body .spec .s4 { flex: 1; background: var(--cx-line); }
.chapter-body .slabels { display: flex; color: var(--cx-muted); font-size: var(--cx-fs-small); }
.chapter-body .slabels span { flex: 1; text-align: center; }

/* ---------- 对比 .compare / 流程 .flow ---------- */
.chapter-body .compare { display: flex; gap: var(--cx-space-lg); margin: var(--cx-space-md) 0; }
.chapter-body .compare > div {
  flex: 1;
  background: var(--cx-bg-elevated);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius-md);
  padding: var(--cx-space-md);
}
.chapter-body .flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cx-space-xs); margin: var(--cx-space-md) 0; }
.chapter-body .flow .l {
  background: var(--cx-bg-elevated);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius-pill);
  padding: var(--cx-space-xs) var(--cx-space-sm);
  font-size: var(--cx-fs-small);
}
.chapter-body .flow .arrow { color: var(--cx-accent); }

/* ---------- 警示/错误/注释 ---------- */
.chapter-body .warn,
.chapter-body .wrong { color: var(--cx-accent); }
.chapter-body .note { color: var(--cx-muted); font-size: var(--cx-fs-small); }
.chapter-body .sub { color: var(--cx-muted); font-size: var(--cx-fs-small); }

/* ---------- 表格 ---------- */
.chapter-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--cx-space-md) 0;
  font-size: var(--cx-fs-small);
}
.chapter-body th, .chapter-body td {
  border: 1px solid var(--cx-line);
  padding: var(--cx-space-xs) var(--cx-space-sm);
  text-align: left;
  vertical-align: top;
  line-height: var(--cx-lh-body);
}
.chapter-body th { background: var(--cx-bg-elevated); color: var(--cx-fg); font-weight: var(--cx-weight-medium); }

/* ---------- 列表与代码 ---------- */
.chapter-body ul, .chapter-body ol:not(.steps) { padding-left: var(--cx-space-md); margin-bottom: var(--cx-space-md); }
.chapter-body li { margin-bottom: var(--cx-space-xs); }
.chapter-body code {
  background: var(--cx-bg-elevated);
  border-radius: var(--cx-radius-sm);
  padding: 0 var(--cx-space-xs);
  font-size: var(--cx-fs-small);
}
.chapter-body hr { border: none; border-top: 1px solid var(--cx-line); margin: var(--cx-space-xl) 0; }

/* ---------- 手机 16px（768px 断点） ---------- */
@media (max-width: 768px) {
  .chapter-body { font-size: var(--cx-fs-body); }
  .chapter-body h2 { font-size: var(--cx-fs-body-lg); }
  .chapter-body .data-card .num { font-size: var(--cx-fs-h5); }
  .chapter-body .persona-row { grid-template-columns: 1fr; }
  .chapter-body .compare { flex-direction: column; }
}

/* ---------- 书三媒体组件：图片 / 视频（/book-media/ 自托管） ---------- */
.chapter-body figure {
  margin: var(--cx-space-md) 0;
}
.chapter-body figure img,
.chapter-body figure video {
  display: block;
  width: 100%;
  border-radius: var(--cx-radius-md, var(--cx-radius-sm));
  border: 1px solid var(--cx-line);
}
.chapter-body figcaption {
  margin-top: var(--cx-space-xs);
  color: var(--cx-faint);
  font-size: var(--cx-fs-small);
  line-height: var(--cx-lh-body);
  text-align: center;
}

/* ---------- 博客正文媒体：裸 img/video（OSS 热链，图裂时 alt 兜底不撑破布局） ---------- */
.blog-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--cx-space-md) auto;
  border-radius: var(--cx-radius-md, var(--cx-radius-sm));
  border: 1px solid var(--cx-line);
  background: var(--cx-bg-elevated);
}
.blog-body video {
  display: block;
  width: 100%;
  margin: var(--cx-space-md) 0;
  border-radius: var(--cx-radius-md, var(--cx-radius-sm));
  border: 1px solid var(--cx-line);
  background: var(--cx-bg);
}
.blog-body h1 {   /* 博客正文 h1 降为 h2 视觉（页面标题已在 reader-head） */
  font-size: var(--cx-fs-h5);
  line-height: var(--cx-lh-heading);
  font-weight: var(--cx-weight-medium);
  color: var(--cx-fg);
  margin: var(--cx-space-xl) 0 var(--cx-space-sm);
  padding-bottom: var(--cx-space-xs);
  border-bottom: 1px solid var(--cx-line);
}
.blog-body a { color: var(--cx-tag-blue); text-decoration: none; }
.blog-body a:hover { text-decoration: underline; }
.blog-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--cx-space-md) 0;
  font-size: var(--cx-fs-small);
}
.blog-body th, .blog-body td {
  border: 1px solid var(--cx-line);
  padding: var(--cx-space-xs) var(--cx-space-sm);
  text-align: left;
}
.blog-body th { background: var(--cx-bg-elevated); color: var(--cx-fg); }

/* ============================================================
   作品图库组件（v2.3 重构 · 设计系统 token 驱动，零内联样式）
   结构：page-tabs 锚点导航（gallery-tabs）→ gallery-sec（6 区）
   ============================================================ */
/* 锚点滚动避开悬浮导航 */
.gallery-sec { scroll-margin-top: calc(var(--cx-nav-gap-y) + var(--cx-nav-h) + var(--cx-space-md)); }
/* 图库页全宽（覆盖 chapter-body 的容器约束 · v2.3 第 13 条：内容区按断点表 Max 1820 自适应） */
.gallery-body { max-width: none; }
/* 项目详情页全宽（v2.3 第 20 条：works 下所有页面内容区按断点表 Max 1820） */
.project-body { max-width: none; }

/* 图库区（6 区：ui/store/brand/packaging/vison/shooting） */
.gallery-sec {
  padding: var(--cx-space-lg) 0;  /* v2.3 第 17 条：区间距 64(xl) → 32(lg) */
}
.gallery-sec-head {
  margin-bottom: var(--cx-space-md);
}
.gallery-sec-title {
  font-size: var(--cx-fs-h2);
  font-weight: var(--cx-title-weight);
  line-height: var(--cx-lh-heading);
  letter-spacing: -0.02em;
  color: var(--cx-fg);
}
.gallery-sec-meta {
  margin-top: var(--cx-space-xs);
  color: var(--cx-muted);
  font-size: var(--cx-fs-body);
  display: flex; align-items: center; gap: var(--cx-space-sm); flex-wrap: wrap;
}
.gallery-sec-sub { color: var(--cx-fg-soft); }
.gallery-link {
  color: var(--cx-accent);
  text-decoration: none;
  font-weight: var(--cx-weight-medium);
  transition: opacity var(--cx-hover-transition) ease;
}
.gallery-link:hover { opacity: var(--cx-hover-opacity); }
.gallery-sec-divider {
  border: none;
  border-top: 1px solid var(--cx-line);
  margin: var(--cx-space-lg) 0;
}

/* 图网格（v2.3 第 18 条：每行最多 2 个；<1280 只有 1 个） */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cx-space-md);
}
@media (min-width: 1280px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-grid img {
  display: block; width: 100%; height: auto;
  border-radius: var(--cx-radius-card);  /* 内容卡同款 r16 */
  box-shadow: var(--cx-shadow);
  transition: box-shadow .2s;
}
.gallery-grid img:hover { box-shadow: var(--cx-shadow-lg); }

/* ============================================================
   媒体智能排版 + Lightbox（v2.4 · media-layout.js 驱动）
   规则（老板 2026-08-22）：横长图单行 / 竖图两两一行 /
   横竖配对一行等高（cover 裁剪）/ 全部可点击放大弹窗
   ============================================================ */
/* 容器回归普通流；媒体按组包 .media-row（组内保证同一行） */
.media-layout { display: block; }
/* 媒体被移出后的空 figure 隐藏 */
.media-layout figure:empty { display: none; }
/* 行容器：<768 单列，≥768 双列 */
.media-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cx-space-md);
  margin-bottom: var(--cx-space-md);
}
@media (min-width: 768px) {
  .media-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 横长图（>4/3）：整行一张，完整显示不裁剪 */
.media-row--full { grid-template-columns: 1fr; }
/* 媒体单元格 */
.media-cell { min-width: 0; }
.media-cell img,
.media-cell video {
  display: block; width: 100%; height: auto;
  border-radius: var(--cx-radius-card);
  background: var(--cx-bg-elevated);
  cursor: zoom-in;
  transition: box-shadow .2s;
}
.media-cell img:hover,
.media-cell video:hover { box-shadow: var(--cx-shadow-lg); }
/* 横+竖配对：一行两张，两个高度强制一致（横图 cover 裁剪填满） */
.media-row--pair .media-cell--fill img,
.media-row--pair .media-cell--fill video {
  height: 100%; object-fit: cover;
}
.media-row--pair .media-cell--natural img,
.media-row--pair .media-cell--natural video {
  height: auto; object-fit: initial;
}

/* ---------- Lightbox 弹窗 ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--cx-bg-deep);
  display: none;
  align-items: center; justify-content: center;
  padding: var(--cx-space-xl);
}
.lightbox.is-open { display: flex; }
.lightbox-stage {
  max-width: 100%; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-stage img,
.lightbox-stage video {
  max-width: min(92vw, 1600px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--cx-radius-md);
  box-shadow: var(--cx-shadow-lg);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--cx-line);
  background: var(--cx-bg-elevated);
  color: var(--cx-fg);
  cursor: pointer;
  font-family: var(--cx-font-primary);
  transition: opacity var(--cx-hover-transition) ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { opacity: var(--cx-hover-opacity); }
.lightbox-close { top: var(--cx-space-lg); right: var(--cx-space-lg); font-size: 16px; }
.lightbox-prev,
.lightbox-next { top: 50%; transform: translateY(-50%); font-size: 22px; }
.lightbox-prev { left: var(--cx-space-lg); }
.lightbox-next { right: var(--cx-space-lg); }

/* ============================================================
   v3.3 · 项目页模块化排版（Figma 55-2939 还原：年轻化产品拍摄等）
   ============================================================ */
.project-body .proj-intro { font-size: var(--cx-fs-h3); font-weight: 550; line-height: 1.4; margin-bottom: var(--cx-space-xs); }
.project-body .proj-sub { color: var(--cx-muted); margin-bottom: var(--cx-space-lg); }
.project-body .proj-sec { font-size: var(--cx-fs-h2); font-weight: 550; margin-top: var(--cx-space-xl); margin-bottom: var(--cx-space-sm); }
.project-body .proj-list { margin: var(--cx-space-sm) 0 var(--cx-space-md); padding-left: 1.3em; }
.project-body .proj-list li { margin-bottom: var(--cx-space-xs); }
.project-body .proj-team { color: var(--cx-muted); }
.project-body figure.proj-figure { margin: var(--cx-space-md) 0; }
.project-body figure.proj-figure img { width: 100%; height: auto; border-radius: var(--cx-radius-card); object-fit: cover; }

/* 博客配图（2026-08-29 · 老站 WP 图还原） */
.blog-body figure.blog-fig { margin: var(--cx-space-md) 0; }