/* ========================================
   Anker.com.cn 风格 PbootCMS 模板 · 主样式表
   ----------------------------------------
   · 本文件是整个模板唯一的 CSS 文件，全站页面样式均在此维护
   · 主题通过 :root 中的 CSS 变量集中管理
     （主色 --anker-primary: #0066cc，辅以深色/灰阶/阴影等设计令牌）
   · 版心最大宽度 1680px（.anker-container / .anker-header-inner / .anker-footer-inner）
   · 由 html/common/head.html 以 style.css?v=版本号 形式引入，
     版本号用于模板更新后强制浏览器拉取新文件、防止旧缓存
   ----------------------------------------
   目录（章节编号与下文各章节横幅一一对应，按 Ctrl+F 搜「NN ·」可跳转）：
     01 重置与基础     02 容器          03 头部导航      04 Hero Banner
     05 通用区块       06 按钮          07 生活记录      08 个人简介
     09 个人博客       10 特色区块      11 友情链接      12 内页 Banner
     13 列表页布局     14 详情页        15 产品详情      16 单页内容
     17 搜索结果       18 页脚          19 返回顶部      20 响应式断点
     21 在线留言       22 网站地图      23 通用滚动弹出动画
   ----------------------------------------
   移动端断点约定：≤1024px（平板 + 手机「桌面版网站」模式，约 980px 逻辑宽度）
   与 ≤768px（真实窄屏）两级；手机端规则必须写在 ≤1024px 断点，不能只写 ≤768px
   ======================================== */

/* ========================================
   01 · 重置与基础（全站所有页面共用；元素默认样式重置 + :root 设计令牌）
   ======================================== */
/* 全局 reset：清掉浏览器默认内外边距并统一盒模型。
   注意：这一 reset 会同时冲掉编辑器内容的默认排版（段落间距、列表序号、表格边框等），
   因此后文 .anker-single-body / .anker-product-detail-desc 有一组"还原默认排版"的规则 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Anker 主题色 */
    --anker-primary: #0066cc;
    --anker-primary-dark: #0052a3;
    --anker-accent: #5ED4AD;
    --anker-gradient: linear-gradient(135deg, #7687F3 0%, #4DA8F5 50%, #A3DFCE 100%);
    --anker-dark: #1D1D1F;
    --anker-black: #000000;
    --anker-white: #FFFFFF;
    --anker-gray: #F5F5F7;
    --anker-gray-2: #E8E8ED;
    --anker-text: #1D1D1F;
    --anker-text-light: #6E6E73;
    --anker-text-lighter: #86868B;
    --anker-border: #D2D2D7;
    --anker-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --anker-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
}

html {
    /* 全站锚点跳转平滑滚动（配合 main.js 的锚点处理） */
    scroll-behavior: smooth;
}

body {
    /* 字体栈：优先苹果系统字体，其次鸿蒙/苹方/微软雅黑等中文字体 */
    font-family: -apple-system, BlinkMacSystemFont, "HarmonyOS Sans", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: var(--anker-text);
    background: var(--anker-white);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

ul,
ol {
    list-style: none;
}

img {
    /* 图片默认响应式：不超容器宽度、保持比例、消除 inline 基线缝隙 */
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   02 · 容器（全站所有页面共用；.anker-container 版心）
   ======================================== */
/* 全站通用版心：1680px 最大宽度 + 两侧 24px 安全边距，用于各页面的内容区 */
.anker-container {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ========================================
   03 · 头部导航（html/common/head.html，全站共用）
   ======================================== */
/* 固定悬浮于页面顶部：初始透明压在首页 Hero 视频/大图之上；
   向下滚动时由 main.js 添加 .scrolled 类切换为磨玻璃白底 */
.anker-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* 顶部时透明，浮于 Hero 之上 */
    background: transparent;
    z-index: 1000;
    border-bottom: 1px solid transparent;
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* 向下滑动后：磨玻璃底色 + 阴影 */
.anker-header.scrolled {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--anker-shadow);
}

/* 头部内层：与版心同宽，flex 左右分布（Logo | 导航 | 右侧操作区） */
.anker-header-inner {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo 区域 */
.anker-logo {
    display: flex;
    align-items: center;
    margin-right: 20px;
    flex-shrink: 0;
}

.anker-logo a {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.anker-logo img {
    height: 42px;
    width: auto;
    max-width: none;
    object-fit: contain;
    flex-shrink: 0;
    /* 顶部透明状态下把 Logo 反白（filter 强制转纯白），保证在深色 Hero 上可见 */
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

/* Logo 双图切换：电脑端显示 PC 版，手机端显示移动版 */
.anker-logo img.anker-logo-pc {
    display: block;
}

.anker-logo img.anker-logo-mobile {
    display: none;
}

/* 滚动后 logo 恢复原色 */
.anker-header.scrolled .anker-logo img {
    filter: none;
}

/* 地区 / 语言 flag 占位（色块占位） */
.anker-flag {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 20px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.anker-flag:hover {
    background: rgba(255, 255, 255, 0.14);
}

.anker-header.scrolled .anker-flag:hover {
    background: rgba(0, 102, 204, 0.06);
}

/* 旗帜图标：纯 CSS 渐变色块模拟，未使用图片 */
.anker-flag-icon {
    width: 26px;
    height: 18px;
    border-radius: 3px;
    background: linear-gradient(135deg, #de2910 0%, #de2910 48%, #ffde00 48%, #ffde00 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.anker-flag-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.92);
}

.anker-header.scrolled .anker-flag-label {
    color: var(--anker-text);
}

/* 一级导航：居中占据头部剩余空间 */
.anker-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.anker-nav-list {
    display: flex;
    gap: 8px;
}

.anker-nav-item {
    /* 作为二级导航弹层 .anker-subnav 的定位参照 */
    position: relative;
}

.anker-nav-item>a {
    display: block;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 500;
    /* 顶部透明时白字，压在深色 Hero 上 */
    color: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.anker-nav-item>a:hover,
.anker-nav-item.active>a {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
}

/* 滚动后导航文字恢复深色 */
.anker-header.scrolled .anker-nav-item>a {
    color: var(--anker-text);
}

.anker-header.scrolled .anker-nav-item>a:hover,
.anker-header.scrolled .anker-nav-item.active>a {
    color: var(--anker-primary);
    background: rgba(0, 102, 204, 0.06);
}

/* 二级导航（弹层：鼠标悬停一级项时向下淡入展开，纯 CSS 实现无 JS） */
.anker-subnav {
    position: absolute;
    top: 100%;
    left: 50%;
    /* 默认向下偏移 10px，展开时回到 0，形成"上浮"动效 */
    transform: translateX(-50%) translateY(10px);
    background: rgba(219, 234, 254, 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow: var(--anker-shadow-lg);
    padding: 8px;
    min-width: 100px;
    /* 默认隐藏（透明 + 不可见），hover 父级时显示 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    border: 1px solid rgba(0, 102, 204, 0.15);
}

.anker-nav-item:hover .anker-subnav {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.anker-subnav-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.anker-subnav-item {
    padding: 8px 12px;
    font-size: 14px;
    color: var(--anker-text);
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-align: center;
}

.anker-subnav-item:hover {
    background: rgba(255, 255, 255, 0.75);
    color: var(--anker-primary);
}

/* 右侧操作区（搜索框等） */
.anker-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.anker-search {
    position: relative;
    display: flex;
    align-items: center;
}

.anker-search-input {
    width: 200px;
    height: 36px;
    padding: 0 40px 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 18px;
    font-size: 14px;
    /* 顶部透明时半透明白底 + 白字，与 Hero 深色背景协调 */
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    outline: none;
    transition: all 0.2s ease;
}

.anker-search-input::placeholder {
    color: rgba(255, 255, 255, 0.85);
}

/* 滚动后搜索框恢复浅灰底 */
.anker-header.scrolled .anker-search-input {
    border-color: var(--anker-border);
    background: var(--anker-gray);
    color: var(--anker-text);
}

.anker-header.scrolled .anker-search-input::placeholder {
    color: var(--anker-text-lighter);
}

/* 聚焦时变白底：默认白字是压在 Hero 深色视频上的，
   一旦聚焦成白色底，文字必须同时改为深色，否则白字白底看不见 */
.anker-search-input:focus {
    border-color: var(--anker-primary);
    background: var(--anker-white);
    color: var(--anker-text);
    width: 240px;
}

.anker-search-input:focus::placeholder {
    color: var(--anker-text-lighter);
}

/* 搜索按钮：绝对定位叠在输入框右侧内 */
.anker-search-btn {
    position: absolute;
    right: 4px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.anker-header.scrolled .anker-search-btn {
    color: var(--anker-text-light);
}

/* 输入框获得焦点时，按钮图标在白色底上改为深色 */
.anker-search:focus-within .anker-search-btn {
    color: var(--anker-text-light);
}

.anker-search-btn:hover {
    color: var(--anker-primary);
}

/* 移动端菜单按钮（汉堡图标，桌面端隐藏，1024px 以下显示） */
.anker-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
}

.anker-mobile-toggle span {
    width: 24px;
    height: 2px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.anker-header.scrolled .anker-mobile-toggle span {
    background: var(--anker-text);
}

/* 汉堡 → X 的变形动画（main.js 点击时切换 .active） */
.anker-mobile-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.anker-mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}

.anker-mobile-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* 移动端导航（全屏抽屉，桌面端隐藏；展开/收起动画见 1024px 媒体查询） */
.anker-mobile-nav {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--anker-white);
    z-index: 999;
    overflow-y: auto;
    padding: 20px;
}

.anker-mobile-nav ul {
    display: flex;
    flex-direction: column;
}

/* 仅一级菜单项加分隔线并作为箭头定位参照；二级菜单项单独设样式 */
.anker-mobile-nav>ul>li {
    position: relative;
    border-bottom: 1px solid var(--anker-gray-2);
}

/* 一级标题：固定 54px 行高、文字居中（固定行高保证展开子菜单后箭头仍对准标题行） */
.anker-mobile-nav>ul>li>a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    font-size: 16px;
    color: var(--anker-text);
    text-align: center;
}

.anker-mobile-nav li.active>a {
    color: var(--anker-primary);
}

/* 二级目录展开箭头：固定在标题行右侧，垂直居中；展开时箭头旋转 180° */
.anker-mobile-arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--anker-text-light);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.anker-mobile-arrow svg {
    transition: transform 0.3s ease;
}

.anker-mobile-nav>ul>li.open>.anker-mobile-arrow svg {
    transform: rotate(180deg);
}

/* 二级菜单：默认收起，父级 li.open 时展开；浅灰底与一级菜单区分。
   注意：隐藏规则需写成 .anker-mobile-nav .anker-mobile-sub（两个类），
   否则优先级低于上方 .anker-mobile-nav ul 的 display:flex 会导致子菜单常显 */
.anker-mobile-nav .anker-mobile-sub {
    display: none;
    background: var(--anker-gray-bg, #f5f5f5);
}

.anker-mobile-nav>ul>li.open>.anker-mobile-sub {
    display: block;
}

.anker-mobile-sub li a {
    display: block;
    padding: 13px 0;
    font-size: 14px;
    color: var(--anker-text-light);
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.anker-mobile-sub li:last-child a {
    border-bottom: none;
}

.anker-mobile-sub li a:active {
    color: var(--anker-primary);
}

/* ========================================
   04 · Hero Banner（index.html 首页顶部：视频层 + 轮播层）
   ======================================== */
/* 默认高度 72vh；播视频时由 main.js 加 .video-active 撑满全屏 */
.anker-hero {
    position: relative;
    height: 72vh;
    min-height: 480px;
    max-height: 720px;
    overflow: hidden;
    margin-top: 0;
    transition: height 0.6s ease;
}

/* 视频播放期间 hero 全屏，播完后移除该类回落到上面的高度 */
.anker-hero.video-active {
    height: 100vh;
    min-height: 560px;
    max-height: none;
}

/* 首页视频层（位于轮播图之上，播放结束后淡出） */
.anker-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    background: #1d1d1f;
    transition: opacity 0.6s ease;
    overflow: hidden;
}

/* 后台编辑器插入视频时常自动包一层 <p>，这里把它撑满以便视频铺满 */
.anker-hero-video>p {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
}

/* 视频强制铺满容器：编辑器可能输出固定 width/height 内联属性或样式，
   必须全部用 !important 覆盖才能保证全屏播放 */
.anker-hero .anker-hero-video video,
.anker-hero-video video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    display: block;
}

/* 隐藏可能出现的播放控制条（双保险） */
.anker-hero-video video::-webkit-media-controls,
.anker-hero-video video::-webkit-media-controls-enclosure {
    display: none !important;
}

/* 视频播完（main.js 加 .video-ended）后整个视频层淡出并禁用交互 */
.anker-hero.video-ended .anker-hero-video {
    opacity: 0;
    pointer-events: none;
}

/* 视频播放期间隐藏轮播控件 */
.anker-hero.video-active .anker-hero-dots,
.anker-hero.video-active .anker-hero-arrow {
    opacity: 0;
    pointer-events: none;
}

/* 视频右上角关闭按钮：点击后由 main.js 暂停视频并切到轮播；
   按钮是视频层子元素，视频播完淡出时随整层一起消失 */
.anker-hero-video-close {
    position: absolute;
    top: 88px;
    right: 32px;
    z-index: 3;
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--anker-white);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.anker-hero-video-close:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.06);
}

/* 轮播层位于视频之下 */
.anker-hero-swiper,
.anker-hero-dots,
.anker-hero-arrow {
    z-index: 2;
}

.anker-hero-swiper {
    width: 100%;
    height: 100%;
    position: relative;
    /* 垂直滚动交给浏览器、水平滑动交给 main.js 触摸手势；禁止拖拽时选中文本 */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

/* 轮播项：全部绝对定位叠放，main.js 通过 translateX 左右滑入/滑出 + opacity 淡入淡出来切换 */
.anker-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: transform 0.45s ease, opacity 0.45s ease;
    will-change: transform;
}

.anker-hero-slide.active {
    opacity: 1;
    z-index: 1;
    transform: translateX(0);
}

/* 轮播背景图：由模板输出内联 background-image */
.anker-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 遮罩层：铺满 Hero 的整层（本类仅负责定位与尺寸，未设背景色） */
.anker-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Hero 文案：垂直居中 */
.anker-hero-content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
}

.anker-hero-title {
    font-size: 56px;
    font-weight: 700;
    color: var(--anker-white);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.anker-hero-subtitle {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 32px;
    font-weight: 400;
}

/* 轮播控制 */
.anker-hero-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}

/* 指示点由 main.js 按轮播数量动态生成 */
.anker-hero-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 激活点拉长为胶囊形 */
.anker-hero-dots .dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--anker-white);
}

.anker-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--anker-white);
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
}

