.wv-row {  
  --wv-col-span-width-1: 4.16666667%;
  --wv-col-span-width-2: 8.33333333%;
  --wv-col-span-width-3: 12.50000000%;
  --wv-col-span-width-4: 16.66666667%;
  --wv-col-span-width-5: 20.83333333%;
  --wv-col-span-width-6: 25.00000000%;
  --wv-col-span-width-7: 29.16666667%;
  --wv-col-span-width-8: 33.33333333%;
  --wv-col-span-width-9: 37.50000000%;
  --wv-col-span-width-10: 41.66666667%;
  --wv-col-span-width-11: 45.83333333%;
  --wv-col-span-width-12: 50.00000000%;
  --wv-col-span-width-13: 54.16666667%;
  --wv-col-span-width-14: 58.33333333%;
  --wv-col-span-width-15: 62.50000000%;
  --wv-col-span-width-16: 66.66666667%;
  --wv-col-span-width-17: 70.83333333%;
  --wv-col-span-width-18: 75.00000000%;
  --wv-col-span-width-19: 79.16666667%;
  --wv-col-span-width-20: 83.33333333%;
  --wv-col-span-width-21: 87.50000000%;
  --wv-col-span-width-22: 91.66666667%;
  --wv-col-span-width-23: 95.83333333%;
  --wv-col-span-width-24: 100%;
  
  --wv-gap-x: 0rpx;
  --wv-gap-y: 0rpx;

  display: flex;
  flex-wrap: wrap;
  clear: both;
  position: relative;
  width: calc(100% + var(--wv-gap-x));

  margin-left: calc(var(--wv-gap-x) * -0.5);
  margin-right: calc(var(--wv-gap-x) * -0.5);
  column-gap: 0;
  row-gap: var(--wv-gap-y);
}
.wv-row::after {
  content: "";
  display: block;
  clear: both;
}
.wv-row.col-h-left {
  /* 水平顶对齐 */
  justify-content: flex-start;
}
.wv-row.col-h-center {
  /* 水平居中对齐 */
  justify-content: center;
}
.wv-row.col-h-right {
  /* 水平底对齐 */
  justify-content: flex-end;
}
.wv-row.col-h-evenly { 
  justify-content: space-evenly; 
}
.wv-row.col-v-stretch {
  /* 垂直等高撑开 */
  align-items: stretch;
}
.wv-row, .wv-row.col-v-top {
  /* 垂直顶对齐 */
  align-items: flex-start;
}
.wv-row.col-v-center {
  /* 垂直居中对齐 */
  align-items: center;
}
.wv-row.col-v-bottom {
  /* 垂直底对齐 */
  align-items: flex-end;
}



/* .wv-row.debug-border::after {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: dashed 1rpx var(--wv-debug-border-color);
  position: absolute;
  left: 0;
  top:0;
} */



.wv-col {
  box-sizing: border-box;
  position: relative;
  clear: both;
  padding: 0 calc(var(--wv-gap-x) * 0.5); 
  flex: 0 0 auto;
}
.wv-col::after {
  content: "";
  display: block;
  clear: both;
}
.wv-row.debug-border .wv-col::after, .wv-col.debug-border::after {
  box-sizing: border-box;
  border: dashed 1rpx var(--wv-debug-border-color);
  position: absolute;
  left: calc(var(--wv-gap-x) * 0.5);
  right: calc(var(--wv-gap-x) * 0.5);
  top: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}


