/* ==========================================================================
   简历纸面样式（预览与导出共用一套视觉）
   ==========================================================================
   尺寸口径：A4 = 210 × 297mm。屏幕上按 794 × 1123px（96dpi）呈现，
   用 transform: scale 适配容器宽度，保证排版比例与真实 A4 一致 ——
   否则用户看到的换行位置和导出的不一致。

   🔴 本文件的数值一律由小程序的 template-preview.wxss 换算而来（1rpx ≈ 0.5px），
      不是「看着差不多」调的。两端要长得一样，就必须量同一套尺寸。
   ========================================================================== */

.zj-stage {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.zj-scaler {
  transform-origin: top center;
  flex-shrink: 0;
}

.zj-paper {
  width: 794px;
  min-height: 1123px;
  background: #fff;
  color: #232b33;
  font-size: 12.5px;
  line-height: 1.55;
  box-shadow: 0 2px 18px rgba(29, 37, 49, .12);
  position: relative;
  overflow: hidden;
  /* 🔴 纸面是固定 A4 宽，绝对不许被内容撑开：
     一旦撑开，右列就跑到纸外，截图/导出都只看到半页。 */
  min-width: 794px;
  max-width: 794px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}

/* 🔴 所有版式的根容器都是 flex 竖列。flex 子项默认 min-width:auto，
   会被「不换行的长文字」顶宽，进而把整个纸面撑超过 794 —— 全部显式归零。 */
.zj-layout-band,
.zj-layout-card,
.zj-layout-timeline,
.zj-layout-centered,
.zj-layout-plain,
.zj-layout-columns { min-width: 0; }
.zj-band-body,
.zj-main,
.zj-body,
.zj-band-main,
.zj-plain-main,
.zj-card-main,
.zj-ct-main { min-width: 0; }

/* ---------- 纹理层 ----------
   色块 / 侧栏 / 时间格共用。底色由元素自己的 background-color 给，
   纹理图由 texture-sheet.js 生成的 .zj-tex-N 类提供（background-image + size 100% 100%）。
   🔴 background-size 必须 100% 100%：纹理是按落点尺寸画的，跟着拉伸比例才对；
      写成 auto 会让 330×112 的图画在左上角。 */
.zj-tex {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.zj-sec { margin-bottom: 13px; }
.zj-sec:last-child { margin-bottom: 0; }

/* ---------- 版块标题 ---------- */
.zj-sec-t {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 7px;
  line-height: 1.3;
  letter-spacing: .3px;
}
/* icon（默认档）：左侧线条小图标。
   图标 14px 略大于字高，vertical-align 负值把图标压下来对齐汉字中线
   （汉字视觉重心比字母基线高，纯 middle 会显得图标偏高）。 */
.zj-t-ico {
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: -2px;
}
/* chip：色块只包住文字，必须 inline-block —— 默认 block 会拉满整行，就成了色带 */
.zj-t-chip {
  display: inline-block;
  padding: 2px 8px 3px;
  border-radius: 3px;
  font-size: 12px;
  letter-spacing: .3px;
  margin-bottom: 8px;
}
/* rule：左粗竖线 + 下细线通栏 */
.zj-t-rule {
  border-left: 4px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  padding: 0 0 3px 6px;
}
.zj-t-plain { border-bottom: 1px solid #e8edf2; padding-bottom: 4px; }

/* ---------- 正文 ---------- */
.zj-line {
  margin: 0 0 1px;
  font-size: 12.5px;
  color: #334155;
  line-height: 1.55;
  word-break: break-word;
}
/* 行首的「·」独立一格：折行后文字自然对齐到上一个字，不回退到圆点左边 */
.zj-bul { margin-right: 4px; color: #94a3b8; }

.zj-entry { margin-bottom: 6px; }
.zj-entry:last-child { margin-bottom: 0; }
.zj-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
/* 🔴 flex 子项默认 min-width:auto，长公司名会把时间挤出去 */
.zj-entry-org {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 🔴 时间/绩点这一格：
   小程序端在双栏左列里是「时间  |  GPA」一整串 nowrap，窄列时会顶出纸外；
   Web 上纸面宽度固定，一旦溢出就是**看不出报错的裁切**（2026-10-29 实测：
   140px 宽的列里塞了 150px 的 nowrap 文本，右边那截直接消失）。
   所以这里允许它折行，并且能被压缩 —— 时间宁可换行，也不能被裁掉。
   🔴 再加 max-width：只靠 flex-shrink 在「公司名很长」时不生效
   （org 是 flex:1，会一直吃掉空间，meta 被压到只剩几个字就折行成竖排），
   给个 46% 上限，保证「2014.09 - 2018.06 | GPA 3.8/4.0」这种最长的一行
   能在 300px 内完整放下，不会被纸面右边缘啃掉最后一两个字符。 */
.zj-entry-meta {
  font-size: 11px;
  color: #94a3b8;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 46%;
  text-align: right;
  word-break: break-word;
}

/* ---------- 抬头：顶部色块 ---------- */
.zj-band-head {
  /* 上下 16→24px（2026-11-04 色带拉高到 ≈3.5cm，与导出 1240×208 同口径）；card 版式单独收回 */
  padding: 24px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* 🔴 它自己也是 flex 子项（父级是竖列），同样会被长副行撑宽 */
  min-width: 0;
  box-sizing: border-box;
}
/* 🔴 card 版式页高已卡上限（内容 1106px / 上限 1123px），抬头不能跟着加高 */
.zj-layout-card .zj-band-head { padding: 16px 17px; }
.zj-band-body { flex: 1; min-width: 0; }
.zj-band-name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.2;
}
.zj-band-sub {
  font-size: 12px;
  margin-top: 3px;
  opacity: .92;
  line-height: 1.4;
}

/* 无顶部色块：白纸抬头 */
.zj-plain-head {
  padding: 16px 17px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  box-sizing: border-box;
}
.zj-plain-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.zj-plain-sub {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 3px;
  line-height: 1.4;
}

/* ---------- 正文容器 ---------- */
.zj-body { padding: 6px 18px 12px; }
.zj-band-main { padding: 10px 18px 16px; }
.zj-plain-main { padding: 6px 18px 16px; }

/* ---------- 证件照 ----------
   76×100px 与小程序的 132×192rpx（22:32 小一寸）同一比例。
   🔴 不能用 object-fit:cover（裁切）：导出是 aspectFit（整张装进框里、留白），
      预览裁切的话，用户会看到「预览把人脸裁掉了、导出来又没有」。 */
.zj-photo {
  width: 64px;
  height: 85px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  /* 不垫白底、不描边（2026-11-04 用户反馈白框丑），与导出合成口径一致 */
}

/* ---------- ① 深色侧栏 ---------- */
.zj-layout-sidebar { display: flex; align-items: stretch; min-height: 1123px; }
.zj-side {
  flex-shrink: 0;
  padding: 22px 12px;
  box-sizing: border-box;
}
.zj-side-name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 8px;
  word-break: break-word;
}
.zj-photo-side { margin: 0 auto 12px; }
/* 分组小标题：带下划线 + 白色图标 */
.zj-side-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  margin: 12px 0 5px;
}
.zj-side-label span, .zj-side-text span { flex: 1; min-width: 0; }
.zj-side-text {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  line-height: 1.6;
  word-break: break-word;
  opacity: .95;
}
.zj-side-ico { width: 12px; height: 12px; flex-shrink: 0; }
.zj-side-ico-sm { width: 11px; height: 11px; }
.zj-main {
  flex: 1;
  min-width: 0;
  padding: 20px 16px 22px;
  box-sizing: border-box;
}

/* ---------- ② 平等双栏 ---------- */
/* 🔴 .zj-cols 是 flex 子项，默认 min-width:auto —— 它会被「最长那行不换行的文字」撑开，
      实测把纸面从 794 撑到 1220，右列文字直接被裁到纸外看不见（2026-10-29）。
      flex 容器自己也要显式 min-width:0。 */
.zj-layout-columns { display: flex; flex-direction: column; }
.zj-cols { display: flex; align-items: stretch; flex: 1; min-width: 0; }
/* 🔴 左列给了 width:42%，但 .zj-col 的 flex-shrink:0 会让右列按「不可压缩」撑出纸面
      （文字被裁到右边看不到，2026-10-29 实测）。右列必须 min-width:0 且能收缩。 */
.zj-col {
  flex-shrink: 0;
  padding: 10px 8px;
  box-sizing: border-box;
  min-width: 0;
}
.zj-col-main {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 12px 16px;
}
.zj-cols > .zj-col:first-child { flex: 0 0 auto; }

/* ---------- ③ 时间轴：左 26% 时间格 + 右内容 ---------- */
.zj-layout-timeline { display: flex; flex-direction: column; }
.zj-tl { margin-bottom: 14px; }
.zj-tl-row { display: flex; align-items: stretch; margin-bottom: 8px; }
.zj-tl-time {
  width: 26%;
  flex-shrink: 0;
  padding: 4px 5px;
  font-size: 10.5px;
  line-height: 1.5;
  border-right: 2px solid currentColor;
  word-break: break-word;
  box-sizing: border-box;
}
.zj-tl-body { flex: 1; min-width: 0; padding: 4px 0 4px 10px; }
.zj-tl-head { margin-bottom: 2px; }

/* ---------- ④ 卡片式 ---------- */
.zj-layout-card { display: flex; flex-direction: column; }
.zj-card-main { padding: 14px 13px 20px; }
.zj-card-main .zj-sec-card { border: 1px solid #e8edf2; margin-bottom: 12px; }

/* ---------- ⑤ 居中经典：不画色块 ---------- */
.zj-layout-centered { display: flex; flex-direction: column; }
.zj-center-head { padding: 18px 17px 8px; text-align: center; }
/* 三栏对称：左留白与右照片等宽 → 姓名仍然相对整页居中（与导出一致） */
.zj-center-row { display: flex; align-items: center; gap: 8px; }
.zj-center-spacer, .zj-center-photo { width: 64px; flex-shrink: 0; }
.zj-center-body { flex: 1; min-width: 0; }
.zj-center-name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.2;
}
.zj-center-sub {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.4;
}
.zj-center-rule { height: 1.5px; margin-top: 8px; opacity: .5; }
.zj-ct-main { padding: 8px 19px 20px; }

/* ---------- ⑦ 极简单列 ---------- */
.zj-layout-plain { display: flex; flex-direction: column; }

/* ---------- 缩略图模式（模板库 / 编辑器右侧） ---------- */
.zj-thumb .zj-paper { box-shadow: none; }

/* ==========================================================================
   缩略图字号放大（只作用于模板库 .tpl-shot 的卡片）
   ==========================================================================
   背景：模板库缩略图把 794px 宽的 A4 纸面缩到约 268px 的卡片里，字号跟着
   缩到 4~8px；而小程序模板库卡片是 330×462 的专用设计稿，字号 6~12px。
   两者一比，Web 缩略图就显得「字小、空」。这里单独放大缩略图字号。

   🔴 作用域只锁 .tpl-shot —— 编辑器右侧 #previewStage、全屏预览 #pvStage、
     以及导出，都是「真实 A4 字号」，和打印/导出对齐，绝不能放大，
     否则用户「预览看是这个大小，导出来又是另一个大小」。

   倍数 1.2 的来历：把各版式内容底边（见 tools/_diag_thumb.js）放大后不能超过
   A4 上限 1123px。实测六种版式的放大上限分别是 band 1.52 / centered 1.51 /
   plain 1.48 / columns 2.05 / timeline 1.63 / card 1.16 / sidebar 满高。
   → 统一取 1.2，唯一会超页的 card（上限 1.16）单独压到 1.15。
   调倍数只改下面 --zj-tf 两处，别逐条动 calc。

   行高都是相对值（line-height:1.55 等），会随 font-size 自动放大，
   所以「字大」的同时「行距也大」，观感是整体放大的，不是挤在一起的。
   固定间距（margin/padding）不放大 —— 缩略图本来就要紧凑，间距大了反而空。 */
.tpl-shot .zj-paper { --zj-tf: 1.2; }
/* card 版式内容最满（971px），1.2 倍会超 A4 被裁，单独压到 1.15 */
.tpl-shot .zj-layout-card { --zj-tf: 1.15; }

.tpl-shot .zj-paper,
.tpl-shot .zj-line { font-size: calc(12.5px * var(--zj-tf, 1)); }
.tpl-shot .zj-sec-t,
.tpl-shot .zj-entry-org { font-size: calc(13px * var(--zj-tf, 1)); }
.tpl-shot .zj-t-chip { font-size: calc(12px * var(--zj-tf, 1)); }
.tpl-shot .zj-entry-meta,
.tpl-shot .zj-band-sub { font-size: calc(11px * var(--zj-tf, 1)); }
.tpl-shot .zj-plain-sub,
.tpl-shot .zj-side-text,
.tpl-shot .zj-center-sub { font-size: calc(11.5px * var(--zj-tf, 1)); }
.tpl-shot .zj-tl-time { font-size: calc(10.5px * var(--zj-tf, 1)); }
.tpl-shot .zj-band-name { font-size: calc(23px * var(--zj-tf, 1)); }
.tpl-shot .zj-plain-name,
.tpl-shot .zj-center-name { font-size: calc(24px * var(--zj-tf, 1)); }
.tpl-shot .zj-side-name { font-size: calc(22px * var(--zj-tf, 1)); }
.tpl-shot .zj-side-label { font-size: calc(12px * var(--zj-tf, 1)); }
/* 图标跟着字号一起放大，保持「字大图也大」的比例，不然标题放大、图标显得小 */
.tpl-shot .zj-t-ico {
  width: calc(13px * var(--zj-tf, 1));
  height: calc(13px * var(--zj-tf, 1));
  margin-right: calc(4px * var(--zj-tf, 1));
}
.tpl-shot .zj-side-ico { width: calc(12px * var(--zj-tf, 1)); height: calc(12px * var(--zj-tf, 1)); }
.tpl-shot .zj-side-ico-sm { width: calc(11px * var(--zj-tf, 1)); height: calc(11px * var(--zj-tf, 1)); }

/* ==========================================================================
   缩略图抬头（顶部色带）放大
   ==========================================================================
   问题：纸面的抬头高度是被「照片 64×85 + 上下 16px」顶出来的（117px），
   缩到 268 宽的卡片里只剩一条细边 —— 姓名、联系方式、照片全挤在 39px 里，
   而小程序原图（t1~t57 共 21 张，量法见 tools/_measure_band.py）色带占卡片
   高度 19.5%，Web 缩略图只有 11.6%。看起来就像「抬头被压扁了」。

   修法：只放大缩略图的抬头内距与证件照，把占比抬到 ~18.5%（贴近原图），
   姓名与照片之间终于有呼吸。

   🔴 作用域仍然只锁 .tpl-shot：
      · 编辑器右侧预览、全屏预览、导出 Word —— 抬头高度与照片尺寸**一个字不动**，
        导出的抬头高度由 docx 侧决定，这里放大反而会让「预览≠导出」。
      · 改这几个变量前先跑 tools/_diag_band.js 复量占比，别凭手感调。
   ========================================================================== */
.tpl-shot .zj-paper {
  --zj-hpad: 42px;      /* 抬头上下内距（原 16px / 18px） */
  --zj-photo-w: 86px;   /* 证件照（原 64×85） */
  --zj-photo-h: 114px;
}
.tpl-shot .zj-band-head { padding: var(--zj-hpad) 20px; }
.tpl-shot .zj-plain-head { padding: var(--zj-hpad) 20px 18px; }
.tpl-shot .zj-center-head { padding: var(--zj-hpad) 20px 14px; }
/* 🔴 card 版式单独收一档：它是六种版式里内容最满的（旧抬头下已经 1061px，
   A4 上限 1123，只剩 62px 余量）。抬头按 198px 放会把内容顶到 1142px，
   纸面 overflow:hidden 直接把底部「获奖荣誉」裁掉 —— 全量核查抓到的第 7 张起都是这样。
   收到 162px 后内容 1106px，仍留 17px 余量。 */
.tpl-shot .zj-layout-card { --zj-hpad: 24px; }
.tpl-shot .zj-band-head .zj-photo,
.tpl-shot .zj-plain-head .zj-photo,
.tpl-shot .zj-center-head .zj-photo {
  width: var(--zj-photo-w);
  height: var(--zj-photo-h);
}
/* 居中版式是「左留白 = 右照片」的三栏对称，照片变宽后留白必须同步，
   否则姓名会偏到左边去（与导出的居中规则不符）。 */
.tpl-shot .zj-center-spacer,
.tpl-shot .zj-center-photo { width: var(--zj-photo-w); }

/* 抬头文字再单独放大一档（×1.4，正文仍是 ×1.2）。
   理由：色带变高以后如果姓名还是 9px，带子里就是「一大块底色 + 一行小字」，
   反而比原来更空；小程序原图里姓名是整条色带的视觉重心。
   抬头文字不会折行（姓名 3~4 字、联系方式一行放得下），放大不会撑破版面。 */
.tpl-shot .zj-band-name { font-size: calc(23px * var(--zj-tf, 1) * 1.17); }
.tpl-shot .zj-band-sub { font-size: calc(11px * var(--zj-tf, 1) * 1.1); }
.tpl-shot .zj-plain-name,
.tpl-shot .zj-center-name { font-size: calc(24px * var(--zj-tf, 1) * 1.12); }

@media (max-width: 860px) {
  .zj-paper { font-size: 12.5px; }
}