.anker-hero-arrow:hover {
    background: rgba(255, 255, 255, 0.35);
}

.anker-hero-prev {
    left: 32px;
}

.anker-hero-next {
    right: 32px;
}

/* ========================================
   05 · 通用区块（全站各 section 的通用骨架）
   ======================================== */
.anker-section {
    padding: 80px 0;
}

/* 浅灰底区块 */
.anker-section-gray {
    background: var(--anker-gray);
}

/* 渐变底区块（如首页特色区块） */
.anker-section-gradient {
    background: var(--anker-gradient);
    color: var(--anker-white);
}

/* 区块标题组：居中标题 + 副标题 */
.anker-section-head {
    text-align: center;
    margin-bottom: 48px;
}

.anker-section-title {
    font-size: 40px;
    font-weight: 700;
    color: inherit;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.anker-section-gradient .anker-section-title {
    color: var(--anker-white);
}

.anker-section-subtitle {
    font-size: 18px;
    color: var(--anker-text-light);
    font-weight: 400;
}

/* 区块底部"查看更多"按钮位 */
.anker-section-more {
    text-align: center;
    margin-top: 48px;
}

/* ========================================
   06 · 按钮（全站通用：主按钮/描边/浅色/浅描边四种变体）
   ======================================== */
/* 胶囊形按钮基类（border-radius: 980px 超大圆角） */
.anker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 980px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.anker-btn-primary {
    background: var(--anker-primary);
    color: var(--anker-white);
}

.anker-btn-primary:hover {
    background: var(--anker-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
}

.anker-btn-outline {
    background: transparent;
    color: var(--anker-primary);
    border-color: var(--anker-primary);
}

.anker-btn-outline:hover {
    background: var(--anker-primary);
    color: var(--anker-white);
}

.anker-btn-light {
    background: var(--anker-white);
    color: var(--anker-text);
}

.anker-btn-light:hover {
    background: var(--anker-gray);
    transform: translateY(-1px);
}

/* 用于深色/渐变底区块上的白色描边按钮 */
.anker-btn-outline-light {
    background: transparent;
    color: var(--anker-white);
    border-color: var(--anker-white);
}

.anker-btn-outline-light:hover {
    background: var(--anker-white);
    color: var(--anker-dark);
}

/* ========================================
   07 · 生活记录（index.html 首页"生活记录"tab 区；
   .anker-life-* 卡片仅首页使用；
   .anker-product-grid/-card 复用于 lifelist / productlist / workslist 列表页及详情页「相关推荐」）
   ======================================== */
/* 首页 4 列卡片网格 */
.anker-life-grid,
.anker-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* 列表页 3 列卡片网格 */
.anker-product-grid-list {
    grid-template-columns: repeat(3, 1fr);
}

.anker-life-card,
.anker-product-card {
    background: var(--anker-white);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.anker-life-card:hover,
.anker-product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--anker-shadow-lg);
}

/* 卡片封面：桌面端正方形（1/1）；作品/杂志卡片列表改 3/4 竖版，更像杂志封面 */
.anker-life-img,
.anker-product-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--anker-gray);
}

.anker-life-img img,
.anker-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* 列表页的作品/杂志卡片封面：3/4 竖版，展示杂志封面更合适 */
.anker-product-grid-list .anker-product-img {
    aspect-ratio: 3 / 4;
}

/* 首页「平面设计（期刊）」区（.anker-works）：封面为期刊/杂志图（原图约 0.74 宽高比，竖版），
   而 .anker-life-img 默认为正方形(1/1)，会把竖版封面裁掉上下大半；
   本区单独改为 3/4 竖版并 object-fit:contain——抬高展示框高度、完整显示整张封面不裁切；
   仅作用于本区，生活记录区等其它 .anker-life-* 卡片不受影响 */
