@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Noto+Serif+Thai:wght@400;500;600;700&display=swap");

:root { --paper:#fffaf3; --ink:#3e302b; --muted:#76665d; --coral:#d77763; --line:#eadbce; }
* { box-sizing:border-box; }
html { background:#eee2d5; }
body { margin:0; color:var(--ink); font-family:"IBM Plex Sans Thai",system-ui,sans-serif; }
.outline-hero { padding:44px max(24px,calc((100vw - 820px)/2)); color:white; background:linear-gradient(135deg,#cf7462,#a65e54); }
.outline-hero a { color:white; text-decoration:none; font-size:.84rem; opacity:.9; }
.outline-hero p { margin:38px 0 4px; font-size:.76rem; font-weight:700; letter-spacing:.12em; opacity:.82; }
.outline-hero h1 { margin:0; font-family:"Noto Serif Thai",serif; font-size:clamp(2.4rem,8vw,4.8rem); line-height:1.12; letter-spacing:-.05em; }
.outline-hero span { display:block; margin-top:16px; font-size:.86rem; opacity:.86; }
.outline-doc { width:min(100%,880px); min-height:60vh; margin:0 auto; padding:44px 30px 80px; background:var(--paper); }
.outline-doc h1 { display:none; }
.outline-doc h2 { margin:52px 0 14px; padding-top:8px; border-top:1px solid var(--line); font-family:"Noto Serif Thai",serif; font-size:clamp(1.55rem,4vw,2.1rem); }
.outline-doc h2:first-of-type { margin-top:0; border-top:0; }
.outline-doc p { margin:0 0 16px; line-height:1.8; }
.outline-doc .story-line { padding:18px 22px; border-left:4px solid var(--coral); border-radius:0 14px 14px 0; color:#684a40; background:#f7e4dc; font-family:"Noto Serif Thai",serif; font-weight:600; }
.table-wrap { margin:20px -6px; overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:white; }
table { width:100%; min-width:680px; border-collapse:collapse; }
th,td { padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:.82rem; line-height:1.55; }
th { position:sticky; top:0; color:white; background:#9c6f62; font-weight:700; }
td:first-child { width:56px; color:var(--coral); font-weight:700; }
tr:last-child td { border-bottom:0; }
footer { padding:26px; text-align:center; background:#3e302b; }
footer a { color:#f5d6ca; text-decoration:none; font-weight:600; }
.loading { color:var(--muted); }
@media (max-width:600px) {
  .outline-hero { padding:26px 22px 34px; }
  .outline-hero p { margin-top:28px; }
  .outline-doc { padding:30px 20px 60px; }
  .outline-doc h2 { margin-top:40px; }
  .table-wrap { margin-left:0; margin-right:0; }
}