/* ══════════════════════════════════════════════════════════════════════════════ seo-c.css · Direction C — "กล้า" Concept: THE CELESTIAL PLATE. ในทักษา สีมงคลไม่ใช่ "สี" — มันคือ *ดาว* (แดง=อาทิตย์ · ขาว=จันทร์ · เขียว=พุธ · ดำม่วง=เสาร์). หน้านี้จึงเรนเดอร์ สีมงคลเป็นดวงดาวจริง ๆ: ทรงกลมมีแสงตกกระทบ + วงโคจร ลอยบนแผนที่ดาว CSS ล้วน. วงแหวน (orbit) = signature เดียวที่ไล่ทุกสเกล — ดาว → หัวข้อ → CTA. Identity: ต่อยอดจาก app.css (Oracle · nebula cosmic) ไม่ใช่แบรนด์ใหม่ · เส้นขอบ default = hairline "ทอง" rgba(231,200,122,.24) ← ลายเซ็นแบรนด์ (ไม่ใช่ขาว) · panel = โปร่ง rgba(16,20,36,.62) + backdrop blur · ทองคือ accent เท่านั้น · void มืดสงบ · ไม่ใช่ร้านดูดวงไฟนีออน Pure CSS · ไฟล์เดียว · ไม่มี JS/canvas/รูป/asset ภายนอก · ~640 บรรทัด ══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── foundation (ตรงกับ app.css :root) ── */ --bg:#060811; --bg2:#0a0e1c; --panel:rgba(16,20,36,.62); --panel-solid:#0e1426; --ink:#f0eefa; --muted:#abb1cd; --faint:#9298b8; --gold:#e7c87a; --gold-2:#d2af66; --gold-soft:rgba(231,200,122,.30); --gold-hi:#f3dd9e; /* ไฮไลต์บนโลหะ (ต้นไล่สีของปุ่ม/เหรียญ) */ --gold-ink:#1a1405; /* ตัวอักษรบนพื้นทอง — คู่เดียวที่ผ่าน contrast บนทอง */ --line:rgba(231,200,122,.24); /* ← ลายเซ็น: hairline ทอง ไม่ใช่ขาว */ --line-soft:rgba(155,162,196,.26); --violet:#a78bfa; --aqua:#5fd6c4; --blue:#4a5e91; /* สีเนบิวลา — ใช้ในผืนฟ้า + .vs-col */ --pos:#6fc79b; --neg:#e58fb0; /* ── PER-PAGE ACCENT ────────────────────────────────────────────────────── ทั้งไฟล์บริโภค --accent ตัวเดียว (ไม่ hardcode ทอง). หน้าอื่นรีสกินด้วยการ สลับ token ชุดเดียวที่ — build_public_pages.py ใส่ attribute ตาม cluster (ไพ่/ฝัน=violet · ฤกษ์=jade · ปฏิทิน=blue). ปุ่มหลักยังทองเสมอ (ทอง = แบรนด์, accent = บรรยากาศระดับ component) ⚠️ ผืนฟ้าไม่ผูกกับ accent — DESIGN.md: ฟ้าเป็นผืนเดียวทั้งแอป ────────────────────────────────────────────────────────────────────────── */ --accent:var(--gold); --accent-soft:var(--gold-soft); } [data-accent="violet"]{ --accent:#a78bfa; --accent-soft:rgba(167,139,250,.34) } /* ทาโรต์ · ฝัน · กรรมเก่า */ [data-accent="jade"] { --accent:#6fd69b; --accent-soft:rgba(111,214,155,.30) } /* ฤกษ์งามยามดี */ [data-accent="blue"] { --accent:#86a6e6; --accent-soft:rgba(134,166,230,.32) } /* ปฏิทิน · ตะวันตก */ [data-accent="teal"] { --accent:#6fd6c4; --accent-soft:rgba(111,214,196,.30) } /* เลขศาสตร์ (ยังไม่มีหน้า — เผื่อ C5 pillar) */ [data-accent="rose"] { --accent:#e58fb0; --accent-soft:rgba(229,143,176,.30) } /* คู่รัก (ยังไม่มีหน้า) */ /* ── FONTS ──────────────────────────────────────────────────────────────────── 🔴 บั๊กเดิม: seo.css ประกาศ --serif:'Cormorant Garamond','Noto Serif Thai' แต่หน้าโหลดแค่ Anuphan + Cormorant — และ Cormorant ไม่มีสระ/พยัญชนะไทยเลย → หัวข้อไทยทั้ง 277 หน้าตกไปใช้ system serif. ตอนนี้หน้าโหลดครบ 4 ฟอนต์แล้ว จึงกำหนดบทบาทให้ตรง: Latin ก่อน / Thai ตาม (เบราว์เซอร์เลือกต่อ glyph) */ :root{ --serif-en:"Cormorant Garamond",serif; /* Latin/ตัวเลข display เท่านั้น */ --display:"Cormorant Garamond","Noto Serif Thai",serif; /* หัวข้อไทย+Latin ปนกัน */ --read-th:"Anuphan","IBM Plex Sans Thai",sans-serif; /* เนื้อความยาว */ --sans:"IBM Plex Sans Thai","IBM Plex Sans",system-ui,sans-serif; /* UI/label/chip/ปุ่ม */ } *{box-sizing:border-box} html{color-scheme:dark; overflow-x:clip; scroll-behavior:smooth} /* clip (ไม่ใช่ hidden) → sticky header ยังทำงาน */ body{ margin:0; overflow-x:clip; min-height:100vh; color:var(--ink); font-family:var(--read-th); font-size:16.8px; line-height:1.85; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* เนบิวลาคงที่ ชุดเดียวกับ app.css — ม่วงบน-ซ้าย · aqua บน-ขวา · น้ำเงินกลาง-บน ⚠️ ห้ามผูกชั้นนี้กับ --accent: DESIGN.md ระบุว่า "ท้องฟ้าเป็นผืนเดียวทั้งแอป ไม่สลับรายหน้า" (กลไก .app[data-skin] ถูกถอดทิ้งไปแล้วตั้งแต่ยุค React — อย่าเอากลับมาใต้ชื่อใหม่) --accent เป็น "บรรยากาศระดับ component" เท่านั้น (halo/วงแหวน/เส้นเน้น) ไม่ใช่ผืนฟ้า ⚠️ แยก background-color ออกจาก background-image โดยตั้งใจ: ถ้าเบราว์เซอร์เก่าไม่รู้จัก color-mix() ทั้ง "ชุด" background-image จะ invalid → ถ้าใช้ shorthand จะเสียพื้นหลังทั้งก้อน กลายเป็นหน้าขาว. แยกแบบนี้ = อย่างแย่สุดคือเสียเนบิวลา แต่ void ยังอยู่ อ่านได้ปกติ */ background-color:var(--bg); background-image: radial-gradient(50% 36% at 14% 3%, color-mix(in srgb, var(--violet) 20%, transparent), transparent 62%), radial-gradient(46% 40% at 88% 10%, color-mix(in srgb, var(--aqua) 15%, transparent), transparent 60%), radial-gradient(64% 46% at 50% -8%, color-mix(in srgb, var(--blue) 34%, transparent), transparent 68%), radial-gradient(90% 90% at 50% 26%, var(--bg2) 0%, var(--bg) 74%); background-attachment:fixed; } /* ── CSS STARFIELD ──────────────────────────────────────────────────────────── แอปใช้ วาดดาว — หน้า SEO ห้ามมี JS. จึงทอเองเป็น 2 ชั้น: tile ของ radial-gradient จุดเล็ก ขนาด tile ต่างกัน → ไม่เป็นกริด. ชั้นลึกกะพริบ, ชั้นตื้นเลื่อนช้ามาก (transform = compositor ล้วน ไม่ repaint). 0 byte, 0 request. */ body::before, body::after{ content:""; position:fixed; z-index:0; pointer-events:none; inset:-30% } body::before{ background-image: radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,.9), transparent 62%), radial-gradient(1px 1px at 62% 8%, rgba(231,200,122,.75), transparent 62%), radial-gradient(1.2px 1.2px at 84% 46%, rgba(255,255,255,.6), transparent 62%), radial-gradient(1px 1px at 34% 71%, rgba(167,139,250,.7), transparent 62%), radial-gradient(1.5px 1.5px at 8% 88%, rgba(255,255,255,.55), transparent 62%), radial-gradient(1px 1px at 72% 93%, rgba(95,214,196,.6), transparent 62%), radial-gradient(1px 1px at 47% 38%, rgba(255,255,255,.45), transparent 62%); background-size:330px 330px; opacity:.62; animation:twinkle 7.5s ease-in-out infinite; } body::after{ background-image: radial-gradient(1.8px 1.8px at 76% 16%, rgba(255,255,255,.7), transparent 60%), radial-gradient(1.3px 1.3px at 22% 54%, rgba(240,143,192,.5), transparent 60%), radial-gradient(1px 1px at 55% 80%, rgba(255,255,255,.5), transparent 60%), radial-gradient(2px 2px at 92% 68%, rgba(231,200,122,.5), transparent 58%); background-size:560px 560px; opacity:.5; animation:skyDrift 220s ease-in-out infinite; } @keyframes twinkle{ 0%,100%{opacity:.42} 50%{opacity:.78} } @keyframes skyDrift{ 0%,100%{translate:0 0} 50%{translate:-2.4% 1.8%} } @keyframes spin{ to{ rotate:360deg } } /* วงโคจรทุกวงใช้ตัวนี้ตัวเดียว */ /* ── SHELL ──────────────────────────────────────────────────────────────────── */ .wrap{ position:relative; z-index:1; max-width:960px; margin:0 auto; padding:0 24px } a{ color:var(--gold); text-decoration:none } img{ max-width:100%; height:auto; display:block } ::selection{ background:var(--gold-soft); color:#fff } :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:5px } /* header — โปร่ง + blur + hairline ทอง (วัสดุเดียวกับ nav ของแอป) */ .seo-head{ position:sticky; top:0; z-index:20; padding:14px 0; background:rgba(6,8,17,.72); backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--line-soft); } .seo-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:14px } .seo-brand{ font-family:var(--serif-en); font-weight:500; font-size:25px; letter-spacing:.015em; color:var(--ink); line-height:1; white-space:nowrap; } .seo-brand i{ color:var(--gold); font-style:italic } /* "Verse" ทองเอียง = wordmark ของแอป */ .seo-brand:hover{ text-decoration:none } .seo-head .cta{ font-family:var(--sans); font-size:13.5px; font-weight:500; white-space:nowrap; display:inline-flex; align-items:center; min-height:38px; padding:0 18px; border:1px solid var(--gold-soft); border-radius:999px; color:var(--gold); background:rgba(231,200,122,.05); transition:.3s; } .seo-head .cta:hover{ text-decoration:none; color:#0a0e1c; background:var(--gold); border-color:var(--gold); box-shadow:0 0 28px var(--gold-soft); } /* breadcrumb */ .crumb{ font-family:var(--sans); font-size:12.5px; line-height:2.4; color:var(--faint); padding:20px 0 0; letter-spacing:.01em } /* a11y (2.5.8): ตัวหนังสือ breadcrumb เล็ก (12.5px) — กล่องกดจริงสูงแค่ 16px บนมือถือ ขยายพื้นที่กดด้วย padding + inline-block โดยไม่ขยับ layout (line-height 2.4 รองรับอยู่แล้ว) */ .crumb a{ display:inline-block; padding:6px 2px; color:var(--muted); transition:color .25s } .crumb a:hover{ color:var(--gold); text-decoration:none } .crumb span{ color:var(--gold-2) } main{ display:block; padding:0 0 40px } /* ── HERO ───────────────────────────────────────────────────────────────────── บทบรรณาธิการแบบ asymmetric: หัวเรื่องหนีบเป็นคอลัมน์แคบชิดซ้าย เปิด "ช่องฟ้า" ทางขวาให้ halo + arc วงโคจรลอย (ไม่ใช่กล่องกลางหน้าจอ) */ h1{ position:relative; margin:26px 0 .34em; max-width:15ch; font-family:var(--display); font-weight:600; font-size:clamp(34px,6.2vw,62px); line-height:1.18; letter-spacing:-.004em; color:var(--ink); text-wrap:balance; } h1 small{ display:block; margin-top:.62em; max-width:32ch; font-family:var(--read-th); font-weight:400; font-size:clamp(14.5px,1.7vw,17px); line-height:1.6; letter-spacing:0; color:var(--muted); } h1::before{ /* halo สี accent เยื้องขวา */ content:""; position:absolute; z-index:-1; pointer-events:none; right:-8%; top:-64%; width:min(54vw,480px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, var(--accent-soft), transparent 66%); filter:blur(56px); opacity:.6; } h1::after{ /* arc วงโคจร — mask ให้เหลือเสี้ยว หมุนช้ามาก */ content:""; position:absolute; z-index:-1; pointer-events:none; right:0; top:-52%; width:min(48vw,410px); aspect-ratio:1; border-radius:50%; border:1px solid rgba(231,200,122,.18); -webkit-mask:linear-gradient(196deg,#000 0 40%,transparent 76%); mask:linear-gradient(196deg,#000 0 40%,transparent 76%); animation:spin 150s linear infinite; } .lead{ max-width:46ch; margin:0 0 4px; font-family:var(--read-th); font-size:clamp(17.5px,2vw,20px); line-height:1.72; color:var(--muted); text-wrap:pretty; } /* keyword chips */ .kw{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 8px } .kw span{ font-family:var(--sans); font-size:12px; line-height:1; letter-spacing:.01em; color:var(--gold-2); border:1px solid var(--line); border-radius:999px; padding:7px 13px; background:rgba(231,200,122,.04); } /* ── PROSE ──────────────────────────────────────────────────────────────────── */ article p{ max-width:66ch; margin:.7em 0; color:var(--ink); text-wrap:pretty } article b{ color:var(--gold-2); font-weight:600 } /* คำสำคัญ = ทองอ่อน (ไม่ใช่ตัวหนาโล้น) */ article a:not(.btn):not(.stretch){ color:var(--gold-2); text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:rgba(231,200,122,.32); text-underline-offset:3px; transition:.25s; } article a:not(.btn):not(.stretch):hover{ color:var(--gold); text-decoration-color:var(--gold) } article ul{ list-style:none; margin:16px 0; padding:0; max-width:66ch; display:grid; gap:11px } article li{ position:relative; padding-left:26px; color:var(--muted); line-height:1.75 } article li::before{ /* bullet = วงแหวนกลวง (signature) */ content:""; position:absolute; left:3px; top:.68em; width:8px; height:8px; border-radius:50%; border:1px solid var(--accent); opacity:.9; } /* ── H2 · ไม้บรรทัดทองไล่จาง + วงแหวนหัวข้อ ─────────────────────────────────── แทน border-top เต็มเส้นแบบเดิม (เชย/สมมาตร) ด้วยเส้นทองที่จางหายไปทางขวา — asymmetry แบบบรรณาธิการ ไม่ใช่ eyebrow ตัวเล็ก uppercase หรือเลข 01/02 */ h2{ position:relative; margin:62px 0 10px; max-width:24ch; font-family:var(--display); font-weight:600; font-size:clamp(23px,2.7vw,31px); line-height:1.34; letter-spacing:-.002em; color:var(--ink); scroll-margin-top:80px; } h2::before{ content:""; display:inline-block; vertical-align:.1em; margin-right:13px; width:11px; height:11px; border-radius:50%; border:1.5px solid var(--accent); background:transparent; box-shadow:0 0 14px var(--accent-soft); } h2::after{ content:""; position:absolute; left:0; right:-30%; top:-28px; height:1px; pointer-events:none; background:linear-gradient(90deg, var(--gold-soft), rgba(231,200,122,.07) 46%, transparent 78%); } /* ── SEC · แผงโปร่ง + เรืองแสงมุมบน (วัสดุเดียวกับ .catc ของแอป) ──────────────── */ .sec{ position:relative; overflow:hidden; margin:26px 0; padding:26px 28px 24px; border:1px solid var(--line); border-radius:20px; background:var(--panel); backdrop-filter:blur(8px); box-shadow:0 20px 60px rgba(4,6,14,.5), inset 0 1px 0 rgba(255,255,255,.045); } .sec::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(72% 84% at 88% 0%, var(--accent-soft), transparent 62%); opacity:.22; } .sec > *{ position:relative } .sec h2{ margin:0 0 8px; font-size:clamp(20px,2.2vw,24px) } .sec h2::after{ display:none } /* ในแผงไม่ต้องมีไม้บรรทัด */ .sec p:last-child, .sec ul:last-child{ margin-bottom:0 } /* ── SWATCH · ดาวประจำสี (พระเอกของหน้า) ───────────────────────────────────── ไม่ใช่จุดสีเรียงกัน — เป็น "ดาว" จริง: ทรงกลมมีแสงตกกระทบมุมบนซ้าย, เงา terminator ด้านล่าง, เรืองแสงด้วยสีของตัวเอง (--sw inline), มีวงโคจรประ หมุนรอบ. สีที่ "ควรเลี่ยง" (.badge.neg) ถูกเรนเดอร์เป็นดาวที่ *ถูกอุปราคา* — ความหมายมาจากข้อมูลจริง ไม่ใช่แค่ตกแต่ง */ .swatch-row{ display:flex; flex-wrap:wrap; gap:18px; margin:28px 0 36px } .swatch{ position:relative; flex:0 1 172px; min-width:146px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:28px 14px 20px; border-radius:20px; border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(8px); transition:transform .42s, border-color .42s, box-shadow .42s; } .swatch:hover{ transform:translateY(-6px); border-color:var(--gold-soft); box-shadow:0 20px 56px rgba(4,6,14,.7) } .swatch .sw-dot{ --d:98px; position:relative; flex:none; width:var(--d); height:var(--d); border-radius:50%; transition:transform .42s; background: radial-gradient(circle at 33% 27%, rgba(255,255,255,.44), transparent 44%), /* specular */ radial-gradient(circle at 50% 116%, rgba(255,255,255,.12), transparent 52%), /* แสงสะท้อนล่าง */ var(--sw, var(--panel-solid)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -12px 26px rgba(0,0,0,.5), /* terminator */ 0 0 52px -6px var(--sw, transparent), /* เรืองแสงด้วยสีตัวเอง */ 0 14px 30px rgba(4,6,14,.6); } .swatch .sw-dot::before{ /* วงโคจร */ content:""; position:absolute; inset:-12px; border-radius:50%; border:1px dashed color-mix(in srgb, var(--sw, var(--gold)) 62%, transparent); opacity:.5; animation:spin 52s linear infinite; } .swatch:hover .sw-dot{ transform:scale(1.05) } .swatch .sw-nm{ font-family:var(--display); font-weight:600; font-size:19px; line-height:1.25; color:var(--ink); } .swatch .badge{ font-size:11.5px; padding:4px 11px } /* สีกาลกิณี = ดาวที่ถูกอุปราคา (`:has()` — Chrome 105+/Safari 15.4+/FF 121+) */ .swatch:has(.badge.neg) .sw-dot{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -12px 26px rgba(0,0,0,.5), 0 10px 26px rgba(4,6,14,.6) } .swatch:has(.badge.neg) .sw-dot::before{ border-style:solid; border-color:rgba(229,143,176,.42); animation:none } .swatch:has(.badge.neg) .sw-dot::after{ content:""; position:absolute; inset:-1px; border-radius:50%; background:radial-gradient(circle at 74% 72%, rgba(4,6,14,.88) 30%, rgba(4,6,14,.38) 58%, transparent 76%); } /* ── BADGE ──────────────────────────────────────────────────────────────────── */ .badge{ display:inline-block; font-family:var(--sans); font-size:12.5px; font-weight:500; line-height:1.5; padding:4px 12px; border-radius:999px; border:1px solid var(--line-soft); color:var(--muted); background:rgba(155,162,196,.06); white-space:nowrap; } .badge.pos{ color:var(--pos); border-color:rgba(111,199,155,.42); background:rgba(111,199,155,.09) } .badge.neg{ color:var(--neg); border-color:rgba(229,143,176,.42); background:rgba(229,143,176,.09) } /* ── TABLE ──────────────────────────────────────────────────────────────────── */ .tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:18px 0 8px; border:1px solid var(--line); border-radius:20px; background:var(--panel); backdrop-filter:blur(8px); box-shadow:0 20px 60px rgba(4,6,14,.5); } .day-tbl{ width:100%; min-width:520px; border-collapse:collapse; font-family:var(--read-th); font-size:14.5px } .day-tbl th{ text-align:left; white-space:nowrap; padding:15px 18px; font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:.01em; color:var(--gold); border-bottom:1px solid var(--line); background:rgba(231,200,122,.045); } .day-tbl td{ padding:14px 18px; border-bottom:1px solid var(--line-soft); color:var(--muted); vertical-align:top } .day-tbl td:first-child{ padding-left:26px; color:var(--ink) } /* โหมดตารางเท่านั้น — ถ้าปล่อยไว้นอก media query กฎนี้ (0,2,2) จะชนะกฎ card-mode `.day-cards .day-tbl td` (0,2,1) แล้วลบเส้นคั่นของ "การ์ดใบสุดท้าย" ทิ้งทั้งใบบนมือถือ */ @media (min-width:521px){ .day-tbl tr:last-child td{ border-bottom:0 } } .day-tbl tbody tr{ transition:background .25s } .day-tbl tbody tr:not(.is-today):hover{ background:rgba(231,200,122,.045) } /* แถว "วันนี้/วันนี้ของคุณ" = แถวที่ถูกจุดไฟ — ไล่จางจากซ้าย + หมุดวงแหวน (ไม่ใช่แถบสีข้าง) */ .day-tbl tr.is-today{ background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent 84%) } .day-tbl tr.is-today td{ color:var(--ink) } .day-tbl tr.is-today td:first-child{ position:relative; font-weight:600 } .day-tbl tr.is-today td:first-child::after{ content:""; position:absolute; left:9px; top:1.32em; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); } /* ── SRC-NOTE · ป้ายที่มา (colophon) ─────────────────────────────────────────── */ .src-note{ display:flex; gap:16px; align-items:flex-start; margin:32px 0; padding:20px 22px; border:1px solid var(--line-soft); border-radius:18px; background:rgba(10,14,28,.5); backdrop-filter:blur(6px); } .src-note .sn-ic{ /* ไอคอน = ตราวงกลมทอง (signature ring อีกสเกล) */ flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:rgba(231,200,122,.06); font-size:17px; line-height:1; } .src-note p{ margin:0; max-width:72ch; color:var(--muted); font-size:14px; line-height:1.75 } /* ── FAQ ────────────────────────────────────────────────────────────────────── */ .faq{ margin:44px 0 8px } .faq details{ border-bottom:1px solid var(--line-soft); padding:4px 0 } .faq details:first-of-type{ border-top:1px solid var(--line-soft) } .faq summary{ display:flex; align-items:center; gap:13px; cursor:pointer; list-style:none; padding:16px 0; min-height:44px; font-family:var(--sans); font-weight:500; font-size:15.5px; line-height:1.6; color:var(--ink); transition:color .25s; } .faq summary::-webkit-details-marker{ display:none } .faq summary::before{ /* วงแหวน + / − */ content:"+"; flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1px solid var(--line); color:var(--accent); font-family:var(--sans); font-size:15px; line-height:1; transition:.3s; } .faq summary:hover{ color:var(--gold) } .faq summary:hover::before{ border-color:var(--accent); box-shadow:0 0 16px var(--accent-soft) } .faq details[open] summary::before{ content:"−"; background:var(--accent-soft); border-color:var(--accent) } .faq p{ max-width:66ch; margin:0 0 18px 37px; color:var(--muted); font-size:15px } /* ── CTA-BOX · ประตูดาว ─────────────────────────────────────────────────────── จบหน้าด้วยบีตเดียวที่จัดกลาง (ตัดกับทั้งหน้าที่ชิดซ้าย) — วงแหวน armillary สองวงซ้อนหมุนคนละความเร็วหลังปุ่ม */ .cta-box{ position:relative; overflow:hidden; isolation:isolate; margin:56px 0 44px; padding:46px 28px 42px; text-align:center; border-radius:26px; border:1px solid var(--line); backdrop-filter:blur(10px); background: radial-gradient(120% 96% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 64%), var(--panel); box-shadow:0 26px 74px rgba(4,6,14,.62), inset 0 1px 0 rgba(255,255,255,.05); } .cta-box::before, .cta-box::after{ content:""; position:absolute; z-index:-1; pointer-events:none; left:50%; translate:-50% 0; border-radius:50%; border:1px solid rgba(231,200,122,.16); -webkit-mask:linear-gradient(#000, transparent 66%); mask:linear-gradient(#000, transparent 66%); } .cta-box::before{ top:-118%; width:min(150%,720px); aspect-ratio:1; animation:spin 120s linear infinite } .cta-box::after { top:-72%; width:min(104%,500px); aspect-ratio:1; border-color:var(--accent-soft); opacity:.5; animation:spin 84s linear infinite reverse } .cta-box h2{ margin:0 0 8px; max-width:none; font-size:clamp(22px,2.6vw,29px) } .cta-box h2::before, .cta-box h2::after{ display:none } .cta-box p{ max-width:44ch; margin:0 auto 22px; color:var(--muted); font-size:15.5px } /* ── BTN · ปุ่มหลักทองเสมอ (ทอง = แบรนด์ · accent = บรรยากาศ) ────────────────── */ .btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:13px 32px; border:1px solid var(--gold); border-radius:999px; background:linear-gradient(150deg,var(--gold-hi),var(--gold-2)); color:var(--gold-ink); font-family:var(--sans); font-size:15.5px; font-weight:600; letter-spacing:.01em; box-shadow:0 12px 34px rgba(231,200,122,.16); transition:.35s; } .btn:hover{ text-decoration:none; color:var(--gold-ink); box-shadow:0 14px 44px rgba(231,200,122,.34); transform:translateY(-2px) } .btn::after{ /* gilt sheen — เฉพาะตอน hover (แบรนด์ "สงบ ไม่ตะโกน") */ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%); translate:-130% 0; } .btn:hover::after{ animation:sheen .9s ease-out } @keyframes sheen{ from{ translate:-130% 0 } to{ translate:130% 0 } } /* ── DGRID · ดัชนีลิงก์ (แถวเส้นบรรทัด ไม่ใช่การ์ดเหมือนกัน 8 ใบ) ────────────── */ .dgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:0 32px; margin:18px 0 10px } .dcard{ position:relative; padding:17px 34px 17px 2px; border-bottom:1px solid var(--line-soft); transition:border-color .3s; } .dcard::after{ /* ลูกศรท้ายแถว (a.stretch::after = overlay กดทั้งใบ ไม่ชนกัน) */ content:"→"; position:absolute; right:6px; top:50%; translate:0 -50%; color:var(--gold-2); opacity:.45; font-size:15px; transition:.3s; } .dcard:hover{ border-bottom-color:var(--gold-soft) } .dcard:hover::after{ opacity:1; color:var(--accent); translate:5px -50% } .dcard a{ font-family:var(--read-th); font-weight:500; font-size:15.5px; line-height:1.55; color:var(--ink); transition:color .25s; } .dcard:hover a{ color:var(--gold) } .dcard a.stretch{ display:inline-block; min-height:24px; text-decoration:none } .dcard a.stretch::after{ content:""; position:absolute; inset:0; z-index:1 } /* ทั้งแถวกดได้ */ .dcard .mn{ margin:5px 0 0; color:var(--faint); font-size:13px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .dcard .mn:empty{ display:none } /* fix:
ว่างเคยกินที่ฟรี */ /* ── FOOTER ─────────────────────────────────────────────────────────────────── */ .seo-foot{ position:relative; z-index:1; margin-top:36px; padding:34px 0 52px; color:var(--faint); font-family:var(--sans); font-size:13px; line-height:1.8; border-top:1px solid transparent; background:linear-gradient(90deg, var(--gold-soft), rgba(231,200,122,.06) 46%, transparent 78%) top left/100% 1px no-repeat; } .seo-foot .links{ display:flex; flex-wrap:wrap; gap:2px 12px; margin-bottom:16px } /* a11y (2.5.8): 14 ลิงก์ในฟุตเตอร์เป็นรายการ (ไม่ใช่ลิงก์ในประโยค → ไม่เข้าข้อยกเว้น inline) เดิมสูง 23px กดพลาดง่ายบนมือถือ = platform หลัก · padding ดันเป็น ~40px โดยคงระยะไฟไว้ด้วย gap ที่ลดลง */ .seo-foot a{ display:inline-block; padding:9px 4px; color:var(--muted); transition:color .25s } .seo-foot a:hover{ color:var(--gold); text-decoration:none } .seo-foot .dis{ max-width:74ch; margin-top:10px; color:var(--faint); font-size:12.5px; line-height:1.7 } /* ── ส่วนประกอบร่วมของ cluster อื่น (ต้นทุนต่ำ — กันหน้าอื่นพัง) ──────────────── */ h3{ font-family:var(--display); font-weight:600; font-size:17px; color:var(--gold); margin:22px 0 4px } .badge.mid{ color:var(--faint); border-color:var(--line-soft) } .mini-note{ max-width:66ch; color:var(--faint); font-size:13px; line-height:1.65; margin:10px 0 0 } /* ══ MOBILE ══════════════════════════════════════════════════════════════════ 375px ต้องไม่มี h-scroll: ตารางกว้างเลื่อนในกล่องตัวเอง · เครื่องประดับถูก html/body{overflow-x:clip} ตัด · ทุกกริดยุบเป็น 1–2 คอลัมน์ */ @media (max-width:720px){ .wrap{ padding:0 16px } main{ padding-bottom:24px } h1{ max-width:none; margin-top:18px } h2{ margin:46px 0 10px; max-width:none } h2::after{ top:-22px; right:-8% } .sec{ padding:22px 18px; border-radius:18px } .cta-box{ padding:38px 20px 34px; border-radius:22px } .src-note{ padding:16px 16px; gap:13px } .dgrid{ gap:0 } .seo-brand{ font-size:22px } } @media (max-width:520px){ .swatch{ flex:1 1 calc(50% - 9px); min-width:0; padding:22px 10px 16px; gap:11px } .swatch .sw-dot{ --d:78px } .swatch-row{ gap:14px } .faq p{ margin-left:0 } /* ตารางยุบเป็นการ์ดต่อแถว — td::before ดึงหัวคอลัมน์จาก data-th, ซ่อน thead */ .day-cards .tbl-scroll{ overflow-x:visible; border:0; background:transparent; border-radius:0; box-shadow:none; backdrop-filter:none } .day-cards .day-tbl{ min-width:0 } .day-cards .day-tbl thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap } /* ไม่ใส่ backdrop-filter ที่แถว: แถวตารางไม่ใช่ "พาเนล" และ blur 6px บน void เกือบดำ แทบมองไม่เห็น แต่จ่ายค่า compositing layer ต่อแถวบนมือถือ (DESIGN.md: ห้าม glassmorphism เป็นค่าเริ่มต้น) — panel fill + gilt border พาวัสดุได้ครบแล้ว */ .day-cards .day-tbl tr{ display:block; margin:0 0 12px; border:1px solid var(--line); border-radius:16px; background:var(--panel-solid); } .day-cards .day-tbl tr.is-today{ border-color:var(--accent); box-shadow:0 0 30px -6px var(--accent-soft) } .day-cards .day-tbl td{ display:flex; gap:14px; justify-content:space-between; align-items:baseline; padding:11px 15px; border-bottom:1px dashed var(--line-soft); color:var(--ink); } .day-cards .day-tbl td:first-child{ padding-left:15px } .day-cards .day-tbl tr td:last-child{ border-bottom:0 } .day-cards .day-tbl td::before{ content:attr(data-th); flex:0 0 40%; color:var(--gold-2); font-weight:600; font-size:13px; } .day-cards .day-tbl tr.is-today td:first-child::after{ display:none } /* หมุดวงแหวนใช้กับโหมดตารางเท่านั้น */ } /* ══ REDUCED MOTION — ปิดบรรยากาศทั้งหมด คงความอ่านได้ครบ ═══════════════════ */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } body::before, body::after, h1::after, .cta-box::before, .cta-box::after, .swatch .sw-dot::before, .btn:hover::after{ animation:none !important } body::before{ opacity:.55 } body::after{ opacity:.45 } .btn::after{ display:none } *, *::before, *::after{ transition-duration:.01ms !important } .swatch:hover, .btn:hover{ transform:none } /* ยกการ์ด/ปุ่ม = ปิด */ .dcard:hover::after{ translate:0 -50% } /* ลูกศรไม่ขยับ แต่ยังคงจัดกลางแนวตั้ง */ } /* ── TAROT · ไพ่ + ดัชนี 78 ใบ ───────────────────────────────────────────────── ครอบครัวเดียวในชุดนี้ที่มีภาพจริง จึงปล่อยให้ภาพไพ่เป็นตัวออกแบบ: ถอดกล่อง panel ของสีตเดิมทิ้ง เหลือ "ไพ่จริงวางอยู่บนแผนที่ดาว" (ขอบทอง + เงาลึก) ชื่อไพ่ลงมาเป็นคำบรรยายใต้ภาพ ไม่ใช่แถบในกล่อง. วงโคจร signature อยู่ที่หัวข้อกลุ่ม (h2::before) ไม่ใช่รายใบ — 78 วงหมุน พร้อมกันคือ noise + ค่า GPU ฟรี ๆ บนมือถือ */ .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(152px,1fr)); gap:26px 16px; margin:18px 0 8px; /* row gap > column gap: กันคำบรรยายไปติดไพ่แถวถัดไป */ } .card{ min-width:0 } /* กัน track โป่งเมื่อชื่อไทยยาว */ /* หน้าไพ่รายใบวาง .grid ไว้ใน
→ โดนกฎ prose `article a:not(.btn):not(.stretch)` (0,2,2) ยัดขีดเส้นใต้ทับ (text-decoration ลูกยกเลิกเองไม่ได้) จึงต้องชนะ specificity ตรง ๆ ไม่ใช่พึ่งลำดับไฟล์ */ .card a:not(.btn):not(.stretch){ display:block; text-decoration:none } .card img{ width:100%; aspect-ratio:1/1.6; object-fit:cover; border:1px solid var(--line); border-radius:10px; /* border (ไม่ใช่ inset shadow): inner shadow ถูกภาพทับ */ background:var(--panel-solid); /* พื้นรอง ระหว่าง lazy-load ยังไม่มาถึง */ box-shadow:0 12px 30px rgba(4,6,14,.62); transition:transform .42s, border-color .42s, box-shadow .42s; } .card:hover img{ transform:translateY(-5px); border-color:var(--gold-soft); box-shadow:0 18px 44px rgba(4,6,14,.78), 0 0 42px -12px var(--accent-soft); } .card .nm{ margin:12px 2px 0; font-family:var(--read-th); font-weight:500; font-size:14.5px; line-height:1.45; color:var(--ink); transition:color .25s; } .card:hover .nm{ color:var(--gold) } .card .nm small{ display:block; margin-top:2px; font-family:var(--serif-en); font-style:italic; font-weight:500; font-size:14.5px; letter-spacing:.012em; color:var(--faint); /* Cormorant x-height เตี้ย — 14.5px ที่นี่ ≈ 12px ของ sans */ } /* ── ตั้งตรง / กลับหัว ──────────────────────────────────────────────────────── ไพ่ใบเดียวกัน สองสถานะ: ตั้งตรง = ดวงที่ติดไฟ · กลับหัว = ดวงเดิมที่ถูกบัง (ยืมภาษาอุปราคาชุดเดียวกับ .swatch:has(.badge.neg)). แยกกันด้วย *รูป* ด้วย ไม่ใช่สีอย่างเดียว — ขาวดำก็ยังอ่านออก */ h2.up::before, h2.rev::before{ width:13px; height:13px; border-width:1px } h2.up::before{ border-color:var(--pos); background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.5), transparent 46%), color-mix(in srgb, var(--pos) 30%, transparent); box-shadow:0 0 14px color-mix(in srgb, var(--pos) 45%, transparent); } h2.rev::before{ border-color:var(--neg); background: radial-gradient(circle at 70% 72%, var(--bg) 32%, color-mix(in srgb, var(--bg) 50%, transparent) 62%, transparent 80%), color-mix(in srgb, var(--neg) 26%, transparent); box-shadow:none; /* แสงหดกลับเข้าใน = ความหมายของไพ่กลับหัว */ } /* ══ HUB CHROME (ใช้ร่วม 4 hub: ไพ่ · ฝัน · บทสวด · จักรวาล) ═══════════════ ย้ายออกจาก fragment ไพ่ตามผล audit — `.group-h` ขึ้น 25 ครั้งทั้งไซต์ (ไพ่ 6) และ hub_search() ถูกเรียกจาก 4 hub (build_public_pages.py:357/590/795/988) → แก้ที่นี่ = แก้ให้ทุก hub, ไม่ใช่แค่ไพ่ */ /* หัวข้อกลุ่มในดัชนี = ตัวคั่นชุดไพ่ ไม่ใช่บทของหน้า → เล็กกว่า h2 ปกติหนึ่งขั้น และไม่หนีบความกว้าง (สตริงยาว "ไพ่ชุดใหญ่ · Major Arcana (22 ใบ)" ต้องอยู่บรรทัดเดียว). วงแหวน + ไม้บรรทัดทองรับมาจาก h2 ตามเดิม */ .group-h{ max-width:none; font-size:clamp(21px,2.4vw,26px) } /* ── HUB SEARCH ─────────────────────────────────────────────────────────────── */ .hub-search{ margin:22px 0 10px } .hub-search input{ width:100%; max-width:520px; min-height:48px; padding:12px 22px; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--ink); /* โปร่งเฉย ๆ ไม่ blur — ช่องเดียวไม่คุ้มค่า compositing */ font-family:var(--sans); font-size:16px; line-height:1.5; /* 16px: ต่ำกว่านี้ iOS Safari ซูมหน้าทั้งหน้าตอนโฟกัส */ transition:border-color .3s, background .3s, box-shadow .3s; } .hub-search input::placeholder{ color:var(--faint); opacity:1 } /* Firefox หรี่ opacity ให้เอง */ .hub-search input:hover{ border-color:var(--gold-soft) } /* ไม่ override outline: :focus-visible ทองของ global วิ่งตาม border-radius:999px อยู่แล้ว (เบราว์เซอร์ยิง :focus-visible ให้ text input ทุกกรณี รวมทั้งคลิกเมาส์) */ .hub-search input:focus{ border-color:var(--gold); background:var(--panel-solid); box-shadow:0 0 30px -8px var(--gold-soft); } .hub-search-none{ display:flex; align-items:center; gap:11px; margin-top:16px; font-family:var(--read-th); font-size:14.5px; color:var(--muted); } .hub-search-none::before{ /* วงแหวนกลวง ชุดเดียวกับ bullet ของ article li */ content:""; flex:none; width:9px; height:9px; border-radius:50%; border:1px solid var(--line-soft); } .hub-search-none[hidden]{ display:none } /* author display:flex ชนะ UA [hidden] — ต้องประกาศเอง */ @media (max-width:520px){ /* ดัชนีไพ่บนมือถือ = 2 คอลัมน์เสมอ (auto-fill ตกเหลือ 1 คอลัมน์ที่ 320px แล้วไพ่บานเต็มจอ) */ .grid{ grid-template-columns:repeat(2,1fr); gap:22px 14px } .card .nm, .card .nm small{ font-size:14px } .hub-search input{ max-width:none } } @media (prefers-reduced-motion:reduce){ .card:hover img{ transform:none } /* คงขอบทอง+เงาไว้ ตัดแค่การยก */ } /* ── DREAM · COSMOS ─────────────────────────────────────────────────────────── เลขนำโชค = เหรียญที่ถูกตอก (struck) ลอยในวงโคจรของตัวเอง — ดาวดวงหนึ่งบนแผนที่ เดียวกับ .sw-dot ต่างกันที่วัสดุ: .sw-dot คือ "สี" ที่เปล่งแสงเอง, .lucky span คือ "ทอง" ที่รับแสง. ไล่ signature ลงสามสเกล — เหรียญ (หน้าฝัน) → ชิปในดัชนี (.nn b) → ไม่มีวงแหวนแล้วเพราะถี่เกินไป. hero = จานภาพจริงวางบนฟ้า ไม่ใช่กล่อง ────────────────────────────────────────────────────────────────────────────── */ /* ── HERO · จานภาพ + คอลัมน์หัวเรื่อง ──────────────────────────────────────── 3 ทรงใช้ร่วมกัน: ไพ่ทาโรต์ (.art 1:1.6) · เทพ/บทสวด (.art.sq 1:1) · cosmos .hero ต้องโปร่งเสมอ — h1::before/::after (halo+arc) เป็น z-index:-1 ถ้า .hero มีพื้นทึบเมื่อไหร่ วงโคจรของ h1 จะหายไปทั้งแถบ */ .hero{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:30px; margin:26px 0 10px } .hero .art{ flex:none; width:190px } .hero .art.sq{ width:216px } /* จตุรัสเตี้ยกว่าไพ่ → กว้างได้โดยไม่ล้นความสูง */ .hero .art img{ width:100%; aspect-ratio:1/1.6; object-fit:cover; border:1px solid var(--line); border-radius:18px; background:var(--panel-solid); /* เรืองด้วย --accent = ภาพถูกจุดไฟจากฟ้าที่มันลอยอยู่ (ไม่ใช่กรอบเรืองแสงลอย ๆ) */ box-shadow:0 0 58px -14px var(--accent-soft), 0 18px 54px rgba(4,6,14,.66), inset 0 1px 0 rgba(255,255,255,.05); } .hero .art.sq img{ aspect-ratio:1/1 } .hero .htx{ flex:1 1 240px; min-width:0 } /* min-width:0 → ตัวอักษรยาวไม่ดัน flex ให้ล้น */ .hero .htx h1{ margin-top:0 } /* h1 ทั่วไปมี margin-top:26px — ในฮีโร่ต้องเสมอหัวจานภาพ */ /* ── MANTRA-QUOTE · แผ่นจารึก ──────────────────────────────────────────────── ยาว 16–1,300 อักษร (บทเดียวสั้น ๆ ถึงบทสวดเต็ม) → คุมด้วย measure + leading ไม่ใช่ขนาดฟอนต์. ทองบนพื้นมืด = ลงรักปิดทอง ไม่ใช่ pull-quote นิตยสาร — จึงไม่มีอัญประกาศยักษ์/เส้นข้าง มีแค่เส้นทองไล่จางเป็นขอบบนของแผ่น */ .mantra-quote{ position:relative; max-width:62ch; margin:26px 0 8px; padding:30px 28px 28px; border:1px solid var(--line); border-radius:20px; background: radial-gradient(70% 76% at 50% 0%, rgba(231,200,122,.11), transparent 64%), var(--panel); backdrop-filter:blur(8px); /* แผงจริง 1 ชิ้น/หน้า — ไม่ใช่ของซ้ำ ๆ */ box-shadow:0 20px 60px rgba(4,6,14,.5), inset 0 1px 0 rgba(255,255,255,.045); font-family:var(--display); font-weight:500; font-size:clamp(17px,1.9vw,19.5px); line-height:1.95; letter-spacing:.005em; color:var(--gold); text-wrap:pretty; } .mantra-quote::before{ content:""; position:absolute; inset:0 0 auto; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent 5%, var(--gold-soft) 32%, rgba(231,200,122,.08) 74%, transparent); } /* ── LUCKY · เลขนำโชค (พระเอกของหน้าฝัน) ───────────────────────────────────── เหรียญทองตอกลาย: specular บนซ้าย + terminator ล่าง (วัสดุเดียวกับ .sw-dot) แต่ไล่สีทองชุดเดียวกับ .btn → เป็นโลหะมีค่าชิ้นเดียวกันทั้งไซต์ 1–4 เหรียญ/หน้า · ตัวเลข 1–2 หลัก (17, 49 มีจริง) → วงกลมตายตัว ไม่ยืดตามหลัก */ .lucky-h{ margin:0 0 14px; max-width:none; font-family:var(--sans); font-size:13.5px; line-height:1.5; letter-spacing:.01em; color:var(--faint); } .lucky{ display:flex; flex-wrap:wrap; gap:20px; margin:2px 0 4px } .lucky span{ --d:62px; position:relative; flex:none; display:grid; place-items:center; width:var(--d); height:var(--d); border-radius:50%; font-family:var(--serif-en); font-weight:600; font-size:27px; line-height:1; color:var(--gold-ink); background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.55), transparent 46%), linear-gradient(152deg, var(--gold-hi), var(--gold-2) 76%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), inset 0 -10px 22px rgba(86,58,10,.34), /* terminator — ขอบเหรียญที่ถูกกด */ 0 0 46px -8px var(--gold-soft), 0 12px 28px rgba(4,6,14,.58); } .lucky span::before{ /* วงโคจร — signature เดียวกับ .sw-dot */ content:""; position:absolute; inset:-10px; border-radius:50%; border:1px dashed var(--gold-soft); animation:spin 58s linear infinite; } /* คาบโคจรต่างกันรายดวง + transform หมุนเฟสประจำที่ (transform ไม่ชนกับ property `rotate` ที่ @keyframes spin ใช้) → แถวเหรียญไม่ดูเป็นแม่พิมพ์เดียวกัน และยัง ต่างกันตอน reduced-motion ที่ animation ถูกปิด */ .lucky span:nth-child(2)::before{ transform:rotate(22deg); animation-duration:71s; animation-direction:reverse } .lucky span:nth-child(3)::before{ transform:rotate(47deg); animation-duration:64s } .lucky span:nth-child(4)::before{ transform:rotate(9deg); animation-duration:85s; animation-direction:reverse } /* ข้อความกำกับ (คติเสี่ยงโชค/ไม่สนับสนุนการพนัน) — โทนต้องลดลงจากเหรียญชัดเจน เส้นทองไล่จางคั่นไว้ ไม่ใช่ border-top เต็มเส้น (ชุดเดียวกับ h2::after/.seo-foot) */ .lucky-note{ max-width:66ch; margin:22px 0 0; padding-top:16px; color:var(--faint); font-size:13px; line-height:1.7; background:linear-gradient(90deg, var(--gold-soft), rgba(231,200,122,.06) 46%, transparent 78%) top left/100% 1px no-repeat; } /* ── NN · ชิปเลขในดัชนี (.dcard) ───────────────────────────────────────────── เหรียญเดียวกันที่สเกลเล็กสุด — แบนราบ: ไม่มีวงโคจร/เรืองแสง เพราะมีได้ถึง 4 ชิป × 6 การ์ด/หน้า และมันเป็นตัวอย่างเลข ไม่ใช่ตัวเลขจริงของหน้านั้น ⚠️ ห้ามใส่ z-index ให้ .nn b: .dcard a.stretch::after (z-index:1) ต้องคลุมทับ ทั้งใบ ของเดิมยก b ขึ้น z-index:2 ทำให้กดตรงชิปแล้วลิงก์ไม่ทำงาน */ .nn{ display:flex; flex-wrap:wrap; gap:7px; margin:9px 0 0 } .nn b{ display:grid; place-items:center; min-width:25px; height:25px; padding:0 7px; border:1px solid var(--line); border-radius:999px; background:rgba(231,200,122,.06); font-family:var(--serif-en); font-weight:600; font-size:14px; line-height:1; color:var(--gold-2); } .dcard:hover .nn b{ border-color:var(--gold-soft); color:var(--gold) } /* ══ MOBILE ══════════════════════════════════════════════════════════════════ 375px: .htx flex-basis 240px + จานภาพ → จานขึ้นบรรทัดของตัวเอง หัวเรื่องเต็มกว้าง */ @media (max-width:520px){ .hero{ gap:20px; margin-top:16px } .hero .art{ width:148px } .hero .art.sq{ width:176px } .mantra-quote{ padding:24px 20px 22px; border-radius:18px; line-height:1.9 } .lucky{ gap:15px } .lucky span{ --d:54px; font-size:24px } .lucky span::before{ inset:-8px } } /* ══ REDUCED MOTION ══════════════════════════════════════════════════════════ fragment ต่อท้ายบล็อก reduce ของ seo-c.css → selector ชุดนี้ไม่ถูกครอบ ต้องปิดเอง (เฟสวงโคจรที่ตั้งด้วย transform ยังอยู่ครบ — แถวเหรียญไม่กลับไปเหมือนกันหมด) */ @media (prefers-reduced-motion:reduce){ .lucky span::before{ animation:none !important } } /* ── MANTRA · แผ่นจารึก + ชื่อเทพอักษรต้นฉบับ ───────────────────────────────── 62 หน้า /mantra// — บทสวดคือศูนย์ถ่วงของหน้า จึงให้เป็น "แผ่นจารึก" ที่ *จม* ลงในหน้า: fill เข้มกว่าพื้น · เงา inset จากขอบบน · ริมล่างรับแสง — กลับทิศกับ .sec/.mantra-quote ที่ *ลอย* ขึ้นมา (fill สว่างกว่าพื้น · เงาตกด้านล่าง · ริมบนรับแสง). วัสดุชุดเดียวกัน (hairline ทอง + blur) ต่างกันแค่ทิศแสง → บทสวดไทยที่เปล่งเสียง = ลอย · อักษรต้นฉบับที่ถูกจาร = จม ────────────────────────────────────────────────────────────────────────────── */ /* ── อักษรต้นฉบับ (เทวนาครี · ฮั่น · โรมัน) ──────────────────────────────────── 🔴 บั๊ก: ทั้งสองคลาสไม่เคยประกาศฟอนต์ → เทวนาครี/ฮั่นทั้ง 62 หน้ารับ --read-th (สแต็กไทย) มาครอบ. เพิ่ม @font-face ไม่ได้ → สองสคริปต์นี้ต้องพึ่งฟอนต์ระบบอยู่ดี จึงไล่ชื่อเองให้ผลนิ่งข้ามเครื่อง แทน last-resort ที่เบราว์เซอร์เลือกให้ · Latin นำหน้าปลอดภัย: Cormorant เป็น subset ไม่มี glyph เทวนาครี/ฮั่น → fallback ราย glyph ข้ามไปเอง (มาร์กอัปไม่มี lang= จึงใช้ :lang() แยกไม่ได้) · ฮั่นในคลังนี้เป็นตัวเต็มล้วน (觀音 · 文昌帝君 · 財神) → ไล่ TC ก่อน SC · weight 500 = face ที่หน้าโหลดจริง (Cormorant มีแค่ 500/600) เหมือน .seo-brand */ .mantra-scr .msc-txt, p.deity-orig{ font-family:"Cormorant Garamond", "Noto Serif Devanagari","Devanagari Sangam MN","Nirmala UI","Noto Sans Devanagari", "Noto Serif TC","Songti TC","PMingLiU","Noto Serif SC","Songti SC","SimSun", serif; font-weight:500; } /* ชื่อเทพอักษรเดิมใต้ H1 — บีตที่สองของ hero ต่อจาก h1 small ไม่ใส่ letter-spacing: เทวนาครีจะถูกฉีก shirorekha (ขีดบนหัว) ออกเป็นท่อน ๆ (ของเดิม seo.css ใส่ .01em ไว้) */ p.deity-orig{ margin:.3em 0 .5em; max-width:none; font-size:24px; line-height:1.5; color:var(--gold); } /* หมายเหตุใต้บทสวด — ไม่ใช่ caption: บางองค์ยาว ~1,500 ตัวอักษร (บทสำรอง/จำนวนจบ) จึงเป็น --muted 15px ตามบีตเดียวกับ .faq p ไม่ใช่ --faint 13px แบบ .mini-note (max-width ปล่อยให้ article p 66ch คุมตามเดิม) */ p.mantra-note{ margin:12px 0 0; font-family:var(--read-th); font-size:15px; line-height:1.75; color:var(--muted); } /* แผ่นจารึก — Tier A เต็มความกว้างเหมือน .sec/.rows (กรอบหน้า) ตัวบทคุมสายตาด้วย measure ของตัวเองข้างใน. blur: fill โปร่งปล่อยให้ดาวคมทะลุขึ้นมา อ่านเป็นหน้าต่าง แทนแผ่นหิน — แผงจริง 1 ชิ้น/หน้า ไม่ใช่แถวซ้ำ */ .mantra-scripts{ overflow:hidden; margin:22px 0 8px; border:1px solid var(--line); border-radius:18px; background:rgba(5,7,15,.62); backdrop-filter:blur(10px); box-shadow:inset 0 2px 16px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.05); } .mantra-scr{ padding:18px 22px } .mantra-scr + .mantra-scr{ border-top:1px dashed var(--line) } /* ประ = signature เดียวกับวงโคจร */ .mantra-scr .msc-lbl{ display:block; margin-bottom:9px; font-family:var(--sans); font-weight:600; font-size:14px; line-height:1.4; letter-spacing:.01em; color:var(--gold-2); } .mantra-scr .msc-txt{ margin:0; max-width:560px; /* px ไม่ใช่ ch — ch ผูกกับฟอนต์ที่ต่างกันรายสคริปต์ */ font-size:20px; line-height:1.9; /* สูงพอให้สระบน/ล่างเทวนาครี + ฮั่นตัวแน่นไม่ชนบรรทัด */ color:var(--ink); overflow-wrap:break-word; } /* ── BTN-GHOST · ปุ่มรอง ─────────────────────────────────────────────────────── ยืนติดกับ .btn ทองในกล่อง CTA เดียวกัน → ห้ามไล่ระดับจนกลายเป็นปุ่มหลักตอน hover (ต่างจาก .seo-head .cta ที่อยู่ลำพัง เลยเติมทองทั้งปุ่มได้) ลำดับชั้นต้องอ่านออก ทุกสถานะ. .btn.btn-ghost = (0,2,0) ชนะ .btn เองโดยไม่ต้องพึ่งลำดับไฟล์. ไม่ประกาศ transform ซ้ำ — ปล่อยให้ .btn:hover จัดการ เพื่อให้บล็อก prefers-reduced-motion ของ seo-c.css (.btn:hover{transform:none}) ยังคุมได้ */ .btn.btn-ghost{ margin:10px 4px 0; border-color:var(--gold-soft); background:rgba(231,200,122,.05); color:var(--gold); box-shadow:none; } .btn.btn-ghost::after{ display:none } /* sheen ขาวพาดพื้นโปร่ง = แวบเปล่า */ .btn.btn-ghost:hover{ color:var(--gold); background:rgba(231,200,122,.12); border-color:var(--gold); box-shadow:0 0 26px -8px var(--gold-soft); } @media (max-width:520px){ .mantra-scr{ padding:15px 16px } .mantra-scr .msc-txt{ font-size:18px; line-height:1.85 } p.deity-orig{ font-size:22px } } /* ── ROWS · ศัพท์→ความหมาย + ตารางดาวจร ─────────────────────────────────────── .row = component ที่ใช้เยอะสุดของไซต์ (1904 จุด) — คู่ "ศัพท์ → ความหมาย" (dl ที่เขียนเป็น div). ต้องอ่านเป็น *บัญชีอ้างอิงที่กวาดตาได้* ไม่ใช่กริดการ์ด: หมุดวงแหวนในร่องซ้าย (สเกลเดียวกับ article li) + เส้นทองไล่จาง (ตัวเดียวกับ h2::after / seo-foot) แทนเส้นตารางเต็มเส้น. ⚠️ 1254/1904 .row ลอยอยู่ใต้ h2 ตรง ๆ ไม่มี .rows ครอบ (หน้า horoscope) — กฎทุกข้อจึงต้องอยู่ที่ .row เอง ห้าม scope เป็น .rows > .row ────────────────────────────────────────────────────────────────────────── */ .rows{ margin:14px 0 2px } .row{ position:relative; max-width:64ch; padding:14px 0 15px 24px; } /* เส้นคั่นวางที่ "แถวที่ 2 เป็นต้นไป" ไม่ใช่ border-bottom ทุกแถว — .row ที่ลอยไม่มี .rows ครอบ ใช้ :last-child ไม่ได้ (แถวสุดท้ายตามด้วย .sec) แล้วจะเหลือเส้นค้าง */ .row + .row{ background:linear-gradient(90deg, var(--line), rgba(231,200,122,.07) 68%, transparent 94%) top left/100% 1px no-repeat; } .row::before{ /* หมุดวงแหวน = signature ระดับรายการ */ content:""; position:absolute; left:2px; top:22px; /* 22px = padding-top 14 + ครึ่ง line-box ของ .lbl */ width:7px; height:7px; border-radius:50%; border:1px solid var(--accent); opacity:.75; } .row .lbl{ display:block; font-family:var(--display); font-weight:600; font-size:16.5px; line-height:1.4; color:var(--gold); } /* วัดความกว้างคอลัมน์ที่ .row ที่เดียว: ch ผูกกับ font-size ของแต่ละ element → ถ้าตั้ง ch ทั้งที่ .row และ p คอลัมน์จะเหลื่อมกัน (DESIGN.md §reading layout) */ .row p{ max-width:100%; margin:.3em 0 0; color:var(--muted); font-size:15.2px; line-height:1.75; } /* ── RD-TBL · ตำแหน่งดาวจรวันนี้ (2 คอลัมน์ · 304 หน้า) ─────────────────────── อยู่ใน .rows เหมือนกัน และเป็นคู่ ศัพท์→ค่า เหมือนกัน → ให้จังหวะเดียวกับ .row ไม่ใช่ .day-tbl. ไม่มี .tbl-scroll/ไม่มี data-th จึงยุบเป็นการ์ดไม่ได้ — สองคอลัมน์ สั้นพอที่จะเป็นตารางจริงที่ 375px อยู่แล้ว ไม่ต้องเลื่อนแนวนอน. ไม่ใส่กล่อง+blur: กล่องเป็นของตารางกว้างที่ต้องเลื่อน (.tbl-scroll) — ตารางเล็ก ใส่กล่องแล้วกลายเป็นการ์ดซ้อนการ์ด */ .rd-tbl{ width:100%; max-width:380px; margin:12px 0 2px; border-collapse:collapse; font-family:var(--read-th); font-size:15.2px; } .rd-tbl thead th{ text-align:left; white-space:nowrap; padding:0 16px 9px 0; font-family:var(--display); font-weight:600; font-size:15px; color:var(--gold); border-bottom:1px solid var(--line); /* หัวตาราง = เส้นเต็ม (แกน) ต่างจากเส้นคั่นแถวที่ไล่จาง */ } .rd-tbl tbody tr + tr{ background:linear-gradient(90deg, var(--line-soft), rgba(155,162,196,.06) 68%, transparent 94%) top left/100% 1px no-repeat; } .rd-tbl td{ padding:10px 16px 10px 0; color:var(--muted); vertical-align:baseline } .rd-tbl td:first-child{ color:var(--ink); font-weight:500; white-space:nowrap } .rd-tbl td:last-child{ padding-right:0; font-variant-numeric:tabular-nums } /* องศาเรียงตรงกันเป็นคอลัมน์ */ @media (max-width:520px){ .row{ padding-left:20px } .row::before{ left:0 } .row .lbl{ font-size:15.8px } .rd-tbl{ font-size:14.8px } .rd-tbl td{ padding-right:10px } } /* ══════════════════════════════════════════════════════════════════════════════ seo-c.css · ปฏิทิน · ประตู Pro · ราคา · สารบัญ/เทียบศาสตร์ ปฏิทินจันทรคติคือแผนที่ดาวที่ตรงตัวที่สุดในไซต์ — วันคือวัตถุบนฟ้า: วันพระ = ดาวติดไฟ · วันธงชัย = วันที่ถูกวงแหวนล้อม. ส่วน .gate-* คือ "ของจริงหลังฝ้า" ที่เดียวในไฟล์ที่ frosted glass มีเหตุผลตามความหมาย ไม่ใช่การตกแต่ง. ⚠️ ลิงก์ทุกตัวในบล็อกนี้อยู่ใน
จึงโดน `article a:not(.btn):not(.stretch)` (0,2,2 — ขีดเส้นใต้ + gold-2) ทับ. คอนโทรลที่ไม่ใช่ลิงก์ในเนื้อความ (สารบัญ · ปุ่มดาวน์โหลด) ต้องเขียนโซ่ :not() เดียวกันเพื่อชนะ specificity — ไม่ใช่ !important และไม่พึ่งลำดับไฟล์. ══════════════════════════════════════════════════════════════════════════ */ /* ── CAL · ตารางเดือนจันทรคติ ───────────────────────────────────────────────── ไม่ใส่กล่องให้ .cal-month: ตารางอยู่ใน
อยู่แล้ว (กรอบซ้อนกรอบ = ห้าม) และการปล่อยให้เนบิวลาลอดขึ้นมาตามช่องไฟ ทำให้มันอ่านเป็น "แผนที่บนฟ้า" จริง ๆ ช่องธรรมดา 902 ช่องใช้เส้น --line-soft (เย็น) — ถ้าให้ hairline ทองทุกช่อง ทองจะเฟ้อจนวันที่ถูกหมายไม่เหลือน้ำหนัก. ทองสงวนไว้ให้วันที่มีความหมาย */ .cal-month{ margin:22px 0 } .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:7px } .cal-dow{ padding:7px 0 3px; text-align:center; font-family:var(--sans); font-size:12.5px; letter-spacing:.02em; color:var(--gold-2); } /* padding ล่างเผื่อที่จุดไว้ "ทุก" ช่อง และจุดถูกถอดออกจาก flow — ไม่งั้นช่องที่มีจุดจะสูง กว่าเพื่อน แล้ว grid ยืดทั้งแถวนั้นตาม (แถวที่มีวันพระ = 52.8px, แถวอื่น = 46px) ตารางเลยเป็นคลื่น. ตรึงทุกช่องเท่ากัน เลขทั้งเดือนจึงอยู่แนวเดียวกัน */ .cal-cell{ position:relative; min-height:46px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:7px 2px 15px; border-radius:10px; line-height:1.2; border:1px solid var(--line-soft); background:var(--panel-solid); font-family:var(--sans); font-size:14.5px; color:var(--muted); } .cal-cell.is-empty{ background:transparent; border-color:transparent } /* วันพระ = ดาวติดไฟ · ตรงกับ ทึบใน .cal-legend */ .cal-dot{ position:absolute; left:50%; bottom:6px; translate:-50% 0; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 9px var(--gold-soft); } .cal-cell:has(.cal-dot){ color:var(--ink) } /* :has() — เกณฑ์เดียวกับ .swatch:has(.badge.neg) */ /* วันธงชัย = วงแหวนล้อมวัน · ตรงกับ พื้นโปร่งขอบทองใน .cal-legend วงนี้เป็นเส้น "ทึบ" ไม่ใช่วงโคจรประแบบ .sw-dot เพราะ legend ถูก generator ใส่ inline `border:1px solid` มา แก้มาร์กอัปไม่ได้ — สัญลักษณ์ต้องตรงกับคำอธิบายก่อน 55/193 ช่องเป็นทั้งวันพระและวันธงชัย → วงต้องกว้างพอล้อมทั้งเลขและจุด (38px ในช่อง 46px) */ .cal-cell.is-flag{ color:var(--ink); border-color:var(--line); background:color-mix(in srgb, var(--gold) 6%, var(--panel-solid)); } .cal-cell.is-flag::before{ content:""; position:absolute; left:50%; top:50%; translate:-50% -50%; width:38px; height:38px; border-radius:50%; border:1px solid var(--gold-soft); box-shadow:0 0 12px -2px var(--gold-soft); } .cal-legend{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:12px; font-family:var(--sans); font-size:13px; color:var(--faint); } /* inline style ทับได้แค่ background/border — box-shadow รอด ทั้งจุดและวงจึงเรืองแสงเหมือนในตาราง */ .cal-legend i{ display:inline-block; width:9px; height:9px; margin-right:7px; vertical-align:.02em; border-radius:50%; background:var(--gold); box-shadow:0 0 9px var(--gold-soft); font-style:normal; } /* .cal-list แสดง "ทุก" ขนาดจอ (ตรงกับ seo.css เดิมที่ live อยู่ — ไม่ใช่ของแทนตาราง): ที่ ≤520px มันรับหน้าที่แทน .cal-grid ที่ถูกซ่อน · ที่ >520px มันอยู่คู่ตารางในฐานะ "รายละเอียด" เพราะ grid บอกได้แค่เลขวัน+จุด ส่วน list บอกดิถีจริง ("ขึ้น ๑๕ ค่ำ (เพ็ญ)") ซึ่งเป็นข้อมูลที่ grid แสดงไม่ได้ — จึงไม่ใช่ข้อมูลซ้ำ. ทุกแถวคือวันพระ จึงติดจุดทอง ดวงเดียวกับในตาราง แทน bullet วงแหวนของ article li */ .cal-list{ list-style:none; display:block; margin:14px 0 0; padding:0 } .cal-list li{ display:flex; align-items:baseline; gap:12px; padding:12px 0 12px 20px; border-bottom:1px solid var(--line-soft); font-family:var(--read-th); font-size:14.5px; line-height:1.6; color:var(--muted); } .cal-list li::before{ content:""; position:absolute; left:3px; top:1.15em; width:6px; height:6px; border:0; border-radius:50%; opacity:1; background:var(--gold); box-shadow:0 0 9px var(--gold-soft); } .cal-list li:last-child{ border-bottom:0 } .cal-list li b{ flex:0 0 92px; font-weight:600; color:var(--gold-2) } /* ── GATE · ตัวอย่างที่ถูกล็อก (21 หน้า) ─────────────────────────────────────── ซ้อนสองชั้นด้วย grid cell เดียว ไม่ใช่ absolute+height ตายตัว: กล่องจึงสูงตาม ม่านเสมอ. ของเดิม height:150px + inset:0 บังคับให้ต้องบีบปุ่มเหลือ ~38px ให้พอดี (ต่ำกว่า tap target) และยัง overflow:hidden ตัดข้อความบนจอแคบ. .gate-lock = frosted glass ที่ถูกต้องตามความหมาย (ฝ้าบังของจริง) และเป็น panel 1 ชิ้น/หน้า → อยู่ในขอบเขตที่ DESIGN.md อนุญาต */ .gate-box{ position:relative; display:grid; overflow:hidden; margin:18px 0 8px; border:1px solid var(--line); border-radius:20px; background:var(--panel); backdrop-filter:blur(8px); box-shadow:0 20px 60px rgba(4,6,14,.5), inset 0 1px 0 rgba(255,255,255,.045); } .gate-box > *{ grid-area:1/1 } .gate-box-text{ padding:22px 24px } .gate-box-cal{ min-height:150px } /* เดิม height — min เพื่อให้ม่านดันสูงได้ */ .gate-cal-bars{ display:flex; flex-direction:column; gap:11px } .gate-bar{ display:flex; align-items:center; gap:12px; font-family:var(--sans); font-size:13px; color:var(--muted) } .gate-bar span{ flex:0 0 78px } /* 60px เดิมสั้นเกินสำหรับ "ลัคนาฤกษ์" */ .gate-bar-track{ flex:1; height:7px; border-radius:999px; overflow:hidden; background:rgba(155,162,196,.14); box-shadow:inset 0 1px 2px rgba(4,6,14,.6); } /* 🔴 ชีตเก่าอ้าง var(--gold-2) แต่ seo.css ไม่เคยประกาศ token นี้ → ทั้ง background invalid at computed-value time = แท่งใสมาตลอดทั้ง 21 หน้า. C ประกาศ --gold-2 จริง */ .gate-bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--gold-2),var(--gold)) } /* padding-top = ช่องเปิดให้เห็นข้อมูลตัวอย่างเหนือม่าน — ถ้าไม่เว้น กล่องจะสูงเท่าม่านพอดี แล้วบาร์จะถูกทับหมด */ .gate-lock{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:12px; padding:88px 22px 24px; text-align:center; backdrop-filter:blur(3px); } /* หยุดไล่สีเป็น px ไม่ใช่ % — ม่านจะทึบตรงที่ข้อความเริ่มพอดีทุกความสูงกล่อง */ .gate-lock-fade{ background:linear-gradient(rgba(6,8,17,0), rgba(10,14,28,.94) 76px, rgba(10,14,28,.97)) } .gate-lock-ic{ /* ตราวงกลมทอง — วัสดุเดียวกับ .src-note .sn-ic */ flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:rgba(231,200,122,.06); font-size:16px; line-height:1; } .gate-lock p{ max-width:44ch; margin:0; font-family:var(--read-th); font-size:14.5px; line-height:1.7; color:var(--muted) } .gate-lock .btn{ margin-top:4px; min-height:44px; padding:11px 26px; font-size:14.5px } /* ── PRICE ────────────────────────────────────────────────────────────────── ตัวเลขราคาอยู่ใน h2 (--display = Cormorant ก่อน) แต่ Cormorant ไม่มี ฿ → ตัวเลขจะตกไป fallback คนละตัวกับตัวอักษรข้าง ๆ. บังคับเป็นไทย-sans ทั้งก้อน ไม่กำหนด color: ปล่อยให้รับสีจากหัวข้อที่มันอยู่ (ฟรี=--ink · Pro=ทอง) */ .price{ font-family:var(--read-th); font-weight:600; letter-spacing:-.01em } /* ── TOC · สารบัญในหน้า ────────────────────────────────────────────────────── มาร์กอัปมี 2 แบบ: .toc-h อยู่ในกล่อง (6 หน้า) กับใช้

ข้างนอก (3 หน้า compare) → กฎห้ามพึ่ง .toc-h. ตัวเลข counter ของชีตเก่าถูกตัด — ordinal ยังอยู่ที่
    ตามความหมายอยู่แล้ว บนจอใช้ bullet วงแหวนชุดเดียวกับ article li ของ C */ .toc{ margin:20px 0; padding:6px 22px 8px; border:1px solid var(--line); border-radius:18px; background:var(--panel); backdrop-filter:blur(8px); } .toc .toc-h{ margin:14px 0 2px; font-family:var(--display); font-weight:600; font-size:18px; color:var(--gold) } .toc ol{ list-style:none; margin:0; padding:0 } .toc li{ padding:0; border-bottom:1px solid var(--line-soft) } .toc li::before{ display:none } /* bullet ย้ายไปไว้ที่ (ต้องอยู่ในแถวกดได้) */ .toc li:last-child{ border-bottom:0 } .toc a:not(.btn):not(.stretch){ display:flex; align-items:center; gap:12px; min-height:44px; padding:6px 0; font-family:var(--read-th); font-size:14.5px; line-height:1.5; color:var(--muted); text-decoration:none; } .toc a::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; border:1px solid var(--accent); opacity:.75; transition:.3s; } .toc a:hover::before{ background:var(--accent); box-shadow:0 0 12px var(--accent-soft); opacity:1 } /* ── VS-COLS · สองศาสตร์มองคนคนเดียวกัน ────────────────────────────────────── ของเดิมแยก A/B ด้วย "ขอบทอง vs ขอบขาว" — ขอบขาวขัดลายเซ็น hairline ทอง และทำให้ B อ่านเป็นฝ่ายด้อย ทั้งที่เป็นศาสตร์คู่กัน. ที่นี่แยกด้วยสีบรรยากาศแทน (A=accent, B=ฟ้าเย็น) — ต่างกันตั้งแต่ตอนนิ่ง ไม่ต้องรอ hover */ .vs-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 0 } .vs-col{ --vs:var(--accent); position:relative; overflow:hidden; padding:20px 22px 18px; border:1px solid var(--line); border-radius:18px; background:var(--panel-solid); } .vs-col.vs-b{ --vs:color-mix(in srgb, var(--blue) 58%, var(--ink)) } /* --blue ดิบเป็นสีเนบิวลาเข้ม ใช้เป็นเส้น/แสงแล้วจม */ .vs-col::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background:radial-gradient(78% 88% at 88% 0%, color-mix(in srgb, var(--vs) 22%, transparent), transparent 62%); } .vs-col > *{ position:relative } .vs-col h3, .vs-col .vs-h{ margin:0 0 8px; font-family:var(--display); font-weight:600; font-size:18.5px; color:var(--ink) } .vs-col h3::before, .vs-col .vs-h::before{ content:""; display:inline-block; vertical-align:.12em; margin-right:10px; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--vs); box-shadow:0 0 12px -1px var(--vs); } .vs-col p{ margin:.35em 0; color:var(--muted); font-size:14.5px } .vs-col ul{ margin:10px 0 0 } .vs-col li{ font-size:14.5px } .vs-col li::before{ border-color:var(--vs) } /* ── DL-CHIP · ดาวน์โหลด .ics ──────────────────────────────────────────────── งานรอง ไม่ใช่ CTA หลัก → ghost pill วัสดุเดียวกับ .seo-head .cta แต่ hover ไม่เติมทองทึบ (ทองทึบสงวนให้ .btn) */ .dl-chip:not(.btn):not(.stretch){ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:11px 22px; border:1px solid var(--gold-soft); border-radius:999px; background:rgba(231,200,122,.05); color:var(--gold); font-family:var(--sans); font-size:14.5px; font-weight:500; letter-spacing:.01em; text-decoration:none; transition:.3s; } .dl-chip:not(.btn):not(.stretch):hover{ color:var(--gold); text-decoration:none; border-color:var(--gold); background:rgba(231,200,122,.12); box-shadow:0 0 26px -6px var(--gold-soft); } .dl-chip .dl-ic{ flex:none; font-size:15px; line-height:1 } /* ── VERDICT · ผลตัดสินต่อวัน + ป้ายข้อมูลกลาง ──────────────────────────────── ข้อความบอกความหมายครบอยู่แล้ว จุดนำหน้าเป็นสัญญาณที่สอง และต่างกันด้วย "รูป" ไม่ใช่แค่สี: ดี/เลี่ยง = ดวงติดไฟ · กลาง = วงแหวนกลวง. วัสดุเดียวกับ .badge */ .verdict{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-family:var(--sans); font-size:13px; font-weight:500; line-height:1.5; padding:5px 13px; border-radius:999px; border:1px solid var(--line-soft); background:rgba(155,162,196,.06); color:var(--muted); } .verdict::before{ content:""; flex:none; width:7px; height:7px; border-radius:50%; border:1px solid currentColor; background:currentColor; } .verdict.pos{ color:var(--pos); border-color:rgba(111,199,155,.42); background:rgba(111,199,155,.09) } .verdict.neg{ color:var(--neg); border-color:rgba(229,143,176,.42); background:rgba(229,143,176,.09) } .verdict.mid{ color:var(--faint); border-color:var(--line-soft); background:rgba(155,162,196,.08) } .verdict.pos::before, .verdict.neg::before{ box-shadow:0 0 10px currentColor } .verdict.mid::before{ background:transparent } /* กลาง = ยังไม่ติดไฟ */ /* ══ MOBILE ══════════════════════════════════════════════════════════════════ */ @media (max-width:520px){ .cal-grid{ display:none } /* 7 คอลัมน์ไม่พอที่ 375px — .cal-list รับหน้าที่แทน */ .cal-month{ margin:16px 0 } .cal-legend{ margin-top:0 } .cal-list{ margin-top:10px } .cal-list li b{ flex:0 0 78px } .gate-box-text{ padding:18px 16px } .gate-lock{ padding:84px 16px 22px } .toc{ padding:4px 16px 6px } .vs-cols{ grid-template-columns:1fr } .vs-col{ padding:18px 16px 16px } } /* ── sr-only ───────────────────────────────────────────────────────────────── ข้อความสำหรับ screen reader อย่างเดียว — ใช้กับสัญญาณที่เดิมสื่อด้วยสี/รูปทรงล้วน (จุดวันพระ · ขอบวันธงชัยในปฏิทิน) ตาม WCAG 1.4.1 · ไม่ใช้ display:none เพราะ SR จะข้าม */ .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }