/* yod-glass-marketing.css — "Spatial Liquid Glass" ของหน้าการตลาด (yodpos.com · yodaccount.com · สมัคร/ดาวน์โหลด)
 * เจ้าของเคาะ 11 ต.ค. 69 (Concept 5) · แยกจาก yod-glass.css (ของแอป) โดยตั้งใจ: แก้หน้าการตลาดไม่ต้องขยับ SW ของ POS
 * โหลดเฉพาะ yodpos-landing.html · index.html · pos-signup.html · pos-download.html · signup.html
 */
/* @ygm:start ════════════════════════════════════════════════════════════════════════════════════
 * YOD Glass · หน้าการตลาด (yodpos.com + yodaccount.com + หน้าสมัคร/ดาวน์โหลด) — "Spatial Liquid Glass"
 * เจ้าของเคาะ 11 ต.ค. 69 (grill · Concept 5 · _concepts/c5-glass): หน้าการตลาดทั้งสองเว็บเป็น "มืด" — ห้องลึกแสงนุ่ม
 *   แผ่นกระจกใสอมสีลอยหลายระดับความลึก · เบลอจริง (-webkit- คู่เสมอ) · ขอบสะท้อนแสง · พารัลแลกซ์เมาส์/การเลื่อน
 *   แทนกติกาเดิม "หน้าการตลาดสว่างอย่างเดียว" · พื้นผิวในแอป (pos/app/pos-back/manager) ยังสว่างเป็นค่าเริ่มต้น — ไม่แตะ
 * ทุกกฎขึ้นต้นด้วย html.ygm · ไฟล์นี้ไม่อยู่ใน SHELL ของ pos-sw.js และไม่มีแอปไหนลิงก์
 * ตัวช่วย JS: assets/js/yod-glass.js (ตัดสิน ygm-lite ก่อน paint · วางแผ่นกระจก · พารัลแลกซ์ · เฝ้าเฟรมเรต)
 *
 * คอนทราสต์ (WCAG AA · ด่าน pos-tests/marketing_glass.test.js คิดจากโทเคนจริงในบล็อก html.ygm{}):
 *   - กระจกในส่วนเนื้อหา (.ygm-g): ข้างหลัง = ห้อง + ก้อนแสง ⇒ พื้นเลวร้ายสุด = --ygm-worst-orb
 *   - แผ่นลอยใน hero (.ygm-pane): ข้างหลังอาจเป็นจอเครื่อง 3D สีขาว ⇒ พื้นเลวร้ายสุด = ขาวล้วน · ข้อความในแผ่นใช้ --ygm-tx เท่านั้น
 *   - พื้นสำรองทึบ (--ygm-fallback · ไม่มี backdrop-filter / ลดความโปร่งใส / เครื่องสเปกต่ำ) ≥ 4.5 โดยไม่พึ่งเงาตัวอักษร
 * ประสิทธิภาพ: html.ygm-lite (เครื่องสเปกต่ำ · ประหยัดเน็ต · เฟรมตก) = การ์ดทึบ ไม่มีเบลอซ้อน · ไม่มีพารัลแลกซ์ · ก้อนแสงนิ่ง
 * ════════════════════════════════════════════════════════════════════════════════════════════════ */
html.ygm{color-scheme:dark;
  --ygm-space:#03130F;
  --ygm-space-2:#072620;
  --ygm-space-3:#0B3029;
  --ygm-tx:#EEF8F5;
  --ygm-tx-2:#C3DBD3;
  --ygm-tx-3:#B5D0C8;
  --ygm-mint:#9BE0C9;
  --ygm-teal:#1F7461;
  --ygm-coral:#F5713C;
  --ygm-line:rgba(238,248,245,.12);
  --ygm-line-2:rgba(238,248,245,.22);
  --ygm-glass:rgba(6,30,25,.6);
  --ygm-glass-pane:rgba(3,24,20,.7);
  --ygm-glass-thick:rgba(3,24,20,.84);
  --ygm-glass-teal:rgba(17,84,70,.62);
  --ygm-glass-coral:rgba(64,30,20,.6);
  --ygm-sheen:rgba(255,255,255,.07);
  --ygm-fallback:#10302A;
  --ygm-fallback-2:#163B33;
  --ygm-worst-orb:#12705F;
  --ygm-rim:linear-gradient(var(--ygm-la,135deg),rgba(255,255,255,.62),rgba(255,255,255,.12) 30%,rgba(255,255,255,0) 55%,rgba(255,255,255,.16) 85%,rgba(255,255,255,.38));
  --ygm-halo:0 1px 2px rgba(0,20,16,.45);
  --ygm-sh:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.05),0 1px 1px rgba(0,0,0,.14),0 24px 48px -20px rgba(0,0,0,.6),0 60px 90px -44px rgba(0,0,0,.5);
  --ygm-sh-sm:inset 0 1px 0 rgba(255,255,255,.2),0 1px 1px rgba(0,0,0,.14),0 10px 24px -12px rgba(0,0,0,.5);
  --ygm-out:cubic-bezier(.2,.9,.25,1);
  background:var(--ygm-space)}
