/* ============================================================
   FIVE G Youth Camp — สไตล์พื้นฐาน
   ใช้ร่วมกันทุกหน้า (index.html, history.html)
   ============================================================ */

:root{
  color-scheme: dark;

  /* พื้นหลัง & พื้นผิว */
  --bg: #08080d;
  --card: #121218;
  --card-border: #23232e;
  --field: #1a1a22;
  --field-border: #2c2c38;
  --field-border-focus: #4a7dff;

  /* ตัวอักษร */
  --white: #f4f4f7;
  --muted: #9a9aab;
  --faint: #a0a0b2;

  /* สีหลัก */
  --electric-blue: #4a7dff;
  --purple: #9b6bff;
  --red: #ef4444;
  --red-soft: #ffb4b4;

  /* ห้าสีประจำ FIVE G */
  --g1: #9b6bff;
  --g2: #4a7dff;
  --g3: #f4c430;
  --g4: #3ccb7f;
  --g5: #ff8a3d;

  --radius: var(--r-lg);

  /* ── ระยะห่างมาตรฐาน (ชุดเดียวกับ Bootstrap) ──────────────────
     เดิมทั้งระบบใช้ตัวเลขกระจัดกระจาย 22 ค่า (1px ถึง 40px) ตั้งตามความรู้สึก
     ทีละที่ ผลคือระยะไม่เท่ากันทั้งที่ควรเท่า และดูไม่เป็นระเบียบ

     ชุดนี้มี 6 ระดับตามสเกลของ Bootstrap ($spacers) — ทุกที่ต้องหยิบจากชุดนี้
     ไม่ใช่พิมพ์ตัวเลขเอง                                                    */
  --sp-1: 4px;    /* .25rem — ระยะติดกัน เช่น ป้ายกับข้อความ */
  --sp-2: 8px;    /* .5rem  — ช่องไฟระหว่างของชิ้นเล็ก */
  --sp-3: 12px;   /* .75rem — ช่องไฟในปุ่ม/ช่องกรอก */
  --sp-4: 16px;   /* 1rem   — ระยะมาตรฐานในกล่อง */
  --sp-5: 24px;   /* 1.5rem — ระหว่างกล่อง */
  --sp-6: 48px;   /* 3rem   — แบ่งส่วนใหญ่ของหน้า */

  /* มุมโค้งตามชุดของ Bootstrap เช่นกัน */
  --r-sm: 6px;    /* .375rem */
  --r-md: 8px;    /* .5rem   */
  --r-lg: 12px;   /* .75rem  */

  /* ความกว้างเมนูข้าง — ใช้ทั้งตัวเมนูและระยะเยื้องของเนื้อหา
     ประกาศที่เดียวจะได้ไม่หลุดจากกันเวลาปรับ */
  --side-w: 232px;
  --content-wide: 1440px;
  --content-form: 1040px;
  --content-field: 920px;
  --control-height: 44px;
  --surface-accent: rgba(74,125,255,0.12);
  --border-danger: rgba(239,68,68,0.28);
  --type-caption: 0.8125rem;
  --type-label: 0.875rem;
  --type-body: 0.9375rem;
  --type-input: 1rem;
  --type-section: 1.125rem;
  --type-title: clamp(1.5rem, 2vw, 1.875rem);
}

*{ box-sizing: border-box; }

/* โฟกัสต้องมองเห็นได้ทั้งเมาส์ คีย์บอร์ด และอุปกรณ์ช่วยอ่าน */
:focus-visible{ outline: 2px solid var(--electric-blue); outline-offset: var(--sp-1); }
button, input, select, textarea{ font: inherit; }
img, video, canvas{ max-width: 100%; }
[hidden]{ display: none !important; }