.anker-works .anker-life-img {
    aspect-ratio: 3 / 4;
}

.anker-works .anker-life-img img {
    object-fit: contain;
}

/* 悬停时封面轻微放大 */
.anker-life-card:hover .anker-life-img img,
.anker-product-card:hover .anker-product-img img {
    transform: scale(1.05);
}

.anker-life-info,
.anker-product-info {
    padding: 20px;
}

.anker-life-title,
.anker-product-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--anker-text);
    margin-bottom: 8px;
    line-height: 1.3;
}

/* 摘要限制两行，超出省略号 */
.anker-life-desc,
.anker-product-desc {
    font-size: 14px;
    color: var(--anker-text-light);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 等高拉伸（修复蓝层起始位置）：网格行内卡片虽被拉伸到等高，
   但内部 <a> 与文字区默认只包住自身内容——文字少时文字区底部 ≠ 卡片底部，
   蓝层会从「文本盒底边」而不是展示层底边开始推入。
   让 card → link → info 全链 flex 纵向拉伸，info 底部恒等于卡片展示层底部 */
.anker-life-card {
    display: flex;
    flex-direction: column;
}

.anker-life-link {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.anker-life-img {
    flex-shrink: 0;
}

/* 生活记录卡片悬停：文字区背景由下向上推入主色蓝，标题/摘要同步变白；
   移开鼠标时伪元素向下退出（translateY 回到 100%），文字色过渡回默认色。
   过渡写在常态元素上（经验：写在 :hover 上离开时不会有动画） */
.anker-life-info {
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
}

.anker-life-info::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--anker-primary);
    transform: translateY(100%);
    /* flex 等高拉伸后 info 高度常为小数像素，translateY(100%) 栅格化时会在底边露出约 1px 蓝纹；
       非悬停态直接不绘制伪元素彻底消除蓝纹。visibility 带 0.45s 延迟：
       进入悬停时立即显示再上移，离开时等「向下退出」位移动画播完后才隐藏，观感不变 */
    visibility: hidden;
    transition: transform 0.45s ease, visibility 0s linear 0.45s;
}

/* 标题与摘要浮于蓝色背景层之上；只追加定位/过渡，字号颜色沿用上面的规则 */
.anker-life-title,
.anker-life-desc {
    position: relative;
    z-index: 1;
    transition: color 0.45s ease;
}

.anker-life-card:hover .anker-life-info::before {
    transform: translateY(0);
    /* 悬停立即显示；配合常态规则的延迟隐藏，保证进入/退出两段动画都完整可见 */
    visibility: visible;
    transition: transform 0.45s ease, visibility 0s;
}

/* 选择器优先级（0,3,0）高于深色区块的 0,2,0 标题色规则，保证蓝底上文字一定为白 */
.anker-life-card:hover .anker-life-title,
.anker-life-card:hover .anker-life-desc {
    color: var(--anker-white);
}

/* 生活记录区：左侧标题 + 右侧二级栏目 tab */
.anker-life-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

.anker-section-head-left {
    text-align: left;
    flex-shrink: 0;
}

.anker-section-head-left .anker-section-title {
    margin-bottom: 8px;
}

/* tab 按钮组（点击由 main.js 按 data-scode 切换对应 panel） */
.anker-life-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.anker-life-tab {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--anker-text-light);
    background: var(--anker-white);
    border: 1px solid var(--anker-border);
    border-radius: 980px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    user-select: none;
}

.anker-life-tab:hover {
    color: var(--anker-primary);
    border-color: var(--anker-primary);
}

.anker-life-tab.active {
    background: var(--anker-primary);
    color: var(--anker-white);
    border-color: var(--anker-primary);
}

/* 面板：默认仅显示激活项 */
.anker-life-panel {
    display: none;
}

.anker-life-panel.active {
    display: block;
}

/* 无 JS 时兜底：首面板可见（main.js 初始化完成后会给容器加 .is-inited，
   此后只由 JS 控制显隐；JS 未加载/报错时 :not(.is-inited) 生效，保证至少第一组内容可见） */
.anker-life-panels:not(.is-inited) .anker-life-panel:first-child {
    display: block;
}

/* 滑动条的左右切换按钮：默认隐藏（桌面端本区是 4 列网格，不需要翻页），
   仅手机/平板（≤1024px）横向滑动条视图下显示，见本文件 ≤1024px 媒体查询 */
.anker-life-nav {
    display: none;
}

/* 滚动进入视口弹出动画已改为通用实现，样式规则统一放在本文件末尾
   （见"通用滚动进入视口弹出动画"一节），可复用于标题/栏目/产品/文章标题/内容等各类元素 */

/* ========================================
   08 · 个人简介（index.html 首页：左媒体右文字；
   媒体框先静音播放文章正文里的视频，播完淡出后显示缩略图）
   ======================================== */
.anker-profile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* 媒体框：框高由 aspect-ratio（取缩略图原始比例 531×506）固定，不依赖子元素撑高。
   原先只靠 .anker-profile-photo 的 height:100% 撑高，而父级自身高度又是不确定的 auto，
   形成"子要父高、父要子高"的死循环：桌面 Chrome 会容错地把 100% 当 auto 解析（所以看不出问题），
   但手机端 Chrome / Brave 会把它解析成 0 → 整个框塌陷成很扁的一条甚至完全不显示。
   加了 aspect-ratio 后框高恒定，照片和视频层（绝对定位 inset:0）在任何浏览器下都能铺满 */
.anker-profile-media {
    position: relative;
    aspect-ratio: 531 / 506;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--anker-shadow-lg);
    background: var(--anker-gray);
}

/* 照片铺满媒体框：与视频层同一套定位方式（absolute + inset:0），尺寸完全由框决定。
   这里【不能】再用"正常流 + height:100%"：部分手机浏览器会把静态 img 的百分比高度解析成 0
   （即使框本身已有确定高度也照样解析失败），表现为视频播完淡出后框内空空、照片不显示；
   视频层之所以在手机上正常，正是因为它用的是 inset:0 而不是百分比高度 */
.anker-profile-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 视频层默认不渲染：无 JS 或文章没有视频时直接看到照片（安全降级，
   与全站滚动动画"JS 缺失不隐藏内容"的原则一致）；
   main.js 找到视频并清理完正文后才加 .is-playing 显示本层 */
.anker-profile-video {
    display: none;
}

.anker-profile-media.is-playing .anker-profile-video {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #1d1d1f;
    transition: opacity 0.6s ease;
}

/* 播完（main.js 加 .is-ended）后视频层淡出，露出下方照片并禁用交互。
   除 opacity 外还必须加 visibility:hidden 彻底不渲染本层：手机浏览器常把 <video>
   交给硬件叠加层绘制，父级 opacity 淡出对叠加层无效，视频最后一帧会一直盖住照片
   （表现为"播完图片不显示"）；visibility 延迟 0.6s 再切换，保证淡出动画正常播放 */
.anker-profile-media.is-ended .anker-profile-video {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

/* 编辑器插入的 video 可能带固定 width/height/controls，统一铺满并去控制条 */
.anker-profile-media .anker-profile-video video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    display: block;
}

.anker-profile-media .anker-profile-video video::-webkit-media-controls,
.anker-profile-media .anker-profile-video video::-webkit-media-controls-enclosure {
    display: none !important;
}

.anker-profile-text .anker-section-title {
    text-align: left;
}

.anker-profile-desc {
    font-size: 16px;
    line-height: 1.8;
    color: var(--anker-text-light);
    margin: 24px 0 32px;
}

/* ========================================
   09 · 个人博客（index.html 首页博客卡片区）
   ======================================== */
.anker-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.anker-blog-card {
    background: var(--anker-white);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.anker-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--anker-shadow-lg);
}

/* 博客封面：16:10 横版裁切 */
.anker-blog-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--anker-gray);
}

.anker-blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.anker-blog-card:hover .anker-blog-img img {
    transform: scale(1.05);
}

.anker-blog-info {
    padding: 20px;
}

/* 日期组合：大号"日" + 小号"年-月" */
.anker-blog-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.anker-blog-day {
    font-size: 28px;
    font-weight: 700;
    color: var(--anker-primary);
    line-height: 1;
}

.anker-blog-ym {
    font-size: 13px;
    color: var(--anker-text-lighter);
}

/* 标题限两行 */
.anker-blog-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--anker-text);
    margin-bottom: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.anker-blog-desc {
    font-size: 14px;
    color: var(--anker-text-light);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   10 · 特色区块（index.html 首页渐变底功能区）
   ======================================== */
.anker-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* 磨玻璃半透明白卡片，叠在渐变背景上 */
.anker-feature-item {
    text-align: center;
    padding: 40px 24px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.anker-feature-item:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.15);
}

.anker-feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--anker-white);
}

.anker-feature-item h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--anker-white);
    margin-bottom: 12px;
}

.anker-feature-item p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 16px;
}

.anker-feature-link {
    font-size: 14px;
    color: var(--anker-white);
    font-weight: 500;
}

.anker-feature-link:hover {
    text-decoration: underline;
}

