/* ============================================================
   theme-skin.css — สกินกลาง "Glass Light · กระจกพาสเทลโมเดิร์น"
   (เปลี่ยนจาก Greige Editorial → ให้เข้าชุดกับ skill-999.com)
   ลิงก์ทับทุกหน้า · ⚠️ ไม่แตะสีความหมาย: .o.right(เขียว) .o.wrong(แดง) .ov ✔/✘
   ⚡ ไม่ใช้ backdrop-filter/fixed (กัน lag บน GPU อ่อน) — กระจกใช้โปร่งแสง+เงา+ไฮไลต์แทน
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600&family=Trirong:wght@500;600;700&family=Kanit:wght@500;600;700;800&display=swap');

:root{
  --sk-bg:#eef2fb; --sk-surface:rgba(255,255,255,.62); --sk-soft:rgba(255,255,255,.45); --sk-line:rgba(255,255,255,.75);
  --sk-ink:#222734; --sk-ink2:#5a6273; --sk-muted:#8b93a3;
  --sk-sage:#B8860B; --sk-sage-d:#9A6E08; --sk-charcoal:#222734;
  --sk-serif:'Playfair Display','Trirong',serif;
  --sk-radius:16px;
  --sk-glass-sh:0 18px 40px rgba(22,30,72,.16),0 5px 12px rgba(22,30,72,.08),inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1.5px rgba(255,255,255,.30);
}

/* ---------- พื้นหลังพาสเทลฟ้า/ม่วง (gradient ล้วน · ไม่มี blur/fixed) ---------- */
body{
  background:
    radial-gradient(720px 520px at 8% -6%, rgba(120,160,255,.28), transparent 60%),
    radial-gradient(680px 540px at 106% 4%, rgba(170,120,255,.24), transparent 56%),
    radial-gradient(700px 560px at 60% 116%, rgba(120,200,255,.20), transparent 60%),
    linear-gradient(160deg,#e9f0fc 0%,#f0eafb 52%,#e8f3ff 100%) !important;
  color:var(--sk-ink) !important;
}
/* แทนภาพพื้นหลังต่อหน้า (--bgwall) + ม่านครีม → พาสเทล aurora สวยเข้าชุด */
body::before{
  background:
    radial-gradient(820px 600px at 6% -8%, rgba(120,160,255,.34), transparent 60%),
    radial-gradient(760px 600px at 108% 2%, rgba(170,120,255,.30), transparent 56%),
    radial-gradient(800px 640px at 60% 118%, rgba(120,200,255,.26), transparent 60%),
    linear-gradient(160deg,#e9f0fc 0%,#f0eafb 52%,#e8f3ff 100%) !important;
}
body::after{ background:rgba(255,255,255,.05) !important; }

/* ---------- แถบนำทาง → กระจกสว่าง ---------- */
nav{ background:rgba(255,255,255,.58) !important; border-bottom:1px solid rgba(255,255,255,.6) !important; box-shadow:0 4px 18px rgba(20,30,55,.06) !important; }
.logo{ font-family:var(--sk-serif) !important; color:var(--sk-ink) !important; font-weight:700 !important; letter-spacing:.02em; font-size:1.14rem !important; }
.lock{ color:var(--sk-sage-d) !important; }

/* ---------- หัวเรื่อง → serif ดราม่า ---------- */
h1, .hero h1, .sech, .sechead, #gate h2,
.qbox .qh, .modelans .mh, .concept .ch, .plan h3, .plangrp h3{
  font-family:var(--sk-serif) !important; color:var(--sk-ink) !important; font-weight:700 !important; letter-spacing:.01em;
}
.hero h1{ font-weight:600 !important; }
.sech, .sechead{ font-size:1.4rem !important; }
.concept .ch, .qbox .qh, .modelans .mh, .plangrp h3{ font-size:1.06rem !important; }

/* ---------- พื้นผิว (การ์ด/กล่อง) → กระจกใสโปร่งแสง มุมโค้ง เงาลอย ไฮไลต์ ---------- */
.card, .cardx, .day, .qbox, .concept, .modelans, .fig, .miniplay,
.box>.card, .lesson, .item, .qcard{
  position:relative;
  background:var(--sk-surface) !important;
  border:1.5px solid var(--sk-line) !important;
  border-radius:var(--sk-radius) !important;
  box-shadow:var(--sk-glass-sh) !important;
  transition:transform .42s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease !important;
}
/* hover เด้ง (overshoot) + เงาลึกขึ้น */
.card:hover, .cardx:hover, .day:hover, .qbox:hover, .concept:hover,
.modelans:hover, .lesson:hover, .item:hover, .qcard:hover{
  transform:translateY(-8px) scale(1.014) !important;
  box-shadow:0 30px 60px rgba(22,30,72,.26),0 12px 22px rgba(22,30,72,.14),inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1.5px rgba(255,255,255,.42) !important;
}
/* ไฮไลต์เนื้อกระจก (วาวมุมบนซ้าย + แถบสะท้อนเฉียง) */
.cardx::before, .card::before, .qbox::before, .concept::before, .modelans::before, .day::before, .lesson::before, .qcard::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(135deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.16) 22%,rgba(255,255,255,0) 44%),
    linear-gradient(112deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.22) 40%,rgba(255,255,255,0) 48%);
}
.cardx>*, .card>*, .qbox>*, .concept>*, .modelans>*, .day>*, .lesson>*, .qcard>*{ position:relative; z-index:1; }
.concept{ background:rgba(245,238,255,.5) !important; }
.qbox{ background:rgba(255,255,255,.58) !important; border-color:rgba(255,255,255,.7) !important; }
.rule{ background:rgba(255,255,255,.5) !important; border-left:3px solid var(--sk-sage) !important; border-radius:10px; }
.dtable th{ background:rgba(120,150,220,.14) !important; color:var(--sk-ink) !important; font-family:'Kanit',sans-serif !important; }
.dtable th, .dtable td{ border-color:rgba(120,140,190,.22) !important; }
.dtable td.lab{ background:rgba(255,255,255,.5) !important; color:var(--sk-ink) !important; }

