/* domerch — ส่วนเสริมนอกเหนือ Tailwind (CDN) */ body { font-feature-settings: "kern"; } /* Design Studio: canvas mount ต้องมีความสูงคงที่ก่อน JS engine (Fabric.js/Konva.js) เข้ามาแทนที่ */ #design-canvas-mount { touch-action: none; } /* scrollbar บาง ๆ สำหรับ filter chip แถวแนวนอนในหน้า Catalog */ .chip-scroll::-webkit-scrollbar { height: 4px; } .chip-scroll::-webkit-scrollbar-thumb { background: rgba(29, 30, 10, 0.15); border-radius: 999px; } /* FAQ accordion: ซ่อนสามเหลี่ยมของ

ให้ครบทุกเบราว์เซอร์ `list-none` ของ Tailwind พอสำหรับ Chrome/Firefox แต่ Safari ยังวาดจาก pseudo-element ตัวนี้อยู่ ผลคือมีลูกศรสองอันซ้อนกัน (ของเบราว์เซอร์ + ไอคอน chevron ของเรา) เฉพาะบน Safari/iOS */ summary::-webkit-details-marker { display: none; } /* ป๊อปอัพแจ้งเตือน (flash ใน base.html) ต้องเป็น keyframes เพราะกล่องพวกนี้ถูกเซิร์ฟเวอร์เรนเดอร์มาพร้อมหน้า ไม่ได้ถูก JS ใส่ทีหลัง — transition อย่างเดียวจะไม่มีสถานะ "ก่อนเข้า" ให้เริ่ม กล่องจะโผล่มาเฉยๆ ไม่มีจังหวะเข้า */ @keyframes toast-in { from { opacity: 0; transform: translateY(-0.5rem) scale(0.98); } to { opacity: 1; transform: none; } } .toast { animation: toast-in 180ms ease-out both; } /* ขาออกกลับกัน ใช้ transition เพราะต้องเริ่มจากตำแหน่งที่กล่องอยู่ ณ ตอนที่ถูกกดปิด */ .toast[data-leaving] { animation: none; opacity: 0; transform: translateX(0.75rem); transition: opacity 160ms ease-in, transform 160ms ease-in; } /* เครื่องที่ตั้งค่าลดการเคลื่อนไหวไว้ ให้ขึ้นและหายทันที — ตัวจับเวลาฝั่ง JS ไม่ได้รอ transitionend กล่องจึงยังถูกลบตามเวลาเดิมทุกอย่าง แค่ไม่มีอนิเมชัน */ @media (prefers-reduced-motion: reduce) { .toast, .toast[data-leaving] { animation: none; transition: none; } } /* ตัวบอกสถานะ "กำลังโหลด" ของเกาะ React ทุกหน้า — คู่กับ frontend/src/lib/loading.tsx ที่นี่มีเฉพาะ @keyframes กับบรรทัด animation ที่อ้างถึงมัน ส่วนขนาด สี และเลย์เอาต์ อยู่ในคอมโพเนนต์ตามปกติ — keyframes เป็นสิ่งที่ Tailwind utility เขียนไม่ได้จริงๆ จึงเป็นเคสของไฟล์นี้ ต้นฉบับของคอมโพเนนต์เรนเดอร์