Hreflang

<div class="locale"><div class="world">◎</div><div class="tabs"><button data-lang="ko" class="on">KO</button><button data-lang="en">EN</button><button data-lang="ja">JA</button></div><div class="dest" id="dest">example.test/ko/guide</div><div class="routes"><span>/ko/guide</span><span>/en/guide</span><span>/ja/guide</span></div></div>

.locale{width:min(88%,550px);display:grid;justify-items:center;gap:clamp(8px,2vmin,18px);font:800 clamp(10px,max(1.9vmin,1vw),16px) sans-serif;color:var(--fg)}.world{font-size:clamp(28px,6vmin,55px);color:var(--accent);line-height:1;animation:spin 6s linear infinite}.tabs{display:flex;gap:5px}.tabs button{border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:6px clamp(8px,2vmin,18px);font:inherit;cursor:pointer}.tabs button.on{background:var(--accent);border-color:var(--accent);color:white}.dest{border:2px solid var(--fg);padding:clamp(9px,1.8vmin,17px);background:var(--surface);width:100%;text-align:center}.routes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;color:var(--muted);font-size:max(10px,1vw,.7em)}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:700px){body > :not(script){zoom:1.55}.map,.feed,.linkmap{height:48%}}

const buttons=[...document.querySelectorAll('[data-lang]')],dest=document.querySelector('#dest');let n=0;function show(){buttons.forEach((b,i)=>b.classList.toggle('on',i===n));dest.textContent='example.test/'+buttons[n].dataset.lang+'/guide'}buttons.forEach((b,i)=>b.addEventListener('click',()=>{clearInterval(timer);n=i;show()}));const timer=setInterval(()=>{n=(n+1)%3;show()},2400);