/* ==========================================================================
   千岛出海 · 组件层 v2
   白为主调 · 红为辅色 · 磨砂玻璃 · 圆角弧形 · 平滑动效

   纪律（避免沦为模板感）：
   1. 圆角用层级尺度（xs/sm/md/lg/xl/pill），不是全站一个值
   2. 玻璃只用在少数真正需要浮起的表面
   3. 渐变只服务于红色的光晕与主按钮
   4. 动效只保留一次编排（首屏），其余为克制的滚动揭示
   ========================================================================== */

/* ==========================================================================
   A. 头部：通栏玻璃条
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  /* 直接置顶：上方不留边距，玻璃条上缘与视口齐平。
     下方仍留一段，让它与首屏内容有呼吸。 */
  padding-block: 0 var(--space-4);
}

/* 通栏：头部这一处栅格不设左右内距、不限最大宽，玻璃条因此天然与视口
   同宽。用「给头部栅格解掉内距」而不是负 margin + 100vw —— 后者的 100vw
   含滚动条宽度，实测会让页面横向溢出 7px 并出现横向滚动。
   原来靠栅格内距形成的那段留白，改为补在玻璃条自己的内距上，
   于是字标与图标仍落在原来的位置，样式不变。 */
.header .grid {
  max-width: none;
  padding-inline: 0;
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  /* 条高：默认 68px（移动），≥900px 提到 76px。
     原来 min-height 56 + 内距 16，实际只有 62px —— 字标与导航挤在一起。
     76 仍在导航高度上限 80 以内（design-taste-frontend skill 4.7），
     且与字标 40px 的比例回到 53%（原来 36/62 = 58%）。 */
  min-height: 4.25rem;
  /* 置顶通栏：只留下方圆角，上方与视口齐平（上方不留圆角） */
  border-radius: 0 0 var(--r-md) var(--r-md);
  padding-block: var(--space-2);
  padding-inline-start: calc(max(calc((100vw - var(--content-max)) / 2), var(--page-margin)) + var(--space-5));
  padding-inline-end: calc(max(calc((100vw - var(--content-max)) / 2), var(--page-margin)) + var(--space-2));
  transition: background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

@media (min-width: 900px) {
  .header__bar { min-height: 4.75rem; }
}

/* 滚动后加强玻璃与投影，让它从内容里「浮」起来 */
.header[data-scrolled="true"] .header__bar {
  background-color: var(--glass-bg-strong);
  box-shadow: var(--sh-lg), var(--sh-inner);
}

/* --- 字标：品牌 logo 图片（600×183 透明 PNG） ---
   只显示图片，不再叠文字 —— 图里已含 NUSARAYA 与千岛出海。
   高度按头部条高定（2.25rem ≈ 36px），宽度按原始比例自适应。
   单位尺寸用 min-height 保证触控目标。 */
.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.brand:hover { opacity: 0.82; }
.brand:active { opacity: 0.62; }

.brand__logo {
  display: block;
  height: 2.5rem;
  width: auto;
}

@media (max-width: 430px) {
  /* 窄屏收一点，给导航按钮留空间 */
  .brand__logo { height: 2rem; }
}

/* --- 主导航 --- */
.nav__list { display: flex; align-items: center; gap: var(--space-1); }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.nav__link:hover { color: var(--ink); background-color: var(--accent-soft); }

/* 按下态：整条导航里唯一下沉的元素，幅度 1px —— 有了它，
   手指点击与鼠标点击的反馈才对得上（hover 在触屏上根本不会触发）。 */
.nav__link:active { transform: translateY(1px); color: var(--accent-deep); }

.nav__link[aria-current="page"] {
  color: var(--accent-deep);
  background-color: var(--accent-soft);
}

.header__actions { display: flex; align-items: center; gap: var(--space-2); }

/* --- 圆形玻璃图标按钮 --- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  border: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.icon-btn:hover {
  color: var(--accent);
  background-color: var(--accent-soft);
  transform: translateY(-1px);
}

.icon-btn:active { transform: translateY(0) scale(0.96); }

.icon-btn svg { width: 1.125rem; height: 1.125rem; }

.theme-toggle__sun,
.theme-toggle__moon { display: none; }

[data-theme="dark"] .theme-toggle__sun { display: block; }
[data-theme="light"] .theme-toggle__moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle__sun { display: block; }
}

.nav-toggle { display: none; }

@media (max-width: 1023px) {
  .nav__list { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* --- 移动端抽屉：圆角玻璃面板 --- */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) - 1);
  background-color: rgba(14, 16, 20, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}

[data-nav-open="true"] .nav-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear 0s;
}

