최소 권한 원칙

<div class="demo"><div class="head"><b>LEAST PRIVILEGE</b><span>role: READER</span></div><div class="scene"><div class="role">READER<br><small>read only</small></div><div class="arrow">→</div><div class="actions"><div id="read">READ <b>ALLOW</b></div><div id="write">WRITE <b>DENY</b></div><div id="delete">DELETE <b>DENY</b></div></div></div><div class="foot"><span id="caption">checking READ</span><span>tap to check</span></div></div>

.demo{width:min(94vw,690px);height:min(86vh,310px);padding:clamp(10px,2.4vmin,20px);border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:600 clamp(9px,2.5vmin,15px)/1.3 ui-monospace,monospace}.head,.foot{display:flex;justify-content:space-between;gap:8px}.head b{color:var(--accent)}.head span,.foot,small{color:var(--muted)}.foot{font-size:.82em}.scene{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:clamp(7px,2vmin,18px)}.role{border:1px solid var(--accent);border-radius:8px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));padding:.8em;min-width:30%;text-align:center}.role small{display:block;font-size:.78em;margin-top:.4em}.arrow{color:var(--accent);font-size:1.7em}.actions{width:45%;display:grid;gap:clamp(5px,1.4vmin,9px)}.actions div{border:1px solid var(--line);border-radius:6px;background:var(--bg);padding:.48em;display:flex;justify-content:space-between;gap:4px;opacity:.45;transition:opacity .2s,border-color .2s}.actions div.on{opacity:1;border-color:var(--accent)}.actions div.denied{border-color:var(--accent-3)}.actions b{color:var(--muted)}.actions div.on b{color:var(--accent)}.actions div.denied b{color:var(--accent-3)}

const actions=['read','write','delete'];let step=0;function check(){actions.forEach((action,i)=>{const el=document.getElementById(action);el.classList.toggle('on',i===step);el.classList.toggle('denied',i===step&&i>0)});document.getElementById('caption').textContent='checking '+actions[step].toUpperCase()+' · '+(step===0?'allowed':'denied');step=(step+1)%3}check();const timer=setInterval(check,700);document.querySelector('.demo').addEventListener('pointerdown',()=>{clearInterval(timer);check()})