/* ============================================================
   dxb / www.157110.cn — base.css
   第 1 层：设计令牌 + 安全重置 + 新组件（dx- 前缀）
   所有页面共用
   版本：v2  2026-09-25

   ⚠️ 三条铁律（都是实测踩出来的，别改）
   1. 这里【不放布局】。首页的 .container 是 display:flex，
      模板 47/50 的 .container 是 display:grid —— 在 base 里写 .container
      会直接顶掉首页布局（实测 390 → 425）。
      布局规则一律放 pc.css / app.css。
   2. 这里【不碰已有类名】。首页已经在用 .card / .tag / .btn，
      重写它们等于悄悄改首页外观。新组件一律 dx- 前缀。
   3. box-sizing:border-box 全局重置【是安全的】（实测 390 不变），
      可以保留；但 margin 归零会动到首页（实测 390 → 400），
      所以只对标题和 p 归零，不动 ul/ol/li。
   ============================================================ */

/* ---------- 1. 设计令牌（唯一真相，改这里全站生效） ---------- */
:root{
  /* 主色：沿用现有红白体系 */
  --c-primary:      #d4232c;
  --c-primary-dark: #a81b22;
  --c-primary-weak: #fdeaea;

  /* 中性色 */
  --c-text:      #1f2024;
  --c-text-2:    #5b5f66;
  --c-text-3:    #8d9199;
  --c-line:      #ececee;
  --c-line-2:    #e0e0e3;
  --c-bg:        #ffffff;
  --c-bg-page:   #f5f6f8;
  --c-bg-sub:    #fafafb;

  /* 语义色 */
  --c-success: #1d9e75;
  --c-warn:    #ba7517;
  --c-danger:  #d4232c;
  /* A 股约定：涨红跌绿 */
  --c-up:      #d4232c;
  --c-down:    #1d9e75;

  /* 字号 */
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-base:15px;
  --fs-lg:  17px;
  --fs-xl:  20px;
  --fs-2xl: 24px;

  /* 间距 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* 圆角 / 阴影 / 尺寸 */
  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px; --r-xl: 16px;
  --sh-1: 0 1px 2px rgba(16,24,40,.05);
  --sh-2: 0 4px 12px rgba(16,24,40,.08);
  --container: 1200px;
  --header-h: 56px;

  /* 断点统一 1000px —— CSS 变量不能用在媒体查询条件里，只能硬写 */
}

/* ---------- 2. 安全重置（实测不改变现有页面宽度） ---------- */
*,*::before,*::after{ box-sizing:border-box; }

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

/* 只归零标题和段落的上边距；ul/ol 的 reset 会动首页，不做 */
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{ margin-top:0; }

img,svg,video{ max-width:100%; }
img{ height:auto; }

a{ text-decoration:none; color:inherit; }
button{ background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }

/* 任何页面都不该出现横向滚动条 —— 兜底，不是主力手段 */
html,body{ overflow-x:hidden; }

/* 触摸手感 */
*{ -webkit-tap-highlight-color:transparent; }

/* 正文里的图片/表格/代码：任何宽度都不能撑破父级
   ⚠️ 用 !important 是必须的：模板里给 img 写了内联 width */
.dx-article img,
.article-body img{ max-width:100% !important; height:auto !important; }
.dx-article table,
.article-body table{ max-width:100%; display:block; overflow-x:auto; }
.dx-article iframe,
.article-body iframe{ max-width:100%; }

/* 长文本防撑破 —— 移动端溢出的高频原因 */
.dx-article{ word-break:break-word; overflow-wrap:anywhere; }


/* ============================================================
   3. 新组件 —— 一律 dx- 前缀，不会和现有类名打架
   ============================================================ */

/* 卡片 */
.dx-card{
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
}
.dx-card + .dx-card{ margin-top:var(--sp-4); }

/* 按钮 */
.dx-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--sp-2);
  min-height:40px; padding:0 var(--sp-4);
  border-radius:var(--r-md);
  background:var(--c-primary); color:#fff;
  font-size:var(--fs-md); font-weight:500;
  transition:opacity .15s;
}
.dx-btn:active{ opacity:.85; }
.dx-btn--ghost{ background:var(--c-primary-weak); color:var(--c-primary); }
.dx-btn--line{ background:#fff; color:var(--c-text); border:1px solid var(--c-line-2); }
.dx-btn--block{ display:flex; width:100%; }

/* 标签 */
.dx-tag{
  display:inline-block; padding:2px var(--sp-2);
  border-radius:var(--r-sm);
  background:var(--c-bg-sub); color:var(--c-text-2);
  font-size:var(--fs-xs); line-height:1.7;
  white-space:nowrap;
}
.dx-tag--primary{ background:var(--c-primary-weak); color:var(--c-primary); }

/* 横向滚动条（导航 / tab 用） */
.dx-scroll-x{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.dx-scroll-x::-webkit-scrollbar{ display:none; }

/* 工具类 */
.dx-flex{ display:flex; }
.dx-center{ display:flex; align-items:center; }
.dx-between{ display:flex; align-items:center; justify-content:space-between; }
.dx-grow{ flex:1 1 auto; min-width:0; }
.dx-shrink-0{ flex-shrink:0; }
.dx-truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dx-clamp-2{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.dx-sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.dx-up{ color:var(--c-up); }
.dx-down{ color:var(--c-down); }
.dx-muted{ color:var(--c-text-2); font-size:var(--fs-sm); }