* { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== 横幅尺寸变量（电脑端基准值） =====
   手机端在 mobile.css 里整体按比例改小这几个变量即可，
   横幅内部的布局结构（logo + 文字图 + 导航 同一行）完全不变。 */
:root {
  --bn-h: 80px;        /* 横幅总高 */
  --bn-logo: 56px;     /* logo 高度（原 72px → 缩小） */
  --bn-text: 34px;     /* 文字图高度（原 50px → 缩小，比 logo 收得更多） */
  --bn-gap: 12px;      /* logo 与文字图之间的间距 */
  --bn-ml: 20px;       /* 导航与文字图之间的额外间距 */
  --bn-nav-gap: 6px;   /* 菜单项之间的间距 */
  --bn-item-fs: 15px;  /* 菜单字号 */
  --bn-item-px: 18px;  /* 菜单左右内边距 */
  --bn-item-py: 6px;   /* 菜单上下内边距 */
  --bn-item-r: 6px;    /* 菜单圆角 */
  --bn-pad-x: max(16px, calc((100% - 1000px) / 2 + 16px)); /* 横幅左右内边距（与 1000px 内容栏对齐） */

  /* ===== 图片"占位宽度"（不是图片宽度！）=====
     为什么需要它：图片高度一改，宽度跟着按比例变（等比缩放），后面的菜单就会被带着左右挪。
     给 logo / 文字图各定一个固定宽度的"格子"，图片在格子里左对齐 ——
     于是：图片缩小了，但 logo 左边缘、文字图左边缘、菜单左边缘【一个都不动】。
     以后想调图片大小，只改上面的 --bn-logo / --bn-text，菜单位置永远不受影响。
     （格子宽度 = 图片在"基准高度"下的自然宽度：logo 1:1 → 72；文字图 149:50 → 149） */
  --bn-logo-slot: 72px;
  --bn-text-slot: 149px;

  /* 名号与菜单之间那道分隔线：距菜单左边多少、多高、多粗 */
  --bn-sep-gap: 40px;
  --bn-sep-h: 40px;
  --bn-sep-w: 2px;
  --bn-sep-a: .78;     /* 分隔线最亮处的透明度（细线本来就淡，太低就看不见了） */

  /* 名号图下面那行网址小字：字号 + 与图片/横线之间的间距 */
  --bn-url-fs: 11px;
  --bn-url-gap: 4px;

  /* ===== 内容卡片（.ph）玻璃参数：改这里，全站同步 =====
     这是一对矛盾，取值就是找平衡点：
       · 太透 → 背景树干、光柱直接穿进来，字晃眼、定不住神（旧版 .35 就是这个问题）
       · 太实 → 卡片和背景一刀切，没有过渡，像贴了块板子
     --card-a 是底色的不透明度：0.60 = 背景约透出 1/3，落在"有过渡但不抢戏"的中间带。
     光靠降不透明度还不够，必须让透过来的东西是【模糊+压暗】的（见 --card-blur / --card-bri）：
       · blur 把树干糊成一片柔光 → 有明暗呼吸感，但看不出细节，不抢注意力
       · brightness<1 把透进来的亮部压住 → 文字永远是画面上最亮的东西，眼睛能定住 */
  --card-a: .40;                       /* 卡片底色不透明度（唯一的手感旋钮：.45 更透 / .75 更实） */
  --card-blur: 10px;                   /* 毛玻璃模糊半径：越大，透进来的背景越柔 */
  --card-sat: 1.15;                    /* 透进来颜色的饱和度补偿（模糊会掉色，补一点回来） */
  --card-bri: .88;                      /* 透进来颜色的亮度压制：<1 压暗背景，为文字让位 */
  --card-bg: linear-gradient(180deg, rgba(15, 32, 57, var(--card-a)), rgba(7, 18, 36, var(--card-a)));
  --card-ls: 4px;                      /* 标题字距；text-indent 会自动跟着补等量（无需手改） */

  /* ===== 栏目入口框（首页那 5 个）的配色：改这里，全站同步 =====
     底色沿用同一套玻璃配方（半透明 + 毛玻璃 + 投影 + 下沿内阴影），只换"底色 + 文字色"。
     --lx-a 是入口框底色的不透明度：比标题框（--card-a .40）实一点 ——
     太透的话颜色被蓝背景一冲就认不出"红事 / 白事"了。 */
  --lx-a: .62;
  --lx-bg: linear-gradient(180deg, rgba(15, 32, 57, var(--lx-a)), rgba(7, 18, 36, var(--lx-a))); /* 中性那档（各地差异）：全站蓝金 */
  --hong-top: 138, 48, 40;             /* 枣红（亮部） */
  --hong-bot: 82, 24, 22;              /* 枣红（暗部） */
  --hong-text: #FFC64B;                /* 雌黄 */
  --hong-text2: rgba(255, 198, 75, .72); /* 雌黄压一档，给说明文字 */
  --hong-line: rgba(255, 199, 75, .34);
  --bai-top: 38, 104, 120;             /* 雅青（亮部） */
  --bai-bot: 16, 56, 70;               /* 雅青（暗部） */
  --bai-text: #DCEAF2;                 /* 青白 */
  --bai-text2: rgba(220, 234, 242, .7);
  --bai-line: rgba(220, 234, 242, .3);
}

body {
  font-family: "Microsoft YaHei", "SimSun", sans-serif;
  background: #f7f4ef;
  color: #333;
}

/* 内容入场时元素会移到屏幕外，这里裁掉横向溢出，避免动画那一瞬间冒出横向滚动条。
   overscroll-behavior-x: none —— 关键：阻止浏览器把"从屏幕边缘横向滑动"抢去当
   自己的「返回上一页」手势（Chromium 内核：安卓 Chrome / 微信安卓）。不挡的话，
   用户从最左边往右滑会变成整页返回重载，logo 会闪，而不是我们的无刷新切换。
   （iOS Safari 的边缘返回是系统手势，CSS 拦不住，只能靠 JS 的 30px 边缘保护区避开。） */
html,
body {
  overflow-x: hidden;
  overscroll-behavior-x: none;
  /* 整页双指放大锁定：touch-action 里不写 pinch-zoom，浏览器就不会把双指捏合
     当成"页面缩放"（同时双击放大也一并关掉）。页面仍然能上下滚动、能左右滑切页。
     需要缩放的地方（李氏谱页的树）自己把 touch-action 覆写成 pan-x pan-y，
     再用 JS 接住双指事件 —— 所以"页面不能缩，树能缩"。 */
  touch-action: pan-x pan-y;
}

/* ===== 横幅：背景拉伸 + 左 logo + 中文字 + 右导航（同一行，高度由内容撑开） ===== */
.banner {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* 左右内边距与 .main 的 1000px 内容栏对齐（窄屏时保底 16px，防负值失效） */
  padding: 10px var(--bn-pad-x);
  margin-top: 10px;
  gap: var(--bn-gap);
}
.banner-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.banner-logo img {
  display: block;
}
/* 名号图 + 横线 + 网址小字：竖着摞成一坨（图在上、横线在中间、小字在下）。
   整坨水平方向仍从左边起排 → 菜单位置照旧不受影响。
   【整坨垂直居中】：不做任何下压补偿，交给 banner 的 align-items:center 统一居中，
   于是这一坨的顶 / 底与左边的 logo 基本齐平（不再显得偏下）。 */
.banner-texts {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;   /* 名号图、横线、网址小字 从上往下排 */
  align-items: flex-start;  /* 都从左边缘起排，小字不会跑偏 */
  justify-content: center;
  gap: var(--bn-url-gap);
}
/* 名号图 + 横线 + 网址小字：竖着摞成一坨（图在上、横线在中间、小字在下）。
   宽度由 max-content 撑开（= 图与小字里更宽的那个），
   三个子元素【居中排】—— 于是网址以名号图为基准左右居中、
   横线也以名号图为基准居中，整坨在左边不动 → 菜单位置照旧不受影响。 */
.banner-name {
  display: flex;
  flex-direction: column;
  align-items: center;      /* 关键：小字、横线都相对名号图居中 */
  gap: var(--bn-url-gap);
  width: max-content;
}
.banner-texts img {
  display: block;
}
/* 名号图与网址之间那条横线：一条干净的实线（细、不抢眼） */
.banner-rule {
  width: 100%;              /* = .banner-name 的宽度 = 名号图宽度 */
  height: 1px;
  background: rgba(255, 199, 75, 0.5);
}
/* 名号图下方那行网址小字：纯装饰，不跳转 */
.banner-url {
  font-size: var(--bn-url-fs);
  line-height: 1;
  letter-spacing: .6px;
  color: #99522e;
  white-space: nowrap;
  user-select: none;        /* 不是链接，不希望被拖蓝选中 */
  pointer-events: none;     /* 明确不可点，鼠标划过也不变样 */
}

/* ===== 导航菜单（电脑端）：已并入 banner，紧跟文字图后、左对齐，背景全透明 ===== */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--bn-nav-gap);
  margin-left: var(--bn-ml); /* 与前面的文字图留出间距（再叠加 banner 的 gap） */
  padding: 0;
  background: transparent;
  border: none;
  white-space: nowrap;
}
.nav-item {
  display: inline-block;
  padding: var(--bn-item-py) var(--bn-item-px);
  color: #99522e;
  text-decoration: none;
  font-size: var(--bn-item-fs);
  border-radius: var(--bn-item-r);
  line-height: 1.4;
}
.nav-item:hover { background: #f0e6d8; }
.nav-item.active {
  background: #99522e;
  color: #fff;
}

/* ===== 主体 ===== */
.main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 16px 40px;
}
.intro {
  text-align: center;
  margin-bottom: 28px;
}
.intro h2 {
  font-size: 24px;
  color: #a01414;
  margin-bottom: 8px;
}
.intro p {
  font-size: 15px;
  color: #777;
}
.login-btn {
  display: inline-block;
  background: #a01414;
  color: #fff;
  font-size: 13px;
  padding: 6px 18px;
  border-radius: 6px;
  text-decoration: none;
}
.footer .login-btn {
  margin-bottom: 10px;
}

