/* ==========================================================================
   1. 基础重置 + 排版 + 工具类
   （原型使用的 Tailwind CDN 已彻底移除，用到的少量工具类在本文件中固化）
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* 锚点滚动时为固定导航栏预留空间 */
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
               "Hiragino Sans GB", "Source Han Sans SC", system-ui, -apple-system,
               "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 自定义滚动条（桌面端） */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--c-bg-soft-2); }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--c-blue), var(--c-purple));
    border-radius: 999px;
    border: 2px solid var(--c-bg-soft-2);
  }
}

/* 无障碍：仅屏幕阅读器可见 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 跳到主内容 */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--c-blue); color: #fff; padding: 10px 18px;
  border-radius: var(--r-sm); transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------------------
   1.1 富文本正文（bodyHtml 字段渲染容器）
   -------------------------------------------------------------------------- */
.rich-text { font-size: 16.5px; line-height: 1.95; color: var(--c-text-2); }
.rich-text > * + * { margin-top: 16px; }
.rich-text h2 { font-size: 24px; font-weight: 800; color: var(--c-ink); line-height: 1.4; }
.rich-text h3 { font-size: 19px; font-weight: 700; color: var(--c-ink); line-height: 1.5; }
.rich-text h4 { font-size: 17px; font-weight: 700; color: var(--c-ink); }
.rich-text p  { margin: 0; }
.rich-text strong { color: var(--c-ink); font-weight: 700; }
.rich-text a { color: var(--c-blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.rich-text a:hover { color: var(--c-purple-deep); }
.rich-text ul, .rich-text ol { padding-left: 22px; }
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text li { margin-top: 8px; }
.rich-text img { border-radius: var(--r-md); margin: 8px 0; }
.rich-text blockquote {
  border-left: 3px solid var(--c-blue);
  padding: 6px 0 6px 18px;
  color: var(--c-text-3);
  background: var(--c-bg-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.rich-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; padding: 2px 6px; border-radius: 5px;
  background: var(--c-bg-soft-2); color: var(--c-purple-deep);
}
.section--dark .rich-text { color: var(--c-text-invert-2); }
.section--dark .rich-text h2,
.section--dark .rich-text h3,
.section--dark .rich-text h4,
.section--dark .rich-text strong { color: var(--c-text-invert); }

/* --------------------------------------------------------------------------
   1.2 工具类（等价替换原型中使用的 Tailwind 类）
   -------------------------------------------------------------------------- */

/* 显示与盒模型 */
.u-hidden       { display: none !important; }
.u-block        { display: block; }
.u-inline-block { display: inline-block; }
.u-flex         { display: flex; }
.u-inline-flex  { display: inline-flex; }
.u-grid         { display: grid; }

/* 弹性布局 */
.u-items-start   { align-items: flex-start; }
.u-items-center  { align-items: center; }
.u-items-end     { align-items: flex-end; }
.u-justify-start   { justify-content: flex-start; }
.u-justify-center  { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-end     { justify-content: flex-end; }
.u-flex-col      { flex-direction: column; }
.u-flex-wrap     { flex-wrap: wrap; }
.u-flex-1        { flex: 1 1 0%; }
.u-shrink-0      { flex-shrink: 0; }

/* 间距（4px 栅格） */
.u-gap-4  { gap: 4px; }
.u-gap-8  { gap: 8px; }
.u-gap-12 { gap: 12px; }
.u-gap-16 { gap: 16px; }
.u-gap-20 { gap: 20px; }
.u-gap-24 { gap: 24px; }
.u-gap-32 { gap: 32px; }

.u-mt-0  { margin-top: 0; }
.u-mt-4  { margin-top: 4px; }
.u-mt-8  { margin-top: 8px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-32 { margin-top: 32px; }
.u-mt-48 { margin-top: 48px; }
.u-mb-0  { margin-bottom: 0; }
.u-mb-8  { margin-bottom: 8px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-24 { margin-bottom: 24px; }
.u-mb-32 { margin-bottom: 32px; }
.u-mx-auto { margin-left: auto; margin-right: auto; }

/* 文本 */
.u-text-left   { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }
.u-text-sm  { font-size: 13px; }
.u-text-base{ font-size: 15px; }
.u-text-lg  { font-size: 18px; }
.u-text-xl  { font-size: 22px; }
.u-font-semibold { font-weight: 600; }
.u-font-bold     { font-weight: 700; }
.u-font-extrabold{ font-weight: 800; }
.u-leading-relaxed { line-height: 1.85; }
.u-truncate {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.u-clamp-2, .u-clamp-3 {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.u-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.u-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* 颜色 */
.u-text-muted   { color: var(--c-text-2); }
.u-text-subtle  { color: var(--c-text-3); }
.u-text-invert  { color: var(--c-text-invert); }
.u-text-accent  { color: var(--accent-deep, var(--c-blue-deep)); }

/* 渐变文字（原型 .text-grad 的通用别名） */
.u-text-gradient {
  background: var(--g-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 尺寸与定位 */
.u-w-full   { width: 100%; }
.u-h-full   { height: 100%; }
.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-sticky   { position: sticky; top: calc(var(--nav-h) + 24px); }
.u-z-1      { z-index: 1; }

/* 圆角 / 阴影 / 边框 */
.u-rounded-sm { border-radius: var(--r-sm); }
.u-rounded-md { border-radius: var(--r-md); }
.u-rounded-lg { border-radius: var(--r-lg); }
.u-rounded-full { border-radius: 999px; }
.u-shadow-sm { box-shadow: var(--sh-sm); }
.u-shadow-md { box-shadow: var(--sh-md); }
.u-shadow-lg { box-shadow: var(--sh-lg); }
.u-border    { border: 1px solid var(--c-border); }
.u-bg-soft   { background: var(--c-bg-soft); }
.u-bg-soft-2 { background: var(--c-bg-soft-2); }
.u-overflow-hidden { overflow: hidden; }

/* 响应式辅助（与 layout.css 断点一致） */
@media (max-width: 1024px) {
  .u-hide-mobile { display: none !important; }
}
@media (min-width: 1025px) {
  .u-hide-desktop { display: none !important; }
}