.wv-col:not([class*="span"]) {  min-width: var(--wv-col-span-width-1); flex: 1 1 0; }
.wv-col.span-auto { flex: none; }
.wv-col.span1 { width: var(--wv-col-span-width-1); }
.wv-col.span2 { width: var(--wv-col-span-width-2); }
.wv-col.span3 { width: var(--wv-col-span-width-3); }
.wv-col.span4 { width: var(--wv-col-span-width-4); }
.wv-col.span5 { width: var(--wv-col-span-width-5); }
.wv-col.span6 { width: var(--wv-col-span-width-6); }
.wv-col.span7 { width: var(--wv-col-span-width-7); }
.wv-col.span8 { width: var(--wv-col-span-width-8); }
.wv-col.span9 { width: var(--wv-col-span-width-9); }
.wv-col.span10 { width: var(--wv-col-span-width-10); }
.wv-col.span11 { width: var(--wv-col-span-width-11); }
.wv-col.span12 { width: var(--wv-col-span-width-12); }
.wv-col.span13 { width: var(--wv-col-span-width-13); }
.wv-col.span14 { width: var(--wv-col-span-width-14); }
.wv-col.span15 { width: var(--wv-col-span-width-15); }
.wv-col.span16 { width: var(--wv-col-span-width-16); }
.wv-col.span17 { width: var(--wv-col-span-width-17); }
.wv-col.span18 { width: var(--wv-col-span-width-18); }
.wv-col.span19 { width: var(--wv-col-span-width-19); }
.wv-col.span20 { width: var(--wv-col-span-width-20); }
.wv-col.span21 { width: var(--wv-col-span-width-21); }
.wv-col.span22 { width: var(--wv-col-span-width-22); }
.wv-col.span23 { width: var(--wv-col-span-width-23); }
.wv-col.span24 { width: var(--wv-col-span-width-24); }


.wv-col.offset-l-1 { margin-left: var(--wv-col-span-width-1); }
.wv-col.offset-l-2 { margin-left: var(--wv-col-span-width-2); }
.wv-col.offset-l-3 { margin-left: var(--wv-col-span-width-3); }
.wv-col.offset-l-4 { margin-left: var(--wv-col-span-width-4); }
.wv-col.offset-l-5 { margin-left: var(--wv-col-span-width-5); }
.wv-col.offset-l-6 { margin-left: var(--wv-col-span-width-6); }
.wv-col.offset-l-7 { margin-left: var(--wv-col-span-width-7); }
.wv-col.offset-l-8 { margin-left: var(--wv-col-span-width-8); }
.wv-col.offset-l-9 { margin-left: var(--wv-col-span-width-9); }
.wv-col.offset-l-10 { margin-left: var(--wv-col-span-width-10); }
.wv-col.offset-l-11 { margin-left: var(--wv-col-span-width-11); }
.wv-col.offset-l-12 { margin-left: var(--wv-col-span-width-12); }
.wv-col.offset-l-13 { margin-left: var(--wv-col-span-width-13); }
.wv-col.offset-l-14 { margin-left: var(--wv-col-span-width-14); }
.wv-col.offset-l-15 { margin-left: var(--wv-col-span-width-15); }
.wv-col.offset-l-16 { margin-left: var(--wv-col-span-width-16); }
.wv-col.offset-l-17 { margin-left: var(--wv-col-span-width-17); }
.wv-col.offset-l-18 { margin-left: var(--wv-col-span-width-18); }
.wv-col.offset-l-19 { margin-left: var(--wv-col-span-width-19); }
.wv-col.offset-l-20 { margin-left: var(--wv-col-span-width-20); }
.wv-col.offset-l-21 { margin-left: var(--wv-col-span-width-21); }
.wv-col.offset-l-22 { margin-left: var(--wv-col-span-width-22); }
.wv-col.offset-l-23 { margin-left: var(--wv-col-span-width-23); }
.wv-col.offset-l-24 { margin-left: var(--wv-col-span-width-24); }