.nav-drawer {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-overlay);
  width: min(84vw, 20rem);
  padding: calc(var(--space-20) + env(safe-area-inset-top)) var(--space-4)
           calc(var(--space-6) + env(safe-area-inset-bottom));
  border-radius: var(--r-lg);
  background-color: var(--glass-bg-strong);
  backdrop-filter: blur(28px) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(28px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-brd);
  box-shadow: var(--sh-lg), var(--sh-inner);
  overscroll-behavior: contain;
  overflow-y: auto;
  transform: translateX(calc(100% + var(--space-6)));
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-spring),
              visibility 0s linear var(--dur-base);
}

[data-nav-open="true"] .nav-drawer {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-base) var(--ease-spring), visibility 0s linear 0s;
}

.nav-drawer__list { display: flex; flex-direction: column; gap: var(--space-1); }

.nav-drawer__link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  font-size: 1.0625rem;
  font-weight: var(--fw-medium);
  color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.nav-drawer__link:hover { background-color: var(--accent-soft); color: var(--accent-deep); }
.nav-drawer__link[aria-current="page"] { background-color: var(--accent-soft); color: var(--accent-deep); }

@media (min-width: 1024px) {
  .nav-drawer, .nav-backdrop { display: none; }
}

/* ==========================================================================
   B. 按钮：胶囊形
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring);
}

/* --- 主按钮：红色渐变 + 光晕 + 顶部内高光 --- */
.btn--primary {
  color: #FFFFFF;
  background-image: linear-gradient(135deg, var(--accent-lift) 0%, var(--accent) 52%, var(--accent-sink) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), var(--sh-sm);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), var(--sh-glow);
}

.btn--primary:active { transform: translateY(0) scale(0.98); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), var(--sh-sm); }

/* --- 次按钮：玻璃 --- */
.btn--secondary {
  color: var(--ink);
  background-color: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-color: var(--glass-brd);
  box-shadow: var(--sh-sm), var(--sh-inner);
}

.btn--secondary:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md), var(--sh-inner);
  color: var(--accent-deep);
}

.btn--secondary:active { transform: translateY(0) scale(0.98); }

/* --- 描边按钮 --- */
.btn--ghost {
  color: var(--ink);
  border-color: var(--line-2);
}

.btn--ghost:hover {
  color: var(--accent-deep);
  border-color: var(--accent-line);
  background-color: var(--accent-soft);
  transform: translateY(-2px);
}

.btn--ghost:active { transform: translateY(0) scale(0.98); }

/* 图标错位联动：带箭头按钮 hover 时图标右移 4px（260ms 阻尼曲线内） */
.btn svg,
.sec-head__link svg {
  transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover svg,
.sec-head__link:hover svg {
  transform: translateX(4px);
}

/* --- 禁用 / 载入 --- */
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn[aria-busy="true"] { cursor: progress; pointer-events: none; }

.btn__spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--r-pill);
  animation: spin 700ms linear infinite;
}

.btn[aria-busy="true"] .btn__spinner { display: block; }
.btn[aria-busy="true"] .btn__label { opacity: 0.8; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   C. Hero
   源站照片作为顶部背景层，用白色渐隐把左侧让给文字，
   整体因此是「白为主」，而不是源站那种整屏红。
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* 弧形：底部大圆角 */
  border-bottom-left-radius: var(--r-xl);
  border-bottom-right-radius: var(--r-xl);
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
  background-color: var(--bg);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 42%;
  /* 提亮、略降饱和，让它读起来是「空气感底图」而非一张照片 */
  filter: saturate(0.86) brightness(1.06);
  opacity: 0;
  transform: scale(1.04);
  animation: hero-img-in 1200ms var(--ease-out) 80ms forwards;
}

/* 白渐隐：左侧几乎全白承载文字，右侧留出照片 */
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      var(--veil-1) 0%,
      var(--veil-2) 30%,
      var(--veil-3) 56%,
      var(--veil-4) 78%,
      var(--veil-5) 100%),
    linear-gradient(180deg, var(--veil-2) 0%, var(--veil-5) 34%, var(--veil-5) 62%, var(--veil-1) 100%);
}

