/* 2. 底部导航容器：固定定位 + Flexbox */
.bottom-nav {
  position: fixed;      /* 固定定位 */
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;         /* 导航高度 */
  background-color: #ffffff;
  border-top: 1px solid #e5e5e5;
  display: flex;        /* 启用Flexbox */
  justify-content: space-around; /* 菜单项均匀分布 */
  align-items: center;  /* 垂直居中 */
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  z-index: 1000;        /* 确保显示在最上层 */
}

/* 3. 每个导航菜单项：弹性布局 + 自适应 */
.nav-item {
  display: flex;
  flex-direction: column; /* 图标和文字垂直排列 */
  align-items: center;
  justify-content: center;
  flex: 1;              /* 关键：每个菜单项平分宽度，实现自适应 */
  text-align: center;
  padding: 4px 0;
  color: #999999;
  text-decoration: none;
  font-size: 12px;
  transition: color 0.2s;
  cursor: pointer;
  /* 移除外层列表样式 */
  list-style: none;
}

/* 图标样式 */
.nav-item .icon {
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 2px;
}

/* 文字标签样式 */
.nav-item .labelm {
  font-size: 11px;
  line-height: 1.2;
}

/* 激活状态样式 */
.nav-item.active {
  color: #d4a24e; /* 书法类风格常用金色或主题色 */
}

/* 4. 确保主要内容不被遮挡，并适配移动端 */
.main-content {
  padding: 16px;
  max-width: 750px;     /* 移动端舒适阅读宽度 */
  margin: 0 auto;       /* 居中 */
  /* 内容高度足够时，滚动条自动出现 */
}