너는 지금부터 실리콘밸리 최고의 프론트엔드 개발자이자 모바일 UI/UX 디자이너야. 나는 고등학생들이 스마트폰에서 사용할 'AI 페르소나 챗봇 웹앱'을 만들려고 해. 복잡한 설치 없이 바로 실행되도록 HTML, CSS, JavaScript가 모두 포함된 단 하나의 index.html파일코드를 완벽하게 짜줘.

[UI/UX 앱 디자인 요구사항]

1.모바일 퍼스트:스마트폰 화면에 꽉 차고 스크롤이 부드러운 진짜 앱(App)처럼 보이게 뷰포트 를 설정해 줘.

2.트렌디한 스타일:애플 iOS 스타일의 깔끔하고 부드러운 디자인(둥근 모서리, 은은한 그림자, 유리 질감의 글래스모피즘 효과)을 적용해 줘. 배경은 연한 파스텔톤으로 해줘.

3.메시지 말풍선:내 메시지는 오른쪽(파란색 바탕, 흰색 글씨), AI 메시지는 왼쪽(흰색 바탕, 어두 운 글씨)으로 예쁘게 정렬하고 로봇 프로필 아이콘을 넣어줘.

4.하단 고정 입력창:화면 맨 아래에 메시지 입력칸과 전송 버튼이 세련되게 고정되어 있도록 만 들어줘.

5.폰트:깔끔한 'Pretendard' 웹폰트를 적용해서 가독성을 최고로 높여줘.

[기술 및 기능 요구사항 (매우 중요)]

1.API 통신:JavaScript의 fetch함수를 사용하여 Gemini REST API (gemini-2.5-flash모델)와 통신하는 코드를 짜줘.

2.필수 변수 세팅:코드 맨 위에 내가 나중에 값을 직접 채워 넣을 수 있도록 아래 두 변수를 명확하게 만들어둬.const API_KEY = "여기에_키_입력";const SYSTEM_PROMPT = "여기에_시스템_프롬프트_입력";

3.⭐실시간 시계 기능 (시간 인지 장애 해결):AI가 현재 날짜를 알 수 있도록, API를 호출할 때 JavaScript의 new Date().toLocaleString('ko-KR')을 사용해서 "현재 스마트폰 시스템 시간: [시간]" 이라는 텍스트를 SYSTEM_PROMPT내용과 몰래 합쳐서 API로 전송하게 해줘.

4.로딩 애니메이션:AI가 답변을 생성하는 동안 타이핑을 치는 듯한 "..." 깜빡임 애니메이션을 넣어줘.

이 모든 조건이 완벽하게 작동하는 단 하나의 index.html코드를 만들어 줘!