/*
 * view.jsp 页面级静态样式
 * 此文件包含与主题色 / JSP EL 无关的全部样式，可直接走 CDN（强缓存）。
 *
 * 拆分原则：
 *   - 内联（inline style="..."）：仅用于绝对个例的一次性微调
 *   - 页面 <style>：仅保留依赖 JSP EL（${background}/${compared}）的动态样式
 *   - 外联（本文件）：可被 CDN 缓存的静态样式 —— shop / 全局重置 / 控件覆盖 / 工具栏 / input-group
 */

/* ─── 全局重置 ─── */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#title { font-weight: bold; }

body { touch-action: manipulation; }

::placeholder { color: #c3c3c3; }

button, i {
    cursor: pointer;
    border-radius: 3px;
}

#to-inquiry-button, #inquiry-button { font-weight: bold; }

.modal {
    touch-action: none;
    user-select: none;
    position: absolute;
    top: 3.33rem;
    left: 0;
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.75);
}
.modal > img { transform: translateZ(0); }

@keyframes scrollBanner {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-100% - 0.8rem), 0, 0); }
}

.openBlock {
    opacity: 1;
    animation: fadeIn 1s ease-out 6s forwards;
    transition: opacity 0.5s ease;
}
.openBlock:hover {
    cursor: pointer;
    animation: none;
    opacity: 1;
    transition: opacity 0.5s ease;
}
@keyframes fadeIn { to { opacity: 0.6; } }


/* ─── ElementUI 微调 ─── */
.el-tree-node__content > .el-tree-node__expand-icon { padding: 15px 5px; }
.el-dialog__header { padding: 15px 20px; }
.el-dialog__headerbtn { top: 20px; }


