/* base.css — ฟอนต์ สี และของที่ใช้ร่วมกัน (v2: โทนอุ่น + เขียวเข้มสีเดียว + ดำอมเขียว)
   เปลี่ยนธีมได้ที่ตัวแปรใน :root */
@font-face{font-family:Brico;src:url(../fonts/Bricolage.ttf);font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:Plex;src:url(../fonts/IBMPlexSansThai-Light.ttf);font-weight:300;font-display:swap}
@font-face{font-family:Plex;src:url(../fonts/IBMPlexSansThai-Regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url(../fonts/IBMPlexSansThai-Medium.ttf);font-weight:500;font-display:swap}
@font-face{font-family:Plex;src:url(../fonts/IBMPlexSansThai-SemiBold.ttf);font-weight:600;font-display:swap}
@font-face{font-family:Plex;src:url(../fonts/IBMPlexSansThai-Bold.ttf);font-weight:700;font-display:swap}
:root{
  --bg:#EEEAE2; --bg2:#E5E0D6; --card:#FBFAF7; --line:rgba(22,24,20,.09); --line2:rgba(22,24,20,.16);
  --ink:#151713; --ink2:#4A4C46; --mute:#8B8A82; --mute2:#B3B1A8;
  --g:#1D4A38; --g2:#2B6650; --gt:#E1EBE4; --gl:#C4DCCB; --dk:#161915; --dk2:#22261F;
  --bad:#A4492C; --badt:#F3E3DA;
  --f-disp:Brico,Plex,system-ui,sans-serif; --f-body:Plex,system-ui,sans-serif;
  --r-s:10px; --r-m:16px; --r-l:24px; --gut:clamp(18px,3.4vw,48px); --max:1360px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --sh:0 1px 0 rgba(22,24,20,.03),0 10px 30px -18px rgba(22,24,20,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;color:var(--ink);background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.num,.fd{font-family:var(--f-disp);font-variant-numeric:tabular-nums}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.demo-tag{position:fixed;left:12px;bottom:12px;z-index:90;font-size:11px;padding:3px 10px;border-radius:99px;background:rgba(21,23,19,.72);color:#F4F1EA;letter-spacing:.02em;pointer-events:none}
.toast-wrap{position:fixed;right:20px;top:20px;z-index:120;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:min(380px,calc(100vw - 40px))}
.toast{pointer-events:auto;display:flex;gap:12px;align-items:flex-start;padding:14px 18px 14px 14px;border-radius:16px;background:var(--dk);color:#EDEBE4;box-shadow:0 24px 50px -16px rgba(0,0,0,.45);animation:tin .55s var(--ease) both;font-size:14px;line-height:1.5}
.toast .ic{color:var(--dk);background:var(--gl);border-radius:50%;padding:5px;width:28px;height:28px;stroke-width:2;margin-top:0}
.toast b{display:block;font-weight:600;color:#fff}
.toast.out{animation:tout .4s ease both}
@keyframes tin{from{opacity:0;transform:translateY(-14px) scale(.97)}}
@keyframes tout{to{opacity:0;transform:translateX(30px)}}
@keyframes up{from{opacity:0;transform:translateY(14px)}}
.noanim *{animation:none!important;transition:none!important}