물리적 가용성

<div class="avail"><div class="avail-top"><strong>BUYER</strong><button id="avail-add">ADD ACCESS</button></div><div class="avail-map"><span class="buyer">YOU</span><span class="shop s1">STORE</span><span class="shop s2">DELIVERY</span><span class="shop s3">PICKUP</span><span class="shop s4">PARTNER</span></div><div class="avail-foot"><span id="avail-count">1 OF 4 POINTS REACHABLE</span><i><b id="avail-fill"></b></i></div></div>

.avail{width:min(90%,480px);font:800 clamp(10px,2vmin,14px)/1.1 sans-serif}.avail-top,.avail-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}.avail-top strong{color:var(--accent)}.avail button{border:1px solid var(--fg);background:var(--fg);color:var(--bg);padding:6px;font:inherit;cursor:pointer}.avail-map{height:clamp(105px,32vmin,190px);position:relative;margin:7px 0;border:1px solid var(--line);background:radial-gradient(circle at center,var(--surface) 0 28%,transparent 29%),linear-gradient(90deg,transparent 49%,var(--line) 50%,transparent 51%),linear-gradient(transparent 49%,var(--line) 50%,transparent 51%)}.avail-map span{position:absolute;display:grid;place-items:center;border:2px solid var(--accent);background:var(--bg);padding:4px;font-size:clamp(10px,1.7vmin,12px)}.avail-map .buyer{left:42%;top:40%;width:16%;height:22%;background:var(--accent);color:white}.shop{opacity:.24;transition:opacity .3s,transform .3s;transform:scale(.8)}.shop.on{opacity:1;transform:scale(1)}.s1{left:3%;top:12%}.s2{right:4%;top:13%}.s3{left:6%;bottom:9%}.s4{right:5%;bottom:8%}.avail-foot i{display:block;width:28%;height:8px;background:var(--line)}.avail-foot b{display:block;height:100%;width:25%;background:var(--accent);transition:width .3s}@media(min-width:700px){body>div{transform:scale(1.8)}}

let count=1,touched=false;const shops=[...document.querySelectorAll('.shop')];function show(){shops.forEach((s,i)=>s.classList.toggle('on',i<count));document.querySelector('#avail-count').textContent=count+' OF 4 POINTS REACHABLE';document.querySelector('#avail-fill').style.width=count*25+'%'}document.querySelector('#avail-add').onclick=()=>{touched=true;count=count%4+1;show()};show();setInterval(()=>{if(!touched){count=count%4+1;show()}},1100);