Resizable panels

<div class="rpw" id="rpw">
  <div class="rppane" id="rpa">사이드바</div>
  <div class="rpdiv" id="rpdiv" role="separator" aria-orientation="vertical" aria-valuenow="32" aria-valuemin="15" aria-valuemax="70" aria-label="패널 크기 조절" tabindex="0"></div>
  <div class="rppane" id="rpb">본문 콘텐츠</div>
</div>

.rpw{position:absolute;inset:10px;display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rppane{background:var(--surface);display:grid;place-items:center;color:var(--muted);font-size:11px;font-weight:600}
#rpa{width:32%;background:var(--bg)}
#rpb{flex:1}
.rpdiv{width:6px;background:var(--line);cursor:col-resize;position:relative;flex:none}
.rpdiv::after{content:"";position:absolute;top:50%;left:50%;width:2px;height:18px;background:var(--muted);transform:translate(-50%,-50%);border-radius:2px}
.rpdiv:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

const wrap = document.getElementById('rpw'), a = document.getElementById('rpa'), div = document.getElementById('rpdiv');
function setPct(pct) {
  pct = Math.max(15, Math.min(70, pct));
  a.style.width = pct + '%';
  div.setAttribute('aria-valuenow', String(Math.round(pct)));
}
let auto = true, dragging = false;
div.addEventListener('pointerdown', (e) => { auto = false; dragging = true; div.setPointerCapture(e.pointerId); });
div.addEventListener('pointermove', (e) => {
  if (!dragging) return;
  const rect = wrap.getBoundingClientRect();
  setPct(((e.clientX - rect.left) / rect.width) * 100);
});
div.addEventListener('pointerup', () => { dragging = false; });
div.addEventListener('keydown', (e) => {
  if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
  auto = false; e.preventDefault();
  const cur = parseFloat(div.getAttribute('aria-valuenow'));
  setPct(cur + (e.key === 'ArrowRight' ? 4 : -4));
});
let pct = 32, dir = 1;
setInterval(() => {
  if (!auto) return;
  pct += dir * 3;
  if (pct >= 55) dir = -1;
  if (pct <= 22) dir = 1;
  setPct(pct);
}, 260);