/* ============================================================
   gaobeicms 默认主题（PC 响应式）
   在 135 主题里，这一份只负责「商城 / 会员」等后台功能页的通用组件样式，
   页面主视觉由 main.css 决定。这里把配色变量换成 135 的砖红 / 暖棕体系，
   让功能页与前台视觉是一套颜色（改这一处即可全站换肤）。
   ============================================================ */
:root {
    --primary: #912F02;
    --primary-dark: #6E2401;
    --accent: #FD6716;
    --bg: #F7F0E8;
    --card: #ffffff;
    --text: #3A2318;
    --text-2: #6F5A4B;
    --border: #D9C7B5;
    --radius: 8px;
    --shadow: 0 2px 10px rgba(58, 35, 24, .08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

.container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* ---------- 顶部导航 ---------- */
.site-header {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 6px rgba(16, 24, 40, .05);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 72px;
    padding: 0; /* 左右内边距归零，使页头内容与正文/页脚最外边缘对齐 */
}
.logo { display: flex; align-items: center; flex: none; gap: 10px; font-size: 22px; font-weight: 700; color: var(--primary); }
.logo-img { max-height: 55px; width: auto; }
.logo-text { letter-spacing: 1px; }
.logo-text::after { content: ""; }

.main-nav { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }
.main-nav ul { display: flex; align-items: center; }
.main-nav .mn-ic { display: none; } /* 抽屉菜单栏目图标：桌面端隐藏，仅移动端 ☰ 弹窗内显示 */
.main-nav li { position: relative; }
.main-nav a {
    display: block;
    /* 左右内边距 20px→12px：栏目多（当前 10 个）且新增了语言切换器后，
       20px 会让整条头部超出一行容量，被 header.js 判为放不下而折叠成移动端 ☰ 菜单。
       12px 让 1440px 以上屏幕稳定保持横向导航，文字本身大小不变。 */
    padding: 8px 12px;
    font-size: 15.5px;
    line-height: 1.5;
    color: #2b3445;
    letter-spacing: .02em;
    white-space: nowrap;
    transition: color .2s;
}
.main-nav a::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 0;
    height: 2px;
    background: #df8f36;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .2s;
}
.main-nav a:hover { color: #df8f36; }
.main-nav a.active { color: #df8f36; }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
/* 中屏（≤1366px）再收紧一档菜单内边距：栏目较多时优先压缩间距，而不是直接折叠成 ☰ 菜单。
   12px→10px，10 个栏目共省约 40px，可让 1280/1366 屏继续显示横向导航。 */
@media (max-width: 1366px) {
    .main-nav a { padding: 8px 10px; }
    .main-nav a::after { left: 10px; right: 10px; }
}
/* 「⋯」收尾：栏目多或文字长（日语等全角语言，横排比中文宽一倍）时，header.js 会把排不下的尾部
   栏目收进这个下拉，让 PC 端保持横向导航，而不是整条切成 ☰ 抽屉。默认不显示，收了栏目才出现。 */
.main-nav .nav-more { display: none; position: relative; }
.main-nav .nav-more.has-items { display: block; }
/* 按钮 40×40 / 图标 22px（原 34×34 / 18px）：尺寸必须与 header.js 的 MORE_BTN_SIZE 同步，
   否则脚本量出来的导航宽度与实际不符，会误判折叠。 */
.main-nav .nav-more-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; color: #3c4456; }
.main-nav .nav-more-btn svg { width: 22px; height: 22px; }
/* 图标按钮不需要横向导航那条下划线 */
.main-nav .nav-more-btn::after { display: none; }
/* 高亮挂到 li 上：鼠标离开按钮、进入面板途中（跨过 10px 间隙）时底色不闪 */
.main-nav .nav-more-btn:hover, .main-nav .nav-more:hover .nav-more-btn, .main-nav .nav-more.open .nav-more-btn { background: #f5f7fa; color: #df8f36; }
/* 展开只认 .open（由 header.js 的 mouseenter/mouseleave 控制）：
   纯 :hover 会在鼠标穿过按钮与面板之间的间隙时瞬间失效，导致下拉半路消失。 */
/* 当前页被收进面板时，按钮跟着变主色，否则看起来像"这一页不在导航里" */
.main-nav .nav-more-btn.on { color: #df8f36; }
/* 面板水平居中于「⋯」按钮（left:50% + translateX(-50%)）；
   面板比按钮宽得多，靠右侧时可能顶出屏幕，由 header.js 的 placeMorePanel() 量完再平移回来。 */
.main-nav .nav-more-list { position: absolute; top: calc(100% + 10px); left: 50%; right: auto; transform: translateX(-50%); min-width: 190px; padding: 6px; display: none; background: #fff; border: 1px solid #e9ebf0; border-radius: 10px; box-shadow: 0 18px 44px rgba(16, 24, 40, .16); z-index: 60; }
/* 用透明伪元素桥接按钮与面板之间的 10px 间隙：鼠标经过时仍算悬停在 .nav-more 内，下拉不会中途消失。
   注意：绝对定位伪元素的包含块是面板的 padding box，比 border box 低 1px（面板有 1px 边框），
   所以 top:-10px/height:10px 会在最上面漏出 1px 缝，鼠标正好穿过那条缝时 :hover 失效 → 下拉消失。
   这里改为 -12px/12px（向上多盖 1px、向下与面板重叠 1px），整段间隙无死角。 */
.main-nav .nav-more-list::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
/* 展开只认 .open：由 header.js 的 mouseenter/mouseleave（带 160ms 延迟关闭）控制，
   不再用 :hover 展开 —— 鼠标穿过按钮与面板之间的间隙时 :hover 会断，下拉会半路消失。 */
.main-nav .nav-more.open .nav-more-list { display: block; }
.main-nav .nav-more-list li { display: block; }
/* 面板里的栏目沿用菜单项的字号，但要去掉横向导航的下划线与居中对齐 */
.main-nav .nav-more-list a { display: block; padding: 9px 12px; border-radius: 7px; font-size: 14.5px; white-space: nowrap; }
.main-nav .nav-more-list a::after { display: none; }
.main-nav .nav-more-list a:hover, .main-nav .nav-more-list a.active { background: #f5f7fa; color: #df8f36; }
/* 折叠成 ☰ 时栏目全部还原、抽屉里列全，不需要「⋯」 */
.site-header.nav-mobile .main-nav .nav-more { display: none; }
/* ---------- 二级栏目下拉（只有 PC 有：≥821px 才展开，手机端整块不显示） ----------
   一级栏目下挂二级栏目时，鼠标悬停自动落下这块面板。它和上面的「⋯」收纳下拉有两处不同：
   1. 展开走纯 :hover，不用 JS 开关 —— 鼠标从栏目移到面板全程都在 li 之内（面板外层那 10px
      透明 padding 就是给鼠标走的），不会像「⋯」那样中途断掉，也就没有延迟关闭那套；
   2. 面板居中于所属栏目，靠右的栏目展开会顶出视口 —— 平移量由 header.js 量出来写到 li 的
      --mn-dx 上，CSS 只把它拼进 transform，基准的「居中」保持不变（同 placeMorePanel 的思路）。
   选择器一律带 `> ul > li`：被收进「⋯」面板的栏目不再展开二级（那里没有展开的空间），
   手机端 ☰ 抽屉里也不显示（下面的基础规则先把它藏掉，再由媒体查询在 PC 端放开）。 */
.main-nav .mn-drop { display: none; }
.main-nav .mn-ar { display: none; }

@media (min-width: 821px) {
    /* 有二级栏目的主栏目：名称右侧跟一个小箭头。
       基础规则里 .main-nav a 是 display:block，svg 属块级元素会独占一行 → 箭头掉到名称下方，
       这里只把「带二级的」这一项改成 flex 横排，箭头才真正落在名称右边（居中于文字）；
       无二级的栏目不受影响，保持原 block 行为。 */
    .main-nav > ul > li.has-sub > a { display: flex; align-items: center; }

    /* 名字右侧的小箭头（有二级栏目才有）：svg 本身画的是朝右的尖角，
       默认转 90° 朝下（提示“这里有二级”）；hover 时转到 -90° 朝上，跟面板一起“打开”，
       鼠标移开后 :hover 失效，自动回到默认的朝下 */
    .main-nav > ul > li.has-sub > a .mn-ar { display: block; flex: none; width: 12px; height: 12px; margin-left: 4px; color: #9aa4b2; transform: rotate(90deg); transition: transform .2s, color .2s; }
    .main-nav > ul > li.has-sub > a:hover .mn-ar,
    .main-nav > ul > li.has-sub > a.active .mn-ar { color: #df8f36; }
    .main-nav > ul > li.has-sub:hover > a .mn-ar { transform: rotate(-90deg); }

    /* 外层只做两件事：接住鼠标（含顶部 16px 透明间隙）+ 定位；白卡片是内层 .mn-drop-in。
       这 16px 既是鼠标通道，又让卡片落在头部下沿之外（栏目项在 72px 的头部里垂直居中，
       它下沿到头部下沿正好 16px 上下）—— 卡片完全露在导航条下面，不再压着头部底边。
       关闭态 opacity:0 + pointer-events:none：看不见，也不挡住下面的页面内容 */
    .main-nav > ul > li.has-sub > .mn-drop {
        display: block;
        position: absolute;
        left: 50%;
        top: 100%;
        z-index: 60;
        padding-top: 16px;
        opacity: 0;
        pointer-events: none;
        transform: translateX(calc(-50% + var(--mn-dx, 0px))) translateY(-6px);
        transition: opacity .18s ease, transform .18s ease;
    }
    .main-nav > ul > li.has-sub:hover > .mn-drop {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(calc(-50% + var(--mn-dx, 0px))) translateY(0);
    }

    /* 卡片：配色与圆角跟「⋯」收纳面板保持一致，宽度随栏目名走（最长到 280px 换行） */
    .main-nav .mn-drop-in { position: relative; display: block; min-width: 176px; max-width: 280px; padding: 8px; background: #fff; border: 1px solid #e9ebf0; border-radius: 12px; box-shadow: 0 18px 44px rgba(16, 24, 40, .16); }
    /* 卡片顶部的小尖角指回所属栏目，看起来是从导航条上“挑”下来的 */
    .main-nav .mn-drop-in::before { content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -5px; background: #fff; border-left: 1px solid #e9ebf0; border-top: 1px solid #e9ebf0; transform: rotate(45deg); }
    .main-nav .mn-drop-in li { display: block; }
    /* 二级项：去掉横向导航那条下划线（同 .nav-more-list），字号小半档 */
    .main-nav .mn-drop-in a { display: block; position: relative; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; line-height: 1.5; white-space: normal; color: #2b3445; }
    .main-nav .mn-drop-in a::after { display: none; }
    .main-nav .mn-drop-in a:hover { background: #f5f7fa; color: #df8f36; }
    /* 当前正在看的那个二级栏目：左侧一条主色竖条 + 加粗，比整块底色更好认 */
    .main-nav .mn-drop-in a.active { background: #f5f7fa; color: #df8f36; font-weight: 600; }
    .main-nav .mn-drop-in a.active::before { content: ""; position: absolute; left: 3px; top: 50%; width: 3px; height: 14px; margin-top: -7px; border-radius: 2px; background: #df8f36; }
}
/* 汉堡按钮：三条杠用 span 画，点击后渐变成 ×（.open 由 header.js 同步）。
   基础隐藏（仅折叠态显示）；固定宽高保证变形时尺寸不变，不引起头部跳动。 */
.nav-toggle { display: none; position: relative; width: 22px; height: 22px; margin-left: auto; flex: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nav-toggle .nt-bar { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; border-radius: 2px; background: #2b3445; transform: translate(-50%, -50%); transition: transform .28s ease, opacity .2s ease; }
.nav-toggle .nt-bar:nth-child(1) { transform: translate(-50%, calc(-50% - 6px)); }
.nav-toggle .nt-bar:nth-child(3) { transform: translate(-50%, calc(-50% + 6px)); }
/* 展开态：上/下两条杠旋转交叉成 ×，中间一条淡出 */
.nav-toggle.open .nt-bar:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle.open .nt-bar:nth-child(2) { opacity: 0; transform: translate(-50%, -50%) scaleX(.3); }
.nav-toggle.open .nt-bar:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

/* 头部右侧：圆形搜索按钮 + 下拉框 */
.header-right { position: relative; flex: none; }
.search-toggle {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid #dfe4ec;
    background: #fff;
    color: #3c4456;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .2s;
}
.search-toggle:hover, .search-toggle.open { background: var(--primary); border-color: var(--primary); color: #fff; }
.search-drop {
    position: absolute;
    right: 0; top: calc(100% + 16px);
    width: 430px; max-width: 88vw;
    display: none;
    background: #fff;
    border: 1px solid #e6e9ef;
    box-shadow: 0 18px 44px rgba(16, 24, 40, .16);
    padding: 10px;
    z-index: 60;
}
.search-drop.open { display: flex; }
.search-drop input {
    flex: 1; min-width: 0;
    border: 1px solid #dfe4ec; outline: none; background: #fff;
    padding: 8px 14px; font-size: 14px; color: #2b3445;
}
.search-drop input:focus { border-color: var(--primary); }
.search-drop button {
    border: none; background: var(--primary); color: #fff;
    padding: 0 24px; cursor: pointer; font-size: 14px;
    transition: background .2s;
}
.search-drop button:hover { background: var(--primary-dark); }

/* ☰ 抽屉上沿的三角箭头：PC 横向导航栏里不存在，默认不显示。
   显示规则两处：mobile.css 的 820px 断点、本文件下方的 .site-header.nav-mobile 段。
   svg 用面板底色填充 + currentColor 描边（currentColor 由各自规则设为面板描边色），
   底边多留 1px，正好盖掉面板上沿那条横线，让尖角内部与面板连通。 */
.main-nav .drawer-tip { display: none; }
.main-nav .drawer-tip svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* 抽屉内搜索：位于移动端 ☰ 折叠菜单（#mainNav）顶部，桌面端不渲染、默认随菜单隐藏 */
.drawer-search { display: none; }
.drawer-search input {
    flex: 1; min-width: 0; height: 34px;
    padding: 0 12px; font-size: 13.5px; color: #2b3445;
    background: #fff; border: 1px solid #dfe4ec; border-radius: 6px;
    outline: none;
}
.drawer-search input:focus { border-color: var(--primary); }
.drawer-search button {
    flex: none; height: 34px; padding: 0 14px;
    border: none; border-radius: 6px;
    background: var(--primary); color: #fff;
    font-size: 13.5px; cursor: pointer;
    transition: background .2s;
}
.drawer-search button:hover { background: var(--primary-dark); }

/* ---------- 首页横幅 ---------- */
.hero {
    background: linear-gradient(120deg, #16233c 0%, #25407a 55%, #5c7aa0 100%);
    color: #fff;
    padding: 72px 0;
    text-align: center;
}
.hero h1 { font-size: 34px; font-weight: 700; letter-spacing: 1px; }
.hero p { margin: 14px auto 0; max-width: 700px; color: rgba(255,255,255,.78); }

/* ---------- 主体与面板 ---------- */
/* 栏目页底部：内容与页脚之间的留白统一由这里的 padding-bottom 控制
   （PC 端 90px，手机端 20px 见 mobile.css），最后一个板块自带的下外边距归零，避免叠加放大。 */
.page-main { padding: 34px 0 90px; min-height: 60vh; }
.page-main > :last-child { margin-bottom: 0; }
/* 单页/文档正文阅读宽度 */
.doc-wrap { max-width: 880px; margin: 0 auto; }

.panel {
    background: var(--card);
    border: 1px solid #e9ebf0;
    border-radius: 6px;
    padding: 26px 30px;
    margin-bottom: 24px;
}
.panel-title {
    display: flex; align-items: center;
    font-size: 19px;
    font-weight: 700;
    color: #242b3a;
    padding-left: 0;
    margin-bottom: 18px;
}
.panel-title::before {
    content: "";
    flex: none;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--primary);
    margin-right: 12px;
}
.page-title { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.empty-tip { color: var(--text-2); text-align: center; padding: 26px 0; }
/* 栏目封面：栏目设了封面就当页面横幅显示；没设封面时整块不存在（编辑态那个虚框占位
   由 front-edit.css 负责，访客看不到），所以这里只写有图时的样式 */
.type-cover { margin-bottom: 20px; border-radius: 8px; overflow: hidden; line-height: 0; }
.type-cover img { display: block; width: 100%; height: auto; }

/* 前台就地编辑的「占位块」（设置LOGO / 设置栏目封面这类）：
   模板里始终输出，但默认全站隐藏 —— 只有管理员编辑态由 front-edit.css 的
   body.gb-fe-on .gb-ph 规则把它显形。这条必须放在主题样式里，
   因为访客根本不加载 front-edit.css，占位块绝不能让他们看见。 */
.gb-ph { display: none; }

/* 面包屑 */
.crumb-bar { margin-bottom: 16px; font-size: 14px; color: var(--text-2); }
.crumb-bar a:hover { color: var(--primary); }
.crumb-bar .crumb-ico { display: inline-block; margin-right: 7px; vertical-align: -2px; line-height: 0; }
.crumb-bar .crumb-ico svg { display: block; }
.crumb-bar .sep { margin: 0 7px; }
.crumb-bar .cur { color: var(--text-2); }

/* 栏目描述 */
.type-desc { margin-bottom: 18px; font-size: 14px; color: var(--text-2); }

/* 子栏目导航 */
.sub-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.sub-nav a {
    padding: 7px 18px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 30px;
    color: var(--text-2);
    background: #fff;
    transition: all .2s;
}
.sub-nav a:hover { color: var(--primary); border-color: var(--primary); }
.sub-nav a.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- 图文列表 ---------- */
.arc-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 2px;
    border-bottom: 1px dashed var(--border);
}
.arc-list li:last-child { border-bottom: none; }
.arc-thumb { width: 96px; height: 64px; flex-shrink: 0; border-radius: 4px; overflow: hidden; }
.arc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.arc-info { flex: 1; min-width: 0; }
.arc-title { display: inline-block; max-width: 100%; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-title:hover { color: var(--primary); }
.arc-desc { font-size: 13px; color: var(--text-2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-time { color: #a0a9ba; font-size: 13px; flex-shrink: 0; }

/* ---------- 图片九宫格 ---------- */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.img-card { position: relative; display: block; border-radius: 4px; overflow: hidden; aspect-ratio: 16/10; background: #eef1f6; }
.img-cover { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform .35s; }
.img-card:hover .img-cover { transform: scale(1.06); }
.img-name {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 26px 10px 8px;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 文章正文 ---------- */
.article-body { font-size: 16px; line-height: 2; letter-spacing: .3px; color: #3a4250; word-break: break-word; }
.article-body p { margin: 0 0 18px; }
.article-body img { max-width: 100%; height: auto; margin: 24px auto; border-radius: 6px; box-shadow: 0 14px 34px rgba(15,35,75,.10); }
.article-body figure { margin: 26px 0; }
.article-body figcaption { margin-top: 8px; font-size: 13px; color: var(--text-2); text-align: center; }
.article-body h1, .article-body h2, .article-body h3 { margin: 30px 0 14px; line-height: 1.4; }
.article-body h2 { padding-left: 12px; border-left: 4px solid var(--primary); }
.article-body ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; }
.article-body blockquote { border-left: 4px solid var(--primary); background: #f7f9fd; padding: 10px 16px; margin: 0 0 16px; color: var(--text-2); }
.lead { font-size: 15px; color: var(--text-2); border-bottom: 1px dashed var(--border); padding-bottom: 14px; margin-bottom: 16px; }

.meta {
    display: flex; flex-wrap: wrap; gap: 8px 20px;
    padding: 10px 0 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
    font-size: 13px; color: var(--text-2);
}

.field-list { display: flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 4px; margin-top: 18px; overflow: hidden; }
.field-list dt { flex: 0 0 130px; background: #f8fafd; padding: 8px 14px; font-weight: 600; }
.field-list dd { flex: 1; min-width: 220px; padding: 8px 14px; border-left: 1px solid var(--border); word-break: break-all; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 10px; }
.gallery-item { display: block; border-radius: 4px; overflow: hidden; background: #eef1f6; }
.gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .35s; }
.gallery-item:hover img { transform: scale(1.05); }

.pn-nav div { margin: 8px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-nav .no { color: #a0a9ba; }

/* ---------- 分页 ---------- */
.pagination { margin: 22px 0 4px; text-align: center; list-style: none; padding: 0; }
.pagination li { display: inline-block; margin: 0 3px 6px; }
.pagination a, .pagination span {
    display: inline-block;
    min-width: 34px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font-size: 14px;
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination li.current span, .pagination li.active span,
.pagination li.current a, .pagination li.active a { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination .disabled { color: #c3c9d4; cursor: not-allowed; }

/* ---------- 页脚 ---------- */
.site-footer {
    background: #1b1f27;
    color: #9aa1ae;
    font-size: 14px;
    line-height: 1.9;
    border-top: 3px solid #2a303b;
}
.site-footer a { color: #a7aebb; transition: color .2s; }
.site-footer a:hover { color: #fff; }
.site-footer h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .06em;
    margin: 2px 0 20px;
}

/* 主体栅格 */
.footer-main {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.35fr 150px;
    gap: 42px;
    padding: 54px 0 46px; /* 左右内边距归零，使页脚内容与正文/页头最外边缘对齐 */
}

/* 品牌区 */
.footer-brand .footer-logo { display: inline-flex; align-items: center; gap: 12px; }
.footer-brand-name { font-family: "YouYuan","幼圆","Yuanti SC","PingFang SC","Microsoft YaHei",sans-serif; font-size: 34px; font-weight: 800; color: #fff; letter-spacing: 1px; line-height: 1; }
.footer-brand-name .cms { color: #ff6b2c; }
.footer-desc {
    margin-top: 18px;
    color: #9aa1ae;
    font-size: 14px;
    line-height: 1.9;
    max-width: 320px;
}
.footer-slogan { margin-top: 10px; color: #5f6673; font-size: 13px; }

/* 链接栏 */
.footer-col li { font-size: 14px; }
.footer-col li a { display: inline-block; padding: 3px 0; color: #a7aebb; }
.footer-col li a:hover { color: var(--primary); }

/* 联系方式 */
.footer-c-list li { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-start; font-size: 14px; }
.footer-c-list .fc-dot {
    flex: none; width: 3px; height: 15px; margin-top: 6px;
    border-radius: 2px; background: linear-gradient(180deg, #ff8a3d, #ff6b2c);
}
.footer-c-list .fc-main { flex: 1; min-width: 0; }
.footer-c-list .fc-label {
    display: block; color: #7e8591; font-size: 12px;
    letter-spacing: .16em; margin-bottom: 2px;
}
.footer-c-list .fc-tel {
    display: inline-block;
    font-size: 23px; font-weight: 700; color: #fff;
    letter-spacing: .5px; line-height: 1.4;
}
.footer-c-list .fc-tel:hover { color: #fff; }
.footer-c-list .fc-value { color: #a7aebb; word-break: break-all; }

/* 二维码 */
.footer-qr { text-align: center; }
.qr-box {
    width: 124px; height: 124px;
    margin: 0 0 12px auto; /* 右对齐，使二维码右侧贴到容器最右 */
    border-radius: 4px;
    overflow: hidden;
}
.qr-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.footer-qr p { color: #8f96a2; font-size: 13px; letter-spacing: .12em; }

/* 版权条 */
.footer-bar {
    background: #13161b;
    border-top: 1px solid #262a31;
    font-size: 13px;
    color: #767d89;
}
.footer-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px 20px;
    flex-wrap: wrap;
    padding: 16px 24px;
}
.footer-bar a { color: #8b919d; }
.footer-bar a:hover { color: #fff; }
.fb-right { display: flex; align-items: center; gap: 20px; }
.fb-powered { color: #5a606c; }

/* ---------- 移动端 ---------- */
@media (max-width: 1180px) {
    .footer-main { grid-template-columns: 1fr 1fr; gap: 30px; }
    .footer-brand, .footer-qr { grid-column: 1 / -1; }
    .footer-qr { display: flex; align-items: center; justify-content: center; gap: 18px; }
    .footer-qr .qr-box { margin: 0; }
}

/* ☰ 悬浮菜单展开动画 */
@keyframes gbNavDrop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 动态移动头部：当横向菜单会与 logo/工具区重叠时，由 JS 给 .site-header 加 .nav-mobile 触发（任意屏宽生效） */
/* 折叠头部下：列间距 8px + 去掉工具栏 6px 右外边距，让购物车与头像、☰ 间距均匀（与 mobile.css 的 820px 断点保持一致） */
.site-header.nav-mobile .header-inner { flex-wrap: nowrap; height: auto; padding: 16px 20px; position: relative; gap: 6px 8px; }
.site-header.nav-mobile .logo { flex: 0 1 auto; min-width: 0; height: 44px; }
/* 折叠态下 LOGO 同样可压窄等比缩小（与 mobile.css 的 820px 断点保持一致） */
.site-header.nav-mobile .logo .logo-img { max-width: 100%; max-height: 100%; min-width: 0; width: auto; height: auto; object-fit: contain; }
/* ☰ 折叠态：padding 对称 4px 只放大点击热区（30×30），不影响三条杠的几何中心 */
.site-header.nav-mobile .nav-toggle { flex: none; display: block; order: 2; margin-left: 0; padding: 4px; }
.site-header.nav-mobile .header-tools { flex: none; order: 1; margin-left: auto; margin-right: 0; }
/* 购物车挪到 ☰ 左边 + 去掉 38px 圆形外框（边框/白底）、调淡颜色、容器贴合图标（与 mobile.css 的 820px 断点保持一致） */
.site-header.nav-mobile .header-tools .ht-cart { order: 2; width: auto; height: auto; padding: 4px; border: 0; background: transparent; color: #98a1b0; }
.site-header.nav-mobile .header-tools .ht-cart:hover { background: transparent; border-color: transparent; color: #98a1b0; }
/* 购物车图标：线条加粗 + 稍微放大（与 mobile.css 的 820px 断点保持一致） */
.site-header.nav-mobile .header-tools .ht-cart svg { width: 21px; height: 21px; stroke-width: 2.4; }
/* 容器变小后，数量角标重新贴回图标右上角（与 mobile.css 的 820px 断点保持一致） */
.site-header.nav-mobile .header-tools .ht-cart-num { top: -4px; right: -2px; }
/* ☰ 菜单：圆角小卡片，右上角悬浮，四周留白不贴边；搜索框在菜单底部
   宽度自适应：最小 220px，栏目标题过长时随内容加宽（标题不换行），最宽不超过 100vw - 40px */
.site-header.nav-mobile .main-nav { position: absolute; top: calc(100% + 8px); right: 20px; left: auto; width: max-content; min-width: 220px; max-width: calc(100vw - 40px); display: none; flex-direction: column; align-items: stretch; justify-content: flex-start; background: #fff; border: 1px solid #e9ebf0; border-radius: 10px; box-shadow: 0 18px 44px rgba(16, 24, 40, .16); padding: 14px; box-sizing: border-box; }
.site-header.nav-mobile .main-nav.open { display: flex; animation: gbNavDrop .18s ease-out; }
/* 折叠态抽屉上沿的三角箭头：线条 1px + 颜色 #e9ebf0，与面板描边完全一致。
   中心距面板右端 11px ＝ 头部右内边距 20 + ☰ 宽 22/2 − 面板 right 20（mobile.css 的 820px 断点为 16px，
   因为那边面板 right 是 15px）；right 再减 1px 是抵消面板自身 1px 边框。改这几处数字时需同步 */
.site-header.nav-mobile .main-nav.open .drawer-tip {
    display: block; position: absolute; top: -12px; right: -1px;
    width: 22px; height: 13px; color: #e9ebf0;
}
.site-header.nav-mobile .main-nav ul { flex-direction: column; align-items: stretch; }
.site-header.nav-mobile .main-nav li a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; white-space: nowrap; }
.site-header.nav-mobile .main-nav li a .mn-ic { display: inline-block; flex: none; width: 17px; height: 17px; }
.site-header.nav-mobile .main-nav li a .mn-tx { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.site-header.nav-mobile .main-nav li a:hover { background: #f5f7fa; }
.site-header.nav-mobile .main-nav li a.active { background: #f5f7fa; color: var(--primary); }
.site-header.nav-mobile .main-nav a::after { display: none; }
.site-header.nav-mobile .main-nav .drawer-search { display: flex; align-items: stretch; gap: 8px; width: 100%; padding-top: 12px; margin-top: 12px; border-top: 1px solid #eef1f5; }
.site-header.nav-mobile .header-right { display: none; } /* 折叠头部时搜索收进 ☰ 抽屉，默认隐藏 */

/* ============================================================
   搜索页
   ============================================================ */
.search-hero { text-align: center; padding: 14px 0 4px; }
.search-hero form { display: flex; justify-content: center; gap: 8px; max-width: 560px; margin: 14px auto 0; }
.search-hero .search-input { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 9px 14px; font-size: 15px; outline: none; background: #fff; }
.search-hero .search-input:focus { border-color: var(--primary); }
.search-btn { border: none; background: var(--primary); color: #fff; padding: 0 22px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.search-btn:hover { background: var(--primary-dark); }
.search-summary { color: var(--text-2); font-size: 14px; margin-bottom: 16px; }
.result-list li { padding: 16px 2px; border-bottom: 1px dashed var(--border); }
.result-list li:first-child { border-top: 1px dashed var(--border); }
.result-list a { font-size: 17px; }
.result-list .rl-desc { color: var(--text-2); font-size: 14px; margin-top: 6px; }
.result-list .rl-meta { color: #a0a9ba; font-size: 13px; margin-top: 6px; }

/* ============================================================
   联系我们 / 留言板
   ============================================================ */
.contact-layout { display: grid; grid-template-columns: 350px 1fr; gap: 22px; align-items: start; }
.contact-card h3 { font-size: 18px; margin-bottom: 14px; }
.contact-card ul { list-style: none; }
.contact-card li { padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: 15px; display: flex; gap: 10px; align-items: baseline; }
.contact-card li:last-child { border-bottom: none; }
.contact-card li span { color: var(--text-2); flex-shrink: 0; width: 56px; }
.contact-card .ticket { margin-top: 16px; padding: 14px; background: #f7f9fd; border-radius: 8px; color: var(--text-2); font-size: 13px; line-height: 1.8; }

.gbook-form .form-row { margin-bottom: 14px; }
.gbook-form .form-row.flex { display: flex; gap: 12px; }
.gbook-form .form-row.flex > div { flex: 1; }
.gbook-form label { display: block; font-size: 14px; margin-bottom: 6px; color: var(--text); }
.gbook-form label i { color: #f5222d; font-style: normal; margin-right: 3px; }
.gbook-form input[type="text"], .gbook-form input[type="tel"], .gbook-form input[type="email"], .gbook-form textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    outline: none;
    background: #fff;
    box-sizing: border-box;
    font-family: inherit;
}
.gbook-form input:focus, .gbook-form textarea:focus { border-color: var(--primary); }
.gbook-form textarea { min-height: 110px; resize: vertical; }
.gbook-form .cap-row { display: flex; gap: 10px; align-items: center; }
.gbook-form .cap-row input { width: 130px; }
.cap-text { font-size: 15px; color: var(--primary); background: #f0f4ff; border-radius: 6px; padding: 6px 12px; user-select: none; }
.gbook-form .btn-submit { border: none; background: var(--primary); color: #fff; padding: 10px 34px; font-size: 15px; border-radius: 8px; cursor: pointer; transition: background .2s; }
.gbook-form .btn-submit:hover { background: var(--primary-dark); }
.gbook-form .form-tip { font-size: 13px; color: #a0a9ba; margin-top: 8px; }

.gbook-list .gbook-item { padding: 16px 0; border-bottom: 1px dashed var(--border); }
.gbook-list .gbook-item:first-child { border-top: 1px dashed var(--border); }
.gbook-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.gbook-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.gbook-name { font-weight: 600; }
.gbook-time { color: #a0a9ba; font-size: 13px; }
.gbook-text { font-size: 15px; margin-top: 4px; }
.gbook-reply { margin-top: 10px; padding: 10px 14px; background: #f7f9fd; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; font-size: 14px; color: var(--text-2); }
.gbook-reply b { color: var(--accent); font-weight: 600; }

/* 前台轻提示 */
#gbTip {
    position: fixed; left: 50%; top: 20px; transform: translateX(-50%) translateY(-20px);
    background: #16a34a; color: #fff; padding: 10px 22px; border-radius: 8px;
    font-size: 14px; z-index: 999; opacity: 0; pointer-events: none; transition: all .25s;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
#gbTip.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#gbTip.err { background: #dc2626; }