/* 社交分享容器样式（横向排列 + 自动换行） */
.social-share {
  display: flex;                 /* 启用 Flex 布局 */
  flex-wrap: wrap;              /* 超出自动换行 */
  gap: 10px;                    /* 按钮之间的间距 */
  align-items: center;          /* 垂直居中对齐 */
  margin-top: 1rem;

  margin-bottom: 2rem; /* ✅ 新增，增加底部间距 */
}

/* 每个分享按钮样式 */
.share-btn {
  display: flex;                /* 让图标和文字水平排列 */
  align-items: center;          /* 垂直居中 */
  gap: 5px;                     /* 图标与文字之间间距 */
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  background-color: #f5f5f5;
  color: #333;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.2s;
}

/* 鼠标悬停效果 */
.share-btn:hover {
  background-color: #e0e0e0;
  transform: translateY(-1px);
}

/* 图标大小 */
.share-btn i {
  font-size: 16px;
}

/* 手机端优化：按钮可换行，保持最大宽度 */
@media (max-width: 768px) {
  .social-share {
    justify-content: flex-start; /* 左对齐 */
  }

  .share-btn {
    flex: 1 1 auto;              /* 每个按钮占据尽可能多空间，自动换行 */
    min-width: calc(50% - 10px); /* 让每行最多放两个按钮 */
    box-sizing: border-box;
  }
}