/* ===== 登录页 ===== */
.login-box {
  max-width: 360px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 1px solid #a01414;
  border-radius: 12px;
  padding: 30px 20px;
}
.login-box h2 {
  color: #a01414;
  margin-bottom: 18px;
}
.qr-placeholder {
  width: 200px;
  height: 200px;
  margin: 0 auto 16px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}
.login-tip {
  font-size: 14px;
  color: #333;
  margin-bottom: 6px;
}
.login-tip2 {
  font-size: 12px;
  color: #999;
}
.contact-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}
.tel-label {
  color: #a01414;
  font-weight: bold;
  font-size: 15px;
}
.tel-num {
  color: #a01414;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
}

/* ===== 入口卡片 ===== */
.cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.card {
  display: block;
  width: 280px;
  padding: 26px 20px;
  background: #fff;
  border: 1px solid #e5ddd0;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  transition: box-shadow .2s, transform .2s;
}
.card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transform: translateY(-3px);
}
.card h3 {
  font-size: 20px;
  color: #a01414;
  margin-bottom: 8px;
}
.card p {
  font-size: 14px;
  color: #888;
}

/* ===== 首页功能卡（套用小程序框架，颜色统一欢迎大标题色） ===== */
.p-card {
  background: #fff;
  border: 1px solid #99522e;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
/* 公共热线：去外框线、无内边距 */
.p-card-noline {
  border: none;
  padding: 0;
}
.pub-box {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #99522e;
  border-radius: 10px;
  overflow: hidden;
}
.pub-body { flex: 1; padding: 12px 14px; }
.pub-title {
  font-size: 17px;
  font-weight: bold;
  color: #99522e;
  margin-bottom: 4px;
}
.pub-desc {
  font-size: 12px;
  color: #99522e;
  line-height: 1.5;
  padding-left: 2em;
}
.pub-btn {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: #ffffff;
  background: #99522e;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
}
.pub-btn-t { font-size: 16px; line-height: 1.5; }
.pub-btn-a { font-size: 18px; line-height: 1.3; }
.land-map {
  width: 100%;
  margin-top: 10px;
  border-radius: 8px;
  display: block;
}

/* ===== 家族谱引导页（棕色系，与全站协调） ===== */
.page-hint {
  text-align: center;
  color: #99522e;
  font-size: 16px;
  margin-bottom: 22px;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.grid-item {
  width: calc((100% - 5 * 12px) / 6); /* 电脑端 6 列 */
  background: #f0e6d8;
  border: 1px solid #d8c3a8;
  border-radius: 10px;
  text-align: center;
  padding: 14px 0;
  font-size: 17px;
  color: #99522e;
  text-decoration: none;
  box-sizing: border-box;
}
.grid-item:hover {
  background: #e5d5bf;
  border-color: #99522e;
}
.info-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 16px;
  margin-top: 24px;
  box-shadow: 0 2px 10px rgba(153, 82, 46, 0.10);
}
.info-title {
  font-size: 17px;
  color: #99522e;
  font-weight: bold;
  margin-bottom: 10px;
}
.info-text {
  font-size: 13px;
  color: #6f5237;
  line-height: 1.8;
  text-indent: 2em;
  text-align: justify;
}

/* ===== 公共热线页（棕色系，与全站协调） ===== */
.pub-page-title {
  color: #99522e;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 18px;
}
.pub-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #d8c3a8;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(153, 82, 46, 0.10);
  overflow: hidden;
}
.pub-bar-btn {
  flex-shrink: 0;
  padding: 0 26px;
  height: 52px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: #fff;
}
.pub-copy {
  background: #e08a3c;
  border-radius: 0;
}
.pub-copy:hover { background: #c9762c; }
.pub-call {
  background: #2e5b44;
  border-radius: 0;
}
.pub-call:hover { background: #254a38; }
.pub-info {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 15px;
  color: #99522e;
  padding: 0 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pub-group {
  background: #fff;
  border: 1px solid #d8c3a8;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 18px;
}
.pub-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pub-item {
  width: calc((100% - 5 * 10px) / 6); /* 电脑端 6 列 */
  background: #f0e6d8;
  border: 1px solid #d8c3a8;
  border-radius: 8px;
  text-align: center;
  padding: 12px 0;
  font-size: 15px;
  color: #99522e;
  box-sizing: border-box;
  cursor: pointer;
}
.pub-item:hover {
  background: #e5d5bf;
  border-color: #99522e;
}
.pub-item-on {
  border-color: #99522e;
  background: #99522e;
  color: #fff;
}

/* ===== 家族谱分支动态页（棕色系） ===== */
.clan-main {
  max-width: none;
  padding: 10px;
}
/* 始祖框行：居中，不随树滚动 */
.root-row {
  display: flex;
  justify-content: center;
  margin: 4px 0 20px;
}
.root-box {
  width: 300px;
  height: 48px;
  border: 3px solid #464646;
  box-sizing: border-box;
  font-size: 22px;
  font-weight: bold;
  color: #464646;
  background: #f7f4ef;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 4px;
  line-height: 1;
  white-space: nowrap;
}
/* 树形滚动区 */
.tree-scroll {
  overflow-x: auto;
}
.tree-content {
  position: relative;
  min-width: 100%;
}
.lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 5;
}
.line {
  position: absolute;
}
.abs-node {
  position: absolute;
}
.box {
  border: 2px solid #99522e;
  box-sizing: border-box;
  position: relative;
}
/* 多节点代：竖框（两小框上下叠，各自竖排文字） */
.v-box {
  width: 34px;
  height: 132px;
  display: flex;
  flex-direction: column;
  border: none;
}
.v-box .sub {
  border: 1.5px solid #99522e;
  margin: 4px;
}
/* 单节点代：横框（两小框左右并排，横排文字） */
.h-box {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border: none;
}
.h-box .sub {
  writing-mode: horizontal-tb;
  font-size: 14px;
  letter-spacing: 0;
  padding: 10px 14px;
  flex: 0 0 auto;
  border: 1.5px solid #99522e;
  margin: 4px;
}
/* 小框内容：竖排；已故=70灰透明，在世=浅棕底 */
.sub {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 12px;
  color: #99522e;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 1px;
  flex: 1;
  min-height: 40px;
}
.dead {
  background: transparent;
  color: #464646;
  border-color: #464646;
}
.alive {
  background: #f0e6d8;
  color: #99522e;
}
/* 标题：辈份；骑在边框线上，页面底色做假透明遮线 */
.node-title {
  position: absolute;
  color: #99522e;
  white-space: nowrap;
  background: #f7f4ef;
  z-index: 6;
}
.t-top {
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  padding: 0 4px;
}
.t-right {
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  font-size: 11px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 2px;
  padding: 2px 3px;
}
.t-dead {
  color: #464646;
}
/* 无数据占位 */
.no-data {
  padding: 120px 0;
  text-align: center;
}
.nd-title {
  font-size: 20px;
  color: #99522e;
}
.nd-sub {
  font-size: 14px;
  color: #8a6b52;
  margin-top: 12px;
}

/* ===== 返回按钮 ===== */
.back {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  display: inline-block;
  padding: 6px 10px;
  background: rgba(247, 244, 239, 0.85);
  border: 1px solid #d8c3a8;
  border-radius: 6px;
  color: #99522e;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

/* ===== 转屏触发元素（与 clan 页同一套已验证有效方式） ===== */
.rotate-trigger {
  display: none;
  position: absolute; /* 脱离文档流：不再在页面顶部占 1px */
  width: 1px;
  height: 1px;
}
@keyframes rotateShake {
  from { opacity: 0.99; }
  to { opacity: 1; }
}
/* 横屏也发信号：转横屏时更新"转屏前宽度"，保证再转回竖屏时判断成立 */
@media (min-width: 601px) {
  .rotate-trigger {
    display: block;
    animation: rotateShake 100ms;
  }
}

/* ===== 版本标记（右下角，便于确认加载的代码版本） ===== */
.ver-mark {
  position: fixed;
  right: 6px;
  bottom: 6px;
  z-index: 999;
  font-size: 10px;
  color: #c9b8a0;
}

/* ===== 联系管理员弹窗 ===== */
.modal-mask {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
  align-items: center;
  justify-content: center;
}
.modal {
  position: relative;
  background: #fff;
  border: 1px solid #99522e;
  border-radius: 12px;
  padding: 26px 22px 22px;
  width: 320px;
  max-width: 88%;
  text-align: center;
}
.modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  border: none;
  background: none;
  font-size: 24px;
  color: #99522e;
  cursor: pointer;
}
.modal h3 {
  color: #99522e;
  margin-bottom: 14px;
}
.qr-placeholder {
  width: 200px;
  height: 200px;
  margin: 0 auto 12px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}
.contact-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}
.tel-label {
  color: #99522e;
  font-weight: bold;
  font-size: 15px;
}
.tel-num {
  color: #99522e;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
}
.login-tip {
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
}
.login-tip2 {
  font-size: 12px;
  color: #999;
}

/* 理事铺·联系管理员卡片（玻璃，居中） */
.contact-box {
  display: inline-block;
  margin: 14px auto 0;
  padding: 18px 26px;
  text-align: center;
  border-radius: 10px;
  background: rgba(255,255,255,var(--card-a,.6));
  -webkit-backdrop-filter: blur(var(--card-blur,18px));
  backdrop-filter: blur(var(--card-blur,18px));
  box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 -1px 0 rgba(255,255,255,.25);
}
.qr-box {
  width: 140px;
  height: 140px;
  margin: 6px auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(153,82,46,.5);
  border-radius: 8px;
  color: #99522e;
  font-size: 13px;
  background: rgba(255,255,255,.25);
}

/* 理事铺·联系管理员：可点击入口（不再常挂页面，点开才弹窗） */
.contact-entry {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  padding: 13px 30px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  color: #99522e;
  font-size: 17px;
  font-weight: bold;
  background: rgba(255,255,255,var(--card-a,.6));
  -webkit-backdrop-filter: blur(var(--card-blur,18px));
  backdrop-filter: blur(var(--card-blur,18px));
  box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 -1px 0 rgba(255,255,255,.25);
  transition: transform .12s ease, box-shadow .12s ease;
}
.contact-entry:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.22), inset 0 -1px 0 rgba(255,255,255,.25);
}
.contact-entry:active { transform: translateY(0); }
.contact-entry .ce-ico { font-size: 20px; line-height: 1; }
.contact-entry .ce-arrow { font-size: 22px; line-height: 1; opacity: .6; }
.ce-sub { margin: 10px 0 0; font-size: 13px; color: rgba(153,82,46,.85); }

