`) ไม่มี reset margin ของตัวเอง เลยโดน user-agent stylesheet ใส่ margin:1em 0 (~13px บน+ล่าง) มาแทรกเพิ่มระหว่างหัวข้อกับตัวเลข ทำให้ระยะ ห่างเกินกว่าที่ต้นฉบับตั้งใจ (32px จริง แทนที่จะเป็นแค่ margin-top:19px ของ `.v2-kpi-card__metric` ตามสเปก) แก้โดยเพิ่ม reset กลับมาเฉพาะสโคป `.v2-kpi-card` (ไม่ใช้ `.v2-kpi-dashboard` เพราะ class นั้นไม่มีในมาร์กอัปจริง ของเราแล้ว) */ .v2-kpi-card, .v2-kpi-card * { margin:0; padding:0; box-sizing:border-box; } /* 11 ส.ค. 2026: เงาการ์ดใบแรก/สุดท้ายโดนตัดห้วนๆ ตรงขอบจอ (blur 60px spread -30px ของ .v2-kpi-card ต้องการ พื้นที่ราว 30px ถึงจะจางหมดพอดี) — เพิ่ม padding ให้ .v2-kpi-grid เท่ากับ .v2-content เองก่อน (20-28px) ผู้ใช้ทดสอบจริงพบว่าแย่กว่าเดิม (เห็นเป็นช่องว่างเปล่าก่อนถึงการ์ดแรกตอนเลื่อนสุดซ้าย เพราะแนวนอนนี้ผู้ใช้ scroll ผ่าน padding จริง ต่างจากเงาล่างที่ไม่มีใครสังเกตเพราะ overflow-y:hidden ไม่ใช่แกนที่ scroll ผ่าน) — กลับไปใช้ 4px เดิม + ไล่โปร่งใสด้วย mask-image แทน (ซ่อนรอยตัดด้วยภาพลวงตา ไม่ได้แก้ที่ต้นเหตุการตัดเงาจริง) ปรับ 3 จุด: (1) mask-image ไล่โปร่งใสขอบซ้าย-ขวา (สมมาตร 30px) (2) scroll-snap-type:none กันการ์ดเด้งกลับ ตอนปล่อยลาก (3) spacer element ก่อนการ์ดแรก/หลังการ์ดสุดท้าย (ดู .v2-kpi-grid__edge-spacer ด้านล่าง + จุดแทรกใน design-system-v2.html) ⚠ บทเรียน (12 ส.ค. 2026): เคยมีไฟล์ ui-v2-fix.css (โหลดเฉพาะ design-system-v2-fix.html) เป็นสำเนา KPI ซ้ำ ทำให้แก้ผิดไฟล์เสียหลายรอบ (แก้ที่สำเนา หน้าจริงไม่เห็นผล) — ลบ fix page/CSS/JS ทิ้งทั้งหมดแล้ว ตอนนี้ ui-v2.css นี้เป็นตัวเดียวที่ design-system-v2.html โหลด ห้ามสร้างสำเนา CSS ของ KPI ขึ้นมาใหม่อีก */ .v2-kpi-grid { display: flex; flex-wrap: nowrap; gap: 18px; overflow-x: auto; overflow-y: hidden; /* 20 ส.ค. 2026: bleed เดิม 50px (ตั้งใจให้เท่ากับ "รัศมีเงา" offset-y 28 + blur 52 − spread 30 = 50px แบบ คำนวณตรงๆ) — แต่ box-shadow ของ browser จริงไม่ได้จางเป็น 0 พอดีที่ระยะ blur ตามตัวเลข (Gaussian falloff ยังเหลือความทึบอยู่บ้างเกินระยะ blur เล็กน้อย) ทำให้เงาโดน overflow-y:hidden ตัดขาดกลางคันเป็นเส้นคม (ไม่ใช่จางสนิทเป็นธรรมชาติ) — ผู้ใช้ทักว่าขอบตาราง/ toolbar สีไม่สม่ำเสมอ พิสูจน์แล้วว่าไม่ใช่ปุ่ม toolbar (ขยายเงาปุ่มไม่มีผลอะไรเลยเพราะโดน clip ที่ 50px เท่าเดิม) แต่เป็นเส้นตัดของเงาการ์ด KPI นี้เอง ขยาย bleed เป็น 120px ให้เงาจางสนิทจริงก่อนโดนตัด (ไม่กระทบ layout อื่นเลย เพราะ margin ติดลบเท่ากันชดเชยพอดี) */ /* 21 ส.ค. 2026: ผู้ใช้ทักว่าเงาการ์ดใบแรก (ดึงซ้ายสุด) มีที่เว้นให้เงาแสดงผล แต่การ์ดใบสุดท้าย (ดึงขวาสุด) ไม่มี — bleed แนวนอนเดิม 4px น้อยกว่ารัศมีเงาจริง (blur 52 − spread 30 = 22px) มาก ทำให้ overflow-x:auto ตัดเงาทิ้งก่อนที่ mask-image (fade 30px ด้านล่าง) จะมีโอกาสจางให้เนียนด้วยซ้ำ (mask จางสิ่งที่ยังไม่ถูก clip ออกไปเท่านั้น) เพิ่มเป็น 24px (เกิน 22px ที่คำนวณได้ ตามหลัก over-provision เดียวกับ §5.56) แต่ยังน้อย กว่า mask 30px เพื่อให้ mask ยังคลุมโซนนี้ได้เต็มพอดี — ต้องแก้ _fitKpiScale() ใน app-v2.html คู่กัน (เลข -8 อิงจาก padding แนวนอนเดิม 4px×2 ตรงๆ) ไม่งั้นสเกล "พอดีเป๊ะ" บนจอกว้างจะเพี้ยน */ padding: 20px 24px 120px; margin: -20px -24px -120px; scroll-snap-type: none; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; /* ไฟล์ต้นฉบับ Codex/textui/ui-v2.css ไม่สมมาตร (12px ซ้าย/30px ขวา) ผู้ใช้ทดสอบแล้วขอให้สมมาตร โดยยึดเลข ฝั่งขวา (30px) เป็นค่ามาตรฐานทั้งสองข้าง แทนที่จะยึดฝั่งซ้าย (12px) */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%); } .v2-kpi-grid::-webkit-scrollbar { display: none; } .v2-kpi-grid__edge-spacer { flex:0 0 0px!important; width:0px!important; min-width:0px!important; height:1px!important; padding:0!important; margin:0!important; pointer-events:none; } .v2-kpi-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; } .v2-kpi-grid.is-dragging .v2-kpi-card { pointer-events: none; } .v2-kpi-card { --accent: oklch(.72 .17 155); --series: oklch(.82 .16 150); position: relative; isolation: isolate; flex: 0 0 auto; width: min(300px, 82vw); scroll-snap-align: start; min-height: 218px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .28); border-radius: 24px; background: color-mix(in oklab, white 9%, transparent); /* 19 ส.ค. 2026: ผู้ใช้ขอลดพื้นที่เผื่อเงาจาก 58px (28 offset-y + (60 blur − 30 spread)) เหลือ 50px ให้พอดี กับ bleed 50px ที่ .v2-kpi-grid เผื่อไว้อยู่แล้ว (app-v2.html) พอดีเป๊ะไม่มีส่วนเกิน — ลดเฉพาะ blur 60→52 (28 + (52−30) = 50) คง offset-y/spread เดิมไว้ไม่ขยับตำแหน่ง/ขนาดเงาแนวนอน แค่คมขึ้นเล็กน้อย */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 28px 52px -30px rgba(0, 0, 0, .72); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); will-change: backdrop-filter; transition: transform .25s ease, border-color .25s ease, background .25s ease; } .v2-kpi-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .48); background: color-mix(in oklab, white 13%, transparent); } /* 9 ส.ค. 2026: การ์ดเข้าเฟรมแบบ slide-in-stagger (เทคนิคพอร์ตจาก codefronts.com "Fintech Dashboard KPI Card with Count-Up" — บันทึกวิธีทำเต็มไว้ที่ liquid-glass-v2.md §5.36) — เดิม .v2-kpi-card ปรากฏขึ้นทันที ไม่มีชั้นนี้ มีแค่ตัวอักษร/ตัวเลขข้างในที่ vanish/reveal (splitKpiText/animateKpiDigits ใน ui-v2.js อยู่แล้ว ไม่แตะ — นับเป็นอีกชั้นซ้อนกัน) ชั้นใหม่นี้คือ "กล่องการ์ด" เลื่อนขึ้น+จางเข้าทีละใบตามลำดับ nth-child (delay ไล่จากการ์ดแรกไปการ์ดสุดท้าย) ให้ scope เดียวกับ .v2-kpi-scene--vanish-once (เล่นครั้งเดียวตอน mount เหมือนชั้นตัวอักษร ไม่วนซ้ำ) */ .v2-kpi-scene--vanish-once .v2-kpi-card { opacity: 0; transform: translateY(30px); animation: v2-kpi-card-in .55s cubic-bezier(.22,1,.36,1) forwards; } /* 12 ส.ค. 2026: ใช้ :nth-of-type ไม่ใช่ :nth-child — การ์ดเป็น

ส่วน edge-spacer เป็น

:nth-child นับ spacer ด้วยทำให้ index การ์ดเลื่อนไป 1 (ใบ 6 กลายเป็น nth-child(7) ไม่มีดีเลย์ เด้งขึ้นก่อน เพื่อน) :nth-of-type นับเฉพาะ article → ข้าม spacer เสมอ ได้ mapping 1-6 ถูกเสมอ ไม่ว่ามี spacer หรือไม่ */ .v2-kpi-scene--vanish-once .v2-kpi-card:nth-of-type(1) { animation-delay: .1s; } .v2-kpi-scene--vanish-once .v2-kpi-card:nth-of-type(2) { animation-delay: .25s; } .v2-kpi-scene--vanish-once .v2-kpi-card:nth-of-type(3) { animation-delay: .4s; } .v2-kpi-scene--vanish-once .v2-kpi-card:nth-of-type(4) { animation-delay: .55s; } .v2-kpi-scene--vanish-once .v2-kpi-card:nth-of-type(5) { animation-delay: .7s; } .v2-kpi-scene--vanish-once .v2-kpi-card:nth-of-type(6) { animation-delay: .85s; } .v2-kpi-scene--vanish-once .v2-kpi-card:nth-of-type(7) { animation-delay: 1s; } .v2-kpi-scene--vanish-once .v2-kpi-card:nth-of-type(8) { animation-delay: 1.15s; } .v2-kpi-scene--vanish-once .v2-kpi-card:nth-of-type(9) { animation-delay: 1.3s; } .v2-kpi-scene--vanish-once .v2-kpi-card:nth-of-type(10) { animation-delay: 1.45s; } @keyframes v2-kpi-card-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* 9 ส.ค. 2026: ยูทิลิตี้ทั่วไปพอร์ตชั้น slide-in เดียวกับการ์ด KPI (ด้านบน) ไปใช้กับ "ทุก component" ในหน้า ไม่ใช่แค่การ์ด KPI — ใช้ keyframe v2-kpi-card-in ตัวเดียวกัน (ไม่แยกซ้ำ) ต่างกันแค่วิธีตั้ง delay: การ์ด KPI ใช้ nth-child เพราะจำนวนคงที่ (6 ใบ) ส่วนคลาสนี้ตั้ง delay ผ่าน inline style (--v2-reveal-i คูณ step ฝั่ง JS) เพราะจำนวน/ชนิด element ในแต่ละหน้าไม่แน่นอน — ดู liquid-glass-v2.md §5.37 V2.applyRevealStagger(container) ใน ui-v2.js เป็นตัวเติมคลาส+ตัวแปรนี้ให้ 9 ส.ค. 2026 (ต่อ, §5.38): เปลี่ยนเป็น scroll-triggered ตามตัวอย่าง codefronts.com "Slide-In Animation on Scroll" — element ที่ยังไม่เข้า viewport ต้องค้าง opacity:0 เฉยๆ ไม่เล่น animation ทันทีตอน mount เหมือนเดิม (ของเดิมเล่นทันทีทุกใบพร้อมกันหมดตอนโหลด ทั้งที่ครึ่งหน้าล่างยังมองไม่เห็น) — แยก keyframe ออกจาก state เริ่มต้น: ตัวนี้กำหนดแค่ opacity:0/translateY(30px) เฉยๆ ไม่มี animation ผูกอยู่, ต้องรอ IntersectionObserver (ใน ui-v2.js) เติมคลาส .is-visible ก่อนถึงจะ animation:...forwards จริง */ .v2-reveal-stagger { opacity: 0; transform: translateY(30px); } .v2-reveal-stagger.is-visible { animation: v2-kpi-card-in .55s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(var(--v2-reveal-i, 0) * 200ms); } .v2-kpi-card--blue { --accent: oklch(.69 .17 245); --series: oklch(.80 .15 225); } .v2-kpi-card--gold { --accent: oklch(.77 .17 78); --series: oklch(.87 .15 85); } .v2-kpi-card--lime { --accent: oklch(.76 .18 125); --series: oklch(.85 .17 125); } .v2-kpi-card--violet { --accent: oklch(.70 .17 300); --series: oklch(.83 .13 300); } .v2-kpi-card--cyan { --accent: #3461c1; --series: #4579e2; } .v2-kpi-card--cyan .v2-kpi-card__chart { inset: auto 0 0; height: 38%; opacity: 1; } .v2-kpi-card__chart { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .82; } .v2-kpi-card__area { fill: color-mix(in oklab, var(--series) 26%, transparent); } /* 20 ส.ค. 2026: ผู้ใช้ยืนยันเส้นนี้ขาดเป็น 2 ท่อนบนมือถือจริง (Android) ทั้งใน app-v2.html (การ์ดถูกย่อ scale(.5)) และ design-system-v2.html (การ์ดขนาดธรรมชาติ ไม่ย่อเลย) — ตัดทฤษฎี scalewrap/timing ของ getTotalLength() ออกไปแล้ว (แก้ setTimeout(0) รอบก่อนไม่ได้ผล) เหลือสิ่งที่เหมือนกันทั้ง 2 หน้าคือตัว markup เอง: vector-effect:non-scaling-stroke ทำงานร่วมกับ viewBox ที่ไม่ได้สัดส่วนเดียวกับกล่อง (viewBox 360×218 ยืดลง box 300×218 ผ่าน preserveAspectRatio="none" — แกน X บีบ .833 เท่า, แกน Y ไม่บีบ) เป็นคู่ผสมที่หลายเอนจิ้นมือถือมีประวัติ render dasharray/dashoffset เพี้ยนจริง — ถอด vector-effect ออกเฉพาะ คลาสนี้ (ไม่แตะ .v2-kpi-card__map/.v2-kpi-card__water ที่ใช้ค่านี้เหมือนกันแต่ไม่มีอาการ) ผู้ใช้ทดสอบบน เครื่อง Android จริงแล้วยืนยันว่าหายสนิท (20 ส.ค. 2026) — เป็นสาเหตุจริง ไม่ใช่แค่ทฤษฎี เส้นจะหนา/บางเปลี่ยน ไปตามสเกลการ์ดแทนคงที่เสมอ (ผลข้างเคียงเล็กน้อยที่ยอมรับได้ ไม่กระทบ layout/ตำแหน่ง) */ .v2-kpi-card__line { fill: none; stroke: var(--series); stroke-width: 2.5; } /* 3 ส.ค. 2026: ลบ .v2-kpi-card__bars + .v2-kpi-card__field .plot/.canal ทิ้ง — เป็นคลาสจากสูตร variant อื่น ของไฟล์ต้นฉบับที่ไม่เคยมี markup คู่กันอยู่ใน 6 การ์ดที่เราคัดลอกมาเลยตั้งแต่แรก (§4.21) ไม่ใช่แค่ซ่อนด้วย display:none แต่ไม่มีอยู่ในหน้าเลย เจอจากการตรวจ "ขยะ" ในหน้า */ .v2-kpi-card__map path, .v2-kpi-card__water path { vector-effect: non-scaling-stroke; } .v2-kpi-card__thailand-map .country { fill: color-mix(in oklab, var(--series) 18%, transparent); stroke: color-mix(in oklab, var(--series) 72%, white 8%); stroke-width: 1.4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 8px 14px rgba(0, 28, 48, .22)); } .v2-kpi-card__thailand-map .province-line { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: .75; vector-effect: non-scaling-stroke; } .v2-kpi-card__thailand-map .country-image { opacity: .58; filter: drop-shadow(0 8px 14px rgba(0, 28, 48, .26)); } .v2-kpi-card__thailand-map .project-point { transform-box: fill-box; transform-origin: center; animation: v2-kpi-project-pulse 19s ease-in-out infinite; animation-fill-mode: backwards; } .v2-kpi-card__thailand-map .project-point .halo { fill: none; stroke: var(--series); stroke-width: 1.45; r: 9px; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: v2-kpi-project-ring 1.75s ease-out infinite; } .v2-kpi-card__thailand-map .project-point .core { fill: #dffaff; stroke: var(--series); stroke-width: 1.4; r: 3.8px; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px var(--series)); } .v2-kpi-card__thailand-map .project-point:nth-of-type(2) { animation-delay: 1.9s; } .v2-kpi-card__thailand-map .project-point:nth-of-type(3) { animation-delay: 3.8s; } .v2-kpi-card__thailand-map .project-point:nth-of-type(4) { animation-delay: 5.7s; } .v2-kpi-card__thailand-map .project-point:nth-of-type(5) { animation-delay: 7.6s; } .v2-kpi-card__thailand-map .project-point:nth-of-type(6) { animation-delay: 9.5s; } .v2-kpi-card__thailand-map .project-point:nth-of-type(7) { animation-delay: 11.4s; } .v2-kpi-card__thailand-map .project-point:nth-of-type(8) { animation-delay: 13.3s; } .v2-kpi-card__thailand-map .project-point:nth-of-type(9) { animation-delay: 15.2s; } .v2-kpi-card__thailand-map .project-point:nth-of-type(10) { animation-delay: 17.1s; } .v2-kpi-card__rice .stalk { fill: none; stroke: rgba(250, 204, 92, .64); stroke-width: 1.25; vector-effect: non-scaling-stroke; } .v2-kpi-card__rice .grain { fill: rgba(250, 204, 92, .46); stroke: rgba(255, 224, 138, .78); stroke-width: .65; vector-effect: non-scaling-stroke; } .v2-kpi-card__rice .rice-sway { transform-box: fill-box; transform-origin: center bottom; animation: v2-kpi-rice-sway 5.8s ease-in-out infinite alternate; } .v2-kpi-card__rice .rice-sway use { fill: none; stroke: rgba(250, 204, 92, .72); stroke-width: 1.05; } .v2-kpi-card__rice .rice-plant:nth-of-type(2n) .rice-sway { animation-delay: -1.9s; animation-duration: 6.6s; } .v2-kpi-card__rice .rice-plant:nth-of-type(3n) .rice-sway { animation-delay: -3.4s; animation-duration: 7.2s; } .v2-kpi-card__rice { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } /* layer ทุ่งข้าวไหวลม (การ์ด --gold "พื้นที่ชลประทานเพิ่มขึ้น") */ .v2-kpi-card__rice-field { z-index: 1; } .v2-kpi-card__rice-field .plant { transform-box: fill-box; transform-origin: center bottom; animation: v2-kpi-wheat-sway 9.2s ease-in-out var(--delay, -1s) infinite alternate; filter: saturate(.72) brightness(.9); } .v2-kpi-card__rice-field .back { opacity: .19; --phase: -1.7s; } .v2-kpi-card__rice-field .mid { opacity: .4; --phase: -4.3s; } .v2-kpi-card__rice-field .front { opacity: .7; --phase: -7.2s; } .v2-kpi-card__rice-field .plant:nth-child(2n) { --delay: calc(var(--phase) - 2.1s); animation-duration: 10.4s; animation-direction: alternate-reverse; } .v2-kpi-card__rice-field .plant:nth-child(3n) { --delay: calc(var(--phase) - 4.8s); animation-duration: 11.1s; } .v2-kpi-card__rice-field .plant:nth-child(5n) { --delay: calc(var(--phase) - 7.4s); animation-duration: 9.7s; animation-direction: alternate-reverse; } .v2-kpi-card__rice-field .plant:not(:nth-child(2n)):not(:nth-child(3n)):not(:nth-child(5n)) { --delay: var(--phase); } .v2-kpi-card__map .region { fill: color-mix(in oklab, var(--series) 16%, transparent); stroke: color-mix(in oklab, var(--series) 58%, transparent); stroke-width: 1; } .v2-kpi-card__map .route { fill: none; stroke: rgba(255,255,255,.38); stroke-width: 1.2; stroke-dasharray: 4 5; animation: v2-kpi-route-flow 9s linear infinite; } .v2-kpi-card__map circle { fill: var(--series); filter: drop-shadow(0 0 5px var(--series)); opacity: .82; } /* 13 ส.ค. 2026: เปลี่ยนจาก direct-child (>) เป็น descendant เฉยๆ — app-v2.html ห่อลูกการ์ดด้วย .v2-kpi-card__scalewrap (ดู app-v2.html mount script) ทำให้ .v2-kpi-card__chart ไม่ใช่ลูกตรงของ .v2-kpi-card--lime อีกต่อไป selector เดิมเลย match ไม่ติดเงียบๆ เหมือนบั๊กเดียวกับ households card (§ .v2-kpi-card--violet ด้านบน) — เลเยอร์ SVG map/route ที่ควรถูกซ่อนเลยโผล่ทับฉากโรงงานแทน (ผู้ใช้ทัก ว่าเห็น svg แปลกลอยอยู่ + โรงงานดูลอย) */ .v2-kpi-card--lime .v2-kpi-card__chart:not(.v2-kpi-card__benefit-scene):not(.v2-kpi-card__benefit-smoke-layer) { display: none; } /* 13 ส.ค. 2026: ผ่านมาหลายรอบ (CSS y, attribute y, preserveAspectRatio meet/slice) ยืนยันด้วย display:none ว่า deploy/cache ไม่ใช่ปัญหา — โค้ดไปถึงเครื่องจริงแน่นอน แต่ตำแหน่งภาพไม่ขยับตามที่สั่งเลยไม่ว่าจะลองอะไร สรุปว่า preserveAspectRatio keyword-based fitting (meet/slice + alignment) มีพฤติกรรมไม่แน่นอนข้ามเบราว์เซอร์ จริง — เลิกพึ่งมันทั้งหมด ย้ายไปคำนวณ x/y/width/height เองตรงๆ ล่วงหน้า (ดู ui-v2.js) แล้วใช้ preserveAspectRatio="none" (ไม่มี fitting algorithm ให้ตีความผิดได้เลย ภาพ map 1:1 เข้ากล่องที่คำนวณมาแล้ว ตรงเป๊ะพอดี) เหลือแค่ opacity/filter ไว้ที่นี่ */ .v2-kpi-card__benefit-scene .factory { opacity: .84; filter: saturate(.96) brightness(1.04) contrast(1.18) drop-shadow(0 -1px 0 rgba(196, 236, 232, .18)); } .v2-kpi-card__benefit-scene > rect { opacity: .58; } .v2-kpi-card__benefit-scene .cloud { opacity: .34; animation: v2-kpi-benefit-cloud 18s ease-in-out infinite alternate; } .v2-kpi-card__benefit-scene .cloud:nth-of-type(2) { animation-delay: -6s; animation-duration: 22s; } .v2-kpi-card__benefit-scene .cloud:nth-of-type(3) { animation-delay: -12s; animation-duration: 20s; } .v2-kpi-card__benefit-scene .smoke { opacity: .42; transform-box: fill-box; transform-origin: left center; animation: v2-kpi-benefit-smoke 7s ease-in-out infinite; } .v2-kpi-card__benefit-scene .smoke--secondary { animation-delay: -3.8s; animation-duration: 8.4s; opacity: .3; } .v2-kpi-card__benefit-scene .smoke:not(.smoke--secondary) { y: 95px; } .v2-kpi-card__benefit-scene .smoke--secondary { y: 115px; } .v2-kpi-card__benefit-scene .smoke { display: none; } .v2-kpi-card__benefit-scene .benefit-water use { animation: v2-kpi-benefit-water-flow 9s linear infinite; opacity: .72; } .v2-kpi-card__benefit-scene .benefit-water .water-back { fill: #4579e2; } .v2-kpi-card__benefit-scene .benefit-water .water-mid { fill: #3461c1; animation-delay: -3s; animation-duration: 7s; opacity: .8; } .v2-kpi-card__benefit-scene .benefit-water .water-front { fill: #2d55aa; animation-delay: -5s; animation-duration: 5.5s; opacity: .88; } @keyframes v2-kpi-benefit-water-flow { from { transform: translateX(0); } to { transform: translateX(120px); } } /* 3 ส.ค. 2026: เคยเพิ่ม .v2-kpi-card__scrim (ลอกสูตร scrim จากการ์ด lime ไปใส่การ์ดอื่น) แล้วผู้ใช้สั่งกลับ "เอาเกรดดิ้งออกทั้งหมด...รวมถึงพื้นที่รับประโยชน์ด้วย" — เอา scrim layer ออกจากทุกการ์ดแล้ว (รวม benefit-scrim ต้นฉบับของการ์ด lime เองด้วย ดู ui-v2.js buildKpiSceneGrid()) เหลือ class นี้เป็นแค่ คอมเมนต์ประวัติ ไม่มี markup ไหนใช้ `.v2-kpi-card__scrim` แล้ว — ลบกฎ CSS ทิ้งไปด้วย ไม่ต้องเก็บ dead rule */ .v2-kpi-card__benefit-smoke-layer { z-index: 1; } .v2-kpi-card__benefit-smoke-layer .smoke-plume { transform-box: fill-box; transform-origin: right center; animation: v2-kpi-benefit-smoke-motion 9.6s linear infinite, v2-kpi-benefit-smoke-opacity 9.6s ease-in-out infinite; filter: brightness(.88); will-change: transform, opacity; } .v2-kpi-card__benefit-smoke-layer .smoke-plume:nth-of-type(2) { animation-delay: -4.1s; animation-duration: 12.4s; } .v2-kpi-card__benefit-smoke-layer .smoke-plume:nth-of-type(3) { animation-delay: -6.3s; animation-duration: 7.8s; } .v2-kpi-card__benefit-smoke-layer .smoke-plume:nth-of-type(1) { x: 25px; y: 120px; width: 55px; height: 23px; } .v2-kpi-card__benefit-smoke-layer .smoke-plume:nth-of-type(2) { x: 86px; y: 105px; width: 82px; height: 34px; } .v2-kpi-card__benefit-smoke-layer .smoke-plume:nth-of-type(3) { x: 184px; y: 125px; width: 46px; height: 19px; } .v2-kpi-card__water .wave-back { fill: #4579e2; } .v2-kpi-card__water .wave-mid { fill: #3461c1; } .v2-kpi-card__water .wave-front { fill: #2d55aa; } .v2-kpi-card__water use { animation: v2-kpi-wave-move 12s linear infinite; } .v2-kpi-card__water use:nth-of-type(1) { animation-delay: -2s; } .v2-kpi-card__water use:nth-of-type(2) { animation-delay: -2s; animation-duration: 5s; } .v2-kpi-card__water use:nth-of-type(3) { animation-delay: -4s; animation-duration: 3s; } .v2-kpi-card__water .level { stroke: rgba(255,255,255,.45); stroke-width: 1; stroke-dasharray: 5 6; } .v2-kpi-card__water circle { fill: color-mix(in oklab, white 55%, var(--series)); opacity: .45; } /* 12 ส.ค. 2026: ผู้ใช้ขอให้ตึกในการ์ดครัวเรือนเป็นสีเทา (สีฟอนต์รอง --v2-text-dim — ธีมนี้ใช้เป็น "สีรอง" มาตลอดทั้งระบบ) แทนสีม่วง --series เดิมของการ์ด */ .v2-kpi-card__households .building { fill: color-mix(in oklab, var(--v2-text-dim) 16%, transparent); stroke: color-mix(in oklab, var(--v2-text-dim) 52%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; } /* ปรับตำแหน่ง layer อาคาร+ไฟกะพริบของการ์ดม่วง (การ์ดเดียวใน .v2-kpi-card--violet ตอนนี้) 12 ส.ค. 2026: เปลี่ยนจาก direct-child (>) เป็น descendant เฉยๆ — app-v2.html ห่อลูกการ์ดด้วย .v2-kpi-card__scalewrap (ดู app-v2.html mount script) ทำให้ .v2-kpi-card__chart ไม่ใช่ลูกตรงของ .v2-kpi-card--violet อีกต่อไป selector เดิมเลย match ไม่ติดเงียบๆ (ตึกเลยลอยไม่ชิดพื้นการ์ดล่างสุด ตามที่ผู้ใช้ทัก) — descendant selector ใช้ได้ทั้งมี/ไม่มี wrapper คั่นกลาง */ .v2-kpi-card--violet .v2-kpi-card__chart .v2-kpi-card__households { transform: translateY(19px); } .v2-kpi-card__households .roofline { fill: none; stroke: color-mix(in oklab, var(--v2-text-dim) 68%, transparent); stroke-width: 1.25; vector-effect: non-scaling-stroke; } .v2-kpi-card__households .ground { stroke: rgba(255,255,255,.24); stroke-width: 1; vector-effect: non-scaling-stroke; } .v2-kpi-card__households .light { fill: #ffe9a8; opacity: .12; animation: v2-kpi-office-light 9s ease-in-out infinite; } .v2-kpi-card__households .light:nth-of-type(3n) { animation-delay: -2s; } .v2-kpi-card__households .light:nth-of-type(4n) { animation-delay: -4s; } .v2-kpi-card__households .light:nth-of-type(5n) { animation-delay: -6s; } .v2-kpi-card__map { animation: v2-kpi-formal-drift 20s ease-in-out infinite alternate; } /* 4 ส.ค. 2026: ลองทำ "จุดค่าล่าสุด" วิ่งไปพร้อมปลายเส้นวาดตัวเองของการ์ดแรกหลายรอบ (CSS motion path, แล้วเปลี่ยนเป็น JS rAF loop คุมทั้งเส้น+จุดจากตัวแปรเดียวกัน — พิสูจน์ด้วยโค้ดแล้วว่า sync ตรงเป๊ะทุกเฟรม) แต่ผู้ใช้ตัดสินใจ "เอาจุดออก" ทิ้งไปเลยเพราะแยกด้วยตาจากขอบพื้นที่แรเงา (สถิต เต็มเส้นตลอด) ที่มีสีใกล้กัน ไม่ออก ทำให้ดูเหมือนไม่ sync อยู่ดีแม้โค้ดจะถูกต้อง — เหลือแค่เส้นวาดตัวเองอย่างเดียว (rev2) */ @keyframes v2-kpi-wave-move { from { transform: translateX(-90px); } to { transform: translateX(85px); } } @keyframes v2-kpi-formal-drift { to { transform: translateX(8px); } } @keyframes v2-kpi-project-pulse { 0% { opacity: 0; } 1.3%, 7.6% { opacity: 1; } 9.2%, 100% { opacity: 0; } } @keyframes v2-kpi-project-ring { from { opacity: .9; transform: scale(.55); } to { opacity: 0; transform: scale(1.55); } } @keyframes v2-kpi-benefit-cloud { from { transform: translateX(-8px) translateY(1px); } to { transform: translateX(12px) translateY(-2px); } } @keyframes v2-kpi-benefit-smoke { 0% { opacity: .14; transform: translateX(-3px) scale(.78); } 45% { opacity: .46; transform: translateX(4px) scale(1); } 100% { opacity: .08; transform: translateX(13px) scale(1.16); } } @keyframes v2-kpi-benefit-smoke-motion { from { transform: translateX(6px) scale(.56); } to { transform: translateX(-15px) scale(1.18); } } @keyframes v2-kpi-benefit-smoke-opacity { 0%, 14% { opacity: 0; } 30% { opacity: .18; } 46%, 61% { opacity: .42; } 76% { opacity: .22; } 88%, 100% { opacity: 0; } } @keyframes v2-kpi-rice-sway { from { transform: rotate(-1.4deg); } to { transform: rotate(2deg); } } @keyframes v2-kpi-wheat-sway { from { transform: scaleX(1.18) scaleY(1.03) rotate(-2.2deg) translateX(-2px); } to { transform: scaleX(1.18) scaleY(1.03) rotate(3deg) translateX(2px); } } @keyframes v2-kpi-office-light { 0%, 18%, 76%, 100% { opacity: .1; filter: none; } 30%, 62% { opacity: .88; filter: drop-shadow(0 0 2.5px rgba(255, 225, 142, .8)); } } @keyframes v2-kpi-route-flow { to { stroke-dashoffset: -90; } } .v2-kpi-card__panel { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 218px; padding: 22px 23px 20px; } .v2-kpi-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } /* 3 ส.ค. 2026: การ์ดนี้ตั้งใจให้ "มืดเสมอ" ไม่ปรับตาม data-v2-mode (§4.21) — แต่พื้นการ์ดจริงเป็นกระจกโปร่ง 10% (`.v2-kpi-card` background) ที่ต้องพึ่ง backdrop-filter ดูดสีพื้นหลังมาผสมถึงจะดูมืดสมจริง พอพื้นหลัง หน้าเป็น light mode (สีอ่อน) การ์ดเลยไม่มืดจริงอย่างที่ต้นฉบับตั้งใจ (ต้นฉบับสมมติพื้นหลังเข้มเสมอ) ตัวหนังสือ ขาวล้วนบนพื้นอ่อนๆ เลยอ่านยาก — ผู้ใช้เลือกให้สลับสีตัวหนังสือตามโหมด (ตัวเลือกที่ 2 จาก 2 ทางที่เสนอ: อีก ทางคือทำพื้นหลังการ์ดให้มืดตายตัวเสมอ) ค่า default ไม่ scope ตาม mode (เดิม) = ใช้เป็นค่าของ dark mode ต่อไป, เพิ่ม override เฉพาะ light mode ให้เป็นดำ+เงาขาวแทนขาว+เงาดำ */ .v2-kpi-card__label { color: rgba(255, 255, 255, .78); font-size: 15px; font-weight: 700; letter-spacing: .015em; line-height: 1.45; } :root[data-v2-theme="ios-liquid-glass"][data-v2-mode="light"] .v2-kpi-card__label { color: rgba(20, 20, 30, .78); } .v2-kpi-card__icon { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 13px; background: color-mix(in oklab, var(--accent) 30%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); font-size: 19px; } /* 12 ส.ค. 2026: margin-top เดิม 19px ต่างจาก .v2-kpi-card__unit margin-top:7px มาก ทำให้ระยะห่าง ป้าย→ตัวเลข ห่างกว่า ตัวเลข→หน่วย เห็นชัด ผู้ใช้ขอให้เท่ากันโดยยึดค่าน้อยกว่า (7px) เป็นฐาน */ .v2-kpi-card__metric { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; margin-top: 7px; } /* 3 ส.ค. 2026: ต้นฉบับใช้ clamp(...,Nvw,...) เพราะการ์ดอยู่ใน grid ที่กว้างตาม viewport จริง — ตอนนี้ .v2-kpi-card กว้างคงที่ (min(300px,82vw) ซึ่ง ≥366px จอจะได้ 300px เป๊ะทุกจอ) การอิง vw จึงทำให้ตัวเลขมีขนาดต่างกันระหว่างอุปกรณ์ (PC จอกว้าง vw เยอะ = ตัวหนังสือใหญ่/ขึ้นบรรทัดใหม่ ผลักการ์ด ให้สูงกว่าการ์ดอื่นในแถว ดันภาพฉาก (โรงงาน/ตึก) ที่ scale เต็มความสูงการ์ดให้ "ลอย" ต่างจาก iPad) เปลี่ยนเป็น ค่าคงที่แทน อิงตามความกว้างการ์ดจริง ไม่ใช่ viewport */ .v2-kpi-card__value { color: #fff; font-size: 36px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); } :root[data-v2-theme="ios-liquid-glass"][data-v2-mode="light"] .v2-kpi-card__value { color: #14141e; text-shadow: 0 2px 10px rgba(255, 255, 255, .55); } .v2-kpi-card__value--long { font-size: 30px; } .v2-kpi-card__delta { padding: 3px 8px; border: 1px solid color-mix(in oklab, var(--accent) 52%, transparent); border-radius: 999px; color: #f4fff9; background: color-mix(in oklab, var(--accent) 42%, transparent); font-size: 12px; font-weight: 700; white-space: nowrap; } .v2-kpi-card__delta--down { border-color: rgba(251, 113, 133, .42); background: rgba(190, 24, 93, .35); color: #fff1f4; } .v2-kpi-card__unit { margin-top: 7px; padding-top: 0; color: rgba(255, 255, 255, .68); font-size: 15px; font-weight: 500; line-height: 1.35; } :root[data-v2-theme="ios-liquid-glass"][data-v2-mode="light"] .v2-kpi-card__unit { color: rgba(20, 20, 30, .62); } /* 7 ส.ค. 2026: ป้าย/หน่วย/ตัวเลขในการ์ด KPI — เอฟเฟกต์ vanish/reveal ต่อกลุ่มอักขระ(หรือหลักตัวเลข)เดียวกับ ป้ายชื่อ (§5.35) เล่นครั้งเดียวตอนโหลด หน่วงตามลำดับการ์ด — scope ด้วย .v2-kpi-scene--vanish-once กันชน กับ .v2-kpi-letter ที่อาจถูกใช้ที่อื่นในอนาคต ระวัง: .v2-kpi-card มี overflow:hidden (จำเป็นสำหรับตัดขอบ ภาพประกอบในการ์ด ห้ามเปลี่ยน) ตัวอักษร/หลักกระเจิงแค่ -22px ขึ้นบน (เท่ากับ padding-top ของ .v2-kpi-card__panel พอดีสำหรับป้าย, ยิ่งเผื่อเยอะกว่าสำหรับตัวเลขที่อยู่ต่ำกว่าป้ายอีกที) ไม่ใช่ -74px แบบป้ายชื่อ — ทดสอบแล้วไม่โดนตัดขอบทั้งป้ายและตัวเลข (ดู §5.35 บั๊กที่ 2 เป็นบทเรียน) */ .v2-kpi-digit-wrap { display: inline-flex; white-space: pre; align-items: baseline; } .v2-kpi-scene--vanish-once .v2-kpi-letter { display: inline-block; white-space: pre; transform-origin: center; transition: transform 1.1s cubic-bezier(.3,.6,.4,1), opacity 1s ease, filter 1s ease; transition-delay: calc(var(--i) * 55ms); } .v2-kpi-scene--vanish-once .v2-kpi-text-reveal .v2-kpi-letter { opacity: 0; filter: blur(9px); transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.35); } .v2-kpi-scene--vanish-once .v2-kpi-text-reveal.is-ready .v2-kpi-letter { opacity: 1; filter: blur(0); transform: none; } /* 12 ส.ค. 2026: :nth-of-type เหตุผลเดียวกับชุดกล่องการ์ดด้านบน (spacer เป็น div ทำให้ nth-child เลื่อน) */ .v2-kpi-scene--vanish-once .v2-kpi-card:nth-of-type(2) .v2-kpi-letter { transition-delay: calc(90ms + var(--i) * 55ms); } .v2-kpi-scene--vanish-once .v2-kpi-card:nth-of-type(3) .v2-kpi-letter { transition-delay: calc(180ms + var(--i) * 55ms); } .v2-kpi-scene--vanish-once .v2-kpi-card:nth-of-type(4) .v2-kpi-letter { transition-delay: calc(270ms + var(--i) * 55ms); } .v2-kpi-scene--vanish-once .v2-kpi-card:nth-of-type(5) .v2-kpi-letter { transition-delay: calc(360ms + var(--i) * 55ms); } .v2-kpi-scene--vanish-once .v2-kpi-card:nth-of-type(6) .v2-kpi-letter { transition-delay: calc(450ms + var(--i) * 55ms); } @media (max-width: 580px) { .v2-kpi-card { width: min(260px, 78vw); } .v2-kpi-card, .v2-kpi-card__panel { min-height: 205px; } .v2-kpi-card__value { font-size: 30px; } .v2-kpi-card__value--long { font-size: 26px; } } @media (prefers-reduced-motion: reduce) { .v2-kpi-card { transition: none; animation: none !important; opacity: 1 !important; transform: none !important; } .v2-reveal-stagger { animation: none !important; opacity: 1 !important; transform: none !important; } .v2-kpi-card__thailand-map .project-point, .v2-kpi-card__rice .rice-sway, .v2-kpi-card__rice-field .plant, .v2-kpi-card__map, .v2-kpi-card__map .route, .v2-kpi-card__benefit-scene .cloud, .v2-kpi-card__benefit-scene .smoke, .v2-kpi-card__benefit-smoke-layer .smoke-plume, .v2-kpi-card__water use, .v2-kpi-card__households .light { animation: none; } .v2-kpi-scene--vanish-once .v2-kpi-letter { transition: opacity .4s ease; transition-delay: 0s; } .v2-kpi-scene--vanish-once .v2-kpi-text-reveal .v2-kpi-letter { transform: none; filter: none; } } /* ============================================================ Cross-document View Transitions (เฟส 2 — 31 ส.ค. 2026) ============================================================ เป้าหมาย: เปลี่ยนหน้าระหว่างหน้าธีม v2 ให้ "ต่อเนื่องไม่เหมือนกดแล้วรีเฟรช" โดยไม่ต้องทำ SPA/keep-alive (ซึ่งชนกับ global + inline onclick ของ app-v2/dashboard-v2 — ดู liquid-glass-v2.md) กลไก: same-origin cross-document view transition (navigation:auto) — ทำงานอัตโนมัติทุกครั้งที่ navigate ด้วย location.href/ ไปหน้าที่ opt-in เหมือนกัน (ทั้งสองหน้าต้องมี @view-transition นี้ = ทุกหน้าที่ โหลด ui-v2.css) — หน้าธีมเก่า (map/info/docs, dashboard.html เดิม) ไม่โหลดไฟล์นี้ จึงไม่ opt-in → เปลี่ยนหน้า ปกติ (ไม่มี VT) โดยไม่มี error รองรับ Chrome/Edge/Safari 18+; Firefox ยังไม่รองรับ → fallback เปลี่ยนหน้าปกติ การตั้ง view-transition-name ให้ปุ่มลอย navbar (navpill/ปุ่ม light-dark) + wallpaper = ยก element เหล่านี้ ออกจาก snapshot ของ root ให้ morph old→new เอง (ตำแหน่ง/ขนาดเท่ากันทั้งสองหน้า = ค้างนิ่งไม่กระพริบ) ขณะที่ เนื้อหา (root) cross-fade — ได้ความรู้สึก "navbar อยู่กับที่ เนื้อหาเปลี่ยน" ตามที่ผู้ใช้ขอ ⚠ ไม่ตั้งชื่อให้ .v2-brand (มี reveal animation เข้าฉากทุกครั้งที่โหลด — ถ้า morph จะซ้อนกับ animation ที่เพิ่ง เริ่ม ดูกระพริบ) ปล่อยให้ cross-fade กับ root แล้วเล่น reveal ของมันเองตามปกติ ดูตั้งใจกว่า ⚠ view-transition-name ต้อง unique ต่อ document — element เหล่านี้มีอย่างละ 1 ตัวต่อหน้าเสมอ (สร้างโดย navbar()/mountAmbient ของ ui-v2.js) จึงปลอดภัย */ @view-transition { navigation: auto; } [data-v2-theme="ios-liquid-glass"] .v2-navpill { view-transition-name: v2-navpill; } [data-v2-theme="ios-liquid-glass"] .v2-ios-switcher { view-transition-name: v2-switch; } [data-v2-theme="ios-liquid-glass"] .v2-wallpaper { view-transition-name: v2-wallpaper; } /* brand (logo + ป้ายหน่วยงาน) = ต้อง "ค้างอยู่กับที่" ตอนเปลี่ยนหน้า ไม่กระพริบ/เล่น reveal ซ้ำ (ผู้ใช้ขอ ไม่งั้น ดูเหมือนรีเฟรช) — ตั้ง view-transition-name ให้ morph old→new อยู่กับที่ + ข้าม reveal ตอน seamless nav (buildBrand อ่าน flag v2_seamless_nav) ปลอดภัยเพราะ reveal จริงเล่นเฉพาะตอนโหลดตรง/รีเฟรช (ไม่มี VT) เท่านั้น */ [data-v2-theme="ios-liquid-glass"] .v2-brand { view-transition-name: v2-brand; } /* .v2-navback (ปุ่มย้อนกลับ) ใช้ชื่อเดียวกับ brand ไม่ได้ (ต้อง unique ต่อ document) — คนละหน้าใช้คนละตัว (หน้าหลักมี brand, หน้าย่อยมี navback) ตั้งชื่อแยกให้ตัวที่มีจริงในแต่ละหน้า morph ข้ามกันได้ */ [data-v2-theme="ios-liquid-glass"] .v2-navback { view-transition-name: v2-brand; } /* เนื้อหา (root) cross-fade เร็ว/นุ่ม — ค่า default ของ UA ก็ใช้ได้ แต่ปรับให้กระชับขึ้นเล็กน้อยให้ลื่น */ ::view-transition-old(root) { animation-duration: .22s; } ::view-transition-new(root) { animation-duration: .30s; } /* เคารพ prefers-reduced-motion — ตัดอนิเมชัน VT ทั้งหมด (เปลี่ยนหน้าทันทีไม่มีเอฟเฟกต์) */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }