/* ==========================================================================
   城企通 · 前台主题样式（零依赖，全部手写）
   组织顺序：变量 → 基础 → 通用组件 → 页头/导航 → 首页 → 列表/详情/单页
             → 侧栏 → 分页 → 页脚 → 城市目录/搜索 → 响应式 → 打印
   图标：内联 SVG 或纯 CSS 图形，不引任何字体图标与外部资源
   ========================================================================== */

:root {
    /* 主色：深松绿，财税/工商行业常用的稳重色，避免廉价蓝红渐变 */
    --brand: #0b5f52;
    --brand-dark: #084a41;
    --brand-ink: #063730;
    --brand-soft: #eef5f3;
    --brand-line: #cfe2dd;
    --accent: #a9761f;
    --accent-soft: #fbf5e9;

    --ink: #16202b;
    --text: #3d4a59;
    --muted: #78838f;
    --line: #e3e8ee;
    --line-strong: #d3dae2;
    --bg: #f5f7f8;
    --card: #ffffff;
    /* 白色不再写死：--on-brand 是品牌色底上的字，--on-dark 是深色带上的字，
       --on-dark-surface 是深色带上那颗反白药丸。深色皮肤只改这四个令牌就能整站翻面。 */
    --on-brand: #ffffff;
    --on-dark: #ffffff;
    --on-dark-surface: #ffffff;

    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(16, 32, 43, .05);
    --shadow: 0 8px 28px rgba(16, 32, 43, .07);
    --shadow-md: 0 14px 38px rgba(16, 32, 43, .10);
    --shadow-lg: 0 28px 68px rgba(16, 32, 43, .14);
    --max: 1280px;
    --gap: 36px;

    /* 尺度阶梯：正文与标题的整体抬升，「大气」的根在这里，皮肤只换色不换尺 */
    --fs-body: 16.5px;
    --lh-body: 1.85;
    --fs-h1: clamp(34px, 4.4vw, 52px);
    --fs-h2: clamp(24px, 2.5vw, 32px);
    --fs-h3: 19px;
    --sec-pad: clamp(64px, 7vw, 104px);

    /* 内页页头底色：比 --brand-dark 更深一档，皮肤只换色即可，不需要重写 .page-head */
    --head-bg: var(--brand-ink);

    --font: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* --------------------------------------------------------------------------
   1. 基础
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font: var(--fs-body)/var(--lh-body) var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote, pre, table { margin: 0; }

ul, ol { padding: 0; list-style: none; }

h1, h2, h3, h4, h5 {
    font-weight: 600;
    color: var(--ink);
    line-height: 1.28;
    letter-spacing: -.015em;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .18s ease;
}

a:hover { color: var(--brand); }

img, svg, video { max-width: 100%; }

img { height: auto; display: block; }

button { font: inherit; color: inherit; cursor: pointer; }

input, textarea, select, button { font: inherit; }

table { border-collapse: collapse; border-spacing: 0; }

::selection { background: var(--brand); color: var(--on-brand); }

.container {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 clamp(20px, 3.4vw, 44px);
}

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

.skip-link {
    position: absolute;
    left: -9999px; top: 8px;
    z-index: 999;
    padding: 10px 16px;
    background: var(--brand);
    color: var(--on-brand);
    border-radius: var(--radius-sm);
}

.skip-link:focus { left: 8px; color: var(--on-brand); }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.site-main { display: block; }

/* --------------------------------------------------------------------------
   2. 通用组件
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.btn--solid { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn--solid:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-brand); }

.btn--line { background: transparent; border-color: currentColor; color: inherit; }
.btn--line:hover { border-color: var(--brand); color: var(--brand); }

.btn--ghost { background: transparent; border-color: var(--brand-line); color: var(--brand); margin-top: 10px; }
.btn--ghost:hover { background: var(--brand-soft); color: var(--brand-dark); }

.btn--block { display: flex; width: 100%; margin-top: 14px; }

.badge {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 6px;
    border: 1px solid var(--accent);
    border-radius: 3px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    font-style: normal;
    line-height: 18px;
    vertical-align: 2px;
}

.badge--hit { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand); }

/* 纯 CSS 箭头图标 */
.ico-arrow {
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: 8px;
    border-right: 1.6px solid currentColor;
    border-top: 1.6px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease;
}

a:hover > .ico-arrow,
.block__more:hover .ico-arrow { transform: rotate(45deg) translate(2px, -2px); }

/* 下拉小三角 */
.caret {
    display: inline-block;
    width: 0; height: 0;
    margin-left: 4px;
    border: 4px solid transparent;
    border-top-color: currentColor;
    vertical-align: middle;
}

.sep { margin: 0 6px; color: var(--line-strong); }

.ico,
.topbar svg,
.navbar svg,
.footer svg,
.article__meta svg,
.contact__label svg { flex: none; }

/* --------------------------------------------------------------------------
   3. 顶部条 + 主导航
   -------------------------------------------------------------------------- */

.topbar {
    background: var(--brand-ink);
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    gap: 16px;
}

.topbar__left,
.topbar__right { display: flex; align-items: center; gap: 16px; min-width: 0; }

.topbar__hint,
.topbar__city { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }

.topbar__city b { color: var(--on-dark); font-weight: 600; }

.topbar__right { color: rgba(255, 255, 255, .66); }

.topbar__tel { display: inline-flex; align-items: center; gap: 5px; }

.topbar__tel a {
    color: var(--on-dark);
    font-weight: 600;
    letter-spacing: .3px;
}

.topbar__tel a:hover { color: #ffd8a8; }

/* 城市分站切换 */
.city-switch { position: relative; display: inline-flex; }

.city-switch__btn {
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 4px;
    background: rgba(255, 255, 255, .06);
    color: inherit;
    font-size: 13px;
    line-height: 1.6;
}

.city-switch__btn:hover { background: rgba(255, 255, 255, .16); color: var(--on-dark); }

.city-switch__panel {
    position: absolute;
    top: 100%; left: 0;
    /* 必须高于 .navbar 的 70：两者同处根层叠上下文，60 会被导航条整块盖住 */
    z-index: 75;
    display: none;
    width: 320px;
    padding: 16px 18px 14px;
    border: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    color: var(--text);
}

.city-switch:hover .city-switch__panel,
.city-switch:focus-within .city-switch__panel,
.city-switch__panel.is-open { display: block; }

.city-switch__title {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 12px;
}

.city-switch__list { display: flex; flex-wrap: wrap; gap: 8px; }

.city-switch__list a {
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
}

.city-switch__list a:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.city-switch__list a.is-this { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }

.city-switch__all {
    display: inline-block;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
    width: 100%;
    color: var(--brand);
    font-size: 13px;
}

/* 主导航条 */
.navbar {
    position: sticky;
    top: 0;
    z-index: 70;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .2s ease;
}

.navbar.is-stuck { box-shadow: 0 6px 18px rgba(16, 32, 43, .07); }

.navbar__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 74px;
}

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand__mark {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: none;
    border-radius: 9px;
    background: var(--brand);
    color: var(--on-brand);
}

.brand__mark svg { width: 24px; height: 24px; }

/* 显示高度与文字形式的徽标方块对齐，宽度按比例，横图最宽 220px 以免挤走导航 */
.brand__img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.brand__text { display: flex; flex-direction: column; min-width: 0; }

.brand__name {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--ink);
    line-height: 1.2;
}

.brand:hover .brand__name { color: var(--brand); }

.brand__sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; min-width: 0; }

.nav__item { position: relative; }

.nav__link {
    display: block;
    padding: 8px 11px;
    font-size: 15.5px;
    color: var(--ink);
    font-weight: 500;
    /* 皮肤把 --max 收到 1240 时，栏目名一多就会折成两行、把导航条撑高，禁止折行 */
    white-space: nowrap;
}

.nav__item.is-active > .nav__link { color: var(--brand); font-weight: 600; }

.nav__item.is-active > .nav__link::after {
    content: "";
    position: absolute;
    left: 11px; right: 11px; bottom: 6px;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
}

.nav__link:hover { color: var(--brand); }

