* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #0d1117;
  color: #c9d1d9;
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 20px;
}

.container {
  max-width: 860px;
  width: 100%;
  text-align: center;
}

header { margin-bottom: 32px; }

header h1 {
  font-size: 2rem;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #6364ff, #9a6aff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle { color: #8b949e; font-size: 0.95rem; }

.input-group {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto 20px;
}

#handle-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #30363d;
  border-radius: 8px;
  background: #161b22;
  color: #c9d1d9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}

#handle-input:focus { border-color: #6364ff; }
#handle-input::placeholder { color: #484f58; }

.btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn.primary {
  background: #6364ff;
  color: #fff;
}

.btn.primary:hover { background: #5253db; }
.btn.primary:disabled { opacity: 0.5; cursor: not-allowed; }

.error {
  background: #3d1f1f;
  color: #f85149;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.status {
  background: #161b22;
  color: #8b949e;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.hidden { display: none; }

.canvas-wrapper {
  background: #161b22;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
  border: 1px solid #30363d;
}

#wordcloud-canvas {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.actions.hidden { display: none; }

.actions .btn {
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid #30363d;
}

.actions .btn:hover { background: #30363d; border-color: #6364ff; }

.guide {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 12px;
  font-size: 0.85rem;
  color: #8b949e;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.6;
}

.loading-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid #30363d;
  border-top-color: #6364ff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  .input-group { flex-direction: column; }
  header h1 { font-size: 1.5rem; }
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; }
}