문서 청킹

<div class="scene"><div class="heading">CHUNK BOUNDARIES</div><div class="document"><span>첫 문장</span><span>연결 문장</span><span>핵심 문장</span><span>끝 문장</span></div><div class="chunks"><div id="chunk1">조각 1</div><div id="chunk2">조각 2</div></div><div class="muted">겹치는 문장은 두 조각에 남습니다</div></div>

.scene{width:min(94vw,800px);height:min(88vh,326px);padding:clamp(10px,2.7vmin,19px);border:1px solid var(--line);border-radius:13px;background:var(--surface);font:500 clamp(13px,2.4vmin,17px)/1.3 var(--font-sans,sans-serif);position:relative;overflow:hidden}.scene .mono{font-family:ui-monospace,SFMono-Regular,monospace}.scene .muted{color:var(--muted)}.scene .accent{color:var(--accent)}.scene .heading{font-weight:750;color:var(--accent);margin-bottom:clamp(5px,1.6vmin,12px)}.document{display:flex;gap:4px;margin:4px 0 7px}.document span{flex:1;min-width:0;border:1px solid var(--line);border-radius:5px;padding:5px 1px;text-align:center;background:var(--bg)}.document span.on{border-color:var(--accent);color:var(--accent)}.chunks{display:flex;gap:8px;height:35%;margin-bottom:4px}.chunks div{flex:1;display:grid;place-items:center;text-align:center;border-radius:7px;background:color-mix(in srgb,var(--accent) 14%,var(--surface));border:1px solid var(--accent);transition:.3s}

let overlap=false;function draw(){overlap=!overlap;document.querySelectorAll('.document span').forEach((x,i)=>x.classList.toggle('on',overlap&&i===1));document.getElementById('chunk1').textContent=overlap?'첫 + 연결':'첫 + 연결';document.getElementById('chunk2').textContent=overlap?'연결 + 핵심 + 마지막':'핵심 + 마지막'}draw();setInterval(draw,2400)