/* ========================================
   11 · 友情链接（首页底部友链区）
   ======================================== */
.anker-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.anker-link-item {
    padding: 10px 24px;
    background: var(--anker-gray);
    border-radius: 8px;
    font-size: 14px;
    color: var(--anker-text-light);
    transition: all 0.2s ease;
}

.anker-link-item:hover {
    background: var(--anker-primary);
    color: var(--anker-white);
}

/* ========================================
   12 · 内页 Banner（所有内页顶部横幅 + 面包屑，
   列表页/详情页/单页共用）
   ======================================== */
.anker-inner-banner {
    position: relative;
    height: 320px;
    margin-top: 0;
    overflow: hidden;
}

.anker-inner-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* 兜底图：当 sort:pic 和 list:ico 都为空时显示（相对 CSS 文件 ../images/） */
    background-image: url('../images/banner-inner.svg');
}

/* 黑 → 主题蓝的渐变遮罩，保证白字可读 */
.anker-inner-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 102, 204, 0.4) 100%);
}

.anker-inner-banner .anker-container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.anker-inner-banner-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--anker-white);
    margin-bottom: 16px;
}

.anker-breadcrumb {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 8px;
}

.anker-breadcrumb a:hover {
    color: var(--anker-white);
}

/* ========================================
   13 · 列表页布局（bloglist/newslist/workslist/productlist/lifelist
   等列表页：左侧栏导航 + 右侧内容）
   ======================================== */
.anker-list-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
}

/* 左侧栏盒子 */
.anker-sidebar-box {
    background: var(--anker-gray);
    border-radius: 12px;
    overflow: hidden;
}

.anker-sidebar-title {
    padding: 20px 24px;
    font-size: 18px;
    font-weight: 600;
    background: var(--anker-dark);
    color: var(--anker-white);
}

.anker-sidebar-nav {
    padding: 8px;
}

.anker-sidebar-nav li a {
    display: block;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--anker-text);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.anker-sidebar-nav li a:hover,
.anker-sidebar-nav li.active a {
    background: var(--anker-primary);
    color: var(--anker-white);
}

/* 新闻列表（bloglist/newslist 列表页：左图右文横向条目） */
.anker-news-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.anker-news-list-item {
    background: var(--anker-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.anker-news-list-item:hover {
    box-shadow: var(--anker-shadow);
}

.anker-news-list-link {
    display: flex;
    gap: 24px;
}

/* 左侧缩略图固定 240px 宽，高度随条目撑开 */
.anker-news-list-img {
    width: 240px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--anker-gray);
}

.anker-news-list-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.anker-news-list-item:hover .anker-news-list-img img {
    transform: scale(1.05);
}

.anker-news-list-info {
    flex: 1;
    padding: 20px 20px 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.anker-news-list-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--anker-text);
    margin-bottom: 10px;
    line-height: 1.4;
}

/* 摘要限两行 */
.anker-news-list-desc {
    font-size: 14px;
    color: var(--anker-text-light);
    line-height: 1.6;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.anker-news-list-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--anker-text-lighter);
}

.anker-news-list-more {
    color: var(--anker-primary);
    font-weight: 500;
}

/* 分页（PbootCMS 分页标签输出的分页条；
   .current/.active/.page-num-current 兼容分页插件多种当前页类名，如 .page-num） */
.anker-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.anker-pagination a,
.anker-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--anker-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--anker-text);
    background: var(--anker-white);
    transition: all 0.2s ease;
}

.anker-pagination a:hover {
    border-color: var(--anker-primary);
    color: var(--anker-primary);
}

.anker-pagination .current,
.anker-pagination .active,
.anker-pagination .page-num-current {
    background: var(--anker-primary);
    border-color: var(--anker-primary);
    color: var(--anker-white);
}

/* ========================================
   14 · 详情页（blog_show 等文章详情：标题/元信息/正文/标签/上下篇）
   ======================================== */
.anker-detail {
    max-width: 900px;
    margin: 0 auto;
    /* 防横向溢出：长英文单词/URL/代码串在任意屏宽下强制断行；
       这两个属性可继承，详情头标题、发布信息、正文、上下篇链接全部覆盖 */
    overflow-wrap: break-word;
    word-break: break-word;
}

.anker-detail-head {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--anker-gray-2);
}

.anker-detail-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--anker-text);
    margin-bottom: 16px;
    line-height: 1.3;
}

.anker-detail-meta {
    display: flex;
    justify-content: center;
    gap: 24px;
    font-size: 14px;
    color: var(--anker-text-lighter);
}

.anker-detail-body {
    font-size: 16px;
    line-height: 1.8;
    color: var(--anker-text);
}

/* 正文里原生 PDF 元素（编辑器直接插入的 <a href=".pdf"> / <iframe src=".pdf"> 等）全部隐藏：
   main.js 会在下方独立生成 PDF.js 自绘的预览卡，不再需要正文里的原生 PDF 图标/标题/链接。
   用 scoped 选择器限定在 .anker-product-detail-desc 内，加 :not() 排除 PDF 预览卡后代——
   main.js 生成的下载按钮 .anker-product-pdf-open、自绘的 PDF 页面等都在 .anker-product-pdf-item 里，
   被排除后不会被这条规则误伤；只有编辑器原生的 PDF 元素才会被隐藏。
   !important 压过编辑器输出的内联 style="display:inline-flex"；
   后缀属性选择器 + i 忽略大小写，覆盖 .pdf / .PDF / .Pdf 等变体 */
.anker-product-detail-desc a[href$=".pdf" i]:not(.anker-product-pdf-item *),
.anker-product-detail-desc iframe[src$=".pdf" i]:not(.anker-product-pdf-item *),
.anker-product-detail-desc embed[src$=".pdf" i]:not(.anker-product-pdf-item *),
.anker-product-detail-desc object[data$=".pdf" i]:not(.anker-product-pdf-item *) {
    display: none !important;
}

/* 正文图片响应式：height 加 !important 的理由同 .anker-product-detail-desc img——
   压过编辑器输出的内联 height，避免窄屏下宽度被压缩而高度不变、导致图片纵向拉伸 */
.anker-detail-body img {
    max-width: 100%;
    height: auto !important;
    border-radius: 8px;
    margin: 16px 0;
}

/* 正文里的视频/嵌入/表格防溢出：后台编辑器常输出固定 width 属性或内联样式，
   超过正文容器宽就会把整页撑出横向滚动条；
   这里统一限制媒体不超过容器宽，表格改为块级并自带横向滚动（在表格内部滚，而不是撑破页面） */
.anker-detail-body video,
.anker-detail-body iframe {
    max-width: 100%;
}

.anker-detail-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* 正文里的代码块防溢出：从网页复制粘贴的内容常带 data-mce-style 惰性属性，
   源站的 overflow:auto 并不会真正生效，长代码行（white-space:pre 且不可断行）
   会裸溢出把整页撑出横向滚动；这里强制限宽并在代码块内部横向滚动。
   pre 盒子本身宽度不超容器，元素矩形扫描抓不到，只能靠 scrollWidth 实测发现 */
.anker-detail-body pre,
.anker-single-body pre {
    max-width: 100%;
    overflow-x: auto;
}

.anker-detail-body p {
    margin-bottom: 16px;
}

.anker-detail-body h2,
.anker-detail-body h3 {
    margin: 24px 0 12px;
}

.anker-detail-footer {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--anker-gray-2);
}

.anker-detail-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.anker-tag {
    padding: 6px 16px;
    background: var(--anker-gray);
    border-radius: 16px;
    font-size: 13px;
    color: var(--anker-text-light);
}

.anker-tag:hover {
    background: var(--anker-primary);
    color: var(--anker-white);
}

/* 上一篇 / 下一篇 */
.anker-detail-prevnext {
    margin-top: 32px;
    padding: 20px;
    background: var(--anker-gray);
    border-radius: 12px;
}

.anker-detail-prevnext p {
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--anker-text-light);
}

.anker-detail-prevnext p:last-child {
    margin-bottom: 0;
}

.anker-detail-prevnext a:hover {
    color: var(--anker-primary);
}

/* ========================================
   15 · 产品详情（works_show/product 详情页：正文 + 右侧图集）
   ======================================== */
/* 两列网格：正文占 3/4（3fr），右侧图集占 1/4（1fr）——加大正文/PDF 区域、缩小图集列；
   标题/副标题通过 grid-column: 1 / -1 跨满两列居中显示在顶部。
   注：≤1024px 断点内本网格会塌成单列，故此处比例只作用于桌面端 */
