/* =========================
   主题与容器
   ========================= */
:root {
  --primary-color: #2d3436;
  --secondary-color: #6c5ce7;
  --accent-color: #00b894;
  --warning-color: #d63031;
  --line-color: #dfe6e9;
}

.detail_article,
.detail_article .detail_article {
  max-width: 1200px !important;
  /* 需要更窄改 1080/960 */
  margin-left: auto !important;
  margin-right: auto !important;
}

.detail_article {
  padding: 3rem !important;
  margin: 2rem auto !important;
  border-radius: 12px !important;
  position: relative;
  z-index: 1;
  box-shadow:
    0 10px 30px rgba(108, 92, 231, 0.12),
    0 2px 6px rgba(108, 92, 231, 0.06) !important;
}

/* =========================
   标题
   ========================= */
.detail_article h2,
.detail_article h3 {
  position: relative;
  padding-left: 1.2rem !important;
  border-left: 3px solid var(--accent-color) !important;
  margin: 2rem 0 1.5rem !important;
}

.detail_article h2 {
  font-size: 24px !important;
  border-left-width: 4px !important;
}

/* =========================
   列表（使用原生 marker）
   ========================= */
.detail_article ul {
  margin: 1em 0 !important;
  padding-left: 2em !important;
  list-style: disc outside !important;
}

.detail_article li {
  margin: 0.8em 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.detail_article li::before {
  content: none !important;
}

.detail_article li::marker {
  color: var(--accent-color);
  font-weight: 700;
}

/* =========================
   表格（桌面默认）
   ========================= */
.detail_article table,
.detail_article table {
  width: 100% !important;
  /* 填满容器 */
  max-width: 100% !important;
  /* 不超过容器 */
  border-collapse: collapse !important;
  box-sizing: border-box !important;
  table-layout: fixed !important;
  /* 防止内容把列硬撑 */
  margin: 2rem 0 !important;
  border: 2px solid var(--accent-color) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  font-size: 0.95em !important;
  /* 桌面表格整体小一档 */
}

.detail_article th {
  background: var(--accent-color) !important;
  color: #fff !important;
  padding: 16px !important;
  text-align: center !important;
  vertical-align: middle !important;
  /* 表头允许换行，不堆叠不竖排 */
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35 !important;
}

.detail_article td {
  padding: 14px !important;
  border: 1px solid rgba(0, 184, 148, 0.2) !important;
  text-align: center !important;
  vertical-align: middle !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.detail_article tr:nth-child(even) {
  background: rgba(0, 184, 148, 0.05) !important;
}

/* 首列可选左对齐 */
.detail_article td:first-child {
  text-align: left !important;
  padding-left: 24px !important;
}

/* 如有这个包裹层则使用它承载阴影与滚动 */
.responsive-table {
  max-width: 100% !important;
  overflow-x: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* =========================
   其他组件（保留）
   ========================= */
.comparison-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.legacy-system,
.wms-solution {
  padding: 1.5rem;
  border-radius: 8px;
}

.legacy-system {
  background: rgba(208, 2, 27, 0.05);
  border: 1px solid var(--line-color);
}

.wms-solution {
  background: rgba(0, 184, 148, 0.05);
  border: 1px solid var(--accent-color);
}

.step-progress {
  height: 6px;
  background: #eee;
}

.progress-bar {
  height: 100%;
  background: var(--accent-color);
}

.data-card {
  padding: 1.5rem;
  border-left: 4px solid var(--secondary-color);
}

/* =========================
   移动端：仅表格横向滚动 + 更小字号
   ========================= */
@media (max-width: 768px) {

  /* 页面不横向滚动，避免“整屏跟着滑” */
  html,
  body,
  .detail_article {
    overflow-x: hidden !important;
  }

  .detail_article {
    padding: 2rem !important;
    margin: 1rem !important;
    border-radius: 8px !important;
    overflow-x: visible !important;
    /* 让表格自己滚动 */
    box-shadow:
      0 6px 20px rgba(108, 92, 231, 0.1),
      0 2px 4px rgba(108, 92, 231, 0.05) !important;
  }

  /* 让 table 自身成为横向滚动容器（无需额外包裹） */
  .detail_article table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    /* 不把滚动传到页面 */
    touch-action: pan-x !important;
    /* 明确水平手势 */
    table-layout: auto !important;
    /* 取消 fixed，避免列被压竖 */
    width: 100% !important;
    /* 滚动容器占满父级 */
    min-width: 640px !important;
    /* 列多时确保出现滚动条 */
    font-size: 0.875em !important;
    /* 移动端再小一档 */
  }

  /* 保持表结构渲染，同时以内容宽度为准触发滚动 */
  .detail_article thead,
  .detail_article tbody,
  .detail_article tfoot,
  .detail_article tr {
    display: table !important;
    width: max-content !important;
    table-layout: auto !important;
  }

  /* 小屏：表头/单元格都可自然换行，不会竖排 */
  .detail_article th,
  .detail_article td {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
  }
}

/* =========================
   大屏兜底（主题强制更宽也不外溢）
   ========================= */
@media (min-width: 1024px) {
  .detail_article table {
    max-width: 100% !important;
  }
}

.detail_article table {
  box-sizing: border-box !important;
}