/* ---------- ปุ่ม/เน้น → ทอง (ตกแต่ง) · คงสีความหมาย ---------- */
.listen{ background:var(--sk-sage) !important; color:#fff !important; }
.listen:hover, .listen.playing{ background:var(--sk-sage-d) !important; }
.tag{ background:var(--sk-charcoal) !important; color:#F0EBE0 !important; }
.concept .cn{ background:linear-gradient(135deg,var(--sk-sage),var(--sk-sage-d)) !important; }
.cbar i{ background:linear-gradient(90deg,var(--sk-sage),var(--sk-sage-d)) !important; }
.mpbtn{ background:linear-gradient(135deg,var(--sk-sage),var(--sk-sage-d)) !important; }
.mpseek{ accent-color:var(--sk-sage) !important; }
.sumbar{ background:rgba(184,134,11,.12) !important; border:1px solid rgba(184,134,11,.32) !important; color:var(--sk-sage-d) !important; }

/* ---------- แถบ "กดดูเฉลย" → กระจกมินิมอล ---------- */
.reveal{ background:rgba(255,255,255,.45) !important; border:1.5px dashed rgba(150,160,200,.6) !important; border-radius:12px; }
.reveal>summary{ color:var(--sk-sage-d) !important; }
.reveal[open]>summary{ background:rgba(120,150,220,.1) !important; border-bottom-color:rgba(150,160,200,.4) !important; }

/* ---------- ด่านรหัสผ่าน → กระจกสว่าง ---------- */
#gate{ background:radial-gradient(130% 100% at 50% -10%, #f0eafb, #e8f0fd) !important; color:var(--sk-ink) !important; }
#gate h2{ color:var(--sk-ink) !important; }
#gate .em{ filter:drop-shadow(0 0 20px rgba(120,160,255,.5)) !important; }
#gate input{ border-color:rgba(120,140,190,.5) !important; background:rgba(255,255,255,.6) !important; color:var(--sk-ink) !important; }
#gate input:focus{ border-color:var(--sk-sage) !important; }
#gate button{ background:var(--sk-sage) !important; color:#fff !important; }
#gate button:hover{ background:var(--sk-sage-d) !important; }

/* ---------- ตัวอักษรเนื้อหา ---------- */
.lead, .cb, .meta, .figcap{ color:var(--sk-ink2) !important; }
.cbody .t, .it-title{ color:var(--sk-ink) !important; }
.crumb a, .note a{ color:var(--sk-sage-d) !important; }

@media (prefers-reduced-motion:reduce){ .rv{ opacity:1 !important; transform:none !important; } .mq-t,.mq-t2{ animation:none !important; } }

/* ============================================================
   POLISH + EDITORIAL (เลขนำ · เส้นคั่น · marquee · ป้ายแนวตั้ง)
   ============================================================ */
.cover{ filter:saturate(.6) brightness(1.04) !important; height:96px !important; }
.cover::after{ background:linear-gradient(180deg, rgba(240,245,255,.45), rgba(240,245,255,.66)) !important; }
.cover.hasimg{ filter:saturate(.92) brightness(1.0) !important; height:108px !important; }
.cover.hasimg::after{ background:linear-gradient(180deg, rgba(240,245,255,.05), rgba(240,245,255,.24)) !important; }
.cover.hasimg::before{ color:rgba(34,39,52,.5) !important; text-shadow:0 1px 3px rgba(255,255,255,.7); }
.cardx{ border-radius:var(--sk-radius) !important; overflow:hidden; }
.cbody{ padding:1rem 1.05rem 1.2rem !important; position:relative; z-index:1; }

.grid{ counter-reset:gnum; }
.grid .cardx .cover::before{
  counter-increment:gnum; content:counter(gnum,decimal-leading-zero);
  position:absolute; top:.5rem; left:.8rem; z-index:2;
  font-family:var(--sk-serif); font-weight:700; font-size:1.5rem; line-height:1;
  color:rgba(34,39,52,.24); letter-spacing:.02em;
}
.plan{ counter-reset:pnum; }
.plangrp h3::before{
  counter-increment:pnum; content:counter(pnum,decimal-leading-zero);
  font-family:var(--sk-serif); font-weight:700; color:var(--sk-muted);
  margin-right:.5rem; font-size:1.05rem;
}

.hero h1::after{ content:''; display:block; width:54px; height:1.5px; background:var(--sk-sage); margin:.85rem auto 0; opacity:.8; }
.sech, .sechead{ border-top:1px solid rgba(255,255,255,.6) !important; padding-top:1.4rem !important; }

.meta, .pmeta, .lock{ letter-spacing:.04em; }
.badge{ background:var(--sk-charcoal) !important; letter-spacing:.05em; font-weight:600 !important; }
.tag{ letter-spacing:.05em; }
.day{ border-radius:12px !important; }
.plangrp h3 .gi{ filter:saturate(.6) brightness(1.04) !important; }

/* ---------- แถบวิ่ง marquee (ชาร์โคล + serif italic ครีม) ---------- */
.mq{ overflow:hidden; background:var(--sk-charcoal); border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); padding:.55rem 0; margin:.2rem 0 1.4rem; border-radius:12px; }
.mq-row{ display:flex; width:max-content; animation:mqmove 26s linear infinite; }
.mq-row span{ font-family:var(--sk-serif); font-style:italic; color:#EAE4D8; font-size:.98rem; letter-spacing:.1em; white-space:nowrap; padding-right:.4rem; }
.mq-row .dot{ color:var(--sk-sage); padding:0 .9rem; font-style:normal; }
@keyframes mqmove{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- ป้ายแนวตั้งหมุนข้าง ---------- */
.vlabel{ position:fixed; left:8px; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; text-orientation:mixed; rotate:180deg;
  font-family:'Kanit',sans-serif; font-weight:600; font-size:.64rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--sk-muted); opacity:.8; z-index:5; pointer-events:none; }
@media (max-width:1080px){ .vlabel{ display:none; } }