.nav__sub {
    position: absolute;
    top: 100%; left: 0;
    z-index: 65;
    display: none;
    min-width: 168px;
    padding: 8px 0;
    border: 1px solid var(--line);
    border-top: 2px solid var(--brand);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--card);
    box-shadow: var(--shadow);
}

.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub { display: block; }

.nav__sublink {
    display: block;
    padding: 8px 18px;
    font-size: 14px;
    color: var(--text);
}

.nav__sublink:hover { background: var(--brand-soft); color: var(--brand); }
.nav__sublink.is-active { color: var(--brand); font-weight: 600; }

/* 搜索框 */
.search {
    display: flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--card);
    overflow: hidden;
}

.search input {
    flex: 1 1 150px;
    min-width: 78px;
    border: 0;
    padding: 0 14px;
    height: 38px;
    background: transparent;
    color: var(--ink);
    outline: none;
    -webkit-appearance: none;
}

.search input::placeholder { color: #a3adb8; }

.search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 14px;
    border: 0;
    background: var(--brand);
    color: var(--on-brand);
}

.search button:hover { background: var(--brand-dark); }

.search--inline { flex: 0 1 auto; min-width: 0; }

/* 移动端汉堡（纯 CSS 图形） */
.burger {
    display: none;
    position: relative;
    width: 42px; height: 42px;
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.burger span,
.burger span::before,
.burger span::after {
    position: absolute;
    left: 50%;
    width: 18px; height: 2px;
    margin-left: -9px;
    background: var(--ink);
    border-radius: 2px;
    content: "";
    transition: transform .2s ease, opacity .2s ease;
}

.burger span { top: 50%; margin-top: -1px; }
.burger span::before { top: -6px; left: 0; }
.burger span::after { top: 6px; left: 0; }

.nav-toggle:checked ~ .burger span { background: transparent; }
.nav-toggle:checked ~ .burger span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle:checked ~ .burger span::after { transform: translateY(-6px) rotate(-45deg); }

.nav-drawer { display: none; }

/* --------------------------------------------------------------------------
   4. 面包屑
   -------------------------------------------------------------------------- */

.crumbs-bar {
    border-bottom: 1px solid var(--line);
    background: var(--card);
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    min-height: 42px;
    font-size: 13px;
    color: var(--muted);
}

.crumbs__item { display: inline-flex; align-items: center; max-width: 100%; }

.crumbs__item + .crumbs__item::before {
    content: "";
    width: 5px; height: 5px;
    margin: 0 10px;
    border-right: 1.4px solid var(--line-strong);
    border-top: 1.4px solid var(--line-strong);
    transform: rotate(45deg);
}

.crumbs__item a { color: var(--muted); }
.crumbs__item a:hover { color: var(--brand); }
.crumbs__item.is-current { color: var(--ink); }
.crumbs__item.is-current span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   5. 首页大图区
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--brand-dark);
    color: var(--on-dark);
}

.hero__bg {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 26px),
        radial-gradient(1100px 380px at 78% 22%, rgba(255, 255, 255, .10), transparent 62%);
}

/* 顶部收一档：页首下方压着信任条，再按整屏 banner 留白就先看见一屏深色空场。
   底部留足高度给 .trust--lift 的负 margin 叠压。 */
.hero__inner {
    position: relative;
    padding: clamp(54px, 6vw, 86px) clamp(20px, 3.4vw, 44px) clamp(80px, 8.5vw, 116px);
}

.hero__main { max-width: 880px; }

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    font-size: 13.5px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .86);
}

.hero__title {
    margin-top: 26px;
    font-size: var(--fs-h1);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--on-dark);
}

.hero__tag {
    margin-top: 20px;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.hero__rte h1, .hero__rte h2 {
    margin-top: 24px;
    font-size: var(--fs-h1);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--on-dark);
    line-height: 1.22;
}

.hero__rte p { margin-top: 16px; font-size: 18px; color: rgba(255, 255, 255, .84); }
.hero__rte strong { color: var(--on-dark); }

.hero__lead {
    margin-top: 20px;
    max-width: 720px;
    font-size: 19px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .82);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.hero .btn--solid { background: var(--on-dark-surface); border-color: var(--on-dark-surface); color: var(--brand-ink); }
.hero .btn--solid:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--brand-ink); }
.hero .btn--line { border-color: rgba(255, 255, 255, .48); color: var(--on-dark); }
.hero .btn--line:hover { border-color: var(--on-dark); color: var(--on-dark); background: rgba(255, 255, 255, .1); }

.hero__img { margin-top: 24px; border-radius: var(--radius); }

/* --------------------------------------------------------------------------
   5B. 插画体系 + 首页组件层（8 套皮肤共用）
   -------------------------------------------------------------------------- */

:root {
    /* 插画只靠这四个变量换装：皮肤改主色即可，不必重画 SVG，也不用来一张图 */
    --illu-line: var(--brand-dark);
    --illu-soft: var(--brand-soft);
    --illu-accent: var(--accent);
    --illu-card: #ffffff;
}

.illu { display: block; width: 100%; height: auto; overflow: visible; }

/* 内联图标必须自带尺寸：SVG 不写宽高时浏览器按 300x150 的默认视框撑开，会把按钮顶变形 */
.ico { width: 1.25em; height: 1.25em; flex: none; }

.illu .il-soft { fill: var(--illu-soft); stroke: none; }

.illu .il-line {
    fill: none;
    stroke: var(--illu-line);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 虚线走「点描」而不是短划：更接近手绘草稿的松手感 */
.illu .il-dash {
    fill: none;
    stroke: var(--illu-line);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-dasharray: .5 11;
    opacity: .45;
}

/* 覆盖 .il-line 的 fill:none，必须排在它后面 */
.illu .il-fill-card { fill: var(--illu-card); }
.illu .il-fill-accent { fill: var(--illu-accent); }
.illu .il-dot { fill: var(--illu-accent); stroke: none; }

/* 实心色块上的留白线条（对勾、圆孔） */
.illu .il-punch {
    fill: none;
    stroke: var(--illu-card);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 页首左右分栏：左文案右插画。窄屏收成一栏并隐去插画，正文优先 */
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(30px, 4.6vw, 74px);
}

.hero__grid .hero__main { max-width: 680px; }

.hero__art { position: relative; }

.hero__art .illu { max-width: 560px; margin: 0 auto; }

/* 后台传了横幅图就用图，插画只兜底，两者不叠 */
.hero__art-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* 信任条：数字与承诺这类短信息，四条并排比塞进页首更透气 */
.trust {
    display: grid;
    grid-template-columns: repeat(var(--trust-n, 4), minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(26px, 3vw, 40px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--line);
    box-shadow: var(--shadow-sm);
}

.trust__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px;
    background: var(--card);
}

.trust__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
}

.trust__ico svg { width: 24px; height: 24px; }

.trust__text { flex: 1; min-width: 0; }
.trust b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
/* 地址是长句不是数字，按统计字号排会折行、把整条顶得高低不齐 */
.trust__item--long b { font-size: 15.5px; letter-spacing: 0; }
.trust__text span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }

/* 压在页首下沿，深色带与白卡错位才有层次，而不是两块平铺的灰底 */
.trust--lift { position: relative; z-index: 2; margin-top: clamp(-58px, -4vw, -40px); }

/* 类目卡带图形：图标由版式给，名称与简介仍来自后台栏目，皮肤不写行业文案 */
.cats--ico .cats__item a { display: flex; align-items: flex-start; gap: 14px; }

.cats__text { flex: 1; min-width: 0; margin-top: 0; }

.cats__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 1px solid var(--brand-line);
    border-radius: 11px;
    background: var(--brand-soft);
    color: var(--brand);
}

