/* ============================================================
   律师专业主页 · 通用引擎样式  v2.0
   Lawyer Homepage Engine — Design System
   ------------------------------------------------------------
   设计原则：
   1. 一切可主题化 —— 颜色/字体/圆角/间距全部走 CSS 变量，换律师只换 data-skin
   2. 移动优先 —— 手机=单栏满屏(小程序 web-view 友好) / 平板=浮卡 / 电脑=两栏
   3. X5 安全 —— 不使用 position:fixed + filter:blur 组合（微信内核必白屏）
   4. 原生折叠 —— 深度内容用 <details>，零 JS 依赖，微信内不崩
   5. 以 demo-M 视觉为基准 —— 大图、纸感名片、米白+金、全幅封面
   ============================================================ */

/* ---------- 1. Design Tokens ---------- */
:root{
  /* 品牌色（主题可覆盖） */
  --brand:#B49A6A;
  --brand-strong:#9A7D4D;
  --brand-soft:#F5F0E6;
  --brand-line:#E6DCC6;
  --brand-grad:linear-gradient(135deg,#B49A6A 0%,#9A7D4D 100%);
  --accent:#1565C0;

  /* 中性 */
  --ink-1:#1A1A1A;
  --ink-2:#3A3A3A;
  --ink-3:#6B6B6B;
  --ink-4:#9A9488;
  --line:#EDE9E0;
  --line-soft:#F4F1EA;
  --paper:#FFFFFF;
  --paper-2:#FAF8F4;
  --paper-3:#F7F4EC;

  /* 排版 */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-serif:"Times New Roman",Georgia,"Songti SC","SimSun",serif;

  /* 间距（4px 基准） */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;

  /* 圆角 */
  --r-sm:8px; --r:14px; --r-lg:20px; --r-pill:999px;

  /* 阴影 */
  --sh-1:0 1px 2px rgba(0,0,0,.04);
  --sh-2:0 4px 14px rgba(0,0,0,.06);
  --sh-3:0 18px 50px rgba(0,0,0,.16);
  --sh-card:0 2px 6px rgba(0,0,0,.04);

  /* 动效 */
  --ease:cubic-bezier(.2,.8,.2,1);
  --t-fast:150ms; --t:280ms;

  /* 内容宽度 */
  --gutter:22px;
}

/* ---------- 2. 主题皮肤（Skin） ---------- */
[data-skin="gold"]{
  --brand:#B49A6A; --brand-strong:#9A7D4D; --brand-soft:#F5F0E6; --brand-line:#E6DCC6;
  --paper-2:#FAF8F4; --line:#EDE9E0;
}
[data-skin="indigo"]{
  --brand:#2C4A7C; --brand-strong:#1E3559; --brand-soft:#EDF1F7; --brand-line:#D6DEEC;
  --accent:#2C4A7C;
  --paper-2:#F7F9FC; --line:#E4E9F1; --line-soft:#EFF3F8;
  --brand-grad:linear-gradient(135deg,#2C4A7C 0%,#1E3559 100%);
}
[data-skin="ink"]{
  --brand:#2B2B2B; --brand-strong:#0F0F0F; --brand-soft:#F1F0ED; --brand-line:#DCD9D3;
  --accent:#2B2B2B;
  --paper-2:#FBFAF8; --line:#E8E5DF; --line-soft:#F2F0EB;
  --brand-grad:linear-gradient(135deg,#2B2B2B 0%,#0F0F0F 100%);
}
[data-skin="jade"]{
  --brand:#3E7C74; --brand-strong:#2C5C56; --brand-soft:#EBF4F2; --brand-line:#CFE3DF;
  --accent:#3E7C74;
  --paper-2:#F7FBFA; --line:#E2EDEC; --line-soft:#F0F7F6;
  --brand-grad:linear-gradient(135deg,#3E7C74 0%,#2C5C56 100%);
}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-sans);
  font-size:15px; line-height:1.7; color:var(--ink-2);
  background:var(--paper-3);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;border:0;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ---------- 4. 页面骨架 ---------- */
.hp-bg,.hp-shade{display:none;}            /* X5 安全：移动端不渲染模糊层 */
.hp-wrap{position:relative;min-height:100vh;}
.hp-card{width:100%;background:var(--paper);overflow:hidden;}

@media (min-width:600px){
  body{background:#15110b;padding:28px 16px 40px;}
  .hp-card{max-width:620px;margin:0 auto;border-radius:var(--r-lg);box-shadow:var(--sh-3);}
}
@media (min-width:1024px){
  body{padding:44px 24px;}
  .hp-card{max-width:1080px;}
}

/* 顶部律所品牌条 */
.hp-firmbar{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:var(--s-4) var(--s-5) var(--s-1);
}
.hp-firmbar-mark{
  font-family:var(--font-serif);font-size:17px;font-weight:800;
  letter-spacing:1px;color:var(--ink-1);line-height:1.1;
}
.hp-firmbar-mark small{
  display:block;font-family:var(--font-serif);font-size:7.5px;
  letter-spacing:2.4px;color:var(--ink-4);font-weight:600;
}
.hp-firmbar-name{
  font-family:var(--font-serif);font-size:13px;font-weight:800;
  color:var(--ink-1);letter-spacing:.4px;line-height:1.35;
}
.hp-firmbar-name small{
  display:block;font-family:var(--font-sans);font-size:10px;
  color:var(--ink-3);font-weight:400;letter-spacing:1px;
}

/* 两栏（电脑端） */
.hp-cols{display:block;}
@media (min-width:1024px){
  .hp-cols{display:grid;grid-template-columns:370px 1fr;align-items:start;}
  .hp-col-l{position:sticky;top:44px;}
  .hp-col-r{border-left:1px solid var(--line-soft);min-height:600px;}
}

/* ---------- 5. 通用组件 ---------- */
.hp-sec{padding:var(--s-6) var(--gutter);}
.hp-sec.hp-sec-bare{padding:0 0 var(--s-2);}
@media (min-width:1024px){
  .hp-sec{padding:var(--s-6) var(--s-6);}
  .hp-col-l .hp-sec{padding:var(--s-5) var(--s-4);}
}

/* 栏目头：编号 + 中文 + 英文 */
.hp-sec-head{display:flex;align-items:baseline;gap:10px;margin-bottom:var(--s-4);}
.hp-sec-no{
  font-family:var(--font-serif);font-size:10px;font-weight:700;
  color:#fff;background:var(--brand);letter-spacing:.5px;
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.hp-sec-title{
  font-size:16px;font-weight:800;color:var(--ink-1);
  letter-spacing:.5px;line-height:1.3;
}
.hp-sec-en{
  font-family:var(--font-serif);font-size:10px;color:var(--ink-4);
  letter-spacing:1.4px;text-transform:uppercase;margin-left:auto;flex-shrink:0;
}

/* 按钮 */
.hp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 var(--s-5);
  border-radius:var(--r-pill);border:1px solid transparent;
  font-size:14px;font-weight:700;letter-spacing:.5px;
  cursor:pointer;transition:all var(--t-fast) var(--ease);
}
.hp-btn-primary{background:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.10);}
.hp-btn-primary:hover{background:var(--brand-strong);transform:translateY(-1px);}
.hp-btn-ghost{background:transparent;color:var(--brand);border-color:var(--brand-line);}
.hp-btn-ghost:hover{background:var(--brand-soft);}
.hp-btn-row{display:flex;gap:var(--s-2);flex-wrap:wrap;}

/* 标签 */
.hp-chip{
  display:inline-block;font-size:10.5px;font-weight:600;
  color:var(--brand-strong);background:var(--brand-soft);
  border:1px solid var(--brand-line);border-radius:var(--r-pill);
  padding:3px 10px;letter-spacing:.3px;
}

/* ---------- 6. 模块：全幅封面 Cover ---------- */
.hp-cover{
  position:relative;background:var(--paper);
  margin:0 var(--gutter) var(--s-2);padding-top:var(--s-1);
}
.hp-cover-media{
  position:relative;width:100%;
  aspect-ratio:1200 / 427;
  max-height:340px;
  border-radius:var(--r);overflow:hidden;
}
.hp-cover-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 60%;display:block;
}
.hp-cover-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.48) 100%);
}
.hp-cover-cap{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:var(--s-5) var(--s-4) var(--s-4);
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);
  max-width:100%;
}
.hp-cover-cap-title{
  font-size:15px;font-weight:800;letter-spacing:.5px;line-height:1.3;
}
.hp-cover-cap-sub{
  font-size:12px;opacity:.92;margin-top:3px;line-height:1.5;
}
.hp-cover-portrait{
  position:absolute;left:50%;bottom:-55px;
  width:110px;height:110px;margin-left:-55px;
  border-radius:50%;object-fit:cover;
  border:4px solid #fff;box-shadow:var(--sh-2);
  background:var(--paper);z-index:3;
  display:none;  /* v2.3 不再在封面上重叠头像，avatar 统一在名片卡 */
}
@media (min-width:600px){
  .hp-cover-media{min-height:200px;}
  .hp-cover-cap{padding-right:var(--s-4);}
}
@media (min-width:1024px){
  .hp-cover{padding-top:var(--s-2);margin:0 var(--s-4) var(--s-2);}
  .hp-cover-media{min-height:300px;}
  .hp-cover-cap-title{font-size:16px;}
  .hp-cover-cap-sub{font-size:13px;}
}

