/* ============================================
   TIMBOT — buttons.css
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.6rem;
  border-radius: 980px;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: none;
  transition: all 0.28s var(--ease);
  white-space: nowrap;
}

/* Primary — 시안 */
.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.btn--primary:hover {
  background: var(--color-cyan-light);
  transform: scale(1.025);
  box-shadow: 0 6px 28px var(--color-cyan-glow);
}

/* Ghost — 시안 아웃라인 */
.btn--ghost {
  background: transparent;
  color: var(--btn-ghost-text);
  border: 1.5px solid var(--btn-ghost-border);
}
.btn--ghost:hover {
  background: var(--color-cyan);
  color: var(--color-black);
  box-shadow: 0 4px 20px var(--color-cyan-soft);
}

/* Ghost Light — 흰 테두리 (다크 배경용) */
.btn--ghost-light {
  background: transparent;
  color: rgba(255,255,255,0.70);
  border: 1.5px solid rgba(255,255,255,0.20);
}
.btn--ghost-light:hover {
  border-color: rgba(255,255,255,0.65);
  color: var(--color-white);
}

/* Ghost Dark — 회색 테두리 (라이트 배경용) */
.btn--ghost-dark {
  background: transparent;
  color: var(--color-gray-500);
  border: 1.5px solid var(--color-gray-200);
}
.btn--ghost-dark:hover {
  border-color: var(--color-gray-700);
  color: var(--color-gray-800);
}

/* Full width */
.btn--full { width: 100%; }