卫民CMS 组件库（活体样式指南）
本站所有新页面必须复用下列组件。组件基于 style.css 的设计令牌（主色 ≤ 2 种、SIL OFL 开源字体、过渡 .2s、浅色主题），不引入新硬编码色。设计分档：套餐A 直接套用本库（快、性价比），套餐B 在本库令牌之上做高端定制。
1. 按钮 Button
实心 / 幽灵 / 描边
主按钮 .btn 幽灵 .btn-ghost 描边 .btn-outline
幽灵/浅色按钮为深底专用（白字白框），须置于深色衬底或 Banner 内，见第 3 节；文字链接用 .btn-link。
2. 表单 Form
行内 / 输入组
字段结构：.field > .field__label + input/textarea/select + .field__hint；错误态加 .field.is-error（红框提示，可选配 .field__error 说明文案）。
3. 横幅 Banner
4. 案例 / 作品集卡片 Showcase
下列卡片与画廊均为已交付的真实客户站首屏，用于展示卡片与画廊组件的版式与交互效果。
结构：.showcase-card > .showcase-card__media(img + 可选 .tag) + .showcase-card__body。悬停图片放大 + 卡片上浮，已在 CSS 内置。
5. 徽章 / 标签 Badge & Tag
标签 .tag 新增 优化 修复 安全 性能 文档 依赖 部署
版本变更日志（/changelog.html）直接复用这些徽章区分变更类型。
6. 媒体子模块 Media
6.1 统一裁剪（aspect-ratio 工具）
6.2 画廊（自适应网格 + 悬停放大 + 点击放大）
画廊点击放大由 media.js 提供；.gallery__item 加 data-gallery 即启用。
6.3 WebP + 回退（picture 约定）
<picture class="picture"> <source srcset="/uploads/case-1.webp" type="image/webp"> <img src="/uploads/case-1.jpg" alt="案例实景" loading="lazy" width="800" height="450"> </picture>
规范：封面/画廊优先 WebP，<img> 必带 alt+width/height+loading="lazy"（首屏图除外）；水印用 .img-watermark + data-wm 属性。
7. 行动号召 & 工具类
间距工具：.mt-1~6 / .mb-1~6；文字：.text-brand / .text-muted / .text-center。