/* ---------- 7. 模块：首屏名片 Hero ---------- */
.hp-hero{padding:var(--s-3) var(--gutter) var(--s-5);}
.hp-hero-inner{
  position:relative;
  background:var(--paper);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.38 0 0 0 0.02 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  border-radius:var(--r);border:1px solid var(--line);
  padding:var(--s-4);box-shadow:var(--sh-card);
}
.hp-hero-top{display:flex;align-items:flex-start;gap:var(--s-4);margin-bottom:4px;}
.hp-avatar{
  width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid var(--brand);box-shadow:var(--sh-2);
}
.hp-hero-head{flex:1;min-width:0;padding-top:6px;}
.hp-hero-namebox{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px;}
.hp-hero-name{font-family:var(--font-serif);font-size:25px;font-weight:800;color:var(--ink-1);letter-spacing:2px;line-height:1.1;}
.hp-hero-role{
  flex-shrink:0;font-size:10.5px;color:#fff;background:var(--brand-grad);
  border-radius:4px;padding:3px 8px;font-weight:700;letter-spacing:.5px;
  box-shadow:0 1px 3px rgba(139,115,85,.18);
}
.hp-hero-firm{font-size:11.5px;color:var(--ink-3);margin-top:4px;}
.hp-hero-wechat,.hp-hero-phone{margin-top:4px;}
/* 社会职务：名片区第二行（姓名之后、微信之前）。
   视觉规格统一为「细灰小字」，和 .hp-lic-no / 执业领域三项 / 电话完全一致 */
.hp-hero-affiliation{
  margin-top:6px;margin-bottom:1px;line-height:1.85;letter-spacing:0;
  font-size:11px;color:var(--ink-3);font-weight:400;
}
.hp-hero-wechat{color:var(--ink-3);font-size:11px;}
.hp-hero-phone{font-size:11px;}
.hp-hero-phone a{
  color:var(--ink-3);text-decoration:underline dotted;font-weight:400;letter-spacing:0;
  text-underline-offset:3px;text-decoration-color:var(--brand-line);text-decoration-thickness:1px;
  transition:color var(--t-fast) var(--ease);
}
.hp-hero-phone a:hover{color:var(--brand-strong);text-decoration-color:currentColor;}
/* — 执业证号（可核验）：名片信任要素 — */
.hp-hero-license{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 0 0;padding:0;}
/* v2.4.16: 颜色/字重与「社会职务/微信/电话」一行统一（ink-3 / 400），
   不再单独加粗变黑——避免和"执业领域"加粗三项产生视觉落差。
   v2.4.21: 字号 11.5 → 11px（与微信/电话完全同档）+ 强制不换行 ——
   窄列下宁可让「官方核验」药丸整体折到下一行，也不要把证号拦腰截断。 */
.hp-lic-no{font-size:11px;color:var(--ink-3);font-weight:400;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap;}
/* v2.4.21: 药丸 line-height 收到 1.25，行高不再被药丸撑大 ——
   这是用户反馈"执业证号这行离上面太远"的真正原因（药丸高 23px，文字行仅 19.5px，
   多出来的 3.5px 让这一行的文字整体被"顶"下去）。 */
.hp-lic-verify{
  display:inline-flex;align-items:center;gap:3px;
  font-size:9.5px;line-height:1.25;color:var(--brand-strong);text-decoration:none;
  border:1px solid var(--brand-line);border-radius:999px;padding:2px 7px;
  background:var(--brand-soft);transition:all var(--t-fast) var(--ease);
}
.hp-lic-verify:hover{background:var(--brand);border-color:var(--brand);color:#fff;}
.hp-lic-arrow{font-size:9px;line-height:1;}
/* — 首屏律所全称 + 办公地址（v2.4.16 新增 / v2.4.18 加粗） —
   名片区下方次要信息，视觉与「社会职务/微信/电话」同为细灰小字；
   按用户要求两行加粗（font-weight:700），颜色保持 ink-3 不变。 */
.hp-hero-firmline{
  font-size:11.5px;color:var(--ink-3);font-weight:700;
  line-height:1.7;letter-spacing:0;padding:0;margin-top:2px;
}
/* ⚠️ 内缩只加在 .hp-hero-firmname 上，绝不能加在 .hp-hero-firmline 上——
   地址行同时挂着 .hp-hero-firmline，会连 pin 图标一起右移，造成双重缩进。
   v2.4.20：18px = 地址行 pin 14px + gap 4px，让律所名与地址文字左对齐。 */
.hp-hero-firmname{letter-spacing:.1px;padding-left:18px;}
.hp-hero-address{font-size:11px;line-height:1.65;}

/* — 地址行：定位图标 + 可点击地图入口（v2.4.18） —
   点击弹出「高德 / 百度 / 腾讯」三选一底部抽屉。 */
.hp-hero-maplink{
  display:flex;align-items:flex-start;gap:4px;
  color:var(--ink-3);text-decoration:none;
  transition:color var(--t-fast) var(--ease);
}
.hp-hero-maplink:hover,.hp-hero-maplink:active{color:var(--brand-strong);}
.hp-map-pin{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;margin-top:1px;color:var(--brand);
}
.hp-map-pin svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;}
/* 地址文字：用「点线下划线」传达可点击（比右侧加药丸提示更省横向空间，
   长地址在 320px 窄屏也绝不会被挤出卡片） */
.hp-map-text{
  flex:1;min-width:0;
  text-decoration:underline dotted;
  text-underline-offset:3px;
  text-decoration-color:var(--brand-line);
  text-decoration-thickness:1px;
}
.hp-hero-maplink:hover .hp-map-text,
.hp-hero-maplink:active .hp-map-text{text-decoration-color:currentColor;}

/* — 地图选择底部抽屉（运行时由 engine.js 注入 body） —
   ⚠️ 四边定位一律写全 top/right/bottom/left，不用 `inset` 简写：
   实测 headless 环境下 `inset:0` 未生效 → fixed 容器塌陷成 0 宽 →
   内部 absolute 子项宽度失控、被推出视口右侧。 */