.cats__ico svg { width: 22px; height: 22px; }
.cats__item a:hover .cats__ico { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* 短区块收密度：后台只写了两行字时，不该撑出一屏空白
   （双类写法是必须的：本节排在 .block 之前，单类会被后面的 .block 覆盖） */
.block.block--tight { padding: clamp(36px, 4vw, 58px) 0; }
.block.block--tight .block__head { margin-bottom: 22px; padding-bottom: 14px; }
.block.block--tight .block__body { padding: clamp(22px, 2.4vw, 32px); }


/* --------------------------------------------------------------------------
   6. 首页区块
   -------------------------------------------------------------------------- */

.blocks { padding-top: 8px; }

/* 区块是连续排布的，上下 padding 会叠加成两倍留白，比独立大 section 需要更紧的一档 */
.blocks > .block { padding: clamp(46px, 5vw, 76px) 0; }
.blocks > .block.block--tight { padding: clamp(30px, 3.2vw, 48px) 0; }

.block { padding: var(--sec-pad) 0; background: var(--bg); }
.block:nth-child(even) { background: var(--card); }
.blocks .block:first-child { background: var(--card); }
.block--latest, .block--cities, .block--related { background: var(--card); }
.blocks + .block--latest { border-top: 1px solid var(--line); }

.block__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.block__title {
    position: relative;
    padding-left: 17px;
    font-size: var(--fs-h2);
    letter-spacing: -.02em;
}

.block__title::before {
    content: "";
    position: absolute;
    left: 0; top: .2em;
    width: 5px; height: .95em;
    background: var(--brand);
    border-radius: 3px;
}

.block__title a:hover { color: var(--brand); }

.block__more {
    flex: none;
    display: inline-flex;
    align-items: center;
    font-size: 15.5px;
    color: var(--muted);
}

.block__more:hover { color: var(--brand); }

.block__body {
    padding: clamp(28px, 3vw, 44px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.block--richtext .block__body { background: var(--brand-soft); border-color: var(--brand-line); }
.blocks .block--richtext .block__body { background: var(--brand-soft); }

.block__figure img { border-radius: var(--radius); }
.block__figure figcaption { margin-top: 14px; color: var(--muted); }

/* 区块富文本（后台录入的 HTML） */
.rte > * + * { margin-top: 18px; }
.rte h2 { font-size: var(--fs-h2); }
.rte h3 { font-size: 22px; }
.rte h4 { font-size: var(--fs-h3); }
.rte p { line-height: var(--lh-body); }
.rte ul { display: grid; gap: 12px; }
.rte ul li { position: relative; padding-left: 22px; }
.rte ul li::before {
    content: "";
    position: absolute;
    left: 2px; top: .62em;
    width: 9px; height: 5px;
    border-left: 1.8px solid var(--brand);
    border-bottom: 1.8px solid var(--brand);
    transform: rotate(-45deg);
}
.rte ol { display: grid; gap: 12px; list-style: decimal; padding-left: 22px; }

/* 首页正文里的有序列表基本都是「办理流程」，默认 1.2.3. 太素，改成带圆形序号块的步骤卡。
   只作用于 .blocks，正文页的有序列表仍是普通列表。 */
.blocks .rte ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    list-style: none;
    padding: 0;
    counter-reset: step;
    margin-top: 4px;
}

.blocks .rte ol > li {
    counter-increment: step;
    position: relative;
    padding: 16px 18px 16px 56px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    line-height: var(--lh-body);
}

.blocks .rte ol > li::before {
    content: counter(step);
    position: absolute;
    left: 16px; top: 15px;
    width: 26px; height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 13.5px;
    font-weight: 600;
}
.rte a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.rte strong { color: var(--ink); }

/* 清单式（无封面资讯） */
.rows { display: grid; gap: 2px; }

.row { border-bottom: 1px dashed var(--line); }

.row__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: clamp(20px, 2.1vw, 26px) 0;
}

.row__title {
    font-size: 17.5px;
    letter-spacing: -.01em;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row__date { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.row__desc { margin: -8px 0 16px; font-size: 14.5px; color: var(--muted); line-height: 1.75; }
.row:hover .row__title { color: var(--brand); }

.row--cover .row__link { grid-template-columns: 176px minmax(0, 1fr) auto; align-items: start; gap: 22px; }
.row__thumb { display: block; overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 16 / 10; background: var(--brand-soft); }
.row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.row--cover .row__title { white-space: normal; line-height: 1.5; padding-top: 2px; }
.row--cover .row__desc { margin-left: 198px; }

/* 资讯时间线（首页无封面资讯块）
   双栏挂竖线：单栏 1200px 一行一条会把日期甩到视线之外，整块读起来像后台数据表 */
.tl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(30px, 4.6vw, 72px);
}

.tl__item {
    position: relative;
    padding: 0 0 26px 24px;
    border-left: 1px solid var(--line);
}

.tl__item::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 7px;
    width: 11px;
    height: 11px;
    border: 2px solid var(--brand-line);
    border-radius: 50%;
    background: var(--card);
    transition: border-color .2s ease;
}

/* 收掉竖线尾巴：最后一行两格不再往下引线，否则线在页面半空自己续一截 */
.tl__item:last-child,
.tl__item:nth-last-child(2) { border-left-color: transparent; }

.tl__date {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.tl__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -.01em;
    color: var(--ink);
    transition: color .18s ease;
}

.tl__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--muted);
}

.tl__item:hover::before { border-color: var(--brand); }
.tl__item:hover .tl__title { color: var(--brand); }

/* 指南问答卡（首页办理指南块）
   这类内容读者问的是「能不能办、要什么材料」，发布日期是噪音，所以只排问答两行 */
.qa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.qa__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 22px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.qa__link:hover { border-color: var(--brand-line); box-shadow: var(--shadow); transform: translateY(-2px); }
.qa__item:hover .qa__q { color: var(--brand); }

.qa__q {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink);
    transition: color .18s ease;
}

.qa__a {
    flex: 1;
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.qa__more {
    display: flex;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand);
}

/* 问答列表页（list_ask）：一屏一问，答案直接摊在卡片里
   与首页卡阵同一套结构，皮肤对 .qa__link 的覆写在这里同样生效 */
.qa--stack { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.qa--stack .qa__link { padding: 22px 24px 16px; }

.qa__mark {
    display: inline-block;
    margin-right: 9px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5;
    vertical-align: 2px;
}

.qa--stack .qa__q {
    -webkit-line-clamp: unset;
    overflow: visible;
    font-size: 18px;
    line-height: 1.6;
}

.qa--stack .qa__a {
    flex: none;
    margin-top: 10px;
    -webkit-line-clamp: 3;
    font-size: 15px;
}

.qa--stack .qa__foot {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
}

.qa--stack .qa__more { margin-top: 0; padding-top: 0; border-top: 0; margin-left: auto; }

.qa__date {
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* 图文列表页（list_media_wide）：封面当主角，卡片等大铺满整行
   组件只用令牌，所以皮肤不必各自再写一遍；无封面条目压线稿插画兜底 */
.media {
    display: grid;
    /* 显式四列而不是 auto-fit：条目不足四款时 auto-fit 会把空列收掉，卡片就被拉成两张大的 */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

.media__item { min-width: 0; }

.media__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.media__link:hover { border-color: var(--brand-line); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.media__link:hover .media__title { color: var(--brand); }

.media__fig {
    position: relative;
    display: block;
    flex: none;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: var(--brand-soft);
}

/* 封面脱离文档流：图片原生尺寸不该反过来决定卡片高度，裁切交给 object-fit，比例只由版式定 */
.media__fig img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media__fig--art .illu { width: 100%; height: 100%; }

.media__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 17px 18px 13px;
}

.media__title {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -.01em;
    color: var(--ink);
    transition: color .18s ease;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.media__desc {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.media__foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px dashed var(--line);
}

.media__date {
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.media__more {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand);
}

/* 全宽列表页（list_wide）：正文占满整行、双列索引式排布，不配右栏
   组件只用令牌，所以皮肤不必各自再写一遍 */
.wide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    /* 行距由条目自己的上边框与内边距提供，这里只留列间距 */
    gap: 0 var(--gap);
}

.wide__link {
    display: block;
    padding: 24px 0 26px;
    border-top: 1px solid var(--line);
}

.wide__date {
    display: block;
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.wide__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.01em;
    color: var(--ink);
    transition: color .18s ease;
}

.wide__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 9px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--muted);
}

.wide__more {
    display: inline-flex;
    align-items: center;
    margin-top: 13px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand);
}

.wide__link:hover .wide__title { color: var(--brand); }