/* ===== 页脚（电脑端）：只保留一行备案号，字号压小、上下留白收窄 ===== */
.footer {
  background: #efe8de;
  padding: 8px 16px;
  text-align: center;
}
.footer .beian {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}
.footer .beian a {
  font-size: 11px;
  color: #999;
  text-decoration: none;
}
.footer .beian a:hover {
  color: #99522e;
  text-decoration: underline;
}

/* ===== 首页科技背景（v30：改为独立固定层，支持不限高滚动） =====
   为什么不用 body 上的 background-attachment:fixed：
   iOS Safari 不支持该属性，页面一长会把 SVG 拉伸变形。
   改用 position:fixed 的独立图层，视口内永远是完整构图，
   页面内容无论多长都只是"盖"在它上面滚动。 */
.home-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* 手机端按可视高度算，避开地址栏 */
  background-color: #081426; /* 兜底底色：图片未加载时也不露白 */
}
/* 首页占位内容区：自动吃掉剩余高度，把页脚压到屏幕底部
   （内容变多时它会自动收缩，页面照常往下长，不限高） */
.home-body .main {
  position: relative;
  z-index: 1; /* 第 1 层：内容永远在背景之上（递归生效，以后往里填什么都跑不到背景下面去） */
  flex: 1 1 auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
/* 同名页（李氏谱 / 理事铺）内容区留白：
   空着的时候与首页 100% 一致（只有背景），一旦往里填内容就自动带内边距，
   并且收到和 banner 同一条 1000px 内容栏里（左边与 logo 对齐） */
.home-body .main:not(:empty) {
  width: 100%; /* 必须有：flex 列布局下 margin:auto 会吃掉交叉轴空白，
                  导致这栏被缩成"内容宽度"居中（实测只剩 237px）。加 width:100% 后
                  才会撑成满宽、再被 max-width 收到 900px 内容栏。 */
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 16px 30px;
}

/* ===== 三个主菜单页（礼事谱 / 李氏谱 / 理事铺）：一屏装满，页面永不撑出屏幕 =====
   只给这三页的 body 加 .top-body；5 个分页面不加 —— 分页是长文，该滚就滚。
   ① body 给一个【确定高度】：只有确定高度，里面的 flex:1 才敢"缩"。
      只写 min-height 的话，内容一多 body 就被撑高、整页冒出滚动条（就是"撑屏"）。
   ② 链条：body(定高) → .main(吃掉横幅与页脚之外的余高) → 内容
      每一层都写 min-height:0 —— flex 默认"按内容高度不肯缩"，不写这句就顶出屏幕。
   ③ 内容真比屏幕高时，在 .main 里面滚 —— 横幅与页脚始终钉在屏幕上下，
      页面总高永远 = 一屏。高度全是浏览器自己算的：竖屏 / 横屏 / 手机地址栏伸缩
      都自动跟得上，不用 JS 去量"屏幕多高、上面占了多少"。 */
.top-body {
  height: 100vh;      /* 兜底：老浏览器不认 dvh 时用它 */
  height: 100dvh;     /* 手机：按当前可视高度算（地址栏收起/展开都跟得上） */
}
/* body 一旦是定高 flex，里面的项默认都会缩：屏幕矮的时候横幅会被挤扁（实测横屏
   80px 被压成 66px）、页脚也一样。把这两块钉死，不足的高度全交给中间那块吸收。 */
.top-body .banner,
.top-body .footer {
  flex: none;
}
.top-body .main {
  min-height: 0;
}
/* 内容超高时在内容栏内部滚，页面总高不变。
   李氏谱页排除掉：那一页的"树"本来就是按剩余高度自适应缩放的，main 不需要滚动。 */
.top-body:not(.lsp-body) .main {
  overflow-y: auto;
  overflow-x: hidden;  /* 一个方向不是 visible 时，另一个会被算成 auto，显式写死防横滚条 */
}

/* ===== v56：内容框直达页脚，去掉内容区底部那条"死带" =====
   原来 .home-body .main:not(:empty) 底下垫了 30px 内边距，再加上最后一个内容块的
   10px 外距，内容框底边离页脚就空出 40px —— 在这三页"一屏装满"的版式里，
   这条缝看着像页面没铺满。这里把底部留白清零，让内容框（李氏谱的树框）
   一路撑到页脚上沿。
   选择器特意多挂一个 .home-body 提高权重：mobile.css 里有一条同名的
   `.home-body .main:not(:empty){padding: 16px 12px 24px}`，它在后面加载，
   权重相同就会盖回来 —— 多挂一个类才能连手机端一起压住。 */
.home-body.top-body .main:not(:empty) {
  padding-bottom: 0;
}
.top-body .main > :last-child {
  margin-bottom: 0;   /* 最后一个内容块的外距也归零，否则那 10px 还是会在 */
}
/* ===== 三层显式分层（别再靠 z-index:-1 那种"负层"写法，容易出怪问题）=====
   第 0 层：.bg-stage —— 固定的背景树，铺满视口，页面滚多长它都不动
   第 1 层：.banner / .main / .footer —— 真正的内容，全部 position:relative + z-index:1
   第 60 / 999 层：翻页箭头 / 弹窗、版本号

   为什么不用 z-index:-1：
   "-1" 是相对"最近的形成层叠上下文的祖先"算的。只要哪天 html 或 body 上
   多了 transform / filter / opacity<1 / isolation 之类（哪怕临时加个动画），
   它们就会形成层叠上下文，背景层会被按在 body 自己的底色底下而整片消失。
   把背景放 0 层、内容放 1 层，是显式声明的，不依赖任何"负层逃逸"的巧合。 */
.bg-stage {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0; /* 第 0 层：背景 */
  background: #081426 url(../img/bg-tree.svg) center center / cover no-repeat;
  pointer-events: none; /* 不拦截鼠标事件 */
}

/* ===== 首页深色玻璃拟态：导航/页脚融进背景（仅首页，其他页面不动） ===== */
/* 横幅：总高由变量 --bn-h 控制（电脑 80px / 手机按比例缩小）
   logo + 文字图 + 导航 同排垂直居中，电脑与手机布局完全一致 */
.home-body .banner {
  position: relative;
  z-index: 1; /* 第 1 层：压住背景 */
  height: var(--bn-h);
  padding-top: 0;
  padding-bottom: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 199, 75, 0.4);
  margin-top: 0;
}
/* 横幅内两张图的高度全部由 CSS 变量控制，
   手机端只需改变量即可整体等比缩小（不再靠 JS 逐个设高） */
.home-body .banner-logo img { height: var(--bn-logo); }
.home-body .banner-texts img { height: var(--bn-text); }
/* 图片格子：宽度锁死（见 :root 里 --bn-*-slot 的说明）。
   图片在格子里左对齐 → 缩小图片时左边缘不动，右边多出来的空档留给分隔线。 */
.home-body .banner-logo {
  width: var(--bn-logo-slot);
  justify-content: flex-start;
}
.home-body .banner-texts {
  width: var(--bn-text-slot);
  justify-content: flex-start;
}
/* 分隔线：隔开「logo + 名号」和「菜单」。
   用 ::before 绝对定位挂在菜单左侧 —— 不在文档流里，所以：
     ① 加它绝不会把菜单往右推（菜单位置保持原样）；
     ② 它自己永远跟着菜单走，不会因为图片改大小而错位。
   形状：一道两端淡入淡出的金色细线，比一根生硬的竖杠柔和。 */
