Spaces:

Mineru
/

ai-busan

Running

App Files Files Community

ai-busan / index.html

Mineru

Add 3 files

1fd14f2 verified 7 months ago

raw

history blame contribute delete

75.1 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI 대회 플랫폼</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	/* 커스텀 스타일 */
	.gradient-bg {
	background: linear-gradient(135deg, #6e8efb, #a777e3);
	}
	.card-hover:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	}
	.sidebar-item:hover {
	background-color: rgba(255,255,255,0.1);
	}
	.leaderboard-row:hover {
	background-color: rgba(0,0,0,0.03);
	}
	.progress-bar {
	transition: width 0.5s ease-in-out;
	}
	.fade-in {
	animation: fadeIn 0.5s ease-in;
	}
	@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
	}
	.blink {
	animation: blink 1s infinite;
	}
	@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
	}
	</style>
	</head>
	<body class="bg-gray-50 font-sans">
	<!-- 상단 네비게이션 바 -->
	<nav class="gradient-bg text-white shadow-lg">
	<div class="container mx-auto px-4 py-3 flex justify-between items-center">
	<div class="flex items-center space-x-4">
	<a href="#" class="flex items-center space-x-2" onclick="loadPage('home')">
	<i class="fas fa-robot text-2xl"></i>
	<span class="text-xl font-bold">AI 대회 플랫폼</span>
	</a>
	</div>
	<div class="hidden md:flex items-center space-x-6">
	<a href="#" class="hover:text-gray-200" onclick="loadPage('home')">홈</a>
	<a href="#" class="hover:text-gray-200" onclick="loadPage('competition')">대회 소개</a>
	<a href="#" class="hover:text-gray-200" onclick="loadPage('leaderboard')">리더보드</a>
	<a href="#" class="hover:text-gray-200" onclick="loadPage('community')">커뮤니티</a>
	<a href="#" class="hover:text-gray-200" onclick="loadPage('faq')">FAQ</a>
	</div>
	<div class="flex items-center space-x-4">
	<div id="user-info" class="hidden">
	<div class="flex items-center space-x-2">
	<img id="user-avatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="프로필" class="w-8 h-8 rounded-full">
	<span id="username" class="font-medium">홍길동</span>
	</div>
	</div>
	<div id="auth-buttons">
	<button onclick="loadPage('login')" class="px-4 py-1 bg-white text-purple-600 rounded-full font-medium hover:bg-gray-100 transition">로그인</button>
	<button onclick="loadPage('register')" class="px-4 py-1 border border-white text-white rounded-full font-medium hover:bg-white hover:text-purple-600 transition">회원가입</button>
	</div>
	<button id="mobile-menu-button" class="md:hidden text-white focus:outline-none">
	<i class="fas fa-bars text-xl"></i>
	</button>
	</div>
	</div>
	<!-- 모바일 메뉴 -->
	<div id="mobile-menu" class="hidden md:hidden bg-purple-700 px-4 py-2">
	<a href="#" class="block py-2 text-white hover:bg-purple-600 rounded px-2" onclick="loadPage('home')">홈</a>
	<a href="#" class="block py-2 text-white hover:bg-purple-600 rounded px-2" onclick="loadPage('competition')">대회 소개</a>
	<a href="#" class="block py-2 text-white hover:bg-purple-600 rounded px-2" onclick="loadPage('leaderboard')">리더보드</a>
	<a href="#" class="block py-2 text-white hover:bg-purple-600 rounded px-2" onclick="loadPage('community')">커뮤니티</a>
	<a href="#" class="block py-2 text-white hover:bg-purple-600 rounded px-2" onclick="loadPage('faq')">FAQ</a>
	</div>
	</nav>

	<!-- 사이드바와 메인 콘텐츠 영역 -->
	<div class="container mx-auto px-4 py-6 flex flex-col md:flex-row">
	<!-- 사이드바 (로그인 시에만 표시) -->
	<div id="sidebar" class="hidden md:w-64 bg-white rounded-lg shadow-md p-4 mb-6 md:mb-0 md:mr-6">
	<div class="mb-6">
	<div class="flex items-center space-x-3 mb-4">
	<img id="sidebar-avatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="프로필" class="w-10 h-10 rounded-full">
	<div>
	<div id="sidebar-username" class="font-medium">홍길동</div>
	<div class="text-xs text-gray-500">참가자 (팀장)</div>
	</div>
	</div>
	<div class="text-sm text-gray-600 mb-2">팀: <span class="font-medium">AI 마스터즈</span></div>
	<div class="text-sm text-gray-600">분야: <span class="font-medium">일반부</span></div>
	</div>

	<div class="mb-6">
	<h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">대회 진행</h3>
	<ul class="space-y-1">
	<li><a href="#" class="sidebar-item block px-3 py-2 rounded text-gray-700 hover:bg-purple-50 hover:text-purple-600" onclick="loadPage('dashboard')"><i class="fas fa-tachometer-alt mr-2"></i>대시보드</a></li>
	<li><a href="#" class="sidebar-item block px-3 py-2 rounded text-gray-700 hover:bg-purple-50 hover:text-purple-600" onclick="loadPage('team')"><i class="fas fa-users mr-2"></i>팀 관리</a></li>
	<li><a href="#" class="sidebar-item block px-3 py-2 rounded text-gray-700 hover:bg-purple-50 hover:text-purple-600" onclick="loadPage('task')"><i class="fas fa-tasks mr-2"></i>과제 브리핑</a></li>
	<li><a href="#" class="sidebar-item block px-3 py-2 rounded text-gray-700 hover:bg-purple-50 hover:text-purple-600" onclick="loadPage('workspace')"><i class="fas fa-laptop-code mr-2"></i>작업 환경</a></li>
	<li><a href="#" class="sidebar-item block px-3 py-2 rounded text-gray-700 hover:bg-purple-50 hover:text-purple-600" onclick="loadPage('submission')"><i class="fas fa-upload mr-2"></i>제출 관리</a></li>
	</ul>
	</div>

	<div>
	<h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">기타</h3>
	<ul class="space-y-1">
	<li><a href="#" class="sidebar-item block px-3 py-2 rounded text-gray-700 hover:bg-purple-50 hover:text-purple-600" onclick="loadPage('notifications')"><i class="fas fa-bell mr-2"></i>알림 <span class="bg-red-500 text-white text-xs px-2 py-0.5 rounded-full ml-1">3</span></a></li>
	<li><a href="#" class="sidebar-item block px-3 py-2 rounded text-gray-700 hover:bg-purple-50 hover:text-purple-600" onclick="loadPage('settings')"><i class="fas fa-cog mr-2"></i>설정</a></li>
	<li><a href="#" class="sidebar-item block px-3 py-2 rounded text-gray-700 hover:bg-purple-50 hover:text-purple-600" onclick="logout()"><i class="fas fa-sign-out-alt mr-2"></i>로그아웃</a></li>
	</ul>
	</div>
	</div>

	<!-- 메인 콘텐츠 영역 -->
	<div id="main-content" class="flex-1">
	<!-- 기본 페이지 (홈) -->
	<div id="home-page" class="fade-in">
	<div class="bg-white rounded-lg shadow-md p-6 mb-6">
	<div class="flex flex-col md:flex-row items-center justify-between mb-6">
	<div class="mb-4 md:mb-0">
	<h1 class="text-2xl font-bold text-gray-800">2025 부산 AI 챌린지</h1>
	<p class="text-gray-600">AI 기술을 활용한 창의적인 문제 해결 대회</p>
	</div>
	<div class="flex space-x-3">
	<button onclick="loadPage('register-competition')" class="px-6 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition">대회 등록</button>
	<button onclick="loadPage('live')" class="px-6 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition">
	<i class="fas fa-play mr-2"></i>실시간 중계
	</button>
	</div>
	</div>

	<div class="bg-purple-50 rounded-lg p-4 mb-6">
	<div class="flex items-center">
	<div class="bg-purple-100 p-3 rounded-full mr-4">
	<i class="fas fa-info-circle text-purple-600 text-xl"></i>
	</div>
	<div>
	<h3 class="font-medium text-gray-800">대회 진행 상황</h3>
	<p class="text-sm text-gray-600">현재 예선 라운드가 진행 중입니다. (2025.10.15 ~ 2025.10.30)</p>
	</div>
	</div>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
	<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm card-hover transition">
	<div class="flex items-center mb-4">
	<div class="bg-blue-100 p-2 rounded-full mr-3">
	<i class="fas fa-users text-blue-600"></i>
	</div>
	<h3 class="font-medium text-gray-800">참가자 현황</h3>
	</div>
	<div class="text-3xl font-bold text-gray-800 mb-2">1,245팀</div>
	<div class="flex justify-between text-sm text-gray-500">
	<span>학생부: 632팀</span>
	<span>일반부: 613팀</span>
	</div>
	</div>

	<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm card-hover transition">
	<div class="flex items-center mb-4">
	<div class="bg-green-100 p-2 rounded-full mr-3">
	<i class="fas fa-trophy text-green-600"></i>
	</div>
	<h3 class="font-medium text-gray-800">상금 풀</h3>
	</div>
	<div class="text-3xl font-bold text-gray-800 mb-2">₩250,000,000</div>
	<div class="text-sm text-gray-500">총 상금 규모</div>
	</div>

	<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm card-hover transition">
	<div class="flex items-center mb-4">
	<div class="bg-orange-100 p-2 rounded-full mr-3">
	<i class="fas fa-clock text-orange-600"></i>
	</div>
	<h3 class="font-medium text-gray-800">남은 시간</h3>
	</div>
	<div class="text-3xl font-bold text-gray-800 mb-2" id="countdown">14일 05:32:18</div>
	<div class="text-sm text-gray-500">예선 종료까지</div>
	</div>
	</div>

	<div class="mb-8">
	<h2 class="text-xl font-bold text-gray-800 mb-4">최근 공지사항</h2>
	<div class="space-y-3">
	<div class="border-b border-gray-100 pb-3">
	<div class="flex justify-between items-start">
	<a href="#" class="font-medium text-purple-600 hover:underline" onclick="loadPage('notice-detail')">예선 라운드 과제 1 안내</a>
	<span class="text-sm text-gray-500">2025.10.14</span>
	</div>
	<p class="text-sm text-gray-600 mt-1">예선 라운드 첫 번째 과제가 공개되었습니다. 과제 브리핑 페이지에서 확인해주세요.</p>
	</div>
	<div class="border-b border-gray-100 pb-3">
	<div class="flex justify-between items-start">
	<a href="#" class="font-medium text-purple-600 hover:underline" onclick="loadPage('notice-detail')">API 사용량 할당 안내</a>
	<span class="text-sm text-gray-500">2025.10.12</span>
	</div>
	<p class="text-sm text-gray-600 mt-1">각 팀별 API 사용량이 할당되었습니다. 작업 환경 페이지에서 확인 가능합니다.</p>
	</div>
	<div class="border-b border-gray-100 pb-3">
	<div class="flex justify-between items-start">
	<a href="#" class="font-medium text-purple-600 hover:underline" onclick="loadPage('notice-detail')">대회 등록 마감 안내</a>
	<span class="text-sm text-gray-500">2025.10.10</span>
	</div>
	<p class="text-sm text-gray-600 mt-1">대회 등록이 10월 15일 자정에 마감됩니다. 아직 등록하지 않은 팀은 서둘러주세요.</p>
	</div>
	</div>
	<div class="mt-4 text-right">
	<a href="#" class="text-sm text-purple-600 hover:underline font-medium" onclick="loadPage('notices')">더보기 <i class="fas fa-chevron-right ml-1"></i></a>
	</div>
	</div>

	<div>
	<h2 class="text-xl font-bold text-gray-800 mb-4">인기 커뮤니티 게시글</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
	<div class="flex items-center mb-2">
	<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="사용자" class="w-6 h-6 rounded-full mr-2">
	<span class="text-sm font-medium">김지수</span>
	<span class="text-xs text-gray-500 ml-auto">2시간 전</span>
	</div>
	<a href="#" class="font-medium text-gray-800 hover:text-purple-600" onclick="loadPage('community-post')">LLM 모델 최적화 팁 공유합니다</a>
	<div class="flex items-center mt-2 text-sm text-gray-500">
	<span class="flex items-center mr-3"><i class="far fa-thumbs-up mr-1"></i> 24</span>
	<span class="flex items-center"><i class="far fa-comment mr-1"></i> 5</span>
	</div>
	</div>
	<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
	<div class="flex items-center mb-2">
	<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="사용자" class="w-6 h-6 rounded-full mr-2">
	<span class="text-sm font-medium">박준호</span>
	<span class="text-xs text-gray-500 ml-auto">5시간 전</span>
	</div>
	<a href="#" class="font-medium text-gray-800 hover:text-purple-600" onclick="loadPage('community-post')">이미지 생성 모델 비교 분석</a>
	<div class="flex items-center mt-2 text-sm text-gray-500">
	<span class="flex items-center mr-3"><i class="far fa-thumbs-up mr-1"></i> 18</span>
	<span class="flex items-center"><i class="far fa-comment mr-1"></i> 7</span>
	</div>
	</div>
	</div>
	<div class="mt-4 text-right">
	<a href="#" class="text-sm text-purple-600 hover:underline font-medium" onclick="loadPage('community')">더보기 <i class="fas fa-chevron-right ml-1"></i></a>
	</div>
	</div>
	</div>
	</div>

	<!-- 로그인 페이지 -->
	<div id="login-page" class="hidden fade-in">
	<div class="max-w-md mx-auto bg-white rounded-lg shadow-md p-8">
	<h2 class="text-2xl font-bold text-center text-gray-800 mb-8">로그인</h2>
	<form id="login-form">
	<div class="mb-4">
	<label for="login-email" class="block text-sm font-medium text-gray-700 mb-1">이메일</label>
	<input type="email" id="login-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="이메일을 입력하세요">
	</div>
	<div class="mb-6">
	<label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">비밀번호</label>
	<input type="password" id="login-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="비밀번호를 입력하세요">
	</div>
	<button type="button" onclick="performLogin()" class="w-full py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition mb-4">로그인</button>
	<div class="text-center text-sm text-gray-600">
	아직 계정이 없으신가요? <a href="#" class="text-purple-600 hover:underline font-medium" onclick="loadPage('register')">회원가입</a>
	</div>
	</form>
	</div>
	</div>

	<!-- 회원가입 페이지 -->
	<div id="register-page" class="hidden fade-in">
	<div class="max-w-md mx-auto bg-white rounded-lg shadow-md p-8">
	<h2 class="text-2xl font-bold text-center text-gray-800 mb-8">회원가입</h2>
	<form id="register-form">
	<div class="mb-4">
	<label for="register-name" class="block text-sm font-medium text-gray-700 mb-1">이름</label>
	<input type="text" id="register-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="이름을 입력하세요">
	</div>
	<div class="mb-4">
	<label for="register-email" class="block text-sm font-medium text-gray-700 mb-1">이메일</label>
	<input type="email" id="register-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="이메일을 입력하세요">
	</div>
	<div class="mb-4">
	<label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">비밀번호</label>
	<input type="password" id="register-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="비밀번호를 입력하세요">
	</div>
	<div class="mb-6">
	<label for="register-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">비밀번호 확인</label>
	<input type="password" id="register-confirm-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="비밀번호를 다시 입력하세요">
	</div>
	<button type="button" onclick="performRegistration()" class="w-full py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition mb-4">회원가입</button>
	<div class="text-center text-sm text-gray-600">
	이미 계정이 있으신가요? <a href="#" class="text-purple-600 hover:underline font-medium" onclick="loadPage('login')">로그인</a>
	</div>
	</form>
	</div>
	</div>

	<!-- 대회 소개 페이지 -->
	<div id="competition-page" class="hidden fade-in">
	<div class="bg-white rounded-lg shadow-md p-6 mb-6">
	<h1 class="text-2xl font-bold text-gray-800 mb-6">2025 부산 AI 챌린지 소개</h1>

	<div class="mb-8">
	<h2 class="text-xl font-bold text-gray-800 mb-4">대회 목적</h2>
	<div class="bg-purple-50 rounded-lg p-4">
	<ul class="list-disc pl-5 space-y-2 text-gray-700">
	<li><span class="font-medium">AI 저변 확산:</span> 시민들의 AI 관심도를 높이고 더 쉽게 AI에 접근할 수 있도록 하는 것</li>
	<li><span class="font-medium">실질적인 활용 증진:</span> 공공 데이터와 AI 기술을 접목하여 시민들에게 실용적인 가치 제공</li>
	</ul>
	</div>
	</div>

	<div class="mb-8">
	<h2 class="text-xl font-bold text-gray-800 mb-4">대회 참가 대상</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div class="bg-blue-50 rounded-lg p-4">
	<h3 class="font-bold text-blue-800 mb-2">학생부</h3>
	<ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
	<li>초/중/고등학생</li>
	<li>부경대학교 컨소시엄에서 진행 중인 AI 교육 프로그램(2,500명) 연계</li>
	<li>교육청과 연계하여 추가 참가자 확보</li>
	<li>생활기록부에 기재 가능한 공식 시상 제공</li>
	</ul>
	</div>
	<div class="bg-green-50 rounded-lg p-4">
	<h3 class="font-bold text-green-800 mb-2">일반부</h3>
	<ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
	<li>성인 참가자(학생도 참가 가능)</li>
	<li>현재 진행 중인 성인 대상 AI 교육 프로그램(12개) 연계</li>
	<li>다양한 커뮤니티와 연계하여 참가자 확보</li>
	<li>일반인 누구나 참여 가능한 포맷 구성</li>
	</ul>
	</div>
	</div>
	</div>

	<div class="mb-8">
	<h2 class="text-xl font-bold text-gray-800 mb-4">대회 형식</h2>
	<div class="space-y-6">
	<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
	<h3 class="font-bold text-purple-800 mb-2">예선</h3>
	<ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
	<li>온라인으로 진행</li>
	<li>리더보드 형식으로 실시간 순위 반영</li>
	<li>참가자 수 제한</li>
	<li>API 비용 할당하여 모든 참가자에게 동일한 조건 제공</li>
	</ul>
	</div>
	<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
	<h3 class="font-bold text-purple-800 mb-2">본선: 16강 토너먼트 방식</h3>
	<ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
	<li>오프라인 경연(부산 e스포츠 경기장 활용)</li>
	<li>실시간 중계 및 해설 진행</li>
	<li>리더보드 시스템으로 실시간 순위 공개</li>
	<li>단계별 난이도 상승 및 과제 변경</li>
	<li>최종 단계에서는 리포트 제출 필요</li>
	</ul>
	</div>
	</div>
	</div>

	<div class="mb-8">
	<h2 class="text-xl font-bold text-gray-800 mb-4">주요 과제 분야</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div class="bg-indigo-50 rounded-lg p-4">
	<div class="flex items-center mb-2">
	<div class="bg-indigo-100 p-2 rounded-full mr-3">
	<i class="fas fa-comment-dots text-indigo-600"></i>
	</div>
	<h3 class="font-bold text-indigo-800">LLM 모델 활용</h3>
	</div>
	<p class="text-sm text-gray-700">프롬프트 작성 경연</p>
	</div>
	<div class="bg-pink-50 rounded-lg p-4">
	<div class="flex items-center mb-2">
	<div class="bg-pink-100 p-2 rounded-full mr-3">
	<i class="fas fa-image text-pink-600"></i>
	</div>
	<h3 class="font-bold text-pink-800">이미지 생성 AI</h3>
	</div>
	<p class="text-sm text-gray-700">주제에 맞는 이미지 생성</p>
	</div>
	<div class="bg-teal-50 rounded-lg p-4">
	<div class="flex items-center mb-2">
	<div class="bg-teal-100 p-2 rounded-full mr-3">
	<i class="fas fa-database text-teal-600"></i>
	</div>
	<h3 class="font-bold text-teal-800">공공 데이터 활용</h3>
	</div>
	<p class="text-sm text-gray-700">부산시 공공 데이터를 활용한 AI 에이전트 개발</p>
	</div>
	<div class="bg-amber-50 rounded-lg p-4">
	<div class="flex items-center mb-2">
	<div class="bg-amber-100 p-2 rounded-full mr-3">
	<i class="fas fa-users text-amber-600"></i>
	</div>
	<h3 class="font-bold text-amber-800">사회적 논의가 필요한 주제</h3>
	</div>
	<p class="text-sm text-gray-700">찬반 논쟁을 위한 AI 활용 경연</p>
	</div>
	</div>
	</div>

	<div class="mb-8">
	<h2 class="text-xl font-bold text-gray-800 mb-4">평가 방식</h2>
	<div class="bg-yellow-50 rounded-lg p-4">
	<ul class="list-disc pl-5 space-y-2 text-gray-700">
	<li><span class="font-medium">자동화된 평가 시스템:</span> 기본적인 정량 평가 기준 마련</li>
	<li><span class="font-medium">예선 평가 방식:</span> 리더보드 방식으로 실시간으로 순위 변동 공개</li>
	<li><span class="font-medium">본선 평가 방식:</span> 리더보드 방식으로 실시간으로 순위 변동 공개 + 전문가 심사 투표 (상위 10개의 팀의 결과물을 블라인드 투표 방식으로 투표 진행)</li>
	<li><span class="font-medium">평가 기준의 명확화:</span> 분야별 명확한 평가 기준 사전 공개</li>
	</ul>
	</div>
	</div>

	<div>
	<h2 class="text-xl font-bold text-gray-800 mb-4">특징 및 차별점</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
	<div class="flex items-center mb-2">
	<div class="bg-purple-100 p-2 rounded-full mr-3">
	<i class="fas fa-chart-line text-purple-600"></i>
	</div>
	<h3 class="font-bold text-purple-800">단계별 난이도 상승</h3>
	</div>
	<p class="text-sm text-gray-700">초기에는 쉬운 과제로 시작하여 점차 난이도 상승</p>
	</div>
	<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
	<div class="flex items-center mb-2">
	<div class="bg-blue-100 p-2 rounded-full mr-3">
	<i class="fas fa-graduation-cap text-blue-600"></i>
	</div>
	<h3 class="font-bold text-blue-800">교육-대회 연계</h3>
	</div>
	<p class="text-sm text-gray-700">사전 교육 프로그램과 연결하여 참여도 제고</p>
	</div>
	<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
	<div class="flex items-center mb-2">
	<div class="bg-green-100 p-2 rounded-full mr-3">
	<i class="fas fa-users text-green-600"></i>
	</div>
	<h3 class="font-bold text-green-800">커뮤니티 대항전</h3>
	</div>
	<p class="text-sm text-gray-700">다양한 AI 커뮤니티 간 대결 구도 형성</p>
	</div>
	<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
	<div class="flex items-center mb-2">
	<div class="bg-red-100 p-2 rounded-full mr-3">
	<i class="fas fa-universal-access text-red-600"></i>
	</div>
	<h3 class="font-bold text-red-800">포용성 강화</h3>
	</div>
	<p class="text-sm text-gray-700">장애인 등 다양한 계층 참여 가능한 형태 고려</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- 리더보드 페이지 -->
	<div id="leaderboard-page" class="hidden fade-in">
	<div class="bg-white rounded-lg shadow-md p-6 mb-6">
	<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
	<h1 class="text-2xl font-bold text-gray-800 mb-4 md:mb-0">리더보드</h1>
	<div class="flex space-x-2">
	<div class="relative">
	<select id="round-select" class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-purple-600">
	<option>예선 라운드</option>
	<option>본선 16강</option>
	<option>본선 8강</option>
	<option>본선 4강</option>
	<option>결승</option>
	</select>
	<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
	<i class="fas fa-chevron-down"></i>
	</div>
	</div>
	<div class="relative">
	<select id="task-select" class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-purple-600">
	<option>과제 1: LLM 모델 활용</option>
	<option>과제 2: 이미지 생성 AI</option>
	<option>과제 3: 공공 데이터 활용</option>
	<option>과제 4: 사회적 논의 주제</option>
	</select>
	<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
	<i class="fas fa-chevron-down"></i>
	</div>
	</div>
	</div>
	</div>

	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">순위</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">팀명</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">분야</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">점수</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">변동</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">API 사용량</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200 leaderboard-rows">
	<!-- 리더보드 행들 -->
	<tr class="leaderboard-row hover:bg-gray-50 transition">
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="bg-yellow-100 text-yellow-800 w-8 h-8 rounded-full flex items-center justify-center font-bold">1</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10">
	<img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">AI 마스터즈</div>
	<div class="text-sm text-gray-500">홍길동, 김철수, 이영희</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">일반부</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">98.7</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="text-green-500 flex items-center">
	<i class="fas fa-arrow-up mr-1"></i> 2
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-purple-600 h-2.5 rounded-full" style="width: 78%"></div>
	</div>
	<div class="text-xs text-gray-500 mt-1">78% (780/1000)</div>
	</td>
	</tr>

	<tr class="leaderboard-row hover:bg-gray-50 transition">
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="bg-gray-100 text-gray-800 w-8 h-8 rounded-full flex items-center justify-center font-bold">2</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10">
	<img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">데이터 위자드</div>
	<div class="text-sm text-gray-500">박지성, 최민수, 정다영</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">학생부</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">97.2</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="text-red-500 flex items-center">
	<i class="fas fa-arrow-down mr-1"></i> 1
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-purple-600 h-2.5 rounded-full" style="width: 65%"></div>
	</div>
	<div class="text-xs text-gray-500 mt-1">65% (650/1000)</div>
	</td>
	</tr>

	<tr class="leaderboard-row hover:bg-gray-50 transition">
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="bg-amber-100 text-amber-800 w-8 h-8 rounded-full flex items-center justify-center font-bold">3</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10">
	<img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">프롬프트 아티스트</div>
	<div class="text-sm text-gray-500">김수영, 이지훈</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">일반부</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">96.5</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="text-green-500 flex items-center">
	<i class="fas fa-arrow-up mr-1"></i> 3
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-purple-600 h-2.5 rounded-full" style="width: 45%"></div>
	</div>
	<div class="text-xs text-gray-500 mt-1">45% (450/1000)</div>
	</td>
	</tr>

	<tr class="leaderboard-row hover:bg-gray-50 transition">
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="w-8 h-8 rounded-full flex items-center justify-center font-bold">4</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10">
	<img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">부산 AI 연구회</div>
	<div class="text-sm text-gray-500">장동건, 한가인, 송혜교</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">일반부</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">95.8</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="text-gray-500">-</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-purple-600 h-2.5 rounded-full" style="width: 90%"></div>
	</div>
	<div class="text-xs text-gray-500 mt-1">90% (900/1000)</div>
	</td>
	</tr>

	<tr class="leaderboard-row hover:bg-gray-50 transition">
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="w-8 h-8 rounded-full flex items-center justify-center font-bold">5</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10">
	<img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">고등학교 AI 동아리</div>
	<div class="text-sm text-gray-500">이민호, 박보영, 김우빈</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">학생부</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">94.3</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="text-red-500 flex items-center">
	<i class="fas fa-arrow-down mr-1"></i> 2
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-purple-600 h-2.5 rounded-full" style="width: 60%"></div>
	</div>
	<div class="text-xs text-gray-500 mt-1">60% (600/1000)</div>
	</td>
	</tr>
	</tbody>
	</table>
	</div>

	<div class="mt-6 flex justify-between items-center">
	<div class="text-sm text-gray-500">
	현재 <span class="font-medium">1,245</span>개 팀 중 상위 <span class="font-medium">5</span>개 팀 표시 중
	</div>
	<nav class="flex items-center space-x-2">
	<button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50">
	<i class="fas fa-angle-left"></i>
	</button>
	<button class="px-3 py-1 rounded bg-purple-600 text-white">1</button>
	<button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50">2</button>
	<button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50">3</button>
	<span class="px-2 text-gray-500">...</span>
	<button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50">25</button>
	<button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50">
	<i class="fas fa-angle-right"></i>
	</button>
	</nav>
	</div>
	</div>
	</div>

	<!-- 커뮤니티 페이지 -->
	<div id="community-page" class="hidden fade-in">
	<div class="bg-white rounded-lg shadow-md p-6 mb-6">
	<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
	<h1 class="text-2xl font-bold text-gray-800 mb-4 md:mb-0">커뮤니티 포럼</h1>
	<div class="flex space-x-3">
	<div class="relative">
	<select class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-purple-600">
	<option>전체 카테고리</option>
	<option>LLM 모델</option>
	<option>이미지 생성</option>
	<option>공공 데이터</option>
	<option>사회적 논의</option>
	<option>기타</option>
	</select>
	<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
	<i class="fas fa-chevron-down"></i>
	</div>
	</div>
	<button onclick="loadPage('new-post')" class="px-4 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition flex items-center">
	<i class="fas fa-plus mr-2"></i> 새 글 작성
	</button>
	</div>
	</div>

	<div class="space-y-4">
	<div class="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
	<div class="flex items-start">
	<div class="flex-shrink-0 mr-4">
	<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="프로필" class="w-10 h-10 rounded-full">
	</div>
	<div class="flex-1 min-w-0">
	<div class="flex justify-between items-start mb-1">
	<a href="#" class="text-lg font-medium text-gray-900 hover:text-purple-600" onclick="loadPage('community-post')">LLM 모델 최적화 팁 공유합니다</a>
	<span class="text-sm text-gray-500 ml-2">2시간 전</span>
	</div>
	<p class="text-sm text-gray-600 mb-2">여러가지 프롬프트 엔지니어링 기법을 통해 모델 성능을 향상시킬 수 있는 방법을 공유드립니다...</p>
	<div class="flex items-center text-sm text-gray-500">
	<span class="flex items-center mr-4"><i class="far fa-eye mr-1"></i> 124</span>
	<span class="flex items-center mr-4"><i class="far fa-thumbs-up mr-1"></i> 24</span>
	<span class="flex items-center"><i class="far fa-comment mr-1"></i> 5</span>
	</div>
	</div>
	</div>
	</div>

	<div class="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
	<div class="flex items-start">
	<div class="flex-shrink-0 mr-4">
	<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="프로필" class="w-10 h-10 rounded-full">
	</div>
	<div class="flex-1 min-w-0">
	<div class="flex justify-between items-start mb-1">
	<a href="#" class="text-lg font-medium text-gray-900 hover:text-purple-600" onclick="loadPage('community-post')">이미지 생성 모델 비교 분석</a>
	<span class="text-sm text-gray-500 ml-2">5시간 전</span>
	</div>
	<p class="text-sm text-gray-600 mb-2">Stable Diffusion, DALL-E, Midjourney 등 주요 이미지 생성 모델의 장단점을 비교 분석해봤습니다...</p>
	<div class="flex items-center text-sm text-gray-500">
	<span class="flex items-center mr-4"><i class="far fa-eye mr-1"></i> 98</span>
	<span class="flex items-center mr-4"><i class="far fa-thumbs-up mr-1"></i> 18</span>
	<span class="flex items-center"><i class="far fa-comment mr-1"></i> 7</span>
	</div>
	</div>
	</div>
	</div>

	<div class="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
	<div class="flex items-start">
	<div class="flex-shrink-0 mr-4">
	<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="프로필" class="w-10 h-10 rounded-full">
	</div>
	<div class="flex-1 min-w-0">
	<div class="flex justify-between items-start mb-1">
	<a href="#" class="text-lg font-medium text-gray-900 hover:text-purple-600" onclick="loadPage('community-post')">부산시 공공 데이터 활용 팁</a>
	<span class="text-sm text-gray-500 ml-2">1일 전</span>
	</div>
	<p class="text-sm text-gray-600 mb-2">부산시에서 제공하는 공공 데이터를 효과적으로 활용하는 방법과 주의사항을 공유합니다...</p>
	<div class="flex items-center text-sm text-gray-500">
	<span class="flex items-center mr-4"><i class="far fa-eye mr-1"></i> 76</span>
	<span class="flex items-center mr-4"><i class="far fa-thumbs-up mr-1"></i> 12</span>
	<span class="flex items-center"><i class="far fa-comment mr-1"></i> 3</span>
	</div>
	</div>
	</div>
	</div>

	<div class="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
	<div class="flex items-start">
	<div class="flex-shrink-0 mr-4">
	<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="프�로필" class="w-10 h-10 rounded-full">
	</div>
	<div class="flex-1 min-w-0">
	<div class="flex justify-between items-start mb-1">
	<a href="#" class="text-lg font-medium text-gray-900 hover:text-purple-600" onclick="loadPage('community-post')">사회적 논의 주제에 대한 AI 활용 사례</a>
	<span class="text-sm text-gray-500 ml-2">2일 전</span>
	</div>
	<p class="text-sm text-gray-600 mb-2">AI를 활용하여 사회적 논의가 필요한 주제들을 분석하고 시각화한 사례들을 모아봤습니다...</p>
	<div class="flex items-center text-sm text-gray-500">
	<span class="flex items-center mr-4"><i class="far fa-eye mr-1"></i> 145</span>
	<span class="flex items-center mr-4"><i class="far fa-thumbs-up mr-1"></i> 32</span>
	<span class="flex items-center"><i class="far fa-comment mr-1"></i> 8</span>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="mt-6 flex justify-center">
	<nav class="flex items-center space-x-2">
	<button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50">
	<i class="fas fa-angle-left"></i>
	</button>
	<button class="px-3 py-1 rounded bg-purple-600 text-white">1</button>
	<button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50">2</button>
	<button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50">3</button>
	<span class="px-2 text-gray-500">...</span>
	<button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50">10</button>
	<button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50">
	<i class="fas fa-angle-right"></i>
	</button>
	</nav>
	</div>
	</div>
	</div>

	<!-- FAQ 페이지 -->
	<div id="faq-page" class="hidden fade-in">
	<div class="bg-white rounded-lg shadow-md p-6 mb-6">
	<h1 class="text-2xl font-bold text-gray-800 mb-6">자주 묻는 질문 (FAQ)</h1>

	<div class="mb-6">
	<div class="relative">
	<input type="text" placeholder="FAQ 검색..." class="w-full px-4 py-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
	<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
	<i class="fas fa-search text-gray-400"></i>
	</div>
	</div>
	</div>

	<div class="mb-6">
	<h2 class="text-lg font-semibold text-gray-800 mb-3">대회 참가 관련</h2>
	<div class="space-y-3">
	<div class="border border-gray-200 rounded-lg overflow-hidden">
	<button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
	<span>대회 참가 신청은 어떻게 하나요?</span>
	<i class="fas fa-chevron-down transition-transform duration-200"></i>
	</button>
	<div class="hidden px-4 py-3 bg-white border-t border-gray-200">
	<p class="text-gray-700">대회 홈페이지에서 회원가입 후, '대회 등록' 메뉴를 통해 참가 신청을 할 수 있습니다. 팀을 생성하거나 기존 팀에 참여할 수 있으며, 학생부와 일반부 중 선택하여 신청하시면 됩니다.</p>
	</div>
	</div>

	<div class="border border-gray-200 rounded-lg overflow-hidden">
	<button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
	<span>학생부와 일반부의 차이점은 무엇인가요?</span>
	<i class="fas fa-chevron-down transition-transform duration-200"></i>
	</button>
	<div class="hidden px-4 py-3 bg-white border-t border-gray-200">
	<p class="text-gray-700">학생부는 초/중/고등학생을 대상으로 하며, 생활기록부에 기재 가능한 공식 시상이 제공됩니다. 일반부는 성인을 대상으로 하며 학생도 참여 가능하지만, 학생부와는 별도의 평가 기준이 적용됩니다.</p>
	</div>
	</div>

	<div class="border border-gray-200 rounded-lg overflow-hidden">
	<button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
	<span>팀원은 몇 명까지 구성할 수 있나요?</span>
	<i class="fas fa-chevron-down transition-transform duration-200"></i>
	</button>
	<div class="hidden px-4 py-3 bg-white border-t border-gray-200">
	<p class="text-gray-700">최소 1명부터 최대 3명까지 팀을 구성할 수 있습니다. 팀장이 팀을 생성한 후 팀원을 초대할 수 있으며, 팀원은 초대를 수락해야 팀에 합류할 수 있습니다.</p>
	</div>
	</div>
	</div>
	</div>

	<div class="mb-6">
	<h2 class="text-lg font-semibold text-gray-800 mb-3">대회 진행 관련</h2>
	<div class="space-y-3">
	<div class="border border-gray-200 rounded-lg overflow-hidden">
	<button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
	<span>대회는 어떤 방식으로 진행되나요?</span>
	<i class="fas fa-chevron-down transition-transform duration-200"></i>
	</button>
	<div class="hidden px-4 py-3 bg-white border-t border-gray-200">
	<p class="text-gray-700">대회는 예선과 본선으로 나뉘어 진행됩니다. 예선은 온라인으로 진행되며 리더보드 형식으로 실시간 순위가 반영됩니다. 본선은 16강 토너먼트 방식으로 오프라인에서 진행되며, 실시간 중계가 제공됩니다.</p>
	</div>
	</div>

	<div class="border border-gray-200 rounded-lg overflow-hidden">
	<button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
	<span>과제는 어떤 유형으로 출제되나요?</span>
	<i class="fas fa-chevron-down transition-transform duration-200"></i>
	</button>
	<div class="hidden px-4 py-3 bg-white border-t border-gray-200">
	<p class="text-gray-700">과제는 크게 4가지 유형으로 출제됩니다: LLM 모델 활용(프롬프트 작성), 이미지 생성 AI, 공공 데이터 활용(AI 에이전트 개발), 사회적 논의가 필요한 주제(찬반 논쟁). 각 라운드마다 다른 유형의 과제가 주어질 수 있습니다.</p>
	</div>
	</div>

	<div class="border border-gray-200 rounded-lg overflow-hidden">
	<button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
	<span>API 사용량은 어떻게 관리되나요?</span>
	<i class="fas fa-chevron-down transition-transform duration-200"></i>
	</button>
	<div class="hidden px-4 py-3 bg-white border-t border-gray-200">
	<p class="text-gray-700">각 팀별로 API 사용량이 할당되며, 작업 환경 페이지에서 실시간으로 사용량을 확인할 수 있습니다. 모든 참가자에게 동일한 조건이 제공되며, API 비용은 대회 운영 측에서 관리합니다.</p>
	</div>
	</div>
	</div>
	</div>

	<div class="mb-6">
	<h2 class="text-lg font-semibold text-gray-800 mb-3">평가 및 시상 관련</h2>
	<div class="space-y-3">
	<div class="border border-gray-200 rounded-lg overflow-hidden">
	<button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
	<span>대회 평가는 어떤 기준으로 이루어지나요?</span>
	<i class="fas fa-chevron-down transition-transform duration-200"></i>
	</button>
	<div class="hidden px-4 py-3 bg-white border-t border-gray-200">
	<p class="text-gray-700">평가는 자동화된 평가 시스템과 전문가 심사로 이루어집니다. 예선은 리더보드 방식으로 실시간 순위가 반영되며, 본선은 리더보드와 전문가 심사 투표가 결합됩니다. 각 과제 유형별로 명확한 평가 기준이 사전에 공개됩니다.</p>
	</div>
	</div>

	<div class="border border-gray-200 rounded-lg overflow-hidden">
	<button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
	<span>상금은 어떻게 지급되나요?</span>
	<i class="fas fa-chevron-down transition-transform duration-200"></i>
	</button>
	<div class="hidden px-4 py-3 bg-white border-t border-gray-200">
	<p class="text-gray-700">총 상금 풀은 2억 5천만 원 규모이며, 각 부문별(학생부/일반부)과 순위에 따라 상금이 배분됩니다. 상금은 대회 종료 후 공식 계좌로 이체되며, 필요한 경우 세금 관련 서류를 제출해야 할 수 있습니다.</p>
	</div>
	</div>

	<div class="border border-gray-200 rounded-lg overflow-hidden">
	<button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
	<span>학생부 수상자의 경우 생활기록부 기재는 어떻게 하나요?</span>
	<i class="fas fa-chevron-down transition-transform duration-200"></i>
	</button>
	<div class="hidden px-4 py-3 bg-white border-t border-gray-200">
	<p class="text-gray-700">학생부 수상자에게는 공식 수상 증명서가 발급되며, 이를 통해 학교에 생활기록부 기재를 요청할 수 있습니다. 교육청과 연계되어 공식적으로 인정되는 시상이므로 문제없이 기재 가능합니다.</p>
	</div>
	</div>
	</div>
	</div>

	<div class="border-t border-gray-200 pt-6">
	<h2 class="text-lg font-semibold text-gray-800 mb-4">문의하기</h2>
	<p class="text-gray-600 mb-4">찾으시는 답변이 없으신가요? 직접 문의해주세요.</p>
	<button onclick="loadPage('inquiry')" class="px-4 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition">
	<i class="fas fa-envelope mr-2"></i> 문의하기
	</button>
	</div>
	</div>
	</div>

	<!-- 대시보드 페이지 (참가자용) -->
	<div id="dashboard-page" class="hidden fade-in">
	<div class="bg-white rounded-lg shadow-md p-6 mb-6">
	<h1 class="text-2xl font-bold text-gray-800 mb-6">대시보드</h1>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
	<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm card-hover transition">
	<div class="flex items-center mb-4">
	<div class="bg-purple-100 p-2 rounded-full mr-3">
	<i class="fas fa-trophy text-purple-600"></i>
	</div>
	<h3 class="font-medium text-gray-800">현재 순위</h3>
	</div>
	<div class="text-3xl font-bold text-gray-800 mb-2">15위</div>
	<div class="text-sm text-gray-500">상위 2% (1,245팀 중)</div>
	</div>

	<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm card-hover transition">
	<div class="flex items-center mb-4">
	<div class="bg-blue-100 p-2 rounded-full mr-3">
	<i class="fas fa-tasks text-blue-600"></i>
	</div>
	<h3 class="font-medium text-gray-800">과제 진행률</h3>
	</div>
	<div class="flex items-center mb-2">
	<div class
	</html>