아리아 라이브 리전

<div class="stage">
  <div class="pane app">
    <div class="tag">화면</div>
    <div class="cartRow">
      <div class="cartIcon"><span id="count">0</span></div>
      <button class="addBtn" id="addBtn"></button>
    </div>
  </div>
  <div class="pane sr">
    <div class="tag">SR transcript</div>
    <div class="log" id="log"></div>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 10.5px/1 ui-monospace,monospace;color:var(--muted)}
.app{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10%}
.cartRow{width:64%;display:flex;align-items:center;justify-content:center;gap:14%}
.cartIcon{position:relative;width:36px;height:36px;flex:none;border-radius:9px;border:2px solid var(--fg);display:grid;place-items:center;font:800 13px/1 ui-monospace,monospace;color:var(--fg)}
.addBtn{width:40px;height:32px;flex:none;border-radius:9px;background:var(--accent);border:none;transition:transform .15s ease}
.log{position:absolute;inset:26px 10px 10px;display:flex;flex-direction:column-reverse;gap:6px;font:10.5px/1.3 ui-monospace,monospace;color:var(--accent-3);overflow:hidden}
.log div{opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.log div.show{opacity:1;transform:translateY(0)}

const btn = document.getElementById('addBtn');
const countEl = document.getElementById('count');
const log = document.getElementById('log');
let n = 0;
function addLine(text) {
  const line = document.createElement('div');
  line.textContent = text;
  log.prepend(line);
  requestAnimationFrame(function () { line.classList.add('show'); });
  while (log.children.length > 4) log.removeChild(log.lastChild);
}
function tick() {
  n++;
  countEl.textContent = String(n);
  btn.style.transform = 'scale(0.9)';
  setTimeout(function () { btn.style.transform = 'scale(1)'; }, 150);
  addLine(n + (n === 1 ? ' item in cart' : ' items in cart'));
}
tick();
setInterval(tick, 2000);