#hp-map-layer,#hp-mp-layer,#hp-consult-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9998;pointer-events:none;}
#hp-map-layer .hp-map-mask,#hp-mp-layer .hp-map-mask,#hp-consult-layer .hp-map-mask{
  position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(28,22,14,.46);
  opacity:0;transition:opacity .22s ease;
}
#hp-map-layer .hp-map-sheet,#hp-mp-layer .hp-map-sheet,#hp-consult-layer .hp-map-sheet{
  position:absolute;left:0;right:0;bottom:0;
  width:100%;max-width:520px;margin:0 auto;
  box-sizing:border-box;
  background:var(--paper);border-radius:16px 16px 0 0;
  padding:18px 18px calc(16px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -10px 34px rgba(0,0,0,.20);
  transform:translateY(102%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
#hp-map-layer.hp-sheet-open,#hp-mp-layer.hp-sheet-open,#hp-consult-layer.hp-sheet-open{pointer-events:auto;}
#hp-map-layer.hp-sheet-open .hp-map-mask,#hp-mp-layer.hp-sheet-open .hp-map-mask,#hp-consult-layer.hp-sheet-open .hp-map-mask{opacity:1;}
#hp-map-layer.hp-sheet-open .hp-map-sheet,#hp-mp-layer.hp-sheet-open .hp-map-sheet,#hp-consult-layer.hp-sheet-open .hp-map-sheet{transform:translateY(0);}

/* — 关注弹层（公众号二维码）内容区 —
   与地图弹层共用遮罩/面板/升起动效，只追加内容排版。
   前缀用 mp（公众号）= WeChat Media Platform，避免与已废弃的旧 .hp-qr-box 混淆 */
.hp-mp-box{
  width:190px;height:190px;margin:6px auto 14px;padding:9px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.hp-mp-img{width:100%;height:100%;object-fit:contain;display:block;}
/* 二维码图缺失时整块降级：隐藏破图 + 显示占位 + 收起「长按识别」提示
   （否则会出现"请长按一张不存在的二维码"这种自相矛盾的界面） */
.hp-mp-fallback{display:none;font-size:12px;color:var(--ink-4);text-align:center;line-height:1.7;}
.hp-mp-qrwrap[data-fail="1"] .hp-mp-img{display:none;}
.hp-mp-qrwrap[data-fail="1"] .hp-mp-fallback{display:block;}
.hp-mp-qrwrap[data-fail="1"] .hp-mp-tip-scan{display:none;}
.hp-mp-name{
  text-align:center;font-size:15px;font-weight:800;color:var(--ink-1);
  letter-spacing:.4px;margin-bottom:4px;
}
.hp-mp-tip{text-align:center;font-size:12px;color:var(--ink-3);line-height:1.7;}
.hp-mp-tip-strong{color:var(--brand-strong);font-weight:700;margin-top:2px;padding-bottom:4px;}

.hp-map-sheet-head{display:flex;align-items:center;gap:6px;margin-bottom:3px;}
.hp-map-sheet-pin{display:inline-flex;width:15px;height:15px;color:var(--brand-strong);}
.hp-map-sheet-pin svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;}
.hp-map-sheet-title{font-size:14px;font-weight:800;color:var(--ink-1);letter-spacing:.3px;}
.hp-map-sheet-addr{
  font-size:11.5px;color:var(--ink-3);line-height:1.6;
  margin:0 0 14px 0;padding-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.hp-map-opts{display:flex;flex-direction:column;gap:8px;}
/* 右侧「›」箭头的可点击暗示：用 background-image 画，不依赖额外的 flex 子项
   （flex 子项在部分环境下会因 auto margin / shrink 计算被挤出可视区） */
.hp-map-opt{
  display:flex;align-items:center;gap:8px;
  padding:12px 34px 12px 14px;border-radius:10px;text-decoration:none;
  background-color:var(--brand-soft);border:1px solid var(--brand-line);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A7D4D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;
  transition:all var(--t-fast) var(--ease);
}
.hp-map-opt:active{
  transform:scale(.985);background-color:var(--brand);border-color:var(--brand);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
}
.hp-map-opt-name{font-size:14px;font-weight:800;color:var(--brand-strong);flex-shrink:0;}
.hp-map-opt-hint{font-size:10.5px;color:var(--ink-3);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hp-map-opt:active .hp-map-opt-name,
.hp-map-opt:active .hp-map-opt-hint{color:#fff;}
.hp-map-cancel{
  margin-top:10px;padding:12px;border-radius:10px;text-align:center;cursor:pointer;
  background:var(--paper-2);border:1px solid var(--line);
  color:var(--ink-2);font-size:13.5px;font-weight:600;
}

/* — 首屏能力页入口：把广告页变成有用入口 — */
.hp-hero-entry{
  display:flex;align-items:center;gap:11px;margin-top:var(--s-3);
  padding:11px 13px;border-radius:10px;text-decoration:none;
  background:var(--brand-soft);border:1px solid var(--brand-line);
  transition:all var(--t-fast) var(--ease);
}
.hp-hero-entry:hover{background:var(--brand);border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--sh-2);}
.hp-entry-icon{flex-shrink:0;width:34px;height:34px;border-radius:8px;background:#fff;border:1px solid var(--brand-line);display:flex;align-items:center;justify-content:center;transition:border-color var(--t-fast) var(--ease);}
.hp-entry-icon svg{width:18px;height:18px;fill:none;stroke:var(--brand-strong);stroke-width:1.7;}
.hp-entry-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.hp-entry-name{font-size:13px;font-weight:800;color:var(--ink-1);display:flex;align-items:center;gap:6px;transition:color var(--t-fast) var(--ease);}
.hp-entry-free{font-style:normal;font-size:9.5px;color:#fff;background:var(--brand-strong);border-radius:3px;padding:1px 5px;font-weight:700;letter-spacing:.3px;}
.hp-entry-desc{font-size:11px;color:var(--ink-3);line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color var(--t-fast) var(--ease);}
.hp-entry-go{flex-shrink:0;font-size:11.5px;font-weight:700;color:var(--brand-strong);display:inline-flex;align-items:center;gap:3px;transition:color var(--t-fast) var(--ease);}
.hp-entry-arrow{transition:transform var(--t-fast) var(--ease);}
.hp-hero-entry:hover .hp-entry-name,
.hp-hero-entry:hover .hp-entry-desc,
.hp-hero-entry:hover .hp-entry-go{color:#fff;}
.hp-hero-entry:hover .hp-entry-icon{border-color:transparent;}
.hp-hero-entry:hover .hp-entry-icon svg{stroke:#fff;}
.hp-hero-entry:hover .hp-entry-free{background:#fff;color:var(--brand-strong);}
.hp-hero-entry:hover .hp-entry-arrow{transform:translateX(3px);}
.hp-hero-tagline{
  font-size:13.5px;line-height:1.9;color:var(--ink-2);margin-top:var(--s-3);
}
.hp-hero-tagline b{color:var(--brand-strong);font-weight:800;}
.hp-hero-socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-3);}
.hp-social{
  display:inline-flex;align-items:center;justify-content:center;
  height:32px;padding:0 14px;border-radius:999px;
  background:var(--brand-soft);border:1px solid var(--brand-line);
  color:var(--brand-strong);font-size:12px;font-weight:600;letter-spacing:.2px;
  text-decoration:none;cursor:pointer;transition:all var(--t-fast) var(--ease);
  white-space:nowrap;
}
.hp-social:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-2);}
.hp-social-text{pointer-events:none;}
.hp-social-nolink{cursor:default;}
.hp-social-nolink:hover{transform:none;box-shadow:none;background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-strong);}
/* 公众号形态：渲染为 <button>（点击开弹层，无 href 可跳）。
   按钮元素自带 appearance/border/padding 默认值，必须显式抹平，否则药丸会变形 */
button.hp-social{
  -webkit-appearance:none;appearance:none;
  font-family:inherit;line-height:1;text-align:center;
  margin:0;outline-offset:2px;
}
/* — 首屏执业领域（概括展示，供名片区选用） — */
.hp-hero-practice{margin-top:4px;}
.hp-prac-label{font-size:10.5px;color:var(--ink-4);letter-spacing:.5px;margin-right:8px;}
/* A: 标签胶囊（标签与胶囊同一排） */
.hp-prac-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;}
.hp-prac-a .hp-prac-label{flex-shrink:0;}
.hp-prac-tag{
  display:inline-flex;align-items:center;
  height:26px;padding:0 11px;border-radius:999px;
  background:var(--brand-soft);border:1px solid var(--brand-line);
  color:var(--brand-strong);font-size:11.5px;font-weight:700;letter-spacing:.3px;
  white-space:nowrap;
}
/* B: 关键词横条 */
.hp-prac-b{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.hp-prac-b .hp-prac-label{flex-shrink:0;}
.hp-prac-line{
  font-size:12.5px;color:var(--ink-2);line-height:1.7;letter-spacing:.2px;
}
.hp-prac-line b,.hp-prac-line strong{color:var(--brand-strong);font-weight:700;}
/* C: 编号短列表 */
.hp-prac-c{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 12px;}
.hp-prac-c-item{
  display:flex;align-items:flex-start;gap:6px;
  padding:7px 9px;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:8px;
}
.hp-prac-c-no{
  font-family:var(--font-serif);font-size:12px;color:var(--brand);font-weight:800;line-height:1.3;
}
.hp-prac-c-name{font-size:11.5px;color:var(--ink-2);line-height:1.45;font-weight:600;}
/* D: 纯文本顿号 */
/* ---------- 7.x 首屏执业领域纯文本顿号（d 样式） ----------
   不用 flex，避免两个 span 间产生 8px gap；用 inline + 紧贴基线，
   「执业领域」细且淡，三项领域加粗墨色。 */
/* label + 3 项同行（默认一行排开，窄屏自动 wrap 第二行且从最左开始，无缩进）。
   v2.4.18: 整行（label + 三项）统一为与「执业证号」完全一致的细灰小字
   （11.5px / ink-3 / 400），不再 label 细 + 三项加粗。 */
.hp-prac-d{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:0;
  margin:0 0 2px 0;line-height:1.75;letter-spacing:0;
  /* v2.4.20：左侧内缩 18px = 地址行 pin 图标 14px + 间距 4px，
     让「执业领域 / 律所名 / 地址文字」三条左基线对齐成同一竖线 */
  padding:0 0 0 18px;
}
.hp-prac-d .hp-prac-label{
  display:inline-block;flex-shrink:0;
  /* v2.4.40：label 与三项内容整行统一金色（用户拍板「整行都变成金色」） */
  font-size:11.5px;color:var(--brand-strong);font-weight:600;
  letter-spacing:0;
  /* v2.4.20：基础规则 .hp-prac-label 带 margin-right:8px，
     在 flex 容器里与 gap 叠加成 10px —— 用户反馈"中间空格太多"的真正原因。
     v2.4.22：gap 归零 + 分隔符改为全角「：」，冒号直接写在 label 内，紧贴内容。 */
  margin-right:0;
}
/* v2.4.39：执业领域三项转金色（G1 选型）—— #9A7D4D 白底 4.0:1，600 字重；
   label「执业领域：」保持墨灰，保持「标签淡、内容金」的层次 */
.hp-prac-d .hp-prac-text{
  display:inline;flex:1;min-width:0;
  font-size:11.5px;color:var(--brand-strong);font-weight:600;letter-spacing:0;
}

/* ---------- 7.y 名片区「咨询区」（v2.4.25） ----------
   左二维码 + 右文案与「立即咨询」按钮。
   为什么不做成"只有二维码"：电脑端根本没法长按识别（鼠标没有长按），
   手机端也有大量访客不知道要长按 —— 给一个明确的按钮，
   才能让「我想咨询」这个意图有确定的落点。 */
/* v2.4.31：左右对半分区（C 方案）——一张卡片对半分，中间竖虚线隔开
   左半 = 私信入口（对话气泡图标 + 标题 + 副标 + 金色行动语）；
   右半 = 加个人微信（可见二维码 + 标题 + 副标 + 金色行动语）。
   选型理由：相对 C2（上下两行）更省竖向空间、两入口对等且对称；
   相对 F（列表行式）点击区更大、二维码尺寸更足（64px，桌面 72px）。 */
.hp-consult{
  display:flex;align-items:stretch;
  margin-top:12px;overflow:hidden;
  background:var(--paper);
  border:1px solid var(--brand-line);border-radius:var(--r);
}
.hp-consult-solo .hp-consult-half{border-left:none;}
.hp-consult-half{
  flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:9px 8px;box-sizing:border-box;
  background:none;border:none;font:inherit;text-align:center;
  text-decoration:none;color:inherit;cursor:pointer;
  transition:background var(--t-fast) var(--ease);
}
.hp-consult-half + .hp-consult-half{border-left:1px dashed var(--brand-line);}
.hp-consult-half:hover,.hp-consult-half:focus-visible{background:var(--paper-2);}
.hp-consult-t{display:block;font-size:12.5px;font-weight:800;color:var(--ink-1);letter-spacing:.3px;line-height:1.3;}
.hp-consult-d{display:block;font-size:10.5px;color:var(--ink-3);margin-top:2px;line-height:1.5;}
.hp-consult-act{
  display:inline-flex;align-items:center;gap:3px;margin-top:3px;
  font-size:11.5px;font-weight:800;color:var(--brand-strong);letter-spacing:.3px;
}
.hp-consult-arrow-i{font-style:normal;font-size:12px;}
/* 右半区二维码：独立白底单元，尺寸足够长按识别 */
.hp-consult-qrbox{
  display:block;flex-shrink:0;background:#fff;
  padding:3px;border:1px solid var(--line-soft);border-radius:8px;
}
.hp-consult-qrbox img{width:52px;height:52px;display:block;object-fit:contain;}
.hp-consult-ico{
  width:32px;height:32px;flex-shrink:0;border-radius:999px;
  background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;
}
.hp-consult-ico svg{
  width:17px;height:17px;stroke:var(--brand-strong);fill:none;stroke-width:1.8;
}
/* hp-consult-btn 只作为「点击钩子」存在（供 bindConsultDelegate 识别），
   不再带任何按钮样式 —— 外观全部由 .hp-consult-half 承担。 */
.hp-consult-arrow{font-size:13px;opacity:.85;}

/* 咨询弹层内的「微信号 / 电话」行（点击复制 / 点击拨号） */
.hp-consult-row{
  display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
  margin-top:8px;padding:11px 14px;border-radius:10px;
  background:var(--brand-soft);border:1px solid var(--brand-line);
  text-decoration:none;font:inherit;text-align:left;cursor:pointer;
}
.hp-consult-row-k{font-size:11px;color:var(--ink-4);flex-shrink:0;letter-spacing:.3px;}
.hp-consult-row-v{
  flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--ink-1);
  font-variant-numeric:tabular-nums;letter-spacing:.4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hp-consult-row-go{
  flex-shrink:0;font-size:11.5px;font-weight:800;color:var(--brand-strong);
  padding-left:10px;border-left:1px solid var(--brand-line);
}
/* 合规提示：站内只做初步沟通，不成交、不收款、不代表已建立委托 */
.hp-consult-note{
  font-size:10.5px;color:var(--ink-4);line-height:1.65;
  margin:14px 0 2px;padding-top:10px;border-top:1px solid var(--line-soft);
}
@media (min-width:1024px){
  .hp-consult-half{padding:10px 12px;gap:5px;}
  .hp-consult-t{font-size:13px;}
  .hp-consult-d{font-size:11px;}
  .hp-consult-qrbox img{width:60px;height:60px;}
}

.hp-hero-divider{
  height:1px;background:repeating-linear-gradient(90deg,#C9C2B0 0 6px,transparent 6px 10px);
  margin:var(--s-3) 0;
}
.hp-hero-firmInfo{
  font-size:11.5px;line-height:1.7;color:var(--ink-3);
}
.hp-hero-firmInfo b{font-size:13px;color:var(--ink-1);display:block;margin-bottom:3px;}
@media (min-width:1024px){
  .hp-col-l .hp-hero{padding:var(--s-3) var(--s-4) var(--s-4);}
  .hp-hero-name{font-size:26px;}
}

/* —— 名片区布局变体：centered（居中叠放）/ minimal（紧凑极简） ——
   注意：这里一律用 `.hp-hero.hp-hero-xxx` 双类提高优先级（0,3,0），
   否则会被下方 `[data-layout="compact"] .hp-hero-top` 等（0,2,0）在 compact 布局下覆盖。 */
/* 经典（classic）就是上面基础样式，不额外覆写 */
/* centered：头像置顶居中，信息居中对齐，留白更多 */
.hp-hero.hp-hero-centered .hp-hero-inner{text-align:center;padding:22px 18px 18px;}
.hp-hero.hp-hero-centered .hp-hero-top{flex-direction:column;align-items:center;gap:12px;margin-bottom:12px;}
.hp-hero.hp-hero-centered .hp-avatar{width:92px;height:92px;border-width:3px;box-shadow:0 6px 18px rgba(139,115,85,.22);}
.hp-hero.hp-hero-centered .hp-hero-head{padding-top:0;}
.hp-hero.hp-hero-centered .hp-hero-namebox{justify-content:center;margin-bottom:4px;}
.hp-hero.hp-hero-centered .hp-hero-name{font-size:26px;letter-spacing:3px;}
.hp-hero.hp-hero-centered .hp-hero-firm,
.hp-hero.hp-hero-centered .hp-hero-wechat,
.hp-hero.hp-hero-centered .hp-hero-phone{text-align:center;margin-top:4px;}
.hp-hero.hp-hero-centered .hp-hero-license{justify-content:center;margin-top:8px;}
.hp-hero.hp-hero-centered .hp-hero-practice{justify-content:center;margin-top:10px;}
.hp-hero.hp-hero-centered .hp-hero-socials{justify-content:center;margin-top:10px;}
.hp-hero.hp-hero-centered .hp-hero-tagline{text-align:center;margin-top:12px;}
.hp-hero.hp-hero-centered .hp-hero-entry{text-align:left;margin-top:14px;}
@media (min-width:1024px){
  .hp-hero.hp-hero-centered .hp-hero-name{font-size:28px;}
  .hp-hero.hp-hero-centered .hp-avatar{width:96px;height:96px;}
}
/* minimal：头像更小、信息极致紧凑，像一行行小字名片 */
.hp-hero.hp-hero-minimal .hp-hero-inner{padding:14px 16px 14px;}
.hp-hero.hp-hero-minimal .hp-hero-top{align-items:center;gap:12px;margin-bottom:10px;}
.hp-hero.hp-hero-minimal .hp-avatar{width:60px;height:60px;border-width:2px;box-shadow:0 2px 8px rgba(139,115,85,.14);}
.hp-hero.hp-hero-minimal .hp-hero-head{padding-top:0;}
.hp-hero.hp-hero-minimal .hp-hero-namebox{margin-bottom:1px;gap:6px;}
.hp-hero.hp-hero-minimal .hp-hero-name{font-size:20px;letter-spacing:1px;}
.hp-hero.hp-hero-minimal .hp-hero-role{font-size:9.5px;padding:1px 6px;}
.hp-hero.hp-hero-minimal .hp-hero-firm,
.hp-hero.hp-hero-minimal .hp-hero-wechat,
.hp-hero.hp-hero-minimal .hp-hero-phone{margin-top:1px;font-size:11px;}
.hp-hero.hp-hero-minimal .hp-hero-license{margin-top:4px;}
.hp-hero.hp-hero-minimal .hp-lic-no{font-size:10px;}
.hp-hero.hp-hero-minimal .hp-hero-practice{margin-top:8px;}
.hp-hero.hp-hero-minimal .hp-prac-d .hp-prac-text{font-size:11.5px;}
.hp-hero.hp-hero-minimal .hp-hero-socials{margin-top:8px;gap:6px;}
.hp-hero.hp-hero-minimal .hp-social{height:28px;padding:0 11px;font-size:11px;}
.hp-hero.hp-hero-minimal .hp-hero-tagline{font-size:12.5px;line-height:1.75;margin-top:10px;}
.hp-hero.hp-hero-minimal .hp-hero-entry{margin-top:10px;padding:9px 11px;}

/* ---------- 8. 模块：数字成果 Stats ---------- */
.hp-sec.hp-stats-sec{padding-top:0;}
.hp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);}
.hp-stat{
  background:var(--paper-2);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:var(--s-3) var(--s-2);text-align:center;
}
.hp-stat-num{
  font-family:var(--font-serif);font-size:20px;font-weight:800;
  background:linear-gradient(135deg,var(--brand-strong) 0%,var(--brand) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1.15;letter-spacing:.5px;
}
.hp-stat-num i{font-style:normal;font-size:13px;-webkit-text-fill-color:var(--brand-strong);}
.hp-stat-label{font-size:10px;color:var(--ink-3);line-height:1.45;margin-top:4px;}

/* ---------- 9. 模块：执业领域 Practice ---------- */
.hp-practice{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);}
.hp-pa{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s-4) var(--s-3);
  transition:all var(--t-fast) var(--ease);
}
.hp-pa:hover{border-color:var(--brand-line);box-shadow:var(--sh-2);transform:translateY(-2px);}
.hp-pa-no{
  font-family:var(--font-serif);font-size:10px;font-weight:700;
  color:var(--brand);letter-spacing:1px;display:block;margin-bottom:4px;
}
.hp-pa-name{font-size:13.5px;font-weight:700;color:var(--ink-1);line-height:1.4;}
.hp-pa-desc{font-size:11px;color:var(--ink-3);line-height:1.6;margin-top:4px;}

/* ---------- 10. 模块：执业简介 About ---------- */
.hp-about p{font-size:13.5px;line-height:2;color:var(--ink-2);margin-bottom:var(--s-3);}
.hp-about p:last-child{margin-bottom:0;}
.hp-about b{color:var(--ink-1);}

/* ---------- 11. 模块：代表案例 Cases ---------- */
.hp-case{
  border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s-4);margin-bottom:var(--s-3);background:var(--paper);
}
.hp-case:last-child{margin-bottom:0;}
.hp-case-no{
  font-family:var(--font-serif);font-size:10px;font-weight:700;
  color:var(--brand);letter-spacing:1px;
}
.hp-case-title{font-size:14px;font-weight:800;color:var(--ink-1);line-height:1.6;margin:3px 0 6px;}
.hp-case-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:var(--s-3);}
.hp-case-body{font-size:12.5px;line-height:1.9;color:var(--ink-2);}
.hp-case-body dt{
  font-size:11px;font-weight:800;color:var(--brand-strong);
  letter-spacing:.5px;margin-top:var(--s-3);
}
.hp-case-body dt:first-child{margin-top:0;}
.hp-case-body dd{margin:2px 0 0;}
.hp-case-body b{color:var(--ink-1);}
.hp-redact{
  margin-top:var(--s-4);padding:var(--s-3);
  background:var(--paper-2);border-left:2px solid var(--brand-line);
  font-size:11px;color:var(--ink-3);line-height:1.75;border-radius:0 var(--r-sm) var(--r-sm) 0;
}

