:root{
  --forest:#174a35; --leaf:#2f7d52; --mint:#dcefe3; --sage:#f3f8f1;
  --earth:#8a6f45; --ink:#183327; --muted:#60756b; --white:#fff; --line:#d6e5da;
  --paper:#ffffff; --plastic:#f4c531; --metal:#2b6cb0; --glass:#2f9e44; --other:#805ad5;
  --shadow:0 18px 45px rgba(23,74,53,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;font-family:Arial,"Microsoft JhengHei","PingFang TC",sans-serif;background:var(--sage);color:var(--ink);line-height:1.7}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin-top:0}
/* header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.navbar{width:min(1180px,calc(100% - 40px));min-height:72px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--forest)}
.brand-mark{width:36px;height:36px;display:inline-grid;place-items:center;border-radius:50%;background:var(--forest);color:#fff}
.nav-menu{margin:0;padding:0;display:flex;gap:20px;list-style:none;color:var(--muted);font-size:14px;font-weight:700}
.nav-menu a:hover{color:var(--leaf)}
.nav-cta{min-height:46px;display:inline-flex;align-items:center;border-radius:8px;padding:10px 16px;background:var(--leaf);color:#fff;font-weight:800;border:1px solid transparent;cursor:pointer}
.nav-cta:hover{background:var(--forest)}
.nav-toggle{width:42px;height:42px;display:none;border:1px solid var(--line);border-radius:8px;background:#fff;padding:9px;cursor:pointer}
.nav-toggle span{display:block;height:2px;margin:5px 0;background:var(--forest);border-radius:999px}
/* hero */
.hero{min-height:560px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(23,74,53,.94),rgba(23,74,53,.7),rgba(47,125,82,.45)),radial-gradient(circle at 85% 20%,rgba(244,197,49,.25),transparent 45%);color:#fff}
.hero-inner{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:64px 0;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.eyebrow{margin:0 0 12px;color:#cdebd2;font-size:14px;font-weight:800}
h1{font-size:52px;line-height:1.15;margin-bottom:18px}
.hero-text{max-width:620px;margin-bottom:26px;color:rgba(255,255,255,.9);font-size:18px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.button{min-height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:12px 22px;font-weight:800;cursor:pointer;border:1px solid transparent;transition:transform .2s}
.button:hover{transform:translateY(-2px)}
.button.primary{background:var(--leaf);color:#fff;box-shadow:0 12px 24px rgba(47,125,82,.25)}
.button.primary:hover{background:var(--forest)}
.button.ghost{border-color:rgba(255,255,255,.65);color:#fff;background:rgba(255,255,255,.12)}
/* 五桶插畫 */
.bins{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.bin{width:96px;text-align:center}
.bin-lid{height:14px;border-radius:10px 10px 3px 3px;margin-bottom:2px}
.bin-body{height:110px;border-radius:6px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:24px;box-shadow:var(--shadow)}
.bin-label{font-size:13px;font-weight:800;margin-top:6px;color:#fff}
.bin.paper .bin-lid{background:#c9c9c9}.bin.paper .bin-body{background:#fff;color:#333;border:2px solid #c9c9c9}
.bin.plastic .bin-lid{background:#d9a817}.bin.plastic .bin-body{background:var(--plastic);color:#4a3300}
.bin.metal .bin-lid{background:#1d4f7e}.bin.metal .bin-body{background:var(--metal)}
.bin.glass .bin-lid{background:#227332}.bin.glass .bin-body{background:var(--glass)}
.bin.other .bin-lid{background:#5c3ea9}.bin.other .bin-body{background:var(--other)}
/* sections */
.section{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:80px 0}
.section-heading{max-width:720px;margin:0 auto 34px;text-align:center}
.section-heading h2{color:var(--forest);font-size:36px;margin-bottom:12px}
.section-heading p{color:var(--muted)}
/* 分類卡 */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.guide-card{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;box-shadow:var(--shadow)}
.guide-head{padding:12px 16px;font-weight:900;display:flex;align-items:center;gap:10px}
.guide-head .dot{width:18px;height:18px;border-radius:4px;border:1px solid rgba(0,0,0,.25)}
.guide-body{padding:16px;font-size:14px}
.guide-body h3{font-size:16px;color:var(--forest);margin-bottom:6px}
.guide-body ul{margin:0 0 10px;padding-left:18px}
.guide-body .no li{list-style:square}
.guide-tip{border-top:1px dashed var(--line);padding-top:10px;color:var(--muted);font-size:13px}
.guide-paper .guide-head{color:#333}.guide-paper .dot{background:#fff}
.guide-plastic .guide-head{color:#4a3300}.guide-plastic .dot{background:var(--plastic)}
.guide-metal .guide-head{background:var(--metal);color:#fff}.guide-metal .dot{background:var(--metal)}
.guide-glass .guide-head{background:var(--glass);color:#fff}.guide-glass .dot{background:var(--glass)}
.guide-other .guide-head{background:var(--other);color:#fff}.guide-other .dot{background:var(--other)}
/* 四碼查詢 */
.codes-section{background:var(--forest);color:#fff}
.codes-inner{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:76px 0;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.codes-inner h2{font-size:34px;margin-bottom:12px}
.codes-inner p{opacity:.88}
.code-explain{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.chip{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);font-weight:800;font-size:14px;cursor:pointer}
.chip:hover{background:rgba(255,255,255,.28)}
.code-card{background:#fff;color:var(--ink);border-radius:8px;padding:26px;box-shadow:var(--shadow)}
.code-input{width:100%;border:2px solid var(--line);border-radius:8px;padding:14px 16px;font:inherit;font-size:18px;font-weight:800;color:var(--forest)}
.code-input:focus{outline:3px solid #b59326;outline-offset:2px;border-color:var(--leaf)}
.code-result{margin-top:16px;min-height:120px}
.code-result .cr-head{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:900;color:var(--forest)}
.code-result .cr-bin{width:44px;height:44px;border-radius:8px;display:inline-grid;place-items:center;color:#fff;font-size:12px;font-weight:900}
.code-result p{font-size:14px;color:var(--muted);margin:6px 0}
.code-result .cr-code{font-size:14px;color:var(--ink)}
/* 數據 */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat-item{min-height:130px;padding:22px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:var(--shadow)}
.stat-item strong{display:block;font-size:32px;color:var(--forest);line-height:1.2}
.stat-item span{color:var(--muted);font-size:14px}
/* 活動 */
.event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.event-card{border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:var(--shadow);padding:20px}
.event-date{width:56px;height:56px;border-radius:8px;background:var(--forest);color:#fff;display:grid;place-items:center;font-weight:900;margin-bottom:12px;line-height:1.1;text-align:center}
.event-card h3{font-size:18px;color:var(--forest);margin-bottom:6px}
.event-card p{font-size:14px;color:var(--muted)}
.event-card .button{margin-top:12px;padding:8px 16px;min-height:38px}
/* 清單 */
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check-item{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px;font-size:15px}
.check-item input{width:18px;height:18px;margin-top:2px;accent-color:var(--leaf)}
.progress{margin-top:20px}
.progress-bar{height:12px;border-radius:999px;background:var(--mint);overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--leaf);transition:width .3s}
.progress p{font-size:14px;color:var(--muted)}
/* CTA band */
.cta-band{background:linear-gradient(90deg,rgba(23,74,53,.94),rgba(47,125,82,.8));color:#fff}
.cta-inner{width:min(960px,calc(100% - 40px));margin:0 auto;padding:70px 0;text-align:center}
.cta-inner h2{font-size:32px;margin-bottom:14px}
.cta-inner p{opacity:.88;margin-bottom:22px}
/* footer */
.site-footer{background:#102c20;color:rgba(255,255,255,.82)}
.footer-grid{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:56px 0 20px;display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:32px;font-size:14px}
.site-footer h3{color:#fff;font-size:16px;margin-bottom:10px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:8px}
.site-footer a:hover{color:#cdebd2}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding:18px 20px;text-align:center}
@media(max-width:860px){
 .nav-toggle{display:block}
 .nav-menu{position:fixed;inset:72px 0 auto 0;display:none;flex-direction:column;background:#fff;padding:14px 20px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
 .nav-menu.is-open{display:flex}
 .nav-menu a{display:block;padding:12px 0}
 .nav-cta{display:none}
 .hero-inner,.codes-inner{grid-template-columns:1fr}
 .stats-grid{grid-template-columns:1fr 1fr}
 .event-grid{grid-template-columns:1fr}
 .checklist{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr 1fr}
 .contact-layout{grid-template-columns:1fr}
 h1{font-size:34px}
}

/* 成品站補強 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.site-header.is-scrolled{box-shadow:0 6px 24px rgba(23,74,53,.15)}
.nav-menu a[aria-current="location"]{color:var(--forest)}
.contact-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:32px;align-items:start}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px;box-shadow:var(--shadow)}
.contact-card h3{color:var(--forest);margin-bottom:8px}
.contact-card a{color:var(--leaf);font-weight:700}
.contact-form label{display:block;font-weight:800;color:var(--forest);font-size:14px;margin:14px 0 6px}
.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font:inherit;background:#fff;color:var(--ink)}
.contact-form input:focus,.contact-form textarea:focus{outline:3px solid #b59326;outline-offset:2px;border-color:var(--leaf)}
.contact-form .button{margin-top:18px}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.photo-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}
.photo-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.photo-card figcaption{padding:12px 16px}
.photo-cap{font-weight:800;color:var(--forest);font-size:15px;margin-bottom:4px}
.photo-meta{color:#5c6660;font-size:13px}
.photo-empty{background:#fff;border:2px dashed var(--line);border-radius:8px;padding:32px;text-align:center;color:#5c6660}
.photo-empty a{color:var(--leaf);font-weight:700}
@media(max-width:860px){.photo-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.photo-grid{grid-template-columns:1fr}}

/* 照片說明 + 留言板 */
.photo-desc{margin:6px 0 0;font-size:13px;line-height:1.6;color:#4a5a52}
.board-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:28px;margin-top:32px;align-items:start}
.msg-form{background:#fff;border:1px solid var(--line,#e2e8e4);border-radius:16px;padding:24px;box-shadow:0 8px 24px rgba(23,74,53,.05);position:sticky;top:96px}
.msg-form-title{margin:0 0 16px;font-size:17px;color:var(--forest,#174a35)}
.msg-form input,.msg-form textarea{width:100%;box-sizing:border-box;border:1px solid #dfe6e1;border-radius:10px;padding:11px 13px;font:inherit;background:#fbfdfb;color:#1d2b24;margin-bottom:10px}
.msg-form input:focus,.msg-form textarea:focus{outline:3px solid #b59326;outline-offset:1px;border-color:#b59326}
.msg-form textarea{resize:vertical;min-height:124px}
.msg-form-foot{display:flex;justify-content:space-between;font-size:12px;color:#8b988f;margin:-2px 0 12px}
.msg-form .button{width:100%;margin-top:2px}
.msg-form .button:disabled{opacity:.6;cursor:default}
.msg-note{margin:12px 0 0;font-size:12px;line-height:1.6;color:#8b988f}
.msg-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.msg-panel{min-width:0}
.msg-panel-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 12px}
.msg-panel-head h3{margin:0;font-size:16px;color:var(--forest,#174a35)}
.msg-total{font-size:12.5px;color:#8b988f}
.msg-list{display:flex;flex-direction:column;gap:10px}
.msg-card{display:flex;gap:12px;background:#fff;border:1px solid #e6ece8;border-radius:14px;padding:14px 16px;transition:border-color .2s,box-shadow .2s}
.msg-card:hover{border-color:#cfe0d5;box-shadow:0 6px 18px rgba(23,74,53,.06)}
.msg-avatar{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--mint,#dcefe3);color:var(--leaf,#2f7d52);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.msg-main{flex:1;min-width:0}
.msg-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.msg-name{font-weight:700;font-size:14px;color:#22352b}
.msg-time{font-size:12px;color:#96a29a}
.msg-body{margin:6px 0 0;color:#2a3a31;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}
.msg-actions{display:flex;gap:14px;margin-top:8px}
.like-btn{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;padding:2px 4px;border-radius:6px;color:#8b988f;font:inherit;font-size:12.5px;cursor:pointer;transition:color .2s}
.like-btn:hover,.like-btn.on{color:#c2554a}
.like-btn:focus-visible{outline:3px solid #b59326;outline-offset:1px}
.msg-empty{display:flex;flex-direction:column;gap:4px;background:#f7faf8;border:1px dashed #d7e2db;border-radius:14px;padding:28px 22px;color:#7d8b83;font-size:13.5px;line-height:1.7;text-align:center}
.msg-empty strong{color:#3c4f45;font-size:14.5px}
.msg-skeleton{height:76px;border-radius:14px;background:linear-gradient(90deg,#eef3ef 25%,#f7faf8 37%,#eef3ef 63%);background-size:400% 100%;animation:shimmer 1.2s infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#1d3b2b;color:#fff;font-size:14px;padding:12px 20px;border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:#8f3b32}
@media (prefers-reduced-motion:reduce){.msg-skeleton{animation:none;background:#eef3ef}.toast{transition:none}}
@media (max-width:860px){.board-layout{grid-template-columns:1fr;gap:18px}.msg-form{position:static;top:auto}}