.status-badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; border-radius: 20px; background-color: #3c3c5c; font-weight: bold; font-size: 16px; color: white; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); width: fit-content; /* 💡 배경색 영역을 딱 글자 너비로 */ max-width: 100%; } .status-badge .label { margin-right: 8px; } .status-badge .status-value.on { color: #4caf50; } .status-badge .status-value.off { color: #ff4d4d; } function updateServerStatus() { fetch('/pvpgn-status/status.php?mode=json') .then(res => res.json()) .then(data => { const statusSpan = document.querySelector('.status-badge .status-value'); if (data.status === 'ON') { statusSpan.textContent = 'ON'; statusSpan.classList.remove('off'); statusSpan.classList.add('on'); } else { statusSpan.textContent = 'OFF'; statusSpan.classList.remove('on'); statusSpan.classList.add('off'); } }) .catch(() => { const statusSpan = document.querySelector('.status-badge .status-value'); statusSpan.textContent = '오류'; statusSpan.classList.remove('on'); statusSpan.classList.add('off'); }); } updateServerStatus(); // 최초 실행 setInterval(updateServerStatus, 5000); // 5초마다 갱신