/* ---------- 12. 模块：工具挂载 Mounts ---------- */
.hp-tools{display:grid;grid-template-columns:1fr;gap:var(--s-2);}
@media (min-width:600px){.hp-tools{grid-template-columns:1fr 1fr;}}
.hp-tool{
  display:flex;align-items:flex-start;gap:var(--s-3);
  padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);transition:all var(--t-fast) var(--ease);
}
.hp-tool:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-1px);}
.hp-tool-ico{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:var(--brand-soft);border:1px solid var(--brand-line);
  display:flex;align-items:center;justify-content:center;
  color:var(--brand-strong);
}
.hp-tool-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;}
.hp-tool-name{font-size:13px;font-weight:700;color:var(--ink-1);line-height:1.4;}
.hp-tool-desc{font-size:11px;color:var(--ink-3);line-height:1.6;margin-top:2px;display:block;}
.hp-tool-free{
  display:inline-block;margin-top:5px;font-size:9.5px;font-weight:700;
  color:#2E7D52;background:#E9F5EE;border-radius:4px;padding:1px 6px;
}
/* v2.4.45：付费工具价格标签（与免费标签同构，金色变体） */
.hp-tool-price{
  display:inline-block;margin-top:5px;font-size:9.5px;font-weight:700;
  color:#2E7D52;background:#E9F5EE;border-radius:4px;padding:1px 6px;
  letter-spacing:.5px;
}
.hp-mount-note{
  margin-top:var(--s-3);font-size:10.5px;color:var(--ink-4);line-height:1.7;
}

