/* 致谢页专用样式（2026-10-27）
   全部规则都限定在 body[data-tp="thanks"] 下，避免影响其他页面。
   响应式：2K/4K 用 vw 驱动排版；窄屏单列。 */

/* ── 一起做 ─────────────────────────────────────── */
body[data-tp="thanks"] .join{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;
}
body[data-tp="thanks"] .jcard{
  background:#fff;border:1px solid var(--bd);border-radius:14px;
  padding:20px 18px;box-shadow:var(--shadow-s);
}
body[data-tp="thanks"] .jcard b{display:block;font-size:15px;color:var(--ink);margin-bottom:8px}
body[data-tp="thanks"] .jcard p{font-size:13.5px;color:var(--mid);line-height:1.9}

/* 联系方式：抖音优先，邮箱兜底 */
body[data-tp="thanks"] .reach{
  margin-top:22px;padding:20px 22px;background:#fff;border:1px solid var(--bd);
  border-radius:14px;box-shadow:var(--shadow-s);
}
body[data-tp="thanks"] .reach > b{display:block;font-size:15px;color:var(--ink);margin-bottom:10px}
body[data-tp="thanks"] .reach li b,
body[data-tp="thanks"] .reach .fine b{display:inline;font-size:inherit;color:var(--ink)}
body[data-tp="thanks"] .reach ol{margin:0;padding-left:20px;font-size:13.5px;line-height:1.95;color:var(--mid)}
body[data-tp="thanks"] .reach li{margin-bottom:6px}
body[data-tp="thanks"] .reach a{color:var(--accent2);text-decoration:none;border-bottom:1px solid rgba(222,91,51,.35)}
body[data-tp="thanks"] .reach .fine{font-size:12px;color:var(--mid);margin-top:10px}

/* ── 致谢名录空态 ───────────────────────────────── */
body[data-tp="thanks"] .who{
  margin-top:22px;border:1px dashed #D7D0C1;border-radius:16px;padding:22px 20px;background:#FBF9F4;
}
body[data-tp="thanks"] .who-empty b{display:block;font-size:15px;color:var(--ink);margin-bottom:6px}
body[data-tp="thanks"] .who-empty p{font-size:13.5px;color:var(--mid);line-height:1.9;max-width:52em}
body[data-tp="thanks"] .who-skel{margin-top:16px;display:flex;flex-direction:column;gap:12px;opacity:.5}
body[data-tp="thanks"] .who-skel .row{display:flex;align-items:center;gap:12px}
body[data-tp="thanks"] .who-skel .dot{width:30px;height:30px;border-radius:50%;background:#EDE7DA;flex:0 0 30px}
body[data-tp="thanks"] .who-skel .bar{height:12px;border-radius:6px;background:#EDE7DA;width:60%}
body[data-tp="thanks"] .who-skel .bar.short{width:38%}

/* 第三方标记：不用仿制 logo，用文字方块（避免"logo 不对"） */
body[data-tp="thanks"] .tmono{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:10px;font-size:13px;font-weight:700;letter-spacing:.02em;
}
body[data-tp="thanks"] .tmono.ds{background:#4D6BFE;color:#fff}
body[data-tp="thanks"] .tmono.bl{background:#FF6A00;color:#fff}

/* 打赏块：没有插画时不要留空列 */
body[data-tp="thanks"] .tpay{grid-template-columns:1fr}

/* ── 窄屏 ───────────────────────────────────────── */
@media (max-width:767px){
  body[data-tp="thanks"] .join{grid-template-columns:1fr}
  body[data-tp="thanks"] .who{padding:18px 16px}
}

/* ── 2K ─────────────────────────────────────────── */
@media (min-width:1600px){
  body[data-tp="thanks"] .join{gap:16px}
  body[data-tp="thanks"] .jcard{padding:22px 20px}
  body[data-tp="thanks"] .jcard b{font-size:16.5px}
  body[data-tp="thanks"] .jcard p{font-size:15px}
  body[data-tp="thanks"] .reach{padding:22px 24px}
  body[data-tp="thanks"] .reach > b{font-size:16.5px}
  body[data-tp="thanks"] .reach ol{font-size:15px}
  body[data-tp="thanks"] .who-empty b{font-size:16.5px}
  body[data-tp="thanks"] .who-empty p{font-size:15px}
}

/* ── 1920 以上：按视口等比（2560≈20px，3840≈24px 正文） ── */
@media (min-width:1920px){
  body[data-tp="thanks"] .sect{
    max-width:min(2200px, 62vw);padding:72px 36px;
  }
  body[data-tp="thanks"] .sect .lede{
    font-size:calc(10px + 0.28vw);line-height:1.95;max-width:56em;padding-left:0;
  }
  body[data-tp="thanks"] .sect>.subh{font-size:calc(16px + 0.45vw)}
  body[data-tp="thanks"] .sect .tnote{font-size:calc(9px + 0.24vw);max-width:64em}

  body[data-tp="thanks"] .join{gap:calc(12px + 0.5vw)}
  body[data-tp="thanks"] .jcard{padding:calc(18px + 0.6vw) calc(16px + 0.5vw)}
  body[data-tp="thanks"] .jcard b{font-size:calc(13px + 0.34vw)}
  body[data-tp="thanks"] .jcard p{font-size:calc(10px + 0.26vw)}

  body[data-tp="thanks"] .reach{padding:calc(18px + 0.6vw) calc(18px + 0.6vw)}
  body[data-tp="thanks"] .reach > b{font-size:calc(13px + 0.34vw)}
  body[data-tp="thanks"] .reach ol{font-size:calc(10px + 0.26vw);max-width:60em}
  body[data-tp="thanks"] .reach .fine{font-size:calc(9px + 0.22vw)}

  body[data-tp="thanks"] .who{padding:calc(20px + 0.5vw)}
  body[data-tp="thanks"] .who-empty b{font-size:calc(13px + 0.34vw)}
  body[data-tp="thanks"] .who-empty p{font-size:calc(10px + 0.26vw)}

  body[data-tp="thanks"] .tgrid{gap:calc(12px + 0.5vw)}
  body[data-tp="thanks"] .tcard{padding:calc(18px + 0.6vw) calc(16px + 0.5vw)}
  body[data-tp="thanks"] .tcard h3{font-size:calc(14px + 0.38vw)}
  body[data-tp="thanks"] .tcard p{font-size:calc(10px + 0.26vw)}
  body[data-tp="thanks"] .tmono{width:calc(44px + 0.6vw);height:calc(44px + 0.6vw);font-size:calc(13px + 0.2vw)}

  body[data-tp="thanks"] .tpay-txt p{font-size:calc(10px + 0.26vw);max-width:60em}
  body[data-tp="thanks"] .tpay h3{font-size:calc(14px + 0.38vw)}
}

/* tlogo-fix：.tlogo 在 style.css 里是固定 44x44，而 2K 档我把 .tmono 放大到 44+0.6vw，
   子元素撑大会溢出容器、盖住下面的标题。容器改成随内容自适应，并给标题留出间距。 */
body[data-tp="thanks"] .tcard .tlogo{
  width:auto;height:auto;min-width:44px;min-height:44px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
body[data-tp="thanks"] .tcard .tlogo img{display:block;width:44px;height:44px}
body[data-tp="thanks"] .tcard{gap:11px}
body[data-tp="thanks"] .tcard h3{margin:0;line-height:1.35}
body[data-tp="thanks"] .tmono{line-height:1}
@media (min-width:1920px){
  body[data-tp="thanks"] .tcard .tlogo img{width:calc(44px + 0.6vw);height:calc(44px + 0.6vw)}
}