보안 경보

<div class="sd"><div class="sd-head"><strong>SECURITY ALERTING</strong><span id="state">live check</span></div><div class="sd-stage"><div class="sa-plot"><div class="sa-threshold">threshold: 3</div><div class="sa-bars"><i></i><i></i><i></i><i></i><i></i></div></div><div class="sa-bell" id="alert">MONITORING</div></div><div class="sd-foot"><span id="caption">checking boundary</span><span>tap to step</span></div></div>

.sd{box-sizing:border-box;width:min(94vw,700px);height:min(86vh,318px);padding:clamp(9px,2.3vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);display:flex;flex-direction:column;gap:clamp(6px,1.8vmin,12px);font:600 clamp(12px,2.6vmin,16px)/1.25 var(--font-sans, sans-serif)}.sd *{box-sizing:border-box}.sd-head,.sd-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:1.25em}.sd-head strong{color:var(--accent);letter-spacing:.06em}.sd-head span,.sd-foot{color:var(--muted)}.sd-foot{font-size:clamp(12px,2.4vmin,14px)}.sd-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vmin,18px);overflow:hidden}.sd .mono{font-family:ui-monospace,monospace}.sd .tile{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(5px,1.5vmin,10px);text-align:center}.sd .good{color:var(--accent);border-color:var(--accent)}.sd .bad{color:var(--accent-3);border-color:var(--accent-3)}.sd .arrow{color:var(--muted);font-size:clamp(15px,4vmin,28px)}.sd .active{background:color-mix(in srgb,var(--accent) 16%,var(--surface));border-color:var(--accent)}.sd .blocked{background:color-mix(in srgb,var(--accent-3) 13%,var(--surface));border-color:var(--accent-3)}.sd-stage{flex-direction:column}.sa-plot{width:min(90%,440px);position:relative;height:clamp(65px,18vmin,100px);border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:0 clamp(6px,2vmin,16px)}.sa-threshold{position:absolute;left:0;right:0;top:37%;border-top:2px dashed var(--accent-3);color:var(--accent-3);font-size:clamp(12px,2.4vmin,13px);padding-left:4px}.sa-bars{display:flex;align-items:flex-end;justify-content:space-around;height:100%;position:relative}.sa-bars i{display:block;width:12%;height:18%;background:var(--accent);border-radius:3px 3px 0 0;transition:height .3s,background .3s}.sa-bars i.hot{background:var(--accent-3)}.sa-bell{border:2px solid var(--line);border-radius:7px;padding:clamp(4px,1.1vmin,8px);min-width:40%;text-align:center}.sa-bell.on{border-color:var(--accent-3);color:var(--accent-3);background:color-mix(in srgb,var(--accent-3) 15%,var(--surface))}.sd-foot span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sd-foot span:last-child{flex:none;white-space:nowrap}

let n=0;function advance(){n=(n+1)%5;document.querySelectorAll('.sa-bars i').forEach((bar,i)=>{bar.style.height=(i<=n?[18,28,46,76,90][i]:18)+'%';bar.classList.toggle('hot',i<=n&&i>=3)});document.getElementById('alert').textContent=n>=3?'ALERT SENT':'MONITORING';document.getElementById('alert').classList.toggle('on',n>=3);document.getElementById('state').textContent=n>=3?'threshold crossed':'collecting events';document.getElementById('caption').textContent=n>=3?'responder notified':'failed sign-ins: '+(n+1)}advance();setInterval(advance,650);
document.querySelector('.sd').addEventListener('pointerdown',advance);