/* v2.4.48（2026-09-16）：撤回 v2.4.47「方案A」桌面单列行式规则，回到样式样板
   （/temp/homepage-gen/）的桌面两列网格 —— 用户定论：样板先定，生成器必须对齐样板。 */

/* ---------- 13. 模块：专业文章 Articles（v2.4.25 由「专业输出」升级） ----------
   日期 + 标题 同行（日期做左边小字，标题是主信息），
   下行是「发表平台 · 标签」，再下行是摘要。整条可点跳原文。 */
.hp-pubs{margin-top:2px;}
.hp-pub{
  display:block;padding:var(--s-3) 0;border-bottom:1px dashed var(--line);
  text-decoration:none;transition:all var(--t-fast) var(--ease);
}
.hp-pub:last-child{border-bottom:0;}
.hp-pub:hover{padding-left:6px;}
.hp-pub-head{display:flex;align-items:center;gap:10px;}
.hp-pub-no{
  width:24px;height:24px;flex-shrink:0;border-radius:999px;
  background:var(--brand-soft);color:var(--brand-strong);
  font-family:var(--font-serif);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.hp-pub-date{
  flex-shrink:0;font-size:10.5px;color:var(--ink-4);
  font-variant-numeric:tabular-nums;letter-spacing:.3px;
}
.hp-pub-title{font-size:13px;font-weight:700;color:var(--ink-1);line-height:1.6;}
.hp-pub-from{font-size:10.5px;color:var(--ink-4);margin-top:3px;letter-spacing:.3px;}
.hp-pub-note{font-size:11.5px;color:var(--ink-3);line-height:1.7;margin-top:3px;}

/* ---------- 14. 模块：执业经历 Experience ---------- */
.hp-exp{position:relative;padding-left:var(--s-5);}
.hp-exp::before{
  content:"";position:absolute;left:4px;top:6px;bottom:6px;
  width:1px;background:var(--line);
}
.hp-exp-item{position:relative;padding-bottom:var(--s-5);}
.hp-exp-item:last-child{padding-bottom:0;}
.hp-exp-item::before{
  content:"";position:absolute;left:calc(-1 * var(--s-5) + 1px);top:7px;
  width:7px;height:7px;border-radius:50%;
  background:var(--paper);border:2px solid var(--brand);
}
.hp-exp-org{font-size:13.5px;font-weight:800;color:var(--ink-1);line-height:1.5;}
.hp-exp-role{font-size:11.5px;color:var(--brand-strong);font-weight:600;margin-top:2px;}
.hp-exp-desc{font-size:12px;color:var(--ink-3);line-height:1.8;margin-top:4px;}

/* ---------- 15. 模块：社会职务 Affiliations ----------
   v2.4.37：编号圆标列表式（选型方案1）——金圆编号+机构+右职务，行间细分线 */
.hp-aff{list-style:none;}
.hp-aff-item{
  display:flex;align-items:center;gap:12px;padding:11px 2px;
}
.hp-aff-item + .hp-aff-item{border-top:1px solid var(--line-soft);}
.hp-aff-no{
  width:24px;height:24px;flex-shrink:0;border-radius:999px;
  background:var(--brand-soft);color:var(--brand-strong);
  font-family:var(--font-serif);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.hp-aff-org{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--ink-1);line-height:1.5;}
.hp-aff-role{font-size:11px;color:var(--ink-3);flex-shrink:0;}

/* ---------- 16. 模块：客户评价 Testimonials ---------- */
.hp-quote{
  border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s-4);margin-bottom:var(--s-3);background:var(--paper);
  position:relative;
}
.hp-quote:last-child{margin-bottom:0;}
.hp-quote::before{
  content:"\201C";position:absolute;top:6px;left:12px;
  font-family:var(--font-serif);font-size:38px;color:var(--brand-line);line-height:1;
}
.hp-quote-text{
  font-size:12.5px;line-height:1.95;color:var(--ink-2);
  padding-top:var(--s-3);position:relative;
}
.hp-quote-by{
  font-size:11px;color:var(--ink-4);margin-top:var(--s-3);
  padding-top:var(--s-2);border-top:1px solid var(--line-soft);text-align:right;
}

/* ---------- 17. 模块：所在律所 Firm ---------- */
.hp-firm-name{font-size:14px;font-weight:800;color:var(--ink-1);margin-bottom:5px;}
.hp-firm-desc{font-size:12.5px;line-height:1.9;color:var(--ink-2);margin-bottom:var(--s-3);}
/* ---------- 09 关于有点法子 About YDFZ ---------- */
.hp-ydfz-lead{
  font-family:var(--font-serif);font-size:14.5px;font-weight:700;color:var(--ink-1);
  line-height:1.8;letter-spacing:.3px;margin-bottom:var(--s-3);
  padding:10px 14px;background:var(--brand-soft);
  border-left:2px solid var(--brand-line);border-radius:0 var(--r-sm) var(--r-sm) 0;
}
/* v2.4.37（A2 选型）：标语 = 左金竖线 + 大字 + 英文小标，无底色最醒目 */
.hp-ydfz-slogan{
  border-left:3px solid var(--brand);
  padding:4px 0 4px 16px;margin-bottom:10px;
}
.hp-ydfz-slogan-t{
  font-size:16px;font-weight:800;line-height:1.7;color:var(--ink-1);letter-spacing:.2px;
}
.hp-ydfz-slogan-t b{color:var(--brand-strong);}
.hp-ydfz-slogan-en{
  font-family:var(--font-serif);font-size:9.5px;color:var(--ink-4);
  letter-spacing:2px;margin-top:7px;text-transform:uppercase;
}
/* v2.4.39（B4 精简）：官网链接 = 卡片链接行，去圆形字标、内容左对齐 */
.hp-ydfz-link{
  display:flex;align-items:center;gap:10px;margin-top:14px;
  padding:13px 15px;background:var(--paper-2);
  border:1px solid var(--line-soft);border-radius:var(--r);
  text-decoration:none;
}
.hp-ydfz-link:hover{background:var(--brand-soft);border-color:var(--brand-line);}
.hp-ydfz-link-t{flex:1;min-width:0;font-size:13px;font-weight:800;color:var(--ink-1);line-height:1.4;text-align:left;}
.hp-ydfz-link-d{
  display:block;font-size:10.5px;color:var(--ink-4);font-weight:400;
  margin-top:2px;letter-spacing:.4px;
}
.hp-ydfz-link-arr{flex-shrink:0;color:var(--brand-strong);font-size:16px;line-height:1;}
/* v2.4.42：律师共创社区卡（移入 09，官网链接下方），通栏占满 + 与上卡留缝 */
.hp-ydfz-comm{margin-top:var(--s-2);width:100%;box-sizing:border-box;}
.hp-ydfz-note{
  font-size:11px;color:var(--ink-4);line-height:1.7;margin-top:var(--s-3);
  padding-top:10px;border-top:1px solid var(--line-soft);
}
.hp-firm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2);margin-bottom:var(--s-3);}
.hp-firm-stat{text-align:center;padding:var(--s-3) 2px;background:var(--paper-2);border-radius:var(--r-sm);}
.hp-firm-stat b{
  display:block;font-family:var(--font-serif);font-size:17px;
  color:var(--brand-strong);line-height:1.2;
}
.hp-firm-stat span{display:block;font-size:9.5px;color:var(--ink-3);margin-top:3px;}
.hp-firm-honors{display:flex;flex-wrap:wrap;gap:5px;}

/* v2.4.34：卡片分区式（09 关于有点法子选型）——每段一张浅色小卡，
   卡内「标题 + 英文小标 + 正文」；标题不加编号，避免与外层 09 层级打架。 */
.hp-ydfz-card{
  background:var(--paper-2);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:12px 14px;margin-bottom:10px;
}
.hp-ydfz-card:last-of-type{margin-bottom:0;}
.hp-ydfz-card-h{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;
  font-size:13px;font-weight:800;color:var(--ink-1);letter-spacing:.5px;margin-bottom:6px;
}
.hp-ydfz-card-h em{
  font-family:var(--font-serif-en);font-style:normal;font-weight:500;
  font-size:10px;color:var(--brand-strong);letter-spacing:.8px;text-transform:uppercase;
}
.hp-ydfz-card-p{font-size:12.5px;line-height:1.9;color:var(--ink-2);letter-spacing:.2px;}
.hp-ydfz-card-p b{color:var(--brand-strong);font-weight:800;}
.hp-ydfz-p{margin-bottom:10px;}

