/* เว็บเช็คชื่อกลาง · กระดานเรียงอันดับ และใบเช็คของครู
   สีส้มใช้กับการเปลี่ยนแปลงเท่านั้น · ขาดเป็นตัวเลขแดง โดดเป็นแผ่นกลับสีดำ สถานะจึงอ่านออกโดยไม่ต้องดูสี
   ปุ่มและแถวที่กดได้สูงอย่างน้อย 44px ยกเว้นแถวรายชื่อบนจอที่ใช้เมาส์ */
/* ฟอนต์เก็บไว้ในเว็บเอง เครือข่ายโรงเรียนอาจบล็อกเว็บภายนอก */
@font-face{font-family:"Bai Jamjuree";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/BaiJamjuree-500-thai.woff2) format("woff2");unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"Bai Jamjuree";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/BaiJamjuree-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Bai Jamjuree";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/BaiJamjuree-600-thai.woff2) format("woff2");unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"Bai Jamjuree";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/BaiJamjuree-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Bai Jamjuree";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/BaiJamjuree-700-thai.woff2) format("woff2");unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"Bai Jamjuree";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/BaiJamjuree-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --ground:#E7E8EA;--panel:#fff;--ink:#111315;--ink2:#33383D;--ink3:#565C62;--line:#D6D8DB;--soft:#F1F2F3;
  --alert:#FF5A1F;--alert-ink:#9A2F00;--alert-wash:#FFE8DD;
  --btn:#127AB9;--btn-edge:#093F60;--btn-edge-soft:#AEB3B9;
  --absent:#B4231A;--late:#7A5400;--leave:#125F91;--zero:#6B7178;
  --r-s:7px;--r-m:10px;--r-l:14px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scrollbar-color:#B9BDC2 transparent}
