inert 속성

<div class="wrap">
  <div class="badge" id="badge"><svg viewBox="0 0 10 10"><path id="bpath" d="M1.5 5.2l2.6 2.6L8.5 2.4" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg><span id="btext">확인 중</span></div>
  <div class="bg" id="bg">
    <button class="bgbtn">배경 버튼 A</button>
    <button class="bgbtn">배경 버튼 B</button>
  </div>
  <div class="modal" id="modal">모달 열림 — 배경 비활성</div>
</div>

.wrap{position:relative;width:min(260px,92%);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.bg{display:grid;gap:8px;transition:opacity .3s}
.bg[inert],.bg.fallback-inert{opacity:.35}
.bgbtn{padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font-size:11px}
.modal{padding:8px 12px;border-radius:8px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;
  opacity:0;visibility:hidden;transition:opacity .3s}
.modal.show{opacity:1;visibility:visible}
.badge{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:700;background:var(--bg);border:1px solid var(--line);color:var(--accent-3);z-index:2}
.badge.no{color:var(--accent-2)}
.badge svg{width:9px;height:9px}

const ok = 'inert' in HTMLElement.prototype;
const b=document.getElementById('badge'),p=document.getElementById('bpath'),t=document.getElementById('btext');
b.classList.toggle('no', !ok);
p.setAttribute('d', ok ? 'M1.5 5.2l2.6 2.6L8.5 2.4' : 'M2 2l6 6M8 2l-6 6');
t.textContent = ok ? 'inert 지원됨' : '미지원 · tabindex 폴백';
const bg = document.getElementById('bg'), modal = document.getElementById('modal'), buttons = [...bg.querySelectorAll('.bgbtn')];
function lock(on){
  if (ok) { on ? bg.setAttribute('inert','') : bg.removeAttribute('inert'); }
  else {
    bg.classList.toggle('fallback-inert', on);
    buttons.forEach((btn) => { on ? btn.setAttribute('tabindex','-1') : btn.removeAttribute('tabindex'); btn.style.pointerEvents = on ? 'none' : ''; });
  }
  modal.classList.toggle('show', on);
}
let on = false;
setInterval(() => { on = !on; lock(on); }, 1800);