/* ============================================================
   全站共用底部（site-footer）—— 按 UEMO「底部-浅色004」逐规格复刻
   参考：https://www.uemo.net/tools/resources/units/preview/id/175
   2026-09-10 三改（用户给的第二张参考图「底部排版参考」，1989×551 量测）：
     · ① 上行 = 左「品牌锁定组合 + 索取样板按钮」（按钮在 logo 正下方、左对齐）
                  + 右「4 个栏目列」；栏目列占内容列右侧约 62%（参考图 x764/1870）
     · ② 中行 = 联系电话 / 公司地址 / 业务邮箱 三块横排 + 最右 4 个 42×42 社交图标
                  社交图标与正文行对齐（padding-top 30px）；三块与参考同位（x175/x573/x1196）
     · ③ 分隔线 1px rgba(20,21,26,.2) 一条，在版权条上方（参考图 y456）
     · ④ 版权条：版权 12px/24 40% 黑 + 备案号 14px/28 #777
   图标区块（参考图 582×259 量测 → 本站 1:1）：28px 圆角方块（1px #D0D0D1 描边、近白底、
   深色图形）+ 16px/700 标签同行垂直居中；正文缩进 46px 对齐标签左边缘。
   参考图比例：内容列 1870px ≈ 本站 1860px 上限 → 尺寸基本 1:1，不用缩放。
   ============================================================ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

.sf {
  --sf-ink: #14151a;
  --sf-line: rgba(20, 21, 26, .2);
  --sf-blue: #3452ff;
  position: relative;
  z-index: 2;
  background: #fff;
  color: var(--sf-ink);
  padding: 50px 0 10px;
  font-family: "Plus Jakarta Sans", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}

/* 内容列 = 首页 .scene-inner 同宽 */
.sf-inner { width: min(1860px, calc(100% - 96px)); margin: 0 auto; }
@media (min-width: 841px) { .sf-inner { width: min(1860px, calc(100% - 200px)); } }

/* ---------- ① 上行：左＝logo + 索取样板按钮；右＝4 个栏目列 ---------- */
.sf-top {
  display: grid;
  grid-template-columns: 0.61fr 1fr;   /* 参考图：栏目列从内容列 37.8% 处起 */
  gap: 48px;
  align-items: start;
}
.sf-top-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sf-nav-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
/* 品牌锁定组合（∞ 图形 + NTKRIB 字标）
   2026-09-10 用户要求：把英文标语「Collar makes the garment.」换成 NTKRIB + LOGO。
   logo-infinity-black.png 画布 320×320、实际墨迹 291×142（上下各留白 89px → 墨迹占高 44.4%），
   所以 height:90px 时墨迹约 40px 高 / 82px 宽；图片留白在左右各只有 ~4px，用 gap 12px 控制间距。 */
