/* ป้าผ่อง ส่องเลข
   โทน: เขียวเข้ม + กระดาษสว่าง · ตั้งใจอยู่คนละขั้วกับเว็บหวย (แดง-ทอง-กระพริบ)
   ห้ามมีอนิเมชันวนซ้ำ ห้ามกะพริบ · ผู้ใช้อายุมากกว่าค่าเฉลี่ย ตัวหนังสือใหญ่เป็นค่าเริ่มต้น */

/* ขนาดตัวอักษร 3 ระดับ — ทุกอย่างวัดเป็น rem จึงขยายตามทั้งหน้า */
html { font-size: 112.5% }                      /* กลาง = 18px */
html[data-size="s"] { font-size: 100% }         /* เล็ก  = 16px */
html[data-size="l"] { font-size: 128% }         /* ใหญ่  = 20.5px */

:root {
  --paper:   #fafaf7;
  --surface: #ffffff;
  --ink:     #191e1b;
  --muted:   #4b554f;
  --accent:  #1f5c48;
  --accent-soft: #edf4f0;
  --on-accent: #ffffff;
  --line:    #e2e4dd;
  --radius:  14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #121614;
    --surface: #1a201d;
    --ink:     #edefea;
    --muted:   #a8b2ac;
    --accent:  #7cc9a7;
    --accent-soft: #1c2723;
    --on-accent: #0b100e;
    --line:    #2b332e;
  }
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", "Sarabun", sans-serif;
  font-size: 1rem;
  line-height: 1.8;
}
.wrap { max-width: 40rem; margin: 0 auto; padding: 0 1.15rem }

/* ── หัวเว็บลอย ── */
.site-head {
  position: sticky; top: 0; z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; gap: .6rem;
  min-height: 58px;
}
.brand { display: flex; align-items: center; gap: .5rem; margin-right: auto;
  text-decoration: none; color: var(--ink) }
.brand-name { font-weight: 700; font-size: .95rem; line-height: 1.2; white-space: nowrap }

/* วงกลมคาแรคเตอร์ป้าผ่อง — วันไหนมีรูปจริง เปลี่ยนเป็น <img class="avatar"> ได้เลย */
.avatar {
  width: 2rem; height: 2rem; flex: none;
  border-radius: 50%; object-fit: cover;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-weight: 700; font-size: .95rem;
}

/* ปุ่มปรับขนาดตัวอักษร */
.fontsize { display: flex; align-items: center; gap: .25rem }
.fontsize button {
  min-width: 2.1rem; height: 2.1rem; padding: 0;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--line); border-radius: 9px;
  font-family: inherit; font-weight: 700; cursor: pointer; line-height: 1;
}
.fontsize button:nth-child(1) { font-size: .8rem }
.fontsize button:nth-child(2) { font-size: .95rem }
.fontsize button:nth-child(3) { font-size: 1.15rem }
.fontsize button[aria-pressed="true"] {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}

main { padding: 1.75rem 0 1rem }

h1 { font-size: 1.65rem; line-height: 1.45; margin: .25rem 0 1.15rem; letter-spacing: -.01em }
h2 { font-size: 1.2rem; line-height: 1.5; margin: 2.5rem 0 .7rem }
h3 { font-size: 1.02rem; margin: 1.6rem 0 .35rem }
p  { margin: 0 0 1.1rem }
.lead { color: var(--muted) }
a { color: var(--accent); text-underline-offset: .18em }

/* กล่องตัวอย่าง — ทำหน้าที่เป็น "ภาพ" ของหน้าแรก */
.demo {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin: 0 0 1.6rem;
}
.demo .q   { color: var(--muted); font-size: .92rem; margin: 0 0 .1rem }
.demo .a   { font-size: 1.3rem; font-weight: 700; margin: 0 0 .45rem; line-height: 1.4 }
.demo .a b { color: var(--accent); font-size: 1.9rem; vertical-align: -.04em }
.demo .why { margin: 0; font-size: .97rem; color: var(--muted) }

/* รายการแบบเส้นคั่น ไม่ใช่การ์ดเรียงเท่ากัน */
.rows { list-style: none; padding: 0; margin: 0 0 1.6rem; border-top: 1px solid var(--line) }
.rows li { padding: .95rem 0; border-bottom: 1px solid var(--line) }
.rows strong { display: block; margin-bottom: .05rem }
.rows span { color: var(--muted); font-size: .97rem }
.rows .soon { display: block; color: var(--ink); font-weight: 600; font-size: 1rem; margin-bottom: .05rem }
/* เลขรอง — ต้องเบากว่าเลขหลักชัดเจน ไม่งั้นคนอ่านนึกว่าเท่ากัน */
.demo .a .second { font-size: .95rem; font-weight: 600; color: var(--muted); margin-left: .35rem }

.cta {
  display: inline-block; min-height: 52px; padding: .8rem 1.7rem;
  background: var(--accent); color: var(--on-accent);
  text-decoration: none; font-weight: 700; font-size: 1rem;
  border-radius: 999px;
}
.cta:hover { filter: brightness(1.08) }
.cta:active { transform: translateY(1px) }

.crumb { font-size: .92rem; color: var(--muted); margin: 0 0 .9rem }
.crumb a { color: var(--muted) }

.note { background: var(--accent-soft); border-radius: var(--radius);
  padding: .95rem 1.2rem; margin: 0 0 1.1rem }
.note p:last-child { margin-bottom: 0 }

footer { border-top: 1px solid var(--line); margin-top: 2.75rem; padding: 1.15rem 0 2.5rem }
footer p { font-size: .92rem; color: var(--muted); margin: 0 }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px }

@media (min-width: 768px) {
  main { padding: 2.75rem 0 1rem }
  h1 { font-size: 2.1rem }
  h2 { font-size: 1.35rem }
  .brand-name { font-size: 1.02rem }
  .demo .a b { font-size: 2.1rem }
}
@media (prefers-reduced-motion: reduce) {
  .cta:active { transform: none }
}