/* ============================================================================
   ดอเดวิด — เปลือกร่วมทุกหน้า (realdordavidx.com)
   🔴 7 ก.ย. 2569 — ถอดพื้นหลังแบบคลิป (กริด 108px + ผงเงินลอยขึ้น + ฝ้า) ออกทั้งหมด
      David: *"ไม่ต้องใส่ grid ก็ได้ ... กับหิมะสีเงินพอ"*
   🔑 กติกาหน้าตาที่เคาะแล้ว — ใช้กับทุกหน้าใหม่:
      1. ดำต้องมี "ชั้น" ไม่ใช่สีเดียวทั้งจอ
      2. ภาพต้องละลายเข้าพื้น ไม่ใช่รูปแปะในกล่อง
      3. สีมาจากภาพ manhwa เท่านั้น พื้นเว็บขาวดำ
      4. ห้ามใส่เลขลำดับ 01 02 03 04 (ลายเซ็นงาน AI)
      5. ไทยห้ามเล็กกว่า ~11.5px · ห้ามคำแตกกลางคำ (.nbw)
   ========================================================================== */
:root{
  --bg:#08080b; --ink:#eeeef2; --mut:#8e8e98; --dim:#5c5c66; --faint:#3a3a42;
  --ln:rgba(255,255,255,.13); --dash:rgba(255,255,255,.09);
  --card:#0c0c11; --bord:rgba(255,255,255,.13); --bord2:rgba(255,255,255,.3);
  --acc:#FFC61A; --gold:#FFC61A; --cy:#5FD9FF; --vi:#A97BFF; --gr:#B7FF3C; --line:#06C755;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ดำเป็นชั้น: เทาอมน้ำเงินจางบนสุด → ดำสนิทล่าง */
body{color:var(--ink);font-family:Kanit,sans-serif;overflow-x:clip;min-height:100svh;
  background:#08080b;
  background-image:radial-gradient(ellipse 120% 52% at 50% 0%,#15151d 0%,#0c0c11 42%,#08080b 76%);
  background-attachment:fixed;-webkit-font-smoothing:antialiased}
/* 🔴 canvas เป็น replaced element ⇒ inset:0 อย่างเดียว "ไม่" คุมขนาด
      มันไปใช้ค่า attribute width/height (ซึ่ง JS ตั้งเป็น 375×dpr = 750)
      ผลคือผืนหิมะกว้าง 2 เท่าของจอ เห็นแค่ครึ่งซ้าย + เม็ดใหญ่เกินจริง 2 เท่า
      ⇒ ต้องสั่ง width/height 100% ตรงๆ */
#snow{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wrap{position:relative;z-index:1;max-width:720px;margin:0 auto;
  padding:26px 20px calc(40px + env(safe-area-inset-bottom))}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.nbw{white-space:nowrap}                       /* 🔤 กันคำไทยแตกกลางคำ */

/* ══ เมนูบาร์ — โครงเดียวกับ .lp-nav ของ urania-labs.com ══
   sticky + เบลอหลัง + พื้นโปร่ง + เส้นล่างบางๆ · ซ้าย = แบรนด์ · ขวา = ปุ่มเม็ดยา
   🔴 ของเดิมเป็น <a> เปล่าๆ ไม่มีสไตล์ พอเบราว์เซอร์ค้าง CSS เก่าเลยกลายเป็นลิงก์น้ำเงิน */
.top{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(8,8,11,.74);border-bottom:1px solid rgba(255,255,255,.1)}
.top .in{max-width:720px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.top .bm{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-width:0}
.top .bm img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 22%;
  display:block;border:1px solid var(--ln);flex:none}
.top .bm span{font-weight:600;font-size:15px;letter-spacing:.06em;white-space:nowrap}
.top .bm .sub{font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.04em;
  padding-left:9px;margin-left:2px;border-left:1px solid var(--ln)}
@media(max-width:420px){.top .bm .sub{display:none}}
.top .go{display:inline-flex;align-items:center;gap:7px;flex:none;font-family:var(--mono);
  font-size:12.5px;font-weight:500;letter-spacing:.04em;text-decoration:none;white-space:nowrap;
/* ปุ่มบนแถบเมนูต้องมองเห็นชัด — เทาบนดำมันจมหายไปเลย */
  color:var(--acc);border:1px solid rgba(255,198,26,.45);background:rgba(255,198,26,.1);
  border-radius:999px;padding:8px 15px;transition:background .2s,border-color .2s,color .2s,transform .16s}
.top .go:active{transform:scale(.97)}
@media(hover:hover){.top .go:hover{background:rgba(255,198,26,.2);border-color:var(--acc)}}
@media(min-width:620px){.top .in{padding:11px 30px}}

.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;color:var(--dim);
  display:flex;align-items:center;gap:11px;margin-bottom:14px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--ln)}

.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;text-decoration:none;
  border:0;border-radius:14px;padding:15px 18px;font-family:inherit;font-size:16px;font-weight:600;
  background:var(--acc);color:#141006;cursor:pointer;letter-spacing:.2px;
  transition:transform .16s ease,filter .16s ease}
.btn:active{transform:scale(.987)}
@media(hover:hover){.btn:hover{filter:brightness(1.08)}}
.btn.ghost{background:transparent;border:1px solid var(--bord);color:var(--ink)}
@media(hover:hover){.btn.ghost:hover{border-color:var(--bord2);background:rgba(255,255,255,.03);filter:none}}

footer{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:24px 20px 40px;
  border-top:1px solid var(--ln);font-family:var(--mono);font-size:12px;color:var(--dim);
  display:flex;justify-content:space-between;letter-spacing:.06em}
footer a{color:var(--mut);text-decoration:none}

h1,h2,h3,p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
@media(min-width:620px){.wrap{padding:34px 30px 48px}.top{padding:14px 30px}footer{padding:26px 30px 44px}}