/* 红色弧光：全站仅此一处的大胆装饰 */
.hero__glow-a,
.hero__glow-b {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.hero__glow-a {
  width: 30rem; height: 30rem;
  top: -15rem; right: -9rem;
  background: radial-gradient(circle, var(--accent-glow), transparent 66%);
  opacity: 0.6;
}

.hero__glow-b {
  width: 24rem; height: 24rem;
  bottom: -13rem; left: -9rem;
  background: radial-gradient(circle, var(--accent-glow), transparent 68%);
  opacity: 0.4;
}

.hero__inner { position: relative; z-index: 1; }

.hero__headline {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  color: var(--ink);
  margin-bottom: var(--space-5);
}

/* 红色只点一处：句读处的短弧线 */
.hero__rule {
  display: block;
  width: 4.5rem;
  height: 4px;
  margin-bottom: var(--space-6);
  border-radius: var(--r-pill);
  background-image: linear-gradient(90deg, var(--accent), rgba(225, 27, 44, 0));
}

.hero__subhead {
  max-width: var(--measure);
  font-size: 1.0625rem;
  line-height: var(--lh-body);
  color: var(--ink-2);
  margin-bottom: var(--space-8);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* 首屏定稿排版（站点所有者 2026-10-04）—— 只作用于首页。
   .hero--overlap 全站只有首页在用（已核），所以这里可以放开改；
   不去动 tokens.css 的 --fs-hero，免得将来别的页面套上 .hero__headline
   时被连带放大。

   · 黑体：--font-display 是 "Space Grotesk" + "Noto Sans SC"，
     中文字符落到 Noto Sans SC —— 本身就是黑体（无衬线），不是宋体。
     这里只把字号与字重往上提，不换字体栈。
   · 加大：4.25rem → 4.75rem 上限（约 +12%）。
     断句由 build.mjs 写死：逗号不断行，在「让企业」后断，两行各 8 个字
     （8 × 76px = 608px，7 栏约 750px 放得下，不会意外折行，
       也不会因宽度不同而漂移）。
   · 加粗：700 → 800。Google Fonts 请求里同步加了 800
     （build.mjs 的 emit() 里一条规则），否则浏览器会拿伪加粗，描边会糊。
   · 标红：--accent 的 token 注释写明用途就是「大字号」，白底对比度 4.8:1；
     大字号（≥24px）的 WCAG AA 门槛是 3:1，通过。不引新色，品牌色只有一个。 */
.hero--overlap .hero__headline {
  font-size: clamp(2.75rem, 5.6vw, 4.75rem);
  font-weight: 800;
}

.hero--overlap .hero__hl { color: var(--accent); }

/* 小字：公司介绍整段，长度约为原来两倍。压小一号、行距略收、量放宽，
   这样两个按钮仍在首屏内（1440×900 与 1280×800 实测都在视口内）。 */
.hero--overlap .hero__subhead {
  font-size: 0.9375rem;
  line-height: 1.72;
  max-width: 48em;
}

/* 首屏编排：一次错位的依次浮现 */
.hero__headline,
.hero__rule,
.hero__subhead,
.hero__actions,
.hero-stat {
  opacity: 0;
  transform: translateY(16px);
  animation: hero-up 900ms var(--ease-out) forwards;
}

.hero__headline { animation-delay: 140ms; }
.hero__rule     { animation-delay: 210ms; }
.hero__subhead  { animation-delay: 280ms; }
.hero__actions  { animation-delay: 350ms; }

@keyframes hero-img-in { to { opacity: 1; transform: scale(1); } }
@keyframes hero-up { to { opacity: 1; transform: none; } }











/* --- 骨架屏 --- */
.skeleton {
  position: absolute;
  inset: 0;
  background-color: var(--bg-mute);
  overflow: hidden;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shimmer 1.5s var(--ease-in-out) infinite;
}

[data-theme="dark"] .skeleton::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.07) 50%, transparent 100%);
}

@keyframes shimmer { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .skeleton::after { display: none; }

  /* 循环播放的动画（骨架微光、按钮转圈）属于准则要求「强制」停掉的一类：
     系统声明了减少动效就必须停，不能因为本站默认 data-motion="on" 就继续跑。
     所以这一组不加 html:not([data-motion="on"]) 前缀。 */
  .skeleton::after,
  .btn__spinner { animation: none !important; }
  .skeleton::after { display: none; }
}

/* 骨架屏的显隐改成通用选择器：v3 把容器改名成 .case-card__media / .svc-card__media /
   .team-card__avatar，写死类名会漏掉它们（图片稍慢就会露出底下的骨架） */
[data-state="loaded"] .skeleton,
[data-state="error"] .skeleton { display: none; }

[data-state="loading"] { pointer-events: none; }

[data-state="error"] { display: grid; place-items: center; }

[data-state="error"]::after {
  content: "图片暂不可用";
  padding: var(--space-4);
  color: var(--ink-3);
  font-size: var(--fs-foot);
  text-align: center;
}

/* ==========================================================================
   I. 联系
   ========================================================================== */
.contact-col { grid-column-end: span 6; align-self: stretch; }

@media (max-width: 899px) { .contact-col { grid-column-end: span 12; } }

.contact-card {
  padding: var(--space-6);
  border-radius: var(--r-lg);
}

/* 两块等高：网格行高由更高的那块（表单）决定，两块都撑满该行。
   联系卡内部用 flex：列表靠顶、二维码贴底，多余空间落在中间，
   不拉伸任何控件本身。 */
