/* ============================================================================
   辽宁省门球运动协会 · 全站样式

   ★★ 本站第一设计约束是「适老化」——协会主力人群年龄偏大（竞赛规程里
      运动员年龄下限就是 45/50 岁，上限 70-75 岁）。所以：
        · 正文 17px 起（不是常见的 14-15px）
        · 正文对比度 ≥ 7:1（WCAG AAA），不用浅灰字
        · 可点区域 ≥ 44px
        · 行高 1.8，段间距充足
        · 不用极细字重、不用低对比度装饰文字

   ★ 配色取自协会官方视觉（秩序册印刷原稿区域主色，见 _素材\pick-color.mjs）：
        会徽绿 #74AA48   会徽红 #E7010C
        品牌深蓝 #004193  品牌亮蓝 #0084C7  标题黄 #F5DE5A
   ============================================================================ */

:root {
  /* 品牌色 */
  --green:      #74AA48;   /* 会徽绿 */
  --green-dark: #4F7D2C;
  --red:        #E7010C;   /* 会徽红 */
  --blue:       #004193;   /* 品牌深蓝（秩序册封面顶部） */
  --blue-mid:   #0084C7;   /* 品牌亮蓝 */
  --blue-deep:  #0A3E8A;
  --gold:       #F5DE5A;   /* 标题黄 */

  /* 文字（对比度都在白底上 ≥7:1） */
  --ink:        #16202e;   /* 正文 15.9:1 */
  --ink-2:      #3d4a5c;   /* 次要 8.6:1 */
  --ink-3:      #5a6675;   /* 辅助 5.9:1，只用于非关键信息 */

  --bg:         #ffffff;
  --bg-soft:    #f4f7fa;
  --line:       #dde4ec;

  /* ★★ 背景画的白遮罩浓度 —— **调背景浓淡只有这一个旋钮**。
   *    .88 = 画若隐若现、正文完全清晰（默认，推荐）
   *    .80 = 画很明显，是可读性的下限，别再往下调
   *    .93 = 几乎看不出画，接近原来的纯白
   * ★ 与它配套的是下面 --panel 的不透明度：遮罩调淡了，
   *   内容区就得更实一点，否则区块里的正文会跟着变糊。两个要一起看。 */
  --bg-veil:    .88;
  /* 内容区块的白底不透明度（.sec-alt / .stats 这类交替区块用）。
     不设成 1 是为了让背景画从区块里透出来一点，形成层次。 */
  --panel:      .82;

  --radius:     10px;
  --shadow:     0 2px 10px rgba(16,32,56,.08);
  --shadow-lg:  0 8px 28px rgba(16,32,56,.14);

  --wrap:       1200px;
  /* ★ 适老化基准字号，别调小 */
  --fs-base:    17px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
               "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--ink);

  /* ★★ 全站背景 = 袁德华《神坤系列》图版 163（70×97cm 布面油画）
   *    源图 `D:\袁德华艺术世界（绿联网NAS)\作品馆\神坤系列\163（70-97.jpg0.jpg`，
   *    版权在用户（辽宁百德慧文化持袁德华油画版权），2026-08-17 用户指定作官网背景。
   *
   * ★★★ 遮罩（--bg-veil）不是装饰，是**可读性的命门**：
   *    这张画下半部是深蓝（约 rgb(45,75,130)），而本站正文是深色字。
   *    不压白直接铺，深蓝区域上的正文对比度会掉到不可读。
   *    实测 88% 白遮罩后深蓝变成 rgb(230,233,240) 的浅蓝灰，
   *    与正文对比度约 14:1，远超 WCAG AA 的 4.5:1。
   *    ★ 本站用户是 45–75 岁门球爱好者（正文字号有 17px 的适老化底线），
   *      可读性不能为观感让步。想让画更明显就调小 --bg-veil，
   *      但**别低于 .80**，再淡正文就开始吃力了。
   *
   * ★★★ 用的是 **-soft 柔化版**（gblur sigma=24），不是原画：
   *    原画的纹理是「一个个卵石/云团」这种**高频具象**图形，铺成背景后
   *    在内容区（尤其公告栏那片留白）会露出一块块白斑，看着像渲染错误或屏幕脏了，
   *    而不像刻意的设计 —— 截图验证过，这个观感问题很明显。
   *    模糊后只留「云天→蓝云团→深蓝卵石」的色彩层次，成为柔和肌理，
   *    既有原作的气质又不跟文字抢注意力。
   *    想要清晰原画：把下面文件名的 `-soft` 去掉（同目录有 shenkun163.jpg），
   *    但要连 --bg-veil 一起调高到 .93 以上，否则白斑会回来。
   *
   * ★ 竖版图（654×945）在宽屏上会裁掉上下，只留中段那片蓝色云团 ——
   *   这是取舍：保完整构图就得留白边，那样更难看。
   */
  background:
    linear-gradient(rgba(255,255,255,var(--bg-veil)), rgba(255,255,255,var(--bg-veil))),
    url(../img/bg/shenkun163-soft.jpg) center center / cover no-repeat fixed,
    var(--bg);
}

