/* ================== 全局容器与布局 ================== */
.main-content1 {
  width: 98%;
  margin: 10px auto;
  background: white;
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden; /* 防止水平滚动 */
  max-height: 85vh;
  min-width: unset !important;
  box-sizing: border-box; /* 重要：确保padding不会增加总宽度 */
}

/* 移动端修复 - 防止页面撑开 */

@media (max-width: 768px) {
  .main-content1 {
    width: 100vw; /* 使用视口宽度 */
    margin: 0;
    padding: 8px;
    overflow-x: hidden; /* 彻底防止水平滚动 */
  }
  
  .layout-container {
    flex-direction: column; /* 垂直布局 */
    width: 100%;
  }
  
  .detail-content {
    width: 100% !important;
    padding: 0 5px !important; /* 减少内边距 */
    min-width: unset !important;
  }
  
  .detail-sidebar {
    width: 100% !important;
    margin-top: 20px;
  }
  
  /* 修复表格 - 主要问题来源 */
  .detail-content table {
    width: 99% !important;
    display: block;
    overflow-x: auto; /* 表格内部滚动而不是撑开页面 */
    -webkit-overflow-scrolling: touch;
  }
  
  .detail-content table tbody {
    min-width: 400px; /* 确保表格有合理的最小宽度 */
  }
  
  .detail-content table caption {
    width: 100% !important;
  }
  
  
  .detail-info,
.detail-content-box {
  width: 100%;
  box-sizing: border-box;
}


}

