발송 금지 시간

<div class="quiet"><div class="clock"><small>LOCAL TIME</small><b id="time">20:00</b></div><input id="hour" type="range" min="0" max="23" value="20" aria-label="Customer local hour"><div class="hours"><span>00</span><span>08</span><span>22</span><span>24</span></div><div class="status" id="status">READY TO SEND</div></div>

.quiet{width:min(88%,540px);font:800 clamp(10px,3.2vmin,15px)/1.2 var(--font-sans)}.clock{display:flex;align-items:end;justify-content:space-between;gap:8px}.clock small{font:inherit;color:var(--muted)}.clock b{font-size:clamp(30px,12vmin,75px);line-height:1;color:var(--accent)}.quiet input{width:100%;margin:clamp(12px,3vmin,25px) 0 4px;accent-color:var(--accent)}.hours{display:flex;justify-content:space-between;color:var(--muted)}.status{margin-top:clamp(12px,3vmin,24px);padding:clamp(8px,2vmin,16px);background:var(--fg);color:var(--bg);text-align:center}.status.hold{background:var(--accent);color:white}

const times=[20,23,2,8];let n=0;const input=document.querySelector('#hour');function show(hour){input.value=hour;document.querySelector('#time').textContent=String(hour).padStart(2,'0')+':00';const hold=hour>=22||hour<8;const status=document.querySelector('#status');status.textContent=hold?'QUIET HOURS → HOLD':'READY TO SEND';status.classList.toggle('hold',hold)}show(times[n++]);const timer=setInterval(()=>{show(times[n%times.length]);n++},1500);input.addEventListener('input',()=>{clearInterval(timer);show(Number(input.value))});