내장 웹 검색 도구

<div class="scene"><div class="heading">QUESTION → SEARCH → CITED ANSWER</div><div class="search-question">“오늘 변경된 정책은?”</div><div class="search-results"><div id="hit-1">자료 A <span>발행: 오늘</span></div><div id="hit-2">자료 B <span>발행: 어제</span></div></div><div class="search-answer" id="search-answer">검색 중…</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)}.search-question{border:1px solid var(--accent);border-radius:6px;padding:clamp(6px,1.7vmin,12px);background:var(--bg);margin-bottom:6px}.search-results{display:flex;gap:6px;margin-bottom:6px}.search-results>div{flex:1;border:1px solid var(--line);border-radius:6px;padding:clamp(5px,1.5vmin,10px);background:var(--bg);opacity:.5;transition:.25s}.search-results>div.on{opacity:1;border-color:var(--accent)}.search-results span{display:block;color:var(--muted)}.search-answer{border-left:3px solid var(--accent);padding:clamp(6px,1.7vmin,12px);background:var(--bg)}

const notes=['검색 중…','자료 A · 자료 B 확인','정책 변경 확인 [자료 A]'];let step=0;function draw(){document.getElementById('hit-1').classList.toggle('on',step>0);document.getElementById('hit-2').classList.toggle('on',step>0);document.getElementById('search-answer').textContent=notes[step];step=(step+1)%3}draw();setInterval(draw,700)