아이템 등급 색 (루트 레어리티)

<div class="lrgrid" id="grid"></div>

.lrgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,2.4vmin,12px);width:min(92%,460px)}
.lritem{position:relative;aspect-ratio:1;border-radius:9px;background:var(--surface);border:2px solid var(--tier,var(--line));display:grid;place-items:center;overflow:hidden}
.lritem::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--tier,var(--line)) 30%,transparent),transparent 60%)}
.lricon{width:38%;height:38%;border-radius:5px;background:var(--tier,var(--muted));position:relative;z-index:1}
.lrlabel{position:absolute;bottom:3%;left:0;right:0;text-align:center;font:700 clamp(6px,1.8vmin,8px) monospace;color:var(--muted);z-index:1}
.t-common{--tier:var(--muted)}
.t-uncommon{--tier:var(--accent-3)}
.t-rare{--tier:var(--accent)}
.t-epic{--tier:#a259ff}
.t-legendary{--tier:#f5a623;animation:lrpulse 1.6s ease-in-out infinite}
@keyframes lrpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,#f5a623 55%,transparent)}50%{box-shadow:0 0 14px 4px color-mix(in srgb,#f5a623 55%,transparent)}}

const tiers=[
  ['common','일반'],['uncommon','고급'],['rare','희귀'],['epic','영웅'],['legendary','전설'],
  ['common','일반'],['uncommon','고급'],['rare','희귀'],['epic','영웅'],['legendary','전설'],
];
const grid=document.getElementById('grid');
tiers.forEach(function(pair){
  const div=document.createElement('div');
  div.className='lritem t-'+pair[0];
  div.innerHTML='<div class="lricon"></div><div class="lrlabel">'+pair[1]+'</div>';
  grid.appendChild(div);
});
const legendaries=[...grid.querySelectorAll('.t-legendary')];
let i=0;
setInterval(function(){
  legendaries.forEach(function(el){ el.style.animationPlayState='running'; });
  const el=legendaries[i%legendaries.length];
  el.style.transform='scale(1.08)';
  setTimeout(function(){ el.style.transform='scale(1)'; }, 260);
  i++;
}, 1000);