/* ==========================================================================
   components.css —— 通用自定义 CSS 组件库（全系统复用）
   依赖：variables.css（必须先引入）
   包含：Reset / 布局栅格 / 按钮 / 表单 / 卡片 / 标签 / 表格 / 弹窗 /
         Toast / 标签页 / 折叠面板 / 步骤条 / 进度条 / 骨架屏 / 分页 / 工具类
   二次修改：所有组件均为 .ui-* 前缀，不污染业务类名
   ========================================================================== */

/* ========== 1. Reset & 基础 ========== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
table { border-collapse: collapse; width: 100%; }

/* 自定义滚动条（PC 端优化） */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--c-bg-mute); }
::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--c-text-muted); }

/* ========== 2. 布局容器 & 栅格 ========== */
.ui-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}
.ui-container--narrow { max-width: 900px; }
.ui-container--wide   { max-width: 1440px; }

/* Flex 布局工具 */
.ui-flex        { display: flex; }
.ui-flex-col    { display: flex; flex-direction: column; }
.ui-flex-center { display: flex; align-items: center; justify-content: center; }
.ui-flex-between{ display: flex; align-items: center; justify-content: space-between; }
.ui-flex-start  { display: flex; align-items: center; }
.ui-flex-wrap   { flex-wrap: wrap; }
.ui-flex-1      { flex: 1; min-width: 0; }
.ui-gap-1 { gap: var(--sp-1); } .ui-gap-2 { gap: var(--sp-2); }
.ui-gap-3 { gap: var(--sp-3); } .ui-gap-4 { gap: var(--sp-4); }
.ui-gap-5 { gap: var(--sp-5); } .ui-gap-6 { gap: var(--sp-6); }
.ui-gap-8 { gap: var(--sp-8); }

/* 响应式网格：自动列数 */
.ui-grid { display: grid; gap: var(--sp-5); }
.ui-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ui-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ui-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ui-grid-5 { grid-template-columns: repeat(5, 1fr); }
/* 自适应网格：卡片最小宽度自动折行，移动端天然适配 */
.ui-grid-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ui-grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* ========== 3. 按钮 ========== */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-5);
  height: 40px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  border-radius: var(--r-base);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: all var(--t-base);
  user-select: none;
}
.ui-btn:active { transform: translateY(1px); }
.ui-btn[disabled], .ui-btn.is-disabled {
  opacity: .55; cursor: not-allowed; pointer-events: none;
}

/* 主按钮 */
.ui-btn--primary {
  background: var(--c-primary); color: var(--c-text-invert);
  box-shadow: var(--sh-primary);
}
.ui-btn--primary:hover { background: var(--c-primary-dark); }

/* 转化按钮（报名/提交，橙色更抓眼） */
.ui-btn--accent {
  background: linear-gradient(135deg, var(--c-accent-soft), var(--c-accent));
  color: var(--c-text-invert);
  box-shadow: var(--sh-accent);
}
.ui-btn--accent:hover { filter: brightness(1.05); }

/* 次要按钮 */
.ui-btn--default {
  background: var(--c-bg); color: var(--c-text);
  border-color: var(--c-border-strong);
}
.ui-btn--default:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* 线框按钮 */
.ui-btn--outline {
  background: transparent; color: var(--c-primary);
  border-color: var(--c-primary);
}
.ui-btn--outline:hover { background: var(--c-primary); color: var(--c-text-invert); }

/* 幽灵按钮 */
.ui-btn--ghost { background: transparent; color: var(--c-text-sub); }
.ui-btn--ghost:hover { background: var(--c-bg-mute); color: var(--c-text); }

/* 危险按钮 */
.ui-btn--danger { background: var(--c-danger); color: var(--c-text-invert); }
.ui-btn--danger:hover { filter: brightness(1.08); }

/* 成功按钮 */
.ui-btn--success { background: var(--c-success); color: var(--c-text-invert); }

/* 尺寸 */
.ui-btn--sm  { height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.ui-btn--lg  { height: 48px; padding: 0 var(--sp-8); font-size: var(--fs-md); border-radius: var(--r-md); }
.ui-btn--xl  { height: 56px; padding: 0 var(--sp-10); font-size: var(--fs-lg); border-radius: var(--r-md); font-weight: var(--fw-bold); }
.ui-btn--block { display: flex; width: 100%; }
.ui-btn--round { border-radius: var(--r-full); }
.ui-btn--icon  { width: 40px; padding: 0; }
.ui-btn--icon.ui-btn--sm { width: 32px; }

/* 按钮呼吸动效（用于核心转化按钮） */
.ui-btn--pulse { animation: uiPulse 2s infinite; }
@keyframes uiPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(249,115,22,.34); }
  50%      { box-shadow: 0 6px 28px rgba(249,115,22,.62); }
}

