/* =====================================================================
   utils.css — "ยูทิลิตี้ล้วน" ของทั้งระบบ (หน้าเว็บ + หลังบ้าน + แลนดิ้ง)
   ในไฟล์นี้ต้องมีแต่คลาสช่วยจัดระยะ/ตัวอักษร/สี/เลย์เอาต์เท่านั้น
   คอมโพเนนต์ (ปุ่ม/ป้าย/ฟอร์ม/แบ่งหน้า) อยู่ที่ base.css ที่เดียว ห้ามซ้ำที่นี่
   โหลดในทุก layout ต่อจาก app.css เพื่อให้ "ชื่อคลาสชุดเดียวกัน" ใช้ได้ทุกที่
   สีอ้าง var(--c-*) เสมอ → หลังบ้านที่ override ตัวแปรเองก็ได้โทนถูกต้อง
   ===================================================================== */

/* ---------- ระยะห่าง ---------- */
.u-m0  { margin: 0; }
.u-mt1 { margin-top: var(--sp-1); }
.u-mt2 { margin-top: var(--sp-2); }
.u-mt3 { margin-top: var(--sp-3); }
.u-mt4 { margin-top: var(--sp-4); }
.u-mt6 { margin-top: var(--sp-6); }
.u-mb0 { margin-bottom: 0; }
.u-mb2 { margin-bottom: var(--sp-2); }
.u-mb3 { margin-bottom: var(--sp-3); }
.u-mb4 { margin-bottom: var(--sp-4); }
.u-mb6 { margin-bottom: var(--sp-6); }

/* ---------- ตัวอักษร ---------- */
.u-xs  { font-size: var(--fs-xs); }
.u-sm  { font-size: var(--fs-sm); }
.u-lg  { font-size: var(--fs-lg); }
.u-bold   { font-weight: 700; }
.u-bolder { font-weight: 800; }
.u-num  { font-variant-numeric: tabular-nums; }
.u-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.u-upper { text-transform: uppercase; }
.u-nowrap { white-space: nowrap; }
.u-wrap   { white-space: normal; }
.u-text-left   { text-align: left; }
.u-text-right  { text-align: right; }
.u-text-center { text-align: center; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- สี ---------- */
.u-muted   { color: var(--c-text-muted); }
.u-primary { color: var(--c-primary); }
.u-accent  { color: var(--c-accent); }
.u-success { color: var(--c-success); }
.u-warning { color: var(--c-warning); }
.u-danger  { color: var(--c-danger); }

/* ---------- เลย์เอาต์ ---------- */
.u-block  { display: block; }
/* อีโมจิในบรรทัด (ไอคอนประเภทหวย ฯลฯ) */
.u-emoji { flex: none; font-size: 1.5rem; line-height: 1; }
.u-emoji--lg { font-size: 1.9rem; }
.u-row    { display: flex; align-items: center; gap: var(--sp-3); }
.u-row--wrap    { flex-wrap: wrap; }
.u-row--between { justify-content: space-between; }
.u-row--center  { justify-content: center; }
.u-row--end     { justify-content: flex-end; }
.u-row--top     { align-items: flex-start; }
.u-row--bottom  { align-items: flex-end; }
.u-gap2 { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.u-gap2.u-row--center { justify-content: center; }
.u-spacer { flex: 1; min-width: 0; }
.u-divider { height: 1px; background: var(--c-border); border: 0; margin: var(--sp-4) 0; }
.u-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.is-hidden { display: none !important; }

.u-mt0 { margin-top: 0; }
.u-pt0 { padding-top: 0; }
.u-pb2 { padding-bottom: var(--sp-2); }
.u-relaxed { line-height: 1.75; }

/* ---------- ความกว้างช่องกรอกขนาดเล็ก (ตารางหลังบ้าน) ---------- */
.u-w80  { width: 80px; }
.u-w90  { width: 90px; }
.u-w110 { width: 110px; }
.u-w180 { max-width: 180px; }
.u-w200 { max-width: 200px; }
.u-w220 { max-width: 220px; }
.u-w240 { max-width: 240px; }
.u-w260 { max-width: 260px; }
.u-w280 { max-width: 280px; }
.u-w420 { max-width: 420px; }
/* ช่องกินพื้นที่หลายคอลัมน์ในกริดฟอร์ม */
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

/* ---------- รูปย่อในตาราง/การ์ด ---------- */
.mini-thumb {
  border-radius: var(--radius-sm); flex: none;
  background-color: color-mix(in srgb, var(--c-text) 8%, var(--c-surface));
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.mini-thumb--wide { width: 64px; aspect-ratio: 16 / 9; }
.mini-thumb--square { width: 48px; height: 48px; }