/* myclover · readable type layer
   เนื้อหาหลักใช้ฟอนต์ระบบแบบหน้าตอบของ AI: ใหญ่ ชัด น้ำหนักปกติ และ contrast สูง
   โหลดเป็น stylesheet สุดท้าย เพื่อครอบ typography ของหน้าที่สร้างคนละช่วงเวลา */

:root{
  --ink:15 15 15;
  --muted:49 49 49;
  --paper:252 252 250;
  --mc-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Thai",Tahoma,Arial,sans-serif;
}

html{
  font-size:18px;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}

body,
button,input,select,textarea{
  font-family:var(--mc-font)!important;
  font-synthesis:none;
}

body{
  font-size:1rem!important;
  font-weight:400;
  line-height:1.8!important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:auto!important;
}

/* เลิกใช้ display font กับข้อความที่ต้องอ่านจริง ให้ทั้งเว็บคุ้นตาเหมือนคุยกับ AI */
h1,h2,h3,h4,h5,h6,
.disp,.mono,.eyebrow,.tag,.ptag,.lv,.cls,.role,.chip,.btn,.go,.nb{
  font-family:var(--mc-font)!important;
}

p,li,dd,dt,blockquote{
  font-size:1rem!important;
  line-height:1.82!important;
  font-weight:400;
}

small,.small,.sm,.sub,.lead,.tx,.quiet,.hint,.meta,.wtsm,.wtmeta,.kb,.foot,footer,
label,input,select,textarea,button{
  font-size:max(.92rem,16px)!important;
  line-height:1.7!important;
}

b,strong,h1,h2,h3,h4,h5,h6{
  font-weight:650!important;
}

/* สีรองเดิมหลายหน้าอ่อนเกินไป ตัวแปรข้างบนทำให้ข้อความบนพื้นสว่างเกือบดำทั้งหมด */
.sub,.lead,.tx,.quiet,.hint,.meta,.foot,footer{
  opacity:1!important;
}

/* ส่วนพื้นมืดยังคงใช้ขาว แต่ยก contrast ให้พออ่านยาวได้ */
.head p,.finish p,.nextup p,.invite p,.invite .sub,.invite .oc p,
.bar .ttl,.enc-body,.phase p,.reveal-box p,.aw p,.secret p{
  color:rgb(255 255 255/.9)!important;
}

/* Builder's Lab ใช้ชื่อคลาส .head เหมือนหัวบทเรียน แต่พื้นจริงเป็นกระดาษสว่าง */
#doc .head p{color:rgb(var(--ink))!important}

body.pro{
  --ink:#f7f8fb!important;
  --mut:#bdc9dc!important;
}
body.life{
  --ink:#171717!important;
  --mut:#594a3f!important;
}

body.pro p,body.pro li,body.pro small{color:var(--ink)}
body.life p,body.life li,body.life small{color:var(--ink)}
body.pro .role,body.pro .hint,body.pro .party-step p,body.pro .fieldnote p{color:var(--mut)!important}
body.life .role,body.life .hint{color:var(--mut)!important}

/* คอลัมน์อ่านไม่กว้างเกินไปในหน้าบทความ */
.tx,.lead,.quiet,.phase>p,.reveal-box p{
  max-width:72ch;
}

@media(min-width:900px){
  html{font-size:19px}
}

@media(max-width:520px){
  html{font-size:18px}
  p,li,dd,dt,blockquote{line-height:1.78!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
}