:root{--wine:#5b1a2b;--gold:#c8962b;--cream:#faf6ee;--ink:#2a2226;--line:#e6dcc8}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--cream);overscroll-behavior:none}
body{display:flex;flex-direction:row-reverse}
h1,h2{font-family:Georgia,"Times New Roman",serif;color:var(--wine);margin:0}
#map{flex:1;position:relative;overflow:hidden;touch-action:none;cursor:grab;background:#d9d4c8}
#map.drag{cursor:grabbing}
.tiles img{position:absolute;width:256px;height:256px;user-select:none;-webkit-user-drag:none}
#bar{position:absolute;z-index:6;top:calc(12px + env(safe-area-inset-top));left:12px;right:68px;display:flex;gap:8px;flex-wrap:wrap;max-width:560px}
#q{flex:1;min-width:160px;padding:11px 14px;border:0;border-radius:24px;font-size:15px;box-shadow:0 2px 10px #0004;background:#fff}
#layers{display:flex;background:#fff;border-radius:24px;box-shadow:0 2px 10px #0004;overflow:hidden}
#layers button{border:0;background:none;padding:0 14px;font-size:13px;cursor:pointer;color:var(--ink)}
#layers button.on{background:var(--wine);color:#fff}
#ctl{position:absolute;z-index:6;top:calc(12px + env(safe-area-inset-top));right:12px;display:flex;flex-direction:column;gap:6px}
#ctl button{width:42px;height:42px;font-size:20px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px #0004;cursor:pointer;color:var(--wine)}
#toast{position:absolute;z-index:6;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:70%;background:#2a2226e6;color:#fff;font-size:12px;padding:6px 10px;border-radius:8px;display:none}
.attr{position:absolute;right:0;bottom:0;z-index:5;background:#fffc;font-size:10px;padding:1px 6px}
.mk{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--wine);border:2px solid #fff;box-shadow:0 2px 6px #0008;display:grid;place-items:center;cursor:pointer;padding:0}
.mk svg{width:16px;height:16px}
.mk.main{width:46px;height:46px;margin:-23px 0 0 -23px;background:var(--gold);z-index:3}
.mk.main svg{width:24px;height:24px}.mk.main path{stroke:var(--wine)}
.mk.main::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--gold);animation:p 2s infinite;pointer-events:none}
@keyframes p{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.4);opacity:0}}
.mk.active{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--wine)}
#panel{width:400px;height:100%;background:var(--cream);overflow:auto;border-right:1px solid var(--line);z-index:10}
#handle{display:none}
#listview,#detail{padding:18px 18px 28px}
h1{font-size:22px}.sub{margin:4px 0 12px;font-size:13px;color:#6b5a60}
#chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
#chips button{border:1px solid var(--line);background:#fff;border-radius:16px;padding:6px 12px;font-size:13px;cursor:pointer}
#chips button.on{background:var(--wine);color:#fff;border-color:var(--wine)}
#list{list-style:none;margin:0;padding:0}
#list li{padding:11px 4px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;gap:10px;align-items:center}
#list li:hover{background:#f1e9d8}
#list b{font-size:14px;font-weight:600;display:block}#list small{color:#76666b}
#list .dot{width:10px;height:10px;border-radius:50%;background:var(--wine);flex:none}
#list li.main .dot{background:var(--gold);width:14px;height:14px}
#list li.nopos{opacity:.55}
.foot{font-size:12px;color:#76666b;margin-top:14px}
#detail h2{font-size:21px;line-height:1.25;margin:8px 0}
.back{border:0;background:none;color:var(--wine);font-size:14px;cursor:pointer;padding:0}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.tags span{background:#efe3c4;border-radius:12px;padding:3px 10px;font-size:12px}
#detail ul{padding-left:18px;line-height:1.5;font-size:14px}
#detail p{font-size:14px;line-height:1.55}
.note{font-size:12px;color:#8a5a00;background:#fff3d6;padding:7px 9px;border-radius:6px}
.btn{display:inline-block;margin:6px 8px 0 0;padding:9px 14px;border-radius:20px;background:var(--wine);color:#fff;text-decoration:none;font-size:13px}
@media(max-width:760px){
 body{display:block}
 #map{position:fixed;inset:0}
 #bar{right:62px}
 #panel{position:fixed;left:0;right:0;bottom:0;width:100%;height:46vh;border-radius:18px 18px 0 0;box-shadow:0 -4px 18px #0005;border:0;transition:height .25s;padding-bottom:env(safe-area-inset-bottom)}
 #panel.peek{height:72px;overflow:hidden}#panel.half{height:46vh}#panel.full{height:88vh}
 #handle{display:block;position:sticky;top:0;background:var(--cream);padding:10px;cursor:pointer;z-index:2}
 #handle i{display:block;width:44px;height:5px;border-radius:3px;background:#cdbfa3;margin:auto}
 #listview,#detail{padding-top:4px}
 #toast{bottom:84px}
}
.pic{margin:10px 0 4px;border-radius:12px;overflow:hidden;background:#eee}.pic svg,.pic img{display:block;width:100%;height:auto}.pic figcaption{font-size:11px;color:#76666b;padding:4px 8px;background:#f1e9d8}