/* 开发者申请（V0） */
.hp-ydfz-join{
  margin:14px 0 12px;padding:13px 14px;border-radius:var(--r-sm);
  background:var(--brand-soft);border:1px dashed var(--brand-line);
}
.hp-ydfz-join-h{
  font-size:12px;font-weight:800;color:var(--brand-strong);
  margin-bottom:8px;letter-spacing:.3px;
}
.hp-ydfz-chips{display:flex;flex-wrap:wrap;gap:5px;}
.hp-ydfz-chip{
  font-size:10.5px;color:var(--ink-2);background:var(--paper);
  border:1px solid var(--brand-line);padding:3px 9px;border-radius:var(--r-pill);
}
/* v2.4.40（V2 选型）：步骤 = 单行箭头流，序号衬线金字 */
.hp-ydfz-steps{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-top:10px;font-size:10.5px;color:var(--ink-3);
}
.hp-ydfz-steps span{
  background:var(--paper);border-radius:var(--r-pill);padding:4px 11px;
  border:1px solid var(--brand-line);font-weight:600;color:var(--ink-1);
}
.hp-ydfz-steps span i{
  font-style:normal;font-family:var(--font-serif);
  color:var(--brand-strong);font-weight:700;margin-right:2px;
}
.hp-ydfz-steps .hp-ydfz-steps-arr{
  background:none;border:none;padding:0;
  color:var(--brand-strong);font-weight:800;font-size:12px;
}
.hp-ydfz-apply{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;min-height:44px;font-size:14px;font-weight:800;letter-spacing:1px;
  text-decoration:none;
}
.hp-ydfz-apply-arrow{font-size:13px;}
.hp-ydfz-apply-cap{
  text-align:center;font-size:10.5px;color:var(--ink-4);
  margin-top:6px;letter-spacing:.2px;line-height:1.6;
}
@media (min-width:1024px){
  .hp-ydfz-card{padding:14px 16px;}
  .hp-ydfz-card-p{font-size:13px;}
  .hp-ydfz-slogan-t{font-size:17px;}
}

/* ---------- 18. 模块：职业理念 Philosophy ---------- */
.hp-philo{
  background:var(--paper-2);border:1px solid var(--line-soft);
  border-left:3px solid var(--brand);
  border-radius:0 var(--r) var(--r) 0;padding:var(--s-5) var(--s-4);
}
.hp-philo-title{font-size:15px;font-weight:800;color:var(--ink-1);margin-bottom:var(--s-3);letter-spacing:.5px;}
.hp-philo p{font-size:13px;line-height:2;color:var(--ink-2);margin-bottom:var(--s-3);}
.hp-philo p:last-child{margin-bottom:0;}

/* ---------- 19. 模块：办公环境 Gallery ----------
   v2.4.23 修复「图片不完整、一段一段」：
   原规则 `.hp-gallery-item img{aspect-ratio:4/3;object-fit:cover}` 把每张图强行塞进 4:3 横框，
   而 7 张里 4 张是竖图 —— 实测 g02 由 900×1140 被裁成 505×379（竖向丢掉 41%），
   g01/g03/g04 分别丢 24% / 28% / 31%，所以看起来"一段一段的"。
   现改为：**按原比例完整显示**（height:auto，不再 object-fit:cover），
   桌面端改用 CSS 多列做 masonry —— 4 竖 + 3 横混排也不会出现大片空洞。 */
.hp-gallery{display:block;}
.hp-gallery .hp-gallery-item{
  position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1);
  margin:0 0 var(--s-2) 0;
  break-inside:avoid;-webkit-column-break-inside:avoid;
}
.hp-gallery .hp-gallery-item img{
  width:100%;height:auto;display:block;
  transition:transform var(--t) var(--ease);
}
.hp-gallery .hp-gallery-item:hover img{transform:scale(1.03);}
.hp-gallery .hp-gallery-cap{
  position:absolute;left:0;right:0;bottom:0;padding:var(--s-4) var(--s-3) var(--s-3);
  background:linear-gradient(transparent,rgba(0,0,0,.55));
  color:#fff;font-size:12px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.4);
  opacity:0;transition:opacity var(--t-fast) var(--ease);
}
.hp-gallery .hp-gallery-item:hover .hp-gallery-cap{opacity:1;}
@media (min-width:600px){
  .hp-gallery{columns:2;column-gap:var(--s-2);}
}