/* ========== 4. 表单 ========== */
.ui-field { margin-bottom: var(--sp-5); }
.ui-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}
.ui-label--required::before {
  content: "*"; color: var(--c-danger); margin-right: 4px;
}

.ui-input, .ui-select, .ui-textarea {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-base);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.ui-textarea { height: auto; min-height: 100px; padding: var(--sp-3) var(--sp-4); resize: vertical; line-height: var(--lh-base); }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--c-text-muted); }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-ghost);
}
.ui-input.is-error, .ui-select.is-error {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}
.ui-input[readonly], .ui-input[disabled] { background: var(--c-bg-mute); cursor: not-allowed; }

/* select 下拉箭头 */
.ui-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-10);
}

/* 带图标输入框 */
.ui-input-icon { position: relative; }
.ui-input-icon > i {
  position: absolute; left: var(--sp-4); top: 50%;
  transform: translateY(-50%); color: var(--c-text-muted); font-size: var(--fs-md);
  pointer-events: none;
}
.ui-input-icon .ui-input { padding-left: 42px; }

/* 错误提示文字 */
.ui-error-tip {
  display: none;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-danger);
}
.ui-error-tip.is-show { display: block; }

/* 单选 / 复选（自定义样式） */
.ui-radio, .ui-checkbox {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  cursor: pointer; user-select: none; font-size: var(--fs-base);
}
.ui-radio input, .ui-checkbox input { display: none; }
.ui-radio i, .ui-checkbox i {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1.5px solid var(--c-border-strong);
  background: var(--c-bg);
  transition: all var(--t-fast);
  position: relative;
}
.ui-radio i { border-radius: 50%; }
.ui-checkbox i { border-radius: var(--r-sm); }
.ui-radio input:checked + i { border-color: var(--c-primary); border-width: 5px; }
.ui-checkbox input:checked + i { background: var(--c-primary); border-color: var(--c-primary); }
.ui-checkbox input:checked + i::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 4px; height: 9px;
  border: solid var(--c-bg); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 卡片式选择器（落地页选学历层次等场景） */
.ui-chip-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ui-chip {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-base);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-full);
  background: var(--c-bg);
  color: var(--c-text-sub);
  cursor: pointer;
  transition: all var(--t-fast);
}
.ui-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.ui-chip.is-active {
  background: var(--c-primary); border-color: var(--c-primary);
  color: var(--c-text-invert); font-weight: var(--fw-medium);
}

/* ========== 5. 卡片 ========== */
.ui-card {
  background: var(--c-bg);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.ui-card--hover:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.ui-card--bordered { box-shadow: none; border: 1px solid var(--c-border); }
.ui-card__header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  display: flex; align-items: center; justify-content: space-between;
}
.ui-card__body   { padding: var(--sp-5); }
.ui-card__footer { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--c-border); background: var(--c-bg-soft); }

/* ========== 6. 标签 Tag / 徽标 Badge ========== */
.ui-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--sp-2);
  font-size: var(--fs-xs);
  border-radius: var(--r-sm);
  background: var(--c-bg-mute);
  color: var(--c-text-sub);
  white-space: nowrap;
}
.ui-tag--primary { background: var(--c-primary-light); color: var(--c-primary-dark); }
.ui-tag--success { background: var(--c-success-light); color: var(--c-success); }
.ui-tag--warning { background: var(--c-warning-light); color: var(--c-warning-text); }
.ui-tag--danger  { background: var(--c-danger-light);  color: var(--c-danger); }
.ui-tag--info    { background: var(--c-info-light);    color: var(--c-info); }
.ui-tag--accent  { background: var(--c-accent-light);  color: var(--c-accent-dark); }
.ui-tag--round   { border-radius: var(--r-full); padding: 2px var(--sp-3); }

.ui-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 11px; font-weight: var(--fw-bold);
  color: var(--c-bg); background: var(--c-danger);
  border-radius: var(--r-full);
}

/* ========== 7. 表格 ========== */
.ui-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ui-table { font-size: var(--fs-base); background: var(--c-bg); }
.ui-table th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-weight: var(--fw-medium);
  color: var(--c-text-sub);
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.ui-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
}
.ui-table tbody tr:hover { background: var(--c-bg-soft); }
.ui-table--striped tbody tr:nth-child(even) { background: var(--c-bg-soft); }
.ui-table__empty { padding: var(--sp-12) 0; text-align: center; color: var(--c-text-muted); }

/* ========== 8. 弹窗 Modal ========== */
.ui-mask {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  z-index: var(--z-mask);
  opacity: 0; visibility: hidden;
  transition: all var(--t-base);
}
.ui-mask.is-open { opacity: 1; visibility: visible; }