.home-body .nav-bar { position: relative; }
.home-body .nav-bar::before {
  content: '';
  position: absolute;
  /* 距菜单左边这么多（正好落在名号与菜单之间）；
     再左移半个线宽，让加粗后的线与原来的细线共用同一条中线，位置看着不变 */
  left: calc(-1 * var(--bn-sep-gap) - var(--bn-sep-w) / 2);
  top: 50%;
  width: var(--bn-sep-w);
  height: var(--bn-sep-h);
  margin-top: calc(var(--bn-sep-h) / -2); /* 垂直居中：不用 transform，免得和别的动画打架 */
  background: linear-gradient(180deg,
    rgba(255, 199, 75, 0),
    rgba(255, 199, 75, var(--bn-sep-a)) 50%,
    rgba(255, 199, 75, 0));
  pointer-events: none;                 /* 不挡鼠标 */
}
/* 导航：并入 banner 后不再有独立底色/下边框，完全透明 */
.home-body .nav-bar {
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* 网址小字：棕 → 雌黄 */
.home-body .banner-url { color: #FFC64B; }
.home-body .nav-item { color: #cfe2f5; }
.home-body .nav-item:hover { background: rgba(143, 195, 240, 0.15); }
.home-body .nav-item.active {
  background: #FFC64B;
  color: #2E4E7E;
  font-weight: bold;
}
.home-body .footer {
  position: relative;
  z-index: 1; /* 第 1 层：压住背景（背景层提到 0 后，页脚必须是定位元素才不会被盖住） */
  background: rgba(8, 20, 38, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.home-body .footer .beian a { color: rgba(207, 226, 245, 0.55); }
.home-body .footer .beian a:hover { color: #FFC64B; }

/* ===== 内容入场动画：方向跟着"目标页在当前页的哪一侧"走 =====
   .enter-from-right → 新内容从【右边框外】滑到中间（切到后面的页 / 手指左滑）
   .enter-from-left  → 新内容从【左边框外】滑到中间（切到前面的页 / 手指右滑）
   位移取 100vw：起点正好在屏幕外，视觉上就是"整页从边框推进来"。
   点菜单与滑动手势共用这两个类，方向由 main.js 统一判定。 */
.main.enter-from-right > * {
  animation: pageInFromRight .5s cubic-bezier(.22, .8, .3, 1) both;
}
.main.enter-from-left > * {
  animation: pageInFromLeft .5s cubic-bezier(.22, .8, .3, 1) both;
}
@keyframes pageInFromRight {
  from { opacity: 0; transform: translateX(100vw); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pageInFromLeft {
  from { opacity: 0; transform: translateX(-100vw); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ===== 内容块（.ph）：外框不显示，只是个居中容器 =====
   玻璃效果整体下移到 .ph-title —— 标题自己就是那个"内框"，宽度由文字撑开。
   好处：框跟着字走。标题长框就长、标题短框就短，不会出现一个大空框里孤零零几个字。 */
.ph {
  position: relative;
  z-index: 1; /* 容器不显示，但仍显式抬层：以后往里加任何东西都不会掉到背景下面 */
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0 0 10px;
  text-align: center;
}
/* 标题 = 玻璃内框：宽度由内容决定（inline-block），外围留白就是内边距 */
.ph-title {
  display: inline-block;          /* 关键：宽度 = 文字宽 + 内边距，不撑满一行 */
  padding: 10px 20px;
  border-radius: 6px;
  background: var(--card-bg);
  backdrop-filter: blur(var(--card-blur)) saturate(var(--card-sat)) brightness(var(--card-bri));
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-sat)) brightness(var(--card-bri));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.42),              /* 投影：把框从背景里托起来 */
    inset 0 1px 0 rgba(255, 255, 255, 0.08),      /* 顶部高光：玻璃上沿的一道反光 */
    inset 0 -20px 34px -20px rgba(0, 0, 0, 0.4);  /* 底部内阴影：下沿变暗，边缘和背景化开 */
  font-size: 16px;
  line-height: 1.2;
  color: #FFC64B;
  letter-spacing: var(--card-ls);
  /* letter-spacing 在最后一个字后面也留了一道空隙，会让文字看着偏左；
     text-indent 补等量 —— 文字右移量刚好等于框宽增加量的一半，两边抵消，视觉回到正中。 */
  text-indent: var(--card-ls);
}
/* 本页说明文字：在玻璃框外面，一行字 */
.ph-sub {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(207, 226, 245, 0.6);
}

/* ===== 首页栏目入口（礼事谱）：标题框下面的入口框 =====
   和标题框一个道理 ——
     · .lx-box   = 外框：只管"排版 + 居中"，自己不显示（无底无框无阴影）
     · .lx-entry = 内框：真正看得见的那块玻璃，每格等宽、行内等高
   电脑端排两列：红事一组一行（书写 | 流程）/ 白事一组一行（书写 | 流程）/
   各地差异一行（各地差异 | 预留空白格）—— 共三行六个格子。
   手机端在 mobile.css 里改回一列竖排（手指好点，说明文字也不会被挤断行）。
   玻璃配方（半透明底 + 毛玻璃 + 投影 + 下沿内阴影）与 .ph-title 同源，
   只换"底色 + 文字色"，所以配色变了、质感还是全站那一套。 */
.lx-box {
  position: relative;
  z-index: 1;              /* 第 1 层：与 .ph 同层，永远在背景之上 */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* 两列等宽，格子自己撑满 */
  gap: 12px;
  margin-top: 12px;
}
.lx-entry {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 20px;
  border-radius: 6px;                     /* 卡片级小圆角，不是胶囊 */
  background: var(--lx-bg);                /* 不写配色类时 = 全站蓝金（各地差异那档） */
  backdrop-filter: blur(var(--card-blur)) saturate(var(--card-sat)) brightness(var(--card-bri));
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-sat)) brightness(var(--card-bri));
  border: 1px solid rgba(255, 199, 75, 0.28);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.42),              /* 投影：把框从背景里托起来 */
    inset 0 1px 0 rgba(255, 255, 255, 0.08),      /* 上沿反光 */
    inset 0 -20px 34px -20px rgba(0, 0, 0, 0.4);  /* 下沿自然变暗 */
  text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.lx-entry:hover {
  border-color: #FFC64B;
  transform: translateY(-2px);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -20px 34px -20px rgba(0, 0, 0, 0.4);
}

/* ----- 三档配色 -----
   红事：枣红底 + 雌黄字    白事：雅青底 + 青白字    其余（各地差异）：全站蓝金
   底色比标题框实一点（--lx-a .62 对 --card-a .40）：不透出颜色就认不出"红事/白事"。 */
.lx-entry-hong {
  background: linear-gradient(180deg, rgba(var(--hong-top), var(--lx-a)), rgba(var(--hong-bot), var(--lx-a)));
  border-color: var(--hong-line);
}
.lx-entry-hong .lx-name  { color: var(--hong-text); }
.lx-entry-hong .lx-desc  { color: var(--hong-text2); }
.lx-entry-hong .lx-arrow { color: rgba(255, 198, 75, 0.5); }
.lx-entry-hong:hover     { border-color: var(--hong-text); }

.lx-entry-bai {
  background: linear-gradient(180deg, rgba(var(--bai-top), var(--lx-a)), rgba(var(--bai-bot), var(--lx-a)));
  border-color: var(--bai-line);
}
.lx-entry-bai .lx-name  { color: var(--bai-text); }
.lx-entry-bai .lx-desc  { color: var(--bai-text2); }
.lx-entry-bai .lx-arrow { color: rgba(220, 234, 242, 0.5); }
.lx-entry-bai:hover     { border-color: var(--bai-text); }

/* 第一行：栏目名 + 右侧箭头 */
.lx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lx-name {
  font-size: 14px;
  line-height: 1.2;
  color: #FFC64B;
  letter-spacing: 2px;
}
.lx-arrow {
  font-size: 16px;
  line-height: 1;
  color: rgba(255, 199, 75, 0.5);
  transition: color .2s, transform .2s;
}
.lx-entry:hover .lx-arrow {
  transform: translateX(3px); /* 箭头往右挪一点：明确"点了会进去" */
}
/* 第二行：这一栏里都放什么 */
.lx-desc {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 1px;
  color: rgba(207, 226, 245, 0.6);
}

/* ----- 预留位：占一个格子，留着以后加栏目 -----
   故意做成"虚线 + 很淡的底"，一眼就能看出它还不是内容、只是占位；
   pointer-events:none —— 它不可点，鼠标划过也不会像别的框那样上浮。
   （手机端在 mobile.css 里隐藏：那一列竖排里多一个空格子没意义） */
.lx-entry-blank {
  background: rgba(8, 20, 38, 0.22);
  border: 1px dashed rgba(255, 199, 75, 0.3);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-items: center;
  justify-content: center;
  cursor: default;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.lx-blank-tip {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 3px;
  text-indent: 3px;                    /* 抵消末字后面多出来的那点字距，视觉才居中 */
  color: rgba(207, 226, 245, 0.28);
}

/* ===== 电脑端左右翻页箭头：固定屏幕两侧、贴在 1000px 内容栏外沿，持续闪动提示可点 =====
   （手机端在 mobile.css 里隐藏 —— 手机上直接用手指左右滑）
   由 main.js 动态创建，只在「首页 / 李氏谱 / 理事铺」这三个页面出现；
   到第一页不出左箭头、到最后一页不出右箭头。 */
.page-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中：关键帧里也在用同一份 transform，
                                   所以鼠标划上去停掉动画时不会往下跳 */
  z-index: 60; /* 在内容之上、弹窗（999）之下 */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 199, 75, 0.45);
  border-radius: 50%;
  background: rgba(8, 20, 38, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #FFC64B;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: background .2s, border-color .2s;
}
/* 位置：贴在内容栏（900px）外侧 58px；屏幕窄到放不下时退到离屏幕边 12px（不再往内容里压） */
.page-arrow-l {
  left: max(12px, calc((100% - 900px) / 2 - 58px));
  animation: arrowBlinkL 1.8s ease-in-out infinite;
}
.page-arrow-r {
  right: max(12px, calc((100% - 900px) / 2 - 58px));
  animation: arrowBlinkR 1.8s ease-in-out infinite;
}
/* 鼠标划上去 / 键盘聚焦：停止闪动、变亮，明确"已就绪" */
.page-arrow:hover,
.page-arrow:focus-visible {
  background: rgba(255, 199, 75, 0.20);
  border-color: #FFC64B;
  animation: none;
  opacity: 1;
}
.page-arrow[hidden] { display: none; } /* 到第一页 / 最后一页时藏掉对应的那个 */
/* 闪动：明暗呼吸 + 朝外侧轻推，提示"这边还有内容"（下限 0.45，保证一直看得见） */
@keyframes arrowBlinkL {
  0%, 100% { opacity: .45; transform: translate(-8px, -50%); }
  50%      { opacity: 1;   transform: translate(0, -50%); }
}
@keyframes arrowBlinkR {
  0%, 100% { opacity: .45; transform: translate(8px, -50%); }
  50%      { opacity: 1;   transform: translate(0, -50%); }
}

/* ===== 电脑端按住鼠标拖动网页时的状态 =====
   开始横向拖动才加上 .dragging（普通点击、竖着选字都不会触发）： */
body.dragging,
body.dragging * {
  cursor: grabbing !important; /* 光标变抓手，给"正在拖页面"的反馈 */
}
body.dragging {
  user-select: none;
  -webkit-user-select: none;
}
/* 首页系列图片不参与浏览器原生拖拽（否则按住 logo 会拖出个半透明影子） */
.home-body img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ==========================================================================
   李氏谱页：专属色系（古铜 + 枇杷黄）+ 树状结构展示
   --------------------------------------------------------------------------
   ① 色系：古铜 #604322（rgb 96,67,34）打底，枇杷黄做文字/描边/连线。
      变量挂在 body.lsp-body 上 —— 只有李氏谱这一页生效，其他页一律不受影响。
   ② 三层结构（沿全站那套写法）：
        .ph       = 外框，只管定位排版，自己不显示（与标题的外框同一个类）
        .tree-box = 内框，真正看得见的玻璃，宽度与礼事谱页的入口框一致（420px）
        .tree-stage / .ft-canvas = 树自己的舞台与画布
   ③ 树是从小程序移植的（见 static/js/tree-demo.js），这里只管样式。
   ========================================================================== */

/* ----- 这一页的调色板 ----- */
.lsp-body {
  --gz-top: 96, 67, 34;                 /* 古铜 #604322：卡片亮部 */
  --gz-bot: 52, 34, 16;                 /* 古铜压暗一档：卡片暗部（渐变用） */
  --gz-text: #F0BC45;                   /* 枇杷黄：标题、节点名字 */
  --gz-text2: rgba(240, 188, 69, 0.72); /* 枇杷黄淡一档：次级文字 */
  --gz-line: rgba(240, 188, 69, 0.32);  /* 描边 */
  --gz-rule: rgba(240, 188, 69, 0.5);   /* 树里的连线 */
  --gz-card: #FFF3DA;                   /* 节点卡片底：浅米，在古铜底上跳出来 */
  --gz-card-line: #F0BC45;              /* 节点卡片描边（男） */
  --gz-card-line-f: #C9A87C;            /* 节点卡片描边（女，同族的浅驼） */
  --gz-ink: #4A3620;                    /* 卡片上的主文字 */
  --gz-ink2: #8A7048;                   /* 卡片上的次级文字 */
}

/* 标题框：李氏谱页也走古铜（其他页仍是全站蓝金） */
.lsp-body .ph-title {
  background: linear-gradient(180deg, rgba(var(--gz-top), var(--card-a)), rgba(var(--gz-bot), var(--card-a)));
  border: 1px solid var(--gz-line);
  color: var(--gz-text);
}

/* ----- 第二行：树状展示区 ----- */
/* 内框 = 那块玻璃。
   v56 起【跟着内容栏走满宽】，不再锁 420px —— 原来那点宽度比礼事谱页的入口框
   窄了一大截（入口框现在两列、整块占满 868px），对比之下这一页就成了"框小、
   左右一片空"。电脑端宽 = 内容栏 868px（900 − 左右各 16 内边距）；
   窄屏时 100% 自然收敛，不用另写断点。 */
.tree-box {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 12px;
  border-radius: 6px;                    /* 与全站卡片一个圆角级别 */
  background: linear-gradient(180deg, rgba(var(--gz-top), var(--lx-a)), rgba(var(--gz-bot), var(--lx-a)));
  backdrop-filter: blur(var(--card-blur)) saturate(var(--card-sat)) brightness(var(--card-bri));
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-sat)) brightness(var(--card-bri));
  border: 1px solid var(--gz-line);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.42),              /* 投影：把框从背景里托起来 */
    inset 0 1px 0 rgba(255, 255, 255, 0.08),      /* 上沿反光 */
    inset 0 -20px 34px -20px rgba(0, 0, 0, 0.4);  /* 下沿自然变暗 */
}

/* ----- 整页高度锁死：这一页永远"一屏装满"，不出现页面滚动 -----
   ① body 给一个【确定高度】（100dvh）——
      只有确定高度，里面的 flex:1 才敢"缩"；只写 min-height 的话，
      内容一多 body 就被撑高（手机横屏实测被顶出屏 62px）。
   ② 链条：body(定高) → .main(flex:1，吃掉横幅与页脚之外的全部余高)
        → 树那一行 .ph(flex:1) → .tree-box(flex:1) → .tree-stage(flex:1)
   每一层都写 min-height:0 —— flex 默认"按内容高度不肯缩"，不写这一句，
   最后一层就会按树的自然高度把整页顶出屏幕。
   高度全是浏览器自己算的：竖屏 / 横屏 / 手机地址栏伸缩都能自动跟上，
   不用 JS 去量"屏幕多高、上面占了多少"。 */
.lsp-body {
  height: 100vh;      /* 兜底：老浏览器不认 dvh 时用它 */
  height: 100dvh;     /* 手机：按当前可视高度算（地址栏收起/展开都跟得上） */
}
/* 只许"树"那一块被压缩：body 一旦是定高 flex，里面的项默认都会缩，
   屏幕矮的时候横幅会被挤扁（实测 812×375 横屏：80px 被压成 66px）、页脚也一样。
   把这两块钉死，剩下不够的高度全部由树那一行去吸收。 */
.lsp-body .banner,
.lsp-body .footer {
  flex: none;
}
.lsp-body .main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.lsp-body .main > .ph:last-child {   /* 树那一行 */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.lsp-body .tree-box {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.lsp-body .tree-stage { flex: 1 1 auto; }
/* 树的舞台 = 一个"窗口"，高度【不再写死】，而是由这一页的竖排 flex 链条撑出来：
   body(≥100dvh) → .main(吃掉横幅/页脚之外的余高) → 树那一行 → .tree-box → 这里。
   于是舞台高度恒等于「屏幕高 − 横幅 − 标题 − 工具条 − 页脚 − 各处内边距」，
   页面永远不出屏（这一页不会出现上下滚动），手机横竖屏、地址栏伸缩都自动跟上。
   这里不写下限（min-height:0）：万一屏幕矮到"横幅+标题+工具条+页脚"就占满了，
   宁可窗口缩得很小，也不许把整页顶出屏幕。
   放大了以后（内容比窗口大）就用它自己的原生滚动看别的部分。
   touch-action: pan-x pan-y —— 单指拖动 = 平移（原生滚动）；
   双指捏合不交给浏览器（页面级缩放已锁），由 tree-demo.js 自己接过来缩放树。 */
.tree-stage {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  display: flex;              /* 让托板能在窗口里居中。下面用 margin:auto 做"安全居中"：
                                 内容比窗口大时自动归零，不会把上边裁掉（flex 居中会） */
  overflow: auto;
  overscroll-behavior: auto;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}
/* 放大后出现的细滚动条：低调一点，别抢树的戏 */
.tree-stage::-webkit-scrollbar { width: 6px; height: 6px; }
.tree-stage::-webkit-scrollbar-track { background: transparent; }
.tree-stage::-webkit-scrollbar-thumb {
  background: rgba(240, 188, 69, 0.3);
  border-radius: 3px;
}
.tree-stage::-webkit-scrollbar-thumb:hover { background: rgba(240, 188, 69, 0.5); }

/* 托板：尺寸由 JS 按缩放结果设置（比舞台大就出现滚动），
   小了就靠 margin:auto 在窗口里上下左右都居中 */
.ft-viewport {
  position: relative;
  flex: none;              /* 不许被 flex 压缩（宽高是 JS 按缩放算好的） */
  margin: auto;
}
.ft-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;   /* 缩放以左上角为基准，方便自己算居中位移 */
}

/* ----- 缩放工具条：− 百分比 + ----- */
.tree-zoom {
  flex: none;              /* 高度固定，别被上下挤扁（上面是 flex:1 的舞台） */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.tz-btn,
.tz-pct {
  -webkit-appearance: none;
  appearance: none;
  height: 26px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 6px;                     /* 小控件：不是胶囊 */
  border: 1px solid rgba(240, 188, 69, 0.38);
  background: rgba(240, 188, 69, 0.12);
  color: #F0BC45;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s, border-color .18s, opacity .18s;
}
.tz-btn { min-width: 30px; font-size: 16px; }
.tz-pct { min-width: 56px; font-size: 12px; letter-spacing: .5px; }
.tz-btn:hover:not(:disabled),
.tz-pct:hover {
  background: rgba(240, 188, 69, 0.24);
  border-color: #F0BC45;
}
.tz-btn:disabled {
  opacity: .3;
  cursor: default;
}

/* ----- 树本体（节点 / 连线）-----
   几何与小程序组件同源：节点 56 宽 80 高、夫妻对 118、子女槽位最小 132、
   每一级往下 20px 竖杆 + 20px 横向连线。改这些数字要连着 tree-demo.js 里的 M 一起改。 */
.ft-node { display: flex; flex-direction: column; align-items: center; }
.ft-couple { display: flex; align-items: stretch; flex: none; }
.ft-couple-gap { width: 6px; flex: none; }
.ft-children { display: flex; flex-direction: column; align-items: center; }
.ft-stem-down { width: 2px; height: 20px; background: var(--gz-rule); flex: none; }
.ft-kids { display: flex; }
/* 最小 170px：子树更宽时槽位自己撑开，不会把子树夹扁（要跟 tree-demo.js 的 KID_MIN 一致） */
.ft-kid { flex: 0 0 auto; min-width: 170px; display: flex; flex-direction: column; align-items: center; }
.ft-link { display: flex; align-items: flex-start; width: 100%; height: 20px; }
.ft-link-h { flex: 1; height: 2px; background: var(--gz-rule); }
/* 首 / 末子女的外侧半段：留位不画线，保证竖线落在槽位正中 */
.ft-link-hide { background: transparent !important; }
.ft-link-v { width: 2px; height: 20px; background: var(--gz-rule); flex: none; }

/* 卡宽 74（原来 56）：56 太窄，「一世祖-1世」「1915-1992」这类字段会被挤成两行。
   要跟 tree-demo.js 的 PERSON 一致，否则连线的落点会偏。 */
.ft-person {
  position: relative;
  width: 74px;
  min-height: 80px;
  flex: none;
  box-sizing: border-box;
  background: var(--gz-card);
  border: 2px solid var(--gz-card-line);   /* 男：枇杷黄 */
  border-radius: 10px;
  padding: 12px 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ft-person.female { border-color: var(--gz-card-line-f); }   /* 女：浅驼 */
.ft-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; margin-bottom: 6px;
  background: rgba(240, 188, 69, 0.22); color: #8A6A1E;
}
.ft-person.female .ft-avatar { background: rgba(201, 168, 124, 0.26); color: #7A5C36; }
/* 三行文字一律不折行（卡宽 74 已经放得下「一世祖-1世」「1915-1992」这种最长的字段） */
.ft-name { font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--gz-ink); white-space: nowrap; }
.ft-gen { margin-top: 3px; font-size: 10px; line-height: 1.2; text-align: center; color: var(--gz-ink2); white-space: nowrap; }
.ft-birth { margin-top: 1px; font-size: 10px; line-height: 1.2; text-align: center; color: var(--gz-ink2); white-space: nowrap; }
/* 已故角标：深古铜底 + 枇杷黄字（原位是小程序的黑底白字） */
.ft-badge {
  position: absolute; top: -9px; right: -3px; z-index: 2;
  background: #4A3620; color: #F0BC45;
  font-size: 9px; line-height: 1; padding: 3px 5px; border-radius: 4px; white-space: nowrap;
}

/* 手机端：内容框跟着内容栏收窄，舞台高度照旧由竖排 flex 链条自己算（不写死） */
@media (max-width: 600px) {
  .tree-box { padding: 10px; }
}


/* ===== 全屏分页容器（v61 框架）：首页入口点入，盖住 banner/footer，内部按 tab 分页 =====
   ① 全屏 fixed 盖住整站；退出（关闭按钮/后退/侧滑）统一走"退出确认"（弹窗在 HTML 里）
   ② 标题 = 入口大标题；tab = 入口小标题 split()，JS 生成，这里不写死任何分类
   ③ 配色继承入口：--fs-* 默认蓝金（与 --lx-bg 同值），.fs-theme-bai/.fs-theme-hong 覆写
   ④ 无 banner/footer；flex 列：顶栏 → tab 条 → 档案条 → 内容区(填满剩余高度·内部滚) */
.fs-page {
  --fs-top: 15, 32, 57;                     /* 默认：全站蓝金 */
  --fs-bot: 7, 18, 36;
  --fs-text: #FFC64B;
  --fs-text2: rgba(255, 198, 75, .72);
  --fs-line: rgba(255, 199, 75, .34);
}
.fs-theme-hong {
  --fs-top: var(--hong-top); --fs-bot: var(--hong-bot);
  --fs-text: var(--hong-text); --fs-text2: var(--hong-text2); --fs-line: var(--hong-line);
}
.fs-theme-bai {
  --fs-top: var(--bai-top); --fs-bot: var(--bai-bot);
  --fs-text: var(--bai-text); --fs-text2: var(--bai-text2); --fs-line: var(--bai-line);
}

.fs-mask {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;                            /* 盖住 banner(1)/页脚/modal(999) */
}
.fs-mask.on { display: block; }

.fs-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(var(--fs-top), 1), rgba(var(--fs-bot), 1));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}
.fs-mask.on .fs-page { opacity: 1; transform: none; }

/* 内容整体居中：外框(.fs-page 渐变)铺满全屏，里面这条"900 列"居中，
   tab 按钮 / 档案条 / 正文 / 一切后续加进来的东西都跟着居中，不会跑左边 */
.fs-page { align-items: center; }
.fs-bar, .fs-tabs, .fs-profile, .fs-body {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* 顶栏：关闭按钮 + 标题（= 入口大标题） */
.fs-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--fs-line);
  background: rgba(var(--fs-top), .92);
}
.fs-close {
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--fs-line);
  border-radius: 8px;                       /* 小圆角矩形，不是胶囊 */
  background: rgba(255,255,255,.06);
  color: var(--fs-text);
  font-size: 18px; line-height: 1;
  cursor: pointer;
}
.fs-close:hover { background: rgba(255,255,255,.14); }
.fs-title {
  font-size: 17px;
  letter-spacing: 3px;
  color: var(--fs-text);
}

