/* ════════════════════════════════════════════════════════════════════
   components.css — คอมโพเนนต์กลาง SKILL ไร้เทียมทาน (งาน 4 · 26 ก.ย. 2569)
   ต้องโหลดหลัง design-tokens.css · ทุก class ขึ้นต้นด้วย .s9- (ไม่ชนของเดิม)
   รองรับโทนสว่าง (ค่าเริ่มต้น) และโทนมืด (ใส่ .s9-dark ที่ body หรือกล่องแม่)
   ดูตัวอย่างทุกชิ้นที่ /style-guide.html
   ────────────────────────────────────────────────────────────────────
   ปุ่ม        .s9-btn  + --primary | --outline | --ghost | --sky  (+ --sm | --lg | --block)
   การ์ด       .s9-card (+ --glass | --link)
   การ์ดวิชา   .s9-subject  (สีวิชา: style="--s9-subject:var(--s9-subj-math)")
   ป้าย        .s9-badge + --gold | --free | --new | --lock | --level
   เมนูบน      .s9-topnav  (+ .s9-topnav__logo / __links / __toggle)
   ส่วนท้าย    .s9-footer  (+ .s9-footer__links / __copy)
   ════════════════════════════════════════════════════════════════════ */

/* ───────────── โฟกัสคีย์บอร์ด (ทุกหน้าที่ใช้ไฟล์นี้) ───────────── */
:focus-visible{outline:3px solid var(--s9-c-focus);outline-offset:2px}

