/* ============================================================================
   login-gateway.css — หน้าเลือกทางเข้าระบบ (/login.html)
   ใช้ token ชุดเดียวกับทั้งเว็บ · เป้ากดขั้นต่ำ 44px · โฟกัสด้วยคีย์บอร์ดเห็นชัด
   ★ ไม่มี CSS ในหน้า HTML ตามมาตรฐานโปรเจกต์
   ============================================================================ */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.lg{
  background:var(--cream,#FFF8F1);
  color:var(--ink,#3A2A1C);
  font-family:var(--fb,'Noto Sans Thai',system-ui,sans-serif);
  min-height:100vh;display:flex;flex-direction:column;
  -webkit-text-size-adjust:100%;
}
[hidden]{display:none!important}

.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 14px;border-radius:10px;z-index:99}
.skip:focus{left:12px;top:12px;outline:3px solid var(--sun,#FF7A1A)}

/* ---- หัวเว็บ ---- */
.lghd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;background:#fff;border-bottom:1px solid var(--line,#F2E6D8)}
.lghd .brand{display:inline-flex;align-items:center;gap:9px;min-height:44px;text-decoration:none;color:inherit}
.lghd .brand:focus-visible{outline:3px solid var(--sun,#FF7A1A);outline-offset:2px;border-radius:10px}
.lghd .brand img{border-radius:8px}
.lghd .brand span{display:flex;flex-direction:column;line-height:1.15}
.lghd .brand b{font-family:var(--fd,'Mitr',sans-serif);font-weight:600;font-size:15px;color:var(--ink,#3A2A1C)}
.lghd .brand i{font-style:normal;font-size:10.5px;letter-spacing:.14em;color:var(--sun-deep,#EF5F06)}
.lghd .back{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  font-size:13.5px;color:var(--ink-2,#6E5C4C);text-decoration:none}
.lghd .back:hover{color:var(--sun-text,#BB4707)}
.lghd .back:focus-visible{outline:3px solid var(--sun,#FF7A1A);outline-offset:2px;border-radius:8px}

/* ---- เนื้อหา ---- */
main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:34px 18px 44px}
.wrap{width:100%;max-width:560px}
h1{margin:0 0 6px;font-family:var(--fd,'Mitr',sans-serif);font-weight:600;font-size:26px;text-align:center}
.lede{margin:0 0 22px;text-align:center;font-size:14px;line-height:1.7;color:var(--ink-2,#6E5C4C)}

/* ---- การ์ด ---- */
.card{display:flex;align-items:center;gap:13px;background:#fff;border:1.5px solid var(--line,#F2E6D8);
  border-radius:16px;padding:15px 16px;margin-bottom:11px;text-decoration:none;color:inherit;
  min-height:44px;transition:border-color .15s,transform .12s,box-shadow .15s}
.card:hover{border-color:var(--sun,#FF7A1A);transform:translateY(-1px);
  box-shadow:0 16px 34px -24px rgba(120,60,10,.55)}
.card:focus-visible{outline:3px solid var(--sun,#FF7A1A);outline-offset:3px}
.card .ic{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--cream-2,#FFF1E4);color:var(--sun-deep,#EF5F06)}
.card .ic svg{width:23px;height:23px}
.card .ic.sm{width:40px;height:40px;background:var(--cream,#FFF8F1);color:var(--ink-2,#6E5C4C)}
.card .ic.sm svg{width:20px;height:20px}
.card .tx{flex:1;min-width:0}
.card .tx b{display:block;font-family:var(--fd,'Mitr',sans-serif);font-weight:500;font-size:15.5px;margin-bottom:2px}
.card .tx span{display:block;font-size:12.5px;line-height:1.6;color:var(--ink-2,#6E5C4C)}
.card .go{flex:none;font-size:22px;line-height:1;color:var(--muted,#7C6E5F)}

/* การ์ดสมาชิก = ทางเข้าหลัก เด่นกว่าชัดเจน */
.card.main{border-color:transparent;
  background:linear-gradient(135deg,var(--sun,#FF7A1A),var(--sun-deep,#EF5F06));
  color:#fff;padding:19px 18px;box-shadow:0 20px 40px -26px rgba(239,95,6,.85)}
.card.main .ic{background:rgba(255,255,255,.2);color:#fff}
.card.main .tx b{font-size:17px}
.card.main .tx span{color:rgba(255,255,255,.94)}
.card.main .go{color:rgba(255,255,255,.9)}
.card.main:hover{border-color:transparent}
.card.main:focus-visible{outline:3px solid var(--sun-deep,#EF5F06);outline-offset:3px}

.reg{margin:2px 0 0;text-align:center;font-size:13.5px;color:var(--ink-2,#6E5C4C)}
.reg a{display:inline-flex;align-items:center;min-height:44px;color:var(--sun-text,#BB4707);font-weight:500;text-decoration:none}
.reg a:hover{text-decoration:underline}
.reg a:focus-visible{outline:3px solid var(--sun,#FF7A1A);outline-offset:2px;border-radius:8px}

/* ---- ส่วนเจ้าหน้าที่ (รองจากสมาชิกชัดเจน) ---- */
.staffhd{margin:26px 0 2px;font-family:var(--fd,'Mitr',sans-serif);font-weight:500;font-size:14px;
  color:var(--ink-2,#6E5C4C);text-align:center}
.staffnote{margin:0 0 14px;text-align:center;font-size:12px;color:var(--muted,#7C6E5F)}
.staff .card{background:#fff}
.staff .card .tx b{font-size:14.5px}

.help{margin:22px 0 0;text-align:center;font-size:13px;color:var(--muted,#7C6E5F)}
.help a{display:inline-flex;align-items:center;min-height:44px;color:var(--sun-text,#BB4707);text-decoration:none}
.help a:hover{text-decoration:underline}
.help a:focus-visible{outline:3px solid var(--sun,#FF7A1A);outline-offset:2px;border-radius:8px}

/* ---- ท้ายเว็บ ---- */
.lgft{padding:16px;text-align:center;border-top:1px solid var(--line,#F2E6D8);background:#fff}
.lgft p{margin:0;font-size:12px;color:var(--muted,#7C6E5F)}

@media(min-width:760px){
  main{padding-top:52px}
  h1{font-size:30px}
}
@media(prefers-reduced-motion:reduce){
  .card:hover{transform:none}
}