/* 鏡罪｜宗教詐騙防範網站 共用樣式 */
:root{
  --bg:#FAF8F3; --surface:#FFFFFF; --surface-2:#F3F0E8;
  --ink:#23211D; --ink-soft:#5C574E; --ink-faint:#8C8578;
  --gold:#B98A2E; --gold-soft:#EFE3C8; --line:#E2DCCD;
  --red:#A5332A; --red-soft:#F5E3E0; --green:#4A6B4F;
  --shadow:0 1px 2px rgba(35,33,29,.05),0 8px 24px rgba(35,33,29,.06);
  --radius:14px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#171613; --surface:#201E1A; --surface-2:#282520;
    --ink:#EDE8DD; --ink-soft:#B5AE9E; --ink-faint:#847D6E;
    --gold:#D9A441; --gold-soft:#332B18; --line:#3A362D;
    --red:#E08072; --red-soft:#33211E;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1100px;margin:0 auto;padding:0 1.25rem}
.narrow{max-width:760px}
a{color:var(--gold);text-underline-offset:3px}
h1,h2,h3{line-height:1.35;text-wrap:balance;margin:0 0 .6rem}
h1{font-size:clamp(1.8rem,4.5vw,2.6rem)}
h2{font-size:clamp(1.3rem,3vw,1.75rem);margin-top:2.5rem}
h3{font-size:1.1rem;margin-top:1.6rem}
p{margin:0 0 1rem}
/* nav */
nav.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;padding-top:.6rem;padding-bottom:.6rem}
.brand{font-weight:800;margin-right:auto;text-decoration:none;color:var(--ink);letter-spacing:.02em}
.brand span{color:var(--gold)}
nav.top a.nl{font-size:.88rem;color:var(--ink-soft);text-decoration:none;padding:.35rem .7rem;border-radius:999px;white-space:nowrap}
nav.top a.nl:hover{background:var(--surface-2);color:var(--ink)}
nav.top a.nl[aria-current="page"]{background:var(--gold-soft);color:var(--gold);font-weight:700}
/* hero + sections */
header.hero{padding:3.5rem 0 2.5rem;border-bottom:1px solid var(--line)}
.eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 .8rem}
.lede{font-size:1.08rem;color:var(--ink-soft);max-width:62ch}
section{padding:2.4rem 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:none}
/* cards */
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;box-shadow:var(--shadow)}
a.card{text-decoration:none;color:inherit;display:block;transition:transform .15s ease}
a.card:hover{transform:translateY(-3px)}
.card h3{margin-top:0}
.card .meta{font-size:.82rem;color:var(--ink-faint)}
.tint{background:var(--surface-2)}
.callout{background:var(--gold-soft);border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.2rem 0}
.warn{background:var(--red-soft);border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.2rem 0}
.warn strong{color:var(--red)}
.pull{font-size:1.15rem;font-weight:700;line-height:1.6;margin:1.5rem 0;padding-left:1rem;border-left:3px solid var(--gold)}
/* table */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);margin:1rem 0}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.92rem}
th{background:var(--surface-2);text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink-soft);font-size:.84rem;letter-spacing:.03em}
td{padding:.7rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
.no{color:var(--red);font-weight:700}
.yes{color:var(--green);font-weight:700}
/* controls */
.btn{display:inline-block;background:var(--gold);color:#fff;border:none;border-radius:999px;
  padding:.6rem 1.3rem;font-size:.95rem;font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--gold);border:1.5px solid var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.5rem 0 1rem}
.chip{font-size:.85rem;padding:.35rem .85rem;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);cursor:pointer;font-family:inherit}
.chip[aria-pressed="true"]{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:700}
input[type=search],select{font-family:inherit;font-size:.95rem;padding:.6rem .9rem;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);color:var(--ink);width:100%}
label.fl{display:block;font-size:.8rem;color:var(--ink-faint);margin-bottom:.3rem;font-weight:700;letter-spacing:.04em}
/* case list */
.case{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.25rem;box-shadow:var(--shadow)}
.case h3{margin:0 0 .35rem;font-size:1.02rem}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0}
.tag{font-size:.75rem;padding:.15rem .6rem;border-radius:999px;background:var(--surface-2);color:var(--ink-soft)}
.tag.t-type{background:var(--gold-soft);color:var(--gold);font-weight:700}
.tag.t-sex{background:var(--red-soft);color:var(--red);font-weight:700}
.lesson{margin-top:.7rem;padding-top:.7rem;border-top:1px dashed var(--line);font-size:.88rem;color:var(--ink-soft)}
.lesson b{color:var(--gold)}
.amt{font-variant-numeric:tabular-nums;font-weight:700}
/* footer */
footer{background:var(--surface-2);border-top:1px solid var(--line);padding:2rem 0;margin-top:2rem}
.help-bar{display:flex;flex-wrap:wrap;gap:.6rem;margin:.8rem 0}
.help-bar a{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;
  font-size:.88rem;text-decoration:none;color:var(--ink);font-weight:700}
footer small{color:var(--ink-faint);font-size:.8rem;display:block;margin-top:.8rem;line-height:1.7}
ul.tight{margin:.3rem 0 1rem;padding-left:1.3rem}
ul.tight li{margin-bottom:.4rem}
ul.tight li::marker{color:var(--gold)}
.hidden{display:none!important}
@media (max-width:600px){
  section{padding:1.8rem 0}
  header.hero{padding:2.4rem 0 1.8rem}
}