.ui-modal {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -46%);
  width: calc(100% - 32px);
  max-width: 480px;
  max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--c-bg);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  z-index: var(--z-modal);
  opacity: 0; visibility: hidden;
  transition: all var(--t-base);
}
.ui-modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.ui-modal--lg { max-width: 720px; }
.ui-modal--xl { max-width: 960px; }
.ui-modal__header {
  padding: var(--sp-5);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--c-border);
}
.ui-modal__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.ui-modal__close {
  width: 32px; height: 32px; border-radius: var(--r-base);
  color: var(--c-text-muted); font-size: var(--fs-md);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
}
.ui-modal__close:hover { background: var(--c-bg-mute); color: var(--c-text); }
.ui-modal__body { padding: var(--sp-5); overflow-y: auto; flex: 1; }
.ui-modal__footer {
  padding: var(--sp-4) var(--sp-5);
  display: flex; justify-content: flex-end; gap: var(--sp-3);
  border-top: 1px solid var(--c-border);
}

/* ========== 9. Toast 轻提示 ========== */
.ui-toast-box {
  position: fixed; top: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--sp-2);
  pointer-events: none;
}
.ui-toast {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: rgba(15, 23, 42, .92);
  color: var(--c-bg);
  font-size: var(--fs-base);
  border-radius: var(--r-base);
  box-shadow: var(--sh-md);
  animation: uiToastIn var(--t-base);
  max-width: 90vw;
}
.ui-toast--success i { color: var(--c-success-soft); }
.ui-toast--error   i { color: var(--c-danger-soft); }
.ui-toast--warning i { color: var(--c-warning-soft); }
.ui-toast.is-out { animation: uiToastOut var(--t-base) forwards; }
@keyframes uiToastIn  { from { opacity: 0; transform: translateY(-16px); } }
@keyframes uiToastOut { to   { opacity: 0; transform: translateY(-16px); } }

/* ========== 10. 标签页 Tabs ========== */
.ui-tabs {
  display: flex; gap: var(--sp-6);
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab {
  position: relative;
  padding: var(--sp-3) 0;
  font-size: var(--fs-md);
  color: var(--c-text-sub);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.ui-tab:hover { color: var(--c-primary); }
.ui-tab.is-active { color: var(--c-primary); font-weight: var(--fw-bold); }
.ui-tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--c-primary); border-radius: var(--r-full);
}

/* ========== 11. 折叠面板 Accordion（FAQ 用） ========== */
.ui-accordion { border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; background: var(--c-bg); }
.ui-accordion__item + .ui-accordion__item { border-top: 1px solid var(--c-border); }
.ui-accordion__head {
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  font-size: var(--fs-md); font-weight: var(--fw-medium); text-align: left;
  transition: background var(--t-fast);
}
.ui-accordion__head:hover { background: var(--c-bg-soft); }
.ui-accordion__head i { color: var(--c-text-muted); transition: transform var(--t-base); flex-shrink: 0; }
.ui-accordion__item.is-open .ui-accordion__head { color: var(--c-primary); }
.ui-accordion__item.is-open .ui-accordion__head i { transform: rotate(180deg); color: var(--c-primary); }
.ui-accordion__body {
  max-height: 0; overflow: hidden;
  transition: max-height var(--t-slow), padding var(--t-slow);
  padding: 0 var(--sp-5);
  color: var(--c-text-sub); line-height: var(--lh-loose);
}
.ui-accordion__item.is-open .ui-accordion__body { max-height: 600px; padding: 0 var(--sp-5) var(--sp-4); }

/* ========== 12. 步骤条 Steps ========== */
.ui-steps { display: flex; gap: var(--sp-2); }
.ui-step { flex: 1; text-align: center; position: relative; }
.ui-step__num {
  width: 40px; height: 40px; margin: 0 auto var(--sp-2);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-bg-mute); color: var(--c-text-muted);
  font-weight: var(--fw-bold); font-size: var(--fs-md);
  position: relative; z-index: 2;
  transition: all var(--t-base);
}
.ui-step.is-active .ui-step__num,
.ui-step.is-done   .ui-step__num { background: var(--c-primary); color: var(--c-bg); }
.ui-step__label { font-size: var(--fs-sm); color: var(--c-text-sub); }
.ui-step.is-active .ui-step__label { color: var(--c-primary); font-weight: var(--fw-medium); }
/* 连接线 */
.ui-step:not(:last-child)::after {
  content: ""; position: absolute; top: 20px; left: 50%; width: 100%;
  height: 2px; background: var(--c-border); z-index: 1;
}
.ui-step.is-done:not(:last-child)::after { background: var(--c-primary); }

/* ========== 13. 进度条 ========== */
.ui-progress { height: 8px; background: var(--c-bg-mute); border-radius: var(--r-full); overflow: hidden; }
.ui-progress__bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--c-primary), var(--c-primary-soft));
  border-radius: var(--r-full);
  transition: width var(--t-slow);
}
.ui-progress--accent .ui-progress__bar { background: linear-gradient(90deg, var(--c-accent), var(--c-warning-soft)); }
.ui-progress--sm { height: 5px; }

