/* related-links.css — สไตล์บล็อกลิงก์เกี่ยวข้อง (ใยแมงมุม)
   ปรับ --rl-accent ให้เข้ากับธีมแต่ละ tool ได้ตามใจ */
.related-links{
  --rl-accent:#d4af37;            /* ทอง (default) */
  --rl-bg:rgba(255,255,255,.04);
  --rl-border:rgba(255,255,255,.12);
  --rl-text:#e8e8ea;
  --rl-muted:#9aa0a6;
  max-width:820px;margin:2.5rem auto 0;padding:1.25rem 1.4rem;
  background:var(--rl-bg);border:1px solid var(--rl-border);
  border-radius:16px;font-family:inherit;color:var(--rl-text);line-height:1.7;
}
.related-links .rl-h{
  font-size:1.05rem;margin:0 0 .9rem;font-weight:700;color:var(--rl-accent);
}
.related-links .rl-group{margin-bottom:.9rem;}
.related-links .rl-lbl{
  display:block;font-size:.8rem;color:var(--rl-muted);
  text-transform:none;margin-bottom:.4rem;letter-spacing:.02em;
}
.related-links .rl-list{
  list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem;
}
.related-links .rl-list li a{
  display:inline-block;padding:.35rem .7rem;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--rl-border);
  color:var(--rl-text);text-decoration:none;font-size:.9rem;transition:.15s;
}
.related-links .rl-list li a:hover{
  border-color:var(--rl-accent);color:var(--rl-accent);background:rgba(212,175,55,.08);
}
.related-links .rl-cta{
  display:inline-block;margin-top:.4rem;padding:.6rem 1.1rem;border-radius:12px;
  background:var(--rl-accent);color:#1a1a1a;font-weight:700;text-decoration:none;
}
.related-links .rl-cta:hover{filter:brightness(1.08);}

/* hub (สารบัญในหน้า tool) — grid เลขถี่ๆ */
.related-links.rl-hub .rl-index{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:.4rem;
}
.related-links.rl-hub .rl-index li a{
  display:block;text-align:center;padding:.4rem 0;border-radius:8px;
  background:rgba(255,255,255,.05);border:1px solid var(--rl-border);
  color:var(--rl-text);text-decoration:none;font-size:.9rem;
}
.related-links.rl-hub .rl-index li a:hover{border-color:var(--rl-accent);color:var(--rl-accent);}

@media (max-width:600px){
  .related-links{margin-top:2rem;padding:1rem;border-radius:12px;}
}
