/* 按钮组容器：Flex 布局 + 自适应 */
.btn-group {
  display: flex;       /* 弹性布局，子元素横向排列 */
  gap: 20px;           /* 按钮之间的间距（可调整） */
  margin: 20px 0;      /* 上下外边距（可调整） */
  justify-content: center; /* 按钮居中（可选，也可设为 space-between） */
  flex-wrap: wrap;     /* 空间不足时自动换行（手机端生效） */
  padding: 0 30px;     /* 修改：两侧间距调整为12px，比之前更舒适一点 */
  box-sizing: border-box; /* 确保padding不影响总宽度 */
}

/* 按钮样式：红底黑字 + 自适应 */
.btn {
  background-color: red;   /* 红色背景 */
  color: black;            /* 黑色文字 */
  padding: 12px 24px;      /* 内边距（可调整大小） */
  text-decoration: none;   /* 去掉下划线 */
  border-radius: 4px;      /* 圆角（可选） */
  font-size: 16px;         /* 字体大小（可调整） */
  white-space: nowrap;     /* 文字不换行（避免按钮变形） */
  flex: 1;                 /* 平分容器宽度（一行两个时自动均分） */
  text-align: center;      /* 文字居中 */
  box-sizing: border-box;  /* 包含内边距和边框，避免溢出 */
}

/* 手机端适配：缩小按钮尺寸 + 调整间距 */
@media (max-width: 768px) {
  .btn {
    padding: 10px 20px;    /* 缩小内边距 */
    font-size: 14px;       /* 缩小字体 */
    flex: 1 1 calc(50% - 10px); /* 一行两个，减去间距后均分宽度 */
  }
  .btn-group {
    gap: 10px;             /* 缩小按钮间距 */
    padding: 0 30px;        /* 手机端也相应调整，保持比例协调 */
  }
}