/* ธรรมโอสถ — โทนกระดาษอุ่น สงบ อ่านสบาย รองรับ dark mode */
:root {
  --bg: #faf6ee;
  --card: #fffdf8;
  --ink: #3a3226;
  --muted: #7a6f5d;
  --accent: #a4620d;
  --accent-ink: #7c4a08;
  --accent-soft: #f3e6cd;
  --line: #e8dfd0;
  --quote-bg: #f7efdf;
  --quote-border: #d9b877;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17130f;
    --card: #201b15;
    --ink: #ece3d3;
    --muted: #a89a81;
    --accent: #e0a94f;
    --accent-ink: #ecc27d;
    --accent-soft: #382c1a;
    --line: #362d21;
    --quote-bg: #251f16;
    --quote-border: #8a6b33;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Noto Sans Thai', 'Sarabun', 'Leelawadee UI', sans-serif;
  font-size: 1.1rem;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 20px 20px 48px; }

header.site { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 0 20px; }
.brand { font-size: 1.5rem; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: .01em; }
.brand span { color: var(--accent); }
.crumb { margin: 0 0 4px; }
.crumb a { color: var(--muted); text-decoration: none; font-size: .95rem; }
.crumb a:hover { color: var(--accent); }

h1 { font-size: 1.9rem; line-height: 1.45; margin: 8px 0 12px; }
h2 { font-size: 1.25rem; margin: 40px 0 8px; color: var(--accent-ink); }
p { margin: 0 0 16px; }
.lead { font-size: 1.15rem; color: var(--muted); margin-bottom: 28px; }
a { color: var(--accent); }

/* กล่องปัญหาในหน้าแรก */
.problems { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
@media (max-width: 560px) { .problems { grid-template-columns: 1fr; } }
.problem {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; text-decoration: none; color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.problem:hover { border-color: var(--accent); transform: translateY(-2px); }
.problem b { display: block; font-size: 1.15rem; margin-bottom: 4px; }
.problem small { color: var(--muted); line-height: 1.6; display: block; }
.problem .sutta { display: block; margin-top: 10px; font-size: .85rem; color: var(--accent-ink); }

/* พุทธพจน์ */
blockquote.buddha {
  margin: 28px 0; padding: 24px 28px;
  background: var(--quote-bg); border-left: 4px solid var(--quote-border);
  border-radius: 0 14px 14px 0;
  font-family: 'Noto Serif Thai', 'Sarabun', serif;
  font-size: 1.2rem; line-height: 2.05;
}
blockquote.buddha p { margin: 0 0 12px; }
blockquote.buddha p:last-of-type { margin-bottom: 0; }
blockquote.buddha cite {
  display: block; margin-top: 14px; font-style: normal; font-size: .9rem;
  font-family: 'Noto Sans Thai', sans-serif; color: var(--muted);
}

/* กล่องอ้างอิง */
aside.ref {
  margin: 40px 0 8px; padding: 18px 22px;
  background: var(--accent-soft); border-radius: 14px; font-size: .95rem; line-height: 1.8;
}
aside.ref h3 { margin: 0 0 6px; font-size: 1rem; color: var(--accent-ink); }
aside.ref p { margin: 0 0 6px; }
aside.ref a { word-break: break-all; }

/* ลิสต์ขั้นตอน/ข้อ */
ol.steps, ul.steps { padding-left: 24px; margin: 0 0 16px; }
ol.steps li, ul.steps li { margin-bottom: 12px; }
ol.steps b, ul.steps b { color: var(--accent-ink); }

/* ลิงก์ไปทุกข์เรื่องอื่น */
nav.more { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
nav.more h2 { margin-top: 0; font-size: 1.05rem; }
nav.more a { display: inline-block; margin: 4px 10px 4px 0; padding: 6px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; color: var(--ink); font-size: .95rem; }
nav.more a:hover { border-color: var(--accent); }

/* กล่องความน่าเชื่อถือหน้าแรก */
.trust { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 24px; margin: 32px 0; font-size: 1rem; }
.trust h2 { margin-top: 0; }
.trust ul { padding-left: 22px; margin: 0; }
.trust li { margin-bottom: 8px; }

footer.site {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .9rem; line-height: 1.8;
}
footer.site a { color: var(--muted); }