.contact-col > .contact-card { height: 100%; }
.contact-card:not(.form) { display: flex; flex-direction: column; }
.contact-card:not(.form) .contact-list { flex: none; }
.contact-card:not(.form) .wechat-qr { margin-top: auto; }
/* 表单：标签在左、控件在右（同行并排），不再上下堆叠。
   控件列用 1fr 吃掉剩余宽度；报错文案占满整行（跨两列）以免撑破标签列。
   行间距 space-3、字段内距 space-3，整列高度比竖排显著下降。 */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.field {
  display: grid;
  /* 标签列固定 5.5rem（88px）—— 关键不是「够不够宽」，而是「所有行一样宽」：
     每个 .field 是独立的 grid 容器，列宽用 max-content 会各算各的，
     输入框就会 419/413/384/413 参差不齐。固定列宽才能左右对齐。
     88px 够放最长的主标签「联系方式」（63px）；「（选填）」另起一行（见下）。 */
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
}

/* 窄屏放不下侧排：标签独占一行，输入框拿满整宽。
   侧排在 390px 下留给输入框不足 240px，placeholder 会折成三行。 */
@media (max-width: 599px) {
  .field { grid-template-columns: minmax(0, 1fr); }
  .field__error { grid-column: 1; }
}

.field__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--ink);
  /* 主标签一行读完： nowrap 挡住的是「联系方式」被拆成两行 */
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

/* 「（选填）」另起一行。放在标签同一行时，「联系方式 （选填）」要 123px，
   超出 88px 的标签列 35px，直接压到输入框左边框上（联系表单，肉眼可见）。
   换行后标签列只需容下主标签（最长「联系方式」63px），列宽统一、输入框对齐，
   而「（选填）」用小一号弱色字另起一行，本身也是更清楚的可选提示。 */
.field__optional {
  display: block;
  font-size: var(--fs-foot);
  font-weight: var(--fw-regular);
  color: var(--ink-3);
}

/* 表单列整列拉平：两块等高（表单比联系卡矮时由空白补齐，不拉伸输入框） */
.form { align-self: stretch; }
.form .field:last-of-type { flex: none; }
.form > div:last-child { margin-top: auto; }

.field__control {
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.field__control::placeholder { color: var(--ink-3); }

.field__control:hover { border-color: var(--ink-3); }

.field__control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--sh-ring-glow);
}

.field__control:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

textarea.field__control { min-height: 7rem; resize: vertical; line-height: var(--lh-body); }

select.field__control { background-color: var(--surface); color: var(--ink); }

.field__error { display: none; grid-column: 2; font-size: var(--fs-foot); color: var(--accent-deep); }

.field[data-invalid="true"] .field__error { display: block; }

.field[data-invalid="true"] .field__control {
  border-color: var(--accent);
  background-color: var(--accent-soft);
}

.field[data-invalid="true"] .field__label { color: var(--accent-deep); }

/* --- 表单状态条 --- */
.form__status {
  display: none;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
}

.form__status[data-state="success"] {
  display: flex;
  background-color: var(--accent-soft);
  color: var(--accent-ink);
}

.form__status[data-state="error"] {
  display: flex;
  background-color: var(--accent-soft);
  color: var(--accent-deep);
}

.form__status[data-state="loading"] { display: flex; color: var(--ink-2); }

/* 联系方式列表：压在两行内读完，号码永不折行 */
.contact-list { display: flex; flex-direction: column; gap: var(--space-2); }

.contact-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  background-color: var(--bg-soft);
}

.contact-list__k { flex: none; font-size: var(--fs-foot); color: var(--ink-3); }

.contact-list__v {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  /* 号码「+62 21 8062 7092」必须整段显示，不允许从短横线处拆行 */
  white-space: nowrap;
}

a.contact-list__v { transition: color var(--dur-fast) var(--ease-out); position: relative; }
a.contact-list__v:hover { color: var(--accent-deep); }
a.contact-list__v:active { color: var(--accent); }

/* 电话号码这一行只有文字高（约 29px），手机上点不准。
   用伪元素把点按区向上下扩到 --tap-min —— 视觉与行距完全不动，
   手指的容错范围却翻了一倍半。这是移动端扩大热区的标准做法。 */
a.contact-list__v::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: var(--tap-min);
  transform: translateY(-50%);
}

/* ==========================================================================
   J. 结尾 CTA：红色渐变面板
   ========================================================================== */
.cta-panel {
  grid-column-end: span 12;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--r-xl);
  color: #FFFFFF;
  background-image: linear-gradient(135deg, var(--accent-lift) 0%, var(--accent) 46%, var(--accent-on-light) 100%);
  box-shadow: var(--sh-glow);
}

.cta-panel__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: #FFFFFF;
  max-width: 18em;
}

.cta-panel .btn--secondary {
  background-color: var(--on-deep-hi);
  border-color: var(--on-deep-lo);
  color: var(--accent-on-light);
}

.cta-panel .btn--secondary:hover { background-color: var(--on-deep); color: var(--accent-ink); }

