/* 皮克敏小教室 — 共用樣式 */
:root{
  --green:#3fa34d; --green-dark:#1f3d2b; --green-soft:#e8f5e9;
  --accent:#ff6b4a; --bg:#f7faf5; --card:#fff; --ink:#23302a;
  --muted:#6b7d72; --line:#e2ece4; --shadow:0 4px 18px rgba(31,61,43,.10);
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,"PingFang TC","Noto Sans TC",sans-serif;
     color:var(--ink);background:var(--bg);line-height:1.7;}
a{color:var(--green);}
.wrap{max-width:640px;margin:0 auto;padding:0 16px 90px;}

/* header */
header{background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);
       color:#fff;padding:18px 16px;text-align:center;}
header .nav{max-width:640px;margin:0 auto 10px;display:flex;justify-content:space-between;font-size:.85rem;}
header .nav a{color:#fff;text-decoration:none;font-weight:700;opacity:.95;}
header h1{margin:0;font-size:1.4rem;letter-spacing:.5px;}
header p{margin:6px 0 0;font-size:.85rem;opacity:.9;}

/* 卡牆 */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
@media(max-width:480px){ .cards{grid-template-columns:1fr;} }
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;
      padding:16px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:.15s;}
.card:active{transform:scale(.98);}
.card .emoji{font-size:1.8rem;}
.card h3{margin:8px 0 4px;font-size:1.05rem;color:var(--green-dark);}
.card p{margin:0;font-size:.85rem;color:var(--muted);}
.card .go{margin-top:10px;font-size:.82rem;color:var(--green);font-weight:700;}

/* 文章 */
article{background:var(--card);border:1px solid var(--line);border-radius:16px;
        padding:20px 18px;margin-top:18px;box-shadow:var(--shadow);}
article h2{margin:0 0 4px;font-size:1.3rem;color:var(--green-dark);}
article .lead{color:var(--muted);font-size:.9rem;margin:0 0 16px;}
article h3{margin:22px 0 8px;font-size:1.08rem;color:var(--green);
           border-left:4px solid var(--green);padding-left:9px;}
article p{margin:8px 0;font-size:.95rem;}
article ol,article ul{margin:8px 0;padding-left:22px;}
article li{margin:6px 0;font-size:.95rem;}
.codebox{background:#1f2d25;color:#ffd54a;border-radius:10px;padding:12px 14px;
         font-family:ui-monospace,Menlo,monospace;font-size:.9rem;word-break:break-all;margin:10px 0;}
.codebox .ex{display:block;color:#cfe5d4;font-size:.82rem;margin-top:6px;}
.note{background:#fff6e6;border:1px solid #f0e0bf;border-radius:10px;padding:12px 14px;margin:14px 0;
      font-size:.9rem;color:#7a5800;}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.sw{width:84px;height:32px;border-radius:7px;display:grid;place-items:center;
    font-family:ui-monospace,Menlo,monospace;font-size:.78rem;font-weight:700;}
.src{font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);
     margin-top:20px;padding-top:12px;}
.src a{font-weight:700;}

/* CTA 回地圖 / FB */
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.cta a{flex:1;min-width:140px;text-align:center;text-decoration:none;font-weight:700;
       font-size:.9rem;padding:12px;border-radius:12px;}
.cta .map{background:var(--green);color:#fff;}
.cta .fb{background:#1877f2;color:#fff;}

footer{text-align:center;font-size:.75rem;color:var(--muted);padding:18px 16px;}

/* ---- 視覺化資訊元件（2026-07-13 加）---- */
.vz{margin:14px 0;}
.vz-cards{display:flex;gap:10px;flex-wrap:wrap;}
.vz-card{flex:1;min-width:100px;background:#fff;border:1.5px solid #e2ece4;border-radius:14px;
  padding:14px 10px;text-align:center;}
.vz-card .big{font-size:2rem;line-height:1.2;}
.vz-card .num{font-size:1.9rem;font-weight:800;line-height:1.2;color:#2e7d32;}
.vz-card .lb{font-size:.78rem;color:#6b7d72;margin-top:4px;line-height:1.4;}
.vz-bar{display:flex;align-items:center;gap:8px;margin:6px 0;}
.vz-bar .tag{flex:0 0 92px;font-size:.85rem;font-weight:700;text-align:right;}
.vz-bar .bar{height:26px;border-radius:6px;display:flex;align-items:center;
  padding-left:8px;color:#fff;font-size:.78rem;font-weight:700;white-space:nowrap;min-width:fit-content;}
.vz-vs{display:flex;gap:12px;align-items:stretch;}
.vz-vs .side{flex:1;border-radius:16px;padding:16px 12px;text-align:center;}
.vz-vs .win{background:#e8f5e9;border:2px solid #3fa34d;}
.vz-vs .lose{background:#f5f5f5;border:2px solid #ddd;}
.vz-vs .pts{font-size:2rem;font-weight:800;line-height:1.15;}
.vz-vs .win .pts{color:#2e7d32;}
.vz-vs .lose .pts{color:#9e9e9e;}
.vz-vs .cap{font-size:.8rem;color:#6b7d72;margin-top:4px;line-height:1.5;}
.vz-steps{display:flex;gap:4px;align-items:flex-end;}
.vz-steps .st{flex:1;border-radius:8px 8px 0 0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;color:#fff;font-size:.68rem;font-weight:700;
  padding:6px 2px;text-align:center;line-height:1.3;}
.vz-tier{border-radius:12px;padding:12px 14px;margin:8px 0;border-left:6px solid;}
.vz-tier .t{font-weight:800;margin-bottom:4px;}
.vz-tier.hot{background:#ffebee;border-color:#e53935;}
.vz-tier.warm{background:#fff8e1;border-color:#f9a825;}
.vz-tier.cool{background:#e8f5e9;border-color:#43a047;}