/* ─── shop 模块样式 ─── */
.shopProfilePrice {
    font-size: 1.0rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shopProductList {
    min-width: 8.25rem; max-width: 8.25rem; width: 8.25rem; height: 5.8125rem;
}
.shopCallTitle {
    line-height: 1.5625rem;
    font-size: 1rem;
    font-weight: bold;
}
.shopCallVisits {
    font-size: 0.8rem;
    line-height: 1.5625rem;
}
.shopListTitle {
    height: 1.3125rem;
    font-size: 0.95rem;
    font-weight: bold;
}
.shopListProfile {
    height: 2.8rem;
    font-size: 0.95rem;
}
.shopDescription { font-size: 0.95rem; }
.shopInquiryButton {
    font-size: 0.935rem;
    line-height: 2.925rem;
}
.shopAddButton {
    font-size: 1.0rem;
    line-height: 2.925rem;
    font-weight: bold;
}
.shopInputValue {
    font-size: .85rem;
    line-height: 1.875rem;
    border: none;
    outline: none;
}
.shopInputLabel {
    font-size: .85rem;
    line-height: 1.875rem;
}
.shopInquiryInfo {
    font-size: 0.935rem;
    line-height: 1.525rem;
}
.shopHeader {
    font-size: 1.2rem;
    line-height: 1.825rem;
}
.toDetail {
    font-size: 0.8rem;
    line-height: 1.525rem;
}
.shopDescriptionTitle {
    height: 2.9875rem;
    font-size: 1.25rem;
    font-weight: bold;
}
#cart { font-weight: bold; }
.shopDetailItem {
    height: 1.5rem;
    font-size: 0.95rem;
}

@media screen and (max-width: 600px) {
    .shopProductList {
        min-width: 8.65rem; max-width: 8.65rem; width: 8.65rem; height: 6.8125rem;
    }
    .shopProfilePrice {
        font-size: 1.2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .shopCallTitle {
        font-size: 1.2rem;
        line-height: 1.5625rem;
        font-weight: bold;
    }
    .shopCallVisits {
        font-size: 0.8rem;
        line-height: 1.2625rem;
    }
    .shopListTitle {
        height: 1.525rem;
        font-size: 1.25rem;
        font-weight: bold;
    }
    .shopListProfile {
        height: 3.2rem;
        font-size: 1.2rem;
    }
    .shopInquiryButton {
        font-size: 1.335rem;
        line-height: 4.525rem;
    }
    .shopAddButton {
        font-size: 0.95rem;
        line-height: 2rem;
        font-weight: 600;
        padding: 0 0.875rem;
        border-radius: 1rem;
    }
    .shopInputValue { font-size: 1.10rem; line-height: 2.075rem; border: none; outline: none; }
    .shopInputLabel { font-size: 1.10rem; line-height: 2.075rem; }
    .shopInquiryInfo {
        font-size: 1.335rem;
        line-height: 2.525rem;
    }
    .shopDescription { font-size: 1.25rem; }
    .shopHeader {
        font-size: 2.0rem;
        line-height: 2.825rem;
    }
    .toDetail { font-size: 1.2rem; }
    .shopDescriptionTitle {
        height: 2.9875rem;
        font-size: 1.35rem;
        font-weight: bold;
    }
    .shopDetailItem {
        height: 1.5rem;
        font-size: 1.2rem;
    }
}


/* ─── layui 弹层覆盖 ─── */
.layui-layer.layui-layer-page { background: black; }
.layui-layer-setwin .layui-layer-close2 {
    right: -18px;
    bottom: 18px;
    top: unset;
    width: 32px;
    height: 32px;
    background: url(/css/close.png) no-repeat;
    background-position: 0 0 !important;
}


/* ─── 移动端下工具栏：两行布局 = 翻页滑动条 + (页码 | 内联功能图标) ─── */
.flipbook-controls-mobile-bar {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    /* 整体回贴底部（bottom: 0），通过加大 padding-bottom 把内部元素整体抬高，
       避免之前 bottom:20px 在屏幕最底造成 20px 透明漏空。
       28 → 48 → 68：图标整体累计抬升 60px，让 icons 行离底部更远 */
    padding: 8px 8px 68px;    /* top/left/right 各 8px；bottom 68px = 8px 原 padding + 60px 抬升 */
    gap: 6px;
    box-sizing: border-box;
}
.flipbook-controls-mobile-bar .mobile-bar-row {
    display: flex;
    align-items: center;
    width: 100%;
}
/* slider 行：flex 居中，slider 占 2/3 宽度，两端留更多手指误触安全区。
   背景沿用 footer 的 --bg-color，并用负 margin 抵消 parent 8px 左右 padding，
   让 slider 行的底色横跨整个 bar 宽度，杜绝两端"漏出"页面背景 */
.flipbook-controls-mobile-bar .mobile-bar-row-slider {
    padding: 0;
    justify-content: center;
    background-color: var(--bg-color, transparent);
    margin-left: -8px;
    margin-right: -8px;
    width: calc(100% + 16px);   /* 抵消 margin 让父级布局尺寸不变 */
    box-sizing: border-box;
}
.flipbook-controls-mobile-bar .mobile-bar-row-controls {
    justify-content: center;
    align-items: center;       /* 内联图标在控件行内垂直居中 */
    gap: 8px;
}

/* ─── 翻页滑动条 ─── */
/* 主体颜色用主题色（toolbar-color），由 features/mobile-page-slider.js 在 skin 初始化后写入 :root */
.mobile-page-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 66.67%;     /* 工具栏宽度的 2/3，两端各留 ~1/6 安全间距 */
    flex: 0 0 66.67%;  /* 防止 flex 父容器把它拉伸到 100% */
    /* 整体高度抬到 44px（Apple HIG 推荐最小触控目标），轨道仍 3px 居中显示。
       这样手指在 thumb 上下任意 20px 内按住都能拖动，大幅降低拖动难度 */
    height: 44px;
    background: transparent;
    cursor: pointer;
    margin: 0;
    padding: 0;
    outline: none;
    touch-action: none;     /* 防止竖向滚动抢手势，确保拖动响应灵敏 */
    --slider-color: var(--toolbar-color, #2e79c6);
}
.mobile-page-slider::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.28);
}
.mobile-page-slider::-moz-range-track {
    height: 3px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.28);
}
.mobile-page-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--slider-color);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    /* 居中：track 在容器中线，thumb 高 22 -> 上偏 (22-3)/2 = 9.5 ≈ 10 */
    margin-top: -10px;
    transition: transform 0.12s ease;
}
.mobile-page-slider::-webkit-slider-thumb:active {
    transform: scale(1.22);
}
.mobile-page-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--slider-color);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* ─── 桌面 / iPad 翻页滑动条(下工具栏正上方) ───
 *   主体色用后端 settingColorLink → #colorLink hidden input,
 *   features/desktop-page-slider.js 把它写进 :root 的 --brand-color。
 */
