/* ==========================================================================
   GO-MANGA · THEME LAYER (ปรับปรุงรอบ 3 — มินิมอลเข้ม)
   ชั้นดีไซน์กลาง ใช้ร่วมกันทั้งหน้าบ้าน (reader) และหลังบ้าน (creator CMS)
   ทำงานแบบ "เสริมทับ" ของเดิม ไม่ต้องแก้โครงสร้าง HTML/Bootstrap ที่มีอยู่

   ทิศทางล่าสุด: "มินิมอลเข้มๆ เน้นใช้งานล้วน สีทองเป็นแค่จุดเน้นเล็กๆ"
   จึงเก็บสีทองไว้เฉพาะจุดที่ "จำเป็นต้องดึงความสนใจจริงๆ" เท่านั้น ได้แก่ ปุ่มหลัก/CTA,
   สถานะที่กำลังเลือก/ใช้งานอยู่ (แท็บที่ active, หน้าปัจจุบันของ pagination, checkbox
   ที่ติ๊กแล้ว), และเส้นโฟกัสตอนกดคีย์บอร์ด ส่วนพื้นผิวใหญ่ๆ ที่เคยใช้สีทองแบบตกแต่ง
   (เส้นไฮไลต์บนขอบการ์ดทุกใบ, เงาเรืองแสงบนแบดจ์ทุกอัน, ข้อความหัวข้อไล่สีทอง,
   สกอลบาร์สีทอง) ตัดออกให้เหลือแค่โทนกลาง (เทา/ดำ) เพื่อไม่ให้สีทองท่วมหน้าจอ

   (รอบก่อนหน้านี้ตัดพื้นผิวฟิล์มเกรน/แอนิเมชันแสงกวาด/ฟอนต์เซอริฟในหน้าอ่านออกไปแล้ว
   เพื่อความสบายตา รอบนี้เป็นการลดปริมาณสีทองต่อ ให้เข้ากับธีมมินิมอลที่เลือก)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Noto+Serif+Thai:wght@600;700&display=swap');

:root{
  --pg-gold:        var(--primary-color, #d4af37);
  --pg-gold-bright: #e8c766;
  --pg-gold-deep:   #9c7a1e;
  --pg-ink:         #07060a;
  --pg-ink-2:       #0d0d0f;
  --pg-panel:       #121215;
  --pg-panel-2:     #18171b;
  --pg-border:      #27272a;
  --pg-text:        #f4f4f5;
  --pg-muted:       #a1a1aa;
  /* ฟอนต์หัวข้อแบรนด์ — ใช้เฉพาะโลโก้ ไม่ใช้กับหัวข้อทั่วไปแล้ว (ดูด้านล่าง) */
  --pg-font-display: 'Playfair Display', 'Noto Serif Thai', 'Prompt', serif;
  --pg-shadow-lift:  0 10px 24px -10px rgba(0,0,0,.5);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ── กันข้อความยาว/ลิงก์ยาวดันเลย์เอาต์พัง (ชื่อเรื่อง, คอมเมนต์, การ์ดต่างๆ) ── */
h1, h2, h3, h4, .card-title-custom, .comment-body, .manga-info, .header-box {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── โฟกัสตอนกดคีย์บอร์ด (Tab) ให้เห็นชัดเจน — จุดเน้นสีทองที่ "จำเป็นต่อการใช้งานจริง" ── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .page-link:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--pg-gold);
  outline-offset: 2px;
}