.wv-col.offset-r-1 { margin-right: var(--wv-col-span-width-1); }
.wv-col.offset-r-2 { margin-right: var(--wv-col-span-width-2); }
.wv-col.offset-r-3 { margin-right: var(--wv-col-span-width-3); }
.wv-col.offset-r-4 { margin-right: var(--wv-col-span-width-4); }
.wv-col.offset-r-5 { margin-right: var(--wv-col-span-width-5); }
.wv-col.offset-r-6 { margin-right: var(--wv-col-span-width-6); }
.wv-col.offset-r-7 { margin-right: var(--wv-col-span-width-7); }
.wv-col.offset-r-8 { margin-right: var(--wv-col-span-width-8); }
.wv-col.offset-r-9 { margin-right: var(--wv-col-span-width-9); }
.wv-col.offset-r-10 { margin-right: var(--wv-col-span-width-10); }
.wv-col.offset-r-11 { margin-right: var(--wv-col-span-width-11); }
.wv-col.offset-r-12 { margin-right: var(--wv-col-span-width-12); }
.wv-col.offset-r-13 { margin-right: var(--wv-col-span-width-13); }
.wv-col.offset-r-14 { margin-right: var(--wv-col-span-width-14); }
.wv-col.offset-r-15 { margin-right: var(--wv-col-span-width-15); }
.wv-col.offset-r-16 { margin-right: var(--wv-col-span-width-16); }
.wv-col.offset-r-17 { margin-right: var(--wv-col-span-width-17); }
.wv-col.offset-r-18 { margin-right: var(--wv-col-span-width-18); }
.wv-col.offset-r-19 { margin-right: var(--wv-col-span-width-19); }
.wv-col.offset-r-20 { margin-right: var(--wv-col-span-width-20); }
.wv-col.offset-r-21 { margin-right: var(--wv-col-span-width-21); }
.wv-col.offset-r-22 { margin-right: var(--wv-col-span-width-22); }
.wv-col.offset-r-23 { margin-right: var(--wv-col-span-width-23); }
.wv-col.offset-r-24 { margin-right: var(--wv-col-span-width-24); }


.wv-row.gap-1 { --wv-gap-x: 1rpx; --wv-gap-y: 1rpx; }
.wv-row.gap-2 { --wv-gap-x: 2rpx; --wv-gap-y: 2rpx; }
.wv-row.gap-4 { --wv-gap-x: 4rpx; --wv-gap-y: 4rpx; }
.wv-row.gap-6 { --wv-gap-x: 6rpx; --wv-gap-y: 6rpx; }
.wv-row.gap-8 { --wv-gap-x: 8rpx; --wv-gap-y: 8rpx; }
.wv-row.gap-10 { --wv-gap-x: 10rpx; --wv-gap-y: 10rpx; }
.wv-row.gap-12 { --wv-gap-x: 12rpx; --wv-gap-y: 12rpx; }
.wv-row.gap-14 { --wv-gap-x: 14rpx; --wv-gap-y: 14rpx; }
.wv-row.gap-16 { --wv-gap-x: 16rpx; --wv-gap-y: 16rpx; }
.wv-row.gap-18 { --wv-gap-x: 18rpx; --wv-gap-y: 18rpx; }
.wv-row.gap-20 { --wv-gap-x: 20rpx; --wv-gap-y: 20rpx; }
.wv-row.gap-25 { --wv-gap-x: 25rpx; --wv-gap-y: 25rpx; }
.wv-row.gap-30 { --wv-gap-x: 30rpx; --wv-gap-y: 30rpx; }
.wv-row.gap-40 { --wv-gap-x: 40rpx; --wv-gap-y: 40rpx; }
.wv-row.gap-50 { --wv-gap-x: 50rpx; --wv-gap-y: 50rpx; }
.wv-row.gap-60 { --wv-gap-x: 60rpx; --wv-gap-y: 60rpx; }
.wv-row.gap-70 { --wv-gap-x: 70rpx; --wv-gap-y: 70rpx; }
.wv-row.gap-80 { --wv-gap-x: 80rpx; --wv-gap-y: 80rpx; }
.wv-row.gap-90 { --wv-gap-x: 90rpx; --wv-gap-y: 90rpx; }
.wv-row.gap-100 { --wv-gap-x: 100rpx; --wv-gap-y: 100rpx; }

.wv-row.gap-x-1 { --wv-gap-x: 1rpx;}
.wv-row.gap-x-2 { --wv-gap-x: 2rpx;}
.wv-row.gap-x-4 { --wv-gap-x: 4rpx;}
.wv-row.gap-x-6 { --wv-gap-x: 6rpx;}
.wv-row.gap-x-8 { --wv-gap-x: 8rpx;}
.wv-row.gap-x-10 { --wv-gap-x: 10rpx;}
.wv-row.gap-x-12 { --wv-gap-x: 12rpx;}
.wv-row.gap-x-14 { --wv-gap-x: 14rpx;}
.wv-row.gap-x-16 { --wv-gap-x: 16rpx;}
.wv-row.gap-x-18 { --wv-gap-x: 18rpx;}
.wv-row.gap-x-20 { --wv-gap-x: 20rpx;}
.wv-row.gap-x-25 { --wv-gap-x: 25rpx;}
.wv-row.gap-x-30 { --wv-gap-x: 30rpx;}
.wv-row.gap-x-40 { --wv-gap-x: 40rpx;}
.wv-row.gap-x-50 { --wv-gap-x: 50rpx;}
.wv-row.gap-x-60 { --wv-gap-x: 60rpx;}
.wv-row.gap-x-70 { --wv-gap-x: 70rpx;}
.wv-row.gap-x-80 { --wv-gap-x: 80rpx;}
.wv-row.gap-x-90 { --wv-gap-x: 90rpx;}
.wv-row.gap-x-100 { --wv-gap-x: 100rpx;}

