/* ========================================
   重置样式 + 12列Grid栅格 + 原子CSS工具集
   合并自：assets/reset.css（原子工具）+ assets/css/reset.css（Grid栅格）
   ======================================== */

/* ---------- 基础重置 ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Arabic', 'Noto Naskh Arabic',
    'Noto Sans KR', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji',
    sans-serif;
  line-height: 1.6;
  color: #1a1a2e;
  background: #f7f8fa;
  -webkit-font-smoothing: antialiased;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

/* ---------- Grid 栅格系统 ---------- */
.g-container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

.g-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

/* 列跨度 */
.g-col-1  { grid-column: span 1; }
.g-col-2  { grid-column: span 2; }
.g-col-3  { grid-column: span 3; }
.g-col-4  { grid-column: span 4; }
.g-col-5  { grid-column: span 5; }
.g-col-6  { grid-column: span 6; }
.g-col-7  { grid-column: span 7; }
.g-col-8  { grid-column: span 8; }
.g-col-9  { grid-column: span 9; }
.g-col-10 { grid-column: span 10; }
.g-col-11 { grid-column: span 11; }
.g-col-12 { grid-column: span 12; }

/* 响应式：平板缩减 */
@media (max-width: 1024px) {
  .g-col-md-1  { grid-column: span 1; }
  .g-col-md-2  { grid-column: span 2; }
  .g-col-md-3  { grid-column: span 3; }
  .g-col-md-4  { grid-column: span 4; }
  .g-col-md-5  { grid-column: span 5; }
  .g-col-md-6  { grid-column: span 6; }
  .g-col-md-7  { grid-column: span 7; }
  .g-col-md-8  { grid-column: span 8; }
  .g-col-md-9  { grid-column: span 9; }
  .g-col-md-10 { grid-column: span 10; }
  .g-col-md-11 { grid-column: span 11; }
  .g-col-md-12 { grid-column: span 12; }
}

/* 响应式：手机 */
@media (max-width: 768px) {
  .g-row {
    gap: 12px;
  }
  .g-col-sm-1  { grid-column: span 1; }
  .g-col-sm-2  { grid-column: span 2; }
  .g-col-sm-3  { grid-column: span 3; }
  .g-col-sm-4  { grid-column: span 4; }
  .g-col-sm-5  { grid-column: span 5; }
  .g-col-sm-6  { grid-column: span 6; }
  .g-col-sm-7  { grid-column: span 7; }
  .g-col-sm-8  { grid-column: span 8; }
  .g-col-sm-9  { grid-column: span 9; }
  .g-col-sm-10 { grid-column: span 10; }
  .g-col-sm-11 { grid-column: span 11; }
  .g-col-sm-12 { grid-column: span 12; }
}

/* ---------- Grid 特化布局：自动填充网格 ---------- */
.g-auto {
  display: grid;
  gap: 16px;
}
.g-auto-5 {
  grid-template-columns: repeat(5, 1fr);
}
.g-auto-4 {
  grid-template-columns: repeat(4, 1fr);
}
.g-auto-3 {
  grid-template-columns: repeat(3, 1fr);
}
.g-auto-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* ========================================
   以下来自 assets/reset.css — 原子CSS工具集
   ======================================== */

/* ---------- 公共间距变量 ---------- */
:root {
    --space-05: 0.5rem;
    --space-10: 1.0rem;
    --space-15: 1.5rem;
    --space-20: 2.0rem;
    --space-25: 2.5rem;
    --space-30: 3.0rem;
}