.desktop-page-slider-wrap {
    position: absolute;
    /* 距下工具栏的位置:30→35→30,移回 30 给书页让出 5px 间隙
       (滑条底部 5px 会被 z-index:20 的工具栏盖住,视觉上无影响) */
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    /* 原 60% → 现 45%(60×3/4) */
    width: 45%;
    min-width: 240px;
    max-width: 630px;
    height: 22px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 5;
    pointer-events: auto;
    padding: 0 12px;
    box-sizing: border-box;
}
/* 翻页导航覆盖层保持 inline 默认 top:40 / bottom:40,书页 viewport
   保持 height:100%。任何在这两个 selector 上动 size / padding 都会
   让 turn.js 的 turn("center") 在静态布局 vs 翻页动画期间读到不一致
   的几何 —— 表现为翻页时书页"向下移动"或"放大",所以这里保持原样。 */

/* 滑条与书页间增加 5px 间距:
     用 transform: translateY 整体把 PC/iPad viewbox 视觉上抬 5px。
     CSS transform 不改变 layout 尺寸 —— turn.js 测的 offsetHeight /
     getBoundingClientRect 的 size 一样,但 transform 后元素*显示位置*上移,
     书页可见底边上移 5px,滑条(absolute,锚在外层容器,不在 viewbox 内)
     保持原位 → +5px 间距。transform 是稳定 5px,静态/翻页期间一致,
     不会出现抖动。
     副作用:transform 创建新的 stacking context,会改变点击穿透行为 ——
     原先 .flipbook-viewport { pointer-events: none } 让点击穿到 page-turner
     的左右半屏翻页按钮上,新 stacking context 下穿透目标变了。
     补:给 viewbox 显式 pointer-events: none,书页元素自带的 auto 继承
     不动(.flipbook > * 在 CDN CSS 里强制 pointer-events:auto),
     book 上的 link / video / hammer 仍能接收事件,viewbox 上空白区点击
     正常穿到 page-turner。
     仅作用于 .flipbook-viewbox(PC/iPad),移动端用 .flipbook-viewboxMobile,
     不受影响。 */
.flipbook-viewbox {
    transform: translateY(-5px);
    pointer-events: none;
}
.desktop-page-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 auto;
    width: auto;
    height: 22px;
    background: transparent;
    cursor: pointer;
    margin: 0;
    padding: 0;
    outline: none;
    --slider-color: var(--brand-color, var(--toolbar-color, #2e79c6));
}
/* 页码计数器:绝对定位到 wrap 右侧外部,不挤占 slider 宽度,
   保证滑条本身在 wrap 内严格水平居中 */
.desktop-page-counter {
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-color, var(--toolbar-color, #2e79c6));
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
    min-width: 60px;
    text-align: left;
}
.desktop-page-counter .sep {
    opacity: 0.5;
    margin: 0 1px;
}
#desktopTotalPages {
    opacity: 0.7;
    font-weight: 500;
}
.desktop-page-slider::-webkit-slider-runnable-track {
    height: 2px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.30);
}
.desktop-page-slider::-moz-range-track {
    height: 2px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.30);
}
.desktop-page-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--slider-color);
    border: 1.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    margin-top: -5px;       /* (12-2)/2 = 5 居中 */
    transition: transform 0.12s ease;
}
.desktop-page-slider::-webkit-slider-thumb:hover {
    transform: scale(1.18);
}
.desktop-page-slider::-webkit-slider-thumb:active {
    transform: scale(1.3);
}
.desktop-page-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--slider-color);
    border: 1.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    transition: transform 0.12s ease;
}
.desktop-page-slider::-moz-range-thumb:hover {
    transform: scale(1.12);
}
.desktop-page-slider::-moz-range-thumb:active {
    transform: scale(1.25);
}
/* 浮动 tooltip(滑条在下部 → tooltip 在滑条上方):内含缩略图 + 页码文字
   - 单页模式 → 显示一张缩略图
   - 双页模式 → 显示两张缩略图并排,页码居中在它们正下方 */