.wv-row.gap-y-1 { --wv-gap-y: 1rpx;}
.wv-row.gap-y-2 { --wv-gap-y: 2rpx;}
.wv-row.gap-y-4 { --wv-gap-y: 4rpx;}
.wv-row.gap-y-6 { --wv-gap-y: 6rpx;}
.wv-row.gap-y-8 { --wv-gap-y: 8rpx;}
.wv-row.gap-y-10 { --wv-gap-y: 10rpx;}
.wv-row.gap-y-12 { --wv-gap-y: 12rpx;}
.wv-row.gap-y-14 { --wv-gap-y: 14rpx;}
.wv-row.gap-y-16 { --wv-gap-y: 16rpx;}
.wv-row.gap-y-18 { --wv-gap-y: 18rpx;}
.wv-row.gap-y-20 { --wv-gap-y: 20rpx;}
.wv-row.gap-y-25 { --wv-gap-y: 25rpx;}
.wv-row.gap-y-30 { --wv-gap-y: 30rpx;}
.wv-row.gap-y-40 { --wv-gap-y: 40rpx;}
.wv-row.gap-y-50 { --wv-gap-y: 50rpx;}
.wv-row.gap-y-60 { --wv-gap-y: 60rpx;}
.wv-row.gap-y-70 { --wv-gap-y: 70rpx;}
.wv-row.gap-y-80 { --wv-gap-y: 80rpx;}
.wv-row.gap-y-90 { --wv-gap-y: 90rpx;}
.wv-row.gap-y-100 { --wv-gap-y: 100rpx;}

/* Semantic gap values for wv-row */
.wv-row.gap-mini { --wv-gap-x: 8rpx; --wv-gap-y: 8rpx; }
.wv-row.gap-small { --wv-gap-x: 16rpx; --wv-gap-y: 16rpx; }
.wv-row.gap-default, .wv-row.gap { --wv-gap-x: 24rpx; --wv-gap-y: 24rpx; }
.wv-row.gap-large { --wv-gap-x: 40rpx; --wv-gap-y: 40rpx; }
.wv-row.gap-huge { --wv-gap-x: 56rpx; --wv-gap-y: 56rpx; }

/* Semantic x-direction gap values for wv-row */
.wv-row.gap-x-mini { --wv-gap-x: 8rpx; }
.wv-row.gap-x-small { --wv-gap-x: 16rpx; }
.wv-row.gap-x-default, .wv-row.gap-x { --wv-gap-x: 24rpx; }
.wv-row.gap-x-large { --wv-gap-x: 40rpx; }
.wv-row.gap-x-huge { --wv-gap-x: 56rpx; }

/* Semantic y-direction gap values for wv-row */
.wv-row.gap-y-mini { --wv-gap-y: 8rpx; }
.wv-row.gap-y-small { --wv-gap-y: 16rpx; }
.wv-row.gap-y-default, .wv-row.gap-y { --wv-gap-y: 24rpx; }
.wv-row.gap-y-large { --wv-gap-y: 40rpx; }
.wv-row.gap-y-huge { --wv-gap-y: 56rpx; }

/* Semantic left offset values */
.wv-col.offset-l-mini { margin-left: 8rpx; }
.wv-col.offset-l-small { margin-left: 16rpx; }
.wv-col.offset-l-default, .wv-col.offset-l { margin-left: 24rpx; }
.wv-col.offset-l-large { margin-left: 40rpx; }
.wv-col.offset-l-huge { margin-left: 56rpx; }

