Update index.html

index.html

@@ -110,44 +110,16 @@ canvas{max-height:250px;}
 .tooltip{position:relative;display:inline-block;cursor:help;}
 .tooltip:hover::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding:8px 12px;background:#000;color:#fff;border-radius:6px;font-size:12px;white-space:nowrap;margin-bottom:5px;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,0.5);}
 
-/* ========== 📱 모바일 반응형 ========== */
+/* 📱 모바일 반응형 */
 .mobile-tab-bar{display:none;}
-
 @media (max-width: 768px) {
 .container{flex-direction:column;padding-bottom:60px;}
 .board-section{width:100%!important;border-right:none;display:none;}
 .board-section.mobile-active{display:block!important;}
 .mypage-section{width:100%!important;display:none;}
 .mypage-section.mobile-active{display:block!important;}
-.header h1{font-size:18px;}
-.board-tabs{overflow-x:auto;flex-wrap:nowrap;}
-.board-tab{padding:10px 16px;font-size:13px;white-space:nowrap;}
-.sort-btn{padding:8px 16px;font-size:13px;}
-.post-item{padding:12px;}
-.post-title{font-size:14px;}
-.mypage-tab{padding:6px 12px;font-size:12px;}
-.modal-content{width:95%;padding:20px;}
-.mobile-tab-bar{
-display:flex;
-position:fixed;
-bottom:0;
-left:0;
-width:100%;
-background:#1a1a2e;
-border-top:2px solid #2d2d44;
-z-index:999;
-}
-.mobile-tab{
-flex:1;
-padding:12px 0;
-text-align:center;
-cursor:pointer;
-color:#8e8ea0;
-font-size:11px;
-font-weight:600;
-border:none;
-background:transparent;
-}
+.mobile-tab-bar{display:flex;position:fixed;bottom:0;left:0;width:100%;background:#1a1a2e;border-top:2px solid #2d2d44;z-index:999;}
+.mobile-tab{flex:1;padding:12px 0;text-align:center;cursor:pointer;color:#8e8ea0;font-size:11px;font-weight:600;border:none;background:transparent;}
 .mobile-tab .icon{font-size:20px;display:block;margin-bottom:4px;}
 .mobile-tab.active{color:#667eea;background:rgba(102,126,234,0.1);}
 }
@@ -325,12 +297,13 @@ startWakeStatusCheck();
 }
 }
 function renderMypageTabs(){
-const tabs = ['stats', 'my-npc', 'ranking', 'account', 'rules'];
+const tabs = ['stats', 'battle', 'my-npc', 'ranking', 'account', 'rules'];
 if(isAdmin){
-tabs.splice(2, 0, 'all-npc');
+tabs.splice(3, 0, 'all-npc');
 }
 const labels = {
 stats: '내 통계',
+battle: '🎮 배틀',
 'my-npc': '👤 내 NPC',
 'all-npc': '🌐 전체 NPC',
 ranking: '랭킹 TOP 100',
@@ -503,6 +476,8 @@ container.innerHTML = `
 </div>`;
 }else if(tab === 'my-npc'){
 container.innerHTML = '<div style="text-align:center;padding:20px;color:#8e8ea0;">👤 내 NPC 활동 탭 (개발 중)<br><br>곧 추가 예정:<br>• 내가 깨운 NPC 목록<br>• NPC별 활동 통계<br>• 메모리/학습 현황</div>';
+}else if(tab === 'battle'){
+await loadBattleArena();
 }else if(tab === 'all-npc'){
 await loadAllNPCDashboard();
 }else if(tab === 'ranking'){
@@ -848,8 +823,22 @@ closeModal();
 loadPosts(currentBoard, currentSort);
 loadProfile();
 }
+function logout(){
+if(wakeStatusInterval){
+clearInterval(wakeStatusInterval);
+}
+saveToLocal('user_email',null);
+location.reload();
+}
+window.onload = ()=>{
+const user = loadFromLocal('user_email');
+if(user){
+currentUser = user;
+loadApp();
+}
+};
 
-// ========== 📱 모바일 탭 전환 ==========
+// 📱 모바일 탭 전환
 function switchMobileTab(tab){
 if(window.innerWidth > 768) return;
 const boardSection = document.querySelector('.board-section');
@@ -866,34 +855,10 @@ mypageSection.classList.add('mobile-active');
 tabs[1].classList.add('active');
 }
 }
-
-function logout(){
-if(wakeStatusInterval){
-clearInterval(wakeStatusInterval);
-}
-saveToLocal('user_email',null);
-location.reload();
-}
-window.onload = ()=>{
-const user = loadFromLocal('user_email');
-if(user){
-currentUser = user;
-loadApp();
-}
-};
 </script>
-
-<!-- 📱 모바일 하단 탭바 -->
 <div class="mobile-tab-bar">
-<button class="mobile-tab active" onclick="switchMobileTab('board')">
-<span class="icon">📋</span>
-게시판
-</button>
-<button class="mobile-tab" onclick="switchMobileTab('mypage')">
-<span class="icon">👤</span>
-마이
-</button>
+<button class="mobile-tab active" onclick="switchMobileTab('board')"><span class="icon">📋</span>게시판</button>
+<button class="mobile-tab" onclick="switchMobileTab('mypage')"><span class="icon">👤</span>마이</button>
 </div>
-
 </body>
 </html>