대화창 (다이얼로그 박스)

<div class="dbwrap"><div class="dbportrait" id="portrait"></div>
<div class="dbbox"><div class="dbname" id="name">GUIDE</div><div class="dbtext" id="text"></div><div class="dbnext" id="next">▾</div></div></div>

.dbwrap{position:relative;width:min(94%,420px);display:flex;gap:clamp(8px,3vmin,14px);align-items:flex-end}
.dbportrait{width:clamp(30px,13vmin,52px);height:clamp(30px,13vmin,52px);border-radius:9px;background:var(--accent);flex:none;transition:background .3s}
.dbbox{position:relative;flex:1;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:clamp(8px,3vmin,14px);min-height:clamp(48px,18vmin,74px)}
.dbname{font:800 clamp(9px,2.6vmin,11px) monospace;color:var(--accent);letter-spacing:.08em;margin-bottom:4px}
.dbtext{font:clamp(10px,3.2vmin,13px)/1.5 inherit;color:var(--fg);min-height:2.6em}
.dbnext{position:absolute;right:10px;bottom:6px;color:var(--muted);font-size:12px;opacity:0;animation:dbblink 1s steps(2) infinite}
.dbnext.show{opacity:1}
@keyframes dbblink{50%{opacity:.15}}

const text=document.getElementById('text');
const next=document.getElementById('next');
const name=document.getElementById('name');
const portrait=document.getElementById('portrait');
const lines=[
  ['GUIDE','var(--accent)','이 문을 지나면 더 이상 돌아갈 수 없어.'],
  ['GUIDE','var(--accent)','준비가 되었다면 문을 열겠다.'],
  ['STRANGER','var(--accent-2)','...그대, 정말 가려는 건가?'],
];
let li=0;
function typeLine(){
  const [n,color,str]=lines[li];
  name.textContent=n;
  portrait.style.background=color;
  text.textContent='';
  next.classList.remove('show');
  let ci=0;
  const timer=setInterval(function(){
    text.textContent=str.slice(0,ci+1);
    ci++;
    if(ci>=str.length){
      clearInterval(timer);
      next.classList.add('show');
      setTimeout(function(){
        li=(li+1)%lines.length;
        typeLine();
      }, 1300);
    }
  }, 32);
}
typeLine();