/* Semantic right offset values */
.wv-col.offset-r-mini { margin-right: 8rpx; }
.wv-col.offset-r-small { margin-right: 16rpx; }
.wv-col.offset-r-default, .wv-col.offset-r { margin-right: 24rpx; }
.wv-col.offset-r-large { margin-right: 40rpx; }
.wv-col.offset-r-huge { margin-right: 56rpx; }



















.wv-grid {
  --wv-columns: repeat(1, 1fr);
  --wv-gap-x: 0rpx;
  --wv-gap-y: 0rpx;

  display: grid;
  grid-auto-rows: minmax(40rpx, auto); 
  grid-template-columns: var(--wv-columns); 
  grid-column-gap: var(--wv-gap-x);
  grid-row-gap: var(--wv-gap-y);
  word-wrap: break-word;
  word-break: break-all;
}

.wv-grid.block {
  width: 100%;
}

.wv-grid.grid-1 { --wv-columns: repeat(1, 1fr); }
.wv-grid.grid-2 { --wv-columns: repeat(2, 1fr); }
.wv-grid.grid-3 { --wv-columns: repeat(3, 1fr); }
.wv-grid.grid-4 { --wv-columns: repeat(4, 1fr); }
.wv-grid.grid-5 { --wv-columns: repeat(5, 1fr); }
.wv-grid.grid-6 { --wv-columns: repeat(6, 1fr); }
.wv-grid.grid-7 { --wv-columns: repeat(7, 1fr); }
.wv-grid.grid-8 { --wv-columns: repeat(8, 1fr); }
.wv-grid.grid-9 { --wv-columns: repeat(9, 1fr); }
.wv-grid.grid-10 { --wv-columns: repeat(10, 1fr); }
.wv-grid.grid-11 { --wv-columns: repeat(11, 1fr); }
.wv-grid.grid-12 { --wv-columns: repeat(12, 1fr); }
.wv-grid.grid-13 { --wv-columns: repeat(13, 1fr); }
.wv-grid.grid-14 { --wv-columns: repeat(14, 1fr); }
.wv-grid.grid-15 { --wv-columns: repeat(15, 1fr); }
.wv-grid.grid-16 { --wv-columns: repeat(16, 1fr); }
.wv-grid.grid-17 { --wv-columns: repeat(17, 1fr); }
.wv-grid.grid-18 { --wv-columns: repeat(18, 1fr); }
.wv-grid.grid-19 { --wv-columns: repeat(19, 1fr); }
.wv-grid.grid-20 { --wv-columns: repeat(20, 1fr); }
.wv-grid.grid-21 { --wv-columns: repeat(21, 1fr); }
.wv-grid.grid-22 { --wv-columns: repeat(22, 1fr); }
.wv-grid.grid-23 { --wv-columns: repeat(23, 1fr); }
.wv-grid.grid-24 { --wv-columns: repeat(24, 1fr); }

