/* ============================================================
   Thần Thú Poke — หน้าบทความวิธีใช้งาน (/howto/*.html)

   โหลดต่อจาก site.css ⇒ ได้ตัวแปรสี ฟอนต์ รีเซ็ต และสไตล์ footer มาใช้ซ้ำทั้งหมด
   ไฟล์นี้เพิ่มเฉพาะส่วนที่หน้าแรกไม่มี: แถบบนแบบเรียบ · การ์ดบทความ · ขั้นตอน

   🔑 ทำไมส่วนเนื้อหาไม่ใช้หน่วย vw เหมือนหน้าแรก
      หน้าแรกเป็นงานออกแบบที่ทุกกล่องอิงฐาน 1920/390px จึงย่อขยายตามจอได้สวย
      แต่หน้านี้เป็น "ตัวหนังสือให้อ่าน" — ถ้าใช้ vw ตัวอักษรจะใหญ่ขึ้นเรื่อย ๆ
      บนจอ 2560px จนอ่านเมื่อยและบรรทัดยาวเกินไป
      ⇒ จำกัดความกว้างแล้วใช้ px คงที่ (มีที่อ้างอิงอยู่แล้ว: footer ของหน้าแรก
        ก็จำกัด 1280px เหมือนกัน) ส่วนแถบบน/ท้ายเว็บยังใช้ระบบเดิมของ site.css
   ============================================================ */

.howto-body {
  /* พื้นหลังชุดเดียวกับหน้าแรก แต่เริ่มจากบนสุดเพราะหน้านี้ไม่มี hero มาคั่น */
  background: #05060f url("../img/bg-page-m.png") no-repeat center top / 100% auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .howto-body { background-image: url("../img/bg-page.png"); }
}

/* ---------------------------------------------------------- แถบบน */
.hbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-header-bg-m);
  border-bottom: 1px solid var(--c-header-border);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
}
@media (min-width: 768px) {
  .hbar { background: var(--c-header-bg); padding: 12px 32px; }
}
.hbar__logo { flex: 0 0 auto; }
.hbar__logo img { width: 108px; height: auto; }
@media (min-width: 768px) { .hbar__logo img { width: 150px; } }

.hbar__back {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  /* 🔑 44px คือขนาดเป้าแตะขั้นต่ำ เล็กกว่านี้กดพลาดบนมือถือ */
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--c-header-border); border-radius: 999px;
  color: var(--c-yellow); font-size: 14px; font-weight: 600;
  transition: background .18s ease, color .18s ease;
}
.hbar__back:hover { background: var(--c-yellow); color: #17005D; }

/* ---------------------------------------------------------- ตัวบทความ */
/* 🔑 760px ไม่ใช่ตัวเลขสุ่ม — วัดจากความยาวบรรทัดที่อ่านสบาย (ราว 45-90 ตัวอักษร)
   ที่ 880px บรรทัดยาว 103 ตัวอักษร สายตาต้องกวาดไกลจนหาบรรทัดถัดไปยาก
   ที่ 760px เหลือราว 87 ตัวอักษร และภาพหน้าจอยังกว้าง ~654px ซึ่งอ่านลูกศรกำกับได้สบาย */
.hwrap {
  flex: 1 0 auto;
  width: 100%; max-width: 760px;
  margin: 0 auto;
  padding: 20px 16px 56px;
}
@media (min-width: 768px) { .hwrap { padding: 36px 24px 72px; } }

/* ป้ายหัวเรื่อง = รูปปุ่มที่ผู้เล่นกดมานั่นเอง
   ⇒ เห็นแล้วรู้ทันทีว่ามาถูกหน้า ไม่ต้องอ่านหัวข้อซ้ำ และไม่ต้องทำภาพใหม่ */
.hhead { text-align: center; margin-bottom: 18px; }
.hhead img {
  width: 100%; max-width: 420px; height: auto; margin: 0 auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55));
}
.hhead h1 {
  font-size: 22px; line-height: 1.4; margin: 14px 0 0;
  letter-spacing: -.2px;
}
@media (min-width: 768px) { .hhead h1 { font-size: 28px; } }
.hhead p { color: var(--c-ink-dim); font-size: 15px; margin: 8px 0 0; line-height: 1.7; }

.hcard {
  background: #17005DE6;
  border: 1px solid #FFE22133;
  border-radius: 18px;
  padding: 18px 16px;
}
@media (min-width: 768px) { .hcard { padding: 26px 28px; } }
.hcard + .hcard { margin-top: 16px; }

/* ---------------------------------------------------------- ขั้นตอน */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps > li { counter-increment: step; }
.steps > li + li { margin-top: 26px; padding-top: 26px; border-top: 1px solid #FFFFFF1A; }

.steps h2 {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 17px; line-height: 1.5; margin: 0 0 12px; font-weight: 700;
}
@media (min-width: 768px) { .steps h2 { font-size: 19px; } }
/* เลขลำดับวาดจาก counter ⇒ แทรก/สลับขั้นตอนแล้วเลขไม่มีทางเพี้ยน */
.steps h2::before {
  content: counter(step);
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-yellow); color: #17005D;
  font-size: 15px; font-weight: 800;
  display: grid; place-items: center;
}

