/* content.css · UI v3 รอบ 4 หน้าเนื้อหา (ส่วน C D) · โหลดเฉพาะ season meaning birth-day-sub about privacy 404 (head-extra) · ต่อจาก main.css และ tool.css */
/* --- รอบ 4 ส่วน C: หน้าความหมายตามแบบ Article --- */
.ph-art { padding-top: 28px; }
.ph-art .wrap-doc,
.art-fig-wrap,
.meaning-lead,
.meaning-body,
.meaning-pager.wrap-doc { padding-left: 20px; padding-right: 20px; }
.ph-art .meaning-h1 { margin-top: 12px; max-width: 300px; font-size: 2.25rem; line-height: 1.2; }
.ph-art .lede { max-width: none; }
.ph-art .eyebrow a { color: var(--muted-2); text-decoration: none; }
.ph-art .eyebrow a:hover { color: var(--violet-soft); text-decoration: underline; }
.ph-amb { left: 0; top: -100px; }
.amb-d { font-family: var(--font-num); font-weight: 500; fill: #B39CF5; }
.amb-big { font-family: var(--font-num); font-weight: 500; font-size: 48px; fill: #E3C98D; }
.amb-blur { fill: #E0B56A; opacity: 0.6; }
.byline { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: var(--text-sm); color: var(--muted); }
.by-av { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--violet-dim); font-family: var(--font-display); font-size: var(--text-base); color: var(--ink); }
.ph-art .meaning-grade { margin-top: var(--sp-3); }
@media (min-width: 768px) {
  .ph-art .meaning-h1 { max-width: 18em; font-size: 2.5rem; }
  .ph-amb { left: auto; right: 0; }
}
.art-fig-wrap { margin-top: 28px; }
.art-fig {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 36px 20px;
  border: 1px solid var(--panel);
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at 50% 50%, rgba(106, 79, 208, 0.45), var(--surface) 70%);
  text-align: center;
}
.art-rings { position: absolute; left: 50%; top: 50%; margin: -130px 0 0 -130px; pointer-events: none; }
.art-d { font-family: var(--font-num); font-size: 13px; fill: #9D90D6; }
.art-big { position: relative; display: inline-block; font-family: var(--font-num); font-variant-numeric: lining-nums; font-size: 8.75rem; font-weight: 500; line-height: 0.9; color: var(--ink); text-shadow: 0 0 40px rgba(179, 156, 245, 0.3); }
.art-big.is-word { font-family: var(--font-display); font-size: 2.5rem; line-height: 1.6; padding: 26px 0; }
.art-fig figcaption { position: relative; margin-top: 12px; font-size: var(--text-xs); letter-spacing: 2px; color: var(--muted-2); }
.meaning-body { display: flex; flex-direction: column; gap: 18px; padding-top: 32px; }
.meaning-body > section,
.meaning-body > footer { margin: 0; }
.meaning-body p,
.meaning-body li { font-size: var(--text-base); color: var(--ink-2); line-height: 1.6; }
.meaning-body h2,
.meaning-pager h2,
.meaning-lead h2 { margin: 10px 0 0; font-size: 1.5rem; font-weight: 400; color: var(--ink); line-height: 1.3; }
.meaning-body section > p,
.meaning-body section > h3 { margin-top: 18px; }
.meaning-body .meaning-h3 { font-size: var(--text-lg); color: var(--ink); }
.meaning-body .meaning-h3 + p { margin-top: 6px; }
.prose .meaning-summary,
.meaning-lead .meaning-summary { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-md); }
.prose .meaning-summary h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.5; }
.prose .meaning-summary p { margin-top: 8px; }
.meaning-body .sum-toc { margin-top: 14px; }
.meaning-body .meaning-tags .chip-row,
.meaning-body .meaning-dl { margin-top: 14px; }
.meaning-body .src-box { margin: 0; padding: 16px 18px; background: var(--surface); border-radius: var(--radius-md); }
.meaning-body .src-box p { margin: 0; font-size: var(--text-md); color: var(--muted); }
.meaning-body .src-box p + p { margin-top: 4px; }
.prose .try-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
  padding: 22px 18px;
  background: var(--surface-glass);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
}
.prose .try-card .c-eyebrow { font-size: var(--text-xs); color: var(--muted-2); }
.prose .try-card .try-h { margin: 0; font-size: 1.5rem; font-weight: 500; line-height: 1.3; }
.try-card .btn { display: flex; width: 100%; min-height: 50px; font-weight: 700; }
.try-card .meaning-extra { margin: 0; font-size: var(--text-md); }
.meaning-pager.wrap-doc { padding-top: 48px; }
.meaning-pager h2 { margin: 0 0 14px; }
.meaning-pager .near-compare { margin-bottom: 14px; color: var(--ink-2); }
.meaning-pager .near-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.meaning-pager .near-item { padding: 0; background: var(--surface); border: 1px solid var(--panel); border-radius: var(--radius-md); }
.meaning-pager .near-item a { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 14px; color: var(--ink); text-decoration: none; }
.near-tile { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--violet-dim); font-family: var(--font-num); font-variant-numeric: lining-nums; font-size: 1.875rem; color: var(--ink); }
.near-item:nth-child(3n+2) .near-tile { background: #14302D; }
.near-item:nth-child(3n) .near-tile { background: #33211D; }
.near-txt { display: flex; flex-direction: column; min-width: 0; }
.meaning-pager .near-name { display: block; font-weight: 500; }
.meaning-pager .near-tags { font-size: var(--text-sm); color: var(--muted); }
.near-tags .grade-chip { font-size: var(--text-xs); }
/* --- รอบ 4 ส่วน D: หน้าคู่มือ สีมงคลปี เกี่ยวกับเว็บ ความเป็นส่วนตัว 404 --- */
.ph-gen .page-head-inner > h1 { margin-top: 10px; max-width: 320px; line-height: 1.2; }
.ph-art .page-head-inner > h1 { margin-top: 12px; }
.by-mark svg { display: block; }
.st-tbl .ctbl-head { display: block; }
.st-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px 16px; }
.st-name { font-weight: 600; color: var(--ink); }
.st-name a { color: inherit; }
.st-cell { font-size: var(--text-md); color: var(--ink-2); line-height: 1.6; }
.st-lbl { margin-right: 4px; font-size: var(--text-xs); letter-spacing: 0.5px; color: var(--muted-2); }
.st-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.st-tools .st-lbl { flex: 0 0 100%; margin-right: 0; }
.st-tool { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: 9px 14px; border: 1px solid var(--panel); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink); font-size: var(--text-md); line-height: 1.5; text-decoration: none; transition: border-color var(--speed); }
.st-tool:hover { border-color: var(--violet-ink); color: var(--ink); }
.c-sec-art .c-h2,
.doc-art h2 { font-size: 1.5rem; font-weight: 400; line-height: 1.3; }
.doc-art h2 { margin-top: 40px; }
.doc-art p,
.doc-art li { color: var(--ink-2); }
.nf-fig { display: flex; align-items: center; justify-content: center; width: 260px; height: 260px; margin: 0 auto; padding: 0; border: 0; border-radius: var(--radius-pill); background: radial-gradient(circle at 50% 50%, rgba(106, 79, 208, 0.45), rgba(106, 79, 208, 0) 70%); }
.nf-fig .art-big { margin: 0; font-size: 6rem; }
.h1-c .h1-kw,
.h1-c .h1-display { display: inline; max-width: none; margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
/* พื้นที่แตะ 44px ของลิงก์ในบรรทัดตาราง กล่องที่มา และการ์ดลองเลย โดยไม่ดันระยะบรรทัดตามแบบ */
.ct-name,
.st-name a,
.meaning-body .src-box a,
.try-card .meaning-extra a,
.c-more-prose .small a { position: relative; }
.ct-name::after,
.st-name a::after,
.meaning-body .src-box a::after,
.try-card .meaning-extra a::after,
.c-more-prose .small a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.c-more-prose .meaning-h3 { margin-top: 18px; font-size: var(--text-lg); color: var(--ink); }
.c-more-prose p { color: var(--ink-2); }

/* birth-sub */
/* หน้าย่อยวันเกิด /birth-day/<วัน>/ ตามแบบ BirthMonday.dc.html (390px)
   · หัวหน้า: ข้อความอยู่เหนือภาพดาว (แบบวาง section position:relative ทับ svg)
   · ระยะส่วน 44px · กล่องที่มา 36px (กฎ .c-sec + .c-sec.section-lazy.lazy-sm ให้ 48 จึงระบุด้วย id)
   · ความหมายวัน + ดูเพิ่ม (เนื้อหาเดิมที่แบบไม่มี) ใช้ภาษาเดียวกับส่วนของแบบ: หัวข้อ serif 28 · การ์ดแถวแบบตารางภูมิ · ชิปแบบวันเกิดอื่น */
.ph-day .page-head-inner { position: relative; }
.ph-day ~ #kal-letters,
.ph-day ~ #bhumi,
.ph-day ~ #related,
.ph-day ~ #days,
.ph-day ~ #day-meaning,
.ph-day ~ #more { padding-top: 44px; }
.ph-day ~ #basis { padding-top: 36px; }
#day-meaning .c-h2 { margin: 0; font-size: 1.75rem; font-weight: 500; line-height: 1.3; }
#day-meaning .bd-lead { margin: 8px 0 14px; font-size: var(--text-base-s); line-height: 1.6; color: var(--ink-2); }
.bd-asp-card { border: 1px solid var(--panel); border-radius: 18px; background: var(--surface); overflow: hidden; }
.bd-asp { padding: 14px 16px; }
.bd-asp + .bd-asp { border-top: 1px solid var(--panel); }
.c-more-prose .bd-asp .meaning-h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; line-height: 1.5; color: var(--ink-strong); }
.c-more-prose .bd-asp p { margin: 4px 0 0; font-size: var(--text-base-s); line-height: 1.6; color: var(--ink-2); }
#day-meaning .small { margin: 10px 0 0; font-size: var(--text-sm); }
#more .c-h2 { margin: 0 0 12px; font-size: 1.375rem; font-weight: 400; }
#more .c-links { display: flex; flex-wrap: wrap; gap: 8px; }
#more .c-link { min-height: 44px; height: auto; padding: 9px 14px; border-radius: var(--radius-pill); background: var(--surface-2); border-color: var(--panel); font-size: var(--text-md); line-height: 1.5; }
#more .c-link:hover { border-color: var(--violet-edge); }
.ph-day ~ #bhumi .ctbl-row { align-items: start; }
.ph-day ~ #related .go-h,
.ph-day ~ #days .c-h2 { line-height: 1.6; }
.ph-day ~ #related .go-two .btn { min-height: 50px; }
/* แสงพื้นหลังตามแบบ: วงม่วงวงเดียวที่ 80% 25% ของกรอบ 390×640 (รัศมีเท่าแบบที่ 390 คงที่ทุกความกว้าง ไม่ขาดเป็นเส้นที่ขอบ 640) แทนแสงสองชั้นของหน้าแรก · ท้ายหน้าเว้น 56px ถึงเส้นท้ายเว็บ */
body:has(.ph-day)::before { height: 640px; background: radial-gradient(circle 572px at 80% 160px, rgba(106, 79, 208, 0.32), rgba(106, 79, 208, 0) 50%); -webkit-mask-image: none; mask-image: none; }
main:has(.ph-day) { padding-bottom: 0; }
#basis .src-box a { position: relative; }
#basis .src-box a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.ph-day ~ #related .go-two .btn { text-align: center; line-height: 1.3; }
/* จบ birth-sub */
/* birth-sub (ต่อ) · เนื้อหา SEO เดิมจัดเข้าตำแหน่งของแบบ
   · h1 = คำหลักเดิม (บรรทัดเล็กช่อง eyebrow ของแบบ) + "คนเกิด/วันจันทร์" ตัวใหญ่ · h2 อักษรไม่เกื้อหนุน = หัวข้อเดิม (ช่อง eyebrow) + ค่าใหญ่
   · ดาววันเกิด/ดาวไม่เกื้อหนุน = 2 แถวแรกของตารางเทวดา · เทวดา ดาววันเกิด ตัวอย่าง คำถาม ต่อจากความหมายวัน หัวข้อ serif 24 (หัวข้อเดิมยาว) การ์ดแถวแบบตารางภูมิ */