#desktopPageSliderTip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    padding: 0;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transform: translate(-50%, -100%);
    margin-top: -12px;
    opacity: 0;
    transition: opacity .12s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
#desktopPageSliderTip .thumbs {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    /* 用 drop-shadow 给整组缩略图加阴影,比 box-shadow 沿"组合轮廓"投影,
       双页时不会在两张缩略图之间出现阴影分割线 */
    filter:
        drop-shadow(0 4px 14px rgba(0,0,0,0.45))
        drop-shadow(0 1px 3px rgba(0,0,0,0.35));
}
#desktopPageSliderTip .thumb {
    display: block;
    width: 110px;
    max-height: 150px;
    border-radius: 4px;
    background: #fff;
    object-fit: contain;
    box-shadow: none;     /* 阴影统一交给 .thumbs filter */
}
#desktopPageSliderTip .thumb[hidden] { display: none; }
/* 双页:两张缩略图紧贴(模拟书脊),左右两端各圆角,中缝直角 */
#desktopPageSliderTip.is-double .thumb-left  {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#desktopPageSliderTip.is-double .thumb-right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* 页码:在缩略图正下方居中 */
#desktopPageSliderTip .text {
    font-size: 13px;
    line-height: 1;
    padding: 4px 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.78);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#desktopPageSliderTip .text .cur {
    color: var(--brand-color, #ffd54f);
    font-weight: 700;
}
#desktopPageSliderTip .text .sep { opacity: 0.6; margin: 0 2px; }
#desktopPageSliderTip .text .total { opacity: 0.8; font-weight: 500; }

/* ─── 移动端内联功能图标（原 more 抽屉里的图标） ─── */
/* 布局策略：
 *   - 图标行整宽，所有图标 space-around 均布，自然居中
 *   - 当数量过多放不下时（默认能容纳 ~7 个），允许横向滚动且隐藏滚动条
 *   - 命中区按 Apple HIG / Material 标准放大到 ≥40px，按压有可见反馈
 *   - 给溢出方向加渐变蒙版，暗示可滚动
 */
.flipbook-controls-mobile-bar .mobile-inline-icons {
    display: flex;
    align-items: center;           /* 子项（每个图标）在本容器内垂直居中 */
    align-self: center;            /* 本块在控件行（mobile-bar-row-controls）内垂直居中 */
    justify-content: center;
    gap: 0;
    flex: 1 1 auto;
    width: 100%;
    min-height: 44px;              /* 保证容器有最小高度，让 align-items 居中有"中线"可对齐 */
    line-height: 1;                /* 避免外层行高干扰图标字形的垂直中线 */
    /* 图标过多时横向滚动，不撑破工具栏 */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    padding: 0 4px 30px 4px;        /* 底部 30px padding 把图标整体上抬，不影响 slider 行 */
    /* 右侧渐变蒙版，提示可向右滚（无溢出时不可见） */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
}
.flipbook-controls-mobile-bar .mobile-inline-icons::-webkit-scrollbar { display: none; }
.flipbook-controls-mobile-bar .mobile-inline-icon {
    flex: 0 0 50px;                       /* 50×50 命中区（从 40 加大 10px） */
    align-self: center;                   /* 自身在父行（mobile-inline-icons）内垂直居中 */
    width: 50px;
    height: 50px;
    /* 覆盖 index.min.css 中 .moreIcon 的 margin/padding，否则会破坏 50×50 盒子的对齐 */
    margin: 0 !important;
    padding: 0 !important;
    font-size: 32px;                      /* 字形图标随容器同步放大 10px (22 → 32) */
    line-height: 1;
    vertical-align: middle;
    border-radius: 12px;
    box-sizing: border-box;
    cursor: pointer;
    color: inherit;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, transform .1s ease;
}
/* 隐藏 iconfont ::before 字形 —— 当 SVG 通过 v-html 注入时，::before 会占一行把
   SVG 挤到下方，造成图标"上下两部分"。彻底关闭 ::before 输出，让 grid cell 内
   只剩 SVG 一个子项，精确居中 */