/* ---------- 间距工具类 ---------- */
/* 所有方向外边距 */
.m-05 { margin: var(--space-05); }
.m-10 { margin: var(--space-10); }
.m-15 { margin: var(--space-15); }
.m-20 { margin: var(--space-20); }
.m-25 { margin: var(--space-25); }
.m-30 { margin: var(--space-30); }
/* 上方向外边距 */
.mt-05 { margin-top: var(--space-05); }
.mt-10 { margin-top: var(--space-10); }
.mt-15 { margin-top: var(--space-15); }
.mt-20 { margin-top: var(--space-20); }
.mt-25 { margin-top: var(--space-25); }
.mt-30 { margin-top: var(--space-30); }
/* 右方向外边距 */
.mr-05 { margin-right: var(--space-05); }
.mr-10 { margin-right: var(--space-10); }
.mr-15 { margin-right: var(--space-15); }
.mr-20 { margin-right: var(--space-20); }
.mr-25 { margin-right: var(--space-25); }
.mr-30 { margin-right: var(--space-30); }
/* 下方向外边距 */
.mb-05 { margin-bottom: var(--space-05); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-15 { margin-bottom: var(--space-15); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-25 { margin-bottom: var(--space-25); }
.mb-30 { margin-bottom: var(--space-30); }
/* 左方向外边距 */
.ml-05 { margin-left: var(--space-05); }
.ml-10 { margin-left: var(--space-10); }
.ml-15 { margin-left: var(--space-15); }
.ml-20 { margin-left: var(--space-20); }
.ml-25 { margin-left: var(--space-25); }
.ml-30 { margin-left: var(--space-30); }
/* 水平方向外边距 */
.mx-05 { margin-left: var(--space-05); margin-right: var(--space-05); }
.mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); }
.mx-15 { margin-left: var(--space-15); margin-right: var(--space-15); }
.mx-20 { margin-left: var(--space-20); margin-right: var(--space-20); }
.mx-25 { margin-left: var(--space-25); margin-right: var(--space-25); }
.mx-30 { margin-left: var(--space-30); margin-right: var(--space-30); }
/* 垂直方向外边距 */
.my-05 { margin-top: var(--space-05); margin-bottom: var(--space-05); }
.my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }
.my-15 { margin-top: var(--space-15); margin-bottom: var(--space-15); }
.my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); }
.my-25 { margin-top: var(--space-25); margin-bottom: var(--space-25); }
.my-30 { margin-top: var(--space-30); margin-bottom: var(--space-30); }
/* 所有方向内边距 */
.p-05 { padding: var(--space-05); }
.p-10 { padding: var(--space-10); }
.p-15 { padding: var(--space-15); }
.p-20 { padding: var(--space-20); }
.p-25 { padding: var(--space-25); }
.p-30 { padding: var(--space-30); }
/* 上方向内边距 */
.pt-05 { padding-top: var(--space-05); }
.pt-10 { padding-top: var(--space-10); }
.pt-15 { padding-top: var(--space-15); }
.pt-20 { padding-top: var(--space-20); }
.pt-25 { padding-top: var(--space-25); }
.pt-30 { padding-top: var(--space-30); }
/* 右方向内边距 */
.pr-05 { padding-right: var(--space-05); }
.pr-10 { padding-right: var(--space-10); }
.pr-15 { padding-right: var(--space-15); }
.pr-20 { padding-right: var(--space-20); }
.pr-25 { padding-right: var(--space-25); }
.pr-30 { padding-right: var(--space-30); }
/* 下方向内边距 */
.pb-05 { padding-bottom: var(--space-05); }
.pb-10 { padding-bottom: var(--space-10); }
.pb-15 { padding-bottom: var(--space-15); }
.pb-20 { padding-bottom: var(--space-20); }
.pb-25 { padding-bottom: var(--space-25); }
.pb-30 { padding-bottom: var(--space-30); }
/* 左方向内边距 */
.pl-05 { padding-left: var(--space-05); }
.pl-10 { padding-left: var(--space-10); }
.pl-15 { padding-left: var(--space-15); }
.pl-20 { padding-left: var(--space-20); }
.pl-25 { padding-left: var(--space-25); }
.pl-30 { padding-left: var(--space-30); }
/* 水平方向内边距 */
.px-05 { padding-left: var(--space-05); padding-right: var(--space-05); }
.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
.px-15 { padding-left: var(--space-15); padding-right: var(--space-15); }
.px-20 { padding-left: var(--space-20); padding-right: var(--space-20); }
.px-25 { padding-left: var(--space-25); padding-right: var(--space-25); }
.px-30 { padding-left: var(--space-30); padding-right: var(--space-30); }
/* 垂直方向内边距 */
.py-05 { padding-top: var(--space-05); padding-bottom: var(--space-05); }
.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.py-15 { padding-top: var(--space-15); padding-bottom: var(--space-15); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.py-25 { padding-top: var(--space-25); padding-bottom: var(--space-25); }
.py-30 { padding-top: var(--space-30); padding-bottom: var(--space-30); }
/* 清除内外边距 */
.m-0{ margin: 0; }
.p-0{ padding: 0; }

/* ---------- 定位 ---------- */
.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
/* 定位偏移 */
.top-0 { top: 0; }
.top-50 { top: 50%; }
.top-100 { top: 100%; }
.bottom-0 { bottom: 0; }
.bottom-50 { bottom: 50%; }
.bottom-100 { bottom: 100%; }
.left-0 { left: 0; }
.left-50 { left: 50%; }
.left-100 { left: 100%; }
.right-0 { right: 0; }
.right-50 { right: 50%; }
.right-100 { right: 100%; }
/* 完全填充 */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
/* 偏移居中 */
.translate-middle { transform: translate(-50%, -50%); }
.translate-middle-x { transform: translateX(-50%); }
.translate-middle-y { transform: translateY(-50%); }
/* 浮动 */
.float-left { float: left; }
.float-right { float: right; }
.float-none { float: none; }
/* 清除浮动 */
.float-clear-left { clear: left; }
.float-clear-right { clear: right; }
.float-clear-both { clear: both; }
/* 层叠顺序 */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-100 { z-index: 100; }
.z-1000 { z-index: 1000; }

/* ---------- 文本对齐 ---------- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* ---------- Flex 工具 ---------- */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-stretch { align-content: stretch; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-first { order: -1; }
.order-last { order: 9999; }
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }
.flex-basis-auto { flex-basis: auto; }
.flex-basis-0 { flex-basis: 0; }
.flex-basis-full { flex-basis: 100%; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch { align-self: stretch; }

/* ---------- 宽度容器 ---------- */
.w1600{ width: 1600px; margin: auto; }
.w1400{ width: 1400px; margin: auto; }
.w1200{ width: 1200px; margin: auto; }
.w-full{ width: 100%; }
.w-half{ width: 50%; }
.w-auto{ width: auto; }

/* ---------- 间隙工具 ---------- */
:root{ --gap:1.0rem; }
.gap-0 { --gap:0rem; gap:var(--gap); }
.gap-05{ --gap:0.5rem; gap:var(--gap); }
.gap-10{ --gap:1.0rem; gap:var(--gap); }
.gap-15{ --gap:1.5rem; gap:var(--gap); }
.gap-20{ --gap:2.0rem; gap:var(--gap); }
.gap-25{ --gap:2.5rem; gap:var(--gap); }
.gap-30{ --gap:3.0rem; gap:var(--gap); }

/* ---------- Flex 栅格（与 .g-row 并存，互不冲突） ---------- */
.row {
  display: flex;
  flex-flow: row wrap;
  gap: var(--gap);
}
/* 12 列 */
.col-1{  flex:1 1  calc(100% / 12 - var(--gap));     }
.col-2{  flex:2 1  calc(100% / 12 * 2 - var(--gap)); }
.col-3{  flex:3 1  calc(100% / 12 * 3 - var(--gap)); }
.col-4{  flex:4 1  calc(100% / 12 * 4 - var(--gap)); }
.col-5{  flex:5 1  calc(100% / 12 * 5 - var(--gap)); }
.col-6{  flex:6 1  calc(100% / 12 * 6 - var(--gap)); }
.col-7{  flex:7 1  calc(100% / 12 * 7 - var(--gap)); }
.col-8{  flex:8 1  calc(100% / 12 * 8 - var(--gap)); }
.col-9{  flex:9 1  calc(100% / 12 * 9 - var(--gap)); }
.col-10{ flex:10 1 calc(100% / 12 * 10 - var(--gap));}
.col-11{ flex:11 1 calc(100% / 12 * 11 - var(--gap));}
.col-12{ flex:12 1 100%; }
/* 5 列 */
.col-1-5{ flex:1 1 calc(100% / 5 - var(--gap));     }
.col-2-5{ flex:2 1 calc(100% / 5 * 2 - var(--gap)); }
.col-3-5{ flex:3 1 calc(100% / 5 * 3 - var(--gap)); }
.col-4-5{ flex:4 1 calc(100% / 5 * 4 - var(--gap)); }
/* 自适应列 */
.col-auto { flex: 1 1 auto; }