.layout-container {
  display: flex;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

.detail-info,
.detail-content-box {
  width: 100%;
  box-sizing: border-box;
}

.detail-table-space {
  width: 300px;
}

/* ================== 面包屑导航 ================== */
.breadcrumbs {
  margin-bottom: 12px;
}
.breadcrumbs span {
  margin: 0 0px;
}

/* ================== 标题与元信息 ================== */
.detail-title {
  font-size: 28px;
  font-weight: bold;
  margin: 0 0 8px;
}
.detail-description time {
  color: #666;
  font-size: 14px;
}

/* ================== 作者信息 ================== */
.detail-author {
  display: flex;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap; /* 移动端换行 */
}
.detail-author-avatar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.detail-author-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.detail-author-name {
  font-weight: bold;
}
.detail-author-description {
  font-size: 13px;
  color: #888;
}
.detail-author-link {
  margin-left: auto;
  display: flex;
  gap: 12px;
}

/* 移动端作者信息调整 */
@media (max-width: 768px) {
  .detail-author {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .detail-author-link {
    margin-left: 0;
    margin-top: 10px;
  }
}

/* ================== 分享图标 ================== */
.icon-share {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  padding: 8px;
  transition: all 0.25s ease;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin: 0 4px;
}

.icon-share:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  opacity: 0.95;
}

.icon-share-link {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230077B5' d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
}

.icon-share-twitter {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231DA1F2' d='M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.062a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63a9.935 9.935 0 002.46-2.548l-.047-.02z'/%3E%3C/svg%3E");
}

.icon-share-facebook {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231877F2' d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}

.icon-share-url {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666666' d='M8.465 11.293c1.133-1.133 3.109-1.133 4.242 0l.707.707 1.414-1.414-.707-.707c-.943-.944-2.199-1.465-3.535-1.465s-2.592.521-3.535 1.465L4.929 12a5.008 5.008 0 0 0 0 7.071 5.006 5.006 0 0 0 7.071 0l.707-.707-1.414-1.414-.707.707a3.007 3.007 0 0 1-4.243 0 3.005 3.005 0 0 1 0-4.243l2.122-2.121z'/%3E%3Cpath fill='%23666666' d='m12 4.929-.707.707 1.414 1.414.707-.707a3.007 3.007 0 0 1 4.243 0 3.005 3.005 0 0 1 0 4.243l-2.122 2.121c-1.133 1.133-3.109 1.133-4.242 0L10.586 12l-1.414 1.414.707.707c.943.944 2.199 1.465 3.535 1.465s2.592-.521 3.535-1.465L19.071 12a5.008 5.008 0 0 0 0-7.071 5.006 5.006 0 0 0-7.071 0z'/%3E%3C/svg%3E");
}

.icon-share-reddit {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF4500' d='M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.5 1.207-.5.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.7 3.7 0 0 1 .147.856c0 2.14-2.439 3.878-5.439 3.878-3 0-5.438-1.738-5.438-3.878 0-.25.03-.5.086-.746-.496-.22-.905-.636-.905-1.194 0-.708.55-1.283 1.23-1.283.463 0 .866.276 1.104.69.95-.593 2.347-.977 3.85-.977l.582-2.724c-.06-.006-.112-.02-.172-.02-.688 0-1.248-.561-1.248-1.25s.56-1.25 1.248-1.25z'/%3E%3C/svg%3E");
}

.icon-share-whatsapp {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2325D366' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z'/%3E%3C/svg%3E");
}

.icon-share-telegram {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230088cc' d='M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221l-1.97 9.28c-.145.658-.537.818-1.084.509l-3-2.21-1.447 1.394c-.14.14-.288.288-.288.288l.213 3.041c.035.227-.063.318-.2.318-.126 0-.336-.105-.515-.189l-4.701-3.45-1.923.606c-.657.203-.67-.644.139-.954l18-6.947c.608-.244 1.193.16.954.954z'/%3E%3C/svg%3E");
}

.icon-share-pinterest {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E60023' d='M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm1.107 15.69c-.615 3.27-1.364 6.407-3.57 8.044-.68-4.823 1.01-8.45 1.803-12.298-.998-1.678 1.12-3.337 2.496-2.66 2.9 1.61-2.52 5.895 1.127 6.507 3.802.64 5.354-6.316 2.995-8.61-3.328-3.18-9.678-.082-8.913 4.514.23 1.398 1.738 1.82.995 3.284-1.39-.308-1.806-1.416-1.755-2.883.103-2.98 2.663-5.07 5.246-5.355 3.36-.37 6.515 1.23 6.95 4.405.47 3.42-1.43 7.13-5.58 6.852z'/%3E%3C/svg%3E");
}

.icon-share-email {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23444444' d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.detail-author-link {
  display: flex;
  align-items: center;
  gap: 12px; /* 图标间距 */
  margin-top: 16px;
}

.detail-author-link a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #f4f4f4;
  transition: all 0.25s ease;
  text-decoration: none;
  font-size: 18px;
}

/* 通用 hover 效果 */
.detail-author-link a:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ================== 正文内容排版 ================== */
.detail-content {
  flex: 1;
  padding: 0 20px;
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
}
.detail-content h2 {
  line-height: 28px;
  margin-top: 24px;
  margin-bottom: 12px;
}
.detail-content p {
  line-height: 30px;
  margin-bottom: 20px;
  color: #444;
}

/* ================== 表格样式 ================== */
.detail-content table {
  width: 98%;
  border-collapse: collapse;
  margin: 20px 0;
  max-width: 98%; /* 确保表格不溢出 */
}
.detail-content table caption {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: bold;
  color: #005580;
  text-align: left;
  background-color: #f0f8ff;
  border-bottom: 2px solid #005580;
  border-radius: 6px 6px 0 0;
  margin-bottom: 0;
}
.detail-content table tr {
  border-bottom: 1px solid #eee;
}
.detail-content table th,
.detail-content table td {
  padding: 12px 16px;
  text-align: left;
}

/* 移动端表格优化 */
@media (max-width: 768px) {
  .detail-content table th,
  .detail-content table td {
    padding: 8px 10px; /* 减少内边距 */
    font-size: 14px; /* 缩小字体 */
  }
}

/* ================== 引用、列表、强调、提示框 ================== */
.detail-content blockquote,
.faq-container blockquote {
  margin: 10px 0;
  padding: 10px 15px;
  background: #f0f8ff;
  border-left: 5px solid #7bc3d1;
  font-style: italic;
  color: #555;
}
.detail-content ul,
.faq-container ul,
.detail-content ol,
.faq-container ol {
  padding-left: 20px;
  margin: 10px 0;
}
.detail-content ul li,
.faq-container ul li,
.detail-content ol li,
.faq-container ol li {
  margin: 6px 0;
}
.detail-content strong,
.faq-container strong {
  font-weight: bold;
  color: #222;
}
.detail-content em,
.faq-container em {
  font-style: italic;
}
.detail-content aside,
.faq-container aside {
  display: block;
  margin: 15px 0;
  padding: 10px 15px;
  background: #fffbe6;
  border-left: 5px solid #ffd24d;
  font-size: 15px;
  color: #5c4b00;
  border-radius: 4px;
}

/* ================== FAQ 区域 ================== */
.faq-container {
  margin-top: 15px;
  padding: 0;
  background: #fff;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}
.faq-container h2 {
  margin-bottom: 15px;
}
.faq-container details {
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 15px;
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}
.faq-container details[open] {
  background-color: #f5fafd;
}
.faq-container summary {
  font-weight: bold;
  font-size: 17px;
  cursor: pointer;
  color: #005580;
  padding: 5px 0;
}
.faq-container p {
  margin: 10px 0;
  color: #444;
}

/* ================== 侧边栏 ================== */
.detail-sidebar {
  padding: 20px;
  background: #f9f9f9;
  border-left: 1px solid #eee;
  box-sizing: border-box;
}
.section-title {
  font-size: 20px;
  margin-bottom: 16px;
}

/* ================== 分享标题 ================== */
.share-title {
  font-weight: bold;
  margin: 24px 0 12px;
}

/* ================== 移动端 TOC 弹出菜单 ================== */
@media (max-width: 992px) {
  .detail-menu-box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    max-height: 100vh;
    background: #fff;
    z-index: 1001;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    padding: 20px;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    box-sizing: border-box;
  }
  .detail-menu-box.active {
    transform: translateX(0);
  }

  .toc-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  .toc-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .detail-menu-button {
    position: sticky;
    top: 0;
    z-index: 20;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .detail-menu-list {
    width: 100%;
    box-sizing: border-box;
  }
  .detail-menu-item a {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 8px 12px;
    font-size: 15px;
  }
  .detail-menu-item a:hover {
    background: #f0f8ff;
    border-radius: 4px;
  }
  .detail-menu-box::-webkit-scrollbar {
    width: 6px;
  }
  .detail-menu-box::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
}

/* ================== 悬浮 TOC 按钮 ================== */
#toc-toggle-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9998;
  width: 50px;
  height: 50px;
  background-color: #00A79D;       /* 品牌主色 */
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 167, 157, 0.3); /* 阴影带品牌色调 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

#toc-toggle-btn:hover {
  background-color: #008f87;      /* 品牌色深一点的 hover */
  transform: scale(1.05);
}



