신뢰도 표시

<div class="wrap">
  <div class="row"><span class="q">2025년 3분기 실적 성장률은?</span></div>
  <div class="bubble">전년 동기 대비 약 12% 성장한 것으로 보고됐어요.</div>
  <div class="conf" id="conf" data-lv="high"><span class="dots"><i></i><i></i><i></i></span><span class="lbl">높은 신뢰도 — 공개 실적 발표 인용</span></div>
</div>

.wrap{width:min(300px,94%);display:grid;gap:8px}
.q{font-size:11px;color:var(--muted)}
.bubble{padding:9px 12px;border-radius:12px;border-bottom-left-radius:4px;background:var(--surface);border:1px solid var(--line);color:var(--fg);font-size:12px;line-height:1.55}
.conf{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--muted)}
.dots{display:flex;gap:3px}
.dots i{width:6px;height:6px;border-radius:2px;background:var(--line)}
.conf[data-lv=high] .dots i{background:#0f9d78}
.conf[data-lv=medium] .dots i:nth-child(1),.conf[data-lv=medium] .dots i:nth-child(2){background:#f5a524}
.conf[data-lv=low] .dots i:nth-child(1){background:#e5484d}

const conf = document.getElementById('conf'), lbl = conf.querySelector('.lbl');
const states = [
  ['high', '높은 신뢰도 — 공개 실적 발표 인용'],
  ['medium', '보통 신뢰도 — 일부는 추정치예요'],
  ['low', '낮은 신뢰도 — 최신 자료가 부족해요'],
];
let i = 0;
setInterval(() => {
  i = (i + 1) % states.length;
  const [lv, text] = states[i];
  conf.dataset.lv = lv;
  lbl.textContent = text;
}, 1800);