/* ==========================================================================
   legal.css — หน้าเงื่อนไขการใช้งาน / นโยบายความเป็นส่วนตัว
   ใช้พาเลตต์เดียวกับหน้าหลัก แต่จัดแบบเอกสารอ่านยาว: คอลัมน์แคบ บรรทัดห่าง
   ========================================================================== */

:root {
  /* ต้องตรงกับ public/style.css เป๊ะ — ดูเหตุผลเรื่องความอิ่มของสีที่ไฟล์นั้น */
  --ground:    oklch(90.4% 0.042 80);
  --paper:     oklch(97.5% 0.012 85);
  --paper-2:   oklch(94.5% 0.018 85);
  --ink:       oklch(24.6% 0.017 326);
  --ink-2:     oklch(37% 0.02 330);
  --ink-3:     oklch(51% 0.02 330);
  --vermilion: oklch(58.7% 0.204 31);
  /* แดงระดับหมึก — ใช้กับตัวหนังสือ/ลิงก์ ส่วน --vermilion ใช้ได้แค่เป็นพื้นหรือเส้น */
  --vermilion-ink: oklch(46% 0.17 29);
  --grape:     oklch(47.1% 0.172 359);
  --magenta:   oklch(66.6% 0.078 8);
  --magenta-lo: oklch(50% 0.12 6);
  --sun:       oklch(75.9% 0.153 73);
  --line:      color-mix(in srgb, var(--ink) 16%, var(--paper));
  --radius:    13px;
  /* ภาษางานพิมพ์ชุดเดียวกับหน้าหลัก (public/style.css): เส้นหมึกหนาเท่ากัน
     เงาแข็งทึบ ไม่มีเงาฟุ้ง — เอกสารกฎหมายเป็นหน้าที่ผู้ใช้กดออกไปจากหน้าแรก
     ถ้าหน้าตาคนละภาษา จะรู้สึกเหมือนโดนพาออกไปเว็บอื่น */
  --ink-w:     2px;
  --drop-1:    3px 3px 0 var(--ink);
  --drop-2:    5px 5px 0 var(--ink);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    repeating-linear-gradient(-22deg,
      color-mix(in oklch, var(--grape) 8%, transparent) 0 3px,
      transparent 3px 22px),
    var(--ground);
  color: var(--ink);
  font-family: 'Anuphan', 'Segoe UI', Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

/* ข้อความยาวต้องอยู่บนการ์ดขาว ไม่ใช่บนพื้นชมพูตรง ๆ
   บนชมพูมีแค่ --ink ที่ผ่าน 4.5:1 ส่วน --ink-2/--ink-3 ที่ใช้กับหัวข้อย่อย
   และหมายเหตุตัวเล็กในหน้านี้ไม่ผ่าน อ่านเอกสารยาว ๆ ไม่ไหว */
.wrap {
  max-width: 44rem;            /* ~75 ตัวอักษรต่อบรรทัด อ่านสบายสุด */
  margin: 2.5rem auto;
  padding: 2.5rem 1.75rem 3.5rem;
  background: var(--paper);
  border: var(--ink-w) solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--drop-2);
}
@media (max-width: 640px) {
  .wrap { margin: 0 auto; border-radius: 0; border-width: 0; box-shadow: none; }
}

/* ---------- หัวเอกสาร ---------- */
.doc-head {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
}

.back {
  display: inline-block;
  margin-bottom: 1.5rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: var(--sun);
  border: var(--ink-w) solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.back:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.back:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }

h1 {
  font-family: 'Mali', 'Segoe UI', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

.updated {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-3);
}

/* ---------- เนื้อหา ---------- */
h2 {
  font-family: 'Mali', 'Segoe UI', sans-serif;
  font-size: 1.15rem;
  margin: 2.5rem 0 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}
h2:first-of-type { border-top: none; padding-top: 0; }

h3 {
  font-size: 1rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--ink-2);
}

p { margin: 0 0 1rem; }

ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; }
li { margin-bottom: 0.5rem; }

strong { font-weight: 600; }

/* ส้มสดบนกระดาษได้แค่ 3.13:1 ต่ำกว่าเกณฑ์ 4.5:1 ของตัวหนังสือปกติ
   เอกสารกฎหมายเป็นหน้าที่ต้องอ่านยาวและมีลิงก์เยอะ ยิ่งต้องผ่าน
   --vermilion-ink เป็นเฉดเดียวกันแต่เข้มพอ (4.65:1) */
a { color: var(--vermilion-ink); }

/* ---------- กล่องเน้น ---------- */
.callout {
  background: color-mix(in srgb, var(--sun) 16%, white);
  border: var(--ink-w) solid var(--ink);
  border-left-width: 7px;
  border-left-color: var(--sun);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.callout--warn {
  border-left-color: var(--vermilion);
  background: color-mix(in srgb, var(--vermilion) 12%, white);
}
.callout--ok {
  border-left-color: var(--grape);
  background: color-mix(in srgb, var(--grape) 10%, white);
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- ตาราง ---------- */
.table-scroll { overflow-x: auto; margin: 1rem 0 1.5rem; }

table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--paper);
  border: var(--ink-w) solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  background: var(--sun);
  font-weight: 700;
  border-bottom: var(--ink-w) solid var(--ink);
}
tr:last-child td { border-bottom: none; }

/* ---------- ท้ายเอกสาร ---------- */
.doc-foot {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
  font-size: 0.87rem;
  color: var(--ink-3);
}

/* จอเล็ก */
@media (max-width: 480px) {
  body { font-size: 15px; }
  .wrap { padding: 1.5rem 1rem 3rem; }
}