.anker-product-detail {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

/* 右侧图集：sticky 吸附在顶部 100px 处（避开固定头部），
   滚动长正文时图集 + 底部按钮一起保持可见；
   内部改为纵向 flex，主图 / 缩略图 / 按钮依次排列 */
.anker-product-gallery {
    position: sticky;
    top: 100px;
    align-self: start;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 主图：3:4 竖版比例（杂志封面式构图），配合 object-fit: cover 裁切填充；
   与下方缩略图的间距现在由父级 gallery 的 flex gap 控制，不再单独写 margin-bottom */
.anker-product-main-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 16px;
    background: var(--anker-gray);
}

.anker-product-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 缩略图容器：由 main.js 从正文图片去重后动态生成（#productThumbs） */
.anker-product-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* 缩略图 72x96 同样为 3:4，与主图比例一致，避免裁切跳变 */
.anker-product-thumb {
    width: 72px;
    height: 96px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.anker-product-thumb:hover,
.anker-product-thumb.active {
    border-color: var(--anker-primary);
}

.anker-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* grid-column: 1 / -1：跨满两列，使标题在整行居中 */
.anker-product-detail-title {
    grid-column: 1 / -1;
    font-size: 32px;
    font-weight: 700;
    color: var(--anker-text);
    margin-bottom: 12px;
    text-align: center;
}

.anker-product-detail-subtitle {
    grid-column: 1 / -1;
    font-size: 18px;
    color: var(--anker-text-light);
    margin-bottom: 24px;
    text-align: center;
}

/* 正文（编辑器输出内容，排版还原规则见下方"单页内容"一节的共用选择器） */
.anker-product-detail-desc {
    font-size: 16px;
    line-height: 1.8;
    color: var(--anker-text);
    margin-bottom: 32px;
}

/* 图集列底部按钮组：电话订阅 / 后台留言订阅 / 返回列表 始终并排在同一行、绝不换行；
   桌面端图集列是 1fr（1680 容器下约 390px），比三个按钮的自然宽度窄，
   故收紧内边距（.anker-btn 默认 32px → 8px）与字号（15px → 13px），让三个按钮压缩进一行 */
.anker-product-detail-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 8px;
}

/* 三个按钮等分图集列宽度：flex-grow 均分剩余空间撑满整行、flex-shrink 在窄列下等比压缩；
   min-width:0 允许压缩到内容宽度以下；white-space:nowrap 保证文字不折行 */
.anker-product-detail-actions .anker-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 8px;
    font-size: 13px;
    white-space: nowrap;
}

/* PDF 附件预览卡：正文里出现指向 .pdf 的链接/嵌入内容时，由 main.js 扫描生成到容器 #productPdf。
   每张卡顶部是文件名 + 「新窗口打开 / 下载」链接，下方是阅读框：
   滚近视口时自动由 PDF.js 在页内自绘（懒加载，无需点击），不使用 iframe */
.anker-product-pdf-item {
    margin: 24px 0;
    border: 1px solid var(--anker-border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    cursor: zoom-in;
    /* 提示：点击卡片可放大阅读（逻辑见 main.js「PDF 阅读框点击放大」） */
    /* 移动端：单击卡片 = 我们自己的"放大"手势，不是浏览器双击缩放；
       touch-action: manipulation 关掉双击缩放（仍保留双指捏合），
       避免手机"桌面版网站"模式下 user-scalable=no 被忽略、双击把整页放大且不复位 */
    touch-action: manipulation;
}

.anker-product-pdf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--anker-gray);
    border-bottom: 1px solid var(--anker-border);
}

.anker-product-pdf-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--anker-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anker-product-pdf-open {
    flex: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--anker-primary);
    white-space: nowrap;
}

/* 头部右侧动作区：下载链接 + 放大后的关闭按钮，两者并排靠右 */
.anker-product-pdf-head-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

/* 放大后的关闭按钮：平时隐藏，仅在 .anker-product-pdf-item.is-zoom 时出现（见下方放大浮层规则） */
.anker-pdf-zoom-close {
    display: none;
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-size: 18px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    /* 关闭按钮同样禁用双击缩放，单击即关闭 */
}

.anker-pdf-zoom-close:hover {
    background: #d8d8dd;
}

/* PDF 阅读框（桌面端）：高度随屏幕自适应（100vh - 140px，140px 预留固定头部与上下留白），
   下限 1200px；内容超出时框内纵向滚动。
   注：这里用 PDF.js 在页内自绘（逻辑见 main.js），手机端浏览器同样能正常预览，
   因此不再像早先那样在窄屏把整个阅读框隐藏 */
.anker-product-pdf-frame {
    position: relative;
    width: 100%;
    height: calc(100vh - 140px);
    min-height: 1200px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--anker-gray);
    /* 只允许纵向拖动阅读：禁用双指捏合缩放，否则在放大阅读框内捏合会把
       "整页"字号/视口一起放大，关闭浮层后浏览器仍停留在放大态、无法复位 */
    touch-action: pan-y;
}

/* 自绘页面网格：默认两列 = 双页并排（书页式）；data-cols=1 时单列（窄屏）。
   页面为 canvas，显示宽度已由 main.js 按容器列宽换算，这里只兜底限制不溢出 */
.anker-pdf-pages {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    align-items: start;
    justify-items: center;
    background: #fff;
}

.anker-pdf-pages[data-cols="1"] {
    grid-template-columns: 1fr;
}

/* 单页占位框：canvas 尚未渲染时呈现为一张白纸（高度已按页面比例预留，滚动不跳动） */
.anker-pdf-page {
    line-height: 0;
    background: #fff;
    box-shadow: 0 0 0 1px #ececf0;
}

.anker-pdf-page canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 渲染中提示：绝对定位脱离文档流，避免把网格当成一个格子 */
.anker-product-pdf-frame.is-loading::before {
    content: 'PDF 加载中…';
    position: absolute;
    left: 0;
    right: 0;
    top: 24px;
    text-align: center;
    font-size: 14px;
    color: #8a8a8f;
    pointer-events: none;
    z-index: 2;
}

.anker-pdf-tip {
    margin: 32px 24px;
    text-align: center;
    font-size: 14px;
    color: #8a8a8f;
}

/* ===== PDF 阅读框点击放大（浮层）=====
   点击 PDF 预览卡时，整张卡浮到屏幕正中央并放大到接近全屏，方便在正文 3fr 窄栏里读双页 PDF；
   放大后卡片右上角出现关闭按钮（.anker-pdf-zoom-close），点它或点压暗遮罩即还原。
   逻辑见 main.js「PDF 阅读框点击放大」一节。
   is-zoom 期间卡片脱离文档流，由 .anker-pdf-zoom-spacer 顶住其原位高度，
   避免正文列塌陷、下方内容整体跳上去 */
.anker-product-pdf-item.is-zoom {
    position: fixed;
    inset: 3vh 3vw;
    z-index: 2001;
    margin: 0;
    cursor: default;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}

/* 只有放大态才显示右上角关闭按钮 */
.anker-product-pdf-item.is-zoom .anker-pdf-zoom-close {
    display: flex;
}

/* 放大后阅读框占满卡片剩余高度，纵向滚动手感同原栏内阅读 */
.anker-product-pdf-item.is-zoom .anker-product-pdf-frame {
    flex: 1;
    height: auto;
    min-height: 0;
}

/* 原位的透明占位块：高度 = 放大前卡片高度，保证放大/还原时页面布局不跳动 */
.anker-pdf-zoom-spacer {
    width: 100%;
}

/* 压暗遮罩：突出浮层，点击即关闭。
   未放大时用 visibility:hidden（而非仅 opacity:0）彻底移出移动端视口命中区域，
   避免这个覆盖全屏的 fixed 图层干扰触摸/视口缩放 */