/* 侧栏那份内容搬到页底横排：卡片样式沿用 aside-card，只改排布与外边距 */
.band { padding-bottom: clamp(56px, 6vw, 88px); }

.band__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--gap);
    align-items: start;
    padding-top: clamp(40px, 4.5vw, 56px);
    border-top: 1px solid var(--line);
}

.band__grid .aside-card { margin-bottom: 0; }

/* 服务导航条目一多就会高过另外两张卡，两列铺开才跟横排带子的比例相配 */
.band .aside-nav { columns: 2; column-gap: 26px; }
.band .aside-nav__item { break-inside: avoid; }

/* 卡片式（服务项目）
   auto-fit 而不是固定栏数：后台只放两三条时固定四栏会在右侧留下空槽，像没排完 */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-md); transform: translateY(-4px); }

.card__link { display: flex; flex-direction: column; padding: 26px 26px 20px; }

.card__media {
    display: block;
    margin: -26px -26px 20px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--brand-soft);
}

.card__media img { width: 100%; height: 100%; object-fit: cover; }

.card__title { font-size: 18.5px; font-weight: 600; color: var(--ink); }
.card__desc { margin-top: 11px; flex: 1; font-size: 14.5px; line-height: 1.75; color: var(--muted); }

.card__more {
    display: inline-flex;
    align-items: center;
    margin-top: 18px;
    font-size: 14px;
    color: var(--brand);
}

/* 资讯卡（首页最新 / 相关推荐） */
.posts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.posts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.post {
    padding: 26px 26px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.post:hover { border-color: var(--brand-line); box-shadow: var(--shadow-md); }

.post__link { display: block; }

.post:hover .post__title { color: var(--brand); }

.post__title {
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: -.01em;
    color: var(--ink);
    transition: color .18s ease;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.post__desc {
    margin-top: 11px;
    min-height: 51px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.post__meta {
    display: flex;
    gap: 14px;
    margin-top: 18px;
    padding-top: 13px;
    border-top: 1px dashed var(--line);
    font-size: 13.5px;
    color: var(--muted);
}

.post__views { margin-left: auto; }

/* 栏目标签墙 */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.cats__item a {
    display: block;
    height: 100%;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}

.cats__item b { display: block; font-size: 16px; color: var(--ink); }
.cats__item span { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.cats__item a:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.cats__item a:hover b { color: var(--brand); }

/* 标签组 */
.tags { display: flex; flex-wrap: wrap; gap: 10px; }

.tags li a {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    font-size: 14px;
    color: var(--text);
}

.tags li a:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.tags li.is-current a { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.tags .is-more { border-style: dashed; color: var(--muted); }

/* --------------------------------------------------------------------------
   7. 页头（栏目 / 单页 / 目录 / 搜索）
   -------------------------------------------------------------------------- */

.page-head {
    position: relative;
    padding: clamp(52px, 6vw, 84px) 0 clamp(40px, 4.4vw, 58px);
    background: var(--head-bg);
    color: var(--on-dark);
}

.page-head::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 26px),
        radial-gradient(900px 320px at 82% 12%, rgba(255, 255, 255, .10), transparent 62%);
}

.page-head > .container { position: relative; }

.page-head__title {
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--on-dark);
}

.page-head__desc {
    margin-top: 14px;
    max-width: 820px;
    font-size: 16.5px;
    color: rgba(255, 255, 255, .78);
}

.page-head__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.page-head__hint { margin-top: 14px; font-size: 13.5px; color: rgba(255, 255, 255, .64); }
.page-head__hint a { color: rgba(255, 255, 255, .86); }
.page-head__hint a:hover { color: var(--on-dark); }

.page-head .btn--solid { background: var(--on-dark-surface); border-color: var(--on-dark-surface); color: var(--brand-ink); }
.page-head .btn--solid:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--brand-ink); }
.page-head .btn--line { border-color: rgba(255, 255, 255, .46); color: var(--on-dark); }
.page-head .btn--line:hover { border-color: var(--on-dark); background: rgba(255, 255, 255, .1); color: var(--on-dark); }

.subnav {
    display: none;
    margin-top: 22px;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.subnav li { flex: none; }

.subnav a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    color: rgba(255, 255, 255, .84);
    font-size: 14px;
    white-space: nowrap;
}

.subnav a:hover { border-color: rgba(255, 255, 255, .55); color: var(--on-dark); }

.subnav .is-active a { border-color: var(--on-dark-surface); background: var(--on-dark-surface); color: var(--brand-ink); }

/* 两栏布局 */
.layout { display: grid; gap: var(--gap); padding-top: clamp(44px, 5vw, 64px); padding-bottom: clamp(64px, 7vw, 96px); }
.layout--side { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.layout--article { padding-top: clamp(40px, 4.5vw, 56px); }
.layout__main { min-width: 0; }
.layout__aside { position: sticky; top: 96px; min-width: 0; }

/* --------------------------------------------------------------------------
   8. 文章详情
   -------------------------------------------------------------------------- */

.article__head { padding-bottom: 30px; border-bottom: 1px solid var(--line); }

.article__cat {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 11px;
    border-radius: 4px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 13px;
}

.article__title {
    font-size: clamp(27px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.02em;
}

.article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--muted);
}

.article__meta li { display: inline-flex; align-items: center; gap: 5px; }

/* AI 生成显式标识（法定要求）：压在正文之前，靠边框与底色成块，不靠颜色单独表意 */
.article__ai {
    margin: 22px 0 0;
    padding: 12px 16px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.75;
}

.article__lead {
    margin: 26px 0 0;
    padding: 18px 22px;
    border-left: 3px solid var(--brand);
    background: var(--brand-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: #3c5851;
    font-size: 17px;
    line-height: 1.8;
}

/* 问答详情页（show_ask）的一句话结论
   与导语的区别是它承担答案本身，所以做成四边框 + 标签，扫一眼这一框就读完了这条问答 */
.answer {
    margin-top: 26px;
    padding: 20px 24px;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius);
    background: var(--brand-soft);
}

.answer__label {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 10px;
    border-radius: 4px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
}

.answer__text {
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.8;
    color: var(--brand-ink);
}

.article__cover { margin-top: 28px; }
.article__cover img { width: 100%; border-radius: var(--radius-lg); }

.article__note {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
    font-size: 13px;
    color: var(--muted);
}

/* 正文排版 */
.prose {
    margin-top: 34px;
    font-size: 17px;
    line-height: 1.9;
    color: #2c3743;
    word-wrap: break-word;
}

.prose > * + * { margin-top: 24px; }
.prose--page { margin-top: 6px; }

.prose p { text-align: justify; }
.prose h2, .prose h3, .prose h4 { margin-top: 44px; color: var(--ink); line-height: 1.45; }
.prose h2 { font-size: 26px; padding-left: 13px; border-left: 4px solid var(--brand); }
/* 「详细解答」眉标：它是分区提示不是章节标题，跟着正文 h2 会抢掉真正的小标题 */
.prose h2.prose__cap {
    margin-top: 0;
    padding-left: 0;
    border-left: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--brand);
}
.prose h3 { font-size: 21px; }
.prose h4 { font-size: 18.5px; }
.prose h2 + p, .prose h3 + p, .prose h4 + p { margin-top: 14px; }

.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }

.prose ul, .prose ol { padding-left: 24px; }
.prose ol { list-style: decimal; }
.prose ul { list-style: none; }

.prose ul > li { position: relative; padding-left: 6px; }
.prose ul > li::before {
    content: "";
    position: absolute;
    left: -14px; top: .72em;
    width: 6px; height: 6px;
    background: var(--brand);
    border-radius: 50%;
}

.prose li + li { margin-top: 8px; }

.prose blockquote {
    padding: 16px 20px;
    border-left: 3px solid var(--brand-line);
    background: var(--brand-soft);
    color: #46565b;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.prose blockquote > * + * { margin-top: 10px; }

.prose img { margin: 4px auto; border-radius: var(--radius-sm); }

.prose table {
    width: 100%;
    font-size: 15px;
    border: 1px solid var(--line-strong);
}

.prose th, .prose td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--brand-soft); color: var(--ink); font-weight: 600; }
.prose tbody tr:nth-child(even) td { background: #fafbfc; }

.prose pre, .prose code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
}

