퀘스트 트래커

<div class="qtpanel"><div class="qttitle">SILENT RUINS</div><div class="qtbar"><div class="qtfill" id="qtfill"></div></div><ul class="qtlist" id="qtlist"></ul></div>

.qtpanel{width:min(90%,260px);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:clamp(8px,3vmin,14px)}
.qttitle{font:800 clamp(9px,2.8vmin,11px) monospace;color:var(--accent);letter-spacing:.06em;margin-bottom:6px}
.qtbar{height:5px;border-radius:3px;background:color-mix(in srgb,var(--fg) 12%,transparent);overflow:hidden;margin-bottom:8px}
.qtfill{height:100%;width:0%;background:var(--accent);transition:width .5s ease-out}
.qtlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.qtlist li{display:flex;align-items:center;gap:6px;font:clamp(9px,2.8vmin,11px) inherit;color:var(--fg)}
.qtcheck{width:13px;height:13px;border-radius:4px;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;font-size:9px;color:#fff;transition:all .25s}
.qtlist li.done .qtcheck{background:var(--accent-3);border-color:var(--accent-3)}
.qtlist li.done .qttext{color:var(--muted);text-decoration:line-through}

const items=['유물 조각 3개 모으기','입구 후예자 처치','제단으로 이동'];
const list=document.getElementById('qtlist');
const fill=document.getElementById('qtfill');
items.forEach(function(t){
  const li=document.createElement('li');
  li.innerHTML='<span class="qtcheck"></span><span class="qttext">'+t+'</span>';
  list.appendChild(li);
});
const lis=[...list.children];
let step=0;
function complete(){
  if(step>=lis.length){
    setTimeout(function(){
      lis.forEach(function(li){ li.classList.remove('done'); li.querySelector('.qtcheck').textContent=''; });
      fill.style.width='0%';
      step=0;
      setTimeout(complete, 1000);
    }, 1400);
    return;
  }
  const li=lis[step];
  li.classList.add('done');
  li.querySelector('.qtcheck').textContent='✓';
  step++;
  fill.style.width=(step/lis.length*100)+'%';
  setTimeout(complete, 1100);
}
setTimeout(complete, 700);