.flipbook-controls-mobile-bar .mobile-inline-icon.svghidden::before {
    content: none !important;
    display: none !important;
}
/* v-html 注入的 SVG 走 grid 自身对齐 */
.flipbook-controls-mobile-bar .mobile-inline-icon > svg {
    align-self: center;
    justify-self: center;
}
.flipbook-controls-mobile-bar .mobile-inline-icon:active {
    background-color: rgba(128, 128, 128, 0.18);
    transform: scale(0.92);
}
@media (hover: hover) {
    .flipbook-controls-mobile-bar .mobile-inline-icon:hover {
        background-color: rgba(128, 128, 128, 0.10);
    }
}
.flipbook-controls-mobile-bar .mobile-inline-icon svg {
    width: 32px;                   /* SVG 图标随容器同步放大 10px (22 → 32) */
    height: 32px;
    display: block;                /* block 才能被 flex align-items 精确居中（inline svg 会带 baseline 偏移） */
    margin: auto;                  /* 兜底：在 inline-flex 父盒内绝对居中 */
}

/* 旧版 more 触发按钮（保留 selector 兼容，但不再渲染） */
.flipbook-controls-mobile-bar .mobile-more-trigger {
    display: none !important;
}
/* 覆盖 index.min.css 的 ._nowpage 默认样式（CDN 版本带 position:absolute / left:10px / border:1px）：
   移动端工具栏中我们不需要这些，要的是 flex 居中、无边框、文字垂直居中 */
.flipbook-controls-mobile-bar .mobile-nowpage {
    display: inline-flex !important;
    align-items: baseline;
    justify-content: center;
    text-align: center;
    margin: 0;
    /* 精致的可点击胶囊：中性半透明底、无硬边、柔和圆角 */
    padding: 0px 25px !important;
    border: none !important;
    border-radius: 999px !important;
    background: rgba(128, 128, 128, 0.13);
    cursor: pointer;
    position: static !important;
    left: auto !important;
    height: auto !important;
    line-height: 1;
    transition: background 0.18s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.flipbook-controls-mobile-bar .mobile-nowpage:active {
    background: rgba(128, 128, 128, 0.22);
    transform: scale(0.96);
}
/* 内部两个 span：当前页码强调，"/总页数" 弱化 */
.flipbook-controls-mobile-bar .mobile-nowpage > span {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    position: static !important;
    top: auto !important;
}
.flipbook-controls-mobile-bar .mobile-nowpage > #footer_current_page {
    font-size: 15px;
    font-weight: 600;
    line-height: 1 !important;
    top: auto !important;
}
/* "/总页数" 用更小字号 + 降透明度，与当前页拉开层次 */
.flipbook-controls-mobile-bar .mobile-nowpage > span:last-child {
    font-size: 12px !important;
    opacity: 0.55;
    margin-left: 1px;
}
.flipbook-controls-mobile-bar .desktop-inline-icon,
.flipbook-controls-mobile-bar .footer_logo,
.flipbook-controls-mobile-bar .zoom-panel-wraper {
    display: none !important;
}