.sf-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--sf-ink);
}
.sf-brand-mark { display: block; width: auto; height: 90px; }
.sf-brand-word {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  white-space: nowrap;
}
.sf-top-left .sf-btn { margin-top: 26px; }
.sf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 30px;
  border-radius: 50px;
  background: #000;                        /* 用户 2026-09-11：底部按钮全站统一，默认黑 */
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
  text-decoration: none;
  transition: background .26s, transform .26s;
}
.sf-btn:hover { background: #2b2b2b; transform: translateY(-2px); }
.sf-btn span { transition: transform .26s; }
.sf-btn:hover span { transform: translateX(4px); }
/* 各内页有 `body.ip a / body.nd a / body.nl a { color: inherit }`（权重 0,1,2）会压掉 .sf-btn（0,1,0），
   把按钮文字变成深色（深字压蓝底，全站只有首页是白字）→ 用 .sf a.sf-btn（0,2,1）提权锁死白字。 */
.sf a.sf-btn { color: #fff; }

.sf-social {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 16.8px;
}
/* 图标按钮本体在 css/site-social.css（UEMO 素材 465 规格，全站唯一来源） */

/* ---------- ② 中行：三块联系方式横排 + 最右社交图标 ---------- */
.sf-contact-row {
  display: grid;
  grid-template-columns: 1fr 1.55fr 1.1fr auto;  /* 电话 / 地址（要放下长地址）/ 邮箱 / 社交 */
  gap: 40px 48px;
  align-items: start;
  padding: 56px 0 42px;
}
/* 社交图标与三块的正文行对齐（参考图里图标底 ≈ 正文底） */
.sf-contact-row .sf-social { padding-top: 30px; }
.sf-col h3 {
  margin: 0 0 26px;
  font-size: 18px;
  line-height: 28.8px;
  font-weight: 700;
  color: var(--sf-ink);
}
/* 内页都有 `body.nl a / body.ip a / body.nd a / body.bp a { color: inherit }`（权重 0,1,2），
   会压掉原来的 `.sf-col a`（0,1,1）→ 页脚链接在内页变成纯黑、和栏目标题同色（用户 2026-09-10 反馈
   「下面内容的字颜色要比标题的字颜色浅一些」）。提到 `.sf .sf-col a`（0,2,1）才能全站生效。 */
.sf .sf-col a,
.sf .sf-col p {
  display: block;
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 22.4px;
  color: rgba(20, 21, 26, .6);
  text-decoration: none;
  transition: color .2s;
}
.sf .sf-col a:hover { color: var(--sf-ink); }

/* 联系我们列（2026-09-10 二改：按用户给的参考图重排）
   参考规格（用户截图 582×259 实测）：32px 圆角方块（1px 浅灰描边 #D0D0D1、近白底、深色图形）
   + 粗体标签在方块右侧同一行；下面的号码 / 地址全部缩进对齐到标签左边缘（缩进 = 方块宽 + 间距）；
   区块之间 1px 浅灰分隔线 #E7E7E8（上 19px / 下 30px）。本站按 0.85 缩放：
   方块 28px、标签 16px/700、号码 15px、次要行 13px。
   坑（上一版踩过）：通用 `.sf .sf-col a / p` 是 block + margin-bottom 22px + 14px，
   会命中这些 <p>/<a> → 新类必须显式覆盖 display/margin/font-size。 */
.sf .sf-contact-row .sf-cb-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 8px;
}
.sf .sf-contact-row .sf-cb-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid #d0d0d1;
  border-radius: 5px;
  background: #fbfbfc;
  color: rgba(20, 21, 26, .72);
}
.sf .sf-contact-row .sf-cb-ico svg { display: block; width: 16px; height: 16px; }
.sf .sf-contact-row .sf-cb-head b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--sf-ink);
}
.sf .sf-contact-row .sf-cb-val,
.sf .sf-contact-row .sf-cb-sub {
  display: block;
  margin: 0 0 6px 46px;   /* 46px = 方块 28 + 间距 18 → 正文与标签左边缘对齐 */
  font-size: 15px;
  line-height: 22px;
  color: rgba(20, 21, 26, .72);
}
.sf .sf-contact-row .sf-cb-sub {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 20px;
  color: rgba(20, 21, 26, .45);
}
.sf .sf-contact-row .sf-cb-val b {
  margin-right: 8px;
  font-weight: 600;
  color: rgba(20, 21, 26, .85);
}
.sf .sf-contact-row .sf-cb-val a,
.sf .sf-contact-row .sf-cb-sub a {
  display: inline;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}
.sf .sf-contact-row .sf-cb-val a:hover { color: var(--sf-blue); }
/* 三块横排后不再用区块间分隔线（参考图中行上下都没有线） */

/* ---------- ③ 分隔线（只有版权条上方这一条） ---------- */
.sf-divider { height: 1px; margin: 0; background: var(--sf-line); }

/* ---------- ④ 版权条 ---------- */
.sf-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 0 10px;
  font-size: 12px;
  line-height: 24px;
  color: rgba(20, 21, 26, .4);
}
.sf-bar .sf-icp { font-size: 14px; line-height: 28px; color: #777; }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .sf-top { grid-template-columns: 1fr; gap: 36px; }
  .sf-nav-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sf-contact-row { grid-template-columns: 1fr 1.4fr; gap: 32px 36px; padding: 44px 0 36px; }
  .sf-contact-row .sf-social { grid-column: 1 / -1; padding-top: 0; }
}
@media (max-width: 640px) {
  .sf { padding-top: 34px; }
  .sf-brand { gap: 8px; }
  .sf-brand-mark { height: 56px; }
  .sf-brand-word { font-size: 26px; }
  .sf-top-left .sf-btn { margin-top: 18px; }
  .sf-nav-cols { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .sf-contact-row { grid-template-columns: 1fr; gap: 26px; padding: 34px 0 28px; }
  .sf-bar { flex-direction: column; align-items: flex-start; gap: 0; }
}