/* 新 morepage 版式 33（10-17）：米色纸感 + 衬线标题 + 棕灰粗边框卡片，墨绿直角按钮。类名 sp- 前缀，变量挂在 body.mp33。
   老页面（body.mp33-old，另有 module.css）只管页头、收尾、页脚和列表页底部两张表，样式都写在 sp- 类名上。 */
.mp33 {
  --sp-paper: #e9e2dd;
  --sp-paper-2: #ded5ce;
  --sp-sheet: #f7f3ee;
  --sp-foot: #efe8e1;
  --sp-ink: #3d3431;
  --sp-text: #4a403c;
  --sp-muted: #665a52;
  --sp-rule: #8c7d75;
  --sp-rule-d: #6b5d57;
  --sp-hair: rgba(61, 52, 49, .16);
  --sp-green: #2f6b3a;
  --sp-green-d: #24552d;
  --sp-lift: rgba(61, 52, 49, .12);
  --sp-serif: "Songti SC", "STSong", "SimSun", serif;
  --sp-sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* 首页、内页底色 */
body.mp33:not(.mp33-old) { background-color: var(--sp-paper); background-image: radial-gradient(rgba(61, 52, 49, .06) 1px, transparent 1.3px); background-size: 20px 20px; color: var(--sp-text); font-family: var(--sp-sans); font-size: 16px; line-height: 1.85; }
.sp-main h1, .sp-main h2, .sp-main h3, .sp-hd h2 { font-family: var(--sp-serif); color: var(--sp-ink); font-weight: 700; letter-spacing: .02em; }
.sp-main section[id] { scroll-margin-top: 16px; }
:where(.sp-main) a { color: var(--sp-green); }
.sp-main a:focus-visible, .sp-head a:focus-visible, .sp-foot a:focus-visible, .sp-cta a:focus-visible, .sp-qa summary:focus-visible { outline: 2px solid var(--sp-green); outline-offset: 2px; }

/* 按钮 */
.sp-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.sp-btns-c { justify-content: center; }
.sp-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 26px; border: 2px solid transparent; border-radius: 0; font-family: var(--sp-sans); font-size: 15px; font-weight: 700; letter-spacing: .06em; line-height: 1.4; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.sp-btn-solid { background: var(--sp-green); border-color: var(--sp-green); color: #fff; }
.sp-btn-solid:hover { background: var(--sp-green-d); border-color: var(--sp-green-d); color: #fff; }
.sp-btn-frame { background: transparent; border-color: var(--sp-rule-d); color: var(--sp-ink); }
.sp-btn-frame:hover { background: var(--sp-ink); border-color: var(--sp-ink); color: #fff; }

/* 页头 */
.sp-head { position: relative; z-index: 1030; background: var(--sp-paper); color: var(--sp-text); font-family: var(--sp-sans); font-size: 15px; line-height: 1.6; border-bottom: 4px double var(--sp-rule-d); }
.sp-ribbon { background: var(--sp-paper-2); color: var(--sp-muted); font-size: 12.5px; line-height: 1.5; letter-spacing: .18em; padding: 6px 0; text-align: center; border-bottom: 1px solid var(--sp-hair); }
.sp-ribbon .container { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-mid { margin: 0 10px; color: var(--sp-green); }
.mp33 .sp-nav { padding: 14px 0; }
.sp-mark { order: 0; display: block; line-height: 0; margin-right: 18px; padding: 5px 10px; background: var(--sp-sheet); border: 2px solid var(--sp-rule-d); box-shadow: 3px 3px 0 var(--sp-lift); }
.sp-mark img { height: 38px; width: auto; max-width: 150px; }
.sp-join { order: 1; margin-left: auto; margin-right: 10px; padding: 6px 16px; background: var(--sp-green); border: 1px solid var(--sp-green-d); border-radius: 0; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .06em; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.sp-join:hover { background: var(--sp-green-d); color: #fff; }
.mp33 .sp-toggle { order: 2; padding: 5px 8px; border: 2px solid var(--sp-rule-d); border-radius: 0; background: var(--sp-sheet); }
.mp33 .sp-toggle:focus { box-shadow: 0 0 0 3px rgba(47, 107, 58, .25); }
.sp-menu { order: 3; }
.sp-tabs { gap: 6px; }
.mp33 .sp-nav .sp-tabs .nav-link { padding: 5px 13px; background: var(--sp-sheet); border: 1.5px solid var(--sp-rule); border-radius: 2px; box-shadow: 2px 2px 0 var(--sp-lift); color: var(--sp-ink); font-size: 14px; font-weight: 600; line-height: 1.5; text-decoration: none; transition: color .2s, border-color .2s, background-color .2s; }
.mp33 .sp-nav .sp-tabs .nav-link:hover { border-color: var(--sp-green); color: var(--sp-green); }
.mp33 .sp-nav .sp-tabs .nav-link.active { background: var(--sp-ink); border-color: var(--sp-ink); color: #fff; }
.sp-index { padding: 8px 0; border-top: 1px solid var(--sp-hair); background: var(--sp-sheet); }
.sp-index-in { display: flex; overflow-x: auto; scrollbar-width: thin; }
.sp-index a { flex: 0 0 auto; padding: 1px 14px; border-left: 1px solid var(--sp-rule); color: var(--sp-text); font-family: var(--sp-serif); font-size: 14px; line-height: 1.6; text-decoration: none; white-space: nowrap; }
.sp-index a:first-child { border-left: 0; padding-left: 0; }
.sp-index a:hover { color: var(--sp-green); text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 992px) {
  .sp-menu { order: 1; }
  .sp-tabs { margin-left: auto; }
  .sp-join { order: 2; margin: 0 0 0 16px; }
  .sp-index-in { flex-wrap: wrap; justify-content: center; row-gap: 4px; overflow: visible; }
}
@media (max-width: 991.98px) {
  .sp-menu { margin-top: 12px; padding: 12px 0 4px; border-top: 1px dashed var(--sp-rule); }
  .sp-tabs { gap: 8px; }
  .mp33 .sp-nav .sp-tabs .nav-link { padding: 9px 12px; }
}

/* 粗边框卡片 + 眉题 */
.sp-plate { padding: 32px 36px; background: var(--sp-sheet); border: 6px solid var(--sp-rule); box-shadow: 0 12px 26px rgba(61, 52, 49, .12); }
.sp-plate-hero { padding-top: 0; border-width: 8px; }
.sp-eyebrow, .sp-trail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; margin: 0 -36px 30px; padding: 12px 36px; border-bottom: 1px solid var(--sp-hair); font-size: 12.5px; line-height: 1.6; letter-spacing: .32em; }
.sp-eyebrow { color: var(--sp-green); font-weight: 600; text-align: center; }
.sp-eyebrow::before, .sp-eyebrow::after { content: ""; flex: 0 0 28px; height: 5px; border-top: 1px solid var(--sp-rule); border-bottom: 1px solid var(--sp-rule); }
.sp-trail { justify-content: flex-start; list-style: none; letter-spacing: .2em; color: var(--sp-muted); }
.sp-trail li + li::before { content: "\203A"; margin-right: 10px; color: var(--sp-rule-d); }
.sp-trail a { color: var(--sp-green); text-decoration: none; }
.sp-trail a:hover { text-decoration: underline; }

/* 首屏 */
.sp-hero { padding: 40px 0 8px; }
.sp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: center; }
.sp-main .sp-plate-hero h1 { margin: 0 0 18px; font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.3; }
.sp-intro p { margin: 0 0 12px; }
.sp-mount { padding: 8px; background: #fff; border: 1px solid var(--sp-rule); box-shadow: 6px 6px 0 var(--sp-lift); line-height: 0; }
.sp-mount img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.86) sepia(.08); }
.sp-main .sp-hero-page .sp-plate-hero h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.sp-hero-page .sp-intro { max-width: 880px; }

/* 版块标题 */
.sp-sec { padding: 44px 0; }
.sp-hd { margin-bottom: 26px; text-align: center; }
.sp-hd h2 { margin: 0; font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.35; }
.sp-hd h2::after { content: ""; display: block; width: 64px; height: 5px; margin: 14px auto 0; border-top: 2px solid var(--sp-rule-d); border-bottom: 1px solid var(--sp-rule-d); }
.sp-hd p { max-width: 680px; margin: 14px auto 0; color: var(--sp-muted); font-size: 15px; line-height: 1.75; }

/* 表格 */
.sp-ledger { border-top: 2px solid var(--sp-ink); border-bottom: 2px solid var(--sp-ink); }
.mp33 .sp-table { --bs-table-bg: transparent; --bs-table-color: var(--sp-text); --bs-table-border-color: var(--sp-hair); margin: 0; min-width: 560px; font-size: 15px; }
.mp33 .sp-table thead th { padding: 12px 16px; border-bottom: 1px solid var(--sp-rule-d); color: var(--sp-ink); font-family: var(--sp-serif); font-size: 15px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.mp33 .sp-table td { padding: 13px 16px; vertical-align: middle; }
.mp33 .sp-table tbody tr:last-child > * { border-bottom: 0; }
.mp33 .sp-table tbody tr:hover > * { --bs-table-bg-state: rgba(47, 107, 58, .05); }
.sp-day { color: var(--sp-muted) !important; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-comp { color: var(--sp-green) !important; font-size: 14px; letter-spacing: .04em; white-space: nowrap; }
.sp-pair { color: var(--sp-ink) !important; font-weight: 600; }
.sp-v { margin: 0 10px; color: var(--sp-muted); font-weight: 400; }
.sp-res { display: inline-block; padding: 0 4px; border-bottom: 2px solid var(--sp-green); color: var(--sp-ink); font-family: var(--sp-serif); font-size: 17px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-stamp { display: inline-block; padding: 1px 10px; border: 1px solid var(--sp-rule-d); color: var(--sp-text); font-size: 13px; letter-spacing: .1em; white-space: nowrap; }
.sp-ver { color: var(--sp-ink) !important; font-family: var(--sp-serif); font-weight: 700; white-space: nowrap; }

/* 话题 1~3 */
.sp-folios { padding: 14px 0 18px; }
.sp-folio { display: grid; gap: 30px; margin-bottom: 28px; padding: 34px 38px; background: var(--sp-sheet); border: 2px solid var(--sp-rule); box-shadow: 0 8px 0 var(--sp-lift); }
.sp-folio:last-child { margin-bottom: 0; }
.sp-main .sp-folio h2 { margin: 0 0 8px; font-size: clamp(1.35rem, 2.3vw, 1.8rem); line-height: 1.4; }
.sp-main .sp-folio h3, .sp-main .sp-card h3 { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--sp-rule); color: var(--sp-green); font-family: var(--sp-sans); font-size: 1rem; font-weight: 600; line-height: 1.6; letter-spacing: .02em; }
.sp-folio p { margin: 0 0 10px; }
.sp-folio-img img { aspect-ratio: 7 / 5; }

/* feature 三步 */
.sp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-step { padding: 4px 28px; border-left: 1px solid var(--sp-rule); }
.sp-step:first-child { padding-left: 0; border-left: 0; }
.sp-step:last-child { padding-right: 0; }
.sp-step-no { display: block; margin-bottom: 10px; color: var(--sp-green); font-family: var(--sp-serif); font-size: 2.4rem; font-weight: 700; line-height: 1; }
.sp-main .sp-step h3 { margin: 0 0 8px; font-size: 1.12rem; line-height: 1.5; }
.sp-step p { margin: 0; font-size: 15px; line-height: 1.8; }

/* 资讯 */
.sp-story { height: 100%; padding: 10px; background: var(--sp-sheet); border: 1px solid var(--sp-rule); box-shadow: 0 5px 0 var(--sp-lift); }
.sp-story-pic, .sp-brief-pic { display: block; line-height: 0; border: 1px solid var(--sp-hair); overflow: hidden; }
.sp-story-pic img, .sp-brief-pic img { display: block; width: 100%; height: auto; object-fit: cover; filter: saturate(.88); }
.sp-story-pic img { aspect-ratio: 16 / 10; }
.sp-story-body { padding: 12px 6px 6px; }
.sp-story time, .sp-brief time { color: var(--sp-green); font-size: 12.5px; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.sp-main .sp-story h3, .sp-main .sp-brief h3 { margin: 4px 0 6px; font-size: 1.02rem; line-height: 1.5; }
.sp-story h3 a, .sp-brief h3 a { color: var(--sp-ink); text-decoration: none; }
.sp-story h3 a:hover, .sp-brief h3 a:hover { color: var(--sp-green); text-decoration: underline; text-underline-offset: 4px; }
.sp-story p, .sp-brief p { margin: 0; color: var(--sp-muted); font-size: 14px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-story-lead { padding: 14px; }
.sp-story-lead .sp-story-pic img { aspect-ratio: 18 / 11; }
.sp-main .sp-story-lead h3 { font-size: 1.35rem; }
.sp-story-lead p { -webkit-line-clamp: 3; font-size: 15px; }
.sp-briefs { height: 100%; padding: 4px 18px; background: var(--sp-sheet); border: 1px solid var(--sp-rule); box-shadow: 0 5px 0 var(--sp-lift); }
.sp-brief { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--sp-rule); }
.sp-brief:last-child { border-bottom: 0; }
.sp-brief-pic { flex: 0 0 104px; align-self: flex-start; }
.sp-brief-pic img { aspect-ratio: 4 / 3; }
.sp-brief-body { min-width: 0; }
.sp-main .sp-brief h3 { font-size: .98rem; margin-top: 2px; }
.sp-brief p { font-size: 13.5px; }
.sp-more { margin-top: 28px; text-align: center; }
.sp-more a { display: inline-block; padding: 8px 24px; border: 2px solid var(--sp-rule-d); color: var(--sp-ink); font-weight: 600; letter-spacing: .1em; text-decoration: none; }
.sp-more a:hover { background: var(--sp-ink); border-color: var(--sp-ink); color: #fff; }

/* 话题 4~6 */
.sp-folios-3 { padding: 18px 0 22px; }
.sp-card { height: 100%; padding: 22px; background: var(--sp-sheet); border: 2px solid var(--sp-rule); box-shadow: 0 8px 0 var(--sp-lift); }
.sp-card-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 18px; border: 1px solid var(--sp-hair); filter: saturate(.86) sepia(.08); }
.sp-main .sp-card h2 { margin: 0 0 6px; font-size: 1.25rem; line-height: 1.45; }
.sp-main .sp-card h3 { margin-bottom: 12px; padding-bottom: 10px; font-size: .95rem; }
.sp-card p { margin: 0 0 8px; font-size: 15px; }

/* 问答 */
.sp-qa-list { max-width: 920px; margin: 0 auto; border-top: 2px solid var(--sp-ink); }
.sp-qa { border-bottom: 1px solid var(--sp-rule); }
.sp-qa summary { position: relative; display: block; list-style: none; cursor: pointer; padding: 16px 44px 16px 0; color: var(--sp-ink); font-family: var(--sp-serif); font-size: 1.05rem; font-weight: 700; line-height: 1.6; }
.sp-qa summary::-webkit-details-marker { display: none; }
.sp-qa summary::after { content: "+"; position: absolute; right: 4px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border: 1.5px solid var(--sp-rule-d); color: var(--sp-ink); font-family: var(--sp-sans); font-weight: 600; line-height: 21px; text-align: center; }
.sp-qa[open] summary::after { content: "\2212"; background: var(--sp-ink); border-color: var(--sp-ink); color: #fff; }
.sp-qa p { margin: 0; padding: 0 0 18px; }

/* 内页 */
.sp-sheet { padding: 28px 32px; background: var(--sp-sheet); border: 1px solid var(--sp-rule); box-shadow: 0 6px 0 var(--sp-lift); }
.sp-sheet p { margin: 0 0 12px; }
.sp-sheet p:last-child { margin-bottom: 0; }
.sp-note { height: 100%; padding: 22px; background: var(--sp-sheet); border: 1px solid var(--sp-rule); border-top: 4px solid var(--sp-rule-d); }
.sp-tag { display: inline-block; margin-bottom: 10px; padding: 1px 10px; border: 1.5px solid var(--sp-green); color: var(--sp-green); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; line-height: 1.6; }
.sp-main .sp-note h3 { margin: 0 0 8px; font-size: 1.08rem; line-height: 1.5; }
.sp-note p { margin: 0; font-size: 15px; line-height: 1.8; }
.sp-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: 24px; list-style: none; margin: 22px 0 0; padding: 0; border-top: 2px solid var(--sp-ink); }
.sp-contact li { padding: 14px 4px; border-bottom: 1px solid var(--sp-rule); color: var(--sp-ink); overflow-wrap: anywhere; }
.sp-contact span { display: block; margin-bottom: 2px; color: var(--sp-green); font-size: 12.5px; letter-spacing: .16em; }

/* 收尾 */
.sp-cta { padding: 20px 0 56px; background: var(--sp-paper); color: var(--sp-text); font-family: var(--sp-sans); font-size: 16px; line-height: 1.8; }
.sp-cta-frame { padding: 42px 34px; background: var(--sp-sheet); border: 8px solid var(--sp-rule); outline: 1px solid var(--sp-rule); outline-offset: -18px; text-align: center; }
.sp-cta h2 { margin: 0 0 10px; color: var(--sp-ink); font-family: var(--sp-serif); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.4; }
.sp-cta p { max-width: 620px; margin: 0 auto; color: var(--sp-muted); }

/* 页脚 */
.sp-foot { padding: 48px 0 22px; background: var(--sp-foot); border-top: 6px solid var(--sp-rule-d); color: var(--sp-text); font-family: var(--sp-sans); font-size: 14.5px; line-height: 1.8; }
.sp-foot-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 28px 36px; }
.sp-foot-logo { display: block; height: 50px; width: auto; max-width: 170px; margin-bottom: 14px; padding: 4px 8px; background: var(--sp-sheet); border: 2px solid var(--sp-rule-d); }
.sp-foot-brand p { margin: 0; color: var(--sp-muted); }
.sp-foot h3 { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--sp-rule); color: var(--sp-ink); font-family: var(--sp-serif); font-size: 15px; font-weight: 700; letter-spacing: .2em; line-height: 1.5; }
.sp-foot ul { list-style: none; margin: 0; padding: 0; }
.sp-foot li { margin-bottom: 7px; }
.sp-foot-desk li { overflow-wrap: anywhere; }
.sp-foot a { color: var(--sp-text); text-decoration: none; }
.sp-foot a:hover { color: var(--sp-green); text-decoration: underline; text-underline-offset: 3px; }
.sp-foot-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 30px; padding: 12px 0; border-top: 1px dashed var(--sp-rule); border-bottom: 1px dashed var(--sp-rule); }
.sp-foot-rec-h { color: var(--sp-ink); font-family: var(--sp-serif); font-weight: 700; letter-spacing: .16em; }
.mp33 .sp-foot-rec a { color: var(--sp-green); font-size: 13.5px; }
.sp-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 18px; color: var(--sp-muted); font-size: 13px; }
.mp33 .sp-beian a { color: var(--sp-muted); }

/* 老页面：module.css 把 .container 内边距清零，补回；底部两张表自己铺纸色底 */
.mp33-old .sp-head .container, .mp33-old .sp-sec .container, .mp33-old .sp-cta .container, .mp33-old .sp-foot .container { padding-left: 12px; padding-right: 12px; }
.mp33-old .sp-sec { background: var(--sp-paper); color: var(--sp-text); font-family: var(--sp-sans); font-size: 16px; line-height: 1.8; }
.mp33-old .sp-sec + .sp-sec { padding-top: 0; }
.mp33-old .sp-cta { padding-top: 40px; }
.mp33-old .sp-sec + .sp-cta { padding-top: 8px; }

/* 响应式 */
@media (min-width: 992px) {
  .sp-folio-pic { grid-template-columns: minmax(0, 1fr) 42%; align-items: center; }
  .sp-folio-flip { grid-template-columns: 42% minmax(0, 1fr); }
  .sp-folio-flip .sp-folio-img { order: -1; }
}
@media (max-width: 991.98px) {
  .sp-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .sp-foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  .sp-hero { padding-top: 24px; }
  .sp-sec { padding: 32px 0; }
  .sp-plate { padding: 22px 18px; border-width: 5px; }
  .sp-plate-hero { padding-top: 0; border-width: 6px; }
  .sp-eyebrow, .sp-trail { margin: 0 -18px 22px; padding: 10px 18px; letter-spacing: .18em; }
  .sp-eyebrow::before, .sp-eyebrow::after { flex-basis: 16px; }
  .sp-folio { padding: 22px 20px; gap: 20px; }
  .sp-steps { grid-template-columns: 1fr; }
  .sp-step, .sp-step:first-child, .sp-step:last-child { padding: 18px 0; border-left: 0; border-top: 1px solid var(--sp-rule); }
  .sp-step:first-child { padding-top: 0; border-top: 0; }
  .mp33 .sp-table { font-size: 14px; }
  .mp33 .sp-table thead th, .mp33 .sp-table td { padding: 10px 12px; }
  .sp-sheet { padding: 20px; }
  .sp-cta-frame { padding: 32px 22px; border-width: 6px; outline-offset: -12px; }
}
@media (max-width: 575.98px) {
  .sp-foot-cols { grid-template-columns: 1fr 1fr; }
  .sp-foot-brand, .sp-foot-desk { grid-column: 1 / -1; }
  .sp-btns .sp-btn { flex: 1 1 auto; }
  .sp-mark { margin-right: 10px; padding: 4px 8px; }
  .sp-mark img { height: 30px; }
  .sp-ribbon { letter-spacing: .08em; }
  .sp-brief-pic { flex-basis: 88px; }
}