한글 문장부호 관습

<div class="stage">
  <div class="row" id="r0"><span class="mark">「」</span><span class="ex">「어디 가?」 하고 물었다.</span></div>
  <div class="row" id="r1"><span class="mark">『』</span><span class="ex">『훈민정음』 해례본</span></div>
  <div class="row" id="r2"><span class="mark">·</span><span class="ex">국어·영어·수학</span></div>
  <div class="row" id="r3"><span class="mark">……</span><span class="ex">그건…… 나도 몰라.</span></div>
</div>

.stage{display:grid;gap:8px;width:min(94%,320px)}
.row{display:flex;align-items:baseline;gap:12px;padding:6px 10px;border-radius:8px;transition:background .35s}
.row.active{background:color-mix(in srgb, var(--accent) 14%, transparent)}
.mark{width:2.4em;flex:none;font:700 15px ui-monospace,Menlo,monospace;color:var(--accent-2);text-align:center}
.ex{font:13px -apple-system,system-ui,"Apple SD Gothic Neo",sans-serif;color:var(--fg)}

const rows = [0,1,2,3].map(function(i){ return document.getElementById('r' + i); });
let i = 0;
setInterval(function(){
  rows.forEach(function(r){ r.classList.remove('active'); });
  rows[i % rows.length].classList.add('active');
  i++;
}, 1100);