/* AIDailyTH · บทความ (/articles · /articles/<slug> · ส่วน "บทความล่าสุด" หน้าแรก) · โหลดต่อจาก site.css (+ member.css ในหน้าบทความ)
   ต้นแบบที่อนุมัติ: data/drafts/site/2026-10-02_member-v2/member.css ส่วน "บทความ"
   เปลี่ยนชื่อจากต้นแบบ: .prose → .art-prose · .prompt → .art-code (site.css มี .prose/.note ของหน้าอื่นอยู่แล้ว)
   ห้าม style="" (CSP) · แก้ไฟล์นี้แล้วเพิ่มเลข ?v= ใน build_articles.py (V_CSS) + index.html แล้วรัน build ใหม่ */

/* ค่าสำรองสำหรับหน้าแรก (ไม่มี member.css) · :where = ไม่ทับค่าของ member.css (รวมค่าจอเล็ก) */
:where(:root) {
  --f-head: var(--font-head); --f-body: var(--font-body);
  --t-xs: 13px; --t-sm: 15px; --t-md: 17px; --t-lg: 20px;
}

/* สถานะผู้ชม: แสดงเฉพาะส่วนที่ตรงกับ guest/member (articles.js สลับคลาสที่ body) */
.is-guest .only-member, .is-member .only-guest { display: none !important; }
.head-guest { display: flex; align-items: center; gap: var(--s2); }

