/*
 * 官网事实源内容页的通用版式。
 *
 * 依据 softexam-prototype 的 DESIGN.md「官网版式」一节：
 *   内容宽度   居中 1180，两侧留白，不做整幅铺满
 *   标题区     #f4f7fc → #f8fafd 浅底通栏，放面包屑、标题、导语与「更新时间 · 信息来源」，
 *              与白色正文形成图底关系，避免整页纯白
 *   正文       正文列 + 282 宽右侧栏，右侧栏吸顶，放本页目录与唯一行动入口
 *   分节标题   序号方块（#f0f7ff 底、主色数字）在标题左侧，不是区域左侧的强调色条
 *   清单表格   整块一张卡片，内部细线分隔、双行浅填充，不是每行一个独立方框
 *   页脚       #001529 深色通栏，四列导航加发布方、产品名称、更新时间与信息来源
 *
 * 与 plan-hero.css 同样不依赖 tailwind.css（预编译产物，只含现有页面用到的类）。
 * 类名统一 gp- 前缀。考试说明页之外的几个事实源页也复用本文件。
 */

/*
 * 本文件不依赖 tailwind.css，也就没有它自带的 box-sizing 重置，
 * 于是 `.gp-wrap { width: 100%; padding: 0 24px }` 在窄屏上算成 100% + 48px，
 * 整页比视口宽 48 像素——手机上表现为每一行文字右侧被切掉、页面能横向拖动。
 * 桌面端因为有 max-width 1180 且窗口更宽，一直没暴露出来。
 *
 * 作用域限定在 .gp-body 内：首页与专题页走 tailwind，不要影响它们。
 */
.gp-body,
.gp-body *,
.gp-body *::before,
.gp-body *::after {
  box-sizing: border-box;
}

.gp-body {
  margin: 0;
  color: #1c2e4a;
  background: #ffffff;
  font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.7;
}

.gp-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- 顶栏 ---- */

.gp-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 66px;
  border-bottom: 1px solid #f0f2f5;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
}

.gp-nav .gp-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.gp-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1c2e4a;
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
}

.gp-nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.gp-nav-links a {
  position: relative;
  padding: 22px 0;
  color: #56647a;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.18s ease;
}

.gp-nav-links a:hover {
  color: #2f6aff;
}

.gp-nav-links a.on {
  color: #2f6aff;
  font-weight: 600;
}

.gp-nav-links a.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #2f6aff;
}

/* ---- 标题区 ---- */

.gp-head {
  padding: 34px 0 30px;
  border-bottom: 1px solid #eef1f6;
  background: linear-gradient(180deg, #f4f7fc 0%, #f8fafd 100%);
}

.gp-crumb {
  color: #7a8aa2;
  font-size: 13px;
}

.gp-crumb a {
  color: #7a8aa2;
  text-decoration: none;
}

.gp-crumb a:hover {
  color: #2f6aff;
}

.gp-head h1 {
  margin: 12px 0 0;
  font-size: 34px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.gp-lead {
  max-width: 780px;
  margin: 14px 0 0;
  color: #56647a;
  font-size: 16px;
  line-height: 1.9;
}

.gp-meta {
  margin-top: 16px;
  color: #7a8aa2;
  font-size: 13px;
}

.gp-meta a {
  color: #2f6aff;
  text-decoration: none;
}

/* ---- 正文 + 右侧栏 ---- */

.gp-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 282px;
  gap: 40px;
  align-items: start;
  /*
   * 左右这 24 必须写出来。`.gp-main` 同时挂着 `.gp-wrap`，而这条 padding 会整条覆盖掉
   * `.gp-wrap` 的 `0 24px`——桌面端窗口宽、两侧本来就有大片留白，看不出来；
   * 手机上就是正文和标题贴着屏幕边，而上面的标题区（另一个 .gp-wrap）还留着 24，
   * 两段左边界对不齐。
   */
  padding: 36px 24px 56px;
}

.gp-sec {
  margin-bottom: 38px;
  /* 顶栏吸顶 66，锚点跳转不留偏移的话标题会被压在顶栏底下 */
  scroll-margin-top: 82px;
}

.gp-sec > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef1f6;
  font-size: 22px;
  font-weight: 700;
}

.gp-no {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f0f7ff;
  color: #2f6aff;
  font-size: 15px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}

