Exclusive Accordion with <details name>

<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 id="group" class="group">
    <details name="faq" open class="d"><summary>환불 규정</summary><p>7일 이내 100% 환불됩니다.</p></details>
    <details name="faq" class="d"><summary>배송 기간</summary><p>영업일 기준 2~3일 걸려요.</p></details>
    <details name="faq" class="d"><summary>교환 방법</summary><p>마이페이지에서 신청하세요.</p></details>
  </div>
</div>

.wrap{position:relative;width:min(300px,92%)}
.group{display:grid;gap:6px}
.d{border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:2px 12px}
.d summary{padding:9px 0;font-size:12px;font-weight:600;color:var(--fg);cursor:pointer}
.d p{margin:0 0 10px;font-size:11px;color:var(--muted)}
.badge{position:absolute;top:-30px;right:0;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)}
.badge.no{color:var(--accent-2)}
.badge svg{width:9px;height:9px}

const ok = 'name' in document.createElement('details');
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 ? 'name 배타 지원됨' : '미지원 · toggle 폴백';
const items = [...document.querySelectorAll('.d')];
if (!ok) {
  items.forEach((d) => d.removeAttribute('name'));
  items.forEach((d) => d.addEventListener('toggle', () => { if (d.open) items.forEach((o) => o !== d && (o.open = false)); }));
}
let i = 0;
setInterval(() => { i = (i+1) % items.length; items[i].open = true; if (!ok) items.forEach((o,idx) => idx !== i && (o.open = false)); }, 2000);