/* ---------- การ์ดบทความ (คลัง · ที่เกี่ยวข้อง · หน้าแรก) ---------- */
.art-tools { margin-bottom: var(--s6); }
.filters .n { margin-left: 6px; opacity: .55; }
.load-more { display: flex; justify-content: center; margin-top: var(--s6); }
.art-empty { padding: var(--s7) 0; text-align: center; color: var(--faint); }
.featured { display: grid; grid-template-columns: 1.25fr 1fr; overflow: hidden; margin-bottom: var(--s6); transition: border-color .2s; color: inherit; text-decoration: none; }
.featured:hover { border-color: var(--line-strong); }
.featured .img { background: var(--surface-2); }
.featured .img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.featured .body { padding: var(--s7) var(--s6); display: flex; flex-direction: column; gap: var(--s3); }
.featured h2 { font-size: 30px; line-height: 1.35; }
.featured p { font-size: var(--t-md); margin: 0; }
.featured .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: auto; padding-top: var(--s4); font-size: var(--t-sm); color: var(--faint); }
.arts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s4); }
.arts.arts-4 { grid-template-columns: repeat(4, 1fr); }
.art { position: relative; display: flex; flex-direction: column; overflow: hidden; transition: border-color .2s, transform .2s; }
.art:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.art a { color: inherit; text-decoration: none; }
.art > .only-member { display: contents; }
.art .thumb { display: block; aspect-ratio: 1200 / 630; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.art .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.art .body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); flex: 1; }
.art .cat { font-size: 12px; color: var(--accent-text); letter-spacing: .04em; }
.art h3 { font-size: var(--t-md); line-height: 1.5; margin: 0; }
.art h3 a::after { content: ""; position: absolute; inset: 0; }
.art p { margin: 0; font-size: var(--t-sm); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art .meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.art .save { position: absolute; right: var(--s3); top: var(--s3); z-index: 1; }
.lockhint { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); white-space: nowrap; }
.lockhint svg { width: 13px; height: 13px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.readprog { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; }
.readprog .bar { width: 48px; height: 4px; }
.done-tag { color: var(--accent-text); }

/* ส่วนบทความล่าสุดในหน้าแรก (ไม่มี member.css) */
.home-arts .list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.home-arts .art .meta { justify-content: flex-start; gap: var(--s3); }

/* ---------- หน้าอ่าน ---------- */
.reading { max-width: 720px; margin: 0 auto; }
.crumb { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: var(--t-xs); color: var(--faint); }
.crumb a:hover { color: var(--text); }
.reading h1 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.3; margin-top: var(--s4); }
.reading .dek { margin-top: var(--s4); font-size: var(--t-lg); line-height: 1.7; color: var(--muted); }
.byline { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s5); padding: var(--s4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.byline .who { display: flex; align-items: center; gap: var(--s3); }
.byline .who .avatar { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-size: 12px; }
.byline .who small { display: block; font-size: var(--t-xs); color: var(--faint); line-height: 1.4; }
.byline .acts { display: flex; gap: var(--s2); }
.btn-save { text-decoration: none; }
.btn-save[aria-pressed="true"] { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); }
.btn-save[aria-pressed="true"] svg { fill: var(--accent); }
.hero-img { margin: var(--s6) 0 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.hero-img img { width: 100%; }

.art-prose { margin-top: var(--s6); font-size: 18px; line-height: 1.9; color: var(--ink-2); overflow-wrap: anywhere; }
.art-prose:empty { display: none; }
.art-locked { margin-top: var(--s5); }
.art-locked.open { animation: art-in .5s ease both; }
@keyframes art-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.art-prose > * { margin: 0; }
.art-prose > * + * { margin-top: var(--s5); }
.art-prose h2 { font-size: 26px; line-height: 1.4; margin-top: var(--s7); scroll-margin-top: 90px; }
.art-prose h3 { font-size: 21px; line-height: 1.45; margin-top: var(--s6); }
.art-prose b, .art-prose strong { color: var(--text); font-weight: 700; }
.art-prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.art-prose code { font-family: var(--font-mono); font-size: .88em; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); color: var(--text); }
.art-prose ul, .art-prose ol { margin: 0; padding: 0; list-style: none; }
.art-prose p:has(> img) { text-align: center; }
.art-prose img { display: inline-block; max-width: 100%; max-height: 640px; width: auto; height: auto; border-radius: var(--r-in); border: 1px solid var(--line); background: var(--surface-2); }
.art-prose p:has(> img) + p > em:only-child { display: block; margin-top: calc(-1 * var(--s3)); font-size: 14px; line-height: 1.6; font-style: normal; color: var(--faint); text-align: center; }
.art-prose li + li { margin-top: var(--s2); }
.art-prose li > ul, .art-prose li > ol, .art-prose li > .code { margin-top: var(--s3); }
.art-prose ol.st { counter-reset: p; display: grid; gap: var(--s3); }
.art-prose ol.st > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 var(--s3); margin: 0; }
.art-prose ol.st > li > * { grid-column: 2; }
.art-prose ol.st > li::before { counter-increment: p; content: counter(p); grid-column: 1; grid-row: 1 / span 9; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 4px; border-radius: 8px; font: 700 14px/1 var(--f-head); color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-line); }
/* <ol start="N"> (รายการที่ถูกคั่นด้วยโค้ด) · CSP ห้าม style="" จึงตั้งเลขเริ่มด้วย selector */
.art-prose ol.st[start="2"] { counter-reset: p 1; } .art-prose ol.st[start="3"] { counter-reset: p 2; } .art-prose ol.st[start="4"] { counter-reset: p 3; }
.art-prose ol.st[start="5"] { counter-reset: p 4; } .art-prose ol.st[start="6"] { counter-reset: p 5; } .art-prose ol.st[start="7"] { counter-reset: p 6; }
.art-prose ol.st[start="8"] { counter-reset: p 7; } .art-prose ol.st[start="9"] { counter-reset: p 8; } .art-prose ol.st[start="10"] { counter-reset: p 9; }
.art-prose ol.st[start="11"] { counter-reset: p 10; } .art-prose ol.st[start="12"] { counter-reset: p 11; } .art-prose ol.st[start="13"] { counter-reset: p 12; }
.art-prose ol.st[start="14"] { counter-reset: p 13; } .art-prose ol.st[start="15"] { counter-reset: p 14; } .art-prose ol.st[start="16"] { counter-reset: p 15; }
.art-prose ul.dots-list > li { padding-left: var(--s5); position: relative; }
.art-prose ul.dots-list > li::before { content: "·"; position: absolute; left: 6px; color: var(--accent-text); font-weight: 700; }
.art-prose .note { margin: 0; padding: var(--s4) var(--s5); border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--r-in) var(--r-in) 0; font-size: var(--t-md); color: var(--muted); }
.art-prose .note > * + * { margin-top: var(--s3); }
.art-prose .tbl { display: block; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-in); }
.art-prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); line-height: 1.6; }
.art-prose th, .art-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; min-width: 7em; }
.art-prose th { color: var(--text); font-family: var(--f-head); font-weight: 700; background: var(--surface); }
.art-prose tr:last-child td { border-bottom: 0; }