html.ygm body{background:transparent;color:var(--ygm-tx)}

/* ── ห้อง: พื้นหลังติดจอ + ก้อนแสง (ให้กระจกทั้งหน้ามีสีให้หักเห) · ไล่สีล้วน ไม่มี filter:blur (เบาบนเครื่องเก่า) ── */
html.ygm .ygm-space{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:radial-gradient(70% 55% at 50% 70%,var(--ygm-space-3) 0%,rgba(11,48,41,0) 70%),radial-gradient(120% 80% at 50% 0%,var(--ygm-space-2),var(--ygm-space) 70%)}
html.ygm .ygm-orb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
html.ygm .ygm-orb--a{width:52vmax;height:52vmax;left:-16vmax;top:34%;background:radial-gradient(circle,rgba(15,181,166,.5),rgba(15,181,166,0) 66%);animation:ygm-drift 28s ease-in-out infinite alternate}
html.ygm .ygm-orb--b{width:34vmax;height:34vmax;right:-8vmax;top:4%;background:radial-gradient(circle,rgba(255,107,93,.24),rgba(255,107,93,0) 64%);animation:ygm-drift 34s ease-in-out infinite alternate-reverse}
html.ygm .ygm-orb--c{width:40vmax;height:40vmax;left:40%;top:62%;background:radial-gradient(circle,rgba(31,116,97,.6),rgba(31,116,97,0) 68%);animation:ygm-drift 24s ease-in-out infinite alternate}
html.ygm .ygm-orb--d{width:22vmax;height:22vmax;left:60%;top:22%;background:radial-gradient(circle,rgba(255,176,32,.12),rgba(255,176,32,0) 66%);animation:ygm-drift 30s ease-in-out infinite alternate-reverse}
@keyframes ygm-drift{to{transform:translate3d(6vw,-5vh,0) scale(1.08)}}

/* ── กระจก (พื้นสำรองทึบก่อน · เบราว์เซอร์มี backdrop-filter ค่อยใส) ── */
html.ygm .ygm-g,html.ygm .ygm-pane{position:relative;color:var(--ygm-tx);background:var(--ygm-fallback);box-shadow:var(--ygm-sh);border-radius:26px;isolation:isolate}
html.ygm .ygm-g::before,html.ygm .ygm-pane::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:1;
  background:var(--ygm-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.ygm .ygm-g::after,html.ygm .ygm-pane::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(120% 60% at var(--ygm-hx,30%) -12%,var(--ygm-sheen),rgba(255,255,255,0) 52%)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html.ygm .ygm-g{background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,0) 45%),var(--ygm-glass);
    -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%)}
  html.ygm .ygm-g--teal{background:linear-gradient(165deg,rgba(60,199,165,.2),rgba(60,199,165,0) 55%),var(--ygm-glass-teal)}
  html.ygm .ygm-g--coral{background:linear-gradient(165deg,rgba(245,113,60,.16),rgba(245,113,60,0) 60%),var(--ygm-glass-coral)}
  html.ygm .ygm-pane{background:var(--ygm-glass-pane);-webkit-backdrop-filter:blur(22px) saturate(185%);backdrop-filter:blur(22px) saturate(185%)}
  html.ygm .ygm-pane--teal{background:linear-gradient(165deg,rgba(60,199,165,.18),rgba(60,199,165,0) 55%),var(--ygm-glass-pane)}
  html.ygm .ygm-pane--coral{background:linear-gradient(165deg,rgba(245,113,60,.16),rgba(245,113,60,0) 60%),var(--ygm-glass-pane)}
}
html.ygm .ygm-g > *,html.ygm .ygm-pane > *{position:relative;z-index:2}
html.ygm .ygm-legible{text-shadow:var(--ygm-halo)}