.gp-sec p {
  margin: 14px 0 0;
  color: #56647a;
  font-size: 15px;
  line-height: 1.95;
}

/*
 * 指路句：「你要找的不是这一页」。
 * 高级考案例分析、中级考应用技术，两页各写各的，靠这一句把走错的人送过去。
 * 弱化处理，不要看起来像正文的一部分。
 */
.gp-crossref {
  display: block;
  margin-top: 10px;
  color: #7a8aa2;
  font-size: 14px;
}

.gp-crossref a {
  color: #2f5fd0;
}

.gp-sec p.lead-answer {
  padding: 14px 16px;
  border-radius: 8px;
  background: #f0f7ff;
  color: #1c2e4a;
}

/* 清单与表格：整块一张卡片，内部细线分隔、双行浅填充 */

.gp-table {
  width: 100%;
  margin-top: 16px;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  border-collapse: collapse;
  overflow: hidden;
  font-size: 14px;
}

.gp-table th,
.gp-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #eef1f6;
  text-align: left;
  vertical-align: top;
}

.gp-table thead th {
  background: #f5f7fa;
  color: #56647a;
  font-weight: 600;
}

.gp-table tbody tr:nth-child(even) td {
  background: #fafbfc;
}

.gp-table tbody tr:last-child td {
  border-bottom: 0;
}

.gp-table td b {
  color: #1c2e4a;
}

/*
 * 两列的「步骤 ／ 说明」表。
 *
 * 不定宽的话浏览器按内容分配，左列只拿到 150 上下，而里面是「第一步」加一行小标题，
 * 于是十个字被折成三行，右列却空着大半——两边都不好看。给左列一个固定比例，
 * 小标题一行放得下，说明文字拿走剩下的宽度。
 */
.gp-table.steps {
  table-layout: fixed;
}

.gp-table.steps th:nth-child(1),
.gp-table.steps td:nth-child(1) {
  width: 30%;
}

/*
 * 左列是短标签的表（「软考高级」「微信小程序」这一类）。
 *
 * 不管的话浏览器按内容占比分宽度，手机上左列被挤到折行——
 * 四五个字断成两行，比什么都不写更难读。禁止折行，宽度由内容决定。
 */
.gp-table.labels th:nth-child(1),
.gp-table.labels td:nth-child(1) {
  width: 1%;
  white-space: nowrap;
}

/* 级别表另外多一列短内容：「综合知识 · 案例分析 · 论文」也不该断在「论／文」上 */
.gp-table.levels th:nth-child(2),
.gp-table.levels td:nth-child(2) {
  width: 1%;
  white-space: nowrap;
}

/*
 * 横向滚动的外壳。给必须保持列对齐、压不下去的宽表格用（目前只有三列科目表）。
 * 滚动必须发生在表格**外面**：加在表格自己身上时，它同时是滚动容器和被撑宽的内容，
 * 等于没有滚动，整页跟着一起变宽。
 */
.gp-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/*
 * 科目对照表：三列的内容长短极不均衡（科目名十来个字、考试科目四个字、
 * 能力要求四五十个字），不指定列宽的话浏览器会按内容硬挤成三条窄柱——
 * 「综合知识」都会被拆成两行，读起来像竖排。
 *
 * 固定表格布局 + 前两列定宽，第三列吃掉剩余空间；考试科目列禁止折行。
 */
.gp-table.subjects {
  table-layout: fixed;
}

.gp-table.subjects th:nth-child(1),
.gp-table.subjects td:nth-child(1) {
  width: 26%;
}

.gp-table.subjects th:nth-child(2),
.gp-table.subjects td:nth-child(2) {
  width: 15%;
  white-space: nowrap;
}

.gp-table.subjects td:nth-child(1) b {
  display: block;
  margin-bottom: 6px;
  line-height: 1.5;
}

.gp-table.subjects td:nth-child(1) a {
  color: #2f6aff;
  font-size: 13px;
  text-decoration: none;
}

.gp-table.subjects td:nth-child(1) a:hover {
  text-decoration: underline;
}

.gp-list {
  margin-top: 16px;
  padding: 0;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  overflow: hidden;
  list-style: none;
}

.gp-list li {
  padding: 13px 16px;
  border-bottom: 1px solid #eef1f6;
  font-size: 14px;
  color: #56647a;
}