img { max-width: 100%; display: block; border: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-mid); text-decoration: underline; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------- 顶部 */

.topbar {
  background: var(--blue);
  color: #fff;
  font-size: 14.5px;
  line-height: 40px;
}
.topbar .wrap { display: flex; justify-content: space-between; gap: 16px; }
.topbar a { color: rgba(255,255,255,.9); }
.topbar a:hover { color: #fff; }

.header { background: #fff; border-bottom: 3px solid var(--green); }
.header .wrap {
  display: flex; align-items: center; gap: 18px;
  padding-top: 16px; padding-bottom: 16px;
}
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand img { width: 74px; height: 74px; }
.brand-txt .cn {
  font-size: 27px; font-weight: 800; letter-spacing: 2px;
  color: var(--blue); line-height: 1.25;
}
.brand-txt .en {
  font-size: 12px; letter-spacing: 1.1px; color: var(--green-dark);
  font-weight: 700;
}
.header-slot { margin-left: auto; text-align: right; color: var(--ink-2); font-size: 15px; }

/* ---------------------------------------------------------------- 导航 */

.nav { background: var(--green); }
.nav .wrap { display: flex; flex-wrap: wrap; }

/* ★ 二级菜单：一级项包在 .nav-item 里，鼠标移上或键盘聚焦时展开 .subnav。
   栏目从 9 个扩到 15-18 个后一级平铺放不下，必须分两级。 */
.nav-item { position: relative; }
.nav-item > a {
  display: block;
  color: #fff; font-size: 18px; font-weight: 700;
  /* ★★ 宽度预算：.wrap 内容区宽 1160px（1200 减去左右各 20 内边距）。
     一级项宽 = 字数×18 + 左右内边距 + 1px 右边框。
     2026-09-01 加了第 10 项「在线报名」后，24px 内边距下总宽 1175 > 1160，
     「联系我们」被挤到第二行 —— 顶栏变两排，看着像坏了。
     改成 22px 后总宽约 1135，留 25px 余量。
     ⚠ 再加一级项就又要溢出了：4 个汉字的项约占 117px，
       下一项应当挂到现有栏目的二级菜单里，而不是继续平铺。
     ★ 只动左右内边距，字号 18px 与 52px 行高不许改 —— 那是适老化的触控下限。 */
  padding: 0 22px;
  /* ★ 52px 高，远超 44px 触控下限（适老化） */
  line-height: 52px;
  text-decoration: none;
  border-right: 1px solid rgba(255,255,255,.22);
}
.nav-item:first-child > a { border-left: 1px solid rgba(255,255,255,.22); }
.nav-item > a:hover { background: var(--green-dark); text-decoration: none; }
.nav-item > a.on { background: var(--blue); }

.subnav {
  position: absolute; left: 0; top: 100%; z-index: 50;
  min-width: 200px; background: #fff;
  border: 1px solid var(--line); border-top: 3px solid var(--green);
  box-shadow: var(--shadow-lg);
  display: none;
}
/* focus-within 让键盘 Tab 也能展开（无障碍） */
.nav-item:hover .subnav,
.nav-item:focus-within .subnav { display: block; }
.subnav a {
  display: block; padding: 12px 18px;
  /* 适老化：子项同样保证 ≥44px 可点高度 */
  min-height: 44px; line-height: 1.55;
  color: var(--ink); font-size: 16.5px;
  border-bottom: 1px solid var(--line);
  text-decoration: none; white-space: nowrap;
}
.subnav a:last-child { border-bottom: 0; }
.subnav a:hover { background: var(--bg-soft); color: var(--blue); text-decoration: none; }
.subnav a.on { background: var(--bg-soft); color: var(--blue); font-weight: 700; }

.burger { display: none; }

/* ---------------------------------------------------------------- 首页大图 */

.hero { position: relative; background: #06203f; overflow: hidden; }
/* ★ 2026-08-17 换成联赛展板照后，opacity 从 .82 提到 .96 ——
   展板上的字（联赛名、主办单位）本来就是要让人看清的内容，压暗等于白换。 */
.hero-img { width: 100%; height: 520px; object-fit: cover; opacity: .96; }
.hero-mask {
  position: absolute; inset: 0;
  /* ★★★ 渐变方向从「左浓右淡」改成「下浓上淡」。
     原来是斜向渐变（左侧 90% 深蓝）+ 文案垂直居中，配队列照没问题；
     但展板照的主标题「辽宁省第一届门球联赛」正在画面中部，
     三重叠加（图压暗 + 左侧浓遮罩 + 居中文案）会把它完全糊掉 —— 截图验证过。
     改成底部压深、上半部几乎透明：展板的 LOGO 与主标题完整露出，
     网站文案落在展板下缘（那里只有底部小字与草坪，遮掉损失最小）。
     ★ 换回人物类照片时要把这条改回左浓右淡，否则人脸会被底部遮罩切掉。 */
  background: linear-gradient(to top,
    rgba(0,38,92,.94) 0%, rgba(0,48,112,.82) 24%,
    rgba(0,58,128,.34) 52%, rgba(0,70,150,.06) 100%);
}
.hero-txt {
  position: absolute; inset: 0;
  /* ★ 配合上面的底部遮罩：文案贴底，不再垂直居中 */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 30px;
}
.hero-txt .wrap { width: 100%; }
.hero-eyebrow {
  color: var(--gold); font-size: 17px; font-weight: 700;
  letter-spacing: 5px; margin-bottom: 14px;
}
.hero h1 {
  margin: 0 0 18px; color: #fff;
  font-size: 52px; font-weight: 800; letter-spacing: 3px;
  line-height: 1.28; text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.hero p {
  margin: 0 0 26px; color: rgba(255,255,255,.96);
  font-size: 19px; max-width: 640px; line-height: 1.85;
}
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-block; padding: 13px 32px;
  font-size: 17px; font-weight: 700; border-radius: 6px;
  border: 2px solid transparent; cursor: pointer;
  text-decoration: none; min-height: 44px;
}
.btn:hover { text-decoration: none; }
.btn-main { background: var(--gold); color: #23325a; }
.btn-main:hover { background: #ffe97a; color: #23325a; }
.btn-ghost { border-color: rgba(255,255,255,.75); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.15); color: #fff; }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); color: #fff; }

/* ---------------------------------------------------------------- 数据条 */

/* ★ 半透明而不是 --bg-soft 的实色：让背景画从交替区块里透出来一点。
   实色会把画完全盖住，那样只有页面最边缘能看到画，等于没换背景。 */
.stats { background: rgba(244,247,250,var(--panel)); border-bottom: 1px solid var(--line); }
.stats .wrap {
  /* ★ 用 auto-fit 而不是写死 repeat(4,1fr)：统计项增删时不必改 CSS。
     写死 4 列时删掉一项，剩下 3 项只占前 3 格、右边留一个空位，整块明显偏左
     （2026-08-17 撤下「全运会门球金牌」那项时就是这个情况）。
     minmax 的 140px 是下限：桌面宽度下 3 项均分成 3 列，手机上自动降到 2 列。 */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px; padding-top: 30px; padding-bottom: 30px;
}
.stat { text-align: center; }
.stat b {
  display: block; font-size: 40px; font-weight: 800;
  color: var(--blue); line-height: 1.15;
}
.stat span { color: var(--ink-2); font-size: 16px; }

/* 协会定位那段话（2026-08-17 从 hero 里移出来的，见 index.html 的说明）。
   ★ 它在 .stats .wrap 这个 grid 里，必须 `grid-column: 1/-1` 跨满整行 ——
     不写会被当成一个格子占掉一列，把三个数字挤成两列。 */
.hero-lead {
  grid-column: 1 / -1;
  margin: 0 0 6px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  max-width: 900px;                 /* 限宽保行长，太长一行读起来累 */
  color: var(--ink-2); font-size: 17px; line-height: 1.85;
}

/* ---------------------------------------------------------------- 区块 */

.sec { padding: 52px 0; }
/* ★ 与 .stats 同理：半透明而非 --bg-soft 实色，让背景画在交替区块里也透出来，
   否则会出现「有的区块能看见画、有的完全看不见」的割裂感。 */
.sec-alt { background: rgba(244,247,250,var(--panel)); }
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
  border-bottom: 2px solid var(--line); padding-bottom: 14px;
}
.sec-head h2 {
  margin: 0; font-size: 27px; font-weight: 800; color: var(--ink);
  padding-left: 15px; border-left: 6px solid var(--green);
  line-height: 1.3;
}
.sec-head .more { font-size: 16px; color: var(--ink-2); white-space: nowrap; }
.sec-head .more:hover { color: var(--blue); }

/* ---------------------------------------------------------------- 新闻 */

.news-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; }

.news-feature img {
  width: 100%; height: 300px; object-fit: cover;
  border-radius: var(--radius);
}
.news-feature h3 { margin: 16px 0 8px; font-size: 22px; line-height: 1.45; }
.news-feature h3 a { color: var(--ink); }
.news-feature p { margin: 0; color: var(--ink-2); font-size: 16.5px; }

.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px dashed var(--line);
}
.news-list li:first-child { padding-top: 0; }
.news-list .dot { color: var(--green); flex-shrink: 0; font-size: 14px; }
.news-list .t {
  flex: 1; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.news-list .t:hover { color: var(--blue); }
.news-list .d { color: var(--ink-3); font-size: 15px; flex-shrink: 0; }

/* 通告：带公文字号 */
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-list li {
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.notice-list .no {
  display: inline-block; font-size: 14.5px; color: var(--red);
  border: 1px solid currentColor; border-radius: 4px;
  padding: 1px 8px; margin-right: 10px; font-weight: 700;
}
.notice-list a { color: var(--ink); font-weight: 600; }
.notice-list a:hover { color: var(--blue); }
.notice-list .d { color: var(--ink-3); font-size: 15px; margin-left: 10px; }

/* ---------------------------------------------------------------- 卡片 */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.card:hover { box-shadow: var(--shadow-lg); }
.card img { width: 100%; height: 190px; object-fit: cover; }
.card-body { padding: 18px 20px 22px; }
.card h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.45; }
.card h3 a { color: var(--ink); }
.card p { margin: 0; color: var(--ink-2); font-size: 16px; }
.card .meta { margin-top: 12px; color: var(--ink-3); font-size: 15px; }

/* 快捷入口 */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.quick a {
  display: block; padding: 30px 22px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line);
  text-align: center; color: var(--ink); box-shadow: var(--shadow);
}
.quick a:hover {
  text-decoration: none; border-color: var(--green);
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
}
.quick .ico { font-size: 40px; line-height: 1; margin-bottom: 12px; }
.quick b { display: block; font-size: 19px; margin-bottom: 6px; }
.quick span { color: var(--ink-2); font-size: 15.5px; }

/* ---------------------------------------------------------------- 内容页 */

.page-head {
  background: linear-gradient(100deg, var(--blue) 0%, var(--blue-mid) 100%);
  color: #fff; padding: 40px 0;
}
.page-head h1 { margin: 0 0 8px; font-size: 34px; font-weight: 800; letter-spacing: 1.5px; }
.page-head .crumb { color: rgba(255,255,255,.88); font-size: 15.5px; }
.page-head .crumb a { color: rgba(255,255,255,.88); }

.body-layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; }

.prose { font-size: 17.5px; line-height: 1.95; color: var(--ink); }
.prose h2 { font-size: 24px; margin: 34px 0 14px; color: var(--blue); }
.prose h3 { font-size: 20px; margin: 26px 0 10px; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { padding-left: 26px; margin: 0 0 18px; }
.prose li { margin-bottom: 8px; }
.prose img { border-radius: var(--radius); margin: 18px 0; }
.prose blockquote {
  margin: 20px 0; padding: 14px 20px;
  background: var(--bg-soft); border-left: 5px solid var(--green);
  color: var(--ink-2);
}

.side-box {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin-bottom: 22px;
}
.side-box h3 {
  margin: 0 0 14px; font-size: 19px;
  padding-left: 12px; border-left: 5px solid var(--green);
}

/* 表格（名单、赛程、成绩都用它） */
.tbl { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.tbl th, .tbl td {
  border: 1px solid var(--line); padding: 11px 13px; text-align: left;
}
.tbl th { background: var(--bg-soft); font-weight: 700; color: var(--ink); }
.tbl tr:nth-child(even) td { background: #fafcfe; }
.tbl caption {
  caption-side: top; text-align: left; font-weight: 700;
  font-size: 18px; padding-bottom: 10px;
}

.empty {
  padding: 46px 20px; text-align: center; color: var(--ink-3);
  background: var(--bg-soft); border-radius: var(--radius);
  font-size: 16.5px;
}

/* ---------------------------------------------------------------- 入口卡片
   培训考试栏的「模拟练习 / 在线考试」两个入口。
   ★ 用 grid + auto-fit：窄屏自动堆成一列，不用单独写手机端样式。
   ★ 主力用户 45~75 岁，按钮做大、字号不小于 16px。 */
.entry-grid {
  display: grid; gap: 18px; margin: 18px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* ★ 四个入口用的 2×2 版（signup.html）。
   auto-fit 在 820px 主栏里会排出 3 列，第 4 张卡就单独掉到第二行，
   看着像少了一张或没排完。四张卡按 2×2 摆才是对齐的。
   ★ 仍然是 auto-fit：窄屏（< 约 560px）自动堆成一列，手机端不用另写。
   ⚠ 只给 4 张卡的场合用；training.html 那两张卡走上面的默认规则（一行两列）。 */
.entry-grid.grid-2x2 {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.entry-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; background: var(--bg-soft);
}
.entry-card h3 {
  margin: 0 0 10px; font-size: 19px; color: var(--blue);
}
.entry-card p {
  margin: 0 0 16px; font-size: 15.5px; line-height: 1.85; color: var(--ink-2);
}
.entry-card .btn { font-size: 16px; padding: 10px 22px; }

/* 提示框：考务费这类「要照着做」的说明，与正文区分开 */
.notice-box {
  border: 1px solid #e0cf8a; background: #fffbe8;
  border-radius: var(--radius); padding: 16px 20px; margin: 14px 0;
  line-height: 1.85;
}

/* ---------------------------------------------------------------- 大事记时间轴
   协会大事记（history.html）与公益活动（charity.html）共用。

   ★ 竖线用 .timeline 的 ::before 画一条，节点用 .tl-item 的 ::before 点一个圆，
     不用给每条记录套额外的 DOM —— 大事记以后是要一年年往下加的，
     结构越简单，用户自己打开 HTML 加一条就越不容易加错。
   ★ 圆点靠 border 加粗形成「空心圆环」，比实心点在打印稿上更清楚。 */

.timeline { position: relative; margin: 26px 0 0; padding-left: 34px; }
.timeline::before {
  content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px;
  width: 3px; background: linear-gradient(180deg, var(--green), var(--blue-mid));
  border-radius: 2px;
}
.tl-item { position: relative; margin-bottom: 30px; }
.tl-item::before {
  content: ''; position: absolute; left: -32px; top: 6px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 4px solid var(--green); box-sizing: border-box;
}
/* 重点条目（会刊评出的年度五件大事）换红环，一眼能挑出来 */
.tl-item.tl-key::before { border-color: var(--red); }

.tl-date {
  display: inline-block; font-weight: 800; font-size: 16.5px;
  color: var(--blue); letter-spacing: .5px;
}
.tl-tag {
  display: inline-block; margin-left: 10px; padding: 2px 10px;
  font-size: 13.5px; border-radius: 20px;
  background: var(--red); color: #fff; vertical-align: 2px;
}
.tl-title { margin: 6px 0 8px; font-size: 20px; font-weight: 800; color: var(--ink); }
.tl-body { font-size: 16.8px; line-height: 1.9; color: var(--ink-2); margin: 0; }
.tl-body strong { color: var(--ink); }
.tl-src { display: block; margin-top: 8px; font-size: 14.5px; color: var(--ink-3); }
.tl-pic { margin-top: 14px; }
.tl-pic img { max-width: 420px; width: 100%; border-radius: var(--radius); display: block; }
.tl-pic figcaption { margin-top: 7px; font-size: 14.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- 风采人物
   people.html：一位人物 = 一张大卡（照片在左，简介在右，战绩表在下）。 */

.figure-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 34px; background: #fff;
}
.figure-head {
  display: grid; grid-template-columns: 250px 1fr; gap: 26px;
  padding: 24px; background: var(--bg-soft);
}
.figure-head img { width: 100%; border-radius: var(--radius); display: block; }
.figure-name { margin: 0 0 4px; font-size: 26px; font-weight: 800; color: var(--blue); }
.figure-honor {
  display: inline-block; margin-bottom: 12px; padding: 3px 12px;
  background: var(--green); color: #fff; border-radius: 20px; font-size: 14.5px;
}
.figure-meta { font-size: 16.5px; line-height: 1.95; color: var(--ink-2); margin: 0; }
.figure-body { padding: 22px 24px 26px; }
.figure-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; }
.figure-gallery figure { margin: 0; }
.figure-gallery img { width: 100%; border-radius: var(--radius); display: block; }
.figure-gallery figcaption { margin-top: 7px; font-size: 14.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- 目标数字块
   charity.html 的「计划未来 3-5 年」三个数字。 */

.goal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 22px 0 8px; }
.goal-box {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 18px; text-align: center;
}
.goal-num { font-size: 40px; font-weight: 800; color: var(--green); line-height: 1.1; }
.goal-lab { margin-top: 8px; font-size: 16.5px; color: var(--ink-2); }

/* ---------------------------------------------------------------- 会刊
   journal.html：整期会刊是一张 1000×6208 的长图，按原比例铺满正文宽即可。 */

.journal-page {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #fff;
}
.journal-page img { width: 100%; display: block; }

/* ---------------------------------------------------------------- 页脚 */

.footer { background: #14243c; color: rgba(255,255,255,.78); padding: 42px 0 24px; margin-top: 10px; }
.footer a { color: rgba(255,255,255,.78); }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 30px; }
.footer h4 { margin: 0 0 14px; color: #fff; font-size: 17.5px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 9px; font-size: 15.5px; }
.footer-brand { display: flex; gap: 14px; align-items: flex-start; }
.footer-brand img { width: 62px; height: 62px; }
.footer-brand .cn { color: #fff; font-size: 19px; font-weight: 700; }
.footer-brand .en { font-size: 12px; letter-spacing: .8px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 30px; padding-top: 18px;
  text-align: center; font-size: 15px; color: rgba(255,255,255,.62);
}

/* ---------------------------------------------------------------- 浮动提示窗
   用户 2026-08-17 要求：挂最新一条重要信息的链接，点一下直达详情。
   行为在 app.js 的 mountNotice()。 */

.float-notice {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 320px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid var(--line);
  border-top: 4px solid var(--red);          /* 红顶条 = 公告的视觉惯例 */
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px 18px 14px;
  /* 初始在右下角外面，挂上后加 .fn-in 滑入 */
  transform: translateY(20px); opacity: 0;
  transition: transform .42s cubic-bezier(.2,.7,.3,1), opacity .42s;
}
.float-notice.fn-in { transform: translateY(0); opacity: 1; }
.float-notice.fn-hide { transform: translateY(20px); opacity: 0; }

/* ★★ 关闭按钮 44×44：本站用户 45–75 岁，手指点不准小叉。
   适老化不只是字号，可点区域同样重要（这条踩过：以前有按钮只有 32px）。 */
.fn-close {
  position: absolute; top: 2px; right: 2px;
  width: 44px; height: 44px;
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-3);
}
.fn-close:hover { color: var(--red); }

.fn-tag {
  display: inline-block; margin-bottom: 8px; padding: 2px 9px;
  background: var(--red); color: #fff;
  font-size: 13.5px; font-weight: 700; border-radius: 4px;
}
.fn-title {
  display: block; padding-right: 26px;      /* 让开关闭按钮 */
  color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.62;
}
.fn-title:hover { color: var(--blue); text-decoration: none; }
.fn-no { margin-top: 6px; color: var(--red); font-size: 13.5px; }
.fn-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.fn-date { color: var(--ink-3); font-size: 14px; }
.fn-go { color: var(--blue); font-size: 15px; font-weight: 700; }
/* ★ 浮窗的窄屏与打印样式按本文件的既有约定放在下面「移动端」「打印」两个分区里，
   不写在这儿 —— 全站样式都是这么组织的（如 .stats 也分散在三处）。 */

@media (max-width: 1000px) {
  .news-layout, .body-layout { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .quick { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  :root { --fs-base: 16.5px; }

  /* ★★ 手机上换小图 + 取消 fixed：
     ① `background-attachment: fixed` 在 iOS Safari 上不生效，
        而且会把背景按「整个页面高度」缩放 —— 长页面上画被拉伸到认不出、
        滚动还卡。改 scroll 后表现正常。
     ② 1600 宽的图在手机上是白下载，换 900 宽的 -sm 版省一半流量
        （88KB → 35KB，用户群多在户外用手机流量看）。
     ③ 遮罩也调浓一点：手机屏幕小、常在室外强光下看，对比度要更保守。 */
  body {
    background:
      linear-gradient(rgba(255,255,255,.91), rgba(255,255,255,.91)),
      url(../img/bg/shenkun163-soft-sm.jpg) center top / cover no-repeat scroll,
      var(--bg);
  }

  /* ★ 浮窗在手机上改成贴底整条：右下角的小卡在窄屏会挡住正文，
     而且拇指最容易点到的是屏幕底部，整条比小卡好点。 */
  .float-notice {
    right: 10px; left: 10px; bottom: 10px; width: auto;
    padding: 14px 16px 12px;
  }

  .topbar { font-size: 13.5px; }
  .topbar .wrap > :last-child { display: none; }

  .header .wrap { padding: 12px 20px; }
  .brand img { width: 56px; height: 56px; }
  .brand-txt .cn { font-size: 21px; letter-spacing: 1px; }
  .brand-txt .en { font-size: 10.5px; }
  .header-slot { display: none; }

  /* 导航横向滚动，不塌成汉堡 —— 老人找汉堡菜单困难，横滑更直观 */
  .nav .wrap {
    flex-wrap: nowrap; overflow-x: auto; padding: 0;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .nav .wrap::-webkit-scrollbar { display: none; }
  /* 一级项与它的子项在横滑条上并排铺开 */
  .nav-item { flex-shrink: 0; display: flex; }
  .nav-item > a { padding: 0 18px; font-size: 16.5px; line-height: 48px; white-space: nowrap; }

  /* ★ 窄屏不弹下拉：横滑条上悬浮的下拉会盖住内容且触屏没有 hover。
     改成把子项**平铺进横滑条**，跟一级项并排，用浅色区分层级。
     （触屏上「hover 才出现的东西」等于不存在，这是老教训。） */
  .subnav {
    display: flex !important;
    position: static; min-width: 0;
    background: transparent; border: 0; box-shadow: none;
  }
  .subnav a {
    min-height: 48px; line-height: 48px; padding: 0 14px;
    font-size: 15px; color: rgba(255,255,255,.92);
    border-bottom: 0; border-right: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.10);
  }
  .subnav a:hover, .subnav a.on {
    background: rgba(0,0,0,.26); color: #fff;
  }

  .hero-img { height: 380px; }
  .hero h1 { font-size: 31px; letter-spacing: 1px; }
  .hero p { font-size: 17px; }
  .hero-eyebrow { font-size: 14.5px; letter-spacing: 3px; }

  /* ★ 不再写死列数（原为 repeat(2,1fr)）—— 上面 .stats .wrap 的 auto-fit
     在窄屏会自己降到 2 列。少一处写死，就少一处以后增删统计项时要同步改的地方。 */
  .stats .wrap { gap: 22px; }
  .stat b { font-size: 32px; }

  .sec { padding: 36px 0; }
  .sec-head h2 { font-size: 22px; }
  .cards { grid-template-columns: 1fr; }
  .quick { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }

  /* ★★ 新增多列版块必须同时补进这里和下面的打印分区，漏了在手机/纸上会挤成窄条。
     （袁德华项目栽过这个：新增栏宽类只加了桌面样式，手机上两条并排各剩一半宽。） */
  .figure-head { grid-template-columns: 1fr; gap: 18px; }
  /* 人物照在窄屏限宽居中，否则一张竖构图的证件照会占满整屏高 */
  .figure-head > img { max-width: 260px; margin: 0 auto; }
  .figure-gallery { grid-template-columns: 1fr; }
  .goal-grid { grid-template-columns: 1fr; }
  /* 时间轴收窄左缩进，窄屏上正文宽度比对齐更重要 */
  .timeline { padding-left: 26px; }
  .timeline::before { left: 5px; }
  .tl-item::before { left: -28px; width: 13px; height: 13px; }
  .tl-title { font-size: 18.5px; }

  .page-head h1 { font-size: 26px; }

  /* 窄屏表格横向滚动，别硬挤 */
  .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl-scroll .tbl { min-width: 560px; }
}

/* iOS 聚焦自动放大：输入框字号必须 ≥16px */
@media (max-width: 820px) {
  input, select, textarea, button { font-size: 16px; }
}

/* 触屏：hover 才出现的提示在触屏上等于不存在 */
@media (hover: none) {
  .card:hover { box-shadow: var(--shadow); }
  .quick a:hover { transform: none; }
}

/* ---------------------------------------------------------------- 打印 */

@media print {
  .topbar, .nav, .footer, .hero-btns, .burger { display: none !important; }
  /* ★★ 背景画一定要在打印时去掉：既费墨，又会让纸上的正文变糊。
     `background: none` 必须带 !important —— body 那条是三层背景的简写，
     优先级上打不过的话会印出一整页蓝底。同理 .sec-alt/.stats 的半透明底
     也要复位成白底，否则纸上是一块块灰蓝。 */
  body { font-size: 12pt; color: #000; background: none !important; }
  .sec-alt, .stats { background: #fff !important; }
  /* ★ 浮窗是屏幕上的交互元素，纸上没有意义（而且会盖住正文）。
     自检抓到过一次：把它的 print 规则「说好要放这里」却漏了加。 */
  .float-notice { display: none !important; }
  .page-head { background: none !important; color: #000; border-bottom: 2px solid #000; }
  .page-head h1, .page-head .crumb, .page-head .crumb a { color: #000; }
  .body-layout { grid-template-columns: 1fr; }
  .tbl th, .tbl td { border-color: #666; }
  .sec { padding: 12pt 0; }
  a { color: #000; text-decoration: none; }

  /* ★ 新增版块的打印规则（与上面窄屏那处配对，两边都要补）：
     人物卡与目标数字降单列；时间轴的渐变竖线在纸上印不出层次，压成实线灰；
     一条大事记不许被分页切断（切开的条目读起来像两件事）。 */
  .figure-head { grid-template-columns: 1fr; background: #fff !important; }
  .figure-gallery { grid-template-columns: repeat(2, 1fr); }
  .figure-card { border-color: #666; break-inside: avoid; }
  .goal-grid { grid-template-columns: repeat(3, 1fr); }
  .goal-box { background: #fff !important; border-color: #666; }
  .goal-num { color: #000; }
  .timeline::before { background: #666 !important; }
  .tl-item { break-inside: avoid; }
  .tl-item::before { border-color: #000 !important; }
  .tl-date, .tl-title { color: #000; }
  .tl-tag { background: #000 !important; color: #fff; }
}

/* ---------------------------------------------------------------- 培训视频
   ★ 课程列表做成一行一条的按钮，整行可点 —— 手机上比小链接好点太多。
   ★ 字号不小于 16px，行高放宽：主力用户 45~75 岁。 */
.video-list { margin: 0 0 6px; }
.video-item { border-bottom: 1px dashed var(--line); }
.video-open {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 6px; background: none; border: 0; cursor: pointer;
  text-align: left; font-size: 16.5px; color: var(--ink); font-family: inherit;
}
.video-open:hover { background: var(--bg-soft); }
.video-open.on { background: var(--bg-soft); font-weight: 700; }
.video-open .vno {
  flex: 0 0 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 50%; background: var(--green); color: #fff;
  font-size: 14.5px; font-weight: 700;
}
.video-open.on .vno { background: var(--blue); }
.video-open .vtitle { flex: 1 1 auto; line-height: 1.6; }
.video-open .vsize { flex: 0 0 auto; color: var(--ink-3); font-size: 13.5px; }

.video-player { padding: 4px 6px 16px; }
.video-player video {
  width: 100%; max-height: 62vh; background: #000;
  border-radius: var(--radius); display: block;
}
.video-player .vp-tip {
  margin-top: 8px; font-size: 14.5px; color: var(--ink-2);
}

@media (max-width: 560px) {
  .video-open { font-size: 16px; padding: 12px 4px; }
  .video-open .vsize { display: none; }   /* 窄屏先让标题显示完整 */
}

/* ---------------------------------------------------------------- 培训视频头图
   ★ 用户要求「突出培训视频的重要位置」：做一块深色横幅压住页面顶部，
     右侧列出六个单元的节数并可锚点跳转 —— 进页面第一眼就知道
     有多少课、分几个单元、从哪儿开始。
   ★ 深蓝底 + 会徽绿点缀，跟站内其它模块同一套色，不另起一套视觉。 */
.video-hero {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  background: linear-gradient(135deg, var(--blue) 0%, #0a3e8a 55%, #0084c7 100%);
  color: #fff; border-radius: var(--radius);
  padding: 26px 28px; margin: 0 0 22px;
}
.video-hero .vh-main { flex: 1 1 320px; min-width: 280px; }
.video-hero .vh-badge {
  display: inline-block; background: var(--green); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  padding: 4px 12px; border-radius: 20px; margin-bottom: 12px;
}
.video-hero h2 {
  margin: 0 0 10px; font-size: 25px; color: #fff; border: 0; padding: 0;
  line-height: 1.4;
}
.video-hero p {
  margin: 0; font-size: 16px; line-height: 1.85;
  color: rgba(255, 255, 255, .9);
}
.video-hero strong { color: var(--gold); font-size: 18px; }

/* 右侧单元格子：节数 + 单元名，可点击锚点跳转 */
.video-hero .vh-stats {
  flex: 0 1 auto; display: grid; gap: 10px;
  grid-template-columns: repeat(3, minmax(88px, 1fr));
}
.video-hero .vh-unit {
  display: block; text-align: center; text-decoration: none;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px; padding: 10px 8px; color: #fff;
  transition: background .15s;
}
.video-hero .vh-unit:hover {
  background: rgba(255, 255, 255, .26); text-decoration: none; color: #fff;
}
.video-hero .vh-unit b {
  display: block; font-size: 21px; color: var(--gold); line-height: 1.2;
}
.video-hero .vh-unit span {
  display: block; font-size: 12.5px; margin-top: 3px;
  color: rgba(255, 255, 255, .88); line-height: 1.4;
}

/* 单元标题右侧的节数标记 */
.sec-head .unit-n {
  font-size: 14px; font-weight: 400; color: var(--ink-3);
  margin-left: 10px;
}

/* 门球知识页顶部的引流卡片 —— 把人导到视频课去 */
.video-promo {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border: 2px solid var(--green); border-radius: var(--radius);
  background: #f4f9f0; padding: 18px 22px; margin: 0 0 24px;
}
.video-promo .vp-icon {
  flex: 0 0 52px; height: 52px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.video-promo .vp-body { flex: 1 1 260px; }
.video-promo .vp-body b { font-size: 18px; color: var(--blue); }
.video-promo .vp-body p {
  margin: 4px 0 0; font-size: 15.5px; color: var(--ink-2); line-height: 1.75;
}

@media (max-width: 720px) {
  .video-hero { padding: 20px; }
  .video-hero h2 { font-size: 21px; }
  .video-hero .vh-stats { grid-template-columns: repeat(3, 1fr); width: 100%; }
}