/* ==========================================================================
   K. 页脚
   --------------------------------------------------------------------------
   三段式：品牌声明（谁 + 做什么）→ 搜索（工具）→ 法务行（合规）。

   布局：手机自上而下堆叠；桌面品牌声明占主栏、搜索收右侧同一行。
   整片页脚贴底通栏，所以左右内距要吃掉安全区（刘海屏横屏时）。

   审查要点（web-interface-guidelines）：
   · 触控目标 ≥44px —— 搜索按钮与链接按此定尺
   · 焦点可见用 :focus-within（搜索框）、:focus-visible（按钮/链接）
   · 备案号等长串用 min-w-0 + break-word，避免窄屏顶破栅格
   · 动效只动 transform/color/box-shadow，走全局降级开关
   ========================================================================== */
.footer {
  padding-block: var(--space-12) var(--space-8);
  border-top: 1px solid var(--line);
}

.footer .grid {
  align-items: start;
  row-gap: var(--space-8);
}

/* --- 品牌声明：logo + 一句话定位 --- */
.footer__brand-block {
  grid-column-end: span 12;
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  min-width: 0;
}

/* 页脚品牌：与头部同一张透明 logo，页脚是浅底，直接显示 */
.footer__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.footer__brand:hover { opacity: 0.82; }

.footer__brand-logo {
  display: block;
  height: 2.5rem;
  width: auto;
}

.footer__about {
  margin: 0;
  max-width: 40em;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* --- 站内导航：替换掉原来那个不工作的搜索框 ---
   原搜索框是 WordPress 时代的残留（action 指向首页、name="s"）：静态站里既没有
   服务端搜索也没有前端索引，提交只是跳回首页、关键词被完全忽略 —— 线上实测
   /?s=签证 与首页逐字节同大小（31387 B）。
   25 页的站不需要搜索，需要的是一份「按业务找得到」的目录：每条指向真实页面，
   出现在全部 25 页的页脚上 —— 既是访客的导航，也是关键词丰富的内部链接。 */
.footer__nav {
  grid-column-end: span 12;
  min-width: 0;
}

/* 视觉上是这组链接的小标题；语义交给 <nav aria-label>，所以用 h2 而不是 p，
   页脚在文档末尾，不会打乱正文的标题层级。 */
.footer__nav-title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-foot);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.footer__nav-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

/* --- 法务行：通栏置底，备案信息集体靠右 --- */
.footer__bottom {
  grid-column-end: span 12;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  min-width: 0;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 备案信息集体靠右：justify-content 把整行推到右端，text-align 管换行后的对齐 */
  justify-content: flex-end;
  text-align: right;
  gap: var(--space-2) var(--space-6);
  font-size: var(--fs-foot);
  color: var(--ink-3);
  min-width: 0;
}

/* 法务区链接与纯文本同字号同颜色；通用 .footer__link 是 fs-small/ink-2，
   这里覆盖成一致的次级小字。触控高度用 min-height 保证可点。 */
.footer__legal .footer__link,
.footer__legal a.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-foot);
  color: var(--ink-3);
  overflow-wrap: break-word;
}

.footer__legal .footer__link:hover,
.footer__legal a.footer__link:hover { color: var(--accent-deep); }

/* 下划线滑入的位置按小字号调整 */
.footer__legal a.footer__link::after { bottom: 10px; }

/* 桌面：品牌声明占主栏，站内导航排在右上同一行 */
@media (min-width: 900px) {
  .footer__brand-block { grid-column-end: span 7; }
  .footer__nav { grid-column-end: span 5; }
}

/* 页脚链接的基础样式：法务行里用到（覆盖成 fs-foot/ink-3）。
   footer__title 已随四个入口栏一起下线，不再定义。 */
.footer__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-small);
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__link:hover { color: var(--accent-deep); }

/* 页脚链接下划线滑入（品牌色 1px，200ms 内完成） */
a.footer__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 8px;
  height: 1px;
  width: 100%;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-out);
}

a.footer__link:hover::after { transform: scaleX(1); }

/* 页脚导航高亮项：加粗字重，用于「常见问题」入口 */
.footer__link--highlight {
  font-weight: 600;
}

/* ==========================================================================
   L. 问答（details/summary 原生折叠）
   极细分隔线 + 自定义品牌标记（"+" 展开转 45° 为 "×"），答案随 HTML 输出。
   动效只动 transform/color，走全局降级开关。
   ========================================================================== */
.faq-item { border-top: 1px solid var(--line); }

.faq-item:last-of-type { border-bottom: 1px solid var(--line); }

