*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Thai-friendly modular scale (~1.2) */
  --fs-xs: 0.75rem;      /* 12 */
  --fs-sm: 0.8125rem;    /* 13 */
  --fs-base: 1rem;       /* 16 — body มือถือ */
  --fs-md: 1.0625rem;    /* 17 */
  --fs-lg: 1.125rem;     /* 18 */
  --fs-xl: 1.25rem;      /* 20 */
  --fs-2xl: 1.375rem;    /* 22 */
  --fs-3xl: 1.625rem;    /* 26 */
  --fs-4xl: 1.875rem;    /* 30 */

  --lh-tight: 1.35;      /* หัวข้อไทย — อย่าต่ำกว่า 1.3 */
  --lh-snug: 1.45;       /* H3 / card title */
  --lh-body: 1.8;        /* ย่อหน้าไทย */
  --lh-relaxed: 1.9;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --tracking-thai: 0.01em;
  --color-text: #3f3f46;
  --color-text-muted: #52525b;
  --color-heading: #4c1d95;
  --color-heading-soft: #5b21b6;
}

@media (min-width: 768px) {
  :root {
    --fs-xs: 0.8125rem;  /* 13 */
    --fs-sm: 0.875rem;   /* 14 */
    --fs-base: 1.0625rem;/* 17 */
    --fs-md: 1.125rem;   /* 18 */
    --fs-lg: 1.1875rem;  /* 19 */
    --fs-xl: 1.375rem;   /* 22 */
    --fs-2xl: 1.5rem;    /* 24 */
    --fs-3xl: 1.875rem;  /* 30 */
    --fs-4xl: 2.25rem;   /* 36 */
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* ตัดคำไทยตามพจนานุกรมเบราว์เซอร์ ไม่หักกลางคำสุ่มๆ */
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}

body {
  font-family: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-thai);
  background: #f0f0f0;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: break-word;
  hyphens: none;
}

h1, h2, h3, h4 {
  color: var(--color-heading);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-thai);
  word-break: keep-all;
  overflow-wrap: break-word;
  /* balance ทำให้หัวข้อไทยหักแปลก — ใช้ pretty แทน */
  text-wrap: pretty;
}

h1 {
  font-size: clamp(var(--fs-3xl), 4.2vw, var(--fs-4xl));
  line-height: var(--lh-tight);
}

h2 {
  font-size: clamp(var(--fs-2xl), 2.8vw, var(--fs-3xl));
  line-height: var(--lh-tight);
}

h3 {
  font-size: clamp(var(--fs-md), 1.6vw, var(--fs-lg));
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
}

p {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

a {
  text-decoration: none;
  color: inherit;
}

.context-link {
  color: #6d28d9;
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-decoration-color: rgba(109, 40, 217, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.context-link:hover {
  color: #b45309;
  text-decoration-color: currentColor;
}

img {
  display: block;
  max-width: 100%;
}

ul, ol {
  list-style: none;
}

button {
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

main {
  min-height: calc(100vh - 72px);
  padding: 0;
  margin: 0;
}