/* ── สโครลบาร์: โทนกลาง ไม่ใช้สีทอง (เป็นแค่กลไก UI ไม่ใช่จุดที่ต้องดึงสายตา) ── */
::-webkit-scrollbar{ width:10px; height:8px; }
::-webkit-scrollbar-track{ background: var(--pg-ink-2); }
::-webkit-scrollbar-thumb{ background: #3f3f46; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: #52525b; }

/* ── โลโก้แบรนด์: จุดเดียวที่ยังใช้ฟอนต์ดิสเพลย์ + สีทอง เพราะเป็นตัวตนของเว็บ ──
   หัวข้อทั่วไป (การ์ด, ฮีโร่, ชื่อเรื่องมังงะ ฯลฯ) ใช้ฟอนต์เนื้อหาปกติ ไม่ไล่สีทองแล้ว
   เพื่อไม่ให้สีทองท่วมหน้าจอ และหน้าอ่านก็อ่านง่ายสม่ำเสมอตลอดทั้งเว็บ */
.navbar-brand {
  font-family: var(--pg-font-display);
  letter-spacing: .2px;
  color: var(--pg-gold) !important;
}

/* หน้าอ่าน: หัวข้อตอน/ชื่อเรื่องให้อ่านง่าย สม่ำเสมอกับเนื้อหา (กันไว้เผื่อกฎอื่นมาแตะ) */
.novel-chapter-header h1,
.novel-chapter-header h2 {
  font-family: 'Sarabun', 'Prompt', sans-serif;
  letter-spacing: normal;
}

/* ── การ์ดทุกชนิด (หน้าบ้าน + หลังบ้าน): แยกจากพื้นหลังด้วยเงา/ขอบโทนกลาง ไม่ใช้เส้นทอง ── */
.manga-card, .horizontal-card, .hero-slide-card, .type-switch-btn,
.premium-card, .header-box, .ranking-sidebar, .section-box, .welcome-banner {
  box-shadow: var(--pg-shadow-lift);
}
.manga-card:hover, .horizontal-card:hover {
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.6);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* ── ป้าย/แบดจ์: ตัดเงาเรืองแสงสีทองออก ให้เป็นป้ายสถานะธรรมดา อ่านง่าย ── */
.badge-manga-type, .badge-new-item, .custom-badge, .badge.bg-primary {
  letter-spacing: .3px;
}

/* ── ฟอร์ม (หลังบ้าน): โฟกัสชัดเจน (จุดเน้นสีทองตอนกำลังพิมพ์ ซึ่งช่วยการใช้งานจริง) ── */
.premium-input, .premium-addon, input[type="text"], input[type="password"],
input[type="email"], input[type="number"], input[type="url"], select, textarea {
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
}
.premium-input:focus, input:focus, select:focus, textarea:focus {
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4), 0 0 0 3px rgba(212,175,55,.22) !important;
}

/* ── ตาราง (หลังบ้าน): เส้นใต้หัวตารางโทนกลาง อ่านหัวคอลัมน์ง่ายขึ้นโดยไม่ต้องใช้สีทอง ── */
.premium-table thead th, table.table thead th {
  border-bottom: 1px solid var(--pg-border) !important;
}

/* ── ปกจิ๋วในตาราง / cover-preview: กรอบโทนกลางบางๆ แยกภาพจากพื้นหลังมืด ── */
.table-cover-img, .cover-preview {
  box-shadow: 0 0 0 1px var(--pg-border), var(--pg-shadow-lift);
}

/* ── หมวดหมู่ที่ถูกเลือก (category-pill): คงจุดเน้นทองเล็กๆ ไว้ เพราะเป็นสถานะ "เลือกแล้ว" จริงๆ ── */
.category-pill input[type="checkbox"]:checked + label {
  box-shadow: 0 0 0 1px rgba(212,175,55,.35) inset;
}

/* ── Footer: เส้นคั่นโทนกลาง ── */
footer{ border-top: 1px solid var(--pg-border); }
footer a{ transition: color .2s; }
footer a:hover{ color: var(--pg-gold-bright) !important; }

/* ── ระบบแบ่งหน้า (Pagination) — หน้าปัจจุบันใช้สีทองเป็นจุดเน้น หน้าอื่นเป็นโทนกลาง ── */
.site-pagination .page-link {
  background-color: var(--pg-panel);
  border-color: var(--pg-border);
  color: var(--pg-text);
  margin: 0 3px;
  border-radius: 8px !important;
}
.site-pagination .page-link:hover {
  background-color: var(--pg-panel-2);
  border-color: #3f3f46;
  color: var(--pg-gold-bright);
}
.site-pagination .page-item.active .page-link {
  background: var(--pg-gold);
  border-color: var(--pg-gold);
  color: #1a1305;
  font-weight: 700;
}
.site-pagination .page-item.disabled .page-link {
  background-color: var(--pg-panel);
  border-color: var(--pg-border);
  color: var(--pg-muted);
  opacity: .5;
}

/* ── แถบสถานะ/ตำแหน่งหลังบ้าน (เจ้าของ/ทีมงาน) — ใช้ในหน้า Creator CMS ── */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .3px;
  border: 1px solid var(--pg-border);
  background-color: var(--pg-panel);
  color: var(--pg-muted);
}
.role-badge.role-owner {
  border-color: rgba(212,175,55,.4);
  color: var(--pg-gold-bright);
}