.faq-item__q {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  padding-right: var(--space-2);
  font-weight: var(--fw-semi);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__q::before {
  content: "+";
  flex: none;
  font-weight: var(--fw-regular);
  color: var(--accent);
  transition: transform var(--dur-base) var(--ease-out);
}

.faq-item[open] .faq-item__q::before { transform: rotate(45deg); }

.faq-item__q:hover { color: var(--accent-deep); }
/* 按下态：折叠是整页最高频的点击，给它一点物理反馈。
   只压 1px，不做缩放 —— 问题是文字，压到会挤行。 */
.faq-item__q:active { color: var(--accent); }
.faq-item__q:active::before { transform: rotate(45deg) scale(0.88); }

/* 答案顶格：与问题文字同一左缘（问题的 "+" 标记占左侧，但视觉起点
   由 padding-inline-start 决定 —— 这里用与标记+间距等宽的内距对齐到同一列，
   并保留缩进作为层级提示。真正"顶格"是下面 .faq-home 的覆盖规则）。 */
/* 答案：显式覆盖全局 p{text-wrap:pretty}。pretty 会把中文段落提前折行
   （实测行填充率掉到 0.67，每行白空 130–210px），且长短答案表现不一致。
   这里用默认折行：每行填到可用宽度才换，行为可预测。只影响 FAQ，不动全局。 */
.faq-item__a {
  margin: 0;
  padding-block-end: var(--space-5);
  padding-inline-start: calc(1ch + var(--space-4));
  color: var(--ink-2);
  line-height: var(--lh-body);
  text-wrap: wrap;
  overflow-wrap: break-word;
  line-break: strict;
  word-break: break-word;
}

/* 首页问答：答案顶格到问题文字的左缘（与标记列对齐） */
.faq-home .faq-item__a { padding-inline-start: calc(1.75rem + var(--space-4)); }

/* 答案：不设 text-wrap。balance 会对长答案产生"提前折行"（实测行填充率
   掉到 0.67，中文里每行白空 130–210px），短答案又看着正常 —— 同一模块
   内换行规则不一致。改用默认折行：每行填到可用宽度才换，行为可预测。 */
.faq-home .faq-item__a {
  padding-block-end: var(--space-5);
  padding-inline-start: calc(1.75rem + var(--space-4));
  color: var(--ink-2);
  line-height: var(--lh-body);
  overflow-wrap: break-word;
  line-break: strict;
  word-break: break-word;
}

/* 首页问答变体：沿用全局分隔线语言，只升级标记与层级。
   better-ui 对齐：同心圆角（圆形芯片落在圆角序列里）、 ineractive 状态只动
   transform/color（可中断、可降级），旋转之外另有颜色静态提示。
   问题列按屏宽限宽：大屏一行不拖到眼酸，中屏约 30 汉字自然折行，
   窄屏让满宽折行且用 word-break 兜住超长英文/URL。 */
/* 首页问答：标题与列表同一列宽体系，压缩标题与列表间距。
   章节头默认 margin-bottom space-10（40px）；这里单独收紧到 space-6（24px），
   让「常见问题」标题与第一条问答形成一组，而不是两段留白。 */
.faq-home .sec-head__title { margin-bottom: 0; }

.faq-home > .grid > .col-12 { display: flex; flex-direction: column; }

/* 标题到首条问答：24px；问答之间由分隔线承担节奏 */
.faq-home .faq-item:first-of-type { margin-top: var(--space-6); }

/* 问题行：宽度跟随栏目框架内边距，不额外设最大框；
   标记与文字光学居中对齐 */
.faq-home .faq-item__q {
  font-size: 1.0625rem;
  align-items: center;
  padding-block: var(--space-5);
  overflow-wrap: break-word;
  word-break: break-word;
}

.faq-home .faq-item__q::before {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-soft);
  border-radius: var(--r-pill);
}

.faq-home .faq-item__a { font-size: var(--fs-small); padding-left: calc(1.75rem + var(--space-4)); }


/* ==========================================================================
   客户标识墙 .plogos —— 唯一来源
   --------------------------------------------------------------------------
   原先 /about-us/ 与 /exhibition-services/ 各在自己的内联 <style> 里写了一份，
   两份已经漂移：会务页那版用 aspect-ratio 定形，遇到 130×130 的方形标识时
   百分比 max-height 解析不出来，格子被撑到 164px，同一行出现两种高度。
   about-us 那版用 min-height 定高，没有这个问题。这里以 about-us 那版为准，
   收成一份、两页共用。

   为什么用 min-height 而不是 aspect-ratio：标识图的宽高比五花八门
   （130×130 的方图、300×100 的宽图都有），定高比定比例稳。
   ========================================================================== */