.anker-pdf-zoom-mask {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(17, 17, 20, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease;
    pointer-events: none;
    /* 放大态下遮罩铺满视口：禁用双击缩放与双指捏合缩放（pan-x pan-y 不含 pinch-zoom），
       避免在遮罩上捏合把整页缩放且关闭后不复位；未放大时 visibility:hidden 收不到触摸，无副作用 */
    touch-action: pan-x pan-y;
}

.anker-pdf-zoom-mask.is-on {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 相关推荐区 */
.anker-related {
    margin-top: 60px;
}

.anker-related-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 24px;
}

/* 「往期推荐」相关文章网格：比通用 4 列更密（6 列，gap 收紧），
   配图改 3:4 竖版（杂志封面式），卡片整体缩小，一屏可展示更多往期文章；
   内距/字号同步收紧以适配缩小后的卡片。
   注：本作用域用双类选择器（.anker-related .anker-product-*），
   响应式收列必须写在各断点内、同名选择器之后，见下方 ≤1024px / ≤768px 断点 */
.anker-related .anker-product-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.anker-related .anker-product-img {
    aspect-ratio: 3 / 4;
}

.anker-related .anker-product-info {
    padding: 12px;
}

.anker-related .anker-product-title {
    font-size: 15px;
    margin-bottom: 0;
}

/* ========================================
   16 · 单页内容（page/life_show 单页：关于我们、生活记录正文等）
   ======================================== */
.anker-single-content {
    max-width: 900px;
    margin: 0 auto;
}

.anker-single-head {
    text-align: center;
    margin-bottom: 40px;
}

.anker-single-head h1 {
    font-size: 36px;
    font-weight: 700;
    color: var(--anker-text);
    margin-bottom: 12px;
}

.anker-single-subtitle {
    font-size: 18px;
    color: var(--anker-text-light);
}

/* 标题与正文之间的分隔横线 */
.anker-single-divider {
    border: 0;
    border-top: 1px solid var(--anker-border);
    margin: 20px 0 28px;
}

/* 正文：取消模板对编辑器内容的样式覆盖，还原浏览器默认样式，按后台编辑器原始形式显示。
   原因：文件开头的全局 reset 把 p 间距、列表序号/缩进、表格边框、标题间距全部清掉了，
   后台编辑器输出的内容直接显示会"糊成一团"，所以这里逐项补回默认排版 */
.anker-single-body,
.anker-product-detail-desc {
    word-wrap: break-word;
}

/* 还原段落间距 */
.anker-single-body p,
.anker-product-detail-desc p {
    margin: 0 0 1em;
}

/* 正文图片改回 inline-block（编辑器里图片常与文字混排），并保持响应式上限。
   height 必须加 !important：后台编辑器（TinyMCE）给图片输出内联 style="width:500px;height:684px"，
   内联 height 优先级高于样式表的 height:auto——窄屏下 max-width:100% 把宽度压小、内联高度却不变，
   图片就被纵向拉长。!important 可压过内联普通声明，让高度回到图片原始比例 */
.anker-single-body img,
.anker-product-detail-desc img {
    display: inline-block;
    max-width: 100%;
    height: auto !important;
}

/* 还原列表缩进与外间距 */
.anker-single-body ul,
.anker-single-body ol,
.anker-product-detail-desc ul,
.anker-product-detail-desc ol {
    margin: 0 0 1em;
    padding-left: 2em;
}

/* 还原无序列表圆点（被全局 reset 的 list-style: none 冲掉了） */
.anker-single-body ul,
.anker-product-detail-desc ul {
    list-style: disc;
}

/* 还原有序列表序号 */
.anker-single-body ol,
.anker-product-detail-desc ol {
    list-style: decimal;
}

/* 还原各级标题的间距与字重 */
.anker-single-body h1,
.anker-single-body h2,
.anker-single-body h3,
.anker-single-body h4,
.anker-single-body h5,
.anker-single-body h6,
.anker-product-detail-desc h1,
.anker-product-detail-desc h2,
.anker-product-detail-desc h3,
.anker-product-detail-desc h4,
.anker-product-detail-desc h5,
.anker-product-detail-desc h6 {
    margin: 1.2em 0 0.6em;
    font-weight: 700;
    line-height: 1.4;
}

/* 还原表格边框合并 */
.anker-single-body table,
.anker-product-detail-desc table {
    border-collapse: collapse;
    margin: 1em 0;
}

/* 还原单元格边框与内距（reset 后表格默认无边框） */
.anker-single-body td,
.anker-single-body th,
.anker-product-detail-desc td,
.anker-product-detail-desc th {
    border: 1px solid var(--anker-border);
    padding: 8px 12px;
}

/* 正文链接统一主题色，便于识别 */
.anker-single-body a,
.anker-product-detail-desc a {
    color: var(--anker-primary);
}

/* 关于我们（about/aboutme 页：左文右图） */
.anker-about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.anker-about-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--anker-text);
    margin-bottom: 12px;
}

.anker-about-subtitle {
    font-size: 18px;
    color: var(--anker-text-light);
    margin-bottom: 24px;
}

.anker-about-body {
    font-size: 16px;
    line-height: 1.8;
    color: var(--anker-text);
}

.anker-about-image img {
    border-radius: 20px;
    box-shadow: var(--anker-shadow-lg);
}

/* ========================================
   17 · 搜索结果（search.html）
   ======================================== */
.anker-search-result {
    max-width: 900px;
    margin: 0 auto;
}

/* 关键词提示行 */
.anker-search-keyword {
    font-size: 16px;
    color: var(--anker-text-light);
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--anker-gray-2);
}

.anker-search-keyword strong {
    color: var(--anker-primary);
}

.anker-search-item {
    padding: 24px 0;
    border-bottom: 1px solid var(--anker-gray-2);
}

.anker-search-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.anker-search-title a:hover {
    color: var(--anker-primary);
}

.anker-search-desc {
    font-size: 14px;
    color: var(--anker-text-light);
    line-height: 1.6;
    margin-bottom: 12px;
}

.anker-search-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--anker-text-lighter);
}

.anker-search-meta a {
    color: var(--anker-primary);
}

/* 无结果提示 */
.anker-no-result {
    text-align: center;
    padding: 60px 0;
    color: var(--anker-text-light);
}

/* ========================================
   18 · 页脚（html/common/footer.html，全站共用）
   ======================================== */
.anker-footer {
    background: var(--anker-dark);
    color: rgba(255, 255, 255, 0.7);
    padding-top: 60px;
}

.anker-footer-inner {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 24px;
}

/* 页脚上区：品牌列 | 链接列组 | 二维码列，三栏不等宽 */
.anker-footer-top {
    display: grid;
    grid-template-columns: 1.2fr 2fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.anker-footer-brand {
    max-width: 320px;
}

/* 页脚 Logo 同样反白显示 */
.anker-footer-logo img {
    height: 40px;
    width: auto;
    margin-bottom: 16px;
    filter: brightness(0) invert(1);
}

.anker-footer-desc {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.6);
}

.anker-footer-contact p {
    font-size: 14px;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.6);
}

.anker-footer-contact span {
    color: rgba(255, 255, 255, 0.4);
}

/* 链接列组：一行 4 列 */
.anker-footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.anker-footer-col h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--anker-white);
    margin-bottom: 16px;
}

.anker-footer-col ul li {
    margin-bottom: 10px;
}

.anker-footer-col ul li a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s ease;
}

.anker-footer-col ul li a:hover {
    color: var(--anker-white);
}

.anker-footer-qrcode {
    text-align: center;
}

/* 二维码白底卡：深色页脚上二维码必须是白底才能被扫码识别 */
.anker-qrcode-img {
    width: 120px;
    height: 120px;
    background: var(--anker-white);
    border-radius: 12px;
    padding: 8px;
    margin: 0 auto 12px;
}

.anker-qrcode-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.anker-qrcode-item p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

/* 页脚底栏：版权 + 底部链接 */
.anker-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    flex-wrap: wrap;
    gap: 16px;
}

