광고 품질점수

<div class="quality"><div class="header">AD QUALITY <strong id="score">5 / 10</strong></div><div class="meter"><i id="bar"></i></div><div class="checks"><div id="copy">AD COPY <b>PARTIAL</b></div><div id="landing">LANDING PAGE <b>PARTIAL</b></div></div><div class="preview"><span>QUERY</span><b>quiet desk lamp</b><em>→</em><span>AD + PAGE</span></div></div>

.quality{width:min(86%,470px);padding:clamp(12px,3vmin,25px);background:var(--surface);border:1px solid var(--line);font:800 clamp(10px,max(2vmin,1vw),16px)/1.2 sans-serif}.header{display:flex;justify-content:space-between}.header strong{color:var(--accent);font-size:clamp(17px,4vmin,30px)}.meter{height:clamp(8px,2vmin,15px);background:var(--line);margin:clamp(9px,2vmin,16px) 0}.meter i{display:block;height:100%;background:var(--accent);transition:width .5s}.checks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(5px,1.5vmin,12px)}.checks div{border:1px solid var(--line);padding:clamp(5px,1.5vmin,10px);font-size:max(10px,1vw,.72em)}.checks b{display:block;margin-top:5px;color:var(--accent)}.preview{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:clamp(9px,2vmin,18px);font-size:max(10px,1vw,.75em)}.preview span{color:var(--muted)}.preview b{border-bottom:2px solid var(--accent)}.preview em{font-style:normal;color:var(--accent)}

let phase=0;function draw(){const states=[['PARTIAL','PARTIAL',5],['MATCHED','PARTIAL',7],['MATCHED','MATCHED',9]];const [copy,landing,score]=states[phase++%3];document.querySelector('#copy b').textContent=copy;document.querySelector('#landing b').textContent=landing;document.querySelector('#score').textContent=score+' / 10';document.querySelector('#bar').style.width=score*10+'%'}draw();setInterval(draw,1200);