포커스 트랩

<div class="stage">
  <div class="bg">
    <div class="ghost"></div><div class="ghost"></div><div class="ghost"></div>
  </div>
  <div class="modal">
    <div class="mh"></div>
    <div class="field f1"></div>
    <div class="row">
      <button class="f2"></button>
      <button class="f3"></button>
    </div>
  </div>
</div>

.stage{position:relative;width:94%;height:88%}
.bg{position:absolute;inset:0;display:flex;gap:10%;padding:10%;filter:blur(1.5px);opacity:.35}
.ghost{flex:1;border-radius:10px;background:var(--muted)}
.modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70%;height:76%;border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:0 12px 30px rgba(0,0,0,.18);padding:9%;display:flex;flex-direction:column;gap:10%}
.mh{width:50%;height:12%;border-radius:5px;background:var(--fg);opacity:.7}
.field{height:20%;border-radius:8px;border:1px solid var(--line);background:var(--bg)}
.row{display:flex;gap:8%;flex:1}
.row button{flex:1;border-radius:8px;border:1px solid var(--line);background:var(--bg)}
.ring{box-shadow:0 0 0 3px var(--accent)}

const order = ['.f1', '.f2', '.f3'];
let i = 0;
function tick() {
  order.forEach(function (sel) { document.querySelector(sel).classList.remove('ring'); });
  document.querySelector(order[i % order.length]).classList.add('ring');
  i++;
}
tick();
setInterval(tick, 900);