/* article-explainer.css — ชิ้นส่วนบทความแบบ "อธิบายเทคให้คนทั่วไป" (ใช้ร่วมกัน · 10-09)
 *
 * ใช้คู่กับ article.css (โครง .art-*) · ทุกสีอ่านจากตัวแปรธีมกลาง ⇒ มืด/สว่างตามเว็บเอง ไม่ต้องเขียน [data-theme]
 * วิธีใช้ + ตัวอย่าง markup ทุกชิ้น → skill .claude/skills/explainer-articles.md
 * ต้นแบบ: articles/snapdragon-summit-2026-ai-smartphone.html · snapdragon-summit-2026-personal-ai.html
 *
 * ชิ้นส่วน: .art-hero-stats · .art-toc · .art-quote · .art-caveat · .art-src-note · .gloss (กล่องศัพท์)
 *   · .dia (กรอบไดอะแกรมพื้นตาราง) · .vs (ก่อน/หลัง) · .venn (SVG 3 วง) · .gates (2-3 ด่าน)
 *   · .pipe (ขั้นตอนมีเลข) · .chip-tbl · .next-part (การ์ดตอนต่อไป) · .hub (SVG ฮับ) · .stack (ชั้นซ้อน)
 *   · .tiles (การ์ดตัวเลข) · .osfan (แตกกิ่ง + ป้ายสถานะ) · .tl (เส้นเวลา) · .watch (สิ่งที่ต้องรอดู)
 *   · .hmap (แผนที่ปกใน hero: แกนกลาง + 6 กลุ่มรอบตัว)
 * แก้ไฟล์นี้ = bump ?v= ทุกหน้าที่ลิงก์ (python scripts/bump_cache_bust.py article-explainer.css <tag>)
 */