.prose code { padding: 2px 6px; border-radius: 4px; background: #f1f3f5; color: #b03a48; }
.prose pre { padding: 16px 18px; overflow-x: auto; border-radius: var(--radius-sm); background: #f4f6f7; }
.prose pre code { padding: 0; background: none; color: inherit; }

.prose hr { height: 1px; margin: 28px 0; border: 0; background: var(--line); }

.prose figure img { margin-bottom: 8px; }
.prose figcaption { font-size: 13px; color: var(--muted); text-align: center; }

/* 咨询浮层 */
.callout {
    margin-top: 34px;
    padding: 22px 24px;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius);
    background: var(--brand-soft);
}

.callout__title { font-size: 17px; font-weight: 600; color: var(--ink); }
.callout__text { margin-top: 6px; font-size: 14px; color: #4b5f5a; }
.callout .btn { margin-top: 14px; }
.callout__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.callout__acts .btn { margin-top: 0; }

/* 上下篇 */
.arrownav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 26px;
}

.arrownav__item {
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}

.arrownav__item--right { text-align: right; }

.arrownav__label { display: block; font-size: 12px; color: var(--muted); }

.arrownav__link {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.arrownav__link.is-empty { color: #b3bcc5; }
.arrownav__link:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   9. 侧栏卡片
   -------------------------------------------------------------------------- */

.aside-card {
    padding: 26px;
    margin-bottom: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.aside-card:last-child { margin-bottom: 0; }

.aside-card__title {
    position: relative;
    padding-left: 13px;
    margin-bottom: 16px;
    font-size: 18px;
    letter-spacing: -.015em;
}

.aside-card__title::before {
    content: "";
    position: absolute;
    left: 0; top: .24em;
    width: 5px; height: .95em;
    background: var(--brand);
    border-radius: 3px;
}

.aside-nav > .aside-nav__item + .aside-nav__item { margin-top: 2px; }

.aside-nav__link {
    display: block;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
}

.aside-nav__item.is-active > .aside-nav__link {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

.aside-nav__link:hover { background: var(--bg); color: var(--brand); }

.aside-nav__sub {
    margin: 2px 0 6px;
    padding-left: 12px;
    border-left: 1px dashed var(--line-strong);
}

.aside-nav__sub li a {
    display: block;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--muted);
    border-radius: var(--radius-sm);
}

.aside-nav__sub li a:hover { color: var(--brand); }
.aside-nav__sub li.is-active a { color: var(--brand); font-weight: 600; }
.aside-nav--plain > li + li { border-top: 1px dashed var(--line); }

.aside-list li + li { margin-top: 10px; }

.aside-list li {
    position: relative;
    padding-left: 14px;
    font-size: 14px;
    line-height: 1.65;
}

.aside-list li::before {
    content: "";
    position: absolute;
    left: 0; top: .68em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--brand-line);
}

.aside-card--tel { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-dark); }
.aside-card--tel .aside-card__title { color: rgba(255, 255, 255, .8); }
.aside-card--tel .aside-card__title::before { background: var(--accent); }

.aside-tel {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--on-dark);
}

.aside-tip { margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.aside-card--tel .btn--solid { background: var(--on-dark-surface); border-color: var(--on-dark-surface); color: var(--brand-ink); }
.aside-card--tel .btn--solid:hover { background: var(--accent-soft); border-color: var(--accent-soft); }

/* 深底卡片里的次要按钮：ghost 的品牌绿描边在这块底色上几乎没有对比度 */
.aside-card--tel .btn--ghost { border-color: rgba(255, 255, 255, .5); color: var(--on-dark); }
.aside-card--tel .btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: var(--on-dark); color: var(--on-dark); }

.aside-card--url .aside-url {
    font-size: 12px;
    color: var(--muted);
    word-break: break-all;
    line-height: 1.7;
}

.tags--side { gap: 8px; }
.tags--side li a { padding: 4px 12px; font-size: 13px; }

/* --------------------------------------------------------------------------
   10. 分页
   -------------------------------------------------------------------------- */

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 36px;
}

.pager__total { font-size: 13.5px; color: var(--muted); }
.pager__total b { color: var(--ink); font-weight: 600; }

.pager__list { display: flex; flex-wrap: wrap; gap: 8px; }

.pager__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--text);
    font-size: 15px;
}

.pager__link:hover { border-color: var(--brand); color: var(--brand); }
.pager__item.is-active .pager__link { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.pager__item.is-disabled .pager__link { border-color: var(--line); background: #f7f8f9; color: #b6bdc6; pointer-events: none; }
.pager__gap span { display: inline-flex; height: 42px; align-items: center; padding: 0 2px; color: var(--muted); }

/* --------------------------------------------------------------------------
   11. 空状态 / 搜索结果 / 联系方式
   -------------------------------------------------------------------------- */

.empty {
    padding: 62px 24px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    text-align: center;
}

.empty__title { font-size: 19px; color: var(--ink); }
.empty__text { margin-top: 10px; color: var(--muted); }
.empty__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.empty .btn--line { border-color: var(--line-strong); color: var(--text); }
.empty .btn--line:hover { border-color: var(--brand); color: var(--brand); }

.result-count { margin-bottom: 10px; font-size: 14px; color: var(--muted); }
.result-count b { color: var(--brand); }
.result-count__city { color: var(--muted); }

.search--page {
    max-width: 620px;
    margin-top: 18px;
    border-radius: 999px;
}

.search--page input { flex: 1; height: 48px; padding: 0 20px; font-size: 15px; }
.search--page button { height: 48px; padding: 0 28px; border-radius: 999px; font-size: 15px; }

.contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--line);
    overflow: hidden;
}

.contact__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--card);
}

.contact__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    width: 84px;
    font-size: 13px;
    color: var(--muted);
}

.contact__value { color: var(--ink); }
.contact__value--tel { font-size: 18px; font-weight: 700; color: var(--brand); letter-spacing: .3px; }

/* --------------------------------------------------------------------------
   12. 城市分站目录
   -------------------------------------------------------------------------- */

.city-section { padding: 34px 0 0; }
.city-section:first-child { padding-top: 8px; }

.city-section__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 18px;
}

.city-section__title { font-size: 20px; }
.city-section__note { font-size: 13px; color: var(--muted); }

.city-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.city-card a {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}

.city-card b { display: block; font-size: 17px; color: var(--ink); }
.city-card span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.city-card em { display: block; margin-top: 8px; font-size: 14px; font-style: normal; color: var(--brand); font-weight: 600; }
.city-card a:hover { border-color: var(--brand-line); box-shadow: var(--shadow-sm); }
.city-card.is-current a { border-color: var(--brand); background: var(--brand-soft); }

.province { display: grid; gap: 1px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); overflow: hidden; }

.province__row {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 20px;
    padding: 18px 22px;
    background: var(--card);
}

.province__head { display: flex; flex-direction: column; gap: 2px; }
.province__name { font-size: 17px; font-weight: 600; color: var(--ink); }
.province__name:hover { color: var(--brand); }
.province__count { font-size: 12px; color: var(--muted); }

.province__list { display: flex; flex-wrap: wrap; gap: 8px 6px; align-content: flex-start; }
.province__city { font-size: 14px; }
.province__city > a { padding: 3px 8px; border-radius: 4px; color: var(--text); }
.province__city > a:hover { background: var(--brand-soft); color: var(--brand); }
.province__city.is-current > a { background: var(--brand); color: var(--on-brand); }
.province__kids { margin-left: 2px; font-size: 12px; color: var(--muted); }
.province__kids a { margin-left: 6px; }
.province__kids a:hover { color: var(--brand); }

.letters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }

.letters li a {
    display: inline-flex;
    width: 32px; height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    font-size: 14px;
}

.letters li a:hover { border-color: var(--brand); color: var(--brand); }
.letters__title { margin: 18px 0 10px; font-size: 16px; color: var(--brand); }

/* --------------------------------------------------------------------------
   13. 页脚
   -------------------------------------------------------------------------- */

