:root{
  --paper:#F5F1E4; --paper2:#FFFCF3; --ink:#2A2420; --soft:#6B6156;
  --line:#DCD4BF; --seal:#B01F24; --seal-d:#8A1418; --ok:#3F7A4C; --warn:#A8790B;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:#E7E1D0;font-family:'Sarabun',sans-serif;color:var(--ink);}
button,input,select,textarea{font-family:'Sarabun',sans-serif;}
h1,h2,h3{font-family:'Chonburi',serif;font-weight:400;}

/* ---------- player shell ---------- */
#app{width:100%;max-width:430px;min-height:100vh;margin:0 auto;background:var(--paper);
  display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,.12);}
.appbar{padding:13px 17px 11px;background:var(--paper2);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;}
.appbar .logo{font-family:'Chonburi',serif;font-size:15.5px;line-height:1.15;}
.appbar .logo small{display:block;font-family:'Sarabun';font-size:10px;color:var(--soft);font-weight:400;margin-top:2px;}
.spacer{flex:1;}
.iconbtn{width:35px;height:35px;border-radius:10px;border:1px solid var(--line);background:transparent;
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:17px;cursor:pointer;}
.body{flex:1;padding:18px;padding-bottom:80px;}
.screen{display:none;}
.screen.on{display:block;animation:fade .22s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h2.tt{font-size:21px;margin:0 0 6px;}
p.sub{font-size:13px;color:var(--soft);margin:0 0 18px;line-height:1.6;}

.card{background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:15px;margin-bottom:13px;}
.card h3{font-family:'Sarabun';font-size:14px;margin:0 0 8px;font-weight:600;}
.card ul{margin:0;padding-left:18px;font-size:12.5px;color:var(--soft);line-height:1.8;}

.check{display:flex;gap:11px;align-items:flex-start;background:var(--paper2);border:1px solid var(--line);
  border-radius:12px;padding:13px 14px;margin-bottom:10px;cursor:pointer;}
.box{width:21px;height:21px;border-radius:6px;border:2px solid var(--line);flex-shrink:0;display:flex;
  align-items:center;justify-content:center;margin-top:1px;font-size:13px;color:transparent;transition:.15s;}
.check.sel .box{background:var(--seal);border-color:var(--seal);color:#fff;}
.check .tx{font-size:12.8px;line-height:1.55;}
.check .tx b{font-weight:600;font-size:13.2px;display:block;margin-bottom:2px;}
.check .tx span{color:var(--soft);}

.btn{width:100%;padding:15px;border-radius:13px;border:none;background:var(--seal);color:#fff;
  font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn:disabled{background:#CFC7B4;color:#8C8474;cursor:not-allowed;}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink);}
.btn.small{padding:11px;font-size:13.5px;}

.progress-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.progress-head .n{font-family:'Chonburi',serif;font-size:26px;color:var(--seal);}
.progress-head .l{font-size:12.5px;color:var(--soft);}
.bar{height:9px;background:#E3DCC8;border-radius:6px;overflow:hidden;margin-bottom:20px;}
.bar i{display:block;height:100%;background:var(--seal);border-radius:6px;transition:width .5s ease;}

.stop{display:flex;gap:13px;}
.rail{width:36px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;}
.node{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;border:2px solid var(--line);background:var(--paper2);color:#B3AA97;}
.node.done{background:var(--seal);border-color:var(--seal);color:#fff;}
.node.now{border-color:var(--seal);color:var(--seal);box-shadow:0 0 0 4px rgba(176,31,36,.13);}
.link{flex:1;width:2px;background:var(--line);min-height:24px;margin:3px 0;}
.link.done{background:var(--seal);}
.stopcard{flex:1;background:var(--paper2);border:1px solid var(--line);border-radius:13px;padding:12px 14px;margin-bottom:12px;}
.stopcard.locked{opacity:.55;}
.stopcard.now{border-color:var(--seal);cursor:pointer;}
.stopcard .nm{font-size:14.5px;font-weight:600;line-height:1.35;}
.stopcard .ms{font-size:12px;color:var(--soft);margin-top:3px;line-height:1.5;}
.stopcard .meta{display:flex;gap:12px;margin-top:8px;font-size:11.5px;color:var(--soft);}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:#EFE8D6;color:var(--soft);margin-top:8px;}
.pill.ok{background:#F3DEDE;color:var(--seal-d);}
.pill.q{background:#FAEEDA;color:#7A4A08;}

.gps{background:var(--paper2);border:1px solid var(--line);border-radius:16px;padding:24px 18px;text-align:center;margin-bottom:15px;}
.radar{width:92px;height:92px;margin:0 auto 13px;position:relative;display:flex;align-items:center;justify-content:center;}
.radar .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--seal);opacity:0;}
.radar.scan .ring{animation:pulse 1.6s infinite;}
.radar.scan .ring:nth-child(2){animation-delay:.55s;}
@keyframes pulse{0%{transform:scale(.4);opacity:.75}100%{transform:scale(1);opacity:0}}
.radar i{font-size:36px;color:var(--seal);z-index:2;}
.gps .st{font-size:14.5px;font-weight:600;}
.gps .ds{font-size:12.5px;color:var(--soft);margin-top:5px;line-height:1.6;}
.helpbox{border:1px dashed #C9BFA4;border-radius:12px;padding:13px 14px;margin-top:14px;}
.helpbox p{margin:0 0 10px;font-size:12.3px;color:var(--soft);line-height:1.6;}

.mhead{background:var(--seal);color:#fff;border-radius:16px;padding:16px 17px;margin-bottom:15px;}
.mhead .tag{font-size:11px;opacity:.85;margin-bottom:5px;}
.mhead h3{font-size:19px;margin:0 0 9px;line-height:1.3;}
.mhead .mm{display:flex;gap:14px;font-size:11.5px;opacity:.9;}
.taskbox{background:var(--paper2);border:1px solid var(--line);border-radius:13px;padding:14px;margin-bottom:15px;}
.taskbox .lb{font-size:11px;font-weight:700;color:var(--seal);margin-bottom:5px;}
.taskbox .tx{font-size:14.5px;font-weight:600;line-height:1.5;}
.shot{border:2px dashed var(--line);border-radius:16px;min-height:210px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;color:var(--soft);font-size:13px;cursor:pointer;
  overflow:hidden;position:relative;background:var(--paper2);}
.shot i{font-size:32px;}
.shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.retake{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:11.5px;padding:6px 11px;border-radius:20px;z-index:3;}
.err{color:var(--seal);font-size:12.3px;margin:8px 0 0;display:none;}

.reveal{text-align:center;padding:22px 0 0;}
.stampimg{width:252px;height:252px;margin:0 auto;border-radius:50%;overflow:hidden;background:var(--paper2);}
.stampimg img{width:100%;height:100%;object-fit:cover;}
.stampimg.hit{animation:hit .55s cubic-bezier(.2,1.5,.4,1);}
@keyframes hit{0%{transform:scale(2.4) rotate(-13deg);opacity:0}55%{transform:scale(.93) rotate(2deg);opacity:1}100%{transform:none;opacity:1}}

.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pcell{background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:11px;text-align:center;position:relative;}
.pcell img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;}
.pcell .ph{width:100%;aspect-ratio:1;border-radius:10px;background:#EAE3D1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;color:#B3AA97;font-size:11.5px;}
.pcell .cn{font-size:11.8px;font-weight:600;margin-top:8px;line-height:1.35;}
.pcell .cd{font-size:10.5px;color:var(--soft);margin-top:3px;}
.pnum{position:absolute;top:6px;left:8px;font-size:10.5px;font-weight:700;color:var(--soft);z-index:2;}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.strip img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;}
.strip .e{width:100%;aspect-ratio:1;border-radius:9px;background:#EAE3D1;}

.tabbar{position:sticky;bottom:0;background:var(--paper2);border-top:1px solid var(--line);display:flex;padding:8px 0 10px;z-index:20;}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--soft);
  cursor:pointer;padding:4px 0;background:none;border:none;}
.tab i{font-size:20px;}
.tab.on{color:var(--seal);font-weight:600;}

.mask{position:fixed;inset:0;background:rgba(30,25,20,.5);display:none;align-items:flex-end;justify-content:center;z-index:60;}
.mask.on{display:flex;}
.sheet{width:100%;max-width:430px;background:var(--paper);border-radius:20px 20px 0 0;padding:20px 18px 26px;
  animation:up .25s ease;max-height:88vh;overflow:auto;}
@keyframes up{from{transform:translateY(50px)}to{transform:none}}
.sheet h3{font-size:18px;margin:0 0 6px;}
.sheet p{font-size:12.8px;color:var(--soft);line-height:1.65;margin:0 0 15px;}
.field{width:100%;padding:12px;border-radius:11px;border:1px solid var(--line);background:var(--paper2);font-size:14px;margin-bottom:11px;}
.note{font-size:11.5px;color:var(--soft);text-align:center;line-height:1.6;margin-top:16px;}
.divider{height:1px;background:var(--line);margin:20px 0;}
.sechead{font-size:12px;font-weight:600;color:var(--soft);margin:0 0 10px;}
.banner{background:#FAEEDA;border:1px solid #E8CE96;color:#7A4A08;border-radius:11px;padding:10px 12px;
  font-size:12.2px;line-height:1.55;margin-bottom:13px;display:flex;gap:8px;align-items:flex-start;}
.banner.ok{background:#E6F0E4;border-color:#B9D3B4;color:#2F5B36;}

/* ---------- admin ---------- */
.adm{max-width:1080px;margin:0 auto;padding:0 20px 60px;}
.admbar{background:var(--paper2);border-bottom:1px solid var(--line);padding:14px 0;margin-bottom:22px;position:sticky;top:0;z-index:30;}
.admbar .in{max-width:1080px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.admbar .logo{font-family:'Chonburi',serif;font-size:17px;}
.admbar .logo small{display:block;font-family:'Sarabun';font-size:10.5px;color:var(--soft);margin-top:2px;}
.navtabs{display:flex;gap:4px;flex-wrap:wrap;}
.navtab{padding:8px 14px;border-radius:9px;border:1px solid transparent;background:transparent;font-size:13.5px;color:var(--soft);cursor:pointer;}
.navtab.on{background:var(--seal);color:#fff;font-weight:600;}
body.admin{background:var(--paper);}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin-bottom:22px;}
.kpi{background:var(--paper2);border:1px solid var(--line);border-radius:13px;padding:14px 15px;}
.kpi .lb{font-size:11.5px;color:var(--soft);}
.kpi .vl{font-family:'Chonburi',serif;font-size:27px;color:var(--seal);margin-top:4px;line-height:1;}
.kpi .tg{font-size:11px;color:var(--soft);margin-top:5px;}
.panel{background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:18px;}
.panel h3{font-family:'Sarabun';font-size:14.5px;font-weight:600;margin:0 0 4px;}
.panel .ph{font-size:12px;color:var(--soft);margin:0 0 14px;line-height:1.6;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;font-weight:600;font-size:11.5px;color:var(--soft);padding:8px 10px;border-bottom:1px solid var(--line);}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.tbtn{padding:6px 11px;border-radius:8px;border:1px solid var(--line);background:transparent;font-size:12px;cursor:pointer;color:var(--ink);}
.tbtn.solid{background:var(--seal);border-color:var(--seal);color:#fff;}
.funnel-row{display:flex;align-items:center;gap:12px;margin-bottom:11px;}
.funnel-row .fl{width:120px;font-size:12.5px;flex-shrink:0;}
.funnel-row .fb{flex:1;height:24px;background:#EDE6D5;border-radius:6px;overflow:hidden;}
.funnel-row .fb i{display:block;height:100%;background:var(--seal);}
.funnel-row .fv{width:96px;text-align:right;font-size:12.5px;color:var(--soft);flex-shrink:0;}
.hours{display:flex;align-items:flex-end;gap:3px;height:110px;margin-top:6px;}
.hours .hb{flex:1;background:var(--seal);border-radius:3px 3px 0 0;min-height:2px;position:relative;}
.hours .hl{display:flex;gap:3px;margin-top:6px;}
.hours .hl span{flex:1;text-align:center;font-size:9.5px;color:var(--soft);}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
.gal figure{margin:0;}
.gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;}
.gal figcaption{font-size:10.5px;color:var(--soft);margin-top:5px;line-height:1.4;}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;}
label.fl{display:block;font-size:11.5px;color:var(--soft);margin:0 0 5px;}
.mini{width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:var(--paper);font-size:13px;margin-bottom:11px;}
.badge{font-size:11px;padding:3px 9px;border-radius:20px;background:#EFE8D6;color:var(--soft);}
.badge.ok{background:#E6F0E4;color:#2F5B36;}
.badge.warn{background:#FAEEDA;color:#7A4A08;}
.badge.seal{background:#F3DEDE;color:var(--seal-d);}
.empty{text-align:center;padding:34px 16px;color:var(--soft);font-size:13px;line-height:1.7;}
.empty i{font-size:30px;display:block;margin-bottom:8px;opacity:.5;}

/* ================= v2: สีสัน · ประทับตรา · แผนที่ ================= */
.paint{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:
   radial-gradient(320px 220px at 8% 4%, rgba(176,31,36,.10), transparent 62%),
   radial-gradient(300px 220px at 96% 14%, rgba(168,121,11,.13), transparent 62%),
   radial-gradient(340px 240px at 6% 62%, rgba(63,122,76,.10), transparent 62%),
   radial-gradient(300px 220px at 98% 82%, rgba(176,23,94,.09), transparent 62%);}
#app{position:relative;z-index:1;}
.appbar{background:linear-gradient(120deg,#FFFCF3,#FDF4E7 55%,#FBEFE9);}

.colorbar{display:flex;height:7px;border-radius:5px;overflow:hidden;}
.colorbar i{flex:1;}
.colorbar.tall{height:12px;border-radius:7px;}

/* login */
.hero{position:relative;text-align:center;padding:8px 0 4px;margin-bottom:16px;}
.hero .stackwrap{position:relative;height:118px;margin-bottom:12px;}
.hero .st{position:absolute;left:50%;top:0;width:96px;height:96px;border-radius:50%;overflow:hidden;
  border:3px solid var(--paper2);box-shadow:0 5px 14px rgba(60,40,20,.16);}
.hero .st img{width:100%;height:100%;object-fit:cover;}
.hero h1{font-size:24px;margin:0 0 5px;letter-spacing:.3px;}
.hero p{font-size:12.5px;color:var(--soft);margin:0;line-height:1.55;}

.pinrow{display:flex;gap:11px;justify-content:center;margin:6px 0 4px;}
.pinbox{width:58px;height:68px;border-radius:14px;border:2px solid var(--line);background:var(--paper2);
  display:flex;align-items:center;justify-content:center;font-family:'Chonburi',serif;font-size:28px;color:var(--ink);
  transition:.16s;}
.pinbox.fill{border-color:var(--seal);background:#FFF7F1;}
.pinbox.act{border-color:var(--seal);box-shadow:0 0 0 4px rgba(176,31,36,.13);}
#pinInput{position:absolute;opacity:0;pointer-events:none;}
.pinhit{cursor:text;}

.mini-consent{background:var(--paper2);border:1px solid var(--line);border-radius:13px;padding:13px 14px;margin-bottom:11px;}
.mini-consent .hd{font-size:12.5px;line-height:1.6;color:var(--soft);}
.linkbtn{background:none;border:none;color:var(--seal);font-size:12.5px;font-weight:600;padding:0;cursor:pointer;text-decoration:underline;}

/* route colour */
.stopcard{border-left:5px solid var(--line);}
.stopcard.now{border-left-color:var(--sc);}
.stopcard.done{border-left-color:var(--sc);}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;margin-top:8px;}

/* stamping */
.press{position:relative;width:100%;padding:0;border:none;background:transparent;cursor:pointer;}
.presspad{border-radius:18px;padding:20px 16px;text-align:center;color:#fff;position:relative;overflow:hidden;
  transition:transform .12s ease, filter .12s ease;}
.press:active .presspad{transform:scale(.975);}
.presspad .big{font-family:'Chonburi',serif;font-size:19px;}
.presspad .sm{font-size:12px;opacity:.9;margin-top:4px;}
.presspad .fillbar{position:absolute;left:0;bottom:0;height:5px;width:0%;background:rgba(255,255,255,.85);transition:width .08s linear;}
.presspad.armed{filter:brightness(1.1);}
.stampzone{position:relative;height:250px;display:flex;align-items:center;justify-content:center;margin-bottom:6px;}
.ghost-stamp{width:212px;height:212px;border-radius:50%;overflow:hidden;filter:grayscale(1);opacity:.22;}
.ghost-stamp img{width:100%;height:100%;object-fit:cover;}
.ring-guide{position:absolute;width:228px;height:228px;border-radius:50%;border:2px dashed var(--line);}
.press-live{position:absolute;width:212px;height:212px;border-radius:50%;overflow:hidden;
  clip-path:inset(0 0 100% 0);transition:clip-path .08s linear;}
.press-live img{width:100%;height:100%;object-fit:cover;}
.inkburst{position:absolute;width:212px;height:212px;border-radius:50%;background:var(--seal);opacity:0;pointer-events:none;}
.inkburst.go{animation:ink .5s ease-out;}
@keyframes ink{0%{opacity:.28;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
.stampimg.hit{animation:hit2 .6s cubic-bezier(.18,1.6,.36,1);}
@keyframes hit2{0%{transform:scale(2.6) rotate(-14deg);opacity:0;filter:blur(2px)}
  50%{transform:scale(.9) rotate(3deg);opacity:1;filter:blur(0)}
  70%{transform:scale(1.04) rotate(-1deg)}100%{transform:none}}
.shake{animation:shk .42s ease;}
@keyframes shk{0%,100%{transform:none}25%{transform:translateY(3px) scale(.995)}60%{transform:translateY(-2px)}}

/* passport greyed stamps */
.pcell img.dim{filter:grayscale(1);opacity:.24;}
.pcell .lockp{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);font-size:10.5px;color:var(--soft);
  background:rgba(255,252,243,.9);padding:4px 10px;border-radius:20px;border:1px solid var(--line);}
.pcell{border-top:4px solid var(--sc);}

/* map */
.mapwrap{border-radius:15px;overflow:hidden;border:1px solid var(--line);background:var(--paper2);height:420px;}
.mapwrap iframe{width:100%;height:100%;border:0;display:block;}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
.legend .li{display:flex;align-items:center;gap:8px;font-size:11.8px;background:var(--paper2);
  border:1px solid var(--line);border-radius:10px;padding:8px 10px;}
.legend .li b{width:9px;height:9px;border-radius:50%;flex-shrink:0;}

/* ================= v3 ================= */
.mycode{display:flex;align-items:center;gap:10px;background:var(--paper2);border:1px solid var(--line);
  border-radius:13px;padding:10px 14px;margin-bottom:14px;}
.mycode .lb{font-size:11.5px;color:var(--soft);}
.mycode .vl{font-family:'Chonburi',serif;font-size:20px;letter-spacing:4px;color:var(--seal);line-height:1;}
.mycode .rt{margin-left:auto;text-align:right;font-size:11px;color:var(--soft);line-height:1.45;}

.distline{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:600;}
.distline i{font-size:14px;}
.distline.near{color:var(--ok);}
.distline.far{color:var(--soft);font-weight:500;}

.foot{text-align:center;font-size:10.5px;color:var(--soft);line-height:1.7;padding:18px 16px 8px;
  border-top:1px solid var(--line);margin-top:26px;}
.foot b{font-weight:600;color:var(--ink);}
.admfoot{text-align:center;font-size:11px;color:var(--soft);line-height:1.7;padding:24px 0 10px;border-top:1px solid var(--line);margin-top:28px;}

.livedot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px;
  animation:blink 1.8s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

.seqtbl td{font-variant-numeric:tabular-nums;}
.seqno{display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--seal);color:#fff;
  align-items:center;justify-content:center;font-size:11.5px;font-weight:700;}
.seqno.pale{background:#E3DCC8;color:var(--soft);}
.who{display:flex;flex-wrap:wrap;gap:5px;}
.who span{font-size:11px;padding:3px 8px;border-radius:7px;background:#EFE8D6;color:var(--soft);font-variant-numeric:tabular-nums;}
.who span.has{background:#E6F0E4;color:#2F5B36;font-weight:600;}
.savedchip{font-size:12px;color:var(--ok);margin-left:10px;display:none;}

/* ================= v4 ================= */
.foot .ver{display:block;margin-top:6px;font-size:10px;color:#A99F8C;letter-spacing:.6px;}
.stopcard.waiting{opacity:.85;}
.chip.off{background:#EDE6D5;color:#9A907E;}
.chip.live{animation:livepulse 1.9s infinite;}
@keyframes livepulse{0%,100%{transform:none}50%{transform:scale(1.035)}}
.admver{font-size:10.5px;color:#A99F8C;letter-spacing:.5px;}
.photolink{background:none;border:none;padding:0;font:inherit;color:var(--seal);cursor:pointer;text-decoration:underline;font-size:12.5px;}
.lightbox{position:fixed;inset:0;background:rgba(30,25,20,.82);display:none;align-items:center;justify-content:center;z-index:80;padding:24px;}
.lightbox.on{display:flex;}
.lbin{background:var(--paper);border-radius:16px;padding:18px;max-width:860px;width:100%;max-height:88vh;overflow:auto;}
.lbin h4{font-family:'Chonburi',serif;font-weight:400;font-size:17px;margin:0 0 4px;}
.lbin p.s{font-size:12px;color:var(--soft);margin:0 0 14px;}
.lbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.lbgrid figure{margin:0;}
.lbgrid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;border:1px solid var(--line);}
.lbgrid figcaption{font-size:11px;color:var(--soft);margin-top:5px;font-variant-numeric:tabular-nums;}