/* 弹性容器基础类 */
.m-flex {
  display: flex;
}
.m-wrap {
  flex-wrap: wrap;
}
.m-justify-between {
  justify-content: space-between;
}
.m-items-start {
  align-items: flex-start;
}

/* 子盒子宽度控制类 */
.m-f-0 {
  flex: 0 0 auto; /* 关键：不扩张、不收缩，基于内容宽度 */
}
.m-grow-0 {
  flex-grow: 0; /* 禁止拉伸 */
}
.m-shrink-0 {
  flex-shrink: 0; /* 禁止压缩 */
}
.m-basis-auto {
  flex-basis: auto; /* 宽度由内容决定 */
}

/* 响应式间隙控制 */
.m-gap-16 {
  gap: 16px;
}

.m-gap-20 { gap: 20px; } /* 控制左右盒子间距 */

/* 子盒子宽度控制 */
.m-flex-1 { flex: 1 1 0%; } /* 关键：平均分配剩余空间 */

.m-minw-0 { min-width: 0; } /* 防止内容溢出容器 */

/* 图片列表容器 */
.m-wrap { flex-wrap: wrap; } /* 允许换行 */
.m-gap-16 { gap: 16px; } /* 图片项间距 */

/* 单个图片项 */
.m-shrink-0 { flex-shrink: 0; } /* 禁止缩小 */
.m-basis-150 { flex-basis: 150px; } /* 基础宽度150px */
.m-maxw-100 { max-width: 100%; } /* 防止超出父容器 */

/* 图片标题溢出处理 */
.menu-text-right {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; /* 限制标题宽度 */
}

/* 布局类 */
.m-flex { display: flex; }
.m-flex-4{flex: 0 0 calc(100% / 4 - 2vw);}
.m-flex-3{flex: 0 0 calc(100% / 3 - 2vw);min-width: 0;}
.m-flex-col { flex-direction: column; }
.m-wrap { flex-wrap: wrap; }
.m-items-center { align-items: center; }
.m-justify-center { justify-content: center; }
.m-justify-between { justify-content: space-between; }

/* 尺寸类 */
.m-w-full { width: 100%; }
.m-h-full { height: 100%; }
.m-minw-0 { min-width: 0; }
.m-maxw-150 { max-width: 150px; }

/* 间距类 */
.m-gap-16 { gap: 16px; }
.m-gap-20 { gap: 20px; }
.m-mb-12 { margin-bottom: 12px; }

/* 文本类 */
.m-font-1{font-size: 1em;}
.m-font-bold { font-weight: bold; }
.m-text-lg { font-size: 1.125rem; } /* 18px */
.m-text-center { text-align: center; }
.m-text-2 {
    font-size: 2rem;
}

.m-text-1-3{
    font-size: 1.3rem;
}

.m-text-1{
    font-size: 1rem;
}

.white-space-n{
  white-space: normal;
}

/* 图片类 */
.m-object-cover { object-fit: cover; }
.m-block { display: block; }

/* 溢出处理 */
.m-text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.m-flex { display: flex; }
.m-justify-center { justify-content: center; } /* 水平居中 */

/* Grid 布局 */
.m-grid { display: grid; }
.m-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 4列等宽 */
.m-gap-16 { gap: 16px; } /* 图片间距 */

/* 图片容器 */
.m-aspect-square { aspect-ratio: 1/1; } /* 强制正方形 */
.m-aspect-1-2 { aspect-ratio: 1.2/1; }
.m-maxw-150 { max-width: 150px; } /* 限制最大宽度 */

/* 文本溢出处理 */
.m-text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; /* 限制标题宽度 */
}

/* 间距控制 */
.m-mt-8 { margin-top: 8px; } /* 标题与图片间距 */

.m-gap-1vw { gap: 3vw; } /* 子项间距 */

.m-gap-2em { gap: 2em; } /* 子项间距 */

.m-grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 关键：minmax(0, 1fr) 允许列宽压缩 */
}
.m-minw-0 { min-width: 0; } /* 允许容器小于内容宽度 [6](@ref) */

.m-max-w-full { max-width: 100%; } /* 图片不超父容器 [1,3](@ref) */

.m-max-w-800 { max-width: 800px; } /* 限制整体网格宽度 */

.m-color-text { color: rgb(77, 77, 77); }

.m-border-radius-50 { border-radius: 50%; }
.m-border-1 { border: 1px solid #e5e7eb; } /* 边框样式 */

/* 图片容器类 */
.m-aspect-square { aspect-ratio: 1 / 1; } /* 正方形比例 */
.m-overflow-hidden { overflow: hidden; } /* 内容溢出隐藏 */
.m-rounded-lg { border-radius: 0.5rem; } /* 大圆角 */

/* 文本处理类