.detail-content table {
  width: 100%; /* 改为100%而不是99% */
  border-collapse: collapse;
  overflow: hidden;
  box-sizing: border-box;
  overflow-x: auto;
  display: block;
}
.detail-content table tbody {
  display: table;
  width: 100%; /* 改为100%而不是99% */
}
.detail-content table tr {
  border: 1px solid #ccc;
}
.detail-content table tr th, .detail-content table tr td {
  padding: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.detail-content table tr th {
  background-color: #f2f2f2;
}
.detail-content table caption {
  display: block;
  width: 100%; /* 改为100%而不是99% */
  box-sizing: border-box;
  padding: 12px 16px;
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--brand-primary);
  text-align: left;
  background-color: var(--bg-secondary);
  border-bottom: 2px solid var(--brand-primary);
  border-radius: 6px 6px 0 0;
  margin-bottom: 0;
}

/* ========== 目录导航栏 - 桌面默认隐藏，移动端通过 JS 控制 ========== */
/* ========== 目录导航栏 - 桌面默认隐藏，移动端通过 JS 控制 ========== */
.detail-menu-box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  max-height: 100vh;
  background: #fff;
  z-index: 1001;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 20px;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  box-sizing: border-box;
}

.detail-menu-box.active {
  transform: translateX(0);
}

