루비 주석

<div class="stage">
  <p class="line">
    <ruby class="r1">漢字<rt>한자</rt></ruby>
    <ruby class="r2">Design<rt>디자인</rt></ruby>
  </p>
  <div class="readout">&lt;ruby&gt;본문&lt;rt&gt;주석&lt;/rt&gt;&lt;/ruby&gt;</div>
</div>

.stage{display:grid;justify-items:center;gap:16px}
.line{margin:0;display:flex;gap:22px;font:700 clamp(18px,5.4vmin,30px)/1.4 -apple-system,system-ui,"Apple SD Gothic Neo",sans-serif;color:var(--fg)}
ruby{ruby-position:over;transition:color .5s}
rt{font:400 .38em/1 -apple-system,system-ui,sans-serif;color:var(--muted);transition:color .5s}
ruby.hl{color:var(--accent)}
ruby.hl rt{color:var(--accent-2)}
.readout{font:11px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center}

const rubies = [document.querySelector('.r1'), document.querySelector('.r2')];
let i = 0;
function apply(){
  rubies.forEach(function(r){ r.classList.remove('hl'); });
  rubies[i % rubies.length].classList.add('hl');
  i++;
}
apply();
setInterval(apply, 1200);