/* คู่มือผังสี (zoneguide.js) — ใช้บน tools.html (ชุดสี style.css + ui.css) */
.zg-intro{margin:0 auto 18px;max-width:68ch;text-align:center;color:var(--sub);font-size:14.5px}
.zg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.zg-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:13px 15px}
.zg-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:6px}
.zg-head b{display:block;color:var(--navy);font-size:15px;line-height:1.4}
.zg-law{display:block;font-size:12px;color:var(--muted)}
.zg-sw{flex:none;width:30px;height:22px;border-radius:5px;border:2px solid;margin-top:2px}
.zg-card p{margin:4px 0 0;font-size:13.5px;color:var(--ink);line-height:1.6}
.zg-k{display:block;font-size:11.5px;font-weight:700;color:var(--sub)}
.zg-warn{margin:14px 0 0;background:#FFF4E5;color:var(--amber);border-radius:10px;padding:10px 13px;font-size:13px;line-height:1.65}
.zg-check{margin-top:18px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.zg-check h3{margin:0 0 8px;font-size:17px;color:var(--navy)}
.zg-nomap{margin:0 0 12px;font-size:13px;color:var(--sub);line-height:1.7}
.zg-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.zg-links li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:14px;border-bottom:1px solid var(--border);padding-bottom:7px}
.zg-links a{color:var(--blue);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.zg-links a:hover{text-decoration:underline}
.zg-links span{color:var(--muted);font-size:12.5px}
.zg-draft{color:var(--amber)}
.zg-note{margin:10px 0 0;font-size:12.5px;color:var(--sub)}
.zg-cta{
  display:inline-block;margin-top:12px;text-decoration:none;
  background:var(--green);color:#fff;font-weight:700;font-size:15px;padding:12px 20px;border-radius:12px;
}
.zg-links a:focus-visible,.zg-cta:focus-visible{outline:3px solid var(--blue);outline-offset:2px}