.art-hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px; }
.art-hero-stat { background:rgba(255,255,255,.1); border-radius:12px; padding:12px 8px; text-align:center; }
.art-hero-stat-val { font-size:1.15rem; font-weight:800; }
.art-hero-stat-lbl { font-size:.68rem; opacity:.78; margin-top:2px; line-height:1.45; }
.art-toc { background:var(--surface-2,#f9fafb); border:1px solid var(--border,#E5E7EB); border-radius:12px; padding:16px 20px; margin-bottom:32px; }
.art-toc h2 { font-size:.8rem; font-weight:700; color:var(--ink-muted,#9CA3AF); text-transform:uppercase; letter-spacing:.06em; margin:0 0 10px; }
.art-toc ol { margin:0; padding-left:20px; columns:2; }
.art-toc li { font-size:.8rem; margin-bottom:4px; break-inside:avoid; }
.art-toc a { color:var(--primary,#2f7668); text-decoration:none; }
.art-toc a:hover { text-decoration:underline; }
.art-shell h2[id] { scroll-margin-top:72px; }
.art-shell > p a, .art-shell li a { color:var(--primary,#2f7668); font-weight:600; }
.art-quote { border-left:3px solid var(--primary,#2f7668); background:var(--surface-2,#f9fafb); border-radius:0 10px 10px 0; padding:12px 16px; margin:16px 0; font-size:.88rem; line-height:1.75; color:var(--ink-secondary,#4B5563); }
.art-quote .src { display:block; margin-top:6px; font-size:.74rem; color:var(--ink-muted,#9CA3AF); }
.art-caveat { background:rgba(217,119,6,.08); border:1px solid rgba(217,119,6,.3); border-radius:10px; padding:12px 16px; margin:16px 0; font-size:.82rem; line-height:1.7; color:var(--ink-secondary,#4B5563); }
.art-src-note { font-size:.74rem; color:var(--ink-muted,#9CA3AF); border-left:3px solid var(--border,#E5E7EB); padding:6px 0 6px 12px; margin:24px 0 0; line-height:1.6; }
.art-src-note a { color:var(--primary,#2f7668); }

/* 🗂️ กล่องศัพท์ "แปลเป็นภาษาคน" */
.gloss { border:1px solid var(--border,#E5E7EB); border-radius:14px; padding:16px 18px; margin:8px 0 32px; background:var(--panel,#fff); }
.gloss h2 { font-size:.95rem; margin:0 0 4px; }
.gloss > p { font-size:.8rem; color:var(--ink-muted,#9CA3AF); margin:0 0 12px; }
.gloss dl { display:grid; grid-template-columns:1fr; gap:10px; margin:0; }
.gloss dl > div { display:grid; grid-template-columns:7.2em 1fr; gap:10px; align-items:baseline; padding-top:10px; border-top:1px dashed var(--border,#E5E7EB); }
.gloss dl > div:first-child { border-top:0; padding-top:0; }
.gloss dt { font-weight:700; font-size:.86rem; color:var(--primary,#2f7668); }
.gloss dd { margin:0; font-size:.86rem; line-height:1.65; }

/* 🧭 ไดอะแกรม: กรอบกลาง */
.dia { margin:20px 0 26px; padding:16px; border:1px solid var(--border,#E5E7EB); border-radius:16px;
  background:var(--surface-2,#f9fafb);
  background-image:linear-gradient(var(--border,#E5E7EB) 1px, transparent 1px), linear-gradient(90deg, var(--border,#E5E7EB) 1px, transparent 1px);
  background-size:22px 22px; background-position:-1px -1px; }
.dia-cap { font-size:.76rem; color:var(--ink-muted,#9CA3AF); margin:12px 2px 0; line-height:1.55; }
.dia-title { font-size:.8rem; font-weight:700; letter-spacing:.04em; color:var(--ink-secondary,#4B5563); margin:0 0 12px; }

/* ก่อน/หลัง 2 คอลัมน์ */
.vs { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:stretch; }
.vs-col { background:var(--panel,#fff); border:1px solid var(--border,#E5E7EB); border-radius:12px; padding:12px 14px; }
.vs-col.new { border:1.5px solid var(--green,#2f7668); box-shadow:0 0 0 3px var(--green-soft,#e4f1ec); }
.vs-h { font-size:.82rem; font-weight:800; margin:0 0 2px; }
.vs-col.new .vs-h { color:var(--green,#2f7668); }
.vs-sub { font-size:.74rem; color:var(--ink-muted,#9CA3AF); margin:0 0 10px; }
.vs-col ol { margin:0; padding-left:1.25em; }
.vs-col li { font-size:.8rem; line-height:1.55; margin-bottom:6px; }
.vs-col li::marker { color:var(--ink-muted,#9CA3AF); font-weight:700; }
.vs-tag { display:inline-block; margin-top:6px; font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:999px;
  background:var(--surface-2,#f3f4f6); color:var(--ink-secondary,#4B5563); }
.vs-col.new .vs-tag { background:var(--green-soft,#e4f1ec); color:var(--green,#2f7668); }
.vs-arrow { align-self:center; font-size:1.3rem; color:var(--ink-muted,#9CA3AF); }

/* วงเวนน์ (SVG) */
.venn { display:block; width:100%; max-width:460px; height:auto; margin:0 auto; font-family:inherit; }
.venn .c { fill-opacity:.13; stroke-width:2; }
.venn .c1 { fill:var(--green,#2f7668); stroke:var(--green,#2f7668); }
.venn .c2 { fill:var(--blue,#2d6fa4); stroke:var(--blue,#2d6fa4); }
.venn .c3 { fill:var(--amber,#b8860b); stroke:var(--amber,#b8860b); }
.venn .lbl { fill:var(--ink,#111827); font-weight:800; font-size:19px; }
.venn .sub { fill:var(--ink-secondary,#4B5563); font-size:14px; }
.venn .core { fill:var(--panel,#fff); stroke:var(--ink,#111827); stroke-width:2; }
.venn .core-txt { fill:var(--ink,#111827); font-weight:800; font-size:13px; }
.venn .lead { stroke:var(--ink-muted,#9CA3AF); stroke-width:1.2; stroke-dasharray:3 3; }

/* 2 ด่าน */
.gates { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gate { background:var(--panel,#fff); border:1px solid var(--border,#E5E7EB); border-top:4px solid var(--green,#2f7668); border-radius:12px; padding:12px 14px; }
.gate.g2 { border-top-color:var(--blue,#2d6fa4); }
.gate-n { font-size:.7rem; font-weight:800; letter-spacing:.06em; color:var(--ink-muted,#9CA3AF); }
.gate-h { font-size:.95rem; font-weight:800; margin:2px 0 6px; }
.gate p { font-size:.8rem; line-height:1.6; margin:0; color:var(--ink-secondary,#4B5563); }
.gate-out { grid-column:1 / -1; text-align:center; font-size:.82rem; font-weight:700; padding:10px; border-radius:10px;
  background:var(--green-soft,#e4f1ec); color:var(--green,#2f7668); }

/* ไปป์ไลน์ 4 ขั้นในชิป */
.pipe { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; counter-reset:pipe; }
.pipe-step { position:relative; background:var(--panel,#fff); border:1px solid var(--border,#E5E7EB); border-radius:12px; padding:16px 12px 12px; counter-increment:pipe; }
.pipe-step::before { content:counter(pipe); position:absolute; top:-10px; left:10px; width:22px; height:22px; border-radius:50%;
  background:var(--ink,#111827); color:var(--panel,#fff); font-size:.72rem; font-weight:800; display:grid; place-items:center; }
.pipe-verb { font-size:.95rem; font-weight:800; margin:6px 0 0; }
.pipe-part { font-size:.72rem; font-weight:700; color:var(--primary,#2f7668); margin:2px 0 8px; font-family:Inter,inherit; }
.pipe-step p { font-size:.78rem; line-height:1.55; margin:0; color:var(--ink-secondary,#4B5563); }
.pipe-like { display:block; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border,#E5E7EB); font-size:.76rem; color:var(--ink,#111827); }
.pipe-like b { color:var(--amber,#b8860b); }

/* ตารางเทียบ 2 รุ่น */
.chip-tbl th:first-child { width:24%; }
.chip-tbl td b { color:var(--ink,#111827); }
.chip-tbl .ext { color:var(--primary,#2f7668); font-weight:700; }

/* การ์ดตอนต่อไป */
.next-part { display:block; margin:34px 0 0; padding:16px 18px; border-radius:14px; text-decoration:none;
  border:1.5px dashed var(--green,#2f7668); background:var(--green-soft,#e4f1ec); color:var(--ink,#111827); }
.next-part small { display:block; font-size:.72rem; font-weight:800; letter-spacing:.06em; color:var(--green,#2f7668); }
.next-part strong { display:block; font-size:1rem; margin:4px 0; }
.next-part span { font-size:.82rem; color:var(--ink-secondary,#4B5563); line-height:1.6; }

@media (max-width:640px){
  .art-toc ol { columns:1; }
  .art-hero { padding:24px 18px; }
  .art-hero-stat-val { font-size:1rem; }
  .vs { grid-template-columns:1fr; }
  .vs-arrow { transform:rotate(90deg); justify-self:center; }
  .gates { grid-template-columns:1fr; }
  .pipe { grid-template-columns:1fr 1fr; row-gap:18px; }
  .gloss dl > div { grid-template-columns:1fr; gap:2px; }
  .dia { padding:14px 12px; }
}
/* ── ตอน 2 เพิ่ม ── */
.pipe.pipe-3 { grid-template-columns:repeat(3,1fr); }
.gates.gates-3 { grid-template-columns:repeat(3,1fr); }
.gate.g3 { border-top-color:var(--amber,#b8860b); }
.fam-tbl td:first-child { white-space:nowrap; }
/* ฮับอุปกรณ์รอบตัว (SVG) */
.hub { display:block; width:100%; max-width:460px; height:auto; margin:0 auto; font-family:inherit; overflow:visible; }
.hub .ring { fill:none; stroke:var(--border,#E5E7EB); stroke-width:2; stroke-dasharray:4 5; }
.hub .spoke { stroke:var(--ink-muted,#9CA3AF); stroke-width:1.3; }
.hub .me { fill:var(--green-soft,#e4f1ec); stroke:var(--green,#2f7668); stroke-width:2.5; }
.hub .me-t { fill:var(--green,#2f7668); font-weight:800; font-size:20px; }
.hub .node circle { fill:var(--panel,#fff); stroke:var(--ink-secondary,#4B5563); stroke-width:1.5; }
.hub .hubn circle { stroke:var(--green,#2f7668); stroke-width:2.5; }
.hub .ico { font-size:26px; }
.hub .nl { fill:var(--ink,#111827); font-size:16px; font-weight:700; }
/* ชั้นซอฟต์แวร์ */
.stack { display:grid; gap:8px; }
.stack-who { text-align:center; font-size:.82rem; font-weight:700; padding:8px; border-radius:10px; border:1px dashed var(--ink-muted,#9CA3AF); background:var(--panel,#fff); }
.stack-layer { display:grid; grid-template-columns:7.5em 1fr; gap:10px; align-items:center; padding:10px 14px; border-radius:10px; background:var(--panel,#fff); border:1px solid var(--border,#E5E7EB); border-left:5px solid var(--green,#2f7668); }
.stack-layer.l2 { border-left-color:var(--blue,#2d6fa4); }
.stack-layer.l3 { border-left-color:var(--amber,#b8860b); }
.stack-layer b { font-family:Inter,inherit; font-size:.92rem; }
.stack-layer span { font-size:.8rem; line-height:1.55; color:var(--ink-secondary,#4B5563); }
.stack-chips { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; padding-top:4px; }
.stack-chips span { font-size:.74rem; font-weight:700; padding:6px 10px; border-radius:8px; background:var(--ink,#111827); color:var(--panel,#fff); }
/* การ์ดตัวเลข */
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0 20px; }
.tiles.tiles-4 { grid-template-columns:repeat(4,1fr); }
.tile { border:1px solid var(--border,#E5E7EB); border-radius:12px; padding:14px 12px; background:var(--panel,#fff); }
.tile-v { font-size:1.15rem; font-weight:800; color:var(--primary,#2f7668); line-height:1.3; }
.tile-l { font-size:.76rem; color:var(--ink-secondary,#4B5563); margin-top:4px; line-height:1.5; }
/* 3 ระบบปฏิบัติการ */
.osfan { display:grid; gap:8px; }
.os-row { display:grid; grid-template-columns:8em 1fr auto; gap:12px; align-items:center; padding:12px 14px; border-radius:12px; background:var(--panel,#fff); border:1px solid var(--border,#E5E7EB); }
.os-name { font-weight:800; font-size:.9rem; }
.os-what { font-size:.8rem; line-height:1.6; color:var(--ink-secondary,#4B5563); }
.os-when { font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.os-when.now { background:var(--green-soft,#e4f1ec); color:var(--green,#2f7668); }
.os-when.later { background:rgba(217,119,6,.12); color:var(--amber,#b8860b); }
@media (max-width:640px){
  .pipe.pipe-3, .gates.gates-3 { grid-template-columns:1fr; }
  .tiles, .tiles.tiles-4 { grid-template-columns:1fr 1fr; }
  .os-row { grid-template-columns:1fr; gap:6px; }
  .os-when { justify-self:start; }
  .stack-layer { grid-template-columns:1fr; gap:2px; }
  .fam-tbl td:first-child { white-space:normal; }
}

/* ── เส้นเวลา (.tl) · 10-09 ──
   <ol class="tl"><li><span class="tl-y">2023</span><span class="tl-t">ข้อความ</span></li> … <li class="now">…</li></ol> */
.tl { list-style:none; margin:4px 0 0 6px; padding:0 0 0 20px; border-left:2px solid var(--ink-muted,#9CA3AF); }
.tl li { position:relative; padding:0 0 16px 12px; }
.tl li:last-child { padding-bottom:0; }
.tl li::before { content:""; position:absolute; left:-27px; top:4px; width:12px; height:12px; border-radius:50%;
  background:var(--panel,#fff); border:2px solid var(--ink-muted,#9CA3AF); }
.tl li.now::before { border-color:var(--green,#2f7668); background:var(--green,#2f7668); box-shadow:0 0 0 4px var(--green-soft,#e4f1ec); }
.tl-y { display:block; font-family:Inter,inherit; font-weight:800; font-size:.86rem; color:var(--primary,#2f7668); }
.tl-t { display:block; font-size:.84rem; line-height:1.65; color:var(--ink,#111827); margin-top:2px; }

/* ── สิ่งที่ยังไม่รู้ / ต้องรอดู (.watch) ──
   <div class="watch"><h3>…</h3><ul><li><b>หัวข้อ</b> คำอธิบาย</li></ul></div> */
.watch { margin:22px 0; padding:14px 16px; border-radius:14px; border:1px dashed var(--ink-muted,#9CA3AF); background:var(--panel,#fff); }
.watch h3 { font-size:.92rem; margin:0 0 8px; }
.watch ul { margin:0; padding-left:0; list-style:none; }
.watch li { position:relative; padding:8px 0 8px 26px; border-top:1px solid var(--border,#E5E7EB); font-size:.84rem; line-height:1.65; }
.watch li:first-child { border-top:0; }
.watch li::before { content:"?"; position:absolute; left:0; top:9px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center;
  font-size:.7rem; font-weight:800; background:var(--surface-2,#f3f4f6); color:var(--ink-secondary,#4B5563); }
.watch li b { color:var(--ink,#111827); }
.art-shell h3.sub { font-size:1rem; margin:26px 0 8px; }

/* ── แผนที่ปก (.hmap) · 10-09 — อยู่ "ใน" .art-hero (พื้นเข้มเสมอ ⇒ ใช้ขาวโปร่ง ไม่ต้องอ่านตัวแปรธีม)
   จอกว้าง: 3 กลุ่มซ้าย · แกนกลาง · 3 กลุ่มขวา (มีเส้นประชี้เข้ากลาง)
   มือถือ: แกนขึ้นบน แล้ว 6 กลุ่มเรียง 2 คอลัมน์ (.hmap-col เป็น display:contents)
   <div class="hmap" role="img" aria-label="…สรุปทั้งแผนที่…">
     <div class="hmap-col hmap-l"><div class="hmap-seg"><b>📜 กลุ่ม</b><span>ชื่อ · ชื่อ</span></div>×3</div>
     <div class="hmap-core">ชื่อกลาง<small>คำอธิบาย</small></div>
     <div class="hmap-col hmap-r">…×3</div>
     <p class="hmap-note"><i class="m">ชื่อเด่น</i> ข้อความ</p>   ← <i class="m"> = ป้ายไฮไลต์ชื่อที่อยากให้เห็นซ้ำหลายกลุ่ม
   </div> */
.hmap { display:grid; grid-template-columns:1fr auto 1fr; gap:10px 16px; align-items:center; margin-top:22px; }
.hmap-col { display:grid; gap:8px; }
.hmap-seg { position:relative; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:9px 12px; }
.hmap-seg b { display:block; font-size:.8rem; line-height:1.4; }
.hmap-seg span { display:block; font-size:.72rem; line-height:1.5; opacity:.88; margin-top:2px; }
.hmap-l .hmap-seg::after, .hmap-r .hmap-seg::before { content:""; position:absolute; top:50%; width:16px; border-top:1.5px dashed rgba(255,255,255,.45); }
.hmap-l .hmap-seg::after { right:-17px; }
.hmap-r .hmap-seg::before { left:-17px; }
.hmap-core { width:96px; height:96px; border-radius:18px; display:grid; place-content:center; text-align:center;
  font-family:Inter,inherit; font-weight:800; font-size:1.05rem; letter-spacing:.04em;
  background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.6);
  box-shadow:0 0 0 6px rgba(255,255,255,.07), 0 0 0 12px rgba(255,255,255,.04); }
.hmap-core small { display:block; font-family:inherit; font-size:.62rem; font-weight:600; letter-spacing:0; opacity:.82; margin-top:2px; }
.hmap .m { font-style:normal; font-weight:800; background:#fff; color:#0b1226; border-radius:6px; padding:0 6px; }
.hmap-note { grid-column:1 / -1; margin:4px 0 0; font-size:.74rem; text-align:center; opacity:.9; }
@media (max-width:640px){
  .hmap { grid-template-columns:1fr 1fr; gap:8px; align-items:stretch; }
  .hmap-col { display:contents; }
  .hmap-core { grid-column:1 / -1; order:-1; justify-self:center; width:auto; height:auto; padding:10px 22px; margin-bottom:4px; }
  .hmap-l .hmap-seg::after, .hmap-r .hmap-seg::before { display:none; }
  .hmap-seg { padding:8px 10px; }
}