.gp-list li:nth-child(even) {
  background: #fafbfc;
}

.gp-list li:last-child {
  border-bottom: 0;
}

.gp-list li b {
  color: #1c2e4a;
}

/* 二维码：联系方式里的企业微信与公众号 */
.gp-qr {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 18px;
}

.gp-qr figure {
  margin: 0;
  padding: 14px;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  background: #ffffff;
  text-align: center;
}

.gp-qr img {
  display: block;
  width: 132px;
  height: 132px;
  object-fit: contain;
}

.gp-qr figcaption {
  margin-top: 10px;
  color: #7a8aa2;
  font-size: 13px;
}

/* 科目系统与共用工具的清单 */
.gp-entries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.gp-entries a {
  display: block;
  padding: 12px 14px;
  border: 1px solid #eef1f6;
  border-radius: 8px;
  background: #fafbfc;
  text-decoration: none;
  transition: all 0.18s ease;
}

.gp-entries a:hover {
  border-color: #c7d6f5;
  background: #f0f7ff;
}

.gp-entries b {
  display: block;
  color: #1c2e4a;
  font-size: 14px;
}

.gp-entries small {
  display: block;
  margin-top: 4px;
  color: #7a8aa2;
  font-size: 12px;
}

@media (max-width: 640px) {
  .gp-entries {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * 科目卡片：一科一张，说明是静态的，考期与系统入口由 course-directory.js 补。
 * 主要在微信内置浏览器里被打开（公众号菜单「备考资料」的落点），所以按窄屏排版，
 * 宽屏只是让它不至于拉得太散，不做多列——一屏看三张卡不如看清一张。
 */
.gp-course-list {
  margin-top: 16px;
}

.gp-course {
  padding: 16px;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  background: #ffffff;
}

.gp-course + .gp-course {
  margin-top: 12px;
}

.gp-course-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}

.gp-course-head b {
  color: #1c2e4a;
  font-size: 16px;
}

/*
 * 考期那一栏：状态是个独立小标签，日期跟在后面。
 * 早先是整条文字套一个圆角底，手机上折成两行塞在同一个色块里，挤得看不清。
 */
.gp-course-term {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: #7a8aa2;
  font-size: 13px;
}

.gp-course-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: #f2f4f8;
  color: #56647a;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

/* 本期开考的那一档标出来：它决定用户是「还剩几个月」还是「要备下一期」 */
.gp-course-tag.on {
  background: #f0f7ff;
  color: #2f5fd0;
}

/* 这两条要压过前面的 .gp-sec p，选择器带上父级把权重提上去 */
.gp-course .gp-course-desc {
  margin-top: 10px;
  color: #56647a;
  font-size: 14px;
  line-height: 1.75;
}

.gp-course .gp-course-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
}

.gp-course-links a {
  color: #2f5fd0;
  font-size: 14px;
  text-decoration: none;
}

.gp-course-links a:hover {
  text-decoration: underline;
}

.gp-sec p.gp-course-empty {
  margin-top: 18px;
}

/*
 * 常见问题：一问一块，默认折叠只露问题，展开看展开说明。
 *
 * 用原生 <details> 而不是 JS 开合：答案正文始终在 HTML 里，
 * 折叠不影响搜索引擎抓取，也不依赖脚本能否加载。
 */