.plogos {
  grid-column-end: span 12;
  list-style: none;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) { .plogos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .plogos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.plogos__item {
  display: grid;
  place-items: center;
  padding: var(--space-5);
  min-height: 6.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background-color: var(--surface);
  /* 翻牌要有景深，否则 180° 旋转看着像平面镜像而不是卡片翻面。
     放在瓦片上（而不是 .plogos__flip 上）→ 透视原点跟着瓦片走。 */
  perspective: 900px;
  /* 阴影常驻，不是只 hover 才有。
     会务页原来是常驻 --sh-sm；我一度改成仅 hover —— 结果白底白瓦片加 8% 透明度的
     边框，静态下整块看着「没有样式」。常驻阴影才是让白瓦片在白底上浮起来的东西。 */
  box-shadow: var(--sh-sm);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.plogos__item:hover,
.plogos__item:focus-within {
  border-color: var(--accent-line);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

/* 标识默认黑白，鼠标移到瓦片上「翻牌」，翻过来是全彩的同款标识。
   翻动特效本身就是彩色呈现的机制 —— 不是「加了个动画」之外再另做一次变色。

   为什么用翻牌：
     1. 品牌色规则只允许调透明度。翻牌不动任何颜色值，正反面用的是同一张图，
        彩色只是把原图原样露出来。
     2. 翻到 90° 时瓦片短暂留白，再露出彩色 —— 动作有过程，看得见。

   两个刻意选择：
     · 正反面各一个 <img>，同一个 URL —— 浏览器只发一次请求、共用缓存。
       背面 aria-hidden + alt=""，读屏只念一次。
     · 进出时长不对称：翻出去 560ms（看清翻动），翻回来 260ms（迅速落定）。
       CSS 过渡取「目标状态」的时长，所以写在 :hover 里的那条只管翻出去。

   标识图是纯装饰（alt 是「合作客户标识 N」这样的通用文字），
   黑白不影响任何信息的可读性。 */
.plogos__flip {
  display: grid;
  place-items: center;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform var(--dur-base) var(--ease-out);
}

.plogos__item:hover .plogos__flip,
.plogos__item:focus-within .plogos__flip {
  transform: rotateY(180deg);
  transition-duration: var(--dur-slow);
}

/* 正反两面叠在同一个 grid 单元里：不用绝对定位，瓦片高度仍由内容撑，
   两个面里较高的那个决定行高。 */
.plogos__face {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
}

.plogos__face--back { transform: rotateY(180deg); }

.plogos__face img {
  display: block;
  max-width: 100%;
  max-height: 3.25rem;
  width: auto;
  height: auto;
}

/* 正面纯黑白。不动 opacity —— 是干净的黑白，不是灰扑扑的半透明
   （之前那版 grayscale(1) + opacity .72，配合白底白瓦片会被读成「样式丢了」）。 */
.plogos__face--front img { filter: grayscale(1); }

/* 没有 hover 的设备（手机、平板）永远翻不过来，那就直接显示彩色，
   否则一排标识会永远是灰的。桌面上这条不生效。 */
@media (hover: none) {
  .plogos__face--front img { filter: none; }
}

/* --- 结尾行动区：两页各写了一套子元素名，都保留 --- */
.cta-panel__main { display: grid; gap: var(--space-3); max-width: 40em; }
.cta-panel__lead { font-size: var(--fs-h4); line-height: var(--lh-body); color: var(--on-deep-hi); }
.cta-panel__text { display: grid; gap: var(--space-3); }
.cta-panel__note { font-size: var(--fs-h4); line-height: var(--lh-body); color: var(--on-deep); max-width: 34em; }

@media (max-width: 639px) {
  .cta-panel .btn--secondary { width: 100%; justify-content: center; }
}


/* ==========================================================================
   客户评价 .quotes —— 共享信任组件
   --------------------------------------------------------------------------
   与「客户标识墙」同属信任材料，放同一层。
   三栏竖排；窄屏单栏。每栏顶部一条主色浅线做结构分隔 ——
   不用卡片底与阴影，避免「内容切成同样大小的卡片」那一套。
   用 figure / blockquote / figcaption：引用有语义标签，不用 div 堆。
   ========================================================================== */
.quotes {
  grid-column-end: span 12;
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10); }
}

.quotes__item {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  margin: 0;
  padding: var(--space-6);
  background-color: var(--surface);
  border: 1px solid var(--line);
  /* 顶边一条主色线：既是结构分隔，也当引号的替身，不用再插图形引号 */
  border-top: 2px solid var(--accent-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}

.quotes__text {
  margin: 0;
  font-size: var(--fs-h4);
  line-height: var(--lh-body);
  color: var(--ink);
  text-wrap: pretty;
}

.quotes__src {
  font-size: var(--fs-foot);
  color: var(--ink-3);
}


/* ==========================================================================
   双城对开 .city —— 从 v4/pages.css 上移到共享层
   --------------------------------------------------------------------------
   原先只服务 /contact-us/ 的「办公地点」，所以放在页面层。
   首页新增「双地协作」要复用同一套卡片（跨境服务最核心的信任点是两地团队），
   而首页不加载 pages.css —— 卡片会没有边框 / 内距 / 阴影。
   按项目既有先例收进共享层：一份定义，两页共用，不再各写一份。
   ========================================================================== */
/* ---------------------------------------------------------------- 4. 双城对开 */
.city { grid-column-end: span 12; display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .city { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } }
.city__card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-content: start; padding: var(--space-6);
  border-radius: var(--r-xl); border: 1px solid var(--line); background-color: var(--surface); box-shadow: var(--sh-sm); }
.city__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
/* flex 子项默认 min-width:auto，同样不肯缩到 min-content 以下 —— 和上面栅格是同一类问题的
   另一种机制。不给 min-width:0 的话，.city__name 上一个 400 字符无空格 token
   会把这一行撑到 10048px、文档横向溢出 8786px（栅格轨道那条修法管不到这里）。 */
.city__top > * { min-width: 0; }
.city__name { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); overflow-wrap: break-word; }
.city__en { display: block; font-family: var(--font-display); font-size: var(--fs-foot); color: var(--ink-3); }
.city__clock { text-align: right; }
.city__time { display: block; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-semi);
              line-height: 1; letter-spacing: var(--ls-heading); font-variant-numeric: tabular-nums; }
