/* ============================================================
   showcase.css — สีและสไตล์ทั้งเว็บอยู่ไฟล์นี้ไฟล์เดียว
   (บทเรียนจาก private ที่สีฝังใน <style> ของ 9 เทมเพลต
    พอเปลี่ยนธีมทีต้องไล่แก้ 190 จุด)

   ธีมขาว — อิงแบรนด์เดียวกับ private gallery
     แดง #dc1515   พื้น #ffffff   ตัวอักษร #000000
   ============================================================ */
:root{
  --bg:#ffffff;         /* พื้นหลังทั้งเว็บ ขาวล้วน */
  --panel:#ffffff;
  --panel-2:#f6f6f8;    /* ช่องกรอก / พื้นรองบาง ๆ */
  --line:#e4e4e8;       /* เส้นขอบ */
  --txt:#000000;
  --mut:#6a6a74;        /* ตัวอักษรรอง */
  --dim:#a8a8b2;        /* จาง ๆ / ปิดใช้งาน */
  --red:#dc1515;
  --red-d:#a51010;
  --red-soft:#fceaea;
  --radius:12px;
  --ratio:4/5;          /* อัตราส่วนภาพทั้งเว็บ */
  --maxw:1792px;        /* 1760 + ขอบข้าง 16px สองฝั่ง (พอดี 6 ช่อง ช่องละ ~290px) */
  --gap:4px;            /* ระยะห่างระหว่างช่องภาพ แบบ IG */
  --cols:3;             /* จำนวนช่องต่อแถว — เปลี่ยนตามความกว้างจอท้ายไฟล์ */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai",sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{display:block}
button{font-family:inherit}

/* คอลัมน์เนื้อหาทั้งหมดกว้างเท่ากันและอยู่กลาง — หัวใจของหน้าตาแบบ IG */
.inner,.sec,.abar,.adesc,.feed,.page,.pad{
  max-width:var(--maxw);margin-left:auto;margin-right:auto;
  padding-left:16px;padding-right:16px;
}

/* ---------------- หัวเว็บ ---------------- */
.top{padding:34px 0 22px;text-align:center}
.sitename{margin:0;font-size:30px;font-weight:800;letter-spacing:.3px;line-height:0}
.sitename img{height:132px;width:auto;margin:0 auto}
.tag{margin:14px 0 0;color:var(--mut);font-size:14.5px;line-height:1.6}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:18px}
.lbtn{
  border:1px solid var(--line);border-radius:999px;padding:8px 18px;
  font-size:13.5px;font-weight:600;background:var(--panel);
  transition:background .14s,border-color .14s;
}
.lbtn:hover{background:var(--panel-2);border-color:#d0d0d8}
.lbtn.hi{background:var(--red);border-color:var(--red);color:#fff}
.lbtn.hi:hover{background:var(--red-d);border-color:var(--red-d)}
.lbtn.off{color:var(--dim);cursor:default;border-style:dashed}
.lbtn.off:hover{background:var(--panel)}

/* ---------------- แถบแท็บแบบ IG ---------------- */
.tabs{border-top:1px solid var(--line);margin-top:26px}
.tabs .inner{display:flex;justify-content:center;gap:64px}
.tab{
  display:flex;align-items:center;justify-content:center;
  padding:15px 4px;margin-top:-1px;border-top:1px solid transparent;color:var(--dim);
}
.tab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;
         stroke-linejoin:round;stroke-linecap:round}
/* ไอคอนกริดกับสามเหลี่ยมเล่นเป็นทึบ ดูใกล้ IG กว่าแบบเส้น */
.tab .ic-grid rect,.tab svg .solid{fill:currentColor;stroke:none}
.tab:hover{color:var(--mut)}
.tab.on{color:var(--txt);border-top-color:var(--txt)}

/* ---------------- เนื้อหา ---------------- */
.wrap{flex:1}
.sec{padding-top:24px;padding-bottom:8px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec h2{margin:0;font-size:16px;letter-spacing:.4px}
.sec span{color:var(--mut);font-size:12.5px}

/* ---------------- กริดภาพ ----------------
   border-radius + overflow:hidden ที่ "ตัวกริด" ทำให้ภาพที่อยู่มุมโค้งเฉพาะมุมนอก
   เหมือน IG — ไม่ต้องไล่ใส่ radius ทีละใบ (และไม่ต้องรู้ว่าใบไหนอยู่มุม)   */
.feed{padding-top:22px;padding-bottom:44px}
.grid,.shots{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gap);
             border-radius:14px;overflow:hidden}
.tile{position:relative;aspect-ratio:var(--ratio);overflow:hidden;background:var(--panel-2);
      display:block}
.tile img{width:100%;height:100%;object-fit:cover;transition:filter .25s}
.tile:hover img{filter:brightness(.62)}
.tmeta{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:3px;padding:16px;opacity:0;transition:opacity .2s;color:#fff;
  background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.80));
}
.tile:hover .tmeta{opacity:1}
/* มือถือไม่มี hover ถ้าไม่โชว์ตลอด คนจะไม่เห็นชื่ออัลบั้มเลย */
@media (hover:none){ .tmeta{opacity:1} }
.tmeta b{font-size:15px}
.tmeta span{font-size:12px;color:#e6e6ea}
.tile .play{position:absolute;top:10px;right:11px;color:#fff;
            filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.tile .play svg{width:19px;height:19px;fill:currentColor}
.empty{color:var(--mut);text-align:center;padding:70px 20px;font-size:14px;line-height:1.8}

/* ---------------- หน้าในอัลบั้ม ---------------- */
.abar{display:flex;align-items:center;gap:14px;padding-top:24px;padding-bottom:10px;
      flex-wrap:wrap}
.back{color:var(--red);font-weight:700;font-size:14px}
.abar h1{margin:0;font-size:21px}
.abar .n{color:var(--mut);font-size:13px}
.adesc{color:var(--mut);font-size:14px;line-height:1.7;padding-bottom:12px}
.shots img{width:100%;aspect-ratio:var(--ratio);object-fit:cover;background:var(--panel-2);
           cursor:zoom-in;transition:filter .2s}
.shots img:hover{filter:brightness(.82)}

/* ---------------- หน้าข้อความ (เกี่ยวกับ) ---------------- */
.page{max-width:760px;padding-top:26px;padding-bottom:50px}
.page h2{margin:0 0 14px;font-size:20px}
.page p{color:#26262c;font-size:15px;line-height:1.85;margin:0 0 14px}
.dimtext{color:var(--mut)}

/* ---------------- ดูภาพ/คลิปเต็มจอ ---------------- */
.viewer{position:fixed;inset:0;background:rgba(255,255,255,.97);z-index:60;
        display:none;align-items:center;justify-content:center;padding:24px}
.viewer.on{display:flex}
.viewer img,.viewer video{max-width:96vw;max-height:92vh;object-fit:contain;border-radius:10px;
            box-shadow:0 10px 44px rgba(0,0,0,.20)}
.viewer video{background:#000;height:92vh}
.viewer .x{position:absolute;top:14px;right:20px;font-size:32px;color:var(--txt);
           cursor:pointer;line-height:1}
.viewer .arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:34px;
               color:var(--txt);cursor:pointer;padding:20px;user-select:none;opacity:.45}
.viewer .arrow:hover{opacity:1}
.viewer .prev{left:6px}.viewer .next{right:6px}

/* ---------------- ท้ายเว็บ ---------------- */
.foot{border-top:1px solid var(--line);text-align:center;padding:26px 16px 34px;
      font-size:13px;color:var(--mut);letter-spacing:.2px}
.foot .fine{margin-top:6px;font-size:11.5px;color:var(--dim)}

/* ---------------- แผ่น 18+ ----------------
   สำคัญ: เนื้อหาถูกเรนเดอร์ลง HTML ตามปกติ แผ่นนี้แค่ซ้อนทับ
   Googlebot จึงอ่านเนื้อหาได้ ไม่ใช่เห็นแต่หน้าประตู                      */
.gate{position:fixed;inset:0;background:rgba(255,255,255,.98);z-index:80;
      display:flex;align-items:center;justify-content:center;padding:24px}
/* ต้องมีบรรทัดนี้ ไม่งั้น display:flex ข้างบนจะชนะ [hidden]
   แล้วแผ่นทึบจะค้างทับทั้งเว็บ กดอะไรไม่ได้เลย */
.gate[hidden]{display:none}
.gate .box{max-width:440px;text-align:center;background:var(--panel);
           border:1px solid var(--line);border-radius:18px;padding:34px 30px;
           box-shadow:0 8px 34px rgba(0,0,0,.10)}
.gate h2{margin:0 0 10px;font-size:20px}
.gate p{color:var(--mut);font-size:14px;line-height:1.75;margin:0 0 22px}
.gate .btn{display:block;background:var(--red);color:#fff;font-weight:700;padding:14px;
           border-radius:var(--radius);border:0;width:100%;font-size:15px;cursor:pointer}
.gate .btn:hover{background:var(--red-d)}
.gate .leave{display:block;margin-top:14px;color:var(--mut);font-size:13px}

/* ---------------- ฟอร์ม / admin ---------------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;
      margin-bottom:16px}
.card h3{margin:0 0 14px;font-size:15px}
label.f{display:block;font-size:13px;font-weight:600;color:var(--mut);margin:12px 0 5px}
input[type=text],input[type=password],input[type=file],textarea,select{
  width:100%;box-sizing:border-box;padding:11px 12px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:10px;color:var(--txt);font-size:14px;
  font-family:inherit;
}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--red);background:#fff}
textarea{min-height:76px;resize:vertical}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>div{flex:1;min-width:180px}
.btn{background:var(--red);color:#fff;border:0;border-radius:10px;padding:12px 20px;
     font-weight:700;font-size:14px;cursor:pointer}
.btn:hover{background:var(--red-d)}
.btn.ghost{background:var(--panel);border:1px solid var(--line);color:var(--txt)}
.btn.ghost:hover{background:var(--panel-2)}
.btn.del{background:var(--red-soft);color:var(--red-d);border:1px solid #f0b4b4}
.btn.del:hover{background:#f8d7d7}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--mut);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
tbody tr:hover{background:var(--panel-2)}
.msg{padding:12px 14px;border-radius:10px;margin-bottom:14px;font-size:13.5px}
.msg.ok{background:#e6f6ec;color:#1c6b3e;border:1px solid #b3e0c4}
.msg.err{background:var(--red-soft);color:var(--red-d);border:1px solid #f0b4b4}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.mini figure{margin:0;position:relative}
.mini img{width:100%;aspect-ratio:var(--ratio);object-fit:cover;border-radius:8px;
          background:var(--panel-2)}
.mini .rm{position:absolute;top:5px;right:5px;background:rgba(0,0,0,.62);color:#ffb3b3;
          border:0;border-radius:6px;font-size:11px;padding:3px 7px;cursor:pointer}
.mini .cov{position:absolute;bottom:5px;left:5px;background:rgba(0,0,0,.62);color:#fff;
           border:0;border-radius:6px;font-size:10.5px;padding:3px 7px;cursor:pointer}
.mini .is-cov{outline:2px solid var(--red);border-radius:8px}
.hint{color:var(--mut);font-size:12.5px;line-height:1.7;margin:8px 0 0}

/* ---- ตารางอัลบั้ม: โชว์ 20 แถว ที่เหลือเลื่อนเอา + ลากจัดลำดับได้ ----
   แถวถูกบีบให้เตี้ยลงเหลือ ~40px 20 แถวจะได้ไม่สูงจนล้นจอโน้ตบุ๊ก      */
.tbl-scroll{max-height:calc(20 * 46px + 40px);overflow-y:auto;
            border:1px solid var(--line);border-radius:12px}
.tbl-scroll table{margin:0}
.tbl-scroll thead th{position:sticky;top:0;background:var(--panel);z-index:2;
                     box-shadow:inset 0 -1px 0 var(--line)}
.draglist td{padding:6px 10px}
.draglist td .btn.del{padding:3px 10px;font-size:12px}
.draglist .grip{cursor:grab;color:var(--dim);font-size:15px;user-select:none;
                text-align:center;letter-spacing:-2px;touch-action:none}
.draglist .grip:active{cursor:grabbing}
.draglist tr.dragging{background:var(--red-soft);box-shadow:0 2px 10px rgba(0,0,0,.12)}
.draglist tr.dragging td{border-bottom-color:transparent}
body.dragging-now{user-select:none;cursor:grabbing}
.draglist .stamp{color:var(--mut);font-size:12px;white-space:nowrap}
.ordmsg{font-size:12px;font-weight:400;margin-left:10px;color:var(--mut)}
.ordmsg.ok{color:#1c6b3e}
.ordmsg.err{color:var(--red-d)}

/* ---------------- ล็อกอิน ---------------- */
.loginwrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.loginbox{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);
          border-radius:18px;padding:34px 30px;box-shadow:0 6px 26px rgba(0,0,0,.08)}
.loginbox h1{margin:0 0 6px;font-size:20px}
.loginbox p{color:var(--mut);font-size:13px;margin:0 0 20px}

/* ---------------- มือถือ ---------------- */
@media(max-width:860px){
  .top{padding:22px 0 16px}
  .sitename img{height:98px}
  .tag{font-size:13.5px;margin-top:11px}
  .tabs{margin-top:20px}
  .tabs .inner{gap:0;justify-content:space-around}
  .tab{flex:1;padding:13px 0}
  /* กริดชิดขอบจอแบบ IG */
  .feed{padding-left:0;padding-right:0;padding-top:14px;padding-bottom:30px}
  .grid,.shots{gap:2px;border-radius:0}
  .sec,.abar,.adesc,.page,.pad{padding-left:14px;padding-right:14px}
  /* ช่องมือถือแคบ ชื่อยาว ๆ จะล้น — เหลือแค่ชื่ออัลบั้ม ตัดวันที่/จำนวนออก */
  .tmeta{padding:8px}
  .tmeta b{font-size:11.5px;line-height:1.3}
  .tmeta span{display:none}
}

/* ---------------- จำนวนช่องต่อแถว ----------------
   แบบ IG: จอกว้างเพิ่มช่อง จอแคบลดช่อง
   ต่ำสุด 3 ช่อง (รวมมือถือ) สูงสุด 6 ช่อง
   จุดตัดเลือกให้ช่องกว้างอยู่ราว 280-370px ตลอด
   อยากให้เพิ่มช่องเร็วขึ้น ก็ลดตัวเลข min-width ลง                  */
@media(min-width:1160px){ :root{--cols:4} }
@media(min-width:1420px){ :root{--cols:5} }
@media(min-width:1740px){ :root{--cols:6} }