/* =========================
   Base.css
   1920px 设计稿 → vw 响应式
   ========================= */

/* 1. 全局变量（1920 → vw） */
:root {
  --design-width: 1920;
  --vw-base: 19.2; /* 1920 / 100 */

  /* 常用颜色（可按项目替换） */
  --color-text: #333;
  --color-bg: #fff;
  --color-primary: #1677ff;

  /* 字体安全范围 */
  --font-min: 16px;
  --font-max: 24px;
}

/* 2. HTML / BODY 基础 */
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
}

body {
  min-width: 1200px; /* PC 最小宽度保护 */
  line-height: 1.5;
}

/* 3. vw 换算工具（纯 CSS） */
/* 用法：calc(设计稿px / var(--vw-base) * 1vw) */

.vw-12 {
  font-size: calc(12 / var(--vw-base) * 1vw);
}
.vw-14 {
  font-size: calc(14 / var(--vw-base) * 1vw);
}
.vw-16 {
  font-size: calc(16 / var(--vw-base) * 1vw);
}
.vw-18 {
  font-size: calc(18 / var(--vw-base) * 1vw);
}
.vw-20 {
  font-size: calc(20 / var(--vw-base) * 1vw);
}
.vw-24 {
  font-size: calc(24 / var(--vw-base) * 1vw);
}
.vw-28 {
  font-size: calc(28 / var(--vw-base) * 1vw);
}
.vw-32 {
  font-size: calc(32 / var(--vw-base) * 1vw);
}

/* 4. 通用容器 */
.container {
  max-width: 1920px;
  margin: 0 auto;
  padding-left: calc(40 / var(--vw-base) * 1vw);
  padding-right: calc(40 / var(--vw-base) * 1vw);
}

/* 5. 常用标题规范 */
.h1 {
  font-size: clamp(24px, calc(48 / var(--vw-base) * 1vw), 48px);
  line-height: 1.2;
  font-weight: 600;
}

.h2 {
  font-size: clamp(20px, calc(36 / var(--vw-base) * 1vw), 36px);
  line-height: 1.3;
  font-weight: 500;
}

.h3 {
  font-size: clamp(18px, calc(28 / var(--vw-base) * 1vw), 28px);
  line-height: 1.4;
  font-weight: 500;
}

/* 6. 正文文本 */
.text {
  font-size: clamp(
    var(--font-min),
    calc(16 / var(--vw-base) * 1vw),
    var(--font-max)
  );
  line-height: 1.6;
}

/* 7. 布局辅助类 */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

/* 8. 间距工具类（可按需增减） */
.mt-16 {
  margin-top: calc(16 / var(--vw-base) * 1vw);
}
.mt-24 {
  margin-top: calc(24 / var(--vw-base) * 1vw);
}
.mt-40 {
  margin-top: calc(40 / var(--vw-base) * 1vw);
}

.mb-16 {
  margin-bottom: calc(16 / var(--vw-base) * 1vw);
}
.mb-24 {
  margin-bottom: calc(24 / var(--vw-base) * 1vw);
}
.mb-40 {
  margin-bottom: calc(40 / var(--vw-base) * 1vw);
}

/* 9. 按钮基础 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(12 / var(--vw-base) * 1vw) calc(24 / var(--vw-base) * 1vw);
  font-size: clamp(14px, calc(16 / var(--vw-base) * 1vw), 16px);
  border-radius: calc(4 / var(--vw-base) * 1vw);
  background-color: var(--color-primary);
  color: #fff;
  white-space: nowrap;
}

/* 10. 响应式断点（移动端） */
@media (max-width: 768px) {
  body {
    min-width: 100%;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 多列 → 单列 */
  .flex {
    flex-direction: column;
  }
}