.city__date { display: block; font-size: var(--fs-foot); color: var(--ink-3); margin-top: var(--space-1); }
.city__state { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2);
               font-size: var(--fs-foot); color: var(--ink-2); }
/* 营业状态：只用「形状 + 墨色深浅」编码，不用调色板外的颜色。
   颜色单独承载信息不合规（WCAG 1.4.1），所以实心/空心/短横三种形状本身就区分得开，
   pages.js 另外把「现在营业中 / 现在已下班 / 状态未知」写进 [data-clock-open] 供读屏使用。
   三种状态下圆点的尺寸与位置完全一致，文字不会位移。 */
.city__state::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
                       background-color: var(--ink-3); box-sizing: border-box; }
[data-open="yes"] .city__state::before { background-color: var(--ink); }
[data-open="no"] .city__state::before { background-color: transparent; border: 1px solid var(--ink-3); }
[data-open="unknown"] .city__state::before { width: 0.5rem; height: 0.125rem; border-radius: var(--r-pill);
                                             background-color: var(--ink-3); }
.city__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 520px) { .city__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.city__shot { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden;
              border: 1px solid var(--line); background-color: var(--bg-mute); }
.city__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.city__map { position: relative; margin: 0; aspect-ratio: 1024 / 611; border-radius: var(--r-md); overflow: hidden;
             border: 1px solid var(--line); background-color: var(--bg-mute); }
.city__map img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.city__map:hover img { transform: scale(1.03); }
.city__maplink { position: absolute; right: var(--space-3); bottom: var(--space-3); font-size: var(--fs-foot);
  display: inline-flex; align-items: center; min-height: var(--tap-min);   /* 地图上的浮层按钮，手机上要点得中 */
  padding: 0 var(--space-4); border-radius: var(--r-pill); color: var(--ink);
  background-color: var(--glass-bg-strong); -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid var(--glass-brd); box-shadow: var(--sh-sm), var(--sh-inner);
  transition: transform var(--dur-fast) var(--ease-out); }
.city__maplink:hover { color: var(--accent-deep); }
.city__maplink:active { transform: translateY(1px); }
.city__rows { display: grid; gap: var(--space-3); }
.city__row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.city__k { font-size: var(--fs-small); color: var(--ink-3); }
.city__v { font-size: var(--fs-small); color: var(--ink); line-height: 1.65; overflow-wrap: break-word; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .city__maplink { background-color: var(--glass-bg-strong); }
}


/* ==========================================================================
   联系方式 + 微信二维码（首页「直接联系」下方；内容与二维码来自后台「联系方式」）
   ========================================================================== */
.contact-card__divider {
  height: 1px;
  margin: var(--space-5, 26px) 0 var(--space-4, 18px);
  background: var(--line, rgba(14, 16, 20, 0.08));
}
.contact-card__note {
  margin: var(--space-2, 8px) 0 0;
  font-size: var(--fs-foot, 14px);
  line-height: 1.7;
  color: var(--ink-3, rgba(14, 16, 20, 0.62));
}
.wechat-qr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4, 16px);
  margin-top: var(--space-4, 16px);
}
.wechat-qr__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: 0;
}
.wechat-qr__img,
.wechat-qr__placeholder {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm, 12px);
  /* 二维码必须白底：深色模式下也不能让卡片背景透上来，否则扫不出来 */
  background: #FFFFFF;
  border: 1px solid var(--line, rgba(14, 16, 20, 0.08));
}
.wechat-qr__img {
  display: block;
  object-fit: contain;
  padding: 6px;
}
.wechat-qr__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  font-size: var(--fs-foot, 14px);
  color: var(--ink-3, rgba(14, 16, 20, 0.62));
}
.wechat-qr__cap {
  font-size: var(--fs-foot, 14px);
  line-height: 1.5;
  text-align: center;
  color: var(--ink-3, rgba(14, 16, 20, 0.62));
}