/* ============================================================================
   网站地图页样式（PC + 移动端共用同一份，响应式）
   ----------------------------------------------------------------------------
   ★ 配色基准 —— 整站深色工业风令牌（真源：static/css/ms-case.css 的 :root，
     与 ms-news.css / ms-svc.css / ms-contact.css 同族）。逐字对齐，不自创色值：

       --ms-page-bg   linear-gradient(180deg,#0B1E33 0%,#08172A 42%,#061424 100%)
                      ↑ 起点 #0B1E33 = header 底；终点 #061424 = footer 顶
                        ⇒ 页头 / 正文 / 页脚三段**无缝**，这是"上下过渡自然"的关键
       --ms-surface   rgba(255,255,255,.045)   卡片底（深色玻璃，**没有白卡**）
       --ms-line      rgba(122,168,214,.17)    边框 / 分割线
       --ms-line-strong rgba(122,168,214,.34)  边框 hover
       --ms-text      #EAF2FA                  标题
       --ms-text-soft rgba(234,242,250,.78)    正文 / 链接默认
       --ms-text-dim  rgba(234,242,250,.62)    次级说明 / 计数
       --ms-link      #8FC4EC                  链接
       --ms-r-sm      8px                      整站最小圆角档

   ★ 交互色 hover #ea580c 按用户《改版规范》一.4 / 三.3 保留（整站其它页的
     hover 走亮色/边框变化，此处以规范为准）。

   ⚠ 实测真值（2026-09-24 浏览器读取首页与本站）：
       html/body #061424 | header.ms-header #0B1E33 | footer.bg-ink-950 #061424
     首页 main 背景为 transparent（让 body 透上来），故本页也不设 body 背景。

   ⚠ 作用域：本文件在 view/pc/head.html 与 view/m/head.html 里是**全站引入**的，
     所以每条规则都必须挂在 .ms-sm / .ms-sm-* 前缀下。任何无前缀的全局选择器
     （例如直接写 a{}、body{}）都会污染全站其它页面。

   ⚠ 走过的两条弯路（勿重蹈）：
     ① 初版 `.ms-sm{background:#f8fafc}` + 白卡片 —— 在整站深色底上是一块异物，
        观感上"像一片空白"。
     ② 二版照抄 page_about.html 的 9 停靠点"波动色带"渐变（起 #0F3460）——
        那是给带 banner 大图的长页配的；短页面上色带被压缩、端点又对不上
        页头 #0B1E33 / 页脚 #061424 ⇒ 上下两头都出接缝。本页改用整站通用的
        三段单调渐变，端点与页头/页脚严格对齐。
   ============================================================================ */

.ms-sm{
  /* ---- 页面底（逐字等于整站 --ms-page-bg）---- */
  --sm-page-bg:linear-gradient(180deg,#0B1E33 0%,#08172A 42%,#061424 100%);
  /* ---- 面 / 线 ---- */
  --sm-surface:rgba(255,255,255,.045);
  --sm-surface-h:rgba(255,255,255,.065);
  --sm-line:rgba(122,168,214,.17);
  --sm-line-strong:rgba(122,168,214,.34);
  /* ---- 文字 ---- */
  --sm-text:#EAF2FA;
  --sm-text-soft:rgba(234,242,250,.78);
  --sm-text-dim:rgba(234,242,250,.62);
  --sm-link:#8FC4EC;
  --sm-hover:#ea580c;
  --sm-r:8px;                        /* 整站最小圆角档 --ms-r-sm */
  background:var(--sm-page-bg);
  color:var(--sm-text-soft);
}
.ms-sm,.ms-sm *{box-sizing:border-box}

/* 版心：PC 1200px，自带左右内边距，避免任何情况下出现横向滚动 */
.ms-sm-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
@media (min-width:1024px){.ms-sm-wrap{padding:0 20px}}

/* ---------- 页头区：面包屑 + 唯一 H1 + 简短说明（无横幅大图） ---------- */
.ms-sm-head{padding:22px 0 18px;border-bottom:1px solid var(--sm-line)}
.ms-sm-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;margin:0 0 10px;padding:0;font-size:13px;line-height:1.6;color:var(--sm-text-dim)}
.ms-sm-crumb li{display:flex;align-items:center;gap:6px}
.ms-sm-crumb li+li::before{content:"/";color:rgba(122,168,214,.45)}
.ms-sm-crumb a{color:var(--sm-link);text-decoration:none}
.ms-sm-crumb a:hover{color:var(--sm-hover)}
.ms-sm-crumb .is-cur{color:var(--sm-text)}
.ms-sm-h1{margin:0;font-size:26px;line-height:1.32;font-weight:800;color:var(--sm-text)}
.ms-sm-lead{margin:9px 0 0;font-size:14px;line-height:1.85;color:var(--sm-text-soft)}