/* ───────────── ปุ่ม ───────────── */
.s9-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:.7rem 2rem;border-radius:var(--s9-r-pill);
  font-family:var(--s9-font-head);font-weight:800;font-size:.85rem;line-height:1.2;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;text-align:center;
  border:1.5px solid transparent;cursor:pointer;
  transition:background var(--s9-dur),border-color var(--s9-dur),color var(--s9-dur),transform .15s,box-shadow var(--s9-dur);
}
.s9-btn:hover{transform:translateY(-2px);text-decoration:none}
.s9-btn:active{transform:translateY(0)}
.s9-btn:focus-visible{outline:3px solid var(--s9-c-focus);outline-offset:3px}
.s9-btn[disabled],.s9-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.s9-btn--primary{background:var(--s9-c-primary);color:var(--s9-c-on-primary)}
.s9-btn--primary:hover{background:var(--s9-c-primary-hover);color:var(--s9-c-on-primary)}
.s9-btn--outline{background:transparent;color:var(--s9-c-ink);border-color:var(--s9-border-strong);font-weight:700}
.s9-btn--outline:hover{border-color:var(--s9-c-ink);color:var(--s9-c-ink)}
.s9-dark .s9-btn--outline{border-color:rgba(255,255,255,.35)}
.s9-btn--ghost{background:transparent;color:var(--s9-c-primary-text);padding-left:1rem;padding-right:1rem}
.s9-btn--ghost:hover{background:color-mix(in srgb,var(--s9-c-primary) 12%,transparent)}
.s9-btn--sky{background:linear-gradient(135deg,var(--s9-sky),var(--s9-sky-deep));color:#0F172A;box-shadow:var(--s9-sh-glow-sky);border:none}
.s9-btn--sky:hover{color:#0F172A;filter:brightness(1.06)}
.s9-btn--sm{min-height:44px;padding:.45rem 1.1rem;font-size:.8rem}
.s9-btn--lg{min-height:52px;padding:1rem 2.2rem;font-size:1.05rem;border-radius:var(--s9-r-md)}
.s9-btn--block{display:flex;width:100%}

/* ───────────── การ์ด ───────────── */
.s9-card{
  background:var(--s9-c-surface);color:var(--s9-c-ink);
  border:1px solid var(--s9-c-border);border-radius:var(--s9-r-lg);
  box-shadow:var(--s9-sh-sm);padding:var(--s9-sp-5);
}
.s9-card--glass{background:var(--s9-glass-bg-strong);border-color:var(--s9-glass-border);
  -webkit-backdrop-filter:var(--s9-glass-blur);backdrop-filter:var(--s9-glass-blur)}
.s9-card--link{display:block;text-decoration:none;transition:transform var(--s9-dur) var(--s9-ease),box-shadow var(--s9-dur)}
.s9-card--link:hover{transform:translateY(-3px);box-shadow:var(--s9-sh-hover)}
.s9-card--link:focus-visible{outline:3px solid var(--s9-c-focus);outline-offset:3px}

/* ───────────── การ์ดวิชา ───────────── */
.s9-subject{
  --s9-subject:var(--s9-c-primary);
  position:relative;display:flex;flex-direction:column;gap:6px;min-height:44px;
  background:var(--s9-c-surface);color:var(--s9-c-ink);text-decoration:none;
  border:1.5px solid var(--s9-c-border);border-top:4px solid var(--s9-subject);
  border-radius:16px;padding:16px 18px;box-shadow:var(--s9-sh-xs);
  transition:transform .18s var(--s9-ease),box-shadow .18s,border-color .18s;
}
.s9-subject:hover{transform:translateY(-3px);box-shadow:var(--s9-sh-md);border-color:color-mix(in srgb,var(--s9-subject) 45%,transparent);border-top-color:var(--s9-subject)}
.s9-subject:focus-visible{outline:3px solid var(--s9-c-focus);outline-offset:3px}
.s9-subject__icon{font-size:1.8rem;line-height:1}
.s9-subject__name{font-family:var(--s9-font-head);font-weight:800;font-size:1.05rem;line-height:1.35;color:color-mix(in srgb,var(--s9-subject) 78%,#000)}
.s9-subject__desc{font-size:var(--s9-fs-sm);color:var(--s9-c-ink-2);line-height:1.5;flex:1}
.s9-subject__foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.s9-subject__go{margin-left:auto;font-family:var(--s9-font-head);font-weight:800;font-size:var(--s9-fs-sm);color:#fff;
  background:color-mix(in srgb,var(--s9-subject) 62%,#000); /* งาน 7: เข้มขึ้นให้ตัวอักษรขาว ≥4.5:1 ทุกสีวิชา */border-radius:var(--s9-r-pill);padding:.34rem 1rem}
.s9-subject > .s9-badge{position:absolute;top:-10px;right:12px}
.s9-dark .s9-subject__name{color:color-mix(in srgb,var(--s9-subject) 70%,#fff)}

/* ───────────── ป้าย ───────────── */
.s9-badge{
  display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;
  font-family:var(--s9-font-head);font-weight:700;font-size:var(--s9-fs-xs);line-height:1.2;
  padding:.2rem .7rem;border-radius:var(--s9-r-pill);
  background:var(--s9-gold-soft);color:#5C3A00;
}
.s9-badge--gold{background:linear-gradient(180deg,#FFE9AE,#F5CE6B);color:#5C3A00;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.s9-badge--free{background:var(--s9-success-soft);color:var(--s9-success-ink)}
.s9-badge--new{background:var(--s9-danger-soft);color:var(--s9-danger-ink)}
.s9-badge--lock{background:rgba(107,114,128,.14);color:var(--s9-c-ink-2)}
.s9-badge--level{background:color-mix(in srgb,var(--s9-c-primary) 14%,transparent);color:var(--s9-c-ink)}
.s9-dark .s9-badge--free{background:rgba(16,185,129,.18);color:#6EE7B7}
.s9-dark .s9-badge--lock{background:rgba(255,255,255,.12);color:var(--s9-c-ink-2)}

/* ───────────── เมนูบน ───────────── */
.s9-topnav{
  position:sticky;top:0;z-index:300;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s9-sp-4);
  height:58px;padding:0 var(--s9-gutter);
  background:var(--s9-c-nav-bg);color:var(--s9-c-ink);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 4px 18px rgba(20,30,55,.06);
}
.s9-dark .s9-topnav,.s9-topnav.s9-dark{border-bottom-color:var(--s9-c-border);box-shadow:none}
.s9-topnav__logo{display:inline-flex;align-items:center;min-height:44px;font-family:var(--s9-font-head);font-weight:900;font-size:1rem;letter-spacing:.05em;color:var(--s9-c-ink);text-decoration:none}
.s9-topnav__logo em{color:var(--s9-c-primary-text);font-style:normal}
.s9-topnav__links{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.s9-topnav__links a{
  display:flex;align-items:center;height:58px;padding:0 .9rem;
  font-family:var(--s9-font-head);font-size:.78rem;font-weight:600;letter-spacing:.06em;
  color:var(--s9-c-ink-2);text-decoration:none;border-bottom:2px solid transparent;
  transition:color var(--s9-dur),border-color var(--s9-dur);
}
.s9-topnav__links a:hover,.s9-topnav__links a[aria-current="page"]{color:var(--s9-c-ink);border-bottom-color:var(--s9-c-primary)}
.s9-topnav__toggle{display:none;min-width:44px;min-height:44px;background:none;border:0;cursor:pointer;font-size:1.4rem;color:var(--s9-c-ink);border-radius:var(--s9-r-xs)}
.s9-topnav__toggle:focus-visible,.s9-topnav__links a:focus-visible{outline:3px solid var(--s9-c-focus);outline-offset:-3px}
@media(max-width:860px){
  .s9-topnav__toggle{display:inline-flex;align-items:center;justify-content:center}
  .s9-topnav__links{display:none;position:fixed;top:58px;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--s9-c-surface);box-shadow:var(--s9-sh-md);padding:.5rem 0;border-bottom:1px solid var(--s9-c-border)}
  .s9-dark .s9-topnav__links{background:var(--s9-dark-bg-2)}
  .s9-topnav__links.open,.s9-topnav[data-open] .s9-topnav__links{display:flex}
  .s9-topnav__links a{height:48px;padding:0 1.4rem;font-size:.95rem;border-bottom:1px solid var(--s9-c-border)}
}

/* ───────────── ส่วนท้าย ───────────── */
.s9-footer{
  margin-top:var(--s9-sp-6);padding:2rem var(--s9-gutter) 1.5rem;text-align:center;
  background:rgba(255,255,255,.3);border-top:1px solid var(--s9-c-border);
  font-family:var(--s9-font-head);font-size:var(--s9-fs-sm);color:var(--s9-c-ink-3);line-height:1.6;
}
.s9-dark .s9-footer,.s9-footer.s9-dark{background:rgba(0,0,0,.25)}
.s9-footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .2rem;margin-bottom:.5rem}
.s9-footer__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 .6rem;color:var(--s9-c-ink-3);text-decoration:none}
.s9-footer__links a:hover{color:var(--s9-c-ink);text-decoration:underline}
.s9-footer__links a:focus-visible{outline:3px solid var(--s9-c-focus);outline-offset:-3px;border-radius:var(--s9-r-xs)}
.s9-footer__copy{margin:0}

/* ───────────── ปุ่มนำทางลอย (_nav.js) ─────────────
   ให้ทุกหน้าที่ใช้ components.css ได้ปุ่มขนาดเดียวกัน: จอสัมผัสกดง่าย ≥44px */
@media (pointer:coarse){html #s9nav button{min-width:44px;min-height:44px;justify-content:center}}

@media (prefers-reduced-motion:reduce){
  .s9-btn,.s9-card--link,.s9-subject{transition:none}
  .s9-btn:hover,.s9-card--link:hover,.s9-subject:hover{transform:none}
}

/* ───────────── งาน 8: เข้าหน้า / สถานะโหลด-ว่าง-ผิดพลาด ─────────────
   • ความเคลื่อนไหวทุกตัว ≤200ms และปิดเองเมื่อเครื่องตั้ง "ลดการเคลื่อนไหว"
   • .s9-enter  = ค่อย ๆ ปรากฏตอนเปิดหน้า (ใส่ที่กล่องเนื้อหาหลัก ไม่ใส่ที่ body เพราะ transform ทำให้ปุ่มลอยเพี้ยน)
   • .s9-state  = กล่องข้อความสถานะ (--loading / --empty / --error) ใช้ role="status" หรือ role="alert"
   • .s9-skel   = แถบโครงร่างระหว่างรอข้อมูล */
@keyframes s9-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes s9-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@keyframes s9-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:no-preference){
  .s9-enter{animation:s9-rise var(--s9-dur) var(--s9-ease) both}
}
/* ปุ่มลอย ‹ › 🏠 (_nav.js) มุมซ้ายบน ไม่ให้ทับโลโก้ของแถบเมนูหน้าเดิม
   • จอกว้าง: .s9-navpad ที่แถบเมนู = เว้นที่ด้านซ้ายให้ปุ่มลอย
   • จอแคบ (แถบเมนูไม่มีที่พอ): <html class="s9-navbelow"> = ย้ายปุ่มลอยลงไปใต้แถบเมนู
     (ความสูงแถบเมนูจริงอยู่ใน --s9-navh) และกล่องแรกที่มี .s9-navbelow-space เว้นที่ด้านบนให้ */
@media (min-width:769px){.s9-navpad{padding-left:max(var(--s9-gutter),156px) !important}}
@media (max-width:768px){
  html.s9-navbelow #s9nav{top:calc(var(--s9-navh,64px) + 8px)}
  .s9-navbelow-space{padding-top:64px !important}
}

.s9-state{
  display:flex;align-items:center;justify-content:center;gap:var(--s9-sp-3);flex-wrap:wrap;text-align:center;
  padding:var(--s9-sp-5) var(--s9-sp-4);border-radius:var(--s9-r-lg);
  border:1.5px dashed var(--s9-c-border);background:var(--s9-c-surface);
  font-family:var(--s9-font-head);font-size:var(--s9-fs-md);line-height:var(--s9-lh);color:var(--s9-c-ink-2);
}
.s9-state[hidden]{display:none}
.s9-state--error{border-style:solid;border-color:var(--s9-danger);background:var(--s9-danger-soft);color:var(--s9-danger-ink)}
.s9-dark .s9-state--error{background:rgba(220,38,38,.16);border-color:rgba(248,113,113,.7);color:#FECACA}
.s9-state .s9-btn{min-height:44px}
.s9-spinner{
  width:22px;height:22px;flex:none;border-radius:50%;
  border:3px solid var(--s9-c-border);border-top-color:var(--s9-c-primary);
}
.s9-skel{
  display:block;border-radius:var(--s9-r-lg);min-height:120px;
  background:linear-gradient(90deg,rgba(148,163,184,.14) 30%,rgba(148,163,184,.30) 50%,rgba(148,163,184,.14) 70%) 0 0/200% 100%;
}
@media (prefers-reduced-motion:no-preference){
  .s9-spinner{animation:s9-spin .8s linear infinite}
  .s9-skel{animation:s9-shimmer 1.4s linear infinite}
}