/* ============================================================ pm-components.css — ปุ่ม · ลิงก์เฉพาะทาง · nav · การ์ด · chip · callout ที่มา: docs/design.md §6, §7.1, §7.3, §7.5, §8.3, §8.5 ⛔ ห้ามมีค่า hex (B-1) · ⛔ ระยะทุกค่ามาจาก --s1…--s8 (§8.1) 🔴 ไม่มี component สำหรับดาว/คะแนนรีวิวในไฟล์นี้ โดยเจตนา D-4 + P-1 + M-7: มีรีวิวจริง 0 รายการ → ต้องซ่อน ไม่ใช่แสดง 0 ดาว ห้ามเพิ่ม .pm-rating / .pm-stars จนกว่าจะมีรีวิวจริง ≥ 10 รายการ ============================================================ */ /* ============================================================ 1. ปุ่ม — design.md §7.1 พื้นปุ่มหลักมีได้สีเดียวคือ --color-brand (B-2) ห้ามเป็นพื้นปุ่มหลัก: --color-accent · --color-accent-field --color-line · --color-shade ============================================================ */ .pm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s1); min-height:48px; /* §7.1 · ผ่าน F-3 (≥44px) */ padding:0 30px; /* §7.1 ระบุตรง ๆ */ border:0; border-radius:var(--radius); font-family:var(--font-body); font-size:15px; font-weight:600; line-height:1; text-decoration:none; cursor:pointer; transition:background-color var(--dur-micro) ease, border-color var(--dur-micro) ease, color var(--dur-micro) ease; } /* ปุ่มที่มีไอคอนต้องมีข้อความกำกับเสมอ ไม่ใช่ไอคอนเปล่า — §7.1 */ .pm-btn svg{ flex:none; width:20px; height:20px; stroke:currentColor; } .pm-btn--primary{ background:var(--color-brand); color:var(--color-on-night); } /* 5.20 ✅ */ .pm-btn--primary:hover{ background:var(--color-ink); color:var(--color-on-night); } /* §7.1 · on-night บน ink ✅ */ /* ⚠️ แก้ 26 ก.ย. 2026 — ต้องระบุ color ตอน hover ด้วย ไม่งั้นปุ่มที่เป็น แพ้ `a:hover` ของ pm-base.css (0,1,1) ชนะ .pm-btn--*:hover ไม่ได้ แต่ชนะ .pm-btn--* (0,1,0) → ตัวอักษรกลายเป็น brand-ink บน ink ≈2:1 (วัดจริง) รายงาน docs/report-starter-ritual-2026-09-26.md §5 · ปุ่ม