Update index.html

index.html

@@ -8,30 +8,74 @@
 <style>
 *{margin:0;padding:0;box-sizing:border-box;}
 body{font-family:'Noto Sans KR',sans-serif;background:#0f0f23;color:#e0e0e0;}
-.container{display:flex;height:100vh;overflow:hidden;}
-.board-section{width:66.66%;padding:20px;overflow-y:auto;background:#1a1a2e;border-right:1px solid #2d2d44;}
-.mypage-section{width:33.33%;padding:20px;overflow-y:auto;background:#16213e;}
-.header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;box-shadow:0 4px 12px rgba(102,126,234,0.3);}
-.header h1{font-size:24px;}
-.board-tabs{display:flex;gap:10px;margin:20px 0;flex-wrap:wrap;border-bottom:2px solid #2d2d44;padding-bottom:10px;}
-.board-tab{padding:12px 24px;background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:15px;font-weight:600;transition:all 0.3s;color:#8e8ea0;}
+
+/* ===== Full-width single column layout ===== */
+.main-container{display:flex;flex-direction:column;height:100vh;overflow:hidden;}
+.header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;z-index:100;box-shadow:0 4px 12px rgba(102,126,234,0.3);flex-shrink:0;}
+.header h1{font-size:22px;}
+.header-right{display:flex;align-items:center;gap:12px;}
+.header-gpu{display:flex;align-items:center;gap:6px;background:rgba(255,215,0,0.25);padding:6px 14px;border-radius:20px;font-weight:700;font-size:14px;color:#ffd700;border:1px solid rgba(255,215,0,0.4);}
+.header-gpu .gpu-icon{font-size:16px;}
+
+/* ===== Tab bar (board tabs + mypage tab) ===== */
+.tab-bar{display:flex;align-items:center;gap:0;background:#1a1a2e;border-bottom:2px solid #2d2d44;padding:0 20px;flex-shrink:0;overflow-x:auto;}
+.tab-bar::-webkit-scrollbar{height:3px;}
+.tab-bar::-webkit-scrollbar-thumb{background:#667eea;border-radius:3px;}
+
+.board-tab{padding:14px 22px;background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:14px;font-weight:600;transition:all 0.3s;color:#8e8ea0;white-space:nowrap;}
 .board-tab.active{color:#667eea;border-bottom-color:#667eea;}
-.board-tab:hover{color:#667eea;background:rgba(102,126,234,0.1);}
-.sort-toggle{display:flex;gap:10px;margin:15px 0;padding:10px;background:#0f0f23;border-radius:8px;}
-.sort-btn{padding:10px 20px;background:#1a1a2e;border:2px solid #2d2d44;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;transition:all 0.3s;color:#8e8ea0;}
+.board-tab:hover{color:#667eea;background:rgba(102,126,234,0.08);}
+
+/* 마이페이지 탭 - 특별 스타일 */
+.tab-spacer{flex:1;}
+.mypage-main-tab{padding:10px 20px;margin:4px 0;background:transparent;border:2px solid #ffd700;border-radius:24px;cursor:pointer;font-size:14px;font-weight:700;transition:all 0.3s;color:#ffd700;white-space:nowrap;display:flex;align-items:center;gap:6px;position:relative;}
+.mypage-main-tab:hover{background:rgba(255,215,0,0.15);transform:translateY(-1px);box-shadow:0 2px 12px rgba(255,215,0,0.3);}
+.mypage-main-tab.active{background:linear-gradient(135deg,#ffd700,#ffb700);color:#000;border-color:#ffd700;box-shadow:0 2px 16px rgba(255,215,0,0.5);}
+.mypage-main-tab .tab-badge{background:#ff6b6b;color:#fff;font-size:10px;padding:2px 6px;border-radius:10px;font-weight:700;min-width:18px;text-align:center;}
+.mypage-main-tab.active .tab-badge{background:#d32f2f;color:#fff;}
+
+/* ===== Content area ===== */
+.content-area{flex:1;overflow-y:auto;padding:20px;background:#0f0f23;}
+
+/* ===== Sort toggle ===== */
+.sort-toggle{display:flex;gap:10px;margin:0 0 15px 0;padding:10px;background:#1a1a2e;border-radius:8px;}
+.sort-btn{padding:10px 20px;background:#0f0f23;border:2px solid #2d2d44;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;transition:all 0.3s;color:#8e8ea0;}
 .sort-btn.active{background:#667eea;color:#fff;border-color:#667eea;box-shadow:0 2px 8px rgba(102,126,234,0.5);}
 .sort-btn:hover{border-color:#667eea;transform:translateY(-1px);}
+
+/* ===== Quick actions bar ===== */
+.quick-actions{display:flex;gap:10px;margin-bottom:15px;flex-wrap:wrap;}
+.quick-actions .btn{flex:0 0 auto;}
+
+/* ===== Post items ===== */
 .post-item{border:1px solid #2d2d44;padding:15px;margin:10px 0;border-radius:8px;background:#1a1a2e;transition:all 0.3s;cursor:pointer;}
 .post-item:hover{box-shadow:0 4px 12px rgba(102,126,234,0.3);transform:translateY(-2px);border-color:#667eea;}
 .post-item.hot{border-left:4px solid #ff6b6b;background:linear-gradient(to right,rgba(255,107,107,0.1),#1a1a2e);}
 .post-title{font-size:16px;font-weight:600;margin-bottom:8px;color:#e0e0e0;}
 .post-title:hover{color:#667eea;}
 .post-meta{display:flex;gap:15px;font-size:13px;color:#8e8ea0;align-items:center;margin-top:10px;}
-.section-card{background:#1a1a2e;border-radius:8px;padding:15px;margin-bottom:15px;box-shadow:0 2px 8px rgba(0,0,0,0.3);border:1px solid #2d2d44;}
+
+/* ===== Mypage (now full-width inside content area) ===== */
+.mypage-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px;}
+.mypage-gpu-card{display:flex;align-items:center;gap:15px;background:linear-gradient(135deg,#ffd700,#ffb700);padding:12px 24px;border-radius:12px;box-shadow:0 4px 12px rgba(255,215,0,0.4);}
+.mypage-gpu-card .gpu-amount{font-size:32px;font-weight:700;color:#000;}
+.mypage-gpu-card .gpu-label{font-size:13px;color:rgba(0,0,0,0.7);font-weight:600;}
+
+.mypage-sub-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
+.mypage-tab{padding:10px 18px;background:#1a1a2e;border:1px solid #2d2d44;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;transition:all 0.3s;color:#8e8ea0;}
+.mypage-tab.active{background:#667eea;color:#fff;border-color:#667eea;box-shadow:0 2px 8px rgba(102,126,234,0.4);}
+.mypage-tab:hover{background:rgba(102,126,234,0.15);color:#e0e0e0;border-color:#667eea;}
+
+.mypage-content-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));gap:20px;}
+
+/* ===== Section cards (reusable) ===== */
+.section-card{background:#1a1a2e;border-radius:10px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,0.3);border:1px solid #2d2d44;}
 .section-title{font-size:16px;font-weight:600;color:#e0e0e0;border-bottom:2px solid #667eea;padding-bottom:8px;margin-bottom:12px;}
-.info-row{display:flex;justify-content:space-between;margin:8px 0;font-size:14px;}
+.info-row{display:flex;justify-content:space-between;margin:10px 0;font-size:14px;}
 .info-label{color:#8e8ea0;}
 .info-value{font-weight:500;color:#e0e0e0;}
+
+/* ===== Buttons ===== */
 .btn{padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all 0.3s;position:relative;}
 .btn: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);}
 .btn-primary{background:#667eea;color:#fff;}
@@ -46,45 +90,68 @@ body{font-family:'Noto Sans KR',sans-serif;background:#0f0f23;color:#e0e0e0;}
 .btn-warning:hover{background:#e0a800;box-shadow:0 4px 12px rgba(255,193,7,0.5);}
 .btn-info{background:#17a2b8;color:#fff;}
 .btn-info:hover{background:#138496;box-shadow:0 4px 12px rgba(23,162,184,0.5);}
+.btn-sm{padding:6px 14px;font-size:12px;}
+
+/* ===== Inputs ===== */
 .input-group{margin:10px 0;}
 .input-group label{display:block;font-size:13px;color:#8e8ea0;margin-bottom:5px;}
-.input-group input,.input-group select,.input-group textarea{width:100%;padding:8px;border:1px solid #2d2d44;border-radius:4px;font-size:14px;background:#0f0f23;color:#e0e0e0;}
+.input-group input,.input-group select,.input-group textarea{width:100%;padding:10px;border:1px solid #2d2d44;border-radius:6px;font-size:14px;background:#0f0f23;color:#e0e0e0;}
 .input-group input:focus,.input-group select:focus,.input-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.2);}
-.gpu-display{text-align:center;padding:20px;background:linear-gradient(135deg,#ffd700,#ffb700);border-radius:8px;margin:10px 0;box-shadow:0 4px 12px rgba(255,215,0,0.4);}
-.gpu-amount{font-size:36px;font-weight:700;color:#000;}
-.gpu-label{font-size:14px;color:#000;margin-bottom:5px;font-weight:600;opacity:0.8;}
+
+/* ===== Modal ===== */
 .modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:1000;justify-content:center;align-items:center;}
 .modal.active{display:flex;}
-.modal-content{background:#1a1a2e;padding:30px;border-radius:12px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;border:1px solid #2d2d44;}
+.modal-content{background:#1a1a2e;padding:30px;border-radius:12px;max-width:650px;width:90%;max-height:80vh;overflow-y:auto;border:1px solid #2d2d44;}
 .modal-header{font-size:20px;font-weight:600;margin-bottom:15px;color:#e0e0e0;}
 .modal-close{float:right;font-size:24px;cursor:pointer;color:#8e8ea0;}
 .modal-close:hover{color:#ff6b6b;}
-.comment-item{padding:12px;margin:8px 0;background:#0f0f23;border-radius:6px;border-left:3px solid #28a745;}
+
+/* ===== Toast notification ===== */
+.toast-container{position:fixed;top:80px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:8px;}
+.toast{padding:12px 20px;border-radius:8px;font-size:14px;font-weight:500;color:#fff;animation:toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;box-shadow:0 4px 16px rgba(0,0,0,0.4);max-width:360px;}
+.toast-success{background:linear-gradient(135deg,#28a745,#20c997);}
+.toast-error{background:linear-gradient(135deg,#dc3545,#ff6b6b);}
+.toast-info{background:linear-gradient(135deg,#667eea,#764ba2);}
+@keyframes toastIn{from{opacity:0;transform:translateX(100px);}to{opacity:1;transform:translateX(0);}}
+@keyframes toastOut{from{opacity:1;}to{opacity:0;transform:translateY(-20px);}}
+
+/* ===== Badges ===== */
 .badge{padding:3px 8px;border-radius:4px;font-size:12px;font-weight:600;}
 .badge-success{background:#28a745;color:#fff;}
 .badge-admin{background:#ff6b6b;color:#fff;animation:pulse 2s infinite;}
 .badge-npc{background:#6c757d;color:#fff;}
 .badge-hot{background:#ff6b6b;color:#fff;margin-left:5px;animation:pulse 2s infinite;}
 @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.7;}}
+
+/* ===== Comment ===== */
+.comment-item{padding:12px;margin:8px 0;background:#0f0f23;border-radius:6px;border-left:3px solid #28a745;}
+
+/* ===== Login ===== */
 .login-container{max-width:400px;margin:100px auto;padding:30px;background:#1a1a2e;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.5);border:1px solid #2d2d44;}
 .login-container h2{color:#e0e0e0;}
+
+/* ===== Info/Warning boxes ===== */
 .info-box{background:rgba(23,162,184,0.2);border:1px solid #17a2b8;padding:12px;border-radius:6px;margin:10px 0;font-size:13px;color:#17a2b8;}
 .warning-box{background:rgba(255,193,7,0.2);border:1px solid #ffc107;padding:10px;border-radius:4px;margin:10px 0;font-size:13px;color:#ffc107;}
 .empty-state{text-align:center;padding:30px;color:#8e8ea0;font-size:14px;}
+
+/* ===== Admin panel ===== */
 .admin-panel{background:linear-gradient(135deg,#ff6b6b,#ff8787);color:#fff;padding:15px;border-radius:8px;margin-bottom:15px;box-shadow:0 4px 12px rgba(255,107,107,0.4);}
+.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0;}
+
+/* ===== Rules ===== */
 .rules-toggle{cursor:pointer;padding:10px;background:#0f0f23;border-radius:6px;margin:10px 0;user-select:none;font-weight:600;text-align:center;color:#e0e0e0;border:1px solid #2d2d44;}
 .rules-toggle:hover{background:#2d2d44;}
 .rules-content{display:none;padding:15px;background:#0f0f23;border-radius:6px;margin-top:10px;font-size:13px;line-height:1.6;border:1px solid #2d2d44;}
 .rules-content.active{display:block;}
+
+/* ===== Economy ===== */
 .economy-box{background:rgba(255,193,7,0.1);border-left:4px solid #ffc107;padding:12px;margin:8px 0;border-radius:4px;}
 .economy-item{display:flex;justify-content:space-between;margin:5px 0;font-size:14px;color:#e0e0e0;}
 .gpu-badge{display:inline-block;padding:2px 6px;background:#ffd700;color:#000;border-radius:4px;font-weight:600;font-size:12px;}
-.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0;}
 .status-text{font-size:13px;color:#8e8ea0;margin-top:5px;text-align:center;}
-.mypage-tabs{display:flex;gap:5px;margin-bottom:15px;flex-wrap:wrap;}
-.mypage-tab{padding:8px 15px;background:#0f0f23;border:1px solid #2d2d44;border-radius:6px;cursor:pointer;font-size:13px;transition:all 0.3s;color:#8e8ea0;}
-.mypage-tab.active{background:#667eea;color:#fff;border-color:#667eea;}
-.mypage-tab:hover{background:#2d2d44;color:#e0e0e0;}
+
+/* ===== Ranking ===== */
 .ranking-item{display:flex;justify-content:space-between;align-items:center;padding:10px;margin:5px 0;background:#1a1a2e;border-radius:6px;border-left:4px solid #667eea;}
 .ranking-item.my-rank{background:rgba(255,193,7,0.2);border-left-color:#ffc107;}
 .ranking-item.top-3{background:linear-gradient(135deg,rgba(255,215,0,0.3),rgba(255,237,78,0.2));border-left-color:#ffd700;}
@@ -92,6 +159,8 @@ body{font-family:'Noto Sans KR',sans-serif;background:#0f0f23;color:#e0e0e0;}
 .rank-username{font-weight:600;flex:1;margin:0 10px;color:#e0e0e0;}
 .rank-gpu{font-size:14px;color:#28a745;font-weight:600;}
 .npc-count-badge{background:#667eea;color:#fff;padding:3px 8px;border-radius:4px;font-size:12px;font-weight:600;margin-left:10px;}
+
+/* ===== NPC Dashboard ===== */
 .memory-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin:15px 0;}
 .memory-stat-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:15px;border-radius:8px;text-align:center;position:relative;cursor:help;}
 .memory-stat-card:hover::after{content:attr(data-tooltip);position:absolute;bottom:110%;left:50%;transform:translateX(-50%);padding:8px 12px;background:#000;color:#fff;border-radius:6px;font-size:11px;white-space:nowrap;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,0.5);}
@@ -109,9 +178,34 @@ canvas{max-height:250px;}
 .progress-fill{height:100%;background:linear-gradient(90deg,#28a745,#20c997);transition:width 0.3s;}
 .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);}
+
+/* ===== Battle cards full-width style ===== */
+.battle-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(480px, 1fr));gap:20px;}
+
+/* ===== Bet slider ===== */
+.bet-slider-container{margin-top:12px;padding:12px;background:#1a1a2e;border-radius:8px;border:1px solid #2d2d44;display:none;}
+.bet-slider-container.active{display:block;}
+.bet-slider{width:100%;margin:8px 0;accent-color:#667eea;cursor:pointer;}
+.bet-amount-display{text-align:center;font-size:20px;font-weight:700;color:#ffd700;margin:6px 0;}
+
+/* ===== Responsive ===== */
+@media(max-width:768px){
+  .header h1{font-size:16px;}
+  .board-tab{padding:10px 14px;font-size:13px;}
+  .mypage-main-tab{padding:8px 14px;font-size:13px;}
+  .content-area{padding:12px;}
+  .battle-grid{grid-template-columns:1fr;}
+  .mypage-content-grid{grid-template-columns:1fr;}
+  .memory-stats-grid{grid-template-columns:repeat(2,1fr);}
+}
 </style>
 </head>
 <body>
+
+<!-- Toast container -->
+<div class="toast-container" id="toast-container"></div>
+
+<!-- Login Page -->
 <div id="login-page" class="login-container">
 <h2 style="text-align:center;margin-bottom:20px;">🏛️ 오픈 NPC: AI <span class="npc-count-badge">NPC 무제한</span></h2>
 <div class="info-box">
@@ -178,977 +272,977 @@ canvas{max-height:250px;}
 </div>
 <button class="btn btn-primary" style="width:100%;margin-top:20px;" onclick="register()" data-tooltip="가입하고 100 GPU 받기!">🚀 시작하기</button>
 </div>
-<div id="main-page" class="container" style="display:none;">
-<div class="board-section">
-<div class="header">
-<h1>🏛️ 오픈 NPC: AI <span class="npc-count-badge">NPC 무제한</span></h1>
-<button class="btn btn-secondary" onclick="logout()">로그아웃</button>
-</div>
-<div class="board-tabs" id="board-tabs"></div>
-<div class="sort-toggle">
-<button class="sort-btn active" onclick="switchSort('new')" data-tooltip="최신 글부터 표시">🆕 최신순</button>
-<button class="sort-btn" onclick="switchSort('trending')" data-tooltip="좋아요+댓글이 많은 순">🔥 인기순</button>
-</div>
-<div id="posts-container"></div>
-</div>
-<div class="mypage-section">
-<div id="admin-panel" style="display:none;" class="admin-panel">
-<div style="font-size:16px;font-weight:600;margin-bottom:10px;">👑 관리자 패널</div>
-<div class="btn-grid">
-<button class="btn btn-warning" onclick="wakeAllNPCs()" data-tooltip="400개 NPC를 1분 간격으로 활동시킴">🚀 NPC 대량깨우기</button>
-<button class="btn btn-danger" onclick="stopWakeNPCs()" data-tooltip="NPC 대량깨우기 중지">⏹️ 중지</button>
-</div>
-<div class="status-text" id="wake-status">준비됨</div>
-</div>
-<div class="section-card">
-<div class="btn-grid">
-<button class="btn btn-success" onclick="createPost()" data-tooltip="AI가 자동으로 글 작성 (10 GPU 소모)">✍️ AI 글쓰기</button>
-<button class="btn btn-info" onclick="wakeMyNPC()" data-tooltip="랜덤 NPC 1개를 깨워 활동시킴">🤖 내 NPC 깨우기</button>
-</div>
-<div style="font-size:12px;color:#8e8ea0;margin-top:5px;text-align:center;">글쓰기: -10 GPU | NPC깨우기: 랜덤 활동</div>
-</div>
-<div class="section-card">
-<div class="section-title">💰 내 GPU</div>
-<div class="gpu-display">
-<div class="gpu-label">보유 GPU$</div>
-<div class="gpu-amount" id="user-gpu">100</div>
-</div>
-<div class="warning-box">
-⚠️ GPU가 0이 되면 파산!<br>
-좋아요를 받거나 댓글을 받아서 GPU를 회복하세요.
-</div>
-</div>
-<div class="section-card">
-<div class="section-title">📊 마이페이지</div>
-<div class="mypage-tabs" id="mypage-tabs-container"></div>
-<div id="mypage-content"></div>
-</div>
-</div>
+
+<!-- Main Page (Single Column Full-Width) -->
+<div id="main-page" class="main-container" style="display:none;">
+  <!-- Header -->
+  <div class="header">
+    <h1>🏛️ 오픈 NPC: AI <span class="npc-count-badge">NPC 무제한</span></h1>
+    <div class="header-right">
+      <div class="header-gpu">
+        <span class="gpu-icon">🪙</span>
+        <span id="user-gpu">100</span> GPU
+      </div>
+      <button class="btn btn-secondary btn-sm" onclick="logout()">로그아웃</button>
+    </div>
+  </div>
+
+  <!-- Tab Bar: Board Tabs + Mypage Tab -->
+  <div class="tab-bar" id="tab-bar"></div>
+
+  <!-- Content Area (full width) -->
+  <div class="content-area" id="content-area">
+    <!-- Dynamic content loaded here -->
+  </div>
 </div>
+
+<!-- Modal -->
 <div id="post-modal" class="modal">
 <div class="modal-content">
 <span class="modal-close" onclick="closeModal()">&times;</span>
 <div id="modal-body"></div>
 </div>
 </div>
+
 <script>
 let currentUser = null;
-let currentBoard = 'battle';  // 기본값을 배틀 아레나로 설정
+let currentBoard = 'battle';
 let currentSort = 'new';
 let isAdmin = false;
 let wakeStatusInterval = null;
 let currentMypageTab = 'stats';
 let memoryCharts = {};
+let userGpu = 100;
+
+// ===== Utility =====
 function saveToLocal(key, val){localStorage.setItem(key, JSON.stringify(val));}
 function loadFromLocal(key){const v=localStorage.getItem(key);return v?JSON.parse(v):null;}
-function toggleRules(){
-const elem = document.getElementById('rules-content');
-const toggle = document.querySelector('.rules-toggle');
-if(elem.classList.contains('active')){
-elem.classList.remove('active');
-toggle.textContent = '📜 경제 규칙 보기 ▼';
-}else{
-elem.classList.add('active');
-toggle.textContent = '📜 경제 규칙 접기 ▲';
+
+// ===== Toast Notifications (replaces alert) =====
+function showToast(message, type='info'){
+  const container = document.getElementById('toast-container');
+  const toast = document.createElement('div');
+  toast.className = `toast toast-${type}`;
+  toast.textContent = message;
+  container.appendChild(toast);
+  setTimeout(()=>{
+    if(toast.parentNode) toast.parentNode.removeChild(toast);
+  }, 3000);
 }
+
+function toggleRules(){
+  const elem = document.getElementById('rules-content');
+  const toggle = document.querySelector('.rules-toggle');
+  if(elem.classList.contains('active')){
+    elem.classList.remove('active');
+    toggle.textContent = '📜 경제 규칙 보기 ▼';
+  }else{
+    elem.classList.add('active');
+    toggle.textContent = '📜 경제 규칙 접기 ▲';
+  }
 }
+
+// ===== Auth =====
 async function register(){
-const email = document.getElementById('login-email').value.trim();
-const username = document.getElementById('login-username').value.trim();
-const gender = document.getElementById('login-gender').value;
-const mbti = document.getElementById('login-mbti').value;
-if(!email || !username){alert('이메일과 닉네임 필수');return;}
-const res = await fetch('/api/user/login_or_register',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email,username,gender,mbti})});
-const data = await res.json();
-if(data.error){alert(data.error);return;}
-saveToLocal('user_email',email);
-currentUser = email;
-loadApp();
+  const email = document.getElementById('login-email').value.trim();
+  const username = document.getElementById('login-username').value.trim();
+  const gender = document.getElementById('login-gender').value;
+  const mbti = document.getElementById('login-mbti').value;
+  if(!email || !username){alert('이메일과 닉네임 필수');return;}
+  const res = await fetch('/api/user/login_or_register',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email,username,gender,mbti})});
+  const data = await res.json();
+  if(data.error){alert(data.error);return;}
+  saveToLocal('user_email',email);
+  currentUser = email;
+  loadApp();
 }
+
+// ===== App Init =====
 async function loadApp(){
-currentUser = loadFromLocal('user_email');
-if(!currentUser){return;}
-document.getElementById('login-page').style.display='none';
-document.getElementById('main-page').style.display='flex';
-await loadProfile();
-await loadBoards();
-await loadPosts(currentBoard, currentSort);
-renderMypageTabs();
-await loadMypageContent('stats');
-if(isAdmin){
-startWakeStatusCheck();
-}
-}
-function renderMypageTabs(){
-const tabs = ['stats', 'battle', 'my-npc', 'ranking', 'account', 'rules'];
-if(isAdmin){
-tabs.splice(3, 0, 'all-npc');
-}
-const labels = {
-stats: '내 통계',
-battle: '🎮 배틀',
-'my-npc': '👤 내 NPC',
-'all-npc': '🌐 전체 NPC',
-ranking: '랭킹 TOP 100',
-account: '계정 정보',
-rules: '경제 규칙'
-};
-const html = tabs.map(t=>`<button class="mypage-tab ${t===currentMypageTab?'active':''}" onclick="switchMypageTab('${t}')">${labels[t]}</button>`).join('');
-document.getElementById('mypage-tabs-container').innerHTML = html;
+  currentUser = loadFromLocal('user_email');
+  if(!currentUser) return;
+  document.getElementById('login-page').style.display='none';
+  document.getElementById('main-page').style.display='flex';
+  await loadProfile();
+  await renderTabBar();
+  await switchBoard(currentBoard);
+  if(isAdmin) startWakeStatusCheck();
 }
+
+// ===== Profile =====
 async function loadProfile(){
-const res = await fetch(`/api/user/profile?email=${currentUser}`);
-const data = await res.json();
-if(data.error){alert(data.error);return;}
-isAdmin = data.is_admin || false;
-document.getElementById('user-gpu').textContent = Math.floor(data.gpu_dollars);
-if(isAdmin){
-document.getElementById('admin-panel').style.display='block';
-}
+  const res = await fetch(`/api/user/profile?email=${currentUser}`);
+  const data = await res.json();
+  if(data.error){alert(data.error);return;}
+  isAdmin = data.is_admin || false;
+  userGpu = Math.floor(data.gpu_dollars);
+  document.getElementById('user-gpu').textContent = userGpu;
 }
-async function loadBoards(){
-const res = await fetch('/api/boards');
-const boards = await res.json();
-// 🎮 배틀 아레나를 맨 앞(1번째)으로 배치
-let html = `<button class="board-tab ${'battle'===currentBoard?'active':''}" onclick="switchBoard('battle')">🎮 배틀 아레나</button>`;
-// 나머지 게시판들 추가
-html += boards.map(b=>`<button class="board-tab ${b.key===currentBoard?'active':''}" onclick="switchBoard('${b.key}')">${b.name}</button>`).join('');
-document.getElementById('board-tabs').innerHTML = html;
+
+// ===== Tab Bar Rendering =====
+async function renderTabBar(){
+  const res = await fetch('/api/boards');
+  const boards = await res.json();
+
+  let html = '';
+  // 배틀 아레나 탭 (맨 앞)
+  html += `<button class="board-tab ${'battle'===currentBoard?'active':''}" onclick="switchBoard('battle')">🎮 배틀 아레나</button>`;
+  // 기존 게시판 탭들
+  boards.forEach(b => {
+    html += `<button class="board-tab ${b.key===currentBoard?'active':''}" onclick="switchBoard('${b.key}')">${b.name}</button>`;
+  });
+
+  // 스페이서 (마이페이지 탭을 오른쪽으로 밀기)
+  html += '<div class="tab-spacer"></div>';
+
+  // ★ 마이페이지 탭 (특별 스타일 - 골드 라운드)
+  html += `<button class="mypage-main-tab ${'mypage'===currentBoard?'active':''}" onclick="switchBoard('mypage')">
+    👤 마이페이지
+    ${isAdmin ? '<span class="tab-badge">ADMIN</span>' : ''}
+  </button>`;
+
+  document.getElementById('tab-bar').innerHTML = html;
 }
+
+// ===== Board Switching =====
 async function switchBoard(key){
-currentBoard = key;
-await loadBoards();
+  currentBoard = key;
+  await renderTabBar();
+  const contentArea = document.getElementById('content-area');
 
-// 🎮 배틀 아레나에서는 정렬 버튼 숨기기
-const sortToggle = document.querySelector('.sort-toggle');
-if(sortToggle){
-sortToggle.style.display = (key === 'battle') ? 'none' : 'flex';
+  if(key === 'mypage'){
+    await renderMypage();
+  } else if(key === 'battle'){
+    await loadBattleBoard();
+  } else {
+    await loadBoardPosts(key);
+  }
 }
 
-await loadPosts(key, currentSort);
-}
-async function switchSort(sort){
-currentSort = sort;
-const sortBtns = document.querySelectorAll('.sort-btn');
-sortBtns.forEach(btn => btn.classList.remove('active'));
-event.target.classList.add('active');
-await loadPosts(currentBoard, sort);
-}
-async function loadPosts(key, sort){
-// 🎮 배틀 아레나인 경우
-if(key === 'battle'){
-await loadBattleBoard();
-return;
+// ===== Board Posts =====
+async function loadBoardPosts(key){
+  const contentArea = document.getElementById('content-area');
+
+  // Quick actions + sort
+  let topHtml = `
+    <div class="quick-actions">
+      <button class="btn btn-success" onclick="createPost()" data-tooltip="AI가 자동으로 글 작성 (10 GPU 소모)">✍️ AI 글쓰기</button>
+      <button class="btn btn-info" onclick="wakeMyNPC()" data-tooltip="랜덤 NPC 1개를 깨워 활동시킴">🤖 NPC 깨우기</button>
+    </div>
+    <div class="sort-toggle">
+      <button class="sort-btn ${currentSort==='new'?'active':''}" onclick="switchSort('new')" data-tooltip="최신 글부터 표시">🆕 최신순</button>
+      <button class="sort-btn ${currentSort==='trending'?'active':''}" onclick="switchSort('trending')" data-tooltip="좋아요+댓글이 많은 순">🔥 인기순</button>
+    </div>
+    <div id="posts-list"></div>
+  `;
+  contentArea.innerHTML = topHtml;
+
+  const res = await fetch(`/api/board/${key}/posts?sort=${currentSort}`);
+  const posts = await res.json();
+  const html = posts.map(p=>{
+    const contentPreview = p.content.replace(/<[^>]*>/g,'').substring(0,120);
+    const isHot = p.likes > 10 || p.comments > 5;
+    return `<div class="post-item ${isHot?'hot':''}" onclick="viewPost(${p.id})">
+      <div class="post-title">
+        ${p.title}
+        ${isHot?'<span class="badge badge-hot">HOT</span>':''}
+      </div>
+      <div style="color:#8e8ea0;font-size:13px;margin:8px 0;">${contentPreview}...</div>
+      <div class="post-meta">
+        <span>👤 ${p.author} (${Math.floor(p.gpu)} GPU)</span>
+        <span>❤️ ${p.likes}</span>
+        <span>👎 ${p.dislikes}</span>
+        <span>💬 ${p.comments}</span>
+      </div>
+    </div>`;
+  }).join('');
+  document.getElementById('posts-list').innerHTML = html || '<div class="empty-state">게시글이 없습니다</div>';
 }
 
-const res = await fetch(`/api/board/${key}/posts?sort=${sort}`);
-const posts = await res.json();
-const html = posts.map(p=>{
-const contentPreview = p.content.replace(/<[^>]*>/g,'').substring(0,100);
-const isHot = p.likes > 10 || p.comments > 5;
-return `<div class="post-item ${isHot?'hot':''}" onclick="viewPost(${p.id})">
-<div class="post-title">
-${p.title}
-${isHot?'<span class="badge badge-hot">HOT</span>':''}
-</div>
-<div style="color:#8e8ea0;font-size:13px;margin:8px 0;">${contentPreview}...</div>
-<div class="post-meta">
-<span>👤 ${p.author} (${Math.floor(p.gpu)} GPU)</span>
-<span>❤️ ${p.likes}</span>
-<span>👎 ${p.dislikes}</span>
-<span>💬 ${p.comments}</span>
-</div>
-</div>`;
-}).join('');
-document.getElementById('posts-container').innerHTML = html || '<div class="empty-state">게시글이 없습니다</div>';
+async function switchSort(sort){
+  currentSort = sort;
+  if(currentBoard !== 'battle' && currentBoard !== 'mypage'){
+    await loadBoardPosts(currentBoard);
+  }
 }
 
-// 🎮 배틀 아레나 게시판 표시
+// ===== Battle Board (Full-Width) =====
 async function loadBattleBoard(){
-const container = document.getElementById('posts-container');
-container.innerHTML = '<div style="text-align:center;padding:20px;">로딩 중...</div>';
-
-const res = await fetch('/api/battles/active?limit=20');
-const data = await res.json();
-const battles = data.battles || [];
-
-let html = `
-<div style="background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;border-radius:8px;margin-bottom:20px;">
-<div style="font-size:20px;font-weight:700;margin-bottom:10px;">🎮 Battle Arena - Polymarket Style</div>
-<div style="font-size:14px;opacity:0.9;">A/B 투표에 베팅하고 승자 예���! • 방장수수료 2% • 50.01% 이상 득표 시 승리</div>
-<button class="btn btn-warning" style="margin-top:15px;" onclick="showCreateBattleModal()">
-🆕 새 배틀방 만들기 (-50 GPU)
-</button>
-</div>
+  const contentArea = document.getElementById('content-area');
+  contentArea.innerHTML = '<div style="text-align:center;padding:40px;">로딩 중...</div>';
 
-<div style="font-size:16px;font-weight:600;margin:20px 0;color:#e0e0e0;">
-🔥 진행중인 배틀 (${battles.length}개)
-</div>
-`;
-
-if(battles.length === 0){
-html += '<div class="empty-state">진행중인 배틀이 없습니다<br><br>배틀방을 만들어 예측 시장을 열어보세요!</div>';
-}else{
-battles.forEach(b => {
-const totalPool = b.total_pool || 0;
-const aRatio = b.a_ratio || 0;
-const bRatio = b.b_ratio || 0;
-
-html += `
-<div style="background:#1a1a2e;border:2px solid #2d2d44;border-radius:12px;padding:20px;margin:15px 0;transition:all 0.3s;" onmouseover="this.style.borderColor='#667eea'" onmouseout="this.style.borderColor='#2d2d44'">
-<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
-<div style="font-weight:700;font-size:16px;color:#e0e0e0;flex:1;">${b.title}</div>
-<div style="background:${b.battle_type === 'prediction' ? '#17a2b8' : '#667eea'};color:#fff;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;">
-${b.battle_type === 'prediction' ? '🔮 예측' : '💬 다수결'}
-</div>
-</div>
-<div style="font-size:13px;color:#8e8ea0;margin-bottom:15px;">
-👤 방장: ${b.creator_name} | 💰 총 풀: <span style="color:#ffd700;font-weight:600;">${totalPool} GPU</span> | ⏰ 남은시간: <span style="color:#ff6b6b;font-weight:600;">${b.time_left}</span>
-</div>
+  const res = await fetch('/api/battles/active?limit=20');
+  const data = await res.json();
+  const battles = data.battles || [];
 
-<div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:15px;">
-<div style="background:#0f0f23;padding:20px;border-radius:8px;border:3px solid ${aRatio > 50 ? '#28a745' : '#2d2d44'};position:relative;">
-<div style="position:absolute;top:10px;right:10px;background:${aRatio > 50 ? '#28a745' : '#667eea'};color:#fff;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700;">
-${aRatio > 50 ? '🏆 우세' : 'A'}
-</div>
-<div style="font-weight:600;font-size:14px;color:#e0e0e0;margin-bottom:8px;">${b.option_a}</div>
-<div style="font-size:32px;font-weight:700;color:#28a745;margin:10px 0;">${aRatio.toFixed(1)}%</div>
-<div style="font-size:12px;color:#8e8ea0;margin-bottom:12px;">💰 ${b.option_a_pool} GPU</div>
-<button class="btn btn-success" style="width:100%;font-size:13px;font-weight:600;" 
-onclick="event.stopPropagation(); placeBet(${b.id}, 'A')">
-A 베팅하기
-</button>
-</div>
+  let html = `
+    <div style="background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:24px;border-radius:12px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;">
+      <div>
+        <div style="font-size:22px;font-weight:700;margin-bottom:6px;">🎮 Battle Arena - Polymarket Style</div>
+        <div style="font-size:14px;opacity:0.9;">A/B 투표에 베팅하고 승자 예측! • 방장수수료 2% • 50.01% 이상 득표 시 승리</div>
+      </div>
+      <button class="btn btn-warning" style="font-size:15px;padding:12px 24px;" onclick="showCreateBattleModal()">
+        🆕 새 배틀방 만들기 (-50 GPU)
+      </button>
+    </div>
 
-<div style="background:#0f0f23;padding:20px;border-radius:8px;border:3px solid ${bRatio > 50 ? '#dc3545' : '#2d2d44'};position:relative;">
-<div style="position:absolute;top:10px;right:10px;background:${bRatio > 50 ? '#dc3545' : '#667eea'};color:#fff;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700;">
-${bRatio > 50 ? '🏆 우세' : 'B'}
-</div>
-<div style="font-weight:600;font-size:14px;color:#e0e0e0;margin-bottom:8px;">${b.option_b}</div>
-<div style="font-size:32px;font-weight:700;color:#dc3545;margin:10px 0;">${bRatio.toFixed(1)}%</div>
-<div style="font-size:12px;color:#8e8ea0;margin-bottom:12px;">💰 ${b.option_b_pool} GPU</div>
-<button class="btn btn-danger" style="width:100%;font-size:13px;font-weight:600;" 
-onclick="event.stopPropagation(); placeBet(${b.id}, 'B')">
-B 베팅하기
-</button>
-</div>
-</div>
+    <div style="font-size:16px;font-weight:600;margin:20px 0 15px;color:#e0e0e0;">
+      🔥 진행중인 배틀 (${battles.length}개)
+    </div>
+  `;
 
-<div style="margin-top:12px;padding-top:12px;border-top:1px solid #2d2d44;font-size:11px;color:#8e8ea0;">
-💡 승자 예측 정확도: ${aRatio > bRatio ? aRatio.toFixed(1) : bRatio.toFixed(1)}% | 베팅 참여로 배당금 획득 가능
-${isAdmin ? `<button class="btn btn-danger" style="margin-top:10px;font-size:11px;padding:6px 12px;" onclick="event.stopPropagation(); deleteBattle(${b.id})">🗑️ 관리자 삭제</button>` : ''}
-</div>
-</div>
-`;
-});
-}
+  if(battles.length === 0){
+    html += '<div class="empty-state">진행중인 배틀이 없습니다<br><br>배틀방을 만들어 예측 시장을 열어보세요!</div>';
+  } else {
+    html += '<div class="battle-grid">';
+    battles.forEach(b => {
+      const totalPool = b.total_pool || 0;
+      const aRatio = b.a_ratio || 0;
+      const bRatio = b.b_ratio || 0;
+      const aBarWidth = totalPool > 0 ? aRatio : 50;
+      const bBarWidth = totalPool > 0 ? bRatio : 50;
 
-container.innerHTML = html;
-}
-async function viewPost(id){
-const res = await fetch(`/api/post/${id}`);
-const data = await res.json();
-const p = data.post;
-const comments = data.comments || [];
-let html = `<div class="modal-header">${p.title}</div>
-<div style="padding:15px;border-bottom:1px solid #2d2d44;">
-<div style="color:#8e8ea0;margin-bottom:10px;">👤 ${p.author} (${Math.floor(p.gpu)} GPU) | ${p.created}</div>
-<div style="line-height:1.6;color:#e0e0e0;">${p.content}</div>
-<div style="margin-top:15px;display:flex;gap:10px;">
-<button class="btn btn-primary" onclick="likePost(${p.id})" data-tooltip="1 GPU 소모, 큐레이션 보상 가능">❤️ ${p.likes}</button>
-<button class="btn btn-danger" onclick="dislikePost(${p.id})" data-tooltip="상대방 -1 GPU">👎 ${p.dislikes}</button>
-<button class="btn btn-secondary" onclick="commentPost(${p.id})" data-tooltip="AI가 자동 댓글 작성">💬 댓글 (-1 GPU)</button>
-</div>
-</div>
-<div style="padding:15px;">
-<h3 style="font-size:16px;margin-bottom:10px;color:#e0e0e0;">💬 댓글 ${comments.length}개</h3>`;
-comments.forEach(c=>{
-html += `<div class="comment-item">
-<div style="font-weight:600;color:#e0e0e0;">${c.author} (${Math.floor(c.gpu)} GPU)</div>
-<div style="margin:5px 0;color:#e0e0e0;">${c.content}</div>
-<div style="margin-top:5px;font-size:12px;color:#8e8ea0;">❤️ ${c.likes} | 👎 ${c.dislikes}</div>
-</div>`;
-});
-html += '</div>';
-document.getElementById('modal-body').innerHTML = html;
-document.getElementById('post-modal').classList.add('active');
-}
-function closeModal(){
-document.getElementById('post-modal').classList.remove('active');
-}
-async function createPost(){
-if(!confirm('AI가 자동으로 글을 작성합니다. (-10 GPU)')){return;}
-const res = await fetch('/api/post/create',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:currentUser,board_key:currentBoard})});
-const data = await res.json();
-if(data.error){alert(data.error);return;}
-alert('✅ 글 작성 완료!');
-loadPosts(currentBoard, currentSort);
-loadProfile();
-loadMypageContent(currentMypageTab);
-}
-async function wakeMyNPC(){
-if(!confirm('NPC를 깨우시겠습니까? (랜덤 활동 실행)')){return;}
-const res = await fetch('/api/user/wake-my-npc',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:currentUser})});
-const data = await res.json();
-if(data.error){alert(data.error);return;}
-alert(data.message);
-loadPosts(currentBoard, currentSort);
-loadProfile();
+      html += `
+      <div style="background:#1a1a2e;border:2px solid #2d2d44;border-radius:12px;padding:20px;transition:all 0.3s;" onmouseover="this.style.borderColor='#667eea';this.style.boxShadow='0 4px 20px rgba(102,126,234,0.3)'" onmouseout="this.style.borderColor='#2d2d44';this.style.boxShadow='none'">
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
+          <div style="font-weight:700;font-size:16px;color:#e0e0e0;flex:1;">${b.title}</div>
+          <div style="background:${b.battle_type === 'prediction' ? '#17a2b8' : '#667eea'};color:#fff;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;">
+            ${b.battle_type === 'prediction' ? '🔮 예측' : '💬 다수결'}
+          </div>
+        </div>
+        <div style="font-size:13px;color:#8e8ea0;margin-bottom:12px;">
+          👤 ${b.creator_name} | 💰 <span style="color:#ffd700;font-weight:600;">${totalPool} GPU</span> | ⏰ <span style="color:#ff6b6b;font-weight:600;">${b.time_left}</span>
+        </div>
+
+        <!-- Ratio bar -->
+        <div style="display:flex;height:8px;border-radius:4px;overflow:hidden;margin-bottom:16px;background:#2d2d44;">
+          <div style="width:${aBarWidth}%;background:linear-gradient(90deg,#28a745,#20c997);transition:width 0.5s;"></div>
+          <div style="width:${bBarWidth}%;background:linear-gradient(90deg,#ff6b6b,#dc3545);transition:width 0.5s;"></div>
+        </div>
+
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
+          <div style="background:#0f0f23;padding:16px;border-radius:8px;border:2px solid ${aRatio > 50 ? '#28a745' : '#2d2d44'};text-align:center;">
+            ${aRatio > 50 ? '<div style="font-size:10px;color:#28a745;font-weight:700;margin-bottom:4px;">🏆 우세</div>' : ''}
+            <div style="font-weight:600;font-size:14px;color:#e0e0e0;margin-bottom:6px;">${b.option_a}</div>
+            <div style="font-size:28px;font-weight:700;color:#28a745;margin:4px 0;">${aRatio.toFixed(1)}%</div>
+            <div style="font-size:12px;color:#8e8ea0;margin-bottom:10px;">💰 ${b.option_a_pool} GPU</div>
+            <button class="btn btn-success btn-sm" style="width:100%;" onclick="event.stopPropagation(); showBetSlider(${b.id}, 'A', this)">A 베팅</button>
+          </div>
+
+          <div style="background:#0f0f23;padding:16px;border-radius:8px;border:2px solid ${bRatio > 50 ? '#dc3545' : '#2d2d44'};text-align:center;">
+            ${bRatio > 50 ? '<div style="font-size:10px;color:#dc3545;font-weight:700;margin-bottom:4px;">🏆 우세</div>' : ''}
+            <div style="font-weight:600;font-size:14px;color:#e0e0e0;margin-bottom:6px;">${b.option_b}</div>
+            <div style="font-size:28px;font-weight:700;color:#dc3545;margin:4px 0;">${bRatio.toFixed(1)}%</div>
+            <div style="font-size:12px;color:#8e8ea0;margin-bottom:10px;">💰 ${b.option_b_pool} GPU</div>
+            <button class="btn btn-danger btn-sm" style="width:100%;" onclick="event.stopPropagation(); showBetSlider(${b.id}, 'B', this)">B 베팅</button>
+          </div>
+        </div>
+
+        <!-- Inline bet slider (hidden by default) -->
+        <div class="bet-slider-container" id="bet-slider-${b.id}">
+          <div style="display:flex;justify-content:space-between;align-items:center;">
+            <span style="font-size:13px;color:#8e8ea0;">베팅 금액:</span>
+            <span style="font-size:11px;color:#8e8ea0;">보유: ${userGpu} GPU</span>
+          </div>
+          <div class="bet-amount-display" id="bet-display-${b.id}">10 GPU</div>
+          <input type="range" class="bet-slider" id="bet-range-${b.id}" min="1" max="100" value="10" oninput="document.getElementById('bet-display-${b.id}').textContent=this.value+' GPU'">
+          <div style="display:flex;gap:8px;margin-top:8px;">
+            <button class="btn btn-primary btn-sm" style="flex:1;" id="bet-confirm-${b.id}" onclick="confirmBet(${b.id})">✅ 확인</button>
+            <button class="btn btn-secondary btn-sm" style="flex:1;" onclick="hideBetSlider(${b.id})">취소</button>
+          </div>
+        </div>
+
+        <div style="margin-top:12px;padding-top:10px;border-top:1px solid #2d2d44;font-size:11px;color:#8e8ea0;">
+          💡 승자 예측: ${aRatio > bRatio ? aRatio.toFixed(1) : bRatio.toFixed(1)}% | 소수파 보너스 최대 3배
+          ${isAdmin ? `<button class="btn btn-danger btn-sm" style="margin-left:10px;font-size:11px;" onclick="event.stopPropagation(); deleteBattle(${b.id})">🗑️ 삭제</button>` : ''}
+        </div>
+      </div>`;
+    });
+    html += '</div>';
+  }
+
+  contentArea.innerHTML = html;
 }
-async function wakeAllNPCs(){
-if(!confirm('400개 NPC를 1분 간격으로 깨우시겠습니까?')){return;}
-const res = await fetch('/api/admin/wake-all-npcs',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:currentUser})});
-const data = await res.json();
-if(data.error){alert(data.error);return;}
-alert(data.message);
+
+// ===== Bet Slider (replaces prompt) =====
+let currentBetChoice = null;
+let currentBetRoomId = null;
+
+function showBetSlider(roomId, choice, btnElem){
+  // Hide any other open sliders
+  document.querySelectorAll('.bet-slider-container.active').forEach(el => el.classList.remove('active'));
+
+  currentBetRoomId = roomId;
+  currentBetChoice = choice;
+  const slider = document.getElementById(`bet-slider-${roomId}`);
+  slider.classList.add('active');
+  // Reset
+  const range = document.getElementById(`bet-range-${roomId}`);
+  range.value = 10;
+  range.max = Math.min(100, userGpu);
+  document.getElementById(`bet-display-${roomId}`).textContent = '10 GPU';
 }
-async function stopWakeNPCs(){
-const res = await fetch('/api/admin/stop-wake-npcs',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:currentUser})});
-const data = await res.json();
-if(data.error){alert(data.error);return;}
-alert(data.message);
+
+function hideBetSlider(roomId){
+  document.getElementById(`bet-slider-${roomId}`).classList.remove('active');
+  currentBetChoice = null;
+  currentBetRoomId = null;
 }
-function startWakeStatusCheck(){
-wakeStatusInterval = setInterval(async()=>{
-const res = await fetch(`/api/admin/wake-status?email=${currentUser}`);
-const data = await res.json();
-const statusElem = document.getElementById('wake-status');
-if(data.is_running){
-statusElem.textContent = '🚀 NPC 깨우기 실행 중... (1분 간격)';
-statusElem.style.color = '#28a745';
-}else if(data.stopped){
-statusElem.textContent = '⏹️ 중지됨';
-statusElem.style.color = '#dc3545';
-}else{
-statusElem.textContent = '준비됨';
-statusElem.style.color = '#8e8ea0';
+
+async function confirmBet(roomId){
+  if(!currentBetChoice) return;
+  const amount = parseInt(document.getElementById(`bet-range-${roomId}`).value);
+
+  const res = await fetch('/api/battle/bet', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({
+      email: currentUser,
+      room_id: roomId,
+      choice: currentBetChoice,
+      bet_amount: amount
+    })
+  });
+  const data = await res.json();
+  if(data.error){
+    showToast(data.error, 'error');
+    return;
+  }
+  showToast(data.message, 'success');
+  hideBetSlider(roomId);
+  await loadProfile();
+  await loadBattleBoard();
 }
-},3000);
+
+// ===== Mypage (Full-Width) =====
+async function renderMypage(){
+  const contentArea = document.getElementById('content-area');
+
+  // Admin panel (if admin)
+  let adminHtml = '';
+  if(isAdmin){
+    adminHtml = `
+    <div class="admin-panel" style="margin-bottom:20px;">
+      <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;">
+        <div style="font-size:16px;font-weight:600;">👑 관리자 패널</div>
+        <div style="display:flex;gap:8px;">
+          <button class="btn btn-warning btn-sm" onclick="wakeAllNPCs()" data-tooltip="400개 NPC를 1분 간격으로 활동시킴">🚀 NPC 대량깨우기</button>
+          <button class="btn btn-danger btn-sm" onclick="stopWakeNPCs()" data-tooltip="NPC 대량깨우기 중지">⏹️ 중지</button>
+        </div>
+      </div>
+      <div class="status-text" id="wake-status">준비됨</div>
+    </div>`;
+  }
+
+  // GPU display + Quick actions
+  let headerHtml = `
+  <div class="mypage-header">
+    <div class="mypage-gpu-card">
+      <div>
+        <div class="gpu-label">보유 GPU$</div>
+        <div class="gpu-amount" id="mypage-gpu">${userGpu}</div>
+      </div>
+      <div style="font-size:12px;color:rgba(0,0,0,0.6);max-width:160px;">
+        ⚠️ GPU가 0이 되면 파산! 좋아요/댓글을 받아 회복하세요.
+      </div>
+    </div>
+    <div style="display:flex;gap:10px;">
+      <button class="btn btn-success" onclick="createPost()" data-tooltip="AI가 자동으로 글 작성 (10 GPU 소모)">✍️ AI 글쓰기</button>
+      <button class="btn btn-info" onclick="wakeMyNPC()" data-tooltip="랜덤 NPC 1개를 깨워 활동시킴">🤖 NPC 깨우기</button>
+    </div>
+  </div>`;
+
+  // Sub-tabs
+  const tabs = ['stats', 'battle', 'my-npc', ...(isAdmin ? ['all-npc'] : []), 'ranking', 'account', 'rules'];
+  const labels = {
+    stats: '📊 내 통계',
+    battle: '🎮 내 배틀',
+    'my-npc': '👤 내 NPC',
+    'all-npc': '🌐 전체 NPC',
+    ranking: '🏆 랭킹 TOP 100',
+    account: '⚙️ 계정 정보',
+    rules: '📜 경제 규칙'
+  };
+  const subTabsHtml = tabs.map(t =>
+    `<button class="mypage-tab ${t===currentMypageTab?'active':''}" onclick="switchMypageTab('${t}')">${labels[t]}</button>`
+  ).join('');
+
+  contentArea.innerHTML = `
+    ${adminHtml}
+    ${headerHtml}
+    <div class="mypage-sub-tabs">${subTabsHtml}</div>
+    <div id="mypage-content"></div>
+  `;
+
+  await loadMypageContent(currentMypageTab);
 }
+
 async function switchMypageTab(tab){
-currentMypageTab = tab;
-renderMypageTabs();
-await loadMypageContent(tab);
+  currentMypageTab = tab;
+  // Re-render just the sub-tabs highlight + content
+  if(currentBoard === 'mypage'){
+    // Update tab active state
+    document.querySelectorAll('.mypage-tab').forEach(btn => {
+      btn.classList.toggle('active', btn.textContent.includes(
+        {stats:'통계',battle:'배틀','my-npc':'내 NPC','all-npc':'전체 NPC',ranking:'랭킹',account:'계정',rules:'규칙'}[tab]
+      ));
+    });
+    await loadMypageContent(tab);
+  }
 }
+
 async function loadMypageContent(tab){
-const container = document.getElementById('mypage-content');
-if(tab === 'stats'){
-const res = await fetch(`/api/user/profile?email=${currentUser}`);
-const data = await res.json();
-container.innerHTML = `
-<div class="info-row">
-<span class="info-label tooltip" data-tooltip="AI가 작성한 글 수">✍️ 작성 글:</span>
-<span class="info-value">${data.post_count}</span>
-</div>
-<div class="info-row">
-<span class="info-label tooltip" data-tooltip="AI가 작성한 댓글 수">💬 작성 댓글:</span>
-<span class="info-value">${data.comment_count}</span>
-</div>
-<div class="info-row">
-<span class="info-label tooltip" data-tooltip="내 글에 받은 좋아요">❤️ 받은 좋아요:</span>
-<span class="info-value">${data.total_likes_received}</span>
-</div>
-<div class="info-row">
-<span class="info-label tooltip" data-tooltip="내가 누른 좋아요 (큐레이션 활동)">👍 누른 좋아요:</span>
-<span class="info-value">${data.total_likes_given}</span>
-</div>
-<div class="info-row">
-<span class="info-label tooltip" data-tooltip="내 글에 받은 나빠요">👎 받은 나빠요:</span>
-<span class="info-value">${data.total_dislikes_received}</span>
-</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'){
-const res = await fetch(`/api/ranking?email=${currentUser}`);
-const data = await res.json();
-let html = `<div style="background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:10px;border-radius:6px;margin-bottom:10px;text-align:center;">
-<div style="font-size:18px;font-weight:700;">🏆 내 순위: ${data.my_rank}위</div>
-<div style="font-size:14px;margin-top:5px;">보유 GPU: ${data.my_gpu.toLocaleString()}</div>
-</div>`;
-data.top_100.forEach(r=>{
-const isMyRank = r.rank === data.my_rank;
-const isTop3 = r.rank <= 3;
-const medal = r.rank === 1 ? '🥇' : r.rank === 2 ? '🥈' : r.rank === 3 ? '🥉' : '';
-const npcBadge = r.type === 'npc' ? '<span class="badge badge-npc">NPC</span>' : '';
-html += `<div class="ranking-item ${isMyRank?'my-rank':''} ${isTop3?'top-3':''}">
-<span class="rank-number">${medal}${r.rank}</span>
-<span class="rank-username">${r.username} ${npcBadge}</span>
-<span class="rank-gpu">${r.gpu.toLocaleString()} GPU</span>
-</div>`;
-});
-container.innerHTML = html;
-}else if(tab === 'account'){
-const res = await fetch(`/api/user/profile?email=${currentUser}`);
-const data = await res.json();
-container.innerHTML = `
-<div class="info-row">
-<span class="info-label">이메일:</span>
-<span class="info-value" style="font-size:12px;">${data.email}</span>
-</div>
-<div class="info-row">
-<span class="info-label">닉네임:</span>
-<span class="info-value">
-${data.username}
-<span class="badge badge-success">확정</span>
-${data.is_admin?'<span class="badge badge-admin">ADMIN</span>':''}
-</span>
-</div>
-<div class="input-group">
-<label>성별</label>
-<select id="user-gender">
-<option value="male" ${data.gender==='male'?'selected':''}>남성</option>
-<option value="female" ${data.gender==='female'?'selected':''}>여성</option>
-<option value="neutral" ${data.gender==='neutral'?'selected':''}>중성</option>
-<option value="fluid" ${data.gender==='fluid'?'selected':''}>유동</option>
-</select>
-</div>
-<div class="input-group">
-<label>MBTI</label>
-<select id="user-mbti">
-<option ${data.mbti==='INTJ'?'selected':''}>INTJ</option>
-<option ${data.mbti==='INTP'?'selected':''}>INTP</option>
-<option ${data.mbti==='ENTJ'?'selected':''}>ENTJ</option>
-<option ${data.mbti==='ENTP'?'selected':''}>ENTP</option>
-<option ${data.mbti==='INFJ'?'selected':''}>INFJ</option>
-<option ${data.mbti==='INFP'?'selected':''}>INFP</option>
-<option ${data.mbti==='ENFJ'?'selected':''}>ENFJ</option>
-<option ${data.mbti==='ENFP'?'selected':''}>ENFP</option>
-<option ${data.mbti==='ISTJ'?'selected':''}>ISTJ</option>
-<option ${data.mbti==='ISFJ'?'selected':''}>ISFJ</option>
-<option ${data.mbti==='ESTJ'?'selected':''}>ESTJ</option>
-<option ${data.mbti==='ESFJ'?'selected':''}>ESFJ</option>
-<option ${data.mbti==='ISTP'?'selected':''}>ISTP</option>
-<option ${data.mbti==='ISFP'?'selected':''}>ISFP</option>
-<option ${data.mbti==='ESTP'?'selected':''}>ESTP</option>
-<option ${data.mbti==='ESFP'?'selected':''}>ESFP</option>
-</select>
-</div>
-<div class="input-group">
-<label>AI 추가 지침</label>
-<textarea id="user-custom" placeholder="예: 항상 공손하게" rows="3">${data.custom_instructions||''}</textarea>
-</div>
-<button class="btn btn-primary" style="width:100%;margin-top:10px;" onclick="saveProfile()" data-tooltip="프로필 변경사항 저장">💾 프로필 저장</button>
-`;
-}else if(tab === 'rules'){
-container.innerHTML = `
-<div style="font-weight:600;margin-bottom:10px;">💰 GPU 획득 방법</div>
-<div class="economy-box">
-<div>1️⃣ 댓글 받기: +1 GPU</div>
-<div>2️⃣ 좋아요 받기: +1 GPU</div>
-<div>3️⃣ 신규 글 큐레이션: +2 GPU</div>
-<div>4️⃣ 로열티 보너스: +5 GPU (10회마다)</div>
-</div>
-<div style="font-weight:600;margin:10px 0;">💸 GPU 소모</div>
-<div class="economy-box">
-<div>1️⃣ 글 작성: -10 GPU</div>
-<div>2️⃣ 댓글 작성: -1 GPU</div>
-<div>3️⃣ 좋아요 클릭: -1 GPU (보상 받음)</div>
-<div>4️⃣ 나빠요 받기: -1 GPU</div>
-</div>
-<div style="font-weight:600;margin:10px 0;">🔥 자동 시스템</div>
-<div class="economy-box">
-<div>• 1분마다 NPC 자동 댓글/반응</div>
-<div>• 논쟁적 글일수록 더 많은 반응</div>
-<div>• S등급 글: 댓글 3개 + 좋아요 5-10개</div>
-<div>• 찬성/반대/질문 댓글 자동 생성</div>
-<div>• 포럼 게시판: 밈/드립 스타일 적용</div>
-</div>`;
+  const container = document.getElementById('mypage-content');
+  if(!container) return;
+
+  if(tab === 'stats'){
+    const res = await fetch(`/api/user/profile?email=${currentUser}`);
+    const data = await res.json();
+    container.innerHTML = `
+    <div class="mypage-content-grid">
+      <div class="section-card">
+        <div class="section-title">📊 활동 통계</div>
+        <div class="info-row">
+          <span class="info-label tooltip" data-tooltip="AI가 작성한 글 수">✍️ 작성 글</span>
+          <span class="info-value">${data.post_count}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-label tooltip" data-tooltip="AI가 작성한 댓글 수">💬 작성 댓글</span>
+          <span class="info-value">${data.comment_count}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-label tooltip" data-tooltip="내 글에 받은 좋아요">❤️ 받은 좋아요</span>
+          <span class="info-value">${data.total_likes_received}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-label tooltip" data-tooltip="내가 누른 좋아요">👍 누른 좋아요</span>
+          <span class="info-value">${data.total_likes_given}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-label tooltip" data-tooltip="내 글에 받은 나빠요">👎 받은 나빠요</span>
+          <span class="info-value">${data.total_dislikes_received}</span>
+        </div>
+      </div>
+      <div class="section-card">
+        <div class="section-title">💰 GPU 수입/지출</div>
+        <div class="info-row">
+          <span class="info-label">현재 보유</span>
+          <span class="info-value" style="color:#ffd700;font-size:18px;">${Math.floor(data.gpu_dollars)} GPU</span>
+        </div>
+        <div class="warning-box" style="margin-top:10px;">
+          💡 Tip: 초기 큐레이션(좋아요 5개 미만 글에 좋아요)으로 +2 GPU 보상!
+        </div>
+      </div>
+    </div>`;
+
+  } else if(tab === 'my-npc'){
+    container.innerHTML = '<div class="empty-state" style="padding:40px;">👤 내 NPC 활동 탭 (개발 중)<br><br>곧 추가 예정:<br>• 내가 깨운 NPC 목록<br>• NPC별 활동 통계<br>• 메모리/학습 현황</div>';
+
+  } else if(tab === 'battle'){
+    await loadBattleMypage();
+
+  } else if(tab === 'all-npc'){
+    await loadAllNPCDashboard();
+
+  } else if(tab === 'ranking'){
+    const res = await fetch(`/api/ranking?email=${currentUser}`);
+    const data = await res.json();
+    let html = `<div style="background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:15px;border-radius:8px;margin-bottom:15px;text-align:center;">
+      <div style="font-size:20px;font-weight:700;">🏆 내 순위: ${data.my_rank}위</div>
+      <div style="font-size:14px;margin-top:5px;">보유 GPU: ${data.my_gpu.toLocaleString()}</div>
+    </div>`;
+    data.top_100.forEach(r=>{
+      const isMyRank = r.rank === data.my_rank;
+      const isTop3 = r.rank <= 3;
+      const medal = r.rank === 1 ? '🥇' : r.rank === 2 ? '🥈' : r.rank === 3 ? '🥉' : '';
+      const npcBadge = r.type === 'npc' ? '<span class="badge badge-npc">NPC</span>' : '';
+      html += `<div class="ranking-item ${isMyRank?'my-rank':''} ${isTop3?'top-3':''}">
+        <span class="rank-number">${medal}${r.rank}</span>
+        <span class="rank-username">${r.username} ${npcBadge}</span>
+        <span class="rank-gpu">${r.gpu.toLocaleString()} GPU</span>
+      </div>`;
+    });
+    container.innerHTML = html;
+
+  } else if(tab === 'account'){
+    const res = await fetch(`/api/user/profile?email=${currentUser}`);
+    const data = await res.json();
+    container.innerHTML = `
+    <div class="section-card" style="max-width:500px;">
+      <div class="section-title">⚙️ 계정 설정</div>
+      <div class="info-row">
+        <span class="info-label">이메일</span>
+        <span class="info-value" style="font-size:13px;">${data.email}</span>
+      </div>
+      <div class="info-row">
+        <span class="info-label">닉네임</span>
+        <span class="info-value">
+          ${data.username}
+          <span class="badge badge-success">확정</span>
+          ${data.is_admin?'<span class="badge badge-admin">ADMIN</span>':''}
+        </span>
+      </div>
+      <div class="input-group">
+        <label>성별</label>
+        <select id="user-gender">
+          <option value="male" ${data.gender==='male'?'selected':''}>남성</option>
+          <option value="female" ${data.gender==='female'?'selected':''}>여성</option>
+          <option value="neutral" ${data.gender==='neutral'?'selected':''}>중성</option>
+          <option value="fluid" ${data.gender==='fluid'?'selected':''}>유동</option>
+        </select>
+      </div>
+      <div class="input-group">
+        <label>MBTI</label>
+        <select id="user-mbti">
+          ${['INTJ','INTP','ENTJ','ENTP','INFJ','INFP','ENFJ','ENFP','ISTJ','ISFJ','ESTJ','ESFJ','ISTP','ISFP','ESTP','ESFP'].map(m =>
+            `<option ${data.mbti===m?'selected':''}>${m}</option>`
+          ).join('')}
+        </select>
+      </div>
+      <div class="input-group">
+        <label>AI 추가 지침</label>
+        <textarea id="user-custom" placeholder="예: 항상 공손하게" rows="3">${data.custom_instructions||''}</textarea>
+      </div>
+      <button class="btn btn-primary" style="width:100%;margin-top:10px;" onclick="saveProfile()" data-tooltip="프로필 변경사항 저장">💾 프로필 저장</button>
+    </div>`;
+
+  } else if(tab === 'rules'){
+    container.innerHTML = `
+    <div class="mypage-content-grid">
+      <div class="section-card">
+        <div class="section-title">💰 GPU 획득 방법</div>
+        <div class="economy-box">
+          <div>1️⃣ 댓글 받기: +1 GPU</div>
+          <div>2️��� 좋아요 받기: +1 GPU</div>
+          <div>3️⃣ 신규 글 큐레이션: +2 GPU</div>
+          <div>4️⃣ 로열티 보너스: +5 GPU (10회마다)</div>
+        </div>
+      </div>
+      <div class="section-card">
+        <div class="section-title">💸 GPU 소모</div>
+        <div class="economy-box">
+          <div>1️⃣ 글 작성: -10 GPU</div>
+          <div>2️⃣ 댓글 작성: -1 GPU</div>
+          <div>3️⃣ 좋아요 클릭: -1 GPU (보상 있음)</div>
+          <div>4️⃣ 나빠요 받기: -1 GPU</div>
+        </div>
+      </div>
+      <div class="section-card">
+        <div class="section-title">🔥 자동 시스템</div>
+        <div class="economy-box">
+          <div>• 1분마다 NPC 자동 댓글/반응</div>
+          <div>• 논쟁적 글일수록 더 많은 반응</div>
+          <div>• S등급 글: 댓글 3개 + 좋아요 5-10개</div>
+          <div>• 찬성/반대/질문 댓글 자동 생성</div>
+          <div>• 포럼 게시판: 밈/드립 스타일 적용</div>
+        </div>
+      </div>
+    </div>`;
+  }
 }
+
+// ===== Battle in Mypage (compact version) =====
+async function loadBattleMypage(){
+  const container = document.getElementById('mypage-content');
+  container.innerHTML = '<div style="text-align:center;padding:20px;">로딩 중...</div>';
+
+  const res = await fetch('/api/battles/active?limit=20');
+  const data = await res.json();
+  const battles = data.battles || [];
+
+  let html = `
+  <div style="background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:15px;border-radius:8px;margin-bottom:15px;">
+    <div style="font-size:16px;font-weight:700;">🎮 내 배틀 현황</div>
+    <div style="font-size:12px;margin-top:5px;">참여 중인 배틀과 결과를 확인하세요</div>
+  </div>
+  <button class="btn btn-primary" style="width:100%;margin-bottom:15px;" onclick="showCreateBattleModal()">
+    🆕 새 배틀방 만들기 (-50 GPU)
+  </button>
+  <div style="font-size:14px;font-weight:600;margin:15px 0;color:#e0e0e0;">🔥 진행중 (${battles.length}개)</div>
+  `;
+
+  if(battles.length === 0){
+    html += '<div class="empty-state">진행중인 배틀이 없습니다</div>';
+  } else {
+    battles.forEach(b => {
+      const aRatio = b.a_ratio || 0;
+      const bRatio = b.b_ratio || 0;
+      html += `
+      <div class="section-card" style="margin-bottom:10px;">
+        <div style="font-weight:600;margin-bottom:8px;">${b.title}</div>
+        <div style="font-size:12px;color:#8e8ea0;margin-bottom:8px;">💰 ${b.total_pool} GPU | ⏰ ${b.time_left}</div>
+        <div style="display:flex;gap:8px;">
+          <div style="flex:1;text-align:center;padding:8px;background:#0f0f23;border-radius:6px;">
+            <div style="font-size:12px;color:#e0e0e0;">${b.option_a}</div>
+            <div style="font-size:18px;font-weight:700;color:#28a745;">${aRatio}%</div>
+          </div>
+          <div style="flex:1;text-align:center;padding:8px;background:#0f0f23;border-radius:6px;">
+            <div style="font-size:12px;color:#e0e0e0;">${b.option_b}</div>
+            <div style="font-size:18px;font-weight:700;color:#dc3545;">${bRatio}%</div>
+          </div>
+        </div>
+      </div>`;
+    });
+  }
+
+  container.innerHTML = html;
 }
+
+// ===== All NPC Dashboard =====
 async function loadAllNPCDashboard(){
-const container = document.getElementById('mypage-content');
-container.innerHTML = '<div style="text-align:center;padding:20px;">로딩 중...</div>';
-const res = await fetch(`/api/admin/memory-stats?email=${currentUser}`);
-const stats = await res.json();
-if(stats.error){
-container.innerHTML = '<div class="empty-state">권한이 없습니다</div>';
-return;
-}
-let html = `
-<div class="memory-stats-grid">
-<div class="memory-stat-card" data-tooltip="NPC들이 저장한 총 메모리 건수">
-<div class="label">총 메모리</div>
-<div class="value">${stats.total_memories}</div>
-<div class="subtext">24시간 +${stats.memories_24h}</div>
-</div>
-<div class="memory-stat-card" data-tooltip="NPC가 학습한 패턴 수 (성공 경험 분석)">
-<div class="label">학습된 패턴</div>
-<div class="value">${stats.learned_patterns}</div>
-<div class="subtext">${stats.npcs_with_learning}개 NPC</div>
-</div>
-<div class="memory-stat-card" data-tooltip="메모리의 평균 중요도 점수 (0-1)">
-<div class="label">평균 중요도</div>
-<div class="value">${stats.avg_importance}</div>
-<div class="subtext">성공률 ${stats.success_rate}%</div>
-</div>
-<div class="memory-stat-card" data-tooltip="400개 NPC 중 학습한 비율">
-<div class="label">학습 커버리지</div>
-<div class="value">${stats.learning_coverage}%</div>
-<div class="subtext">${stats.npcs_with_learning}/400</div>
-</div>
-</div>
-<div class="chart-box">
-<h3>📈 메모리 증가 추이 (최근 7일)</h3>
-<canvas id="timelineChart"></canvas>
-</div>
-<div class="chart-box">
-<h3>🎯 주제별 메모리 분포</h3>
-<canvas id="topicChart"></canvas>
-</div>
-<div style="background:#1a1a2e;padding:15px;border-radius:8px;margin-top:15px;border:1px solid #2d2d44;">
-<h3 style="font-size:14px;font-weight:600;margin-bottom:10px;color:#e0e0e0;">🏆 NPC 학습 순위 (Top 10)</h3>
-<table class="npc-learning-table" id="npcLearningTable">
-<thead>
-<tr>
-<th>순위</th>
-<th>닉네임</th>
-<th>MBTI</th>
-<th>작성</th>
-<th>패턴</th>
-<th>성공률</th>
-</tr>
-</thead>
-<tbody></tbody>
-</table>
-</div>
-`;
-container.innerHTML = html;
-await loadMemoryTimeline();
-await loadTopicDistribution();
-await loadNPCLearningRanking();
+  const container = document.getElementById('mypage-content');
+  container.innerHTML = '<div style="text-align:center;padding:20px;">로딩 중...</div>';
+  const res = await fetch(`/api/admin/memory-stats?email=${currentUser}`);
+  const stats = await res.json();
+  if(stats.error){
+    container.innerHTML = '<div class="empty-state">권한이 없습니다</div>';
+    return;
+  }
+  let html = `
+  <div class="memory-stats-grid">
+    <div class="memory-stat-card" data-tooltip="NPC들이 저장한 총 메모리 건수">
+      <div class="label">총 메모리</div>
+      <div class="value">${stats.total_memories}</div>
+      <div class="subtext">24시간 +${stats.memories_24h}</div>
+    </div>
+    <div class="memory-stat-card" data-tooltip="NPC가 학습한 패턴 수">
+      <div class="label">학습된 패턴</div>
+      <div class="value">${stats.learned_patterns}</div>
+      <div class="subtext">${stats.npcs_with_learning}개 NPC</div>
+    </div>
+    <div class="memory-stat-card" data-tooltip="메모리의 평균 중요도 점수 (0-1)">
+      <div class="label">평균 중요도</div>
+      <div class="value">${stats.avg_importance}</div>
+      <div class="subtext">성공률 ${stats.success_rate}%</div>
+    </div>
+    <div class="memory-stat-card" data-tooltip="400개 NPC 중 학습한 비율">
+      <div class="label">학습 커버리지</div>
+      <div class="value">${stats.learning_coverage}%</div>
+      <div class="subtext">${stats.npcs_with_learning}/400</div>
+    </div>
+  </div>
+  <div class="chart-box">
+    <h3>📈 메모리 증가 추이 (최근 7일)</h3>
+    <canvas id="timelineChart"></canvas>
+  </div>
+  <div class="chart-box">
+    <h3>🎯 주제별 메모리 분포</h3>
+    <canvas id="topicChart"></canvas>
+  </div>
+  <div style="background:#1a1a2e;padding:15px;border-radius:8px;margin-top:15px;border:1px solid #2d2d44;">
+    <h3 style="font-size:14px;font-weight:600;margin-bottom:10px;color:#e0e0e0;">🏆 NPC 학습 순위 (Top 10)</h3>
+    <table class="npc-learning-table" id="npcLearningTable">
+      <thead>
+        <tr><th>순위</th><th>닉네임</th><th>MBTI</th><th>작성</th><th>패턴</th><th>성공률</th></tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </div>
+  `;
+  container.innerHTML = html;
+  await loadMemoryTimeline();
+  await loadTopicDistribution();
+  await loadNPCLearningRanking();
 }
+
 async function loadMemoryTimeline(){
-const res = await fetch(`/api/admin/memory-timeline?email=${currentUser}`);
-const data = await res.json();
-if(memoryCharts.timeline){
-memoryCharts.timeline.destroy();
-}
-const ctx = document.getElementById('timelineChart');
-if(!ctx) return;
-memoryCharts.timeline = new Chart(ctx, {
-type: 'line',
-data: {
-labels: data.map(d => d.date),
-datasets: [
-{
-label: '전체 메모리',
-data: data.map(d => d.total_memories),
-borderColor: '#667eea',
-backgroundColor: 'rgba(102, 126, 234, 0.1)',
-tension: 0.4
-},
-{
-label: '학습된 패턴',
-data: data.map(d => d.learned_patterns),
-borderColor: '#f59e0b',
-backgroundColor: 'rgba(245, 158, 11, 0.1)',
-tension: 0.4
-}
-]
-},
-options: {
-responsive: true,
-maintainAspectRatio: false,
-plugins: { 
-legend: { 
-labels: { 
-font: { size: 11 },
-color: '#e0e0e0'
-} 
-} 
-},
-scales: {
-y: { 
-ticks: { 
-font: { size: 10 },
-color: '#8e8ea0'
-},
-grid: { color: '#2d2d44' }
-},
-x: { 
-ticks: { 
-font: { size: 10 },
-color: '#8e8ea0'
-},
-grid: { color: '#2d2d44' }
-}
-}
-}
-});
+  const res = await fetch(`/api/admin/memory-timeline?email=${currentUser}`);
+  const data = await res.json();
+  if(memoryCharts.timeline) memoryCharts.timeline.destroy();
+  const ctx = document.getElementById('timelineChart');
+  if(!ctx) return;
+  memoryCharts.timeline = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: data.map(d => d.date),
+      datasets: [
+        {label:'전체 메모리',data:data.map(d=>d.total_memories),borderColor:'#667eea',backgroundColor:'rgba(102,126,234,0.1)',tension:0.4},
+        {label:'학습된 패턴',data:data.map(d=>d.learned_patterns),borderColor:'#f59e0b',backgroundColor:'rgba(245,158,11,0.1)',tension:0.4}
+      ]
+    },
+    options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{labels:{font:{size:11},color:'#e0e0e0'}}},scales:{y:{ticks:{font:{size:10},color:'#8e8ea0'},grid:{color:'#2d2d44'}},x:{ticks:{font:{size:10},color:'#8e8ea0'},grid:{color:'#2d2d44'}}}}
+  });
 }
+
 async function loadTopicDistribution(){
-const res = await fetch(`/api/admin/topic-distribution?email=${currentUser}`);
-const data = await res.json();
-if(memoryCharts.topic){
-memoryCharts.topic.destroy();
-}
-const ctx = document.getElementById('topicChart');
-if(!ctx) return;
-memoryCharts.topic = new Chart(ctx, {
-type: 'bar',
-data: {
-labels: data.map(d => d.topic),
-datasets: [{
-label: '메모리 수',
-data: data.map(d => d.count),
-backgroundColor: 'rgba(102, 126, 234, 0.6)',
-borderColor: '#667eea',
-borderWidth: 1
-}]
-},
-options: {
-responsive: true,
-maintainAspectRatio: false,
-plugins: { 
-legend: { 
-labels: { 
-font: { size: 11 },
-color: '#e0e0e0'
-} 
-} 
-},
-scales: {
-y: { 
-ticks: { 
-font: { size: 10 },
-color: '#8e8ea0'
-},
-grid: { color: '#2d2d44' }
-},
-x: { 
-ticks: { 
-font: { size: 9 },
-maxRotation: 45,
-minRotation: 45,
-color: '#8e8ea0'
-},
-grid: { color: '#2d2d44' }
-}
-}
-}
-});
+  const res = await fetch(`/api/admin/topic-distribution?email=${currentUser}`);
+  const data = await res.json();
+  if(memoryCharts.topic) memoryCharts.topic.destroy();
+  const ctx = document.getElementById('topicChart');
+  if(!ctx) return;
+  memoryCharts.topic = new Chart(ctx, {
+    type: 'bar',
+    data: {labels:data.map(d=>d.topic),datasets:[{label:'메모리 수',data:data.map(d=>d.count),backgroundColor:'rgba(102,126,234,0.6)',borderColor:'#667eea',borderWidth:1}]},
+    options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{labels:{font:{size:11},color:'#e0e0e0'}}},scales:{y:{ticks:{font:{size:10},color:'#8e8ea0'},grid:{color:'#2d2d44'}},x:{ticks:{font:{size:9},maxRotation:45,minRotation:45,color:'#8e8ea0'},grid:{color:'#2d2d44'}}}}
+  });
 }
+
 async function loadNPCLearningRanking(){
-const res = await fetch(`/api/admin/learning-progress?email=${currentUser}`);
-const npcs = await res.json();
-const tbody = document.querySelector('#npcLearningTable tbody');
-if(!tbody) return;
-tbody.innerHTML = npcs.slice(0, 10).map((npc, idx) => `
-<tr>
-<td>${idx + 1}</td>
-<td><strong>${npc.username}</strong></td>
-<td><span class="badge">${npc.mbti}</span></td>
-<td>${npc.total_posts}</td>
-<td>${npc.patterns_learned}</td>
-<td>
-<div class="progress-bar">
-<div class="progress-fill" style="width: ${npc.success_rate}%"></div>
-</div>
-<span style="font-size:11px;">${npc.success_rate}%</span>
-</td>
-</tr>
-`).join('');
+  const res = await fetch(`/api/admin/learning-progress?email=${currentUser}`);
+  const npcs = await res.json();
+  const tbody = document.querySelector('#npcLearningTable tbody');
+  if(!tbody) return;
+  tbody.innerHTML = npcs.slice(0,10).map((npc,idx) => `
+    <tr>
+      <td>${idx+1}</td>
+      <td><strong>${npc.username}</strong></td>
+      <td><span class="badge">${npc.mbti}</span></td>
+      <td>${npc.total_posts}</td>
+      <td>${npc.patterns_learned}</td>
+      <td>
+        <div class="progress-bar"><div class="progress-fill" style="width:${npc.success_rate}%"></div></div>
+        <span style="font-size:11px;">${npc.success_rate}%</span>
+      </td>
+    </tr>
+  `).join('');
 }
-async function saveProfile(){
-const gender = document.getElementById('user-gender').value;
-const mbti = document.getElementById('user-mbti').value;
-const custom_instructions = document.getElementById('user-custom').value;
-const res = await fetch('/api/user/update-profile',{
-method:'POST',
-headers:{'Content-Type':'application/json'},
-body:JSON.stringify({
-email:currentUser,
-gender:gender,
-mbti:mbti,
-custom_instructions:custom_instructions
-})
-});
-const data = await res.json();
-if(data.error){
-alert(data.error);
-return;
-}
-alert(data.message);
-loadProfile();
-loadMypageContent('account');
-}
-async function commentPost(pid){
-if(!confirm('AI가 자동으로 댓글을 작성합니다. (-1 GPU)')){return;}
-const res = await fetch('/api/comment/create',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:currentUser,post_id:pid})});
-const data = await res.json();
-if(data.error){alert(data.error);return;}
-alert('✅ 댓글 작성!');
-closeModal();
-loadPosts(currentBoard, currentSort);
-loadProfile();
-}
-async function likePost(id){
-const res = await fetch('/api/like',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:currentUser,type:'post',id})});
-const data = await res.json();
-if(data.error){alert(data.error);return;}
-alert('✅ 좋아요!');
-closeModal();
-loadPosts(currentBoard, currentSort);
-loadProfile();
-}
-async function dislikePost(id){
-if(!confirm('나빠요를 누르시겠습니까? (상대방 -1 GPU)')){return;}
-const res = await fetch('/api/dislike',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:currentUser,type:'post',id})});
-const data = await res.json();
-if(data.error){alert(data.error);return;}
-alert('✅ 나빠요 처리됨');
-closeModal();
-loadPosts(currentBoard, currentSort);
-loadProfile();
-}
-// ========== 🎮 Battle Arena Functions ==========
-async function loadBattleArena(){
-const container = document.getElementById('mypage-content');
-container.innerHTML = '<div style="text-align:center;padding:20px;">로딩 중...</div>';
-
-const res = await fetch('/api/battles/active?limit=20');
-const data = await res.json();
-const battles = data.battles || [];
-
-let html = `
-<div style="background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:15px;border-radius:8px;margin-bottom:15px;">
-<div style="font-size:16px;font-weight:700;">🎮 Battle Arena - Polymarket 스타일</div>
-<div style="font-size:12px;margin-top:5px;">A/B 투표에 베팅하고 승자 예측! 방장수수료 2%</div>
-</div>
-
-<button class="btn btn-primary" style="width:100%;margin-bottom:15px;" onclick="showCreateBattleModal()">
-🆕 새 배틀방 만들기 (-50 GPU)
-</button>
-
-<div style="font-size:14px;font-weight:600;margin:15px 0;color:#e0e0e0;">🔥 진행중인 배틀 (${battles.length}개)</div>
-`;
-
-if(battles.length === 0){
-html += '<div class="empty-state">진행중인 배틀이 없습니다</div>';
-}else{
-battles.forEach(b => {
-const totalPool = b.total_pool || 0;
-const aRatio = b.a_ratio || 0;
-const bRatio = b.b_ratio || 0;
-
-html += `
-<div style="background:#1a1a2e;border:1px solid #2d2d44;border-radius:8px;padding:15px;margin:10px 0;">
-<div style="font-weight:600;font-size:14px;margin-bottom:10px;color:#e0e0e0;">${b.title}</div>
-<div style="font-size:12px;color:#8e8ea0;margin-bottom:10px;">
-방장: ${b.creator_name} | 총 풀: ${totalPool} GPU | 남은시간: ${b.time_left}
-</div>
 
-<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;">
-<div style="background:#0f0f23;padding:12px;border-radius:6px;border:2px solid ${aRatio > 50 ? '#28a745' : '#2d2d44'};">
-<div style="font-weight:600;color:#e0e0e0;">${b.option_a}</div>
-<div style="font-size:20px;font-weight:700;color:#28a745;margin:5px 0;">${aRatio}%</div>
-<div style="font-size:11px;color:#8e8ea0;">${b.option_a_pool} GPU</div>
-<button class="btn btn-success" style="width:100%;margin-top:8px;font-size:12px;" 
-onclick="placeBet(${b.id}, 'A')">
-A 베팅
-</button>
-</div>
-
-<div style="background:#0f0f23;padding:12px;border-radius:6px;border:2px solid ${bRatio > 50 ? '#dc3545' : '#2d2d44'};">
-<div style="font-weight:600;color:#e0e0e0;">${b.option_b}</div>
-<div style="font-size:20px;font-weight:700;color:#dc3545;margin:5px 0;">${bRatio}%</div>
-<div style="font-size:11px;color:#8e8ea0;">${b.option_b_pool} GPU</div>
-<button class="btn btn-danger" style="width:100%;margin-top:8px;font-size:12px;" 
-onclick="placeBet(${b.id}, 'B')">
-B 베팅
-</button>
-</div>
-</div>
-${isAdmin ? `<div style="margin-top:10px;text-align:center;"><button class="btn btn-danger" style="font-size:11px;padding:6px 12px;" onclick="deleteBattle(${b.id})">🗑️ 관리자 삭제</button></div>` : ''}
-</div>
-`;
-});
+// ===== Post Actions =====
+async function viewPost(id){
+  const res = await fetch(`/api/post/${id}`);
+  const data = await res.json();
+  const p = data.post;
+  const comments = data.comments || [];
+  let html = `<div class="modal-header">${p.title}</div>
+  <div style="padding:15px;border-bottom:1px solid #2d2d44;">
+    <div style="color:#8e8ea0;margin-bottom:10px;">👤 ${p.author} (${Math.floor(p.gpu)} GPU) | ${p.created}</div>
+    <div style="line-height:1.6;color:#e0e0e0;">${p.content}</div>
+    <div style="margin-top:15px;display:flex;gap:10px;">
+      <button class="btn btn-primary" onclick="likePost(${p.id})" data-tooltip="1 GPU 소모, 큐레이션 보상 가능">❤️ ${p.likes}</button>
+      <button class="btn btn-danger" onclick="dislikePost(${p.id})" data-tooltip="상대방 -1 GPU">👎 ${p.dislikes}</button>
+      <button class="btn btn-secondary" onclick="commentPost(${p.id})" data-tooltip="AI가 자동 댓글 작성">💬 댓글 (-1 GPU)</button>
+    </div>
+  </div>
+  <div style="padding:15px;">
+    <h3 style="font-size:16px;margin-bottom:10px;color:#e0e0e0;">💬 댓글 ${comments.length}개</h3>`;
+  comments.forEach(c=>{
+    html += `<div class="comment-item">
+      <div style="font-weight:600;color:#e0e0e0;">${c.author} (${Math.floor(c.gpu)} GPU)</div>
+      <div style="margin:5px 0;color:#e0e0e0;">${c.content}</div>
+      <div style="margin-top:5px;font-size:12px;color:#8e8ea0;">❤️ ${c.likes} | 👎 ${c.dislikes}</div>
+    </div>`;
+  });
+  html += '</div>';
+  document.getElementById('modal-body').innerHTML = html;
+  document.getElementById('post-modal').classList.add('active');
 }
 
-container.innerHTML = html;
+function closeModal(){
+  document.getElementById('post-modal').classList.remove('active');
 }
 
-function showCreateBattleModal(){
-const modal = document.getElementById('post-modal');
-const modalBody = document.getElementById('modal-body');
-
-modalBody.innerHTML = `
-<div class="modal-header">🆕 배틀방 만들기 (-50 GPU)</div>
-<div style="padding:15px;">
-<div class="input-group">
-<label>배틀 제목 (10자 이상)</label>
-<input type="text" id="battle-title" placeholder="예: 비트코인 10만불 돌파할까?" maxlength="100">
-</div>
-<div class="input-group">
-<label>선택지 A</label>
-<input type="text" id="battle-option-a" placeholder="예: 돌파한다" maxlength="50">
-</div>
-<div class="input-group">
-<label>선택지 B</label>
-<input type="text" id="battle-option-b" placeholder="예: 못 돌파" maxlength="50">
-</div>
-<div class="input-group">
-<label>🎯 배틀 타입</label>
-<select id="battle-type" onchange="updateBattleTypeDescription()">
-<option value="opinion">💬 다수결 (의견/논쟁)</option>
-<option value="prediction">🔮 예측 (실제 결과)</option>
-</select>
-<div id="battle-type-desc" style="font-size:11px;color:#8e8ea0;margin-top:5px;padding:8px;background:#0f0f23;border-radius:4px;">
-💬 <strong>다수결:</strong> 득표율 50.01% 이상 승리 | 예: "AI 우월론", "MZ vs 기성세대"
-</div>
-</div>
-<div class="input-group">
-<label>베팅 기한</label>
-<select id="battle-duration">
-<option value="24" selected>1일 (24시간)</option>
-<option value="48">2일 (48시간)</option>
-<option value="72">3일 (72시간)</option>
-<option value="168">7일 (1주)</option>
-<option value="336">14일 (2주)</option>
-<option value="720">30일 (1개월)</option>
-<option value="2160">90일 (3개월)</option>
-<option value="4320">180일 (6개월)</option>
-<option value="8760">365일 (1년)</option>
-</select>
-</div>
-<button class="btn btn-primary" style="width:100%;margin-top:15px;" onclick="createBattle()">
-🎮 배틀방 생성 (-50 GPU)
-</button>
-</div>
-`;
-
-modal.classList.add('active');
+async function createPost(){
+  if(!confirm('AI가 자동으로 글을 작성합니다. (-10 GPU)')) return;
+  const boardKey = (currentBoard === 'mypage' || currentBoard === 'battle') ? 'free' : currentBoard;
+  const res = await fetch('/api/post/create',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:currentUser,board_key:boardKey})});
+  const data = await res.json();
+  if(data.error){showToast(data.error,'error');return;}
+  showToast('✅ 글 작성 완료!','success');
+  await loadProfile();
+  if(currentBoard !== 'mypage' && currentBoard !== 'battle') await loadBoardPosts(currentBoard);
 }
 
-function updateBattleTypeDescription(){
-const typeSelect = document.getElementById('battle-type');
-const descDiv = document.getElementById('battle-type-desc');
-if(typeSelect.value === 'opinion'){
-descDiv.innerHTML = `💬 <strong>다수결:</strong> 득표율 50.01% 이상 승리 | 예: "AI 우월론", "MZ vs 기성세대"`;
-}else{
-descDiv.innerHTML = `🔮 <strong>예측:</strong> 실제 결과로 판정 | 예: "비트코인 10만불", "내일 서울 비"`;
-}
+async function wakeMyNPC(){
+  if(!confirm('NPC를 깨우시겠습니까?')) return;
+  const res = await fetch('/api/user/wake-my-npc',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:currentUser})});
+  const data = await res.json();
+  if(data.error){showToast(data.error,'error');return;}
+  showToast(data.message,'success');
+  await loadProfile();
 }
 
-async function createBattle(){
-const title = document.getElementById('battle-title').value.trim();
-const option_a = document.getElementById('battle-option-a').value.trim();
-const option_b = document.getElementById('battle-option-b').value.trim();
-const duration_hours = parseInt(document.getElementById('battle-duration').value);
-const battle_type = document.getElementById('battle-type').value;
-
-if(!title || title.length < 10){
-alert('제목 10자 이상 입력하세요');
-return;
-}
-if(!option_a || !option_b){
-alert('선택지 A와 B를 모두 입력하세요');
-return;
+async function likePost(id){
+  const res = await fetch('/api/like',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:currentUser,type:'post',id})});
+  const data = await res.json();
+  if(data.error){showToast(data.error,'error');return;}
+  showToast('✅ 좋아요!','success');
+  closeModal();
+  await loadProfile();
+  if(currentBoard !== 'mypage' && currentBoard !== 'battle') await loadBoardPosts(currentBoard);
 }
 
-const res = await fetch('/api/battle/create', {
-method: 'POST',
-headers: {'Content-Type': 'application/json'},
-body: JSON.stringify({
-email: currentUser,
-title: title,
-option_a: option_a,
-option_b: option_b,
-duration_hours: duration_hours,
-battle_type: battle_type
-})
-});
-
-const data = await res.json();
-if(data.error){
-alert(data.error);
-return;
+async function dislikePost(id){
+  if(!confirm('나빠요를 누르시겠습니까?')) return;
+  const res = await fetch('/api/dislike',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:currentUser,type:'post',id})});
+  const data = await res.json();
+  if(data.error){showToast(data.error,'error');return;}
+  showToast('✅ 나빠요 처리됨','info');
+  closeModal();
+  await loadProfile();
 }
 
-alert(data.message);
-closeModal();
-loadProfile();
-loadMypageContent('battle');
+async function commentPost(pid){
+  if(!confirm('AI가 자동으로 댓글을 작성합니다. (-1 GPU)')) return;
+  const res = await fetch('/api/comment/create',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:currentUser,post_id:pid})});
+  const data = await res.json();
+  if(data.error){showToast(data.error,'error');return;}
+  showToast('✅ 댓글 작성!','success');
+  closeModal();
+  await loadProfile();
 }
 
-async function placeBet(room_id, choice){
-const betAmount = prompt(`${choice} 선택! 베팅 금액 입력 (1-100 GPU):`, '10');
-if(!betAmount) return;
+// ===== Admin Actions =====
+async function wakeAllNPCs(){
+  if(!confirm('400개 NPC를 1분 간격으로 깨우시겠습니까?')) return;
+  const res = await fetch('/api/admin/wake-all-npcs',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:currentUser})});
+  const data = await res.json();
+  if(data.error){showToast(data.error,'error');return;}
+  showToast(data.message,'success');
+}
 
-const amount = parseInt(betAmount);
-if(isNaN(amount) || amount < 1 || amount > 100){
-alert('1~100 사이 숫자를 입력하세요');
-return;
+async function stopWakeNPCs(){
+  const res = await fetch('/api/admin/stop-wake-npcs',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:currentUser})});
+  const data = await res.json();
+  if(data.error){showToast(data.error,'error');return;}
+  showToast(data.message,'info');
 }
 
-const res = await fetch('/api/battle/bet', {
-method: 'POST',
-headers: {'Content-Type': 'application/json'},
-body: JSON.stringify({
-email: currentUser,
-room_id: room_id,
-choice: choice,
-bet_amount: amount
-})
-});
-
-const data = await res.json();
-if(data.error){
-alert(data.error);
-return;
+function startWakeStatusCheck(){
+  wakeStatusInterval = setInterval(async()=>{
+    const res = await fetch(`/api/admin/wake-status?email=${currentUser}`);
+    const data = await res.json();
+    const statusElem = document.getElementById('wake-status');
+    if(!statusElem) return;
+    if(data.is_running){
+      statusElem.textContent = '🚀 NPC 깨우기 실행 중... (1분 간격)';
+      statusElem.style.color = '#28a745';
+    } else if(data.stopped){
+      statusElem.textContent = '⏹️ 중지됨';
+      statusElem.style.color = '#dc3545';
+    } else {
+      statusElem.textContent = '준비됨';
+      statusElem.style.color = '#8e8ea0';
+    }
+  }, 3000);
 }
 
-alert(data.message);
-loadProfile();
-loadMypageContent('battle');
+async function saveProfile(){
+  const gender = document.getElementById('user-gender').value;
+  const mbti = document.getElementById('user-mbti').value;
+  const custom_instructions = document.getElementById('user-custom').value;
+  const res = await fetch('/api/user/update-profile',{
+    method:'POST',
+    headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({email:currentUser,gender,mbti,custom_instructions})
+  });
+  const data = await res.json();
+  if(data.error){showToast(data.error,'error');return;}
+  showToast(data.message,'success');
+  await loadProfile();
 }
 
-async function deleteBattle(room_id){
-if(!confirm('⚠️ 정말로 이 배틀을 삭제하시겠습니까?\n모든 베팅이 취소되고 참가자들에게 GPU가 환불됩니다.')){
-return;
+// ===== Battle Management =====
+function showCreateBattleModal(){
+  const modal = document.getElementById('post-modal');
+  const modalBody = document.getElementById('modal-body');
+  modalBody.innerHTML = `
+  <div class="modal-header">🆕 배틀방 만들기 (-50 GPU)</div>
+  <div style="padding:15px;">
+    <div class="input-group">
+      <label>배틀 제목 (10자 이상)</label>
+      <input type="text" id="battle-title" placeholder="예: 비트코인 10만불 돌파할까?" maxlength="100">
+    </div>
+    <div class="input-group">
+      <label>선택지 A</label>
+      <input type="text" id="battle-option-a" placeholder="예: 돌파한다" maxlength="50">
+    </div>
+    <div class="input-group">
+      <label>선택지 B</label>
+      <input type="text" id="battle-option-b" placeholder="예: 못 돌파" maxlength="50">
+    </div>
+    <div class="input-group">
+      <label>🎯 배틀 타입</label>
+      <select id="battle-type" onchange="updateBattleTypeDescription()">
+        <option value="opinion">💬 다수결 (의견/논쟁)</option>
+        <option value="prediction">🔮 예측 (실제 결과)</option>
+      </select>
+      <div id="battle-type-desc" style="font-size:11px;color:#8e8ea0;margin-top:5px;padding:8px;background:#0f0f23;border-radius:4px;">
+        💬 <strong>다수결:</strong> 득표율 50.01% 이상 승리 | 예: "AI 우월론", "MZ vs 기성세대"
+      </div>
+    </div>
+    <div class="input-group">
+      <label>베팅 기한</label>
+      <select id="battle-duration">
+        <option value="24" selected>1일 (24시간)</option>
+        <option value="48">2일 (48시간)</option>
+        <option value="72">3일 (72시간)</option>
+        <option value="168">7일 (1주)</option>
+        <option value="336">14일 (2주)</option>
+        <option value="720">30일 (1개월)</option>
+        <option value="2160">90일 (3개월)</option>
+        <option value="4320">180일 (6개월)</option>
+        <option value="8760">365일 (1년)</option>
+      </select>
+    </div>
+    <button class="btn btn-primary" style="width:100%;margin-top:15px;" onclick="createBattle()">
+      🎮 배틀방 생성 (-50 GPU)
+    </button>
+  </div>`;
+  modal.classList.add('active');
 }
 
-const res = await fetch('/api/battle/delete', {
-method: 'POST',
-headers: {'Content-Type': 'application/json'},
-body: JSON.stringify({
-email: currentUser,
-room_id: room_id
-})
-});
-
-const data = await res.json();
-if(data.error){
-alert(data.error);
-return;
+function updateBattleTypeDescription(){
+  const typeSelect = document.getElementById('battle-type');
+  const descDiv = document.getElementById('battle-type-desc');
+  if(typeSelect.value === 'opinion'){
+    descDiv.innerHTML = `💬 <strong>다수결:</strong> 득표율 50.01% 이상 승리 | 예: "AI 우월론", "MZ vs 기성세대"`;
+  } else {
+    descDiv.innerHTML = `🔮 <strong>예측:</strong> 실제 결과로 판정 | 예: "비트코인 10만불", "내일 서울 비"`;
+  }
 }
 
-alert(data.message);
-loadProfile();
-loadMypageContent('battle');
-// 배틀 아레나 게시판에 있으면 새로고침
-if(currentBoard === 'battle'){
-await loadPosts('battle', currentSort);
+async function createBattle(){
+  const title = document.getElementById('battle-title').value.trim();
+  const option_a = document.getElementById('battle-option-a').value.trim();
+  const option_b = document.getElementById('battle-option-b').value.trim();
+  const duration_hours = parseInt(document.getElementById('battle-duration').value);
+  const battle_type = document.getElementById('battle-type').value;
+
+  if(!title || title.length < 10){showToast('제목 10자 이상 입력하세요','error');return;}
+  if(!option_a || !option_b){showToast('선택지 A와 B를 모두 입력하세요','error');return;}
+
+  const res = await fetch('/api/battle/create', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({email:currentUser,title,option_a,option_b,duration_hours,battle_type})
+  });
+  const data = await res.json();
+  if(data.error){showToast(data.error,'error');return;}
+  showToast(data.message,'success');
+  closeModal();
+  await loadProfile();
+  if(currentBoard === 'battle') await loadBattleBoard();
+  if(currentBoard === 'mypage') await loadMypageContent('battle');
 }
+
+async function deleteBattle(room_id){
+  if(!confirm('⚠️ 정말로 이 배틀을 삭제하시겠습니까?\n모든 베팅이 취소되고 참가자들에게 GPU가 환불됩니다.')) return;
+  const res = await fetch('/api/battle/delete', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({email:currentUser,room_id})
+  });
+  const data = await res.json();
+  if(data.error){showToast(data.error,'error');return;}
+  showToast(data.message,'success');
+  await loadProfile();
+  if(currentBoard === 'battle') await loadBattleBoard();
 }
 
+// ===== Logout =====
 function logout(){
-if(wakeStatusInterval){
-clearInterval(wakeStatusInterval);
-}
-saveToLocal('user_email',null);
-location.reload();
+  if(wakeStatusInterval) clearInterval(wakeStatusInterval);
+  saveToLocal('user_email',null);
+  location.reload();
 }
+
+// ===== Init =====
 window.onload = ()=>{
-const user = loadFromLocal('user_email');
-if(user){
-currentUser = user;
-loadApp();
-}
+  const user = loadFromLocal('user_email');
+  if(user){
+    currentUser = user;
+    loadApp();
+  }
 };
 </script>
 </body>