.ph-day .bd-h1 { max-width: none; margin-top: 0; }
.bd-h1 .h1-kw { display: block; margin: 0; max-width: 250px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; line-height: 1.6; letter-spacing: 2px; color: var(--muted-2); }
.bd-h1-main { display: block; max-width: 220px; margin-top: 10px; }
.ph-day ~ #kal-letters .bd-h2 { margin-top: 0; }
.bd-h2 .bd-h2-kick { display: block; line-height: 1.6; }
.bd-h2 .bd-h2-val { display: block; margin-top: 6px; }
.ph-day ~ #day-info,
.ph-day ~ #intro,
.ph-day ~ #examples,
.ph-day ~ #faq { padding-top: 44px; }
.ph-day ~ section .c-more-prose .c-h2,
.ph-day ~ #faq .c-h2 { margin: 0 0 14px; font-size: 1.5rem; font-weight: 500; line-height: 1.3; }
.ph-day ~ #intro .c-h2 { margin-bottom: 8px; }
.ph-day ~ #intro p { margin: 8px 0 0; font-size: var(--text-base-s); line-height: 1.6; color: var(--ink-2); }
.bd-dl { border-radius: 18px; }
.bd-dl dt { font-size: var(--text-xs); letter-spacing: 1px; color: var(--muted-2); }
.bd-dl dd { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.5; }
.bd-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--panel); border-radius: 18px; background: var(--surface); overflow: hidden; }
.bd-rows li { margin: 0; padding: 12px 16px; font-size: var(--text-base-s); line-height: 1.6; color: var(--ink-2); }
.bd-rows li + li { border-top: 1px solid var(--panel); }
.bd-faq { padding: 0 16px; border: 1px solid var(--panel); border-radius: 18px; background: var(--surface); }
.bd-faq .faq-item:last-child { border-bottom: 0; }
.bd-faq .faq-item summary { min-height: 54px; }
@media (min-width: 768px) {
  .bd-h1 .h1-kw { max-width: 30em; }
  .bd-h1-main { max-width: 14em; }
}
/* จบ birth-sub (ต่อ) */
/* sum-v3 · หน้าผลรวมเบอร์ /phone/sum-N/ ตามแบบ PhoneSum8.dc.html (CEO 2026-10-29 "ทำให้เหมือนแบบ 100%") · template pages/meaning.html "m-sum" · ข้อมูล sum_v3.go
 * ระยะ สี ขนาด ตามแบบ 390px · ไม่มี style="" (CSP) · แอนิเมชันเฉพาะภาพ SVG ตกแต่งและหมุดระดับ ใน prefers-reduced-motion: no-preference · ข้อความนิ่งตั้งแต่เปิดหน้า */
