:root{--bg:#f6f8fb;--ink:#0f1c2e;--muted:#5b6b82;--navy:#0a2a6e;--blue:#0b5fff;--gold:#a87b0c;--line:#e3e9f2;--red:#c8202b;--sky:#eaf4fc}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:linear-gradient(180deg,#dcecf9,var(--sky) 40%,#fff);min-height:100vh;line-height:1.5}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
header.top{background:var(--navy);color:#fff;padding:18px 16px}
.wrap{max-width:1100px;margin:0 auto}
.top h1{font-size:clamp(1.15rem,3.6vw,1.7rem);line-height:1.15;letter-spacing:-.01em}
.top p{color:#f1d98a;font-weight:600;margin-top:2px}
.lead{padding:18px 16px 4px;color:var(--muted);max-width:1100px;margin:0 auto}
.mapbox{position:relative;max-width:1100px;margin:12px auto 0;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(10,42,110,.15);background:#cfe6f7}
.mapbox img{display:block;width:100%;height:auto}
.pin{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0}
.pin i{width:18px;height:18px;border-radius:50%;background:var(--red);border:3px solid #fff;box-shadow:0 0 0 2px var(--navy),0 3px 8px rgba(0,0,0,.35);transition:transform .15s}
.pin:hover i,.pin:focus-visible i,.pin.on i{transform:scale(1.35)}
.pin::after{content:attr(data-name);position:absolute;left:50%;bottom:100%;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:.78rem;padding:3px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.pin:hover::after,.pin:focus-visible::after{opacity:1}
.hint{padding:10px 16px;font-size:.9rem;color:var(--muted);max-width:1100px;margin:0 auto}
.list{max-width:1100px;margin:8px auto 40px;padding:0 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.item{text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer}
.item:hover{border-color:var(--blue)}
.item b{display:block}.item span{font-size:.85rem;color:var(--muted)}
.scrim{position:fixed;inset:0;background:rgba(8,20,48,.55);display:none;z-index:20}
.scrim.open{display:flex;align-items:flex-end;justify-content:center}
.sheet{background:#fff;width:100%;max-width:520px;max-height:92vh;overflow:auto;border-radius:20px 20px 0 0;animation:up .22s ease-out;position:relative}
.sheet img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#dbe8f5}
.sheet .body{padding:18px 18px 22px}
.sheet h2{font-size:1.3rem;line-height:1.2}
.sheet .type{color:var(--gold);font-weight:600;margin:2px 0 12px}
.sheet dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:.95rem;margin:12px 0}
.sheet dt{color:var(--muted)}.sheet dd{margin:0}
.sheet p.d{white-space:pre-line}
.x{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);font-size:1.4rem;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.btn{display:inline-block;background:var(--blue);color:#fff;border:0;border-radius:10px;padding:12px 20px;font-weight:600;text-decoration:none;cursor:pointer;text-align:center}
.btn:hover{background:#0846c4}.btn.alt{background:#fff;color:var(--blue);border:1px solid var(--blue)}.btn.del{background:#fff;color:var(--red);border:1px solid var(--red)}
.btn[aria-disabled=true]{background:#aab6c8;pointer-events:none}
.sheet .btn{display:block;margin-top:16px}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:700px){.scrim.open{align-items:center}.sheet{border-radius:20px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* admin */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;max-width:1100px;margin:16px auto}
.login{max-width:380px;margin:60px auto}
label{display:block;font-size:.85rem;color:var(--muted);margin:10px 0 3px}
input,textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px;background:#fff}
textarea{min-height:90px;resize:vertical}
label.chk{display:flex;gap:8px;align-items:center;color:var(--ink);font-size:.95rem}.chk input{width:auto}
.cols{display:grid;gap:16px;max-width:1100px;margin:0 auto;padding:0 12px}
@media(min-width:900px){.cols{grid-template-columns:1.3fr 1fr}}
.bar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:10px 12px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;z-index:30}
.msg{font-size:.9rem;color:var(--muted)}
.ed{cursor:crosshair}
.pin.sel i{background:var(--gold)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumb{width:100%;max-height:150px;object-fit:cover;border-radius:8px;margin-top:6px}
/* animated public pins */
.mk{position:absolute;width:44px;height:56px;transform:translate(-50%,-100%);border:0;background:none;padding:0;cursor:pointer;opacity:0;z-index:5}
.mk::before,.mk::after{content:"";position:absolute;left:50%;bottom:-3px;width:20px;height:9px;margin-left:-10px;border:2px solid var(--red);border-radius:50%;opacity:0;pointer-events:none}
.go .mk{opacity:1;animation:drop .95s var(--d,0s) cubic-bezier(.3,.7,.4,1) backwards}
.go .mk::before{animation:ripple 2.6s calc(var(--d,0s) + .8s) ease-out infinite}
.go .mk::after{animation:ripple 2.6s calc(var(--d,0s) + 2.1s) ease-out infinite}
.mk .pn{position:absolute;inset:0;transform-origin:50% 100%;transition:transform .25s cubic-bezier(.3,1.6,.5,1);animation:bob 2.8s var(--d,0s) ease-in-out infinite alternate}
.mk svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 5px rgba(10,35,88,.45))}
.mk:hover,.mk:focus-visible,.mk.on{z-index:40}
.mk:hover .pn,.mk:focus-visible .pn,.mk.on .pn{transform:scale(1.3) translateY(-4px);animation-play-state:paused}
.mk[data-name]:hover .tag,.mk:focus-visible .tag,.mk.on .tag{opacity:1;transform:translate(-50%,0)}
.tag{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%,6px);background:var(--navy);color:#fff;font-size:.8rem;font-weight:600;padding:4px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .2s;box-shadow:0 6px 16px rgba(10,35,88,.35)}
@keyframes drop{0%{transform:translate(-50%,-100%) translateY(-260px);opacity:0}55%{opacity:1}62%{transform:translate(-50%,-100%) translateY(0)}78%{transform:translate(-50%,-100%) translateY(-16px)}90%{transform:translate(-50%,-100%) translateY(0)}95%{transform:translate(-50%,-100%) translateY(-4px)}100%{transform:translate(-50%,-100%)}}
@keyframes ripple{0%{transform:scale(.4);opacity:.85}100%{transform:scale(3.4);opacity:0}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-5px)}}
/* responsive + calmer pins */
.mk{--s:clamp(24px,3vw,36px);width:var(--s);height:calc(var(--s)*1.27)}
.mk::before,.mk::after{width:calc(var(--s)*.55);height:calc(var(--s)*.2);margin-left:calc(var(--s)*-.275);bottom:-2px;border:1.5px solid rgba(200,32,43,.5)}
.go .mk::before{animation:ripple 4.8s calc(var(--d,0s) + .9s) ease-out infinite}
.go .mk::after{display:none}
@keyframes ripple{0%{transform:scale(.5);opacity:.55}100%{transform:scale(2.4);opacity:0}}
.mk .pn{animation-duration:4.2s}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-3px)}}
.mk svg{filter:drop-shadow(0 3px 3px rgba(10,35,88,.4))}
.mk:hover .pn,.mk:focus-visible .pn,.mk.on .pn{transform:scale(1.2) translateY(-3px)}
.tag{font-size:.74rem;padding:3px 8px;border-radius:6px}
@keyframes drop{0%{transform:translate(-50%,-100%) translateY(-140px);opacity:0}55%{opacity:1}65%{transform:translate(-50%,-100%) translateY(0)}82%{transform:translate(-50%,-100%) translateY(-7px)}100%{transform:translate(-50%,-100%)}}
/* popup always in front + hover detail card */
.scrim{z-index:1000}
.mapbox{isolation:isolate}
.tag{display:none}
.hc{--tx:-50%;position:absolute;left:50%;bottom:100%;transform:translate(var(--tx),8px) scale(.96);padding-bottom:12px;opacity:0;pointer-events:none;transition:opacity .18s,transform .2s;z-index:60;cursor:pointer;text-align:left;display:block;font-weight:400}
.hc.b{bottom:auto;top:100%;padding:12px 0 0;transform:translate(var(--tx),-8px) scale(.96)}
.hc.l{--tx:0;left:-8px}.hc.r{--tx:0;left:auto;right:-8px}
.hc .in{display:block;width:230px;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 40px rgba(10,35,88,.35)}
.hc img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#dbe8f5}
.hc .tx{display:block;padding:10px 12px 12px}
.hc b{display:block;color:var(--navy);font-size:.95rem;line-height:1.2}
.hc em{display:block;font-style:normal;color:var(--gold);font-weight:600;font-size:.8rem;margin-top:1px}
.hc small{display:block;color:var(--muted);font-size:.8rem;margin-top:4px;line-height:1.35}
.hc .hint2{color:var(--blue);font-weight:600;margin-top:8px}
.mk:hover .hc,.mk:focus-visible .hc{opacity:1;pointer-events:auto;transform:translate(var(--tx),0) scale(1)}
@media(hover:none){.hc{display:none}}