/* คำสั่งให้ก๊อป (ปุ่ม .copy ใช้ตัวจัดการเดียวกับชุดแจกใน site.js) */
.art-prose .art-code { margin: 0; background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); }
.art-prose li > .art-code { margin-top: var(--s3); }
.art-code .top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 8px 10px 8px var(--s4); border-bottom: 1px solid var(--line); font-size: var(--t-xs); color: var(--faint); }
.art-code .copy { padding: 7px 14px; font-size: 13px; }
.art-code pre { margin: 0; padding: var(--s4) var(--s5); white-space: pre-wrap; word-break: break-word; font: 400 var(--t-md)/1.8 var(--f-body); color: var(--text); }

/* ---------- ประตูอ่านต่อ (ไม่มีข้อความส่วนล็อกใน HTML · แถบจางเป็นเส้นหลอก) ---------- */
.gate { position: relative; margin-top: var(--s5); }
.gate[hidden] { display: none; }
.fadeout { position: relative; display: grid; gap: 14px; padding: var(--s2) 0 var(--s7); }
.fadeout i { display: block; height: 14px; border-radius: 7px; background: rgb(var(--ink-rgb) / .07); }
.fadeout i:nth-child(2) { width: 92%; } .fadeout i:nth-child(3) { width: 96%; } .fadeout i:nth-child(4) { width: 64%; }
.fadeout::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0) 0%, var(--bg) 85%); }
.gate-panel { position: relative; margin-top: calc(var(--s6) * -1); padding: var(--s6); border-color: var(--accent-line); text-align: center; overflow: hidden; }
.gate-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(460px 220px at 50% 0%, rgba(255, 225, 26, .12), transparent 70%); pointer-events: none; }
.gate-panel > * { position: relative; }
.gate-panel h2 { font-size: 26px; margin-top: var(--s3); }
.gate-panel .left { margin-top: var(--s2); font-size: var(--t-sm); }
.gate-login { display: grid; gap: var(--s3); max-width: 380px; margin: var(--s5) auto 0; text-align: left; }
.gate-login .g-redirect { width: 100%; }
.gate-login .or-line { margin: var(--s1) 0 0; }
.gate-login .otp-lab span { font-family: var(--f-body); font-weight: 400; font-size: var(--t-xs); color: var(--muted); }
.gate-login .newsbox { margin-top: 0; }
.gate-login .gate-err { margin: 0; color: var(--danger); font-size: var(--t-xs); }
.gate-login .gate-err:empty { display: none; }
.gate-login .kit-alt { font-size: var(--t-xs); }
.gets { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s5); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--t-sm); }
.gets li::before { content: "✓ "; color: var(--accent-text); }
.gate-fine { margin-top: var(--s3); font-size: 12px; color: var(--faint); }
.gate-fine a { text-decoration: underline; text-underline-offset: 3px; }
.gate-wait { color: var(--faint); font-size: var(--t-sm); text-align: center; }