.wv-grid-cell {
  --wv-column-span: span 1;
  --wv-row-span: span 1;

  position: relative;
  /* aspect-ratio: 1; */

  grid-column: var(--wv-column-span);
  grid-row: var(--wv-row-span);
  clear: both;

  align-self: flex-start;
  /* justify-self: flex-start; */
}
.wv-grid-cell::after {
  content: "";
  display: block;
  clear: both;
}
.wv-grid-cell.debug-border::after {
  box-sizing: border-box;
  border: dashed 1rpx var(--wv-debug-border-color);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.wv-grid-cell.placeholder {
  visibility: hidden;
  /* opacity: 0; */
}

.wv-grid-cell.column-span1 { --wv-column-span: span 1; }
.wv-grid-cell.column-span2 { --wv-column-span: span 2; }
.wv-grid-cell.column-span3 { --wv-column-span: span 3; }
.wv-grid-cell.column-span4 { --wv-column-span: span 4; }
.wv-grid-cell.column-span5 { --wv-column-span: span 5; }
.wv-grid-cell.column-span6 { --wv-column-span: span 6; }
.wv-grid-cell.column-span7 { --wv-column-span: span 7; }
.wv-grid-cell.column-span8 { --wv-column-span: span 8; }
.wv-grid-cell.column-span9 { --wv-column-span: span 9; }
.wv-grid-cell.column-span10 { --wv-column-span: span 10; }
.wv-grid-cell.column-span11 { --wv-column-span: span 11; }
.wv-grid-cell.column-span12 { --wv-column-span: span 12; }
.wv-grid-cell.column-span13 { --wv-column-span: span 13; }
.wv-grid-cell.column-span14 { --wv-column-span: span 14; }
.wv-grid-cell.column-span15 { --wv-column-span: span 15; }
.wv-grid-cell.column-span16 { --wv-column-span: span 16; }
.wv-grid-cell.column-span17 { --wv-column-span: span 17; }
.wv-grid-cell.column-span18 { --wv-column-span: span 18; }
.wv-grid-cell.column-span19 { --wv-column-span: span 19; }
.wv-grid-cell.column-span20 { --wv-column-span: span 20; }
.wv-grid-cell.column-span21 { --wv-column-span: span 21; }
.wv-grid-cell.column-span22 { --wv-column-span: span 22; }
.wv-grid-cell.column-span23 { --wv-column-span: span 23; }
.wv-grid-cell.column-span24 { --wv-column-span: span 24; }

.wv-grid-cell[class*="row-span"] { align-self: initial; }
.wv-grid-cell.row-span1 { --wv-row-span: span 1; }
.wv-grid-cell.row-span2 { --wv-row-span: span 2; }
.wv-grid-cell.row-span3 { --wv-row-span: span 3; }
.wv-grid-cell.row-span4 { --wv-row-span: span 4; }
.wv-grid-cell.row-span5 { --wv-row-span: span 5; }
.wv-grid-cell.row-span6 { --wv-row-span: span 6; }
.wv-grid-cell.row-span7 { --wv-row-span: span 7; }
.wv-grid-cell.row-span8 { --wv-row-span: span 8; }
.wv-grid-cell.row-span9 { --wv-row-span: span 9; }
.wv-grid-cell.row-span10 { --wv-row-span: span 10; }
.wv-grid-cell.row-span11 { --wv-row-span: span 11; }
.wv-grid-cell.row-span12 { --wv-row-span: span 12; }
.wv-grid-cell.row-span13 { --wv-row-span: span 13; }
.wv-grid-cell.row-span14 { --wv-row-span: span 14; }
.wv-grid-cell.row-span15 { --wv-row-span: span 15; }
.wv-grid-cell.row-span16 { --wv-row-span: span 16; }
.wv-grid-cell.row-span17 { --wv-row-span: span 17; }
.wv-grid-cell.row-span18 { --wv-row-span: span 18; }
.wv-grid-cell.row-span19 { --wv-row-span: span 19; }
.wv-grid-cell.row-span20 { --wv-row-span: span 20; }
.wv-grid-cell.row-span21 { --wv-row-span: span 21; }
.wv-grid-cell.row-span22 { --wv-row-span: span 22; }
.wv-grid-cell.row-span23 { --wv-row-span: span 23; }
.wv-grid-cell.row-span24 { --wv-row-span: span 24; }

.wv-grid-cell.span1 { --wv-row-span: span 1; --wv-column-span: span 1; }
.wv-grid-cell.span2 { --wv-row-span: span 2; --wv-column-span: span 2; }
.wv-grid-cell.span3 { --wv-row-span: span 3; --wv-column-span: span 3; }
.wv-grid-cell.span4 { --wv-row-span: span 4; --wv-column-span: span 4; }
.wv-grid-cell.span5 { --wv-row-span: span 5; --wv-column-span: span 5; }
.wv-grid-cell.span6 { --wv-row-span: span 6; --wv-column-span: span 6; }
.wv-grid-cell.span7 { --wv-row-span: span 7; --wv-column-span: span 7; }
.wv-grid-cell.span8 { --wv-row-span: span 8; --wv-column-span: span 8; }
.wv-grid-cell.span9 { --wv-row-span: span 9; --wv-column-span: span 9; }
.wv-grid-cell.span10 { --wv-row-span: span 10; --wv-column-span: span 10; }
.wv-grid-cell.span11 { --wv-row-span: span 11; --wv-column-span: span 11; }
.wv-grid-cell.span12 { --wv-row-span: span 12; --wv-column-span: span 12; }
.wv-grid-cell.span13 { --wv-row-span: span 13; --wv-column-span: span 13; }
.wv-grid-cell.span14 { --wv-row-span: span 14; --wv-column-span: span 14; }
.wv-grid-cell.span15 { --wv-row-span: span 15; --wv-column-span: span 15; }
.wv-grid-cell.span16 { --wv-row-span: span 16; --wv-column-span: span 16; }
.wv-grid-cell.span17 { --wv-row-span: span 17; --wv-column-span: span 17; }
.wv-grid-cell.span18 { --wv-row-span: span 18; --wv-column-span: span 18; }
.wv-grid-cell.span19 { --wv-row-span: span 19; --wv-column-span: span 19; }
.wv-grid-cell.span20 { --wv-row-span: span 20; --wv-column-span: span 20; }
.wv-grid-cell.span21 { --wv-row-span: span 21; --wv-column-span: span 21; }
.wv-grid-cell.span22 { --wv-row-span: span 22; --wv-column-span: span 22; }
.wv-grid-cell.span23 { --wv-row-span: span 23; --wv-column-span: span 23; }
.wv-grid-cell.span24 { --wv-row-span: span 24; --wv-column-span: span 24; }





/* beautify & advance setting */
.wv-grid.cell-white > .wv-grid-cell, .wv-grid-cell.white { 
  background-color: var(--wv-background-white);
}
.wv-grid.cell-center .wv-grid-cell, .wv-grid-cell.center {
  display: flex;
  align-items:center;
  justify-content:center;
  /* text-align: center; */
  flex-wrap: wrap;
}
.wv-grid.cell-square .wv-grid-cell, .wv-grid-cell.square { aspect-ratio: 1; }

















/* 弹性布局容器 */
.wv-flex {
  display: flex;
}
[class*="wv-gap"] {
  gap: var(--wv-gap-y) var(--wv-gap-x);
}

.wv-flex.block {
  width: 100%;
}
  

/* 方向 */
.wv-flex, .wv-flex.row { flex-direction: row; }
.wv-flex.column { flex-direction: column; }

/* 换行 */
.wv-flex, .wv-flex.wrap { flex-wrap: wrap; }
.wv-flex.nowrap { flex-wrap: nowrap; }

/* 间距 - 数字型 */
.wv-gap-0 { --wv-gap-x: 0rpx; --wv-gap-y: 0rpx; }
.wv-gap-1 { --wv-gap-x: 1rpx; --wv-gap-y: 1rpx; }
.wv-gap-2 { --wv-gap-x: 2rpx; --wv-gap-y: 2rpx; }
.wv-gap-4 { --wv-gap-x: 4rpx; --wv-gap-y: 4rpx; }
.wv-gap-6 { --wv-gap-x: 6rpx; --wv-gap-y: 6rpx; }
.wv-gap-8 { --wv-gap-x: 8rpx; --wv-gap-y: 8rpx; }
.wv-gap-10 { --wv-gap-x: 10rpx; --wv-gap-y: 10rpx; }
.wv-gap-12 { --wv-gap-x: 12rpx; --wv-gap-y: 12rpx; }
.wv-gap-16 { --wv-gap-x: 16rpx; --wv-gap-y: 16rpx; }
.wv-gap-20 { --wv-gap-x: 20rpx; --wv-gap-y: 20rpx; }
.wv-gap-24 { --wv-gap-x: 24rpx; --wv-gap-y: 24rpx; }
.wv-gap-32 { --wv-gap-x: 32rpx; --wv-gap-y: 32rpx; }
.wv-gap-48 { --wv-gap-x: 48rpx; --wv-gap-y: 48rpx; }
.wv-gap-64 { --wv-gap-x: 64rpx; --wv-gap-y: 64rpx; }
.wv-gap-80 { --wv-gap-x: 80rpx; --wv-gap-y: 80rpx; }
.wv-gap-100 { --wv-gap-x: 100rpx; --wv-gap-y: 100rpx; }

/* 水平间距 */
.wv-gap-x-0 { --wv-gap-x: 0rpx; }
.wv-gap-x-1 { --wv-gap-x: 1rpx; }
.wv-gap-x-2 { --wv-gap-x: 2rpx; }
.wv-gap-x-4 { --wv-gap-x: 4rpx; }
.wv-gap-x-8 { --wv-gap-x: 8rpx; }
.wv-gap-x-10 { --wv-gap-x: 10rpx; }
.wv-gap-x-12 { --wv-gap-x: 12rpx; }
.wv-gap-x-16 { --wv-gap-x: 16rpx; }
.wv-gap-x-20 { --wv-gap-x: 20rpx; }
.wv-gap-x-24 { --wv-gap-x: 24rpx; }
.wv-gap-x-32 { --wv-gap-x: 32rpx; }
.wv-gap-x-48 { --wv-gap-x: 48rpx; }
.wv-gap-x-64 { --wv-gap-x: 64rpx; }
.wv-gap-x-80 { --wv-gap-x: 80rpx; }
.wv-gap-x-100 { --wv-gap-x: 100rpx; }

/* 垂直间距 */
.wv-gap-y-0 { --wv-gap-y: 0rpx; }
.wv-gap-y-1 { --wv-gap-y: 1rpx; }
.wv-gap-y-2 { --wv-gap-y: 2rpx; }
.wv-gap-y-4 { --wv-gap-y: 4rpx; }
.wv-gap-y-8 { --wv-gap-y: 8rpx; }
.wv-gap-y-10 { --wv-gap-y: 10rpx; }
.wv-gap-y-12 { --wv-gap-y: 12rpx; }
.wv-gap-y-16 { --wv-gap-y: 16rpx; }
.wv-gap-y-20 { --wv-gap-y: 20rpx; }
.wv-gap-y-24 { --wv-gap-y: 24rpx; }
.wv-gap-y-32 { --wv-gap-y: 32rpx; }
.wv-gap-y-48 { --wv-gap-y: 48rpx; }
.wv-gap-y-64 { --wv-gap-y: 64rpx; }
.wv-gap-y-80 { --wv-gap-y: 80rpx; }
.wv-gap-y-100 { --wv-gap-y: 100rpx; }

/* 语义化间距 - 符合 WeView 命名规范 */
.wv-gap-mini { --wv-gap-x: 4rpx; --wv-gap-y: 4rpx; }
.wv-gap-small { --wv-gap-x: 8rpx; --wv-gap-y: 8rpx; }
.wv-gap, .wv-gap-default { --wv-gap-x: 16rpx; --wv-gap-y: 16rpx; }
.wv-gap-large { --wv-gap-x: 24rpx; --wv-gap-y: 24rpx; }
.wv-gap-huge { --wv-gap-x: 32rpx; --wv-gap-y: 32rpx; }

/* 语义化水平间距 */
.wv-gap-x-mini { --wv-gap-x: 4rpx; }
.wv-gap-x-small { --wv-gap-x: 8rpx; }
.wv-gap-x, .wv-gap-x-default { --wv-gap-x: 16rpx; }
.wv-gap-x-large { --wv-gap-x: 24rpx; }
.wv-gap-x-huge { --wv-gap-x: 32rpx; }

/* 语义化垂直间距 */
.wv-gap-y-mini { --wv-gap-y: 4rpx; }
.wv-gap-y-small { --wv-gap-y: 8rpx; }
.wv-gap-y, .wv-gap-y-default { --wv-gap-y: 16rpx; }
.wv-gap-y-large { --wv-gap-y: 24rpx; }
.wv-gap-y-huge { --wv-gap-y: 32rpx; }

/* 对齐方式 */
.wv-flex.items-start { align-items: flex-start; }
.wv-flex.items-center { align-items: center; }
.wv-flex.items-end { align-items: flex-end; }
.wv-flex.items-stretch { align-items: stretch; }

.wv-flex.justify-start { justify-content: flex-start; }
.wv-flex.justify-center { justify-content: center; }
.wv-flex.justify-end { justify-content: flex-end; }
.wv-flex.justify-between { justify-content: space-between; }
.wv-flex.justify-around { justify-content: space-around; }
.wv-flex.justify-evenly { justify-content: space-evenly; }

/* 子元素伸缩 */
.flex-grow { flex-grow: 1; }
.flex-shrink { flex-shrink: 1; }
.flex-none { flex: none; }
.flex-auto { flex: 1 1 auto; }
.flex-1 { flex: 1; }