body{margin:0;background:var(--ground);color:var(--ink);font:500 15px/1.45 "Bai Jamjuree","Noto Sans Thai",Tahoma,sans-serif;font-variant-numeric:tabular-nums}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;padding:0}ul,ol{list-style:none}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
button:disabled{cursor:default;opacity:.55}
.ic{display:block;flex:none}
.dg{display:inline-block;width:.66em;text-align:center;font-style:normal}
[hidden]{display:none!important}
::selection{background:var(--ink);color:#fff}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.rail :focus-visible{outline-color:#fff}

/* ── โครงหน้า ─────────────────────────────────────────── */
.shell{min-height:100dvh}
.content{min-width:0;padding-bottom:calc(68px + var(--safe-b))}
.rail{display:none}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--panel);border-top:1px solid var(--line);padding:6px 0 calc(6px + var(--safe-b))}
.tabs a,.tabs .navlogout{min-width:0}
.tabs a{position:relative;display:grid;justify-items:center;gap:1px;min-height:48px;align-content:center;font-size:12px;font-weight:600;color:var(--ink3);text-decoration:none}
.tabs a.on{color:var(--ink);font-weight:700}
.navlogout button{width:100%;font-family:inherit}
.tabs .navlogout{display:grid}
.tabs .navlogout button{display:grid;justify-items:center;gap:1px;min-height:48px;align-content:center;font-size:12px;font-weight:600;color:var(--ink3);white-space:nowrap}
.tabs em,.rail em{position:absolute;top:-1px;left:calc(50% + 6px);min-width:20px;height:18px;padding:0 5px;border-radius:9px;background:var(--ink);color:#fff;font:700 11.5px/18px "Bai Jamjuree",sans-serif;text-align:center;font-style:normal}

@media (min-width:600px){
  .shell{display:flex;height:100dvh;overflow:hidden}
  .content{flex:1;overflow:auto;padding-bottom:0}
  .tabs{display:none}
  .rail{display:flex;flex-direction:column;align-items:center;gap:6px;width:88px;flex:none;background:var(--ink);color:#E7E8EA;padding:14px 0}
  .railbrand{display:grid;place-items:center;width:52px;height:52px;margin-bottom:8px;background:#fff;color:var(--ink);border-radius:50%}
  .railbrand img{width:44px;height:44px;object-fit:contain}
  .rail a:not(.railbrand){position:relative;display:grid;justify-items:center;align-content:center;gap:2px;width:76px;min-height:64px;border-radius:var(--r-m);font-size:12.5px;font-weight:600;text-decoration:none}
  .rail a.on{background:#fff;color:var(--ink);font-weight:700}
  .rail .navlogout{margin-top:auto;width:76px}
  .rail .navlogout button{display:grid;justify-items:center;align-content:center;gap:2px;min-height:64px;border-radius:var(--r-m);color:inherit;font-size:12.5px;font-weight:600;text-align:center;line-height:1.2}
  .rail .navlogout button:hover{background:rgba(255,255,255,.14)}
  .rail em{background:#fff;color:var(--ink);top:6px;left:calc(50% + 4px)}
  .rail a.on em{background:var(--ink);color:#fff}
}

/* ── หัวกระดาน ─────────────────────────────────────────── */
.bhd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 8px}
.bhd-t{min-width:0}
.bhd h1{font-size:26px;font-weight:700;line-height:1.2}
.bhd h1 i{font-size:12.5px;font-weight:700;font-style:normal;background:var(--ink);color:#fff;padding:2px 8px;border-radius:5px;vertical-align:5px;margin-left:4px}
#bSub{font-size:14px;color:var(--ink2)}
#bSub.bad{color:var(--absent);font-weight:600}
.litlink{position:relative;color:var(--alert-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.litlink::after{content:"";position:absolute;inset:-14px -6px}
.iconbtn{position:relative;display:grid;place-items:center;width:46px;height:46px;flex:none;background:var(--panel);border-radius:var(--r-m);cursor:pointer}
.iconbtn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.iconbtn:focus-within{outline:3px solid var(--ink);outline-offset:2px}
.notice{margin:0 12px 8px;padding:7px 12px;border:2px solid var(--ink);border-radius:var(--r-m);font-size:14px;font-weight:600}
.notice a{position:relative;font-weight:700}
.notice a::after,.authnote a::after,#bSub a::after{content:"";position:absolute;inset:-13px -6px}
.authnote a,#bSub a{position:relative}
.flash{margin:10px 12px 0;padding:10px 12px;border-radius:var(--r-m);background:var(--panel);font-weight:600}
.flash.danger{background:#FBE7E5;color:#8C1A12}
.flash.success{background:#DFF3E6;color:#0A5A2C}
.flash.warning{background:var(--panel)}

.seg{position:relative;z-index:1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;margin:0 12px 8px;padding:3px;background:var(--panel);border-radius:var(--r-m)}
.seg button{min-height:44px;border-radius:var(--r-s);text-align:center;font-weight:600}
.seg button.on{background:var(--btn);color:#fff}
.periods{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0 12px 8px}
.periods[hidden]{display:none}
.periods button{min-height:48px;padding:3px 4px;background:var(--panel);border-radius:var(--r-s);text-align:center;font-weight:600;line-height:1.2}
.periods small{display:block;font-size:12px;font-weight:500;color:var(--ink3)}
.periods button.on{background:var(--btn);color:#fff}
.periods button.on small{color:#fff}

/* ── แถวกระดาน ─────────────────────────────────────────── */
.bh,.row{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px 44px;align-items:center}
.bh{padding:2px 24px 4px;font-size:13px;font-weight:600;color:var(--ink2)}
.bh span:not(:first-child){text-align:center}
.bd{display:grid;gap:4px;padding:0 12px 14px}
.bd li{min-width:0}
.bd .lv{padding:8px 12px 1px;font-size:14px;font-weight:700;color:var(--ink2)}
.row{width:100%;min-height:58px;padding:6px 12px;background:var(--panel);border-radius:var(--r-s);position:relative}
.row:hover{background:#FAFAFA}
.row.sel{box-shadow:inset 0 0 0 2px var(--ink)}
.row .rw{min-width:0}
.row .rw b{display:flex;align-items:center;gap:5px;font-size:20px;font-weight:700;line-height:1.2}
.row .rw small{display:block;font-size:13px;font-weight:500;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v{text-align:center;font-size:21px;font-weight:600}
.v.zero{color:var(--zero);font-weight:500}
.v.a{color:var(--absent);font-weight:700}
.v.s{justify-self:center;width:34px;border-radius:5px;background:var(--ink);color:#fff;font-weight:700;line-height:1.4}
.waitc{grid-column:2/5;text-align:right;font-size:16px;font-weight:700;line-height:1.2}
.waitc small{display:block;font-size:13px;font-weight:500}
.waitc.quiet{font-size:14px;font-weight:500;color:var(--ink3)}
.waitc.pg{font-size:14.5px;font-weight:600;color:var(--leave)}
.row.is-quiet .rw b{font-weight:600;color:var(--ink2)}
.row.lit{background:var(--alert-wash);box-shadow:inset 0 0 0 2px var(--alert);padding-top:7px}
.chg{grid-column:1/5;margin-top:2px;font-size:12.5px;font-weight:700;color:var(--alert-ink)}
.bsum{min-height:44px;background:transparent;padding-top:2px;padding-bottom:2px;cursor:default;pointer-events:none}
.bsum .rw b{font-size:15px}
.bsum .v{font-size:17px}
.bsum .v.zero{color:var(--ink3)}
.empty{padding:28px 16px;text-align:center;color:var(--ink2);font-weight:600}

/* ── บัตรห้อง ─────────────────────────────────────────── */
.card-col{display:none}
.card-open .card-col{display:block;position:fixed;inset:0;z-index:20;overflow:auto;background:var(--ground);padding:calc(10px + env(safe-area-inset-top,0px)) 12px calc(12px + var(--safe-b))}
.cardbar{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cardbar .back{display:grid;place-items:center;width:46px;height:46px;flex:none;background:var(--panel);border-radius:var(--r-m)}
.slots{flex:1;min-width:0;display:flex;gap:3px;overflow-x:auto;scrollbar-width:none;padding:3px;background:var(--panel);border-radius:var(--r-m)}
.slots::-webkit-scrollbar{display:none}
.slots button{flex:none;min-height:44px;padding:3px 12px;border-radius:var(--r-s);font-weight:700;white-space:nowrap;line-height:1.2}
.slots small{display:block;font-size:12px;font-weight:500;color:var(--ink2)}
.slots button.on{background:var(--btn);color:#fff}
.slots button.on small{color:#fff}
.pass{background:var(--panel);border-radius:var(--r-l);padding:0 15px 15px}
.passhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 -15px 12px;padding:7px 15px;border-radius:var(--r-l) var(--r-l) 0 0;background:var(--ink);color:#fff;font-size:13px;font-weight:600}
.passhead span:last-child{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-weight:700}
.passhead.done span:last-child{padding:1px 8px;border-radius:5px;background:#fff;color:var(--ink)}
.pass>header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pass h2{font-size:38px;font-weight:700;line-height:1.05}
.pass>header p{font-size:15px;font-weight:600}
.seg3{display:grid;grid-template-columns:1.15fr 1.15fr .85fr;margin-top:9px}
.seg3>div{padding-left:9px;border-left:1px solid var(--line)}
.seg3>div:first-child{padding-left:0;border-left:0}
.seg3 dt,.num dt{font-size:13px;font-weight:600;color:var(--ink3)}
.seg3 dd{font-size:15px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.tear{position:relative;margin:11px -15px;border-top:2px dashed #B9BDC2}
.tear::before,.tear::after{content:"";position:absolute;top:-9px;width:16px;height:16px;border-radius:50%;background:var(--ground)}
.tear::before{left:-8px}.tear::after{right:-8px}
.num{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.num dd{font-size:44px;line-height:1.05;font-weight:700}
.num .n-a{color:var(--absent)}
.num .n-s span{display:inline-block;padding:0 8px;border-radius:7px;background:var(--ink);color:#fff}
.num .n-l{color:var(--late)}
.num .n-v{color:var(--leave)}
.num .zero{color:var(--zero);font-weight:500}
.nl h3{font-size:15px;font-weight:700;margin:11px 0 1px}
.nl h3.absent{color:var(--absent)}
.nl h3.late{color:var(--late)}
.nl h3.leave{color:var(--leave)}
.nl button.nm{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;border-top:1px solid #E7E8EA;font-size:15.5px;line-height:1.25}
.nl button.nm b{width:24px;flex:none;text-align:right;font-weight:700}
.nl button.nm span{flex:1;min-width:0}
.nl button.nm em{flex:none;padding:0 7px;border-radius:5px;background:#fff;border:1.5px dashed var(--ink);font-size:12.5px;font-style:normal;font-weight:700}
.nl button.nm:hover{background:var(--soft)}
.morebtn{width:100%;min-height:44px;margin-top:8px;border-radius:var(--r-s);background:var(--soft);text-align:center;font-weight:600}
.pmsg{margin:12px 0 2px;font-size:17px;font-weight:700}
.pmsg small{display:block;font-size:14px;font-weight:500;color:var(--ink2)}
.pact{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;margin-top:10px}
.cardempty{display:grid;place-items:center;height:100%;min-height:240px;padding:24px;text-align:center;color:var(--ink2);font-weight:600}

/* ── ปุ่ม ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:52px;padding:0 16px;background:var(--btn);color:#fff;border-radius:var(--r-m);font-weight:700;font-size:16.5px;text-align:center;text-decoration:none}
.btn.ghost{background:var(--panel);color:var(--btn-edge)}
.btn.small{width:auto;flex:none;min-height:44px;font-size:14.5px;padding:0 13px;white-space:nowrap}
.stickybar .btn{padding:0 8px;font-size:15.5px}
@media (hover:hover){.btn:hover{filter:brightness(1.1)}}
.btn.ghost:hover{background:var(--soft);filter:none}

/* ── เช็คเอง ─────────────────────────────────────────── */
.roll h3{font-size:16px;font-weight:700;margin-top:12px}
.roll p{font-size:14px;color:var(--ink2)}
.rollrow{padding:9px 0;border-top:1px solid #E7E8EA}
.rollrow>div:first-child{margin-bottom:5px;font-size:15.5px}
.rollrow b{font-weight:700;margin-right:6px}
.statusseg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}
.statusseg button{min-height:44px;background:var(--soft);border-radius:var(--r-s);text-align:center;font-weight:600}
.statusseg button.on{background:#CFEBD9;color:#0A4F27;font-weight:700}
.statusseg button.on[data-s=late]{background:#F3DFA8;color:#4F3900}
.statusseg button.on[data-s=leave]{background:#CFE6F5;color:#0D4C75}
.statusseg button.on[data-s=absent]{background:var(--absent);color:#fff}
.statusseg button.on[data-s=skip]{background:var(--ink);color:#fff}
.stickybar{position:sticky;bottom:calc(-12px - var(--safe-b));z-index:1;margin:12px -15px -15px;padding:10px 15px calc(10px + var(--safe-b));background:var(--panel);border-top:1px solid var(--line);border-radius:0 0 var(--r-l) var(--r-l)}

/* ── แผ่นรายคน ────────────────────────────────────────── */
dialog{width:100%;max-width:none;margin:auto 0 0;padding:0;border:0;border-radius:18px 18px 0 0;background:var(--panel);color:var(--ink);max-height:90dvh;overflow:auto}
dialog::backdrop{background:rgba(17,19,21,.45)}
.kidwrap{padding:12px 16px calc(18px + var(--safe-b))}
.kidhd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.kidhd h3{font-size:21px;font-weight:700;line-height:1.25}
.kidhd p{font-size:14.5px;color:var(--ink2)}
.kidhd button{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:var(--r-m);background:var(--soft)}
.tl{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:5px;margin:11px 0}
.tl li{padding:6px 9px;border-radius:var(--r-s);background:var(--soft);font-size:13.5px;line-height:1.3}
.tl b{display:block;font-weight:700}
.tl .present{background:#DDF3E5;color:#0A4F27}
.tl .late{background:#F7E8BF;color:#4F3900}
.tl .leave{background:#DCEDF8;color:#0D4C75}
.tl .absent{background:var(--absent);color:#fff}
.tl .skip{background:var(--ink);color:#fff}
.susnote{margin-bottom:10px;padding:9px 11px;border-radius:var(--r-s);background:var(--soft);font-weight:600}
.kidlabel{display:block;margin:10px 0 4px;font-size:14px;font-weight:700}
.kidinput{width:100%;min-height:48px;padding:0 12px;border:2px solid #7C8288;border-radius:var(--r-s);background:#fff;font-size:16px}
.kidinput:focus{border-color:var(--ink);outline:none}

/* ── รายการสงสัยโดด ───────────────────────────────────── */
#bSuspects{padding:0 12px 14px}
.susitem{padding:11px 13px;margin-bottom:5px;background:var(--panel);border-radius:var(--r-s)}
.susitem .who{display:block;width:100%;min-height:44px;line-height:1.3}
.susitem .who b{display:block;font-size:17px;font-weight:700}
.susitem .who small{display:block;font-size:13.5px;color:var(--ink2)}
.susitem .pact{margin-top:6px}
.susitem .btn{min-height:44px;font-size:14.5px}

/* ── ข้อความแจ้งผล ────────────────────────────────────── */
#toast{position:fixed;left:50%;bottom:calc(84px + var(--safe-b));z-index:40;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:10px 16px;border-radius:var(--r-m);background:var(--ink);color:#fff;font-weight:600;white-space:nowrap}
#toast.bad{background:var(--absent);white-space:normal}

/* ── หน้าบัญชี ─────────────────────────────────────────── */
.page{max-width:720px}
.h2{margin:18px 14px 6px;font-size:18px;font-weight:700}
.panel{margin:0 12px 8px;padding:13px 15px;background:var(--panel);border-radius:var(--r-m)}
.panel.flush{padding:0}
.who{display:flex;justify-content:space-between;align-items:center;gap:10px}
.who div b{display:block;font-size:17px;font-weight:700}
.who div span{display:block;font-size:14px;color:var(--ink2)}
.staffadd{display:grid;gap:10px}
.staffadd label{display:block;margin-bottom:3px;font-size:14px;font-weight:700}
.staffadd select{width:100%;min-height:48px;padding:0 34px 0 10px;border:2px solid #7C8288;border-radius:var(--r-s);appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111315' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center}
.hint{margin-top:12px;font-size:14px;color:var(--ink2);display:grid;gap:4px}
.hint b{color:var(--ink);font-weight:700}
.stafflist li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 15px;border-top:1px solid #E7E8EA}
.stafflist li:first-child{border-top:0}
.stafflist b{display:block;font-weight:700}
.stafflist span{font-size:13.5px;color:var(--ink2)}

/* ── หน้าล็อกอิน ──────────────────────────────────────── */
body.auth{display:grid;place-items:center;min-height:100dvh;padding:16px}
.authbox{width:100%;max-width:400px;padding:0 20px 20px;background:var(--panel);border-radius:var(--r-l);display:grid;gap:10px}
.authbox .passhead{margin:0 -20px 4px;padding:8px 20px}
.authbox .tear{margin:2px -20px}
.authbox .tear::before{left:-8px}.authbox .tear::after{right:-8px}
.authlogo{width:56px;height:56px;object-fit:contain}
.authbox h1{font-size:28px;font-weight:700;line-height:1.2}
.authsub{color:var(--ink2);margin-top:-6px}
.authbox form{display:grid;gap:4px}
.authbox label{margin-top:8px;font-size:14px;font-weight:700}
.authbox input{width:100%;min-height:52px;padding:0 13px;border:2px solid #7C8288;border-radius:var(--r-s);background:#fff;font-size:16px}
.authbox input:focus{border-color:var(--ink);outline:none}
.authbox .btn{margin-top:12px}
.authbox .flash{margin:0}
.authnote{font-size:14px;color:var(--ink2)}

/* ── จอกว้าง ──────────────────────────────────────────── */
@media (min-width:600px){
  .bh,.row,.bsum{grid-template-columns:minmax(0,1fr) 60px 60px 60px}
  .bhd{padding-top:14px}
  .periods{grid-template-columns:repeat(8,1fr)}
  dialog{width:460px;margin:auto;border-radius:var(--r-l)}
  .staffadd{grid-template-columns:1fr 1fr auto;align-items:end}
  .ttfields{grid-template-columns:minmax(120px,1fr) 2.5fr}
  .slotrow{grid-template-columns:minmax(0,1fr) minmax(220px,1fr);align-items:center;gap:10px}
  .staffadd .btn{width:auto;min-height:48px}
  #toast{bottom:24px}
  .card-open .card-col{left:88px}
}
@media (min-width:1000px){
  .boardwrap{display:grid;grid-template-columns:minmax(0,1fr) 440px;height:100dvh;overflow:hidden}
  .board-col{overflow:auto;min-width:0}
  .card-col,.card-open .card-col{display:block;position:static;overflow:auto;padding:14px 12px 16px 0;background:transparent;z-index:auto}
  .cardbar .back{display:none}
  .stickybar{bottom:-16px}
  .page{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:4px;align-items:start}
  .page>.bhd{grid-column:1/-1}
  .page .col-a,.page .col-b{min-width:0}
}
@media (min-width:1000px) and (pointer:fine){
  .nl button.nm{min-height:34px}
  .nl h3{margin-top:8px}
  .morebtn{min-height:38px;margin-top:6px}
}
@media (min-width:600px) and (max-width:999px){
  .cardbar,.pass{max-width:600px;margin-inline:auto}
}
/* ── ใบเช็คของครู ─────────────────────────────────────── */
.srow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-height:68px;padding:8px 12px 8px 8px;background:var(--panel);border-radius:var(--r-s)}
.srow:hover{background:#FAFAFA}
.srow.sel{box-shadow:inset 0 0 0 2px var(--ink)}
.sp{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-s);background:var(--ink);color:#fff;font-size:21px;font-weight:700}
.srow.is-done .sp,.srow.is-quiet .sp{background:var(--soft);color:var(--ink2)}
.srow .rw{min-width:0}
.srow .rw b{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:19px;font-weight:700;line-height:1.2}
.srow .rw small{display:block;font-size:13px;color:var(--ink2);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow.is-quiet .rw b{font-weight:600;color:var(--ink2)}
.nowtag{padding:1px 7px;border-radius:5px;background:var(--ink);color:#fff;font-size:12px;font-style:normal;font-weight:700}
.ss{display:grid;justify-items:end;text-align:right;line-height:1.25}
.ss b{display:inline-flex;align-items:center;gap:3px;font-size:14.5px;font-weight:700}
.ss small{font-size:13px;color:var(--ink2)}
.ss.quiet{font-size:13.5px;color:var(--ink3)}
.ss.due b{padding:3px 9px;border:2px solid var(--ink);border-radius:var(--r-s)}
.ss .sa{color:var(--absent);font-weight:700}
.ss .sk{padding:0 5px;border-radius:4px;background:var(--ink);color:#fff;font-weight:700}
.sheetpass h2{font-size:34px}
.sheetpass h2:focus{outline:none}
.byline{margin-top:2px;font-size:13.5px;color:var(--ink2)}
.tally{margin-top:10px}
.tally dd{font-size:30px}
.tally .n-s span{padding:0 6px;border-radius:6px}
.notice.stale{margin:10px 0 0;border-color:var(--absent);color:var(--absent)}
.linkbtn{position:relative;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:2px}
.linkbtn::after{content:"";position:absolute;inset:-13px -6px}
.rollrow>div:first-child b{display:inline-block;min-width:22px}
.sheetpass .stickybar{margin-top:12px}
.sheetpass .stickybar .btn{font-size:16.5px}
.btn:disabled{--edge-c:#C4C7CB;background:var(--soft);color:var(--ink3);opacity:1}

/* ── ตารางสอน ─────────────────────────────────────────── */
.page.single{display:block;max-width:760px}
.bhd .grow{flex:1}
.bsubtle{font-size:14px;color:var(--ink2)}
.teacherpick{display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:end}
.teacherpick label{grid-column:1/-1;font-size:14px;font-weight:700}
.fieldselect{width:100%;min-height:48px;padding:0 10px;border:2px solid #7C8288;border-radius:var(--r-s);background:#fff}
.ttlist{display:grid;gap:6px;padding:0 12px 16px}
.ttitem{background:var(--panel);border-radius:var(--r-m)}
.ttitem summary{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:62px;padding:9px 14px;cursor:pointer;list-style:none}
.ttitem summary::-webkit-details-marker{display:none}
.tthead{min-width:0}
.tthead b{display:block;font-size:16px;font-weight:700;line-height:1.3}
.tthead small{display:block;font-size:13.5px;color:var(--ink2)}
.ttslots{flex:none;max-width:45%;text-align:right;font-size:13.5px;font-weight:700}
.ttslots.none{padding:3px 9px;border:2px solid var(--ink);border-radius:var(--r-s)}
.ttform{display:grid;gap:10px;padding:2px 14px 14px;border-top:1px solid #E7E8EA}
.ttgrid{display:grid;grid-template-columns:52px repeat(var(--days),minmax(0,1fr));gap:3px;margin-top:10px}
.ttcorner,.ttday{display:grid;place-items:center;min-height:30px;font-size:13.5px;font-weight:700;color:var(--ink2)}
.ttcorner{font-size:12.5px}
.ttp{display:grid;align-content:center;line-height:1.15;text-align:center}
.ttp b{font-size:15px;font-weight:700}
.ttp small{font-size:11.5px;color:var(--ink3)}
.ttcell{position:relative;display:block;min-height:44px;cursor:pointer}
.ttcell input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ttcell span{position:absolute;inset:0;display:grid;place-items:center;border-radius:var(--r-s);background:var(--soft)}
.ttcell:hover span{background:#E4E6E8}
.ttcell input:checked+span{background:var(--btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center}
.ttcell input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.ttcell.busy span::after,.ttdot{content:"";display:block;width:8px;height:8px;border-radius:50%;background:#7C8288}
.ttcell.busy span::after{position:absolute;top:5px;right:5px}
.ttcell.busy input:checked+span::after{background:#fff}
.tthint{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink2)}
.ttdot{display:inline-block;flex:none}

/* ── ครูประจำชั้น ─────────────────────────────────────── */
.page.single .staffadd .btn{white-space:nowrap}
p.hint{display:block}
.roomlist li{align-items:flex-start;flex-wrap:wrap}
.rmname{min-width:70px;font-size:17px;line-height:44px}
.rmnone{flex:1;font-size:14px;color:var(--ink3);line-height:44px;text-align:right}
.rmadv{flex:1;min-width:210px;display:grid;gap:4px}
.rmone{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.rmone span{min-width:0;font-size:14.5px;color:var(--ink);text-align:right}
.linklist a{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:60px;padding:9px 15px;border-top:1px solid #E7E8EA;text-decoration:none}
.linklist a:first-child{border-top:0}
.linklist a:hover{background:#FAFAFA}
.linklist b{display:block;font-weight:700}
.linklist small{display:block;font-size:13.5px;color:var(--ink2)}

/* ── สมัครสมาชิก · เพิ่มวิชา · แจ้งเตือน ─────────────── */
.authbox select{width:100%;min-height:52px;padding:0 34px 0 13px;border:2px solid #7C8288;border-radius:var(--r-s);appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111315' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;font-size:16px}
.authbox select:focus{border-color:var(--ink);outline:none}
.authbox label{display:block}
.authpair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.authpair input{min-width:0}
.authbox>.btn.ghost{margin-top:2px}
.fieldinput{width:100%;min-height:48px;padding:0 12px;border:2px solid #7C8288;border-radius:var(--r-s);background:#fff;font-size:16px}
.fieldinput:focus{border-color:var(--ink);outline:none}
.formstack{display:grid;gap:10px}
.formstack label{display:block;margin-bottom:3px;font-size:14px;font-weight:700}
.ttplus{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:var(--r-s);background:var(--btn);color:#fff}
.ttadd[open] .ttplus{background:var(--panel);color:var(--btn-edge)}
.ttfields{display:grid;gap:10px;margin-top:10px}
.ttfields label,.roompick legend{display:block;margin-bottom:3px;font-size:14px;font-weight:700}
.roompick{margin:0;padding:0;border:0;display:grid;gap:6px}
.roomrow{display:flex;flex-wrap:wrap;gap:5px}
.roomchip{position:relative;cursor:pointer}
.roomchip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.roomchip span{display:grid;place-items:center;min-width:64px;min-height:44px;padding:0 10px;border-radius:var(--r-s);background:var(--soft);font-weight:600}
.roomchip:hover span{background:#E4E6E8}
.roomchip input:checked+span{background:var(--btn);color:#fff}
.roomchip input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.ttremove{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:0 14px 14px;font-size:14px}
.ttremove .linkbtn{color:var(--absent)}
.noticebox{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 12px 8px;padding:9px 12px;border:2px solid var(--ink);border-radius:var(--r-m);background:var(--panel)}
.noticebox ul{display:grid;gap:3px;min-width:0;font-size:14px}
.noticebox b{font-weight:700}
@media (max-width:399px){.tabs a,.tabs .navlogout button{font-size:11px;letter-spacing:-.01em}}
@media (max-width:339px){.tabs a,.tabs .navlogout button{font-size:10.5px}.tabs .navlogout button{white-space:normal;line-height:1.1;text-align:center}}

/* ── หน้าครูกิจการ ─────────────────────────────────────── */
.periodbar{display:flex;gap:3px;margin:0 12px 8px;padding:3px;overflow-x:auto;scrollbar-width:none;background:var(--panel);border-radius:var(--r-m)}
.periodbar::-webkit-scrollbar{display:none}
.periodbar button{flex:1 0 auto;min-width:76px;min-height:52px;padding:3px 8px;border-radius:var(--r-s);text-align:center;font-weight:700;white-space:nowrap;line-height:1.2}
.periodbar small{display:block;font-size:12px;font-weight:500;color:var(--ink2)}
.periodbar button:hover{background:var(--soft)}
.periodbar button.on{background:var(--btn);color:#fff}
.periodbar button.on small{color:#fff}
.daystat{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;margin:0 12px 8px;padding:9px 0;background:var(--panel);border-radius:var(--r-m)}
.daystat>div{padding:0 12px;border-left:1px solid var(--line)}
.daystat>div:first-child{border-left:0}
.daystat dt{font-size:13px;font-weight:600;color:var(--ink2)}
.daystat dd{font-size:30px;font-weight:700;line-height:1.1}
.daystat dd small{margin-left:3px;font-size:13px;font-weight:600}
.daystat dd.zero{color:var(--zero);font-weight:500}
.daystat dd.a{color:var(--absent)}
.daystat .plate{display:inline-block;padding:0 7px;border-radius:7px;background:var(--ink);color:#fff}
.susbar{display:flex;justify-content:space-between;align-items:center;gap:10px;width:calc(100% - 24px);min-height:52px;margin:0 12px 8px;padding:6px 12px;border-radius:var(--r-m);background:var(--panel)}
.susbar b{display:block;font-weight:700;line-height:1.25}
.susbar small{display:block;font-size:13px;color:var(--ink2)}
.susbar:hover{background:var(--soft)}
.susback{margin-bottom:8px}
.viewrow{display:flex;align-items:center;gap:8px;margin:0 12px 4px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.viewrow .seg{flex:1;margin:0;color:var(--ink);background:transparent;padding:0}
.viewrow .seg button{min-height:44px;background:var(--panel);font-size:14px}
.viewrow .seg button.on{background:var(--btn)}

/* ── สรุปข้อมูล ───────────────────────────────────────── */
.presetlist{display:grid;gap:4px;padding:0 12px 10px}
.presetlist a{display:block;min-height:58px;padding:8px 12px;background:var(--panel);border-radius:var(--r-s);text-decoration:none}
.presetlist a:hover{background:#FAFAFA}
.presetlist b{display:block;font-size:16px;font-weight:700;line-height:1.3}
.presetlist small{display:block;font-size:13px;color:var(--ink2);line-height:1.3}
.presetlist a.on{background:var(--btn);color:#fff}
.presetlist a.on small{color:#fff}
.rform{display:grid;gap:12px}
.rlabel,.rdates label{display:block;margin-bottom:3px;font-size:14px;font-weight:700}
.rangechips{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;margin-bottom:8px}
.rangechips a{display:grid;place-items:center;min-height:44px;background:var(--soft);border-radius:var(--r-s);font-weight:600;text-decoration:none}
.rangechips a.on{background:var(--btn);color:#fff}
.rdates{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rdates input{min-width:0;padding:0 6px}
.rmore summary{display:flex;justify-content:space-between;align-items:center;min-height:44px;font-weight:700;cursor:pointer;list-style:none}
.rmore summary::-webkit-details-marker{display:none}
.rmore[open] summary .ic{transform:rotate(90deg)}
.rmoregrid{display:grid;gap:10px;padding-top:4px}
.rresult{min-width:0;padding:0 12px 16px}
.rhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:12px 2px 8px}
.rhead h2{font-size:22px;font-weight:700;line-height:1.25}
.rhead p{font-size:14px;color:var(--ink2)}
.ractions{display:flex;flex-wrap:wrap;gap:6px}
.ractions .btn{width:auto}
.printonly{display:none}
.rtablewrap{overflow-x:auto;background:var(--panel);border-radius:var(--r-m)}
.rtable{width:100%;border-collapse:collapse;font-size:14.5px}
.rtable th{padding:9px 10px;background:var(--panel);border-bottom:2px solid var(--ink);font-size:13px;font-weight:700;white-space:nowrap}
.rtable td{padding:8px 10px;border-top:1px solid #E7E8EA}
.rtable .ctext{text-align:left}
.rtable td.ctext{white-space:nowrap}
.rtable .cnum{text-align:center;white-space:nowrap}
.rtable .clabel{position:sticky;left:0;z-index:1;background:var(--panel)}
.rtable tbody tr:hover .clabel{background:#FAFAFA}
.rtable tbody tr:hover{background:#FAFAFA}
.rtable tfoot td{border-top:2px solid var(--ink);font-weight:700}
.rz{color:var(--zero)}
.ra{color:var(--absent);font-weight:700}
.rs{display:inline-block;padding:0 6px;border-radius:5px;background:var(--ink);color:#fff;font-weight:700}
.rnote{margin-top:8px;font-size:13.5px;color:var(--ink2)}
.groupchips{margin:8px 0 0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:5px}
.groupchips legend{margin-bottom:3px;padding:0;font-size:14px;font-weight:700}
.groupchips .roomchip{margin:0}
.groupchips .roomchip span{min-height:44px;padding:6px 10px;font-size:14px;line-height:1.2;text-align:center}
.ttfields .full{grid-column:1/-1}
/* ── เช็คแทน ──────────────────────────────────────────── */
.sheetlinks{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 14px}
.sheetlinks .btn{flex:1}
.covernote{font-weight:700;color:var(--ink)!important;white-space:normal!important}
.coverline{margin-top:8px;padding:7px 10px;border-radius:var(--r-s);background:var(--soft);font-size:14px;font-weight:600}
.covertabs{margin:0 12px 10px}
.covertabs a{background:var(--panel)}
.coverfilter{padding:0 12px 6px}
.coverfilter label{display:block;margin-bottom:3px;font-size:14px;font-weight:700}
.coverlist{display:grid;gap:4px;padding:0 12px 10px}
.coverrow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:68px;padding:8px 10px 8px 8px;background:var(--panel);border-radius:var(--r-s)}
.coverrow .rw{min-width:0}
.coverrow .rw b{display:block;font-size:19px;font-weight:700;line-height:1.2}
.coverrow .rw small{display:block;font-size:13px;line-height:1.3;color:var(--ink2)}
.coverrow .sp{background:var(--ink);color:#fff}
.abshead{font-size:17px;font-weight:700;line-height:1.35;margin-bottom:8px}
.slotlist{display:grid}
.slotday{padding:10px 0 2px;font-size:14px;font-weight:700;color:var(--ink2)}
.slotrow{display:grid;gap:4px;padding:8px 0;border-top:1px solid #E7E8EA}
.slotrow label{margin:0}
.slotrow label b{display:block;font-size:15px;font-weight:700}
.slotrow label small{display:block;font-size:13px;font-weight:500;color:var(--ink2)}
.slotdone{font-weight:700;color:var(--ink2)}
.absfoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;padding:0 12px 16px}
.absfoot .btn{width:auto}
.claimtoggle{display:flex;justify-content:space-between;align-items:center;gap:10px}
.claimtoggle p{font-size:14px;color:var(--ink2)}
.claimtoggle b{color:var(--ink);font-weight:700}
.assignhint{margin:6px 0 10px;font-size:13.5px;color:var(--ink2)}
/* ── ภาพประกอบ ────────────────────────────────────────── */
.artempty{display:grid;justify-items:center;gap:6px;padding:22px 16px;text-align:center;font-weight:700}
.artempty.inpass{padding:10px 0 4px}
.artempty .btn{width:auto;min-width:200px;margin-top:6px}
.artimg{display:block;width:min(240px,70%);height:auto;margin-bottom:6px}
.artsub{font-size:14px;font-weight:500;color:var(--ink2)}
.artsmall{display:block;width:96px;height:auto;margin-bottom:4px}
.alldone{display:flex;align-items:center;gap:12px;margin:0 12px 6px;padding:8px 14px;background:var(--panel);border-radius:var(--r-s);font-size:16px;font-weight:700}
.alldoneimg{display:block;width:64px;height:auto;flex:none}
.cardempty{gap:10px;align-content:center}
.cardart{display:block;width:min(260px,70%);height:auto}
.railart{display:none}
@media (min-width:600px) and (min-height:720px){
  .railart{display:block;margin-top:8px;opacity:.9}
}

/* ── จอกว้างของหน้าครู ───────────────────────────────── */
@media (min-width:600px){
  .sheetpass .rollrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,1.3fr);align-items:center;gap:10px}
  .sheetpass .rollrow>div:first-child{margin:0}
  .sheetpass .statusseg button{padding:0 4px}
  .tally dd{font-size:34px}
  .rmname{min-width:90px}
  .teacherpick{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
  .teacherpick label{grid-column:auto}
}
@media (min-width:1000px){
  .sheetwrap{display:grid;grid-template-columns:minmax(360px,420px) minmax(0,1fr);height:100dvh;overflow:hidden}
  .sheetwrap .sheetpass{max-width:760px}
  .page.single{max-width:none}
  .ttlist{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .roomlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .roomlist li:nth-child(2){border-top:0}
}
@media (min-width:1000px) and (pointer:fine){
  .sheetpass .statusseg button{min-height:36px}
  .sheetpass .rollrow{padding:6px 0}
}
@media (min-width:1000px){
  .reportwrap{display:grid;grid-template-columns:minmax(340px,400px) minmax(0,1fr);height:100dvh;overflow:hidden}
  .rpick,.rresult{overflow:auto;min-height:0}
  .rpick{padding-bottom:14px}
  .rresult{padding-top:4px}
}
/* ── ฟอร์มกิจกรรม กลุ่ม เกณฑ์ ─────────────────────────── */
.evform{gap:14px}
.evform fieldset,.pfgroups{margin:0;padding:0;border:0;display:grid;gap:8px;min-width:0}
.evform legend{padding:0;margin-bottom:6px;font-size:17px;font-weight:700}
.evform fieldset+fieldset{padding-top:14px;border-top:1px solid #E7E8EA}
.pfgroups legend{padding:0;margin-bottom:5px;font-size:14px;font-weight:700}
.evform textarea,.formstack textarea{min-height:80px;padding:10px 12px;line-height:1.4;font:inherit}
.evpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:8px}
.formstack small,.evform small{font-weight:500;color:var(--ink2)}
.seglabel{font-size:14px;font-weight:700}
.radios{display:flex;flex-wrap:wrap;gap:6px}
.radios label{display:block;margin:0;cursor:pointer}
.radios input{position:absolute;opacity:0;width:0;height:0}
.radios span{display:flex;align-items:center;min-height:44px;padding:0 13px;border:2px solid #7C8288;border-radius:var(--r-s);background:#fff;font-size:14.5px;font-weight:600}
.radios input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.radios input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.radios.small span{min-height:44px;padding:0 10px;font-size:13.5px}
.check{display:flex!important;align-items:center;gap:9px;min-height:44px;margin:0!important;cursor:pointer;font-weight:600!important;font-size:14.5px!important}
.check input[type=checkbox]{flex:none;width:22px;height:22px;accent-color:var(--ink)}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:0 8px;max-height:260px;overflow-y:auto;padding:2px}
.pickgrid.wide{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
select.multi{min-height:132px;padding:6px}
.impact{display:grid;gap:7px;padding:13px;border:2px solid var(--ink);border-radius:var(--r-m);scroll-margin-top:12px}
.impact h2{font-size:17px;font-weight:700}
.impact h3{margin-top:6px;font-size:15px;font-weight:700}
.impactbig{font-size:17px;line-height:1.35}
.impactbig b{font-size:26px;font-weight:700}
.impactwarn{padding:7px 10px;border-radius:var(--r-s);background:var(--soft);font-weight:600;font-size:14px}
.evchecked li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;padding:8px 0;border-top:1px solid #E7E8EA;font-size:14px}
.evchecked small{display:block;color:var(--ink2)}
.evbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.evlist li,.ledger li{flex-wrap:wrap;min-height:60px}
.evlist li>.grow,.ledger li>.grow{flex:1;min-width:0}
.grow{flex:1;min-width:0}
.evlist small,.ledger small{display:block;font-size:13.5px;font-weight:500;color:var(--ink2);overflow-wrap:anywhere}
.evlist b small,.ledger b small{display:inline;font-weight:500}
.evlist li.is-off,.ledger li.is-off{background:#FAFAFA;color:var(--ink3)}
.evlink{display:block;min-height:44px;text-decoration:none}
.evlink:hover b{text-decoration:underline}
.memberlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 10px;max-height:360px;overflow-y:auto}
.dangerrow{display:flex;justify-content:flex-end;margin:0 12px 12px}
.rollwhere{display:block;font-size:13px;font-weight:500;color:var(--ink2)}
.rollfind{margin:8px 0}
.ptschip{flex:none;padding:3px 9px;border-radius:var(--r-s);background:var(--soft);font-size:13.5px;font-weight:700;white-space:nowrap}
.stafflist span.ptschip{color:var(--ink);font-size:13.5px}
.ptschip.off{text-decoration:line-through;color:var(--ink3)}
.stafflist span.ptschip.st-absent{background:#FBE7E5;color:var(--absent)}
.stafflist span.ptschip.st-skip{background:var(--ink);color:#fff}
.stafflist span.ptschip.st-late{background:#F6EEDC;color:var(--late)}
.stafflist span.ptschip.st-leave{background:#E3EFF7;color:var(--leave)}
.rowact{flex:none;max-width:100%}
.rowact[open]{flex-basis:100%}
.rowact summary{list-style:none;cursor:pointer}
.rowact summary::-webkit-details-marker{display:none}
.rowact[open] summary{margin-bottom:8px}
.formstack .h2{margin:6px 0 2px}
.fold{padding:0}
.fold>summary{display:flex;align-items:center;min-height:52px;padding:0 15px;font-weight:700;cursor:pointer}
.fold>form{padding:0 15px 15px}
.rulehint{margin:0 14px 8px}
.ttlegacy{margin-top:10px}

/* ── งานกิจการ ───────────────────────────────────────── */
.hubbadge{flex:none;margin-left:auto;padding:2px 9px;border-radius:99px;background:var(--ink);color:#fff;font-size:13.5px;font-style:normal;font-weight:700}
.linklist a>.ic{flex:none;color:var(--ink3)}
.linklist a>span{min-width:0}

/* ── หน้าประตู ───────────────────────────────────────── */
.gatescan{margin:0 12px 8px;border-radius:var(--r-m);overflow:hidden;background:#000}
.gatescan video{display:block;width:100%}
.gatefind{display:grid;gap:4px}
.gatefind label{font-size:14px;font-weight:700}
.gateresult li button{display:block;width:100%;min-height:56px;padding:8px 15px;border-top:1px solid #E7E8EA}
.gateresult li:first-child button{border-top:0}
.gateresult b{display:block;font-weight:700}
.gateresult small{font-size:13.5px;color:var(--ink2)}
.gatewho{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.gatewho h2{font-size:24px;font-weight:700;line-height:1.2}
.gatewho p{font-size:15px;color:var(--ink2)}
.gatestat{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.gatestat div{padding:7px 10px;border-radius:var(--r-s);background:var(--soft)}
.gatestat dt{font-size:13px;color:var(--ink2)}
.gatestat dd{font-size:18px;font-weight:700}
.gateleave{margin:8px 0 0}
.gatetoday{margin-top:10px}
.gatetoday li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-top:1px solid #E7E8EA;font-size:14.5px}
.gateprofile{display:inline-block;margin-top:10px;padding:10px 0;font-weight:700}
.gaterules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 12px 8px}
.gaterule{min-height:84px;padding:10px 12px;background:var(--panel);border-radius:var(--r-m);text-align:left}
.gaterule:active{background:var(--btn);color:#fff}
.gaterule b{display:block;font-size:16px;font-weight:700;line-height:1.25}
.gaterule small{display:block;margin-top:3px;font-size:13px}
.gatelog li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 15px;border-top:1px solid #E7E8EA}
.gatelog li:first-child{border-top:0}
.gatelog b{display:block;font-weight:700}
.gatelog small{font-size:13.5px;color:var(--ink2)}

/* ── รายคน เคส ───────────────────────────────────────── */
.stuname{font-size:22px!important}
.stusum{display:grid;gap:6px}
.stubig{display:flex;align-items:center;gap:12px}
.stubig b{font-size:56px;font-weight:700;line-height:1}
.stubig b.hit{color:var(--absent)}
.stubig span{font-size:14px;line-height:1.35;color:var(--ink2)}
.stunext{font-size:14px;color:var(--ink2)}
.stutable{margin:0 12px 8px}
.parentstat{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.parentstat dt{font-size:13.5px;color:var(--ink2)}
.parentstat dd{font-size:26px;font-weight:700}
.parentpage{padding-bottom:24px}
.casetabs a{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:var(--r-s);text-decoration:none;font-weight:600;text-align:center}
.casetabs a.on{background:var(--btn);color:#fff}
.casehead{display:grid;gap:6px}
.casehead h2{font-size:19px;font-weight:700}
.casestate{justify-self:start;padding:2px 9px;border-radius:var(--r-s);background:var(--soft);font-size:13.5px;font-weight:700}
.casestate.s-open{background:var(--ink);color:#fff}
.casemeta{font-size:13.5px;color:var(--ink2)}
.caselinks{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.casesub{font-size:15px;font-weight:700;margin-bottom:4px}

/* ── วิเคราะห์ ───────────────────────────────────────── */
.page.ana{display:block;max-width:1120px}
.anatabs{display:flex;gap:4px;margin:0 12px 8px;padding:3px;overflow-x:auto;background:var(--panel);border-radius:var(--r-m);scrollbar-width:none}
.anatabs a{flex:none;display:flex;align-items:center;min-height:44px;padding:0 13px;border-radius:var(--r-s);text-decoration:none;font-weight:600;white-space:nowrap}
.anatabs a.on{background:var(--btn);color:#fff}
.anaform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:end}
.anaform label{display:block;margin-bottom:3px;font-size:14px;font-weight:700}
.anaform .btn{grid-column:1/-1;min-height:48px}
.anacover{display:grid;gap:6px;font-size:14.5px}
.anacover b{font-weight:700}
.anacover.low{outline:2px solid var(--ink);outline-offset:-2px}
.anameter{display:block;height:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.anameter i{display:block;height:100%;background:var(--ink)}
.anatotal{margin:10px 14px;font-size:15px}
.anatotal b{font-size:30px;font-weight:700}
.anagrid{display:grid;gap:0}
.anacard h2{font-size:16px;font-weight:700}
.anasub{font-size:13.5px;color:var(--ink2)}
.anaempty{padding:14px 0 6px;color:var(--ink2);font-weight:600}
.anabars{display:grid;gap:2px;margin-top:6px}
.anabars li{display:grid;grid-template-columns:minmax(84px,38%) minmax(0,1fr) auto;align-items:center;gap:8px;min-height:32px;border-radius:4px}
.anabars li:hover,.anabars li:focus-visible{background:var(--soft)}
.anal{font-size:13.5px;line-height:1.25;overflow-wrap:anywhere}
.anat{display:block;min-width:0}
.anat i{display:block;height:16px;min-width:2px;background:var(--ink);border-radius:0 4px 4px 0}
.anav{min-width:2.4em;text-align:right;font-size:14px;font-weight:700}
.anatrend{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:end;gap:2px;height:150px;margin-top:14px;padding-bottom:0;border-bottom:1px solid var(--line)}
.anatrend div{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;border-radius:4px 4px 0 0}
.anatrend div:hover,.anatrend div:focus-visible{background:var(--soft)}
.anatrend>div>i{display:block;width:min(100%,24px);background:var(--ink);border-radius:4px 4px 0 0}
.anatrend b{font-size:12.5px;font-weight:700;line-height:1.5}
.anatrend b.quiet{visibility:hidden}
.anaaxis{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:12.5px;color:var(--ink2)}
.anatable{margin-top:6px;font-size:14px}
.anatable summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600}
.anatip{position:fixed;z-index:30;max-width:260px;padding:6px 10px;border-radius:var(--r-s);background:var(--ink);color:#fff;font-size:13px;pointer-events:none}
.anatip b{display:block;font-size:15px;font-weight:700}
@media (min-width:1000px){
  .anagrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .anacard.wide{grid-column:1/-1}
  .anaform{grid-template-columns:repeat(4,minmax(0,1fr)) auto}
  .anaform .btn{grid-column:auto;width:auto;min-height:48px}
}

/* ── ตัวเลือกแบบค้นหาได้ ─────────────────────────────── */
.pk{min-width:0}
.pkfield{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:48px;padding:6px 10px 6px 12px;border:2px solid #7C8288;border-radius:var(--r-s);background:#fff;font-size:16px;text-align:left}
.pkfield[aria-expanded=true]{border-color:var(--ink)}
.pkval{min-width:0;overflow-wrap:anywhere}
.pkval.is-empty{color:var(--ink3)}
.pkic{display:block;flex:none;line-height:0}
.pkpanel{margin-top:4px;border:2px solid var(--ink);border-radius:var(--r-s);background:#fff;overflow:hidden}
.pk .pkq{border:0;border-bottom:1px solid var(--line);border-radius:0}
.pklist{max-height:min(46dvh,340px);overflow-y:auto;overscroll-behavior:contain}
.pkhead{position:sticky;top:0;z-index:1;padding:5px 12px;background:var(--soft);font-size:13px;font-weight:700;color:var(--ink2)}
.pkopt{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:48px;padding:6px 12px;border-top:1px solid #E7E8EA;cursor:pointer}
.pkopt:hover,.pkopt.active{background:var(--soft)}
.pkopt[aria-disabled=true]{color:var(--ink3);cursor:default}
.pkopt.pkall{font-weight:700;background:var(--soft)}
.pkt{min-width:0}
.pkt b{display:block;font-weight:600;line-height:1.3}
.pkopt[aria-selected=true] .pkt b{font-weight:700}
.pkt small{display:block;font-size:13px;line-height:1.3;color:var(--ink2)}
.pkt .pknote{color:var(--absent);font-weight:600}
.pkempty{padding:14px 12px;color:var(--ink2);font-weight:600}
.pkfoot{display:flex;justify-content:flex-end;padding:6px;border-top:1px solid var(--line)}
.pkchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.pkchips:empty{display:none}
.pkchips li{display:inline-flex;align-items:center;max-width:100%;min-height:44px;padding-left:11px;background:var(--soft);border-radius:var(--r-s);font-size:14.5px;font-weight:600;line-height:1.25}
.pkchips li span{min-width:0;overflow-wrap:anywhere}
.pkchips button{display:grid;place-items:center;flex:none;width:40px;height:44px}
.pkerr{margin-top:4px;font-size:14px;font-weight:600;color:var(--absent)}
.pastebox{margin-top:2px;font-size:14px}
.pastebox summary{display:flex;align-items:center;min-height:44px;font-weight:600;cursor:pointer}
.lvlgroups{display:grid;gap:8px}
[data-when-checker]>.pk+label,[data-when-aud]>.pk+label{display:block;margin-top:10px}
.slotrow:has(.pk.is-open){align-items:start}
.lvlgroup{padding:4px 10px 6px;background:var(--soft);border-radius:var(--r-s)}
.lvlall{font-weight:700!important}
.lvlgroup .pickgrid{max-height:none;overflow:visible}

/* ── ตั้งคะแนนในแถว ──────────────────────────────────── */
.ptsinput{flex:none;width:68px;min-height:44px;padding:0 4px;border:2px solid #7C8288;border-radius:var(--r-s);background:#fff;font-size:16px;font-weight:700;text-align:center}
.ptsinput:focus{border-color:var(--ink);outline:none}
.ptsinput.changed{border-color:var(--ink);background:var(--soft)}
.ptsbar{position:sticky;bottom:calc(76px + var(--safe-b));z-index:5;display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 12px 8px;padding:8px 8px 8px 14px;background:var(--ink);color:#fff;border-radius:var(--r-m);font-weight:600}
.ptsbar .btn{background:#fff;color:var(--btn-edge)}
@media (min-width:600px){.ptsbar{bottom:12px}}
.rowdelete{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;padding-top:8px;border-top:1px solid #E7E8EA}

/* ── ความพร้อม ────────────────────────────────────────── */
.hubtop{margin-top:2px}
.readysum{display:grid;gap:8px}
.readylist{overflow:hidden}
.readyitem{border-top:1px solid #E7E8EA}
.readyitem:first-child{border-top:0}
.readyitem summary{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 15px;cursor:pointer;list-style:none}
.readyitem summary::-webkit-details-marker{display:none}
.readyitem summary .ic{flex:none;color:var(--ink3);transition:transform .15s ease-out}
.readyitem[open] summary>.ic{transform:rotate(90deg)}
.readyitem summary b{display:block;font-weight:700;line-height:1.3}
.readyitem summary small{display:block;font-size:13.5px;color:var(--ink2)}
.readymark{display:flex;align-items:center;justify-content:center;flex:none;min-width:34px;height:34px;padding:0 6px;border-radius:var(--r-s);background:var(--ink);color:#fff;font-size:15px;font-weight:700}
.readyitem.is-ok .readymark{background:var(--soft);color:var(--ink)}
.readyitem.is-ok summary b{font-weight:600;color:var(--ink2)}
.readybody{display:grid;gap:8px;padding:0 15px 13px;font-size:14.5px}
.readybody>.btn{justify-self:start}
.readyrows{max-height:340px;overflow-y:auto;border-top:1px solid #E7E8EA}
.readyrows li{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;padding:5px 0;border-bottom:1px solid #E7E8EA}
.readyrows a,.readyrows span{display:block;min-width:0;text-decoration:none}
.readyrows a:hover b{text-decoration:underline}
.readyrows b{display:block;font-weight:600;line-height:1.3}
.readyrows small{display:block;font-size:13px;color:var(--ink2);overflow-wrap:anywhere}
.rosterform .btn{justify-self:start}
.remindstatus{display:grid;gap:4px;font-size:14.5px}
.remindstatus b{font-weight:700}
.cronline code{display:block;padding:7px 10px;border-radius:var(--r-s);background:var(--soft);font-size:13px;overflow-wrap:anywhere}
.anacover a{font-weight:700}

/* ── นำเข้าตารางสอน ───────────────────────────────────── */
.importstep{display:grid;gap:8px}
.importstep h2{font-size:17px;font-weight:700}
.importstep p{font-size:14.5px;color:var(--ink2)}
.filefield{padding:9px 10px;font-size:15px}
.importplan{margin:0 12px 8px;background:var(--panel)}
.importbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 12px 12px}
.ttimport{margin:0 14px 8px}
.ttimport a{font-weight:700}

/* ── ปุ่มกด ── ทุกปุ่มใช้ทรงเดียวกัน ตามภาพที่เจ้าของเลือก: ขอบ 2px กับขอบล่างหนา
   ขอบล่างวาดด้วย inset และกันที่ด้วย padding ปุ่มจึงไม่เปลี่ยนขนาดตอนกด ไม่ถูกตัดในแถบที่เลื่อนได้ และพื้นที่แตะไม่เลื่อน */
.btn,.iconbtn,.cardbar .back,.morebtn,.kidhd button,.pkchips button,.susbar,.gaterule,.seg button,.seg a,.periods button,.slots button,.periodbar button,.statusseg button,.presetlist a,.rangechips a,.casetabs a,.anatabs a,.roomchip span,.ttcell span,.ttplus,.tabs a,.tabs .navlogout button,.rail a:not(.railbrand),.rail .navlogout button{
  --edge:3px;--edge-c:var(--btn-edge);
  border:2px solid var(--edge-c);
  box-shadow:inset 0 calc(var(--edge) * -1) 0 var(--edge-c);
  padding-bottom:calc(var(--pb,0px) + var(--edge))!important;
}
.btn{--edge:5px}
.btn.small,.iconbtn,.cardbar .back,.kidhd button,.rail a:not(.railbrand),.rail .navlogout button{--edge:4px}
.periods button,.slots button,.periodbar button{--pt:3px;--pb:3px}
.presetlist a{--pt:8px;--pb:8px}
.susbar{--pt:6px;--pb:6px}
.gaterule{--pt:10px;--pb:10px}
.seg{gap:4px}
.periodbar,.anatabs{gap:4px}
.seg button,.seg a,.periodbar button,.slots button,.anatabs a,.casetabs a,.pkchips button{background:var(--panel)}
.statusseg button,.ttcell span,.pkchips button{--edge-c:var(--btn-edge-soft)}
.statusseg button.on{--edge-c:#0A4F27}
.statusseg button.on[data-s=late]{--edge-c:#4F3900}
.statusseg button.on[data-s=leave]{--edge-c:#0D4C75}
.statusseg button.on[data-s=absent]{--edge-c:#6F120C}
.statusseg button.on[data-s=skip]{--edge-c:#000}
.ttcell input:checked+span{--edge-c:var(--btn-edge)}
.tabs{gap:3px;padding-left:4px;padding-right:4px}
.tabs a,.tabs .navlogout button{min-width:0;overflow:hidden}
html.phonefit .tabs a,html.phonefit .tabs .navlogout button{font-size:11px;letter-spacing:-.01em}
.tabs a,.tabs .navlogout button{background:var(--panel);border-radius:var(--r-m);color:var(--btn-edge)}
.tabs a.on{background:var(--btn);color:#fff}
.tabs a.on em{background:#fff;color:var(--btn-edge)}
.rail a:not(.railbrand),.rail .navlogout button{--edge-c:#000;background:#2A2F35;color:#E7E8EA}
.rail .navlogout button{font-size:12px;white-space:nowrap}
.rail .navlogout button:hover,.rail a:not(.railbrand):not(.on):hover{background:#3A4047}
.rail a.on{--edge-c:var(--btn-edge);background:var(--btn);color:#fff}
.rail a.on em{background:#fff;color:var(--btn-edge)}
:is(.seg button,.seg a,.periods button,.slots button,.periodbar button,.statusseg button,.presetlist a,.rangechips a,.casetabs a,.anatabs a,.tabs a,.rail a:not(.railbrand)).on,.roomchip input:checked+span,.ttcell input:checked+span,:is(.btn,.iconbtn,.cardbar .back,.morebtn,.kidhd button,.pkchips button,.susbar,.gaterule,.seg button,.seg a,.periods button,.slots button,.periodbar button,.statusseg button,.presetlist a,.rangechips a,.casetabs a,.anatabs a,.tabs a,.tabs .navlogout button,.rail a:not(.railbrand),.rail .navlogout button):active:not(:disabled){
  box-shadow:inset 0 -1px 0 var(--edge-c);
  padding-top:calc(var(--pt,0px) + var(--edge) - 1px)!important;
  padding-bottom:calc(var(--pb,0px) + 1px)!important;
}
.roomchip input:active+span,.ttcell input:active+span{box-shadow:inset 0 -1px 0 var(--edge-c)}
input[type=file]::file-selector-button{min-height:42px;margin-right:10px;padding:0 12px 4px;border:2px solid var(--btn-edge);border-radius:var(--r-s);background:var(--panel);box-shadow:inset 0 -4px 0 var(--btn-edge);color:var(--btn-edge);font:700 14.5px "Bai Jamjuree","Noto Sans Thai",Tahoma,sans-serif;cursor:pointer}
input[type=file]:active::file-selector-button{padding:3px 12px 1px;box-shadow:inset 0 -1px 0 var(--btn-edge)}

/* ── มือถือที่ไม่สนใจ meta viewport ── zoom บนรากคูณหน่วย vh/dvh/vw ด้วย จึงต้องหารกลับ */
html.phonefit .shell,html.phonefit body.auth{min-height:calc(100dvh / var(--fit,1))}
html.phonefit dialog{max-height:calc(90dvh / var(--fit,1))}
html.phonefit #toast{max-width:calc(100vw / var(--fit,1) - 32px)}
html.phonefit .pklist{max-height:min(calc(46dvh / var(--fit,1)),340px)}

/* ── แอปและคู่มือครู ─────────────────────────────────── */
.installbox{margin:0 12px 8px}
.authbox .installbox,.guidehead .installbox{margin:0}
.installhint{padding:7px 10px;border-radius:var(--r-s);background:var(--soft);font-size:14px;font-weight:600}
.guidehead .installbox{margin-top:8px}
.guidehead .installbox .btn{width:auto}
.readyguide{justify-self:start;display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.guidepage{background:var(--ground)}
.guidebar{display:flex;flex-wrap:wrap;gap:8px;max-width:820px;margin:0 auto;padding:12px 14px 8px}
.guidebar .btn{min-height:44px}
.guide{display:grid;gap:14px;max-width:820px;margin:0 auto 24px;padding:20px 18px;background:var(--panel);border-radius:var(--r-m)}
.guidehead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.guidehead h1{font-size:30px;font-weight:700;line-height:1.15}
.guidehead p{margin-top:5px;color:var(--ink2);line-height:1.35}
.guideqr{flex:none;margin:0;text-align:center}
#gQr{display:grid;place-items:center;width:112px;height:112px}
#gQr canvas,#gQr img{display:block;width:100%!important;height:auto!important}
.guideqr figcaption{margin-top:3px;font-size:12.5px;font-weight:600}
.guideurl{padding:6px 10px;border-radius:var(--r-s);background:var(--soft);font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.guidesteps{display:grid;gap:12px}
.guidesteps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:11px}
.guidenum{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-s);background:var(--ink);color:#fff;font-size:21px;font-weight:700}
.guidesteps h2,.guidefoot h2{font-size:18px;font-weight:700;line-height:1.3}
.guidesteps p,.guidefoot p{margin-top:2px;font-size:15px;line-height:1.42}
.guidesteps b,.guidefoot b{font-weight:700}
.guidenote{color:var(--ink2);font-size:14px!important}
.guidefoot{display:grid;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
@media (min-width:640px){
  .guidefoot{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  #gQr{width:136px;height:136px}
}
@media print{
  @page{size:A4;margin:13mm}
  .guidepage{background:#fff}
  .guidebar,.installbox,#toast{display:none!important}
  .guide{max-width:none;margin:0;padding:0;border-radius:0;gap:12pt;font-size:12.5pt}
  .guidehead h1{font-size:27pt;line-height:1.4}
  .guidehead p{font-size:12.5pt}
  #gQr{width:42mm;height:42mm}
  .guideqr figcaption{font-size:10.5pt}
  .guideurl{background:none;padding:0;font-size:12pt}
  .guidesteps{gap:13pt}
  .guidesteps li{break-inside:avoid;grid-template-columns:32pt minmax(0,1fr);gap:10pt}
  .guidenum{width:32pt;height:32pt;font-size:17pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .guidesteps h2,.guidefoot h2{font-size:15pt}
  .guidesteps p,.guidefoot p{font-size:12.5pt;line-height:1.4}
  .guidenote{font-size:11.5pt!important}
  .guidefoot{grid-template-columns:repeat(2,minmax(0,1fr));gap:16pt;padding-top:12pt}
}

/* ── เอกสารพิมพ์ ─────────────────────────────────────── */
.printdoc{background:#fff}
.printbar{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px}
.printpage{max-width:720px;margin:0 auto;padding:0 18px 30px;display:grid;gap:12px;font-size:16px;line-height:1.6}
.printpage h1{font-size:22px;font-weight:700;text-align:center}
.printschool{text-align:center}
.printtable{width:100%;border-collapse:collapse;font-size:14.5px}
.printtable th,.printtable td{padding:5px 8px;border:1px solid #111;text-align:left}
.printtable .n{text-align:center}
.printlines{line-height:2.2;overflow:hidden;white-space:nowrap}
.printsign{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px;margin-top:22px;text-align:center}

@media print{
  html.phonefit{zoom:1!important}
  .printbar{display:none}
  body{background:#fff}
  .rail,.tabs,.rpick,.ractions,.flash{display:none!important}
  .shell,.content,.reportwrap{display:block;height:auto;overflow:visible}
  .rresult{padding:0}
  .printonly{display:block;font-weight:700;color:var(--ink)}
  .rtablewrap{overflow:visible;border-radius:0}
  .rtable{font-size:12px}
  .rtable tr{break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}