.cta-band { position: relative; overflow: hidden; background: var(--brand); color: var(--on-brand); }

.cta-band__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: clamp(32px, 3.6vw, 48px) clamp(20px, 3.4vw, 44px);
}

/* 压一张同色线稿：八套皮肤共用，只把 --illu-* 覆成白色半透明，不必为每套皮肤另存图 */
.cta-band__art {
    --illu-line: rgba(255, 255, 255, .55);
    --illu-soft: rgba(255, 255, 255, .1);
    --illu-accent: rgba(255, 255, 255, .3);
    --illu-card: rgba(255, 255, 255, .14);
    position: absolute;
    top: 50%;
    right: clamp(4px, 4vw, 72px);
    width: clamp(220px, 23vw, 330px);
    transform: translateY(-50%);
    opacity: .55;
    pointer-events: none;
}

.cta-band__text { min-width: 0; }
.cta-band__title { font-size: 26px; font-weight: 700; letter-spacing: -.015em; color: var(--on-brand); }
.cta-band__sub { margin-top: 8px; max-width: 640px; font-size: 15.5px; color: rgba(255, 255, 255, .78); }

.cta-band__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 999px;
    background: var(--on-dark-surface);
    color: var(--brand-ink);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .5px;
}

.cta-band__btn:hover { background: var(--accent-soft); color: var(--brand-ink); }