.m-sum { --g-good: #6FBFB2; --g-mid: #E3C98D; --g-warn: #E0A877; --g-bad: #D9846E; position: relative; max-width: 600px; margin: 0 auto; color: var(--ink); overflow-x: clip; }
.m-sum .g-good { --gc: var(--g-good); }
.m-sum .g-mid { --gc: var(--g-mid); }
.m-sum .g-warn { --gc: var(--g-warn); }
.m-sum .g-bad { --gc: var(--g-bad); }
main:has(> .m-sum) { padding-bottom: 0; }
body:has(.m-sum)::before { content: none; }
.m-sum-glow { position: absolute; left: 0; right: 0; top: -97px; height: 720px; background: radial-gradient(circle at 50% 30%, rgba(106, 79, 208, 0.28), rgba(106, 79, 208, 0) 60%); pointer-events: none; }
.m-sum .m-hero { position: relative; padding: 18px 20px 0; text-align: center; }
.m-wheel { display: block; width: 300px; max-width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.m-wd text { font-family: var(--font-num); font-weight: 500; font-size: 14px; fill: #9D90D6; }
.m-wd text.is-on { font-size: 17px; fill: #E3C98D; }
.m-wp { font-family: var(--font-body); font-size: 9px; fill: #E3DDF2; }
.m-wn { font-family: var(--font-num); font-weight: 500; font-size: 104px; fill: #E3C98D; }
.m-wn-blur { fill: #E0B56A; opacity: 0.5; }
.m-wl { font-family: var(--font-body); font-size: 10px; letter-spacing: 2px; fill: #A39BC6; }
.m-wf { font-family: var(--font-body); font-size: 10px; letter-spacing: 1px; fill: #BAB2D6; }
.m-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
.m-sum .m-chips .eyebrow,
.m-gchip { margin: 0; padding: 6px 12px; border-radius: 999px; font-size: 0.8125rem; line-height: 1.6; letter-spacing: 0; }
.m-sum .m-chips .eyebrow { background: var(--surface-2); border: 1px solid var(--panel); color: var(--muted); }
.m-sum .m-chips .eyebrow a { position: relative; color: inherit; text-decoration: none; }
.m-sum .m-chips .eyebrow a:hover { color: var(--violet-soft); }
.m-gchip { background: #2A2216; border: 1px solid #5C4E33; color: var(--gc); }
.m-gchip.g-good { background: #12292A; border-color: #2E5652; }
.m-gchip.g-warn { background: #2E2219; border-color: #5E4431; }
.m-gchip.g-bad { background: #33211D; border-color: #4A2E28; }
.m-sum .m-h1 { margin: 14px 0 0; max-width: none; font-family: var(--font-display); font-weight: 500; font-size: 2rem; line-height: 1.25; letter-spacing: 0; color: var(--ink); text-align: center; }
.m-h1-n { color: #E3C98D; }
.m-sum .m-lede { margin: 12px auto 0; max-width: 330px; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); text-align: center; }
.m-lede strong { font-weight: 500; color: var(--ink); }
/* การ์ดระดับ: หมุดตามเกรดจริง (เลขเสีย 8% · ระวัง 29% · กลาง 50% · เลขดี 92%) */
.m-lv { position: relative; margin: 28px 20px 0; padding: 18px; background: var(--surface); border: 1px solid var(--panel); border-radius: 20px; }
.m-lv-scale { display: flex; justify-content: space-between; font-size: 0.75rem; line-height: 1.6; letter-spacing: 1px; }
.m-lv-scale span { color: var(--gc); }
.m-lv-bar { position: relative; margin-top: 10px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(217, 132, 110, 0.55), rgba(227, 201, 141, 0.55), rgba(111, 191, 178, 0.55)); }
.m-lv-mark { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -11px 0 0 -11px; border-radius: 999px; background: var(--ground); border: 2px solid #E3C98D; box-shadow: 0 0 14px rgba(224, 181, 106, 0.45); }
.lv-good .m-lv-mark { left: 92%; border-color: var(--g-good); box-shadow: 0 0 14px rgba(111, 191, 178, 0.45); }
.lv-warn .m-lv-mark { left: 29%; border-color: var(--g-warn); box-shadow: 0 0 14px rgba(224, 168, 119, 0.45); }
.lv-bad .m-lv-mark { left: 8%; border-color: var(--g-bad); box-shadow: 0 0 14px rgba(217, 132, 110, 0.45); }
.m-sum .m-lv-txt { margin: 12px 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--ink-2); }
.m-lv-txt strong { font-weight: 500; color: var(--gc); }
/* ส่วนเนื้อหา */
.m-sum .meaning-body { display: block; max-width: none; margin: 0; padding: 0; }
.m-sum .m-sec { margin: 0; padding: 44px 20px 0; }
.m-sum .m-eb { margin: 0; font-size: 0.75rem; line-height: 1.6; letter-spacing: 2px; color: var(--muted-2); }
.m-sum .m-h2,
.m-sum .h2-plain { margin: 6px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 1.625rem; line-height: 1.3; color: var(--ink); }
.m-sum .m-p { margin: 12px 0 0; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.m-warn { margin-top: 16px; padding: 16px; background: #1A1420; border: 1px solid #4A2E28; border-radius: 18px; }
.m-sum .m-warn-h { margin: 0; font-size: 0.75rem; line-height: 1.6; letter-spacing: 1px; color: #D9846E; }
.m-sum .m-warn-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.m-sum .m-warn-list li { padding: 6px 12px; background: #33211D; border: 1px solid #4A2E28; border-radius: 999px; font-size: 0.8125rem; line-height: 1.6; color: #D9846E; }
/* แท็บด้าน (สารบัญเดิม .sum-toc) */
.m-sum .sum-toc { margin: 12px 0 0; }
.m-sum .sum-toc-list { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 3px 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.m-sum .sum-toc-list::-webkit-scrollbar { display: none; }
.m-sum .sum-toc-list li { flex: none; }
.m-sum .sum-toc-link { position: relative; display: block; min-height: 0; padding: 8px 14px; background: var(--surface-2); border: 1px solid var(--panel); border-radius: 999px; font-size: 0.875rem; line-height: 1.6; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.m-sum .sum-toc-link:hover { border-color: var(--violet-edge); color: var(--ink); }
.m-sum .sum-toc-list:not(.has-on) li:first-child .sum-toc-link,
.m-sum .sum-toc-link.is-on { background: var(--violet-dim); border-color: var(--violet-edge); color: var(--ink); }
.m-asps { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
/* หน้าความหมายแบบทั่วไป (เลขนางฟ้า · pages/meaning.html): การ์ดไม่มีไอคอน หัวข้อวางเหนือเนื้อ · ถ้าเป็นแถวเดียวหัวข้อยาวถูกบีบจนตัดกลางคำ */
.m-asp-list .m-asp { flex-direction: column; gap: 0; }
.m-asp { display: flex; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--panel); border-radius: 18px; }
.m-asp-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; box-sizing: border-box; border-radius: 14px; background: radial-gradient(circle at 35% 30%, rgba(106, 79, 208, 0.35), #0C0A1A 80%); border: 1px solid var(--line); color: #E3C98D; }
.m-asp-ic[data-a="aspect-love"] { color: #C98AA3; }
.m-asp-ic[data-a="aspect-wisdom"] { color: #B39CF5; }
.m-asp-ic[data-a="aspect-fortune"] { color: #6FBFB2; }
.m-asp-ic[data-a="aspect-money"] { color: #D9BE6E; }
.m-asp-ic[data-a="aspect-trade"] { color: #7FB3D3; }
.m-asp-ic[data-a="aspect-patronage"] { color: #D99A5C; }
.m-asp-tx { min-width: 0; }
.m-sum .m-asp h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; line-height: 1.6; color: var(--ink); scroll-margin-top: 96px; }
.m-sum .m-asp p { margin: 6px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); }
/* ข้อมูลตามตำรา: การ์ดดาว (dl เดิม) + ช่องความหมายย่อ ระดับ */
.m-sum .m-stars { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding: 0; }
.m-sum .m-star { position: relative; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 16px; background: var(--surface); border: 1px solid var(--panel); border-radius: 18px; }
.m-sum .m-star.has-ic { min-height: 98px; padding-left: 96px; }
.m-sum .m-star.n2 { padding-left: 132px; }
.m-sum .m-star dt { order: 2; margin: 4px 0 0; font-size: 0.875rem; font-weight: 400; line-height: 1.6; color: var(--ink-2); }
.m-sum .m-star dd { order: 1; margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; line-height: 1.6; color: var(--ink); }
.m-star-ic { position: absolute; left: 16px; top: 50%; display: flex; margin-top: -32px; }
.m-orb { --sc: #8C88A3; position: relative; display: block; width: 64px; height: 64px; }
.m-orb + .m-orb { margin-left: -28px; }
.m-orb::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--sc); opacity: 0.5; }
.m-orb::after { content: attr(data-s); position: absolute; inset: 10px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--sc); background: radial-gradient(circle at 38% 35%, color-mix(in srgb, var(--sc) 70%, transparent), color-mix(in srgb, var(--sc) 20%, transparent) 65%, #15112A); font-family: var(--font-num); font-weight: 600; font-size: 22px; line-height: 1; color: var(--ink); }
.m-orb[data-s="1"] { --sc: #D9725F; }
.m-orb[data-s="2"] { --sc: #D9BE6E; }
.m-orb[data-s="3"] { --sc: #D98BA8; }
.m-orb[data-s="4"] { --sc: #6FB58F; }
.m-orb[data-s="5"] { --sc: #D99A5C; }
.m-orb[data-s="6"] { --sc: #7FB3D3; }
.m-orb[data-s="7"] { --sc: #9682D6; }
.m-sum .m-note { margin: 10px 0 0; font-size: 0.8125rem; color: var(--muted); }
.m-sum .m-list { margin: 10px 0 0; }
.m-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 20px 0; }
.m-sum .m-cell { margin: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--panel); border-radius: 14px; }
.m-sum .m-cell-h { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 0.75rem; line-height: 1.6; letter-spacing: 0; color: var(--muted); }
.m-sum .m-cell .chip-row { display: block; margin: 2px 0 0; padding: 0; }
.m-sum .m-cell .chip-row li.chip { display: inline; min-height: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font-family: var(--font-display); font-size: 1rem; line-height: 1.6; color: var(--ink); }
.m-sum .m-cell .chip-row li.chip + li.chip::before { content: " · "; }
.m-sum .m-cell-v { margin: 2px 0 0; font-family: var(--font-display); font-size: 1rem; line-height: 1.6; color: var(--gc); }
/* การ์ดลองเบอร์ (ลิงก์ไปหน้าเครื่องมือ · ไม่มีฟอร์ม) */
.m-sum .m-try { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 44px 20px 0; padding: 22px 18px; background: radial-gradient(circle at 50% 0%, rgba(106, 79, 208, 0.3), #15112A 70%); border: 1px solid var(--line-2); border-radius: 22px; }
.m-sum .m-try .m-eb { margin: 0; }
.m-sum .m-try-h { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; line-height: 1.6; color: var(--ink); }
.m-try-l { font-size: 0.875rem; line-height: 1.6; color: var(--ink-2); }
.m-try-in { width: 100%; height: 54px; padding: 0 16px; box-sizing: border-box; background: var(--ground); color: var(--ink); border: 1px solid var(--line-input); border-radius: 14px; font-family: var(--font-num); font-size: 1.5rem; letter-spacing: 2px; }
.m-try-in::placeholder { color: #6B6294; }
.m-try-in:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.m-try-btn { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px; background: #E0B56A; color: var(--on-gold); font-weight: 700; font-size: 0.9375rem; text-decoration: none; }
.m-try-btn:hover { background: var(--gold-2); color: var(--on-gold); }
.m-try-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.m-sum .m-try-note { margin: 0; font-size: 0.75rem; line-height: 1.6; color: var(--muted); text-align: center; }
.m-sum .m-try .meaning-extra { margin: 0; text-align: center; }
/* เทียบเลขข้างเคียง: แถบเลื่อนแนวนอน (การ์ดหน้านี้อยู่กลาง ไม่ใช่ลิงก์) */
.m-sum .m-near { margin: 0; padding: 44px 0 0; }
.m-near-hd { padding: 0 20px; }
.m-sum .m-ncs { display: flex; flex-direction: row; gap: 10px; margin: 16px 0 0; padding: 4px 20px 10px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.m-sum .m-ncs::-webkit-scrollbar { display: none; }
.m-sum .m-ncs .near-item { flex: none; width: 104px; margin: 0; padding: 0; background: none; border: 0; }
/* จอแคบ (<768): ใบถัดไปที่ล้นขอบขวาจางลงเป็นสัญญาณว่าเลื่อนได้ · เลื่อนแล้วหยุดตรงขอบการ์ด */
@media (max-width: 767.98px) {
  .m-sum .m-ncs { scroll-snap-type: x proximity; scroll-padding-inline: 20px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), rgba(0, 0, 0, 0.3)); mask-image: linear-gradient(to right, #000 calc(100% - 44px), rgba(0, 0, 0, 0.3)); }
  .m-sum .m-ncs .near-item { scroll-snap-align: start; }
}
/* จอ 360–479: การ์ดกว้างพอให้เห็น 3 ใบเต็ม + ใบที่ 4 โผล่ราว 40% (เดิม 104px ที่ 375 โผล่แค่ 13px) */
@media (min-width: 360px) and (max-width: 479.98px) {
  .m-sum .m-ncs .near-item { width: clamp(92px, calc((100vw - 50px) / 3.4), 104px); }
}
.m-nc { display: block; box-sizing: border-box; height: 100%; padding: 14px 10px; background: var(--surface); border: 1px solid var(--panel); border-radius: 18px; color: var(--ink); text-align: center; text-decoration: none; }
a.m-nc:hover { border-color: var(--violet-edge); color: var(--ink); }
.is-current .m-nc { background: radial-gradient(circle at 50% 20%, rgba(224, 181, 106, 0.16), #15112A 70%); border-color: #E0B56A; }
.m-nc-n { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--gc); background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.08), #0C0A1A 75%); font-family: var(--font-num); font-weight: 500; font-size: 1.875rem; line-height: 1; color: var(--ink); }
.is-current .m-nc-n { color: #E3C98D; }
.m-nc-g { display: inline-block; margin-top: 8px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--gc); color: var(--gc); font-size: 0.6875rem; line-height: 1.6; }
.m-nc-t { display: block; margin-top: 4px; font-size: 0.75rem; line-height: 1.6; color: var(--muted); }
.m-nc-name { display: block; margin-top: 2px; font-size: 0.6875rem; line-height: 1.5; color: var(--ink-2); }
.m-sum .near-compare { padding: 0; }
.m-sum .m-guide { margin: 0; padding: 6px 20px 0; font-size: 0.875rem; line-height: 1.6; }
.m-sum .m-guide a { position: relative; color: var(--violet-ink); }
.m-sum .m-guide a::after { content: ""; position: absolute; left: 0; right: 0; top: -11px; bottom: -11px; }
.m-sum .m-guide a:hover { color: var(--violet-soft); }
/* คำถาม accordion + แถวที่มา */
.m-sum .m-faq { margin: 0; padding: 44px 20px 0; }
.m-sum .m-faq-h { margin: 0 0 12px; font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.6; color: var(--ink); }
.m-faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--panel); }
.m-sum .m-faq .faq-item { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--panel); background: none; }
.m-sum .m-faq .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 0; font-weight: 500; font-size: 1rem; line-height: 1.6; color: var(--ink); cursor: pointer; list-style: none; }
.m-sum .m-faq .faq-item summary::-webkit-details-marker { display: none; }
.m-sum .m-faq .faq-item summary::after { content: "+"; flex: none; position: static; width: auto; height: auto; margin: 0; border: 0; background: none; transform: none; color: var(--violet-edge); font-weight: 400; }
.m-sum .m-faq .faq-item[open] summary::after { content: "\2212"; transform: none; }
.m-sum .m-faq .faq-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.m-sum .m-faq .faq-item p { margin: 0 0 14px; padding: 0; font-size: 0.875rem; line-height: 1.6; color: var(--ink-2); }
.m-sum .m-src { margin: 0; padding: 44px 20px 0; background: none; border: 0; }
.m-sum .m-faq + .m-src { padding-top: 14px; }
.m-sum .m-src p { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--muted); }
.m-sum .m-src a { color: var(--violet-ink); }
.m-sum .m-src a:hover { color: var(--violet-soft); }
/* จอ ≥768: การ์ดเทียบข้างเคียง 5 ใบเต็มแถวเดียว (CEO 2026-10-30) · ช่องเท่ากัน 5 ช่อง ข้อความในการ์ดตัดบรรทัดได้ ไม่ถูกตัดทิ้ง · จอแคบกว่านี้ = แถบเลื่อนแนวนอนเดิม */
@media (min-width: 768px) {
  .m-sum .m-ncs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; overflow: visible; }
  .m-sum .m-ncs .near-item { width: auto; min-width: 0; }
  .m-sum .m-ncs .m-nc { padding: 14px 6px; }
}
@media (prefers-reduced-motion: no-preference) {
  .m-sum .sm-spin, .m-sum .sm-orbit, .m-sum .sm-rev { transform-box: view-box; transform-origin: center; }
  .m-sum .sm-spin { animation: smSpin 100s linear infinite; }
  .m-sum .sm-orbit { animation: smSpin 30s linear infinite; }
  .m-sum .sm-rev { animation: smSpin 160s linear infinite reverse; }
  .m-sum .sm-r1 { stroke-dasharray: 805; animation: smDraw1 1.3s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
  .m-sum .sm-r2 { stroke-dasharray: 604; animation: smDraw2 1.3s cubic-bezier(0.3, 0.7, 0.2, 1) 0.25s both; }
  .m-sum .sm-twk circle { animation: smTwk 3.2s ease-in-out infinite; }
  .m-sum .sm-twk circle:nth-child(2n) { animation-delay: 1.1s; }
  .m-sum .sm-twk circle:nth-child(3n) { animation-delay: 2.1s; }
  .m-sum .sm-breath { animation: smBreath 3.6s ease-in-out infinite; }
  .m-sum .sm-pop { transform-box: fill-box; transform-origin: center; animation: smPop 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.3s both; }
  .m-sum .m-lv-mark { animation: smSlide 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both; }
  .m-orb::before { animation: smBreath 3.6s ease-in-out infinite; }
  @keyframes smSpin { to { transform: rotate(360deg); } }
  @keyframes smDraw1 { from { stroke-dashoffset: 805; } to { stroke-dashoffset: 0; } }
  @keyframes smDraw2 { from { stroke-dashoffset: 604; } to { stroke-dashoffset: 0; } }
  @keyframes smTwk { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }
  @keyframes smBreath { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } }
  @keyframes smPop { 0% { transform: scale(0.5); } 70% { transform: scale(1.1); } 100% { transform: none; } }
  @keyframes smSlide { from { transform: translateX(-120px); } to { transform: none; } }
}
/* จบ sum-v3 */
/* sum-v3-b · หน้าผลรวมทะเบียน บ้านเลขที่ ชื่อ /plate|house|name/sum-N/ ตามแบบ PlateSum5 HouseSum3 NameSum24.dc.html (CEO 2026-10-29 "ทำให้เหมือนแบบ 100%")
 * ต่อยอดคลาสของ sum-v3 · template "m-hero-b" "m-lvcell" "m-asp-icon-b" (pages/meaning.html) · ข้อมูล sum_v3b.go · ไม่มี style="" (CSP) */
.m-wp8 { font-family: var(--font-body); font-size: 8px; fill: #E3DDF2; }
.m-pl { font-family: var(--font-display); font-size: 20px; fill: #BAB2D6; }
.m-pn { font-family: var(--font-num); font-weight: 600; font-size: 34px; letter-spacing: 3px; fill: #E3DDF2; }
.m-pf { font-family: var(--font-body); font-size: 11px; letter-spacing: 1px; fill: #A39BC6; }
.m-pr { font-family: var(--font-num); font-weight: 600; font-size: 28px; fill: #E3C98D; }
.m-hn { font-family: var(--font-num); font-weight: 500; font-size: 52px; fill: #E3C98D; }
.m-nn { font-family: var(--font-num); font-weight: 500; font-size: 76px; fill: #E3C98D; }
/* เลขกลางวงล้อ hero (CEO 2026-10-30): ตัวเลข lining ไม่มีหางล่างชนคำสั้นใต้เลข · ขนาดตามจำนวนหลัก 2 หลัก 75% · 3 หลัก 60% (เส้นฐานจาก SumView.NumY) */
.m-wn, .m-hn, .m-nn, .m-pn, .m-pr { font-variant-numeric: lining-nums; }
.m-wn.is-d2 { font-size: 78px; }
.m-wn.is-d3 { font-size: 62px; }
.m-hn.is-d2 { font-size: 39px; }
.m-hn.is-d3 { font-size: 31px; }
.m-nn.is-d2 { font-size: 57px; }
.m-nn.is-d3 { font-size: 46px; }
.m-hn.m-wn-blur,
.m-nn.m-wn-blur { fill: #E0B56A; }
.m-nl text { font-family: var(--font-display); font-size: 14px; fill: #9D90D6; opacity: 0.8; }
/* ไอคอนรายด้าน: สีตามแบบของแต่ละชนิด (ด้านที่แบบไม่วาดใช้สีของหน้าเบอร์) */
.k-plate .m-asp-ic[data-a="aspect-trade"],
.k-name .m-asp-ic[data-a="aspect-trade"] { color: #6FBFB2; }
.k-plate .m-asp-ic[data-a="aspect-fortune"] { color: #D99A5C; }
.k-house .m-asp-ic[data-a="aspect-trade"] { color: #D9846E; }
.k-name .m-asp-ic[data-a="aspect-money"] { color: #E0B56A; }
.k-name .m-asp-ic[data-a="aspect-fortune"] { color: #D9BE6E; }
.k-name .m-asp-ic[data-a="aspect-patronage"] { color: #7FB3D3; }
/* ความหมายย่อ: ส่วนแยกใต้รายด้าน ชิปทอง */
.m-sum .m-tagsb { padding-top: 32px; }
.m-sum .m-tagsb .m-tb-h { margin: 0 0 10px; font-family: var(--font-body); font-weight: 400; font-size: 0.75rem; line-height: 1.6; letter-spacing: 2px; color: var(--muted-2); }
.m-sum .m-tagsb .chip-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.m-sum .m-tagsb.meaning-tags .chip-row li.chip { display: inline-block; min-height: 0; margin: 0; padding: 6px 12px; background: #2A2216; border: 1px solid #5C4E33; border-radius: 999px; font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.6; color: #E3C98D; }
/* ช่องระดับใต้การ์ดดาว (ในส่วนข้อมูลตามตำรา) */
.m-sum .m-sec .m-cells { margin: 10px 0 0; }
/* ตารางวันเกิด (ทะเบียน · ข้อความแถวเดิม) */
.m-dtab { margin-top: 14px; background: var(--surface); border: 1px solid var(--panel); border-radius: 18px; overflow: hidden; }
.m-sum .m-dtab-h { margin: 0; padding: 12px 16px 8px; font-size: 0.75rem; line-height: 1.6; color: var(--muted); }
.m-sum .m-dtab .m-dtab-list { display: block; margin: 0; padding: 0; list-style: none; }
.m-sum .m-dtab .m-dtab-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; margin: 0; padding: 0 16px; border-top: 1px solid var(--panel); font-size: 1rem; line-height: 1.5; color: var(--ink); }
.m-sum .m-dtab .m-dtab-list li::before { content: none; }
.m-dtab-v { flex: none; max-width: 55%; font-size: 0.875rem; color: var(--ink-2); text-align: right; }
.m-sum .m-dtab .m-dtab-list li.t-bad { background: rgba(217, 132, 110, 0.06); }
.m-sum .m-dtab .m-dtab-list li.t-good { background: rgba(111, 191, 178, 0.06); }
.t-bad .m-dtab-v { color: #D9846E; }
.t-good .m-dtab-v { color: #6FBFB2; }
/* การ์ดลอง: ตัวอักษรช่องกรอกตามแบบ */
.k-plate .m-try-in,
.k-name .m-try-in { font-family: var(--font-display); letter-spacing: 1px; }
.k-plate .m-try-in { font-size: 1.375rem; }
.k-name .m-try-in { font-size: 1.25rem; }
.k-house .m-try-in { letter-spacing: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .m-sum .sm-r3 { stroke-dasharray: 629; animation: smDraw3 1.3s cubic-bezier(0.3, 0.7, 0.2, 1) 0.25s both; }
  .m-sum .sm-r4 { stroke-dasharray: 541; animation: smDraw4 1.3s cubic-bezier(0.3, 0.7, 0.2, 1) 0.25s both; }
  .m-sum .sm-hp { stroke-dasharray: 560; animation: smDrawH 1.3s cubic-bezier(0.3, 0.7, 0.2, 1) 0.2s both; }
  .m-sum .sm-pop.sm-d2 { animation-delay: 0.2s; }
  .m-sum .sm-pop.sm-d9 { animation-delay: 0.9s; }
  @keyframes smDraw3 { from { stroke-dashoffset: 629; } to { stroke-dashoffset: 0; } }
  @keyframes smDraw4 { from { stroke-dashoffset: 541; } to { stroke-dashoffset: 0; } }
  @keyframes smDrawH { from { stroke-dashoffset: 560; } to { stroke-dashoffset: 0; } }
}
/* จบ sum-v3-b */
/* sum-v3-b (ต่อ): ป้ายตกแต่งที่ซ้ำข้อมูลในหน้า (หัวเล็กเหนือหัวข้อ ป้ายแถบระดับ ชิประดับ ช่องระดับ การ์ดหน้านี้ในแถบเลขข้างเคียง)
 * วาดจาก data-eb ด้วย ::before + aria-hidden ตามกฎป้ายตกแต่ง · ข้อความเนื้อหาไม่ใช้วิธีนี้ (มติ C7 ซ้ำข้ามหน้า ≤ 60%) */
.m-sum [data-eb]::before { content: attr(data-eb); }
.m-sum .m-nc-n[data-eb]::before { line-height: 1; }
.k-plate .m-src strong,
.k-house .m-src strong,
.k-name .m-src strong { font-weight: 500; color: var(--ink-2); }
/* จบ sum-v3-b (ต่อ) */
/* deep-v3 (CEO 2026-10-29 "ทำให้เหมือนแบบ 100%"): หน้าเลขชีวิต นักษัตร ปาจื้อ ตามแบบ LifePath7 ZodiacHorse BaziXin
   · template components/meaning-deep.html (define "m-deep") · ข้อมูล internal/httpapi/deep_v3.go · ใช้คลาสพื้นของ sum-v3 (.m-sum) */
.m-deep .m-eb { color: var(--muted-2); }
.m-dlbl { font-family: var(--font-num); font-size: 11px; letter-spacing: 3px; fill: #A39BC6; }
.m-dfig { font-family: var(--font-body); font-size: 10px; letter-spacing: 1px; fill: #BAB2D6; }
.m-dzh text { font-family: var(--font-num); font-weight: 500; font-size: 15px; fill: #A39BC6; }
.m-dzh text.is-self { font-weight: 600; }
.m-dzbig { font-family: var(--font-num); font-weight: 600; font-size: 52px; fill: #E3C98D; }
.m-dorb { font-family: var(--font-body); font-size: 9px; fill: #E3DDF2; }
html[lang="en"] .m-dorb { font-size: 7px; }
.m-deep-bz .m-h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
.m-dstem { font-family: var(--font-num); font-weight: 600; font-size: 30px; fill: #E3C98D; }
/* โทนธาตุ (ชิป ค่าในช่อง) */
.m-deep { --el-wood: #6FB58F; --el-fire: #D9846E; --el-earth: #D9BE6E; --el-metal: #D8D2E8; --el-water: #7FB3D3; }
.m-deep .el-wood { --gc: var(--el-wood); }
.m-deep .el-fire { --gc: var(--el-fire); }
.m-deep .el-earth { --gc: var(--el-earth); }
.m-deep .el-metal { --gc: var(--el-metal); }
.m-deep .el-water { --gc: var(--el-water); }
.m-deep .m-gchip.el-wood { background: #12292A; border-color: #2E5652; }
.m-deep .m-gchip.el-fire { background: #33211D; border-color: #4A2E28; }
.m-deep .m-gchip.el-earth { background: #2A2216; border-color: #5C4E33; }
.m-deep .m-gchip.el-metal { background: #221F30; border-color: #4A4562; }
.m-deep .m-gchip.el-water { background: #14222E; border-color: #2C4A5E; }
.m-deep .m-chips .eyebrow { padding: 6px 12px; background: var(--surface); border: 1px solid var(--panel); border-radius: 999px; font-size: 0.8125rem; line-height: 1.6; letter-spacing: 0; color: var(--ink-2); }
.m-deep .m-chips .eyebrow a { color: var(--ink-2); text-decoration: none; }
.m-deep .m-chips .eyebrow a:hover { color: var(--ink); }
/* สองด้าน: การ์ดเขียว (จุดเด่น) การ์ดส้ม (ข้อท้าทาย) */
.m-dtwo-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
.m-dside { --sd: #6FBFB2; padding: 16px; background: #10201E; border: 1px solid #22504A; border-radius: 18px; }
.m-dside.is-warn { --sd: #D9846E; background: #1A1420; border-color: #4A2E28; }
.m-deep .m-dside h3 { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 0.75rem; line-height: 1.6; letter-spacing: 1px; color: var(--sd); scroll-margin-top: 96px; }
.m-deep .m-dside p { margin: 6px 0 0; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
/* เลขที่เข้ากัน */
.m-deep .m-dcmp-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.m-dcmp-row { --cc: #6FBFB2; display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--panel); border-radius: 14px; }
.m-dcmp-row.is-hard { --cc: #D9846E; background: #1A1420; border-color: #4A2E28; }
.m-dcmp-l { flex: none; width: 68px; font-size: 0.8125rem; line-height: 1.6; color: #A39BC6; }
.is-hard .m-dcmp-l { color: var(--cc); }
.m-dcmp-ds { display: flex; flex-wrap: wrap; gap: 6px; }
.m-dcmp-d { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--cc); color: var(--cc); font-family: var(--font-num); font-size: 1.125rem; line-height: 1; }
.m-dnote { margin-top: 12px; }
.m-deep .m-dnote h3 { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 0.8125rem; line-height: 1.6; color: #A39BC6; scroll-margin-top: 96px; }
.m-deep .m-dnote p { margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.6; color: #A39BC6; }
/* ความสัมพันธ์กับปีอื่น */
.m-deep .m-drel-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.m-drel-row { --rc: #6FBFB2; display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; background: #10201E; border: 1px solid #22504A; border-radius: 18px; }
.m-drel-row.t-gold { --rc: #E3C98D; background: #211C14; border-color: #5C4E33; }
.m-drel-row.t-warn { --rc: #D9846E; background: #1A1420; border-color: #4A2E28; }
.m-drel-hs { flex: none; display: flex; gap: 4px; }
.m-drel-h { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--rc); color: var(--rc); font-family: var(--font-num); font-size: 1.125rem; line-height: 1; }
.m-drel-tx { min-width: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--ink-2); }
.m-drel-tx strong { font-weight: 500; font-size: 1rem; color: var(--ink); }
/* วงจรห้าธาตุ */
.m-dcyc-card { margin-top: 14px; padding: 20px 16px 16px; background: var(--surface); border: 1px solid var(--panel); border-radius: 18px; }
.m-dcyc-svg { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; overflow: visible; }
.m-dcyc-e { font-family: var(--font-body); font-size: 15px; }
.m-dcyc-h { font-family: var(--font-num); font-weight: 600; font-size: 24px; fill: #E3C98D; }
.m-dcyc-l { font-family: var(--font-body); font-size: 9px; fill: #E3DDF2; }
.m-dcyc-card .m-dnote { margin-top: 14px; }
.m-deep .m-dcyc-card .m-dnote p { font-size: 0.875rem; color: var(--ink-2); }
/* ข้อมูลตามตำรา: การ์ดสีมงคล การ์ดเหอถู ช่องข้อมูล */
.m-deep .m-ddl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; }
.m-deep .m-ddl > .m-dcell { display: block; margin: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--panel); border-radius: 14px; }
.m-deep .m-dcell dt { margin: 0; font-size: 0.75rem; font-weight: 400; line-height: 1.6; color: var(--muted); }
.m-deep .m-dcell dd { margin: 2px 0 0; font-family: var(--font-display); font-size: 1rem; line-height: 1.6; color: var(--ink); }
.m-deep .m-dcell dd[class] { color: var(--gc); }
.m-deep .m-ddl > .m-dcol { position: relative; grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: center; min-height: 98px; box-sizing: border-box; padding: 16px 16px 16px 96px; background: var(--surface); border: 1px solid var(--panel); border-radius: 18px; }
.m-dsw { position: absolute; left: 16px; top: 50%; margin-top: -32px; }
.m-dsw-a { fill: rgb(var(--tc, 160, 150, 200)); opacity: 0.5; }
.m-dsw-b { fill: #15112A; stroke: rgb(var(--tc, 160, 150, 200)); stroke-width: 1; }
.m-dsw-c { fill: rgb(var(--tc, 160, 150, 200)); opacity: 0.3; }
.m-dsw-h { position: absolute; left: 16px; top: 50%; width: 64px; margin-top: -14px; font-family: var(--font-num); font-weight: 600; font-size: 1.25rem; line-height: 28px; text-align: center; color: #F4F1FA; }
.m-deep .m-dcol dt { order: 2; margin: 4px 0 0; font-size: 0.875rem; font-weight: 400; line-height: 1.6; color: var(--ink-2); }
.m-deep .m-dcol dd { order: 1; margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; line-height: 1.6; color: var(--ink); }
.m-dhetu { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 98px; box-sizing: border-box; margin-top: 14px; padding: 16px 16px 16px 96px; background: var(--surface); border: 1px solid var(--panel); border-radius: 18px; }
.m-dhetu-ic { position: absolute; left: 16px; top: 50%; margin-top: -32px; }
.m-dhetu-n { position: absolute; left: 16px; top: 50%; width: 64px; margin-top: -14px; font-family: var(--font-num); font-weight: 600; font-size: 1.125rem; line-height: 28px; text-align: center; color: #F4F1FA; }
.m-dhetu-tx strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; line-height: 1.6; color: var(--ink); }
.m-dhetu-tx p { margin: 4px 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--ink-2); }
.m-dhetu + .m-ddl { margin-top: 8px; }
.m-deep .m-ddl > .m-dcell:first-child:nth-last-child(2n+1) { grid-column: 1 / -1; }
/* ความหมายย่อ: หัวข้อแบบ eyebrow + ชิปทอง */
.m-deep .m-dtags { padding-top: 32px; }
.m-deep .m-dtags-h { margin: 0 0 10px; font-family: var(--font-body); font-weight: 400; font-size: 0.75rem; line-height: 1.6; letter-spacing: 2px; color: var(--muted-2); }
.m-deep .m-dtags .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.m-sum.m-deep .m-dtags .chip-row li.chip { min-height: 0; margin: 0; padding: 6px 12px; background: #2A2216; border: 1px solid #5C4E33; border-radius: 999px; font-size: 0.8125rem; line-height: 1.6; color: #E3C98D; }
/* การ์ดเทียบข้างเคียง: อักษรจีน/เลข ในวงกลม */
.m-deep .m-nc-n { --gc: var(--panel); font-family: var(--font-num); font-weight: 500; font-size: 1.75rem; color: var(--ink); }
.m-deep .m-nc-n.is-han { font-size: 1.5rem; font-weight: 600; }
.m-deep .is-current .m-nc-n { --gc: #B39CF5; color: #B39CF5; }
.m-deep .m-nc-t { margin-top: 8px; color: var(--ink-2); }
.m-deep .m-nc-name { color: var(--muted); }
.m-deep .m-ncs .near-item { width: 108px; }
.m-deep .m-src .m-dby { gap: 8px; margin: 6px 0 0; font-size: 0.8125rem; line-height: 1.6; }
.m-deep .m-src .by-av { width: 24px; height: 24px; font-size: 0.75rem; }
@media (min-width: 768px) {
  .m-dtwo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-deep .m-ncs .near-item { width: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .m-deep .m-dline { stroke-dasharray: 1; animation: dpDraw 1.6s cubic-bezier(0.3, 0.7, 0.2, 1) 0.4s both; }
  .m-deep .m-dline-2 { animation-delay: 0.7s; }
  .m-deep .m-dline-3 { animation-delay: 1s; }
  @keyframes dpDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}
/* จบ deep-v3 */
/* pee-chong (คืนเนื้อหา prod · แมว 2026-10-30)
   · H1 ตามแบบ 2 บรรทัด + บรรทัดเล็ก (คำหลักเดิม) · หัวตารางเดิมวางช่อง eyebrow ใน h2 + ย่อหน้าใต้หัว
   · แถวปีเกิด: ค.ศ. และวันเริ่มปีนักษัตรเป็นบรรทัดเล็กใต้ช่อง (แบบ ct-sub ของตารางสี)
   · หัวข้อเดิมที่แบบไม่มีที่วาง ต่อท้ายตาราง: หัวข้อ serif 24 ย่อหน้า ink-2 (จังหวะเดียวกับหน้าวันเกิด) */
.h1-c .h1-sub { display: block; margin-top: 10px; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 400; line-height: 1.5; color: var(--ink-2); }
.c-h2-kick .c-kick { display: block; margin: 0 0 6px; font-family: var(--font-body); font-weight: 400; line-height: 1.6; }
.c-h2-kick .c-kick-main { display: block; }
.yr-note { margin: 8px 0 0; }
.yr-sub { display: block; font-family: var(--font-body); font-size: var(--text-xs); line-height: 1.5; color: var(--muted); }
.yr-tbl .ctbl-row.is-chong .yr-sub { color: var(--ink-2); }
.ph-chong ~ .c-sec-pc { padding-top: 44px; }
.ph-chong ~ #hai,
.ph-chong ~ #po,
.ph-chong ~ #xing { padding-top: 28px; }
.ph-chong ~ .c-sec-pc .c-h2 { margin: 0 0 8px; font-size: 1.5rem; font-weight: 500; line-height: 1.3; }
.ph-chong ~ .c-sec-pc p { margin: 8px 0 0; font-size: var(--text-base-s); line-height: 1.6; color: var(--ink-2); }
/* จบ pee-chong */

/* หน้าสี /color/ /color/2570/ /color/nail/2570/ ภาษาภาพเดียวกับ /color/shirt/ · สีวงจาก .tn-* (main.css) · :where = ไม่ทับ .tn-* ที่อยู่ในไฟล์ก่อนหน้า */
:where(.hub-card, .cc-card) { --tc: 163, 155, 198; }
.sw-sm { width: 12px; height: 12px; box-shadow: 0 0 8px rgba(var(--tc), 0.45); }
.sw-dot { width: 12px; height: 12px; margin-right: 8px; box-shadow: 0 0 8px rgba(var(--tc), 0.5); }
.sw-nail { display: block; width: 20px; height: 34px; border: 0; border-radius: 10px 10px 6px 6px; background: radial-gradient(circle at 38% 22%, rgba(255, 255, 255, 0.4), rgb(var(--tc)) 58%); box-shadow: 0 0 14px rgba(var(--tc), 0.35); }
.ph-gen .h1-kw { line-height: 1.6; }
@media (min-width: 768px) {
  .ph-shirt.ph-gen .page-head-inner > h1 { max-width: 16em; }
  .ph-shirt.ph-gen .h1-display { max-width: none; }
}

/* หน้ารวม: แผงเรืองแสง · การ์ดที่มีปลายทางเดียวกดได้ทั้งใบ · การ์ด 8 วันกว้างเต็มแถว */
.hub-panel { gap: 18px; }
.hub-panel-top { display: flex; align-items: center; gap: 14px; }
.hub-panel-top .c-h2 { margin: 0; font-size: 1.5rem; line-height: 1.4; }
.hub-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hub-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; background: radial-gradient(circle at 50% 0%, rgba(var(--tc), 0.14), var(--surface) 72%); border: 1px solid rgba(var(--tc), 0.4); border-radius: var(--radius-md); transition: border-color var(--speed); }
.hub-card:has(.hub-card-link):hover { border-color: rgb(var(--tc)); }
/* การ์ดที่ 4 เป็นตัวรวมชิป 8 วัน ไม่ใช่ปลายทาง: ไม่มีพื้น กรอบ ลูกศร และ hover เหมือน 3 ใบแรก */
.hub-card-wide { padding: 16px 0 0; background: none; border: 0; border-top: 1px solid var(--panel); border-radius: 0; }
.hub-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.hub-card-wide .hub-card-top { justify-content: flex-start; }
.hub-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--gold-2); }
.hub-ico svg { display: block; }
.hub-han { font-size: var(--text-md); line-height: 1; letter-spacing: 0; }
.hub-num { font-family: var(--font-num); font-variant-numeric: lining-nums; font-size: var(--text-2xl); line-height: 1; }
.hub-orbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; }
.hub-orbs .sw-lg { margin: 0; }
.hub-card-name { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; line-height: 1.6; color: var(--ink); }
.hub-card-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: inherit; text-decoration: none; }
.hub-card-link:hover { color: inherit; }
.hub-card-link .icon-chevron { flex: none; color: var(--placeholder); }
.hub-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hub-card-text { margin: 0; font-size: var(--text-md); line-height: 1.7; color: var(--ink-2); }
.hub-card .day-chips { margin-top: 4px; }
@media (min-width: 768px) {
  .hub-panel { gap: 22px; padding: 26px 24px; }
  .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-card-wide { grid-column: 1 / -1; }
  .sw-sm { width: 14px; height: 14px; }
}

/* แผงเรืองแสงใต้หัวหน้า (ปี 2570 สีเล็บ) */
.cp-top { display: flex; align-items: center; gap: 14px; }
.cp-top .c-eyebrow { flex: 1; min-width: 0; font-size: var(--text-md); line-height: 1.6; letter-spacing: 1px; }
.cp-han { flex: none; font-size: 2.25rem; line-height: 1.2; color: var(--gold-2); text-shadow: 0 0 24px rgba(235, 184, 105, 0.35); }
.cp-body { display: flex; flex-direction: column; gap: 14px; }
.cp-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.cp-box { display: flex; flex-direction: column; justify-content: center; padding: 12px; background: var(--surface-2); border: 1px solid var(--panel); border-radius: var(--radius-md); text-align: center; }
.cp-box dt { font-size: var(--text-md); line-height: 1.6; color: var(--muted); }
.cp-box dd { margin: 2px 0 0; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.6; color: var(--ink); }
.cp-box.is-gold dd { color: var(--gold-2); }
.cp-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cp-tiles-head { margin: 0; font-size: var(--text-md); line-height: 1.6; color: var(--ink-2); }
.cp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cp-tile { padding-left: 6px; padding-right: 6px; }
.cp-tile-txt { display: flex; flex-direction: column; min-width: 0; }
.cp-tile .pick-tl { font-size: var(--text-md); line-height: 1.6; letter-spacing: 0; }
.cp-tile .pick-tn { line-height: 1.6; }
.cp-tile-avoid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cp-tiles-nail { grid-template-columns: 1fr; }
.cp-tiles-nail .cp-tile { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; text-align: left; background: radial-gradient(circle at 0% 50%, rgba(var(--tc), 0.28), var(--surface) 75%); }
.cp-tiles-nail .cp-tile-txt { flex: 1; }
.cp-tiles-nail .cp-tile-avoid { flex: none; align-items: flex-end; }
@media (min-width: 768px) {
  .cp-card { padding: 26px 24px; }
  .cp-body.has-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: stretch; gap: 16px; }
  .cp-tiles-nail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-tiles-nail .cp-tile { flex-direction: column; gap: 8px; padding: 18px 12px; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(var(--tc), 0.28), var(--surface) 75%); }
  .cp-tiles-nail .cp-tile-txt { flex: none; }
  .cp-tiles-nail .cp-tile-avoid { align-items: center; }
}

/* การ์ดสี: หัว = ดาวหรือวันเกิด · แถวสีเป็นวงกลม · บางตำราเพิ่ม = จุดรอง · กดได้ทั้งใบเมื่อหัวเป็นลิงก์ */
.cc-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.cc-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--panel); border-radius: var(--radius-md); transition: border-color var(--speed); }
.cc-card.has-tone { background: radial-gradient(circle at 50% 0%, rgba(var(--tc), 0.2), var(--surface) 68%); }
.cc-card:has(.cc-link):hover { border-color: rgba(var(--tc), 0.75); }
.cc-name { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; line-height: 1.5; color: var(--ink); }
.cc-orb { flex: none; margin: 0; }
.cc-link { color: inherit; text-decoration: none; }
.cc-link:hover { color: inherit; }
.cc-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cc-rows { display: flex; flex: 1; flex-direction: column; gap: 10px; margin: 0; }
.cc-row dt { font-size: var(--text-md); line-height: 1.6; color: var(--muted); }
.cc-row dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; font-size: var(--text-md); line-height: 1.6; color: var(--ink); }
.cc-row .swc { font-size: var(--text-md); text-transform: capitalize; }
.cc-row:not(.cc-minor) .swc { padding: 3px 10px 3px 6px; background: var(--surface-2); border: 1px solid rgba(var(--tc), 0.4); border-radius: var(--radius-pill); }
.cc-row .ct-none { font-size: var(--text-md); }
.cc-row .sw { border-color: rgba(255, 255, 255, 0.28); }
.cc-minor dd { gap: 4px 12px; color: var(--ink-2); }
.cc-minor .sw { width: 12px; height: 12px; }
.cc-row.cc-avoid .swc { border-style: dashed; background: none; color: var(--ink-2); }
.cc-row.cc-avoid .sw { opacity: 0.7; }
.cc-avoid { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.cc-day { padding: 0 12px; background: var(--surface-2); border-color: var(--panel); font-size: var(--text-md); text-align: center; }
@media (min-width: 600px) { .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* โฟกัสคีย์บอร์ดของการ์ดกดได้ทั้งใบ: วาดกรอบที่ตัวการ์ด (เบราว์เซอร์ไม่มี :has ใช้กรอบของลิงก์ตามเดิม) */
@supports selector(:has(a)) {
  .hub-card-link:focus-visible,
  .cc-link:focus-visible { outline: none; }
  .hub-card:has(.hub-card-link:focus-visible),
  .cc-card:has(.cc-link:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
}

/* หมวดสีตามตำราห้าธาตุ /color/five-elements/ (ภาษาภาพเดียวกับ /color/shirt/ · สีวงจาก .tn-* · ข้อความไม่ต่ำกว่า 14px · รายการเป็นการ์ดบนมือถือ) */
.ph-five .eyebrow { font-size: var(--text-md); letter-spacing: 1px; }
.cp-tiles-one { grid-template-columns: 1fr; }
/* การ์ดนี้มีชิปลิงก์ข้างใน จึงไม่กดได้ทั้งใบ: พื้นที่แตะ 44px hover และกรอบโฟกัสอยู่ที่ลิงก์ที่โฟกัสจริง */
.hub-card-span .hub-card-link { min-height: 44px; }
.hub-card-span .hub-card-link::after { content: none; }
.hub-card-span:has(.hub-card-link):hover { border-color: rgba(var(--tc), 0.4); }
.hub-card-span .hub-card-link:hover { color: var(--gold-2); }
.hub-card-span .hub-card-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@supports selector(:has(a)) {
  .hub-card-span:has(.hub-card-link:focus-visible) { outline: none; }
}
.cp-box.is-bare dd { margin: 0; color: var(--gold-2); }
.cp-box.is-bare dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fe-chips { margin: 4px 0 0; padding: 0; list-style: none; }
.fe-dot { width: 12px; height: 12px; margin-right: 8px; box-shadow: 0 0 8px rgba(var(--tc), 0.5); }
.fe-panel { margin-top: var(--sp-4); }
.fe-panel > .c-emblem { position: absolute; top: -8px; right: -8px; opacity: 0.3; pointer-events: none; }
.fe-panel .fe-tbl { position: relative; margin-top: 0; }
.fe-tbl .ctbl-head { display: none; font-size: var(--text-md); line-height: 1.6; letter-spacing: 0; color: var(--muted); }
.fe-tbl .ctbl-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px 12px; padding: 14px; }
.fe-el { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.fe-el-han { font-size: 1.5rem; line-height: 1.3; color: var(--gold-2); }
.fe-el .ct-name { font-size: var(--text-lg); line-height: 1.6; }
.fe-cell { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--text-md); line-height: 1.6; color: var(--ink); }
.fe-cell-color { grid-column: 1 / -1; }
.fe-lbl { font-size: var(--text-md); line-height: 1.6; color: var(--muted); }
.fe-tbl .swc { font-size: var(--text-md); line-height: 1.6; }
.fe-tbl .sw { border-color: rgba(255, 255, 255, 0.28); }
.fe-stem-han { font-size: 1.25rem; line-height: 1.4; color: var(--gold-2); }
.fe-stem-tbl { margin-top: var(--sp-4); }

.fe-wheels { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: var(--sp-4); }
.fe-wheel-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 16px 14px; background: var(--surface); border: 1px solid var(--panel); border-radius: var(--radius-lg); }
.fe-wheel-head { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.6; text-align: center; color: var(--ink); }
.fe-wheel-head .han { color: var(--gold-2); }
.fe-wheel { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.fe-orbit { fill: none; stroke: var(--panel); stroke-width: 1; }
.fe-line { fill: none; stroke-width: 2; }
.fe-wheel-sheng .fe-line { stroke: var(--gold-2); }
.fe-wheel-sheng .fe-arrow { fill: var(--gold-2); }
.fe-wheel-ke .fe-line { stroke: #D9846E; stroke-dasharray: 6 4; }
.fe-wheel-ke .fe-arrow { fill: #D9846E; }
.fe-node circle { fill: rgb(var(--tc)); stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; }
.fe-node text { fill: var(--on-gold); }
.fe-node.tn-black circle { stroke: rgb(var(--tt)); }
.fe-node.tn-black text { fill: var(--ink); }
.fe-n-han { font-family: var(--font-han), var(--font-body); font-size: 22px; }
.fe-n-name { font-family: var(--font-body); font-size: 17px; }
.fe-hub { fill: var(--surface); stroke: var(--panel); stroke-width: 1; }
.fe-hub-t { fill: var(--gold-2); font-family: var(--font-han), var(--font-body); font-size: 20px; }
.fe-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 12px; margin: 0; padding: 0; list-style: none; }
.fe-steps li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--text-md); line-height: 1.6; color: var(--ink-2); }
.fe-steps .han { color: var(--gold-2); }

.fe-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.fe-tile-han { margin-bottom: 6px; font-size: 1.75rem; line-height: 1.3; color: var(--gold-2); }
.fe-tiles .pick-tn { line-height: 1.6; }
.fe-tiles .pick-tl { font-size: var(--text-md); line-height: 1.6; letter-spacing: 0; }
.fe-note { margin: 10px 0 0; font-size: var(--text-md); line-height: 1.6; color: var(--muted); }

.fe-rels { display: grid; grid-template-columns: 1fr; gap: 8px; margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.fe-rels .cc-card { gap: 6px; }
.fe-rel-l { font-size: var(--text-md); line-height: 1.6; color: var(--muted); }
.fe-rel-n { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.5; color: var(--ink); }
.fe-rel-c { font-size: var(--text-md); line-height: 1.6; color: var(--ink-2); }
.fe-rel-p { margin-left: 6px; color: var(--gold-2); }

.fe-compare { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: var(--sp-4); }
.fe-book { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--panel); border-radius: var(--radius-md); }
.fe-book-h { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; line-height: 1.5; color: var(--ink); }
.fe-book-rows { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.fe-book-rows dt { font-size: var(--text-md); line-height: 1.6; color: var(--muted); }
.fe-book-rows dd { margin: 2px 0 0; font-size: var(--text-md); line-height: 1.6; color: var(--ink); }
.fe-book-link { align-self: flex-start; }

@media (min-width: 480px) {
  .fe-rels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fe-tiles { max-width: 480px; }
}
@media (min-width: 768px) {
  .hub-card-span { grid-column: 1 / -1; }
  .fe-panel { padding: 26px 24px; }
  .fe-tbl .ctbl-head { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr 1fr; padding: 12px 18px; }
  .fe-tbl .ctbl-row { grid-template-columns: 1.2fr 1.4fr 1fr 1fr; align-items: center; padding: 12px 18px; }
  .fe-stem-tbl .ctbl-head,
  .fe-stem-tbl .ctbl-row { grid-template-columns: 1fr 1.4fr 1.4fr; }
  .fe-el,
  .fe-cell-color { grid-column: auto; }
  .fe-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .fe-stem { flex-direction: row; align-items: center; gap: 10px; }
  .fe-wheels,
  .fe-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fe-rels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}