.anker-footer-copyright {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.anker-footer-copyright a {
    color: rgba(255, 255, 255, 0.5);
    margin-left: 12px;
}

.anker-footer-copyright a:hover {
    color: var(--anker-white);
}

.anker-footer-links-bottom {
    display: flex;
    gap: 20px;
}

.anker-footer-links-bottom a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.anker-footer-links-bottom a:hover {
    color: var(--anker-white);
}

/* ========================================
   19 · 返回顶部（全站右下角悬浮按钮，main.js 滚动超 300px 后加 .show）
   ======================================== */
.anker-back-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 48px;
    height: 48px;
    background: var(--anker-dark);
    color: var(--anker-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--anker-shadow);
    /* 默认隐藏并下移 20px，.show 时浮入 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 999;
}

.anker-back-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.anker-back-top:hover {
    background: var(--anker-primary);
    transform: translateY(-2px);
}

/* ========================================
   20 · 响应式断点（≤1024px 平板/手机桌面版模式、≤768px 真实窄屏两级）
   ======================================== */
/* 1025~1500px 断点（桌面仍是 3fr+1fr 双栏、图集列被压窄到约 230–350px）：
   进一步收紧「电话订阅 / 后台留言订阅 / 返回列表」按钮的内边距与字号，
   保证三个按钮在该区间仍并排一行不换行 */
@media (min-width: 1025px) and (max-width: 1500px) {
    .anker-product-detail-actions {
        gap: 6px;
    }

    .anker-product-detail-actions .anker-btn {
        padding: 10px 6px;
        font-size: 12px;
    }
}

/* 1024px 断点（平板/小屏笔记本）：
   折叠顶部一级导航为汉堡菜单 + 全屏抽屉，各类网格降为两列，
   列表页侧栏下移到内容之后，产品详情图集取消 sticky */
@media (max-width: 1024px) {
    .anker-nav {
        display: none;
    }

    .anker-mobile-toggle {
        display: flex;
    }

    /* 移动端菜单：向下弹出 / 向上回收 */
    /* 默认隐藏在头部上方（translateY(-100%)），.active 时滑下；
       visibility 延迟切换保证收起动画播完才真正脱离点击 */
    .anker-mobile-nav {
        display: block;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.35s ease, opacity 0.3s ease, visibility 0s linear 0.35s;
    }

    .anker-mobile-nav.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: transform 0.35s ease, opacity 0.3s ease, visibility 0s;
    }

    .anker-search-input {
        width: 150px;
    }

    .anker-search-input:focus {
        width: 180px;
    }

    /* 生活记录区：小屏改为上下排列 */
    .anker-life-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 28px;
    }

    .anker-life-tabs {
        justify-content: flex-start;
    }

    /* 各类卡片网格统一降为两列 */
    .anker-life-grid,
    .anker-product-grid,
    .anker-product-grid-list,
    .anker-blog-grid,
    .anker-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 「往期推荐」相关文章网格：平板上由 6 列收为 3 列（必须紧跟上面通配规则之后以覆盖其 2 列） */
    .anker-related .anker-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 生活记录卡片（仅首页 #lifePanels 内）在手机/平板上不再并排挤压，
       改为仿 apple.com「card-set / card-set-full-bleed」的横向滑动条：
       整条铺满视口（full-bleed），当前卡片靠左占 80vw 且左侧留 24px 版心
       （与上方区块标题左对齐，卡片不贴屏幕边），右侧露出下一张约 1/5 视口；
       默认从第 1 张开始（所以初始状态只看到第 1 张 + 右侧露出的第 2 张一部分），
       滑动/吸附是纯 CSS 的 scroll-snap，下方的左右切换按钮由 main.js 驱动；
       注：规则放在 ≤1024px 断点，可同时覆盖真实手机（≤768px）与"桌面版网站"模式的手机（约 980px） */
    .anker-life-panels .anker-life-grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        /* 横向滑动吸附：松手后自动回正，让当前卡片左边缘对齐版心左边（而不是屏幕边） */
        scroll-snap-type: x mandatory;
        /* 滑动到两端时不触发浏览器的"后退/前进"手势 */
        overscroll-behavior-x: contain;
        /* 卡片宽 = 视口的 80%（苹果 card-set 的大卡片尺寸） */
        --life-card-w: 80vw;
        /* 卡片间距由 24px 收紧到 12px，相邻卡片看起来更连贯 */
        gap: 12px;
        /* 抵消 .anker-container 的左右 24px 内边距，让整条铺满视口（full-bleed，右侧可一直滑到屏幕边） */
        margin-inline: -24px;
        /* 左侧留 24px = 版心，因此首张卡片与区块标题左对齐、不贴屏幕边；
           右侧留「视口宽 - 卡片宽」保证最后一张也能对齐到版心左边；
           这里直接用 100vw 而不是 100%：整条已铺满视口，百分比会随容器内边距改变基准 */
        padding-inline: 24px calc(100vw - var(--life-card-w));
        /* 吸附停靠点也按版心内缩 24px，否则卡片会被吸到屏幕最左边（贴边） */
        scroll-padding-inline-start: 24px;
        /* 上下各留 32px 缓冲：否则弹出动画的 translateY(26px) 与悬停上浮 -6px 会被滚动容器裁掉 */
        padding-block: 32px;
        margin-block: -32px;
        /* 隐藏横向滚动条（Firefox） */
        scrollbar-width: none;
    }

    /* 隐藏横向滚动条（Chrome / Edge / Safari） */
    .anker-life-panels .anker-life-grid::-webkit-scrollbar {
        display: none;
    }

    /* 每张卡片固定为上一步算出的宽度，并作为吸附停靠点靠左对齐（不随内容宽窄变化） */
    .anker-life-panels .anker-life-card {
        flex: 0 0 var(--life-card-w);
        scroll-snap-align: start;
        /* 一次滑动只前进/后退一张，手感更接近轮播 */
        scroll-snap-stop: always;
    }

    /* 滑动条的左右切换按钮：排在滑动条下方，按版心右对齐
       （本元素位于 .anker-container 内，故右对齐即贴着版心右边，
       与上方标题左对齐的版心留白对称；桌面端 4 列网格下由基础规则隐藏） */
    .anker-life-nav {
        display: flex;
        justify-content: flex-end;
        gap: 16px;
        margin-top: 20px;
    }

    .anker-life-nav-btn {
        width: 44px;
        height: 44px;
        border: 1px solid var(--anker-border);
        border-radius: 50%;
        background: var(--anker-white);
        color: var(--anker-text);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .anker-life-nav-btn:hover {
        background: var(--anker-primary);
        border-color: var(--anker-primary);
        color: var(--anker-white);
    }

    /* 页脚改单列堆叠 */
    .anker-footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .anker-footer-links {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 列表页改单列：侧栏排到内容后面 */
    .anker-list-layout {
        grid-template-columns: 1fr;
    }

    .anker-sidebar {
        order: 2;
    }

    /* 栏目列表页（lifelist / bloglist / newslist / workslist / productlist 共用的 .anker-list-layout）：
       手机端把左侧栏导航改造成横向频道条。
       它排在列表上方（order:-1，覆盖上面的 order:2），并在滚动到列表区后自动钉在
       顶部导航栏下方（position:sticky + top:64px）。用 sticky 而不是 fixed 的原因：
       fixed 会让条常驻在导航栏下、必然压住页面最顶部的内页 Banner（标题/面包屑看不全），
       而 sticky 进页面时 Banner 仍完整占据最顶部，滚过 Banner 后条才钉住，两者互不遮挡 */
    .anker-list-layout .anker-sidebar {
        position: sticky;
        top: 64px;
        /* 排在列表之前（基础规则在单列时把它排到了内容后面） */
        order: -1;
        /* 低于头部（1000），高于正文内容 */
        z-index: 900;
        /* sticky 时它仍是网格项、宽度只到版心内容宽；左右各外扩 24px（= 版心内边距）铺满整屏 */
        margin-inline: -24px;
        /* 网格项默认 min-width:auto —— 会被条内「栏目名很长/栏目很多」的横向列表撑宽，
           导致整页横向溢出（清风杂志这类栏目多的列表页实测条宽 415.9px > 屏幕 360px）。
           置 0 后网格项可收缩到版心宽，条内超出部分由 .anker-sidebar-box 的 overflow-x 滚动消化 */
        min-width: 0;
    }

    /* 列表页区块（各列表模板的 section 上都加了通用类 .anker-section-list）上内边距归零：
       进页面时横向频道条紧贴上方 Banner 图，两者之间不留空隙
       （.anker-section 默认上内边距 80px、≤768px 时 56px，这里一并归零）；
       下内边距不动，列表与页脚之间的留白保持原样。
       写成 .anker-section.anker-section-list 两个类（权重 0,2,0）的原因：
       ≤768px 媒体查询里还有一条 .anker-section{padding:56px 0}（权重 0,1,0），
       单类的 .anker-section-list 会被它覆盖，必须提高权重才能在两个断点都生效 */
    .anker-section.anker-section-list {
        padding-top: 0;
    }

    /* 条内：与顶部栏（.anker-header.scrolled，见文件前部）完全一致的毛玻璃——
       同底色 rgba(255,255,255,0.72)、同模糊强度 saturate(180%) blur(20px)、同下边框与阴影，
       条滚动到头部下方时与顶部栏连成一体；横向排列同级栏目 */
    .anker-list-layout .anker-sidebar-box {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 0;
        box-shadow: var(--anker-shadow);
    }

    /* 隐藏横向滚动条（Chrome / Edge / Safari） */
    .anker-list-layout .anker-sidebar-box::-webkit-scrollbar {
        display: none;
    }

    /* 窄条里放不下「顶级栏目名」标题，隐藏（页面 Banner 已显示栏目名） */
    .anker-list-layout .anker-sidebar-title {
        display: none;
    }

    /* 同级栏目改为横向胶囊，一行排开、超宽可滑 */
    .anker-list-layout .anker-sidebar-nav {
        display: flex;
        flex-shrink: 0;
        gap: 8px;
        padding: 0;
    }

    .anker-list-layout .anker-sidebar-nav li {
        flex: 0 0 auto;
    }

    .anker-list-layout .anker-sidebar-nav li a {
        white-space: nowrap;
        padding: 8px 14px;
        font-size: 13px;
        border-radius: 999px;
        background: var(--anker-gray);
    }

    /* 当前栏目：蓝底白字（本条在基础 hover/active 规则之后，确保高亮不被灰色胶囊底覆盖） */
    .anker-list-layout .anker-sidebar-nav li.active a,
    .anker-list-layout .anker-sidebar-nav li a:hover {
        background: var(--anker-primary);
        color: var(--anker-white);
    }

    /* 分页条（首页/上一页/页码/下一页/尾页）：手机上按钮多、字号又大，
       一行放不下时会被挤出屏幕、显示不全；这里统一缩小字号与按钮尺寸，并允许换行，
       保证不管有多少页码都完整可见 */
    .anker-pagination {
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 24px;
    }

    .anker-pagination a,
    .anker-pagination span {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        border-radius: 6px;
        font-size: 12px;
    }

    /* 双栏布局统一改单列 */
    .anker-profile,
    .anker-about-layout,
    .anker-product-detail {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* 单列后 sticky 无意义，取消图集吸附 */
    .anker-product-gallery {
        position: static;
    }

    /* PDF 阅读框：改用 PDF.js 自绘后手机端也能正常预览，故不再隐藏；
       窄屏下 main.js 按窗口宽度决定单页显示，这里把高度略降以适配小屏 */
    .anker-product-pdf-frame {
        height: 70vh;
        min-height: 480px;
    }
}

/* 768px 断点（手机端）：
   各类卡片网格降为单列（「往期推荐」相关文章保留 2 列）、切换移动端 Logo、Hero/标题缩字号、
   隐藏头部搜索框、正文视频/iframe 强制 100% 宽横向适配 */
@media (max-width: 768px) {
    .anker-logo {
        margin-right: 12px;
    }

    .anker-logo img {
        height: 30px;
    }

    /* 切换为移动端专用 Logo 图 */
    .anker-logo img.anker-logo-pc {
        display: none;
    }

    .anker-logo img.anker-logo-mobile {
        display: block;
    }

    .anker-flag {
        margin-right: 8px;
        padding: 4px 6px;
        min-width: 0;
    }

    /* 地区/语言文字最多两行省略，防止撑破窄屏头部 */
    .anker-flag-label {
        font-size: 12px;
        line-height: 1.3;
        max-width: 180px;
        white-space: normal;
        word-break: break-word;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    .anker-hero {
        height: 60vh;
        min-height: 400px;
        max-height: 560px;
    }

    .anker-hero.video-active {
        height: 100vh;
        min-height: 480px;
        max-height: none;
    }

    .anker-hero-title {
        font-size: 36px;
    }

    .anker-hero-subtitle {
        font-size: 18px;
    }

    .anker-section {
        padding: 56px 0;
    }

    .anker-section-title {
        font-size: 28px;
    }

    .anker-section-subtitle {
        font-size: 16px;
    }

    .anker-inner-banner {
        height: 220px;
    }

    .anker-inner-banner-title {
        font-size: 28px;
    }

    /* 各类卡片网格统一降为单列 */
    .anker-life-grid,
    .anker-product-grid,
    .anker-product-grid-list,
    .anker-blog-grid,
    .anker-feature-grid {
        grid-template-columns: 1fr;
    }

    /* 「往期推荐」相关文章网格：手机上保留 2 列（比通用单列多一列，竖版小图刚好不挤） */
    .anker-related .anker-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 新闻列表条目改上图下文 */
    .anker-news-list-link {
        flex-direction: column;
    }

    .anker-news-list-img {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .anker-news-list-info {
        padding: 16px;
    }

    .anker-detail-title,
    .anker-product-detail-title,
    .anker-about-title,
    .anker-single-head h1 {
        font-size: 24px;
    }

    /* 详情页发布信息保持一行显示（缩小字号与间距以适配窄屏） */
    .anker-detail-meta {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* 来源等过长时省略号截断，防止把一行撑破导致整页横向滚动 */
    .anker-detail-meta span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 轮播箭头缩小并内收，避免挡住窄屏内容 */
    .anker-hero-arrow {
        width: 40px;
        height: 40px;
    }

    .anker-hero-prev {
        left: 12px;
    }

    .anker-hero-next {
        right: 12px;
    }

    /* 视频关闭按钮：缩小并下移到头部导航栏（64px）之下，避免与右上角汉堡按钮重叠 */
    .anker-hero-video-close {
        top: 78px;
        right: 16px;
        width: 40px;
        height: 40px;
    }

    .anker-search {
        display: none;
    }

    /* 正文视频/嵌入内容：手机端横向铺满屏幕宽，高度按宽度比例适配 */
    /* 后台编辑器常输出固定 width/height 的内联样式或属性，
       窄屏下会横向溢出，必须用 !important 强制覆盖 */
    /* 适用范围：生活记录单页正文（.anker-single-body）与博客/新闻详情正文（.anker-detail-body） */
    /* 宽度取 calc(100% + 48px)：100% 只是正文内容宽（外层 .anker-container 左右各有 24px 内边距），
       补回左右各 24px 才是整个屏幕宽；再配 margin-left:-24px 把左缘推到屏幕左边缘，右缘就自动贴到屏幕右边。
       之所以不用 100vw：带纵向滚动条的浏览器里 100vw 会比可视宽多出一条滚动条的宽度，导致页面横向溢出；
       这种写法在手机上（视口宽=可视宽）正好等于手机屏幕宽度，在窄窗口的桌面浏览器里也不会溢出。
       注意必须同时关掉 max-width，否则会被压回内容宽 */
    /* 高度：原来的 height:auto 会把后台设置的 height 属性一并清掉，
       导致 iframe（B 站播放器等）失去高度、塌成浏览器默认的 150px，又扁又别扭；
       改用 aspect-ratio 让高度按宽度成比例算出来——既"与宽度适配"，又比塌陷时高很多。
       4/3 比常见的 16/9 更高；想调高度只改这一个比值即可：16/9 更扁、3/2 居中、3/4 竖屏 */
    .anker-single-body video,
    .anker-single-body iframe,
    .anker-detail-body video,
    .anker-detail-body iframe {
        display: block !important;
        width: calc(100% + 48px) !important;
        max-width: none !important;
        margin-left: -24px !important;
        margin-right: 0 !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        margin-bottom: 1em;
    }

    .anker-footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ========================================
   21 · 在线留言（message.html 留言页表单）
   ======================================== */
.anker-message {
    max-width: 920px;
    margin: 0 auto;
}

.anker-message-head {
    text-align: center;
    margin-bottom: 48px;
}

.anker-message-head h2 {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.anker-message-head p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--anker-text-light);
}

.anker-message-head strong {
    color: var(--anker-primary);
    font-weight: 600;
}

/* 表单：flex 两列布局，整行项用 .anker-form-item-full 占满 */
.anker-message-form {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/* 默认每项占半行（减去 gap 的一半） */
.anker-form-item {
    flex: 1 1 calc(50% - 12px);
    display: flex;
    flex-direction: column;
}

.anker-form-item-full {
    flex: 1 1 100%;
}

.anker-form-item label {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
}

/* 必填星号 */
.anker-form-item label em {
    font-style: normal;
    color: #ff3b30;
    margin-left: 4px;
}

.anker-form-item input,
.anker-form-item textarea {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    font-family: inherit;
    color: var(--anker-text);
    background: var(--anker-gray);
    border: 1px solid transparent;
    border-radius: 12px;
    outline: none;
    transition: all 0.3s ease;
}

.anker-form-item input::placeholder,
.anker-form-item textarea::placeholder {
    color: var(--anker-text-lighter);
}

.anker-form-item textarea {
    height: 180px;
    line-height: 1.7;
    resize: vertical;
}

/* 聚焦：白底 + 主题色描边 + 外发光 */
.anker-form-item input:focus,
.anker-form-item textarea:focus {
    background: var(--anker-white);
    border-color: var(--anker-primary);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}

.anker-form-submit {
    flex: 1 1 100%;
    text-align: center;
    margin-top: 8px;
}

.anker-form-submit .anker-btn {
    min-width: 220px;
    padding: 14px 48px;
    font-size: 16px;
    border: 0;
}

/* ========================================
   22 · 网站地图（map.html：dl/dt/dd 结构的站点地图）
   ======================================== */
.anker-map-head {
    text-align: center;
    margin-bottom: 48px;
}

.anker-map-head h2 {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.anker-map-head p {
    font-size: 16px;
    color: var(--anker-text-light);
}

/* dt 为一级栏目（左列固定 220px），dd 为二级链接（右列自适应），
   dt/dd 同行排布并共用底部分隔线 */
.anker-sitemap {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--anker-border);
}

.anker-sitemap dt {
    flex: 0 0 220px;
    padding: 20px 0;
    border-bottom: 1px solid var(--anker-border);
}

.anker-sitemap dt a {
    display: block;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    background: var(--anker-gray);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.anker-sitemap dt a:hover {
    background: var(--anker-primary);
    color: var(--anker-white);
}

.anker-sitemap dd {
    flex: 0 0 calc(100% - 220px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 20px 0 20px 32px;
    border-bottom: 1px solid var(--anker-border);
}

.anker-sitemap dd a {
    padding: 4px 16px;
    font-size: 15px;
    color: var(--anker-text-light);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.anker-sitemap dd a:hover {
    color: var(--anker-primary);
    background: var(--anker-gray);
}

/* 768px 断点（留言页/地图页）：表单改单列、提交按钮整行，
   网站地图 dt/dd 上下堆叠 */
@media (max-width: 768px) {

    .anker-message-head h2,
    .anker-map-head h2 {
        font-size: 26px;
    }

    .anker-form-item {
        flex: 1 1 100%;
    }

    .anker-form-item textarea {
        height: 140px;
    }

    .anker-form-submit .anker-btn {
        width: 100%;
    }

    .anker-sitemap {
        border-top: 0;
    }

    .anker-sitemap dt {
        flex: 1 1 100%;
        padding: 16px 0 8px;
        border-bottom: 0;
    }

    .anker-sitemap dd {
        flex: 1 1 100%;
        padding: 0 0 16px;
    }
}

/* ========================================
   23 · 通用滚动进入视口弹出动画（仿 Apple product-tile 的 staggered 分块弹出）
   ----------------------------------------
   用法：main.js 用 IntersectionObserver 给目标元素动态加 .anker-reveal（初始隐藏），
        进入视口后加 .anker-reveal-in（缓慢弹出）；逐张延迟由 --reveal-delay 自定义属性控制。
   覆盖范围：区块标题/副标题、生活记录 tab、各类卡片（生活/个人博客/特色/友情链接）、
            个人简介图文、文章标题与正文等；本规则置于文件末尾，保证优先级高于各元素原有 transition。
   无 JS 或系统开启"减少动态效果"时不会加 .anker-reveal，内容保持常显，绝不遮挡内容。
   ======================================== */
/* 初始隐藏态：不带过渡，避免首帧出现"先显示再淡出"的闪烁 */
.anker-reveal {
    opacity: 0;
    transform: translateY(26px) scale(0.97);
    transition: none;
}

/* 触发态：进入视口后启用过渡缓慢弹出，延迟取 --reveal-delay（由 JS 按顺序写入） */
.anker-reveal.anker-reveal-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
}

/* 尊重系统"减少动态效果"设置：直接显示，不做位移/淡化 */
@media (prefers-reduced-motion: reduce) {
    .anker-reveal {
        opacity: 1;
        transform: none;
    }

    .anker-reveal.anker-reveal-in {
        transition: none;
    }
}