/* ---------- 20. 模块：生成器入口 Generator ---------- */
.hp-generator{
  margin:var(--s-4) var(--gutter);
  padding:var(--s-5) var(--s-4);
  border-radius:var(--r);
  background:var(--brand-grad);
  color:#fff;position:relative;overflow:hidden;
  box-shadow:var(--sh-2);
}
.hp-generator::before{
  content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;
  background:rgba(255,255,255,.08);border-radius:50%;
}
.hp-generator-title{
  font-size:16px;font-weight:800;letter-spacing:.5px;margin-bottom:var(--s-2);position:relative;
}
.hp-generator-desc{
  font-size:12.5px;line-height:1.8;opacity:.95;margin-bottom:var(--s-4);position:relative;
}
.hp-generator .hp-btn{
  position:relative;background:#fff;color:var(--brand-strong);border:0;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.hp-generator .hp-btn:hover{background:rgba(255,255,255,.95);color:var(--brand-strong);}
@media (min-width:1024px){
  .hp-generator{margin:var(--s-4) var(--s-6) var(--s-6);}
}
/* v2.4.45：官网/社区入口卡容器（由 09 移至生成器卡下方，与生成器卡同边距） */
/* ---------- 21. 模块：联系方式 Contact ---------- */
.hp-contact{
  margin:0 var(--gutter) var(--s-4);padding:var(--s-4);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
}
@media (min-width:1024px){.hp-col-l .hp-contact{margin:0 var(--s-4) var(--s-4);}}
.hp-info{font-size:12.5px;line-height:2.05;color:var(--ink-2);}
.hp-info div{display:flex;gap:8px;}
.hp-info dt{color:var(--ink-4);flex-shrink:0;letter-spacing:1px;}
.hp-info dd{word-break:break-all;}
.hp-info a{color:var(--ink-1);border-bottom:1px solid var(--line);}
.hp-info a.hp-tel{color:var(--accent);font-weight:800;border:0;letter-spacing:.5px;}
.hp-qr-box{
  margin-top:var(--s-4);padding-top:var(--s-4);
  border-top:1px dashed var(--line);text-align:center;
}
.hp-qr-title{font-size:11.5px;color:var(--brand-strong);font-weight:700;margin-bottom:var(--s-3);letter-spacing:.5px;}
.hp-qr{width:150px;height:150px;margin:0 auto var(--s-2);background:#fff;padding:6px;border-radius:10px;box-shadow:var(--sh-2);}
.hp-qr-tip{font-size:10.5px;color:var(--ink-4);line-height:1.6;}

/* ---------- 22. 模块：免责声明 Disclaimer ---------- */
.hp-disclaimer{
  padding:var(--s-4) var(--gutter) var(--s-6);
  font-size:10.5px;color:var(--ink-4);line-height:1.8;
  border-top:1px solid var(--line-soft);
}

/* ---------- 23. 折叠区（原生 details，X5 安全） ---------- */
.hp-fold{border-top:1px solid var(--line-soft);}
.hp-fold:last-of-type{border-bottom:1px solid var(--line-soft);}
.hp-fold>summary{
  list-style:none;cursor:pointer;
  padding:var(--s-4) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  font-size:13.5px;font-weight:700;color:var(--ink-1);
  transition:background var(--t-fast) var(--ease);
}
.hp-fold>summary::-webkit-details-marker{display:none;}
.hp-fold>summary:hover{background:var(--paper-2);}
.hp-fold-no{
  font-family:var(--font-serif);font-size:10px;font-weight:700;
  color:#fff;background:var(--brand);letter-spacing:.5px;
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  margin-right:8px;flex-shrink:0;
}
.hp-fold>summary::after{
  content:"";width:7px;height:7px;flex-shrink:0;
  border-right:1.6px solid var(--ink-4);border-bottom:1.6px solid var(--ink-4);
  transform:rotate(45deg);transition:transform var(--t) var(--ease);
}
.hp-fold[open]>summary::after{transform:rotate(-135deg);}
.hp-fold-body{padding:0 var(--gutter) var(--s-5);}
@media (min-width:1024px){
  .hp-fold>summary{padding:var(--s-4) var(--s-6);}
  .hp-fold-body{padding:0 var(--s-6) var(--s-6);}
}

/* ---------- 23b. 折叠行 · 栏目头样式（v2.4.19 一级模块用） ----------
   01 执业领域 / 02 专业工具：折叠标题完全沿用「栏目头」排版
   （编号圆标 + 中文大标题 + 英文小标），右侧追加折叠箭头。
   视觉与折叠前一致，只在标题行右侧多一个可点的箭头；默认展开。 */
.hp-fold-head>summary{
  align-items:baseline;
  padding:var(--s-6) var(--gutter) var(--s-4);
  font-size:16px;font-weight:800;letter-spacing:.5px;
}
/* 箭头按交叉轴居中（标题是 baseline 对齐，箭头不跟着低头） */
.hp-fold-head>summary::after{align-self:center;}
.hp-fold-head .hp-sec-en{margin-left:auto;}
@media (min-width:1024px){
  .hp-fold-head>summary{padding:var(--s-6) var(--s-6) var(--s-4);}
}

/* ---------- 23c. 律所介绍内的分隔线（v2.4.19：08+09 合并） ----------
   律所信息（简介/数据/荣誉）与图廊之间的一条细线，不写字——
   图廊里可能放办公照片，也可能放律所简介图，不额外起小标题才不会串味。 */
.hp-firm-rule{height:1px;background:var(--line-soft);margin:var(--s-5) 0 var(--s-3);}

/* ---------- 24. 底部悬浮 CTA（不用 fixed+blur） ---------- */
.hp-cta{
  position:sticky;bottom:0;z-index:20;
  display:flex;gap:var(--s-2);
  padding:var(--s-3) var(--gutter);
  background:rgba(255,255,255,.94);
  border-top:1px solid var(--line);
  -webkit-backdrop-filter:saturate(1.4);
  backdrop-filter:saturate(1.4);
}
.hp-cta .hp-btn{flex:1;min-height:42px;font-size:13.5px;}
@media (min-width:1024px){.hp-cta{display:none;}}

/* ---------- 25. 占位提示（空白模板用） ---------- */
.ph{
  display:inline;
  background:repeating-linear-gradient(45deg,#F8F6F0,#F8F6F0 6px,#F1EEE4 6px,#F1EEE4 12px);
  border:1px dashed var(--brand-line);border-radius:3px;
  padding:1px 7px;color:var(--ink-4);
  font-size:.9em;font-weight:400;line-height:1.8;
}

/* ---------- 26. 打印 ---------- */
@media print{
  body{background:#fff;padding:0;}
  .hp-card{box-shadow:none;max-width:none;}
  .hp-cta,.hp-fold>summary::after{display:none;}
  .hp-fold-body{display:block!important;}
  .hp-cover-media{height:180px;}
}

/* ---------- 27. 紧凑分栏布局（Layout B） ----------
   数据驱动：data.layout = 'compact' 时，render 给 root 写 data-layout="compact"，
   本区块整体接管视觉。默认 split 布局完全不受影响。
   设计要点（对应 demo-compact.html）：
     · 左名片栏收窄到 260px，卡片居中紧凑，证号留在名片内
     · 联系方式移到右栏顶部，成横条（邮箱/电话）+ 微信二维码条
     · 执业领域改 1 列列表（编号 | 标题+描述），更有呼吸感
   ============================================================ */

/* 桌面端：左 340px + 右 1fr，去掉右栏竖线；卡片更宽，给右栏留足空间
   v2.4.21：左栏 280 → 340px —— 头像放大到 108px 后，原宽度会把
   「执业证号 + 官方核验」逼成三行（实测证号被拦腰截断）。 */
@media (min-width:1024px){
  [data-layout="compact"] .hp-card{max-width:1240px;}
  [data-layout="compact"] .hp-cols{grid-template-columns:380px 1fr;gap:var(--s-5);}
  [data-layout="compact"] .hp-col-l{position:static;}
  [data-layout="compact"] .hp-col-r{border-left:0;padding:var(--s-5) var(--s-5);}
  [data-layout="compact"] .hp-col-r .hp-sec{padding:var(--s-5) 0;}
  [data-layout="compact"] .hp-col-r .hp-sec:first-child{padding-top:0;}
}

/* 左：紧凑名片卡（头像左 / 信息右，名片式横排） */
[data-layout="compact"] .hp-hero{padding:0;}
/* v2.4.21：横向 padding 18 → 15，给"放大后的头像 + 右移的文字"腾出空间，
   避免「执业证号 + 官方核验」被挤到换行 */
[data-layout="compact"] .hp-hero-inner{text-align:left;padding:18px 15px 16px;}
/* v2.4.21：头像 92 → 108px（≈ 右侧文字块总高 124px，视觉重量终于对得上），
   gap 18 → 22px，文字整体右移 16px —— 解决"头像和文字挤在左边"的观感。
   下面两条 @media 是宽度兜底：头像放大后「执业证号 + 官方核验」整行实测需
   219.4px，窄屏放不下会折行，故按可用宽度分三档回落（非视觉偏好，是硬约束）。 */
[data-layout="compact"] .hp-hero-top{
  flex-direction:row;align-items:flex-start;gap:22px;text-align:left;
  margin-bottom:10px;
}
[data-layout="compact"] .hp-avatar{
  width:108px;height:108px;border-width:2px;
  box-shadow:0 4px 12px rgba(139,115,85,.18);
}
/* 375–384px：iPhone SE2/3、12 mini 等 */
@media (max-width:384px){
  [data-layout="compact"] .hp-avatar{width:100px;height:100px;}
  [data-layout="compact"] .hp-hero-top{gap:20px;}
}
/* ≤374px：小屏安卓 / 老机型 */
@media (max-width:374px){
  [data-layout="compact"] .hp-avatar{width:92px;height:92px;}
  [data-layout="compact"] .hp-hero-top{gap:16px;}
}
[data-layout="compact"] .hp-hero-head{flex:1;min-width:0;padding-top:4px;}
[data-layout="compact"] .hp-hero-namebox{justify-content:flex-start;gap:6px;}
[data-layout="compact"] .hp-hero-name{font-size:20px;text-align:left;letter-spacing:1px;}
[data-layout="compact"] .hp-hero-role{font-size:10px;padding:2px 7px;background:var(--brand-grad);color:#fff;border:0;}
[data-layout="compact"] .hp-hero-firm{text-align:left;font-size:11px;margin-top:3px;}
[data-layout="compact"] .hp-hero-phone{margin-top:2px;}
[data-layout="compact"] .hp-hero-license{
  justify-content:flex-start;margin:2px 0 0 0;padding:0;
  background:transparent;border:0;border-radius:0;
}
[data-layout="compact"] .hp-lic-no{font-size:11px;color:var(--ink-3);font-weight:400;letter-spacing:0;}
/* v2.4.16 新增 / v2.4.18 加粗：紧凑布局下律所/地址样式同步 */
[data-layout="compact"] .hp-hero-firmline{font-size:11.5px;color:var(--ink-3);font-weight:700;margin-top:3px;}
[data-layout="compact"] .hp-hero-address{font-size:11px;}
[data-layout="compact"] .hp-hero-tagline{
  text-align:left;margin-top:var(--s-3);font-size:13px;line-height:1.85;
}
[data-layout="compact"] .hp-hero-socials{justify-content:flex-start;margin-top:8px;margin-bottom:0;}
[data-layout="compact"] .hp-social{height:30px;padding:0 12px;font-size:11px;}
/* 紧凑布局下首屏执业领域适配 */
[data-layout="compact"] .hp-hero-practice{margin-top:4px;}
[data-layout="compact"] .hp-prac-a{gap:6px 5px;}
[data-layout="compact"] .hp-prac-tag{height:24px;padding:0 9px;font-size:11px;}
[data-layout="compact"] .hp-prac-b .hp-prac-line{font-size:12px;line-height:1.65;}
[data-layout="compact"] .hp-prac-c{grid-template-columns:repeat(3,1fr);gap:6px 8px;}
[data-layout="compact"] .hp-prac-c-item{padding:6px 8px;}
[data-layout="compact"] .hp-prac-c-no{font-size:11px;}
[data-layout="compact"] .hp-prac-c-name{font-size:10.5px;}
[data-layout="compact"] .hp-prac-d .hp-prac-text{font-size:11.5px;font-weight:600;line-height:1.6;}
/* 紧凑左栏下布局变体微调：居中/极简在窄列里保持可读 */
[data-layout="compact"] .hp-hero-centered .hp-hero-top{gap:10px;}
[data-layout="compact"] .hp-hero-centered .hp-avatar{width:72px;height:72px;}
[data-layout="compact"] .hp-hero-centered .hp-hero-name{font-size:20px;letter-spacing:1px;}
[data-layout="compact"] .hp-hero-minimal .hp-avatar{width:52px;height:52px;}
[data-layout="compact"] .hp-hero-minimal .hp-hero-name{font-size:18px;}
/* 紧凑左栏下能力页入口防挤压 */
[data-layout="compact"] .hp-hero-entry{gap:10px;}
[data-layout="compact"] .hp-entry-text{flex:1;min-width:0;}
[data-layout="compact"] .hp-entry-name{flex-wrap:wrap;}
[data-layout="compact"] .hp-entry-desc{
  white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media (min-width:1024px){
  [data-layout="compact"] .hp-hero-inner{padding:20px 20px 18px;}
  /* 桌面左栏只有 380px，头像回到 96px / gap 18 才能让「执业证号 + 官方核验」同行 */
  [data-layout="compact"] .hp-avatar{width:96px;height:96px;}
  [data-layout="compact"] .hp-hero-top{gap:18px;}
  [data-layout="compact"] .hp-hero-name{font-size:21px;}
  [data-layout="compact"] .hp-hero-tagline{padding:0 var(--s-2);}
}

/* 右栏顶部：联系方式横条 + 微信二维码条 */
[data-layout="compact"] .hp-contact-bar{
  display:flex;flex-wrap:wrap;gap:10px 22px;
  padding:12px 16px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:12.5px;color:var(--ink-2);margin-bottom:var(--s-4);
}
[data-layout="compact"] .hp-cb-item{display:flex;align-items:center;gap:6px;}
[data-layout="compact"] .hp-cb-label{color:var(--ink-4);font-size:11px;letter-spacing:.5px;}
[data-layout="compact"] .hp-cb-val{color:var(--ink-1);font-weight:700;font-size:12.5px;}
[data-layout="compact"] .hp-cb-val.hp-cb-phone{color:var(--accent);font-family:var(--font-serif);letter-spacing:.3px;}
[data-layout="compact"] .hp-wechat-strip{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;background:var(--brand-soft);
  border:1px solid var(--brand-line);border-radius:var(--r-sm);margin-bottom:var(--s-4);
}
[data-layout="compact"] .hp-wechat-strip img{
  width:84px;height:84px;border-radius:8px;background:#fff;padding:4px;flex-shrink:0;
}
[data-layout="compact"] .hp-wx-txt{font-size:12.5px;color:var(--ink-2);line-height:1.7;}
[data-layout="compact"] .hp-wx-txt b{color:var(--brand-strong);}

/* 执业领域：1 列列表（编号 | 标题+描述） */
[data-layout="compact"] .hp-practice{
  display:flex;flex-direction:column;gap:1px;
  background:var(--line-soft);border-radius:var(--r-sm);overflow:hidden;
}
[data-layout="compact"] .hp-pa{
  display:flex;align-items:flex-start;gap:16px;
  background:var(--paper);border:0;border-radius:0;padding:16px 18px;
}
[data-layout="compact"] .hp-pa:hover{background:var(--paper-2);transform:none;box-shadow:none;}
[data-layout="compact"] .hp-pa-no{
  flex:0 0 36px;width:36px;
  font-family:var(--font-serif);font-size:20px;color:var(--brand);
  line-height:1.3;text-align:center;
}
[data-layout="compact"] .hp-pa-body{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:4px;
}
[data-layout="compact"] .hp-pa-name{font-size:15px;margin:0;font-weight:800;}
[data-layout="compact"] .hp-pa-desc{
  font-size:13px;line-height:1.8;color:var(--ink-3);
}

/* 工具卡在紧凑右栏保持 2 列（≥600 已是 2 列，这里确保间距舒适） */
@media (min-width:1024px){
  [data-layout="compact"] .hp-tools{gap:var(--s-3);}
}

/* ============================================================
   ---------- 27. 皮肤：blue（第一代「深蓝」视觉） ----------
   ------------------------------------------------------------
   用途：把专家主页涂装成「第一代网站」的视觉语言。
   第一代口径见 01_设计系统/视觉与品牌设计系统.md：
     主色 #1565C0 ／ 暗部 #0d4a8f ／ 渐变中段 #1976D2 ／ 浅蓝底 #EAF1FB
     线条 #d8e2ee ／ 页面底 #eef3fb ／ 次要文字 #5b6b7d ／ 注释 #9aa7b5
     阴影蓝调 0 2px 8px rgba(21,101,192,.08)
   启用方式：HOMEPAGE_DATA.skin = 'blue'
   说明：本块只换色，不换结构；gold/indigo/ink/jade 四套皮肤不受影响。
   ============================================================ */
[data-skin="blue"]{
  /* 品牌蓝 */
  --brand:#1565C0;
  --brand-strong:#0D4A8F;
  --brand-soft:#EAF1FB;
  --brand-line:#D8E2EE;
  --brand-grad:linear-gradient(135deg,#1565C0 0%,#1976D2 100%);
  --accent:#1565C0;

  /* 墨阶：第一代是冷蓝灰，不是暖灰 */
  --ink-1:#122B45;
  --ink-2:#33475E;
  --ink-3:#5B6B7D;
  --ink-4:#93A3B4;

  /* 纸与线 */
  --line:#D8E2EE;
  --line-soft:#EAF1F8;
  --paper:#FFFFFF;
  --paper-2:#F7FAFD;
  --paper-3:#EEF3FB;

  /* 阴影：统一蓝调（第一代口径） */
  --sh-1:0 1px 2px rgba(21,101,192,.06);
  --sh-2:0 2px 8px rgba(21,101,192,.08);
  --sh-3:0 10px 30px rgba(21,101,192,.18);
  --sh-card:0 2px 8px rgba(21,101,192,.08);
}

/* blue 皮肤下：桌面「浮卡」底盘改浅蓝页底（第一代是浅蓝，不是深色） */
@media (min-width:600px){
  html[data-skin="blue"] body{background:#EEF3FB;}
  html[data-skin="blue"] .hp-card{box-shadow:0 10px 30px rgba(21,101,192,.14);}
}
@media (min-width:1024px){
  html[data-skin="blue"] .hp-sec + .hp-sec{border-top-color:#E4ECF6;}
}

/* blue 皮肤下：两处硬编码暖色纹样 → 冷蓝灰 */
[data-skin="blue"] .hp-hero-divider{
  background:repeating-linear-gradient(90deg,#BFD0E4 0 6px,transparent 6px 10px);
}
[data-skin="blue"] .ph{
  background:repeating-linear-gradient(45deg,#F2F7FD,#F2F7FD 6px,#E6EEF8 6px,#E6EEF8 12px);
}

/* blue 皮肤下：工具「免费 / 价格」标签对齐第一代功能色（绿 #2e7d32） */
[data-skin="blue"] .hp-tool-free,
[data-skin="blue"] .hp-tool-price{
  color:#2E7D32;background:#E8F5E9;border:1px solid #C8E6C9;
}

/* blue 皮肤下：工具识别色（第一代视觉系统 §2.3）
   —— 四色只落在图标上，卡片其余部分仍走墨阶，避免"满屏彩色"。
   新增工具只需在 engine.js 的 MOUNTS 里加一条，并在这里补一行色值。 */
[data-skin="blue"] .hp-tool[data-tool="rensun"]  .hp-tool-ico{color:#1565C0;background:#EAF1FB;border-color:#CFE0F5;}
[data-skin="blue"] .hp-tool[data-tool="scsq"]    .hp-tool-ico{color:#2E7D32;background:#E8F5E9;border-color:#C8E6C9;}
[data-skin="blue"] .hp-tool[data-tool="yss"]     .hp-tool-ico{color:#E65100;background:#FFF3E0;border-color:#FFE0B2;}
[data-skin="blue"] .hp-tool[data-tool="hunyin"]  .hp-tool-ico{color:#6A4CC9;background:#F0EDFB;border-color:#DCD4F5;}
[data-skin="blue"] .hp-tool[data-tool="consult"] .hp-tool-ico{color:#0D4A8F;background:#EAF1FB;border-color:#CFE0F5;}

/* blue 皮肤下：地图/联系方式选项里的「›」箭头（data-URI SVG，无法继承 currentColor，只能整体替换为蓝） */
[data-skin="blue"] .hp-map-opt{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230D4A8F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
}

/* ============================================================
   ---------- 28. blue 皮肤：头像去环 + 右移（2026-09-17 用户反馈） ----------
   ------------------------------------------------------------
   反馈原文：「头像蓝色圆框去掉，头像向右再移动一些（原来头像有点太向
             左边边上挤了）」

   ① 去环：头像原有 border:2px solid var(--brand)，blue 皮肤下即 #1565C0
      蓝圆框。去环后改用冷蓝调柔和投影；顺带清掉 gold 时代遗留的暖棕
      投影 rgba(139,115,85,.x)（同属"去黄"范畴）。
      注：宽高是 border-box，去掉 2px 边框后照片本体由 92px 变 96px，
      外框尺寸不变，不会引起重排。

   ② 右移：桌面左栏 380 → 400px 让出宽度，头像再加 margin-left。
      桌面宽度预算（compact）：400 - 2(卡片边框) - 40(内边距) = 358；
      358 - 96(头像) - 16(右移) - 18(原有间距) = 228
      ≥ 220（「执业证号 + 官方核验」同行实测所需）——
      余量由原来的 4px 提升到 8px，不会把核验药丸挤到第二行。
      平板/手机（385–1023px）不动宽度预算：头像右移 6px，同时把
      头像→正文间距 22 → 16px 全额补回，正文位置与宽度一字不变。
      ≤384px 是既有三档头像回落区（100/92px），已无余量，不介入。

   ③ 只作用于非居中头像：centered 布局靠 align-items:center 居中，加
      margin 会让它失衡，故用 :not(.hp-hero-centered) 排除。
   ============================================================ */
html[data-skin="blue"] .hp-hero .hp-avatar{
  border:0;
  box-shadow:0 3px 12px rgba(21,101,192,.16);
}
@media (min-width:385px) and (max-width:1023px){
  html[data-skin="blue"][data-layout="compact"] .hp-hero:not(.hp-hero-centered) .hp-avatar{margin-left:6px;}
  html[data-skin="blue"][data-layout="compact"] .hp-hero:not(.hp-hero-centered) .hp-hero-top{gap:16px;}
}
@media (min-width:1024px){
  html[data-skin="blue"][data-layout="compact"] .hp-cols{grid-template-columns:400px 1fr;}
  html[data-skin="blue"][data-layout="compact"] .hp-hero:not(.hp-hero-centered) .hp-avatar{margin-left:16px;}
}

/* ============================================================
   29. 左名片栏吸顶（v2.4.22 · blue 皮肤 compact 桌面端专属）
   ------------------------------------------------------------
   问题：右栏内容流实测高 6332px，左名片卡只有 476px；而 §27 把
        .hp-col-l 覆盖成 position:static —— 滚动时左栏整块被带走，
        右侧一长条 6332-476=5856px 全靠空白撑，观感很空。
   改法（两处，缺一不可）：
     ① .hp-col-l 恢复 position:sticky；
     ② 祖先 .hp-card 的 overflow:hidden（§4 基础规则）会形成
        「滚动容器」——sticky 只会相对它吸附，而它自己不滚动，
        于是 sticky 静默失效。故桌面 compact 下改用 overflow:clip：
        裁剪行为与 hidden 完全一致（圆角照样裁），但不建立滚动容器。
   安全性：只作用于 blue 皮肤 + compact + ≥1024px 三条件同时命中；
       其余四套皮肤、split 版式、移动端一律零影响。
       卡片高 476px，任何常见桌面视口（≥560px）都能完整放下，
       不存在「卡片比视口高、底部被切掉」的风险，无需 JS 补偿。
   ============================================================ */
@media (min-width:1024px){
  html[data-skin="blue"][data-layout="compact"] .hp-card{overflow:clip;}
  html[data-skin="blue"][data-layout="compact"] .hp-col-l{
    position:sticky;top:var(--hp-sticky-top,20px);align-self:start;
  }
}

/* ============================================================
   30. 站点备案页脚（v2.4.49 · 平台锁定，每张主页都有）
   ------------------------------------------------------------
   背景：域名 youdianfazi.com 的 ICP 备案（浙ICP备2026064120号-1）与
        公安联网备案（浙公网安备 33032202000290号）登记在平台主体名下；
        每位律师的主页都是该域名下的页面，故备案号必须逐页公示。
        用户 2026-09-18 明确：以后律师生成的个人主页也要带备案号。
   形态：由 engine.js 的 renderBeian() 硬编码注入到 .hp-card 内部
        （renderCta 之后）—— 不放模块列表，用户无法关闭或改字。
   配色：只用主题变量（--ink-4 / --line-soft / --brand），
        因此 gold / blue / indigo / ink / jade 五套皮肤自动适配。
   注意：警徽是内联 SVG，不引用 assets/beian_icon.png ——
        该 png 在 /expert/ 部署路径下并不存在（只有根 assets/ 有）。
   ============================================================ */
.hp-beian{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:4px 8px;
  padding:var(--s-3) var(--gutter) var(--s-4);
  border-top:1px solid var(--line-soft);
  font-size:10.5px;line-height:1.6;color:var(--ink-4);
  text-align:center;
}
.hp-beian a{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--ink-4);transition:color var(--t-fast) var(--ease);
}
.hp-beian a:hover{color:var(--brand);}
.hp-beian-sep{color:var(--line);}
.hp-beian-ico{flex-shrink:0;display:block;}
@media (min-width:1024px){
  .hp-beian{padding-left:var(--s-6);padding-right:var(--s-6);}
}