/* 分页标签条：横向可滚（tab 多了不折行），当前项 = 主题色 + 下划线 */
.fs-tabs {
  flex: none;
  display: flex;
  gap: 4px;
  padding: 0 10px;
  overflow-x: auto;
  border-bottom: 1px solid var(--fs-line);
  background: rgba(var(--fs-bot), .5);
  scrollbar-width: none;
}
.fs-tabs::-webkit-scrollbar { display: none; }
.fs-tab {
  flex: none;
  border: none;
  background: none;
  padding: 12px 14px;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--fs-text2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.fs-tab:hover { color: var(--fs-text); }
.fs-tab.on { color: var(--fs-text); border-bottom-color: var(--fs-text); }

/* 情况档案条：页内所有 tab 共用，全局信息框直接写在此行 */
.fs-profile {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px 8px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--fs-text2);
  border-bottom: 1px solid var(--fs-line);
  background: rgba(0,0,0,.14);
  overflow-x: auto;
}
.fs-pf-item { white-space: nowrap; flex: none; }
.fs-pf-item b { color: var(--fs-text); font-weight: 600; }

/* 全局信息框控件（index.html 写死，直接挂在 .fs-profile 内） */
.fs-g-in { width: 60px; height: 22px; padding: 2px 5px; border: 1px solid var(--fs-line, rgba(255,199,75,.34)); border-radius: 4px; background: rgba(0,0,0,.22); color: var(--fs-text, #FFC64B); font-size: 11px; letter-spacing: .3px; box-sizing: border-box; flex: none; }
.fs-g-in::placeholder { color: rgba(203,185,138,.55); font-size: 10px; }
.fs-g-in#fsGBirth, .fs-g-in#fsGDeath { width: 84px; }
.fs-g-group { display: inline-flex; align-items: center; gap: 3px; margin: 0 2px; flex: none; }
.fs-g-radio { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: var(--fs-text, #FFC64B); cursor: pointer; }
.fs-g-radio input { accent-color: #c9a24b; width: 12px; height: 12px; margin: 0; }

/* 内容区：填满剩余高度，内部滚 */
.fs-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 14px 30px;
}
.fs-pane { display: none; }
.fs-pane.on { display: block; animation: fsPaneIn .18s ease both; }
@keyframes fsPaneIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* 空壳占位：内容还没录，先告诉人"这儿将来有东西" */
.fs-empty {
  margin: 36px auto;
  max-width: 420px;
  text-align: center;
  padding: 40px 24px;
  border: 1px dashed var(--fs-line);
  border-radius: 10px;                      /* 项目圆角体系：小控件 10px */
  color: var(--fs-text2);
}
.fs-empty-t { font-size: 16px; letter-spacing: 3px; color: var(--fs-text); margin-bottom: 10px; }
.fs-empty-d { font-size: 13px; line-height: 1.9; }

/* 退出确认（盖在全屏容器之上） */
.fs-quit-mask { z-index: 1250; }
.fs-quit-tip { font-size: 14px; color: #333; margin-bottom: 18px; }
.fs-quit-btns { display: flex; gap: 12px; justify-content: center; }
.fs-qbtn {
  min-width: 96px;
  padding: 9px 16px;
  border-radius: 10px;                      /* 项目圆角体系：小控件 10px */
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
}
.fs-qbtn-cancel { border: 1px solid #c9b8a8; background: #fff; color: #99522e; }
.fs-qbtn-ok { border: 1px solid #26686f; background: #26686f; color: #fff; }
.fs-qbtn:hover { filter: brightness(1.06); }

/* 全屏容器开着时，锁底层页面滚动 */
body.fs-on { overflow: hidden; }

/* 全屏容器开着时，版本角标也一并盖干净（它在容器底下，97% 底会透出淡影） */
body.fs-on .ver-mark { display: none; }

/* ===== 文书库通用生成器（花圈 / 灵位 / 挽幛 …）===== */
.wx { padding: 0; display: flex; flex-direction: column; align-items: center; }
/* 输入行：本人姓名 + 与逝者关系，一行居中 */
.wx-form { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.wx-form > * { flex: none; }
.wx-out { width: 100%; max-width: 900px; margin: 0 auto; }
.wx-field { display: flex; align-items: center; gap: 4px; }
.wx-label { font-size: 12px; color: var(--fs-text2, #cbb98a); letter-spacing: .5px; }
.wx-ctrl { display: flex; align-items: center; gap: 4px; }
.wx-radio { font-size: 12px; color: var(--fs-text, #FFC64B); cursor: pointer; }
.wx-radio input { accent-color: #c9a24b; width: 14px; height: 14px; }
.wx-select, .wx-input {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--fs-line, rgba(255,199,75,.34));
  border-radius: 6px; padding: 4px 7px; font-size: 12px; color: #333; min-width: 78px; height: 28px; box-sizing: border-box;
}
.wx-relation-sel { min-width: 130px; }
.wx-band { font-size: 11px; color: var(--fs-text2, #cbb98a); }
.wx-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: start; }
.wx-card { border: 1px solid var(--fs-line, rgba(255,199,75,.34)); border-radius: 8px; padding: 10px 12px; background: rgba(0,0,0,.18); }
.wx-card-t { font-size: 12px; color: var(--fs-text, #FFC64B); letter-spacing: 2px; margin-bottom: 6px; opacity: .85; }
.wx-strip { font-size: 14px; color: #fff; letter-spacing: 1.5px; line-height: 1.8; padding: 2px 0; }
.wx-note { font-size: 11px; color: var(--fs-text2, #cbb98a); line-height: 1.6; margin-top: 6px; border-top: 1px dashed var(--fs-line, rgba(255,199,75,.34)); padding-top: 6px; }
.wx-copy { margin-top: 8px; border: 1px solid var(--fs-line, rgba(255,199,75,.34)); background: rgba(255,255,255,.06); color: var(--fs-text, #FFC64B); border-radius: 6px; padding: 5px 10px; font-size: 11px; letter-spacing: 1px; cursor: pointer; }
.wx-copy:hover { background: rgba(255,255,255,.14); }
.wx-none { color: var(--fs-text2, #cbb98a); font-size: 12px; line-height: 1.8; padding: 14px 4px; }
.wx-fill-in { width: 100px; padding: 4px 8px; border: 1px solid var(--fs-line, rgba(255,199,75,.34)); border-radius: 6px; background: rgba(0,0,0,.25); color: var(--fs-text, #FFC64B); font-size: 12px; letter-spacing: .5px; height: 28px; box-sizing: border-box; }
.wx-fill-in::placeholder { color: rgba(203,185,138,.6); }

/* 全局信息框（容器顶部，跨分页共用） */
.fs-global { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; width: 100%; margin: 8px 0 4px; padding: 8px 10px; border: 1px solid var(--fs-line, rgba(255,199,75,.34)); border-radius: 10px; background: rgba(255,255,255,.05); }
.fs-g-t { font-size: 12px; color: var(--fs-text, #FFC64B); letter-spacing: 1px; }
.fs-g-in { width: 92px; padding: 4px 7px; border: 1px solid var(--fs-line, rgba(255,199,75,.34)); border-radius: 6px; background: rgba(0,0,0,.25); color: var(--fs-text, #FFC64B); font-size: 12px; letter-spacing: .5px; height: 28px; box-sizing: border-box; }
.fs-g-in::placeholder { color: rgba(203,185,138,.6); }
.fs-g-radio { font-size: 12px; color: var(--fs-text, #FFC64B); cursor: pointer; }
.fs-g-radio input { accent-color: #c9a24b; width: 14px; height: 14px; }
.fs-g-lab { font-size: 11px; color: var(--fs-text2, #cbb98a); }
.fs-g-band { font-size: 11px; color: var(--fs-text2, #cbb98a); }
.fs-g-sel { background: rgba(255,255,255,.92); border: 1px solid var(--fs-line, rgba(255,199,75,.34)); border-radius: 6px; padding: 4px 7px; font-size: 12px; color: #333; height: 28px; box-sizing: border-box; }


/* ===== 讣告生成器（白事流程 · 讣告 tab · 传统版 · v9.1）=====
   布局：.fg-collect-page 收集区在 pane 级 → .fg-box 大外框 → .fg-doc 正文范本。
   **字号三档制（2026-10-19 用户定：标题多大／正文多大／小字多大，一处定义，
   元素按档继承——禁止一个 div 糊一个字号）**：
     --fg-fs-title 标题档：.fg-doc-t 大标题
     --fg-fs-doc   正文档：.fg-doc 正文 + .fg-head 框标题（内部全部继承，勿再单写）
     --fg-fs-small 小字档：收集区一切控件 + .fg-pop 弹层选项（内部全部继承）
   手机端只在 mobile.css 覆写这三个变量，其它规则永不碰字号。
   配色走 --fs-*（白事＝雅青）；必填弹窗 z-index 1260。 */
:root { --fg-fs-title: 22px; --fg-fs-doc: 15px; --fg-fs-small: 12px; --fg-ctrl-h: 28px; }
.fg-collect-page { max-width: 900px; margin: 0 auto; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; border: 1px dashed var(--fs-line); border-radius: 8px; padding: 12px 16px; font-size: var(--fg-fs-small); }
/* ⚠️ min-width:0 必须写：grid/flex 子项默认 min-width:auto，会被输入框内容/
   placeholder 撑开列宽 → 手机竖屏整页超出屏宽，左右滑动就触发关闭跳转（用户 2026-10-19 报） */
.fg-cl-page { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-height: 30px; min-width: 0; }
/* input/button 是例外：浏览器默认不继承父级字号（UA 13.33px），
   在收集区范围内按标签显式继承小字档——一条管住所有输入框和按钮 */
.fg-collect-page input, .fg-collect-page button, .fg-collect-page textarea { font-size: inherit; }
/* v12：width 改 min-width——"殡仪馆/夫家姓"等三字标签自动放宽不换行，
   两字标签仍保持 40px 对齐（.fg-inp-cl/.fg-sel-cl 都 flex:1 吸收剩余宽） */
.fg-cl-t { flex: none; min-width: 40px; white-space: nowrap; color: var(--fs-text2); letter-spacing: 1px; }
.fg-cl-note { grid-column: 1 / -1; line-height: 1.7; color: var(--fs-text2); }
/* v16：收集栏最下面那行「如有特殊定制，联系管理员」——**左对齐，与上一行小字同一起点**
   （v18 用户："如有特殊定制 这一行小字 左对齐 和上一行小字 一样左对齐，别弄得不伦不类的"） */
.fg-cl-custom { text-align: left; }
.fg-link { color: var(--fs-text); text-decoration: none; border-bottom: 1px dashed var(--fs-text2); padding: 0 1px; cursor: pointer; }
.fg-link:hover, .fg-link:active { color: var(--fs-text); border-bottom-color: var(--fs-text); }
/* 联系管理员弹窗 z-index 必须高于全屏容器 .fs-mask(1200)，否则在讣告页点开看不见 */
#contactMask { z-index: 1400; }
/* v25：缺逝者信息不再用 toast / 内嵌提示条（用户："不要用文字框提示，这样没用"）
   → 改为收集区任何操作直接弹窗阻断，相关样式见模块级 blockCollect */
/* v11：用户自主填写一律无边框 input、宽度随内容自动伸（用户："凡是让用户自主
   填写的一律用input，不要边框，内容自动伸开框宽"）——隐形幽灵文本 .fg-auto-g
   量出内容宽度（value 或 placeholder），input 绝对定位盖上去：无边框、无底色，
   字体继承收集区小字档；高度走 --fg-ctrl-h 与下拉控件一致 */
/* max-width:100% 兜底：幽灵文本宽度随输入增长，防止极端长名把收集区撑出屏幕 */
.fg-auto { position: relative; display: inline-block; max-width: 100%; height: var(--fg-ctrl-h); vertical-align: middle; letter-spacing: .5px; }
.fg-auto-g { display: inline-block; visibility: hidden; white-space: pre; line-height: var(--fg-ctrl-h); min-width: 4em; }
.fg-auto-i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: transparent; outline: none; color: var(--fs-text); font-family: inherit; font-size: inherit; letter-spacing: inherit; line-height: var(--fg-ctrl-h); }
.fg-auto-i::placeholder { color: var(--fs-text2); }
/* v12：夫家姓并入下拉行（fg-seg-h 不再是整行，只是 row 内一个 cell，仅女逝显） */
.fg-seg-h { grid-column: auto; }
.fg-btn-add { height: var(--fg-ctrl-h); padding: 0 10px; letter-spacing: 1px; }
/* 下拉行 = 夫家姓 + 称谓 + 离世 + 自称，电脑一行四列
   （手机 2+2 两行在 mobile.css 覆写；列宽 1fr + 子项 min-width:0 保证不撑破屏幕） */
.fg-cl-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 12px; }
/* v13：殡仪馆（含厅）+ 公墓合成一行两列（殡仪馆放宽）
   v22：时辰框已删，本行就这两格（v21 曾加"离世时间/告别时间"整行，已去掉） */
.fg-cl-row2 { grid-template-columns: 2fr 1fr; }
/* v23 祭文收集区：三列（祭期/称谓/自称）、两列（夫家姓/主祭人）；
   手机端在 mobile.css 里都压成 1fr 1fr 两列换行 */
.jw-row3 { grid-template-columns: 1.3fr 1fr 1fr; }
.jw-row2 { grid-template-columns: 1fr 1fr; }
/* v12：收集区 input 仿下拉框样式（用户："输入框的样式和下一行它们一样"）——
   与 .fg-sel-cl 同视觉（等高/同边框/同底色），只是没有箭头 */
.fg-inp-cl { flex: 1; min-width: 0; height: var(--fg-ctrl-h); padding: 0 8px; box-sizing: border-box; border: 1px solid var(--fs-line); border-radius: 6px; background: rgba(0,0,0,.25); color: var(--fs-text); font-family: inherit; letter-spacing: .5px; outline: none; }
/* v18：孝子/孝女＝小输入框 + ＋号 + 右侧 chip 名单，各占一整行
   用户："你不能在一个框中收集所有孝男孝女的名字…输入框改小一点，后面弄+号，
   所有输入的名在后面显示出来，孝男孝女各占一行" */
.fg-cl-kin { grid-column: 1 / -1; align-items: center; }
.fg-cl-kin .fg-cl-t { flex: none; }
/* 输入框改小并锁死宽度：.fg-inp-cl 默认 flex:1 会吃掉整行，把 chips 挤到下一行 */
.fg-kin-in { flex: none; width: 118px; }
.fg-kin-in::placeholder { color: var(--fs-text2); }
/* ＋号：方形按钮，与输入框同高同圆角 */
.fg-btn-add { width: var(--fg-ctrl-h); padding: 0; font-size: 15px; line-height: 1; letter-spacing: 0; }
.fg-inp-cl:hover, .fg-inp-cl:focus { border-color: var(--fs-text); }
.fg-inp-cl::placeholder { color: var(--fs-text2); }
/* 卒期/出殡日期面板控件：比下拉宽，放得下"10月19日 九月初十" */
.fg-w-cal { min-width: 176px; }
/* 日历弹层：函数生成的月历网格（now() 前10天~后20天），宽固定防抖动。
   ⚠️ color 必须显式写：.fg-pop 自身不设 color，日历格子文字会继承 body 的
   #333 深灰，压在 #12262e 深青底上＝"背景和文字同色看不清"（v11 用户报）。
   下拉选项没事是因为 .fg-pop-op 自带 #eaf3f7，唯独日历格子漏了这层 */
.fg-cal { padding: 8px 10px 10px; min-width: 262px; color: #eaf3f7; }
.fg-cal-h { display: block; padding: 0 2px 6px; color: var(--fs-text2); letter-spacing: .5px; }
.fg-cal-wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding-bottom: 4px; border-bottom: 1px solid var(--fs-line); }
.fg-cal-wk > span { text-align: center; color: var(--fs-text2); }
.fg-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding-top: 6px; }
.fg-cal-d { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 36px; border-radius: 6px; cursor: pointer; }
.fg-cal-d:hover { background: rgba(255,255,255,.12); }
.fg-cal-gd { font-size: 1.1em; line-height: 1.15; }
.fg-cal-nd { font-size: .82em; line-height: 1.25; color: var(--fs-text2); }
.fg-cal-d.now .fg-cal-gd { color: #ffd166; font-weight: 600; }          /* 今天：金字 */
.fg-cal-d.on { background: rgba(255,255,255,.16); }
.fg-cal-d.on .fg-cal-gd { font-weight: 600; }
.fg-cal-d.dis { opacity: .25; cursor: default; }
.fg-cal-d.dis:hover { background: transparent; }

/* 孝子女 chips（列表框） */
/* v18：chip 名单接在＋号之后，**换行后占满整行**（手机上右侧只剩百来像素，
   chip 挤在那儿一行一个会很难看）——名字多了横向铺开，不撑破收集区。
   margin-left:48px ＝ 标签宽 40 + 列间距 8，让名单与输入框左边缘对齐（不压到"孝子"标签下） */
.fg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; flex: 1 1 100%; min-width: 0; margin-left: 48px; }
.fg-chips:empty { display: none; }
.fg-chip { display: inline-flex; align-items: center; gap: 4px; height: var(--fg-ctrl-h); padding: 0 5px 0 9px; border: 1px solid var(--fs-line); border-radius: 6px; background: rgba(0,0,0,.25); color: var(--fs-text); letter-spacing: .5px; max-width: 100%; }
.fg-chip-x { border: none; background: none; color: var(--fs-text2); line-height: 1; cursor: pointer; padding: 0 2px; font-family: inherit; }
.fg-chip-x:hover { color: var(--fs-text); }

/* 按钮 */
.fg-btn { height: var(--fg-ctrl-h); padding: 0 14px; box-sizing: border-box; border: 1px solid var(--fs-line); border-radius: 6px; background: rgba(255,255,255,.06); color: var(--fs-text); letter-spacing: 2px; cursor: pointer; font-family: inherit; }
.fg-btn:hover { background: rgba(255,255,255,.14); }
.fg-btn-main { height: 32px; padding: 0 22px; letter-spacing: 3px; background: rgba(255,255,255,.1); }
.fg-actions { display: flex; gap: 10px; }

/* 传统版大外框（独立内容块） */
.fg-box { max-width: 900px; margin: 0 auto; box-sizing: border-box; border: 1px solid var(--fs-line); border-radius: 10px; background: rgba(0,0,0,.18); padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.fg-head { display: flex; align-items: center; gap: 10px; font-size: var(--fg-fs-doc); letter-spacing: 3px; color: var(--fs-text); }
.fg-sec-tag { font-size: var(--fg-fs-small); letter-spacing: 1px; color: var(--fs-text2); border: 1px solid var(--fs-line); border-radius: 4px; padding: 1px 6px; }

/* 正文范本：serif 双倍行距 + 明显外框边线 */
.fg-doc { position: relative; border: 1px solid var(--fs-line); border-radius: 10px; background: rgba(0,0,0,.28); padding: 20px 26px 16px; font-family: "Noto Serif CJK SC","Source Han Serif SC","SimSun",serif; font-size: var(--fg-fs-doc); line-height: 2.2; letter-spacing: 1.5px; color: #fff; }
.fg-doc-t { text-align: center; font-size: var(--fg-fs-title); letter-spacing: 12px; text-indent: 12px; margin-bottom: 8px; font-weight: 600; }
.fg-l { margin: 0 0 2px; text-indent: 2em; white-space: normal; word-break: break-all; }
.fg-sign { text-align: right; text-indent: 0; }
.fg-kin-list { text-align: right; text-indent: 0; }   /* 孝子女名单行：右对齐，同落款 */
.fg-mourn { text-align: right; text-indent: 0; }      /* 现代版"孝男×××　孝女×××　泣告" */
/* 现代通用版：字号行距同传统版，只是段落更短；标题与正文档位一律继承 .fg-doc */
.fg-doc2 .fg-l { margin-bottom: 4px; }
/* 自定义下拉（v6 起）：选中只显纯值、点开列表带(提示)；弹层 fixed 挂 body 不被裁剪。
   v9 起下拉只出现在收集区（.fg-sel-cl），正文零控件；字号继承小字档，此处不写 */
.fg-sel { position: relative; display: inline-block; height: 24px; vertical-align: baseline; cursor: pointer; text-indent: 0; }
/* v8.3：text-indent:0 必须显式写——.fg-l 的 text-indent:2em 会被 inline-block
   的 .fg-sel 继承，宿主自成块容器，把"先考"整体顶进去 30px(2em)，
   正文里每个下拉前都空一大块（用户 2026-10-19："祸延和先考之间空一大片"） */
/* v8.2：删掉 .fg-sel-v 的虚线下划线（用户 2026-10-19："你要那个下拉线干吗
   装饰用的吗"）——正文里下拉就是纯文字+▾，不拖线、不留空线空位 */
.fg-sel-v { display: inline-block; height: 24px; line-height: 24px; border: none; padding: 0 2px; color: #fff; font-family: inherit; letter-spacing: 1px; white-space: nowrap; }
.fg-sel:hover .fg-sel-v, .fg-sel.on .fg-sel-v { background: rgba(255,255,255,.08); }
.fg-sel.dis { cursor: default; }
.fg-sel.dis .fg-sel-v { border-bottom-color: transparent; }
.fg-sel.dis:hover .fg-sel-v { background: transparent; }
/* v9：收集区下拉（正文不再嵌任何控件）——长得跟输入框一模一样：
   flex 撑满标签后的剩余宽，箭头 margin-left:auto 推到最右（原生下拉手感） */
.fg-sel-cl { display: inline-flex; align-items: center; flex: 1; min-width: 0; height: var(--fg-ctrl-h); padding: 0 8px; box-sizing: border-box; border: 1px solid var(--fs-line); border-radius: 6px; background: rgba(0,0,0,.25); }
.fg-sel-cl:hover { border-color: var(--fs-text); }
.fg-sel-cl.on { border-color: var(--fs-text); }
.fg-sel-cl .fg-sel-v { height: calc(var(--fg-ctrl-h) - 2px); line-height: calc(var(--fg-ctrl-h) - 2px); padding: 0; letter-spacing: .5px; }
.fg-sel-cl .fg-sel-ar { margin-left: auto; }
.fg-sel-ar { display: inline-block; width: 0; height: 0; margin-left: 3px; vertical-align: middle; border: 4px solid transparent; border-top-color: var(--fs-text2); }
.fg-pop { position: fixed; z-index: 1300; display: flex; flex-direction: column; padding: 4px 0; background: #12262e; border: 1px solid var(--fs-line); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.45); font-size: var(--fg-fs-small); }
/* v8.1：下拉选项文字【左对齐】——v8 改居中后被用户否掉（"每一个下拉选项
   前面空那么多"）：短选项在宽框里一居中就左右空一大块。文字紧贴框沿，
   display:block+width:100% 保证左对齐确定生效，全站下拉一种对齐 */
.fg-pop-op { display: block; width: 100%; box-sizing: border-box; padding: 6px 12px; letter-spacing: .5px; color: #eaf3f7; white-space: nowrap; cursor: pointer; text-align: left; }
.fg-pop-op:hover { background: rgba(255,255,255,.1); }
.fg-pop-op.on { color: #fff; background: rgba(255,255,255,.14); }
.fg-hide { display: none !important; }

/* 提示弹窗：盖在全屏容器(1200)与退出确认(1250) 之上 */
.fg-alert-mask { z-index: 1260; }

/* v8.4：页面直接 Ctrl+P / 复印时，藏掉下拉小三角（用户 2026-10-19：
   "打印或复印的话这个小三角也会打印出来 很难看的"）。app 内"打印"按钮
   走新窗口纯文字本就干净，这条兜浏览器直接打印的路；顺带把本页的
   按钮和收集输入区一并隐掉，印出来的就是干净讣告正文 */
@media print {
  .fg-sel-ar { display: none !important; }
  .fg-actions { display: none !important; }
  .fg-collect-page { display: none !important; }
}

/* ==========================================================
   祭文 · 固定范本（v28：内联排版，不再点开抽屉）
   六篇死文本直接排在正文框下面，一路往下看，不用点任何东西。
   字号走变量：--jw-fs 范本正文、--jw-fs-s 说明小字
   （手机档在 mobile.css 只覆写这两个数，别在规则里单写字号）
   ========================================================== */
:root { --jw-fs: 14px; --jw-fs-s: 11.5px; }

/* 整块跟正文框同宽同底：.fg-box 已给 max-width:900px + box-sizing:border-box，
   这里只补上方间距和内部 gap（篇间靠边框线分隔，不要行距） */
.jw-box { margin-top: 14px; gap: 0; }
.jw-note {
  font-size: var(--jw-fs-s); line-height: 1.85; letter-spacing: .5px;
  color: var(--fs-text2); padding: 2px 0 7px;
  border-bottom: 1px solid var(--fs-line);
}

/* 一篇：标题行 + 一句说明 + 宋体正文 + 落款 + 复制；篇与篇之间一条细线 */
.jw-s { min-width: 0; padding: 14px 0 2px; }
.jw-s + .jw-s { margin-top: 6px; border-top: 1px solid var(--fs-line); }
.jw-s-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.jw-s-t {
  font-family: "Noto Serif CJK SC","Source Han Serif SC","SimSun",serif;
  font-size: 17px; font-weight: 600; letter-spacing: 4px; color: #fff;
}
.jw-s-w {
  flex: none; font-size: var(--jw-fs-s); letter-spacing: 1px; color: var(--fs-text2);
  border: 1px solid var(--fs-line); border-radius: 4px; padding: 0 5px;
}
.jw-s-d {
  font-size: var(--jw-fs-s); letter-spacing: .5px; color: var(--fs-text2);
  margin: 5px 0 10px;
}
/* ⚠️ 长句必须能断（overflow-wrap），别用 nowrap；子项照样 min-width:0——
   本项目已被"不换行文本把列撑到 700 多px"坑过两次 */
.jw-s-b {
  min-width: 0;
  font-family: "Noto Serif CJK SC","Source Han Serif SC","SimSun",serif;
  font-size: var(--jw-fs); line-height: 2.05; letter-spacing: .8px; color: #fff;
}
.jw-s-b p { margin: 0 0 10px; text-indent: 2em; overflow-wrap: break-word; }
.jw-s-b p.jw-s-sign {
  text-indent: 0; text-align: right; margin: 6px 0 0;
  letter-spacing: 2px; color: var(--fs-text);
}
.jw-s-a { display: flex; justify-content: flex-end; padding: 6px 0 8px; }
.jw-s-copy { height: 26px; padding: 0 12px; font-size: var(--jw-fs-s); letter-spacing: 1px; }

@media print {
  .jw-s-a { display: none !important; }
}