/* ============================================================
   theme-skin.css — สกินกลาง "Greige Editorial · หรูแฟชั่นมินิมอล"
   แรงบันดาลใจ Noé Design Studio · ลิงก์ทับทุกหน้า (override ธีมเดิม)
   โทน: เทา-น้ำตาลอุ่น greige/taupe + ชาร์โคล + serif ดราม่า (Playfair/Trirong)
   ⚠️ ไม่แตะสีความหมาย: .o.right(เขียว) .o.wrong(แดง) .ov ✔/✘
   ============================================================ */
@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=Cormorant+Garamond:wght@500;600&family=Trirong:wght@500;600;700&display=swap');

:root{
  --sk-bg:#FAF8F3; --sk-surface:#FFFFFF; --sk-soft:#F3F0E8; --sk-line:#E5DFD2;
  --sk-ink:#2A2722; --sk-ink2:#6E685D; --sk-muted:#9A9384;
  --sk-sage:#8E8576; --sk-sage-d:#675E4F; --sk-charcoal:#2A2722;
  --sk-serif:'Playfair Display','Trirong',serif;
}

/* ---------- พื้นหลังสว่าง greige (gradient ล้วน · ไม่มี blur/รูป fixed) ---------- */
body{
  background:
    radial-gradient(720px 460px at 8% -6%, rgba(142,133,118,.09), transparent 60%),
    radial-gradient(680px 520px at 108% 4%, rgba(142,133,118,.06), transparent 55%),
    linear-gradient(180deg,#FBF9F4,#F2EEE5) !important;
  color:var(--sk-ink) !important;
}

/* ---------- แถบนำทาง ---------- */
nav{ background:rgba(251,249,244,.86) !important; border-bottom:1px solid var(--sk-line) !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{
  background:var(--sk-surface) !important;
  border:1px solid var(--sk-line) !important;
  box-shadow:0 1px 2px rgba(42,39,34,.03), 0 14px 34px rgba(70,62,46,.06) !important;
}
.concept{ background:var(--sk-soft) !important; }
.qbox{ background:#FBF9F3 !important; border-color:#EAE3D4 !important; }
.rule{ background:var(--sk-soft) !important; border-left:3px solid var(--sk-sage) !important; }
.dtable th{ background:#F0EDE3 !important; color:var(--sk-ink) !important; font-family:'Kanit',sans-serif !important; }
.dtable th, .dtable td{ border-color:var(--sk-line) !important; }
.dtable td.lab{ background:#F8F5EE !important; color:var(--sk-ink) !important; }

/* ---------- ปุ่ม/เน้น → taupe (ของตกแต่ง) · คงสีความหมายไว้ ---------- */
.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(142,133,118,.13) !important; border:1px solid rgba(142,133,118,.34) !important; color:var(--sk-sage-d) !important; }

/* ---------- แถบ "กดดูเฉลย" → taupe มินิมอล ---------- */
.reveal{ background:var(--sk-soft) !important; border:1.5px dashed #CFC7B6 !important; }
.reveal>summary{ color:var(--sk-sage-d) !important; }
.reveal[open]>summary{ background:#EFEBE0 !important; border-bottom-color:#DDD6C6 !important; }

/* ---------- ด่านรหัสผ่าน → ชาร์โคลหรู ---------- */
#gate{ background:radial-gradient(130% 100% at 50% -10%, #38342D, #1D1A15) !important; color:#EFEAE0 !important; }
#gate h2{ color:#F4EFE4 !important; }
#gate .em{ filter:drop-shadow(0 0 20px rgba(142,133,118,.5)) !important; }
#gate input{ border-color:rgba(142,133,118,.5) !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 · ป้ายแนวตั้ง)
   ============================================================ */
/* ปกการ์ดวิชา: เคลือบจน greige พาสเทลนุ่ม */
.cover{ filter:saturate(.42) brightness(1.04) !important; height:96px !important; }
.cover::after{ background:linear-gradient(180deg, rgba(250,248,243,.55), rgba(250,248,243,.72)) !important; }
/* ปกที่เป็นภาพจริง (วิชา): โชว์ภาพชัด เคลือบบาง ๆ พอกลืนขอบ */
.cover.hasimg{ filter:saturate(.82) brightness(1.0) !important; height:108px !important; }
.cover.hasimg::after{ background:linear-gradient(180deg, rgba(250,248,243,.06), rgba(250,248,243,.26)) !important; }
.cover.hasimg::before{ color:rgba(42,39,34,.5) !important; text-shadow:0 1px 3px rgba(255,255,255,.7); }
.cardx{ border-radius:14px !important; }
.cbody{ padding:1rem 1.05rem 1.2rem !important; position:relative; }

/* เลขนำสไตล์นิตยสาร (CSS counter) — การ์ดวิชาในกริด */
.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(42,39,34,.22); 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;
}

/* เส้นคั่นสั้นใต้หัวเรื่อง (magazine rule) */
.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 var(--sk-line) !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(.4) brightness(1.04) !important; }

/* ---------- แถบวิ่ง marquee (ชาร์โคล + serif italic ครีม) ---------- */
.mq{ overflow:hidden; background:var(--sk-charcoal); border-top:1px solid #423C32; border-bottom:1px solid #423C32; padding:.55rem 0; margin:.2rem 0 1.4rem; }
.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; } }