.footer { background: #17232a; color: #97a6ab; }

.footer a { color: #c2cfd2; }
.footer a:hover { color: var(--on-dark); }

.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr 1.4fr;
    gap: 56px;
    padding: clamp(56px, 6vw, 80px) 0 clamp(30px, 3.2vw, 44px);
}

.footer__brand { font-size: 22px; font-weight: 700; color: var(--on-dark); letter-spacing: .3px; }

.footer__col { min-width: 0; }

.footer__intro { margin-top: 16px; font-size: 14.5px; line-height: 1.9; color: #8b999e; }
.footer__line { margin-top: 9px; font-size: 13.5px; color: #7d8b90; }
.footer__title { margin-bottom: 18px; font-size: 16px; font-weight: 600; color: #dfe8ea; }

.footer__list { display: grid; gap: 12px; font-size: 14.5px; }

.footer__list--tags { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.footer__list--tags .is-more { color: #6f7d82; text-decoration: underline; text-underline-offset: 3px; }
.footer__list--tags .is-more:hover { color: var(--on-dark); }

.footer__contact { display: grid; gap: 12px; font-size: 14px; }
.footer__contact li { display: flex; align-items: flex-start; gap: 8px; }
.footer__contact svg { margin-top: 4px; color: #5d7a75; }
.footer__contact a { color: #dfe8ea; }

.links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 13px;
}

.links__label { color: #6f7d82; }
.links__list { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.links__list a { color: #8b999e; }
.links__list a:hover { color: var(--on-dark); }

.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .08); background: #131e24; }

.footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 24px;
    font-size: 13px;
    color: #77858a;
}

/* 统计徽标挪到版权文字左侧，两者同行居中对齐 */
.footer__copyright { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.footer__dot { color: #4c585c; }
.footer__icp { color: #8b999e; }
.footer__icp--police { display: inline-flex; align-items: center; gap: 5px; }
.footer__police-icon { flex: none; width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; }
/* 标识整句本就是页脚链接配色，只把产品名加粗一档，不引入新字号新色值，皮肤无需各自覆写 */
.footer__credit-name { font-weight: 600; }

/* 第三方统计的徽标 / 计数文字收进底栏，随小字配色，不允许撑开这一行 */
.footer__stat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #6c7a7f; }
.footer__stat img { max-height: 18px; width: auto; vertical-align: middle; }
.footer__stat a { color: #6c7a7f; }
.footer__stat script { display: none; }

/* --------------------------------------------------------------------------
   14. 浮动元素：回到顶部 / 移动端快捷条
   -------------------------------------------------------------------------- */

.backtop {
    position: fixed;
    right: 22px; bottom: 90px;
    z-index: 80;
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--brand);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.backtop.is-on { opacity: 1; visibility: visible; transform: none; }
.backtop:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

.m-bar {
    display: none;
    position: fixed;
    right: 0; bottom: 0; left: 0;
    z-index: 90;
    border-top: 1px solid rgba(0, 0, 0, .06);
    background: var(--card);
    padding-bottom: env(safe-area-inset-bottom);
}

.m-bar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 0;
    border: 0;
    background: none;
    font-size: 12px;
    color: var(--text);
}

.m-bar__item--call { color: var(--on-brand); background: var(--brand); }
.m-bar__item:active { opacity: .85; }

/* 悬浮客服：右侧竖排按钮列，悬停或聚焦就地展开 */
.svc {
    position: fixed;
    right: 18px;
    bottom: 150px;
    z-index: 85;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.svc__rail { display: flex; flex-direction: column; align-items: stretch; gap: 1px; }

.svc__item { position: relative; }

.svc__btn {
    display: flex;
    width: 60px;
    padding: 10px 0 8px;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: var(--shadow-sm);
}

.svc__item:first-child .svc__btn { border-radius: var(--radius) var(--radius) 0 0; }
.svc__item:last-child .svc__btn { border-radius: 0 0 var(--radius) var(--radius); }
.svc__item + .svc__item .svc__btn { border-top: 1px solid rgba(255, 255, 255, .16); }
.svc__btn:hover, .svc__item:focus-within .svc__btn { background: var(--brand-dark); color: var(--on-brand); }

.svc__label { display: block; margin-top: 2px; font-size: 11px; line-height: 1.2; letter-spacing: .5px; }

/* 命中层盖住整格，让「留言」项可点且不破坏悬停展开 */
.svc__hit {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
}

.svc__pop {
    position: absolute;
    right: calc(100% + 10px);
    bottom: -1px;
    z-index: 2;
    display: flex;
    width: 224px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 14px 16px;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.svc__item:hover .svc__pop, .svc__item:focus-within .svc__pop {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.svc__pop--qr { align-items: center; text-align: center; }
.svc__pop--qr img { display: block; width: 168px; height: 168px; border-radius: var(--radius-sm); }

.svc__tel { font-size: 17px; font-weight: 700; color: var(--brand); letter-spacing: .3px; word-break: break-all; }
.svc__tel--sm { font-size: 14px; font-weight: 600; }
.svc__line { font-size: 12px; line-height: 1.6; color: var(--muted); }

.svc__act {
    display: inline-block;
    margin-top: 5px;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--brand);
    color: var(--on-brand);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.svc__act:hover { background: var(--brand-dark); color: var(--on-brand); }

/* 在线留言面板：:target 负责无 JS 兜底，.is-open 由脚本接管开合与焦点 */
.svc-panel { position: fixed; inset: 0; z-index: 100; display: none; }
.svc-panel:target, .svc-panel.is-open { display: block; }

.svc-panel__mask { position: absolute; inset: 0; background: rgba(6, 55, 48, .48); }

.svc-panel__card {
    position: absolute;
    right: 96px;
    bottom: 44px;
    width: 384px;
    max-width: calc(100vw - 36px);
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 20px 22px 22px;
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 18px 48px rgba(6, 55, 48, .24);
}

.svc-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.svc-panel__title { font-size: 17px; font-weight: 600; color: var(--ink); }

.svc-panel__close {
    display: grid;
    flex: none;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: var(--muted);
}

.svc-panel__close:hover { background: var(--bg); color: var(--ink); }
.svc-panel__note { margin: 8px 0 16px; font-size: 13px; line-height: 1.75; color: var(--muted); }

.svc-field { margin-bottom: 12px; }
.svc-label { display: block; margin-bottom: 5px; font-size: 13px; color: var(--text); }
.svc-req { color: #b4232c; }

.svc-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--card);
    font: inherit;
    color: var(--ink);
}

.svc-input:focus { border-color: var(--brand); outline: 2px solid rgba(11, 95, 82, .16); }
.svc-textarea { height: auto; min-height: 74px; padding: 10px 12px; line-height: 1.7; resize: vertical; }

/* 蜜罐：不能用 display:none，脚本会跳过隐藏域；移出可视区即可 */
.svc-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); left: -9999px; }

.svc-panel__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }

.svc-submit {
    display: inline-flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--brand);
    color: var(--on-brand);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.svc-submit:hover { background: var(--brand-dark); }
.svc-submit:disabled { opacity: .6; cursor: progress; }
.svc-submit__tip { font-size: 12px; color: var(--muted); }
.svc-submit__tip a { color: var(--brand); font-weight: 600; }

.svc-form__msg { margin-top: 14px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.7; }
.svc-form__msg.is-ok { border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand-dark); }
.svc-form__msg.is-bad { border: 1px solid #f3c9cb; background: #fdecec; color: #b4232c; }
.svc-form__msg a { color: inherit; font-weight: 700; text-decoration: underline; }
.svc-form__privacy { margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--muted); }

/* --------------------------------------------------------------------------
   15. 广告位：弹窗 / 右下角浮窗 / 对联 / 内容内
   --------------------------------------------------------------------------
   层叠顺序与既有浮动元素对齐，避免互相压住：
   对联 82 < 浮窗 84 < 悬浮客服栏 85 < 移动端快捷条 90 < 客服面板 100 < 弹窗 120
   圆角、阴影、主色全部走 :root 令牌，皮肤只换色就能跟着变。
   「广告」角标与关闭按钮由模板无条件输出，样式上也不给隐藏它们留口子。
   -------------------------------------------------------------------------- */

.ad { position: fixed; z-index: 84; }

/* 弹窗展示期间锁滚动，由 JS 挂在 <html> 上 */
.ad-lock { overflow: hidden; }

.ad__mark {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: rgba(255, 255, 255, .92);
    font-size: 11px;
    line-height: 18px;
    color: var(--muted);
    letter-spacing: .5px;
}

.ad__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--card);
    color: var(--muted);
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}

.ad__close:hover { color: var(--ink); border-color: var(--line-strong); background: var(--bg); }
.ad__close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.ad__img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }

.ad__text { min-width: 0; }

.ad__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.ad__sub { margin: 0 0 8px; font-size: 14px; line-height: 1.7; color: var(--muted); }

/* ---- 后台自填的整段版式：皮肤只兜住溢出，长什么样一律听它自己的内联 style ---- */
.ad__body { min-width: 0; margin-bottom: 14px; }
.ad__body > :last-child { margin-bottom: 0; }
.ad__body img { max-width: 100%; height: auto; }
.ad__card > .ad__body { margin-bottom: 10px; }
.ad--inline > .ad__body { flex: 1 1 auto; margin-bottom: 0; padding-right: 46px; }
/* 自填版式自带底色与边框，皮肤那条盒子退掉，不盒中盒 */
.ad--inline.ad--own { padding: 0; border: 0; border-radius: 0; background: none; }
/* 228 是给「图 + 两行字」留的宽度，自填版式要排一活动内容，给到 300 */
.ad--float.ad--own { width: 300px; }

/* ---- 弹窗：默认带 hidden，前台判定频次额度后才摘掉 ---- */
.ad--popup {
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ad--popup[hidden] { display: none; }

.ad__mask { position: absolute; inset: 0; background: rgba(6, 24, 32, .52); }

.ad__dialog {
    position: relative;
    width: 560px;
    max-width: 100%;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-lg);
}

.ad__pad { padding: 20px 22px 24px; }
.ad__pad > .ad__mark { margin-bottom: 12px; }
.ad__pad > .ad__cover { display: block; margin-bottom: 14px; }
.ad__pad > .ad__text { margin-bottom: 14px; }
.ad__pad > .ad__cta { display: inline-flex; }

.ad--popup .ad__close {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* ---- 右下角浮窗：桌面贴左下，让开右侧竖排客服栏 ---- */
.ad--float {
    right: auto;
    bottom: 18px;
    left: 18px;
    width: 228px;
}

.ad__card {
    position: relative;
    padding: 14px 16px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-md);
}

.ad__card > .ad__mark { margin-bottom: 10px; }
.ad__card > .ad__cover { display: block; margin-bottom: 10px; }
.ad__card > .ad__text { margin-bottom: 10px; }
.ad__card > .ad__text:last-child { margin-bottom: 0; }
.ad__card > .ad__cta { display: inline-flex; font-size: 14px; }

.ad--float > .ad__close {
    position: absolute;
    top: -14px;
    right: 0;
    width: 28px;
    height: 28px;
    box-shadow: var(--shadow-sm);
}

/* ---- 对联：左右两列贴边，要求视口有富余侧槽才出现 ---- */
.ad--couplet { z-index: 82; }

.ad--couplet[hidden] { display: none; }

.ad__rail {
    position: fixed;
    top: var(--ad-top, 150px);
    width: clamp(56px, calc((100vw - var(--max)) / 2 - 24px), 120px);
}

.ad__rail--l { left: max(12px, calc((100vw - var(--max)) / 2 - 132px)); }
.ad__rail--r { right: max(12px, calc((100vw - var(--max)) / 2 - 132px)); }

.ad__rail > .ad__cover { display: block; }
.ad__rail > .ad__mark { margin-top: 6px; }
.ad__rail > .ad__close { margin-top: 6px; }

@media (max-width: 1400px) {
    .ad--couplet { display: none; }
}

/* ---- 内容页正文内：横向一条，与正文排版明确分开 ---- */
.ad--inline {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}

.ad--inline > .ad__mark { position: absolute; top: 10px; right: 12px; }
.ad--inline > .ad__thumb { flex: 0 0 168px; width: 168px; }
.ad--inline > .ad__text { flex: 1 1 auto; padding-right: 46px; }
.ad--inline > .ad__cta { flex: 0 0 auto; }

/* ---- 无图版式：没配图也要是一条完整广告，而不是留一块空白 ---- */
.ad--text .ad__pad > .ad__text,
.ad--text .ad__card > .ad__text {
    padding: 16px 18px;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
}

.ad--text .ad__pad > .ad__text .ad__title { font-size: 22px; color: var(--brand-ink); }
.ad--text .ad__card > .ad__text .ad__title { font-size: 17px; color: var(--brand-ink); }
.ad--text .ad__pad > .ad__text .ad__sub,
.ad--text .ad__card > .ad__text .ad__sub { margin-bottom: 0; color: var(--text); }
.ad--text .ad__pad > .ad__cta,
.ad--text .ad__card > .ad__cta { display: flex; justify-content: center; width: 100%; }

/* ---- 对联无图：竖排文字边条，配色跟随皮肤主色 ---- */
.ad__railtext {
    display: block;
    padding: 24px 11px;
    border-radius: var(--radius-sm);
    background: var(--brand);
    box-shadow: var(--shadow);
    color: var(--on-brand);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 8px;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.ad__rail > .ad__cover:hover .ad__railtext { background: var(--brand-dark); }

/* --------------------------------------------------------------------------
   16. 响应式
   -------------------------------------------------------------------------- */

/* 行业方案包常配 6~8 个顶部栏目，这个区间先压缩导航密度，再进入 992px 的抽屉布局，
   否则品牌区会被挤到换行、导航条高度跳动 */
@media (max-width: 1280px) and (min-width: 993px) {
    .navbar__inner { gap: 18px; }
    .nav { gap: 0; }
    .nav__link { padding: 8px 9px; font-size: 15px; }
    .brand__name { font-size: 19px; }

    .media { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
    .posts, .cats, .city-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }

    .hero__grid { grid-template-columns: minmax(0, 1fr); }
    .hero__art { max-width: 470px; margin: 36px auto 0; }
    .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
    :root { --gap: 26px; }

    .posts, .posts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .media { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* 时间线收单栏：竖线只在最后一项断掉，双栏那套「断两格」的规则会留出一个豁口 */
    .tl { grid-template-columns: minmax(0, 1fr); }
    .tl__item:nth-last-child(2) { border-left-color: var(--line); }

    /* 窄屏转化条要整行铺文字，压底线稿会盖在字上 */
    .cta-band__art { display: none; }

    /* 折叠主导航为抽屉 */
    .nav, .search--inline { display: none; }
    .burger { display: block; }

    .nav-toggle:checked ~ .nav-drawer { display: block; }

    .nav-drawer {
        position: absolute;
        top: 100%; right: 0; left: 0;
        display: none;
        max-height: 72vh;
        overflow-y: auto;
        padding: 14px 24px 22px;
        border-bottom: 1px solid var(--line);
        background: var(--card);
        box-shadow: var(--shadow);
    }

    .nav-drawer__link {
        display: block;
        padding: 12px 4px;
        border-bottom: 1px dashed var(--line);
        font-size: 16px;
        color: var(--ink);
    }

    .nav-drawer__link.is-active { color: var(--brand); font-weight: 600; }

    .nav-drawer__tel {
        display: block;
        margin-top: 16px;
        padding: 12px;
        border-radius: var(--radius-sm);
        background: var(--brand);
        color: var(--on-brand);
        text-align: center;
        font-size: 16px;
        font-weight: 600;
    }

    .search--drawer { margin-bottom: 8px; }
    .search--drawer input { flex: 1; width: auto; }
    .search--drawer button { padding: 0 18px; }

    /* 两栏 → 单栏，侧栏下移 */
    .layout--side { grid-template-columns: minmax(0, 1fr); }
    .layout__aside { position: static; }
    .subnav { display: flex; }
    .aside-card--tel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
    .aside-card--tel .aside-card__title { grid-column: 1 / -1; }
    .aside-card--tel .btn--block { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .container { padding-left: 16px; padding-right: 16px; }
    body { font-size: 15px; }

    .topbar { display: none; }

    .navbar__inner { gap: 12px; min-height: 62px; }
    .brand__mark { width: 34px; height: 34px; border-radius: 8px; }
    .brand__name { font-size: 18px; }
    .brand__sub { font-size: 11px; }

    .hero__inner { padding: 44px 16px 48px; }
    .hero__title, .hero__rte h1, .hero__rte h2 { font-size: 25px; }
    .hero__lead, .hero__rte p { font-size: 15px; line-height: 1.8; }
    .hero__actions { gap: 10px; }
    .hero__actions .btn { flex: 1 1 46%; height: 42px; padding: 0 14px; font-size: 14px; }

    /* 装饰插画在手机上没有信息量，只隐藏它；后台真传了横幅图仍然要出 */
    .hero__art .illu { display: none; }
    .trust { grid-template-columns: minmax(0, 1fr); }
    /* 页首在窄屏收得很短，再负边距压边就会盖住页首最后一行 */
    .trust--lift { margin-top: 22px; }

    .block { padding: 36px 0; }
    .block__head { margin-bottom: 18px; }
    .block__title { font-size: 20px; }
    .block__body { padding: 20px 18px; }

    .cards, .posts, .posts--3, .cats, .city-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .post__desc { min-height: 0; }

    .qa { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .qa__link { padding: 16px 16px 12px; }
    .qa__q { font-size: 15.5px; }
    .qa__a { font-size: 13px; }

    .qa--stack .qa__link { padding: 16px 16px 12px; }
    .qa--stack .qa__q { font-size: 16px; line-height: 1.55; }
    .qa--stack .qa__a { margin-top: 8px; font-size: 13.5px; }
    .qa--stack .qa__foot { gap: 10px; padding-top: 12px; }
    .qa__mark { padding: 1px 5px; font-size: 11.5px; vertical-align: 1px; }

    /* 图文列表窄屏收单栏：300px 的最小列宽放不下，两栏会把标题挤成三行 */
    .media { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .media__body { padding: 16px 16px 12px; }
    .media__title { font-size: 16.5px; }
    .media__desc { margin-top: 7px; font-size: 13.5px; }
    .media__foot { gap: 10px; padding-top: 11px; }

    /* 全宽列表窄屏收单栏：340px 的最小列宽放不下，会把页面顶出横向滚动 */
    .wide { grid-template-columns: minmax(0, 1fr); }
    .wide__link { padding: 16px 0 18px; }
    .wide__title { margin-top: 6px; font-size: 16.5px; }
    .wide__desc { margin-top: 7px; font-size: 13.5px; }
    .wide__more { margin-top: 11px; }

    .band { padding-bottom: 44px; }
    .band__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 32px; }

    .tl__item { padding: 0 0 20px 18px; }
    .tl__item::before { left: -6px; width: 9px; height: 9px; }
    .tl__title { font-size: 15.5px; }
    .tl__desc { font-size: 13px; margin-top: 6px; }

    .row__link { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 13px 0; }
    .row__title { font-size: 15px; }
    .row__date { font-size: 12px; }
    .row__desc { font-size: 13px; margin-bottom: 12px; }
    .row--cover .row__link { grid-template-columns: 92px minmax(0, 1fr); }
    .row--cover .row__desc { margin-left: 102px; }
    .row__thumb { aspect-ratio: 4 / 3; }

    .page-head { padding: 34px 0 28px; }
    .page-head__title { font-size: 24px; }
    .page-head__desc { margin-top: 12px; font-size: 15px; }
    .page-head__actions { margin-top: 20px; }
    .page-head .btn { flex: 1 1 46%; height: 44px; font-size: 15px; }
    .layout { padding-top: 34px; padding-bottom: 44px; }

    .prose { font-size: 16px; line-height: 1.85; }
    .prose h2.prose__cap { font-size: 14px; }
    .answer { padding: 16px 18px; }
    .answer__text { font-size: 16px; }
    .callout__acts .btn { flex: 1 1 46%; }
    .prose table { display: block; overflow-x: auto; white-space: nowrap; }
    .arrownav { grid-template-columns: minmax(0, 1fr); }
    .arrownav__item--right { text-align: left; }
    .contact { grid-template-columns: minmax(0, 1fr); }
    .contact__label { width: 78px; }

    .province__row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; }
    .province__head { flex-direction: row; align-items: baseline; gap: 10px; }

    .cta-band__inner { padding: 24px 16px; }
    .cta-band__title { font-size: 19px; }
    .cta-band__btn { width: 100%; justify-content: center; font-size: 18px; }

    .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 34px 0 20px; }
    .footer__bottom-inner { flex-direction: column; align-items: flex-start; padding: 14px 16px; }

    .pager { flex-direction: column; align-items: stretch; }
    .pager__list { justify-content: center; }
    .pager__link { min-width: 34px; height: 34px; padding: 0 9px; }

    .backtop { right: 14px; bottom: 78px; }

    /* 广告位窄屏收口：浮窗挪到右下并抬到移动端快捷条上方，弹窗收窄边距，内容内改纵向 */
    .ad--float { right: 12px; bottom: calc(62px + env(safe-area-inset-bottom)); left: auto; width: 148px; }
    .ad--popup { padding: 16px; }
    .ad__pad { padding: 16px 16px 18px; }

    .ad--inline { flex-direction: column; align-items: stretch; gap: 12px; }
    .ad--inline > .ad__thumb { flex: none; width: 100%; }
    .ad--inline > .ad__text { padding-right: 0; }
    .ad--inline > .ad__cta { align-self: flex-start; }

    /* 行业皮肤常在移动端另挂一条呼叫条，浮窗要压在它上面而不是叠在一起 */
    body.ua-mobile .ad--float { bottom: calc(62px + env(safe-area-inset-bottom)); }

    /* 悬浮客服：窄屏改走底部条，悬浮列会与内容抢空间 */
    .svc { display: none; }

    .svc-panel__card {
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-width: none;
        max-height: 88vh;
        border-radius: 14px 14px 0 0;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    body.ua-mobile { padding-bottom: 54px; }
    body.ua-mobile .m-bar { display: flex; }
}

@media (max-width: 420px) {
    .cards { grid-template-columns: minmax(0, 1fr); }
    .hero__actions .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   16. 打印（详情页只留正文）
   -------------------------------------------------------------------------- */

@media print {
    .topbar, .navbar, .crumbs-bar, .cta-band, .footer, .backtop, .m-bar, .svc, .svc-panel,
    .layout__aside, .callout, .arrownav, .pager, .hero__actions { display: none !important; }

    body { background: #fff; color: #000; font-size: 12pt; }
    .layout { display: block; padding: 0; }
    .prose { color: #000; }
    a { text-decoration: none; }
}