@charset "UTF-8";

/* 🚫 บล็อกพฤติกรรมลากรีเฟรชหน้าจอของบราวเซอร์มือถืออย่างเด็ดขาด */
html, body {
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
  font-size: 16px;
  /* 📱 แก้ปัญหา Mobile Viewport ดัน Bottom Nav จมหาย */
  height: 100dvh;
  overflow: hidden; 
}

/* ♿ ควบคุม Touch Target ทุกปุ่มและดรอปดาวน์ให้กดง่าย */
input, select, button, option {
  font-size: 16px !important;
  min-height: 44px; 
}

/* 💎 แอนิเมชันการเปลี่ยนผ่านฉาก SPA */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.25s ease-out forwards;
}

/* ⏳ SKELETON SHIMMER LOADER EFFECT MECHANISM */
.shimmer-placeholder {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmerLoading 1.5s infinite linear;
}
@keyframes shimmerLoading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 📝 ข้อจำกัดและรูปแบบความสูงของกล่องข้อความ Memo ย่อย */
textarea.auto-expand {
  max-height: 200px;
  overflow-y: auto;
  resize: none;
}

/* ปรับแต่ง Scrollbar ซ่อนเพื่อความคลีนสายตาบนสมาร์ตโฟน */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}