/* ── ปุ่มแก้ว: หลัก = teal ทึบ + ประกายแก้ว (ขาวบน teal 5.6:1 เสมอ) · รอง = แก้วใส ── */
html.ygm .ygm-btn{background:linear-gradient(180deg,rgba(60,199,165,.2),rgba(60,199,165,0) 55%),var(--ygm-teal);color:#FFFFFF;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.18),0 10px 26px -10px rgba(15,181,166,.45)}
html.ygm .ygm-btn--sec{background:rgba(255,255,255,.08);color:var(--ygm-tx);border-color:var(--ygm-line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html.ygm .ygm-btn--sec{-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%)}
}
html.ygm .ygm-btn:active,html.ygm .ygm-btn--sec:active{transform:scale(.97);transition:transform 100ms ease-out}

/* ── แถบนำทางติดบนแบบแก้ว ── */
html.ygm .ygm-bar{background:rgba(3,19,15,.86);border-color:var(--ygm-line)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html.ygm .ygm-bar{background:rgba(3,19,15,.6);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
}

/* ── แผ่นลอยใน hero (ภาพประกอบ · ข้อมูลตัวอย่าง · aria-hidden) ── */
html.ygm .ygm-panes{position:absolute;left:0;right:0;top:0;height:100vh;height:100svh;z-index:1;pointer-events:none;overflow:hidden;perspective:1200px}
/* ตัดเฉพาะแนวนอน (กันเลื่อนข้าง) — แนวตั้งปล่อยให้แผ่นลอยลงในห้อง .hero ได้ ไม่โดนเส้นขอบ 100svh ตัดครึ่งใบ (11 ต.ค. 69)
   เบราว์เซอร์ที่ไม่รู้จัก overflow:clip ยังใช้ hidden ข้างบน ⇒ yod-glass.js วัดว่ากล่องตัด y แล้วบีบแผ่นให้อยู่ในกล่องแทน */
@supports (overflow:clip){html.ygm .ygm-panes{overflow:visible;overflow-x:clip}}
html.ygm .ygm-pane{position:absolute;left:0;top:0;width:var(--w,240px);padding:16px 18px;border-radius:24px;text-shadow:var(--ygm-halo);
  transform:translate3d(var(--px,0px),var(--py,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  opacity:0;transition:opacity 1s var(--ygm-out)}
html.ygm .ygm-panes.is-in .ygm-pane{opacity:1}
html.ygm .ygm-pane__k{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ygm-tx)}
html.ygm .ygm-pane__h{margin:4px 0 8px;font-size:17px;font-weight:600;line-height:1.3;color:var(--ygm-tx)}
html.ygm .ygm-pane__tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;background:rgba(255,255,255,.14);color:var(--ygm-tx);vertical-align:1px}
html.ygm .ygm-li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;padding:6px 0;border-top:1px solid var(--ygm-line);color:var(--ygm-tx)}
html.ygm .ygm-li:first-of-type{border-top:0}
html.ygm .ygm-ck{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
html.ygm .ygm-ck.on{background:rgba(47,179,148,1);box-shadow:none;position:relative}
html.ygm .ygm-ck.on::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid rgba(255,255,255,1);border-width:0 2px 2px 0;transform:rotate(45deg)}
html.ygm .ygm-money{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:4px 0 10px;color:var(--ygm-tx);font-variant-numeric:tabular-nums}
html.ygm .ygm-loz{display:flex;gap:8px}
html.ygm .ygm-loz span{flex:1;text-align:center;font-size:13.5px;font-weight:600;padding:9px 0;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
html.ygm .ygm-loz span.pri{background:var(--ygm-teal)}
html.ygm .ygm-bi{display:inline-block;height:9px;border-radius:5px;background:rgba(255,255,255,.24);width:var(--bw,60px);flex:none}
html.ygm .ygm-bi.t{background:rgba(60,199,165,.75)}
html.ygm .ygm-bi.c{background:rgba(245,113,60,.75)}
html.ygm .ygm-wk{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:6px}
html.ygm .ygm-wk i{height:40px;border-radius:8px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
html.ygm .ygm-wk i::after{content:"";position:absolute;left:3px;right:3px;top:var(--t,20%);height:var(--h,50%);border-radius:5px;background:rgba(255,255,255,.55)}
html.ygm .ygm-wk i.off::after{display:none}
html.ygm .ygm-wk i.lv::after{background:rgba(245,113,60,.75)}
html.ygm .ygm-note{font-size:12px;color:var(--ygm-tx-3)}
@media (max-width:640px){html.ygm .ygm-pane{width:min(var(--w,240px),calc(50vw - 12px));padding:14px}html.ygm .ygm-money{font-size:26px}}

/* ── ลดการเคลื่อนไหว / ลดความโปร่งใส / คอนทราสต์สูง / เครื่องสเปกต่ำ ── */
@media (prefers-reduced-motion:reduce){
  html.ygm .ygm-orb{animation:none}
  html.ygm .ygm-pane{transition:opacity .2s ease;transform:none}
}
@media (prefers-reduced-transparency:reduce){
  html.ygm .ygm-g,html.ygm .ygm-pane,html.ygm .ygm-btn--sec{background:var(--ygm-fallback);-webkit-backdrop-filter:none;backdrop-filter:none}
  html.ygm .ygm-bar{background:var(--ygm-space);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  html.ygm .ygm-g,html.ygm .ygm-pane{background:var(--ygm-fallback);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1.5px var(--ygm-tx-2)}
}
/* เครื่องสเปกต่ำ (yod-glass.js ตัดสินก่อน paint + เฝ้าเฟรมตก): เบลอเหลือที่แถบนำทาง · การ์ด/แผ่นลอยทึบ · ก้อนแสงนิ่ง · แผ่นลอยเหลือ 3 */
html.ygm-lite .ygm-g,html.ygm-lite .ygm-pane,html.ygm-lite .ygm-btn--sec{background:var(--ygm-fallback);-webkit-backdrop-filter:none;backdrop-filter:none}
html.ygm-lite .ygm-orb{animation:none;will-change:auto}
html.ygm-lite .ygm-pane{transform:none;transition:none}
html.ygm-lite .ygm-pane[data-lite="off"]{display:none}
html.ygm :focus-visible{outline:2px solid var(--ygm-mint);outline-offset:3px}

/* ── ชิ้นร่วมของสองเว็บ (yod_one_company): แถบแบรนด์ .ysw · ส่วนท้าย .yft · ชวนข้ามแอป .yxs · บรรทัดราคา .ypr__* ── */
html.ygm .ysw{background:rgba(3,19,15,.9);border-bottom-color:var(--ygm-line);color:var(--ygm-tx-2)}
html.ygm .ysw__tab{color:var(--ygm-tx-2)}
html.ygm .ysw__tab span,html.ygm .ysw__line{color:var(--ygm-tx-3)}
html.ygm .ysw__tab:hover{background:rgba(255,255,255,.07)}
html.ygm .ysw__tab[aria-current="page"]{background:rgba(255,255,255,.12);color:var(--ygm-tx);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
html.ygm .ysw__tab[aria-current="page"] span{color:var(--ygm-tx-2)}
html.ygm .yft{background:rgba(2,12,10,.72);border-top-color:var(--ygm-line);color:var(--ygm-tx-2)}
html.ygm .yft__line,html.ygm .yft h4{color:var(--ygm-tx)}
html.ygm .yft__team,html.ygm .yft a,html.ygm .yft__base,html.ygm .yft__legal a{color:var(--ygm-tx-3)}
html.ygm .yft a:hover{color:var(--ygm-mint)}
html.ygm .yft__base{border-top-color:var(--ygm-line)}
html.ygm .yft__brand img{filter:none}
html.ygm .yxs{background:var(--ygm-fallback);border-color:var(--ygm-line-2);box-shadow:var(--ygm-sh)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html.ygm .yxs{background:linear-gradient(165deg,rgba(60,199,165,.14),rgba(60,199,165,0) 55%),var(--ygm-glass);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%)}
}
html.ygm .yxs .yxs__eb,html.ygm .yxs a.yxs__lk{color:var(--ygm-mint)}
html.ygm .yxs .yxs__h{color:var(--ygm-tx)}
html.ygm .yxs .yxs__p,html.ygm .yxs .yxs__note{color:var(--ygm-tx-2)}
html.ygm .yxs .yxs__note svg{stroke:var(--ygm-mint)}
html.ygm .yxs .yxs__chips li{background:rgba(255,255,255,.07);border-color:var(--ygm-line-2);color:var(--ygm-tx)}
html.ygm .yxs a.yxs__btn{background:var(--ygm-teal);color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
html.ygm .yxs a.yxs__btn:hover{background:rgba(23,87,71,1)}
html.ygm .ypr__pl{background:rgba(245,113,60,.16);color:#FFC6A8}
html.ygm .ypr__zero,html.ygm .ypr__n{color:var(--ygm-tx)}
html.ygm .ypr__list,html.ygm .ypr__now,html.ygm .ypr__was,html.ygm .ypr__xt{color:var(--ygm-tx-2)}
html.ygm .ypr__lab,html.ygm .ypr__per,html.ygm .ypr__sub,html.ygm .ypr__vat{color:var(--ygm-tx-3)}
@media (prefers-reduced-transparency:reduce){
  html.ygm .yxs{background:var(--ygm-fallback);-webkit-backdrop-filter:none;backdrop-filter:none}
}
html.ygm-lite .yxs{background:var(--ygm-fallback);-webkit-backdrop-filter:none;backdrop-filter:none}
/* @ygm:end */