/* ========== 移动端遮罩层 ========== */
.toc-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.toc-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ========== 目录项样式 ========== */
.detail-menu-button {
  position: sticky;
  top: 0;
  z-index: 20;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.detail-menu-list {
  width: 100%;
}

.detail-menu-item a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 8px 12px;
  font-size: 15px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.detail-menu-item a:hover {
  background: #f0f8ff;
  color: #005580;
}

/* ========== 滚动条美化（仅 WebKit） ========== */
.detail-menu-box::-webkit-scrollbar {
  width: 6px;
}
.detail-menu-box::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

/* ========== 桌面端：默认不显示目录（由 JS 控制按钮触发） ========== */
/* 移动端才需要弹出式 TOC，桌面可另做侧边栏，但当前设计为仅移动端使用 */

@media screen and (max-width: 992px) {
  .essential-section1 .essential-section1-left {
    width: 100%;
  }
  .essential-section1 .essential-section1-middle {
    width: 100%;
  }
  .essential-section1 .category-big {
    width: 100%;
    max-width: 100%;
  }
  .essential-section1 .category-medium {
    max-width: 100%;
    width: 100%;
  }
  .essential-section1 .essential-section1-right .category-small {
    max-width: 100%;
    width: 100%;
  }
}
.detail-info {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 24px;
}
.detail-info td {
  vertical-align: top;
}

.detail-table-space {
  width: 316px;
}

.breadcrumbs {
  font-size: var(--font-size);
  overflow: hidden; /* 溢出隐藏 */
  white-space: nowrap; /* 强制文本在一行显示 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
/* 链接默认状态 */
.breadcrumbs a {
  color: var(--text-primary, #374151);
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}
.breadcrumbs a:hover {
  text-decoration: underline;
  color: var(--brand-primary);
}
.breadcrumbs a + span {
  margin: 0 4px;
}

@media screen and (max-width: 992px) {
  .breadcrumbs {
    overflow: auto;
    white-space: normal;
    text-overflow: inherit;
  }
}
.detail-title {
  font-size: 32px;
  text-align: left;
  margin-top: 24px;
}

.detail-description {
  color: var(--text-secondary);
  margin: 16px 0 24px 0;
}

.detail-author {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.detail-author-image {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
}

.detail-author-avatar {
  display: flex;
  gap: 16px;
  align-items: center;
}

.detail-author-description {
  font-size: var(--font-size-sm);
}

.detail-content-layout {
  margin-top: 64px;
  display: flex;
  gap: 20px;
}

.detail-sidebar {
  width: 300px;
  margin-left: 64px;
}
.detail-sidebar .section-title {
  margin-top: 0;
}

.detail-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-content img {
  max-width: 100%;
}
.detail-content img.detail-left-img {
  float: left;
  width: 50%;
  margin-right: 8px;
}
.detail-content img.detail-right-img {
  width: 50%;
  float: right;
  margin-left: 8px;
}
.detail-content table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  box-sizing: border-box;
  overflow-x: auto;
  display: block;
}
.detail-content table tbody {
  display: table;
  width: 100%;
}
.detail-content table tr {
  border: 1px solid #ccc;
}
.detail-content table tr th, .detail-content table tr td {
  padding: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.detail-content table tr th {
  background-color: #f2f2f2;
}
.detail-content a {
  color: var(--brand-primary);
}
.detail-content a:hover {
  text-decoration: underline !important;
}

.share-title {
  font-weight: bolder;
}

.detail-body {
  display: flex;
  gap: 24px;
}

.detail-menu-box .detail-menu-item {
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
}
.detail-menu-box .detail-menu-item-title {
  display: flex;
  cursor: pointer;
}
.detail-menu-box .detail-menu-parent .icon-arrow-fill {
  cursor: pointer;
  width: 16px;
  height: 16px;
  transition: all 0.3s;
  flex-shrink: 0;
  margin-top: 4px;
}
.detail-menu-box .detail-menu-parent .detail-menu-item {
  padding-left: 16px;
  max-height: 0px;
}
.detail-menu-box .detail-menu-active > .detail-menu-item {
  max-height: 500px;
}
.detail-menu-box .detail-menu-active > .detail-menu-item-title .icon-arrow-fill {
  transform: rotate(90deg);
}
.detail-menu-box .detail-menu-selected {
  color: var(--brand-primary);
}
/* 修正后的代码 */
.detail-menu-item a {
  display: block;
  text-decoration: none;
  color: #333; /* 这个值本身没问题，但为了保险，可以加粗或换一个更醒目的颜色 */
  padding: 8px 12px;
  font-size: 15px;
}

/* 可选：增加 hover 效果的对比度 */
.detail-menu-item a:hover {
  background: #f0f8ff;
  border-radius: 4px;
  color: #005580; /* 确保悬停时的颜色也清晰可见 */
}
.detail-menu-box .detail-menu-button {
  cursor: pointer;
}
.detail-menu-box.detail-menu-button-active .detail-menu-button + .detail-menu-list {
  width: 300px;
  max-height: 1000px;
}
.detail-menu-box.detail-menu-button-active + .detail-menu-space {
  width: 316px;
}
.detail-menu-box.detail-menu-button-active .icon-fold {
  transform: rotate(180deg);
}

@media screen and (max-width: 1272px) {
  .detail-sidebar {
    display: none;
  }
  .detail-table-space {
    display: none;
  }
}
@media screen and (max-width: 992px) {
 
  .detail-sidebar {
    display: block;
  }
  .detail-content-box {
    display: flex;
    flex-direction: column;
  }
  .detail-content-box .detail-sidebar {
    width: 100%;
    margin: 16px 0 16px 0;
  }
  .detail-content-box .category-small {
    max-width: 100%;
  }
}
@media screen and (max-width: 992px) {
  .detail-menu-box {
    display: block; /* 改为 block，靠 transform 控制显隐 */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    max-height: 100vh;
    background: #fff;
    z-index: 1001;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    padding: 20px;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    box-sizing: border-box;
  }
  .detail-menu-box.active {
    transform: translateX(0);
    display: block !important;
  }
  /* 其他原有样式保留 */
}

/* 父容器：控制整体布局 */
.articles-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin: 24px 0;
  padding: 0;
}

/* 单个卡片 */
.category-medium {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  height: 100%;
  box-sizing: border-box;
}
.category-medium:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: #d1d5db;
}

/* 封面图：关键保证 1:1 并居中裁剪 */
.category-medium-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin-bottom: 16px;
  background: #f9fafb; /* 占位背景色 */
}

/* 分类标签 */
.category-medium-description {
  display: inline-block;
  background: #4b5563;
  color: white;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
  font-weight: 500;
}

/* 标题 */
.category-medium-title {
  font-size: 18px;
  font-weight: 600;
  margin: 8px 0 12px;
  color: #1f2937;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 响应式：移动端单列 */
@media (max-width: 767px) {
  .articles-list {
    grid-template-columns: 1fr;
    padding: 0 12px;
  }
  .category-medium {
    padding: 16px;
  }
  .category-medium-title {
    font-size: 17px;
  }
}

/* PC 端：若希望严格 3 列（可选） */
@media (min-width: 992px) {
  .articles-list {
    grid-template-columns: repeat(3, 1fr);
  }
}