/* =====================================================================
   หน้าเว็บสาธารณะ — ใช้ชุดสีเดียวกับระบบหลัง แต่วางเป็นเว็บแนวนอน
   ==================================================================== */
body.pub{background:var(--white)}

.pub-wrap{max-width:1180px;margin:0 auto;padding:0 1.4rem}

/* ---- แถบนำทางด้านบน ---- */
.pub-bar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.pub-bar-in{display:flex;align-items:center;gap:1.2rem;height:64px}
.pub-brand{display:flex;align-items:center;gap:.65rem;color:var(--ink);text-decoration:none}
.pub-brand:hover{text-decoration:none}
.pub-brand .brand-mark{width:36px;height:36px;font-size:.65rem;line-height:1.05}
.pub-brand-name{display:block;font-family:'Anuphan',sans-serif;font-weight:600;font-size:1rem;line-height:1.2}
.pub-brand-sub{display:block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.pub-nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.pub-nav a{padding:.45rem .8rem;border-radius:var(--r-sm);font-size:.92rem;color:var(--text-2)}
.pub-nav a:hover{background:var(--paper);color:var(--primary);text-decoration:none}
.pub-nav a.active{color:var(--primary);font-weight:500;background:var(--primary-50)}
.pub-nav a.pub-login{margin-left:.5rem;background:var(--ink);color:#fff}
.pub-nav a.pub-login:hover{background:var(--ink-2);color:#fff}
.pub-bar .burger{margin-left:auto}

/* ---- ส่วนหัวหน้าแรก ---- */
.hero{
  background:
    linear-gradient(150deg,rgba(30,95,140,.30),rgba(16,28,46,0) 55%),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/100% 30px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/30px 100%,
    var(--ink);
  color:#fff;padding:3.6rem 0 3.2rem
}
.hero .kicker{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
.hero h1{font-size:2.6rem;color:#fff;line-height:1.2;max-width:19ch;margin-bottom:.7rem}
.hero p{color:#A7B9D0;max-width:56ch;margin:0 0 1.7rem}
.hero-search{display:flex;gap:.5rem;max-width:620px;background:#fff;padding:.4rem;border-radius:12px}
.hero-search input{flex:1;border:none;outline:none;padding:.6rem .8rem;font-family:inherit;font-size:.98rem;background:transparent;color:var(--text)}
.hero-tags{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.hero-tags span{font-size:.8rem;color:#7E93AF;margin-right:.2rem}
.hero-tags a{padding:.12rem .6rem;border:1px solid rgba(255,255,255,.22);border-radius:20px;
  font-size:.8rem;color:#C9D6E8}
.hero-tags a:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}

/* ---- ตัวเลขสรุปคาบบนขอบ hero ---- */
.pub-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:-2.6rem 0 2.4rem}
.pub-stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem 1.2rem;box-shadow:var(--shadow);position:relative;overflow:hidden}
.pub-stat::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--primary)}
.pub-stat:nth-child(2)::after{background:var(--accent)}
.pub-stat:nth-child(3)::after{background:var(--mint)}
.pub-stat:nth-child(4)::after{background:var(--violet)}
.pub-stat .v{font-family:'IBM Plex Mono',monospace;font-size:2.1rem;font-weight:600;color:var(--ink);line-height:1.1}
.pub-stat .l{font-size:.82rem;color:var(--text-2);margin-top:.2rem}

.pub-section{padding:0 0 2.6rem}
.pub-section > h2{font-size:1.45rem;margin-bottom:.2rem}
.pub-section > .lead{color:var(--text-2);font-size:.92rem;margin:0 0 1.2rem}

/* ---- กลุ่มคำสำคัญ ---- */
.kw-cloud{display:flex;flex-wrap:wrap;gap:.45rem;align-items:baseline}
.kw-cloud a{border:1px solid var(--line-2);border-radius:22px;padding:.2rem .8rem;color:var(--text-2);background:#fff}
.kw-cloud a:hover{border-color:var(--primary);background:var(--primary-50);color:var(--primary-700);text-decoration:none}
.kw-cloud a .n{font-family:'IBM Plex Mono',monospace;color:var(--text-3);font-size:.78em;margin-left:.3rem}
.kw-1{font-size:.84rem} .kw-2{font-size:.95rem} .kw-3{font-size:1.1rem;font-weight:500}
.kw-4{font-size:1.28rem;font-weight:500;border-color:var(--primary)!important;color:var(--primary-700)!important}

/* ---- การ์ดรายการ ---- */
.pub-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem}
.pub-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.15rem;
  box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.16s}
.pub-card:hover{border-color:var(--line-2);box-shadow:0 12px 30px -18px rgba(16,28,46,.4);transform:translateY(-2px)}
.pub-card h3{font-size:1rem;margin:0 0 .35rem;line-height:1.4}
.pub-card h3 a{color:var(--ink)}
.pub-card .meta{font-size:.82rem;color:var(--text-3);margin-bottom:.6rem}
.pub-card .foot{margin-top:auto;padding-top:.7rem;border-top:1px dashed #E8EDF5;
  font-size:.8rem;color:var(--text-2);display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

/* ---- แถบค้นหาหน้ารายการ ---- */
.pub-filters{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem;margin-bottom:1.4rem;display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end}
.pub-filters .field{margin:0;min-width:160px;flex:1 1 160px}
.pub-filters .field.wide{flex:2 1 260px}

.pub-head{padding:2.4rem 0 1.4rem;border-bottom:1px solid var(--line);margin-bottom:1.8rem}
.pub-head .kicker{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.pub-head h1{font-size:2rem;margin-bottom:.3rem}
.pub-head p{color:var(--text-2);max-width:62ch;margin:0}

.result-bar{display:flex;align-items:baseline;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap}
.result-bar strong{font-family:'IBM Plex Mono',monospace;font-size:1.1rem}

/* ---- ท้ายเว็บ ---- */
.pub-foot{background:var(--ink);color:#93A6C0;margin-top:3rem;padding:2.6rem 0 2rem;font-size:.88rem}
.pub-foot-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.pub-foot-title{font-family:'Anuphan',sans-serif;color:#fff;font-weight:500;margin-bottom:.6rem}
.pub-foot a{display:block;color:#93A6C0;padding:.14rem 0}
.pub-foot a:hover{color:var(--accent)}
.pub-foot p{margin:.3rem 0}

.chart-box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.15rem;box-shadow:var(--shadow)}
.chart-box h3{font-size:1rem;margin-bottom:.9rem}

@media (max-width:900px){
  .pub-nav{position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;padding:.6rem;display:none;box-shadow:var(--shadow)}
  .pub-nav.open{display:flex}
  .pub-bar .burger{display:inline-flex}
  .hero h1{font-size:1.9rem}
  .pub-stats{grid-template-columns:repeat(2,1fr);margin-top:-1.6rem}
  .pub-foot-in{grid-template-columns:1fr}
}

/* ---- กรอบตารางรายการ (ใช้ในคลังโครงงาน) ---- */
.pub-rows{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}
.view-toggle{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.view-toggle a{padding:.34rem .7rem;font-size:.85rem;color:var(--text-2);border-right:1px solid var(--line)}
.view-toggle a:last-child{border-right:none}
.view-toggle a:hover{background:var(--paper);text-decoration:none}
.view-toggle a.active{background:var(--primary);color:#fff}

/* ตารางคลังโครงงานบนจอแคบ — ให้เลื่อนแนวนอนแทนการบีบคอลัมน์ */
@media (max-width:820px){
  .pub-rows .tbl{min-width:640px}
}