/* ---------- 正文区 ---------- */
.ms-sm-main{padding:22px 0 34px}
/* 说明段：HTML 地图与 XML 地图的分工写在这里，不另起模块 */
.ms-sm-note{margin:0 0 18px;font-size:13px;line-height:1.9;color:var(--sm-text-soft)}
.ms-sm-note b{font-weight:700;color:var(--sm-text)}
.ms-sm-note a{color:var(--sm-link);text-decoration:none}
.ms-sm-note a:hover{color:var(--sm-hover);text-decoration:underline}
.ms-sm-kv{color:var(--sm-text-dim);font-variant-numeric:tabular-nums}

/* ---------- 分组网格：PC 三列 / 平板两列 / 移动单列 ---------- */
/* 不用 align-items:start —— 保持默认 stretch，让同一行卡片底边对齐，版面更整 */
.ms-sm-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:768px){.ms-sm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (min-width:1024px){.ms-sm-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}

/* 超长分组（如「产品中心」的型号级分类，30+ 项）占更宽的格位 + 卡片内多列排布。
   目的：单张卡不再把整行拉成"一柱擎天"，同时**一条链接都不删**（型号分类也是
   栏目，不是单篇文章，保留有利于爬虫发现）。

   ⚠ 宽度取 span 2（而非 1/-1）是算过的：PC 三列下「主要栏目(1) + 产品中心(2)」
     刚好填满一行，不留空洞；若跨满整行，第 1 张卡会孤零零占 1/3 宽、右侧空 2/3。 */
@media (min-width:768px){
  .ms-sm-card--wide{grid-column:1/-1}
  .ms-sm-card--wide .ms-sm-list{column-count:2;column-gap:22px}
}
@media (min-width:1024px){
  .ms-sm-card--wide{grid-column:span 2}
  .ms-sm-card--wide .ms-sm-list{column-count:3;column-gap:24px}
}

/* ---------- 分组卡片：深色玻璃面 + 整站线色 + 8px 圆角，无阴影 ---------- */
.ms-sm-card{min-width:0;background:var(--sm-surface);border:1px solid var(--sm-line);border-radius:var(--sm-r);padding:14px 16px 15px}
.ms-sm-h{display:flex;align-items:baseline;gap:8px;margin:0 0 9px;padding:0 0 9px;border-bottom:1px solid var(--sm-line);font-size:15.5px;font-weight:700;line-height:1.45;color:var(--sm-text)}
.ms-sm-h-n{margin-left:auto;flex:0 0 auto;font-size:12px;font-weight:600;color:var(--sm-text-dim);font-variant-numeric:tabular-nums}

/* ---------- 链接列表：无图标、无底色，仅颜色反馈 ---------- */
.ms-sm-list{list-style:none;margin:0;padding:0}
.ms-sm-list li{min-width:0;break-inside:avoid}
.ms-sm-list a{display:block;padding:7px 0;font-size:13.5px;line-height:1.6;color:var(--sm-text-soft);text-decoration:none;overflow-wrap:anywhere;word-break:break-word}
.ms-sm-list a:hover{color:var(--sm-hover)}
.ms-sm-list a:focus-visible{outline:2px solid var(--sm-hover);outline-offset:2px}
/* 站外链接尾标：纯文本箭头字符，不是图标字体也不是装饰图 */
.ms-sm-list a[target="_blank"]::after{content:" \2197";font-size:11px;color:var(--sm-text-dim)}

/* ---------- 页面底部：XML 入口 + 回到顶部（版权信息由全站统一页脚输出） ---------- */
.ms-sm-bottom{margin:24px 0 0;padding:16px 0 0;border-top:1px solid var(--sm-line)}
.ms-sm-bottom-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:13px;line-height:1.8;color:var(--sm-text-soft)}
.ms-sm-bottom-row a{color:var(--sm-link);text-decoration:none}
.ms-sm-bottom-row a:hover{color:var(--sm-hover);text-decoration:underline}
.ms-sm-top{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:8px 14px;background:var(--sm-surface);border:1px solid var(--sm-line);border-radius:var(--sm-r);font-size:13px;font-weight:600;color:var(--sm-text-soft);text-decoration:none;transition:color .18s,border-color .18s,background-color .18s}
.ms-sm-top:hover{color:var(--sm-hover);border-color:var(--sm-hover);background:rgba(234,88,12,.10);text-decoration:none}
.ms-sm-empty{margin:0;font-size:13.5px;line-height:1.9;color:var(--sm-text-soft)}

/* ---------- 移动端：单列 + 点击区 ≥44px + 禁止横向滚动 ---------- */
@media (max-width:767px){
  .ms-sm-head{padding:16px 0 14px}
  .ms-sm-h1{font-size:20px}
  .ms-sm-lead{font-size:13px;line-height:1.8}
  .ms-sm-main{padding:16px 0 26px}
  .ms-sm-note{font-size:12.5px;margin-bottom:14px}
  .ms-sm-card{padding:13px 14px 14px}
  .ms-sm-h{font-size:15px}
  /* 11 + 11 + 22 ≈ 44px，满足移动端最小点击区 */
  .ms-sm-list a{padding:11px 0;font-size:14px}
  .ms-sm-top{margin-left:0;padding:12px 16px;font-size:13.5px}
}