/* ─── 移动端顶部 logo（左上角，替代书名位置）─── */
.header-mobile .mobile-header-logo {
    display: inline-flex;
    align-items: center;
    height: 32px;
    margin-left: 8px;
    text-decoration: none;
    line-height: 0;
    max-width: 140px;
}
.header-mobile .mobile-header-logo img {
    max-height: 28px;
    max-width: 110px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ─── 桌面端 zoom 面板浮层：加深底色覆盖 CDN indexPage.min.css 的默认浅灰半透明 ─── */
.notmobile.zoom-panel-wraper,
.flipbook-controls .zoom-panel-wraper {
    background-color: rgba(10, 10, 10, 0.7) !important;
}
.notmobile.zoom-panel-wraper:hover,
.flipbook-controls .zoom-panel-wraper:hover {
    background-color: rgba(10, 10, 10, 0.9) !important;
}

/* ─── 移动端：水印 .mark（由 app.js 动态 append 到 .page-footer）改放到左上角 ─── */
/* （原先在此把 .mark 整体 display:none 是为了挡住底部出现，但水印是 fixed 定位的
    独立块，不会再受底部布局影响；保留 display:none 反而导致 fadeLogoTime 的交替
    无法显示 mark。已删除该隐藏规则。） */

@media (max-width: 768px) {
    /* mark 由 features/mobile-mark-logo-alt.js 搬进 .header-mobile 的 .mobile-alt-slot 槽位
       内，与 logo 在同一个绝对定位容器中通过 opacity 交替显示。
       注意：position 不设 static —— 让 JS 注入的 .mobile-alt-slot > .mark
       position:absolute 生效（与 logo 同位重叠） */
    .header-mobile a.mark,
    .header-mobile a.mobile-header-mark {
        display: inline-flex;
        align-items: center;
        height: 32px;
        padding: 0 !important;
        line-height: 0;
        text-decoration: none;
        z-index: auto !important;
    }
    .header-mobile a.mark img,
    .header-mobile a.mobile-header-mark img {
        width: auto !important;
        height: auto !important;
        max-height: 28px;
        max-width: 110px;
        display: block;
        object-fit: contain;
    }
}


/* ─── input-group 成组：分享链接 ─── */
.share-link-group {
    display: flex !important;
    align-items: stretch;
    width: 100%;
}
.share-link-group #shareLinkInput { flex: 1; }
.share-link-group #shareLinkInput .el-input__inner {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}
.share-link-group > .el-button--primary {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: 0 !important;
    white-space: nowrap;
}


/* ─── input-group 成组：销售线索 手机 + 验证码按钮 ─── */
.lead-mobile-group {
    display: flex !important;
    align-items: stretch;
    width: 100%;
}
.lead-mobile-group > #mobile {
    flex: 1;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}
.lead-mobile-group > .getSms {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px;
}


/* ─── 搜索结果命中词高亮 ─── */
.search-list mark.search-hit,
.skinbar mark.search-hit {
    background: #ffeb3b;
    color: #000;
    padding: 0 2px;
    border-radius: 2px;
}
/* 搜索结果项截到两行（命中词在 highlightSearch 中已被居中截取） */
.search-list .item span:last-child {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.4;
}


/* ─── moreDiv（移动端下工具栏展开的抽屉）：所有图标垂直中心对齐 ─── */
.moreDiv {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
.moreDiv .moreIcon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}
.moreDiv .moreIcon {
    font-size: 32px;
}
.moreDiv .moreIcon svg {
    display: block;
    width: 32px;
    height: 32px;
}

/* ─── loading-pic book spine：与上下边线连续的中线 ─── */
/* 之前做法：在 .book__page::before 上画线，但 page #5 有 rotateY(-180deg) 翻转，
   会导致 ::before 也一起翻转、位置混乱、与边线不连续。
   现改为：在 .book 父容器自身上画一根固定的竖线，独立于翻页动画，绝对位置稳定。 */
.loading-pic.book {
    position: relative;
}
.loading-pic.book::before {
    content: '';
    position: absolute;
    left: 50%;             /* 书脊在书页中心（page 旋转轴 transform-origin: 0% 50% = left:50%） */
    margin-left: -0.9px;   /* 1.8px 粗线水平居中在 left:50% 的轴上 */
    top: -3px;             /* 与 3px 顶部边线连续 */
    bottom: -3px;          /* 与 3px 底部边线连续 */
    width: 1.8px;          /* 书脊粗细：原 3px 的 3/5 */
    background: var(--book-line, #999);
    z-index: -10;          /* 沉到所有 page 之后（page 用 z-index: -1 ~ -5） */
    pointer-events: none;
}

/* ─── fb-skeleton spinner ─── */
@keyframes fb-spin { to { transform: rotate(360deg); } }