.gp-faq {
  margin-top: 12px;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.gp-faq > summary {
  padding: 14px 18px;
  background: #fafbfc;
  color: #1c2e4a;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.gp-faq > summary::-webkit-details-marker {
  display: none;
}

.gp-faq > summary::before {
  content: "问";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  border-radius: 6px;
  background: #f0f7ff;
  color: #2f6aff;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  vertical-align: 1px;
}

.gp-faq > summary:hover {
  background: #f0f7ff;
}

.gp-faq[open] > summary {
  background: #f0f7ff;
  border-bottom: 1px solid #eef1f6;
}

.gp-faq > p,
.gp-faq > :not(summary) {
  margin: 0;
  padding: 0 18px;
}

.gp-faq > p.lead-answer {
  margin: 16px 18px 0;
  padding: 12px 14px;
}

.gp-faq p {
  margin-top: 12px;
  padding-bottom: 2px;
  color: #56647a;
  font-size: 15px;
  line-height: 1.95;
}

.gp-faq > :last-child {
  padding-bottom: 18px;
}

/* 「需要注意」：结论前置之后收口的前提条件 */
.gp-caution {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 3px solid #fa8c16;
  border-radius: 0 8px 8px 0;
  background: #fff7e6;
  color: #56647a;
  font-size: 14px;
  line-height: 1.9;
}

/* ---- 右侧栏 ---- */

.gp-side {
  position: sticky;
  top: 90px;
}

.gp-side-card {
  padding: 18px;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 12px rgba(31, 45, 61, 0.08);
}

.gp-side-card + .gp-side-card {
  margin-top: 16px;
}

.gp-side-card > span {
  display: block;
  margin-bottom: 10px;
  color: #7a8aa2;
  font-size: 12px;
}

.gp-toc {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gp-toc li + li {
  margin-top: 2px;
}

.gp-toc a {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  color: #56647a;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.18s ease;
}

.gp-toc a:hover {
  background: #f0f7ff;
  color: #2f6aff;
}

.gp-side-cta {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  background: #2f6aff;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.18s ease;
}

.gp-side-cta:hover {
  background: #1f4fd8;
}

.gp-side-note {
  margin: 10px 0 0;
  color: #7a8aa2;
  font-size: 12px;
  line-height: 1.7;
}

/* ---- 深色页脚 ---- */

.gp-foot {
  padding: 44px 0 26px;
  background: #001529;
  color: #8b9bb4;
  font-size: 13px;
}

.gp-foot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid #0d2a44;
}

.gp-foot-grid b {
  display: block;
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 14px;
}

.gp-foot-grid a {
  display: block;
  margin-bottom: 8px;
  color: #8b9bb4;
  text-decoration: none;
}

.gp-foot-grid a:hover {
  color: #ffffff;
}

.gp-foot-bar {
  padding-top: 20px;
  line-height: 2;
}

.gp-foot-bar a {
  color: #8b9bb4;
  text-decoration: none;
}

.gp-foot-bar a:hover {
  color: #ffffff;
}

/* ---- 窄屏 ---- */

@media (max-width: 1024px) {
  .gp-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .gp-side {
    position: static;
  }

  .gp-foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gp-nav-links {
    display: none;
  }
}

@media (max-width: 640px) {
  .gp-head h1 {
    font-size: 26px;
  }

  /*
   * 窄屏下让表格自己成为滚动容器。
   * 三列科目表除外：它要靠 min-width 撑开横向滚动，而 min-width 加在滚动容器
   * 自己身上是没用的——容器跟着变宽，页面照样被撑破。它由外层 .gp-scroll 负责滚动。
   */
  .gp-table:not(.subjects) {
    display: block;
    overflow-x: auto;
  }

  /* 窄屏改横向滚动而不是继续压缩，否则定宽百分比会算在更窄的容器上，又挤回去 */
  .gp-table.subjects {
    min-width: 640px;
  }

  /*
   * 级别表的考试科目列在手机上放开折行。
   * 「综合知识 · 案例分析 · 论文」不折行要占 195 像素，手机总共才三百多，
   * 说明列会被挤到六十几像素、一行两三个字，整行高到五百像素。
   * 级别那一列只有四个字，继续保持不折行。
   */
  .gp-table.levels th:nth-child(2),
  .gp-table.levels td:nth-child(2) {
    width: auto;
    white-space: normal;
  }

  /*
   * 步骤表在手机上改成上下两段：小标题占一行，说明另起一行。
   * 继续按比例分列的话左列只剩一百来像素，「先看参考答案怎么组织」被折成四行，
   * 比桌面端那个挤法更糟——两列并排本来就是给宽屏用的。
   */
  .gp-table.steps {
    table-layout: auto;
  }

  .gp-table.steps thead {
    display: none;
  }

  .gp-table.steps tr {
    display: block;
    border-bottom: 1px solid #eef1f6;
  }

  .gp-table.steps tbody tr:last-child {
    border-bottom: 0;
  }

  .gp-table.steps td {
    display: block;
    border-bottom: 0;
  }

  /* 选择器要和上面那条定宽的一样具体，否则 30% 照旧生效，改成块级反而更窄 */
  .gp-table.steps th:nth-child(1),
  .gp-table.steps td:nth-child(1) {
    width: auto;
    padding-bottom: 0;
  }
}