html{
  /* iOS ขยายตัวอักษรเองเวลาหมุนจอเป็นแนวนอน — สั่งห้ามไว้ */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  margin: 0;
  min-height: 100vh;
  /* dvh คิดแถบที่อยู่เว็บของมือถือให้ด้วย เบราว์เซอร์เก่าตกไปใช้ 100vh บรรทัดบน */
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(27,42,107,0.55), transparent 60%),
    radial-gradient(ellipse 800px 600px at 110% 20%, rgba(61,30,107,0.45), transparent 55%),
    radial-gradient(ellipse 700px 500px at 50% 120%, rgba(74,125,255,0.18), transparent 60%),
    var(--bg);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  color: var(--white);
  display: flex;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4) calc(var(--sp-6) + var(--sp-5));
  /* เผื่อรอยบากซ้าย-ขวาตอนหมุนจอนอน และแถบลากขึ้นด้านล่างของ iPhone */
  padding-left: max(var(--sp-4), env(safe-area-inset-left));
  padding-right: max(var(--sp-4), env(safe-area-inset-right));
  padding-bottom: calc(calc(var(--sp-6) + var(--sp-5)) + env(safe-area-inset-bottom));
  /* กันหน้าเลื่อนซ้ายขวาเมื่อมีอะไรล้นออกนอกกรอบ */
  overflow-x: hidden;
}

.wrap{ width: 100%; max-width: 560px; }

/* ── หัวเรื่อง ────────────────────────────────────────────── */

.brand-eyebrow{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-4);
}
.brand-eyebrow .dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--electric-blue);
  box-shadow: 0 0 10px var(--electric-blue);
}
.brand-eyebrow span{
  font-family: 'Anuphan', sans-serif;
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
}

h1{
  font-family: 'Anuphan', sans-serif;
  font-weight: 800;
  font-size: 34px;
  text-align: center;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-1);
  background: linear-gradient(180deg, #ffffff 0%, #c9d3ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sub{
  text-align: center;
  color: var(--muted);
  font-size: 14.5px;
  margin: 0 0 var(--sp-5);
  line-height: 1.6;
}
.sub b{ color: var(--white); font-weight: 600; }

/* ── การ์ด ────────────────────────────────────────────────── */

.card{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}

.section-title{
  font-family: 'Anuphan', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
}
.section-title .num{
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(74,125,255,0.14);
  border: 1px solid rgba(74,125,255,0.35);
  color: var(--electric-blue);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-note{
  font-size: 12.5px;
  color: var(--faint);
  line-height: 1.6;
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-4);
}

/* ── ชื่อเล่น & เพศ ────────────────────────────────────────────
   ใช้ร่วมกันทั้งหลังบ้านและหน้าประวัติ จึงอยู่ในไฟล์พื้นฐาน       */

.nick{
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  padding: var(--sp-1) var(--sp-2);
  margin-left: var(--sp-1);
  border-radius: 999px;
  background: rgba(244,196,48,0.13);
  border: 1px solid rgba(244,196,48,0.32);
  color: #f7dd8a;
  vertical-align: middle;
  white-space: nowrap;
}
.nick.big{ font-size: 15px; padding: var(--sp-1) var(--sp-3); -webkit-text-fill-color: #f7dd8a; }

/* ป้ายบอกว่าเป็นทีมงาน — ใช้สีม่วงชุดเดียวกับสิทธิ์ admin ให้จำง่าย */
.pill.staff{
  background: rgba(155,107,255,0.14);
  border-color: rgba(155,107,255,0.4);
  color: #cbb2ff;
  margin-left: var(--sp-1);
}

.gtag{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  white-space: nowrap;
  color: var(--muted);
}
.gtag .gm{ font-size: 15px; line-height: 1; font-weight: 700; }
.gtag.male{ color: #8fc2ff; }
.gtag.female{ color: #f9a8d4; }

/* ── ท้ายหน้า ─────────────────────────────────────────────── */

.footnote{
  text-align: center;
  font-size: 12px;
  color: var(--faint);
  margin-top: var(--sp-4);
  line-height: 1.7;
}
.footnote a{ color: var(--muted); }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}