/* ---------- ทำตามได้เลย ---------- */
.doit { margin-top: var(--s7); padding: var(--s5); border-color: var(--accent-line); }
.doit .kicker { display: block; margin-bottom: var(--s4); }
.doit-kit { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s5); align-items: center; }
.doit-kit img { border-radius: var(--r-in); aspect-ratio: 1200 / 630; object-fit: cover; object-position: top; }
.doit-kit h3 { font-size: var(--t-lg); line-height: 1.45; }
.doit-kit p { font-size: var(--t-sm); margin-top: var(--s1); }
.doit-kit .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.doit-kit .btn { margin-top: var(--s4); }
.doit-course { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--s5); align-items: center; }
.doit-kit + .doit-course { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.doit-course img { width: 96px; border-radius: 3px 6px 6px 3px; transform: rotate(-3deg); box-shadow: var(--shadow); }
.doit-course small { display: block; font-size: var(--t-xs); color: var(--accent-text); }
.doit-course b { display: block; font: 700 var(--t-lg)/1.4 var(--f-head); margin-top: 2px; color: var(--text); }
.doit-course p { font-size: var(--t-sm); margin-top: var(--s1); }
.doit-course .side { display: grid; gap: var(--s2); justify-items: end; text-align: right; }
.doit-course .side .pr { font: 700 var(--t-lg)/1 var(--f-head); color: var(--text); white-space: nowrap; }
.doit-course .side .pr s { font: 400 var(--t-xs)/1 var(--f-body); color: var(--faint); margin-left: 6px; }
.endnav { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s6); padding: var(--s4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.related { max-width: 1200px; }

@media (max-width: 1080px) {
  .arts, .arts.arts-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .arts, .arts.arts-4 { grid-template-columns: 1fr; gap: var(--s3); }
  .art { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s3); padding: var(--s3); align-items: start; }
  .art .thumb { border: 0; border-radius: var(--r-in); }
  .art .body { padding: 0; gap: var(--s1); }
  .art h3 { font-size: var(--t-sm); padding-right: 32px; }
  .home-arts .art h3 { padding-right: 0; }
  .art .save { width: 32px; height: 32px; right: var(--s3); top: var(--s3); }
  .art p { display: none; }
  .art .meta { border-top: 0; padding-top: var(--s1); justify-content: flex-start; flex-wrap: wrap; gap: var(--s1) var(--s3); }
  .page-head .search { width: 100%; }
  .art-tools { margin-bottom: var(--s5); }
  .art-tools .filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--s4) * -1); padding: 0 var(--s4); scrollbar-width: none; }
  .art-tools .filters::-webkit-scrollbar { display: none; }
  .art-tools .filters button { flex: none; }
  .featured { grid-template-columns: 1fr; }
  .featured .body { padding: var(--s5); }
  .featured h2 { font-size: 22px; }
  .featured p { font-size: var(--t-sm); }

  .reading h1 { font-size: 28px; }
  .reading .dek { font-size: 17px; }
  .byline { flex-wrap: wrap; }
  .art-prose { font-size: 17px; line-height: 1.85; }
  .art-prose h2 { font-size: 22px; margin-top: var(--s6); }
  .art-code pre { padding: var(--s3) var(--s4); font-size: 16px; }
  .gate-panel { padding: var(--s5) var(--s4); }
  .gate-panel h2 { font-size: 22px; }
  .gets { flex-direction: column; align-items: center; gap: var(--s1); }
  .doit { padding: var(--s4); }
  .doit-kit { grid-template-columns: 1fr; gap: var(--s3); }
  .doit-kit .btn { width: 100%; }
  .doit-course { grid-template-columns: 72px minmax(0, 1fr); gap: var(--s4); }
  .doit-course img { width: 72px; }
  .doit-course .side { grid-column: 1 / -1; justify-items: stretch; text-align: left; grid-template-columns: auto 1fr; align-items: center; }
  .doit-course .side .btn { justify-self: end; }
  .endnav { flex-direction: column; align-items: stretch; text-align: center; }
}

/* คำตอบสั้นต้นบท + คำถามที่พบบ่อยท้ายบท (AEO · ข้อมูลจาก aeo/<slug>.json) */
.tldr { margin: var(--s5) 0; padding: var(--s4) var(--s5); border: 1px solid var(--line); border-left: 4px solid var(--accent, #f5b301); border-radius: 12px; background: var(--surface); }
.tldr b { display: block; margin-bottom: var(--s1); font-size: var(--t-sm); letter-spacing: .02em; color: var(--accent-text); }
.tldr p { margin: 0; line-height: 1.75; }
.faq { margin: var(--s7, 48px) 0 var(--s5); }
.faq h2 { margin-bottom: var(--s3); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; padding: var(--s3) 0; font-weight: 600; line-height: 1.6; list-style-position: outside; }
.faq-item p { margin: 0 0 var(--s4); line-height: 1.75; color: var(--muted, inherit); }