너는 직관적인 툴을 만드는 뛰어난 프론트엔드 개발자이자 UI/UX 디자이너야. 학생들이 수행평가나 과제를 할 때, AI가 준 답변 중에서 거짓 정보(할루시네이션)일 확률이 높은 키워드(숫자, 연도, 주요 고유명사)를 자동으로 찾아내어 교차 검증을 쉽게 하도록 돕는 단일 페이지 웹앱(SPA)을 만들려고 해. 백엔드 서버나 외부 API 연동 없이, 오직 HTML, Tailwind CSS, Vanilla JavaScript만 사용해서 하나의 index.html 파일로 작동하는 완성도 높은 코드를 작성해 줘. 전체적인 디자인은 깔끔하고 직관적이어야 하며, 주조색은 경각심과 신뢰감을 동시에 주는 딥블루(#1E3A8A)와 포인트 색상으로 앰버/오렌지 계열을 사용해 줘. [화면 구성 및 기능 요구사항] 1. 헤더 (Header): - 앱 이름: "🔍 할루시네이션 판독기: AI 의심 키워드 추출기" - 슬로건: "AI 답변을 붙여넣으세요. 거짓 정보가 섞이기 쉬운 숫자와 고유명사를 찾아 구글 검색 링크를 연결해 드립니다." 2. 메인 콘텐츠 (좌/우 2단 분할 레이아웃): - [왼쪽 영역: AI 답변 입력] - 대형 텍스트 영역(Textarea): 사용자가 AI 답변을 붙여넣는 곳. (placeholder: "AI가 작성해 준 답변을 여기에 붙여넣으세요...") - 하단 버튼: "⚡ 의심 키워드 분석하기" (클릭 시 자바스크립트 로직 가동) - [오른쪽 영역: 분석 및 검증 결과] - 상단 요약 카드: 문장 속에서 감지된 '숫자/연도 개수'와 '고유명사 및 의심 단어 개수'를 배지(Badge) 형태로 표시. - 결과 표시창 (Result Box): 사용자가 입력한 본문이 그대로 나오되, 자바스크립트가 감지한 키워드들은 배경색(#FEF08A - 연노랑)과 밑줄이 쳐진 상태로 하이라이트되어야 함. - ✨ 핵심 기능 (하이라이트 클릭 이벤트): * 하이라이트된 단어를 마우스로 클릭하면, 해당 단어가 구글 검색창에 자동으로 입력된 새 탭이 열려야 함 (예: '1945년'을 클릭하면 https://www.google.com/search?q=1945년 팝업이 뜨도록 window.open 활용). * 하이라이트 단어 위에 마우스를 올리면(Hover) "클릭하여 구글에서 교차 검증하기"라는 작은 툴팁이 뜨면 좋겠어. 3. 하단 안내 가이드 (Footer 전 단계): - "💡 팩트체크 필수 팁: 역사적 연도, 통계 수치, 학자 이름, 법안 명칭은 AI가 가장 자주 틀리는 영역입니다. 하이라이트된 단어들을 꼭 클릭해 진짜 뉴스나 백과사전 출처와 비교해 보세요!" 4. 자바스크립트 키워드 추출 로직 내장: - 정규표현식(Regex)을 활용하여 본문에서 [1] 모든 숫자 및 연도, [2] 따옴표(' ', " ") 안의 단어, [3] 영문 대문자로 시작하는 단어나 연속된 한글 고유명사 패턴 등을 최대한 감지해서 <span> 태그와 CSS 클래스로 감싸 하이라이트 처리해 주는 함수를 정교하게 작성해 줘. 이 모든 기능이 단 하나의 파일에서 매끄럽게 작동하도록 스타일과 스크립트가 모두 포함된 코드를 짜줘.