*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--bg:#f4f1df;--bg2:#dce8cf;--card:#fffdf6;--line:#b5c99a;--ink:#294936;--muted:#66785d;--blue:#1d4ed8;--orange:#e46f44}
body{font-family:'Sarabun',sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
.hero{padding:24px 18px 22px;text-align:center;background:linear-gradient(180deg,var(--bg2),var(--bg));border-bottom:1px solid var(--line)}
.back{display:block;width:max-content;margin:0 auto 13px;color:var(--blue);font-weight:700;text-decoration:none}
.badge{display:inline-block;padding:5px 13px;border-radius:99px;background:#fff8e8;border:1px solid #e6a23c;color:var(--blue);font:600 13px 'Prompt',sans-serif}
h1{margin-top:10px;color:var(--blue);font:800 27px/1.3 'Prompt',sans-serif}
.hero p{margin-top:5px;color:var(--muted);font-size:16px;font-weight:600}
main{max-width:960px;margin:auto}
.notice{margin:16px;padding:11px 14px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--ink);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;padding:0 16px 30px}
.card{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.pic{position:relative;aspect-ratio:3/4;overflow:hidden;background:#fff}
.pic img{width:100%;height:100%;display:block;object-fit:cover}
.pic:after{content:'';position:absolute;inset:0;background:var(--wm) repeat;pointer-events:none}
.name{padding:10px 12px 12px;font:600 14px/1.4 'Prompt',sans-serif;color:var(--ink)}
footer{text-align:center;padding:5px 16px 28px;color:var(--muted);font-size:13px}
@media(max-width:520px){.grid{grid-template-columns:1fr 1fr;gap:9px;padding-left:9px;padding-right:9px}.name{font-size:12px;padding:8px}.notice{font-size:13px;margin:12px 9px}.pic{aspect-ratio:3/4}}