/* ========== 14. 骨架屏 ========== */
.ui-skeleton {
  background: linear-gradient(90deg, var(--c-bg-mute) 25%, var(--c-skeleton) 37%, var(--c-bg-mute) 63%);
  background-size: 400% 100%;
  animation: uiSkeleton 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes uiSkeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ========== 15. 分页 ========== */
.ui-pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; }
.ui-pager__btn {
  min-width: 34px; height: 34px; padding: 0 var(--sp-2);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-base);
  background: var(--c-bg); font-size: var(--fs-base);
  transition: all var(--t-fast);
}
.ui-pager__btn:hover:not([disabled]) { border-color: var(--c-primary); color: var(--c-primary); }
.ui-pager__btn.is-active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-bg); }
.ui-pager__btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ========== 16. 空状态 ========== */
.ui-empty { padding: var(--sp-16) var(--sp-4); text-align: center; color: var(--c-text-muted); }
.ui-empty i { font-size: 48px; margin-bottom: var(--sp-4); opacity: .4; display: block; }

/* ========== 17. 分割线 ========== */
.ui-divider { height: 1px; background: var(--c-border); margin: var(--sp-6) 0; border: 0; }
.ui-divider--text {
  display: flex; align-items: center; gap: var(--sp-4);
  color: var(--c-text-muted); font-size: var(--fs-sm);
  background: none; height: auto;
}
.ui-divider--text::before, .ui-divider--text::after {
  content: ""; flex: 1; height: 1px; background: var(--c-border);
}

/* ========== 18. 通用工具类 ========== */
.u-hide { display: none !important; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }
.u-text-primary{ color: var(--c-primary); }
.u-text-accent { color: var(--c-accent); }
.u-text-sub    { color: var(--c-text-sub); }
.u-text-muted  { color: var(--c-text-muted); }
.u-text-danger { color: var(--c-danger); }
.u-text-success{ color: var(--c-success); }
.u-bold   { font-weight: var(--fw-bold); }
.u-num    { font-family: var(--font-num); }
.u-ellipsis {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.u-ellipsis-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.u-mt-2 { margin-top: var(--sp-2); }  .u-mt-4 { margin-top: var(--sp-4); }
.u-mt-6 { margin-top: var(--sp-6); }  .u-mt-8 { margin-top: var(--sp-8); }
.u-mb-2 { margin-bottom: var(--sp-2); } .u-mb-4 { margin-bottom: var(--sp-4); }
.u-mb-6 { margin-bottom: var(--sp-6); } .u-mb-8 { margin-bottom: var(--sp-8); }
.u-no-scroll { overflow: hidden; }

/* ========== 19. 滚动入场动画（IntersectionObserver 配合使用） ========== */
.u-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.4,0,.2,1);
}
.u-reveal.is-in { opacity: 1; transform: none; }
.u-reveal-d1 { transition-delay: .08s; }
.u-reveal-d2 { transition-delay: .16s; }
.u-reveal-d3 { transition-delay: .24s; }
.u-reveal-d4 { transition-delay: .32s; }

/* ========== 20. 响应式断点 ========== */
/* 平板 */
@media (max-width: 1024px) {
  .ui-grid-4, .ui-grid-5 { grid-template-columns: repeat(3, 1fr); }
  :root { --fs-4xl: 38px; --fs-3xl: 30px; --fs-2xl: 24px; }
}
/* 手机 */
@media (max-width: 768px) {
  .ui-container { padding: 0 var(--sp-4); }
  .ui-grid-2, .ui-grid-3, .ui-grid-4, .ui-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .ui-grid { gap: var(--sp-3); }
  :root {
    --fs-4xl: 28px; --fs-3xl: 24px; --fs-2xl: 20px; --fs-xl: 18px;
    --sp-20: 48px; --sp-16: 40px; --sp-12: 32px;
  }
  .ui-modal { max-width: 100%; width: calc(100% - 24px); }
  .ui-modal__body { padding: var(--sp-4); }
  .u-hide-mobile { display: none !important; }
  .ui-btn--xl { height: 50px; font-size: var(--fs-md); }
  .ui-steps { gap: 0; }
  .ui-step__num { width: 34px; height: 34px; font-size: var(--fs-base); }
  .ui-step:not(:last-child)::after { top: 17px; }
  .ui-step__label { font-size: var(--fs-xs); }
}
@media (max-width: 480px) {
  .ui-grid-3, .ui-grid-4, .ui-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .ui-grid-auto { grid-template-columns: 1fr; }
}
/* PC 端隐藏 */
@media (min-width: 769px) {
  .u-hide-pc { display: none !important; }
}