.steps figure { margin: 0; }
.steps img {
  width: 100%; height: auto; border-radius: 12px;
  border: 1px solid #FFFFFF26;
  background: #00000033;
}

.steps p { margin: 10px 0 0; font-size: 15px; line-height: 1.75; color: var(--c-ink-dim); }
.steps p:first-of-type { margin-top: 0; }

/* ---------------------------------------------------------- กล่องหมายเหตุ */
.note {
  border-radius: 12px; padding: 14px 16px;
  font-size: 14.5px; line-height: 1.7;
  border: 1px solid; margin-top: 16px;
}
.note b { color: #fff; }
.note--tip  { background: #0A3A2A80; border-color: #37B86680; color: #B9EFD0; }
.note--warn { background: #4A2A0080; border-color: #D8A33A80; color: #F2DCA6; }

.hlist { margin: 12px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.8; color: var(--c-ink-dim); }
.hlist li + li { margin-top: 6px; }
.hlist b, .hcard b { color: #fff; }

.hcard h2:not(.steps h2) { font-size: 18px; margin: 0 0 10px; }

/* ปุ่มลิงก์ออกไปหน้าอื่น */
.hbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; margin-top: 16px;
  border-radius: 999px; font-weight: 700; font-size: 15px;
  background: var(--c-yellow); color: #17005D;
  transition: transform .12s ease, filter .18s ease;
}
.hbtn:hover { filter: brightness(1.08); }
.hbtn:active { transform: scale(.97); }
.hbtn--ghost { background: transparent; color: var(--c-yellow); border: 1px solid var(--c-header-border); }
.hbtn--ghost:hover { background: #FFE2211A; filter: none; }

/* ---------------------------------------------------------- บทความอื่น */
.more { display: grid; gap: 10px; margin-top: 26px; }
@media (min-width: 560px) { .more { grid-template-columns: 1fr 1fr 1fr; } }
.more a {
  display: block; border-radius: 12px; overflow: hidden;
  border: 1px solid #FFFFFF1A;
  transition: transform .18s ease, border-color .18s ease;
}
.more a:hover { transform: translateY(-2px); border-color: var(--c-header-border); }
.more img { width: 100%; height: auto; }

.more__t { font-size: 14px; color: var(--c-ink-dim); margin: 0 0 8px; }

/* ---------------------------------------------------------- แถบข้ามไปหัวข้อ */
/* บทความที่ยาวและแบ่งเป็นหลายทาง (ธนาคาร/ซอง · Android/iOS) ผู้อ่านมาหาทางเดียว
   ไม่ควรต้องเลื่อนผ่านอีกทางทั้งก้อน */
.jumpnav {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 16px;
}
.jumpnav a {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center;
  /* 44px = ขนาดเป้าแตะขั้นต่ำ เท่ากับปุ่มอื่นในหน้านี้ */
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--c-header-border); border-radius: 999px;
  background: #17005D99;
  color: var(--c-yellow); font-size: 14.5px; font-weight: 600;
  text-align: center; line-height: 1.35;
  transition: background .18s ease, color .18s ease;
}
.jumpnav a:hover { background: var(--c-yellow); color: #17005D; }

/* แถบบนเป็น sticky ⇒ ถ้าไม่กันที่ไว้ หัวข้อที่กระโดดมาจะถูกแถบบนบัง */
.hcard[id] { scroll-margin-top: 84px; }

/* ---------------------------------------------------------- ขั้นตอนแบบตัวหนังสือล้วน */
/* ใช้กับขั้นตอนที่ภาพประกอบเป็นรูปรวมใบเดียว แยกทีละขั้นไม่ได้ */
.hsteps {
  margin: 12px 0 0; padding-left: 22px;
  font-size: 15px; line-height: 1.85; color: var(--c-ink-dim);
}
.hsteps li { margin-top: 4px; }
.hsteps li::marker { color: var(--c-yellow); font-weight: 700; }

/* ---------------------------------------------------------- ภาพจับหน้าจอมือถือ */
/* 🔑 ภาพพวกนี้กว้างจริงแค่ 480-920px การยืดเต็มคอลัมน์ 760px ทำให้ฟุ้งไม่คมชัด
   ปล่อยให้อยู่ขนาดจริงแล้วจัดกลางแทน */
.steps img.shot {
  width: auto; max-width: 100%;
  margin-left: auto; margin-right: auto; display: block;
}

/* ---------------------------------------------------------- ภาพรวมหลายจอ */
.steps figure.wide, .hcard figure.wide { margin: 16px 0 0; }
figure.wide img {
  width: 100%; height: auto; border-radius: 12px;
  border: 1px solid #FFFFFF26; background: #00000033;
}
figure.wide figcaption {
  margin-top: 8px; text-align: center;
  font-size: 13.5px; color: var(--c-ink-dim);
}

/* หัวข้อของการ์ด — เจาะจงด้วยลูกตรง จึงไม่ไปชนกับ h2 ของแต่ละขั้นตอนที่ซ้อนอยู่ใน li */
.hcard > h2 { font-size: 19px; margin: 0 0 14px; }

/* คนที่ตั้งเครื่องให้ลดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .hbtn:active, .more a:hover { transform: none; }
  html { scroll-behavior: auto; }
}